@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.91

package/dist/chunk-O27D24CA.js

@@ -0,0 +1,250 @@
+// src/integrations/webawesome/help-tags/install-help-tag.ts
+var HELP_TAG_SHOW_DELAY = 500;
+var HELP_TAG_WARM_WINDOW = 400;
+var HELP_TAG_VIEWPORT_MARGIN = 8;
+var LIFECYCLE_EVENTS = [
+  "wa-show",
+  "wa-after-show",
+  "wa-hide",
+  "wa-after-hide"
+];
+var installed = /* @__PURE__ */ new WeakSet();
+function isFocusVisible(element) {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+}
+var MENU_LABEL = ':scope > [slot="trigger"] .kui-popup-menu__label';
+var isPlainControl = (host) => host.localName === "button" || host.localName === "a";
+var words = (node) => node.textContent.replace(/\s+/g, " ").trim();
+var ariaLabel = (control) => (control.getAttribute("aria-label") ?? "").replace(/\s+/g, " ").trim();
+function isToolbarIconControl(target) {
+  if (!target.matches("button, a[href]")) return false;
+  if (!ariaLabel(target) || target.hasAttribute("title") || words(target))
+    return false;
+  if (!target.closest(".kui-toolbar-control-group")) return false;
+  return !(target.id && target.ownerDocument.querySelector(
+    `wa-tooltip[for="${CSS.escape(target.id)}"]`
+  ));
+}
+function helpTagHost(path) {
+  for (const target of path) {
+    if (!(target instanceof HTMLElement)) continue;
+    if (isToolbarIconControl(target)) return target;
+    const { component, selectedPresentation } = target.dataset;
+    if (component === "select" && target.localName === "wa-select" && selectedPresentation === "icon-only")
+      return target;
+    if (component === "popup-menu" && target.querySelector(MENU_LABEL))
+      return target;
+  }
+  return null;
+}
+function anchorOf(host) {
+  if (isPlainControl(host)) return host;
+  if (host.dataset.component === "select")
+    return host.shadowRoot?.querySelector('[part~="combobox"]') ?? null;
+  return host.querySelector(':scope > [slot="trigger"]');
+}
+function helpText(host) {
+  if (isPlainControl(host)) return ariaLabel(host);
+  const label = host.querySelector(MENU_LABEL) ?? host.querySelector(':scope > [slot="label"]');
+  if (label) return words(label);
+  const name = host.getAttribute("label") ?? "";
+  const chosen = host.selectedOptions?.[0];
+  const choice = chosen ? chosen.label || words(chosen) : "";
+  return choice && choice !== name ? `${name}: ${choice}` : name;
+}
+function installHelpTags(doc = document, { focusVisible = isFocusVisible } = {}) {
+  if (installed.has(doc)) return;
+  installed.add(doc);
+  const tags = /* @__PURE__ */ new WeakMap();
+  let hovered = null;
+  let focused = null;
+  let shown = null;
+  let dismissed = null;
+  let timer;
+  let warmUntil = 0;
+  let layer = null;
+  const layerRoot = () => {
+    if (!layer) {
+      layer = doc.createElement("div");
+      layer.className = "kui-help-tag-layer";
+      layer.setAttribute("aria-hidden", "true");
+      layer.setAttribute("data-morph-skip", "");
+      Object.assign(layer.style, {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "0",
+        height: "0"
+      });
+    }
+    if (!layer.isConnected) doc.body.append(layer);
+    return layer;
+  };
+  const tagFor = (host) => {
+    const plain = isPlainControl(host);
+    const root = plain ? layerRoot() : host.shadowRoot;
+    if (!root) return null;
+    let tag = tags.get(host);
+    if (!tag) {
+      tag = doc.createElement("wa-tooltip");
+      tag.className = "kui-help-tag";
+      tag.setAttribute("aria-hidden", "true");
+      tag.setAttribute("trigger", "manual");
+      tag.setAttribute("placement", "bottom");
+      tag.style.pointerEvents = "none";
+      for (const type of LIFECYCLE_EVENTS)
+        tag.addEventListener(type, (event) => event.stopPropagation());
+      if (plain) {
+        const created = tag;
+        created.addEventListener("wa-after-hide", () => {
+          if (created.open) return;
+          created.remove();
+          tags.delete(host);
+        });
+      }
+      root.append(tag);
+      tags.set(host, tag);
+    }
+    return tag;
+  };
+  const hide = (host) => {
+    if (shown?.host !== host) return;
+    shown.tag.open = false;
+    shown = null;
+    warmUntil = Date.now() + HELP_TAG_WARM_WINDOW;
+  };
+  const show = (host) => {
+    window.clearTimeout(timer);
+    timer = void 0;
+    if (host.open || dismissed === host || !host.isConnected) return;
+    const anchor = anchorOf(host);
+    const text = helpText(host);
+    if (!anchor || !text) return;
+    const tag = tagFor(host);
+    if (!tag) return;
+    if (shown) hide(shown.host);
+    if (anchor === host)
+      tag.style.colorScheme = window.getComputedStyle(host).colorScheme;
+    tag.anchor = anchor;
+    tag.textContent = text;
+    tag.open = true;
+    shown = { host, tag };
+    void tag.updateComplete.then(() => {
+      if (tag.anchor !== anchor) tag.anchor = anchor;
+      const popup = tag.shadowRoot?.querySelector("wa-popup");
+      if (popup) popup.shiftPadding = HELP_TAG_VIEWPORT_MARGIN;
+    });
+  };
+  const triggerHost = (event) => {
+    const path = event.composedPath();
+    const host = helpTagHost(path);
+    if (!host) return null;
+    const anchor = anchorOf(host);
+    return anchor && path.includes(anchor) ? host : null;
+  };
+  const leave = (host) => {
+    if (hovered !== host) {
+      window.clearTimeout(timer);
+      timer = void 0;
+    }
+    if (hovered !== host && focused !== host) hide(host);
+  };
+  const release = (host) => {
+    if (dismissed && dismissed !== host && !dismissed.open) dismissed = null;
+  };
+  doc.addEventListener(
+    "pointerover",
+    (event) => {
+      if (event.pointerType === "touch") return;
+      const host = triggerHost(event);
+      release(host);
+      if (host === hovered) return;
+      const previous = hovered;
+      hovered = host;
+      if (previous) leave(previous);
+      if (!host || host.open || dismissed === host || shown?.host === host)
+        return;
+      window.clearTimeout(timer);
+      if (Date.now() < warmUntil) show(host);
+      else timer = window.setTimeout(() => show(host), HELP_TAG_SHOW_DELAY);
+    },
+    true
+  );
+  doc.addEventListener(
+    "pointerout",
+    (event) => {
+      if (event.relatedTarget !== null || !hovered) return;
+      const previous = hovered;
+      hovered = null;
+      leave(previous);
+    },
+    true
+  );
+  const dismiss = (host) => {
+    dismissed = host;
+    hide(host);
+  };
+  doc.addEventListener(
+    "pointerdown",
+    (event) => {
+      const host = helpTagHost(event.composedPath());
+      if (host) dismiss(host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "focusin",
+    (event) => {
+      const target = event.composedPath()[0];
+      const host = target instanceof Element && focusVisible(target) ? triggerHost(event) : null;
+      if (host === focused) return;
+      const previous = focused;
+      focused = host;
+      if (previous) leave(previous);
+      if (host && dismissed !== host) show(host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "focusout",
+    (event) => {
+      const host = helpTagHost(event.composedPath());
+      const next = event.relatedTarget;
+      if (!host || next instanceof Node && host.contains(next)) return;
+      if (dismissed === host) dismissed = null;
+      if (host !== focused) return;
+      focused = null;
+      leave(host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape" && shown) dismiss(shown.host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "wa-show",
+    (event) => {
+      const host = helpTagHost(event.composedPath());
+      if (host && event.composedPath()[0] === host) dismiss(host);
+    },
+    true
+  );
+  const refresh = (event) => {
+    const host = helpTagHost(event.composedPath());
+    if (shown && host === shown.host) shown.tag.textContent = helpText(host);
+  };
+  doc.addEventListener("change", refresh, true);
+  doc.addEventListener("input", refresh, true);
+}
+
+export { installHelpTags };
+
+//# sourceMappingURL=chunk-O27D24CA.js.map

package/dist/chunk-O27D24CA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/integrations/webawesome/help-tags/install-help-tag.ts"],"names":[],"mappings":"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","file":"chunk-O27D24CA.js","sourcesContent":["// Hover and keyboard-focus help tags for icon-only controls.\n//\n// An icon-only `Select` (single `selectedPresentation=\"icon-only\"` or the\n// multiple `triggerIcon` filter), an icon-only `PopupMenu` (a `label` instead\n// of visible `text`), and an icon-only `<button>` or link inside a\n// `ToolbarControlGroup` (named only by `aria-label`) carry their purpose — and\n// a Select its current choice — only in the accessible name. Sighted pointer\n// and keyboard users see just the icon, so the registration boundary shows a\n// Web Awesome `wa-tooltip` naming the control (Apple HIG \"help tag\"):\n//\n// - after a short hover delay, or immediately when a previous tag just closed\n//   (moving along a toolbar), and at once on keyboard (`:focus-visible`) focus;\n// - never while the control's popup is open, and not again after a press or\n//   Escape until the pointer or focus leaves and returns;\n// - with the same text the accessible name already announces, so the tag is\n//   `aria-hidden` and never joins the control's `aria-labelledby` (a manual\n//   trigger with a programmatic anchor, not `for`, so Web Awesome does not\n//   add it) — assistive technology hears the name once.\n//\n// A Select's or PopupMenu's tag lives in the control's open shadow root, so\n// the morph never sees it, `:has([open])` selectors on the light DOM ignore\n// it, and it inherits the control's theme. A plain button cannot host a shadow\n// root, so its tag lives in one body-level layer (re-attached if a body morph\n// drops it, and removed again once hidden) and copies the button's\n// `color-scheme`; the tag's Popover-API popup renders in the top layer, so its\n// place in the document does not affect where or above what it shows. A\n// button that already has a native `title`, or a Web Awesome tooltip `for` it,\n// keeps that and gets no second tag. Each tag's own lifecycle events stop at\n// the tag so an application listening for the control's `wa-show` / `wa-hide`\n// never hears the tag's.\n\n/** Hover delay before a help tag appears. */\nexport const HELP_TAG_SHOW_DELAY = 500;\n/** After a tag closes, a neighboring trigger shows its tag at once for this long. */\nexport const HELP_TAG_WARM_WINDOW = 400;\n/** A tag shifted inward stays this far from the viewport edge. */\nexport const HELP_TAG_VIEWPORT_MARGIN = 8;\n\ninterface HelpTagHost extends HTMLElement {\n  open?: boolean;\n  selectedOptions?: readonly (HTMLElement & { label?: string })[];\n}\n\ninterface HelpTag extends HTMLElement {\n  open: boolean;\n  readonly updateComplete: Promise<unknown>;\n  anchor: Element | null;\n  trigger: string;\n  placement: string;\n}\n\nexport interface HelpTagOptions {\n  /** Whether a newly focused element shows keyboard focus. */\n  focusVisible?: (element: Element) => boolean;\n}\n\nconst LIFECYCLE_EVENTS = [\n  'wa-show',\n  'wa-after-show',\n  'wa-hide',\n  'wa-after-hide',\n] as const;\n\nconst installed = new WeakSet<Document>();\n\nfunction isFocusVisible(element: Element): boolean {\n  try {\n    return element.matches(':focus-visible');\n  } catch {\n    return false;\n  }\n}\n\nconst MENU_LABEL = ':scope > [slot=\"trigger\"] .kui-popup-menu__label';\n\n/** A plain control (not a Web Awesome popup host) gets a body-layer tag. */\nconst isPlainControl = (host: HelpTagHost): boolean =>\n  host.localName === 'button' || host.localName === 'a';\n\n/** An element's text with whitespace collapsed (an element's is never null). */\nconst words = (node: Element): string =>\n  (node.textContent as string).replace(/\\s+/g, ' ').trim();\n\n/** The trimmed `aria-label` of a plain control. */\nconst ariaLabel = (control: Element): string =>\n  (control.getAttribute('aria-label') ?? '').replace(/\\s+/g, ' ').trim();\n\n/**\n * An icon-only toolbar button or link: inside a `ToolbarControlGroup`, named\n * by `aria-label`, with no visible text, and without a native `title` or a Web\n * Awesome tooltip of its own that a second tag would duplicate.\n */\nfunction isToolbarIconControl(target: HTMLElement): boolean {\n  if (!target.matches('button, a[href]')) return false;\n  if (!ariaLabel(target) || target.hasAttribute('title') || words(target))\n    return false;\n  if (!target.closest('.kui-toolbar-control-group')) return false;\n  return !(\n    target.id &&\n    target.ownerDocument.querySelector(\n      `wa-tooltip[for=\"${CSS.escape(target.id)}\"]`,\n    )\n  );\n}\n\n/** The icon-only Kerf control on an event path, if any. */\nfunction helpTagHost(path: readonly EventTarget[]): HelpTagHost | null {\n  for (const target of path) {\n    if (!(target instanceof HTMLElement)) continue;\n    if (isToolbarIconControl(target)) return target;\n    const { component, selectedPresentation } = target.dataset;\n    if (\n      component === 'select' &&\n      target.localName === 'wa-select' &&\n      selectedPresentation === 'icon-only'\n    )\n      return target;\n    if (component === 'popup-menu' && target.querySelector(MENU_LABEL))\n      return target;\n  }\n  return null;\n}\n\n/** The visible trigger the tag describes and anchors to. */\nfunction anchorOf(host: HelpTagHost): Element | null {\n  if (isPlainControl(host)) return host;\n  if (host.dataset.component === 'select')\n    return host.shadowRoot?.querySelector('[part~=\"combobox\"]') ?? null;\n  return host.querySelector(':scope > [slot=\"trigger\"]');\n}\n\n/** The tag text: the same words as the trigger's accessible name. */\nfunction helpText(host: HelpTagHost): string {\n  if (isPlainControl(host)) return ariaLabel(host);\n  // An icon-only PopupMenu's visually hidden label, or a multiple icon\n  // trigger's label slot (it already ends with the chosen labels).\n  const label =\n    host.querySelector(MENU_LABEL) ??\n    host.querySelector(':scope > [slot=\"label\"]');\n  if (label) return words(label);\n  const name = host.getAttribute('label') ?? '';\n  const chosen = host.selectedOptions?.[0];\n  const choice = chosen ? chosen.label || words(chosen) : '';\n  return choice && choice !== name ? `${name}: ${choice}` : name;\n}\n\n/**\n * Install once at an explicit registration boundary. Idempotent per document.\n */\nexport function installHelpTags(\n  doc: Document = document,\n  { focusVisible = isFocusVisible }: HelpTagOptions = {},\n): void {\n  if (installed.has(doc)) return;\n  installed.add(doc);\n  const tags = new WeakMap<HelpTagHost, HelpTag>();\n  let hovered: HelpTagHost | null = null;\n  let focused: HelpTagHost | null = null;\n  // The trigger whose tag is open, with that tag.\n  let shown: { host: HelpTagHost; tag: HelpTag } | null = null;\n  // A press, Escape, or an opened popup suppresses that trigger's tag.\n  let dismissed: HelpTagHost | null = null;\n  let timer: number | undefined;\n  let warmUntil = 0;\n  let layer: HTMLElement | null = null;\n\n  // The body-level home of plain controls' tags. Its fixed, zero-size box\n  // keeps it out of a grid or flex body's flow; a body morph that drops it is\n  // repaired on the next show.\n  const layerRoot = (): HTMLElement => {\n    if (!layer) {\n      layer = doc.createElement('div');\n      layer.className = 'kui-help-tag-layer';\n      layer.setAttribute('aria-hidden', 'true');\n      layer.setAttribute('data-morph-skip', '');\n      Object.assign(layer.style, {\n        position: 'fixed',\n        top: '0',\n        left: '0',\n        width: '0',\n        height: '0',\n      });\n    }\n    if (!layer.isConnected) doc.body.append(layer);\n    return layer;\n  };\n\n  const tagFor = (host: HelpTagHost): HelpTag | null => {\n    const plain = isPlainControl(host);\n    const root = plain ? layerRoot() : host.shadowRoot;\n    if (!root) return null;\n    let tag = tags.get(host);\n    if (!tag) {\n      tag = doc.createElement('wa-tooltip') as HelpTag;\n      tag.className = 'kui-help-tag';\n      tag.setAttribute('aria-hidden', 'true');\n      tag.setAttribute('trigger', 'manual');\n      tag.setAttribute('placement', 'bottom');\n      tag.style.pointerEvents = 'none';\n      for (const type of LIFECYCLE_EVENTS)\n        tag.addEventListener(type, (event) => event.stopPropagation());\n      if (plain) {\n        // A hidden button tag leaves the layer, so tags for buttons that a\n        // re-render replaced never accumulate there.\n        const created = tag;\n        created.addEventListener('wa-after-hide', () => {\n          if (created.open) return;\n          created.remove();\n          tags.delete(host);\n        });\n      }\n      root.append(tag);\n      tags.set(host, tag);\n    }\n    return tag;\n  };\n\n  const hide = (host: HelpTagHost) => {\n    if (shown?.host !== host) return;\n    shown.tag.open = false;\n    shown = null;\n    warmUntil = Date.now() + HELP_TAG_WARM_WINDOW;\n  };\n\n  const show = (host: HelpTagHost) => {\n    window.clearTimeout(timer);\n    timer = undefined;\n    if (host.open || dismissed === host || !host.isConnected) return;\n    const anchor = anchorOf(host);\n    const text = helpText(host);\n    if (!anchor || !text) return;\n    const tag = tagFor(host);\n    if (!tag) return;\n    if (shown) hide(shown.host);\n    // A body-layer tag takes its button's light or dark scheme, which a\n    // subtree theme (`.wa-dark`) may set below the document root.\n    if (anchor === host)\n      tag.style.colorScheme = window.getComputedStyle(host).colorScheme;\n    tag.anchor = anchor;\n    tag.textContent = text;\n    tag.open = true;\n    shown = { host, tag };\n    // A new tag's first update resets `anchor` from its (null) `for`. Its\n    // popup also keeps the standard 8px clear of the viewport edge when it\n    // shifts a long tag inward (Web Awesome's tooltip leaves this at 0).\n    void tag.updateComplete.then(() => {\n      if (tag.anchor !== anchor) tag.anchor = anchor;\n      const popup = tag.shadowRoot?.querySelector<\n        HTMLElement & { shiftPadding: number }\n      >('wa-popup');\n      if (popup) popup.shiftPadding = HELP_TAG_VIEWPORT_MARGIN;\n    });\n  };\n\n  /** The tagged host whose trigger (not its popup) is on the path. */\n  const triggerHost = (event: Event): HelpTagHost | null => {\n    const path = event.composedPath();\n    const host = helpTagHost(path);\n    if (!host) return null;\n    const anchor = anchorOf(host);\n    return anchor && path.includes(anchor) ? host : null;\n  };\n\n  // A pending hover belongs to the hovered trigger; a tag stays while either\n  // the pointer or keyboard focus is still on its trigger.\n  const leave = (host: HelpTagHost) => {\n    if (hovered !== host) {\n      window.clearTimeout(timer);\n      timer = undefined;\n    }\n    if (hovered !== host && focused !== host) hide(host);\n  };\n\n  // A press, Escape, or an opened popup dismisses a trigger's tag until the\n  // pointer moves onto something else while the popup is closed, or focus\n  // leaves the control.\n  const release = (host: HelpTagHost | null) => {\n    if (dismissed && dismissed !== host && !dismissed.open) dismissed = null;\n  };\n\n  doc.addEventListener(\n    'pointerover',\n    (event) => {\n      if ((event as PointerEvent).pointerType === 'touch') return;\n      const host = triggerHost(event);\n      release(host);\n      if (host === hovered) return;\n      const previous = hovered;\n      hovered = host;\n      if (previous) leave(previous);\n      if (!host || host.open || dismissed === host || shown?.host === host)\n        return;\n      window.clearTimeout(timer);\n      if (Date.now() < warmUntil) show(host);\n      else timer = window.setTimeout(() => show(host), HELP_TAG_SHOW_DELAY);\n    },\n    true,\n  );\n\n  doc.addEventListener(\n    'pointerout',\n    (event) => {\n      // Leaving the window: nothing new is hovered.\n      if ((event as PointerEvent).relatedTarget !== null || !hovered) return;\n      const previous = hovered;\n      hovered = null;\n      leave(previous);\n    },\n    true,\n  );\n\n  // A pending hover show for this host re-checks the dismissal and no-ops.\n  const dismiss = (host: HelpTagHost) => {\n    dismissed = host;\n    hide(host);\n  };\n\n  doc.addEventListener(\n    'pointerdown',\n    (event) => {\n      const host = helpTagHost(event.composedPath());\n      if (host) dismiss(host);\n    },\n    true,\n  );\n\n  doc.addEventListener(\n    'focusin',\n    (event) => {\n      // Only keyboard focus (`:focus-visible`) shows a tag; a click focuses\n      // the trigger without one.\n      const target = event.composedPath()[0];\n      const host =\n        target instanceof Element && focusVisible(target)\n          ? triggerHost(event)\n          : null;\n      if (host === focused) return;\n      const previous = focused;\n      focused = host;\n      if (previous) leave(previous);\n      if (host && dismissed !== host) show(host);\n    },\n    true,\n  );\n\n  doc.addEventListener(\n    'focusout',\n    (event) => {\n      const host = helpTagHost(event.composedPath());\n      // Focus moving within the control (into its popup and back) is handled\n      // by focusin; only focus leaving the control ends a dismissal.\n      const next = (event as FocusEvent).relatedTarget;\n      if (!host || (next instanceof Node && host.contains(next))) return;\n      if (dismissed === host) dismissed = null;\n      if (host !== focused) return;\n      focused = null;\n      leave(host);\n    },\n    true,\n  );\n\n  doc.addEventListener(\n    'keydown',\n    (event) => {\n      if (event.key === 'Escape' && shown) dismiss(shown.host);\n    },\n    true,\n  );\n\n  // Opening the popup hides the tag: the menu itself now shows the choices.\n  doc.addEventListener(\n    'wa-show',\n    (event) => {\n      const host = helpTagHost(event.composedPath());\n      if (host && event.composedPath()[0] === host) dismiss(host);\n    },\n    true,\n  );\n\n  // Keep a visible tag's text in step with the selection.\n  const refresh = (event: Event) => {\n    const host = helpTagHost(event.composedPath());\n    if (shown && host === shown.host) shown.tag.textContent = helpText(host);\n  };\n  doc.addEventListener('change', refresh, true);\n  doc.addEventListener('input', refresh, true);\n}\n"]}

package/dist/chunk-PGL6TXFW.js

@@ -0,0 +1,48 @@
+import { Skeleton } from './chunk-Y43B6DS3.js';
+import { Badge } from './chunk-J3AWE5I4.js';
+import { em } from './chunk-U657IHFB.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function StateBanner({
+  title,
+  detail,
+  badge,
+  icon,
+  action,
+  tone = "info",
+  urgency = "status",
+  copyLayout = "inline",
+  actionPlacement = "trailing",
+  className = "",
+  placeholder = false,
+  slot
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-state-banner ${className}`.trim(),
+      "data-component": "state-banner",
+      "data-tone": tone,
+      "data-copy-layout": copyLayout,
+      "data-action-placement": actionPlacement,
+      "data-placeholder": placeholder ? "true" : void 0,
+      role: urgency,
+      "aria-live": urgency === "alert" ? "assertive" : "polite",
+      "aria-busy": placeholder ? "true" : void 0,
+      slot,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__icon", children: icon }),
+        /* @__PURE__ */ jsxs("div", { class: "kui-state-banner__copy", children: [
+          /* @__PURE__ */ jsx("strong", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(10) }) : title }),
+          badge && /* @__PURE__ */ jsx(Badge, { appearance: "solid", size: "compact", tone, children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(1.75) }) : badge }),
+          detail && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__detail", children: /* @__PURE__ */ jsx("span", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(16) }) : detail }) })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { class: "kui-state-banner__action", children: action })
+      ]
+    }
+  );
+}
+
+export { StateBanner };
+
+//# sourceMappingURL=chunk-PGL6TXFW.js.map

package/dist/chunk-PGL6TXFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/state-banner/state-banner.tsx"],"names":[],"mappings":";;;;;AAmCO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,UAAA,GAAa,QAAA;AAAA,EACb,eAAA,GAAkB,UAAA;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,UAAA;AAAA,MAClB,uBAAA,EAAuB,eAAA;AAAA,MACvB,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,wCAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,UAC1D,yBACC,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EACtC,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAO,EAAA,CAAG,IAAI,CAAA,EAAG,IAAK,KAAA,EACjD,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EACV,8BAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,QAAO,CAAA,EAC5D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-PGL6TXFW.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport { Badge } from '../badge/badge.js';\nimport { Skeleton } from '../skeleton/skeleton.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n/** @deprecated Use SemanticTone. */\nexport type StateBannerTone = SemanticTone;\nexport type StateBannerUrgency = 'status' | 'alert';\nexport type StateBannerCopyLayout = 'inline' | 'stacked';\nexport type StateBannerActionPlacement = 'trailing' | 'below';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  /** Optional compact status or count shown beside the title. */\n  badge?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  tone?: SemanticTone;\n  urgency?: StateBannerUrgency;\n  /** Keep the detail beside the title, or give it its own line. */\n  copyLayout?: StateBannerCopyLayout;\n  /** Place the action beside the copy or on a separate trailing row. */\n  actionPlacement?: StateBannerActionPlacement;\n  className?: string;\n  /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function StateBanner({\n  title,\n  detail,\n  badge,\n  icon,\n  action,\n  tone = 'info',\n  urgency = 'status',\n  copyLayout = 'inline',\n  actionPlacement = 'trailing',\n  className = '',\n  placeholder = false,\n  slot,\n}: StateBannerProps) {\n  return (\n    <section\n      class={`kui-state-banner ${className}`.trim()}\n      data-component=\"state-banner\"\n      data-tone={tone}\n      data-copy-layout={copyLayout}\n      data-action-placement={actionPlacement}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role={urgency}\n      aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n      <div class=\"kui-state-banner__copy\">\n        <strong>{placeholder ? <Skeleton width={em(10)} /> : title}</strong>\n        {badge && (\n          <Badge appearance=\"solid\" size=\"compact\" tone={tone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : badge}\n          </Badge>\n        )}\n        {detail && (\n          <span class=\"kui-state-banner__detail\">\n            <span>{placeholder ? <Skeleton width={em(16)} /> : detail}</span>\n          </span>\n        )}\n      </div>\n      {action && <div class=\"kui-state-banner__action\">{action}</div>}\n    </section>\n  );\n}\n"]}