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

package/dist/docs/components/time-field.yaml

@@ -2,58 +2,45 @@ name: aui-time-field
 tag: aui-time-field
 type: component
 summary: Segmented time input with independently editable hour and minute segments.
-description: >
-  A time entry control where hour and minute (and optional AM/PM)
-  are separate focusable segments. Each segment supports arrow-key
-  increment/decrement, direct digit entry with auto-advance, and
-  Tab/Arrow navigation between segments. Supports 12h and 24h
-  formats with configurable minute step. No native form elements.
-
+description: |
+  A time entry control where hour and minute (and optional AM/PM) are separate focusable segments. Each segment supports arrow-key increment/decrement, direct digit entry with auto-advance, and Tab/Arrow navigation between segments. Supports 12h and 24h formats with configurable minute step. No native form elements.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
     type: string
     default: ""
     description: Time value in HH:MM (24h) format.
-
   min:
     syntax: key-value
     type: string
     default: ""
     description: Earliest allowed time (HH:MM).
-
   max:
     syntax: key-value
     type: string
     default: ""
     description: Latest allowed time (HH:MM).
-
   step:
     syntax: key-value
     type: string
     default: "1"
     description: Minute increment for arrow key navigation.
-
   format:
     syntax: key-value
     type: string
-    default: "24h"
+    default: 24h
     description: Display format (12h or 24h).
-
   placeholder:
     syntax: key-value
     type: string
     default: ""
     description: Placeholder shown in empty segments.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction. Dims visually.
-
 a11y:
   role: spinbutton (on each segment)
   keyboard:
@@ -62,14 +49,13 @@ a11y:
     ArrowLeft: Move to previous segment.
     ArrowRight: Move to next segment.
     Tab: Move between segments.
-    "0-9": Digit entry with auto-advance.
+    0-9: Digit entry with auto-advance.
     Backspace: Clear segment.
-    "a/p": Toggle AM/PM (12h format).
+    a/p: Toggle AM/PM (12h format).
   aria:
     aria-label: Segment name (Hour, Minute, AM/PM).
     aria-valuemin: Segment minimum.
     aria-valuemax: Segment maximum.
-
 tokens:
   - name: --aui-time-field-background
     default: var(--aui-control, var(--aui-fill))
@@ -98,23 +84,78 @@ tokens:
   - name: --aui-time-field-segment-color-focus
     default: var(--aui-accent-700)
     description: Focused segment text color.
-
 composition:
-  parents: [aui-field, aui-stack, aui-container, div]
+  parents:
+    - aui-field
+    - aui-stack
+    - aui-container
+    - div
   children: []
-  context: >
-    Standalone time entry. Use inside aui-field for labeled forms.
-    Not an aui-input variant -- separate segmented control.
-
+  context: |
+    Standalone time entry. Use inside aui-field for labeled forms. Not an aui-input variant -- separate segmented control.
 examples:
-  - html: <aui-time-field value="14:30"></aui-time-field>
-    description: 24h time field.
+  - description: Default 24h time field
+    html: <aui-time-field value="14:30"></aui-time-field>
+  - description: Morning time
+    html: |-
+      <aui-time-field value="09:00"></aui-time-field>
+
+      <!-- ===============================================================
+           12H FORMAT
+           =============================================================== -->
+  - description: 12h format with AM/PM segment
+    html: <aui-time-field value="14:30" format="12h"></aui-time-field>
+  - description: 12h morning time
+    html: |-
+      <aui-time-field value="09:15" format="12h"></aui-time-field>
+
+      <!-- ===============================================================
+           EMPTY STATE
+           =============================================================== -->
+  - description: Empty time field (segments show --)
+    html: |-
+      <aui-time-field></aui-time-field>
+
+      <!-- ===============================================================
+           WITH STEP
+           =============================================================== -->
+  - description: 15-minute increment steps
+    html: <aui-time-field value="09:00" step="15"></aui-time-field>
+  - description: 5-minute increments
+    html: |-
+      <aui-time-field value="12:00" step="5"></aui-time-field>
 
-  - html: <aui-time-field value="02:30" format="12h"></aui-time-field>
-    description: 12h format with AM/PM.
+      <!-- ===============================================================
+           DISABLED
+           =============================================================== -->
+  - description: Disabled time field
+    html: |-
+      <aui-time-field value="14:30" disabled></aui-time-field>
 
-  - html: <aui-time-field value="09:00" step="15"></aui-time-field>
-    description: 15-minute increments.
+      <!-- ===============================================================
+           IN FORM FIELD
+           =============================================================== -->
+  - description: Time field inside aui-field with label
+    html: |-
+      <aui-field label="Meeting Time">
+        <aui-time-field value="10:00"></aui-time-field>
+      </aui-field>
+  - description: 12h time field in form
+    html: |-
+      <aui-field label="Alarm">
+        <aui-time-field value="07:30" format="12h"></aui-time-field>
+      </aui-field>
 
-  - html: <aui-time-field value="14:30" disabled></aui-time-field>
-    description: Disabled time field.
+      <!-- ===============================================================
+           ROW -- multiple time fields
+           =============================================================== -->
+  - description: Start and end time fields
+    html: |-
+      <aui-stack direction="row" gap="3">
+        <aui-field label="Start">
+          <aui-time-field value="09:00"></aui-time-field>
+        </aui-field>
+        <aui-field label="End">
+          <aui-time-field value="17:00"></aui-time-field>
+        </aui-field>
+      </aui-stack>

package/dist/docs/components/toast.yaml

@@ -2,49 +2,37 @@ 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).
-
+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).
-
 tokens:
   - name: --aui-toast-font-family
     default: var(--aui-font-family)
@@ -56,7 +44,7 @@ tokens:
     default: var(--aui-ink)
     description: Text color of the toast.
   - name: --aui-toast-background
-    default: var(--aui-card, var(--aui-doc, #fff))
+    default: var(--aui-card, var(--aui-doc,
     description: Background color of the toast.
   - name: --aui-toast-border
     default: var(--aui-border-muted, oklch(0.8 0 0))
@@ -97,19 +85,14 @@ tokens:
   - name: --aui-toast-intent-danger
     default: var(--aui-danger, oklch(0.6 0.2 25))
     description: Accent color for danger intent toasts.
-
 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).
+  - description: Success toast
+    html: <aui-toast open message="Item saved successfully" success duration="0"></aui-toast>
+  - description: Info toast
+    html: <aui-toast open message="New version available" info duration="0"></aui-toast>
+  - description: Warning toast
+    html: <aui-toast open message="Storage almost full" warning duration="0"></aui-toast>
+  - description: Danger toast with close button
+    html: <aui-toast open message="Failed to delete item" danger duration="0" closeable></aui-toast>
+  - description: Default toast (no intent)
+    html: <aui-toast open message="Default toast with no intent" duration="0"></aui-toast>

package/dist/docs/components/tooltip.yaml

@@ -2,55 +2,39 @@ name: aui-tooltip
 tag: aui-tooltip
 type: component
 summary: Hover/focus tooltip with popover-based positioning.
-description: >
-  A lightweight tooltip that appears on hover or focus of its anchor
-  element. Uses the Popover API for top-layer rendering and CSS
-  anchor positioning for placement. The anchor is auto-discovered
-  as the previous sibling element.
-
+description: |
+  A lightweight tooltip that appears on hover or focus of its anchor element. Uses the Popover API for top-layer rendering and CSS anchor positioning for placement. The anchor is auto-discovered as the previous sibling element.
 base: AgentElement
-
-# ── Component attributes ──────────────────────────────────
-
 attributes:
   content:
     syntax: key-value
     type: string
     default: ""
-    description: >
+    description: |
       The text content displayed inside the tooltip.
-
   position:
     syntax: key-value
     type: enum
-    values: [top, bottom, left, right]
+    values:
+      - top
+      - bottom
+      - left
+      - right
     default: top
-    description: >
-      Preferred placement relative to the anchor element.
-      Uses CSS anchor positioning for layout.
-
-# ── Content model ─────────────────────────────────────────
-
+    description: |
+      Preferred placement relative to the anchor element. Uses CSS anchor positioning for layout.
 content:
   model: empty
   accepts: []
   required: false
-  description: >
-    Content is set via the content attribute. The tooltip
-    stamps its own popover surface internally.
-
-# ── Composition ───────────────────────────────────────────
-
+  description: |
+    Content is set via the content attribute. The tooltip stamps its own popover surface internally.
 composition:
-  parents: [any]
+  parents:
+    - any
   children: null
-  context: >
-    Place as a sibling immediately after the element you want
-    to annotate. The tooltip auto-discovers the previous sibling
-    as its anchor. Works with any interactive element.
-
-# ── Accessibility ─────────────────────────────────────────
-
+  context: |
+    Place as a sibling immediately after the element you want to annotate. The tooltip auto-discovers the previous sibling as its anchor. Works with any interactive element.
 a11y:
   role: tooltip (on the popover surface)
   aria:
@@ -58,12 +42,8 @@ a11y:
   keyboard:
     Escape: Dismisses the tooltip.
   focus:
-    description: >
-      Tooltip appears on focusin and disappears on focusout
-      of the anchor element.
-
-# ── CSS tokens consumed ──────────────────────────────────
-
+    description: |
+      Tooltip appears on focusin and disappears on focusout of the anchor element.
 tokens:
   - name: --aui-tooltip-padding
     default: 0.375rem 0.625rem
@@ -89,23 +69,50 @@ tokens:
   - name: --aui-tooltip-offset
     default: 0.375rem
     description: Distance between tooltip and its anchor element.
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: |
+  - description: Tooltip on an hide-label button
+    html: |-
       <aui-button hide-label ghost label="Settings">
         <aui-icon name="gear" slot="leading"></aui-icon>
       </aui-button>
       <aui-tooltip content="Settings" position="bottom"></aui-tooltip>
-    description: Tooltip on an hide-label button.
-
-  - html: |
+  - description: Tooltip with keyboard shortcut hint
+    html: |-
       <aui-button primary accent>Save</aui-button>
       <aui-tooltip content="Save your changes (⌘S)"></aui-tooltip>
-    description: Tooltip with keyboard shortcut hint.
-
-  - html: |
+  - description: Tooltip positioned to the right of an icon
+    html: |-
       <aui-icon name="info" label="Info"></aui-icon>
       <aui-tooltip content="More information" position="right"></aui-tooltip>
-    description: Tooltip positioned to the right of an icon.
+  - description: Tooltip positioned to the top (default)
+    html: |-
+      <aui-button>Hover me</aui-button>
+      <aui-tooltip content="Top tooltip (default)" position="top"></aui-tooltip>
+  - description: Tooltip positioned to the bottom
+    html: |-
+      <aui-button>Hover me</aui-button>
+      <aui-tooltip content="Bottom tooltip" position="bottom"></aui-tooltip>
+  - description: Tooltip positioned to the left
+    html: |-
+      <aui-button>Hover me</aui-button>
+      <aui-tooltip content="Left tooltip" position="left"></aui-tooltip>
+  - description: Long text tooltip that wraps across multiple lines
+    html: |-
+      <aui-button>Terms</aui-button>
+      <aui-tooltip content="By continuing you agree to the Terms of Service, Privacy Policy, and acknowledge that your data may be processed in accordance with applicable regulations." position="top"></aui-tooltip>
+  - description: Tooltip on an icon-only button with ghost style
+    html: |-
+      <aui-button hide-label ghost label="Delete">
+        <aui-icon name="trash" slot="leading"></aui-icon>
+      </aui-button>
+      <aui-tooltip content="Delete item" position="bottom"></aui-tooltip>
+  - description: Tooltip on an icon-only button showing a keyboard shortcut
+    html: |-
+      <aui-button hide-label ghost label="Undo">
+        <aui-icon name="arrow-counter-clockwise" slot="leading"></aui-icon>
+      </aui-button>
+      <aui-tooltip content="Undo (⌘Z)" position="bottom"></aui-tooltip>
+  - description: Tooltip with keyboard shortcut hint on a text button
+    html: |-
+      <aui-button primary>New file</aui-button>
+      <aui-tooltip content="Create a new file (⌘N)" position="top"></aui-tooltip>

package/dist/docs/components/tree-item.yaml

@@ -26,13 +26,13 @@ a11y:
     ArrowRight: Expand (if collapsed).
     ArrowLeft: Collapse (if expanded).
 composition:
-  parents: [aui-tree, aui-tree-item]
-  children: [aui-tree-item]
-description: >
-  A tree node that supports expand/collapse and arbitrary nesting.
-  The caret indicator uses aui-icon name="caret-right" (rotated when
-  expanded) and is automatically stamped by the component.
-
+  parents:
+    - aui-tree
+    - aui-tree-item
+  children:
+    - aui-tree-item
+description: |
+  A tree node that supports expand/collapse and arbitrary nesting. The caret indicator uses aui-icon name="caret-right" (rotated when expanded) and is automatically stamped by the component.
 tokens:
   - name: --aui-tree-item-gap
     default: var(--aui-pad-gap-control)
@@ -79,9 +79,9 @@ tokens:
   - name: --aui-tree-item-color-disabled
     default: var(--aui-ink-disabled, var(--aui-ink-muted))
     description: Text color when disabled.
-
 examples:
-  - html: |
+  - description: Standalone tree-item usage within a tree
+    html: |-
       <aui-tree>
         <aui-tree-item expanded>
           <span data-trigger>Parent node</span>
@@ -90,4 +90,3 @@ examples:
           <aui-tree-item disabled><span data-trigger>Child C (disabled)</span></aui-tree-item>
         </aui-tree-item>
       </aui-tree>
-    description: Tree with expanded parent and child items showing selected and disabled states.

package/dist/docs/components/tree.yaml

@@ -9,8 +9,10 @@ a11y:
     ArrowDown: Focus next visible item.
     ArrowUp: Focus previous visible item.
 composition:
-  parents: [any]
-  children: [aui-tree-item]
+  parents:
+    - any
+  children:
+    - aui-tree-item
 tokens:
   - name: --aui-tree-font-family
     default: var(--aui-font-family)
@@ -18,18 +20,133 @@ tokens:
   - name: --aui-tree-font-size
     default: var(--aui-font-size)
     description: Font size for tree item text.
-
 examples:
-  - html: |
+  - description: 3-level deep nested tree (project file structure)
+    html: |-
       <aui-tree>
         <aui-tree-item expanded>
-          <span data-trigger>Documents</span>
-          <aui-tree-item><span data-trigger>report.pdf</span></aui-tree-item>
-          <aui-tree-item><span data-trigger>notes.txt</span></aui-tree-item>
+          <span data-trigger>src</span>
+          <aui-tree-item expanded>
+            <span data-trigger>components</span>
+            <aui-tree-item><span data-trigger>button.ts</span></aui-tree-item>
+            <aui-tree-item><span data-trigger>dialog.ts</span></aui-tree-item>
+            <aui-tree-item><span data-trigger>input.ts</span></aui-tree-item>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger>styles</span>
+            <aui-tree-item><span data-trigger>tokens.css</span></aui-tree-item>
+            <aui-tree-item><span data-trigger>reset.css</span></aui-tree-item>
+          </aui-tree-item>
+          <aui-tree-item><span data-trigger>index.ts</span></aui-tree-item>
         </aui-tree-item>
         <aui-tree-item>
-          <span data-trigger>Images</span>
-          <aui-tree-item><span data-trigger>photo.jpg</span></aui-tree-item>
+          <span data-trigger>tests</span>
+          <aui-tree-item><span data-trigger>button.test.ts</span></aui-tree-item>
+          <aui-tree-item><span data-trigger>dialog.test.ts</span></aui-tree-item>
+        </aui-tree-item>
+        <aui-tree-item><span data-trigger>package.json</span></aui-tree-item>
+        <aui-tree-item><span data-trigger>tsconfig.json</span></aui-tree-item>
+      </aui-tree>
+  - description: Tree with mixed expanded and collapsed states
+    html: |-
+      <aui-tree>
+        <aui-tree-item expanded>
+          <span data-trigger>Application</span>
+          <aui-tree-item expanded>
+            <span data-trigger>Pages</span>
+            <aui-tree-item><span data-trigger>Home</span></aui-tree-item>
+            <aui-tree-item selected><span data-trigger>Dashboard</span></aui-tree-item>
+            <aui-tree-item><span data-trigger>Settings</span></aui-tree-item>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger>API Routes</span>
+            <aui-tree-item><span data-trigger>auth.ts</span></aui-tree-item>
+            <aui-tree-item><span data-trigger>users.ts</span></aui-tree-item>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger>Middleware</span>
+            <aui-tree-item><span data-trigger>cors.ts</span></aui-tree-item>
+          </aui-tree-item>
+        </aui-tree-item>
+      </aui-tree>
+  - description: Tree with icons (folder and file icons)
+    html: |-
+      <aui-tree>
+        <aui-tree-item expanded>
+          <span data-trigger><aui-icon name="star"></aui-icon> Favorites</span>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="file-text"></aui-icon> README.md</span>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="file-text"></aui-icon> design-spec.md</span>
+          </aui-tree-item>
+        </aui-tree-item>
+        <aui-tree-item expanded>
+          <span data-trigger><aui-icon name="gear"></aui-icon> Config</span>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="file-text"></aui-icon> tsconfig.json</span>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="file-text"></aui-icon> vite.config.ts</span>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="file-text"></aui-icon> package.json</span>
+          </aui-tree-item>
+        </aui-tree-item>
+        <aui-tree-item>
+          <span data-trigger><aui-icon name="image"></aui-icon> Assets</span>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="image"></aui-icon> logo.svg</span>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="image"></aui-icon> banner.png</span>
+          </aui-tree-item>
+        </aui-tree-item>
+      </aui-tree>
+  - description: Selectable tree items with pre-selected node
+    html: |-
+      <aui-tree>
+        <aui-tree-item expanded>
+          <span data-trigger>Navigation</span>
+          <aui-tree-item selected><span data-trigger>Home</span></aui-tree-item>
+          <aui-tree-item><span data-trigger>About</span></aui-tree-item>
+          <aui-tree-item><span data-trigger>Contact</span></aui-tree-item>
+        </aui-tree-item>
+        <aui-tree-item expanded>
+          <span data-trigger>Account</span>
+          <aui-tree-item><span data-trigger>Profile</span></aui-tree-item>
+          <aui-tree-item><span data-trigger>Settings</span></aui-tree-item>
+          <aui-tree-item disabled><span data-trigger>Admin Panel</span></aui-tree-item>
+        </aui-tree-item>
+      </aui-tree>
+  - description: Deep 3-level tree with icons and selection
+    html: |-
+      <aui-tree>
+        <aui-tree-item expanded>
+          <span data-trigger><aui-icon name="house"></aui-icon> Workspace</span>
+          <aui-tree-item expanded>
+            <span data-trigger><aui-icon name="envelope"></aui-icon> Inbox</span>
+            <aui-tree-item selected>
+              <span data-trigger><aui-icon name="star"></aui-icon> Starred</span>
+            </aui-tree-item>
+            <aui-tree-item>
+              <span data-trigger><aui-icon name="clock"></aui-icon> Snoozed</span>
+            </aui-tree-item>
+            <aui-tree-item>
+              <span data-trigger><aui-icon name="check"></aui-icon> Done</span>
+            </aui-tree-item>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="pencil"></aui-icon> Drafts</span>
+            <aui-tree-item>
+              <span data-trigger><aui-icon name="file-text"></aui-icon> Weekly update</span>
+            </aui-tree-item>
+            <aui-tree-item>
+              <span data-trigger><aui-icon name="file-text"></aui-icon> Proposal v2</span>
+            </aui-tree-item>
+          </aui-tree-item>
+          <aui-tree-item>
+            <span data-trigger><aui-icon name="warning"></aui-icon> Spam</span>
+          </aui-tree-item>
         </aui-tree-item>
       </aui-tree>
-    description: File tree with nested folders.

package/dist/docs/components/wrap.yaml

@@ -0,0 +1,60 @@
+name: aui-wrap
+tag: aui-wrap
+type: element
+summary: Inline flex container with wrapping for flowing layouts.
+description: |
+  A CSS-only flex container that wraps children into multiple rows (or columns with direction="vertical"). Useful for tag lists, chip groups, button sets, and any flowing inline content. Gap and padding are controlled via global layout utility attributes from tokens.css. No JavaScript required.
+presentational:
+  direction:
+    syntax: key-value
+    type: enum
+    values:
+      - vertical
+    default: null
+    description: |
+      Layout direction. Horizontal (row) is the default — no attribute needed. Set direction="vertical" for column wrapping.
+tokens:
+  layout:
+    - gap (via layout utility attributes)
+    - padding (via layout utility attributes)
+examples:
+  - description: Horizontal wrap with small gap
+    html: |-
+      <aui-wrap gap="2">
+        <aui-badge>Alpha</aui-badge>
+        <aui-badge>Bravo</aui-badge>
+        <aui-badge>Charlie</aui-badge>
+        <aui-badge>Delta</aui-badge>
+        <aui-badge>Echo</aui-badge>
+        <aui-badge>Foxtrot</aui-badge>
+      </aui-wrap>
+  - description: Medium gap with accent badges
+    html: |-
+      <aui-wrap gap="3">
+        <aui-badge accent>React</aui-badge>
+        <aui-badge accent>TypeScript</aui-badge>
+        <aui-badge accent>Node.js</aui-badge>
+        <aui-badge accent>CSS</aui-badge>
+        <aui-badge accent>GraphQL</aui-badge>
+        <aui-badge accent>Figma</aui-badge>
+        <aui-badge accent>Rust</aui-badge>
+        <aui-badge accent>Go</aui-badge>
+      </aui-wrap>
+  - description: Large gap with text items
+    html: |-
+      <aui-wrap gap="4">
+        <aui-text size="sm" muted>Design</aui-text>
+        <aui-text size="sm" muted>Develop</aui-text>
+        <aui-text size="sm" muted>Test</aui-text>
+        <aui-text size="sm" muted>Deploy</aui-text>
+        <aui-text size="sm" muted>Monitor</aui-text>
+      </aui-wrap>
+  - description: Vertical wrapping direction
+    html: |-
+      <aui-wrap gap="2" direction="vertical" style="height: 6rem;">
+        <aui-badge>Row 1</aui-badge>
+        <aui-badge>Row 2</aui-badge>
+        <aui-badge>Row 3</aui-badge>
+        <aui-badge>Row 4</aui-badge>
+        <aui-badge>Row 5</aui-badge>
+      </aui-wrap>