@k2b/ui 0.28.0 → 0.29.0

package/dist/ssr/layout/PanelDialog.js

@@ -7,7 +7,7 @@ var _tmpl$ = ["<p>", "</p>"],
   _tmpl$2 = ["<div class=\"k2b-panel-dialog__actions\">", "</div>"],
   _tmpl$3 = ["<button type=\"button\" class=\"k2b-dialog__close\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
   _tmpl$4 = ["<header class=\"k2b-panel-dialog__header\"", ">", "<div class=\"k2b-panel-dialog__heading\"><h2>", "</h2>", "</div>", "", "</header>"],
-  _tmpl$5 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$5 = ["<span class=\"k2b-panel-dialog__icon k2b-icon-tile\" aria-hidden=\"true\"><i", "></i></span>"],
   _tmpl$6 = ["<div class=\"k2b-panel-dialog__body\"", ">", "</div>"],
   _tmpl$7 = ["<footer class=\"k2b-panel-dialog__footer\"", ">", "</footer>"],
   _tmpl$8 = ["<span class=\"k2b-panel-dialog__section-subtitle\">", "</span>"],
@@ -17,8 +17,9 @@ var _tmpl$ = ["<p>", "</p>"],
   _tmpl$10 = ["<p class=\"k2b-panel-dialog__section-subtitle\">", "</p>"],
   _tmpl$11 = "<i class=\"ti ti-eye-off\" aria-hidden=\"true\"></i>",
   _tmpl$12 = ["<section class=\"k2b-panel-dialog__section\"", ">", "<header", ">", "<div><h3", ">", "</h3>", "</div>", "", "</header><div id=\"", "\" class=\"k2b-panel-dialog__section-body\"", ">", "</div></section>"],
-  _tmpl$13 = ["<span class=\"k2b-panel-dialog__section-icon\"><i", " aria-hidden=\"true\"></i></span>"],
-  _tmpl$14 = ["<div class=\"k2b-panel-dialog\"", ">", "</div>"];
+  _tmpl$13 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$14 = ["<span class=\"k2b-panel-dialog__section-icon\"><i", " aria-hidden=\"true\"></i></span>"],
+  _tmpl$15 = ["<div class=\"k2b-panel-dialog\"", ">", "</div>"];
 import { createContext, createEffect, createSignal, createUniqueId, Show, useContext } from "solid-js";
 import { Button } from "../actions/Button";
 import { Tabs } from "../actions/Tabs";
@@ -136,7 +137,7 @@ const PanelDialogSection = props => {
             get when() {
               return props.icon;
             },
-            children: icon => _$ssr(_tmpl$5, _$ssrAttribute("class", _$escape(icon(), true), false))
+            children: icon => _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(icon(), true), false))
           }), _$ssr(_tmpl$9, `${_$escape(id, true)}-closed`, _$escape(props.title), _$escape(_$createComponent(Show, {
             get when() {
               return props.subtitle;
@@ -152,7 +153,7 @@ const PanelDialogSection = props => {
     get when() {
       return props.icon;
     },
-    children: icon => _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(icon(), true), false))
+    children: icon => _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(icon(), true), false))
   })), _$ssrAttribute("id", _$escape(id, true), false), _$escape(props.title), _$escape(_$createComponent(Show, {
     get when() {
       return props.subtitle;
@@ -213,7 +214,7 @@ const PanelDialog = props => {
   return _$createComponent(PanelDialogSurfaceContext.Provider, {
     value: surface,
     get children() {
-      return _$ssr(_tmpl$14, _$ssrAttribute("data-surface", _$escape(surface, true), false), _$escape(props.children));
+      return _$ssr(_tmpl$15, _$ssrAttribute("data-surface", _$escape(surface, true), false), _$escape(props.children));
     }
   });
 };

package/dist/ssr/layout/PanelDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/PanelDialog.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, createUniqueId, type JSX, Show, useContext } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { Tabs } from \"../actions/Tabs\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { resolvePromptMessages } from \"../feedback/prompt-messages\";\nimport { prompts } from \"../feedback/prompts\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { usePanelDialogMessages } from \"./panel-dialog-messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type PanelDialogSurface = \"contained\" | \"floating\";\n\nexport type PanelDialogProps = {\n  children: JSX.Element;\n  surface?: PanelDialogSurface;\n};\n\nexport type PanelDialogHeaderProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  close?: () => void;\n  closeDisabled?: boolean;\n  closeLabel?: string;\n};\n\nexport type PanelDialogBodyProps = {\n  children: JSX.Element;\n  scrollPreserveKey?: string;\n  scrollFade?: boolean;\n};\n\nexport type PanelDialogFooterProps = {\n  children: JSX.Element;\n};\n\nexport type PanelDialogSectionProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n} & (\n  | { hideable?: false; open?: never; defaultOpen?: never; onOpenChange?: never; disabled?: never }\n  | { hideable: true; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; disabled?: boolean }\n);\n\nexport type PanelDialogTabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n};\n\nexport type PanelDialogTabsProps<T extends string = string> = {\n  options: readonly PanelDialogTabOption<T>[];\n  value: T | (() => T);\n  onValueChange: (value: T) => void;\n  ariaLabel?: string;\n  label?: string;\n};\n\ntype PanelDialogComponent = ((props: PanelDialogProps) => JSX.Element) & {\n  Header: (props: PanelDialogHeaderProps) => JSX.Element;\n  Body: (props: PanelDialogBodyProps) => JSX.Element;\n  Footer: (props: PanelDialogFooterProps) => JSX.Element;\n  Section: (props: PanelDialogSectionProps) => JSX.Element;\n  Tabs: <T extends string>(props: PanelDialogTabsProps<T>) => JSX.Element;\n};\n\nconst PanelDialogSurfaceContext = createContext<PanelDialogSurface>(\"contained\");\nconst usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);\n\nconst panelDialogBasePanelClass = \"k2b-dialog k2b-panel-dialog-frame\";\n\nexport const panelDialogPanelClass = `${panelDialogBasePanelClass} is-standard`;\nexport const panelDialogOptions = {\n  panelClassName: panelDialogPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWidePanelClass = `${panelDialogBasePanelClass} is-wide`;\nexport const panelDialogWideOptions = {\n  panelClassName: panelDialogWidePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogFixedPanelClass = `${panelDialogBasePanelClass} is-fixed`;\nexport const panelDialogFixedOptions = {\n  panelClassName: panelDialogFixedPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-fixed\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWorkspacePanelClass = `${panelDialogBasePanelClass} is-workspace`;\nexport const panelDialogWorkspaceOptions = {\n  panelClassName: panelDialogWorkspacePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-workspace\",\n} satisfies OpenDialogOptions;\n\nexport const confirmDiscardIfDirty = async (dirty: boolean | (() => boolean)): Promise<boolean> => {\n  const hasChanges = typeof dirty === \"function\" ? dirty() : dirty;\n  if (!hasChanges) return true;\n  return Boolean(\n    await prompts.confirm(resolvePromptMessages().discardUnsavedChanges, {\n      title: resolvePromptMessages().unsavedChangesTitle,\n      variant: \"danger\",\n      confirmText: resolvePromptMessages().discard,\n    }),\n  );\n};\n\nconst PanelDialogHeader = (props: PanelDialogHeaderProps): JSX.Element => {\n  const messages = useUiMessages();\n  return (\n    <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()} data-has-subtitle={Boolean(props.subtitle)}>\n      <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n      <div class=\"k2b-panel-dialog__heading\">\n        <h2>{props.title}</h2>\n        <Show when={props.subtitle}>\n          <p>{props.subtitle}</p>\n        </Show>\n      </div>\n      <Show when={props.actions}>\n        <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n      </Show>\n      <Show when={props.close}>\n        <button\n          type=\"button\"\n          class=\"k2b-dialog__close\"\n          aria-label={props.closeLabel ?? messages().closeDialog}\n          disabled={props.closeDisabled}\n          onClick={props.close}\n        >\n          <i class=\"ti ti-x\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n    </header>\n  );\n};\n\nconst PanelDialogBody = (props: PanelDialogBodyProps): JSX.Element => {\n  let body: HTMLDivElement | undefined;\n  createScrollFade(\n    () => body,\n    () => props.scrollFade !== false,\n  );\n  return (\n    <div\n      ref={body}\n      class=\"k2b-panel-dialog__body\"\n      data-scroll-preserve={props.scrollPreserveKey}\n      data-surface={usePanelDialogSurface()}\n      data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n    >\n      {props.children}\n    </div>\n  );\n};\n\nconst PanelDialogFooter = (props: PanelDialogFooterProps): JSX.Element => (\n  <footer class=\"k2b-panel-dialog__footer\" data-surface={usePanelDialogSurface()}>\n    {props.children}\n  </footer>\n);\n\nconst PanelDialogSection = (props: PanelDialogSectionProps): JSX.Element => {\n  const id = `k2b-panel-dialog-section-${createUniqueId()}`;\n  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n  const open = () => !props.hideable || (props.open ?? internalOpen());\n  let section: HTMLElement | undefined;\n  let expand: HTMLButtonElement | undefined;\n  let collapse: HTMLButtonElement | undefined;\n  const toggle = (next: boolean) => {\n    if (props.disabled) return;\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n  createEffect(() => {\n    if (!props.hideable) return;\n    const expanded = open();\n    queueMicrotask(() => {\n      if (expanded !== open()) return;\n      const active = section?.ownerDocument.activeElement;\n      if (expanded && active === expand) collapse?.focus();\n      if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();\n    });\n  });\n\n  return (\n    <section\n      ref={section}\n      class=\"k2b-panel-dialog__section\"\n      data-surface={usePanelDialogSurface()}\n      data-hideable={props.hideable || undefined}\n      data-open={props.hideable ? open() : undefined}\n      aria-labelledby={open() ? id : `${id}-closed`}\n    >\n      <Show when={props.hideable}>\n        <div hidden={open()}>\n          <Button\n            ref={expand}\n            variant=\"ghost\"\n            class=\"k2b-panel-dialog__section-summary\"\n            disabled={props.disabled}\n            aria-expanded={false}\n            aria-controls={`${id}-body`}\n            onClick={() => toggle(true)}\n          >\n            <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n            <span class=\"k2b-panel-dialog__section-copy\">\n              <span id={`${id}-closed`} class=\"k2b-panel-dialog__section-title\">\n                {props.title}\n              </span>\n              <Show when={props.subtitle}>\n                <span class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</span>\n              </Show>\n            </span>\n            <i class=\"ti ti-eye\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </Show>\n      <header hidden={!open()}>\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-panel-dialog__section-icon\">\n              <i class={icon()} aria-hidden=\"true\" />\n            </span>\n          )}\n        </Show>\n        <div>\n          <h3 id={id}>{props.title}</h3>\n          <Show when={props.subtitle}>\n            <p class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n        </Show>\n        <Show when={props.hideable}>\n          <Button\n            ref={collapse}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"k2b-icon-button\"\n            disabled={props.disabled}\n            aria-labelledby={id}\n            aria-expanded={true}\n            aria-controls={`${id}-body`}\n            onClick={() => toggle(false)}\n          >\n            <i class=\"ti ti-eye-off\" aria-hidden=\"true\" />\n          </Button>\n        </Show>\n      </header>\n      <div id={`${id}-body`} class=\"k2b-panel-dialog__section-body\" hidden={!open()}>\n        {props.children}\n      </div>\n    </section>\n  );\n};\n\nconst PanelDialogTabs = <T extends string>(props: PanelDialogTabsProps<T>): JSX.Element => {\n  const panelDialogMessages = usePanelDialogMessages();\n  return (\n    <Tabs\n      class=\"k2b-panel-dialog__tabs\"\n      value={props.value}\n      onValueChange={props.onValueChange}\n      ariaLabel={props.ariaLabel ?? props.label ?? panelDialogMessages().dialogTabs}\n      options={props.options}\n    />\n  );\n};\n\nconst PanelDialog = ((props: PanelDialogProps): JSX.Element => {\n  const surface = props.surface ?? \"contained\";\n  return (\n    <PanelDialogSurfaceContext.Provider value={surface}>\n      <div class=\"k2b-panel-dialog\" data-surface={surface}>\n        {props.children}\n      </div>\n    </PanelDialogSurfaceContext.Provider>\n  );\n}) as PanelDialogComponent;\n\nPanelDialog.Header = PanelDialogHeader;\nPanelDialog.Body = PanelDialogBody;\nPanelDialog.Footer = PanelDialogFooter;\nPanelDialog.Section = PanelDialogSection;\nPanelDialog.Tabs = PanelDialogTabs;\n\nexport default PanelDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/PanelDialog.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, createUniqueId, type JSX, Show, useContext } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { Tabs } from \"../actions/Tabs\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { resolvePromptMessages } from \"../feedback/prompt-messages\";\nimport { prompts } from \"../feedback/prompts\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { usePanelDialogMessages } from \"./panel-dialog-messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type PanelDialogSurface = \"contained\" | \"floating\";\n\nexport type PanelDialogProps = {\n  children: JSX.Element;\n  surface?: PanelDialogSurface;\n};\n\nexport type PanelDialogHeaderProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  close?: () => void;\n  closeDisabled?: boolean;\n  closeLabel?: string;\n};\n\nexport type PanelDialogBodyProps = {\n  children: JSX.Element;\n  scrollPreserveKey?: string;\n  scrollFade?: boolean;\n};\n\nexport type PanelDialogFooterProps = {\n  children: JSX.Element;\n};\n\nexport type PanelDialogSectionProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n} & (\n  | { hideable?: false; open?: never; defaultOpen?: never; onOpenChange?: never; disabled?: never }\n  | { hideable: true; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; disabled?: boolean }\n);\n\nexport type PanelDialogTabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n};\n\nexport type PanelDialogTabsProps<T extends string = string> = {\n  options: readonly PanelDialogTabOption<T>[];\n  value: T | (() => T);\n  onValueChange: (value: T) => void;\n  ariaLabel?: string;\n  label?: string;\n};\n\ntype PanelDialogComponent = ((props: PanelDialogProps) => JSX.Element) & {\n  Header: (props: PanelDialogHeaderProps) => JSX.Element;\n  Body: (props: PanelDialogBodyProps) => JSX.Element;\n  Footer: (props: PanelDialogFooterProps) => JSX.Element;\n  Section: (props: PanelDialogSectionProps) => JSX.Element;\n  Tabs: <T extends string>(props: PanelDialogTabsProps<T>) => JSX.Element;\n};\n\nconst PanelDialogSurfaceContext = createContext<PanelDialogSurface>(\"contained\");\nconst usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);\n\nconst panelDialogBasePanelClass = \"k2b-dialog k2b-panel-dialog-frame\";\n\nexport const panelDialogPanelClass = `${panelDialogBasePanelClass} is-standard`;\nexport const panelDialogOptions = {\n  panelClassName: panelDialogPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWidePanelClass = `${panelDialogBasePanelClass} is-wide`;\nexport const panelDialogWideOptions = {\n  panelClassName: panelDialogWidePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogFixedPanelClass = `${panelDialogBasePanelClass} is-fixed`;\nexport const panelDialogFixedOptions = {\n  panelClassName: panelDialogFixedPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-fixed\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWorkspacePanelClass = `${panelDialogBasePanelClass} is-workspace`;\nexport const panelDialogWorkspaceOptions = {\n  panelClassName: panelDialogWorkspacePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-workspace\",\n} satisfies OpenDialogOptions;\n\nexport const confirmDiscardIfDirty = async (dirty: boolean | (() => boolean)): Promise<boolean> => {\n  const hasChanges = typeof dirty === \"function\" ? dirty() : dirty;\n  if (!hasChanges) return true;\n  return Boolean(\n    await prompts.confirm(resolvePromptMessages().discardUnsavedChanges, {\n      title: resolvePromptMessages().unsavedChangesTitle,\n      variant: \"danger\",\n      confirmText: resolvePromptMessages().discard,\n    }),\n  );\n};\n\nconst PanelDialogHeader = (props: PanelDialogHeaderProps): JSX.Element => {\n  const messages = useUiMessages();\n  return (\n    <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()} data-has-subtitle={Boolean(props.subtitle)}>\n      <Show when={props.icon}>\n        {(icon) => (\n          <span class=\"k2b-panel-dialog__icon k2b-icon-tile\" aria-hidden=\"true\">\n            <i class={icon()} />\n          </span>\n        )}\n      </Show>\n      <div class=\"k2b-panel-dialog__heading\">\n        <h2>{props.title}</h2>\n        <Show when={props.subtitle}>\n          <p>{props.subtitle}</p>\n        </Show>\n      </div>\n      <Show when={props.actions}>\n        <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n      </Show>\n      <Show when={props.close}>\n        <button\n          type=\"button\"\n          class=\"k2b-dialog__close\"\n          aria-label={props.closeLabel ?? messages().closeDialog}\n          disabled={props.closeDisabled}\n          onClick={props.close}\n        >\n          <i class=\"ti ti-x\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n    </header>\n  );\n};\n\nconst PanelDialogBody = (props: PanelDialogBodyProps): JSX.Element => {\n  let body: HTMLDivElement | undefined;\n  createScrollFade(\n    () => body,\n    () => props.scrollFade !== false,\n  );\n  return (\n    <div\n      ref={body}\n      class=\"k2b-panel-dialog__body\"\n      data-scroll-preserve={props.scrollPreserveKey}\n      data-surface={usePanelDialogSurface()}\n      data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n    >\n      {props.children}\n    </div>\n  );\n};\n\nconst PanelDialogFooter = (props: PanelDialogFooterProps): JSX.Element => (\n  <footer class=\"k2b-panel-dialog__footer\" data-surface={usePanelDialogSurface()}>\n    {props.children}\n  </footer>\n);\n\nconst PanelDialogSection = (props: PanelDialogSectionProps): JSX.Element => {\n  const id = `k2b-panel-dialog-section-${createUniqueId()}`;\n  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n  const open = () => !props.hideable || (props.open ?? internalOpen());\n  let section: HTMLElement | undefined;\n  let expand: HTMLButtonElement | undefined;\n  let collapse: HTMLButtonElement | undefined;\n  const toggle = (next: boolean) => {\n    if (props.disabled) return;\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n  createEffect(() => {\n    if (!props.hideable) return;\n    const expanded = open();\n    queueMicrotask(() => {\n      if (expanded !== open()) return;\n      const active = section?.ownerDocument.activeElement;\n      if (expanded && active === expand) collapse?.focus();\n      if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();\n    });\n  });\n\n  return (\n    <section\n      ref={section}\n      class=\"k2b-panel-dialog__section\"\n      data-surface={usePanelDialogSurface()}\n      data-hideable={props.hideable || undefined}\n      data-open={props.hideable ? open() : undefined}\n      aria-labelledby={open() ? id : `${id}-closed`}\n    >\n      <Show when={props.hideable}>\n        <div hidden={open()}>\n          <Button\n            ref={expand}\n            variant=\"ghost\"\n            class=\"k2b-panel-dialog__section-summary\"\n            disabled={props.disabled}\n            aria-expanded={false}\n            aria-controls={`${id}-body`}\n            onClick={() => toggle(true)}\n          >\n            <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n            <span class=\"k2b-panel-dialog__section-copy\">\n              <span id={`${id}-closed`} class=\"k2b-panel-dialog__section-title\">\n                {props.title}\n              </span>\n              <Show when={props.subtitle}>\n                <span class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</span>\n              </Show>\n            </span>\n            <i class=\"ti ti-eye\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </Show>\n      <header hidden={!open()}>\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-panel-dialog__section-icon\">\n              <i class={icon()} aria-hidden=\"true\" />\n            </span>\n          )}\n        </Show>\n        <div>\n          <h3 id={id}>{props.title}</h3>\n          <Show when={props.subtitle}>\n            <p class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n        </Show>\n        <Show when={props.hideable}>\n          <Button\n            ref={collapse}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"k2b-icon-button\"\n            disabled={props.disabled}\n            aria-labelledby={id}\n            aria-expanded={true}\n            aria-controls={`${id}-body`}\n            onClick={() => toggle(false)}\n          >\n            <i class=\"ti ti-eye-off\" aria-hidden=\"true\" />\n          </Button>\n        </Show>\n      </header>\n      <div id={`${id}-body`} class=\"k2b-panel-dialog__section-body\" hidden={!open()}>\n        {props.children}\n      </div>\n    </section>\n  );\n};\n\nconst PanelDialogTabs = <T extends string>(props: PanelDialogTabsProps<T>): JSX.Element => {\n  const panelDialogMessages = usePanelDialogMessages();\n  return (\n    <Tabs\n      class=\"k2b-panel-dialog__tabs\"\n      value={props.value}\n      onValueChange={props.onValueChange}\n      ariaLabel={props.ariaLabel ?? props.label ?? panelDialogMessages().dialogTabs}\n      options={props.options}\n    />\n  );\n};\n\nconst PanelDialog = ((props: PanelDialogProps): JSX.Element => {\n  const surface = props.surface ?? \"contained\";\n  return (\n    <PanelDialogSurfaceContext.Provider value={surface}>\n      <div class=\"k2b-panel-dialog\" data-surface={surface}>\n        {props.children}\n      </div>\n    </PanelDialogSurfaceContext.Provider>\n  );\n}) as PanelDialogComponent;\n\nPanelDialog.Header = PanelDialogHeader;\nPanelDialog.Body = PanelDialogBody;\nPanelDialog.Footer = PanelDialogFooter;\nPanelDialog.Section = PanelDialogSection;\nPanelDialog.Tabs = PanelDialogTabs;\n\nexport default PanelDialog;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/layout/ResizeSeparator.js

@@ -0,0 +1,45 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<div role=\"separator\" tabindex=\"0\" class=\"", "\"", "><span aria-hidden=\"true\"></span></div>"];
+import { createEffect, onCleanup, onMount } from "solid-js";
+import { attachResizeSeparator } from "./resize-separator";
+export default function ResizeSeparator(props) {
+  let element;
+  onMount(() => {
+    if (element) onCleanup(attachResizeSeparator(element, {
+      get min() {
+        return props.min;
+      },
+      get max() {
+        return props.max;
+      },
+      value: () => props.value,
+      get unit() {
+        return props.unit;
+      },
+      get step() {
+        return props.step;
+      },
+      get largeStep() {
+        return props.largeStep;
+      },
+      get grow() {
+        return props.grow;
+      },
+      get collapseBelow() {
+        return props.collapseBelow;
+      },
+      onResize: value => props.onResize(value),
+      onResizeEnd: value => props.onResizeEnd?.(value),
+      onCollapseIntent: armed => props.onCollapseIntent?.(armed),
+      onCollapse: () => props.onCollapse?.(),
+      onDragChange: dragging => props.onDragChange?.(dragging)
+    }));
+  });
+  createEffect(() => {
+    if (element) element.setAttribute("aria-valuenow", String(Math.round(props.value * 100) / 100));
+  });
+  return _$ssr(_tmpl$, `k2b-resize-separator${props.class ? ` ${_$escape(props.class, true)}` : ""}`, _$ssrAttribute("aria-orientation", _$escape(props.orientation, true), false) + _$ssrAttribute("aria-valuemin", _$escape(props.min, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.max, true), false) + _$ssrAttribute("aria-valuenow", _$escape(Math.round(props.value * 100), true) / 100, false) + _$ssrAttribute("aria-label", _$escape(props.label, true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("data-orientation", _$escape(props.orientation, true), false));
+}
+//# sourceMappingURL=ResizeSeparator.js.map

package/dist/ssr/layout/ResizeSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["layout/ResizeSeparator.tsx"],"sourcesContent":["import { createEffect, onCleanup, onMount } from \"solid-js\";\nimport { attachResizeSeparator, type ResizeSeparatorOptions } from \"./resize-separator\";\n\nexport type ResizeSeparatorProps = Omit<ResizeSeparatorOptions, \"value\"> & {\n  label: string;\n  orientation: \"vertical\" | \"horizontal\";\n  value: number;\n  controls?: string;\n  class?: string;\n};\n\nexport default function ResizeSeparator(props: ResizeSeparatorProps) {\n  let element: HTMLDivElement | undefined;\n  onMount(() => {\n    if (element)\n      onCleanup(\n        attachResizeSeparator(element, {\n          get min() {\n            return props.min;\n          },\n          get max() {\n            return props.max;\n          },\n          value: () => props.value,\n          get unit() {\n            return props.unit;\n          },\n          get step() {\n            return props.step;\n          },\n          get largeStep() {\n            return props.largeStep;\n          },\n          get grow() {\n            return props.grow;\n          },\n          get collapseBelow() {\n            return props.collapseBelow;\n          },\n          onResize: (value) => props.onResize(value),\n          onResizeEnd: (value) => props.onResizeEnd?.(value),\n          onCollapseIntent: (armed) => props.onCollapseIntent?.(armed),\n          onCollapse: () => props.onCollapse?.(),\n          onDragChange: (dragging) => props.onDragChange?.(dragging),\n        }),\n      );\n  });\n  createEffect(() => {\n    if (element) element.setAttribute(\"aria-valuenow\", String(Math.round(props.value * 100) / 100));\n  });\n  return (\n    <div\n      ref={element}\n      role=\"separator\"\n      tabindex=\"0\"\n      class={`k2b-resize-separator${props.class ? ` ${props.class}` : \"\"}`}\n      aria-orientation={props.orientation}\n      aria-valuemin={props.min}\n      aria-valuemax={props.max}\n      aria-valuenow={Math.round(props.value * 100) / 100}\n      aria-label={props.label}\n      aria-controls={props.controls}\n      data-orientation={props.orientation}\n    >\n      <span aria-hidden=\"true\" />\n    </div>\n  );\n}\n"],"mappings":";;;;AAAA,SAAS,YAAY,EAAE,SAAS,EAAE,OAAO,QAAQ,UAAU;AAC3D,SAAS,qBAAqB,QAAqC,oBAAoB;AAUvF,eAAe,SAAS,eAAe,CAAC,KAA2B,EAAE;EACnE,IAAI,OAAmC;EACvC,OAAO,CAAC,MAAM;IACZ,IAAI,OAAO,EACT,SAAS,CACP,qBAAqB,CAAC,OAAO,EAAE;MAC7B,IAAI,GAAG,GAAG;QACR,OAAO,KAAK,CAAC,GAAG;MAClB,CAAC;MACD,IAAI,GAAG,GAAG;QACR,OAAO,KAAK,CAAC,GAAG;MAClB,CAAC;MACD,KAAK,EAAE,MAAM,KAAK,CAAC,KAAK;MACxB,IAAI,IAAI,GAAG;QACT,OAAO,KAAK,CAAC,IAAI;MACnB,CAAC;MACD,IAAI,IAAI,GAAG;QACT,OAAO,KAAK,CAAC,IAAI;MACnB,CAAC;MACD,IAAI,SAAS,GAAG;QACd,OAAO,KAAK,CAAC,SAAS;MACxB,CAAC;MACD,IAAI,IAAI,GAAG;QACT,OAAO,KAAK,CAAC,IAAI;MACnB,CAAC;MACD,IAAI,aAAa,GAAG;QAClB,OAAO,KAAK,CAAC,aAAa;MAC5B,CAAC;MACD,QAAQ,EAAG,KAAK,IAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;MAC1C,WAAW,EAAG,KAAK,IAAK,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC;MAClD,gBAAgB,EAAG,KAAK,IAAK,KAAK,CAAC,gBAAgB,GAAG,KAAK,CAAC;MAC5D,UAAU,EAAE,MAAM,KAAK,CAAC,UAAU,GAAG,CAAC;MACtC,YAAY,EAAG,QAAQ,IAAK,KAAK,CAAC,YAAY,GAAG,QAAQ;IAC3D,CAAC,CACH,CAAC;EACL,CAAC,CAAC;EACF,YAAY,CAAC,MAAM;IACjB,IAAI,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;EACjG,CAAC,CAAC;EACF,qBAKW,uBAAuB,KAAK,CAAC,KAAK,GAAG,aAAI,KAAK,CAAC,KAAK,SAAE,GAAG,EAAE,EAAE,8CAClD,KAAK,CAAC,WAAW,2DACpB,KAAK,CAAC,GAAG,2DACT,KAAK,CAAC,GAAG,kDACT,aAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,UAAG,GAAG,iDACtC,KAAK,CAAC,KAAK,2DACR,KAAK,CAAC,QAAQ,8DACX,KAAK,CAAC,WAAW;AAKzC","ignoreList":[]}

package/dist/ssr/layout/SidebarSwitcher.js

@@ -66,8 +66,13 @@ export function AppWorkspaceSidebarSwitcher(props) {
     if (props.options === undefined) props.onLoad?.();
   };
 
-  // The collapsed rail is a narrow column from 64 rem, so the panel opens beside it instead of below.
-  const inRail = () => Boolean(trigger?.closest('[data-sidebar-collapsed="true"] .k2b-app-workspace__sidebar[data-workspace-collapsible="true"]') && window.matchMedia("(min-width: 64rem)").matches);
+  // The collapsed rail is a narrow column from a 64 rem host, so the panel opens beside it instead of below.
+  // The workspace's stylesheet states which form its sidebar has.
+  const inRail = () => {
+    const sidebar = trigger?.closest('[data-sidebar-collapsed="true"] .k2b-app-workspace__sidebar[data-workspace-collapsible="true"]');
+    const root = sidebar?.closest("[data-k2b-app-workspace]");
+    return Boolean(root && getComputedStyle(root).getPropertyValue("--k2b-workspace-sidebar-form").trim() === "column");
+  };
   /** Whether the panel opens above its trigger; chosen on opening and on a viewport resize only. */
   let above = false;
   /**
@@ -123,6 +128,7 @@ export function AppWorkspaceSidebarSwitcher(props) {
   const reposition = () => open() && place();
   const resize = () => open() && place(true);
   // Arriving options, an error, or the search field grow the panel after it opened, so its size places it too.
+  // The trigger changes size when a host turns the rail into the expanded overlay, without a window resize.
   let resizing;
   const listen = on => {
     const method = on ? "addEventListener" : "removeEventListener";
@@ -131,6 +137,7 @@ export function AppWorkspaceSidebarSwitcher(props) {
     if (on && panel) {
       resizing ??= new ResizeObserver(reposition);
       resizing.observe(panel);
+      if (trigger) resizing.observe(trigger);
     } else resizing?.disconnect();
   };
   // Server rendering cleans up too, where no window exists.

package/dist/ssr/layout/SidebarSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/SidebarSwitcher.tsx"],"sourcesContent":["import { documentNavigate } from \"@k2b/ssr/nav\";\nimport { createMemo, createSignal, createUniqueId, For, type JSX, onCleanup, Show } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { dropdownPosition } from \"../actions/Dropdown\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\n\n/** One container a person can switch to, such as a notebook, a space, or a mailbox. */\nexport type AppWorkspaceSwitcherOption = {\n  id: string;\n  label: string;\n  /** One secondary fact, such as a mailbox's address. */\n  description?: string;\n  /** Tabler icon class; without it the row takes the switcher's icon. */\n  icon?: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  href: string;\n};\n\n/** A row below the containers, such as \"New notebook\" or \"All notebooks\". */\nexport type AppWorkspaceSwitcherAction = {\n  id: string;\n  label: string;\n  icon: string;\n  disabled?: boolean;\n} & ({ href: string; action?: never } | { action: () => void; href?: never });\n\nexport type AppWorkspaceSidebarSwitcherProps = {\n  /** The current container's ID among `options`. */\n  currentId: string;\n  /** The current container's name. */\n  label: string;\n  /** One secondary fact under the name, such as a mailbox's address. */\n  description?: string;\n  icon: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  /** Names the button's purpose and its panel, such as \"Switch notebook\". */\n  switchLabel: string;\n  /** Every container the person can switch to, the current one included; `undefined` until they are loaded. */\n  options?: readonly AppWorkspaceSwitcherOption[];\n  /** Shown in place of the options when loading them failed; the panel offers to try again through `onLoad`. */\n  error?: string;\n  /**\n   * Asks for `options` while they are `undefined`: when a pointer or the focus first reaches the button, so the list\n   * is usually there when the panel opens, on every opening, and from the panel's retry. Ignore repeated calls while a\n   * request runs.\n   */\n  onLoad?: () => void;\n  actions?: readonly AppWorkspaceSwitcherAction[];\n  /**\n   * A host menu around the switcher, such as the phone menu, finishes dismissing itself before a chosen container\n   * opens or an action runs; `false` cancels the choice. Navigation passes its own.\n   */\n  beforeSelect?: () => boolean | void | Promise<boolean | void>;\n  /** Sizes the switcher in its place, such as `flex-1` beside a button in one row. */\n  class?: string;\n};\n\n/** From this many containers the panel scrolls, so it offers a search field. */\nexport const APP_WORKSPACE_SWITCHER_SEARCH_FROM = 8;\n\n/** The space between trigger and panel, and the panel's distance from the viewport edges, as for every dropdown. */\nconst SWITCHER_GAP = 4;\nconst SWITCHER_INSET = 8;\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\nconst tint = (color: string | undefined) => (color ? { \"--k2b-sidebar-switcher-color\": color } : undefined);\nconst plainClick = (event: MouseEvent) => event.button === 0 && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);\n\n/**\n * The current container at the top of a sidebar: its icon, name, and an optional fact, with a chevron that opens the\n * other containers, a search field when there are many, and actions such as \"New …\" and \"All …\". The rows are links,\n * so a container also opens in a new tab. In a collapsed rail it shows only the icon and opens beside the rail.\n */\nexport function AppWorkspaceSidebarSwitcher(props: AppWorkspaceSidebarSwitcherProps): JSX.Element {\n  const messages = useUiMessages();\n  const id = `k2b-sidebar-switcher-${createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n  const [open, setOpen] = createSignal(false);\n  const [query, setQuery] = createSignal(\"\");\n  let trigger: HTMLButtonElement | undefined;\n  let panel: HTMLDivElement | undefined;\n  let search: HTMLInputElement | undefined;\n  let keyboardOpened = true;\n  /** Whether the panel was open when a press on the button began; the press itself light-dismisses it first. */\n  let openAtPress: boolean | undefined;\n\n  const searchable = () => (props.options?.length ?? 0) >= APP_WORKSPACE_SWITCHER_SEARCH_FROM;\n  const visible = createMemo(() => {\n    const needle = query().trim().toLocaleLowerCase();\n    const options = props.options ?? [];\n    if (!needle) return options;\n    return options.filter((option) => [option.label, option.description].some((part) => part?.toLocaleLowerCase().includes(needle)));\n  });\n  const load = () => {\n    if (props.options === undefined) props.onLoad?.();\n  };\n\n  // The collapsed rail is a narrow column from 64 rem, so the panel opens beside it instead of below.\n  const inRail = () =>\n    Boolean(\n      trigger?.closest('[data-sidebar-collapsed=\"true\"] .k2b-app-workspace__sidebar[data-workspace-collapsible=\"true\"]') &&\n        window.matchMedia(\"(min-width: 64rem)\").matches,\n    );\n  /** Whether the panel opens above its trigger; chosen on opening and on a viewport resize only. */\n  let above = false;\n  /**\n   * Places the panel beside its trigger. `choose` picks its side again; otherwise it keeps the side, so arriving\n   * options, an error, or a narrowed search never flip it to the other side while it is open.\n   */\n  const place = (choose = false) => {\n    if (!trigger || !panel) return;\n    const rect = trigger.getBoundingClientRect();\n    const viewport = { width: window.innerWidth, height: window.innerHeight };\n    const rail = inRail();\n    // As wide as the sidebar row and never narrower than a menu, so long names keep their words; fixed while open,\n    // so filtering never changes the panel's width.\n    panel.style.setProperty(\"--k2b-sidebar-switcher-width\", `${rail ? 0 : Math.round(rect.width)}px`);\n    if (rail) {\n      panel.style.removeProperty(\"--k2b-sidebar-switcher-room\");\n      panel.style.removeProperty(\"min-height\");\n      panel.style.bottom = \"auto\";\n      const position = dropdownPosition(rect, panel.getBoundingClientRect(), \"right-start\", viewport);\n      panel.style.left = `${position.left}px`;\n      panel.style.top = `${position.top}px`;\n      return;\n    }\n    // Below the trigger, or above it when the panel at its tallest does not fit below and there is more room above,\n    // as in the lower half of the phone menu. Its tallest is its CSS max-height, min(28rem, 80dvh), so the side does\n    // not depend on what the panel shows at the moment. It never covers its trigger: it takes at most the room on its\n    // side, and its list scrolls.\n    const roomBelow = viewport.height - rect.bottom - SWITCHER_GAP - SWITCHER_INSET;\n    const roomAbove = rect.top - SWITCHER_GAP - SWITCHER_INSET;\n    if (choose) {\n      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      above = Math.min(28 * rem, 0.8 * viewport.height) > roomBelow && roomAbove > roomBelow;\n      panel.style.removeProperty(\"min-height\");\n    }\n    const room = Math.max(0, above ? roomAbove : roomBelow);\n    panel.style.setProperty(\"--k2b-sidebar-switcher-room\", `${room}px`);\n    panel.style.left = `${dropdownPosition(rect, panel.getBoundingClientRect(), \"bottom-right\", viewport).left}px`;\n    if (above) {\n      // Its bottom edge stays beside the trigger, and it does not shrink while open, so a narrowed search keeps the\n      // search field where the person is typing.\n      const height = Math.min(room, Math.max(panel.getBoundingClientRect().height, Number.parseFloat(panel.style.minHeight) || 0));\n      panel.style.minHeight = `${height}px`;\n      panel.style.top = \"auto\";\n      panel.style.bottom = `${document.documentElement.clientHeight - rect.top + SWITCHER_GAP}px`;\n    } else {\n      panel.style.top = `${rect.bottom + SWITCHER_GAP}px`;\n      panel.style.bottom = \"auto\";\n    }\n  };\n  const reposition = () => open() && place();\n  const resize = () => open() && place(true);\n  // Arriving options, an error, or the search field grow the panel after it opened, so its size places it too.\n  let resizing: ResizeObserver | undefined;\n  const listen = (on: boolean) => {\n    const method = on ? \"addEventListener\" : \"removeEventListener\";\n    window[method](\"resize\", resize);\n    window[method](\"scroll\", reposition, true);\n    if (on && panel) {\n      resizing ??= new ResizeObserver(reposition);\n      resizing.observe(panel);\n    } else resizing?.disconnect();\n  };\n  // Server rendering cleans up too, where no window exists.\n  onCleanup(() => isServer || listen(false));\n  /** Lets the host dismiss its menu first, then opens the link or runs the action unless the host cancels. */\n  const choose = (run: () => void) => {\n    hide(false);\n    if (!props.beforeSelect) return run();\n    void Promise.resolve(props.beforeSelect()).then((allowed) => {\n      if (allowed !== false) run();\n    });\n  };\n  const follow = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {\n    if (!plainClick(event)) return;\n    if (!props.beforeSelect) return hide(false);\n    event.preventDefault();\n    const href = event.currentTarget.href;\n    choose(() => documentNavigate(href));\n  };\n\n  const rows = () => (panel ? Array.from(panel.querySelectorAll<HTMLElement>(\"[data-switcher-row]:not([aria-disabled='true'])\")) : []);\n  const focusRow = (index: number) => {\n    const all = rows();\n    if (all.length) all[(index + all.length) % all.length]?.focus();\n  };\n  const show = (focus: \"start\" | \"end\" = \"start\") => {\n    if (!panel || panel.matches(\":popover-open\")) return;\n    load();\n    keyboardOpened = ringOnReturn(trigger);\n    setQuery(\"\");\n    panel.showPopover();\n    setOpen(true);\n    listen(true);\n    place(true);\n    queueMicrotask(() => {\n      // On touch the search field waits for a tap, so the keyboard does not cover the list on opening.\n      if (searchable() && focus === \"start\" && !window.matchMedia(\"(pointer: coarse)\").matches) search?.focus();\n      else if (focus === \"end\") focusRow(-1);\n      // While the list loads, the panel holds focus, so arriving rows do not move it.\n      else (panel?.querySelector<HTMLElement>('[aria-current=\"true\"]') ?? (props.options ? rows()[0] : panel))?.focus();\n    });\n  };\n  const hide = (restoreFocus: boolean) => {\n    if (restoreFocus) returnFocus(trigger, keyboardOpened);\n    if (panel?.matches(\":popover-open\")) panel.hidePopover();\n  };\n\n  const onPanelKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const all = rows();\n    const index = all.indexOf(target);\n    if (event.key === \"Escape\") {\n      // The panel closes alone; an overlay sidebar around it stays open.\n      event.preventDefault();\n      event.stopPropagation();\n      hide(true);\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusRow(index + (event.key === \"ArrowDown\" ? 1 : -1));\n    } else if ((event.key === \"Home\" || event.key === \"End\") && target !== search) {\n      event.preventDefault();\n      focusRow(event.key === \"Home\" ? 0 : -1);\n    } else if (event.key === \"Enter\" && target === search) {\n      event.preventDefault();\n      panel?.querySelector<HTMLElement>(\"[data-switcher-option]\")?.click();\n    } else if (\n      search &&\n      target !== search &&\n      event.key.length === 1 &&\n      event.key !== \" \" &&\n      !(event.metaKey || event.ctrlKey || event.altKey)\n    ) {\n      // Typing anywhere in a long list searches it.\n      event.preventDefault();\n      setQuery(query() + event.key);\n      search.focus();\n    }\n  };\n\n  return (\n    <div class={`k2b-sidebar-switcher ${props.class ?? \"\"}`} data-description={props.description ? \"\" : undefined}>\n      <button\n        ref={trigger}\n        type=\"button\"\n        class=\"k2b-sidebar-switcher__trigger\"\n        aria-label={props.label}\n        aria-describedby={`${id}-purpose`}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open()}\n        aria-controls={id}\n        // The full name for a truncated title and for the icon in a collapsed rail.\n        title={props.label}\n        onPointerEnter={load}\n        onFocus={load}\n        onPointerDown={() => (openAtPress = panel?.matches(\":popover-open\"))}\n        onClick={() => {\n          const wasOpen = openAtPress ?? panel?.matches(\":popover-open\");\n          openAtPress = undefined;\n          if (wasOpen) hide(false);\n          else show();\n        }}\n        onKeyDown={(event) => {\n          if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n          event.preventDefault();\n          if (open()) focusRow(event.key === \"ArrowDown\" ? 0 : -1);\n          else show(event.key === \"ArrowDown\" ? \"start\" : \"end\");\n        }}\n      >\n        <span class=\"k2b-sidebar-switcher__icon\" style={tint(props.color)} aria-hidden=\"true\">\n          <i class={iconClass(props.icon)} />\n        </span>\n        <span class=\"k2b-sidebar-switcher__copy\" aria-hidden=\"true\">\n          <span>{props.label}</span>\n          <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n        </span>\n        <i class=\"ti ti-selector k2b-sidebar-switcher__chevron\" aria-hidden=\"true\" />\n        <span id={`${id}-purpose`} class=\"k2b-sr-only\">\n          {[props.description, props.switchLabel].filter(Boolean).join(\", \")}\n        </span>\n      </button>\n      <div\n        ref={panel}\n        id={id}\n        popover=\"auto\"\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-label={props.switchLabel}\n        class=\"k2b-sidebar-switcher__panel\"\n        onKeyDown={onPanelKeyDown}\n        onFocusOut={(event) => {\n          const next = event.relatedTarget as Node | null;\n          // Tabbing out closes the panel; focus that leaves the window keeps it.\n          if (next && !panel?.contains(next) && next !== trigger) hide(false);\n        }}\n        onToggle={(event) => {\n          if ((event as ToggleEvent).newState === \"open\") return;\n          setOpen(false);\n          listen(false);\n        }}\n      >\n        <Show when={searchable()}>\n          <div class=\"k2b-choice-search k2b-sidebar-switcher__search\">\n            <i class=\"ti ti-search\" aria-hidden=\"true\" />\n            <input\n              ref={search}\n              type=\"search\"\n              data-switcher-row\n              value={query()}\n              placeholder={messages().search}\n              aria-label={messages().searchLabel}\n              aria-controls={`${id}-options`}\n              onInput={(event) => setQuery(event.currentTarget.value)}\n            />\n          </div>\n        </Show>\n        <ul id={`${id}-options`} class=\"k2b-sidebar-switcher__options\">\n          <Show\n            when={props.options}\n            fallback={\n              <li class=\"k2b-choice-status\" role=\"status\" data-tone={props.error ? \"danger\" : undefined}>\n                <Show\n                  when={props.error}\n                  fallback={\n                    <>\n                      <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n                      <span>{messages().loading}</span>\n                    </>\n                  }\n                >\n                  {(error) => (\n                    <>\n                      <span>{error()}</span>\n                      <button type=\"button\" data-switcher-row onClick={() => props.onLoad?.()}>\n                        {messages().retry}\n                      </button>\n                    </>\n                  )}\n                </Show>\n              </li>\n            }\n          >\n            <For\n              each={visible()}\n              fallback={\n                <li class=\"k2b-choice-status\" role=\"status\">\n                  {messages().noResults}\n                </li>\n              }\n            >\n              {(option) => {\n                const current = () => option.id === props.currentId;\n                return (\n                  <li>\n                    <a\n                      href={option.href}\n                      class=\"k2b-dropdown__item k2b-sidebar-switcher__option\"\n                      data-switcher-row\n                      data-switcher-option\n                      aria-current={current() ? \"true\" : undefined}\n                      onClick={(event) => {\n                        // The open container is already here: choosing it only closes the panel.\n                        if (current() && plainClick(event)) {\n                          event.preventDefault();\n                          hide(true);\n                        } else follow(event);\n                      }}\n                    >\n                      <span class=\"k2b-sidebar-switcher__option-icon\" style={tint(option.color ?? props.color)} aria-hidden=\"true\">\n                        <i class={iconClass(option.icon ?? props.icon)} />\n                      </span>\n                      <span class=\"k2b-dropdown__copy\">\n                        <span>{option.label}</span>\n                        <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                      </span>\n                      <i class=\"ti ti-check k2b-dropdown__check\" data-hidden={current() ? undefined : \"true\"} aria-hidden=\"true\" />\n                    </a>\n                  </li>\n                );\n              }}\n            </For>\n          </Show>\n        </ul>\n        <Show when={props.actions?.length}>\n          <ul class=\"k2b-sidebar-switcher__actions\">\n            <For each={props.actions}>\n              {(item) => (\n                <li>\n                  <Show\n                    when={item.href}\n                    fallback={\n                      <button\n                        type=\"button\"\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        disabled={item.disabled}\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={() => choose(() => item.action?.())}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </button>\n                    }\n                  >\n                    {(href) => (\n                      <a\n                        href={item.disabled ? undefined : href()}\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={(event) => item.disabled || follow(event)}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </a>\n                    )}\n                  </Show>\n                </li>\n              )}\n            </For>\n          </ul>\n        </Show>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/SidebarSwitcher.tsx"],"sourcesContent":["import { documentNavigate } from \"@k2b/ssr/nav\";\nimport { createMemo, createSignal, createUniqueId, For, type JSX, onCleanup, Show } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { dropdownPosition } from \"../actions/Dropdown\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\n\n/** One container a person can switch to, such as a notebook, a space, or a mailbox. */\nexport type AppWorkspaceSwitcherOption = {\n  id: string;\n  label: string;\n  /** One secondary fact, such as a mailbox's address. */\n  description?: string;\n  /** Tabler icon class; without it the row takes the switcher's icon. */\n  icon?: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  href: string;\n};\n\n/** A row below the containers, such as \"New notebook\" or \"All notebooks\". */\nexport type AppWorkspaceSwitcherAction = {\n  id: string;\n  label: string;\n  icon: string;\n  disabled?: boolean;\n} & ({ href: string; action?: never } | { action: () => void; href?: never });\n\nexport type AppWorkspaceSidebarSwitcherProps = {\n  /** The current container's ID among `options`. */\n  currentId: string;\n  /** The current container's name. */\n  label: string;\n  /** One secondary fact under the name, such as a mailbox's address. */\n  description?: string;\n  icon: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  /** Names the button's purpose and its panel, such as \"Switch notebook\". */\n  switchLabel: string;\n  /** Every container the person can switch to, the current one included; `undefined` until they are loaded. */\n  options?: readonly AppWorkspaceSwitcherOption[];\n  /** Shown in place of the options when loading them failed; the panel offers to try again through `onLoad`. */\n  error?: string;\n  /**\n   * Asks for `options` while they are `undefined`: when a pointer or the focus first reaches the button, so the list\n   * is usually there when the panel opens, on every opening, and from the panel's retry. Ignore repeated calls while a\n   * request runs.\n   */\n  onLoad?: () => void;\n  actions?: readonly AppWorkspaceSwitcherAction[];\n  /**\n   * A host menu around the switcher, such as the phone menu, finishes dismissing itself before a chosen container\n   * opens or an action runs; `false` cancels the choice. Navigation passes its own.\n   */\n  beforeSelect?: () => boolean | void | Promise<boolean | void>;\n  /** Sizes the switcher in its place, such as `flex-1` beside a button in one row. */\n  class?: string;\n};\n\n/** From this many containers the panel scrolls, so it offers a search field. */\nexport const APP_WORKSPACE_SWITCHER_SEARCH_FROM = 8;\n\n/** The space between trigger and panel, and the panel's distance from the viewport edges, as for every dropdown. */\nconst SWITCHER_GAP = 4;\nconst SWITCHER_INSET = 8;\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\nconst tint = (color: string | undefined) => (color ? { \"--k2b-sidebar-switcher-color\": color } : undefined);\nconst plainClick = (event: MouseEvent) => event.button === 0 && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);\n\n/**\n * The current container at the top of a sidebar: its icon, name, and an optional fact, with a chevron that opens the\n * other containers, a search field when there are many, and actions such as \"New …\" and \"All …\". The rows are links,\n * so a container also opens in a new tab. In a collapsed rail it shows only the icon and opens beside the rail.\n */\nexport function AppWorkspaceSidebarSwitcher(props: AppWorkspaceSidebarSwitcherProps): JSX.Element {\n  const messages = useUiMessages();\n  const id = `k2b-sidebar-switcher-${createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n  const [open, setOpen] = createSignal(false);\n  const [query, setQuery] = createSignal(\"\");\n  let trigger: HTMLButtonElement | undefined;\n  let panel: HTMLDivElement | undefined;\n  let search: HTMLInputElement | undefined;\n  let keyboardOpened = true;\n  /** Whether the panel was open when a press on the button began; the press itself light-dismisses it first. */\n  let openAtPress: boolean | undefined;\n\n  const searchable = () => (props.options?.length ?? 0) >= APP_WORKSPACE_SWITCHER_SEARCH_FROM;\n  const visible = createMemo(() => {\n    const needle = query().trim().toLocaleLowerCase();\n    const options = props.options ?? [];\n    if (!needle) return options;\n    return options.filter((option) => [option.label, option.description].some((part) => part?.toLocaleLowerCase().includes(needle)));\n  });\n  const load = () => {\n    if (props.options === undefined) props.onLoad?.();\n  };\n\n  // The collapsed rail is a narrow column from a 64 rem host, so the panel opens beside it instead of below.\n  // The workspace's stylesheet states which form its sidebar has.\n  const inRail = () => {\n    const sidebar = trigger?.closest('[data-sidebar-collapsed=\"true\"] .k2b-app-workspace__sidebar[data-workspace-collapsible=\"true\"]');\n    const root = sidebar?.closest<HTMLElement>(\"[data-k2b-app-workspace]\");\n    return Boolean(root && getComputedStyle(root).getPropertyValue(\"--k2b-workspace-sidebar-form\").trim() === \"column\");\n  };\n  /** Whether the panel opens above its trigger; chosen on opening and on a viewport resize only. */\n  let above = false;\n  /**\n   * Places the panel beside its trigger. `choose` picks its side again; otherwise it keeps the side, so arriving\n   * options, an error, or a narrowed search never flip it to the other side while it is open.\n   */\n  const place = (choose = false) => {\n    if (!trigger || !panel) return;\n    const rect = trigger.getBoundingClientRect();\n    const viewport = { width: window.innerWidth, height: window.innerHeight };\n    const rail = inRail();\n    // As wide as the sidebar row and never narrower than a menu, so long names keep their words; fixed while open,\n    // so filtering never changes the panel's width.\n    panel.style.setProperty(\"--k2b-sidebar-switcher-width\", `${rail ? 0 : Math.round(rect.width)}px`);\n    if (rail) {\n      panel.style.removeProperty(\"--k2b-sidebar-switcher-room\");\n      panel.style.removeProperty(\"min-height\");\n      panel.style.bottom = \"auto\";\n      const position = dropdownPosition(rect, panel.getBoundingClientRect(), \"right-start\", viewport);\n      panel.style.left = `${position.left}px`;\n      panel.style.top = `${position.top}px`;\n      return;\n    }\n    // Below the trigger, or above it when the panel at its tallest does not fit below and there is more room above,\n    // as in the lower half of the phone menu. Its tallest is its CSS max-height, min(28rem, 80dvh), so the side does\n    // not depend on what the panel shows at the moment. It never covers its trigger: it takes at most the room on its\n    // side, and its list scrolls.\n    const roomBelow = viewport.height - rect.bottom - SWITCHER_GAP - SWITCHER_INSET;\n    const roomAbove = rect.top - SWITCHER_GAP - SWITCHER_INSET;\n    if (choose) {\n      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      above = Math.min(28 * rem, 0.8 * viewport.height) > roomBelow && roomAbove > roomBelow;\n      panel.style.removeProperty(\"min-height\");\n    }\n    const room = Math.max(0, above ? roomAbove : roomBelow);\n    panel.style.setProperty(\"--k2b-sidebar-switcher-room\", `${room}px`);\n    panel.style.left = `${dropdownPosition(rect, panel.getBoundingClientRect(), \"bottom-right\", viewport).left}px`;\n    if (above) {\n      // Its bottom edge stays beside the trigger, and it does not shrink while open, so a narrowed search keeps the\n      // search field where the person is typing.\n      const height = Math.min(room, Math.max(panel.getBoundingClientRect().height, Number.parseFloat(panel.style.minHeight) || 0));\n      panel.style.minHeight = `${height}px`;\n      panel.style.top = \"auto\";\n      panel.style.bottom = `${document.documentElement.clientHeight - rect.top + SWITCHER_GAP}px`;\n    } else {\n      panel.style.top = `${rect.bottom + SWITCHER_GAP}px`;\n      panel.style.bottom = \"auto\";\n    }\n  };\n  const reposition = () => open() && place();\n  const resize = () => open() && place(true);\n  // Arriving options, an error, or the search field grow the panel after it opened, so its size places it too.\n  // The trigger changes size when a host turns the rail into the expanded overlay, without a window resize.\n  let resizing: ResizeObserver | undefined;\n  const listen = (on: boolean) => {\n    const method = on ? \"addEventListener\" : \"removeEventListener\";\n    window[method](\"resize\", resize);\n    window[method](\"scroll\", reposition, true);\n    if (on && panel) {\n      resizing ??= new ResizeObserver(reposition);\n      resizing.observe(panel);\n      if (trigger) resizing.observe(trigger);\n    } else resizing?.disconnect();\n  };\n  // Server rendering cleans up too, where no window exists.\n  onCleanup(() => isServer || listen(false));\n  /** Lets the host dismiss its menu first, then opens the link or runs the action unless the host cancels. */\n  const choose = (run: () => void) => {\n    hide(false);\n    if (!props.beforeSelect) return run();\n    void Promise.resolve(props.beforeSelect()).then((allowed) => {\n      if (allowed !== false) run();\n    });\n  };\n  const follow = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {\n    if (!plainClick(event)) return;\n    if (!props.beforeSelect) return hide(false);\n    event.preventDefault();\n    const href = event.currentTarget.href;\n    choose(() => documentNavigate(href));\n  };\n\n  const rows = () => (panel ? Array.from(panel.querySelectorAll<HTMLElement>(\"[data-switcher-row]:not([aria-disabled='true'])\")) : []);\n  const focusRow = (index: number) => {\n    const all = rows();\n    if (all.length) all[(index + all.length) % all.length]?.focus();\n  };\n  const show = (focus: \"start\" | \"end\" = \"start\") => {\n    if (!panel || panel.matches(\":popover-open\")) return;\n    load();\n    keyboardOpened = ringOnReturn(trigger);\n    setQuery(\"\");\n    panel.showPopover();\n    setOpen(true);\n    listen(true);\n    place(true);\n    queueMicrotask(() => {\n      // On touch the search field waits for a tap, so the keyboard does not cover the list on opening.\n      if (searchable() && focus === \"start\" && !window.matchMedia(\"(pointer: coarse)\").matches) search?.focus();\n      else if (focus === \"end\") focusRow(-1);\n      // While the list loads, the panel holds focus, so arriving rows do not move it.\n      else (panel?.querySelector<HTMLElement>('[aria-current=\"true\"]') ?? (props.options ? rows()[0] : panel))?.focus();\n    });\n  };\n  const hide = (restoreFocus: boolean) => {\n    if (restoreFocus) returnFocus(trigger, keyboardOpened);\n    if (panel?.matches(\":popover-open\")) panel.hidePopover();\n  };\n\n  const onPanelKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const all = rows();\n    const index = all.indexOf(target);\n    if (event.key === \"Escape\") {\n      // The panel closes alone; an overlay sidebar around it stays open.\n      event.preventDefault();\n      event.stopPropagation();\n      hide(true);\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusRow(index + (event.key === \"ArrowDown\" ? 1 : -1));\n    } else if ((event.key === \"Home\" || event.key === \"End\") && target !== search) {\n      event.preventDefault();\n      focusRow(event.key === \"Home\" ? 0 : -1);\n    } else if (event.key === \"Enter\" && target === search) {\n      event.preventDefault();\n      panel?.querySelector<HTMLElement>(\"[data-switcher-option]\")?.click();\n    } else if (\n      search &&\n      target !== search &&\n      event.key.length === 1 &&\n      event.key !== \" \" &&\n      !(event.metaKey || event.ctrlKey || event.altKey)\n    ) {\n      // Typing anywhere in a long list searches it.\n      event.preventDefault();\n      setQuery(query() + event.key);\n      search.focus();\n    }\n  };\n\n  return (\n    <div class={`k2b-sidebar-switcher ${props.class ?? \"\"}`} data-description={props.description ? \"\" : undefined}>\n      <button\n        ref={trigger}\n        type=\"button\"\n        class=\"k2b-sidebar-switcher__trigger\"\n        aria-label={props.label}\n        aria-describedby={`${id}-purpose`}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open()}\n        aria-controls={id}\n        // The full name for a truncated title and for the icon in a collapsed rail.\n        title={props.label}\n        onPointerEnter={load}\n        onFocus={load}\n        onPointerDown={() => (openAtPress = panel?.matches(\":popover-open\"))}\n        onClick={() => {\n          const wasOpen = openAtPress ?? panel?.matches(\":popover-open\");\n          openAtPress = undefined;\n          if (wasOpen) hide(false);\n          else show();\n        }}\n        onKeyDown={(event) => {\n          if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n          event.preventDefault();\n          if (open()) focusRow(event.key === \"ArrowDown\" ? 0 : -1);\n          else show(event.key === \"ArrowDown\" ? \"start\" : \"end\");\n        }}\n      >\n        <span class=\"k2b-sidebar-switcher__icon\" style={tint(props.color)} aria-hidden=\"true\">\n          <i class={iconClass(props.icon)} />\n        </span>\n        <span class=\"k2b-sidebar-switcher__copy\" aria-hidden=\"true\">\n          <span>{props.label}</span>\n          <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n        </span>\n        <i class=\"ti ti-selector k2b-sidebar-switcher__chevron\" aria-hidden=\"true\" />\n        <span id={`${id}-purpose`} class=\"k2b-sr-only\">\n          {[props.description, props.switchLabel].filter(Boolean).join(\", \")}\n        </span>\n      </button>\n      <div\n        ref={panel}\n        id={id}\n        popover=\"auto\"\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-label={props.switchLabel}\n        class=\"k2b-sidebar-switcher__panel\"\n        onKeyDown={onPanelKeyDown}\n        onFocusOut={(event) => {\n          const next = event.relatedTarget as Node | null;\n          // Tabbing out closes the panel; focus that leaves the window keeps it.\n          if (next && !panel?.contains(next) && next !== trigger) hide(false);\n        }}\n        onToggle={(event) => {\n          if ((event as ToggleEvent).newState === \"open\") return;\n          setOpen(false);\n          listen(false);\n        }}\n      >\n        <Show when={searchable()}>\n          <div class=\"k2b-choice-search k2b-sidebar-switcher__search\">\n            <i class=\"ti ti-search\" aria-hidden=\"true\" />\n            <input\n              ref={search}\n              type=\"search\"\n              data-switcher-row\n              value={query()}\n              placeholder={messages().search}\n              aria-label={messages().searchLabel}\n              aria-controls={`${id}-options`}\n              onInput={(event) => setQuery(event.currentTarget.value)}\n            />\n          </div>\n        </Show>\n        <ul id={`${id}-options`} class=\"k2b-sidebar-switcher__options\">\n          <Show\n            when={props.options}\n            fallback={\n              <li class=\"k2b-choice-status\" role=\"status\" data-tone={props.error ? \"danger\" : undefined}>\n                <Show\n                  when={props.error}\n                  fallback={\n                    <>\n                      <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n                      <span>{messages().loading}</span>\n                    </>\n                  }\n                >\n                  {(error) => (\n                    <>\n                      <span>{error()}</span>\n                      <button type=\"button\" data-switcher-row onClick={() => props.onLoad?.()}>\n                        {messages().retry}\n                      </button>\n                    </>\n                  )}\n                </Show>\n              </li>\n            }\n          >\n            <For\n              each={visible()}\n              fallback={\n                <li class=\"k2b-choice-status\" role=\"status\">\n                  {messages().noResults}\n                </li>\n              }\n            >\n              {(option) => {\n                const current = () => option.id === props.currentId;\n                return (\n                  <li>\n                    <a\n                      href={option.href}\n                      class=\"k2b-dropdown__item k2b-sidebar-switcher__option\"\n                      data-switcher-row\n                      data-switcher-option\n                      aria-current={current() ? \"true\" : undefined}\n                      onClick={(event) => {\n                        // The open container is already here: choosing it only closes the panel.\n                        if (current() && plainClick(event)) {\n                          event.preventDefault();\n                          hide(true);\n                        } else follow(event);\n                      }}\n                    >\n                      <span class=\"k2b-sidebar-switcher__option-icon\" style={tint(option.color ?? props.color)} aria-hidden=\"true\">\n                        <i class={iconClass(option.icon ?? props.icon)} />\n                      </span>\n                      <span class=\"k2b-dropdown__copy\">\n                        <span>{option.label}</span>\n                        <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                      </span>\n                      <i class=\"ti ti-check k2b-dropdown__check\" data-hidden={current() ? undefined : \"true\"} aria-hidden=\"true\" />\n                    </a>\n                  </li>\n                );\n              }}\n            </For>\n          </Show>\n        </ul>\n        <Show when={props.actions?.length}>\n          <ul class=\"k2b-sidebar-switcher__actions\">\n            <For each={props.actions}>\n              {(item) => (\n                <li>\n                  <Show\n                    when={item.href}\n                    fallback={\n                      <button\n                        type=\"button\"\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        disabled={item.disabled}\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={() => choose(() => item.action?.())}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </button>\n                    }\n                  >\n                    {(href) => (\n                      <a\n                        href={item.disabled ? undefined : href()}\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={(event) => item.disabled || follow(event)}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </a>\n                    )}\n                  </Show>\n                </li>\n              )}\n            </For>\n          </ul>\n        </Show>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/layout/TabBar.js

@@ -14,7 +14,7 @@ const TAB_BAR_MAX_ITEMS = 5;
  * tab switches at the first touch: the shell shows the item's `title` while its page loads.
  */
 export function TabBar(props) {
-  return _$ssr(_tmpl$, _$ssrAttribute("class", props.class ? `k2b-tab-bar ${_$escape(props.class, true)}` : "k2b-tab-bar", false) + _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$, _$ssrAttribute("class", props.class ? `k2b-tab-bar ${_$escape(props.class, true)}` : "k2b-tab-bar", false) + _$ssrAttribute("aria-label", _$escape(props.label, true), false) + _$ssrAttribute("data-variant", props.variant === "floating" ? "floating" : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
     get each() {
       return props.items.slice(0, TAB_BAR_MAX_ITEMS);
     },

package/dist/ssr/layout/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/TabBar.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\n\nexport type TabBarItem = {\n  id: string;\n  label: string;\n  /** Icon class, for example `ti ti-home`. */\n  icon: string;\n  href: string;\n  /** The header title of the page this item opens, shown while that page loads. Defaults to `label`. */\n  title?: string;\n  /** The page this item leads to is open. */\n  current?: boolean;\n};\n\nexport type TabBarProps = {\n  /** Accessible name of the navigation landmark. */\n  label: string;\n  /** Up to five destinations; further items are not rendered. Put the rest behind a \"More\" destination. */\n  items: readonly TabBarItem[];\n  class?: string;\n};\n\n/** A phone app's bottom navigation holds at most five destinations. */\nconst TAB_BAR_MAX_ITEMS = 5;\n\n/**\n * Bottom navigation between a phone app's top-level pages: native links with equal widths, an icon above each label,\n * and `aria-current=\"page\"` on the open page. Place it in `MobileShell`'s footer; it pads the bottom safe area. There a\n * tab switches at the first touch: the shell shows the item's `title` while its page loads.\n */\nexport function TabBar(props: TabBarProps): JSX.Element {\n  return (\n    <nav class={props.class ? `k2b-tab-bar ${props.class}` : \"k2b-tab-bar\"} aria-label={props.label}>\n      <ul>\n        <For each={props.items.slice(0, TAB_BAR_MAX_ITEMS)}>\n          {(item) => (\n            <li>\n              <a\n                href={item.href}\n                aria-current={item.current ? \"page\" : undefined}\n                data-tab={item.id}\n                data-k2b-title={item.title ?? item.label}\n              >\n                <i class={item.icon} aria-hidden=\"true\" />\n                <span>{item.label}</span>\n              </a>\n            </li>\n          )}\n        </For>\n      </ul>\n    </nav>\n  );\n}\n\nexport default TabBar;\n"],"mappings":";;;;;;AAAA,SAAS,GAAG,QAAkB,UAAU;AAsBxC;AACA,MAAM,iBAAiB,GAAG,CAAC;;AAE3B;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,6CACc,KAAK,CAAC,KAAK,GAAG,wBAAe,KAAK,CAAC,KAAK,SAAE,GAAG,aAAa,iDAAc,KAAK,CAAC,KAAK,4CAE1F,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC;IAAA;IAAA,UAC9C,IAAI,mDAGM,IAAI,CAAC,IAAI,iDACD,IAAI,CAAC,OAAO,GAAG,MAAM,YAAG,SAAS,sDACrC,IAAI,CAAC,EAAE,4DACD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,kDAE9B,IAAI,CAAC,IAAI,0BACZ,IAAI,CAAC,KAAK;EAGtB;AAKX;AAEA,eAAe,MAAM","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/TabBar.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\n\nexport type TabBarItem = {\n  id: string;\n  label: string;\n  /** Icon class, for example `ti ti-home`. */\n  icon: string;\n  href: string;\n  /** The header title of the page this item opens, shown while that page loads. Defaults to `label`. */\n  title?: string;\n  /** The page this item leads to is open. */\n  current?: boolean;\n};\n\nexport type TabBarProps = {\n  /** Accessible name of the navigation landmark. */\n  label: string;\n  /** Up to five destinations; further items are not rendered. Put the rest behind a \"More\" destination. */\n  items: readonly TabBarItem[];\n  /**\n   * `bar` (the default) is flat on the page canvas and pads the bottom safe area. `floating` is a rounded bar that the\n   * host places above the content, away from the safe areas; its open item is a raised chip. The host may paint it\n   * with `--k2b-tab-bar-background`, color its items with `--k2b-tab-bar-color`, and color the open item with\n   * `--k2b-tab-bar-selected-background` and `--k2b-tab-bar-selected-color`.\n   */\n  variant?: \"bar\" | \"floating\";\n  class?: string;\n};\n\n/** A phone app's bottom navigation holds at most five destinations. */\nconst TAB_BAR_MAX_ITEMS = 5;\n\n/**\n * Bottom navigation between a phone app's top-level pages: native links with equal widths, an icon above each label,\n * and `aria-current=\"page\"` on the open page. Place it in `MobileShell`'s footer; it pads the bottom safe area. There a\n * tab switches at the first touch: the shell shows the item's `title` while its page loads.\n */\nexport function TabBar(props: TabBarProps): JSX.Element {\n  return (\n    <nav\n      class={props.class ? `k2b-tab-bar ${props.class}` : \"k2b-tab-bar\"}\n      aria-label={props.label}\n      data-variant={props.variant === \"floating\" ? \"floating\" : undefined}\n    >\n      <ul>\n        <For each={props.items.slice(0, TAB_BAR_MAX_ITEMS)}>\n          {(item) => (\n            <li>\n              <a\n                href={item.href}\n                aria-current={item.current ? \"page\" : undefined}\n                data-tab={item.id}\n                data-k2b-title={item.title ?? item.label}\n              >\n                <i class={item.icon} aria-hidden=\"true\" />\n                <span>{item.label}</span>\n              </a>\n            </li>\n          )}\n        </For>\n      </ul>\n    </nav>\n  );\n}\n\nexport default TabBar;\n"],"mappings":";;;;;;AAAA,SAAS,GAAG,QAAkB,UAAU;AA6BxC;AACA,MAAM,iBAAiB,GAAG,CAAC;;AAE3B;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,6CAEW,KAAK,CAAC,KAAK,GAAG,wBAAe,KAAK,CAAC,KAAK,SAAE,GAAG,aAAa,iDACrD,KAAK,CAAC,KAAK,iDACT,KAAK,CAAC,OAAO,KAAK,UAAU,GAAG,UAAU,YAAG,SAAS,4CAGhE,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC;IAAA;IAAA,UAC9C,IAAI,mDAGM,IAAI,CAAC,IAAI,iDACD,IAAI,CAAC,OAAO,GAAG,MAAM,YAAG,SAAS,sDACrC,IAAI,CAAC,EAAE,4DACD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,kDAE9B,IAAI,CAAC,IAAI,0BACZ,IAAI,CAAC,KAAK;EAGtB;AAKX;AAEA,eAAe,MAAM","ignoreList":[]}