@k2b/ui 0.50.0 → 0.52.0

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 { type DialogTone, dialogToneIcon, dialogToneLabel } from \"../feedback/dialog-tone\";\nimport { sharedPrompts } from \"../feedback/prompt-confirm\";\nimport { resolvePromptMessages } from \"../feedback/prompt-messages\";\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  /** A 2 px edge in the tone's colour inside the dialog frame; the header shows the tone's icon instead of its own. */\n  tone?: DialogTone;\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);\nconst PanelDialogToneContext = createContext<() => DialogTone | undefined>(() => undefined);\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 sharedPrompts.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  const tone = useContext(PanelDialogToneContext);\n  const icon = () => {\n    const value = tone();\n    return value ? dialogToneIcon(value) : props.icon;\n  };\n  return (\n    <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()} data-has-subtitle={Boolean(props.subtitle)}>\n      <Show when={icon()}>\n        {(icon) => (\n          <span class=\"k2b-panel-dialog__icon k2b-icon-tile\" data-tone={tone()} aria-hidden=\"true\">\n            <i class={icon()} />\n          </span>\n        )}\n      </Show>\n      <div class=\"k2b-panel-dialog__heading\">\n        <Show when={tone()}>\n          {(value) => (\n            <span class=\"k2b-sr-only\" data-dialog-tone-label>\n              {dialogToneLabel(messages(), value())}\n            </span>\n          )}\n        </Show>\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      <PanelDialogToneContext.Provider value={() => props.tone}>\n        <div class=\"k2b-panel-dialog\" data-surface={surface} data-tone={props.tone}>\n          {props.children}\n        </div>\n      </PanelDialogToneContext.Provider>\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 { type DialogTone, dialogToneIcon, dialogToneLabel } from \"../feedback/dialog-tone\";\nimport { sharedPrompts } from \"../feedback/prompt-confirm\";\nimport { resolvePromptMessages } from \"../feedback/prompt-messages\";\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  /** A 2 px edge in the tone's colour inside the dialog frame; the header shows the tone's icon instead of its own. */\n  tone?: DialogTone;\n  /**\n   * The body shows a picture or a video edge to edge, and the header floats over it as glass chips: the title and\n   * subtitle in one chip, the actions in a group, and the close button. For documents, text, and tables leave it off.\n   */\n  media?: boolean;\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);\nconst PanelDialogToneContext = createContext<() => DialogTone | undefined>(() => undefined);\nconst PanelDialogMediaContext = createContext(false);\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 sharedPrompts.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  const tone = useContext(PanelDialogToneContext);\n  const icon = () => {\n    const value = tone();\n    return value ? dialogToneIcon(value) : props.icon;\n  };\n  // Over a picture the header's parts are glass layers of their own; the dialog owns them, so it sets the surface.\n  const media = useContext(PanelDialogMediaContext);\n  const layer = media ? \" k2b-overlay-surface\" : \"\";\n  return (\n    <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()} data-has-subtitle={Boolean(props.subtitle)}>\n      <Show when={icon() && !media}>\n        <span class=\"k2b-panel-dialog__icon k2b-icon-tile\" data-tone={tone()} aria-hidden=\"true\">\n          <i class={icon()} />\n        </span>\n      </Show>\n      <div class={`k2b-panel-dialog__heading${layer}`}>\n        <Show when={tone()}>\n          {(value) => (\n            <span class=\"k2b-sr-only\" data-dialog-tone-label>\n              {dialogToneLabel(messages(), value())}\n            </span>\n          )}\n        </Show>\n        <h2 class={media ? \"k2b-truncate-fade\" : undefined}>{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${layer}`}>{props.actions}</div>\n      </Show>\n      <Show when={props.close}>\n        <button\n          type=\"button\"\n          class={`k2b-dialog__close${layer}`}\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      <PanelDialogToneContext.Provider value={() => props.tone}>\n        <PanelDialogMediaContext.Provider value={Boolean(props.media)}>\n          <div class=\"k2b-panel-dialog\" data-surface={surface} data-tone={props.tone} data-media={props.media ? \"\" : undefined}>\n            {props.children}\n          </div>\n        </PanelDialogMediaContext.Provider>\n      </PanelDialogToneContext.Provider>\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/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/index.ts"],"sourcesContent":["export { AnchoredPopover, type AnchoredPopoverProps } from \"./AnchoredPopover\";\nexport type {\n  AppOverviewCardsProps,\n  AppOverviewEmptyStateProps,\n  AppOverviewPanelProps,\n  AppOverviewProps,\n} from \"./AppOverview\";\nexport { default as AppOverview } from \"./AppOverview\";\nexport type {\n  AppWorkspaceBottomDrawerHeight,\n  AppWorkspaceBottomDrawerProps,\n  AppWorkspaceContentProps,\n  AppWorkspaceDetailProps,\n  AppWorkspaceDetailWidth,\n  AppWorkspaceHeadProps,\n  AppWorkspaceLevelSwitcher,\n  AppWorkspaceMainPaneProps,\n  AppWorkspaceMainProps,\n  AppWorkspaceNavTreeItemProps,\n  AppWorkspaceNavTreeMove,\n  AppWorkspaceNavTreeProps,\n  AppWorkspaceProps,\n  AppWorkspaceSidebarAccessoryVisibility,\n  AppWorkspaceSidebarBodyProps,\n  AppWorkspaceSidebarIconActionProps,\n  AppWorkspaceSidebarIconActionTone,\n  AppWorkspaceSidebarIconGridProps,\n  AppWorkspaceSidebarItemActionProps,\n  AppWorkspaceSidebarItemActionsProps,\n  AppWorkspaceSidebarItemIconProps,\n  AppWorkspaceSidebarItemLabelProps,\n  AppWorkspaceSidebarItemMetaProps,\n  AppWorkspaceSidebarItemProps,\n  AppWorkspaceSidebarItemStatusProps,\n  AppWorkspaceSidebarItemTone,\n  AppWorkspaceSidebarProps,\n  AppWorkspaceSidebarSectionProps,\n  AppWorkspaceSidebarVisibility,\n  AppWorkspaceWidthShare,\n} from \"./AppWorkspace\";\nexport { appWorkspaceDetailElementId, default as AppWorkspace } from \"./AppWorkspace\";\nexport { AppWorkspaceSidebarItemStatus } from \"./AppWorkspaceSidebarItemStatus\";\nexport { watchAppHostWidth } from \"./app-host-width\";\nexport type { AppWorkspaceControllerOptions } from \"./app-workspace-controller\";\nexport { installAppWorkspaceController, parkWorkspaceDetailDrawers } from \"./app-workspace-controller\";\nexport type {\n  AppWorkspaceLayoutState,\n  AppWorkspaceResizeKind,\n} from \"./app-workspace-state\";\nexport {\n  APP_WORKSPACE_DETAIL_DEFAULT,\n  APP_WORKSPACE_DETAIL_MAX,\n  APP_WORKSPACE_DETAIL_MIN,\n  APP_WORKSPACE_DRAWER_DEFAULT,\n  APP_WORKSPACE_DRAWER_MAX,\n  APP_WORKSPACE_DRAWER_MIN,\n  APP_WORKSPACE_MAIN_MIN,\n  APP_WORKSPACE_MAIN_MIN_HEIGHT,\n  APP_WORKSPACE_PANE_DEFAULT,\n  APP_WORKSPACE_PANE_MAX,\n  APP_WORKSPACE_PANE_MIN,\n  APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD,\n  APP_WORKSPACE_SIDEBAR_COLLAPSED,\n  APP_WORKSPACE_SIDEBAR_DEFAULT,\n  APP_WORKSPACE_SIDEBAR_MAX,\n  APP_WORKSPACE_SIDEBAR_MIN,\n  appWorkspaceLayoutStyle,\n  appWorkspacePanelVariable,\n  appWorkspaceResizeLimits,\n  normalizeAppWorkspaceLayoutState,\n  parseAppWorkspaceLayoutState,\n  resolveAppWorkspaceSidebarWidth,\n  safeAppWorkspacePanelId,\n  serializeAppWorkspaceLayoutState,\n  shouldCollapseAppWorkspaceSidebar,\n} from \"./app-workspace-state\";\nexport { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from \"./BottomSheet\";\nexport type { DataPanelProps } from \"./DataPanel\";\nexport { DataPanel } from \"./DataPanel\";\nexport type {\n  DetailPanelActionButtonProps,\n  DetailPanelActionLinkProps,\n  DetailPanelActionProps,\n  DetailPanelActionSecondary,\n  DetailPanelBodyProps,\n  DetailPanelGroupProps,\n  DetailPanelHeaderProps,\n  DetailPanelProps,\n  DetailPanelRowProps,\n  DetailPanelSectionProps,\n  DetailPanelSummaryProps,\n  DetailPanelTone,\n} from \"./DetailPanel\";\nexport { default as DetailPanel } from \"./DetailPanel\";\nexport type {\n  DetailAccessEntry,\n  DetailAccessProps,\n  DetailLinkItem,\n  DetailLinksProps,\n  DetailPresencePerson,\n  DetailPresenceProps,\n  DetailPresenceState,\n  DetailPropertiesProps,\n  DetailProperty,\n  DetailTag,\n  DetailTagsProps,\n} from \"./DetailSections\";\nexport { DetailAccess, DetailLinks, DetailPresence, DetailPresenceSlot, DetailProperties, DetailTags } from \"./DetailSections\";\nexport { DETAILS_ICON, DetailsToggle, type DetailsToggleProps } from \"./DetailsToggle\";\nexport type { DiscussionComposerProps, DiscussionItemProps, DiscussionListProps, DiscussionProps } from \"./Discussion\";\nexport { default as Discussion } from \"./Discussion\";\nexport type {\n  FloatingWindowClose,\n  FloatingWindowProps,\n  OpenFloatingWindowOptions,\n} from \"./FloatingWindow\";\nexport {\n  default as FloatingWindow,\n  type FloatingWindowRect,\n  fitFloatingWindowRect,\n  openFloatingWindow,\n} from \"./FloatingWindow\";\nexport type { MobileShellHeaderProps, MobileShellProps, MobileShellSidebarItem, MobileShellSidebarProps } from \"./MobileShell\";\nexport { default as MobileShell, observeMobileShell } from \"./MobileShell\";\nexport { default as Navigation, type NavigationProps } from \"./Navigation\";\nexport {\n  createNavigation,\n  findNavigationItem,\n  type NavigationController,\n  type NavigationItem,\n  type NavigationOptions,\n  type NavigationStatus,\n} from \"./navigation-model\";\nexport type { PageTitleProps, PageTrailLink, PageTrailState } from \"./PageTitle\";\nexport { followPageTrail, PAGE_TRAIL_EVENT, PageTitle, PageTrailProvider, readPageTrail, setPageTrail, usePageTrail } from \"./PageTitle\";\nexport type {\n  PanelDialogBodyProps,\n  PanelDialogFooterProps,\n  PanelDialogHeaderProps,\n  PanelDialogProps,\n  PanelDialogSectionProps,\n  PanelDialogSurface,\n  PanelDialogTabOption,\n  PanelDialogTabsProps,\n} from \"./PanelDialog\";\nexport {\n  confirmDiscardIfDirty,\n  default as PanelDialog,\n  panelDialogFixedOptions,\n  panelDialogFixedPanelClass,\n  panelDialogOptions,\n  panelDialogPanelClass,\n  panelDialogWideOptions,\n  panelDialogWidePanelClass,\n  panelDialogWorkspaceOptions,\n  panelDialogWorkspacePanelClass,\n} from \"./PanelDialog\";\nexport type { PanelHeaderProps } from \"./PanelHeader\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport type { PanesItem, PanesProps } from \"./Panes\";\nexport { default as Panes } from \"./Panes\";\nexport type { PullToRefreshProps, PullToRefreshState } from \"./PullToRefresh\";\nexport { default as PullToRefresh } from \"./PullToRefresh\";\nexport { installPageTitleController } from \"./page-title-controller\";\nexport type {\n  AddPanesItemOptions,\n  PanesDirection,\n  PanesGroup,\n  PanesIntent,\n  PanesLayout,\n  PanesNode,\n  PanesPath,\n  PanesPathSegment,\n  PanesSide,\n  PanesSplit,\n} from \"./panes-layout\";\nexport {\n  activatePanesItem,\n  addPanesItem,\n  applyPanesIntent,\n  createPanesLayout,\n  isPanesItemVisible,\n  PANES_LAYOUT_VERSION,\n  parsePanesLayout,\n  reconcilePanesLayout,\n  removePanesItem,\n  resizePanesSplit,\n} from \"./panes-layout\";\nexport { default as ResizeSeparator, type ResizeSeparatorProps } from \"./ResizeSeparator\";\nexport { attachResizeSeparator, type ResizeSeparatorOptions } from \"./resize-separator\";\nexport type { ScrollAreaProps } from \"./ScrollArea\";\nexport { default as ScrollArea } from \"./ScrollArea\";\nexport type {\n  SaveStatusProps,\n  SaveStatusState,\n  SettingsFieldControlProps,\n  SettingsFieldProps,\n  SettingsFieldWidth,\n  SettingsGroupActionProps,\n  SettingsGroupProps,\n  SettingsPageProps,\n  SettingsPanelFooterProps,\n  SettingsSaveBarProps,\n  SettingsSectionProps,\n} from \"./Settings\";\nexport {\n  readSettingsError,\n  SaveStatus,\n  SettingsField,\n  SettingsGroup,\n  SettingsPage,\n  SettingsPanelFooter,\n  SettingsSaveBar,\n  SettingsSection,\n  sameSettingValue,\n} from \"./Settings\";\nexport type {\n  SettingsCollectionActionProps,\n  SettingsCollectionItemActionsProps,\n  SettingsCollectionItemProps,\n  SettingsCollectionItemReorderProps,\n  SettingsCollectionItemStatusProps,\n  SettingsCollectionProps,\n} from \"./SettingsCollection\";\nexport { default as SettingsCollection } from \"./SettingsCollection\";\nexport type {\n  SettingsModalFooterProps,\n  SettingsModalGroupProps,\n  SettingsModalProps,\n  SettingsModalTabProps,\n  SettingsModalTabTone,\n} from \"./SettingsModal\";\nexport { default as SettingsModal } from \"./SettingsModal\";\nexport {\n  APP_WORKSPACE_SWITCHER_SEARCH_FROM,\n  type AppWorkspaceSidebarSwitcherProps,\n  type AppWorkspaceSwitcherAction,\n  type AppWorkspaceSwitcherOption,\n} from \"./SidebarSwitcher\";\nexport { measureScrollFade } from \"./scroll-fade\";\nexport { attachSheetHandle, type SheetHandleOptions } from \"./sheet-handle\";\nexport type { TabBarItem, TabBarProps } from \"./TabBar\";\nexport { default as TabBar } from \"./TabBar\";\nexport type { TableOfContentsItem, TableOfContentsProps } from \"./TableOfContents\";\nexport { TableOfContents } from \"./TableOfContents\";\n"],"mappings":"AAAA,SAAS,eAAe,QAAmC,mBAAmB;AAO9E,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAiCtD,SAAS,2BAA2B,EAAE,OAAO,IAAI,YAAY,QAAQ,gBAAgB;AACrF,SAAS,6BAA6B,QAAQ,iCAAiC;AAC/E,SAAS,iBAAiB,QAAQ,kBAAkB;AAEpD,SAAS,6BAA6B,EAAE,0BAA0B,QAAQ,4BAA4B;AAKtG,SACE,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,wCAAwC,EACxC,+BAA+B,EAC/B,6BAA6B,EAC7B,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,gCAAgC,EAChC,4BAA4B,EAC5B,+BAA+B,EAC/B,uBAAuB,EACvB,gCAAgC,EAChC,iCAAiC,QAC5B,uBAAuB;AAC9B,SAAgC,0BAA0B,EAAE,kBAAkB,EAAE,OAAO,IAAI,WAAW,QAAQ,eAAe;AAE7H,SAAS,SAAS,QAAQ,aAAa;AAevC,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AActD,SAAS,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,UAAU,QAAQ,kBAAkB;AAC9H,SAAS,YAAY,EAAE,aAAa,QAAiC,iBAAiB;AAEtF,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAMpD,SACE,OAAO,IAAI,cAAc,EAEzB,qBAAqB,EACrB,kBAAkB,QACb,kBAAkB;AAEzB,SAAS,OAAO,IAAI,WAAW,EAAE,kBAAkB,QAAQ,eAAe;AAC1E,SAAS,OAAO,IAAI,UAAU,QAA8B,cAAc;AAC1E,SACE,gBAAgB,EAChB,kBAAkB,QAKb,oBAAoB;AAE3B,SAAS,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,QAAQ,aAAa;AAWxI,SACE,qBAAqB,EACrB,OAAO,IAAI,WAAW,EACtB,uBAAuB,EACvB,0BAA0B,EAC1B,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,EACzB,2BAA2B,EAC3B,8BAA8B,QACzB,eAAe;AAEtB,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,OAAO,IAAI,KAAK,QAAQ,SAAS;AAE1C,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SAAS,0BAA0B,QAAQ,yBAAyB;AAapE,SACE,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,QACX,gBAAgB;AACvB,SAAS,OAAO,IAAI,eAAe,QAAmC,mBAAmB;AACzF,SAAS,qBAAqB,QAAqC,oBAAoB;AAEvF,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAcpD,SACE,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,gBAAgB,QACX,YAAY;AASnB,SAAS,OAAO,IAAI,kBAAkB,QAAQ,sBAAsB;AAQpE,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SACE,kCAAkC,QAI7B,mBAAmB;AAC1B,SAAS,iBAAiB,QAAQ,eAAe;AACjD,SAAS,iBAAiB,QAAiC,gBAAgB;AAE3E,SAAS,OAAO,IAAI,MAAM,QAAQ,UAAU;AAE5C,SAAS,eAAe,QAAQ,mBAAmB","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/index.ts"],"sourcesContent":["export { AnchoredPopover, type AnchoredPopoverProps } from \"./AnchoredPopover\";\nexport type {\n  AppOverviewCardsProps,\n  AppOverviewEmptyStateProps,\n  AppOverviewPanelProps,\n  AppOverviewProps,\n} from \"./AppOverview\";\nexport { default as AppOverview } from \"./AppOverview\";\nexport type {\n  AppWorkspaceBottomDrawerHeight,\n  AppWorkspaceBottomDrawerProps,\n  AppWorkspaceContentProps,\n  AppWorkspaceDetailProps,\n  AppWorkspaceDetailWidth,\n  AppWorkspaceHeadProps,\n  AppWorkspaceLevelSwitcher,\n  AppWorkspaceMainPaneProps,\n  AppWorkspaceMainProps,\n  AppWorkspaceNavTreeItemProps,\n  AppWorkspaceNavTreeMove,\n  AppWorkspaceNavTreeProps,\n  AppWorkspaceProps,\n  AppWorkspaceSidebarAccessoryVisibility,\n  AppWorkspaceSidebarBodyProps,\n  AppWorkspaceSidebarIconActionProps,\n  AppWorkspaceSidebarIconActionTone,\n  AppWorkspaceSidebarIconGridProps,\n  AppWorkspaceSidebarItemActionProps,\n  AppWorkspaceSidebarItemActionsProps,\n  AppWorkspaceSidebarItemIconProps,\n  AppWorkspaceSidebarItemLabelProps,\n  AppWorkspaceSidebarItemMetaProps,\n  AppWorkspaceSidebarItemProps,\n  AppWorkspaceSidebarItemStatusProps,\n  AppWorkspaceSidebarItemTone,\n  AppWorkspaceSidebarProps,\n  AppWorkspaceSidebarSectionProps,\n  AppWorkspaceSidebarVisibility,\n  AppWorkspaceWidthShare,\n} from \"./AppWorkspace\";\nexport { appWorkspaceDetailElementId, default as AppWorkspace } from \"./AppWorkspace\";\nexport { AppWorkspaceSidebarItemStatus } from \"./AppWorkspaceSidebarItemStatus\";\nexport { watchAppHostWidth } from \"./app-host-width\";\nexport type { AppWorkspaceControllerOptions } from \"./app-workspace-controller\";\nexport { installAppWorkspaceController, parkWorkspaceDetailDrawers } from \"./app-workspace-controller\";\nexport type {\n  AppWorkspaceLayoutState,\n  AppWorkspaceResizeKind,\n} from \"./app-workspace-state\";\nexport {\n  APP_WORKSPACE_DETAIL_DEFAULT,\n  APP_WORKSPACE_DETAIL_MAX,\n  APP_WORKSPACE_DETAIL_MIN,\n  APP_WORKSPACE_DRAWER_DEFAULT,\n  APP_WORKSPACE_DRAWER_MAX,\n  APP_WORKSPACE_DRAWER_MIN,\n  APP_WORKSPACE_MAIN_MIN,\n  APP_WORKSPACE_MAIN_MIN_HEIGHT,\n  APP_WORKSPACE_PANE_DEFAULT,\n  APP_WORKSPACE_PANE_MAX,\n  APP_WORKSPACE_PANE_MIN,\n  APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD,\n  APP_WORKSPACE_SIDEBAR_COLLAPSED,\n  APP_WORKSPACE_SIDEBAR_DEFAULT,\n  APP_WORKSPACE_SIDEBAR_MAX,\n  APP_WORKSPACE_SIDEBAR_MIN,\n  appWorkspaceLayoutStyle,\n  appWorkspacePanelVariable,\n  appWorkspaceResizeLimits,\n  normalizeAppWorkspaceLayoutState,\n  parseAppWorkspaceLayoutState,\n  resolveAppWorkspaceSidebarWidth,\n  safeAppWorkspacePanelId,\n  serializeAppWorkspaceLayoutState,\n  shouldCollapseAppWorkspaceSidebar,\n} from \"./app-workspace-state\";\nexport { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from \"./BottomSheet\";\nexport type { DataPanelProps } from \"./DataPanel\";\nexport { DataPanel } from \"./DataPanel\";\nexport type {\n  DetailPanelActionButtonProps,\n  DetailPanelActionCheckbox,\n  DetailPanelActionLinkProps,\n  DetailPanelActionProps,\n  DetailPanelActionSecondary,\n  DetailPanelBodyProps,\n  DetailPanelGroupProps,\n  DetailPanelHeaderProps,\n  DetailPanelProps,\n  DetailPanelRowProps,\n  DetailPanelSectionProps,\n  DetailPanelSummaryProps,\n  DetailPanelTone,\n} from \"./DetailPanel\";\nexport { default as DetailPanel } from \"./DetailPanel\";\nexport type {\n  DetailAccessEntry,\n  DetailAccessProps,\n  DetailLinkItem,\n  DetailLinksProps,\n  DetailPresencePerson,\n  DetailPresenceProps,\n  DetailPresenceState,\n  DetailPropertiesProps,\n  DetailProperty,\n  DetailTag,\n  DetailTagsProps,\n} from \"./DetailSections\";\nexport { DetailAccess, DetailLinks, DetailPresence, DetailPresenceSlot, DetailProperties, DetailTags } from \"./DetailSections\";\nexport { DETAILS_ICON, DetailsToggle, type DetailsToggleProps } from \"./DetailsToggle\";\nexport type { DiscussionComposerProps, DiscussionItemProps, DiscussionListProps, DiscussionProps } from \"./Discussion\";\nexport { default as Discussion } from \"./Discussion\";\nexport type {\n  FloatingWindowClose,\n  FloatingWindowProps,\n  OpenFloatingWindowOptions,\n} from \"./FloatingWindow\";\nexport {\n  default as FloatingWindow,\n  type FloatingWindowRect,\n  fitFloatingWindowRect,\n  openFloatingWindow,\n} from \"./FloatingWindow\";\nexport type { MobileShellHeaderProps, MobileShellProps, MobileShellSidebarItem, MobileShellSidebarProps } from \"./MobileShell\";\nexport { default as MobileShell, observeMobileShell } from \"./MobileShell\";\nexport { default as Navigation, type NavigationProps } from \"./Navigation\";\nexport {\n  createNavigation,\n  findNavigationItem,\n  type NavigationController,\n  type NavigationItem,\n  type NavigationOptions,\n  type NavigationStatus,\n} from \"./navigation-model\";\nexport type { PageTitleProps, PageTrailLink, PageTrailState } from \"./PageTitle\";\nexport { followPageTrail, PAGE_TRAIL_EVENT, PageTitle, PageTrailProvider, readPageTrail, setPageTrail, usePageTrail } from \"./PageTitle\";\nexport type {\n  PanelDialogBodyProps,\n  PanelDialogFooterProps,\n  PanelDialogHeaderProps,\n  PanelDialogProps,\n  PanelDialogSectionProps,\n  PanelDialogSurface,\n  PanelDialogTabOption,\n  PanelDialogTabsProps,\n} from \"./PanelDialog\";\nexport {\n  confirmDiscardIfDirty,\n  default as PanelDialog,\n  panelDialogFixedOptions,\n  panelDialogFixedPanelClass,\n  panelDialogOptions,\n  panelDialogPanelClass,\n  panelDialogWideOptions,\n  panelDialogWidePanelClass,\n  panelDialogWorkspaceOptions,\n  panelDialogWorkspacePanelClass,\n} from \"./PanelDialog\";\nexport type { PanelHeaderProps } from \"./PanelHeader\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport type { PanesItem, PanesProps } from \"./Panes\";\nexport { default as Panes } from \"./Panes\";\nexport type { PullToRefreshProps, PullToRefreshState } from \"./PullToRefresh\";\nexport { default as PullToRefresh } from \"./PullToRefresh\";\nexport { installPageTitleController } from \"./page-title-controller\";\nexport type {\n  AddPanesItemOptions,\n  PanesDirection,\n  PanesGroup,\n  PanesIntent,\n  PanesLayout,\n  PanesNode,\n  PanesPath,\n  PanesPathSegment,\n  PanesSide,\n  PanesSplit,\n} from \"./panes-layout\";\nexport {\n  activatePanesItem,\n  addPanesItem,\n  applyPanesIntent,\n  createPanesLayout,\n  isPanesItemVisible,\n  PANES_LAYOUT_VERSION,\n  parsePanesLayout,\n  reconcilePanesLayout,\n  removePanesItem,\n  resizePanesSplit,\n} from \"./panes-layout\";\nexport { default as ResizeSeparator, type ResizeSeparatorProps } from \"./ResizeSeparator\";\nexport { attachResizeSeparator, type ResizeSeparatorOptions } from \"./resize-separator\";\nexport type { ScrollAreaProps } from \"./ScrollArea\";\nexport { default as ScrollArea } from \"./ScrollArea\";\nexport type {\n  SaveStatusProps,\n  SaveStatusState,\n  SettingsFieldControlProps,\n  SettingsFieldProps,\n  SettingsFieldWidth,\n  SettingsGroupActionProps,\n  SettingsGroupProps,\n  SettingsPageProps,\n  SettingsPanelFooterProps,\n  SettingsSaveBarProps,\n  SettingsSectionProps,\n} from \"./Settings\";\nexport {\n  readSettingsError,\n  SaveStatus,\n  SettingsField,\n  SettingsGroup,\n  SettingsPage,\n  SettingsPanelFooter,\n  SettingsSaveBar,\n  SettingsSection,\n  sameSettingValue,\n} from \"./Settings\";\nexport type {\n  SettingsCollectionActionProps,\n  SettingsCollectionItemActionsProps,\n  SettingsCollectionItemProps,\n  SettingsCollectionItemReorderProps,\n  SettingsCollectionItemStatusProps,\n  SettingsCollectionProps,\n} from \"./SettingsCollection\";\nexport { default as SettingsCollection } from \"./SettingsCollection\";\nexport type {\n  SettingsModalFooterProps,\n  SettingsModalGroupProps,\n  SettingsModalProps,\n  SettingsModalTabProps,\n  SettingsModalTabTone,\n} from \"./SettingsModal\";\nexport { default as SettingsModal } from \"./SettingsModal\";\nexport {\n  APP_WORKSPACE_SWITCHER_SEARCH_FROM,\n  type AppWorkspaceSidebarSwitcherProps,\n  type AppWorkspaceSwitcherAction,\n  type AppWorkspaceSwitcherOption,\n} from \"./SidebarSwitcher\";\nexport { measureScrollFade } from \"./scroll-fade\";\nexport { attachSheetHandle, type SheetHandleOptions } from \"./sheet-handle\";\nexport type { TabBarItem, TabBarProps } from \"./TabBar\";\nexport { default as TabBar } from \"./TabBar\";\nexport type { TableOfContentsItem, TableOfContentsProps } from \"./TableOfContents\";\nexport { TableOfContents } from \"./TableOfContents\";\n"],"mappings":"AAAA,SAAS,eAAe,QAAmC,mBAAmB;AAO9E,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAiCtD,SAAS,2BAA2B,EAAE,OAAO,IAAI,YAAY,QAAQ,gBAAgB;AACrF,SAAS,6BAA6B,QAAQ,iCAAiC;AAC/E,SAAS,iBAAiB,QAAQ,kBAAkB;AAEpD,SAAS,6BAA6B,EAAE,0BAA0B,QAAQ,4BAA4B;AAKtG,SACE,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,4BAA4B,EAC5B,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,wCAAwC,EACxC,+BAA+B,EAC/B,6BAA6B,EAC7B,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,gCAAgC,EAChC,4BAA4B,EAC5B,+BAA+B,EAC/B,uBAAuB,EACvB,gCAAgC,EAChC,iCAAiC,QAC5B,uBAAuB;AAC9B,SAAgC,0BAA0B,EAAE,kBAAkB,EAAE,OAAO,IAAI,WAAW,QAAQ,eAAe;AAE7H,SAAS,SAAS,QAAQ,aAAa;AAgBvC,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AActD,SAAS,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,UAAU,QAAQ,kBAAkB;AAC9H,SAAS,YAAY,EAAE,aAAa,QAAiC,iBAAiB;AAEtF,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAMpD,SACE,OAAO,IAAI,cAAc,EAEzB,qBAAqB,EACrB,kBAAkB,QACb,kBAAkB;AAEzB,SAAS,OAAO,IAAI,WAAW,EAAE,kBAAkB,QAAQ,eAAe;AAC1E,SAAS,OAAO,IAAI,UAAU,QAA8B,cAAc;AAC1E,SACE,gBAAgB,EAChB,kBAAkB,QAKb,oBAAoB;AAE3B,SAAS,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,QAAQ,aAAa;AAWxI,SACE,qBAAqB,EACrB,OAAO,IAAI,WAAW,EACtB,uBAAuB,EACvB,0BAA0B,EAC1B,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,EACzB,2BAA2B,EAC3B,8BAA8B,QACzB,eAAe;AAEtB,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,OAAO,IAAI,KAAK,QAAQ,SAAS;AAE1C,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SAAS,0BAA0B,QAAQ,yBAAyB;AAapE,SACE,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,QACX,gBAAgB;AACvB,SAAS,OAAO,IAAI,eAAe,QAAmC,mBAAmB;AACzF,SAAS,qBAAqB,QAAqC,oBAAoB;AAEvF,SAAS,OAAO,IAAI,UAAU,QAAQ,cAAc;AAcpD,SACE,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,gBAAgB,QACX,YAAY;AASnB,SAAS,OAAO,IAAI,kBAAkB,QAAQ,sBAAsB;AAQpE,SAAS,OAAO,IAAI,aAAa,QAAQ,iBAAiB;AAC1D,SACE,kCAAkC,QAI7B,mBAAmB;AAC1B,SAAS,iBAAiB,QAAQ,eAAe;AACjD,SAAS,iBAAiB,QAAiC,gBAAgB;AAE3E,SAAS,OAAO,IAAI,MAAM,QAAQ,UAAU;AAE5C,SAAS,eAAe,QAAQ,mBAAmB","ignoreList":[]}

package/dist/ssr/surfaces/DescriptionList.js

@@ -9,7 +9,7 @@ import { For, Show } from "solid-js";
 /** Semantic key-value content with predictable responsive density. */
 export function DescriptionList(props) {
   const columns = () => Math.max(1, Math.min(3, props.columns ?? 1));
-  return _$ssr(_tmpl$, `k2b-description-list ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-columns", _$escape(columns(), true), false) + _$ssrAttribute("data-layout", _$escape(props.layout ?? "grid", true), false) + _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-action-visibility", _$escape(props.actionVisibility ?? "always", true), false), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$, `k2b-description-list ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-columns", _$escape(columns(), true), false) + _$ssrAttribute("data-layout", _$escape(props.layout ?? "grid", true), false) + _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-action-visibility", _$escape(props.actionVisibility ?? "always", true), false) + _$ssrAttribute("data-leader", _$escape(props.leader, true), false), _$escape(_$createComponent(For, {
     get each() {
       return props.items;
     },

package/dist/ssr/surfaces/DescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/DescriptionList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\n\nexport type DescriptionListItem = {\n  term: JSX.Element;\n  description: JSX.Element;\n  action?: JSX.Element;\n};\n\nexport type DescriptionListProps = {\n  items: readonly DescriptionListItem[];\n  columns?: 1 | 2 | 3;\n  layout?: \"grid\" | \"rows\" | \"compact\";\n  size?: \"sm\" | \"md\";\n  actionVisibility?: \"always\" | \"progressive\";\n  class?: string;\n};\n\n/** Semantic key-value content with predictable responsive density. */\nexport function DescriptionList(props: DescriptionListProps): JSX.Element {\n  const columns = () => Math.max(1, Math.min(3, props.columns ?? 1));\n  return (\n    <dl\n      class={`k2b-description-list ${props.class ?? \"\"}`}\n      data-columns={columns()}\n      data-layout={props.layout ?? \"grid\"}\n      data-size={props.size ?? \"md\"}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n    >\n      <For each={props.items}>\n        {(item) => (\n          <div class=\"k2b-description-list__item\">\n            <dt>{item.term}</dt>\n            <dd>{item.description}</dd>\n            <Show when={item.action}>{(action) => <div class=\"k2b-description-list__action\">{action()}</div>}</Show>\n          </div>\n        )}\n      </For>\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"mappings":";;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;AAiB9C;AACA,OAAO,SAAS,eAAe,CAAC,KAA2B,EAAe;EACxE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;EAClE,qBAEW,iCAAwB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,0CACpC,OAAO,CAAC,CAAC,yDACV,KAAK,CAAC,MAAM,IAAI,MAAM,uDACxB,KAAK,CAAC,IAAI,IAAI,IAAI,oEACL,KAAK,CAAC,gBAAgB,IAAI,QAAQ,4CAEzD,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,UAClB,IAAI,4BAEG,IAAI,CAAC,IAAI,YACT,IAAI,CAAC,WAAW,8BACpB,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,IAAI,CAAC,MAAM;MAAA;MAAA,UAAI,MAAM,4BAAgD,MAAM,CAAC,CAAC;IAAO;EAEnG;AAIT;AAEA,eAAe,eAAe","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/DescriptionList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\n\nexport type DescriptionListItem = {\n  term: JSX.Element;\n  description: JSX.Element;\n  action?: JSX.Element;\n};\n\nexport type DescriptionListProps = {\n  items: readonly DescriptionListItem[];\n  columns?: 1 | 2 | 3;\n  layout?: \"grid\" | \"rows\" | \"compact\";\n  size?: \"sm\" | \"md\";\n  actionVisibility?: \"always\" | \"progressive\";\n  /**\n   * Joins each term to its right-aligned value with a dotted leader, for `rows` or `compact` lists that must span a\n   * very wide container. A fallback, never the default: first keep rows within the row measure.\n   */\n  leader?: \"dotted\";\n  class?: string;\n};\n\n/** Semantic key-value content with predictable responsive density. */\nexport function DescriptionList(props: DescriptionListProps): JSX.Element {\n  const columns = () => Math.max(1, Math.min(3, props.columns ?? 1));\n  return (\n    <dl\n      class={`k2b-description-list ${props.class ?? \"\"}`}\n      data-columns={columns()}\n      data-layout={props.layout ?? \"grid\"}\n      data-size={props.size ?? \"md\"}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      data-leader={props.leader}\n    >\n      <For each={props.items}>\n        {(item) => (\n          <div class=\"k2b-description-list__item\">\n            <dt>{item.term}</dt>\n            <dd>{item.description}</dd>\n            <Show when={item.action}>{(action) => <div class=\"k2b-description-list__action\">{action()}</div>}</Show>\n          </div>\n        )}\n      </For>\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"mappings":";;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;AAsB9C;AACA,OAAO,SAAS,eAAe,CAAC,KAA2B,EAAe;EACxE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;EAClE,qBAEW,iCAAwB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,0CACpC,OAAO,CAAC,CAAC,yDACV,KAAK,CAAC,MAAM,IAAI,MAAM,uDACxB,KAAK,CAAC,IAAI,IAAI,IAAI,oEACL,KAAK,CAAC,gBAAgB,IAAI,QAAQ,yDAC7C,KAAK,CAAC,MAAM,4CAExB,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,UAClB,IAAI,4BAEG,IAAI,CAAC,IAAI,YACT,IAAI,CAAC,WAAW,8BACpB,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,IAAI,CAAC,MAAM;MAAA;MAAA,UAAI,MAAM,4BAAgD,MAAM,CAAC,CAAC;IAAO;EAEnG;AAIT;AAEA,eAAe,eAAe","ignoreList":[]}

package/dist/ssr/surfaces/StatCell.js

@@ -12,16 +12,17 @@ var _tmpl$ = ["<div class=\"k2b-stat-cell__head\">", "<span class=\"k2b-stat-cel
   _tmpl$7 = ["<div class=\"k2b-stat-cell__support\">", "</div>"],
   _tmpl$8 = ["<span class=\"k2b-stat-cell__icon k2b-icon-tile\"", " aria-hidden=\"true\"><i", "></i></span>"],
   _tmpl$9 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$0 = ["<span class=\"k2b-stat-cell__sub\">", " ", "</span>"],
-  _tmpl$1 = ["<span class=\"k2b-stat-cell__sub\">", "</span>"],
-  _tmpl$10 = ["<i class=\"", "\"", " aria-hidden=\"true\"></i>"],
-  _tmpl$11 = ["<span class=\"k2b-stat-cell__accent\"", "><i", " aria-hidden=\"true\"></i>", "</span>"],
-  _tmpl$12 = ["<span class=\"k2b-stat-cell__stale\"><i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\"></i>", "</span>"],
-  _tmpl$13 = ["<button type=\"button\" class=\"k2b-stat-cell__retry\">", "</button>"],
-  _tmpl$14 = ["<a", " class=\"k2b-stat-cell k2b-stat-cell--link\"", "><i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\"></i>", "</a>"],
-  _tmpl$15 = ["<div class=\"k2b-stat-cell\"", ">", "</div>"];
+  _tmpl$0 = ["<span role=\"img\"", ">—</span>"],
+  _tmpl$1 = ["<span class=\"k2b-stat-cell__sub\">", " ", "</span>"],
+  _tmpl$10 = ["<span class=\"k2b-stat-cell__sub\">", "</span>"],
+  _tmpl$11 = ["<i class=\"", "\"", " aria-hidden=\"true\"></i>"],
+  _tmpl$12 = ["<span class=\"k2b-stat-cell__accent\"", "><i", " aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$13 = ["<span class=\"k2b-stat-cell__stale\"><i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$14 = ["<button type=\"button\" class=\"k2b-stat-cell__retry\">", "</button>"],
+  _tmpl$15 = ["<a", " class=\"k2b-stat-cell k2b-stat-cell--link\"", "><i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\"></i>", "</a>"],
+  _tmpl$16 = ["<div class=\"k2b-stat-cell\"", ">", "</div>"];
 import { Match, Show, Switch } from "solid-js";
-import Chart from "../content/Chart";
+import { ChartSparkline } from "../content/ChartSparkline";
 import { useLocale } from "../intl/locale";
 import { DeltaBadge } from "./delta-badge";
 import { useStatGridSize, useStatGridSurface } from "./StatGrid";
@@ -66,7 +67,17 @@ function Body(props) {
     children: icon => _$ssr(_tmpl$8, _$ssrAttribute("data-tone", _$escape(props.tone ?? "zinc", true), false), _$ssrAttribute("class", _$escape(icon(), true), false))
   })), _$ssrAttribute("data-size", _$escape(size(), true), false), _$escape(props.label)), _$ssr(_tmpl$5, _$escape(_$createComponent(Switch, {
     get fallback() {
-      return [_$ssr(_tmpl$9, `k2b-stat-cell__value ${_$escape(props.valueClass ?? "", true)}`, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-empty", _$escape(empty() || undefined, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), empty() ? "–" : _$escape(props.value)), _$createComponent(Show, {
+      return [_$ssr(_tmpl$9, `k2b-stat-cell__value ${_$escape(props.valueClass ?? "", true)}`, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-empty", _$escape(empty() || undefined, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return !empty();
+        },
+        get fallback() {
+          return _$ssr(_tmpl$0, _$ssrAttribute("aria-label", _$escape(t().noValue, true), false));
+        },
+        get children() {
+          return props.value;
+        }
+      }))), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!!empty())() && props.delta;
         },
@@ -108,12 +119,12 @@ function Body(props) {
             get when() {
               return props.compare;
             },
-            children: compare => _$ssr(_tmpl$0, _$escape(compare().label), _$escape(compareValue()))
+            children: compare => _$ssr(_tmpl$1, _$escape(compare().label), _$escape(compareValue()))
           }), _$createComponent(Show, {
             get when() {
               return props.sub;
             },
-            children: sub => _$ssr(_tmpl$1, _$escape(sub()))
+            children: sub => _$ssr(_tmpl$10, _$escape(sub()))
           }), _$createComponent(Show, {
             get when() {
               return accent();
@@ -123,17 +134,16 @@ function Body(props) {
                 return value().text;
               },
               get fallback() {
-                return _$ssr(_tmpl$10, `${_$escape(value().icon, true)} k2b-stat-cell__accent-icon`, _$ssrAttribute("data-tone", _$escape(value().tone, true), false));
+                return _$ssr(_tmpl$11, `${_$escape(value().icon, true)} k2b-stat-cell__accent-icon`, _$ssrAttribute("data-tone", _$escape(value().tone, true), false));
               },
-              children: text => _$ssr(_tmpl$11, _$ssrAttribute("data-tone", _$escape(value().tone, true), false), _$ssrAttribute("class", _$escape(value().icon, true), false), _$escape(text()))
+              children: text => _$ssr(_tmpl$12, _$ssrAttribute("data-tone", _$escape(value().tone, true), false), _$ssrAttribute("class", _$escape(value().icon, true), false), _$escape(text()))
             })
           }), _$createComponent(Show, {
             get when() {
               return _$memo(() => !!(!empty() && props.trend))() && props.trend.length > 1;
             },
             get children() {
-              return _$createComponent(Chart, {
-                kind: "sparkline",
+              return _$createComponent(ChartSparkline, {
                 get labels() {
                   return {
                     interactiveChart: props.label
@@ -151,11 +161,11 @@ function Body(props) {
             }
           })];
         },
-        children: stale => [_$ssr(_tmpl$12, _$escape(stale())), _$createComponent(Show, {
+        children: stale => [_$ssr(_tmpl$13, _$escape(stale())), _$createComponent(Show, {
           get when() {
             return props.onRetry;
           },
-          children: retry => _$ssr(_tmpl$13, _$escape(t().reload))
+          children: retry => _$ssr(_tmpl$14, _$escape(t().reload))
         })]
       });
     },
@@ -176,7 +186,7 @@ function Body(props) {
             get when() {
               return props.onRetry;
             },
-            children: retry => _$ssr(_tmpl$13, _$escape(t().retry))
+            children: retry => _$ssr(_tmpl$14, _$escape(t().retry))
           });
         }
       })];
@@ -199,10 +209,10 @@ export function StatCell(props) {
       return _$memo(() => !!(props.href && !props.status))() && !(props.stale && props.onRetry);
     },
     get fallback() {
-      return _$ssr(_tmpl$15, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false) + _$ssrAttribute("data-status", _$escape(props.status, true), false) + _$ssrAttribute("aria-busy", _$escape(props.status === "loading" || undefined, true), false), _$escape(_$createComponent(Body, props)));
+      return _$ssr(_tmpl$16, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false) + _$ssrAttribute("data-delta-placement", _$escape(props.deltaPlacement, true), false) + _$ssrAttribute("data-status", _$escape(props.status, true), false) + _$ssrAttribute("aria-busy", _$escape(props.status === "loading" || undefined, true), false), _$escape(_$createComponent(Body, props)));
     },
     get children() {
-      return _$ssr(_tmpl$14, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false), _$escape(_$createComponent(Body, props)));
+      return _$ssr(_tmpl$15, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false) + _$ssrAttribute("data-delta-placement", _$escape(props.deltaPlacement, true), false), _$escape(_$createComponent(Body, props)));
     }
   });
 }

package/dist/ssr/surfaces/StatCell.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Match, Show, Switch } from \"solid-js\";\nimport Chart from \"../content/Chart\";\nimport type { ChartTooltipFormatter } from \"../content/chart-inspection-core\";\nimport { useLocale } from \"../intl/locale\";\nimport type { AccentColor } from \"../semantics\";\nimport { DeltaBadge } from \"./delta-badge\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\nimport { useStatCellMessages } from \"./stat-cell-messages\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\n/**\n * The change against a comparison period. `unit: \"ratio\"` (default) reads `0.082` as `+8.2 %`; `\"points\"` is the\n * difference of two shares in ratio units, so `0.031` reads `+3.1 pts`. Only with `better` does the badge carry a tone\n * and say \"better\" or \"worse\"; without it the change stays unrated.\n */\nexport type StatCellDelta = {\n  value: number;\n  unit?: \"ratio\" | \"points\";\n  better?: \"up\" | \"down\";\n};\n\n/** The value the change compares against, shown under the figure, such as \"Last month 44,560\". */\nexport type StatCellCompare = {\n  label: string;\n  value: string | number;\n};\n\nexport type StatCellSize = StatGridSize;\n\nexport type StatCellProps = {\n  label: string;\n  /** The figure. `null` shows the empty dash; `sub` then says why. */\n  value: string | number | JSX.Element | null;\n  sub?: string;\n  valueClass?: string;\n  /** An icon in a chip before the label, in `tone`. `\"in\"` and `\"out\"` are the money colours of `FlowAmount`. */\n  icon?: string;\n  /** The chip colour of `icon`. Defaults to zinc. */\n  tone?: StatCellTone | \"in\" | \"out\";\n  accent?: StatCellAccent;\n  delta?: StatCellDelta;\n  compare?: StatCellCompare;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  /**\n   * Replaces the default trend tooltip in browser code, for example with a period title or a unit.\n   * `selection.datum.index` is the source index into `trend`.\n   */\n  trendTooltip?: ChartTooltipFormatter;\n  size?: StatCellSize;\n  /**\n   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\n  /** `\"loading\"` keeps the tile's size with placeholders; `\"error\"` says the figure did not load. */\n  status?: \"loading\" | \"error\";\n  /** Offers \"Try again\" after an error and \"Reload\" beside `stale`. */\n  onRetry?: () => void;\n  /** The figure is not current: a short note such as \"As of 09:12 · not current\" replaces the support line. */\n  stale?: string;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const defaultTrendTooltip: ChartTooltipFormatter = ({ datum }) => {\n    const y = datum.values.find((field) => field.key === \"y\")?.value ?? \"\";\n    return {\n      rows: [\n        { label: props.label, value: typeof y === \"number\" ? new Intl.NumberFormat(locale(), { maximumFractionDigits: 6 }).format(y) : y },\n      ],\n    };\n  };\n  const compareValue = () => {\n    const value = props.compare?.value;\n    return typeof value === \"number\" ? new Intl.NumberFormat(locale()).format(value) : value;\n  };\n  const empty = () => props.value === null || props.value === undefined || props.value === \"\";\n  return (\n    <>\n      <div class=\"k2b-stat-cell__head\">\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-stat-cell__icon k2b-icon-tile\" data-tone={props.tone ?? \"zinc\"} aria-hidden=\"true\">\n              <i class={icon()} />\n            </span>\n          )}\n        </Show>\n        <span class=\"k2b-stat-cell__label\" data-size={size()}>\n          {props.label}\n        </span>\n      </div>\n      <div class=\"k2b-stat-cell__main\">\n        <Switch\n          fallback={\n            <>\n              <span\n                class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`}\n                data-size={size()}\n                data-empty={empty() || undefined}\n                title={props.title}\n              >\n                {empty() ? \"–\" : props.value}\n              </span>\n              <Show when={!empty() && props.delta}>{(delta) => <DeltaBadge delta={delta()} compare={props.compare} />}</Show>\n            </>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"value\" aria-hidden=\"true\" />\n            <span class=\"k2b-sr-only\">{t().loading}</span>\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <span class=\"k2b-stat-cell__error\">\n              <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" />\n              {t().notLoaded}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <div class=\"k2b-stat-cell__support\">\n        <Switch\n          fallback={\n            <Show\n              when={props.stale}\n              fallback={\n                <>\n                  <Show when={props.compare}>\n                    {(compare) => (\n                      <span class=\"k2b-stat-cell__sub\">\n                        {compare().label} {compareValue()}\n                      </span>\n                    )}\n                  </Show>\n                  <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n                  <Show when={accent()}>\n                    {(value) => (\n                      <Show\n                        when={value().text}\n                        fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n                      >\n                        {(text) => (\n                          <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                            <i class={value().icon} aria-hidden=\"true\" />\n                            {text()}\n                          </span>\n                        )}\n                      </Show>\n                    )}\n                  </Show>\n                  {/* No figure, no trend: an empty tile says why in `sub` and keeps the size of its other states. */}\n                  <Show when={!empty() && props.trend && props.trend.length > 1}>\n                    <Chart\n                      kind=\"sparkline\"\n                      labels={{ interactiveChart: props.label }}\n                      tooltip={props.trendTooltip ?? defaultTrendTooltip}\n                      class=\"k2b-stat-cell__trend\"\n                      data={Array.from(props.trend ?? [])}\n                      showLast\n                    />\n                  </Show>\n                </>\n              }\n            >\n              {(stale) => (\n                <>\n                  <span class=\"k2b-stat-cell__stale\">\n                    <i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\" />\n                    {stale()}\n                  </span>\n                  <Show when={props.onRetry}>\n                    {(retry) => (\n                      <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                        {t().reload}\n                      </button>\n                    )}\n                  </Show>\n                </>\n              )}\n            </Show>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"support\" aria-hidden=\"true\" />\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <Show when={props.onRetry}>\n              {(retry) => (\n                <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                  {t().retry}\n                </button>\n              )}\n            </Show>\n          </Match>\n        </Switch>\n      </div>\n    </>\n  );\n}\n\n/**\n * One key figure as a framed tile: icon and label, the figure with its change, and a support line with the comparison\n * and the trend. Each state (loading, error, stale, empty) keeps the tile's place and size.\n */\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      // A tile that offers a retry is no link: the button must not sit inside it.\n      when={props.href && !props.status && !(props.stale && props.onRetry)}\n      fallback={\n        <div\n          class=\"k2b-stat-cell\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n          data-status={props.status}\n          aria-busy={props.status === \"loading\" || undefined}\n        >\n          <Body {...props} />\n        </div>\n      }\n    >\n      <a\n        href={props.href}\n        class=\"k2b-stat-cell k2b-stat-cell--link\"\n        data-size={size()}\n        data-surface={surface}\n        data-wrap={props.wrap || undefined}\n      >\n        <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n        <Body {...props} />\n      </a>\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Match, Show, Switch } from \"solid-js\";\nimport type { ChartNumberFormat } from \"../charts/description\";\nimport { ChartSparkline } from \"../content/ChartSparkline\";\nimport type { ChartTooltipFormatter } from \"../content/chart-inspection-core\";\nimport { useLocale } from \"../intl/locale\";\nimport type { AccentColor } from \"../semantics\";\nimport { DeltaBadge } from \"./delta-badge\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\nimport { useStatCellMessages } from \"./stat-cell-messages\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\n/**\n * The change against a comparison period. `unit: \"ratio\"` (default) reads `0.082` as `+8.2 %`; `\"points\"` is the\n * difference of two shares in ratio units, so `0.031` reads `+3.1 pts`. Only with `better` does the badge carry a tone\n * and say \"better\" or \"worse\"; without it the change stays unrated.\n */\nexport type StatCellDelta = {\n  value: number;\n  unit?: \"ratio\" | \"points\" | \"absolute\";\n  /** Existing measures can express a change in their own unit instead of a ratio. */\n  format?: ChartNumberFormat;\n  better?: \"up\" | \"down\";\n};\n\n/** The value the change compares against, shown under the figure, such as \"Last month 44,560\". */\nexport type StatCellCompare = {\n  label: string;\n  value: string | number;\n};\n\nexport type StatCellSize = StatGridSize;\n\nexport type StatCellProps = {\n  label: string;\n  /** The figure. `null` shows the empty dash; `sub` then says why. */\n  value: string | number | JSX.Element | null;\n  sub?: string;\n  valueClass?: string;\n  /** An icon in a chip before the label, in `tone`. `\"in\"` and `\"out\"` are the money colours of `FlowAmount`. */\n  icon?: string;\n  /** The chip colour of `icon`. Defaults to zinc. */\n  tone?: StatCellTone | \"in\" | \"out\";\n  accent?: StatCellAccent;\n  delta?: StatCellDelta;\n  /** Keep the figure and change on separate rows, including while loading. Defaults to beside the figure. */\n  deltaPlacement?: \"below\";\n  compare?: StatCellCompare;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  /**\n   * Replaces the default trend tooltip in browser code, for example with a period title or a unit.\n   * `selection.datum.index` is the source index into `trend`.\n   */\n  trendTooltip?: ChartTooltipFormatter;\n  size?: StatCellSize;\n  /**\n   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\n  /** `\"loading\"` keeps the tile's size with placeholders; `\"error\"` says the figure did not load. */\n  status?: \"loading\" | \"error\";\n  /** Offers \"Try again\" after an error and \"Reload\" beside `stale`. */\n  onRetry?: () => void;\n  /** The figure is not current: a short note such as \"As of 09:12 · not current\" replaces the support line. */\n  stale?: string;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const defaultTrendTooltip: ChartTooltipFormatter = ({ datum }) => {\n    const y = datum.values.find((field) => field.key === \"y\")?.value ?? \"\";\n    return {\n      rows: [\n        { label: props.label, value: typeof y === \"number\" ? new Intl.NumberFormat(locale(), { maximumFractionDigits: 6 }).format(y) : y },\n      ],\n    };\n  };\n  const compareValue = () => {\n    const value = props.compare?.value;\n    return typeof value === \"number\" ? new Intl.NumberFormat(locale()).format(value) : value;\n  };\n  const empty = () => props.value === null || props.value === undefined || props.value === \"\";\n  return (\n    <>\n      <div class=\"k2b-stat-cell__head\">\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-stat-cell__icon k2b-icon-tile\" data-tone={props.tone ?? \"zinc\"} aria-hidden=\"true\">\n              <i class={icon()} />\n            </span>\n          )}\n        </Show>\n        <span class=\"k2b-stat-cell__label\" data-size={size()}>\n          {props.label}\n        </span>\n      </div>\n      <div class=\"k2b-stat-cell__main\">\n        <Switch\n          fallback={\n            <>\n              <span\n                class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`}\n                data-size={size()}\n                data-empty={empty() || undefined}\n                title={props.title}\n              >\n                {/* A missing figure is the shared empty dash, named for screen readers instead of read as a dash. */}\n                <Show\n                  when={!empty()}\n                  fallback={\n                    <span role=\"img\" aria-label={t().noValue}>\n                      —\n                    </span>\n                  }\n                >\n                  {props.value}\n                </Show>\n              </span>\n              <Show when={!empty() && props.delta}>{(delta) => <DeltaBadge delta={delta()} compare={props.compare} />}</Show>\n            </>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"value\" aria-hidden=\"true\" />\n            <span class=\"k2b-sr-only\">{t().loading}</span>\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <span class=\"k2b-stat-cell__error\">\n              <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" />\n              {t().notLoaded}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <div class=\"k2b-stat-cell__support\">\n        <Switch\n          fallback={\n            <Show\n              when={props.stale}\n              fallback={\n                <>\n                  <Show when={props.compare}>\n                    {(compare) => (\n                      <span class=\"k2b-stat-cell__sub\">\n                        {compare().label} {compareValue()}\n                      </span>\n                    )}\n                  </Show>\n                  <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n                  <Show when={accent()}>\n                    {(value) => (\n                      <Show\n                        when={value().text}\n                        fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n                      >\n                        {(text) => (\n                          <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                            <i class={value().icon} aria-hidden=\"true\" />\n                            {text()}\n                          </span>\n                        )}\n                      </Show>\n                    )}\n                  </Show>\n                  {/* No figure, no trend: an empty tile says why in `sub` and keeps the size of its other states. */}\n                  <Show when={!empty() && props.trend && props.trend.length > 1}>\n                    <ChartSparkline\n                      labels={{ interactiveChart: props.label }}\n                      tooltip={props.trendTooltip ?? defaultTrendTooltip}\n                      class=\"k2b-stat-cell__trend\"\n                      data={Array.from(props.trend ?? [])}\n                      showLast\n                    />\n                  </Show>\n                </>\n              }\n            >\n              {(stale) => (\n                <>\n                  <span class=\"k2b-stat-cell__stale\">\n                    <i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\" />\n                    {stale()}\n                  </span>\n                  <Show when={props.onRetry}>\n                    {(retry) => (\n                      <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                        {t().reload}\n                      </button>\n                    )}\n                  </Show>\n                </>\n              )}\n            </Show>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"support\" aria-hidden=\"true\" />\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <Show when={props.onRetry}>\n              {(retry) => (\n                <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                  {t().retry}\n                </button>\n              )}\n            </Show>\n          </Match>\n        </Switch>\n      </div>\n    </>\n  );\n}\n\n/**\n * One key figure as a framed tile: icon and label, the figure with its change, and a support line with the comparison\n * and the trend. Each state (loading, error, stale, empty) keeps the tile's place and size.\n */\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      // A tile that offers a retry is no link: the button must not sit inside it.\n      when={props.href && !props.status && !(props.stale && props.onRetry)}\n      fallback={\n        <div\n          class=\"k2b-stat-cell\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n          data-delta-placement={props.deltaPlacement}\n          data-status={props.status}\n          aria-busy={props.status === \"loading\" || undefined}\n        >\n          <Body {...props} />\n        </div>\n      }\n    >\n      <a\n        href={props.href}\n        class=\"k2b-stat-cell k2b-stat-cell--link\"\n        data-size={size()}\n        data-surface={surface}\n        data-wrap={props.wrap || undefined}\n        data-delta-placement={props.deltaPlacement}\n      >\n        <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n        <Body {...props} />\n      </a>\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/surfaces/delta-badge.js

@@ -8,14 +8,28 @@ import { useStatCellMessages } from "./stat-cell-messages";
 // The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.
 
 /** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */
-const shownDelta = delta => Math.round(delta.value * 1000) / 1000 || 0;
+const shownDelta = delta => delta.unit === "absolute" ? delta.value || 0 : Math.round(delta.value * 1000) / 1000 || 0;
 const deltaTone = delta => {
   const value = shownDelta(delta);
   return !delta.better || value === 0 ? "neutral" : value > 0 === (delta.better === "up") ? "good" : "bad";
 };
 
 /** Signed with a true minus sign (U+2212), as figures are typeset. */
-export const deltaText = (delta, locale, t) => (delta.unit === "points" ? `${new Intl.NumberFormat(locale, {
+export const deltaText = (delta, locale, t) => (delta.unit === "absolute" ? `${new Intl.NumberFormat(locale, {
+  ...(!delta.format ? {
+    maximumSignificantDigits: 15
+  } : {}),
+  style: delta.format?.style === "number" ? "decimal" : delta.format?.style,
+  currency: delta.format?.currency,
+  ...(delta.format?.decimals === undefined ? {} : {
+    minimumFractionDigits: delta.format.decimals,
+    maximumFractionDigits: delta.format.decimals
+  }),
+  ...(delta.format?.compact ? {
+    notation: "compact"
+  } : {}),
+  signDisplay: "exceptZero"
+}).format(delta.value === 0 ? 0 : delta.value)}${delta.format?.unit ? ` ${delta.format.unit}` : ""}` : delta.unit === "points" ? `${new Intl.NumberFormat(locale, {
   minimumFractionDigits: 1,
   maximumFractionDigits: 1,
   signDisplay: "exceptZero"

package/dist/ssr/surfaces/delta-badge.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/delta-badge.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport type { StatCellCompare, StatCellDelta } from \"./StatCell\";\nimport { type StatCellMessages, useStatCellMessages } from \"./stat-cell-messages\";\n\n// The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.\n\n/** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */\nconst shownDelta = (delta: StatCellDelta): number => Math.round(delta.value * 1000) / 1000 || 0;\n\nconst deltaTone = (delta: StatCellDelta): \"good\" | \"bad\" | \"neutral\" => {\n  const value = shownDelta(delta);\n  return !delta.better || value === 0 ? \"neutral\" : value > 0 === (delta.better === \"up\") ? \"good\" : \"bad\";\n};\n\n/** Signed with a true minus sign (U+2212), as figures are typeset. */\nexport const deltaText = (delta: StatCellDelta, locale: string, t: StatCellMessages): string =>\n  (delta.unit === \"points\"\n    ? `${new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1, signDisplay: \"exceptZero\" }).format(shownDelta(delta) * 100)} ${t.points}`\n    : new Intl.NumberFormat(locale, {\n        style: \"percent\",\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n        signDisplay: \"exceptZero\",\n      }).format(shownDelta(delta))\n  ).replace(\"-\", \"\\u2212\");\n\n/** A change badge: arrow, signed text, and a spoken label that names the comparison and, with `better`, the rating. */\nexport function DeltaBadge(props: { delta: StatCellDelta; compare?: StatCellCompare }): JSX.Element {\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const tone = () => deltaTone(props.delta);\n  const text = () => deltaText(props.delta, locale(), t());\n  const label = () =>\n    [text(), props.compare ? t().comparedWith({ label: props.compare.label }) : \"\"].filter(Boolean).join(\" \") +\n    (tone() === \"good\" ? `, ${t().better}` : tone() === \"bad\" ? `, ${t().worse}` : \"\");\n  const icon = () => (shownDelta(props.delta) > 0 ? \"ti-trending-up\" : shownDelta(props.delta) < 0 ? \"ti-trending-down\" : \"ti-minus\");\n  return (\n    <span class=\"k2b-stat-cell__delta\" data-tone={tone()} role=\"img\" aria-label={label()}>\n      <i class={`ti ${icon()}`} aria-hidden=\"true\" />\n      {text()}\n    </span>\n  );\n}\n"],"mappings":";;;;AACA,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAgC,mBAAmB,QAAQ,sBAAsB;;AAEjF;;AAEA;AACA,MAAM,UAAU,GAAI,KAAoB,IAAa,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC;AAE/F,MAAM,SAAS,GAAI,KAAoB,IAAiC;EACtE,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;EAC/B,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,MAAM,GAAG,KAAK;AAC1G,CAAC;;AAED;AACA,OAAO,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,MAAc,EAAE,CAAmB,KACjF,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,GACpB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;EAAE,qBAAqB,EAAE,CAAC;EAAE,qBAAqB,EAAE,CAAC;EAAE,WAAW,EAAE;AAAa,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,GACjK,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;EAC5B,KAAK,EAAE,SAAS;EAChB,qBAAqB,EAAE,CAAC;EACxB,qBAAqB,EAAE,CAAC;EACxB,WAAW,EAAE;AACf,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAC9B,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC;;AAE1B;AACA,OAAO,SAAS,UAAU,CAAC,KAA0D,EAAe;EAClG,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,MAAM,CAAC,GAAG,mBAAmB,CAAC,CAAC;EAC/B,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;EACzC,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;EACxD,MAAM,KAAK,GAAG,MACZ,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC;EAAM,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACxG,IAAI,CAAC,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,KAAK,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;EACpF,MAAM,IAAI,GAAG,MAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,gBAAgB,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,kBAAkB,GAAG,UAAW;EACnI,0DACgD,IAAI,CAAC,CAAC,uDAAyB,KAAK,CAAC,CAAC,iBACxE,eAAM,IAAI,CAAC,CAAC,SAAE,WACvB,IAAI,CAAC,CAAC;AAGb","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/delta-badge.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport type { StatCellCompare, StatCellDelta } from \"./StatCell\";\nimport { type StatCellMessages, useStatCellMessages } from \"./stat-cell-messages\";\n\n// The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.\n\n/** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */\nconst shownDelta = (delta: StatCellDelta): number =>\n  delta.unit === \"absolute\" ? delta.value || 0 : Math.round(delta.value * 1000) / 1000 || 0;\n\nconst deltaTone = (delta: StatCellDelta): \"good\" | \"bad\" | \"neutral\" => {\n  const value = shownDelta(delta);\n  return !delta.better || value === 0 ? \"neutral\" : value > 0 === (delta.better === \"up\") ? \"good\" : \"bad\";\n};\n\n/** Signed with a true minus sign (U+2212), as figures are typeset. */\nexport const deltaText = (delta: StatCellDelta, locale: string, t: StatCellMessages): string =>\n  (delta.unit === \"absolute\"\n    ? `${new Intl.NumberFormat(locale, {\n        ...(!delta.format ? { maximumSignificantDigits: 15 } : {}),\n        style: delta.format?.style === \"number\" ? \"decimal\" : delta.format?.style,\n        currency: delta.format?.currency,\n        ...(delta.format?.decimals === undefined\n          ? {}\n          : { minimumFractionDigits: delta.format.decimals, maximumFractionDigits: delta.format.decimals }),\n        ...(delta.format?.compact ? { notation: \"compact\" } : {}),\n        signDisplay: \"exceptZero\",\n      }).format(delta.value === 0 ? 0 : delta.value)}${delta.format?.unit ? ` ${delta.format.unit}` : \"\"}`\n    : delta.unit === \"points\"\n      ? `${new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1, signDisplay: \"exceptZero\" }).format(shownDelta(delta) * 100)} ${t.points}`\n      : new Intl.NumberFormat(locale, {\n          style: \"percent\",\n          minimumFractionDigits: 1,\n          maximumFractionDigits: 1,\n          signDisplay: \"exceptZero\",\n        }).format(shownDelta(delta))\n  ).replace(\"-\", \"\\u2212\");\n\n/** A change badge: arrow, signed text, and a spoken label that names the comparison and, with `better`, the rating. */\nexport function DeltaBadge(props: { delta: StatCellDelta; compare?: StatCellCompare }): JSX.Element {\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const tone = () => deltaTone(props.delta);\n  const text = () => deltaText(props.delta, locale(), t());\n  const label = () =>\n    [text(), props.compare ? t().comparedWith({ label: props.compare.label }) : \"\"].filter(Boolean).join(\" \") +\n    (tone() === \"good\" ? `, ${t().better}` : tone() === \"bad\" ? `, ${t().worse}` : \"\");\n  const icon = () => (shownDelta(props.delta) > 0 ? \"ti-trending-up\" : shownDelta(props.delta) < 0 ? \"ti-trending-down\" : \"ti-minus\");\n  return (\n    <span class=\"k2b-stat-cell__delta\" data-tone={tone()} role=\"img\" aria-label={label()}>\n      <i class={`ti ${icon()}`} aria-hidden=\"true\" />\n      {text()}\n    </span>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/surfaces/stat-cell-messages.js

@@ -13,7 +13,8 @@ const statCellMessages = i18n.define({
       notLoaded: "Not loaded",
       retry: "Try again",
       reload: "Reload",
-      loading: "Loading"
+      loading: "Loading",
+      noValue: "No value"
     },
     de: {
       points: "Pkt.",
@@ -25,7 +26,8 @@ const statCellMessages = i18n.define({
       notLoaded: "Nicht geladen",
       retry: "Erneut versuchen",
       reload: "Neu laden",
-      loading: "Wird geladen"
+      loading: "Wird geladen",
+      noValue: "Kein Wert"
     }
   }
 });

package/dist/ssr/surfaces/stat-cell-messages.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/stat-cell-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst statCellMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      points: \"pts\",\n      better: \"better\",\n      worse: \"worse\",\n      comparedWith: ({ label }: { label: string }) => `compared with ${label}`,\n      notLoaded: \"Not loaded\",\n      retry: \"Try again\",\n      reload: \"Reload\",\n      loading: \"Loading\",\n    },\n    de: {\n      points: \"Pkt.\",\n      better: \"besser\",\n      worse: \"schlechter\",\n      comparedWith: ({ label }: { label: string }) => `gegenüber ${label}`,\n      notLoaded: \"Nicht geladen\",\n      retry: \"Erneut versuchen\",\n      reload: \"Neu laden\",\n      loading: \"Wird geladen\",\n    },\n  },\n});\n\nexport type StatCellMessages = ReturnType<(typeof statCellMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useStatCellMessages = (): (() => StatCellMessages) => {\n  const locale = useLocale();\n  return () => statCellMessages.resolve([locale()]).t;\n};\n\n/** For a caller that already holds the locale, such as table text for search and copy. */\nexport const resolveStatCellMessages = (locale: string): StatCellMessages => statCellMessages.resolve([locale]).t;\n\nexport const checkStatCellMessages = () => statCellMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC;EACnC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,MAAM,EAAE,KAAK;MACb,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,OAAO;MACd,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,iBAAiB,KAAK,EAAE;MACxE,SAAS,EAAE,YAAY;MACvB,KAAK,EAAE,WAAW;MAClB,MAAM,EAAE,QAAQ;MAChB,OAAO,EAAE;IACX,CAAC;IACD,EAAE,EAAE;MACF,MAAM,EAAE,MAAM;MACd,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,YAAY;MACnB,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,aAAa,KAAK,EAAE;MACpE,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,kBAAkB;MACzB,MAAM,EAAE,WAAW;MACnB,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,mBAAmB,GAAG,MAAgC;EACjE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;;AAED;AACA,OAAO,MAAM,uBAAuB,GAAI,MAAc,IAAuB,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAEjH,OAAO,MAAM,qBAAqB,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/stat-cell-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst statCellMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      points: \"pts\",\n      better: \"better\",\n      worse: \"worse\",\n      comparedWith: ({ label }: { label: string }) => `compared with ${label}`,\n      notLoaded: \"Not loaded\",\n      retry: \"Try again\",\n      reload: \"Reload\",\n      loading: \"Loading\",\n      noValue: \"No value\",\n    },\n    de: {\n      points: \"Pkt.\",\n      better: \"besser\",\n      worse: \"schlechter\",\n      comparedWith: ({ label }: { label: string }) => `gegenüber ${label}`,\n      notLoaded: \"Nicht geladen\",\n      retry: \"Erneut versuchen\",\n      reload: \"Neu laden\",\n      loading: \"Wird geladen\",\n      noValue: \"Kein Wert\",\n    },\n  },\n});\n\nexport type StatCellMessages = ReturnType<(typeof statCellMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useStatCellMessages = (): (() => StatCellMessages) => {\n  const locale = useLocale();\n  return () => statCellMessages.resolve([locale()]).t;\n};\n\n/** For a caller that already holds the locale, such as table text for search and copy. */\nexport const resolveStatCellMessages = (locale: string): StatCellMessages => statCellMessages.resolve([locale]).t;\n\nexport const checkStatCellMessages = () => statCellMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC;EACnC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,MAAM,EAAE,KAAK;MACb,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,OAAO;MACd,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,iBAAiB,KAAK,EAAE;MACxE,SAAS,EAAE,YAAY;MACvB,KAAK,EAAE,WAAW;MAClB,MAAM,EAAE,QAAQ;MAChB,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE;IACX,CAAC;IACD,EAAE,EAAE;MACF,MAAM,EAAE,MAAM;MACd,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,YAAY;MACnB,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,aAAa,KAAK,EAAE;MACpE,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,kBAAkB;MACzB,MAAM,EAAE,WAAW;MACnB,OAAO,EAAE,cAAc;MACvB,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,mBAAmB,GAAG,MAAgC;EACjE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;;AAED;AACA,OAAO,MAAM,uBAAuB,GAAI,MAAc,IAAuB,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAEjH,OAAO,MAAM,qBAAqB,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}