@adia-ai/web-components 0.0.1

package/components/select/select.yaml

@@ -0,0 +1,375 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaSelect
+tag: select-ui
+component: Select
+category: input
+version: 1
+description: Alias for ChoicePicker. Dropdown select with options.
+props:
+  name:
+    description: Form control name for form data submission
+    type: string
+    default: ""
+  variant:
+    description: Visual variant — default chrome, `outline` for bordered, `ghost` for inline.
+    type: string
+    default: default
+    enum: [default, outline, ghost, soft]
+  required:
+    description: Marks the field as required for form validation
+    type: boolean
+    default: false
+    reflect: true
+  avatar:
+    description: URL for leading avatar image (takes precedence over icon)
+    type: string
+    default: ""
+  disabled:
+    description: Disables interaction and dims the control
+    type: boolean
+    default: false
+    reflect: true
+  error:
+    description: Validation error message
+    type: string
+    default: ""
+  free-text:
+    description: "With searchable: commit the typed query on Enter when no option matches (unconstrained
+      autocomplete)"
+    type: boolean
+    default: false
+  icon:
+    description: Leading icon name rendered inside the trigger
+    type: string
+    default: ""
+  label:
+    description: Label text above the trigger
+    type: string
+    default: ""
+  maxlength:
+    description: Maximum character length for validation
+    type: number
+    default: null
+  minlength:
+    description: Minimum character length for validation
+    type: number
+    default: null
+  multiple:
+    description: Enables multi-select (comma-separated values)
+    type: boolean
+    default: false
+  open:
+    description: Whether the listbox is open
+    type: boolean
+    default: false
+    reflect: true
+  pattern:
+    description: Regex pattern for validation
+    type: string
+    default: ""
+  placeholder:
+    description: Placeholder when no option is selected
+    type: string
+    default: Select...
+  readonly:
+    description: Prevents selection changes while keeping the field focusable
+    type: boolean
+    default: false
+    reflect: true
+  searchable:
+    description: Enables a search/filter input inside the listbox
+    type: boolean
+    default: false
+  value:
+    description: Currently selected option value
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired when selected value changes
+slots:
+  label:
+    description: Label element above the trigger
+  listbox:
+    description: Popover container for options (role=listbox)
+  trigger:
+    description: Button that opens the listbox
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: bleed-design-settings
+    description: Design system settings page with brand header, photo upload section, bleed/margin
+      controls, and approval workflow.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "photo-sec",
+            "settings-sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "hdr-title",
+            "hdr-desc"
+          ]
+        },
+        {
+          "id": "hdr-title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Bleed Design Settings",
+          "variant": "section"
+        },
+        {
+          "id": "hdr-desc",
+          "component": "Text",
+          "slot": "description",
+          "textContent": "Configure bleed margins, upload artwork, and preview before approval.",
+          "variant": "body"
+        },
+        {
+          "id": "photo-sec",
+          "component": "Section",
+          "children": [
+            "photo-col"
+          ]
+        },
+        {
+          "id": "photo-col",
+          "component": "Column",
+          "children": [
+            "photo-label",
+            "photo-img",
+            "photo-btn"
+          ],
+          "gap": "3"
+        },
+        {
+          "id": "photo-label",
+          "component": "Text",
+          "textContent": "Artwork Upload",
+          "variant": "label"
+        },
+        {
+          "id": "photo-img",
+          "component": "Image",
+          "src": "https://picsum.photos/400/200",
+          "aspect": "2/1"
+        },
+        {
+          "id": "photo-btn",
+          "component": "Button",
+          "text": "Upload Photo",
+          "variant": "secondary"
+        },
+        {
+          "id": "settings-sec",
+          "component": "Section",
+          "children": [
+            "settings-col"
+          ]
+        },
+        {
+          "id": "settings-col",
+          "component": "Column",
+          "children": [
+            "bleed-mode",
+            "bleed-margin",
+            "bleed-unit",
+            "approved"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "bleed-mode",
+          "component": "Select",
+          "label": "Bleed Mode",
+          "name": "bleed-mode",
+          "placeholder": "Select mode..."
+        },
+        {
+          "id": "bleed-margin",
+          "component": "Input",
+          "label": "Bleed Margin",
+          "name": "bleed-margin",
+          "type": "number",
+          "placeholder": "e.g. 3"
+        },
+        {
+          "id": "bleed-unit",
+          "component": "Select",
+          "label": "Unit",
+          "name": "bleed-unit",
+          "placeholder": "mm"
+        },
+        {
+          "id": "approved",
+          "component": "CheckBox",
+          "label": "Approved for production",
+          "name": "approved"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "preview-btn",
+            "apply-btn"
+          ]
+        },
+        {
+          "id": "preview-btn",
+          "component": "Button",
+          "text": "Preview",
+          "variant": "secondary"
+        },
+        {
+          "id": "apply-btn",
+          "component": "Button",
+          "text": "Apply",
+          "variant": "primary"
+        }
+      ]
+  - name: create-form
+    description: Simple account creation form with text fields, select, and action buttons.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Create Account",
+          "variant": "section"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "variant": "caption",
+          "textContent": "Fill in your details"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "form"
+          ]
+        },
+        {
+          "id": "form",
+          "component": "Column",
+          "children": [
+            "name",
+            "email",
+            "role"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "name",
+          "component": "Input",
+          "label": "Full Name",
+          "placeholder": "Kim Granlund",
+          "name": "name",
+          "required": true
+        },
+        {
+          "id": "email",
+          "component": "Input",
+          "label": "Email",
+          "type": "email",
+          "placeholder": "kim@adia.health",
+          "name": "email",
+          "required": true
+        },
+        {
+          "id": "role",
+          "component": "Select",
+          "label": "Role",
+          "placeholder": "Choose role...",
+          "name": "role"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "cancel",
+            "submit"
+          ]
+        },
+        {
+          "id": "cancel",
+          "component": "Button",
+          "text": "Cancel",
+          "variant": "ghost"
+        },
+        {
+          "id": "submit",
+          "component": "Button",
+          "text": "Create",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - select
+  - dropdown
+  - combobox
+  - autocomplete
+synonyms:
+  autocomplete:
+    - combobox
+    - typeahead
+    - suggest
+    - free-text
+  combobox:
+    - search
+    - command
+    - select
+    - autocomplete
+    - typeahead
+    - filter
+  dropdown:
+    - popover
+    - menu
+    - select
+    - form
+related:
+  - image
+  - button
+  - input
+  - check-box
+  - upload

package/components/skeleton/skeleton.a2ui.json

@@ -0,0 +1,120 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Skeleton.json",
+  "title": "Skeleton",
+  "description": "Placeholder shimmer for loading states. Purely presentational.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Skeleton"
+    },
+    "height": {
+      "description": "Height of the placeholder.",
+      "type": "string",
+      "default": "1.2em"
+    },
+    "radius": {
+      "description": "Border radius",
+      "type": "string",
+      "enum": [
+        "none",
+        "sm",
+        "md",
+        "lg",
+        "full"
+      ],
+      "default": "sm"
+    },
+    "static": {
+      "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",
+      "enum": [
+        "text",
+        "circle",
+        "rect",
+        "image"
+      ],
+      "default": "rect"
+    },
+    "width": {
+      "description": "Width of the placeholder.",
+      "type": "string",
+      "default": "100%"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Column of skeleton components mimicking a card layout for loading states.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"sk-avatar\",\n      \"sk-title\"\n    ]\n  },\n  {\n    \"id\": \"sk-avatar\",\n    \"component\": \"Skeleton\",\n    \"slot\": \"icon\",\n    \"variant\": \"circle\",\n    \"width\": \"40px\",\n    \"height\": \"40px\"\n  },\n  {\n    \"id\": \"sk-title\",\n    \"component\": \"Skeleton\",\n    \"slot\": \"heading\",\n    \"variant\": \"text\",\n    \"width\": \"60%\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"body\"\n    ]\n  },\n  {\n    \"id\": \"body\",\n    \"component\": \"Column\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"sk1\",\n      \"sk2\",\n      \"sk3\",\n      \"sk4\"\n    ]\n  },\n  {\n    \"id\": \"sk1\",\n    \"component\": \"Skeleton\",\n    \"variant\": \"text\",\n    \"width\": \"100%\"\n  },\n  {\n    \"id\": \"sk2\",\n    \"component\": \"Skeleton\",\n    \"variant\": \"text\",\n    \"width\": \"90%\"\n  },\n  {\n    \"id\": \"sk3\",\n    \"component\": \"Skeleton\",\n    \"variant\": \"text\",\n    \"width\": \"95%\"\n  },\n  {\n    \"id\": \"sk4\",\n    \"component\": \"Skeleton\",\n    \"variant\": \"text\",\n    \"width\": \"70%\"\n  }\n]",
+        "name": "loading-skeleton"
+      }
+    ],
+    "keywords": [
+      "skeleton",
+      "loading",
+      "spinner",
+      "placeholder",
+      "shimmer"
+    ],
+    "name": "AdiaSkeleton",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "loading": [
+        "loading",
+        "skeleton",
+        "progress",
+        "bar"
+      ],
+      "placeholder": [
+        "loading",
+        "skeleton",
+        "empty"
+      ],
+      "shimmer": [
+        "loading",
+        "skeleton"
+      ],
+      "skeleton": [
+        "loading",
+        "skeleton"
+      ],
+      "spinner": [
+        "loading",
+        "skeleton",
+        "progress"
+      ]
+    },
+    "tag": "skeleton-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/skeleton/skeleton.css

@@ -0,0 +1,47 @@
+@scope (skeleton-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --skeleton-bg:        var(--a-bg-muted);
+    --skeleton-highlight: var(--a-bg-subtle);
+    --skeleton-radius:    var(--a-radius-sm);
+    --skeleton-duration:  1.5s;
+    --skeleton-easing:    var(--a-easing);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    background: var(--skeleton-bg);
+    border-radius: var(--skeleton-radius);
+  }
+
+  /* ── Radius variants ── */
+  :scope[radius="none"] { --skeleton-radius: 0; }
+  :scope[radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
+  :scope[radius="md"]   { --skeleton-radius: var(--a-radius-md); }
+  :scope[radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
+  :scope[radius="full"] { --skeleton-radius: var(--a-radius-full); }
+
+  /* ── Shimmer animation (default; suppress with [static]) ── */
+  :scope:not([static])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 25%,
+      var(--skeleton-highlight) 50%,
+      transparent 75%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer var(--skeleton-duration) var(--skeleton-easing) infinite;
+  }
+
+  @keyframes skeleton-shimmer {
+    from { background-position: 200% 0; }
+    to   { background-position: -200% 0; }
+  }
+}

package/components/skeleton/skeleton.js

@@ -0,0 +1,43 @@
+/**
+ * <skeleton-ui width="200px" height="1.2em" radius="sm"></skeleton-ui>
+ * <skeleton-ui width="100%" height="3rem" radius="md" static></skeleton-ui>
+ *
+ * Placeholder shimmer for loading states.
+ * Purely presentational — no DOM stamping needed.
+ *
+ * Props (attributes):
+ *   static — suppress the shimmer animation (default: false — shimmer on)
+ *
+ * Radius: none, sm (default), md, lg, full
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaSkeleton extends AdiaElement {
+  static properties = {
+    width:  { type: String,  default: '100%',  reflect: true },
+    height: { type: String,  default: '1.2em', reflect: true },
+    radius: { type: String,  default: 'sm',    reflect: true },
+    static: { type: Boolean, default: false,   reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('aria-hidden', 'true');
+    this.#applySize();
+  }
+
+  render() {
+    this.#applySize();
+  }
+
+  #applySize() {
+    this.style.width  = this.width;
+    this.style.height = this.height;
+  }
+}
+
+customElements.define('skeleton-ui', AdiaSkeleton);
+
+export { AdiaSkeleton };