@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

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,26 +180,65 @@
     );
     --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;
     --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
     --wa-form-control-border-radius: var(--wa-border-radius-m);
     --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
+    /* Field inset: a 1px border with 8px inside it, the same content-item
+       geometry the Kerf primitives use (docs/layout.md). WA's defaults are a
+       larger 0.75em/1em pad; this brings every form field onto our 8px rhythm.
+       The single-line control height is set on the controls below. */
+    --wa-form-control-border-width: var(--kui-layout-item-border-width, 1px);
+    --wa-form-control-padding-block: var(
+      --kui-layout-item-padding,
+      0.5rem
+    );
+    --wa-form-control-padding-inline: var(
+      --kui-layout-item-padding,
+      0.5rem
+    );
     --wa-panel-border-radius: var(--wa-border-radius-l);
     --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
     --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
     --wa-tooltip-arrow-size: 0px;
     --kui-wa-popover-arrow-size: 0px;
+    /* Web Awesome's own `ui-monospace, monospace` renders the generic face
+       (Courier) in Chromium; use Kerf's named code stack for its components. */
+    --wa-font-family-code: var(
+      --kui-font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      "SF Mono",
+      Menlo,
+      Consolas,
+      "Liberation Mono",
+      monospace
+    );
     --kui-wa-carousel-dot-size: 7px;
     --kui-wa-carousel-dot-hit-size: 20px;
     --kui-wa-carousel-control-size: 28px;
     --kui-wa-carousel-icon-size: 16px;
+    /* Non-field chrome uses Kerf's control, surface, and container spacing:
+       8px inside controls/surfaces, 8px around bordered surfaces, and 16px
+       inside the remaining content containers. */
+    --kui-wa-control-inset: var(--kui-layout-item-padding, 0.5rem);
+    --kui-wa-surface-inset: var(--kui-layout-item-padding, 0.5rem);
+    --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),
@@ -208,6 +259,44 @@
     color-scheme: dark;
   }
 
+  /* Web Awesome's filled badge appearances pair each variant's normal fill
+     with its normal foreground. Several combinations miss 4.5:1 at the
+     badge's 12px text size. Keep the variant's quiet tint, but use normal text
+     by default; filled-outlined retains its normal border. */
+  wa-badge:is([appearance="filled"], [appearance="filled-outlined"]) {
+    --wa-color-fill-normal: var(
+      --kui-wa-badge-filled-background,
+      var(--wa-color-fill-quiet)
+    ) !important;
+    --wa-color-on-normal: var(
+      --kui-wa-badge-filled-foreground,
+      var(--wa-color-text-normal)
+    ) !important;
+  }
+
+  /* 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,
+      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;
+  }
+
   wa-carousel::part(navigation-button) {
     box-sizing: border-box;
     width: var(--kui-wa-carousel-control-size);
@@ -248,9 +337,258 @@
     transform: scale(var(--kui-disclosure-icon-scale));
   }
 
+  /* Bordered/fill surfaces follow the same 8px outer margin + 8px inner
+     padding contract as a Kerf content item. Accordion owns one outer margin
+     for the group; its items retain connected borders. */
+  :is(wa-accordion, wa-card, wa-details, wa-callout, wa-include) {
+    margin-inline: var(--kui-wa-surface-margin);
+  }
+
+  /* Kerf's sunken appearance is a shared extension for content surfaces. It
+     deliberately uses the lowered semantic surface and rounded-rectangle
+     geometry without the raised Card shadow. Details keeps its visible shell
+     inside the exported `details` part, while Accordion and Card paint their
+     host directly. */
+  :is(wa-accordion, wa-card)[appearance="sunken"] {
+    background-color: var(
+      --kui-wa-sunken-background,
+      var(--kui-color-surface-lowered, var(--wa-color-surface-lowered))
+    );
+    border-color: transparent;
+    border-radius: var(
+      --kui-wa-sunken-radius,
+      var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+    );
+    box-shadow: none;
+  }
+
+  wa-details[appearance="sunken"]::part(details) {
+    background-color: var(
+      --kui-wa-sunken-background,
+      var(--kui-color-surface-lowered, var(--wa-color-surface-lowered))
+    );
+    border-color: transparent;
+    border-radius: var(
+      --kui-wa-sunken-radius,
+      var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+    );
+    box-shadow: none;
+  }
+
+  wa-details[appearance="plain"]::part(header) {
+    padding-inline: var(--kui-wa-surface-inset);
+  }
+
+  wa-details[appearance="plain"]::part(content) {
+    padding-inline: 0;
+  }
+
+  wa-details:is([appearance="outlined"], [appearance="sunken"])::part(header) {
+    padding-inline: var(--kui-wa-container-inset);
+  }
+
+  wa-details:is([appearance="outlined"], [appearance="sunken"])::part(content) {
+    padding-inline: var(--kui-wa-surface-inset);
+  }
+
+  wa-accordion[appearance="plain"] > wa-accordion-item::part(button),
+  wa-accordion[appearance="plain"] > wa-accordion-item::part(content) {
+    padding-inline: var(--kui-wa-surface-inset);
+  }
+
+  wa-accordion:is([appearance="outlined"], [appearance="sunken"])
+    > wa-accordion-item::part(button) {
+    padding-inline: var(--kui-wa-container-inset);
+  }
+
+  wa-accordion:is([appearance="outlined"], [appearance="sunken"])
+    > wa-accordion-item::part(content) {
+    padding-inline: var(--kui-wa-container-inset);
+  }
+
+  wa-card,
+  wa-details,
+  wa-accordion-item {
+    /* WA declares this custom property on :host inside each shadow root. The
+       important flag is required for a public host override to cross that
+       encapsulation boundary. */
+    --spacing: var(--kui-wa-surface-inset) !important;
+  }
+
+  /* Card halves --spacing for its header block padding upstream, so pin the
+     public part to the same full surface inset as its body and footer. */
+  wa-card::part(header) {
+    border-bottom: none;
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-card::part(body) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-card::part(footer) {
+    border-top: none;
+    padding: var(--kui-wa-container-inset);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kui-layout-item-gap, 0.5rem);
+  }
+
+  /* Dialog content follows the compact surface inset, while its action region
+     retains the roomier homogeneous-group step. Keep these independent of
+     Web Awesome's shared --spacing property so applications can tune the
+     header without accidentally moving body or footer content. */
+  wa-dialog::part(header) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  /* A plain-string `label` renders straight into the title part, so it would
+     sit at the bare surface inset while body content (list-inset text, Text)
+     starts one bordered item further in. Inset the default title by that item
+     step so the header label lines up with the body's text and icons. A
+     slotted label element owns its own geometry and is left alone. */
+  wa-dialog:not(:has(> [slot="label"]))::part(title) {
+    padding-inline: calc(
+      var(--kui-layout-item-padding, 0.5rem) + 0.0625rem
+    );
+  }
+
+  wa-dialog::part(body) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-dialog::part(footer) {
+    padding: var(--kui-wa-container-inset);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kui-layout-item-gap, 0.5rem);
+  }
+
+  /* Dialogs that provide their own dismissal affordance can opt out of Web
+     Awesome's header action region without reaching through the shadow root.
+     `header-actions` is a directly exported part, so it must be targeted from
+     the host rather than chained through the `dialog` and `header` parts. */
+  wa-dialog.hide-actions::part(header-actions) {
+    display: none;
+  }
+
+  wa-callout {
+    padding: var(--kui-wa-surface-inset) !important;
+  }
+
+  wa-include {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  /* Interactive and item chrome follows the content-item 8px inset. */
+  wa-tab::part(tab) {
+    padding: var(--kui-wa-control-inset);
+  }
+
+  wa-tab-panel {
+    --padding: var(--kui-wa-container-inset) 0 !important;
+  }
+
+  wa-tree-item::part(item) {
+    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+    padding-inline-end: var(--kui-wa-control-inset);
+    border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  }
+
+  wa-tag {
+    padding-inline: var(--kui-wa-control-inset) !important;
+  }
+
+  /* A PopupMenu item owns the Select option geometry instead (popup-menu.css),
+     so a command menu and a value list draw identical rows. */
+  wa-dropdown-item:not([data-component="popup-menu"] > *) {
+    padding-inline: var(--kui-wa-control-inset) !important;
+  }
+
   wa-popover {
     --arrow-size: var(--kui-wa-popover-arrow-size);
   }
+
+  /* Default-size single-line controls share Kerf's 44px control height (the
+     Select field, toolbar groups, and list rows), so a Web Awesome field,
+     button, or button radio sits flush beside a Kerf Select instead of 9px
+     shorter. The height is 2.75em of the control's own font size (44px at the
+     16px default), so size="large" grows proportionally; size="small" stays
+     Web Awesome's deliberately compact secondary control. It is scoped to the
+     controls rather than the root because Web Awesome also derives tag, copy
+     button, and toast geometry from this token. A ToolbarControlGroup still
+     sizes its own nested buttons. */
+  :is(
+    wa-button,
+    wa-color-picker,
+    wa-input,
+    wa-known-date,
+    wa-number-input,
+    wa-radio-group,
+    wa-select,
+    wa-textarea,
+    wa-time-input
+  ):not([size="small"]) {
+    --wa-form-control-height: round(2.75em, 1px);
+  }
+
+  /* A form field's top label is inset by the field's own border + inline padding
+     (1px + 8px = 9px) so the label text lines up with the value inside the field,
+     and it is styled exactly like a ListHeader label: uppercase, xs, quiet. */
+  :is(
+    wa-checkbox-group,
+    wa-color-picker,
+    wa-input,
+    wa-known-date,
+    wa-number-input,
+    wa-radio-group,
+    wa-select,
+    wa-textarea,
+    wa-time-input
+  )::part(form-control-label),
+  wa-otp-input::part(label),
+  wa-slider::part(label) {
+    padding-inline: calc(
+      var(--wa-form-control-border-width) +
+        var(--wa-form-control-padding-inline)
+    );
+    color: var(--kui-color-neutral-on-quiet, var(--wa-color-text-quiet));
+    font-size: var(--kui-font-xs, var(--wa-font-size-xs));
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    line-height: var(--wa-line-height-condensed);
+    text-transform: uppercase;
+  }
+
+  /* Checkbox/radio groups and the color picker have no bordered field shell,
+     so their control regions need the content-item's 8px inline outer inset. */
+  :is(wa-checkbox-group, wa-color-picker, wa-radio-group)::part(
+    form-control-input
+  ) {
+    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  }
+
+  wa-slider::part(slider) {
+    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  }
+
+  /* Secondary captions and hints align with the value inside bordered fields:
+     1px border + 8px field padding = a 9px logical inset. */
+  wa-known-date::part(field-label),
+  :is(
+    wa-input,
+    wa-known-date,
+    wa-number-input,
+    wa-otp-input,
+    wa-select,
+    wa-textarea,
+    wa-time-input
+  )::part(hint) {
+    padding-inline: calc(
+      var(--wa-form-control-border-width) +
+        var(--wa-form-control-padding-inline)
+    );
+  }
 }
 
 @media (prefers-contrast: more) {