@kerfjs/ui 4.4.1

package/src/foundation.css

@@ -0,0 +1,106 @@
+:root {
+  color-scheme: light dark;
+
+  /* Web Awesome-compatible typography and geometry with stable standalone fallbacks. */
+  --kui-font-sans: var(--wa-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  --kui-font-mono: var(--wa-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace);
+  --kui-font-2xs: var(--wa-font-size-2xs, 11px);
+  --kui-font-xs: var(--wa-font-size-xs, 12px);
+  --kui-font-s: var(--wa-font-size-s, 14px);
+  --kui-font-m: var(--wa-font-size-m, 16px);
+  --kui-font-l: var(--wa-font-size-l, 20px);
+  --kui-font-2xl: var(--wa-font-size-2xl, 32px);
+  --kui-font-weight-semibold: var(--wa-font-weight-semibold, 650);
+  --kui-space-2xs: var(--wa-space-2xs, .25rem);
+  --kui-space-xs: var(--wa-space-xs, .5rem);
+  --kui-space-s: var(--wa-space-s, .75rem);
+  --kui-space-m: var(--wa-space-m, 1rem);
+  --kui-space-l: var(--wa-space-l, 1.5rem);
+  --kui-space-xl: var(--wa-space-xl, 2rem);
+  --kui-radius-s: var(--wa-border-radius-s, .1875rem);
+  --kui-radius-m: var(--wa-border-radius-m, .375rem);
+  --kui-radius-l: var(--wa-border-radius-l, .75rem);
+  --kui-radius-circle: var(--wa-border-radius-circle, 50%);
+  --kui-radius-pill: var(--wa-border-radius-pill, 999px);
+  --kui-disclosure-icon-scale: .5;
+
+  /* macOS Tahoe light semantics used by Hot Sheet 2, with a compatible dark extension. */
+  --kui-color-surface: var(--wa-color-surface-default, light-dark(#fff, #1c1c1e));
+  --kui-color-surface-raised: var(--wa-color-surface-raised, var(--kui-color-surface));
+  --kui-color-surface-lowered: var(--wa-color-surface-lowered, light-dark(#f2f2f7, #111113));
+  --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
+  --kui-color-text-quiet: var(--wa-color-text-quiet, light-dark(#6e6e73, #aeaeb2));
+  --kui-color-text-link: var(--wa-color-text-link, var(--kui-color-brand-fill-loud));
+
+  --kui-color-neutral-fill-quiet: var(--wa-color-neutral-fill-quiet, var(--kui-color-surface-lowered));
+  --kui-color-neutral-fill-normal: var(--wa-color-neutral-fill-normal, light-dark(#e5e5ea, #3a3a3c));
+  --kui-color-neutral-fill-loud: var(--wa-color-neutral-fill-loud, light-dark(#48484a, #e5e5ea));
+  --kui-color-neutral-border-quiet: var(--wa-color-neutral-border-quiet, var(--kui-color-neutral-fill-normal));
+  --kui-color-neutral-border-normal: var(--wa-color-neutral-border-normal, light-dark(#d1d1d6, #48484a));
+  --kui-color-neutral-border-loud: var(--wa-color-neutral-border-loud, light-dark(#aeaeb2, #636366));
+  --kui-color-neutral-on-quiet: var(--wa-color-neutral-on-quiet, var(--kui-color-text-quiet));
+  --kui-color-neutral-on-normal: var(--wa-color-neutral-on-normal, var(--kui-color-text));
+  --kui-color-neutral-on-loud: var(--wa-color-neutral-on-loud, var(--kui-color-surface));
+
+  --kui-color-brand-fill-loud: var(--wa-color-brand-fill-loud, light-dark(#0088ff, #64d2ff));
+  --kui-color-brand-fill-quiet: var(--wa-color-brand-fill-quiet, color-mix(in srgb, var(--kui-color-brand-fill-loud) 8%, var(--kui-color-surface)));
+  --kui-color-brand-fill-normal: var(--wa-color-brand-fill-normal, color-mix(in srgb, var(--kui-color-brand-fill-loud) 16%, var(--kui-color-surface)));
+  --kui-color-brand-border-quiet: var(--wa-color-brand-border-quiet, color-mix(in srgb, var(--kui-color-brand-fill-loud) 35%, var(--kui-color-surface)));
+  --kui-color-brand-border-normal: var(--wa-color-brand-border-normal, color-mix(in srgb, var(--kui-color-brand-fill-loud) 58%, var(--kui-color-surface)));
+  --kui-color-brand-border-loud: var(--wa-color-brand-border-loud, var(--kui-color-brand-fill-loud));
+  --kui-color-brand-on-quiet: var(--wa-color-brand-on-quiet, light-dark(#1e6ef4, #8acbff));
+  --kui-color-brand-on-normal: var(--wa-color-brand-on-normal, var(--kui-color-brand-on-quiet));
+  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
+
+  --kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
+  --kui-color-success-fill-quiet: var(--wa-color-success-fill-quiet, color-mix(in srgb, var(--kui-color-success-fill-loud) 14%, var(--kui-color-surface)));
+  --kui-color-success-fill-normal: var(--wa-color-success-fill-normal, color-mix(in srgb, var(--kui-color-success-fill-loud) 72%, var(--kui-color-surface)));
+  --kui-color-success-border-quiet: var(--wa-color-success-border-quiet, color-mix(in srgb, var(--kui-color-success-fill-loud) 32%, var(--kui-color-surface)));
+  --kui-color-success-border-normal: var(--wa-color-success-border-normal, color-mix(in srgb, var(--kui-color-success-fill-loud) 50%, var(--kui-color-surface)));
+  --kui-color-success-border-loud: var(--wa-color-success-border-loud, color-mix(in srgb, var(--kui-color-success-fill-loud) 78%, var(--kui-color-neutral-on-normal)));
+  --kui-color-success-on-quiet: var(--wa-color-success-on-quiet, #008932);
+  --kui-color-success-on-normal: var(--wa-color-success-on-normal, #006d28);
+  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #fff);
+
+  --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
+  --kui-color-warning-fill-quiet: var(--wa-color-warning-fill-quiet, color-mix(in srgb, var(--kui-color-warning-fill-loud) 9%, var(--kui-color-surface)));
+  --kui-color-warning-fill-normal: var(--wa-color-warning-fill-normal, color-mix(in srgb, var(--kui-color-warning-fill-loud) 22%, var(--kui-color-surface)));
+  --kui-color-warning-border-quiet: var(--wa-color-warning-border-quiet, color-mix(in srgb, var(--kui-color-warning-fill-loud) 35%, var(--kui-color-surface)));
+  --kui-color-warning-border-normal: var(--wa-color-warning-border-normal, color-mix(in srgb, var(--kui-color-warning-fill-loud) 58%, var(--kui-color-neutral-on-normal)));
+  --kui-color-warning-border-loud: var(--wa-color-warning-border-loud, color-mix(in srgb, var(--kui-color-warning-fill-loud) 78%, var(--kui-color-neutral-on-normal)));
+  --kui-color-warning-on-quiet: var(--wa-color-warning-on-quiet, #a16a00);
+  --kui-color-warning-on-normal: var(--wa-color-warning-on-normal, #5f3f00);
+  --kui-color-warning-on-loud: var(--wa-color-warning-on-loud, #1d1d1f);
+
+  --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
+  --kui-color-danger-fill-quiet: var(--wa-color-danger-fill-quiet, color-mix(in srgb, var(--kui-color-danger-fill-loud) 7%, var(--kui-color-surface)));
+  --kui-color-danger-fill-normal: var(--wa-color-danger-fill-normal, color-mix(in srgb, var(--kui-color-danger-fill-loud) 14%, var(--kui-color-surface)));
+  --kui-color-danger-border-quiet: var(--wa-color-danger-border-quiet, color-mix(in srgb, var(--kui-color-danger-fill-loud) 32%, var(--kui-color-surface)));
+  --kui-color-danger-border-normal: var(--wa-color-danger-border-normal, color-mix(in srgb, var(--kui-color-danger-fill-loud) 50%, var(--kui-color-surface)));
+  --kui-color-danger-border-loud: var(--wa-color-danger-border-loud, color-mix(in srgb, var(--kui-color-danger-fill-loud) 78%, var(--kui-color-neutral-on-normal)));
+  --kui-color-danger-on-quiet: var(--wa-color-danger-on-quiet, #c20b20);
+  --kui-color-danger-on-normal: var(--wa-color-danger-on-normal, #8e0717);
+  --kui-color-danger-on-loud: var(--wa-color-danger-on-loud, #fff);
+
+  /* Compatibility aliases retained for existing @kerfjs/ui consumers. */
+  --kui-color-border: var(--wa-color-surface-border, var(--kui-color-neutral-border-normal));
+  --kui-color-border-quiet: var(--kui-color-neutral-border-quiet);
+  --kui-color-accent: var(--kui-color-brand-fill-normal);
+  --kui-color-accent-text: var(--kui-color-brand-on-quiet);
+  --kui-color-success: var(--kui-color-success-fill-quiet);
+  --kui-color-success-text: var(--kui-color-success-on-quiet);
+  --kui-color-warning: var(--kui-color-warning-fill-quiet);
+  --kui-color-warning-text: var(--kui-color-warning-on-quiet);
+  --kui-color-danger: var(--kui-color-danger-fill-quiet);
+  --kui-color-danger-text: var(--kui-color-danger-on-quiet);
+  --kui-focus-ring: var(--wa-focus-ring, 3px solid var(--wa-color-focus, var(--kui-color-brand-fill-loud)));
+  --kui-shadow-s: var(--wa-shadow-s, 0 1px 3px rgb(0 0 0 / .14));
+  --kui-shadow-l: var(--wa-shadow-l, 0 .75rem 2rem rgb(0 0 0 / .09));
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --kui-color-border: currentColor;
+    --kui-focus-ring: 3px solid currentColor;
+  }
+}

package/src/loading-spinner.css

@@ -0,0 +1,4 @@
+.kui-loading-spinner { display: block; width: 1em; height: 1em; overflow: visible; fill: currentColor; }
+.kui-loading-spinner path { transform-origin: 12px 12px; animation: kui-loading-spinner-rotate .85s linear infinite; }
+@keyframes kui-loading-spinner-rotate { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .kui-loading-spinner path { animation: none; } }

package/src/lucide-icon.css

@@ -0,0 +1 @@
+[data-lucide] { display: block; width: 1em; height: 1em; flex: none; }

package/src/menu-header.css

@@ -0,0 +1,13 @@
+.kui-menu-header { --kui-menu-header-color: var(--kui-color-neutral-on-quiet); --kui-menu-header-hover-background: var(--kui-color-neutral-border-quiet); display: flex; width: 100%; min-height: 1.8rem; padding: .2rem .55rem; border: 0; box-sizing: border-box; color: var(--kui-menu-header-color); background: transparent; align-items: center; justify-content: space-between; font: inherit; }
+.kui-menu-header h2, .kui-menu-header > span { margin: 0; font-size: var(--kui-font-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.kui-menu-header button, .kui-menu-header--toggle { cursor: pointer; }
+.kui-menu-header button { display: grid; width: 1.95rem; height: 1.65rem; padding: 0; border: 0; border-radius: .35rem; color: inherit; background: transparent; place-items: center; }
+.kui-menu-header:not(.kui-menu-header--toggle) button { margin-inline-end: -.55rem; }
+.kui-menu-header button:hover, .kui-menu-header--toggle:hover { background: var(--kui-menu-header-hover-background); }
+.kui-menu-header button:focus-visible, .kui-menu-header--toggle:focus-visible { outline: var(--kui-focus-ring); outline-offset: 1px; }
+.kui-menu-header button:disabled { cursor: not-allowed; opacity: .48; }
+.kui-menu-header button:disabled:hover { background: transparent; }
+.kui-menu-header svg { width: .85rem; height: .85rem; flex: none; }
+.kui-menu-header--toggle svg { transition: transform .18s ease; }
+.kui-menu-header--toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+@media (prefers-reduced-motion: reduce) { .kui-menu-header--toggle svg { transition: none; } }

package/src/menu-item.css

@@ -0,0 +1,12 @@
+.kui-menu-item { --kui-menu-item-color: var(--kui-color-neutral-on-normal); --kui-menu-item-hover-background: var(--kui-color-neutral-fill-quiet); --kui-menu-item-selected-color: var(--kui-color-brand-on-quiet); --kui-menu-item-selected-background: var(--kui-color-brand-fill-normal); display: grid; width: 100%; min-height: 2.1rem; padding: .35rem .55rem; border: 0; border-radius: .5rem; color: var(--kui-menu-item-color); background: transparent; cursor: pointer; grid-template-columns: 1.125rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--kui-space-xs); font: inherit; text-align: start; }
+.kui-menu-item:hover { background: var(--kui-menu-item-hover-background); }
+.kui-menu-item:disabled { color: var(--kui-color-neutral-on-quiet); cursor: not-allowed; opacity: .58; }
+.kui-menu-item[aria-current="page"], .kui-menu-item[aria-pressed="true"] { color: var(--kui-menu-item-selected-color); background: var(--kui-menu-item-selected-background); font-weight: 650; }
+.kui-menu-item:focus-visible { outline: var(--kui-focus-ring); outline-offset: 1px; }
+.kui-menu-item__icon { display: grid; width: 1.125rem; height: 1.125rem; color: currentColor; place-items: center; }
+.kui-menu-item__icon svg { display: block; width: 1rem; height: 1rem; }
+.kui-menu-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.kui-menu-item[data-multiline="true"] { height: fit-content; white-space: normal; }
+.kui-menu-item[data-multiline="true"] .kui-menu-item__label { overflow: visible; white-space: normal; }
+.kui-menu-item__trailing { display: inline-flex; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--kui-space-xs); }
+.kui-menu-item__trailing > svg { width: .85rem; height: .85rem; }

package/src/page-header.css

@@ -0,0 +1,3 @@
+.kui-page-header { --kui-page-header-background: var(--kui-color-surface); --kui-page-header-border: var(--kui-color-border); --kui-page-header-foreground: var(--kui-color-text); display: flex; min-height: 4.15rem; padding: .75rem 1rem; border-bottom: 1px solid var(--kui-page-header-border); color: var(--kui-page-header-foreground); background: var(--kui-page-header-background); align-items: center; justify-content: space-between; gap: var(--kui-space-m); }
+.kui-page-header h1 { margin: 0; color: inherit; font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl)); letter-spacing: -.025em; }
+.kui-page-header__action { flex: none; }

package/src/resizable-region.css

@@ -0,0 +1,19 @@
+.kui-resizable-region { --kui-resizable-region-separator-color: var(--kui-color-border); --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet); --kui-resizable-region-handle-active-color: var(--kui-color-text-link); position: relative; display: flex; min-width: 0; min-height: 0; }
+.kui-resizable-region[data-axis="horizontal"] { width: var(--kui-resizable-region-size); height: 100%; flex: 0 0 var(--kui-resizable-region-size); }
+.kui-resizable-region[data-axis="vertical"] { width: 100%; height: var(--kui-resizable-region-size); flex: 0 0 var(--kui-resizable-region-size); flex-direction: column; }
+.kui-resizable-region[data-collapsed="true"] { overflow: visible; }
+.kui-resizable-region__content { width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
+.kui-resizable-region__handle { position: absolute; z-index: 3; display: grid; min-width: 20px; min-height: 20px; color: var(--kui-resizable-region-handle-color); place-items: center; touch-action: none; }
+.kui-resizable-region__handle::before { position: absolute; background: var(--kui-resizable-region-separator-color); content: ''; pointer-events: none; }
+.kui-resizable-region[data-axis="horizontal"] .kui-resizable-region__handle { top: 0; bottom: 0; width: 20px; cursor: col-resize; }
+.kui-resizable-region[data-axis="horizontal"] .kui-resizable-region__handle::before { top: 0; bottom: 0; width: 1px; }
+.kui-resizable-region[data-axis="horizontal"][data-edge="end"] .kui-resizable-region__handle { right: -10px; }
+.kui-resizable-region[data-axis="horizontal"][data-edge="start"] .kui-resizable-region__handle { left: -10px; }
+.kui-resizable-region[data-axis="vertical"] .kui-resizable-region__handle { right: 0; left: 0; height: 20px; cursor: row-resize; }
+.kui-resizable-region[data-axis="vertical"] .kui-resizable-region__handle::before { right: 0; left: 0; height: 1px; }
+.kui-resizable-region[data-axis="vertical"][data-edge="end"] .kui-resizable-region__handle { bottom: -10px; }
+.kui-resizable-region[data-axis="vertical"][data-edge="start"] .kui-resizable-region__handle { top: -10px; }
+.kui-resizable-region__handle:hover, .kui-resizable-region__handle:focus-visible { color: var(--kui-resizable-region-handle-active-color); }
+.kui-resizable-region__handle:focus-visible { border-radius: var(--kui-radius-s); outline: var(--kui-focus-ring); outline-offset: -2px; }
+.kui-resizable-region__handle svg { position: relative; width: .9rem; height: .9rem; opacity: 0; }
+.kui-resizable-region__handle:hover svg, .kui-resizable-region__handle:focus-visible svg { opacity: 1; }

package/src/segmented-control.css

@@ -0,0 +1,138 @@
+.kui-segmented-control {
+  --kui-segmented-background: var(--kui-color-neutral-fill-normal);
+  --kui-segmented-border: var(--kui-color-neutral-border-normal);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-segmented-hover-background: var(--kui-color-surface);
+  --kui-segmented-selected-background: var(--kui-color-surface);
+  --kui-segmented-selected-foreground: var(--kui-color-brand-on-quiet);
+  --kui-segmented-selected-border: transparent;
+  --kui-segmented-selected-shadow: var(--kui-shadow-s);
+  --kui-segmented-radius: .55rem;
+  --kui-segmented-item-radius: .4rem;
+
+  display: inline-flex;
+  max-width: 100%;
+  padding: .2rem;
+  overflow-x: auto;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-segmented-radius);
+  color: var(--kui-segmented-foreground);
+  background: var(--kui-segmented-background);
+  align-items: stretch;
+  gap: 0;
+  scrollbar-width: none;
+}
+
+.kui-segmented-control::-webkit-scrollbar {
+  display: none;
+}
+
+.kui-segmented-control[data-appearance="outlined"] {
+  --kui-segmented-background: var(--kui-color-surface);
+  border-color: var(--kui-segmented-border);
+}
+
+.kui-segmented-control[data-appearance="toolbar"] {
+  --kui-segmented-background: transparent;
+  --kui-segmented-foreground: var(--kui-toolbar-control-color, var(--kui-color-neutral-on-quiet));
+  --kui-segmented-hover-background: var(--kui-toolbar-control-hover-background, var(--kui-color-surface));
+  --kui-segmented-selected-background: var(--kui-toolbar-control-selected-background, var(--kui-color-surface));
+  --kui-segmented-selected-foreground: var(--kui-toolbar-control-selected-color, var(--kui-color-brand-on-quiet));
+  --kui-segmented-selected-shadow: var(--kui-toolbar-control-selected-shadow, var(--kui-shadow-s));
+  padding: 0;
+  overflow: visible;
+  gap: .15rem;
+}
+
+.kui-segmented-control[data-shape="pill"] {
+  --kui-segmented-radius: var(--kui-radius-pill);
+  --kui-segmented-item-radius: var(--kui-radius-pill);
+}
+
+.kui-segmented-control[data-layout="equal"] {
+  display: grid;
+  width: 100%;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+}
+
+.kui-segmented-control__item {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  min-width: 2.25rem;
+  min-height: 2.25rem;
+  padding: .45rem .7rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-segmented-item-radius);
+  color: inherit;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  gap: .35rem;
+  font: inherit;
+  font-size: var(--kui-font-xs);
+  font-weight: var(--kui-font-weight-semibold);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.kui-segmented-control[data-size="small"] .kui-segmented-control__item {
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: .35rem;
+  font-size: var(--kui-font-2xs);
+}
+
+.kui-segmented-control[data-layout="equal"] .kui-segmented-control__item {
+  width: 100%;
+  min-width: 0;
+}
+
+.kui-segmented-control__item:hover:not(:disabled) {
+  background: var(--kui-segmented-hover-background);
+}
+
+.kui-segmented-control__item[data-selected="true"],
+.kui-segmented-control__item[data-selected="true"]:hover:not(:disabled) {
+  border-color: var(--kui-segmented-selected-border);
+  color: var(--kui-segmented-selected-foreground);
+  background: var(--kui-segmented-selected-background);
+  box-shadow: var(--kui-segmented-selected-shadow);
+}
+
+.kui-segmented-control__item:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-segmented-control__item:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+
+.kui-segmented-control__item svg {
+  width: .9rem;
+  height: .9rem;
+  flex: 0 0 auto;
+}
+
+.kui-segmented-control[data-size="small"] .kui-segmented-control__item svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+@media (forced-colors: active) {
+  .kui-segmented-control {
+    border-color: ButtonBorder;
+  }
+
+  .kui-segmented-control__item[data-selected="true"] {
+    border-color: Highlight;
+    color: HighlightText;
+    background: Highlight;
+  }
+}

package/src/select.css

@@ -0,0 +1,18 @@
+.kui-select::part(combobox) { min-height: 2.5rem; padding-inline: .55rem .45rem; gap: 0; }
+.kui-select::part(display-input) { min-width: 0; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; }
+.kui-select::part(start), .kui-select::part(end), .kui-select::part(expand-icon) { margin: 0; }
+.kui-select::part(expand-icon) { transform: scale(var(--kui-disclosure-icon-scale, .5)); }
+.kui-select::part(listbox) { width: max-content; min-width: 100%; max-width: min(20rem, calc(100vw - 1.25rem)); }
+.kui-select--fit-menu::part(listbox) { width: 100%; }
+.kui-select wa-option::part(base) { align-items: center; }
+.kui-select wa-option { --wa-form-control-activated-color: var(--kui-color-brand-fill-normal); --current-text-color: var(--kui-color-brand-on-quiet); }
+.kui-select wa-option::part(start) { align-self: center; margin-top: 0; }
+.kui-select wa-option::part(label) { min-width: 0; padding-block: .35rem; line-height: 1.25; overflow-wrap: normal; word-break: normal; white-space: normal; }
+.kui-select__icon { display: inline-flex; width: 1rem; height: 1rem; flex: none; }
+.kui-select__icon[slot="start"] { margin-inline-end: .5rem !important; }
+.kui-select__icon svg { display: block; width: 100%; height: 100%; }
+.kui-select__custom-selected { display: inline-flex; min-width: 0; align-items: center; }
+.kui-select--custom-selected::part(display-input) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
+.kui-select__group { display: grid; padding: .25rem 0; }
+.kui-select__group--separated { margin-block-start: .25rem; padding-block-start: .5rem; border-block-start: 1px solid var(--kui-color-neutral-border-quiet); }
+.kui-select__group-title { padding: .2rem .75rem .3rem; color: var(--kui-color-neutral-on-quiet); font-size: var(--kui-font-2xs); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }

package/src/state-banner.css

@@ -0,0 +1,31 @@
+.kui-state-banner {
+  --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-neutral-background, var(--kui-color-neutral-fill-quiet)));
+  --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-neutral-border, var(--kui-color-neutral-border-normal)));
+  --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-neutral-foreground, var(--kui-color-neutral-on-normal)));
+  --_kui-state-banner-detail: var(--kui-state-banner-detail, currentColor);
+  --_kui-state-banner-action-background: var(--kui-state-banner-action-background, color-mix(in srgb, var(--kui-color-surface) 52%, transparent));
+  --_kui-state-banner-action-hover-background: var(--kui-state-banner-action-hover-background, var(--kui-color-surface));
+  display: grid;
+  min-height: 2.6rem;
+  padding: .45rem .75rem;
+  border: 1px solid var(--_kui-state-banner-border);
+  color: var(--_kui-state-banner-foreground);
+  background: var(--_kui-state-banner-background);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: .6rem;
+}
+.kui-state-banner[data-tone="info"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-info-background, var(--kui-color-brand-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-info-border, var(--kui-color-brand-border-quiet))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-quiet))); }
+.kui-state-banner[data-tone="success"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-success-background, var(--kui-color-success-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-success-border, var(--kui-color-success-border-normal))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-success-foreground, var(--kui-color-success-on-quiet))); }
+.kui-state-banner[data-tone="warning"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-warning-background, var(--kui-color-warning-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-warning-border, var(--kui-color-warning-border-normal))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-warning-foreground, var(--kui-color-warning-on-quiet))); }
+.kui-state-banner[data-tone="danger"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-danger-background, var(--kui-color-danger-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-danger-border, var(--kui-color-danger-border-quiet))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-quiet))); }
+.kui-state-banner__icon { display: grid; place-items: center; }
+.kui-state-banner__icon svg { width: 1rem; height: 1rem; }
+.kui-state-banner__copy { display: flex; min-width: 0; align-items: baseline; gap: var(--kui-space-xs); }
+.kui-state-banner__copy strong { font-size: var(--kui-font-xs); }
+.kui-state-banner__copy span { overflow: hidden; color: var(--_kui-state-banner-detail); font-size: var(--kui-font-2xs); opacity: .78; text-overflow: ellipsis; white-space: nowrap; }
+.kui-state-banner__action { justify-self: end; }
+.kui-state-banner__action button { min-height: 1.8rem; padding: 0 .7rem; border: 1px solid currentColor; border-radius: var(--kui-radius-pill); color: inherit; background: var(--_kui-state-banner-action-background); cursor: pointer; font: inherit; font-size: var(--kui-font-2xs); font-weight: 650; }
+.kui-state-banner__action button:hover { background: var(--_kui-state-banner-action-hover-background); }
+.kui-state-banner__action button:focus-visible { outline: 2px solid var(--kui-color-text-link); outline-offset: 2px; }
+@media (max-width: 36rem) { .kui-state-banner__copy { display: grid; gap: .05rem; } }

package/src/styles.css

@@ -0,0 +1,18 @@
+@import './foundation.css';
+@import './lucide-icon.css';
+@import './toolbar.css';
+@import './toolbar-control-group.css';
+@import './toolbar-text.css';
+@import './menu-item.css';
+@import './menu-header.css';
+@import './resizable-region.css';
+@import './app-tab.css';
+@import './tab-bar.css';
+@import './page-header.css';
+@import './loading-spinner.css';
+@import './select.css';
+@import './segmented-control.css';
+@import './state-banner.css';
+@import './empty-state.css';
+@import './dialog-header.css';
+@import './value-table.css';

package/src/tab-bar.css

@@ -0,0 +1,4 @@
+.kui-tab-bar { --kui-tab-bar-background: var(--kui-color-surface-lowered); --kui-tab-bar-border: var(--kui-color-border); display: flex; min-width: 0; width: 100%; height: 3.25rem; padding: .35rem .45rem; box-sizing: border-box; border-bottom: 1px solid var(--kui-tab-bar-border); background: var(--kui-tab-bar-background); align-items: center; gap: .35rem; }
+.kui-tab-bar__tabs { display: flex; min-width: 0; height: 100%; margin: calc(var(--kui-space-2xs) * -1); padding: var(--kui-space-2xs); overflow-x: auto; scrollbar-width: none; align-items: center; flex: 1 1 auto; gap: .2rem; overscroll-behavior-inline: contain; }
+.kui-tab-bar__tabs::-webkit-scrollbar { display: none; }
+.kui-tab-bar__leading, .kui-tab-bar__trailing { display: flex; height: 100%; align-items: center; flex: none; }

package/src/toolbar-control-group.css

@@ -0,0 +1,25 @@
+.kui-toolbar-control-group { --kui-toolbar-control-background: var(--kui-color-neutral-fill-normal); --kui-toolbar-control-border: var(--kui-color-neutral-border-normal); --kui-toolbar-control-color: var(--kui-color-neutral-on-quiet); --kui-toolbar-control-hover-background: var(--kui-color-surface); --kui-toolbar-control-selected-background: var(--kui-color-surface); --kui-toolbar-control-selected-color: var(--kui-color-brand-on-quiet); --kui-toolbar-control-selected-shadow: var(--kui-shadow-s); --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud); --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud); --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud); display: inline-flex; height: 2.525rem; padding: .2rem; box-sizing: border-box; border: 1px solid var(--kui-toolbar-control-border); border-radius: var(--kui-radius-pill); color: var(--kui-toolbar-control-color); background: var(--kui-toolbar-control-background); align-items: center; flex: 0 0 auto; gap: .15rem; }
+.kui-toolbar-control-group[data-tone="dark"] { --kui-toolbar-control-background: color-mix(in srgb, var(--kui-color-neutral-fill-loud) 72%, transparent); --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536); --kui-toolbar-control-color: var(--kui-color-neutral-on-loud); --kui-toolbar-control-hover-background: color-mix(in srgb, var(--kui-color-surface) 28%, transparent); }
+.kui-toolbar-control-group[data-appearance="borderless"] { border-color: transparent; background: transparent; }
+.kui-toolbar-control-group > button { border: 0; }
+.kui-toolbar-control-group > wa-button { min-width: 2rem; height: 2rem; }
+.kui-toolbar-control-group wa-button { display: inline-flex; line-height: 0; align-items: center; justify-content: center; }
+.kui-toolbar-control-group wa-button > svg { display: block; width: 1rem; height: 1rem; }
+.kui-toolbar-control-group[data-single="true"] > wa-dropdown { width: 3rem; min-width: 3rem; height: 2rem; }
+.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button { width: 3rem; height: 2rem; }
+.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button::part(base) { width: 3rem; height: 2rem; }
+.kui-toolbar-control-group wa-button::part(base) { border: 0; }
+.kui-toolbar-control-group[data-single="true"]:has(> :is(button, wa-button, wa-dropdown)):hover { background: var(--kui-toolbar-control-hover-background); }
+.kui-toolbar-control-group[data-single="true"] wa-button { --wa-color-fill-quiet: transparent; }
+.kui-toolbar-control-group[data-single="false"] wa-button { width: 2rem; height: 2rem; border-radius: var(--kui-radius-pill); --wa-color-fill-quiet: transparent; }
+.kui-toolbar-control-group[data-single="false"] wa-button:hover { background: var(--kui-toolbar-control-hover-background); }
+.kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base), .kui-toolbar-control-group[data-single="false"] wa-button:hover::part(base) { background: transparent; }
+.kui-toolbar-control-group > button { display: grid; min-width: 2rem; height: 2rem; padding: 0; border-radius: var(--kui-radius-pill); color: var(--kui-toolbar-control-color); background: transparent; cursor: pointer; place-items: center; }
+.kui-toolbar-control-group > button:hover { background: var(--kui-toolbar-control-hover-background); }
+.kui-toolbar-control-group[data-single="false"] > :is(button, wa-button)[aria-pressed="true"] { color: var(--kui-toolbar-control-selected-color); background: var(--kui-toolbar-control-selected-background); box-shadow: var(--kui-toolbar-control-selected-shadow); }
+.kui-toolbar-control-group > :is(button, wa-button):focus-visible { outline: var(--kui-focus-ring); outline-offset: 1px; }
+.kui-toolbar-control-group > button svg { width: 1rem; height: 1rem; }
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(> :is(button, wa-button)[aria-pressed="true"]) { --kui-toolbar-control-color: var(--kui-toolbar-control-pressed-color); border-color: var(--kui-toolbar-control-pressed-border); color: var(--kui-toolbar-control-pressed-color); background: var(--kui-toolbar-control-pressed-background); }
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"] > :is(button, wa-button)[aria-pressed="true"] { color: var(--kui-toolbar-control-pressed-color); }
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(> :is(button, wa-button)[aria-pressed="true"]):hover { background: var(--kui-toolbar-control-pressed-background); }
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"] > :is(button, wa-button)[aria-pressed="true"]:hover { background: transparent; }

package/src/toolbar-text.css

@@ -0,0 +1,4 @@
+.kui-toolbar-text { display: inline-flex; min-width: 0; max-width: 100%; height: 2.525rem; overflow: hidden; color: var(--kui-color-neutral-on-quiet); font-weight: 650; line-height: 1; text-overflow: ellipsis; white-space: nowrap; align-items: center; }
+.kui-toolbar-text[data-size="large"] { font-size: var(--kui-font-m); letter-spacing: -.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); }

package/src/toolbar.css

@@ -0,0 +1,9 @@
+.kui-toolbar { display: grid; width: 100%; height: 3.5rem; min-height: 3.5rem; padding: .55rem 1rem; box-sizing: border-box; border-bottom: 1px solid var(--kui-color-border); background: var(--kui-color-surface); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0; 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[data-divider="false"] { border-bottom-color: transparent; }
+.kui-toolbar__leading, .kui-toolbar__trailing { display: flex; min-width: 0; align-items: center; gap: .4rem; }
+.kui-toolbar__leading { padding-inline-end: .75rem; overflow: hidden; }
+.kui-toolbar__trailing { justify-content: flex-end; }
+.kui-toolbar__center { min-width: 0; }
+.kui-toolbar[data-has-center="false"] .kui-toolbar__center, .kui-toolbar__leading:empty, .kui-toolbar__trailing:empty { display: none; }
+@media (max-width: 42rem) { .kui-toolbar { padding-inline: .7rem; } }

package/src/value-table.css

@@ -0,0 +1,5 @@
+.kui-value-table { --kui-value-table-background: var(--kui-color-surface-lowered); --kui-value-table-border: var(--kui-color-border); display: grid; margin: 0; overflow: hidden; border-radius: var(--kui-radius-m); background: var(--kui-value-table-background); }
+.kui-value-table > div { position: relative; display: grid; min-height: 2.55rem; padding: var(--kui-space-xs) var(--kui-space-m); box-sizing: border-box; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); align-items: center; gap: var(--kui-space-m); }
+.kui-value-table > div + div::before { position: absolute; top: 0; right: var(--kui-space-m); left: var(--kui-space-m); border-top: 1px solid var(--kui-value-table-border); content: ''; }
+.kui-value-table dt { color: var(--kui-color-text-quiet); }
+.kui-value-table 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/src/webawesome.css

@@ -0,0 +1,178 @@
+/*
+ * 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 / .34), rgb(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 / .14), rgb(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);
+    --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;
+    --kui-disclosure-icon-scale: .5;
+    --wa-shadow-s: 0 1px 3px rgb(0 0 0 / .14);
+    --wa-shadow-m: 0 .35rem 1rem rgb(0 0 0 / .11);
+    --wa-shadow-l: 0 .75rem 2rem rgb(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 + .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));
+  }
+
+  wa-popover {
+    --arrow-size: var(--kui-wa-popover-arrow-size);
+  }
+}
+
+@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;
+    }
+  }
+}