@stisla/style 3.0.0-beta.8

package/dist/combobox/combobox.css

@@ -0,0 +1,106 @@
+/* @stisla/style — Combobox (portable contract). Ported from src/scss/components/_combobox.scss + the
+ * form-field-base mixin. This file is the design contract any implementation shares: the .combobox
+ * field (a native <select class="combobox"> that works with no JS), the --combobox-* token knobs, the
+ * size modifiers, and the dark chevron. A React/Vue combobox reuses these tokens with its own widget.
+ *
+ * The vanilla JS binding (Tom Select's .ts-wrapper / .ts-control / .ts-dropdown / .option / .item DOM,
+ * mapped onto these tokens) lives in the sibling combobox.tomselect.css — load it alongside this file
+ * only when you use the Tom-Select-backed combobox.
+ *
+ * References the @theme tokens: colors var(--color-*), sizes/spacing --spacing(n), type var(--text-*)
+ * / var(--leading-*), radius var(--radius-*); only no-namespace customs use --st-* (border-width,
+ * duration). The field reuses form-field-base (duplicated here with --combobox-*, keep in sync with
+ * input/select/textarea). Knobs are --combobox-*. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* === Field === the form-field-base shape + a chevron well. Uses background-color (not the
+     `background` shorthand) so the chevron image survives. */
+  .combobox {
+    display: block;
+    width: 100%;
+    height: var(--combobox-height, --spacing(9));
+    padding-block: var(--combobox-padding-block, 0);
+    padding-inline: var(--combobox-padding-inline, --spacing(2.5));
+    padding-inline-end: --spacing(9);
+    font-family: inherit;
+    font-size: var(--combobox-font-size, var(--text-sm));
+    font-weight: var(--font-weight-normal);
+    line-height: var(--leading-tight);
+    color: var(--combobox-color, var(--color-foreground));
+    background-color: var(--combobox-bg, var(--color-surface));
+    /* Chevron — fallback-default custom prop so a scope can swap the SVG. The stroke must be a literal
+       (CSS vars don't resolve in url()); the dark scope below swaps to a lighter chevron. */
+    background-image: var(
+      --combobox-indicator,
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E")
+    );
+    background-position: right --spacing(3) center;
+    background-repeat: no-repeat;
+    background-size: --spacing(3) --spacing(3);
+    border: var(--combobox-border-width, var(--st-border-width)) solid
+      var(--combobox-border-color, var(--color-border-strong));
+    border-radius: var(--combobox-radius, var(--radius-md));
+    appearance: none;
+    cursor: text;
+    transition:
+      border-color var(--transition-duration-fast) ease,
+      box-shadow var(--transition-duration-fast) ease,
+      background-color var(--transition-duration-fast) ease;
+
+    @media (pointer: coarse) {
+      font-size: var(--combobox-font-size, var(--text-base));
+    }
+
+    &::placeholder {
+      color: var(--combobox-placeholder, var(--color-muted-foreground));
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled, :focus-visible, [aria-invalid="true"], :user-invalid) {
+      border-color: color-mix(in oklch, var(--color-border-strong) 80%, var(--color-foreground));
+    }
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 25%, transparent);
+    }
+
+    &[aria-invalid="true"],
+    &:user-invalid {
+      border-color: var(--color-danger);
+    }
+
+    &:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    /* Dark — swap the chevron to a lighter stroke (data: URLs can't read tokens). */
+    @variant dark {
+      --combobox-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
+    }
+  }
+
+  /* === Sizes (base = md) === */
+  .combobox--sm {
+    --combobox-radius: var(--radius-sm);
+    --combobox-height: --spacing(7);
+    --combobox-padding-inline: --spacing(2);
+    --combobox-font-size: var(--text-xs);
+    @media (pointer: coarse) {
+      --combobox-font-size: var(--text-base);
+    }
+  }
+
+  .combobox--lg {
+    --combobox-radius: var(--radius-lg);
+    --combobox-height: --spacing(11);
+    --combobox-padding-inline: --spacing(3.5);
+    --combobox-font-size: var(--text-base);
+  }
+}

package/dist/combobox/combobox.tomselect.css

@@ -0,0 +1,251 @@
+/* @stisla/style — Combobox / Tom Select adapter (vanilla-JS binding). The combobox's vanilla
+ * implementation is backed by Tom Select; this file maps Tom Select's own DOM vocabulary
+ * (.ts-wrapper / .ts-control / .ts-dropdown / .option / .item / .focus / .has-items / .active /
+ * .selected / .tomselected …) onto the --combobox-* tokens and the menu-surface recipe. It is the ONE
+ * lib-coupled stylesheet in @stisla/style; a different combobox lib (or a React/Vue impl) would
+ * provide its own adapter and reuse the same --combobox-* tokens.
+ *
+ * Load AFTER combobox.css (it depends on the --combobox-* contract defined there) and only when you
+ * use the Tom-Select-backed combobox. The .combobox base rule in combobox.css also paints
+ * .ts-wrapper.combobox (it carries the combobox class), so the field shape/border/chevron come from
+ * there; this file adds the flex trigger layout, chips, and dropdown surface. These classes are a
+ * third-party lib's vocabulary, not Stisla state — the no-is-* convention does not apply to them.
+ *
+ * References the @theme tokens (colors var(--color-*), spacing --spacing(n), type var(--text-*) /
+ * var(--leading-*), radius var(--radius-*), shadow var(--shadow-*)); only no-namespace customs use
+ * --st-* (border-width, duration, z-index). The dropdown z-index routes through the z-index scale
+ * (--z-index-dropdown). @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* === Wrapper === .ts-wrapper.combobox is the visible trigger after hydration. Flex so the inner
+     .ts-control stretches; multi grows past the height as chips wrap. */
+  .ts-wrapper.combobox {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    padding: 0;
+    cursor: text;
+  }
+
+  .ts-wrapper.combobox.multi {
+    height: auto;
+    min-height: var(--combobox-height, --spacing(9));
+  }
+
+  /* Inner row — chips + typing input. padding-block lives here (not the wrapper) so the whole padded
+     area stays clickable, since Tom Select binds its click handler to .ts-control only. */
+  .ts-wrapper.combobox .ts-control {
+    flex: 1 1 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: --spacing(1.5);
+    min-width: 0;
+    padding-block: var(--combobox-control-padding-block, --spacing(1));
+    padding-inline-start: var(--combobox-padding-inline, --spacing(2.5));
+    padding-inline-end: 0;
+    background: transparent;
+    border: 0;
+    outline: none;
+    cursor: text;
+  }
+
+  .ts-wrapper.combobox .ts-control > input {
+    flex: 1 1 auto;
+    min-width: 4ch;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    outline: none;
+  }
+
+  .ts-wrapper.combobox .ts-control > input::placeholder {
+    color: var(--combobox-placeholder, var(--color-muted-foreground));
+    opacity: 1;
+  }
+
+  /* Reset Stisla's .item styling that would otherwise leak onto Tom Select's chip divs; multi
+     re-paints below. */
+  .ts-wrapper.combobox .ts-control .item {
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* Multi chip — a small inline tag with an X remove handle (remove_button plugin). */
+  .ts-wrapper.combobox.multi .ts-control .item {
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(1);
+    padding: --spacing(0.5) --spacing(2);
+    font-size: var(--text-xs);
+    line-height: var(--leading-snug);
+    color: var(--color-accent-foreground);
+    background: var(--color-accent);
+    border-radius: calc(var(--combobox-radius, var(--radius-md)) - --spacing(1));
+  }
+
+  .ts-wrapper.combobox.multi .ts-control .item .remove {
+    margin-inline-start: --spacing(0.5);
+    color: inherit;
+    text-decoration: none;
+    opacity: 0.6;
+    cursor: pointer;
+    transition: opacity var(--transition-duration-fast) ease;
+  }
+
+  .ts-wrapper.combobox.multi .ts-control .item .remove:hover {
+    opacity: 1;
+  }
+
+  /* Once any value is selected, suppress the search input's placeholder so it doesn't trail the
+     chosen value. Tom Select toggles .has-items on the wrapper. */
+  .ts-wrapper.combobox.has-items .ts-control > input::placeholder {
+    color: transparent;
+  }
+
+  /* Focus — Tom Select toggles .focus / .input-active on the wrapper (focus lives on the inner
+     input, so :focus-visible doesn't match here); re-emit the field halo. */
+  .ts-wrapper.combobox.focus,
+  .ts-wrapper.combobox.input-active {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 25%, transparent);
+  }
+
+  /* Invalid — bridge aria-invalid from the hidden <select> to the wrapper, which Tom Select inserts
+     as a following sibling (not a parent), so adjacent-sibling does the job. */
+  select.combobox[aria-invalid="true"] + .ts-wrapper.combobox {
+    border-color: var(--color-danger);
+  }
+  select.combobox[aria-invalid="true"] + .ts-wrapper.combobox.focus,
+  select.combobox[aria-invalid="true"] + .ts-wrapper.combobox.input-active {
+    border-color: var(--color-danger);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 25%, transparent);
+  }
+
+  /* Disabled — Tom Select adds .disabled to the wrapper; override the field hover (its :disabled
+     guard doesn't match a <div>). */
+  .ts-wrapper.combobox.disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  .ts-wrapper.combobox.disabled .ts-control {
+    cursor: not-allowed;
+  }
+  .ts-wrapper.combobox.disabled:hover {
+    border-color: var(--combobox-border-color, var(--color-border-strong));
+  }
+
+  /* Hide the original <select> once hydrated (display:none, not the inline style, so user CSS can't
+     accidentally unhide it). */
+  select.combobox.tomselected,
+  select.combobox.ts-hidden-accessible {
+    display: none !important;
+  }
+
+  /* === Dropdown === the menu-surface recipe via Tom Select's .ts-dropdown. The trigger anchors the
+     position; this paints the surface. */
+  .ts-wrapper.combobox .ts-dropdown {
+    padding: var(--combobox-popup-padding-block, --spacing(1)) var(--combobox-popup-padding-inline, --spacing(1));
+    font-size: var(--combobox-popup-font-size, var(--text-sm));
+    line-height: var(--leading-normal);
+    color: var(--combobox-color, var(--color-foreground));
+    background-color: var(--combobox-bg, var(--color-surface));
+    border: var(--combobox-border-width, var(--st-border-width)) solid
+      var(--combobox-popup-border-color, var(--color-border));
+    border-radius: var(--combobox-radius, var(--radius-md));
+    box-shadow: var(--combobox-shadow, var(--shadow-md));
+    position: absolute;
+    top: 100%;
+    inset-inline-start: 0;
+    z-index: var(--combobox-z-index, var(--z-index-dropdown));
+    min-width: 100%;
+    margin: --spacing(2) 0 0;
+  }
+
+  .ts-wrapper.combobox .ts-dropdown .ts-dropdown-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--combobox-item-gap, --spacing(0.5));
+    max-height: --spacing(64);
+    overflow-y: auto;
+    padding: 0;
+  }
+
+  .ts-wrapper.combobox .ts-dropdown .optgroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--combobox-item-gap, --spacing(0.5));
+  }
+
+  /* Hide the empty <option value=""> (authors keep it as the "no selection" placeholder anchor). */
+  .ts-wrapper.combobox .ts-dropdown .option[data-value=""] {
+    display: none;
+  }
+
+  /* Option rows — the menu-item recipe; gap reset to 0 because Tom Select's search highlight splits
+     the label into inline nodes that a non-zero flex gap would pad with whitespace. */
+  .ts-wrapper.combobox .ts-dropdown .option,
+  .ts-wrapper.combobox .ts-dropdown .create {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    width: 100%;
+    min-height: var(--combobox-item-min-height, --spacing(8));
+    padding: var(--combobox-item-padding-block, --spacing(0.5))
+      var(--combobox-item-padding-inline, --spacing(3));
+    font: inherit;
+    color: var(--combobox-color, var(--color-foreground));
+    text-align: start;
+    text-decoration: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(
+      --combobox-item-radius,
+      calc(var(--combobox-radius, var(--radius-md)) - var(--combobox-padding-inline, --spacing(1)))
+    );
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      color var(--transition-duration-fast) ease;
+  }
+
+  /* Tom Select uses .active for the keyboard-highlighted row, .selected for the chosen value. */
+  .ts-wrapper.combobox .ts-dropdown .option:hover,
+  .ts-wrapper.combobox .ts-dropdown .option.active,
+  .ts-wrapper.combobox .ts-dropdown .create.active {
+    color: var(--combobox-item-color-hover, var(--color-accent-foreground));
+    background-color: var(--combobox-item-bg-hover, var(--color-accent));
+  }
+
+  .ts-wrapper.combobox .ts-dropdown .option.selected,
+  .ts-wrapper.combobox .ts-dropdown .option.selected.active,
+  .ts-wrapper.combobox .ts-dropdown .option.selected:hover {
+    color: var(--combobox-item-color-active, var(--color-highlight-foreground));
+    background-color: var(--combobox-item-bg-active, var(--color-highlight));
+  }
+
+  .ts-wrapper.combobox .ts-dropdown .option[data-disabled],
+  .ts-wrapper.combobox .ts-dropdown .no-results,
+  .ts-wrapper.combobox .ts-dropdown .spinner {
+    color: var(--combobox-item-color-disabled, var(--color-muted-foreground));
+    background-color: transparent;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ts-wrapper.combobox .ts-dropdown .option,
+    .ts-wrapper.combobox .ts-dropdown .create {
+      transition: none;
+    }
+  }
+}

package/dist/config-CARtrJ7I.d.ts

@@ -0,0 +1,61 @@
+type VariantDefs = Record<string, Record<string, string>>;
+interface ComposerConfig<V extends VariantDefs = VariantDefs, K extends string = string> {
+    /** Base BEM class, e.g. "button". */
+    base: string;
+    /** variant name → { value → className }. Empty string = valid value, no class. */
+    variants?: V;
+    /** Default value per variant (e.g. size: "md" when base already is md). */
+    defaultVariants?: {
+        [P in keyof V]?: keyof V[P] & string;
+    };
+    /** CSS-var namespace for knobs, e.g. "button" → --button-<key>. */
+    knobPrefix?: string;
+    /** Allowed knob keys (camelCase), for typing / autocomplete. */
+    knobs?: readonly K[];
+}
+type Tune<K extends string> = Partial<Record<K, string>>;
+type ComposerProps<V extends VariantDefs, K extends string> = {
+    [P in keyof V]?: (keyof V[P] & string) | boolean;
+} & {
+    tune?: Tune<K>;
+    className?: string;
+};
+interface Composed {
+    className: string;
+    style: Record<string, string>;
+}
+declare function composer<V extends VariantDefs, K extends string>(config: ComposerConfig<V, K>): (props?: ComposerProps<V, K>) => Composed;
+
+declare const button: (props?: ComposerProps<{
+    tone: {
+        primary: string;
+        danger: string;
+        neutral: string;
+        tertiary: string;
+    };
+    shape: {
+        outline: string;
+        ghost: string;
+        soft: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    iconOnly: {
+        true: string;
+    };
+    iconRound: {
+        true: string;
+    };
+    block: {
+        true: string;
+    };
+    wrap: {
+        true: string;
+    };
+}, "tone" | "gap" | "height" | "paddingInline" | "fontSize" | "fontWeight" | "color" | "bg" | "bgHover" | "bgActive" | "borderWidth" | "borderColor" | "rimMix" | "radius" | "bevel" | "iconSize"> | undefined) => Composed;
+
+export { type ComposerProps as C, type Tune as T, type VariantDefs as V, type Composed as a, type ComposerConfig as b, button as c, composer as d };

package/dist/dialog/dialog.css

@@ -0,0 +1,258 @@
+/* @stisla/style — Dialog. Ported from src/scss/components/_dialog.scss. A centered modal: a frosted
+ * backdrop dims the page, a height-bounded panel holds the visible card (header / body / footer +
+ * floating close chip). Shown via [data-state="open"] on the root. References the @theme tokens:
+ * colors var(--color-*), sizes/spacing --spacing(n), type var(--text-*) / var(--leading-*) /
+ * var(--font-weight-*), radius var(--radius-*), shadow var(--shadow-*); only no-namespace customs use
+ * --st-* (border-width, duration, z-index); z-index routes through the z-index scale (--z-index-modal). The backdrop scrim and
+ * the frosted close chip use bespoke oklch alphas (no scrim token), and blur radii stay literal
+ * (filter geometry, not spacing). Knobs are --dialog-*. State + scroll-lock hooks ([data-shaking],
+ * html[data-dialog-open]) are attributes, recast from the legacy is-* classes per the no-is-*
+ * convention. Open/close + focus-trap behavior ships with the JS layer. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .dialog {
+    position: fixed;
+    inset: 0;
+    z-index: var(--dialog-z-index, var(--z-index-modal));
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--dialog-margin-block, --spacing(4)) var(--dialog-margin-inline, --spacing(4));
+    overflow: hidden;
+
+    /* Light mode runs a solid dark close chip for contrast over the white surface; dark mode flips
+       to a subtle light chip so it doesn't dominate the deep surface. Same affordance, inverted
+       luminance. @variant dark uses the registered custom-variant ([data-theme="dark"] / .dark). */
+    @variant dark {
+      --dialog-close-bg: oklch(1 0 0 / 0.1);
+      --dialog-close-bg-hover: oklch(1 0 0 / 0.18);
+      --dialog-close-color: oklch(1 0 0 / 0.85);
+      --dialog-close-color-hover: oklch(1 0 0);
+    }
+  }
+
+  .dialog[data-state="open"] {
+    display: flex;
+  }
+
+  .dialog__backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: var(--dialog-backdrop-bg, oklch(0 0 0 / 0.55));
+    backdrop-filter: blur(var(--dialog-backdrop-blur, 12px));
+    -webkit-backdrop-filter: blur(var(--dialog-backdrop-blur, 12px));
+    opacity: 0;
+    transition: opacity var(--dialog-transition-duration, var(--transition-duration-normal)) ease;
+    cursor: pointer;
+  }
+
+  .dialog[data-state="open"] .dialog__backdrop {
+    opacity: 1;
+  }
+
+  .dialog__panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: var(--dialog-width, --spacing(112));
+    max-height: calc(100dvh - 2 * var(--dialog-margin-block, --spacing(4)));
+    margin: auto;
+    opacity: 0;
+    transform: scale(0.9);
+    transition:
+      opacity var(--dialog-transition-duration, var(--transition-duration-normal)) ease,
+      transform var(--dialog-transition-duration, var(--transition-duration-normal)) ease;
+  }
+
+  .dialog[data-state="open"] .dialog__panel {
+    opacity: 1;
+    transform: none;
+  }
+
+  .dialog__content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: 100%;
+    background-color: var(--dialog-bg, var(--color-surface));
+    color: var(--dialog-color, var(--color-foreground));
+    border: var(--dialog-border-width, var(--st-border-width)) solid
+      var(--dialog-border-color, var(--color-border));
+    border-radius: var(--dialog-radius, var(--radius-lg));
+    box-shadow: var(--dialog-shadow, var(--shadow-lg));
+    overflow: hidden;
+    outline: none;
+  }
+
+  .dialog__header {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    padding: var(--dialog-padding-block, --spacing(5)) var(--dialog-padding-inline, --spacing(5));
+    padding-block-end: 0;
+  }
+
+  .dialog__title {
+    margin: 0;
+    font-size: var(--dialog-title-font-size, var(--text-lg));
+    font-weight: var(--dialog-title-font-weight, var(--font-weight-semibold));
+    line-height: var(--leading-tight);
+    color: var(--dialog-color, var(--color-foreground));
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--dialog-padding-block, --spacing(5)) var(--dialog-padding-inline, --spacing(5));
+    color: var(--dialog-color, var(--color-foreground));
+  }
+
+  .dialog__footer {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: --spacing(2);
+    padding: var(--dialog-footer-padding-block, --spacing(3.5))
+      var(--dialog-padding-inline, --spacing(5));
+    background-color: var(--dialog-footer-bg, var(--color-surface-2));
+    border-top: var(--st-border-width) solid var(--dialog-footer-border-color, var(--color-border));
+  }
+
+  /* Floating dismiss chip — a frosted glass disc that reads on a light surface, a dark surface, and
+     over imagery. The semi-transparent oklch fills are bespoke (no scrim token); the dark @variant
+     on .dialog above swaps them for the inverted-luminance pair. */
+  .dialog__close {
+    position: absolute;
+    top: --spacing(3);
+    inset-inline-end: --spacing(3);
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--dialog-close-size, --spacing(7));
+    height: var(--dialog-close-size, --spacing(7));
+    padding: 0;
+    color: var(--dialog-close-color, oklch(1 0 0 / 0.92));
+    background-color: var(--dialog-close-bg, oklch(0 0 0 / 0.35));
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      color var(--transition-duration-fast) ease;
+  }
+
+  .dialog__close:hover {
+    color: var(--dialog-close-color-hover, oklch(1 0 0));
+    background-color: var(--dialog-close-bg-hover, oklch(0 0 0 / 0.55));
+  }
+
+  .dialog__close:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .dialog__close > svg,
+  .dialog__close > i {
+    width: --spacing(3.5);
+    height: --spacing(3.5);
+  }
+
+  /* === Size modifiers === retune the panel width cap only. */
+  .dialog--compact {
+    --dialog-width: --spacing(80);
+  }
+  .dialog--roomy {
+    --dialog-width: --spacing(160);
+  }
+  .dialog--spacious {
+    --dialog-width: --spacing(240);
+  }
+
+  .dialog--fullscreen {
+    --dialog-margin-inline: 0;
+    --dialog-margin-block: 0;
+  }
+  .dialog--fullscreen .dialog__panel {
+    max-width: 100vw;
+    max-height: 100dvh;
+    height: 100dvh;
+  }
+  .dialog--fullscreen .dialog__content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* Almost-fullscreen — keeps a breathing strip around the dialog so the page hints through, but the
+     dialog takes the rest of the viewport. For immersive editors, onboarding, lightbox-adjacent UIs. */
+  .dialog--almost-fullscreen {
+    --dialog-margin-inline: --spacing(10);
+    --dialog-margin-block: --spacing(10);
+    --dialog-width: calc(100vw - 2 * var(--dialog-margin-inline, --spacing(4)));
+  }
+  .dialog--almost-fullscreen .dialog__panel {
+    height: calc(100dvh - 2 * var(--dialog-margin-block, --spacing(4)));
+  }
+  .dialog--almost-fullscreen .dialog__content {
+    height: 100%;
+  }
+
+  /* === Position modifiers === default is centered; --top / --bottom override via auto margins. */
+  .dialog__panel--top {
+    margin-block-start: 0;
+    margin-block-end: auto;
+  }
+  .dialog__panel--bottom {
+    margin-block-start: auto;
+    margin-block-end: 0;
+  }
+
+  /* === Scrollable body === */
+  .dialog__panel--scrollable .dialog__body {
+    overflow-y: auto;
+  }
+
+  /* === Static backdrop shake === the behavior layer sets [data-shaking] on the panel when a click
+     hits the backdrop while the backdrop is static. */
+  .dialog__panel[data-shaking] {
+    animation: st-dialog-shake var(--transition-duration-normal) ease-in-out;
+  }
+}
+
+/* === Scroll lock === applied to <html> while any dialog is open; scrollbar-gutter keeps the page
+   width stable so opening a dialog doesn't reflow content behind it. */
+html[data-dialog-open] {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+@keyframes st-dialog-shake {
+  0%,
+  100% {
+    transform: none;
+  }
+  25% {
+    transform: translateX(calc(--spacing(1) * -1));
+  }
+  75% {
+    transform: translateX(--spacing(1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog__backdrop,
+  .dialog__panel {
+    transition: none;
+  }
+  .dialog__panel[data-shaking] {
+    animation: none;
+  }
+}