@agent-ui-kit/web-components 0.0.14 → 0.0.16

package/dist/docs/components/radio-group.yaml

@@ -2,67 +2,69 @@ name: aui-radio-group
 tag: aui-radio-group
 type: component
 summary: Container that coordinates radio button selection.
-description: >
-  Wraps aui-radio children and manages single-selection, name
-  propagation, and arrow-key navigation. Set value to pre-select
-  an option.
-
+description: |
+  Wraps aui-radio children and manages single-selection, name propagation, and arrow-key navigation. Set value to pre-select an option.
 base: AgentElement
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: true
     default: medium
-    values: [xs, sm, md, lg, xl]
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
     description: Cascades size to all child radios.
-
   intent:
     syntax: boolean
     exclusive: true
     cascades: true
     default: neutral
-    values: [accent, info, success, warning, danger]
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
     description: Cascades color family to all child radios.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Disables all child radios.
-
   name:
     syntax: key-value
     type: string
     default: ""
-    description: >
+    description: |
       Form group name. Propagated to all child aui-radio elements.
-
   value:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Currently selected value. Setting this checks the matching
-      child radio and unchecks others.
-
+    description: |
+      Currently selected value. Setting this checks the matching child radio and unchecks others.
 content:
   model: block
-  accepts: [aui-radio]
+  accepts:
+    - aui-radio
   required: true
   min-children: 2
   description: Two or more aui-radio children.
-
 composition:
-  parents: [aui-field, aui-stack, form, div]
-  children: [aui-radio]
-  context: >
-    Use inside aui-field for labeled radio groups. The group
-    handles keyboard navigation (arrow keys cycle through options)
-    and single-selection enforcement.
-
+  parents:
+    - aui-field
+    - aui-stack
+    - form
+    - div
+  children:
+    - aui-radio
+  context: |
+    Use inside aui-field for labeled radio groups. The group handles keyboard navigation (arrow keys cycle through options) and single-selection enforcement.
 a11y:
   role: radiogroup
   keyboard:
@@ -70,27 +72,23 @@ a11y:
     ArrowRight: Select next radio.
     ArrowUp: Select previous radio.
     ArrowLeft: Select previous radio.
-
 events:
   change:
-    description: >
-      Bubbles from the selected child radio. Read the group's
-      value attribute for the current selection.
-
+    description: |
+      Bubbles from the selected child radio. Read the group's value attribute for the current selection.
 tokens:
   spacing:
     - --aui-space
-
 examples:
-  - html: |
+  - description: Radio group with pre-selected value
+    html: |-
       <aui-radio-group name="size" value="md">
         <aui-radio label="Small" value="sm"></aui-radio>
         <aui-radio label="Medium" value="md"></aui-radio>
         <aui-radio label="Large" value="lg"></aui-radio>
       </aui-radio-group>
-    description: Radio group with pre-selected value.
-
-  - html: |
+  - description: Radio group inside a labeled field
+    html: |-
       <aui-field label="Plan">
         <aui-radio-group name="plan">
           <aui-radio label="Free" value="free"></aui-radio>
@@ -98,11 +96,72 @@ examples:
           <aui-radio label="Enterprise" value="enterprise"></aui-radio>
         </aui-radio-group>
       </aui-field>
-    description: Radio group inside a labeled field.
-
-  - html: |
+  - description: Disabled radio group
+    html: |-
       <aui-radio-group name="status" disabled>
         <aui-radio label="Active" value="active"></aui-radio>
         <aui-radio label="Inactive" value="inactive"></aui-radio>
       </aui-radio-group>
-    description: Disabled radio group.
+  - description: Horizontal radio group (4 options, pre-selected)
+    html: |-
+      <aui-radio-group name="color" value="blue" style="flex-direction: row">
+        <aui-radio label="Red" value="red"></aui-radio>
+        <aui-radio label="Blue" value="blue"></aui-radio>
+        <aui-radio label="Green" value="green"></aui-radio>
+        <aui-radio label="Yellow" value="yellow"></aui-radio>
+      </aui-radio-group>
+  - description: Vertical radio group with 5 options
+    html: |-
+      <aui-radio-group name="priority" value="medium">
+        <aui-radio label="Critical" value="critical"></aui-radio>
+        <aui-radio label="High" value="high"></aui-radio>
+        <aui-radio label="Medium" value="medium"></aui-radio>
+        <aui-radio label="Low" value="low"></aui-radio>
+        <aui-radio label="None" value="none"></aui-radio>
+      </aui-radio-group>
+  - description: Radio group with individually disabled option
+    html: |-
+      <aui-radio-group name="tier" value="pro">
+        <aui-radio label="Free" value="free"></aui-radio>
+        <aui-radio label="Pro" value="pro"></aui-radio>
+        <aui-radio label="Enterprise" value="enterprise" disabled></aui-radio>
+      </aui-radio-group>
+  - description: Accent intent radio group
+    html: |-
+      <aui-radio-group name="theme" value="dark" accent>
+        <aui-radio label="Light" value="light"></aui-radio>
+        <aui-radio label="Dark" value="dark"></aui-radio>
+        <aui-radio label="System" value="system"></aui-radio>
+      </aui-radio-group>
+  - description: Danger intent radio group
+    html: |-
+      <aui-radio-group name="action" danger>
+        <aui-radio label="Keep data" value="keep"></aui-radio>
+        <aui-radio label="Delete everything" value="delete"></aui-radio>
+      </aui-radio-group>
+  - description: Small size radio group
+    html: |-
+      <aui-radio-group name="density" value="default" size="sm">
+        <aui-radio label="Compact" value="compact"></aui-radio>
+        <aui-radio label="Default" value="default"></aui-radio>
+        <aui-radio label="Comfortable" value="comfortable"></aui-radio>
+      </aui-radio-group>
+  - description: Radio group inside aui-field with label
+    html: |-
+      <aui-field label="Notification preference">
+        <aui-radio-group name="notifications" value="email">
+          <aui-radio label="Email" value="email"></aui-radio>
+          <aui-radio label="SMS" value="sms"></aui-radio>
+          <aui-radio label="Push notification" value="push"></aui-radio>
+          <aui-radio label="None" value="none"></aui-radio>
+        </aui-radio-group>
+      </aui-field>
+  - description: Horizontal radio group inside aui-field
+    html: |-
+      <aui-field label="Layout direction">
+        <aui-radio-group name="direction" value="ltr" style="flex-direction: row">
+          <aui-radio label="LTR" value="ltr"></aui-radio>
+          <aui-radio label="RTL" value="rtl"></aui-radio>
+          <aui-radio label="Auto" value="auto"></aui-radio>
+        </aui-radio-group>
+      </aui-field>

package/dist/docs/components/radio.yaml

@@ -2,89 +2,86 @@ name: aui-radio
 tag: aui-radio
 type: component
 summary: Radio button with custom circle indicator.
-description: >
-  Custom radio button. Hidden native input for form participation.
-  Visual circle with dot indicator via ::before. Label rendered via
-  CSS ::after { content: attr(label) } — JS only sets aria-label
-  for accessibility, no DOM stamping for the visible label. Use
-  inside aui-radio-group for coordinated single-selection.
-
+description: |
+  Custom radio button. Hidden native input for form participation. Visual circle with dot indicator via ::before. Label rendered via CSS ::after { content: attr(label) } — JS only sets aria-label for accessibility, no DOM stamping for the visible label. Use inside aui-radio-group for coordinated single-selection.
 base: AgentElement
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: true
     default: medium
-    values: [xs, sm, md, lg, xl]
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
     description: Controls radio and label size.
-
   intent:
     syntax: boolean
     exclusive: true
     cascades: true
     default: neutral
-    values: [accent, info, success, warning, danger]
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
     description: Color family for the selected state.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction.
-
   checked:
     syntax: boolean
     type: boolean
     default: false
     description: Whether this radio is selected.
-
   required:
     syntax: boolean
     type: boolean
     default: false
     description: Marks as required for form validation.
-
   label:
     syntax: key-value
     type: string
     default: ""
     description: Label text next to the radio.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form group name. Usually set by parent aui-radio-group.
-
   value:
     syntax: key-value
     type: string
     default: ""
     description: Form submission value for this option.
-
 content:
   model: inline
-  accepts: [input]
+  accepts:
+    - input
   required: false
-  description: >
-    Auto-stamps hidden input for form participation. Label is
-    rendered purely via CSS ::after on :scope — no stamped span.
-
+  description: |
+    Auto-stamps hidden input for form participation. Label is rendered purely via CSS ::after on :scope — no stamped span.
 composition:
-  parents: [aui-radio-group, aui-field, aui-stack, form, div]
+  parents:
+    - aui-radio-group
+    - aui-field
+    - aui-stack
+    - form
+    - div
   children: null
-  context: >
-    Almost always used inside aui-radio-group which handles
-    name propagation, single-selection, and keyboard navigation.
-
+  context: |
+    Almost always used inside aui-radio-group which handles name propagation, single-selection, and keyboard navigation.
 constraints:
   - when: standalone (no aui-radio-group parent)
     require: name attribute
     reason: Radios need a shared name for browser grouping.
-
 a11y:
   role: radio
   keyboard:
@@ -93,11 +90,9 @@ a11y:
   aria:
     aria-checked: Mirrors checked attribute.
     aria-disabled: Mirrors disabled attribute.
-
 events:
   change:
     description: Fires when this radio becomes selected.
-
 tokens:
   - name: --aui-radio-gap
     default: calc(var(--aui-space) * 2)
@@ -141,20 +136,24 @@ tokens:
   - name: --aui-radio-border-disabled
     default: var(--aui-stroke-disabled, var(--aui-border-disabled))
     description: Circle border when disabled.
-
 css-notes:
   attr-audit:
     - "AB1: [checked], [disabled] — visual state via attributes"
     - "CG2: ::before on [data-circle] for dot indicator"
     - "CG3: ::after { content: attr(label) } — label rendered in CSS, overflow: hidden on ::after only"
     - "CG4: gap uses 2 * space (tightened from 3 * space)"
-
 examples:
-  - html: <aui-radio label="Option A" value="a"></aui-radio>
-    description: Default unchecked radio.
-
-  - html: <aui-radio label="Option B" value="b" checked></aui-radio>
-    description: Pre-selected radio.
-
-  - html: <aui-radio label="Unavailable" disabled></aui-radio>
-    description: Disabled radio.
+  - description: Default unchecked radio
+    html: <aui-radio label="Option A" value="a"></aui-radio>
+  - description: Pre-selected radio
+    html: <aui-radio label="Option B" value="b" checked></aui-radio>
+  - description: Disabled radio
+    html: <aui-radio label="Unavailable" disabled></aui-radio>
+  - description: Accent intent radio
+    html: <aui-radio label="Accent option" value="accent" accent checked></aui-radio>
+  - description: Danger intent radio
+    html: <aui-radio label="Critical" value="crit" danger checked></aui-radio>
+  - description: Small size radio
+    html: <aui-radio label="Tiny option" value="tiny" size="sm"></aui-radio>
+  - description: Large size radio
+    html: <aui-radio label="Big option" value="big" size="lg" checked></aui-radio>

package/dist/docs/components/range.yaml

@@ -2,59 +2,45 @@ name: aui-range
 tag: aui-range
 type: component
 summary: Slider control with custom track and thumb.
-description: >
-  A range slider that wraps a native input[type="range"] for form
-  participation and full keyboard/ARIA support. The wrapper renders
-  a custom track, fill, and wide iOS-style thumb contained within the
-  track — the native input is visually hidden. The thumb uses a scaleX
-  animation on press (:active) with transform-origin: center for
-  centered scaling.
-
+description: |
+  A range slider that wraps a native input[type="range"] for form participation and full keyboard/ARIA support. The wrapper renders a custom track, fill, and wide iOS-style thumb contained within the track — the native input is visually hidden. The thumb uses a scaleX animation on press (:active) with transform-origin: center for centered scaling.
 base: AgentElement
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction. Dims visually.
-
   min:
     syntax: key-value
     type: string
     default: "0"
     description: Minimum value.
-
   max:
     syntax: key-value
     type: string
     default: "100"
     description: Maximum value.
-
   step:
     syntax: key-value
     type: string
     default: "1"
     description: Step increment.
-
   value:
     syntax: key-value
     type: string
     default: "50"
     description: Current value.
-
   label:
     syntax: key-value
     type: string
     default: ""
     description: Accessible label (maps to aria-label on the native input).
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form field name.
-
 a11y:
   role: slider (via native input)
   keyboard:
@@ -64,11 +50,9 @@ a11y:
     End: Set to max.
   aria:
     aria-label: Set from label attribute.
-
 form:
   associated: true
   value: Current slider value.
-
 tokens:
   - name: --aui-range-track-background
     default: var(--aui-control)
@@ -94,13 +78,26 @@ tokens:
   - name: --aui-range-thumb-shadow
     default: var(--aui-shadow-sm, 0 1px 4px oklch(0% 0 0 / 0.15))
     description: Thumb drop shadow.
-
 examples:
-  - html: <aui-range></aui-range>
-    description: Default slider (0–100, value 50).
-
-  - html: <aui-range min="0" max="10" step="1" value="3" label="Volume"></aui-range>
-    description: Slider with custom range and label.
-
-  - html: <aui-range disabled value="75"></aui-range>
-    description: Disabled slider.
+  - description: Default slider (0–100, value 50)
+    html: <aui-range></aui-range>
+  - description: Slider with custom range and label
+    html: <aui-range min="0" max="10" step="1" value="3" label="Volume"></aui-range>
+  - description: Disabled slider
+    html: <aui-range disabled value="75"></aui-range>
+  - description: Range with visible value label (0–100, step 10)
+    html: <aui-range min="0" max="100" step="10" value="40" label="Brightness"></aui-range>
+  - description: Fine-grained range (0–1, step 0.01)
+    html: <aui-range min="0" max="1" step="0.01" value="0.65" label="Opacity"></aui-range>
+  - description: Negative to positive range
+    html: <aui-range min="-50" max="50" step="5" value="0" label="Balance"></aui-range>
+  - description: Range inside aui-field with label
+    html: |-
+      <aui-field label="Volume">
+        <aui-range min="0" max="100" step="1" value="70" name="volume"></aui-range>
+      </aui-field>
+  - description: Range inside aui-field, disabled
+    html: |-
+      <aui-field label="Locked setting">
+        <aui-range disabled min="0" max="10" step="1" value="5" name="locked"></aui-range>
+      </aui-field>

package/dist/docs/components/segmented-control.yaml

@@ -2,26 +2,20 @@ name: aui-segmented-control
 tag: aui-segmented-control
 type: component
 summary: Toggle between mutually exclusive options.
-description: >
-  A radiogroup-style control for switching between views or values.
-  Contains aui-segment children. Selected segment gets a raised
-  pill appearance.
-
+description: |
+  A radiogroup-style control for switching between views or values. Contains aui-segment children. Selected segment gets a raised pill appearance.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
     type: string
     default: ""
     description: Currently selected segment value.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form field name.
-
 a11y:
   role: radiogroup
   keyboard:
@@ -29,19 +23,17 @@ a11y:
     ArrowLeft: Select previous segment.
     Home: Select first segment.
     End: Select last segment.
-
 events:
   change:
     description: Fired when selection changes. detail.value is the new value.
-
 form:
   associated: true
   value: Selected segment value.
-
 composition:
-  parents: [any]
-  children: [aui-segment]
-
+  parents:
+    - any
+  children:
+    - aui-segment
 tokens:
   - name: --aui-segmented-control-background
     default: var(--aui-control, var(--aui-fill))
@@ -64,12 +56,61 @@ tokens:
   - name: --aui-segmented-control-indicator-shadow
     default: var(--aui-shadow-sm)
     description: Box shadow of the floating selection indicator.
-
 examples:
-  - html: |
+  - description: 3-segment view mode toggle
+    html: |-
       <aui-segmented-control value="list">
         <aui-segment value="list" selected>List</aui-segment>
         <aui-segment value="grid">Grid</aui-segment>
         <aui-segment value="board">Board</aui-segment>
       </aui-segmented-control>
-    description: View mode toggle.
+  - description: 2-segment binary toggle (Light / Dark)
+    html: |-
+      <aui-segmented-control value="light">
+        <aui-segment value="light" selected>Light</aui-segment>
+        <aui-segment value="dark">Dark</aui-segment>
+      </aui-segmented-control>
+  - description: 2-segment on/off toggle
+    html: |-
+      <aui-segmented-control value="on">
+        <aui-segment value="on" selected>On</aui-segment>
+        <aui-segment value="off">Off</aui-segment>
+      </aui-segmented-control>
+  - description: 4 segments — time period selector
+    html: |-
+      <aui-segmented-control value="monthly">
+        <aui-segment value="daily">Daily</aui-segment>
+        <aui-segment value="weekly">Weekly</aui-segment>
+        <aui-segment value="monthly" selected>Monthly</aui-segment>
+        <aui-segment value="yearly">Yearly</aui-segment>
+      </aui-segmented-control>
+  - description: 5 segments — rating scale
+    html: |-
+      <aui-segmented-control value="3">
+        <aui-segment value="1">1</aui-segment>
+        <aui-segment value="2">2</aui-segment>
+        <aui-segment value="3" selected>3</aui-segment>
+        <aui-segment value="4">4</aui-segment>
+        <aui-segment value="5">5</aui-segment>
+      </aui-segmented-control>
+  - description: Disabled individual segment
+    html: |-
+      <aui-segmented-control value="active">
+        <aui-segment value="active" selected>Active</aui-segment>
+        <aui-segment value="pending">Pending</aui-segment>
+        <aui-segment value="archived" disabled>Archived</aui-segment>
+      </aui-segmented-control>
+  - description: Segments with icons
+    html: |-
+      <aui-segmented-control value="list">
+        <aui-segment value="list" selected><aui-icon name="list"></aui-icon> List</aui-segment>
+        <aui-segment value="grid"><aui-icon name="grid"></aui-icon> Grid</aui-segment>
+        <aui-segment value="board"><aui-icon name="kanban"></aui-icon> Board</aui-segment>
+      </aui-segmented-control>
+  - description: Icon-only segments
+    html: |-
+      <aui-segmented-control value="left">
+        <aui-segment value="left" selected><aui-icon name="align-left"></aui-icon></aui-segment>
+        <aui-segment value="center"><aui-icon name="align-center"></aui-icon></aui-segment>
+        <aui-segment value="right"><aui-icon name="align-right"></aui-icon></aui-segment>
+      </aui-segmented-control>