@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.106

package/dist/styles/components/forms/select/select.css

@@ -1,115 +1,203 @@
-.kui-select::part(combobox) {
-  min-height: 2.75rem;
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  gap: 0;
+/* The Select: a form label above a 44px rounded control whose trigger shows
+   the chosen value and a disclosure caret, with an optional hint below, and a
+   listbox that opens in the top layer. The listbox shares the PopupMenu's
+   surface, row geometry, check column, current-row fill, group titles, scroll
+   cue, and caret motion through the popup-choice contract in foundation.css. */
+
+.kui-select {
+  --_kui-select-motion: 75ms;
+  --_kui-select-height: 2.75rem;
+
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
 }
-.kui-select--label-hidden::part(form-control-label) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
+.kui-select[data-size="compact"] {
+  --_kui-select-height: 2rem;
+}
+
+/* The form label: a ListHeader-style label, inset by the field's border and
+   inline padding so it lines up with the value inside the field. */
+.kui-select__label {
+  display: block;
+  margin-block-end: 0.375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+  cursor: default;
+}
+
+/* The closed control. */
+.kui-select__trigger {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+  min-width: 0;
+  min-height: var(--_kui-select-height);
+  align-items: center;
+  justify-content: start;
+  margin: 0;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
   overflow: hidden;
-  clip-path: inset(50%);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  outline: 3px solid transparent;
+  outline-offset: 1px;
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  font: inherit;
+  font-weight: normal;
+  line-height: 1.2;
+  text-align: start;
   white-space: nowrap;
-  border: 0;
+  cursor: pointer;
+  transform: none;
+  transition:
+    background-color var(--_kui-select-motion) ease,
+    border-color var(--_kui-select-motion) ease,
+    outline-color var(--_kui-select-motion) ease;
+}
+.kui-select__trigger:focus {
+  outline-color: transparent;
 }
-.kui-select::part(display-input) {
+/* Focus shows on the control (pointer or keyboard), but not while its
+   listbox is open: the listbox shows where focus is then. */
+.kui-select:not([open]):focus-within > .kui-select__trigger {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-select__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* The value: the chosen label (or summary), ellipsized; a placeholder when
+   nothing is chosen. */
+/* Like a text field, the value takes a 20-character box (175px at the 16px
+   baseline) by default, growing with the control and ellipsizing within it. */
+.kui-select__value {
+  width: 10.9375em;
   min-width: 0;
   max-width: var(--kui-select-label-max-width, none);
+  flex: 1 1 auto;
   overflow: hidden;
-  padding: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* A multiple Select summarizes its choices in the display text (installed by
-   select/register) instead of drawing a removable tag per choice. */
-.kui-select[multiple]::part(tags) {
-  display: none;
+.kui-select__value[data-placeholder] {
+  color: var(--kui-color-text-quiet);
 }
-.kui-select[data-size="compact"]::part(combobox) {
-  min-height: 2rem;
+
+.kui-select__icon {
+  display: inline-flex;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+  flex: none;
+}
+.kui-select__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.kui-select__trigger > .kui-select__icon {
+  margin-inline-end: 0.5rem;
+  color: var(--kui-color-neutral-on-quiet);
+}
+
+/* The disclosure caret: a 20px box at the form-field disclosure scale, turned
+   to face the open listbox. */
+.kui-select__caret {
+  display: flex;
+  width: 1.25em;
+  height: 1em;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--kui-color-neutral-on-quiet);
+  transform: scale(var(--kui-disclosure-icon-scale, 0.5));
+  rotate: 0deg;
+  transition: var(--_kui-popup-caret-transition);
 }
-.kui-select[data-presentation="toolbar-borderless"]::part(combobox) {
+.kui-select__caret svg {
+  width: 0.875em;
+  height: 1em;
+  flex: none;
+}
+.kui-select[open] .kui-select__caret {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+
+.kui-select__hint {
+  display: block;
+  margin-block-start: 0.4375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+  line-height: 1.6;
+}
+
+/* Presentations. */
+.kui-select[data-presentation="toolbar-borderless"] > .kui-select__trigger {
   border-color: transparent;
   background: transparent;
-  box-shadow: none;
-}
-.kui-select[data-presentation="navigation"] {
-  width: max-content;
-  max-width: 100%;
 }
-.kui-select[data-presentation="title"] {
+.kui-select:is(
+  [data-presentation="navigation"],
+  [data-presentation="title"],
+  [data-presentation="inline"]
+) {
   width: max-content;
   max-width: 100%;
 }
-.kui-select[data-presentation="title"]::part(combobox) {
+.kui-select[data-presentation="title"] > .kui-select__trigger {
   width: max-content;
   min-height: 2.25rem;
   padding-inline: 0;
   border-color: transparent;
   background: transparent;
-  box-shadow: none;
   font-size: var(--kui-font-l, 1.25rem);
   font-weight: 700;
 }
-.kui-select[data-presentation="title"]::part(display-input) {
-  field-sizing: content;
+.kui-select[data-presentation="title"] .kui-select__value {
+  width: auto;
   flex: 0 0 auto;
 }
-.kui-select[data-presentation="title"]::part(expand-icon) {
-  margin-inline-start: 0;
-}
 /* A Toolbar has an 8px inset; ListItem text starts at 17px after its own
    margin, border, and padding. The group contributes 3px, so the title
    Select advances 6px to share the list's text edge. */
 .kui-toolbar-control-group > .kui-select[data-presentation="title"] {
   margin-inline-start: 0.375rem;
 }
-.kui-select[data-presentation="inline"] {
-  width: max-content;
-  max-width: 100%;
-}
-.kui-select[data-presentation="inline"]::part(combobox) {
+.kui-select[data-presentation="inline"] > .kui-select__trigger {
   width: max-content;
   min-height: 0;
   padding: 0;
   border-width: 0;
   background: transparent;
 }
-.kui-select--custom-selected[data-presentation="inline"]::part(start) {
-  flex: 0 0 auto;
-}
-.kui-select--custom-selected[data-presentation="inline"]
-  .kui-select__custom-selected {
-  margin-inline-end: 0 !important;
-}
-.kui-select--custom-selected[data-presentation="inline"]
-  .kui-select__custom-selected-content {
-  display: flex;
-}
-.kui-select[data-focus-ring-owner="group"]:focus-within::part(combobox) {
+.kui-select[data-focus-ring-owner="group"] > .kui-select__trigger {
   outline: none;
-  box-shadow: none;
 }
+
 /* An icon-only trigger shows the selected icon and the disclosure caret as one
-   pill, the same control family as a toolbar popup-menu dropdown (an icon +
-   caret wa-button): symmetric 8px inline padding, 12px from the icon to the
-   caret's 20px box, the caret glyph size, and the control height, so the icon
-   sits left of center to balance the caret. Inside a ToolbarControlGroup the
-   trigger takes the control-slot height, overlap, and radius the group
-   provides (`--_kui-toolbar-control-group-slot-*`) so it is inset evenly on
-   every side, the group sizes to the trigger (wider than tall), and the
-   group-owned focus ring stays concentric with it. */
+   pill, the same control family as a toolbar PopupMenu trigger: symmetric 8px
+   inline padding, 12px from the icon to the caret's 20px box, the caret glyph
+   size, and the control height, so the icon sits left of center to balance
+   the caret. Inside a ToolbarControlGroup the trigger takes the control-slot
+   height, overlap, and radius the group provides
+   (`--_kui-toolbar-control-group-slot-*`) so it is inset evenly on every side,
+   the group sizes to the trigger (wider than tall), and the group-owned focus
+   ring stays concentric with it. */
 .kui-select[data-selected-presentation="icon-only"] {
-  --_kui-select-height: 2.75rem;
   width: max-content;
 }
-.kui-select[data-selected-presentation="icon-only"][data-size="compact"] {
-  --_kui-select-height: 2rem;
-}
-.kui-select[data-selected-presentation="icon-only"]::part(combobox) {
+.kui-select[data-selected-presentation="icon-only"] > .kui-select__trigger {
   min-height: var(
     --_kui-toolbar-control-group-slot-height,
     var(--_kui-select-height)
@@ -126,59 +214,94 @@
 .kui-select[data-selected-presentation="icon-only"]:only-child {
   margin-inline: calc(var(--_kui-toolbar-control-group-slot-overlap, 0px) * -1);
 }
-.kui-select[data-selected-presentation="icon-only"]:only-child::part(combobox) {
+.kui-select[data-selected-presentation="icon-only"]:only-child
+  > .kui-select__trigger {
   border-radius: var(
     --_kui-toolbar-control-group-slot-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
 }
+.kui-select[data-selected-presentation="icon-only"]
+  > .kui-select__trigger
+  > .kui-select__value {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.kui-select[data-selected-presentation="icon-only"]
+  > .kui-select__trigger
+  > :is(.kui-select__icon, .kui-select__custom-selected) {
+  margin-inline-end: 0;
+}
+.kui-select[data-selected-presentation="icon-only"]
+  > .kui-select__trigger
+  > .kui-select__caret {
+  width: 1.25em;
+  height: 1em;
+  margin-inline-start: 0.75rem;
+  transform: scale(0.875);
+}
+.kui-select[data-selected-presentation="icon-only"][data-caret="false"]
+  > .kui-select__trigger {
+  width: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
+  justify-content: center;
+}
 /* In a ToolbarControlGroup, a Select beside other controls highlights its own
-   pill on hover, like its button and dropdown siblings; a lone Select instead
+   pill on hover, like its button and menu siblings; a lone Select instead
    lifts the whole group (toolbar-control-group.css). */
 .kui-toolbar-control-group:not([data-single="true"])
-  > .kui-select:not(:only-child):hover::part(combobox) {
+  > .kui-select:not(:only-child)
+  > .kui-select__trigger:hover {
   border-color: var(--kui-toolbar-control-border);
   background: var(--kui-toolbar-control-hover-background);
 }
 /* With the group's per-control rings, a composed Select paints its own ring
    even when it was told the group owns it: nothing else would show focus. It
-   matches the sibling controls' ring and offset. While its listbox is open the
-   popup shows focus instead, so the trigger ring stays off, as a PopupMenu
-   trigger's does. */
+   matches the sibling controls' ring and offset. */
 .kui-toolbar-control-group[data-focus-ring="control"]
-  > .kui-select:not([open]):focus-within::part(combobox) {
+  > .kui-select:not([open]):focus-within
+  > .kui-select__trigger {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
-.kui-select[data-focus-ring-inset="true"][data-focus-ring-owner="select"]:focus-within:not(
+.kui-select[data-focus-ring-inset="true"][data-focus-ring-owner="select"]:not(
     [open]
-  )::part(combobox) {
+  ):focus-within
+  > .kui-select__trigger {
   outline: var(--kui-focus-ring);
   outline-offset: -3px;
 }
-/* The popup-menu wa-button draws the same chevron glyph at 0.875em inside a
-   20px box; match its box, spacing, and glyph size rather than the smaller
-   form-field disclosure scale. */
-.kui-select[data-selected-presentation="icon-only"]::part(expand-icon) {
-  margin-inline-start: 0.75rem;
-  transform: scale(0.875);
-}
-.kui-select[data-caret="false"]::part(expand-icon) {
+.kui-select[data-caret="false"] .kui-select__caret {
   display: none;
 }
-.kui-select[data-selected-presentation="icon-only"][data-caret="false"]::part(
-    combobox
-  ) {
-  width: var(
-    --_kui-toolbar-control-group-slot-height,
-    var(--_kui-select-height)
-  );
-  justify-content: center;
+
+/* A custom selected rendering takes the value's place in the trigger. */
+.kui-select__custom-selected {
+  display: inline-flex;
+  box-sizing: content-box;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  padding-inline-end: var(--kui-layout-item-padding, 0.5rem);
+  overflow: hidden;
+  color: var(--kui-select-selected-color, var(--kui-color-neutral-on-quiet));
+  font-size: var(--kui-select-selected-font-size, inherit);
+  font-weight: var(--kui-select-selected-font-weight, inherit);
 }
-.kui-select[data-caret="false"] .kui-select__placeholder-chevron {
-  display: none;
+.kui-select__custom-selected-content {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.kui-select[data-selected-presentation="icon-only"]::part(display-input) {
+.kui-select--custom-selected > .kui-select__trigger > .kui-select__value {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -186,119 +309,154 @@
   overflow: hidden;
   clip-path: inset(50%);
 }
-.kui-select[data-selected-presentation="icon-only"]
-  .kui-select__icon[slot="start"] {
-  margin-inline-end: 0 !important;
+.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]
+  .kui-select__custom-selected {
+  flex: 0 0 auto;
+  padding-inline-end: 0;
 }
-.kui-select::part(start),
-.kui-select::part(end),
-.kui-select::part(expand-icon) {
-  margin: 0;
+.kui-select--custom-selected[data-presentation="inline"]
+  .kui-select__custom-selected {
+  flex: 0 0 auto;
+  padding-inline-end: 0;
 }
-.kui-select::part(expand-icon) {
-  transform: scale(var(--kui-disclosure-icon-scale, 0.5));
+.kui-select--custom-selected[data-presentation="inline"]
+  .kui-select__custom-selected-content {
+  display: flex;
 }
-.kui-select::part(expand-icon) {
-  transition: var(--_kui-popup-caret-transition);
+
+/* The listbox: a raised surface in the top layer below (or, when short, above)
+   the trigger, at least as wide as the trigger and as wide as its content up to
+   20rem, or exactly the trigger's width with `fitMenu`. */
+.kui-select__popup {
+  position: fixed;
+  inset: auto;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(
+    20rem,
+    calc(100vw - 1.25rem),
+    var(--_kui-popup-available-width, 100vw)
+  );
+  margin: 0;
+  padding: var(--_kui-popup-inset);
+  overflow: auto;
+  overscroll-behavior: none;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-m);
+  color: var(--kui-color-text);
+  background: var(--_kui-popup-scroll-cue);
+  box-shadow: var(--kui-shadow-m);
+  font: inherit;
+  font-weight: normal;
+  text-align: start;
+  white-space: normal;
+  user-select: none;
+  opacity: 0;
+  transition:
+    opacity var(--_kui-select-motion) ease,
+    display var(--_kui-select-motion) allow-discrete,
+    overlay var(--_kui-select-motion) allow-discrete;
+}
+.kui-select__popup:popover-open {
+  display: block;
+  opacity: 1;
 }
-.kui-select[open]::part(expand-icon) {
-  rotate: var(--_kui-popup-caret-open-rotation);
+@starting-style {
+  .kui-select__popup:popover-open {
+    opacity: 0;
+  }
 }
-/* The open listbox already shows where focus is (its current option), so the
-   trigger drops its focus ring while the popup is visible, as a PopupMenu
-   trigger does; the ring returns when the popup closes with focus still on
-   the control. */
-.kui-select[open]::part(combobox) {
-  outline-color: transparent;
+.kui-select__popup:focus {
+  outline: none;
 }
-.kui-select::part(listbox) {
-  padding: var(--_kui-popup-inset);
-  background: var(--_kui-popup-scroll-cue);
-  width: max-content;
-  min-width: 100%;
-  max-width: min(20rem, calc(100vw - 1.25rem));
+.kui-select--fit-menu > .kui-select__popup {
+  max-width: var(--_kui-popup-available-width, none);
 }
-.kui-select--fit-menu::part(listbox) {
-  width: 100%;
+
+.kui-select__listbox,
+.kui-select__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--_kui-popup-row-gap);
 }
-.kui-select wa-option::part(base) {
-  align-items: center;
+.kui-select__listbox > *,
+.kui-select__group > * {
+  flex: none;
 }
-.kui-select wa-option {
-  --wa-form-control-activated-color: var(--_kui-popup-row-current-background);
-  --current-text-color: var(--_kui-popup-row-current-color);
+
+.kui-select__option {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
   padding: var(--_kui-popup-row-padding-block)
     var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
     var(--_kui-popup-row-padding-inline-start);
+  border-radius: var(--kui-radius-s);
+  outline: none;
+  color: var(--kui-color-text);
+  cursor: pointer;
+  transition: background-color var(--_kui-select-motion) ease;
 }
-.kui-select wa-option::part(start) {
-  align-self: center;
-  margin-inline-end: var(--_kui-popup-row-icon-gap);
-  margin-top: 0;
+@media (hover: hover) {
+  .kui-select__option:not([aria-disabled="true"], :focus):hover {
+    color: var(--kui-color-neutral-on-normal);
+    background-color: var(--kui-color-neutral-fill-normal);
+  }
 }
-.kui-select wa-option::part(label) {
-  min-width: 0;
-  padding-block: var(--_kui-popup-row-label-padding-block);
-  line-height: var(--_kui-popup-row-label-line-height);
-  overflow-wrap: normal;
-  word-break: normal;
-  white-space: normal;
+/* The focused option is the listbox's current row. */
+.kui-select__option:focus {
+  color: var(--_kui-popup-row-current-color);
+  background-color: var(--_kui-popup-row-current-background);
 }
-.kui-select__icon {
-  display: inline-flex;
-  width: var(--_kui-popup-row-icon-size);
-  height: var(--_kui-popup-row-icon-size);
+.kui-select__option[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.kui-select__option[aria-disabled="true"]:focus {
+  opacity: 1;
+}
+.kui-select__check {
+  display: flex;
+  width: 2em;
   flex: none;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--kui-font-s);
+  visibility: hidden;
 }
-.kui-select > .kui-select__icon[slot="start"] {
-  margin-inline-end: 0.5rem !important;
+.kui-select__check svg {
+  width: 1.25em;
+  height: 1.25em;
+  stroke-width: 2.5;
 }
-.kui-select__icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
+.kui-select__option[aria-selected="true"] .kui-select__check {
+  visibility: visible;
 }
-.kui-select__custom-selected {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  overflow: hidden;
-  color: var(--kui-select-selected-color, inherit);
-  font-size: var(--kui-select-selected-font-size, inherit);
-  font-weight: var(--kui-select-selected-font-weight, inherit);
+.kui-select__option > .kui-select__icon {
+  margin-inline-end: var(--_kui-popup-row-icon-gap);
 }
-.kui-select__custom-selected-content {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* An icon-only Select's listbox keeps its compact icon rows. */
+.kui-select[data-selected-presentation="icon-only"]
+  .kui-select__option
+  > .kui-select__icon {
+  margin-inline-end: 0;
 }
-.kui-select--custom-selected::part(start) {
+.kui-select__option-label {
   min-width: 0;
   flex: 1 1 auto;
+  margin-inline-start: var(--_kui-popup-row-icon-gap);
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
 }
-/* A label can use the free start-slot width to truncate, but a caret-free
-   icon must keep its intrinsic width so the combobox can center the glyph. */
-.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]::part(
-    start
-  ) {
-  flex: 0 0 auto;
-}
-.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]
-  .kui-select__custom-selected {
-  margin-inline-end: 0 !important;
-}
-.kui-select--custom-selected::part(display-input) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
+
+.kui-select__separator {
+  margin-block: 0.5em;
+  border-top: 1px solid var(--kui-color-neutral-border-normal);
 }
 .kui-select__group {
-  display: grid;
+  /* A group's title and choices sit flush, without the row gap. */
+  gap: 0;
   padding: 0.25rem 0;
 }
 .kui-select__group--separated {
@@ -318,15 +476,16 @@
 .kui-select__actions {
   display: flex;
   gap: 0.25rem;
-  margin-block-start: 0.25rem;
+  margin-block-start: calc(0.25rem + var(--_kui-popup-row-gap));
   padding-block-start: 0.5rem;
   border-block-start: 1px solid var(--kui-color-neutral-border-quiet);
 }
-
 .kui-select__action {
-  flex: 1 1 auto;
   min-width: 0;
-  min-height: 2.25rem;
+  height: auto;
+  min-height: 2.75rem;
+  flex: 1 1 auto;
+  margin: 0;
   padding-inline: 0.5rem;
   border: 0;
   border-radius: var(--kui-radius-s);
@@ -334,40 +493,25 @@
   background: transparent;
   font: inherit;
   cursor: pointer;
+  transform: none;
 }
-
 .kui-select__action:hover {
   background: var(--kui-color-neutral-fill-quiet);
 }
-
+.kui-select__action:focus {
+  outline: none;
+}
 .kui-select__action:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: -2px;
 }
 
-/* Loading placeholder: a static box that mirrors the closed combobox (label
-   above, a value skeleton and a dormant chevron inside a 44px control box).
-   Rendered instead of the interactive wa-select, so it needs no registration. */
-.kui-select--placeholder {
-  display: block;
-  width: 100%;
-}
-.kui-select__placeholder-label {
-  /* The live field's top label (see webawesome.css): a ListHeader-style label,
-     inset by the field's border + inline padding so it lines up with the value. */
-  display: block;
-  margin-block-end: 0.375rem;
-  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  color: var(--kui-color-neutral-on-quiet);
-  font-size: var(--kui-font-xs);
-  font-weight: 650;
-  letter-spacing: 0.04em;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
+/* Loading placeholder: a static box that mirrors the closed control (label
+   above, a value skeleton and a dormant caret inside the control box). */
 .kui-select__placeholder-box {
   display: flex;
-  min-height: 2.75rem;
+  box-sizing: border-box;
+  min-height: var(--_kui-select-height);
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
@@ -376,22 +520,11 @@
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   background: var(--kui-color-surface);
 }
-.kui-select--placeholder[data-size="compact"] .kui-select__placeholder-box {
-  min-height: 2rem;
-}
 .kui-select--placeholder[data-presentation="toolbar-borderless"]
   .kui-select__placeholder-box {
   border-color: transparent;
   background: transparent;
 }
-.kui-select--placeholder[data-presentation="navigation"] {
-  width: max-content;
-  max-width: 100%;
-}
-.kui-select--placeholder[data-presentation="title"] {
-  width: max-content;
-  max-width: 100%;
-}
 .kui-select--placeholder[data-presentation="title"]
   .kui-select__placeholder-box {
   min-height: 2.25rem;
@@ -401,10 +534,6 @@
   font-size: var(--kui-font-l, 1.25rem);
   font-weight: 700;
 }
-.kui-select--placeholder[data-presentation="inline"] {
-  width: max-content;
-  max-width: 100%;
-}
 .kui-select--placeholder[data-presentation="inline"]
   .kui-select__placeholder-box {
   min-height: 0;
@@ -412,32 +541,6 @@
   border-width: 0;
   background: transparent;
 }
-.kui-select__placeholder-hint {
-  /* The live wa-select hint part: small body text at Web Awesome's form-control
-     hint metrics (1.6 line height, 7px below the box), inset like the value. */
-  display: block;
-  margin-block-start: 0.4375rem;
-  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-s);
-  line-height: 1.6;
-}
-.kui-select__placeholder-chevron {
-  /* The live control's expand-icon box and scale, with the same glyph. */
-  display: grid;
-  width: 1.25rem;
-  height: 1rem;
-  flex: none;
-  place-items: center;
-  color: var(--kui-color-neutral-on-quiet);
-  transform: scale(var(--kui-disclosure-icon-scale, 0.5));
-}
-.kui-select__placeholder-chevron svg {
-  display: block;
-  width: auto;
-  height: 100%;
-  fill: currentColor;
-}
 
 /* Explicit width policy applies to both the live control and its loading
    placeholder; the presentation keeps its existing width when omitted. */
@@ -453,3 +556,21 @@
   width: max-content;
   max-width: var(--kui-select-trigger-max-width, 100%);
 }
+/* `maxTriggerWidth` / `minTriggerWidth` bound the closed trigger under any
+   presentation; the value or custom selected content ellipsizes inside. */
+.kui-select[data-trigger-max] {
+  max-width: min(var(--_kui-select-trigger-max), 100%);
+}
+.kui-select[data-trigger-min] {
+  min-width: var(--_kui-select-trigger-min);
+}
+/* Under a cap, a max-content trigger (title, inline) and its value or custom
+   content shrink to fit, so the text ellipsizes before the caret. */
+.kui-select[data-trigger-max] > .kui-select__trigger {
+  max-width: 100%;
+}
+.kui-select[data-trigger-max] .kui-select__value,
+.kui-select[data-trigger-max] .kui-select__custom-selected {
+  min-width: 0;
+  flex-shrink: 1;
+}