@skdx/docs-kit 0.39.0 → 0.40.0

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

@@ -21,7 +21,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;
   }
 
@@ -61,7 +61,7 @@
 
   :where(.skdx-date-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);
     color: var(--skdx-color-field-text);
     /* Segments are typed into, not selected — the caret would be misleading. */

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

@@ -23,7 +23,7 @@
 
     padding: var(--skdx-space-6);
     gap: var(--skdx-space-4);
-    border-radius: var(--skdx-overlay-radius);
+    border-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
     z-index: var(--skdx-z-index-modal);
   }
 
@@ -115,7 +115,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;
   }
 
@@ -134,8 +134,8 @@
       inset-block-end: 0;
       inset-inline-start: 0;
       translate: none;
-      border-start-start-radius: var(--skdx-overlay-radius);
-      border-start-end-radius: var(--skdx-overlay-radius);
+      border-start-start-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
+      border-start-end-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }

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

@@ -36,32 +36,32 @@
     inset-block: 0;
     left: 0;
     inline-size: min(20rem, 90vw);
-    border-top-right-radius: var(--skdx-overlay-radius);
-    border-bottom-right-radius: var(--skdx-overlay-radius);
+    border-top-right-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
+    border-bottom-right-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
   }
 
   :where(.skdx-drawer__content)[data-side='right'] {
     inset-block: 0;
     right: 0;
     inline-size: min(20rem, 90vw);
-    border-top-left-radius: var(--skdx-overlay-radius);
-    border-bottom-left-radius: var(--skdx-overlay-radius);
+    border-top-left-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
+    border-bottom-left-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
   }
 
   :where(.skdx-drawer__content)[data-side='top'] {
     inset-inline: 0;
     inset-block-start: 0;
     block-size: auto;
-    border-end-start-radius: var(--skdx-overlay-radius);
-    border-end-end-radius: var(--skdx-overlay-radius);
+    border-end-start-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
+    border-end-end-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
   }
 
   :where(.skdx-drawer__content)[data-side='bottom'] {
     inset-inline: 0;
     inset-block-end: 0;
     block-size: auto;
-    border-start-start-radius: var(--skdx-overlay-radius);
-    border-start-end-radius: var(--skdx-overlay-radius);
+    border-start-start-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
+    border-start-end-radius: var(--skdx-overlay-radius, var(--skdx-radius-default));
   }
 
   /* Sized on the axis the panel isn't pinned along: left/right drawers size on inline-size, top/bottom on block-size, each split per side/size pair. */
@@ -160,7 +160,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/editable.css

@@ -29,7 +29,7 @@
     padding-inline: var(--skdx-space-2);
     padding-block: var(--skdx-space-1);
     border: var(--skdx-border-width-thin) solid transparent;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     font-size: var(--skdx-font-size-sm);
     cursor: text;
   }
@@ -67,7 +67,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-focus);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     font-size: var(--skdx-font-size-sm);
   }
 
@@ -77,7 +77,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;
     resize: vertical;
   }

package/dist/skins-src/components/file-upload.css

@@ -29,7 +29,7 @@
     color: var(--skdx-color-text-muted);
     background-color: var(--skdx-color-surface-default);
     border: var(--skdx-border-width-thick) dashed var(--skdx-color-border-default);
-    border-radius: var(--skdx-radius-lg);
+    border-radius: var(--skdx-radius-default);
 
     cursor: pointer;
     transition:
@@ -69,7 +69,7 @@
 
     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-file-upload__item)[data-invalid] {
@@ -81,7 +81,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;
   }
 
@@ -148,7 +148,7 @@
     color: var(--skdx-color-text-muted);
     background: none;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     font-size: var(--skdx-font-size-sm);
     cursor: pointer;
   }

package/dist/skins-src/components/floating-panel.css

@@ -62,7 +62,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/forgot-password-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/form-section.css

@@ -47,7 +47,7 @@
   :where(.skdx-form-section)[data-variant='bordered'] {
     padding: var(--skdx-space-5);
     border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
-    border-radius: var(--skdx-radius-lg);
+    border-radius: var(--skdx-radius-default);
     background-color: var(--skdx-color-surface-raised);
   }
 

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

@@ -39,7 +39,7 @@
     background-color: var(--skdx-color-status-danger-bg);
     border: var(--skdx-border-width-thin) solid var(--skdx-color-status-danger-border);
     border-inline-start-width: var(--skdx-border-width-thicker);
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
 
     font-size: var(--skdx-font-size-sm);
   }
@@ -82,7 +82,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);
   }
 
   /* Never colour alone — wired to the control with `aria-describedby` so it's announced too. */
@@ -92,6 +92,16 @@
     color: var(--skdx-color-text-danger);
   }
 
+  /* A catch-all with no copy stays in the DOM as the Control's fallback
+     `aria-describedby` target, so it must not take a Field gap of its own once the
+     field goes invalid. `display: none` leaves that IDREF resolvable, and `:empty`
+     never matches a message that has something to announce. `skdx-form-message` is
+     excluded because its copy can live in a shadow root — an empty light DOM says
+     nothing about what it shows; both implementations hide themselves instead. */
+  :where(.skdx-form__message):empty:not(skdx-form-message) {
+    display: none;
+  }
+
   /* Underlined since it sits on a coloured wash where colour alone can't mark
      a link. `inline-block`, not `inline`: transforms (the shared pressed cue)
      don't apply to non-replaced inline boxes. */

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

@@ -13,7 +13,7 @@
  */
 @layer skdx-components {
   :where(.skdx-image, .skdx-image__fallback) {
-    --skdx-image-radius: 0px;
+    --skdx-image-radius: var(--skdx-radius-default);
 
     border-radius: var(--skdx-image-radius);
   }

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

@@ -31,7 +31,7 @@
     /* Logical, so the "sitting on the page" edge stays on the correct side
        when the document direction flips. */
     border-block-end-width: var(--skdx-border-width-thick);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
   }
 
   /* Sizes here. Only `font-size` and `padding-inline` move: the cap's height

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

@@ -20,7 +20,7 @@
 
     color: var(--skdx-link-color);
     text-underline-offset: var(--skdx-link-underline-offset);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
   }
 
   :where(.skdx-link):visited {

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

@@ -22,7 +22,7 @@
 
     background-color: var(--skdx-color-field-bg);
     border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
   }
 
   /* `orientation` is a component prop, not a skin attribute — it

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

@@ -32,7 +32,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/menubar.css

@@ -27,7 +27,7 @@
     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);
+    border-radius: var(--skdx-radius-default);
   }
 
   :where(.skdx-menubar)[data-size='sm'] {
@@ -73,7 +73,7 @@
 
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
   }
 

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

@@ -55,7 +55,7 @@
     color: var(--skdx-color-text-default);
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
 
     font-size: var(--skdx-font-size-sm);
     font-weight: var(--skdx-font-weight-medium);

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

@@ -38,7 +38,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);
     overflow: hidden;
     --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
   }

package/dist/skins-src/components/onboarding-checklist.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/pagination.css

@@ -50,7 +50,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-pagination-font-size, var(--skdx-font-size-sm));
     font-variant-numeric: tabular-nums;
@@ -129,7 +129,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-pagination-font-size, var(--skdx-font-size-sm));
     cursor: pointer;
   }

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

@@ -49,25 +49,19 @@
     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-password-input-font-size, var(--skdx-font-size-sm));
   }
 
-  :where(.skdx-password-input__field):focus-visible {
+  :where(.skdx-password-input__field):focus-visible,
+  :where(.skdx-password-input__field:has(> input:focus-visible)) {
     border-color: var(--skdx-color-field-border-focus);
   }
 
-  :where(.skdx-password-input__field)[data-invalid] {
-    border-color: var(--skdx-color-field-border-invalid);
-    border-width: var(--skdx-border-width-thick);
-  }
-
-  :where(.skdx-password-input__field):disabled,
-  :where(.skdx-password-input__field)[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;
+  /* Web Components paint the field on the host around a reset native input. */
+  :where(.skdx-password-input__field):has(> input:focus-visible) {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
   }
 
   :where(.skdx-password-input)[data-variant='filled'] :where(.skdx-password-input__field),
@@ -83,11 +77,28 @@
   }
 
   :where(.skdx-password-input)[data-variant='ghost']
-    :where(.skdx-password-input__field):hover:not(:disabled, :read-only),
-  :where(.skdx-password-input__field)[data-variant='ghost']:hover:not(:disabled, :read-only) {
+    :where(.skdx-password-input__field):where(
+      :hover:not(:disabled, :read-only, [data-disabled], [data-readonly])
+    ),
+  :where(.skdx-password-input__field)[data-variant='ghost']:where(
+      :hover:not(:disabled, :read-only, [data-disabled], [data-readonly])
+    ) {
     border-color: var(--skdx-color-field-border-hover);
   }
 
+  :where(.skdx-password-input__field)[data-invalid] {
+    border-color: var(--skdx-color-field-border-invalid);
+    border-width: var(--skdx-border-width-thick);
+  }
+
+  :where(.skdx-password-input__field):disabled,
+  :where(.skdx-password-input__field)[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-password-input__toggle) {
     position: absolute;
     inset-inline-end: 0;
@@ -106,11 +117,64 @@
     color: var(--skdx-color-text-muted);
     background: transparent;
     border: 0;
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
   }
 
   :where(.skdx-password-input__toggle):hover {
     color: var(--skdx-color-text-default);
   }
+
+  /* Keep the reveal toggle in the field's grid area when a clear action
+     occupies its own column. Absolute positioning against the whole root
+     would put the two buttons on top of each other. */
+  :where(.skdx-password-input):has(.skdx-text-field__clear-button:not([hidden])) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: 'field clear';
+    column-gap: var(--skdx-control-gap-md);
+  }
+
+  :where(.skdx-password-input):has(.skdx-text-field__clear-button:not([hidden])):has(
+      .skdx-text-field__slot
+    ) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas: 'leading field clear';
+  }
+
+  :where(.skdx-password-input):has(.skdx-text-field__clear-button:not([hidden]))
+    :where(.skdx-text-field__slot) {
+    grid-area: leading;
+  }
+
+  :where(.skdx-password-input):has(.skdx-text-field__clear-button:not([hidden]))
+    :where(.skdx-password-input__field) {
+    grid-area: field;
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-password-input):has(.skdx-text-field__clear-button:not([hidden]))
+    :where(.skdx-password-input__toggle) {
+    grid-area: field;
+    position: relative;
+    inset-inline-end: auto;
+    justify-self: end;
+  }
+
+  :where(.skdx-password-input) :where(.skdx-text-field__clear-button) {
+    grid-area: clear;
+  }
+
+  /* Web Components place the slotted parts inside a shadow wrapper. That
+     wrapper, rather than its outer host, must own the same grid. */
+  :where(skdx-password-input):has(.skdx-text-field__clear-button:not([hidden])) {
+    display: block;
+  }
+
+  :where(skdx-password-input):has(.skdx-text-field__clear-button:not([hidden]))::part(root) {
+    display: grid;
+    grid-template-columns: inherit;
+    grid-template-areas: inherit;
+    column-gap: inherit;
+  }
 }

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

@@ -46,7 +46,7 @@
 
   :where(.skdx-pin-input),
   :where(.skdx-pin-input)[data-shape='rounded'] {
-    --skdx-pin-input-radius: var(--skdx-radius-md);
+    --skdx-pin-input-radius: var(--skdx-radius-default);
   }
 
   :where(.skdx-pin-input)[data-shape='square'] {
@@ -76,7 +76,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-pin-input-radius, var(--skdx-radius-md));
+    border-radius: var(--skdx-pin-input-radius, var(--skdx-radius-default));
 
     font-size: var(--skdx-pin-input-font-size, var(--skdx-font-size-lg));
     /* One glyph per box, centred, same width for every digit. */

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

@@ -48,7 +48,7 @@
     color: var(--skdx-color-text-on-inverse);
     background-color: var(--skdx-color-surface-inverse);
     border: 0;
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-md);
 
     font-size: var(--skdx-font-size-xs);

package/dist/skins-src/components/qr-code.css

@@ -18,7 +18,7 @@
     /* The mandatory quiet zone. */
     padding: var(--skdx-space-2);
     background-color: var(--skdx-color-neutral-50);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
   }
 
   :where(.skdx-qr-code__pattern) {
@@ -57,6 +57,6 @@
     block-size: calc(var(--skdx-qr-code-size, 21) * 4px);
     padding: var(--skdx-space-3);
     background-color: var(--skdx-color-neutral-50);
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
   }
 }

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

@@ -18,7 +18,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-md);
+    border-radius: var(--skdx-radius-default);
     cursor: pointer;
 
     transition:

package/dist/skins-src/components/reset-password-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/select.css

@@ -95,7 +95,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);
@@ -154,7 +154,7 @@
     color: var(--skdx-select-tag-text);
     background-color: var(--skdx-select-tag-bg);
     border: var(--skdx-border-width-thin) solid var(--skdx-select-tag-border);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
 
     /* Its own three names rather than the shared --skdx-status-* trio: those
        inherit, so a Select inside an Alert would take that alert's severity. */
@@ -196,7 +196,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/sign-in-page.css

@@ -25,7 +25,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/sign-up-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/skeleton.css

@@ -13,7 +13,7 @@
 @layer skdx-components {
   :where(.skdx-skeleton) {
     --skdx-skeleton-color: var(--skdx-color-skeleton);
-    --skdx-skeleton-radius: var(--skdx-radius-sm);
+    --skdx-skeleton-radius: var(--skdx-radius-default);
 
     display: block;
     background-color: var(--skdx-skeleton-color);

package/dist/skins-src/components/skip-link.css

@@ -41,7 +41,7 @@
 
     color: var(--skdx-color-action-primary-text);
     background-color: var(--skdx-color-action-primary-bg);
-    border-radius: var(--skdx-radius-md);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-lg);
 
     font-size: var(--skdx-font-size-sm);

package/dist/skins-src/components/speed-dial.css

@@ -19,7 +19,7 @@
     color: var(--skdx-color-action-primary-text);
     background-color: var(--skdx-color-action-primary-bg);
     border: 0;
-    border-radius: var(--skdx-radius-full);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-lg);
     cursor: pointer;
 
@@ -87,7 +87,7 @@
     color: var(--skdx-color-text-default);
     background-color: var(--skdx-color-surface-raised);
     border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
-    border-radius: var(--skdx-radius-full);
+    border-radius: var(--skdx-radius-default);
     box-shadow: var(--skdx-shadow-md);
     cursor: pointer;
 
@@ -112,7 +112,7 @@
     padding-block: var(--skdx-space-1);
     color: var(--skdx-color-text-on-inverse);
     background-color: var(--skdx-color-surface-inverse);
-    border-radius: var(--skdx-radius-sm);
+    border-radius: var(--skdx-radius-default);
     font-size: var(--skdx-font-size-xs);
     white-space: nowrap;
   }

package/dist/skins-src/components/stat-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);
   }
@@ -67,6 +67,11 @@
     line-height: var(--skdx-font-line-height-tight);
   }
 
+  /* An empty skeleton has no intrinsic width inside the shrinking flex item. */
+  :where(.skdx-stat-card)[data-state='loading'] :where(.skdx-stat-card__value) {
+    min-inline-size: 6ch;
+  }
+
   :where(.skdx-stat-card__trend) {
     display: inline-flex;
     align-items: center;