npm - @adia-ai/web-components - Versions diffs - 0.6.36 → 0.6.37 - Mend

@adia-ai/web-components 0.6.36 → 0.6.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/CHANGELOG.md +28 -1
package/components/badge/badge.a2ui.json +10 -0
package/components/badge/badge.css +70 -0
package/components/badge/badge.yaml +20 -0
package/components/blockquote/blockquote.a2ui.json +121 -0
package/components/blockquote/blockquote.class.js +68 -0
package/components/blockquote/blockquote.css +46 -0
package/components/blockquote/blockquote.d.ts +31 -0
package/components/blockquote/blockquote.js +17 -0
package/components/blockquote/blockquote.yaml +124 -0
package/components/button/button.css +11 -3
package/components/calendar-picker/calendar-picker.a2ui.json +15 -0
package/components/calendar-picker/calendar-picker.class.js +7 -1
package/components/calendar-picker/calendar-picker.yaml +14 -0
package/components/color-input/color-input.a2ui.json +2 -2
package/components/color-input/color-input.class.js +9 -2
package/components/color-input/color-input.yaml +2 -2
package/components/combobox/combobox.class.js +4 -0
package/components/context-menu/context-menu.a2ui.json +159 -0
package/components/context-menu/context-menu.class.js +275 -0
package/components/context-menu/context-menu.css +56 -0
package/components/context-menu/context-menu.d.ts +70 -0
package/components/context-menu/context-menu.js +17 -0
package/components/context-menu/context-menu.yaml +136 -0
package/components/date-range-picker/date-range-picker.a2ui.json +15 -0
package/components/date-range-picker/date-range-picker.class.js +2 -0
package/components/date-range-picker/date-range-picker.yaml +14 -0
package/components/datetime-picker/datetime-picker.a2ui.json +15 -0
package/components/datetime-picker/datetime-picker.class.js +3 -1
package/components/datetime-picker/datetime-picker.d.ts +2 -0
package/components/datetime-picker/datetime-picker.yaml +14 -0
package/components/empty-state/empty-state.class.js +2 -0
package/components/feed/feed.class.js +13 -5
package/components/feed/feed.css +14 -0
package/components/index.js +9 -0
package/components/integration-card/integration-card.class.js +9 -0
package/components/integration-card/integration-card.test.js +4 -3
package/components/nav-group/nav-group.css +7 -1
package/components/number-format/number-format.a2ui.json +180 -0
package/components/number-format/number-format.class.js +96 -0
package/components/number-format/number-format.css +18 -0
package/components/number-format/number-format.d.ts +68 -0
package/components/number-format/number-format.js +17 -0
package/components/number-format/number-format.yaml +204 -0
package/components/pagination/pagination.a2ui.json +19 -2
package/components/pagination/pagination.class.js +90 -37
package/components/pagination/pagination.css +32 -127
package/components/pagination/pagination.d.ts +8 -2
package/components/pagination/pagination.test.js +195 -0
package/components/pagination/pagination.yaml +22 -1
package/components/password-strength/password-strength.a2ui.json +152 -0
package/components/password-strength/password-strength.class.js +157 -0
package/components/password-strength/password-strength.css +80 -0
package/components/password-strength/password-strength.d.ts +59 -0
package/components/password-strength/password-strength.js +17 -0
package/components/password-strength/password-strength.yaml +153 -0
package/components/popover/popover.css +43 -23
package/components/popover/popover.yaml +8 -4
package/components/qr-code/QR-TEST.svg +4 -0
package/components/qr-code/qr-code.a2ui.json +154 -0
package/components/qr-code/qr-code.class.js +129 -0
package/components/qr-code/qr-code.css +41 -0
package/components/qr-code/qr-code.d.ts +83 -0
package/components/qr-code/qr-code.js +17 -0
package/components/qr-code/qr-code.yaml +203 -0
package/components/qr-code/qr-encoder.js +633 -0
package/components/relative-time/relative-time.a2ui.json +120 -0
package/components/relative-time/relative-time.class.js +136 -0
package/components/relative-time/relative-time.css +22 -0
package/components/relative-time/relative-time.d.ts +51 -0
package/components/relative-time/relative-time.js +17 -0
package/components/relative-time/relative-time.yaml +133 -0
package/components/segmented/segmented.class.js +5 -1
package/components/select/select.class.js +4 -0
package/components/skip-nav/skip-nav.a2ui.json +92 -0
package/components/skip-nav/skip-nav.class.js +45 -0
package/components/skip-nav/skip-nav.css +54 -0
package/components/skip-nav/skip-nav.d.ts +27 -0
package/components/skip-nav/skip-nav.js +12 -0
package/components/skip-nav/skip-nav.yaml +68 -0
package/components/slider/slider.a2ui.json +16 -1
package/components/slider/slider.class.js +264 -122
package/components/slider/slider.css +82 -2
package/components/slider/slider.d.ts +19 -3
package/components/slider/slider.test.js +55 -0
package/components/slider/slider.yaml +28 -6
package/components/table/table.class.js +29 -6
package/components/table/table.css +31 -4
package/components/table-toolbar/table-toolbar.class.js +3 -1
package/components/tag/tag.a2ui.json +3 -2
package/components/tag/tag.css +35 -11
package/components/tag/tag.d.ts +14 -0
package/components/tag/tag.test.js +35 -11
package/components/tag/tag.yaml +13 -7
package/components/toast/toast.class.js +12 -4
package/components/toc/toc.a2ui.json +159 -0
package/components/toc/toc.class.js +222 -0
package/components/toc/toc.css +92 -0
package/components/toc/toc.d.ts +61 -0
package/components/toc/toc.js +17 -0
package/components/toc/toc.yaml +180 -0
package/components/toolbar/toolbar.class.js +3 -0
package/components/visually-hidden/visually-hidden.a2ui.json +71 -0
package/components/visually-hidden/visually-hidden.class.js +14 -0
package/components/visually-hidden/visually-hidden.css +25 -0
package/components/visually-hidden/visually-hidden.d.ts +26 -0
package/components/visually-hidden/visually-hidden.js +12 -0
package/components/visually-hidden/visually-hidden.yaml +54 -0
package/core/anchor.js +19 -3
package/dist/web-components.min.css +1 -1
package/dist/web-components.min.js +100 -89
package/package.json +1 -1
package/styles/colors/semantics.css +11 -2
package/styles/components.css +9 -0
package/styles/resets.css +10 -0

package/components/relative-time/relative-time.a2ui.json ADDED Viewed

@@ -0,0 +1,120 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/RelativeTime.json",
+  "title": "RelativeTime",
+  "description": "Display a timestamp as a human-readable relative time — \"3 hours ago\",\n\"in 2 days\", \"yesterday\". Wraps `Intl.RelativeTimeFormat` for i18n\n+ auto-updates on a configurable interval (default every 60 s) so\nrendered text stays current without re-mounting.\n\nSet `[datetime]` to an ISO 8601 timestamp; the element computes the\ndelta against `Date.now()` and renders the formatted string. Pair\nwith a `title` for full-precision-on-hover (the element sets one\nautomatically from a default locale-aware long format unless you\noverride).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "RelativeTime"
+    },
+    "datetime": {
+      "description": "ISO 8601 timestamp (e.g. `2026-05-25T09:30:00Z`) or any string\nparseable by `Date`. Required for output — empty value renders\nnothing.\n",
+      "type": "string",
+      "default": ""
+    },
+    "locale": {
+      "description": "BCP-47 locale tag for the formatter. Empty defaults to the document\nlocale (`<html lang>`) then to the browser default.\n",
+      "type": "string",
+      "default": ""
+    },
+    "numeric": {
+      "description": "`Intl.RelativeTimeFormat` `numeric` option. `auto` lets the\nformatter substitute \"yesterday\" / \"tomorrow\" for ±1 day deltas;\n`always` keeps the numeric form (\"1 day ago\"). Defaults to `auto`.\n",
+      "type": "string",
+      "enum": [
+        "auto",
+        "always"
+      ],
+      "default": "auto"
+    },
+    "timeStyle": {
+      "description": "`Intl.RelativeTimeFormat` `style` option. `long` = \"3 hours ago\",\n`short` = \"3 hr. ago\", `narrow` = \"3h ago\". Defaults to `long`.\n",
+      "type": "string",
+      "enum": [
+        "long",
+        "short",
+        "narrow"
+      ],
+      "default": "long"
+    },
+    "updateInterval": {
+      "description": "Auto-refresh interval in seconds. The component restarts a\n`setInterval` tick that re-reads `Date.now()` and re-renders the\nrelative string. Set to `0` to disable auto-update (static\nrender). Default `60` (one minute) is the natural cadence for\n\"minutes ago\" granularity.\n",
+      "type": "number",
+      "default": 60
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "composes": [],
+    "events": {},
+    "examples": [
+      {
+        "description": "A timestamp rendered as a long relative phrase, auto-updating every 60 s.",
+        "a2ui": "[\n  {\n    \"id\": \"ts\",\n    \"component\": \"RelativeTime\",\n    \"datetime\": \"2026-05-25T09:00:00Z\"\n  }\n]\n",
+        "name": "default"
+      },
+      {
+        "description": "Tight UI affordances — narrow form for chat bubble timestamps.",
+        "a2ui": "[\n  {\n    \"id\": \"ts\",\n    \"component\": \"RelativeTime\",\n    \"datetime\": \"2026-05-25T11:30:00Z\",\n    \"timeStyle\": \"narrow\"\n  }\n]\n",
+        "name": "short-narrow"
+      },
+      {
+        "description": "A historical timestamp that doesn't need to tick (commit log row).",
+        "a2ui": "[\n  {\n    \"id\": \"ts\",\n    \"component\": \"RelativeTime\",\n    \"datetime\": \"2025-11-01T00:00:00Z\",\n    \"updateInterval\": 0\n  }\n]\n",
+        "name": "static-historical"
+      }
+    ],
+    "keywords": [
+      "relative-time",
+      "timeago",
+      "time",
+      "timestamp",
+      "ago",
+      "elapsed",
+      "relative",
+      "duration"
+    ],
+    "name": "UIRelativeTime",
+    "related": [
+      "text",
+      "badge",
+      "stat"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, displaying the formatted relative time.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "ago": [
+        "relative-time",
+        "timeago"
+      ],
+      "timestamp": [
+        "relative-time",
+        "time",
+        "datetime"
+      ]
+    },
+    "tag": "relative-time-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/relative-time/relative-time.class.js ADDED Viewed

@@ -0,0 +1,136 @@
+/**
+ * Non-side-effect class export for `<relative-time-ui>`.
+ *
+ * Importing this file gives you the class without auto-registering the
+ * tag. Useful for test isolation, subclassing with tag-name override,
+ * or selective composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/relative-time`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+/**
+ * <relative-time-ui datetime="2026-05-25T09:00:00Z"></relative-time-ui>
+ *
+ * Renders a timestamp as a human-readable relative phrase
+ * ("3 hours ago", "in 2 days", "yesterday") using
+ * `Intl.RelativeTimeFormat`. Re-renders on a configurable tick
+ * so the displayed text stays current.
+ */
+import { UIElement } from '../../core/element.js';
+// Threshold table — each row: { limit (seconds), unit, divisor }.
+// First row whose absolute delta is ≤ limit wins.
+const THRESHOLDS = [
+  { limit: 60,            unit: 'second', divisor: 1 },
+  { limit: 60 * 60,       unit: 'minute', divisor: 60 },
+  { limit: 60 * 60 * 24,  unit: 'hour',   divisor: 60 * 60 },
+  { limit: 60 * 60 * 24 * 7,  unit: 'day',  divisor: 60 * 60 * 24 },
+  { limit: 60 * 60 * 24 * 30, unit: 'week', divisor: 60 * 60 * 24 * 7 },
+  { limit: 60 * 60 * 24 * 365, unit: 'month', divisor: 60 * 60 * 24 * 30 },
+  { limit: Infinity,           unit: 'year',  divisor: 60 * 60 * 24 * 365 },
+];
+export class UIRelativeTime extends UIElement {
+  static properties = {
+    datetime:       { type: String, default: '',     reflect: true },
+    timeStyle:      { type: String, default: 'long', reflect: true, attribute: 'time-style' },
+    numeric:        { type: String, default: 'auto', reflect: true },
+    locale:         { type: String, default: '',     reflect: true },
+    updateInterval: { type: Number, default: 60,     reflect: true, attribute: 'update-interval' },
+  };
+  static template = () => null;
+  #tickHandle = null;
+  #resolveLocale() {
+    if (this.locale) return this.locale;
+    return this.ownerDocument?.documentElement?.lang || undefined;
+  }
+  #format() {
+    if (!this.datetime) return '';
+    const target = new Date(this.datetime);
+    if (Number.isNaN(target.getTime())) return '';
+    const deltaSec = (target.getTime() - Date.now()) / 1000;
+    const abs = Math.abs(deltaSec);
+    const row = THRESHOLDS.find((t) => abs <= t.limit) || THRESHOLDS[THRESHOLDS.length - 1];
+    const value = Math.round(deltaSec / row.divisor);
+    try {
+      const fmt = new Intl.RelativeTimeFormat(this.#resolveLocale(), {
+        style:   this.timeStyle,
+        numeric: this.numeric,
+      });
+      return fmt.format(value, row.unit);
+    } catch {
+      // Fallback if Intl.RelativeTimeFormat unsupported (very old browsers).
+      const past = deltaSec < 0;
+      const absVal = Math.abs(value);
+      return past ? `${absVal} ${row.unit}${absVal === 1 ? '' : 's'} ago` : `in ${absVal} ${row.unit}${absVal === 1 ? '' : 's'}`;
+    }
+  }
+  #fullTitle() {
+    if (!this.datetime) return '';
+    const target = new Date(this.datetime);
+    if (Number.isNaN(target.getTime())) return '';
+    try {
+      return new Intl.DateTimeFormat(this.#resolveLocale(), {
+        dateStyle: 'full',
+        timeStyle: 'long',
+      }).format(target);
+    } catch {
+      return target.toString();
+    }
+  }
+  connected() {
+    super.connected();
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'time');
+    this.#startTick();
+  }
+  render() {
+    const text = this.#format();
+    this.textContent = text;
+    // Set a hover-title with the full datetime for precision-on-hover
+    // unless the consumer set their own title attribute.
+    if (text && !this.hasAttribute('data-suppress-title')) {
+      this.setAttribute('title', this.#fullTitle());
+    }
+    // Mirror the timestamp to a `datetime` attribute on a child <time>
+    // would be ideal but the element IS the time; expose via aria.
+    if (this.datetime) {
+      this.setAttribute('datetime', this.datetime);
+    }
+    // Restart tick if updateInterval changed.
+    this.#startTick();
+  }
+  #startTick() {
+    this.#stopTick();
+    const interval = Number(this.updateInterval);
+    if (!Number.isFinite(interval) || interval <= 0) return;
+    this.#tickHandle = setInterval(() => {
+      // Re-render by re-running the formatter; signal-backed render() is
+      // overkill since only Date.now() changed.
+      this.textContent = this.#format();
+    }, interval * 1000);
+  }
+  #stopTick() {
+    if (this.#tickHandle != null) {
+      clearInterval(this.#tickHandle);
+      this.#tickHandle = null;
+    }
+  }
+  disconnected() {
+    super.disconnected();
+    this.#stopTick();
+  }
+}

package/components/relative-time/relative-time.css ADDED Viewed

@@ -0,0 +1,22 @@
+/* ═══════════════════════════════════════════════════════════════
+   RELATIVE-TIME-UI — Auto-updating relative timestamp display.
+   ═══════════════════════════════════════════════════════════════ */
+@scope (relative-time-ui) {
+  :where(:scope) {
+    --relative-time-fg-default: var(--a-fg-muted);
+    --relative-time-font-default: inherit;
+    --relative-time-size-default: inherit;
+  }
+  :scope {
+    /* Inline display so it sits inline with prose / inside a row.
+       Overridable via the standard size-attr CSS or by setting display
+       directly. */
+    display: inline;
+    color: var(--relative-time-fg, var(--relative-time-fg-default));
+    font-family: var(--relative-time-font, var(--relative-time-font-default));
+    font-size: var(--relative-time-size, var(--relative-time-size-default));
+    font-variant-numeric: tabular-nums;
+  }
+}

package/components/relative-time/relative-time.d.ts ADDED Viewed

@@ -0,0 +1,51 @@
+/**
+ * `<relative-time-ui>` — Display a timestamp as a human-readable relative time — "3 hours ago",
+"in 2 days", "yesterday". Wraps `Intl.RelativeTimeFormat` for i18n
++ auto-updates on a configurable interval (default every 60 s) so
+rendered text stays current without re-mounting.
+Set `[datetime]` to an ISO 8601 timestamp; the element computes the
+delta against `Date.now()` and renders the formatted string. Pair
+with a `title` for full-precision-on-hover (the element sets one
+automatically from a default locale-aware long format unless you
+override).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/relative-time
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+import { UIElement } from '../../core/element.js';
+export class UIRelativeTime extends UIElement {
+  /** ISO 8601 timestamp (e.g. `2026-05-25T09:30:00Z`) or any string
+parseable by `Date`. Required for output — empty value renders
+nothing.
+ */
+  datetime: string;
+  /** BCP-47 locale tag for the formatter. Empty defaults to the document
+locale (`<html lang>`) then to the browser default.
+ */
+  locale: string;
+  /** `Intl.RelativeTimeFormat` `numeric` option. `auto` lets the
+formatter substitute "yesterday" / "tomorrow" for ±1 day deltas;
+`always` keeps the numeric form ("1 day ago"). Defaults to `auto`.
+ */
+  numeric: 'auto' | 'always';
+  /** `Intl.RelativeTimeFormat` `style` option. `long` = "3 hours ago",
+`short` = "3 hr. ago", `narrow` = "3h ago". Defaults to `long`.
+ */
+  timeStyle: 'long' | 'short' | 'narrow';
+  /** Auto-refresh interval in seconds. The component restarts a
+`setInterval` tick that re-reads `Date.now()` and re-renders the
+relative string. Set to `0` to disable auto-update (static
+render). Default `60` (one minute) is the natural cadence for
+"minutes ago" granularity.
+ */
+  updateInterval: number;
+}

package/components/relative-time/relative-time.js ADDED Viewed

@@ -0,0 +1,17 @@
+/**
+ * `<relative-time-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIRelativeTime } from '@adia-ai/web-components/components/relative-time/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+import { defineIfFree } from '../../core/register.js';
+import { UIRelativeTime } from './relative-time.class.js';
+defineIfFree('relative-time-ui', UIRelativeTime);
+export { UIRelativeTime };

package/components/relative-time/relative-time.yaml ADDED Viewed

@@ -0,0 +1,133 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIRelativeTime
+tag: relative-time-ui
+status: stable
+component: RelativeTime
+category: display
+version: 1
+description: |
+  Display a timestamp as a human-readable relative time — "3 hours ago",
+  "in 2 days", "yesterday". Wraps `Intl.RelativeTimeFormat` for i18n
+  + auto-updates on a configurable interval (default every 60 s) so
+  rendered text stays current without re-mounting.
+  Set `[datetime]` to an ISO 8601 timestamp; the element computes the
+  delta against `Date.now()` and renders the formatted string. Pair
+  with a `title` for full-precision-on-hover (the element sets one
+  automatically from a default locale-aware long format unless you
+  override).
+props:
+  datetime:
+    description: |
+      ISO 8601 timestamp (e.g. `2026-05-25T09:30:00Z`) or any string
+      parseable by `Date`. Required for output — empty value renders
+      nothing.
+    type: string
+    default: ""
+    reflect: true
+  timeStyle:
+    description: |
+      `Intl.RelativeTimeFormat` `style` option. `long` = "3 hours ago",
+      `short` = "3 hr. ago", `narrow` = "3h ago". Defaults to `long`.
+    type: string
+    default: long
+    enum: [long, short, narrow]
+    reflect: true
+    attribute: time-style
+  numeric:
+    description: |
+      `Intl.RelativeTimeFormat` `numeric` option. `auto` lets the
+      formatter substitute "yesterday" / "tomorrow" for ±1 day deltas;
+      `always` keeps the numeric form ("1 day ago"). Defaults to `auto`.
+    type: string
+    default: auto
+    enum: [auto, always]
+    reflect: true
+  locale:
+    description: |
+      BCP-47 locale tag for the formatter. Empty defaults to the document
+      locale (`<html lang>`) then to the browser default.
+    type: string
+    default: ""
+    reflect: true
+  updateInterval:
+    description: |
+      Auto-refresh interval in seconds. The component restarts a
+      `setInterval` tick that re-reads `Date.now()` and re-renders the
+      relative string. Set to `0` to disable auto-update (static
+      render). Default `60` (one minute) is the natural cadence for
+      "minutes ago" granularity.
+    type: number
+    default: 60
+    reflect: true
+    attribute: update-interval
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, displaying the formatted relative time.
+traits: []
+tokens: {}
+a2ui:
+  rules:
+    - rule: "Use for displaying a single timestamp as a relative phrase. Self-updates on a tick so the rendered text stays current; no parent re-render required."
+      reason: "Self-contained relative-time display."
+    - rule: "Set [datetime] to an ISO 8601 string. Empty datetime renders nothing — do not stamp a relative-time-ui element until you have a timestamp value."
+      reason: "Datetime contract."
+    - rule: "[update-interval=0] freezes the render (no tick). Use for historical timestamps that will never become 'just now' (audit-log rows, version-history entries from days+ ago)."
+      reason: "Performance — skip the tick where it's pointless."
+anti_patterns: []
+examples:
+  - name: default
+    description: A timestamp rendered as a long relative phrase, auto-updating every 60 s.
+    a2ui: |
+      [
+        {
+          "id": "ts",
+          "component": "RelativeTime",
+          "datetime": "2026-05-25T09:00:00Z"
+        }
+      ]
+  - name: short-narrow
+    description: Tight UI affordances — narrow form for chat bubble timestamps.
+    a2ui: |
+      [
+        {
+          "id": "ts",
+          "component": "RelativeTime",
+          "datetime": "2026-05-25T11:30:00Z",
+          "timeStyle": "narrow"
+        }
+      ]
+  - name: static-historical
+    description: A historical timestamp that doesn't need to tick (commit log row).
+    a2ui: |
+      [
+        {
+          "id": "ts",
+          "component": "RelativeTime",
+          "datetime": "2025-11-01T00:00:00Z",
+          "updateInterval": 0
+        }
+      ]
+keywords:
+  - relative-time
+  - timeago
+  - time
+  - timestamp
+  - ago
+  - elapsed
+  - relative
+  - duration
+synonyms:
+  timestamp:
+    - relative-time
+    - time
+    - datetime
+  ago:
+    - relative-time
+    - timeago
+related:
+  - text
+  - badge
+  - stat

package/components/segmented/segmented.class.js CHANGED Viewed

@@ -107,7 +107,11 @@ export class UISegmented extends UIFormElement {
     // Runs before the empty-guard so an all-bare-<segment> group still warns.
     if (!UISegmented.#warnedNonSegment.has(this)) {
       const bad = [...this.children].find(
-        (c) => c.tagName !== 'SEGMENT-UI' && !c.hasAttribute('data-indicator'),
+        (c) => c.tagName !== 'SEGMENT-UI'
+            && !c.hasAttribute('data-indicator')
+            // Template engine wraps .map() results in <span style="display:contents">.
+            // These are transparent DOM housekeeping nodes — not consumer mistakes.
+            && !(c.tagName === 'SPAN' && c.style.display === 'contents'),
       );
       if (bad) {
         UISegmented.#warnedNonSegment.add(this);

package/components/select/select.class.js CHANGED Viewed

@@ -40,6 +40,10 @@ export class UISelect extends UIFormElement {
   static properties = {
     ...UIFormElement.properties,
     placeholder: { type: String,  default: 'Select...', reflect: true },
+    // Universal [size] system — sm/md/lg → 24/30/36 px (with density).
+    // yaml documented this as reflect:true since v1; closing the
+    // static-properties gap so el.size = 'lg' actually updates.
+    size:        { type: String,  default: 'md', reflect: true },
     open:        { type: Boolean, default: false, reflect: true },
     label:       { type: String,  default: '', reflect: true },
     icon:        { type: String,  default: '', reflect: true },

package/components/skip-nav/skip-nav.a2ui.json ADDED Viewed

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/SkipNav.json",
+  "title": "SkipNav",
+  "description": "Accessibility utility — visually-hidden link that becomes visible on\nkeyboard focus, letting keyboard users skip past repetitive navigation\nto the main content. WCAG 2.1 Success Criterion 2.4.1 \"Bypass Blocks\".\n\nPlace as the FIRST focusable element on the page (typically inside\n`<body>` before any nav / shell chrome). Target an `id` on your main\ncontent region (commonly `#main` / `#main-content`).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "SkipNav"
+    },
+    "target": {
+      "description": "CSS id (with leading `#`) of the main content region the link skips to.",
+      "type": "string",
+      "default": "#main"
+    },
+    "text": {
+      "description": "Link label. Defaults to \"Skip to main content\"; localize per site.",
+      "type": "string",
+      "default": "Skip to main content"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<body><skip-nav-ui></skip-nav-ui><header>…nav…</header><main id=\"main\" tabindex=\"-1\">…</main></body>",
+        "why": "The skip link comes AFTER the nav — keyboard users have already tabbed through everything you wanted them to skip.",
+        "wrong": "<header>…nav…</header><skip-nav-ui></skip-nav-ui><main id=\"main\">…</main>"
+      }
+    ],
+    "category": "utility",
+    "composes": [],
+    "events": {},
+    "examples": [
+      {
+        "description": "Standard skip-nav at the top of the page.",
+        "a2ui": "[\n  { \"id\": \"skip\", \"component\": \"SkipNav\", \"target\": \"#main\" }\n]\n",
+        "name": "default"
+      }
+    ],
+    "keywords": [
+      "skip-nav",
+      "skip-link",
+      "bypass-blocks",
+      "a11y",
+      "accessibility",
+      "keyboard-navigation"
+    ],
+    "name": "UISkipNav",
+    "related": [
+      "visually-hidden"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default — link is visually hidden but focusable.",
+        "name": "idle"
+      },
+      {
+        "description": "Link is focused via keyboard and visible at the top of the viewport.",
+        "attribute": ":focus-within",
+        "name": "focused"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {},
+    "tag": "skip-nav-ui",
+    "tokens": {
+      "--skip-nav-bg": {
+        "description": "Background of the visible (focused) skip link.",
+        "default": "var(--a-accent-bg)"
+      },
+      "--skip-nav-fg": {
+        "description": "Foreground of the visible (focused) skip link.",
+        "default": "var(--a-accent-fg)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/skip-nav/skip-nav.class.js ADDED Viewed

@@ -0,0 +1,45 @@
+/**
+ * `<skip-nav-ui>` — keyboard skip-link for WCAG 2.4.1 (Bypass Blocks).
+ *
+ * Renders an <a href="[target]"> that's visually hidden until focused,
+ * then pops to the top-left of the viewport. On click, the browser
+ * navigates to the target hash AND we move focus programmatically (the
+ * native hash-jump doesn't always move focus; per spec it should land
+ * on the target so a screen-reader resumes there).
+ */
+import { UIElement, html } from '../../core/element.js';
+export class UISkipNav extends UIElement {
+  static properties = {
+    target: { type: String, default: '#main',                  reflect: true },
+    text:   { type: String, default: 'Skip to main content',   reflect: true },
+  };
+  static template = ({ target, text }) => html`<a href="${target}" data-skip-link>${text}</a>`;
+  connected() {
+    super.connected();
+    this.addEventListener('click', this.#onClick);
+  }
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#onClick);
+  }
+  #onClick = (e) => {
+    const link = e.target.closest('[data-skip-link]');
+    if (!link) return;
+    const id = this.target.replace(/^#/, '');
+    const tgt = document.getElementById(id);
+    if (!tgt) return;
+    // Don't preventDefault — browser still updates the hash for the
+    // back-button. But we ALSO focus the target so AT cursor moves there
+    // (browser hash-jump scrolls but doesn't always move focus).
+    queueMicrotask(() => {
+      if (!tgt.hasAttribute('tabindex')) tgt.setAttribute('tabindex', '-1');
+      tgt.focus({ preventScroll: false });
+    });
+  };
+}