@kerfjs/ui 5.0.0-beta.3 → 5.0.0-beta.6

package/ux-demo/recipes/recipes.css

@@ -113,13 +113,10 @@
 .recipe-header__context {
   margin: 0;
 }
-.recipe-header .kui-page-header__action {
-  max-width: 100%;
-}
 
 .recipe-master-detail {
   display: grid;
-  width: min(58rem, 100%);
+  width: 100%;
   min-height: 25rem;
   grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
 }
@@ -130,10 +127,19 @@
   min-width: 0;
   padding-block: var(--kui-layout-item-gap);
 }
+.recipe-master-detail__title {
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+}
+.recipe-master-detail__actions {
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+}
 .recipe-dialog {
   --spacing: 0;
   --width: min(62rem, calc(100vw - 2rem));
 }
+.recipe-dialog .kui-panel-header {
+  margin-inline: 0;
+}
 
 .recipe-form {
   width: min(38rem, 100%);
@@ -141,17 +147,24 @@
   padding-block: var(--kui-layout-item-gap);
 }
 .recipe-form__section {
-  --kui-content-item-border: transparent;
-  --kui-content-item-background: transparent;
   display: grid;
+  min-width: 0;
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
   gap: var(--kui-layout-item-gap);
 }
-.recipe-form__introduction > :where(h2, p) {
-  margin: 0;
-}
 .recipe-form__fields {
   align-content: start;
 }
+.recipe-form__fields wa-input::part(form-control-label),
+.recipe-form__fields wa-input::part(hint),
+.recipe-form__fields wa-textarea::part(form-control-label),
+.recipe-form__fields wa-textarea::part(hint),
+.recipe-form__fields .kui-select::part(form-control-label) {
+  padding-inline: remify(8px);
+}
+.recipe-form__fields wa-textarea::part(textarea) {
+  padding-inline: remify(8px);
+}
 .recipe-form__footer {
   align-content: start;
 }
@@ -190,8 +203,11 @@
   gap: var(--kui-layout-content-gap);
 }
 .recipe-compact-toolbar__guide {
+  /* Span the toolbar's full width instead of the 8px content-item inset — under a
+     full-bleed toolbar/divider the inset read as the boxes floating too far in. */
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-inline: 0;
   gap: var(--kui-layout-control-gap);
 }
 .recipe-compact-toolbar__guide > div {
@@ -305,10 +321,6 @@
   .recipe-compact-toolbar__guide {
     grid-template-columns: 1fr;
   }
-  .recipe-header .kui-page-header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
 }
 
 @media (forced-colors: active) {
@@ -326,3 +338,18 @@
     transition-duration: 1ms !important;
   }
 }
+
+.recipe-navstack {
+  display: flex;
+  width: min(28rem, 100%);
+  margin-inline: auto;
+  flex-direction: column;
+}
+.recipe-navstack__stage {
+  height: 24rem;
+}
+.recipe-navstack__view {
+  /* The view is a .kui-content stack whose rows own their 8px margins; add only a
+     little block breathing room, not an inline pad that would double-inset them. */
+  padding-block: var(--kui-space-2xs);
+}

package/ux-demo/recipes/workspace-header.tsx

@@ -1,12 +1,12 @@
 import '@kerfjs/ui/layout.css';
 import './recipes.css';
 
-import { PageHeader } from '@kerfjs/ui/page-header';
+import { PanelHeader } from '@kerfjs/ui/panel-header';
 import { StateBanner } from '@kerfjs/ui/state-banner';
 
 import type { RecipeFactory } from './types.js';
 
 export const createRecipe: RecipeFactory = (announce) => ({
-  render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PageHeader title="Accessibility readiness and responsive navigation rollout" action={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
+  render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PanelHeader title="Accessibility readiness and responsive navigation rollout" titleId="recipe-workspace-title" actions={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
   action(command) { announce(`${command} requested`); },
 });

package/dist/browser/page-header.js

@@ -1,3 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/page-header.css';
-export * from '../page-header.js';

package/dist/chunk-2PES33HS.js

@@ -1,13 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/page-header.tsx
-function PageHeader({ title, action }) {
-  return /* @__PURE__ */ jsxs("header", { class: "kui-page-header", "data-component": "page-header", children: [
-    /* @__PURE__ */ jsx("h1", { children: title }),
-    action && /* @__PURE__ */ jsx("div", { class: "kui-page-header__action", children: action })
-  ] });
-}
-
-export { PageHeader };
-
-//# sourceMappingURL=chunk-2PES33HS.js.map

package/dist/chunk-2PES33HS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/page-header.tsx"],"names":[],"mappings":";;;AAOO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAO,EAAoB;AAC7D,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,iBAAA,EAAkB,kBAAe,aAAA,EAAc,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAAM,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAAO,CAAA;AACrJ","file":"chunk-2PES33HS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface PageHeaderProps {\n  title: string | SafeHtml;\n  action?: SafeHtml;\n}\n\nexport function PageHeader({ title, action }: PageHeaderProps) {\n  return <header class=\"kui-page-header\" data-component=\"page-header\"><h1>{title}</h1>{action && <div class=\"kui-page-header__action\">{action}</div>}</header>;\n}\n"]}

package/dist/chunk-GY5WH7TO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AAQO,SAAS,YAAY,EAAE,IAAA,EAAM,OAAO,SAAA,EAAW,SAAA,GAAY,IAAG,EAAqB;AACxF,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,IAAA,EAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AACnH","file":"chunk-GY5WH7TO.js","sourcesContent":["export type ToolbarTextSize = 'large' | 'default' | 'small';\n\nexport interface ToolbarTextProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n}\n\nexport function ToolbarText({ text, size = 'default', className = '' }: ToolbarTextProps) {\n  return <span class={`kui-toolbar-text ${className}`.trim()} data-component=\"toolbar-text\" data-size={size}>{text}</span>;\n}\n"]}

package/dist/chunk-H5AGGVU5.js

@@ -1,75 +0,0 @@
-import { placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-import { delegate } from 'kerfjs';
-
-function editorFromEvent(root, event) {
-  const target = event.target;
-  if (!(target instanceof Element)) return;
-  const editor = target.closest("[data-token-search-editor]");
-  return editor && root.contains(editor) ? editor : void 0;
-}
-function caretQueryOffset(editor) {
-  const selection = editor.ownerDocument.getSelection();
-  if (!selection || selection.rangeCount === 0) return;
-  const selectionRange = selection.getRangeAt(0);
-  if (!editor.contains(selectionRange.startContainer)) return;
-  const prefixRange = editor.ownerDocument.createRange();
-  prefixRange.selectNodeContents(editor);
-  prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
-  const prefix = editor.ownerDocument.createElement("div");
-  prefix.append(prefixRange.cloneContents());
-  return readTokenSearchField(prefix).query.length;
-}
-function replacementEditor(root, id) {
-  return [...root.querySelectorAll("[data-token-search-editor]")].find((editor) => editor.dataset.tokenSearchEditor === id);
-}
-function wireTokenSearchFields(root, { onSubmit }) {
-  const pending = /* @__PURE__ */ new WeakMap();
-  const onBeforeInput = (event) => {
-    const inputEvent = event;
-    const editor = editorFromEvent(root, event);
-    if (!editor || !inputEvent.inputType.startsWith("delete") || editor.ownerDocument.activeElement !== editor) return;
-    const field = editor.closest('[data-component="token-search-field"]');
-    const id = field?.dataset.tokenSearchId;
-    const offset = caretQueryOffset(editor);
-    if (!id || offset === void 0 || field?.dataset.disabled === "true") return;
-    pending.set(editor, {
-      id,
-      offset,
-      tokenCount: editor.querySelectorAll('[data-component="token-search-token"]').length
-    });
-  };
-  const onInput = (event) => {
-    const editor = editorFromEvent(root, event);
-    if (!editor) return;
-    const deletion = pending.get(editor);
-    pending.delete(editor);
-    if (!deletion || editor.querySelectorAll('[data-component="token-search-token"]').length >= deletion.tokenCount) return;
-    editor.ownerDocument.defaultView.requestAnimationFrame(() => {
-      const replacement = replacementEditor(root, deletion.id);
-      if (!replacement) return;
-      const active = replacement.ownerDocument.activeElement;
-      if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;
-      placeTokenSearchCaret(replacement, deletion.offset);
-    });
-  };
-  root.addEventListener("beforeinput", onBeforeInput, true);
-  root.addEventListener("input", onInput, true);
-  const stopSubmit = delegate(root, "keydown", "[data-token-search-editor]", (event, element) => {
-    const keyboardEvent = event;
-    const editor = element;
-    const field = editor.closest('[data-component="token-search-field"]');
-    const id = field?.dataset.tokenSearchId;
-    if (keyboardEvent.key !== "Enter" || keyboardEvent.isComposing || !id || field?.dataset.disabled === "true") return;
-    keyboardEvent.preventDefault();
-    onSubmit({ id, editor });
-  });
-  return () => {
-    root.removeEventListener("beforeinput", onBeforeInput, true);
-    root.removeEventListener("input", onInput, true);
-    stopSubmit();
-  };
-}
-
-export { wireTokenSearchFields };
-
-//# sourceMappingURL=chunk-H5AGGVU5.js.map

package/dist/chunk-H5AGGVU5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/wire-token-search-fields.ts"],"names":[],"mappings":"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","file":"chunk-H5AGGVU5.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport { placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';\n\nexport interface TokenSearchSubmit {\n  id: string;\n  editor: HTMLElement;\n}\n\nexport interface WireTokenSearchFieldsOptions {\n  onSubmit: (submission: TokenSearchSubmit) => void;\n}\n\ninterface PendingTokenDeletion {\n  id: string;\n  offset: number;\n  tokenCount: number;\n}\n\nfunction editorFromEvent(root: HTMLElement, event: Event): HTMLElement | undefined {\n  const target = event.target;\n  if (!(target instanceof Element)) return;\n  const editor = target.closest<HTMLElement>('[data-token-search-editor]');\n  return editor && root.contains(editor) ? editor : undefined;\n}\n\nfunction caretQueryOffset(editor: HTMLElement): number | undefined {\n  const selection = editor.ownerDocument.getSelection();\n  if (!selection || selection.rangeCount === 0) return;\n  const selectionRange = selection.getRangeAt(0);\n  if (!editor.contains(selectionRange.startContainer)) return;\n  const prefixRange = editor.ownerDocument.createRange();\n  prefixRange.selectNodeContents(editor);\n  prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);\n  const prefix = editor.ownerDocument.createElement('div');\n  prefix.append(prefixRange.cloneContents());\n  return readTokenSearchField(prefix).query.length;\n}\n\nfunction replacementEditor(root: HTMLElement, id: string): HTMLElement | undefined {\n  return [...root.querySelectorAll<HTMLElement>('[data-token-search-editor]')]\n    .find((editor) => editor.dataset.tokenSearchEditor === id);\n}\n\n/** Keep TokenSearchField wrapping, submit Enter, and preserve its caret across controlled token deletion. */\nexport function wireTokenSearchFields(root: HTMLElement, { onSubmit }: WireTokenSearchFieldsOptions) {\n  const pending = new WeakMap<HTMLElement, PendingTokenDeletion>();\n  const onBeforeInput = (event: Event) => {\n    const inputEvent = event as InputEvent;\n    const editor = editorFromEvent(root, event);\n    if (!editor || !inputEvent.inputType.startsWith('delete') || editor.ownerDocument.activeElement !== editor) return;\n    const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n    const id = field?.dataset.tokenSearchId;\n    const offset = caretQueryOffset(editor);\n    if (!id || offset === undefined || field?.dataset.disabled === 'true') return;\n    pending.set(editor, {\n      id,\n      offset,\n      tokenCount: editor.querySelectorAll('[data-component=\"token-search-token\"]').length,\n    });\n  };\n  const onInput = (event: Event) => {\n    const editor = editorFromEvent(root, event);\n    if (!editor) return;\n    const deletion = pending.get(editor);\n    pending.delete(editor);\n    if (!deletion || editor.querySelectorAll('[data-component=\"token-search-token\"]').length >= deletion.tokenCount) return;\n    editor.ownerDocument.defaultView!.requestAnimationFrame(() => {\n      const replacement = replacementEditor(root, deletion.id);\n      if (!replacement) return;\n      const active = replacement.ownerDocument.activeElement;\n      if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;\n      placeTokenSearchCaret(replacement, deletion.offset);\n    });\n  };\n  root.addEventListener('beforeinput', onBeforeInput, true);\n  root.addEventListener('input', onInput, true);\n\n  const stopSubmit = delegate(root, 'keydown', '[data-token-search-editor]', (event, element) => {\n    const keyboardEvent = event as KeyboardEvent;\n    const editor = element as HTMLElement;\n    const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n    const id = field?.dataset.tokenSearchId;\n    if (keyboardEvent.key !== 'Enter' || keyboardEvent.isComposing || !id || field?.dataset.disabled === 'true') return;\n    keyboardEvent.preventDefault();\n    onSubmit({ id, editor });\n  });\n  return () => {\n    root.removeEventListener('beforeinput', onBeforeInput, true);\n    root.removeEventListener('input', onInput, true);\n    stopSubmit();\n  };\n}\n"]}

package/dist/chunk-K3G72I6D.js

@@ -1,24 +0,0 @@
-import { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
-import { Toolbar } from './chunk-DAFFDO33.js';
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = "", actions, actionsLabel }) {
-  const titleContent = /* @__PURE__ */ jsx("div", { class: "kui-dialog-header__copy", children: /* @__PURE__ */ jsx("h2", { id: titleId, children: title }) });
-  const identity = /* @__PURE__ */ jsx(
-    ToolbarControlGroup,
-    {
-      appearance: "borderless",
-      className: "kui-dialog-header__identity",
-      children: icon ? [/* @__PURE__ */ jsx("span", { class: `kui-dialog-header__icon ${iconClassName}`.trim(), children: icon }), titleContent] : titleContent
-    }
-  );
-  const actionGroup = actions && /* @__PURE__ */ jsx(ToolbarControlGroup, { className: "kui-dialog-header__actions", label: actionsLabel, children: actions });
-  return /* @__PURE__ */ jsxs("div", { class: "kui-dialog-header", "data-component": "dialog-header", "data-has-icon": String(Boolean(icon)), "data-has-actions": String(Boolean(actions)), "data-has-summary": String(Boolean(summary)), children: [
-    /* @__PURE__ */ jsx(Toolbar, { leading: identity, trailing: actionGroup, divider: false, className: "kui-dialog-header__toolbar" }),
-    summary && /* @__PURE__ */ jsx("p", { class: "kui-dialog-header__summary", id: summaryId, children: summary })
-  ] });
-}
-
-export { DialogHeader };
-
-//# sourceMappingURL=chunk-K3G72I6D.js.map

package/dist/chunk-K3G72I6D.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dialog-header.tsx"],"names":[],"mappings":";;;;AAgBO,SAAS,YAAA,CAAa,EAAE,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,aAAA,GAAgB,EAAA,EAAI,OAAA,EAAS,YAAA,EAAa,EAAsB;AACvI,EAAA,MAAM,YAAA,mBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,8BAAC,IAAA,EAAA,EAAG,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,KAAA,EAAM,CAAA,EAAK,CAAA;AACvF,EAAA,MAAM,QAAA,mBAAW,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MAChB,UAAA,EAAW,YAAA;AAAA,MACX,SAAA,EAAU,6BAAA;AAAA,MACV,QAAA,EAAU,IAAA,GAAO,iBAAC,GAAA,CAAC,UAAK,KAAA,EAAO,CAAA,wBAAA,EAA2B,aAAa,CAAA,CAAA,CAAG,IAAA,EAAK,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA,EAAS,YAAY,CAAA,GAAI;AAAA;AAAA,GACnH;AACA,EAAA,MAAM,WAAA,GAAc,2BAAW,GAAA,CAAC,mBAAA,EAAA,EAAoB,WAAU,4BAAA,EAA6B,KAAA,EAAO,cAAe,QAAA,EAAA,OAAA,EAAQ,CAAA;AAEzH,EAAA,uBAAO,IAAA,CAAC,SAAI,KAAA,EAAM,mBAAA,EAAoB,kBAAe,eAAA,EAAgB,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,GAAG,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAAG,oBAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAC9L,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAS,QAAA,EAAU,QAAA,EAAU,aAAa,OAAA,EAAS,KAAA,EAAO,WAAU,4BAAA,EAA6B,CAAA;AAAA,IACzG,2BAAW,GAAA,CAAC,GAAA,EAAA,EAAE,OAAM,4BAAA,EAA6B,EAAA,EAAI,WAAY,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC5E,CAAA;AACF","file":"chunk-K3G72I6D.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\nexport interface DialogHeaderProps {\n  title: string;\n  titleId: string;\n  summary?: string;\n  summaryId?: string;\n  icon?: SafeHtml;\n  iconClassName?: string;\n  actions?: SafeHtml;\n  actionsLabel?: string;\n}\n\nexport function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = '', actions, actionsLabel }: DialogHeaderProps) {\n  const titleContent = <div class=\"kui-dialog-header__copy\"><h2 id={titleId}>{title}</h2></div>;\n  const identity = <ToolbarControlGroup\n    appearance=\"borderless\"\n    className=\"kui-dialog-header__identity\"\n    children={icon ? [<span class={`kui-dialog-header__icon ${iconClassName}`.trim()}>{icon}</span>, titleContent] : titleContent}\n  />;\n  const actionGroup = actions && <ToolbarControlGroup className=\"kui-dialog-header__actions\" label={actionsLabel}>{actions}</ToolbarControlGroup>;\n\n  return <div class=\"kui-dialog-header\" data-component=\"dialog-header\" data-has-icon={String(Boolean(icon))} data-has-actions={String(Boolean(actions))} data-has-summary={String(Boolean(summary))}>\n    <Toolbar leading={identity} trailing={actionGroup} divider={false} className=\"kui-dialog-header__toolbar\" />\n    {summary && <p class=\"kui-dialog-header__summary\" id={summaryId}>{summary}</p>}\n  </div>;\n}\n"]}

package/dist/dialog-header.d.ts

@@ -1,15 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface DialogHeaderProps {
-    title: string;
-    titleId: string;
-    summary?: string;
-    summaryId?: string;
-    icon?: SafeHtml;
-    iconClassName?: string;
-    actions?: SafeHtml;
-    actionsLabel?: string;
-}
-declare function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, actionsLabel }: DialogHeaderProps): SafeHtml;
-
-export { DialogHeader, type DialogHeaderProps };

package/dist/dialog-header.js

@@ -1,5 +0,0 @@
-export { DialogHeader } from './chunk-K3G72I6D.js';
-
-
-
-//# sourceMappingURL=dialog-header.js.map

package/dist/dialog-header.js.map

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

package/dist/page-header.d.ts

@@ -1,9 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface PageHeaderProps {
-    title: string | SafeHtml;
-    action?: SafeHtml;
-}
-declare function PageHeader({ title, action }: PageHeaderProps): SafeHtml;
-
-export { PageHeader, type PageHeaderProps };

package/dist/page-header.js

@@ -1,3 +0,0 @@
-export { PageHeader } from './chunk-2PES33HS.js';
-
-//# sourceMappingURL=page-header.js.map

package/dist/page-header.js.map

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

package/dist/styles/dialog-header.css

@@ -1,87 +0,0 @@
-.kui-dialog-header {
-  --kui-dialog-header-border: transparent;
-  --kui-dialog-header-icon-background: var(--kui-color-brand-fill-quiet);
-  --kui-dialog-header-icon-foreground: var(--kui-color-brand-on-quiet);
-  --kui-dialog-header-title-inset: 2px;
-  display: grid;
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: 1px solid var(--kui-dialog-header-border);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  gap: 0;
-}
-
-.kui-dialog-header[data-has-icon="true"] {
-  --kui-dialog-header-title-inset: calc(
-    2px + 2.125rem + var(--kui-layout-item-gap, 0.5rem)
-  );
-}
-
-.kui-dialog-header__toolbar {
-  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  padding: 0;
-}
-
-.kui-dialog-header__identity {
-  max-width: 100%;
-  border-color: transparent;
-  background: transparent;
-  gap: var(--kui-layout-item-gap, 0.5rem);
-}
-
-.kui-dialog-header__icon {
-  display: grid;
-  width: 2.125rem;
-  height: 2.125rem;
-  border-radius: var(--kui-radius-circle);
-  color: var(--kui-dialog-header-icon-foreground);
-  background: var(--kui-dialog-header-icon-background);
-  flex: none;
-  place-items: center;
-}
-
-.kui-dialog-header__icon svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.kui-dialog-header__copy {
-  min-width: 0;
-  overflow: hidden;
-}
-
-.kui-dialog-header h2,
-.kui-dialog-header__summary {
-  margin: 0;
-}
-
-.kui-dialog-header h2 {
-  overflow: hidden;
-  color: var(--kui-color-text);
-  font-size: var(--kui-font-l);
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kui-dialog-header__summary {
-  min-width: 0;
-  margin-block-start: calc(-1 * var(--kui-layout-item-padding, 0.5rem));
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline-start: var(--kui-dialog-header-title-inset);
-  color: var(--kui-color-text-quiet);
-}
-
-.kui-dialog-header__actions {
-  gap: 0;
-}
-
-.kui-dialog-header__actions:has(> .kui-toolbar-control-group) {
-  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  padding: 0;
-  border-color: transparent;
-  background: transparent;
-  gap: var(--kui-layout-item-gap, 0.5rem);
-}

package/dist/styles/page-header.css

@@ -1,26 +0,0 @@
-.kui-page-header {
-  --kui-page-header-background: transparent;
-  --kui-page-header-border: transparent;
-  --kui-page-header-foreground: var(--kui-color-text);
-  display: flex;
-  min-height: 2.75rem;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: 1px solid var(--kui-page-header-border);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: var(--kui-page-header-foreground);
-  background: var(--kui-page-header-background);
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--kui-layout-item-gap, 0.5rem);
-}
-.kui-page-header h1 {
-  margin: 0;
-  color: inherit;
-  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
-  letter-spacing: -0.025em;
-}
-.kui-page-header__action {
-  flex: none;
-}