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

@dev-dga/css 0.8.1 → 0.8.2

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 +6 -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,11 @@
 # @dev-dga/css
+## 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: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,.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,oIAWA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAWA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,mLAIA,2JAGA,mHAQA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE","sources":["src/components/sidebar.css"],"sourcesContent":["@layer ddga-components {\n /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n data-state (expanded\|collapsed), data-collapsible (icon\|offcanvas\|none),\n data-variant (sidebar\|floating\|inset), data-side (start\|end). Widths are\n custom properties so consumers override per instance. Logical properties\n keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. /\n\n .ddga-sidebar-wrapper {\n --ddga-sidebar-width: 16rem;\n --ddga-sidebar-width-icon: 3.5rem;\n\n display: flex;\n min-block-size: 100%;\n inline-size: 100%;\n }\n\n / ─── Container ─── /\n\n .ddga-sidebar {\n display: flex;\n flex-direction: column;\n flex: none;\n inline-size: var(--ddga-sidebar-width);\n block-size: 100%;\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border-inline-end: 1px solid var(--ddga-color-border);\n / Shared easing + duration for the whole collapse so width, paddings and\n fades stay in lockstep (Material standard ease). /\n transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: inline-size;\n overflow: hidden;\n }\n\n / side=end → border on the opposite logical edge and order after the inset. /\n .ddga-sidebar[data-side='end'] {\n order: 1;\n border-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n }\n\n / Collapsed icon rail. /\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n inline-size: var(--ddga-sidebar-width-icon);\n }\n\n / Offcanvas collapse fully hides on desktop. /\n .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n inline-size: 0;\n border-inline: 0;\n }\n\n / ─── Variants ─── /\n\n .ddga-sidebar[data-variant='floating'] {\n margin: var(--ddga-space-2);\n block-size: auto;\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-sidebar[data-variant='inset'] {\n border-inline-end: 0;\n background-color: transparent;\n }\n\n / Mobile: the Drawer owns positioning; just set the panel width + layout. /\n .ddga-sidebar--mobile {\n inline-size: var(--ddga-sidebar-width);\n max-inline-size: 85vw;\n display: flex;\n flex-direction: column;\n }\n\n / ─── Inset (main content region) ─── /\n\n .ddga-sidebar-inset {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n }\n\n / When a sibling sidebar uses variant=inset, the main area floats as a card.\n Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n inset card styling is opt-in via a modifier the consumer adds, OR scope by\n wrapper. Keep it simple: provide the card look on a data hook. /\n .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n margin: var(--ddga-space-2);\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-sm);\n overflow: hidden;\n }\n\n / ─── Trigger / Rail ─── /\n\n .ddga-sidebar__trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__trigger:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__trigger > svg {\n inline-size: 1.125rem;\n block-size: 1.125rem;\n }\n\n .ddga-sidebar__rail {\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n inline-size: 0.75rem;\n transform: translateX(50%);\n cursor: col-resize;\n border: 0;\n background: transparent;\n }\n [dir='rtl'] .ddga-sidebar__rail {\n transform: translateX(-50%);\n }\n\n / ─── Header / Content / Footer / Separator ─── /\n\n .ddga-sidebar__header,\n .ddga-sidebar__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-sidebar__content {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: var(--ddga-space-2);\n border: 0;\n background-color: var(--ddga-color-border);\n }\n\n / ─── Group ─── /\n\n .ddga-sidebar__group {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__group-label {\n display: flex;\n align-items: center;\n block-size: 1.75rem;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n white-space: nowrap;\n overflow: hidden;\n transition:\n block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 150ms ease;\n }\n / Protect Arabic letter joining — no tracking, no uppercasing. /\n [dir='rtl'] .ddga-sidebar__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-sidebar__group-action {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__group-action:hover {\n background-color: var(--ddga-color-muted);\n }\n\n / Collapsed rail — fade/collapse instead of display:none so nothing pops.\n Group label collapses its height (and fades); group action + badge fade.\n The sub-menu list is the only hard hide (it's replaced by the Popover\n flyout when collapsed, so animating it adds no value). /\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n block-size: 0;\n margin-block: 0;\n padding-block: 0;\n opacity: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n opacity: 0;\n pointer-events: none;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n display: none;\n }\n\n / ─── Menu ─── /\n\n .ddga-sidebar__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-item {\n position: relative;\n }\n\n .ddga-sidebar__menu-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n min-inline-size: 0;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-md);\n background: transparent;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n / background/color ease for hover + active feedback; padding-inline shares\n the collapse easing so the icon glides to centre in lockstep with width. /\n transition:\n background-color 120ms ease,\n color 120ms ease,\n padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ddga-sidebar__menu-button > svg {\n flex: none;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n color: var(--ddga-text-secondary);\n transition: color 120ms ease;\n }\n / Everything after the leading icon (label, trailing chevron, inline badge)\n fades on collapse rather than snapping out. /\n .ddga-sidebar__menu-button > :not(:first-child) {\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__menu-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-button:active {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-button[data-active='true'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-button[data-active='true'] > svg {\n color: var(--ddga-color-primary);\n }\n\n .ddga-sidebar__menu-button--sm {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-sidebar__menu-button--lg {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n that would snap it to the centre of the still-wide box, then swoop inward).\n Instead the parent content/group padding animates to 0 and the button's own\n inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n icon travel is a few px, fully in sync with the width, so no glitch. The\n label/chevron/badge fade via the base opacity transition above. /\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group {\n padding-inline: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n .ddga-sidebar__menu-button\n > :not(:first-child) {\n opacity: 0;\n }\n\n /* Collapsed rail: center header/footer content and clip overflow so a wide\n brand/label doesn't spill past the rail edge. /\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n align-items: center;\n }\n\n / ─── Menu action / badge / skeleton ─── /\n\n .ddga-sidebar__menu-action {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-1);\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__menu-action:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-action:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__menu-action[data-show-on-hover] {\n opacity: 0;\n }\n .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n opacity: 1;\n }\n\n .ddga-sidebar__menu-badge {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-2);\n transform: translateY(-50%);\n pointer-events: none;\n min-inline-size: 1.25rem;\n block-size: 1.25rem;\n padding-inline: var(--ddga-space-1);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n .ddga-sidebar__menu-skeleton {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n }\n .ddga-sidebar__menu-skeleton-text {\n flex: 1 1 auto;\n max-inline-size: 12rem;\n }\n\n / ─── Sub-menu ─── /\n\n .ddga-sidebar__menu-sub {\n list-style: none;\n margin: 0;\n margin-inline-start: var(--ddga-space-3);\n padding-inline-start: var(--ddga-space-2);\n border-inline-start: 1px solid var(--ddga-color-border);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-sub-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-sidebar__menu-sub-button:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-sub-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'] {\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-sub-button--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n / ─── Forced colors ─── /\n\n @media (forced-colors: active) {\n .ddga-sidebar {\n border-color: CanvasText;\n }\n .ddga-sidebar__menu-button[data-active='true'],\n .ddga-sidebar__menu-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'],\n .ddga-sidebar__menu-sub-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__separator,\n .ddga-sidebar__menu-sub {\n background-color: CanvasText;\n border-color: CanvasText;\n }\n }\n\n / ─── Reduced motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-sidebar,\n .ddga-sidebar__content,\n .ddga-sidebar__group,\n .ddga-sidebar__group-label,\n .ddga-sidebar__group-action,\n .ddga-sidebar__menu-button,\n .ddga-sidebar__menu-button > svg,\n .ddga-sidebar__menu-button > ,\n .ddga-sidebar__menu-badge,\n .ddga-sidebar__menu-sub-button {\n transition: none;\n }\n }\n}\n"],"names":[]}