@dev-dga/css 0.13.0 → 1.1.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 +12 -0
- package/dist/components/calendar.css +1 -1
- package/dist/components/calendar.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,17 @@
|
|
|
1
1
|
# @dev-dga/css
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- **Fix — `.ddga-calendar-popover` is bounded to the viewport (`max-inline-size: calc(100vw - 24px)`).** react-aria sets an inline `max-height` on the popover but never a `max-width`, so the 392px calendar grid kept its width on a phone and the 7th weekday column fell off-screen. Below 480px the dialog padding drops to `--ddga-space-3` and the day cell shrinks fluidly via the new `--ddga-calendar-cell-size` custom property, floored at 2rem to stay above the WCAG 2.2 AA target-size minimum. Desktop rendering is unchanged (424px popover, 40px cells).
|
|
8
|
+
|
|
9
|
+
## 1.0.0
|
|
10
|
+
|
|
11
|
+
### Major Changes
|
|
12
|
+
|
|
13
|
+
- **1.0 — the `ddga-*` class names and `--ddga-*` custom properties are now a stable API under [semantic versioning](../../SUPPORT.md).** No CSS changes in this release; the major bump is the suite reaching 1.0 (the three packages version in lockstep). Default token _values_ remain outside the semver contract and continue to be tuned toward SDGA parity in minor/patch releases — see `SUPPORT.md`.
|
|
14
|
+
|
|
3
15
|
## 0.13.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-calendar-popover{z-index:50;background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-2xl);display:flex;overflow:hidden}.ddga-calendar-popover[data-entering]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-calendar-in}.ddga-calendar-popover[data-exiting]{animation:80ms ease-in ddga-calendar-out}@keyframes ddga-calendar-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-calendar-out{0%{opacity:1}to{opacity:0}}.ddga-calendar-dialog{min-block-size:0;max-block-size:100%;padding:var(--ddga-space-4);box-sizing:border-box;outline:none;flex:auto;overflow:auto}.ddga-calendar-toggle{inline-size:100%;background-color:var(--ddga-color-muted);border-radius:var(--ddga-radius-md);margin-block-end:var(--ddga-space-3);padding:2px;display:inline-flex}.ddga-calendar-toggle__button{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:calc(var(--ddga-radius-md) - 2px);color:var(--ddga-text-secondary);font:inherit;font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;background-color:#0000;border:0;outline:none;flex:1 1 0;transition:background-color .12s,color .12s}.ddga-calendar-toggle__button[data-active]{background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);box-shadow:0 1px 2px #00000014}.ddga-calendar-toggle__button:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar{inline-size:392px;max-inline-size:100%}.ddga-calendar__header{align-items:center;gap:var(--ddga-space-2);block-size:40px;margin-block-end:var(--ddga-space-2);display:flex}.ddga-calendar__nav-group{align-items:center;margin-inline-start:auto;display:inline-flex}.ddga-calendar__nav{border-radius:var(--ddga-radius-sm);block-size:40px;inline-size:40px;color:var(--ddga-text-primary);cursor:pointer;background-color:#0000;border:0;outline:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-calendar__nav:hover{background-color:var(--ddga-color-muted);color:var(--ddga-color-foreground)}.ddga-calendar__nav[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar__nav[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed}.ddga-calendar__heading{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);text-align:center;color:var(--ddga-color-foreground);flex:auto;margin:0}.ddga-calendar__nav-selects{align-items:center;gap:var(--ddga-space-2);min-inline-size:0;display:inline-flex}.ddga-calendar__select{appearance:none;border-radius:var(--ddga-radius-sm);font:inherit;font-weight:var(--ddga-font-weight-medium);color:var(--ddga-text-primary);cursor:pointer;font-variant-numeric:tabular-nums;background-color:#0000;border:1px solid #0000;outline:none;max-inline-size:100%;margin:0}.ddga-calendar__select:focus-visible{box-shadow:0 0 0 2px var(--ddga-text-primary)}.ddga-calendar__select option{color:canvastext;background-color:canvas}.ddga-calendar__month-select{font-size:var(--ddga-font-size-base);line-height:var(--ddga-line-height-base,1.5);padding:0}.ddga-calendar__year-chip{border-radius:var(--ddga-radius-sm);align-items:center;display:inline-flex;position:relative}.ddga-calendar__year-chip:hover{background-color:var(--ddga-color-muted)}.ddga-calendar__year-select{block-size:32px;padding-inline:var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);font-size:var(--ddga-font-size-sm);min-inline-size:4.5ch}.ddga-calendar__year-chevron{pointer-events:none;block-size:1rem;inline-size:1rem;color:var(--ddga-text-primary);position:absolute;inset-inline-end:var(--ddga-space-2)}.ddga-calendar__grid{border-collapse:separate;inline-size:100%;border-spacing:0 var(--ddga-space-1)}.ddga-calendar__weekday{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-base);font-weight:var(--ddga-font-weight-regular);color:var(--ddga-text-tertiary);text-align:center}.ddga-calendar__cell{
|
|
1
|
+
@layer ddga-components{.ddga-calendar-popover{z-index:50;background-color:var(--ddga-color-background);max-inline-size:calc(100vw - 24px);color:var(--ddga-color-foreground);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-2xl);display:flex;overflow:hidden}.ddga-calendar-popover[data-entering]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-calendar-in}.ddga-calendar-popover[data-exiting]{animation:80ms ease-in ddga-calendar-out}@keyframes ddga-calendar-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-calendar-out{0%{opacity:1}to{opacity:0}}.ddga-calendar-dialog{min-block-size:0;max-block-size:100%;padding:var(--ddga-space-4);box-sizing:border-box;outline:none;flex:auto;overflow:auto}.ddga-calendar-toggle{inline-size:100%;background-color:var(--ddga-color-muted);border-radius:var(--ddga-radius-md);margin-block-end:var(--ddga-space-3);padding:2px;display:inline-flex}.ddga-calendar-toggle__button{padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:calc(var(--ddga-radius-md) - 2px);color:var(--ddga-text-secondary);font:inherit;font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;background-color:#0000;border:0;outline:none;flex:1 1 0;transition:background-color .12s,color .12s}.ddga-calendar-toggle__button[data-active]{background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);box-shadow:0 1px 2px #00000014}.ddga-calendar-toggle__button:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar{--ddga-calendar-cell-size:2.5rem;inline-size:392px;max-inline-size:100%}.ddga-calendar__header{align-items:center;gap:var(--ddga-space-2);block-size:40px;margin-block-end:var(--ddga-space-2);display:flex}.ddga-calendar__nav-group{align-items:center;margin-inline-start:auto;display:inline-flex}.ddga-calendar__nav{border-radius:var(--ddga-radius-sm);block-size:40px;inline-size:40px;color:var(--ddga-text-primary);cursor:pointer;background-color:#0000;border:0;outline:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-calendar__nav:hover{background-color:var(--ddga-color-muted);color:var(--ddga-color-foreground)}.ddga-calendar__nav[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-calendar__nav[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed}.ddga-calendar__heading{font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);text-align:center;color:var(--ddga-color-foreground);flex:auto;margin:0}.ddga-calendar__nav-selects{align-items:center;gap:var(--ddga-space-2);min-inline-size:0;display:inline-flex}.ddga-calendar__select{appearance:none;border-radius:var(--ddga-radius-sm);font:inherit;font-weight:var(--ddga-font-weight-medium);color:var(--ddga-text-primary);cursor:pointer;font-variant-numeric:tabular-nums;background-color:#0000;border:1px solid #0000;outline:none;max-inline-size:100%;margin:0}.ddga-calendar__select:focus-visible{box-shadow:0 0 0 2px var(--ddga-text-primary)}.ddga-calendar__select option{color:canvastext;background-color:canvas}.ddga-calendar__month-select{font-size:var(--ddga-font-size-base);line-height:var(--ddga-line-height-base,1.5);padding:0}.ddga-calendar__year-chip{border-radius:var(--ddga-radius-sm);align-items:center;display:inline-flex;position:relative}.ddga-calendar__year-chip:hover{background-color:var(--ddga-color-muted)}.ddga-calendar__year-select{block-size:32px;padding-inline:var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);font-size:var(--ddga-font-size-sm);min-inline-size:4.5ch}.ddga-calendar__year-chevron{pointer-events:none;block-size:1rem;inline-size:1rem;color:var(--ddga-text-primary);position:absolute;inset-inline-end:var(--ddga-space-2)}.ddga-calendar__grid{border-collapse:separate;inline-size:100%;border-spacing:0 var(--ddga-space-1)}.ddga-calendar__weekday{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-base);font-weight:var(--ddga-font-weight-regular);color:var(--ddga-text-tertiary);text-align:center}.ddga-calendar__cell{inline-size:var(--ddga-calendar-cell-size);block-size:var(--ddga-calendar-cell-size);appearance:none;text-align:center;font-size:var(--ddga-font-size-base);font-variant-numeric:tabular-nums;color:var(--ddga-color-foreground);border-radius:var(--ddga-radius-full);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:#0000;border:0;outline:none;flex-direction:column;justify-content:center;align-items:center;margin-inline:auto;padding:0;line-height:1;display:inline-flex}.ddga-calendar__cell[data-today]:not([data-selected]){box-shadow:inset 0 0 0 2px var(--ddga-color-primary);color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-medium)}.ddga-calendar__cell-primary{font-size:inherit;line-height:1}.ddga-calendar__cell-secondary{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-tertiary);margin-block-start:1px;line-height:1}.ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary{color:inherit;opacity:.85}.ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]){background-color:var(--ddga-sa-100)}.ddga-calendar__cell[data-pressed]:not([data-disabled]):not([data-selected]){background-color:var(--ddga-sa-200)}.ddga-calendar__cell[data-focus-visible]{box-shadow:inset 0 0 0 2px var(--ddga-text-primary)}.ddga-calendar__cell[data-selected]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-calendar__cell[data-disabled],.ddga-calendar__cell[data-unavailable]{color:var(--ddga-text-placeholder);cursor:not-allowed}.ddga-calendar__cell[data-outside-month]{color:var(--ddga-text-tertiary)}@media (max-width:480px){.ddga-calendar-dialog{padding:var(--ddga-space-3)}.ddga-calendar{--ddga-calendar-cell-size:max(2rem, min(2.5rem, calc((100vw - 3rem) / 7)))}}@media (prefers-reduced-motion:reduce){.ddga-calendar-toggle__button{transition:none}.ddga-calendar-popover[data-entering],.ddga-calendar-popover[data-exiting]{animation:none}}@media (forced-colors:active){.ddga-calendar-popover{border:1px solid canvastext}.ddga-calendar__cell[data-selected]{color:highlighttext;background-color:highlight}.ddga-calendar__cell[data-focus-visible]{outline-offset:1px;outline:2px solid highlight}.ddga-calendar-toggle__button[data-active]{color:highlighttext;background-color:highlight}}}
|
|
2
2
|
/*# sourceMappingURL=calendar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAeE,sNAWA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAOA,sDAOA,oIAOA,0FAOA,4PAcA,sGAIA,oFAGA,sFASA,gLAiBA,6GAOA,4SAeA,mFAGA,uEAMA,yHASA,uHAMA,yEAGA,yKAMA,wKAYA,oGAMA,6LAcA,yfA4BA,sLASA,6DAIA,uIAMA,6FAIA,iHAGA,iHAGA,6FAGA,0HAIA,iIAQA,yEAMA,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA","sources":["src/components/calendar.css"],"sourcesContent":["@layer ddga-components {\n /* Shared calendar dropdown chrome — consumed by both DatePicker and\n DateRangePicker. The field/trigger surface stays per-component\n (date-picker.css / date-range-picker.css); everything inside the popover\n (the floating panel, the Gregorian↔Hijri toggle, and the month grid) is\n identical regardless of single-date vs range selection, so it lives here. */\n\n /* ─── Popover (the floating panel) ─── */\n\n /* react-aria's useOverlayPosition sets `max-height` inline on the popover\n based on the space available between the trigger and the viewport edge\n (minus `containerPadding`). We pair that with `overflow: auto` on the inner\n Dialog so when the calendar can't fit (short iframes, dual-calendar mode),\n the content scrolls instead of being clipped. `overflow: hidden` stays on\n the popover so the rounded corners crop animation bleed. */\n .ddga-calendar-popover {\n z-index: 50;\n display: flex;\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl);\n overflow: hidden;\n }\n\n /* react-aria emits data-entering / data-exiting during transitions. */\n .ddga-calendar-popover[data-entering] {\n animation: ddga-calendar-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-calendar-popover[data-exiting] {\n animation: ddga-calendar-out 80ms ease-in;\n }\n @keyframes ddga-calendar-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-calendar-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Dialog (panel padding + scroll container) ─── */\n\n /* `max-block-size: 100%` + `overflow: auto` make the Dialog the scroll\n container inside the popover. The Popover constrains height via its\n react-aria-set `max-height`; the Dialog respects that bound and scrolls\n internally when the calendar grid + toggle exceed it. `min-block-size: 0`\n is the flex-child trick that lets the scroll container actually shrink. */\n .ddga-calendar-dialog {\n flex: 1 1 auto;\n min-block-size: 0;\n max-block-size: 100%;\n padding: var(--ddga-space-4);\n outline: none;\n overflow: auto;\n box-sizing: border-box;\n }\n\n /* ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── */\n\n .ddga-calendar-toggle {\n display: inline-flex;\n inline-size: 100%;\n margin-block-end: var(--ddga-space-3);\n padding: 2px;\n background-color: var(--ddga-color-muted);\n border-radius: var(--ddga-radius-md);\n }\n .ddga-calendar-toggle__button {\n flex: 1 1 0;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: calc(var(--ddga-radius-md) - 2px);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n cursor: pointer;\n outline: none;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-calendar-toggle__button[data-active] {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n }\n .ddga-calendar-toggle__button:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Calendar grid ─── */\n\n /* SDGA calendar = 392px (7 columns × 56px). */\n .ddga-calendar {\n inline-size: 392px;\n max-inline-size: 100%;\n }\n\n /* SDGA header: month label + year chip at inline-start; the prev/next arrows\n group together at inline-end (flips with dir). */\n .ddga-calendar__header {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 40px;\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-calendar__nav-group {\n display: inline-flex;\n align-items: center;\n margin-inline-start: auto;\n }\n\n /* SDGA arrow buttons (arrow-left-02 / arrow-right-02), 40px hit area. */\n .ddga-calendar__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n cursor: pointer;\n outline: none;\n }\n .ddga-calendar__nav:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-calendar__nav[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-calendar__nav[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* RTL chevron direction is handled in the picker components by swapping the\n icon components themselves (PrevChevron / NextChevron based on `dir`) — more\n robust than a CSS scaleX flip because it doesn't rely on the popover portal\n correctly inheriting the `dir` attribute from the DgaProvider root. */\n\n .ddga-calendar__heading {\n flex: 1 1 auto;\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n text-align: center;\n color: var(--ddga-color-foreground);\n }\n\n /* ─── Month + Year dropdowns (CalendarNavHeader) ─── */\n\n /* Native <select>s give free keyboard support + native focus rings +\n screen-reader announcements; styling stays minimal so the platform's\n wheel/typeahead stays untouched. */\n /* SDGA: month + year sit at the header inline-start. The native <select>s are\n kept (free keyboard + a11y + the consumer's month/year-jump feature) but\n restyled — month reads as a plain text label, year as a chevron chip. */\n .ddga-calendar__nav-selects {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n }\n\n .ddga-calendar__select {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n margin: 0;\n font: inherit;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n cursor: pointer;\n font-variant-numeric: tabular-nums;\n outline: none;\n max-inline-size: 100%;\n }\n .ddga-calendar__select:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-calendar__select option {\n color: CanvasText;\n background-color: Canvas;\n }\n\n /* Month = SDGA text label (Text md/Medium, no chip chrome). */\n .ddga-calendar__month-select {\n padding: 0;\n font-size: var(--ddga-font-size-base);\n line-height: var(--ddga-line-height-base, 1.5);\n }\n\n /* Year = SDGA dropdown chip (Text sm/Medium + decorative chevron). The\n transparent <select> overlays the whole chip, so a click anywhere — chevron\n included — opens the native picker. */\n .ddga-calendar__year-chip {\n position: relative;\n display: inline-flex;\n align-items: center;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-calendar__year-chip:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-calendar__year-select {\n block-size: 32px;\n padding-inline: var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);\n font-size: var(--ddga-font-size-sm);\n min-inline-size: 4.5ch;\n }\n .ddga-calendar__year-chevron {\n position: absolute;\n inset-inline-end: var(--ddga-space-2);\n inline-size: 1rem;\n block-size: 1rem;\n pointer-events: none;\n color: var(--ddga-text-primary);\n }\n\n /* `separate` + a 4px vertical border-spacing gives the SDGA row breathing\n while keeping columns touching, so a range band stays continuous across a\n week yet sits at the 40px cell height (not a full-row pill). */\n .ddga-calendar__grid {\n inline-size: 100%;\n border-collapse: separate;\n border-spacing: 0 var(--ddga-space-1);\n }\n\n .ddga-calendar__weekday {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n /* CalendarCell renders the inner role=\"button\" div; react-aria wires the\n <td>. Style the inner element so the focus ring + selected background stay\n inside the cell footprint. Flex column so a secondary day number (when\n `showSecondaryCalendar` is on) stacks neatly under the primary. */\n /* SDGA day cell = a 40px round indicator, Text md/16. Selected fills it\n SA-600; today is a 2px SA-600 ring; hover is a soft SA-100 disc. */\n .ddga-calendar__cell {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n inline-size: 2.5rem;\n block-size: 2.5rem;\n margin-inline: auto;\n padding: 0;\n /* The single picker renders outside-month cells as a native <button>; reset\n its UA border/background so it matches the <div> cells (else the round\n cell shows a gray button ring). */\n appearance: none;\n -webkit-appearance: none;\n border: 0;\n background-color: transparent;\n text-align: center;\n font-size: var(--ddga-font-size-base);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-full);\n cursor: pointer;\n outline: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-calendar__cell[data-today]:not([data-selected]) {\n box-shadow: inset 0 0 0 2px var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n /* Dual-calendar layout: the primary day stays at the normal size; the\n secondary (alternate calendar) renders below at ~70% size in the muted text\n color. Selected state inherits the contrast color for both. */\n .ddga-calendar__cell-primary {\n font-size: inherit;\n line-height: 1;\n }\n .ddga-calendar__cell-secondary {\n margin-block-start: 1px;\n font-size: var(--ddga-font-size-xs);\n line-height: 1;\n color: var(--ddga-text-tertiary);\n }\n .ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary {\n color: inherit;\n opacity: 0.85;\n }\n .ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-sa-100);\n }\n .ddga-calendar__cell[data-pressed]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-sa-200);\n }\n .ddga-calendar__cell[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-calendar__cell[data-selected] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-calendar__cell[data-disabled],\n .ddga-calendar__cell[data-unavailable] {\n color: var(--ddga-text-placeholder);\n cursor: not-allowed;\n }\n /* Outside-month cells are fully clickable in the single picker — selecting\n one navigates the visible month. Use a softer text color (no opacity\n reduction) so they read as low-emphasis-but-active peers, not disabled. */\n .ddga-calendar__cell[data-outside-month] {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-calendar-toggle__button {\n transition: none;\n }\n .ddga-calendar-popover[data-entering],\n .ddga-calendar-popover[data-exiting] {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-calendar-popover {\n border: 1px solid CanvasText;\n }\n .ddga-calendar__cell[data-selected] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-calendar__cell[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-calendar-toggle__button[data-active] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAkBE,yPAYA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAQA,uFAQA,oIAOA,0FAOA,4PAcA,sGAIA,oFAGA,sFASA,gLAiBA,6GAOA,4SAeA,mFAGA,uEAMA,yHASA,uHAMA,yEAGA,yKAMA,wKAYA,oGAMA,6LAcA,yiBA4BA,sLASA,6DAIA,uIAMA,6FAIA,iHAGA,iHAGA,6FAGA,0HAIA,iIAQA,yEAWA,yBACE,kDAGA,2FAOF,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA","sources":["src/components/calendar.css"],"sourcesContent":["@layer ddga-components {\n /* Shared calendar dropdown chrome — consumed by both DatePicker and\n DateRangePicker. The field/trigger surface stays per-component\n (date-picker.css / date-range-picker.css); everything inside the popover\n (the floating panel, the Gregorian↔Hijri toggle, and the month grid) is\n identical regardless of single-date vs range selection, so it lives here. */\n\n /* ─── Popover (the floating panel) ─── */\n\n /* react-aria's useOverlayPosition sets `max-height` inline on the popover\n based on the space available between the trigger and the viewport edge\n (minus `containerPadding`). We pair that with `overflow: auto` on the inner\n Dialog so when the calendar can't fit (short iframes, dual-calendar mode),\n the content scrolls instead of being clipped. `overflow: hidden` stays on\n the popover so the rounded corners crop animation bleed. */\n /* react-aria sets an inline `max-height` but never a `max-width`, so without\n this the 392px grid keeps its width on a 360px phone and the 7th weekday\n column falls off-screen. 24px = 2 × the Popover's `containerPadding`. */\n .ddga-calendar-popover {\n z-index: 50;\n display: flex;\n max-inline-size: calc(100vw - 24px);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl);\n overflow: hidden;\n }\n\n /* react-aria emits data-entering / data-exiting during transitions. */\n .ddga-calendar-popover[data-entering] {\n animation: ddga-calendar-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-calendar-popover[data-exiting] {\n animation: ddga-calendar-out 80ms ease-in;\n }\n @keyframes ddga-calendar-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-calendar-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Dialog (panel padding + scroll container) ─── */\n\n /* `max-block-size: 100%` + `overflow: auto` make the Dialog the scroll\n container inside the popover. The Popover constrains height via its\n react-aria-set `max-height`; the Dialog respects that bound and scrolls\n internally when the calendar grid + toggle exceed it. `min-block-size: 0`\n is the flex-child trick that lets the scroll container actually shrink. */\n .ddga-calendar-dialog {\n flex: 1 1 auto;\n min-block-size: 0;\n max-block-size: 100%;\n padding: var(--ddga-space-4);\n outline: none;\n overflow: auto;\n box-sizing: border-box;\n }\n\n /* ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── */\n\n .ddga-calendar-toggle {\n display: inline-flex;\n inline-size: 100%;\n margin-block-end: var(--ddga-space-3);\n padding: 2px;\n background-color: var(--ddga-color-muted);\n border-radius: var(--ddga-radius-md);\n }\n .ddga-calendar-toggle__button {\n flex: 1 1 0;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: calc(var(--ddga-radius-md) - 2px);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n cursor: pointer;\n outline: none;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-calendar-toggle__button[data-active] {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n }\n .ddga-calendar-toggle__button:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Calendar grid ─── */\n\n /* SDGA calendar = 392px (7 columns × 56px). The 392 is column slack — the grid's\n true floor is 7 × the cell size — so it shrinks on narrow viewports. */\n .ddga-calendar {\n --ddga-calendar-cell-size: 2.5rem;\n inline-size: 392px;\n max-inline-size: 100%;\n }\n\n /* SDGA header: month label + year chip at inline-start; the prev/next arrows\n group together at inline-end (flips with dir). */\n .ddga-calendar__header {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 40px;\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-calendar__nav-group {\n display: inline-flex;\n align-items: center;\n margin-inline-start: auto;\n }\n\n /* SDGA arrow buttons (arrow-left-02 / arrow-right-02), 40px hit area. */\n .ddga-calendar__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n cursor: pointer;\n outline: none;\n }\n .ddga-calendar__nav:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-calendar__nav[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-calendar__nav[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* RTL chevron direction is handled in the picker components by swapping the\n icon components themselves (PrevChevron / NextChevron based on `dir`) — more\n robust than a CSS scaleX flip because it doesn't rely on the popover portal\n correctly inheriting the `dir` attribute from the DgaProvider root. */\n\n .ddga-calendar__heading {\n flex: 1 1 auto;\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n text-align: center;\n color: var(--ddga-color-foreground);\n }\n\n /* ─── Month + Year dropdowns (CalendarNavHeader) ─── */\n\n /* Native <select>s give free keyboard support + native focus rings +\n screen-reader announcements; styling stays minimal so the platform's\n wheel/typeahead stays untouched. */\n /* SDGA: month + year sit at the header inline-start. The native <select>s are\n kept (free keyboard + a11y + the consumer's month/year-jump feature) but\n restyled — month reads as a plain text label, year as a chevron chip. */\n .ddga-calendar__nav-selects {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n }\n\n .ddga-calendar__select {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n margin: 0;\n font: inherit;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n cursor: pointer;\n font-variant-numeric: tabular-nums;\n outline: none;\n max-inline-size: 100%;\n }\n .ddga-calendar__select:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-calendar__select option {\n color: CanvasText;\n background-color: Canvas;\n }\n\n /* Month = SDGA text label (Text md/Medium, no chip chrome). */\n .ddga-calendar__month-select {\n padding: 0;\n font-size: var(--ddga-font-size-base);\n line-height: var(--ddga-line-height-base, 1.5);\n }\n\n /* Year = SDGA dropdown chip (Text sm/Medium + decorative chevron). The\n transparent <select> overlays the whole chip, so a click anywhere — chevron\n included — opens the native picker. */\n .ddga-calendar__year-chip {\n position: relative;\n display: inline-flex;\n align-items: center;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-calendar__year-chip:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-calendar__year-select {\n block-size: 32px;\n padding-inline: var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);\n font-size: var(--ddga-font-size-sm);\n min-inline-size: 4.5ch;\n }\n .ddga-calendar__year-chevron {\n position: absolute;\n inset-inline-end: var(--ddga-space-2);\n inline-size: 1rem;\n block-size: 1rem;\n pointer-events: none;\n color: var(--ddga-text-primary);\n }\n\n /* `separate` + a 4px vertical border-spacing gives the SDGA row breathing\n while keeping columns touching, so a range band stays continuous across a\n week yet sits at the 40px cell height (not a full-row pill). */\n .ddga-calendar__grid {\n inline-size: 100%;\n border-collapse: separate;\n border-spacing: 0 var(--ddga-space-1);\n }\n\n .ddga-calendar__weekday {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n /* CalendarCell renders the inner role=\"button\" div; react-aria wires the\n <td>. Style the inner element so the focus ring + selected background stay\n inside the cell footprint. Flex column so a secondary day number (when\n `showSecondaryCalendar` is on) stacks neatly under the primary. */\n /* SDGA day cell = a 40px round indicator, Text md/16. Selected fills it\n SA-600; today is a 2px SA-600 ring; hover is a soft SA-100 disc. */\n .ddga-calendar__cell {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n inline-size: var(--ddga-calendar-cell-size);\n block-size: var(--ddga-calendar-cell-size);\n margin-inline: auto;\n padding: 0;\n /* The single picker renders outside-month cells as a native <button>; reset\n its UA border/background so it matches the <div> cells (else the round\n cell shows a gray button ring). */\n appearance: none;\n -webkit-appearance: none;\n border: 0;\n background-color: transparent;\n text-align: center;\n font-size: var(--ddga-font-size-base);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-full);\n cursor: pointer;\n outline: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-calendar__cell[data-today]:not([data-selected]) {\n box-shadow: inset 0 0 0 2px var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n /* Dual-calendar layout: the primary day stays at the normal size; the\n secondary (alternate calendar) renders below at ~70% size in the muted text\n color. Selected state inherits the contrast color for both. */\n .ddga-calendar__cell-primary {\n font-size: inherit;\n line-height: 1;\n }\n .ddga-calendar__cell-secondary {\n margin-block-start: 1px;\n font-size: var(--ddga-font-size-xs);\n line-height: 1;\n color: var(--ddga-text-tertiary);\n }\n .ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary {\n color: inherit;\n opacity: 0.85;\n }\n .ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-sa-100);\n }\n .ddga-calendar__cell[data-pressed]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-sa-200);\n }\n .ddga-calendar__cell[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-calendar__cell[data-selected] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-calendar__cell[data-disabled],\n .ddga-calendar__cell[data-unavailable] {\n color: var(--ddga-text-placeholder);\n cursor: not-allowed;\n }\n /* Outside-month cells are fully clickable in the single picker — selecting\n one navigates the visible month. Use a softer text color (no opacity\n reduction) so they read as low-emphasis-but-active peers, not disabled. */\n .ddga-calendar__cell[data-outside-month] {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Narrow viewports (phones) ─── */\n\n /* Below ~448px the 392px grid + 2×16px dialog padding can't fit. Trim the\n padding first, then let the cell shrink so all 7 columns stay on screen.\n The 3rem subtracted matches this block's total chrome: 24px popover\n containerPadding + 24px dialog padding. Floor 2rem keeps the tap target\n above the WCAG 2.2 AA 24px minimum. */\n @media (max-width: 480px) {\n .ddga-calendar-dialog {\n padding: var(--ddga-space-3);\n }\n .ddga-calendar {\n --ddga-calendar-cell-size: max(2rem, min(2.5rem, calc((100vw - 3rem) / 7)));\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-calendar-toggle__button {\n transition: none;\n }\n .ddga-calendar-popover[data-entering],\n .ddga-calendar-popover[data-exiting] {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-calendar-popover {\n border: 1px solid CanvasText;\n }\n .ddga-calendar__cell[data-selected] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-calendar__cell[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-calendar-toggle__button[data-active] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n"],"names":[]}
|