@stisla/style 3.0.0-beta.8

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { C as ComposerProps, a as Composed } from './config-CARtrJ7I.js';
+export { b as ComposerConfig, T as Tune, V as VariantDefs, c as button, d as composer } from './config-CARtrJ7I.js';
+
+declare const sidebarKnobs: readonly ["gap", "width", "widthCollapsed", "bg", "color", "paddingBlock", "paddingInline", "transitionDuration", "brandColor", "brandIconSize", "brandGap", "groupGap", "groupTitleColor", "groupTitleFontSize", "groupTitleFontWeight", "buttonGap", "buttonHeight", "buttonPaddingInline", "buttonRadius", "buttonColor", "buttonFontWeight", "buttonIconSize", "buttonIconColor", "buttonBgHover", "buttonColorHover", "buttonBgActive", "buttonColorActive", "itemActionSize", "submenuBorderColor", "submenuPaddingInlineStart", "submenuMarginInlineStart"];
+type SidebarKnob = (typeof sidebarKnobs)[number];
+declare const sidebar: (props?: ComposerProps<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, "gap" | "paddingInline" | "color" | "bg" | "width" | "widthCollapsed" | "paddingBlock" | "transitionDuration" | "brandColor" | "brandIconSize" | "brandGap" | "groupGap" | "groupTitleColor" | "groupTitleFontSize" | "groupTitleFontWeight" | "buttonGap" | "buttonHeight" | "buttonPaddingInline" | "buttonRadius" | "buttonColor" | "buttonFontWeight" | "buttonIconSize" | "buttonIconColor" | "buttonBgHover" | "buttonColorHover" | "buttonBgActive" | "buttonColorActive" | "itemActionSize" | "submenuBorderColor" | "submenuPaddingInlineStart" | "submenuMarginInlineStart"> | undefined) => Composed;
+
+export { Composed, ComposerProps, type SidebarKnob, sidebar, sidebarKnobs };

package/dist/index.js

@@ -0,0 +1,60 @@
+import {
+  button,
+  composer
+} from "./chunk-K45KLI3Y.js";
+
+// src/sidebar/config.ts
+var sidebarKnobs = [
+  // Shell
+  "gap",
+  "width",
+  "widthCollapsed",
+  "bg",
+  "color",
+  "paddingBlock",
+  "paddingInline",
+  "transitionDuration",
+  // Brand
+  "brandColor",
+  "brandIconSize",
+  "brandGap",
+  // Group
+  "groupGap",
+  "groupTitleColor",
+  "groupTitleFontSize",
+  "groupTitleFontWeight",
+  // Button (item)
+  "buttonGap",
+  "buttonHeight",
+  "buttonPaddingInline",
+  "buttonRadius",
+  "buttonColor",
+  "buttonFontWeight",
+  "buttonIconSize",
+  "buttonIconColor",
+  "buttonBgHover",
+  "buttonColorHover",
+  "buttonBgActive",
+  "buttonColorActive",
+  // Item action
+  "itemActionSize",
+  // Submenu
+  "submenuBorderColor",
+  "submenuPaddingInlineStart",
+  "submenuMarginInlineStart"
+];
+var sidebar = composer({
+  base: "sidebar",
+  variants: {
+    size: { sm: "sidebar--sm", md: "", lg: "sidebar--lg" }
+  },
+  defaultVariants: { size: "md" },
+  knobPrefix: "sidebar",
+  knobs: sidebarKnobs
+});
+export {
+  button,
+  composer,
+  sidebar,
+  sidebarKnobs
+};

package/dist/indicator/indicator.css

@@ -0,0 +1,84 @@
+/* @stisla/style — Indicator. Ported from src/scss/components/_indicator.scss. A contentless status dot
+ * (presence, liveness, unread) — distinct from .badge, which labels with a count or word. The dot is
+ * the ::after; an opt-in pulse halo is the ::before. Pin it over an avatar/icon corner with absolute
+ * positioning on a relative host. References the @theme tokens (colors var(--color-*), spacing/sizes
+ * --spacing(n)). Knobs are --indicator-*. Sizes compact/roomy → sm/lg. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .indicator {
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: var(--indicator-size, --spacing(2.5));
+    height: var(--indicator-size, --spacing(2.5));
+    vertical-align: middle;
+  }
+
+  /* The dot — ::after so it paints above the ::before pulse without a z-index. The ring is an opt-in
+     separator halo (0-width by default) for sitting the dot over a busy surface. */
+  .indicator::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--indicator-color, var(--color-muted-foreground));
+    border-radius: 50%;
+    box-shadow: 0 0 0 var(--indicator-ring-width, 0px) var(--indicator-ring-color, var(--color-background));
+  }
+
+  /* === Intent modifiers === */
+  .indicator--primary {
+    --indicator-color: var(--color-primary);
+  }
+  .indicator--success {
+    --indicator-color: var(--color-success);
+  }
+  .indicator--warning {
+    --indicator-color: var(--color-warning);
+  }
+  .indicator--danger {
+    --indicator-color: var(--color-danger);
+  }
+  .indicator--info {
+    --indicator-color: var(--color-info);
+  }
+
+  /* === Sizes (base = md) === */
+  .indicator--sm {
+    --indicator-size: --spacing(2);
+  }
+  .indicator--lg {
+    --indicator-size: --spacing(3.5);
+  }
+
+  /* === Pulse (ping halo) === an expanding, fading ring in the dot's color for "live" signals. The
+     ::before paints behind the ::after dot and emanates outward. */
+  .indicator--pulse::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--indicator-color, var(--color-muted-foreground));
+    border-radius: 50%;
+    opacity: 0;
+    animation: st-indicator-pulse var(--indicator-pulse-duration, 1.2s) cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+
+  /* A still dot reads as a valid status (unlike a frozen spinner), so drop the ping rather than slow it. */
+  @media (prefers-reduced-motion: reduce) {
+    .indicator--pulse::before {
+      animation: none;
+    }
+  }
+}
+
+@keyframes st-indicator-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.55;
+  }
+  75%,
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}

package/dist/input/input.css

@@ -0,0 +1,220 @@
+/* @stisla/style — Input. Ported from src/scss/components/_input.scss + the form-field-base mixin
+ * (foundation/_mixins.scss). References the @theme tokens: colors var(--color-*), spacing
+ * --spacing(n), type var(--text-*) / var(--font-weight-*), radius var(--radius-*). Only no-namespace
+ * customs use --st-* (border-width, duration). Knobs are --input-* (fallback-default). @layer components.
+ *
+ * The shared field base (border, height, padding, focus halo, validation, hover, disabled, readonly)
+ * is DUPLICATED here with the --input-* namespace — plain CSS has no parameterized mixin. Keep the
+ * base in sync with textarea.css + select.css (the other two consumers of the former form-field-base).
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* === Shared field base (= former form-field-base, --input-* namespace) === */
+  .input {
+    display: block;
+    width: 100%;
+    height: var(--input-height, --spacing(9));
+    padding-block: var(--input-padding-block, 0);
+    padding-inline: var(--input-padding-inline, --spacing(2.5));
+    font-family: inherit;
+    font-size: var(--input-font-size, var(--text-sm));
+    font-weight: var(--font-weight-normal);
+    line-height: var(--leading-tight);
+    color: var(--input-color, var(--color-foreground));
+    background: var(--input-bg, var(--color-surface));
+    border: var(--input-border-width, var(--st-border-width)) solid
+      var(--input-border-color, var(--color-border-strong));
+    border-radius: var(--input-radius, var(--radius-md));
+    /* Strip UA chrome (search cancel, number spinner); types that want an indicator paint it back. */
+    appearance: none;
+    transition:
+      border-color var(--transition-duration-fast) ease,
+      box-shadow var(--transition-duration-fast) ease,
+      background-color var(--transition-duration-fast) ease;
+
+    /* iOS Safari zooms when a focused field's font-size < 16px and never zooms back. Bump touch to 1rem. */
+    @media (pointer: coarse) {
+      font-size: var(--input-font-size, var(--text-base));
+    }
+
+    &::placeholder {
+      color: var(--input-placeholder, var(--color-muted-foreground));
+      opacity: 1;
+    }
+
+    /* Hover — only when idle. Focus owns the ring; invalid owns the red rim; disabled rejects the cue. */
+    &: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 — soft halo + primary border (the field already wears a border; an offset outline reads
+       aggressive against a continuously-bordered shape). */
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px
+        color-mix(in oklch, var(--color-ring) 25%, transparent);
+    }
+
+    /* Validation. aria-invalid for server / JS / explicit; :user-invalid for native validation. */
+    &[aria-invalid="true"],
+    &:user-invalid {
+      border-color: var(--color-danger);
+    }
+    &[aria-invalid="true"]:focus-visible,
+    &:user-invalid:focus-visible {
+      border-color: var(--color-danger);
+      box-shadow: 0 0 0 3px
+        color-mix(in oklch, var(--color-danger) 25%, transparent);
+    }
+
+    &:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    /* Readonly (not disabled) — swap bg one tier so it reads "selectable, not editable". */
+    &[readonly]:not(:disabled) {
+      background: var(--color-surface-2);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  /* === <input type="file"> ===
+   * Flex row: the selector button is a small inset chip (mirrors .button--sm.button--neutral; the
+   * shadow DOM blocks .button classes, so the rules are inlined) and the filename trails after it. */
+  .input[type="file"] {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--color-muted-foreground);
+  }
+  .input[type="file"]::file-selector-button {
+    margin-block-start: 0.4063rem;
+    margin-inline-end: --spacing(2.5);
+    padding: --spacing(0.5) --spacing(2);
+    font-family: inherit;
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-tight);
+    color: var(--color-neutral-foreground);
+    background: var(--color-neutral);
+    border: var(--st-border-width) solid
+      color-mix(
+        in oklch,
+        var(--color-neutral) 85%,
+        var(--color-muted-foreground)
+      );
+    border-radius: calc(var(--input-radius, var(--radius-md)) - --spacing(1));
+    cursor: pointer;
+    transition: background-color var(--transition-duration-fast) ease;
+  }
+  .input[type="file"]::file-selector-button:hover {
+    background: color-mix(in oklch, var(--color-neutral) 88%, black);
+  }
+
+  /* === Native picker indicators ===
+   * The UA paints ::-webkit-calendar-picker-indicator black in both themes (invisible on a dark
+   * surface). Replace with a lucide glyph painted via background-color + mask so it tracks
+   * --color-muted-foreground and themes for free. Firefox has no such pseudo (fully native picker). */
+  .input[type="date"]::-webkit-calendar-picker-indicator,
+  .input[type="datetime-local"]::-webkit-calendar-picker-indicator,
+  .input[type="month"]::-webkit-calendar-picker-indicator,
+  .input[type="week"]::-webkit-calendar-picker-indicator {
+    width: --spacing(4);
+    height: --spacing(4);
+    background-color: var(--color-muted-foreground);
+    background-image: none;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")
+      no-repeat center / contain;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")
+      no-repeat center / contain;
+    cursor: pointer;
+    opacity: 1;
+    transition: background-color var(--transition-duration-fast) ease;
+  }
+
+  .input[type="time"]::-webkit-calendar-picker-indicator {
+    width: --spacing(4);
+    height: --spacing(4);
+    background-color: var(--color-muted-foreground);
+    background-image: none;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")
+      no-repeat center / contain;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")
+      no-repeat center / contain;
+    cursor: pointer;
+    opacity: 1;
+    transition: background-color var(--transition-duration-fast) ease;
+  }
+
+  .input::-webkit-calendar-picker-indicator:hover {
+    background-color: var(--color-foreground);
+  }
+
+  /* === <input type="color"> ===
+   * Native swatch inside our field shape. Width collapses to a small fixed swatch; inner padding lets
+   * the swatch wear the field radius via the inner-radius rule (outer − outer-padding). */
+  .input[type="color"] {
+    width: --spacing(12);
+    padding: --spacing(1);
+    cursor: pointer;
+  }
+  .input[type="color"]::-webkit-color-swatch {
+    border: 0;
+    border-radius: calc(var(--input-radius, var(--radius-md)) - --spacing(1));
+  }
+  .input[type="color"]::-moz-color-swatch {
+    border: 0;
+    border-radius: calc(var(--input-radius, var(--radius-md)) - --spacing(1));
+  }
+
+  /* === Sizes (base = md) === */
+  .input--sm {
+    --input-radius: var(--radius-sm);
+    --input-height: --spacing(7);
+    --input-padding-inline: --spacing(2);
+    --input-font-size: var(--text-xs);
+    @media (pointer: coarse) {
+      --input-font-size: var(--text-base);
+    }
+  }
+
+  .input--lg {
+    --input-radius: var(--radius-lg);
+    --input-height: --spacing(11);
+    --input-padding-inline: --spacing(3.5);
+    --input-font-size: var(--text-base);
+  }
+
+  /* === Plaintext ===
+   * Readonly bare-text variant. Strips the field affordance but keeps the height so it aligns with
+   * sibling .input fields in a form row. Pair with `readonly` on the input. */
+  .input--plaintext {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    height: --spacing(9);
+    padding: 0;
+    font-family: inherit;
+    font-size: var(--text-sm);
+    line-height: var(--leading-tight);
+    color: var(--color-foreground);
+    background: transparent;
+    border: var(--st-border-width) solid transparent;
+    outline: none;
+    appearance: none;
+  }
+}

package/dist/input-group/input-group.css

@@ -0,0 +1,141 @@
+/* @stisla/style — Input group. Ported from src/scss/components/_input-group.scss. Wrapper-owns-chrome:
+ * the .input-group carries the border, bg, radius, and focus halo; field children go transparent so
+ * the addon + input pair shares one continuous surface with one focus state. References the @theme
+ * tokens (colors var(--color-*), spacing --spacing(n), radius var(--radius-*)); only no-namespace
+ * customs use --st-* (border-width, duration). Knobs are --input-group-*. State via attributes
+ * (:focus-visible / [aria-invalid] / :user-invalid / :disabled forwarded through :has()), no is-*.
+ * @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .input-group {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    /* Border-inclusive height (border-box): the wrapper owns the control height; its border eats INTO
+       this value. Inner fields drop their own height and stretch to fill. */
+    height: var(--input-group-height, --spacing(9));
+    background: var(--input-group-bg, var(--color-surface));
+    border: var(--input-group-border-width, var(--st-border-width)) solid
+      var(--input-group-border-color, var(--color-border-strong));
+    border-radius: var(--input-group-radius, var(--radius-md));
+    transition:
+      border-color var(--transition-duration-fast) ease,
+      box-shadow var(--transition-duration-fast) ease;
+
+    /* Focus the whole group when an editable child is focused. */
+    &:has(> :is(.input, .select, .textarea):focus-visible) {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 25%, transparent);
+    }
+
+    /* Validation forwarding — an invalid child paints the wrapper red so the message reads on one row. */
+    &:has(> [aria-invalid="true"]),
+    &:has(> :user-invalid) {
+      border-color: var(--color-danger);
+    }
+    &:has(> [aria-invalid="true"]:focus-visible),
+    &:has(> :user-invalid:focus-visible) {
+      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 25%, transparent);
+    }
+
+    /* Strip chrome from field children — wrapper owns it. Zero only background-color (not the
+       `background` shorthand) so a <select>'s chevron image survives. Reset hover + focus too so the
+       field's own halo doesn't fight the group focus. */
+    > :is(.input, .select, .textarea) {
+      background-color: transparent;
+      border-color: transparent;
+      box-shadow: none;
+      height: auto;
+
+      &:hover,
+      &:focus-visible {
+        background-color: transparent;
+        border-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    /* Textarea groups grow with content — release the fixed wrapper height. */
+    &:has(> .textarea) {
+      height: auto;
+    }
+
+    > :is(.input, .select, .textarea)[readonly] {
+      background-color: transparent;
+    }
+
+    /* Inset buttons — a chip floating inside the field, not a slab welded to its edge. Height
+       re-derives from the wrapper (minus its border and 2× inset) so the chip centers with even
+       gaps; inner radius stays concentric with the wrapper. */
+    > .button {
+      height: calc(
+        var(--input-group-height, --spacing(9)) - 2 * var(--st-border-width) - 2 *
+          var(--input-group-inset, --spacing(1))
+      );
+      margin: var(--input-group-inset, --spacing(1));
+      border-radius: calc(
+        var(--input-group-radius, var(--radius-md)) - var(--input-group-inset, --spacing(1))
+      );
+    }
+
+    /* Drop the addon's inner padding where it meets a sibling field (no seam → matching padding would
+       double into a too-wide gap). Keep the outside padding so the addon hugs the wrapper edge. */
+    > .input-group__text:first-child {
+      padding-inline-end: 0;
+    }
+    > .input-group__text:last-child {
+      padding-inline-start: 0;
+    }
+
+    /* Textareas grow past the height floor; anchor addons to the first line. */
+    &:has(> .textarea) > .input-group__text {
+      align-self: flex-start;
+      height: var(--input-group-height, --spacing(9));
+    }
+
+    /* Disabled forwarding — the transparent inner field can't show its own dim, so move it to the
+       wrapper and reset the child's opacity so the dim doesn't compound. */
+    &:has(> :disabled) {
+      opacity: 0.55;
+      > :is(.input, .select, .textarea):disabled {
+        opacity: 1;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  /* === Sizes (base = md) — pair with the field child's own size modifier (.input--sm, etc.). === */
+  .input-group--sm {
+    --input-group-radius: var(--radius-sm);
+    --input-group-height: --spacing(7);
+    --input-group-padding-inline: --spacing(2);
+  }
+
+  .input-group--lg {
+    --input-group-radius: var(--radius-lg);
+    --input-group-height: --spacing(11);
+    --input-group-padding-inline: --spacing(3.5);
+  }
+
+  /* === Addon === no bg, no border, muted color; inline-flex centers icon + label across the height. */
+  .input-group__text {
+    display: inline-flex;
+    align-items: center;
+    padding-inline: var(--input-group-padding-inline, --spacing(2.5));
+    background: transparent;
+    border: 0;
+    color: var(--input-group-addon-color, var(--color-muted-foreground));
+    font-size: inherit;
+    line-height: 1.2;
+    white-space: nowrap;
+
+    > :is(svg, i) {
+      width: --spacing(4);
+      height: --spacing(4);
+      flex-shrink: 0;
+    }
+  }
+}

package/dist/kbd/kbd.css

@@ -0,0 +1,55 @@
+/* @stisla/style — Kbd. Ported from src/scss/components/_kbd.scss. A keyboard-shortcut chip. <kbd> is
+ * unstyled at the bare-element level (reboot); .kbd opts in. Sits in the neutral interactional tier;
+ * the rim uses the same color-mix recipe as .button--neutral so the border stays visible in dark mode.
+ * Font-size is rem-based (a deliberate UI element, not tracking surrounding text). References the
+ * @theme tokens (colors var(--color-*), spacing --spacing(n), type var(--text-*) / var(--font-mono) /
+ * var(--font-weight-*) / var(--leading-*), radius var(--radius-*)); only no-namespace customs use
+ * --st-* (border-width). Knobs are --kbd-*. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .kbd {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kbd-gap, --spacing(1));
+    padding-block: var(--kbd-padding-block, --spacing(0.75));
+    padding-inline: var(--kbd-padding-inline, --spacing(2));
+    font-family: var(--font-mono);
+    font-size: var(--kbd-font-size, var(--text-xs));
+    font-weight: var(--kbd-font-weight, var(--font-weight-medium));
+    line-height: var(--leading-none);
+    color: var(--kbd-color, var(--color-neutral-foreground));
+    background: var(--kbd-bg, var(--color-neutral));
+    border: var(--st-border-width) solid
+      var(
+        --kbd-rim,
+        color-mix(
+          in oklch,
+          var(--color-neutral) 85%,
+          var(--color-muted-foreground)
+        )
+      );
+    border-radius: var(--kbd-radius, 0.5rem); /* intentional for 8px */
+    /* Bottom edge in the rim color so the chip reads as a key cap. */
+    box-shadow: 0 1px 0
+      var(
+        --kbd-rim,
+        color-mix(
+          in oklch,
+          var(--color-neutral) 85%,
+          var(--color-muted-foreground)
+        )
+      );
+  }
+
+  /* Combo shortcuts — a .kbd wrapping nested .kbd elements becomes an invisible wrapper so each inner
+     cap reads as its own chip side-by-side. */
+  .kbd:has(> .kbd) {
+    display: inline-flex;
+    gap: --spacing(1);
+    align-items: center;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+  }
+}

package/dist/link/link.css

@@ -0,0 +1,28 @@
+/* @stisla/style — Link. Ported from src/scss/components/_link.scss. Reboot strips <a> color +
+ * underline globally; .link is the opt-back-in for inline links in app UI (helper text, explainers,
+ * cross-references) — the visual twin of .prose a. References the @theme tokens (colors var(--color-*),
+ * spacing/sizes --spacing(n)). Knobs are --link-*; --link-color-hover derives from --link-color so
+ * moving the color moves the hover. @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  .link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--link-gap, --spacing(1));
+    color: var(--link-color, var(--color-primary));
+    text-decoration: underline;
+    text-underline-offset: var(--link-decoration-offset, 2px);
+    text-decoration-thickness: var(--link-decoration-thickness, 1px);
+  }
+
+  .link svg {
+    width: --spacing(4.5);
+  }
+
+  .link:hover {
+    color: var(
+      --link-color-hover,
+      color-mix(in oklch, var(--link-color, var(--color-primary)) 80%, black)
+    );
+  }
+}