@dev-dga/css 0.8.0 → 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.
- package/CHANGELOG.md +12 -0
- package/dist/components/aspect-ratio.css +2 -0
- package/dist/components/aspect-ratio.css.map +1 -0
- package/dist/components/avatar.css +1 -1
- package/dist/components/avatar.css.map +1 -1
- package/dist/components/badge.css +1 -1
- package/dist/components/badge.css.map +1 -1
- package/dist/components/button.css +1 -1
- package/dist/components/button.css.map +1 -1
- package/dist/components/calendar.css +2 -0
- package/dist/components/calendar.css.map +1 -0
- package/dist/components/card.css +1 -1
- package/dist/components/card.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/date-range-picker.css +2 -0
- package/dist/components/date-range-picker.css.map +1 -0
- package/dist/components/description-list.css +1 -1
- package/dist/components/description-list.css.map +1 -1
- package/dist/components/dropdown-menu.css +1 -1
- package/dist/components/dropdown-menu.css.map +1 -1
- package/dist/components/file-upload.css +1 -1
- package/dist/components/file-upload.css.map +1 -1
- package/dist/components/menubar.css +1 -1
- package/dist/components/menubar.css.map +1 -1
- package/dist/components/progress.css +1 -1
- package/dist/components/progress.css.map +1 -1
- package/dist/components/select.css +1 -1
- package/dist/components/select.css.map +1 -1
- package/dist/components/sidebar.css +1 -1
- package/dist/components/sidebar.css.map +1 -1
- package/dist/components/skeleton.css +1 -1
- package/dist/components/skeleton.css.map +1 -1
- package/dist/components/slider.css +1 -1
- package/dist/components/slider.css.map +1 -1
- package/dist/components/stat.css +1 -1
- package/dist/components/stat.css.map +1 -1
- package/dist/components/switch.css +1 -1
- package/dist/components/switch.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAKE,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,8GAIA,kFAOF,4GAOA,iHAGA","sources":["src/components/description-list.css"],"sourcesContent":["@layer ddga-components {\n /* Semantic <dl>/<dt>/<dd> key–value list. Layout cascades from the root\n variant to the rows; logical properties keep label/value alignment\n correct in RTL. */\n\n .ddga-description-list {\n /* Term column width in horizontal layout; override per instance. */\n --ddga-dl-term-width: 12rem;\n\n margin: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-description-list__item {\n display: flex;\n gap: var(--ddga-space-2) var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n }\n\n .ddga-description-list__term {\n color: var(--ddga-text-secondary);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n }\n\n .ddga-description-list__details {\n margin: 0;\n color: var(--ddga-text-primary);\n line-height: 1.5;\n }\n\n /* ─── Horizontal: term beside details (review / summary screens) ─── */\n\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: row;\n align-items: baseline;\n }\n\n .ddga-description-list--horizontal .ddga-description-list__term {\n flex: none;\n inline-size: var(--ddga-dl-term-width);\n }\n\n .ddga-description-list--horizontal .ddga-description-list__details {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n /* Stack rows on narrow viewports so labels don't crush the values. */\n @media (max-width: 480px) {\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n .ddga-description-list--horizontal .ddga-description-list__term {\n inline-size: auto;\n }\n }\n\n /* ─── Vertical: term above details ─── */\n\n .ddga-description-list--vertical .ddga-description-list__item {\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n /* ─── Dividers between rows ─── */\n\n .ddga-description-list--divided .ddga-description-list__item {\n border-block-end: 1px solid var(--ddga-color-border);\n }\n .ddga-description-list--divided .ddga-description-list__item:last-child {\n border-block-end: 0;\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAKE,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,8GAIA,kFAOF,4GAOA,iHAGA,2FAMA,8BACE","sources":["src/components/description-list.css"],"sourcesContent":["@layer ddga-components {\n /* Semantic <dl>/<dt>/<dd> key–value list. Layout cascades from the root\n variant to the rows; logical properties keep label/value alignment\n correct in RTL. */\n\n .ddga-description-list {\n /* Term column width in horizontal layout; override per instance. */\n --ddga-dl-term-width: 12rem;\n\n margin: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-description-list__item {\n display: flex;\n gap: var(--ddga-space-2) var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n }\n\n .ddga-description-list__term {\n color: var(--ddga-text-secondary);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n }\n\n .ddga-description-list__details {\n margin: 0;\n color: var(--ddga-text-primary);\n line-height: 1.5;\n }\n\n /* ─── Horizontal: term beside details (review / summary screens) ─── */\n\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: row;\n align-items: baseline;\n }\n\n .ddga-description-list--horizontal .ddga-description-list__term {\n flex: none;\n inline-size: var(--ddga-dl-term-width);\n }\n\n .ddga-description-list--horizontal .ddga-description-list__details {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n /* Stack rows on narrow viewports so labels don't crush the values. */\n @media (max-width: 480px) {\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n .ddga-description-list--horizontal .ddga-description-list__term {\n inline-size: auto;\n }\n }\n\n /* ─── Vertical: term above details ─── */\n\n .ddga-description-list--vertical .ddga-description-list__item {\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n /* ─── Dividers between rows ─── */\n\n .ddga-description-list--divided .ddga-description-list__item {\n border-block-end: 1px solid var(--ddga-color-border);\n }\n .ddga-description-list--divided .ddga-description-list__item:last-child {\n border-block-end: 0;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-description-list--divided .ddga-description-list__item {\n border-block-end-color: CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-dropdown-menu{min-inline-size:192px;max-inline-size:320px;padding:var(--ddga-space-1);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;outline:none;font-family:inherit}.ddga-dropdown-menu[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-dropdown-menu-in}.ddga-dropdown-menu[data-state=closed]{animation:80ms ease-in ddga-dropdown-menu-out}@keyframes ddga-dropdown-menu-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-dropdown-menu-out{0%{opacity:1}to{opacity:0}}.ddga-dropdown-menu--sm{font-size:var(--ddga-font-size-sm)}.ddga-dropdown-menu--md{font-size:var(--ddga-font-size-base)}.ddga-dropdown-menu__item{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:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-dropdown-menu__item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-dropdown-menu__item[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-dropdown-menu__item[data-destructive]{color:var(--ddga-color-destructive)}.ddga-dropdown-menu__item[data-destructive][data-highlighted]{background-color:var(--ddga-error-50)}.ddga-dropdown-menu__label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;overflow:hidden}.ddga-dropdown-menu__icon{block-size:1em;inline-size:1em;color:var(--ddga-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-dropdown-menu__icon>svg{block-size:1em;inline-size:1em}.ddga-dropdown-menu__shortcut{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-tertiary);letter-spacing:.04em;margin-inline-start:auto}.ddga-dropdown-menu__item--checkable{padding-inline-start:calc(var(--ddga-space-2) + 1.25em);position:relative}.ddga-dropdown-menu__indicator{block-size:1em;inline-size:1em;color:var(--ddga-color-primary);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--ddga-space-2);transform:translateY(-50%)}.ddga-dropdown-menu__indicator-icon{block-size:.875em;inline-size:.875em}.ddga-dropdown-menu__radio-dot{border-radius:var(--ddga-radius-full);background-color:currentColor;block-size:.5em;inline-size:.5em;display:inline-block}.ddga-dropdown-menu__item--sub[data-state=open]{background-color:var(--ddga-color-muted)}.ddga-dropdown-menu__sub-chevron{block-size:1em;inline-size:1em;color:var(--ddga-text-tertiary);margin-inline-start:auto}[dir=rtl] .ddga-dropdown-menu__sub-chevron{transform:scaleX(-1)}.ddga-dropdown-menu__group-label{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}.ddga-dropdown-menu__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 (forced-colors:active){.ddga-dropdown-menu{border:1px solid canvastext}.ddga-dropdown-menu__item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-dropdown-menu__separator{background-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-dropdown-menu[data-state=open],.ddga-dropdown-menu[data-state=closed]{animation:none}}}
|
|
1
|
+
@layer ddga-components{.ddga-dropdown-menu{min-inline-size:192px;max-inline-size:320px;padding:var(--ddga-space-1);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;outline:none;font-family:inherit}.ddga-dropdown-menu[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-dropdown-menu-in}.ddga-dropdown-menu[data-state=closed]{animation:80ms ease-in ddga-dropdown-menu-out}@keyframes ddga-dropdown-menu-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-dropdown-menu-out{0%{opacity:1}to{opacity:0}}.ddga-dropdown-menu--sm{font-size:var(--ddga-font-size-sm)}.ddga-dropdown-menu--md{font-size:var(--ddga-font-size-base)}.ddga-dropdown-menu__item{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:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-dropdown-menu__item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-dropdown-menu__item[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-dropdown-menu__item[data-destructive]{color:var(--ddga-color-destructive)}.ddga-dropdown-menu__item[data-destructive][data-highlighted]{background-color:var(--ddga-error-50)}.ddga-dropdown-menu__label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;overflow:hidden}.ddga-dropdown-menu__icon{block-size:1em;inline-size:1em;color:var(--ddga-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-dropdown-menu__icon>svg{block-size:1em;inline-size:1em}.ddga-dropdown-menu__shortcut{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-tertiary);letter-spacing:.04em;margin-inline-start:auto}.ddga-dropdown-menu__item--checkable{padding-inline-start:calc(var(--ddga-space-2) + 1.25em);position:relative}.ddga-dropdown-menu__indicator{block-size:1em;inline-size:1em;color:var(--ddga-color-primary);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--ddga-space-2);transform:translateY(-50%)}.ddga-dropdown-menu__indicator-icon{block-size:.875em;inline-size:.875em}.ddga-dropdown-menu__radio-dot{border-radius:var(--ddga-radius-full);background-color:currentColor;block-size:.5em;inline-size:.5em;display:inline-block}.ddga-dropdown-menu__item--sub[data-state=open]{background-color:var(--ddga-color-muted)}.ddga-dropdown-menu__sub-chevron{block-size:1em;inline-size:1em;color:var(--ddga-text-tertiary);margin-inline-start:auto}[dir=rtl] .ddga-dropdown-menu__sub-chevron{transform:scaleX(-1)}.ddga-dropdown-menu__group-label{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-dropdown-menu__group-label{letter-spacing:normal;text-transform:none}[dir=rtl] .ddga-dropdown-menu__shortcut{letter-spacing:normal}.ddga-dropdown-menu__separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:calc(var(--ddga-space-1) * -1);background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-dropdown-menu__item[data-destructive][data-highlighted]{color:var(--ddga-error-200,#fecdca);background-color:#d92d203d}@media (forced-colors:active){.ddga-dropdown-menu{border:1px solid canvastext}.ddga-dropdown-menu__item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-dropdown-menu__separator{background-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-dropdown-menu[data-state=open],.ddga-dropdown-menu[data-state=closed]{animation:none}}}
|
|
2
2
|
/*# sourceMappingURL=dropdown-menu.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAGE,wUAgBA,mGAGA,qFAIA,iIAUA,6DAWA,2DAGA,6DAMA,wUAiBA,qFAIA,6FAOA,gFAGA,oGAKA,iHAQA,sKASA,6DAKA,+IASA,+GAMA,sQAYA,yEAIA,yJAYA,yFAIA,yHAQA,gEAMA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAGE,wUAgBA,mGAGA,qFAIA,iIAUA,6DAWA,2DAGA,6DAMA,wUAiBA,qFAIA,6FAOA,gFAGA,oGAKA,iHAQA,sKASA,6DAKA,+IASA,+GAMA,sQAYA,yEAIA,yJAYA,yFAIA,yHAQA,gEAMA,oQAYA,qFAIA,8DAIA,sKAYA,+IAOA,8BACE,gDAGA,2FAIA,4DAOF,uCACE","sources":["src/components/dropdown-menu.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Panel (Content / SubContent) ─── */\n\n .ddga-dropdown-menu {\n min-inline-size: 192px;\n max-inline-size: 320px;\n padding: var(--ddga-space-1);\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 font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n surfaces feel instantaneous (this isn't a Modal). */\n .ddga-dropdown-menu[data-state='open'] {\n animation: ddga-dropdown-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-dropdown-menu[data-state='closed'] {\n animation: ddga-dropdown-menu-out 80ms ease-in;\n }\n\n @keyframes ddga-dropdown-menu-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-dropdown-menu-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Sizes ─── */\n\n .ddga-dropdown-menu--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-dropdown-menu--md {\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n .ddga-dropdown-menu__item {\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: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* Radix sets data-highlighted on the actively focused/hovered item — that's\n our only \"focus ring\" since the menu manages focus internally. */\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-dropdown-menu__item[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* Destructive: red text and a red-tinted hover. Tracks the destructive\n family the rest of the system uses. */\n .ddga-dropdown-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* Inline pieces inside the row. */\n .ddga-dropdown-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .ddga-dropdown-menu__icon {\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-text-secondary);\n }\n .ddga-dropdown-menu__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-dropdown-menu__shortcut {\n margin-inline-start: auto;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-tertiary);\n letter-spacing: 0.04em;\n }\n\n /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n .ddga-dropdown-menu__item--checkable {\n /* Reserve the indicator column even when unchecked so labels align. */\n padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n position: relative;\n }\n\n .ddga-dropdown-menu__indicator {\n position: absolute;\n inset-inline-start: var(--ddga-space-2);\n inset-block-start: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-color-primary);\n }\n .ddga-dropdown-menu__indicator-icon {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-dropdown-menu__radio-dot {\n /* span is inline by default → inline-size/block-size are ignored. Force a\n sized inline-block so the filled circle actually renders. */\n display: inline-block;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-dropdown-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-dropdown-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n }\n\n /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n [dir='rtl'] .ddga-dropdown-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Label + Separator ─── */\n\n .ddga-dropdown-menu__group-label {\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 + casing when RTL\n (mirrors command.css). The shortcut hint is usually Latin but reset it\n too for parity. */\n [dir='rtl'] .ddga-dropdown-menu__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n [dir='rtl'] .ddga-dropdown-menu__shortcut {\n letter-spacing: normal;\n }\n\n .ddga-dropdown-menu__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 /* ─── Dark mode ─── */\n\n /* The destructive-hover background uses the raw --ddga-error-50 tint\n (near-white), which doesn't adapt in dark mode. Override with a translucent\n red + a light-red foreground for contrast (mirrors alert.css / button.css). */\n [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: rgb(217 45 32 / 0.24);\n color: var(--ddga-error-200, #fecdca);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-dropdown-menu {\n border: 1px solid CanvasText;\n }\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-menu__separator {\n background-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-menu[data-state='open'],\n .ddga-dropdown-menu[data-state='closed'] {\n animation: none;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-file-upload{color:var(--ddga-text-primary)}.ddga-file-upload__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-file-upload__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-file-upload__dropzone{justify-content:center;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-6) var(--ddga-space-4);border:1px dashed var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);text-align:center;cursor:pointer;flex-direction:column;transition:border-color .15s,background-color .15s,box-shadow .15s;display:flex}.ddga-file-upload__dropzone:hover{border-color:var(--ddga-color-ring);background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-file-upload__dropzone[data-dragging]{border-color:var(--ddga-color-primary);background-color:var(--ddga-color-muted);box-shadow:0 0 0 1px var(--ddga-color-primary);border-style:solid}.ddga-file-upload__dropzone--error{border-color:var(--ddga-color-error)}.ddga-file-upload__dropzone--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-file-upload__dropzone[data-disabled]{cursor:not-allowed;opacity:.6;background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone[data-disabled]:hover{border-color:var(--ddga-color-input);border-style:dashed}.ddga-file-upload__icon{color:var(--ddga-color-muted-foreground);font-size:1.5rem}.ddga-file-upload__hint{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary)}.ddga-file-upload__input{clip:rect(0 0 0 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ddga-file-upload__list{gap:var(--ddga-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ddga-file-upload__item{align-items:center;gap:var(--ddga-space-3);padding:var(--ddga-space-2) var(--ddga-space-3);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);display:flex}.ddga-file-upload__item-icon{color:var(--ddga-color-muted-foreground);flex:none;font-size:1.125rem;display:inline-flex}.ddga-file-upload__item[data-status=success] .ddga-file-upload__item-icon{color:var(--ddga-color-success)}.ddga-file-upload__item[data-status=error] .ddga-file-upload__item-icon{color:var(--ddga-color-error)}.ddga-file-upload__item-main{gap:var(--ddga-space-1);flex-direction:column;flex:auto;min-inline-size:0;display:flex}.ddga-file-upload__item-head{justify-content:space-between;align-items:baseline;gap:var(--ddga-space-3);display:flex}.ddga-file-upload__item-name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--ddga-font-size-sm);color:var(--ddga-text-primary);overflow:hidden}.ddga-file-upload__item-meta{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-secondary);font-variant-numeric:tabular-nums;flex:none}.ddga-file-upload__item-error{font-size:var(--ddga-font-size-xs);color:var(--ddga-color-error)}.ddga-file-upload__item-remove{flex:none}}
|
|
1
|
+
@layer ddga-components{.ddga-file-upload{color:var(--ddga-text-primary)}.ddga-file-upload__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-file-upload__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-file-upload__dropzone{justify-content:center;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-6) var(--ddga-space-4);border:1px dashed var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);text-align:center;cursor:pointer;flex-direction:column;transition:border-color .15s,background-color .15s,box-shadow .15s;display:flex}.ddga-file-upload__dropzone:hover{border-color:var(--ddga-color-ring);background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-file-upload__dropzone[data-dragging]{border-color:var(--ddga-color-primary);background-color:var(--ddga-color-muted);box-shadow:0 0 0 1px var(--ddga-color-primary);border-style:solid}.ddga-file-upload__dropzone--error{border-color:var(--ddga-color-error)}.ddga-file-upload__dropzone--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-file-upload__dropzone[data-disabled]{cursor:not-allowed;opacity:.6;background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone[data-disabled]:hover{border-color:var(--ddga-color-input);border-style:dashed}.ddga-file-upload__icon{color:var(--ddga-color-muted-foreground);font-size:1.5rem}.ddga-file-upload__hint{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary)}.ddga-file-upload__input{clip:rect(0 0 0 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ddga-file-upload__list{gap:var(--ddga-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ddga-file-upload__item{align-items:center;gap:var(--ddga-space-3);padding:var(--ddga-space-2) var(--ddga-space-3);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);display:flex}.ddga-file-upload__item-icon{color:var(--ddga-color-muted-foreground);flex:none;font-size:1.125rem;display:inline-flex}.ddga-file-upload__item[data-status=success] .ddga-file-upload__item-icon{color:var(--ddga-color-success)}.ddga-file-upload__item[data-status=error] .ddga-file-upload__item-icon{color:var(--ddga-color-error)}.ddga-file-upload__item-main{gap:var(--ddga-space-1);flex-direction:column;flex:auto;min-inline-size:0;display:flex}.ddga-file-upload__item-head{justify-content:space-between;align-items:baseline;gap:var(--ddga-space-3);display:flex}.ddga-file-upload__item-name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--ddga-font-size-sm);color:var(--ddga-text-primary);overflow:hidden}.ddga-file-upload__item-meta{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-secondary);font-variant-numeric:tabular-nums;flex:none}.ddga-file-upload__item-error{font-size:var(--ddga-font-size-xs);color:var(--ddga-color-error)}.ddga-file-upload__item-remove{flex:none}@media (forced-colors:active){.ddga-file-upload__dropzone:focus-within,.ddga-file-upload__dropzone[data-dragging]{outline-offset:2px;outline:2px solid highlight}}}
|
|
2
2
|
/*# sourceMappingURL=file-upload.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAIE,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA","sources":["src/components/file-upload.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only FileUpload-specific styles live here. */\n\n .ddga-file-upload {\n color: var(--ddga-text-primary);\n }\n\n /* ─── Label ─── */\n\n .ddga-file-upload__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-file-upload__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Drop zone ─── */\n\n .ddga-file-upload__dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6) var(--ddga-space-4);\n border: 1px dashed var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n text-align: center;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-file-upload__dropzone:hover {\n border-color: var(--ddga-color-ring);\n background-color: var(--ddga-color-muted);\n }\n\n /* Focus ring driven by the (visually hidden) input inside the zone. */\n .ddga-file-upload__dropzone:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Active drag-over state. */\n .ddga-file-upload__dropzone[data-dragging] {\n border-color: var(--ddga-color-primary);\n border-style: solid;\n background-color: var(--ddga-color-muted);\n box-shadow: 0 0 0 1px var(--ddga-color-primary);\n }\n\n .ddga-file-upload__dropzone--error {\n border-color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone[data-disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-file-upload__dropzone[data-disabled]:hover {\n border-color: var(--ddga-color-input);\n border-style: dashed;\n }\n\n .ddga-file-upload__icon {\n font-size: 1.5rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__hint {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n }\n\n /* Visually hidden, but kept focusable so keyboard users can tab to it and\n press Space/Enter to open the picker. (Not display:none / tabindex=-1.) */\n .ddga-file-upload__input {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── File list ─── */\n\n .ddga-file-upload__list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .ddga-file-upload__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n padding: var(--ddga-space-2) var(--ddga-space-3);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n }\n\n .ddga-file-upload__item-icon {\n display: inline-flex;\n flex: none;\n font-size: 1.125rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__item[data-status='success'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-success);\n }\n\n .ddga-file-upload__item[data-status='error'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-main {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n .ddga-file-upload__item-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n }\n\n .ddga-file-upload__item-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__item-meta {\n flex: none;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-secondary);\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-file-upload__item-error {\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-remove {\n flex: none;\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAIE,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA,yCASA,8BACE","sources":["src/components/file-upload.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only FileUpload-specific styles live here. */\n\n .ddga-file-upload {\n color: var(--ddga-text-primary);\n }\n\n /* ─── Label ─── */\n\n .ddga-file-upload__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-file-upload__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Drop zone ─── */\n\n .ddga-file-upload__dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6) var(--ddga-space-4);\n border: 1px dashed var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n text-align: center;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-file-upload__dropzone:hover {\n border-color: var(--ddga-color-ring);\n background-color: var(--ddga-color-muted);\n }\n\n /* Focus ring driven by the (visually hidden) input inside the zone. */\n .ddga-file-upload__dropzone:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Active drag-over state. */\n .ddga-file-upload__dropzone[data-dragging] {\n border-color: var(--ddga-color-primary);\n border-style: solid;\n background-color: var(--ddga-color-muted);\n box-shadow: 0 0 0 1px var(--ddga-color-primary);\n }\n\n .ddga-file-upload__dropzone--error {\n border-color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone[data-disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-file-upload__dropzone[data-disabled]:hover {\n border-color: var(--ddga-color-input);\n border-style: dashed;\n }\n\n .ddga-file-upload__icon {\n font-size: 1.5rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__hint {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n }\n\n /* Visually hidden, but kept focusable so keyboard users can tab to it and\n press Space/Enter to open the picker. (Not display:none / tabindex=-1.) */\n .ddga-file-upload__input {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── File list ─── */\n\n .ddga-file-upload__list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .ddga-file-upload__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n padding: var(--ddga-space-2) var(--ddga-space-3);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n }\n\n .ddga-file-upload__item-icon {\n display: inline-flex;\n flex: none;\n font-size: 1.125rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__item[data-status='success'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-success);\n }\n\n .ddga-file-upload__item[data-status='error'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-main {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n .ddga-file-upload__item-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n }\n\n .ddga-file-upload__item-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__item-meta {\n flex: none;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-secondary);\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-file-upload__item-error {\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-remove {\n flex: none;\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n /* The focus + drag-active indicators are box-shadow rings, which forced-colors\n neutralizes — restore them as a system-colored outline so keyboard focus and\n the active drop target stay visible. */\n @media (forced-colors: active) {\n .ddga-file-upload__dropzone:focus-within,\n .ddga-file-upload__dropzone[data-dragging] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-menubar{align-items:center;gap:var(--ddga-space-1);padding:var(--ddga-space-1);background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);font-family:inherit;display:flex}.ddga-menubar__trigger{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-base);font-weight:var(--ddga-font-weight-medium);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid #0000;outline:none;align-items:center;transition:background-color .12s,border-color .12s,color .12s;display:inline-flex;position:relative}.ddga-menubar__trigger:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-menubar__trigger[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-menubar__trigger--default:after{content:"";inset-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-full);background-color:#0000;block-size:2px;transition:background-color .12s;position:absolute;inset-block-end:2px}.ddga-menubar__trigger--default[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar__trigger--default[data-state=open]{background-color:var(--ddga-color-muted);color:var(--ddga-color-primary)}.ddga-menubar__trigger--default[data-state=open]:after{background-color:var(--ddga-color-primary)}.ddga-menubar__trigger--outline{border-color:var(--ddga-color-border)}.ddga-menubar__trigger--outline[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar__trigger--outline[data-state=open]{border-color:var(--ddga-color-primary);color:var(--ddga-color-primary)}.ddga-menubar-menu{min-inline-size:192px;max-inline-size:320px;padding:var(--ddga-space-1);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;outline:none;font-family:inherit}.ddga-menubar-menu[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-menubar-menu-in}.ddga-menubar-menu[data-state=closed]{animation:80ms ease-in ddga-menubar-menu-out}@keyframes ddga-menubar-menu-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-menubar-menu-out{0%{opacity:1}to{opacity:0}}.ddga-menubar-menu--sm{font-size:var(--ddga-font-size-sm)}.ddga-menubar-menu--md{font-size:var(--ddga-font-size-base)}.ddga-menubar-menu__item{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:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-menubar-menu__item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar-menu__item[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-menubar-menu__item[data-destructive]{color:var(--ddga-color-destructive)}.ddga-menubar-menu__item[data-destructive][data-highlighted]{background-color:var(--ddga-error-50)}.ddga-menubar-menu__label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;overflow:hidden}.ddga-menubar-menu__icon{block-size:1em;inline-size:1em;color:var(--ddga-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-menubar-menu__icon>svg{block-size:1em;inline-size:1em}.ddga-menubar-menu__shortcut{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-tertiary);letter-spacing:.04em;margin-inline-start:auto}.ddga-menubar-menu__item--checkable{padding-inline-start:calc(var(--ddga-space-2) + 1.25em);position:relative}.ddga-menubar-menu__indicator{block-size:1em;inline-size:1em;color:var(--ddga-color-primary);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--ddga-space-2);transform:translateY(-50%)}.ddga-menubar-menu__indicator-icon{block-size:.875em;inline-size:.875em}.ddga-menubar-menu__radio-dot{border-radius:var(--ddga-radius-full);background-color:currentColor;block-size:.5em;inline-size:.5em;display:inline-block}.ddga-menubar-menu__item--sub[data-state=open]{background-color:var(--ddga-color-muted)}.ddga-menubar-menu__sub-chevron{block-size:1em;inline-size:1em;color:var(--ddga-text-tertiary);margin-inline-start:auto}[dir=rtl] .ddga-menubar-menu__sub-chevron{transform:scaleX(-1)}.ddga-menubar-menu__group-label{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}.ddga-menubar-menu__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 (forced-colors:active){.ddga-menubar{border:1px solid canvastext}.ddga-menubar__trigger[data-highlighted],.ddga-menubar__trigger[data-state=open]{color:highlighttext;background-color:highlight}.ddga-menubar__trigger:focus-visible{outline-offset:2px;outline:2px solid highlight}.ddga-menubar-menu{border:1px solid canvastext}.ddga-menubar-menu__item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-menubar-menu__separator{background-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-menubar__trigger,.ddga-menubar__trigger--default:after{transition:none}.ddga-menubar-menu[data-state=open],.ddga-menubar-menu[data-state=closed]{animation:none}}}
|
|
1
|
+
@layer ddga-components{.ddga-menubar{align-items:center;gap:var(--ddga-space-1);padding:var(--ddga-space-1);background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);font-family:inherit;display:flex}.ddga-menubar__trigger{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-base);font-weight:var(--ddga-font-weight-medium);color:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid #0000;outline:none;align-items:center;transition:background-color .12s,border-color .12s,color .12s;display:inline-flex;position:relative}.ddga-menubar__trigger:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-menubar__trigger[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-menubar__trigger--default:after{content:"";inset-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-full);background-color:#0000;block-size:2px;transition:background-color .12s;position:absolute;inset-block-end:2px}.ddga-menubar__trigger--default[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar__trigger--default[data-state=open]{background-color:var(--ddga-color-muted);color:var(--ddga-color-primary)}.ddga-menubar__trigger--default[data-state=open]:after{background-color:var(--ddga-color-primary)}.ddga-menubar__trigger--outline{border-color:var(--ddga-color-border)}.ddga-menubar__trigger--outline[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar__trigger--outline[data-state=open]{border-color:var(--ddga-color-primary);color:var(--ddga-color-primary)}.ddga-menubar-menu{min-inline-size:192px;max-inline-size:320px;padding:var(--ddga-space-1);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;outline:none;font-family:inherit}.ddga-menubar-menu[data-state=open]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-menubar-menu-in}.ddga-menubar-menu[data-state=closed]{animation:80ms ease-in ddga-menubar-menu-out}@keyframes ddga-menubar-menu-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-menubar-menu-out{0%{opacity:1}to{opacity:0}}.ddga-menubar-menu--sm{font-size:var(--ddga-font-size-sm)}.ddga-menubar-menu--md{font-size:var(--ddga-font-size-base)}.ddga-menubar-menu__item{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:inherit;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;display:flex}.ddga-menubar-menu__item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-menubar-menu__item[data-disabled]{color:var(--ddga-text-tertiary);pointer-events:none}.ddga-menubar-menu__item[data-destructive]{color:var(--ddga-color-destructive)}.ddga-menubar-menu__item[data-destructive][data-highlighted]{background-color:var(--ddga-error-50)}.ddga-menubar-menu__label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;overflow:hidden}.ddga-menubar-menu__icon{block-size:1em;inline-size:1em;color:var(--ddga-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-menubar-menu__icon>svg{block-size:1em;inline-size:1em}.ddga-menubar-menu__shortcut{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-tertiary);letter-spacing:.04em;margin-inline-start:auto}.ddga-menubar-menu__item--checkable{padding-inline-start:calc(var(--ddga-space-2) + 1.25em);position:relative}.ddga-menubar-menu__indicator{block-size:1em;inline-size:1em;color:var(--ddga-color-primary);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--ddga-space-2);transform:translateY(-50%)}.ddga-menubar-menu__indicator-icon{block-size:.875em;inline-size:.875em}.ddga-menubar-menu__radio-dot{border-radius:var(--ddga-radius-full);background-color:currentColor;block-size:.5em;inline-size:.5em;display:inline-block}.ddga-menubar-menu__item--sub[data-state=open]{background-color:var(--ddga-color-muted)}.ddga-menubar-menu__sub-chevron{block-size:1em;inline-size:1em;color:var(--ddga-text-tertiary);margin-inline-start:auto}[dir=rtl] .ddga-menubar-menu__sub-chevron{transform:scaleX(-1)}.ddga-menubar-menu__group-label{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-menubar-menu__group-label{letter-spacing:normal;text-transform:none}[dir=rtl] .ddga-menubar-menu__shortcut{letter-spacing:normal}.ddga-menubar-menu__separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:calc(var(--ddga-space-1) * -1);background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-menubar-menu__item[data-destructive][data-highlighted]{color:var(--ddga-error-200,#fecdca);background-color:#d92d203d}@media (forced-colors:active){.ddga-menubar{border:1px solid canvastext}.ddga-menubar__trigger[data-highlighted],.ddga-menubar__trigger[data-state=open]{color:highlighttext;background-color:highlight}.ddga-menubar__trigger:focus-visible{outline-offset:2px;outline:2px solid highlight}.ddga-menubar-menu{border:1px solid canvastext}.ddga-menubar-menu__item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-menubar-menu__separator{background-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-menubar__trigger,.ddga-menubar__trigger--default:after{transition:none}.ddga-menubar-menu[data-state=open],.ddga-menubar-menu[data-state=closed]{animation:none}}}
|
|
2
2
|
/*# sourceMappingURL=menubar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAGE,qRAiBA,0dAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,4DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAUA,qKASA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA","sources":["src/components/menubar.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Bar (Menubar.Root) ─── */\n\n .ddga-menubar {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-1);\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 font-family: inherit;\n }\n\n /* ─── Bar trigger (File / Edit / View…) ─── */\n\n /* Shared base across variants. A transparent 1px border is reserved so the\n `outline` variant only flips border-color (no layout shift), and `default`\n stays visually borderless. */\n .ddga-menubar__trigger {\n position: relative;\n display: inline-flex;\n align-items: center;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-medium);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n transition:\n background-color 120ms ease,\n border-color 120ms ease,\n color 120ms ease;\n }\n\n .ddga-menubar__trigger:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n .ddga-menubar__trigger[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* ── Variant: default (flat menu-bar idiom) ── */\n\n /* SA-green underline indicator for the open menu — reserved (transparent) at\n rest so nothing shifts, animated in on open. Mirrors the Tabs active-tab\n treatment (same --ddga-color-primary accent). */\n .ddga-menubar__trigger--default::after {\n content: '';\n position: absolute;\n inset-inline: var(--ddga-space-2);\n inset-block-end: 2px;\n block-size: 2px;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n transition: background-color 120ms ease;\n }\n\n /* Radix sets data-highlighted on hover / keyboard focus → soft surface. */\n .ddga-menubar__trigger--default[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n /* data-state=open: this trigger's menu is showing → on-brand accent (green\n label + underline), kept on the muted surface so the row reads active. */\n .ddga-menubar__trigger--default[data-state='open'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n }\n .ddga-menubar__trigger--default[data-state='open']::after {\n background-color: var(--ddga-color-primary);\n }\n\n /* ── Variant: outline (bordered button-style chip) ── */\n\n .ddga-menubar__trigger--outline {\n border-color: var(--ddga-color-border);\n }\n\n /* Hover / keyboard focus → soft surface fill (border stays neutral). */\n .ddga-menubar__trigger--outline[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n /* Open menu → SA-green border + green label (the border is the accent here,\n so no underline for this variant). */\n .ddga-menubar__trigger--outline[data-state='open'] {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* ─── Panel (Content / SubContent) ─── */\n\n .ddga-menubar-menu {\n min-inline-size: 192px;\n max-inline-size: 320px;\n padding: var(--ddga-space-1);\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 font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n surfaces feel instantaneous (this isn't a Modal). */\n .ddga-menubar-menu[data-state='open'] {\n animation: ddga-menubar-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-menubar-menu[data-state='closed'] {\n animation: ddga-menubar-menu-out 80ms ease-in;\n }\n\n @keyframes ddga-menubar-menu-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-menubar-menu-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Sizes ─── */\n\n .ddga-menubar-menu--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-menubar-menu--md {\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n .ddga-menubar-menu__item {\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: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* Radix sets data-highlighted on the actively focused/hovered item — that's\n our only \"focus ring\" since the menu manages focus internally. */\n .ddga-menubar-menu__item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-menubar-menu__item[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* Destructive: red text and a red-tinted hover. Tracks the destructive\n family the rest of the system uses. */\n .ddga-menubar-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* Inline pieces inside the row. */\n .ddga-menubar-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .ddga-menubar-menu__icon {\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-text-secondary);\n }\n .ddga-menubar-menu__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-menubar-menu__shortcut {\n margin-inline-start: auto;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-tertiary);\n letter-spacing: 0.04em;\n }\n\n /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n .ddga-menubar-menu__item--checkable {\n /* Reserve the indicator column even when unchecked so labels align. */\n padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n position: relative;\n }\n\n .ddga-menubar-menu__indicator {\n position: absolute;\n inset-inline-start: var(--ddga-space-2);\n inset-block-start: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-color-primary);\n }\n .ddga-menubar-menu__indicator-icon {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-menubar-menu__radio-dot {\n /* span is inline by default → inline-size/block-size are ignored. Force a\n sized inline-block so the filled circle actually renders. */\n display: inline-block;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-menubar-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-menubar-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n }\n\n /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n [dir='rtl'] .ddga-menubar-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Label + Separator ─── */\n\n .ddga-menubar-menu__group-label {\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\n .ddga-menubar-menu__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 /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-menubar {\n border: 1px solid CanvasText;\n }\n .ddga-menubar__trigger[data-highlighted],\n .ddga-menubar__trigger[data-state='open'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-menubar__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-menubar-menu {\n border: 1px solid CanvasText;\n }\n .ddga-menubar-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-menubar-menu__separator {\n background-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-menubar__trigger,\n .ddga-menubar__trigger--default::after {\n transition: none;\n }\n .ddga-menubar-menu[data-state='open'],\n .ddga-menubar-menu[data-state='closed'] {\n animation: none;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAGE,qRAiBA,0dAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,4DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAYA,oFAIA,6DAIA,qKAYA,8IAOA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA","sources":["src/components/menubar.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Bar (Menubar.Root) ─── */\n\n .ddga-menubar {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-1);\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 font-family: inherit;\n }\n\n /* ─── Bar trigger (File / Edit / View…) ─── */\n\n /* Shared base across variants. A transparent 1px border is reserved so the\n `outline` variant only flips border-color (no layout shift), and `default`\n stays visually borderless. */\n .ddga-menubar__trigger {\n position: relative;\n display: inline-flex;\n align-items: center;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-medium);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n transition:\n background-color 120ms ease,\n border-color 120ms ease,\n color 120ms ease;\n }\n\n .ddga-menubar__trigger:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n .ddga-menubar__trigger[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* ── Variant: default (flat menu-bar idiom) ── */\n\n /* SA-green underline indicator for the open menu — reserved (transparent) at\n rest so nothing shifts, animated in on open. Mirrors the Tabs active-tab\n treatment (same --ddga-color-primary accent). */\n .ddga-menubar__trigger--default::after {\n content: '';\n position: absolute;\n inset-inline: var(--ddga-space-2);\n inset-block-end: 2px;\n block-size: 2px;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n transition: background-color 120ms ease;\n }\n\n /* Radix sets data-highlighted on hover / keyboard focus → soft surface. */\n .ddga-menubar__trigger--default[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n /* data-state=open: this trigger's menu is showing → on-brand accent (green\n label + underline), kept on the muted surface so the row reads active. */\n .ddga-menubar__trigger--default[data-state='open'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n }\n .ddga-menubar__trigger--default[data-state='open']::after {\n background-color: var(--ddga-color-primary);\n }\n\n /* ── Variant: outline (bordered button-style chip) ── */\n\n .ddga-menubar__trigger--outline {\n border-color: var(--ddga-color-border);\n }\n\n /* Hover / keyboard focus → soft surface fill (border stays neutral). */\n .ddga-menubar__trigger--outline[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n /* Open menu → SA-green border + green label (the border is the accent here,\n so no underline for this variant). */\n .ddga-menubar__trigger--outline[data-state='open'] {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* ─── Panel (Content / SubContent) ─── */\n\n .ddga-menubar-menu {\n min-inline-size: 192px;\n max-inline-size: 320px;\n padding: var(--ddga-space-1);\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 font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n surfaces feel instantaneous (this isn't a Modal). */\n .ddga-menubar-menu[data-state='open'] {\n animation: ddga-menubar-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-menubar-menu[data-state='closed'] {\n animation: ddga-menubar-menu-out 80ms ease-in;\n }\n\n @keyframes ddga-menubar-menu-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-menubar-menu-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Sizes ─── */\n\n .ddga-menubar-menu--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-menubar-menu--md {\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n .ddga-menubar-menu__item {\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: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* Radix sets data-highlighted on the actively focused/hovered item — that's\n our only \"focus ring\" since the menu manages focus internally. */\n .ddga-menubar-menu__item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-menubar-menu__item[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* Destructive: red text and a red-tinted hover. Tracks the destructive\n family the rest of the system uses. */\n .ddga-menubar-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* Inline pieces inside the row. */\n .ddga-menubar-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .ddga-menubar-menu__icon {\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-text-secondary);\n }\n .ddga-menubar-menu__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-menubar-menu__shortcut {\n margin-inline-start: auto;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-tertiary);\n letter-spacing: 0.04em;\n }\n\n /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n .ddga-menubar-menu__item--checkable {\n /* Reserve the indicator column even when unchecked so labels align. */\n padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n position: relative;\n }\n\n .ddga-menubar-menu__indicator {\n position: absolute;\n inset-inline-start: var(--ddga-space-2);\n inset-block-start: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-color-primary);\n }\n .ddga-menubar-menu__indicator-icon {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-menubar-menu__radio-dot {\n /* span is inline by default → inline-size/block-size are ignored. Force a\n sized inline-block so the filled circle actually renders. */\n display: inline-block;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-menubar-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-menubar-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n }\n\n /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n [dir='rtl'] .ddga-menubar-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Label + Separator ─── */\n\n .ddga-menubar-menu__group-label {\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 + casing when RTL\n (mirrors dropdown-menu.css / command.css). The shortcut hint is usually\n Latin but reset it too for parity. */\n [dir='rtl'] .ddga-menubar-menu__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n [dir='rtl'] .ddga-menubar-menu__shortcut {\n letter-spacing: normal;\n }\n\n .ddga-menubar-menu__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 /* ─── Dark mode ─── */\n\n /* The destructive-hover background uses the raw --ddga-error-50 tint\n (near-white), which doesn't adapt in dark mode. Override with a translucent\n red + a light-red foreground for contrast (mirrors dropdown-menu.css). */\n [data-theme='dark'] .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n background-color: rgb(217 45 32 / 0.24);\n color: var(--ddga-error-200, #fecdca);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-menubar {\n border: 1px solid CanvasText;\n }\n .ddga-menubar__trigger[data-highlighted],\n .ddga-menubar__trigger[data-state='open'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-menubar__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-menubar-menu {\n border: 1px solid CanvasText;\n }\n .ddga-menubar-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-menubar-menu__separator {\n background-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-menubar__trigger,\n .ddga-menubar__trigger--default::after {\n transition: none;\n }\n .ddga-menubar-menu[data-state='open'],\n .ddga-menubar-menu[data-state='closed'] {\n animation: none;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-progress{background-color:var(--ddga-gray-200);border-radius:var(--ddga-radius-full);inline-size:100%;position:relative;overflow:hidden}.ddga-progress--sm{block-size:4px}.ddga-progress--md{block-size:8px}.ddga-progress--lg{block-size:12px}.ddga-progress--primary{--ddga-progress-color:var(--ddga-color-primary)}.ddga-progress--success{--ddga-progress-color:var(--ddga-color-success)}.ddga-progress--warning{--ddga-progress-color:var(--ddga-color-warning)}.ddga-progress--destructive{--ddga-progress-color:var(--ddga-color-destructive)}.ddga-progress__indicator{background-color:var(--ddga-progress-color,var(--ddga-color-primary));border-radius:inherit;block-size:100%;inline-size:100%;transition:transform .2s ease-out}.ddga-progress[data-state=indeterminate] .ddga-progress__indicator{inline-size:40%;transition:none;animation:1.4s cubic-bezier(.65,.05,.36,1) infinite ddga-progress-slide;transform:translate(-100%)}@keyframes ddga-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}[dir=rtl] .ddga-progress[data-state=indeterminate] .ddga-progress__indicator{animation-name:ddga-progress-slide-rtl}@keyframes ddga-progress-slide-rtl{0%{transform:translate(100%)}to{transform:translate(-350%)}}.ddga-circular-progress{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.ddga-circular-progress--primary{--ddga-progress-color:var(--ddga-color-primary)}.ddga-circular-progress--success{--ddga-progress-color:var(--ddga-color-success)}.ddga-circular-progress--warning{--ddga-progress-color:var(--ddga-color-warning)}.ddga-circular-progress--destructive{--ddga-progress-color:var(--ddga-color-destructive)}.ddga-circular-progress__svg{display:block}.ddga-circular-progress__track{stroke:var(--ddga-gray-200)}.ddga-circular-progress__indicator{stroke:var(--ddga-progress-color,var(--ddga-color-primary));transition:stroke-dashoffset .2s ease-out}.ddga-circular-progress__segment{stroke:var(--ddga-gray-200);transition:stroke .2s}.ddga-circular-progress__segment--filled{stroke:var(--ddga-progress-color,var(--ddga-color-primary))}.ddga-circular-progress[data-state=indeterminate]:not([data-segmented]) .ddga-circular-progress__svg{transition:none;animation:1.4s linear infinite ddga-circular-progress-spin}@keyframes ddga-circular-progress-spin{to{transform:rotate(360deg)}}.ddga-circular-progress__label{font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-text-secondary);justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.ddga-circular-progress--sm .ddga-circular-progress__label{font-size:.625rem}.ddga-circular-progress--lg .ddga-circular-progress__label{font-size:var(--ddga-font-size-sm)}@media (prefers-reduced-motion:reduce){.ddga-progress[data-state=indeterminate] .ddga-progress__indicator,.ddga-circular-progress[data-state=indeterminate] .ddga-circular-progress__svg{animation:none}.ddga-progress__indicator,.ddga-circular-progress__indicator,.ddga-circular-progress__segment{transition:none}}}
|
|
1
|
+
@layer ddga-components{.ddga-progress{background-color:var(--ddga-gray-200);border-radius:var(--ddga-radius-full);inline-size:100%;position:relative;overflow:hidden}.ddga-progress--sm{block-size:4px}.ddga-progress--md{block-size:8px}.ddga-progress--lg{block-size:12px}.ddga-progress--primary{--ddga-progress-color:var(--ddga-color-primary)}.ddga-progress--success{--ddga-progress-color:var(--ddga-color-success)}.ddga-progress--warning{--ddga-progress-color:var(--ddga-color-warning)}.ddga-progress--destructive{--ddga-progress-color:var(--ddga-color-destructive)}.ddga-progress__indicator{background-color:var(--ddga-progress-color,var(--ddga-color-primary));border-radius:inherit;block-size:100%;inline-size:100%;transition:transform .2s ease-out}.ddga-progress[data-state=indeterminate] .ddga-progress__indicator{inline-size:40%;transition:none;animation:1.4s cubic-bezier(.65,.05,.36,1) infinite ddga-progress-slide;transform:translate(-100%)}@keyframes ddga-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}[dir=rtl] .ddga-progress[data-state=indeterminate] .ddga-progress__indicator{animation-name:ddga-progress-slide-rtl}@keyframes ddga-progress-slide-rtl{0%{transform:translate(100%)}to{transform:translate(-350%)}}.ddga-circular-progress{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.ddga-circular-progress--primary{--ddga-progress-color:var(--ddga-color-primary)}.ddga-circular-progress--success{--ddga-progress-color:var(--ddga-color-success)}.ddga-circular-progress--warning{--ddga-progress-color:var(--ddga-color-warning)}.ddga-circular-progress--destructive{--ddga-progress-color:var(--ddga-color-destructive)}.ddga-circular-progress__svg{display:block}.ddga-circular-progress__track{stroke:var(--ddga-gray-200)}.ddga-circular-progress__indicator{stroke:var(--ddga-progress-color,var(--ddga-color-primary));transition:stroke-dashoffset .2s ease-out}.ddga-circular-progress__segment{stroke:var(--ddga-gray-200);transition:stroke .2s}.ddga-circular-progress__segment--filled{stroke:var(--ddga-progress-color,var(--ddga-color-primary))}.ddga-circular-progress[data-state=indeterminate]:not([data-segmented]) .ddga-circular-progress__svg{transition:none;animation:1.4s linear infinite ddga-circular-progress-spin}@keyframes ddga-circular-progress-spin{to{transform:rotate(360deg)}}.ddga-circular-progress__label{font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-text-secondary);justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.ddga-circular-progress--sm .ddga-circular-progress__label{font-size:.625rem}.ddga-circular-progress--lg .ddga-circular-progress__label{font-size:var(--ddga-font-size-sm)}[data-theme=dark] .ddga-progress{background-color:var(--ddga-color-border)}[data-theme=dark] .ddga-circular-progress__track,[data-theme=dark] .ddga-circular-progress__segment{stroke:var(--ddga-color-border)}@media (prefers-reduced-motion:reduce){.ddga-progress[data-state=indeterminate] .ddga-progress__indicator,.ddga-circular-progress[data-state=indeterminate] .ddga-circular-progress__svg{animation:none}.ddga-progress__indicator,.ddga-circular-progress__indicator,.ddga-circular-progress__segment{transition:none}}@media (forced-colors:active){.ddga-progress{border:1px solid canvastext}.ddga-progress__indicator{background-color:highlight}.ddga-circular-progress__track,.ddga-circular-progress__segment{stroke:graytext}.ddga-circular-progress__indicator,.ddga-circular-progress__segment--filled{stroke:highlight}}}
|
|
2
2
|
/*# sourceMappingURL=progress.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAGE,8IAQA,kCAGA,kCAGA,mCAIA,wEAGA,wEAGA,wEAGA,gFAIA,yLAUA,sMAOA,2FAUA,oHAIA,+FAWA,sHAQA,iFAGA,iFAGA,iFAGA,yFAIA,2CAIA,2DAIA,yIAMA,mFAIA,qGAMA,gLAMA,oEAMA,6OAYA,6EAGA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAGE,8IAQA,kCAGA,kCAGA,mCAIA,wEAGA,wEAGA,wEAGA,gFAIA,yLAUA,sMAOA,2FAUA,oHAIA,+FAWA,sHAQA,iFAGA,iFAGA,iFAGA,yFAIA,2CAIA,2DAIA,yIAMA,mFAIA,qGAMA,gLAMA,oEAMA,6OAYA,6EAGA,8FAUA,2EAGA,oIAMA,uCACE,iKAIA,+GAWF,8BACE,2CAGA,qDAGA,gFAIA","sources":["src/components/progress.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Linear (Radix Progress) ─── */\n\n .ddga-progress {\n position: relative;\n overflow: hidden;\n inline-size: 100%;\n background-color: var(--ddga-gray-200);\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-progress--sm {\n block-size: 4px;\n }\n .ddga-progress--md {\n block-size: 8px;\n }\n .ddga-progress--lg {\n block-size: 12px;\n }\n\n .ddga-progress--primary {\n --ddga-progress-color: var(--ddga-color-primary);\n }\n .ddga-progress--success {\n --ddga-progress-color: var(--ddga-color-success);\n }\n .ddga-progress--warning {\n --ddga-progress-color: var(--ddga-color-warning);\n }\n .ddga-progress--destructive {\n --ddga-progress-color: var(--ddga-color-destructive);\n }\n\n .ddga-progress__indicator {\n block-size: 100%;\n inline-size: 100%;\n background-color: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: transform 200ms ease-out;\n border-radius: inherit;\n }\n\n /* Indeterminate: slide a 40%-wide pill across the track. The track has\n overflow:hidden so the off-track portions get clipped. */\n .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n inline-size: 40%;\n transform: translateX(-100%);\n animation: ddga-progress-slide 1.4s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;\n transition: none;\n }\n\n @keyframes ddga-progress-slide {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(350%);\n }\n }\n\n /* RTL: reverse the slide so motion still tracks reading direction. */\n [dir='rtl'] .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n animation-name: ddga-progress-slide-rtl;\n }\n\n @keyframes ddga-progress-slide-rtl {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(-350%);\n }\n }\n\n /* ─── Circular (custom SVG) ─── */\n\n .ddga-circular-progress {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .ddga-circular-progress--primary {\n --ddga-progress-color: var(--ddga-color-primary);\n }\n .ddga-circular-progress--success {\n --ddga-progress-color: var(--ddga-color-success);\n }\n .ddga-circular-progress--warning {\n --ddga-progress-color: var(--ddga-color-warning);\n }\n .ddga-circular-progress--destructive {\n --ddga-progress-color: var(--ddga-color-destructive);\n }\n\n .ddga-circular-progress__svg {\n display: block;\n }\n\n .ddga-circular-progress__track {\n stroke: var(--ddga-gray-200);\n }\n\n .ddga-circular-progress__indicator {\n stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: stroke-dashoffset 200ms ease-out;\n }\n\n /* Segmented (radial stepper): each arc is track-colored until filled. */\n .ddga-circular-progress__segment {\n stroke: var(--ddga-gray-200);\n transition: stroke 200ms ease;\n }\n .ddga-circular-progress__segment--filled {\n stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n }\n\n /* Only the continuous (non-segmented) ring spins when indeterminate — a\n segmented ring is determinate, so don't rotate its empty arcs. */\n .ddga-circular-progress[data-state='indeterminate']:not([data-segmented])\n .ddga-circular-progress__svg {\n animation: ddga-circular-progress-spin 1.4s linear infinite;\n transition: none;\n }\n\n @keyframes ddga-circular-progress-spin {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .ddga-circular-progress__label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-secondary);\n line-height: 1;\n }\n\n .ddga-circular-progress--sm .ddga-circular-progress__label {\n font-size: 0.625rem;\n }\n .ddga-circular-progress--lg .ddga-circular-progress__label {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Dark mode ─── */\n /* The unfilled track is built from the raw `--ddga-gray-200` tint, which the\n dark theme does NOT remap (only semantic `--ddga-color-*` tokens adapt).\n Left alone it renders as a bright light band on dark surfaces, so map the\n track to the semantic border gray. The indicator stays `--ddga-color-*`\n (already dark-aware). */\n [data-theme='dark'] .ddga-progress {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-circular-progress__track,\n [data-theme='dark'] .ddga-circular-progress__segment {\n stroke: var(--ddga-color-border);\n }\n\n /* Reduced motion: drop indeterminate animations, keep static state visible. */\n @media (prefers-reduced-motion: reduce) {\n .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator,\n .ddga-circular-progress[data-state='indeterminate'] .ddga-circular-progress__svg {\n animation: none;\n }\n .ddga-progress__indicator,\n .ddga-circular-progress__indicator,\n .ddga-circular-progress__segment {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n /* background/stroke colors are overridden by the system, which would make the\n fill indistinguishable from the track. Pin the fill to Highlight and the\n track to a dim system color so progress stays readable. */\n @media (forced-colors: active) {\n .ddga-progress {\n border: 1px solid CanvasText;\n }\n .ddga-progress__indicator {\n background-color: Highlight;\n }\n .ddga-circular-progress__track,\n .ddga-circular-progress__segment {\n stroke: GrayText;\n }\n .ddga-circular-progress__indicator,\n .ddga-circular-progress__segment--filled {\n stroke: Highlight;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-select__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-select__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-select-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-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:inline-flex}.ddga-select-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-select-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-select-trigger:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-select-trigger[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-select-trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-select-trigger--error{border-color:var(--ddga-color-error)}.ddga-select-trigger--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-select__icon{color:var(--ddga-text-tertiary);flex-shrink:0;transition:rotate .15s}.ddga-select-trigger[data-state=open] .ddga-select__icon{rotate:180deg}.ddga-select-content{min-inline-size:var(--radix-select-trigger-width);max-block-size:var(--radix-select-content-available-height);z-index:50;background-color:var(--ddga-color-background);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);color:var(--ddga-text-primary);overflow:hidden}.ddga-select-viewport{padding:var(--ddga-space-1)}.ddga-select-item{block-size:32px;padding-block:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-base);color:var(--ddga-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;padding-inline-start:var(--ddga-space-3);padding-inline-end:var(--ddga-space-
|
|
1
|
+
@layer ddga-components{.ddga-select__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-select__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-select-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-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:inline-flex}.ddga-select-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-select-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-select-trigger:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-select-trigger[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-select-trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-select-trigger--error{border-color:var(--ddga-color-error)}.ddga-select-trigger--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-select__icon{color:var(--ddga-text-tertiary);flex-shrink:0;transition:rotate .15s}.ddga-select-trigger[data-state=open] .ddga-select__icon{rotate:180deg}.ddga-select-content{min-inline-size:var(--radix-select-trigger-width);max-block-size:var(--radix-select-content-available-height);z-index:50;background-color:var(--ddga-color-background);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);color:var(--ddga-text-primary);overflow:hidden}.ddga-select-viewport{padding:var(--ddga-space-1)}.ddga-select-item{block-size:32px;padding-block:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);font-size:var(--ddga-font-size-base);color:var(--ddga-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;padding-inline-start:var(--ddga-space-3);padding-inline-end:var(--ddga-space-8);line-height:1.4;display:flex;position:relative}.ddga-select-item[data-highlighted]{background-color:var(--ddga-color-muted)}.ddga-select-item[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed;pointer-events:none}.ddga-select-item__indicator{color:var(--ddga-color-primary);align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--ddga-space-2)}.ddga-select-item__check{block-size:1em;inline-size:1em}@media (prefers-reduced-motion:reduce){.ddga-select-trigger,.ddga-select__icon{transition:none}}@media (forced-colors:active){.ddga-select-trigger{border:1px solid canvastext}.ddga-select-trigger:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-select-trigger:disabled{color:graytext;border-color:graytext}.ddga-select-content{border:1px solid canvastext}.ddga-select-item[data-highlighted]{color:highlighttext;background-color:highlight}.ddga-select-item__indicator{color:highlighttext}}}
|
|
2
2
|
/*# sourceMappingURL=select.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAME,iJAOA,iFAOA,0WAmBA,+GAKA,iHAQA,gIAOA,0EAIA,qGAQA,iEAGA,4HAOA,wFAKA,uEAMA,0VAgBA,kDAMA,oYAoBA,6EAIA,wGAQA,2JAOA,wDAOA,uCACE,yDAQF,8BACE,iDAGA,kFAIA,mEAIA,iDAGA,mFAIA","sources":["src/components/select.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Select-specific styles live here. */\n\n /* ─── Label (above the trigger, matches Input) ─── */\n\n .ddga-select__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-select__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n .ddga-select-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-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-select-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-select-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Trigger states ─── */\n\n .ddga-select-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 /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n .ddga-select-trigger[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-select-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Error ─── */\n\n .ddga-select-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-select-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 /* ─── Chevron (Radix Icon) ─── */\n\n .ddga-select__icon {\n flex-shrink: 0;\n color: var(--ddga-text-tertiary);\n transition: rotate 150ms ease;\n }\n .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n rotate: 180deg;\n }\n\n /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n .ddga-select-content {\n /* Match trigger width so the panel doesn't visually float wider/narrower\n than the field. `--radix-select-trigger-width` is exposed by Radix\n when `position=\"popper\"`. */\n min-inline-size: var(--radix-select-trigger-width);\n /* Cap height to viewport so long lists scroll instead of overflowing. */\n max-block-size: var(--radix-select-content-available-height);\n z-index: 50;\n overflow: hidden;\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n color: var(--ddga-text-primary);\n }\n\n .ddga-select-viewport {\n padding: var(--ddga-space-1);\n }\n\n /* ─── Item ─── */\n\n .ddga-select-item {\n position: relative;\n display: flex;\n align-items: center;\n block-size: 32px;\n padding-block: var(--ddga-space-2);\n padding-inline-start: var(--ddga-space-3);\n /* Reserve room for the trailing checkmark indicator so item text never\n collides with it when the row is selected. */\n padding-inline-end: var(--ddga-space-
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAME,iJAOA,iFAOA,0WAmBA,+GAKA,iHAQA,gIAOA,0EAIA,qGAQA,iEAGA,4HAOA,wFAKA,uEAMA,0VAgBA,kDAMA,oYAoBA,6EAIA,wGAQA,2JAOA,wDAOA,uCACE,yDAQF,8BACE,iDAGA,kFAIA,mEAIA,iDAGA,mFAIA","sources":["src/components/select.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Select-specific styles live here. */\n\n /* ─── Label (above the trigger, matches Input) ─── */\n\n .ddga-select__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-select__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n .ddga-select-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-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-select-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-select-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Trigger states ─── */\n\n .ddga-select-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 /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n .ddga-select-trigger[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-select-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Error ─── */\n\n .ddga-select-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-select-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 /* ─── Chevron (Radix Icon) ─── */\n\n .ddga-select__icon {\n flex-shrink: 0;\n color: var(--ddga-text-tertiary);\n transition: rotate 150ms ease;\n }\n .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n rotate: 180deg;\n }\n\n /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n .ddga-select-content {\n /* Match trigger width so the panel doesn't visually float wider/narrower\n than the field. `--radix-select-trigger-width` is exposed by Radix\n when `position=\"popper\"`. */\n min-inline-size: var(--radix-select-trigger-width);\n /* Cap height to viewport so long lists scroll instead of overflowing. */\n max-block-size: var(--radix-select-content-available-height);\n z-index: 50;\n overflow: hidden;\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n color: var(--ddga-text-primary);\n }\n\n .ddga-select-viewport {\n padding: var(--ddga-space-1);\n }\n\n /* ─── Item ─── */\n\n .ddga-select-item {\n position: relative;\n display: flex;\n align-items: center;\n block-size: 32px;\n padding-block: var(--ddga-space-2);\n padding-inline-start: var(--ddga-space-3);\n /* Reserve room for the trailing checkmark indicator so item text never\n collides with it when the row is selected. */\n padding-inline-end: var(--ddga-space-8);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n color: var(--ddga-text-primary);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n\n /* Radix sets `data-highlighted` on the keyboard- or pointer-focused item. */\n .ddga-select-item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-select-item[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ─── Item indicator (checkmark on the selected item) ─── */\n\n .ddga-select-item__indicator {\n position: absolute;\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n color: var(--ddga-color-primary);\n }\n .ddga-select-item__check {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-select-trigger,\n .ddga-select__icon {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-select-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-select-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-select-trigger:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n .ddga-select-content {\n border: 1px solid CanvasText;\n }\n .ddga-select-item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-select-item__indicator {\n color: HighlightText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;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}}}
|
|
1
|
+
@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}}}
|
|
2
2
|
/*# sourceMappingURL=sidebar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAOE,oIAWA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAWA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,mLAIA,2JAGA,mHAQA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,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":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-skeleton{background-color:var(--ddga-gray-200);border-radius:var(--ddga-radius-md);display:block;position:relative;overflow:hidden}.ddga-skeleton--text{border-radius:var(--ddga-radius-sm);width:100%;height:1em}.ddga-skeleton--rectangle{width:100%;height:40px}.ddga-skeleton--circle{border-radius:var(--ddga-radius-full);width:40px;height:40px}.ddga-skeleton--pulse{animation:1.5s ease-in-out infinite ddga-skeleton-pulse}@keyframes ddga-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}.ddga-skeleton--wave:after{content:"";background-image:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ddga-color-background) 60%, transparent), transparent);animation:1.6s linear infinite ddga-skeleton-wave;position:absolute;inset:0;transform:translate(-100%)}@keyframes ddga-skeleton-wave{to{transform:translate(100%)}}[dir=rtl] .ddga-skeleton--wave:after{animation-name:ddga-skeleton-wave-rtl;transform:translate(100%)}@keyframes ddga-skeleton-wave-rtl{to{transform:translate(-100%)}}.ddga-skeleton--none{animation:none}.ddga-skeleton--none:after{display:none}@media (prefers-reduced-motion:reduce){.ddga-skeleton--pulse,.ddga-skeleton--wave:after{animation:none}}}
|
|
1
|
+
@layer ddga-components{.ddga-skeleton{background-color:var(--ddga-gray-200);border-radius:var(--ddga-radius-md);display:block;position:relative;overflow:hidden}.ddga-skeleton--text{border-radius:var(--ddga-radius-sm);width:100%;height:1em}.ddga-skeleton--rectangle{width:100%;height:40px}.ddga-skeleton--circle{border-radius:var(--ddga-radius-full);width:40px;height:40px}.ddga-skeleton--pulse{animation:1.5s ease-in-out infinite ddga-skeleton-pulse}@keyframes ddga-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}.ddga-skeleton--wave:after{content:"";background-image:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ddga-color-background) 60%, transparent), transparent);animation:1.6s linear infinite ddga-skeleton-wave;position:absolute;inset:0;transform:translate(-100%)}@keyframes ddga-skeleton-wave{to{transform:translate(100%)}}[dir=rtl] .ddga-skeleton--wave:after{animation-name:ddga-skeleton-wave-rtl;transform:translate(100%)}@keyframes ddga-skeleton-wave-rtl{to{transform:translate(-100%)}}.ddga-skeleton--none{animation:none}.ddga-skeleton--none:after{display:none}[data-theme=dark] .ddga-skeleton{background-color:var(--ddga-color-border)}@media (prefers-reduced-motion:reduce){.ddga-skeleton--pulse,.ddga-skeleton--wave:after{animation:none}}@media (forced-colors:active){.ddga-skeleton{border:1px solid graytext}}}
|
|
2
2
|
/*# sourceMappingURL=skeleton.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBACE,yIAUA,+EAMA,iDAKA,oFAQA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBACE,yIAUA,+EAMA,iDAKA,oFAQA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,wCASA,2EAIA,uCACE,iEASF,8BACE","sources":["src/components/skeleton.css"],"sourcesContent":["@layer ddga-components {\n .ddga-skeleton {\n display: block;\n background-color: var(--ddga-gray-200);\n border-radius: var(--ddga-radius-md);\n position: relative;\n overflow: hidden;\n }\n\n /* ─── Shapes ─── */\n\n .ddga-skeleton--text {\n width: 100%;\n height: 1em;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-skeleton--rectangle {\n width: 100%;\n height: 40px;\n }\n\n .ddga-skeleton--circle {\n width: 40px;\n height: 40px;\n border-radius: var(--ddga-radius-full);\n }\n\n /* ─── Animations ─── */\n\n .ddga-skeleton--pulse {\n animation: ddga-skeleton-pulse 1.5s ease-in-out infinite;\n }\n\n @keyframes ddga-skeleton-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.55;\n }\n }\n\n /* Wave: a translucent gradient sweeps across the surface using a\n pseudo-element so it doesn't interfere with the consumer's content. */\n .ddga-skeleton--wave::after {\n content: '';\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, var(--ddga-color-background) 60%, transparent),\n transparent\n );\n animation: ddga-skeleton-wave 1.6s linear infinite;\n }\n\n @keyframes ddga-skeleton-wave {\n 100% {\n transform: translateX(100%);\n }\n }\n\n /* RTL: sweep direction follows reading direction so the shimmer feels native. */\n [dir='rtl'] .ddga-skeleton--wave::after {\n transform: translateX(100%);\n animation-name: ddga-skeleton-wave-rtl;\n }\n\n @keyframes ddga-skeleton-wave-rtl {\n 100% {\n transform: translateX(-100%);\n }\n }\n\n .ddga-skeleton--none {\n animation: none;\n }\n\n .ddga-skeleton--none::after {\n display: none;\n }\n\n /* ─── Dark mode ─── */\n /* The fill is the raw `--ddga-gray-200` tint, which the dark theme does NOT\n remap (only semantic `--ddga-color-*` adapt). Left alone it renders as a\n bright light box on dark surfaces, so map it to the semantic border gray.\n The wave shimmer already uses `--ddga-color-background` and is fine. */\n [data-theme='dark'] .ddga-skeleton {\n background-color: var(--ddga-color-border);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--pulse,\n .ddga-skeleton--wave::after {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n /* The fill conveys \"content loading here\", but `background-color` is forced\n away in HC. Outline the placeholder so it stays perceivable. */\n @media (forced-colors: active) {\n .ddga-skeleton {\n border: 1px solid GrayText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-slider__header{justify-content:space-between;align-items:baseline;gap:var(--ddga-space-3);display:flex}.ddga-slider__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-slider__value{color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-sm);font-variant-numeric:tabular-nums}.ddga-slider{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;inline-size:100%;display:flex;position:relative}.ddga-slider--md{--ddga-slider-rail:6px;--ddga-slider-thumb:18px;block-size:var(--ddga-slider-thumb)}.ddga-slider--sm{--ddga-slider-rail:4px;--ddga-slider-thumb:14px;block-size:var(--ddga-slider-thumb)}.ddga-slider__track{block-size:var(--ddga-slider-rail);background-color:var(--ddga-color-input);border-radius:999px;flex-grow:1;position:relative}.ddga-slider__range{background-color:var(--ddga-color-primary);border-radius:999px;block-size:100%;position:absolute}.ddga-slider__thumb{inline-size:var(--ddga-slider-thumb);block-size:var(--ddga-slider-thumb);border:2px solid var(--ddga-color-primary);background-color:var(--ddga-color-background);cursor:grab;border-radius:999px;transition:border-color .15s,box-shadow .15s;display:block;box-shadow:0 1px 2px #00000026}.ddga-slider__thumb:active{cursor:grabbing}.ddga-slider__thumb:focus-visible{box-shadow:0 0 0 3px var(--ddga-color-ring);outline:none}.ddga-slider--error .ddga-slider__thumb{border-color:var(--ddga-color-error)}.ddga-slider--error .ddga-slider__range{background-color:var(--ddga-color-error)}.ddga-slider--error .ddga-slider__thumb:focus-visible{box-shadow:0 0 0 3px var(--ddga-color-error)}.ddga-slider[data-disabled]{opacity:.5}.ddga-slider[data-disabled] .ddga-slider__thumb{cursor:not-allowed}[data-theme=dark] .ddga-slider__thumb{background-color
|
|
1
|
+
@layer ddga-components{.ddga-slider__header{justify-content:space-between;align-items:baseline;gap:var(--ddga-space-3);display:flex}.ddga-slider__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-slider__value{color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-sm);font-variant-numeric:tabular-nums}.ddga-slider{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;inline-size:100%;display:flex;position:relative}.ddga-slider--md{--ddga-slider-rail:6px;--ddga-slider-thumb:18px;block-size:var(--ddga-slider-thumb)}.ddga-slider--sm{--ddga-slider-rail:4px;--ddga-slider-thumb:14px;block-size:var(--ddga-slider-thumb)}.ddga-slider__track{block-size:var(--ddga-slider-rail);background-color:var(--ddga-color-input);border-radius:999px;flex-grow:1;position:relative}.ddga-slider__range{background-color:var(--ddga-color-primary);border-radius:999px;block-size:100%;position:absolute}.ddga-slider__thumb{inline-size:var(--ddga-slider-thumb);block-size:var(--ddga-slider-thumb);border:2px solid var(--ddga-color-primary);background-color:var(--ddga-color-background);cursor:grab;border-radius:999px;transition:border-color .15s,box-shadow .15s;display:block;box-shadow:0 1px 2px #00000026}.ddga-slider__thumb:active{cursor:grabbing}.ddga-slider__thumb:focus-visible{box-shadow:0 0 0 3px var(--ddga-color-ring);outline:none}.ddga-slider--error .ddga-slider__thumb{border-color:var(--ddga-color-error)}.ddga-slider--error .ddga-slider__range{background-color:var(--ddga-color-error)}.ddga-slider--error .ddga-slider__thumb:focus-visible{box-shadow:0 0 0 3px var(--ddga-color-error)}.ddga-slider[data-disabled]{opacity:.5}.ddga-slider[data-disabled] .ddga-slider__thumb{cursor:not-allowed}[data-theme=dark] .ddga-slider__thumb{background-color:var(--ddga-gray-100);box-shadow:0 1px 2px #0006}@media (prefers-reduced-motion:reduce){.ddga-slider__thumb{transition:none}}@media (forced-colors:active){.ddga-slider__track{background-color:canvas;border:1px solid canvastext}.ddga-slider__range{background-color:highlight}.ddga-slider__thumb{background-color:buttonface;border-color:canvastext}.ddga-slider__thumb:focus-visible{outline-offset:1px;outline:2px solid highlight}}}
|
|
2
2
|
/*# sourceMappingURL=slider.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAQE,6GAOA,iJAOA,0HAQA,4IAWA,qGAKA,qGAQA,kJAQA,qHASA,gTAcA,2CAIA,2FAOA,6EAGA,iFAGA,mGAMA,uCAGA,mEAMA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAQE,6GAOA,iJAOA,0HAQA,4IAWA,qGAKA,qGAQA,kJAQA,qHASA,gTAcA,2CAIA,2FAOA,6EAGA,iFAGA,mGAMA,uCAGA,mEAMA,uGAOA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,wEAIA","sources":["src/components/slider.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Slider-specific styles live here. Radix Slider\n handles RTL positioning natively via the inherited `dir` (DgaProvider\n wraps Direction.Provider), so no manual flipping is needed here. */\n\n /* ─── Header (label + value readout) ─── */\n\n .ddga-slider__header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n }\n\n .ddga-slider__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-slider__value {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n font-variant-numeric: tabular-nums;\n }\n\n /* ─── Root ─── */\n\n .ddga-slider {\n position: relative;\n display: flex;\n align-items: center;\n inline-size: 100%;\n touch-action: none;\n user-select: none;\n }\n\n /* Per-size rail thickness + thumb diameter, encoded as custom properties so\n the track/thumb rules below stay size-agnostic. */\n .ddga-slider--md {\n --ddga-slider-rail: 6px;\n --ddga-slider-thumb: 18px;\n block-size: var(--ddga-slider-thumb);\n }\n .ddga-slider--sm {\n --ddga-slider-rail: 4px;\n --ddga-slider-thumb: 14px;\n block-size: var(--ddga-slider-thumb);\n }\n\n /* ─── Track + filled range ─── */\n\n .ddga-slider__track {\n position: relative;\n flex-grow: 1;\n block-size: var(--ddga-slider-rail);\n border-radius: 999px;\n background-color: var(--ddga-color-input);\n }\n\n .ddga-slider__range {\n position: absolute;\n block-size: 100%;\n border-radius: 999px;\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Thumb ─── */\n\n .ddga-slider__thumb {\n display: block;\n inline-size: var(--ddga-slider-thumb);\n block-size: var(--ddga-slider-thumb);\n border: 2px solid var(--ddga-color-primary);\n border-radius: 999px;\n background-color: var(--ddga-color-background);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n cursor: grab;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-slider__thumb:active {\n cursor: grabbing;\n }\n\n .ddga-slider__thumb:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-slider--error .ddga-slider__thumb {\n border-color: var(--ddga-color-error);\n }\n .ddga-slider--error .ddga-slider__range {\n background-color: var(--ddga-color-error);\n }\n .ddga-slider--error .ddga-slider__thumb:focus-visible {\n box-shadow: 0 0 0 3px var(--ddga-color-error);\n }\n\n /* ─── Disabled (Radix sets data-disabled on the Root) ─── */\n\n .ddga-slider[data-disabled] {\n opacity: 0.5;\n }\n .ddga-slider[data-disabled] .ddga-slider__thumb {\n cursor: not-allowed;\n }\n\n /* ─── Dark mode: keep the thumb a raised light surface ─── */\n\n [data-theme='dark'] .ddga-slider__thumb {\n background-color: var(--ddga-gray-100);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-slider__thumb {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-slider__track {\n background-color: Canvas;\n border: 1px solid CanvasText;\n }\n .ddga-slider__range {\n background-color: Highlight;\n }\n .ddga-slider__thumb {\n background-color: ButtonFace;\n border-color: CanvasText;\n }\n .ddga-slider__thumb:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n }\n}\n"],"names":[]}
|
package/dist/components/stat.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-stat{gap:var(--ddga-space-1);max-inline-size:20rem;padding:var(--ddga-space-5);background-color:var(--ddga-color-card);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);color:var(--ddga-color-card-foreground);flex-direction:column;display:flex}.ddga-stat--elevated{box-shadow:var(--ddga-shadow-md);border-color:#0000}.ddga-stat--elevated .ddga-stat__icon{border-radius:var(--ddga-radius-full);background-color:var(--ddga-sa-600);block-size:2.5rem;inline-size:2.5rem;color:var(--ddga-color-primary-foreground)}:is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-600);--ddga-stat-accent-bg:var(--ddga-sa-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-600);--ddga-stat-accent-bg:var(--ddga-success-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-600);--ddga-stat-accent-bg:var(--ddga-error-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-600);--ddga-stat-accent-bg:var(--ddga-gray-100)}:is(.ddga-stat--accent,.ddga-stat--gradient) .ddga-stat__icon{background-color:var(--ddga-stat-accent-bg);color:var(--ddga-stat-accent-fg)}.ddga-stat--accent{border-inline-start:3px solid var(--ddga-stat-accent-fg)}.ddga-stat--gradient{box-shadow:var(--ddga-shadow-sm);background-image:linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);border-color:#0000}[dir=rtl] .ddga-stat--gradient{background-image:linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%)}[data-theme=dark] .ddga-stat--flat .ddga-stat__icon{color:var(--ddga-gray-300,#d2d6db);background-color:#ffffff14}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-300,#7ed3a8);--ddga-stat-accent-bg:#25935f2e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-200,#abefc6);--ddga-stat-accent-bg:#0794552e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-200,#fecdca);--ddga-stat-accent-bg:#d92d202e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-300,#d2d6db);--ddga-stat-accent-bg:#ffffff14}.ddga-stat__label-row{justify-content:space-between;align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-stat__label{color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;line-height:1.4}[dir=rtl] .ddga-stat__label{letter-spacing:normal}.ddga-stat__icon{border-radius:var(--ddga-radius-md);background-color:var(--ddga-gray-100);block-size:2.25rem;inline-size:2.25rem;color:var(--ddga-gray-600);font-size:var(--ddga-font-size-lg);flex:none;justify-content:center;align-items:center;display:inline-flex}.ddga-stat__icon>svg{block-size:1em;inline-size:1em}.ddga-stat__value{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-2xl);font-weight:var(--ddga-font-weight-semibold);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}.ddga-stat__change-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-stat__change{--ddga-stat-change-color:var(--ddga-text-secondary);align-items:center;gap:var(--ddga-space-1);color:var(--ddga-stat-change-color);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);font-variant-numeric:tabular-nums;display:inline-flex}.ddga-stat__change--positive{--ddga-stat-change-color:var(--ddga-color-success)}.ddga-stat__change--negative{--ddga-stat-change-color:var(--ddga-color-error)}.ddga-stat__change--neutral{--ddga-stat-change-color:var(--ddga-text-secondary)}.ddga-stat__change--chip{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-full);background-color:var(--ddga-gray-100)}.ddga-stat__change--chip.ddga-stat__change--positive{background-color:var(--ddga-success-50)}.ddga-stat__change--chip.ddga-stat__change--negative{background-color:var(--ddga-error-50)}[data-theme=dark] .ddga-stat__change--chip{background-color:#ffffff14}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--positive{background-color:#0794552e}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--negative{background-color:#d92d202e}.ddga-stat__change-icon{justify-content:center;align-items:center;font-size:.85em;display:inline-flex}.ddga-stat__change-icon>svg{block-size:1em;inline-size:1em}.ddga-stat__change-label{color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-sm)}.ddga-stat__chart{block-size:2.5rem;margin-block-start:var(--ddga-space-2)}.ddga-stat__chart>svg{block-size:100%;inline-size:100%;display:block}.ddga-stat--sm{padding:var(--ddga-space-4)}.ddga-stat--sm .ddga-stat__value{font-size:var(--ddga-font-size-xl)}.ddga-stat--lg{gap:var(--ddga-space-2);padding:var(--ddga-space-6)}.ddga-stat--lg .ddga-stat__value{font-size:var(--ddga-font-size-3xl)}.ddga-stat--xl{gap:var(--ddga-space-2);padding:var(--ddga-space-8)}.ddga-stat--xl .ddga-stat__value{font-size:2.5rem;line-height:1.1}.ddga-stat--xl .ddga-stat__chart{block-size:3.25rem}.ddga-stat-group{--ddga-stat-group-gap:var(--ddga-space-4)}.ddga-stat-group--gap-sm{--ddga-stat-group-gap:var(--ddga-space-3)}.ddga-stat-group--gap-md{--ddga-stat-group-gap:var(--ddga-space-4)}.ddga-stat-group--gap-lg{--ddga-stat-group-gap:var(--ddga-space-6)}.ddga-stat-group--horizontal{gap:var(--ddga-stat-group-gap);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));display:grid}.ddga-stat-group--horizontal.ddga-stat-group--cols{grid-template-columns:repeat(var(--ddga-stat-group-columns), minmax(0, 1fr))}@media (max-width:40rem){.ddga-stat-group--horizontal.ddga-stat-group--cols{grid-template-columns:1fr}}.ddga-stat-group--vertical{gap:var(--ddga-stat-group-gap);flex-direction:column;display:flex}.ddga-stat-group .ddga-stat{max-inline-size:none}@media (forced-colors:active){.ddga-stat__icon,.ddga-stat__change--chip{border:1px solid canvastext}.ddga-stat--accent{border-inline-start-color:highlight}.ddga-stat--gradient{border:1px solid canvastext}}}
|
|
1
|
+
@layer ddga-components{.ddga-stat{gap:var(--ddga-space-1);max-inline-size:20rem;padding:var(--ddga-space-5);background-color:var(--ddga-color-card);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);color:var(--ddga-color-card-foreground);flex-direction:column;display:flex}.ddga-stat--elevated{box-shadow:var(--ddga-shadow-md);border-color:#0000}.ddga-stat--elevated .ddga-stat__icon{border-radius:var(--ddga-radius-full);background-color:var(--ddga-sa-600);block-size:2.5rem;inline-size:2.5rem;color:var(--ddga-color-primary-foreground)}:is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-600);--ddga-stat-accent-bg:var(--ddga-sa-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-600);--ddga-stat-accent-bg:var(--ddga-success-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-600);--ddga-stat-accent-bg:var(--ddga-error-50)}:is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-600);--ddga-stat-accent-bg:var(--ddga-gray-100)}:is(.ddga-stat--accent,.ddga-stat--gradient) .ddga-stat__icon{background-color:var(--ddga-stat-accent-bg);color:var(--ddga-stat-accent-fg)}.ddga-stat--accent{border-inline-start:3px solid var(--ddga-stat-accent-fg)}.ddga-stat--gradient{box-shadow:var(--ddga-shadow-sm);background-image:linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);border-color:#0000}[dir=rtl] .ddga-stat--gradient{background-image:linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%)}[data-theme=dark] .ddga-stat--flat .ddga-stat__icon{color:var(--ddga-gray-300,#d2d6db);background-color:#ffffff14}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient){--ddga-stat-accent-fg:var(--ddga-sa-300,#7ed3a8);--ddga-stat-accent-bg:#25935f2e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=positive]{--ddga-stat-accent-fg:var(--ddga-success-200,#abefc6);--ddga-stat-accent-bg:#0794552e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=negative]{--ddga-stat-accent-fg:var(--ddga-error-200,#fecdca);--ddga-stat-accent-bg:#d92d202e}[data-theme=dark] :is(.ddga-stat--accent,.ddga-stat--gradient)[data-sentiment=neutral]{--ddga-stat-accent-fg:var(--ddga-gray-300,#d2d6db);--ddga-stat-accent-bg:#ffffff14}.ddga-stat__label-row{justify-content:space-between;align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-stat__label{color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;line-height:1.4}[dir=rtl] .ddga-stat__label{letter-spacing:normal}.ddga-stat__icon{border-radius:var(--ddga-radius-md);background-color:var(--ddga-gray-100);block-size:2.25rem;inline-size:2.25rem;color:var(--ddga-gray-600);font-size:var(--ddga-font-size-lg);flex:none;justify-content:center;align-items:center;display:inline-flex}.ddga-stat__icon>svg{block-size:1em;inline-size:1em}.ddga-stat__value{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-2xl);font-weight:var(--ddga-font-weight-semibold);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}[dir=rtl] .ddga-stat__value{letter-spacing:normal}.ddga-stat__change-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-stat__change{--ddga-stat-change-color:var(--ddga-text-secondary);align-items:center;gap:var(--ddga-space-1);color:var(--ddga-stat-change-color);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);font-variant-numeric:tabular-nums;display:inline-flex}.ddga-stat__change--positive{--ddga-stat-change-color:var(--ddga-color-success)}.ddga-stat__change--negative{--ddga-stat-change-color:var(--ddga-color-error)}.ddga-stat__change--neutral{--ddga-stat-change-color:var(--ddga-text-secondary)}.ddga-stat__change--chip{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-full);background-color:var(--ddga-gray-100)}.ddga-stat__change--chip.ddga-stat__change--positive{background-color:var(--ddga-success-50)}.ddga-stat__change--chip.ddga-stat__change--negative{background-color:var(--ddga-error-50)}[data-theme=dark] .ddga-stat__change--chip{background-color:#ffffff14}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--positive{background-color:#0794552e}[data-theme=dark] .ddga-stat__change--chip.ddga-stat__change--negative{background-color:#d92d202e}.ddga-stat__change-icon{justify-content:center;align-items:center;font-size:.85em;display:inline-flex}.ddga-stat__change-icon>svg{block-size:1em;inline-size:1em}.ddga-stat__change-label{color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-sm)}.ddga-stat__chart{block-size:2.5rem;margin-block-start:var(--ddga-space-2)}.ddga-stat__chart>svg{block-size:100%;inline-size:100%;display:block}.ddga-stat--sm{padding:var(--ddga-space-4)}.ddga-stat--sm .ddga-stat__value{font-size:var(--ddga-font-size-xl)}.ddga-stat--lg{gap:var(--ddga-space-2);padding:var(--ddga-space-6)}.ddga-stat--lg .ddga-stat__value{font-size:var(--ddga-font-size-3xl)}.ddga-stat--xl{gap:var(--ddga-space-2);padding:var(--ddga-space-8)}.ddga-stat--xl .ddga-stat__value{font-size:2.5rem;line-height:1.1}.ddga-stat--xl .ddga-stat__chart{block-size:3.25rem}.ddga-stat-group{--ddga-stat-group-gap:var(--ddga-space-4)}.ddga-stat-group--gap-sm{--ddga-stat-group-gap:var(--ddga-space-3)}.ddga-stat-group--gap-md{--ddga-stat-group-gap:var(--ddga-space-4)}.ddga-stat-group--gap-lg{--ddga-stat-group-gap:var(--ddga-space-6)}.ddga-stat-group--horizontal{gap:var(--ddga-stat-group-gap);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));display:grid}.ddga-stat-group--horizontal.ddga-stat-group--cols{grid-template-columns:repeat(var(--ddga-stat-group-columns), minmax(0, 1fr))}@media (max-width:40rem){.ddga-stat-group--horizontal.ddga-stat-group--cols{grid-template-columns:1fr}}.ddga-stat-group--vertical{gap:var(--ddga-stat-group-gap);flex-direction:column;display:flex}.ddga-stat-group .ddga-stat{max-inline-size:none}@media (forced-colors:active){.ddga-stat__icon,.ddga-stat__change--chip{border:1px solid canvastext}.ddga-stat--accent{border-inline-start-color:highlight}.ddga-stat--gradient{border:1px solid canvastext}}}
|
|
2
2
|
/*# sourceMappingURL=stat.css.map */
|