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

package/dist/styles/value-table.css

@@ -1,6 +1,5 @@
 .kui-value-table {
-  --kui-value-table-background: var(--kui-color-surface-lowered);
-  --kui-value-table-border: var(--kui-color-border);
+  --kui-value-table-border: var(--kui-color-neutral-border-normal);
   --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
   display: grid;
   margin-block: 0;
@@ -8,7 +7,10 @@
   overflow: hidden;
   border: 1px solid var(--kui-value-table-border);
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  background: var(--kui-value-table-background);
+  background: var(
+    --kui-value-table-background,
+    var(--kui-color-surface-lowered)
+  );
 }
 .kui-value-table__row {
   --_kui-value-table-inline-padding: var(
@@ -19,12 +21,32 @@
   position: relative;
   display: grid;
   min-height: 2.55rem;
-  padding-block: 0.5rem;
+  padding-block: var(
+    --kui-value-table-row-padding-block,
+    var(--_kui-value-table-density-padding-block, 0.5rem)
+  );
   padding-inline: var(--_kui-value-table-inline-padding);
   box-sizing: border-box;
-  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  /* Two content-sized tracks share the free space equally, and each stops
+     growing once its content fits. A short value keeps its whole width and a
+     long label takes the rest (ending a word that still does not fit in an
+     ellipsis); a short label keeps its width beside a long, wrapping value;
+     when both are long they split the row. A `1fr` value track would get
+     nothing until the label reached its full width, starving the value to 0px
+     beside a long single-word label. */
+  grid-template-columns: var(
+    --kui-value-table-row-columns,
+    minmax(0, auto) minmax(0, auto)
+  );
   align-items: center;
-  gap: var(--kui-layout-item-gap, 0.5rem);
+  gap: var(
+    --kui-value-table-row-gap,
+    var(--_kui-value-table-density-gap, var(--kui-layout-item-gap, 0.5rem))
+  );
+}
+.kui-value-table[data-density="compact"] .kui-value-table__row {
+  --_kui-value-table-density-padding-block: 0.25rem;
+  --_kui-value-table-density-gap: 0.25rem;
 }
 .kui-value-table__row[data-has-icon="true"] {
   --_kui-value-table-separator-start: calc(
@@ -42,8 +64,13 @@
 }
 .kui-value-table__row dt {
   display: flex;
+  /* The label hugs its content (up to its column) rather than stretching, so
+     its box does not change with the value's width — a placeholder row keeps
+     the live row's label geometry beside its skeleton value. */
+  max-width: 100%;
   min-width: 0;
-  color: var(--kui-color-text-quiet);
+  justify-self: start;
+  color: var(--kui-color-text);
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
@@ -60,6 +87,11 @@
 }
 .kui-value-table__label {
   min-width: 0;
+  overflow: hidden;
+  /* A multi-word label wraps at spaces; a single word wider than the label
+     column (a long component or file name) ends in an ellipsis instead of
+     running under the value. */
+  text-overflow: ellipsis;
 }
 .kui-value-table__row dd {
   display: flex;
@@ -73,3 +105,79 @@
   font-weight: var(--kui-font-weight-semibold);
   text-align: end;
 }
+
+/* `labelWidth`: a minimum label column; the value takes the rest of the row
+   (never wider than the row, so a narrow table still fits). */
+.kui-value-table[data-label-width] .kui-value-table__row {
+  grid-template-columns: var(
+    --kui-value-table-row-columns,
+    minmax(min(var(--_kui-value-table-label-min), 100%), auto) minmax(0, 1fr)
+  );
+}
+
+/* Only a table that stacks below a width becomes a size container. Size
+   containment drops its content-based width, so it fills its container's
+   width (inside its own inline margins) instead; a table without
+   `stackBelow` keeps sizing to content in shrink-to-fit contexts. */
+.kui-value-table[data-stack-below] {
+  box-sizing: border-box;
+  width: calc(100% - 2 * var(--kui-layout-inline-margin, 0.5rem));
+  container: kui-value-table / inline-size;
+}
+
+/* Stacked rows: each value sits under its label and starts at the label's
+   text edge (after a leading icon). */
+.kui-value-table[data-presentation="stacked"] .kui-value-table__row {
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: var(--kui-space-2xs);
+}
+.kui-value-table[data-presentation="stacked"] .kui-value-table__row dd {
+  justify-content: flex-start;
+  text-align: start;
+}
+.kui-value-table[data-presentation="stacked"]
+  .kui-value-table__row[data-has-icon="true"]
+  dd {
+  padding-inline-start: calc(
+    var(--_kui-value-table-separator-start) -
+      var(--_kui-value-table-inline-padding)
+  );
+}
+
+@container kui-value-table (max-width: 36rem) {
+  .kui-value-table[data-stack-below="narrow"] .kui-value-table__row {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--kui-space-2xs);
+  }
+  .kui-value-table[data-stack-below="narrow"] .kui-value-table__row dd {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .kui-value-table[data-stack-below="narrow"]
+    .kui-value-table__row[data-has-icon="true"]
+    dd {
+    padding-inline-start: calc(
+      var(--_kui-value-table-separator-start) -
+        var(--_kui-value-table-inline-padding)
+    );
+  }
+}
+
+@container kui-value-table (max-width: 32rem) {
+  .kui-value-table[data-stack-below="compact"] .kui-value-table__row {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--kui-space-2xs);
+  }
+  .kui-value-table[data-stack-below="compact"] .kui-value-table__row dd {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .kui-value-table[data-stack-below="compact"]
+    .kui-value-table__row[data-has-icon="true"]
+    dd {
+    padding-inline-start: calc(
+      var(--_kui-value-table-separator-start) -
+        var(--_kui-value-table-inline-padding)
+    );
+  }
+}

package/dist/styles/webawesome.css

@@ -26,8 +26,16 @@
     /* Hot Sheet 2's macOS system palette, with a compatible dark appearance. */
     --wa-color-surface-raised: light-dark(#fff, #2c2c2e);
     --wa-color-surface-default: light-dark(#fff, #1c1c1e);
-    --wa-color-surface-lowered: light-dark(#f2f2f7, #111113);
-    --wa-color-surface-border: light-dark(#d1d1d6, #48484a);
+    /* Translucent lowered layers adapt to their backdrop at every nesting depth.
+       Default/raised surfaces stay opaque canvas and overlay anchors. */
+    --wa-color-surface-lowered: light-dark(
+      rgb(0 0 98.076923 / 0.05098),
+      rgb(228.157895 228.157895 255 / 0.07451)
+    );
+    --wa-color-surface-border: light-dark(
+      rgb(0 0 27.717391 / 0.180392),
+      rgb(253 253 255 / 0.195556)
+    );
 
     --wa-color-text-normal: light-dark(#1d1d1f, #f5f5f7);
     --wa-color-text-quiet: light-dark(#6e6e73, #aeaeb2);
@@ -42,9 +50,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,17 +83,29 @@
       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);
 
     --wa-color-neutral-fill-quiet: var(--wa-color-surface-lowered);
-    --wa-color-neutral-fill-normal: light-dark(#e5e5ea, #3a3a3c);
+    --wa-color-neutral-fill-normal: light-dark(
+      rgb(0 0 49.038462 / 0.101961),
+      rgb(253 253 255 / 0.133333)
+    );
     --wa-color-neutral-fill-loud: light-dark(#48484a, #e5e5ea);
-    --wa-color-neutral-border-quiet: light-dark(#e5e5ea, #38383a);
+    --wa-color-neutral-border-quiet: light-dark(
+      rgb(0 0 49.038462 / 0.101961),
+      rgb(253 253 255 / 0.124444)
+    );
     --wa-color-neutral-border-normal: var(--wa-color-surface-border);
-    --wa-color-neutral-border-loud: light-dark(#aeaeb2, #636366);
-    --wa-color-neutral-on-quiet: var(--wa-color-text-quiet);
+    --wa-color-neutral-border-loud: light-dark(
+      rgb(0 0 12.592593 / 0.317647),
+      rgb(249.875 249.875 255 / 0.32)
+    );
+    --wa-color-neutral-on-quiet: light-dark(#626267, #c2c2c6);
     --wa-color-neutral-on-normal: var(--wa-color-text-normal);
     --wa-color-neutral-on-loud: var(--wa-color-surface-default);
 
@@ -106,9 +135,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 +165,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,17 +197,20 @@
     );
     --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-border-radius: var(
+      --kui-layout-rounded-radius,
+      calc(1px + 0.6875rem)
+    );
     --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
-       (and a ~40px single-line control height). */
+       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,
@@ -193,6 +225,18 @@
     --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;
@@ -205,9 +249,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),
@@ -228,6 +279,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);
@@ -275,6 +364,68 @@
     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: var(
+      --kui-wa-sunken-background,
+      var(--kui-sunken-surface, 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: var(
+      --kui-wa-sunken-background,
+      var(--kui-sunken-surface, 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 {
@@ -287,9 +438,78 @@
   /* 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);
+  }
+
+  /* The built-in close control matches a borderless single
+     ToolbarControlGroup button (the close in a toolbar-composed dialog): a
+     40px circle, no border, and the toolbar's neutral hover fill, in place of
+     Web Awesome's 35px rounded square. */
+  :is(wa-dialog, wa-drawer)::part(close-button__base) {
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    border-color: transparent;
+    border-radius: var(--kui-radius-circle);
+    justify-content: center;
+  }
+
+  :is(wa-dialog, wa-drawer)::part(close-button__base):hover {
+    background-color: var(--kui-color-neutral-fill-normal);
+  }
+
+  /* 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;
   }
@@ -317,7 +537,9 @@
     padding-inline: var(--kui-wa-control-inset) !important;
   }
 
-  wa-dropdown-item {
+  /* 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;
   }
 
@@ -325,6 +547,29 @@
     --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. */
@@ -384,6 +629,23 @@
   }
 }
 
+/* Small Web Awesome fields have 14px hosts by default. Raise only the editable
+   shadow part on touch devices so focusing them need not magnify the page;
+   their compact chrome and desktop typography keep their normal sizes. */
+@media (hover: none) and (pointer: coarse) {
+  @layer wa-theme-overrides {
+    :is(wa-input, wa-number-input, wa-time-input):is(
+        [size="xs"],
+        [size="s"],
+        [size="small"]
+      )::part(input),
+    wa-textarea:is([size="xs"], [size="s"], [size="small"])::part(textarea),
+    wa-select:is([size="xs"], [size="s"], [size="small"])::part(display-input) {
+      font-size: max(16px, var(--wa-font-size-m, 16px));
+    }
+  }
+}
+
 @media (prefers-contrast: more) {
   @layer wa-theme-overrides {
     :where(:root),