@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,304 @@
+/*
+ * 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';
+@import '_status.css';
+
+/* data-variant and data-size are read here, not on the component's props, so a consumer can add a variant without touching the component package. */
+@layer skdx-components {
+  :where(.skdx-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--skdx-control-gap-md);
+
+    /* `min-inline-size` rather than `inline-size` so a long label grows the
+       button instead of overflowing it. */
+    min-inline-size: var(--skdx-target-min);
+    min-block-size: var(--skdx-target-min);
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-control-padding-md);
+
+    border: var(--skdx-border-width-thin) solid transparent;
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    line-height: var(--skdx-font-line-height-snug);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    cursor: pointer;
+    user-select: none;
+
+    /* Only colour and transform transition: animating block-size or padding would make a label change reflow visibly. */
+    transition:
+      background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      box-shadow var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      translate var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+
+    color: var(--skdx-color-action-secondary-text);
+    background-color: var(--skdx-color-action-secondary-bg);
+    border-color: var(--skdx-color-action-secondary-border);
+  }
+
+  /* Border moves with hover fill: some themes' resting/hover fills coincide, or the fill can't darken further without breaking contrast (Solarized measures 2.01:1). */
+  :where(.skdx-button):hover {
+    background-color: var(--skdx-color-action-secondary-bg-hover);
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  /* :active covers pointer press; aria-pressed covers the toggle case, staying depressed after the pointer leaves. Read from ARIA, not a data-* twin, for one source of truth. */
+  :where(.skdx-button):active,
+  :where(.skdx-button)[aria-pressed='true'] {
+    background-color: var(--skdx-color-action-secondary-bg-pressed);
+  }
+
+  /* Written out explicitly, not left to inherit, so data-size='md' resolves to a declaration, not an omission. */
+  :where(.skdx-button)[data-size='md'] {
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-control-padding-md);
+    gap: var(--skdx-control-gap-md);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-button)[data-size='sm'] {
+    block-size: var(--skdx-control-height-sm);
+    padding-inline: var(--skdx-control-padding-sm);
+    gap: var(--skdx-control-gap-sm);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-button)[data-size='lg'] {
+    block-size: var(--skdx-control-height-lg);
+    padding-inline: var(--skdx-control-padding-lg);
+    gap: var(--skdx-control-gap-lg);
+    font-size: var(--skdx-font-size-md);
+  }
+
+  /* All three states repeated, not just resting: [data-variant='secondary'] and :hover have equal specificity, so source order alone decides. */
+  :where(.skdx-button)[data-variant='secondary'] {
+    color: var(--skdx-color-action-secondary-text);
+    background-color: var(--skdx-color-action-secondary-bg);
+    border-color: var(--skdx-color-action-secondary-border);
+  }
+
+  :where(.skdx-button)[data-variant='secondary']:hover {
+    background-color: var(--skdx-color-action-secondary-bg-hover);
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where(.skdx-button)[data-variant='secondary']:active,
+  :where(.skdx-button)[data-variant='secondary'][aria-pressed='true'] {
+    background-color: var(--skdx-color-action-secondary-bg-pressed);
+  }
+
+  :where(.skdx-button)[data-variant='primary'] {
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-border);
+  }
+
+  /* Hover signals via elevation and a darker rim, not a fill shift: shifting the fill would fail 4.5:1 contrast in many themes. */
+  :where(.skdx-button)[data-variant='primary']:hover {
+    border-color: var(--skdx-color-action-primary-border-hover);
+    box-shadow: var(--skdx-shadow-sm);
+  }
+
+  :where(.skdx-button)[data-variant='primary']:active,
+  :where(.skdx-button)[data-variant='primary'][aria-pressed='true'] {
+    border-color: var(--skdx-color-action-primary-border-hover);
+    box-shadow: none;
+    /* Physical press. Composited, and it cannot affect legibility. */
+    translate: 0 1px;
+  }
+
+  :where(.skdx-button)[data-variant='danger'] {
+    color: var(--skdx-color-action-danger-text);
+    background-color: var(--skdx-color-action-danger-bg);
+    border-color: var(--skdx-color-action-danger-border);
+  }
+
+  :where(.skdx-button)[data-variant='danger']:hover {
+    background-color: var(--skdx-color-action-danger-bg-hover);
+    border-color: var(--skdx-color-action-danger-bg-hover);
+  }
+
+  :where(.skdx-button)[data-variant='danger']:active,
+  :where(.skdx-button)[data-variant='danger'][aria-pressed='true'] {
+    background-color: var(--skdx-color-action-danger-bg-pressed);
+    border-color: var(--skdx-color-action-danger-bg-pressed);
+  }
+
+  /* transparent is an absence of paint here, not a palette choice — deliberately unpainted until interacted with. */
+  :where(.skdx-button)[data-variant='outline'] {
+    color: var(--skdx-color-action-outline-text);
+    background-color: transparent;
+    border-color: var(--skdx-color-action-outline-border);
+  }
+
+  :where(.skdx-button)[data-variant='outline']:hover {
+    background-color: var(--skdx-color-action-outline-bg-hover);
+  }
+
+  /* Outline has no fill, so the border carries the status; the tinted status border is too faint for that. */
+  :where(.skdx-button)[data-variant='outline'][data-status='success'] {
+    border-color: var(--skdx-color-border-success);
+  }
+
+  :where(.skdx-button)[data-variant='outline'][data-status='warning'] {
+    border-color: var(--skdx-color-border-warning);
+  }
+
+  :where(.skdx-button)[data-variant='outline']:active,
+  :where(.skdx-button)[data-variant='outline'][aria-pressed='true'] {
+    background-color: var(--skdx-color-action-outline-bg-pressed);
+  }
+
+  :where(.skdx-button)[data-variant='ghost'] {
+    color: var(--skdx-color-action-ghost-text);
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :where(.skdx-button)[data-variant='ghost']:hover {
+    background-color: var(--skdx-color-action-ghost-bg-hover);
+  }
+
+  :where(.skdx-button)[data-variant='ghost']:active,
+  :where(.skdx-button)[data-variant='ghost'][aria-pressed='true'] {
+    background-color: var(--skdx-color-action-ghost-bg-pressed);
+  }
+
+  /* data-status is severity, data-variant is emphasis; status wins for colour except outline/ghost, which keep transparency and take status as ink/rim instead of fill. */
+  :where(.skdx-button)[data-status='neutral'] {
+    --skdx-status-bg: var(--skdx-color-action-secondary-bg);
+    --skdx-status-border: var(--skdx-color-action-secondary-border);
+    --skdx-status-text: var(--skdx-color-action-secondary-text);
+  }
+
+  :where(.skdx-button)[data-status='brand'] {
+    --skdx-status-bg: var(--skdx-color-action-primary-bg);
+    --skdx-status-border: var(--skdx-color-action-primary-border);
+    --skdx-status-text: var(--skdx-color-action-primary-text);
+  }
+
+  /* Fallbacks required: --skdx-status-* is set by _status.css's attribute rules and unset otherwise. */
+  :where(.skdx-button)[data-status] {
+    color: var(--skdx-status-text, var(--skdx-color-action-secondary-text));
+    background-color: var(--skdx-status-bg, var(--skdx-color-action-secondary-bg));
+    border-color: var(--skdx-status-border, var(--skdx-color-action-secondary-border));
+  }
+
+  /* Elevation and a darker rim, not a fill shift — same as data-variant='primary' above; there is no --skdx-status-bg-hover to move to. */
+  :where(.skdx-button)[data-status]:hover:not(:disabled, [data-disabled], [aria-disabled='true']) {
+    border-color: var(--skdx-status-text, var(--skdx-color-action-secondary-text));
+    box-shadow: var(--skdx-shadow-sm);
+  }
+
+  /* Neutral borrows the secondary palette, whose rim and ink are one colour once
+     the fallback block supplies them, so it takes the field ramp's rim instead. */
+  :where(.skdx-button)[data-status='neutral']:hover:not(
+      :disabled,
+      [data-disabled],
+      [aria-disabled='true']
+    ) {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where(.skdx-button)[data-status]:active,
+  :where(.skdx-button)[data-status][aria-pressed='true'] {
+    box-shadow: none;
+    /* Physical press. Composited, and it cannot affect legibility. */
+    translate: 0 1px;
+  }
+
+  :where(.skdx-button)[data-status][data-variant='outline'] {
+    background-color: transparent;
+  }
+
+  :where(.skdx-button)[data-status][data-variant='ghost'] {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  /* Disabled is a colour change, not opacity: opacity over an unknown backdrop yields unknowable contrast, and WCAG's 1.4.3 exemption doesn't make an unreadable form usable. */
+  :where(.skdx-button):disabled,
+  :where(.skdx-button)[data-disabled] {
+    color: var(--skdx-color-action-disabled-text);
+    background-color: var(--skdx-color-action-disabled-bg);
+    border-color: var(--skdx-color-action-disabled-border);
+    cursor: not-allowed;
+  }
+
+  /* data-disabled covers disabled || loading; loading doesn't set the native disabled attribute, which would blur the button as aria-busy starts. */
+  :where(.skdx-button)[data-loading] {
+    cursor: progress;
+  }
+
+  /* Lands as a flex item ahead of the label, spaced by gap — no positioning needed. */
+  :where(.skdx-button)[data-loading]::before {
+    content: '';
+    inline-size: var(--skdx-icon-size-sm);
+    block-size: var(--skdx-icon-size-sm);
+    border: var(--skdx-border-width-thick) solid currentColor;
+    border-inline-end-color: transparent;
+    border-radius: var(--skdx-radius-full);
+    animation: skdx-spin var(--skdx-motion-duration-slow) var(--skdx-motion-easing-linear) infinite;
+  }
+
+  /* data-icon-only must be declared: CSS can't distinguish an icon-only button from one with a bare text node. */
+  :where(.skdx-button)[data-icon-only] {
+    padding-inline: 0;
+    aspect-ratio: 1;
+  }
+
+  /* An icon-only button has room for one glyph: while loading the spinner takes it and the icon steps aside; the visually hidden loading label stays for assistive tech. */
+  :where(.skdx-button)[data-icon-only][data-loading] > :where([data-skdx-icon], skdx-icon) {
+    display: none;
+  }
+
+  /* Forced-colours mode repaints backgrounds/text; this only restores borders it can't infer. System colour keywords are permitted only here. */
+  @media (forced-colors: active) {
+    :where(.skdx-button) {
+      border-color: ButtonBorder;
+    }
+
+    :where(.skdx-button):disabled,
+    :where(.skdx-button)[data-disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+
+  :where(.skdx-button__icon) {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--skdx-icon-size-md);
+    block-size: var(--skdx-icon-size-md);
+  }
+
+  :where(.skdx-button)[data-size='sm'] :where(.skdx-button__icon) {
+    inline-size: var(--skdx-icon-size-sm);
+    block-size: var(--skdx-icon-size-sm);
+  }
+
+  :where(.skdx-button)[data-size='lg'] :where(.skdx-button__icon) {
+    inline-size: var(--skdx-icon-size-lg);
+    block-size: var(--skdx-icon-size-lg);
+  }
+
+  /* Truncates rather than wraps: two lines would break the control height siblings are aligned to. */
+  :where(.skdx-button__label) {
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,269 @@
+/*
+ * 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';
+
+/* Rendered as plain elements with ARIA grid roles, not a <table>, so __row needs its own flex layout rather than relying on native table row behavior. */
+@layer skdx-components {
+  :where(.skdx-calendar) {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+    padding: var(--skdx-space-3);
+  }
+
+  :where(.skdx-calendar__header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-calendar__heading) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-semibold);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-calendar__previous-button),
+  :where(.skdx-calendar__next-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--skdx-space-2);
+    min-inline-size: var(--skdx-target-min);
+    min-block-size: var(--skdx-target-min);
+
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-calendar__heading):hover,
+  :where(.skdx-calendar__previous-button):hover,
+  :where(.skdx-calendar__next-button):hover {
+    background-color: var(--skdx-color-surface-hover);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-calendar__grid) {
+    border-collapse: collapse;
+  }
+
+  /* Multiple months: the shared header stays a full-width row, each month's heading sits over its own grid, one grid per column. */
+  :where(.skdx-calendar):has(.skdx-calendar__grid ~ .skdx-calendar__grid) {
+    display: inline-grid;
+    grid-auto-flow: column;
+    align-items: start;
+    gap: var(--skdx-space-2) var(--skdx-space-4);
+  }
+
+  :where(.skdx-calendar):has(.skdx-calendar__grid ~ .skdx-calendar__grid) > .skdx-calendar__header {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  :where(.skdx-calendar):has(.skdx-calendar__grid ~ .skdx-calendar__grid)
+    > .skdx-calendar__heading {
+    grid-row: 2;
+  }
+
+  :where(.skdx-calendar):has(.skdx-calendar__grid ~ .skdx-calendar__grid) > .skdx-calendar__grid {
+    grid-row: 3;
+  }
+
+  :where(.skdx-calendar__row) {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  :where(.skdx-calendar__week-day) {
+    /* At least as wide as the day cells below, so each weekday sits over its column and still fills a wider grid track. */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--skdx-item-height-md);
+
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-medium);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-calendar__cell) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: var(--skdx-item-height-md);
+    block-size: var(--skdx-item-height-md);
+    gap: var(--skdx-space-1);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: var(--skdx-border-width-thin) solid transparent;
+    border-radius: var(--skdx-radius-sm);
+
+    font-size: var(--skdx-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  :where(.skdx-calendar__cell) > svg {
+    flex: none;
+  }
+
+  :where(.skdx-calendar__cell):hover:not([data-disabled]) {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  /* Today: a ring, so it survives being selected. */
+  :where(.skdx-calendar__cell)[data-today] {
+    border-color: var(--skdx-color-border-accent);
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  /* Selected: a fill. */
+  :where(.skdx-calendar__cell)[data-state='selected'] {
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-bg);
+  }
+
+  /* Inside a selected range but not an endpoint. */
+  :where(.skdx-calendar__cell)[data-range-middle] {
+    background-color: var(--skdx-color-surface-selected);
+    border-radius: 0;
+  }
+
+  /* Logical corners, not physical: in an RTL calendar the start of a range is on the right, so border-top-left-radius would round the wrong end. */
+  :where(.skdx-calendar__cell)[data-range-start] {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where(.skdx-calendar__cell)[data-range-end] {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :where(.skdx-calendar__cell)[data-outside-month] {
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* Struck through, not dimmed: an unavailable cell stays keyboard-reachable and its text must keep the full 4.5:1 contrast it had. */
+  :where(.skdx-calendar__cell)[data-unavailable] {
+    text-decoration: line-through;
+    text-decoration-thickness: var(--skdx-border-width-thick);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-calendar__cell)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-calendar__cell)[data-state='selected'] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    :where(.skdx-calendar__cell)[data-today] {
+      border-color: CanvasText;
+    }
+
+    /* Forced colours discards every author background, so the range band needs its own repaint here; the endpoints are covered by data-state='selected' above. */
+    :where(.skdx-calendar__cell)[data-range-middle] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    /* text-decoration-color isn't forced, so it would keep the author colour over a repainted background without this. */
+    :where(.skdx-calendar__cell)[data-unavailable] {
+      text-decoration-color: CanvasText;
+    }
+  }
+
+  :where(.skdx-calendar__month-grid, .skdx-calendar__year-grid) {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--skdx-space-1);
+  }
+
+  /* display: contents dissolves the ARIA row/rowgroup elements for layout while keeping them in the accessibility tree. */
+  :where(.skdx-calendar__month-grid, .skdx-calendar__year-grid) > [role='rowgroup'],
+  :where(.skdx-calendar__month-grid, .skdx-calendar__year-grid) > * > [role='row'] {
+    display: contents;
+  }
+
+  :where(.skdx-calendar__view-cell) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding-block: var(--skdx-space-2);
+    padding-inline: var(--skdx-space-1);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: var(--skdx-border-width-thin) solid transparent;
+    border-radius: var(--skdx-radius-sm);
+
+    font-size: var(--skdx-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  :where(.skdx-calendar__view-cell):hover:not([data-disabled]) {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-calendar__view-cell)[data-today] {
+    border-color: var(--skdx-color-border-accent);
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-calendar__view-cell)[data-state='selected'] {
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-bg);
+  }
+
+  /* Refused, not disabled: the cell keeps its tab stop, so it must stay legible enough to land on. */
+  :where(.skdx-calendar__view-cell)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Sized like a day cell so the dates below still line up in their columns. */
+  :where(.skdx-calendar__week-number, .skdx-calendar__week-number-header) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--skdx-item-height-md);
+
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.skdx-calendar__grid-head) {
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+}

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

@@ -0,0 +1,116 @@
+/*
+ * 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-elevation`, `data-interactive` and `data-selected` resolve here; the
+   custom properties let one card differ by value, not by selector. */
+@layer skdx-components {
+  :where(.skdx-card) {
+    display: flex;
+    flex-direction: column;
+
+    --skdx-card-padding: var(--skdx-space-4);
+    --skdx-card-radius: var(--skdx-radius-lg);
+
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-card-radius);
+    color: var(--skdx-color-text-default);
+  }
+
+  /* An enum, not a boolean: flat is spelled by leaving the attribute off, keeping a third rung expressible later. */
+  :where(.skdx-card)[data-elevation='raised'] {
+    box-shadow: var(--skdx-shadow-md);
+  }
+
+  :where(.skdx-card)[data-interactive] {
+    cursor: pointer;
+    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-card)[data-interactive]:hover {
+    border-color: var(--skdx-color-border-strong);
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  /* Only border/background are declared: skdx-base already draws the ring on any :focus-visible skdx- element. */
+  :where(.skdx-card)[data-interactive]:focus-visible {
+    border-color: var(--skdx-color-border-strong);
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-card)[data-selected] {
+    border-color: var(--skdx-color-border-accent);
+    background-color: var(--skdx-color-surface-selected);
+    /* Not colour alone: this inset ring survives forced-colors, where every card's border becomes CanvasText and the accent border is otherwise indistinguishable. */
+    box-shadow: inset 0 0 0 var(--skdx-border-width-thin) var(--skdx-color-border-accent);
+  }
+
+  /* Clipping here stops a square image from squaring off the top of a rounded card. */
+  :where(.skdx-card__media) {
+    overflow: hidden;
+    border-start-start-radius: calc(var(--skdx-card-radius) - var(--skdx-border-width-thin));
+    border-start-end-radius: calc(var(--skdx-card-radius) - var(--skdx-border-width-thin));
+  }
+
+  :where(.skdx-card__media) > :where(img, video, picture, canvas, svg) {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    object-fit: cover;
+  }
+
+  :where(.skdx-card__header) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+    padding: var(--skdx-card-padding);
+  }
+
+  :where(.skdx-card__title) {
+    /* Resets the UA default heading margin, which would double up with __header's own gap. */
+    margin: 0;
+    font-size: var(--skdx-font-size-md);
+    font-weight: var(--skdx-font-weight-semibold);
+    line-height: var(--skdx-font-line-height-tight);
+  }
+
+  :where(.skdx-card__description) {
+    /* Same UA-default-margin reset as the title above. */
+    margin: 0;
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-card__content) {
+    padding: var(--skdx-card-padding);
+    /* The header already paid for the top gap. */
+    padding-block-start: 0;
+  }
+
+  :where(.skdx-card__footer) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    padding: var(--skdx-card-padding);
+    padding-block-start: 0;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-card) {
+      border-color: CanvasText;
+    }
+
+    /* Every card's border is CanvasText above, so selected needs the Highlight system colour as its differentiator. */
+    :where(.skdx-card)[data-selected] {
+      box-shadow: inset 0 0 0 var(--skdx-border-width-thin) Highlight;
+      outline: var(--skdx-border-width-thin) solid Highlight;
+    }
+  }
+}