@stisla/style 3.0.0-beta.8

package/dist/timeline/timeline.css

@@ -0,0 +1,271 @@
+/* @stisla/style — Timeline. Ported from src/scss/components/_timeline.scss. An ordered sequence of
+ * events along a vertical rail: each .timeline__item pairs a .timeline__marker (dot / icon / number /
+ * avatar) on the rail with a .timeline__body (time, title, text). Pure layout, no JS — status rides the
+ * author-set [data-state] attribute and intent rides .timeline__marker--<intent>. The rail line is a
+ * pseudo-element on the item (no DOM node). References the @theme tokens (colors var(--color-*),
+ * sizes/spacing --spacing(n), type var(--text-*) / var(--font-weight-*) / var(--leading-*)); only
+ * no-namespace customs use --st-* (border-width). Knobs are --timeline-*. @layer components.
+ * Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* Reset list chrome so the root can be an <ol> (the order is meaningful). */
+  .timeline {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* === Item === marker lane + body. align-items:start keeps the marker its own height; the
+     padding-block-end carries the inter-item gap so the rail reaches the next marker. */
+  .timeline__item {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--timeline-marker-size, --spacing(7)) 1fr;
+    align-items: start;
+    column-gap: var(--timeline-gutter, --spacing(4));
+    padding-block-end: var(--timeline-gap, --spacing(6));
+  }
+
+  .timeline__item:last-child {
+    padding-block-end: 0;
+  }
+
+  /* === Connector === the rail line, a pseudo-element. Runs through the gap between one marker lane and
+     the next, inset by --timeline-connector-gap at both ends so it floats clear of both markers.
+     Suppressed on the last item so the rail stops at the final marker. Centred on the marker lane via a
+     logical inline offset (no transform) so it tracks RTL. width:0 + border-inline-start lets the
+     solid/dashed switch ride one property (--timeline-connector-style). */
+  .timeline__item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    inset-block-start: calc(
+      var(--timeline-marker-size, --spacing(7)) +
+        var(--timeline-connector-gap, --spacing(1.5))
+    );
+    inset-block-end: var(--timeline-connector-gap, --spacing(1.5));
+    inset-inline-start: calc(
+      var(--timeline-marker-size, --spacing(7)) / 2 -
+        var(--timeline-connector-width, 2px) / 2
+    );
+    width: 0;
+    border-inline-start: var(--timeline-connector-width, 2px)
+      var(--timeline-connector-style, solid)
+      var(--timeline-connector-color, var(--color-border));
+  }
+
+  /* === Marker === centred in its lane. An empty marker shows a small filled dot via ::before; a marker
+     with content (icon / number / avatar) becomes a soft-tinted bordered circle. z-index keeps it above
+     the rail line in any edge overlap. */
+  .timeline__marker {
+    grid-column: 1;
+    justify-self: center;
+    align-self: start;
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--timeline-marker-size, --spacing(7));
+    height: var(--timeline-marker-size, --spacing(7));
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-none);
+    color: var(--timeline-marker-color, var(--color-primary));
+  }
+
+  /* Bare dot — empty marker. Small filled circle centred in the lane. */
+  .timeline__marker:empty::before {
+    content: "";
+    width: var(--timeline-dot-size, --spacing(2.75));
+    height: var(--timeline-dot-size, --spacing(2.75));
+    border-radius: 50%;
+    background: var(--timeline-marker-color, var(--color-primary));
+  }
+
+  /* Icon / content marker — soft-tinted circle. Tint in oklab (not oklch): mixing a saturated hue toward
+     an opaque near-white in oklch rotates the hue (a blue reads pink); oklab interpolates straight. The
+     border mixes with transparent, where premultiplied alpha keeps the hue, so it stays oklch. */
+  .timeline__marker:not(:empty) {
+    background: color-mix(
+      in oklab,
+      var(--timeline-marker-color, var(--color-primary)) 14%,
+      var(--color-surface)
+    );
+    border: var(--st-border-width) solid
+      color-mix(
+        in oklch,
+        var(--timeline-marker-color, var(--color-primary)) 32%,
+        transparent
+      );
+    border-radius: 50%;
+  }
+
+  /* Avatar / image markers carry their own circular shape, so shed the tint and ring and size them to
+     the lane. */
+  .timeline__marker:has(> .avatar),
+  .timeline__marker:has(> img) {
+    background: none;
+    border: 0;
+  }
+  .timeline__marker > .avatar {
+    --avatar-size: var(--timeline-marker-size, --spacing(7));
+  }
+  .timeline__marker > img {
+    width: var(--timeline-marker-size, --spacing(7));
+    height: var(--timeline-marker-size, --spacing(7));
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  /* Bare glyphs pin to a sensible size so markers align across icon packs (mirrors .media__figure). The
+     :only-child gate leaves multi-element markers to size themselves. */
+  .timeline__marker > :is(svg, i):only-child {
+    width: --spacing(4);
+    height: --spacing(4);
+    flex-shrink: 0;
+  }
+
+  /* === Body === */
+  .timeline__body {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    gap: --spacing(0.5);
+    min-width: 0;
+  }
+
+  .timeline__time {
+    font-size: var(--text-xs);
+    line-height: var(--leading-normal);
+    color: var(--color-muted-foreground);
+  }
+
+  .timeline__title {
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-tight);
+    color: var(--color-foreground);
+  }
+
+  .timeline__text {
+    line-height: var(--leading-normal);
+    color: var(--color-muted-foreground);
+  }
+
+  /* === Status (data-state) === author-set, independent of marker colour. complete keeps the solid rail;
+     current rings the marker and dashes the rail leaving it; pending mutes the marker, hollows the dot,
+     and dashes the rail. */
+
+  /* Complete — solid-filled marker so a done step reads as filled rather than tinted. */
+  .timeline__item[data-state="complete"] .timeline__marker:not(:empty) {
+    background: var(--timeline-marker-color, var(--color-primary));
+    border-color: var(--timeline-marker-color, var(--color-primary));
+    color: var(--timeline-marker-on-color, var(--color-primary-foreground));
+  }
+
+  /* Current — ring halo + dashed rail below. The ping radiates a ring outward and fades, like a live
+     locator; reduced motion keeps the static halo and drops the ping. */
+  .timeline__item[data-state="current"] {
+    --timeline-connector-style: dashed;
+  }
+  .timeline__item[data-state="current"] .timeline__marker {
+    box-shadow: 0 0 0 var(--timeline-marker-ring-size, --spacing(1))
+      var(
+        --timeline-marker-ring,
+        color-mix(
+          in oklch,
+          var(--timeline-marker-color, var(--color-primary)) 22%,
+          transparent
+        )
+      );
+  }
+  .timeline__item[data-state="current"] .timeline__marker::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: var(--timeline-connector-width, 2px) solid
+      color-mix(
+        in oklch,
+        var(--timeline-marker-color, var(--color-primary)) 45%,
+        transparent
+      );
+    animation: timeline-ping var(--timeline-ping-duration, 1.8s)
+      cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+
+  /* Pending — muted marker, hollow dot, dashed rail. The colour override flows to the dot, icon, and
+     soft-circle tint at once. */
+  .timeline__item[data-state="pending"] {
+    --timeline-marker-color: var(--color-muted-foreground);
+    --timeline-connector-style: dashed;
+  }
+  .timeline__item[data-state="pending"] .timeline__marker:empty::before {
+    background: transparent;
+    border: var(--timeline-connector-width, 2px) solid
+      var(--timeline-marker-color, var(--color-muted-foreground));
+  }
+
+  /* === Intent modifiers === shorthand for a palette token (fixed meaning). For a one-off colour set
+     --timeline-marker-color on the item instead. */
+  .timeline__marker--primary {
+    --timeline-marker-color: var(--color-primary);
+  }
+  .timeline__marker--success {
+    --timeline-marker-color: var(--color-success);
+  }
+  .timeline__marker--danger {
+    --timeline-marker-color: var(--color-danger);
+  }
+  .timeline__marker--warning {
+    --timeline-marker-color: var(--color-warning);
+  }
+  .timeline__marker--info {
+    --timeline-marker-color: var(--color-info);
+  }
+
+  /* === Alternate layout === centre rail, items alternating sides. Needs width, so it only engages at md
+     and up; below that it falls through to the standard left-rail grid. Three columns: body / rail /
+     body. Odd items take the inline-start body, even take inline-end; the connector re-centres. */
+  @media (min-width: 48rem) {
+    .timeline--alternate .timeline__item {
+      grid-template-columns: 1fr var(--timeline-marker-size, --spacing(7)) 1fr;
+    }
+    .timeline--alternate .timeline__marker {
+      grid-column: 2;
+    }
+    .timeline--alternate .timeline__item:nth-child(odd) .timeline__body {
+      grid-column: 1;
+      text-align: end;
+    }
+    .timeline--alternate .timeline__item:nth-child(even) .timeline__body {
+      grid-column: 3;
+      text-align: start;
+    }
+    .timeline--alternate .timeline__item:not(:last-child)::before {
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .timeline__item[data-state="current"] .timeline__marker::after {
+      display: none;
+    }
+  }
+}
+
+@keyframes timeline-ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%,
+  100% {
+    transform: scale(1.85);
+    opacity: 0;
+  }
+}

package/dist/toast/toast.css

@@ -0,0 +1,267 @@
+/* @stisla/style — Toast. Ported from src/scss/components/_toast.scss. A status message: a fixed
+ * .toast-region stack at one of six viewport corners holds .toast cards laid out as a 3-column grid
+ * [icon | content | close]. Shown via [data-state="open|closed"] on each toast (base renders open, so
+ * static markup-first toasts show without JS). 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-toast, above modal so a toast
+ * can confirm a dialog action). Knobs are --toast-*. Enqueue/dismiss/timers ship with the JS layer; the entrance
+ * fade uses @starting-style + allow-discrete so region-mounted toasts animate with no JS paint.
+ * @layer components. Authoring rules: ../../../../PORTING.md */
+
+@layer components {
+  /* === Region === fixed stack at a viewport corner; pointer-events: none so the page stays
+     interactive in the gaps, each toast re-enabling events on itself. Default placement is top-end. */
+  .toast-region {
+    position: fixed;
+    z-index: var(--toast-region-z-index, var(--z-index-toast));
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-region-gap, --spacing(4));
+    max-width: var(--toast-region-max-width, --spacing(96));
+    width: calc(100% - 2 * var(--toast-region-inset, --spacing(4)));
+    pointer-events: none;
+
+    inset-block-start: var(--toast-region-inset, --spacing(4));
+    inset-inline-end: var(--toast-region-inset, --spacing(4));
+  }
+
+  .toast-region--top-start {
+    inset-block-start: var(--toast-region-inset, --spacing(4));
+    inset-block-end: auto;
+    inset-inline-start: var(--toast-region-inset, --spacing(4));
+    inset-inline-end: auto;
+  }
+
+  .toast-region--top-center {
+    inset-block-start: var(--toast-region-inset, --spacing(4));
+    inset-block-end: auto;
+    inset-inline: 0;
+    margin-inline: auto;
+  }
+
+  .toast-region--top-end {
+    inset-block-start: var(--toast-region-inset, --spacing(4));
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: var(--toast-region-inset, --spacing(4));
+    align-items: end;
+  }
+
+  /* Bottom variants reverse so the newest toast sits at the corner and older ones push up. */
+  .toast-region--bottom-start {
+    inset-block-start: auto;
+    inset-block-end: var(--toast-region-inset, --spacing(4));
+    inset-inline-start: var(--toast-region-inset, --spacing(4));
+    inset-inline-end: auto;
+    flex-direction: column-reverse;
+  }
+
+  .toast-region--bottom-center {
+    inset-block-start: auto;
+    inset-block-end: var(--toast-region-inset, --spacing(4));
+    inset-inline: 0;
+    margin-inline: auto;
+    flex-direction: column-reverse;
+  }
+
+  .toast-region--bottom-end {
+    inset-block-start: auto;
+    inset-block-end: var(--toast-region-inset, --spacing(4));
+    inset-inline-start: auto;
+    inset-inline-end: var(--toast-region-inset, --spacing(4));
+    flex-direction: column-reverse;
+    align-items: end;
+  }
+
+  /* === Toast === base = displayed (a bare .toast or one inline in docs renders without a fade). The
+     allow-discrete on display holds the grid value through the close fade so the transition plays
+     before layout collapses. */
+  .toast {
+    z-index: var(--toast-z-index, var(--z-index-toast));
+    pointer-events: auto;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: start;
+    column-gap: var(--toast-column-gap, --spacing(3));
+    width: 100%;
+    min-width: var(--toast-min-width, --spacing(72));
+    max-width: var(--toast-max-width, --spacing(87.5));
+    padding: var(--toast-padding-block, --spacing(4))
+      var(--toast-padding-inline, --spacing(4));
+    background-color: var(--toast-bg, var(--color-surface));
+    color: var(--toast-color, var(--color-foreground));
+    line-height: var(--leading-none);
+    border: var(--toast-border-width, var(--st-border-width)) solid
+      var(--toast-border-color, var(--color-border));
+    border-radius: var(--toast-radius, var(--radius-lg));
+    box-shadow: var(--toast-shadow, var(--shadow-md));
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--toast-transition-duration, var(--transition-duration-normal)) ease,
+      transform var(--toast-transition-duration, var(--transition-duration-normal)) ease,
+      display var(--toast-transition-duration, var(--transition-duration-normal)) ease
+        allow-discrete;
+  }
+
+  /* Bottom-region toasts slide in from below so the motion matches the stack growth direction. */
+  .toast-region--bottom-start > .toast,
+  .toast-region--bottom-center > .toast,
+  .toast-region--bottom-end > .toast {
+    --toast-enter-transform: translateY(--spacing(2));
+  }
+
+  /* Single-line toasts (title only) center vertically — the start-aligned optical nudge that keeps a
+     multi-line title lined up with the icon reads off-balance with one line. */
+  .toast:not(:has(.toast__body)):not(:has(.toast__action)) {
+    align-items: center;
+  }
+  .toast:not(:has(.toast__body)):not(:has(.toast__action)) .toast__icon {
+    margin-block-start: 0;
+  }
+
+  .toast[data-state="closed"] {
+    display: none;
+    opacity: 0;
+    transform: var(
+      --toast-enter-transform,
+      translateY(calc(--spacing(2) * -1))
+    );
+  }
+
+  /* Region-mounted open toasts get an entrance fade via @starting-style (the "from" values as the
+     element leaves display: none). Static inline toasts don't match, so they render flat. */
+  .toast-region > .toast[data-state="open"] {
+    @starting-style {
+      opacity: 0;
+      transform: var(
+        --toast-enter-transform,
+        translateY(calc(--spacing(2) * -1))
+      );
+    }
+  }
+
+  /* === Parts === col 1, leading visual (required). The small optical nudge lands the icon's center
+     on the title's cap line; grid align-items: start anchors every column to the row top. */
+  .toast__icon {
+    grid-column: 1;
+    margin-block-start: --spacing(0.5);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toast-icon-size, --spacing(4.5));
+    height: var(--toast-icon-size, --spacing(4.5));
+    color: var(--toast-icon-color, var(--color-muted-foreground));
+    line-height: var(--leading-none);
+    flex-shrink: 0;
+  }
+  .toast__icon > svg,
+  .toast__icon > i {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Col 2 — content stack; its own vertical flex gap, independent of the grid row gap. */
+  .toast__content {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-content-gap, --spacing(1.5));
+    min-width: 0;
+  }
+
+  .toast__header {
+    display: flex;
+    align-items: center;
+    gap: --spacing(2);
+    font-size: var(--toast-header-font-size, var(--text-sm));
+    font-weight: var(--toast-header-font-weight, var(--font-weight-semibold));
+    line-height: var(--leading-none);
+    color: var(--toast-color, var(--color-foreground));
+    min-width: 0;
+  }
+
+  /* Optional timestamp slot — "10 mins ago"; reads muted next to the title. */
+  .toast__timestamp {
+    font-weight: var(--font-weight-normal);
+    font-size: var(--text-xs);
+    color: var(--color-muted-foreground);
+  }
+
+  .toast__body {
+    font-size: var(--toast-body-font-size, var(--text-sm));
+    line-height: var(--leading-normal);
+    color: var(--toast-body-color, var(--color-muted-foreground));
+    min-width: 0;
+  }
+
+  .toast__action {
+    display: flex;
+    align-items: center;
+    gap: var(--toast-action-gap, --spacing(1));
+    margin-block-start: --spacing(1.5);
+  }
+
+  /* Col 3 — close chip; anchored top-right, never inflates row height beyond the content stack. */
+  .toast__close {
+    grid-column: 3;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--toast-close-size, --spacing(6));
+    height: var(--toast-close-size, --spacing(6));
+    padding: 0;
+    color: var(--toast-close-color, var(--color-muted-foreground));
+    background-color: transparent;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      color var(--transition-duration-fast) ease;
+  }
+
+  .toast__close:hover {
+    color: var(--toast-close-color-hover, var(--color-foreground));
+    background-color: var(--toast-close-bg-hover, var(--color-accent));
+  }
+
+  .toast__close:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+    color: var(--toast-close-color-hover, var(--color-foreground));
+    background-color: var(--toast-close-bg-hover, var(--color-accent));
+  }
+
+  .toast__close > svg,
+  .toast__close > i {
+    width: --spacing(3.5);
+    height: --spacing(3.5);
+  }
+
+  /* === Intent modifiers === each shifts ONLY the icon color; the surface stays neutral so stacked
+     toasts of mixed intent still read as one family. */
+  .toast--primary {
+    --toast-icon-color: var(--color-primary);
+  }
+  .toast--success {
+    --toast-icon-color: var(--color-success);
+  }
+  .toast--warning {
+    --toast-icon-color: var(--color-warning);
+  }
+  .toast--danger {
+    --toast-icon-color: var(--color-danger);
+  }
+  .toast--info {
+    --toast-icon-color: var(--color-info);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast {
+      transition: none;
+    }
+  }
+}

package/dist/toggle/toggle.css

@@ -0,0 +1,125 @@
+/* @stisla/style — Toggle. Ported from src/scss/components/_toggle.scss. A two-state press button:
+ * outline-neutral rest, accent hover, highlight active. Active comes from THREE sources, all paint
+ * identically: [aria-pressed="true"] (JS press button), [data-state="active"] (JS single-select
+ * member), or .toggle-input:checked + .toggle (form-data, native input drives the label). References
+ * the @theme tokens (colors var(--color-*), spacing/sizes --spacing(n), type var(--text-*) /
+ * var(--font-weight-*) / var(--leading-*), radius var(--radius-*)); only no-namespace customs use
+ * --st-* (border-width, duration). Knobs are --toggle-*; sizes compact/roomy → sm/lg; pill radius
+ * literal 9999px. State via attributes / native, no is-*. @layer components. Authoring: ../../../../PORTING.md */
+
+@layer components {
+  .toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--toggle-gap, --spacing(2));
+    height: var(--toggle-height, --spacing(9));
+    padding-block: var(--toggle-padding-block, 0);
+    padding-inline: var(--toggle-padding-inline, --spacing(3));
+    font-family: inherit;
+    font-size: var(--toggle-font-size, var(--text-sm));
+    font-weight: var(--toggle-font-weight, var(--font-weight-medium));
+    line-height: var(--leading-none);
+    color: var(--toggle-color, var(--color-foreground));
+    background: var(--toggle-bg, transparent);
+    border: var(--toggle-border-width, var(--st-border-width)) solid
+      var(--toggle-border-color, var(--color-border));
+    border-radius: var(--toggle-radius, var(--radius-md));
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition:
+      background-color var(--transition-duration-fast) ease,
+      border-color var(--transition-duration-fast) ease,
+      color var(--transition-duration-fast) ease;
+
+    &:hover {
+      background: var(--toggle-bg-hover, var(--color-accent));
+      color: var(--toggle-color-hover, var(--color-accent-foreground));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--toggle-ring, var(--color-ring));
+      outline-offset: 2px;
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.55;
+    }
+  }
+
+  /* Active — three sources, one paint block (after the base so it wins specificity ties). */
+  .toggle[aria-pressed="true"],
+  .toggle[data-state="active"],
+  .toggle-input:checked + .toggle {
+    background: var(--toggle-bg-active, var(--color-highlight));
+    color: var(--toggle-color-active, var(--color-highlight-foreground));
+    border-color: var(--toggle-border-color-active, var(--toggle-bg-active, var(--color-highlight)));
+  }
+
+  /* Icons scale to font-size — 1em so they shrink with --sm / grow with --lg automatically. */
+  .toggle :is(svg, i, .toggle__icon) {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toggle {
+      transition: none;
+    }
+  }
+
+  /* === Sizes (base = md) === */
+  .toggle--sm {
+    --toggle-radius: var(--radius-sm);
+    --toggle-height: --spacing(7);
+    --toggle-padding-inline: --spacing(2.5);
+    --toggle-font-size: var(--text-xs);
+  }
+  .toggle--lg {
+    --toggle-radius: var(--radius-lg);
+    --toggle-height: --spacing(11);
+    --toggle-padding-inline: --spacing(4);
+    --toggle-font-size: var(--text-base);
+  }
+
+  /* === Icon shapes === square at every size (mirrors .button--icon-only / --icon-round). */
+  .toggle--icon-only {
+    --toggle-padding-inline: 0;
+    width: var(--toggle-height, --spacing(9));
+  }
+  .toggle--icon-round {
+    border-radius: 9999px;
+  }
+
+  /* === Hidden input (form-data path) === visually hidden so SR + keyboard still reach it; the
+     adjacent <label class="toggle"> carries the visible paint via the :checked sibling rule above. */
+  .toggle-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+
+    &:focus-visible + .toggle {
+      outline: 2px solid var(--toggle-ring, var(--color-ring));
+      outline-offset: 2px;
+    }
+    &:disabled + .toggle {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.55;
+    }
+  }
+}