@adia-ai/web-components 0.6.32 → 0.6.34

package/components/page/page.css

@@ -1,37 +1,37 @@
 @scope (page-ui) {
   :where(:scope) {
     /* ── Max-width clamps ── */
-    --page-max-width-prose:  65ch;
-    --page-max-width-narrow: 80ch;
-    --page-max-width-wide:   1080px;
-    --page-max-width-full:   100%;
+    --page-max-width-prose-default:  65ch;
+    --page-max-width-narrow-default: 80ch;
+    --page-max-width-wide-default:   1080px;
+    --page-max-width-full-default:   100%;
 
     /* ── Padding default (when [padding] is set without a value) ── */
     --page-padding-default:  var(--a-space-6);
 
     /* ── Surfaces ── */
-    --page-bg:               var(--a-canvas-0);
-    --page-fg:               var(--a-fg);
+    --page-bg-default:               var(--a-canvas-0);
+    --page-fg-default:               var(--a-fg);
 
     /* ── Sticky-header chrome (when [data-header-stuck]) ── */
-    --page-sticky-bg:        var(--a-canvas-0);
-    --page-sticky-border:    1px solid var(--a-border-subtle);
-    --page-sticky-shadow:    var(--a-shadow-sm);
+    --page-sticky-bg-default:        var(--a-canvas-0);
+    --page-sticky-border-default:    1px solid var(--a-border-subtle);
+    --page-sticky-shadow-default:    var(--a-shadow-sm);
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
     width: 100%;
-    background: var(--page-bg);
-    color: var(--page-fg);
+    background: var(--page-bg, var(--page-bg-default));
+    color: var(--page-fg, var(--page-fg-default));
   }
 
   /* ── max-width clamps ── */
-  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose);  margin-inline: auto; }
-  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow); margin-inline: auto; }
-  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide);   margin-inline: auto; }
-  :scope[max-width="full"]   { max-width: var(--page-max-width-full); }
+  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose, var(--page-max-width-prose-default));  margin-inline: auto; }
+  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow, var(--page-max-width-narrow-default)); margin-inline: auto; }
+  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide, var(--page-max-width-wide-default));   margin-inline: auto; }
+  :scope[max-width="full"]   { max-width: var(--page-max-width-full, var(--page-max-width-full-default)); }
 
   /* ── Padding scale (mirrors --a-space-N) ── */
   :scope[padding=""]  { padding: var(--page-padding-default); }
@@ -57,12 +57,12 @@
     position: sticky;
     top: 0;
     z-index: 1;
-    background: var(--page-sticky-bg);
+    background: var(--page-sticky-bg, var(--page-sticky-bg-default));
     transition: border-color var(--a-duration-fast) var(--a-easing), box-shadow var(--a-duration-fast) var(--a-easing);
   }
 
   :scope[data-header-stuck] > :where(header, header-ui) {
-    border-block-end: var(--page-sticky-border);
-    box-shadow: var(--page-sticky-shadow);
+    border-block-end: var(--page-sticky-border, var(--page-sticky-border-default));
+    box-shadow: var(--page-sticky-shadow, var(--page-sticky-shadow-default));
   }
 }

package/components/pagination/pagination.css

@@ -5,36 +5,36 @@
 @scope (pagination-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --pagination-gap:          var(--a-space-1);
-    --pagination-button-size:  var(--a-size-sm);
-    --pagination-button-px:    var(--a-space-1);
-    --pagination-radius:       var(--a-radius-sm);
+    --pagination-gap-default:          var(--a-space-1);
+    --pagination-button-size-default:  var(--a-size-sm);
+    --pagination-button-px-default:    var(--a-space-1);
+    --pagination-radius-default:       var(--a-radius-sm);
 
     /* ── Typography ── */
-    --pagination-font:         var(--a-ui-size);
+    --pagination-font-default:         var(--a-ui-size);
 
     /* ── Colors ── */
-    --pagination-fg:           var(--a-fg-subtle);
-    --pagination-fg-hover:     var(--a-fg);
-    --pagination-fg-active:    var(--a-chrome-light);
-    --pagination-fg-muted:     var(--a-fg-muted);
-    --pagination-bg-hover:     var(--a-bg-muted);
-    --pagination-bg-active:    var(--a-accent);
-    --pagination-fg-disabled:  var(--a-ui-text-disabled);
+    --pagination-fg-default:           var(--a-fg-subtle);
+    --pagination-fg-hover-default:     var(--a-fg);
+    --pagination-fg-active-default:    var(--a-chrome-light);
+    --pagination-fg-muted-default:     var(--a-fg-muted);
+    --pagination-bg-hover-default:     var(--a-bg-muted);
+    --pagination-bg-active-default:    var(--a-accent);
+    --pagination-fg-disabled-default:  var(--a-ui-text-disabled);
 
     /* ── Transition ── */
-    --pagination-duration:     var(--a-duration-fast);
-    --pagination-easing:       var(--a-easing);
+    --pagination-duration-default:     var(--a-duration-fast);
+    --pagination-easing-default:       var(--a-easing);
 
     /* ── State ── */
-    --pagination-focus-ring:   var(--a-focus-ring);
+    --pagination-focus-ring-default:   var(--a-focus-ring);
 
     /* ── Nav (button variant chrome) ── */
-    --pagination-nav-bg:           transparent;
-    --pagination-nav-border:       transparent;
-    --pagination-nav-border-hover: transparent;
-    --pagination-nav-bg-disabled:  transparent;
-    --pagination-nav-border-disabled: transparent;
+    --pagination-nav-bg-default:           transparent;
+    --pagination-nav-border-default:       transparent;
+    --pagination-nav-border-hover-default: transparent;
+    --pagination-nav-bg-disabled-default:  transparent;
+    --pagination-nav-border-disabled-default: transparent;
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -48,7 +48,7 @@
   [slot="nav"] {
     display: flex;
     align-items: center;
-    gap: var(--pagination-gap);
+    gap: var(--pagination-gap, var(--pagination-gap-default));
   }
 
   /* ── All buttons ── */
@@ -57,44 +57,44 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--pagination-button-size);
-    height: var(--pagination-button-size);
-    padding: 0 var(--pagination-button-px);
+    min-width: var(--pagination-button-size, var(--pagination-button-size-default));
+    height: var(--pagination-button-size, var(--pagination-button-size-default));
+    padding: 0 var(--pagination-button-px, var(--pagination-button-px-default));
     border: none;
     background: none;
-    border-radius: var(--pagination-radius);
+    border-radius: var(--pagination-radius, var(--pagination-radius-default));
     font: inherit;
-    font-size: var(--pagination-font);
-    color: var(--pagination-fg);
+    font-size: var(--pagination-font, var(--pagination-font-default));
+    color: var(--pagination-fg, var(--pagination-fg-default));
     cursor: pointer;
     user-select: none;
     line-height: 1;
     transition:
-      background var(--pagination-duration) var(--pagination-easing),
-      border-color var(--pagination-duration) var(--pagination-easing),
-      color var(--pagination-duration) var(--pagination-easing),
-      box-shadow var(--pagination-duration) var(--pagination-easing);
+      background var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default)),
+      border-color var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default)),
+      color var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default)),
+      box-shadow var(--pagination-duration, var(--pagination-duration-default)) var(--pagination-easing, var(--pagination-easing-default));
   }
 
   [slot="nav"] button:not([disabled]):hover {
-    background: var(--pagination-bg-hover);
-    color: var(--pagination-fg-hover);
+    background: var(--pagination-bg-hover, var(--pagination-bg-hover-default));
+    color: var(--pagination-fg-hover, var(--pagination-fg-hover-default));
   }
 
   /* ── Active page ── */
   [slot="nav"] button[data-active] {
-    background: var(--pagination-bg-active);
-    color: var(--pagination-fg-active);
+    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
+    color: var(--pagination-fg-active, var(--pagination-fg-active-default));
   }
 
   [slot="nav"] button[data-active]:hover {
-    background: var(--pagination-bg-active);
-    color: var(--pagination-fg-active);
+    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
+    color: var(--pagination-fg-active, var(--pagination-fg-active-default));
   }
 
   /* ── Disabled (prev/next at boundaries) ── */
   [slot="nav"] button[disabled] {
-    color: var(--pagination-fg-disabled);
+    color: var(--pagination-fg-disabled, var(--pagination-fg-disabled-default));
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -105,10 +105,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--pagination-button-size);
-    height: var(--pagination-button-size);
-    color: var(--pagination-fg-muted);
-    font-size: var(--pagination-font);
+    min-width: var(--pagination-button-size, var(--pagination-button-size-default));
+    height: var(--pagination-button-size, var(--pagination-button-size-default));
+    color: var(--pagination-fg-muted, var(--pagination-fg-muted-default));
+    font-size: var(--pagination-font, var(--pagination-font-default));
     pointer-events: none;
     user-select: none;
     line-height: 1;
@@ -117,7 +117,7 @@
   /* ── Focus visible ── */
   [slot="nav"] button:focus-visible {
     outline: none;
-    box-shadow: var(--pagination-focus-ring);
+    box-shadow: var(--pagination-focus-ring, var(--pagination-focus-ring-default));
   }
 
   /* ═══════════════════════════════════════════════════════════
@@ -125,41 +125,41 @@
      ═══════════════════════════════════════════════════════════ */
 
   :scope[variant="button"] {
-    --pagination-nav-bg:              var(--a-bg);
-    --pagination-nav-border:          var(--a-border-subtle);
-    --pagination-nav-border-hover:    var(--a-border);
-    --pagination-nav-bg-disabled:     var(--a-bg);
-    --pagination-nav-border-disabled: var(--a-border-subtle);
+    --pagination-nav-bg-default:              var(--a-bg);
+    --pagination-nav-border-default:          var(--a-border-subtle);
+    --pagination-nav-border-hover-default:    var(--a-border);
+    --pagination-nav-bg-disabled-default:     var(--a-bg);
+    --pagination-nav-border-disabled-default: var(--a-border-subtle);
   }
 
   :scope[variant="button"] [slot="nav"] button {
-    width: var(--pagination-button-size);
-    min-width: var(--pagination-button-size);
-    height: var(--pagination-button-size);
+    width: var(--pagination-button-size, var(--pagination-button-size-default));
+    min-width: var(--pagination-button-size, var(--pagination-button-size-default));
+    height: var(--pagination-button-size, var(--pagination-button-size-default));
     padding: 0;
     aspect-ratio: 1;
-    border: 1px solid var(--pagination-nav-border);
-    border-radius: var(--pagination-radius);
-    background: var(--pagination-nav-bg);
+    border: 1px solid var(--pagination-nav-border, var(--pagination-nav-border-default));
+    border-radius: var(--pagination-radius, var(--pagination-radius-default));
+    background: var(--pagination-nav-bg, var(--pagination-nav-bg-default));
   }
 
   :scope[variant="button"] [slot="nav"] button:not([disabled]):hover {
-    border-color: var(--pagination-nav-border-hover);
-    background: var(--pagination-bg-hover);
+    border-color: var(--pagination-nav-border-hover, var(--pagination-nav-border-hover-default));
+    background: var(--pagination-bg-hover, var(--pagination-bg-hover-default));
   }
 
   :scope[variant="button"] [slot="nav"] button[data-active] {
     border-color: transparent;
-    background: var(--pagination-bg-active);
-    color: var(--pagination-fg-active);
+    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
+    color: var(--pagination-fg-active, var(--pagination-fg-active-default));
   }
 
   :scope[variant="button"] [slot="nav"] button[data-active]:hover {
-    background: var(--pagination-bg-active);
+    background: var(--pagination-bg-active, var(--pagination-bg-active-default));
   }
 
   :scope[variant="button"] [slot="nav"] button[disabled] {
-    border-color: var(--pagination-nav-border-disabled);
-    background: var(--pagination-nav-bg-disabled);
+    border-color: var(--pagination-nav-border-disabled, var(--pagination-nav-border-disabled-default));
+    background: var(--pagination-nav-bg-disabled, var(--pagination-nav-bg-disabled-default));
   }
 }

package/components/pane/pane.css

@@ -1,45 +1,45 @@
 @scope (pane-ui) {
   /* Tokens — :where() for zero specificity so consumers can override */
   :where(:scope) {
-    --pane-bg:              var(--a-bg);
-    --pane-border:          var(--a-border-subtle);
-    --pane-radius:          var(--a-radius-lg);
+    --pane-bg-default:              var(--a-bg);
+    --pane-border-default:          var(--a-border-subtle);
+    --pane-radius-default:          var(--a-radius-lg);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --pane-bar-height:      var(--a-chrome-pane-header-height);
-    --pane-header-px:       var(--a-space-3);
-    --pane-header-py:       var(--a-space-2);
-    --pane-header-fg:       var(--a-fg);
-    --pane-header-size:     var(--a-ui-size);
-    --pane-header-weight:   var(--a-weight-medium);
-    --pane-section-px:      var(--a-space-3);
-    --pane-section-py:      var(--a-space-2);
-    --pane-section-header-fg: var(--a-fg-muted);
-    --pane-section-header-size: var(--a-ui-tiny);
-    --pane-footer-px:       var(--a-space-3);
-    --pane-footer-py:       var(--a-space-2);
-    --pane-col-gap:         var(--a-space-3);
+    --pane-bar-height-default:      var(--a-chrome-pane-header-height);
+    --pane-header-px-default:       var(--a-space-3);
+    --pane-header-py-default:       var(--a-space-2);
+    --pane-header-fg-default:       var(--a-fg);
+    --pane-header-size-default:     var(--a-ui-size);
+    --pane-header-weight-default:   var(--a-weight-medium);
+    --pane-section-px-default:      var(--a-space-3);
+    --pane-section-py-default:      var(--a-space-2);
+    --pane-section-header-fg-default: var(--a-fg-muted);
+    --pane-section-header-size-default: var(--a-ui-tiny);
+    --pane-footer-px-default:       var(--a-space-3);
+    --pane-footer-py-default:       var(--a-space-2);
+    --pane-col-gap-default:         var(--a-space-3);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --pane-resize-width:    4px;
-    --pane-resize-fg:       var(--a-border);
-    --pane-resize-fg-hover: var(--a-fg-muted);
+    --pane-resize-width-default:    4px;
+    --pane-resize-fg-default:       var(--a-border);
+    --pane-resize-fg-hover-default: var(--a-fg-muted);
 
     /* ── Spacing ── */
-    --pane-gap-sm:          var(--a-space-2);
-    --pane-gap-xs:          var(--a-space-1);
+    --pane-gap-sm-default:          var(--a-space-2);
+    --pane-gap-xs-default:          var(--a-space-1);
 
     /* ── Header interaction ── */
-    --pane-header-bg-hover: var(--a-bg-subtle);
-    --pane-chevron-fg:      var(--a-fg-muted);
+    --pane-header-bg-hover-default: var(--a-bg-subtle);
+    --pane-chevron-fg-default:      var(--a-fg-muted);
 
     /* ── Section header ── */
-    --pane-section-header-weight: var(--a-weight-medium);
+    --pane-section-header-weight-default: var(--a-weight-medium);
 
     /* ── Resize active ── */
-    --pane-resize-fg-active: var(--a-fg-subtle);
+    --pane-resize-fg-active-default: var(--a-fg-subtle);
 
     /* ── Transitions ── */
-    --pane-duration:        var(--a-duration-fast);
-    --pane-easing:          var(--a-easing);
+    --pane-duration-default:        var(--a-duration-fast);
+    --pane-easing-default:          var(--a-easing);
   }
 
   :scope {
@@ -48,9 +48,9 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    background: var(--pane-bg);
-    border: 1px solid var(--pane-border);
-    /*border-radius: var(--pane-radius);*/
+    background: var(--pane-bg, var(--pane-bg-default));
+    border: 1px solid var(--pane-border, var(--pane-border-default));
+    /*border-radius: var(--pane-radius, var(--pane-radius-default));*/
     overflow: hidden;
   }
 
@@ -74,10 +74,10 @@
     border: none;
   }
   :scope[side="leading"] {
-    border-inline-end: 1px solid var(--pane-border);
+    border-inline-end: 1px solid var(--pane-border, var(--pane-border-default));
   }
   :scope[side="trailing"] {
-    border-inline-start: 1px solid var(--pane-border);
+    border-inline-start: 1px solid var(--pane-border, var(--pane-border-default));
   }
 
   /* ── Pane header ── */
@@ -86,20 +86,20 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: var(--pane-gap-sm);
-    height: var(--pane-bar-height);
-    padding: 0 var(--pane-header-px);
-    font-size: var(--pane-header-size);
-    font-weight: var(--pane-header-weight);
-    color: var(--pane-header-fg);
+    gap: var(--pane-gap-sm, var(--pane-gap-sm-default));
+    height: var(--pane-bar-height, var(--pane-bar-height-default));
+    padding: 0 var(--pane-header-px, var(--pane-header-px-default));
+    font-size: var(--pane-header-size, var(--pane-header-size-default));
+    font-weight: var(--pane-header-weight, var(--pane-header-weight-default));
+    color: var(--pane-header-fg, var(--pane-header-fg-default));
     cursor: pointer;
     user-select: none;
-    box-shadow: inset 0 -1px 0 var(--pane-border);
-    transition: background var(--pane-duration) var(--pane-easing);
+    box-shadow: inset 0 -1px 0 var(--pane-border, var(--pane-border-default));
+    transition: background var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
   }
 
   & > header:hover {
-    background: var(--pane-header-bg-hover);
+    background: var(--pane-header-bg-hover, var(--pane-header-bg-hover-default));
   }
 
   & > header:focus-visible {
@@ -112,8 +112,8 @@
     --a-icon-size: var(--a-caret-size);
     flex-shrink: 0;
     margin-inline-start: auto;
-    color: var(--pane-chevron-fg);
-    transition: transform var(--pane-duration) var(--pane-easing);
+    color: var(--pane-chevron-fg, var(--pane-chevron-fg-default));
+    transition: transform var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
     transform: rotate(90deg);
   }
 
@@ -127,7 +127,7 @@
     min-height: 0;
     overflow-y: auto;
     scrollbar-width: none;
-    padding: var(--pane-section-py) var(--pane-section-px);
+    padding: var(--pane-section-py, var(--pane-section-py-default)) var(--pane-section-px, var(--pane-section-px-default));
   }
 
   & > section::-webkit-scrollbar {
@@ -137,12 +137,12 @@
   /* Section header — section's padding is the single source of horizontal inset;
      content inside the section must not add its own padding. */
   & > section > header {
-    font-size: var(--pane-section-header-size);
-    color: var(--pane-section-header-fg);
-    padding-bottom: var(--pane-col-gap);
+    font-size: var(--pane-section-header-size, var(--pane-section-header-size-default));
+    color: var(--pane-section-header-fg, var(--pane-section-header-fg-default));
+    padding-bottom: var(--pane-col-gap, var(--pane-col-gap-default));
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    font-weight: var(--pane-section-header-weight);
+    font-weight: var(--pane-section-header-weight, var(--pane-section-header-weight-default));
   }
 
   /* Defensive: a data-col directly under a section inherits the section's inset;
@@ -153,7 +153,7 @@
 
   /* Section divider between sections */
   & > section + section {
-    border-top: 1px solid var(--pane-border);
+    border-top: 1px solid var(--pane-border, var(--pane-border-default));
   }
 
   /* Column layout */
@@ -161,16 +161,16 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--pane-col-gap);
+    gap: var(--pane-col-gap, var(--pane-col-gap-default));
   }
 
   /* ── Footer ── */
   & > footer {
-    min-height: var(--pane-bar-height);
+    min-height: var(--pane-bar-height, var(--pane-bar-height-default));
     display: flex;
     align-items: center;
-    padding: var(--pane-footer-py) var(--pane-footer-px);
-    border-top: 1px solid var(--pane-border);
+    padding: var(--pane-footer-py, var(--pane-footer-py-default)) var(--pane-footer-px, var(--pane-footer-px-default));
+    border-top: 1px solid var(--pane-border, var(--pane-border-default));
   }
 
   /* ── Collapsed state ── */
@@ -194,10 +194,10 @@
     top: 0;
     inset-inline-end: 0;
     bottom: 0;
-    width: var(--pane-resize-width);
+    width: var(--pane-resize-width, var(--pane-resize-width-default));
     cursor: col-resize;
     background: transparent;
-    transition: background var(--pane-duration) var(--pane-easing);
+    transition: background var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
     touch-action: none;
     z-index: 1;
   }
@@ -208,10 +208,10 @@
   }
 
   [slot="resize"]:hover {
-    background: var(--pane-resize-fg-hover);
+    background: var(--pane-resize-fg-hover, var(--pane-resize-fg-hover-default));
   }
 
   :scope[data-resizing] [slot="resize"] {
-    background: var(--pane-resize-fg-active);
+    background: var(--pane-resize-fg-active, var(--pane-resize-fg-active-default));
   }
 }