@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,203 @@
+/*
+ * 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';
+
+/* Declared in skdx-base so a family with its own opinion overrides on layer order alone.
+   Named explicitly: matching by shape would also catch non-button parts like Select's trigger. */
+@layer skdx-base {
+  :where(
+    .skdx-dialog__trigger,
+    .skdx-dialog__action,
+    .skdx-dialog__cancel,
+    .skdx-drawer__trigger,
+    .skdx-menu__trigger,
+    .skdx-floating-panel__trigger,
+    .skdx-popover__trigger,
+    .skdx-popover__close,
+    .skdx-tour__trigger,
+    .skdx-tour__next-trigger,
+    .skdx-tour__prev-trigger,
+    .skdx-tour__skip-trigger,
+    .skdx-tour__close-trigger,
+    .skdx-date-picker__close,
+    .skdx-editable__edit-trigger,
+    .skdx-editable__submit-trigger,
+    .skdx-editable__cancel-trigger,
+    .skdx-file-upload__trigger,
+    .skdx-form__submit,
+    .skdx-checkbox-group__select-all,
+    .skdx-split-button__action,
+    .skdx-split-button__trigger,
+    .skdx-stepper__trigger,
+    .skdx-toast__action,
+    .skdx-toolbar__button,
+    .skdx-toolbar__link,
+    .skdx-transfer__move-trigger,
+    .skdx-transfer__move-all-trigger,
+    .skdx-table__expand-trigger,
+    .skdx-table__tree-trigger
+  ) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--skdx-control-gap-md);
+
+    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);
+
+    color: var(--skdx-color-action-secondary-text);
+    background-color: var(--skdx-color-action-secondary-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-action-secondary-border);
+    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-tight);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    cursor: pointer;
+    user-select: none;
+
+    transition:
+      background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  /* An outer-tree `display` declaration beats a shadow host's own :host([hidden]) rule on origin, so frameworks that keep both states mounted need [hidden] restated here. */
+  :where(.skdx-editable__edit-trigger)[hidden],
+  :where(.skdx-editable__submit-trigger)[hidden],
+  :where(.skdx-editable__cancel-trigger)[hidden] {
+    display: none;
+  }
+
+  :where(
+      .skdx-dialog__trigger,
+      .skdx-dialog__cancel,
+      .skdx-drawer__trigger,
+      .skdx-menu__trigger,
+      .skdx-floating-panel__trigger,
+      .skdx-popover__trigger,
+      .skdx-popover__close,
+      .skdx-tour__trigger,
+      .skdx-tour__next-trigger,
+      .skdx-tour__prev-trigger,
+      .skdx-tour__skip-trigger,
+      .skdx-tour__close-trigger,
+      .skdx-date-picker__close,
+      .skdx-editable__edit-trigger,
+      .skdx-editable__submit-trigger,
+      .skdx-editable__cancel-trigger,
+      .skdx-file-upload__trigger,
+      .skdx-checkbox-group__select-all,
+      .skdx-split-button__action,
+      .skdx-split-button__trigger,
+      .skdx-stepper__trigger,
+      .skdx-toast__action,
+      .skdx-toolbar__button,
+      .skdx-toolbar__link,
+      .skdx-transfer__move-trigger,
+      .skdx-transfer__move-all-trigger,
+      .skdx-table__expand-trigger,
+      .skdx-table__tree-trigger
+    ):hover:not(:disabled, [data-disabled], [aria-disabled='true']) {
+    background-color: var(--skdx-color-action-secondary-bg-hover);
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  /* Excluded from the shared secondary hover above: `:hover:not(:disabled)`
+     outranks the plain `:hover` below on specificity, which would otherwise
+     override this pair's own primary-coloured hover state back to muted. */
+  :where(.skdx-dialog__action, .skdx-form__submit) {
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-border);
+  }
+
+  :where(.skdx-dialog__action, .skdx-form__submit):hover {
+    border-color: var(--skdx-color-action-primary-border-hover);
+    box-shadow: var(--skdx-shadow-sm);
+    /* Overrides the shared hover fill: a primary action keeps its solid background and signals via elevation instead. */
+    background-color: var(--skdx-color-action-primary-bg);
+  }
+
+  /* Unlike Button, these parts have a fixed role and are known to carry no label, so no `data-icon-only` flag is needed. */
+  :where(
+    .skdx-popover__close,
+    .skdx-date-picker__close,
+    .skdx-tour__close-trigger,
+    .skdx-table__expand-trigger,
+    .skdx-table__tree-trigger
+  ) {
+    inline-size: var(--skdx-control-height-md);
+    padding-inline: 0;
+  }
+
+  :where(
+    .skdx-dialog__trigger,
+    .skdx-dialog__action,
+    .skdx-dialog__cancel,
+    .skdx-drawer__trigger,
+    .skdx-menu__trigger,
+    .skdx-floating-panel__trigger,
+    .skdx-popover__trigger,
+    .skdx-popover__close,
+    .skdx-tour__trigger,
+    .skdx-tour__next-trigger,
+    .skdx-tour__prev-trigger,
+    .skdx-tour__skip-trigger,
+    .skdx-tour__close-trigger,
+    .skdx-date-picker__close,
+    .skdx-editable__edit-trigger,
+    .skdx-editable__submit-trigger,
+    .skdx-editable__cancel-trigger,
+    .skdx-file-upload__trigger,
+    .skdx-form__submit,
+    .skdx-checkbox-group__select-all,
+    .skdx-split-button__action,
+    .skdx-split-button__trigger,
+    .skdx-stepper__trigger,
+    .skdx-toast__action,
+    .skdx-toolbar__button,
+    .skdx-toolbar__link,
+    .skdx-transfer__move-trigger,
+    .skdx-transfer__move-all-trigger,
+    .skdx-table__expand-trigger,
+    .skdx-table__tree-trigger
+  ):is(:disabled, [data-disabled], [aria-disabled='true']) {
+    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;
+  }
+
+  @media (forced-colors: active) {
+    :where(
+      .skdx-dialog__trigger,
+      .skdx-dialog__action,
+      .skdx-dialog__cancel,
+      .skdx-drawer__trigger,
+      .skdx-menu__trigger,
+      .skdx-popover__trigger,
+      .skdx-popover__close,
+      .skdx-tour__next-trigger,
+      .skdx-tour__prev-trigger,
+      .skdx-form__submit,
+      .skdx-split-button__action,
+      .skdx-split-button__trigger,
+      .skdx-toolbar__button,
+      .skdx-transfer__move-trigger,
+      .skdx-transfer__move-all-trigger
+    ) {
+      border-color: ButtonBorder;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+/*
+ * 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';
+
+/* A rotated square, not a border triangle or an SVG marker: `PopperArrow` renders a plain
+   `<span>`, so `fill` and `stroke` land on nothing at all. A `role="tooltip"` panel keeps
+   its own rule in popover.css — it points out of the inverse surface, not the raised one. */
+@layer skdx-components {
+  :where(.skdx-menu__arrow, .skdx-menubar__arrow, .skdx-popover__arrow, .skdx-tour__arrow) {
+    inline-size: var(--skdx-space-3);
+    block-size: var(--skdx-space-3);
+    rotate: 45deg;
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+}

package/dist/skins-src/components/_card-control.css

@@ -0,0 +1,27 @@
+/*
+ * 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';
+
+/* Named explicitly, not matched by [class*='-card']: that substring test also matches unrelated consumer classes like `card-list` or `.pricing-card-grid`. */
+@layer skdx-components {
+  :where(.skdx-checkbox-card, .skdx-radio-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);
+  }
+}

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

@@ -0,0 +1,281 @@
+/*
+ * 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-highlighted] is styled, not :hover: aria-activedescendant points at the active option, which must stay visibly active while the pointer sits elsewhere. */
+@layer skdx-components {
+  :where(.skdx-menu__item),
+  :where(.skdx-menubar__item),
+  :where(.skdx-select__item),
+  :where(.skdx-listbox__item),
+  :where(.skdx-combobox__item),
+  :where(.skdx-autocomplete__item),
+  :where(.skdx-mentions__item),
+  :where(.skdx-tree-select__item),
+  :where(.skdx-command__item),
+  :where(.skdx-transfer__item),
+  /* A submenu's trigger is a row in the menu above it, so it shares row metrics. */
+  :where(.skdx-menu__sub-trigger),
+  :where(.skdx-menubar__sub-trigger) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    min-block-size: var(--skdx-item-height-md);
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-2);
+
+    border-radius: var(--skdx-radius-inner);
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-normal);
+    color: var(--skdx-color-text-default);
+    text-transform: none;
+    letter-spacing: normal;
+
+    cursor: pointer;
+    user-select: none;
+    scroll-margin-block: var(--skdx-space-1);
+  }
+
+  /* Angular/Web Components filter by marking rows [hidden] rather than unmounting; author `display: flex` above beats [hidden] on origin, so it must be restated here. */
+  :where(.skdx-autocomplete__item)[hidden],
+  :where(.skdx-combobox__item)[hidden],
+  :where(.skdx-command__item)[hidden],
+  :where(.skdx-mentions__item)[hidden],
+  :where(.skdx-select__item)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-menu__checkbox-item),
+  :where(.skdx-menubar__checkbox-item),
+  :where(.skdx-menu__radio-item),
+  :where(.skdx-menubar__radio-item) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    min-block-size: var(--skdx-item-height-md);
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-2);
+    border-radius: var(--skdx-radius-inner);
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-default);
+    cursor: pointer;
+  }
+
+  /* Stated on the surface, not as a row margin: adjacent block margins collapse and would silently produce a 1px gap instead of 2px. */
+  :where(.skdx-menu__content),
+  :where(.skdx-menu__sub-content),
+  :where(.skdx-menubar__content),
+  :where(.skdx-menubar__sub-content),
+  :where(.skdx-select__viewport),
+  :where(.skdx-combobox__content),
+  :where(.skdx-autocomplete__content),
+  :where(.skdx-mentions__content),
+  :where(.skdx-tree-select__content),
+  :where(.skdx-command__list) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-item-gap);
+  }
+
+  /* Same origin-beats-hidden issue as the item rule above: frameworks that keep a closed panel mounted with [hidden] need `display: none` restated here. */
+  :where(.skdx-menu__content)[hidden],
+  :where(.skdx-menu__sub-content)[hidden],
+  :where(.skdx-menubar__content)[hidden],
+  :where(.skdx-menubar__sub-content)[hidden],
+  :where(.skdx-select__viewport)[hidden],
+  :where(.skdx-combobox__content)[hidden],
+  :where(.skdx-autocomplete__content)[hidden],
+  :where(.skdx-mentions__content)[hidden],
+  :where(.skdx-tree-select__content)[hidden],
+  :where(.skdx-command__list)[hidden] {
+    display: none;
+  }
+
+  /* Three highlight signals — [data-highlighted], :focus (not :focus-visible, since pointer entry moves focus too), and :hover — because different families track the active row differently. */
+  :where(.skdx-menu__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-menubar__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-select__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-listbox__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-combobox__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-autocomplete__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-mentions__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-tree-select__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-command__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-transfer__item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-menu__checkbox-item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-menubar__checkbox-item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-menu__radio-item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-menubar__radio-item):is([data-highlighted], :focus, :hover),
+  :where(.skdx-menu__sub-trigger):is([data-highlighted], :focus, :hover),
+  :where(.skdx-menubar__sub-trigger):is([data-highlighted], :focus, :hover) {
+    background-color: var(--skdx-color-highlight-bg);
+    color: var(--skdx-color-highlight-text);
+  }
+
+  /* Without this, the pointer still painted disabled rows as if active. */
+  :where(.skdx-menu__item)[data-disabled]:hover,
+  :where(.skdx-menubar__item)[data-disabled]:hover,
+  :where(.skdx-select__item)[data-disabled]:hover,
+  :where(.skdx-listbox__item)[data-disabled]:hover,
+  :where(.skdx-combobox__item)[data-disabled]:hover,
+  :where(.skdx-autocomplete__item)[data-disabled]:hover,
+  :where(.skdx-mentions__item)[data-disabled]:hover,
+  :where(.skdx-tree-select__item)[data-disabled]:hover,
+  :where(.skdx-command__item)[data-disabled]:hover,
+  :where(.skdx-transfer__item)[data-disabled]:hover,
+  :where(.skdx-menu__checkbox-item)[data-disabled]:hover,
+  :where(.skdx-menubar__checkbox-item)[data-disabled]:hover,
+  :where(.skdx-menu__radio-item)[data-disabled]:hover,
+  :where(.skdx-menubar__radio-item)[data-disabled]:hover {
+    background-color: transparent;
+    color: var(--skdx-color-text-disabled);
+  }
+
+  /* Selected (data state) and highlighted (cursor state) can both be true; selected uses ink/weight, highlighted uses background, so the two stack instead of overwriting. */
+  :where(.skdx-transfer__item)[data-selected],
+  :where(.skdx-select__item)[aria-selected='true'],
+  :where(.skdx-listbox__item)[aria-selected='true'],
+  :where(.skdx-combobox__item)[aria-selected='true'],
+  :where(.skdx-autocomplete__item)[aria-selected='true'],
+  :where(.skdx-tree-select__item)[aria-selected='true'],
+  :where(.skdx-command__item)[aria-selected='true'] {
+    color: var(--skdx-color-text-accent);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  /* text-accent on highlight-bg measures 3.91:1 in solarized-light; the cursor's ink wins while active. */
+  :where(
+    .skdx-transfer__item[data-selected],
+    .skdx-select__item[aria-selected='true'],
+    .skdx-listbox__item[aria-selected='true'],
+    .skdx-combobox__item[aria-selected='true'],
+    .skdx-autocomplete__item[aria-selected='true'],
+    .skdx-tree-select__item[aria-selected='true'],
+    .skdx-command__item[aria-selected='true']
+  ):is([data-highlighted], :focus, :hover) {
+    color: var(--skdx-color-highlight-text);
+  }
+
+  :where(.skdx-menu__item)[data-disabled],
+  :where(.skdx-menubar__item)[data-disabled],
+  :where(.skdx-select__item)[data-disabled],
+  :where(.skdx-listbox__item)[data-disabled],
+  :where(.skdx-combobox__item)[data-disabled],
+  :where(.skdx-autocomplete__item)[data-disabled],
+  :where(.skdx-mentions__item)[data-disabled],
+  :where(.skdx-tree-select__item)[data-disabled],
+  :where(.skdx-command__item)[data-disabled],
+  :where(.skdx-transfer__item)[data-disabled],
+  :where(.skdx-menu__checkbox-item)[data-disabled],
+  :where(.skdx-menubar__checkbox-item)[data-disabled],
+  :where(.skdx-menu__radio-item)[data-disabled],
+  :where(.skdx-menubar__radio-item)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+    /* Deliberately keeps its background: a disabled row that also lost its
+       highlight became invisible when arrowed past in a long list. */
+  }
+
+  :where(.skdx-menu__label),
+  :where(.skdx-menubar__label),
+  :where(.skdx-select__label),
+  :where(.skdx-listbox__label),
+  :where(.skdx-combobox__label),
+  :where(.skdx-autocomplete__label),
+  :where(.skdx-menu__group),
+  :where(.skdx-menubar__group),
+  :where(.skdx-select__group),
+  :where(.skdx-listbox__group),
+  :where(.skdx-combobox__group),
+  :where(.skdx-autocomplete__group),
+  :where(.skdx-command__group-label) {
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-1);
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-semibold);
+    color: var(--skdx-color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: var(--skdx-font-letter-spacing-wide);
+  }
+
+  :where(.skdx-menu__item-indicator),
+  :where(.skdx-menubar__item-indicator),
+  :where(.skdx-select__item-indicator),
+  :where(.skdx-listbox__item-indicator),
+  :where(.skdx-tree-select__item-indicator) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: var(--skdx-icon-size-md);
+    block-size: var(--skdx-icon-size-md);
+    color: var(--skdx-color-text-accent);
+  }
+
+  /* Unselected tick: React unmounts it, Angular/Web Components keep it mounted and [hidden]; `display: inline-flex` above is author CSS, so [hidden] must be restated. */
+  :where(.skdx-menu__item-indicator)[hidden],
+  :where(.skdx-menubar__item-indicator)[hidden],
+  :where(.skdx-select__item-indicator)[hidden],
+  :where(.skdx-listbox__item-indicator)[hidden],
+  :where(.skdx-tree-select__item-indicator)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-combobox__empty),
+  :where(.skdx-autocomplete__empty),
+  :where(.skdx-mentions__empty),
+  :where(.skdx-tree-select__empty),
+  :where(.skdx-command__empty),
+  :where(.skdx-transfer__empty),
+  :where(.skdx-select__empty) {
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-3);
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    text-align: center;
+  }
+
+  :where(.skdx-menu__separator),
+  :where(.skdx-menubar__separator),
+  :where(.skdx-select__separator),
+  :where(.skdx-command__separator) {
+    block-size: var(--skdx-border-width-thin);
+    margin-block: var(--skdx-space-1);
+    background-color: var(--skdx-color-separator);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-menu__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-menubar__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-select__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-listbox__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-combobox__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-autocomplete__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-mentions__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-tree-select__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-command__item):is([data-highlighted], :focus, :hover),
+    :where(.skdx-transfer__item):is([data-highlighted], :focus, :hover) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    :where(.skdx-menu__item)[data-disabled],
+    :where(.skdx-menubar__item)[data-disabled],
+    :where(.skdx-select__item)[data-disabled],
+    :where(.skdx-listbox__item)[data-disabled],
+    :where(.skdx-combobox__item)[data-disabled],
+    :where(.skdx-autocomplete__item)[data-disabled],
+    :where(.skdx-mentions__item)[data-disabled],
+    :where(.skdx-tree-select__item)[data-disabled],
+    :where(.skdx-command__item)[data-disabled],
+    :where(.skdx-transfer__item)[data-disabled] {
+      color: GrayText;
+    }
+  }
+}

package/dist/skins-src/components/_hit-target.css

@@ -0,0 +1,28 @@
+/*
+ * 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';
+
+/* Invisible hit area, not a bigger control: every painted box below is under WCAG 2.2 §2.5.8's
+   24px minimum, and the chips also sit too close together for the spacing exception.
+   Each of these parts sets `position: relative` in its own file — this only fills it. */
+@layer skdx-components {
+  :where(
+    .skdx-badge__delete,
+    .skdx-checkbox,
+    .skdx-file-upload__item-delete,
+    .skdx-select__tag-remove,
+    .skdx-tags-input__item-delete
+  )::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    inline-size: var(--skdx-target-min);
+    block-size: var(--skdx-target-min);
+  }
+}