@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/* `_trigger.css` styles `.skdx-autocomplete__trigger`; imported here so a
+   per-component import is self-sufficient (`@import` de-duplicates in the bundle). */
+@import '_trigger.css';
+@import '_overlay.css';
+@import '_collection.css';
+
+/**
+ * Autocomplete — free text with suggestions; the text stands alone if unmatched.
+ * The input duplicates `.skdx-combobox__input`'s field treatment part for part,
+ * and the two blocks must not drift.
+ */
+@layer skdx-components {
+  :where(.skdx-autocomplete__content) {
+    padding: var(--skdx-overlay-padding);
+  }
+
+  /* Positioning context for the clear button, which overlays the input's trailing edge. */
+  :where(.skdx-autocomplete__field) {
+    position: relative;
+  }
+
+  :where(.skdx-autocomplete__input) {
+    inline-size: 100%;
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-control-padding-md);
+
+    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-md);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  /* Room for the clear button, which sits inset-inline-end: var(--skdx-space-1) with a target-min hit area. */
+  :where(.skdx-autocomplete__field)[data-clearable] :where(.skdx-autocomplete__input) {
+    padding-inline-end: calc(var(--skdx-target-min) + var(--skdx-space-1));
+  }
+
+  :where(.skdx-autocomplete__input)::placeholder {
+    color: var(--skdx-color-text-placeholder);
+    opacity: 1;
+  }
+
+  :where(.skdx-autocomplete__input):focus-visible {
+    border-color: var(--skdx-color-field-border-focus);
+  }
+
+  :where(.skdx-autocomplete__input)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  /* `:disabled`, not `[data-disabled]` — even though this part, unlike
+     `ComboboxInput`, publishes both. The native pseudo-class is the one that
+     also matches an `<input disabled>` a consumer set directly, and matching the
+     two components' disabled treatment matters more than matching their
+     selectors. */
+  :where(.skdx-autocomplete__input):disabled {
+    color: var(--skdx-color-text-disabled);
+    background-color: var(--skdx-color-field-bg-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-autocomplete__list) {
+    display: flex;
+    flex-direction: column;
+    padding: var(--skdx-space-1);
+  }
+
+  /* The matched substring inside a suggestion. Weight carries the match, colour
+     only reinforces it — a match highlighted by colour alone is invisible to a
+     reader who cannot see it. */
+  :where(.skdx-autocomplete__highlight) {
+    font-weight: var(--skdx-font-weight-semibold);
+    color: var(--skdx-color-text-accent);
+    background: transparent;
+  }
+
+  /* Overlaid on the input's trailing edge only inside the anatomy wrapper; a consumer-composed clear keeps its own flow. */
+  :where(.skdx-autocomplete__field) :where(.skdx-autocomplete__clear) {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--skdx-space-1);
+    margin-block: auto;
+  }
+
+  /* Empties the draft text and the committed value in one press. */
+  :where(.skdx-autocomplete__clear) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+
+  :where(.skdx-autocomplete__clear):hover:not(:disabled) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-autocomplete__clear):disabled {
+    color: var(--skdx-color-text-disabled);
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,87 @@
+/*
+ * 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';
+
+/** Avatar — a person or entity, as an image with a text fallback. */
+@layer skdx-components {
+  :where(.skdx-avatar) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    inline-size: var(--skdx-control-height-md);
+    block-size: var(--skdx-control-height-md);
+
+    /* The image is clipped to the frame rather than sized to it, so a
+       non-square source is cropped instead of distorted. */
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    border-radius: var(--skdx-radius-full);
+
+    color: var(--skdx-color-text-muted);
+    background-color: var(--skdx-color-surface-sunken);
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    user-select: none;
+  }
+
+  :where(.skdx-avatar__image) {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* Shown while the image loads or after it fails; the component owns the
+     switch, this only paints it. */
+  :where(.skdx-avatar__fallback) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+    text-transform: uppercase;
+  }
+
+  /* The default rungs (`md`, `circle`) deliberately repeat the base rule, so an
+     inherited `data-size`/`data-shape` can be overridden back to the default. */
+  :where(.skdx-avatar)[data-size='md'] {
+    inline-size: var(--skdx-control-height-md);
+    block-size: var(--skdx-control-height-md);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-avatar)[data-size='sm'] {
+    inline-size: var(--skdx-control-height-sm);
+    block-size: var(--skdx-control-height-sm);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-avatar)[data-size='lg'] {
+    inline-size: var(--skdx-control-height-lg);
+    block-size: var(--skdx-control-height-lg);
+    font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-avatar)[data-shape='circle'] {
+    border-radius: var(--skdx-radius-full);
+  }
+
+  /* The missing middle rung: between the circle and the near-square, mapping to
+     the next radius up from `square`'s. Every reference that models shape has
+     three values — MUI's circular/rounded/square, Shoelace's
+     circle/square/rounded — and this system had two. */
+  :where(.skdx-avatar)[data-shape='rounded'] {
+    border-radius: var(--skdx-radius-lg);
+  }
+
+  :where(.skdx-avatar)[data-shape='square'] {
+    border-radius: var(--skdx-radius-md);
+  }
+}

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

@@ -0,0 +1,164 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_status.css';
+@import '_hit-target.css';
+
+/** Badge — a small count or status marker, and the removable entry a TagGroup navigates. */
+@layer skdx-components {
+  :where(.skdx-badge) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--skdx-space-1);
+
+    min-inline-size: var(--skdx-indicator-size-md);
+    padding-inline: var(--skdx-space-2);
+    /* Not zero: both references measure a 20px badge; no block padding closed this one to 17px. */
+    padding-block: var(--skdx-border-width-thick);
+
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-medium);
+    line-height: var(--skdx-font-line-height-tight);
+    /* Counts line up in a column when digits are the same width. */
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    color: var(--skdx-status-text, var(--skdx-color-status-neutral-text));
+    background-color: var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));
+    border: var(--skdx-border-width-thin) solid
+      var(--skdx-status-border, var(--skdx-color-status-neutral-border));
+    border-radius: var(--skdx-radius-full);
+  }
+
+  /* data-variant (solid/outline/subtle), data-dot and data-status are three independent axes. */
+  :where(.skdx-badge)[data-variant='solid'] {
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-bg);
+  }
+
+  :where(.skdx-badge)[data-variant='outline'] {
+    color: var(--skdx-status-text, var(--skdx-color-status-neutral-text));
+    background-color: transparent;
+    border-color: var(--skdx-status-border, var(--skdx-color-status-neutral-border));
+  }
+
+  /* Written out explicitly so a consumer can override an inherited data-variant back to it. */
+  :where(.skdx-badge)[data-variant='subtle'] {
+    color: var(--skdx-status-text, var(--skdx-color-status-neutral-text));
+    background-color: var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));
+    border-color: transparent;
+  }
+
+  /* font-size: 0, not display: none, so the accessible name stays in the tree; overflow: hidden catches a replaced element font-size can't zero out. */
+  :where(.skdx-badge)[data-dot] {
+    inline-size: var(--skdx-space-2);
+    min-inline-size: 0;
+    block-size: var(--skdx-space-2);
+    padding: 0;
+    overflow: hidden;
+    font-size: 0;
+    /* A dot is a circle whatever data-shape says. */
+    border-radius: var(--skdx-radius-full);
+  }
+
+  /* Both rungs named, including the one that repeats the base rule, so a consumer can override an inherited data-shape back to it. */
+  :where(.skdx-badge)[data-shape='pill'] {
+    border-radius: var(--skdx-radius-full);
+  }
+
+  :where(.skdx-badge)[data-shape='rounded'] {
+    border-radius: var(--skdx-radius-sm);
+  }
+
+  /* Sizes follow the system-wide control rungs, and are what a badge grows to
+     when it becomes a chip. The unmarked size is neither of them — a bare status
+     badge is not control-shaped — so all three rungs are written out. */
+  :where(.skdx-badge)[data-size='sm'] {
+    min-block-size: var(--skdx-control-height-sm);
+    padding-inline: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-badge)[data-size='md'] {
+    min-block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-space-3);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-badge)[data-size='lg'] {
+    min-block-size: var(--skdx-control-height-lg);
+    padding-inline: var(--skdx-space-4);
+    font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-badge__leading),
+  :where(.skdx-badge__trailing) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+  }
+
+  /* The leading object sizes itself; the label is what gives way, so the two
+     need separate hooks — a single content run leaves a skin nothing to
+     truncate but the icon along with the text. */
+  :where(.skdx-badge__label) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.skdx-badge)[data-selected] {
+    background-color: var(--skdx-color-surface-selected);
+    border-color: var(--skdx-color-border-accent);
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-badge)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    background-color: var(--skdx-color-surface-disabled);
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-badge__delete) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--skdx-icon-size-sm);
+    block-size: var(--skdx-icon-size-sm);
+    /* Renders as a native <button>; base.css opts it into the page font but
+       leaves the UA default padding (Chrome: 1px 6px) alone. With
+       box-sizing: border-box that padding ate the fixed 14px box down to a
+       couple of content pixels and squeezed the "×" glyph — the same bug
+       `.skdx-checkbox` documents fixing for the same reason. */
+    padding: 0;
+    color: currentColor;
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-full);
+    cursor: pointer;
+  }
+
+  :where(.skdx-badge__delete):hover {
+    color: var(--skdx-color-text-danger);
+  }
+
+  /* Never its own tab stop — the badge is; a stray focus-visible ring here would double the badge's own ring. */
+  :where(.skdx-badge__delete):focus-visible {
+    outline: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-badge) {
+      border-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+/*
+ * 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';
+
+/* No rules: Box emits every declaration inline. */

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

@@ -0,0 +1,78 @@
+/*
+ * 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';
+
+/** Breadcrumb — the trail back up the hierarchy. */
+@layer skdx-components {
+  :where(.skdx-breadcrumb__list) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-breadcrumb__item) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-breadcrumb__link) {
+    color: var(--skdx-color-text-muted);
+    text-decoration: none;
+    /* Long titles truncate rather than wrapping the trail onto three lines. */
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.skdx-breadcrumb__link):hover {
+    color: var(--skdx-color-text-default);
+    text-decoration: underline;
+  }
+
+  /* The current page is not a link. It gets full-contrast ink and no
+     affordance, matching `aria-current="page"`. */
+  :where(.skdx-breadcrumb__link)[aria-current='page'],
+  :where(.skdx-breadcrumb__page) {
+    color: var(--skdx-color-text-default);
+    font-weight: var(--skdx-font-weight-medium);
+    text-decoration: none;
+  }
+
+  /* Decorative: the component marks it aria-hidden, so it must not be the only
+     thing separating two crumbs semantically — the list markup does that. */
+  :where(.skdx-breadcrumb__separator) {
+    display: inline-flex;
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* The default glyph is `/`, and every glyph anyone puts here — a chevron, a
+     caret, an arrow — points along the reading direction. None of them mirror on
+     their own, so the rule has to do it.
+
+     This replaced a `rotate: 0deg` under the comment "Mirrors with the writing
+     direction", which is a no-op: it rotated nothing, in either direction, and
+     the file contained no `[dir='rtl']` rule at all. A comment describing
+     behaviour the declaration below it does not have is worse than no comment,
+     because it stops anyone looking. */
+  :where([dir='rtl']) :where(.skdx-breadcrumb__separator) {
+    scale: -1 1;
+  }
+
+  :where(.skdx-breadcrumb__ellipsis) {
+    color: var(--skdx-color-text-muted);
+  }
+}