@kerfjs/ui 5.0.0-beta.109 → 5.0.0-beta.110

package/ai/component-catalog.json

@@ -6716,7 +6716,7 @@
       "category": "Controls",
       "kind": "component",
       "source": "kerf",
-      "description": "A labeled single-line input or multi-line textarea with hint and error text, an optional leading icon, clear button, character count, and native numeric constraints, at the 44px control height or compact.",
+      "description": "A labeled single-line input (including native date and number types) or multi-line textarea with hint and error text, an optional leading icon, clear button, character count, and native numeric constraints, at the 44px control height or compact.",
       "uses": [
         "lucide-icon"
       ],
@@ -6729,7 +6729,8 @@
         "A form or dialog collects a line of free text: label names it (or ariaLabel when nearby content already does), hint explains it, and error reports a validation problem.",
         "People write a longer note or message: multiline with rows, or rows plus maxRows to grow with the content; maxLength with showCount shows the remaining budget.",
         "A filter or search field needs a leading icon and a clear button: icon and clearable.",
-        "An exact number needs native range or decimal-step validation: type=number with min, max, and step (including step=any)."
+        "An exact number needs native range or decimal-step validation: type=number with min, max, and step (including step=any).",
+        "A form needs a calendar date with the browser's native date picker: type=date."
       ],
       "avoidWhen": [
         "Do not use when only existing values are allowed; use Select.",
@@ -6775,7 +6776,8 @@
         "disabled",
         "read-only",
         "required",
-        "email, password, search, url, tel, or number type",
+        "native autofocus (input or textarea)",
+        "email, password, search, url, tel, number, or date type",
         "number type with native min, max, and step constraints"
       ],
       "accessibility": [

package/ai/components/text-field.md

@@ -4,7 +4,7 @@
 
 `@kerfjs/ui:text-field` · Kerf UI · component · Controls
 
-A labeled single-line input or multi-line textarea with hint and error text, an optional leading icon, clear button, character count, and native numeric constraints, at the 44px control height or compact.
+A labeled single-line input (including native date and number types) or multi-line textarea with hint and error text, an optional leading icon, clear button, character count, and native numeric constraints, at the 44px control height or compact.
 
 ## When to use
 
@@ -14,6 +14,7 @@ Collect free text (names, addresses, notes, comments) with Kerf's field chrome,
 - People write a longer note or message: multiline with rows, or rows plus maxRows to grow with the content; maxLength with showCount shows the remaining budget.
 - A filter or search field needs a leading icon and a clear button: icon and clearable.
 - An exact number needs native range or decimal-step validation: type=number with min, max, and step (including step=any).
+- A form needs a calendar date with the browser's native date picker: type=date.
 
 **Not when:**
 
@@ -53,7 +54,8 @@ Exact prop names and types: [`@kerfjs/ui/text-field`](../public-api-signatures-v
 - disabled
 - read-only
 - required
-- email, password, search, url, tel, or number type
+- native autofocus (input or textarea)
+- email, password, search, url, tel, number, or date type
 - number type with native min, max, and step constraints
 
 ## Composition

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.109` and `kerfjs@5.0.0-beta.109`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.110` and `kerfjs@5.0.0-beta.110`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -6125,7 +6125,7 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 /** `default` is the 44px control height; `compact` is 33px with smaller text. */
 type TextFieldSize = 'default' | 'compact';
 /** The kinds of single-line value a TextField takes. */
-type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number';
+type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number' | 'date';
 /** Application `data-*` metadata; the TextField's own markers stay protected. */
 type TextFieldRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
 /**
@@ -6169,7 +6169,7 @@ interface TextFieldOptions {
      * `wireTextFields(root)`, which updates it as people type.
      */
     showCount?: boolean;
-    /** Single-line value kind (default `text`). */
+    /** Single-line value kind (default `text`); `date` uses the native picker. */
     type?: TextFieldType;
     /** Native lower bound for `type="number"` (number or numeric string). */
     min?: number | string;
@@ -6189,6 +6189,8 @@ interface TextFieldOptions {
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
+    /** Request native focus on insertion or when the containing dialog opens. */
+    autofocus?: boolean;
     autocomplete?: string;
     /** The input's id, for an external label or form. */
     id?: string;
@@ -6205,7 +6207,7 @@ interface TextFieldOptions {
  * The whole field is one `<label>`, so clicking anywhere on it focuses the
  * input; the input is named by `label` (or `ariaLabel`) directly.
  */
-declare function TextField({ label, ariaLabel, value, name, placeholder, hint, error, size, icon, clearable, clearLabel, maxLength, showCount, type, min, max, step, multiline, rows, maxRows, disabled, readOnly, required, autocomplete, id, className, rootAttributes, slot, }: TextFieldProps): kerfjs.SafeHtml;
+declare function TextField({ label, ariaLabel, value, name, placeholder, hint, error, size, icon, clearable, clearLabel, maxLength, showCount, type, min, max, step, multiline, rows, maxRows, disabled, readOnly, required, autofocus, autocomplete, id, className, rootAttributes, slot, }: TextFieldProps): kerfjs.SafeHtml;
 
 export { TextField, type TextFieldName, type TextFieldOptions, type TextFieldProps, type TextFieldRootAttributes, type TextFieldSize, type TextFieldType };
 ```

package/ai/skill.md

@@ -471,6 +471,10 @@ For a read-only field preview that replaces a Web Awesome input, use `FieldLabel
 For exact numeric entry, use `TextField` with `type="number"` and pass native
 `min`, `max`, and `step` as numbers or strings (`step="any"` permits arbitrary
 decimals). Those attributes reach the inner input only for numeric fields.
+For a calendar date use `type="date"` with an ISO date value. Set
+`autofocus` when the native input or textarea should receive initial focus on
+insertion or when its containing dialog opens; move focus explicitly when an
+application interaction needs different timing.
 
 Common mistakes:
 

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.109` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.110` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/{chunk-YVZCKXR3.js → chunk-36HVQ72F.js}

@@ -33,6 +33,7 @@ function TextField({
   disabled = false,
   readOnly = false,
   required = false,
+  autofocus = false,
   autocomplete,
   id,
   className = "",
@@ -50,6 +51,7 @@ function TextField({
     disabled,
     readonly: readOnly,
     required,
+    autofocus,
     autocomplete,
     maxlength: maxLength,
     // The label element also wraps the clear button and the count, so the
@@ -118,4 +120,4 @@ function TextField({
 
 export { TextField };
 
-//# sourceMappingURL=chunk-YVZCKXR3.js.map
+//# sourceMappingURL=chunk-36HVQ72F.js.map

package/dist/chunk-36HVQ72F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/text-field/text-field.tsx"],"names":[],"mappings":"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","file":"chunk-36HVQ72F.js","sourcesContent":["import { CircleX } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/** `default` is the 44px control height; `compact` is 33px with smaller text. */\nexport type TextFieldSize = 'default' | 'compact';\n\n/** The kinds of single-line value a TextField takes. */\nexport type TextFieldType =\n  'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number' | 'date';\n\nconst TEXT_FIELD_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-invalid',\n  'data-multiline',\n]);\n\n/** Application `data-*` metadata; the TextField's own markers stay protected. */\nexport type TextFieldRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\n/**\n * The field's accessible name: a visible `label`, or `ariaLabel` when the\n * surrounding content already names it.\n */\nexport type TextFieldName =\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string };\n\nexport type TextFieldProps = TextFieldName & TextFieldOptions;\n\nexport interface TextFieldOptions {\n  /** The controlled value. */\n  value?: string;\n  name?: string;\n  placeholder?: string;\n  /** Supporting text below the field, also its accessible description. */\n  hint?: string;\n  /**\n   * A validation message: shown below the field in the danger color, added\n   * to its description, and marking it `aria-invalid`.\n   */\n  error?: string;\n  size?: TextFieldSize;\n  /** A leading decorative icon, such as a `LucideIcon` (single-line only). */\n  icon?: KerfUiContent;\n  /**\n   * A clear button while the field has a value (single-line only). Needs\n   * `wireTextFields(root)`, which clears the field and announces `input`.\n   */\n  clearable?: boolean;\n  /** The clear button's accessible name (default `Clear`). */\n  clearLabel?: string;\n  /** The most characters the field accepts (native `maxlength`). */\n  maxLength?: number;\n  /**\n   * Show a live `count / maxLength` below the field. Needs `maxLength` and\n   * `wireTextFields(root)`, which updates it as people type.\n   */\n  showCount?: boolean;\n  /** Single-line value kind (default `text`); `date` uses the native picker. */\n  type?: TextFieldType;\n  /** Native lower bound for `type=\"number\"` (number or numeric string). */\n  min?: number | string;\n  /** Native upper bound for `type=\"number\"` (number or numeric string). */\n  max?: number | string;\n  /** Native number increment (number, numeric string, or `\"any\"`). */\n  step?: number | string;\n  /** A multi-line field: a `<textarea>`. */\n  multiline?: boolean;\n  /** A multi-line field's height in lines (default 3). */\n  rows?: number;\n  /**\n   * Grow a multi-line field with its content from `rows` up to this many\n   * lines, then scroll.\n   */\n  maxRows?: number;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  /** Request native focus on insertion or when the containing dialog opens. */\n  autofocus?: boolean;\n  autocomplete?: string;\n  /** The input's id, for an external label or form. */\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata (a `data-key`). */\n  rootAttributes?: TextFieldRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A text input with its label above, an optional leading icon and clear\n * button, and supporting or error text below, at the 44px control height or\n * compact. `multiline` makes it a textarea that can grow with its content.\n * The whole field is one `<label>`, so clicking anywhere on it focuses the\n * input; the input is named by `label` (or `ariaLabel`) directly.\n */\nexport function TextField({\n  label,\n  ariaLabel,\n  value,\n  name,\n  placeholder,\n  hint,\n  error,\n  size = 'default',\n  icon,\n  clearable = false,\n  clearLabel = 'Clear',\n  maxLength,\n  showCount = false,\n  type = 'text',\n  min,\n  max,\n  step,\n  multiline = false,\n  rows = 3,\n  maxRows,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  autofocus = false,\n  autocomplete,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: TextFieldProps) {\n  const description = [hint, error].filter(Boolean).join(' ') || undefined;\n  const shared = {\n    id,\n    name,\n    // A clearable field always has a placeholder, so CSS can hide its clear\n    // button while the field is empty (`:placeholder-shown`); a blank one\n    // shows nothing.\n    placeholder: clearable && !multiline ? (placeholder ?? ' ') : placeholder,\n    disabled,\n    readonly: readOnly,\n    required,\n    autofocus,\n    autocomplete,\n    maxlength: maxLength,\n    // The label element also wraps the clear button and the count, so the\n    // input takes its name explicitly rather than from the label's text.\n    'aria-label': label ?? ariaLabel,\n    'aria-description': description,\n    'aria-invalid': error ? 'true' : undefined,\n  } as const;\n  const hintText =\n    hint === undefined ? null : (\n      <span class=\"kui-text-field__hint\" aria-hidden=\"true\">\n        {hint}\n      </span>\n    );\n  const count =\n    showCount && maxLength !== undefined\n      ? `${String((value ?? '').length)} / ${String(maxLength)}`\n      : undefined;\n  const style = [\n    multiline ? `--_kui-text-field-rows:${String(rows)}` : '',\n    multiline && maxRows !== undefined\n      ? `--_kui-text-field-max-rows:${String(Math.max(rows, maxRows))}`\n      : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <label\n      {...filterDataAttributes(rootAttributes, TEXT_FIELD_PROTECTED)}\n      class={`kui-text-field ${className}`.trim()}\n      data-component=\"text-field\"\n      data-size={size}\n      data-invalid={error ? '' : undefined}\n      data-multiline={\n        multiline ? (maxRows === undefined ? '' : 'grow') : undefined\n      }\n      style={style || undefined}\n      slot={slot}\n    >\n      {label === undefined ? null : (\n        <span class=\"kui-text-field__label\" aria-hidden=\"true\">\n          {label}\n          {required ? (\n            <span class=\"kui-text-field__required\" aria-hidden=\"true\">\n              *\n            </span>\n          ) : null}\n        </span>\n      )}\n      <span class=\"kui-text-field__box\">\n        {icon === undefined || multiline ? null : (\n          <span class=\"kui-text-field__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {multiline ? (\n          <textarea {...shared} class=\"kui-text-field__input\" rows={rows}>\n            {value ?? ''}\n          </textarea>\n        ) : (\n          <input\n            {...shared}\n            class=\"kui-text-field__input\"\n            type={type}\n            value={value}\n            min={type === 'number' ? min : undefined}\n            max={type === 'number' ? max : undefined}\n            step={type === 'number' ? step : undefined}\n          />\n        )}\n        {clearable && !multiline ? (\n          <button\n            type=\"button\"\n            class=\"kui-text-field__clear\"\n            aria-label={clearLabel}\n            data-text-field-clear=\"\"\n            disabled={disabled || readOnly}\n          >\n            <LucideIcon icon={CircleX} name=\"circle-x\" />\n          </button>\n        ) : null}\n      </span>\n      {count === undefined ? (\n        hintText\n      ) : (\n        <span class=\"kui-text-field__footer\">\n          {hintText}\n          <span class=\"kui-text-field__count\" data-text-field-count=\"\">\n            {count}\n          </span>\n        </span>\n      )}\n      {error === undefined ? null : (\n        <span class=\"kui-text-field__error\" aria-hidden=\"true\">\n          {error}\n        </span>\n      )}\n    </label>\n  );\n}\n"]}

package/dist/index.js

@@ -17,7 +17,7 @@ export { wireScrollDividers } from './chunk-OZ6X76G5.js';
 export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
 export { TabBarItem } from './chunk-ZCDRLN3B.js';
 export { TabBar } from './chunk-7AK5I7U7.js';
-export { TextField } from './chunk-YVZCKXR3.js';
+export { TextField } from './chunk-36HVQ72F.js';
 export { Spacer } from './chunk-YMUIQRWK.js';
 export { SplitButton } from './chunk-TI2GV36S.js';
 export { StateBanner } from './chunk-2FW7D4IG.js';

package/dist/styles/button.css

@@ -44,7 +44,12 @@
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
   --_kui-button-text: var(--kui-color-brand-on-loud);
   --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
-  --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
+  /* A quiet hover fill can be stronger than the page (including app-owned
+     palettes), so darken the brand label enough for text on that fill. */
+  --_kui-button-on-quiet: light-dark(
+    oklch(from var(--kui-color-brand-on-quiet) min(l, 0.38) c h),
+    var(--kui-color-brand-on-quiet)
+  );
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
 .kui-button[data-tone="success"] {
@@ -108,7 +113,10 @@
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
   --_kui-button-text: var(--kui-color-brand-on-loud);
   --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
-  --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
+  --_kui-button-on-quiet: light-dark(
+    oklch(from var(--kui-color-brand-on-quiet) min(l, 0.38) c h),
+    var(--kui-color-brand-on-quiet)
+  );
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
 /* A pressed toggle draws on top of its tone and emphasis. Secondary and plain

package/dist/styles/components/actions/button/button.css

@@ -44,7 +44,12 @@
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
   --_kui-button-text: var(--kui-color-brand-on-loud);
   --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
-  --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
+  /* A quiet hover fill can be stronger than the page (including app-owned
+     palettes), so darken the brand label enough for text on that fill. */
+  --_kui-button-on-quiet: light-dark(
+    oklch(from var(--kui-color-brand-on-quiet) min(l, 0.38) c h),
+    var(--kui-color-brand-on-quiet)
+  );
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
 .kui-button[data-tone="success"] {
@@ -108,7 +113,10 @@
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
   --_kui-button-text: var(--kui-color-brand-on-loud);
   --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
-  --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
+  --_kui-button-on-quiet: light-dark(
+    oklch(from var(--kui-color-brand-on-quiet) min(l, 0.38) c h),
+    var(--kui-color-brand-on-quiet)
+  );
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
 /* A pressed toggle draws on top of its tone and emphasis. Secondary and plain

package/dist/text-field.d.ts

@@ -4,7 +4,7 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 /** `default` is the 44px control height; `compact` is 33px with smaller text. */
 type TextFieldSize = 'default' | 'compact';
 /** The kinds of single-line value a TextField takes. */
-type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number';
+type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number' | 'date';
 /** Application `data-*` metadata; the TextField's own markers stay protected. */
 type TextFieldRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
 /**
@@ -48,7 +48,7 @@ interface TextFieldOptions {
      * `wireTextFields(root)`, which updates it as people type.
      */
     showCount?: boolean;
-    /** Single-line value kind (default `text`). */
+    /** Single-line value kind (default `text`); `date` uses the native picker. */
     type?: TextFieldType;
     /** Native lower bound for `type="number"` (number or numeric string). */
     min?: number | string;
@@ -68,6 +68,8 @@ interface TextFieldOptions {
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
+    /** Request native focus on insertion or when the containing dialog opens. */
+    autofocus?: boolean;
     autocomplete?: string;
     /** The input's id, for an external label or form. */
     id?: string;
@@ -84,6 +86,6 @@ interface TextFieldOptions {
  * The whole field is one `<label>`, so clicking anywhere on it focuses the
  * input; the input is named by `label` (or `ariaLabel`) directly.
  */
-declare function TextField({ label, ariaLabel, value, name, placeholder, hint, error, size, icon, clearable, clearLabel, maxLength, showCount, type, min, max, step, multiline, rows, maxRows, disabled, readOnly, required, autocomplete, id, className, rootAttributes, slot, }: TextFieldProps): kerfjs.SafeHtml;
+declare function TextField({ label, ariaLabel, value, name, placeholder, hint, error, size, icon, clearable, clearLabel, maxLength, showCount, type, min, max, step, multiline, rows, maxRows, disabled, readOnly, required, autofocus, autocomplete, id, className, rootAttributes, slot, }: TextFieldProps): kerfjs.SafeHtml;
 
 export { TextField, type TextFieldName, type TextFieldOptions, type TextFieldProps, type TextFieldRootAttributes, type TextFieldSize, type TextFieldType };

package/dist/text-field.js

@@ -1,4 +1,4 @@
-export { TextField } from './chunk-YVZCKXR3.js';
+export { TextField } from './chunk-36HVQ72F.js';
 
 
 

package/docs/accessibility.md

@@ -546,12 +546,22 @@ its label; the input itself reports `required`. The focus ring is drawn on the
 box around the input (`:focus-within`), 3px with a 1px offset like every Kerf
 control.
 
+`autofocus` forwards to the native input or textarea. It requests initial focus
+when a field is inserted or its containing native dialog opens. Applications
+still direct focus themselves when it must move from an already focused control.
+
 For `type="number"`, `min`, `max`, and `step` pass through to the native input.
 Each accepts a number or string; `step="any"` allows arbitrary decimals.
 They are omitted for other input types and `multiline` textareas. Native
 constraint validation (`rangeUnderflow`, `rangeOverflow`, and `stepMismatch`)
 then applies without custom field wiring.
 
+For `type="date"`, TextField renders a native date input. The browser owns its
+picker, localized display, keyboard interaction, and `input`/`change` events;
+the `value` remains an ISO date string (`YYYY-MM-DD`). The same `name`, label,
+required, disabled, read-only, and focus behavior as other single-line fields
+applies. Numeric `min`, `max`, and `step` props do not pass to date inputs.
+
 `clearable` adds a native `<button>` named by `clearLabel` (default "Clear")
 after the input. It is hidden while the field is empty, is a normal Tab stop,
 and with `wireTextFields(root)` empties the field, dispatches bubbling `input`
@@ -563,6 +573,12 @@ touch screens so focusing a field never zooms the page in iOS.
 
 ## Button and SplitButton focus
 
+A brand `Button` with `secondary` or `plain` emphasis clamps its
+`brand-on-quiet` label to a darker light-theme value. Its quiet hover fill can
+be stronger than the page background, so the unclamped token may be too light
+for the button label. The same label color applies to pressed and focused
+states; the focus ring remains visible around the control.
+
 `Button` and each `SplitButton` half draw the 3px focus ring 1px outside the
 box, against the surrounding surface, because a loud fill can share the ring's
 hue (the brand fill matches the focus color in both schemes). An ancestor that

package/llms.txt

@@ -743,11 +743,12 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
   an app div with `max-height`, `overflow`, and a border.
 - **Use `Button` for every standalone action, icon-only included.**
   `Button` (`@kerfjs/ui/button`) is a native button in a `tone` (`neutral`,
-  `brand`, `danger`) and an `emphasis` (`primary`, `secondary`, `plain`), at
+  `brand`, `success`, `danger`) and an `emphasis` (`primary`, `secondary`, `plain`), at
   the 44px control height or `size="compact"`, with an optional `icon`,
   `loading`, `href`, form `type`, `shape` (`rounded` or `pill`), and `pressed`
   for a toggle. With an `icon` and `ariaLabel` but no label it is an icon-only
-  square (a circle as a pill). Inside a `ToolbarControlGroup`
+  square (a circle as a pill). Brand secondary/plain labels darken the brand
+  token in light mode to stay legible on a quiet hover fill. Inside a `ToolbarControlGroup`
   keep a native `button`; the group owns its geometry.
 - **Paint a strip's surface with `List surface`.** `surface="base"` or
   `"raised"` fills a List and its insets with a solid surface (a banner strip
@@ -759,7 +760,10 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
   `showCount`, at the 44px height or `size="compact"`. Call
   `wireTextFields(root)` (`@kerfjs/ui/wire-text-fields`) once for clearing and
   counting. For `type="number"`, pass native `min`, `max`, and `step` as numbers
-  or strings (`step="any"` accepts arbitrary decimals). Never render `wa-input`
+  or strings (`step="any"` accepts arbitrary decimals). For `type="date"`,
+  pass an ISO date string and use the browser's native picker. `autofocus`
+  forwards to the native input or textarea for insertion and dialog open.
+  Never render `wa-input`
   or `wa-textarea` for a form field.
 - **Use `Checkbox`, `CheckboxGroup`, `RadioGroup`, and `Switch` for native
   toggles.** `@kerfjs/ui/checkbox` (with `indeterminate` and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.109",
+  "version": "5.0.0-beta.110",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",

package/dist/chunk-YVZCKXR3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/forms/text-field/text-field.tsx"],"names":[],"mappings":"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","file":"chunk-YVZCKXR3.js","sourcesContent":["import { CircleX } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/** `default` is the 44px control height; `compact` is 33px with smaller text. */\nexport type TextFieldSize = 'default' | 'compact';\n\n/** The kinds of single-line value a TextField takes. */\nexport type TextFieldType =\n  'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number';\n\nconst TEXT_FIELD_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-invalid',\n  'data-multiline',\n]);\n\n/** Application `data-*` metadata; the TextField's own markers stay protected. */\nexport type TextFieldRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\n/**\n * The field's accessible name: a visible `label`, or `ariaLabel` when the\n * surrounding content already names it.\n */\nexport type TextFieldName =\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string };\n\nexport type TextFieldProps = TextFieldName & TextFieldOptions;\n\nexport interface TextFieldOptions {\n  /** The controlled value. */\n  value?: string;\n  name?: string;\n  placeholder?: string;\n  /** Supporting text below the field, also its accessible description. */\n  hint?: string;\n  /**\n   * A validation message: shown below the field in the danger color, added\n   * to its description, and marking it `aria-invalid`.\n   */\n  error?: string;\n  size?: TextFieldSize;\n  /** A leading decorative icon, such as a `LucideIcon` (single-line only). */\n  icon?: KerfUiContent;\n  /**\n   * A clear button while the field has a value (single-line only). Needs\n   * `wireTextFields(root)`, which clears the field and announces `input`.\n   */\n  clearable?: boolean;\n  /** The clear button's accessible name (default `Clear`). */\n  clearLabel?: string;\n  /** The most characters the field accepts (native `maxlength`). */\n  maxLength?: number;\n  /**\n   * Show a live `count / maxLength` below the field. Needs `maxLength` and\n   * `wireTextFields(root)`, which updates it as people type.\n   */\n  showCount?: boolean;\n  /** Single-line value kind (default `text`). */\n  type?: TextFieldType;\n  /** Native lower bound for `type=\"number\"` (number or numeric string). */\n  min?: number | string;\n  /** Native upper bound for `type=\"number\"` (number or numeric string). */\n  max?: number | string;\n  /** Native number increment (number, numeric string, or `\"any\"`). */\n  step?: number | string;\n  /** A multi-line field: a `<textarea>`. */\n  multiline?: boolean;\n  /** A multi-line field's height in lines (default 3). */\n  rows?: number;\n  /**\n   * Grow a multi-line field with its content from `rows` up to this many\n   * lines, then scroll.\n   */\n  maxRows?: number;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  autocomplete?: string;\n  /** The input's id, for an external label or form. */\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata (a `data-key`). */\n  rootAttributes?: TextFieldRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A text input with its label above, an optional leading icon and clear\n * button, and supporting or error text below, at the 44px control height or\n * compact. `multiline` makes it a textarea that can grow with its content.\n * The whole field is one `<label>`, so clicking anywhere on it focuses the\n * input; the input is named by `label` (or `ariaLabel`) directly.\n */\nexport function TextField({\n  label,\n  ariaLabel,\n  value,\n  name,\n  placeholder,\n  hint,\n  error,\n  size = 'default',\n  icon,\n  clearable = false,\n  clearLabel = 'Clear',\n  maxLength,\n  showCount = false,\n  type = 'text',\n  min,\n  max,\n  step,\n  multiline = false,\n  rows = 3,\n  maxRows,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  autocomplete,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: TextFieldProps) {\n  const description = [hint, error].filter(Boolean).join(' ') || undefined;\n  const shared = {\n    id,\n    name,\n    // A clearable field always has a placeholder, so CSS can hide its clear\n    // button while the field is empty (`:placeholder-shown`); a blank one\n    // shows nothing.\n    placeholder: clearable && !multiline ? (placeholder ?? ' ') : placeholder,\n    disabled,\n    readonly: readOnly,\n    required,\n    autocomplete,\n    maxlength: maxLength,\n    // The label element also wraps the clear button and the count, so the\n    // input takes its name explicitly rather than from the label's text.\n    'aria-label': label ?? ariaLabel,\n    'aria-description': description,\n    'aria-invalid': error ? 'true' : undefined,\n  } as const;\n  const hintText =\n    hint === undefined ? null : (\n      <span class=\"kui-text-field__hint\" aria-hidden=\"true\">\n        {hint}\n      </span>\n    );\n  const count =\n    showCount && maxLength !== undefined\n      ? `${String((value ?? '').length)} / ${String(maxLength)}`\n      : undefined;\n  const style = [\n    multiline ? `--_kui-text-field-rows:${String(rows)}` : '',\n    multiline && maxRows !== undefined\n      ? `--_kui-text-field-max-rows:${String(Math.max(rows, maxRows))}`\n      : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <label\n      {...filterDataAttributes(rootAttributes, TEXT_FIELD_PROTECTED)}\n      class={`kui-text-field ${className}`.trim()}\n      data-component=\"text-field\"\n      data-size={size}\n      data-invalid={error ? '' : undefined}\n      data-multiline={\n        multiline ? (maxRows === undefined ? '' : 'grow') : undefined\n      }\n      style={style || undefined}\n      slot={slot}\n    >\n      {label === undefined ? null : (\n        <span class=\"kui-text-field__label\" aria-hidden=\"true\">\n          {label}\n          {required ? (\n            <span class=\"kui-text-field__required\" aria-hidden=\"true\">\n              *\n            </span>\n          ) : null}\n        </span>\n      )}\n      <span class=\"kui-text-field__box\">\n        {icon === undefined || multiline ? null : (\n          <span class=\"kui-text-field__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {multiline ? (\n          <textarea {...shared} class=\"kui-text-field__input\" rows={rows}>\n            {value ?? ''}\n          </textarea>\n        ) : (\n          <input\n            {...shared}\n            class=\"kui-text-field__input\"\n            type={type}\n            value={value}\n            min={type === 'number' ? min : undefined}\n            max={type === 'number' ? max : undefined}\n            step={type === 'number' ? step : undefined}\n          />\n        )}\n        {clearable && !multiline ? (\n          <button\n            type=\"button\"\n            class=\"kui-text-field__clear\"\n            aria-label={clearLabel}\n            data-text-field-clear=\"\"\n            disabled={disabled || readOnly}\n          >\n            <LucideIcon icon={CircleX} name=\"circle-x\" />\n          </button>\n        ) : null}\n      </span>\n      {count === undefined ? (\n        hintText\n      ) : (\n        <span class=\"kui-text-field__footer\">\n          {hintText}\n          <span class=\"kui-text-field__count\" data-text-field-count=\"\">\n            {count}\n          </span>\n        </span>\n      )}\n      {error === undefined ? null : (\n        <span class=\"kui-text-field__error\" aria-hidden=\"true\">\n          {error}\n        </span>\n      )}\n    </label>\n  );\n}\n"]}