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

package/dist/docs/components/index.yaml

@@ -212,10 +212,34 @@ aui-calendar:
   summary: Date picker with day, month, and year views.
   uses: [appointment booking, date-of-birth selector, event scheduler, date range filter]
 
+aui-calendar-picker:
+  summary: Compound date picker with trigger input and calendar popover.
+  uses: [date form field, booking date selector, filter bar date input, event date picker]
+  children: [aui-calendar]
+
+aui-calendar-range-picker:
+  summary: Compound date range picker with trigger input and calendar popover.
+  uses: [analytics date range filter, booking date range, reporting period selector, leave request form]
+  children: [aui-calendar]
+
 aui-noodles:
   summary: Declarative SVG noodle canvas for node-based flow editors.
   uses: [data pipeline diagram, CI/CD workflow builder, state machine editor, API integration mapper]
 
+aui-hover-card:
+  summary: Rich preview card shown on hover/focus with configurable delay.
+  uses: [user profile previews, link preview cards, rich tooltips, repository hover previews]
+
+aui-dropdown-menu:
+  summary: Trigger button + popover menu for actions (not selection).
+  uses: [table row action menus, toolbar overflow menus, card header actions, user profile menus]
+  children: [aui-option, aui-optgroup]
+
+aui-context-menu:
+  summary: Right-click triggered context menu using the Popover API.
+  uses: [data table row actions, file browser context menus, canvas right-click, list item operations]
+  children: [aui-option, aui-optgroup]
+
 aui-container:
   summary: Unified card and panel surface.
   uses: [settings form card, dashboard stat widget, profile detail panel, pricing tier card, clickable nav tile]
@@ -318,3 +342,147 @@ aui-divider:
 aui-kbd:
   summary: Keyboard shortcut indicator styled as a key cap.
   uses: [shortcut hint in tooltip, command palette key combo, documentation hotkey reference]
+
+aui-nav-item:
+  summary: Navigation list item with icon, label, badge, and active state.
+  uses: [sidebar navigation, app menu, settings nav, dashboard sidebar]
+
+aui-progress:
+  summary: Horizontal progress bar indicating completion or usage.
+  uses: [file upload progress, onboarding steps, storage usage, task completion]
+
+aui-stepper:
+  summary: Multi-step progress container with connector lines.
+  uses: [onboarding wizard, task timeline, workflow status, checkout steps]
+
+aui-step:
+  summary: Individual step within a stepper, with state-driven connector colors.
+  uses: [completed task, in-progress step, pending milestone]
+
+aui-sparkline:
+  summary: Compact inline bar chart for KPI widgets.
+  uses: [metric card trend, dashboard KPI, data table sparkline]
+
+aui-code-block:
+  summary: Code display with language header and copy button.
+  uses: [API documentation, code review, agent tool output, diff preview]
+
+aui-skeleton:
+  summary: Loading placeholder with shimmer animation.
+  uses: [avatar placeholder, text line placeholder, card loading state, list item skeleton]
+
+aui-alert:
+  summary: Contextual banner for status messages.
+  uses: [form validation error, save confirmation, system warning, inline notification]
+
+aui-link:
+  summary: Styled anchor for inline and standalone links.
+  uses: [navigation link, inline text reference, external site link, footer link]
+
+aui-spinner:
+  summary: Animated loading indicator.
+  uses: [button loading state, empty state loader, inline async feedback, page load indicator]
+
+aui-meter:
+  summary: Visual gauge for known-range scalar values.
+  uses: [disk usage bar, budget allocation, API rate limit, resource utilization]
+
+aui-chip:
+  summary: Compact pill-shaped label for tags, filters, and selected items.
+  uses: [tag input selected tags, filter bar tokens, member role labels, status indicators]
+
+aui-disclosure:
+  summary: Collapsible content section with animated expand/collapse.
+  uses: [FAQ sections, settings expandable groups, sidebar collapsible sections, form optional fields]
+
+aui-avatar-group:
+  summary: Overlapping avatar stack with automatic overflow counter.
+  uses: [contributor lists, team cards, member panels, PR reviewer display]
+
+aui-input-group:
+  summary: Wrapper that connects an input with prefix/suffix addons.
+  uses: [currency input, URL field, unit input, search with button suffix, domain configuration]
+
+aui-button-group:
+  summary: Groups buttons with shared or connected borders.
+  uses: [toolbar action groups, view mode toggles, split buttons, pagination controls, text alignment toggles]
+
+aui-fieldset:
+  summary: Groups form fields under a legend heading with consistent spacing.
+  uses: [multi-section forms, settings page groups, profile edit sections, admin config panels, wizard steps]
+
+aui-color-swatch:
+  summary: Color preview square with checkerboard transparency support.
+  uses: [color palette display, color field preview, swatch picker grid, theme color preview, saved color list]
+
+aui-progress-circle:
+  summary: Circular SVG ring progress indicator with value, size, and intent variants.
+  uses: [usage billing rings, dashboard KPI circles, upload progress, profile completion, plan limit indicators]
+
+aui-disclosure-group:
+  summary: Coordinates child disclosures with optional exclusive accordion mode.
+  uses: [FAQ accordion, settings expandable groups, sidebar collapsible sections, documentation sections]
+  children: [aui-disclosure]
+
+aui-tag-group:
+  summary: Keyboard-navigable container for aui-chip elements.
+  uses: [tag input fields, filter bars, multi-select displays, email recipient lists, category management]
+  children: [aui-chip]
+
+aui-color-area:
+  summary: 2D gradient surface for picking saturation and lightness at a given hue.
+  uses: [color picker compound, theme editor, design tool color selection, brand color configuration]
+
+aui-color-slider:
+  summary: Single-axis gradient slider for a color channel.
+  uses: [hue strip in color picker, individual channel adjustment, opacity/alpha control, HSL channel editors]
+
+aui-color-field:
+  summary: Text input for color values with inline swatch preview.
+  uses: [theme customization panels, design tool property inspectors, brand color forms, CSS variable editors]
+
+aui-color-picker:
+  summary: Compound color picker composing area, sliders, and field.
+  uses: [theme editor panels, design tool color selection, brand color configuration, settings with color customization]
+  children: [aui-color-area, aui-color-slider, aui-color-field]
+  uses: [theme customization panels, design tool property inspectors, brand color forms, CSS variable editors]
+
+aui-time-field:
+  summary: Segmented time input with independently editable hour and minute segments.
+  uses: [scheduling UIs, event creation forms, appointment booking, alarm settings, work hours configuration]
+
+aui-date-field:
+  summary: Segmented date input with independently editable month, day, and year segments.
+  uses: [inline date entry, birthdate fields, invoice date fields, expiration date entry, quick date filters]
+
+aui-file-upload:
+  summary: Drop zone with file list for drag-and-drop or click-to-browse file uploads.
+  uses: [profile image upload, document attachment, bulk CSV import, media library, message attachments]
+
+aui-copy-button:
+  summary: One-click copy button with visual check feedback.
+  uses: [code snippet copy, API key copy, URL sharing, terminal command copy, inline copy action]
+
+aui-stat:
+  summary: KPI display widget with label, value, trend arrow, and optional change text.
+  uses: [dashboard KPI card, analytics metric, revenue display, user count widget, performance indicator]
+
+aui-description-list:
+  summary: Key-value pair display using native dt/dd elements with grid layout.
+  uses: [profile detail panels, settings summaries, order detail pages, API response viewers, metadata displays]
+
+aui-image:
+  summary: Enhanced image with lazy loading, aspect ratio, fallback, and optional lightbox.
+  uses: [hero images, profile photos, gallery cards, content previews, product images]
+
+aui-carousel:
+  summary: Horizontal scrolling slides with CSS scroll-snap and navigation.
+  uses: [image galleries, feature tours, testimonial sliders, product showcases, onboarding steps]
+
+aui-notification-center:
+  summary: Persistent notification inbox with bell trigger, unread badge, and popover list.
+  uses: [app header toolbars, admin dashboard headers, SaaS app nav bars]
+
+aui-empty-state:
+  summary: Centered empty placeholder with icon, heading, description, and action slot.
+  uses: [empty tables, no-results search, first-use onboarding, empty inbox, zero-data dashboards]

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

@@ -0,0 +1,102 @@
+name: aui-input-group
+tag: aui-input-group
+type: element
+summary: Wrapper that connects an input with prefix and/or suffix addons.
+description: |
+  CSS-only wrapper that shares a unified border treatment between an input and its prefix/suffix addons. Use for currency fields, URL inputs, unit inputs, and search fields with button suffixes.
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: false
+    default: md
+    values:
+      - sm
+      - md
+      - lg
+    description: Matches size to child input.
+modifiers:
+  disabled:
+    syntax: boolean
+    description: |
+      Dims the entire group and disables pointer events.
+content:
+  model: flow
+  accepts:
+    - aui-input
+    - span
+    - aui-button
+  required: true
+  description: |
+    Must contain an aui-input. May include span[slot="prefix"] and/or span[slot="suffix"] for addon labels. Buttons can also be used as suffix addons.
+slots:
+  prefix:
+    accepts:
+      - span
+      - aui-button
+    required: false
+    description: Addon before the input (e.g. currency symbol, protocol).
+  default:
+    accepts:
+      - aui-input
+    required: true
+    description: The input element.
+  suffix:
+    accepts:
+      - span
+      - aui-button
+    required: false
+    description: Addon after the input (e.g. unit, action button).
+composition:
+  parents:
+    - aui-field
+    - aui-stack
+    - aui-grid
+    - div
+  children:
+    - aui-input
+    - span
+    - aui-button
+  context: |
+    Use inside aui-field for labeled form fields. The group removes the child input's border so only the group border is visible. Focus-within highlights the entire group.
+tokens:
+  color:
+    - --aui-border
+    - --aui-surface
+    - --aui-control
+    - --aui-text-muted
+    - --aui-accent-500
+  shape:
+    - --aui-radius
+examples:
+  - description: Currency input with dollar prefix
+    html: |-
+      <aui-input-group>
+        <span slot="prefix">$</span>
+        <aui-input placeholder="0.00"></aui-input>
+      </aui-input-group>
+  - description: Domain input with suffix
+    html: |-
+      <aui-input-group>
+        <aui-input placeholder="example.com"></aui-input>
+        <span slot="suffix">.com</span>
+      </aui-input-group>
+  - description: URL input with both prefix and suffix
+    html: |-
+      <aui-input-group>
+        <span slot="prefix">https://</span>
+        <aui-input placeholder="example.com"></aui-input>
+        <span slot="suffix">/path</span>
+      </aui-input-group>
+  - description: Unit input with suffix
+    html: |-
+      <aui-input-group>
+        <aui-input placeholder="Weight"></aui-input>
+        <span slot="suffix">kg</span>
+      </aui-input-group>
+  - description: Disabled input group
+    html: |-
+      <aui-input-group disabled>
+        <span slot="prefix">$</span>
+        <aui-input placeholder="0.00"></aui-input>
+      </aui-input-group>

package/dist/docs/components/input-otp.yaml

@@ -2,38 +2,30 @@ name: aui-input-otp
 tag: aui-input-otp
 type: component
 summary: Segmented one-time password input.
-description: >
-  A multi-cell input for one-time codes. Auto-advances on entry,
-  navigates on backspace/arrows, and distributes pasted values
-  across cells. A hidden input holds the combined value for forms.
-
+description: |
+  A multi-cell input for one-time codes. Auto-advances on entry, navigates on backspace/arrows, and distributes pasted values across cells. A hidden input holds the combined value for forms.
 base: AgentElement
-
 attributes:
   length:
     syntax: key-value
     type: string
     default: "6"
     description: Number of digit cells to render.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction. Dims visually.
-
   value:
     syntax: key-value
     type: string
     default: ""
     description: Current combined value.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form field name.
-
 a11y:
   role: group
   aria:
@@ -42,7 +34,6 @@ a11y:
     ArrowLeft: Move to previous cell.
     ArrowRight: Move to next cell.
     Backspace: Clear current cell and move to previous.
-
 tokens:
   - name: --aui-input-otp-gap
     default: var(--aui-pad-gap-control)
@@ -86,18 +77,28 @@ tokens:
   - name: --aui-input-otp-border-disabled
     default: var(--aui-stroke-disabled, var(--aui-border-disabled))
     description: Cell border color when disabled.
-
 events:
   aui:complete:
     description: Fired when all cells are filled. detail.value contains the code.
-
 form:
   associated: true
   value: Combined string of all cells.
-
 examples:
-  - html: <aui-input-otp length="6"></aui-input-otp>
-    description: Default 6-digit OTP input.
-
-  - html: <aui-input-otp length="4" name="code"></aui-input-otp>
-    description: 4-digit OTP with form name.
+  - description: Default 6-digit OTP input
+    html: <aui-input-otp length="6"></aui-input-otp>
+  - description: 4-digit OTP with form name
+    html: <aui-input-otp length="4" name="code"></aui-input-otp>
+  - description: Pre-filled OTP value
+    html: <aui-input-otp length="6" value="482910"></aui-input-otp>
+  - description: Disabled OTP input
+    html: <aui-input-otp length="6" value="739201" disabled></aui-input-otp>
+  - description: OTP inside aui-field with label and description
+    html: |-
+      <aui-field label="Verification code" description="Enter the 6-digit code sent to your email.">
+        <aui-input-otp length="6" name="verification"></aui-input-otp>
+      </aui-field>
+  - description: 4-digit OTP inside aui-field with required marker
+    html: |-
+      <aui-field label="PIN code" description="4-digit code from your authenticator app." required>
+        <aui-input-otp length="4" name="pin"></aui-input-otp>
+      </aui-field>