@askrjs/themes 0.0.6 → 0.0.8

package/dist/components/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { state } from \"@askrjs/askr\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { NavBrand } from \"../navbar/navbar\";\nimport {\n  isShellPanelChild,\n  renderKeyedShellChildren,\n  renderKeyedShellPanelChildren,\n  ShellPanelWatcher,\n  ShellResponsiveWatcher,\n} from \"../shell/shell-responsive\";\nimport { SidebarContext, SidebarResponsiveContext } from \"./sidebar.context\";\nimport { SidebarPanel } from \"./sidebar-panel\";\nimport { SidebarToggle } from \"./sidebar-toggle\";\nimport { isSidebarCollapsed, resolveSidebarCollapsible } from \"./sidebar.shared\";\nimport type { SidebarProps } from \"./sidebar.types\";\nimport type { CollapseIconPlacement } from \"../shell/shell-nav.types\";\n\ntype SidebarChildren = {\n  brand?: unknown;\n  items: unknown[];\n};\n\ntype SidebarToggleConfig = {\n  collapsedIcon?: unknown;\n  expandedIcon?: unknown;\n};\n\nfunction splitSidebarChildren(children: unknown[]): SidebarChildren {\n  const brandIndex = children.findIndex((child) => isJsxElement(child) && child.type === NavBrand);\n\n  if (brandIndex === -1) {\n    return { items: children };\n  }\n\n  return {\n    brand: children[brandIndex],\n    items: children.filter((_, index) => index !== brandIndex),\n  };\n}\n\nfunction isSidebarToggleChild(child: unknown): boolean {\n  return isJsxElement(child) && child.type === SidebarToggle;\n}\n\nfunction splitSidebarToggle(children: unknown[]): {\n  items: unknown[];\n  toggle?: SidebarToggleConfig;\n} {\n  const toggleIndex = children.findIndex((child) => isSidebarToggleChild(child));\n\n  if (toggleIndex === -1) {\n    return { items: children };\n  }\n\n  const toggleChild = children[toggleIndex] as { props?: SidebarToggleConfig } | undefined;\n\n  return {\n    items: children.filter((_, index) => index !== toggleIndex),\n    toggle: toggleChild?.props,\n  };\n}\n\nfunction renderSidebarMenuContents(\n  label: string,\n  icon: unknown,\n  iconPlacement: CollapseIconPlacement,\n): JSX.Element {\n  const renderedIcon = (\n    <span class=\"sidebar-toggle-icon\" data-slot=\"sidebar-toggle-icon\" aria-hidden=\"true\">\n      {icon ?? (\n        <span class=\"sidebar-toggle-glyph sidebar-toggle-glyph--menu\">\n          <span />\n          <span />\n          <span />\n        </span>\n      )}\n    </span>\n  );\n  const renderedLabel = (\n    <span class=\"sidebar-toggle-label\" data-slot=\"sidebar-toggle-label\">\n      {label}\n    </span>\n  );\n\n  if (iconPlacement === \"end\") {\n    return (\n      <>\n        {renderedLabel}\n        {renderedIcon}\n      </>\n    );\n  }\n\n  return (\n    <>\n      {renderedIcon}\n      {renderedLabel}\n    </>\n  );\n}\n\nfunction renderSidebarRailContents(\n  label: string,\n  collapsed: boolean,\n  toggle: SidebarToggleConfig | undefined,\n): JSX.Element {\n  const icon = collapsed ? toggle?.collapsedIcon : toggle?.expandedIcon;\n\n  return (\n    <>\n      <span\n        class=\"sidebar-rail-toggle-icon\"\n        data-slot=\"sidebar-rail-toggle-icon\"\n        aria-hidden=\"true\"\n      >\n        {icon ?? (\n          <span\n            class={classes(\n              \"sidebar-toggle-glyph\",\n              \"sidebar-toggle-glyph--rail\",\n              collapsed ? \"is-collapsed\" : \"is-expanded\",\n            )}\n          />\n        )}\n      </span>\n      <span class=\"sidebar-rail-toggle-label\" data-slot=\"sidebar-rail-toggle-label\">\n        {label}\n      </span>\n    </>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const {\n    children,\n    collapsed: controlledCollapsed,\n    breakpoint,\n    collapseIcon,\n    collapseIconPlacement = \"start\",\n    collapseLabel,\n    collapsible,\n    defaultCollapsed = false,\n    id,\n    \"aria-label\": ariaLabel,\n    onCollapsedChange,\n    class: className,\n    ref,\n    ...rest\n  } = props;\n  const effectiveCollapseLabel =\n    collapseLabel ?? (typeof ariaLabel === \"string\" ? ariaLabel : undefined) ?? \"Menu\";\n  const childItems = toChildArray(children);\n  const explicitPanelItems = childItems.filter((child) => isShellPanelChild(child, SidebarPanel));\n  const contentItems = childItems.filter((child) => !isShellPanelChild(child, SidebarPanel));\n  const isResponsive = breakpoint !== undefined;\n  const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);\n  const drawerOpenState = state(false);\n  const panelId = typeof id === \"string\" ? `${id}-panel` : undefined;\n  const collapseBehavior = resolveSidebarCollapsible(collapsible);\n  const isRailCollapsible = collapseBehavior === \"icon\";\n  const railCollapsedState = state(defaultCollapsed);\n  const responsiveCollapsed = responsiveCollapsedState();\n  const drawerOpen = drawerOpenState();\n  const internalRailCollapsed = railCollapsedState();\n  const isMobile = isResponsive ? responsiveCollapsed : false;\n  const isDrawerOpen = isResponsive && isMobile && drawerOpen;\n  const isRailCollapsed = isRailCollapsible\n    ? (controlledCollapsed ?? internalRailCollapsed ?? false)\n    : false;\n  const closeDrawer = () => drawerOpenState.set(false);\n  const closeDrawerOnNavActivation = (event: MouseEvent) => {\n    const target = event.target;\n\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    if (target.closest('a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item')) {\n      closeDrawer();\n    }\n  };\n  const toggleDrawer = () => {\n    drawerOpenState.set(!drawerOpenState());\n  };\n  const setRailCollapsed = (nextCollapsed: boolean) => {\n    if (!isRailCollapsible) {\n      return;\n    }\n\n    if (controlledCollapsed === undefined) {\n      railCollapsedState.set(nextCollapsed);\n    }\n\n    onCollapsedChange?.(nextCollapsed);\n  };\n  const toggleRail = () => {\n    if (!isRailCollapsible) {\n      return;\n    }\n\n    setRailCollapsed(!isRailCollapsed);\n  };\n  const { items: drawerSourceItems, toggle: railToggleConfig } = splitSidebarToggle(contentItems);\n  const { brand: drawerBrand, items: drawerItems } = splitSidebarChildren(drawerSourceItems);\n  const desktopChildren = renderKeyedShellChildren(drawerSourceItems, \"sidebar-desktop\");\n  const drawerChildren = renderKeyedShellChildren(drawerItems, \"sidebar-drawer\");\n\n  const contextValue = {\n    active: () => isResponsive,\n    collapseLabel: () => effectiveCollapseLabel,\n    closePanel: closeDrawer,\n    iconCollapsed: () => isRailCollapsed,\n    isRailCollapsible: () => isRailCollapsible,\n    orientation: () => \"vertical\" as const,\n    panelId: () => panelId,\n    panelOpen: () => isDrawerOpen,\n    togglePanel: toggleDrawer,\n    toggleRail,\n  };\n  const panelContext = {\n    active: isResponsive,\n    collapseLabel: effectiveCollapseLabel,\n    onClose: closeDrawer,\n    open: isDrawerOpen,\n    panelId,\n  };\n  const panels =\n    explicitPanelItems.length > 0 ? (\n      renderKeyedShellPanelChildren(explicitPanelItems, \"sidebar-panel\", panelContext)\n    ) : isResponsive ? (\n      <SidebarPanel\n        active={isResponsive}\n        brand={drawerBrand}\n        collapseLabel={effectiveCollapseLabel}\n        onClose={closeDrawer}\n        onClick={closeDrawerOnNavActivation}\n        open={isDrawerOpen}\n        panelId={panelId}\n      >\n        {drawerChildren}\n      </SidebarPanel>\n    ) : null;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"aria-label\": ariaLabel,\n    class: classes(\"sidebar\", className),\n    \"data-collapse-below\": breakpoint,\n    \"data-collapsible\": collapseBehavior === \"none\" ? undefined : collapseBehavior,\n    \"data-icon-collapsed\": isRailCollapsible ? (isRailCollapsed ? \"true\" : \"false\") : undefined,\n    \"data-mobile-open\": isResponsive ? (drawerOpen ? \"true\" : \"false\") : undefined,\n    \"data-orientation\": \"vertical\",\n    \"data-responsive-collapsed\": isMobile ? \"true\" : \"false\",\n    \"data-slot\": \"sidebar\",\n  });\n\n  return (\n    <SidebarContext.Scope value={{ orientation: () => \"vertical\" as const }}>\n      <SidebarResponsiveContext.Scope value={contextValue}>\n        <nav {...finalProps}>\n          {isResponsive ? (\n            <div class=\"sidebar-mobile\" data-slot=\"sidebar-mobile\">\n              <button\n                aria-controls={panelId}\n                aria-expanded={isDrawerOpen ? \"true\" : \"false\"}\n                aria-label={effectiveCollapseLabel}\n                class=\"sidebar-toggle\"\n                data-slot=\"sidebar-toggle\"\n                data-state={isDrawerOpen ? \"open\" : \"closed\"}\n                data-variant=\"mobile\"\n                type=\"button\"\n                onClick={toggleDrawer}\n              >\n                {renderSidebarMenuContents(\n                  effectiveCollapseLabel,\n                  collapseIcon,\n                  collapseIconPlacement,\n                )}\n              </button>\n            </div>\n          ) : null}\n\n          <div class=\"sidebar-shell\" data-orientation=\"vertical\" data-slot=\"sidebar-shell\">\n            {isRailCollapsible && !isMobile ? (\n              <div\n                class=\"sidebar-rail\"\n                data-slot=\"sidebar-rail\"\n                data-state={isRailCollapsed ? \"collapsed\" : \"expanded\"}\n              >\n                <button\n                  aria-expanded={isRailCollapsed ? \"false\" : \"true\"}\n                  aria-label={\n                    isRailCollapsed\n                      ? `Expand ${effectiveCollapseLabel}`\n                      : `Collapse ${effectiveCollapseLabel}`\n                  }\n                  class=\"sidebar-rail-toggle\"\n                  data-slot=\"sidebar-rail-toggle\"\n                  data-state={isRailCollapsed ? \"collapsed\" : \"expanded\"}\n                  type=\"button\"\n                  onClick={toggleRail}\n                >\n                  {renderSidebarRailContents(\n                    effectiveCollapseLabel,\n                    isRailCollapsed,\n                    railToggleConfig,\n                  )}\n                </button>\n              </div>\n            ) : null}\n            {desktopChildren}\n          </div>\n\n          {panels}\n\n          {isResponsive && isDrawerOpen ? (\n            <button\n              aria-label={`Close ${effectiveCollapseLabel}`}\n              class=\"sidebar-backdrop\"\n              data-slot=\"sidebar-backdrop\"\n              data-state=\"open\"\n              tabIndex={-1}\n              type=\"button\"\n              onClick={closeDrawer}\n            />\n          ) : null}\n\n          {isResponsive ? (\n            <ShellResponsiveWatcher\n              breakpoint={breakpoint}\n              isCollapsed={isSidebarCollapsed}\n              onResize={(nextCollapsed) => {\n                responsiveCollapsedState.set(nextCollapsed);\n              }}\n              onExpand={() => {\n                drawerOpenState.set(false);\n              }}\n            />\n          ) : null}\n\n          <ShellPanelWatcher\n            contentId={panelId}\n            open={isDrawerOpen}\n            panelSlot=\"sidebar-panel\"\n            onClose={() => {\n              closeDrawer();\n            }}\n          />\n        </nav>\n      </SidebarResponsiveContext.Scope>\n    </SidebarContext.Scope>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { state } from \"@askrjs/askr\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { NavBrand } from \"../navbar/navbar\";\nimport {\n  isShellPanelChild,\n  renderKeyedShellChildren,\n  renderKeyedShellPanelChildren,\n  ShellPanelWatcher,\n  ShellResponsiveWatcher,\n} from \"../shell/shell-responsive\";\nimport { SidebarContext, SidebarResponsiveContext } from \"./sidebar.context\";\nimport { SidebarPanel } from \"./sidebar-panel\";\nimport { SidebarToggle } from \"./sidebar-toggle\";\nimport { isSidebarCollapsed, resolveSidebarCollapsible } from \"./sidebar.shared\";\nimport type { SidebarProps } from \"./sidebar.types\";\nimport type { CollapseIconPlacement } from \"../shell/shell-nav.types\";\n\ntype SidebarChildren = {\n  brand?: unknown;\n  items: unknown[];\n};\n\ntype SidebarToggleConfig = {\n  collapsedIcon?: unknown;\n  expandedIcon?: unknown;\n};\n\nfunction splitSidebarChildren(children: unknown[]): SidebarChildren {\n  const brandIndex = children.findIndex((child) => isJsxElement(child) && child.type === NavBrand);\n\n  if (brandIndex === -1) {\n    return { items: children };\n  }\n\n  return {\n    brand: children[brandIndex],\n    items: children.filter((_, index) => index !== brandIndex),\n  };\n}\n\nfunction isSidebarToggleChild(child: unknown): boolean {\n  return isJsxElement(child) && child.type === SidebarToggle;\n}\n\nfunction splitSidebarToggle(children: unknown[]): {\n  items: unknown[];\n  toggle?: SidebarToggleConfig;\n} {\n  const toggleIndex = children.findIndex((child) => isSidebarToggleChild(child));\n\n  if (toggleIndex === -1) {\n    return { items: children };\n  }\n\n  const toggleChild = children[toggleIndex] as { props?: SidebarToggleConfig } | undefined;\n\n  return {\n    items: children.filter((_, index) => index !== toggleIndex),\n    toggle: toggleChild?.props,\n  };\n}\n\nfunction renderSidebarMenuContents(\n  label: string,\n  icon: unknown,\n  iconPlacement: CollapseIconPlacement,\n): JSX.Element {\n  const renderedIcon = (\n    <span class=\"sidebar-toggle-icon\" data-slot=\"sidebar-toggle-icon\" aria-hidden=\"true\">\n      {icon ?? (\n        <span class=\"sidebar-toggle-glyph sidebar-toggle-glyph--menu\">\n          <span />\n          <span />\n          <span />\n        </span>\n      )}\n    </span>\n  );\n  const renderedLabel = (\n    <span class=\"sidebar-toggle-label\" data-slot=\"sidebar-toggle-label\">\n      {label}\n    </span>\n  );\n\n  if (iconPlacement === \"end\") {\n    return (\n      <>\n        {renderedLabel}\n        {renderedIcon}\n      </>\n    );\n  }\n\n  return (\n    <>\n      {renderedIcon}\n      {renderedLabel}\n    </>\n  );\n}\n\nfunction renderSidebarRailContents(\n  label: string,\n  collapsed: boolean,\n  toggle: SidebarToggleConfig | undefined,\n): JSX.Element {\n  const icon = collapsed ? toggle?.collapsedIcon : toggle?.expandedIcon;\n\n  return (\n    <>\n      <span\n        class=\"sidebar-rail-toggle-icon\"\n        data-slot=\"sidebar-rail-toggle-icon\"\n        aria-hidden=\"true\"\n      >\n        {icon ?? (\n          <span\n            class={classes(\n              \"sidebar-toggle-glyph\",\n              \"sidebar-toggle-glyph--rail\",\n              collapsed ? \"is-collapsed\" : \"is-expanded\",\n            )}\n          />\n        )}\n      </span>\n      <span class=\"sidebar-rail-toggle-label\" data-slot=\"sidebar-rail-toggle-label\">\n        {label}\n      </span>\n    </>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const {\n    children,\n    collapsed: controlledCollapsed,\n    breakpoint,\n    collapseIcon,\n    collapseIconPlacement = \"start\",\n    collapseLabel,\n    collapsible,\n    defaultCollapsed = false,\n    id,\n    \"aria-label\": ariaLabel,\n    onCollapsedChange,\n    class: className,\n    ref,\n    ...rest\n  } = props;\n  const effectiveCollapseLabel =\n    collapseLabel ?? (typeof ariaLabel === \"string\" ? ariaLabel : undefined) ?? \"Menu\";\n  const childItems = toChildArray(children);\n  const explicitPanelItems = childItems.filter((child) => isShellPanelChild(child, SidebarPanel));\n  const contentItems = childItems.filter((child) => !isShellPanelChild(child, SidebarPanel));\n  const isResponsive = breakpoint !== undefined;\n  const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);\n  const drawerOpenState = state(false);\n  const panelId = typeof id === \"string\" ? `${id}-panel` : undefined;\n  const collapseBehavior = resolveSidebarCollapsible(collapsible);\n  const isRailCollapsible = collapseBehavior === \"icon\";\n  const railCollapsedState = state(defaultCollapsed);\n  const responsiveCollapsed = responsiveCollapsedState();\n  const drawerOpen = drawerOpenState();\n  const internalRailCollapsed = railCollapsedState();\n  const isMobile = isResponsive ? responsiveCollapsed : false;\n  const isDrawerOpen = isResponsive && isMobile && drawerOpen;\n  const isRailCollapsed = isRailCollapsible\n    ? (controlledCollapsed ?? internalRailCollapsed ?? false)\n    : false;\n  const closeDrawer = () => drawerOpenState.set(false);\n  const closeDrawerOnNavActivation = (event: MouseEvent) => {\n    const target = event.target;\n\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    if (target.closest('a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item')) {\n      closeDrawer();\n    }\n  };\n  const toggleDrawer = () => {\n    drawerOpenState.set(!drawerOpenState());\n  };\n  const setRailCollapsed = (nextCollapsed: boolean) => {\n    if (!isRailCollapsible) {\n      return;\n    }\n\n    if (controlledCollapsed === undefined) {\n      railCollapsedState.set(nextCollapsed);\n    }\n\n    onCollapsedChange?.(nextCollapsed);\n  };\n  const toggleRail = () => {\n    if (!isRailCollapsible) {\n      return;\n    }\n\n    setRailCollapsed(!isRailCollapsed);\n  };\n  const { items: drawerSourceItems, toggle: railToggleConfig } = splitSidebarToggle(contentItems);\n  const { brand: drawerBrand, items: drawerItems } = splitSidebarChildren(drawerSourceItems);\n  const desktopChildren = renderKeyedShellChildren(drawerSourceItems, \"sidebar-desktop\");\n  const drawerChildren = renderKeyedShellChildren(drawerItems, \"sidebar-drawer\");\n\n  const contextValue = {\n    active: () => isResponsive,\n    collapseLabel: () => effectiveCollapseLabel,\n    closePanel: closeDrawer,\n    iconCollapsed: () => isRailCollapsed,\n    isRailCollapsible: () => isRailCollapsible,\n    orientation: () => \"vertical\" as const,\n    panelId: () => panelId,\n    panelOpen: () => isDrawerOpen,\n    togglePanel: toggleDrawer,\n    toggleRail,\n  };\n  const panelContext = {\n    active: isResponsive,\n    collapseLabel: effectiveCollapseLabel,\n    onClose: closeDrawer,\n    open: isDrawerOpen,\n    panelId,\n  };\n  const panels =\n    explicitPanelItems.length > 0 ? (\n      renderKeyedShellPanelChildren(explicitPanelItems, \"sidebar-panel\", panelContext)\n    ) : isResponsive ? (\n      <SidebarPanel\n        active={isResponsive}\n        brand={drawerBrand}\n        collapseLabel={effectiveCollapseLabel}\n        onClose={closeDrawer}\n        onClick={closeDrawerOnNavActivation}\n        open={isDrawerOpen}\n        panelId={panelId}\n      >\n        {drawerChildren}\n      </SidebarPanel>\n    ) : null;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"aria-label\": ariaLabel,\n    class: classes(\"sidebar\", className),\n    \"data-collapse-below\": breakpoint,\n    \"data-collapsible\": collapseBehavior === \"none\" ? undefined : collapseBehavior,\n    \"data-icon-collapsed\": isRailCollapsible ? (isRailCollapsed ? \"true\" : \"false\") : undefined,\n    \"data-mobile-open\": isResponsive ? (drawerOpen ? \"true\" : \"false\") : undefined,\n    \"data-orientation\": \"vertical\",\n    \"data-responsive-collapsed\": isMobile ? \"true\" : \"false\",\n    \"data-slot\": \"sidebar\",\n  });\n\n  return (\n    <SidebarContext.Scope value={{ orientation: () => \"vertical\" as const }}>\n      <SidebarResponsiveContext.Scope value={contextValue}>\n        <nav {...finalProps}>\n          {isResponsive ? (\n            <div class=\"sidebar-mobile\" data-slot=\"sidebar-mobile\">\n              <button\n                aria-controls={panelId}\n                aria-expanded={isDrawerOpen ? \"true\" : \"false\"}\n                aria-label={effectiveCollapseLabel}\n                class=\"sidebar-toggle\"\n                data-slot=\"sidebar-toggle\"\n                data-state={isDrawerOpen ? \"open\" : \"closed\"}\n                data-variant=\"mobile\"\n                type=\"button\"\n                onClick={toggleDrawer}\n              >\n                {renderSidebarMenuContents(\n                  effectiveCollapseLabel,\n                  collapseIcon,\n                  collapseIconPlacement,\n                )}\n              </button>\n            </div>\n          ) : null}\n\n          <div class=\"sidebar-shell\" data-orientation=\"vertical\" data-slot=\"sidebar-shell\">\n            {isRailCollapsible && !isMobile ? (\n              <div\n                class=\"sidebar-rail\"\n                data-slot=\"sidebar-rail\"\n                data-state={isRailCollapsed ? \"collapsed\" : \"expanded\"}\n              >\n                <button\n                  aria-expanded={isRailCollapsed ? \"false\" : \"true\"}\n                  aria-label={\n                    isRailCollapsed\n                      ? `Expand ${effectiveCollapseLabel}`\n                      : `Collapse ${effectiveCollapseLabel}`\n                  }\n                  class=\"sidebar-rail-toggle\"\n                  data-slot=\"sidebar-rail-toggle\"\n                  data-state={isRailCollapsed ? \"collapsed\" : \"expanded\"}\n                  type=\"button\"\n                  onClick={toggleRail}\n                >\n                  {renderSidebarRailContents(\n                    effectiveCollapseLabel,\n                    isRailCollapsed,\n                    railToggleConfig,\n                  )}\n                </button>\n              </div>\n            ) : null}\n            {desktopChildren}\n          </div>\n\n          {panels}\n\n          {isResponsive && isDrawerOpen ? (\n            <button\n              aria-label={`Close ${effectiveCollapseLabel}`}\n              class=\"sidebar-backdrop\"\n              data-slot=\"sidebar-backdrop\"\n              data-state=\"open\"\n              tabIndex={-1}\n              type=\"button\"\n              onClick={closeDrawer}\n            />\n          ) : null}\n\n          {isResponsive ? (\n            <ShellResponsiveWatcher\n              breakpoint={breakpoint}\n              isCollapsed={isSidebarCollapsed}\n              onResize={(nextCollapsed) => {\n                responsiveCollapsedState.set(nextCollapsed);\n              }}\n              onExpand={() => {\n                drawerOpenState.set(false);\n              }}\n            />\n          ) : null}\n\n          <ShellPanelWatcher\n            contentId={panelId}\n            open={isDrawerOpen}\n            panelSlot=\"sidebar-panel\"\n            onClose={() => {\n              closeDrawer();\n            }}\n          />\n        </nav>\n      </SidebarResponsiveContext.Scope>\n    </SidebarContext.Scope>\n  );\n}\n"],"mappings":"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"}

package/dist/components/sidebar/sidebar.shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.shared.js","names":[],"sources":["../../../src/components/sidebar/sidebar.shared.ts"],"sourcesContent":["import { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed } from \"../navbar/navbar.shared\";\nimport type { CollapseBreakpoint, Collapsible } from \"../shell/shell-nav.types\";\n\nexport { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed };\n\nexport function resolveSidebarCollapsible(collapsible: Collapsible | undefined): Collapsible {\n  return collapsible ?? \"none\";\n}\n\nexport function isSidebarCollapsed(breakpoint: CollapseBreakpoint): boolean {\n  return isNavbarCollapsed(breakpoint);\n}\n"],"mappings":";;AAKA,SAAgB,0BAA0B,aAAmD;CAC3F,OAAO,eAAe;;AAGxB,SAAgB,mBAAmB,YAAyC;CAC1E,OAAO,kBAAkB,WAAW"}
+{"version":3,"file":"sidebar.shared.js","names":[],"sources":["../../../src/components/sidebar/sidebar.shared.ts"],"sourcesContent":["import { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed } from \"../navbar/navbar.shared\";\nimport type { CollapseBreakpoint, Collapsible } from \"../shell/shell-nav.types\";\n\nexport { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed };\n\nexport function resolveSidebarCollapsible(collapsible: Collapsible | undefined): Collapsible {\n  return collapsible ?? \"none\";\n}\n\nexport function isSidebarCollapsed(breakpoint: CollapseBreakpoint): boolean {\n  return isNavbarCollapsed(breakpoint);\n}\n"],"mappings":";;AAKA,SAAgB,0BAA0B,aAAmD;CAC3F,OAAO,eAAe;AACxB;AAEA,SAAgB,mBAAmB,YAAyC;CAC1E,OAAO,kBAAkB,UAAU;AACrC"}

package/dist/components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { SkeletonAsChildProps, SkeletonProps } from \"./skeleton.types\";\n\nexport function Skeleton(props: SkeletonProps): JSX.Element;\nexport function Skeleton(props: SkeletonAsChildProps): JSX.Element;\nexport function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {\n  const { asChild, children, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"skeleton\",\n    \"data-skeleton\": \"true\",\n    \"aria-hidden\": \"true\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;AAMA,SAAgB,SAAS,OAA6C;CACpE,MAAM,EAAE,SAAS,UAAU,KAAK,GAAG,SAAS;CAC5C,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,iBAAiB;EACjB,eAAe;EAChB,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { SkeletonAsChildProps, SkeletonProps } from \"./skeleton.types\";\n\nexport function Skeleton(props: SkeletonProps): JSX.Element;\nexport function Skeleton(props: SkeletonAsChildProps): JSX.Element;\nexport function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {\n  const { asChild, children, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"skeleton\",\n    \"data-skeleton\": \"true\",\n    \"aria-hidden\": \"true\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;AAMA,SAAgB,SAAS,OAA6C;CACpE,MAAM,EAAE,SAAS,UAAU,KAAK,GAAG,SAAS;CAC5C,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,iBAAiB;EACjB,eAAe;CACjB,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;CAAc,CAAA;AAC7C"}

package/dist/components/spacer/spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacer.js","names":[],"sources":["../../../src/components/spacer/spacer.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { isCssLength, mergeLayoutStyles } from \"../_internal/layout\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport type { SpacerAsChildProps, SpacerNativeProps } from \"./spacer.types\";\n\nexport function Spacer(props: SpacerNativeProps): JSX.Element;\nexport function Spacer(props: SpacerAsChildProps): JSX.Element;\nexport function Spacer(props: SpacerNativeProps | SpacerAsChildProps) {\n  const { asChild, children, grow, shrink, basis, axis, ref, style: userStyle, ...rest } = props;\n\n  const layoutStyle: Record<string, string | number> = {};\n\n  if (axis === \"inline\") {\n    if (shrink !== undefined && shrink !== 0) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) layoutStyle.width = basis!;\n  } else if (axis === \"block\") {\n    if (shrink !== undefined && shrink !== 0) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) layoutStyle.height = basis!;\n  } else {\n    if (grow !== undefined && grow !== 1) {\n      layoutStyle.flexGrow = grow;\n    }\n    if (shrink !== undefined && shrink !== 1) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) {\n      layoutStyle.flexBasis = basis!;\n    }\n  }\n\n  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"spacer\",\n    \"data-axis\": axis,\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n  const keyedChildren = toChildArray(children).map((child, index) => {\n    if (!isJsxElement(child) || child.key != null) {\n      return child;\n    }\n\n    return {\n      ...child,\n      key: `spacer-${index}`,\n    };\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{keyedChildren}</div>;\n}\n"],"mappings":";;;;;;;AASA,SAAgB,OAAO,OAA+C;CACpE,MAAM,EAAE,SAAS,UAAU,MAAM,QAAQ,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS;CAEzF,MAAM,cAA+C,EAAE;CAEvD,IAAI,SAAS,UAAU;EACrB,IAAI,WAAW,KAAA,KAAa,WAAW,GACrC,YAAY,aAAa;EAE3B,IAAI,YAAY,MAAM,EAAE,YAAY,QAAQ;QACvC,IAAI,SAAS,SAAS;EAC3B,IAAI,WAAW,KAAA,KAAa,WAAW,GACrC,YAAY,aAAa;EAE3B,IAAI,YAAY,MAAM,EAAE,YAAY,SAAS;QACxC;EACL,IAAI,SAAS,KAAA,KAAa,SAAS,GACjC,YAAY,WAAW;EAEzB,IAAI,WAAW,KAAA,KAAa,WAAW,GACrC,YAAY,aAAa;EAE3B,IAAI,YAAY,MAAM,EACpB,YAAY,YAAY;;CAI5B,MAAM,cAAc,yBAAyB,kBAAkB,aAAa,UAAU,CAAC;CAEvF,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,aAAa;EACb,GAAI,cAAc,EAAE,OAAO,aAAa,GAAG,EAAE;EAC9C,CAAC;CACF,MAAM,gBAAgB,aAAa,SAAS,CAAC,KAAK,OAAO,UAAU;EACjE,IAAI,CAAC,aAAa,MAAM,IAAI,MAAM,OAAO,MACvC,OAAO;EAGT,OAAO;GACL,GAAG;GACH,KAAK,UAAU;GAChB;GACD;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,OAAD;EAAK,GAAI;YAAa;EAAoB,CAAA"}
+{"version":3,"file":"spacer.js","names":[],"sources":["../../../src/components/spacer/spacer.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { isCssLength, mergeLayoutStyles } from \"../_internal/layout\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport type { SpacerAsChildProps, SpacerNativeProps } from \"./spacer.types\";\n\nexport function Spacer(props: SpacerNativeProps): JSX.Element;\nexport function Spacer(props: SpacerAsChildProps): JSX.Element;\nexport function Spacer(props: SpacerNativeProps | SpacerAsChildProps) {\n  const { asChild, children, grow, shrink, basis, axis, ref, style: userStyle, ...rest } = props;\n\n  const layoutStyle: Record<string, string | number> = {};\n\n  if (axis === \"inline\") {\n    if (shrink !== undefined && shrink !== 0) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) layoutStyle.width = basis!;\n  } else if (axis === \"block\") {\n    if (shrink !== undefined && shrink !== 0) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) layoutStyle.height = basis!;\n  } else {\n    if (grow !== undefined && grow !== 1) {\n      layoutStyle.flexGrow = grow;\n    }\n    if (shrink !== undefined && shrink !== 1) {\n      layoutStyle.flexShrink = shrink;\n    }\n    if (isCssLength(basis)) {\n      layoutStyle.flexBasis = basis!;\n    }\n  }\n\n  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"spacer\",\n    \"data-axis\": axis,\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n  const keyedChildren = toChildArray(children).map((child, index) => {\n    if (!isJsxElement(child) || child.key != null) {\n      return child;\n    }\n\n    return {\n      ...child,\n      key: `spacer-${index}`,\n    };\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{keyedChildren}</div>;\n}\n"],"mappings":";;;;;;;AASA,SAAgB,OAAO,OAA+C;CACpE,MAAM,EAAE,SAAS,UAAU,MAAM,QAAQ,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS;CAEzF,MAAM,cAA+C,CAAC;CAEtD,IAAI,SAAS,UAAU;EACrB,IAAI,WAAW,KAAA,KAAa,WAAW,GACrC,YAAY,aAAa;EAE3B,IAAI,YAAY,KAAK,GAAG,YAAY,QAAQ;CAC9C,OAAO,IAAI,SAAS,SAAS;EAC3B,IAAI,WAAW,KAAA,KAAa,WAAW,GACrC,YAAY,aAAa;EAE3B,IAAI,YAAY,KAAK,GAAG,YAAY,SAAS;CAC/C,OAAO;EACL,IAAI,SAAS,KAAA,KAAa,SAAS,GACjC,YAAY,WAAW;EAEzB,IAAI,WAAW,KAAA,KAAa,WAAW,GACrC,YAAY,aAAa;EAE3B,IAAI,YAAY,KAAK,GACnB,YAAY,YAAY;CAE5B;CAEA,MAAM,cAAc,yBAAyB,kBAAkB,aAAa,SAAS,CAAC;CAEtF,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,aAAa;EACb,GAAI,cAAc,EAAE,OAAO,YAAY,IAAI,CAAC;CAC9C,CAAC;CACD,MAAM,gBAAgB,aAAa,QAAQ,CAAC,CAAC,KAAK,OAAO,UAAU;EACjE,IAAI,CAAC,aAAa,KAAK,KAAK,MAAM,OAAO,MACvC,OAAO;EAGT,OAAO;GACL,GAAG;GACH,KAAK,UAAU;EACjB;CACF,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,oBAAC,OAAD;EAAK,GAAI;YAAa;CAAmB,CAAA;AAClD"}

package/dist/components/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { ProgressCircle } from \"@askrjs/ui\";\nimport type { SpinnerProps } from \"./spinner.types\";\n\nexport function Spinner(props: SpinnerProps): JSX.Element {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props as SpinnerProps & {\n    \"aria-label\"?: string;\n  };\n\n  return (\n    <ProgressCircle\n      {...rest}\n      aria-label={ariaLabel ?? label ?? \"Loading\"}\n      value={null}\n      getValueLabel={() => label ?? \"Loading\"}\n    />\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EACJ,OACA,cAAc,WACd,GAAG,SACD;CAIJ,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,cAAY,aAAa,SAAS;EAClC,OAAO;EACP,qBAAqB,SAAS;EAC9B,CAAA"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { ProgressCircle } from \"@askrjs/ui\";\nimport type { SpinnerProps } from \"./spinner.types\";\n\nexport function Spinner(props: SpinnerProps): JSX.Element {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props as SpinnerProps & {\n    \"aria-label\"?: string;\n  };\n\n  return (\n    <ProgressCircle\n      {...rest}\n      aria-label={ariaLabel ?? label ?? \"Loading\"}\n      value={null}\n      getValueLabel={() => label ?? \"Loading\"}\n    />\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EACJ,OACA,cAAc,WACd,GAAG,SACD;CAIJ,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,cAAY,aAAa,SAAS;EAClC,OAAO;EACP,qBAAqB,SAAS;CAC/B,CAAA;AAEL"}

package/dist/components/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../src/components/stack/stack.tsx"],"sourcesContent":["import { Flex } from \"../flex\";\nimport type { StackAsChildProps, StackDivProps } from \"./stack.types\";\n\nexport function Stack(props: StackDivProps): JSX.Element;\nexport function Stack(props: StackAsChildProps): JSX.Element;\nexport function Stack(props: StackDivProps | StackAsChildProps) {\n  const { children, ...rest } = props;\n  return (\n    <Flex {...(rest as Record<string, unknown>)} data-slot=\"stack\" direction=\"column\">\n      {children}\n    </Flex>\n  );\n}\n"],"mappings":";;;AAKA,SAAgB,MAAM,OAA0C;CAC9D,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,OACE,oBAAC,MAAD;EAAM,GAAK;EAAkC,aAAU;EAAQ,WAAU;EACtE;EACI,CAAA"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../src/components/stack/stack.tsx"],"sourcesContent":["import { Flex } from \"../flex\";\nimport type { StackAsChildProps, StackDivProps } from \"./stack.types\";\n\nexport function Stack(props: StackDivProps): JSX.Element;\nexport function Stack(props: StackAsChildProps): JSX.Element;\nexport function Stack(props: StackDivProps | StackAsChildProps) {\n  const { children, ...rest } = props;\n  return (\n    <Flex {...(rest as Record<string, unknown>)} data-slot=\"stack\" direction=\"column\">\n      {children}\n    </Flex>\n  );\n}\n"],"mappings":";;;AAKA,SAAgB,MAAM,OAA0C;CAC9D,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,OACE,oBAAC,MAAD;EAAM,GAAK;EAAkC,aAAU;EAAQ,WAAU;EACtE;CACG,CAAA;AAEV"}

package/dist/components/theme/theme.js

@@ -59,6 +59,7 @@ function useTheme() {
 function ThemeProvider(props) {
 	const { children, defaultTheme = "system", themes = DEFAULT_THEME_OPTIONS, storageKey = DEFAULT_STORAGE_KEY } = props;
 	const themeState = state(readStoredTheme(storageKey) ?? defaultTheme);
+	const currentTheme = themeState();
 	const setTheme = (nextTheme) => {
 		themeState.set(nextTheme);
 		writeStoredTheme(storageKey, nextTheme);
@@ -70,7 +71,6 @@ function ThemeProvider(props) {
 		themes,
 		storageKey
 	};
-	const currentTheme = themeState();
 	return /* @__PURE__ */ jsxs(ThemeContext.Scope, {
 		value,
 		children: [/* @__PURE__ */ jsx(ThemeRootSync, { theme: currentTheme }), /* @__PURE__ */ jsx("div", {
@@ -124,12 +124,12 @@ function ThemeToggle(props) {
 		nextTheme
 	};
 	const ariaLabel = rest["aria-label"];
-	const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {
+	const renderedIcon = cloneThemeToggleIcon(resolveThemeToggleIcon(currentTheme, nextTheme, {
 		lightIcon,
 		darkIcon,
 		systemIcon
-	});
-	const content = typeof children === "function" ? children(renderContext) : children ?? themedIcon;
+	}));
+	const content = typeof children === "function" ? children(renderContext) : children ?? renderedIcon;
 	return /* @__PURE__ */ jsx(Button, {
 		...rest,
 		"aria-label": typeof ariaLabel === "string" ? ariaLabel : `Switch to ${nextTheme} theme`,
@@ -140,7 +140,10 @@ function ThemeToggle(props) {
 			onPress?.(event);
 			if (!event.defaultPrevented) theme.setTheme(nextTheme);
 		},
-		children: content
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "theme-toggle-content",
+			children: content
+		})
 	});
 }
 function getNextTheme(currentTheme, themes) {
@@ -156,6 +159,18 @@ function getThemeIcon(theme, icons) {
 function resolveThemeToggleIcon(theme, nextTheme, icons) {
 	return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);
 }
+function isJSXElement(value) {
+	return typeof value === "object" && value !== null && "$$typeof" in value && "type" in value && "props" in value;
+}
+function cloneThemeToggleIcon(icon) {
+	if (!isJSXElement(icon)) return icon;
+	const props = icon.props;
+	if (!props || Object.keys(props).length === 0) return icon;
+	return {
+		...icon,
+		props: { ...props }
+	};
+}
 function syncThemeRoot(themeChoice) {
 	if (typeof document === "undefined") return;
 	const html = document.documentElement;

package/dist/components/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, readContext, state } from \"@askrjs/askr\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\nexport type ThemeContextValue = {\n  theme: () => ThemeName;\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\nexport type ThemeProviderProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\n\nconst ThemeContext = defineContext<ThemeContextValue>({\n  theme: () => \"system\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n});\n\nexport function useTheme(): ThemeContextValue {\n  return readContext(ThemeContext);\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    syncThemeRoot(nextTheme);\n  };\n\n  const value: ThemeContextValue = {\n    theme: themeState,\n    setTheme,\n    themes,\n    storageKey,\n  };\n\n  const currentTheme = themeState();\n\n  return (\n    <ThemeContext.Scope value={value}>\n      <ThemeRootSync theme={currentTheme} />\n      <div data-slot=\"theme-provider\">{children}</div>\n    </ThemeContext.Scope>\n  );\n}\n\nfunction ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {\n  const { theme } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (typeof window === \"undefined\") {\n        syncThemeRoot(theme);\n        return null;\n      }\n\n      const timeoutId = window.setTimeout(() => {\n        if (!signal.aborted) {\n          syncThemeRoot(theme);\n        }\n      }, 0);\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.clearTimeout(timeoutId);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [theme],\n  );\n\n  return null;\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const theme = useTheme();\n  const { themes = theme.themes, label = \"Theme\", ...rest } = props;\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={theme.theme()}\n      onChange={(event: Event) => {\n        const target = event.currentTarget as HTMLSelectElement;\n        theme.setTheme(target.value as ThemeName);\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const theme = useTheme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes);\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? themedIcon);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented) theme.setTheme(nextTheme);\n      }}\n    >\n      {content}\n    </Button>\n  );\n}\n\nfunction getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction syncThemeRoot(themeChoice: ThemeName | null | undefined): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const html = document.documentElement;\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, readContext, state } from \"@askrjs/askr\";\nimport type { JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\nexport type ThemeContextValue = {\n  theme: () => ThemeName;\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\nexport type ThemeProviderProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\n\nconst ThemeContext = defineContext<ThemeContextValue>({\n  theme: () => \"system\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n});\n\nexport function useTheme(): ThemeContextValue {\n  return readContext(ThemeContext);\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);\n  const currentTheme = themeState();\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    syncThemeRoot(nextTheme);\n  };\n\n  const value: ThemeContextValue = {\n    theme: themeState,\n    setTheme,\n    themes,\n    storageKey,\n  };\n\n  return (\n    <ThemeContext.Scope value={value}>\n      <ThemeRootSync theme={currentTheme} />\n      <div data-slot=\"theme-provider\">{children}</div>\n    </ThemeContext.Scope>\n  );\n}\n\nfunction ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {\n  const { theme } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (typeof window === \"undefined\") {\n        syncThemeRoot(theme);\n        return null;\n      }\n\n      const timeoutId = window.setTimeout(() => {\n        if (!signal.aborted) {\n          syncThemeRoot(theme);\n        }\n      }, 0);\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.clearTimeout(timeoutId);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [theme],\n  );\n\n  return null;\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const theme = useTheme();\n  const { themes = theme.themes, label = \"Theme\", ...rest } = props;\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={theme.theme()}\n      onChange={(event: Event) => {\n        const target = event.currentTarget as HTMLSelectElement;\n        theme.setTheme(target.value as ThemeName);\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const theme = useTheme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes);\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const renderedIcon = cloneThemeToggleIcon(themedIcon);\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? renderedIcon);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented) theme.setTheme(nextTheme);\n      }}\n    >\n      <span data-slot=\"theme-toggle-content\">{content}</span>\n    </Button>\n  );\n}\n\nfunction getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction isJSXElement(value: unknown): value is JSXElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    \"type\" in value &&\n    \"props\" in value\n  );\n}\n\nfunction cloneThemeToggleIcon(icon: unknown): unknown {\n  if (!isJSXElement(icon)) return icon;\n\n  const props = icon.props as Record<string, unknown> | undefined;\n  if (!props || Object.keys(props).length === 0) {\n    return icon;\n  }\n\n  return {\n    ...icon,\n    props: { ...props },\n  };\n}\n\nfunction syncThemeRoot(themeChoice: ThemeName | null | undefined): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const html = document.documentElement;\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}

package/dist/controls.d.ts

@@ -7,4 +7,4 @@ import { Field, FieldError, FieldHint } from "./components/field/field.js";
 import { InputGroupOrientation, InputGroupProps, InputGroupTextAsChildProps, InputGroupTextProps } from "./components/input-group/input-group.types.js";
 import { InputGroup, InputGroupText } from "./components/input-group/input-group.js";
 import { Button, ButtonAsChildProps, ButtonNativeProps, ButtonOwnProps, ButtonProps } from "@askrjs/ui";
-export { Button, type ButtonAsChildProps, ButtonGroup, ButtonGroupOrientation, ButtonGroupProps, type ButtonNativeProps, type ButtonOwnProps, type ButtonProps, Close, CloseNativeProps, CloseOwnProps, Field, FieldError, FieldErrorProps, FieldHint, FieldHintProps, FieldProps, InputGroup, InputGroupOrientation, InputGroupProps, InputGroupText, InputGroupTextAsChildProps, InputGroupTextProps };
+export { Button, type ButtonAsChildProps, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonNativeProps, type ButtonOwnProps, type ButtonProps, Close, type CloseNativeProps, type CloseOwnProps, Field, FieldError, type FieldErrorProps, FieldHint, type FieldHintProps, type FieldProps, InputGroup, type InputGroupOrientation, type InputGroupProps, InputGroupText, type InputGroupTextAsChildProps, type InputGroupTextProps };

package/dist/feedback.d.ts

@@ -2,4 +2,4 @@ import { EmptyStateHeadingTag, EmptyStateProps } from "./components/empty-state/
 import { EmptyState } from "./components/empty-state/empty-state.js";
 import { SpinnerOwnProps, SpinnerProps } from "./components/spinner/spinner.types.js";
 import { Spinner } from "./components/spinner/spinner.js";
-export { EmptyState, EmptyStateHeadingTag, EmptyStateProps, Spinner, SpinnerOwnProps, SpinnerProps };
+export { EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, Spinner, type SpinnerOwnProps, type SpinnerProps };

package/dist/layouts.d.ts

@@ -22,4 +22,4 @@ import { SPACER_A11Y_CONTRACT, SpacerA11yContract } from "./components/spacer/sp
 import { StackAsChildProps, StackDivProps, StackOwnProps, StackProps } from "./components/stack/stack.types.js";
 import { Stack } from "./components/stack/stack.js";
 import { STACK_A11Y_CONTRACT, StackA11yContract } from "./components/stack/stack.a11y.js";
-export { AspectRatio, AspectRatioAsChildProps, AspectRatioProps, BLOCK_A11Y_CONTRACT, BOX_A11Y_CONTRACT, Block, BlockA11yContract, BlockAsChildProps, BlockDivProps, BlockNativeProps, BlockOwnProps, BlockProps, BlockSize, BlockSpanProps, Box, BoxA11yContract, BoxAsChildProps, BoxDivProps, BoxLayoutOwnProps, BoxOwnProps, BoxProps, BoxSpanProps, CONTAINER_A11Y_CONTRACT, Container, ContainerA11yContract, ContainerAsChildProps, ContainerNativeProps, ContainerOwnProps, ContainerProps, ContainerVariant, FLEX_A11Y_CONTRACT, Flex, FlexA11yContract, FlexAsChildProps, FlexDivProps, FlexNativeProps, FlexOwnProps, FlexProps, FlexSpanProps, FLEX_A11Y_CONTRACT as INLINE_A11Y_CONTRACT, Inline, FlexA11yContract as InlineA11yContract, FlexAsChildProps as InlineAsChildProps, FlexDivProps as InlineDivProps, FlexNativeProps as InlineNativeProps, FlexOwnProps as InlineOwnProps, FlexProps as InlineProps, FlexSpanProps as InlineSpanProps, LayoutResponsive, SECTION_A11Y_CONTRACT, SPACER_A11Y_CONTRACT, STACK_A11Y_CONTRACT, Section, SectionA11yContract, SectionAsChildProps, SectionElementProps, SectionOwnProps, SectionProps, Spacer, SpacerA11yContract, SpacerAsChildProps, SpacerAxis, SpacerNativeProps, SpacerOwnProps, SpacerProps, Stack, StackA11yContract, StackAsChildProps, StackDivProps, StackOwnProps, StackProps };
+export { AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, type BLOCK_A11Y_CONTRACT, type BOX_A11Y_CONTRACT, Block, type BlockA11yContract, type BlockAsChildProps, type BlockDivProps, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockSize, type BlockSpanProps, Box, type BoxA11yContract, type BoxAsChildProps, type BoxDivProps, type BoxLayoutOwnProps, type BoxOwnProps, type BoxProps, type BoxSpanProps, type CONTAINER_A11Y_CONTRACT, Container, type ContainerA11yContract, type ContainerAsChildProps, type ContainerNativeProps, type ContainerOwnProps, type ContainerProps, type ContainerVariant, type FLEX_A11Y_CONTRACT, Flex, type FlexA11yContract, type FlexAsChildProps, type FlexDivProps, type FlexNativeProps, type FlexOwnProps, type FlexProps, type FlexSpanProps, type FLEX_A11Y_CONTRACT as INLINE_A11Y_CONTRACT, Inline, type FlexA11yContract as InlineA11yContract, type FlexAsChildProps as InlineAsChildProps, type FlexDivProps as InlineDivProps, type FlexNativeProps as InlineNativeProps, type FlexOwnProps as InlineOwnProps, type FlexProps as InlineProps, type FlexSpanProps as InlineSpanProps, type LayoutResponsive, type SECTION_A11Y_CONTRACT, type SPACER_A11Y_CONTRACT, type STACK_A11Y_CONTRACT, Section, type SectionA11yContract, type SectionAsChildProps, type SectionElementProps, type SectionOwnProps, type SectionProps, Spacer, type SpacerA11yContract, type SpacerAsChildProps, type SpacerAxis, type SpacerNativeProps, type SpacerOwnProps, type SpacerProps, Stack, type StackA11yContract, type StackAsChildProps, type StackDivProps, type StackOwnProps, type StackProps };

package/dist/navs.d.ts

@@ -12,4 +12,4 @@ import { SidebarPanel } from "./components/sidebar/sidebar-panel.js";
 import { SidebarToggle } from "./components/sidebar/sidebar-toggle.js";
 import { PaginationEllipsisProps, PaginationItemAsChildProps, PaginationItemProps, PaginationLinkProps, PaginationProps } from "./components/pagination/pagination.types.js";
 import { Pagination, PaginationEllipsis, PaginationItem, PaginationLink } from "./components/pagination/pagination.js";
-export { BREADCRUMB_A11Y_CONTRACT, Breadcrumb, BreadcrumbA11yContract, BreadcrumbAsChildProps, BreadcrumbCurrent, BreadcrumbCurrentAsChildProps, BreadcrumbCurrentProps, BreadcrumbItem, BreadcrumbItemAsChildProps, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkAsChildProps, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListAsChildProps, BreadcrumbListProps, BreadcrumbOwnProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorAsChildProps, BreadcrumbSeparatorProps, CollapseBreakpoint, CollapseIconPlacement, Collapsible, Nav, NavAsChildProps, NavBrand, NavBrandProps, NavDivProps, NavGroup, NavGroupProps, NavItem, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLink, NavLinkProps, NavListProps, NavNavProps, NavOrientation, NavProps, NavToggle, NavToggleProps, NavVariant, Navbar, NavbarProps, Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemAsChildProps, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationProps, Sidebar, SidebarPanel, SidebarPanelProps, SidebarProps, SidebarToggle, SidebarToggleProps };
+export { BREADCRUMB_A11Y_CONTRACT, Breadcrumb, type BreadcrumbA11yContract, type BreadcrumbAsChildProps, BreadcrumbCurrent, type BreadcrumbCurrentAsChildProps, type BreadcrumbCurrentProps, BreadcrumbItem, type BreadcrumbItemAsChildProps, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkAsChildProps, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListAsChildProps, type BreadcrumbListProps, type BreadcrumbOwnProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorAsChildProps, type BreadcrumbSeparatorProps, type CollapseBreakpoint, type CollapseIconPlacement, type Collapsible, Nav, type NavAsChildProps, NavBrand, type NavBrandProps, type NavDivProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, type NavItemVariant, NavLink, type NavLinkProps, type NavListProps, type NavNavProps, type NavOrientation, type NavProps, NavToggle, type NavToggleProps, type NavVariant, Navbar, type NavbarProps, Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemAsChildProps, type PaginationItemProps, PaginationLink, type PaginationLinkProps, type PaginationProps, Sidebar, SidebarPanel, type SidebarPanelProps, type SidebarProps, type SidebarToggle, type SidebarToggleProps };

package/dist/shells.d.ts

@@ -13,4 +13,4 @@ import { HEADER_A11Y_CONTRACT, HeaderA11yContract } from "./components/header/he
 import { ShellAsChildProps, ShellDivProps, ShellMainAsChildProps, ShellMainDivProps, ShellMainMainProps, ShellMainProps, ShellNavAsChildProps, ShellNavDivProps, ShellNavProps, ShellOwnProps, ShellProps, ShellVariant } from "./components/shell/shell.types.js";
 import { Shell, ShellMain, ShellNav } from "./components/shell/shell.js";
 import { SHELL_A11Y_CONTRACT, ShellA11yContract } from "./components/shell/shell.a11y.js";
-export { CollapseBreakpoint, CollapseIconPlacement, Collapsible, HEADER_A11Y_CONTRACT, Header, HeaderA11yContract, HeaderPosition, HeaderProps, NavBrand, NavBrandProps, NavGroup, NavGroupProps, NavItem, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLink, NavLinkProps, NavToggle, NavToggleProps, Navbar, NavbarProps, SHELL_A11Y_CONTRACT, Shell, ShellA11yContract, ShellAsChildProps, ShellDivProps, ShellMain, ShellMainAsChildProps, ShellMainDivProps, ShellMainMainProps, ShellMainProps, ShellNav, ShellNavAsChildProps, ShellNavDivProps, ShellNavProps, ShellOwnProps, ShellProps, ShellVariant, Sidebar, SidebarPanel, SidebarPanelProps, SidebarProps, SidebarToggle, SidebarToggleProps };
+export { type CollapseBreakpoint, type CollapseIconPlacement, type Collapsible, HEADER_A11Y_CONTRACT, Header, type HeaderA11yContract, type HeaderPosition, type HeaderProps, NavBrand, type NavBrandProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, type NavItemVariant, NavLink, type NavLinkProps, NavToggle, type NavToggleProps, Navbar, type NavbarProps, SHELL_A11Y_CONTRACT, Shell, type ShellA11yContract, type ShellAsChildProps, type ShellDivProps, ShellMain, type ShellMainAsChildProps, type ShellMainDivProps, type ShellMainMainProps, type ShellMainProps, ShellNav, type ShellNavAsChildProps, type ShellNavDivProps, type ShellNavProps, type ShellOwnProps, type ShellProps, type ShellVariant, Sidebar, SidebarPanel, type SidebarPanelProps, type SidebarProps, SidebarToggle, type SidebarToggleProps };

package/dist/surfaces.d.ts

@@ -13,4 +13,4 @@ import { SEPARATOR_A11Y_CONTRACT, SeparatorA11yContract } from "./components/sep
 import { SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps } from "./components/skeleton/skeleton.types.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { SKELETON_A11Y_CONTRACT, SkeletonA11yContract } from "./components/skeleton/skeleton.a11y.js";
-export { Alert, AlertHeadingTag, AlertProps, AlertVariant, BADGE_A11Y_CONTRACT, Badge, BadgeA11yContract, BadgeAsChildProps, BadgeOwnProps, BadgeProps, Card, CardActions, CardActionsProps, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardPadding, CardProps, CardTitle, CardTitleProps, CardVariant, Separator as Divider, SeparatorAsChildProps as DividerAsChildProps, SeparatorNativeProps as DividerNativeProps, SeparatorOwnProps as DividerOwnProps, SeparatorProps as DividerProps, ListGroup, ListGroupItem, ListGroupItemAsChildProps, ListGroupItemProps, ListGroupOrientation, ListGroupProps, SEPARATOR_A11Y_CONTRACT, SKELETON_A11Y_CONTRACT, Separator, SeparatorA11yContract, SeparatorAsChildProps, SeparatorNativeProps, SeparatorOwnProps, SeparatorProps, Skeleton, SkeletonA11yContract, SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps };
+export { Alert, type AlertHeadingTag, type AlertProps, type AlertVariant, type BADGE_A11Y_CONTRACT, Badge, type BadgeA11yContract, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, CardTitle, type CardTitleProps, type CardVariant, Separator as Divider, type SeparatorAsChildProps as DividerAsChildProps, type SeparatorNativeProps as DividerNativeProps, type SeparatorOwnProps as DividerOwnProps, type SeparatorProps as DividerProps, ListGroup, ListGroupItem, type ListGroupItemAsChildProps, type ListGroupItemProps, type ListGroupOrientation, type ListGroupProps, SEPARATOR_A11Y_CONTRACT, type SKELETON_A11Y_CONTRACT, Separator, type SeparatorA11yContract, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Skeleton, type SkeletonA11yContract, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps };

package/dist/themes/default/index.css

@@ -595,142 +595,6 @@
   speak: none;
 }
 
-:where(.text-muted) {
-  color: var(--ak-color-text-muted);
-}
-
-:where(.text-bold) {
-  font-weight: var(--ak-font-weight-bold);
-}
-
-:where(.sr-only) {
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-:where(.gap-1, [data-slot="flex"][data-gap="initial:1"], [data-slot="block"][data-gap="initial:1"], [data-slot="shell"][data-gap="initial:1"]) {
-  gap: var(--ak-space-1);
-}
-
-:where(.gap-2, [data-slot="flex"][data-gap="initial:2"], [data-slot="block"][data-gap="initial:2"], [data-slot="shell"][data-gap="initial:2"]) {
-  gap: var(--ak-space-2);
-}
-
-:where(.gap-3, [data-slot="flex"][data-gap="initial:3"], [data-slot="block"][data-gap="initial:3"], [data-slot="shell"][data-gap="initial:3"]) {
-  gap: var(--ak-space-3);
-}
-
-:where(.gap-4, [data-slot="flex"][data-gap="initial:4"], [data-slot="block"][data-gap="initial:4"], [data-slot="shell"][data-gap="initial:4"]) {
-  gap: var(--ak-space-4);
-}
-
-:where(.gap-xs, [data-slot="flex"][data-gap="initial:xs"], [data-slot="block"][data-gap="initial:xs"], [data-slot="shell"][data-gap="initial:xs"]) {
-  gap: var(--ak-space-xs);
-}
-
-:where(.gap-sm, [data-slot="flex"][data-gap="initial:sm"], [data-slot="block"][data-gap="initial:sm"], [data-slot="shell"][data-gap="initial:sm"]) {
-  gap: var(--ak-space-sm);
-}
-
-:where(.gap-md, [data-slot="flex"][data-gap="initial:md"], [data-slot="block"][data-gap="initial:md"], [data-slot="shell"][data-gap="initial:md"]) {
-  gap: var(--ak-space-md);
-}
-
-:where(.gap-lg, [data-slot="flex"][data-gap="initial:lg"], [data-slot="block"][data-gap="initial:lg"], [data-slot="shell"][data-gap="initial:lg"]) {
-  gap: var(--ak-space-lg);
-}
-
-:where(.gap-xl, [data-slot="flex"][data-gap="initial:xl"], [data-slot="block"][data-gap="initial:xl"], [data-slot="shell"][data-gap="initial:xl"]) {
-  gap: var(--ak-space-xl);
-}
-
-:where(.gap-x-sm, [data-slot="flex"][data-gap-x="initial:sm"], [data-slot="block"][data-gap-x="initial:sm"]) {
-  column-gap: var(--ak-space-sm);
-}
-
-:where(.gap-x-md, [data-slot="flex"][data-gap-x="initial:md"], [data-slot="block"][data-gap-x="initial:md"]) {
-  column-gap: var(--ak-space-md);
-}
-
-:where(.gap-x-lg, [data-slot="flex"][data-gap-x="initial:lg"], [data-slot="block"][data-gap-x="initial:lg"]) {
-  column-gap: var(--ak-space-lg);
-}
-
-:where(.gap-y-sm, [data-slot="flex"][data-gap-y="initial:sm"], [data-slot="block"][data-gap-y="initial:sm"]) {
-  row-gap: var(--ak-space-sm);
-}
-
-:where(.gap-y-md, [data-slot="flex"][data-gap-y="initial:md"], [data-slot="block"][data-gap-y="initial:md"]) {
-  row-gap: var(--ak-space-md);
-}
-
-:where(.gap-y-lg, [data-slot="flex"][data-gap-y="initial:lg"], [data-slot="block"][data-gap-y="initial:lg"]) {
-  row-gap: var(--ak-space-lg);
-}
-
-:where(.flex-col, [data-slot="flex"][data-direction="initial:column"]) {
-  flex-direction: column;
-}
-
-:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"]) {
-  flex-direction: row-reverse;
-}
-
-:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"]) {
-  flex-direction: column-reverse;
-}
-
-:where(.items-start, [data-slot="flex"][data-align="initial:start"], [data-slot="block"][data-align="initial:start"]) {
-  align-items: flex-start;
-}
-
-:where(.items-end, [data-slot="flex"][data-align="initial:end"], [data-slot="block"][data-align="initial:end"]) {
-  align-items: flex-end;
-}
-
-:where(.items-center, [data-slot="flex"][data-align="initial:center"], [data-slot="block"][data-align="initial:center"]) {
-  align-items: center;
-}
-
-:where(.items-stretch, [data-slot="flex"][data-align="initial:stretch"], [data-slot="block"][data-align="initial:stretch"]) {
-  align-items: stretch;
-}
-
-:where(.items-baseline, [data-slot="flex"][data-align="initial:baseline"], [data-slot="block"][data-align="initial:baseline"]) {
-  align-items: baseline;
-}
-
-:where(.justify-start, [data-slot="flex"][data-justify="initial:start"], [data-slot="block"][data-justify="initial:start"]) {
-  justify-content: flex-start;
-}
-
-:where(.justify-end, [data-slot="flex"][data-justify="initial:end"], [data-slot="block"][data-justify="initial:end"]) {
-  justify-content: flex-end;
-}
-
-:where(.justify-center, [data-slot="flex"][data-justify="initial:center"], [data-slot="block"][data-justify="initial:center"]) {
-  justify-content: center;
-}
-
-:where(.justify-between, [data-slot="flex"][data-justify="initial:between"], [data-slot="block"][data-justify="initial:between"]) {
-  justify-content: space-between;
-}
-
-:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"]) {
-  flex-wrap: nowrap;
-}
-
-:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"]) {
-  flex-wrap: wrap-reverse;
-}
-
 :where([data-ak-layout="true"]) {
   display: var(--ak-display-initial);
   margin: var(--ak-m-initial);
@@ -1321,6 +1185,142 @@
   }
 }
 
+:where(.text-muted) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.text-bold) {
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where(.sr-only) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:where(.gap-1, [data-slot="flex"][data-gap="initial:1"], [data-slot="block"][data-gap="initial:1"], [data-slot="shell"][data-gap="initial:1"]) {
+  gap: var(--ak-space-1);
+}
+
+:where(.gap-2, [data-slot="flex"][data-gap="initial:2"], [data-slot="block"][data-gap="initial:2"], [data-slot="shell"][data-gap="initial:2"]) {
+  gap: var(--ak-space-2);
+}
+
+:where(.gap-3, [data-slot="flex"][data-gap="initial:3"], [data-slot="block"][data-gap="initial:3"], [data-slot="shell"][data-gap="initial:3"]) {
+  gap: var(--ak-space-3);
+}
+
+:where(.gap-4, [data-slot="flex"][data-gap="initial:4"], [data-slot="block"][data-gap="initial:4"], [data-slot="shell"][data-gap="initial:4"]) {
+  gap: var(--ak-space-4);
+}
+
+:where(.gap-xs, [data-slot="flex"][data-gap="initial:xs"], [data-slot="block"][data-gap="initial:xs"], [data-slot="shell"][data-gap="initial:xs"]) {
+  gap: var(--ak-space-xs);
+}
+
+:where(.gap-sm, [data-slot="flex"][data-gap="initial:sm"], [data-slot="block"][data-gap="initial:sm"], [data-slot="shell"][data-gap="initial:sm"]) {
+  gap: var(--ak-space-sm);
+}
+
+:where(.gap-md, [data-slot="flex"][data-gap="initial:md"], [data-slot="block"][data-gap="initial:md"], [data-slot="shell"][data-gap="initial:md"]) {
+  gap: var(--ak-space-md);
+}
+
+:where(.gap-lg, [data-slot="flex"][data-gap="initial:lg"], [data-slot="block"][data-gap="initial:lg"], [data-slot="shell"][data-gap="initial:lg"]) {
+  gap: var(--ak-space-lg);
+}
+
+:where(.gap-xl, [data-slot="flex"][data-gap="initial:xl"], [data-slot="block"][data-gap="initial:xl"], [data-slot="shell"][data-gap="initial:xl"]) {
+  gap: var(--ak-space-xl);
+}
+
+:where(.gap-x-sm, [data-slot="flex"][data-gap-x="initial:sm"], [data-slot="block"][data-gap-x="initial:sm"]) {
+  column-gap: var(--ak-space-sm);
+}
+
+:where(.gap-x-md, [data-slot="flex"][data-gap-x="initial:md"], [data-slot="block"][data-gap-x="initial:md"]) {
+  column-gap: var(--ak-space-md);
+}
+
+:where(.gap-x-lg, [data-slot="flex"][data-gap-x="initial:lg"], [data-slot="block"][data-gap-x="initial:lg"]) {
+  column-gap: var(--ak-space-lg);
+}
+
+:where(.gap-y-sm, [data-slot="flex"][data-gap-y="initial:sm"], [data-slot="block"][data-gap-y="initial:sm"]) {
+  row-gap: var(--ak-space-sm);
+}
+
+:where(.gap-y-md, [data-slot="flex"][data-gap-y="initial:md"], [data-slot="block"][data-gap-y="initial:md"]) {
+  row-gap: var(--ak-space-md);
+}
+
+:where(.gap-y-lg, [data-slot="flex"][data-gap-y="initial:lg"], [data-slot="block"][data-gap-y="initial:lg"]) {
+  row-gap: var(--ak-space-lg);
+}
+
+:where(.flex-col, [data-slot="flex"][data-direction="initial:column"], [data-slot="inline"][data-direction="initial:column"]) {
+  flex-direction: column;
+}
+
+:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"], [data-slot="inline"][data-direction="initial:row-reverse"]) {
+  flex-direction: row-reverse;
+}
+
+:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"], [data-slot="inline"][data-direction="initial:column-reverse"]) {
+  flex-direction: column-reverse;
+}
+
+:where(.items-start, [data-slot="flex"][data-align="initial:start"], [data-slot="inline"][data-align="initial:start"], [data-slot="block"][data-align="initial:start"]) {
+  align-items: flex-start;
+}
+
+:where(.items-end, [data-slot="flex"][data-align="initial:end"], [data-slot="inline"][data-align="initial:end"], [data-slot="block"][data-align="initial:end"]) {
+  align-items: flex-end;
+}
+
+:where(.items-center, [data-slot="flex"][data-align="initial:center"], [data-slot="inline"][data-align="initial:center"], [data-slot="block"][data-align="initial:center"]) {
+  align-items: center;
+}
+
+:where(.items-stretch, [data-slot="flex"][data-align="initial:stretch"], [data-slot="inline"][data-align="initial:stretch"], [data-slot="block"][data-align="initial:stretch"]) {
+  align-items: stretch;
+}
+
+:where(.items-baseline, [data-slot="flex"][data-align="initial:baseline"], [data-slot="inline"][data-align="initial:baseline"], [data-slot="block"][data-align="initial:baseline"]) {
+  align-items: baseline;
+}
+
+:where(.justify-start, [data-slot="flex"][data-justify="initial:start"], [data-slot="inline"][data-justify="initial:start"], [data-slot="block"][data-justify="initial:start"]) {
+  justify-content: flex-start;
+}
+
+:where(.justify-end, [data-slot="flex"][data-justify="initial:end"], [data-slot="inline"][data-justify="initial:end"], [data-slot="block"][data-justify="initial:end"]) {
+  justify-content: flex-end;
+}
+
+:where(.justify-center, [data-slot="flex"][data-justify="initial:center"], [data-slot="inline"][data-justify="initial:center"], [data-slot="block"][data-justify="initial:center"]) {
+  justify-content: center;
+}
+
+:where(.justify-between, [data-slot="flex"][data-justify="initial:between"], [data-slot="inline"][data-justify="initial:between"], [data-slot="block"][data-justify="initial:between"]) {
+  justify-content: space-between;
+}
+
+:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"], [data-slot="inline"][data-wrap="initial:nowrap"]) {
+  flex-wrap: nowrap;
+}
+
+:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"], [data-slot="inline"][data-wrap="initial:wrap-reverse"]) {
+  flex-wrap: wrap-reverse;
+}
+
 :where([data-slot="block"]) {
   display: grid;
 }
@@ -2628,6 +2628,22 @@
   display: inline-flex;
 }
 
+:where([data-slot="theme-toggle-content"]) {
+  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em));
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  min-inline-size: 0;
+  display: inline-flex;
+}
+
+:where([data-slot="theme-toggle-content"]) > :where([data-slot="icon"], svg) {
+  inline-size: var(--_ak-theme-toggle-icon-size);
+  block-size: var(--_ak-theme-toggle-icon-size);
+  color: currentColor;
+  flex: none;
+}
+
 :where(.btn) > :where([data-slot="icon"], svg), :where([data-slot="button"]) > :where([data-slot="icon"], svg) {
   color: currentColor;
   flex: none;