@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_trigger.css';
+@import '_overlay.css';
+@import '_collection.css';
+
+/**
+ * `data-size` and `data-shape` resolve on the input.
+ * The default rungs (`md`, `rounded`) have their own selectors so a combobox can
+ * be reset to the default inside an ancestor that set another rung.
+ */
+@layer skdx-components {
+  :where(.skdx-combobox__content) {
+    padding: var(--skdx-overlay-padding);
+  }
+
+  /* Redundant-looking `[data-size='md']` selector: needed to reset from an
+     ancestor override. */
+  :where(.skdx-combobox__input),
+  :where(.skdx-combobox__input)[data-size='md'] {
+    --skdx-combobox-block-size: var(--skdx-control-height-md);
+    --skdx-combobox-padding-inline: var(--skdx-control-padding-md);
+    --skdx-combobox-font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-combobox__input)[data-size='sm'] {
+    --skdx-combobox-block-size: var(--skdx-control-height-sm);
+    --skdx-combobox-padding-inline: var(--skdx-control-padding-sm);
+    --skdx-combobox-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-combobox__input)[data-size='lg'] {
+    --skdx-combobox-block-size: var(--skdx-control-height-lg);
+    --skdx-combobox-padding-inline: var(--skdx-control-padding-lg);
+    --skdx-combobox-font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-combobox__input),
+  :where(.skdx-combobox__input)[data-shape='rounded'] {
+    --skdx-combobox-radius: var(--skdx-radius-md);
+  }
+
+  :where(.skdx-combobox__input)[data-shape='square'] {
+    --skdx-combobox-radius: 0;
+  }
+
+  /* The input itself takes the field treatment; there is no separate trigger. */
+  :where(.skdx-combobox__input) {
+    inline-size: 100%;
+    block-size: var(--skdx-combobox-block-size);
+    padding-inline: var(--skdx-combobox-padding-inline);
+
+    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-combobox-radius);
+    font-size: var(--skdx-combobox-font-size);
+  }
+
+  :where(.skdx-combobox__input)::placeholder {
+    color: var(--skdx-color-text-placeholder);
+    opacity: 1;
+  }
+
+  :where(.skdx-combobox__input):focus-visible {
+    border-color: var(--skdx-color-field-border-focus);
+  }
+
+  :where(.skdx-combobox__input)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  /* `:disabled`, not `[data-disabled]`: `ComboboxInput` is a real `<input>`
+     and never publishes `data-disabled`. */
+  :where(.skdx-combobox__input):disabled {
+    color: var(--skdx-color-text-disabled);
+    background-color: var(--skdx-color-field-bg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Empties the selection and the draft text in one press. Boxed like the
+     Trigger beside it, so the two affordances read as one system. */
+  :where(.skdx-combobox__clear) {
+    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-muted);
+    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);
+    cursor: pointer;
+  }
+
+  :where(.skdx-combobox__clear):hover:not(:disabled) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-combobox__clear):disabled {
+    color: var(--skdx-color-text-disabled);
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_overlay.css';
+@import '_collection.css';
+
+/** Command — a filterable command palette. */
+@layer skdx-components {
+  :where(.skdx-command) {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: min(20rem, calc(100vw - var(--skdx-space-8)));
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-overlay-radius);
+    box-shadow: var(--skdx-shadow-overlay);
+  }
+
+  /* The search row reads as part of the surface, not as a field dropped into
+     it — hence a bottom rule instead of a full border. */
+  :where(.skdx-command__input) {
+    inline-size: 100%;
+    block-size: var(--skdx-control-height-lg);
+    padding-inline: var(--skdx-space-4);
+
+    color: var(--skdx-color-field-text);
+    background: transparent;
+    border: 0;
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: 0;
+    font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-command__input)::placeholder {
+    color: var(--skdx-color-text-placeholder);
+    opacity: 1;
+  }
+
+  :where(.skdx-command__list) {
+    max-block-size: 20rem;
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    padding: var(--skdx-overlay-padding);
+  }
+
+  /* Both sit beside the list rather than inside it — `role="status"` and
+     `role="presentation"` are not permitted children of `role="listbox"` — so
+     neither scrolls with the results, and both need the padding the list would
+     otherwise have given them. */
+  :where(.skdx-command__loading, .skdx-command__empty) {
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-3);
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-sm);
+    text-align: center;
+  }
+
+  /* An `asChild` item composed onto a native <button> otherwise keeps the UA
+     button box — fit-content width, its own border, System font — under the
+     row styling _collection.css's shared item rule already applies. */
+  :where(button.skdx-command__item) {
+    inline-size: 100%;
+    border: 0;
+    background: none;
+    font: inherit;
+    text-align: start;
+  }
+}

package/dist/skins-src/components/comment-thread.css

@@ -0,0 +1,56 @@
+/*
+ * 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';
+
+/** CommentThread — a root comment with its replies, indented one level and collapsible. */
+@layer skdx-components {
+  :where(.skdx-comment-thread) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-comment-thread__replies) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+    margin-inline-start: calc(var(--skdx-space-6) + var(--skdx-space-2));
+    padding-inline-start: var(--skdx-space-3);
+    border-inline-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+  }
+
+  :where(.skdx-comment-thread__toggle) {
+    margin-inline-start: calc(var(--skdx-space-6) + var(--skdx-space-2));
+    padding: 0;
+    border: 0;
+    min-block-size: var(--skdx-target-min);
+    background: none;
+    color: var(--skdx-color-text-accent);
+    font-size: var(--skdx-font-size-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-comment-thread__load-more),
+  :where(.skdx-comment-thread__composer) {
+    margin-inline-start: calc(var(--skdx-space-6) + var(--skdx-space-2));
+  }
+
+  @media (max-width: 30rem) {
+    :where(.skdx-comment-thread__replies),
+    :where(.skdx-comment-thread__toggle),
+    :where(.skdx-comment-thread__load-more),
+    :where(.skdx-comment-thread__composer) {
+      margin-inline-start: var(--skdx-space-3);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-comment-thread__replies) {
+      border-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+/*
+ * 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';
+
+/** Comment — author, avatar, timestamp and content of one collaboration comment. */
+@layer skdx-components {
+  :where(.skdx-comment) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-comment__main) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-comment__header) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-comment__author) {
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-comment__time),
+  :where(.skdx-comment__edited) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-comment__content) {
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-comment__attachments) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-comment__actions) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-1);
+    margin-block-start: var(--skdx-space-1);
+  }
+}

package/dist/skins-src/components/confirm-dialog.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 '../base.css';
+
+/** ConfirmDialog — an alert dialog panel with a body region and a cancel/confirm footer. */
+@layer skdx-components {
+  :where(.skdx-confirm-dialog__body) {
+    min-inline-size: 0;
+    margin-block-start: var(--skdx-space-3);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-confirm-dialog__footer) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--skdx-space-2);
+    margin-block-start: var(--skdx-space-4);
+  }
+
+  /* Narrow viewports: a two-button end-aligned row gets cramped, so the
+     footer stacks and each button spans the panel, keeping DOM order (cancel
+     then confirm) so tab order and reading order stay unchanged. */
+  @media (max-width: 30rem) {
+    :where(.skdx-confirm-dialog__footer) {
+      flex-direction: column;
+    }
+
+    :where(.skdx-confirm-dialog__cancel),
+    :where(.skdx-confirm-dialog__confirm) {
+      inline-size: 100%;
+    }
+  }
+
+  /* Angular cannot omit the wrapper around unprojected content, so an empty one collapses. */
+  :where(.skdx-confirm-dialog__body:empty) {
+    display: none;
+  }
+}

package/dist/skins-src/components/conversation-list.css

@@ -0,0 +1,142 @@
+/*
+ * 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';
+
+/** ConversationList — rows of title, preview and meta, grouped and single-select. */
+@layer skdx-components {
+  :where(.skdx-conversation-list) {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-conversation-list__loading) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+    padding: var(--skdx-space-3);
+  }
+
+  /* The list is a core Listbox: drop the field border and padding it takes as a
+     standalone control, since here it fills a panel of its own. `listbox.css`
+     sorts after this file, so the role carries the specificity to outrank it. */
+  :where(.skdx-conversation-list__list)[role='listbox'] {
+    gap: 0;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+  }
+
+  :where(.skdx-conversation-list__group) {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  :where(.skdx-conversation-list__group-label) {
+    padding: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-medium);
+    line-height: var(--skdx-font-line-height-tight);
+    color: var(--skdx-color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: var(--skdx-font-letter-spacing-wide);
+  }
+
+  :where(.skdx-conversation-list__item) {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: var(--skdx-space-3);
+    align-items: start;
+    min-block-size: var(--skdx-target-min);
+    padding: var(--skdx-space-3);
+    cursor: pointer;
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+  }
+
+  :where(.skdx-conversation-list__item)[aria-selected='true'] {
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  :where(.skdx-conversation-list__item)[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--skdx-opacity-disabled);
+  }
+
+  :where(.skdx-conversation-list__leading) {
+    display: flex;
+    grid-column: 1;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.skdx-conversation-list__body) {
+    grid-column: 2;
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-conversation-list__title) {
+    display: block;
+    overflow: hidden;
+    font-weight: var(--skdx-font-weight-medium);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :where(.skdx-conversation-list__item)[data-unread] :where(.skdx-conversation-list__title) {
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  /* The dot repeats what the visually hidden unread label already says, so the
+     mark never rests on colour alone. */
+  :where(.skdx-conversation-list__item[data-unread] .skdx-conversation-list__title)::before {
+    display: inline-block;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    margin-inline-end: var(--skdx-space-1);
+    content: '';
+    background-color: var(--skdx-color-text-accent);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-accent);
+    border-radius: var(--skdx-radius-full);
+  }
+
+  :where(.skdx-conversation-list__preview) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-conversation-list__meta) {
+    display: flex;
+    flex-direction: column;
+    grid-column: 3;
+    gap: var(--skdx-space-1);
+    align-items: end;
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-conversation-list__time) {
+    white-space: nowrap;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-conversation-list__item) {
+      border-block-end-color: CanvasText;
+    }
+
+    :where(.skdx-conversation-list__item)[aria-selected='true'] {
+      outline: var(--skdx-border-width-thin) solid Highlight;
+      outline-offset: calc(-1 * var(--skdx-border-width-thin));
+    }
+  }
+}

package/dist/skins-src/components/dashboard-layout.css

@@ -0,0 +1,106 @@
+/*
+ * 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';
+
+/** DashboardLayout — app bar, collapsible side navigation and content region. */
+@layer skdx-components {
+  :where(.skdx-dashboard-layout) {
+    display: grid;
+    grid-template-rows: auto 1fr;
+  }
+
+  :where(.skdx-dashboard-layout__app-bar) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-3);
+    padding-inline: var(--skdx-space-4);
+    padding-block: var(--skdx-space-2);
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  /* Pushes actions to the end of the bar regardless of whether branding or title precede it. */
+  :where(.skdx-dashboard-layout__actions) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    margin-inline-start: auto;
+  }
+
+  :where(.skdx-dashboard-layout__title) {
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-dashboard-layout__body) {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    min-block-size: 0;
+  }
+
+  :where(.skdx-dashboard-layout__nav) {
+    inline-size: 16rem;
+    overflow-y: auto;
+    border-inline-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-dashboard-layout__nav-list) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+    margin: 0;
+    padding: var(--skdx-space-2);
+    list-style: none;
+  }
+
+  :where(.skdx-dashboard-layout__nav-item) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    padding-inline: var(--skdx-space-3);
+    padding-block: var(--skdx-space-2);
+    border-radius: var(--skdx-radius-sm);
+    color: var(--skdx-color-text-default);
+    text-decoration: none;
+  }
+
+  :where(.skdx-dashboard-layout__nav-item):hover {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-dashboard-layout__nav-item)[aria-current='page'] {
+    color: var(--skdx-color-text-accent);
+    background-color: var(--skdx-color-surface-selected);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-dashboard-layout__nav-header) {
+    padding-inline: var(--skdx-space-3);
+    padding-block-start: var(--skdx-space-3);
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-semibold);
+    letter-spacing: var(--skdx-font-letter-spacing-wide);
+    text-transform: uppercase;
+  }
+
+  :where(.skdx-dashboard-layout__nav-divider) {
+    border: 0;
+    border-block-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+  }
+
+  :where(.skdx-dashboard-layout__content) {
+    padding: var(--skdx-space-4);
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-dashboard-layout__app-bar),
+    :where(.skdx-dashboard-layout__nav),
+    :where(.skdx-dashboard-layout__nav-divider) {
+      border-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,95 @@
+/*
+ * 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';
+
+/**
+ * DateField — segmented date entry (day / month / year). Each segment is its own
+ * focus target, so the highlight reads as "editing this segment", not text selection.
+ */
+@layer skdx-components {
+  :where(.skdx-date-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;
+  }
+
+  /* The shared state hooks are declared once for both classes: a TimeField root
+     carries `.skdx-time-field`, not `.skdx-date-field`, despite importing this file. */
+  :where(.skdx-date-field, .skdx-time-field)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-date-field, .skdx-time-field)[data-disabled] {
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+  }
+
+  /* Read-only stays focusable, so the signal is removing the editable affordance —
+     no field box, muted segments, no selection highlight — rather than dimming. */
+  :where(.skdx-date-field, .skdx-time-field)[data-readonly] {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :where(.skdx-date-field, .skdx-time-field)[data-readonly]
+    :where(.skdx-date-field__segment, .skdx-time-field__segment) {
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* The plain focus ring comes back in place of the highlight: the segment is
+     still a tab stop, so it still has to show where focus is. */
+  :where(.skdx-date-field, .skdx-time-field)[data-readonly]
+    :where(.skdx-date-field__segment, .skdx-time-field__segment):focus-visible {
+    background-color: transparent;
+    color: var(--skdx-color-text-muted);
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
+
+  :where(.skdx-date-field__segment) {
+    padding-inline: var(--skdx-space-1);
+    border-radius: var(--skdx-radius-sm);
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-field-text);
+    /* Segments are typed into, not selected — the caret would be misleading. */
+    caret-color: transparent;
+  }
+
+  :where(.skdx-date-field__segment):focus-visible {
+    background-color: var(--skdx-color-selection-bg);
+    color: var(--skdx-color-selection-mark);
+    outline: none;
+  }
+
+  :where(.skdx-date-field__segment)[data-placeholder] {
+    color: var(--skdx-color-text-placeholder);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-date-field__segment, .skdx-time-field__segment):focus-visible {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    /* GrayText is the forced-colors palette's "this is not editable" colour,
+       and it is the one signal left once borders and backgrounds are
+       repainted. */
+    :where(.skdx-date-field, .skdx-time-field)[data-readonly]
+      :where(.skdx-date-field__segment, .skdx-time-field__segment) {
+      color: GrayText;
+    }
+  }
+}