@adia-ai/web-components 0.6.33 → 0.6.35

package/components/code/code.css

@@ -1,92 +1,92 @@
 @scope (code-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --code-px:          var(--a-space-3);
-    --code-py:          var(--a-space-2);
-    --code-radius:      var(--a-radius-md);
-    --code-radius-sm:   var(--a-radius-sm);
-    --code-copy-px:     var(--a-space-1);
-    --code-copy-py:     var(--a-space-0-5);
-    --code-lint-marker-w: 3px; /* Vertical lint-marker rule; intrinsic measurement; no --a-space-* equivalent at this width. */
+    --code-px-default:          var(--a-space-3);
+    --code-py-default:          var(--a-space-2);
+    --code-radius-default:      var(--a-radius-md);
+    --code-radius-sm-default:   var(--a-radius-sm);
+    --code-copy-px-default:     var(--a-space-1);
+    --code-copy-py-default:     var(--a-space-0-5);
+    --code-lint-marker-w-default: 3px; /* Vertical lint-marker rule; intrinsic measurement; no --a-space-* equivalent at this width. */
 
     /* ── Colors ── */
-    --code-bg:          var(--a-bg);
-    --code-fg:          var(--a-fg);
-    --code-border:      var(--a-border-subtle);
-    --code-header-bg:   var(--a-bg-scrim);
-    --code-header-fg:   var(--a-fg-muted);
-    --code-copy-hover-bg: var(--a-bg-muted);
-    --code-copy-hover-fg: var(--a-fg);
+    --code-bg-default:          var(--a-bg);
+    --code-fg-default:          var(--a-fg);
+    --code-border-default:      var(--a-border-subtle);
+    --code-header-bg-default:   var(--a-bg-scrim);
+    --code-header-fg-default:   var(--a-fg-muted);
+    --code-copy-hover-bg-default: var(--a-bg-muted);
+    --code-copy-hover-fg-default: var(--a-fg);
 
     /* ── Typography ── */
-    --code-font:        var(--a-font-family-code);
-    --code-font-size:   var(--a-ui-sm);
-    --code-header-font: var(--a-ui-sm);
+    --code-font-default:        var(--a-font-family-code);
+    --code-font-size-default:   var(--a-ui-sm);
+    --code-header-font-default: var(--a-ui-sm);
 
     /* ── Transition ── */
-    --code-duration:    var(--a-duration-fast);
-    --code-easing:      var(--a-easing);
+    --code-duration-default:    var(--a-duration-fast);
+    --code-easing-default:      var(--a-easing);
 
     /* ── Editor chrome (CodeMirror 6) ──
        Active only when `[language]` triggers the CM mount. Still safe
        to emit in read-only mode; unused until `.cm-editor` is in the
        DOM. See docs/specs/code-editor.md §6. */
-    --code-gutter-bg:        var(--a-bg-subtle);
-    --code-gutter-fg:        var(--a-fg-muted);
+    --code-gutter-bg-default:        var(--a-bg-subtle);
+    --code-gutter-fg-default:        var(--a-fg-muted);
     /* Transparency-mixing in oklab — Safari < 18 has an OKLCH bug where
        the transparent operand's hue resolves to 0, red-shifting the mix.
        oklab is hue-agnostic and visually identical in fixed engines. */
-    --code-active-line-bg:   color-mix(in oklab, var(--a-accent-muted) 40%, transparent);
-    --code-selection-bg:     color-mix(in oklab, var(--a-accent-muted) 60%, transparent);
-    --code-selection-match:  color-mix(in oklab, var(--a-accent-muted) 30%, transparent);
-    --code-cursor:           var(--a-accent-strong);
-    --code-focus-ring:       var(--a-focus-ring);
+    --code-active-line-bg-default:   color-mix(in oklab, var(--a-accent-muted) 40%, transparent);
+    --code-selection-bg-default:     color-mix(in oklab, var(--a-accent-muted) 60%, transparent);
+    --code-selection-match-default:  color-mix(in oklab, var(--a-accent-muted) 30%, transparent);
+    --code-cursor-default:           var(--a-accent-strong);
+    --code-focus-ring-default:       var(--a-focus-ring);
 
     /* ── Syntax highlight tokens ──
        Map Lezer/CodeMirror highlight tag names to AdiaUI semantic
        tokens. Overridable per-instance by setting `--code-tok-*` on
        any ancestor. See docs/specs/code-editor.md §6.3 for the tag →
        class → role map. */
-    --code-tok-comment:      var(--a-fg-subtle);
-    --code-tok-keyword:      var(--a-accent-strong);
-    --code-tok-string:       var(--a-success-strong);
-    --code-tok-number:       var(--a-info-strong);
-    --code-tok-boolean:      var(--a-info-strong);
-    --code-tok-operator:     var(--a-fg);
-    --code-tok-punctuation:  var(--a-fg-muted);
-    --code-tok-function:     var(--a-brand-strong);
-    --code-tok-variable:     var(--a-fg);
-    --code-tok-type:         var(--a-warning-strong);
-    --code-tok-property:     var(--a-fg);
-    --code-tok-tag:          var(--a-accent-strong);
-    --code-tok-attribute:    var(--a-warning-strong);
-    --code-tok-url:          var(--a-info-strong);
-    --code-tok-invalid:      var(--a-danger-strong);
+    --code-tok-comment-default:      var(--a-fg-subtle);
+    --code-tok-keyword-default:      var(--a-accent-strong);
+    --code-tok-string-default:       var(--a-success-strong);
+    --code-tok-number-default:       var(--a-info-strong);
+    --code-tok-boolean-default:      var(--a-info-strong);
+    --code-tok-operator-default:     var(--a-fg);
+    --code-tok-punctuation-default:  var(--a-fg-muted);
+    --code-tok-function-default:     var(--a-brand-strong);
+    --code-tok-variable-default:     var(--a-fg);
+    --code-tok-type-default:         var(--a-warning-strong);
+    --code-tok-property-default:     var(--a-fg);
+    --code-tok-tag-default:          var(--a-accent-strong);
+    --code-tok-attribute-default:    var(--a-warning-strong);
+    --code-tok-url-default:          var(--a-info-strong);
+    --code-tok-invalid-default:      var(--a-danger-strong);
 
     /* ── Lint markers (Phase 3 — editable JSON) ──
        `@codemirror/lint` paints gutter markers + diagnostic tooltips
        + inline underlines. Only fires in editable mode with a linter
        attached; read-only instances never see these selectors. */
-    --code-lint-gutter-bg:   var(--a-bg-subtle);
-    --code-lint-error:       var(--a-danger-strong);
-    --code-lint-warning:     var(--a-warning-strong);
-    --code-lint-info:        var(--a-info-strong);
-    --code-lint-tooltip-bg:  var(--a-bg-strong);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
-    --code-lint-tooltip-fg:  var(--a-fg);
-    --code-lint-tooltip-border: var(--a-border-subtle);
+    --code-lint-gutter-bg-default:   var(--a-bg-subtle);
+    --code-lint-error-default:       var(--a-danger-strong);
+    --code-lint-warning-default:     var(--a-warning-strong);
+    --code-lint-info-default:        var(--a-info-strong);
+    --code-lint-tooltip-bg-default:  var(--a-bg-strong);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
+    --code-lint-tooltip-fg-default:  var(--a-fg);
+    --code-lint-tooltip-border-default: var(--a-border-subtle);
   }
 
   /* ── Block (default) ── */
   :scope {
     box-sizing: border-box;
     display: block;
-    border: 1px solid var(--code-border);
-    border-radius: var(--code-radius);
+    border: 1px solid var(--code-border, var(--code-border-default));
+    border-radius: var(--code-radius, var(--code-radius-default));
     overflow: hidden;
-    background: var(--code-bg);
-    color: var(--code-fg);
-    font-family: var(--code-font);
-    font-size: var(--code-font-size);
+    background: var(--code-bg, var(--code-bg-default));
+    color: var(--code-fg, var(--code-fg-default));
+    font-family: var(--code-font, var(--code-font-default));
+    font-size: var(--code-font-size, var(--code-font-size-default));
   }
 
   /* Header — chrome band above the code block */
@@ -96,11 +96,11 @@
     align-items: center;
     justify-content: space-between;
     min-height: var(--a-chrome-pane-header-height);
-    padding: var(--code-py) var(--code-px);
-    background: var(--code-header-bg);
-    border-bottom: 1px solid var(--code-border);
-    font-size: var(--code-header-font);
-    color: var(--code-header-fg);
+    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
+    background: var(--code-header-bg, var(--code-header-bg-default));
+    border-bottom: 1px solid var(--code-border, var(--code-border-default));
+    font-size: var(--code-header-font, var(--code-header-font-default));
+    color: var(--code-header-fg, var(--code-header-fg-default));
   }
 
   & > header [slot="label"] {
@@ -113,17 +113,17 @@
   & > header [slot="copy"] {
     all: unset;
     cursor: pointer;
-    font-size: var(--code-header-font);
-    color: var(--code-header-fg);
-    padding: var(--code-copy-py) var(--code-copy-px);
-    border-radius: var(--code-radius-sm);
+    font-size: var(--code-header-font, var(--code-header-font-default));
+    color: var(--code-header-fg, var(--code-header-fg-default));
+    padding: var(--code-copy-py, var(--code-copy-py-default)) var(--code-copy-px, var(--code-copy-px-default));
+    border-radius: var(--code-radius-sm, var(--code-radius-sm-default));
     transition:
-      background var(--code-duration) var(--code-easing),
-      color var(--code-duration) var(--code-easing);
+      background var(--code-duration, var(--code-duration-default)) var(--code-easing, var(--code-easing-default)),
+      color var(--code-duration, var(--code-duration-default)) var(--code-easing, var(--code-easing-default));
   }
   & > header [slot="copy"]:hover {
-    background: var(--code-copy-hover-bg);
-    color: var(--code-copy-hover-fg);
+    background: var(--code-copy-hover-bg, var(--code-copy-hover-bg-default));
+    color: var(--code-copy-hover-fg, var(--code-copy-hover-fg-default));
   }
 
   /* Pre > Code — reset any ambient page styling (margins, borders,
@@ -134,10 +134,10 @@
     border: none;
     border-radius: 0;
     background: transparent;
-    padding: var(--code-py) var(--code-px);
+    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
     overflow-x: auto;
-    font-family: var(--code-font);
-    font-size: var(--code-font-size);
+    font-family: var(--code-font, var(--code-font-default));
+    font-size: var(--code-font-size, var(--code-font-size-default));
     line-height: 1.5;
     scrollbar-width: none;
   }
@@ -170,8 +170,8 @@
     grid-template-columns: 1fr;
     /* Bleed the row tint to the pre's padding edges so it reads as a
        full-width line, not a gap-margined pill. */
-    margin-inline: calc(-1 * var(--code-px));
-    padding-inline: var(--code-px);
+    margin-inline: calc(-1 * var(--code-px, var(--code-px-default)));
+    padding-inline: var(--code-px, var(--code-px-default));
   }
   & > pre > code[data-line-numbers] > [data-line-state] {
     grid-template-columns: auto 1fr;
@@ -205,21 +205,21 @@
     align-items: center;
     justify-content: space-between;
     min-height: var(--a-chrome-pane-footer-height);
-    padding: var(--code-py) var(--code-px);
-    background: var(--code-header-bg);
-    border-top: 1px solid var(--code-border);
-    font-size: var(--code-header-font);
-    color: var(--code-header-fg);
+    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
+    background: var(--code-header-bg, var(--code-header-bg-default));
+    border-top: 1px solid var(--code-border, var(--code-border-default));
+    font-size: var(--code-header-font, var(--code-header-font-default));
+    color: var(--code-header-fg, var(--code-header-fg-default));
   }
 
   /* ── Inline ── */
   :scope[inline] {
     display: inline;
     padding: 0.1em 0.4em;
-    background: var(--code-bg);
+    background: var(--code-bg, var(--code-bg-default));
     border: none;
-    border-radius: var(--code-radius-sm);
-    font-family: var(--code-font);
+    border-radius: var(--code-radius-sm, var(--code-radius-sm-default));
+    font-family: var(--code-font, var(--code-font-default));
     font-size: 0.9em;
     overflow: visible;
   }
@@ -295,9 +295,9 @@
 
   :scope .cm-editor {
     background: transparent;
-    color: var(--code-fg);
-    font-family: var(--code-font);
-    font-size: var(--code-font-size);
+    color: var(--code-fg, var(--code-fg-default));
+    font-family: var(--code-font, var(--code-font-default));
+    font-size: var(--code-font-size, var(--code-font-size-default));
     line-height: 1.5;
   }
 
@@ -313,64 +313,64 @@
   }
 
   :scope .cm-content {
-    padding: var(--code-py) var(--code-px);
-    caret-color: var(--code-cursor);
+    padding: var(--code-py, var(--code-py-default)) var(--code-px, var(--code-px-default));
+    caret-color: var(--code-cursor, var(--code-cursor-default));
   }
 
   :scope .cm-editor.cm-focused {
-    outline: 2px solid var(--code-focus-ring);
+    outline: 2px solid var(--code-focus-ring, var(--code-focus-ring-default));
     outline-offset: -2px;
   }
 
   :scope .cm-gutters {
-    background: var(--code-gutter-bg);
-    color: var(--code-gutter-fg);
-    border-right: 1px solid var(--code-border);
+    background: var(--code-gutter-bg, var(--code-gutter-bg-default));
+    color: var(--code-gutter-fg, var(--code-gutter-fg-default));
+    border-right: 1px solid var(--code-border, var(--code-border-default));
   }
 
   :scope .cm-activeLine {
-    background: var(--code-active-line-bg);
+    background: var(--code-active-line-bg, var(--code-active-line-bg-default));
   }
   :scope .cm-activeLineGutter {
-    background: var(--code-active-line-bg);
-    color: var(--code-fg);
+    background: var(--code-active-line-bg, var(--code-active-line-bg-default));
+    color: var(--code-fg, var(--code-fg-default));
   }
 
   :scope .cm-selectionBackground,
   :scope ::selection {
-    background: var(--code-selection-bg);
+    background: var(--code-selection-bg, var(--code-selection-bg-default));
   }
 
   :scope .cm-selectionMatch {
-    background: var(--code-selection-match);
+    background: var(--code-selection-match, var(--code-selection-match-default));
   }
 
   :scope .cm-cursor {
-    border-left-color: var(--code-cursor);
+    border-left-color: var(--code-cursor, var(--code-cursor-default));
   }
 
   /* Syntax highlight — one rule per token role (see core/_cm-theme.js) */
-  :scope .tok-comment     { color: var(--code-tok-comment); font-style: italic; }
-  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: 500; }
-  :scope .tok-string      { color: var(--code-tok-string); }
-  :scope .tok-number      { color: var(--code-tok-number); }
-  :scope .tok-boolean     { color: var(--code-tok-boolean); }
-  :scope .tok-operator    { color: var(--code-tok-operator); }
-  :scope .tok-punctuation { color: var(--code-tok-punctuation); }
-  :scope .tok-function    { color: var(--code-tok-function); }
-  :scope .tok-variable    { color: var(--code-tok-variable); }
-  :scope .tok-type        { color: var(--code-tok-type); font-weight: 500; }
-  :scope .tok-property    { color: var(--code-tok-property); }
-  :scope .tok-tag         { color: var(--code-tok-tag); }
-  :scope .tok-attribute   { color: var(--code-tok-attribute); }
-  :scope .tok-url         { color: var(--code-tok-url); text-decoration: underline; }
-  :scope .tok-invalid     { color: var(--code-tok-invalid); text-decoration: wavy underline; }
+  :scope .tok-comment     { color: var(--code-tok-comment, var(--code-tok-comment-default)); font-style: italic; }
+  :scope .tok-keyword     { color: var(--code-tok-keyword, var(--code-tok-keyword-default)); font-weight: 500; }
+  :scope .tok-string      { color: var(--code-tok-string, var(--code-tok-string-default)); }
+  :scope .tok-number      { color: var(--code-tok-number, var(--code-tok-number-default)); }
+  :scope .tok-boolean     { color: var(--code-tok-boolean, var(--code-tok-boolean-default)); }
+  :scope .tok-operator    { color: var(--code-tok-operator, var(--code-tok-operator-default)); }
+  :scope .tok-punctuation { color: var(--code-tok-punctuation, var(--code-tok-punctuation-default)); }
+  :scope .tok-function    { color: var(--code-tok-function, var(--code-tok-function-default)); }
+  :scope .tok-variable    { color: var(--code-tok-variable, var(--code-tok-variable-default)); }
+  :scope .tok-type        { color: var(--code-tok-type, var(--code-tok-type-default)); font-weight: 500; }
+  :scope .tok-property    { color: var(--code-tok-property, var(--code-tok-property-default)); }
+  :scope .tok-tag         { color: var(--code-tok-tag, var(--code-tok-tag-default)); }
+  :scope .tok-attribute   { color: var(--code-tok-attribute, var(--code-tok-attribute-default)); }
+  :scope .tok-url         { color: var(--code-tok-url, var(--code-tok-url-default)); text-decoration: underline; }
+  :scope .tok-invalid     { color: var(--code-tok-invalid, var(--code-tok-invalid-default)); text-decoration: wavy underline; }
 
   /* ── Lint gutter + diagnostics ──
      Styles the `@codemirror/lint` markers in the gutter, the inline
      wavy underline on the diagnostic range, and the tooltip panel. */
   :scope .cm-gutter-lint {
-    background: var(--code-lint-gutter-bg);
+    background: var(--code-lint-gutter-bg, var(--code-lint-gutter-bg-default));
     width: 1em;
   }
   :scope .cm-lint-marker {
@@ -378,19 +378,19 @@
     height: 0.7em;
     margin: 0.15em 0.15em;
   }
-  :scope .cm-lint-marker-error   { color: var(--code-lint-error); }
-  :scope .cm-lint-marker-warning { color: var(--code-lint-warning); }
-  :scope .cm-lint-marker-info    { color: var(--code-lint-info); }
+  :scope .cm-lint-marker-error   { color: var(--code-lint-error, var(--code-lint-error-default)); }
+  :scope .cm-lint-marker-warning { color: var(--code-lint-warning, var(--code-lint-warning-default)); }
+  :scope .cm-lint-marker-info    { color: var(--code-lint-info, var(--code-lint-info-default)); }
 
-  :scope .cm-lintRange-error   { background: none; text-decoration: wavy underline var(--code-lint-error); }
-  :scope .cm-lintRange-warning { background: none; text-decoration: wavy underline var(--code-lint-warning); }
-  :scope .cm-lintRange-info    { background: none; text-decoration: wavy underline var(--code-lint-info); }
+  :scope .cm-lintRange-error   { background: none; text-decoration: wavy underline var(--code-lint-error, var(--code-lint-error-default)); }
+  :scope .cm-lintRange-warning { background: none; text-decoration: wavy underline var(--code-lint-warning, var(--code-lint-warning-default)); }
+  :scope .cm-lintRange-info    { background: none; text-decoration: wavy underline var(--code-lint-info, var(--code-lint-info-default)); }
 
   :scope .cm-tooltip.cm-tooltip-lint {
-    background: var(--code-lint-tooltip-bg);
-    color: var(--code-lint-tooltip-fg);
-    border: 1px solid var(--code-lint-tooltip-border);
-    border-radius: var(--code-radius-sm);
+    background: var(--code-lint-tooltip-bg, var(--code-lint-tooltip-bg-default));
+    color: var(--code-lint-tooltip-fg, var(--code-lint-tooltip-fg-default));
+    border: 1px solid var(--code-lint-tooltip-border, var(--code-lint-tooltip-border-default));
+    border-radius: var(--code-radius-sm, var(--code-radius-sm-default));
     padding: var(--a-space-1) var(--a-space-2);
     font-size: var(--a-ui-sm);
     font-family: var(--a-font-family);
@@ -398,11 +398,11 @@
   }
   :scope .cm-diagnostic {
     padding: 0;
-    border-inline-start: var(--code-lint-marker-w) solid transparent;
+    border-inline-start: var(--code-lint-marker-w, var(--code-lint-marker-w-default)) solid transparent;
     padding-inline-start: var(--a-space-2);
   }
-  :scope .cm-diagnostic-error   { border-inline-start-color: var(--code-lint-error); }
-  :scope .cm-diagnostic-warning { border-inline-start-color: var(--code-lint-warning); }
-  :scope .cm-diagnostic-info    { border-inline-start-color: var(--code-lint-info); }
+  :scope .cm-diagnostic-error   { border-inline-start-color: var(--code-lint-error, var(--code-lint-error-default)); }
+  :scope .cm-diagnostic-warning { border-inline-start-color: var(--code-lint-warning, var(--code-lint-warning-default)); }
+  :scope .cm-diagnostic-info    { border-inline-start-color: var(--code-lint-info, var(--code-lint-info-default)); }
   :scope .cm-diagnosticText { white-space: pre-wrap; }
 }

package/components/code/code.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UICode } from './class.js';
+import { UICode } from './code.class.js';
 
 defineIfFree('code-ui', UICode);
 

package/components/col/col.css

@@ -1,17 +1,17 @@
 @scope (col-ui) {
   :where(:scope) {
-    --col-gap:     var(--a-gap);
-    --col-justify: flex-start;
-    --col-align:   stretch;
+    --col-gap-default:     var(--a-gap);
+    --col-justify-default: flex-start;
+    --col-align-default:   stretch;
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--col-gap);
-    justify-content: var(--col-justify);
-    align-items: var(--col-align);
+    gap: var(--col-gap, var(--col-gap-default));
+    justify-content: var(--col-justify, var(--col-justify-default));
+    align-items: var(--col-align, var(--col-align-default));
     /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
     padding: var(--a-padding, 0);
     margin: var(--a-margin, 0);
@@ -21,17 +21,17 @@
   }
 
   /* Justify */
-  :scope[justify="start"]         { --col-justify: flex-start; }
-  :scope[justify="center"]        { --col-justify: center; }
-  :scope[justify="end"]           { --col-justify: flex-end; }
-  :scope[justify="space-between"] { --col-justify: space-between; }
-  :scope[justify="space-around"]  { --col-justify: space-around; }
+  :scope[justify="start"]         { --col-justify-default: flex-start; }
+  :scope[justify="center"]        { --col-justify-default: center; }
+  :scope[justify="end"]           { --col-justify-default: flex-end; }
+  :scope[justify="space-between"] { --col-justify-default: space-between; }
+  :scope[justify="space-around"]  { --col-justify-default: space-around; }
 
   /* Align */
-  :scope[align="start"]   { --col-align: flex-start; text-align: start; }
-  :scope[align="center"]  { --col-align: center; text-align: center; }
-  :scope[align="end"]     { --col-align: flex-end; text-align: end; }
-  :scope[align="stretch"] { --col-align: stretch; }
+  :scope[align="start"]   { --col-align-default: flex-start; text-align: start; }
+  :scope[align="center"]  { --col-align-default: center; text-align: center; }
+  :scope[align="end"]     { --col-align-default: flex-end; text-align: end; }
+  :scope[align="stretch"] { --col-align-default: stretch; }
 
   /* Grow — fills remaining space in a flex parent. Used inside row-ui
      to push trailing content (amounts, badges) to the far edge. */

package/components/col/col.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UICol } from './class.js';
+import { UICol } from './col.class.js';
 
 defineIfFree('col-ui', UICol);
 

package/components/color-input/color-input.js

@@ -19,7 +19,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIColorInput } from './class.js';
+import { UIColorInput } from './color-input.class.js';
 
 defineIfFree('color-input-ui', UIColorInput);