@dev-dga/css 0.10.1 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/components/card.css +1 -1
- package/dist/components/card.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 +1 -1
- package/dist/components/date-range-picker.css.map +1 -1
- package/dist/components/description-list.css +1 -1
- package/dist/components/description-list.css.map +1 -1
- package/dist/components/steps.css +1 -1
- package/dist/components/steps.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @dev-dga/css
|
|
2
2
|
|
|
3
|
+
## 0.11.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- **Steps — connector lines now actually connect the indicators.** The separator was drawn on every step _except the first_ and only spanned the inter-step gap (`gap + 4px`), leaving a short stub beside each indicator and a large empty run back to the previous circle. It's now an **outbound** connector on every step _except the last_, running from this step's indicator center to the next step's indicator center (negative logical `inset-inline-end` / `inset-block-end` reach across the gap; the circles paint over the ends via `z-index`). Its length is independent of step width/height, and it's correct in both orientations, RTL, and forced-colors. A completed step colors its outbound line.
|
|
8
|
+
- **DatePicker / DateRangePicker — date segments read right-to-left in RTL.** The segment row was forced to `direction: ltr` in every locale, so an Arabic Hijri date laid out reversed (day on the left, era `هـ` on the right). RTL now uses `direction: rtl`, so it reads naturally — day → month → year → era (`هـ`), right-to-left — matching how Arabic dates are written. LTR is unchanged, and the range trigger still keeps the start input on the right in RTL (only the inner segment order flips).
|
|
9
|
+
- **DescriptionList — stacked rows fill the width on mobile (RTL + LTR).** The narrow-viewport breakpoint switches each row to a column but inherited the desktop row's `align-items: baseline`, which shrank the term/details to content width (so a block value such as a `Badge` wouldn't stretch). Reset to `align-items: stretch` — rows fill the width and text aligns to the start edge (right in RTL).
|
|
10
|
+
- **Card — `.ddga-card__icon`.** New class backing the React `<CardIcon>` slot: a start-aligned, SA-Green-tinted icon container above the title that inherits the contrast color on the `gradient` variant. Released in lockstep with `@dev-dga/react` and `@dev-dga/tokens`.
|
|
11
|
+
|
|
3
12
|
## 0.10.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
package/dist/components/card.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-card{--ddga-card-padding:var(--ddga-space-5);background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border-radius:var(--ddga-radius-md);transition:box-shadow .15s,transform .15s,border-color .15s;display:flex;overflow:hidden}.ddga-card--vertical{flex-direction:column}.ddga-card--horizontal{flex-direction:row}.ddga-card--default{border:1px solid var(--ddga-color-border)}.ddga-card--outline{border:1px solid var(--ddga-color-border);background-color:#0000}.ddga-card--elevated{box-shadow:var(--ddga-shadow-md);border:1px solid #0000}.ddga-card--filled{background-color:var(--ddga-color-muted);border:1px solid #0000}.ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));color:var(--ddga-color-primary-foreground);border:1px solid #0000}.ddga-card--gradient .ddga-card__title,.ddga-card--gradient .ddga-card__description{color:inherit}.ddga-card--gradient .ddga-card__description{opacity:.85}.ddga-card--gradient .ddga-card__footer{border-block-start-color:#ffffff26}.ddga-card--ghost{background-color:#0000;border:1px solid #0000}.ddga-card--ghost .ddga-card__footer{border-block-start-color:#0000}.ddga-card--padding-sm{--ddga-card-padding:var(--ddga-space-3)}.ddga-card--padding-md{--ddga-card-padding:var(--ddga-space-5)}.ddga-card--padding-lg{--ddga-card-padding:var(--ddga-space-6)}.ddga-card--interactive{cursor:pointer}.ddga-card--interactive:hover{border-color:var(--ddga-color-input);box-shadow:var(--ddga-shadow-md)}.ddga-card--interactive.ddga-card--elevated:hover,.ddga-card--interactive.ddga-card--gradient:hover{box-shadow:var(--ddga-shadow-lg)}.ddga-card--interactive:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-card__image{object-fit:cover;block-size:auto;inline-size:100%;aspect-ratio:var(--ddga-card-image-aspect,16 / 9);display:block}.ddga-card--horizontal>.ddga-card__image{aspect-ratio:auto;flex-shrink:0;align-self:stretch;block-size:auto;inline-size:40%;max-inline-size:240px}.ddga-card--horizontal>:not(.ddga-card__image){flex:auto}.ddga-card--horizontal>.ddga-card__header+.ddga-card__content{padding-block-start:0}.ddga-card__header{gap:var(--ddga-space-1);padding:var(--ddga-card-padding);flex-direction:column;display:flex}.ddga-card__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-primary);margin:0;line-height:1.4}.ddga-card__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);margin:0;line-height:1.5}.ddga-card__content{padding:var(--ddga-card-padding)}.ddga-card__header+.ddga-card__content{padding-block-start:0}.ddga-card__footer{align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-card-padding);border-block-start:1px solid var(--ddga-color-border);display:flex}.ddga-card__footer:first-child{border-block-start:0}@media (prefers-reduced-motion:reduce){.ddga-card{transition:none}}@media (forced-colors:active){.ddga-card{border:1px solid canvastext}.ddga-card--interactive:focus-visible{outline-offset:2px;outline:2px solid canvastext}}[data-theme=dark] .ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600))}}
|
|
1
|
+
@layer ddga-components{.ddga-card{--ddga-card-padding:var(--ddga-space-5);background-color:var(--ddga-color-card);color:var(--ddga-color-card-foreground);border-radius:var(--ddga-radius-md);transition:box-shadow .15s,transform .15s,border-color .15s;display:flex;overflow:hidden}.ddga-card--vertical{flex-direction:column}.ddga-card--horizontal{flex-direction:row}.ddga-card--default{border:1px solid var(--ddga-color-border)}.ddga-card--outline{border:1px solid var(--ddga-color-border);background-color:#0000}.ddga-card--elevated{box-shadow:var(--ddga-shadow-md);border:1px solid #0000}.ddga-card--filled{background-color:var(--ddga-color-muted);border:1px solid #0000}.ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));color:var(--ddga-color-primary-foreground);border:1px solid #0000}.ddga-card--gradient .ddga-card__title,.ddga-card--gradient .ddga-card__description,.ddga-card--gradient .ddga-card__icon{color:inherit}.ddga-card--gradient .ddga-card__description{opacity:.85}.ddga-card--gradient .ddga-card__footer{border-block-start-color:#ffffff26}.ddga-card--ghost{background-color:#0000;border:1px solid #0000}.ddga-card--ghost .ddga-card__footer{border-block-start-color:#0000}.ddga-card--padding-sm{--ddga-card-padding:var(--ddga-space-3)}.ddga-card--padding-md{--ddga-card-padding:var(--ddga-space-5)}.ddga-card--padding-lg{--ddga-card-padding:var(--ddga-space-6)}.ddga-card--interactive{cursor:pointer}.ddga-card--interactive:hover{border-color:var(--ddga-color-input);box-shadow:var(--ddga-shadow-md)}.ddga-card--interactive.ddga-card--elevated:hover,.ddga-card--interactive.ddga-card--gradient:hover{box-shadow:var(--ddga-shadow-lg)}.ddga-card--interactive:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-card__image{object-fit:cover;block-size:auto;inline-size:100%;aspect-ratio:var(--ddga-card-image-aspect,16 / 9);display:block}.ddga-card--horizontal>.ddga-card__image{aspect-ratio:auto;flex-shrink:0;align-self:stretch;block-size:auto;inline-size:40%;max-inline-size:240px}.ddga-card--horizontal>:not(.ddga-card__image){flex:auto}.ddga-card--horizontal>.ddga-card__header+.ddga-card__content{padding-block-start:0}.ddga-card__header{gap:var(--ddga-space-1);padding:var(--ddga-card-padding);flex-direction:column;display:flex}.ddga-card__icon{color:var(--ddga-color-primary);justify-content:center;align-self:start;align-items:center;margin-block-end:var(--ddga-space-1);display:inline-flex}.ddga-card__icon>svg{block-size:1.75rem;inline-size:1.75rem}.ddga-card__title{font-size:var(--ddga-font-size-lg);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-primary);margin:0;line-height:1.4}.ddga-card__description{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary);margin:0;line-height:1.5}.ddga-card__content{padding:var(--ddga-card-padding)}.ddga-card__header+.ddga-card__content{padding-block-start:0}.ddga-card__footer{align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-card-padding);border-block-start:1px solid var(--ddga-color-border);display:flex}.ddga-card__footer:first-child{border-block-start:0}@media (prefers-reduced-motion:reduce){.ddga-card{transition:none}}@media (forced-colors:active){.ddga-card{border:1px solid canvastext}.ddga-card--interactive:focus-visible{outline-offset:2px;outline:2px solid canvastext}}[data-theme=dark] .ddga-card--gradient{background-image:linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600))}}
|
|
2
2
|
/*# sourceMappingURL=card.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAGE,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAGE,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,wIAKA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,oFAMA,+GAWA,qKAUA,4DAKA,0JAQA,qHAOA,qDAMA,6DAIA,kKASA,oDAMA,uCACE,4BAOF,8BAGE,uCAGA,uFAQF","sources":["src/components/card.css"],"sourcesContent":["@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-card {\n /* Single hook drives all section padding. Variants below redefine it. */\n --ddga-card-padding: var(--ddga-space-5);\n display: flex;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border-radius: var(--ddga-radius-md);\n overflow: hidden;\n transition:\n box-shadow 150ms ease,\n transform 150ms ease,\n border-color 150ms ease;\n }\n\n /* ─── Orientation ─── */\n\n .ddga-card--vertical {\n flex-direction: column;\n }\n .ddga-card--horizontal {\n flex-direction: row;\n /* RTL: row reverses to keep the image at the start (logical) — handled\n implicitly by flexbox honoring the writing direction. */\n }\n\n /* ─── Variants ─── */\n\n .ddga-card--default {\n border: 1px solid var(--ddga-color-border);\n }\n\n .ddga-card--outline {\n background-color: transparent;\n border: 1px solid var(--ddga-color-border);\n }\n\n .ddga-card--elevated {\n border: 1px solid transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-card--filled {\n background-color: var(--ddga-color-muted);\n border: 1px solid transparent;\n }\n\n /* SA Green gradient hero — uses primary palette gradient from dga-preferences\n §5.4 (SA 600 → SA 500 @ 90°). Text + descriptions invert to white. */\n .ddga-card--gradient {\n background-image: linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));\n color: var(--ddga-color-primary-foreground);\n border: 1px solid transparent;\n }\n .ddga-card--gradient .ddga-card__title,\n .ddga-card--gradient .ddga-card__description,\n .ddga-card--gradient .ddga-card__icon {\n color: inherit;\n }\n .ddga-card--gradient .ddga-card__description {\n /* Softer than the title against the gradient. */\n opacity: 0.85;\n }\n .ddga-card--gradient .ddga-card__footer {\n border-block-start-color: rgb(255 255 255 / 0.15);\n }\n\n /* Bare card — no bg, no border, no shadow. For grouped lists where the\n parent provides separation, or when stacking content blocks without\n visual chrome. */\n .ddga-card--ghost {\n background-color: transparent;\n border: 1px solid transparent;\n }\n .ddga-card--ghost .ddga-card__footer {\n border-block-start-color: transparent;\n }\n\n /* ─── Padding scale ─── */\n\n .ddga-card--padding-sm {\n --ddga-card-padding: var(--ddga-space-3);\n }\n .ddga-card--padding-md {\n --ddga-card-padding: var(--ddga-space-5);\n }\n .ddga-card--padding-lg {\n --ddga-card-padding: var(--ddga-space-6);\n }\n\n /* ─── Interactive (hover lift + focus ring; pairs with asChild for clickable cards) ─── */\n\n .ddga-card--interactive {\n cursor: pointer;\n /* No transform on touch — avoids the sticky-hover look on mobile. */\n }\n .ddga-card--interactive:hover {\n border-color: var(--ddga-color-input);\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-card--interactive.ddga-card--elevated:hover,\n .ddga-card--interactive.ddga-card--gradient:hover {\n box-shadow: var(--ddga-shadow-lg);\n }\n .ddga-card--interactive:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Image ─── */\n\n .ddga-card__image {\n display: block;\n inline-size: 100%;\n block-size: auto;\n object-fit: cover;\n aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n }\n\n /* In horizontal cards, the image hugs the start edge and stretches the full\n card height. Cap its width so the content side still has room to breathe. */\n .ddga-card--horizontal > .ddga-card__image {\n aspect-ratio: auto;\n inline-size: 40%;\n max-inline-size: 240px;\n block-size: auto;\n align-self: stretch;\n flex-shrink: 0;\n }\n\n /* The content side of a horizontal card needs to take the remaining width\n and keep its own column layout. */\n .ddga-card--horizontal > :not(.ddga-card__image) {\n flex: 1 1 auto;\n }\n .ddga-card--horizontal > .ddga-card__header + .ddga-card__content {\n padding-block-start: 0;\n }\n\n /* ─── Sections (all share --ddga-card-padding) ─── */\n\n .ddga-card__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-card-padding);\n }\n\n /* Leading icon above the title. Inherits the header's column flow; sized +\n tinted so a bare SVG reads as a deliberate feature icon with no consumer\n styling. The extra block-end margin sets it apart from the tight\n title/description pairing below it. */\n .ddga-card__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Hug the header's start edge (left in LTR, right in RTL) so the icon lines\n up above the title rather than stretching full-width + centering. */\n align-self: start;\n margin-block-end: var(--ddga-space-1);\n color: var(--ddga-color-primary);\n }\n .ddga-card__icon > svg {\n inline-size: 1.75rem;\n block-size: 1.75rem;\n }\n\n .ddga-card__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: var(--ddga-text-primary);\n }\n\n .ddga-card__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-card__content {\n padding: var(--ddga-card-padding);\n }\n\n /* Header immediately followed by content: collapse the redundant top padding\n so the two sections read as one continuous block. */\n .ddga-card__header + .ddga-card__content {\n padding-block-start: 0;\n }\n\n .ddga-card__footer {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-card-padding);\n border-block-start: 1px solid var(--ddga-color-border);\n }\n\n /* No top border when there's no preceding section to separate from. */\n .ddga-card__footer:first-child {\n border-block-start: 0;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-card {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n /* box-shadow + gradient are dropped in forced-colors — keep a visible\n boundary and a real focus outline so cards and their focus state survive. */\n .ddga-card {\n border: 1px solid CanvasText;\n }\n .ddga-card--interactive:focus-visible {\n outline: 2px solid CanvasText;\n outline-offset: 2px;\n }\n }\n\n /* ─── Dark mode adjustments ─── */\n\n [data-theme='dark'] .ddga-card--gradient {\n background-image: linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600));\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-date-picker__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);display:inline-flex}.ddga-date-picker__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-date-picker-trigger{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-date-picker-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-date-picker-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-date-picker-trigger[data-focus-within]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-picker-trigger[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-date-picker-trigger--error{border-color:var(--ddga-color-error)}.ddga-date-picker-trigger--error[data-focus-within]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-date-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:auto;align-items:center;min-inline-size:0;display:inline-flex}.ddga-date-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-color-foreground);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-date-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker__segment[data-type=literal]{color:var(--ddga-text-tertiary);padding-inline:0}.ddga-date-picker__segment[data-type=literal][data-focused]{color:var(--ddga-text-tertiary);background-color:#0000}.ddga-date-picker__icon-button{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}.ddga-date-picker__icon-button:hover{color:var(--ddga-color-foreground);background-color:var(--ddga-color-muted)}.ddga-date-picker__icon-button[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker__icon-button[data-disabled]{cursor:not-allowed}.ddga-date-picker__icon{block-size:1em;inline-size:1em}@media (prefers-reduced-motion:reduce){.ddga-date-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-picker-trigger{border:1px solid canvastext}.ddga-date-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-picker__segment[data-focused]{forced-color-adjust:none;color:highlighttext;background-color:highlight}.ddga-date-picker__icon-button[data-focus-visible]{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}}
|
|
1
|
+
@layer ddga-components{.ddga-date-picker__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);display:inline-flex}.ddga-date-picker__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-date-picker-trigger{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-date-picker-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-date-picker-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-date-picker-trigger[data-focus-within]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-picker-trigger[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-date-picker-trigger--error{border-color:var(--ddga-color-error)}.ddga-date-picker-trigger--error[data-focus-within]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-date-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:auto;align-items:center;min-inline-size:0;display:inline-flex}[dir=rtl] .ddga-date-picker__input{direction:rtl}.ddga-date-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-color-foreground);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-date-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker__segment[data-type=literal]{color:var(--ddga-text-tertiary);padding-inline:0}.ddga-date-picker__segment[data-type=literal][data-focused]{color:var(--ddga-text-tertiary);background-color:#0000}.ddga-date-picker__icon-button{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}.ddga-date-picker__icon-button:hover{color:var(--ddga-color-foreground);background-color:var(--ddga-color-muted)}.ddga-date-picker__icon-button[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker__icon-button[data-disabled]{cursor:not-allowed}.ddga-date-picker__icon{block-size:1em;inline-size:1em}@media (prefers-reduced-motion:reduce){.ddga-date-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-picker-trigger{border:1px solid canvastext}.ddga-date-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-picker__segment[data-focused]{forced-color-adjust:none;color:highlighttext;background-color:highlight}.ddga-date-picker__icon-button[data-focus-visible]{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}}
|
|
2
2
|
/*# sourceMappingURL=date-picker.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAQE,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAQE,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAcA,iDAIA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAOA,uCACE,2CAOF,8BACE,sDAGA,4FAIA,iHAKA","sources":["src/components/date-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DatePicker field/trigger chrome only. The calendar dropdown (popover,\n toggle, month grid) is shared with DateRangePicker — see calendar.css.\n Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. */\n\n /* ─── Label + required ─── */\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n }\n .ddga-date-picker__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (react-aria Group, hosts segments + icon button) ─── */\n\n /* Heights match Input/Select so DatePicker triggers line up in a form row.\n The Group itself is the border/focus container — react-aria emits\n data-focus-within when any segment or the icon button has focus. */\n .ddga-date-picker-trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n text-align: start;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-date-picker-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-picker-trigger[data-focus-within] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-date-picker-trigger[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-date-picker-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── DateInput + Segments ─── */\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 1 1 auto;\n min-inline-size: 0;\n /* LTR default: segments read day-month-year left-to-right. */\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n /* RTL: segments must flow right-to-left so an Arabic date reads naturally —\n day (rightmost) → month → year → era (هـ, leftmost). react-aria emits the\n segments in that logical order (day, month, year, era); the LTR default\n above would lay them out reversed (day on the left, era on the right). */\n [dir='rtl'] .ddga-date-picker__input {\n direction: rtl;\n }\n\n .ddga-date-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-color-foreground);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* Non-editable segments (literal separators like \"/\" or \"-\") shouldn't show\n the focus background even if Tab lands on them — react-aria marks them with\n data-type=\"literal\". */\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Calendar icon button (popover trigger) ─── */\n\n .ddga-date-picker__icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n margin-inline-start: auto;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker__icon-button:hover {\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-picker__icon-button[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker__icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-picker__segment[data-focused] {\n forced-color-adjust: none;\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n box-shadow: none;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-date-range-picker__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);display:inline-flex}.ddga-date-range-picker__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-date-range-picker-trigger{align-items:center;gap:var(--ddga-space-1);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-date-range-picker-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-date-range-picker-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-date-range-picker-trigger[data-focus-within]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-range-picker-trigger[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-date-range-picker-trigger--error{border-color:var(--ddga-color-error)}.ddga-date-range-picker-trigger--error[data-focus-within]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-date-range-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:none;align-items:center;min-inline-size:0;display:inline-flex}.ddga-date-range-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-color-foreground);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-range-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-date-range-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-range-picker__segment[data-type=literal]{color:var(--ddga-text-tertiary);padding-inline:0}.ddga-date-range-picker__segment[data-type=literal][data-focused]{color:var(--ddga-text-tertiary);background-color:#0000}.ddga-date-range-picker__separator{padding-inline:var(--ddga-space-1);color:var(--ddga-text-tertiary);flex:none}.ddga-date-range-picker__icon-button{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}.ddga-date-range-picker__icon-button:hover{color:var(--ddga-color-foreground);background-color:var(--ddga-color-muted)}.ddga-date-range-picker__icon-button[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-range-picker__icon-button[data-disabled]{cursor:not-allowed}.ddga-date-range-picker__icon{block-size:1em;inline-size:1em}.ddga-calendar--range td:has([data-selected]){background-color:color-mix(in srgb, var(--ddga-color-primary) 12%, transparent)}.ddga-calendar--range td:has([data-selection-start]){border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm)}.ddga-calendar--range td:has([data-selection-end]){border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-calendar--range .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]){color:var(--ddga-color-foreground);background-color:#0000}@media (prefers-reduced-motion:reduce){.ddga-date-range-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-range-picker-trigger{border:1px solid canvastext}.ddga-date-range-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-calendar--range td:has([data-selected]){background-color:highlight}.ddga-calendar--range .ddga-calendar__cell[data-selected]{color:highlighttext}}}
|
|
1
|
+
@layer ddga-components{.ddga-date-range-picker__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);display:inline-flex}.ddga-date-range-picker__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-date-range-picker-trigger{align-items:center;gap:var(--ddga-space-1);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-date-range-picker-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-date-range-picker-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-date-range-picker-trigger[data-focus-within]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-range-picker-trigger[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-date-range-picker-trigger--error{border-color:var(--ddga-color-error)}.ddga-date-range-picker-trigger--error[data-focus-within]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-date-range-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:none;align-items:center;min-inline-size:0;display:inline-flex}[dir=rtl] .ddga-date-range-picker__input{direction:rtl}.ddga-date-range-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-color-foreground);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-range-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-date-range-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-range-picker__segment[data-type=literal]{color:var(--ddga-text-tertiary);padding-inline:0}.ddga-date-range-picker__segment[data-type=literal][data-focused]{color:var(--ddga-text-tertiary);background-color:#0000}.ddga-date-range-picker__separator{padding-inline:var(--ddga-space-1);color:var(--ddga-text-tertiary);flex:none}.ddga-date-range-picker__icon-button{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}.ddga-date-range-picker__icon-button:hover{color:var(--ddga-color-foreground);background-color:var(--ddga-color-muted)}.ddga-date-range-picker__icon-button[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-range-picker__icon-button[data-disabled]{cursor:not-allowed}.ddga-date-range-picker__icon{block-size:1em;inline-size:1em}.ddga-calendar--range td:has([data-selected]){background-color:color-mix(in srgb, var(--ddga-color-primary) 12%, transparent)}.ddga-calendar--range td:has([data-selection-start]){border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm)}.ddga-calendar--range td:has([data-selection-end]){border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-calendar--range .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]){color:var(--ddga-color-foreground);background-color:#0000}@media (prefers-reduced-motion:reduce){.ddga-date-range-picker-trigger{transition:none}}@media (forced-colors:active){.ddga-date-range-picker-trigger{border:1px solid canvastext}.ddga-date-range-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-calendar--range td:has([data-selected]){background-color:highlight}.ddga-calendar--range .ddga-calendar__cell[data-selected]{color:highlighttext}}}
|
|
2
2
|
/*# sourceMappingURL=date-range-picker.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAQE,+MAQA,4FAOA,4UAeA,0HAKA,4HAMA,mIAKA,sHAMA,4EAGA,4IAOA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAQE,+MAQA,4FAOA,4UAeA,0HAKA,4HAMA,mIAKA,sHAMA,4EAGA,4IAOA,kJAgBA,uDAIA,oOASA,sFAGA,qIAIA,qGAIA,yHAKA,gHAQA,0TAgBA,uHAIA,qGAGA,uEAGA,6DAeA,8HAKA,mJAIA,6IAMA,0KAUA,uCACE,iDAOF,8BACE,4DAGA,kGAMA,yEAGA","sources":["src/components/date-range-picker.css"],"sourcesContent":["@layer ddga-components {\n /* DateRangePicker field/trigger chrome + range-fill cell styling. The calendar\n dropdown (popover, toggle, month grid, day cells) is shared with DatePicker —\n see calendar.css. Wrapper (.ddga-field) + helper/error (.ddga-field__message)\n are shared — see field.css. */\n\n /* ─── Label + required ─── */\n\n .ddga-date-range-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n }\n .ddga-date-range-picker__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (react-aria Group: start input + separator + end input + button) ─── */\n\n .ddga-date-range-picker-trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n text-align: start;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-date-range-picker-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-range-picker-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-range-picker-trigger[data-focus-within] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-date-range-picker-trigger[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-date-range-picker-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-date-range-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── DateInputs + segments + separator ─── */\n\n .ddga-date-range-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n min-inline-size: 0;\n /* LTR default: each date reads day-month-year left-to-right. The flex row\n itself follows page dir, so in RTL the start input still sits on the\n right (start of the range). */\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n /* RTL: each date's segments flow right-to-left so it reads naturally —\n day (rightmost) → month → year → era (هـ, leftmost). The trigger row keeps\n following page dir (start input on the right); only the inner segment\n order flips. Mirrors DatePicker — keep both pickers in lockstep. */\n [dir='rtl'] .ddga-date-range-picker__input {\n direction: rtl;\n }\n\n .ddga-date-range-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-color-foreground);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n .ddga-date-range-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-range-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-date-range-picker__separator {\n flex: 0 0 auto;\n padding-inline: var(--ddga-space-1);\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Calendar icon button (popover trigger) ─── */\n\n .ddga-date-range-picker__icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n margin-inline-start: auto;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n outline: none;\n }\n .ddga-date-range-picker__icon-button:hover {\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-range-picker__icon-button[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-range-picker__icon-button[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-range-picker__icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Range fill (scoped to RangeCalendar via .ddga-calendar--range) ─── */\n\n /* react-aria emits data-selected on EVERY in-range cell, plus\n data-selection-start / data-selection-end on the two endpoints. We paint a\n soft connector across the whole range on the <td> (so it spans the full\n column width and reads continuous), keep the endpoints as solid primary\n circles (the base .ddga-calendar__cell[data-selected] rule), and make the\n in-between cells transparent so only the td connector shows behind them. */\n\n /* Connector bar on the td — spans the full column, unlike the 2rem inner cell. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: color-mix(in srgb, var(--ddga-color-primary) 12%, transparent);\n }\n /* Round only the outer edges of the bar (logical → flips in RTL). A single-day\n range carries both attrs, so it rounds to a full pill. */\n .ddga-calendar--range td:has([data-selection-start]) {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-calendar--range td:has([data-selection-end]) {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n\n /* In-between days: let the td connector show through; keep text legible. */\n .ddga-calendar--range\n .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]) {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n /* The endpoints stay solid primary (base rule); their secondary calendar text\n already inherits the contrast color via calendar.css. */\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-range-picker-trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-range-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n /* color-mix backgrounds disappear in forced-colors — restore a visible range\n using the Highlight system color on the connector td + endpoints. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: Highlight;\n }\n .ddga-calendar--range .ddga-calendar__cell[data-selected] {\n color: HighlightText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-description-list{--ddga-dl-term-width:12rem;color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);margin:0}.ddga-description-list__item{gap:var(--ddga-space-2) var(--ddga-space-4);padding-block:var(--ddga-space-2);display:flex}.ddga-description-list__term{color:var(--ddga-text-secondary);font-weight:var(--ddga-font-weight-medium);line-height:1.5}.ddga-description-list__details{color:var(--ddga-text-primary);margin:0;line-height:1.5}.ddga-description-list--horizontal .ddga-description-list__item{flex-direction:row;align-items:baseline}.ddga-description-list--horizontal .ddga-description-list__term{inline-size:var(--ddga-dl-term-width);flex:none}.ddga-description-list--horizontal .ddga-description-list__details{flex:auto;min-inline-size:0}@media (max-width:480px){.ddga-description-list--horizontal .ddga-description-list__item{gap:var(--ddga-space-1);flex-direction:column}.ddga-description-list--horizontal .ddga-description-list__term{inline-size:auto}}.ddga-description-list--vertical .ddga-description-list__item{gap:var(--ddga-space-1);flex-direction:column}.ddga-description-list--divided .ddga-description-list__item{border-block-end:1px solid var(--ddga-color-border)}.ddga-description-list--divided .ddga-description-list__item:last-child{border-block-end:0}@media (forced-colors:active){.ddga-description-list--divided .ddga-description-list__item{border-block-end-color:canvastext}}}
|
|
1
|
+
@layer ddga-components{.ddga-description-list{--ddga-dl-term-width:12rem;color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);margin:0}.ddga-description-list__item{gap:var(--ddga-space-2) var(--ddga-space-4);padding-block:var(--ddga-space-2);display:flex}.ddga-description-list__term{color:var(--ddga-text-secondary);font-weight:var(--ddga-font-weight-medium);line-height:1.5}.ddga-description-list__details{color:var(--ddga-text-primary);margin:0;line-height:1.5}.ddga-description-list--horizontal .ddga-description-list__item{flex-direction:row;align-items:baseline}.ddga-description-list--horizontal .ddga-description-list__term{inline-size:var(--ddga-dl-term-width);flex:none}.ddga-description-list--horizontal .ddga-description-list__details{flex:auto;min-inline-size:0}@media (max-width:480px){.ddga-description-list--horizontal .ddga-description-list__item{align-items:stretch;gap:var(--ddga-space-1);flex-direction:column}.ddga-description-list--horizontal .ddga-description-list__term{inline-size:auto}}.ddga-description-list--vertical .ddga-description-list__item{gap:var(--ddga-space-1);flex-direction:column}.ddga-description-list--divided .ddga-description-list__item{border-block-end:1px solid var(--ddga-color-border)}.ddga-description-list--divided .ddga-description-list__item:last-child{border-block-end:0}@media (forced-colors:active){.ddga-description-list--divided .ddga-description-list__item{border-block-end-color:canvastext}}}
|
|
2
2
|
/*# sourceMappingURL=description-list.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAKE,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAKE,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,kIASA,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 /* Reset the row layout's baseline alignment back to the flex default —\n in a column, baseline shrinks term/details to content width instead\n of letting them fill, so a block value (e.g. a Badge) wouldn't\n stretch. Text still aligns to the start edge (right in RTL). */\n align-items: stretch;\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-steps{color:var(--ddga-text-primary);margin:0;padding:0;font-family:inherit;list-style:none;display:flex}.ddga-steps--horizontal{align-items:flex-start;gap:var(--ddga-space-2);flex-direction:row}.ddga-steps--vertical{gap:var(--ddga-space-3);flex-direction:column}.ddga-steps__step{flex:1;min-inline-size:0;display:flex;position:relative}.ddga-steps--horizontal .ddga-steps__step{align-items:flex-start;gap:var(--ddga-space-2);flex-direction:column}.ddga-steps--vertical .ddga-steps__step{align-items:flex-start;gap:var(--ddga-space-3);flex-direction:row}.ddga-steps--horizontal .ddga-steps__step
|
|
1
|
+
@layer ddga-components{.ddga-steps{color:var(--ddga-text-primary);margin:0;padding:0;font-family:inherit;list-style:none;display:flex}.ddga-steps--horizontal{align-items:flex-start;gap:var(--ddga-space-2);flex-direction:row}.ddga-steps--vertical{gap:var(--ddga-space-3);flex-direction:column}.ddga-steps__step{flex:1;min-inline-size:0;display:flex;position:relative}.ddga-steps--horizontal .ddga-steps__step{align-items:flex-start;gap:var(--ddga-space-2);flex-direction:column}.ddga-steps--vertical .ddga-steps__step{align-items:flex-start;gap:var(--ddga-space-3);flex-direction:row}.ddga-steps--horizontal .ddga-steps__step:not(:last-child):before{content:"";block-size:2px;background-color:var(--ddga-color-border);position:absolute;inset-block-start:11px;inset-inline-start:12px;inset-inline-end:calc(-1 * (var(--ddga-space-2) + 12px))}.ddga-steps--vertical .ddga-steps__step:not(:last-child):before{content:"";inline-size:2px;background-color:var(--ddga-color-border);position:absolute;inset-block-start:12px;inset-block-end:calc(-1 * (var(--ddga-space-3) + 12px));inset-inline-start:11px}.ddga-steps__step--completed:not(:last-child):before{background-color:var(--ddga-color-primary)}.ddga-steps__indicator{border:2px solid var(--ddga-color-border);background-color:var(--ddga-color-background);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-xs);z-index:1;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;line-height:1;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex;position:relative}.ddga-steps__indicator-check{block-size:.875em;inline-size:.875em;display:none}.ddga-steps__step--completed .ddga-steps__indicator{background-color:var(--ddga-color-primary);border-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-steps__step--completed .ddga-steps__indicator-check{display:inline-block}.ddga-steps__step--completed .ddga-steps__indicator-number{display:none}.ddga-steps__step--current .ddga-steps__indicator{border-color:var(--ddga-color-primary);color:var(--ddga-color-primary)}.ddga-steps__title{color:var(--ddga-text-secondary);font-weight:500;line-height:1.4;display:block}.ddga-steps__step--current .ddga-steps__title{color:var(--ddga-text-primary);font-weight:600}.ddga-steps__step--completed .ddga-steps__title{color:var(--ddga-text-primary)}.ddga-steps__description{color:var(--ddga-text-tertiary);font-size:var(--ddga-font-size-xs);margin-block-start:var(--ddga-space-1);line-height:1.4;display:block}.ddga-steps--sm{font-size:var(--ddga-font-size-xs)}.ddga-steps--md{font-size:var(--ddga-font-size-sm)}@media (prefers-reduced-motion:reduce){.ddga-steps__indicator{transition:none}}@media (forced-colors:active){.ddga-steps__indicator{color:canvastext;border-color:canvastext}.ddga-steps__step--completed .ddga-steps__indicator,.ddga-steps__step--current .ddga-steps__indicator{color:highlight;border-color:highlight}.ddga-steps__step:not(:last-child):before{background-color:canvastext}.ddga-steps__step--completed:not(:last-child):before{background-color:highlight}}}
|
|
2
2
|
/*# sourceMappingURL=steps.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBASE,+GASA,0FAMA,oEAOA,0EAOA,+GAKA,0GAmBA,gQAYA,8PAcA,gGAMA,+aAuBA,+EAOA,iLAKA,+EAGA,wEAKA,yHAOA,kGAOA,6FAKA,+EAIA,iKAUA,mDAGA,mDAMA,uCACE,wCAOF,8BACE,gEAIA,6IAKA,sEAGA","sources":["src/components/steps.css"],"sourcesContent":["@layer ddga-components {\n /* Size + orientation live on the root; state lives on each Step. Separator\n lines are CSS-drawn via `::before` on every Step except the last,\n stretching forward from this Step's indicator to the next Step's\n indicator. Logical properties handle the RTL flip — no JS, no JS\n conditional classes. */\n\n /* ─── Root (ol) ─── */\n\n .ddga-steps {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--ddga-text-primary);\n font-family: inherit;\n }\n\n .ddga-steps--horizontal {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n }\n\n .ddga-steps--vertical {\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n /* ─── Step (li) ─── */\n\n .ddga-steps__step {\n position: relative;\n display: flex;\n flex: 1;\n min-inline-size: 0;\n }\n\n .ddga-steps--horizontal .ddga-steps__step {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n }\n .ddga-steps--vertical .ddga-steps__step {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--ddga-space-3);\n }\n\n /* ─── Separator line (CSS-drawn, between siblings) ─── */\n /*\n * Drawn on every step except the last: an OUTBOUND connector running from\n * THIS step's indicator center to the NEXT step's indicator center. The\n * indicator center sits at 24px / 2 = 12px from the step's start; the\n * negative inline-end (or block-end) reaches past this step's edge, across\n * the inter-step gap, to the next indicator. The circles paint over the line\n * (indicator z-index:1) so it reads as connecting circle-to-circle. Length\n * is independent of step width/height — only the fixed gap + 12px matters.\n * Color reflects THIS step's state — when this step is completed the line to\n * the next is completed too. (Visual-only progress indicator.)\n */\n\n .ddga-steps--horizontal .ddga-steps__step:not(:last-child)::before {\n content: '';\n position: absolute;\n block-size: 2px;\n /* Sit at the vertical center of the indicator (24px / 2). */\n inset-block-start: 11px;\n /* From this indicator's center forward to the next indicator's center. */\n inset-inline-start: 12px;\n inset-inline-end: calc(-1 * (var(--ddga-space-2) + 12px));\n background-color: var(--ddga-color-border);\n }\n\n .ddga-steps--vertical .ddga-steps__step:not(:last-child)::before {\n content: '';\n position: absolute;\n inline-size: 2px;\n /* Sit at the horizontal center of the indicator. */\n inset-inline-start: 11px;\n /* From this indicator's center down to the next indicator's center. */\n inset-block-start: 12px;\n inset-block-end: calc(-1 * (var(--ddga-space-3) + 12px));\n background-color: var(--ddga-color-border);\n }\n\n /* A completed step colours its OUTBOUND line — the path leaving a completed\n step toward the next reflects that the journey past it is done. */\n .ddga-steps__step--completed:not(:last-child)::before {\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Indicator (numbered circle / check) ─── */\n\n .ddga-steps__indicator {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border-radius: 999px;\n border: 2px solid var(--ddga-color-border);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n font-weight: 600;\n line-height: 1;\n /* Above the separator line so it doesn't visually cross through. */\n position: relative;\n z-index: 1;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-steps__indicator-check {\n inline-size: 0.875em;\n block-size: 0.875em;\n display: none;\n }\n\n /* Completed: filled-primary circle with a check icon (number hidden). */\n .ddga-steps__step--completed .ddga-steps__indicator {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-steps__step--completed .ddga-steps__indicator-check {\n display: inline-block;\n }\n .ddga-steps__step--completed .ddga-steps__indicator-number {\n display: none;\n }\n\n /* Current: outlined-primary circle with the number visible. */\n .ddga-steps__step--current .ddga-steps__indicator {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* ─── Title + Description ─── */\n\n .ddga-steps__title {\n display: block;\n color: var(--ddga-text-secondary);\n font-weight: 500;\n line-height: 1.4;\n }\n\n .ddga-steps__step--current .ddga-steps__title {\n color: var(--ddga-text-primary);\n font-weight: 600;\n }\n\n .ddga-steps__step--completed .ddga-steps__title {\n color: var(--ddga-text-primary);\n }\n\n .ddga-steps__description {\n display: block;\n margin-block-start: var(--ddga-space-1);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.4;\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-steps--sm {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-steps--md {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-steps__indicator {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-steps__indicator {\n border-color: CanvasText;\n color: CanvasText;\n }\n .ddga-steps__step--completed .ddga-steps__indicator,\n .ddga-steps__step--current .ddga-steps__indicator {\n border-color: Highlight;\n color: Highlight;\n }\n .ddga-steps__step:not(:last-child)::before {\n background-color: CanvasText;\n }\n .ddga-steps__step--completed:not(:last-child)::before {\n background-color: Highlight;\n }\n }\n}\n"],"names":[]}
|