@kerfjs/ui 4.4.1 → 5.0.0-beta.4

package/dist/styles/toolbar.css

@@ -0,0 +1,52 @@
+.kui-toolbar {
+  display: grid;
+  width: 100%;
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem))
+  );
+  padding: var(--kui-toolbar-gap, 0.5rem);
+  box-sizing: border-box;
+  color: var(--kui-color-text);
+  background: transparent;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+  container: kui-toolbar / inline-size;
+  font-family: var(--kui-font-sans);
+}
+
+.kui-toolbar[data-has-center="false"] {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.kui-toolbar[data-divider="true"] {
+  box-shadow: inset 0 -1px var(--kui-color-border);
+}
+
+.kui-toolbar__leading,
+.kui-toolbar__center,
+.kui-toolbar__trailing {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+}
+
+.kui-toolbar__leading {
+  overflow: hidden;
+}
+
+.kui-toolbar__center {
+  justify-content: center;
+}
+
+.kui-toolbar__trailing {
+  justify-content: flex-end;
+}
+
+.kui-toolbar[data-has-center="false"] .kui-toolbar__center,
+.kui-toolbar__leading:empty,
+.kui-toolbar__trailing:empty {
+  display: none;
+}

package/dist/styles/value-table.css

@@ -0,0 +1,75 @@
+.kui-value-table {
+  --kui-value-table-background: var(--kui-color-surface-lowered);
+  --kui-value-table-border: var(--kui-color-border);
+  --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
+  display: grid;
+  margin-block: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  overflow: hidden;
+  border: 1px solid var(--kui-value-table-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-value-table-background);
+}
+.kui-value-table__row {
+  --_kui-value-table-inline-padding: var(
+    --kui-layout-item-padding,
+    0.5rem
+  );
+  --_kui-value-table-separator-start: var(--_kui-value-table-inline-padding);
+  position: relative;
+  display: grid;
+  min-height: 2.55rem;
+  padding-block: 0.5rem;
+  padding-inline: var(--_kui-value-table-inline-padding);
+  box-sizing: border-box;
+  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__row[data-has-icon="true"] {
+  --_kui-value-table-separator-start: calc(
+    var(--_kui-value-table-inline-padding) + var(--_kui-value-table-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+.kui-value-table__row + .kui-value-table__row::before {
+  position: absolute;
+  top: 0;
+  right: var(--_kui-value-table-inline-padding);
+  left: var(--_kui-value-table-separator-start);
+  border-top: 1px solid var(--kui-value-table-border);
+  content: "";
+}
+.kui-value-table__row dt {
+  display: flex;
+  min-width: 0;
+  color: var(--kui-color-text-quiet);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__icon {
+  display: grid;
+  width: var(--_kui-value-table-icon-size);
+  height: var(--_kui-value-table-icon-size);
+  flex: none;
+  place-items: center;
+}
+.kui-value-table__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.kui-value-table__label {
+  min-width: 0;
+}
+.kui-value-table__row dd {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kui-color-text);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kui-space-2xs);
+  font-weight: var(--kui-font-weight-semibold);
+  text-align: end;
+}

package/{src → dist/styles}/webawesome.css

@@ -6,7 +6,7 @@
  * used by Hot Sheet 2. Component JavaScript remains independently importable
  * and tree-shakeable.
  */
-@import '@awesome.me/webawesome/dist/styles/webawesome.css';
+@import "@awesome.me/webawesome/dist/styles/webawesome.css";
 
 @layer wa-theme-overrides {
   :where(:root),
@@ -33,15 +33,38 @@
     --wa-color-text-quiet: light-dark(#6e6e73, #aeaeb2);
     --wa-color-text-link: var(--wa-color-brand-on-quiet);
 
-    --wa-color-overlay-modal: light-dark(rgb(29 29 31 / .34), rgb(0 0 0 / .6));
-    --wa-color-overlay-inline: color-mix(in srgb, var(--wa-color-neutral-fill-normal) 25%, transparent);
-    --wa-color-shadow: light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5));
+    --wa-color-overlay-modal: light-dark(
+      rgb(29 29 31 / 0.34),
+      rgb(0 0 0 / 0.6)
+    );
+    --wa-color-overlay-inline: color-mix(
+      in srgb,
+      var(--wa-color-neutral-fill-normal) 25%,
+      transparent
+    );
+    --wa-color-shadow: light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5));
     --wa-color-focus: light-dark(#007aff, #64d2ff);
     --wa-color-brand-fill-loud: light-dark(#0088ff, #64d2ff);
-    --wa-color-brand-fill-quiet: color-mix(in srgb, var(--wa-color-brand-fill-loud) 8%, var(--wa-color-surface-default));
-    --wa-color-brand-fill-normal: color-mix(in srgb, var(--wa-color-brand-fill-loud) 16%, var(--wa-color-surface-default));
-    --wa-color-brand-border-quiet: color-mix(in srgb, var(--wa-color-brand-fill-loud) 35%, var(--wa-color-surface-default));
-    --wa-color-brand-border-normal: color-mix(in srgb, var(--wa-color-brand-fill-loud) 58%, var(--wa-color-surface-default));
+    --wa-color-brand-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 8%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 16%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 35%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 58%,
+      var(--wa-color-surface-default)
+    );
     --wa-color-brand-border-loud: var(--wa-color-brand-fill-loud);
     --wa-color-brand-on-quiet: light-dark(#1e6ef4, #8acbff);
     --wa-color-brand-on-normal: var(--wa-color-brand-on-quiet);
@@ -58,31 +81,91 @@
     --wa-color-neutral-on-loud: var(--wa-color-surface-default);
 
     --wa-color-success-fill-loud: #34c759;
-    --wa-color-success-fill-quiet: color-mix(in srgb, var(--wa-color-success-fill-loud) 14%, var(--wa-color-surface-default));
-    --wa-color-success-fill-normal: color-mix(in srgb, var(--wa-color-success-fill-loud) 72%, var(--wa-color-surface-default));
-    --wa-color-success-border-quiet: color-mix(in srgb, var(--wa-color-success-fill-loud) 32%, var(--wa-color-surface-default));
-    --wa-color-success-border-normal: color-mix(in srgb, var(--wa-color-success-fill-loud) 50%, var(--wa-color-surface-default));
-    --wa-color-success-border-loud: color-mix(in srgb, var(--wa-color-success-fill-loud) 78%, var(--wa-color-neutral-on-normal));
+    --wa-color-success-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 14%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 72%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 32%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 50%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-loud: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 78%,
+      var(--wa-color-neutral-on-normal)
+    );
     --wa-color-success-on-quiet: light-dark(#008932, #63e685);
     --wa-color-success-on-normal: light-dark(#006d28, #8cea9f);
     --wa-color-success-on-loud: #fff;
 
     --wa-color-warning-fill-loud: #ffcc00;
-    --wa-color-warning-fill-quiet: color-mix(in srgb, var(--wa-color-warning-fill-loud) 9%, var(--wa-color-surface-default));
-    --wa-color-warning-fill-normal: color-mix(in srgb, var(--wa-color-warning-fill-loud) 22%, var(--wa-color-surface-default));
-    --wa-color-warning-border-quiet: color-mix(in srgb, var(--wa-color-warning-fill-loud) 35%, var(--wa-color-surface-default));
-    --wa-color-warning-border-normal: color-mix(in srgb, var(--wa-color-warning-fill-loud) 58%, var(--wa-color-neutral-on-normal));
-    --wa-color-warning-border-loud: color-mix(in srgb, var(--wa-color-warning-fill-loud) 78%, var(--wa-color-neutral-on-normal));
+    --wa-color-warning-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 9%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 22%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 35%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 58%,
+      var(--wa-color-neutral-on-normal)
+    );
+    --wa-color-warning-border-loud: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 78%,
+      var(--wa-color-neutral-on-normal)
+    );
     --wa-color-warning-on-quiet: light-dark(#a16a00, #ffd84a);
     --wa-color-warning-on-normal: light-dark(#5f3f00, #ffe27a);
     --wa-color-warning-on-loud: #1d1d1f;
 
     --wa-color-danger-fill-loud: #ff383c;
-    --wa-color-danger-fill-quiet: color-mix(in srgb, var(--wa-color-danger-fill-loud) 7%, var(--wa-color-surface-default));
-    --wa-color-danger-fill-normal: color-mix(in srgb, var(--wa-color-danger-fill-loud) 14%, var(--wa-color-surface-default));
-    --wa-color-danger-border-quiet: color-mix(in srgb, var(--wa-color-danger-fill-loud) 32%, var(--wa-color-surface-default));
-    --wa-color-danger-border-normal: color-mix(in srgb, var(--wa-color-danger-fill-loud) 50%, var(--wa-color-surface-default));
-    --wa-color-danger-border-loud: color-mix(in srgb, var(--wa-color-danger-fill-loud) 78%, var(--wa-color-neutral-on-normal));
+    --wa-color-danger-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 7%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 14%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 32%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 50%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-loud: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 78%,
+      var(--wa-color-neutral-on-normal)
+    );
     --wa-color-danger-on-quiet: light-dark(#c20b20, #ff696c);
     --wa-color-danger-on-normal: light-dark(#8e0717, #ff8a8c);
     --wa-color-danger-on-loud: #fff;
@@ -101,10 +184,10 @@
     --kui-wa-carousel-dot-hit-size: 20px;
     --kui-wa-carousel-control-size: 28px;
     --kui-wa-carousel-icon-size: 16px;
-    --kui-disclosure-icon-scale: .5;
-    --wa-shadow-s: 0 1px 3px rgb(0 0 0 / .14);
-    --wa-shadow-m: 0 .35rem 1rem rgb(0 0 0 / .11);
-    --wa-shadow-l: 0 .75rem 2rem rgb(0 0 0 / .09);
+    --kui-disclosure-icon-scale: 0.5;
+    --wa-shadow-s: 0 1px 3px rgb(0 0 0 / 0.14);
+    --wa-shadow-m: 0 0.35rem 1rem rgb(0 0 0 / 0.11);
+    --wa-shadow-l: 0 0.75rem 2rem rgb(0 0 0 / 0.09);
   }
 
   :where(:root),
@@ -129,7 +212,10 @@
     box-sizing: border-box;
     width: var(--kui-wa-carousel-control-size);
     height: var(--kui-wa-carousel-control-size);
-    padding: calc((var(--kui-wa-carousel-control-size) - var(--kui-wa-carousel-icon-size)) / 2);
+    padding: calc(
+      (var(--kui-wa-carousel-control-size) - var(--kui-wa-carousel-icon-size)) /
+        2
+    );
     font-size: var(--kui-wa-carousel-icon-size);
   }
 
@@ -142,7 +228,11 @@
     height: var(--kui-wa-carousel-dot-hit-size);
     color: var(--wa-color-neutral-fill-normal);
     background-color: transparent;
-    background-image: radial-gradient(circle, currentcolor 0 calc(var(--kui-wa-carousel-dot-size) / 2), transparent calc(var(--kui-wa-carousel-dot-size) / 2 + .5px));
+    background-image: radial-gradient(
+      circle,
+      currentcolor 0 calc(var(--kui-wa-carousel-dot-size) / 2),
+      transparent calc(var(--kui-wa-carousel-dot-size) / 2 + 0.5px)
+    );
     transform: none;
   }
 

package/dist/token-search-field.d.ts

@@ -0,0 +1,43 @@
+import { SafeHtml } from 'kerfjs';
+
+interface TokenSearchToken {
+    value: string;
+    label: string;
+    offset?: number;
+    accessibleLabel?: string;
+}
+interface TokenSearchFieldProps {
+    id: string;
+    label: string;
+    query?: string;
+    tokens?: readonly TokenSearchToken[];
+    placeholder?: string;
+    tokenPlaceholder?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    /** Allow an empty field to render as one iconic action. */
+    collapsible?: boolean;
+    /** Keep an empty collapsible field open while the application owns focus. */
+    expanded?: boolean;
+    expandAction?: string;
+    expandLabel?: string;
+    leading?: SafeHtml;
+    trailing?: SafeHtml;
+    editAction?: string;
+    removeAction?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    className?: string;
+    editorAttributes?: Readonly<Record<`data-${string}`, string>>;
+}
+interface TokenSearchFieldValue {
+    query: string;
+    tokens: TokenSearchToken[];
+}
+declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, }: TokenSearchFieldProps): SafeHtml;
+/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
+declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
+/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
+declare function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
+
+export { TokenSearchField, type TokenSearchFieldProps, type TokenSearchFieldValue, type TokenSearchToken, placeTokenSearchCaret, readTokenSearchField };

package/dist/token-search-field.js

@@ -0,0 +1,4 @@
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
+
+
+//# sourceMappingURL=token-search-field.js.map

package/dist/token-search-field.js.map

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

package/dist/value-table.d.ts

@@ -1,10 +1,18 @@
 import { SafeHtml } from 'kerfjs';
 
+interface ValueTableRowProps {
+    label: string | SafeHtml;
+    value: string | SafeHtml;
+    icon?: SafeHtml;
+    className?: string;
+}
+declare function ValueTableRow({ label, value, icon, className }: ValueTableRowProps): SafeHtml;
+
 interface ValueTableProps {
     label: string;
     className?: string;
-    children: SafeHtml | SafeHtml[];
+    children: SafeHtml | readonly SafeHtml[];
 }
 declare function ValueTable({ label, className, children }: ValueTableProps): SafeHtml;
 
-export { ValueTable, type ValueTableProps };
+export { ValueTable, type ValueTableProps, ValueTableRow, type ValueTableRowProps };

package/dist/value-table.js

@@ -1,3 +1,3 @@
-export { ValueTable } from './chunk-VKH2JLDZ.js';
+export { ValueTable, ValueTableRow } from './chunk-R6JHHBKQ.js';
 
 //# sourceMappingURL=value-table.js.map

package/dist/webawesome.d.ts

@@ -0,0 +1,100 @@
+import { KerfCustomElement } from 'kerfjs/jsx-runtime';
+
+/**
+ * Opt-in Kerf JSX declarations for the Web Awesome elements supported by the
+ * @kerfjs/ui catalog. Import this module for type effects only; component
+ * registration remains an explicit application concern.
+ */
+declare module 'kerfjs/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'wa-accordion': KerfCustomElement;
+            'wa-accordion-item': KerfCustomElement;
+            'wa-animated-image': KerfCustomElement;
+            'wa-animation': KerfCustomElement;
+            'wa-avatar': KerfCustomElement;
+            'wa-badge': KerfCustomElement;
+            'wa-breadcrumb': KerfCustomElement;
+            'wa-breadcrumb-item': KerfCustomElement;
+            'wa-select': KerfCustomElement & {
+                class?: string;
+                name?: string;
+                label?: string;
+                'aria-label'?: string;
+                value?: string;
+                placeholder?: string;
+                disabled?: boolean;
+            };
+            'wa-option': KerfCustomElement & {
+                value?: string;
+            };
+            'wa-button-group': KerfCustomElement;
+            'wa-callout': KerfCustomElement;
+            'wa-card': KerfCustomElement;
+            'wa-carousel': KerfCustomElement;
+            'wa-carousel-item': KerfCustomElement;
+            'wa-checkbox': KerfCustomElement;
+            'wa-checkbox-group': KerfCustomElement;
+            'wa-color-picker': KerfCustomElement;
+            'wa-comparison': KerfCustomElement;
+            'wa-copy-button': KerfCustomElement;
+            'wa-details': KerfCustomElement;
+            'wa-divider': KerfCustomElement;
+            'wa-dialog': KerfCustomElement;
+            'wa-drawer': KerfCustomElement;
+            'wa-button': KerfCustomElement & {
+                slot?: string;
+                appearance?: string;
+                'with-caret'?: boolean;
+                'aria-label'?: string;
+            };
+            'wa-dropdown': KerfCustomElement & {
+                placement?: string;
+            };
+            'wa-dropdown-item': KerfCustomElement;
+            'wa-format-bytes': KerfCustomElement;
+            'wa-format-date': KerfCustomElement;
+            'wa-format-number': KerfCustomElement;
+            'wa-icon': KerfCustomElement;
+            'wa-include': KerfCustomElement;
+            'wa-input': KerfCustomElement;
+            'wa-intersection-observer': KerfCustomElement;
+            'wa-known-date': KerfCustomElement;
+            'wa-markdown': KerfCustomElement;
+            'wa-mutation-observer': KerfCustomElement;
+            'wa-number-input': KerfCustomElement;
+            'wa-otp-input': KerfCustomElement;
+            'wa-page': KerfCustomElement;
+            'wa-pagination': KerfCustomElement;
+            'wa-popover': KerfCustomElement;
+            'wa-popup': KerfCustomElement;
+            'wa-progress-bar': KerfCustomElement;
+            'wa-progress-ring': KerfCustomElement;
+            'wa-qr-code': KerfCustomElement;
+            'wa-radio': KerfCustomElement;
+            'wa-radio-group': KerfCustomElement;
+            'wa-random-content': KerfCustomElement;
+            'wa-rating': KerfCustomElement;
+            'wa-relative-time': KerfCustomElement;
+            'wa-resize-observer': KerfCustomElement;
+            'wa-scroller': KerfCustomElement;
+            'wa-skeleton': KerfCustomElement;
+            'wa-slider': KerfCustomElement;
+            'wa-spinner': KerfCustomElement;
+            'wa-split-panel': KerfCustomElement;
+            'wa-switch': KerfCustomElement;
+            'wa-tab': KerfCustomElement;
+            'wa-tab-group': KerfCustomElement;
+            'wa-tab-panel': KerfCustomElement;
+            'wa-tag': KerfCustomElement;
+            'wa-textarea': KerfCustomElement;
+            'wa-time-input': KerfCustomElement;
+            'wa-toast': KerfCustomElement;
+            'wa-toast-item': KerfCustomElement;
+            'wa-tooltip': KerfCustomElement;
+            'wa-tree': KerfCustomElement;
+            'wa-tree-item': KerfCustomElement;
+            'wa-zoomable-frame': KerfCustomElement;
+        }
+    }
+}

package/dist/webawesome.js

@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=webawesome.js.map

package/dist/webawesome.js.map

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

package/dist/wire-resizable-regions.js

@@ -1,4 +1,4 @@
-export { wireResizableRegions } from './chunk-4HHCYSGT.js';
+export { wireResizableRegions } from './chunk-AQNKJRFH.js';
 
 
 //# sourceMappingURL=wire-resizable-regions.js.map

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

@@ -0,0 +1,11 @@
+interface TokenSearchSubmit {
+    id: string;
+    editor: HTMLElement;
+}
+interface WireTokenSearchFieldsOptions {
+    onSubmit: (submission: TokenSearchSubmit) => void;
+}
+/** Keep TokenSearchField wrapping, submit Enter, and preserve its caret across controlled token deletion. */
+declare function wireTokenSearchFields(root: HTMLElement, { onSubmit }: WireTokenSearchFieldsOptions): () => void;
+
+export { type TokenSearchSubmit, type WireTokenSearchFieldsOptions, wireTokenSearchFields };

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

@@ -0,0 +1,5 @@
+export { wireTokenSearchFields } from './chunk-H5AGGVU5.js';
+
+
+
+//# sourceMappingURL=wire-token-search-fields.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-token-search-fields.js"}

package/docs/accessibility.md

@@ -6,11 +6,28 @@ These are normative contracts for package components and consuming applications.
 
 - All controls have accessible names and visible `:focus-visible` treatment.
 - Decorative `LucideIcon` output is `aria-hidden`; pass `label` only when the SVG itself conveys meaning.
-- `MenuItem` uses native button Enter/Space behavior. `selected` maps to `aria-current="page"`; `pressed` maps to `aria-pressed`. It deliberately does not emit `role="menuitem"` in isolation—a true ARIA menu must own arrow, Home/End, Escape, and focus behavior as one widget.
+- `MenuItem` uses native button Enter/Space behavior. `selected` maps to `aria-current="page"`; `pressed` maps to `aria-pressed`. Its `trailing` content is dormant and must not contain controls. Its `rootAttributes` slot accepts only application `data-*` metadata and deliberately cannot emit `role="menuitem"` in isolation—a true ARIA menu must own arrow, Home/End, Escape, and focus behavior as one widget.
+- `MenuHeader` owns action naming, disabled state, and disclosure `aria-expanded`. Toggle mode supplies one decorative 18px `DisclosureArrow` when `actionIcon` is omitted; it mirrors `expanded` while the native button's accessible name stays stable. The application must update that controlled state and reveal or hide real content. A valid `count` is visually rendered in an `aria-hidden` neutral pill while the required localized `countLabel` becomes part of the owning heading or disclosure button's accessible name; zero remains a real count. Its narrow `triggerAttributes` slot may describe a native popover or controlled-content relationship with `popoverTarget`, `popoverTargetAction`, `aria-controls`, and `aria-haspopup`; the application owns the target surface and its focus/dismissal behavior.
+- In any `.kui-pane`, menu rows, `MenuHeader` actions, and toolbar groups keep a minimum 44px target in both dimensions. A `MenuHeader` fills the available inline width and keeps that action at the logical end, including in RTL. Its action visual defaults to 18px through `--kui-menu-header-action-icon-size`; do not reduce the target to the visible icon.
 - `LoadingSpinner` is either labeled (`role="img"`) or hidden. Its rotation stops for reduced motion.
 - `StateBanner` defaults to polite `role="status"`; use `urgency="alert"` only for an attention-requiring failure.
 - `EmptyState` reports busy state through `aria-busy` and never relies on an illustration as its label.
-- `Select` follows the Web Awesome host's standard `input`/`change` events. Application tests verify the live `value`, focus, and events—not attributes alone.
+- `Select` follows the Web Awesome host's standard `input`/`change` events. Application tests verify the live `value`, focus, and events—not attributes alone. Its decorative option icons and value-dependent selected content remain present after controlled rerenders, so the visible choice does not silently lose its non-text cue.
+- `DisclosureArrow` is an 18px root-scaled decorative visual by default, not an interaction target. Its owning native control supplies a stable accessible name, pointer and keyboard interaction, and `aria-expanded`; multiple arrows keep independently controlled state. Consumers may override `--kui-disclosure-arrow-size` without changing that ownership. Configured directions animate over the shortest path; a 180-degree closed-to-open tie uses counterclockwise rotation.
+
+## MenuActionRow
+
+`MenuActionRow` renders a noninteractive visual root containing primary and
+trailing native buttons as siblings. The primary comes first in DOM and Tab
+order and alone receives `aria-current` or `aria-pressed`; the trailing button
+has its own required accessible name and disabled state. Both controls carry
+the row's item id for application delegation, while the root deliberately has
+no action or role. `label`, `icon`, and `trailingActionIcon` are dormant visual
+content and must not contain buttons, links, interactive roles, or other
+controls. A trailing click, double click, context menu, Enter, or Space
+must never activate the primary control. The application owns controlled
+selection and the lifecycle, focus, and dismissal policy of any related
+popover or context menu.
 
 ## ResizableRegion
 
@@ -22,12 +39,28 @@ The handle exposes separator role, orientation, name, minimum, maximum, and curr
 - primary-pointer drag with clamping;
 - preview callbacks while dragging and one commit callback on release.
 
-The application owns persistence and collapsed/expanded policy. Keep the last expanded size outside the component and restore it when reopening.
+The application owns persistence and collapsed/expanded policy. Keep the last expanded size outside the component and restore it when reopening. An optional `handleIcon` replaces only decorative dormant content; it must not contain controls or interactive roles because the separator remains the sole focus and interaction owner.
+
+## DialogHeader
+
+`DialogHeader` keeps its icon and `h2` together in the leading borderless
+`ToolbarControlGroup`, with optional actions in a separate trailing group. Pass
+localized `actionsLabel` text when the action group needs an accessible name;
+the component does not synthesize an English label. The application connects
+`titleId` and an optional `summaryId` to the owning dialog through
+`aria-labelledby` and `aria-describedby`. Pass action children directly so the
+component can group them; existing pre-grouped actions remain compatible, but
+their inner groups retain their own labels and semantics.
 
 ## Tabs
 
 `AppTab` renders one controlled tab. `TabBar` supplies the containing tab list,
 fixed leading/trailing regions, and a horizontally scrollable strip.
+`AppTab.rootAttributes` accepts application `data-*` metadata only; runtime
+filtering rejects roles plus case variants of component- or wiring-owned
+action, identity, selection, drag, drop, and component attributes. An optional
+`closeIcon` is decorative dormant content inside the already named close button
+and must not contain interactive descendants.
 `wireTabBars()` adds Left/Right wrapping, Home/End, Delete/Backspace close
 activation, same-bar pointer reordering, `Alt+Shift+ArrowLeft/ArrowRight`
 reordering, focus restoration, scroll-into-view, and pointer-proximity
@@ -51,6 +84,30 @@ re-renders. Keep labels unique and meaningful even when `content` shows only an
 icon. Use tabs—not a segmented control—when choices switch page regions that
 need `tab`/`tabpanel` semantics.
 
+## TokenSearchField
+
+`TokenSearchField` exposes the editable surface as a named `searchbox`. Each
+chip is atomic (`contenteditable="false"`) and contains separately named edit
+and remove buttons; the clear action is also named. Disabled fields publish
+`aria-disabled` and stop editing without hiding the current expression. The
+application owns query parsing and must announce result-count or loading
+changes separately when that feedback is useful. Use `readTokenSearchField()`
+to ignore the chip buttons' visible text when reading browser-edited content,
+and `placeTokenSearchCaret()` to restore a text caret without landing inside a
+chip. Call `wireTokenSearchFields()` once at a stable root so Enter submits
+without inserting a contenteditable line break and keyboard chip deletion
+restores focus plus the text-relative caret after controlled rendering replaces
+the editor; the editor still wraps text visually at its inline edge. Editable text is DOM-owned between token changes; a clear handler empties
+the editor's `textContent` before updating application state. Leading and
+trailing controls share the first text line's fixed vertical center and remain
+there as the editor wraps. In `collapsible` mode, the closed state is one named
+iconic search button and the open state is the same named searchbox, whether
+the field stands alone or is composed inside `ToolbarControlGroup`.
+Applications set `expanded` while the field is focused, move focus from the
+trigger into the revealed editor, and clear `expanded` only after focus leaves
+the complete component. Text or tokens keep the field expanded even when that
+transient state is false. Width animation is disabled under reduced motion.
+
 ## Verification matrix
 
 For each changed component, inspect default, hover, focus, disabled, selected/pressed, busy/error, long-content, wide, narrow, light, dark, increased-contrast, reduced-motion, keyboard-only, and 200%-zoom states where applicable. DOM order must match reading and focus order, with no clipping or unreachable action.