@devslab/dds-css 0.25.1 → 0.27.0

package/README.ko.md

@@ -20,6 +20,9 @@ EmptyState** (BottomSheet은 Dialog의 네이티브 짝 — Phase 3).
 - 다크 모드는 공짜: `<html>` 또는 임의 서브트리에 `data-theme="dark"`
   (`data-theme="light"`로 되고정). 어떤 컴포넌트에도 다크 분기가 없습니다.
 - 개별 임포트: `@devslab/dds-css/components/button.css` 등.
+- 진행 중인 버튼(`aria-busy="true"` + `.dds-spinner` 자식)은 크기와 이름을
+  그대로 유지합니다. 라벨은 지우지 않고 숨기고, 스피너를 그 위에 겹쳐
+  그립니다(D-043).
 - 컴포넌트별 마크업 계약·상태·접근성 체크리스트·do/don't:
   [`docs/components.ko.md`](../../docs/components.ko.md).
   라이브 레퍼런스: `preview/components.html` (먼저 `pnpm build`).

package/README.md

@@ -21,6 +21,9 @@ the native counterpart of Dialog — Phase 3).
 - Dark mode is free: `data-theme="dark"` on `<html>` or any subtree
   (`data-theme="light"` pins back). No component has a dark branch.
 - Per-component imports: `@devslab/dds-css/components/button.css` etc.
+- A loading button (`aria-busy="true"` + a `.dds-spinner` child) keeps its
+  size and name: the label is hidden, not removed, and the spinner is drawn
+  over it (D-043).
 - Markup contracts, states, accessibility checklists and do/don't per
   component: [`docs/components.md`](../../docs/components.md).
   Live reference: `preview/components.html` (run `pnpm build` first).

package/dist/components/button.css

@@ -2,7 +2,7 @@
  * Variants: primary / secondary / ghost / danger. Sizes: sm / md(default) / lg.
  * Control heights come from the spacing scale (32/40/48); type from the typo
  * scale (label for sm/md, body-1 size for lg). Loading = aria-busy="true" with
- * a .dds-spinner child. */
+ * a .dds-spinner child; the button keeps its size while loading (D-043). */
 
 .dds-btn {
   appearance: none;
@@ -29,6 +29,10 @@
   -webkit-tap-highlight-color: transparent;
   white-space: normal;
   overflow-wrap: anywhere;
+  /* Containing block for the loading spinner, which is centred over the
+   * label rather than placed beside it. Set here, not only while loading,
+   * so a consumer's own position (a fixed action button) still wins. */
+  position: relative;
 }
 
 .dds-btn:focus-visible {
@@ -37,13 +41,36 @@
 }
 
 /* opacity is allowed for disabled only (spec §4.2) */
-.dds-btn[disabled],
-.dds-btn[aria-busy="true"] {
+.dds-btn[disabled] {
   opacity: 0.45;
   cursor: not-allowed;
 }
+
+/* Loading (D-043). The button keeps the exact box its label gives it, so the
+ * controls beside it do not move and a wrapped label does not wrap again
+ * when progress starts. The label stays in the layout and in the
+ * accessibility tree (its accessible name does not change) but is not
+ * painted: the text fill is transparent and element children (icons) are
+ * fully transparent. The spinner is taken out of the flow and centred over
+ * the label; it keeps the button's text color (currentColor).
+ *
+ * Not dimmed: the spinner is the only thing painted, and at the disabled
+ * 0.45 opacity it drops to about 2:1 against the button (WCAG 1.4.11 asks
+ * 3:1). The framework Buttons also set [disabled], so this rule comes after
+ * the one above to put the opacity back. */
 .dds-btn[aria-busy="true"] {
+  opacity: 1;
+  cursor: not-allowed;
   pointer-events: none;
+  -webkit-text-fill-color: transparent;
+}
+.dds-btn[aria-busy="true"] > :not(.dds-spinner) {
+  opacity: 0;
+}
+.dds-btn[aria-busy="true"] > .dds-spinner {
+  position: absolute;
+  inset: 0;
+  margin: auto;
 }
 
 /* variants ---------------------------------------------------------------- */
@@ -115,3 +142,22 @@
     min-block-size: 44px;
   }
 }
+
+/* Forced colors repaint every text color, transparent included, so the
+ * hidden label would come back on top of the spinner. A loading button opts
+ * out and paints itself with system colors: the face of a button, the
+ * disabled border, and the spinner in button text. No transition: opted out,
+ * the background would fade from the brand color it no longer forces. */
+@media (forced-colors: active) {
+  .dds-btn[aria-busy="true"] {
+    forced-color-adjust: none;
+    background-color: ButtonFace;
+    border-color: GrayText;
+    color: ButtonText;
+    transition: none;
+  }
+  .dds-btn[aria-busy="true"] > .dds-spinner {
+    forced-color-adjust: none;
+    color: ButtonText;
+  }
+}

package/dist/components/date-picker.css

@@ -0,0 +1,56 @@
+/* Ark DatePicker interaction with DDS visual tokens. */
+.dds-date-picker-control {display:flex;align-items:stretch;gap:var(--dds-space-8);}
+.dds-date-picker-control input {min-width:0;}
+.dds-date-picker-control .dds-btn {flex-shrink:0;min-width:calc(var(--dds-space-40) + var(--dds-space-4));padding-inline:calc(var(--dds-space-8) + var(--dds-space-2));}
+.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);}
+.dds-date-picker-content {width:calc(var(--dds-space-40) * 8);max-width:calc(100vw - var(--dds-space-32));max-height:min(calc(100dvh - var(--dds-space-32)),var(--available-height,100dvh));overflow:auto;box-sizing:border-box;padding:var(--dds-space-16);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-date-picker-header {display:flex;align-items:center;justify-content:space-between;gap:var(--dds-space-12);font-weight:600;margin-bottom:var(--dds-space-12);}
+.dds-date-picker-table {width:100%;border-collapse:collapse;table-layout:fixed;}
+.dds-date-picker-table th {font-size:var(--dds-space-12);font-weight:500;color:var(--dds-color-text-secondary);height:var(--dds-space-32);}
+.dds-date-picker-table td {padding:0;text-align:center;}
+.dds-date-picker-table [data-part="table-cell-trigger"] {display:flex;align-items:center;justify-content:center;width:100%;height:var(--dds-space-40);border:0;border-radius:var(--dds-radius-sm);font:inherit;color:inherit;background:transparent;cursor:pointer;}
+.dds-date-picker-table [data-part="table-cell-trigger"]:hover {background:var(--dds-color-bg-brand-subtle);}
+.dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
+.dds-date-picker-table [data-part="table-cell-trigger"][data-selected] {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);}
+.dds-date-picker-table [data-today]:not([data-selected]) {text-decoration:underline;text-underline-offset:var(--dds-space-4);}
+.dds-date-picker-content :focus-visible {outline:var(--dds-space-2) solid var(--dds-color-text-brand);outline-offset:var(--dds-space-2);}
+.dds-date-picker-footer {display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--dds-space-12);margin-top:var(--dds-space-12);padding-top:var(--dds-space-12);border-top:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);}
+
+/* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
+.dds-date-picker-control > input,.dds-date-range-box {box-sizing:border-box;flex:1;min-inline-size:0;block-size:var(--dds-space-40);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);font-family:inherit;font-size:var(--dds-typo-body-2-font-size);font-variant-numeric:tabular-nums;}
+.dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
+.dds-date-picker-control > input:focus-visible,.dds-date-range-box:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
+.dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
+.dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
+.dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
+.dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
+.dds-date-range-box[hidden] {display:none;}
+.dds-date-range-input {flex:1;inline-size:100%;min-inline-size:0;block-size:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;outline:none;}
+.dds-date-range-input:disabled {cursor:not-allowed;}
+.dds-date-range-separator {flex:none;color:var(--dds-color-text-secondary);}
+.dds-field__error {font-size:var(--dds-typo-caption-font-size);line-height:var(--dds-typo-caption-line-height);color:var(--dds-color-status-danger);}
+@media (pointer:coarse) {.dds-date-picker-control > input,.dds-date-range-box {min-block-size:calc(var(--dds-space-40) + var(--dds-space-4));}}
+
+/* Range selection: ends filled, days between tinted, hover previews the end being chosen. */
+.dds-date-picker-table [data-part="table-cell-trigger"][data-in-range] {background:var(--dds-color-bg-brand-subtle);color:var(--dds-color-text-primary);border-radius:0;}
+.dds-date-picker-table [data-part="table-cell-trigger"]:is([data-range-start],[data-range-end]) {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);border-radius:var(--dds-radius-sm);}
+.dds-date-picker-table [data-part="table-cell-trigger"][data-hover-range-end]:not([data-range-start]) {box-shadow:inset 0 0 0 var(--dds-space-2) var(--dds-color-bg-brand);border-radius:var(--dds-radius-sm);}
+.dds-date-picker-presets {display:flex;flex-wrap:wrap;gap:var(--dds-space-8);flex:1 1 100%;}
+.dds-date-picker-presets[hidden] {display:none;}
+.dds-date-picker-footer > [data-part="clear-trigger"] {margin-inline-start:auto;}
+/* Days and months outside min/max read as unavailable, not as ordinary choices. */
+.dds-date-picker-table [data-part="table-cell-trigger"][data-disabled] {opacity:.45;cursor:not-allowed;background:transparent;}
+
+/* Month grid (MonthPicker): 3 columns × 4 rows, year paged in the header. */
+.dds-date-picker-year {font-variant-numeric:tabular-nums;}
+.dds-date-picker-table--months td {padding:var(--dds-space-4);}
+.dds-date-picker-table--months [data-part="table-cell-trigger"] {height:var(--dds-space-40);}
+
+/* Standalone Calendar shares the DatePicker view without popup positioning. */
+.dds-calendar {display:block;}
+.dds-date-picker--hidden > .dds-field__label {position:absolute;width:calc(var(--dds-space-2) / 2);height:calc(var(--dds-space-2) / 2);overflow:hidden;clip-path:inset(50%);}
+.dds-date-picker--inside {position:relative;}
+.dds-date-picker--inside > .dds-field__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:calc(var(--dds-space-16) + var(--dds-space-2));z-index:1;pointer-events:none;}
+.dds-date-picker--inside:focus-within > .dds-field__label,.dds-date-picker--inside[data-filled] > .dds-field__label {inset-block-start:var(--dds-space-2);font-size:var(--dds-typo-caption-font-size);}
+.dds-date-picker--inside .dds-date-picker-control input {height:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
+.dds-date-picker--inside:not(:focus-within):not([data-filled]) input::placeholder {color:transparent;}

package/dist/components/iconbutton.css

@@ -38,6 +38,15 @@
   cursor: not-allowed;
 }
 
+/* Loading: the framework IconButtons swap the icon for a .dds-spinner, which
+ * the fixed box already centres. Same rule as .dds-btn (D-043): not dimmed,
+ * because a 0.45 spinner falls below 3:1 (danger is about 2.3:1). */
+.dds-iconbtn[aria-busy="true"] {
+  opacity: 1;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 /* variants ---------------------------------------------------------------- */
 
 .dds-iconbtn--secondary {

package/dist/components/spinner.css

@@ -27,8 +27,22 @@
   }
 }
 
+/* base.css stops every dds- animation after one 0.01ms run under reduced
+ * motion. The :root prefix ties its specificity and this file loads after
+ * base.css, so the spinner keeps turning, at half speed, instead of freezing. */
 @media (prefers-reduced-motion: reduce) {
-  .dds-spinner {
+  :root .dds-spinner {
     animation-duration: 1600ms;
+    animation-iteration-count: infinite;
+  }
+}
+
+/* Forced colors repaint the transparent top border too, which closes the gap
+ * and leaves a ring that looks still. Opt out and paint it in the system text
+ * color (a loading button sets ButtonText instead, button.css). */
+@media (forced-colors: active) {
+  .dds-spinner {
+    forced-color-adjust: none;
+    color: CanvasText;
   }
 }

package/dist/dds.css

@@ -52,7 +52,7 @@
  * Variants: primary / secondary / ghost / danger. Sizes: sm / md(default) / lg.
  * Control heights come from the spacing scale (32/40/48); type from the typo
  * scale (label for sm/md, body-1 size for lg). Loading = aria-busy="true" with
- * a .dds-spinner child. */
+ * a .dds-spinner child; the button keeps its size while loading (D-043). */
 
 .dds-btn {
   appearance: none;
@@ -79,6 +79,10 @@
   -webkit-tap-highlight-color: transparent;
   white-space: normal;
   overflow-wrap: anywhere;
+  /* Containing block for the loading spinner, which is centred over the
+   * label rather than placed beside it. Set here, not only while loading,
+   * so a consumer's own position (a fixed action button) still wins. */
+  position: relative;
 }
 
 .dds-btn:focus-visible {
@@ -87,13 +91,36 @@
 }
 
 /* opacity is allowed for disabled only (spec §4.2) */
-.dds-btn[disabled],
-.dds-btn[aria-busy="true"] {
+.dds-btn[disabled] {
   opacity: 0.45;
   cursor: not-allowed;
 }
+
+/* Loading (D-043). The button keeps the exact box its label gives it, so the
+ * controls beside it do not move and a wrapped label does not wrap again
+ * when progress starts. The label stays in the layout and in the
+ * accessibility tree (its accessible name does not change) but is not
+ * painted: the text fill is transparent and element children (icons) are
+ * fully transparent. The spinner is taken out of the flow and centred over
+ * the label; it keeps the button's text color (currentColor).
+ *
+ * Not dimmed: the spinner is the only thing painted, and at the disabled
+ * 0.45 opacity it drops to about 2:1 against the button (WCAG 1.4.11 asks
+ * 3:1). The framework Buttons also set [disabled], so this rule comes after
+ * the one above to put the opacity back. */
 .dds-btn[aria-busy="true"] {
+  opacity: 1;
+  cursor: not-allowed;
   pointer-events: none;
+  -webkit-text-fill-color: transparent;
+}
+.dds-btn[aria-busy="true"] > :not(.dds-spinner) {
+  opacity: 0;
+}
+.dds-btn[aria-busy="true"] > .dds-spinner {
+  position: absolute;
+  inset: 0;
+  margin: auto;
 }
 
 /* variants ---------------------------------------------------------------- */
@@ -166,6 +193,25 @@
   }
 }
 
+/* Forced colors repaint every text color, transparent included, so the
+ * hidden label would come back on top of the spinner. A loading button opts
+ * out and paints itself with system colors: the face of a button, the
+ * disabled border, and the spinner in button text. No transition: opted out,
+ * the background would fade from the brand color it no longer forces. */
+@media (forced-colors: active) {
+  .dds-btn[aria-busy="true"] {
+    forced-color-adjust: none;
+    background-color: ButtonFace;
+    border-color: GrayText;
+    color: ButtonText;
+    transition: none;
+  }
+  .dds-btn[aria-busy="true"] > .dds-spinner {
+    forced-color-adjust: none;
+    color: ButtonText;
+  }
+}
+
 /* IconButton — a Button whose only content is an icon (spec §4.3 v1 inventory).
  * Same state set and sizes as .dds-btn (32/40/48 from the spacing scale) so an
  * icon button never lands a few px off the text button next to it — the row
@@ -206,6 +252,15 @@
   cursor: not-allowed;
 }
 
+/* Loading: the framework IconButtons swap the icon for a .dds-spinner, which
+ * the fixed box already centres. Same rule as .dds-btn (D-043): not dimmed,
+ * because a 0.45 spinner falls below 3:1 (danger is about 2.3:1). */
+.dds-iconbtn[aria-busy="true"] {
+  opacity: 1;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 /* variants ---------------------------------------------------------------- */
 
 .dds-iconbtn--secondary {
@@ -467,6 +522,63 @@
 .dds-choice[data-disabled] {opacity:.45;}
 @media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
 
+/* Ark DatePicker interaction with DDS visual tokens. */
+.dds-date-picker-control {display:flex;align-items:stretch;gap:var(--dds-space-8);}
+.dds-date-picker-control input {min-width:0;}
+.dds-date-picker-control .dds-btn {flex-shrink:0;min-width:calc(var(--dds-space-40) + var(--dds-space-4));padding-inline:calc(var(--dds-space-8) + var(--dds-space-2));}
+.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);}
+.dds-date-picker-content {width:calc(var(--dds-space-40) * 8);max-width:calc(100vw - var(--dds-space-32));max-height:min(calc(100dvh - var(--dds-space-32)),var(--available-height,100dvh));overflow:auto;box-sizing:border-box;padding:var(--dds-space-16);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-date-picker-header {display:flex;align-items:center;justify-content:space-between;gap:var(--dds-space-12);font-weight:600;margin-bottom:var(--dds-space-12);}
+.dds-date-picker-table {width:100%;border-collapse:collapse;table-layout:fixed;}
+.dds-date-picker-table th {font-size:var(--dds-space-12);font-weight:500;color:var(--dds-color-text-secondary);height:var(--dds-space-32);}
+.dds-date-picker-table td {padding:0;text-align:center;}
+.dds-date-picker-table [data-part="table-cell-trigger"] {display:flex;align-items:center;justify-content:center;width:100%;height:var(--dds-space-40);border:0;border-radius:var(--dds-radius-sm);font:inherit;color:inherit;background:transparent;cursor:pointer;}
+.dds-date-picker-table [data-part="table-cell-trigger"]:hover {background:var(--dds-color-bg-brand-subtle);}
+.dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
+.dds-date-picker-table [data-part="table-cell-trigger"][data-selected] {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);}
+.dds-date-picker-table [data-today]:not([data-selected]) {text-decoration:underline;text-underline-offset:var(--dds-space-4);}
+.dds-date-picker-content :focus-visible {outline:var(--dds-space-2) solid var(--dds-color-text-brand);outline-offset:var(--dds-space-2);}
+.dds-date-picker-footer {display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--dds-space-12);margin-top:var(--dds-space-12);padding-top:var(--dds-space-12);border-top:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);}
+
+/* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
+.dds-date-picker-control > input,.dds-date-range-box {box-sizing:border-box;flex:1;min-inline-size:0;block-size:var(--dds-space-40);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);font-family:inherit;font-size:var(--dds-typo-body-2-font-size);font-variant-numeric:tabular-nums;}
+.dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
+.dds-date-picker-control > input:focus-visible,.dds-date-range-box:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
+.dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
+.dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
+.dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
+.dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
+.dds-date-range-box[hidden] {display:none;}
+.dds-date-range-input {flex:1;inline-size:100%;min-inline-size:0;block-size:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;outline:none;}
+.dds-date-range-input:disabled {cursor:not-allowed;}
+.dds-date-range-separator {flex:none;color:var(--dds-color-text-secondary);}
+.dds-field__error {font-size:var(--dds-typo-caption-font-size);line-height:var(--dds-typo-caption-line-height);color:var(--dds-color-status-danger);}
+@media (pointer:coarse) {.dds-date-picker-control > input,.dds-date-range-box {min-block-size:calc(var(--dds-space-40) + var(--dds-space-4));}}
+
+/* Range selection: ends filled, days between tinted, hover previews the end being chosen. */
+.dds-date-picker-table [data-part="table-cell-trigger"][data-in-range] {background:var(--dds-color-bg-brand-subtle);color:var(--dds-color-text-primary);border-radius:0;}
+.dds-date-picker-table [data-part="table-cell-trigger"]:is([data-range-start],[data-range-end]) {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);border-radius:var(--dds-radius-sm);}
+.dds-date-picker-table [data-part="table-cell-trigger"][data-hover-range-end]:not([data-range-start]) {box-shadow:inset 0 0 0 var(--dds-space-2) var(--dds-color-bg-brand);border-radius:var(--dds-radius-sm);}
+.dds-date-picker-presets {display:flex;flex-wrap:wrap;gap:var(--dds-space-8);flex:1 1 100%;}
+.dds-date-picker-presets[hidden] {display:none;}
+.dds-date-picker-footer > [data-part="clear-trigger"] {margin-inline-start:auto;}
+/* Days and months outside min/max read as unavailable, not as ordinary choices. */
+.dds-date-picker-table [data-part="table-cell-trigger"][data-disabled] {opacity:.45;cursor:not-allowed;background:transparent;}
+
+/* Month grid (MonthPicker): 3 columns × 4 rows, year paged in the header. */
+.dds-date-picker-year {font-variant-numeric:tabular-nums;}
+.dds-date-picker-table--months td {padding:var(--dds-space-4);}
+.dds-date-picker-table--months [data-part="table-cell-trigger"] {height:var(--dds-space-40);}
+
+/* Standalone Calendar shares the DatePicker view without popup positioning. */
+.dds-calendar {display:block;}
+.dds-date-picker--hidden > .dds-field__label {position:absolute;width:calc(var(--dds-space-2) / 2);height:calc(var(--dds-space-2) / 2);overflow:hidden;clip-path:inset(50%);}
+.dds-date-picker--inside {position:relative;}
+.dds-date-picker--inside > .dds-field__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:calc(var(--dds-space-16) + var(--dds-space-2));z-index:1;pointer-events:none;}
+.dds-date-picker--inside:focus-within > .dds-field__label,.dds-date-picker--inside[data-filled] > .dds-field__label {inset-block-start:var(--dds-space-2);font-size:var(--dds-typo-caption-font-size);}
+.dds-date-picker--inside .dds-date-picker-control input {height:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
+.dds-date-picker--inside:not(:focus-within):not([data-filled]) input::placeholder {color:transparent;}
+
 /* TimePicker: the Combobox structure from choice.css (same 40px control, list
  * and focus), with fixed-width digits and a clock button instead of the caret. */
 .dds-time-picker .dds-choice-input,.dds-time-picker .dds-choice-item {font-variant-numeric:tabular-nums;}
@@ -1129,9 +1241,23 @@
   }
 }
 
+/* base.css stops every dds- animation after one 0.01ms run under reduced
+ * motion. The :root prefix ties its specificity and this file loads after
+ * base.css, so the spinner keeps turning, at half speed, instead of freezing. */
 @media (prefers-reduced-motion: reduce) {
-  .dds-spinner {
+  :root .dds-spinner {
     animation-duration: 1600ms;
+    animation-iteration-count: infinite;
+  }
+}
+
+/* Forced colors repaint the transparent top border too, which closes the gap
+ * and leaves a ring that looks still. Opt out and paint it in the system text
+ * color (a loading button sets ButtonText instead, button.css). */
+@media (forced-colors: active) {
+  .dds-spinner {
+    forced-color-adjust: none;
+    color: CanvasText;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devslab/dds-css",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "description": "DDS CSS component layer — class-based, framework-neutral, semantic-token-only (spec §4.3 v1 inventory, 20 components)",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",