@adia-ai/web-components 0.6.36 → 0.6.38

package/components/context-menu/context-menu.css

@@ -0,0 +1,56 @@
+/* Host styles (scoped — host IS a context-menu-ui descendant of itself). */
+@scope (context-menu-ui) {
+  :scope {
+    /* Element itself does not render — it's just a behavioral wrapper.
+       Targets (wrapped child / [for] match) render in flow normally. */
+    display: contents;
+  }
+
+  /* Authored items live in light DOM as the source of truth, but render
+     ONLY when the surface opens (the surface clones them into the popover).
+     Hide them in flow so they don't appear next to the target. */
+  :scope > menu-item-ui,
+  :scope > menu-divider-ui {
+    display: none;
+  }
+}
+
+/* Surface styles are NOT scoped to context-menu-ui — the surface is
+   appended to document.body (escapes the host's `display: contents` so
+   fixed-position + top-layer work), so any @scope rule pinned to
+   context-menu-ui as the scope root would miss.
+
+   Chrome MUST visually match menu-ui's surface — same vocabulary, same
+   tokens, same animation. menu-ui is the canonical menu surface; this
+   is just the right-click trigger surface for the same menu shape. */
+[data-context-menu-surface] {
+  margin: 0;
+  padding: var(--a-space-1);
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-radius-lg);
+  background: var(--a-bg-subtle);
+  box-shadow: var(--a-shadow-lg);
+  min-width: 10rem;
+  font-family: inherit;
+  font-size: var(--a-ui-size);
+  color: var(--a-fg);
+  opacity: 1;
+  translate: 0 0;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out),
+              translate var(--a-duration-fast) var(--a-easing-out);
+}
+
+[data-context-menu-surface]:popover-open {
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+[data-context-menu-surface]:not(:popover-open) {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-context-menu-surface] { transition: none; }
+}

package/components/context-menu/context-menu.d.ts

@@ -0,0 +1,70 @@
+/**
+ * `<context-menu-ui>` — Right-click activated menu — the OS-native context-menu pattern as a
+web component. Distinct from `menu-ui` (which is button-triggered):
+same item shape (`menu-item-ui` children), different trigger surface
+(`contextmenu` event), and pointer-anchored positioning instead of
+element-anchored. Pattern: WAI-APG Menu.
+
+Two binding modes:
+ **A. Wrap.** Default-slot child becomes the target:
+ `<context-menu-ui><my-table>...</my-table>...items</context-menu-ui>`.
+ **B. Selector.** Point at one or more existing elements via [for]:
+ `<context-menu-ui for="#my-table">...items</context-menu-ui>`.
+
+On `contextmenu` event on a target: `preventDefault()`, position the
+menu at the pointer coords, show via Popover API. Touch long-press
+(configurable via [long-press-ms]) does the same. Shift+F10 / Menu
+key opens at the focused target's center for keyboard users.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/context-menu
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export interface ContextMenuCloseEventDetail {
+  /** "select" | "outside" | "escape" */
+  reason: string;
+}
+
+export type ContextMenuCloseEvent = CustomEvent<ContextMenuCloseEventDetail>;
+export interface ContextMenuOpenEventDetail {
+  /** The target element the menu was opened on. */
+  target: string;
+  /** Pointer x coord (viewport-relative); null for keyboard activation. */
+  x: number;
+  /** Pointer y coord; null for keyboard activation. */
+  y: number;
+}
+
+export type ContextMenuOpenEvent = CustomEvent<ContextMenuOpenEventDetail>;
+export interface ContextMenuSelectEventDetail {
+  /** Selected item's text. */
+  text: string;
+  /** Selected item's value. */
+  value: string;
+}
+
+export type ContextMenuSelectEvent = CustomEvent<ContextMenuSelectEventDetail>;
+
+export class UIContextMenu extends UIElement {
+  /** CSS selector(s) for target element(s). Empty = use default-slot child. */
+  for: string;
+  /** Programmatic open state. Set true to open at target center. */
+  open: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIContextMenu, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'context-menu-close', listener: (ev: ContextMenuCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'context-menu-open', listener: (ev: ContextMenuOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'context-menu-select', listener: (ev: ContextMenuSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/context-menu/context-menu.js

@@ -0,0 +1,17 @@
+/**
+ * `<context-menu-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIContextMenu } from '@adia-ai/web-components/components/context-menu/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIContextMenu } from './context-menu.class.js';
+
+defineIfFree('context-menu-ui', UIContextMenu);
+
+export { UIContextMenu };

package/components/context-menu/context-menu.yaml

@@ -0,0 +1,136 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIContextMenu
+tag: context-menu-ui
+status: stable
+component: ContextMenu
+category: container
+version: 1
+description: |
+  Right-click activated menu — the OS-native context-menu pattern as a
+  web component. Distinct from `menu-ui` (which is button-triggered):
+  same item shape (`menu-item-ui` children), different trigger surface
+  (`contextmenu` event), and pointer-anchored positioning instead of
+  element-anchored. Pattern: WAI-APG Menu.
+
+  Two binding modes:
+   **A. Wrap.** Default-slot child becomes the target:
+   `<context-menu-ui><my-table>...</my-table>...items</context-menu-ui>`.
+   **B. Selector.** Point at one or more existing elements via [for]:
+   `<context-menu-ui for="#my-table">...items</context-menu-ui>`.
+
+  On `contextmenu` event on a target: `preventDefault()`, position the
+  menu at the pointer coords, show via Popover API. Touch long-press
+  (configurable via [long-press-ms]) does the same. Shift+F10 / Menu
+  key opens at the focused target's center for keyboard users.
+composes:
+  - menu-item-ui
+props:
+  for:
+    description: CSS selector(s) for target element(s). Empty = use default-slot child.
+    type: string
+    default: ""
+    reflect: true
+  open:
+    description: Programmatic open state. Set true to open at target center.
+    type: boolean
+    default: false
+    reflect: true
+  long-press-ms:
+    description: Long-press duration (ms) on touch devices to open the menu.
+    type: number
+    default: 500
+    reflect: false
+    attribute: long-press-ms
+events:
+  context-menu-open:
+    description: Fired when the menu opens (right-click / long-press / keyboard).
+    detail:
+      target:
+        type: Element
+        description: The target element the menu was opened on.
+      x:
+        type: number
+        description: Pointer x coord (viewport-relative); null for keyboard activation.
+      y:
+        type: number
+        description: Pointer y coord; null for keyboard activation.
+  context-menu-close:
+    description: Fired when the menu closes (item-select / outside-click / Escape).
+    detail:
+      reason:
+        type: string
+        description: '"select" | "outside" | "escape"'
+  context-menu-select:
+    description: Fired when an item is activated. Same shape as menu-ui's `action` event.
+    detail:
+      value:
+        type: string
+        description: Selected item's value.
+      text:
+        type: string
+        description: Selected item's text.
+slots:
+  default:
+    description: |
+      Two-purpose slot: the wrapped target element (mode A — first
+      non-menu-item-ui child) AND the menu-item-ui items. Items are
+      promoted to the popover surface on open.
+states:
+  - name: idle
+    description: Default. Menu closed; trigger listeners attached.
+  - name: open
+    description: Menu visible at pointer position; focus inside.
+    attribute: open
+traits: []
+tokens:
+  --context-menu-bg:
+    description: Menu surface background color.
+    default: var(--a-bg-subtle)
+  --context-menu-border:
+    description: Menu surface border color.
+    default: var(--a-border-subtle)
+  --context-menu-radius:
+    description: Menu surface border radius.
+    default: var(--a-radius-md)
+  --context-menu-shadow:
+    description: Menu surface shadow.
+    default: var(--a-shadow-lg)
+a2ui:
+  rules:
+    - rule: 'Use <context-menu-ui> for right-click menus on a target (table row, file item, canvas object). For button-triggered menus use <menu-ui>; for popover content that is not a menu use <popover-ui> directly.'
+      reason: 'Trigger surface boundary.'
+    - rule: 'Items are <menu-item-ui> children inside the default slot — same shape as <menu-ui> items.'
+      reason: 'Single menu vocabulary.'
+    - rule: 'Bind target via wrap (default-slot first non-menu-item-ui child) OR [for] selector. The selector form is useful for whole-table or whole-canvas menus where wrapping isn''t practical.'
+      reason: 'Two binding shapes.'
+anti_patterns:
+  - wrong: '<context-menu-ui>...just items...</context-menu-ui>'
+    why: 'No target binding — the menu never opens.'
+    fix: 'Wrap a target: `<context-menu-ui><my-target></my-target>...items</context-menu-ui>` OR point at one: `<context-menu-ui for="#my-target">...items</context-menu-ui>`.'
+examples:
+  - name: file-actions
+    description: Right-click a file row for Open / Rename / Delete.
+    a2ui: |
+      [
+        { "id": "root", "component": "ContextMenu", "children": ["target", "item-open", "item-rename", "div", "item-delete"] },
+        { "id": "target", "component": "Text", "textContent": "Right-click me" },
+        { "id": "item-open",   "component": "MenuItem", "value": "open",   "text": "Open" },
+        { "id": "item-rename", "component": "MenuItem", "value": "rename", "text": "Rename" },
+        { "id": "div",         "component": "MenuDivider" },
+        { "id": "item-delete", "component": "MenuItem", "value": "delete", "text": "Delete", "variant": "danger" }
+      ]
+keywords:
+  - context-menu
+  - right-click
+  - menu
+  - popup-menu
+synonyms:
+  right-click:
+    - context-menu
+  popup-menu:
+    - menu
+    - context-menu
+related:
+  - menu
+  - menu-item
+  - popover

package/components/date-range-picker/date-range-picker.a2ui.json

@@ -75,6 +75,21 @@
       "type": "string",
       "default": "Select range"
     },
+    "placement": {
+      "description": "Popover placement relative to the trigger. Default `bottom` centers the two-calendar panel under the trigger (ADR-0034 Rule 2 — ~800px panel >> trigger).",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "bottom"
+    },
     "readonly": {
       "description": "Block edits; allow keyboard navigation for screen-reader inspection.",
       "type": "boolean",

package/components/date-range-picker/date-range-picker.class.js

@@ -144,6 +144,8 @@ export class UIDateRangePicker extends UIFormElement {
       placeholder:  { type: String,  default: 'Select range', reflect: true },
       format:       { type: String,  default: 'short', reflect: true },
       noPresets:    { type: Boolean, default: false, attribute: 'no-presets', reflect: true },
+      // Popover placement — yaml documented reflect:true since v1.
+      placement:    { type: String,  default: 'bottom', reflect: true },
     };
   }
 

package/components/date-range-picker/date-range-picker.yaml

@@ -91,6 +91,20 @@ props:
     default: false
     attribute: no-presets
     reflect: true
+  placement:
+    description: Popover placement relative to the trigger. Default `bottom` centers the two-calendar panel under the trigger (ADR-0034 Rule 2 — ~800px panel >> trigger).
+    type: string
+    default: bottom
+    reflect: true
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
 events:
   change:
     description: Fired when the range commits (both `from` AND `to` selected, OR a preset clicked).

package/components/datetime-picker/datetime-picker.a2ui.json

@@ -76,6 +76,21 @@
       "type": "string",
       "default": "Select date and time"
     },
+    "placement": {
+      "description": "Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "bottom"
+    },
     "precision": {
       "description": "Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`.",
       "type": "string",

package/components/datetime-picker/datetime-picker.class.js

@@ -136,6 +136,8 @@ export class UIDatetimePicker extends UIFormElement {
       placeholder: { type: String,  default: 'Select date and time', reflect: false },
       format:      { type: String,  default: 'short',  reflect: true },
       locale:      { type: String,  default: '',       reflect: false },
+      // Popover placement — yaml documented reflect:true since v1.
+      placement:   { type: String,  default: 'bottom', reflect: true },
     };
   }
 
@@ -439,7 +441,7 @@ export class UIDatetimePicker extends UIFormElement {
           // helper. Without this, the popover renders at viewport (0,0).
           this.#anchorCleanup?.();
           this.#anchorCleanup = anchorPopover(this.#triggerRef, this.#popoverRef, {
-            placement: this.getAttribute('placement') || 'bottom-start',
+            placement: this.getAttribute('placement') || 'bottom', // ADR-0034 Rule 2: panel >> trigger
             gap: 4,
           });
           document.addEventListener('pointerdown', this.#onOutside);

package/components/datetime-picker/datetime-picker.d.ts

@@ -64,6 +64,8 @@ document locale. `h12` forces a 12-hour cycle with an AM/PM
   open: boolean;
   /** Text shown in the trigger when the value is empty. */
   placeholder: string;
+  /** Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger). */
+  placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
   /** Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`. */
   precision: 'minute' | 'second';
   /** Block edits; allow keyboard navigation for screen-reader inspection. */

package/components/datetime-picker/datetime-picker.yaml

@@ -104,6 +104,20 @@ props:
     description: BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.
     type: string
     default: ''
+  placement:
+    description: Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).
+    type: string
+    default: bottom
+    reflect: true
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
 events:
   change:
     description: Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).

package/components/empty-state/empty-state.a2ui.json

@@ -85,8 +85,17 @@
       "select"
     ],
     "slots": {
+      "description": {
+        "description": "Override slot for the description text. Use for multi-paragraph or richly-marked-up explanatory copy."
+      },
       "action": {
         "description": "User-provided action element (e.g. button) displayed below the description"
+      },
+      "heading": {
+        "description": "Override slot for the heading text. Use when richer markup than the plain [heading] attribute is needed (line breaks, inline links, bold emphasis)."
+      },
+      "icon": {
+        "description": "Override slot for the [icon] glyph. Use when the attribute-driven Phosphor icon isn't enough (e.g., custom SVG, illustration, or a styled icon-ui with non-default weight). Mutually exclusive with [icon]."
       }
     },
     "states": [

package/components/empty-state/empty-state.class.js

@@ -29,6 +29,8 @@ export class UIEmptyState extends UIElement {
     icon:        { type: String,  default: '',    reflect: true },
     heading:     { type: String,  default: '',    reflect: true },
     description: { type: String,  default: '',    reflect: true },
+    // Semantic variant — yaml documented reflect:true since v1.
+    variant:     { type: String,  default: '',    reflect: true },
     // §223 (v0.5.9): minimal layout — single-line muted (no centered column,
     // no padding bump, no icon-size lg). Use for inline empty-table-row /
     // inline placeholder cells where the canvas placeholder is too loud.

package/components/empty-state/empty-state.yaml

@@ -53,6 +53,21 @@ props:
     reflect: true
 events: {}
 slots:
+  icon:
+    description: >-
+      Override slot for the [icon] glyph. Use when the attribute-driven
+      Phosphor icon isn't enough (e.g., custom SVG, illustration, or
+      a styled icon-ui with non-default weight). Mutually exclusive
+      with [icon].
+  heading:
+    description: >-
+      Override slot for the heading text. Use when richer markup than
+      the plain [heading] attribute is needed (line breaks, inline
+      links, bold emphasis).
+  description:
+    description: >-
+      Override slot for the description text. Use for multi-paragraph
+      or richly-marked-up explanatory copy.
   action:
     description: User-provided action element (e.g. button) displayed below the description
 states:

package/components/feed/feed-item.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "action": {
+      "description": "Label of an inline action button (the \"deep-link\" / \"undo\" pattern).\nPair with `onAction` callback in `UIFeed.post()` — click invokes the\ncallback then auto-dismisses. Empty string renders no action button.\n",
+      "type": "string",
+      "default": ""
+    },
     "component": {
       "const": "FeedItem"
     },

package/components/feed/feed-item.yaml

@@ -42,6 +42,14 @@ props:
     description: Render an x close button (default true for sticky, false for auto-fade)
     type: boolean
     default: false
+  action:
+    description: |
+      Label of an inline action button (the "deep-link" / "undo" pattern).
+      Pair with `onAction` callback in `UIFeed.post()` — click invokes the
+      callback then auto-dismisses. Empty string renders no action button.
+    type: string
+    default: ""
+    reflect: true
 events:
   close:
     description: Fired after the item finishes its exit animation
@@ -74,3 +82,5 @@ a2ui:
       reason: 'Imperative ownership.'
     - rule: 'Different from <alert-ui> (inline persistent) and <toast-ui> (standalone ephemeral); feed-item is feed-scoped.'
       reason: 'Surface boundary.'
+    - rule: 'For "notification deep-link" pattern: post with action + onAction. Click navigates and auto-dismisses (router.push() / location.href / api.markRead()).'
+      reason: 'Deep-link pattern lives in the onAction callback, not in markup.'

package/components/feed/feed.class.js

@@ -296,9 +296,14 @@ export class UIFeed {
    * @param {string} [opts.position='bottom-right']
    * @param {boolean} [opts.dismissible]  override default (true for sticky, false for auto)
    * @param {string} [opts.id]
-   * @param {string} [opts.action]  Phase 2 — action button label. When set,
-   *                                duration is forced to null (sticky); the
-   *                                item gets role=alertdialog + focus trap.
+   * @param {string} [opts.action]  Phase 2 — action button label. When set
+   *                                without an explicit duration, the item is
+   *                                sticky (role=alertdialog + focus trap).
+   *                                Pass an explicit numeric `duration` to
+   *                                build the "undo" pattern: the action
+   *                                button shows, but the item auto-dismisses
+   *                                after the timeout. Negative-action UX
+   *                                (delete/archive) typically uses 6000-8000.
    * @param {function} [opts.onAction]  Phase 2 — callback invoked when the
    *                                action button is pressed. Item dismisses
    *                                after the callback returns.
@@ -330,8 +335,11 @@ export class UIFeed {
     item.heading = heading;
     item.icon = icon;
     item.variant = v;
-    // Action-required forces sticky.
-    item.duration = action ? 0 : duration;
+    // Action-required default is sticky; explicit duration honored so callers
+    // can build the "undo" pattern (action + timed auto-dismiss). Default
+    // (duration unspecified) preserves the original alertdialog sticky behavior.
+    const explicitDuration = 'duration' in opts;
+    item.duration = action && !explicitDuration ? 0 : duration;
     if (dismissible != null) item.dismissible = !!dismissible;
     if (action) item.action = action;
     if (visibleCount >= max) item.setAttribute('data-queued', '');

package/components/feed/feed.css

@@ -40,6 +40,10 @@ feed-item-ui[data-closing] {
     pointer-events: none; /* Items re-enable pointer-events. */
     width: max-content;
     max-width: var(--feed-max-width, var(--feed-max-width-default));
+    /* Items size to their own content (see feed-item-ui width: max-content);
+       align them to the lane's anchored edge so short items hug the side
+       rather than left-aligning inside a wider container. */
+    align-items: flex-end;
   }
   /* Reset native popover defaults. UA stylesheet sets `margin: auto;
      inset: 0; border: solid; padding: 0.25em` which would center the
@@ -61,11 +65,13 @@ feed-item-ui[data-closing] {
   }
   :scope[position="bottom-left"] {
     bottom: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto;
+    align-items: flex-start;
   }
   :scope[position="bottom-center"] {
     bottom: var(--feed-offset, var(--feed-offset-default));
     left: 50%; right: auto;
     transform: translateX(-50%);
+    align-items: center;
   }
   :scope[position="top-right"] {
     top: var(--feed-offset, var(--feed-offset-default)); right: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
@@ -74,12 +80,14 @@ feed-item-ui[data-closing] {
   :scope[position="top-left"] {
     top: var(--feed-offset, var(--feed-offset-default)); left: var(--feed-offset, var(--feed-offset-default)); right: auto; bottom: auto;
     flex-direction: column-reverse;
+    align-items: flex-start;
   }
   :scope[position="top-center"] {
     top: var(--feed-offset, var(--feed-offset-default)); bottom: auto;
     left: 50%; right: auto;
     transform: translateX(-50%);
     flex-direction: column-reverse;
+    align-items: center;
   }
   :scope[position="inline"] {
     position: relative;
@@ -119,6 +127,12 @@ feed-item-ui[data-closing] {
     display: flex;
     align-items: center;
     gap: var(--feed-item-gap);
+    /* Size to own content (a one-line "OK" stays narrow), capped at
+       max-width (long messages wrap at the bound). The lane container's
+       align-items (per [position]) re-aligns short items to the anchored
+       edge so they hug the corner instead of left-aligning under a
+       wider sibling. */
+    width: max-content;
     max-width: var(--feed-item-max-width);
     padding: var(--feed-item-py) var(--feed-item-px);
     background: var(--feed-item-bg);

package/components/field/field.a2ui.json

@@ -103,6 +103,12 @@
       "action": {
         "description": "Button adjacent to the control for inline actions (clear, reset, help popover)."
       },
+      "error": {
+        "description": "Override slot for error markup richer than the plain [error] attribute string. Rendered below the control with danger-text styling. Mutually exclusive with [error]."
+      },
+      "hint": {
+        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans, abbreviations). Rendered below the control at body-subtle typography. Mutually exclusive with [hint]."
+      },
       "trailing": {
         "description": "Secondary text or badge aligned with the label in the stacked layout (right-aligned) or between label and control in the inline layout."
       }

package/components/field/field.yaml

@@ -89,6 +89,16 @@ slots:
     description: >-
       Button adjacent to the control for inline actions (clear,
       reset, help popover).
+  hint:
+    description: >-
+      Override slot for hint markup richer than the plain [hint] attribute
+      string (inline links, code spans, abbreviations). Rendered below
+      the control at body-subtle typography. Mutually exclusive with [hint].
+  error:
+    description: >-
+      Override slot for error markup richer than the plain [error] attribute
+      string. Rendered below the control with danger-text styling. Mutually
+      exclusive with [error].
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/index.js

@@ -79,11 +79,22 @@ export { UIChartLegend } from './chart-legend/chart-legend.js';
 export { UIPopover } from './popover/popover.js';
 export { UIAccordion, UIAccordionItem } from './accordion/accordion.js';
 export { UIDivider } from './divider/divider.js';
+export { UIBlockquote } from './blockquote/blockquote.js';
+export { UIRelativeTime } from './relative-time/relative-time.js';
+export { UINumberFormat } from './number-format/number-format.js';
+export { UIPasswordStrength } from './password-strength/password-strength.js';
+export { UITableOfContents } from './toc/toc.js';
+export { UIQRCode } from './qr-code/qr-code.js';
 export { UIPagination } from './pagination/pagination.js';
 export { UICode } from './code/code.js';
 export { UIList, UIListItem } from './list/list.js';
 export { UIListWindow } from './list-window/list-window.js';
 export { UIMenu, UIMenuItem, UIMenuDivider } from './menu/menu.js';
+export { UIContextMenu } from './context-menu/context-menu.js';
+export { UIVisuallyHidden } from './visually-hidden/visually-hidden.js';
+export { UISkipNav } from './skip-nav/skip-nav.js';
+export { UIMark } from './mark/mark.js';
+export { UIInlineEdit } from './inline-edit/inline-edit.js';
 export { UIToolbar, UIToolbarGroup } from './toolbar/toolbar.js';
 export { UINav } from './nav/nav.js';
 export { UINavGroup } from './nav-group/nav-group.js';