@k2b/ui 0.51.0 → 0.52.0

package/dist/ssr/layout/PanelDialog.js

@@ -1,13 +1,13 @@
-import { memo as _$memo } from "solid-js/web";
-import { ssr as _$ssr } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<p>", "</p>"],
-  _tmpl$2 = ["<div class=\"k2b-panel-dialog__actions\">", "</div>"],
-  _tmpl$3 = ["<button type=\"button\" class=\"k2b-dialog__close\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$4 = ["<header class=\"k2b-panel-dialog__header\"", ">", "<div class=\"k2b-panel-dialog__heading\">", "<h2>", "</h2>", "</div>", "", "</header>"],
-  _tmpl$5 = ["<span class=\"k2b-panel-dialog__icon k2b-icon-tile\"", " aria-hidden=\"true\"><i", "></i></span>"],
+var _tmpl$ = ["<span class=\"k2b-panel-dialog__icon k2b-icon-tile\"", " aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$2 = ["<p>", "</p>"],
+  _tmpl$3 = ["<div class=\"", "\">", "</div>"],
+  _tmpl$4 = ["<button type=\"button\" class=\"", "\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$5 = ["<header class=\"k2b-panel-dialog__header\"", ">", "<div class=\"", "\">", "<h2", ">", "</h2>", "</div>", "", "</header>"],
   _tmpl$6 = ["<span class=\"k2b-sr-only\" data-dialog-tone-label>", "</span>"],
   _tmpl$7 = ["<div class=\"k2b-panel-dialog__body\"", ">", "</div>"],
   _tmpl$8 = ["<footer class=\"k2b-panel-dialog__footer\"", ">", "</footer>"],
@@ -16,11 +16,12 @@ var _tmpl$ = ["<p>", "</p>"],
   _tmpl$1 = "<i class=\"ti ti-eye\" aria-hidden=\"true\"></i>",
   _tmpl$10 = ["<div", ">", "</div>"],
   _tmpl$11 = ["<p class=\"k2b-panel-dialog__section-subtitle\">", "</p>"],
-  _tmpl$12 = "<i class=\"ti ti-eye-off\" aria-hidden=\"true\"></i>",
-  _tmpl$13 = ["<section class=\"k2b-panel-dialog__section\"", ">", "<header", ">", "<div><h3", ">", "</h3>", "</div>", "", "</header><div id=\"", "\" class=\"k2b-panel-dialog__section-body\"", ">", "</div></section>"],
-  _tmpl$14 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$15 = ["<span class=\"k2b-panel-dialog__section-icon\"><i", " aria-hidden=\"true\"></i></span>"],
-  _tmpl$16 = ["<div class=\"k2b-panel-dialog\"", ">", "</div>"];
+  _tmpl$12 = ["<div class=\"k2b-panel-dialog__actions\">", "</div>"],
+  _tmpl$13 = "<i class=\"ti ti-eye-off\" aria-hidden=\"true\"></i>",
+  _tmpl$14 = ["<section class=\"k2b-panel-dialog__section\"", ">", "<header", ">", "<div><h3", ">", "</h3>", "</div>", "", "</header><div id=\"", "\" class=\"k2b-panel-dialog__section-body\"", ">", "</div></section>"],
+  _tmpl$15 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$16 = ["<span class=\"k2b-panel-dialog__section-icon\"><i", " aria-hidden=\"true\"></i></span>"],
+  _tmpl$17 = ["<div class=\"k2b-panel-dialog\"", ">", "</div>"];
 import { createContext, createEffect, createSignal, createUniqueId, Show, useContext } from "solid-js";
 import { Button } from "../actions/Button";
 import { Tabs } from "../actions/Tabs";
@@ -33,6 +34,7 @@ import { createScrollFade } from "./scroll-fade";
 const PanelDialogSurfaceContext = createContext("contained");
 const usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);
 const PanelDialogToneContext = createContext(() => undefined);
+const PanelDialogMediaContext = createContext(false);
 const panelDialogBasePanelClass = "k2b-dialog k2b-panel-dialog-frame";
 export const panelDialogPanelClass = `${panelDialogBasePanelClass} is-standard`;
 export const panelDialogOptions = {
@@ -70,36 +72,41 @@ const PanelDialogHeader = props => {
     const value = tone();
     return value ? dialogToneIcon(value) : props.icon;
   };
-  return _$ssr(_tmpl$4, _$ssrAttribute("data-surface", _$escape(usePanelDialogSurface(), true), false) + _$ssrAttribute("data-has-subtitle", _$escape(Boolean(props.subtitle), true), false), _$escape(_$createComponent(Show, {
+  // Over a picture the header's parts are glass layers of their own; the dialog owns them, so it sets the surface.
+  const media = useContext(PanelDialogMediaContext);
+  const layer = media ? " k2b-overlay-surface" : "";
+  return _$ssr(_tmpl$5, _$ssrAttribute("data-surface", _$escape(usePanelDialogSurface(), true), false) + _$ssrAttribute("data-has-subtitle", _$escape(Boolean(props.subtitle), true), false), _$escape(_$createComponent(Show, {
     get when() {
-      return icon();
+      return icon() && !media;
     },
-    children: icon => _$ssr(_tmpl$5, _$ssrAttribute("data-tone", _$escape(tone(), true), false), _$ssrAttribute("class", _$escape(icon(), true), false))
-  })), _$escape(_$createComponent(Show, {
+    get children() {
+      return _$ssr(_tmpl$, _$ssrAttribute("data-tone", _$escape(tone(), true), false), _$ssrAttribute("class", _$escape(icon(), true), false));
+    }
+  })), `k2b-panel-dialog__heading${_$escape(layer, true)}`, _$escape(_$createComponent(Show, {
     get when() {
       return tone();
     },
     children: value => _$ssr(_tmpl$6, _$escape(dialogToneLabel(messages(), value())))
-  })), _$escape(props.title), _$escape(_$createComponent(Show, {
+  })), _$ssrAttribute("class", media ? "k2b-truncate-fade" : _$escape(undefined, true), false), _$escape(props.title), _$escape(_$createComponent(Show, {
     get when() {
       return props.subtitle;
     },
     get children() {
-      return _$ssr(_tmpl$, _$escape(props.subtitle));
+      return _$ssr(_tmpl$2, _$escape(props.subtitle));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.actions;
     },
     get children() {
-      return _$ssr(_tmpl$2, _$escape(props.actions));
+      return _$ssr(_tmpl$3, `k2b-panel-dialog__actions${_$escape(layer, true)}`, _$escape(props.actions));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.close;
     },
     get children() {
-      return _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(props.closeLabel ?? messages().closeDialog, true), false), _$ssrAttribute("disabled", props.closeDisabled, true));
+      return _$ssr(_tmpl$4, `k2b-dialog__close${_$escape(layer, true)}`, _$ssrAttribute("aria-label", _$escape(props.closeLabel ?? messages().closeDialog, true), false), _$ssrAttribute("disabled", props.closeDisabled, true));
     }
   })));
 };
@@ -131,7 +138,7 @@ const PanelDialogSection = props => {
       if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();
     });
   });
-  return _$ssr(_tmpl$13, _$ssrAttribute("data-surface", _$escape(usePanelDialogSurface(), true), false) + _$ssrAttribute("data-hideable", _$escape(props.hideable || undefined, true), false) + _$ssrAttribute("data-open", props.hideable ? _$escape(open(), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-labelledby", open() ? _$escape(id, true) : `${_$escape(id, true)}-closed`, false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$14, _$ssrAttribute("data-surface", _$escape(usePanelDialogSurface(), true), false) + _$ssrAttribute("data-hideable", _$escape(props.hideable || undefined, true), false) + _$ssrAttribute("data-open", props.hideable ? _$escape(open(), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-labelledby", open() ? _$escape(id, true) : `${_$escape(id, true)}-closed`, false), _$escape(_$createComponent(Show, {
     get when() {
       return props.hideable;
     },
@@ -150,7 +157,7 @@ const PanelDialogSection = props => {
             get when() {
               return props.icon;
             },
-            children: icon => _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(icon(), true), false))
+            children: icon => _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(icon(), true), false))
           }), _$ssr(_tmpl$0, `${_$escape(id, true)}-closed`, _$escape(props.title), _$escape(_$createComponent(Show, {
             get when() {
               return props.subtitle;
@@ -166,7 +173,7 @@ const PanelDialogSection = props => {
     get when() {
       return props.icon;
     },
-    children: icon => _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(icon(), true), false))
+    children: icon => _$ssr(_tmpl$16, _$ssrAttribute("class", _$escape(icon(), true), false))
   })), _$ssrAttribute("id", _$escape(id, true), false), _$escape(props.title), _$escape(_$createComponent(Show, {
     get when() {
       return props.subtitle;
@@ -179,7 +186,7 @@ const PanelDialogSection = props => {
       return props.actions;
     },
     get children() {
-      return _$ssr(_tmpl$2, _$escape(props.actions));
+      return _$ssr(_tmpl$12, _$escape(props.actions));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -198,7 +205,7 @@ const PanelDialogSection = props => {
         "aria-controls": `${id}-body`,
         onClick: () => toggle(false),
         get children() {
-          return _$ssr(_tmpl$12);
+          return _$ssr(_tmpl$13);
         }
       });
     }
@@ -230,7 +237,14 @@ const PanelDialog = props => {
       return _$createComponent(PanelDialogToneContext.Provider, {
         value: () => props.tone,
         get children() {
-          return _$ssr(_tmpl$16, _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-tone", _$escape(props.tone, true), false), _$escape(props.children));
+          return _$createComponent(PanelDialogMediaContext.Provider, {
+            get value() {
+              return Boolean(props.media);
+            },
+            get children() {
+              return _$ssr(_tmpl$17, _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-tone", _$escape(props.tone, true), false) + _$ssrAttribute("data-media", props.media ? "" : _$escape(undefined, true), false), _$escape(props.children));
+            }
+          });
         }
       });
     }

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/PanelDialog.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, createUniqueId, type JSX, Show, useContext } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { Tabs } from \"../actions/Tabs\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { 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":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAY,IAAI,EAAE,UAAU,QAAQ,UAAU;AAChH,SAAS,MAAM,QAAQ,mBAAmB;AAC1C,SAAS,IAAI,QAAQ,iBAAiB;AAEtC,SAA0B,cAAc,EAAE,eAAe,QAAQ,yBAAyB;AAC1F,SAAS,aAAa,QAAQ,4BAA4B;AAC1D,SAAS,qBAAqB,QAAQ,6BAA6B;AACnE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,SAAS,sBAAsB,QAAQ,yBAAyB;AAChE,SAAS,gBAAgB,QAAQ,eAAe;AAiEhD,MAAM,yBAAyB,GAAG,aAAa,CAAqB,WAAW,CAAC;AAChF,MAAM,qBAAqB,GAAG,MAAM,UAAU,CAAC,yBAAyB,CAAC;AACzE,MAAM,sBAAsB,GAAG,aAAa,CAA+B,MAAM,SAAS,CAAC;AAE3F,MAAM,yBAAyB,GAAG,mCAAmC;AAErE,OAAO,MAAM,qBAAqB,GAAG,GAAG,yBAAyB,cAAc;AAC/E,OAAO,MAAM,kBAAkB,GAAG;EAChC,cAAc,EAAE,qBAAqB;EACrC,gBAAgB,EAAE;AACpB,CAA6B;AAE7B,OAAO,MAAM,yBAAyB,GAAG,GAAG,yBAAyB,UAAU;AAC/E,OAAO,MAAM,sBAAsB,GAAG;EACpC,cAAc,EAAE,yBAAyB;EACzC,gBAAgB,EAAE;AACpB,CAA6B;AAE7B,OAAO,MAAM,0BAA0B,GAAG,GAAG,yBAAyB,WAAW;AACjF,OAAO,MAAM,uBAAuB,GAAG;EACrC,cAAc,EAAE,0BAA0B;EAC1C,gBAAgB,EAAE;AACpB,CAA6B;AAE7B,OAAO,MAAM,8BAA8B,GAAG,GAAG,yBAAyB,eAAe;AACzF,OAAO,MAAM,2BAA2B,GAAG;EACzC,cAAc,EAAE,8BAA8B;EAC9C,gBAAgB,EAAE;AACpB,CAA6B;AAE7B,OAAO,MAAM,qBAAqB,GAAG,MAAO,KAAgC,IAAuB;EACjG,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,UAAU,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK;EAChE,IAAI,CAAC,UAAU,EAAE,OAAO,IAAI;EAC5B,OAAO,OAAO,CACZ,MAAM,aAAa,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;IACzE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,mBAAmB;IAClD,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC;EACvC,CAAC,CACH,CAAC;AACH,CAAC;AAED,MAAM,iBAAiB,GAAI,KAA6B,IAAkB;EACxE,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,IAAI,GAAG,UAAU,CAAC,sBAAsB,CAAC;EAC/C,MAAM,IAAI,GAAG,MAAM;IACjB,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC;IACpB,OAAO,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI;EACnD,CAAC;EACD,8DACyD,qBAAqB,CAAC,CAAC,+DAAqB,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,4CACvH,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,IAAI,CAAC,CAAC;IAAA;IAAA,UACd,IAAI,wDAC0D,IAAI,CAAC,CAAC,kDACxD,IAAI,CAAC,CAAC;EAEnB,gCAGA,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,IAAI,CAAC,CAAC;IAAA;IAAA,UACd,KAAK,4BAEF,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;EAExC,cAEE,KAAK,CAAC,KAAK,8BACf,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA;MAAA,8BACpB,KAAK,CAAC,QAAQ;IAAA;EAAA,gCAGrB,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,OAAO;IAAA;IAAA;MAAA,+BACiB,KAAK,CAAC,OAAO;IAAA;EAAA,gCAEtD,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA;MAAA,4DAIP,KAAK,CAAC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW,4CAC5C,KAAK,CAAC,aAAa;IAAA;EAAA;AAQvC,CAAC;AAED,MAAM,eAAe,GAAI,KAA2B,IAAkB;EACpE,IAAI,IAAgC;EACpC,gBAAgB,CACd,MAAM,IAAI,EACV,MAAM,KAAK,CAAC,UAAU,KAAK,KAC7B,CAAC;EACD,sEAI0B,KAAK,CAAC,iBAAiB,0DAC/B,qBAAqB,CAAC,CAAC,0DACd,KAAK,CAAC,UAAU,KAAK,KAAK,GAAG,MAAM,YAAG,SAAS,0BAErE,KAAK,CAAC,QAAQ;AAGrB,CAAC;AAED,MAAM,iBAAiB,GAAI,KAA6B,2DACC,qBAAqB,CAAC,CAAC,0BAC3E,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,kBAAkB,GAAI,KAA8B,IAAkB;EAC1E,MAAM,EAAE,GAAG,4BAA4B,cAAc,CAAC,CAAC,EAAE;EACzD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC;EAChF,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,IAAI,IAAI,YAAY,CAAC,CAAC,CAAC;EACpE,IAAI,OAAgC;EACpC,IAAI,MAAqC;EACzC,IAAI,QAAuC;EAC3C,MAAM,MAAM,GAAI,IAAa,IAAK;IAChC,IAAI,KAAK,CAAC,QAAQ,EAAE;IACpB,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC;IACnD,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;EAC5B,CAAC;EACD,YAAY,CAAC,MAAM;IACjB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC;IACvB,cAAc,CAAC,MAAM;MACnB,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,EAAE;MACzB,MAAM,MAAM,GAAG,OAAO,EAAE,aAAa,CAAC,aAAa;MACnD,IAAI,QAAQ,IAAI,MAAM,KAAK,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;MACpD,IAAI,CAAC,QAAQ,IAAI,MAAM,IAAI,MAAM,KAAK,MAAM,IAAI,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IAC5F,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,+DAIkB,qBAAqB,CAAC,CAAC,2DACtB,KAAK,CAAC,QAAQ,IAAI,SAAS,8CAC/B,KAAK,CAAC,QAAQ,YAAG,IAAI,CAAC,CAAC,mBAAG,SAAS,oDAC7B,IAAI,CAAC,CAAC,YAAG,EAAE,UAAG,YAAG,EAAE,gBAAS,qCAE5C,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA;MAAA,gDACX,IAAI,CAAC,CAAC,oCAChB,MAAM;QAEL,OAAO;QAAA;QAAA,IAEP,QAAQ;UAAA,OAAE,KAAK,CAAC,QAAQ;QAAA;QAAA,iBACT,KAAK;QAAA,iBACL,GAAG,EAAE,OAAO;QAC3B,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC;QAAA;UAAA,0BAE1B,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,KAAK,CAAC,IAAI;YAAA;YAAA,UAAI,IAAI,qDAAe,IAAI,CAAC,CAAC;UAAuB,mBAE9D,YAAG,EAAE,gBAAS,WACrB,KAAK,CAAC,KAAK,8BAEb,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,KAAK,CAAC,QAAQ;YAAA;YAAA;cAAA,+BAC0B,KAAK,CAAC,QAAQ;YAAA;UAAA;QAAA;MAAA;IAAA;EAAA,8BAO1D,CAAC,IAAI,CAAC,CAAC,oCACpB,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,UAClB,IAAI,qDAEQ,IAAI,CAAC,CAAC;EAEnB,mCAGO,EAAE,0BAAG,KAAK,CAAC,KAAK,8BACvB,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA;MAAA,gCACuB,KAAK,CAAC,QAAQ;IAAA;EAAA,gCAGhE,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,OAAO;IAAA;IAAA;MAAA,+BACiB,KAAK,CAAC,OAAO;IAAA;EAAA,gCAEtD,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA;MAAA,yBACvB,MAAM;QAEL,OAAO;QACP,IAAI;QAAA;QAAA,IAEJ,QAAQ;UAAA,OAAE,KAAK,CAAC,QAAQ;QAAA;QAAA,mBACP,EAAE;QAAA,iBACJ,IAAI;QAAA,iBACJ,GAAG,EAAE,OAAO;QAC3B,OAAO,EAAE,MAAM,MAAM,CAAC,KAAK,CAAC;QAAA;UAAA;QAAA;MAAA;IAAA;EAAA,KAMzB,YAAG,EAAE,cAAO,2BAAiD,CAAC,IAAI,CAAC,CAAC,kBAC1E,KAAK,CAAC,QAAQ;AAIvB,CAAC;AAED,MAAM,eAAe,GAAsB,KAA8B,IAAkB;EACzF,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,CAAC;EACpD,yBACG,IAAI;IAAA;IAAA,IAEH,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,aAAa;MAAA,OAAE,KAAK,CAAC,aAAa;IAAA;IAAA,IAClC,SAAS;MAAA,OAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,KAAK,IAAI,mBAAmB,CAAC,CAAC,CAAC,UAAU;IAAA;IAAA,IAC7E,OAAO;MAAA,OAAE,KAAK,CAAC,OAAO;IAAA;EAAA;AAG5B,CAAC;AAED,MAAM,WAAW,GAAK,KAAuB,IAAkB;EAC7D,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,WAAW;EAC5C,yBACG,yBAAyB,CAAC,QAAQ;IAAC,KAAK,EAAE,OAAO;IAAA;MAAA,yBAC/C,sBAAsB,CAAC,QAAQ;QAAC,KAAK,EAAE,MAAM,KAAK,CAAC,IAAI;QAAA;UAAA,+DACV,OAAO,uDAAa,KAAK,CAAC,IAAI,0BACvE,KAAK,CAAC,QAAQ;QAAA;MAAA;IAAA;EAAA;AAKzB,CAA0B;AAE1B,WAAW,CAAC,MAAM,GAAG,iBAAiB;AACtC,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,MAAM,GAAG,iBAAiB;AACtC,WAAW,CAAC,OAAO,GAAG,kBAAkB;AACxC,WAAW,CAAC,IAAI,GAAG,eAAe;AAElC,eAAe,WAAW","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/surfaces/StatCell.js

@@ -12,14 +12,15 @@ 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 { ChartSparkline } from "../content/ChartSparkline";
 import { useLocale } from "../intl/locale";
@@ -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,9 +134,9 @@ 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() {
@@ -150,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))
         })]
       });
     },
@@ -175,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))
           });
         }
       })];
@@ -198,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-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)));
+      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) + _$ssrAttribute("data-delta-placement", _$escape(props.deltaPlacement, 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 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                {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                    <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":[]}
+{"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/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":[]}

package/dist/ssr/widgets/DashboardFrame.js

@@ -6,9 +6,9 @@ import { ssr as _$ssr } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<button type=\"button\" class=\"k2b-dashboard-frame__link\">", "</button>"],
   _tmpl$2 = ["<div class=\"k2b-dashboard-frame__tools\">", "</div>"],
-  _tmpl$3 = ["<header class=\"k2b-dashboard-frame__header\"><div>", "<p role=\"status\"", ">", "", "</p></div>", "</header>"],
+  _tmpl$3 = ["<header class=\"k2b-dashboard-frame__header\"><div>", "<p role=\"status\"", ">", "</p></div>", "</header>"],
   _tmpl$4 = ["<div class=\"k2b-dashboard-frame__content\">", "</div>"],
-  _tmpl$5 = ["<div class=\"k2b-dashboard-frame__stack\"", "><div class=\"k2b-dashboard-frame__reserve\" aria-hidden=\"true\" inert>", "</div>", "</div>"],
+  _tmpl$5 = ["<div class=\"k2b-dashboard-frame__stack\"", " style=\"", "\"", "><div class=\"k2b-dashboard-frame__reserve\" aria-hidden=\"true\" inert>", "</div>", "</div>"],
   _tmpl$6 = "<div class=\"k2b-dashboard-frame__skeleton\" aria-hidden=\"true\"><span></span><span></span></div>",
   _tmpl$7 = ["<p class=\"k2b-dashboard-frame__inline-state\"", "><i", " aria-hidden=\"true\"></i>", "", "", "</p>"],
   _tmpl$8 = ["<div class=\"k2b-dashboard-frame__body\" style=\"", "\"", ">", "</div>"],
@@ -82,14 +82,7 @@ export function DashboardFrame(props) {
             get children() {
               return props.title;
             }
-          })), _$ssrAttribute("class", state() === "stale" ? "k2b-dashboard-frame__stale" : _$escape(undefined, true), false), _$escape(status()), _$escape(_$createComponent(Show, {
-            get when() {
-              return _$memo(() => state() === "stale")() && props.onRetry;
-            },
-            get children() {
-              return [" · ", retryLink()];
-            }
-          })), _$escape(_$createComponent(Show, {
+          })), _$ssrAttribute("class", state() === "stale" ? "k2b-dashboard-frame__stale" : _$escape(undefined, true), false), state() === "stale" && props.onRetry ? _$escape([status(), " · ", retryLink()]) : _$escape(status()), _$escape(_$createComponent(Show, {
             get when() {
               return tools() !== undefined;
             },
@@ -148,7 +141,9 @@ export function DashboardFrame(props) {
               })));
             },
             get children() {
-              return _$ssr(_tmpl$5, _$ssrAttribute("aria-busy", _$escape(busy(), true), false), _$escape(reserve()), _$escape(_$createComponent(Show, {
+              return _$ssr(_tmpl$5, _$ssrAttribute("data-height", props.height ? "" : _$escape(undefined, true), false), _$ssrStyle(props.height ? {
+                height: props.height
+              } : undefined), _$ssrAttribute("aria-busy", _$escape(busy(), true), false), _$escape(reserve()), _$escape(_$createComponent(Show, {
                 get when() {
                   return shown();
                 },

package/dist/ssr/widgets/DashboardFrame.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["widgets/DashboardFrame.tsx"],"sourcesContent":["import { children, type JSX, Match, Show, Switch } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Button } from \"../actions/Button\";\nimport { useChartMessages } from \"../content/chart-messages\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Paper } from \"../surfaces/Paper\";\nimport type { DashboardWidth } from \"./Dashboard\";\n\n/**\n * What the host's read shows: its content (`ready`), the first read in flight (`loading`), nothing to show (`empty`),\n * a failed first read (`error`), or content whose refresh failed (`stale`).\n */\nexport type DashboardFrameState = \"ready\" | \"loading\" | \"empty\" | \"error\" | \"stale\";\n\nexport type DashboardFrameProps = {\n  /**\n   * Heading of the frame. Without it the frame is only the surface, for content that brings its own head and states,\n   * such as `ChartExplorer` with `inset=\"1rem\"`.\n   */\n  title?: string;\n  /** One line under the title; loading and stale notes take its place, so nothing moves. */\n  subtitle?: JSX.Element;\n  /** Level of the title heading; defaults to 3. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** Controls at the right of the head, such as a search field or a grouping chip. */\n  tools?: JSX.Element;\n  /** Defaults to `ready`. */\n  state?: DashboardFrameState;\n  /** When the shown content was read, formatted by the host (\"09:12\"); a stale note names it. */\n  asOf?: string;\n  /** Try again after a failure; without it a failure has no button. */\n  onRetry?: () => void;\n  /** The empty sentence, such as \"No campaign in this period.\" */\n  empty?: JSX.Element;\n  /** Tabler icon of the empty state; defaults to `ti ti-chart-bar-off`. */\n  emptyIcon?: string;\n  /** An action under the empty sentence, such as \"Clear search\". */\n  emptyAction?: JSX.Element;\n  /**\n   * The content has nothing to show right now although the read succeeded, such as a search without matches: the body\n   * shows the empty sentence and action while the head keeps its state, so a stale note stays.\n   */\n  emptyContent?: boolean;\n  /** Height of the body, a CSS length. Every state keeps it. */\n  height?: string;\n  /**\n   * A hidden copy of the full content that holds the body's height in every state, such as every row of a table. The\n   * body then reaches the frame's left, right and bottom edges, like a table that brings its own rows.\n   */\n  reserve?: JSX.Element;\n  /** States as one quiet line instead of a centred message, for short content such as an amount or one bar. */\n  compact?: boolean;\n  /**\n   * Share of a `DashboardSection`'s six columns, like `DashboardPanel`: the frame is the grid cell itself, so it never\n   * sits in a second frame. Defaults to a third there; ignored elsewhere.\n   */\n  width?: DashboardWidth;\n  class?: string;\n  children?: JSX.Element;\n};\n\n/**\n * One framed dashboard panel: title, subtitle, tools and the content the host passes, with loading, empty, failure and\n * stale in the same place and at the same height.\n */\nexport function DashboardFrame(props: DashboardFrameProps): JSX.Element {\n  const ui = useUiMessages();\n  const chart = useChartMessages();\n  const state = () => props.state ?? \"ready\";\n  const failed = () => state() === \"error\";\n  const read = () => state() === \"ready\" || state() === \"stale\";\n  const shown = () => read() && !props.emptyContent;\n  const empty = () => state() === \"empty\" || (read() && props.emptyContent === true);\n  // Slots resolve once: checking a slot and then rendering it must not mount its components twice.\n  const tools = children(() => props.tools);\n  const reserve = children(() => props.reserve);\n  const busy = () => (state() === \"loading\" ? \"true\" : undefined);\n  const className = () => (props.class ? `k2b-dashboard-frame ${props.class}` : \"k2b-dashboard-frame\");\n  const retryLink = () => (\n    <button type=\"button\" class=\"k2b-dashboard-frame__link\" onClick={() => props.onRetry?.()}>\n      {ui().tryAgain}\n    </button>\n  );\n  const status = () =>\n    state() === \"loading\"\n      ? chart().chartLoading\n      : state() === \"stale\"\n        ? [props.asOf ? chart().chartAsOf({ time: props.asOf }) : undefined, chart().chartRefreshFailed].filter(Boolean).join(\" · \")\n        : props.subtitle;\n  const sentence = () => props.empty ?? ui().noData;\n  return (\n    <Show\n      when={props.title !== undefined}\n      fallback={\n        <Paper class={className()} data-width={props.width ?? \"third\"}>\n          {props.children}\n        </Paper>\n      }\n    >\n      <Paper class={className()} data-width={props.width ?? \"third\"}>\n        <header class=\"k2b-dashboard-frame__header\">\n          <div>\n            <Dynamic component={`h${props.headingLevel ?? 3}`}>{props.title}</Dynamic>\n            {/* One reserved line and a polite live region: loading and stale replace the subtitle without moving. */}\n            <p role=\"status\" class={state() === \"stale\" ? \"k2b-dashboard-frame__stale\" : undefined}>\n              {status()}\n              <Show when={state() === \"stale\" && props.onRetry}>\n                {\" · \"}\n                {retryLink()}\n              </Show>\n            </p>\n          </div>\n          <Show when={tools() !== undefined}>\n            <div class=\"k2b-dashboard-frame__tools\">{tools()}</div>\n          </Show>\n        </header>\n        <Show\n          when={reserve() !== undefined}\n          fallback={\n            <div class=\"k2b-dashboard-frame__body\" style={props.height ? { height: props.height } : undefined} aria-busy={busy()}>\n              <Switch fallback={props.children}>\n                <Match when={state() === \"loading\" && props.compact}>\n                  <div class=\"k2b-dashboard-frame__skeleton\" aria-hidden=\"true\">\n                    <span />\n                    <span />\n                  </div>\n                </Match>\n                <Match when={(failed() || empty()) && props.compact}>\n                  <p class=\"k2b-dashboard-frame__inline-state\" role={failed() ? \"alert\" : undefined}>\n                    <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} aria-hidden=\"true\" />\n                    {failed() ? chart().chartLoadFailed : sentence()}\n                    <Show when={failed() && props.onRetry}>{retryLink()}</Show>\n                    <Show when={empty()}>{props.emptyAction}</Show>\n                  </p>\n                </Match>\n                <Match when={!shown()}>\n                  <Message />\n                </Match>\n              </Switch>\n            </div>\n          }\n        >\n          <div class=\"k2b-dashboard-frame__stack\" aria-busy={busy()}>\n            {/* The full content, hidden: the body's height in every state. */}\n            <div class=\"k2b-dashboard-frame__reserve\" aria-hidden=\"true\" inert>\n              {reserve()}\n            </div>\n            <Show when={shown()} fallback={<Message />}>\n              <div class=\"k2b-dashboard-frame__content\">{props.children}</div>\n            </Show>\n          </div>\n        </Show>\n      </Paper>\n    </Show>\n  );\n\n  function Message(): JSX.Element {\n    return (\n      <div class=\"k2b-chart-explorer__state\" data-state={state()} role={failed() ? \"alert\" : undefined}>\n        <Show when={state() !== \"loading\"}>\n          <span class=\"k2b-chart-explorer__state-icon\" aria-hidden=\"true\">\n            <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} />\n          </span>\n        </Show>\n        <p>{failed() ? chart().chartLoadFailed : state() === \"loading\" ? \"\" : sentence()}</p>\n        <Show when={failed() && props.onRetry}>\n          <Button variant=\"secondary\" size=\"sm\" onClick={() => props.onRetry?.()}>\n            <i class=\"ti ti-refresh\" aria-hidden=\"true\" />\n            {ui().tryAgain}\n          </Button>\n        </Show>\n        <Show when={empty()}>{props.emptyAction}</Show>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["widgets/DashboardFrame.tsx"],"sourcesContent":["import { children, type JSX, Match, Show, Switch } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Button } from \"../actions/Button\";\nimport { useChartMessages } from \"../content/chart-messages\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Paper } from \"../surfaces/Paper\";\nimport type { DashboardWidth } from \"./Dashboard\";\n\n/**\n * What the host's read shows: its content (`ready`), the first read in flight (`loading`), nothing to show (`empty`),\n * a failed first read (`error`), or content whose refresh failed (`stale`).\n */\nexport type DashboardFrameState = \"ready\" | \"loading\" | \"empty\" | \"error\" | \"stale\";\n\nexport type DashboardFrameProps = {\n  /**\n   * Heading of the frame. Without it the frame is only the surface, for content that brings its own head and states,\n   * such as `ChartExplorer` with `inset=\"1rem\"`.\n   */\n  title?: string;\n  /** One line under the title; loading and stale notes take its place, so nothing moves. */\n  subtitle?: JSX.Element;\n  /** Level of the title heading; defaults to 3. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** Controls at the right of the head, such as a search field or a grouping chip. */\n  tools?: JSX.Element;\n  /** Defaults to `ready`. */\n  state?: DashboardFrameState;\n  /** When the shown content was read, formatted by the host (\"09:12\"); a stale note names it. */\n  asOf?: string;\n  /** Try again after a failure; without it a failure has no button. */\n  onRetry?: () => void;\n  /** The empty sentence, such as \"No campaign in this period.\" */\n  empty?: JSX.Element;\n  /** Tabler icon of the empty state; defaults to `ti ti-chart-bar-off`. */\n  emptyIcon?: string;\n  /** An action under the empty sentence, such as \"Clear search\". */\n  emptyAction?: JSX.Element;\n  /**\n   * The content has nothing to show right now although the read succeeded, such as a search without matches: the body\n   * shows the empty sentence and action while the head keeps its state, so a stale note stays.\n   */\n  emptyContent?: boolean;\n  /**\n   * Height of the body, a CSS length. Every state keeps it. With `reserve`, the content fills it and scrolls inside, so\n   * a table keeps its header in view; without it, the hidden copy sets the height.\n   */\n  height?: string;\n  /**\n   * A hidden copy of the full content that holds the body's height in every state, such as every row of a table. The\n   * body then reaches the frame's left, right and bottom edges, like a table that brings its own rows.\n   */\n  reserve?: JSX.Element;\n  /** States as one quiet line instead of a centred message, for short content such as an amount or one bar. */\n  compact?: boolean;\n  /**\n   * Share of a `DashboardSection`'s six columns, like `DashboardPanel`: the frame is the grid cell itself, so it never\n   * sits in a second frame. Defaults to a third there; ignored elsewhere.\n   */\n  width?: DashboardWidth;\n  class?: string;\n  children?: JSX.Element;\n};\n\n/**\n * One framed dashboard panel: title, subtitle, tools and the content the host passes, with loading, empty, failure and\n * stale in the same place and at the same height.\n */\nexport function DashboardFrame(props: DashboardFrameProps): JSX.Element {\n  const ui = useUiMessages();\n  const chart = useChartMessages();\n  const state = () => props.state ?? \"ready\";\n  const failed = () => state() === \"error\";\n  const read = () => state() === \"ready\" || state() === \"stale\";\n  const shown = () => read() && !props.emptyContent;\n  const empty = () => state() === \"empty\" || (read() && props.emptyContent === true);\n  // Slots resolve once: checking a slot and then rendering it must not mount its components twice.\n  const tools = children(() => props.tools);\n  const reserve = children(() => props.reserve);\n  const busy = () => (state() === \"loading\" ? \"true\" : undefined);\n  const className = () => (props.class ? `k2b-dashboard-frame ${props.class}` : \"k2b-dashboard-frame\");\n  const retryLink = () => (\n    <button type=\"button\" class=\"k2b-dashboard-frame__link\" onClick={() => props.onRetry?.()}>\n      {ui().tryAgain}\n    </button>\n  );\n  const status = () =>\n    state() === \"loading\"\n      ? chart().chartLoading\n      : state() === \"stale\"\n        ? [props.asOf ? chart().chartAsOf({ time: props.asOf }) : undefined, chart().chartRefreshFailed].filter(Boolean).join(\" · \")\n        : props.subtitle;\n  const sentence = () => props.empty ?? ui().noData;\n  return (\n    <Show\n      when={props.title !== undefined}\n      fallback={\n        <Paper class={className()} data-width={props.width ?? \"third\"}>\n          {props.children}\n        </Paper>\n      }\n    >\n      <Paper class={className()} data-width={props.width ?? \"third\"}>\n        <header class=\"k2b-dashboard-frame__header\">\n          <div>\n            <Dynamic component={`h${props.headingLevel ?? 3}`}>{props.title}</Dynamic>\n            {/* One reserved line and a polite live region: loading and stale replace the subtitle without moving. The\n                line is one expression: a trailing conditional anchor would change WebKit's rendered text after the\n                first client render. */}\n            <p role=\"status\" class={state() === \"stale\" ? \"k2b-dashboard-frame__stale\" : undefined}>\n              {state() === \"stale\" && props.onRetry ? [status(), \" · \", retryLink()] : status()}\n            </p>\n          </div>\n          <Show when={tools() !== undefined}>\n            <div class=\"k2b-dashboard-frame__tools\">{tools()}</div>\n          </Show>\n        </header>\n        <Show\n          when={reserve() !== undefined}\n          fallback={\n            <div class=\"k2b-dashboard-frame__body\" style={props.height ? { height: props.height } : undefined} aria-busy={busy()}>\n              <Switch fallback={props.children}>\n                <Match when={state() === \"loading\" && props.compact}>\n                  <div class=\"k2b-dashboard-frame__skeleton\" aria-hidden=\"true\">\n                    <span />\n                    <span />\n                  </div>\n                </Match>\n                <Match when={(failed() || empty()) && props.compact}>\n                  <p class=\"k2b-dashboard-frame__inline-state\" role={failed() ? \"alert\" : undefined}>\n                    <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} aria-hidden=\"true\" />\n                    {failed() ? chart().chartLoadFailed : sentence()}\n                    <Show when={failed() && props.onRetry}>{retryLink()}</Show>\n                    <Show when={empty()}>{props.emptyAction}</Show>\n                  </p>\n                </Match>\n                <Match when={!shown()}>\n                  <Message />\n                </Match>\n              </Switch>\n            </div>\n          }\n        >\n          <div\n            class=\"k2b-dashboard-frame__stack\"\n            data-height={props.height ? \"\" : undefined}\n            style={props.height ? { height: props.height } : undefined}\n            aria-busy={busy()}\n          >\n            {/* The full content, hidden: the body's height in every state. */}\n            <div class=\"k2b-dashboard-frame__reserve\" aria-hidden=\"true\" inert>\n              {reserve()}\n            </div>\n            <Show when={shown()} fallback={<Message />}>\n              <div class=\"k2b-dashboard-frame__content\">{props.children}</div>\n            </Show>\n          </div>\n        </Show>\n      </Paper>\n    </Show>\n  );\n\n  function Message(): JSX.Element {\n    return (\n      <div class=\"k2b-chart-explorer__state\" data-state={state()} role={failed() ? \"alert\" : undefined}>\n        <Show when={state() !== \"loading\"}>\n          <span class=\"k2b-chart-explorer__state-icon\" aria-hidden=\"true\">\n            <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} />\n          </span>\n        </Show>\n        <p>{failed() ? chart().chartLoadFailed : state() === \"loading\" ? \"\" : sentence()}</p>\n        <Show when={failed() && props.onRetry}>\n          <Button variant=\"secondary\" size=\"sm\" onClick={() => props.onRetry?.()}>\n            <i class=\"ti ti-refresh\" aria-hidden=\"true\" />\n            {ui().tryAgain}\n          </Button>\n        </Show>\n        <Show when={empty()}>{props.emptyAction}</Show>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}