@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,192 @@
+/*
+ * 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 '_hit-target.css';
+
+/* CSS scroll snapping, not transform paging, keeps native momentum, keyboard scrolling and screen-reader traversal. */
+@layer skdx-components {
+  :where(.skdx-carousel) {
+    position: relative;
+    /* A percentage against a content-sized ancestor resolves to the width of its content, not the container — hence 100% here. */
+    inline-size: 100%;
+    /* A wrapping row: the track claims the first line, controls flow beneath it. */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-carousel__item) {
+    flex: none;
+    /* Sized to fit slidesPerPage slides per row, gap included. */
+    inline-size: calc(
+      (
+          100% - (var(--skdx-carousel-slides-per-page, 1) - 1) *
+            var(--skdx-carousel-spacing, var(--skdx-space-3))
+        ) /
+        var(--skdx-carousel-slides-per-page, 1)
+    );
+    scroll-snap-align: start;
+    /* Without a floor, a text-only slide collapses to line height and the carousel reads as a paragraph. */
+    min-block-size: var(--skdx-space-16);
+    display: flex;
+    align-items: center;
+    /* Centres the slide with arrow-width clearance on both sides, since the arrows float over the track's edges. */
+    justify-content: center;
+    padding-inline: calc(var(--skdx-control-height-md) + var(--skdx-space-2));
+  }
+
+  /* Every framework marks inactive slides [hidden] rather than unmounting; author `display: flex` above beats [hidden] on origin, so it must be restated here. */
+  :where(.skdx-carousel__item)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-carousel__previous),
+  :where(.skdx-carousel__next),
+  :where(.skdx-carousel__play-pause) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-inline-size: var(--skdx-control-height-md);
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-space-2);
+
+    color: var(--skdx-color-text-default);
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-full);
+    box-shadow: var(--skdx-shadow-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-carousel__previous),
+  :where(.skdx-carousel__next) {
+    position: absolute;
+    /* Centred on the track, not the root — the root also holds the controls row. */
+    inset-block-start: calc(var(--skdx-space-16) / 2);
+    translate: 0 -50%;
+    z-index: var(--skdx-z-index-base);
+  }
+
+  :where(.skdx-carousel__previous) {
+    inset-inline-start: var(--skdx-space-2);
+  }
+
+  :where(.skdx-carousel__next) {
+    inset-inline-end: var(--skdx-space-2);
+  }
+
+  :where(.skdx-carousel__previous)[data-disabled],
+  :where(.skdx-carousel__next)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Scoped to __content, not __viewport: __viewport is a slot the consumer composes and Carousel never renders it. */
+  :where(.skdx-carousel__content) {
+    /* Full first line of the wrapping root, so controls sit under the track. */
+    flex-basis: 100%;
+    display: flex;
+    gap: var(--skdx-carousel-spacing, var(--skdx-space-3));
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-carousel__content)::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Fill alone isn't dependable without tokens: the page and hover surface share the same platform neutral, so the border carries the rest of the signal. */
+  :where(.skdx-carousel__previous):hover:not([data-disabled]),
+  :where(.skdx-carousel__next):hover:not([data-disabled]) {
+    background-color: var(--skdx-color-surface-hover);
+    /* Accent, not border-strong: without tokens the border already rests on CanvasText, so a neutral hover would be no visible change. */
+    border-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-carousel__indicators) {
+    display: flex;
+    align-items: center;
+  }
+
+  :where(.skdx-carousel__progress) {
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  /* The button is the whole 24px target (WCAG 2.2 §2.5.8, measured on the element, so a pseudo hit area does not count); ::before is the painted dot. */
+  :where(.skdx-carousel__indicator) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--skdx-target-min);
+    block-size: var(--skdx-target-min);
+    padding: 0;
+    background: none;
+    border: 0;
+    border-radius: var(--skdx-radius-full);
+    cursor: pointer;
+  }
+
+  :where(.skdx-carousel__indicator)::before {
+    content: '';
+    inline-size: var(--skdx-space-2);
+    block-size: var(--skdx-space-2);
+    background-color: var(--skdx-color-track);
+    /* Without this border, an unselected dot vanishes entirely in several dark themes (same track/background collision as progress/meter). */
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-strong);
+    border-radius: var(--skdx-radius-full);
+  }
+
+  /* The active dot deepens rather than no-op on hover, since it's already filled and the user is likeliest to point at it. */
+  :where(.skdx-carousel__indicator):hover:not([data-disabled])::before {
+    background-color: var(--skdx-color-track-fill);
+  }
+
+  /* box-shadow, not border: a border would change the dot's size and shuffle the strip. */
+  :where(.skdx-carousel__indicator)[data-state='active']:hover:not([data-disabled])::before {
+    box-shadow: 0 0 0 var(--skdx-border-width-thick) var(--skdx-color-border-strong);
+  }
+
+  :where(.skdx-carousel__indicator)[data-state='active']::before {
+    background-color: var(--skdx-color-track-fill);
+  }
+
+  :where(.skdx-carousel__viewport) {
+    display: flex;
+    gap: var(--skdx-space-3);
+    overflow-x: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-carousel__previous),
+    :where(.skdx-carousel__next),
+    :where(.skdx-carousel__play-pause) {
+      border-color: ButtonBorder;
+    }
+
+    :where(.skdx-carousel__previous)[data-disabled],
+    :where(.skdx-carousel__next)[data-disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    :where(.skdx-carousel__indicator)::before {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-carousel__indicator)[data-state='active']::before {
+      background-color: Highlight;
+    }
+  }
+}

package/dist/skins-src/components/chat-composer.css

@@ -0,0 +1,89 @@
+/*
+ * 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';
+
+/** ChatComposer — the message input at the bottom of a conversation: an auto-growing textarea and a send button sharing one bordered field. */
+@layer skdx-components {
+  :where(.skdx-chat-composer) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-chat-composer__attachments) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-chat-composer__field) {
+    display: flex;
+    align-items: end;
+    gap: var(--skdx-space-2);
+    padding: var(--skdx-space-2);
+
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-lg);
+  }
+
+  :where(.skdx-chat-composer__field):focus-within {
+    border-color: var(--skdx-color-field-border-focus);
+  }
+
+  /* `:is()` on the part rather than `:where()`: textarea.css owns the same element
+     at `:where(.skdx-textarea):is(textarea)` and sorts after this file, so a
+     zero-specificity selector here would never strip its border, background or
+     84px floor. */
+  :where(.skdx-chat-composer__field) :is(.skdx-chat-composer__textarea) {
+    flex: 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding-inline: 0;
+    padding-block: var(--skdx-space-1);
+
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+
+    resize: none;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-chat-composer__leading),
+  :where(.skdx-chat-composer__trailing) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+  }
+
+  :where(.skdx-chat-composer__send) {
+    flex-shrink: 0;
+  }
+
+  :where(.skdx-chat-composer__footer) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--skdx-space-2);
+
+    color: var(--skdx-color-text-muted);
+
+    font-size: var(--skdx-font-size-xs);
+    overflow-wrap: anywhere;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-chat-composer__field) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-chat-composer__field):focus-within {
+      border-color: Highlight;
+    }
+  }
+}

package/dist/skins-src/components/chat-message.css

@@ -0,0 +1,98 @@
+/*
+ * 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';
+
+/** ChatMessage — one conversation message: author, avatar, timestamp, delivery status and content. */
+@layer skdx-components {
+  :where(.skdx-chat-message) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--skdx-space-3);
+    max-inline-size: 100%;
+  }
+
+  :where(.skdx-chat-message)[data-sender='user'] {
+    flex-direction: row-reverse;
+  }
+
+  :where(.skdx-chat-message)[data-sender='system'] {
+    justify-content: center;
+  }
+
+  :where(.skdx-chat-message__main) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+    min-inline-size: 0;
+    max-inline-size: min(100%, 48rem);
+  }
+
+  :where(.skdx-chat-message__header) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-chat-message__author) {
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-chat-message__time),
+  :where(.skdx-chat-message__status) {
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-chat-message)[data-status='error'] :where(.skdx-chat-message__status) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-chat-message__content) {
+    padding: var(--skdx-space-3);
+    border-radius: var(--skdx-radius-lg);
+    background-color: var(--skdx-color-surface-sunken);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-chat-message__content) pre {
+    overflow-x: auto;
+  }
+
+  :where(.skdx-chat-message)[data-sender='user'] :where(.skdx-chat-message__content) {
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  :where(.skdx-chat-message)[data-sender='system'] :where(.skdx-chat-message__content) {
+    background-color: transparent;
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-sm);
+    text-align: center;
+  }
+
+  :where(.skdx-chat-message)[data-status='pending'] :where(.skdx-chat-message__content) {
+    opacity: var(--skdx-opacity-disabled);
+  }
+
+  :where(.skdx-chat-message__attachments) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-chat-message__actions) {
+    display: flex;
+    gap: var(--skdx-space-1);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-chat-message__content) {
+      border: var(--skdx-border-width-thin) solid CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_card-control.css';
+@import 'checkbox.css';
+
+/** CheckboxCard — a checkbox presented as a selectable panel. */
+@layer skdx-components {
+  :where(.skdx-checkbox-card) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--skdx-space-3);
+
+    padding: var(--skdx-space-3);
+
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-md);
+    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-checkbox-card):hover:not([data-disabled]) {
+    border-color: var(--skdx-color-border-strong);
+  }
+
+  /* Selection is a border + wash on the whole card, not only the small box. */
+  :where(.skdx-checkbox-card)[data-state='checked'] {
+    border-color: var(--skdx-color-border-accent);
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  :where(.skdx-checkbox-card)[data-disabled] {
+    background-color: var(--skdx-color-surface-disabled);
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-checkbox-card)[data-invalid] {
+    border-color: var(--skdx-color-border-danger);
+  }
+
+  /* Read-only is available, only not editable: ordinary paint, no click-promising cursor. */
+  :where(.skdx-checkbox-card)[data-readonly] {
+    cursor: default;
+  }
+
+  :where(.skdx-checkbox-card)[data-readonly]:hover {
+    border-color: var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-checkbox-card__label) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-checkbox-card__description) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-checkbox-card)[data-state='checked'] {
+      border-color: Highlight;
+      border-width: var(--skdx-border-width-thick);
+    }
+  }
+
+  /* The visible box and tick. Not drawn on `control`: that is the real `<input>`, and
+     the VisuallyHidden wrapper's inline 1×1/clip styles outrank any layered rule on it. */
+  :where(.skdx-checkbox-card__indicator) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    inline-size: var(--skdx-indicator-size-md);
+    block-size: var(--skdx-indicator-size-md);
+
+    /* No ink until there is a mark to draw, matching checkbox.css: the glyph
+       takes the mark's colour only once checked, so it is invisible against
+       the empty box at rest instead of showing a grey tick. */
+    color: transparent;
+    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-size: var(--skdx-font-size-xs);
+    line-height: 1;
+  }
+
+  :where(.skdx-checkbox-card)[data-state='checked'] :where(.skdx-checkbox-card__indicator) {
+    color: var(--skdx-color-selection-mark);
+    background-color: var(--skdx-color-selection-bg);
+    border-color: var(--skdx-color-selection-bg);
+  }
+
+  :where(.skdx-checkbox-card)[data-disabled] :where(.skdx-checkbox-card__indicator) {
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+  }
+
+  /* Colours the mark only once there is one to draw — an anatomy that always
+     mounts the checkmark glyph and relies on `color` alone to hide it would
+     otherwise show it here too, since this selector would win over the base
+     rule's `color: transparent`. */
+  :where(.skdx-checkbox-card)[data-disabled][data-state='checked']
+    :where(.skdx-checkbox-card__indicator) {
+    color: var(--skdx-color-text-disabled);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-checkbox-card__indicator) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-checkbox-card)[data-state='checked'] :where(.skdx-checkbox-card__indicator) {
+      background-color: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  /* On a card `data-size` means padding and type scale, not the box size checkbox.css's
+     rungs adjust. Duplicated in radio-card.css; the values must stay identical. */
+  :where(.skdx-checkbox-card)[data-size='sm'] {
+    padding: var(--skdx-space-2);
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-checkbox-card)[data-size='sm'] :where(.skdx-checkbox-card__label) {
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-checkbox-card)[data-size='md'] {
+    padding: var(--skdx-space-3);
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-checkbox-card)[data-size='lg'] {
+    padding: var(--skdx-space-4);
+    gap: var(--skdx-space-4);
+  }
+
+  :where(.skdx-checkbox-card)[data-size='lg'] :where(.skdx-checkbox-card__label) {
+    font-size: var(--skdx-font-size-md);
+  }
+}

package/dist/skins-src/components/checkbox-group.css

@@ -0,0 +1,72 @@
+/*
+ * 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 'checkbox.css';
+
+/** CheckboxGroup — related checkboxes sharing one label and validation state. */
+@layer skdx-components {
+  :where(.skdx-checkbox-group) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+  }
+
+  /* Both values of the dimension select something, not just one. The
+     unqualified rule above already lays the group out as a column, so this
+     changes nothing on its own — but `data-orientation` is a two-value
+     dimension, and an author who writes the value the default happens to be
+     should not find that only the *other* one is a real selector. */
+  :where(.skdx-checkbox-group)[data-orientation='vertical'] {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-checkbox-group)[data-orientation='horizontal'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-4);
+  }
+
+  /* A `max`-refused item keeps its tab stop and enabled state so `aria-disabled` can
+     explain why it will not toggle; it is dimmed, not hidden — the state is temporary. */
+  :where(.skdx-checkbox-group__item)[data-max-reached] {
+    cursor: not-allowed;
+    opacity: var(--skdx-opacity-disabled);
+  }
+
+  /* Read-only is not disabled: available, only not editable. See checkbox.css. */
+  :where(.skdx-checkbox-group)[data-readonly] :where(.skdx-checkbox-group__item),
+  :where(.skdx-checkbox-group)[data-readonly] :where(.skdx-checkbox-group__select-all) {
+    cursor: default;
+  }
+
+  /* These classes always land on `.skdx-checkbox` itself — no `min-block-size` here,
+     it would fight the `block-size` checkbox.css sets there. With a label, a
+     `<label class="skdx-checkbox-group__item-label">` wraps the checkbox and its
+     `.skdx-checkbox__label` text, so the row lays out beside the box, not inside it. */
+  :where(.skdx-checkbox-group__item),
+  :where(.skdx-checkbox-group__select-all),
+  :where(.skdx-checkbox-group__item-label) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-sm);
+    cursor: pointer;
+  }
+
+  /* `label` and `description` are consumer-composed slots; no package emits them. */
+  :where(.skdx-checkbox-group__description) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-checkbox-group__label) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+}