@adia-ai/web-components 0.0.27 → 0.0.29

package/patterns/section-nav-group/section-nav-group.js

@@ -1,84 +0,0 @@
-/**
- * <section-nav-group-ui> — Labeled group inside section-nav-ui.
- * When [collapsible], the header row becomes a keyboard-activatable toggle
- * that emits `group-toggle` (detail: { text, open }).
- */
-
-import { AdiaElement } from '../../core/element.js';
-
-class AdiaSectionNavGroup extends AdiaElement {
-  static properties = {
-    text:        { type: String,  default: '',    reflect: true },
-    icon:        { type: String,  default: '',    reflect: true },
-    collapsible: { type: Boolean, default: false, reflect: true },
-    open:        { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #headerEl = null;
-
-  #onHeaderClick = () => {
-    if (!this.collapsible) return;
-    this.open = !this.open;
-    this.dispatchEvent(new CustomEvent('group-toggle', {
-      bubbles: true,
-      detail: { text: this.text, open: this.open },
-    }));
-  };
-
-  #onHeaderKey = (e) => {
-    if (!this.collapsible) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.#onHeaderClick();
-    }
-  };
-
-  connected() {
-    this.#headerEl = this.querySelector(':scope > [data-section-nav-group-header]');
-    if (!this.#headerEl) {
-      this.#headerEl = document.createElement('div');
-      this.#headerEl.setAttribute('data-section-nav-group-header', '');
-      this.#buildHeader();
-      this.insertBefore(this.#headerEl, this.firstChild);
-    }
-    if (this.collapsible) {
-      this.#headerEl.setAttribute('role', 'button');
-      this.#headerEl.setAttribute('tabindex', '0');
-      this.#headerEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
-      this.#headerEl.addEventListener('click', this.#onHeaderClick);
-      this.#headerEl.addEventListener('keydown', this.#onHeaderKey);
-    }
-  }
-
-  render() {
-    if (!this.#headerEl) return;
-    this.#buildHeader();
-    if (this.collapsible) {
-      this.#headerEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
-    } else {
-      this.#headerEl.removeAttribute('role');
-      this.#headerEl.removeAttribute('tabindex');
-      this.#headerEl.removeAttribute('aria-expanded');
-    }
-  }
-
-  #buildHeader() {
-    const iconHtml = this.icon ? `<icon-ui name="${this.icon}"></icon-ui>` : '';
-    const caretHtml = this.collapsible
-      ? `<icon-ui name="caret-right" data-section-nav-group-caret></icon-ui>`
-      : '';
-    this.#headerEl.innerHTML =
-      `${iconHtml}<span data-section-nav-group-label>${this.text}</span>${caretHtml}`;
-  }
-
-  disconnected() {
-    this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
-    this.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
-    this.#headerEl = null;
-  }
-}
-customElements.define('section-nav-group-ui', AdiaSectionNavGroup);
-
-export { AdiaSectionNavGroup };

package/patterns/section-nav-group/section-nav-group.yaml

@@ -1,66 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaSectionNavGroup
-tag: section-nav-group-ui
-component: SectionNavGroup
-category: nav
-version: 1
-description: |
-  Optional labeled group inside section-nav-ui. Auto-generates a header row
-  with label and optional leading icon. When [collapsible], the header row
-  is a keyboard-activatable toggle that emits `group-toggle`.
-
-props:
-  text:
-    type: string
-    default: ""
-    reflect: true
-    description: Group label rendered in the header row.
-
-  icon:
-    type: string
-    default: ""
-    reflect: true
-    description: Optional Phosphor icon name (leading).
-
-  collapsible:
-    type: boolean
-    default: false
-    reflect: true
-    description: When true, the header becomes a click/keyboard toggle that expands and collapses the group.
-
-  open:
-    type: boolean
-    default: false
-    reflect: true
-    description: Expanded state. Only meaningful when collapsible=true.
-
-events:
-  group-toggle:
-    description: Fired when the group is toggled via header click or keyboard (Enter/Space).
-    detail:
-      text: string
-      open: boolean
-
-slots:
-  default:
-    description: section-nav-item-ui children rendered under the header.
-
-states:
-  - name: idle
-    description: Default.
-  - name: collapsible
-    attribute: collapsible
-    description: Header is interactive.
-  - name: open
-    attribute: open
-    description: Children visible.
-
-traits: []
-
-a2ui:
-  rules:
-    - Must be a direct child of section-nav-ui.
-    - Children must be section-nav-item-ui.
-
-keywords: [section-nav-group, sub-nav-group, nav-section, rail-group]
-related: [SectionNav, SectionNavItem]

package/patterns/section-nav-item/section-nav-item.a2ui.json

@@ -1,97 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/SectionNavItem.json",
-  "title": "SectionNavItem",
-  "description": "Single nav link in a section-nav-ui rail. Icon + label. Supports disabled\nstate and keyboard activation (Enter/Space). Selection updates the\nparent section-nav-ui's selection state.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "component": {
-      "const": "SectionNavItem"
-    },
-    "disabled": {
-      "description": "Non-interactive; tab-skipped; dim visual.",
-      "type": "boolean",
-      "default": false
-    },
-    "icon": {
-      "description": "Optional Phosphor icon name (leading).",
-      "type": "string",
-      "default": ""
-    },
-    "selected": {
-      "description": "Current selection. Managed by parent section-nav-ui.",
-      "type": "boolean",
-      "default": false
-    },
-    "text": {
-      "description": "Item label.",
-      "type": "string",
-      "default": ""
-    },
-    "value": {
-      "description": "Unique identifier (route / target id).",
-      "type": "string",
-      "default": ""
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "nav",
-    "events": {
-      "nav-select": {
-        "description": "Fired on click or Enter/Space (suppressed when disabled).",
-        "detail": {
-          "item": "HTMLElement",
-          "text": "string",
-          "value": "string"
-        }
-      }
-    },
-    "examples": [],
-    "keywords": [
-      "section-nav-item",
-      "sub-nav-item",
-      "nav-link",
-      "rail-item"
-    ],
-    "name": "AdiaSectionNavItem",
-    "related": [
-      "SectionNav",
-      "SectionNavGroup"
-    ],
-    "slots": {},
-    "states": [
-      {
-        "description": "Default.",
-        "name": "idle"
-      },
-      {
-        "description": "Currently selected destination.",
-        "attribute": "selected",
-        "name": "selected"
-      },
-      {
-        "description": "Non-interactive.",
-        "attribute": "disabled",
-        "name": "disabled"
-      }
-    ],
-    "synonyms": {},
-    "tag": "section-nav-item-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/section-nav-item/section-nav-item.css

@@ -1,106 +0,0 @@
-/* Safari 17.x bug: `:scope:hover` (Flavor A) and `:scope[selected]`
-   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
-   Selectors moved out. `:focus-visible` matches correctly inside `@scope`,
-   so the combined `:hover, :focus-visible` rule was split — `:hover`
-   moves out, `:focus-visible` stays. See docs/BROWSER-COMPAT.md §3a. */
-section-nav-item-ui:hover:not([disabled]) {
-  background: var(--section-nav-item-bg-hover);
-  color: var(--section-nav-item-fg-hover);
-}
-section-nav-item-ui:hover:not([disabled]) > icon-ui {
-  color: var(--section-nav-item-fg-hover);
-}
-section-nav-item-ui[selected] {
-  background: var(--section-nav-item-bg-selected);
-  color: var(--section-nav-item-fg-selected);
-  font-weight: var(--section-nav-item-selected-weight);
-}
-section-nav-item-ui[selected] > icon-ui {
-  color: var(--section-nav-item-icon-fg-selected);
-}
-section-nav-item-ui[selected]:not(:has(> icon-ui))::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: calc(var(--section-nav-item-row-px) - var(--a-space-1));
-  inset-block: 25%;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--section-nav-item-accent);
-}
-
-@scope (section-nav-item-ui) {
-  :where(:scope) {
-    --section-nav-item-row-height:   var(--a-size);
-    --section-nav-item-row-px:       var(--a-ui-px);
-    --section-nav-item-row-gap:      var(--a-space-1);
-    --section-nav-item-row-radius:   var(--a-radius-md);
-    --section-nav-item-font-size:    var(--a-ui-size);
-    --section-nav-item-icon-size:    calc(var(--section-nav-item-row-height) - var(--a-space-2));
-
-    --section-nav-item-fg:           var(--a-ui-text-subtle);
-    --section-nav-item-fg-hover:     var(--a-ui-text-hover);
-    --section-nav-item-fg-selected:  var(--a-ui-text-selected);
-    --section-nav-item-fg-disabled:  var(--a-fg-disabled);
-    --section-nav-item-icon-fg:          var(--a-fg-muted);
-    --section-nav-item-icon-fg-selected: var(--a-accent);
-    --section-nav-item-bg-hover:     var(--a-bg-muted);
-    --section-nav-item-bg-selected:  var(--a-bg-selected);
-    --section-nav-item-accent:       transparent;
-    --section-nav-item-selected-weight: var(--a-weight-medium);
-
-    --section-nav-item-duration:     var(--a-duration-fast);
-    --section-nav-item-easing:       var(--a-easing);
-  }
-
-  :scope {
-    position: relative;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: var(--section-nav-item-row-gap);
-    height: var(--section-nav-item-row-height);
-    padding: 0 var(--section-nav-item-row-px);
-    border-radius: var(--section-nav-item-row-radius);
-    font-size: var(--section-nav-item-font-size);
-    color: var(--section-nav-item-fg);
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-    text-decoration: none;
-    transition:
-      background var(--section-nav-item-duration) var(--section-nav-item-easing),
-      color      var(--section-nav-item-duration) var(--section-nav-item-easing);
-    outline: none;
-  }
-
-  :scope > icon-ui {
-    width: var(--section-nav-item-icon-size);
-    height: var(--section-nav-item-icon-size);
-    flex-shrink: 0;
-    color: var(--section-nav-item-icon-fg);
-    transition: color var(--section-nav-item-duration) var(--section-nav-item-easing);
-  }
-
-  :scope > [data-section-nav-item-label] {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  :scope:focus-visible:not([disabled]) {
-    background: var(--section-nav-item-bg-hover);
-    color: var(--section-nav-item-fg-hover);
-  }
-  :scope:focus-visible:not([disabled]) > icon-ui {
-    color: var(--section-nav-item-fg-hover);
-  }
-
-  /* :scope[selected] rules moved outside @scope — see Safari 17.x bug note at top. */
-
-  :scope[disabled] {
-    color: var(--section-nav-item-fg-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}

package/patterns/section-nav-item/section-nav-item.js

@@ -1,66 +0,0 @@
-/**
- * <section-nav-item-ui> — Single nav link in a section-nav-ui rail.
- * Supports icon, label, disabled state, and keyboard activation (Enter/Space).
- * Selection updates the parent section-nav-ui's selection state.
- * Event: nav-select. detail: { item, text, value }
- */
-
-import { AdiaElement } from '../../core/element.js';
-
-class AdiaSectionNavItem extends AdiaElement {
-  static properties = {
-    text:     { type: String,  default: '',    reflect: true },
-    value:    { type: String,  default: '',    reflect: true },
-    icon:     { type: String,  default: '',    reflect: true },
-    selected: { type: Boolean, default: false, reflect: true },
-    disabled: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #onClick = (e) => {
-    if (this.disabled) { e.preventDefault(); return; }
-    const parent = this.closest('section-nav-ui');
-    parent?.select(this);
-    this.dispatchEvent(new CustomEvent('nav-select', {
-      bubbles: true,
-      detail: { item: this, text: this.text, value: this.value },
-    }));
-  };
-
-  #onKey = (e) => {
-    if (this.disabled) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.#onClick(e);
-    }
-  };
-
-  connected() {
-    this.setAttribute('role', 'link');
-    this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-    this.#buildBody();
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keydown', this.#onKey);
-  }
-
-  render() {
-    this.#buildBody();
-    this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-    if (this.selected) this.setAttribute('aria-current', 'page');
-    else this.removeAttribute('aria-current');
-  }
-
-  #buildBody() {
-    const iconHtml = this.icon ? `<icon-ui name="${this.icon}"></icon-ui>` : '';
-    this.innerHTML = `${iconHtml}<span data-section-nav-item-label>${this.text}</span>`;
-  }
-
-  disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKey);
-  }
-}
-customElements.define('section-nav-item-ui', AdiaSectionNavItem);
-
-export { AdiaSectionNavItem };

package/patterns/section-nav-item/section-nav-item.yaml

@@ -1,70 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaSectionNavItem
-tag: section-nav-item-ui
-component: SectionNavItem
-category: nav
-version: 1
-description: |
-  Single nav link in a section-nav-ui rail. Icon + label. Supports disabled
-  state and keyboard activation (Enter/Space). Selection updates the
-  parent section-nav-ui's selection state.
-
-props:
-  text:
-    type: string
-    default: ""
-    reflect: true
-    description: Item label.
-
-  value:
-    type: string
-    default: ""
-    reflect: true
-    description: Unique identifier (route / target id).
-
-  icon:
-    type: string
-    default: ""
-    reflect: true
-    description: Optional Phosphor icon name (leading).
-
-  selected:
-    type: boolean
-    default: false
-    reflect: true
-    description: Current selection. Managed by parent section-nav-ui.
-
-  disabled:
-    type: boolean
-    default: false
-    reflect: true
-    description: Non-interactive; tab-skipped; dim visual.
-
-events:
-  nav-select:
-    description: Fired on click or Enter/Space (suppressed when disabled).
-    detail:
-      item: HTMLElement
-      text: string
-      value: string
-
-slots: {}
-
-states:
-  - name: idle
-    description: Default.
-  - name: selected
-    attribute: selected
-    description: Currently selected destination.
-  - name: disabled
-    attribute: disabled
-    description: Non-interactive.
-
-traits: []
-
-a2ui:
-  rules:
-    - Must be a descendant of section-nav-ui (direct child or via section-nav-group-ui).
-
-keywords: [section-nav-item, sub-nav-item, nav-link, rail-item]
-related: [SectionNav, SectionNavGroup]

package/styles/layouts/admin.css

@@ -1,7 +0,0 @@
-/* Backward-compatible shim — the app shell CSS now lives in patterns/.
-   This file re-exports it so existing <link> tags in admin.html keep working.
-   New pages should import patterns/app-shell/app-shell.css directly. */
-@import "../../patterns/app-shell/app-shell.css";
-@import "../../patterns/app-nav/app-nav.css";
-@import "../../patterns/app-nav-group/app-nav-group.css";
-@import "../../patterns/app-nav-item/app-nav-item.css";