@dev-dga/css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dhaifallah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/button.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-button{justify-content:center;align-items:center;gap:var(--ddga-space-1);border-radius:var(--ddga-radius-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;border:1px solid #0000;font-family:inherit;line-height:1.6;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,opacity .15s;display:inline-flex}.ddga-button--primary{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-button--primary:hover:not(:disabled){background-color:var(--ddga-color-primary-hover)}.ddga-button--secondary{background-color:var(--ddga-color-secondary);color:var(--ddga-color-secondary-foreground)}.ddga-button--secondary:hover:not(:disabled){background-color:var(--ddga-color-secondary-hover)}.ddga-button--outline{color:var(--ddga-color-foreground);border-color:var(--ddga-color-border);background-color:#0000}.ddga-button--outline:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--ghost{color:var(--ddga-color-foreground);background-color:#0000}.ddga-button--ghost:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--destructive{background-color:var(--ddga-color-destructive);color:var(--ddga-color-destructive-foreground)}.ddga-button--destructive:hover:not(:disabled){background-color:var(--ddga-color-destructive-hover)}.ddga-button--sm{height:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-button--md{height:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-button--lg{height:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-button--icon{width:40px;height:40px;font-size:var(--ddga-font-size-base);padding:0}.ddga-button--icon-sm{width:28px;height:28px;font-size:var(--ddga-font-size-sm);padding:0}.ddga-button--full-width{flex:1 0 100%;inline-size:100%}.ddga-button--loading{cursor:wait;position:relative}.ddga-button__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ddga-button__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-button svg{flex-shrink:0;align-self:center}.ddga-spinner{flex-shrink:0;animation:.6s linear infinite ddga-spin}@keyframes ddga-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.ddga-spinner{animation-duration:1.5s}.ddga-button{transition:none}}.ddga-button:disabled{opacity:.5;cursor:not-allowed}.ddga-button:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}[dir=rtl] .ddga-icon-flip{transform:scaleX(-1)}@media (forced-colors:active){.ddga-button{border:1px solid buttontext}.ddga-button:focus-visible{outline:2px solid highlight}.ddga-button:disabled{color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=button.css.map */

package/dist/components/button.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAGE,4VAqBA,4GAIA,4FAMA,kHAIA,gGAMA,sHAKA,oFAMA,8EAIA,kFAMA,wHAIA,oGAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAOA,oDAOA,6EAOA,+FAUA,iDAOA,oEAKA,yEASA,uCACE,sCAGA,8BAOF,oDAKA,wHAQA,+CAMA,8BACE,yCAGA,uDAGA","sources":["src/components/button.css"],"sourcesContent":["@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    font-family: inherit;\n    line-height: 1.6;\n    cursor: pointer;\n    text-decoration: none;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease,\n      opacity 150ms ease;\n  }\n\n  /* ─── Variant: Primary ─── */\n\n  .ddga-button--primary {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-button--primary:hover:not(:disabled) {\n    background-color: var(--ddga-color-primary-hover);\n  }\n\n  /* ─── Variant: Secondary ─── */\n\n  .ddga-button--secondary {\n    background-color: var(--ddga-color-secondary);\n    color: var(--ddga-color-secondary-foreground);\n  }\n  .ddga-button--secondary:hover:not(:disabled) {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n\n  /* ─── Variant: Outline ─── */\n\n  .ddga-button--outline {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n    border-color: var(--ddga-color-border);\n  }\n  .ddga-button--outline:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Variant: Ghost ─── */\n\n  .ddga-button--ghost {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-button--ghost:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Variant: Destructive ─── */\n\n  .ddga-button--destructive {\n    background-color: var(--ddga-color-destructive);\n    color: var(--ddga-color-destructive-foreground);\n  }\n  .ddga-button--destructive:hover:not(:disabled) {\n    background-color: var(--ddga-color-destructive-hover);\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-button--sm {\n    height: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-button--md {\n    height: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-button--lg {\n    height: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n  .ddga-button--icon {\n    height: 40px;\n    width: 40px;\n    padding: 0;\n    font-size: var(--ddga-font-size-base);\n  }\n  /* Compact square icon button — fits inside form fields as an adornment\n     (sm/md field interiors) without overflowing the field border. */\n  .ddga-button--icon-sm {\n    height: 28px;\n    width: 28px;\n    padding: 0;\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Full Width ─── */\n\n  .ddga-button--full-width {\n    inline-size: 100%;\n    flex: 1 0 100%;\n  }\n\n  /* ─── Loading ─── */\n\n  .ddga-button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  /* ─── Child elements ─── */\n\n  .ddga-button__text {\n    /* Truncate long text */\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .ddga-button__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Block-level SVGs (see reset) must not be flex-stretched on the cross\n     axis — that distorts a square icon into a tall one. Pin them square\n     to their intrinsic size and keep them centered. */\n  .ddga-button svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* ─── Spinner ─── */\n\n  .ddga-spinner {\n    animation: ddga-spin 600ms linear infinite;\n    flex-shrink: 0;\n  }\n\n  @keyframes ddga-spin {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-spinner {\n      animation-duration: 1.5s;\n    }\n    .ddga-button {\n      transition: none;\n    }\n  }\n\n  /* ─── States ─── */\n\n  .ddga-button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .ddga-button:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── RTL directional icon flip ─── */\n\n  [dir='rtl'] .ddga-icon-flip {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-button {\n      border: 1px solid ButtonText;\n    }\n    .ddga-button:focus-visible {\n      outline: 2px solid Highlight;\n    }\n    .ddga-button:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/checkbox.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-checkbox-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-checkbox{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-color-primary-foreground);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.ddga-checkbox--md{block-size:18px;inline-size:18px;font-size:14px}.ddga-checkbox--sm{block-size:16px;inline-size:16px;font-size:12px}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:var(--ddga-color-primary);border-color:var(--ddga-color-primary)}.ddga-checkbox:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-checkbox--error{border-color:var(--ddga-color-error)}.ddga-checkbox--error[data-state=checked],.ddga-checkbox--error[data-state=indeterminate]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-checkbox--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-checkbox:disabled{opacity:.5;cursor:not-allowed}.ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-checkbox__indicator{justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:inline-flex}.ddga-checkbox__check,.ddga-checkbox__minus{block-size:1em;inline-size:1em}.ddga-checkbox[data-state=checked] .ddga-checkbox__minus,.ddga-checkbox[data-state=indeterminate] .ddga-checkbox__check{display:none}.ddga-checkbox__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}.ddga-checkbox__required{color:var(--ddga-color-error);margin-inline-start:.125rem}@media (prefers-reduced-motion:reduce){.ddga-checkbox{transition:none}}@media (forced-colors:active){.ddga-checkbox{border:1px solid canvastext}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:canvastext}.ddga-checkbox__indicator{color:canvas}.ddga-checkbox:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-checkbox:disabled{color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=checkbox.css.map */

package/dist/components/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAME,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA","sources":["src/components/checkbox.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     — see field.css. Only Checkbox-specific styles live here. */\n\n  /* ─── Row (box + label, inline) ─── */\n\n  .ddga-checkbox-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Box (Radix Root — reset the button, then style) ─── */\n\n  .ddga-checkbox {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    padding: 0;\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-color-primary-foreground);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-checkbox--md {\n    block-size: 18px;\n    inline-size: 18px;\n    font-size: 14px;\n  }\n  .ddga-checkbox--sm {\n    block-size: 16px;\n    inline-size: 16px;\n    font-size: 12px;\n  }\n\n  /* ─── Checked / indeterminate fill ─── */\n\n  .ddga-checkbox[data-state='checked'],\n  .ddga-checkbox[data-state='indeterminate'] {\n    background-color: var(--ddga-color-primary);\n    border-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring — small hit target) ─── */\n\n  .ddga-checkbox:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-checkbox--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error[data-state='checked'],\n  .ddga-checkbox--error[data-state='indeterminate'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-checkbox:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Indicator + icons (one shows per Root data-state) ─── */\n\n  .ddga-checkbox__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-checkbox__check,\n  .ddga-checkbox__minus {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n  .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n    display: none;\n  }\n  .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-checkbox__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n  .ddga-checkbox__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-checkbox {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-checkbox {\n      border: 1px solid CanvasText;\n    }\n    .ddga-checkbox[data-state='checked'],\n    .ddga-checkbox[data-state='indeterminate'] {\n      background-color: CanvasText;\n    }\n    .ddga-checkbox__indicator {\n      color: Canvas;\n    }\n    .ddga-checkbox:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-checkbox:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/field.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-field{gap:var(--ddga-space-1);flex-direction:column;display:flex}.ddga-field__message{font-size:var(--ddga-font-size-sm);margin:0;line-height:1.4}.ddga-field__message--helper{color:var(--ddga-text-secondary)}.ddga-field__message--error{color:var(--ddga-color-error)}}
+/*# sourceMappingURL=field.css.map */

package/dist/components/field.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAKE,uEAMA,iFAMA,8DAIA","sources":["src/components/field.css"],"sourcesContent":["@layer ddga-components {\n  /* Shared field primitives — wrapper + helper/error message. Used by\n     Input / Textarea / Checkbox. Component-specific bits (the label and\n     the control itself) stay in each component's CSS. */\n\n  .ddga-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-field__message {\n    margin: 0;\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-field__message--helper {\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-field__message--error {\n    color: var(--ddga-color-error);\n  }\n}\n"],"names":[]}

package/dist/components/input.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-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-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-input{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);transition:border-color .15s,box-shadow .15s;display:flex}.ddga-input--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-input--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-input--lg{block-size:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-input__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-input__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-input__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-input__adornment{max-block-size:100%;color:var(--ddga-text-tertiary);flex-shrink:0;align-self:center;align-items:center;display:inline-flex}.ddga-input__adornment svg{flex-shrink:0;align-self:center}.ddga-input:has(.ddga-input__adornment--start){padding-inline-start:var(--ddga-space-2)}.ddga-input:has(.ddga-input__adornment--end){padding-inline-end:var(--ddga-space-2)}.ddga-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-input--error{border-color:var(--ddga-color-error)}.ddga-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-input:has(.ddga-input__field:disabled){opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-input:has(.ddga-input__field:disabled) .ddga-input__field{cursor:not-allowed}.ddga-input:has(.ddga-input__field:read-only:not(:disabled)){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-input{transition:none}}@media (forced-colors:active){.ddga-input{border:1px solid canvastext}.ddga-input:focus-within{outline:2px solid highlight}.ddga-input:has(.ddga-input__field:disabled){color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=input.css.map */

package/dist/components/input.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAME,gJAOA,gFAOA,4RAgBA,sGAKA,wGAKA,sGAQA,yIAYA,mEAQA,0PAAA,gQAAA,gQAWA,kJAYA,2DAOA,wFAGA,oFAMA,yGAOA,wDAGA,kHAOA,oHAKA,mFAIA,sGAMA,uCACE,6BAOF,8BACE,wCAGA,qDAGA","sources":["src/components/input.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     — see field.css. Only Input-specific styles live here. */\n\n  /* ─── Label ─── */\n\n  .ddga-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-input__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Control (the bordered box; owns border/focus/size/state) ─── */\n\n  .ddga-input {\n    display: 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-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Button) ─── */\n\n  .ddga-input--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-input--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-input--lg {\n    block-size: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Field (the actual <input> — transparent, borderless fill) ─── */\n\n  .ddga-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    outline: none;\n  }\n\n  .ddga-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* Autofill: browsers paint their own background/text on autofilled\n     fields, overriding the theme (most jarring in dark mode, and government\n     forms autofill heavily). Repaint with tokens via the inset-shadow\n     technique — `background-color` alone is ignored for autofill. */\n  .ddga-input__field:-webkit-autofill,\n  .ddga-input__field:-webkit-autofill:hover,\n  .ddga-input__field:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-text-primary);\n  }\n\n  /* ─── Adornments (leading/trailing icon or text) ─── */\n\n  .ddga-input__adornment {\n    display: inline-flex;\n    align-items: center;\n    align-self: center;\n    flex-shrink: 0;\n    /* Never taller than the field interior, so an interactive control\n       (clear / password toggle) can't paint over the field border. */\n    max-block-size: 100%;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n  .ddga-input__adornment svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* An adornment hugs the field edge: collapse the padding on its side so\n     an in-field button's hit area aligns with the field, not floating. */\n  .ddga-input:has(.ddga-input__adornment--start) {\n    padding-inline-start: var(--ddga-space-2);\n  }\n  .ddga-input:has(.ddga-input__adornment--end) {\n    padding-inline-end: var(--ddga-space-2);\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-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-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-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  /* ─── States (driven by the inner field via :has()) ─── */\n\n  .ddga-input:has(.ddga-input__field:disabled) {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-input:has(.ddga-input__field:disabled) .ddga-input__field {\n    cursor: not-allowed;\n  }\n\n  .ddga-input:has(.ddga-input__field:read-only:not(:disabled)) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-input {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-input:focus-within {\n      outline: 2px solid Highlight;\n    }\n    .ddga-input:has(.ddga-input__field:disabled) {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/textarea.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-textarea__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-textarea__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-textarea{min-block-size:4.5rem;inline-size:100%;padding-block:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-text-primary);font-family:inherit;line-height:1.6;transition:border-color .15s,box-shadow .15s;display:block}.ddga-textarea::placeholder{color:var(--ddga-text-placeholder)}.ddga-textarea:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea--sm{padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-textarea--md{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-textarea--lg{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-textarea--resize-vertical{resize:vertical}.ddga-textarea--resize-none{resize:none}.ddga-textarea:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-textarea--error{border-color:var(--ddga-color-error)}.ddga-textarea--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none;background-color:var(--ddga-color-muted)}.ddga-textarea:read-only:not(:disabled){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-textarea{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-visible{outline:2px solid highlight}.ddga-textarea:disabled{color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=textarea.css.map */

package/dist/components/textarea.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBAME,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA","sources":["src/components/textarea.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     — see field.css. Only Textarea-specific styles live here. */\n\n  /* ─── Label ─── */\n\n  .ddga-textarea__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-textarea__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Textarea (owns border/focus/state — no adornments) ─── */\n\n  .ddga-textarea {\n    display: block;\n    inline-size: 100%;\n    min-block-size: 4.5rem;\n    padding-block: var(--ddga-space-2);\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    font-family: inherit;\n    line-height: 1.6;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-textarea::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* Autofill (e.g. address fields): repaint with tokens — see input.css. */\n  .ddga-textarea:-webkit-autofill,\n  .ddga-textarea:-webkit-autofill:hover,\n  .ddga-textarea:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-text-primary);\n  }\n\n  /* ─── Sizes (font + inline padding; height is driven by `rows`) ─── */\n\n  .ddga-textarea--sm {\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-textarea--md {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-textarea--lg {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Resize (vertical only or locked; horizontal breaks layout) ─── */\n\n  .ddga-textarea--resize-vertical {\n    resize: vertical;\n  }\n  .ddga-textarea--resize-none {\n    resize: none;\n  }\n\n  /* ─── Focus ─── */\n\n  .ddga-textarea:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-textarea--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-textarea--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── States ─── */\n\n  .ddga-textarea:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    resize: none;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-textarea:read-only:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-textarea {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-textarea {\n      border: 1px solid CanvasText;\n    }\n    .ddga-textarea:focus-visible {\n      outline: 2px solid Highlight;\n    }\n    .ddga-textarea:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}

package/dist/dark.css

@@ -0,0 +1,2 @@
+[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ddga-color-background:#111927;--ddga-color-foreground:#f3f4f6;--ddga-color-muted:#1f2a37;--ddga-color-muted-foreground:#9da4ae;--ddga-color-border:#384250;--ddga-color-card:#1f2a37;--ddga-color-card-foreground:#f3f4f6;--ddga-color-input:#384250;--ddga-color-primary:#54c08a;--ddga-color-primary-hover:#88d8ad;--ddga-color-primary-active:#25935f;--ddga-color-primary-foreground:#0d121c;--ddga-color-secondary:#1f2a37;--ddga-color-secondary-hover:#384250;--ddga-color-secondary-foreground:#f3f4f6;--ddga-color-destructive:#f97066;--ddga-color-destructive-hover:#f04438;--ddga-color-destructive-foreground:#0d121c;--ddga-color-error:#f97066;--ddga-color-error-hover:#f04438;--ddga-color-error-foreground:#0d121c;--ddga-color-success:#47cd89;--ddga-color-success-hover:#17b26a;--ddga-color-success-foreground:#0d121c;--ddga-color-warning:#fdb022;--ddga-color-warning-hover:#f79009;--ddga-color-warning-foreground:#0d121c;--ddga-color-info:#53b1fd;--ddga-color-info-hover:#2e90fa;--ddga-color-info-foreground:#0d121c;--ddga-color-ring:#54c08a;--ddga-text-primary:#fff;--ddga-text-secondary:#ffffffb3;--ddga-text-tertiary:#fff9;--ddga-text-placeholder:#6c737f;--ddga-shadow-sm:0 1px 2px 0 #0000004d;--ddga-shadow-md:0 4px 6px -1px #0006;--ddga-shadow-lg:0 10px 15px -3px #0006}
+/*# sourceMappingURL=dark.css.map */

package/dist/dark.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AACA","sources":["src/dark.css"],"sourcesContent":["/* Dark mode — DGA-aligned using neutral gray scale. */\n[data-theme='dark'] {\n  color-scheme: dark;\n\n  /* ─── Surface / Layout (Gray 900-based) ─── */\n  --ddga-color-background: #111927;\n  --ddga-color-foreground: #f3f4f6;\n  --ddga-color-muted: #1f2a37;\n  --ddga-color-muted-foreground: #9da4ae;\n  --ddga-color-border: #384250;\n  --ddga-color-card: #1f2a37;\n  --ddga-color-card-foreground: #f3f4f6;\n  --ddga-color-input: #384250;\n\n  /* ─── Primary (SA Green — slightly lighter for dark bg) ─── */\n  --ddga-color-primary: #54c08a;\n  --ddga-color-primary-hover: #88d8ad;\n  --ddga-color-primary-active: #25935f;\n  --ddga-color-primary-foreground: #0d121c;\n\n  /* ─── Secondary ─── */\n  --ddga-color-secondary: #1f2a37;\n  --ddga-color-secondary-hover: #384250;\n  --ddga-color-secondary-foreground: #f3f4f6;\n\n  /* ─── Destructive ─── */\n  --ddga-color-destructive: #f97066;\n  --ddga-color-destructive-hover: #f04438;\n  --ddga-color-destructive-foreground: #0d121c;\n\n  /* ─── Semantic — lighter shades for dark bg legibility ─── */\n  --ddga-color-error: #f97066;\n  --ddga-color-error-hover: #f04438;\n  --ddga-color-error-foreground: #0d121c;\n  --ddga-color-success: #47cd89;\n  --ddga-color-success-hover: #17b26a;\n  --ddga-color-success-foreground: #0d121c;\n  --ddga-color-warning: #fdb022;\n  --ddga-color-warning-hover: #f79009;\n  --ddga-color-warning-foreground: #0d121c;\n  --ddga-color-info: #53b1fd;\n  --ddga-color-info-hover: #2e90fa;\n  --ddga-color-info-foreground: #0d121c;\n\n  /* ─── Focus ring ─── */\n  --ddga-color-ring: #54c08a;\n\n  /* ─── Text ─── */\n  --ddga-text-primary: #ffffff;\n  --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n  --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n  --ddga-text-placeholder: #6c737f;\n\n  /* ─── Shadows — stronger for dark backgrounds ─── */\n  --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n  --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n"],"names":[]}

package/dist/index.css

@@ -0,0 +1,2 @@
+@layer ddga-base{:root{--ddga-color-primary:#25935f;--ddga-color-primary-hover:#1b8354;--ddga-color-primary-active:#166a45;--ddga-color-primary-foreground:#fff;--ddga-color-secondary:#f3f4f6;--ddga-color-secondary-hover:#e5e7eb;--ddga-color-secondary-foreground:#0d121c;--ddga-color-background:#fff;--ddga-color-foreground:#0d121c;--ddga-color-muted:#f3f4f6;--ddga-color-muted-foreground:#6c737f;--ddga-color-border:#e5e7eb;--ddga-color-input:#d2d6db;--ddga-color-card:#fff;--ddga-color-card-foreground:#0d121c;--ddga-color-destructive:#d92d20;--ddga-color-destructive-hover:#b42318;--ddga-color-destructive-foreground:#fff;--ddga-color-error:#d92d20;--ddga-color-error-hover:#b42318;--ddga-color-error-foreground:#fff;--ddga-color-success:#079455;--ddga-color-success-hover:#067647;--ddga-color-success-foreground:#fff;--ddga-color-warning:#dc6803;--ddga-color-warning-hover:#b54708;--ddga-color-warning-foreground:#fff;--ddga-color-info:#1570ef;--ddga-color-info-hover:#175cd3;--ddga-color-info-foreground:#fff;--ddga-color-ring:#25935f;--ddga-text-primary:#0d121c;--ddga-text-secondary:#4d5761;--ddga-text-tertiary:#6c737f;--ddga-text-placeholder:#9da4ae;--ddga-font-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;--ddga-font-en:"IBM Plex Sans Arabic", "Inter", sans-serif;--ddga-font-mono:"IBM Plex Mono", monospace;--ddga-font-weight-regular:400;--ddga-font-weight-medium:500;--ddga-font-weight-semibold:600;--ddga-font-weight-bold:700;--ddga-font-size-xs:.75rem;--ddga-font-size-sm:.875rem;--ddga-font-size-base:1rem;--ddga-font-size-lg:1.125rem;--ddga-font-size-xl:1.25rem;--ddga-font-size-2xl:1.5rem;--ddga-font-size-3xl:2rem;--ddga-space-0:0;--ddga-space-1:.25rem;--ddga-space-2:.5rem;--ddga-space-3:.75rem;--ddga-space-4:1rem;--ddga-space-5:1.25rem;--ddga-space-6:1.5rem;--ddga-space-8:2rem;--ddga-space-10:2.5rem;--ddga-space-12:3rem;--ddga-space-16:4rem;--ddga-radius-none:0;--ddga-radius-sm:.25rem;--ddga-radius-md:.5rem;--ddga-radius-lg:.75rem;--ddga-radius-xl:1rem;--ddga-radius-full:9999px;--ddga-shadow-sm:0 1px 2px 0 #0000000d;--ddga-shadow-md:0 4px 6px -1px #0000001a;--ddga-shadow-lg:0 10px 15px -3px #0000001a;--ddga-shadow-none:none}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ddga-color-background:#111927;--ddga-color-foreground:#f3f4f6;--ddga-color-muted:#1f2a37;--ddga-color-muted-foreground:#9da4ae;--ddga-color-border:#384250;--ddga-color-card:#1f2a37;--ddga-color-card-foreground:#f3f4f6;--ddga-color-input:#384250;--ddga-color-primary:#54c08a;--ddga-color-primary-hover:#88d8ad;--ddga-color-primary-active:#25935f;--ddga-color-primary-foreground:#0d121c;--ddga-color-secondary:#1f2a37;--ddga-color-secondary-hover:#384250;--ddga-color-secondary-foreground:#f3f4f6;--ddga-color-destructive:#f97066;--ddga-color-destructive-hover:#f04438;--ddga-color-destructive-foreground:#0d121c;--ddga-color-error:#f97066;--ddga-color-error-hover:#f04438;--ddga-color-error-foreground:#0d121c;--ddga-color-success:#47cd89;--ddga-color-success-hover:#17b26a;--ddga-color-success-foreground:#0d121c;--ddga-color-warning:#fdb022;--ddga-color-warning-hover:#f79009;--ddga-color-warning-foreground:#0d121c;--ddga-color-info:#53b1fd;--ddga-color-info-hover:#2e90fa;--ddga-color-info-foreground:#0d121c;--ddga-color-ring:#54c08a;--ddga-text-primary:#fff;--ddga-text-secondary:#ffffffb3;--ddga-text-tertiary:#fff9;--ddga-text-placeholder:#6c737f;--ddga-shadow-sm:0 1px 2px 0 #0000004d;--ddga-shadow-md:0 4px 6px -1px #0006;--ddga-shadow-lg:0 10px 15px -3px #0006}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--ddga-font-ar);color:var(--ddga-color-foreground);background-color:var(--ddga-color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}svg{vertical-align:middle;display:block}}@layer ddga-components{.ddga-field{gap:var(--ddga-space-1);flex-direction:column;display:flex}.ddga-field__message{font-size:var(--ddga-font-size-sm);margin:0;line-height:1.4}.ddga-field__message--helper{color:var(--ddga-text-secondary)}.ddga-field__message--error{color:var(--ddga-color-error)}.ddga-button{justify-content:center;align-items:center;gap:var(--ddga-space-1);border-radius:var(--ddga-radius-sm);font-weight:var(--ddga-font-weight-medium);cursor:pointer;border:1px solid #0000;font-family:inherit;line-height:1.6;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,opacity .15s;display:inline-flex}.ddga-button--primary{background-color:var(--ddga-color-primary);color:var(--ddga-color-primary-foreground)}.ddga-button--primary:hover:not(:disabled){background-color:var(--ddga-color-primary-hover)}.ddga-button--secondary{background-color:var(--ddga-color-secondary);color:var(--ddga-color-secondary-foreground)}.ddga-button--secondary:hover:not(:disabled){background-color:var(--ddga-color-secondary-hover)}.ddga-button--outline{color:var(--ddga-color-foreground);border-color:var(--ddga-color-border);background-color:#0000}.ddga-button--outline:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--ghost{color:var(--ddga-color-foreground);background-color:#0000}.ddga-button--ghost:hover:not(:disabled){background-color:var(--ddga-color-muted)}.ddga-button--destructive{background-color:var(--ddga-color-destructive);color:var(--ddga-color-destructive-foreground)}.ddga-button--destructive:hover:not(:disabled){background-color:var(--ddga-color-destructive-hover)}.ddga-button--sm{height:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-button--md{height:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-button--lg{height:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-button--icon{width:40px;height:40px;font-size:var(--ddga-font-size-base);padding:0}.ddga-button--icon-sm{width:28px;height:28px;font-size:var(--ddga-font-size-sm);padding:0}.ddga-button--full-width{flex:1 0 100%;inline-size:100%}.ddga-button--loading{cursor:wait;position:relative}.ddga-button__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ddga-button__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ddga-button svg{flex-shrink:0;align-self:center}.ddga-spinner{flex-shrink:0;animation:.6s linear infinite ddga-spin}@keyframes ddga-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.ddga-spinner{animation-duration:1.5s}.ddga-button{transition:none}}.ddga-button:disabled{opacity:.5;cursor:not-allowed}.ddga-button:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}[dir=rtl] .ddga-icon-flip{transform:scaleX(-1)}@media (forced-colors:active){.ddga-button{border:1px solid buttontext}.ddga-button:focus-visible{outline:2px solid highlight}.ddga-button:disabled{color:graytext;border-color:graytext}}.ddga-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-input__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-input{align-items:center;gap:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);inline-size:100%;color:var(--ddga-text-primary);transition:border-color .15s,box-shadow .15s;display:flex}.ddga-input--sm{block-size:32px;padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-input--md{block-size:36px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-input--lg{block-size:40px;padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-input__field{block-size:100%;min-inline-size:0;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:auto;padding:0}.ddga-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-input__field:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-input__field:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-input__field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-input__adornment{max-block-size:100%;color:var(--ddga-text-tertiary);flex-shrink:0;align-self:center;align-items:center;display:inline-flex}.ddga-input__adornment svg{flex-shrink:0;align-self:center}.ddga-input:has(.ddga-input__adornment--start){padding-inline-start:var(--ddga-space-2)}.ddga-input:has(.ddga-input__adornment--end){padding-inline-end:var(--ddga-space-2)}.ddga-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-input--error{border-color:var(--ddga-color-error)}.ddga-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-input:has(.ddga-input__field:disabled){opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-input:has(.ddga-input__field:disabled) .ddga-input__field{cursor:not-allowed}.ddga-input:has(.ddga-input__field:read-only:not(:disabled)){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-input{transition:none}}@media (forced-colors:active){.ddga-input{border:1px solid canvastext}.ddga-input:focus-within{outline:2px solid highlight}.ddga-input:has(.ddga-input__field:disabled){color:graytext;border-color:graytext}}.ddga-textarea__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-textarea__required{color:var(--ddga-color-error);margin-inline-start:.125rem}.ddga-textarea{min-block-size:4.5rem;inline-size:100%;padding-block:var(--ddga-space-2);border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-text-primary);font-family:inherit;line-height:1.6;transition:border-color .15s,box-shadow .15s;display:block}.ddga-textarea::placeholder{color:var(--ddga-text-placeholder)}.ddga-textarea:-webkit-autofill{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea:-webkit-autofill:hover{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea:-webkit-autofill:focus{-webkit-text-fill-color:var(--ddga-text-primary);-webkit-box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;box-shadow:0 0 0 100vmax var(--ddga-color-background) inset;caret-color:var(--ddga-text-primary)}.ddga-textarea--sm{padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-sm)}.ddga-textarea--md{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-base)}.ddga-textarea--lg{padding-inline:var(--ddga-space-4);font-size:var(--ddga-font-size-lg)}.ddga-textarea--resize-vertical{resize:vertical}.ddga-textarea--resize-none{resize:none}.ddga-textarea:focus-visible{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring);outline:none}.ddga-textarea--error{border-color:var(--ddga-color-error)}.ddga-textarea--error:focus-visible{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-textarea:disabled{opacity:.5;cursor:not-allowed;resize:none;background-color:var(--ddga-color-muted)}.ddga-textarea:read-only:not(:disabled){background-color:var(--ddga-color-muted)}@media (prefers-reduced-motion:reduce){.ddga-textarea{transition:none}}@media (forced-colors:active){.ddga-textarea{border:1px solid canvastext}.ddga-textarea:focus-visible{outline:2px solid highlight}.ddga-textarea:disabled{color:graytext;border-color:graytext}}.ddga-checkbox-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-checkbox{border:1px solid var(--ddga-color-input);border-radius:var(--ddga-radius-sm);background-color:var(--ddga-color-background);color:var(--ddga-color-primary-foreground);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.ddga-checkbox--md{block-size:18px;inline-size:18px;font-size:14px}.ddga-checkbox--sm{block-size:16px;inline-size:16px;font-size:12px}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:var(--ddga-color-primary);border-color:var(--ddga-color-primary)}.ddga-checkbox:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-checkbox--error{border-color:var(--ddga-color-error)}.ddga-checkbox--error[data-state=checked],.ddga-checkbox--error[data-state=indeterminate]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-checkbox--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-checkbox:disabled{opacity:.5;cursor:not-allowed}.ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-checkbox__indicator{justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:inline-flex}.ddga-checkbox__check,.ddga-checkbox__minus{block-size:1em;inline-size:1em}.ddga-checkbox[data-state=checked] .ddga-checkbox__minus,.ddga-checkbox[data-state=indeterminate] .ddga-checkbox__check{display:none}.ddga-checkbox__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}.ddga-checkbox__required{color:var(--ddga-color-error);margin-inline-start:.125rem}@media (prefers-reduced-motion:reduce){.ddga-checkbox{transition:none}}@media (forced-colors:active){.ddga-checkbox{border:1px solid canvastext}.ddga-checkbox[data-state=checked],.ddga-checkbox[data-state=indeterminate]{background-color:canvastext}.ddga-checkbox__indicator{color:canvas}.ddga-checkbox:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-checkbox:disabled{color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,iBOAA,qmELCA,g1CEDA,0DAQA,2MAWA,yCJnBA,uBCKE,uEAMA,iFAMA,8DAIA,0DIlBA,4VAqBA,4GAIA,4FAMA,kHAIA,gGAMA,sHAKA,oFAMA,8EAIA,kFAMA,wHAIA,oGAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAOA,oDAOA,6EAOA,+FAUA,iDAOA,oEAKA,yEASA,uCACE,sCAGA,8BAOF,oDAKA,wHAQA,+CAMA,8BACE,yCAGA,uDAGA,4DF9LF,gJAOA,gFAOA,4RAgBA,sGAKA,wGAKA,sGAQA,yIAYA,mEAQA,0PAAA,gQAAA,gQAWA,kJAYA,2DAOA,wFAGA,oFAMA,yGAOA,wDAGA,kHAOA,oHAKA,mFAIA,sGAMA,uCACE,6BAOF,8BACE,wCAGA,qDAGA,mFG1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DEpHF,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA","sources":["src/index.css","src/components/field.css","src/dark.css","src/reset.css","src/components/input.css","src/components/textarea.css","src/components/checkbox.css","src/components/button.css","src/variables.css"],"sourcesContent":["@layer ddga-base, ddga-components;\n\n@import './variables.css' layer(ddga-base);\n@import './dark.css' layer(ddga-base);\n@import './reset.css' layer(ddga-base);\n\n@import './components/field.css';\n@import './components/button.css';\n@import './components/input.css';\n@import './components/textarea.css';\n@import './components/checkbox.css';\n/* AUTO:COMPONENT_IMPORTS */\n","@layer ddga-components {\n  /* Shared field primitives — wrapper + helper/error message. Used by\n     Input / Textarea / Checkbox. Component-specific bits (the label and\n     the control itself) stay in each component's CSS. */\n\n  .ddga-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-field__message {\n    margin: 0;\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-field__message--helper {\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-field__message--error {\n    color: var(--ddga-color-error);\n  }\n}\n","/* Dark mode — DGA-aligned using neutral gray scale. */\n[data-theme='dark'] {\n  color-scheme: dark;\n\n  /* ─── Surface / Layout (Gray 900-based) ─── */\n  --ddga-color-background: #111927;\n  --ddga-color-foreground: #f3f4f6;\n  --ddga-color-muted: #1f2a37;\n  --ddga-color-muted-foreground: #9da4ae;\n  --ddga-color-border: #384250;\n  --ddga-color-card: #1f2a37;\n  --ddga-color-card-foreground: #f3f4f6;\n  --ddga-color-input: #384250;\n\n  /* ─── Primary (SA Green — slightly lighter for dark bg) ─── */\n  --ddga-color-primary: #54c08a;\n  --ddga-color-primary-hover: #88d8ad;\n  --ddga-color-primary-active: #25935f;\n  --ddga-color-primary-foreground: #0d121c;\n\n  /* ─── Secondary ─── */\n  --ddga-color-secondary: #1f2a37;\n  --ddga-color-secondary-hover: #384250;\n  --ddga-color-secondary-foreground: #f3f4f6;\n\n  /* ─── Destructive ─── */\n  --ddga-color-destructive: #f97066;\n  --ddga-color-destructive-hover: #f04438;\n  --ddga-color-destructive-foreground: #0d121c;\n\n  /* ─── Semantic — lighter shades for dark bg legibility ─── */\n  --ddga-color-error: #f97066;\n  --ddga-color-error-hover: #f04438;\n  --ddga-color-error-foreground: #0d121c;\n  --ddga-color-success: #47cd89;\n  --ddga-color-success-hover: #17b26a;\n  --ddga-color-success-foreground: #0d121c;\n  --ddga-color-warning: #fdb022;\n  --ddga-color-warning-hover: #f79009;\n  --ddga-color-warning-foreground: #0d121c;\n  --ddga-color-info: #53b1fd;\n  --ddga-color-info-hover: #2e90fa;\n  --ddga-color-info-foreground: #0d121c;\n\n  /* ─── Focus ring ─── */\n  --ddga-color-ring: #54c08a;\n\n  /* ─── Text ─── */\n  --ddga-text-primary: #ffffff;\n  --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n  --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n  --ddga-text-placeholder: #6c737f;\n\n  /* ─── Shadows — stronger for dark backgrounds ─── */\n  --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n  --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n","*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: var(--ddga-font-ar);\n  color: var(--ddga-color-foreground);\n  background-color: var(--ddga-color-background);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Block-level SVGs: removes the inline baseline gap so icons sit centered\n   inside flex controls (buttons, input adornments). Standard reset. */\nsvg {\n  display: block;\n  vertical-align: middle;\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     — see field.css. Only Input-specific styles live here. */\n\n  /* ─── Label ─── */\n\n  .ddga-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-input__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Control (the bordered box; owns border/focus/size/state) ─── */\n\n  .ddga-input {\n    display: 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-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Button) ─── */\n\n  .ddga-input--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-input--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-input--lg {\n    block-size: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Field (the actual <input> — transparent, borderless fill) ─── */\n\n  .ddga-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    outline: none;\n  }\n\n  .ddga-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* Autofill: browsers paint their own background/text on autofilled\n     fields, overriding the theme (most jarring in dark mode, and government\n     forms autofill heavily). Repaint with tokens via the inset-shadow\n     technique — `background-color` alone is ignored for autofill. */\n  .ddga-input__field:-webkit-autofill,\n  .ddga-input__field:-webkit-autofill:hover,\n  .ddga-input__field:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-text-primary);\n  }\n\n  /* ─── Adornments (leading/trailing icon or text) ─── */\n\n  .ddga-input__adornment {\n    display: inline-flex;\n    align-items: center;\n    align-self: center;\n    flex-shrink: 0;\n    /* Never taller than the field interior, so an interactive control\n       (clear / password toggle) can't paint over the field border. */\n    max-block-size: 100%;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n  .ddga-input__adornment svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* An adornment hugs the field edge: collapse the padding on its side so\n     an in-field button's hit area aligns with the field, not floating. */\n  .ddga-input:has(.ddga-input__adornment--start) {\n    padding-inline-start: var(--ddga-space-2);\n  }\n  .ddga-input:has(.ddga-input__adornment--end) {\n    padding-inline-end: var(--ddga-space-2);\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-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-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-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  /* ─── States (driven by the inner field via :has()) ─── */\n\n  .ddga-input:has(.ddga-input__field:disabled) {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-input:has(.ddga-input__field:disabled) .ddga-input__field {\n    cursor: not-allowed;\n  }\n\n  .ddga-input:has(.ddga-input__field:read-only:not(:disabled)) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-input {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-input:focus-within {\n      outline: 2px solid Highlight;\n    }\n    .ddga-input:has(.ddga-input__field:disabled) {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     — see field.css. Only Textarea-specific styles live here. */\n\n  /* ─── Label ─── */\n\n  .ddga-textarea__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-textarea__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Textarea (owns border/focus/state — no adornments) ─── */\n\n  .ddga-textarea {\n    display: block;\n    inline-size: 100%;\n    min-block-size: 4.5rem;\n    padding-block: var(--ddga-space-2);\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    font-family: inherit;\n    line-height: 1.6;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-textarea::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* Autofill (e.g. address fields): repaint with tokens — see input.css. */\n  .ddga-textarea:-webkit-autofill,\n  .ddga-textarea:-webkit-autofill:hover,\n  .ddga-textarea:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-text-primary);\n  }\n\n  /* ─── Sizes (font + inline padding; height is driven by `rows`) ─── */\n\n  .ddga-textarea--sm {\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-textarea--md {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-textarea--lg {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Resize (vertical only or locked; horizontal breaks layout) ─── */\n\n  .ddga-textarea--resize-vertical {\n    resize: vertical;\n  }\n  .ddga-textarea--resize-none {\n    resize: none;\n  }\n\n  /* ─── Focus ─── */\n\n  .ddga-textarea:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-textarea--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-textarea--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── States ─── */\n\n  .ddga-textarea:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    resize: none;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-textarea:read-only:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-textarea {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-textarea {\n      border: 1px solid CanvasText;\n    }\n    .ddga-textarea:focus-visible {\n      outline: 2px solid Highlight;\n    }\n    .ddga-textarea:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     — see field.css. Only Checkbox-specific styles live here. */\n\n  /* ─── Row (box + label, inline) ─── */\n\n  .ddga-checkbox-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Box (Radix Root — reset the button, then style) ─── */\n\n  .ddga-checkbox {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    padding: 0;\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-color-primary-foreground);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-checkbox--md {\n    block-size: 18px;\n    inline-size: 18px;\n    font-size: 14px;\n  }\n  .ddga-checkbox--sm {\n    block-size: 16px;\n    inline-size: 16px;\n    font-size: 12px;\n  }\n\n  /* ─── Checked / indeterminate fill ─── */\n\n  .ddga-checkbox[data-state='checked'],\n  .ddga-checkbox[data-state='indeterminate'] {\n    background-color: var(--ddga-color-primary);\n    border-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring — small hit target) ─── */\n\n  .ddga-checkbox:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-checkbox--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error[data-state='checked'],\n  .ddga-checkbox--error[data-state='indeterminate'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-checkbox:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Indicator + icons (one shows per Root data-state) ─── */\n\n  .ddga-checkbox__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-checkbox__check,\n  .ddga-checkbox__minus {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n  .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n    display: none;\n  }\n  .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-checkbox__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n  .ddga-checkbox__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-checkbox {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-checkbox {\n      border: 1px solid CanvasText;\n    }\n    .ddga-checkbox[data-state='checked'],\n    .ddga-checkbox[data-state='indeterminate'] {\n      background-color: CanvasText;\n    }\n    .ddga-checkbox__indicator {\n      color: Canvas;\n    }\n    .ddga-checkbox:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-checkbox:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    font-family: inherit;\n    line-height: 1.6;\n    cursor: pointer;\n    text-decoration: none;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease,\n      opacity 150ms ease;\n  }\n\n  /* ─── Variant: Primary ─── */\n\n  .ddga-button--primary {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-button--primary:hover:not(:disabled) {\n    background-color: var(--ddga-color-primary-hover);\n  }\n\n  /* ─── Variant: Secondary ─── */\n\n  .ddga-button--secondary {\n    background-color: var(--ddga-color-secondary);\n    color: var(--ddga-color-secondary-foreground);\n  }\n  .ddga-button--secondary:hover:not(:disabled) {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n\n  /* ─── Variant: Outline ─── */\n\n  .ddga-button--outline {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n    border-color: var(--ddga-color-border);\n  }\n  .ddga-button--outline:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Variant: Ghost ─── */\n\n  .ddga-button--ghost {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-button--ghost:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Variant: Destructive ─── */\n\n  .ddga-button--destructive {\n    background-color: var(--ddga-color-destructive);\n    color: var(--ddga-color-destructive-foreground);\n  }\n  .ddga-button--destructive:hover:not(:disabled) {\n    background-color: var(--ddga-color-destructive-hover);\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-button--sm {\n    height: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-button--md {\n    height: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-button--lg {\n    height: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n  .ddga-button--icon {\n    height: 40px;\n    width: 40px;\n    padding: 0;\n    font-size: var(--ddga-font-size-base);\n  }\n  /* Compact square icon button — fits inside form fields as an adornment\n     (sm/md field interiors) without overflowing the field border. */\n  .ddga-button--icon-sm {\n    height: 28px;\n    width: 28px;\n    padding: 0;\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Full Width ─── */\n\n  .ddga-button--full-width {\n    inline-size: 100%;\n    flex: 1 0 100%;\n  }\n\n  /* ─── Loading ─── */\n\n  .ddga-button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  /* ─── Child elements ─── */\n\n  .ddga-button__text {\n    /* Truncate long text */\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .ddga-button__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Block-level SVGs (see reset) must not be flex-stretched on the cross\n     axis — that distorts a square icon into a tall one. Pin them square\n     to their intrinsic size and keep them centered. */\n  .ddga-button svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* ─── Spinner ─── */\n\n  .ddga-spinner {\n    animation: ddga-spin 600ms linear infinite;\n    flex-shrink: 0;\n  }\n\n  @keyframes ddga-spin {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-spinner {\n      animation-duration: 1.5s;\n    }\n    .ddga-button {\n      transition: none;\n    }\n  }\n\n  /* ─── States ─── */\n\n  .ddga-button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .ddga-button:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── RTL directional icon flip ─── */\n\n  [dir='rtl'] .ddga-icon-flip {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-button {\n      border: 1px solid ButtonText;\n    }\n    .ddga-button:focus-visible {\n      outline: 2px solid Highlight;\n    }\n    .ddga-button:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n",":root {\n  --ddga-color-primary: #25935F;\n  --ddga-color-primary-hover: #1B8354;\n  --ddga-color-primary-active: #166A45;\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-secondary: #F3F4F6;\n  --ddga-color-secondary-hover: #E5E7EB;\n  --ddga-color-secondary-foreground: #0D121C;\n  --ddga-color-background: #FFFFFF;\n  --ddga-color-foreground: #0D121C;\n  --ddga-color-muted: #F3F4F6;\n  --ddga-color-muted-foreground: #6C737F;\n  --ddga-color-border: #E5E7EB;\n  --ddga-color-input: #D2D6DB;\n  --ddga-color-card: #FFFFFF;\n  --ddga-color-card-foreground: #0D121C;\n  --ddga-color-destructive: #D92D20;\n  --ddga-color-destructive-hover: #B42318;\n  --ddga-color-destructive-foreground: #FFFFFF;\n  --ddga-color-error: #D92D20;\n  --ddga-color-error-hover: #B42318;\n  --ddga-color-error-foreground: #FFFFFF;\n  --ddga-color-success: #079455;\n  --ddga-color-success-hover: #067647;\n  --ddga-color-success-foreground: #FFFFFF;\n  --ddga-color-warning: #DC6803;\n  --ddga-color-warning-hover: #B54708;\n  --ddga-color-warning-foreground: #FFFFFF;\n  --ddga-color-info: #1570EF;\n  --ddga-color-info-hover: #175CD3;\n  --ddga-color-info-foreground: #FFFFFF;\n  --ddga-color-ring: #25935F;\n  --ddga-text-primary: #0D121C;\n  --ddga-text-secondary: #4D5761;\n  --ddga-text-tertiary: #6C737F;\n  --ddga-text-placeholder: #9DA4AE;\n  --ddga-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;\n  --ddga-font-en: 'IBM Plex Sans Arabic', 'Inter', sans-serif;\n  --ddga-font-mono: 'IBM Plex Mono', monospace;\n  --ddga-font-weight-regular: 400;\n  --ddga-font-weight-medium: 500;\n  --ddga-font-weight-semibold: 600;\n  --ddga-font-weight-bold: 700;\n  --ddga-font-size-xs: 0.75rem;\n  --ddga-font-size-sm: 0.875rem;\n  --ddga-font-size-base: 1rem;\n  --ddga-font-size-lg: 1.125rem;\n  --ddga-font-size-xl: 1.25rem;\n  --ddga-font-size-2xl: 1.5rem;\n  --ddga-font-size-3xl: 2rem;\n  --ddga-space-0: 0;\n  --ddga-space-1: 0.25rem;\n  --ddga-space-2: 0.5rem;\n  --ddga-space-3: 0.75rem;\n  --ddga-space-4: 1rem;\n  --ddga-space-5: 1.25rem;\n  --ddga-space-6: 1.5rem;\n  --ddga-space-8: 2rem;\n  --ddga-space-10: 2.5rem;\n  --ddga-space-12: 3rem;\n  --ddga-space-16: 4rem;\n  --ddga-radius-none: 0;\n  --ddga-radius-sm: 0.25rem;\n  --ddga-radius-md: 0.5rem;\n  --ddga-radius-lg: 0.75rem;\n  --ddga-radius-xl: 1rem;\n  --ddga-radius-full: 9999px;\n  --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n  --ddga-shadow-none: none;\n}\n"],"names":[]}

package/dist/reset.css

@@ -0,0 +1,2 @@
+*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--ddga-font-ar);color:var(--ddga-color-foreground);background-color:var(--ddga-color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}svg{vertical-align:middle;display:block}
+/*# sourceMappingURL=reset.css.map */

package/dist/reset.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,0DAQA,2MAWA","sources":["src/reset.css"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: var(--ddga-font-ar);\n  color: var(--ddga-color-foreground);\n  background-color: var(--ddga-color-background);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Block-level SVGs: removes the inline baseline gap so icons sit centered\n   inside flex controls (buttons, input adornments). Standard reset. */\nsvg {\n  display: block;\n  vertical-align: middle;\n}\n"],"names":[]}

package/dist/variables.css

@@ -0,0 +1,2 @@
+:root{--ddga-color-primary:#25935f;--ddga-color-primary-hover:#1b8354;--ddga-color-primary-active:#166a45;--ddga-color-primary-foreground:#fff;--ddga-color-secondary:#f3f4f6;--ddga-color-secondary-hover:#e5e7eb;--ddga-color-secondary-foreground:#0d121c;--ddga-color-background:#fff;--ddga-color-foreground:#0d121c;--ddga-color-muted:#f3f4f6;--ddga-color-muted-foreground:#6c737f;--ddga-color-border:#e5e7eb;--ddga-color-input:#d2d6db;--ddga-color-card:#fff;--ddga-color-card-foreground:#0d121c;--ddga-color-destructive:#d92d20;--ddga-color-destructive-hover:#b42318;--ddga-color-destructive-foreground:#fff;--ddga-color-error:#d92d20;--ddga-color-error-hover:#b42318;--ddga-color-error-foreground:#fff;--ddga-color-success:#079455;--ddga-color-success-hover:#067647;--ddga-color-success-foreground:#fff;--ddga-color-warning:#dc6803;--ddga-color-warning-hover:#b54708;--ddga-color-warning-foreground:#fff;--ddga-color-info:#1570ef;--ddga-color-info-hover:#175cd3;--ddga-color-info-foreground:#fff;--ddga-color-ring:#25935f;--ddga-text-primary:#0d121c;--ddga-text-secondary:#4d5761;--ddga-text-tertiary:#6c737f;--ddga-text-placeholder:#9da4ae;--ddga-font-ar:"IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;--ddga-font-en:"IBM Plex Sans Arabic", "Inter", sans-serif;--ddga-font-mono:"IBM Plex Mono", monospace;--ddga-font-weight-regular:400;--ddga-font-weight-medium:500;--ddga-font-weight-semibold:600;--ddga-font-weight-bold:700;--ddga-font-size-xs:.75rem;--ddga-font-size-sm:.875rem;--ddga-font-size-base:1rem;--ddga-font-size-lg:1.125rem;--ddga-font-size-xl:1.25rem;--ddga-font-size-2xl:1.5rem;--ddga-font-size-3xl:2rem;--ddga-space-0:0;--ddga-space-1:.25rem;--ddga-space-2:.5rem;--ddga-space-3:.75rem;--ddga-space-4:1rem;--ddga-space-5:1.25rem;--ddga-space-6:1.5rem;--ddga-space-8:2rem;--ddga-space-10:2.5rem;--ddga-space-12:3rem;--ddga-space-16:4rem;--ddga-radius-none:0;--ddga-radius-sm:.25rem;--ddga-radius-md:.5rem;--ddga-radius-lg:.75rem;--ddga-radius-xl:1rem;--ddga-radius-full:9999px;--ddga-shadow-sm:0 1px 2px 0 #0000000d;--ddga-shadow-md:0 4px 6px -1px #0000001a;--ddga-shadow-lg:0 10px 15px -3px #0000001a;--ddga-shadow-none:none}
+/*# sourceMappingURL=variables.css.map */

package/dist/variables.css.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA","sources":["src/variables.css"],"sourcesContent":[":root {\n  --ddga-color-primary: #25935F;\n  --ddga-color-primary-hover: #1B8354;\n  --ddga-color-primary-active: #166A45;\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-secondary: #F3F4F6;\n  --ddga-color-secondary-hover: #E5E7EB;\n  --ddga-color-secondary-foreground: #0D121C;\n  --ddga-color-background: #FFFFFF;\n  --ddga-color-foreground: #0D121C;\n  --ddga-color-muted: #F3F4F6;\n  --ddga-color-muted-foreground: #6C737F;\n  --ddga-color-border: #E5E7EB;\n  --ddga-color-input: #D2D6DB;\n  --ddga-color-card: #FFFFFF;\n  --ddga-color-card-foreground: #0D121C;\n  --ddga-color-destructive: #D92D20;\n  --ddga-color-destructive-hover: #B42318;\n  --ddga-color-destructive-foreground: #FFFFFF;\n  --ddga-color-error: #D92D20;\n  --ddga-color-error-hover: #B42318;\n  --ddga-color-error-foreground: #FFFFFF;\n  --ddga-color-success: #079455;\n  --ddga-color-success-hover: #067647;\n  --ddga-color-success-foreground: #FFFFFF;\n  --ddga-color-warning: #DC6803;\n  --ddga-color-warning-hover: #B54708;\n  --ddga-color-warning-foreground: #FFFFFF;\n  --ddga-color-info: #1570EF;\n  --ddga-color-info-hover: #175CD3;\n  --ddga-color-info-foreground: #FFFFFF;\n  --ddga-color-ring: #25935F;\n  --ddga-text-primary: #0D121C;\n  --ddga-text-secondary: #4D5761;\n  --ddga-text-tertiary: #6C737F;\n  --ddga-text-placeholder: #9DA4AE;\n  --ddga-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;\n  --ddga-font-en: 'IBM Plex Sans Arabic', 'Inter', sans-serif;\n  --ddga-font-mono: 'IBM Plex Mono', monospace;\n  --ddga-font-weight-regular: 400;\n  --ddga-font-weight-medium: 500;\n  --ddga-font-weight-semibold: 600;\n  --ddga-font-weight-bold: 700;\n  --ddga-font-size-xs: 0.75rem;\n  --ddga-font-size-sm: 0.875rem;\n  --ddga-font-size-base: 1rem;\n  --ddga-font-size-lg: 1.125rem;\n  --ddga-font-size-xl: 1.25rem;\n  --ddga-font-size-2xl: 1.5rem;\n  --ddga-font-size-3xl: 2rem;\n  --ddga-space-0: 0;\n  --ddga-space-1: 0.25rem;\n  --ddga-space-2: 0.5rem;\n  --ddga-space-3: 0.75rem;\n  --ddga-space-4: 1rem;\n  --ddga-space-5: 1.25rem;\n  --ddga-space-6: 1.5rem;\n  --ddga-space-8: 2rem;\n  --ddga-space-10: 2.5rem;\n  --ddga-space-12: 3rem;\n  --ddga-space-16: 4rem;\n  --ddga-radius-none: 0;\n  --ddga-radius-sm: 0.25rem;\n  --ddga-radius-md: 0.5rem;\n  --ddga-radius-lg: 0.75rem;\n  --ddga-radius-xl: 1rem;\n  --ddga-radius-full: 9999px;\n  --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n  --ddga-shadow-none: none;\n}\n"],"names":[]}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@dev-dga/css",
+  "version": "0.1.0",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.css",
+    "./variables.css": "./dist/variables.css",
+    "./dark.css": "./dist/dark.css",
+    "./reset.css": "./dist/reset.css",
+    "./components/*": "./dist/components/*"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "devDependencies": {
+    "lightningcss-cli": "^1.30.1",
+    "@dev-dga/tokens": "0.1.0"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "dev": "node scripts/build.js --watch",
+    "lint": "eslint ."
+  }
+}