@adia-ai/web-components 0.6.33 → 0.6.35

package/components/select/select.css

@@ -1,47 +1,47 @@
 @scope (select-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --select-gap:               var(--a-space-2);
-    --select-trigger-gap:       var(--a-space-1);
-    --select-height:            var(--a-size);
-    --select-px:                var(--a-ui-px);
-    --select-radius:            var(--a-radius);
-    --select-leading-radius:    var(--a-radius-full);
+    --select-gap-default:               var(--a-space-2);
+    --select-trigger-gap-default:       var(--a-space-1);
+    --select-height-default:            var(--a-size);
+    --select-px-default:                var(--a-ui-px);
+    --select-radius-default:            var(--a-radius);
+    --select-leading-radius-default:    var(--a-radius-full);
 
     /* ── Typography ── */
-    --select-font-size:         var(--a-ui-size);
-    --select-label-size:        var(--a-label-size);
+    --select-font-size-default:         var(--a-ui-size);
+    --select-label-size-default:        var(--a-label-size);
 
     /* ── Colors ── */
-    --select-bg:                var(--a-ui-bg);
-    --select-bg-selected:       var(--a-ui-bg-selected);
-    --select-bg-hover:          var(--a-ui-bg-hover);
-    --select-border:            var(--a-ui-border);
-    --select-border-hover:      var(--a-ui-border-hover);
-    --select-focus-ring:        var(--a-focus-ring);
-    --select-focus-ring-invalid: var(--a-focus-ring-invalid);
-    --select-label-fg:          var(--a-ui-text-muted);
-    --select-placeholder-fg:    var(--a-ui-text-placeholder);
-    --select-caret-fg:          var(--a-ui-text-muted);
-    --select-fg:                var(--a-ui-text);
-    --select-fg-hover:          var(--a-ui-text-hover);
-    --select-fg-selected:       var(--a-ui-text-selected);
-    --select-fg-subtle:         var(--a-ui-text-subtle);
-    --select-fg-muted:          var(--a-ui-text-muted);
-    --select-fg-disabled:       var(--a-ui-text-disabled);
-    --select-ghost-bg-hover:    var(--a-bg-muted);
+    --select-bg-default:                var(--a-ui-bg);
+    --select-bg-selected-default:       var(--a-ui-bg-selected);
+    --select-bg-hover-default:          var(--a-ui-bg-hover);
+    --select-border-default:            var(--a-ui-border);
+    --select-border-hover-default:      var(--a-ui-border-hover);
+    --select-focus-ring-default:        var(--a-focus-ring);
+    --select-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --select-label-fg-default:          var(--a-ui-text-muted);
+    --select-placeholder-fg-default:    var(--a-ui-text-placeholder);
+    --select-caret-fg-default:          var(--a-ui-text-muted);
+    --select-fg-default:                var(--a-ui-text);
+    --select-fg-hover-default:          var(--a-ui-text-hover);
+    --select-fg-selected-default:       var(--a-ui-text-selected);
+    --select-fg-subtle-default:         var(--a-ui-text-subtle);
+    --select-fg-muted-default:          var(--a-ui-text-muted);
+    --select-fg-disabled-default:       var(--a-ui-text-disabled);
+    --select-ghost-bg-hover-default:    var(--a-bg-muted);
 
     /* ── Transition ── */
-    --select-duration:          var(--a-duration-fast);
-    --select-easing:            var(--a-easing);
+    --select-duration-default:          var(--a-duration-fast);
+    --select-easing-default:            var(--a-easing);
 
     /* ── Listbox ── */
-    --select-option-px:         var(--a-ui-px);
-    --select-option-py:         var(--a-ui-py);
-    --select-option-bg-hover:   var(--a-bg-hover);
-    --select-option-fg-active:  var(--a-ui-text-active);
-    --select-option-fg-disabled: var(--a-ui-text-disabled);
-    --select-group-label-size:  var(--a-ui-size);
+    --select-option-px-default:         var(--a-ui-px);
+    --select-option-py-default:         var(--a-ui-py);
+    --select-option-bg-hover-default:   var(--a-bg-hover);
+    --select-option-fg-active-default:  var(--a-ui-text-active);
+    --select-option-fg-disabled-default: var(--a-ui-text-disabled);
+    --select-group-label-size-default:  var(--a-ui-size);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -51,9 +51,9 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--select-gap);
+    gap: var(--select-gap, var(--select-gap-default));
     min-width: 0;
-    font-size: var(--select-font-size);
+    font-size: var(--select-font-size, var(--select-font-size-default));
   }
 
   :scope[data-direction="row"] {
@@ -61,13 +61,13 @@
     grid-template-columns: 1fr 1fr;
     align-items: center;
   }
-  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled); }
+  :scope[disabled] { pointer-events: none; color: var(--select-fg-disabled, var(--select-fg-disabled-default)); }
 
   /* Label */
   :scope::before {
     content: attr(label);
-    font-size: var(--select-label-size);
-    color: var(--select-label-fg);
+    font-size: var(--select-label-size, var(--select-label-size-default));
+    color: var(--select-label-fg, var(--select-label-fg-default));
   }
   :scope:not([label])::before,
   :scope[label=""]::before { display: none; }
@@ -77,42 +77,42 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--select-trigger-gap);
+    gap: var(--select-trigger-gap, var(--select-trigger-gap-default));
     min-width: 0;
-    min-height: var(--select-height);
-    padding: 0 var(--select-px);
-    border: 1px solid var(--select-border);
-    border-radius: var(--select-radius);
-    background: var(--select-bg);
+    min-height: var(--select-height, var(--select-height-default));
+    padding: 0 var(--select-px, var(--select-px-default));
+    border: 1px solid var(--select-border, var(--select-border-default));
+    border-radius: var(--select-radius, var(--select-radius-default));
+    background: var(--select-bg, var(--select-bg-default));
     line-height: 1;
     cursor: pointer;
     /* Match every property the hover / focus / invalid states change. */
     transition:
-      background   var(--select-duration) var(--select-easing),
-      border-color var(--select-duration) var(--select-easing),
-      color        var(--select-duration) var(--select-easing),
-      box-shadow   var(--select-duration) var(--select-easing);
+      background   var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default)),
+      border-color var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default)),
+      color        var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default)),
+      box-shadow   var(--select-duration, var(--select-duration-default)) var(--select-easing, var(--select-easing-default));
   }
   [slot="trigger"]:hover {
-    border-color: var(--select-border-hover);
-    background: var(--select-bg-hover);
-    color: var(--select-fg);
+    border-color: var(--select-border-hover, var(--select-border-hover-default));
+    background: var(--select-bg-hover, var(--select-bg-hover-default));
+    color: var(--select-fg, var(--select-fg-default));
   }
   [slot="trigger"]:hover [slot="caret"] {
-    color: var(--select-fg-subtle);
+    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
-    box-shadow: var(--select-focus-ring);
-    color: var(--select-fg);
+    box-shadow: var(--select-focus-ring, var(--select-focus-ring-default));
+    color: var(--select-fg, var(--select-fg-default));
   }
   :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
   :scope[error]:focus-visible [slot="trigger"] {
-    box-shadow: var(--select-focus-ring-invalid);
+    box-shadow: var(--select-focus-ring-invalid, var(--select-focus-ring-invalid-default));
   }
   :scope:focus-visible::before {
-    color: var(--select-fg-subtle);
+    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   }
 
   /* Leading icon / avatar — inline-flex centers icon content vertically
@@ -122,14 +122,14 @@
     align-items: center;
     flex-shrink: 0;
     line-height: 1;
-    --a-icon-size: var(--select-font-size);
-    color: var(--select-fg-muted);
+    --a-icon-size: var(--select-font-size, var(--select-font-size-default));
+    color: var(--select-fg-muted, var(--select-fg-muted-default));
   }
 
   img[slot="leading"] {
-    width: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
-    height: var(--select-leading-size, calc(var(--select-height) - var(--select-gap)));
-    border-radius: var(--select-leading-radius);
+    width: var(--select-leading-size, calc(var(--select-height, var(--select-height-default)) - var(--select-gap, var(--select-gap-default))));
+    height: var(--select-leading-size, calc(var(--select-height, var(--select-height-default)) - var(--select-gap, var(--select-gap-default))));
+    border-radius: var(--select-leading-radius, var(--select-leading-radius-default));
     object-fit: cover;
   }
 
@@ -138,7 +138,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--select-fg);
+    color: var(--select-fg, var(--select-fg-default));
   }
   input[slot="display"] {
     border: none;
@@ -147,23 +147,23 @@
     padding: 0;
     margin: 0;
     font: inherit;
-    color: var(--select-fg);
+    color: var(--select-fg, var(--select-fg-default));
     min-width: 0;
     width: 100%;
   }
   input[slot="display"]::placeholder {
-    color: var(--select-placeholder-fg);
+    color: var(--select-placeholder-fg, var(--select-placeholder-fg-default));
   }
   :scope:not([value]) [slot="display"],
   :scope[value=""] [slot="display"] {
-    color: var(--select-placeholder-fg);
+    color: var(--select-placeholder-fg, var(--select-placeholder-fg-default));
   }
 
   /* Caret color is held against button-ui's stronger cascade by chaining
      :scope > [slot="trigger"] > [slot="caret"] — matches at the same
      specificity as button-ui's own slot rules without !important. */
   :scope > [slot="trigger"] > [slot="caret"] {
-    color: var(--select-caret-fg);
+    color: var(--select-caret-fg, var(--select-caret-fg-default));
     flex-shrink: 0;
   }
 
@@ -171,16 +171,84 @@
 
   /* Ghost variant */
   :scope[variant="ghost"] {
-    --select-bg: transparent;
-    --select-border: transparent;
-    --select-border-hover: transparent;
+    --select-bg-default: transparent;
+    --select-border-default: transparent;
+    --select-border-hover-default: transparent;
   }
   :scope[variant="ghost"] [slot="trigger"]:hover {
-    background: var(--select-ghost-bg-hover);
-    color: var(--select-fg);
+    background: var(--select-ghost-bg-hover, var(--select-ghost-bg-hover-default));
+    color: var(--select-fg, var(--select-fg-default));
   }
   :scope[variant="ghost"] > [slot="trigger"]:hover > [slot="caret"] {
-    color: var(--select-fg-subtle);
+    color: var(--select-fg-subtle, var(--select-fg-subtle-default));
+  }
+
+  /* ── SPEC-040 — Multi-select chip trigger ──
+     [data-multi-chips] is set on the host by render() when [multiple] is
+     active. Layout switches from inline-text trigger to wrap-flex chip row.
+     Tag-ui chips inside [data-chips] inherit the host's tag-ui token set;
+     the +more pill is a CSS-only button styled to match. */
+  :scope[data-multi-chips] > [slot="trigger"] {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--a-space-1);
+    /* min-height tracks single-row height when empty; flex-wrap allows
+       it to grow as chips overflow. */
+    padding-block: calc(var(--select-py, var(--a-space-1)));
+  }
+  :scope[data-multi-chips] [data-chips] {
+    display: contents; /* let chips participate in the trigger's flex line */
+  }
+  :scope[data-multi-chips] [data-chips] tag-ui {
+    /* Chip styling tracks the active variant via tag-ui's own tokens. */
+    --tag-size-default: var(--a-ui-tiny);
+  }
+  :scope[data-multi-chips] [data-chips] [data-more] {
+    appearance: none;
+    border: 1px solid var(--select-border, var(--select-border-default));
+    background: var(--select-bg-hover, var(--select-bg-hover-default));
+    color: var(--select-fg-muted, var(--select-fg-muted-default));
+    border-radius: var(--a-radius-full);
+    padding: 0 var(--a-space-2);
+    font: inherit;
+    font-size: var(--a-ui-tiny);
+    line-height: calc(var(--a-size) - var(--a-space-3));
+    cursor: pointer;
+  }
+  :scope[data-multi-chips] [data-chips] [data-more]:hover {
+    background: var(--a-bg-hover);
+  }
+
+  /* Clear-all `x` affordance. Visible only when [clearable] AND chips. */
+  :scope[data-multi-chips] [data-clear-all] {
+    appearance: none;
+    background: transparent;
+    border: none;
+    padding: var(--a-space-0);
+    margin-inline-start: var(--a-space-1);
+    color: var(--select-fg-muted, var(--select-fg-muted-default));
+    cursor: pointer;
+    border-radius: var(--a-radius-full);
+    --a-icon-size: var(--a-ui-sm);
+    display: inline-flex;
+    align-items: center;
+  }
+  :scope[data-multi-chips] [data-clear-all][hidden] { display: none; }
+  :scope[data-multi-chips] [data-clear-all]:hover {
+    color: var(--select-fg, var(--select-fg-default));
+    background: var(--a-bg-hover);
+  }
+
+  /* In multi-select with chips present, the trigger display element is
+     the rest-of-row slot — make it flex-grow but not push chips off. */
+  :scope[data-multi-chips] [slot="display"] {
+    flex: 1;
+    min-width: 4ch;
+  }
+  /* Hide the display when empty in multi-mode (chips fill the slot). */
+  :scope[data-multi-chips] [slot="display"]:empty {
+    flex: 0 0 0;
+    padding: 0;
   }
 }
 
@@ -197,7 +265,7 @@ select-ui [slot="listbox"] {
   overflow-y: auto;
   font-family: inherit;
   font-size: var(--a-ui-size);
-  color: var(--select-fg);
+  color: var(--select-fg, var(--select-fg-default));
 
   /* Positioned by JS (#positionListbox) — fixed to viewport */
   width: max-content;
@@ -225,7 +293,7 @@ select-ui [role="option"] {
   padding: var(--a-space-1) var(--a-ui-px);
   border-radius: var(--a-radius-sm);
   white-space: nowrap;
-  color: var(--select-fg-subtle);
+  color: var(--select-fg-subtle, var(--select-fg-subtle-default));
   cursor: pointer;
   transition:
     background var(--a-duration-fast) var(--a-easing),
@@ -233,16 +301,16 @@ select-ui [role="option"] {
 }
 select-ui [role="option"]:hover,
 select-ui [role="option"][data-focused] {
-  background: var(--select-option-bg-hover);
-  color: var(--select-fg-hover);
+  background: var(--select-option-bg-hover, var(--select-option-bg-hover-default));
+  color: var(--select-fg-hover, var(--select-fg-hover-default));
 }
 select-ui [role="option"][aria-selected="true"] {
-  color: var(--select-fg-selected);
-  background: var(--select-bg-selected);
+  color: var(--select-fg-selected, var(--select-fg-selected-default));
+  background: var(--select-bg-selected, var(--select-bg-selected-default));
   font-weight: var(--a-ui-weight);
 }
 select-ui [role="option"][aria-disabled="true"] {
-  color: var(--select-option-fg-disabled);
+  color: var(--select-option-fg-disabled, var(--select-option-fg-disabled-default));
   cursor: not-allowed;
 }
 select-ui [role="option"][aria-disabled="true"]:hover {
@@ -252,7 +320,7 @@ select-ui [role="option"][aria-disabled="true"]:hover {
 /* Option with icon */
 select-ui [role="option"] icon-ui {
   --a-icon-size: var(--a-ui-size);
-  color: var(--select-fg-muted);
+  color: var(--select-fg-muted, var(--select-fg-muted-default));
   margin-inline-end: var(--a-space-1);
   vertical-align: -0.125em;
 }
@@ -284,21 +352,21 @@ select-ui [data-menu-header] img {
 select-ui [data-menu-header] strong {
   display: block;
   font-weight: var(--a-weight-medium);
-  color: var(--select-fg);
+  color: var(--select-fg, var(--select-fg-default));
   font-size: var(--a-ui-size);
 }
 
 select-ui [data-menu-header] span {
   display: block;
   font-size: var(--a-ui-sm);
-  color: var(--select-fg-muted);
+  color: var(--select-fg-muted, var(--select-fg-muted-default));
 }
 
 select-ui [role="group"] [slot="group-label"] {
   padding: var(--a-space-1) var(--a-ui-px);
   font-size: var(--a-ui-tiny);
   font-weight: var(--a-ui-weight);
-  color: var(--select-fg-muted);
+  color: var(--select-fg-muted, var(--select-fg-muted-default));
   text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;
@@ -317,6 +385,96 @@ select-ui > [slot="hint"] {
   display: block;
   margin-top: var(--select-hint-mt, var(--a-space-1));
   font-size: var(--select-hint-size, var(--a-ui-xs));
-  color: var(--select-hint-fg, var(--select-fg-muted));
+  color: var(--select-hint-fg, var(--select-fg-muted, var(--select-fg-muted-default)));
   line-height: var(--select-hint-lh, 1.4);
 }
+
+/* ── SPEC-040 — Multi-select popover affordances ──
+   Top-layer: popover lives outside @scope so reference --a-* directly. */
+
+/* Select-all / Clear control row above the option list. */
+select-ui [slot="listbox"] [data-select-all] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--a-space-1);
+  border-bottom: 1px solid var(--a-border-subtle);
+  margin-bottom: var(--a-space-1);
+}
+select-ui [slot="listbox"] [data-select-all-btn] {
+  appearance: none;
+  background: transparent;
+  border: none;
+  font: inherit;
+  font-size: var(--a-ui-xs);
+  color: var(--a-accent);
+  cursor: pointer;
+  padding: var(--a-space-1) var(--a-space-2);
+  border-radius: var(--a-radius-sm);
+}
+select-ui [slot="listbox"] [data-select-all-btn]:hover {
+  background: var(--a-bg-hover);
+}
+
+/* Multi-select option rows — leading checkbox indicator + label.
+   The check icon is hidden by default and revealed at aria-selected. */
+select-ui [role="option"][data-multi-option] {
+  display: flex;
+  align-items: center;
+  gap: var(--a-space-2);
+}
+select-ui [role="option"][data-multi-option] [data-checkbox] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--a-ui-border);
+  border-radius: var(--a-radius-sm);
+  background: var(--a-canvas-bright);
+  margin-inline-end: 0; /* row gap already provides spacing */
+  transition:
+    background var(--a-duration-fast) var(--a-easing),
+    border-color var(--a-duration-fast) var(--a-easing);
+}
+/* Hide the check icon when unselected — overrides the option-row icon-ui
+   rule above. */
+select-ui [role="option"][data-multi-option] [data-checkbox] icon-ui {
+  --a-icon-size: 0.75rem;
+  color: transparent;
+  margin: 0;
+  vertical-align: 0;
+  transition: color var(--a-duration-fast) var(--a-easing);
+}
+select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] {
+  background: var(--a-accent);
+  border-color: var(--a-accent);
+}
+select-ui [role="option"][data-multi-option][aria-selected="true"] [data-checkbox] icon-ui {
+  color: var(--a-chrome-light);
+}
+select-ui [role="option"][data-multi-option] [data-option-label] {
+  flex: 1;
+  min-width: 0;
+}
+/* Multi-option selected state — override the single-select "bold +
+   accent bg" treatment so the row stays light + the checkbox carries
+   the selected signal. */
+select-ui [role="option"][data-multi-option][aria-selected="true"] {
+  background: transparent;
+  font-weight: inherit;
+  color: var(--select-fg, var(--select-fg-default));
+}
+select-ui [role="option"][data-multi-option][aria-selected="true"]:hover,
+select-ui [role="option"][data-multi-option][aria-selected="true"][data-focused] {
+  background: var(--select-option-bg-hover, var(--select-option-bg-hover-default));
+}
+
+/* Empty state when there are no options. */
+select-ui [slot="listbox"] [data-empty] {
+  padding: var(--a-space-3) var(--a-ui-px);
+  color: var(--a-fg-muted);
+  text-align: center;
+  font-size: var(--a-ui-xs);
+}

package/components/select/select.d.ts

@@ -17,7 +17,12 @@ export interface SelectOption {
 }
 
 export interface SelectChangeEventDetail<V extends string = string> {
-  value: V;
+  /** Single-select: the new value. Multi-select: array of selected ids. */
+  value: V | V[];
+  /** Multi-select only: ids added in this change. */
+  added?: V[];
+  /** Multi-select only: ids removed in this change. */
+  removed?: V[];
 }
 export type SelectChangeEvent<V extends string = string> = CustomEvent<SelectChangeEventDetail<V>>;
 
@@ -26,6 +31,13 @@ export interface SelectActionEventDetail {
 }
 export type SelectActionEvent = CustomEvent<SelectActionEventDetail>;
 
+/** SPEC-040 — fired when [multiple] toggle suppressed by min/max constraints. */
+export interface SelectInvalidEventDetail {
+  value: string[];
+  reason: 'min' | 'max';
+}
+export type SelectInvalidEvent = CustomEvent<SelectInvalidEventDetail>;
+
 export class UISelect extends UIFormElement {
   placeholder: string;
   /** Open/closed reflected attribute — toggled by trigger click / keyboard. */
@@ -40,6 +52,16 @@ export class UISelect extends UIFormElement {
   /** Allow values not in the option list (combobox mode). */
   freeText: boolean;
   divider: boolean;
+  /** SPEC-040 — cap visible chips in multi-select trigger. 0 = unlimited. */
+  maxChips: number;
+  /** SPEC-040 — minimum required selections in multi-select mode. */
+  min: number;
+  /** SPEC-040 — maximum allowed selections in multi-select mode. 0 = unlimited. */
+  max: number;
+  /** SPEC-040 — render Select-all / Clear control above the option list. */
+  selectAll: boolean;
+  /** SPEC-040 — render a clear-all `x` affordance in the trigger. */
+  clearable: boolean;
   /** §207 (v0.5.7): hint text below the field, wired to aria-describedby. */
   hint: string;
   /**
@@ -63,6 +85,13 @@ export class UISelect extends UIFormElement {
    */
   options: readonly SelectOption[];
 
+  /** SPEC-040 — toggle one option's selection in multi-select mode. */
+  toggle(id: string): void;
+  /** SPEC-040 — select every non-disabled option in multi-select mode. */
+  selectAllOptions(): void;
+  /** SPEC-040 — clear all selections. */
+  clear(): void;
+
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UISelect, ev: HTMLElementEventMap[K]) => unknown,
@@ -70,4 +99,5 @@ export class UISelect extends UIFormElement {
   ): void;
   addEventListener(type: 'change', listener: (ev: SelectChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'action', listener: (ev: SelectActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'invalid', listener: (ev: SelectInvalidEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/select/select.js

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