@adia-ai/web-components 0.6.32 → 0.6.34

package/components/image/image.css

@@ -1,14 +1,14 @@
 @scope (image-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --image-radius: 0;
+    --image-radius-default: 0;
 
     /* ── Colors ── */
-    --image-bg:       var(--a-bg-muted);
+    --image-bg-default:       var(--a-bg-muted);
 
     /* ── Transition ── */
-    --image-duration: var(--a-duration);
-    --image-easing:   var(--a-easing);
+    --image-duration-default: var(--a-duration);
+    --image-easing-default:   var(--a-easing);
   }
 
   :scope {
@@ -17,8 +17,8 @@
     display: inline-block;
     position: relative;
     overflow: hidden;
-    background: var(--image-bg);
-    border-radius: var(--image-radius);
+    background: var(--image-bg, var(--image-bg-default));
+    border-radius: var(--image-radius, var(--image-radius-default));
   }
 
   /* ── Image ── */
@@ -28,7 +28,7 @@
     height: 100%;
     object-fit: cover;
     opacity: 0;
-    transition: opacity var(--image-duration) var(--image-easing);
+    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
   }
 
   :scope[data-loaded] [slot="image"] {
@@ -45,7 +45,7 @@
   [slot="skeleton"] {
     position: absolute;
     inset: 0;
-    transition: opacity var(--image-duration) var(--image-easing);
+    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
   }
 
   :scope[data-loaded] [slot="skeleton"] {
@@ -54,10 +54,10 @@
   }
 
   /* ── Radius variants ── */
-  :scope[radius="sm"]   { --image-radius: var(--a-radius-sm); }
-  :scope[radius="md"]   { --image-radius: var(--a-radius-md); }
-  :scope[radius="lg"]   { --image-radius: var(--a-radius-lg); }
-  :scope[radius="full"] { --image-radius: var(--a-radius-full); }
+  :scope[radius="sm"]   { --image-radius-default: var(--a-radius-sm); }
+  :scope[radius="md"]   { --image-radius-default: var(--a-radius-md); }
+  :scope[radius="lg"]   { --image-radius-default: var(--a-radius-lg); }
+  :scope[radius="full"] { --image-radius-default: var(--a-radius-full); }
 
   /* ── Size mode — fills the container.
      Layout-changing attribute; sanctioned in component-token-contract.md. */
@@ -70,7 +70,7 @@
   /* ── Raw — strips chrome (background + radius) for edge-to-edge rendering.
      Comes after radius variants so it overrides them by source order. */
   :scope[raw] {
-    --image-bg: transparent;
-    --image-radius: 0;
+    --image-bg-default: transparent;
+    --image-radius-default: 0;
   }
 }

package/components/index.js

@@ -25,6 +25,7 @@ export { UITextarea } from './textarea/textarea.js';
 export { UICheck } from './check/check.js';
 export { UIRadio } from './radio/radio.js';
 export { UIOptionCard } from './option-card/option-card.js';
+export { UIIntegrationCard } from './integration-card/integration-card.js';
 export { UISwitch } from './switch/switch.js';
 export { UISlider } from './slider/slider.js';
 export { UISelect } from './select/select.js';
@@ -60,6 +61,7 @@ export { UIAvatar, UIAvatarGroup } from './avatar/avatar.js';
 export { UIProgress } from './progress/progress.js';
 export { UIStepProgress } from './step-progress/step-progress.js';
 export { UISkeleton } from './skeleton/skeleton.js';
+export { UISpinner } from './spinner/spinner.js';
 export { UIAlert } from './alert/alert.js';
 export { UIKbd } from './kbd/kbd.js';
 export { UITag } from './tag/tag.js';
@@ -78,6 +80,7 @@ export { UIDivider } from './divider/divider.js';
 export { UIPagination } from './pagination/pagination.js';
 export { UICode } from './code/code.js';
 export { UIList, UIListItem } from './list/list.js';
+export { UIListWindow } from './list-window/list-window.js';
 export { UIMenu, UIMenuItem, UIMenuDivider } from './menu/menu.js';
 export { UIToolbar, UIToolbarGroup } from './toolbar/toolbar.js';
 export { UINav } from './nav/nav.js';
@@ -86,11 +89,16 @@ export { UINavItem } from './nav-item/nav-item.js';
 export { UIOtpInput } from './otp-input/otp-input.js';
 export { UIImage } from './image/image.js';
 export { UISearch } from './search/search.js';
+export { UICombobox } from './combobox/combobox.js';
 export { UIStat } from './stat/stat.js';
 export { UIProgressRow } from './progress-row/progress-row.js';
 export { UIActionList, UIActionItem } from './action-list/action-list.js';
 export { UIEmptyState } from './empty-state/empty-state.js';
+export { UICalendarGrid } from './calendar-grid/calendar-grid.js';
 export { UICalendarPicker } from './calendar-picker/calendar-picker.js';
+export { UIDateRangePicker } from './date-range-picker/date-range-picker.js';
+export { UITimePicker } from './time-picker/time-picker.js';
+export { UIDatetimePicker } from './datetime-picker/datetime-picker.js';
 export { UIEmbed } from './embed/embed.js';
 export { UIBlock } from './block/block.js';
 export { UIText } from './text/text.js';

package/components/input/input.css

@@ -2,49 +2,49 @@
    inside `@scope` don't match the scope root. Plain selectors outside work.
    See docs/BROWSER-COMPAT.md §3a. */
 input-ui[variant="ghost"]:hover {
-  --input-bg: var(--a-bg-muted);
+  --input-bg-default: var(--a-bg-muted);
 }
 input-ui:not([disabled]) [slot="field"]:hover {
-  background: var(--input-bg-hover);
-  border-color: var(--input-border-hover);
-  color: var(--input-fg-hover);
+  background: var(--input-bg-hover, var(--input-bg-hover-default));
+  border-color: var(--input-border-hover, var(--input-border-hover-default));
+  color: var(--input-fg-hover, var(--input-fg-hover-default));
 }
 input-ui:not([disabled]) [slot="field"]:hover [slot="prefix"],
 input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
-  color: var(--input-affix-fg-hover);
+  color: var(--input-affix-fg-hover, var(--input-affix-fg-hover-default));
 }
 
 @scope (input-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
-    --input-bg:              var(--a-ui-bg);
-    --input-fg:              var(--a-ui-text);
-    --input-border:          var(--a-ui-border);
-    --input-border-hover:    var(--a-ui-border-hover);
-    --input-focus-ring:      var(--a-focus-ring);
-    --input-focus-ring-invalid: var(--a-focus-ring-invalid);
-    --input-radius:          var(--a-radius);
-    --input-height:          var(--a-size);
-    --input-px:              var(--a-ui-px);
-    --input-font-size:       var(--a-ui-size);
-    --input-placeholder-fg:  var(--a-ui-text-placeholder);
-    --input-affix-fg:        var(--a-ui-text-placeholder);
-    --input-field-gap:       var(--a-space-1);
-    --input-label-min-width: 8ch;
+    --input-bg-default:              var(--a-ui-bg);
+    --input-fg-default:              var(--a-ui-text);
+    --input-border-default:          var(--a-ui-border);
+    --input-border-hover-default:    var(--a-ui-border-hover);
+    --input-focus-ring-default:      var(--a-focus-ring);
+    --input-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --input-radius-default:          var(--a-radius);
+    --input-height-default:          var(--a-size);
+    --input-px-default:              var(--a-ui-px);
+    --input-font-size-default:       var(--a-ui-size);
+    --input-placeholder-fg-default:  var(--a-ui-text-placeholder);
+    --input-affix-fg-default:        var(--a-ui-text-placeholder);
+    --input-field-gap-default:       var(--a-space-1);
+    --input-label-min-width-default: 8ch;
 
     /* ── Transitions ── */
-    --input-duration:        var(--a-duration-fast);
-    --input-easing:          var(--a-easing);
+    --input-duration-default:        var(--a-duration-fast);
+    --input-easing-default:          var(--a-easing);
 
     /* ── State: hover/focus ── */
-    --input-bg-hover:        var(--a-ui-bg-hover);
-    --input-fg-hover:        var(--a-ui-text-hover);
-    --input-affix-fg-hover:  var(--a-ui-text-subtle);
-    --input-fg-focus:        var(--a-ui-text-active);
+    --input-bg-hover-default:        var(--a-ui-bg-hover);
+    --input-fg-hover-default:        var(--a-ui-text-hover);
+    --input-affix-fg-hover-default:  var(--a-ui-text-subtle);
+    --input-fg-focus-default:        var(--a-ui-text-active);
 
     /* ── State: disabled ── */
-    --input-bg-disabled:     var(--a-ui-bg-disabled);
-    --input-fg-disabled:     var(--a-ui-text-disabled);
+    --input-bg-disabled-default:     var(--a-ui-bg-disabled);
+    --input-fg-disabled-default:     var(--a-ui-text-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -65,9 +65,9 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      label wider than the floor grows past it. */
   [slot="label"] {
     flex-shrink: 0;
-    min-width: var(--input-label-min-width);
-    color: var(--input-affix-fg);
-    font-size: var(--input-font-size);
+    min-width: var(--input-label-min-width, var(--input-label-min-width-default));
+    color: var(--input-affix-fg, var(--input-affix-fg-default));
+    font-size: var(--input-font-size, var(--input-font-size-default));
     user-select: none;
     pointer-events: none;
   }
@@ -76,15 +76,15 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   [slot="field"] {
     display: flex;
     align-items: center;
-    gap: var(--input-field-gap);
-    min-height: var(--input-height);
-    padding: 0 var(--input-px);
-    border: 1px solid var(--input-border);
-    border-radius: var(--input-radius);
-    background: var(--input-bg);
-    color: var(--input-fg);
+    gap: var(--input-field-gap, var(--input-field-gap-default));
+    min-height: var(--input-height, var(--input-height-default));
+    padding: 0 var(--input-px, var(--input-px-default));
+    border: 1px solid var(--input-border, var(--input-border-default));
+    border-radius: var(--input-radius, var(--input-radius-default));
+    background: var(--input-bg, var(--input-bg-default));
+    color: var(--input-fg, var(--input-fg-default));
     font: inherit;
-    font-size: var(--input-font-size);
+    font-size: var(--input-font-size, var(--input-font-size-default));
     /* line-height: 1.4 (not 1) so descender-bearing glyphs (g, j, p, q, y)
        have room inside [slot="text"]'s line box. With line-height: 1 the
        line box equals the em-square and descenders extend below it; the
@@ -96,22 +96,22 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     /* Cover every property the hover / focus / invalid states change so
        the field doesn't half-snap (border slides, but bg/colour/ring snap). */
     transition:
-      background  var(--input-duration) var(--input-easing),
-      border-color var(--input-duration) var(--input-easing),
-      color       var(--input-duration) var(--input-easing),
-      box-shadow  var(--input-duration) var(--input-easing);
+      background  var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
+      border-color var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
+      color       var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
+      box-shadow  var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default));
   }
   /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]):focus-within [slot="field"] {
     /* Canonical ring — consumes the L3 --input-focus-ring token
        which aliases --a-focus-ring. Border stays stable; the ring
        is the focus affordance (WCAG 2.2 SC 2.4.11/2.4.13). */
-    box-shadow: var(--input-focus-ring);
-    color: var(--input-fg-focus);
+    box-shadow: var(--input-focus-ring, var(--input-focus-ring-default));
+    color: var(--input-fg-focus, var(--input-fg-focus-default));
   }
   :scope[aria-invalid="true"]:not([disabled]):focus-within [slot="field"],
   :scope[error]:not([disabled]):focus-within [slot="field"] {
-    box-shadow: var(--input-focus-ring-invalid);
+    box-shadow: var(--input-focus-ring-invalid, var(--input-focus-ring-invalid-default));
   }
 
   /* Text (contenteditable span) */
@@ -135,13 +135,13 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   }
 
   input[slot="text"]::placeholder {
-    color: var(--input-placeholder-fg);
+    color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
   }
 
   /* Placeholder (contenteditable only) */
   span[slot="text"][data-empty]::before {
     content: attr(data-placeholder);
-    color: var(--input-placeholder-fg);
+    color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
     pointer-events: none;
   }
 
@@ -157,7 +157,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     font-weight: var(--a-weight-medium, 500);
     /* Reserve space for the absolutely-positioned controls column so the
        value never collides with the stepper buttons. */
-    padding-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    padding-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
   }
 
   /* Suffix sits flush after the value in number mode (no auto margin so
@@ -168,7 +168,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
        suffix never collides with the stepper buttons. The padding moves
        from `[slot="text"]` to `[slot="suffix"]` when a suffix is present
        — only one element needs the reservation since they're adjacent. */
-    margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    margin-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
   }
   [data-number]:has([slot="suffix"]) [slot="text"] {
     padding-inline-end: 0;
@@ -184,8 +184,8 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     inset-inline-end: 0;
     display: grid;
     grid-template-rows: 1fr 1fr;
-    border-inline-start: 1px solid var(--input-border);
-    width: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    border-inline-start: 1px solid var(--input-border, var(--input-border-default));
+    width: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
     user-select: none;
     overflow: hidden;
   }
@@ -201,7 +201,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     --button-height: 0;
     --button-radius: 0;
     --button-bg: transparent;
-    --button-fg: var(--input-affix-fg);
+    --button-fg: var(--input-affix-fg, var(--input-affix-fg-default));
     --button-px: 0;
     min-width: 0;
     min-height: 0;
@@ -217,7 +217,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      any value inherited from its parent button-ui. Tying it to
      --input-height keeps the chevron proportional across sm/md/lg. */
   [data-number] [slot="controls"] icon-ui {
-    --icon-size: calc(var(--input-height) * 0.4);
+    --icon-size: calc(var(--input-height, var(--input-height-default)) * 0.4);
   }
   [data-number] [slot="controls"] button-ui:hover {
     --button-bg: var(--a-ui-bg-hover);
@@ -234,11 +234,11 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      inline-start border on the column + the bottom-border on the upper
      button. */
   [data-number] [slot="controls"] button-ui:first-child {
-    border-bottom: 1px solid var(--input-border);
-    border-start-end-radius: calc(var(--input-radius) - 1px);
+    border-bottom: 1px solid var(--input-border, var(--input-border-default));
+    border-start-end-radius: calc(var(--input-radius, var(--input-radius-default)) - 1px);
   }
   [data-number] [slot="controls"] button-ui:last-child {
-    border-end-end-radius: calc(var(--input-radius) - 1px);
+    border-end-end-radius: calc(var(--input-radius, var(--input-radius-default)) - 1px);
   }
 
   /* Raw mode strips the chrome — also strip the controls column's
@@ -265,8 +265,8 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--input-affix-fg);
-    font-size: var(--input-font-size);
+    color: var(--input-affix-fg, var(--input-affix-fg-default));
+    font-size: var(--input-font-size, var(--input-font-size-default));
     line-height: 1;
     user-select: none;
     pointer-events: none;
@@ -312,10 +312,10 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      instead so the button visually matches the input's intrinsic size. */
   [slot="field"] > [slot="leading"] button-ui,
   [slot="field"] > [slot="trailing"] button-ui {
-    --button-height: calc(var(--input-height) - 4px);
+    --button-height: calc(var(--input-height, var(--input-height-default)) - 4px);
     --button-bg: transparent;
     --button-border: transparent;
-    --button-fg: var(--input-affix-fg);
+    --button-fg: var(--input-affix-fg, var(--input-affix-fg-default));
     --button-px: var(--a-space-1);
   }
 
@@ -330,13 +330,13 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      absolutely positioned at inset-inline-end: 0; trailing sits in the
      flex flow.) Same pattern as [slot="suffix"] in number mode. */
   [data-number]:has(> [slot="trailing"]) > [slot="trailing"] {
-    margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    margin-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
   }
 
   /* Disabled */
   :scope[disabled] [slot="field"] {
-    background: var(--input-bg-disabled);
-    color: var(--input-fg-disabled);
+    background: var(--input-bg-disabled, var(--input-bg-disabled-default));
+    color: var(--input-fg-disabled, var(--input-fg-disabled-default));
     cursor: not-allowed;
   }
 
@@ -353,9 +353,9 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
 
   /* Ghost variant */
   :scope[variant="ghost"] {
-    --input-bg: transparent;
-    --input-border: transparent;
-    --input-border-hover: transparent;
+    --input-bg-default: transparent;
+    --input-border-default: transparent;
+    --input-border-hover-default: transparent;
   }
   /* :scope[variant="ghost"]:hover moved outside @scope — see Safari
      17.x bug note at top of file. */

package/components/inspector/inspector.css

@@ -1,16 +1,16 @@
 @scope (inspector-ui) {
   :where(:scope) {
-    --inspector-pane-font-size: var(--a-ui-tiny);
-    --inspector-border:         1px solid var(--a-border-subtle);
-    --inspector-radius:         var(--a-radius);
+    --inspector-pane-font-size-default: var(--a-ui-tiny);
+    --inspector-border-default:         1px solid var(--a-border-subtle);
+    --inspector-radius-default:         var(--a-radius);
   }
 
   :scope {
     display:        flex;
     flex-direction: column;
     overflow:       hidden;
-    border:         var(--inspector-border);
-    border-radius:  var(--inspector-radius);
+    border:         var(--inspector-border, var(--inspector-border-default));
+    border-radius:  var(--inspector-radius, var(--inspector-radius-default));
     min-width:      0;
   }
 
@@ -26,6 +26,6 @@
   :scope tab-ui > code-ui {
     display: block;
     overflow: auto;
-    font-size: var(--inspector-pane-font-size);
+    font-size: var(--inspector-pane-font-size, var(--inspector-pane-font-size-default));
   }
 }