@agent-ui-kit/web-components 0.0.3 → 0.0.4

package/dist/docs/components/table-cell.yaml

@@ -0,0 +1,11 @@
+name: aui-table-cell
+tag: aui-table-cell
+type: component
+summary: Data cell within a table row
+base: AgentElement
+composition:
+  parents: [aui-table, aui-table-head, aui-table-body, aui-table-row]
+  children: null
+examples:
+  - html: See aui-table for full usage.
+    description: Used within aui-table structure.

package/dist/docs/components/table-column.yaml

@@ -0,0 +1,76 @@
+name: aui-table-column
+tag: aui-table-column
+type: component
+summary: >
+  Config-only element that declares column metadata for data-driven tables.
+  Renders as display:none — purely declarative. Each instance maps to one
+  column in the generated grid.
+base: AgentElement
+
+attributes:
+  key:
+    syntax: key-value
+    type: string
+    default: ""
+    description: >
+      Property name to read from each row object. Required.
+  label:
+    syntax: key-value
+    type: string
+    default: ""
+    description: >
+      Display text shown in the column header. Falls back to key if omitted.
+  sortable:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: >
+      Allows this column to be sorted by clicking its header, independent
+      of the table-level sortable flag.
+  filterable:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: >
+      Marks this column as eligible for filter controls (future use).
+  width:
+    syntax: key-value
+    type: string
+    default: "1fr"
+    description: >
+      CSS grid track size for this column (e.g. "1fr", "2fr", "auto", "200px").
+  type:
+    syntax: key-value
+    type: enum
+    values: [string, number, date]
+    default: string
+    description: >
+      Data type hint used for sorting comparisons and potential formatting.
+  align:
+    syntax: key-value
+    type: enum
+    values: [start, center, end]
+    default: start
+    description: >
+      Horizontal alignment for both the header and body cells in this column.
+
+composition:
+  parents: [aui-table]
+  children: null
+
+examples:
+  - description: Column declarations inside a data-driven table.
+    html: |
+      <aui-table sortable paginate="10">
+        <aui-table-column key="orderId"  label="Order ID"  sortable width="auto"></aui-table-column>
+        <aui-table-column key="test"     label="Test"      sortable width="2fr"></aui-table-column>
+        <aui-table-column key="status"   label="Status"    filterable width="auto"></aui-table-column>
+        <aui-table-column key="date"     label="Ordered"   sortable type="date" width="auto"></aui-table-column>
+        <aui-table-column key="cost"     label="Cost"      sortable type="number" align="end" width="auto"></aui-table-column>
+        <script type="application/json">
+          [
+            { "id": "ORD-001", "orderId": "ORD-001", "test": "CBC w/ Differential", "status": "Completed", "date": "2024-11-02", "cost": 45.00 },
+            { "id": "ORD-002", "orderId": "ORD-002", "test": "Comprehensive Metabolic Panel", "status": "Pending", "date": "2024-11-10", "cost": 62.50 }
+          ]
+        </script>
+      </aui-table>

package/dist/docs/components/table-head.yaml

@@ -0,0 +1,11 @@
+name: aui-table-head
+tag: aui-table-head
+type: component
+summary: Table head section using display contents
+base: AgentElement
+composition:
+  parents: [aui-table]
+  children: [aui-table-row]
+examples:
+  - html: See aui-table for full usage.
+    description: Used within aui-table structure.

package/dist/docs/components/table-header.yaml

@@ -0,0 +1,11 @@
+name: aui-table-header
+tag: aui-table-header
+type: component
+summary: Column header cell with bold label
+base: AgentElement
+composition:
+  parents: [aui-table, aui-table-head, aui-table-body, aui-table-row]
+  children: null
+examples:
+  - html: See aui-table for full usage.
+    description: Used within aui-table structure.

package/dist/docs/components/table-row.yaml

@@ -0,0 +1,11 @@
+name: aui-table-row
+tag: aui-table-row
+type: component
+summary: Table row using CSS subgrid
+base: AgentElement
+composition:
+  parents: [aui-table, aui-table-head, aui-table-body, aui-table-row]
+  children: null
+examples:
+  - html: See aui-table for full usage.
+    description: Used within aui-table structure.

package/dist/docs/components/table.yaml

@@ -0,0 +1,219 @@
+name: aui-table
+tag: aui-table
+type: component
+summary: >
+  CSS grid table with subgrid rows. Supports dual-mode usage:
+  declarative HTML (static rows via aui-table-head / aui-table-body) and
+  data-driven JSON (column config via aui-table-column with inline or remote data).
+
+  v3 architecture: a single click handler on the table element routes events
+  to sort, selection, and pagination via data attributes (event delegation).
+  No per-element listeners — the handler survives re-renders because it
+  lives on the stable host element. All interactive controls are native-free:
+  aui-checkbox for selection, aui-input for search. No native input elements
+  appear in the rendered output.
+base: AgentElement
+
+attributes:
+  cols:
+    syntax: key-value
+    type: string
+    default: ""
+    description: >
+      Grid column template (e.g. "1fr 1fr 2fr", "auto auto 1fr").
+      Maps directly to grid-template-columns. Used in declarative mode;
+      data-driven mode derives columns from aui-table-column widths.
+  src:
+    syntax: key-value
+    type: string
+    default: ""
+    description: >
+      URL to fetch row data as JSON. The response must be an array or
+      an object with a `data` array. Triggers re-render on change.
+  selectable:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: >
+      Adds a checkbox column for row selection. Exposes selectedIds
+      getter and fires aui:selection-change on toggle.
+  sortable:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: >
+      Enables click-to-sort on all column headers. Individual columns
+      can also opt in via their own sortable attribute.
+  searchable:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: >
+      Shows a search toolbar above the table that filters visible rows
+      across all columns with debounced input.
+  paginate:
+    syntax: key-value
+    type: string
+    default: "0"
+    description: >
+      Rows per page. Set to a positive integer to enable pagination
+      with prev/next controls. "0" disables pagination.
+
+delegation:
+  description: >
+    Event delegation: a single click handler on the host element inspects
+    data attributes on the event target to determine the action. This
+    replaces per-element listeners and survives innerHTML re-renders
+    because the handler is bound to the stable host, not to transient
+    child elements.
+  data-attributes:
+    data-table-sortable:
+      placed-on: aui-table-header
+      companion: data-key
+      description: >
+        Marks a header cell as a sort target. The companion data-key
+        attribute identifies which column key to sort by.
+    data-table-sort:
+      placed-on: aui-table-header
+      values: [asc, desc]
+      description: >
+        Set on the currently sorted header to indicate direction.
+        Absent when sort is cleared (the "none" state).
+    data-table-check:
+      placed-on: aui-checkbox
+      companion: data-row-id
+      description: >
+        Marks a checkbox as a selection target. data-row-id holds the
+        row's id value, or "__all__" for the select-all checkbox in the
+        header.
+    data-table-selected:
+      placed-on: aui-table-row
+      description: >
+        Applied to body rows whose id is in the selected set. Used for
+        visual highlight styling.
+    data-table-page:
+      placed-on: button
+      description: >
+        Set on pagination buttons (prev, next, and numbered pages).
+        The value is the target page number.
+    data-table-toolbar:
+      placed-on: div
+      description: >
+        Wrapper for the search input. Contains an aui-input element.
+    data-table-footer:
+      placed-on: div
+      description: >
+        Wrapper for pagination controls and page info.
+    data-table-page-info:
+      placed-on: span
+      description: >
+        Displays the "start-end of total" text inside the footer.
+    data-table-page-controls:
+      placed-on: span
+      description: >
+        Inline-flex container for prev/next and numbered page buttons.
+
+sort-cycle:
+  description: >
+    Three-click cycle: asc -> desc -> none. Clicking a new column
+    always starts at asc. Resets to page 1 on every sort change.
+
+search:
+  description: >
+    Debounced at 200ms. Filters across all column values by
+    lowercased substring match. Uses aui-input (never a native
+    input element). Resets to page 1 on term change.
+
+pagination:
+  description: >
+    Native button elements with all:unset styling. Active page gets
+    accent background. Prev/next buttons disable at boundaries.
+    Page info shows "start-end of total" range.
+
+events:
+  aui:selection-change:
+    description: >
+      Fired when row selection changes (data-driven mode with selectable).
+      detail: { selectedIds: string[] }
+  aui:page-change:
+    description: >
+      Fired when the current page changes (data-driven mode with paginate).
+      detail: { page: number }
+  aui:sort-change:
+    description: >
+      Fired when column sort state changes (data-driven mode with sortable).
+      detail: { key: string, dir: 'asc' | 'desc' | 'none' }
+
+api:
+  setData:
+    signature: "setData(data: Record<string, unknown>[]): void"
+    description: >
+      Replaces the table's row data programmatically. Resets pagination
+      and selection, then re-renders.
+  selectedIds:
+    signature: "get selectedIds(): Set<string>"
+    description: >
+      Returns a copy of the currently selected row IDs. Each ID comes
+      from the row's `id` field (or a JSON-stringified fallback).
+
+a11y:
+  role: table
+
+composition:
+  parents: [any]
+  children: [aui-table-head, aui-table-body, aui-table-column]
+
+examples:
+  - description: Declarative HTML table (static rows).
+    html: |
+      <aui-table cols="1fr 1fr 1fr">
+        <aui-table-head>
+          <aui-table-row>
+            <aui-table-header>Name</aui-table-header>
+            <aui-table-header>Role</aui-table-header>
+            <aui-table-header>Status</aui-table-header>
+          </aui-table-row>
+        </aui-table-head>
+        <aui-table-body>
+          <aui-table-row>
+            <aui-table-cell>Alice</aui-table-cell>
+            <aui-table-cell>Engineer</aui-table-cell>
+            <aui-table-cell>Active</aui-table-cell>
+          </aui-table-row>
+          <aui-table-row>
+            <aui-table-cell>Bob</aui-table-cell>
+            <aui-table-cell>Designer</aui-table-cell>
+            <aui-table-cell>Away</aui-table-cell>
+          </aui-table-row>
+        </aui-table-body>
+      </aui-table>
+
+  - description: >
+      Data-driven table with inline JSON, sorting, search, selection,
+      and pagination.
+    html: |
+      <aui-table sortable searchable selectable paginate="5">
+        <aui-table-column key="name"   label="Name"   sortable width="1fr"></aui-table-column>
+        <aui-table-column key="role"   label="Role"   width="1fr"></aui-table-column>
+        <aui-table-column key="status" label="Status"  sortable filterable width="auto"></aui-table-column>
+        <aui-table-column key="joined" label="Joined"  sortable type="date" width="auto"></aui-table-column>
+        <script type="application/json">
+          [
+            { "id": 1, "name": "Alice", "role": "Engineer", "status": "Active", "joined": "2024-01-15" },
+            { "id": 2, "name": "Bob",   "role": "Designer", "status": "Away",   "joined": "2024-02-20" },
+            { "id": 3, "name": "Carol", "role": "PM",       "status": "Active", "joined": "2023-11-03" },
+            { "id": 4, "name": "Dan",   "role": "Engineer", "status": "Active", "joined": "2024-03-10" },
+            { "id": 5, "name": "Eve",   "role": "Designer", "status": "Busy",   "joined": "2023-06-22" },
+            { "id": 6, "name": "Frank", "role": "Engineer", "status": "Away",   "joined": "2024-04-01" }
+          ]
+        </script>
+      </aui-table>
+
+  - description: Data-driven table loaded from a remote JSON endpoint.
+    html: |
+      <aui-table src="/api/users.json" sortable selectable paginate="10">
+        <aui-table-column key="name"   label="Name"   sortable width="2fr"></aui-table-column>
+        <aui-table-column key="email"  label="Email"   width="2fr"></aui-table-column>
+        <aui-table-column key="role"   label="Role"    width="1fr"></aui-table-column>
+        <aui-table-column key="status" label="Status"  sortable width="auto"></aui-table-column>
+      </aui-table>

package/dist/docs/components/tabs.yaml

@@ -0,0 +1,61 @@
+name: aui-tabs
+tag: aui-tabs
+type: component
+summary: Tabbed interface with roving keyboard navigation.
+description: >
+  Coordinator for aui-tab triggers and aui-tab-panel content.
+  Handles selection, ARIA wiring, and keyboard navigation
+  (arrow keys, Home/End). Supports horizontal and vertical layout.
+
+base: AgentElement
+
+attributes:
+  value:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Currently selected tab value.
+
+  orientation:
+    syntax: key-value
+    type: enum
+    values: [vertical]
+    default: ""
+    description: Layout direction. Default is horizontal.
+
+a11y:
+  role: tablist
+  keyboard:
+    ArrowRight: Select next tab (horizontal).
+    ArrowLeft: Select previous tab (horizontal).
+    ArrowDown: Select next tab (vertical).
+    ArrowUp: Select previous tab (vertical).
+    Home: Select first tab.
+    End: Select last tab.
+
+events:
+  change:
+    description: Fired when the active tab changes. detail.value is the new tab value.
+
+composition:
+  parents: [any]
+  children: [aui-tab, aui-tab-panel]
+
+examples:
+  - html: |
+      <aui-tabs value="general">
+        <aui-tab value="general">General</aui-tab>
+        <aui-tab value="advanced">Advanced</aui-tab>
+        <aui-tab-panel value="general">General content</aui-tab-panel>
+        <aui-tab-panel value="advanced">Advanced content</aui-tab-panel>
+      </aui-tabs>
+    description: Basic tabbed interface.
+
+  - html: |
+      <aui-tabs orientation="vertical" value="profile">
+        <aui-tab value="profile">Profile</aui-tab>
+        <aui-tab value="security">Security</aui-tab>
+        <aui-tab-panel value="profile">Profile settings</aui-tab-panel>
+        <aui-tab-panel value="security">Security settings</aui-tab-panel>
+      </aui-tabs>
+    description: Vertical tabs.

package/dist/docs/components/textarea.yaml

@@ -0,0 +1,196 @@
+name: aui-textarea
+tag: aui-textarea
+type: component
+summary: Multi-line text input with autogrow support.
+description: >
+  Multi-line input. Same wrapper pattern as aui-input — the
+  wrapper owns the visual chrome, a native <textarea> lives
+  inside with browser chrome stripped. Supports autogrow
+  modifier for auto-expanding height to content. Defaults to
+  width: 20ch for standalone use. Automatically stretches to full
+  width when placed inside aui-field. Use width="full" on the element
+  to override the default width in other contexts.
+
+base: AgentElement
+
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: true
+    default: medium
+    values: [xs, sm, md, lg, xl]
+    description: Controls font size and padding.
+
+  radius:
+    syntax: boolean
+    exclusive: true
+    cascades: true
+    default: medium
+    values: [sharp, round]
+    description: Controls border radius.
+
+  density:
+    syntax: key-value
+    attribute: density
+    cascades: true
+    default: regular
+    values: [compact, spacious]
+    description: Controls padding compression.
+
+  intent:
+    syntax: boolean
+    exclusive: true
+    cascades: true
+    default: neutral
+    values: [accent, info, success, warning, danger]
+    description: Color family for border and focus ring.
+
+attributes:
+  disabled:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Prevents interaction.
+
+  readonly:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Allows selection but prevents editing.
+
+  required:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Marks as required for form validation.
+
+  autogrow:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: >
+      Auto-expands height to fit content. Disables manual resize.
+
+  autofocus:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Focuses the textarea on mount.
+
+  placeholder:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Placeholder text.
+
+  value:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Current textarea value.
+
+  name:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Form submission name.
+
+  rows:
+    syntax: key-value
+    type: string
+    default: "3"
+    description: Initial visible row count.
+
+  minlength:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Minimum character count.
+
+  maxlength:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Maximum character count.
+
+modifiers:
+  autogrow:
+    syntax: boolean
+    description: >
+      Auto-expands textarea height to fit content. Disables
+      manual resize handle. Height adjusts on every input event.
+
+content:
+  model: mixed
+  accepts: [textarea]
+  required: false
+  description: Auto-stamps a native textarea if none exists.
+
+composition:
+  parents: [aui-field, aui-stack, form, div]
+  children: null
+  context: >
+    Use inside aui-field for labeled textareas. Standalone for
+    chat inputs, comment boxes, code editors.
+
+a11y:
+  role: implicit (native textarea)
+  keyboard:
+    Tab: Focuses the native textarea.
+  aria:
+    aria-disabled: Reflected from disabled.
+    aria-readonly: Reflected from readonly.
+    aria-required: Reflected from required.
+
+events:
+  input:
+    description: Fires on every keystroke.
+  change:
+    description: Fires on blur.
+
+tokens:
+  sizing:
+    - --aui-size
+    - --aui-font-size
+  spacing:
+    - --aui-pad-control-block
+    - --aui-pad-control-inline
+  color:
+    - --aui-ink
+    - --aui-ink-muted
+    - --aui-ink-placeholder
+    - --aui-control
+    - --aui-fill
+    - --aui-stroke
+    - --aui-focus
+  shape:
+    - --aui-radius
+  motion:
+    - --aui-duration
+    - --aui-easing
+
+css-notes:
+  attr-audit:
+    - "AB1: [disabled], [readonly], [autogrow] — visual state via attributes"
+    - "[autogrow] > textarea { resize: none; overflow: hidden } — CSS disables manual resize"
+    - ":focus-within — focus ring on wrapper"
+
+examples:
+  - html: <aui-textarea placeholder="Write a message..."></aui-textarea>
+    description: Basic textarea.
+
+  - html: <aui-textarea placeholder="Auto-expanding..." autogrow></aui-textarea>
+    description: Autogrow textarea.
+
+  - html: <aui-textarea placeholder="Disabled" disabled></aui-textarea>
+    description: Disabled textarea.
+
+  - html: <aui-textarea value="Read only content" readonly></aui-textarea>
+    description: Read-only textarea.
+
+  - html: |
+      <aui-field label="Bio" description="Tell us about yourself.">
+        <aui-textarea placeholder="Write here..." rows="4"></aui-textarea>
+      </aui-field>
+    description: Textarea inside a labeled field.

package/dist/docs/components/toast.yaml

@@ -0,0 +1,62 @@
+name: aui-toast
+tag: aui-toast
+type: component
+summary: Toast notification with auto-dismiss and stacking.
+description: >
+  Ephemeral notification that auto-dismisses. Use the imperative
+  AuiToast.show() API or declaratively with the open attribute.
+  Multiple toasts stack inside aui-toast-container (auto-created
+  on first use). Intent set via boolean attribute (info, success,
+  warning, danger).
+
+base: AgentElement
+
+attributes:
+  open:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Whether the toast is visible.
+
+  message:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Toast message text.
+
+  duration:
+    syntax: key-value
+    type: string
+    default: "4000"
+    description: Auto-dismiss delay in ms. Set to 0 to disable.
+
+  closeable:
+    syntax: boolean
+    type: boolean
+    default: true
+    description: Show a dismiss button.
+
+a11y:
+  role: status
+  aria:
+    aria-live: polite
+
+events:
+  dismiss:
+    description: Fired when the toast is dismissed (auto or manual).
+
+examples:
+  - html: <aui-toast open message="Item saved successfully" success duration="0"></aui-toast>
+    description: Success toast.
+
+  - html: <aui-toast open message="New version available" info duration="0"></aui-toast>
+    description: Info toast.
+
+  - html: <aui-toast open message="Storage almost full" warning duration="0"></aui-toast>
+    description: Warning toast.
+
+  - html: <aui-toast open message="Failed to delete item" danger duration="0" closeable></aui-toast>
+    description: Danger toast with close button.
+
+  - html: <aui-toast open message="Default toast with no intent" duration="0"></aui-toast>
+    description: Default toast (no intent).