@kerfjs/ui 5.0.0-beta.52 → 5.0.0-beta.54

package/dist/styles/select.css

@@ -116,7 +116,7 @@
 .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). */
+     accent so it clears WCAG AA (brand-on-quiet is 4.26:1 over that fill). */
   --current-text-color: var(--kui-color-brand-on-fill);
 }
 .kui-select wa-option::part(start) {
@@ -189,11 +189,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;
@@ -219,23 +225,28 @@
   max-width: 100%;
 }
 .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.25rem;
+  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-xs);
-  line-height: 1.4;
+  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;
 }

package/dist/styles/skeleton.css

@@ -7,8 +7,13 @@
   height: 1em;
   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. A host with its own solid
+     fill (a solid Badge) supplies `--_kui-skeleton-fill` derived from its
+     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;
 }
 
@@ -27,6 +32,32 @@
   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;

package/dist/styles/state-banner.css

@@ -41,6 +41,15 @@
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
+/* The detail is secondary through its smaller, regular-weight type, not a
+   dimmed color: an opacity cut toned details below WCAG AA over their fills.
+   Only the neutral tone has a quieter text color that still clears AA. */
+.kui-state-banner[data-tone="neutral"] {
+  --_kui-state-banner-detail: var(
+    --kui-state-banner-detail,
+    var(--kui-color-neutral-on-quiet)
+  );
+}
 .kui-state-banner[data-tone="info"] {
   --_kui-state-banner-background: var(
     --kui-state-banner-background,
@@ -123,7 +132,7 @@
   );
   --_kui-state-banner-foreground: var(
     --kui-state-banner-foreground,
-    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-quiet))
+    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-fill))
   );
 }
 .kui-state-banner__icon {
@@ -134,21 +143,50 @@
   width: 1rem;
   height: 1rem;
 }
+/* The copy is inline flow, not flex: a wrapping title lays out as text, so the
+   badge follows the title's last word instead of the right edge of a
+   flex-shrunk title box, and the detail stays beside them only while it fits
+   whole. Otherwise it moves to its own line and truncates at the full copy
+   width. Flex shrank the title and detail together, which left a gap before
+   the badge and cut the detail early. Each item's trailing margin is the item
+   gap, so no margin lands at the start of a wrapped line. */
 .kui-state-banner__copy {
-  display: flex;
   min-width: 0;
-  align-items: baseline;
-  gap: var(--kui-layout-item-gap, 0.5rem);
+  /* The title's size, so a wrapped title's lines keep the title's own line
+     height instead of the larger inherited strut. */
+  font-size: var(--kui-font-xs);
 }
 .kui-state-banner__copy strong {
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);
 }
+/* The badge is taller than the title's line. Negative block margins keep it
+   out of the line-height calculation, so a wrapped title's lines stay evenly
+   spaced whichever line the badge lands on. */
+.kui-state-banner__badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}
+/* A placeholder badge holds a 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__badge
+  > *::before {
+  content: "\200b";
+}
 .kui-state-banner__detail {
-  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+  overflow: clip;
   color: var(--_kui-state-banner-detail);
   font-size: var(--kui-font-2xs);
-  opacity: 0.78;
   text-overflow: ellipsis;
+  vertical-align: baseline;
   white-space: nowrap;
 }
 .kui-state-banner__action {
@@ -174,12 +212,10 @@
   outline-offset: 2px;
 }
 @media (max-width: 36rem) {
-  .kui-state-banner__copy {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.05rem;
-  }
+  /* The detail drops below the title. The title row keeps the wide layout's
+     relationship: a content-sized badge one item gap after the title, on the
+     title's baseline. */
   .kui-state-banner__detail {
-    grid-column: 1 / -1;
+    display: block;
   }
 }

package/dist/styles/webawesome.css

@@ -42,9 +42,18 @@
       var(--wa-color-neutral-fill-normal) 25%,
       transparent
     );
+    /* Kept although kerf overrides --wa-shadow-s/-m/-l below: Web Awesome's
+       theme stylesheets build their shadows from this token, so an app that
+       layers one of them keeps kerf's scheme-aware shadow color. */
     --wa-color-shadow: light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5));
     --wa-color-focus: light-dark(#007aff, #64d2ff);
-    --wa-color-brand-fill-loud: light-dark(#0088ff, #64d2ff);
+    /* Kerf-owned loud fills and on-loud text: every on-loud/fill-loud pair
+       clears WCAG AA (4.5:1) in both schemes. Light brand and danger keep
+       white text on a slightly deeper fill of the same hue (#0088ff ->
+       #0075db, #ff383c -> #eb0005); success keeps its bright green with dark
+       text, as warning already does; dark brand and danger keep their fills
+       with dark text. src/foundation.css mirrors these as fallbacks. */
+    --wa-color-brand-fill-loud: light-dark(#0075db, #64d2ff);
     --wa-color-brand-fill-quiet: color-mix(
       in srgb,
       var(--wa-color-brand-fill-loud) 8%,
@@ -66,7 +75,10 @@
       var(--wa-color-surface-default)
     );
     --wa-color-brand-border-loud: var(--wa-color-brand-fill-loud);
-    --wa-color-brand-on-quiet: light-dark(#1e6ef4, #8acbff);
+    /* Kerf-owned light on-quiet values: darkened from Hot Sheet 2's hues so
+       they clear AA on the lowered page background (#f2f2f7) as well as on
+       the surface; src/foundation.css mirrors them as fallbacks. */
+    --wa-color-brand-on-quiet: light-dark(#0c62f3, #8acbff);
     --wa-color-brand-on-normal: var(--wa-color-brand-on-quiet);
     --wa-color-brand-on-loud: light-dark(#fff, #111113);
 
@@ -106,9 +118,9 @@
       var(--wa-color-success-fill-loud) 78%,
       var(--wa-color-neutral-on-normal)
     );
-    --wa-color-success-on-quiet: light-dark(#008932, #63e685);
+    --wa-color-success-on-quiet: light-dark(#007f2e, #63e685);
     --wa-color-success-on-normal: light-dark(#006d28, #8cea9f);
-    --wa-color-success-on-loud: #fff;
+    --wa-color-success-on-loud: #1d1d1f;
 
     --wa-color-warning-fill-loud: #ffcc00;
     --wa-color-warning-fill-quiet: color-mix(
@@ -136,11 +148,11 @@
       var(--wa-color-warning-fill-loud) 78%,
       var(--wa-color-neutral-on-normal)
     );
-    --wa-color-warning-on-quiet: light-dark(#a16a00, #ffd84a);
+    --wa-color-warning-on-quiet: light-dark(#966200, #ffd84a);
     --wa-color-warning-on-normal: light-dark(#5f3f00, #ffe27a);
     --wa-color-warning-on-loud: #1d1d1f;
 
-    --wa-color-danger-fill-loud: #ff383c;
+    --wa-color-danger-fill-loud: light-dark(#eb0005, #ff383c);
     --wa-color-danger-fill-quiet: color-mix(
       in srgb,
       var(--wa-color-danger-fill-loud) 7%,
@@ -168,7 +180,7 @@
     );
     --wa-color-danger-on-quiet: light-dark(#c20b20, #ff696c);
     --wa-color-danger-on-normal: light-dark(#8e0717, #ff8a8c);
-    --wa-color-danger-on-loud: #fff;
+    --wa-color-danger-on-loud: light-dark(#fff, #111113);
 
     /* Geometry stays aligned with the compact Kerf primitives. */
     --wa-border-radius-pill: 999px;
@@ -217,9 +229,16 @@
     --kui-wa-surface-margin: var(--kui-layout-inline-margin, 0.5rem);
     --kui-wa-container-inset: var(--kui-space-m, 1rem);
     --kui-disclosure-icon-scale: 0.5;
-    --wa-shadow-s: 0 1px 3px rgb(0 0 0 / 0.14);
-    --wa-shadow-m: 0 0.35rem 1rem rgb(0 0 0 / 0.11);
-    --wa-shadow-l: 0 0.75rem 2rem rgb(0 0 0 / 0.09);
+    /* Elevation follows the scheme like --wa-color-shadow does: the light
+       alphas stay Hot Sheet 2's soft values, while dark raises them so a
+       raised surface still separates from a near-black page (a 9% black
+       shadow is invisible there). src/foundation.css mirrors these as
+       fallbacks. */
+    --wa-shadow-s: 0 1px 3px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5));
+    --wa-shadow-m: 0 0.35rem 1rem
+      light-dark(rgb(0 0 0 / 0.11), rgb(0 0 0 / 0.4));
+    --wa-shadow-l: 0 0.75rem 2rem
+      light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.32));
   }
 
   :where(:root),
@@ -255,18 +274,26 @@
     ) !important;
   }
 
-  /* The fixed brand/success/danger loud fills need a dark foreground in both
-     color schemes at badge text size. Neutral and warning already select an
-     AA-safe on-loud token, so preserve their variant-specific treatment. */
-  wa-badge[appearance="accent"]:is(
-      :not([variant]),
-      [variant="brand"],
-      [variant="success"],
-      [variant="danger"]
-    ) {
+  /* Every variant's on-loud token clears AA on its loud fill in both color
+     schemes, so accent badges use it by default (a fixed dark foreground here
+     would fail on the deeper light brand and danger fills). Brand, success,
+     and danger keep a reviewed-override hook. */
+  wa-badge[appearance="accent"]:is(:not([variant]), [variant="brand"]) {
     --wa-color-on-loud: var(
       --kui-wa-badge-accent-foreground,
-      #1d1d1f
+      var(--wa-color-brand-on-loud)
+    ) !important;
+  }
+  wa-badge[appearance="accent"][variant="success"] {
+    --wa-color-on-loud: var(
+      --kui-wa-badge-accent-foreground,
+      var(--wa-color-success-on-loud)
+    ) !important;
+  }
+  wa-badge[appearance="accent"][variant="danger"] {
+    --wa-color-on-loud: var(
+      --kui-wa-badge-accent-foreground,
+      var(--wa-color-danger-on-loud)
     ) !important;
   }