@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,104 @@
+/*
+ * 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';
+
+/**
+ * Field — the label + control + description + error grouping. Owns the vertical
+ * rhythm of a form row and nothing else; each control keeps its own stylesheet.
+ */
+@layer skdx-components {
+  :where(.skdx-field) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-field-gap);
+    /* Establishes the block the description and error align to. */
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-field)[data-orientation='horizontal'] {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--skdx-space-3);
+  }
+
+  /* Density — on the Field root, exactly like Table's. `comfortable`
+     is the default the rule above already ships; `compact` is the rung a
+     settings page packed with rows wants and a single form on its own page does
+     not. Skin-layer only: density changes no markup, no state and no ARIA.
+     Written as an override of `gap` rather than as a token indirection because
+     Field has exactly one spacing decision to make. */
+  :where(.skdx-field)[data-density='compact'] {
+    gap: var(--skdx-space-1);
+  }
+
+  :where(.skdx-field)[data-density='compact'][data-orientation='horizontal'] {
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-field__description) {
+    font-size: var(--skdx-font-size-xs);
+    line-height: var(--skdx-font-line-height-normal);
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* Carries an icon slot as well as colour: red text alone is not a signal for every reader (WCAG 1.4.1). */
+  :where(.skdx-field__error) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--skdx-space-1);
+
+    font-size: var(--skdx-font-size-xs);
+    line-height: var(--skdx-font-line-height-normal);
+    font-weight: var(--skdx-font-weight-medium);
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-field)[data-disabled] :where(.skdx-field__description),
+  :where(.skdx-field)[data-disabled] :where(.skdx-field__label) {
+    color: var(--skdx-color-text-disabled);
+  }
+
+  /* Not `aria-hidden`, so the space before it is a real DOM space, not a `::before`. */
+  :where(.skdx-field__required-indicator) {
+    color: var(--skdx-color-text-danger);
+    margin-inline-start: var(--skdx-space-1);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-field__required-indicator) {
+      color: CanvasText;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-field__error) {
+      color: CanvasText;
+    }
+  }
+
+  :where(.skdx-field__label) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    line-height: var(--skdx-font-line-height-tight);
+    color: var(--skdx-color-text-default);
+  }
+
+  /* Counts up to a limit and turns to the danger ink past it — the component
+     publishes `data-over-limit`, so the boundary is its decision, not a
+     duplicate of the same arithmetic here. */
+  :where(.skdx-field__character-count) {
+    font-size: var(--skdx-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    color: var(--skdx-color-text-muted);
+    margin-inline-start: auto;
+  }
+
+  :where(.skdx-field__character-count)[data-over-limit] {
+    color: var(--skdx-color-text-danger);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+}

package/dist/skins-src/components/file-upload.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 '_actuator.css';
+@import '../base.css';
+@import '_hit-target.css';
+
+/* Dragging switches border style as well as fill so the state change survives greyscale. */
+@layer skdx-components {
+  :where(.skdx-file-upload) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-file-upload__dropzone) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--skdx-space-2);
+
+    padding: var(--skdx-space-6);
+    text-align: center;
+
+    color: var(--skdx-color-text-muted);
+    background-color: var(--skdx-color-surface-default);
+    border: var(--skdx-border-width-thick) dashed var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-lg);
+
+    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-file-upload__dropzone):hover {
+    border-color: var(--skdx-color-border-strong);
+  }
+
+  :where(.skdx-file-upload__dropzone)[data-dragging] {
+    border-style: solid;
+    border-color: var(--skdx-color-border-accent);
+    background-color: var(--skdx-color-surface-selected);
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-file-upload__dropzone)[data-invalid] {
+    border-color: var(--skdx-color-border-danger);
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-file-upload__dropzone)[data-disabled] {
+    background-color: var(--skdx-color-surface-disabled);
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-file-upload__item) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-3);
+
+    padding: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-sm);
+
+    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-file-upload__item)[data-invalid] {
+    border-color: var(--skdx-color-border-danger);
+  }
+
+  :where(.skdx-file-upload__item-delete) {
+    position: relative;
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-file-upload__item-delete):hover {
+    color: var(--skdx-color-text-danger);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-file-upload__dropzone)[data-dragging] {
+      border-color: Highlight;
+    }
+  }
+
+  /* Clipped rather than `display: none` so the input stays form-submittable and
+     openable via `.click()`; it is aria-hidden, so the dropzone must carry the name. */
+  :where(.skdx-file-upload__input) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-file-upload__item-name) {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.skdx-file-upload__item-size) {
+    color: var(--skdx-color-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* The list reset covers the `asChild` composition rendering the group as a `<ul>`. */
+  :where(.skdx-file-upload__item-group) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where(.skdx-file-upload__item-preview) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.skdx-file-upload__clear) {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--skdx-space-1) var(--skdx-space-2);
+    color: var(--skdx-color-text-muted);
+    background: none;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    font-size: var(--skdx-font-size-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-file-upload__clear):hover:not(:disabled, [data-disabled]) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-file-upload__clear):disabled {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+}

package/dist/skins-src/components/filter-bar.css

@@ -0,0 +1,48 @@
+/*
+ * 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';
+
+/** FilterBar — a search field, filter controls, applied filters and a clear action, wrapping onto new rows. */
+@layer skdx-components {
+  :where(.skdx-filter-bar) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-filter-bar__search) {
+    flex: 1 1 16rem;
+    min-inline-size: 12rem;
+  }
+
+  :where(.skdx-filter-bar__filters) {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-filter-bar__actions) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    margin-inline-start: auto;
+  }
+
+  :where(.skdx-filter-bar__active) {
+    display: flex;
+    flex-basis: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+}

package/dist/skins-src/components/floating-panel.css

@@ -0,0 +1,168 @@
+/*
+ * 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 '_overlay.css';
+
+/** FloatingPanel — a draggable, resizable, non-modal window. */
+@layer skdx-components {
+  /* Physical left/top, not logical: a drag is measured in client coordinates and has no writing direction. */
+  :where(.skdx-floating-panel__content) {
+    position: fixed;
+    z-index: var(--skdx-z-index-modal);
+    left: var(--skdx-floating-panel-x, 0px);
+    top: var(--skdx-floating-panel-y, 0px);
+    inline-size: var(--skdx-floating-panel-width, auto);
+    block-size: var(--skdx-floating-panel-height, auto);
+
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 12rem;
+    padding: 0;
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  /* Angular/Web Components keep a closed panel mounted with [hidden]; author `display: flex` above beats it on origin, so it must be restated here. */
+  :where(.skdx-floating-panel__content)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-floating-panel__header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--skdx-space-2);
+
+    padding-inline: var(--skdx-space-3);
+    padding-block: var(--skdx-space-2);
+
+    background-color: var(--skdx-color-surface-default);
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    cursor: move;
+    user-select: none;
+  }
+
+  :where(.skdx-floating-panel__title) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-floating-panel__stage-trigger),
+  :where(.skdx-floating-panel__close-trigger) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--skdx-target-min);
+    min-block-size: var(--skdx-target-min);
+
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  /* Directions are physical (n/s/e/w), matching the component's own inline cursor: <direction>-resize. No cursor set here — the inline declaration outranks this file regardless. */
+  :where(.skdx-floating-panel__resize-trigger) {
+    position: absolute;
+    touch-action: none;
+    /* Corner grips overlap the two edge strips that meet there; the corner is the one you mean when you aim at it. */
+    z-index: 1;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='n'],
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='s'] {
+    left: 0;
+    right: 0;
+    block-size: var(--skdx-space-2);
+    z-index: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='n'] {
+    top: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='s'] {
+    bottom: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='e'],
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='w'] {
+    top: 0;
+    bottom: 0;
+    inline-size: var(--skdx-space-2);
+    z-index: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='e'] {
+    right: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='w'] {
+    left: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='ne'],
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='nw'],
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='se'],
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='sw'] {
+    inline-size: var(--skdx-space-3);
+    block-size: var(--skdx-space-3);
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='ne'] {
+    top: 0;
+    right: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='nw'] {
+    top: 0;
+    left: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='se'] {
+    bottom: 0;
+    right: 0;
+  }
+
+  :where(.skdx-floating-panel__resize-trigger)[data-direction='sw'] {
+    bottom: 0;
+    left: 0;
+  }
+
+  /* Still in the tab order and announced via aria-disabled, so it needs to look inert rather than disappear. */
+  :where(.skdx-floating-panel__resize-trigger)[data-disabled] {
+    cursor: default;
+  }
+
+  /* Position/size are written every frame of a drag; any transition on them turns it into a laggy chase of the cursor. */
+  :where(.skdx-floating-panel__content)[data-dragging],
+  :where(.skdx-floating-panel__content)[data-resizing] {
+    transition: none;
+    animation: none;
+    user-select: none;
+  }
+
+  /* No framework emits a body part — the recipe drops its children straight
+     into Content — so the body region is addressed as "everything under
+     Content that is neither the header nor a resize grip". `minimized` sets
+     the panel's height to auto, and hiding this region is what collapses it
+     to the header. */
+  :where(.skdx-floating-panel__content)
+    > :where(:not(.skdx-floating-panel__header):not(.skdx-floating-panel__resize-trigger)) {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    padding: var(--skdx-space-3);
+  }
+
+  :where(.skdx-floating-panel__content)[data-stage='minimized']
+    > :where(:not(.skdx-floating-panel__header):not(.skdx-floating-panel__resize-trigger)) {
+    display: none;
+  }
+}

package/dist/skins-src/components/forgot-password-page.css

@@ -0,0 +1,45 @@
+/*
+ * 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';
+
+/** ForgotPasswordPage — one email field asking for a reset link, centred on the page. */
+@layer skdx-components {
+  :where(.skdx-forgot-password-page) {
+    display: flex;
+    justify-content: center;
+    padding: var(--skdx-space-8);
+  }
+
+  :where(.skdx-forgot-password-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-forgot-password-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-forgot-password-page__panel) {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/skins-src/components/form-section.css

@@ -0,0 +1,75 @@
+/*
+ * 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';
+
+/** FormSection — a titled group of fields inside a larger form, stacked by default. */
+@layer skdx-components {
+  :where(.skdx-form-section) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-4);
+  }
+
+  :where(.skdx-form-section__header) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-form-section__title) {
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-form-section__description) {
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-form-section__content) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-field-gap);
+  }
+
+  :where(.skdx-form-section__footer) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--skdx-space-2);
+    padding-block-start: var(--skdx-space-3);
+    border-block-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+  }
+
+  :where(.skdx-form-section)[data-variant='bordered'] {
+    padding: var(--skdx-space-5);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-lg);
+    background-color: var(--skdx-color-surface-raised);
+  }
+
+  @media (min-width: 48rem) {
+    :where(.skdx-form-section)[data-variant='split'] {
+      display: grid;
+      grid-template-columns: minmax(12rem, 16rem) 1fr;
+      column-gap: var(--skdx-space-8);
+    }
+
+    :where(.skdx-form-section)[data-variant='split'] :where(.skdx-form-section__footer) {
+      grid-column: 2;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-form-section)[data-variant='bordered'] {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-form-section__footer) {
+      border-color: CanvasText;
+    }
+  }
+}