@adia-ai/web-components 0.6.33 → 0.6.35

package/components/textarea/textarea.css

@@ -2,40 +2,40 @@
    doesn't match the scope root. Plain selector outside works. See
    docs/BROWSER-COMPAT.md §3a. */
 textarea-ui:not([disabled]) [slot="text"]:hover {
-  background: var(--textarea-bg-hover);
-  border-color: var(--textarea-border-hover);
-  color: var(--textarea-fg-hover);
+  background: var(--textarea-bg-hover, var(--textarea-bg-hover-default));
+  border-color: var(--textarea-border-hover, var(--textarea-border-hover-default));
+  color: var(--textarea-fg-hover, var(--textarea-fg-hover-default));
 }
 
 @scope (textarea-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
-    --textarea-bg:              var(--a-ui-bg);
-    --textarea-fg:              var(--a-ui-text);
-    --textarea-border:          var(--a-ui-border);
-    --textarea-border-hover:    var(--a-ui-border-hover);
-    --textarea-focus-ring:      var(--a-focus-ring);
-    --textarea-focus-ring-invalid: var(--a-focus-ring-invalid);
-    --textarea-radius:          var(--a-radius);
-    --textarea-min-height:      calc(var(--a-size) * 2);
-    --textarea-px:              var(--a-ui-px);
-    --textarea-py:              var(--a-ui-px);
-    --textarea-font-size:       var(--a-ui-size);
-    --textarea-label-size:      var(--a-label-size);
-    --textarea-label-fg:        var(--a-label-color);
-    --textarea-placeholder-fg:  var(--a-ui-text-placeholder);
-    --textarea-gap:             var(--a-space-1);
+    --textarea-bg-default:              var(--a-ui-bg);
+    --textarea-fg-default:              var(--a-ui-text);
+    --textarea-border-default:          var(--a-ui-border);
+    --textarea-border-hover-default:    var(--a-ui-border-hover);
+    --textarea-focus-ring-default:      var(--a-focus-ring);
+    --textarea-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --textarea-radius-default:          var(--a-radius);
+    --textarea-min-height-default:      calc(var(--a-size) * 2);
+    --textarea-px-default:              var(--a-ui-px);
+    --textarea-py-default:              var(--a-ui-px);
+    --textarea-font-size-default:       var(--a-ui-size);
+    --textarea-label-size-default:      var(--a-label-size);
+    --textarea-label-fg-default:        var(--a-label-color);
+    --textarea-placeholder-fg-default:  var(--a-ui-text-placeholder);
+    --textarea-gap-default:             var(--a-space-1);
 
     /* ── Transition ── */
-    --textarea-duration:        var(--a-duration-fast);
-    --textarea-easing:          var(--a-easing);
+    --textarea-duration-default:        var(--a-duration-fast);
+    --textarea-easing-default:          var(--a-easing);
 
     /* ── State ── */
-    --textarea-bg-hover:        var(--a-ui-bg-hover);
-    --textarea-fg-hover:        var(--a-ui-text-hover);
-    --textarea-label-fg-focus:  var(--a-fg-subtle);
-    --textarea-bg-disabled:     var(--a-ui-bg-disabled);
-    --textarea-fg-disabled:     var(--a-ui-text-disabled);
+    --textarea-bg-hover-default:        var(--a-ui-bg-hover);
+    --textarea-fg-hover-default:        var(--a-ui-text-hover);
+    --textarea-label-fg-focus-default:  var(--a-fg-subtle);
+    --textarea-bg-disabled-default:     var(--a-ui-bg-disabled);
+    --textarea-fg-disabled-default:     var(--a-ui-text-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -44,7 +44,7 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--textarea-gap);
+    gap: var(--textarea-gap, var(--textarea-gap-default));
   }
 
   :scope[data-direction="row"] {
@@ -54,20 +54,20 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
   }
 
   [slot="label"] {
-    font-size: var(--textarea-label-size);
-    color: var(--textarea-label-fg);
+    font-size: var(--textarea-label-size, var(--textarea-label-size-default));
+    color: var(--textarea-label-fg, var(--textarea-label-fg-default));
   }
   [slot="label"][label]::after { content: attr(label); }
 
   [slot="text"] {
-    min-height: var(--textarea-min-height);
-    padding: var(--textarea-py) var(--textarea-px);
-    border: 1px solid var(--textarea-border);
-    border-radius: var(--textarea-radius);
-    background: var(--textarea-bg);
-    color: var(--textarea-fg);
+    min-height: var(--textarea-min-height, var(--textarea-min-height-default));
+    padding: var(--textarea-py, var(--textarea-py-default)) var(--textarea-px, var(--textarea-px-default));
+    border: 1px solid var(--textarea-border, var(--textarea-border-default));
+    border-radius: var(--textarea-radius, var(--textarea-radius-default));
+    background: var(--textarea-bg, var(--textarea-bg-default));
+    color: var(--textarea-fg, var(--textarea-fg-default));
     font: inherit;
-    font-size: var(--textarea-font-size);
+    font-size: var(--textarea-font-size, var(--textarea-font-size-default));
     line-height: 1.5;
     white-space: pre-wrap;
     word-break: break-word;
@@ -75,10 +75,10 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
     cursor: text;
     outline: none;
     transition:
-      background   var(--textarea-duration) var(--textarea-easing),
-      border-color var(--textarea-duration) var(--textarea-easing),
-      color        var(--textarea-duration) var(--textarea-easing),
-      box-shadow   var(--textarea-duration) var(--textarea-easing);
+      background   var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
+      border-color var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
+      color        var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
+      box-shadow   var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default));
   }
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]) [slot="text"]:focus {
@@ -87,29 +87,29 @@ textarea-ui:not([disabled]) [slot="text"]:hover {
        in the contenteditable [slot="text"] span; :focus-visible on
        the host wouldn't match the actual input surface. */
     outline: none;
-    box-shadow: var(--textarea-focus-ring);
-    color: var(--textarea-fg-hover);
+    box-shadow: var(--textarea-focus-ring, var(--textarea-focus-ring-default));
+    color: var(--textarea-fg-hover, var(--textarea-fg-hover-default));
   }
   :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
   :scope[error]:not([disabled]) [slot="text"]:focus {
-    box-shadow: var(--textarea-focus-ring-invalid);
+    box-shadow: var(--textarea-focus-ring-invalid, var(--textarea-focus-ring-invalid-default));
   }
   :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
   :scope:not([disabled]):focus-within [slot="label"] {
-    color: var(--textarea-label-fg-focus);
+    color: var(--textarea-label-fg-focus, var(--textarea-label-fg-focus-default));
   }
 
   /* Placeholder */
   [slot="text"][data-empty]::before {
     content: attr(data-placeholder);
-    color: var(--textarea-placeholder-fg);
+    color: var(--textarea-placeholder-fg, var(--textarea-placeholder-fg-default));
     pointer-events: none;
   }
 
   /* Disabled */
   :scope[disabled] [slot="text"] {
-    background: var(--textarea-bg-disabled);
-    color: var(--textarea-fg-disabled);
+    background: var(--textarea-bg-disabled, var(--textarea-bg-disabled-default));
+    color: var(--textarea-fg-disabled, var(--textarea-fg-disabled-default));
     cursor: not-allowed;
   }
 }

package/components/textarea/textarea.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UITextarea } from './class.js';
+import { UITextarea } from './textarea.class.js';
 
 defineIfFree('textarea-ui', UITextarea);
 

package/components/textarea/textarea.yaml

@@ -12,10 +12,11 @@ description: |
   surface (per ADR-0025, no native <textarea> wrapped underneath).
   Form-bearing via UIFormElement: [name], [value], [required],
   [disabled], [readonly], fires `change` on blur and `input` per
-  keystroke. Enter inserts a newline — does NOT fire `submit` (for
-  Enter-to-send composers use <chat-input-ui submit-on-enter> inside
-  <chat-composer>). Wrap in <field-ui label="…"> for the canonical
-  labeled stack.
+  keystroke. Enter (without Shift) dispatches a bubbling `submit`
+  event — Shift+Enter inserts a newline. This is unconditional;
+  there is no opt-in/opt-out attribute. For Enter-to-send composers
+  use <chat-input-ui> inside <chat-composer>. Wrap in <field-ui
+  label="…"> for the canonical labeled stack.
 props:
   disabled:
     description: Disables interaction, removes contenteditable, and dims the control. Inherited from UIFormElement.
@@ -116,10 +117,12 @@ a2ui:
       control user resize. Never substitute a native <textarea> just
       to get rows / resize.
     - >-
-      Enter inserts a newline — <textarea-ui> does NOT emit a `submit`
-      event. For Enter-to-send multi-line composers, use
-      <chat-input-ui submit-on-enter> inside <chat-composer>, not
-      textarea-ui.
+      Enter (without Shift) dispatches a bubbling `submit` event;
+      Shift+Enter inserts a newline. This is unconditional — there
+      is no opt-in/opt-out attribute. For chat composer surfaces
+      wrap inside <chat-composer> + <chat-input-ui> (which adds the
+      send button + model picker + paste-to-attach plumbing on top
+      of the same Enter→submit semantics).
 anti_patterns: []
 examples:
   - name: basic-textarea

package/components/time-picker/time-picker.a2ui.json

@@ -0,0 +1,267 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/TimePicker.json",
+  "title": "TimePicker",
+  "description": "Time-of-day picker with discrete segments (hour, minute, optional second, optional AM/PM). Each segment follows the WAI-ARIA Spinbutton pattern with Arrow-key increment/decrement, Page Up/Down for larger jumps, Home/End for segment min/max, and Tab to move between segments. Form-associated input emitting ISO 8601 time string (\"HH:mm\" or \"HH:mm:ss\") via change events. Per ADR-0025 no native form controls — segments are contenteditable spans inside a custom host. SPEC-043.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks the field as required for form validation. Sets aria-required.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "TimePicker"
+    },
+    "disabled": {
+      "description": "Disables interaction; dims the control",
+      "type": "boolean",
+      "default": false
+    },
+    "hourcycle": {
+      "description": "Hour cycle. Empty (default) derives from the document locale — most\nen-* locales resolve to `h23`. `h12` forces a 12-hour cycle with an\nAM/PM (meridiem) segment; `h23` forces 24-hour cycle.\n",
+      "type": "string",
+      "enum": [
+        "",
+        "h12",
+        "h23"
+      ],
+      "default": ""
+    },
+    "locale": {
+      "description": "BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.",
+      "type": "string",
+      "default": ""
+    },
+    "max": {
+      "description": "Latest selectable time as ISO 8601. Empty disables the constraint.",
+      "type": "string",
+      "default": ""
+    },
+    "min": {
+      "description": "Earliest selectable time as ISO 8601. Empty disables the constraint.",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Form field name for FormData submission",
+      "type": "string",
+      "default": ""
+    },
+    "placeholder": {
+      "description": "Per-segment placeholder text shown when a segment is empty. Defaults to \"--\".",
+      "type": "string",
+      "default": "--"
+    },
+    "precision": {
+      "description": "Whether the seconds segment is exposed. `minute` (default) hides seconds; `second` adds the seconds segment + separator.",
+      "type": "string",
+      "enum": [
+        "minute",
+        "second"
+      ],
+      "default": "minute"
+    },
+    "readonly": {
+      "description": "Prevents editing while keeping the field focusable. Segments stay focusable for inspection.",
+      "type": "boolean",
+      "default": false
+    },
+    "step": {
+      "description": "Per-Arrow-keypress increment in seconds. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.",
+      "type": "number",
+      "default": 60
+    },
+    "value": {
+      "description": "Current time value as ISO 8601 (\"HH:mm\" or \"HH:mm:ss\"). Empty when no value selected.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"TimePicker\", \"value\": \"09:30\"}\n",
+        "why": "Localized format is not a valid `value`. The contract requires ISO\n8601 time (`HH:mm` or `HH:mm:ss`, 24-hour). The display format is\nderived from `hourCycle` regardless of how the value is stored.\n",
+        "wrong": "{\"component\": \"TimePicker\", \"value\": \"9:30 AM\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24T09:30\"}\n",
+        "why": "Datetime string is invalid for TimePicker — the date portion is\nnot accepted. For datetime selection use the DatetimePicker\ncomponent.\n",
+        "wrong": "{\"component\": \"TimePicker\", \"value\": \"2026-05-24T09:30\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"TimePicker\", \"name\": \"field-name\"}\n",
+        "why": "Nesting a native time input violates ADR-0025 and bypasses\nElementInternals form participation.\n",
+        "wrong": "{\"component\": \"TimePicker\", \"children\": [\n  {\"component\": \"Input\", \"type\": \"time\"}\n]}\n"
+      }
+    ],
+    "category": "input",
+    "composes": [],
+    "events": {
+      "change": {
+        "description": "Fired when the value commits (segment edit completes via Arrow / Tab / blur).",
+        "detail": {
+          "segment": {
+            "description": "Which segment commit fired the event (`hour` | `minute` | `second` | `meridiem`).",
+            "type": "string"
+          },
+          "value": {
+            "description": "Current value as ISO 8601 (\"HH:mm\" or \"HH:mm:ss\").",
+            "type": "string"
+          }
+        }
+      },
+      "input": {
+        "description": "Fired on intermediate segment edits before commit.",
+        "detail": {
+          "value": {
+            "description": "In-flight value as ISO 8601.",
+            "type": "string"
+          }
+        }
+      },
+      "invalid": {
+        "description": "Fired when a constraint is violated (min/max range, parse error).",
+        "detail": {
+          "reason": {
+            "description": "Why it failed (`min` | `max` | `parse`).",
+            "type": "string",
+            "enum": [
+              "min",
+              "max",
+              "parse"
+            ]
+          },
+          "value": {
+            "description": "Value that failed validation.",
+            "type": "string"
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Time-of-day picker with 15-minute step and business-hours bounds.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Start time\",\n   \"children\": [\"t\"]},\n  {\"id\": \"t\", \"component\": \"TimePicker\",\n   \"name\": \"start-time\", \"value\": \"09:30\",\n   \"min\": \"08:00\", \"max\": \"18:00\", \"step\": 900}\n]\n",
+        "name": "meeting-time-15min-step"
+      },
+      {
+        "description": "Time picker with second precision for a log-cursor query.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Cursor\",\n   \"children\": [\"t\"]},\n  {\"id\": \"t\", \"component\": \"TimePicker\",\n   \"name\": \"cursor\", \"precision\": \"second\", \"step\": 1,\n   \"value\": \"14:30:45\"}\n]\n",
+        "name": "log-cursor-second-precision"
+      },
+      {
+        "description": "Forced 12-hour cycle with AM/PM segment for an alarm picker.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Alarm\",\n   \"children\": [\"t\"]},\n  {\"id\": \"t\", \"component\": \"TimePicker\",\n   \"name\": \"alarm\", \"hourCycle\": \"h12\", \"value\": \"07:00\"}\n]\n",
+        "name": "alarm-12h-cycle"
+      }
+    ],
+    "keywords": [
+      "time",
+      "timepicker",
+      "time-picker",
+      "clock",
+      "hour",
+      "minute",
+      "spinbutton"
+    ],
+    "name": "UITimePicker",
+    "related": [
+      "CalendarPicker",
+      "Field",
+      "Input"
+    ],
+    "slots": {
+      "prefix": {
+        "description": "Leading content (e.g. an `<icon-ui name=\"clock\">`); sits before the hour segment."
+      },
+      "suffix": {
+        "description": "Trailing content (e.g. a timezone label); sits after the last segment."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "One segment is the focus target.",
+        "attribute": "editing",
+        "name": "editing"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Keyboard focus ring on the host.",
+        "name": "focused",
+        "selector": ":focus-within"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "tags": [
+        "TimeInput",
+        "TimePicker"
+      ],
+      "time": [
+        "clock",
+        "hour",
+        "minute",
+        "alarm"
+      ]
+    },
+    "tag": "time-picker-ui",
+    "tokens": {
+      "--time-picker-bg": {
+        "description": "Host background color."
+      },
+      "--time-picker-border": {
+        "description": "Host border color."
+      },
+      "--time-picker-fg": {
+        "description": "Host text color."
+      },
+      "--time-picker-fg-muted": {
+        "description": "Muted text color (empty placeholder + separator)."
+      },
+      "--time-picker-px": {
+        "description": "Host inline padding."
+      },
+      "--time-picker-py": {
+        "description": "Host block padding."
+      },
+      "--time-picker-radius": {
+        "description": "Host border radius."
+      },
+      "--time-picker-segment-bg-focus": {
+        "description": "Focused segment background."
+      },
+      "--time-picker-segment-fg-focus": {
+        "description": "Focused segment text color."
+      },
+      "--time-picker-separator-fg": {
+        "description": "Separator (`:`) text color."
+      }
+    },
+    "traits": [
+      "focusable"
+    ],
+    "version": 1
+  }
+}