@skdx/docs-kit 0.35.0

package/dist/skins-src/components/text-field.css

@@ -0,0 +1,182 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '../base.css';
+
+/* data-size/data-variant resolve on the root so every part reads the same
+   rung; `md` has an explicit selector for resets. */
+@layer skdx-components {
+  /* Declared on the root so a size set once reaches the input, slots and clear button. */
+  :where(.skdx-text-field),
+  :where(.skdx-text-field)[data-size='md'],
+  :where(.skdx-text-field__input)[data-size='md'] {
+    --skdx-text-field-block-size: var(--skdx-control-height-md);
+    --skdx-text-field-padding-inline: var(--skdx-control-padding-md);
+    --skdx-text-field-font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-text-field)[data-size='sm'],
+  :where(.skdx-text-field__input)[data-size='sm'] {
+    --skdx-text-field-block-size: var(--skdx-control-height-sm);
+    --skdx-text-field-padding-inline: var(--skdx-control-padding-sm);
+    --skdx-text-field-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-text-field)[data-size='lg'],
+  :where(.skdx-text-field__input)[data-size='lg'] {
+    --skdx-text-field-block-size: var(--skdx-control-height-lg);
+    --skdx-text-field-padding-inline: var(--skdx-control-padding-lg);
+    --skdx-text-field-font-size: var(--skdx-font-size-md);
+  }
+  /* Root, input and slot/clear-button are siblings meant to read as one row, not a flex-direction: column stack. */
+  /* control-gap-md, not field-gap: that's the vertical label-to-control gap, a different relationship. */
+  :where(.skdx-text-field) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-control-gap-md);
+  }
+
+  :where(.skdx-text-field__input) {
+    flex: 1;
+    min-inline-size: 0;
+    block-size: var(--skdx-text-field-block-size, var(--skdx-control-height-md));
+    padding-inline: var(--skdx-text-field-padding-inline, var(--skdx-control-padding-md));
+
+    color: var(--skdx-color-field-text);
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-text-field-font-size, var(--skdx-font-size-sm));
+    line-height: var(--skdx-font-line-height-normal);
+
+    transition:
+      border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-text-field__input)::placeholder {
+    color: var(--skdx-color-text-placeholder);
+    /* Placeholders inherit the input's opacity in Firefox; pin it so the
+       colour token is the only thing deciding contrast. */
+    opacity: 1;
+  }
+
+  :where(.skdx-text-field__input):hover:not(:disabled, :read-only) {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  /* The second selector is the Web Components host, whose input is a light-DOM child. */
+  :where(.skdx-text-field__input):focus-visible,
+  :where(.skdx-text-field__input):has(> input:focus-visible) {
+    border-color: var(--skdx-color-field-border-focus);
+  }
+
+  /* base.css's ring keys off the focused element's own class, which the Web
+     Components host's light-DOM input never carries; draw it here instead. */
+  :where(.skdx-text-field__input):has(> input:focus-visible) {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
+
+  /* Invalid is signalled by colour and a thicker border — colour alone fails WCAG 1.4.1 (Use of Colour). */
+  :where(.skdx-text-field__input)[data-invalid],
+  :where(.skdx-text-field__input):user-invalid {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-text-field__input):disabled,
+  :where(.skdx-text-field__input)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Read-only keeps full-contrast text — only the editable affordance (background well) is withdrawn. */
+  :where(.skdx-text-field__input)[readonly],
+  /* :read-only matches the native attribute; TextFieldInput doesn't mirror readOnly as a data attribute. */
+  :where(.skdx-text-field__input):read-only {
+    background-color: var(--skdx-color-field-bg-readonly);
+    cursor: default;
+  }
+
+  :where(.skdx-text-field)[data-variant='filled'] :where(.skdx-text-field__input),
+  :where(.skdx-text-field__input)[data-variant='filled'] {
+    background-color: var(--skdx-color-surface-sunken);
+    border-color: transparent;
+  }
+
+  :where(.skdx-text-field)[data-variant='ghost'] :where(.skdx-text-field__input),
+  :where(.skdx-text-field__input)[data-variant='ghost'] {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  /* Ghost's border returns on hover/focus — its only affordance that the text is editable. */
+  :where(.skdx-text-field)[data-variant='ghost']
+    :where(.skdx-text-field__input):hover:not(:disabled, :read-only),
+  :where(.skdx-text-field__input)[data-variant='ghost']:hover:not(:disabled, :read-only) {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where(.skdx-text-field__clear-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--skdx-target-min);
+    min-block-size: var(--skdx-target-min);
+    /* Icon scales with the rung, but the tap target floors at --skdx-target-min regardless: a sm field must not ship a sub-minimum target. */
+    font-size: var(--skdx-text-field-font-size, var(--skdx-font-size-sm));
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-text-field__clear-button):hover {
+    color: var(--skdx-color-text-default);
+    background-color: var(--skdx-color-action-ghost-bg-hover);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-text-field__input) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-text-field__input):disabled,
+    :where(.skdx-text-field__input)[data-disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    /* Forced colours strips the invalid border colour, so this repaints it in a system colour and adds dashed style as the non-colour differentiator. */
+    :where(.skdx-text-field__input)[data-invalid],
+    :where(.skdx-text-field__input):user-invalid {
+      border-color: LinkText;
+      border-style: dashed;
+    }
+  }
+
+  /* pointer-events: none by default so the slot doesn't eat clicks meant for the input; interactive children opt back in below. */
+  :where(.skdx-text-field__slot) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    /* Reads the root's rung so an adornment matches the input as the field resizes. */
+    block-size: var(--skdx-text-field-block-size, var(--skdx-control-height-md));
+    font-size: var(--skdx-text-field-font-size, var(--skdx-font-size-sm));
+    color: var(--skdx-color-text-muted);
+    pointer-events: none;
+  }
+
+  :where(.skdx-text-field__slot) :where(button, a[href], input) {
+    pointer-events: auto;
+  }
+}

package/dist/skins-src/components/text.css

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/** Text — a typographic primitive. Three independent appearance axes. */
+@layer skdx-components {
+  :where(.skdx-text) {
+    color: var(--skdx-color-text-default);
+    font-family: var(--skdx-font-family);
+    font-size: var(--skdx-font-size-md);
+    font-weight: var(--skdx-font-weight-regular);
+    line-height: var(--skdx-font-line-height-normal);
+  }
+
+  /* Tone is colour only. Weight is `data-variant`, scale is `data-size`; three
+     orthogonal axes, so muted small mono is expressible. `default` and `body`
+     restate the base rule, so writing either gets what was asked for rather
+     than the base by accident. */
+  :where(.skdx-text)[data-tone='default'] {
+    color: var(--skdx-color-text-default);
+  }
+  :where(.skdx-text)[data-tone='muted'] {
+    color: var(--skdx-color-text-muted);
+  }
+  :where(.skdx-text)[data-tone='accent'] {
+    color: var(--skdx-color-text-accent);
+  }
+  :where(.skdx-text)[data-tone='danger'] {
+    color: var(--skdx-color-text-danger);
+  }
+  :where(.skdx-text)[data-tone='success'] {
+    color: var(--skdx-color-text-success);
+  }
+  :where(.skdx-text)[data-tone='warning'] {
+    color: var(--skdx-color-text-warning);
+  }
+  :where(.skdx-text)[data-tone='info'] {
+    color: var(--skdx-color-text-info);
+  }
+
+  :where(.skdx-text)[data-variant='body'] {
+    font-family: var(--skdx-font-family);
+    font-variant-numeric: normal;
+  }
+
+  /* The one rule this file exists for: digits of equal width, so a column of
+     numbers lines up. Fifteen component stylesheets inline this today. */
+  :where(.skdx-text)[data-variant='numeric'] {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Folds in what a separate `Code` family would have been. */
+  :where(.skdx-text)[data-variant='mono'] {
+    font-family: var(--skdx-font-family-mono);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.skdx-text)[data-size='md'] {
+    font-size: var(--skdx-font-size-md);
+    line-height: var(--skdx-font-line-height-normal);
+  }
+  :where(.skdx-text)[data-size='sm'] {
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-snug);
+  }
+  :where(.skdx-text)[data-size='lg'] {
+    font-size: var(--skdx-font-size-lg);
+  }
+
+  /* Folds in what a separate `Mark` family would have been. The UA's yellow is a
+     fixed colour that no theme reaches. */
+  /* The web component paints the host, whose tag is always `skdx-text`; the
+     `<mark>` it renders lives in a shadow root no light-DOM selector reaches. */
+  :where(mark.skdx-text, .skdx-text[as='mark']) {
+    padding-inline: var(--skdx-space-1);
+
+    color: var(--skdx-color-highlight-text);
+    background-color: var(--skdx-color-highlight-bg);
+    border-radius: var(--skdx-radius-sm);
+  }
+}

package/dist/skins-src/components/textarea.css

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '../base.css';
+
+/**
+ * Textarea — multi-line text entry. Differs from TextField in exactly three ways:
+ * no fixed height, vertical-only resize, and block-direction padding because
+ * multi-line text does not centre itself.
+ */
+@layer skdx-components {
+  :where(.skdx-textarea) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-field-gap);
+  }
+
+  :where(.skdx-textarea),
+  :where(.skdx-textarea):is(textarea) {
+    inline-size: 100%;
+    /* Two control rows plus a step of the space scale — 84px, which is what
+       the reference textarea opens at. Two rows alone (72px) showed barely
+       three lines of text before it needed dragging. */
+    min-block-size: calc(var(--skdx-control-height-md) * 2 + var(--skdx-space-3));
+    padding-inline: var(--skdx-control-padding-md);
+    padding-block: var(--skdx-space-2);
+
+    color: var(--skdx-color-field-text);
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-normal);
+
+    /* Vertical only. Horizontal resize lets a user drag a textarea wider than
+       its own form column, which breaks the layout around it. Overridable with
+       `data-resize` below — the base value is what an unmarked textarea gets. */
+    resize: block;
+
+    transition: border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-textarea)::placeholder {
+    color: var(--skdx-color-text-placeholder);
+    opacity: 1;
+  }
+
+  :where(.skdx-textarea):hover:not(:disabled, [readonly]) {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  /* The second selector is the Web Components host, whose textarea is a light-DOM child. */
+  :where(.skdx-textarea):focus-visible,
+  :where(.skdx-textarea):has(> textarea:focus-visible) {
+    border-color: var(--skdx-color-field-border-focus);
+  }
+
+  :where(.skdx-textarea)[data-invalid],
+  :where(.skdx-textarea):user-invalid {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  /* Outweighs the plain :hover/:focus-visible rules above (each one pseudo-class
+     heavier), so invalid stays signalled through hover and through the
+     Web Components `:has()` focus variant instead of being overridden by them. */
+  :where(.skdx-textarea)[data-invalid]:hover:not(:disabled, [readonly]),
+  :where(.skdx-textarea):user-invalid:hover:not(:disabled, [readonly]),
+  :where(.skdx-textarea)[data-invalid]:focus-visible,
+  :where(.skdx-textarea)[data-invalid]:has(> textarea:focus-visible),
+  :where(.skdx-textarea):user-invalid:focus-visible,
+  :where(.skdx-textarea):user-invalid:has(> textarea:focus-visible) {
+    border-color: var(--skdx-color-field-border-invalid);
+  }
+
+  /* `:disabled` rather than `[data-disabled]`: the root *is* the `<textarea>`,
+     so it carries the native attribute — it publishes `data-invalid` and
+     `data-readonly`, but never `data-disabled`. */
+  :where(.skdx-textarea):disabled {
+    color: var(--skdx-color-text-disabled);
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  :where(.skdx-textarea)[readonly],
+  :where(.skdx-textarea)[data-readonly] {
+    background-color: var(--skdx-color-field-bg-readonly);
+  }
+
+  /* Resize hook — `none` · `block` (the default) · `auto`. `autoResize`
+     still wins: the component sets `resize: none` inline while measuring. */
+  :where(.skdx-textarea)[data-resize='none'] {
+    resize: none;
+  }
+
+  :where(.skdx-textarea)[data-resize='block'] {
+    resize: block;
+  }
+
+  :where(.skdx-textarea)[data-resize='auto'] {
+    resize: both;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-textarea) {
+      border-color: CanvasText;
+    }
+  }
+
+  /* Deliberately no `.skdx-textarea__character-count` rule: no package emits that
+     class — the only character count is Field's. Wrap the Textarea in a Field. */
+}

package/dist/skins-src/components/time-field.css

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import 'date-field.css';
+
+/** TimeField — segmented time entry. Identical presentation to DateField. */
+@layer skdx-components {
+  :where(.skdx-time-field) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-control-padding-md);
+
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-md);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A literal segment between minutes and the day period is often a bare
+     space (" hh:mm a" locales). As the sole content of a flex item that
+     whitespace sits at both the start and end of its own line, so the UA
+     collapsed it away — width came from padding alone, height from nothing,
+     and the segment vanished instead of reading as a gap. `pre` keeps it. */
+  :where(.skdx-time-field__segment) {
+    padding-inline: var(--skdx-space-1);
+    border-radius: var(--skdx-radius-sm);
+    font-size: var(--skdx-font-size-sm);
+    white-space: pre;
+    caret-color: transparent;
+  }
+
+  :where(.skdx-time-field__segment):focus-visible {
+    background-color: var(--skdx-color-selection-bg);
+    color: var(--skdx-color-selection-mark);
+    outline: none;
+  }
+}

package/dist/skins-src/components/time.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/** Time — a timestamp. Tabular by default: timestamps sit in columns. */
+@layer skdx-components {
+  :where(.skdx-time) {
+    color: var(--skdx-color-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/dist/skins-src/components/timeline.css

@@ -0,0 +1,206 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '../base.css';
+
+/*
+ * data-orientation, data-align and data-state affect grid placement only —
+ * none change markup or DOM order. data-align is
+ * logical start/end for writing direction; data-state and data-status are
+ * deliberately separate vocabularies that never collide on the same element.
+ */
+@layer skdx-components {
+  :where(.skdx-timeline) {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Grid, not flex: as a flex row, the separator's flex:1 grew sideways with content width. */
+  :where(.skdx-timeline__item) {
+    --skdx-timeline-marker-column: 1;
+    --skdx-timeline-content-column: 2;
+    /* Unused unless the item has an opposite; the rule below re-columns all three together. */
+    --skdx-timeline-opposite-column: 1;
+
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+    column-gap: var(--skdx-space-3);
+    /* Space for the connector to run between markers. */
+    padding-block-end: var(--skdx-space-4);
+  }
+
+  :where(.skdx-timeline__indicator) {
+    /* Divider sits below in the same column, so markers line up down the list. */
+    grid-row: 1;
+    grid-column: var(--skdx-timeline-marker-column);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    inline-size: var(--skdx-space-3);
+    block-size: var(--skdx-space-3);
+    margin-block-start: var(--skdx-space-1);
+
+    background-color: var(--skdx-color-track-fill);
+    border-radius: var(--skdx-radius-full);
+    /* Foreground set explicitly for marker content (a step number, an icon); inherited text would only measure 2.65:1 against the fill. */
+    color: var(--skdx-color-text-on-accent);
+  }
+
+  /* 2px, not a hairline: at 1px the connector disappeared next to the 12px dots. */
+  :where(.skdx-timeline__separator) {
+    grid-row: 2;
+    grid-column: var(--skdx-timeline-marker-column);
+    justify-self: center;
+    inline-size: var(--skdx-border-width-thick);
+    background-color: var(--skdx-color-separator);
+  }
+
+  :where(.skdx-timeline__content) {
+    grid-row: 1 / span 2;
+    grid-column: var(--skdx-timeline-content-column);
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+    padding-block-end: var(--skdx-space-4);
+  }
+
+  :where(.skdx-timeline__opposite) {
+    grid-row: 1 / span 2;
+    grid-column: var(--skdx-timeline-opposite-column);
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    text-align: end;
+  }
+
+  /* Descendant, not child, in :has() below: Angular/Web Components host elements (display: contents) sit between the item and its parts. */
+  :where(.skdx-timeline__item):has(.skdx-timeline__opposite) {
+    --skdx-timeline-opposite-column: 1;
+    --skdx-timeline-marker-column: 2;
+    --skdx-timeline-content-column: 3;
+
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  /* Only column assignments change — DOM order doesn't, so reading/tab order stay identical across all three alignments. */
+  :where(.skdx-timeline)[data-align='end'] :where(.skdx-timeline__item),
+  :where(.skdx-timeline)[data-align='alternate'] :where(.skdx-timeline__item):nth-child(even) {
+    --skdx-timeline-content-column: 1;
+    --skdx-timeline-marker-column: 2;
+
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :where(.skdx-timeline)[data-align='end']
+    :where(.skdx-timeline__item):has(.skdx-timeline__opposite),
+  :where(.skdx-timeline)[data-align='alternate']
+    :where(.skdx-timeline__item):nth-child(even):has(.skdx-timeline__opposite) {
+    --skdx-timeline-content-column: 1;
+    --skdx-timeline-marker-column: 2;
+    --skdx-timeline-opposite-column: 3;
+
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  :where(.skdx-timeline)[data-align='end'] :where(.skdx-timeline__content),
+  :where(.skdx-timeline)[data-align='alternate']
+    :where(.skdx-timeline__item):nth-child(even)
+    :where(.skdx-timeline__content) {
+    text-align: end;
+  }
+
+  :where(.skdx-timeline)[data-align='end'] :where(.skdx-timeline__opposite),
+  :where(.skdx-timeline)[data-align='alternate']
+    :where(.skdx-timeline__item):nth-child(even)
+    :where(.skdx-timeline__opposite) {
+    text-align: start;
+  }
+
+  /* Turns the item 90°: marker/connector share the first row, content sits underneath. data-align (block-axis) doesn't apply here. */
+  :where(.skdx-timeline)[data-orientation='horizontal'] {
+    flex-direction: row;
+    align-items: start;
+  }
+
+  :where(.skdx-timeline)[data-orientation='horizontal'] :where(.skdx-timeline__item) {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto auto;
+    row-gap: var(--skdx-space-2);
+    /* flex: 1 so every item takes an equal share, keeping connector lengths equal. */
+    flex: 1;
+    padding-block-end: 0;
+  }
+
+  :where(.skdx-timeline)[data-orientation='horizontal'] :where(.skdx-timeline__indicator) {
+    grid-row: 1;
+    grid-column: 1;
+    margin-block-start: 0;
+  }
+
+  :where(.skdx-timeline)[data-orientation='horizontal'] :where(.skdx-timeline__separator) {
+    grid-row: 1;
+    grid-column: 2;
+    align-self: center;
+    justify-self: stretch;
+    inline-size: auto;
+    block-size: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-timeline)[data-orientation='horizontal'] :where(.skdx-timeline__content) {
+    grid-row: 2;
+    grid-column: 1 / -1;
+    padding-block-end: 0;
+    padding-inline-end: var(--skdx-space-4);
+    text-align: start;
+  }
+
+  /* No "beside" on this axis, so the opposite region moves above the marker row instead. */
+  :where(.skdx-timeline)[data-orientation='horizontal']
+    :where(.skdx-timeline__item):has(.skdx-timeline__opposite) {
+    grid-template-rows: auto auto auto;
+  }
+
+  :where(.skdx-timeline)[data-orientation='horizontal'] :where(.skdx-timeline__opposite) {
+    grid-row: 1;
+    grid-column: 1 / -1;
+    text-align: start;
+  }
+
+  :where(.skdx-timeline)[data-orientation='horizontal']
+    :where(.skdx-timeline__item):has(.skdx-timeline__opposite)
+    :where(.skdx-timeline__indicator),
+  :where(.skdx-timeline)[data-orientation='horizontal']
+    :where(.skdx-timeline__item):has(.skdx-timeline__opposite)
+    :where(.skdx-timeline__separator) {
+    grid-row: 2;
+  }
+
+  :where(.skdx-timeline)[data-orientation='horizontal']
+    :where(.skdx-timeline__item):has(.skdx-timeline__opposite)
+    :where(.skdx-timeline__content) {
+    grid-row: 3;
+  }
+
+  /* track measures below 3:1 in dark themes and text-on-accent (meant for the accent fill) would be invisible here, hence the border and muted foreground override. */
+  :where(.skdx-timeline__item)[data-state='pending'] :where(.skdx-timeline__indicator) {
+    background-color: var(--skdx-color-track);
+    color: var(--skdx-color-text-muted);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-strong);
+  }
+
+  /* Ringed rather than recoloured, so it stays legible next to a complete dot in forced-colours mode too. */
+  :where(.skdx-timeline__item)[data-state='current'] :where(.skdx-timeline__indicator) {
+    box-shadow:
+      0 0 0 var(--skdx-border-width-thin) var(--skdx-color-surface-default),
+      0 0 0 var(--skdx-border-width-thick) var(--skdx-color-track-fill);
+  }
+}