@adia-ai/web-components 0.0.14 → 0.0.16

package/components/option-card/option-card.yaml

@@ -0,0 +1,234 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaOptionCard
+tag: option-card-ui
+component: OptionCard
+category: input
+version: 1
+description: >-
+  Selectable card with radio semantics. A "rich radio" — single-select
+  one of N where each option carries a heading, optional description,
+  and optional leading icon. Siblings sharing a `name` form a
+  radiogroup. The whole card is the click target; a CSS-rendered radio
+  circle in the top-left signals state. Form-associated, so `name=value`
+  submits with the parent form when checked.
+props:
+  name:
+    description: Form control name. Siblings sharing a name form a radiogroup.
+    type: string
+    default: ""
+  value:
+    description: Form value submitted when checked (defaults to `on` if empty).
+    type: string
+    default: ""
+  checked:
+    description: Whether this card is currently selected.
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables interaction and dims the card.
+    type: boolean
+    default: false
+    reflect: true
+  required:
+    description: Marks the radiogroup as requiring a selection for form validation.
+    type: boolean
+    default: false
+    reflect: true
+  heading:
+    description: Heading text. Stamped into a [slot="heading"] span when no slotted heading is provided.
+    type: string
+    default: ""
+    reflect: true
+  description:
+    description: Description text. Stamped into a [slot="description"] span when no slotted description is provided.
+    type: string
+    default: ""
+    reflect: true
+  icon:
+    description: Optional Phosphor icon name. Stamped as a leading <icon-ui slot="icon"> when set.
+    type: string
+    default: ""
+    reflect: true
+  layout:
+    description: >-
+      Internal layout. `default` puts the indicator on the left and the icon
+      adjacent. `tile` stacks vertically — icon top-left, indicator top-right,
+      heading + description below — for hero pickers (source / role / plan
+      tiles) where the icon is a primary brand cue.
+    type: string
+    default: default
+    enum: [default, tile]
+    reflect: true
+events:
+  change:
+    description: Fired when this card becomes selected (bubbles).
+slots:
+  heading:
+    description: Rich heading content. Overrides the `heading` attribute when present.
+  description:
+    description: Rich description content. Overrides the `description` attribute when present.
+  icon:
+    description: Custom icon element. Overrides the `icon` attribute when present.
+  default:
+    description: >-
+      Spillover content revealed only when the card is checked — typically a
+      follow-up form field (e.g. a textarea on an "Other" option, conditional
+      inputs that depend on the selection). Aligns with the heading/description
+      column; hidden via `display: none` when not checked.
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: hover
+    description: Pointer over a non-checked card.
+    selector: ":not([checked]):not([disabled]):hover"
+  - name: checked
+    description: Selected — accent border, tinted background, filled radio circle.
+    attribute: checked
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+  - name: focused
+    description: Keyboard focus ring.
+    selector: ":focus-visible"
+traits:
+  - focusable
+tokens:
+  --option-card-padding-block:
+    description: Vertical padding inside the card.
+  --option-card-padding-inline:
+    description: Horizontal padding inside the card.
+  --option-card-radius:
+    description: Card corner radius.
+  --option-card-bg:
+    description: Default background.
+  --option-card-border:
+    description: Default border color.
+  --option-card-gap-x:
+    description: Horizontal gap between indicator (and icon) and content.
+  --option-card-gap-y:
+    description: Vertical gap between heading and description.
+  --option-card-bg-hover:
+    description: Hover background (non-checked).
+  --option-card-border-hover:
+    description: Hover border color (non-checked).
+  --option-card-bg-checked:
+    description: Background when checked.
+  --option-card-border-checked:
+    description: Border color when checked.
+  --option-card-radio-size:
+    description: Diameter of the indicator circle.
+  --option-card-radio-bg:
+    description: Indicator background when not checked.
+  --option-card-radio-border:
+    description: Indicator border when not checked.
+  --option-card-radio-fill:
+    description: Indicator fill color when checked.
+  --option-card-radio-dot:
+    description: Inner dot color when checked.
+  --option-card-heading-color:
+    description: Heading text color.
+  --option-card-heading-color-checked:
+    description: Heading text color when the card is checked (defaults to `--a-fg-strong` so the selected card reads with extra emphasis on top of the bg/border state).
+  --option-card-heading-weight:
+    description: Heading font weight.
+  --option-card-heading-size:
+    description: Heading font size.
+  --option-card-desc-color:
+    description: Description text color.
+  --option-card-desc-size:
+    description: Description font size.
+  --option-card-desc-line-height:
+    description: Description line height.
+  --option-card-icon-color:
+    description: Leading icon color when the card is not checked.
+  --option-card-icon-color-checked:
+    description: Leading icon color when the card is checked.
+  --option-card-icon-size:
+    description: Leading icon size (sets `--a-icon-size` on the slotted icon-ui).
+  --option-card-disabled-opacity:
+    description: Opacity multiplier when disabled.
+  --option-card-focus-ring:
+    description: Focus ring (box-shadow value).
+  --option-card-duration:
+    description: Transition duration for hover / checked state changes.
+  --option-card-easing:
+    description: Transition easing.
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: use-case-picker
+    description: A four-option pick-one for "what brings you here" — radio-card behavior with heading + description per option.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Column",
+          "gap": "2",
+          "children": ["build", "explore", "migrate", "evaluate"]
+        },
+        {
+          "id": "build",
+          "component": "OptionCard",
+          "name": "use-case",
+          "value": "build",
+          "checked": true,
+          "heading": "I'm building a product",
+          "description": "Spinning up a new project — design, ship, iterate."
+        },
+        {
+          "id": "explore",
+          "component": "OptionCard",
+          "name": "use-case",
+          "value": "explore",
+          "heading": "I'm exploring the product",
+          "description": "Kicking the tires before bringing a team along."
+        },
+        {
+          "id": "migrate",
+          "component": "OptionCard",
+          "name": "use-case",
+          "value": "migrate",
+          "heading": "I'm migrating from another tool",
+          "description": "Moving an existing workspace and want a smooth port."
+        },
+        {
+          "id": "evaluate",
+          "component": "OptionCard",
+          "name": "use-case",
+          "value": "evaluate",
+          "heading": "I'm evaluating for my team",
+          "description": "Comparing options and want to dig into specifics."
+        }
+      ]
+keywords:
+  - option
+  - card
+  - radio
+  - select
+  - choice
+  - picker
+  - tier
+  - plan
+  - onboarding
+  - registration
+synonyms:
+  radio:
+    - option-card
+    - radio
+    - select
+  picker:
+    - option-card
+    - radio
+    - select
+  tier:
+    - option-card
+    - card
+    - plan
+related:
+  - radio
+  - card
+  - check
+  - segmented

package/components/rating/rating.a2ui.json

@@ -55,6 +55,16 @@
       "description": "Current rating value (0..max, supports 0.5 steps when allowHalf)",
       "type": "number",
       "default": 0
+    },
+    "variant": {
+      "description": "Color variant — applied via `:scope[variant=...]` selectors in CSS, no JS reflection needed",
+      "type": "string",
+      "enum": [
+        "",
+        "accent",
+        "warning"
+      ],
+      "default": ""
     }
   },
   "required": [

package/components/rating/rating.yaml

@@ -43,6 +43,14 @@ props:
     description: Current rating value (0..max, supports 0.5 steps when allowHalf)
     type: number
     default: 0
+  variant:
+    description: Color variant — applied via `:scope[variant=...]` selectors in CSS, no JS reflection needed
+    type: string
+    default: ""
+    enum:
+      - ""
+      - accent
+      - warning
 events:
   "[object Object]":
     description: "Fired on [object Object]."

package/components/segment/segment.a2ui.json

@@ -21,6 +21,11 @@
       "type": "boolean",
       "default": false
     },
+    "icon": {
+      "description": "Phosphor icon name. Rendered as a leading <icon-ui> child stamped on render.",
+      "type": "string",
+      "default": ""
+    },
     "selected": {
       "description": "Whether this segment is currently selected. Managed by the parent Segmented container; don't set multiple siblings selected.",
       "type": "boolean",

package/components/segment/segment.css

@@ -2,6 +2,7 @@
   :where(:scope) {
     /* ── Layout ── */
     --segment-px:              var(--a-ui-px);
+    --segment-gap:             var(--a-space-1);
     --segment-radius:          calc(var(--a-radius) - 2px);
 
     /* ── Typography ── */
@@ -30,6 +31,7 @@
     justify-content: center;
     align-self: stretch;
     min-width: 0;
+    gap: var(--segment-gap);
 
     padding-inline: var(--segment-px);
 

package/components/segment/segment.js

@@ -1,6 +1,9 @@
 /**
- * <segment-ui value="tab1" text="Tab 1"></segment-ui>
+ * <segment-ui value="tab1" text="Tab 1" icon="list"></segment-ui>
  * Child of segmented-ui. Represents one option.
+ *
+ * `icon=` stamps a leading <icon-ui name="…"> child on render.
+ * Mirrors the button-ui pattern.
  */
 
 import { AdiaElement } from '../../core/element.js';
@@ -9,6 +12,7 @@ class AdiaSegment extends AdiaElement {
   static properties = {
     value:    { type: String, default: '', reflect: true },
     text:     { type: String, default: '', reflect: true },
+    icon:     { type: String, default: '', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
     selected: { type: Boolean, default: false, reflect: true },
   };
@@ -25,6 +29,22 @@ class AdiaSegment extends AdiaElement {
     this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
     if (this.disabled) this.setAttribute('aria-disabled', 'true');
     else this.removeAttribute('aria-disabled');
+
+    // Stamp/refresh leading icon-ui child when [icon] is set.
+    // Mirrors button-ui's pattern (button.js:29) — author code never
+    // hand-rolls an icon-ui inside a segment.
+    if (this.icon) {
+      const existing = this.querySelector(':scope > icon-ui');
+      if (!existing || existing.getAttribute('name') !== this.icon) {
+        existing?.remove();
+        const iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('name', this.icon);
+        iconEl.setAttribute('aria-hidden', 'true');
+        this.prepend(iconEl);
+      }
+    } else {
+      this.querySelector(':scope > icon-ui')?.remove();
+    }
   }
 }
 customElements.define('segment-ui', AdiaSegment);

package/components/segment/segment.yaml

@@ -13,6 +13,11 @@ props:
     type: boolean
     default: false
     reflect: true
+  icon:
+    description: Phosphor icon name. Rendered as a leading <icon-ui> child stamped on render.
+    type: string
+    default: ""
+    reflect: true
   selected:
     description: Whether this segment is currently selected. Managed by the parent Segmented container; don't set multiple siblings selected.
     type: boolean

package/components/textarea/textarea.css

@@ -22,6 +22,7 @@
     --textarea-easing:          var(--a-easing);
 
     /* ── State ── */
+    --textarea-bg-hover:        var(--a-ui-bg-hover);
     --textarea-fg-hover:        var(--a-fg);
     --textarea-label-fg-focus:  var(--a-fg-subtle);
     --textarea-bg-disabled:     var(--a-ui-bg-disabled);
@@ -66,6 +67,7 @@
     transition: border-color var(--textarea-duration) var(--textarea-easing);
   }
   :scope:not([disabled]) [slot="text"]:hover {
+    background: var(--textarea-bg-hover);
     border-color: var(--textarea-border-hover);
     color: var(--textarea-fg-hover);
   }
@@ -89,7 +91,7 @@
 
   /* Placeholder */
   [slot="text"][data-empty]::before {
-    content: attr(aria-placeholder);
+    content: attr(data-placeholder);
     color: var(--textarea-placeholder-fg);
     pointer-events: none;
   }

package/components/textarea/textarea.js

@@ -29,7 +29,7 @@ class AdiaTextarea extends AdiaFormElement {
         ${this.label ? `<label slot="label" label="${this.label}"></label>` : ''}
         <div slot="text" contenteditable="plaintext-only" tabindex="0"
              ${this.value ? '' : 'data-empty=""'}
-             aria-placeholder="${this.placeholder}"></div>
+             data-placeholder="${this.placeholder}"></div>
       `;
     }
 
@@ -47,7 +47,7 @@ class AdiaTextarea extends AdiaFormElement {
   render() {
     if (!this.#textEl) return;
 
-    this.#textEl.setAttribute('aria-placeholder', this.placeholder);
+    this.#textEl.setAttribute('data-placeholder', this.placeholder);
 
     if (this.disabled || this.readonly) {
       this.#textEl.contentEditable = 'false';

package/components/tooltip/tooltip.js

@@ -256,6 +256,7 @@ class AdiaTooltip extends AdiaElement {
   #positionAtPointer(x, y) {
     if (!this.#popover || x == null || y == null) return;
     const gap = 12;
+    const edgePad = 8;
     const popover = this.#popover;
     popover.style.position = 'fixed';
     popover.style.left = '0';
@@ -263,10 +264,16 @@ class AdiaTooltip extends AdiaElement {
     /* Force reflow to read offset dimensions now that content changed */
     const tw = popover.offsetWidth  || 0;
     const th = popover.offsetHeight || 0;
-    let px = x + gap;
+    /* Default: centered horizontally above the cursor, gap px clear of
+       the cursor. Clamp horizontally to viewport with edgePad on each
+       side (short tooltips near the viewport edge scoot inward rather
+       than drifting off-screen). Flip vertically when there's not
+       enough room above. */
+    let px = x - tw / 2;
     let py = y - th - gap;
-    if (px + tw > window.innerWidth)  px = x - tw - gap;
-    if (py < 0)                       py = y + gap;
+    if (px < edgePad)                        px = edgePad;
+    if (px + tw > window.innerWidth - edgePad) px = window.innerWidth - tw - edgePad;
+    if (py < edgePad)                        py = y + gap;
     popover.style.left = `${px}px`;
     popover.style.top  = `${py}px`;
   }