@kerfjs/ui 4.4.1 → 4.5.0-beta.1

package/dist/styles/toolbar-text.css

@@ -0,0 +1,92 @@
+.kui-toolbar-text {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  height: 2.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  overflow: hidden;
+  box-sizing: border-box;
+  color: var(--kui-color-neutral-on-quiet);
+  font-weight: 650;
+  line-height: 1;
+  align-items: center;
+}
+
+/* The text lives in a block child, not directly in the flex box, so
+   `text-overflow: ellipsis` actually applies (it is a no-op on a flex item). */
+.kui-toolbar-text__text {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.kui-toolbar-text[data-size="xlarge"] {
+  /* Matches the page/panel title: the same responsive clamp so a PanelHeader
+     title reads at the page-title scale without a bespoke override. Height grows
+     to the larger text (the fixed 40px would clip its ascenders). */
+  height: auto;
+  min-height: 2.75rem;
+  color: var(--kui-color-text);
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+  letter-spacing: -0.025em;
+}
+
+.kui-toolbar-text[data-size="large"] {
+  font-size: var(--kui-font-m);
+  letter-spacing: -0.015em;
+}
+
+.kui-toolbar-text[data-size="default"] {
+  font-size: var(--kui-font-s);
+}
+
+.kui-toolbar-text[data-size="small"] {
+  font-family: var(--kui-font-mono);
+  font-size: var(--kui-font-xs);
+}
+
+/* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
+.kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
+  text-overflow: clip;
+}
+
+/* Wrap onto multiple lines. The box grows to fit and switches from the centered
+   single-line row to a top-aligned block with readable leading; a min-height keeps
+   a one-line label at the toolbar row height. */
+.kui-toolbar-text[data-wrap="true"] {
+  align-items: flex-start;
+  height: auto;
+  min-height: 2.5rem;
+}
+
+.kui-toolbar-text[data-size="xlarge"][data-wrap="true"] {
+  min-height: 2.75rem;
+}
+
+.kui-toolbar-text[data-wrap="true"] .kui-toolbar-text__text {
+  white-space: normal;
+  line-height: 1.25;
+}
+
+/* Wrap capped to N lines with an ellipsis at the cut. `-webkit-line-clamp` needs
+   the box display and emits the … itself; the unprefixed `line-clamp` follows for
+   engines that ship it. */
+.kui-toolbar-text[data-wrap="true"][data-max-lines] .kui-toolbar-text__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--kui-toolbar-text-max-lines);
+  line-clamp: var(--kui-toolbar-text-max-lines);
+  overflow: hidden;
+}
+
+/* Wrap capped to N lines without an ellipsis: clip at a max-height instead of
+   line-clamp (which always ellipsizes). */
+.kui-toolbar-text[data-wrap="true"][data-max-lines][data-ellipsis="false"]
+  .kui-toolbar-text__text {
+  display: block;
+  -webkit-line-clamp: none;
+  line-clamp: none;
+  max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
+}

package/dist/styles/toolbar.css

@@ -0,0 +1,97 @@
+.kui-toolbar {
+  display: grid;
+  width: 100%;
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem))
+  );
+  padding: var(--kui-toolbar-gap, 0.5rem);
+  box-sizing: border-box;
+  color: var(--kui-color-text);
+  background: transparent;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+  container: kui-toolbar / inline-size;
+  font-family: var(--kui-font-sans);
+}
+
+.kui-toolbar[data-has-center="false"] {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.kui-toolbar {
+  --_kui-toolbar-divider-top: transparent;
+  --_kui-toolbar-divider-right: transparent;
+  --_kui-toolbar-divider-bottom: transparent;
+  --_kui-toolbar-divider-left: transparent;
+  box-shadow:
+    inset 0 1px var(--_kui-toolbar-divider-top),
+    inset -1px 0 var(--_kui-toolbar-divider-right),
+    inset 0 -1px var(--_kui-toolbar-divider-bottom),
+    inset 1px 0 var(--_kui-toolbar-divider-left);
+}
+
+.kui-toolbar[divider-sides*="t"] {
+  --_kui-toolbar-divider-top: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="r"] {
+  --_kui-toolbar-divider-right: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="b"] {
+  --_kui-toolbar-divider-bottom: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="l"] {
+  --_kui-toolbar-divider-left: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar__leading,
+.kui-toolbar__center,
+.kui-toolbar__trailing {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+}
+
+/* Pin each zone to its column so a display:none (empty) leading or center zone
+   doesn't let the trailing zone auto-place into the first column — which left an
+   extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing
+   zone anchors to the last column via -2/-1, so it stays flush right for both
+   the 3- and 2-column layouts, and still stacks under the leading zone when a
+   consumer collapses the toolbar to a single column. */
+.kui-toolbar__leading {
+  grid-column: 1;
+  overflow: hidden;
+}
+
+.kui-toolbar__center {
+  justify-content: center;
+  grid-column: 2;
+}
+
+.kui-toolbar__trailing {
+  justify-content: flex-end;
+  grid-column: -2 / -1;
+}
+
+.kui-toolbar[data-has-center="false"] .kui-toolbar__center,
+.kui-toolbar__leading:empty,
+.kui-toolbar__trailing:empty {
+  display: none;
+}

package/dist/styles/value-table.css

@@ -0,0 +1,75 @@
+.kui-value-table {
+  --kui-value-table-background: var(--kui-color-surface-lowered);
+  --kui-value-table-border: var(--kui-color-border);
+  --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
+  display: grid;
+  margin-block: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  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);
+}
+.kui-value-table__row {
+  --_kui-value-table-inline-padding: var(
+    --kui-layout-item-padding,
+    0.5rem
+  );
+  --_kui-value-table-separator-start: var(--_kui-value-table-inline-padding);
+  position: relative;
+  display: grid;
+  min-height: 2.55rem;
+  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);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__row[data-has-icon="true"] {
+  --_kui-value-table-separator-start: calc(
+    var(--_kui-value-table-inline-padding) + var(--_kui-value-table-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+.kui-value-table__row + .kui-value-table__row::before {
+  position: absolute;
+  top: 0;
+  right: var(--_kui-value-table-inline-padding);
+  left: var(--_kui-value-table-separator-start);
+  border-top: 1px solid var(--kui-value-table-border);
+  content: "";
+}
+.kui-value-table__row dt {
+  display: flex;
+  min-width: 0;
+  color: var(--kui-color-text-quiet);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__icon {
+  display: grid;
+  width: var(--_kui-value-table-icon-size);
+  height: var(--_kui-value-table-icon-size);
+  flex: none;
+  place-items: center;
+}
+.kui-value-table__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.kui-value-table__label {
+  min-width: 0;
+}
+.kui-value-table__row dd {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kui-color-text);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kui-space-2xs);
+  font-weight: var(--kui-font-weight-semibold);
+  text-align: end;
+}

package/dist/styles/webawesome.css

@@ -0,0 +1,399 @@
+/*
+ * Kerf's optional Web Awesome theme.
+ *
+ * Import this one entry before rendering Web Awesome components. It includes
+ * Web Awesome's native/base theme and then applies the same semantic palette
+ * used by Hot Sheet 2. Component JavaScript remains independently importable
+ * and tree-shakeable.
+ */
+@import "@awesome.me/webawesome/dist/styles/webawesome.css";
+
+@layer wa-theme-overrides {
+  :where(:root),
+  .wa-theme-default,
+  .wa-light,
+  .wa-dark .wa-invert,
+  .wa-light .wa-theme-default,
+  .wa-dark .wa-theme-default.wa-invert,
+  .wa-dark .wa-theme-default .wa-invert,
+  .wa-dark,
+  .wa-invert,
+  .wa-dark .wa-theme-default,
+  .wa-light .wa-theme-default.wa-invert,
+  .wa-light .wa-theme-default .wa-invert {
+    color: var(--wa-color-text-normal);
+
+    /* 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);
+
+    --wa-color-text-normal: light-dark(#1d1d1f, #f5f5f7);
+    --wa-color-text-quiet: light-dark(#6e6e73, #aeaeb2);
+    --wa-color-text-link: var(--wa-color-brand-on-quiet);
+
+    --wa-color-overlay-modal: light-dark(
+      rgb(29 29 31 / 0.34),
+      rgb(0 0 0 / 0.6)
+    );
+    --wa-color-overlay-inline: color-mix(
+      in srgb,
+      var(--wa-color-neutral-fill-normal) 25%,
+      transparent
+    );
+    --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);
+    --wa-color-brand-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 8%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 16%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 35%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-brand-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-brand-fill-loud) 58%,
+      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);
+    --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-loud: light-dark(#48484a, #e5e5ea);
+    --wa-color-neutral-border-quiet: light-dark(#e5e5ea, #38383a);
+    --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-on-normal: var(--wa-color-text-normal);
+    --wa-color-neutral-on-loud: var(--wa-color-surface-default);
+
+    --wa-color-success-fill-loud: #34c759;
+    --wa-color-success-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 14%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 72%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 32%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-success-fill-loud) 50%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-success-border-loud: color-mix(
+      in srgb,
+      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-normal: light-dark(#006d28, #8cea9f);
+    --wa-color-success-on-loud: #fff;
+
+    --wa-color-warning-fill-loud: #ffcc00;
+    --wa-color-warning-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 9%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 22%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 35%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-warning-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-warning-fill-loud) 58%,
+      var(--wa-color-neutral-on-normal)
+    );
+    --wa-color-warning-border-loud: color-mix(
+      in srgb,
+      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-normal: light-dark(#5f3f00, #ffe27a);
+    --wa-color-warning-on-loud: #1d1d1f;
+
+    --wa-color-danger-fill-loud: #ff383c;
+    --wa-color-danger-fill-quiet: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 7%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-fill-normal: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 14%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-quiet: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 32%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-normal: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 50%,
+      var(--wa-color-surface-default)
+    );
+    --wa-color-danger-border-loud: color-mix(
+      in srgb,
+      var(--wa-color-danger-fill-loud) 78%,
+      var(--wa-color-neutral-on-normal)
+    );
+    --wa-color-danger-on-quiet: light-dark(#c20b20, #ff696c);
+    --wa-color-danger-on-normal: light-dark(#8e0717, #ff8a8c);
+    --wa-color-danger-on-loud: #fff;
+
+    /* 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
+       (and a ~40px single-line control height). */
+    --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;
+    --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);
+  }
+
+  :where(:root),
+  .wa-theme-default,
+  .wa-light,
+  .wa-dark .wa-invert,
+  .wa-light .wa-theme-default,
+  .wa-dark .wa-theme-default.wa-invert,
+  .wa-dark .wa-theme-default .wa-invert {
+    color-scheme: light;
+  }
+
+  .wa-dark,
+  .wa-invert,
+  .wa-dark .wa-theme-default,
+  .wa-light .wa-theme-default.wa-invert,
+  .wa-light .wa-theme-default .wa-invert {
+    color-scheme: dark;
+  }
+
+  wa-carousel::part(navigation-button) {
+    box-sizing: border-box;
+    width: var(--kui-wa-carousel-control-size);
+    height: var(--kui-wa-carousel-control-size);
+    padding: calc(
+      (var(--kui-wa-carousel-control-size) - var(--kui-wa-carousel-icon-size)) /
+        2
+    );
+    font-size: var(--kui-wa-carousel-icon-size);
+  }
+
+  wa-carousel::part(pagination) {
+    gap: 0;
+  }
+
+  wa-carousel::part(pagination-item) {
+    width: var(--kui-wa-carousel-dot-hit-size);
+    height: var(--kui-wa-carousel-dot-hit-size);
+    color: var(--wa-color-neutral-fill-normal);
+    background-color: transparent;
+    background-image: radial-gradient(
+      circle,
+      currentcolor 0 calc(var(--kui-wa-carousel-dot-size) / 2),
+      transparent calc(var(--kui-wa-carousel-dot-size) / 2 + 0.5px)
+    );
+    transform: none;
+  }
+
+  wa-carousel::part(pagination-item-active) {
+    color: var(--wa-form-control-activated-color);
+    background-color: transparent;
+    transform: none;
+  }
+
+  wa-accordion-item::part(icon),
+  wa-details::part(icon),
+  wa-breadcrumb-item::part(separator) {
+    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);
+  }
+
+  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) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  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;
+  }
+
+  wa-dropdown-item {
+    padding-inline: var(--kui-wa-control-inset) !important;
+  }
+
+  wa-popover {
+    --arrow-size: var(--kui-wa-popover-arrow-size);
+  }
+
+  /* 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) {
+  @layer wa-theme-overrides {
+    :where(:root),
+    .wa-theme-default,
+    .wa-light,
+    .wa-dark,
+    .wa-invert {
+      --wa-color-surface-border: currentColor;
+      --wa-color-neutral-border-normal: currentColor;
+      --wa-focus-ring: 3px solid currentColor;
+    }
+  }
+}