@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,141 @@
+/*
+ * 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';
+
+/* The box is the root, not the indicator: CheckboxIndicator unmounts while unchecked,
+   so painting the box on it would render every unchecked checkbox as nothing. */
+@layer skdx-components {
+  :where(.skdx-checkbox) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    inline-size: var(--skdx-indicator-size-md);
+    block-size: var(--skdx-indicator-size-md);
+    /* base.css opts buttons into the page font but leaves UA default padding alone; with box-sizing: border-box that padding would crush the fixed 20px box. */
+    padding: 0;
+
+    /* No ink until there is a mark to draw — the box takes the mark's colour only once checked. */
+    color: transparent;
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thick) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-inner);
+    cursor: pointer;
+
+    transition:
+      background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-checkbox__indicator) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    font-size: var(--skdx-font-size-xs);
+    color: inherit;
+    pointer-events: none;
+  }
+
+  /* Web Components keeps the indicator mounted and [hidden]; author `display: inline-flex` above beats the shadow host's :host([hidden]) on origin, so it must be restated here. */
+  :where(.skdx-checkbox__indicator)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-checkbox):hover {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where(.skdx-checkbox)[data-state='checked'],
+  :where(.skdx-checkbox)[data-state='indeterminate'] {
+    color: var(--skdx-color-selection-mark);
+    background-color: var(--skdx-color-selection-bg);
+    border-color: var(--skdx-color-selection-bg);
+  }
+
+  /* Ring outside the box, not a fill shift: several themes fail 4.5:1 a step darker, and a border keeps the box from resizing on hover. */
+  :where(.skdx-checkbox)[data-state='checked']:hover:not([data-disabled]),
+  :where(.skdx-checkbox)[data-state='indeterminate']:hover:not([data-disabled]) {
+    box-shadow: 0 0 0 var(--skdx-border-width-thin) var(--skdx-color-border-strong);
+  }
+
+  :where(.skdx-checkbox)[data-disabled] {
+    cursor: not-allowed;
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+    color: var(--skdx-color-text-disabled);
+  }
+
+  :where(.skdx-checkbox)[data-disabled][data-state='checked'],
+  :where(.skdx-checkbox)[data-disabled][data-state='indeterminate'] {
+    background-color: var(--skdx-color-action-disabled-bg);
+    border-color: var(--skdx-color-border-disabled);
+  }
+
+  /* A halo, not a thicker border: the resting rim is already 2px, so width alone can't carry WCAG 1.4.1's non-colour signal. */
+  :where(.skdx-checkbox)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    box-shadow: 0 0 0 var(--skdx-border-width-thin) var(--skdx-color-field-border-invalid);
+  }
+
+  /* Read-only keeps its tab stop and focus ring; deliberately no colour change, only the cursor, so it isn't confused with disabled. */
+  :where(.skdx-checkbox)[data-readonly] {
+    cursor: default;
+  }
+
+  :where(.skdx-checkbox)[data-size='sm'] {
+    inline-size: var(--skdx-indicator-size-sm);
+    block-size: var(--skdx-indicator-size-sm);
+  }
+
+  /* Written out so sm/md/lg is a complete, author-writable ladder — [data-size='md'] selects something, like its siblings. */
+  :where(.skdx-checkbox)[data-size='md'] {
+    inline-size: var(--skdx-indicator-size-md);
+    block-size: var(--skdx-indicator-size-md);
+  }
+
+  :where(.skdx-checkbox)[data-size='lg'] {
+    inline-size: var(--skdx-indicator-size-lg);
+    block-size: var(--skdx-indicator-size-lg);
+  }
+
+  /* Forced colours drops the accent fill, so the mark is repainted in the system's highlight-text colour against the highlight. */
+  @media (forced-colors: active) {
+    :where(.skdx-checkbox) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-checkbox)[data-state='checked'],
+    :where(.skdx-checkbox)[data-state='indeterminate'] {
+      background-color: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+
+    :where(.skdx-checkbox)[data-disabled] {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+
+  /* Rendered by CheckboxGroup items; a lone Checkbox's consumer composes it as the caption of their own <label for>. */
+  :where(.skdx-checkbox__label) {
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-normal);
+    color: var(--skdx-color-text-default);
+  }
+
+  /* Second selector: an unclassed framework host (display: contents) can sit between the checkbox and the label in the DOM tree. */
+  :where(.skdx-checkbox)[data-disabled] + :where(.skdx-checkbox__label),
+  :where(:not([class*='skdx-']):has(> .skdx-checkbox[data-disabled]))
+    + :where(.skdx-checkbox__label) {
+    color: var(--skdx-color-text-disabled);
+  }
+}

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

@@ -0,0 +1,126 @@
+/*
+ * 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';
+
+/**
+ * Clipboard — copy a value, with confirmation. `data-size` resolves on the
+ * root into custom properties both parts read, and the `md` rung has
+ * its own selector so a nested Clipboard can be sized back down the tree.
+ */
+@layer skdx-components {
+  /* The default rung, and the variables both parts below read. */
+  :where(.skdx-clipboard),
+  :where(.skdx-clipboard)[data-size='md'] {
+    --skdx-clipboard-block-size: var(--skdx-control-height-md);
+    --skdx-clipboard-padding-inline: var(--skdx-control-padding-md);
+    --skdx-clipboard-font-size: var(--skdx-font-size-sm);
+    --skdx-clipboard-input-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-clipboard)[data-size='sm'] {
+    --skdx-clipboard-block-size: var(--skdx-control-height-sm);
+    --skdx-clipboard-padding-inline: var(--skdx-control-padding-sm);
+    --skdx-clipboard-font-size: var(--skdx-font-size-xs);
+    --skdx-clipboard-input-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-clipboard)[data-size='lg'] {
+    --skdx-clipboard-block-size: var(--skdx-control-height-lg);
+    --skdx-clipboard-padding-inline: var(--skdx-control-padding-lg);
+    --skdx-clipboard-font-size: var(--skdx-font-size-md);
+    --skdx-clipboard-input-font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-clipboard) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-clipboard__input) {
+    flex: 1;
+    min-inline-size: 0;
+    /* The value is the point of the control, so the box grows to show all of it where the root has room. */
+    field-sizing: content;
+    /* Fall back to the md rung when the part is used outside a `.skdx-clipboard`
+       root, which is what the `--skdx-clipboard-*` properties resolve from. */
+    block-size: var(--skdx-clipboard-block-size, var(--skdx-control-height-md));
+    padding-inline: var(--skdx-clipboard-padding-inline, var(--skdx-control-padding-md));
+
+    color: var(--skdx-color-field-text);
+    background-color: var(--skdx-color-field-bg-readonly);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-md);
+    font-family: var(--skdx-font-family-mono);
+    font-size: var(--skdx-clipboard-input-font-size, var(--skdx-font-size-xs));
+  }
+
+  :where(.skdx-clipboard__trigger) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+    min-block-size: var(--skdx-clipboard-block-size, var(--skdx-control-height-md));
+    padding-inline: var(--skdx-clipboard-padding-inline, var(--skdx-control-padding-md));
+
+    color: var(--skdx-color-text-default);
+    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-clipboard-font-size, var(--skdx-font-size-sm));
+    cursor: pointer;
+  }
+
+  /* Confirmation is a colour *and* a glyph swap the component performs; this
+     only paints the success state. */
+  :where(.skdx-clipboard__trigger)[data-state='copied'] {
+    color: var(--skdx-color-status-success-text);
+    border-color: var(--skdx-color-status-success-border);
+    background-color: var(--skdx-color-status-success-bg);
+  }
+
+  /* The failure the component can report, painted with the danger palette
+     rather than left to the announcement alone. Written by hand rather than by
+     importing `_status.css`: that partial owns the `data-status` severity
+     scale (set as a prop or attribute), and this is a component-emitted
+     `data-state` — the same namespace split that keeps severity apart from
+     component state elsewhere in this system. Importing it would make every `.skdx-*`
+     descendant inherit the severity properties as a side effect of a
+     Clipboard failing to copy. */
+  :where(.skdx-clipboard__trigger)[data-state='error'] {
+    color: var(--skdx-color-status-danger-text);
+    border-color: var(--skdx-color-status-danger-border);
+    background-color: var(--skdx-color-status-danger-bg);
+  }
+
+  /* Holds either a bare icon or a text swap ("Copy" / "Copied!" — see
+     ClipboardIndicator's own doc comment for the icon-vs-text split). A fixed
+     inline-size/block-size fit the icon case and clipped the text case by 9px;
+     min-size keeps the icon's footprint as a floor without capping text. */
+  :where(.skdx-clipboard__indicator) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    min-inline-size: var(--skdx-icon-size-md);
+    min-block-size: var(--skdx-icon-size-md);
+  }
+
+  /* Acknowledging the copy is the entire point of the component, so the
+     confirmation is a colour change as well as a glyph swap. */
+  :where(.skdx-clipboard__trigger)[data-state='copied'] :where(.skdx-clipboard__indicator) {
+    color: var(--skdx-color-text-success);
+  }
+
+  :where(.skdx-clipboard__trigger)[data-state='error'] :where(.skdx-clipboard__indicator) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-clipboard__trigger):hover:not([data-disabled]) {
+    background-color: var(--skdx-color-surface-hover);
+    border-color: var(--skdx-color-border-strong);
+  }
+}

package/dist/skins-src/components/collapsible.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';
+
+/**
+ * Collapsible — a single show/hide region. Not Accordion's primitive: the two
+ * are independent implementations, so a fix here fixes nothing there.
+ */
+@layer skdx-components {
+  :where(.skdx-collapsible) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :where(.skdx-collapsible__trigger) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: 0;
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    cursor: pointer;
+  }
+
+  :where(.skdx-collapsible__trigger):hover:not([data-disabled]) {
+    background-color: color-mix(in srgb, var(--skdx-color-surface-hover) 50%, transparent);
+  }
+
+  :where(.skdx-collapsible__trigger)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-collapsible__content) {
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+
+    /* Unstyled, this inherited the page's 16px body font instead of the
+       library's UI scale — a plain <div> next to a 14px trigger reads like a
+       layout mistake even though nothing is actually broken. Accordion's
+       content (the same shape, one primitive up) uses the same pairing. */
+    padding-block-start: var(--skdx-space-1);
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-relaxed);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-collapsible__indicator) {
+    display: inline-flex;
+    color: var(--skdx-color-text-muted);
+    transition: rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-collapsible__trigger)[data-state='open'] :where(.skdx-collapsible__indicator) {
+    rotate: 180deg;
+  }
+}

package/dist/skins-src/components/color-picker.css

@@ -0,0 +1,304 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_overlay.css';
+
+/* The gradients here are the control's own subject matter, not palette decisions, so this is the one file exempted from the hex/function colour lint rules. Everything else still comes from tokens. */
+@layer skdx-components {
+  :where(.skdx-color-picker) {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+
+    /* data-size resolves here; these three variables make a rung three declarations, not a dozen selectors. */
+    --skdx-color-picker-area-height: 8rem;
+    --skdx-color-picker-track-thickness: var(--skdx-space-3);
+    --skdx-color-picker-swatch-size: var(--skdx-control-height-md);
+  }
+
+  :where(.skdx-color-picker)[data-size='sm'] {
+    --skdx-color-picker-area-height: 6rem;
+    --skdx-color-picker-track-thickness: var(--skdx-space-2);
+    --skdx-color-picker-swatch-size: var(--skdx-control-height-sm);
+  }
+
+  :where(.skdx-color-picker)[data-size='lg'] {
+    --skdx-color-picker-area-height: 12rem;
+    --skdx-color-picker-track-thickness: var(--skdx-space-4);
+    --skdx-color-picker-swatch-size: var(--skdx-control-height-lg);
+  }
+
+  :where(.skdx-color-picker)[data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* The area and hue track are pure gradient with no border/token colour to recolour, so dimming the root is the only thing that reads as "blocked" on them. */
+  :where(.skdx-color-picker)[data-disabled] {
+    opacity: var(--skdx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-color-picker)[data-readonly] {
+    cursor: default;
+  }
+
+  /* --skdx-color-picker-hue is an angle (210deg), not a colour, so it goes through hsl() — assigning it to background-color directly is invalid. */
+  :where(.skdx-color-picker__area) {
+    position: relative;
+    inline-size: 100%;
+    min-block-size: var(--skdx-color-picker-area-height, 8rem);
+    border-radius: var(--skdx-radius-md);
+    background-image:
+      linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
+    background-color: hsl(var(--skdx-color-picker-hue, 0deg) 100% 50%);
+    touch-action: none;
+  }
+
+  :where(.skdx-color-picker__area)[data-disabled] {
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  :where([dir='rtl']) :where(.skdx-color-picker__area) {
+    background-image:
+      linear-gradient(to top, #000, transparent), linear-gradient(to left, #fff, transparent);
+  }
+
+  :where(.skdx-color-picker__area-thumb),
+  :where(.skdx-color-picker__hue-slider-thumb),
+  :where(.skdx-color-picker__alpha-slider-thumb) {
+    position: absolute;
+    inline-size: var(--skdx-indicator-size-md);
+    block-size: var(--skdx-indicator-size-md);
+
+    background: transparent;
+    border: var(--skdx-border-width-thick) solid var(--skdx-color-surface-page);
+    border-radius: var(--skdx-radius-full);
+    box-shadow: var(--skdx-shadow-sm);
+    cursor: grab;
+    /* Centred on the offset, not hanging off it, so the ring sits on the colour it reports. translate is physical; the inline half flips under RTL. */
+    translate: -50% 50%;
+  }
+
+  :where(.skdx-color-picker__area-thumb)[data-disabled],
+  :where(.skdx-color-picker__hue-slider-thumb)[data-disabled],
+  :where(.skdx-color-picker__alpha-slider-thumb)[data-disabled] {
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-color-picker__area-thumb)[data-readonly],
+  :where(.skdx-color-picker__hue-slider-thumb)[data-readonly],
+  :where(.skdx-color-picker__alpha-slider-thumb)[data-readonly] {
+    cursor: default;
+  }
+
+  :where([dir='rtl']) :where(.skdx-color-picker__area-thumb),
+  :where([dir='rtl']) :where(.skdx-color-picker__hue-slider-thumb),
+  :where([dir='rtl']) :where(.skdx-color-picker__alpha-slider-thumb) {
+    translate: 50% 50%;
+  }
+
+  :where(.skdx-color-picker__area-thumb) {
+    inset-inline-start: var(--skdx-color-picker-saturation, 0%);
+    inset-block-end: var(--skdx-color-picker-brightness, 0%);
+  }
+
+  :where(.skdx-color-picker__hue-slider-thumb) {
+    inset-inline-start: var(--skdx-color-picker-hue-position, 0%);
+    inset-block-end: 50%;
+  }
+
+  :where(.skdx-color-picker__alpha-slider-thumb) {
+    inset-inline-start: var(--skdx-color-picker-alpha-position, 0%);
+    inset-block-end: 50%;
+  }
+
+  /* The two role="slider" elements ship with no size of their own; without this, focus lands somewhere invisible. */
+  :where(.skdx-color-picker__area-thumb) > [role='slider'] {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+
+  :where(.skdx-color-picker__hue-slider),
+  :where(.skdx-color-picker__alpha-slider) {
+    position: relative;
+    block-size: var(--skdx-color-picker-track-thickness, var(--skdx-space-3));
+    border-radius: var(--skdx-radius-full);
+    touch-action: none;
+  }
+
+  :where(.skdx-color-picker__hue-slider)[data-disabled],
+  :where(.skdx-color-picker__alpha-slider)[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-color-picker__hue-slider) {
+    background-image: linear-gradient(
+      to right,
+      #f00 0%,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00 100%
+    );
+  }
+
+  :where([dir='rtl']) :where(.skdx-color-picker__hue-slider) {
+    background-image: linear-gradient(
+      to left,
+      #f00 0%,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00 100%
+    );
+  }
+
+  /* A checkerboard behind the fade-out: without it, transparent and white look identical on a light theme. */
+  :where(.skdx-color-picker__alpha-slider) {
+    background-image:
+      linear-gradient(to right, transparent, var(--skdx-color-picker-value, #000)),
+      conic-gradient(
+        var(--skdx-color-border-subtle, #0000) 0deg 90deg,
+        transparent 90deg 180deg,
+        var(--skdx-color-border-subtle, #0000) 180deg 270deg,
+        transparent 270deg
+      );
+    background-size:
+      100% 100%,
+      var(--skdx-space-2) var(--skdx-space-2);
+  }
+
+  :where([dir='rtl']) :where(.skdx-color-picker__alpha-slider) {
+    background-image:
+      linear-gradient(to left, transparent, var(--skdx-color-picker-value, #000)),
+      conic-gradient(
+        var(--skdx-color-border-subtle, #0000) 0deg 90deg,
+        transparent 90deg 180deg,
+        var(--skdx-color-border-subtle, #0000) 180deg 270deg,
+        transparent 270deg
+      );
+  }
+
+  :where(.skdx-color-picker__swatch) {
+    inline-size: var(--skdx-color-picker-swatch-size, var(--skdx-control-height-md));
+    block-size: var(--skdx-color-picker-swatch-size, var(--skdx-control-height-md));
+    background-color: var(--skdx-color-picker-swatch-value, transparent);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-color-picker__swatch)[data-state='checked'] {
+    border-color: var(--skdx-color-border-accent);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-color-picker__swatch)[data-disabled] {
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-color-picker__swatch)[data-readonly] {
+    cursor: default;
+  }
+
+  :where(.skdx-color-picker__swatch-group) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-color-picker__eye-dropper),
+  :where(.skdx-color-picker__format-select) {
+    /* Matches __input's block-size so the row lines up, and clears WCAG 2.2 §2.5.8's 24px target minimum. */
+    min-block-size: var(--skdx-control-height-sm);
+    color: var(--skdx-color-text-default);
+    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-sm);
+    cursor: pointer;
+  }
+
+  /* Drawn as geometric pseudo-elements, like the checkbox tick and radio dot, so it never depends on an icon package being installed. */
+  :where(.skdx-color-picker__eye-dropper) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.skdx-color-picker__eye-dropper)::before {
+    content: '';
+    inline-size: var(--skdx-space-3);
+    block-size: var(--skdx-border-width-thick);
+    background-color: currentColor;
+    border-radius: var(--skdx-radius-full);
+    rotate: -45deg;
+  }
+
+  :where(.skdx-color-picker__eye-dropper)::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: var(--skdx-space-2);
+    block-size: var(--skdx-space-2);
+    background-color: currentColor;
+    border-radius: var(--skdx-radius-full);
+    translate: calc(-50% + var(--skdx-space-2)) calc(-50% - var(--skdx-space-2));
+  }
+
+  :where(.skdx-color-picker__eye-dropper)[data-disabled],
+  :where(.skdx-color-picker__format-select)[data-disabled] {
+    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;
+  }
+
+  :where(.skdx-color-picker__eye-dropper)[data-readonly],
+  :where(.skdx-color-picker__format-select)[data-readonly] {
+    cursor: default;
+  }
+
+  :where(.skdx-color-picker__input) {
+    inline-size: 100%;
+    block-size: var(--skdx-control-height-sm);
+    padding-inline: var(--skdx-space-2);
+
+    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-family: var(--skdx-font-family-mono);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-color-picker__input)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-color-picker__input)[data-readonly] {
+    cursor: default;
+  }
+
+  :where(.skdx-color-picker__eye-dropper):hover:not([data-disabled], [data-readonly]),
+  :where(.skdx-color-picker__format-select):hover:not([data-disabled], [data-readonly]) {
+    background-color: var(--skdx-color-surface-hover);
+    border-color: var(--skdx-color-border-strong);
+  }
+}