@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,336 @@
+/*
+ * 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';
+
+/* border-collapse: collapse, not separate: a sticky header with separated borders loses its bottom rule when it detaches. */
+@layer skdx-components {
+  :where(.skdx-table) {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-default);
+    /* Numeric columns align only if the digits are the same width. */
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.skdx-table__caption) {
+    padding-block: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    text-align: start;
+  }
+
+  :where(.skdx-table__header) {
+    background-color: var(--skdx-color-surface-default);
+  }
+
+  :where(.skdx-table__header-cell) {
+    /* The resize handle below is position: absolute; without a positioned ancestor here it climbs to the nearest one up the tree. */
+    position: relative;
+    padding-inline: var(--skdx-space-4);
+    padding-block: var(--skdx-space-3);
+    min-block-size: var(--skdx-item-height-lg);
+
+    font-weight: var(--skdx-font-weight-semibold);
+    text-align: start;
+    white-space: nowrap;
+    color: var(--skdx-color-text-muted);
+
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    inline-size: var(--skdx-table-column-width, auto);
+  }
+
+  /* Sortable headers are buttons in disguise; they need the affordance. */
+  :where(.skdx-table__header-cell)[aria-sort] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :where(.skdx-table__header-cell)[aria-sort]:hover {
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-table__header-cell)[aria-sort]:not([aria-sort='none']) {
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-table__cell) {
+    padding-inline: var(--skdx-space-4);
+    padding-block: var(--skdx-space-3);
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+    vertical-align: middle;
+  }
+
+  /* Density resolves on the root: it changes no markup and no state, only these two custom properties. */
+  :where(.skdx-table)[data-density='compact'] {
+    --skdx-table-cell-padding-inline: var(--skdx-space-3);
+    --skdx-table-cell-padding-block: var(--skdx-space-2);
+  }
+
+  :where(.skdx-table)[data-density] :where(.skdx-table__cell),
+  :where(.skdx-table)[data-density] :where(.skdx-table__header-cell) {
+    padding-inline: var(--skdx-table-cell-padding-inline, var(--skdx-space-4));
+    padding-block: var(--skdx-table-cell-padding-block, var(--skdx-space-3));
+  }
+
+  :where(.skdx-table__row):hover {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-table__row)[data-state='selected'] {
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  :where(.skdx-table__row)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+  }
+
+  /* A sticky header needs its own background: rows scroll under it, and a transparent header would show them through. */
+  :where(.skdx-table)[data-sticky-header] :where(.skdx-table__header) {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--skdx-z-index-sticky);
+    background-color: var(--skdx-color-surface-default);
+  }
+
+  /* WCAG 2.4.11: without scroll-margin, tabbing down the table scrolls the focused row behind the sticky header. The 0 fallback keeps this inert until data-sticky-header sets a measured height. */
+  :where(.skdx-table)[data-sticky-header] :where(.skdx-table__row) {
+    scroll-margin-block-start: var(--skdx-table-sticky-header-height, 0);
+  }
+
+  :where(.skdx-table__footer) {
+    font-weight: var(--skdx-font-weight-medium);
+    background-color: var(--skdx-color-surface-default);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-table__cell),
+    :where(.skdx-table__header-cell) {
+      border-block-end-color: CanvasText;
+    }
+  }
+
+  :where(.skdx-table__column-header-sort-trigger) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    inline-size: 100%;
+    min-block-size: var(--skdx-target-min);
+    padding: 0;
+
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    font: inherit;
+    font-weight: var(--skdx-font-weight-semibold);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  :where(.skdx-table__column-header-sort-trigger):hover {
+    color: var(--skdx-color-text-accent);
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-table__column-header-sort-trigger):active {
+    background-color: var(--skdx-color-surface-pressed);
+  }
+
+  /* Fills its header cell edge to edge, so a ring drawn outward would overlap the neighbouring column. */
+  :where(.skdx-table__column-header-sort-trigger):focus-visible {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  /* Sits under the label, full width, so a filtered column reads as one control stack. */
+  :where(.skdx-table__column-header-filter-input) {
+    display: block;
+    inline-size: 100%;
+    min-block-size: var(--skdx-target-min);
+    margin-block-start: var(--skdx-space-1);
+    padding-inline: var(--skdx-control-padding-sm);
+
+    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: inherit;
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-regular);
+  }
+
+  :where(.skdx-table__column-header-filter-input):hover {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where(.skdx-table__column-header-filter-input):focus-visible {
+    border-color: var(--skdx-color-field-border-focus);
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-table__sort-indicator) {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--skdx-icon-size-sm);
+    block-size: var(--skdx-icon-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-table__column-header-sort-trigger)[data-sort-direction]
+    :where(.skdx-table__sort-indicator) {
+    color: var(--skdx-color-text-accent);
+  }
+
+  /* Widened past its visible line so it can be caught with a pointer — WCAG 2.2 target size applies to a drag handle too. */
+  :where(.skdx-table__column-resize-trigger) {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--skdx-space-2);
+
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-inline-end: var(--skdx-border-width-thin) solid transparent;
+    cursor: col-resize;
+    touch-action: none;
+
+    /* The cell clips overflow to truncate headings, which would cut an outset ring in half, so this draws inside the border box instead. */
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-table__column-resize-trigger):hover,
+  :where(.skdx-table__column-resize-trigger)[data-dragging] {
+    border-inline-end-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-table__row-select-checkbox),
+  :where(.skdx-table__select-all-checkbox) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.skdx-table__empty) {
+    padding-block: var(--skdx-space-8);
+    color: var(--skdx-color-text-muted);
+    text-align: center;
+  }
+
+  /* Second selector: an unclassed framework host (display: contents) can sit between the row and its cell. */
+  :where(.skdx-table__expanded-row) > :where(.skdx-table__cell),
+  :where(.skdx-table__expanded-row)
+    > :where(:not([class*='skdx-']):has(> .skdx-table__cell))
+    > :where(.skdx-table__cell) {
+    background-color: var(--skdx-color-surface-sunken);
+  }
+
+  :where(.skdx-table__header-cell)[data-pinned],
+  :where(.skdx-table__cell)[data-pinned] {
+    position: sticky;
+    z-index: 1;
+    background-color: var(--skdx-color-surface-default);
+  }
+
+  :where(.skdx-table__header-cell)[data-pinned='start'],
+  :where(.skdx-table__cell)[data-pinned='start'] {
+    inset-inline-start: var(--skdx-table-pin-offset, 0);
+  }
+
+  :where(.skdx-table__header-cell)[data-pinned='end'],
+  :where(.skdx-table__cell)[data-pinned='end'] {
+    inset-inline-end: var(--skdx-table-pin-offset, 0);
+  }
+
+  /* A pinned header cell scrolls under a sticky header's own stacking context, so it needs a second tier above pinned body cells. */
+  :where(.skdx-table)[data-sticky-header] :where(.skdx-table__header-cell)[data-pinned] {
+    z-index: 2;
+  }
+
+  :where(.skdx-table__column-reorder-trigger),
+  :where(.skdx-table__column-pin-trigger) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-block-size: var(--skdx-target-min);
+    padding: 0;
+
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-table__column-reorder-trigger):hover,
+  :where(.skdx-table__column-pin-trigger):hover {
+    color: var(--skdx-color-text-accent);
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-table__column-reorder-trigger):focus-visible,
+  :where(.skdx-table__column-pin-trigger):focus-visible {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-table__column-reorder-trigger)[data-dragging] {
+    cursor: grabbing;
+  }
+
+  :where(.skdx-table__column-pin-trigger)[aria-pressed='true'] {
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-table__group-row) > :where(.skdx-table__group-cell) {
+    padding-inline: var(--skdx-space-4);
+    padding-block: var(--skdx-space-3);
+    background-color: var(--skdx-color-surface-sunken);
+    font-weight: var(--skdx-font-weight-semibold);
+    text-align: start;
+  }
+
+  :where(.skdx-table__group-trigger) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    inline-size: 100%;
+    min-block-size: var(--skdx-target-min);
+    padding: 0;
+
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    font: inherit;
+    font-weight: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  :where(.skdx-table__group-trigger):hover {
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-table__group-trigger):focus-visible {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-table__row)[data-level] > :where(.skdx-table__cell):first-of-type {
+    padding-inline-start: calc(
+      var(--skdx-table-cell-padding-inline, var(--skdx-space-4)) + var(--skdx-table-row-level, 0) *
+        var(--skdx-space-6)
+    );
+  }
+}

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

@@ -0,0 +1,116 @@
+/*
+ * 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';
+
+/**
+ * Tabs — switch between sibling panels. The selected tab is marked by an
+ * underline plus a weight/colour change, not colour alone. The indicator is
+ * a border on the tab itself, not a sliding element, since this package
+ * styles a headless component that does no measuring.
+ */
+@layer skdx-components {
+  :where(.skdx-tabs) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :where(.skdx-tabs)[data-orientation='vertical'] {
+    flex-direction: row;
+    gap: var(--skdx-space-4);
+  }
+
+  :where(.skdx-tabs__list) {
+    display: flex;
+    align-items: center;
+    /* Tabs are separated by air, not a divider, so the gap must read as one. */
+    gap: var(--skdx-space-6);
+
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-tabs)[data-orientation='vertical'] :where(.skdx-tabs__list) {
+    flex-direction: column;
+    align-items: stretch;
+    border-block-end: 0;
+    border-inline-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-tabs__trigger) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-control-gap-md);
+
+    /* Taller than a form control: the tablist is a navigation surface, not a row of inputs. */
+    min-block-size: var(--skdx-control-height-lg);
+    padding-inline: var(--skdx-space-3);
+
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    /* Reserved at rest so selecting a tab doesn't shift the row. */
+    border-block-end: var(--skdx-border-width-thick) solid transparent;
+    margin-block-end: calc(var(--skdx-border-width-thin) * -1);
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+
+    transition: color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-tabs__trigger):hover:not([data-disabled]) {
+    color: var(--skdx-color-text-default);
+  }
+
+  /* Keys off `data-state` only, not `aria-selected` too — the vertical
+     indicator and forced-colors rules below key off `data-state` alone, and
+     mixing vocabularies would let one silently miss the other. */
+  :where(.skdx-tabs__trigger)[data-state='active'] {
+    color: var(--skdx-color-text-accent);
+    border-block-end-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-tabs)[data-orientation='vertical'] :where(.skdx-tabs__trigger) {
+    justify-content: flex-start;
+    border-block-end: 0;
+    border-inline-end: var(--skdx-border-width-thick) solid transparent;
+    margin-block-end: 0;
+    margin-inline-end: calc(var(--skdx-border-width-thin) * -1);
+  }
+
+  :where(.skdx-tabs)[data-orientation='vertical'] :where(.skdx-tabs__trigger)[data-state='active'] {
+    border-inline-end-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-tabs__trigger)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* The active indicator otherwise keeps its accent colour, reading as still
+     interactive even though [data-disabled] alone already dims the label. */
+  :where(.skdx-tabs__trigger)[data-disabled][data-state='active'] {
+    border-block-end-color: var(--skdx-color-border-disabled);
+  }
+
+  :where(.skdx-tabs)[data-orientation='vertical']
+    :where(.skdx-tabs__trigger)[data-disabled][data-state='active'] {
+    border-inline-end-color: var(--skdx-color-border-disabled);
+  }
+
+  :where(.skdx-tabs__content) {
+    padding-block-start: var(--skdx-space-4);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-tabs__trigger)[data-state='active'] {
+      border-block-end-color: Highlight;
+      color: Highlight;
+    }
+  }
+}

package/dist/skins-src/components/tag-group.css

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import 'badge.css';
+
+/**
+ * TagGroup — a selectable collection of Badges. Two compositions, both drawn here:
+ * plain (only `root` renders, `role="list"`, with Badge children directly inside)
+ * and labelled (`root` wraps `label` + `list`, and `role="list"` moves to the `<ul>`).
+ */
+@layer skdx-components {
+  :where(.skdx-tag-group) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-tag-group)[data-orientation='vertical'] {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  /* Root's direction answers "do I hold a label"; `orientation` answers which way
+     the badges flow, on whichever element is the row for the composition in play. */
+  :where(.skdx-tag-group):has(.skdx-tag-group__label) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  :where(.skdx-tag-group__empty) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-tag-group__label) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-tag-group__list) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where(.skdx-tag-group)[data-orientation='vertical'] :where(.skdx-tag-group__list) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  /* Density cascades from root to list; `comfortable` repeats the
+     base rule so an inherited `data-density` can be reset to the default. */
+  :where(.skdx-tag-group)[data-density='comfortable'],
+  :where(.skdx-tag-group)[data-density='comfortable'] :where(.skdx-tag-group__list) {
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-tag-group)[data-density='compact'],
+  :where(.skdx-tag-group)[data-density='compact'] :where(.skdx-tag-group__list) {
+    gap: var(--skdx-space-1);
+  }
+}

package/dist/skins-src/components/tags-input.css

@@ -0,0 +1,176 @@
+/*
+ * 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';
+@import '_hit-target.css';
+
+/* data-size resolves on the root; the chip's height derives from it rather than being set as an independent constant. */
+@layer skdx-components {
+  :where(.skdx-tags-input),
+  :where(.skdx-tags-input)[data-size='md'] {
+    --skdx-tags-input-block-size: var(--skdx-control-height-md);
+    --skdx-tags-input-font-size: var(--skdx-font-size-sm);
+    --skdx-tags-input-item-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-tags-input)[data-size='sm'] {
+    --skdx-tags-input-block-size: var(--skdx-control-height-sm);
+    --skdx-tags-input-font-size: var(--skdx-font-size-xs);
+    --skdx-tags-input-item-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-tags-input)[data-size='lg'] {
+    --skdx-tags-input-block-size: var(--skdx-control-height-lg);
+    --skdx-tags-input-font-size: var(--skdx-font-size-md);
+    --skdx-tags-input-item-font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-tags-input) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    /* Matches __input's own min-inline-size below, so the field still reads as a field before its input has mounted. */
+    min-inline-size: 6rem;
+    min-block-size: var(--skdx-tags-input-block-size, var(--skdx-control-height-md));
+    padding: var(--skdx-space-1);
+
+    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: text;
+  }
+
+  :where(.skdx-tags-input):focus-within {
+    border-color: var(--skdx-color-field-border-focus);
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
+
+  :where(.skdx-tags-input)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-tags-input)[data-disabled] {
+    background-color: var(--skdx-color-field-bg-disabled);
+    opacity: var(--skdx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-tags-input__item) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    padding-inline: var(--skdx-space-2);
+    /* Derived from the field's rung, not set as an independent constant. */
+    min-block-size: calc(
+      var(--skdx-tags-input-block-size, var(--skdx-control-height-md)) - var(--skdx-space-2)
+    );
+
+    font-size: var(--skdx-tags-input-item-font-size, var(--skdx-font-size-xs));
+    color: var(--skdx-color-text-default);
+    background-color: var(--skdx-color-surface-sunken);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+    border-radius: var(--skdx-radius-sm);
+  }
+
+  /* TagsInput navigates tags with real focus rather than an attribute, so :focus/:hover are the active signal, not [data-highlighted]. */
+  :where(.skdx-tags-input__item):is(:focus, :hover) {
+    background-color: var(--skdx-color-surface-selected);
+    border-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-tags-input__item-delete) {
+    position: relative;
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+
+  /* Against surface-selected, text-muted drops to 3.55:1, hence the accent override; fully :where()'d so the delete's own hover colour still wins. */
+  :where(.skdx-tags-input__item:is(:focus, :hover) .skdx-tags-input__item-delete) {
+    color: var(--skdx-color-text-accent);
+  }
+
+  :where(.skdx-tags-input__item-delete):hover {
+    color: var(--skdx-color-text-danger);
+  }
+
+  /* font-size: 0 collapses the label's text node, which no selector can otherwise reach; the editor restores its own font size below. */
+  :where(.skdx-tags-input__item)[data-editing] {
+    font-size: 0;
+  }
+
+  :where(.skdx-tags-input__item)[data-editing] > *:not(.skdx-tags-input__item-input) {
+    display: none;
+  }
+
+  :where(.skdx-tags-input__item-input) {
+    min-inline-size: 4rem;
+    border: 0;
+    background: transparent;
+    color: var(--skdx-color-field-text);
+    font-size: var(--skdx-tags-input-item-font-size, var(--skdx-font-size-xs));
+    outline: none;
+  }
+
+  /* Deliberately not display: none while empty: this button is often the focused element at the moment it empties the list. */
+  :where(.skdx-tags-input__clear) {
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+
+  :where(.skdx-tags-input__clear):hover {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-tags-input__clear)[data-empty] {
+    color: var(--skdx-color-text-disabled);
+    cursor: default;
+  }
+
+  /* Grows to fill the remaining space, so clicking to the right of the last chip still lands in the input. */
+  :where(.skdx-tags-input__input) {
+    flex: 1;
+    min-inline-size: 6rem;
+    border: 0;
+    background: transparent;
+    color: var(--skdx-color-field-text);
+    font-size: var(--skdx-tags-input-font-size, var(--skdx-font-size-sm));
+    outline: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-tags-input) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-tags-input):focus-within {
+      border-color: Highlight;
+      outline-color: Highlight;
+    }
+
+    :where(.skdx-tags-input__item) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-tags-input__item):is(:focus, :hover) {
+      background-color: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+
+    :where(.skdx-tags-input)[data-disabled] {
+      border-color: GrayText;
+    }
+  }
+}