@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/divider-sides-267FA7sY.d.ts

@@ -1,4 +0,0 @@
-/** Canonical physical edge combinations for components that draw dividers. */
-type DividerSides = '' | 't' | 'r' | 'b' | 'l' | 'tr' | 'tb' | 'tl' | 'rb' | 'rl' | 'bl' | 'trb' | 'trl' | 'tbl' | 'rbl' | 'trbl';
-
-export type { DividerSides as D };

package/dist/panel-header.d.ts

@@ -1,42 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-import { HeadingLevel } from './toolbar-text.js';
-
-interface PanelHeaderBaseProps {
-    title: string;
-    titleId: string;
-    icon?: SafeHtml;
-    iconClassName?: string;
-    actions?: SafeHtml;
-    /**
-     * Expose the title as a heading landmark (`role="heading"` + `aria-level`). Set it
-     * for a PAGE or view heading so screen-reader heading navigation works and the view
-     * has a primary heading; omit it (the default) for a dialog title, which is instead
-     * referenced via `aria-labelledby={titleId}` and needs no heading landmark.
-     */
-    headingLevel?: HeadingLevel;
-    /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */
-    placeholder?: boolean;
-}
-type PanelHeaderSummaryProps = {
-    summary: string;
-    summaryId?: string;
-} | {
-    summary?: never;
-    summaryId?: never;
-};
-type PanelHeaderProps = PanelHeaderBaseProps & PanelHeaderSummaryProps;
-/**
- * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone
- * holds an optional icon control group and the title as extra-large `ToolbarText`,
- * whose trailing zone holds the app's action controls, and with an optional
- * subtitle on its own row, left-aligned with the title.
- *
- * PanelHeader overrides no Toolbar styles — it is just a Toolbar with an xl title.
- * The only styling it adds is the icon group's fill/border color and the subtitle.
- * When no icon is provided, the icon group is omitted entirely. The `actions` slot
- * is passed straight into the toolbar's trailing zone; the app supplies whatever
- * trailing controls it needs (typically a `ToolbarControlGroup`).
- */
-declare function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, headingLevel, placeholder, }: PanelHeaderProps): SafeHtml;
-
-export { PanelHeader, type PanelHeaderProps };

package/dist/panel-header.js

@@ -1,7 +0,0 @@
-export { PanelHeader } from './chunk-7XRDUG4Y.js';
-
-
-
-
-
-//# sourceMappingURL=panel-header.js.map

package/dist/panel-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"panel-header.js"}

package/dist/styles/panel-header.css

@@ -1,64 +0,0 @@
-.kui-panel-header {
-  display: grid;
-  width: 100%;
-  gap: 0;
-}
-
-/* The only chrome PanelHeader adds to the plain Toolbar: the icon group is a
-   normal (bordered) control group given a brand fill, with its border color set
-   to match the fill so it reads as a solid filled tile rather than a bordered
-   pill. Both are the group's own theming variables — no Toolbar style is
-   overridden. */
-.kui-panel-header__icon.kui-toolbar-control-group {
-  --kui-toolbar-control-background: var(
-    --kui-panel-header-icon-background,
-    var(--kui-color-brand-fill-quiet)
-  );
-  --kui-toolbar-control-border: var(
-    --kui-panel-header-icon-border,
-    var(--kui-color-brand-fill-quiet)
-  );
-  color: var(
-    --kui-panel-header-icon-foreground,
-    var(--kui-color-brand-on-quiet)
-  );
-  /* The icon is a raw svg child (not a button), so the group's default
-     flex-start alignment would pin it to the left of the filled tile. Center it
-     on both axes inside the circle. */
-  justify-content: center;
-}
-
-.kui-panel-header__icon svg {
-  display: block;
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
-/* The subtitle sits on its own row, its text left-aligned with the title text
-   (past the toolbar padding, the optional icon group + leading gap, and the
-   title's own inline padding). */
-.kui-panel-header__summary {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  padding-inline-start: var(--kui-panel-header-title-inset);
-  color: var(--kui-color-text-quiet);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kui-panel-header[data-has-icon="false"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}
-
-.kui-panel-header[data-has-icon="true"] {
-  --kui-panel-header-title-inset: calc(
-    var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      var(--kui-toolbar-gap, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-}

package/dist/styles/tab-scaffold.css

@@ -1,84 +0,0 @@
-.kui-tab-scaffold {
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-  height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  background: var(--kui-color-surface);
-}
-
-.kui-tab-scaffold__scenes {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* Every tab stays mounted (its NavStack keeps its stack and scroll); only the
-   active scene is shown. */
-.kui-tab-scaffold__scene {
-  position: absolute;
-  overflow: auto;
-  inset: 0;
-}
-
-.kui-tab-scaffold__scene[data-active="false"] {
-  visibility: hidden;
-}
-
-.kui-tab-scaffold__bar {
-  display: flex;
-  flex: 0 0 auto;
-  padding-block-start: var(--kui-space-2xs);
-  /* Respect the home-indicator safe area on iOS-class devices. */
-  padding-block-end: calc(
-    var(--kui-space-2xs) + env(safe-area-inset-bottom, 0px)
-  );
-  border-block-start: 1px solid var(--kui-color-border);
-  background: var(--kui-color-surface);
-}
-
-.kui-tab-scaffold__tab {
-  display: flex;
-  flex: 1 1 0;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: var(--kui-space-2xs) var(--kui-space-xs);
-  border: 0;
-  color: var(--kui-color-text-quiet);
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.125rem;
-}
-
-.kui-tab-scaffold__tab[aria-selected="true"] {
-  color: var(--kui-color-accent-text);
-}
-
-.kui-tab-scaffold__tab:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: -2px;
-}
-
-.kui-tab-scaffold__tab-icon {
-  display: grid;
-  place-items: center;
-}
-
-.kui-tab-scaffold__tab-icon svg {
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
-.kui-tab-scaffold__tab-label {
-  max-width: 100%;
-  overflow: hidden;
-  font-size: var(--kui-font-2xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/dist/tab-scaffold.d.ts

@@ -1,30 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface TabScaffoldTab<Id extends string = string> {
-    id: Id;
-    label: string;
-    /** Decorative icon shown above the label in the bottom bar. */
-    icon?: SafeHtml;
-    /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */
-    content: SafeHtml;
-}
-interface TabScaffoldProps<Id extends string = string> {
-    id: string;
-    /** Accessible name for the tab bar. */
-    label: string;
-    tabs: readonly TabScaffoldTab<Id>[];
-    /** The controlled active tab id (the app owns selection). */
-    active: NoInfer<Id>;
-    className?: string;
-}
-/**
- * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches
- * between major sections, each tab keeping its own content (usually a `NavStack`)
- * mounted so its stack and scroll survive a switch. Controlled — the app owns
- * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.
- * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
- * a bottom bar. See `docs/23-app-layouts.md` §3.4.
- */
-declare function TabScaffold<Id extends string>({ id, label, tabs, active, className, }: TabScaffoldProps<Id>): SafeHtml;
-
-export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -1,51 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/tab-scaffold.tsx
-function TabScaffold({
-  id,
-  label,
-  tabs,
-  active,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      class: `kui-tab-scaffold ${className}`.trim(),
-      id,
-      "data-component": "tab-scaffold",
-      "data-tab-scaffold-id": id,
-      children: [
-        /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            class: "kui-tab-scaffold__scene",
-            "data-tab-scaffold-scene": tab.id,
-            "data-active": String(tab.id === active),
-            "aria-hidden": String(tab.id !== active),
-            children: tab.content
-          }
-        )) }),
-        /* @__PURE__ */ jsx("nav", { class: "kui-tab-scaffold__bar", role: "tablist", "aria-label": label, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            class: "kui-tab-scaffold__tab",
-            role: "tab",
-            "data-tab-scaffold-tab": tab.id,
-            "aria-selected": String(tab.id === active),
-            tabindex: tab.id === active ? "0" : "-1",
-            children: [
-              tab.icon && /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-icon", "aria-hidden": "true", children: tab.icon }),
-              /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-label", children: tab.label })
-            ]
-          }
-        )) })
-      ]
-    }
-  );
-}
-
-export { TabScaffold };
-
-//# sourceMappingURL=tab-scaffold.js.map

package/dist/tab-scaffold.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AA6BO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,EAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MAEtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,2BAAyB,GAAA,CAAI,EAAA;AAAA,YAC7B,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACrC,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YAEpC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SAER,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,uBAAA;AAAA,YACN,IAAA,EAAK,KAAA;AAAA,YACL,yBAAuB,GAAA,CAAI,EAAA;AAAA,YAC3B,eAAA,EAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACvC,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,GAAA,GAAM,IAAA;AAAA,YAEnC,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,IAAA,wBACF,MAAA,EAAA,EAAK,KAAA,EAAM,8BAA6B,aAAA,EAAY,MAAA,EAClD,cAAI,IAAA,EACP,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA;AAAA;AAAA,SAExD,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface TabScaffoldTab<Id extends string = string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: SafeHtml;\n}\n\nexport interface TabScaffoldProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabScaffoldTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  className?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  className = '',\n}: TabScaffoldProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            aria-hidden={String(tab.id !== active)}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => (\n          <button\n            type=\"button\"\n            class=\"kui-tab-scaffold__tab\"\n            role=\"tab\"\n            data-tab-scaffold-tab={tab.id}\n            aria-selected={String(tab.id === active)}\n            tabindex={tab.id === active ? '0' : '-1'}\n          >\n            {tab.icon && (\n              <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                {tab.icon}\n              </span>\n            )}\n            <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n          </button>\n        ))}\n      </nav>\n    </section>\n  );\n}\n"]}

package/dist/wire-tab-scaffold.d.ts

@@ -1,11 +0,0 @@
-interface WireTabScaffoldOptions {
-    /** Invoked with the selected tab id when a bottom-bar tab is activated. */
-    onSelect: (tabId: string) => void;
-}
-/**
- * Wire a `TabScaffold`'s bottom tab bar: clicking a tab calls `onSelect` with its
- * id (the app then updates its controlled `active`). Returns a disposer.
- */
-declare function wireTabScaffold(root: Element, options: WireTabScaffoldOptions): () => void;
-
-export { type WireTabScaffoldOptions, wireTabScaffold };

package/dist/wire-tab-scaffold.js

@@ -1,21 +0,0 @@
-import { delegate } from 'kerfjs';
-
-// src/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 () => {
-  };
-  return delegate(
-    section,
-    "click",
-    "[data-tab-scaffold-tab]",
-    (_event, target) => {
-      const tabId = target.getAttribute("data-tab-scaffold-tab");
-      if (tabId) options.onSelect(tabId);
-    }
-  );
-}
-
-export { wireTabScaffold };
-
-//# sourceMappingURL=wire-tab-scaffold.js.map

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

@@ -1 +0,0 @@
-{"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"]}

package/docs/design/templates/panel-header/icon-actions-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><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(138, 203, 255)" 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(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Done</text></svg>

package/docs/design/templates/panel-header/icon-actions.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><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(30, 110, 244)" 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(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Done</text></svg>

package/docs/design/templates/panel-header/icon-summary-actions-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" 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(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Open</text><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">In review · updated today</text></g></g></svg>

package/docs/design/templates/panel-header/icon-summary-actions.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" 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(#cp4)"><g clip-path="url(#ov5)"><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Open</text><g clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">In review · updated today</text></g></g></svg>

package/docs/design/templates/panel-header/no-icon-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New</text><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Manage members, billing, and integrations.</text></g></g></svg>

package/docs/design/templates/panel-header/no-icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New</text><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Manage members, billing, and integrations.</text></g></g></svg>

package/docs/design/templates/panel-header/page-heading-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New pattern</text></svg>

package/docs/design/templates/panel-header/page-heading.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New pattern</text></svg>

package/docs/design/templates/panel-header/title-only-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Recent activity</text></g></g></g></g></g></g></svg>

package/docs/design/templates/panel-header/title-only.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ov3)"><g clip-path="url(#cp4)"><g clip-path="url(#ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Recent activity</text></g></g></g></g></g></g></svg>

package/docs/design/templates/panel-header-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 806" width="752" height="806"><defs><clipPath id="cp0"><rect x="16" y="38" width="720" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="720" height="112"/></clipPath><clipPath id="cp2"><rect x="16" y="362" width="720" height="136"/></clipPath><clipPath id="cp3"><rect x="16" y="536" width="720" height="104"/></clipPath><clipPath id="cp4"><rect x="16" y="678" width="720" height="112"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="720" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="720" height="136" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="190" width="720" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="212" width="720" height="112" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="340" width="720" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="362" width="720" height="136" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="514" width="720" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="536" width="720" height="104" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="656" width="720" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="678" width="720" height="112" rx="0"/></clipPath></defs><rect x="0" y="0" width="752" height="806" 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, summary, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="720" height="136"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg7cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="svgimg7ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="svgimg7cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg7ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg7svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" 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(#svgimg7cp4)"><g clip-path="url(#svgimg7ov5)"><g clip-path="url(#svgimg7cp6)"><g clip-path="url(#svgimg7ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Open</text><g clip-path="url(#svgimg7cp9)"><g clip-path="url(#svgimg7ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">In review · updated today</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Icon and action, no summary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="212" width="720" height="112"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg10cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="svgimg10ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg10cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="svgimg10ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#svgimg10cp2)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg10svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg10svgic3)"><g transform="translate(39 39)scale(.91667)"><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(138, 203, 255)" 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(#svgimg10cp4)"><g clip-path="url(#svgimg10ov5)"><g clip-path="url(#svgimg10cp6)"><g clip-path="url(#svgimg10ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Done</text></g></g></g></g><text x="16" y="352" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">No icon, summary and action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="362" width="720" height="136"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 362)"><defs><clipPath id="svgimg13cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="svgimg13ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="svgimg13ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="svgimg13cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg13ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ov1)"><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ov3)"><g clip-path="url(#svgimg13cp4)"><g clip-path="url(#svgimg13ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New</text><g clip-path="url(#svgimg13cp7)"><g clip-path="url(#svgimg13ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Manage members, billing, and integrations.</text></g></g></g></g></g></g><text x="16" y="526" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Title only</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="536" width="720" height="104"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 536)"><defs><clipPath id="svgimg16cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="svgimg16ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="svgimg16ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="svgimg16ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ov1)"><g clip-path="url(#svgimg16cp2)"><g clip-path="url(#svgimg16ov3)"><g clip-path="url(#svgimg16cp4)"><g clip-path="url(#svgimg16ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Recent activity</text></g></g></g></g></g></g></g></g></g></g><text x="16" y="668" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Page heading (h1) with action</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="678" width="720" height="112"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 678)"><defs><clipPath id="svgimg19cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="svgimg19ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="svgimg19ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ov1)"><g clip-path="url(#svgimg19cp2)"><g clip-path="url(#svgimg19ov3)"><g clip-path="url(#svgimg19cp4)"><g clip-path="url(#svgimg19ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New pattern</text></g></g></g></g></svg>

package/docs/design/templates/panel-header.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 806" width="752" height="806"><defs><clipPath id="cp0"><rect x="16" y="38" width="720" height="136"/></clipPath><clipPath id="cp1"><rect x="16" y="212" width="720" height="112"/></clipPath><clipPath id="cp2"><rect x="16" y="362" width="720" height="136"/></clipPath><clipPath id="cp3"><rect x="16" y="536" width="720" height="104"/></clipPath><clipPath id="cp4"><rect x="16" y="678" width="720" height="112"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="720" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="720" height="136" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="190" width="720" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="212" width="720" height="112" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="340" width="720" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="362" width="720" height="136" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="514" width="720" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="536" width="720" height="104" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="656" width="720" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="678" width="720" height="112" rx="0"/></clipPath></defs><rect x="0" y="0" width="752" height="806" 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, summary, and action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="720" height="136"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg7cp4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="svgimg7ov5"><rect x="80" y="28" width="189.8" height="44" rx="0"/></clipPath><clipPath id="svgimg7cp6"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct7"><rect x="88" y="40" width="173.8" height="20"/></clipPath><clipPath id="svgimg7ct8"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="svgimg7cp9"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg7ct10"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgimg7svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="translate(39 39)scale(.91667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" 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(#svgimg7cp4)"><g clip-path="url(#svgimg7ov5)"><g clip-path="url(#svgimg7cp6)"><g clip-path="url(#svgimg7ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Northstar migration</text></g></g></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Open</text><g clip-path="url(#svgimg7cp9)"><g clip-path="url(#svgimg7ct10)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">In review · updated today</text></g></g></g></g></g></g><text x="16" y="202" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Icon and action, no summary</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="212" width="720" height="112"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 212)"><defs><clipPath id="svgimg10cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="svgimg10ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="svgimg10cp4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="svgimg10ov5"><rect x="80" y="28" width="154.5" height="44" rx="0"/></clipPath><clipPath id="svgimg10cp6"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct7"><rect x="88" y="40" width="138.5" height="20"/></clipPath><clipPath id="svgimg10ct8"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#svgimg10cp2)"><g color="rgb(30, 110, 244)"><clipPath id="svgimg10svgic3"><rect x="39" y="39" width="22" height="22"/></clipPath><g clip-path="url(#svgimg10svgic3)"><g transform="translate(39 39)scale(.91667)"><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(30, 110, 244)" 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(#svgimg10cp4)"><g clip-path="url(#svgimg10ov5)"><g clip-path="url(#svgimg10cp6)"><g clip-path="url(#svgimg10ct7)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Package details</text></g></g></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Done</text></g></g></g></g><text x="16" y="352" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">No icon, summary and action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="362" width="720" height="136"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 362)"><defs><clipPath id="svgimg13cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="svgimg13ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="svgimg13ov3"><rect x="28" y="28" width="191.4" height="44" rx="0"/></clipPath><clipPath id="svgimg13cp4"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct5"><rect x="36" y="40" width="175.4" height="20"/></clipPath><clipPath id="svgimg13ct6"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="svgimg13cp7"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="svgimg13ct8"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ov1)"><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ov3)"><g clip-path="url(#svgimg13cp4)"><g clip-path="url(#svgimg13ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Workspace settings</text></g></g></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New</text><g clip-path="url(#svgimg13cp7)"><g clip-path="url(#svgimg13ct8)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Manage members, billing, and integrations.</text></g></g></g></g></g></g><text x="16" y="526" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Title only</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="536" width="720" height="104"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 536)"><defs><clipPath id="svgimg16cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="svgimg16ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="svgimg16ov3"><rect x="28" y="28" width="146.9" height="44" rx="0"/></clipPath><clipPath id="svgimg16cp4"><rect x="36" y="40" width="130.9" height="20"/></clipPath><clipPath id="svgimg16ct5"><rect x="36" y="40" width="130.9" height="20"/></clipPath></defs><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ov1)"><g clip-path="url(#svgimg16cp2)"><g clip-path="url(#svgimg16ov3)"><g clip-path="url(#svgimg16cp4)"><g clip-path="url(#svgimg16ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Recent activity</text></g></g></g></g></g></g></g></g></g></g><text x="16" y="668" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Page heading (h1) with action</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="678" width="720" height="112"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 678)"><defs><clipPath id="svgimg19cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="svgimg19ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="svgimg19ov3"><rect x="28" y="28" width="144.6" height="44" rx="0"/></clipPath><clipPath id="svgimg19cp4"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct5"><rect x="36" y="40" width="128.6" height="20"/></clipPath><clipPath id="svgimg19ct6"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ov1)"><g clip-path="url(#svgimg19cp2)"><g clip-path="url(#svgimg19ov3)"><g clip-path="url(#svgimg19cp4)"><g clip-path="url(#svgimg19ct5)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">UI foundations</text></g></g></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New pattern</text></g></g></g></g></svg>

package/docs/tab-scaffold.md

@@ -1,50 +0,0 @@
-# Tab scaffold
-
-`@kerfjs/ui/tab-scaffold` is a mobile-first, iOS-like bottom tab bar that switches
-between major app sections, where **each tab keeps its own content mounted** —
-usually a `NavStack`, so each tab's stack and scroll survive a switch. One of the
-opt-in app layouts (see [`../../docs/23-app-layouts.md`](../../docs/23-app-layouts.md)).
-It is distinct from `TabBar` (document-oriented, reorderable strips).
-
-```ts
-import { TabScaffold } from "@kerfjs/ui/tab-scaffold";
-import { wireTabScaffold } from "@kerfjs/ui/wire-tab-scaffold";
-import "@kerfjs/ui/tab-scaffold.css";
-```
-
-## Controlled selection
-
-The app owns the active tab (a signal); `TabScaffold` renders every tab's scene
-(only the active one visible) plus the bottom bar, and `wireTabScaffold` reports
-clicks.
-
-```tsx
-const active = signal("home");
-
-<TabScaffold
-  id="app"
-  label="Sections"
-  active={active.value}
-  tabs={[
-    { id: "home", label: "Home", icon: <HomeIcon />, content: <HomeStack /> },
-    {
-      id: "search",
-      label: "Search",
-      icon: <SearchIcon />,
-      content: <SearchStack />,
-    },
-  ]}
-/>;
-
-// once, after first render:
-const dispose = wireTabScaffold(root, {
-  onSelect: (id) => {
-    active.value = id;
-  },
-});
-```
-
-Each `TabScaffoldTab` has an `id`, `label`, optional `icon`, and `content`. The
-bottom bar respects the home-indicator safe area (`env(safe-area-inset-bottom)`)
-and keeps 44px targets. On larger device classes, promote the tab set to a
-`Workbench` rail or a persistent sidebar instead of a bottom bar.