@ifhover/leaf-ui 0.6.0 → 0.7.0

package/dist/esm/browser/modules/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs/tabs.js","sources":["../../../../../src/tabs/tabs.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Ellipsis, GripVertical, Plus, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { ButtonControl } from '../button/button';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { DropdownControl as Dropdown } from '../dropdown/dropdown';\nimport { classes } from '../shared/classes';\nimport { useMotionEnabled } from '../shared/motion';\nimport type { ControlSize } from '../shared/types';\nimport { useDragAnnouncements } from '../shared/use-drag-announcements';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\nimport { useMovingIndicator } from './use-moving-indicator';\n\nexport interface TabItem {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  closable?: boolean;\n}\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  items: readonly TabItem[];\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (key: string) => void;\n  type?: 'line' | 'card';\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n  size?: ControlSize;\n  activationMode?: 'automatic' | 'manual';\n  destroyInactive?: boolean;\n  extra?: ReactNode;\n  onClose?: (key: string, event: MouseEvent<HTMLButtonElement>) => void;\n  onAdd?: () => void;\n  addLabel?: string;\n  overflow?: boolean;\n  sortable?: boolean;\n  onReorder?: (items: TabItem[]) => void;\n}\nexport function TabsControl({\n  items,\n  activeKey,\n  defaultActiveKey,\n  onChange,\n  type = 'line',\n  placement = 'top',\n  size = 'md',\n  activationMode = 'automatic',\n  destroyInactive = false,\n  extra,\n  onClose,\n  onAdd,\n  addLabel,\n  overflow = true,\n  sortable = false,\n  onReorder,\n  className,\n  'aria-label': label,\n  ...props\n}: TabsProps) {\n  const { direction } = useLeafConfig();\n  const t = useText();\n  const format = useFormattedText();\n  const enabled = items.filter((item) => !item.disabled);\n  const [internal, setInternal] = useState(defaultActiveKey ?? enabled[0]?.key);\n  const requested = activeKey ?? internal;\n  const selected = enabled.find((item) => item.key === requested)?.key ?? enabled[0]?.key;\n  const [focused, setFocused] = useState<string>();\n  const focusKey = enabled.some((item) => item.key === focused) ? focused : selected;\n  const [visited, setVisited] = useState<readonly string[]>(selected ? [selected] : []);\n  if (selected && !visited.includes(selected)) setVisited([...visited, selected]);\n  const id = useId();\n  const list = useRef<HTMLDivElement>(null);\n  const track = useRef<HTMLDivElement>(null);\n  const indicator = useRef<HTMLSpanElement>(null);\n  useMovingIndicator(\n    track,\n    indicator,\n    '[data-leaf-indicator-item][data-active=\"true\"]',\n    `${selected}-${placement}-${type}-${direction}`,\n    items.length > 0,\n  );\n  const header = useRef<HTMLDivElement>(null);\n  const [overflowKeys, setOverflowKeys] = useState<string[]>([]);\n  const sorting = sortable && Boolean(onReorder);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: Observe the new tab elements after the item list changes.\n  useEffect(() => {\n    const node = list.current;\n    const container = header.current;\n    if (!overflow || !node || !container) {\n      setOverflowKeys([]);\n      return;\n    }\n    const measure = () => {\n      const horizontal = placement === 'top' || placement === 'bottom';\n      const entries = Array.from(node.querySelectorAll<HTMLElement>('[data-tab-key]'));\n      const more = container.querySelector<HTMLElement>('[data-tabs-more]');\n      const fullSize =\n        (horizontal ? node.clientWidth : node.clientHeight) +\n        (more\n          ? (horizontal ? more.offsetWidth : more.offsetHeight) +\n            (Number.parseFloat(getComputedStyle(container)[horizontal ? 'columnGap' : 'rowGap']) ||\n              0)\n          : 0);\n      const total = horizontal ? node.scrollWidth : node.scrollHeight;\n      const rect = node.getBoundingClientRect();\n      const keys =\n        total <= fullSize + 1\n          ? []\n          : entries\n              .filter((entry) => {\n                const item = entry.getBoundingClientRect();\n                return horizontal\n                  ? item.left < rect.left - 1 || item.right > rect.right + 1\n                  : item.top < rect.top - 1 || item.bottom > rect.bottom + 1;\n              })\n              .map((entry) => entry.dataset.tabKey ?? '');\n      setOverflowKeys((previous) =>\n        previous.length === keys.length && previous.every((key, index) => key === keys[index])\n          ? previous\n          : keys,\n      );\n    };\n    measure();\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(node);\n    observer?.observe(container);\n    for (const entry of node.children) observer?.observe(entry);\n    node.addEventListener('scroll', measure, { passive: true });\n    window.addEventListener('resize', measure);\n    return () => {\n      observer?.disconnect();\n      node.removeEventListener('scroll', measure);\n      window.removeEventListener('resize', measure);\n    };\n  }, [overflow, placement, items]);\n  const choose = (key: string) => {\n    if (!enabled.some((item) => item.key === key)) return;\n    if (activeKey === undefined) setInternal(key);\n    if (key !== selected) onChange?.(key);\n  };\n  if (items.length === 0) return null;\n  return (\n    <div\n      {...props}\n      className={classes(\n        'leaf-tabs',\n        `leaf-tabs--${type}`,\n        `leaf-tabs--${placement}`,\n        `leaf-tabs--${size}`,\n        className,\n      )}\n    >\n      <TabDragScope enabled={sorting} items={items} onReorder={onReorder}>\n        <div className=\"leaf-tabs__header\" ref={header}>\n          <div\n            ref={list}\n            onBlur={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) setFocused(undefined);\n            }}\n            role=\"tablist\"\n            aria-label={label}\n            aria-orientation={\n              placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n            }\n            className=\"leaf-tabs__list\"\n          >\n            <div ref={track} className=\"leaf-tabs__track\">\n              <span ref={indicator} className=\"leaf-tabs__indicator\" aria-hidden=\"true\" />\n              <SortableContext\n                items={items.map((item) => item.key)}\n                strategy={\n                  placement === 'top' || placement === 'bottom'\n                    ? horizontalListSortingStrategy\n                    : verticalListSortingStrategy\n                }\n              >\n                {items.map((item, index) => (\n                  <TabEntry\n                    item={item}\n                    sortable={sorting}\n                    className=\"leaf-tabs__entry\"\n                    key={item.key}\n                    data-active={item.key === selected || undefined}\n                    data-leaf-indicator-item=\"\"\n                  >\n                    <button\n                      id={`${id}-tab-${index}`}\n                      type=\"button\"\n                      role=\"tab\"\n                      aria-selected={item.key === selected}\n                      aria-controls={`${id}-panel-${index}`}\n                      disabled={item.disabled}\n                      tabIndex={item.key === focusKey ? 0 : -1}\n                      className=\"leaf-tabs__tab\"\n                      onFocus={() => setFocused(item.key)}\n                      onClick={() => choose(item.key)}\n                      onKeyDown={(event) => {\n                        let next: string | undefined;\n                        const position = enabled.findIndex((entry) => entry.key === item.key);\n                        const forward =\n                          placement === 'left' || placement === 'right'\n                            ? 'ArrowDown'\n                            : direction === 'rtl'\n                              ? 'ArrowLeft'\n                              : 'ArrowRight';\n                        const backward =\n                          placement === 'left' || placement === 'right'\n                            ? 'ArrowUp'\n                            : direction === 'rtl'\n                              ? 'ArrowRight'\n                              : 'ArrowLeft';\n                        if (event.key === forward)\n                          next = enabled[(position + 1) % enabled.length]?.key;\n                        else if (event.key === backward)\n                          next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;\n                        else if (event.key === 'Home') next = enabled[0]?.key;\n                        else if (event.key === 'End') next = enabled.at(-1)?.key;\n                        if (next !== undefined) {\n                          event.preventDefault();\n                          setFocused(next);\n                          const nextIndex = items.findIndex((entry) => entry.key === next);\n                          list.current\n                            ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                            ?.focus();\n                          if (activationMode === 'automatic') choose(next);\n                        }\n                      }}\n                    >\n                      {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n                      {item.label}\n                    </button>\n                    {item.closable && (\n                      <button\n                        type=\"button\"\n                        className=\"leaf-tabs__close\"\n                        disabled={item.disabled || !onClose}\n                        aria-label={format('tabs.closeLabel', {\n                          label: typeof item.label === 'string' ? item.label : item.key,\n                        })}\n                        onClick={(event) => {\n                          onClose?.(item.key, event);\n                          if (event.defaultPrevented) return;\n                          const position = enabled.findIndex((entry) => entry.key === item.key);\n                          const next =\n                            item.key === selected\n                              ? (enabled[position + 1] ?? enabled[position - 1])\n                              : enabled.find((entry) => entry.key === selected);\n                          if (next) {\n                            if (item.key === selected) choose(next.key);\n                            const nextIndex = items.findIndex((entry) => entry.key === next.key);\n                            list.current\n                              ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                              ?.focus();\n                          }\n                        }}\n                      >\n                        <X size={13} aria-hidden=\"true\" />\n                      </button>\n                    )}\n                  </TabEntry>\n                ))}\n              </SortableContext>\n            </div>\n          </div>\n          {overflowKeys.length > 0 && (\n            <Dropdown\n              items={items\n                .filter((item) => overflowKeys.includes(item.key))\n                .map((item) => ({\n                  key: item.key,\n                  label: item.label,\n                  disabled: item.disabled,\n                  onClick: () => {\n                    choose(item.key);\n                    requestAnimationFrame(() => {\n                      const target = document.getElementById(`${id}-tab-${items.indexOf(item)}`);\n                      target?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n                      target?.focus();\n                    });\n                  },\n                }))}\n            >\n              <ButtonControl\n                className=\"leaf-tabs__action\"\n                data-tabs-more=\"\"\n                variant=\"ghost\"\n                size={size}\n                startIcon={<Ellipsis size={16} />}\n                aria-label={t('tabs.moreTabs')}\n              />\n            </Dropdown>\n          )}\n          {onAdd && (\n            <ButtonControl\n              className=\"leaf-tabs__action\"\n              variant=\"ghost\"\n              size={size}\n              startIcon={<Plus size={16} />}\n              aria-label={addLabel ?? t('tabs.addTab')}\n              onClick={onAdd}\n            />\n          )}\n          {extra && <div className=\"leaf-tabs__extra\">{extra}</div>}\n        </div>\n      </TabDragScope>\n      <div className=\"leaf-tabs__panels\">\n        {items.map((item, index) => (\n          <div\n            key={item.key}\n            id={`${id}-panel-${index}`}\n            role=\"tabpanel\"\n            aria-labelledby={`${id}-tab-${index}`}\n            hidden={item.key !== selected}\n            // biome-ignore lint/a11y/noNoninteractiveTabindex: Tabpanels are keyboard focus destinations in the ARIA tabs pattern.\n            tabIndex={0}\n            className=\"leaf-tabs__panel\"\n          >\n            {(item.key === selected || (!destroyInactive && visited.includes(item.key))) &&\n              item.children}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction TabEntry({\n  item,\n  sortable,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem; sortable: boolean }) {\n  return sortable ? (\n    <SortableTab item={item} {...props} />\n  ) : (\n    <div {...props} data-tab-key={item.key} />\n  );\n}\nfunction SortableTab({\n  item,\n  children,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem }) {\n  const format = useFormattedText();\n  const motion = useMotionEnabled();\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: item.key, disabled: item.disabled });\n  return (\n    <div\n      {...props}\n      ref={setNodeRef}\n      data-tab-key={item.key}\n      data-dragging={isDragging || undefined}\n      style={{\n        ...props.style,\n        transform: CSS.Transform.toString(transform),\n        transition:\n          motion && transition\n            ? 'transform var(--leaf-motion-slow) var(--leaf-motion-easing)'\n            : undefined,\n      }}\n    >\n      <button\n        type=\"button\"\n        {...attributes}\n        {...listeners}\n        ref={setActivatorNodeRef}\n        disabled={item.disabled}\n        className=\"leaf-tabs__drag\"\n        aria-label={format('tabs.reorder', {\n          label: typeof item.label === 'string' ? item.label : item.key,\n        })}\n      >\n        <GripVertical size={13} aria-hidden=\"true\" />\n      </button>\n      {children}\n    </div>\n  );\n}\n\nfunction TabDragScope({\n  enabled,\n  items,\n  onReorder,\n  children,\n}: {\n  enabled: boolean;\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  return enabled ? (\n    <TabSortScope items={items} onReorder={onReorder}>\n      {children}\n    </TabSortScope>\n  ) : (\n    children\n  );\n}\nfunction TabSortScope({\n  items,\n  onReorder,\n  children,\n}: {\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  const id = useId();\n  const accessibility = useDragAnnouncements((key) => {\n    const item = items.find((entry) => entry.key === key);\n    return typeof item?.label === 'string' ? item.label : String(key);\n  });\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  );\n  return (\n    <DndContext\n      id={id}\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      accessibility={accessibility}\n      onDragEnd={({ active, over }) => {\n        if (!over || active.id === over.id) return;\n        const from = items.findIndex((item) => item.key === active.id);\n        const to = items.findIndex((item) => item.key === over.id);\n        if (from >= 0 && to >= 0 && !items[to]?.disabled)\n          onReorder?.(arrayMove([...items], from, to));\n      }}\n    >\n      {children}\n    </DndContext>\n  );\n}\n\nexport function Tabs(rawProps: TabsProps) {\n  const props = useComponentProps('Tabs', rawProps);\n  return <TabsControl {...props} />;\n}\n"],"names":["TabsControl","items","activeKey","defaultActiveKey","onChange","type","placement","size","activationMode","destroyInactive","extra","onClose","onAdd","addLabel","overflow","sortable","onReorder","className","label","props","direction","useLeafConfig","t","useText","format","useFormattedText","enabled","item","internal","setInternal","useState","requested","selected","focused","setFocused","focusKey","visited","setVisited","id","useId","list","useRef","track","indicator","useMovingIndicator","header","overflowKeys","setOverflowKeys","sorting","Boolean","useEffect","node","container","measure","horizontal","entries","Array","more","fullSize","Number","getComputedStyle","total","rect","keys","entry","previous","key","index","observer","ResizeObserver","window","choose","undefined","classes","TabDragScope","event","SortableContext","horizontalListSortingStrategy","verticalListSortingStrategy","TabEntry","next","position","forward","backward","nextIndex","X","Dropdown","requestAnimationFrame","target","document","ButtonControl","Ellipsis","Plus","SortableTab","children","motion","useMotionEnabled","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","isDragging","useSortable","CSS","GripVertical","TabSortScope","accessibility","useDragAnnouncements","String","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","active","over","from","to","arrayMove","Tabs","rawProps","useComponentProps"],"mappings":"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"}
+{"version":3,"file":"tabs/tabs.js","sources":["../../../../../src/tabs/tabs.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Ellipsis, GripVertical, Plus, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { ButtonControl } from '../button/button';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { DropdownControl as Dropdown } from '../dropdown/dropdown';\nimport { ScrollbarControl } from '../scrollbar/scrollbar';\nimport { classes } from '../shared/classes';\nimport { useMotionEnabled } from '../shared/motion';\nimport type { ControlSize } from '../shared/types';\nimport { useDragAnnouncements } from '../shared/use-drag-announcements';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\nimport { useMovingIndicator } from './use-moving-indicator';\n\nexport interface TabItem {\n  key: string;\n  label: ReactNode;\n  children?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  closable?: boolean;\n}\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  items: readonly TabItem[];\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (key: string) => void;\n  type?: 'line' | 'card';\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n  size?: ControlSize;\n  /** Fill the available width with equally sized tabs. */\n  block?: boolean;\n  activationMode?: 'automatic' | 'manual';\n  destroyInactive?: boolean;\n  extra?: ReactNode;\n  onClose?: (key: string, event: MouseEvent<HTMLButtonElement>) => void;\n  onAdd?: () => void;\n  addLabel?: string;\n  overflow?: boolean;\n  sortable?: boolean;\n  onReorder?: (items: TabItem[]) => void;\n}\nexport function TabsControl({\n  items,\n  activeKey,\n  defaultActiveKey,\n  onChange,\n  type = 'line',\n  placement = 'top',\n  size = 'md',\n  block = false,\n  activationMode = 'automatic',\n  destroyInactive = false,\n  extra,\n  onClose,\n  onAdd,\n  addLabel,\n  overflow = true,\n  sortable = false,\n  onReorder,\n  className,\n  'aria-label': label,\n  ...props\n}: TabsProps) {\n  const { direction } = useLeafConfig();\n  const t = useText();\n  const format = useFormattedText();\n  const enabled = items.filter((item) => !item.disabled);\n  const [internal, setInternal] = useState(defaultActiveKey ?? enabled[0]?.key);\n  const requested = activeKey ?? internal;\n  const selected = enabled.find((item) => item.key === requested)?.key ?? enabled[0]?.key;\n  const [focused, setFocused] = useState<string>();\n  const focusKey = enabled.some((item) => item.key === focused) ? focused : selected;\n  const [visited, setVisited] = useState<readonly string[]>(selected ? [selected] : []);\n  if (selected && !visited.includes(selected)) setVisited([...visited, selected]);\n  const id = useId();\n  const list = useRef<HTMLDivElement>(null);\n  const track = useRef<HTMLDivElement>(null);\n  const indicator = useRef<HTMLSpanElement>(null);\n  useMovingIndicator(\n    track,\n    indicator,\n    '[data-leaf-indicator-item][data-active=\"true\"]',\n    `${selected}-${placement}-${type}-${direction}`,\n    items.length > 0,\n  );\n  const header = useRef<HTMLDivElement>(null);\n  const [overflowKeys, setOverflowKeys] = useState<string[]>([]);\n  const sorting = sortable && Boolean(onReorder);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: Observe the new tab elements after the item list changes.\n  useEffect(() => {\n    const node = list.current;\n    const container = header.current;\n    if (!overflow || !node || !container) {\n      setOverflowKeys([]);\n      return;\n    }\n    const measure = () => {\n      const horizontal = placement === 'top' || placement === 'bottom';\n      const entries = Array.from(node.querySelectorAll<HTMLElement>('[data-tab-key]'));\n      const more = container.querySelector<HTMLElement>('[data-tabs-more]');\n      const fullSize =\n        (horizontal ? node.clientWidth : node.clientHeight) +\n        (more\n          ? (horizontal ? more.offsetWidth : more.offsetHeight) +\n            (Number.parseFloat(getComputedStyle(container)[horizontal ? 'columnGap' : 'rowGap']) ||\n              0)\n          : 0);\n      const total = horizontal ? node.scrollWidth : node.scrollHeight;\n      const rect = node.getBoundingClientRect();\n      const keys =\n        total <= fullSize + 1\n          ? []\n          : entries\n              .filter((entry) => {\n                const item = entry.getBoundingClientRect();\n                return horizontal\n                  ? item.left < rect.left - 1 || item.right > rect.right + 1\n                  : item.top < rect.top - 1 || item.bottom > rect.bottom + 1;\n              })\n              .map((entry) => entry.dataset.tabKey ?? '');\n      setOverflowKeys((previous) =>\n        previous.length === keys.length && previous.every((key, index) => key === keys[index])\n          ? previous\n          : keys,\n      );\n    };\n    measure();\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(node);\n    observer?.observe(container);\n    for (const entry of node.children) observer?.observe(entry);\n    node.addEventListener('scroll', measure, { passive: true });\n    window.addEventListener('resize', measure);\n    return () => {\n      observer?.disconnect();\n      node.removeEventListener('scroll', measure);\n      window.removeEventListener('resize', measure);\n    };\n  }, [overflow, placement, items]);\n  const choose = (key: string) => {\n    if (!enabled.some((item) => item.key === key)) return;\n    if (activeKey === undefined) setInternal(key);\n    if (key !== selected) onChange?.(key);\n  };\n  if (items.length === 0) return null;\n  return (\n    <div\n      {...props}\n      className={classes(\n        'leaf-tabs',\n        `leaf-tabs--${type}`,\n        `leaf-tabs--${placement}`,\n        `leaf-tabs--${size}`,\n        block && 'leaf-tabs--block',\n        className,\n      )}\n    >\n      <TabDragScope enabled={sorting} items={items} onReorder={onReorder}>\n        <div className=\"leaf-tabs__header\" ref={header}>\n          <ScrollbarControl\n            ref={list}\n            onBlur={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) setFocused(undefined);\n            }}\n            role=\"tablist\"\n            aria-label={label}\n            viewportProps={{\n              'aria-orientation':\n                placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal',\n            }}\n            className=\"leaf-tabs__scroll\"\n            viewportClassName=\"leaf-tabs__list\"\n            tabIndex={-1}\n            scrollbarTabIndex={-1}\n          >\n            <div ref={track} className=\"leaf-tabs__track\">\n              <span ref={indicator} className=\"leaf-tabs__indicator\" aria-hidden=\"true\" />\n              <SortableContext\n                items={items.map((item) => item.key)}\n                strategy={\n                  placement === 'top' || placement === 'bottom'\n                    ? horizontalListSortingStrategy\n                    : verticalListSortingStrategy\n                }\n              >\n                {items.map((item, index) => (\n                  <TabEntry\n                    item={item}\n                    sortable={sorting}\n                    className=\"leaf-tabs__entry\"\n                    key={item.key}\n                    data-active={item.key === selected || undefined}\n                    data-leaf-indicator-item=\"\"\n                  >\n                    <button\n                      id={`${id}-tab-${index}`}\n                      type=\"button\"\n                      role=\"tab\"\n                      aria-selected={item.key === selected}\n                      aria-controls={item.children != null ? `${id}-panel-${index}` : undefined}\n                      disabled={item.disabled}\n                      tabIndex={item.key === focusKey ? 0 : -1}\n                      className=\"leaf-tabs__tab\"\n                      onFocus={() => setFocused(item.key)}\n                      onClick={() => choose(item.key)}\n                      onKeyDown={(event) => {\n                        let next: string | undefined;\n                        const position = enabled.findIndex((entry) => entry.key === item.key);\n                        const forward =\n                          placement === 'left' || placement === 'right'\n                            ? 'ArrowDown'\n                            : direction === 'rtl'\n                              ? 'ArrowLeft'\n                              : 'ArrowRight';\n                        const backward =\n                          placement === 'left' || placement === 'right'\n                            ? 'ArrowUp'\n                            : direction === 'rtl'\n                              ? 'ArrowRight'\n                              : 'ArrowLeft';\n                        if (event.key === forward)\n                          next = enabled[(position + 1) % enabled.length]?.key;\n                        else if (event.key === backward)\n                          next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;\n                        else if (event.key === 'Home') next = enabled[0]?.key;\n                        else if (event.key === 'End') next = enabled.at(-1)?.key;\n                        if (next !== undefined) {\n                          event.preventDefault();\n                          setFocused(next);\n                          const nextIndex = items.findIndex((entry) => entry.key === next);\n                          list.current\n                            ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                            ?.focus();\n                          if (activationMode === 'automatic') choose(next);\n                        }\n                      }}\n                    >\n                      {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n                      {item.label}\n                    </button>\n                    {item.closable && (\n                      <button\n                        type=\"button\"\n                        className=\"leaf-tabs__close\"\n                        disabled={item.disabled || !onClose}\n                        aria-label={format('tabs.closeLabel', {\n                          label: typeof item.label === 'string' ? item.label : item.key,\n                        })}\n                        onClick={(event) => {\n                          onClose?.(item.key, event);\n                          if (event.defaultPrevented) return;\n                          const position = enabled.findIndex((entry) => entry.key === item.key);\n                          const next =\n                            item.key === selected\n                              ? (enabled[position + 1] ?? enabled[position - 1])\n                              : enabled.find((entry) => entry.key === selected);\n                          if (next) {\n                            if (item.key === selected) choose(next.key);\n                            const nextIndex = items.findIndex((entry) => entry.key === next.key);\n                            list.current\n                              ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                              ?.focus();\n                          }\n                        }}\n                      >\n                        <X size={13} aria-hidden=\"true\" />\n                      </button>\n                    )}\n                  </TabEntry>\n                ))}\n              </SortableContext>\n            </div>\n          </ScrollbarControl>\n          {overflowKeys.length > 0 && (\n            <Dropdown\n              items={items\n                .filter((item) => overflowKeys.includes(item.key))\n                .map((item) => ({\n                  key: item.key,\n                  label: item.label,\n                  disabled: item.disabled,\n                  onClick: () => {\n                    choose(item.key);\n                    requestAnimationFrame(() => {\n                      const target = document.getElementById(`${id}-tab-${items.indexOf(item)}`);\n                      target?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n                      target?.focus();\n                    });\n                  },\n                }))}\n            >\n              <ButtonControl\n                className=\"leaf-tabs__action\"\n                data-tabs-more=\"\"\n                variant=\"ghost\"\n                size={size}\n                startIcon={<Ellipsis size={16} />}\n                aria-label={t('tabs.moreTabs')}\n              />\n            </Dropdown>\n          )}\n          {onAdd && (\n            <ButtonControl\n              className=\"leaf-tabs__action\"\n              variant=\"ghost\"\n              size={size}\n              startIcon={<Plus size={16} />}\n              aria-label={addLabel ?? t('tabs.addTab')}\n              onClick={onAdd}\n            />\n          )}\n          {extra && <div className=\"leaf-tabs__extra\">{extra}</div>}\n        </div>\n      </TabDragScope>\n      {items.some((item) => item.children != null) && (\n        <div className=\"leaf-tabs__panels\">\n          {items.map(\n            (item, index) =>\n              item.children != null && (\n                <div\n                  key={item.key}\n                  id={`${id}-panel-${index}`}\n                  role=\"tabpanel\"\n                  aria-labelledby={`${id}-tab-${index}`}\n                  hidden={item.key !== selected}\n                  // biome-ignore lint/a11y/noNoninteractiveTabindex: Tabpanels are keyboard focus destinations in the ARIA tabs pattern.\n                  tabIndex={0}\n                  className=\"leaf-tabs__panel\"\n                >\n                  {(item.key === selected || (!destroyInactive && visited.includes(item.key))) &&\n                    item.children}\n                </div>\n              ),\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction TabEntry({\n  item,\n  sortable,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem; sortable: boolean }) {\n  return sortable ? (\n    <SortableTab item={item} {...props} />\n  ) : (\n    <div {...props} data-tab-key={item.key} />\n  );\n}\nfunction SortableTab({\n  item,\n  children,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem }) {\n  const format = useFormattedText();\n  const motion = useMotionEnabled();\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: item.key, disabled: item.disabled });\n  return (\n    <div\n      {...props}\n      ref={setNodeRef}\n      data-tab-key={item.key}\n      data-dragging={isDragging || undefined}\n      style={{\n        ...props.style,\n        transform: CSS.Transform.toString(transform),\n        transition:\n          motion && transition\n            ? 'transform var(--leaf-motion-slow) var(--leaf-motion-easing)'\n            : undefined,\n      }}\n    >\n      <button\n        type=\"button\"\n        {...attributes}\n        {...listeners}\n        ref={setActivatorNodeRef}\n        disabled={item.disabled}\n        className=\"leaf-tabs__drag\"\n        aria-label={format('tabs.reorder', {\n          label: typeof item.label === 'string' ? item.label : item.key,\n        })}\n      >\n        <GripVertical size={13} aria-hidden=\"true\" />\n      </button>\n      {children}\n    </div>\n  );\n}\n\nfunction TabDragScope({\n  enabled,\n  items,\n  onReorder,\n  children,\n}: {\n  enabled: boolean;\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  return enabled ? (\n    <TabSortScope items={items} onReorder={onReorder}>\n      {children}\n    </TabSortScope>\n  ) : (\n    children\n  );\n}\nfunction TabSortScope({\n  items,\n  onReorder,\n  children,\n}: {\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  const id = useId();\n  const accessibility = useDragAnnouncements((key) => {\n    const item = items.find((entry) => entry.key === key);\n    return typeof item?.label === 'string' ? item.label : String(key);\n  });\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  );\n  return (\n    <DndContext\n      id={id}\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      accessibility={accessibility}\n      onDragEnd={({ active, over }) => {\n        if (!over || active.id === over.id) return;\n        const from = items.findIndex((item) => item.key === active.id);\n        const to = items.findIndex((item) => item.key === over.id);\n        if (from >= 0 && to >= 0 && !items[to]?.disabled)\n          onReorder?.(arrayMove([...items], from, to));\n      }}\n    >\n      {children}\n    </DndContext>\n  );\n}\n\nexport function Tabs(rawProps: TabsProps) {\n  const props = useComponentProps('Tabs', rawProps);\n  return <TabsControl {...props} />;\n}\n"],"names":["TabsControl","items","activeKey","defaultActiveKey","onChange","type","placement","size","block","activationMode","destroyInactive","extra","onClose","onAdd","addLabel","overflow","sortable","onReorder","className","label","props","direction","useLeafConfig","t","useText","format","useFormattedText","enabled","item","internal","setInternal","useState","requested","selected","focused","setFocused","focusKey","visited","setVisited","id","useId","list","useRef","track","indicator","useMovingIndicator","header","overflowKeys","setOverflowKeys","sorting","Boolean","useEffect","node","container","measure","horizontal","entries","Array","more","fullSize","Number","getComputedStyle","total","rect","keys","entry","previous","key","index","observer","ResizeObserver","window","choose","undefined","classes","TabDragScope","ScrollbarControl","event","SortableContext","horizontalListSortingStrategy","verticalListSortingStrategy","TabEntry","next","position","forward","backward","nextIndex","X","Dropdown","requestAnimationFrame","target","document","ButtonControl","Ellipsis","Plus","SortableTab","children","motion","useMotionEnabled","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","isDragging","useSortable","CSS","GripVertical","TabSortScope","accessibility","useDragAnnouncements","String","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","active","over","from","to","arrayMove","Tabs","rawProps","useComponentProps"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoEO,SAASA,YAAY,EAC1BC,KAAK,EACLC,SAAS,EACTC,gBAAgB,EAChBC,QAAQ,EACRC,OAAO,MAAM,EACbC,YAAY,KAAK,EACjBC,OAAO,IAAI,EACXC,QAAQ,KAAK,EACbC,iBAAiB,WAAW,EAC5BC,kBAAkB,KAAK,EACvBC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChBC,SAAS,EACTC,SAAS,EACT,cAAcC,KAAK,EACnB,GAAGC,OACO;IACV,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAMC,IAAIC;IACV,MAAMC,SAASC;IACf,MAAMC,UAAU1B,MAAM,MAAM,CAAC,CAAC2B,OAAS,CAACA,KAAK,QAAQ;IACrD,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAAS5B,oBAAoBwB,OAAO,CAAC,EAAE,EAAE;IACzE,MAAMK,YAAY9B,aAAa2B;IAC/B,MAAMI,WAAWN,QAAQ,IAAI,CAAC,CAACC,OAASA,KAAK,GAAG,KAAKI,YAAY,OAAOL,OAAO,CAAC,EAAE,EAAE;IACpF,MAAM,CAACO,SAASC,WAAW,GAAGJ;IAC9B,MAAMK,WAAWT,QAAQ,IAAI,CAAC,CAACC,OAASA,KAAK,GAAG,KAAKM,WAAWA,UAAUD;IAC1E,MAAM,CAACI,SAASC,WAAW,GAAGP,SAA4BE,WAAW;QAACA;KAAS,GAAG,EAAE;IACpF,IAAIA,YAAY,CAACI,QAAQ,QAAQ,CAACJ,WAAWK,WAAW;WAAID;QAASJ;KAAS;IAC9E,MAAMM,KAAKC;IACX,MAAMC,OAAOC,OAAuB;IACpC,MAAMC,QAAQD,OAAuB;IACrC,MAAME,YAAYF,OAAwB;IAC1CG,mBACEF,OACAC,WACA,kDACA,GAAGX,SAAS,CAAC,EAAE3B,UAAU,CAAC,EAAED,KAAK,CAAC,EAAEgB,WAAW,EAC/CpB,MAAM,MAAM,GAAG;IAEjB,MAAM6C,SAASJ,OAAuB;IACtC,MAAM,CAACK,cAAcC,gBAAgB,GAAGjB,SAAmB,EAAE;IAC7D,MAAMkB,UAAUjC,YAAYkC,QAAQjC;IAEpCkC,UAAU;QACR,MAAMC,OAAOX,KAAK,OAAO;QACzB,MAAMY,YAAYP,OAAO,OAAO;QAChC,IAAI,CAAC/B,YAAY,CAACqC,QAAQ,CAACC,WAAW,YACpCL,gBAAgB,EAAE;QAGpB,MAAMM,UAAU;YACd,MAAMC,aAAajD,AAAc,UAAdA,aAAuBA,AAAc,aAAdA;YAC1C,MAAMkD,UAAUC,MAAM,IAAI,CAACL,KAAK,gBAAgB,CAAc;YAC9D,MAAMM,OAAOL,UAAU,aAAa,CAAc;YAClD,MAAMM,WACHJ,AAAAA,CAAAA,aAAaH,KAAK,WAAW,GAAGA,KAAK,YAAW,IAChDM,CAAAA,OACIH,AAAAA,CAAAA,aAAaG,KAAK,WAAW,GAAGA,KAAK,YAAW,IAChDE,CAAAA,OAAO,UAAU,CAACC,iBAAiBR,UAAU,CAACE,aAAa,cAAc,SAAS,KACjF,KACF;YACN,MAAMO,QAAQP,aAAaH,KAAK,WAAW,GAAGA,KAAK,YAAY;YAC/D,MAAMW,OAAOX,KAAK,qBAAqB;YACvC,MAAMY,OACJF,SAASH,WAAW,IAChB,EAAE,GACFH,QACG,MAAM,CAAC,CAACS;gBACP,MAAMrC,OAAOqC,MAAM,qBAAqB;gBACxC,OAAOV,aACH3B,KAAK,IAAI,GAAGmC,KAAK,IAAI,GAAG,KAAKnC,KAAK,KAAK,GAAGmC,KAAK,KAAK,GAAG,IACvDnC,KAAK,GAAG,GAAGmC,KAAK,GAAG,GAAG,KAAKnC,KAAK,MAAM,GAAGmC,KAAK,MAAM,GAAG;YAC7D,GACC,GAAG,CAAC,CAACE,QAAUA,MAAM,OAAO,CAAC,MAAM,IAAI;YAChDjB,gBAAgB,CAACkB,WACfA,SAAS,MAAM,KAAKF,KAAK,MAAM,IAAIE,SAAS,KAAK,CAAC,CAACC,KAAKC,QAAUD,QAAQH,IAAI,CAACI,MAAM,IACjFF,WACAF;QAER;QACAV;QACA,MAAMe,WAAW,AAA0B,MAA1B,OAAOC,iBAAiC,OAAO,IAAIA,eAAehB;QACnFe,UAAU,QAAQjB;QAClBiB,UAAU,QAAQhB;QAClB,KAAK,MAAMY,SAASb,KAAK,QAAQ,CAAEiB,UAAU,QAAQJ;QACrDb,KAAK,gBAAgB,CAAC,UAAUE,SAAS;YAAE,SAAS;QAAK;QACzDiB,OAAO,gBAAgB,CAAC,UAAUjB;QAClC,OAAO;YACLe,UAAU;YACVjB,KAAK,mBAAmB,CAAC,UAAUE;YACnCiB,OAAO,mBAAmB,CAAC,UAAUjB;QACvC;IACF,GAAG;QAACvC;QAAUT;QAAWL;KAAM;IAC/B,MAAMuE,SAAS,CAACL;QACd,IAAI,CAACxC,QAAQ,IAAI,CAAC,CAACC,OAASA,KAAK,GAAG,KAAKuC,MAAM;QAC/C,IAAIjE,AAAcuE,WAAdvE,WAAyB4B,YAAYqC;QACzC,IAAIA,QAAQlC,UAAU7B,WAAW+D;IACnC;IACA,IAAIlE,AAAiB,MAAjBA,MAAM,MAAM,EAAQ,OAAO;IAC/B,OAAO,WAAP,GACE,KAAC;QACE,GAAGmB,KAAK;QACT,WAAWsD,QACT,aACA,CAAC,WAAW,EAAErE,MAAM,EACpB,CAAC,WAAW,EAAEC,WAAW,EACzB,CAAC,WAAW,EAAEC,MAAM,EACpBC,SAAS,oBACTU;;0BAGF,IAACyD,cAAYA;gBAAC,SAAS1B;gBAAS,OAAOhD;gBAAO,WAAWgB;0BACvD,mBAAC;oBAAI,WAAU;oBAAoB,KAAK6B;;sCACtC,IAAC8B,kBAAgBA;4BACf,KAAKnC;4BACL,QAAQ,CAACoC;gCACP,IAAI,CAACA,MAAM,aAAa,CAAC,QAAQ,CAACA,MAAM,aAAa,GAAG1C,WAAWsC;4BACrE;4BACA,MAAK;4BACL,cAAYtD;4BACZ,eAAe;gCACb,oBACEb,AAAc,WAAdA,aAAwBA,AAAc,YAAdA,YAAwB,aAAa;4BACjE;4BACA,WAAU;4BACV,mBAAkB;4BAClB,UAAU;4BACV,mBAAmB;sCAEnB,mBAAC;gCAAI,KAAKqC;gCAAO,WAAU;;kDACzB,IAAC;wCAAK,KAAKC;wCAAW,WAAU;wCAAuB,eAAY;;kDACnE,IAACkC,iBAAeA;wCACd,OAAO7E,MAAM,GAAG,CAAC,CAAC2B,OAASA,KAAK,GAAG;wCACnC,UACEtB,AAAc,UAAdA,aAAuBA,AAAc,aAAdA,YACnByE,gCACAC;kDAGL/E,MAAM,GAAG,CAAC,CAAC2B,MAAMwC,QAAAA,WAAAA,GAChB,KAACa,UAAQA;gDACP,MAAMrD;gDACN,UAAUqB;gDACV,WAAU;gDAEV,eAAarB,KAAK,GAAG,KAAKK,YAAYwC;gDACtC,4BAAyB;;kEAEzB,KAAC;wDACC,IAAI,GAAGlC,GAAG,KAAK,EAAE6B,OAAO;wDACxB,MAAK;wDACL,MAAK;wDACL,iBAAexC,KAAK,GAAG,KAAKK;wDAC5B,iBAAeL,AAAiB,QAAjBA,KAAK,QAAQ,GAAW,GAAGW,GAAG,OAAO,EAAE6B,OAAO,GAAGK;wDAChE,UAAU7C,KAAK,QAAQ;wDACvB,UAAUA,KAAK,GAAG,KAAKQ,WAAW,IAAI;wDACtC,WAAU;wDACV,SAAS,IAAMD,WAAWP,KAAK,GAAG;wDAClC,SAAS,IAAM4C,OAAO5C,KAAK,GAAG;wDAC9B,WAAW,CAACiD;4DACV,IAAIK;4DACJ,MAAMC,WAAWxD,QAAQ,SAAS,CAAC,CAACsC,QAAUA,MAAM,GAAG,KAAKrC,KAAK,GAAG;4DACpE,MAAMwD,UACJ9E,AAAc,WAAdA,aAAwBA,AAAc,YAAdA,YACpB,cACAe,AAAc,UAAdA,YACE,cACA;4DACR,MAAMgE,WACJ/E,AAAc,WAAdA,aAAwBA,AAAc,YAAdA,YACpB,YACAe,AAAc,UAAdA,YACE,eACA;4DACR,IAAIwD,MAAM,GAAG,KAAKO,SAChBF,OAAOvD,OAAO,CAAEwD,AAAAA,CAAAA,WAAW,KAAKxD,QAAQ,MAAM,CAAC,EAAE;iEAC9C,IAAIkD,MAAM,GAAG,KAAKQ,UACrBH,OAAOvD,OAAO,CAAEwD,AAAAA,CAAAA,WAAW,IAAIxD,QAAQ,MAAK,IAAKA,QAAQ,MAAM,CAAC,EAAE;iEAC/D,IAAIkD,AAAc,WAAdA,MAAM,GAAG,EAAaK,OAAOvD,OAAO,CAAC,EAAE,EAAE;iEAC7C,IAAIkD,AAAc,UAAdA,MAAM,GAAG,EAAYK,OAAOvD,QAAQ,EAAE,CAAC,KAAK;4DACrD,IAAIuD,AAAST,WAATS,MAAoB;gEACtBL,MAAM,cAAc;gEACpB1C,WAAW+C;gEACX,MAAMI,YAAYrF,MAAM,SAAS,CAAC,CAACgE,QAAUA,MAAM,GAAG,KAAKiB;gEAC3DzC,KAAK,OAAO,EACR,cAAiC,CAAC,KAAK,EAAEF,GAAG,KAAK,EAAE+C,UAAU,EAAE,CAAC,GAChE;gEACJ,IAAI7E,AAAmB,gBAAnBA,gBAAgC+D,OAAOU;4DAC7C;wDACF;;4DAECtD,KAAK,IAAI,IAAI,WAAJ,GAAI,IAAC;gEAAK,eAAY;0EAAQA,KAAK,IAAI;;4DAChDA,KAAK,KAAK;;;oDAEZA,KAAK,QAAQ,IAAI,WAAJ,GACZ,IAAC;wDACC,MAAK;wDACL,WAAU;wDACV,UAAUA,KAAK,QAAQ,IAAI,CAAChB;wDAC5B,cAAYa,OAAO,mBAAmB;4DACpC,OAAO,AAAsB,YAAtB,OAAOG,KAAK,KAAK,GAAgBA,KAAK,KAAK,GAAGA,KAAK,GAAG;wDAC/D;wDACA,SAAS,CAACiD;4DACRjE,UAAUgB,KAAK,GAAG,EAAEiD;4DACpB,IAAIA,MAAM,gBAAgB,EAAE;4DAC5B,MAAMM,WAAWxD,QAAQ,SAAS,CAAC,CAACsC,QAAUA,MAAM,GAAG,KAAKrC,KAAK,GAAG;4DACpE,MAAMsD,OACJtD,KAAK,GAAG,KAAKK,WACRN,OAAO,CAACwD,WAAW,EAAE,IAAIxD,OAAO,CAACwD,WAAW,EAAE,GAC/CxD,QAAQ,IAAI,CAAC,CAACsC,QAAUA,MAAM,GAAG,KAAKhC;4DAC5C,IAAIiD,MAAM;gEACR,IAAItD,KAAK,GAAG,KAAKK,UAAUuC,OAAOU,KAAK,GAAG;gEAC1C,MAAMI,YAAYrF,MAAM,SAAS,CAAC,CAACgE,QAAUA,MAAM,GAAG,KAAKiB,KAAK,GAAG;gEACnEzC,KAAK,OAAO,EACR,cAAiC,CAAC,KAAK,EAAEF,GAAG,KAAK,EAAE+C,UAAU,EAAE,CAAC,GAChE;4DACN;wDACF;kEAEA,kBAACC,GAACA;4DAAC,MAAM;4DAAI,eAAY;;;;+CA3ExB3D,KAAK,GAAG;;;;;wBAmFtBmB,aAAa,MAAM,GAAG,KAAK,WAAL,GACrB,IAACyC,iBAAQA;4BACP,OAAOvF,MACJ,MAAM,CAAC,CAAC2B,OAASmB,aAAa,QAAQ,CAACnB,KAAK,GAAG,GAC/C,GAAG,CAAC,CAACA,OAAU;oCACd,KAAKA,KAAK,GAAG;oCACb,OAAOA,KAAK,KAAK;oCACjB,UAAUA,KAAK,QAAQ;oCACvB,SAAS;wCACP4C,OAAO5C,KAAK,GAAG;wCACf6D,sBAAsB;4CACpB,MAAMC,SAASC,SAAS,cAAc,CAAC,GAAGpD,GAAG,KAAK,EAAEtC,MAAM,OAAO,CAAC2B,OAAO;4CACzE8D,QAAQ,iBAAiB;gDAAE,OAAO;gDAAW,QAAQ;4CAAU;4CAC/DA,QAAQ;wCACV;oCACF;gCACF;sCAEF,kBAACE,eAAaA;gCACZ,WAAU;gCACV,kBAAe;gCACf,SAAQ;gCACR,MAAMrF;gCACN,yBAAW,IAACsF,UAAQA;oCAAC,MAAM;;gCAC3B,cAAYtE,EAAE;;;wBAInBV,SAAS,WAATA,GACC,IAAC+E,eAAaA;4BACZ,WAAU;4BACV,SAAQ;4BACR,MAAMrF;4BACN,yBAAW,IAACuF,MAAIA;gCAAC,MAAM;;4BACvB,cAAYhF,YAAYS,EAAE;4BAC1B,SAASV;;wBAGZF,SAAS,WAATA,GAAS,IAAC;4BAAI,WAAU;sCAAoBA;;;;;YAGhDV,MAAM,IAAI,CAAC,CAAC2B,OAASA,AAAiB,QAAjBA,KAAK,QAAQ,KAAa,WAAT,GACrC,IAAC;gBAAI,WAAU;0BACZ3B,MAAM,GAAG,CACR,CAAC2B,MAAMwC,QACLxC,AAAiB,QAAjBA,KAAK,QAAQ,IAAY,WAAR,GACf,IAAC;wBAEC,IAAI,GAAGW,GAAG,OAAO,EAAE6B,OAAO;wBAC1B,MAAK;wBACL,mBAAiB,GAAG7B,GAAG,KAAK,EAAE6B,OAAO;wBACrC,QAAQxC,KAAK,GAAG,KAAKK;wBAErB,UAAU;wBACV,WAAU;kCAERL,AAAAA,CAAAA,KAAK,GAAG,KAAKK,YAAa,CAACvB,mBAAmB2B,QAAQ,QAAQ,CAACT,KAAK,GAAG,MACvEA,KAAK,QAAQ;uBAVVA,KAAK,GAAG;;;;AAkB/B;AAEA,SAASqD,SAAS,EAChBrD,IAAI,EACJZ,QAAQ,EACR,GAAGI,OACmE;IACtE,OAAOJ,WAAW,WAAXA,GACL,IAAC+E,aAAWA;QAAC,MAAMnE;QAAO,GAAGR,KAAK;uBAElC,IAAC;QAAK,GAAGA,KAAK;QAAE,gBAAcQ,KAAK,GAAG;;AAE1C;AACA,SAASmE,YAAY,EACnBnE,IAAI,EACJoE,QAAQ,EACR,GAAG5E,OACgD;IACnD,MAAMK,SAASC;IACf,MAAMuE,SAASC;IACf,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,mBAAmB,EACnBC,SAAS,EACTC,UAAU,EACVC,UAAU,EACX,GAAGC,YAAY;QAAE,IAAI9E,KAAK,GAAG;QAAE,UAAUA,KAAK,QAAQ;IAAC;IACxD,OAAO,WAAP,GACE,KAAC;QACE,GAAGR,KAAK;QACT,KAAKiF;QACL,gBAAczE,KAAK,GAAG;QACtB,iBAAe6E,cAAchC;QAC7B,OAAO;YACL,GAAGrD,MAAM,KAAK;YACd,WAAWuF,IAAI,SAAS,CAAC,QAAQ,CAACJ;YAClC,YACEN,UAAUO,aACN,gEACA/B;QACR;;0BAEA,IAAC;gBACC,MAAK;gBACJ,GAAG0B,UAAU;gBACb,GAAGC,SAAS;gBACb,KAAKE;gBACL,UAAU1E,KAAK,QAAQ;gBACvB,WAAU;gBACV,cAAYH,OAAO,gBAAgB;oBACjC,OAAO,AAAsB,YAAtB,OAAOG,KAAK,KAAK,GAAgBA,KAAK,KAAK,GAAGA,KAAK,GAAG;gBAC/D;0BAEA,kBAACgF,cAAYA;oBAAC,MAAM;oBAAI,eAAY;;;YAErCZ;;;AAGP;AAEA,SAASrB,aAAa,EACpBhD,OAAO,EACP1B,KAAK,EACLgB,SAAS,EACT+E,QAAQ,EAMT;IACC,OAAOrE,UAAU,WAAVA,GACL,IAACkF,cAAYA;QAAC,OAAO5G;QAAO,WAAWgB;kBACpC+E;SAGHA;AAEJ;AACA,SAASa,aAAa,EACpB5G,KAAK,EACLgB,SAAS,EACT+E,QAAQ,EAKT;IACC,MAAMzD,KAAKC;IACX,MAAMsE,gBAAgBC,qBAAqB,CAAC5C;QAC1C,MAAMvC,OAAO3B,MAAM,IAAI,CAAC,CAACgE,QAAUA,MAAM,GAAG,KAAKE;QACjD,OAAO,AAAuB,YAAvB,OAAOvC,MAAM,QAAqBA,KAAK,KAAK,GAAGoF,OAAO7C;IAC/D;IACA,MAAM8C,UAAUC,WACdC,UAAUC,eAAe;QAAE,sBAAsB;YAAE,UAAU;QAAE;IAAE,IACjED,UAAUE,gBAAgB;QAAE,kBAAkBC;IAA4B;IAE5E,OAAO,WAAP,GACE,IAACC,YAAUA;QACT,IAAIhF;QACJ,SAAS0E;QACT,oBAAoBO;QACpB,eAAeV;QACf,WAAW,CAAC,EAAEW,MAAM,EAAEC,IAAI,EAAE;YAC1B,IAAI,CAACA,QAAQD,OAAO,EAAE,KAAKC,KAAK,EAAE,EAAE;YACpC,MAAMC,OAAO1H,MAAM,SAAS,CAAC,CAAC2B,OAASA,KAAK,GAAG,KAAK6F,OAAO,EAAE;YAC7D,MAAMG,KAAK3H,MAAM,SAAS,CAAC,CAAC2B,OAASA,KAAK,GAAG,KAAK8F,KAAK,EAAE;YACzD,IAAIC,QAAQ,KAAKC,MAAM,KAAK,CAAC3H,KAAK,CAAC2H,GAAG,EAAE,UACtC3G,YAAY4G,UAAU;mBAAI5H;aAAM,EAAE0H,MAAMC;QAC5C;kBAEC5B;;AAGP;AAEO,SAAS8B,KAAKC,QAAmB;IACtC,MAAM3G,QAAQ4G,kBAAkB,QAAQD;IACxC,OAAO,WAAP,GAAO,IAAC/H,aAAWA;QAAE,GAAGoB,KAAK;;AAC/B"}

package/dist/esm/browser/modules/tailwind-tokens.js

@@ -23,7 +23,7 @@ const leafTailwindTokens = {
         'leaf-border-hover': 'var(--leaf-color-border-hover)',
         'leaf-divider': 'var(--leaf-color-divider)',
         'leaf-option-hover': 'var(--leaf-color-option-hover)',
-        'leaf-focus': 'var(--leaf-color-focus, var(--leaf-color-primary-alpha-42))'
+        'leaf-focus': 'var(--leaf-color-focus, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42)))'
     },
     borderRadius: {
         leaf: 'var(--leaf-radius)',

package/dist/esm/browser/modules/tailwind-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-tokens.js","sources":["../../../../src/tailwind-tokens.ts"],"sourcesContent":["/** Shared by the Tailwind 3 preset and the generated Tailwind 4 CSS theme. */\nexport const leafTailwindTokens = {\n  colors: {\n    'leaf-primary': 'var(--leaf-color-primary)',\n    'leaf-primary-hover': 'var(--leaf-color-primary-hover)',\n    'leaf-primary-active': 'var(--leaf-color-primary-active)',\n    'leaf-on-primary': 'var(--leaf-color-on-primary)',\n    'leaf-success': 'var(--leaf-color-success)',\n    'leaf-warning': 'var(--leaf-color-warning)',\n    'leaf-on-warning': 'var(--leaf-color-on-warning)',\n    'leaf-danger': 'var(--leaf-color-danger)',\n    'leaf-danger-hover': 'var(--leaf-color-danger-hover)',\n    'leaf-danger-active': 'var(--leaf-color-danger-active)',\n    'leaf-on-danger': 'var(--leaf-color-on-danger)',\n    'leaf-info': 'var(--leaf-color-info)',\n    'leaf-text': 'var(--leaf-color-text)',\n    'leaf-muted': 'var(--leaf-color-text-muted)',\n    'leaf-subtle': 'var(--leaf-color-text-subtle)',\n    'leaf-surface': 'var(--leaf-color-surface)',\n    'leaf-surface-muted': 'var(--leaf-color-surface-muted)',\n    'leaf-surface-raised': 'var(--leaf-color-surface-raised)',\n    'leaf-border': 'var(--leaf-color-border)',\n    'leaf-border-hover': 'var(--leaf-color-border-hover)',\n    'leaf-divider': 'var(--leaf-color-divider)',\n    'leaf-option-hover': 'var(--leaf-color-option-hover)',\n    'leaf-focus': 'var(--leaf-color-focus, var(--leaf-color-primary-alpha-42))',\n  },\n  borderRadius: {\n    leaf: 'var(--leaf-radius)',\n    'leaf-sm': 'var(--leaf-radius-sm)',\n    'leaf-md': 'var(--leaf-radius-md)',\n    'leaf-lg': 'var(--leaf-radius-lg)',\n    'leaf-choice': 'var(--leaf-choice-radius)',\n  },\n  spacing: {\n    leaf: 'var(--leaf-spacing)',\n    'leaf-xs': 'var(--leaf-spacing-xs)',\n    'leaf-sm': 'var(--leaf-spacing-sm)',\n    'leaf-md': 'var(--leaf-spacing-md)',\n    'leaf-lg': 'var(--leaf-spacing-lg)',\n    'leaf-xl': 'var(--leaf-spacing-xl)',\n    'leaf-control': 'var(--leaf-control-height)',\n    'leaf-control-sm': 'var(--leaf-control-height-sm)',\n    'leaf-control-lg': 'var(--leaf-control-height-lg)',\n    'leaf-form-gap': 'var(--leaf-density-form-gap)',\n    'leaf-label-gap': 'var(--leaf-density-label-gap)',\n    'leaf-row-padding': 'var(--leaf-density-row-padding)',\n    'leaf-option-height': 'var(--leaf-density-option-height)',\n    'leaf-option-padding': 'var(--leaf-density-option-padding)',\n    'leaf-field-padding': 'var(--leaf-density-field-padding)',\n    'leaf-dialog-block': 'var(--leaf-density-dialog-block)',\n    'leaf-dialog-inline': 'var(--leaf-density-dialog-inline)',\n    'leaf-dialog-gap': 'var(--leaf-density-dialog-gap)',\n  },\n  fontFamily: { leaf: 'var(--leaf-font-family)' },\n  fontSize: {\n    leaf: 'var(--leaf-font-size)',\n    'leaf-sm': 'var(--leaf-font-size-sm)',\n    'leaf-lg': 'var(--leaf-font-size-lg)',\n  },\n  lineHeight: { leaf: 'var(--leaf-line-height)' },\n  fontWeight: {\n    'leaf-medium': 'var(--leaf-font-weight)',\n    'leaf-heading': 'var(--leaf-heading-weight)',\n  },\n  boxShadow: {\n    'leaf-xs': 'var(--leaf-shadow-xs)',\n    'leaf-sm': 'var(--leaf-shadow-sm)',\n    'leaf-md': 'var(--leaf-shadow-md)',\n    'leaf-lg': 'var(--leaf-shadow-lg)',\n  },\n  transitionDuration: {\n    leaf: 'var(--leaf-motion-duration)',\n    'leaf-fast': 'var(--leaf-motion-fast)',\n    'leaf-slow': 'var(--leaf-motion-slow)',\n  },\n  transitionTimingFunction: {\n    leaf: 'var(--leaf-motion-easing)',\n    'leaf-spring': 'var(--leaf-motion-spring)',\n  },\n  zIndex: {\n    'leaf-popup': 'var(--leaf-z-index-popup)',\n    'leaf-modal': 'var(--leaf-z-index-modal)',\n    'leaf-message': 'var(--leaf-z-index-message)',\n  },\n};\n"],"names":["leafTailwindTokens"],"mappings":";AACO,MAAMA,qBAAqB;IAChC,QAAQ;QACN,gBAAgB;QAChB,sBAAsB;QACtB,uBAAuB;QACvB,mBAAmB;QACnB,gBAAgB;QAChB,gBAAgB;QAChB,mBAAmB;QACnB,eAAe;QACf,qBAAqB;QACrB,sBAAsB;QACtB,kBAAkB;QAClB,aAAa;QACb,aAAa;QACb,cAAc;QACd,eAAe;QACf,gBAAgB;QAChB,sBAAsB;QACtB,uBAAuB;QACvB,eAAe;QACf,qBAAqB;QACrB,gBAAgB;QAChB,qBAAqB;QACrB,cAAc;IAChB;IACA,cAAc;QACZ,MAAM;QACN,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;IACjB;IACA,SAAS;QACP,MAAM;QACN,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,gBAAgB;QAChB,mBAAmB;QACnB,mBAAmB;QACnB,iBAAiB;QACjB,kBAAkB;QAClB,oBAAoB;QACpB,sBAAsB;QACtB,uBAAuB;QACvB,sBAAsB;QACtB,qBAAqB;QACrB,sBAAsB;QACtB,mBAAmB;IACrB;IACA,YAAY;QAAE,MAAM;IAA0B;IAC9C,UAAU;QACR,MAAM;QACN,WAAW;QACX,WAAW;IACb;IACA,YAAY;QAAE,MAAM;IAA0B;IAC9C,YAAY;QACV,eAAe;QACf,gBAAgB;IAClB;IACA,WAAW;QACT,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;IACb;IACA,oBAAoB;QAClB,MAAM;QACN,aAAa;QACb,aAAa;IACf;IACA,0BAA0B;QACxB,MAAM;QACN,eAAe;IACjB;IACA,QAAQ;QACN,cAAc;QACd,cAAc;QACd,gBAAgB;IAClB;AACF"}
+{"version":3,"file":"tailwind-tokens.js","sources":["../../../../src/tailwind-tokens.ts"],"sourcesContent":["/** Shared by the Tailwind 3 preset and the generated Tailwind 4 CSS theme. */\nexport const leafTailwindTokens = {\n  colors: {\n    'leaf-primary': 'var(--leaf-color-primary)',\n    'leaf-primary-hover': 'var(--leaf-color-primary-hover)',\n    'leaf-primary-active': 'var(--leaf-color-primary-active)',\n    'leaf-on-primary': 'var(--leaf-color-on-primary)',\n    'leaf-success': 'var(--leaf-color-success)',\n    'leaf-warning': 'var(--leaf-color-warning)',\n    'leaf-on-warning': 'var(--leaf-color-on-warning)',\n    'leaf-danger': 'var(--leaf-color-danger)',\n    'leaf-danger-hover': 'var(--leaf-color-danger-hover)',\n    'leaf-danger-active': 'var(--leaf-color-danger-active)',\n    'leaf-on-danger': 'var(--leaf-color-on-danger)',\n    'leaf-info': 'var(--leaf-color-info)',\n    'leaf-text': 'var(--leaf-color-text)',\n    'leaf-muted': 'var(--leaf-color-text-muted)',\n    'leaf-subtle': 'var(--leaf-color-text-subtle)',\n    'leaf-surface': 'var(--leaf-color-surface)',\n    'leaf-surface-muted': 'var(--leaf-color-surface-muted)',\n    'leaf-surface-raised': 'var(--leaf-color-surface-raised)',\n    'leaf-border': 'var(--leaf-color-border)',\n    'leaf-border-hover': 'var(--leaf-color-border-hover)',\n    'leaf-divider': 'var(--leaf-color-divider)',\n    'leaf-option-hover': 'var(--leaf-color-option-hover)',\n    'leaf-focus':\n      'var(--leaf-color-focus, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42)))',\n  },\n  borderRadius: {\n    leaf: 'var(--leaf-radius)',\n    'leaf-sm': 'var(--leaf-radius-sm)',\n    'leaf-md': 'var(--leaf-radius-md)',\n    'leaf-lg': 'var(--leaf-radius-lg)',\n    'leaf-choice': 'var(--leaf-choice-radius)',\n  },\n  spacing: {\n    leaf: 'var(--leaf-spacing)',\n    'leaf-xs': 'var(--leaf-spacing-xs)',\n    'leaf-sm': 'var(--leaf-spacing-sm)',\n    'leaf-md': 'var(--leaf-spacing-md)',\n    'leaf-lg': 'var(--leaf-spacing-lg)',\n    'leaf-xl': 'var(--leaf-spacing-xl)',\n    'leaf-control': 'var(--leaf-control-height)',\n    'leaf-control-sm': 'var(--leaf-control-height-sm)',\n    'leaf-control-lg': 'var(--leaf-control-height-lg)',\n    'leaf-form-gap': 'var(--leaf-density-form-gap)',\n    'leaf-label-gap': 'var(--leaf-density-label-gap)',\n    'leaf-row-padding': 'var(--leaf-density-row-padding)',\n    'leaf-option-height': 'var(--leaf-density-option-height)',\n    'leaf-option-padding': 'var(--leaf-density-option-padding)',\n    'leaf-field-padding': 'var(--leaf-density-field-padding)',\n    'leaf-dialog-block': 'var(--leaf-density-dialog-block)',\n    'leaf-dialog-inline': 'var(--leaf-density-dialog-inline)',\n    'leaf-dialog-gap': 'var(--leaf-density-dialog-gap)',\n  },\n  fontFamily: { leaf: 'var(--leaf-font-family)' },\n  fontSize: {\n    leaf: 'var(--leaf-font-size)',\n    'leaf-sm': 'var(--leaf-font-size-sm)',\n    'leaf-lg': 'var(--leaf-font-size-lg)',\n  },\n  lineHeight: { leaf: 'var(--leaf-line-height)' },\n  fontWeight: {\n    'leaf-medium': 'var(--leaf-font-weight)',\n    'leaf-heading': 'var(--leaf-heading-weight)',\n  },\n  boxShadow: {\n    'leaf-xs': 'var(--leaf-shadow-xs)',\n    'leaf-sm': 'var(--leaf-shadow-sm)',\n    'leaf-md': 'var(--leaf-shadow-md)',\n    'leaf-lg': 'var(--leaf-shadow-lg)',\n  },\n  transitionDuration: {\n    leaf: 'var(--leaf-motion-duration)',\n    'leaf-fast': 'var(--leaf-motion-fast)',\n    'leaf-slow': 'var(--leaf-motion-slow)',\n  },\n  transitionTimingFunction: {\n    leaf: 'var(--leaf-motion-easing)',\n    'leaf-spring': 'var(--leaf-motion-spring)',\n  },\n  zIndex: {\n    'leaf-popup': 'var(--leaf-z-index-popup)',\n    'leaf-modal': 'var(--leaf-z-index-modal)',\n    'leaf-message': 'var(--leaf-z-index-message)',\n  },\n};\n"],"names":["leafTailwindTokens"],"mappings":";AACO,MAAMA,qBAAqB;IAChC,QAAQ;QACN,gBAAgB;QAChB,sBAAsB;QACtB,uBAAuB;QACvB,mBAAmB;QACnB,gBAAgB;QAChB,gBAAgB;QAChB,mBAAmB;QACnB,eAAe;QACf,qBAAqB;QACrB,sBAAsB;QACtB,kBAAkB;QAClB,aAAa;QACb,aAAa;QACb,cAAc;QACd,eAAe;QACf,gBAAgB;QAChB,sBAAsB;QACtB,uBAAuB;QACvB,eAAe;QACf,qBAAqB;QACrB,gBAAgB;QAChB,qBAAqB;QACrB,cACE;IACJ;IACA,cAAc;QACZ,MAAM;QACN,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;IACjB;IACA,SAAS;QACP,MAAM;QACN,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,gBAAgB;QAChB,mBAAmB;QACnB,mBAAmB;QACnB,iBAAiB;QACjB,kBAAkB;QAClB,oBAAoB;QACpB,sBAAsB;QACtB,uBAAuB;QACvB,sBAAsB;QACtB,qBAAqB;QACrB,sBAAsB;QACtB,mBAAmB;IACrB;IACA,YAAY;QAAE,MAAM;IAA0B;IAC9C,UAAU;QACR,MAAM;QACN,WAAW;QACX,WAAW;IACb;IACA,YAAY;QAAE,MAAM;IAA0B;IAC9C,YAAY;QACV,eAAe;QACf,gBAAgB;IAClB;IACA,WAAW;QACT,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;IACb;IACA,oBAAoB;QAClB,MAAM;QACN,aAAa;QACb,aAAa;IACf;IACA,0BAA0B;QACxB,MAAM;QACN,eAAe;IACjB;IACA,QAAQ;QACN,cAAc;QACd,cAAc;QACd,gBAAgB;IAClB;AACF"}

package/dist/esm/browser/modules/textarea/textarea.js

@@ -2,15 +2,17 @@
 import '../../../styles/foundation.css';
 import '../../../styles/components/textarea.css';
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef } from "react";
 import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useFormField } from "../form/form.js";
+import { ScrollbarControl } from "../scrollbar/scrollbar.js";
 import { classes } from "../shared/classes.js";
 import { useFieldValue, useMergedRef } from "../shared/field.js";
 import { animateMotion, useMotionEnabled } from "../shared/motion.js";
 const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
 const textarea_TextareaControl = /*#__PURE__*/ forwardRef(function({ size = 'md', status: statusProp, resize = 'vertical', rows = 3, autoSize = false, showCount = false, value, defaultValue, onChange, className, style, disabled: disabledProp, 'aria-invalid': ariaInvalid, ...props }, ref) {
     const field = useFormField();
+    const id = useId();
     const textarea = useRef(null);
     const heightAnimation = useRef(void 0);
     const measuredHeight = useRef(false);
@@ -72,29 +74,55 @@ const textarea_TextareaControl = /*#__PURE__*/ forwardRef(function({ size = 'md'
         motionEnabled
     ]);
     useEffect(()=>()=>heightAnimation.current?.cancel(), []);
-    const control = /*#__PURE__*/ jsx("textarea", {
-        ...props,
-        id: props.id ?? field?.id,
-        required: props.required ?? field?.required,
-        "aria-describedby": [
-            props['aria-describedby'],
-            field?.descriptionId
-        ].filter(Boolean).join(' ') || void 0,
-        ref: merged,
-        disabled: disabled,
-        rows: rows,
-        value: current,
-        onChange: (event)=>{
-            setCurrent(event.target.value);
-            onChange?.(event);
-        },
-        className: classes('leaf-textarea', `leaf-textarea--${size}`, className),
+    const control = /*#__PURE__*/ jsx(ScrollbarControl, {
+        externalViewport: textarea,
+        viewportRevision: current,
+        resizeHandle: !autoSize && 'none' !== resize,
+        scrollbarTabIndex: -1,
+        className: "leaf-textarea-scrollbar",
         style: {
-            resize: autoSize ? 'none' : resize,
-            ...style
+            width: style?.width,
+            minWidth: style?.minWidth,
+            maxWidth: style?.maxWidth,
+            flex: style?.flex,
+            flexBasis: style?.flexBasis,
+            flexGrow: style?.flexGrow,
+            flexShrink: style?.flexShrink,
+            alignSelf: style?.alignSelf,
+            order: style?.order,
+            gridArea: style?.gridArea,
+            gridColumn: style?.gridColumn,
+            gridRow: style?.gridRow
         },
-        "data-status": status,
-        "aria-invalid": 'error' === status ? true : ariaInvalid
+        children: /*#__PURE__*/ jsx("textarea", {
+            ...props,
+            id: props.id ?? field?.id ?? id,
+            required: props.required ?? field?.required,
+            "aria-describedby": [
+                props['aria-describedby'],
+                field?.descriptionId
+            ].filter(Boolean).join(' ') || void 0,
+            ref: merged,
+            disabled: disabled,
+            rows: rows,
+            value: current,
+            onChange: (event)=>{
+                setCurrent(event.target.value);
+                onChange?.(event);
+            },
+            className: classes('leaf-textarea', `leaf-textarea--${size}`, className),
+            style: {
+                resize: autoSize ? 'none' : resize,
+                ...style,
+                minWidth: void 0,
+                maxWidth: void 0,
+                ...style?.width === void 0 ? {} : {
+                    width: '100%'
+                }
+            },
+            "data-status": status,
+            "aria-invalid": 'error' === status ? true : ariaInvalid
+        })
     });
     return showCount ? /*#__PURE__*/ jsxs("div", {
         className: "leaf-textarea-wrap",

package/dist/esm/browser/modules/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea/textarea.js","sources":["../../../../../src/textarea/textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { useFieldValue, useMergedRef } from '../shared/field';\nimport { animateMotion, useMotionEnabled } from '../shared/motion';\nimport type { ControlSize, ControlStatus } from '../shared/types';\n\nexport interface TextareaAutoSize {\n  minRows?: number;\n  maxRows?: number;\n}\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: ControlSize;\n  status?: ControlStatus;\n  resize?: 'none' | 'vertical' | 'both';\n  autoSize?: boolean | TextareaAutoSize;\n  showCount?: boolean | ((value: string, maxLength?: number) => ReactNode);\n}\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport const TextareaControl = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function TextareaControl(\n    {\n      size = 'md',\n      status: statusProp,\n      resize = 'vertical',\n      rows = 3,\n      autoSize = false,\n      showCount = false,\n      value,\n      defaultValue,\n      onChange,\n      className,\n      style,\n      disabled: disabledProp,\n      'aria-invalid': ariaInvalid,\n      ...props\n    }: TextareaProps,\n    ref,\n  ) {\n    const field = useFormField();\n    const textarea = useRef<HTMLTextAreaElement>(null);\n    const heightAnimation = useRef<Animation | undefined>(undefined);\n    const measuredHeight = useRef(false);\n    const motionEnabled = useMotionEnabled();\n    const merged = useMergedRef(textarea, ref);\n    const [current, setCurrent] = useFieldValue(\n      value === undefined ? undefined : String(value),\n      String(defaultValue ?? ''),\n      textarea,\n      props.form,\n    );\n    const disabled = disabledProp || field?.disabled;\n    const status = statusProp ?? (field?.error ? 'error' : undefined);\n    const minRows = typeof autoSize === 'object' ? Math.max(1, autoSize.minRows ?? rows) : rows;\n    const maxRows =\n      typeof autoSize === 'object' ? Math.max(minRows, autoSize.maxRows ?? Infinity) : Infinity;\n    useBrowserLayoutEffect(() => {\n      if (!autoSize || !textarea.current) {\n        heightAnimation.current?.cancel();\n        measuredHeight.current = false;\n        return;\n      }\n      const node = textarea.current;\n      const measure = () => {\n        const previousHeight =\n          Number.parseFloat(getComputedStyle(node).height) || node.offsetHeight;\n        heightAnimation.current?.cancel();\n        const computed = getComputedStyle(node);\n        const lineHeight =\n          Number.parseFloat(computed.lineHeight) ||\n          (Number.parseFloat(computed.fontSize) || 14) * 1.5;\n        const padding =\n          (Number.parseFloat(computed.paddingTop) || 0) +\n          (Number.parseFloat(computed.paddingBottom) || 0);\n        const border =\n          (Number.parseFloat(computed.borderTopWidth) || 0) +\n          (Number.parseFloat(computed.borderBottomWidth) || 0);\n        const addition = computed.boxSizing === 'border-box' ? padding + border : 0;\n        node.style.height = 'auto';\n        const measured =\n          node.scrollHeight + (computed.boxSizing === 'border-box' ? border : -padding);\n        const maximum = lineHeight * maxRows + addition;\n        const height = Math.min(maximum, Math.max(lineHeight * minRows + addition, measured));\n        node.style.height = `${height}px`;\n        node.style.overflowY = measured > maximum ? 'auto' : 'hidden';\n        if (measuredHeight.current && motionEnabled && Math.abs(previousHeight - height) > 0.5)\n          heightAnimation.current = animateMotion(\n            node,\n            [{ height: `${previousHeight}px` }, { height: `${height}px` }],\n            { durationMultiplier: 0.8 },\n          );\n        measuredHeight.current = true;\n      };\n      measure();\n      let width = node.clientWidth;\n      const observer =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(() => {\n              if (width !== node.clientWidth) {\n                width = node.clientWidth;\n                measure();\n              }\n            });\n      observer?.observe(node);\n      return () => observer?.disconnect();\n    }, [autoSize, minRows, maxRows, current, motionEnabled]);\n    useEffect(() => () => heightAnimation.current?.cancel(), []);\n    const control = (\n      <textarea\n        {...props}\n        id={props.id ?? field?.id}\n        required={props.required ?? field?.required}\n        aria-describedby={\n          [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n        }\n        ref={merged}\n        disabled={disabled}\n        rows={rows}\n        value={current}\n        onChange={(event) => {\n          setCurrent(event.target.value);\n          onChange?.(event);\n        }}\n        className={classes('leaf-textarea', `leaf-textarea--${size}`, className)}\n        style={{ resize: autoSize ? 'none' : resize, ...style }}\n        data-status={status}\n        aria-invalid={status === 'error' ? true : ariaInvalid}\n      />\n    );\n    return showCount ? (\n      <div className=\"leaf-textarea-wrap\">\n        {control}\n        <span className=\"leaf-textarea__count\">\n          {typeof showCount === 'function'\n            ? showCount(current, props.maxLength)\n            : `${current.length}${props.maxLength === undefined ? '' : ` / ${props.maxLength}`}`}\n        </span>\n      </div>\n    ) : (\n      control\n    );\n  },\n);\nTextareaControl.displayName = 'TextareaControl';\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  rawProps: TextareaProps,\n  ref,\n) {\n  const props = useComponentProps('Textarea', rawProps);\n  return <TextareaControl {...props} ref={ref} />;\n});\nTextarea.displayName = 'Textarea';\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","TextareaControl","forwardRef","size","statusProp","resize","rows","autoSize","showCount","value","defaultValue","onChange","className","style","disabledProp","ariaInvalid","props","ref","field","useFormField","textarea","useRef","heightAnimation","undefined","measuredHeight","motionEnabled","useMotionEnabled","merged","useMergedRef","current","setCurrent","useFieldValue","String","disabled","status","minRows","Math","maxRows","Infinity","node","measure","previousHeight","Number","getComputedStyle","computed","lineHeight","padding","border","addition","measured","maximum","height","animateMotion","width","observer","ResizeObserver","control","Boolean","event","classes","Textarea","rawProps","useComponentProps"],"mappings":"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"}
+{"version":3,"file":"textarea/textarea.js","sources":["../../../../../src/textarea/textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useFormField } from '../form/form';\nimport { ScrollbarControl } from '../scrollbar/scrollbar';\nimport { classes } from '../shared/classes';\nimport { useFieldValue, useMergedRef } from '../shared/field';\nimport { animateMotion, useMotionEnabled } from '../shared/motion';\nimport type { ControlSize, ControlStatus } from '../shared/types';\n\nexport interface TextareaAutoSize {\n  minRows?: number;\n  maxRows?: number;\n}\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: ControlSize;\n  status?: ControlStatus;\n  resize?: 'none' | 'vertical' | 'both';\n  autoSize?: boolean | TextareaAutoSize;\n  showCount?: boolean | ((value: string, maxLength?: number) => ReactNode);\n}\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport const TextareaControl = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function TextareaControl(\n    {\n      size = 'md',\n      status: statusProp,\n      resize = 'vertical',\n      rows = 3,\n      autoSize = false,\n      showCount = false,\n      value,\n      defaultValue,\n      onChange,\n      className,\n      style,\n      disabled: disabledProp,\n      'aria-invalid': ariaInvalid,\n      ...props\n    }: TextareaProps,\n    ref,\n  ) {\n    const field = useFormField();\n    const id = useId();\n    const textarea = useRef<HTMLTextAreaElement>(null);\n    const heightAnimation = useRef<Animation | undefined>(undefined);\n    const measuredHeight = useRef(false);\n    const motionEnabled = useMotionEnabled();\n    const merged = useMergedRef(textarea, ref);\n    const [current, setCurrent] = useFieldValue(\n      value === undefined ? undefined : String(value),\n      String(defaultValue ?? ''),\n      textarea,\n      props.form,\n    );\n    const disabled = disabledProp || field?.disabled;\n    const status = statusProp ?? (field?.error ? 'error' : undefined);\n    const minRows = typeof autoSize === 'object' ? Math.max(1, autoSize.minRows ?? rows) : rows;\n    const maxRows =\n      typeof autoSize === 'object' ? Math.max(minRows, autoSize.maxRows ?? Infinity) : Infinity;\n    useBrowserLayoutEffect(() => {\n      if (!autoSize || !textarea.current) {\n        heightAnimation.current?.cancel();\n        measuredHeight.current = false;\n        return;\n      }\n      const node = textarea.current;\n      const measure = () => {\n        const previousHeight =\n          Number.parseFloat(getComputedStyle(node).height) || node.offsetHeight;\n        heightAnimation.current?.cancel();\n        const computed = getComputedStyle(node);\n        const lineHeight =\n          Number.parseFloat(computed.lineHeight) ||\n          (Number.parseFloat(computed.fontSize) || 14) * 1.5;\n        const padding =\n          (Number.parseFloat(computed.paddingTop) || 0) +\n          (Number.parseFloat(computed.paddingBottom) || 0);\n        const border =\n          (Number.parseFloat(computed.borderTopWidth) || 0) +\n          (Number.parseFloat(computed.borderBottomWidth) || 0);\n        const addition = computed.boxSizing === 'border-box' ? padding + border : 0;\n        node.style.height = 'auto';\n        const measured =\n          node.scrollHeight + (computed.boxSizing === 'border-box' ? border : -padding);\n        const maximum = lineHeight * maxRows + addition;\n        const height = Math.min(maximum, Math.max(lineHeight * minRows + addition, measured));\n        node.style.height = `${height}px`;\n        node.style.overflowY = measured > maximum ? 'auto' : 'hidden';\n        if (measuredHeight.current && motionEnabled && Math.abs(previousHeight - height) > 0.5)\n          heightAnimation.current = animateMotion(\n            node,\n            [{ height: `${previousHeight}px` }, { height: `${height}px` }],\n            { durationMultiplier: 0.8 },\n          );\n        measuredHeight.current = true;\n      };\n      measure();\n      let width = node.clientWidth;\n      const observer =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(() => {\n              if (width !== node.clientWidth) {\n                width = node.clientWidth;\n                measure();\n              }\n            });\n      observer?.observe(node);\n      return () => observer?.disconnect();\n    }, [autoSize, minRows, maxRows, current, motionEnabled]);\n    useEffect(() => () => heightAnimation.current?.cancel(), []);\n    const control = (\n      <ScrollbarControl\n        externalViewport={textarea}\n        viewportRevision={current}\n        resizeHandle={!autoSize && resize !== 'none'}\n        scrollbarTabIndex={-1}\n        className=\"leaf-textarea-scrollbar\"\n        style={{\n          width: style?.width,\n          minWidth: style?.minWidth,\n          maxWidth: style?.maxWidth,\n          flex: style?.flex,\n          flexBasis: style?.flexBasis,\n          flexGrow: style?.flexGrow,\n          flexShrink: style?.flexShrink,\n          alignSelf: style?.alignSelf,\n          order: style?.order,\n          gridArea: style?.gridArea,\n          gridColumn: style?.gridColumn,\n          gridRow: style?.gridRow,\n        }}\n      >\n        <textarea\n          {...props}\n          id={props.id ?? field?.id ?? id}\n          required={props.required ?? field?.required}\n          aria-describedby={\n            [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n          }\n          ref={merged}\n          disabled={disabled}\n          rows={rows}\n          value={current}\n          onChange={(event) => {\n            setCurrent(event.target.value);\n            onChange?.(event);\n          }}\n          className={classes('leaf-textarea', `leaf-textarea--${size}`, className)}\n          style={{\n            resize: autoSize ? 'none' : resize,\n            ...style,\n            minWidth: undefined,\n            maxWidth: undefined,\n            ...(style?.width === undefined ? {} : { width: '100%' }),\n          }}\n          data-status={status}\n          aria-invalid={status === 'error' ? true : ariaInvalid}\n        />\n      </ScrollbarControl>\n    );\n    return showCount ? (\n      <div className=\"leaf-textarea-wrap\">\n        {control}\n        <span className=\"leaf-textarea__count\">\n          {typeof showCount === 'function'\n            ? showCount(current, props.maxLength)\n            : `${current.length}${props.maxLength === undefined ? '' : ` / ${props.maxLength}`}`}\n        </span>\n      </div>\n    ) : (\n      control\n    );\n  },\n);\nTextareaControl.displayName = 'TextareaControl';\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  rawProps: TextareaProps,\n  ref,\n) {\n  const props = useComponentProps('Textarea', rawProps);\n  return <TextareaControl {...props} ref={ref} />;\n});\nTextarea.displayName = 'Textarea';\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","TextareaControl","forwardRef","size","statusProp","resize","rows","autoSize","showCount","value","defaultValue","onChange","className","style","disabledProp","ariaInvalid","props","ref","field","useFormField","id","useId","textarea","useRef","heightAnimation","undefined","measuredHeight","motionEnabled","useMotionEnabled","merged","useMergedRef","current","setCurrent","useFieldValue","String","disabled","status","minRows","Math","maxRows","Infinity","node","measure","previousHeight","Number","getComputedStyle","computed","lineHeight","padding","border","addition","measured","maximum","height","animateMotion","width","observer","ResizeObserver","control","ScrollbarControl","Boolean","event","classes","Textarea","rawProps","useComponentProps"],"mappings":"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"}

package/dist/esm/browser/modules/theme.js

@@ -1,6 +1,23 @@
 "use client";
 import { deriveColors } from "./colors.js";
 const defined = (value)=>Object.fromEntries(Object.entries(value ?? {}).filter(([, item])=>void 0 !== item));
+const componentStates = [
+    'hover',
+    'active',
+    'focus',
+    'disabled'
+];
+function mergeComponentTokens(parent, tokens) {
+    const merged = {
+        ...defined(parent),
+        ...defined(tokens)
+    };
+    for (const state of componentStates)if (parent?.[state] || tokens?.[state]) merged[state] = {
+        ...defined(parent?.[state]),
+        ...defined(tokens?.[state])
+    };
+    return merged;
+}
 function mergeLeafTheme(parent, theme) {
     return {
         ...parent,
@@ -16,10 +33,7 @@ function mergeLeafTheme(parent, theme) {
             ])
         ].map((key)=>[
                 key,
-                {
-                    ...parent.components?.[key],
-                    ...defined(theme?.components?.[key])
-                }
+                mergeComponentTokens(parent.components?.[key], theme?.components?.[key])
             ])),
         ...parent.tokens || theme?.tokens ? {
             tokens: {
@@ -45,6 +59,9 @@ const tokenVariables = {
     borderColor: 'color-border',
     borderHoverColor: 'color-border-hover',
     dividerColor: 'color-divider',
+    borderWidth: 'border-width',
+    controlShadow: 'control-shadow',
+    surfaceShadow: 'surface-shadow',
     borderRadiusSm: 'radius-sm',
     borderRadiusMd: 'radius-md',
     borderRadiusLg: 'radius-lg',
@@ -105,10 +122,7 @@ function paddingSides(value) {
 }
 function leafThemeColors(theme) {
     const colors = {};
-    if (theme.primaryColor) {
-        colors.primary = theme.primaryColor;
-        colors['on-primary'] = '#ffffff';
-    }
+    if (theme.primaryColor) colors.primary = theme.primaryColor;
     for (const key of Object.keys(tokenVariables)){
         const variable = tokenVariables[key];
         const value = theme.tokens?.[key];
@@ -165,6 +179,7 @@ function leafThemeVariables(theme) {
     for (const [name, value] of Object.entries(theme.breakpoints ?? {}))if (void 0 !== value) variables[`--leaf-breakpoint-${name}`] = `${value}px`;
     const componentKeys = {
         borderRadius: 'radius',
+        borderWidth: 'border-width',
         controlHeight: 'height',
         padding: 'padding',
         gap: 'gap',
@@ -176,29 +191,37 @@ function leafThemeVariables(theme) {
         footerBackground: 'footer-background',
         shadow: 'shadow'
     };
-    for (const [component, tokens] of Object.entries(theme.components ?? {}))for (const [key, value] of Object.entries(tokens))if (void 0 !== value && /^[a-z][a-z\d-]*$/i.test(component)) {
-        const token = componentKeys[key];
-        if (token) variables[`--leaf-component-${component.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase()}-${token}`] = 'number' == typeof value ? theme_length(value) : value;
-        if ('controlHeight' === key) {
-            const name = component.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase();
-            variables[`--leaf-component-${name}-height-sm`] = `max(1px, calc(var(--leaf-component-${name}-height) - 6px))`;
-            variables[`--leaf-component-${name}-height-lg`] = `calc(var(--leaf-component-${name}-height) + 6px)`;
+    const stateKeys = {
+        color: 'color',
+        background: 'background',
+        borderColor: 'border-color',
+        shadow: 'shadow'
+    };
+    for (const [component, tokens] of Object.entries(theme.components ?? {})){
+        if (!/^[a-z][a-z\d-]*$/i.test(component)) continue;
+        const name = component.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase();
+        for (const [key, value] of Object.entries(tokens))if (void 0 !== value && 'object' != typeof value) {
+            const token = componentKeys[key];
+            if (token) variables[`--leaf-component-${name}-${token}`] = 'number' == typeof value ? theme_length(value) : value;
+            if ('controlHeight' === key) {
+                variables[`--leaf-component-${name}-height-sm`] = `max(1px, calc(var(--leaf-component-${name}-height) - 6px))`;
+                variables[`--leaf-component-${name}-height-lg`] = `calc(var(--leaf-component-${name}-height) + 6px)`;
+            }
+            if ('padding' === key) {
+                const sides = paddingSides(theme_length(value));
+                for (const [index, side] of [
+                    'top',
+                    'right',
+                    'bottom',
+                    'left'
+                ].entries())variables[`--leaf-component-${name}-padding-${side}`] = sides[index];
+            }
         }
-        if ('padding' === key) {
-            const name = component.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase();
-            const sides = paddingSides(theme_length(value));
-            for (const [index, side] of [
-                'top',
-                'right',
-                'bottom',
-                'left'
-            ].entries())variables[`--leaf-component-${name}-padding-${side}`] = sides[index];
+        for (const state of componentStates)for (const [key, suffix] of Object.entries(stateKeys)){
+            const value = tokens[state]?.[key];
+            if (void 0 !== value) variables[`--leaf-component-${name}-${state}-${suffix}`] = value;
         }
     }
-    if (void 0 !== theme.primaryColor) {
-        variables['--leaf-color-primary'] = theme.primaryColor;
-        variables['--leaf-color-on-primary'] = '#ffffff';
-    }
     if (void 0 !== theme.borderRadius) {
         variables['--leaf-radius'] = theme_length(theme.borderRadius);
         variables['--leaf-radius-sm'] = 'calc(var(--leaf-radius) * 0.6)';
@@ -221,8 +244,9 @@ function leafThemeVariables(theme) {
         const value = theme.tokens?.[key];
         if (void 0 === value) continue;
         const variable = tokenVariables[key];
-        variables[`--leaf-${variable}`] = 'number' != typeof value ? value : 'motionDuration' === key ? `${value}ms` : variable.includes('radius') || variable.includes('height') || variable.includes('font-size') || variable.includes('spacing') ? theme_length(value) : value;
+        variables[`--leaf-${variable}`] = 'number' != typeof value ? value : 'motionDuration' === key ? `${value}ms` : variable.includes('radius') || variable.includes('height') || variable.includes('font-size') || 'border-width' === variable || variable.includes('spacing') ? theme_length(value) : value;
     }
+    if (theme.tokens?.borderColor !== void 0) variables['--leaf-frame-border-color'] = theme.tokens.borderColor;
     if (void 0 !== theme.motion) {
         variables['--leaf-motion-play-state'] = theme.motion ? 'running' : 'paused';
         variables['--leaf-motion-animation'] = theme.motion ? 'initial' : 'none';

package/dist/esm/browser/modules/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../../src/theme.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { deriveColors } from './colors';\n\n/** Shared CSS variables; configure component themes through ConfigProvider. */\nexport type LeafThemeStyle = CSSProperties & {\n  [key: `--leaf-${string}`]: string | number | undefined;\n};\n\n/** Common settings. Other sizes and interaction colors are derived automatically. */\nexport interface LeafTheme {\n  primaryColor?: string;\n  borderRadius?: number | string;\n  controlHeight?: number | string;\n  fontSize?: number | string;\n  fontFamily?: string;\n  appearance?: 'light' | 'dark';\n  motion?: boolean;\n  tokens?: LeafThemeTokens;\n  spacing?: number;\n  lineHeight?: number;\n  headingWeight?: number;\n  elevation?: 'none' | 'soft' | 'medium';\n  breakpoints?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>;\n  components?: Record<string, LeafComponentTokens>;\n}\nexport interface LeafComponentTokens {\n  borderRadius?: string | number;\n  controlHeight?: string | number;\n  padding?: string | number;\n  gap?: string | number;\n  fontSize?: string | number;\n  color?: string;\n  background?: string;\n  borderColor?: string;\n  headerBackground?: string;\n  footerBackground?: string;\n  shadow?: string;\n}\n\n/** Optional overrides for applications with more specific design requirements. */\nexport interface LeafThemeTokens {\n  onPrimaryColor?: string;\n  dangerColor?: string;\n  onDangerColor?: string;\n  successColor?: string;\n  warningColor?: string;\n  infoColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  subtleTextColor?: string;\n  surfaceColor?: string;\n  mutedSurfaceColor?: string;\n  raisedSurfaceColor?: string;\n  borderColor?: string;\n  borderHoverColor?: string;\n  dividerColor?: string;\n  borderRadiusSm?: number | string;\n  borderRadiusMd?: number | string;\n  borderRadiusLg?: number | string;\n  controlHeightSm?: number | string;\n  controlHeightLg?: number | string;\n  fontSizeSm?: number | string;\n  fontSizeLg?: number | string;\n  fontWeight?: number;\n  motionDuration?: number | string;\n  motionEasing?: string;\n  motionSpring?: string;\n  popupZIndex?: number;\n  modalZIndex?: number;\n  messageZIndex?: number;\n  buttonBorderRadius?: number | string;\n  buttonHeight?: number | string;\n  choiceBorderRadius?: number | string;\n  focusColor?: string;\n  primaryHoverColor?: string;\n  primaryActiveColor?: string;\n  primarySoftColor?: string;\n  primarySoftHoverColor?: string;\n  primarySoftActiveColor?: string;\n  primaryBorderColor?: string;\n  dangerHoverColor?: string;\n  dangerActiveColor?: string;\n  spacingSm?: number | string;\n  spacingLg?: number | string;\n  shadowSm?: string;\n  shadowXs?: string;\n  shadowMd?: string;\n  shadowLg?: string;\n  lineHeight?: number;\n}\n\nconst defined = <T extends object>(value?: T) =>\n  Object.fromEntries(Object.entries(value ?? {}).filter(([, item]) => item !== undefined)) as T;\n\nexport function mergeLeafTheme(parent: LeafTheme, theme?: LeafTheme): LeafTheme {\n  return {\n    ...parent,\n    ...defined(theme),\n    breakpoints: { ...parent.breakpoints, ...defined(theme?.breakpoints) },\n    components: Object.fromEntries(\n      [\n        ...new Set([\n          ...Object.keys(parent.components ?? {}),\n          ...Object.keys(theme?.components ?? {}),\n        ]),\n      ].map((key) => [key, { ...parent.components?.[key], ...defined(theme?.components?.[key]) }]),\n    ),\n    ...(parent.tokens || theme?.tokens\n      ? { tokens: { ...parent.tokens, ...defined(theme?.tokens) } }\n      : {}),\n  };\n}\n\nconst tokenVariables = {\n  onPrimaryColor: 'color-on-primary',\n  dangerColor: 'color-danger',\n  onDangerColor: 'color-on-danger',\n  successColor: 'color-success',\n  warningColor: 'color-warning',\n  infoColor: 'color-info',\n  textColor: 'color-text',\n  mutedTextColor: 'color-text-muted',\n  subtleTextColor: 'color-text-subtle',\n  surfaceColor: 'color-surface',\n  mutedSurfaceColor: 'color-surface-muted',\n  raisedSurfaceColor: 'color-surface-raised',\n  borderColor: 'color-border',\n  borderHoverColor: 'color-border-hover',\n  dividerColor: 'color-divider',\n  borderRadiusSm: 'radius-sm',\n  borderRadiusMd: 'radius-md',\n  borderRadiusLg: 'radius-lg',\n  controlHeightSm: 'control-height-sm',\n  controlHeightLg: 'control-height-lg',\n  fontSizeSm: 'font-size-sm',\n  fontSizeLg: 'font-size-lg',\n  fontWeight: 'font-weight',\n  motionDuration: 'motion-duration',\n  motionEasing: 'motion-easing',\n  motionSpring: 'motion-spring',\n  popupZIndex: 'z-index-popup',\n  modalZIndex: 'z-index-modal',\n  messageZIndex: 'z-index-message',\n  buttonBorderRadius: 'button-radius',\n  buttonHeight: 'button-height',\n  choiceBorderRadius: 'choice-radius',\n  focusColor: 'color-focus',\n  primaryHoverColor: 'color-primary-hover',\n  primaryActiveColor: 'color-primary-active',\n  primarySoftColor: 'color-primary-soft',\n  primarySoftHoverColor: 'color-primary-soft-hover',\n  primarySoftActiveColor: 'color-primary-soft-active',\n  primaryBorderColor: 'color-primary-border',\n  dangerHoverColor: 'color-danger-hover',\n  dangerActiveColor: 'color-danger-active',\n  spacingSm: 'spacing-sm',\n  spacingLg: 'spacing-lg',\n  shadowSm: 'shadow-sm',\n  shadowXs: 'shadow-xs',\n  shadowMd: 'shadow-md',\n  shadowLg: 'shadow-lg',\n  lineHeight: 'line-height',\n} satisfies Record<keyof LeafThemeTokens, string>;\n\nconst length = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n\n/** Expand CSS padding without splitting whitespace inside calc()/var(). */\nfunction paddingSides(value: string) {\n  const parts: string[] = [];\n  let depth = 0;\n  let start = 0;\n  for (let index = 0; index <= value.length; index++) {\n    const character = value[index];\n    if (character === '(') depth++;\n    else if (character === ')') depth--;\n    if (index === value.length || (depth === 0 && /\\s/.test(character ?? ''))) {\n      const part = value.slice(start, index).trim();\n      if (part) parts.push(part);\n      start = index + 1;\n    }\n  }\n  if (!parts.length || parts.length > 4) return [];\n  const [top, right = top, bottom = top, left = right] = parts;\n  return [top, right, bottom, left];\n}\n\n/** Explicit inputs, excluding the generated palette, for browser CSS-variable resolution. */\nexport function leafThemeColors(theme: LeafTheme): Record<string, string> {\n  const colors: Record<string, string> = {};\n  if (theme.primaryColor) {\n    colors.primary = theme.primaryColor;\n    colors['on-primary'] = '#ffffff';\n  }\n  for (const key of Object.keys(tokenVariables) as (keyof LeafThemeTokens)[]) {\n    const variable = tokenVariables[key];\n    const value = theme.tokens?.[key];\n    if (variable.startsWith('color-') && typeof value === 'string')\n      colors[variable.slice(6)] = value;\n  }\n  return colors;\n}\n\n/** Pure, deterministic output can be rendered in the server's initial HTML. */\nexport function leafThemeVariables(theme: LeafTheme): LeafThemeStyle {\n  const variables: LeafThemeStyle = {};\n  if (theme.spacing !== undefined) {\n    variables['--leaf-spacing'] = `${Math.max(0, theme.spacing)}px`;\n    for (const [name, scale] of [\n      ['xs', 0.5],\n      ['sm', 1],\n      ['md', 2],\n      ['lg', 3],\n      ['xl', 4],\n    ] as const)\n      variables[`--leaf-spacing-${name}`] = `calc(var(--leaf-spacing) * ${scale})`;\n  }\n  if (theme.lineHeight !== undefined) variables['--leaf-line-height'] = theme.lineHeight;\n  if (theme.headingWeight !== undefined) variables['--leaf-heading-weight'] = theme.headingWeight;\n  if (theme.elevation)\n    for (const [name, blur, y] of [\n      ['sm', 8, 2],\n      ['md', 20, 6],\n      ['lg', 48, 12],\n    ] as const)\n      variables[`--leaf-shadow-${name}`] =\n        theme.elevation === 'none'\n          ? 'none'\n          : `0 ${y}px ${blur}px rgb(0 0 0 / ${theme.elevation === 'soft' ? '.08' : '.16'})`;\n  for (const [name, value] of Object.entries(theme.breakpoints ?? {}))\n    if (value !== undefined) variables[`--leaf-breakpoint-${name}`] = `${value}px`;\n  const componentKeys = {\n    borderRadius: 'radius',\n    controlHeight: 'height',\n    padding: 'padding',\n    gap: 'gap',\n    fontSize: 'font-size',\n    color: 'color',\n    background: 'background',\n    borderColor: 'border-color',\n    headerBackground: 'header-background',\n    footerBackground: 'footer-background',\n    shadow: 'shadow',\n  } as const;\n  for (const [component, tokens] of Object.entries(theme.components ?? {}))\n    for (const [key, value] of Object.entries(tokens))\n      if (value !== undefined && /^[a-z][a-z\\d-]*$/i.test(component)) {\n        const token = componentKeys[key as keyof typeof componentKeys];\n        if (token)\n          variables[\n            `--leaf-component-${component.replace(/([a-z\\d])([A-Z])/g, '$1-$2').toLowerCase()}-${token}`\n          ] = typeof value === 'number' ? length(value) : value;\n        if (key === 'controlHeight') {\n          const name = component.replace(/([a-z\\d])([A-Z])/g, '$1-$2').toLowerCase();\n          variables[`--leaf-component-${name}-height-sm`] =\n            `max(1px, calc(var(--leaf-component-${name}-height) - 6px))`;\n          variables[`--leaf-component-${name}-height-lg`] =\n            `calc(var(--leaf-component-${name}-height) + 6px)`;\n        }\n        if (key === 'padding') {\n          const name = component.replace(/([a-z\\d])([A-Z])/g, '$1-$2').toLowerCase();\n          const sides = paddingSides(length(value));\n          for (const [index, side] of ['top', 'right', 'bottom', 'left'].entries())\n            variables[`--leaf-component-${name}-padding-${side}`] = sides[index];\n        }\n      }\n  if (theme.primaryColor !== undefined) {\n    variables['--leaf-color-primary'] = theme.primaryColor;\n    variables['--leaf-color-on-primary'] = '#ffffff';\n  }\n  if (theme.borderRadius !== undefined) {\n    variables['--leaf-radius'] = length(theme.borderRadius);\n    variables['--leaf-radius-sm'] = 'calc(var(--leaf-radius) * 0.6)';\n    variables['--leaf-radius-md'] = 'calc(var(--leaf-radius) * 1.2)';\n    variables['--leaf-radius-lg'] = 'calc(var(--leaf-radius) * 1.6)';\n    variables['--leaf-choice-radius'] = 'calc(var(--leaf-radius) * 0.5)';\n  }\n  if (theme.controlHeight !== undefined) {\n    variables['--leaf-control-height'] = length(theme.controlHeight);\n    variables['--leaf-control-height-sm'] = 'max(1px, calc(var(--leaf-control-height) - 6px))';\n    variables['--leaf-control-height-lg'] = 'calc(var(--leaf-control-height) + 6px)';\n  }\n  if (theme.fontSize !== undefined) {\n    variables['--leaf-font-size'] = length(theme.fontSize);\n    variables['--leaf-font-size-sm'] = 'max(1px, calc(var(--leaf-font-size) - 1px))';\n    variables['--leaf-font-size-lg'] = 'calc(var(--leaf-font-size) + 2px)';\n  }\n  if (theme.fontFamily !== undefined) variables['--leaf-font-family'] = theme.fontFamily;\n  for (const key of Object.keys(tokenVariables) as (keyof LeafThemeTokens)[]) {\n    const value = theme.tokens?.[key];\n    if (value === undefined) continue;\n    const variable = tokenVariables[key];\n    variables[`--leaf-${variable}`] =\n      typeof value !== 'number'\n        ? value\n        : key === 'motionDuration'\n          ? `${value}ms`\n          : variable.includes('radius') ||\n              variable.includes('height') ||\n              variable.includes('font-size') ||\n              variable.includes('spacing')\n            ? length(value)\n            : value;\n  }\n  if (theme.motion !== undefined) {\n    variables['--leaf-motion-play-state'] = theme.motion ? 'running' : 'paused';\n    variables['--leaf-motion-animation'] = theme.motion ? 'initial' : 'none';\n    if (!theme.motion) variables['--leaf-motion-duration'] = '0ms';\n    else if (theme.tokens?.motionDuration === undefined)\n      variables['--leaf-motion-duration'] = '200ms';\n  }\n  if (\n    theme.appearance ||\n    theme.primaryColor ||\n    Object.keys(theme.tokens ?? {}).some((key) => key.endsWith('Color'))\n  ) {\n    return { ...deriveColors(theme.appearance ?? 'light', leafThemeColors(theme)), ...variables };\n  }\n  return variables;\n}\n"],"names":["defined","value","Object","item","undefined","mergeLeafTheme","parent","theme","Set","key","tokenVariables","length","paddingSides","parts","depth","start","index","character","part","top","right","bottom","left","leafThemeColors","colors","variable","leafThemeVariables","variables","Math","name","scale","blur","y","componentKeys","component","tokens","token","sides","side","deriveColors"],"mappings":"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"}
+{"version":3,"file":"theme.js","sources":["../../../../src/theme.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { deriveColors } from './colors';\n\n/** Shared CSS variables; configure component themes through ConfigProvider. */\nexport type LeafThemeStyle = CSSProperties & {\n  [key: `--leaf-${string}`]: string | number | undefined;\n};\n\n/** Common settings. Other sizes and interaction colors are derived automatically. */\nexport interface LeafTheme {\n  primaryColor?: string;\n  borderRadius?: number | string;\n  controlHeight?: number | string;\n  fontSize?: number | string;\n  fontFamily?: string;\n  appearance?: 'light' | 'dark';\n  motion?: boolean;\n  tokens?: LeafThemeTokens;\n  spacing?: number;\n  lineHeight?: number;\n  headingWeight?: number;\n  elevation?: 'none' | 'soft' | 'medium';\n  breakpoints?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>;\n  components?: Record<string, LeafComponentTokens>;\n}\nexport interface LeafComponentTokens {\n  borderRadius?: string | number;\n  borderWidth?: string | number;\n  controlHeight?: string | number;\n  padding?: string | number;\n  gap?: string | number;\n  fontSize?: string | number;\n  color?: string;\n  background?: string;\n  borderColor?: string;\n  headerBackground?: string;\n  footerBackground?: string;\n  shadow?: string;\n  hover?: LeafComponentStateTokens;\n  active?: LeafComponentStateTokens;\n  focus?: LeafComponentStateTokens;\n  disabled?: LeafComponentStateTokens;\n}\n\n/** Interaction overrides supported by themed controls; focus keeps the accessible outline. */\nexport interface LeafComponentStateTokens {\n  color?: string;\n  background?: string;\n  borderColor?: string;\n  shadow?: string;\n}\n\n/** Optional overrides for applications with more specific design requirements. */\nexport interface LeafThemeTokens {\n  onPrimaryColor?: string;\n  dangerColor?: string;\n  onDangerColor?: string;\n  successColor?: string;\n  warningColor?: string;\n  infoColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  subtleTextColor?: string;\n  surfaceColor?: string;\n  mutedSurfaceColor?: string;\n  raisedSurfaceColor?: string;\n  borderColor?: string;\n  borderHoverColor?: string;\n  dividerColor?: string;\n  borderWidth?: number | string;\n  controlShadow?: string;\n  surfaceShadow?: string;\n  borderRadiusSm?: number | string;\n  borderRadiusMd?: number | string;\n  borderRadiusLg?: number | string;\n  controlHeightSm?: number | string;\n  controlHeightLg?: number | string;\n  fontSizeSm?: number | string;\n  fontSizeLg?: number | string;\n  fontWeight?: number;\n  motionDuration?: number | string;\n  motionEasing?: string;\n  motionSpring?: string;\n  popupZIndex?: number;\n  modalZIndex?: number;\n  messageZIndex?: number;\n  buttonBorderRadius?: number | string;\n  buttonHeight?: number | string;\n  choiceBorderRadius?: number | string;\n  focusColor?: string;\n  primaryHoverColor?: string;\n  primaryActiveColor?: string;\n  primarySoftColor?: string;\n  primarySoftHoverColor?: string;\n  primarySoftActiveColor?: string;\n  primaryBorderColor?: string;\n  dangerHoverColor?: string;\n  dangerActiveColor?: string;\n  spacingSm?: number | string;\n  spacingLg?: number | string;\n  shadowSm?: string;\n  shadowXs?: string;\n  shadowMd?: string;\n  shadowLg?: string;\n  lineHeight?: number;\n}\n\nconst defined = <T extends object>(value?: T) =>\n  Object.fromEntries(Object.entries(value ?? {}).filter(([, item]) => item !== undefined)) as T;\n\nconst componentStates = ['hover', 'active', 'focus', 'disabled'] as const;\n\nfunction mergeComponentTokens(\n  parent?: LeafComponentTokens,\n  tokens?: LeafComponentTokens,\n): LeafComponentTokens {\n  const merged = { ...defined(parent), ...defined(tokens) };\n  for (const state of componentStates)\n    if (parent?.[state] || tokens?.[state])\n      merged[state] = { ...defined(parent?.[state]), ...defined(tokens?.[state]) };\n  return merged;\n}\n\nexport function mergeLeafTheme(parent: LeafTheme, theme?: LeafTheme): LeafTheme {\n  return {\n    ...parent,\n    ...defined(theme),\n    breakpoints: { ...parent.breakpoints, ...defined(theme?.breakpoints) },\n    components: Object.fromEntries(\n      [\n        ...new Set([\n          ...Object.keys(parent.components ?? {}),\n          ...Object.keys(theme?.components ?? {}),\n        ]),\n      ].map((key) => [\n        key,\n        mergeComponentTokens(parent.components?.[key], theme?.components?.[key]),\n      ]),\n    ),\n    ...(parent.tokens || theme?.tokens\n      ? { tokens: { ...parent.tokens, ...defined(theme?.tokens) } }\n      : {}),\n  };\n}\n\nconst tokenVariables = {\n  onPrimaryColor: 'color-on-primary',\n  dangerColor: 'color-danger',\n  onDangerColor: 'color-on-danger',\n  successColor: 'color-success',\n  warningColor: 'color-warning',\n  infoColor: 'color-info',\n  textColor: 'color-text',\n  mutedTextColor: 'color-text-muted',\n  subtleTextColor: 'color-text-subtle',\n  surfaceColor: 'color-surface',\n  mutedSurfaceColor: 'color-surface-muted',\n  raisedSurfaceColor: 'color-surface-raised',\n  borderColor: 'color-border',\n  borderHoverColor: 'color-border-hover',\n  dividerColor: 'color-divider',\n  borderWidth: 'border-width',\n  controlShadow: 'control-shadow',\n  surfaceShadow: 'surface-shadow',\n  borderRadiusSm: 'radius-sm',\n  borderRadiusMd: 'radius-md',\n  borderRadiusLg: 'radius-lg',\n  controlHeightSm: 'control-height-sm',\n  controlHeightLg: 'control-height-lg',\n  fontSizeSm: 'font-size-sm',\n  fontSizeLg: 'font-size-lg',\n  fontWeight: 'font-weight',\n  motionDuration: 'motion-duration',\n  motionEasing: 'motion-easing',\n  motionSpring: 'motion-spring',\n  popupZIndex: 'z-index-popup',\n  modalZIndex: 'z-index-modal',\n  messageZIndex: 'z-index-message',\n  buttonBorderRadius: 'button-radius',\n  buttonHeight: 'button-height',\n  choiceBorderRadius: 'choice-radius',\n  focusColor: 'color-focus',\n  primaryHoverColor: 'color-primary-hover',\n  primaryActiveColor: 'color-primary-active',\n  primarySoftColor: 'color-primary-soft',\n  primarySoftHoverColor: 'color-primary-soft-hover',\n  primarySoftActiveColor: 'color-primary-soft-active',\n  primaryBorderColor: 'color-primary-border',\n  dangerHoverColor: 'color-danger-hover',\n  dangerActiveColor: 'color-danger-active',\n  spacingSm: 'spacing-sm',\n  spacingLg: 'spacing-lg',\n  shadowSm: 'shadow-sm',\n  shadowXs: 'shadow-xs',\n  shadowMd: 'shadow-md',\n  shadowLg: 'shadow-lg',\n  lineHeight: 'line-height',\n} satisfies Record<keyof LeafThemeTokens, string>;\n\nconst length = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n\n/** Expand CSS padding without splitting whitespace inside calc()/var(). */\nfunction paddingSides(value: string) {\n  const parts: string[] = [];\n  let depth = 0;\n  let start = 0;\n  for (let index = 0; index <= value.length; index++) {\n    const character = value[index];\n    if (character === '(') depth++;\n    else if (character === ')') depth--;\n    if (index === value.length || (depth === 0 && /\\s/.test(character ?? ''))) {\n      const part = value.slice(start, index).trim();\n      if (part) parts.push(part);\n      start = index + 1;\n    }\n  }\n  if (!parts.length || parts.length > 4) return [];\n  const [top, right = top, bottom = top, left = right] = parts;\n  return [top, right, bottom, left];\n}\n\n/** Explicit inputs, excluding the generated palette, for browser CSS-variable resolution. */\nexport function leafThemeColors(theme: LeafTheme): Record<string, string> {\n  const colors: Record<string, string> = {};\n  if (theme.primaryColor) {\n    colors.primary = theme.primaryColor;\n  }\n  for (const key of Object.keys(tokenVariables) as (keyof LeafThemeTokens)[]) {\n    const variable = tokenVariables[key];\n    const value = theme.tokens?.[key];\n    if (variable.startsWith('color-') && typeof value === 'string')\n      colors[variable.slice(6)] = value;\n  }\n  return colors;\n}\n\n/** Pure, deterministic output can be rendered in the server's initial HTML. */\nexport function leafThemeVariables(theme: LeafTheme): LeafThemeStyle {\n  const variables: LeafThemeStyle = {};\n  if (theme.spacing !== undefined) {\n    variables['--leaf-spacing'] = `${Math.max(0, theme.spacing)}px`;\n    for (const [name, scale] of [\n      ['xs', 0.5],\n      ['sm', 1],\n      ['md', 2],\n      ['lg', 3],\n      ['xl', 4],\n    ] as const)\n      variables[`--leaf-spacing-${name}`] = `calc(var(--leaf-spacing) * ${scale})`;\n  }\n  if (theme.lineHeight !== undefined) variables['--leaf-line-height'] = theme.lineHeight;\n  if (theme.headingWeight !== undefined) variables['--leaf-heading-weight'] = theme.headingWeight;\n  if (theme.elevation)\n    for (const [name, blur, y] of [\n      ['sm', 8, 2],\n      ['md', 20, 6],\n      ['lg', 48, 12],\n    ] as const)\n      variables[`--leaf-shadow-${name}`] =\n        theme.elevation === 'none'\n          ? 'none'\n          : `0 ${y}px ${blur}px rgb(0 0 0 / ${theme.elevation === 'soft' ? '.08' : '.16'})`;\n  for (const [name, value] of Object.entries(theme.breakpoints ?? {}))\n    if (value !== undefined) variables[`--leaf-breakpoint-${name}`] = `${value}px`;\n  const componentKeys = {\n    borderRadius: 'radius',\n    borderWidth: 'border-width',\n    controlHeight: 'height',\n    padding: 'padding',\n    gap: 'gap',\n    fontSize: 'font-size',\n    color: 'color',\n    background: 'background',\n    borderColor: 'border-color',\n    headerBackground: 'header-background',\n    footerBackground: 'footer-background',\n    shadow: 'shadow',\n  } as const;\n  const stateKeys = {\n    color: 'color',\n    background: 'background',\n    borderColor: 'border-color',\n    shadow: 'shadow',\n  } as const;\n  for (const [component, tokens] of Object.entries(theme.components ?? {})) {\n    if (!/^[a-z][a-z\\d-]*$/i.test(component)) continue;\n    const name = component.replace(/([a-z\\d])([A-Z])/g, '$1-$2').toLowerCase();\n    for (const [key, value] of Object.entries(tokens))\n      if (value !== undefined && typeof value !== 'object') {\n        const token = componentKeys[key as keyof typeof componentKeys];\n        if (token)\n          variables[`--leaf-component-${name}-${token}`] =\n            typeof value === 'number' ? length(value) : value;\n        if (key === 'controlHeight') {\n          variables[`--leaf-component-${name}-height-sm`] =\n            `max(1px, calc(var(--leaf-component-${name}-height) - 6px))`;\n          variables[`--leaf-component-${name}-height-lg`] =\n            `calc(var(--leaf-component-${name}-height) + 6px)`;\n        }\n        if (key === 'padding') {\n          const sides = paddingSides(length(value));\n          for (const [index, side] of ['top', 'right', 'bottom', 'left'].entries())\n            variables[`--leaf-component-${name}-padding-${side}`] = sides[index];\n        }\n      }\n    for (const state of componentStates)\n      for (const [key, suffix] of Object.entries(stateKeys)) {\n        const value = tokens[state]?.[key as keyof LeafComponentStateTokens];\n        if (value !== undefined) variables[`--leaf-component-${name}-${state}-${suffix}`] = value;\n      }\n  }\n  if (theme.borderRadius !== undefined) {\n    variables['--leaf-radius'] = length(theme.borderRadius);\n    variables['--leaf-radius-sm'] = 'calc(var(--leaf-radius) * 0.6)';\n    variables['--leaf-radius-md'] = 'calc(var(--leaf-radius) * 1.2)';\n    variables['--leaf-radius-lg'] = 'calc(var(--leaf-radius) * 1.6)';\n    variables['--leaf-choice-radius'] = 'calc(var(--leaf-radius) * 0.5)';\n  }\n  if (theme.controlHeight !== undefined) {\n    variables['--leaf-control-height'] = length(theme.controlHeight);\n    variables['--leaf-control-height-sm'] = 'max(1px, calc(var(--leaf-control-height) - 6px))';\n    variables['--leaf-control-height-lg'] = 'calc(var(--leaf-control-height) + 6px)';\n  }\n  if (theme.fontSize !== undefined) {\n    variables['--leaf-font-size'] = length(theme.fontSize);\n    variables['--leaf-font-size-sm'] = 'max(1px, calc(var(--leaf-font-size) - 1px))';\n    variables['--leaf-font-size-lg'] = 'calc(var(--leaf-font-size) + 2px)';\n  }\n  if (theme.fontFamily !== undefined) variables['--leaf-font-family'] = theme.fontFamily;\n  for (const key of Object.keys(tokenVariables) as (keyof LeafThemeTokens)[]) {\n    const value = theme.tokens?.[key];\n    if (value === undefined) continue;\n    const variable = tokenVariables[key];\n    variables[`--leaf-${variable}`] =\n      typeof value !== 'number'\n        ? value\n        : key === 'motionDuration'\n          ? `${value}ms`\n          : variable.includes('radius') ||\n              variable.includes('height') ||\n              variable.includes('font-size') ||\n              variable === 'border-width' ||\n              variable.includes('spacing')\n            ? length(value)\n            : value;\n  }\n  // An explicit global border color also styles frames whose normal border is\n  // transparent or muted. Component and semantic state overrides still win.\n  if (theme.tokens?.borderColor !== undefined)\n    variables['--leaf-frame-border-color'] = theme.tokens.borderColor;\n  if (theme.motion !== undefined) {\n    variables['--leaf-motion-play-state'] = theme.motion ? 'running' : 'paused';\n    variables['--leaf-motion-animation'] = theme.motion ? 'initial' : 'none';\n    if (!theme.motion) variables['--leaf-motion-duration'] = '0ms';\n    else if (theme.tokens?.motionDuration === undefined)\n      variables['--leaf-motion-duration'] = '200ms';\n  }\n  if (\n    theme.appearance ||\n    theme.primaryColor ||\n    Object.keys(theme.tokens ?? {}).some((key) => key.endsWith('Color'))\n  ) {\n    return { ...deriveColors(theme.appearance ?? 'light', leafThemeColors(theme)), ...variables };\n  }\n  return variables;\n}\n"],"names":["defined","value","Object","item","undefined","componentStates","mergeComponentTokens","parent","tokens","merged","state","mergeLeafTheme","theme","Set","key","tokenVariables","length","paddingSides","parts","depth","start","index","character","part","top","right","bottom","left","leafThemeColors","colors","variable","leafThemeVariables","variables","Math","name","scale","blur","y","componentKeys","stateKeys","component","token","sides","side","suffix","deriveColors"],"mappings":"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"}

package/dist/esm/browser/modules/timeline/timeline.js

@@ -38,7 +38,7 @@ function Timeline(rawProps) {
                 "data-pending": '__leaf-pending' === item.key || void 0,
                 "data-side": 'right' === mode || 'alternate' === mode && index % 2 ? 'right' : 'left',
                 style: {
-                    '--leaf-timeline-color': item.color && item.color in colors ? `var(--leaf-color-${colors[item.color]})` : item.color ?? 'var(--leaf-color-primary)'
+                    '--leaf-timeline-color': item.color && item.color in colors ? `var(--leaf-color-${colors[item.color]})` : item.color ?? 'var(--leaf-color-primary-indicator, var(--leaf-color-primary))'
                 },
                 children: [
                     /*#__PURE__*/ jsx("div", {