@adia-ai/web-components 0.0.1 → 0.0.3

package/components/segment/segment.js

@@ -3,7 +3,7 @@
  * Child of segmented-ui. Represents one option.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSegment extends AdiaElement {
   static properties = {

package/components/segmented/segmented.css

@@ -11,7 +11,7 @@
     /* ── Colors ── */
     --segmented-bg:               var(--a-ui-bg);
     --segmented-border:           transparent;
-    --segmented-indicator-bg:     white;
+    --segmented-indicator-bg:     var(--a-chrome-light);
     --segmented-indicator-shadow: var(--a-shadow-sm);
     --segmented-indicator-radius: calc(var(--segmented-radius) - var(--segmented-inset));
 

package/components/segmented/segmented.js

@@ -9,7 +9,7 @@
  * Indicator uses CSS transform (GPU-accelerated).
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 import '@components/segment/segment.js';
 
 class AdiaSegmented extends AdiaFormElement {

package/components/select/select.a2ui.json

@@ -31,6 +31,11 @@
       "type": "boolean",
       "default": false
     },
+    "divider": {
+      "description": "Reserved attribute on a select option that renders as a visual divider instead of a selectable row.",
+      "type": "boolean",
+      "default": false
+    },
     "error": {
       "description": "Validation error message",
       "type": "string",

package/components/select/select.js

@@ -1,5 +1,5 @@
-import { AdiaFormElement } from '@core/form.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -26,6 +26,7 @@ class AdiaSelect extends AdiaFormElement {
   #anchorCleanup = null;
   #query = '';
   #searchInput = null;
+  #rafId = null;
 
   #onSearchFocus = () => { if (!this.disabled) this.open = true; };
   #onSearchClick = (e) => { e.stopPropagation(); if (!this.disabled) this.open = true; };
@@ -147,13 +148,18 @@ class AdiaSelect extends AdiaFormElement {
         placement: this.getAttribute('placement') || 'bottom-start', gap: 4, matchWidth: false,
       });
       // Dismiss on outside click (next frame so current click doesn't trigger it)
-      requestAnimationFrame(() => {
+      this.#rafId = requestAnimationFrame(() => {
+        this.#rafId = null;
         document.addEventListener('pointerdown', this.#onOutside, { once: true });
       });
     } else {
       this.#anchorCleanup?.();
       this.#anchorCleanup = null;
       this.#listbox?.hidePopover?.();
+      if (this.#rafId != null) {
+        cancelAnimationFrame(this.#rafId);
+        this.#rafId = null;
+      }
       document.removeEventListener('pointerdown', this.#onOutside);
     }
   }
@@ -370,6 +376,10 @@ class AdiaSelect extends AdiaFormElement {
     super.disconnected();
     this.removeEventListener('click', this.#onClick);
     this.removeEventListener('keydown', this.#onKey);
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
     document.removeEventListener('pointerdown', this.#onOutside);
     if (this.#searchInput) {
       this.#searchInput.removeEventListener('input', this.#onSearchInput);

package/components/select/select.yaml

@@ -31,6 +31,11 @@ props:
     type: boolean
     default: false
     reflect: true
+  divider:
+    description: Reserved attribute on a select option that renders as a visual divider instead of a selectable row.
+    type: boolean
+    default: false
+    reflect: true
   error:
     description: Validation error message
     type: string

package/components/skeleton/skeleton.a2ui.json

@@ -38,17 +38,6 @@
       "type": "boolean",
       "default": false
     },
-    "variant": {
-      "description": "Visual preset — text-line, circle (avatar), rect (card), image (aspect box).",
-      "type": "string",
-      "enum": [
-        "text",
-        "circle",
-        "rect",
-        "image"
-      ],
-      "default": "rect"
-    },
     "width": {
       "description": "Width of the placeholder.",
       "type": "string",

package/components/skeleton/skeleton.js

@@ -11,7 +11,7 @@
  * Radius: none, sm (default), md, lg, full
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSkeleton extends AdiaElement {
   static properties = {

package/components/skeleton/skeleton.yaml

@@ -26,11 +26,6 @@ props:
     description: When true, suppress the shimmer animation.
     type: boolean
     default: false
-  variant:
-    description: Visual preset — text-line, circle (avatar), rect (card), image (aspect box).
-    type: string
-    default: rect
-    enum: [text, circle, rect, image]
   width:
     description: Width of the placeholder.
     type: string

package/components/slider/slider.a2ui.json

@@ -51,11 +51,6 @@
       "type": "string",
       "default": ""
     },
-    "showValue": {
-      "description": "Displays current value below the slider",
-      "type": "boolean",
-      "default": false
-    },
     "step": {
       "description": "Step increment between values",
       "type": "number",

package/components/slider/slider.js

@@ -6,7 +6,7 @@
  *   [====fill====●─────────────────track──────]
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaSlider extends AdiaFormElement {
   static properties = {

package/components/slider/slider.yaml

@@ -39,11 +39,6 @@ props:
     description: Minimum slider value
     type: number
     default: 0
-  showValue:
-    description: Displays current value below the slider
-    type: boolean
-    default: false
-    attribute: show-value
   step:
     description: Step increment between values
     type: number

package/components/stack/stack.js

@@ -5,7 +5,7 @@
  * <stack-ui align="center">...</stack-ui>
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStack extends AdiaElement {
   static properties = {

package/components/stat/stat.js

@@ -8,7 +8,7 @@
  * Trend: up, down, neutral (colors the change badge accordingly)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStat extends AdiaElement {
   static properties = {

package/components/stepper/stepper.js

@@ -20,7 +20,7 @@
  *   orientation — horizontal (default) | vertical
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStepper extends AdiaElement {
   static properties = {

package/components/stream/stream.js

@@ -18,7 +18,7 @@
  *   stream-error  — stream error (detail: { error })
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaStream extends AdiaElement {
   static properties = {

package/components/swiper/swiper.a2ui.json

@@ -36,20 +36,20 @@
       "type": "boolean",
       "default": false
     },
+    "noPauseOnHover": {
+      "description": "Suppress the default pause-on-hover/focus behavior for autoplay.",
+      "type": "boolean",
+      "default": false
+    },
     "peek": {
       "description": "Show peek of adjacent slides",
       "type": "boolean",
       "default": false
     },
-    "slides-per-view": {
-      "description": "Number of visible slides",
-      "type": "string",
-      "default": ""
-    },
     "slidesPerView": {
-      "description": "Number of slides visible at once. Accepts \"1\", \"2\", \"3\", or \"auto\".",
+      "description": "Number of slides visible at once. Accepts \"1\", \"2\", \"3\", or \"auto\". Empty = CSS default (single slide).",
       "type": "string",
-      "default": "1"
+      "default": ""
     },
     "snap": {
       "description": "Scroll-snap alignment — start, center, end, or none.",

package/components/swiper/swiper.js

@@ -20,7 +20,7 @@
  *   autoplay-resume
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSwiper extends AdiaElement {
   static properties = {
@@ -31,7 +31,7 @@ class AdiaSwiper extends AdiaElement {
     peek:              { type: Boolean, default: false, reflect: true },
     snap:              { type: String,  default: 'start', reflect: true },
     gap:               { type: String,  default: '',    reflect: true },
-    'slides-per-view': { type: String,  default: '',    reflect: true },
+    slidesPerView:     { type: String,  default: '',    reflect: true, attribute: 'slides-per-view' },
   };
 
   static template = () => null;

package/components/swiper/swiper.yaml

@@ -13,9 +13,9 @@ props:
     type: boolean
     default: false
   slidesPerView:
-    description: Number of slides visible at once. Accepts "1", "2", "3", or "auto".
+    description: Number of slides visible at once. Accepts "1", "2", "3", or "auto". Empty = CSS default (single slide).
     type: string
-    default: "1"
+    default: ""
     attribute: slides-per-view
   snap:
     description: Scroll-snap alignment — start, center, end, or none.
@@ -34,14 +34,16 @@ props:
     description: Infinite loop
     type: boolean
     default: false
+  noPauseOnHover:
+    description: Suppress the default pause-on-hover/focus behavior for autoplay.
+    type: boolean
+    default: false
+    reflect: true
+    attribute: no-pause-on-hover
   peek:
     description: Show peek of adjacent slides
     type: boolean
     default: false
-  slides-per-view:
-    description: Number of visible slides
-    type: string
-    default: ""
 events:
   autoplay-pause:
     description: "Fired on autoplay-pause."

package/components/switch/switch.css

@@ -35,7 +35,7 @@
     --switch-thumb-inset:          2px;
     --switch-thumb-size:           calc(var(--a-toggle-size) - 2 * var(--switch-thumb-inset) - 2px); /* -2px for 1px border each side */
     --switch-thumb-bg:             var(--a-fg-muted);
-    --switch-thumb-bg-checked:     white;
+    --switch-thumb-bg-checked:     var(--a-chrome-light);
     --switch-thumb-travel:         calc(var(--switch-track-width) - var(--switch-thumb-size) - 2 * var(--switch-thumb-inset) - 2px);
 
     /* ── State: disabled ── */

package/components/switch/switch.js

@@ -3,8 +3,8 @@
  * Pure CSS track + thumb, no native <input>.
  */
 
-import { AdiaFormElement } from '@core/form.js';
-import { html } from '@core/element.js';
+import { AdiaFormElement } from '../../core/form.js';
+import { html } from '../../core/element.js';
 
 class AdiaSwitch extends AdiaFormElement {
   static properties = {

package/components/table/table.js

@@ -36,7 +36,7 @@
  *   cell-click — { detail: { key, row, value, dataIndex } }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 import { cellTypes, sortFns } from './cell-types.js';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────

package/components/tabs/tab.js

@@ -7,7 +7,7 @@
  * The tab button is rendered by the parent tabs-ui, not by tab-ui itself.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaTab extends AdiaElement {
   static properties = {

package/components/tabs/tabs.js

@@ -14,7 +14,7 @@
  *   ArrowLeft / ArrowRight to navigate tabs
  */
 
-import { AdiaElement, html } from '@core/element.js';
+import { AdiaElement, html } from '../../core/element.js';
 import '@components/tabs/tab.js';
 
 class AdiaTabs extends AdiaElement {

package/components/tag/tag.a2ui.json

@@ -21,11 +21,6 @@
       "type": "boolean",
       "default": false
     },
-    "dismissible": {
-      "description": "Alias for `removable`; accepted for back-compat.",
-      "type": "boolean",
-      "default": false
-    },
     "removable": {
       "description": "Shows a dismiss button that fires the remove event.",
       "type": "boolean",

package/components/tag/tag.js

@@ -11,7 +11,7 @@
  *   remove — { detail: { text, value } } fired when dismiss is clicked
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaTag extends AdiaElement {
   static properties = {

package/components/tag/tag.yaml

@@ -17,10 +17,6 @@ props:
     description: Shows a dismiss button that fires the remove event.
     type: boolean
     default: false
-  dismissible:
-    description: Alias for `removable`; accepted for back-compat.
-    type: boolean
-    default: false
   size:
     description: Size preset controlling font-size and padding.
     type: string

package/components/text/text.a2ui.json

@@ -25,6 +25,11 @@
       "description": "Display text content. The main payload field for Text components extracted from HTML.",
       "$ref": "common_types.json#/$defs/DynamicString"
     },
+    "truncate": {
+      "description": "Single-line truncation with ellipsis. Ignored when `lines` is set.",
+      "type": "boolean",
+      "default": false
+    },
     "variant": {
       "description": "Typography variant — sets role tokens (size/weight/tracking/color).",
       "type": "string",

package/components/text/text.css

@@ -1,4 +1,5 @@
-  :where(text-ui) {
+@scope (text-ui) {
+  :where(:scope) {
     /* ── Tokens (body defaults) ── */
     --text-family:    var(--a-body-family);
     --text-weight:    var(--a-weight);
@@ -10,7 +11,6 @@
     --text-color:     var(--a-fg);
     --text-color-strong:     var(--a-fg-strong);
   }
-@scope (text-ui) {
 
   :scope {
     box-sizing: border-box;

package/components/text/text.js

@@ -11,7 +11,7 @@
  *   lines    — multi-line clamp count (0 = no clamp)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaText extends AdiaElement {
   static properties = {

package/components/text/text.yaml

@@ -12,6 +12,11 @@ props:
     description: Multi-line clamp count (0 = no clamp)
     type: number
     default: 0
+  truncate:
+    description: Single-line truncation with ellipsis. Ignored when `lines` is set.
+    type: boolean
+    default: false
+    reflect: true
   textContent:
     description: Display text content. The main payload field for Text components extracted from HTML.
     type: string

package/components/textarea/textarea.js

@@ -4,7 +4,7 @@
  * No native <textarea> inside.
  */
 
-import { AdiaFormElement } from '@core/form.js';
+import { AdiaFormElement } from '../../core/form.js';
 
 class AdiaTextarea extends AdiaFormElement {
   static properties = {

package/components/timeline/timeline.a2ui.json

@@ -16,15 +16,6 @@
     "component": {
       "const": "Timeline"
     },
-    "mode": {
-      "description": "Display mode",
-      "type": "string",
-      "enum": [
-        "timeline",
-        "steps"
-      ],
-      "default": "timeline"
-    },
     "orientation": {
       "description": "Layout direction",
       "type": "string",
@@ -34,10 +25,14 @@
       ],
       "default": "vertical"
     },
-    "step": {
-      "description": "Current step index (steps mode)",
-      "type": "number",
-      "default": 0
+    "size": {
+      "description": "Rail size preset — use `sm` for agent-reasoning/pipeline views; `md` is the default.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md"
+      ],
+      "default": "md"
     }
   },
   "required": [

package/components/timeline/timeline.js

@@ -40,7 +40,7 @@
  *   .outcomes = string[]    // renders an expandable sub-list under the row
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 // ── Container ──────────────────────────────────────────────────
 

package/components/timeline/timeline.yaml

@@ -8,13 +8,6 @@ category: display
 version: 1
 description: "Timeline and step wizard. Two modes: timeline (per-item state) and steps (parent-driven)."
 props:
-  mode:
-    description: Display mode
-    type: string
-    default: timeline
-    enum:
-      - timeline
-      - steps
   orientation:
     description: Layout direction
     type: string
@@ -22,10 +15,12 @@ props:
     enum:
       - vertical
       - horizontal
-  step:
-    description: Current step index (steps mode)
-    type: number
-    default: 0
+  size:
+    description: Rail size preset — use `sm` for agent-reasoning/pipeline views; `md` is the default.
+    type: string
+    default: md
+    reflect: true
+    enum: [sm, md]
 events: {}
 slots:
   default:

package/components/toast/toast.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "closable": {
-      "description": "When true, renders a dismiss button.",
-      "type": "boolean",
-      "default": true
-    },
     "component": {
       "const": "Toast"
     },
@@ -26,16 +21,6 @@
       "type": "number",
       "default": 4000
     },
-    "icon": {
-      "description": "Leading Phosphor icon name; when omitted, defaults from `variant` (success → check, danger → x, etc.).",
-      "type": "string",
-      "default": ""
-    },
-    "open": {
-      "description": "Controls visibility and triggers auto-dismiss timer",
-      "type": "boolean",
-      "default": false
-    },
     "position": {
       "description": "Screen position",
       "type": "string",

package/components/toast/toast.js

@@ -14,7 +14,7 @@
  *   close — fired after the toast finishes its exit animation
  */
 
-import { AdiaElement, html } from '@core/element.js';
+import { AdiaElement, html } from '../../core/element.js';
 
 class AdiaToast extends AdiaElement {
   #timer = null;

package/components/toast/toast.yaml

@@ -8,23 +8,10 @@ category: container
 version: 1
 description: Notification popup with auto-dismiss. Animated enter/exit.
 props:
-  icon:
-    description: Leading Phosphor icon name; when omitted, defaults from `variant` (success → check, danger → x, etc.).
-    type: string
-    default: ""
-  closable:
-    description: When true, renders a dismiss button.
-    type: boolean
-    default: true
   duration:
     description: Auto-dismiss time in milliseconds. 0 disables auto-dismiss.
     type: number
     default: 4000
-  open:
-    description: Controls visibility and triggers auto-dismiss timer
-    type: boolean
-    default: false
-    reflect: true
   position:
     description: Screen position
     type: string

package/components/toggle-group/toggle-group.js

@@ -12,7 +12,7 @@
  *   single — restrict to one active option at a time (default false: multi-select)
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 // ── Toggle Option ──
 //

package/components/toolbar/toolbar.a2ui.json

@@ -31,15 +31,6 @@
       "type": "string",
       "default": "sm"
     },
-    "orientation": {
-      "description": "Layout direction. Vertical mode disables overflow.",
-      "type": "string",
-      "enum": [
-        "horizontal",
-        "vertical"
-      ],
-      "default": "horizontal"
-    },
     "overflow": {
       "description": "Overflow behavior",
       "type": "string",
@@ -48,20 +39,6 @@
         "none"
       ],
       "default": "menu"
-    },
-    "variant": {
-      "description": "Visual style. Transparent removes background, border, and padding.",
-      "type": "string",
-      "enum": [
-        "",
-        "transparent"
-      ],
-      "default": ""
-    },
-    "vertical": {
-      "description": "Stack items vertically (alias for orientation=\"vertical\").",
-      "type": "boolean",
-      "default": false
     }
   },
   "required": [