@wildmason/aegis 1.5.4

package/inputs.css

@@ -0,0 +1,1537 @@
+/* ============================================================
+   Aegis Design System — inputs.css
+   Shared form control primitives for Works, Helm, Slate, Mortar.
+
+   Usage
+   -----
+   Import after themes.css so all --wm-* tokens are defined:
+
+     @import '@aegis/themes.css';
+     @import '@aegis/inputs.css';
+
+   Class reference
+   ---------------
+   Border-radius utilities (replaces Tailwind rounded-*):
+   .wm-r-xs             border-radius: 4px  — chips, badges, inline elements
+   .wm-r-sm             border-radius: 6px  — buttons, inputs, sidebar items
+   .wm-r-md             border-radius: 8px  — modals, dropdowns, popovers
+   .wm-r-lg             border-radius: 12px — search overlays, large cards
+   .wm-r-full           border-radius: 9999px — pills, avatars
+   .wm-r-l              left corners only   — left half of split button
+   .wm-r-r              right corners only  — right half of split button
+   .wm-r-t              top corners only    — top of stacked elements
+
+   Shadow utilities (replaces Tailwind shadow-*):
+   .wm-shadow           box-shadow: --wm-shadow-sm — embedded widgets
+   .wm-shadow-md        box-shadow: --wm-shadow-md — cards, dropdowns, popovers
+   .wm-shadow-lg        box-shadow: --wm-shadow-lg — modals, overlays
+
+   Menu item:
+   .wm-menu-item        Hover-background for buttons inside popovers/dropdowns
+
+   Form controls:
+   .wm-field            Vertical field container (label + control + help)
+   .wm-label            Field label
+   .wm-checkbox         Custom-styled native checkbox (appearance:none)
+   .wm-check-label      Label wrapper: flex row aligning .wm-checkbox + text
+   .wm-input            Base input — text, textarea, native select
+   .wm-input-group      Composite row: icon + .wm-input-bare (e.g. search)
+   .wm-input-bare       Borderless inner input used inside .wm-input-group
+   .wm-input-icon       Leading/trailing icon slot inside .wm-input-group
+   .wm-select-trigger   Button-based custom select trigger (for app-select etc.)
+   .wm-number-input     Number input variant (spinner chrome removed)
+   .wm-number-controls  ± button strip appended to .wm-input-group
+   .wm-number-btn       Individual +/− step button
+   .wm-ghost-field      Ghost wrapper — chrome hidden at rest, shown on hover
+   .wm-error-msg        Inline danger message block below a field
+
+   Keyboard:
+   .wm-kbd              Single keyboard key badge (heavier bottom border = key depth)
+   .wm-kbd-combo        Flex wrapper for key combinations — auto-injects '+' between keys
+
+   Spec
+   ----
+   - Standard height:  36px (use padding for textarea)
+   - Focus ring:       3px diffuse box-shadow — no layout shift
+   - Labels:           12px / font-weight 500 / text-muted
+   - Hover:            bg → wm-bg-sunken, border → wm-border-hover
+   - Focus:            border → wm-color-accent, animated ring
+   - Disabled:         50% opacity, not-allowed cursor
+   ============================================================ */
+
+
+/* ============================================================
+   Chevron — per colour-scheme
+   ============================================================
+   SVG data URIs cannot reference CSS custom properties or
+   currentColor, so we bake a light and dark version and assign
+   via --wm-chevron. Used by select.wm-input and .wm-select-trigger.
+   ============================================================ */
+
+:root,
+[data-theme='warm-light'],
+[data-theme='neutral-light'],
+[data-theme='solarized-precision'] {
+  --wm-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-opacity='0.6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+
+[data-theme='arctic-night'],
+[data-theme='vampires-kiss'],
+[data-theme='twilight-peach'],
+[data-theme='thistle-mocha'],
+[data-theme='posh-sandalwood'],
+[data-theme='crepuscular-sky'],
+[data-theme='source-control-dark'] {
+  --wm-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+
+
+/* ============================================================
+   Focus ring animation
+   ============================================================
+   Shared by .wm-input:focus, .wm-input-group:focus-within, and
+   .wm-select-trigger[aria-expanded='true']. Expands from 0 then
+   settles at 3px — communicates focus without adding layout space.
+   ============================================================ */
+
+@keyframes wm-focus-pulse {
+  0%   { box-shadow: 0 0 0 0px   color-mix(in srgb, var(--wm-color-accent) 60%, transparent); }
+  55%  { box-shadow: 0 0 0 6px   color-mix(in srgb, var(--wm-color-accent)  6%, transparent); }
+  100% { box-shadow: 0 0 0 3px   color-mix(in srgb, var(--wm-color-accent) 15%, transparent); }
+}
+
+
+/* ============================================================
+   Field wrapper — .wm-field
+   ============================================================
+   Vertical flex column holding a label, control, and optional
+   help/error text. Gap of 4px keeps label visually coupled to
+   its control without merging into it.
+
+   Usage:
+     <div class="wm-field">
+       <label class="wm-label">Name</label>
+       <input class="wm-input" type="text">
+       <span class="wm-field-help">Optional helper text</span>
+     </div>
+
+   Spacing helpers (.space-y / .space-x):
+   Apply to consecutive siblings to auto-gap them.
+   ============================================================ */
+
+.wm-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-sizing: border-box;
+}
+
+/* Vertical and horizontal auto-spacing between consecutive fields */
+.wm-field.space-y + .wm-field { margin-top: 0.75rem; }
+.wm-field.space-x + .wm-field { margin-left: 0.75rem; }
+
+
+/* ============================================================
+   Label — .wm-label
+   ============================================================
+   12px / medium weight / text-muted. Rendered as a block so it
+   occupies its own row in the flex column. user-select:none
+   prevents accidental highlight when clicking adjacent controls.
+   ============================================================ */
+
+.wm-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--wm-text-muted);
+  line-height: 1;
+  user-select: none;
+}
+
+
+/* ============================================================
+   Help and error text
+   ============================================================
+   Sit below the control inside a .wm-field. Error text uses
+   danger color; help text uses muted.
+   ============================================================ */
+
+.wm-field-help {
+  font-size: 11px;
+  color: var(--wm-text-muted);
+  line-height: 1.4;
+}
+
+.wm-field-error {
+  font-size: 11px;
+  color: var(--wm-color-danger);
+  line-height: 1.4;
+}
+
+
+/* ============================================================
+   Checkbox — .wm-checkbox + .wm-check-label
+   ============================================================
+   Custom-styled native checkbox. appearance:none hides the
+   native chrome; checked state renders via a baked-in white
+   SVG checkmark on the accent fill (works across all themes).
+
+   Usage:
+     <label class="wm-check-label">
+       <input type="checkbox" class="wm-checkbox">
+       <span>Enable feature</span>
+     </label>
+
+   Standalone (pair with aria-label):
+     <input type="checkbox" class="wm-checkbox" aria-label="…">
+   ============================================================ */
+
+@keyframes wm-check-draw {
+  from { stroke-dashoffset: 20; }
+  to   { stroke-dashoffset:  0; }
+}
+
+.wm-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1.5px solid var(--wm-border-input);
+  border-radius: var(--wm-radius-xs);
+  background-color: var(--wm-bg-base);
+  cursor: pointer;
+  position: relative;
+  vertical-align: middle;
+  transition:
+    border-color     150ms ease,
+    background-color 150ms ease,
+    box-shadow       150ms ease;
+
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+  --tw-ring-color: transparent;
+  --tw-shadow: none;
+}
+
+.wm-checkbox:hover:not(:checked):not(:disabled) {
+  background-color: var(--wm-bg-sunken);
+  border-color: var(--wm-border-hover);
+}
+
+.wm-checkbox:checked {
+  background-color: var(--wm-color-accent);
+  border-color: var(--wm-color-accent);
+}
+
+/* Animated checkmark via pseudo-element SVG */
+.wm-checkbox:checked::after {
+  content: '';
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpolyline points='1,4 3.5,6.5 9,1' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='20' stroke-dashoffset='0'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 10px 8px;
+  animation: wm-check-draw 150ms ease-out forwards;
+}
+
+.wm-checkbox:focus-visible {
+  outline: none;
+  border-color: var(--wm-color-accent);
+  animation: wm-focus-pulse 400ms cubic-bezier(0.2, 0, 0.4, 1) forwards;
+}
+
+.wm-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Label wrapper */
+.wm-check-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: 0.875rem;
+  color: var(--wm-text-primary);
+  line-height: 1.4;
+}
+
+.wm-check-label:has(.wm-checkbox:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wm-checkbox:checked::after { animation: none; }
+}
+
+
+/* ============================================================
+   Menu item — .wm-menu-item
+   ============================================================
+   Hover-background style for buttons inside popovers, dropdowns,
+   and custom menus. Matches the pattern used by .ctx-menu-item
+   in the context-menu component.
+
+   Usage:
+     <button class="wm-menu-item w-full text-left px-3 py-1.5 text-xs"
+             style="color: var(--wm-text-primary)">
+       Menu action
+     </button>
+   ============================================================ */
+
+.wm-menu-item {
+  transition: background 0.1s;
+}
+.wm-menu-item:hover {
+  background: var(--wm-bg-hover);
+}
+.wm-menu-item:focus-visible {
+  outline: 2px solid var(--wm-color-accent);
+  outline-offset: -2px;
+}
+
+
+/* ============================================================
+   Border-radius utilities — .wm-r-*
+   ============================================================
+   Named after the radius token scale. Use instead of Tailwind's
+   rounded-* so radius values stay in sync with the design token
+   scale across all apps (with or without Tailwind present).
+
+   Full-corner:
+     .wm-r-xs   → --wm-radius-xs   (4px)   chips, badges, inline elements
+     .wm-r-sm   → --wm-radius-sm   (6px)   buttons, inputs, sidebar items
+     .wm-r-md   → --wm-radius-md   (8px)   modals, dropdowns, popovers
+     .wm-r-lg   → --wm-radius-lg   (12px)  search overlays, large cards
+     .wm-r-full → --wm-radius-full (9999px) pills, avatars
+
+   Partial-corner (split buttons, stacked panels):
+     .wm-r-l   left corners only
+     .wm-r-r   right corners only
+     .wm-r-t   top corners only
+
+   Usage:
+     <div class="wm-r-md"> … </div>
+     <button class="wm-btn wm-r-l">Left</button>
+     <button class="wm-btn wm-r-r">Right</button>
+   ============================================================ */
+
+.wm-r-xs   { border-radius: var(--wm-radius-xs); }
+.wm-r-sm   { border-radius: var(--wm-radius-sm); }
+.wm-r-md   { border-radius: var(--wm-radius-md); }
+.wm-r-lg   { border-radius: var(--wm-radius-lg); }
+.wm-r-full { border-radius: var(--wm-radius-full); }
+
+.wm-r-l { border-radius: var(--wm-radius-xs) 0 0 var(--wm-radius-xs); }
+.wm-r-r { border-radius: 0 var(--wm-radius-xs) var(--wm-radius-xs) 0; }
+.wm-r-t { border-radius: var(--wm-radius-xs) var(--wm-radius-xs) 0 0; }
+
+
+/* ============================================================
+   Shadow utilities — .wm-shadow / .wm-shadow-md / .wm-shadow-lg
+   ============================================================
+   Named after the shadow token scale. Reserve for floating/elevated
+   elements only — borders (--wm-border) handle hierarchy; shadows
+   handle depth. Use instead of Tailwind's shadow-* utilities.
+
+     .wm-shadow    → --wm-shadow-sm   embedded widgets, subtle lift
+     .wm-shadow-md → --wm-shadow-md   cards, dropdowns, popovers
+     .wm-shadow-lg → --wm-shadow-lg   modals, search overlays, command palettes
+
+   Usage:
+     <div class="wm-r-md wm-shadow-md"> Dropdown </div>
+     <div class="wm-r-lg wm-shadow-lg"> Modal </div>
+   ============================================================ */
+
+.wm-shadow    { box-shadow: var(--wm-shadow-sm); }
+.wm-shadow-md { box-shadow: var(--wm-shadow-md); }
+.wm-shadow-lg { box-shadow: var(--wm-shadow-lg); }
+
+
+/* ============================================================
+   Base input — .wm-input
+   ============================================================
+   Applies to: <input>, <textarea>, <select> (native).
+   36px height for single-line; textarea overrides height.
+
+   States:
+     Hover   — bg-inset, border-hover
+     Focus   — accent border + animated ring
+     Disabled — 50% opacity, not-allowed cursor
+
+   Usage:
+     <input class="wm-input" type="text" placeholder="…">
+     <select class="wm-input"> … </select>
+     <textarea class="wm-input"></textarea>
+   ============================================================ */
+
+.wm-input {
+  /* Dimensions */
+  display: block;
+  width: 100%;
+  height: 36px;
+  box-sizing: border-box;
+  padding: 0 12px;
+
+  /* Typography */
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--wm-text-primary);
+  line-height: 36px;
+
+  /* Surface */
+  background-color: var(--wm-bg-base);
+  border: 1px solid var(--wm-border-input);
+  border-radius: var(--wm-radius-md);
+
+  /* Reset */
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+
+  /* Neutralise Tailwind ring variables so they can't bleed into box-shadow */
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+  --tw-ring-color: transparent;
+  --tw-shadow: none;
+
+  transition:
+    background-color 150ms ease,
+    border-color     150ms ease,
+    box-shadow       150ms ease;
+}
+
+/* Placeholder: uses --wm-text-placeholder (intentionally lower contrast —
+   exempt from WCAG 1.4.3 per WCAG 2.2; inputs must have a visible label). */
+.wm-input::placeholder {
+  color: var(--wm-text-placeholder);
+  opacity: 1;
+}
+
+/* Hover: step to inset bg + secondary border */
+.wm-input:hover:not(:focus):not(:disabled) {
+  background-color: var(--wm-bg-sunken);
+  border-color: var(--wm-border-hover);
+}
+
+/* Focus: accent border + animated diffuse ring */
+.wm-input:focus {
+  outline: none;
+  border-color: var(--wm-color-accent);
+  animation: wm-focus-pulse 400ms cubic-bezier(0.2, 0, 0.4, 1) forwards;
+}
+
+/* Disabled */
+.wm-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Inherit color-scheme so date/time picker chrome (calendar icon, spinners)
+   matches the active theme's light/dark declaration. */
+.wm-input[type='date'],
+.wm-input[type='time'],
+.wm-input[type='datetime-local'] {
+  color-scheme: inherit;
+}
+
+/* Keep native date/time picker indicator in sync with surrounding icon opacity */
+.wm-input[type='date']::-webkit-calendar-picker-indicator,
+.wm-input[type='time']::-webkit-calendar-picker-indicator,
+.wm-input[type='datetime-local']::-webkit-calendar-picker-indicator {
+  color: FieldText;
+  opacity: 0.6;
+  cursor: pointer;
+}
+
+
+/* ============================================================
+   Textarea variant
+   ============================================================
+   Overrides height and line-height from .wm-input. Minimum 80px;
+   user can resize vertically. Padding shifts to 8px top/bottom
+   to align the first line of text with the 36px input baseline.
+   ============================================================ */
+
+textarea.wm-input {
+  height: auto;
+  min-height: 80px;
+  padding: 8px 12px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+
+/* ============================================================
+   Native select variant
+   ============================================================
+   appearance:none strips the native chevron; we restore one via
+   --wm-chevron (light/dark SVG data URI defined at top of file).
+   ============================================================ */
+
+select.wm-input {
+  background-image: var(--wm-chevron);
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+  cursor: pointer;
+}
+
+
+/* ============================================================
+   Composite input group — .wm-input-group
+   ============================================================
+   Wraps a leading/trailing icon (.wm-input-icon) together with
+   a borderless inner input (.wm-input-bare). The border and
+   focus ring belong to the group, not the inner input.
+
+   Usage:
+     <div class="wm-input-group">
+       <span class="wm-input-icon">
+         <svg …/>
+       </span>
+       <input class="wm-input-bare" type="search" placeholder="Search…">
+     </div>
+   ============================================================ */
+
+.wm-input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  box-sizing: border-box;
+  background-color: var(--wm-bg-base);
+  border: 1px solid var(--wm-border-input);
+  border-radius: var(--wm-radius-md);
+  transition:
+    background-color 150ms ease,
+    border-color     150ms ease,
+    box-shadow       150ms ease;
+
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+  --tw-ring-color: transparent;
+  --tw-shadow: none;
+}
+
+/* Hover: skip if the inner input is focused or the group is disabled */
+.wm-input-group:hover:not(:has(.wm-input-bare:focus)):not(:has(:disabled)) {
+  background-color: var(--wm-bg-sunken);
+  border-color: var(--wm-border-hover);
+}
+
+/* Focus: border + animated ring on the group when inner input is focused */
+.wm-input-group:focus-within {
+  outline: none;
+  border-color: var(--wm-color-accent);
+  animation: wm-focus-pulse 400ms cubic-bezier(0.2, 0, 0.4, 1) forwards;
+}
+
+
+/* ============================================================
+   Bare inner input — .wm-input-bare
+   ============================================================
+   Used exclusively inside .wm-input-group. No border or background
+   of its own — those belong to the group wrapper.
+   ============================================================ */
+
+.wm-input-bare {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 12px;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--wm-text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+  --tw-ring-color: transparent;
+  --tw-shadow: none;
+}
+
+.wm-input-bare::placeholder {
+  color: var(--wm-text-placeholder);
+  opacity: 1;
+}
+
+
+/* ============================================================
+   Icon slot — .wm-input-icon
+   ============================================================
+   Leading or trailing icon inside a .wm-input-group. Uses the
+   CSS system color FieldText so it matches native picker chrome
+   in light and dark color-scheme contexts. pointer-events:none
+   keeps clicks on the icon from stealing focus from the input.
+
+   Usage:
+     <!-- leading icon -->
+     <span class="wm-input-icon"><svg …/></span>
+     <input class="wm-input-bare" …>
+
+     <!-- trailing icon (e.g. clear button — add pointer-events:auto) -->
+     <input class="wm-input-bare" …>
+     <button class="wm-input-icon" style="pointer-events:auto"> … </button>
+   ============================================================ */
+
+.wm-input-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  color: FieldText;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Remove the left padding gap when an icon directly precedes the bare input */
+.wm-input-icon + .wm-input-bare {
+  padding-left: 0;
+}
+
+
+/* ============================================================
+   Custom select trigger — .wm-select-trigger
+   ============================================================
+   A <button> styled identically to .wm-input for use with
+   component-level select pickers (app-select, popover select).
+   Matches the 36px height and all hover/focus states of .wm-input.
+
+   Opened state: set aria-expanded="true" on the button to trigger
+   the focus-ring style while the popover is open.
+
+   Usage:
+     <button class="wm-select-trigger" aria-expanded="false">
+       <span>Selected value</span>
+       <svg … />   <!-- chevron -->
+     </button>
+
+   Direct-child icon rule keeps the chevron opacity consistent
+   without overriding nested icon components inside the trigger.
+   ============================================================ */
+
+.wm-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--wm-text-primary);
+  background-color: var(--wm-bg-base);
+  border: 1px solid var(--wm-border-input);
+  border-radius: var(--wm-radius-md);
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 150ms ease,
+    border-color     150ms ease,
+    box-shadow       150ms ease;
+
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+  --tw-ring-color: transparent;
+  --tw-shadow: none;
+}
+
+/* Trailing chevron / icon — direct child only to avoid clobbering nested icons */
+.wm-select-trigger > svg,
+.wm-select-trigger > i {
+  color: FieldText;
+  opacity: 0.6;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+/* Hover: skip when open (aria-expanded) or disabled */
+.wm-select-trigger:hover:not([aria-expanded='true']):not(:disabled) {
+  background-color: var(--wm-bg-sunken);
+  border-color: var(--wm-border-hover);
+}
+
+/* Open state: same visual as focus */
+.wm-select-trigger[aria-expanded='true'],
+.wm-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--wm-color-accent);
+  animation: wm-focus-pulse 400ms cubic-bezier(0.2, 0, 0.4, 1) forwards;
+}
+
+.wm-select-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+/* ============================================================
+   Number input — .wm-number-input / .wm-number-controls
+   ============================================================
+   Removes native browser spinners and replaces them with a
+   custom ± button strip (.wm-number-controls) appended inside
+   a .wm-input-group.
+
+   Usage:
+     <div class="wm-input-group">
+       <input class="wm-input-bare wm-number-input" type="number" value="5">
+       <div class="wm-number-controls">
+         <button class="wm-number-btn" aria-label="Increase">+</button>
+         <button class="wm-number-btn" aria-label="Decrease">−</button>
+       </div>
+     </div>
+   ============================================================ */
+
+/* Strip native spinners */
+.wm-number-input::-webkit-inner-spin-button,
+.wm-number-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.wm-number-input {
+  -moz-appearance: textfield;
+}
+
+/* ± strip: sits flush at the right edge of the group, stacked vertically */
+.wm-number-controls {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 1px;
+  padding: 3px 4px 3px 2px;
+}
+
+.wm-number-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 14px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--wm-radius-xs);
+  color: FieldText;
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity 150ms ease, background-color 150ms ease;
+  outline: none;
+  font-family: inherit;
+
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+  --tw-ring-color: transparent;
+  --tw-shadow: none;
+}
+
+.wm-number-btn:hover:not(:disabled) {
+  opacity: 1;
+  background-color: color-mix(in srgb, FieldText 8%, transparent);
+}
+
+.wm-number-btn:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+
+/* ============================================================
+   Ghost field — .wm-ghost-field
+   ============================================================
+   Wraps any .wm-input, .wm-input-group, or .wm-select-trigger
+   to give it a "read-only until touched" appearance. At rest the
+   border and background are transparent so it looks like static
+   text. The 1px border box is preserved — zero layout shift when
+   chrome appears on hover.
+
+   Hover: same mid-tone bg + secondary border as a normal input hover.
+   Focus: standard .wm-input:focus / :focus-within takes over.
+
+   Usage:
+     <div class="wm-ghost-field">
+       <input class="wm-input" type="text" value="Editable value">
+     </div>
+
+   With number field (hides ± strip until hovered/focused):
+     <div class="wm-ghost-field">
+       <div class="wm-input-group">
+         <input class="wm-input-bare wm-number-input" type="number">
+         <div class="wm-number-controls"> … </div>
+       </div>
+     </div>
+   ============================================================ */
+
+/* Resting: transparent chrome */
+.wm-ghost-field .wm-input:not(:focus),
+.wm-ghost-field .wm-input-group:not(:focus-within),
+.wm-ghost-field .wm-select-trigger:not([aria-expanded='true']):not(:focus-visible) {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+/* Hover: reveal standard input hover chrome */
+.wm-ghost-field:hover .wm-input:not(:focus),
+.wm-ghost-field:hover .wm-input-group:not(:focus-within),
+.wm-ghost-field:hover .wm-select-trigger:not([aria-expanded='true']):not(:focus-visible) {
+  background-color: var(--wm-bg-sunken);
+  border-color: var(--wm-border-hover);
+}
+
+/* Hide the ± strip on a ghost number field until hover or focus */
+.wm-ghost-field .wm-input-group:not(:focus-within) .wm-number-controls {
+  visibility: hidden;
+}
+.wm-ghost-field:hover .wm-input-group:not(:focus-within) .wm-number-controls,
+.wm-ghost-field .wm-input-group:focus-within .wm-number-controls {
+  visibility: visible;
+}
+
+
+/* ============================================================
+   Error message block — .wm-error-msg
+   ============================================================
+   Inline danger block displayed below a field (or at the top of
+   a form) to communicate validation or server errors. Uses the
+   per-theme danger tokens for background and border, keeping the
+   block readable across all 12 themes.
+
+   Usage:
+     <div class="wm-error-msg">Incorrect username or password.</div>
+   ============================================================ */
+
+.wm-error-msg {
+  background-color: var(--wm-color-danger-bg);
+  color: var(--wm-color-danger);
+  border: 1px solid var(--wm-color-danger-border);
+  border-radius: var(--wm-radius-sm);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.wm-success-msg {
+  background-color: var(--wm-color-success-bg);
+  color: var(--wm-color-success);
+  border: 1px solid var(--wm-color-success-border);
+  border-radius: var(--wm-radius-sm);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.wm-warning-msg {
+  background-color: var(--wm-color-warning-bg);
+  color: var(--wm-color-warning);
+  border: 1px solid var(--wm-color-warning-border);
+  border-radius: var(--wm-radius-sm);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.wm-info-msg {
+  background-color: color-mix(in srgb, var(--wm-color-accent) 8%, transparent);
+  color: var(--wm-text-secondary);
+  border: 1px solid color-mix(in srgb, var(--wm-color-accent) 25%, transparent);
+  border-radius: var(--wm-radius-sm);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+
+/* ============================================================
+   Loading spinner — .wm-spinner
+   ============================================================
+   A CSS-only spinner that uses the accent color. Must be paired
+   with aria-label or aria-busy on its container.
+
+   Usage:
+     <div class="wm-spinner" aria-label="Loading…" role="status"></div>
+
+   Prefers-reduced-motion: hides the spin, shows a static ring so
+   the presence of the loading state is still communicated.
+   ============================================================ */
+
+@keyframes wm-spin {
+  to { transform: rotate(360deg); }
+}
+
+.wm-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--wm-border);
+  border-top-color: var(--wm-color-accent);
+  border-radius: var(--wm-radius-full);
+  animation: wm-spin 600ms linear infinite;
+  flex-shrink: 0;
+}
+
+.wm-spinner--sm {
+  width: 14px;
+  height: 14px;
+}
+
+.wm-spinner--lg {
+  width: 28px;
+  height: 28px;
+  border-width: 3px;
+}
+
+
+/* ============================================================
+   Linear progress bar — .wm-progress
+   ============================================================
+   Two variants:
+     Indeterminate  — use when duration is unknown (loading, fetching)
+     Determinate    — use when progress 0–100 is known (upload, install)
+
+   Indeterminate usage:
+     <div class="wm-progress" role="progressbar" aria-label="Loading…">
+       <div class="wm-progress__bar wm-progress__bar--indeterminate"></div>
+     </div>
+
+   Determinate usage (CSS custom property drives width):
+     <div class="wm-progress" role="progressbar"
+          aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
+          aria-label="Uploading…">
+       <div class="wm-progress__bar" style="--wm-progress-value: 40%"></div>
+     </div>
+
+   Sizes: default 2px, --sm 1px, --lg 4px
+
+   Prefers-reduced-motion: indeterminate bar freezes at 30% width.
+   ============================================================ */
+
+@keyframes wm-progress-slide {
+  0%   { transform: translateX(-100%) scaleX(0.25); }
+  50%  { transform: translateX(60%)   scaleX(0.5);  }
+  100% { transform: translateX(400%)  scaleX(0.25); }
+}
+
+.wm-progress {
+  position: relative;
+  width: 100%;
+  height: 2px;
+  background: var(--wm-border);
+  border-radius: var(--wm-radius-full);
+  overflow: hidden;
+}
+
+.wm-progress--sm { height: 1px; }
+.wm-progress--lg { height: 4px; }
+
+.wm-progress__bar {
+  position: absolute;
+  inset: 0;
+  background: var(--wm-color-accent);
+  border-radius: var(--wm-radius-full);
+  /* Determinate: width driven by --wm-progress-value (default 0%) */
+  width: var(--wm-progress-value, 0%);
+  transition: width 200ms ease;
+  transform-origin: left center;
+}
+
+.wm-progress__bar--indeterminate {
+  width: 40%;
+  animation: wm-progress-slide 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wm-progress__bar--indeterminate {
+    animation: none;
+    width: 30%;
+  }
+}
+
+
+/* ============================================================
+   Circular progress — .wm-circle-progress
+   ============================================================
+   SVG-based ring. Both determinate and indeterminate modes.
+
+   The component is a <svg> element — use the mixin via a helper
+   element or build it inline.
+
+   Indeterminate:
+     <svg class="wm-circle-progress wm-circle-progress--indeterminate"
+          viewBox="0 0 36 36" role="progressbar" aria-label="Loading…">
+       <circle class="wm-circle-progress__track" cx="18" cy="18" r="15"/>
+       <circle class="wm-circle-progress__fill"  cx="18" cy="18" r="15"/>
+     </svg>
+
+   Determinate (set --wm-circle-pct, 0–94.2 = 0–100%):
+     <svg class="wm-circle-progress"
+          viewBox="0 0 36 36" role="progressbar"
+          aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
+          aria-label="60% complete">
+       <circle class="wm-circle-progress__track" cx="18" cy="18" r="15"/>
+       <circle class="wm-circle-progress__fill"  cx="18" cy="18" r="15"
+               style="--wm-circle-pct: 56.5"/>
+     </svg>
+
+   Sizes: default 36×36px, --sm 20px, --lg 56px
+   r=15 → circumference ≈ 94.25; --wm-circle-pct maps 0–94.25 to stroke progress.
+   ============================================================ */
+
+@keyframes wm-circle-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes wm-circle-dash {
+  0%  { stroke-dashoffset: 94; }
+  50% { stroke-dashoffset: 24; stroke-dasharray: 65 30; }
+  100% { stroke-dashoffset: 94; }
+}
+
+.wm-circle-progress {
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+}
+
+.wm-circle-progress--sm { width: 20px; height: 20px; }
+.wm-circle-progress--lg { width: 56px; height: 56px; }
+
+.wm-circle-progress__track {
+  fill: none;
+  stroke: var(--wm-border);
+  stroke-width: 3;
+}
+
+.wm-circle-progress__fill {
+  fill: none;
+  stroke: var(--wm-color-accent);
+  stroke-width: 3;
+  stroke-linecap: round;
+  /* Determinate: circumference=94.25; pct drives dashoffset */
+  stroke-dasharray: 94.25;
+  stroke-dashoffset: calc(94.25 - var(--wm-circle-pct, 0));
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 300ms ease;
+}
+
+.wm-circle-progress--indeterminate .wm-circle-progress__fill {
+  stroke-dasharray: 60 34;
+  stroke-dashoffset: 94;
+  animation:
+    wm-circle-spin 1.4s linear infinite,
+    wm-circle-dash 1.4s ease-in-out infinite;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wm-circle-progress--indeterminate .wm-circle-progress__fill {
+    animation: none;
+    stroke-dasharray: 40 54;
+    opacity: 0.5;
+  }
+}
+
+
+/* ============================================================
+   Button — .wm-btn
+   ============================================================
+   Base interactive button. Always pair with a variant modifier.
+
+   Variants:  --primary (default), --secondary, --ghost, --destructive
+   Sizes:     --sm (28px), --md (36px, default), --lg (40px)
+
+   The focus ring on primary and destructive buttons uses a
+   double-ring (canvas gap + colour ring) rather than the diffuse
+   wm-focus-pulse, because those buttons have a solid fill that
+   would visually merge with the pulse ring.
+
+   Usage:
+     <button class="wm-btn wm-btn--primary">Save</button>
+     <button class="wm-btn wm-btn--secondary wm-btn--sm">Cancel</button>
+     <a class="wm-btn wm-btn--ghost" href="…">Back</a>
+   ============================================================ */
+
+.wm-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 600;
+  white-space: nowrap;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: var(--wm-radius-md);
+  cursor: pointer;
+  outline: none;
+  text-decoration: none;
+  box-sizing: border-box;
+  transition:
+    background-color var(--wm-transition-fast),
+    border-color     var(--wm-transition-fast),
+    color            var(--wm-transition-fast),
+    box-shadow       var(--wm-transition-fast);
+
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+  --tw-ring-color: transparent;
+  --tw-shadow: none;
+}
+
+/* ── Variants ──────────────────────────────────────────────── */
+
+.wm-btn--primary {
+  background-color: var(--wm-color-accent);
+  border-color: var(--wm-color-accent);
+  color: var(--wm-color-accent-text);
+}
+
+.wm-btn--primary:hover:not(:disabled) {
+  background-color: var(--wm-color-accent-hover);
+  border-color: var(--wm-color-accent-hover);
+}
+
+.wm-btn--secondary {
+  background-color: transparent;
+  border-color: var(--wm-border-input);
+  color: var(--wm-text-primary);
+}
+
+.wm-btn--secondary:hover:not(:disabled) {
+  background-color: var(--wm-bg-sunken);
+  border-color: var(--wm-border-hover);
+}
+
+.wm-btn--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wm-text-secondary);
+}
+
+.wm-btn--ghost:hover:not(:disabled) {
+  background-color: var(--wm-bg-hover);
+  color: var(--wm-text-primary);
+}
+
+.wm-btn--destructive {
+  background-color: var(--wm-color-danger);
+  border-color: var(--wm-color-danger);
+  color: #ffffff;
+}
+
+.wm-btn--destructive:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--wm-color-danger) 85%, black);
+  border-color: color-mix(in srgb, var(--wm-color-danger) 85%, black);
+}
+
+.wm-btn--flat {
+  background-color: var(--wm-bg-foreground);
+  border-color: transparent;
+  color: var(--wm-text-primary);
+}
+
+.wm-btn--flat:hover:not(:disabled) {
+  background-color: var(--wm-bg-hover);
+}
+
+/* ── Sizes ─────────────────────────────────────────────────── */
+
+.wm-btn--xs {
+  height: 22px;
+  padding: 0 6px;
+  font-size: 0.6875rem;
+  border-radius: var(--wm-radius-xs);
+}
+
+.wm-btn--sm {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 0.8125rem;
+  border-radius: var(--wm-radius-sm);
+}
+
+.wm-btn--lg {
+  height: 40px;
+  padding: 0 18px;
+  font-size: 0.9375rem;
+}
+
+/* ── Focus ─────────────────────────────────────────────────── */
+
+/* Secondary and ghost: diffuse pulse (border changes from neutral → accent) */
+.wm-btn--secondary:focus-visible,
+.wm-btn--ghost:focus-visible,
+.wm-btn--flat:focus-visible {
+  outline: none;
+  border-color: var(--wm-color-accent);
+  animation: wm-focus-pulse 400ms cubic-bezier(0.2, 0, 0.4, 1) forwards;
+}
+
+/* Primary and destructive: double-ring so the ring contrasts against the fill */
+.wm-btn--primary:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--wm-bg-base),
+    0 0 0 4px var(--wm-color-accent);
+}
+
+.wm-btn--destructive:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--wm-bg-base),
+    0 0 0 4px var(--wm-color-danger);
+}
+
+/* ── States ────────────────────────────────────────────────── */
+
+.wm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.wm-btn--loading {
+  cursor: wait;
+  pointer-events: none;
+  opacity: 0.75;
+}
+
+/* SVG icons inside buttons: inherit colour, fixed size */
+.wm-btn svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.wm-btn--xs svg { width: 10px; height: 10px; }
+.wm-btn--sm svg { width: 14px; height: 14px; }
+.wm-btn--lg svg { width: 18px; height: 18px; }
+
+/* Icon-only: square button, no padding, equal width/height */
+.btn-icon-only {
+  padding: 0;
+  width: 36px;
+}
+.wm-btn--xs.btn-icon-only { width: 22px; }
+.wm-btn--sm.btn-icon-only { width: 28px; }
+.wm-btn--lg.btn-icon-only { width: 40px; }
+
+/* ── CSS Tooltip ───────────────────────────────────────────── */
+/* Apply data-tooltip="Label" to any element. Shows below by   */
+/* default; flip with data-tooltip-pos="top" (see below).      */
+
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) translateY(-2px);
+  white-space: nowrap;
+  padding: 3px 8px;
+  background: var(--wm-text-primary);
+  color: var(--wm-bg-base);
+  font-family: var(--wm-font-sans);
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1.4;
+  border-radius: var(--wm-radius-sm);
+  pointer-events: none;
+  opacity: 0;
+  transition:
+    opacity var(--wm-transition-fast),
+    transform var(--wm-transition-fast);
+  z-index: 9000;
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+[data-tooltip-pos='top']::after {
+  top: auto;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%) translateY(2px);
+}
+
+[data-tooltip-pos='top']:hover::after,
+[data-tooltip-pos='top']:focus-visible::after {
+  transform: translateX(-50%) translateY(0);
+}
+
+
+/* ============================================================
+   Reduced motion
+   ============================================================
+   For users who have opted-in to reduced motion in their OS,
+   all transitions and animations are replaced with instant
+   equivalents. Focus states still show a visible ring — just
+   without the expand-then-settle pulse.
+   ============================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .wm-input,
+  .wm-input-group,
+  .wm-select-trigger,
+  .wm-number-btn,
+  .wm-btn {
+    transition: none;
+  }
+
+  /* Replace the animated pulse with a static diffuse ring */
+  .wm-input:focus,
+  .wm-input-group:focus-within,
+  .wm-select-trigger[aria-expanded='true'],
+  .wm-select-trigger:focus-visible,
+  .wm-btn--secondary:focus-visible,
+  .wm-btn--ghost:focus-visible {
+    animation: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wm-color-accent) 25%, transparent);
+  }
+
+  .wm-spinner {
+    animation: none;
+    opacity: 0.5;
+  }
+}
+
+
+/* ============================================================
+   Badge — item type labels
+   Usage: <span class="wm-badge wm-badge--task">Task</span>
+   ============================================================ */
+
+.wm-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1875rem 0.5rem;
+  border-radius: var(--wm-radius-sm);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+}
+
+.wm-badge--task       { color: var(--wm-color-task);       background: color-mix(in srgb, var(--wm-color-task)       12%, transparent); }
+.wm-badge--bug        { color: var(--wm-color-bug);        background: color-mix(in srgb, var(--wm-color-bug)        12%, transparent); }
+.wm-badge--story      { color: var(--wm-color-story);      background: color-mix(in srgb, var(--wm-color-story)      12%, transparent); }
+.wm-badge--epic       { color: var(--wm-color-epic-text);  background: var(--wm-color-epic); }
+.wm-badge--initiative { color: var(--wm-color-initiative-text); background: var(--wm-color-initiative); }
+.wm-badge--completed  { color: var(--wm-color-completed);  background: color-mix(in srgb, var(--wm-color-completed)  12%, transparent); }
+
+
+/* ============================================================
+   Priority chip — urgency indicators
+   Usage: <span class="wm-chip wm-chip--high">High</span>
+   ============================================================ */
+
+.wm-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1875rem 0.5rem;
+  border-radius: var(--wm-radius-full);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.wm-chip--critical { color: var(--wm-priority-critical-text); background: var(--wm-priority-critical-bg); }
+.wm-chip--high     { color: var(--wm-priority-high-text);     background: var(--wm-priority-high-bg); }
+.wm-chip--medium   { color: var(--wm-priority-medium-text);   background: var(--wm-priority-medium-bg); }
+.wm-chip--low      { color: var(--wm-priority-low-text);      background: var(--wm-priority-low-bg); }
+.wm-chip--none     { color: var(--wm-text-muted);             background: var(--wm-bg-sunken); }
+
+
+/* ============================================================
+   Dialog footer utility
+   Place inside [body] slot of <wm-dialog>:
+     <div body>
+       <p>Message</p>
+       <div class="wm-dialog-footer">…buttons…</div>
+     </div>
+   ============================================================ */
+
+.wm-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding-top: 1rem;
+  margin-top: 1rem;
+  border-top: 1px solid var(--wm-border);
+}
+
+
+/* ============================================================
+   Action list — vertical list of full-width button actions
+   Use for 4+ actions in narrow containers (splash, welcome, settings).
+   Pair with a single primary CTA above the list.
+
+   Usage:
+     <button class="wm-btn wm-btn--primary" style="width:100%">Primary action</button>
+     <ul class="wm-action-list">
+       <li><button class="wm-action-list-item">Action label</button></li>
+     </ul>
+   ============================================================ */
+
+.wm-action-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wm-action-list-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--wm-radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--wm-text-secondary);
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--wm-duration-fast) var(--wm-ease-standard),
+              color var(--wm-duration-fast) var(--wm-ease-standard);
+}
+
+.wm-action-list-item:hover {
+  background: var(--wm-bg-hover);
+  color: var(--wm-text-primary);
+}
+
+.wm-action-list-item:focus-visible {
+  outline: 2px solid var(--wm-color-accent);
+  outline-offset: -1px;
+}
+
+.wm-action-list-item svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wm-action-list-item { transition: none; }
+}
+
+
+/* ============================================================
+   Keyboard key — .wm-kbd / .wm-kbd-combo
+   ============================================================
+   .wm-kbd renders a single key as a small badge resembling a
+   physical keyboard key. The heavier bottom border simulates
+   the key's lower edge depth.
+
+   .wm-kbd-combo wraps two or more adjacent .wm-kbd elements
+   and injects a '+' connector between them via CSS so no extra
+   markup is needed.
+
+   Usage — single key:
+     <kbd class="wm-kbd">Esc</kbd>
+
+   Usage — key combination:
+     <span class="wm-kbd-combo">
+       <kbd class="wm-kbd">Ctrl</kbd>
+       <kbd class="wm-kbd">K</kbd>
+     </span>
+
+   Usage — longer combo:
+     <span class="wm-kbd-combo">
+       <kbd class="wm-kbd">Ctrl</kbd>
+       <kbd class="wm-kbd">Shift</kbd>
+       <kbd class="wm-kbd">P</kbd>
+     </span>
+   ============================================================ */
+
+.wm-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 5px;
+  min-width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+
+  font-family: var(--wm-font-sans);
+  font-size: 11px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1;
+  white-space: nowrap;
+
+  color: var(--wm-text-secondary);
+  background: var(--wm-bg-sunken);
+
+  /* Key face: uniform border on top/sides, heavier on bottom for depth */
+  border: 1px solid var(--wm-border-input);
+  border-bottom-width: 2px;
+  border-radius: var(--wm-radius-xs);
+
+  user-select: none;
+  pointer-events: none;
+}
+
+
+/* ----------------------------------------------------------------
+   Combo wrapper — auto-injects '+' between adjacent .wm-kbd
+   ----------------------------------------------------------------
+   Each .wm-kbd after the first gets a left margin to create room
+   for the generated '+' connector, which is positioned absolutely
+   in the gap between the two keys.
+   ---------------------------------------------------------------- */
+
+.wm-kbd-combo {
+  display: inline-flex;
+  align-items: center;
+}
+
+.wm-kbd-combo > .wm-kbd + .wm-kbd {
+  position: relative;
+  margin-left: 14px;
+}
+
+.wm-kbd-combo > .wm-kbd + .wm-kbd::before {
+  content: '+';
+  position: absolute;
+  /* sit in the 14px gap: 4px from the right edge of this key's left edge */
+  right: calc(100% + 4px);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 9px;
+  font-weight: 400;
+  line-height: 1;
+  font-family: var(--wm-font-sans);
+  color: var(--wm-text-muted);
+  pointer-events: none;
+}