@skdx/docs-kit 0.35.0

package/dist/skins-src/components/tree-select.css

@@ -0,0 +1,124 @@
+/*
+ * 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';
+/* Every TreeSelect row *is* a `.skdx-tree__item` through composition, and importing
+   tree-select.css alone is a supported entry point, so tree.css must come along. */
+@import 'tree.css';
+
+/**
+ * TreeSelect — a Select whose options are a hierarchy. The popup reads one
+ * `data-size` for both of its halves — filter input and rows — so
+ * the two never meet at unrelated rungs; an unmarked popup gets `md`.
+ */
+@layer skdx-components {
+  :where(.skdx-tree-select__content) {
+    --skdx-tree-select-control-height: var(--skdx-control-height-sm);
+    --skdx-tree-select-item-height: var(--skdx-item-height-md);
+    --skdx-tree-select-column-width: 12rem;
+
+    padding: var(--skdx-overlay-padding);
+  }
+
+  :where(.skdx-tree-select__content)[data-size='sm'] {
+    --skdx-tree-select-control-height: var(--skdx-control-height-sm);
+    --skdx-tree-select-item-height: var(--skdx-item-height-sm);
+  }
+
+  :where(.skdx-tree-select__content)[data-size='lg'] {
+    --skdx-tree-select-control-height: var(--skdx-control-height-lg);
+    --skdx-tree-select-item-height: var(--skdx-item-height-lg);
+  }
+
+  :where(.skdx-tree-select__input) {
+    inline-size: 100%;
+    block-size: var(--skdx-tree-select-control-height, var(--skdx-control-height-sm));
+    padding-inline: var(--skdx-space-2);
+    margin-block-end: 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);
+    border-radius: var(--skdx-radius-sm);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-tree-select__item) {
+    min-block-size: var(--skdx-tree-select-item-height, var(--skdx-item-height-md));
+  }
+
+  :where(.skdx-tree-select__tree) {
+    display: flex;
+    flex-direction: column;
+    padding: var(--skdx-space-1);
+  }
+
+  /* `data-layout` is the effective layout, not the prop: a filtered columns popup
+     reads `tree`, so gating on it keeps every rule below out of the tree layout. */
+  :where(.skdx-tree-select__columns)[data-layout='columns'] {
+    display: flex;
+
+    max-block-size: var(--skdx-tree-select-available-height, none);
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  :where(.skdx-tree-select__columns)[data-layout='columns'] > :where(.skdx-tree-select__tree) {
+    flex: none;
+    inline-size: var(--skdx-tree-select-column-width, 12rem);
+    overflow-y: auto;
+  }
+
+  :where(.skdx-tree-select__columns)[data-layout='columns']
+    > :where(.skdx-tree-select__tree)
+    + :where(.skdx-tree-select__tree) {
+    border-inline-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+  }
+
+  /* Exactly one Item in the whole popup is highlighted, so `:has()` singles out one
+     column; the component publishes no `data-active` to match instead. */
+  :where(.skdx-tree-select__columns)[data-layout='columns']
+    > :where(.skdx-tree-select__tree):has([data-highlighted]) {
+    background-color: var(--skdx-color-surface-sunken);
+  }
+
+  /* The trigger's chips. `data-chip` is a contracted CSS part and every adapter
+     emits it, but nothing in the skin matched it, so a multiple-selection trigger read
+     as a run of unseparated words. Styled from tag.css's tokens rather than by
+     importing it: these are inert read-outs inside a `<button>` (a nested remove
+     control would be invalid HTML), so they take the tag's shape without its
+     interactive parts. */
+  :where(.skdx-tree-select__value) [data-chip] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    max-inline-size: 12ch;
+    overflow: hidden;
+    padding-inline: var(--skdx-space-2);
+
+    color: var(--skdx-color-status-neutral-text);
+    background-color: var(--skdx-color-status-neutral-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-status-neutral-border);
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-xs);
+    line-height: var(--skdx-font-line-height-tight);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* One `Value` renders every chip in a row; the gap is what keeps a hundred of
+     them from reading as one word. */
+  :where(.skdx-tree-select__value)[data-multiple] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-1);
+  }
+}

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

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_collection.css';
+
+/**
+ * Tree — a hierarchy of expandable nodes.
+ *
+ * Depth is expressed with `padding-inline-start` driven by
+ * `--skdx-tree-node-depth`, so indentation mirrors correctly under RTL and the
+ * whole row stays clickable at every level (a margin would leave dead space).
+ */
+@layer skdx-components {
+  /* Without inline-size, the tree shrink-wraps to its widest label and a centring container floats it mid-stage. */
+  :where(.skdx-tree) {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-tree__item) {
+    /* --skdx-tree-node-depth is a number, so one calc() over it has no ceiling — reading aria-level directly would need one CSS rule per level. */
+    --skdx-tree-item-indent: calc(
+      var(--skdx-space-2) + var(--skdx-space-4) * (var(--skdx-tree-node-depth, 1) - 1)
+    );
+
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    min-block-size: var(--skdx-item-height-md);
+    padding-inline-start: var(--skdx-tree-item-indent);
+    padding-inline-end: var(--skdx-space-2);
+
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  /* Own paint surface, not painted on .skdx-tree__item itself: that element also contains the nested TreeGroup, so a background there would fill the whole subtree. */
+  :where(.skdx-tree__item)::before {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 0;
+    z-index: -1;
+    block-size: var(--skdx-item-height-md);
+    border-radius: inherit;
+  }
+
+  /* Matched by value ([data-checked='checked']), not presence: the attribute is emitted with unchecked/indeterminate values too. A ring, not the selected fill, since aria-selected can coexist. */
+  :where(.skdx-tree__item)[data-checked='checked'] {
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-tree__item)[data-checked='checked']::before {
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-tree__item)[aria-selected='true'] {
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-tree__item)[aria-selected='true']::before {
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  /* Own paint, not a shade of selected: accent text without the fill, so "partly checked" isn't mistaken for "selected". */
+  :where(.skdx-tree__item)[data-checked='indeterminate'] {
+    color: var(--skdx-color-text-accent);
+  }
+
+  /* Tree moves real DOM focus (roving tabindex) instead of publishing a highlight attribute, so :focus marks the active node. */
+  :where(.skdx-tree__item):is(:focus, :hover) {
+    color: var(--skdx-color-highlight-text);
+  }
+
+  :where(.skdx-tree__item):is(:focus, :hover)::before {
+    background-color: var(--skdx-color-highlight-bg);
+  }
+
+  :where(.skdx-tree__item)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-tree__item-indicator) {
+    display: inline-flex;
+    flex: none;
+    color: var(--skdx-color-text-muted);
+    transition: rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-tree__item)[data-state='expanded'] :where(.skdx-tree__item-indicator) {
+    rotate: 90deg;
+  }
+
+  /* flex-basis: 100% forces TreeGroup onto its own line without a DOM change; the negative margin cancels the parent's indent so depth padding stays absolute, not stacking. */
+  :where(.skdx-tree__group) {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    margin-inline-start: calc(-1 * var(--skdx-tree-item-indent));
+  }
+}

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

@@ -0,0 +1,129 @@
+/*
+ * 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';
+
+/** UsageCard — a quota tile: a label, the amount used against a limit, a meter and a status colour. */
+@layer skdx-components {
+  :where(.skdx-usage-card) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+
+    padding: var(--skdx-space-4);
+
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-lg);
+    box-shadow: var(--skdx-shadow-sm);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-usage-card__header) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-usage-card__label) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-usage-card__actions) {
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  :where(.skdx-usage-card__value) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--skdx-space-1);
+  }
+
+  :where(.skdx-usage-card__used) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    font-size: var(--skdx-font-size-xl);
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-usage-card__limit),
+  :where(.skdx-usage-card__unit) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    font-size: var(--skdx-font-size-md);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-usage-card)[data-state='over-limit'] :where(.skdx-usage-card__used) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-usage-card)[data-status='info'] :where(.skdx-usage-card__used) {
+    color: var(--skdx-color-text-info);
+  }
+
+  :where(.skdx-usage-card)[data-status='success'] :where(.skdx-usage-card__used) {
+    color: var(--skdx-color-text-success);
+  }
+
+  :where(.skdx-usage-card)[data-status='warning'] :where(.skdx-usage-card__used) {
+    color: var(--skdx-color-text-warning);
+  }
+
+  :where(.skdx-usage-card)[data-status='danger'] :where(.skdx-usage-card__used) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-usage-card__progress) {
+    margin-block-start: var(--skdx-space-3);
+  }
+
+  :where(.skdx-usage-card)[data-status='info'] :where(.skdx-usage-card__progress) {
+    --skdx-color-track-fill: var(--skdx-color-status-info-icon);
+  }
+
+  :where(.skdx-usage-card)[data-status='success'] :where(.skdx-usage-card__progress) {
+    --skdx-color-track-fill: var(--skdx-color-status-success-icon);
+  }
+
+  :where(.skdx-usage-card)[data-status='warning'] :where(.skdx-usage-card__progress) {
+    --skdx-color-track-fill: var(--skdx-color-status-warning-icon);
+  }
+
+  :where(.skdx-usage-card)[data-status='danger'] :where(.skdx-usage-card__progress) {
+    --skdx-color-track-fill: var(--skdx-color-status-danger-icon);
+  }
+
+  :where(.skdx-usage-card)[data-state='over-limit'] :where(.skdx-usage-card__progress) {
+    --skdx-color-track-fill: var(--skdx-color-status-danger-icon);
+  }
+
+  :where(.skdx-usage-card__description) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-usage-card__footer) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-usage-card) {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/skins-src/components/user-menu.css

@@ -0,0 +1,83 @@
+/*
+ * 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';
+
+/** UserMenu — an avatar-and-identity trigger opening a menu that repeats the identity above the application's entries. */
+@layer skdx-components {
+  :where(.skdx-user-menu) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    padding-block: var(--skdx-space-1);
+    padding-inline: var(--skdx-space-2);
+
+    border: 0;
+    border-radius: var(--skdx-radius-md);
+    background-color: transparent;
+    color: var(--skdx-color-text-default);
+    font: inherit;
+    cursor: pointer;
+
+    min-block-size: var(--skdx-target-min);
+  }
+
+  :where(.skdx-user-menu):hover {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-user-menu__identity) {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    min-inline-size: 0;
+    line-height: var(--skdx-font-line-height-tight);
+    text-align: start;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-user-menu__name) {
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-user-menu__description) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-user-menu)[data-variant='compact'] :where(.skdx-user-menu__identity) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where(.skdx-user-menu__content) {
+    min-inline-size: 14rem;
+  }
+
+  :where(.skdx-user-menu__header) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+    padding: var(--skdx-space-2);
+    padding-block-end: var(--skdx-space-3);
+  }
+
+  @media (max-width: 30rem) {
+    :where(.skdx-user-menu__identity) {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+}

package/dist/skins-src/components/verification-page.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';
+
+/** VerificationPage — a one-time-code pin input with a resend control, centred on the page. */
+@layer skdx-components {
+  :where(.skdx-verification-page) {
+    display: flex;
+    justify-content: center;
+    padding: var(--skdx-space-8);
+  }
+
+  :where(.skdx-verification-page__panel) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-4);
+
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 24rem;
+    padding: var(--skdx-space-6);
+
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-lg);
+    box-shadow: var(--skdx-shadow-md);
+  }
+
+  :where(.skdx-verification-page__code) {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  :where(.skdx-verification-page__resend) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.skdx-verification-page__resend-hint) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-verification-page__footer) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-verification-page__panel) {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/skins-src/components/workspace-switcher.css

@@ -0,0 +1,133 @@
+/*
+ * 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';
+
+/** WorkspaceSwitcher — a context trigger over a searchable, grouped list in a popover. */
+@layer skdx-components {
+  :where(.skdx-workspace-switcher) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    min-block-size: var(--skdx-target-min);
+    max-inline-size: 100%;
+    padding-inline: var(--skdx-space-3);
+
+    color: var(--skdx-color-text-default);
+    text-align: start;
+    background-color: var(--skdx-color-surface-default);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-md);
+  }
+
+  :where(.skdx-workspace-switcher__leading) {
+    display: flex;
+    flex: none;
+    align-items: center;
+  }
+
+  :where(.skdx-workspace-switcher__current) {
+    min-inline-size: 0;
+    overflow: hidden;
+    font-weight: var(--skdx-font-weight-medium);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :where(.skdx-workspace-switcher__description) {
+    min-inline-size: 0;
+    overflow: hidden;
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-xs);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :where(.skdx-workspace-switcher__content) {
+    inline-size: min(20rem, 90vw);
+    padding: 0;
+  }
+
+  :where(.skdx-workspace-switcher__search) {
+    inline-size: 100%;
+  }
+
+  :where(.skdx-workspace-switcher__list) {
+    max-block-size: 18rem;
+    overflow: auto;
+  }
+
+  :where(.skdx-workspace-switcher__loading, .skdx-workspace-switcher__empty) {
+    padding: var(--skdx-space-3);
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-sm);
+    text-align: center;
+  }
+
+  :where(.skdx-workspace-switcher__group) {
+    padding-block: var(--skdx-space-1);
+  }
+
+  :where(.skdx-workspace-switcher__item) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    column-gap: var(--skdx-space-2);
+    padding: var(--skdx-space-2);
+    border-radius: var(--skdx-radius-sm);
+  }
+
+  :where(.skdx-workspace-switcher__item)[data-selected] {
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  :where(.skdx-workspace-switcher__item-leading) {
+    grid-row: 1 / -1;
+    grid-column: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  :where(.skdx-workspace-switcher__item-label) {
+    grid-column: 2;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-workspace-switcher__item)[data-selected]
+    :where(.skdx-workspace-switcher__item-label) {
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-workspace-switcher__item-description) {
+    grid-column: 2;
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-xs);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-workspace-switcher__footer) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+    padding: var(--skdx-space-2);
+    border-block-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-workspace-switcher) {
+      border-color: ButtonText;
+    }
+
+    :where(.skdx-workspace-switcher__footer) {
+      border-block-start-color: CanvasText;
+    }
+
+    :where(.skdx-workspace-switcher__item)[data-selected] {
+      outline: var(--skdx-border-width-thin) solid Highlight;
+    }
+  }
+}