@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,79 @@
+/*
+ * 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';
+@import '_collection.css';
+
+/**
+ * Mentions — a textarea whose trigger characters open a suggestion popup over
+ * one token. The field takes Textarea's treatment and the popup takes
+ * Combobox's. Nothing here paints a selected item: inserting a mention is a
+ * text edit, so no item is ever committed.
+ */
+@layer skdx-components {
+  /* Sized from the available width, never from `--skdx-mentions-trigger-width`:
+     the popup is anchored to a zero-width box on the caret, so that measurement
+     is always 0. */
+  :where(.skdx-mentions__content) {
+    max-inline-size: var(--skdx-mentions-available-width, none);
+    padding: var(--skdx-overlay-padding);
+  }
+
+  /* No block-size: the field is multi-line and its height comes from `rows`, or
+     from the inline height `autoResize` measures. */
+  :where(.skdx-mentions__input) {
+    inline-size: 100%;
+    padding-inline: var(--skdx-control-padding-md);
+    padding-block: 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-md);
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-normal);
+
+    /* Vertical only, as in Textarea; `autoResize` overrides it with an inline `resize: none`. */
+    resize: block;
+  }
+
+  :where(.skdx-mentions__input)::placeholder {
+    color: var(--skdx-color-text-placeholder);
+    opacity: 1;
+  }
+
+  :where(.skdx-mentions__input):hover:not(:disabled, [readonly]) {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where(.skdx-mentions__input):focus-visible {
+    border-color: var(--skdx-color-field-border-focus);
+  }
+
+  :where(.skdx-mentions__input)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-mentions__input)[data-readonly] {
+    background-color: var(--skdx-color-field-bg-readonly);
+  }
+
+  /* `:disabled`, not `[data-disabled]` — the part is a real `<textarea>`, so the
+     native pseudo also matches a `disabled` a consumer set on it directly. */
+  :where(.skdx-mentions__input):disabled {
+    color: var(--skdx-color-text-disabled);
+    background-color: var(--skdx-color-field-bg-disabled);
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-mentions__input) {
+      border-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,102 @@
+/*
+ * 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';
+@import '_collection.css';
+@import '_arrow.css';
+
+/**
+ * Menu — an actions menu anchored to a trigger, or summoned by right-click at
+ * the pointer under `openOn="contextmenu"`. Row presentation comes from
+ * _collection.css; this file owns only the menu-specific parts.
+ */
+@layer skdx-components {
+  :where(.skdx-menu__content),
+  :where(.skdx-menu__sub-content) {
+    padding: var(--skdx-overlay-padding);
+  }
+
+  /* Under `openOn="contextmenu"` the trigger is a `role="group"` region rather
+     than a button, so `_actuator.css` gives it no button chrome and the cursor
+     is the only affordance left. Keyed on the role because that is what the
+     contract guarantees the region carries. */
+  :where(.skdx-menu__trigger)[role='group'] {
+    cursor: context-menu;
+  }
+
+  :where(.skdx-menu__trigger)[role='group'][data-disabled] {
+    cursor: default;
+  }
+
+  /* The chevron on a submenu trigger must point *away* from the menu edge, so
+     it is mirrored under RTL along with everything else. */
+  :where(.skdx-menu__sub-trigger)[data-state='open'] {
+    background-color: var(--skdx-color-highlight-bg);
+  }
+
+  :where(.skdx-menu__item-indicator) {
+    margin-inline-start: auto;
+  }
+
+  /* Keyboard hint, pushed to the trailing edge. Muted because it is a reminder,
+     not a label. */
+  :where(.skdx-menu__shortcut) {
+    margin-inline-start: auto;
+    padding-inline-start: var(--skdx-space-4);
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-menu__arrow) {
+      background-color: Canvas;
+      border-color: CanvasText;
+    }
+  }
+
+  /* Row scale: `data-size` on the Content element, defaulting to `md`.
+     The selector lists stay in step with `_collection.css`'s, sub-trigger included. */
+  :where(.skdx-menu__content, .skdx-menu__sub-content)[data-size='sm']
+    :is(
+      .skdx-menu__item,
+      .skdx-menu__checkbox-item,
+      .skdx-menu__radio-item,
+      .skdx-menu__sub-trigger
+    ) {
+    min-block-size: var(--skdx-item-height-sm);
+    padding-block: var(--skdx-space-1);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-menu__content, .skdx-menu__sub-content)[data-size='lg']
+    :is(
+      .skdx-menu__item,
+      .skdx-menu__checkbox-item,
+      .skdx-menu__radio-item,
+      .skdx-menu__sub-trigger
+    ) {
+    min-block-size: var(--skdx-item-height-lg);
+    padding-block: var(--skdx-space-3);
+    font-size: var(--skdx-font-size-md);
+  }
+
+  /* Forced colours drop `_collection.css`'s highlight, so the focused row needs
+     the system `Highlight`/`HighlightText` pair to stay distinguishable. */
+  @media (forced-colors: active) {
+    :where(
+      .skdx-menu__item,
+      .skdx-menu__checkbox-item,
+      .skdx-menu__radio-item,
+      .skdx-menu__sub-trigger
+    ):is(:focus, :hover) {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
+}

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

@@ -0,0 +1,130 @@
+/*
+ * 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';
+@import '_collection.css';
+@import '_arrow.css';
+
+/**
+ * Menubar — a persistent horizontal bar of menus. The bar is flat — it sits in
+ * the page chrome, so no shadow and no radius; its popups are ordinary menus.
+ */
+@layer skdx-components {
+  /* `data-size`/`data-density` resolve on the root. Deliberate asymmetry:
+     an unset `data-size` keeps the `sm` row height, so `md` is a real rung, not the default. */
+  :where(.skdx-menubar) {
+    --skdx-menubar-trigger-height: var(--skdx-item-height-sm);
+    --skdx-menubar-trigger-font-size: var(--skdx-font-size-sm);
+    --skdx-menubar-trigger-padding-inline: var(--skdx-space-2);
+    --skdx-menubar-rhythm: var(--skdx-space-1);
+
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-menubar-rhythm);
+    padding: var(--skdx-menubar-rhythm);
+    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-menubar)[data-size='sm'] {
+    --skdx-menubar-trigger-height: var(--skdx-item-height-sm);
+    --skdx-menubar-trigger-font-size: var(--skdx-font-size-xs);
+    --skdx-menubar-trigger-padding-inline: var(--skdx-space-1);
+  }
+
+  :where(.skdx-menubar)[data-size='md'] {
+    --skdx-menubar-trigger-height: var(--skdx-item-height-md);
+    --skdx-menubar-trigger-font-size: var(--skdx-font-size-sm);
+    --skdx-menubar-trigger-padding-inline: var(--skdx-space-2);
+  }
+
+  :where(.skdx-menubar)[data-size='lg'] {
+    --skdx-menubar-trigger-height: var(--skdx-item-height-lg);
+    --skdx-menubar-trigger-font-size: var(--skdx-font-size-md);
+    --skdx-menubar-trigger-padding-inline: var(--skdx-space-3);
+  }
+
+  :where(.skdx-menubar)[data-density='compact'] {
+    --skdx-menubar-rhythm: 0px;
+  }
+
+  :where(.skdx-menubar)[data-density='comfortable'] {
+    --skdx-menubar-rhythm: var(--skdx-space-2);
+  }
+
+  :where(.skdx-menubar)[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :where(.skdx-menubar__trigger) {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--skdx-menubar-trigger-height, var(--skdx-item-height-sm));
+    padding-inline: var(--skdx-menubar-trigger-padding-inline, var(--skdx-space-2));
+
+    font-size: var(--skdx-menubar-trigger-font-size, var(--skdx-font-size-sm));
+    font-weight: var(--skdx-font-weight-medium);
+    color: var(--skdx-color-text-default);
+
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-menubar__trigger):hover,
+  :where(.skdx-menubar__trigger)[data-state='open'] {
+    background-color: var(--skdx-color-highlight-bg);
+  }
+
+  :where(.skdx-menubar__content),
+  :where(.skdx-menubar__sub-content) {
+    padding: var(--skdx-overlay-padding);
+  }
+
+  /* Keyboard hint, pushed to the trailing edge. Muted because it is a reminder,
+     not a label. Same rule as `menu.css` — the panels are the same
+     menu. */
+  :where(.skdx-menubar__shortcut) {
+    margin-inline-start: auto;
+    padding-inline-start: var(--skdx-space-4);
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-menubar__arrow) {
+      background-color: Canvas;
+      border-color: CanvasText;
+    }
+  }
+
+  /* Forced colours drop every author colour, taking `_collection.css`'s
+     highlight with them, so the focused row stopped being distinguishable in
+     exactly the mode a user turns on because they cannot distinguish things
+     otherwise — the same defect menu.css fixes the same way.
+     `Highlight`/`HighlightText` are the system pair for "the currently selected
+     thing". Stated per family because `_collection.css` is a shared partial.
+     No `[data-highlighted]` here: this family moves *real* DOM focus between
+     items, so `:focus` is the highlight. The attribute belongs to the
+     virtual-focus families (Autocomplete, TreeSelect, Rating), and selecting on
+     it here matched nothing in any of the five packages. */
+  @media (forced-colors: active) {
+    :where(
+      .skdx-menubar__item,
+      .skdx-menubar__checkbox-item,
+      .skdx-menubar__radio-item,
+      .skdx-menubar__sub-trigger
+    ):is(:focus, :hover) {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+/*
+ * 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';
+@import '_collection.css';
+
+/** NavigationMenu — site navigation with optional rich dropdown panels. */
+@layer skdx-components {
+  :where(.skdx-navigation-menu) {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  :where(.skdx-navigation-menu__list) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Vertical orientation. The list stretches each row to fill the column: an item
+     that shrink-wraps its label cannot show a full-width selected state. */
+  :where(.skdx-navigation-menu)[data-orientation='vertical'] {
+    display: block;
+  }
+
+  :where(.skdx-navigation-menu__list)[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :where(.skdx-navigation-menu__list)[data-orientation='vertical']
+    :where(.skdx-navigation-menu__item) {
+    display: block;
+  }
+
+  :where(.skdx-navigation-menu__trigger),
+  :where(.skdx-navigation-menu__link) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    /* A nav item is a collection row, not a form control — it takes the row
+       ladder's large step (40px), which is what both references use for a
+       sidebar/menu entry. */
+    min-block-size: var(--skdx-item-height-lg);
+    padding-inline: var(--skdx-space-3);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  :where(.skdx-navigation-menu__trigger):hover,
+  :where(.skdx-navigation-menu__link):hover,
+  :where(.skdx-navigation-menu__trigger)[data-state='open'] {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  :where(.skdx-navigation-menu__link)[aria-current] {
+    color: var(--skdx-color-text-accent);
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  /* Anchored to the item's `position: relative` below. This family has no popper
+     wiring, so without this the panel sits in flow and reflows the page open/closed. */
+  :where(.skdx-navigation-menu__content) {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    padding: var(--skdx-space-4);
+  }
+
+  /* Below the trigger, a vertical list's items stack directly underneath one
+     another: a panel dropping there covers every later item instead of just
+     reflowing past it. Flown out to the side instead, the way a vertical
+     menu's submenu conventionally opens. */
+  :where(.skdx-navigation-menu)[data-orientation='vertical']
+    :where(.skdx-navigation-menu__content) {
+    inset-block-start: 0;
+    inset-inline-start: 100%;
+  }
+
+  :where(.skdx-navigation-menu__item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  :where(.skdx-navigation-menu__content) :where(.skdx-navigation-menu__link) {
+    white-space: nowrap;
+  }
+
+  /* The bar that slides under the open item, reading the offset/size custom properties
+     the component publishes on the root. Falls back to a zero-width bar at the start
+     edge, so a package that has not measured yet paints nothing. */
+  :where(.skdx-navigation-menu__indicator) {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 100%;
+    inline-size: var(--skdx-navigation-menu-indicator-size, 0);
+    block-size: var(--skdx-border-width-thick);
+    background-color: var(--skdx-color-border-accent);
+    translate: var(--skdx-navigation-menu-indicator-offset, 0) 0;
+    transition:
+      translate var(--skdx-motion-duration-normal) var(--skdx-motion-easing),
+      inline-size var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  /* Nothing is open, so there is nothing to underline. Angular
+     (`navigation-menu-indicator.component.ts:26`) and Web Components
+     (`NavigationMenuIndicator.ts`) keep the bar mounted and `[hidden]`; the
+     `display: flex` above is author CSS and beats the UA's `[hidden]` rule on
+     origin, so the accent bar sat under the last-opened item permanently. */
+  :where(.skdx-navigation-menu__indicator)[hidden] {
+    display: none;
+  }
+
+  /* Vertical menus underline down the column instead of across the row, so the
+     same two published numbers change axis. */
+  :where(.skdx-navigation-menu)[data-orientation='vertical']
+    :where(.skdx-navigation-menu__indicator) {
+    inset-block-start: 0;
+    inline-size: var(--skdx-border-width-thick);
+    block-size: var(--skdx-navigation-menu-indicator-size, 0);
+    translate: 0 var(--skdx-navigation-menu-indicator-offset, 0);
+    transition:
+      translate var(--skdx-motion-duration-normal) var(--skdx-motion-easing),
+      block-size var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+}

package/dist/skins-src/components/notification-center.css

@@ -0,0 +1,139 @@
+/*
+ * 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';
+
+/** NotificationCenter — a list of notifications with read/unread state, timestamps and per-item actions. */
+@layer skdx-components {
+  :where(.skdx-notification-center) {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-notification-center__header) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    padding: var(--skdx-space-3);
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-notification-center__title) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-notification-center__actions) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-1);
+    margin-inline-start: auto;
+  }
+
+  :where(.skdx-notification-center__loading) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+    padding: var(--skdx-space-3);
+  }
+
+  :where(.skdx-notification-center__empty) {
+    padding: var(--skdx-space-6);
+  }
+
+  :where(.skdx-notification-center__list) {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.skdx-notification-center__item) {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: start;
+    gap: var(--skdx-space-3);
+    padding: var(--skdx-space-3);
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-subtle);
+    border-inline-start: var(--skdx-border-width-thick) solid transparent;
+  }
+
+  :where(.skdx-notification-center__item):not([data-read]) {
+    border-inline-start-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-notification-center__item):not([data-read])
+    :where(.skdx-notification-center__item-title) {
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-notification-center__leading) {
+    grid-column: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-notification-center__body) {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+    min-inline-size: 0;
+    text-align: start;
+    background: none;
+    border: 0;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+  }
+
+  :where(button.skdx-notification-center__body) {
+    cursor: pointer;
+  }
+
+  :where(.skdx-notification-center__body):focus-visible {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
+
+  :where(.skdx-notification-center__item-title) {
+    display: block;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-notification-center__description) {
+    display: block;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    color: var(--skdx-color-text-muted);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-notification-center__time) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-notification-center__item-actions) {
+    grid-column: 3;
+    display: flex;
+    align-items: start;
+    gap: var(--skdx-space-1);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-notification-center__item):not([data-read]) {
+      border-inline-start-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import 'text-field.css';
+
+/**
+ * NumberField — numeric entry with stepper buttons. The value is right-aligned
+ * and tabular so a column of amounts lines up on the decimal point. `data-size`
+ * resolves on the root; input height and both stepper boxes read one
+ * property, because a stepper taller than the input breaks the field's outline.
+ */
+@layer skdx-components {
+  :where(.skdx-number-field),
+  :where(.skdx-number-field)[data-size='md'] {
+    --skdx-number-field-block-size: var(--skdx-control-height-md);
+    --skdx-number-field-padding-inline: var(--skdx-control-padding-md);
+    --skdx-number-field-font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-number-field)[data-size='sm'] {
+    --skdx-number-field-block-size: var(--skdx-control-height-sm);
+    --skdx-number-field-padding-inline: var(--skdx-control-padding-sm);
+    --skdx-number-field-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-number-field)[data-size='lg'] {
+    --skdx-number-field-block-size: var(--skdx-control-height-lg);
+    --skdx-number-field-padding-inline: var(--skdx-control-padding-lg);
+    --skdx-number-field-font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-number-field) {
+    display: inline-flex;
+    align-items: stretch;
+
+    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);
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-number-field)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-number-field)[data-disabled] {
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+  }
+
+  :where(.skdx-number-field__input) {
+    inline-size: 100%;
+    block-size: var(--skdx-number-field-block-size, var(--skdx-control-height-md));
+    padding-inline: var(--skdx-number-field-padding-inline, var(--skdx-control-padding-md));
+
+    color: var(--skdx-color-field-text);
+    background: transparent;
+    border: 0;
+    font-size: var(--skdx-number-field-font-size, var(--skdx-font-size-sm));
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+
+  :where(.skdx-number-field__increment),
+  :where(.skdx-number-field__decrement) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--skdx-number-field-block-size, var(--skdx-control-height-md));
+    font-size: var(--skdx-number-field-font-size, var(--skdx-font-size-sm));
+
+    color: var(--skdx-color-text-muted);
+    background-color: var(--skdx-color-surface-default);
+    border: 0;
+    border-inline-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    cursor: pointer;
+  }
+
+  :where(.skdx-number-field__increment):hover,
+  :where(.skdx-number-field__decrement):hover {
+    background-color: var(--skdx-color-surface-hover);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-number-field__increment)[data-disabled],
+  :where(.skdx-number-field__decrement)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+}