@adia-ai/web-components 0.0.1 → 0.0.2

package/components/search/search.a2ui.json

@@ -31,11 +31,6 @@
       "type": "boolean",
       "default": false
     },
-    "icon": {
-      "description": "Leading icon name. Defaults to search (magnifying glass).",
-      "type": "string",
-      "default": "search"
-    },
     "name": {
       "description": "Form field name",
       "type": "string",

package/components/search/search.yaml

@@ -26,10 +26,6 @@ props:
     type: boolean
     default: false
     reflect: true
-  icon:
-    description: Leading icon name. Defaults to search (magnifying glass).
-    type: string
-    default: search
   placeholder:
     description: Placeholder text
     type: string

package/components/section/section.a2ui.json

@@ -70,7 +70,7 @@
       }
     ],
     "synonyms": {},
-    "tag": "section-n",
+    "tag": "section-ui",
     "tokens": {},
     "traits": [],
     "version": 1

package/components/section/section.yaml

@@ -2,7 +2,7 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: AdiaSection
-tag: section-n
+tag: section-ui
 component: Section
 category: container
 version: 1

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/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

@@ -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.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.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/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

@@ -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/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.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.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/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.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.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/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": [

package/components/toolbar/toolbar.js

@@ -48,6 +48,7 @@ class AdiaToolbar extends AdiaElement {
   #spilloverCleanup = null;
   #measuring = false;
   #reflowQueued = false;
+  #rafId = null;
 
   connected() {
     this.setAttribute('role', 'toolbar');
@@ -111,7 +112,8 @@ class AdiaToolbar extends AdiaElement {
       placement: 'bottom-end',
       gap: 4,
     });
-    requestAnimationFrame(() => {
+    this.#rafId = requestAnimationFrame(() => {
+      this.#rafId = null;
       document.addEventListener('pointerdown', this.#onOutside, true);
       document.addEventListener('keydown', this.#onKey, true);
     });
@@ -121,6 +123,10 @@ class AdiaToolbar extends AdiaElement {
     this.#spilloverCleanup?.();
     this.#spilloverCleanup = null;
     if (this.#popover?.matches(':popover-open')) this.#popover.hidePopover?.();
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
     document.removeEventListener('pointerdown', this.#onOutside, true);
     document.removeEventListener('keydown', this.#onKey, true);
   }
@@ -168,6 +174,10 @@ class AdiaToolbar extends AdiaElement {
       // Keep listeners cleaned up if closed externally.
       this.#spilloverCleanup?.();
       this.#spilloverCleanup = null;
+      if (this.#rafId != null) {
+        cancelAnimationFrame(this.#rafId);
+        this.#rafId = null;
+      }
       document.removeEventListener('pointerdown', this.#onOutside, true);
       document.removeEventListener('keydown', this.#onKey, true);
     }

package/components/toolbar/toolbar.yaml

@@ -14,11 +14,6 @@ props:
     type: boolean
     default: false
     reflect: true
-  vertical:
-    description: Stack items vertically (alias for orientation="vertical").
-    type: boolean
-    default: false
-    reflect: true
   align:
     description: Item alignment
     type: string
@@ -27,13 +22,6 @@ props:
     description: Gap between items
     type: string
     default: sm
-  orientation:
-    description: Layout direction. Vertical mode disables overflow.
-    type: string
-    default: horizontal
-    enum:
-      - horizontal
-      - vertical
   overflow:
     description: Overflow behavior
     type: string
@@ -41,13 +29,6 @@ props:
     enum:
       - menu
       - none
-  variant:
-    description: Visual style. Transparent removes background, border, and padding.
-    type: string
-    default: ""
-    enum:
-      - ""
-      - transparent
 events: {}
 slots: {}
 states:

package/components/tooltip/tooltip.a2ui.json

@@ -13,11 +13,6 @@
     }
   ],
   "properties": {
-    "anchor": {
-      "description": "ID of the anchor element that triggers the tooltip.",
-      "type": "string",
-      "default": ""
-    },
     "component": {
       "const": "Tooltip"
     },
@@ -26,11 +21,6 @@
       "type": "number",
       "default": 400
     },
-    "offset": {
-      "description": "Distance in pixels between the tooltip and the anchor element.",
-      "type": "number",
-      "default": 8
-    },
     "placement": {
       "description": "Preferred position relative to the anchor element.",
       "type": "string",

package/components/tooltip/tooltip.yaml

@@ -8,18 +8,10 @@ category: container
 version: 1
 description: Tooltip popup on hover/focus. Uses Popover API for top-layer rendering.
 props:
-  anchor:
-    description: ID of the anchor element that triggers the tooltip.
-    type: string
-    default: ""
   delay:
     description: Delay in milliseconds before showing the tooltip on hover.
     type: number
     default: 400
-  offset:
-    description: Distance in pixels between the tooltip and the anchor element.
-    type: number
-    default: 8
   placement:
     description: Preferred position relative to the anchor element.
     type: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "AdiaUI web components — vanilla custom elements + A2UI runtime. Training corpus lives in @adia-ai/gen-ui-training.",
   "type": "module",
   "exports": {

package/patterns/adia-chat/css/adia-chat.streaming.css

@@ -10,10 +10,10 @@ adia-chat-ui [data-cursor] {
   background: var(--chat-cursor-color);
   margin-inline-start: 1px;
   vertical-align: text-bottom;
-  animation: adia-chat-n-blink var(--chat-cursor-speed) step-end infinite;
+  animation: adia-chat-blink var(--chat-cursor-speed) step-end infinite;
 }
 
-@keyframes adia-chat-n-blink {
+@keyframes adia-chat-blink {
   50% { opacity: 0; }
 }
 

package/patterns/gen-ui/gen-ui.css

@@ -37,7 +37,7 @@
     grid-template-columns: minmax(320px, 1fr) 1.5fr;
   }
 
-  :scope[mode="split"] > thread-n {
+  :scope[mode="split"] > chat-ui {
     border-right:        var(--a-border-thin) solid var(--a-canvas-border-subtle);
   }
 
@@ -49,7 +49,7 @@
     grid-template-columns: 1fr;
   }
 
-  :scope[mode="canvas"] > thread-n {
+  :scope[mode="canvas"] > chat-ui {
     display:             none;
   }
 
@@ -74,7 +74,7 @@
      CHILDREN — fill grid cells
      ═══════════════════════════════════════════════════════ */
 
-  :scope > thread-n,
+  :scope > chat-ui,
   :scope > canvas-ui,
   :scope > inspector-ui {
     min-height:          0;