@dev-dga/css 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @dev-dga/css
 
+## 0.6.0
+
+### Minor Changes
+
+- **Per-component CSS for the 7 new components in `@dev-dga/react@0.6.0`:** `components/date-picker.css`, `components/file-upload.css`, `components/slider.css`, `components/number-input.css`, `components/rating.css`, `components/toggle.css`, `components/description-list.css`. Each lives in `@layer ddga-components` and uses logical properties (`inline-size` / `inset-inline-*`) so it's RTL-correct without per-side overrides; direction-sensitive bits (Slider/Rating fill, NumberInput digit direction, Toggle segmented radii, DescriptionList layout) flip via logical props, and animations respect `prefers-reduced-motion` + `forced-colors`.
+- **New overridable component CSS variables:** `--ddga-rating-color` (star fill, defaults to gold-500) and `--ddga-dl-term-width` (DescriptionList term column).
+- No token-value changes; all new component CSS resolves existing `var(--ddga-*)` tokens.
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/components/date-picker.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-date-picker__label{align-items:center;gap:var(--ddga-space-1);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-color-foreground);display:inline-flex}.ddga-date-picker__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-date-picker-trigger{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-color-foreground);text-align:start;transition:border-color .12s,box-shadow .12s;display:inline-flex}.ddga-date-picker-trigger--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-date-picker-trigger--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-date-picker-trigger[data-focus-within]{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-picker-trigger[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-date-picker-trigger--error{border-color:var(--ddga-color-error)}.ddga-date-picker-trigger--error[data-focus-within]{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-date-picker__input{font-variant-numeric:tabular-nums;direction:ltr;flex:auto;align-items:center;min-inline-size:0;display:inline-flex}.ddga-date-picker__segment{border-radius:var(--ddga-radius-sm);color:var(--ddga-color-foreground);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;outline:none;padding-block:1px;padding-inline:1px}.ddga-date-picker__segment[data-placeholder]{color:var(--ddga-text-placeholder)}.ddga-date-picker__segment[data-focused]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker__segment[data-type=literal]{color:var(--ddga-text-tertiary);padding-inline:0}.ddga-date-picker__segment[data-type=literal][data-focused]{color:var(--ddga-text-tertiary);background-color:#0000}.ddga-date-picker__icon-button{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}.ddga-date-picker__icon-button:hover{color:var(--ddga-color-foreground);background-color:var(--ddga-color-muted)}.ddga-date-picker__icon-button[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker__icon-button[data-disabled]{cursor:not-allowed}.ddga-date-picker__icon{block-size:1em;inline-size:1em}.ddga-date-picker-popover{z-index:50;background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-md);box-shadow:var(--ddga-shadow-md);display:flex;overflow:hidden}.ddga-date-picker-popover[data-entering]{animation:.12s cubic-bezier(.16,1,.3,1) ddga-date-picker-in}.ddga-date-picker-popover[data-exiting]{animation:80ms ease-in ddga-date-picker-out}@keyframes ddga-date-picker-in{0%{opacity:0;transform:translateY(-2px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ddga-date-picker-out{0%{opacity:1}to{opacity:0}}.ddga-date-picker-dialog{min-block-size:0;max-block-size:100%;padding:var(--ddga-space-3);box-sizing:border-box;outline:none;flex:auto;overflow:auto}.ddga-date-picker-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-date-picker-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-date-picker-toggle__button[data-active]{background-color:var(--ddga-color-background);color:var(--ddga-color-foreground);box-shadow:0 1px 2px #00000014}.ddga-date-picker-toggle__button:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker-calendar{inline-size:min(100%,280px)}.ddga-date-picker-calendar__header{justify-content:space-between;align-items:center;gap:var(--ddga-space-2);margin-block-end:var(--ddga-space-2);display:flex}.ddga-date-picker-calendar__nav{border-radius:var(--ddga-radius-sm);block-size:1.75rem;inline-size:1.75rem;color:var(--ddga-text-secondary);cursor:pointer;background-color:#0000;border:0;outline:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-date-picker-calendar__nav:hover{background-color:var(--ddga-color-muted);color:var(--ddga-color-foreground)}.ddga-date-picker-calendar__nav[data-focus-visible]{box-shadow:0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker-calendar__nav[data-disabled]{color:var(--ddga-text-tertiary);cursor:not-allowed}.ddga-date-picker-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-date-picker-calendar__nav-selects{justify-content:center;align-items:center;gap:var(--ddga-space-1);flex:auto;min-inline-size:0;display:inline-flex}.ddga-date-picker-calendar__select{appearance:none;border-radius:var(--ddga-radius-sm);padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font:inherit;font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-color-foreground);cursor:pointer;font-variant-numeric:tabular-nums;text-align:center;text-align-last:center;background-color:#0000;border:1px solid #0000;outline:none;max-inline-size:100%;margin:0}.ddga-date-picker-calendar__select:hover{background-color:var(--ddga-color-muted)}.ddga-date-picker-calendar__select:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-date-picker-calendar__select option{color:canvastext;background-color:canvas}.ddga-date-picker-calendar__year-select{min-inline-size:4.5ch}.ddga-date-picker-calendar__grid{border-collapse:collapse;inline-size:100%}.ddga-date-picker-calendar__weekday{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);color:var(--ddga-text-tertiary);text-align:center}.ddga-date-picker-calendar__cell{text-align:center;block-size:2rem;inline-size:2rem;font-size:var(--ddga-font-size-sm);font-variant-numeric:tabular-nums;color:var(--ddga-color-foreground);border-radius:var(--ddga-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;flex-direction:column;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.ddga-date-picker-calendar__cell[data-today]:not([data-selected]){box-shadow:inset 0 0 0 1.5px var(--ddga-color-primary);color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-date-picker-calendar__cell-primary{font-size:inherit;line-height:1}.ddga-date-picker-calendar__cell-secondary{color:var(--ddga-text-tertiary);margin-block-start:1px;font-size:.625rem;line-height:1}.ddga-date-picker-calendar__cell[data-selected] .ddga-date-picker-calendar__cell-secondary{color:inherit;opacity:.85}.ddga-date-picker-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]){background-color:var(--ddga-color-muted)}.ddga-date-picker-calendar__cell[data-focus-visible]{box-shadow:inset 0 0 0 2px var(--ddga-color-ring)}.ddga-date-picker-calendar__cell[data-selected]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-date-picker-calendar__cell[data-disabled],.ddga-date-picker-calendar__cell[data-unavailable]{color:var(--ddga-text-tertiary);cursor:not-allowed}.ddga-date-picker-calendar__cell[data-outside-month]{color:var(--ddga-text-tertiary)}@media (prefers-reduced-motion:reduce){.ddga-date-picker-trigger,.ddga-date-picker-toggle__button{transition:none}.ddga-date-picker-popover[data-entering],.ddga-date-picker-popover[data-exiting]{animation:none}}@media (forced-colors:active){.ddga-date-picker-trigger,.ddga-date-picker-popover{border:1px solid canvastext}.ddga-date-picker-trigger[data-focus-within]{outline-offset:1px;outline:2px solid highlight}.ddga-date-picker-calendar__cell[data-selected]{color:highlighttext;background-color:highlight}.ddga-date-picker-calendar__cell[data-focus-visible]{outline-offset:1px;outline:2px solid highlight}.ddga-date-picker-toggle__button[data-active]{color:highlighttext;background-color:highlight}}}
+/*# sourceMappingURL=date-picker.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAME,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAYA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAaA,kQAYA,qGAGA,oFAGA,+HAUA,2DAiBA,qJAYA,4LAQA,qYAiBA,8JAKA,2FAMA,uDAIA,8JAQA,gRAcA,kHAIA,gGAGA,kGAUA,4LAeA,0JASA,+cAoBA,kFAGA,iIAMA,mFAIA,8DAKA,2EAKA,sMAYA,0bAuBA,sMASA,yEAIA,kIAMA,qHAIA,kIAGA,uGAGA,sIAIA,sJAUA,qFAMA,uCACE,2EAIA,iGAQF,8BACE,gFAIA,4FAIA,+FAIA,oGAIA","sources":["src/components/date-picker.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     — see field.css. Only DatePicker-specific styles live here. */\n\n  /* ─── Label + required ─── */\n\n  .ddga-date-picker__label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-date-picker__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Trigger (react-aria Group, hosts segments + icon button) ─── */\n\n  /* Heights match Input/Select so DatePicker triggers line up in a form row.\n     The Group itself is the border/focus container — react-aria emits\n     data-focus-within when any segment or the icon button has focus. */\n  .ddga-date-picker-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    text-align: start;\n    transition:\n      border-color 120ms ease,\n      box-shadow 120ms ease;\n  }\n\n  .ddga-date-picker-trigger--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-date-picker-trigger--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  .ddga-date-picker-trigger[data-focus-within] {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  .ddga-date-picker-trigger[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-date-picker-trigger--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-date-picker-trigger--error[data-focus-within] {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── DateInput + Segments ─── */\n\n  .ddga-date-picker__input {\n    display: inline-flex;\n    align-items: center;\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    /* Force LTR segment direction even in RTL UI so dates always read\n       day-month-year left-to-right (matches react-aria's recommended UX\n       for numeric date entry — keeps mental model stable across locales). */\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-date-picker__segment {\n    padding-block: 1px;\n    padding-inline: 1px;\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-color-foreground);\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .ddga-date-picker__segment[data-placeholder] {\n    color: var(--ddga-text-placeholder);\n  }\n\n  .ddga-date-picker__segment[data-focused] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  /* Non-editable segments (literal separators like \"/\" or \"-\") shouldn't\n     show the focus background even if Tab lands on them — react-aria marks\n     them with 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  /* ─── 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\n     inner Dialog so when the calendar can't fit (short iframes, dual-calendar\n     mode), the content scrolls instead of being clipped. `overflow: hidden`\n     stays on the popover so the rounded corners crop animation bleed. */\n  .ddga-date-picker-popover {\n    z-index: 50;\n    display: flex;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    overflow: hidden;\n  }\n\n  /* react-aria emits data-entering / data-exiting during transitions. */\n  .ddga-date-picker-popover[data-entering] {\n    animation: ddga-date-picker-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-date-picker-popover[data-exiting] {\n    animation: ddga-date-picker-out 80ms ease-in;\n  }\n  @keyframes ddga-date-picker-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-date-picker-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     (otherwise it grows to content). */\n  .ddga-date-picker-dialog {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    max-block-size: 100%;\n    padding: var(--ddga-space-3);\n    outline: none;\n    overflow: auto;\n    box-sizing: border-box;\n  }\n\n  /* ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── */\n\n  .ddga-date-picker-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-date-picker-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-date-picker-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-date-picker-toggle__button:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Calendar grid ─── */\n\n  .ddga-date-picker-calendar {\n    inline-size: min(100%, 280px);\n  }\n\n  .ddga-date-picker-calendar__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-2);\n    margin-block-end: var(--ddga-space-2);\n  }\n\n  .ddga-date-picker-calendar__nav {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\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-calendar__nav:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-date-picker-calendar__nav[data-focus-visible] {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-date-picker-calendar__nav[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n  }\n  /* RTL chevron direction is handled in DatePicker.tsx by swapping the icon\n     components themselves (PrevChevron / NextChevron based on `dgaCtx.dir`)\n     — this is more robust than a CSS scaleX flip because it doesn't rely on\n     the popover portal correctly inheriting the `dir` attribute from the\n     DgaProvider root. */\n\n  .ddga-date-picker-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  /* Replace the static heading with two native <select>s. Native selects\n     give us free keyboard support + native focus rings + screen-reader\n     announcements; styling stays minimal so the platform's wheel/typeahead\n     stays untouched. */\n  .ddga-date-picker-calendar__nav-selects {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    flex: 1 1 auto;\n    min-inline-size: 0;\n  }\n\n  .ddga-date-picker-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    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    margin: 0;\n    font: inherit;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-color-foreground);\n    cursor: pointer;\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    text-align: center;\n    text-align-last: center;\n    max-inline-size: 100%;\n  }\n  .ddga-date-picker-calendar__select:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-date-picker-calendar__select:focus-visible {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n  /* Native option elements pick up the OS theme; can't fully style them, but\n     ensure the popup respects RTL on supporting browsers. */\n  .ddga-date-picker-calendar__select option {\n    color: CanvasText;\n    background-color: Canvas;\n  }\n  .ddga-date-picker-calendar__year-select {\n    /* The year string is short (4 digits) — give it just enough width. */\n    min-inline-size: 4.5ch;\n  }\n\n  .ddga-date-picker-calendar__grid {\n    inline-size: 100%;\n    border-collapse: collapse;\n  }\n\n  .ddga-date-picker-calendar__weekday {\n    padding-block: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\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\n     stay inside the cell footprint. Flex column so a secondary day number\n     (when `showSecondaryCalendar` is on) stacks neatly under the primary. */\n  .ddga-date-picker-calendar__cell {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    padding: 0;\n    text-align: center;\n    font-size: var(--ddga-font-size-sm);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    color: var(--ddga-color-foreground);\n    border-radius: var(--ddga-radius-sm);\n    cursor: pointer;\n    outline: none;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Today ring — visible whenever a cell represents \"today\" in the displayed\n     calendar (react-aria emits data-today). Inset to stay inside the cell;\n     selected wins by re-painting the background. */\n  .ddga-date-picker-calendar__cell[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1.5px var(--ddga-color-primary);\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\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\n     text color. Selected state inherits the contrast color for both. */\n  .ddga-date-picker-calendar__cell-primary {\n    font-size: inherit;\n    line-height: 1;\n  }\n  .ddga-date-picker-calendar__cell-secondary {\n    margin-block-start: 1px;\n    font-size: 0.625rem;\n    line-height: 1;\n    color: var(--ddga-text-tertiary);\n  }\n  .ddga-date-picker-calendar__cell[data-selected] .ddga-date-picker-calendar__cell-secondary {\n    color: inherit;\n    opacity: 0.85;\n  }\n  .ddga-date-picker-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-date-picker-calendar__cell[data-focus-visible] {\n    box-shadow: inset 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-date-picker-calendar__cell[data-selected] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-date-picker-calendar__cell[data-disabled],\n  .ddga-date-picker-calendar__cell[data-unavailable] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n  }\n  /* Outside-month cells are fully clickable in react-aria — selecting one\n     navigates the visible month forward/back. Use a softer text color (no\n     opacity reduction) so they read as low-emphasis-but-active peers, not\n     disabled. Hover/focus rules above continue to apply because we don't\n     scope them to \"inside month only\". */\n  .ddga-date-picker-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-date-picker-trigger,\n    .ddga-date-picker-toggle__button {\n      transition: none;\n    }\n    .ddga-date-picker-popover[data-entering],\n    .ddga-date-picker-popover[data-exiting] {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-date-picker-trigger,\n    .ddga-date-picker-popover {\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-calendar__cell[data-selected] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-date-picker-calendar__cell[data-focus-visible] {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-date-picker-toggle__button[data-active] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/description-list.css

@@ -0,0 +1,2 @@
+@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}}
+/*# sourceMappingURL=description-list.css.map */

package/dist/components/description-list.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAKE,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,8GAIA,kFAOF,4GAOA,iHAGA","sources":["src/components/description-list.css"],"sourcesContent":["@layer ddga-components {\n  /* Semantic <dl>/<dt>/<dd> key–value list. Layout cascades from the root\n     variant to the rows; logical properties keep label/value alignment\n     correct in RTL. */\n\n  .ddga-description-list {\n    /* Term column width in horizontal layout; override per instance. */\n    --ddga-dl-term-width: 12rem;\n\n    margin: 0;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  .ddga-description-list__item {\n    display: flex;\n    gap: var(--ddga-space-2) var(--ddga-space-4);\n    padding-block: var(--ddga-space-2);\n  }\n\n  .ddga-description-list__term {\n    color: var(--ddga-text-secondary);\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1.5;\n  }\n\n  .ddga-description-list__details {\n    margin: 0;\n    color: var(--ddga-text-primary);\n    line-height: 1.5;\n  }\n\n  /* ─── Horizontal: term beside details (review / summary screens) ─── */\n\n  .ddga-description-list--horizontal .ddga-description-list__item {\n    flex-direction: row;\n    align-items: baseline;\n  }\n\n  .ddga-description-list--horizontal .ddga-description-list__term {\n    flex: none;\n    inline-size: var(--ddga-dl-term-width);\n  }\n\n  .ddga-description-list--horizontal .ddga-description-list__details {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n  }\n\n  /* Stack rows on narrow viewports so labels don't crush the values. */\n  @media (max-width: 480px) {\n    .ddga-description-list--horizontal .ddga-description-list__item {\n      flex-direction: column;\n      gap: var(--ddga-space-1);\n    }\n    .ddga-description-list--horizontal .ddga-description-list__term {\n      inline-size: auto;\n    }\n  }\n\n  /* ─── Vertical: term above details ─── */\n\n  .ddga-description-list--vertical .ddga-description-list__item {\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  /* ─── Dividers between rows ─── */\n\n  .ddga-description-list--divided .ddga-description-list__item {\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n  .ddga-description-list--divided .ddga-description-list__item:last-child {\n    border-block-end: 0;\n  }\n}\n"],"names":[]}

package/dist/components/file-upload.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-file-upload{color:var(--ddga-text-primary)}.ddga-file-upload__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-file-upload__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-file-upload__dropzone{justify-content:center;align-items:center;gap:var(--ddga-space-2);padding:var(--ddga-space-6) var(--ddga-space-4);border:1px dashed var(--ddga-color-input);border-radius:var(--ddga-radius-md);background-color:var(--ddga-color-background);text-align:center;cursor:pointer;flex-direction:column;transition:border-color .15s,background-color .15s,box-shadow .15s;display:flex}.ddga-file-upload__dropzone:hover{border-color:var(--ddga-color-ring);background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-file-upload__dropzone[data-dragging]{border-color:var(--ddga-color-primary);background-color:var(--ddga-color-muted);box-shadow:0 0 0 1px var(--ddga-color-primary);border-style:solid}.ddga-file-upload__dropzone--error{border-color:var(--ddga-color-error)}.ddga-file-upload__dropzone--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-file-upload__dropzone[data-disabled]{cursor:not-allowed;opacity:.6;background-color:var(--ddga-color-muted)}.ddga-file-upload__dropzone[data-disabled]:hover{border-color:var(--ddga-color-input);border-style:dashed}.ddga-file-upload__icon{color:var(--ddga-color-muted-foreground);font-size:1.5rem}.ddga-file-upload__hint{font-size:var(--ddga-font-size-sm);color:var(--ddga-text-secondary)}.ddga-file-upload__input{clip:rect(0 0 0 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ddga-file-upload__list{gap:var(--ddga-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ddga-file-upload__item{align-items:center;gap:var(--ddga-space-3);padding:var(--ddga-space-2) var(--ddga-space-3);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);display:flex}.ddga-file-upload__item-icon{color:var(--ddga-color-muted-foreground);flex:none;font-size:1.125rem;display:inline-flex}.ddga-file-upload__item[data-status=success] .ddga-file-upload__item-icon{color:var(--ddga-color-success)}.ddga-file-upload__item[data-status=error] .ddga-file-upload__item-icon{color:var(--ddga-color-error)}.ddga-file-upload__item-main{gap:var(--ddga-space-1);flex-direction:column;flex:auto;min-inline-size:0;display:flex}.ddga-file-upload__item-head{justify-content:space-between;align-items:baseline;gap:var(--ddga-space-3);display:flex}.ddga-file-upload__item-name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--ddga-font-size-sm);color:var(--ddga-text-primary);overflow:hidden}.ddga-file-upload__item-meta{font-size:var(--ddga-font-size-xs);color:var(--ddga-text-secondary);font-variant-numeric:tabular-nums;flex:none}.ddga-file-upload__item-error{font-size:var(--ddga-font-size-xs);color:var(--ddga-color-error)}.ddga-file-upload__item-remove{flex:none}}
+/*# sourceMappingURL=file-upload.css.map */

package/dist/components/file-upload.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAIE,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA","sources":["src/components/file-upload.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only FileUpload-specific styles live here. */\n\n  .ddga-file-upload {\n    color: var(--ddga-text-primary);\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-file-upload__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-file-upload__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Drop zone ─── */\n\n  .ddga-file-upload__dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-6) var(--ddga-space-4);\n    border: 1px dashed var(--ddga-color-input);\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-color-background);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-file-upload__dropzone:hover {\n    border-color: var(--ddga-color-ring);\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* Focus ring driven by the (visually hidden) input inside the zone. */\n  .ddga-file-upload__dropzone:focus-within {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* Active drag-over state. */\n  .ddga-file-upload__dropzone[data-dragging] {\n    border-color: var(--ddga-color-primary);\n    border-style: solid;\n    background-color: var(--ddga-color-muted);\n    box-shadow: 0 0 0 1px var(--ddga-color-primary);\n  }\n\n  .ddga-file-upload__dropzone--error {\n    border-color: var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__dropzone--error:focus-within {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__dropzone[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-file-upload__dropzone[data-disabled]:hover {\n    border-color: var(--ddga-color-input);\n    border-style: dashed;\n  }\n\n  .ddga-file-upload__icon {\n    font-size: 1.5rem;\n    color: var(--ddga-color-muted-foreground);\n  }\n\n  .ddga-file-upload__hint {\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n  }\n\n  /* Visually hidden, but kept focusable so keyboard users can tab to it and\n     press Space/Enter to open the picker. (Not display:none / tabindex=-1.) */\n  .ddga-file-upload__input {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── File list ─── */\n\n  .ddga-file-upload__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .ddga-file-upload__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-3);\n    padding: var(--ddga-space-2) var(--ddga-space-3);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n  }\n\n  .ddga-file-upload__item-icon {\n    display: inline-flex;\n    flex: none;\n    font-size: 1.125rem;\n    color: var(--ddga-color-muted-foreground);\n  }\n\n  .ddga-file-upload__item[data-status='success'] .ddga-file-upload__item-icon {\n    color: var(--ddga-color-success);\n  }\n\n  .ddga-file-upload__item[data-status='error'] .ddga-file-upload__item-icon {\n    color: var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__item-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    flex: 1 1 auto;\n    min-inline-size: 0;\n  }\n\n  .ddga-file-upload__item-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--ddga-space-3);\n  }\n\n  .ddga-file-upload__item-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-file-upload__item-meta {\n    flex: none;\n    font-size: var(--ddga-font-size-xs);\n    color: var(--ddga-text-secondary);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-file-upload__item-error {\n    font-size: var(--ddga-font-size-xs);\n    color: var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__item-remove {\n    flex: none;\n  }\n}\n"],"names":[]}

package/dist/components/number-input.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-number-input__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-number-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-number-input{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);align-items:stretch;transition:border-color .15s,box-shadow .15s;display:flex;overflow:hidden}.ddga-number-input--sm{block-size:32px;font-size:var(--ddga-font-size-sm)}.ddga-number-input--md{block-size:36px;font-size:var(--ddga-font-size-base)}.ddga-number-input--lg{block-size:40px;font-size:var(--ddga-font-size-lg)}.ddga-number-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;text-align:center;direction:ltr;unicode-bidi:plaintext;background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-number-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-number-input__step{background-color:var(--ddga-color-muted);inline-size:2.25rem;color:var(--ddga-text-primary);cursor:pointer;border:0;flex:none;justify-content:center;align-items:center;padding:0;font-size:1rem;transition:background-color .15s,opacity .15s;display:inline-flex}.ddga-number-input__step--decrement{border-inline-end:1px solid var(--ddga-color-input)}.ddga-number-input__step--increment{border-inline-start:1px solid var(--ddga-color-input)}.ddga-number-input__step:hover:not(:disabled){background-color:var(--ddga-color-secondary-hover)}.ddga-number-input__step:disabled{opacity:.45;cursor:not-allowed}.ddga-number-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-number-input--error{border-color:var(--ddga-color-error)}.ddga-number-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-number-input:has(.ddga-number-input__field:disabled){background-color:var(--ddga-color-muted);opacity:.6}@media (prefers-reduced-motion:reduce){.ddga-number-input,.ddga-number-input__step{transition:none}}@media (forced-colors:active){.ddga-number-input{border:1px solid canvastext}.ddga-number-input__step{color:buttontext;background-color:buttonface}.ddga-number-input:focus-within{outline-offset:1px;outline:2px solid highlight}}}
+/*# sourceMappingURL=number-input.css.map */

package/dist/components/number-input.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAQE,uJAOA,uFAOA,4RAgBA,0EAIA,4EAIA,0EAOA,uMAgBA,0EAMA,4RAkBA,wFAGA,0FAIA,iGAIA,iEAOA,gHAOA,+DAGA,yHAOA,+GAOA,uCACE,6DAQF,8BACE,+CAGA,sEAIA","sources":["src/components/number-input.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only NumberInput-specific styles live here. Structure\n     mirrors Input: a bordered control box owns border/focus/size/state; the\n     − button, the field, and the + button sit inside it. */\n\n  /* ─── Label ─── */\n\n  .ddga-number-input__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-number-input__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Control (the bordered box) ─── */\n\n  .ddga-number-input {\n    display: flex;\n    align-items: stretch;\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    overflow: hidden;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Input) ─── */\n\n  .ddga-number-input--sm {\n    block-size: 32px;\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-number-input--md {\n    block-size: 36px;\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-number-input--lg {\n    block-size: 40px;\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Field (the actual <input>) ─── */\n\n  .ddga-number-input__field {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    block-size: 100%;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    text-align: center;\n    outline: none;\n    /* Keep digits Latin + LTR even inside an RTL form (DGA convention). */\n    direction: ltr;\n    unicode-bidi: plaintext;\n  }\n\n  .ddga-number-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── Stepper buttons (− / +) ─── */\n\n  .ddga-number-input__step {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: 2.25rem;\n    padding: 0;\n    border: 0;\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n    font-size: 1rem;\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      opacity 150ms ease;\n  }\n\n  /* Logical dividers between the buttons and the field (RTL-safe). */\n  .ddga-number-input__step--decrement {\n    border-inline-end: 1px solid var(--ddga-color-input);\n  }\n  .ddga-number-input__step--increment {\n    border-inline-start: 1px solid var(--ddga-color-input);\n  }\n\n  .ddga-number-input__step:hover:not(:disabled) {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n\n  .ddga-number-input__step:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-number-input:focus-within {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-number-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-number-input--error:focus-within {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-number-input:has(.ddga-number-input__field:disabled) {\n    background-color: var(--ddga-color-muted);\n    opacity: 0.6;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-number-input,\n    .ddga-number-input__step {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-number-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-number-input__step {\n      background-color: ButtonFace;\n      color: ButtonText;\n    }\n    .ddga-number-input:focus-within {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/rating.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-rating__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4;display:block}.ddga-rating{--ddga-rating-color:var(--ddga-gold-500);--ddga-rating-empty:var(--ddga-color-border);align-items:center;gap:var(--ddga-space-1);color:var(--ddga-rating-empty);inline-size:fit-content;display:inline-flex}.ddga-rating--sm{font-size:1rem}.ddga-rating--md{font-size:1.5rem}.ddga-rating--lg{font-size:2rem}.ddga-rating[role=slider]:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px;border-radius:var(--ddga-radius-sm)}.ddga-rating[data-disabled]{opacity:.5}.ddga-rating--error{--ddga-rating-empty:var(--ddga-color-error)}.ddga-rating[role=slider]:not([data-disabled]){cursor:pointer}.ddga-rating__star{line-height:0;display:inline-flex;position:relative}.ddga-rating__star-bg{color:var(--ddga-rating-empty);display:block}.ddga-rating__star-fill{inline-size:0;color:var(--ddga-rating-color);line-height:0;position:absolute;inset-block:0;inset-inline-start:0;overflow:hidden}.ddga-rating__star[data-fill=half] .ddga-rating__star-fill{inline-size:50%}.ddga-rating__star[data-fill=full] .ddga-rating__star-fill{inline-size:100%}.ddga-rating__star-fg{display:block}@media (forced-colors:active){.ddga-rating__star-bg{color:canvastext}.ddga-rating__star-fill{color:highlight}.ddga-rating[role=slider]:focus-visible{outline:2px solid highlight}}}
+/*# sourceMappingURL=rating.css.map */

package/dist/components/rating.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAQE,+JAUA,yNAYA,gCAGA,kCAGA,gCAKA,wIAMA,uCAKA,gEAIA,8DAMA,uEAMA,mEAOA,wJAUA,2EAGA,4EAIA,oCAMA,8BACE,uCAGA,wCAGA","sources":["src/components/rating.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Rating-specific styles live here. Each star stacks\n     an empty base star and a clipped filled overlay; the overlay width drives\n     full / half / empty. Logical inset keeps the half-fill correct in RTL. */\n\n  /* ─── Label ─── */\n\n  .ddga-rating__label {\n    display: block;\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  /* ─── Root ─── */\n\n  .ddga-rating {\n    /* Consumers can recolor the filled stars by overriding this var. */\n    --ddga-rating-color: var(--ddga-gold-500);\n    --ddga-rating-empty: var(--ddga-color-border);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    color: var(--ddga-rating-empty);\n    inline-size: fit-content;\n  }\n\n  .ddga-rating--sm {\n    font-size: 1rem;\n  }\n  .ddga-rating--md {\n    font-size: 1.5rem;\n  }\n  .ddga-rating--lg {\n    font-size: 2rem;\n  }\n\n  /* Focus ring on the slider root. */\n  .ddga-rating[role='slider']:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  .ddga-rating[data-disabled] {\n    opacity: 0.5;\n  }\n\n  /* Error: tint the empty stars so an unrated required field reads as invalid. */\n  .ddga-rating--error {\n    --ddga-rating-empty: var(--ddga-color-error);\n  }\n\n  .ddga-rating[role='slider']:not([data-disabled]) {\n    cursor: pointer;\n  }\n\n  /* ─── Star (base = empty, overlay = filled) ─── */\n\n  .ddga-rating__star {\n    position: relative;\n    display: inline-flex;\n    line-height: 0;\n  }\n\n  .ddga-rating__star-bg {\n    display: block;\n    color: var(--ddga-rating-empty);\n  }\n\n  /* Clipped overlay pinned to the logical start so it reveals the leading\n     portion of the star (flips automatically in RTL via inset-inline-start). */\n  .ddga-rating__star-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: 0;\n    overflow: hidden;\n    line-height: 0;\n    color: var(--ddga-rating-color);\n  }\n\n  .ddga-rating__star[data-fill='half'] .ddga-rating__star-fill {\n    inline-size: 50%;\n  }\n  .ddga-rating__star[data-fill='full'] .ddga-rating__star-fill {\n    inline-size: 100%;\n  }\n\n  .ddga-rating__star-fg {\n    display: block;\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-rating__star-bg {\n      color: CanvasText;\n    }\n    .ddga-rating__star-fill {\n      color: Highlight;\n    }\n    .ddga-rating[role='slider']:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/slider.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-slider__header{justify-content:space-between;align-items:baseline;gap:var(--ddga-space-3);display:flex}.ddga-slider__label{color:var(--ddga-text-primary);font-weight:var(--ddga-font-weight-medium);font-size:var(--ddga-font-size-sm);line-height:1.4}.ddga-slider__value{color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-sm);font-variant-numeric:tabular-nums}.ddga-slider{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;inline-size:100%;display:flex;position:relative}.ddga-slider--md{--ddga-slider-rail:6px;--ddga-slider-thumb:18px;block-size:var(--ddga-slider-thumb)}.ddga-slider--sm{--ddga-slider-rail:4px;--ddga-slider-thumb:14px;block-size:var(--ddga-slider-thumb)}.ddga-slider__track{block-size:var(--ddga-slider-rail);background-color:var(--ddga-color-input);border-radius:999px;flex-grow:1;position:relative}.ddga-slider__range{background-color:var(--ddga-color-primary);border-radius:999px;block-size:100%;position:absolute}.ddga-slider__thumb{inline-size:var(--ddga-slider-thumb);block-size:var(--ddga-slider-thumb);border:2px solid var(--ddga-color-primary);background-color:var(--ddga-color-background);cursor:grab;border-radius:999px;transition:border-color .15s,box-shadow .15s;display:block;box-shadow:0 1px 2px #00000026}.ddga-slider__thumb:active{cursor:grabbing}.ddga-slider__thumb:focus-visible{box-shadow:0 0 0 3px var(--ddga-color-ring);outline:none}.ddga-slider--error .ddga-slider__thumb{border-color:var(--ddga-color-error)}.ddga-slider--error .ddga-slider__range{background-color:var(--ddga-color-error)}.ddga-slider--error .ddga-slider__thumb:focus-visible{box-shadow:0 0 0 3px var(--ddga-color-error)}.ddga-slider[data-disabled]{opacity:.5}.ddga-slider[data-disabled] .ddga-slider__thumb{cursor:not-allowed}[data-theme=dark] .ddga-slider__thumb{background-color:#f3f4f6;box-shadow:0 1px 2px #0006}@media (prefers-reduced-motion:reduce){.ddga-slider__thumb{transition:none}}@media (forced-colors:active){.ddga-slider__track{background-color:canvas;border:1px solid canvastext}.ddga-slider__range{background-color:highlight}.ddga-slider__thumb{background-color:buttonface;border-color:canvastext}.ddga-slider__thumb:focus-visible{outline-offset:1px;outline:2px solid highlight}}}
+/*# sourceMappingURL=slider.css.map */

package/dist/components/slider.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAQE,6GAOA,iJAOA,0HAQA,4IAWA,qGAKA,qGAQA,kJAQA,qHASA,gTAcA,2CAIA,2FAOA,6EAGA,iFAGA,mGAMA,uCAGA,mEAMA,0FAOA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,wEAIA","sources":["src/components/slider.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Slider-specific styles live here. Radix Slider\n     handles RTL positioning natively via the inherited `dir` (DgaProvider\n     wraps Direction.Provider), so no manual flipping is needed here. */\n\n  /* ─── Header (label + value readout) ─── */\n\n  .ddga-slider__header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--ddga-space-3);\n  }\n\n  .ddga-slider__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-slider__value {\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-sm);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Root ─── */\n\n  .ddga-slider {\n    position: relative;\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    touch-action: none;\n    user-select: none;\n  }\n\n  /* Per-size rail thickness + thumb diameter, encoded as custom properties so\n     the track/thumb rules below stay size-agnostic. */\n  .ddga-slider--md {\n    --ddga-slider-rail: 6px;\n    --ddga-slider-thumb: 18px;\n    block-size: var(--ddga-slider-thumb);\n  }\n  .ddga-slider--sm {\n    --ddga-slider-rail: 4px;\n    --ddga-slider-thumb: 14px;\n    block-size: var(--ddga-slider-thumb);\n  }\n\n  /* ─── Track + filled range ─── */\n\n  .ddga-slider__track {\n    position: relative;\n    flex-grow: 1;\n    block-size: var(--ddga-slider-rail);\n    border-radius: 999px;\n    background-color: var(--ddga-color-input);\n  }\n\n  .ddga-slider__range {\n    position: absolute;\n    block-size: 100%;\n    border-radius: 999px;\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Thumb ─── */\n\n  .ddga-slider__thumb {\n    display: block;\n    inline-size: var(--ddga-slider-thumb);\n    block-size: var(--ddga-slider-thumb);\n    border: 2px solid var(--ddga-color-primary);\n    border-radius: 999px;\n    background-color: var(--ddga-color-background);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    cursor: grab;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-slider__thumb:active {\n    cursor: grabbing;\n  }\n\n  .ddga-slider__thumb:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-slider--error .ddga-slider__thumb {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-slider--error .ddga-slider__range {\n    background-color: var(--ddga-color-error);\n  }\n  .ddga-slider--error .ddga-slider__thumb:focus-visible {\n    box-shadow: 0 0 0 3px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled (Radix sets data-disabled on the Root) ─── */\n\n  .ddga-slider[data-disabled] {\n    opacity: 0.5;\n  }\n  .ddga-slider[data-disabled] .ddga-slider__thumb {\n    cursor: not-allowed;\n  }\n\n  /* ─── Dark mode: keep the thumb a raised light surface ─── */\n\n  [data-theme='dark'] .ddga-slider__thumb {\n    background-color: #f3f4f6;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-slider__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-slider__track {\n      background-color: Canvas;\n      border: 1px solid CanvasText;\n    }\n    .ddga-slider__range {\n      background-color: Highlight;\n    }\n    .ddga-slider__thumb {\n      background-color: ButtonFace;\n      border-color: CanvasText;\n    }\n    .ddga-slider__thumb:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/toggle.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-toggle,.ddga-toggle-group__item{justify-content:center;align-items:center;gap:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);color:var(--ddga-text-primary);font:inherit;font-weight:var(--ddga-font-weight-medium);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;line-height:1;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.ddga-toggle--sm,.ddga-toggle-group--sm .ddga-toggle-group__item{block-size:32px;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm)}.ddga-toggle--md,.ddga-toggle-group--md .ddga-toggle-group__item{block-size:36px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-base)}.ddga-toggle--lg,.ddga-toggle-group--lg .ddga-toggle-group__item{block-size:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-toggle:hover:not(:disabled),.ddga-toggle-group__item:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-toggle[data-state=on],.ddga-toggle-group__item[data-state=on]{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-toggle[data-state=on]:hover:not(:disabled),.ddga-toggle-group__item[data-state=on]:hover:not(:disabled){background-color:var(--ddga-color-primary-hover)}.ddga-toggle--outline,.ddga-toggle-group--outline .ddga-toggle-group__item{border-color:var(--ddga-color-input)}.ddga-toggle:focus-visible,.ddga-toggle-group__item:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:1px}.ddga-toggle:disabled,.ddga-toggle-group__item:disabled{opacity:.5;cursor:not-allowed}.ddga-toggle-group{align-items:center;display:inline-flex}.ddga-toggle-group--default{gap:var(--ddga-space-1)}.ddga-toggle-group--outline .ddga-toggle-group__item{border-radius:0;margin-inline-start:-1px}.ddga-toggle-group--outline .ddga-toggle-group__item:first-child{border-start-start-radius:var(--ddga-radius-sm);border-end-start-radius:var(--ddga-radius-sm);margin-inline-start:0}.ddga-toggle-group--outline .ddga-toggle-group__item:last-child{border-start-end-radius:var(--ddga-radius-sm);border-end-end-radius:var(--ddga-radius-sm)}.ddga-toggle-group--outline .ddga-toggle-group__item:focus-visible,.ddga-toggle-group--outline .ddga-toggle-group__item[data-state=on]{z-index:1;position:relative}@media (prefers-reduced-motion:reduce){.ddga-toggle,.ddga-toggle-group__item{transition:none}}@media (forced-colors:active){.ddga-toggle[data-state=on],.ddga-toggle-group__item[data-state=on]{color:highlighttext;background-color:highlight}.ddga-toggle:focus-visible,.ddga-toggle-group__item:focus-visible{outline:2px solid highlight}}}
+/*# sourceMappingURL=toggle.css.map */

package/dist/components/toggle.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAKE,0aAuBA,uJAMA,yJAMA,uJASA,yHAOA,0JAKA,+JAOA,gHAOA,8HAQA,sFAQA,0DAMA,oDAMA,8FAIA,qLAKA,0JAMA,mKAQA,uCACE,uDAQF,8BACE,mHAKA","sources":["src/components/toggle.css"],"sourcesContent":["@layer ddga-components {\n  /* Standalone Toggle and ToggleGroup items share one visual language. The\n     base look is applied to both; group items additionally join into a\n     segmented control. Pressed state comes from Radix's [data-state='on']. */\n\n  .ddga-toggle,\n  .ddga-toggle-group__item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-primary);\n    font: inherit;\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Button) ─── */\n\n  .ddga-toggle--sm,\n  .ddga-toggle-group--sm .ddga-toggle-group__item {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-toggle--md,\n  .ddga-toggle-group--md .ddga-toggle-group__item {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-toggle--lg,\n  .ddga-toggle-group--lg .ddga-toggle-group__item {\n    block-size: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Hover ─── */\n\n  .ddga-toggle:hover:not(:disabled),\n  .ddga-toggle-group__item:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Pressed (on) ─── */\n\n  .ddga-toggle[data-state='on'],\n  .ddga-toggle-group__item[data-state='on'] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-toggle[data-state='on']:hover:not(:disabled),\n  .ddga-toggle-group__item[data-state='on']:hover:not(:disabled) {\n    background-color: var(--ddga-color-primary-hover);\n  }\n\n  /* ─── Outline variant ─── */\n\n  .ddga-toggle--outline,\n  .ddga-toggle-group--outline .ddga-toggle-group__item {\n    border-color: var(--ddga-color-input);\n  }\n\n  /* ─── Focus ─── */\n\n  .ddga-toggle:focus-visible,\n  .ddga-toggle-group__item:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 1px;\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-toggle:disabled,\n  .ddga-toggle-group__item:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* ─── Group: segmented control layout ─── */\n\n  .ddga-toggle-group {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /* Default variant: small gap between independent buttons. */\n  .ddga-toggle-group--default {\n    gap: var(--ddga-space-1);\n  }\n\n  /* Outline variant: items join into one segmented bar (shared borders,\n     rounded outer corners only). Logical radii flip correctly in RTL. */\n  .ddga-toggle-group--outline .ddga-toggle-group__item {\n    border-radius: 0;\n    margin-inline-start: -1px;\n  }\n  .ddga-toggle-group--outline .ddga-toggle-group__item:first-child {\n    margin-inline-start: 0;\n    border-start-start-radius: var(--ddga-radius-sm);\n    border-end-start-radius: var(--ddga-radius-sm);\n  }\n  .ddga-toggle-group--outline .ddga-toggle-group__item:last-child {\n    border-start-end-radius: var(--ddga-radius-sm);\n    border-end-end-radius: var(--ddga-radius-sm);\n  }\n  /* Raise the focused/pressed item so its full border is visible over the\n     overlapping neighbor. */\n  .ddga-toggle-group--outline .ddga-toggle-group__item:focus-visible,\n  .ddga-toggle-group--outline .ddga-toggle-group__item[data-state='on'] {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-toggle,\n    .ddga-toggle-group__item {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-toggle[data-state='on'],\n    .ddga-toggle-group__item[data-state='on'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-toggle:focus-visible,\n    .ddga-toggle-group__item:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n"],"names":[]}