@dev-dga/css 0.8.2 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/components/file-upload.css +1 -1
- package/dist/components/file-upload.css.map +1 -1
- package/dist/components/input-otp.css +1 -1
- package/dist/components/input-otp.css.map +1 -1
- package/dist/components/modal.css +1 -1
- package/dist/components/modal.css.map +1 -1
- package/dist/components/number-input.css +1 -1
- package/dist/components/number-input.css.map +1 -1
- package/dist/components/sidebar.css +1 -1
- package/dist/components/sidebar.css.map +1 -1
- package/dist/components/skeleton.css +1 -1
- package/dist/components/skeleton.css.map +1 -1
- package/dist/components/tag-input.css +1 -1
- package/dist/components/tag-input.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @dev-dga/css
|
|
2
2
|
|
|
3
|
+
## 0.9.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- **Sidebar — definite full height (fixes footer detach + nav scroll).** `.ddga-sidebar-wrapper` `min-block-size: 100svh` → **`block-size: 100svh`**. `0.8.3` changed `100%` → `min-block-size: 100svh`, but a _minimum_ leaves the height indefinite, so the aside's `block-size: 100%` still resolved to content height — the footer detached from the viewport bottom in a no-height app shell and a long nav couldn't scroll internally. A _definite_ `block-size` makes the footer stick **and** the nav scroll inside `__content` with zero consumer config. Escape hatch unchanged: set a definite `height`/`block-size` on the provider for an embedded/boxed shell.
|
|
8
|
+
- **Sidebar — collapsed-rail consistency.** `__header`/`__footer` now drop their inline padding when collapsed to the icon rail (matching `__content`/`__group`), so a footer button fills the rail and centers its icon exactly like the main-nav buttons.
|
|
9
|
+
- **Sidebar — `.ddga-sidebar-inset--scrollable`.** New modifier (`min-block-size: 0; overflow-y: auto`) backing the React `<SidebarInset scrollable>` opt-in: the inset becomes its own scroll region with no consumer overflow CSS.
|
|
10
|
+
- **Modal — `.ddga-modal__body`.** New scrollable middle slot (`flex: 1 1 auto; min-block-size: 0; overflow-y: auto`) backing `<ModalBody>` — tall content scrolls internally instead of clipping. Also removes a redundant footer padding-reset rule.
|
|
11
|
+
- **Skeleton — round circles.** `.ddga-skeleton--circle` now uses `aspect-ratio: 1` instead of a hardcoded `40×40`, so passing only `width` stays round instead of producing an oval; an explicit `height` still overrides.
|
|
12
|
+
- **Consistency — disabled opacity.** Normalized the three outliers (`number-input`, `file-upload`, `input-otp`) from `0.6` to the library-standard `0.5`. Released in lockstep with `@dev-dga/react` and `@dev-dga/tokens`.
|
|
13
|
+
|
|
14
|
+
## 0.8.3
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- **Sidebar — self-sufficient full height.** `.ddga-sidebar-wrapper` `min-block-size: 100%` → **`100svh`**, so the app shell fills the viewport without the consumer building an `html → body → root` height chain (the old `100%` silently collapsed the sidebar to content height). `svh` (not `dvh`) avoids reflow as mobile browser chrome shows/hides; override `min-block-size` for an embedded/boxed sidebar. Released in lockstep with `@dev-dga/react@0.8.3` and `@dev-dga/tokens@0.8.3`.
|
|
19
|
+
|
|
3
20
|
## 0.8.2
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-file-upload{color:var(--ddga-text-primary)}.ddga-file-upload__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-file-upload__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-file-upload__dropzone{justify-content:center;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-6) var(--ddga-space-4);border:1px dashed var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);text-align:center;cursor:pointer;flex-direction:column;transition:border-color .15s,background-color .15s,box-shadow .15s;display:flex}.ddga-file-upload__dropzone:hover{border-color:var(--ddga-color-ring);background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-file-upload__dropzone[data-dragging]{border-color:var(--ddga-color-primary);background-color:var(--ddga-color-muted);box-shadow:0 0 0 1px var(--ddga-color-primary);border-style:solid}.ddga-file-upload__dropzone--error{border-color:var(--ddga-color-error)}.ddga-file-upload__dropzone--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-file-upload__dropzone[data-disabled]{cursor:not-allowed;opacity:.
|
|
1
|
+
@layer ddga-components{.ddga-file-upload{color:var(--ddga-text-primary)}.ddga-file-upload__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-file-upload__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-file-upload__dropzone{justify-content:center;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-6) var(--ddga-space-4);border:1px dashed var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);text-align:center;cursor:pointer;flex-direction:column;transition:border-color .15s,background-color .15s,box-shadow .15s;display:flex}.ddga-file-upload__dropzone:hover{border-color:var(--ddga-color-ring);background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-file-upload__dropzone[data-dragging]{border-color:var(--ddga-color-primary);background-color:var(--ddga-color-muted);box-shadow:0 0 0 1px var(--ddga-color-primary);border-style:solid}.ddga-file-upload__dropzone--error{border-color:var(--ddga-color-error)}.ddga-file-upload__dropzone--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-file-upload__dropzone[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone[data-disabled]:hover{border-color:var(--ddga-color-input);border-style:dashed}.ddga-file-upload__icon{color:var(--ddga-color-muted-foreground);font-size:1.5rem}.ddga-file-upload__hint{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary)}.ddga-file-upload__input{clip:rect(0 0 0 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ddga-file-upload__list{gap:var(--ddga-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ddga-file-upload__item{align-items:center;gap:var(--ddga-space-3);padding:var(--ddga-space-2) var(--ddga-space-3);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);display:flex}.ddga-file-upload__item-icon{color:var(--ddga-color-muted-foreground);flex:none;font-size:1.125rem;display:inline-flex}.ddga-file-upload__item[data-status=success] .ddga-file-upload__item-icon{color:var(--ddga-color-success)}.ddga-file-upload__item[data-status=error] .ddga-file-upload__item-icon{color:var(--ddga-color-error)}.ddga-file-upload__item-main{gap:var(--ddga-space-1);flex-direction:column;flex:auto;min-inline-size:0;display:flex}.ddga-file-upload__item-head{justify-content:space-between;align-items:baseline;gap:var(--ddga-space-3);display:flex}.ddga-file-upload__item-name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--ddga-font-size-sm);color:var(--ddga-text-primary);overflow:hidden}.ddga-file-upload__item-meta{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-secondary);font-variant-numeric:tabular-nums;flex:none}.ddga-file-upload__item-error{font-size:var(--ddga-font-size-xs);color:var(--ddga-color-error)}.ddga-file-upload__item-remove{flex:none}@media (forced-colors:active){.ddga-file-upload__dropzone:focus-within,.ddga-file-upload__dropzone[data-dragging]{outline-offset:2px;outline:2px solid highlight}}}
|
|
2
2
|
/*# sourceMappingURL=file-upload.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAIE,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA,yCASA,8BACE","sources":["src/components/file-upload.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only FileUpload-specific styles live here. */\n\n .ddga-file-upload {\n color: var(--ddga-text-primary);\n }\n\n /* ─── Label ─── */\n\n .ddga-file-upload__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-file-upload__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Drop zone ─── */\n\n .ddga-file-upload__dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6) var(--ddga-space-4);\n border: 1px dashed var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n text-align: center;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-file-upload__dropzone:hover {\n border-color: var(--ddga-color-ring);\n background-color: var(--ddga-color-muted);\n }\n\n /* Focus ring driven by the (visually hidden) input inside the zone. */\n .ddga-file-upload__dropzone:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Active drag-over state. */\n .ddga-file-upload__dropzone[data-dragging] {\n border-color: var(--ddga-color-primary);\n border-style: solid;\n background-color: var(--ddga-color-muted);\n box-shadow: 0 0 0 1px var(--ddga-color-primary);\n }\n\n .ddga-file-upload__dropzone--error {\n border-color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone[data-disabled] {\n cursor: not-allowed;\n opacity: 0.
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAIE,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA,yCASA,8BACE","sources":["src/components/file-upload.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only FileUpload-specific styles live here. */\n\n .ddga-file-upload {\n color: var(--ddga-text-primary);\n }\n\n /* ─── Label ─── */\n\n .ddga-file-upload__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-file-upload__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Drop zone ─── */\n\n .ddga-file-upload__dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6) var(--ddga-space-4);\n border: 1px dashed var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n text-align: center;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-file-upload__dropzone:hover {\n border-color: var(--ddga-color-ring);\n background-color: var(--ddga-color-muted);\n }\n\n /* Focus ring driven by the (visually hidden) input inside the zone. */\n .ddga-file-upload__dropzone:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Active drag-over state. */\n .ddga-file-upload__dropzone[data-dragging] {\n border-color: var(--ddga-color-primary);\n border-style: solid;\n background-color: var(--ddga-color-muted);\n box-shadow: 0 0 0 1px var(--ddga-color-primary);\n }\n\n .ddga-file-upload__dropzone--error {\n border-color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-file-upload__dropzone[data-disabled]:hover {\n border-color: var(--ddga-color-input);\n border-style: dashed;\n }\n\n .ddga-file-upload__icon {\n font-size: 1.5rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__hint {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n }\n\n /* Visually hidden, but kept focusable so keyboard users can tab to it and\n press Space/Enter to open the picker. (Not display:none / tabindex=-1.) */\n .ddga-file-upload__input {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── File list ─── */\n\n .ddga-file-upload__list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .ddga-file-upload__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n padding: var(--ddga-space-2) var(--ddga-space-3);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n }\n\n .ddga-file-upload__item-icon {\n display: inline-flex;\n flex: none;\n font-size: 1.125rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__item[data-status='success'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-success);\n }\n\n .ddga-file-upload__item[data-status='error'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-main {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n .ddga-file-upload__item-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n }\n\n .ddga-file-upload__item-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__item-meta {\n flex: none;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-secondary);\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-file-upload__item-error {\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-remove {\n flex: none;\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n /* The focus + drag-active indicators are box-shadow rings, which forced-colors\n neutralizes — restore them as a system-colored outline so keyboard focus and\n the active drop target stay visible. */\n @media (forced-colors: active) {\n .ddga-file-upload__dropzone:focus-within,\n .ddga-file-upload__dropzone[data-dragging] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-input-otp__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-input-otp__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-input-otp{color:var(--ddga-text-primary);display:inline-flex;position:relative}.ddga-input-otp__input{color:#0000;caret-color:#0000;cursor:text;-webkit-user-select:none;user-select:none;z-index:1;background:0 0;border:0;block-size:100%;inline-size:100%;margin:0;padding:0;position:absolute;inset:0}.ddga-input-otp__input:focus{outline:none}.ddga-input-otp__input:disabled{cursor:not-allowed}.ddga-input-otp__row,.ddga-input-otp__group{align-items:center;gap:.5rem;display:flex}.ddga-input-otp__slot{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);color:var(--ddga-text-primary);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;transition:border-color .15s,box-shadow .15s;display:flex;position:relative}.ddga-input-otp__slot[data-active]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);z-index:1}.ddga-input-otp--sm .ddga-input-otp__slot{block-size:2rem;inline-size:2rem;font-size:var(--ddga-font-size-base)}.ddga-input-otp--md .ddga-input-otp__slot{block-size:2.75rem;inline-size:2.75rem;font-size:var(--ddga-font-size-lg)}.ddga-input-otp--lg .ddga-input-otp__slot{block-size:3.25rem;inline-size:3.25rem;font-size:var(--ddga-font-size-xl)}.ddga-input-otp__caret{background-color:var(--ddga-text-primary);block-size:1.125em;inline-size:1px;animation:1s step-end infinite ddga-input-otp-caret;position:absolute}@keyframes ddga-input-otp-caret{0%,to{opacity:1}50%{opacity:0}}.ddga-input-otp__separator{color:var(--ddga-text-tertiary);align-items:center;display:flex}.ddga-input-otp__separator-dash{background-color:var(--ddga-color-border);border-radius:9999px;block-size:2px;inline-size:.75rem}.ddga-input-otp--error .ddga-input-otp__slot{border-color:var(--ddga-color-error)}.ddga-input-otp--error .ddga-input-otp__slot[data-active]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-input-otp:has(input:disabled){cursor:not-allowed;opacity:.
|
|
1
|
+
@layer ddga-components{.ddga-input-otp__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-input-otp__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-input-otp{color:var(--ddga-text-primary);display:inline-flex;position:relative}.ddga-input-otp__input{color:#0000;caret-color:#0000;cursor:text;-webkit-user-select:none;user-select:none;z-index:1;background:0 0;border:0;block-size:100%;inline-size:100%;margin:0;padding:0;position:absolute;inset:0}.ddga-input-otp__input:focus{outline:none}.ddga-input-otp__input:disabled{cursor:not-allowed}.ddga-input-otp__row,.ddga-input-otp__group{align-items:center;gap:.5rem;display:flex}.ddga-input-otp__slot{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);color:var(--ddga-text-primary);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;transition:border-color .15s,box-shadow .15s;display:flex;position:relative}.ddga-input-otp__slot[data-active]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);z-index:1}.ddga-input-otp--sm .ddga-input-otp__slot{block-size:2rem;inline-size:2rem;font-size:var(--ddga-font-size-base)}.ddga-input-otp--md .ddga-input-otp__slot{block-size:2.75rem;inline-size:2.75rem;font-size:var(--ddga-font-size-lg)}.ddga-input-otp--lg .ddga-input-otp__slot{block-size:3.25rem;inline-size:3.25rem;font-size:var(--ddga-font-size-xl)}.ddga-input-otp__caret{background-color:var(--ddga-text-primary);block-size:1.125em;inline-size:1px;animation:1s step-end infinite ddga-input-otp-caret;position:absolute}@keyframes ddga-input-otp-caret{0%,to{opacity:1}50%{opacity:0}}.ddga-input-otp__separator{color:var(--ddga-text-tertiary);align-items:center;display:flex}.ddga-input-otp__separator-dash{background-color:var(--ddga-color-border);border-radius:9999px;block-size:2px;inline-size:.75rem}.ddga-input-otp--error .ddga-input-otp__slot{border-color:var(--ddga-color-error)}.ddga-input-otp--error .ddga-input-otp__slot[data-active]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-input-otp:has(input:disabled){cursor:not-allowed;opacity:.5}.ddga-input-otp:has(input:disabled) .ddga-input-otp__slot{background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-input-otp__slot{transition:none}.ddga-input-otp__caret{animation:none}}@media (forced-colors:active){.ddga-input-otp__slot{border:1px solid canvastext}.ddga-input-otp__slot[data-active]{outline-offset:1px;outline:2px solid highlight}.ddga-input-otp__caret{background-color:canvastext}}}
|
|
2
2
|
/*# sourceMappingURL=input-otp.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAQE,oJAOA,oFAOA,qFAQA,2NAsBA,0CAIA,mDAMA,sFAcA,wUAgBA,6HAQA,gHAKA,oHAKA,oHAQA,0KAQA,+DAYA,2FAMA,iIASA,kFAGA,4IAOA,kEAIA,mGAMA,uCACE,sCAGA,uCAOF,8BACE,kDAGA,kFAIA","sources":["src/components/input-otp.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Structure: a single real <input> (.ddga-input-otp__input)\n overlays the container transparently and owns focus/typing/paste/autofill;\n the slot row (.ddga-input-otp__row) is the decorative, aria-hidden display. */\n\n /* ─── Label ─── */\n\n .ddga-input-otp__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-input-otp__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Container (sizes to the slot row; anchors the overlay input) ─── */\n\n .ddga-input-otp {\n position: relative;\n display: inline-flex;\n color: var(--ddga-text-primary);\n }\n\n /* ─── Overlay input (the real, transparent control) ─── */\n\n .ddga-input-otp__input {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n /* Transparent text + caret: the slots render the value, not the input. */\n color: transparent;\n background: transparent;\n caret-color: transparent;\n cursor: text;\n /* Suppress native selection UI — on iOS/Android the selection highlight +\n handles render over the transparent text and break the slot illusion.\n Typing and programmatic caret moves are unaffected. */\n -webkit-user-select: none;\n user-select: none;\n /* On top of the slots so a click anywhere focuses it. */\n z-index: 1;\n }\n\n .ddga-input-otp__input:focus {\n outline: none;\n }\n\n .ddga-input-otp__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Slot row + groups (forced LTR in the markup) ─── */\n\n .ddga-input-otp__row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .ddga-input-otp__group {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n /* ─── Slot ─── */\n\n .ddga-input-otp__slot {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n font-variant-numeric: tabular-nums;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* The active slot (focused caret position) gets the ring. */\n .ddga-input-otp__slot[data-active] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n z-index: 1;\n }\n\n /* ─── Sizes ─── */\n\n .ddga-input-otp--sm .ddga-input-otp__slot {\n inline-size: 2rem;\n block-size: 2rem;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input-otp--md .ddga-input-otp__slot {\n inline-size: 2.75rem;\n block-size: 2.75rem;\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-input-otp--lg .ddga-input-otp__slot {\n inline-size: 3.25rem;\n block-size: 3.25rem;\n font-size: var(--ddga-font-size-xl);\n }\n\n /* ─── Fake caret (active, empty slot) ─── */\n\n .ddga-input-otp__caret {\n position: absolute;\n inline-size: 1px;\n block-size: 1.125em;\n background-color: var(--ddga-text-primary);\n animation: ddga-input-otp-caret 1s step-end infinite;\n }\n\n @keyframes ddga-input-otp-caret {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* ─── Separator (between groups) ─── */\n\n .ddga-input-otp__separator {\n display: flex;\n align-items: center;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-input-otp__separator-dash {\n inline-size: 0.75rem;\n block-size: 2px;\n background-color: var(--ddga-color-border);\n border-radius: 9999px;\n }\n\n /* ─── Error ─── */\n\n .ddga-input-otp--error .ddga-input-otp__slot {\n border-color: var(--ddga-color-error);\n }\n .ddga-input-otp--error .ddga-input-otp__slot[data-active] {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-input-otp:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAQE,oJAOA,oFAOA,qFAQA,2NAsBA,0CAIA,mDAMA,sFAcA,wUAgBA,6HAQA,gHAKA,oHAKA,oHAQA,0KAQA,+DAYA,2FAMA,iIASA,kFAGA,4IAOA,kEAIA,mGAMA,uCACE,sCAGA,uCAOF,8BACE,kDAGA,kFAIA","sources":["src/components/input-otp.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Structure: a single real <input> (.ddga-input-otp__input)\n overlays the container transparently and owns focus/typing/paste/autofill;\n the slot row (.ddga-input-otp__row) is the decorative, aria-hidden display. */\n\n /* ─── Label ─── */\n\n .ddga-input-otp__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-input-otp__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Container (sizes to the slot row; anchors the overlay input) ─── */\n\n .ddga-input-otp {\n position: relative;\n display: inline-flex;\n color: var(--ddga-text-primary);\n }\n\n /* ─── Overlay input (the real, transparent control) ─── */\n\n .ddga-input-otp__input {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n /* Transparent text + caret: the slots render the value, not the input. */\n color: transparent;\n background: transparent;\n caret-color: transparent;\n cursor: text;\n /* Suppress native selection UI — on iOS/Android the selection highlight +\n handles render over the transparent text and break the slot illusion.\n Typing and programmatic caret moves are unaffected. */\n -webkit-user-select: none;\n user-select: none;\n /* On top of the slots so a click anywhere focuses it. */\n z-index: 1;\n }\n\n .ddga-input-otp__input:focus {\n outline: none;\n }\n\n .ddga-input-otp__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Slot row + groups (forced LTR in the markup) ─── */\n\n .ddga-input-otp__row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .ddga-input-otp__group {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n /* ─── Slot ─── */\n\n .ddga-input-otp__slot {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n font-variant-numeric: tabular-nums;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* The active slot (focused caret position) gets the ring. */\n .ddga-input-otp__slot[data-active] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n z-index: 1;\n }\n\n /* ─── Sizes ─── */\n\n .ddga-input-otp--sm .ddga-input-otp__slot {\n inline-size: 2rem;\n block-size: 2rem;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input-otp--md .ddga-input-otp__slot {\n inline-size: 2.75rem;\n block-size: 2.75rem;\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-input-otp--lg .ddga-input-otp__slot {\n inline-size: 3.25rem;\n block-size: 3.25rem;\n font-size: var(--ddga-font-size-xl);\n }\n\n /* ─── Fake caret (active, empty slot) ─── */\n\n .ddga-input-otp__caret {\n position: absolute;\n inline-size: 1px;\n block-size: 1.125em;\n background-color: var(--ddga-text-primary);\n animation: ddga-input-otp-caret 1s step-end infinite;\n }\n\n @keyframes ddga-input-otp-caret {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* ─── Separator (between groups) ─── */\n\n .ddga-input-otp__separator {\n display: flex;\n align-items: center;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-input-otp__separator-dash {\n inline-size: 0.75rem;\n block-size: 2px;\n background-color: var(--ddga-color-border);\n border-radius: 9999px;\n }\n\n /* ─── Error ─── */\n\n .ddga-input-otp--error .ddga-input-otp__slot {\n border-color: var(--ddga-color-error);\n }\n .ddga-input-otp--error .ddga-input-otp__slot[data-active] {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-input-otp:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .ddga-input-otp:has(input:disabled) .ddga-input-otp__slot {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-input-otp__slot {\n transition: none;\n }\n .ddga-input-otp__caret {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-input-otp__slot {\n border: 1px solid CanvasText;\n }\n .ddga-input-otp__slot[data-active] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-input-otp__caret {\n background-color: CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-modal__overlay{z-index:60;background-color:#00000080;animation-duration:.15s;animation-timing-function:ease;position:fixed;inset:0}.ddga-modal{z-index:61;background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);box-shadow:var(--ddga-shadow-lg);flex-direction:column;max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);animation-duration:.18s;animation-timing-function:ease;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ddga-modal--sm{max-inline-size:360px}.ddga-modal--md{max-inline-size:480px}.ddga-modal--lg{max-inline-size:640px}.ddga-modal--xl{max-inline-size:800px}.ddga-modal--full{block-size:calc(100vh - 2rem);max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);max-inline-size:calc(100vw - 2rem)}.ddga-modal__header{gap:var(--ddga-space-1);padding:var(--ddga-space-5);flex-direction:column;padding-block-end:var(--ddga-space-3);display:flex}.ddga-modal__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-primary);margin:0;padding-inline-end:var(--ddga-space-8);line-height:1.4}.ddga-modal__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);margin:0;line-height:1.5}.ddga-
|
|
1
|
+
@layer ddga-components{.ddga-modal__overlay{z-index:60;background-color:#00000080;animation-duration:.15s;animation-timing-function:ease;position:fixed;inset:0}.ddga-modal{z-index:61;background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);box-shadow:var(--ddga-shadow-lg);flex-direction:column;max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);animation-duration:.18s;animation-timing-function:ease;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ddga-modal--sm{max-inline-size:360px}.ddga-modal--md{max-inline-size:480px}.ddga-modal--lg{max-inline-size:640px}.ddga-modal--xl{max-inline-size:800px}.ddga-modal--full{block-size:calc(100vh - 2rem);max-block-size:calc(100vh - 2rem);inline-size:calc(100vw - 2rem);max-inline-size:calc(100vw - 2rem)}.ddga-modal__header{gap:var(--ddga-space-1);padding:var(--ddga-space-5);flex-direction:column;padding-block-end:var(--ddga-space-3);display:flex}.ddga-modal__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-primary);margin:0;padding-inline-end:var(--ddga-space-8);line-height:1.4}.ddga-modal__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);margin:0;line-height:1.5}.ddga-modal__body{min-block-size:0;padding-inline:var(--ddga-space-5);flex:auto;overflow-y:auto}.ddga-modal__header~*{padding-inline:var(--ddga-space-5)}.ddga-modal__footer{justify-content:flex-end;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-5);border-block-start:1px solid var(--ddga-color-border);margin-block-start:auto;padding-block-start:var(--ddga-space-4);display:flex}.ddga-modal__close{block-size:2rem;inline-size:2rem;color:var(--ddga-text-secondary);cursor:pointer;border-radius:var(--ddga-radius-sm);background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-3);inset-inline-end:var(--ddga-space-3)}.ddga-modal__close>svg{block-size:1rem;inline-size:1rem}.ddga-modal__close:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-modal__close:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-modal__overlay[data-state=open]{animation-name:ddga-modal-overlay-in}.ddga-modal__overlay[data-state=closed]{animation-name:ddga-modal-overlay-out}.ddga-modal[data-state=open]{animation-name:ddga-modal-in}.ddga-modal[data-state=closed]{animation-name:ddga-modal-out}@keyframes ddga-modal-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes ddga-modal-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes ddga-modal-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes ddga-modal-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.96)}}@media (prefers-reduced-motion:reduce){.ddga-modal,.ddga-modal__overlay{animation-duration:0s}}@media (forced-colors:active){.ddga-modal{border-color:canvastext}.ddga-modal__close:focus-visible{box-shadow:none;outline:2px solid highlight}}}
|
|
2
2
|
/*# sourceMappingURL=modal.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAGE,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAGE,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAYA,gGAWA,yDAIA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA","sources":["src/components/modal.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Overlay (backdrop) ─── */\n\n .ddga-modal__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Above tooltips (50) but allow Toast (future) to sit higher if it uses\n 60+. Modal lives at 60 by convention. */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n /* ─── Content (the modal box) ─── */\n\n .ddga-modal {\n position: fixed;\n /* Use physical `top`/`left` (NOT inset-block/inline-start) for centering.\n Centering is symmetric across writing directions, but `inset-inline-start`\n flips to `right` in RTL while `transform: translateX(-50%)` stays\n physical — pairing them shifts the modal off-screen in RTL. The\n physical pair is the established centered-overlay pattern and is\n direction-correct because viewport-center doesn't care about `dir`. */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-lg);\n /* Keep the modal from spilling off small viewports. */\n max-block-size: calc(100vh - 2rem);\n inline-size: calc(100vw - 2rem);\n overflow: hidden;\n animation-duration: 180ms;\n animation-timing-function: ease;\n }\n\n /* RTL: in RTL the inline axis flips. `translate(-50%, -50%)` still centers\n correctly because translate is direction-agnostic. No override needed. */\n\n /* ─── Sizes (max-inline-size caps; `full` is the takeover) ─── */\n\n .ddga-modal--sm {\n max-inline-size: 360px;\n }\n .ddga-modal--md {\n max-inline-size: 480px;\n }\n .ddga-modal--lg {\n max-inline-size: 640px;\n }\n .ddga-modal--xl {\n max-inline-size: 800px;\n }\n .ddga-modal--full {\n /* Edge-to-edge with a small breathing margin. */\n max-inline-size: calc(100vw - 2rem);\n max-block-size: calc(100vh - 2rem);\n inline-size: calc(100vw - 2rem);\n block-size: calc(100vh - 2rem);\n }\n\n /* ─── Sections ─── */\n\n .ddga-modal__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-5);\n padding-block-end: var(--ddga-space-3);\n }\n\n .ddga-modal__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: var(--ddga-text-primary);\n /* Reserve room so the corner X never overlaps the title text. */\n padding-inline-end: var(--ddga-space-8);\n }\n\n .ddga-modal__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: var(--ddga-text-secondary);\n }\n\n /* Body — the opt-in scrollable middle region (mirrors DrawerBody): it grows\n to fill the space between a pinned header and footer and scrolls internally\n when content overflows, so a tall body never clips and the footer stays\n visible with zero consumer config. `min-block-size:0` lets it shrink below\n its content so the overflow engages. */\n .ddga-modal__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding-inline: var(--ddga-space-5);\n }\n\n /* Unwrapped content: consumers may still drop raw paragraphs/forms directly\n under ModalContent for short, non-scrolling bodies — this gives them the\n same inline padding without requiring ModalBody. (ModalFooter owns its own\n full padding, so it's unaffected by this inline-padding rule.) */\n .ddga-modal__header ~ * {\n padding-inline: var(--ddga-space-5);\n }\n\n .ddga-modal__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-5);\n padding-block-start: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-border);\n margin-block-start: auto;\n }\n\n /* ─── Corner close (X) ─── */\n\n .ddga-modal__close {\n position: absolute;\n inset-block-start: var(--ddga-space-3);\n inset-inline-end: var(--ddga-space-3);\n inline-size: 2rem;\n block-size: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n .ddga-modal__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-modal__close:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-modal__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-modal__overlay[data-state='open'] {\n animation-name: ddga-modal-overlay-in;\n }\n .ddga-modal__overlay[data-state='closed'] {\n animation-name: ddga-modal-overlay-out;\n }\n .ddga-modal[data-state='open'] {\n animation-name: ddga-modal-in;\n }\n .ddga-modal[data-state='closed'] {\n animation-name: ddga-modal-out;\n }\n\n @keyframes ddga-modal-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-modal-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes ddga-modal-in {\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n @keyframes ddga-modal-out {\n from {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n to {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.96);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-modal,\n .ddga-modal__overlay {\n animation-duration: 0ms;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-modal {\n border-color: CanvasText;\n }\n .ddga-modal__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-number-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-number-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-number-input{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);align-items:stretch;transition:border-color .15s,box-shadow .15s;display:flex;overflow:hidden}.ddga-number-input--sm{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-number-input--md{block-size:36px;font-size:var(--ddga-font-size-base)}.ddga-number-input--lg{block-size:40px;font-size:var(--ddga-font-size-lg)}.ddga-number-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;text-align:center;direction:ltr;unicode-bidi:plaintext;background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-number-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-number-input__step{background-color:var(--ddga-color-muted);inline-size:2.25rem;color:var(--ddga-text-primary);cursor:pointer;border:0;flex:none;justify-content:center;align-items:center;padding:0;font-size:1rem;transition:background-color .15s,opacity .15s;display:inline-flex}.ddga-number-input__step--decrement{border-inline-end:1px solid var(--ddga-color-input)}.ddga-number-input__step--increment{border-inline-start:1px solid var(--ddga-color-input)}.ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-color-secondary-hover)}.ddga-number-input__step:disabled{opacity:.45;cursor:not-allowed}.ddga-number-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-number-input--error{border-color:var(--ddga-color-error)}.ddga-number-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-number-input:has(.ddga-number-input__field:disabled){background-color:var(--ddga-color-muted);opacity:.
|
|
1
|
+
@layer ddga-components{.ddga-number-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-number-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-number-input{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);align-items:stretch;transition:border-color .15s,box-shadow .15s;display:flex;overflow:hidden}.ddga-number-input--sm{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-number-input--md{block-size:36px;font-size:var(--ddga-font-size-base)}.ddga-number-input--lg{block-size:40px;font-size:var(--ddga-font-size-lg)}.ddga-number-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;text-align:center;direction:ltr;unicode-bidi:plaintext;background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-number-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-number-input__step{background-color:var(--ddga-color-muted);inline-size:2.25rem;color:var(--ddga-text-primary);cursor:pointer;border:0;flex:none;justify-content:center;align-items:center;padding:0;font-size:1rem;transition:background-color .15s,opacity .15s;display:inline-flex}.ddga-number-input__step--decrement{border-inline-end:1px solid var(--ddga-color-input)}.ddga-number-input__step--increment{border-inline-start:1px solid var(--ddga-color-input)}.ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-color-secondary-hover)}.ddga-number-input__step:disabled{opacity:.45;cursor:not-allowed}.ddga-number-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-number-input--error{border-color:var(--ddga-color-error)}.ddga-number-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-number-input:has(.ddga-number-input__field:disabled){background-color:var(--ddga-color-muted);opacity:.5}@media (prefers-reduced-motion:reduce){.ddga-number-input,.ddga-number-input__step{transition:none}}@media (forced-colors:active){.ddga-number-input{border:1px solid canvastext}.ddga-number-input__step{color:buttontext;background-color:buttonface}.ddga-number-input:focus-within{outline-offset:1px;outline:2px solid highlight}}}
|
|
2
2
|
/*# sourceMappingURL=number-input.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAQE,uJAOA,uFAOA,4RAgBA,0EAIA,4EAIA,0EAOA,uMAgBA,0EAMA,4RAkBA,wFAGA,0FAIA,iGAIA,iEAOA,gHAOA,+DAGA,yHAOA,+GAOA,uCACE,6DAQF,8BACE,+CAGA,sEAIA","sources":["src/components/number-input.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only NumberInput-specific styles live here. Structure\n mirrors Input: a bordered control box owns border/focus/size/state; the\n − button, the field, and the + button sit inside it. */\n\n /* ─── Label ─── */\n\n .ddga-number-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-number-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered box) ─── */\n\n .ddga-number-input {\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n overflow: hidden;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-number-input--sm {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-number-input--md {\n block-size: 36px;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-number-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Field (the actual <input>) ─── */\n\n .ddga-number-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: center;\n outline: none;\n /* Keep digits Latin + LTR even inside an RTL form (DGA convention). */\n direction: ltr;\n unicode-bidi: plaintext;\n }\n\n .ddga-number-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── Stepper buttons (− / +) ─── */\n\n .ddga-number-input__step {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2.25rem;\n padding: 0;\n border: 0;\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n font-size: 1rem;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n opacity 150ms ease;\n }\n\n /* Logical dividers between the buttons and the field (RTL-safe). */\n .ddga-number-input__step--decrement {\n border-inline-end: 1px solid var(--ddga-color-input);\n }\n .ddga-number-input__step--increment {\n border-inline-start: 1px solid var(--ddga-color-input);\n }\n\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-secondary-hover);\n }\n\n .ddga-number-input__step:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-number-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-number-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-number-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n background-color: var(--ddga-color-muted);\n opacity: 0.
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAQE,uJAOA,uFAOA,4RAgBA,0EAIA,4EAIA,0EAOA,uMAgBA,0EAMA,4RAkBA,wFAGA,0FAIA,iGAIA,iEAOA,gHAOA,+DAGA,yHAOA,+GAOA,uCACE,6DAQF,8BACE,+CAGA,sEAIA","sources":["src/components/number-input.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only NumberInput-specific styles live here. Structure\n mirrors Input: a bordered control box owns border/focus/size/state; the\n − button, the field, and the + button sit inside it. */\n\n /* ─── Label ─── */\n\n .ddga-number-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-number-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered box) ─── */\n\n .ddga-number-input {\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n overflow: hidden;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-number-input--sm {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-number-input--md {\n block-size: 36px;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-number-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Field (the actual <input>) ─── */\n\n .ddga-number-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: center;\n outline: none;\n /* Keep digits Latin + LTR even inside an RTL form (DGA convention). */\n direction: ltr;\n unicode-bidi: plaintext;\n }\n\n .ddga-number-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── Stepper buttons (− / +) ─── */\n\n .ddga-number-input__step {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2.25rem;\n padding: 0;\n border: 0;\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n font-size: 1rem;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n opacity 150ms ease;\n }\n\n /* Logical dividers between the buttons and the field (RTL-safe). */\n .ddga-number-input__step--decrement {\n border-inline-end: 1px solid var(--ddga-color-input);\n }\n .ddga-number-input__step--increment {\n border-inline-start: 1px solid var(--ddga-color-input);\n }\n\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-secondary-hover);\n }\n\n .ddga-number-input__step:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-number-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-number-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-number-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n background-color: var(--ddga-color-muted);\n opacity: 0.5;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-number-input,\n .ddga-number-input__step {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-number-input {\n border: 1px solid CanvasText;\n }\n .ddga-number-input__step {\n background-color: ButtonFace;\n color: ButtonText;\n }\n .ddga-number-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;
|
|
1
|
+
@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;block-size:100svh;inline-size:100%;display:flex}.ddga-sidebar{inline-size:var(--ddga-sidebar-width);background-color:var(--ddga-color-background);block-size:100%;color:var(--ddga-text-primary);border-inline-end:1px solid var(--ddga-color-border);will-change:inline-size;flex-direction:column;flex:none;transition:inline-size .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.ddga-sidebar[data-side=end]{border-inline-end:0;border-inline-start:1px solid var(--ddga-color-border);order:1}.ddga-sidebar[data-collapsible=icon][data-state=collapsed]{inline-size:var(--ddga-sidebar-width-icon)}.ddga-sidebar[data-collapsible=offcanvas][data-state=collapsed]{border-inline:0;inline-size:0}.ddga-sidebar[data-variant=floating]{margin:var(--ddga-space-2);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);block-size:auto;box-shadow:var(--ddga-shadow-md)}.ddga-sidebar[data-variant=inset]{background-color:#0000;border-inline-end:0}.ddga-sidebar--mobile{inline-size:var(--ddga-sidebar-width);flex-direction:column;max-inline-size:85vw;display:flex}.ddga-sidebar-inset{flex-direction:column;flex:auto;min-inline-size:0;display:flex}.ddga-sidebar-inset--scrollable{min-block-size:0;overflow-y:auto}.ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant=inset]) .ddga-sidebar-inset{margin:var(--ddga-space-2);background-color:var(--ddga-color-background);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);box-shadow:var(--ddga-shadow-sm);overflow:hidden}.ddga-sidebar__trigger{border-radius:var(--ddga-radius-sm);block-size:2rem;inline-size:2rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-sidebar__trigger:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__trigger:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-sidebar__trigger>svg{block-size:1.125rem;inline-size:1.125rem}.ddga-sidebar__rail{cursor:col-resize;background:0 0;border:0;inline-size:.75rem;position:absolute;inset-block:0;inset-inline-end:0;transform:translate(50%)}[dir=rtl] .ddga-sidebar__rail{transform:translate(-50%)}.ddga-sidebar__header,.ddga-sidebar__footer{gap:var(--ddga-space-2);padding:var(--ddga-space-2);flex-direction:column;display:flex}.ddga-sidebar__content{gap:var(--ddga-space-1);min-block-size:0;padding:var(--ddga-space-2);flex-direction:column;flex:auto;transition:padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden auto}.ddga-sidebar__separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:var(--ddga-space-2);background-color:var(--ddga-color-border);border:0}.ddga-sidebar__group{padding:var(--ddga-space-2);flex-direction:column;transition:padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.ddga-sidebar__group-label{block-size:1.75rem;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-tertiary);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;align-items:center;transition:block-size .25s cubic-bezier(.4,0,.2,1),opacity .15s;display:flex;overflow:hidden}[dir=rtl] .ddga-sidebar__group-label{letter-spacing:normal;text-transform:none}.ddga-sidebar__group-action{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;transition:opacity .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-2);inset-inline-end:var(--ddga-space-2)}.ddga-sidebar__group-action:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group-label{opacity:0;block-size:0;margin-block:0;padding-block:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group-action,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-badge{opacity:0;pointer-events:none}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-sub{display:none}.ddga-sidebar__menu{gap:var(--ddga-space-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ddga-sidebar__menu-item{position:relative}.ddga-sidebar__menu-button{align-items:center;gap:var(--ddga-space-2);inline-size:100%;min-inline-size:0;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-md);color:var(--ddga-text-primary);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);text-align:start;cursor:pointer;white-space:nowrap;background:0 0;border:0;text-decoration:none;transition:background-color .12s,color .12s,padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.ddga-sidebar__menu-button>svg{block-size:1.125rem;inline-size:1.125rem;color:var(--ddga-text-secondary);flex:none;transition:color .12s}.ddga-sidebar__menu-button>:not(:first-child){transition:opacity .15s}.ddga-sidebar__menu-button:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar__menu-button:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:-2px}.ddga-sidebar__menu-button:active{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__menu-button[data-active=true]{background-color:var(--ddga-color-muted);color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-sidebar__menu-button[data-active=true]>svg{color:var(--ddga-color-primary)}.ddga-sidebar__menu-button--sm{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-xs)}.ddga-sidebar__menu-button--lg{padding-block:var(--ddga-space-3);font-size:var(--ddga-font-size-base)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__content,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__header,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__footer{padding-inline:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-button{padding-inline:calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-button>:not(:first-child){opacity:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__header,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__footer{align-items:center}.ddga-sidebar__menu-action{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-end:var(--ddga-space-1);transform:translateY(-50%)}.ddga-sidebar__menu-action:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar__menu-action:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-sidebar__menu-action[data-show-on-hover]{opacity:0}.ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],.ddga-sidebar__menu-action[data-show-on-hover]:focus-visible{opacity:1}.ddga-sidebar__menu-badge{pointer-events:none;block-size:1.25rem;min-inline-size:1.25rem;padding-inline:var(--ddga-space-1);border-radius:var(--ddga-radius-full);background-color:var(--ddga-color-muted);color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-end:var(--ddga-space-2);transform:translateY(-50%)}.ddga-sidebar__menu-skeleton{align-items:center;gap:var(--ddga-space-2);block-size:2rem;padding-inline:var(--ddga-space-2);display:flex}.ddga-sidebar__menu-skeleton-text{flex:auto;max-inline-size:12rem}.ddga-sidebar__menu-sub{border-inline-start:1px solid var(--ddga-color-border);gap:var(--ddga-space-1);flex-direction:column;margin:0;margin-inline-start:var(--ddga-space-3);padding-inline-start:var(--ddga-space-2);list-style:none;display:flex}.ddga-sidebar__menu-sub-button{align-items:center;gap:var(--ddga-space-2);inline-size:100%;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-sm);cursor:pointer;text-decoration:none;transition:background-color .12s,color .12s;display:flex}.ddga-sidebar__menu-sub-button:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__menu-sub-button:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:-2px}.ddga-sidebar__menu-sub-button[data-active=true]{color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-sidebar__menu-sub-button--sm{font-size:var(--ddga-font-size-xs)}@media (forced-colors:active){.ddga-sidebar{border-color:canvastext}.ddga-sidebar__menu-button[data-active=true],.ddga-sidebar__menu-button:hover,.ddga-sidebar__menu-sub-button[data-active=true],.ddga-sidebar__menu-sub-button:hover{color:highlighttext;background-color:highlight}.ddga-sidebar__separator,.ddga-sidebar__menu-sub{background-color:canvastext;border-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-sidebar,.ddga-sidebar__content,.ddga-sidebar__group,.ddga-sidebar__group-label,.ddga-sidebar__group-action,.ddga-sidebar__menu-button,.ddga-sidebar__menu-button>svg,.ddga-sidebar__menu-button>*,.ddga-sidebar__menu-badge,.ddga-sidebar__menu-sub-button{transition:none}}}
|
|
2
2
|
/*# sourceMappingURL=sidebar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAOE,oIAWA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAWA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,mLAIA,2JAGA,mHAQA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE","sources":["src/components/sidebar.css"],"sourcesContent":["@layer ddga-components {\n /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n custom properties so consumers override per instance. Logical properties\n keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n .ddga-sidebar-wrapper {\n --ddga-sidebar-width: 16rem;\n --ddga-sidebar-width-icon: 3.5rem;\n\n display: flex;\n min-block-size: 100%;\n inline-size: 100%;\n }\n\n /* ─── Container ─── */\n\n .ddga-sidebar {\n display: flex;\n flex-direction: column;\n flex: none;\n inline-size: var(--ddga-sidebar-width);\n block-size: 100%;\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border-inline-end: 1px solid var(--ddga-color-border);\n /* Shared easing + duration for the whole collapse so width, paddings and\n fades stay in lockstep (Material standard ease). */\n transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: inline-size;\n overflow: hidden;\n }\n\n /* side=end → border on the opposite logical edge and order after the inset. */\n .ddga-sidebar[data-side='end'] {\n order: 1;\n border-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n }\n\n /* Collapsed icon rail. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n inline-size: var(--ddga-sidebar-width-icon);\n }\n\n /* Offcanvas collapse fully hides on desktop. */\n .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n inline-size: 0;\n border-inline: 0;\n }\n\n /* ─── Variants ─── */\n\n .ddga-sidebar[data-variant='floating'] {\n margin: var(--ddga-space-2);\n block-size: auto;\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-sidebar[data-variant='inset'] {\n border-inline-end: 0;\n background-color: transparent;\n }\n\n /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n .ddga-sidebar--mobile {\n inline-size: var(--ddga-sidebar-width);\n max-inline-size: 85vw;\n display: flex;\n flex-direction: column;\n }\n\n /* ─── Inset (main content region) ─── */\n\n .ddga-sidebar-inset {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n }\n\n /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n inset card styling is opt-in via a modifier the consumer adds, OR scope by\n wrapper. Keep it simple: provide the card look on a data hook. */\n .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n margin: var(--ddga-space-2);\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-sm);\n overflow: hidden;\n }\n\n /* ─── Trigger / Rail ─── */\n\n .ddga-sidebar__trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__trigger:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__trigger > svg {\n inline-size: 1.125rem;\n block-size: 1.125rem;\n }\n\n .ddga-sidebar__rail {\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n inline-size: 0.75rem;\n transform: translateX(50%);\n cursor: col-resize;\n border: 0;\n background: transparent;\n }\n [dir='rtl'] .ddga-sidebar__rail {\n transform: translateX(-50%);\n }\n\n /* ─── Header / Content / Footer / Separator ─── */\n\n .ddga-sidebar__header,\n .ddga-sidebar__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-sidebar__content {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: var(--ddga-space-2);\n border: 0;\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Group ─── */\n\n .ddga-sidebar__group {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__group-label {\n display: flex;\n align-items: center;\n block-size: 1.75rem;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n white-space: nowrap;\n overflow: hidden;\n transition:\n block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 150ms ease;\n }\n /* Protect Arabic letter joining — no tracking, no uppercasing. */\n [dir='rtl'] .ddga-sidebar__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-sidebar__group-action {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__group-action:hover {\n background-color: var(--ddga-color-muted);\n }\n\n /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n Group label collapses its height (and fades); group action + badge fade.\n The sub-menu list is the only hard hide (it's replaced by the Popover\n flyout when collapsed, so animating it adds no value). */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n block-size: 0;\n margin-block: 0;\n padding-block: 0;\n opacity: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n opacity: 0;\n pointer-events: none;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n display: none;\n }\n\n /* ─── Menu ─── */\n\n .ddga-sidebar__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-item {\n position: relative;\n }\n\n .ddga-sidebar__menu-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n min-inline-size: 0;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-md);\n background: transparent;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n /* background/color ease for hover + active feedback; padding-inline shares\n the collapse easing so the icon glides to centre in lockstep with width. */\n transition:\n background-color 120ms ease,\n color 120ms ease,\n padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ddga-sidebar__menu-button > svg {\n flex: none;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n color: var(--ddga-text-secondary);\n transition: color 120ms ease;\n }\n /* Everything after the leading icon (label, trailing chevron, inline badge)\n fades on collapse rather than snapping out. */\n .ddga-sidebar__menu-button > *:not(:first-child) {\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__menu-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-button:active {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-button[data-active='true'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-button[data-active='true'] > svg {\n color: var(--ddga-color-primary);\n }\n\n .ddga-sidebar__menu-button--sm {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-sidebar__menu-button--lg {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n that would snap it to the centre of the still-wide box, then swoop inward).\n Instead the parent content/group padding animates to 0 and the button's own\n inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n icon travel is a few px, fully in sync with the width, so no glitch. The\n label/chevron/badge fade via the base opacity transition above. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group {\n padding-inline: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n .ddga-sidebar__menu-button\n > *:not(:first-child) {\n opacity: 0;\n }\n\n /* Collapsed rail: center header/footer content and clip overflow so a wide\n brand/label doesn't spill past the rail edge. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n align-items: center;\n }\n\n /* ─── Menu action / badge / skeleton ─── */\n\n .ddga-sidebar__menu-action {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-1);\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__menu-action:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-action:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__menu-action[data-show-on-hover] {\n opacity: 0;\n }\n .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n opacity: 1;\n }\n\n .ddga-sidebar__menu-badge {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-2);\n transform: translateY(-50%);\n pointer-events: none;\n min-inline-size: 1.25rem;\n block-size: 1.25rem;\n padding-inline: var(--ddga-space-1);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n .ddga-sidebar__menu-skeleton {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n }\n .ddga-sidebar__menu-skeleton-text {\n flex: 1 1 auto;\n max-inline-size: 12rem;\n }\n\n /* ─── Sub-menu ─── */\n\n .ddga-sidebar__menu-sub {\n list-style: none;\n margin: 0;\n margin-inline-start: var(--ddga-space-3);\n padding-inline-start: var(--ddga-space-2);\n border-inline-start: 1px solid var(--ddga-color-border);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-sub-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-sidebar__menu-sub-button:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-sub-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'] {\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-sub-button--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-sidebar {\n border-color: CanvasText;\n }\n .ddga-sidebar__menu-button[data-active='true'],\n .ddga-sidebar__menu-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'],\n .ddga-sidebar__menu-sub-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__separator,\n .ddga-sidebar__menu-sub {\n background-color: CanvasText;\n border-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-sidebar,\n .ddga-sidebar__content,\n .ddga-sidebar__group,\n .ddga-sidebar__group-label,\n .ddga-sidebar__group-action,\n .ddga-sidebar__menu-button,\n .ddga-sidebar__menu-button > svg,\n .ddga-sidebar__menu-button > *,\n .ddga-sidebar__menu-badge,\n .ddga-sidebar__menu-sub-button {\n transition: none;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAOE,kIAqBA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAcA,iEASA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,qVAMA,2JAGA,mHAWA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE","sources":["src/components/sidebar.css"],"sourcesContent":["@layer ddga-components {\n /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n custom properties so consumers override per instance. Logical properties\n keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n .ddga-sidebar-wrapper {\n --ddga-sidebar-width: 16rem;\n --ddga-sidebar-width-icon: 3.5rem;\n\n display: flex;\n /* Self-sufficient full height. This must be a DEFINITE height, not a `min-`:\n the aside is `block-size:100%`, which only resolves against a definite\n parent — with a `min-block-size` the wrapper stays content-sized, the\n percentage falls back to `auto`, and the footer detaches from the viewport\n bottom (and a long nav can't scroll inside `__content`). A definite\n `100svh` makes the footer stick and the nav scroll with zero consumer\n config — no html→body→root height chain. `svh` (not `dvh`) avoids reflow as\n mobile browser chrome shows/hides. Escape hatch for an embedded/boxed shell:\n set a definite `height`/`block-size` on the provider (inline style wins),\n e.g. `<SidebarProvider style={{ blockSize: '24rem' }}>`. */\n block-size: 100svh;\n inline-size: 100%;\n }\n\n /* ─── Container ─── */\n\n .ddga-sidebar {\n display: flex;\n flex-direction: column;\n flex: none;\n inline-size: var(--ddga-sidebar-width);\n block-size: 100%;\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border-inline-end: 1px solid var(--ddga-color-border);\n /* Shared easing + duration for the whole collapse so width, paddings and\n fades stay in lockstep (Material standard ease). */\n transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: inline-size;\n overflow: hidden;\n }\n\n /* side=end → border on the opposite logical edge and order after the inset. */\n .ddga-sidebar[data-side='end'] {\n order: 1;\n border-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n }\n\n /* Collapsed icon rail. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n inline-size: var(--ddga-sidebar-width-icon);\n }\n\n /* Offcanvas collapse fully hides on desktop. */\n .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n inline-size: 0;\n border-inline: 0;\n }\n\n /* ─── Variants ─── */\n\n .ddga-sidebar[data-variant='floating'] {\n margin: var(--ddga-space-2);\n block-size: auto;\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-sidebar[data-variant='inset'] {\n border-inline-end: 0;\n background-color: transparent;\n }\n\n /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n .ddga-sidebar--mobile {\n inline-size: var(--ddga-sidebar-width);\n max-inline-size: 85vw;\n display: flex;\n flex-direction: column;\n }\n\n /* ─── Inset (main content region) ─── */\n\n .ddga-sidebar-inset {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n }\n\n /* Opt-in (`<SidebarInset scrollable>`): make the inset its own vertical scroll\n region. The wrapper's definite `block-size:100svh` gives the stretched inset\n a definite height, so `min-block-size:0` + `overflow-y:auto` let tall content\n scroll inside it — the sidebar + footer stay put — with NO consumer\n flex/min-block-size/overflow CSS. The whole inset scrolls (header included);\n for a fixed header with only the body scrolling, leave this off and compose a\n nested scroll region inside the inset (see the App shell story). */\n .ddga-sidebar-inset--scrollable {\n min-block-size: 0;\n overflow-y: auto;\n }\n\n /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n inset card styling is opt-in via a modifier the consumer adds, OR scope by\n wrapper. Keep it simple: provide the card look on a data hook. */\n .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n margin: var(--ddga-space-2);\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-sm);\n overflow: hidden;\n }\n\n /* ─── Trigger / Rail ─── */\n\n .ddga-sidebar__trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__trigger:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__trigger > svg {\n inline-size: 1.125rem;\n block-size: 1.125rem;\n }\n\n .ddga-sidebar__rail {\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n inline-size: 0.75rem;\n transform: translateX(50%);\n cursor: col-resize;\n border: 0;\n background: transparent;\n }\n [dir='rtl'] .ddga-sidebar__rail {\n transform: translateX(-50%);\n }\n\n /* ─── Header / Content / Footer / Separator ─── */\n\n .ddga-sidebar__header,\n .ddga-sidebar__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-sidebar__content {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: var(--ddga-space-2);\n border: 0;\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Group ─── */\n\n .ddga-sidebar__group {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__group-label {\n display: flex;\n align-items: center;\n block-size: 1.75rem;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n white-space: nowrap;\n overflow: hidden;\n transition:\n block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 150ms ease;\n }\n /* Protect Arabic letter joining — no tracking, no uppercasing. */\n [dir='rtl'] .ddga-sidebar__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-sidebar__group-action {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__group-action:hover {\n background-color: var(--ddga-color-muted);\n }\n\n /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n Group label collapses its height (and fades); group action + badge fade.\n The sub-menu list is the only hard hide (it's replaced by the Popover\n flyout when collapsed, so animating it adds no value). */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n block-size: 0;\n margin-block: 0;\n padding-block: 0;\n opacity: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n opacity: 0;\n pointer-events: none;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n display: none;\n }\n\n /* ─── Menu ─── */\n\n .ddga-sidebar__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-item {\n position: relative;\n }\n\n .ddga-sidebar__menu-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n min-inline-size: 0;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-md);\n background: transparent;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n /* background/color ease for hover + active feedback; padding-inline shares\n the collapse easing so the icon glides to centre in lockstep with width. */\n transition:\n background-color 120ms ease,\n color 120ms ease,\n padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ddga-sidebar__menu-button > svg {\n flex: none;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n color: var(--ddga-text-secondary);\n transition: color 120ms ease;\n }\n /* Everything after the leading icon (label, trailing chevron, inline badge)\n fades on collapse rather than snapping out. */\n .ddga-sidebar__menu-button > *:not(:first-child) {\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__menu-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-button:active {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-button[data-active='true'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-button[data-active='true'] > svg {\n color: var(--ddga-color-primary);\n }\n\n .ddga-sidebar__menu-button--sm {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-sidebar__menu-button--lg {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n that would snap it to the centre of the still-wide box, then swoop inward).\n Instead the parent content/group padding animates to 0 and the button's own\n inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n icon travel is a few px, fully in sync with the width, so no glitch. The\n label/chevron/badge fade via the base opacity transition above. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n padding-inline: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n .ddga-sidebar__menu-button\n > *:not(:first-child) {\n opacity: 0;\n }\n\n /* Collapsed rail: header/footer drop their inline padding (above) so a menu\n button inside them fills the rail and self-centres its icon EXACTLY like the\n main-nav buttons (consistency — a footer profile button must match the nav).\n `align-items: center` then centres non-stretching content (a brand/label)\n and clips overflow so a wide label doesn't spill past the rail edge. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n align-items: center;\n }\n\n /* ─── Menu action / badge / skeleton ─── */\n\n .ddga-sidebar__menu-action {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-1);\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__menu-action:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-action:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__menu-action[data-show-on-hover] {\n opacity: 0;\n }\n .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n opacity: 1;\n }\n\n .ddga-sidebar__menu-badge {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-2);\n transform: translateY(-50%);\n pointer-events: none;\n min-inline-size: 1.25rem;\n block-size: 1.25rem;\n padding-inline: var(--ddga-space-1);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n .ddga-sidebar__menu-skeleton {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n }\n .ddga-sidebar__menu-skeleton-text {\n flex: 1 1 auto;\n max-inline-size: 12rem;\n }\n\n /* ─── Sub-menu ─── */\n\n .ddga-sidebar__menu-sub {\n list-style: none;\n margin: 0;\n margin-inline-start: var(--ddga-space-3);\n padding-inline-start: var(--ddga-space-2);\n border-inline-start: 1px solid var(--ddga-color-border);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-sub-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-sidebar__menu-sub-button:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-sub-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'] {\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-sub-button--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-sidebar {\n border-color: CanvasText;\n }\n .ddga-sidebar__menu-button[data-active='true'],\n .ddga-sidebar__menu-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'],\n .ddga-sidebar__menu-sub-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__separator,\n .ddga-sidebar__menu-sub {\n background-color: CanvasText;\n border-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-sidebar,\n .ddga-sidebar__content,\n .ddga-sidebar__group,\n .ddga-sidebar__group-label,\n .ddga-sidebar__group-action,\n .ddga-sidebar__menu-button,\n .ddga-sidebar__menu-button > svg,\n .ddga-sidebar__menu-button > *,\n .ddga-sidebar__menu-badge,\n .ddga-sidebar__menu-sub-button {\n transition: none;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-skeleton{background-color:var(--ddga-gray-200);border-radius:var(--ddga-radius-md);display:block;position:relative;overflow:hidden}.ddga-skeleton--text{border-radius:var(--ddga-radius-sm);width:100%;height:1em}.ddga-skeleton--rectangle{width:100%;height:40px}.ddga-skeleton--circle{border-radius:var(--ddga-radius-full);width:40px
|
|
1
|
+
@layer ddga-components{.ddga-skeleton{background-color:var(--ddga-gray-200);border-radius:var(--ddga-radius-md);display:block;position:relative;overflow:hidden}.ddga-skeleton--text{border-radius:var(--ddga-radius-sm);width:100%;height:1em}.ddga-skeleton--rectangle{width:100%;height:40px}.ddga-skeleton--circle{aspect-ratio:1;border-radius:var(--ddga-radius-full);width:40px}.ddga-skeleton--pulse{animation:1.5s ease-in-out infinite ddga-skeleton-pulse}@keyframes ddga-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}.ddga-skeleton--wave:after{content:"";background-image:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ddga-color-background) 60%, transparent), transparent);animation:1.6s linear infinite ddga-skeleton-wave;position:absolute;inset:0;transform:translate(-100%)}@keyframes ddga-skeleton-wave{to{transform:translate(100%)}}[dir=rtl] .ddga-skeleton--wave:after{animation-name:ddga-skeleton-wave-rtl;transform:translate(100%)}@keyframes ddga-skeleton-wave-rtl{to{transform:translate(-100%)}}.ddga-skeleton--none{animation:none}.ddga-skeleton--none:after{display:none}[data-theme=dark] .ddga-skeleton{background-color:var(--ddga-color-border)}@media (prefers-reduced-motion:reduce){.ddga-skeleton--pulse,.ddga-skeleton--wave:after{animation:none}}@media (forced-colors:active){.ddga-skeleton{border:1px solid graytext}}}
|
|
2
2
|
/*# sourceMappingURL=skeleton.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBACE,yIAUA,+EAMA,iDAKA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBACE,yIAUA,+EAMA,iDAKA,uFAWA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,wCASA,2EAIA,uCACE,iEASF,8BACE","sources":["src/components/skeleton.css"],"sourcesContent":["@layer ddga-components {\n .ddga-skeleton {\n display: block;\n background-color: var(--ddga-gray-200);\n border-radius: var(--ddga-radius-md);\n position: relative;\n overflow: hidden;\n }\n\n /* ─── Shapes ─── */\n\n .ddga-skeleton--text {\n width: 100%;\n height: 1em;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-skeleton--rectangle {\n width: 100%;\n height: 40px;\n }\n\n .ddga-skeleton--circle {\n /* Sized by `width` alone — `aspect-ratio:1` keeps it round, so passing only\n `width` (the natural way to size a circle) no longer produces an oval. An\n explicit `height` (inline style) still overrides aspect-ratio. */\n width: 40px;\n aspect-ratio: 1;\n border-radius: var(--ddga-radius-full);\n }\n\n /* ─── Animations ─── */\n\n .ddga-skeleton--pulse {\n animation: ddga-skeleton-pulse 1.5s ease-in-out infinite;\n }\n\n @keyframes ddga-skeleton-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.55;\n }\n }\n\n /* Wave: a translucent gradient sweeps across the surface using a\n pseudo-element so it doesn't interfere with the consumer's content. */\n .ddga-skeleton--wave::after {\n content: '';\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, var(--ddga-color-background) 60%, transparent),\n transparent\n );\n animation: ddga-skeleton-wave 1.6s linear infinite;\n }\n\n @keyframes ddga-skeleton-wave {\n 100% {\n transform: translateX(100%);\n }\n }\n\n /* RTL: sweep direction follows reading direction so the shimmer feels native. */\n [dir='rtl'] .ddga-skeleton--wave::after {\n transform: translateX(100%);\n animation-name: ddga-skeleton-wave-rtl;\n }\n\n @keyframes ddga-skeleton-wave-rtl {\n 100% {\n transform: translateX(-100%);\n }\n }\n\n .ddga-skeleton--none {\n animation: none;\n }\n\n .ddga-skeleton--none::after {\n display: none;\n }\n\n /* ─── Dark mode ─── */\n /* The fill is the raw `--ddga-gray-200` tint, which the dark theme does NOT\n remap (only semantic `--ddga-color-*` adapt). Left alone it renders as a\n bright light box on dark surfaces, so map it to the semantic border gray.\n The wave shimmer already uses `--ddga-color-background` and is fine. */\n [data-theme='dark'] .ddga-skeleton {\n background-color: var(--ddga-color-border);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--pulse,\n .ddga-skeleton--wave::after {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n /* The fill conveys \"content loading here\", but `background-color` is forced\n away in HC. Outline the placeholder so it stays perceivable. */\n @media (forced-colors: active) {\n .ddga-skeleton {\n border: 1px solid GrayText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-tag-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-tag-input{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);cursor:text;flex-wrap:wrap;transition:border-color .15s,box-shadow .15s;display:flex}.ddga-tag-input--sm{min-block-size:32px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm)}.ddga-tag-input--md{min-block-size:36px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-base)}.ddga-tag-input--lg{min-block-size:40px;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-lg)}.ddga-tag-input__list,.ddga-tag-input__item{display:contents}.ddga-tag-input__field{block-size:1.5rem;min-inline-size:60px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:60px;padding:0}.ddga-tag-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-tag-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-tag-input--error{border-color:var(--ddga-color-error)}.ddga-tag-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-tag-input[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-tag-input[data-disabled] .ddga-tag-input__field{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.ddga-tag-input{transition:none}}@media (forced-colors:active){.ddga-tag-input{border:1px solid canvastext}.ddga-tag-input:focus-within{outline:2px solid highlight}.ddga-tag-input[data-disabled]{color:graytext;border-color:graytext}}}
|
|
1
|
+
@layer ddga-components{.ddga-tag-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-tag-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-tag-input{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);cursor:text;flex-wrap:wrap;transition:border-color .15s,box-shadow .15s;display:flex}.ddga-tag-input--sm{min-block-size:32px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm)}.ddga-tag-input--md{min-block-size:36px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-base)}.ddga-tag-input--lg{min-block-size:40px;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-lg)}.ddga-tag-input__list,.ddga-tag-input__item{display:contents}.ddga-tag-input__field{block-size:1.5rem;min-inline-size:60px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:60px;padding:0}.ddga-tag-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-tag-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-tag-input--error{border-color:var(--ddga-color-error)}.ddga-tag-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-tag-input[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-tag-input[data-disabled] .ddga-tag-input__field{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.ddga-tag-input{transition:none}}@media (forced-colors:active){.ddga-tag-input{border:1px solid canvastext}.ddga-tag-input:focus-within{outline:2px solid highlight}.ddga-tag-input[data-disabled]{color:graytext;border-color:graytext}}}
|
|
2
2
|
/*# sourceMappingURL=tag-input.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBASE,oJASA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA","sources":["src/components/tag-input.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. Only TagInput-specific styles live here. The control box\n mirrors Input's box (border / focus ring / sizes / error / disabled) but\n wraps: chips + the text input share one flex-wrap flow, so the box grows\n vertically (min-block-size, not a fixed height) as chips wrap. */\n\n /* ─── Label ─── */\n\n .ddga-tag-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n /* ─── Control (the bordered, wrapping box) ─── */\n\n .ddga-tag-input {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n cursor: text;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (min-heights match Input; vertical padding lets chips breathe) ─── */\n\n .ddga-tag-input--sm {\n min-block-size: 32px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tag-input--md {\n min-block-size: 36px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-tag-input--lg {\n min-block-size: 40px;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Chip list (display:contents so <li> chips flow inline with the input;\n explicit roles in the JSX preserve list semantics regardless) ─── */\n\n .ddga-tag-input__list,\n .ddga-tag-input__item {\n display: contents;\n }\n\n /* ─── Field (the actual <input> — transparent, borderless, grows to fill) ─── */\n\n .ddga-tag-input__field {\n flex: 1 1 60px;\n min-inline-size: 60px;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n .ddga-tag-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-tag-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-tag-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-tag-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-tag-input[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-tag-input[data-disabled] .ddga-tag-input__field {\n cursor: not-allowed;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tag-input {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-tag-input {\n border: 1px solid CanvasText;\n }\n .ddga-tag-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-tag-input[data-disabled] {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBASE,oJASA,oFAOA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA","sources":["src/components/tag-input.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. Only TagInput-specific styles live here. The control box\n mirrors Input's box (border / focus ring / sizes / error / disabled) but\n wraps: chips + the text input share one flex-wrap flow, so the box grows\n vertically (min-block-size, not a fixed height) as chips wrap. */\n\n /* ─── Label ─── */\n\n .ddga-tag-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n /* Required asterisk — mirrors Input so every text-entry control marks\n required the same way. */\n .ddga-tag-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered, wrapping box) ─── */\n\n .ddga-tag-input {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n cursor: text;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (min-heights match Input; vertical padding lets chips breathe) ─── */\n\n .ddga-tag-input--sm {\n min-block-size: 32px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tag-input--md {\n min-block-size: 36px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-tag-input--lg {\n min-block-size: 40px;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Chip list (display:contents so <li> chips flow inline with the input;\n explicit roles in the JSX preserve list semantics regardless) ─── */\n\n .ddga-tag-input__list,\n .ddga-tag-input__item {\n display: contents;\n }\n\n /* ─── Field (the actual <input> — transparent, borderless, grows to fill) ─── */\n\n .ddga-tag-input__field {\n flex: 1 1 60px;\n min-inline-size: 60px;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n .ddga-tag-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-tag-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-tag-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-tag-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-tag-input[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-tag-input[data-disabled] .ddga-tag-input__field {\n cursor: not-allowed;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tag-input {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-tag-input {\n border: 1px solid CanvasText;\n }\n .ddga-tag-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-tag-input[data-disabled] {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n"],"names":[]}
|