@gunkin/uiify 0.0.19-alpha → 0.0.22-alpha

package/skills/uiify/references/elements/description-list.md

@@ -0,0 +1,38 @@
+# description-list
+
+Binding: description-list
+
+Present descriptive terms and their associated values.
+
+## Use when
+
+Show descriptive metadata as terms with associated values, such as status and owner.
+
+## Avoid when
+
+Use a table for tabular data and a list for tasks or actions. Do not use `dl` as a generic visual grid without term/value relationships.
+
+## Structure
+
+`DescriptionList` renders `dl`; compose `DescriptionTerm` (`dt`) and `DescriptionDetails` (`dd`) in consumer-authored source order. Keep each term adjacent to its description. Multiple terms or descriptions may be grouped when the content calls for it; no table roles or action-column API is added.
+
+## Responsive
+
+Let terms and long values wrap. A visual grid may stack at narrow widths, but DOM order remains term then details and uses logical CSS.
+
+## States
+
+This is static descriptive content with no selection or interaction state.
+
+## Verify
+
+Check source order, term/value pairing, long and CJK values, RTL, and zoom reflow. Assistive-technology announcements vary; no browser or screen-reader verification is recorded.
+
+## Common mistake
+
+Do not replace the native `dl`/`dt`/`dd` structure with table roles or make values depend on visual column alignment.
+
+## Sources
+
+- [design-system.service.gov.uk](https://design-system.service.gov.uk/components/summary-list/) (verified 2026-10-19)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl) (verified 2026-10-19)

package/skills/uiify/references/elements/empty-state.md

@@ -1,50 +1,39 @@
 # empty-state
 
-Binding: gap
+Binding: empty
 
-Explain why a collection has no items and offer a relevant next step.
+Explain an empty collection and offer a relevant next step.
 
 ## Use when
 
-A collection has no items and the person needs to understand what is empty and what useful step is available next.
+A collection has no items and the person needs a clear explanation and useful next step.
 
 ## Avoid when
 
-Do not show an empty state for loading, filtered no-results, access denial, and a genuinely new collection as though they were the same cause. Name the actual state.
+Do not use the same message for loading, errors, access denial, or filtered no-results. Name the actual state.
 
 ## Structure
 
-This is an app-level composition, not a UIify component. Give the section a heading that names the collection and one relevant next step; use a link for navigation or a button for an in-place action.
+`Empty` renders a `section`; compose `EmptyTitle` (`h2`), `EmptyDescription` (`p`), and optional `EmptyContent` (`div`). Use a heading level that fits the page. For a button-styled destination, use the published `Button` with `as="a"` and `href`; use a plain link when link styling is intended. Keep all copy caller-owned. This is static content: it does not announce with `status` or `alert`.
 
 ## Responsive
 
-Keep the message and action close in reading order, use a concise line length, and do not center long explanatory copy in an unnecessarily narrow area.
+Keep the explanation and action close in source order. Let long and translated copy wrap; do not constrain it to a narrow text column.
 
 ## States
 
-Distinguish first-use empty, filtered no-results, unavailable/error, and loading states. Explain a recovery action for filters and avoid suggesting creation when the person lacks permission.
+Distinguish first-use empty from no matches, loading, and unavailable/error. A caller that updates results dynamically owns any announcement behavior.
 
 ## Verify
 
-Check the heading and action name, real destination/behavior, keyboard access, state-specific copy, and narrow/zoom layout.
+Check heading order, relevant action and destination, keyboard access, translated long-copy reflow, and static reading without JavaScript. Browser and assistive-technology proof is pending.
 
 ## Common mistake
 
-“No results” should offer a way to clear or change filters, not a create action unrelated to the search.
-
-## Custom implementation
-
-```html
-<section aria-labelledby="empty-title">
-  <h2 id="empty-title">No invoices yet</h2>
-  <p>Create an invoice to see it listed here.</p>
-  <a href="/invoices/new">Create invoice</a>
-</section>
-```
-
-This is an app-level composition; UIify does not currently ship this component.
+Do not label static content as a live region or offer an unrelated create action for a filtered search.
 
 ## Sources
 
-- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) (verified 2026-10-16)
-- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [ui.shadcn.com](https://ui.shadcn.com/docs/components/base/empty) (verified 2026-10-19)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) (verified 2026-10-19)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role) (verified 2026-10-19)

package/skills/uiify/references/elements/field.md

@@ -22,7 +22,7 @@ Keep labels and help text close to the control at narrow widths. Let long instru
 
 ## States
 
-Native required validation works without JavaScript. For application validation, set `invalid` on Root and Control and render `Field.Error` with the same state after validation. The control's accessible description includes the error while invalid.
+Native required validation works without JavaScript. For application validation, set `invalid` on Root and Control and render `Field.Error` with the same state after validation. Keep `Field.Description` mounted alongside the conditional Error: Control always references its derived description ID. Parts own their IDs and Control's ARIA relationships; omit manual `id`/`aria-describedby` overrides. The error is included while invalid.
 
 ## Verify
 
@@ -30,7 +30,7 @@ Click the label and confirm its control receives focus. Inspect the accessibilit
 
 ## Common mistake
 
-A label and control with different `fieldId` values disconnect the visible label from the input and its instructions.
+Use `Field.Control as="input"`, which supplies the UIify Input marker and derived control ID. A standalone `Input id={rootId}` duplicates Root's ID and disconnects Field.Label. Do not guess ID suffixes; adapt the complete example. Click the label to verify the relationship.
 
 Example: `references/examples/field-validation.md`.
 

package/skills/uiify/references/elements/fieldset.md

@@ -0,0 +1,39 @@
+# fieldset
+
+Binding: fieldset
+
+Give related form controls a native group name with a legend.
+
+## Use when
+
+Related controls need a native group name, such as contact preferences or one radio question.
+
+## Avoid when
+
+Do not wrap every individual field in a fieldset or use one for unrelated controls.
+
+## Structure
+
+`Fieldset` renders `fieldset`; put `FieldsetLegend` (`legend`) first. The legend names the group, not each control. Give every input its own label. Compose published `Checkbox` controls for checkbox choices; `name` and `value` preserve native form submission. Keep caller-authored help/error relationships and native fieldset props.
+
+## Responsive
+
+Let legend and labels wrap in source order. Style the native outer group without obscuring descendant focus.
+
+## States
+
+Preserve native `disabled`: it disables descendant controls except controls inside the first legend. The component adds no synthetic group role or hidden legend.
+
+## Verify
+
+Check first-child legend, individual labels, group announcement, keyboard access, disabled descendants, RTL, and narrow/zoom reflow. Browser and assistive-technology proof is pending.
+
+## Common mistake
+
+Do not use `role="group"` on a `div` instead of native fieldset/legend semantics, or treat the legend as a control's label.
+
+## Sources
+
+- [design-system.service.gov.uk](https://design-system.service.gov.uk/components/fieldset/) (verified 2026-10-19)
+- [html.spec.whatwg.org](https://html.spec.whatwg.org/multipage/forms.html) (verified 2026-10-19)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset) (verified 2026-10-19)

package/skills/uiify/references/elements/form-error-summary.md

@@ -0,0 +1,39 @@
+# form-error-summary
+
+Binding: form-error-summary
+
+List form errors with links to the affected fields.
+
+## Use when
+
+A server-rendered form response needs a summary of errors and navigation to affected fields.
+
+## Avoid when
+
+Do not expect this static component to validate fields, announce dynamic updates, move focus, or repair missing IDs.
+
+## Structure
+
+`FormErrorSummary` takes required `title: ReactNode` and `errors: readonly { href: string; message: ReactNode }[]`. It renders a `section`, heading, and list of links. Name the section with native `aria-label` when useful. Each `href` must target a unique field ID in the same form instance. Use the published `Input` or `Field.Control` for matching fields, and associate matching inline error text with the control using caller-owned `aria-describedby`. An empty error array renders `null`.
+
+## Responsive
+
+Keep error links readable and allow long messages to wrap. Preserve the document order between the summary and form.
+
+## States
+
+The component is static and has no `role="alert"`, live region, focus movement, or validation engine. Use dynamic announcements only in caller-owned behavior when the application updates errors.
+
+## Verify
+
+Check every link target, matching field and inline description, empty rendering, keyboard fragment navigation, and long-copy reflow. Browser and assistive-technology behavior is pending verification.
+
+## Common mistake
+
+Do not repeat field IDs when mounting multiple examples: prefix every input, label, description and error link consistently. Do not render dead fragment links, replace inline errors with the summary, promise automatic focus, or mark initial static content as an urgent alert.
+
+## Sources
+
+- [design-system.service.gov.uk](https://design-system.service.gov.uk/components/error-summary/) (verified 2026-10-19)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/notifications/) (verified 2026-10-19)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role) (verified 2026-10-19)

package/skills/uiify/references/elements/inline-alert.md

@@ -1,46 +1,38 @@
 # inline-alert
 
-Binding: gap
+Binding: alert
 
-Give a short message context beside the content it affects.
+Give a short persistent message context beside the content it affects.
 
 ## Use when
 
-A message belongs beside the content or control it explains. Use status for a non-urgent update and alert only when the information requires immediate attention.
+A message belongs beside the content or control it explains and should remain visible.
 
 ## Avoid when
 
-Do not use assertive announcements for routine success, or a toast for an error that must remain visible while the person fixes it.
+Do not use a persistent alert for transient success or add an assertive live role to routine initial content.
 
 ## Structure
 
-This is an app-level composition, not a UIify component. Place concise text in a semantic status/alert element next to the affected content; include a heading when it helps identify the issue.
+Compose `Alert`, `AlertTitle`, and `AlertDescription` from `@gunkin/uiify/components/alert`. The static root owns `data-uiify-alert` and a `data-variant` (default `secondary`). It supplies a decorative text symbol: ⓘ, ✓, ⚠︎, or × for `secondary`, `success`, `warning`, or `destructive`. Pass `symbol="!"` to override it or `symbol={false}` to hide it. No SVG or demo layout is needed. Title/description expose `data-part="title|description"`; the built-in glyph is `data-part="symbol"`. The component adds no `role` by default.
 
 ## Responsive
 
-Keep the message in reading order beside the affected field or section. Let text wrap and do not communicate severity by color alone.
+Keep the message beside affected content. The optional package stylesheet handles wrapping, logical symbol placement and part typography. With Tailwind, style those same attributes/parts. Keep severity in the title or description; the glyph is hidden from assistive technology.
 
 ## States
 
-Use role=status for dynamic, non-urgent updates; use role=alert for urgent messages that should be announced immediately. Keep the message visible until the related issue can be addressed.
+Pass `role="status"` for a dynamic non-urgent update or `role="alert"` for urgent content only when timing and urgency warrant announcement. Alert does not dismiss or move focus.
 
 ## Verify
 
-Check announcement timing and role, reading order, message visibility, color contrast, and the relationship to its field/section. Avoid repeating the same announcement through multiple live regions.
+Check every variant, a hidden/custom symbol, default role, native props/ref forwarding and copied CSS/Tailwind code. For dynamic messages, test actual announcement timing and avoid duplicate live regions.
 
 ## Common mistake
 
-Do not move focus to routine status text; the live region should announce the update while focus stays on the user's task.
-
-## Custom implementation
-
-```html
-<p role="status">Changes saved.</p>
-```
-
-This is an app-level composition; UIify does not currently ship this component.
+Use the real `variant` instead of making every outcome `secondary` and rebuilding its icon/layout in a demo wrapper. `role="alert"` is only for an urgent announcement.
 
 ## Sources
 
-- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-16)
-- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-19)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-19)

package/skills/uiify/references/elements/input-group.md

@@ -0,0 +1,39 @@
+# input-group
+
+Binding: input-group
+
+Place text affixes or a related action beside a native input.
+
+## Use when
+
+Place a short prefix/suffix or a related native action beside an input.
+
+## Avoid when
+
+Do not use affix text as the only label or make passive text look clickable. Keep the input separate when the grouping harms reflow.
+
+## Structure
+
+`InputGroup` is a `div` layout wrapper. Compose the published `Input` for a matching field and `Button` for a related action; keep native children only when their needed behavior is not covered. Use `InputGroupAddon` for an add-on; its required `align` is `start` or `end` and appears as `data-align`. Keep a visible label associated with the input. If affix text gives instructions or a unit, include it in the input's `aria-describedby`.
+
+## Responsive
+
+Let the input shrink and long affix/action text wrap without clipping or hiding controls. Keep start/input/end in source order and use logical inline layout for RTL.
+
+## States
+
+Native input and action own their focus, disabled, and validation states. Keep server-invalid styling visible while the input is focused. Disabling an input does not disable a separate action. The group adds no click-to-focus behavior.
+
+## Verify
+
+With scripts disabled, check the label, affix, independently operable action, focus order, RTL, and long-copy reflow at narrow width and zoom. Browser proof is pending.
+
+## Common mistake
+
+Do not treat a protocol prefix or icon as a label. A displayed prefix is not part of the submitted value: a domain-only field with `https://` beside it uses `type="text"` and caller-owned URL assembly; `type="url"` expects the complete URL. Use unique field/description IDs for each example instance. Do not show an inert verification/copy button; use a real native form action or link.
+
+## Sources
+
+- [designsystem.digital.gov](https://designsystem.digital.gov/components/input-prefix-suffix/) (verified 2026-10-19)
+- [ui.shadcn.com](https://ui.shadcn.com/docs/components/aria/input-group) (verified 2026-10-19)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-19)

package/skills/uiify/references/elements/item.md

@@ -0,0 +1,39 @@
+# item
+
+Binding: item
+
+Compose a list row with primary content, metadata, media, and a separate action.
+
+## Use when
+
+A real list needs a row with leading media, primary content, metadata, and a separate action.
+
+## Avoid when
+
+Do not use standalone `li` outside `ul`/`ol`. This is not a selectable list, menu, or whole-row click target.
+
+## Structure
+
+Put `Item` (`li` by default) inside `ul` or `ol`. Compose sibling `ItemMedia` (`span`), `ItemContent` (`div`), optional `ItemMetadata` (`div`), and `ItemActions` (`div`). Put primary navigation in an actual link and use the published `Button` for button actions. Choose meaningful image alt text or `alt=""` for decorative media.
+
+## Responsive
+
+Keep DOM order aligned with reading order. Allow title and metadata to wrap and keep actions visible at narrow widths and zoom; do not rely on truncation for essential text.
+
+## States
+
+There is no selection, hover-reveal, or list keyboard state. Child links/buttons own their native states and focus.
+
+## Verify
+
+Check list/list-item semantics, source and tab order, image alternatives, long/CJK text, RTL, and zoom reflow. Browser and assistive-technology proof is pending.
+
+## Common mistake
+
+Do not turn the whole row into a click handler or nest an action button inside a row link.
+
+## Sources
+
+- [ui.shadcn.com](https://ui.shadcn.com/docs/components/aria/item) (verified 2026-10-19)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li) (verified 2026-10-19)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul) (verified 2026-10-19)

package/skills/uiify/references/elements/modal.md

@@ -22,7 +22,7 @@ On narrow screens the default modal becomes a full-width bottom sheet. Its body
 
 ## States
 
-The native `show-modal` dialog blocks interaction with the page. Its default dismissal allows Escape; `dismiss="none"` requires an explicit close action. Controlled or initially open state requires `ModalClientContent` from `@gunkin/uiify/components/modal/client`.
+The native `show-modal` dialog blocks interaction with the page. Default dismissal allows Escape. `dismiss="none"` uses native `closedby`; Safari ignores it and still permits Escape. Verify supported engines. Controlled or initially open state requires `ModalClientContent` from `@gunkin/uiify/components/modal/client`.
 
 ## Verify
 

package/skills/uiify/references/elements/number-field.md

@@ -8,6 +8,8 @@ Enter a numeric quantity with optional bounds and step controls.
 
 Enter a quantity for which numeric stepping and bounds are meaningful.
 
+Set `locale` to control both number formatting and parsing, including locale-specific digits and separators.
+
 ## Avoid when
 
 Do not use a number field for identifiers, postal codes, card numbers, or values where spinbutton behavior is not useful; use a text input instead.

package/skills/uiify/references/elements/pagination.md

@@ -8,6 +8,8 @@ Navigate between pages of a result set.
 
 Let people move through a result set split into discrete pages.
 
+Set `locale` to format page numbers, and translate the `labels.page` template using its `{page}` placeholder.
+
 ## Avoid when
 
 Do not paginate a small result set that is easier to scan as one list, or imply that ellipses are links.

package/skills/uiify/references/elements/progress-bar.md

@@ -1,47 +1,38 @@
 # progress-bar
 
-Binding: gap
+Binding: progress
 
-Show determinate completion of a task.
+Show determinate or indeterminate progress for a task.
 
 ## Use when
 
-A task has measurable completion with a known range. Use native <progress> and provide a programmatic label.
+Show the completion of a task with a known range, or use indeterminate progress when the amount completed is unknown.
 
 ## Avoid when
 
-Do not use it for a quantity like disk space or a score; use <meter>. For unknown duration, omit value for indeterminate progress or use a labeled spinner.
+Do not use Progress for a static measurement or score; use `meter` for a measured quantity.
 
 ## Structure
 
-This is an app-level composition, not a UIify component. Associate a visible <label> with <progress>, set max and the current value, and add a text status if the exact progress matters to the task.
+`Progress` renders native `<progress>`. Set `value` and a positive `max` for a known amount; omit `value` for indeterminate progress. Give it an accessible name with an associated `<label>`, `aria-label`, or `aria-labelledby`.
 
 ## Responsive
 
-Keep the label and progress indicator together in reading order; allow the label and textual status to wrap on narrow screens.
+Keep the label and indicator together in reading order. The optional skin fills the available inline size; native browser rendering can differ.
 
 ## States
 
-A present value is determinate; omit value when the amount completed is not known. Use a positive max and keep value within 0..max. Mark the described region busy while it is updating when appropriate.
+The browser exposes determinate or indeterminate semantics from the native attributes. UIify does not simulate value changes or announce them.
 
 ## Verify
 
-Check accessible name, min/max/current values, determinate and indeterminate states, changing value, completion message, and responsive layout.
+Unit and public-page tests check native determinate and indeterminate markup and an associated label. In the consuming page, keep `value` between zero and `max` and check the accessible name.
 
 ## Common mistake
 
-Fallback text inside <progress> is not its accessible label; associate an actual label or aria-label.
-
-## Custom implementation
-
-```html
-<label for="upload-progress">Upload</label>
-<progress id="upload-progress" value="3" max="5"></progress>
-```
-
-This is an app-level composition; UIify does not currently ship this component.
+Text inside `<progress>` is not its accessible name; associate a label or provide an ARIA name.
 
 ## Sources
 
-- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) (verified 2026-10-16)
-- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) (verified 2026-10-19)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-19)

package/skills/uiify/references/elements/select.md

@@ -14,7 +14,7 @@ Avoid a select when users must compare several options at once or when the task
 
 ## Structure
 
-Associate a visible label with the select. Group related options with `optgroup` and provide an empty prompt only when the value is genuinely optional.
+Wrap `Select.Root` in a native `<label>` as in the example. Alternatively, match a native label's `htmlFor` to an explicit unique `id` on Select.Root. `Field.Label` derives the ID for Field.Control; it does not label a standalone Select.Root. Do not reuse Field.Root's ID on the select. Group related options with `optgroup`; an empty prompt is for an optional value.
 
 ## Responsive
 

package/skills/uiify/references/examples/alert-confirmation.md

@@ -7,18 +7,30 @@ Export: `AlertConfirmation`
 ## Source
 
 ```tsx
-import { AlertModal } from "@gunkin/uiify";
+"use client";
+
+import { useRef, useState } from "react";
+import { AlertModalAction, AlertModalCancel, AlertModalContent, AlertModalTrigger } from "@gunkin/uiify/components/alert-modal";
 
 export function AlertConfirmation() {
+  const [deleted, setDeleted] = useState(false);
+  const heading = useRef<HTMLHeadingElement>(null);
   return (
-    <AlertModal
-      id="delete-draft"
-      title="Delete draft?"
-      description="This permanently removes the draft."
-      trigger="Delete draft"
-      cancelLabel="Keep draft"
-      actionLabel="Delete"
-    />
+    <section>
+      <h2 ref={heading} tabIndex={-1}>Draft</h2>
+      {deleted ? <p role="status">Draft removed from this demo.</p> : <>
+        <AlertModalTrigger target="delete-draft">Delete draft</AlertModalTrigger>
+        <AlertModalContent id="delete-draft" aria-labelledby="delete-draft-title" aria-describedby="delete-draft-description">
+          <h3 id="delete-draft-title">Delete draft?</h3>
+          <p id="delete-draft-description">This removes the draft from this demo.</p>
+          <AlertModalCancel target="delete-draft">Keep draft</AlertModalCancel>
+          <AlertModalAction target="delete-draft" onClick={() => {
+            setDeleted(true);
+            requestAnimationFrame(() => heading.current?.focus());
+          }}>Delete</AlertModalAction>
+        </AlertModalContent>
+      </>}
+    </section>
   );
 }
 ```

package/skills/uiify/references/examples/field-validation.md

@@ -10,7 +10,7 @@ Export: `FieldValidation`
 "use client";
 
 import { useState } from "react";
-import { Field } from "@gunkin/uiify";
+import { Field } from "@gunkin/uiify/components/field";
 
 export function FieldValidation() {
   const [email, setEmail] = useState("");
@@ -18,7 +18,7 @@ export function FieldValidation() {
   return (
     <Field.Root id="email" invalid={invalid}>
       <Field.Label fieldId="email">Email</Field.Label>
-      <Field.Control fieldId="email" as="input" type="email" invalid={invalid} value={email} onChange={(event) => setEmail(event.currentTarget.value)} />
+      <Field.Control fieldId="email" as="input" name="email" type="email" invalid={invalid} value={email} onChange={(event) => setEmail(event.currentTarget.value)} />
       <Field.Description fieldId="email">We will send your receipt here.</Field.Description>
       {invalid ? <Field.Error fieldId="email" invalid>Enter a valid email address.</Field.Error> : null}
     </Field.Root>

package/skills/uiify/references/examples/select-basic.md

@@ -7,7 +7,7 @@ Export: `SelectBasic`
 ## Source
 
 ```tsx
-import { Select } from "@gunkin/uiify";
+import { Select } from "@gunkin/uiify/components/select";
 
 export function SelectBasic() {
   return (

package/skills/uiify/references/examples/table-controls.md

@@ -10,7 +10,8 @@ Export: `TableControls`
 "use client";
 
 import { useState } from "react";
-import { Table } from "@gunkin/uiify";
+import { Input } from "@gunkin/uiify/components/input";
+import { Table } from "@gunkin/uiify/components/table";
 
 const people = ["Ada Lovelace", "Grace Hopper", "Katherine Johnson"];
 
@@ -19,7 +20,7 @@ export function TableControls() {
   const visible = people.filter((person) => person.toLowerCase().includes(query.toLowerCase()));
   return (
     <section>
-      <label>Filter people <input value={query} onChange={(event) => setQuery(event.currentTarget.value)} /></label>
+      <label>Filter people <Input value={query} onValueChange={setQuery} /></label>
       <Table.Root>
         <Table.Header><Table.Row id="header"><Table.ColumnHeader id="name-heading">Name</Table.ColumnHeader></Table.Row></Table.Header>
         <Table.Body>{visible.map((person) => <Table.Row id={person} key={person}><Table.Cell>{person}</Table.Cell></Table.Row>)}</Table.Body>

package/skills/uiify/references/guides/i18n.md

@@ -0,0 +1,21 @@
+# Localization
+
+Use this guide when the project has an i18n setup (`next-intl`, `i18next`, `react-intl`, `@lingui/*`, `@inlang/paraglide-*`, or `locales/`, `messages/`, or `i18n/` folders), the request mentions languages, translation, RTL, Arabic, Hebrew or CJK, or the page declares `<html dir="rtl">`.
+
+## Copy
+
+Put every user-visible string in the project's message catalog. Pass translated UIify strings through `labels`, using `{name}` templates instead of concatenation, and pass the page language through `locale`. Do not leave UIify's English defaults on a non-English page.
+
+## Direction and formatting
+
+Set `lang` and `dir` on `<html>` on the server. UIify reads direction from the DOM; use `dir` props only for an island that differs. Use logical CSS such as `margin-inline-start`, `inset-inline-end` and `text-align: start` in custom styles. Mirror directional icons with `:dir(rtl)`.
+
+Format numbers and dates with `Intl.*` and the page locale; do not hand-format them. Custom key handlers on text inputs should start with `isComposingKeyEvent(event)`.
+
+## Typography and language picker
+
+Avoid `letter-spacing` and uppercase styling on Arabic or CJK text. Let `:lang()` choose fonts. Use plain links and endonyms in a language picker, no flags, and mark the current language with `aria-current`.
+
+## Verify
+
+Render once with `dir="rtl"` and once with a long-text locale such as German or a pseudo-locale. Check overflow, popup anchoring and arrow keys.

package/skills/uiify/references/guides/verification.md

@@ -0,0 +1,9 @@
+# Optional static lint
+
+Run `node <resolved-skill-directory>/scripts/lint.mjs <project-root>` when the project's existing checks do not cover the relevant JSX attributes. Resolve the script from this skill directory, not the project root.
+
+It runs the static checks compiled from the published laws when this skill was built and prints their names. It does not read `DESIGN.md` or other design files.
+
+It inspects literal attributes of lowercase intrinsic JSX tags and of parts imported from `@gunkin/uiify/components` or `@gunkin/uiify/elements` (for example `Button` or `Field.Control`). Other custom components and computed attribute values are not analyzed.
+
+No findings is not proof of accessibility. Missing parsers or execution failures mean unavailable, never a pass. Reuse project build, typecheck and tests, browser interaction checks, and axe coverage for the requested page; this lint does not replace them.