Update API doc

doc/common/presetdoc/index.json

@@ -67,6 +67,7 @@
   "terminal": ".p-terminal {\n    @apply h-72 overflow-auto px-3 py-2 rounded-md\n        border border-surface-300 dark:border-surface-700 \n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n}\n\n.p-terminal-prompt {\n    @apply flex items-center\n}\n\n.p-terminal-prompt-value {\n    @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base\n}\n\n.p-terminal-prompt-label {\n    @apply mr-1\n}\n\n.p-terminal-input::-ms-clear {\n    @apply hidden\n}",
   "textarea": ".p-textarea {\n    @apply appearance-none rounded-md\n        border border-surface-300 dark:border-surface-700 \n        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600\n        enabled:focus:border-primary\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400\n        placeholder:text-surface-500 dark:placeholder:text-surface-400\n        px-3 py-2\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        outline-none\n}\n\n.p-textarea.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-textarea.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-textarea-fluid {\n    @apply w-full\n}\n\n.p-textarea-resizable {\n    @apply overflow-hidden resize-none\n}",
   "tieredmenu": ".p-tieredmenu {\n    @apply bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0 \n        border border-surface-200 dark:border-surface-700\n        rounded-md min-w-52\n}\n\n.p-tieredmenu-root-list,\n.p-tieredmenu-submenu {\n    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px] \n}\n\n.p-tieredmenu-submenu {\n    @apply absolute min-w-full z-10 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0 \n        border border-surface-200 dark:border-surface-700\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tieredmenu-item {\n    @apply relative\n}\n\n.p-tieredmenu-item-content {\n    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0\n}\n\n.p-tieredmenu-item-link {\n    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit\n        px-3 py-2 gap-2 select-none outline-none\n}\n\n.p-tieredmenu-item-icon {\n    @apply text-surface-400 dark:text-surface-500\n}\n\n.p-tieredmenu-submenu-icon {\n    @apply text-surface-400 dark:text-surface-500 ml-auto text-sm w-[0.875rem] h-[0.875rem]\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-tieredmenu-separator {\n    @apply border-t border-surface-200 dark:border-surface-700\n}\n\n.p-tieredmenu-overlay {\n    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-tieredmenu-enter-from,\n.p-tieredmenu-leave-active {\n    @apply opacity-0\n}\n\n.p-tieredmenu-enter-active {\n    @apply transition-opacity duration-[250ms]\n}\n\n.p-tieredmenu-mobile {\n    @apply relative\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-button {\n    @apply flex\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-root-list > .p-tieredmenu-item > .p-tieredmenu-item-content > .p-tieredmenu-item-link {\n    @apply px-3 py-2\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-item {\n    @apply static\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {\n    @apply transition-transform duration-200 rotate-90\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    @apply -rotate-90\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu {\n    @apply static shadow-none border-none pl-4\n}",
+  "timeline": ".p-timeline {\n    @apply flex flex-col flex-grow \n}\n\n.p-timeline-left .p-timeline-event-opposite {\n    @apply text-right\n}\n\n.p-timeline-left .p-timeline-event-content {\n    @apply text-left\n}\n\n.p-timeline-right .p-timeline-event {\n    @apply flex-row-reverse\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n    @apply text-left\n}\n\n.p-timeline-right .p-timeline-event-content {\n    @apply text-right\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    @apply flex-row-reverse\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    @apply text-right\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    @apply text-left\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    @apply text-left\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    @apply text-right\n}\n\n.p-timeline-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n    @apply py-0 px-4 leading-none\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n    @apply w-[2px]\n}\n\n.p-timeline-event {\n    @apply flex relative min-h-20 last:min-h-0\n}\n\n.p-timeline-event-opposite {\n    @apply flex-1\n}\n\n.p-timeline-event-content {\n    @apply flex-1\n}\n\n.p-timeline-event-separator {\n    @apply flex-none flex flex-col items-center \n}\n\n.p-timeline-event-marker {\n    @apply inline-flex items-center justify-center relative self-baseline\n        border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]\n        bg-surface-0 dark:bg-surface-900\n        before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary\n        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]\n}\n\n.p-timeline-event-connector {\n    @apply flex-grow bg-surface-200 dark:bg-surface-700\n}\n\n.p-timeline-horizontal {\n    @apply flex-row\n}\n\n.p-timeline-horizontal .p-timeline-event {\n    @apply flex-col flex-1\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n    @apply flex-none\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n    @apply flex-row\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n    @apply w-full h-[2px]\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n    @apply py-4 px-0\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    @apply flex-col-reverse\n}\n\n.p-timeline-bottom .p-timeline-event {\n    @apply flex-col-reverse\n}",
   "toast": ".p-toast {\n    @apply w-96 rounded-md whitespace-pre-line break-words\n}\n\n.p-toast-message {\n    @apply mb-4\n}\n\n.p-toast-message-icon {\n    @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]\n}\n\n.p-toast-message-content {\n    @apply flex items-start p-3 gap-2\n}\n\n.p-toast-message-text {\n    @apply flex-auto flex flex-col gap-2\n}\n\n.p-toast-summary {\n    @apply font-medium text-base\n}\n\n.p-toast-detail {\n    @apply font-medium text-sm\n}\n\n.p-toast-close-button {\n    @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none\n        transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -right-1/4 p-0 border-none \n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2\n}\n\n.p-toast-message-info,\n.p-toast-message-success,\n.p-toast-message-warn,\n.p-toast-message-error,\n.p-toast-message-secondary,\n.p-toast-message-contrast {\n    @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md\n}\n\n.p-toast-close-icon {\n    @apply text-base w-4 h-4\n}\n\n.p-toast-message-info {\n    @apply bg-blue-50/95 border-blue-200 text-blue-600\n        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-toast-message-info .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-info .p-toast-close-button {\n    @apply hover:bg-blue-100 focus-visible:outline-blue-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500\n}\n\n.p-toast-message-success {\n    @apply bg-green-50/95 border-green-200 text-green-600\n        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500\n        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]\n}\n\n.p-toast-message-success .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-success .p-toast-close-button {\n    @apply hover:bg-green-100 focus-visible:outline-green-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-green-500\n}\n\n.p-toast-message-warn {\n    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600\n        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500\n        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]\n}\n\n.p-toast-message-warn .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-warn .p-toast-close-button {\n    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500\n}\n\n.p-toast-message-error {\n    @apply bg-red-50/95 border-red-200 text-red-600\n        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500\n        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]\n}\n\n.p-toast-message-error .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-error .p-toast-close-button {\n    @apply hover:bg-red-100 focus-visible:outline-red-600\n        dark:hover:bg-white/5 dark:focus-visible:outline-red-500\n}\n\n.p-toast-message-secondary {\n    @apply bg-surface-100 border-surface-200 text-surface-600\n        dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300\n        shadow-[0px_4px_8px_0px_theme(colors.surface.500/0.04)]\n}\n\n.p-toast-message-secondary .p-toast-detail {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-toast-message-secondary .p-toast-close-button {\n    @apply hover:bg-surface-200 focus-visible:outline-surface-600\n        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300\n}\n\n.p-toast-message-contrast {\n    @apply bg-surface-900 border-surface-950 text-surface-50\n        dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950\n        shadow-[0px_4px_8px_0px_theme(colors.surface.950/0.04)]\n}\n\n.p-toast-message-contrast .p-toast-detail {\n    @apply text-surface-0 dark:text-surface-950\n}\n\n.p-toast-message-contrast .p-toast-close-button {\n    @apply hover:bg-surface-800 focus-visible:outline-surface-50\n        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950\n}\n\n.p-toast-top-center {\n    @apply -translate-x-1/2;\n}\n\n.p-toast-bottom-center {\n    @apply -translate-x-1/2;\n}\n\n.p-toast-center {\n    @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2\n}\n\n.p-toast-message-enter-from {\n    @apply opacity-0 translate-y-1/2\n}\n\n.p-toast-message-leave-from {\n    @apply max-h-[1000px]\n}\n\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    @apply max-h-0 opacity-0 mb-0 overflow-hidden\n}\n\n.p-toast-message-enter-active {\n    @apply [transition:transform_0.3s,opacity_0.3s]\n}\n\n.p-toast-message-leave-active {\n    @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]\n}",
   "togglebutton": ".p-togglebutton {\n    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none\n        border border-surface-100 dark:border-surface-950 rounded-md\n        bg-surface-100 dark:bg-surface-950\n        text-surface-500 dark:text-surface-400 text-base font-medium\n        px-4 py-2\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        disabled:opacity-100 disabled:cursor-default \n        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500\n        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400\n        transition-colors duration-300\n        before:bg-transparent before:absolute before:left-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]\n        before:transition-colors before:duration-200\n}\n\n.p-togglebutton-content {\n    @apply relative inline-flex items-center justify-center gap-2\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    @apply relative transition-none\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    @apply text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    @apply text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}",
   "toggleswitch": ".p-toggleswitch {\n    @apply inline-block w-10 h-6\n}\n\n.p-toggleswitch-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 left-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]\n}\n\n.p-toggleswitch-slider {\n    @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        bg-surface-300 dark:bg-surface-700\n        border border-transparent\n        transition-colors duration-200\n}\n\n.p-toggleswitch-handle {\n    @apply absolute top-1/2 flex justify-center items-center\n        bg-surface-0 dark:bg-surface-400\n        text-surface-500 dark:text-surface-900\n        w-4 h-4 left-1 -mt-2 rounded-full\n        transition-[background,color,left] duration-200\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary left-5\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {\n    @apply bg-surface-400 dark:bg-surface-600\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-toggleswitch.p-invalid > .p-toggleswitch-slider {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-toggleswitch.p-disabled {\n    @apply opacity-100\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-slider {\n    @apply bg-surface-200 dark:bg-surface-800\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-handle {\n    @apply bg-surface-700 dark:bg-surface-500\n}",