@skdx/docs-kit 0.35.0

package/dist/skins-src/components/date-picker.css

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '_trigger.css';
+@import '_overlay.css';
+@import 'calendar.css';
+
+/** DatePicker — a DateField that opens a Calendar. */
+@layer skdx-components {
+  :where(.skdx-date-picker__content) {
+    padding: var(--skdx-space-2);
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-date-picker__content[hidden]) {
+    display: none;
+  }
+
+  :where(.skdx-date-picker__calendar) {
+    padding: var(--skdx-space-2);
+  }
+
+  :where(.skdx-date-picker__time-field) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    padding-inline: var(--skdx-space-2);
+    padding-block-end: var(--skdx-space-2);
+  }
+
+  :where(.skdx-date-picker__input) {
+    flex: 1;
+    min-inline-size: 0;
+    color: var(--skdx-color-field-text);
+    background: transparent;
+    border: 0;
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-date-picker__trigger):hover:not([data-disabled]) {
+    border-color: var(--skdx-color-field-border-hover);
+    background-color: var(--skdx-color-field-bg-hover);
+  }
+
+  /* Invalid paints the trigger, not the panel: the trigger is what a filled-in
+     form still shows after the panel closes. */
+  :where(.skdx-date-picker__trigger)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  @media (forced-colors: active) {
+    /* Forced colors flattens every author colour, so the invalid border is
+       gone unless it is redrawn thicker — thickness is one of the few author
+       decisions the mode preserves. */
+    :where(.skdx-date-picker__trigger)[data-invalid] {
+      border-style: double;
+    }
+  }
+
+  /* _actuator.css groups this with Popover's and Tour's close buttons as
+     "icon-only, known to carry no label" and squares it off with
+     padding-inline: 0. This one does carry a label — the component's own doc
+     example is `<DatePickerClose>Close</DatePickerClose>` — so the square
+     clipped the word by 2px. Declared in skdx-components, so it wins over the
+     skdx-base default on layer order alone, the mechanism that file documents
+     for exactly this case. */
+  :where(.skdx-date-picker__close) {
+    inline-size: auto;
+    padding-inline: var(--skdx-control-padding-md);
+  }
+}

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

@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '_overlay.css';
+
+@layer skdx-components {
+  :where(.skdx-dialog__content) {
+    position: fixed;
+    inset-block-start: 50%;
+    /* Physical, to pair with translate below (also physical): inset-inline-start would flip under RTL while translate kept shifting the same physical direction. */
+    left: 50%;
+    translate: -50% -50%;
+
+    inline-size: min(var(--skdx-overlay-width-md, 32rem), calc(100vw - var(--skdx-space-8)));
+    /* Caps at the viewport so a long dialog scrolls internally rather than pushing its own actions off-screen. */
+    max-block-size: calc(100dvh - var(--skdx-space-8));
+    display: flex;
+    flex-direction: column;
+
+    padding: var(--skdx-space-6);
+    gap: var(--skdx-space-4);
+    border-radius: var(--skdx-overlay-radius);
+    z-index: var(--skdx-z-index-modal);
+  }
+
+  /* data-size sits inside :where(), unlike Button's sibling form, so this stays zero-specificity like the narrow-viewport rule below — source order is what lets that rule override a sized dialog on a phone. */
+  :where(.skdx-dialog__content[data-size='sm']) {
+    inline-size: min(var(--skdx-overlay-width-sm, 24rem), calc(100vw - var(--skdx-space-8)));
+  }
+
+  :where(.skdx-dialog__content[data-size='md']) {
+    inline-size: min(var(--skdx-overlay-width-md, 32rem), calc(100vw - var(--skdx-space-8)));
+  }
+
+  :where(.skdx-dialog__content[data-size='lg']) {
+    inline-size: min(var(--skdx-overlay-width-lg, 48rem), calc(100vw - var(--skdx-space-8)));
+  }
+
+  /* A confirmation carries a title, a sentence and two buttons: the widest rung
+     leaves the sentence stranded across the panel. */
+  :where(.skdx-dialog__content[role='alertdialog']) {
+    inline-size: min(var(--skdx-overlay-width-sm, 24rem), calc(100vw - var(--skdx-space-8)));
+  }
+
+  /* Severity accent on the panel; the derived Action button paints itself
+     through Button's own status axis, so no button rule belongs here. */
+  :where(.skdx-dialog__content[data-status]) {
+    border-block-start: var(--skdx-border-width-thicker) solid transparent;
+  }
+
+  :where(.skdx-dialog__content[data-status='info']) {
+    border-block-start-color: var(--skdx-color-status-info-border);
+  }
+
+  :where(.skdx-dialog__content[data-status='success']) {
+    border-block-start-color: var(--skdx-color-status-success-border);
+  }
+
+  :where(.skdx-dialog__content[data-status='warning']) {
+    border-block-start-color: var(--skdx-color-status-warning-border);
+  }
+
+  :where(.skdx-dialog__content[data-status='danger']) {
+    border-block-start-color: var(--skdx-color-status-danger-border);
+  }
+
+  /* Ports rendering a native <dialog> keep it mounted while closed; author display: flex above beats the UA's dialog:not([open]) rule on origin, so it must be restated here. */
+  :where(dialog.skdx-dialog__content:not([open])) {
+    display: none;
+  }
+
+  :where(.skdx-dialog__title) {
+    /* Renders an `<h2>`; the UA heading margin would double the content's own `gap`. */
+    margin: 0;
+    font-size: var(--skdx-font-size-lg);
+    font-weight: var(--skdx-font-weight-semibold);
+    line-height: var(--skdx-font-line-height-tight);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-dialog__description) {
+    /* Renders a `<p>`; same UA-margin issue as the title above. */
+    margin: 0;
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-relaxed);
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* body and footer are class hooks, not parts: the Vue, Svelte and Angular
+     recipes wrap their footer slot in one and Svelte also wraps the body;
+     React and Web Components leave both to the consumer. */
+
+  /* Scoped to a direct child of content, so a DialogClose reused inside .skdx-dialog__footer stays in flow instead of being pulled out by position: absolute. */
+  :where(.skdx-dialog__content) > :where(.skdx-dialog__close),
+  :where(.skdx-dialog__content)
+    > :where(:not([class*='skdx-']):has(> .skdx-dialog__close))
+    > :where(.skdx-dialog__close) {
+    position: absolute;
+    inset-block-start: var(--skdx-space-3);
+    /* Logical, so the close button moves to the left edge under RTL. */
+    inset-inline-end: var(--skdx-space-3);
+  }
+
+  :where(.skdx-dialog__close) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    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-dialog__close):hover {
+    color: var(--skdx-color-text-default);
+    background-color: var(--skdx-color-action-ghost-bg-hover);
+  }
+
+  /* Narrow viewports: a centred card with margins wastes the screen, so the
+     dialog becomes a full-width sheet anchored to the bottom. */
+  @media (max-width: 40rem) {
+    :where(.skdx-dialog__content) {
+      inline-size: 100vw;
+      max-inline-size: 100vw;
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      translate: none;
+      border-start-start-radius: var(--skdx-overlay-radius);
+      border-start-end-radius: var(--skdx-overlay-radius);
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+
+  :where(.skdx-dialog__body) {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-relaxed);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-dialog__footer) {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--skdx-space-2);
+    flex-wrap: wrap;
+  }
+}

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

@@ -0,0 +1,64 @@
+/*
+ * 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';
+
+/**
+ * Divider — a one-pixel rule: a painted background, not a border, so one rule
+ * serves both orientations. Every package renders an `<hr>`, so `margin: 0` and
+ * `border: 0` are UA resets, not decoration.
+ */
+@layer skdx-components {
+  :where(.skdx-divider) {
+    --skdx-divider-color: var(--skdx-color-separator);
+    --skdx-divider-thickness: var(--skdx-border-width-thin);
+    --skdx-divider-inset: var(--skdx-space-4);
+    /* A vertical separator with nothing beside it wraps onto a flex line of
+       its own — a lone `stretch`ed item on an empty line has nothing to
+       stretch to and collapses to 0 height. This floor keeps it visible on
+       its own; stretch still wins whenever a taller row sibling is there to
+       set the line height. It is a separator-owned property rather than
+       `--skdx-control-height-md` because the height of a medium control has no
+       relationship to the content this divides. */
+    --skdx-divider-min-length: var(--skdx-control-height-md);
+
+    flex: none;
+    margin: 0;
+    border: 0;
+    background-color: var(--skdx-divider-color);
+  }
+
+  :where(.skdx-divider)[data-orientation='horizontal'] {
+    inline-size: 100%;
+    block-size: var(--skdx-divider-thickness);
+  }
+
+  :where(.skdx-divider)[data-orientation='vertical'] {
+    inline-size: var(--skdx-divider-thickness);
+    /* Fills the flex line it sits in rather than assuming a height. */
+    align-self: stretch;
+    block-size: auto;
+    min-block-size: var(--skdx-divider-min-length);
+  }
+
+  /* A rule that starts and ends inside the padding of the list it
+     divides, rather than running the full bleed. Logical, so it flips with the
+     writing direction. */
+  :where(.skdx-divider)[data-inset='inset'][data-orientation='horizontal'] {
+    inline-size: auto;
+    margin-inline: var(--skdx-divider-inset);
+  }
+
+  :where(.skdx-divider)[data-inset='inset'][data-orientation='vertical'] {
+    margin-block: var(--skdx-divider-inset);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-divider) {
+      background-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '_overlay.css';
+
+/* data-side is physical and already resolved (DrawerContent runs a logical placement through resolvePhysicalSide), so inset-inline-start here would pin the wrong edge under RTL. */
+@layer skdx-components {
+  :where(.skdx-drawer__content) {
+    position: fixed;
+    z-index: var(--skdx-z-index-modal);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-4);
+
+    padding: var(--skdx-space-6);
+    background-color: var(--skdx-color-surface-raised);
+    box-shadow: var(--skdx-shadow-overlay);
+    /* Square against the attached edge; radius is added per side below for the two free corners only. */
+    border-radius: 0;
+    max-block-size: 100dvh;
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  /* Angular/Web Components keep a closed drawer mounted and [hidden]; author display: flex above beats it on origin, so it must be restated here. */
+  :where(.skdx-drawer__content)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-drawer__content)[data-side='left'] {
+    inset-block: 0;
+    left: 0;
+    inline-size: min(20rem, 90vw);
+    border-top-right-radius: var(--skdx-overlay-radius);
+    border-bottom-right-radius: var(--skdx-overlay-radius);
+  }
+
+  :where(.skdx-drawer__content)[data-side='right'] {
+    inset-block: 0;
+    right: 0;
+    inline-size: min(20rem, 90vw);
+    border-top-left-radius: var(--skdx-overlay-radius);
+    border-bottom-left-radius: var(--skdx-overlay-radius);
+  }
+
+  :where(.skdx-drawer__content)[data-side='top'] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: auto;
+    border-end-start-radius: var(--skdx-overlay-radius);
+    border-end-end-radius: var(--skdx-overlay-radius);
+  }
+
+  :where(.skdx-drawer__content)[data-side='bottom'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: auto;
+    border-start-start-radius: var(--skdx-overlay-radius);
+    border-start-end-radius: var(--skdx-overlay-radius);
+  }
+
+  /* Sized on the axis the panel isn't pinned along: left/right drawers size on inline-size, top/bottom on block-size, each split per side/size pair. */
+  :where(.skdx-drawer__content)[data-side='left'][data-size='sm'],
+  :where(.skdx-drawer__content)[data-side='right'][data-size='sm'] {
+    inline-size: min(16rem, 90vw);
+  }
+
+  :where(.skdx-drawer__content)[data-side='left'][data-size='md'],
+  :where(.skdx-drawer__content)[data-side='right'][data-size='md'] {
+    inline-size: min(20rem, 90vw);
+  }
+
+  :where(.skdx-drawer__content)[data-side='left'][data-size='lg'],
+  :where(.skdx-drawer__content)[data-side='right'][data-size='lg'] {
+    inline-size: min(30rem, 90vw);
+  }
+
+  :where(.skdx-drawer__content)[data-side='top'][data-size='sm'],
+  :where(.skdx-drawer__content)[data-side='bottom'][data-size='sm'] {
+    block-size: min(12rem, 90dvh);
+  }
+
+  :where(.skdx-drawer__content)[data-side='top'][data-size='md'],
+  :where(.skdx-drawer__content)[data-side='bottom'][data-size='md'] {
+    block-size: min(20rem, 90dvh);
+  }
+
+  :where(.skdx-drawer__content)[data-side='top'][data-size='lg'],
+  :where(.skdx-drawer__content)[data-side='bottom'][data-size='lg'] {
+    block-size: min(30rem, 90dvh);
+  }
+
+  /* -start/-end keyframes translate along a fixed physical axis (translateX has no logical form), pairing with the physical sides above without a direction rule. */
+  :where(.skdx-drawer__content)[data-side='left'][data-state='open'] {
+    animation: skdx-slide-in-from-start var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-drawer__content)[data-side='right'][data-state='open'] {
+    animation: skdx-slide-in-from-end var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-drawer__content)[data-side='top'][data-state='open'] {
+    animation: skdx-slide-in-from-top var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-drawer__content)[data-side='bottom'][data-state='open'] {
+    animation: skdx-slide-in-from-bottom var(--skdx-motion-duration-normal)
+      var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-drawer__title) {
+    font-size: var(--skdx-font-size-lg);
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-drawer__description) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* Scoped to a direct child of content, so a DrawerClose reused lower in the panel stays in flow (see dialog.css for the same pattern). */
+  :where(.skdx-drawer__content) > :where(.skdx-drawer__close),
+  :where(.skdx-drawer__content)
+    > :where(:not([class*='skdx-']):has(> .skdx-drawer__close))
+    > :where(.skdx-drawer__close) {
+    position: absolute;
+    inset-block-start: var(--skdx-space-3);
+    inset-inline-end: var(--skdx-space-3);
+  }
+
+  /* Class hooks, not parts: the Vue, Svelte and Angular recipes wrap their
+     footer slot in one and Svelte also wraps the body; React and Web
+     Components leave both to the consumer. Same pair dialog.css ships. */
+  :where(.skdx-drawer__body) {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-relaxed);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-drawer__footer) {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--skdx-space-2);
+    flex-wrap: wrap;
+  }
+
+  :where(.skdx-drawer__close) {
+    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;
+  }
+}

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

@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '../base.css';
+
+/**
+ * Editable — text that becomes an input in place. Preview and input share padding
+ * and border width (transparent, not absent) so committing an edit never jumps.
+ */
+@layer skdx-components {
+  :where(.skdx-editable) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+  }
+
+  /* cursor: default because clicking the label focuses the editor rather than selecting its text. */
+  :where(.skdx-editable__label) {
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-sm);
+    cursor: default;
+  }
+
+  :where(.skdx-editable__preview) {
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-1);
+    border: var(--skdx-border-width-thin) solid transparent;
+    border-radius: var(--skdx-radius-sm);
+    font-size: var(--skdx-font-size-sm);
+    cursor: text;
+  }
+
+  :where(.skdx-editable__preview):hover:not([data-disabled], [data-readonly]) {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  /* `data-empty` is what `EditablePreview` publishes when it is showing the
+     placeholder instead of a value; there is no `data-placeholder`. */
+  :where(.skdx-editable__preview)[data-empty] {
+    color: var(--skdx-color-text-placeholder);
+  }
+
+  /* No :focus-visible rule here on purpose: base.css's single outline already covers .skdx-* elements. */
+  :where(.skdx-editable__preview)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Keeps its tab stop and normal text colour; only the text caret (an edit affordance) is withdrawn. */
+  :where(.skdx-editable__preview)[data-readonly] {
+    cursor: default;
+  }
+
+  /* Border is transparent rather than absent, so invalid can colour it in without moving the box. */
+  :where(.skdx-editable__preview)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-editable__input) {
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-1);
+    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-focus);
+    border-radius: var(--skdx-radius-sm);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-editable__textarea) {
+    inline-size: 100%;
+    padding: 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-sm);
+    font: inherit;
+    resize: vertical;
+  }
+
+  /* :user-invalid isn't paired in here the way TextField pairs it, because this input has no form owner. */
+  :where(.skdx-editable__input, .skdx-editable__textarea)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-editable__input):disabled,
+  :where(.skdx-editable__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;
+  }
+
+  /* :read-only, not [data-readonly]: the editors render the native attribute, and the pseudo-class is the truthful test of what the platform applied. */
+  :where(.skdx-editable__input):read-only,
+  :where(.skdx-editable__textarea):read-only {
+    background-color: var(--skdx-color-field-bg-readonly);
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    /* Forced colours strips the invalid border colour, so this needs a system colour plus a dashed style to stay distinguishable. */
+    :where(.skdx-editable__preview)[data-invalid],
+    :where(.skdx-editable__input)[data-invalid],
+    :where(.skdx-editable__textarea)[data-invalid] {
+      border-color: LinkText;
+      border-style: dashed;
+    }
+
+    :where(.skdx-editable__preview)[data-disabled],
+    :where(.skdx-editable__input):disabled,
+    :where(.skdx-editable__textarea):disabled {
+      color: GrayText;
+    }
+  }
+}

package/dist/skins-src/components/empty-state.css

@@ -0,0 +1,85 @@
+/*
+ * 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';
+
+/** EmptyState — a placeholder for a region with nothing to show, centred by default. */
+@layer skdx-components {
+  :where(.skdx-empty-state) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--skdx-space-4);
+    padding: var(--skdx-space-8);
+    text-align: center;
+  }
+
+  :where(.skdx-empty-state)[data-align='start'] {
+    align-items: start;
+    text-align: start;
+  }
+
+  :where(.skdx-empty-state)[data-size='sm'] {
+    padding: var(--skdx-space-4);
+  }
+
+  :where(.skdx-empty-state)[data-size='md'] {
+    padding: var(--skdx-space-8);
+  }
+
+  :where(.skdx-empty-state)[data-size='lg'] {
+    padding: var(--skdx-space-12);
+  }
+
+  :where(.skdx-empty-state__icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--skdx-icon-size-lg);
+    block-size: var(--skdx-icon-size-lg);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-empty-state)[data-size='sm'] :where(.skdx-empty-state__icon) {
+    inline-size: var(--skdx-icon-size-md);
+    block-size: var(--skdx-icon-size-md);
+  }
+
+  :where(.skdx-empty-state)[data-size='lg'] :where(.skdx-empty-state__icon) {
+    inline-size: calc(var(--skdx-icon-size-lg) * 1.5);
+    block-size: calc(var(--skdx-icon-size-lg) * 1.5);
+  }
+
+  :where(.skdx-empty-state__title) {
+    max-inline-size: 32rem;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-empty-state__description) {
+    max-inline-size: 32rem;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-empty-state__content) {
+    inline-size: 100%;
+  }
+
+  :where(.skdx-empty-state__actions) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-empty-state)[data-align='start'] :where(.skdx-empty-state__actions) {
+    justify-content: start;
+  }
+
+  /* Angular cannot omit the wrapper around unprojected content, so an empty one collapses. */
+  :where(.skdx-empty-state__content:empty) {
+    display: none;
+  }
+}