@dev-dga/css 0.7.0 → 0.8.0

package/dist/components/tabs.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,uBAQE,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,2IAKA,6IAQA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA","sources":["src/components/tabs.css"],"sourcesContent":["@layer ddga-components {\n  /* Variant + size live on the root (.ddga-tabs--{line,pill,sm,md}). All\n     descendant selectors cascade from there. Logical properties keep the\n     RTL flip free — Radix sets `dir` from the DgaProvider's Direction.Provider\n     and updates `data-orientation` on Root/List/Trigger/Content. */\n\n  /* ─── Root ─── */\n\n  .ddga-tabs {\n    display: flex;\n    color: var(--ddga-text-primary);\n    /* Default (horizontal) layout: list above content. */\n    flex-direction: column;\n    gap: var(--ddga-space-3);\n    /* CSS var so consumers can tune the line variant's indicator weight. */\n    --ddga-tabs-indicator-thickness: 2px;\n  }\n\n  /* Vertical layout: list beside content. Radix sets data-orientation\n     on every part — target it on Root for layout flow, and on List for\n     its own flex direction. */\n  .ddga-tabs[data-orientation='vertical'] {\n    flex-direction: row;\n    gap: var(--ddga-space-4);\n  }\n\n  /* ─── List ─── */\n\n  .ddga-tabs__list {\n    display: flex;\n    /* Horizontal default — gap depends on variant (pill needs tighter,\n       line wants none so the baseline reads as a single underline). */\n    flex-direction: row;\n    align-items: stretch;\n  }\n  .ddga-tabs__list[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Full-width: triggers stretch to fill the list. Each trigger\n     `flex: 1` so they share width evenly. Use a separate selector so the\n     prop is opt-in and doesn't override per-variant defaults. */\n  .ddga-tabs__list--full-width {\n    inline-size: 100%;\n  }\n  .ddga-tabs__list--full-width .ddga-tabs__trigger {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* ─── Trigger (Radix renders a <button>) ─── */\n\n  .ddga-tabs__trigger {\n    /* Reset the native button. */\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    /* Layout. */\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    /* Text. */\n    color: var(--ddga-text-secondary);\n    font-family: inherit;\n    font-weight: 500;\n    line-height: 1.4;\n    white-space: nowrap;\n    cursor: pointer;\n    position: relative;\n    transition:\n      color 150ms ease,\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-tabs__trigger:hover {\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-tabs__trigger:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* Disabled — match both Radix's data-disabled (native disabled) AND\n     aria-disabled (asChild composition). Same convention as Button. */\n  .ddga-tabs__trigger[data-disabled],\n  .ddga-tabs__trigger[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-tabs__trigger[data-disabled]:hover,\n  .ddga-tabs__trigger[aria-disabled='true']:hover {\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-tabs--sm .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Variant: line ─── */\n\n  .ddga-tabs--line .ddga-tabs__list {\n    /* The unselected baseline runs along the inline edge — block-end on\n       horizontal lists, inline-end on vertical ones (right in LTR, left in\n       RTL — logical properties handle the flip). */\n    border-block-end: 1px solid var(--ddga-color-border);\n    gap: var(--ddga-space-1);\n  }\n  .ddga-tabs--line .ddga-tabs__list[data-orientation='vertical'] {\n    border-block-end: 0;\n    border-inline-end: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger {\n    /* Reserve space for the indicator so active/inactive don't shift. */\n    margin-block-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger {\n    margin-block-end: 0;\n    margin-inline-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: 0;\n    border-inline-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-color-primary);\n    border-block-end-color: var(--ddga-color-primary);\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n    border-block-end-color: transparent;\n    border-inline-end-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Variant: pill ─── */\n\n  .ddga-tabs--pill .ddga-tabs__list {\n    background-color: var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-md);\n    padding: var(--ddga-space-1);\n    gap: var(--ddga-space-1);\n    align-self: flex-start;\n  }\n  .ddga-tabs--pill .ddga-tabs__list--full-width {\n    align-self: stretch;\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger {\n    border-radius: calc(var(--ddga-radius-md) - 2px);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger:hover:not([data-state='active']) {\n    background-color: color-mix(in oklab, var(--ddga-color-muted) 60%, var(--ddga-text-primary) 6%);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-text-primary);\n    background-color: var(--ddga-color-background);\n    box-shadow: var(--ddga-shadow-sm);\n  }\n\n  /* ─── Content ─── */\n\n  .ddga-tabs__content {\n    /* Radix sets tabindex=0 on the content so keyboard users can shift focus\n       from the list into the panel. Make that focus visible. */\n    outline: none;\n  }\n  .ddga-tabs__content:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tabs__trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tabs--line .ddga-tabs__list {\n      border-block-end-color: CanvasText;\n    }\n    .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n      border-block-end-color: Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n      outline: 1px solid Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,uBAQE,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,sEAKA,oDAOA,2IAKA,6IAQA,iFAGA,iFAMA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA","sources":["src/components/tabs.css"],"sourcesContent":["@layer ddga-components {\n  /* Variant + size live on the root (.ddga-tabs--{line,pill,sm,md}). All\n     descendant selectors cascade from there. Logical properties keep the\n     RTL flip free — Radix sets `dir` from the DgaProvider's Direction.Provider\n     and updates `data-orientation` on Root/List/Trigger/Content. */\n\n  /* ─── Root ─── */\n\n  .ddga-tabs {\n    display: flex;\n    color: var(--ddga-text-primary);\n    /* Default (horizontal) layout: list above content. */\n    flex-direction: column;\n    gap: var(--ddga-space-3);\n    /* CSS var so consumers can tune the line variant's indicator weight. */\n    --ddga-tabs-indicator-thickness: 2px;\n  }\n\n  /* Vertical layout: list beside content. Radix sets data-orientation\n     on every part — target it on Root for layout flow, and on List for\n     its own flex direction. */\n  .ddga-tabs[data-orientation='vertical'] {\n    flex-direction: row;\n    gap: var(--ddga-space-4);\n  }\n\n  /* ─── List ─── */\n\n  .ddga-tabs__list {\n    display: flex;\n    /* Horizontal default — gap depends on variant (pill needs tighter,\n       line wants none so the baseline reads as a single underline). */\n    flex-direction: row;\n    align-items: stretch;\n  }\n  .ddga-tabs__list[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Full-width: triggers stretch to fill the list. Each trigger\n     `flex: 1` so they share width evenly. Use a separate selector so the\n     prop is opt-in and doesn't override per-variant defaults. */\n  .ddga-tabs__list--full-width {\n    inline-size: 100%;\n  }\n  .ddga-tabs__list--full-width .ddga-tabs__trigger {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* ─── Trigger (Radix renders a <button>) ─── */\n\n  .ddga-tabs__trigger {\n    /* Reset the native button. */\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    /* Layout. */\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    /* Text. */\n    color: var(--ddga-text-secondary);\n    font-family: inherit;\n    font-weight: 500;\n    line-height: 1.4;\n    white-space: nowrap;\n    cursor: pointer;\n    position: relative;\n    transition:\n      color 150ms ease,\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-tabs__trigger:hover {\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-tabs__trigger:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* Disabled — match both Radix's data-disabled (native disabled) AND\n     aria-disabled (asChild composition). Same convention as Button. */\n  .ddga-tabs__trigger[data-disabled],\n  .ddga-tabs__trigger[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-tabs__trigger[data-disabled]:hover,\n  .ddga-tabs__trigger[aria-disabled='true']:hover {\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Icons (leading/trailing inside a trigger) ─── */\n\n  .ddga-tabs__icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n  .ddga-tabs__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-tabs--sm .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* Icon-only triggers square up: collapse the wider inline padding to match\n     the block padding so the hit target is balanced around the glyph. */\n  .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-1);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-2);\n  }\n\n  /* ─── Variant: line ─── */\n\n  .ddga-tabs--line .ddga-tabs__list {\n    /* The unselected baseline runs along the inline edge — block-end on\n       horizontal lists, inline-end on vertical ones (right in LTR, left in\n       RTL — logical properties handle the flip). */\n    border-block-end: 1px solid var(--ddga-color-border);\n    gap: var(--ddga-space-1);\n  }\n  .ddga-tabs--line .ddga-tabs__list[data-orientation='vertical'] {\n    border-block-end: 0;\n    border-inline-end: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger {\n    /* Reserve space for the indicator so active/inactive don't shift. */\n    margin-block-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger {\n    margin-block-end: 0;\n    margin-inline-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: 0;\n    border-inline-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-color-primary);\n    border-block-end-color: var(--ddga-color-primary);\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n    border-block-end-color: transparent;\n    border-inline-end-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Variant: pill ─── */\n\n  .ddga-tabs--pill .ddga-tabs__list {\n    background-color: var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-md);\n    padding: var(--ddga-space-1);\n    gap: var(--ddga-space-1);\n    align-self: flex-start;\n  }\n  .ddga-tabs--pill .ddga-tabs__list--full-width {\n    align-self: stretch;\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger {\n    border-radius: calc(var(--ddga-radius-md) - 2px);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger:hover:not([data-state='active']) {\n    background-color: color-mix(in oklab, var(--ddga-color-muted) 60%, var(--ddga-text-primary) 6%);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-text-primary);\n    background-color: var(--ddga-color-background);\n    box-shadow: var(--ddga-shadow-sm);\n  }\n\n  /* ─── Content ─── */\n\n  .ddga-tabs__content {\n    /* Radix sets tabindex=0 on the content so keyboard users can shift focus\n       from the list into the panel. Make that focus visible. */\n    outline: none;\n  }\n  .ddga-tabs__content:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tabs__trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tabs--line .ddga-tabs__list {\n      border-block-end-color: CanvasText;\n    }\n    .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n      border-block-end-color: Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n      outline: 1px solid Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n"],"names":[]}

package/dist/components/tag-input.css

@@ -0,0 +1,2 @@
+@layer ddga-components{.ddga-tag-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-tag-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);cursor:text;flex-wrap:wrap;transition:border-color .15s,box-shadow .15s;display:flex}.ddga-tag-input--sm{min-block-size:32px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-sm)}.ddga-tag-input--md{min-block-size:36px;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-base)}.ddga-tag-input--lg{min-block-size:40px;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-3);font-size:var(--ddga-font-size-lg)}.ddga-tag-input__list,.ddga-tag-input__item{display:contents}.ddga-tag-input__field{block-size:1.5rem;min-inline-size:60px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:60px;padding:0}.ddga-tag-input__field::placeholder{color:var(--ddga-text-placeholder)}.ddga-tag-input:focus-within{border-color:var(--ddga-color-ring);box-shadow:0 0 0 1px var(--ddga-color-ring)}.ddga-tag-input--error{border-color:var(--ddga-color-error)}.ddga-tag-input--error:focus-within{border-color:var(--ddga-color-error);box-shadow:0 0 0 1px var(--ddga-color-error)}.ddga-tag-input[data-disabled]{opacity:.5;cursor:not-allowed;background-color:var(--ddga-color-muted)}.ddga-tag-input[data-disabled] .ddga-tag-input__field{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.ddga-tag-input{transition:none}}@media (forced-colors:active){.ddga-tag-input{border:1px solid canvastext}.ddga-tag-input:focus-within{outline:2px solid highlight}.ddga-tag-input[data-disabled]{color:graytext;border-color:graytext}}}
+/*# sourceMappingURL=tag-input.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,uBASE,oJASA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA","sources":["src/components/tag-input.css"],"sourcesContent":["@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n     see field.css. Only TagInput-specific styles live here. The control box\n     mirrors Input's box (border / focus ring / sizes / error / disabled) but\n     wraps: chips + the text input share one flex-wrap flow, so the box grows\n     vertically (min-block-size, not a fixed height) as chips wrap. */\n\n  /* ─── Label ─── */\n\n  .ddga-tag-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  /* ─── Control (the bordered, wrapping box) ─── */\n\n  .ddga-tag-input {\n    display: flex;\n    flex-wrap: wrap;\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    cursor: text;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (min-heights match Input; vertical padding lets chips breathe) ─── */\n\n  .ddga-tag-input--sm {\n    min-block-size: 32px;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tag-input--md {\n    min-block-size: 36px;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-tag-input--lg {\n    min-block-size: 40px;\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Chip list (display:contents so <li> chips flow inline with the input;\n     explicit roles in the JSX preserve list semantics regardless) ─── */\n\n  .ddga-tag-input__list,\n  .ddga-tag-input__item {\n    display: contents;\n  }\n\n  /* ─── Field (the actual <input> — transparent, borderless, grows to fill) ─── */\n\n  .ddga-tag-input__field {\n    flex: 1 1 60px;\n    min-inline-size: 60px;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n  }\n\n  .ddga-tag-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-tag-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-tag-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-tag-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-tag-input[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-tag-input[data-disabled] .ddga-tag-input__field {\n    cursor: not-allowed;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tag-input {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tag-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-tag-input:focus-within {\n      outline: 2px solid Highlight;\n    }\n    .ddga-tag-input[data-disabled] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n"],"names":[]}