@devslab/dds-solid 0.25.1 → 0.27.0

package/README.ko.md

@@ -26,6 +26,12 @@ DDS가 공개 API와 시각 토큰을 소유한다. 기존 import와 콜백 값
 포인터·포커스 상호작용 중과 브라우저 페이지가 비활성일 때는 알림 타이머가
 멈춘다. duration이 0 이하이면 명시적으로 닫을 때까지 유지한다.
 
+## Button loading
+
+`loading`은 버튼의 크기와 접근 가능한 이름을 바꾸지 않는다. 라벨은 지우지 않고 숨기며
+스피너를 그 위에 겹쳐 그리므로, 옆 컨트롤이 밀리지 않고 줄바꿈된 라벨도 다시 접히지
+않는다(D-043). 진행 중에도 라벨은 그대로 둔다. 숨긴 글자가 여전히 폭을 정한다.
+
 ## createPendingAction
 
 버튼이 여러 개인 화면은 어느 버튼이 작업을 시작했는지 알아야 한다. 모든 버튼에

package/README.md

@@ -25,6 +25,12 @@ same. See [the migration guide](../../docs/ark-migration.md) for integration det
 pointer/focus interaction and when the browser page is idle. A non-positive duration
 keeps the toast until dismissed.
 
+## Button loading
+
+`loading` keeps the button's size and accessible name: the label is hidden, not removed, and the
+spinner is drawn over it, so the controls beside it do not move and a wrapped label does not wrap
+again (D-043). Keep the label the same while loading; the hidden text still sets the width.
+
 ## createPendingAction
 
 A screen with several buttons needs to know which one started the work. Pass one shared flag

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devslab/dds-solid",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "description": "Accessible SolidJS primitives for the DevsLab Design System",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -134,9 +134,9 @@
   },
   "dependencies": {
     "@ark-ui/solid": "5.39.3",
-    "@devslab/dds-css": "0.25.1",
-    "@devslab/dds-icons": "0.25.1",
-    "@devslab/dds-tokens": "0.25.1",
+    "@devslab/dds-css": "0.27.0",
+    "@devslab/dds-icons": "0.27.0",
+    "@devslab/dds-tokens": "0.27.0",
     "@tanstack/solid-virtual": "3.13.48",
     "@zag-js/aria-hidden": "1.45.0",
     "@zag-js/focus-trap": "1.45.0"

package/styles.css

@@ -17,59 +17,4 @@
   opacity: var(--opacity);
 }
 
-/* Ark DatePicker interaction with DDS visual tokens. */
-.dds-date-picker-control {display:flex;align-items:stretch;gap:8px;}
-.dds-date-picker-control input {min-width:0;}
-.dds-date-picker-control .dds-btn {flex-shrink:0;min-width:44px;padding-inline:10px;}
-.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);}
-.dds-date-picker-content {width:320px;max-width:calc(100vw - 32px);max-height:min(calc(100dvh - 32px),var(--available-height,100dvh));overflow:auto;box-sizing:border-box;padding:16px;background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:1px 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:12px;font-weight:600;margin-bottom:12px;}
-.dds-date-picker-table {width:100%;border-collapse:collapse;table-layout:fixed;}
-.dds-date-picker-table th {font-size:12px;font-weight:500;color:var(--dds-color-text-secondary);height:32px;}
-.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:40px;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:4px;}
-.dds-date-picker-content :focus-visible {outline:2px solid var(--dds-color-text-brand);outline-offset:2px;}
-.dds-date-picker-footer {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--dds-color-border-default);}
-
-/* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same 40px 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:1px 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:44px;}}
-
-/* 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 2px 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:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
-.dds-date-picker--inside {position:relative;}
-.dds-date-picker--inside > .dds-field__label {position:absolute;inset-inline-start:12px;inset-block-start:18px;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:2px;font-size:var(--dds-typo-caption-font-size);}
-.dds-date-picker--inside .dds-date-picker-control input {height:56px;padding-block:20px 4px;}
-.dds-date-picker--inside:not(:focus-within):not([data-filled]) input::placeholder {color:transparent;}
+/* Calendar visuals are shared by dds-css/date-picker.css (React, Solid and Vue). */