@adia-ai/web-components 0.8.41 → 0.8.43

package/components/toggle-group/toggle-group.a2ui.json

@@ -1,148 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/ToggleGroup.json",
-  "title": "ToggleGroup",
-  "description": "DEPRECATED (gh#1369) — use <segmented-ui multiple> + <segment-ui> instead. Multi-select button group (unlike <segmented-ui> which is single-select by default). Hosts <toggle-option-ui> children, each independently toggleable; emits change events with the active value set.",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "component": {
-      "const": "ToggleGroup"
-    },
-    "single": {
-      "description": "When true, restrict to one active option (single-select) — clicking the already-selected option again CLEARS it (empty value), unlike a native radiogroup. Migration (gh#1369): [single]=true maps to plain <segmented-ui> (no [multiple]) — note segmented-ui's single-select never clears on re-click, it's standard radiogroup semantics; the default (false, multi-select) maps to <segmented-ui multiple>.",
-      "type": "boolean",
-      "default": false
-    },
-    "value": {
-      "description": "Comma-separated selected values",
-      "type": "string",
-      "default": ""
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "allowedChildren": [
-      "ToggleOption"
-    ],
-    "anti_patterns": [],
-    "category": "navigation",
-    "composes": [],
-    "events": {
-      "change": {
-        "description": "Fired when selection changes. detail: { value }",
-        "detail": {
-          "value": {
-            "description": "New toggle-group value.",
-            "type": "string"
-          }
-        }
-      }
-    },
-    "examples": [
-      {
-        "description": "Basic ToggleGroup 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\": \"ToggleGroup\",\n    \"value\": \"\"\n  }\n]",
-        "name": "basic-toggle-group"
-      }
-    ],
-    "keywords": [
-      "togglegroup",
-      "toggle-group",
-      "toggle",
-      "group"
-    ],
-    "name": "UIToggleGroup",
-    "parts": {},
-    "related": [
-      "ToggleOption",
-      "Segmented",
-      "Radio"
-    ],
-    "slots": {
-      "default": {
-        "description": "Default slot — primary child content."
-      }
-    },
-    "states": [
-      {
-        "description": "Default, ready for interaction.",
-        "name": "idle"
-      }
-    ],
-    "status": "deprecated",
-    "synonyms": {
-      "toggle-group": [
-        "segmented-control",
-        "option-group",
-        "toggle-set"
-      ]
-    },
-    "tag": "toggle-group-ui",
-    "tokens": {
-      "--toggle-group-border": {
-        "description": "Border color of the group container"
-      },
-      "--toggle-group-height": {
-        "description": "Height of the group container"
-      },
-      "--toggle-group-radius": {
-        "description": "Border radius of the group container"
-      },
-      "--toggle-option-bg-hover": {
-        "description": "Background color on hover"
-      },
-      "--toggle-option-border": {
-        "description": "Border color between adjacent options"
-      },
-      "--toggle-option-duration": {
-        "description": "Transition duration"
-      },
-      "--toggle-option-easing": {
-        "description": "Transition easing function"
-      },
-      "--toggle-option-fg": {
-        "description": "Default text color"
-      },
-      "--toggle-option-fg-disabled": {
-        "description": "Text color when disabled"
-      },
-      "--toggle-option-fg-hover": {
-        "description": "Text color on hover"
-      },
-      "--toggle-option-focus-ring": {
-        "description": "Focus ring box-shadow"
-      },
-      "--toggle-option-font-size": {
-        "description": "Font size for option text and icons"
-      },
-      "--toggle-option-gap": {
-        "description": "Gap between icon and text within an option"
-      },
-      "--toggle-option-height": {
-        "description": "Min-height of each option"
-      },
-      "--toggle-option-px": {
-        "description": "Horizontal padding of each option"
-      },
-      "--toggle-option-selected-bg": {
-        "description": "Background color when selected"
-      },
-      "--toggle-option-selected-fg": {
-        "description": "Text color when selected"
-      }
-    },
-    "traits": [],
-    "version": 1
-  }
-}

package/components/toggle-group/toggle-group.class.js

@@ -1,195 +0,0 @@
-/**
- * Non-side-effect class export for `<toggle-option-ui>` (+ co-located primitives).
- *
- * Importing this file gives you the class(es) 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/toggle-group`
- * (which imports this file + calls `defineIfFree()`).
- *
- * @see ../../USAGE.md#registration--auto-vs-explicit
- */
-
-/**
- * DEPRECATED (gh#1369, #1363 C1, ADR-0057) — use <segmented-ui multiple> +
- * <segment-ui> instead (same comma-separated value encoding). Kept working
- * as-is for existing consumers; no behavior change.
- *
- * <toggle-group-ui value="bold,italic">
- *   <toggle-option-ui value="bold" icon="text-b"></toggle-option-ui>
- *   <toggle-option-ui value="italic" icon="text-italic"></toggle-option-ui>
- *   <toggle-option-ui value="underline" icon="text-underline"></toggle-option-ui>
- * </toggle-group-ui>
- *
- * Multi-select button group (unlike segmented which is single-select by default).
- *
- * Properties:
- *   value  — comma-separated selected values
- *   single — restrict to one active option at a time (default false: multi-select)
- */
-
-import { UIElement } from '../../core/element.js';
-
-// ── Toggle Option ──
-//
-// Parent-managed. Selection state flows through `toggle-group-ui`'s `value`
-// (and `single` mode flag) — the group's `value` stays the single source of
-// truth. ADR-0056 (gh#1303): the child's current-state surface is the
-// declared, reflected `selected` prop below, converging onto <segment-ui>'s
-// mechanism (yaml → catalog → generative grammar) instead of a private
-// stamp. Don't set `selected` directly on an option; drive the group's
-// `value` instead.
-
-export class UIToggleOption extends UIElement {
-  static properties = {
-    value:    { type: String,  default: '', reflect: true },
-    text:     { type: String,  default: '', reflect: true },
-    icon:     { type: String,  default: '', reflect: true },
-    disabled: { type: Boolean, default: false, reflect: true },
-    selected: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #stamped = false;
-
-  // gh#1369 (#1363 C1): DEPRECATED — use <segment-ui> inside
-  // <segmented-ui multiple> instead. One-time warn, same pattern as
-  // UIFormElement's #labelWarned (form.js) — informational only, behavior
-  // is unchanged.
-  static #deprecationWarned = false;
-
-  connected() {
-    if (!UIToggleOption.#deprecationWarned) {
-      UIToggleOption.#deprecationWarned = true;
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[AdiaUI] <toggle-option-ui> is deprecated — use <segment-ui> ' +
-        'inside <segmented-ui multiple> instead (gh#1369, #1363 C1). ' +
-        'Kept working as-is; no behavior change.',
-      );
-    }
-    this.setAttribute('role', 'button');
-    this.setAttribute('tabindex', '0');
-  }
-
-  render() {
-    if (!this.#stamped) {
-      this.#stamped = true;
-      this.#stamp();
-    }
-    if (this.disabled) this.setAttribute('aria-disabled', 'true');
-    else this.removeAttribute('aria-disabled');
-    this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
-  }
-
-  #stamp() {
-    let inner = '';
-    if (this.icon) inner += `<icon-ui name="${this.icon}"></icon-ui>`;
-    if (this.text) inner += `<span data-text>${this.text}</span>`;
-    this.innerHTML = inner;
-  }
-
-  disconnected() {
-    this.#stamped = false;
-  }
-}
-
-export class UIToggleGroup extends UIElement {
-  static properties = {
-    value:  { type: String,  default: '',    reflect: true },
-    single: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #bound = false;
-
-  // gh#1369 (#1363 C1): DEPRECATED — use <segmented-ui multiple> instead.
-  static #deprecationWarned = false;
-
-  get #valueSet() {
-    return new Set(this.value ? this.value.split(',').map(v => v.trim()).filter(Boolean) : []);
-  }
-
-  connected() {
-    if (!UIToggleGroup.#deprecationWarned) {
-      UIToggleGroup.#deprecationWarned = true;
-      // #deprecationWarned is a one-shot PER CLASS (not per instance,
-      // matching UIFormElement's #labelWarned pattern) — the message can't
-      // branch on THIS instance's [single] alone without misleading a page
-      // that mixes single and non-single toggle-groups, so it states both
-      // mappings instead (gh#1369 review).
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[AdiaUI] <toggle-group-ui> is deprecated (gh#1369, #1363 C1) — ' +
-        'migrate to <segmented-ui multiple> + <segment-ui> (multi-select, ' +
-        'the default) or plain <segmented-ui> with no [multiple] (when ' +
-        '[single] is set — note single-select never clears on re-click, ' +
-        'unlike [single]\'s clear-on-reclick). Same comma-separated value ' +
-        'encoding either way. Kept working as-is; no behavior change.',
-      );
-    }
-    if (!this.#bound) {
-      this.#bound = true;
-      this.addEventListener('click', this.#onClick);
-      this.addEventListener('keydown', this.#onKey);
-    }
-    this.setAttribute('role', 'group');
-  }
-
-  render() {
-    const selected = this.#valueSet;
-    for (const opt of this.querySelectorAll('toggle-option-ui')) {
-      const optVal = opt.value || opt.getAttribute('value') || '';
-      const isSelected = selected.has(optVal);
-      // ADR-0056 (gh#1303): `selected` is the declared, reflected mechanism —
-      // converges onto <segment-ui>'s convention (opt's own render() stamps
-      // aria-pressed from it).
-      opt.selected = isSelected;
-    }
-  }
-
-  #toggle(opt) {
-    if (opt.disabled) return;
-    const optVal = opt.value || opt.getAttribute('value') || '';
-    if (!optVal) return;
-
-    const selected = this.#valueSet;
-
-    if (this.single) {
-      if (selected.has(optVal)) {
-        selected.clear();
-      } else {
-        selected.clear();
-        selected.add(optVal);
-      }
-    } else {
-      if (selected.has(optVal)) selected.delete(optVal);
-      else selected.add(optVal);
-    }
-
-    this.value = [...selected].join(',');
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
-  }
-
-  #onClick = (e) => {
-    const opt = e.target.closest('toggle-option-ui');
-    if (opt && this.contains(opt)) this.#toggle(opt);
-  };
-
-  #onKey = (e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      const opt = e.target.closest('toggle-option-ui');
-      if (opt && this.contains(opt)) this.#toggle(opt);
-    }
-  };
-
-  disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKey);
-    this.#bound = false;
-  }
-}

package/components/toggle-group/toggle-group.css

@@ -1,127 +0,0 @@
-/* DEPRECATED (gh#1369, #1363 C1, ADR-0057): <toggle-group-ui>/
-   <toggle-option-ui> are superseded by <segmented-ui multiple> +
-   <segment-ui> (segment.css owns the equivalent [multiple]-mode styling).
-   This file is kept as-is for existing consumers — no behavior change.
-
-   Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[selected]`
-   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
-   Selectors moved out. The @scope is `(toggle-option-ui)` — NOT
-   `(toggle-group-ui)` — so the moved-out selectors target
-   `toggle-option-ui:hover` / `toggle-option-ui[selected]`. See
-   docs/BROWSER-COMPAT.md §3a; mirrors segment.css. */
-toggle-option-ui:not([disabled]):hover {
-  --toggle-option-bg: var(--toggle-option-bg-hover);
-  --toggle-option-fg: var(--toggle-option-fg-hover);
-}
-
-/* ADR-0056 (gh#1303): converged onto <segment-ui>'s declared, reflected
-   [selected] prop, set by <toggle-group-ui> (toggle-group.class.js). */
-toggle-option-ui[selected] {
-  --toggle-option-bg: var(--toggle-option-selected-bg);
-  --toggle-option-fg: var(--toggle-option-selected-fg);
-}
-
-@scope (toggle-group-ui) {
-  :where(:scope) {
-    /* ── Tokens ── */
-    --toggle-group-border-width: 1px;
-    --toggle-group-border-color: var(--a-ui-border);
-    --toggle-group-radius:       var(--a-radius);
-    --toggle-group-height:       var(--a-size);
-    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
-}
-
-  :scope {
-    box-sizing: border-box;
-    display: flex;
-    border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
-    border-radius: var(--toggle-group-radius);
-    overflow: hidden;
-  }
-
-  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
-  :scope[inline] { display: inline-flex; }
-}
-
-@scope (toggle-option-ui) {
-  :where(:scope) {
-    /* ── Layout ── */
-    --toggle-option-gap:          var(--a-space-1);
-    --toggle-option-height:       var(--a-size);
-    --toggle-option-px:           var(--a-ui-px);
-    --toggle-option-border-width: 1px;
-    --toggle-option-border-color: var(--a-ui-border);
-
-    /* ── Colors ── */
-    --toggle-option-bg:           transparent;
-    --toggle-option-fg:           var(--a-fg-muted);
-    --toggle-option-fg-hover:     var(--md-sys-color-neutral-on-surface);
-    --toggle-option-bg-hover:     var(--a-bg-muted);
-    --toggle-option-selected-bg:  var(--md-sys-color-primary-container);
-    --toggle-option-selected-fg:  var(--a-primary-bg);
-    --toggle-option-fg-disabled:  var(--a-ui-text-disabled);
-
-    /* ── Typography ── */
-    --toggle-option-font-size:    var(--a-ui-size);
-
-    /* ── Transition ── */
-    --toggle-option-duration:     var(--a-duration-fast);
-    --toggle-option-easing:       var(--a-easing);
-
-    /* ── State ── */
-    --toggle-option-focus-ring:   var(--a-focus-ring);
-  }
-
-  :scope {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--toggle-option-gap);
-    min-height: var(--toggle-option-height);
-    padding: 0 var(--toggle-option-px);
-    border: none;
-    background: var(--toggle-option-bg);
-    color: var(--toggle-option-fg);
-    font: inherit;
-    /* font-family floor — see segment.css rationale (inline default; this
-       scope's tokens don't use the -default suffix). */
-    font-family: var(--toggle-option-font-family, var(--a-font-family-ui));
-    font-size: var(--toggle-option-font-size);
-    cursor: pointer;
-    transition:
-      background var(--toggle-option-duration) var(--toggle-option-easing),
-      color var(--toggle-option-duration) var(--toggle-option-easing);
-  }
-
-  /* Adjacent options share borders */
-  :scope + :scope {
-    border-inline-start: var(--toggle-option-border-width) solid var(--toggle-option-border-color);
-  }
-
-  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
-
-  :scope:focus-visible {
-    outline: none;
-    box-shadow: var(--toggle-option-focus-ring);
-    border-color: transparent;
-    z-index: 1;
-  }
-
-  /* [selected] state rule moved outside @scope — see Safari 17.x bug note at top. */
-
-  :scope[disabled] {
-    --toggle-option-fg: var(--toggle-option-fg-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* Icon sizing */
-  icon-ui {
-    --a-icon-size: var(--toggle-option-font-size);
-  }
-
-  [data-text] {
-    white-space: nowrap;
-  }
-}

package/components/toggle-group/toggle-group.d.ts

@@ -1,50 +0,0 @@
-/**
- * `<toggle-group-ui>` — DEPRECATED (gh#1369) — use <segmented-ui multiple> + <segment-ui> instead. Multi-select button group (unlike <segmented-ui> which is single-select by default). Hosts <toggle-option-ui> children, each independently toggleable; emits change events with the active value set.
- *
- * @see https://ui-kit.exe.xyz/site/components/toggle-group
- *
- * 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 interface ToggleGroupChangeEventDetail {
-  /** New toggle-group value. */
-  value: string;
-}
-
-export type ToggleGroupChangeEvent = CustomEvent<ToggleGroupChangeEventDetail>;
-
-export class UIToggleGroup extends UIElement {
-  /** When true, restrict to one active option (single-select) — clicking the already-selected option again CLEARS it (empty value), unlike a native radiogroup. Migration (gh#1369): [single]=true maps to plain <segmented-ui> (no [multiple]) — note segmented-ui's single-select never clears on re-click, it's standard radiogroup semantics; the default (false, multi-select) maps to <segmented-ui multiple>. */
-  single: boolean;
-  /** Comma-separated selected values */
-  value: string;
-
-  addEventListener(type: 'change', listener: (ev: ToggleGroupChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: UIToggleGroup, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
-}
-
-export class UIToggleOption extends UIElement {
-  /** Disabled state — blocks pointer + keyboard activation. */
-  disabled: boolean;
-  /** Optional Phosphor icon name; renders as a leading icon. */
-  icon: string;
-  /** Whether this option is currently selected. Managed by the parent
-<toggle-group-ui> container (ADR-0056) — don't set directly; the group's
-`value` is the single source of truth. Converges onto <segment-ui>'s
-declared reflected-prop mechanism. */
-  selected: boolean;
-  /** Visible label text. */
-  text: string;
-  /** Stable identifier matched against the parent group's `value`. */
-  value: string;
-}

package/components/toggle-group/toggle-group.examples.md

@@ -1,33 +0,0 @@
-# toggle-group — Examples
-
-## icon group
-
-```html
-<toggle-group-ui value="bold">
-  <toggle-option-ui value="bold" icon="text-b"></toggle-option-ui>
-  <toggle-option-ui value="italic" icon="text-italic"></toggle-option-ui>
-  <toggle-option-ui value="underline" icon="text-underline"></toggle-option-ui>
-</toggle-group-ui>
-```
-
-## text group
-
-```html
-<toggle-group-ui value="week">
-  <toggle-option-ui value="day" text="Day"></toggle-option-ui>
-  <toggle-option-ui value="week" text="Week"></toggle-option-ui>
-  <toggle-option-ui value="month" text="Month"></toggle-option-ui>
-  <toggle-option-ui value="year" text="Year"></toggle-option-ui>
-</toggle-group-ui>
-```
-
-## single select
-
-```html
-<toggle-group-ui value="left" single>
-  <toggle-option-ui value="left" icon="text-align-left"></toggle-option-ui>
-  <toggle-option-ui value="center" icon="text-align-center"></toggle-option-ui>
-  <toggle-option-ui value="right" icon="text-align-right"></toggle-option-ui>
-  <toggle-option-ui value="justify" icon="text-align-justify"></toggle-option-ui>
-</toggle-group-ui>
-```

package/components/toggle-group/toggle-group.js

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