@adia-ai/web-components 0.6.33 → 0.6.34

package/components/integration-card/integration-card.yaml

@@ -0,0 +1,280 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIIntegrationCard
+tag: integration-card-ui
+status: stable
+component: IntegrationCard
+category: display
+version: 1
+description: >-
+  Single-tile primitive representing one third-party integration
+  (Slack, GitHub, Stripe, …). Shows the provider logo + name +
+  description + status pill + a single primary action button whose
+  label and variant are derived from `status`. Composes into a grid
+  via the SPEC-063 integrations-page composite. One tile = one
+  provider; the button variant is computed from `status`, not a
+  separate prop. Distinct from <option-card-ui> (a single-select
+  radio with no status / async action) and <card-ui> (the generic
+  bordered surface this specializes).
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
+  - badge-ui
+  - button-ui
+props:
+  provider:
+    description: Provider key — `slack`, `github`, etc. — used for analytics + a11y label. Required.
+    type: string
+    default: ""
+    required: true
+    reflect: true
+  name:
+    description: Display name shown as the card title. Required.
+    type: string
+    default: ""
+    required: true
+  logo:
+    description: Logo URL (preferred — renders as <img>) or icon name (renders as <icon-ui>). URLs are sniffed by presence of `/`.
+    type: string
+    default: ""
+  description:
+    description: One-line description of what the integration does.
+    type: string
+    default: ""
+  status:
+    description: Current connection state — drives the button label, variant, and visibility. `available` shows a primary `Connect`; `connected` shows an outline `Configure`; `error` shows an outline `Retry`; `pending` shows a non-interactive spinner; `coming-soon` hides the button.
+    type: string
+    default: available
+    enum:
+      - available
+      - connected
+      - error
+      - pending
+      - coming-soon
+    reflect: true
+    dynamic: true
+  error-message:
+    description: When `status="error"`, the message to show below the description. Ignored for other statuses.
+    type: string
+    default: ""
+    dynamic: true
+  disabled:
+    description: Disables the action button.
+    type: boolean
+    default: false
+    reflect: true
+events:
+  connect:
+    description: Fired when the user clicks the action button while `status="available"`.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+  configure:
+    description: Fired when the user clicks the action button while `status="connected"`.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+  disconnect:
+    description: Fired when the consumer wires a `<menu-ui slot="actions">` overflow with a `disconnect` item. The card does not stamp this menu — it bubbles whatever consumer markup dispatches.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+  retry:
+    description: Fired when the user clicks the action button while `status="error"`.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+slots:
+  default:
+    description: Optional override for the description. When a non-empty default slot is provided it supersedes the `description` prop.
+  actions:
+    description: Optional secondary actions — typically a <menu-ui> overflow carrying `Reauthenticate` / `Disconnect` entries. Collapses when empty.
+states:
+  - name: idle
+    description: Default — `[status="available"]`.
+  - name: available
+    description: Ready to connect.
+    attribute: status="available"
+  - name: connected
+    description: Linked — success-tinted border, check badge, outline `Configure` button.
+    attribute: status="connected"
+  - name: error
+    description: Connection failed — danger-tinted border, error message visible, outline `Retry` button.
+    attribute: status="error"
+  - name: pending
+    description: Awaiting response — button shows spinner, non-interactive.
+    attribute: status="pending"
+  - name: coming-soon
+    description: Listed but not yet enabled — opacity reduced, button hidden, "Coming soon" badge shown.
+    attribute: status="coming-soon"
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens:
+  --integration-card-bg:
+    description: Card background. Defaults to `--a-bg`.
+  --integration-card-border:
+    description: Card border color. Defaults to `--a-border`.
+  --integration-card-radius:
+    description: Card corner radius. Defaults to `--a-radius-md`.
+  --integration-card-px:
+    description: Horizontal padding. Defaults to `--a-space-4`.
+  --integration-card-py:
+    description: Vertical padding. Defaults to `--a-space-4`.
+  --integration-card-gap:
+    description: Vertical rhythm between header / body / footer.
+  --integration-card-logo-size:
+    description: Logo square dimension. Defaults to `--a-space-7`.
+  --integration-card-heading-fg:
+    description: Provider name color.
+  --integration-card-description-fg:
+    description: Description text color.
+  --integration-card-error-fg:
+    description: Error-message text color (used when `status="error"`).
+requiredIcons:
+  - check
+  - warning-circle
+  - arrow-clockwise
+a2ui:
+  rules:
+    - >-
+      Use <integration-card-ui> for one tile in an integrations grid.
+      Set `provider` and `name` — both are required for analytics
+      keys and the accessible name. Set `description` so users
+      don't have to look the integration up externally.
+    - >-
+      `status` MUST be one of `available | connected | error |
+      pending | coming-soon`. The button label and variant are
+      DERIVED from `status` — never slot a <button-ui> directly in
+      the card body. Use the `actions` slot for an overflow
+      <menu-ui> with secondary actions like Reauthenticate or
+      Disconnect.
+    - >-
+      When `status="error"`, set `error-message` — otherwise the
+      user sees a Retry button with no context. The message renders
+      below the description in danger-text color.
+    - >-
+      `logo` accepts a URL (containing `/`, renders as <img>) or a
+      registered icon name (renders as <icon-ui>). Don't mix — one
+      provider gets one logo source.
+    - >-
+      Group integration cards in <grid-ui columns="auto-fit"> or
+      use <integrations-page-ui> (SPEC-063) for the canonical
+      Settings-panel grid. Never nest <card-ui> around an
+      <integration-card-ui> — it IS a card variant.
+anti_patterns:
+  - wrong: |
+      {"component": "IntegrationCard", "provider": "slack",
+       "children": [{"component": "Button", "label": "Connect"}]}
+    why: |
+      Manually slotting a Button bypasses the card's status-driven
+      button semantics. The card renders its own button AND the
+      slotted one, producing two actions side-by-side.
+    fix: |
+      {"component": "IntegrationCard", "provider": "slack",
+       "name": "Slack", "status": "available"}
+  - wrong: |
+      {"component": "Card", "children": [
+        {"component": "Image", "src": "/slack.svg"},
+        {"component": "Text", "value": "Slack"},
+        {"component": "Button", "label": "Connect"}]}
+    why: |
+      Re-implements IntegrationCard with primitives. Loses status
+      badge semantics, accessible-name wiring, and the typed
+      connect/configure events.
+    fix: |
+      {"component": "IntegrationCard", "provider": "slack",
+       "name": "Slack", "logo": "/slack.svg", "status": "available"}
+examples:
+  - name: available
+    description: Available integration with logo, description, and primary Connect button.
+    a2ui: >-
+      {
+        "id": "card-slack",
+        "component": "IntegrationCard",
+        "provider": "slack",
+        "name": "Slack",
+        "logo": "/integrations/slack.svg",
+        "description": "Send AI replies and notifications to channels.",
+        "status": "available"
+      }
+  - name: connected
+    description: Connected integration with success badge and outline Configure button.
+    a2ui: >-
+      {
+        "id": "card-github",
+        "component": "IntegrationCard",
+        "provider": "github",
+        "name": "GitHub",
+        "logo": "/integrations/github.svg",
+        "description": "Sync issues and pull requests.",
+        "status": "connected"
+      }
+  - name: error
+    description: Error integration with danger badge, error message, and Retry button.
+    a2ui: >-
+      {
+        "id": "card-stripe",
+        "component": "IntegrationCard",
+        "provider": "stripe",
+        "name": "Stripe",
+        "description": "Charge customers and reconcile invoices.",
+        "status": "error",
+        "error-message": "Token expired — re-authenticate."
+      }
+  - name: coming-soon
+    description: Coming-soon integration with no action button.
+    a2ui: >-
+      {
+        "id": "card-zapier",
+        "component": "IntegrationCard",
+        "provider": "zapier",
+        "name": "Zapier",
+        "description": "Trigger Zaps from AdiaUI events.",
+        "status": "coming-soon"
+      }
+keywords:
+  - integration
+  - connect
+  - provider
+  - slack
+  - github
+  - stripe
+  - oauth
+  - third-party
+  - settings
+  - integrations
+  - card
+  - tile
+synonyms:
+  integration:
+    - integration
+    - connect
+    - provider
+    - third-party
+  connect:
+    - integration
+    - oauth
+    - connection
+  provider:
+    - integration
+    - third-party
+    - service
+  oauth:
+    - integration
+    - connect
+    - auth
+  settings:
+    - settings
+    - integration
+    - account
+related:
+  - card
+  - badge
+  - button
+  - menu

package/components/kbd/kbd.css

@@ -1,28 +1,28 @@
 @scope (kbd-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --kbd-bg:        var(--a-bg-muted);
-    --kbd-fg:        var(--a-fg);
-    --kbd-border:    var(--a-border-subtle);
-    --kbd-radius:    var(--a-radius-sm);
-    --kbd-font:      var(--a-font-family-code);
+    --kbd-bg-default:        var(--a-bg-muted);
+    --kbd-fg-default:        var(--a-fg);
+    --kbd-border-default:    var(--a-border-subtle);
+    --kbd-radius-default:    var(--a-radius-sm);
+    --kbd-font-default:      var(--a-font-family-code);
 
     /* Size — defaults to md */
-    --kbd-font-size: var(--a-ui-tiny);
-    --kbd-height:    1.25rem;
-    --kbd-min-width: 1.25rem;
-    --kbd-px:        var(--a-space-1);
-    --kbd-weight:    var(--a-weight-medium);
+    --kbd-font-size-default: var(--a-ui-tiny);
+    --kbd-height-default:    1.25rem;
+    --kbd-min-width-default: 1.25rem;
+    --kbd-px-default:        var(--a-space-1);
+    --kbd-weight-default:    var(--a-weight-medium);
 
     /* Size: sm */
-    --kbd-font-size-sm: var(--a-ui-tiny);
-    --kbd-height-sm:    1rem;
-    --kbd-min-width-sm: 1rem;
+    --kbd-font-size-sm-default: var(--a-ui-tiny);
+    --kbd-height-sm-default:    1rem;
+    --kbd-min-width-sm-default: 1rem;
 
     /* Size: lg */
-    --kbd-font-size-lg: var(--a-ui-sm);
-    --kbd-height-lg:    1.5rem;
-    --kbd-min-width-lg: 1.5rem;
+    --kbd-font-size-lg-default: var(--a-ui-sm);
+    --kbd-height-lg-default:    1.5rem;
+    --kbd-min-width-lg-default: 1.5rem;
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -32,18 +32,18 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--kbd-min-width);
-    height: var(--kbd-height);
-    padding-inline: var(--kbd-px);
-    font-family: var(--kbd-font);
-    font-size: var(--kbd-font-size);
-    font-weight: var(--kbd-weight);
+    min-width: var(--kbd-min-width, var(--kbd-min-width-default));
+    height: var(--kbd-height, var(--kbd-height-default));
+    padding-inline: var(--kbd-px, var(--kbd-px-default));
+    font-family: var(--kbd-font, var(--kbd-font-default));
+    font-size: var(--kbd-font-size, var(--kbd-font-size-default));
+    font-weight: var(--kbd-weight, var(--kbd-weight-default));
     line-height: 1;
-    color: var(--kbd-fg);
-    background: var(--kbd-bg);
-    border: 1px solid var(--kbd-border);
+    color: var(--kbd-fg, var(--kbd-fg-default));
+    background: var(--kbd-bg, var(--kbd-bg-default));
+    border: 1px solid var(--kbd-border, var(--kbd-border-default));
     border-bottom-width: 2px;
-    border-radius: var(--kbd-radius);
+    border-radius: var(--kbd-radius, var(--kbd-radius-default));
     vertical-align: middle;
     white-space: nowrap;
     user-select: none;
@@ -51,13 +51,13 @@
 
   /* Sizes */
   :scope[size="sm"] {
-    --kbd-font-size: var(--kbd-font-size-sm);
-    --kbd-height:    var(--kbd-height-sm);
-    --kbd-min-width: var(--kbd-min-width-sm);
+    --kbd-font-size-default: var(--kbd-font-size-sm, var(--kbd-font-size-sm-default));
+    --kbd-height-default:    var(--kbd-height-sm, var(--kbd-height-sm-default));
+    --kbd-min-width-default: var(--kbd-min-width-sm, var(--kbd-min-width-sm-default));
   }
   :scope[size="lg"] {
-    --kbd-font-size: var(--kbd-font-size-lg);
-    --kbd-height:    var(--kbd-height-lg);
-    --kbd-min-width: var(--kbd-min-width-lg);
+    --kbd-font-size-default: var(--kbd-font-size-lg, var(--kbd-font-size-lg-default));
+    --kbd-height-default:    var(--kbd-height-lg, var(--kbd-height-lg-default));
+    --kbd-min-width-default: var(--kbd-min-width-lg, var(--kbd-min-width-lg-default));
   }
 }

package/components/link/link.css

@@ -7,16 +7,16 @@
 
 @scope (link-ui) {
   :where(:scope) {
-    --link-fg:              var(--a-link);
-    --link-fg-hover:        var(--a-link-hover);
-    --link-fg-visited:      var(--a-link-visited);
-    --link-underline-offset: 2px;
-    --link-focus-ring:      var(--a-focus-ring);
+    --link-fg-default:              var(--a-link);
+    --link-fg-hover-default:        var(--a-link-hover);
+    --link-fg-visited-default:      var(--a-link-visited);
+    --link-underline-offset-default: 2px;
+    --link-focus-ring-default:      var(--a-focus-ring);
   }
 
   :scope {
     display: inline;
-    color: var(--link-fg);
+    color: var(--link-fg, var(--link-fg-default));
     /* The text-decoration is on the inner <a>, not the host, so that
        host-level color overrides cascade correctly. */
   }
@@ -24,7 +24,7 @@
   :scope > a {
     color: inherit;
     text-decoration: underline;
-    text-underline-offset: var(--link-underline-offset);
+    text-underline-offset: var(--link-underline-offset, var(--link-underline-offset-default));
     cursor: pointer;
     /* Standard transition for color hover. */
     transition: color var(--a-duration-fast) var(--a-easing);
@@ -38,17 +38,17 @@
   }
 
   :scope > a:hover {
-    color: var(--link-fg-hover);
+    color: var(--link-fg-hover, var(--link-fg-hover-default));
   }
 
   :scope > a:visited {
-    color: var(--link-fg-visited);
+    color: var(--link-fg-visited, var(--link-fg-visited-default));
   }
 
   /* Focus ring on the anchor (the actual focusable element). */
   :scope > a:focus-visible {
     outline: none;
-    box-shadow: var(--link-focus-ring);
+    box-shadow: var(--link-focus-ring, var(--link-focus-ring-default));
     border-radius: var(--a-radius-sm);
   }
 
@@ -67,8 +67,8 @@
      affordance is implied by hover behavior + cursor. For "Already
      have an account?" type prose where the link role is contextual. */
   :scope[variant="quiet"] {
-    --link-fg: inherit;
-    --link-fg-hover: var(--a-link-hover);
+    --link-fg-default: inherit;
+    --link-fg-hover-default: var(--a-link-hover);
   }
   :scope[variant="quiet"] > a {
     text-decoration: none;

package/components/list/list.css

@@ -1,10 +1,10 @@
 @scope (list-ui) {
   :where(:scope) {
     /* ── Colors ── */
-    --list-divider-color: var(--a-border-subtle);
-    --list-bg-selected:   var(--a-accent-muted);
-    --list-fg-selected:   var(--a-accent-strong);
-    --list-border-selected: var(--a-accent-strong);
+    --list-divider-color-default: var(--a-border-subtle);
+    --list-bg-selected-default:   var(--a-accent-muted);
+    --list-fg-selected-default:   var(--a-accent-strong);
+    --list-border-selected-default: var(--a-accent-strong);
   }
 
   :scope {
@@ -17,7 +17,7 @@
 
   /* ── Divider ── */
   :scope[divider] list-item-ui + list-item-ui {
-    border-top: 1px solid var(--list-divider-color);
+    border-top: 1px solid var(--list-divider-color, var(--list-divider-color-default));
   }
 
   /* ── Item padding / margin (controlled by list-ui attributes) ──
@@ -68,9 +68,9 @@
   }
 
   :scope[selectable] > [role="listitem"][aria-selected="true"] {
-    background: var(--list-bg-selected);
-    color: var(--list-fg-selected);
-    border-inline-start-color: var(--list-border-selected);
+    background: var(--list-bg-selected, var(--list-bg-selected-default));
+    color: var(--list-fg-selected, var(--list-fg-selected-default));
+    border-inline-start-color: var(--list-border-selected, var(--list-border-selected-default));
   }
 
   :scope[selectable] > [role="listitem"]:focus-visible {