npm - @dev-dga/css - Versions diffs - 0.8.1 → 0.8.3 - Mend

@dev-dga/css 0.8.1 → 0.8.3

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.

Files changed (14) hide show

package/CHANGELOG.md +12 -0
package/dist/components/avatar.css +1 -1
package/dist/components/avatar.css.map +1 -1
package/dist/components/combobox.css +1 -1
package/dist/components/combobox.css.map +1 -1
package/dist/components/command.css +1 -1
package/dist/components/command.css.map +1 -1
package/dist/components/date-picker.css +1 -1
package/dist/components/date-picker.css.map +1 -1
package/dist/components/sidebar.css +1 -1
package/dist/components/sidebar.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 Viewed

@@ -1,5 +1,17 @@
 # @dev-dga/css
+## 0.8.3
+### Patch Changes
+- **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`.
+## 0.8.2
+### Patch Changes
+- **Accessibility — `forced-colors` (Windows High Contrast Mode):** restored focus/visibility rules suppressed in HCM for the Combobox trigger ring, Command separator, DatePicker segment + icon button, and Sidebar sub-button; plus an Avatar dark-mode offline-dot override. Released in lockstep with `@dev-dga/react@0.8.2` and `@dev-dga/tokens@0.8.2`.
 ## 0.8.1
 ### Patch Changes

package/dist/components/avatar.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-avatar{--ddga-avatar-size:40px;inline-size:var(--ddga-avatar-size);block-size:var(--ddga-avatar-size);background-color:var(--ddga-color-muted);color:var(--ddga-text-secondary);font-size:calc(var(--ddga-avatar-size) * .4);font-weight:var(--ddga-font-weight-medium);vertical-align:middle;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.ddga-avatar--xs{--ddga-avatar-size:24px}.ddga-avatar--sm{--ddga-avatar-size:32px}.ddga-avatar--md{--ddga-avatar-size:40px}.ddga-avatar--lg{--ddga-avatar-size:48px}.ddga-avatar--xl{--ddga-avatar-size:64px}.ddga-avatar--circle{border-radius:var(--ddga-radius-full)}.ddga-avatar--square{border-radius:var(--ddga-radius-md)}.ddga-avatar__image,.ddga-avatar__fallback{border-radius:inherit;block-size:100%;inline-size:100%}.ddga-avatar__image{object-fit:cover}.ddga-avatar__fallback{background-color:inherit;color:inherit;font-size:inherit;font-weight:inherit;text-transform:uppercase;justify-content:center;align-items:center;display:flex}.ddga-avatar__fallback--default{background-color:var(--ddga-gray-100);color:var(--ddga-gray-700)}.ddga-avatar__fallback--primary{background-color:var(--ddga-sa-100);color:var(--ddga-sa-800)}.ddga-avatar__fallback--secondary{background-color:var(--ddga-gray-200);color:var(--ddga-gray-800)}.ddga-avatar__fallback--success{background-color:var(--ddga-success-100);color:var(--ddga-success-700)}.ddga-avatar__fallback--warning{background-color:var(--ddga-warning-100);color:var(--ddga-warning-700)}.ddga-avatar__fallback--destructive{background-color:var(--ddga-error-100);color:var(--ddga-error-700)}.ddga-avatar__fallback--info{background-color:var(--ddga-info-100);color:var(--ddga-info-700)}.ddga-avatar__status{inline-size:calc(var(--ddga-avatar-size) * .25);block-size:calc(var(--ddga-avatar-size) * .25);border-radius:var(--ddga-radius-full);min-block-size:8px;min-inline-size:8px;box-shadow:0 0 0 2px var(--ddga-color-background);position:absolute;inset-block-end:0;inset-inline-end:0}.ddga-avatar__status--online{background-color:var(--ddga-color-success)}.ddga-avatar__status--busy{background-color:var(--ddga-color-destructive)}.ddga-avatar__status--away{background-color:var(--ddga-color-warning)}.ddga-avatar__status--offline{background-color:var(--ddga-gray-400)}.ddga-avatar--square .ddga-avatar__status{inset-block-end:2px;inset-inline-end:2px}.ddga-avatar-group{align-items:center;display:inline-flex}.ddga-avatar-group>.ddga-avatar{box-shadow:0 0 0 2px var(--ddga-color-background);margin-inline-start:calc(var(--ddga-avatar-size) * -.25)}.ddga-avatar-group>.ddga-avatar:first-child{margin-inline-start:0}[data-theme=dark] .ddga-avatar__fallback--default{background-color:var(--ddga-gray-800);color:var(--ddga-gray-200)}[data-theme=dark] .ddga-avatar__fallback--primary{background-color:var(--ddga-sa-900);color:var(--ddga-sa-200)}[data-theme=dark] .ddga-avatar__fallback--secondary{background-color:var(--ddga-gray-700);color:var(--ddga-gray-100)}[data-theme=dark] .ddga-avatar__fallback--success{background-color:var(--ddga-success-900);color:var(--ddga-success-200)}[data-theme=dark] .ddga-avatar__fallback--warning{background-color:var(--ddga-warning-900);color:var(--ddga-warning-200)}[data-theme=dark] .ddga-avatar__fallback--destructive{background-color:var(--ddga-error-900);color:var(--ddga-error-200)}[data-theme=dark] .ddga-avatar__fallback--info{background-color:var(--ddga-info-900);color:var(--ddga-info-200)}@media (forced-colors:active){.ddga-avatar,.ddga-avatar__status{border:1px solid canvastext}}}
+@layer ddga-components{.ddga-avatar{--ddga-avatar-size:40px;inline-size:var(--ddga-avatar-size);block-size:var(--ddga-avatar-size);background-color:var(--ddga-color-muted);color:var(--ddga-text-secondary);font-size:calc(var(--ddga-avatar-size) * .4);font-weight:var(--ddga-font-weight-medium);vertical-align:middle;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.ddga-avatar--xs{--ddga-avatar-size:24px}.ddga-avatar--sm{--ddga-avatar-size:32px}.ddga-avatar--md{--ddga-avatar-size:40px}.ddga-avatar--lg{--ddga-avatar-size:48px}.ddga-avatar--xl{--ddga-avatar-size:64px}.ddga-avatar--circle{border-radius:var(--ddga-radius-full)}.ddga-avatar--square{border-radius:var(--ddga-radius-md)}.ddga-avatar__image,.ddga-avatar__fallback{border-radius:inherit;block-size:100%;inline-size:100%}.ddga-avatar__image{object-fit:cover}.ddga-avatar__fallback{background-color:inherit;color:inherit;font-size:inherit;font-weight:inherit;text-transform:uppercase;justify-content:center;align-items:center;display:flex}.ddga-avatar__fallback--default{background-color:var(--ddga-gray-100);color:var(--ddga-gray-700)}.ddga-avatar__fallback--primary{background-color:var(--ddga-sa-100);color:var(--ddga-sa-800)}.ddga-avatar__fallback--secondary{background-color:var(--ddga-gray-200);color:var(--ddga-gray-800)}.ddga-avatar__fallback--success{background-color:var(--ddga-success-100);color:var(--ddga-success-700)}.ddga-avatar__fallback--warning{background-color:var(--ddga-warning-100);color:var(--ddga-warning-700)}.ddga-avatar__fallback--destructive{background-color:var(--ddga-error-100);color:var(--ddga-error-700)}.ddga-avatar__fallback--info{background-color:var(--ddga-info-100);color:var(--ddga-info-700)}.ddga-avatar__status{inline-size:calc(var(--ddga-avatar-size) * .25);block-size:calc(var(--ddga-avatar-size) * .25);border-radius:var(--ddga-radius-full);min-block-size:8px;min-inline-size:8px;box-shadow:0 0 0 2px var(--ddga-color-background);position:absolute;inset-block-end:0;inset-inline-end:0}.ddga-avatar__status--online{background-color:var(--ddga-color-success)}.ddga-avatar__status--busy{background-color:var(--ddga-color-destructive)}.ddga-avatar__status--away{background-color:var(--ddga-color-warning)}.ddga-avatar__status--offline{background-color:var(--ddga-gray-400)}.ddga-avatar--square .ddga-avatar__status{inset-block-end:2px;inset-inline-end:2px}.ddga-avatar-group{align-items:center;display:inline-flex}.ddga-avatar-group>.ddga-avatar{box-shadow:0 0 0 2px var(--ddga-color-background);margin-inline-start:calc(var(--ddga-avatar-size) * -.25)}.ddga-avatar-group>.ddga-avatar:first-child{margin-inline-start:0}[data-theme=dark] .ddga-avatar__fallback--default{background-color:var(--ddga-gray-800);color:var(--ddga-gray-200)}[data-theme=dark] .ddga-avatar__fallback--primary{background-color:var(--ddga-sa-900);color:var(--ddga-sa-200)}[data-theme=dark] .ddga-avatar__fallback--secondary{background-color:var(--ddga-gray-700);color:var(--ddga-gray-100)}[data-theme=dark] .ddga-avatar__fallback--success{background-color:var(--ddga-success-900);color:var(--ddga-success-200)}[data-theme=dark] .ddga-avatar__fallback--warning{background-color:var(--ddga-warning-900);color:var(--ddga-warning-200)}[data-theme=dark] .ddga-avatar__fallback--destructive{background-color:var(--ddga-error-900);color:var(--ddga-error-200)}[data-theme=dark] .ddga-avatar__fallback--info{background-color:var(--ddga-info-900);color:var(--ddga-info-200)}[data-theme=dark] .ddga-avatar__status--offline{background-color:var(--ddga-gray-500)}@media (forced-colors:active){.ddga-avatar,.ddga-avatar__status{border:1px solid canvastext}.ddga-avatar-group>.ddga-avatar{outline-offset:-1px;outline:2px solid canvastext}}}
 /*# sourceMappingURL=avatar.css.map */

package/dist/components/avatar.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAGE,gZAqBA,yCAGA,yCAGA,yCAGA,yCAGA,yCAMA,2DAIA,yDAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,2IAOA,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,~~gHAOA~~,8BACE","sources":["src/components/avatar.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Root ─── /\n\n .ddga-avatar {\n --ddga-avatar-size: 40px;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: var(--ddga-avatar-size);\n block-size: var(--ddga-avatar-size);\n / Don't clip the status dot — it's positioned half-outside the root. /\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n / Font sizing tracks the avatar size so fallback initials scale naturally. /\n font-size: calc(var(--ddga-avatar-size) 0.4);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1;\n vertical-align: middle;\n }\n\n /* ─── Sizes (drive both the box + the fallback font via the var) ─── /\n\n .ddga-avatar--xs {\n --ddga-avatar-size: 24px;\n }\n .ddga-avatar--sm {\n --ddga-avatar-size: 32px;\n }\n .ddga-avatar--md {\n --ddga-avatar-size: 40px;\n }\n .ddga-avatar--lg {\n --ddga-avatar-size: 48px;\n }\n .ddga-avatar--xl {\n --ddga-avatar-size: 64px;\n }\n\n / ─── Shapes ─── /\n\n .ddga-avatar--circle {\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-avatar--square {\n border-radius: var(--ddga-radius-md);\n }\n\n / ─── Image / Fallback (clip to the root's shape) ─── /\n\n .ddga-avatar__image,\n .ddga-avatar__fallback {\n inline-size: 100%;\n block-size: 100%;\n border-radius: inherit;\n }\n\n .ddga-avatar__image {\n object-fit: cover;\n }\n\n .ddga-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: inherit;\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n text-transform: uppercase;\n }\n\n / Tonal color schemes — useful for distinguishing avatars by team/role/\n status in chat & team UIs. Each pair uses the same -100/-700-800 tonal\n scale as Badge subtle variants, so the family reads consistently. /\n .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-100);\n color: var(--ddga-sa-800);\n }\n .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-800);\n }\n .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-100);\n color: var(--ddga-success-700);\n }\n .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-100);\n color: var(--ddga-warning-700);\n }\n .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-100);\n color: var(--ddga-error-700);\n }\n .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-100);\n color: var(--ddga-info-700);\n }\n\n / ─── Status indicator (bottom-end corner, RTL-aware via logical props) ─── /\n\n .ddga-avatar__status {\n position: absolute;\n inset-block-end: 0;\n inset-inline-end: 0;\n inline-size: calc(var(--ddga-avatar-size) 0.25);\n block-size: calc(var(--ddga-avatar-size) * 0.25);\n min-inline-size: 8px;\n min-block-size: 8px;\n border-radius: var(--ddga-radius-full);\n /* Cuts a \"ring\" out of the avatar so the dot reads as separate. /\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n\n .ddga-avatar__status--online {\n background-color: var(--ddga-color-success);\n }\n .ddga-avatar__status--busy {\n background-color: var(--ddga-color-destructive);\n }\n .ddga-avatar__status--away {\n background-color: var(--ddga-color-warning);\n }\n .ddga-avatar__status--offline {\n background-color: var(--ddga-gray-400);\n }\n\n / Square avatars: tuck the status into the corner instead of overhanging,\n because a square corner doesn't disguise the overhang the way a circle does. /\n .ddga-avatar--square .ddga-avatar__status {\n inset-block-end: 2px;\n inset-inline-end: 2px;\n }\n\n / ─── Group ─── /\n\n .ddga-avatar-group {\n display: inline-flex;\n align-items: center;\n }\n .ddga-avatar-group > .ddga-avatar {\n / Each subsequent avatar tucks under the previous one. Logical margin\n so stacking flips correctly in RTL. /\n margin-inline-start: calc(var(--ddga-avatar-size) -0.25);\n /* Ring around each so they read as separate even when overlapping. /\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n .ddga-avatar-group > .ddga-avatar:first-child {\n margin-inline-start: 0;\n }\n\n / ─── Dark mode adjustments ─── /\n / The fallback schemes paint raw -100 tints with -700/-800 text — light\n chips that stay legible but don't adapt to a dark page on their own. Flip\n each to a dark -800/-900 surface with a light -100/-200 foreground\n (mirrors alert.css). /\n\n [data-theme='dark'] .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-900);\n color: var(--ddga-sa-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-700);\n color: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-900);\n color: var(--ddga-success-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-900);\n color: var(--ddga-warning-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-900);\n color: var(--ddga-error-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-900);\n color: var(--ddga-info-200);\n }\n\n / ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-avatar {\n border: 1px solid CanvasText;\n }\n .ddga-avatar__status {\n border: 1px solid CanvasText;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAGE,gZAqBA,yCAGA,yCAGA,yCAGA,yCAGA,yCAMA,2DAIA,yDAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,2IAOA,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA","sources":["src/components/avatar.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Root ─── /\n\n .ddga-avatar {\n --ddga-avatar-size: 40px;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: var(--ddga-avatar-size);\n block-size: var(--ddga-avatar-size);\n / Don't clip the status dot — it's positioned half-outside the root. /\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n / Font sizing tracks the avatar size so fallback initials scale naturally. /\n font-size: calc(var(--ddga-avatar-size) 0.4);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1;\n vertical-align: middle;\n }\n\n /* ─── Sizes (drive both the box + the fallback font via the var) ─── /\n\n .ddga-avatar--xs {\n --ddga-avatar-size: 24px;\n }\n .ddga-avatar--sm {\n --ddga-avatar-size: 32px;\n }\n .ddga-avatar--md {\n --ddga-avatar-size: 40px;\n }\n .ddga-avatar--lg {\n --ddga-avatar-size: 48px;\n }\n .ddga-avatar--xl {\n --ddga-avatar-size: 64px;\n }\n\n / ─── Shapes ─── /\n\n .ddga-avatar--circle {\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-avatar--square {\n border-radius: var(--ddga-radius-md);\n }\n\n / ─── Image / Fallback (clip to the root's shape) ─── /\n\n .ddga-avatar__image,\n .ddga-avatar__fallback {\n inline-size: 100%;\n block-size: 100%;\n border-radius: inherit;\n }\n\n .ddga-avatar__image {\n object-fit: cover;\n }\n\n .ddga-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: inherit;\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n text-transform: uppercase;\n }\n\n / Tonal color schemes — useful for distinguishing avatars by team/role/\n status in chat & team UIs. Each pair uses the same -100/-700-800 tonal\n scale as Badge subtle variants, so the family reads consistently. /\n .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-100);\n color: var(--ddga-sa-800);\n }\n .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-800);\n }\n .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-100);\n color: var(--ddga-success-700);\n }\n .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-100);\n color: var(--ddga-warning-700);\n }\n .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-100);\n color: var(--ddga-error-700);\n }\n .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-100);\n color: var(--ddga-info-700);\n }\n\n / ─── Status indicator (bottom-end corner, RTL-aware via logical props) ─── /\n\n .ddga-avatar__status {\n position: absolute;\n inset-block-end: 0;\n inset-inline-end: 0;\n inline-size: calc(var(--ddga-avatar-size) 0.25);\n block-size: calc(var(--ddga-avatar-size) * 0.25);\n min-inline-size: 8px;\n min-block-size: 8px;\n border-radius: var(--ddga-radius-full);\n /* Cuts a \"ring\" out of the avatar so the dot reads as separate. /\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n\n .ddga-avatar__status--online {\n background-color: var(--ddga-color-success);\n }\n .ddga-avatar__status--busy {\n background-color: var(--ddga-color-destructive);\n }\n .ddga-avatar__status--away {\n background-color: var(--ddga-color-warning);\n }\n .ddga-avatar__status--offline {\n background-color: var(--ddga-gray-400);\n }\n\n / Square avatars: tuck the status into the corner instead of overhanging,\n because a square corner doesn't disguise the overhang the way a circle does. /\n .ddga-avatar--square .ddga-avatar__status {\n inset-block-end: 2px;\n inset-inline-end: 2px;\n }\n\n / ─── Group ─── /\n\n .ddga-avatar-group {\n display: inline-flex;\n align-items: center;\n }\n .ddga-avatar-group > .ddga-avatar {\n / Each subsequent avatar tucks under the previous one. Logical margin\n so stacking flips correctly in RTL. /\n margin-inline-start: calc(var(--ddga-avatar-size) -0.25);\n /* Ring around each so they read as separate even when overlapping. /\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n .ddga-avatar-group > .ddga-avatar:first-child {\n margin-inline-start: 0;\n }\n\n / ─── Dark mode adjustments ─── /\n / The fallback schemes paint raw -100 tints with -700/-800 text — light\n chips that stay legible but don't adapt to a dark page on their own. Flip\n each to a dark -800/-900 surface with a light -100/-200 foreground\n (mirrors alert.css). /\n\n [data-theme='dark'] .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-900);\n color: var(--ddga-sa-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-700);\n color: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-900);\n color: var(--ddga-success-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-900);\n color: var(--ddga-warning-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-900);\n color: var(--ddga-error-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-900);\n color: var(--ddga-info-200);\n }\n [data-theme='dark'] .ddga-avatar__status--offline {\n background-color: var(--ddga-gray-500);\n }\n\n / ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-avatar {\n border: 1px solid CanvasText;\n }\n .ddga-avatar__status {\n border: 1px solid CanvasText;\n }\n .ddga-avatar-group > .ddga-avatar {\n outline: 2px solid CanvasText;\n outline-offset: -1px;\n }\n }\n}\n"],"names":[]}

package/dist/components/combobox.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-combobox__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);margin-block-end:var(--ddga-space-2);display:inline-flex}.ddga-combobox__required{color:var(--ddga-color-error)}.ddga-combobox-trigger{justify-content:space-between;align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;cursor:pointer;font-family:inherit;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-combobox-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-combobox-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-combobox-trigger:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-combobox-trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-combobox-trigger--error{border-color:var(--ddga-color-error)}.ddga-combobox-trigger--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-combobox__value{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-combobox__placeholder{color:var(--ddga-text-placeholder)}.ddga-combobox__icon{block-size:1em;inline-size:1em;color:var(--ddga-text-secondary);flex-shrink:0}.ddga-combobox-content{background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);z-index:50;min-inline-size:200px;overflow:hidden}.ddga-combobox-content[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-combobox-in}.ddga-combobox-content[data-state=closed]{animation:80ms ease-in ddga-combobox-out}@keyframes ddga-combobox-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-combobox-out{0%{opacity:1}to{opacity:0}}.ddga-combobox-command{flex-direction:column;max-block-size:min(340px,60vh);display:flex}.ddga-combobox-input{inline-size:100%;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);border:0;border-block-end:1px solid var(--ddga-color-border);color:inherit;font:inherit;background-color:#0000;outline:none}.ddga-combobox-input::placeholder{color:var(--ddga-text-placeholder)}.ddga-combobox-list{min-block-size:0;padding:var(--ddga-space-1);flex:auto;overflow-y:auto}.ddga-combobox-empty{padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-tertiary);text-align:center}.ddga-combobox-item{align-items:center;gap:var(--ddga-space-2);padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-combobox-item[data-selected=true]{background-color:var(--ddga-color-muted)}.ddga-combobox-item[data-disabled=true]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-combobox-item__check{block-size:1em;inline-size:1em;color:var(--ddga-color-primary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-combobox-item__check>svg{block-size:.875em;inline-size:.875em}.ddga-combobox-item__label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-combobox-group [cmdk-group-heading]{padding-block:var(--ddga-space-1);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}[dir=rtl] .ddga-combobox-group [cmdk-group-heading]{letter-spacing:normal;text-transform:none}.ddga-combobox-separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:calc(var(--ddga-space-1) * -1);background-color:var(--ddga-color-border)}@media (prefers-reduced-motion:reduce){.ddga-combobox-content[data-state=open],.ddga-combobox-content[data-state=closed]{animation:none}}@media (forced-colors:active){.ddga-combobox-trigger,.ddga-combobox-content{border:1px solid canvastext}.ddga-combobox-item[data-selected=true]{color:highlighttext;background-color:highlight}}}
+@layer ddga-components{.ddga-combobox__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);margin-block-end:var(--ddga-space-2);display:inline-flex}.ddga-combobox__required{color:var(--ddga-color-error)}.ddga-combobox-trigger{justify-content:space-between;align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;cursor:pointer;font-family:inherit;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-combobox-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-combobox-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-combobox-trigger:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-combobox-trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-combobox-trigger--error{border-color:var(--ddga-color-error)}.ddga-combobox-trigger--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-combobox__value{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-combobox__placeholder{color:var(--ddga-text-placeholder)}.ddga-combobox__icon{block-size:1em;inline-size:1em;color:var(--ddga-text-secondary);flex-shrink:0}.ddga-combobox-content{background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);z-index:50;min-inline-size:200px;overflow:hidden}.ddga-combobox-content[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-combobox-in}.ddga-combobox-content[data-state=closed]{animation:80ms ease-in ddga-combobox-out}@keyframes ddga-combobox-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-combobox-out{0%{opacity:1}to{opacity:0}}.ddga-combobox-command{flex-direction:column;max-block-size:min(340px,60vh);display:flex}.ddga-combobox-input{inline-size:100%;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);border:0;border-block-end:1px solid var(--ddga-color-border);color:inherit;font:inherit;background-color:#0000;outline:none}.ddga-combobox-input::placeholder{color:var(--ddga-text-placeholder)}.ddga-combobox-list{min-block-size:0;padding:var(--ddga-space-1);flex:auto;overflow-y:auto}.ddga-combobox-empty{padding-block:var(--ddga-space-3);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-tertiary);text-align:center}.ddga-combobox-item{align-items:center;gap:var(--ddga-space-2);padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-combobox-item[data-selected=true]{background-color:var(--ddga-color-muted)}.ddga-combobox-item[data-disabled=true]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-combobox-item__check{block-size:1em;inline-size:1em;color:var(--ddga-color-primary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-combobox-item__check>svg{block-size:.875em;inline-size:.875em}.ddga-combobox-item__label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-combobox-group [cmdk-group-heading]{padding-block:var(--ddga-space-1);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}[dir=rtl] .ddga-combobox-group [cmdk-group-heading]{letter-spacing:normal;text-transform:none}.ddga-combobox-separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:calc(var(--ddga-space-1) * -1);background-color:var(--ddga-color-border)}@media (prefers-reduced-motion:reduce){.ddga-combobox-content[data-state=open],.ddga-combobox-content[data-state=closed]{animation:none}}@media (forced-colors:active){.ddga-combobox-trigger,.ddga-combobox-content{border:1px solid canvastext}.ddga-combobox-trigger:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-combobox-item[data-selected=true]{color:highlighttext;background-color:highlight}}}
 /*# sourceMappingURL=combobox.css.map */

package/dist/components/combobox.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAGE,2OASA,uDAOA,oYAkBA,iHAKA,mHAMA,kIAMA,uGAMA,mEAGA,8HAKA,4GAQA,+DAIA,mGASA,wQAeA,iGAGA,mFAGA,4HAUA,wDAWA,yFAMA,uOAWA,qEAMA,2FAOA,+KAQA,oVAoBA,iFAGA,4FAKA,sKASA,oEAIA,iHAUA,6QAUA,8FAKA,gKASA,uCACE,kGAMF,8BACE,0EAIA","sources":["src/components/combobox.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Label + required ─── /\n\n .ddga-combobox__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-combobox__required {\n color: var(--ddga-color-error);\n }\n\n / ─── Trigger (Popover.Trigger as <button>) ─── /\n\n / Heights mirror Input/Select so triggers and text inputs line up. /\n .ddga-combobox-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\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-color-foreground);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-combobox-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-combobox-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-combobox-trigger:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-combobox-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-combobox-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-combobox-trigger--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-combobox__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-combobox__placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-combobox__icon {\n flex-shrink: 0;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-secondary);\n }\n\n / ─── Popover content panel ─── /\n\n .ddga-combobox-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n overflow: hidden;\n z-index: 50;\n / `inline-size: var(--radix-popover-trigger-width)` set inline so the\n panel always matches trigger width. min-width fallback for very narrow\n triggers; the popper var is what wins normally. /\n min-inline-size: 200px;\n }\n\n / Same in/out animation as DropdownMenu — fast + subtle. /\n .ddga-combobox-content[data-state='open'] {\n animation: ddga-combobox-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-combobox-content[data-state='closed'] {\n animation: ddga-combobox-out 80ms ease-in;\n }\n @keyframes ddga-combobox-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-combobox-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n / ─── cmdk root + input ─── /\n\n .ddga-combobox-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-combobox-input {\n inline-size: 100%;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border: 0;\n border-block-end: 1px solid var(--ddga-color-border);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-combobox-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / ─── List + items ─── /\n\n .ddga-combobox-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n\n .ddga-combobox-empty {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n .ddga-combobox-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n / cmdk sets data-selected='true' on the actively highlighted item (keyboard\n or hover) — that's the background below. The chosen value is a distinct\n concept: the component marks it with data-active='' and shows it via the\n check icon (not a background), so the highlight and the selection never\n visually collide. /\n .ddga-combobox-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-combobox-item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-combobox-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n flex-shrink: 0;\n color: var(--ddga-color-primary);\n }\n .ddga-combobox-item__check > svg {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-combobox-item__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / ─── Group + Separator ─── /\n\n .ddga-combobox-group [cmdk-group-heading] {\n padding-block: var(--ddga-space-1);\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 }\n / Protect Arabic cursive joining — drop the tracking when RTL. /\n [dir='rtl'] .ddga-combobox-group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-combobox-separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) -1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-combobox-content[data-state='open'],\n .ddga-combobox-content[data-state='closed'] {\n animation: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-combobox-trigger,\n .ddga-combobox-content {\n border: 1px solid CanvasText;\n }\n .ddga-combobox-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAGE,2OASA,uDAOA,oYAkBA,iHAKA,mHAMA,kIAMA,uGAMA,mEAGA,8HAKA,4GAQA,+DAIA,mGASA,wQAeA,iGAGA,mFAGA,4HAUA,wDAWA,yFAMA,uOAWA,qEAMA,2FAOA,+KAQA,oVAoBA,iFAGA,4FAKA,sKASA,oEAIA,iHAUA,6QAUA,8FAKA,gKASA,uCACE,kGAMF,8BACE,0EAIA,oFAIA","sources":["src/components/combobox.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Label + required ─── /\n\n .ddga-combobox__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-combobox__required {\n color: var(--ddga-color-error);\n }\n\n / ─── Trigger (Popover.Trigger as <button>) ─── /\n\n / Heights mirror Input/Select so triggers and text inputs line up. /\n .ddga-combobox-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\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-color-foreground);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-combobox-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-combobox-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-combobox-trigger:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-combobox-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-combobox-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-combobox-trigger--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-combobox__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-combobox__placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-combobox__icon {\n flex-shrink: 0;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-secondary);\n }\n\n / ─── Popover content panel ─── /\n\n .ddga-combobox-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n overflow: hidden;\n z-index: 50;\n / `inline-size: var(--radix-popover-trigger-width)` set inline so the\n panel always matches trigger width. min-width fallback for very narrow\n triggers; the popper var is what wins normally. /\n min-inline-size: 200px;\n }\n\n / Same in/out animation as DropdownMenu — fast + subtle. /\n .ddga-combobox-content[data-state='open'] {\n animation: ddga-combobox-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-combobox-content[data-state='closed'] {\n animation: ddga-combobox-out 80ms ease-in;\n }\n @keyframes ddga-combobox-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-combobox-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n / ─── cmdk root + input ─── /\n\n .ddga-combobox-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-combobox-input {\n inline-size: 100%;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border: 0;\n border-block-end: 1px solid var(--ddga-color-border);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-combobox-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / ─── List + items ─── /\n\n .ddga-combobox-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n\n .ddga-combobox-empty {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n .ddga-combobox-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n / cmdk sets data-selected='true' on the actively highlighted item (keyboard\n or hover) — that's the background below. The chosen value is a distinct\n concept: the component marks it with data-active='' and shows it via the\n check icon (not a background), so the highlight and the selection never\n visually collide. /\n .ddga-combobox-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-combobox-item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-combobox-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n flex-shrink: 0;\n color: var(--ddga-color-primary);\n }\n .ddga-combobox-item__check > svg {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-combobox-item__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / ─── Group + Separator ─── /\n\n .ddga-combobox-group [cmdk-group-heading] {\n padding-block: var(--ddga-space-1);\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 }\n / Protect Arabic cursive joining — drop the tracking when RTL. /\n [dir='rtl'] .ddga-combobox-group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-combobox-separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) -1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-combobox-content[data-state='open'],\n .ddga-combobox-content[data-state='closed'] {\n animation: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-combobox-trigger,\n .ddga-combobox-content {\n border: 1px solid CanvasText;\n }\n .ddga-combobox-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-combobox-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n"],"names":[]}

package/dist/components/command.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-command{background-color:var(--ddga-color-card);min-block-size:0;inline-size:100%;color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);flex-direction:column;display:flex;overflow:hidden}.ddga-command--dialog{background-color:#0000;border:0;border-radius:0}.ddga-command__input-wrapper{align-items:center;gap:var(--ddga-space-2);padding-inline:var(--ddga-space-3);border-block-end:1px solid var(--ddga-color-border);display:flex}.ddga-command__search-icon{block-size:1rem;inline-size:1rem;color:var(--ddga-text-secondary);flex-shrink:0}.ddga-command__input{min-inline-size:0;padding-block:var(--ddga-space-3);color:inherit;font:inherit;background-color:#0000;border:0;outline:none;flex:auto}.ddga-command__input::placeholder{color:var(--ddga-text-placeholder)}.ddga-command__list{min-block-size:0;max-block-size:min(360px,60vh);padding:var(--ddga-space-1);scroll-padding-block:var(--ddga-space-1);flex:auto;overflow:hidden auto}.ddga-command__empty{padding-block:var(--ddga-space-5);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-tertiary);text-align:center}.ddga-command__group [cmdk-group-heading]{padding-block:var(--ddga-space-1);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}[dir=rtl] .ddga-command__group [cmdk-group-heading]{letter-spacing:normal;text-transform:none}.ddga-command__separator{block-size:1px;margin-block:var(--ddga-space-1);background-color:var(--ddga-color-border)}.ddga-command__item{align-items:center;gap:var(--ddga-space-2);padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-command__item[data-selected=true]{background-color:var(--ddga-color-muted)}.ddga-command__item[data-disabled=true]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-command__item-icon{block-size:1rem;inline-size:1rem;color:var(--ddga-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-command__item-icon>svg{block-size:1rem;inline-size:1rem}.ddga-command__item-label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-command__item-shortcut{font-size:var(--ddga-font-size-xs);letter-spacing:.05em;color:var(--ddga-text-tertiary);flex-shrink:0;margin-inline-start:auto}[dir=rtl] .ddga-command__item-shortcut{letter-spacing:normal}.ddga-command__overlay{z-index:60;background-color:#00000080;animation-duration:.15s;animation-timing-function:ease;position:fixed;inset:0}.ddga-command-dialog{inset-block-start:12vh;z-index:61;inline-size:min(var(--ddga-command-dialog-width,640px), calc(100vw - 2rem));background-color:var(--ddga-color-card);max-block-size:min(70vh,480px);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;animation-duration:.18s;animation-timing-function:ease;display:flex;position:fixed;left:50%;overflow:hidden;transform:translate(-50%)}.ddga-command-dialog .ddga-command{min-block-size:0}.ddga-command-dialog .ddga-command__list{max-block-size:none}.ddga-command__overlay[data-state=open]{animation-name:ddga-command-overlay-in}.ddga-command__overlay[data-state=closed]{animation-name:ddga-command-overlay-out}.ddga-command-dialog[data-state=open]{animation-name:ddga-command-dialog-in}.ddga-command-dialog[data-state=closed]{animation-name:ddga-command-dialog-out}@keyframes ddga-command-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes ddga-command-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes ddga-command-dialog-in{0%{opacity:0;transform:translate(-50%)translateY(-8px)scale(.98)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}@keyframes ddga-command-dialog-out{0%{opacity:1;transform:translate(-50%)translateY(0)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-8px)scale(.98)}}@media (prefers-reduced-motion:reduce){.ddga-command__overlay,.ddga-command-dialog{animation-duration:0s}}@media (forced-colors:active){.ddga-command,.ddga-command-dialog{border:1px solid canvastext}.ddga-command__item[data-selected=true]{color:highlighttext;background-color:highlight}}}
+@layer ddga-components{.ddga-command{background-color:var(--ddga-color-card);min-block-size:0;inline-size:100%;color:var(--ddga-color-card-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);flex-direction:column;display:flex;overflow:hidden}.ddga-command--dialog{background-color:#0000;border:0;border-radius:0}.ddga-command__input-wrapper{align-items:center;gap:var(--ddga-space-2);padding-inline:var(--ddga-space-3);border-block-end:1px solid var(--ddga-color-border);display:flex}.ddga-command__search-icon{block-size:1rem;inline-size:1rem;color:var(--ddga-text-secondary);flex-shrink:0}.ddga-command__input{min-inline-size:0;padding-block:var(--ddga-space-3);color:inherit;font:inherit;background-color:#0000;border:0;outline:none;flex:auto}.ddga-command__input::placeholder{color:var(--ddga-text-placeholder)}.ddga-command__list{min-block-size:0;max-block-size:min(360px,60vh);padding:var(--ddga-space-1);scroll-padding-block:var(--ddga-space-1);flex:auto;overflow:hidden auto}.ddga-command__empty{padding-block:var(--ddga-space-5);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm);color:var(--ddga-text-tertiary);text-align:center}.ddga-command__group [cmdk-group-heading]{padding-block:var(--ddga-space-1);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}[dir=rtl] .ddga-command__group [cmdk-group-heading]{letter-spacing:normal;text-transform:none}.ddga-command__separator{block-size:1px;margin-block:var(--ddga-space-1);background-color:var(--ddga-color-border)}.ddga-command__item{align-items:center;gap:var(--ddga-space-2);padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-sm);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-command__item[data-selected=true]{background-color:var(--ddga-color-muted)}.ddga-command__item[data-disabled=true]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-command__item-icon{block-size:1rem;inline-size:1rem;color:var(--ddga-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-command__item-icon>svg{block-size:1rem;inline-size:1rem}.ddga-command__item-label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.ddga-command__item-shortcut{font-size:var(--ddga-font-size-xs);letter-spacing:.05em;color:var(--ddga-text-tertiary);flex-shrink:0;margin-inline-start:auto}[dir=rtl] .ddga-command__item-shortcut{letter-spacing:normal}.ddga-command__overlay{z-index:60;background-color:#00000080;animation-duration:.15s;animation-timing-function:ease;position:fixed;inset:0}.ddga-command-dialog{inset-block-start:12vh;z-index:61;inline-size:min(var(--ddga-command-dialog-width,640px), calc(100vw - 2rem));background-color:var(--ddga-color-card);max-block-size:min(70vh,480px);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;animation-duration:.18s;animation-timing-function:ease;display:flex;position:fixed;left:50%;overflow:hidden;transform:translate(-50%)}.ddga-command-dialog .ddga-command{min-block-size:0}.ddga-command-dialog .ddga-command__list{max-block-size:none}.ddga-command__overlay[data-state=open]{animation-name:ddga-command-overlay-in}.ddga-command__overlay[data-state=closed]{animation-name:ddga-command-overlay-out}.ddga-command-dialog[data-state=open]{animation-name:ddga-command-dialog-in}.ddga-command-dialog[data-state=closed]{animation-name:ddga-command-dialog-out}@keyframes ddga-command-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes ddga-command-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes ddga-command-dialog-in{0%{opacity:0;transform:translate(-50%)translateY(-8px)scale(.98)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}@keyframes ddga-command-dialog-out{0%{opacity:1;transform:translate(-50%)translateY(0)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-8px)scale(.98)}}@media (prefers-reduced-motion:reduce){.ddga-command__overlay,.ddga-command-dialog{animation-duration:0s}}@media (forced-colors:active){.ddga-command,.ddga-command-dialog{border:1px solid canvastext}.ddga-command__item[data-selected=true]{color:highlighttext;background-color:highlight}.ddga-command__separator{background-color:canvastext}}}
 /*# sourceMappingURL=command.css.map */

package/dist/components/command.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAOE,iQAYA,sEAQA,4KAQA,2GAOA,2JAUA,qEAMA,wKAYA,+KAUA,6QAUA,8FAKA,mHAQA,oVAeA,iFAGA,4FAKA,uKASA,8DAKA,gHASA,4JAOA,6DAMA,2IASA,6fAwBA,oDAGA,6DAMA,+EAGA,kFAGA,4EAGA,+EAIA,8DAQA,+DAQA,gKAUA,iKAWA,uCACE,mEAQF,8BACE,+DAIA","sources":["src/components/command.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Root (cmdk container) ─── /\n /\n * Base look is the standalone inline box (bordered card). Inside\n * CommandDialog the `--dialog` modifier drops the border/bg because the\n * dialog shell owns the surface.\n /\n .ddga-command {\n display: flex;\n flex-direction: column;\n inline-size: 100%;\n min-block-size: 0;\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-md);\n overflow: hidden;\n }\n\n .ddga-command--dialog {\n border: 0;\n border-radius: 0;\n background-color: transparent;\n }\n\n / ─── Search input row ─── /\n\n .ddga-command__input-wrapper {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-command__search-icon {\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-command__input {\n flex: 1 1 auto;\n min-inline-size: 0;\n padding-block: var(--ddga-space-3);\n border: 0;\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-command__input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / ─── List + states ─── /\n\n .ddga-command__list {\n flex: 1 1 auto;\n min-block-size: 0;\n / Cap height for the inline surface; the dialog overrides via its own\n max-block-size. cmdk scroll-into-view drives against this container. /\n max-block-size: min(360px, 60vh);\n overflow-y: auto;\n overflow-x: hidden;\n padding: var(--ddga-space-1);\n scroll-padding-block: var(--ddga-space-1);\n }\n\n .ddga-command__empty {\n padding-block: var(--ddga-space-5);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n / ─── Group + separator ─── /\n\n .ddga-command__group [cmdk-group-heading] {\n padding-block: var(--ddga-space-1);\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 }\n / Protect Arabic cursive joining — drop the tracking when RTL. /\n [dir='rtl'] .ddga-command__group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-command__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n background-color: var(--ddga-color-border);\n }\n\n / ─── Item ─── /\n\n .ddga-command__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n / cmdk highlights the active item (keyboard / hover) via data-selected. /\n .ddga-command__item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-command__item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-command__item-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n .ddga-command__item-icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n\n .ddga-command__item-label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / Shortcut hint sits at the inline-end (logical → RTL-correct). /\n .ddga-command__item-shortcut {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: var(--ddga-font-size-xs);\n letter-spacing: 0.05em;\n color: var(--ddga-text-tertiary);\n }\n [dir='rtl'] .ddga-command__item-shortcut {\n letter-spacing: normal;\n }\n\n / ─── Dialog shell (Radix Dialog) ─── /\n\n .ddga-command__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-command-dialog {\n / Spotlight-style: horizontally centered, anchored near the top. Physical\n left + translateX for centering (direction-agnostic; pairing\n inset-inline-start with a physical translate would shift it off-screen\n in RTL — same rationale as Modal). /\n position: fixed;\n inset-block-start: 12vh;\n left: 50%;\n transform: translateX(-50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n inline-size: min(var(--ddga-command-dialog-width, 640px), calc(100vw - 2rem));\n max-block-size: min(70vh, 480px);\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 overflow: hidden;\n animation-duration: 180ms;\n animation-timing-function: ease;\n }\n / The inner cmdk root + its list fill the dialog and scroll inside it. /\n .ddga-command-dialog .ddga-command {\n min-block-size: 0;\n }\n .ddga-command-dialog .ddga-command__list {\n max-block-size: none;\n }\n\n / ─── Animations (Radix data-state) ─── /\n\n .ddga-command__overlay[data-state='open'] {\n animation-name: ddga-command-overlay-in;\n }\n .ddga-command__overlay[data-state='closed'] {\n animation-name: ddga-command-overlay-out;\n }\n .ddga-command-dialog[data-state='open'] {\n animation-name: ddga-command-dialog-in;\n }\n .ddga-command-dialog[data-state='closed'] {\n animation-name: ddga-command-dialog-out;\n }\n\n @keyframes ddga-command-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-command-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes ddga-command-dialog-in {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n }\n @keyframes ddga-command-dialog-out {\n from {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-command__overlay,\n .ddga-command-dialog {\n animation-duration: 0ms;\n }\n }\n\n / ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-command,\n .ddga-command-dialog {\n border: 1px solid CanvasText;\n }\n .ddga-command__item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAOE,iQAYA,sEAQA,4KAQA,2GAOA,2JAUA,qEAMA,wKAYA,+KAUA,6QAUA,8FAKA,mHAQA,oVAeA,iFAGA,4FAKA,uKASA,8DAKA,gHASA,4JAOA,6DAMA,2IASA,6fAwBA,oDAGA,6DAMA,+EAGA,kFAGA,4EAGA,+EAIA,8DAQA,+DAQA,gKAUA,iKAWA,uCACE,mEAQF,8BACE,+DAIA,uFAIA","sources":["src/components/command.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Root (cmdk container) ─── /\n /\n * Base look is the standalone inline box (bordered card). Inside\n * CommandDialog the `--dialog` modifier drops the border/bg because the\n * dialog shell owns the surface.\n /\n .ddga-command {\n display: flex;\n flex-direction: column;\n inline-size: 100%;\n min-block-size: 0;\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-md);\n overflow: hidden;\n }\n\n .ddga-command--dialog {\n border: 0;\n border-radius: 0;\n background-color: transparent;\n }\n\n / ─── Search input row ─── /\n\n .ddga-command__input-wrapper {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-command__search-icon {\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-command__input {\n flex: 1 1 auto;\n min-inline-size: 0;\n padding-block: var(--ddga-space-3);\n border: 0;\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-command__input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n / ─── List + states ─── /\n\n .ddga-command__list {\n flex: 1 1 auto;\n min-block-size: 0;\n / Cap height for the inline surface; the dialog overrides via its own\n max-block-size. cmdk scroll-into-view drives against this container. /\n max-block-size: min(360px, 60vh);\n overflow-y: auto;\n overflow-x: hidden;\n padding: var(--ddga-space-1);\n scroll-padding-block: var(--ddga-space-1);\n }\n\n .ddga-command__empty {\n padding-block: var(--ddga-space-5);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n / ─── Group + separator ─── /\n\n .ddga-command__group [cmdk-group-heading] {\n padding-block: var(--ddga-space-1);\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 }\n / Protect Arabic cursive joining — drop the tracking when RTL. /\n [dir='rtl'] .ddga-command__group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-command__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n background-color: var(--ddga-color-border);\n }\n\n / ─── Item ─── /\n\n .ddga-command__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n / cmdk highlights the active item (keyboard / hover) via data-selected. /\n .ddga-command__item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-command__item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-command__item-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n .ddga-command__item-icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n\n .ddga-command__item-label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n / Shortcut hint sits at the inline-end (logical → RTL-correct). /\n .ddga-command__item-shortcut {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: var(--ddga-font-size-xs);\n letter-spacing: 0.05em;\n color: var(--ddga-text-tertiary);\n }\n [dir='rtl'] .ddga-command__item-shortcut {\n letter-spacing: normal;\n }\n\n / ─── Dialog shell (Radix Dialog) ─── /\n\n .ddga-command__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-command-dialog {\n / Spotlight-style: horizontally centered, anchored near the top. Physical\n left + translateX for centering (direction-agnostic; pairing\n inset-inline-start with a physical translate would shift it off-screen\n in RTL — same rationale as Modal). /\n position: fixed;\n inset-block-start: 12vh;\n left: 50%;\n transform: translateX(-50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n inline-size: min(var(--ddga-command-dialog-width, 640px), calc(100vw - 2rem));\n max-block-size: min(70vh, 480px);\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 overflow: hidden;\n animation-duration: 180ms;\n animation-timing-function: ease;\n }\n / The inner cmdk root + its list fill the dialog and scroll inside it. /\n .ddga-command-dialog .ddga-command {\n min-block-size: 0;\n }\n .ddga-command-dialog .ddga-command__list {\n max-block-size: none;\n }\n\n / ─── Animations (Radix data-state) ─── /\n\n .ddga-command__overlay[data-state='open'] {\n animation-name: ddga-command-overlay-in;\n }\n .ddga-command__overlay[data-state='closed'] {\n animation-name: ddga-command-overlay-out;\n }\n .ddga-command-dialog[data-state='open'] {\n animation-name: ddga-command-dialog-in;\n }\n .ddga-command-dialog[data-state='closed'] {\n animation-name: ddga-command-dialog-out;\n }\n\n @keyframes ddga-command-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-command-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes ddga-command-dialog-in {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n }\n @keyframes ddga-command-dialog-out {\n from {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-command__overlay,\n .ddga-command-dialog {\n animation-duration: 0ms;\n }\n }\n\n / ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-command,\n .ddga-command-dialog {\n border: 1px solid CanvasText;\n }\n .ddga-command__item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-command__separator {\n background-color: CanvasText;\n }\n }\n}\n"],"names":[]}

package/dist/components/date-picker.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-date-picker__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);display:inline-flex}.ddga-date-picker__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-date-picker-trigger{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-date-picker-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-date-picker-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-date-picker-trigger[data-focus-within]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-picker-trigger[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-date-picker-trigger--error{border-color:var(--ddga-color-error)}.ddga-date-picker-trigger--error[data-focus-within]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-date-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:auto;align-items:center;min-inline-size:0;display:inline-flex}.ddga-date-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-color-foreground);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-date-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker__segment[data-type=literal]{color:var(--ddga-text-tertiary);padding-inline:0}.ddga-date-picker__segment[data-type=literal][data-focused]{color:var(--ddga-text-tertiary);background-color:#0000}.ddga-date-picker__icon-button{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}.ddga-date-picker__icon-button:hover{color:var(--ddga-color-foreground);background-color:var(--ddga-color-muted)}.ddga-date-picker__icon-button[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker__icon-button[data-disabled]{cursor:not-allowed}.ddga-date-picker__icon{block-size:1em;inline-size:1em}@media (prefers-reduced-motion:reduce){.ddga-date-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-picker-trigger{border:1px solid canvastext}.ddga-date-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}}}
+@layer ddga-components{.ddga-date-picker__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);display:inline-flex}.ddga-date-picker__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-date-picker-trigger{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-date-picker-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-date-picker-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-date-picker-trigger[data-focus-within]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-picker-trigger[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-date-picker-trigger--error{border-color:var(--ddga-color-error)}.ddga-date-picker-trigger--error[data-focus-within]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-date-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:auto;align-items:center;min-inline-size:0;display:inline-flex}.ddga-date-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-color-foreground);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-date-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker__segment[data-type=literal]{color:var(--ddga-text-tertiary);padding-inline:0}.ddga-date-picker__segment[data-type=literal][data-focused]{color:var(--ddga-text-tertiary);background-color:#0000}.ddga-date-picker__icon-button{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}.ddga-date-picker__icon-button:hover{color:var(--ddga-color-foreground);background-color:var(--ddga-color-muted)}.ddga-date-picker__icon-button[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker__icon-button[data-disabled]{cursor:not-allowed}.ddga-date-picker__icon{block-size:1em;inline-size:1em}@media (prefers-reduced-motion:reduce){.ddga-date-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-picker-trigger{border:1px solid canvastext}.ddga-date-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-picker__segment[data-focused]{forced-color-adjust:none;color:highlighttext;background-color:highlight}.ddga-date-picker__icon-button[data-focus-visible]{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}}
 /*# sourceMappingURL=date-picker.css.map */

package/dist/components/date-picker.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,uBAQE,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAYA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAOA,uCACE,2CAOF,8BACE,sDAGA","sources":["src/components/date-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DatePicker field/trigger chrome only. The calendar dropdown (popover,\n toggle, month grid) is shared with DateRangePicker — see calendar.css.\n Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. /\n\n / ─── Label + required ─── /\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n }\n .ddga-date-picker__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Trigger (react-aria Group, hosts segments + icon button) ─── /\n\n / Heights match Input/Select so DatePicker triggers line up in a form row.\n The Group itself is the border/focus container — react-aria emits\n data-focus-within when any segment or the icon button has focus. /\n .ddga-date-picker-trigger {\n display: inline-flex;\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-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n text-align: start;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-date-picker-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-picker-trigger[data-focus-within] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-date-picker-trigger[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-date-picker-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n / ─── DateInput + Segments ─── /\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 1 1 auto;\n min-inline-size: 0;\n / Force LTR segment direction even in RTL UI so dates always read\n day-month-year left-to-right (matches react-aria's recommended UX for\n numeric date entry — keeps mental model stable across locales). /\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-date-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-color-foreground);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n / Non-editable segments (literal separators like \"/\" or \"-\") shouldn't show\n the focus background even if Tab lands on them — react-aria marks them with\n data-type=\"literal\". /\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Calendar icon button (popover trigger) ─── /\n\n .ddga-date-picker__icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n margin-inline-start: auto;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker__icon-button:hover {\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-picker__icon-button[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker__icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n }\n}\n"],"names":[]}
1	+ {"version":3,"mappings":"AAAA,uBAQE,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAYA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAOA,uCACE,2CAOF,8BACE,sDAGA,4FAIA,iHAKA","sources":["src/components/date-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DatePicker field/trigger chrome only. The calendar dropdown (popover,\n toggle, month grid) is shared with DateRangePicker — see calendar.css.\n Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. /\n\n / ─── Label + required ─── /\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n }\n .ddga-date-picker__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n / ─── Trigger (react-aria Group, hosts segments + icon button) ─── /\n\n / Heights match Input/Select so DatePicker triggers line up in a form row.\n The Group itself is the border/focus container — react-aria emits\n data-focus-within when any segment or the icon button has focus. /\n .ddga-date-picker-trigger {\n display: inline-flex;\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-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n text-align: start;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-date-picker-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-picker-trigger[data-focus-within] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-date-picker-trigger[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-date-picker-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n / ─── DateInput + Segments ─── /\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 1 1 auto;\n min-inline-size: 0;\n / Force LTR segment direction even in RTL UI so dates always read\n day-month-year left-to-right (matches react-aria's recommended UX for\n numeric date entry — keeps mental model stable across locales). /\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-date-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-color-foreground);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n / Non-editable segments (literal separators like \"/\" or \"-\") shouldn't show\n the focus background even if Tab lands on them — react-aria marks them with\n data-type=\"literal\". /\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-text-tertiary);\n }\n\n / ─── Calendar icon button (popover trigger) ─── /\n\n .ddga-date-picker__icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n margin-inline-start: auto;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker__icon-button:hover {\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-picker__icon-button[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker__icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-picker__segment[data-focused] {\n forced-color-adjust: none;\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n box-shadow: none;\n }\n }\n}\n"],"names":[]}

package/dist/components/sidebar.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;min-block-size:100%;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-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{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{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}}}
+@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;min-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-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{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}}}
 /*# sourceMappingURL=sidebar.css.map */

package/dist/components/sidebar.css.map CHANGED Viewed

	@@ -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,6HAKA,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__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,sIAeA,+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 / Self-sufficient full height (matches shadcn's `min-h-svh`): the shell fills\n the viewport without the consumer building an html→body→root height chain.\n `svh` (not `dvh`) avoids reflow as mobile browser chrome shows/hides. For an\n embedded/boxed sidebar, override `min-block-size` on the wrapper. /\n min-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 / 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":[]}