@kerfjs/ui 5.0.0-beta.75 → 5.0.0-beta.76

package/dist/wire-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wire-sidebar.ts"],"names":[],"mappings":"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","file":"wire-sidebar.js","sourcesContent":["import { delegate, effect, type ReadonlySignal, type Signal } from 'kerfjs';\n\nimport type { DeviceClass } from './device-class.js';\n\n/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */\nexport interface SidebarStorage {\n  getItem(key: string): string | null;\n  setItem(key: string, value: string): void;\n}\n\nexport interface WireSidebarPanel {\n  /** The panel id — matches `CollapsiblePanel`'s `id` and a toggle's `panelId`. */\n  id: string;\n  /** The app-owned collapsed signal. `wireSidebar` reads it (focus, overlay) and\n   *  writes it (toggle, Escape, backdrop, persistence). */\n  collapsed: Signal<boolean>;\n  /** `data-action` value the panel's toggle button(s) carry. */\n  toggleAction: string;\n  /** When set, the panel's inline collapsed state is loaded from and saved to\n   *  `storage` under this key (a persistence hook), so the panel remembers the\n   *  user's inline choice. A compact overlay's open/closed state is transient\n   *  and is never persisted. */\n  storageKey?: string;\n  /** The panel's inline (non-compact) collapsed state when `storage` holds no\n   *  choice for it; wire-up seeds the signal with it. Defaults to the signal's\n   *  own value. Set it when the app seeds the signal from the device class\n   *  (`signal(device.value.compact)`) so a compact first render already starts\n   *  collapsed while a later crossing to a wide class still restores this\n   *  inline default. */\n  inlineCollapsed?: boolean;\n}\n\nexport interface WireSidebarOptions {\n  panels: readonly WireSidebarPanel[];\n  /**\n   * When provided, the sidebar adopts a compact **overlay** presentation while\n   * `deviceClass.compact` is true: an open panel floats over the content with a\n   * dismissable backdrop, Escape and backdrop-click collapse it, and focus is\n   * trapped within the open panel (the ARIA dialog pattern). Without it the panel\n   * is always inline.\n   *\n   * An overlay is transient and user-initiated: whenever the compact overlay\n   * presentation begins (wire-up on a compact device, or a crossing from a wide\n   * class), every panel starts collapsed so nothing blocks the page until the\n   * user opens it. The inline state is remembered and restored when the device\n   * crosses back to a wide class (and on disposal).\n   */\n  deviceClass?: ReadonlySignal<DeviceClass>;\n  /** Compact devices either overlay the panels (default) or hide them in favor\n   *  of an application-owned responsive replacement. */\n  compactPresentation?: 'overlay' | 'hidden';\n  /** Collapse the other panels when one opens in compact overlay mode. */\n  exclusiveCompact?: boolean;\n  /** Persistence store (default `globalThis.localStorage`, if present). */\n  storage?: SidebarStorage;\n}\n\nconst FOCUSABLE =\n  'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusables(panel: HTMLElement): HTMLElement[] {\n  // Focus only ever targets an OPEN panel, so the selector (which already drops\n  // disabled controls and tabindex=\"-1\") is sufficient without a layout-based\n  // visibility check that a headless DOM can't answer.\n  return [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)];\n}\n\nfunction defaultStorage(): SidebarStorage | undefined {\n  try {\n    return globalThis.localStorage ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * The reusable sidebar-semantics layer for {@link CollapsiblePanel}s: toggle\n * delegation with focus restore, focus-into on open, an optional compact overlay\n * (backdrop + Escape + focus trap) driven by {@link deviceClass}, and an optional\n * persistence hook. The app owns each `collapsed` signal and the layout; this wire\n * owns the interaction. Returns a disposer. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function wireSidebar(\n  root: HTMLElement,\n  {\n    panels,\n    deviceClass,\n    compactPresentation = 'overlay',\n    exclusiveCompact = true,\n    storage = defaultStorage(),\n  }: WireSidebarOptions,\n): () => void {\n  const ownerDocument = root.ownerDocument;\n  const byAction = new Map(panels.map((panel) => [panel.toggleAction, panel]));\n  const returnFocus = new Map<string, HTMLElement>();\n  const disposers: Array<() => void> = [];\n  // Panels whose next collapsed change is presentation-driven, not a user\n  // action, so it must not move focus the way a toggle does. A set rather than\n  // a flag: writes made inside an effect are batched, so the focus effects run\n  // after the writer returns.\n  const adapting = new Set<WireSidebarPanel>();\n  const overlayActive = (): boolean =>\n    Boolean(deviceClass?.value.compact) && compactPresentation === 'overlay';\n\n  // Initial-state contract: an overlay is transient and only ever opens on a\n  // user action. Entering the overlay presentation (at wire-up or on a wide →\n  // compact crossing) remembers each panel's inline state and collapses it;\n  // leaving it (compact → wide, or disposal) restores the remembered state.\n  let inlineState: Map<WireSidebarPanel, boolean> | undefined;\n  const setAll = (value: (panel: WireSidebarPanel) => boolean): void => {\n    for (const panel of panels) {\n      const next = value(panel);\n      if (panel.collapsed.peek() === next) continue;\n      adapting.add(panel);\n      panel.collapsed.value = next;\n    }\n  };\n  const restoreInline = (): void => {\n    const remembered = inlineState;\n    if (!remembered) return;\n    inlineState = undefined;\n    setAll((panel) => remembered.get(panel)!);\n  };\n\n  // Seed each panel's inline state from storage or `inlineCollapsed`. On a\n  // compact overlay device the seed is only remembered: the panel starts\n  // collapsed, synchronously and before any effect exists, so the first render\n  // after wire-up already has no overlay open.\n  if (overlayActive()) inlineState = new Map();\n  for (const panel of panels) {\n    const stored =\n      panel.storageKey && storage ? storage.getItem(panel.storageKey) : null;\n    const seed =\n      stored === 'true' || stored === 'false'\n        ? stored === 'true'\n        : panel.inlineCollapsed;\n    if (inlineState) {\n      inlineState.set(panel, seed ?? panel.collapsed.peek());\n      panel.collapsed.value = true;\n    } else if (seed !== undefined) {\n      panel.collapsed.value = seed;\n    }\n  }\n\n  // Persistence mirrors inline changes only. An overlay's open/closed state is\n  // transient, so it is never written.\n  for (const panel of panels) {\n    if (!panel.storageKey || !storage) continue;\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (overlayActive()) return;\n        storage.setItem(panel.storageKey!, String(collapsed));\n      }),\n    );\n  }\n\n  const panelElement = (id: string): HTMLElement | null =>\n    root.querySelector<HTMLElement>(`[data-collapsible-panel=\"${id}\"]`);\n\n  const collapse = (panel: WireSidebarPanel): void => {\n    if (panel.collapsed.value) return;\n    panel.collapsed.value = true;\n  };\n\n  // Toggle delegation. The trigger is remembered so focus restores to it on close.\n  disposers.push(\n    delegate(root, 'click', '[data-action]', (_event, element) => {\n      const trigger = element as HTMLElement;\n      const panel = byAction.get(trigger.dataset.action ?? '');\n      if (!panel) return;\n      returnFocus.set(panel.id, trigger);\n      const next = !panel.collapsed.value;\n      panel.collapsed.value = next;\n      if (!next && exclusiveCompact && overlayActive()) {\n        for (const other of panels)\n          if (other !== panel) other.collapsed.value = true;\n      }\n    }),\n  );\n\n  // Where focus goes when a panel closes: the trigger that toggled it, unless\n  // that trigger sits inside the now-hidden panel (the documented\n  // collapse-inside placement) or was re-rendered away. Then it goes to the\n  // panel's toggle outside it — the always-visible expand toggle, which an app\n  // may render only while the panel is collapsed. Returns whether it moved.\n  const restoreFocus = (panel: WireSidebarPanel): boolean => {\n    const element = panelElement(panel.id);\n    const trigger = returnFocus.get(panel.id);\n    const target =\n      trigger?.isConnected && !element?.contains(trigger)\n        ? trigger\n        : [...root.querySelectorAll<HTMLElement>('[data-action]')].find(\n            (candidate) =>\n              candidate.dataset.action === panel.toggleAction &&\n              !element?.contains(candidate),\n          );\n    target?.focus();\n    return target !== undefined;\n  };\n\n  // Focus: move into the panel when it opens; restore it when it closes.\n  for (const panel of panels) {\n    let previous = panel.collapsed.value;\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (collapsed === previous) return;\n        previous = collapsed;\n        const element = panelElement(panel.id);\n        if (adapting.delete(panel)) {\n          // A presentation change, not a user action: only rescue focus that\n          // the collapse would strand inside the now-hidden panel.\n          if (collapsed && element?.contains(ownerDocument.activeElement))\n            restoreFocus(panel);\n          return;\n        }\n        const replaced =\n          deviceClass?.value.compact && compactPresentation === 'hidden';\n        if (!collapsed && element && !replaced) {\n          // Without preventScroll the browser scrolls the panel's clipped,\n          // still-sliding content to reveal the focus target, which then\n          // unwinds as the slide finishes: the content jumps and drifts back.\n          (focusables(element)[0] ?? element).focus({ preventScroll: true });\n        } else if (collapsed && !restoreFocus(panel)) {\n          // An app that renders after this effect has not produced its\n          // expand toggle (or relocated it into its work-area toolbar) yet;\n          // look again once the batch settles, then for a few frames.\n          const retry = (frames: number): void => {\n            if (!panel.collapsed.peek() || restoreFocus(panel) || frames === 0)\n              return;\n            globalThis.requestAnimationFrame(() => retry(frames - 1));\n          };\n          globalThis.queueMicrotask(() => retry(3));\n        }\n      }),\n    );\n  }\n\n  // Compact overlay: a dismissable backdrop + Escape + focus trap while compact\n  // and a panel is open.\n  if (deviceClass) {\n    let backdrop: HTMLButtonElement | undefined;\n    // The host state this wire owns, recorded so it can be re-applied: the\n    // app re-renders (and morphs) the root for reasons that never touch a\n    // panel signal (a nav selection, say), and a morph strips attributes and\n    // nodes the template doesn't emit.\n    let hostResponsive: string | undefined;\n    let hostOverlay: string | undefined;\n    let backdropFor: string | undefined;\n    const openPanel = (): WireSidebarPanel | undefined =>\n      panels.find((panel) => !panel.collapsed.value);\n    const removeBackdrop = (): void => {\n      backdrop?.remove();\n      backdrop = undefined;\n      backdropFor = undefined;\n    };\n    const setHostData = (\n      name: 'collapsibleResponsive' | 'collapsibleOverlay',\n      value: string | undefined,\n    ): void => {\n      if (root.dataset[name] === value) return;\n      if (value === undefined) delete root.dataset[name];\n      else root.dataset[name] = value;\n    };\n    // Idempotent, so the observer below settles after one corrective write.\n    const syncHost = (): void => {\n      setHostData('collapsibleResponsive', hostResponsive);\n      setHostData('collapsibleOverlay', hostOverlay);\n      if (!backdrop || backdropFor === undefined) return;\n      const element = panelElement(backdropFor);\n      if (element && backdrop.nextElementSibling !== element)\n        element.parentElement?.insertBefore(backdrop, element);\n    };\n    disposers.push(\n      effect(() => {\n        const compact = deviceClass.value.compact;\n        const overlay = compact && compactPresentation === 'overlay';\n        // A crossing adapts the panels here, in the same effect that owns the\n        // host state. Every panel's state is read so an open or close moves\n        // the backdrop; re-renders that touch no panel are covered by the\n        // observer below.\n        for (const panel of panels) void panel.collapsed.value;\n        if (overlay && !inlineState) {\n          inlineState = new Map(\n            panels.map((panel) => [panel, panel.collapsed.peek()]),\n          );\n          setAll(() => true);\n        } else if (!overlay) {\n          restoreInline();\n        }\n        const open = overlay\n          ? panels.find((panel) => !panel.collapsed.peek())\n          : undefined;\n        hostResponsive = compact ? compactPresentation : 'inline';\n        hostOverlay = compact ? String(overlay) : undefined;\n        if (open) {\n          if (!backdrop) {\n            backdrop = ownerDocument.createElement('button');\n            backdrop.type = 'button';\n            backdrop.className = 'kui-collapsible-panel__backdrop';\n            backdrop.setAttribute('aria-label', 'Close');\n            // Injected after render: the morph's removal pass must skip it.\n            backdrop.dataset.morphPreserve = '';\n            backdrop.addEventListener('click', () => {\n              const current = openPanel();\n              if (current) collapse(current);\n            });\n          }\n          backdropFor = open.id;\n        } else {\n          removeBackdrop();\n        }\n        syncHost();\n      }),\n    );\n    const observer = new MutationObserver(syncHost);\n    observer.observe(root, {\n      attributes: true,\n      attributeFilter: [\n        'data-collapsible-responsive',\n        'data-collapsible-overlay',\n      ],\n      childList: true,\n      subtree: true,\n    });\n    disposers.push(() => observer.disconnect());\n\n    const onKeydown = (event: KeyboardEvent): void => {\n      if (!deviceClass.value.compact || compactPresentation !== 'overlay')\n        return;\n      const open = openPanel();\n      if (!open) return;\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        collapse(open);\n        return;\n      }\n      if (event.key !== 'Tab') return;\n      const element = panelElement(open.id);\n      if (!element) return;\n      const items = focusables(element);\n      if (items.length === 0) return;\n      const first = items[0]!;\n      const last = items[items.length - 1]!;\n      const active = ownerDocument.activeElement;\n      if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    ownerDocument.addEventListener('keydown', onKeydown);\n    disposers.push(() =>\n      ownerDocument.removeEventListener('keydown', onKeydown),\n    );\n    disposers.push(removeBackdrop);\n  }\n\n  return () => {\n    for (const dispose of disposers.splice(0)) dispose();\n    // After every effect is gone, so handing the inline state back cannot\n    // re-create overlay chrome or persist anything.\n    restoreInline();\n    delete root.dataset.collapsibleOverlay;\n    delete root.dataset.collapsibleResponsive;\n  };\n}\n"]}
+{"version":3,"sources":["../src/components/layout/collapsible-panel/wiring/wire-sidebar.ts"],"names":[],"mappings":"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","file":"wire-sidebar.js","sourcesContent":["import { delegate, effect, type ReadonlySignal, type Signal } from 'kerfjs';\n\nimport type { DeviceClass } from '../../../../shared/environment/device-class.js';\n\n/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */\nexport interface SidebarStorage {\n  getItem(key: string): string | null;\n  setItem(key: string, value: string): void;\n}\n\nexport interface WireSidebarPanel {\n  /** The panel id — matches `CollapsiblePanel`'s `id` and a toggle's `panelId`. */\n  id: string;\n  /** The app-owned collapsed signal. `wireSidebar` reads it (focus, overlay) and\n   *  writes it (toggle, Escape, backdrop, persistence). */\n  collapsed: Signal<boolean>;\n  /** `data-action` value the panel's toggle button(s) carry. */\n  toggleAction: string;\n  /** When set, the panel's inline collapsed state is loaded from and saved to\n   *  `storage` under this key (a persistence hook), so the panel remembers the\n   *  user's inline choice. A compact overlay's open/closed state is transient\n   *  and is never persisted. */\n  storageKey?: string;\n  /** The panel's inline (non-compact) collapsed state when `storage` holds no\n   *  choice for it; wire-up seeds the signal with it. Defaults to the signal's\n   *  own value. Set it when the app seeds the signal from the device class\n   *  (`signal(device.value.compact)`) so a compact first render already starts\n   *  collapsed while a later crossing to a wide class still restores this\n   *  inline default. */\n  inlineCollapsed?: boolean;\n}\n\nexport interface WireSidebarOptions {\n  panels: readonly WireSidebarPanel[];\n  /**\n   * When provided, the sidebar adopts a compact **overlay** presentation while\n   * `deviceClass.compact` is true: an open panel floats over the content with a\n   * dismissable backdrop, Escape and backdrop-click collapse it, and focus is\n   * trapped within the open panel (the ARIA dialog pattern). Without it the panel\n   * is always inline.\n   *\n   * An overlay is transient and user-initiated: whenever the compact overlay\n   * presentation begins (wire-up on a compact device, or a crossing from a wide\n   * class), every panel starts collapsed so nothing blocks the page until the\n   * user opens it. The inline state is remembered and restored when the device\n   * crosses back to a wide class (and on disposal).\n   */\n  deviceClass?: ReadonlySignal<DeviceClass>;\n  /** Compact devices either overlay the panels (default) or hide them in favor\n   *  of an application-owned responsive replacement. */\n  compactPresentation?: 'overlay' | 'hidden';\n  /** Collapse the other panels when one opens in compact overlay mode. */\n  exclusiveCompact?: boolean;\n  /** Persistence store (default `globalThis.localStorage`, if present). */\n  storage?: SidebarStorage;\n}\n\nconst FOCUSABLE =\n  'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusables(panel: HTMLElement): HTMLElement[] {\n  // Focus only ever targets an OPEN panel, so the selector (which already drops\n  // disabled controls and tabindex=\"-1\") is sufficient without a layout-based\n  // visibility check that a headless DOM can't answer.\n  return [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)];\n}\n\nfunction defaultStorage(): SidebarStorage | undefined {\n  try {\n    return globalThis.localStorage ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * The reusable sidebar-semantics layer for {@link CollapsiblePanel}s: toggle\n * delegation with focus restore, focus-into on open, an optional compact overlay\n * (backdrop + Escape + focus trap) driven by {@link deviceClass}, and an optional\n * persistence hook. The app owns each `collapsed` signal and the layout; this wire\n * owns the interaction. Returns a disposer. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function wireSidebar(\n  root: HTMLElement,\n  {\n    panels,\n    deviceClass,\n    compactPresentation = 'overlay',\n    exclusiveCompact = true,\n    storage = defaultStorage(),\n  }: WireSidebarOptions,\n): () => void {\n  const ownerDocument = root.ownerDocument;\n  const byAction = new Map(panels.map((panel) => [panel.toggleAction, panel]));\n  const returnFocus = new Map<string, HTMLElement>();\n  const disposers: Array<() => void> = [];\n  // Panels whose next collapsed change is presentation-driven, not a user\n  // action, so it must not move focus the way a toggle does. A set rather than\n  // a flag: writes made inside an effect are batched, so the focus effects run\n  // after the writer returns.\n  const adapting = new Set<WireSidebarPanel>();\n  const overlayActive = (): boolean =>\n    Boolean(deviceClass?.value.compact) && compactPresentation === 'overlay';\n\n  // Initial-state contract: an overlay is transient and only ever opens on a\n  // user action. Entering the overlay presentation (at wire-up or on a wide →\n  // compact crossing) remembers each panel's inline state and collapses it;\n  // leaving it (compact → wide, or disposal) restores the remembered state.\n  let inlineState: Map<WireSidebarPanel, boolean> | undefined;\n  const setAll = (value: (panel: WireSidebarPanel) => boolean): void => {\n    for (const panel of panels) {\n      const next = value(panel);\n      if (panel.collapsed.peek() === next) continue;\n      adapting.add(panel);\n      panel.collapsed.value = next;\n    }\n  };\n  const restoreInline = (): void => {\n    const remembered = inlineState;\n    if (!remembered) return;\n    inlineState = undefined;\n    setAll((panel) => remembered.get(panel)!);\n  };\n\n  // Seed each panel's inline state from storage or `inlineCollapsed`. On a\n  // compact overlay device the seed is only remembered: the panel starts\n  // collapsed, synchronously and before any effect exists, so the first render\n  // after wire-up already has no overlay open.\n  if (overlayActive()) inlineState = new Map();\n  for (const panel of panels) {\n    const stored =\n      panel.storageKey && storage ? storage.getItem(panel.storageKey) : null;\n    const seed =\n      stored === 'true' || stored === 'false'\n        ? stored === 'true'\n        : panel.inlineCollapsed;\n    if (inlineState) {\n      inlineState.set(panel, seed ?? panel.collapsed.peek());\n      panel.collapsed.value = true;\n    } else if (seed !== undefined) {\n      panel.collapsed.value = seed;\n    }\n  }\n\n  // Persistence mirrors inline changes only. An overlay's open/closed state is\n  // transient, so it is never written.\n  for (const panel of panels) {\n    if (!panel.storageKey || !storage) continue;\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (overlayActive()) return;\n        storage.setItem(panel.storageKey!, String(collapsed));\n      }),\n    );\n  }\n\n  const panelElement = (id: string): HTMLElement | null =>\n    root.querySelector<HTMLElement>(`[data-collapsible-panel=\"${id}\"]`);\n\n  const collapse = (panel: WireSidebarPanel): void => {\n    if (panel.collapsed.value) return;\n    panel.collapsed.value = true;\n  };\n\n  // Toggle delegation. The trigger is remembered so focus restores to it on close.\n  disposers.push(\n    delegate(root, 'click', '[data-action]', (_event, element) => {\n      const trigger = element as HTMLElement;\n      const panel = byAction.get(trigger.dataset.action ?? '');\n      if (!panel) return;\n      returnFocus.set(panel.id, trigger);\n      const next = !panel.collapsed.value;\n      panel.collapsed.value = next;\n      if (!next && exclusiveCompact && overlayActive()) {\n        for (const other of panels)\n          if (other !== panel) other.collapsed.value = true;\n      }\n    }),\n  );\n\n  // Where focus goes when a panel closes: the trigger that toggled it, unless\n  // that trigger sits inside the now-hidden panel (the documented\n  // collapse-inside placement) or was re-rendered away. Then it goes to the\n  // panel's toggle outside it — the always-visible expand toggle, which an app\n  // may render only while the panel is collapsed. Returns whether it moved.\n  const restoreFocus = (panel: WireSidebarPanel): boolean => {\n    const element = panelElement(panel.id);\n    const trigger = returnFocus.get(panel.id);\n    const target =\n      trigger?.isConnected && !element?.contains(trigger)\n        ? trigger\n        : [...root.querySelectorAll<HTMLElement>('[data-action]')].find(\n            (candidate) =>\n              candidate.dataset.action === panel.toggleAction &&\n              !element?.contains(candidate),\n          );\n    target?.focus();\n    return target !== undefined;\n  };\n\n  // Focus: move into the panel when it opens; restore it when it closes.\n  for (const panel of panels) {\n    let previous = panel.collapsed.value;\n    disposers.push(\n      effect(() => {\n        const collapsed = panel.collapsed.value;\n        if (collapsed === previous) return;\n        previous = collapsed;\n        const element = panelElement(panel.id);\n        if (adapting.delete(panel)) {\n          // A presentation change, not a user action: only rescue focus that\n          // the collapse would strand inside the now-hidden panel.\n          if (collapsed && element?.contains(ownerDocument.activeElement))\n            restoreFocus(panel);\n          return;\n        }\n        const replaced =\n          deviceClass?.value.compact && compactPresentation === 'hidden';\n        if (!collapsed && element && !replaced) {\n          // Without preventScroll the browser scrolls the panel's clipped,\n          // still-sliding content to reveal the focus target, which then\n          // unwinds as the slide finishes: the content jumps and drifts back.\n          (focusables(element)[0] ?? element).focus({ preventScroll: true });\n        } else if (collapsed && !restoreFocus(panel)) {\n          // An app that renders after this effect has not produced its\n          // expand toggle (or relocated it into its work-area toolbar) yet;\n          // look again once the batch settles, then for a few frames.\n          const retry = (frames: number): void => {\n            if (!panel.collapsed.peek() || restoreFocus(panel) || frames === 0)\n              return;\n            globalThis.requestAnimationFrame(() => retry(frames - 1));\n          };\n          globalThis.queueMicrotask(() => retry(3));\n        }\n      }),\n    );\n  }\n\n  // Compact overlay: a dismissable backdrop + Escape + focus trap while compact\n  // and a panel is open.\n  if (deviceClass) {\n    let backdrop: HTMLButtonElement | undefined;\n    // The host state this wire owns, recorded so it can be re-applied: the\n    // app re-renders (and morphs) the root for reasons that never touch a\n    // panel signal (a nav selection, say), and a morph strips attributes and\n    // nodes the template doesn't emit.\n    let hostResponsive: string | undefined;\n    let hostOverlay: string | undefined;\n    let backdropFor: string | undefined;\n    const openPanel = (): WireSidebarPanel | undefined =>\n      panels.find((panel) => !panel.collapsed.value);\n    const removeBackdrop = (): void => {\n      backdrop?.remove();\n      backdrop = undefined;\n      backdropFor = undefined;\n    };\n    const setHostData = (\n      name: 'collapsibleResponsive' | 'collapsibleOverlay',\n      value: string | undefined,\n    ): void => {\n      if (root.dataset[name] === value) return;\n      if (value === undefined) delete root.dataset[name];\n      else root.dataset[name] = value;\n    };\n    // Idempotent, so the observer below settles after one corrective write.\n    const syncHost = (): void => {\n      setHostData('collapsibleResponsive', hostResponsive);\n      setHostData('collapsibleOverlay', hostOverlay);\n      if (!backdrop || backdropFor === undefined) return;\n      const element = panelElement(backdropFor);\n      if (element && backdrop.nextElementSibling !== element)\n        element.parentElement?.insertBefore(backdrop, element);\n    };\n    disposers.push(\n      effect(() => {\n        const compact = deviceClass.value.compact;\n        const overlay = compact && compactPresentation === 'overlay';\n        // A crossing adapts the panels here, in the same effect that owns the\n        // host state. Every panel's state is read so an open or close moves\n        // the backdrop; re-renders that touch no panel are covered by the\n        // observer below.\n        for (const panel of panels) void panel.collapsed.value;\n        if (overlay && !inlineState) {\n          inlineState = new Map(\n            panels.map((panel) => [panel, panel.collapsed.peek()]),\n          );\n          setAll(() => true);\n        } else if (!overlay) {\n          restoreInline();\n        }\n        const open = overlay\n          ? panels.find((panel) => !panel.collapsed.peek())\n          : undefined;\n        hostResponsive = compact ? compactPresentation : 'inline';\n        hostOverlay = compact ? String(overlay) : undefined;\n        if (open) {\n          if (!backdrop) {\n            backdrop = ownerDocument.createElement('button');\n            backdrop.type = 'button';\n            backdrop.className = 'kui-collapsible-panel__backdrop';\n            backdrop.setAttribute('aria-label', 'Close');\n            // Injected after render: the morph's removal pass must skip it.\n            backdrop.dataset.morphPreserve = '';\n            backdrop.addEventListener('click', () => {\n              const current = openPanel();\n              if (current) collapse(current);\n            });\n          }\n          backdropFor = open.id;\n        } else {\n          removeBackdrop();\n        }\n        syncHost();\n      }),\n    );\n    const observer = new MutationObserver(syncHost);\n    observer.observe(root, {\n      attributes: true,\n      attributeFilter: [\n        'data-collapsible-responsive',\n        'data-collapsible-overlay',\n      ],\n      childList: true,\n      subtree: true,\n    });\n    disposers.push(() => observer.disconnect());\n\n    const onKeydown = (event: KeyboardEvent): void => {\n      if (!deviceClass.value.compact || compactPresentation !== 'overlay')\n        return;\n      const open = openPanel();\n      if (!open) return;\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        collapse(open);\n        return;\n      }\n      if (event.key !== 'Tab') return;\n      const element = panelElement(open.id);\n      if (!element) return;\n      const items = focusables(element);\n      if (items.length === 0) return;\n      const first = items[0]!;\n      const last = items[items.length - 1]!;\n      const active = ownerDocument.activeElement;\n      if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    ownerDocument.addEventListener('keydown', onKeydown);\n    disposers.push(() =>\n      ownerDocument.removeEventListener('keydown', onKeydown),\n    );\n    disposers.push(removeBackdrop);\n  }\n\n  return () => {\n    for (const dispose of disposers.splice(0)) dispose();\n    // After every effect is gone, so handing the inline state back cannot\n    // re-create overlay chrome or persist anything.\n    restoreInline();\n    delete root.dataset.collapsibleOverlay;\n    delete root.dataset.collapsibleResponsive;\n  };\n}\n"]}

package/dist/wire-tab-bars.js

@@ -1,3 +1,3 @@
-export { reorderTabs, wireTabBars } from './chunk-SLWCCHNP.js';
+export { reorderTabs, wireTabBars } from './chunk-H45DAZBL.js';
 
 //# sourceMappingURL=wire-tab-bars.js.map

package/dist/wire-tab-scaffold.js

@@ -1,6 +1,6 @@
 import { delegate } from 'kerfjs';
 
-// src/wire-tab-scaffold.ts
+// src/components/navigation/tab-scaffold/wiring/wire-tab-scaffold.ts
 function wireTabScaffold(root, options) {
   const section = root.matches('[data-component="tab-scaffold"]') ? root : root.querySelector('[data-component="tab-scaffold"]');
   if (!(section instanceof HTMLElement)) return () => {

package/dist/wire-tab-scaffold.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wire-tab-scaffold.ts"],"names":[],"mappings":";;;AAWO,SAAS,eAAA,CACd,MACA,OAAA,EACY;AACZ,EAAA,MAAM,OAAA,GAAU,KAAK,OAAA,CAAQ,iCAAiC,IAC1D,IAAA,GACA,IAAA,CAAK,cAAc,iCAAiC,CAAA;AACxD,EAAA,IAAI,EAAE,OAAA,YAAmB,WAAA,CAAA,EAAc,OAAO,MAAM;AAAA,EAAC,CAAA;AACrD,EAAA,OAAO,QAAA;AAAA,IACL,OAAA;AAAA,IACA,OAAA;AAAA,IACA,yBAAA;AAAA,IACA,CAAC,QAAQ,MAAA,KAAW;AAClB,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,YAAA,CAAa,uBAAuB,CAAA;AACzD,MAAA,IAAI,KAAA,EAAO,OAAA,CAAQ,QAAA,CAAS,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AACF","file":"wire-tab-scaffold.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nexport interface WireTabScaffoldOptions {\n  /** Invoked with the selected tab id when a bottom-bar tab is activated. */\n  onSelect: (tabId: string) => void;\n}\n\n/**\n * Wire a `TabScaffold`'s bottom tab bar: clicking a tab calls `onSelect` with its\n * id (the app then updates its controlled `active`). Returns a disposer.\n */\nexport function wireTabScaffold(\n  root: Element,\n  options: WireTabScaffoldOptions,\n): () => void {\n  const section = root.matches('[data-component=\"tab-scaffold\"]')\n    ? root\n    : root.querySelector('[data-component=\"tab-scaffold\"]');\n  if (!(section instanceof HTMLElement)) return () => {};\n  return delegate(\n    section,\n    'click',\n    '[data-tab-scaffold-tab]',\n    (_event, target) => {\n      const tabId = target.getAttribute('data-tab-scaffold-tab');\n      if (tabId) options.onSelect(tabId);\n    },\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/tab-scaffold/wiring/wire-tab-scaffold.ts"],"names":[],"mappings":";;;AAWO,SAAS,eAAA,CACd,MACA,OAAA,EACY;AACZ,EAAA,MAAM,OAAA,GAAU,KAAK,OAAA,CAAQ,iCAAiC,IAC1D,IAAA,GACA,IAAA,CAAK,cAAc,iCAAiC,CAAA;AACxD,EAAA,IAAI,EAAE,OAAA,YAAmB,WAAA,CAAA,EAAc,OAAO,MAAM;AAAA,EAAC,CAAA;AACrD,EAAA,OAAO,QAAA;AAAA,IACL,OAAA;AAAA,IACA,OAAA;AAAA,IACA,yBAAA;AAAA,IACA,CAAC,QAAQ,MAAA,KAAW;AAClB,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,YAAA,CAAa,uBAAuB,CAAA;AACzD,MAAA,IAAI,KAAA,EAAO,OAAA,CAAQ,QAAA,CAAS,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AACF","file":"wire-tab-scaffold.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nexport interface WireTabScaffoldOptions {\n  /** Invoked with the selected tab id when a bottom-bar tab is activated. */\n  onSelect: (tabId: string) => void;\n}\n\n/**\n * Wire a `TabScaffold`'s bottom tab bar: clicking a tab calls `onSelect` with its\n * id (the app then updates its controlled `active`). Returns a disposer.\n */\nexport function wireTabScaffold(\n  root: Element,\n  options: WireTabScaffoldOptions,\n): () => void {\n  const section = root.matches('[data-component=\"tab-scaffold\"]')\n    ? root\n    : root.querySelector('[data-component=\"tab-scaffold\"]');\n  if (!(section instanceof HTMLElement)) return () => {};\n  return delegate(\n    section,\n    'click',\n    '[data-tab-scaffold-tab]',\n    (_event, target) => {\n      const tabId = target.getAttribute('data-tab-scaffold-tab');\n      if (tabId) options.onSelect(tabId);\n    },\n  );\n}\n"]}

package/dist/wire-token-search-fields.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from 'kerfjs';
-import { d as TokenSearchModel } from './token-search-field-CVGwDn2y.js';
+import { d as TokenSearchModel } from './token-search-model-DTcTXWMS.js';
 import './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchSubmit {

package/dist/wire-token-search-fields.js

@@ -1,4 +1,4 @@
-export { wireTokenSearchFields } from './chunk-NPNSKX3K.js';
+export { wireTokenSearchFields } from './chunk-VLPE6OPN.js';
 
 
 

package/dist/wire-workbench.js

@@ -1,4 +1,4 @@
-export { wireWorkbench } from './chunk-V4WLBOVJ.js';
+export { wireWorkbench } from './chunk-5BZBIRQG.js';
 
 
 

package/dist/workbench.d.ts

@@ -1,14 +1,14 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { ListConfig } from './list.js';
 import { NavStackProps } from './nav-stack.js';
 import { PaneConfig } from './pane.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
-import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-CL9tYOkh.js';
 import { ToolbarConfig } from './toolbar.js';
-import { a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-DDKh4uKd.js';
-import './css-values.js';
 import './flex-alignment-4ms8ZbV8.js';
 import './sides-BPSWde0A.js';
+import './css-values.js';
 import './toolbar-text.js';
 import './lucide-icon.js';
 import 'lucide';

package/dist/workbench.js

@@ -1,4 +1,4 @@
-export { Workbench } from './chunk-O5GM2JAM.js';
+export { Workbench } from './chunk-7QWIJEK5.js';
 
 
 

package/docs/collapsible-panel.md

@@ -343,7 +343,7 @@ covers. See [Choosing an app layout › Safe areas](app-layouts.md#safe-areas).
 - A whole Xcode-like workspace (left rail + right rail + bottom drawer + work area
   in one shell) → **[`Workbench`](workbench.md)**, which owns the layout and the same
   collapse animation.
-- Drag-to-resize a panel → compose **[`ResizableRegion`](../src/resizable-region.tsx)**
+- Drag-to-resize a panel → compose **[`ResizableRegion`](../src/components/layout/resizable-region/resizable-region.tsx)**
   / `wireResizableRegions`; the app owns the size signal.
 
 The app still owns everything domain-specific — which panels exist, their order,

package/docs/component-contract.md

@@ -2,6 +2,16 @@
 
 `@kerfjs/ui` components are plain functions that return Kerf `SafeHtml`. They have no component instance or lifecycle.
 
+### Shared semantic tones
+
+`SemanticTone` is the shared color-role type for `Badge`, `Chip`, `StateBanner`,
+and semantic `ContentItem` appearances: `neutral`, `info`, `pop`, `success`,
+`warning`, and `danger`. Import it as a type from `@kerfjs/ui`,
+`@kerfjs/ui/badge`, `@kerfjs/ui/state-banner`, or `@kerfjs/ui/content-item`.
+Use `info` for the role backed by the existing `--kui-color-brand-*` tokens.
+Migrate Badge/Chip `tone="brand"` to `tone="info"`; `BadgeTone` and
+`StateBannerTone` remain deprecated aliases of `SemanticTone`.
+
 ## Selection boundary
 
 Begin with the [need-first component matrix](./component-selection.md). Reuse a
@@ -271,11 +281,11 @@ against the combined Kerf and consumer catalogs; do not duplicate a Kerf id.
 For Doctor's opt-in component ownership mode, add `styleSources` with the CSS
 paths each entry owns, relative to the consumer package root.
 
-- Components own semantic markup, stable anatomy, documented variants, ARIA projection, and package CSS hooks.
+- Components own semantic markup, stable anatomy, documented variants, ARIA projection, and package CSS hooks. They may render and style raw HTML or Web Awesome implementation elements they create and control. A nested Kerf or application component remains its own owner even when the parent renders it.
 - Applications own signals/stores, product copy, domain-state mapping, persistence, routing, permissions, and transport.
 - Actions are `data-action` strings. Wire them at a stable root with `delegate()` or `delegateActions()` and retain the disposer.
 - A reusable component never owns per-instance mutable module state.
-- Consumers configure presentation through component props and documented `--kui-*` semantic tokens. Foundation tokens provide opinionated neutral, brand/info, non-status pop, success, warning, and danger fill/border/foreground roles. Application stylesheets must not select package component classes or descendants. If genuinely new structure needs CSS, encapsulate that structure and its stylesheet in an application-owned component; configure any nested Kerf components through their public APIs.
+- Consumers configure presentation through component props and documented `--kui-*` semantic tokens. Foundation tokens provide opinionated neutral, brand/info, non-status pop, success, warning, and danger fill/border/foreground roles. Application stylesheets must not select package component classes or descendants. If genuinely new structure needs CSS, encapsulate that structure and its stylesheet in an application-owned component; configure any nested Kerf components through their public APIs. A thin composition that only connects other components should normally have no stylesheet. It may style only raw elements or layout it owns, never its component children.
 
 `ListItem.rootAttributes`, `ListActionRow.rootAttributes`,
 `ListHeader.rootAttributes`, `AppTab.rootAttributes`,
@@ -336,9 +346,10 @@ elements keyed on a child's state, naming the child by class inside `:has()`
 holds compact tabs), and it keeps styling raw native and raw Web
 Awesome children no kerf component owns, excluding kerf children by class
 (`wa-dropdown:not(.kui-popup-menu)`). `npm run check:css-ownership` enforces
-this in every component stylesheet (a `src/*.css` with a same-basename
-component), deriving the component names, the Web Awesome tags each component
-renders, and its composed children from `src/*.tsx`:
+this in every component stylesheet (a same-basename `.css` and `.tsx` pair
+under `src/components/<family>/<component>/`), deriving the component names,
+the Web Awesome tags each component renders, and its composed children from the
+colocated component source:
 
 - **Foreign classes.** Another component's class or `[data-component]` may
   appear only in an ancestor compound or inside `:has()` / `:not()`; the
@@ -507,7 +518,11 @@ declarations.
 `ContentItem` (`@kerfjs/ui/content-item`, rendering `.kui-content-item`) gives
 one child 8px inline margin, a real 1px border, 8px padding, and 12px corners;
 the border stays transparent unless `frame="framed"`, so framing never changes
-geometry. `shape="pill"` selects the 22px radius.
+geometry. `shape="pill"` selects the 22px radius. `appearance="surface"`
+paints the base surface, while `neutral`, `info`, `pop`, `success`, `warning`,
+and `danger` coordinate the same quiet background, border, and readable
+foreground tokens as `StateBanner`. The default `transparent` appearance
+preserves the surrounding surface.
 `flush` removes block padding and borders while preserving inline geometry;
 `title` passes through as the native tooltip. Interactive hover uses the normal
 neutral fill so it remains visible on a lowered surface. For a card with
@@ -746,6 +761,9 @@ triangle. The SVG uses `fill="currentColor"`, so fill follows the icon's text
 color without styling its internal SVG from the application. Choose a Lucide
 node whose geometry supports a solid fill; the prop does not replace an icon
 node's own fill attributes.
+The SVG is block-level by default. Pass `inline` when it belongs inside a
+sentence or `Text`: the SVG becomes `inline-block`, keeps its inherited 1em
+size unless `size` is supplied, and stays decorative unless `label` is set.
 
 `LoadingSpinner` accepts the same `size` steps as `LucideIcon`: `xs`, `s`, `m`,
 `l`, `xl` (12/16/20/24/32px at a 16px root) or a positive finite pixel
@@ -820,7 +838,7 @@ alphas, and dark raises them (`--wa-shadow-s` 14% to 50% black, `-m` 11% to
 page.
 Kerf owns the light `brand`, `success`, and `warning` `on-quiet` values in that
 theme layer: each keeps its hue but is dark enough to clear WCAG AA (4.5:1) on
-the lowered page background (`--kui-color-surface-lowered`, `#f2f2f7`), not
+the lowered page background (`--kui-color-surface-lowered`, approximately `#f2f2f7` over white), not
 only on the white surface, so toned text reads on every background a page
 paints. It likewise owns every tone's loud pair: each `on-loud` text color
 clears AA on its `fill-loud` in both schemes. Light brand and danger keep white

package/docs/component-selection.md

@@ -25,11 +25,23 @@ Kerf or Web Awesome component from that stylesheet. See
 [`design-philosophy.md`](./design-philosophy.md) "Reach for the primitive, not for
 CSS".
 
+### Shared semantic tones
+
+`SemanticTone` is the shared color-role type for `Badge`, `Chip`, `StateBanner`,
+and semantic `ContentItem` appearances: `neutral`, `info`, `pop`, `success`,
+`warning`, and `danger`. Import it as a type from `@kerfjs/ui`,
+`@kerfjs/ui/badge`, `@kerfjs/ui/state-banner`, or `@kerfjs/ui/content-item`.
+Use `info` for the role backed by the existing `--kui-color-brand-*` tokens.
+Migrate Badge/Chip `tone="brand"` to `tone="info"`; `BadgeTone` and
+`StateBannerTone` remain deprecated aliases of `SemanticTone`.
+
 ## Foundation tokens
 
 Import the opt-in `@kerfjs/ui/document.css` baseline when the application wants
 Kerf UI to own global box sizing, body typography/colors, plain-link color, and
-the definite full-height chain. Put `.kui-app-root` on the one direct mount
+the definite full-height chain. It also lets native table cells and form controls
+inherit the surrounding font metrics without removing table-header emphasis.
+Put `.kui-app-root` on the one direct mount
 container only for a full-height shell; ordinary flowing pages can omit it. See
 [Document baseline](document-baseline.md).
 
@@ -86,6 +98,8 @@ keywords for width/height); and `SelectChoice.color` takes a
 role, or a `*-text` alias), from `foregroundColorVar()`, or from `foregroundColor()` via the `foregroundColor` helper for an application-chosen CSS color. `LucideIcon.color` accepts the same foreground type and otherwise inherits surrounding text color. The bare `success`,
 `warning`, `danger`, `pop`, and `accent` tokens are quiet fills, not
 foregrounds, and are rejected there; `colorVar()` returns a plain `CssColor`.
+`LucideIcon` is block-level by default; set `inline` to let it flow inside
+`Text` or other prose without changing its size or accessibility semantics.
 Do not substitute one brand for another. Row components
 have no declaration-string `style` prop; use `className`, documented public
 tokens, and semantic component props. Catalog media queries remain strings and
@@ -149,13 +163,13 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Toolbar identity text — `ToolbarText`                                                                                   | A toolbar needs extra-large (page/panel title), large, default, or compact textual identity.                                                                                                                                                                                                                                                             | Plain text is not a heading by default; when a title needs heading semantics pass `headingLevel`. Sizes below `xlarge` are intentionally quiet identity text with no tone option — do not use them as a normal-color subsection title; use `Text` with an `h2`–`h6` variant, or `ListHeader` for a list section.                           | Optional `headingLevel` for `role="heading"` + `aria-level`. Defaults to one line, ellipsized when it does not fit; `wrap` flows onto multiple lines, `ellipsis` toggles the trailing …, and `maxLines` caps a wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Text, heading level, overflow behavior, and responsive priority.                                                                                         | `@kerfjs/ui/toolbar-text`                                                                 | [Toolbar composition](../README.md#component-subpaths)                              |
 | Semantic block or inline text — `Text`                                                                                  | Ordinary application copy needs native `h1`–`h6` or `p` semantics plus standard geometry, or inline secondary copy needs a native `span` without box geometry.                                                                                                                                                                                           | Do not choose heading levels for appearance alone or recreate muted, error, small, or code utility classes. Use `ToolbarText` for toolbar identity/title content and `ListInsetText` when list-aligned prose needs full margin/border/padding geometry.                                                                                    | Omit `variant` for the default `p`, choose `h1`–`h6` from the document outline, or choose `span` inside a row, label, or table cell. Independently compose `tone="quiet                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | danger"`, `size="compact"`, and `font="monospace"`; ordinary native global, `data-_`, and `aria-_` attributes pass through.                              | Copy, localization, semantic variant, presentation roles, and document heading hierarchy. | `@kerfjs/ui/text`                                                                   | [Text](./layout.md#text) |
 | Vertical stack — `List`                                                                                                 | Rows, sections, or arbitrary components need a consistent vertical stretch layout, optional standard/custom gap, flex growth, one vertical scroll owner, or edge dividers.                                                                                                                                                                               | It is layout-only and does not provide `ul`/`ol` semantics. Do not nest scroll owners or use it when a horizontal layout is required.                                                                                                                                                                                                      | Choose `gap`, `flex`, `scrollable`, and canonical `dividerSides` (`t`, `r`, `b`, `l` combinations in that order); bound the block size when scrolling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Child semantics/content, containing height, and which optional layout behaviors apply.                                                                   | `@kerfjs/ui/list`                                                                         | [Pane geometry](../README.md#pane-and-content-geometry)                             |
-| Equal-width columns — `Grid`                                                                                            | Equal-width sibling columns need a fixed count or should collapse as their container narrows, while preserving equal tracks despite intrinsic child widths.                                                                                                                                                                                              | Do not use it for intrinsic, asymmetric, spanning, or masonry tracks; use application-owned CSS grid. Do not use it for a user-operable separator; use `ResizableRegion`.                                                                                                                                                                  | Choose fixed `columns` or typed `minColumnWidth`, plus a typed `gap` and optional `flex`; responsive tracks preserve source order.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Child semantics/content, outer width, fixed count or minimum width, and typed gap/flex choices.                                                          | `@kerfjs/ui/grid`                                                                         | [Grid](./layout.md#grid)                                                            |
+| Equal-width columns — `Grid`                                                                                            | Equal-width sibling columns need a fixed count or should collapse as their container narrows, while preserving equal tracks despite intrinsic child widths.                                                                                                                                                                                              | Do not use it for intrinsic, asymmetric, spanning, or masonry tracks; use application-owned CSS grid. Do not use it for a user-operable separator; use `ResizableRegion`.                                                                                                                                                                  | Choose fixed `columns` or typed `minColumnWidth`, plus typed `gap`, optional `flex`, and physical-side `textInsets` / `controlInsets` when the track group needs a standard text or control inset; text wins on overlap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Child semantics/content, outer width, fixed count or minimum width, and typed gap/flex/inset choices.                                                    | `@kerfjs/ui/grid`                                                                         | [Grid](./layout.md#grid)                                                            |
 | Navigation row — `ListItem`                                                                                             | A pane or navigation area needs a selectable, disabled, dormant-trailing, or multiline action row.                                                                                                                                                                                                                                                       | Do not put a control in `trailing`; use `ListActionRow` when the trailing region must be independently interactive. Use an `<a>` for navigation that must retain link behavior, a native `<button>` for an ordinary action, or implement the complete ARIA menu widget.                                                                    | Delegate its `data-action`; compose inside a `.kui-content` section. Put domain event/drop metadata in `rootAttributes` rather than adding wrapper markup. The rounded root clips overflowing descendants; set `multiline` when the primary label should wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Routing, selection, permissions, copy, action handling, and domain `data-*` values.                                                                      | `@kerfjs/ui/list-item`                                                                    | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Navigation row with trailing action — `ListActionRow`                                                                   | A full-width row needs a selectable primary action and an independently focusable trailing action.                                                                                                                                                                                                                                                       | Use `ListItem` when trailing content is dormant metadata. Do not put controls inside the row's `label`, `icon`, or `trailingActionIcon` SafeHtml slots. Do not use `AppTab` outside tablist semantics or `ToolbarControlGroup` outside a toolbar.                                                                                          | Delegate both action strings; update controlled selection and any popover/context-menu state in the app.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Routing, selection, both action policies, domain metadata, and popover/context-menu behavior.                                                            | `@kerfjs/ui/list-action-row`                                                              | [Accessibility](./accessibility.md#listactionrow)                                   |
 | Navigation section heading — `ListHeader`                                                                               | A menu section needs a full-width label, semantic count, non-count badge, logical-end action, or real disclosure state.                                                                                                                                                                                                                                  | Do not concatenate counts into `label` or put numeric content in `badge`; use `count` with the localized full phrase in `countLabel`. Do not add a disclosure arrow to navigation that reveals nothing. Keep its 44px hit target; do not resize its 36px square. Do not use it as a page, panel, or dialog title; use a heading `Toolbar`. | Delegate its optional action; the app controls expanded state and revealed content. Toggle mode supplies `DisclosureArrow` unless `actionIcon` replaces it. Use `triggerAttributes` only for domain `data-*` or a native popover relationship.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Section organization, valid count and localized count label, disclosure state and content, non-count badge content, popover target behavior, and policy. | `@kerfjs/ui/list-header`                                                                  | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Inset self-bordered control — `ListInsetControl`                                                                        | A control that owns its own border and padding but no outer margin (a search input, a `SegmentedControl`) must line up inside a `.kui-content` list with the standard 8px inline margins and stretch to fill the row.                                                                                                                                    | Do not wrap a `.kui-content-item` or a `ListItem`/`ListHeader` that already owns its inline margin — that double-insets it. Do not add ad-hoc `margin`/`padding` around a bare control to align it; use this instead.                                                                                                                      | Place the self-bordered control(s) as children; they stretch to fill. It applies only the inline margin, flex stretch, and 8px gap — the child owns its own border and padding.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | The control(s), their state, and action wiring.                                                                                                          | `@kerfjs/ui/list-inset-control`                                                           | [Pane geometry](../README.md#component-subpaths)                                    |
 | Inset bare text — `ListInsetText`                                                                                       | A plain string or inline content with no margin, border, or padding of its own must sit in a `.kui-content` list with its text edge aligned to the bordered items around it.                                                                                                                                                                             | Do not use it to wrap a component that already owns content-item geometry (`ListItem`, `StateBanner`, a `.kui-content-item`) — that double-insets it. Do not hand-roll the 8px margin / 1px border / 8px padding.                                                                                                                          | Pass the text or inline `SafeHtml` as children; it supplies the 8px inline margin, 1px transparent border, and 8px padding so the text edge lands at the standard 17px inset. Pass `sides="rl"` to keep that horizontal inset but drop the vertical margin, border, and padding for tight text layout.                                                                                                                                                                                                                                                                                                                                                                                                                 | The text, copy, and localization.                                                                                                                        | `@kerfjs/ui/list-inset-text`                                                              | [Pane geometry](../README.md#component-subpaths)                                    |
-| Self-contained content child — `ContentItem`                                                                            | An ordinary surface-like child of a `Pane` or `.kui-content` stack needs the shared 8px margin / 1px border / 8px padding geometry; pass `frame="framed"` only when it marks a real distinction and must read as visibly bounded, and `shape="pill"` for the 22px radius.                                                                                | Do not wrap a component that already owns content-item geometry (`ListItem`, `ListHeader`, `StateBanner`, `Toolbar`, `ValueTable`) or pad around it — that double-insets. Do not frame an item only to make it look contained. Use `SunkenPanel` for a lowered filled surface and `ListInsetText` for bare text that only needs to align.  | Pass the item content as children; choose `frame` (`none` default, `framed`) and `shape` (`rounded` default, `pill`) instead of writing `.kui-content-item` modifier classes. Put safe `data-*` metadata in `rootAttributes`; `ariaLabel` names a distinct region and `focusTarget` makes it a programmatic focus target.                                                                                                                                                                                                                                                                                                                                                                                              | The content and whether it marks a distinction worth a visible frame.                                                                                    | `@kerfjs/ui/content-item`                                                                 | [Content items](./layout.md#content-items)                                          |
+| Self-contained content child — `ContentItem`                                                                            | An ordinary surface-like child of a `Pane` or `.kui-content` stack needs the shared 8px margin / 1px border / 8px padding geometry; pass `frame="framed"` only when it marks a real distinction, `appearance="surface"` or a semantic appearance for coordinated surface colors, and `shape="pill"` for the 22px radius.                                 | Do not wrap a component that already owns content-item geometry (`ListItem`, `ListHeader`, `StateBanner`, `Toolbar`, `ValueTable`) or pad around it — that double-insets. Do not frame an item only to make it look contained. Use `SunkenPanel` for a lowered inset stack and `ListInsetText` for bare text that only needs to align.     | Pass the item content as children; choose `appearance` (`transparent` default, `surface`, or a semantic status), `frame`, and `shape` instead of writing CSS. Put safe `data-*` metadata in `rootAttributes`; `ariaLabel` names a distinct region and `focusTarget` makes it a programmatic focus target.                                                                                                                                                                                                                                                                                                                                                                                                              | The content, surface or status appearance, and whether it marks a distinction worth a visible frame.                                                     | `@kerfjs/ui/content-item`                                                                 | [Content items](./layout.md#content-items)                                          |
 | Application column — `Pane`                                                                                             | A sidebar, main area, inspector, or dialog needs shared vertical header/content/footer organization, one scroll owner, and optional edge separators.                                                                                                                                                                                                     | Do not pad the pane shell, wrap child-owned geometry in competing insets, invent unrelated centered measures, or leave an icon-only rail for a hidden pane.                                                                                                                                                                                | Import `Pane`, use `children` for its homogeneous primary content and the named `SafeHtml` prop slots `header`/`footer` for optional fixed chrome, then opt into only the needed logical-edge separators; add `ContentItem` children as needed. A visible pane owns collapse in its toolbar; move a hidden inline-start pane's restore control to the main toolbar leading edge and an inline-end pane's restore control to its trailing edge.                                                                                                                                                                                                                                                                         | Layout hierarchy, reading width, responsive relocation, pane visibility state, slot semantics, labels, and separator placement.                          | `@kerfjs/ui/pane`                                                                         | [Pane anatomy](./layout.md#anatomy)                                                 |
 | Scroll dividers — `wireScrollDividers`                                                                                  | Pinned chrome (a `Pane` header or footer, a `NavStack` top chrome or bottom toolbar, a `TabScaffold` bar, the sides of a `TabBar` strip, or app-owned chrome around a scroller) needs a divider only while content is scrolled away beneath it.                                                                                                          | Do not keep a static toolbar divider to fake it or write a border onto another component; each component draws its own line from the wiring's state.                                                                                                                                                                                       | Call `wireScrollDividers` once at the app root and retain the disposer; it covers every `Pane`, `NavStack`, `TabScaffold`, and `TabBar` below it. Name app-owned arrangements in `targets` by id; a `Toolbar` or `List` named as chrome draws its facing side. Configure a pane with `chromeDividers` (`scroll` default, `always`, `none`).                                                                                                                                                                                                                                                                                                                                                                            | Which panes follow the scroll, app-owned targets, and the disposer.                                                                                      | `@kerfjs/ui/wire-scroll-dividers`                                                         | [Scroll dividers](./layout.md#scroll-dividers)                                      |
 | One-pane navigation — `NavStack`                                                                                        | A compact flow pushes into details while keeping earlier views mounted, or a single-pane screen needs the same stable layout contract.                                                                                                                                                                                                                   | Do not use it when list and detail should remain visible together; use `SplitView`. Do not use it alone for co-equal top-level destinations; use one stack per `TabScaffold` tab.                                                                                                                                                          | Keep the ordered view array controlled, put view-specific bottom chrome on each view (or use the component fallback), import its CSS explicitly, and call `wireNavStack` for back delegation, content-slide/chrome-cross-fade transitions, and focus move/restore. Mark a preferred initial target with `data-nav-focus` when DOM order is insufficient.                                                                                                                                                                                                                                                                                                                                                               | View keys/content/titles, push and pop actions, preferred initial focus targets, and per-view or persistent bottom toolbar content.                      | `@kerfjs/ui/nav-stack`                                                                    | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
@@ -593,7 +607,7 @@ requires a string label so the title cannot lose text hidden inside markup.
 ```tsx
 <Chip
   size="compact"
-  tone="brand"
+  tone="info"
   itemId={tag.id}
   removeAction="remove-tag"
   removeLabel={`Remove ${tag.name} tag`}

package/docs/design/templates/empty-state/filtered-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 190" width="460" height="190"><defs><clipPath id="cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">No tickets match the current filters.</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 190" width="460" height="190"><defs><clipPath id="cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">No tickets match the current filters.</text></svg>

package/docs/design/templates/empty-state/filtered.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 190" width="460" height="190"><defs><clipPath id="cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">No tickets match the current filters.</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 190" width="460" height="190"><defs><clipPath id="cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(98,98,103)">No tickets match the current filters.</text></svg>

package/docs/design/templates/empty-state/with-action-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(44,44,46)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New ticket</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(44,44,46)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New ticket</text></svg>

package/docs/design/templates/empty-state/with-action.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(255,255,255)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New ticket</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(98,98,103)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(255,255,255)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New ticket</text></svg>

package/docs/design/templates/empty-state-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 502" width="492" height="502"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="cp1"><rect x="16" y="296" width="460" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="274" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="296" width="460" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="502" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Icon, title, detail, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="svgimg4ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="svgimg4ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="svgimg4ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg4svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(44,44,46)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New ticket</text></g></g></g></g><text x="16" y="286" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">No results for a filter</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="296" width="460" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 296)"><defs><clipPath id="svgimg7cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="svgimg7ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="svgimg7ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg7svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">No tickets match the current filters.</text></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 502" width="492" height="502"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="cp1"><rect x="16" y="296" width="460" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="274" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="296" width="460" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="502" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Icon, title, detail, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="svgimg4ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="svgimg4ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="svgimg4ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg4svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(44,44,46)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New ticket</text></g></g></g></g><text x="16" y="286" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">No results for a filter</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="296" width="460" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 296)"><defs><clipPath id="svgimg7cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="svgimg7ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="svgimg7ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg7svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,194,198)">No tickets match the current filters.</text></g></g></g></g></svg>

package/docs/design/templates/empty-state.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 502" width="492" height="502"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="cp1"><rect x="16" y="296" width="460" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="274" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="296" width="460" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="502" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Icon, title, detail, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="svgimg4ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="svgimg4ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="svgimg4ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg4svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(255,255,255)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New ticket</text></g></g></g></g><text x="16" y="286" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">No results for a filter</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="296" width="460" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 296)"><defs><clipPath id="svgimg7cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="svgimg7ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="svgimg7ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg7svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">No tickets match the current filters.</text></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 502" width="492" height="502"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="cp1"><rect x="16" y="296" width="460" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="274" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="296" width="460" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="502" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Icon, title, detail, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="214" y="53" width="32" height="32"/></clipPath><clipPath id="svgimg4ct2"><rect x="157.7" y="101" width="144.7" height="23"/></clipPath><clipPath id="svgimg4ct3"><rect x="73.7" y="132" width="312.7" height="20.3"/></clipPath><clipPath id="svgimg4ct4"><rect x="179.6" y="168.3" width="100.8" height="32"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="212" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg4svgic1"><rect x="214" y="53" width="32" height="32"/></clipPath><g clip-path="url(#svgimg4svgic1)"><g transform="translate(214 53)scale(1.33333)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="157.67" y="120" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No open tickets</text><text x="73.67" y="147" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(98,98,103)">When someone files a ticket it will show up here.</text><rect x="179.6" y="168.3" width="100.8" height="32" rx="16" fill="rgb(255,255,255)"/><text x="191.63" y="190.3" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New ticket</text></g></g></g></g><text x="16" y="286" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">No results for a filter</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="296" width="460" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 296)"><defs><clipPath id="svgimg7cp0"><rect x="214" y="66" width="32" height="32.3"/></clipPath><clipPath id="svgimg7ct2"><rect x="174.4" y="114.3" width="111.2" height="23"/></clipPath><clipPath id="svgimg7ct3"><rect x="115.7" y="145.3" width="228.6" height="20.3"/></clipPath></defs><rect x="28.5" y="20.5" width="403" height="191" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg7svgic1"><rect x="214" y="66.3" width="32" height="32"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(214 66.344)scale(1.33333)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="1.5px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="174.42" y="133.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">No matches</text><text x="115.72" y="160.34" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(98,98,103)">No tickets match the current filters.</text></g></g></g></g></svg>

package/docs/design/templates/list/stack-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 230" width="420" height="230"><defs><clipPath id="cp0"><rect x="29" y="26.5" width="97.8" height="31"/></clipPath><clipPath id="ct1"><rect x="29" y="26.5" width="97.8" height="31"/></clipPath><clipPath id="ct2"><rect x="134.8" y="32" width="20.3" height="20"/></clipPath><clipPath id="cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="cp9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ct10"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="cp11"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="ov12"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="cp13"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="cp15"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ov16"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="cp17"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ct18"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">WORKSPACE</text></g></g><rect x="134.8" y="32" width="20.3" height="20" rx="10" fill="rgb(17,17,19)"/><rect x="135.5" y="32.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="141.41" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(174,174,178)">2</text><g clip-path="url(#cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ov8)"><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Inbox</text></g></g></g></g></g></g><g clip-path="url(#cp11)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov12)"><g clip-path="url(#cp13)"><g color="rgb(245, 245, 247)"><clipPath id="svgic14"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgic14)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp15)"><g clip-path="url(#ov16)"><g clip-path="url(#cp17)"><g clip-path="url(#ct18)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Projects</text></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 230" width="420" height="230"><defs><clipPath id="cp0"><rect x="29" y="26.5" width="97.8" height="31"/></clipPath><clipPath id="ct1"><rect x="29" y="26.5" width="97.8" height="31"/></clipPath><clipPath id="ct2"><rect x="134.8" y="32" width="20.3" height="20"/></clipPath><clipPath id="cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="cp9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ct10"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="cp11"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="ov12"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="cp13"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="cp15"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ov16"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="cp17"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ct18"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">WORKSPACE</text></g></g><rect x="134.8" y="32" width="20.3" height="20" rx="10" fill="rgba(228,228,255,0.075)"/><rect x="135.5" y="32.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="141.41" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,194,198)">2</text><g clip-path="url(#cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ov8)"><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Inbox</text></g></g></g></g></g></g><g clip-path="url(#cp11)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov12)"><g clip-path="url(#cp13)"><g color="rgb(245, 245, 247)"><clipPath id="svgic14"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgic14)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp15)"><g clip-path="url(#ov16)"><g clip-path="url(#cp17)"><g clip-path="url(#ct18)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Projects</text></g></g></g></g></g></g></svg>