@adia-ai/web-components 0.0.1

package/components/segment/segment.a2ui.json

@@ -0,0 +1,100 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Segment.json",
+  "title": "Segment",
+  "description": "Individual segment option, child of segmented-ui.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Segment"
+    },
+    "disabled": {
+      "description": "Disables this segment.",
+      "type": "boolean",
+      "default": false
+    },
+    "selected": {
+      "description": "Whether this segment is currently selected. Managed by the parent Segmented container; don't set multiple siblings selected.",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Display text. Rendered via CSS attr(text) on ::after pseudo-element.",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Value emitted when this segment is selected.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "events": {},
+    "examples": [
+      {
+        "description": "Segmented control with 3 segment options for tab-like switching.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"text\": \"Overview\",\n    \"active\": true\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"text\": \"Features\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"text\": \"Pricing\"\n  }\n]",
+        "name": "segmented-control"
+      },
+      {
+        "description": "Three segments inside a segmented control for view switching.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"overview\",\n    \"text\": \"Overview\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"features\",\n    \"text\": \"Features\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"pricing\",\n    \"text\": \"Pricing\"\n  }\n]",
+        "name": "basic"
+      },
+      {
+        "description": "Segmented control showing four time-range segments labeled via text attribute.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\",\n      \"s4\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"d\",\n    \"text\": \"Daily\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"w\",\n    \"text\": \"Weekly\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"m\",\n    \"text\": \"Monthly\"\n  },\n  {\n    \"id\": \"s4\",\n    \"component\": \"Segment\",\n    \"value\": \"y\",\n    \"text\": \"Yearly\"\n  }\n]",
+        "name": "text"
+      },
+      {
+        "description": "Segmented control with one disabled segment that cannot be selected.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"free\",\n    \"text\": \"Free\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"pro\",\n    \"text\": \"Pro\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"enterprise\",\n    \"text\": \"Enterprise\",\n    \"disabled\": true\n  }\n]",
+        "name": "disabled"
+      },
+      {
+        "description": "Segmented control with icon+text segments for view-mode toggles (list, grid, board).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"list\",\n    \"text\": \"List\",\n    \"icon\": \"list\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"grid\",\n    \"text\": \"Grid\",\n    \"icon\": \"squares-four\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"board\",\n    \"text\": \"Board\",\n    \"icon\": \"kanban\"\n  }\n]",
+        "name": "icons"
+      }
+    ],
+    "keywords": [
+      "segment"
+    ],
+    "name": "AdiaSegment",
+    "related": [
+      "segmented-control"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "segment-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/segment/segment.css

@@ -0,0 +1,81 @@
+@scope (segment-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --segment-px:              var(--a-ui-px);
+    --segment-radius:          calc(var(--a-radius) - 2px);
+
+    /* ── Typography ── */
+    --segment-font-size:       var(--a-ui-size);
+    --segment-font-weight:     var(--a-ui-weight);
+
+    /* ── Colors ── */
+    --segment-fg:              var(--a-fg-subtle);
+    --segment-fg-hover:        var(--a-fg);
+    --segment-fg-selected:     var(--a-neutral-0-shade);
+    --segment-fg-disabled:     var(--a-fg-muted);
+
+    /* ── Transition ── */
+    --segment-duration:        var(--a-duration-fast);
+    --segment-easing:          var(--a-easing);
+
+    /* ── Focus ── */
+    --segment-focus-ring:      var(--a-focus-ring);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    min-width: 0;
+
+    padding-inline: var(--segment-px);
+
+    font: inherit;
+    font-size: var(--segment-font-size);
+    font-weight: var(--segment-font-weight);
+    line-height: 1;
+    color: var(--segment-fg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+    user-select: none;
+    border-radius: var(--segment-radius);
+    background: transparent;
+
+    transition:
+      color var(--segment-duration) var(--segment-easing),
+      background var(--segment-duration) var(--segment-easing);
+  }
+
+  :scope::after {
+    content: attr(text);
+  }
+
+  /* States */
+  :scope:not([disabled]):not([selected]):hover {
+    color: var(--segment-fg-hover);
+  }
+
+  :scope[selected] {
+    color: var(--segment-fg-selected);
+  }
+
+  :scope:focus-visible {
+    outline: none;
+    box-shadow: var(--segment-focus-ring);
+  }
+
+  :scope[disabled] {
+    color: var(--segment-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/components/segment/segment.js

@@ -0,0 +1,32 @@
+/**
+ * <segment-ui value="tab1" text="Tab 1"></segment-ui>
+ * Child of segmented-ui. Represents one option.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaSegment extends AdiaElement {
+  static properties = {
+    value:    { type: String, default: '', reflect: true },
+    text:     { type: String, default: '', reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+    selected: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'radio');
+    if (!this.getAttribute('tabindex')) this.setAttribute('tabindex', '-1');
+  }
+
+  render() {
+    if (this.text) this.setAttribute('aria-label', this.text);
+    this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
+    if (this.disabled) this.setAttribute('aria-disabled', 'true');
+    else this.removeAttribute('aria-disabled');
+  }
+}
+customElements.define('segment-ui', AdiaSegment);
+
+export { AdiaSegment };

package/components/segment/segment.yaml

@@ -0,0 +1,216 @@
+# 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: AdiaSegment
+tag: segment-ui
+component: Segment
+category: navigation
+version: 1
+description: Individual segment option, child of segmented-ui.
+props:
+  disabled:
+    description: Disables this segment.
+    type: boolean
+    default: false
+    reflect: true
+  selected:
+    description: Whether this segment is currently selected. Managed by the parent Segmented container; don't set multiple siblings selected.
+    type: boolean
+    default: false
+    reflect: true
+  text:
+    description: Display text. Rendered via CSS attr(text) on ::after pseudo-element.
+    type: string
+    default: ""
+  value:
+    description: Value emitted when this segment is selected.
+    type: string
+    default: ""
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: segmented-control
+    description: Segmented control with 3 segment options for tab-like switching.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "SegmentedControl",
+          "children": [
+            "s1",
+            "s2",
+            "s3"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "Segment",
+          "text": "Overview",
+          "active": true
+        },
+        {
+          "id": "s2",
+          "component": "Segment",
+          "text": "Features"
+        },
+        {
+          "id": "s3",
+          "component": "Segment",
+          "text": "Pricing"
+        }
+      ]
+  - name: basic
+    description: Three segments inside a segmented control for view switching.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "SegmentedControl",
+          "children": [
+            "s1",
+            "s2",
+            "s3"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "Segment",
+          "value": "overview",
+          "text": "Overview"
+        },
+        {
+          "id": "s2",
+          "component": "Segment",
+          "value": "features",
+          "text": "Features"
+        },
+        {
+          "id": "s3",
+          "component": "Segment",
+          "value": "pricing",
+          "text": "Pricing"
+        }
+      ]
+  - name: text
+    description: Segmented control showing four time-range segments labeled via text attribute.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "SegmentedControl",
+          "children": [
+            "s1",
+            "s2",
+            "s3",
+            "s4"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "Segment",
+          "value": "d",
+          "text": "Daily"
+        },
+        {
+          "id": "s2",
+          "component": "Segment",
+          "value": "w",
+          "text": "Weekly"
+        },
+        {
+          "id": "s3",
+          "component": "Segment",
+          "value": "m",
+          "text": "Monthly"
+        },
+        {
+          "id": "s4",
+          "component": "Segment",
+          "value": "y",
+          "text": "Yearly"
+        }
+      ]
+  - name: disabled
+    description: Segmented control with one disabled segment that cannot be selected.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "SegmentedControl",
+          "children": [
+            "s1",
+            "s2",
+            "s3"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "Segment",
+          "value": "free",
+          "text": "Free"
+        },
+        {
+          "id": "s2",
+          "component": "Segment",
+          "value": "pro",
+          "text": "Pro"
+        },
+        {
+          "id": "s3",
+          "component": "Segment",
+          "value": "enterprise",
+          "text": "Enterprise",
+          "disabled": true
+        }
+      ]
+  - name: icons
+    description: Segmented control with icon+text segments for view-mode toggles (list, grid, board).
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "SegmentedControl",
+          "children": [
+            "s1",
+            "s2",
+            "s3"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "Segment",
+          "value": "list",
+          "text": "List",
+          "icon": "list"
+        },
+        {
+          "id": "s2",
+          "component": "Segment",
+          "value": "grid",
+          "text": "Grid",
+          "icon": "squares-four"
+        },
+        {
+          "id": "s3",
+          "component": "Segment",
+          "value": "board",
+          "text": "Board",
+          "icon": "kanban"
+        }
+      ]
+keywords:
+  - segment
+synonyms: {}
+related:
+  - segmented-control

package/components/segmented/segmented.a2ui.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Segmented.json",
+  "title": "Segmented",
+  "description": "<segmented-ui value=\"tab1\">",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Segmented"
+    },
+    "value": {
+      "description": "Value of the currently selected segment.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "events": {
+      "change": {
+        "description": "Fired when the selected segment changes. detail contains { value }."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Segmented usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Segmented\",\n    \"value\": \"\"\n  }\n]",
+        "name": "basic-segmented"
+      }
+    ],
+    "keywords": [
+      "segmented",
+      "options",
+      "select",
+      "toggle",
+      "switch",
+      "tab",
+      "tabs",
+      "button-group"
+    ],
+    "name": "AdiaSegmented",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "button-group": [
+        "toolbar",
+        "button",
+        "segmented"
+      ],
+      "options": [
+        "settings",
+        "radio",
+        "segmented",
+        "accordion"
+      ],
+      "select": [
+        "radio",
+        "segmented",
+        "form"
+      ],
+      "switch": [
+        "segmented",
+        "radio",
+        "settings"
+      ],
+      "tab": [
+        "tabs",
+        "panel",
+        "segmented"
+      ],
+      "tabs": [
+        "tabs",
+        "panel",
+        "segmented"
+      ],
+      "toggle": [
+        "segmented",
+        "radio",
+        "settings"
+      ]
+    },
+    "tag": "segmented-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/segmented/segmented.css

@@ -0,0 +1,67 @@
+@scope (segmented-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --segmented-height:           var(--a-size);
+    /* Component-intrinsic visual constants; no --a-space-* equivalent */
+    --segmented-padding:          2px;
+    --segmented-border-width:     0px;
+    --segmented-inset:            calc(var(--segmented-padding) + var(--segmented-border-width));
+    --segmented-radius:           var(--a-radius);
+
+    /* ── Colors ── */
+    --segmented-bg:               var(--a-ui-bg);
+    --segmented-border:           transparent;
+    --segmented-indicator-bg:     white;
+    --segmented-indicator-shadow: var(--a-shadow-sm);
+    --segmented-indicator-radius: calc(var(--segmented-radius) - var(--segmented-inset));
+
+    /* ── Typography ── */
+    --segmented-font-size:        var(--a-ui-size);
+
+    /* ── Transition ── */
+    --segmented-duration:         var(--a-duration);
+    --segmented-easing:           var(--a-easing-out);
+
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    align-items: stretch;
+    position: relative;
+    overflow: hidden;
+
+    min-height: var(--segmented-height);
+    padding: var(--segmented-padding);
+    font-size: var(--segmented-font-size);
+
+    background: var(--segmented-bg);
+    border: var(--segmented-border-width) solid var(--segmented-border);
+    border-radius: var(--segmented-radius);
+  }
+
+  /* -- Indicator (hidden until first selection) -- */
+  :scope > [data-indicator] {
+    display: none;
+  }
+
+  :scope[data-indicator-ready] > [data-indicator] {
+    display: block;
+    position: absolute;
+    inset: var(--segmented-inset);
+    right: auto;
+    width: calc((100% - var(--segmented-inset) * 2) / var(--_segment-count));
+
+    background: var(--segmented-indicator-bg);
+    border-radius: var(--segmented-indicator-radius);
+    box-shadow: var(--segmented-indicator-shadow);
+    pointer-events: none;
+
+    transition: transform var(--segmented-duration) var(--segmented-easing);
+  }
+
+  /* Size handled by universal [size] attribute system. */
+}