@adia-ai/web-components 0.0.27 → 0.0.29

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

@@ -1,83 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppNavItem.json",
-  "title": "AppNavItem",
-  "description": "Single navigation link in app-nav-ui, optionally nested inside\napp-nav-group-ui. Icon + label + optional badge. Selection is managed\nby the parent app-nav-ui — set via clicking or nav.select(item).\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "badge": {
-      "description": "Optional trailing badge text (count, \"New\", etc.).",
-      "type": "string",
-      "default": ""
-    },
-    "component": {
-      "const": "AppNavItem"
-    },
-    "icon": {
-      "description": "Phosphor icon name (leading).",
-      "type": "string",
-      "default": ""
-    },
-    "selected": {
-      "description": "Current selection. Managed by parent app-nav-ui — don't set multiple siblings.",
-      "type": "boolean",
-      "default": false
-    },
-    "text": {
-      "description": "Item label.",
-      "type": "string",
-      "default": ""
-    },
-    "value": {
-      "description": "Unique identifier for selection tracking (also the route / target id).",
-      "type": "string",
-      "default": ""
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "nav",
-    "events": {},
-    "examples": [],
-    "keywords": [
-      "app-nav-item",
-      "nav",
-      "link",
-      "menu-item"
-    ],
-    "name": "AdiaAppNavItem",
-    "related": [
-      "AppNav",
-      "AppNavGroup"
-    ],
-    "slots": {},
-    "states": [
-      {
-        "description": "Default.",
-        "name": "idle"
-      },
-      {
-        "description": "Currently selected nav destination.",
-        "attribute": "selected",
-        "name": "selected"
-      }
-    ],
-    "synonyms": {},
-    "tag": "app-nav-item-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

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

@@ -1,162 +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 — custom props from `:where(:scope)` are still set
-   on the element via inheritance. Specificity (0,1,1 / 0,2,1) preserved.
-   Safari < 18 is below the §1 floor (ADR-0007); fix protects opt-in
-   consumers extending below the floor and is harmlessly redundant on
-   engines without the bug. */
-app-nav-item-ui:hover {
-  background: var(--nav-item-bg-hover);
-  color: var(--nav-item-fg-hover);
-}
-app-nav-item-ui:hover [slot="icon"] {
-  color: var(--nav-item-fg-hover);
-}
-app-nav-item-ui[selected] {
-  background: var(--nav-item-bg-selected);
-  color: var(--nav-item-fg-selected);
-  font-weight: var(--nav-item-selected-weight);
-}
-app-nav-item-ui[selected] [slot="icon"] {
-  color: var(--nav-item-icon-fg-selected);
-}
-app-nav-item-ui[selected] [slot="icon"]:empty::before {
-  content: '';
-  width: 2px;
-  height: 1em;
-  border-radius: 1px;
-  background: var(--nav-item-accent);
-}
-
-@scope (app-nav-item-ui) {
-  :where(:scope) {
-    --nav-item-accent:          var(--a-accent);
-    --nav-item-row-height:      var(--a-size);
-    --nav-item-row-height-sm:   var(--a-size-sm);
-    --nav-item-row-height-lg:   var(--a-size-lg);
-    --nav-item-row-px:          var(--a-ui-px);
-    --nav-item-row-gap:         var(--a-space-1);
-    --nav-item-row-radius:      var(--a-radius-md);
-    --nav-item-font-size:       var(--a-ui-size);
-    --nav-item-font-size-sm:    var(--a-ui-sm);
-    --nav-item-font-size-lg:    var(--a-ui-lg);
-    --nav-item-fg:              var(--a-ui-text-subtle);
-    --nav-item-fg-hover:        var(--a-ui-text-hover);
-    --nav-item-fg-selected:     var(--a-ui-text-selected);
-    --nav-item-icon-fg:         var(--a-ui-text-muted);
-    --nav-item-icon-fg-selected: var(--nav-item-accent);
-    --nav-item-bg-hover:        var(--a-ui-bg-hover);
-    --nav-item-bg-selected:     var(--a-ui-bg-selected);
-    --nav-item-icon-size:       calc(var(--nav-item-row-height) - var(--a-space-2));
-    --nav-item-badge-size:      var(--a-ui-sm);
-  }
-
-  :scope {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: var(--nav-item-row-gap);
-    height: var(--nav-item-row-height);
-    padding: 0 var(--nav-item-row-px);
-    border-radius: var(--nav-item-row-radius);
-    font-size: var(--nav-item-font-size);
-    color: var(--nav-item-fg);
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-    transition:
-      background var(--nav-duration-fast) var(--nav-easing),
-      color var(--nav-duration-fast) var(--nav-easing);
-    outline: none;
-  }
-
-  :scope:focus-visible {
-    background: var(--nav-item-bg-hover);
-    color: var(--nav-item-fg-hover);
-    outline: none;
-  }
-
-  /* :scope[selected] rules moved outside @scope — see Safari 17.x bug note at top. */
-
-  /* Icon slot — always present, reserves space even when empty */
-  [slot="icon"] {
-    width: var(--nav-item-icon-size);
-    height: var(--nav-item-icon-size);
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--nav-item-icon-fg);
-    transition: color var(--nav-duration-fast) var(--nav-easing);
-  }
-
-  [slot="icon"] icon-ui {
-    --a-icon-size: calc(var(--nav-item-icon-font-size) + 2px);
-  }
-
-  /* Selected accent line on empty icon slot moved outside @scope — see Safari 17.x bug note at top. */
-
-  [slot="text"] {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  [slot="badge"] {
-    font-size: var(--nav-item-badge-size);
-    color: var(--nav-item-badge-fg);
-    background: var(--nav-item-badge-bg);
-    padding: 1px var(--nav-item-badge-px);
-    border-radius: var(--nav-item-badge-radius);
-    line-height: 1.4;
-    margin-inline-start: auto;
-  }
-
-  [slot="trailing"] {
-    margin-inline-start: auto;
-    font-size: var(--nav-item-trailing-font);
-    color: var(--nav-item-trailing-fg);
-    border: 1px solid var(--nav-item-trailing-border);
-    border-radius: var(--nav-item-trailing-radius);
-    padding: 0 var(--nav-item-trailing-px);
-    line-height: 1.6;
-    flex-shrink: 0;
-  }
-
-  /* ── Collapsed nav: hide text, badge, trailing ── */
-  app-nav-ui[collapsed] & [slot="text"],
-  app-nav-ui[collapsed] & [slot="badge"],
-  app-nav-ui[collapsed] & [slot="trailing"] {
-    display: none;
-  }
-
-  app-nav-ui[collapsed] & {
-    justify-content: center;
-    padding: 0;
-  }
-
-  @container sidebar (max-width: 96px) {
-    [slot="text"], [slot="badge"], [slot="trailing"] {
-      display: none !important;
-    }
-    [slot="icon"] icon-ui {
-      --a-icon-size: 18px;
-    }
-    :scope {
-      justify-content: center;
-      padding: 0;
-    }
-  }
-
-  /* ── Size variants ── */
-  :scope[size="sm"] {
-    --nav-item-row-height: var(--nav-item-row-height-sm);
-    --nav-item-font-size:  var(--nav-item-font-size-sm);
-  }
-
-  :scope[size="lg"] {
-    --nav-item-row-height: var(--nav-item-row-height-lg);
-    --nav-item-font-size:  var(--nav-item-font-size-lg);
-  }
-}

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

@@ -1,42 +0,0 @@
-/**
- * <app-nav-item-ui> — Single navigation link in app-nav-ui (optionally
- * nested under app-nav-group-ui). Supports icon, label, and optional badge.
- *
- * Selection is managed by the parent app-nav-ui; setting `selected` is
- * a side-effect of calling nav.select(item) or user click.
- */
-
-import { AdiaElement } from '../../core/element.js';
-
-class AdiaAppNavItem extends AdiaElement {
-  static properties = {
-    text:     { type: String,  default: '', reflect: true },
-    icon:     { type: String,  default: '', reflect: true },
-    value:    { type: String,  default: '', reflect: true },
-    badge:    { type: String,  default: '', reflect: true },
-    selected: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  connected() {
-    this.setAttribute('role', 'link');
-    this.setAttribute('tabindex', '0');
-
-    if (!this.querySelector('[slot="text"]')) {
-      this.innerHTML = `
-        <span slot="icon">${this.icon ? `<icon-ui name="${this.icon}"></icon-ui>` : ''}</span>
-        <span slot="text">${this.text}</span>
-        ${this.badge ? `<span slot="badge">${this.badge}</span>` : ''}
-      `;
-    }
-  }
-
-  render() {
-    const textEl = this.querySelector('[slot="text"]');
-    if (textEl) textEl.textContent = this.text;
-  }
-}
-customElements.define('app-nav-item-ui', AdiaAppNavItem);
-
-export { AdiaAppNavItem };

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

@@ -1,62 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaAppNavItem
-tag: app-nav-item-ui
-component: AppNavItem
-category: nav
-version: 1
-description: |
-  Single navigation link in app-nav-ui, optionally nested inside
-  app-nav-group-ui. Icon + label + optional badge. Selection is managed
-  by the parent app-nav-ui — set via clicking or nav.select(item).
-
-props:
-  text:
-    type: string
-    default: ""
-    reflect: true
-    description: Item label.
-
-  icon:
-    type: string
-    default: ""
-    reflect: true
-    description: Phosphor icon name (leading).
-
-  value:
-    type: string
-    default: ""
-    reflect: true
-    description: Unique identifier for selection tracking (also the route / target id).
-
-  badge:
-    type: string
-    default: ""
-    reflect: true
-    description: Optional trailing badge text (count, "New", etc.).
-
-  selected:
-    type: boolean
-    default: false
-    reflect: true
-    description: Current selection. Managed by parent app-nav-ui — don't set multiple siblings.
-
-events: {}
-
-slots: {}
-
-states:
-  - name: idle
-    description: Default.
-  - name: selected
-    attribute: selected
-    description: Currently selected nav destination.
-
-traits: []
-
-a2ui:
-  rules:
-    - Must be a descendant of app-nav-ui (direct child or via app-nav-group-ui).
-    - Only one sibling may have selected=true at a time; prefer calling nav.select() over setting the attribute manually.
-
-keywords: [app-nav-item, nav, link, menu-item]
-related: [AppNav, AppNavGroup]

package/patterns/app-shell/app-shell.a2ui.json

@@ -1,129 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppShell.json",
-  "title": "AppShell",
-  "description": "Behavior-only application shell. Wires sidebar toggles, resize handles,\na Cmd+K command palette, and a ResizeObserver that drives responsive\nsidebar collapse. Author supplies the DOM (aside[data-sidebar], main,\ndialog[data-command]); app-shell-ui binds the interactions.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "component": {
-      "const": "AppShell"
-    },
-    "mode": {
-      "description": "Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome.",
-      "type": "string",
-      "enum": [
-        "",
-        "rounded",
-        "borderless"
-      ],
-      "default": ""
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "layout",
-    "events": {
-      "command-select": {
-        "description": "Forwarded from the command palette when an option is chosen.",
-        "detail": {
-          "value": "string"
-        }
-      },
-      "sidebar-resize": {
-        "description": "Fired as a sidebar is dragged; debounced on the trailing edge.",
-        "detail": {
-          "sidebar": "string",
-          "width": "number"
-        }
-      },
-      "sidebar-toggle": {
-        "description": "Fired when a sidebar is collapsed or expanded.",
-        "detail": {
-          "expanded": "boolean",
-          "sidebar": "string"
-        }
-      }
-    },
-    "examples": [],
-    "keywords": [
-      "app-shell",
-      "shell",
-      "layout",
-      "admin",
-      "dashboard",
-      "sidebar",
-      "nav"
-    ],
-    "name": "AdiaAppShell",
-    "related": [
-      "AppNav",
-      "AppNavGroup",
-      "AppNavItem",
-      "Command"
-    ],
-    "slots": {
-      "description": {
-        "description": "Secondary metadata inside any chrome bar. Muted + --a-ui-sm size."
-      },
-      "default": {
-        "description": "Author-supplied page DOM. Expected structure — aside[data-sidebar] for navigation, main for content, optional dialog[data-command] for Cmd+K."
-      },
-      "action": {
-        "description": "Trailing control cluster inside any chrome bar. The first [slot=\"action\"] child pushes itself (and siblings) to the end; subsequent siblings flow with gap. Coexists with legacy <span data-spacer> / <div data-actions> hooks for one release — new code should prefer slots."
-      },
-      "action-leading": {
-        "description": "Leading (inline-start) control cluster inside any chrome bar. Pairs with [slot=\"action\"] for dual-cluster chrome (e.g. back button + breadcrumb on the left, primary actions on the right). Replaces the legacy <span data-spacer> hack."
-      },
-      "heading": {
-        "description": "Primary label inside any chrome bar. Medium-weight + strong fg."
-      },
-      "icon": {
-        "description": "Leading glyph inside any chrome bar — > main > header / footer and [data-sidebar] > header / footer. Muted color, flex-align."
-      }
-    },
-    "states": [
-      {
-        "description": "Default, interactive shell.",
-        "name": "idle"
-      },
-      {
-        "description": "Leading sidebar is collapsed; content expands.",
-        "attribute": "data-sidebar-leading-collapsed",
-        "name": "collapsed-leading"
-      },
-      {
-        "description": "Trailing sidebar (inspector) is collapsed.",
-        "attribute": "data-sidebar-trailing-collapsed",
-        "name": "collapsed-trailing"
-      }
-    ],
-    "synonyms": {
-      "admin": [
-        "dashboard",
-        "shell",
-        "app-shell"
-      ],
-      "dashboard": [
-        "admin",
-        "shell",
-        "app-shell"
-      ]
-    },
-    "tag": "app-shell-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/app-shell/app-shell.css

@@ -1,14 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — <app-shell-ui> pattern component CSS
-
-   Split into constituent parts for maintainability.
-   Import order matters: tokens first, then structure, then overrides.
-   ═══════════════════════════════════════════════════════════════ */
-
-@import "./css/app-shell.tokens.css";
-@import "./css/app-shell.shell.css";
-@import "./css/app-shell.main.css";
-@import "./css/app-shell.sidebar.css";
-@import "./css/app-shell.collapsed.css";
-@import "./css/app-shell.templates.css";
-@import "./css/app-shell.helpers.css";