@adia-ai/web-components 0.0.15 → 0.0.17

package/components/icon/icon.css

@@ -17,4 +17,20 @@
     width: 100%;
     height: 100%;
   }
+
+  /* ── Named size scale ─────────────────────────────────────────────
+     sm/md/lg are also driven by the universal `[size]` token system
+     on ancestors (tokens.css §SIZE PRESETS) — these rules let an
+     icon-ui set its own size locally. xs / xl / 2xl / 3xl / 4xl
+     extend the scale beyond the universal range for hero placeholder
+     contexts. `fill` matches the parent box. */
+  :scope[size="xs"]   { --icon-size: 0.75rem; }   /* 12px */
+  :scope[size="sm"]   { --icon-size: 0.875rem; }  /* 14px */
+  :scope[size="md"]   { --icon-size: 1rem; }      /* 16px */
+  :scope[size="lg"]   { --icon-size: 1.25rem; }   /* 20px */
+  :scope[size="xl"]   { --icon-size: 2rem; }      /* 32px */
+  :scope[size="2xl"]  { --icon-size: 3rem; }      /* 48px */
+  :scope[size="3xl"]  { --icon-size: 4rem; }      /* 64px */
+  :scope[size="4xl"]  { --icon-size: 6rem; }      /* 96px */
+  :scope[size="fill"] { --icon-size: 100%; }
 }

package/components/icon/icon.js

@@ -19,6 +19,24 @@ class AdiaIcon extends AdiaElement {
     if (this.label) this.setAttribute('aria-label', this.label);
     const svg = getIcon(this.name, this.weight || 'regular');
     if (svg && this.innerHTML !== svg) this.innerHTML = svg;
+
+    // Pixel / rem / em passthrough — `size="48"` → 48px,
+    // `size="3.5rem"` → 3.5rem. Named-scale values (xs/sm/md/lg/xl/
+    // 2xl/3xl/4xl/fill) are handled by `:scope[size="…"]` rules in
+    // icon.css; we only set --icon-size inline for free-form values.
+    if (this.size && this.#isFreeFormSize(this.size)) {
+      this.style.setProperty('--icon-size', this.#normalizeSize(this.size));
+    } else if (this.style.getPropertyValue('--icon-size')) {
+      this.style.removeProperty('--icon-size');
+    }
+  }
+
+  #isFreeFormSize(s) {
+    return /^\d+(\.\d+)?(px|rem|em)?$/.test(s);
+  }
+
+  #normalizeSize(s) {
+    return /^\d+(\.\d+)?$/.test(s) ? `${s}px` : s;
   }
 }
 customElements.define('icon-ui', AdiaIcon);

package/components/icon/icon.yaml

@@ -18,8 +18,12 @@ props:
     default: ""
   size:
     description: >-
-      Icon size. Accepts the named scale (xs/sm/md/lg/xl) or a pixel value
-      as a string ("12", "16", "24", "32", "48"). Overrides --a-icon-size.
+      Icon size. Accepts the named scale
+      (`xs` 12px / `sm` 14px / `md` 16px / `lg` 20px / `xl` 32px /
+      `2xl` 48px / `3xl` 64px / `4xl` 96px / `fill` 100% of parent)
+      or a free-form pixel / rem / em value as a string ("48", "3rem",
+      "1.25em"). Overrides the inherited `--a-icon-size` from the
+      universal `[size]` system on ancestors.
     type: string
     default: ""
   weight:

package/components/index.js

@@ -15,6 +15,7 @@ export { AdiaInput } from './input/input.js';
 export { AdiaTextarea } from './textarea/textarea.js';
 export { AdiaCheck } from './check/check.js';
 export { AdiaRadio } from './radio/radio.js';
+export { AdiaOptionCard } from './option-card/option-card.js';
 export { AdiaSwitch } from './switch/switch.js';
 export { AdiaSlider } from './slider/slider.js';
 export { AdiaSelect } from './select/select.js';

package/components/input/input.a2ui.json

@@ -52,7 +52,7 @@
       "default": ""
     },
     "label": {
-      "description": "Label text rendered above the input field",
+      "description": "Inline label rendered as a leading caption inside the input chrome, between any prefix and the value. Wires aria-labelledby on the editable surface. For stacked label / hint / error compositions, wrap with field-ui.",
       "type": "string",
       "default": ""
     },

package/components/input/input.css

@@ -11,11 +11,8 @@
     --input-height:          var(--a-size);
     --input-px:              var(--a-ui-px);
     --input-font-size:       var(--a-ui-size);
-    --input-label-size:      var(--a-label-size);
-    --input-label-fg:        var(--a-label-color);
     --input-placeholder-fg:  var(--a-ui-text-placeholder);
     --input-affix-fg:        var(--a-ui-text-placeholder);
-    --input-gap:             var(--a-ui-py);
     --input-field-gap:       var(--a-space-1);
 
     /* ── Transitions ── */
@@ -26,8 +23,7 @@
     --input-bg-hover:        var(--a-ui-bg-hover);
     --input-fg-hover:        var(--a-fg);
     --input-affix-fg-hover:  var(--a-fg-subtle);
-    --input-fg-focus:        var(--a-fg);
-    --input-label-fg-focus:  var(--a-fg-subtle);
+    --input-fg-focus:        var(--a-fg-strong);
 
     /* ── State: disabled ── */
     --input-bg-disabled:     var(--a-ui-bg-disabled);
@@ -37,23 +33,20 @@
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--input-gap);
-  }
-
-  :scope[data-direction="row"] {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
+    display: block;
   }
 
-  /* Label */
+  /* Inline label — sits inside [slot="field"] as a leading caption,
+     between [slot="prefix"] and [slot="text"]. Dim by default; shares
+     the input chrome border. For stacked label / hint / error, wrap
+     with field-ui. */
   [slot="label"] {
-    font-size: var(--input-label-size);
-    color: var(--input-label-fg);
+    flex-shrink: 0;
+    color: var(--input-affix-fg);
+    font-size: var(--input-font-size);
+    user-select: none;
+    pointer-events: none;
   }
-  [slot="label"][label]::after { content: attr(label); }
 
   /* Field container */
   [slot="field"] {
@@ -68,7 +61,13 @@
     color: var(--input-fg);
     font: inherit;
     font-size: var(--input-font-size);
-    line-height: 1;
+    /* line-height: 1.4 (not 1) so descender-bearing glyphs (g, j, p, q, y)
+       have room inside [slot="text"]'s line box. With line-height: 1 the
+       line box equals the em-square and descenders extend below it; the
+       overflow: hidden on [slot="text"] then clips them. The min-height
+       still controls overall chrome height — align-items: center keeps the
+       baseline centered regardless of line-height. */
+    line-height: 1.4;
     cursor: text;
     transition: border-color var(--input-duration) var(--input-easing);
   }
@@ -92,9 +91,6 @@
   :scope[error]:not([disabled]):focus-within [slot="field"] {
     box-shadow: var(--input-focus-ring-invalid);
   }
-  :scope:not([disabled]):focus-within [slot="label"] {
-    color: var(--input-label-fg-focus);
-  }
 
   /* Text (contenteditable span) */
   [slot="text"] {
@@ -122,17 +118,26 @@
 
   /* Placeholder (contenteditable only) */
   span[slot="text"][data-empty]::before {
-    content: attr(aria-placeholder);
+    content: attr(data-placeholder);
     color: var(--input-placeholder-fg);
     pointer-events: none;
   }
 
-  /* Prefix + Suffix */
+  /* Prefix + Suffix — inline-flex so icon-ui (or any non-text affix
+     content) centers vertically within the slot wrapper. Without
+     this, an icon inside a default <span slot="prefix"> sits at the
+     baseline of the field's 1.4 line-box and renders visually below
+     the field's center. With inline-flex + align-items: center the
+     icon centers in the slot box, which is itself centered in the
+     field via the field's align-items: center. */
   [slot="prefix"],
   [slot="suffix"] {
+    display: inline-flex;
+    align-items: center;
     flex-shrink: 0;
     color: var(--input-affix-fg);
     font-size: var(--input-font-size);
+    line-height: 1;
     user-select: none;
     pointer-events: none;
   }

package/components/input/input.js

@@ -2,9 +2,17 @@
  * <input-ui> — Text input. The host IS the interactive surface.
  * Uses contenteditable for text entry, ElementInternals for form participation.
  *
- * Supports prefix/suffix slots:
- *   <input-ui label="Weight" suffix="kg"></input-ui>
- *   <input-ui placeholder="Search" prefix="search"></input-ui>
+ * Slots inside [slot="field"]:
+ *   prefix → label → text → suffix
+ *
+ *   <input-ui label="Email" placeholder="you@acme.com"></input-ui>
+ *   <input-ui label="Email" prefix="user" placeholder="you@acme.com"></input-ui>
+ *   <input-ui placeholder="Search" prefix="magnifying-glass"></input-ui>
+ *   <input-ui prefix="@" value="kim"></input-ui>
+ *
+ * label renders as a dim leading caption inside the chrome (next to the
+ * value, sharing the input's border) — for stacked label / hint / error
+ * compositions, wrap with field-ui.
  */
 
 import { AdiaFormElement } from '../../core/form.js';
@@ -15,6 +23,13 @@ const renderAffix = (v) => isIconName(v)
   : v;
 
 class AdiaInput extends AdiaFormElement {
+  // Opt out of AdiaFormElement's per-control `label` deprecation warning.
+  // input-ui's `label` is a first-class API rendering an inline-leading
+  // caption inside the chrome with `aria-labelledby` wiring on the
+  // editable surface — not the inert above-the-field rendering that
+  // motivated the deprecation.
+  static labelDeprecated = false;
+
   static properties = {
     ...AdiaFormElement.properties,
     placeholder: { type: String,  default: '', reflect: true },
@@ -28,6 +43,8 @@ class AdiaInput extends AdiaFormElement {
   static template = () => null;
 
   #textEl = null;
+  #labelEl = null;
+  static #labelSeq = 0;
 
   get #isNativeInput() {
     return this.type === 'password' || this.type === 'number';
@@ -39,24 +56,28 @@ class AdiaInput extends AdiaFormElement {
 
     if (!this.querySelector('[slot="text"]')) {
       const useNative = this.#isNativeInput;
+      const labelId = this.label ? `input-label-${++AdiaInput.#labelSeq}` : '';
       this.innerHTML = `
-        ${this.label ? `<label slot="label" label="${this.label}"></label>` : ''}
         <div slot="field">
           ${this.prefix ? `<span slot="prefix">${renderAffix(this.prefix)}</span>` : ''}
+          ${this.label ? `<span slot="label" id="${labelId}">${this.label}</span>` : ''}
           ${useNative
             ? `<input slot="text" type="${this.type}" tabindex="0"
                       placeholder="${this.placeholder}" value="${this.value || ''}"
                       autocomplete="${this.type === 'password' ? 'current-password' : 'off'}"
+                      ${labelId ? `aria-labelledby="${labelId}"` : ''}
                       ${this.disabled ? 'disabled' : ''} ${this.readonly ? 'readonly' : ''} />`
             : `<span slot="text" contenteditable="plaintext-only" tabindex="0"
                     ${this.value ? '' : 'data-empty=""'}
-                    aria-placeholder="${this.placeholder}"></span>`}
+                    ${labelId ? `aria-labelledby="${labelId}"` : ''}
+                    data-placeholder="${this.placeholder}"></span>`}
           ${this.suffix ? `<span slot="suffix">${renderAffix(this.suffix)}</span>` : ''}
         </div>
       `;
     }
 
     this.#textEl = this.querySelector('[slot="text"]');
+    this.#labelEl = this.querySelector('[slot="label"]');
     if (!this.#isNativeInput && this.value) this.#textEl.textContent = this.value;
 
     if (this.#textEl) {
@@ -75,7 +96,7 @@ class AdiaInput extends AdiaFormElement {
       this.#textEl.disabled = this.disabled;
       this.#textEl.readOnly = this.readonly;
     } else {
-      this.#textEl.setAttribute('aria-placeholder', this.placeholder);
+      this.#textEl.setAttribute('data-placeholder', this.placeholder);
       if (this.disabled || this.readonly) {
         this.#textEl.contentEditable = 'false';
       } else {
@@ -83,10 +104,15 @@ class AdiaInput extends AdiaFormElement {
       }
     }
 
-    const label = this.querySelector('[slot="label"]');
-    if (label && this.label) label.setAttribute('label', this.label);
+    if (this.#labelEl) this.#labelEl.textContent = this.label || '';
 
-    this.setAttribute('aria-label', this.label || this.placeholder || '');
+    if (this.label) {
+      this.removeAttribute('aria-label');
+    } else if (this.placeholder) {
+      this.setAttribute('aria-label', this.placeholder);
+    } else {
+      this.removeAttribute('aria-label');
+    }
   }
 
   #onInput = () => {
@@ -141,6 +167,7 @@ class AdiaInput extends AdiaFormElement {
       this.#textEl.removeEventListener('paste', this.#onPaste);
     }
     this.#textEl = null;
+    this.#labelEl = null;
   }
 }
 customElements.define('input-ui', AdiaInput);

package/components/input/input.yaml

@@ -47,7 +47,9 @@ props:
     type: string
     default: ""
   label:
-    description: Label text rendered above the input field
+    description: Inline label rendered as a leading caption inside the input chrome,
+      between any prefix and the value. Wires aria-labelledby on the editable
+      surface. For stacked label / hint / error compositions, wrap with field-ui.
     type: string
     default: ""
   maxlength:

package/components/option-card/option-card.a2ui.json

@@ -0,0 +1,262 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/OptionCard.json",
+  "title": "OptionCard",
+  "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.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "description": {
+      "description": "Description text. Stamped into a [slot=\"description\"] span when no slotted description is provided.",
+      "type": "string",
+      "default": ""
+    },
+    "required": {
+      "description": "Marks the radiogroup as requiring a selection for form validation.",
+      "type": "boolean",
+      "default": false
+    },
+    "checked": {
+      "description": "Whether this card is currently selected.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "OptionCard"
+    },
+    "disabled": {
+      "description": "Disables interaction and dims the card.",
+      "type": "boolean",
+      "default": false
+    },
+    "heading": {
+      "description": "Heading text. Stamped into a [slot=\"heading\"] span when no slotted heading is provided.",
+      "type": "string",
+      "default": ""
+    },
+    "icon": {
+      "description": "Optional Phosphor icon name. Stamped as a leading <icon-ui slot=\"icon\"> when set.",
+      "type": "string",
+      "default": ""
+    },
+    "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",
+      "enum": [
+        "default",
+        "tile"
+      ],
+      "default": "default"
+    },
+    "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": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired when this card becomes selected (bubbles)."
+      }
+    },
+    "examples": [
+      {
+        "description": "A four-option pick-one for \"what brings you here\" — radio-card behavior with heading + description per option.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Column\",\n    \"gap\": \"2\",\n    \"children\": [\"build\", \"explore\", \"migrate\", \"evaluate\"]\n  },\n  {\n    \"id\": \"build\",\n    \"component\": \"OptionCard\",\n    \"name\": \"use-case\",\n    \"value\": \"build\",\n    \"checked\": true,\n    \"heading\": \"I'm building a product\",\n    \"description\": \"Spinning up a new project — design, ship, iterate.\"\n  },\n  {\n    \"id\": \"explore\",\n    \"component\": \"OptionCard\",\n    \"name\": \"use-case\",\n    \"value\": \"explore\",\n    \"heading\": \"I'm exploring the product\",\n    \"description\": \"Kicking the tires before bringing a team along.\"\n  },\n  {\n    \"id\": \"migrate\",\n    \"component\": \"OptionCard\",\n    \"name\": \"use-case\",\n    \"value\": \"migrate\",\n    \"heading\": \"I'm migrating from another tool\",\n    \"description\": \"Moving an existing workspace and want a smooth port.\"\n  },\n  {\n    \"id\": \"evaluate\",\n    \"component\": \"OptionCard\",\n    \"name\": \"use-case\",\n    \"value\": \"evaluate\",\n    \"heading\": \"I'm evaluating for my team\",\n    \"description\": \"Comparing options and want to dig into specifics.\"\n  }\n]",
+        "name": "use-case-picker"
+      }
+    ],
+    "keywords": [
+      "option",
+      "card",
+      "radio",
+      "select",
+      "choice",
+      "picker",
+      "tier",
+      "plan",
+      "onboarding",
+      "registration"
+    ],
+    "name": "AdiaOptionCard",
+    "related": [
+      "radio",
+      "card",
+      "check",
+      "segmented"
+    ],
+    "slots": {
+      "description": {
+        "description": "Rich description content. Overrides the `description` 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."
+      },
+      "heading": {
+        "description": "Rich heading content. Overrides the `heading` attribute when present."
+      },
+      "icon": {
+        "description": "Custom icon element. Overrides the `icon` attribute when present."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Pointer over a non-checked card.",
+        "name": "hover",
+        "selector": ":not([checked]):not([disabled]):hover"
+      },
+      {
+        "description": "Selected — accent border, tinted background, filled radio circle.",
+        "attribute": "checked",
+        "name": "checked"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Keyboard focus ring.",
+        "name": "focused",
+        "selector": ":focus-visible"
+      }
+    ],
+    "synonyms": {
+      "picker": [
+        "option-card",
+        "radio",
+        "select"
+      ],
+      "radio": [
+        "option-card",
+        "radio",
+        "select"
+      ],
+      "tier": [
+        "option-card",
+        "card",
+        "plan"
+      ]
+    },
+    "tag": "option-card-ui",
+    "tokens": {
+      "--option-card-bg": {
+        "description": "Default background."
+      },
+      "--option-card-bg-checked": {
+        "description": "Background when checked."
+      },
+      "--option-card-bg-hover": {
+        "description": "Hover background (non-checked)."
+      },
+      "--option-card-border": {
+        "description": "Default border color."
+      },
+      "--option-card-border-checked": {
+        "description": "Border color when checked."
+      },
+      "--option-card-border-hover": {
+        "description": "Hover border color (non-checked)."
+      },
+      "--option-card-desc-color": {
+        "description": "Description text color."
+      },
+      "--option-card-desc-line-height": {
+        "description": "Description line height."
+      },
+      "--option-card-desc-size": {
+        "description": "Description font size."
+      },
+      "--option-card-disabled-opacity": {
+        "description": "Opacity multiplier when disabled."
+      },
+      "--option-card-duration": {
+        "description": "Transition duration for hover / checked state changes."
+      },
+      "--option-card-easing": {
+        "description": "Transition easing."
+      },
+      "--option-card-focus-ring": {
+        "description": "Focus ring (box-shadow value)."
+      },
+      "--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-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-size": {
+        "description": "Heading font size."
+      },
+      "--option-card-heading-weight": {
+        "description": "Heading font weight."
+      },
+      "--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-padding-block": {
+        "description": "Vertical padding inside the card."
+      },
+      "--option-card-padding-inline": {
+        "description": "Horizontal padding inside the card."
+      },
+      "--option-card-radio-bg": {
+        "description": "Indicator background when not checked."
+      },
+      "--option-card-radio-border": {
+        "description": "Indicator border when not checked."
+      },
+      "--option-card-radio-dot": {
+        "description": "Inner dot color when checked."
+      },
+      "--option-card-radio-fill": {
+        "description": "Indicator fill color when checked."
+      },
+      "--option-card-radio-size": {
+        "description": "Diameter of the indicator circle."
+      },
+      "--option-card-radius": {
+        "description": "Card corner radius."
+      }
+    },
+    "traits": [
+      "focusable"
+    ],
+    "version": 1
+  }
+}