@devslab/dds-css 0.25.1 → 0.26.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/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 {
@@ -1129,9 +1184,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.26.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",