@skdx/docs-kit 0.35.0

package/dist/shared/index.d.ts

@@ -0,0 +1,113 @@
+export type { ComponentContract, ComponentState, PropContract, EventContract, PartContract, KeyboardInteraction, AccessibilityContract, StylingHooksContract, DataAttributeContract, DataAttr, CssVar, FrameworkKey, ExceptionCategory, FrameworkScopedContract, AppearanceAxisContract, PublicMethodContract, } from './contracts/types.js';
+export { CONTRACTS } from './contracts/index.js';
+export { memberId, contractMemberIds, ROOT_PART, type MemberKind } from './contracts/member-id.js';
+export { CHANGE_REASONS, changeDescription, changeDetail, type ChangeReason, } from './contracts/change-reason.js';
+export { AS_PROP_DESCRIPTION, POLYMORPHIC_TAGS, type PolymorphicTag, } from './contracts/polymorphic.js';
+export { VIRTUAL_FOCUS_RULE } from './contracts/rules.js';
+export { DATE_CHANGE_VALUE_TYPE, DATE_INPUT_RULE, DATE_MALFORMED_RULE, DATE_OUTPUT_RULE, DATE_PARSE_RULE, } from './contracts/date-value.js';
+export { SELECTION_ATTRIBUTE_RULE, SELECTION_INPUT_RULE, SELECTION_OUTPUT_RULE, } from './contracts/selection-value.js';
+export { nextSelection, parseSelectionAttribute, sameSelection, selectedValueOf, toSelectionValues, toValues, type SelectionChangeDetail, type SelectionValueOptions, } from './core/selection.js';
+export { caretAnchor, DEFAULT_MENTION_TRIGGER, findMentionToken, insertMention, isMentionDismissed, type AnchorRect, type CaretRect, type MeasureCaretRect, type MentionInsertion, type MentionToken, type MentionTokenOptions, type VirtualAnchor, } from './core/mentions.js';
+export { buttonContract } from './contracts/button.js';
+export { checkboxContract } from './contracts/checkbox.js';
+export { checkboxGroupContract } from './contracts/checkbox-group.js';
+export { switchContract } from './contracts/switch.js';
+export { alertContract } from './contracts/alert.js';
+export { badgeContract } from './contracts/badge.js';
+export { textContract } from './contracts/text.js';
+export { headingContract } from './contracts/heading.js';
+export { timeContract } from './contracts/time.js';
+export { tabsContract } from './contracts/tabs.js';
+export { textFieldContract } from './contracts/text-field.js';
+export { listboxContract } from './contracts/listbox.js';
+export { selectContract } from './contracts/select.js';
+export { dialogContract } from './contracts/dialog.js';
+export { drawerContract } from './contracts/drawer.js';
+export { labelContract } from './contracts/label.js';
+export { dividerContract } from './contracts/divider.js';
+export { boxContract } from './contracts/box.js';
+export { listContract } from './contracts/list.js';
+export { linkContract } from './contracts/link.js';
+export { imageContract } from './contracts/image.js';
+export { kbdContract } from './contracts/kbd.js';
+export { skeletonContract } from './contracts/skeleton.js';
+export { spinnerContract } from './contracts/spinner.js';
+export { avatarContract } from './contracts/avatar.js';
+export { progressContract } from './contracts/progress.js';
+export { cardContract } from './contracts/card.js';
+export { dashboardLayoutContract } from './contracts/dashboard-layout.js';
+export { pageContainerContract } from './contracts/page-container.js';
+export { signInPageContract } from './contracts/sign-in-page.js';
+export { emptyStateContract } from './contracts/empty-state.js';
+export { statCardContract } from './contracts/stat-card.js';
+export { chatComposerContract } from './contracts/chat-composer.js';
+export { chatMessageContract } from './contracts/chat-message.js';
+export { commentContract } from './contracts/comment.js';
+export { commentThreadContract } from './contracts/comment-thread.js';
+export { confirmDialogContract } from './contracts/confirm-dialog.js';
+export { conversationListContract } from './contracts/conversation-list.js';
+export { filterBarContract } from './contracts/filter-bar.js';
+export { formSectionContract } from './contracts/form-section.js';
+export { notificationCenterContract } from './contracts/notification-center.js';
+export { onboardingChecklistContract } from './contracts/onboarding-checklist.js';
+export { usageCardContract } from './contracts/usage-card.js';
+export { userMenuContract } from './contracts/user-menu.js';
+export { workspaceSwitcherContract } from './contracts/workspace-switcher.js';
+export { signUpPageContract } from './contracts/sign-up-page.js';
+export { forgotPasswordPageContract } from './contracts/forgot-password-page.js';
+export { resetPasswordPageContract } from './contracts/reset-password-page.js';
+export { verificationPageContract } from './contracts/verification-page.js';
+export { splitButtonContract } from './contracts/split-button.js';
+export { aspectRatioContract } from './contracts/aspect-ratio.js';
+export { toggleContract } from './contracts/toggle.js';
+export { toggleGroupContract } from './contracts/toggle-group.js';
+export { radioGroupContract } from './contracts/radio-group.js';
+export { textareaContract } from './contracts/textarea.js';
+export { numberFieldContract } from './contracts/number-field.js';
+export { dateFieldContract } from './contracts/date-field.js';
+export { timeFieldContract } from './contracts/time-field.js';
+export { formContract } from './contracts/form.js';
+export { fieldContract } from './contracts/field.js';
+export { ratingContract } from './contracts/rating.js';
+export { pinInputContract } from './contracts/pin-input.js';
+export { tagsInputContract } from './contracts/tags-input.js';
+export { tagGroupContract } from './contracts/tag-group.js';
+export { fileUploadContract } from './contracts/file-upload.js';
+export { sliderContract } from './contracts/slider.js';
+export { collapsibleContract } from './contracts/collapsible.js';
+export { accordionContract } from './contracts/accordion.js';
+export { navigationMenuContract } from './contracts/navigation-menu.js';
+export { paginationContract } from './contracts/pagination.js';
+export { toolbarContract } from './contracts/toolbar.js';
+export { breadcrumbContract } from './contracts/breadcrumb.js';
+export { tableContract } from './contracts/table.js';
+export { timelineContract } from './contracts/timeline.js';
+export { stepperContract } from './contracts/stepper.js';
+export { calendarContract } from './contracts/calendar.js';
+export { treeContract } from './contracts/tree.js';
+export { popoverContract } from './contracts/popover.js';
+export { menuContract } from './contracts/menu.js';
+export { menubarContract } from './contracts/menubar.js';
+export { toastContract } from './contracts/toast.js';
+export { comboboxContract } from './contracts/combobox.js';
+export { commandContract } from './contracts/command.js';
+export { datePickerContract } from './contracts/date-picker.js';
+export { scrollAreaContract } from './contracts/scroll-area.js';
+export { resizableContract } from './contracts/resizable.js';
+export { carouselContract } from './contracts/carousel.js';
+export { angleSliderContract } from './contracts/angle-slider.js';
+export { autocompleteContract } from './contracts/autocomplete.js';
+export { checkboxCardContract } from './contracts/checkbox-card.js';
+export { clipboardContract } from './contracts/clipboard.js';
+export { colorPickerContract } from './contracts/color-picker.js';
+export { editableContract } from './contracts/editable.js';
+export { loadingOverlayContract } from './contracts/loading-overlay.js';
+export { passwordInputContract } from './contracts/password-input.js';
+export { qrCodeContract } from './contracts/qr-code.js';
+export { radioCardContract } from './contracts/radio-card.js';
+export { floatingPanelContract } from './contracts/floating-panel.js';
+export { speedDialContract } from './contracts/speed-dial.js';
+export { tourContract } from './contracts/tour.js';
+export { transferContract } from './contracts/transfer.js';
+export { treeSelectContract } from './contracts/tree-select.js';
+export { mentionsContract } from './contracts/mentions.js';

package/dist/shared/index.js

@@ -0,0 +1 @@
+import{CONTRACTS as r}from"./contracts/index.js";import{memberId as a,contractMemberIds as n,ROOT_PART as c}from"./contracts/member-id.js";import{CHANGE_REASONS as m,changeDescription as C,changeDetail as f}from"./contracts/change-reason.js";import{AS_PROP_DESCRIPTION as i,POLYMORPHIC_TAGS as s}from"./contracts/polymorphic.js";import{VIRTUAL_FOCUS_RULE as d}from"./contracts/rules.js";import{DATE_CHANGE_VALUE_TYPE as E,DATE_INPUT_RULE as T,DATE_MALFORMED_RULE as b,DATE_OUTPUT_RULE as u,DATE_PARSE_RULE as A}from"./contracts/date-value.js";import{SELECTION_ATTRIBUTE_RULE as R,SELECTION_INPUT_RULE as _,SELECTION_OUTPUT_RULE as S}from"./contracts/selection-value.js";import{nextSelection as U,parseSelectionAttribute as h,sameSelection as I,selectedValueOf as O,toSelectionValues as L,toValues as M}from"./core/selection.js";import{caretAnchor as D,DEFAULT_MENTION_TRIGGER as N,findMentionToken as w,insertMention as F,isMentionDismissed as G}from"./core/mentions.js";import{buttonContract as V}from"./contracts/button.js";import{checkboxContract as B}from"./contracts/checkbox.js";import{checkboxGroupContract as Y}from"./contracts/checkbox-group.js";import{switchContract as z}from"./contracts/switch.js";import{alertContract as J}from"./contracts/alert.js";import{badgeContract as W}from"./contracts/badge.js";import{textContract as Z}from"./contracts/text.js";import{headingContract as tt}from"./contracts/heading.js";import{timeContract as rt}from"./contracts/time.js";import{tabsContract as at}from"./contracts/tabs.js";import{textFieldContract as ct}from"./contracts/text-field.js";import{listboxContract as mt}from"./contracts/listbox.js";import{selectContract as ft}from"./contracts/select.js";import{dialogContract as it}from"./contracts/dialog.js";import{drawerContract as lt}from"./contracts/drawer.js";import{labelContract as gt}from"./contracts/label.js";import{dividerContract as Tt}from"./contracts/divider.js";import{boxContract as ut}from"./contracts/box.js";import{listContract as Pt}from"./contracts/list.js";import{linkContract as _t}from"./contracts/link.js";import{imageContract as yt}from"./contracts/image.js";import{kbdContract as ht}from"./contracts/kbd.js";import{skeletonContract as Ot}from"./contracts/skeleton.js";import{spinnerContract as Mt}from"./contracts/spinner.js";import{avatarContract as Dt}from"./contracts/avatar.js";import{progressContract as wt}from"./contracts/progress.js";import{cardContract as Gt}from"./contracts/card.js";import{dashboardLayoutContract as Vt}from"./contracts/dashboard-layout.js";import{pageContainerContract as Bt}from"./contracts/page-container.js";import{signInPageContract as Yt}from"./contracts/sign-in-page.js";import{emptyStateContract as zt}from"./contracts/empty-state.js";import{statCardContract as Jt}from"./contracts/stat-card.js";import{chatComposerContract as Wt}from"./contracts/chat-composer.js";import{chatMessageContract as Zt}from"./contracts/chat-message.js";import{commentContract as to}from"./contracts/comment.js";import{commentThreadContract as ro}from"./contracts/comment-thread.js";import{confirmDialogContract as ao}from"./contracts/confirm-dialog.js";import{conversationListContract as co}from"./contracts/conversation-list.js";import{filterBarContract as mo}from"./contracts/filter-bar.js";import{formSectionContract as fo}from"./contracts/form-section.js";import{notificationCenterContract as io}from"./contracts/notification-center.js";import{onboardingChecklistContract as lo}from"./contracts/onboarding-checklist.js";import{usageCardContract as Eo}from"./contracts/usage-card.js";import{userMenuContract as bo}from"./contracts/user-menu.js";import{workspaceSwitcherContract as Ao}from"./contracts/workspace-switcher.js";import{signUpPageContract as Ro}from"./contracts/sign-up-page.js";import{forgotPasswordPageContract as So}from"./contracts/forgot-password-page.js";import{resetPasswordPageContract as Uo}from"./contracts/reset-password-page.js";import{verificationPageContract as Io}from"./contracts/verification-page.js";import{splitButtonContract as Lo}from"./contracts/split-button.js";import{aspectRatioContract as ko}from"./contracts/aspect-ratio.js";import{toggleContract as No}from"./contracts/toggle.js";import{toggleGroupContract as Fo}from"./contracts/toggle-group.js";import{radioGroupContract as vo}from"./contracts/radio-group.js";import{textareaContract as Ho}from"./contracts/textarea.js";import{numberFieldContract as Ko}from"./contracts/number-field.js";import{dateFieldContract as qo}from"./contracts/date-field.js";import{timeFieldContract as jo}from"./contracts/time-field.js";import{formContract as Qo}from"./contracts/form.js";import{fieldContract as Xo}from"./contracts/field.js";import{ratingContract as $o}from"./contracts/rating.js";import{pinInputContract as or}from"./contracts/pin-input.js";import{tagsInputContract as er}from"./contracts/tags-input.js";import{tagGroupContract as nr}from"./contracts/tag-group.js";import{fileUploadContract as pr}from"./contracts/file-upload.js";import{sliderContract as Cr}from"./contracts/slider.js";import{collapsibleContract as xr}from"./contracts/collapsible.js";import{accordionContract as sr}from"./contracts/accordion.js";import{navigationMenuContract as dr}from"./contracts/navigation-menu.js";import{paginationContract as Er}from"./contracts/pagination.js";import{toolbarContract as br}from"./contracts/toolbar.js";import{breadcrumbContract as Ar}from"./contracts/breadcrumb.js";import{tableContract as Rr}from"./contracts/table.js";import{timelineContract as Sr}from"./contracts/timeline.js";import{stepperContract as Ur}from"./contracts/stepper.js";import{calendarContract as Ir}from"./contracts/calendar.js";import{treeContract as Lr}from"./contracts/tree.js";import{popoverContract as kr}from"./contracts/popover.js";import{menuContract as Nr}from"./contracts/menu.js";import{menubarContract as Fr}from"./contracts/menubar.js";import{toastContract as vr}from"./contracts/toast.js";import{comboboxContract as Hr}from"./contracts/combobox.js";import{commandContract as Kr}from"./contracts/command.js";import{datePickerContract as qr}from"./contracts/date-picker.js";import{scrollAreaContract as jr}from"./contracts/scroll-area.js";import{resizableContract as Qr}from"./contracts/resizable.js";import{carouselContract as Xr}from"./contracts/carousel.js";import{angleSliderContract as $r}from"./contracts/angle-slider.js";import{autocompleteContract as oe}from"./contracts/autocomplete.js";import{checkboxCardContract as ee}from"./contracts/checkbox-card.js";import{clipboardContract as ne}from"./contracts/clipboard.js";import{colorPickerContract as pe}from"./contracts/color-picker.js";import{editableContract as Ce}from"./contracts/editable.js";import{loadingOverlayContract as xe}from"./contracts/loading-overlay.js";import{passwordInputContract as se}from"./contracts/password-input.js";import{qrCodeContract as de}from"./contracts/qr-code.js";import{radioCardContract as Ee}from"./contracts/radio-card.js";import{floatingPanelContract as be}from"./contracts/floating-panel.js";import{speedDialContract as Ae}from"./contracts/speed-dial.js";import{tourContract as Re}from"./contracts/tour.js";import{transferContract as Se}from"./contracts/transfer.js";import{treeSelectContract as Ue}from"./contracts/tree-select.js";import{mentionsContract as Ie}from"./contracts/mentions.js";export{i as AS_PROP_DESCRIPTION,m as CHANGE_REASONS,r as CONTRACTS,E as DATE_CHANGE_VALUE_TYPE,T as DATE_INPUT_RULE,b as DATE_MALFORMED_RULE,u as DATE_OUTPUT_RULE,A as DATE_PARSE_RULE,N as DEFAULT_MENTION_TRIGGER,s as POLYMORPHIC_TAGS,c as ROOT_PART,R as SELECTION_ATTRIBUTE_RULE,_ as SELECTION_INPUT_RULE,S as SELECTION_OUTPUT_RULE,d as VIRTUAL_FOCUS_RULE,sr as accordionContract,J as alertContract,$r as angleSliderContract,ko as aspectRatioContract,oe as autocompleteContract,Dt as avatarContract,W as badgeContract,ut as boxContract,Ar as breadcrumbContract,V as buttonContract,Ir as calendarContract,Gt as cardContract,D as caretAnchor,Xr as carouselContract,C as changeDescription,f as changeDetail,Wt as chatComposerContract,Zt as chatMessageContract,ee as checkboxCardContract,B as checkboxContract,Y as checkboxGroupContract,ne as clipboardContract,xr as collapsibleContract,pe as colorPickerContract,Hr as comboboxContract,Kr as commandContract,to as commentContract,ro as commentThreadContract,ao as confirmDialogContract,n as contractMemberIds,co as conversationListContract,Vt as dashboardLayoutContract,qo as dateFieldContract,qr as datePickerContract,it as dialogContract,Tt as dividerContract,lt as drawerContract,Ce as editableContract,zt as emptyStateContract,Xo as fieldContract,pr as fileUploadContract,mo as filterBarContract,w as findMentionToken,be as floatingPanelContract,So as forgotPasswordPageContract,Qo as formContract,fo as formSectionContract,tt as headingContract,yt as imageContract,F as insertMention,G as isMentionDismissed,ht as kbdContract,gt as labelContract,_t as linkContract,Pt as listContract,mt as listboxContract,xe as loadingOverlayContract,a as memberId,Ie as mentionsContract,Nr as menuContract,Fr as menubarContract,dr as navigationMenuContract,U as nextSelection,io as notificationCenterContract,Ko as numberFieldContract,lo as onboardingChecklistContract,Bt as pageContainerContract,Er as paginationContract,h as parseSelectionAttribute,se as passwordInputContract,or as pinInputContract,kr as popoverContract,wt as progressContract,de as qrCodeContract,Ee as radioCardContract,vo as radioGroupContract,$o as ratingContract,Uo as resetPasswordPageContract,Qr as resizableContract,I as sameSelection,jr as scrollAreaContract,ft as selectContract,O as selectedValueOf,Yt as signInPageContract,Ro as signUpPageContract,Ot as skeletonContract,Cr as sliderContract,Ae as speedDialContract,Mt as spinnerContract,Lo as splitButtonContract,Jt as statCardContract,Ur as stepperContract,z as switchContract,Rr as tableContract,at as tabsContract,nr as tagGroupContract,er as tagsInputContract,Z as textContract,ct as textFieldContract,Ho as textareaContract,rt as timeContract,jo as timeFieldContract,Sr as timelineContract,L as toSelectionValues,M as toValues,vr as toastContract,No as toggleContract,Fo as toggleGroupContract,br as toolbarContract,Re as tourContract,Se as transferContract,Lr as treeContract,Ue as treeSelectContract,Eo as usageCardContract,bo as userMenuContract,Io as verificationPageContract,Ao as workspaceSwitcherContract};

package/dist/skins-src/_foundation-fallback.css

@@ -0,0 +1,124 @@
+/**
+ * GENERATED FILE — DO NOT EDIT.
+ *
+ * Rendered from @skdx/tokens by `scripts/generate-fallback.mjs`. To change a
+ * value, edit `packages/core/tokens/src/utils/foundation.ts` and re-run
+ * `pnpm --filter @skdx/skins run generate` (the package's `build` does it
+ * for you).
+ *
+ * Standalone fallbacks, so `@skdx/skins` renders a usable interface with no
+ * `@skdx/tokens` on the page. In `skdx-reset` — the first layer — so the real
+ * tokens, which are unlayered, win outright the moment they are present.
+ *
+ * Colour is deliberately absent here: it lives in base.css, mapped to the CSS
+ * system colours, because the foundation has no palette to mirror.
+ */
+@layer skdx-reset, skdx-base, skdx-components, skdx-utilities;
+
+@layer skdx-reset {
+  :root {
+    --skdx-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    --skdx-font-family-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
+    --skdx-font-size-xs: 0.75rem;
+    --skdx-font-size-sm: 0.875rem;
+    --skdx-font-size-md: 1rem;
+    --skdx-font-size-lg: 1.125rem;
+    --skdx-font-size-xl: 1.25rem;
+    --skdx-font-size-2xl: 1.5rem;
+    --skdx-font-size-3xl: 1.875rem;
+    --skdx-font-weight-regular: 400;
+    --skdx-font-weight-medium: 500;
+    --skdx-font-weight-semibold: 600;
+    --skdx-font-weight-bold: 700;
+    --skdx-font-line-height-tight: 1.25;
+    --skdx-font-line-height-snug: 1.43;
+    --skdx-font-line-height-normal: 1.5;
+    --skdx-font-line-height-relaxed: 1.75;
+    --skdx-font-letter-spacing-tight: -0.015em;
+    --skdx-font-letter-spacing-normal: 0em;
+    --skdx-font-letter-spacing-wide: 0.025em;
+    --skdx-font-letter-spacing-wider: 0.05em;
+    --skdx-space-1: 0.25rem;
+    --skdx-space-2: 0.5rem;
+    --skdx-space-3: 0.75rem;
+    --skdx-space-4: 1rem;
+    --skdx-space-5: 1.25rem;
+    --skdx-space-6: 1.5rem;
+    --skdx-space-8: 2rem;
+    --skdx-space-10: 2.5rem;
+    --skdx-space-12: 3rem;
+    --skdx-space-16: 4rem;
+    --skdx-radius-sm: 0.25rem;
+    --skdx-radius-inner: 0.375rem;
+    --skdx-radius-md: 0.5rem;
+    --skdx-radius-lg: 0.75rem;
+    --skdx-radius-xl: 1rem;
+    --skdx-radius-full: 9999px;
+    --skdx-motion-duration-instant: 0ms;
+    --skdx-motion-duration-fast: 100ms;
+    --skdx-motion-duration-normal: 200ms;
+    --skdx-motion-duration-slow: 300ms;
+    --skdx-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+    --skdx-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+    --skdx-motion-easing-steady: cubic-bezier(0.4, 0, 0.2, 1);
+    --skdx-motion-easing-linear: linear;
+    --skdx-motion-stagger-tight: 4ms;
+    --skdx-motion-stagger-loose: 40ms;
+    --skdx-z-index-base: 0;
+    --skdx-z-index-dropdown: 10;
+    --skdx-z-index-sticky: 20;
+    --skdx-z-index-overlay: 30;
+    --skdx-z-index-modal: 35;
+    --skdx-z-index-popover: 40;
+    --skdx-z-index-toast: 50;
+    --skdx-z-index-max: 9999;
+    --skdx-focus-ring-width: 2px;
+    --skdx-focus-ring-offset: 2px;
+    --skdx-focus-ring-offset-inset: calc(-1 * var(--skdx-focus-ring-width));
+    --skdx-border-width-thin: 1px;
+    --skdx-border-width-thick: 2px;
+    --skdx-border-width-thicker: 4px;
+    --skdx-opacity-disabled: 0.5;
+    --skdx-opacity-scrim: 0.6;
+    --skdx-control-height-sm: 1.875rem;
+    --skdx-control-height-md: 2.25rem;
+    --skdx-control-height-lg: 2.625rem;
+    --skdx-control-height-compact: 2rem;
+    --skdx-control-padding-sm: 0.625rem;
+    --skdx-control-padding-md: var(--skdx-space-3);
+    --skdx-control-padding-lg: var(--skdx-space-4);
+    --skdx-control-gap-sm: var(--skdx-space-1);
+    --skdx-control-gap-md: var(--skdx-space-2);
+    --skdx-control-gap-lg: var(--skdx-space-2);
+    --skdx-icon-size-sm: 1rem;
+    --skdx-icon-size-md: 1.25rem;
+    --skdx-icon-size-lg: 1.5rem;
+    --skdx-indicator-size-sm: 1rem;
+    --skdx-indicator-size-md: 1.25rem;
+    --skdx-indicator-size-lg: 1.5rem;
+    --skdx-item-height-sm: 1.75rem;
+    --skdx-item-height-md: 2.25rem;
+    --skdx-item-height-lg: 2.5rem;
+    --skdx-item-gap: 2px;
+    --skdx-overlay-padding: var(--skdx-space-1);
+    --skdx-overlay-radius: var(--skdx-radius-lg);
+    --skdx-overlay-min-width: 7.5rem;
+    --skdx-field-gap: var(--skdx-space-1);
+    --skdx-field-label-gap: var(--skdx-space-1);
+    --skdx-target-min: 24px;
+  }
+
+  /** Larger targets for touch; `pointer: coarse` rather than viewport width, since a tablet is still a finger. */
+  @media (pointer: coarse) {
+    :root {
+      --skdx-control-height-sm: 2.25rem;
+      --skdx-control-height-md: 2.75rem;
+      --skdx-control-height-lg: 3rem;
+      --skdx-control-height-compact: 2.75rem;
+      --skdx-item-height-sm: 2.25rem;
+      --skdx-item-height-md: 2.75rem;
+      --skdx-item-height-lg: 3rem;
+      --skdx-target-min: 44px;
+    }
+  }
+}

package/dist/skins-src/base.css

@@ -0,0 +1,328 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/* Declared first and once: layer order must be fixed before any rule lands in one. */
+@layer skdx-reset, skdx-base, skdx-components, skdx-utilities;
+
+/* A `@layer` statement may precede `@import`; a rule may not — hence the order above. */
+@import './_foundation-fallback.css';
+
+@layer skdx-reset {
+  /* Bare `var(--skdx-color-…)` refs, no inline fallback: an inline default would hide a missing token instead of surfacing it. */
+  :root {
+    /* System colours have no alpha, so shadows fall back to `none`. */
+    --skdx-shadow-sm: none;
+    --skdx-shadow-md: none;
+    --skdx-shadow-lg: none;
+    --skdx-shadow-overlay: none;
+
+    --skdx-color-surface-page: Canvas;
+    --skdx-color-surface-raised: Canvas;
+    --skdx-color-surface-default: ButtonFace;
+    --skdx-color-surface-sunken: ButtonFace;
+    --skdx-color-surface-hover: color-mix(in srgb, CanvasText 8%, Canvas);
+    --skdx-color-surface-pressed: color-mix(in srgb, CanvasText 16%, Canvas);
+    --skdx-color-surface-selected: Highlight;
+    --skdx-color-surface-disabled: ButtonFace;
+    --skdx-color-surface-inverse: CanvasText;
+    --skdx-color-text-on-inverse: Canvas;
+
+    --skdx-color-text-default: CanvasText;
+    --skdx-color-text-muted: GrayText;
+    --skdx-color-text-disabled: GrayText;
+    --skdx-color-text-placeholder: GrayText;
+    --skdx-color-text-on-accent: AccentColorText;
+    --skdx-color-text-accent: LinkText;
+    --skdx-color-text-danger: CanvasText;
+    --skdx-color-text-success: CanvasText;
+    --skdx-color-text-warning: CanvasText;
+    --skdx-color-text-info: CanvasText;
+
+    /* ButtonBorder and CanvasText both resolve to rgb(0, 0, 0) headless in Chromium/Gecko, so border-default/subtle are mixed instead of named to stay distinct. */
+    --skdx-color-border-default: color-mix(in srgb, CanvasText 45%, Canvas);
+    --skdx-color-border-strong: CanvasText;
+    --skdx-color-border-subtle: color-mix(in srgb, CanvasText 25%, Canvas);
+    --skdx-color-border-accent: AccentColor;
+    --skdx-color-border-disabled: GrayText;
+    /* Mixed to 70% so the four states stay ordered: subtle 25% < default 45% < status 70% < strong 100%. */
+    --skdx-color-border-danger: color-mix(in srgb, CanvasText 70%, Canvas);
+    --skdx-color-border-success: color-mix(in srgb, CanvasText 70%, Canvas);
+    --skdx-color-border-warning: color-mix(in srgb, CanvasText 70%, Canvas);
+
+    --skdx-color-action-primary-bg: AccentColor;
+    --skdx-color-action-primary-bg-hover: AccentColor;
+    --skdx-color-action-primary-text: AccentColorText;
+    --skdx-color-action-primary-border: AccentColor;
+    --skdx-color-action-primary-border-hover: CanvasText;
+    --skdx-color-action-secondary-bg: ButtonFace;
+    --skdx-color-action-secondary-bg-hover: ButtonFace;
+    --skdx-color-action-secondary-bg-pressed: ButtonFace;
+    --skdx-color-action-secondary-text: ButtonText;
+    --skdx-color-action-secondary-border: ButtonBorder;
+    --skdx-color-action-outline-text: ButtonText;
+    --skdx-color-action-outline-border: ButtonBorder;
+    --skdx-color-action-outline-bg-hover: ButtonFace;
+    --skdx-color-action-outline-bg-pressed: ButtonFace;
+    --skdx-color-action-ghost-text: ButtonText;
+    --skdx-color-action-ghost-bg-hover: ButtonFace;
+    --skdx-color-action-ghost-bg-pressed: ButtonFace;
+    --skdx-color-action-danger-bg: ButtonFace;
+    --skdx-color-action-danger-bg-hover: ButtonFace;
+    --skdx-color-action-danger-bg-pressed: ButtonFace;
+    --skdx-color-action-danger-text: ButtonText;
+    --skdx-color-action-danger-border: CanvasText;
+    --skdx-color-action-disabled-bg: ButtonFace;
+    --skdx-color-action-disabled-text: GrayText;
+    --skdx-color-action-disabled-border: GrayText;
+
+    --skdx-color-field-bg: Field;
+    /* A field hovering from `Field` to `Field` would not read as a hover. */
+    --skdx-color-field-bg-hover: ButtonFace;
+    --skdx-color-field-bg-disabled: ButtonFace;
+    --skdx-color-field-bg-readonly: ButtonFace;
+    --skdx-color-field-text: FieldText;
+    --skdx-color-field-border: ButtonBorder;
+    --skdx-color-field-border-hover: AccentColor;
+    --skdx-color-field-border-focus: Highlight;
+    --skdx-color-field-border-invalid: CanvasText;
+
+    --skdx-color-selection-bg: AccentColor;
+    --skdx-color-selection-mark: AccentColorText;
+    --skdx-color-highlight-bg: Highlight;
+    --skdx-color-highlight-text: HighlightText;
+
+    --skdx-color-status-info-bg: Canvas;
+    --skdx-color-status-info-border: ButtonBorder;
+    --skdx-color-status-info-text: CanvasText;
+    --skdx-color-status-info-icon: CanvasText;
+    --skdx-color-status-success-bg: Canvas;
+    --skdx-color-status-success-border: ButtonBorder;
+    --skdx-color-status-success-text: CanvasText;
+    --skdx-color-status-success-icon: CanvasText;
+    --skdx-color-status-warning-bg: Canvas;
+    --skdx-color-status-warning-border: ButtonBorder;
+    --skdx-color-status-warning-text: CanvasText;
+    --skdx-color-status-warning-icon: CanvasText;
+    --skdx-color-status-danger-bg: Canvas;
+    --skdx-color-status-danger-border: ButtonBorder;
+    --skdx-color-status-danger-text: CanvasText;
+    --skdx-color-status-danger-icon: CanvasText;
+    --skdx-color-status-neutral-bg: ButtonFace;
+    --skdx-color-status-neutral-border: ButtonBorder;
+    --skdx-color-status-neutral-text: ButtonText;
+    --skdx-color-status-neutral-icon: GrayText;
+
+    /* CanvasText, not Highlight/AccentColor: both can fail WCAG 2.2 §1.4.11's 3:1 contrast requirement against Canvas. */
+    --skdx-color-focus-ring: CanvasText;
+    --skdx-color-separator: ButtonBorder;
+    --skdx-color-track: ButtonFace;
+    --skdx-color-track-fill: AccentColor;
+    --skdx-color-skeleton: ButtonFace;
+    --skdx-color-neutral-50: Canvas;
+    --skdx-color-neutral-950: CanvasText;
+
+    /* Explicitly transparent, not omitted: no system colour carries alpha. */
+    --skdx-color-surface-overlay: transparent;
+  }
+
+  /* Zeroes only skdx- classed elements' UA margins, so a host app's own headings keep their document rhythm. */
+  :where([class*='skdx-']):is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    figure,
+    blockquote,
+    dl,
+    dd,
+    ol,
+    ul,
+    menu,
+    fieldset
+  ) {
+    margin: 0;
+  }
+
+  :where([class*='skdx-']):is(ol, ul, menu) {
+    padding-inline-start: 0;
+    list-style: none;
+  }
+}
+
+@layer skdx-reset {
+  /* Scoped to skdx- elements only — never `*` or bare selectors — so a host app's own styling stays untouched. */
+  :where([class^='skdx-'], [class*=' skdx-']),
+  :where([class^='skdx-'], [class*=' skdx-'])::before,
+  :where([class^='skdx-'], [class*=' skdx-'])::after {
+    box-sizing: border-box;
+  }
+
+  /** Controls do not inherit the page font by default in any browser. */
+  :where(button, input, select, textarea)[class*='skdx-'] {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+  }
+}
+
+@layer skdx-base {
+  /* `outline`, not `box-shadow`: forced-colours mode drops `box-shadow`. An ancestor's
+     `overflow: hidden` still clips it, so clipping components flip `--skdx-focus-ring-offset` negative. */
+  :where([class^='skdx-'], [class*=' skdx-']):focus-visible {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
+
+  /* Checkbox/Radio/Switch are excluded: filling the whole box on hover would read as a third state. */
+  /* [data-skdx-control='actuator'] covers shadow-DOM hosts wrapping a real button/a, which the element-type selectors above can't reach. */
+  :where([class^='skdx-'], [class*=' skdx-']):is(
+      button,
+      summary,
+      a[href],
+      [role='button'],
+      [role='link'],
+      [data-skdx-control='actuator']
+    ):hover:not(:disabled, [data-disabled], [aria-disabled='true']) {
+    background-color: var(--skdx-color-surface-hover);
+  }
+
+  /* Bordered inputs answer :hover directly; borderless ones (NumberField) rely on it matching the shell ancestor below. */
+  :where([class^='skdx-'], [class*=' skdx-']):is(input, textarea, select):hover:not(
+      :disabled,
+      [readonly],
+      [data-readonly],
+      [data-disabled]
+    ) {
+    border-color: var(--skdx-color-field-border-hover);
+    background-color: var(--skdx-color-field-bg-hover);
+  }
+
+  :where(
+      .skdx-number-field,
+      .skdx-tags-input,
+      .skdx-pin-input__field,
+      .skdx-select__trigger,
+      .skdx-form__control
+    ):hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where([class^='skdx-'], [class*=' skdx-']):is(
+      button,
+      summary,
+      a[href],
+      [role='button'],
+      [role='link'],
+      [role='menuitem'],
+      [role='menuitemcheckbox'],
+      [role='menuitemradio'],
+      [role='option'],
+      [role='tab'],
+      [role='checkbox'],
+      [role='radio'],
+      [role='switch'],
+      [data-skdx-control]
+    ):active:not(:disabled, [data-disabled], [aria-disabled='true']) {
+    translate: 0 1px;
+  }
+}
+
+/* 1ms, not 0: still fires `animationend`, which overlay unmount logic depends on. */
+@layer skdx-utilities {
+  @media (prefers-reduced-motion: reduce) {
+    :where([class^='skdx-'], [class*=' skdx-']),
+    :where([class^='skdx-'], [class*=' skdx-'])::before,
+    :where([class^='skdx-'], [class*=' skdx-'])::after {
+      animation-duration: 1ms;
+      animation-iteration-count: 1;
+      transition-duration: 1ms;
+      scroll-behavior: auto;
+    }
+  }
+}
+
+/* Only opacity/transform animate here — both composited, neither triggers layout. */
+@keyframes skdx-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes skdx-fade-out {
+  to {
+    opacity: 0;
+    /* `visibility` is discrete: it only flips to `hidden` at the end of the segment, so the fade plays in full first. */
+    visibility: hidden;
+  }
+}
+
+@keyframes skdx-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes skdx-zoom-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+    /* See `skdx-fade-out`: visibility flips to hidden only at the end of this segment too. */
+    visibility: hidden;
+  }
+}
+
+@keyframes skdx-slide-in-from-top {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+}
+
+@keyframes skdx-slide-in-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}
+
+@keyframes skdx-slide-in-from-start {
+  from {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+}
+
+@keyframes skdx-slide-in-from-end {
+  from {
+    opacity: 0;
+    transform: translateX(0.5rem);
+  }
+}
+
+@keyframes skdx-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes skdx-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes skdx-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(400%);
+  }
+}