@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/select.css

@@ -4,13 +4,192 @@
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   gap: 0;
 }
+.kui-select--label-hidden::part(form-control-label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 .kui-select::part(display-input) {
   min-width: 0;
+  max-width: var(--kui-select-label-max-width, none);
   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[data-size="compact"]::part(combobox) {
+  min-height: 2rem;
+}
+.kui-select[data-presentation="toolbar-borderless"]::part(combobox) {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.kui-select[data-presentation="navigation"] {
+  width: max-content;
+  max-width: 100%;
+}
+.kui-select[data-presentation="title"] {
+  width: max-content;
+  max-width: 100%;
+}
+.kui-select[data-presentation="title"]::part(combobox) {
+  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;
+  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) {
+  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) {
+  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. */
+.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) {
+  min-height: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
+  padding-inline: 0.5rem;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+}
+/* Only a lone trigger takes the group's slot overlap and radius; beside
+   sibling controls it keeps the group's gap, end insets, and item radius, as
+   they do. */
+.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) {
+  border-radius: var(
+    --_kui-toolbar-control-group-slot-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+}
+/* In a ToolbarControlGroup, a Select beside other controls highlights its own
+   pill on hover, like its button and dropdown 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) {
+  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. */
+.kui-toolbar-control-group[data-focus-ring="control"]
+  > .kui-select:not([open]):focus-within::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-select[data-focus-ring-inset="true"][data-focus-ring-owner="select"]:focus-within:not(
+    [open]
+  )::part(combobox) {
+  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) {
+  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;
+}
+.kui-select[data-caret="false"] .kui-select__placeholder-chevron {
+  display: none;
+}
+.kui-select[data-selected-presentation="icon-only"]::part(display-input) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  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::part(start),
 .kui-select::part(end),
 .kui-select::part(expand-icon) {
@@ -19,7 +198,22 @@
 .kui-select::part(expand-icon) {
   transform: scale(var(--kui-disclosure-icon-scale, 0.5));
 }
+.kui-select::part(expand-icon) {
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-select[open]::part(expand-icon) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+/* 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::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));
@@ -31,30 +225,32 @@
   align-items: center;
 }
 .kui-select wa-option {
-  --wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
-  /* Current option text sits on the activated brand fill; use the darker on-fill
-     accent so it clears WCAG AA (brand-on-quiet was 3.77:1 over that fill). */
-  --current-text-color: var(--kui-color-brand-on-fill);
+  --wa-form-control-activated-color: var(--_kui-popup-row-current-background);
+  --current-text-color: var(--_kui-popup-row-current-color);
+  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);
 }
 .kui-select wa-option::part(start) {
   align-self: center;
+  margin-inline-end: var(--_kui-popup-row-icon-gap);
   margin-top: 0;
 }
 .kui-select wa-option::part(label) {
   min-width: 0;
-  padding-block: 0.35rem;
-  line-height: 1.25;
+  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;
 }
 .kui-select__icon {
   display: inline-flex;
-  width: 1rem;
-  height: 1rem;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
   flex: none;
 }
-.kui-select__icon[slot="start"] {
+.kui-select > .kui-select__icon[slot="start"] {
   margin-inline-end: 0.5rem !important;
 }
 .kui-select__icon svg {
@@ -66,11 +262,33 @@
   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__custom-selected-content {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .kui-select--custom-selected::part(start) {
   min-width: 0;
   flex: 1 1 auto;
 }
+/* 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;
@@ -89,14 +307,44 @@
   border-block-start: 1px solid var(--kui-color-neutral-border-quiet);
 }
 .kui-select__group-title {
-  padding: 0.2rem 0.75rem 0.3rem;
+  padding: var(--_kui-popup-group-title-padding);
   color: var(--kui-color-neutral-on-quiet);
   font-size: var(--kui-font-2xs);
-  font-weight: 750;
+  font-weight: var(--_kui-popup-group-title-font-weight);
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
 
+.kui-select__actions {
+  display: flex;
+  gap: 0.25rem;
+  margin-block-start: 0.25rem;
+  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;
+  padding-inline: 0.5rem;
+  border: 0;
+  border-radius: var(--kui-radius-s);
+  color: var(--kui-color-neutral-on-quiet);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.kui-select__action:hover {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.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. */
@@ -105,11 +353,17 @@
   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.25rem;
-  color: var(--kui-color-text);
-  font-size: var(--kui-font-s);
-  line-height: 1.4;
+  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;
 }
 .kui-select__placeholder-box {
   display: flex;
@@ -118,23 +372,84 @@
   justify-content: space-between;
   gap: 0.5rem;
   padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  border: 1px solid var(--kui-color-border);
+  border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   background: var(--kui-color-surface);
 }
-.kui-select__placeholder-box .kui-skeleton {
-  max-width: 10rem;
+.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;
+  padding-inline: 0;
+  border-color: transparent;
+  background: transparent;
+  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;
+  padding: 0;
+  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 {
-  display: inline-flex;
-  width: 1rem;
+  /* The live control's expand-icon box and scale, with the same glyph. */
+  display: grid;
+  width: 1.25rem;
   height: 1rem;
   flex: none;
-  color: var(--kui-color-text-quiet);
-  transform: scale(var(--kui-disclosure-icon-scale, 0.85));
+  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: 100%;
+  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. */
+.kui-select[data-trigger-width="fill"] {
+  width: 100%;
+  max-width: var(--kui-select-trigger-max-width, 100%);
+}
+.kui-select[data-trigger-width="fit-content"] {
+  width: fit-content;
+  max-width: var(--kui-select-trigger-max-width, 100%);
+}
+.kui-select[data-trigger-width="max-content"] {
+  width: max-content;
+  max-width: var(--kui-select-trigger-max-width, 100%);
 }

package/dist/styles/skeleton.css

@@ -5,14 +5,36 @@
   width: 100%;
   max-width: 100%;
   height: 1em;
-  min-width: 1.5rem;
   border-radius: var(--kui-skeleton-radius);
   /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
-     without drawing the eye or implying progress. */
-  background: color-mix(in srgb, var(--kui-color-text) 12%, transparent);
+     without drawing the eye or implying progress. On a host with its own
+     solid fill (a solid Badge) the skeleton derives `--_kui-skeleton-fill`
+     from the host's foreground, since a text-color tint vanishes on a
+     saturated fill. */
+  background: var(
+    --_kui-skeleton-fill,
+    color-mix(in srgb, var(--kui-color-text) 12%, transparent)
+  );
   vertical-align: middle;
 }
 
+/* A placeholder's skeleton inside a solid badge: the generic text-color tint is
+   nearly invisible on the saturated fill, so derive it from the on-solid
+   foreground the badge provides, which contrasts with the fill in every tone
+   and color scheme. Quiet and outline badges sit on a pale fill and keep the
+   generic tint. */
+.kui-badge[data-appearance="solid"] .kui-skeleton {
+  --_kui-skeleton-fill: color-mix(
+    in srgb,
+    var(--_kui-badge-on-solid) 45%,
+    transparent
+  );
+}
+
+.kui-skeleton[data-block="true"] {
+  display: block;
+}
+
 .kui-skeleton-lines {
   display: flex;
   width: 100%;
@@ -24,8 +46,47 @@
   height: 0.8em;
 }
 
+/* Placeholder mode. A component's `placeholder` keeps its controls `disabled` so
+   they stay inert and out of the keyboard order, but a placeholder is loading,
+   not unavailable: it must look exactly like the live component except for its
+   skeleton values. Neutralize generic disabled chrome, including Web Awesome's
+   layered native `button:disabled { opacity: 0.5; cursor: not-allowed }`.
+   Opacity carries zero specificity so a component's own opacity rules (a
+   hover-revealed control that is invisible until interaction) still win;
+   components exclude placeholders from their own disabled tone. The cursor is
+   the non-interactive default, never `not-allowed`.
+
+   A control the author disabled carries `data-kui-disabled="true"` (set from
+   the component's own disabled prop, independent of placeholder). It is
+   unavailable once loaded, so its placeholder keeps the live disabled tone:
+   the reset skips it, and components key their disabled tone on the marker. */
+:where(
+  [data-placeholder="true"]:disabled:not([data-kui-disabled="true"]),
+  [data-placeholder="true"] :disabled:not([data-kui-disabled="true"])
+) {
+  opacity: 1;
+}
+
+[data-placeholder="true"]:disabled,
+[data-placeholder="true"] :disabled {
+  cursor: default;
+}
+
 @media (forced-colors: active) {
   .kui-skeleton {
     background: GrayText;
   }
 }
+
+/* A placeholder StateBanner's badge holds this skeleton instead of text. With
+   no text, the skeleton's baseline would be synthesized from its bottom edge,
+   sitting the badge higher than the live one by a font-dependent amount. A
+   zero-width character gives it a text baseline in the badge's own font and
+   line height, exactly where the live badge's text baseline falls on every
+   platform. */
+.kui-state-banner[data-placeholder="true"]
+  .kui-state-banner__copy
+  > .kui-badge
+  > .kui-skeleton::before {
+  content: "\200b";
+}

package/dist/styles/spacer.css

@@ -0,0 +1,11 @@
+.kui-spacer {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.kui-spacer[data-flex="true"] {
+  flex: 1 1 auto;
+}

package/dist/styles/split-button.css

@@ -0,0 +1,95 @@
+/* One loud semantic fill split into a primary half and a narrow options
+   trigger, with a hairline divider in the foreground color. Both halves are
+   native buttons on the shared fill; each brightens on its own hover. */
+.kui-split-button {
+  --_kui-split-button-fill: var(--kui-color-brand-fill-loud);
+  --_kui-split-button-on: var(--kui-color-brand-on-loud);
+  display: inline-grid;
+  min-width: 0;
+  min-height: 2.75rem;
+  overflow: hidden;
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--_kui-split-button-on);
+  background: var(--_kui-split-button-fill);
+  grid-template-columns: minmax(0, auto) 2.5rem;
+  font-weight: var(--kui-font-weight-semibold);
+}
+
+.kui-split-button[data-tone="neutral"] {
+  --_kui-split-button-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-split-button-on: var(--kui-color-neutral-on-loud);
+}
+
+.kui-split-button[data-tone="success"] {
+  --_kui-split-button-fill: var(--kui-color-success-fill-loud);
+  --_kui-split-button-on: var(--kui-color-success-on-loud);
+}
+
+.kui-split-button[data-tone="warning"] {
+  --_kui-split-button-fill: var(--kui-color-warning-fill-loud);
+  --_kui-split-button-on: var(--kui-color-warning-on-loud);
+}
+
+.kui-split-button[data-tone="danger"] {
+  --_kui-split-button-fill: var(--kui-color-danger-fill-loud);
+  --_kui-split-button-on: var(--kui-color-danger-on-loud);
+}
+
+.kui-split-button[data-fill="true"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) 2.5rem;
+}
+
+.kui-split-button > button {
+  display: flex;
+  min-width: 0;
+  min-height: 2.75rem;
+  margin: 0;
+  padding-block: var(--kui-space-xs);
+  padding-inline: var(--kui-space-s);
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kui-space-xs);
+  font: inherit;
+}
+
+.kui-split-button > .kui-split-button__options {
+  padding-inline: 0;
+  border-inline-start: 1px solid
+    color-mix(in srgb, currentColor 28%, transparent);
+}
+
+.kui-split-button > button:hover:not(:disabled) {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+/* The group clips outer outlines at its rounded corners, so the ring sits
+   inside each half. */
+.kui-split-button > button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-split-button > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.kui-split-button__icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+}
+
+.kui-split-button__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}