@skdx/docs-kit 0.39.0 → 0.40.0

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

@@ -14,6 +14,8 @@
  */
 @layer skdx-components {
   :where(.skdx-stepper) {
+    /* Keep absolutely positioned status text inside this scroll container. */
+    position: relative;
     display: flex;
     align-items: flex-start;
     gap: var(--skdx-space-2);
@@ -133,7 +135,7 @@
     color: inherit;
     background-color: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     text-align: start;
     white-space: normal;
     /* Host pages commonly reset `overflow-wrap: anywhere` on body/prose,

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

@@ -64,12 +64,22 @@
     inset-inline-start: var(--skdx-border-width-thick);
   }
 
+  /* A leading label precedes the pill as well as the thumb in the anatomy. */
+  :where(.skdx-switch):has(.skdx-switch__label ~ .skdx-switch__thumb)::before {
+    order: 1;
+  }
+
+  :where(.skdx-switch):has(.skdx-switch__label ~ .skdx-switch__thumb) :where(.skdx-switch__thumb) {
+    inset-inline-start: auto;
+    inset-inline-end: calc(var(--skdx-switch-track-size) + var(--skdx-border-width-thick));
+  }
+
   /* Fills the track's content box; the 2px rim is subtracted from each edge. */
   :where(.skdx-switch__thumb) {
     inline-size: calc(var(--skdx-switch-track-size) - var(--skdx-border-width-thick) * 2);
     block-size: calc(var(--skdx-switch-track-size) - var(--skdx-border-width-thick) * 2);
 
-    background-color: var(--skdx-color-surface-page);
+    background-color: var(--skdx-color-text-default);
     border-radius: var(--skdx-radius-full);
     box-shadow: var(--skdx-shadow-sm);
 
@@ -92,6 +102,7 @@
 
   /* translate has no logical equivalent, so [dir='rtl'] below mirrors it explicitly — the one place needing a direction selector instead of logical properties. */
   :where(.skdx-switch)[data-state='checked'] :where(.skdx-switch__thumb) {
+    background-color: var(--skdx-color-selection-mark);
     translate: var(--skdx-switch-track-size);
   }
 
@@ -114,6 +125,15 @@
     --skdx-switch-border: var(--skdx-color-border-strong);
   }
 
+  :where(.skdx-switch)[data-invalid]:not([data-disabled]) {
+    --skdx-switch-border: var(--skdx-color-field-border-invalid);
+  }
+
+  :where(.skdx-switch)[data-invalid]:not(:has(.skdx-switch__label), [data-disabled]),
+  :where(.skdx-switch)[data-invalid]:has(.skdx-switch__label):not([data-disabled])::before {
+    box-shadow: 0 0 0 var(--skdx-border-width-thin) var(--skdx-color-field-border-invalid);
+  }
+
   :where(.skdx-switch)[data-disabled] {
     --skdx-switch-fill: var(--skdx-color-border-disabled);
     cursor: not-allowed;

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

@@ -127,7 +127,7 @@
     color: inherit;
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     font: inherit;
     font-weight: var(--skdx-font-weight-semibold);
     text-align: start;
@@ -160,7 +160,7 @@
     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);
+    border-radius: var(--skdx-radius-default);
     font: inherit;
     font-size: var(--skdx-font-size-xs);
     font-weight: var(--skdx-font-weight-regular);
@@ -267,7 +267,7 @@
     color: inherit;
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
   }
 
@@ -311,7 +311,7 @@
     color: inherit;
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     font: inherit;
     font-weight: inherit;
     text-align: start;

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

@@ -41,7 +41,7 @@
 
     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);
+    border-radius: var(--skdx-radius-default);
     cursor: text;
   }
 
@@ -77,7 +77,7 @@
     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);
+    border-radius: var(--skdx-radius-default);
   }
 
   /* TagsInput navigates tags with real focus rather than an attribute, so :focus/:hover are the active signal, not [data-highlighted]. */

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

@@ -48,7 +48,7 @@
     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);
+    border-radius: var(--skdx-radius-default);
 
     font-size: var(--skdx-text-field-font-size, var(--skdx-font-size-sm));
     line-height: var(--skdx-font-line-height-normal);
@@ -65,13 +65,13 @@
     opacity: 1;
   }
 
-  :where(.skdx-text-field__input):hover:not(:disabled, :read-only) {
+  :where(.skdx-text-field__input):hover:not(:disabled, :read-only, [data-invalid], :user-invalid) {
     border-color: var(--skdx-color-field-border-hover);
   }
 
   /* The second selector is the Web Components host, whose input is a light-DOM child. */
   :where(.skdx-text-field__input):focus-visible,
-  :where(.skdx-text-field__input):has(> input:focus-visible) {
+  :where(.skdx-text-field__input:has(> input:focus-visible)) {
     border-color: var(--skdx-color-field-border-focus);
   }
 
@@ -82,21 +82,6 @@
     outline-offset: var(--skdx-focus-ring-offset);
   }
 
-  /* Invalid is signalled by colour and a thicker border — colour alone fails WCAG 1.4.1 (Use of Colour). */
-  :where(.skdx-text-field__input)[data-invalid],
-  :where(.skdx-text-field__input):user-invalid {
-    border-color: var(--skdx-color-field-border-invalid);
-    border-width: var(--skdx-border-width-thick);
-  }
-
-  :where(.skdx-text-field__input):disabled,
-  :where(.skdx-text-field__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;
-  }
-
   /* Read-only keeps full-contrast text — only the editable affordance (background well) is withdrawn. */
   :where(.skdx-text-field__input)[readonly],
   /* :read-only matches the native attribute; TextFieldInput doesn't mirror readOnly as a data attribute. */
@@ -119,11 +104,31 @@
 
   /* Ghost's border returns on hover/focus — its only affordance that the text is editable. */
   :where(.skdx-text-field)[data-variant='ghost']
-    :where(.skdx-text-field__input):hover:not(:disabled, :read-only),
-  :where(.skdx-text-field__input)[data-variant='ghost']:hover:not(:disabled, :read-only) {
+    :where(.skdx-text-field__input):hover:not(:disabled, :read-only, [data-invalid], :user-invalid),
+  :where(.skdx-text-field__input)[data-variant='ghost']:hover:not(
+      :disabled,
+      :read-only,
+      [data-invalid],
+      :user-invalid
+    ) {
     border-color: var(--skdx-color-field-border-hover);
   }
 
+  /* State borders take precedence over variant and focus styling. */
+  :where(.skdx-text-field__input)[data-invalid],
+  :where(.skdx-text-field__input):user-invalid {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-text-field__input):disabled,
+  :where(.skdx-text-field__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-text-field__clear-button) {
     display: inline-flex;
     align-items: center;
@@ -135,7 +140,7 @@
     color: var(--skdx-color-text-muted);
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
   }
 

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

@@ -78,6 +78,6 @@
 
     color: var(--skdx-color-highlight-text);
     background-color: var(--skdx-color-highlight-bg);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
   }
 }

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

@@ -31,7 +31,7 @@
     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);
+    border-radius: var(--skdx-radius-default);
 
     font-size: var(--skdx-font-size-sm);
     line-height: var(--skdx-font-line-height-normal);

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

@@ -18,7 +18,7 @@
 
     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);
+    border-radius: var(--skdx-radius-default);
     font-variant-numeric: tabular-nums;
   }
 
@@ -29,7 +29,7 @@
      and the segment vanished instead of reading as a gap. `pre` keeps it. */
   :where(.skdx-time-field__segment) {
     padding-inline: var(--skdx-space-1);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     font-size: var(--skdx-font-size-sm);
     white-space: pre;
     caret-color: transparent;

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

@@ -88,7 +88,7 @@
     background-color: var(--skdx-status-bg, var(--skdx-color-surface-raised));
     border: var(--skdx-border-width-thin) solid
       var(--skdx-status-border, var(--skdx-color-border-default));
-    border-radius: var(--skdx-radius-lg);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-overlay);
 
     font-size: var(--skdx-font-size-sm);
@@ -127,7 +127,7 @@
     color: currentColor;
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
   }
 }

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

@@ -15,7 +15,7 @@
     display: inline-flex;
     align-items: center;
     border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
     /* Clips the children's square corners to the group's radius. */
     overflow: hidden;
     --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
@@ -109,7 +109,7 @@
     z-index: 1;
     border-inline-start: 0;
     border-block-start: 0;
-    border-radius: var(--skdx-radius-inner);
+    border-radius: var(--skdx-radius-default);
     color: var(--skdx-color-text-muted);
     white-space: nowrap;
   }
@@ -151,7 +151,7 @@
     inline-size: var(--skdx-toggle-group-width, 0);
     translate: var(--skdx-toggle-group-x, 0) 0;
     background-color: var(--skdx-color-surface-raised);
-    border-radius: var(--skdx-radius-inner);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-sm);
     transition:
       translate var(--skdx-motion-duration-normal) var(--skdx-motion-easing),

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

@@ -27,7 +27,7 @@
     color: var(--skdx-color-text-default);
     background: transparent;
     border: var(--skdx-border-width-thin) solid transparent;
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
 
     font-size: var(--skdx-toggle-font-size);
     font-weight: var(--skdx-font-weight-medium);

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

@@ -18,7 +18,7 @@
     padding: var(--skdx-space-1);
     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);
+    border-radius: var(--skdx-radius-default);
   }
 
   :where(.skdx-toolbar)[data-orientation='vertical'] {
@@ -58,7 +58,7 @@
     color: var(--skdx-color-text-default);
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
   }
 

package/dist/skins-src/components/tree-select.css

@@ -44,7 +44,7 @@
     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);
+    border-radius: var(--skdx-radius-default);
     font-size: var(--skdx-font-size-sm);
   }
 
@@ -105,7 +105,7 @@
     color: var(--skdx-color-status-neutral-text);
     background-color: var(--skdx-color-status-neutral-bg);
     border: var(--skdx-border-width-thin) solid var(--skdx-color-status-neutral-border);
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
 
     font-size: var(--skdx-font-size-xs);
     line-height: var(--skdx-font-line-height-tight);

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

@@ -38,7 +38,7 @@
     padding-inline-start: var(--skdx-tree-item-indent);
     padding-inline-end: var(--skdx-space-2);
 
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
   }
 

package/dist/skins-src/components/usage-card.css

@@ -17,7 +17,7 @@
 
     background-color: var(--skdx-color-surface-raised);
     border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
-    border-radius: var(--skdx-radius-lg);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-sm);
     color: var(--skdx-color-text-default);
   }

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

@@ -17,7 +17,7 @@
     padding-inline: var(--skdx-space-2);
 
     border: 0;
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
     background-color: transparent;
     color: var(--skdx-color-text-default);
     font: inherit;

package/dist/skins-src/components/verification-page.css

@@ -26,7 +26,7 @@
 
     background-color: var(--skdx-color-surface-raised);
     border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
-    border-radius: var(--skdx-radius-lg);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-md);
   }
 

package/dist/skins-src/components/workspace-switcher.css

@@ -21,7 +21,7 @@
     text-align: start;
     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);
+    border-radius: var(--skdx-radius-default);
   }
 
   :where(.skdx-workspace-switcher__leading) {
@@ -78,7 +78,7 @@
     align-items: center;
     column-gap: var(--skdx-space-2);
     padding: var(--skdx-space-2);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
   }
 
   :where(.skdx-workspace-switcher__item)[data-selected] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/docs-kit",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "Build-time toolkit for the SKDX documentation site: the shared contracts, the framework table, generated manifests and the source files the docs measure. Not a public API — no semver guarantees, may change in any release.",
   "license": "MIT",
   "homepage": "https://github.com/SkandaDX/ui.skdx/tree/main/internal/docs-kit#readme",
@@ -36,19 +36,19 @@
     "access": "public"
   },
   "devDependencies": {
-    "@skdx/angular": "0.39.0",
-    "@skdx/react-blocks": "0.39.0",
-    "@skdx/angular-blocks": "0.39.0",
-    "@skdx/react": "0.39.0",
-    "@skdx/shared": "0.39.0",
-    "@skdx/skins": "0.39.0",
-    "@skdx/vue-blocks": "0.39.0",
-    "@skdx/vue": "0.39.0",
-    "@skdx/svelte-blocks": "0.39.0",
-    "@skdx/web-components": "0.39.0",
-    "@skdx/svelte": "0.39.0",
-    "@skdx/web-components-blocks": "0.39.0",
-    "@skdx/tokens": "0.39.0"
+    "@skdx/angular": "0.40.0",
+    "@skdx/angular-blocks": "0.40.0",
+    "@skdx/react": "0.40.0",
+    "@skdx/shared": "0.40.0",
+    "@skdx/skins": "0.40.0",
+    "@skdx/react-blocks": "0.40.0",
+    "@skdx/tokens": "0.40.0",
+    "@skdx/svelte-blocks": "0.40.0",
+    "@skdx/vue": "0.40.0",
+    "@skdx/svelte": "0.40.0",
+    "@skdx/vue-blocks": "0.40.0",
+    "@skdx/web-components-blocks": "0.40.0",
+    "@skdx/web-components": "0.40.0"
   },
   "nx": {
     "targets": {