@ahrowe/ui 0.47.2 → 0.48.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/LICENSE +1 -1
- package/README.md +2 -2
- package/dist/cjs-types/common/menu/menu.types.d.ts +5 -0
- package/dist/cjs-types/common/menu/menuHotkeys.d.ts +2 -2
- package/dist/cjs-types/common/menu/menuItem.d.ts +10 -0
- package/dist/esm/common/commandPalette/commandPalette.mjs +1 -1
- package/dist/esm/common/commandPalette/commandPalette.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs.map +1 -1
- package/dist/esm/common/input/input.mjs +1 -1
- package/dist/esm/common/input/input.mjs.map +1 -1
- package/dist/esm/common/input/input.module.mjs +1 -1
- package/dist/esm/common/input/input.module.mjs.map +1 -1
- package/dist/esm/common/menu/menu.mjs +1 -1
- package/dist/esm/common/menu/menu.mjs.map +1 -1
- package/dist/esm/common/menu/menu.module.mjs.map +1 -1
- package/dist/esm/common/menu/menu.types.mjs.map +1 -1
- package/dist/esm/common/menu/menuHotkeys.mjs +1 -1
- package/dist/esm/common/menu/menuHotkeys.mjs.map +1 -1
- package/dist/esm/common/menu/menuItem.mjs +2 -0
- package/dist/esm/common/menu/menuItem.mjs.map +1 -0
- package/dist/esm/common/multiSelect/multiSelect.mjs +1 -1
- package/dist/esm/common/multiSelect/multiSelect.mjs.map +1 -1
- package/dist/esm/common/multiSelect/multiSelect.module.mjs +1 -1
- package/dist/esm/common/multiSelect/multiSelect.module.mjs.map +1 -1
- package/dist/esm/common/numberInput/numberInput.module.mjs.map +1 -1
- package/dist/esm/common/radioGroup/radioGroup.module.mjs.map +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/common/menu/menu.types.d.ts +5 -0
- package/dist/types/common/menu/menuHotkeys.d.ts +2 -2
- package/dist/types/common/menu/menuItem.d.ts +10 -0
- package/docs/CommandPalette.md +1 -1
- package/docs/InteractableDiv.md +1 -1
- package/docs/Menu.md +6 -5
- package/docs/ProgressBar.md +1 -1
- package/docs/RadioGroup.md +1 -1
- package/docs/ThemeProvider.md +1 -1
- package/package.json +4 -4
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var e=`multiSelect_fmViY`,t=`multiSelect-
|
|
1
|
+
"use client";var e=`multiSelect_fmViY`,t=`multiSelect-withLabel_s3N7A`,n=`multiSelect-label_asHZ1`,r=`multiSelect-label-floating_d4-Om`,i=`multiSelect-fieldset_Eo29l`,a=`multiSelect-fieldset-focused_ZC2P6`,o=`multiSelect-fieldset-error_CWzEo`,s=`multiSelect-fieldset-legend_p-6nh`,c=`multiSelect-fieldset-legend-active_M0L7g`,l=`multiSelect-control_zLb7t`,u=`multiSelect-values_k1Q8x`,d=`multiSelect-chip_xqe8Q`,f=`multiSelect-placeholder_Tjrmh`,p=`multiSelect-placeholder-shown_8v36t`,m=`multiSelectFadeIn_rOplX`,h=`multiSelect-placeholder-instant_r9-TD`,g=`multiSelect-clearButton_FKs0m`,_=`multiSelect-icon_ovLu-`,v=`multiSelect-icon-open_h8VAu`,y=`multiSelect-disabled_Hm8mv`,b=`multiSelect-panel_VX7gU`,x=`multiSelect-search_g4OHX`,S=`multiSelect-options_MGZCv`,C=`multiSelect-option_hbvPY`,w=`multiSelect-option-active_mSWFG`,T=`multiSelect-option-selected_mjPq-`,E=`multiSelect-option-disabled_qSgYz`,D=`multiSelect-optionCheck_-YKoj`,O=`multiSelect-optionLabel_CFZke`,k=`multiSelect-empty_MjABY`,A={multiSelect:e,"multiSelect-withLabel":`multiSelect-withLabel_s3N7A`,multiSelectWithLabel:t,"multiSelect-label":`multiSelect-label_asHZ1`,multiSelectLabel:n,"multiSelect-label-floating":`multiSelect-label-floating_d4-Om`,multiSelectLabelFloating:r,"multiSelect-fieldset":`multiSelect-fieldset_Eo29l`,multiSelectFieldset:i,"multiSelect-fieldset-focused":`multiSelect-fieldset-focused_ZC2P6`,multiSelectFieldsetFocused:a,"multiSelect-fieldset-error":`multiSelect-fieldset-error_CWzEo`,multiSelectFieldsetError:o,"multiSelect-fieldset-legend":`multiSelect-fieldset-legend_p-6nh`,multiSelectFieldsetLegend:s,"multiSelect-fieldset-legend-active":`multiSelect-fieldset-legend-active_M0L7g`,multiSelectFieldsetLegendActive:c,"multiSelect-control":`multiSelect-control_zLb7t`,multiSelectControl:l,"multiSelect-values":`multiSelect-values_k1Q8x`,multiSelectValues:u,"multiSelect-chip":`multiSelect-chip_xqe8Q`,multiSelectChip:d,"multiSelect-placeholder":`multiSelect-placeholder_Tjrmh`,multiSelectPlaceholder:f,"multiSelect-placeholder-shown":`multiSelect-placeholder-shown_8v36t`,multiSelectPlaceholderShown:p,multiSelectFadeIn:m,"multiSelect-placeholder-instant":`multiSelect-placeholder-instant_r9-TD`,multiSelectPlaceholderInstant:h,"multiSelect-clearButton":`multiSelect-clearButton_FKs0m`,multiSelectClearButton:g,"multiSelect-icon":`multiSelect-icon_ovLu-`,multiSelectIcon:_,"multiSelect-icon-open":`multiSelect-icon-open_h8VAu`,multiSelectIconOpen:v,"multiSelect-disabled":`multiSelect-disabled_Hm8mv`,multiSelectDisabled:y,"multiSelect-panel":`multiSelect-panel_VX7gU`,multiSelectPanel:b,"multiSelect-search":`multiSelect-search_g4OHX`,multiSelectSearch:x,"multiSelect-options":`multiSelect-options_MGZCv`,multiSelectOptions:S,"multiSelect-option":`multiSelect-option_hbvPY`,multiSelectOption:C,"multiSelect-option-active":`multiSelect-option-active_mSWFG`,multiSelectOptionActive:w,"multiSelect-option-selected":`multiSelect-option-selected_mjPq-`,multiSelectOptionSelected:T,"multiSelect-option-disabled":`multiSelect-option-disabled_qSgYz`,multiSelectOptionDisabled:E,"multiSelect-optionCheck":`multiSelect-optionCheck_-YKoj`,multiSelectOptionCheck:D,"multiSelect-optionLabel":`multiSelect-optionLabel_CFZke`,multiSelectOptionLabel:O,"multiSelect-empty":`multiSelect-empty_MjABY`,multiSelectEmpty:k};export{A as default,e as multiSelect,d as multiSelectChip,g as multiSelectClearButton,l as multiSelectControl,y as multiSelectDisabled,k as multiSelectEmpty,m as multiSelectFadeIn,i as multiSelectFieldset,o as multiSelectFieldsetError,a as multiSelectFieldsetFocused,s as multiSelectFieldsetLegend,c as multiSelectFieldsetLegendActive,_ as multiSelectIcon,v as multiSelectIconOpen,n as multiSelectLabel,r as multiSelectLabelFloating,C as multiSelectOption,w as multiSelectOptionActive,D as multiSelectOptionCheck,E as multiSelectOptionDisabled,O as multiSelectOptionLabel,T as multiSelectOptionSelected,S as multiSelectOptions,b as multiSelectPanel,f as multiSelectPlaceholder,h as multiSelectPlaceholderInstant,p as multiSelectPlaceholderShown,x as multiSelectSearch,u as multiSelectValues,t as multiSelectWithLabel};
|
|
2
2
|
//# sourceMappingURL=multiSelect.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiSelect.module.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.module.pcss"],"sourcesContent":[".multiSelect {\n position: relative;\n width: 100%;\n\n /* Input's notch geometry, so both labels float to the same height in a form row. */\n --multi-select-notch-height: 1.75em;\n\n &-label {\n position: absolute;\n left: 7px;\n right: 0;\n top: 50
|
|
1
|
+
{"version":3,"file":"multiSelect.module.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.module.pcss"],"sourcesContent":[".multiSelect {\n position: relative;\n width: 100%;\n\n /* Input's notch geometry, so both labels float to the same height in a form row. */\n --multi-select-notch-height: 1.75em;\n --field-label-offset: 0px;\n\n /* Input's --field-label-offset, for the text only: the resting label and the placeholder. */\n &-withLabel {\n --field-label-offset: 1px;\n }\n\n &-label {\n position: absolute;\n left: 7px;\n right: 0;\n top: calc(50% + var(--field-label-offset));\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n transition: all 0.3s;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n }\n }\n\n /* The field's border lives here, not on the control: the legend has to cut the notch out of it. */\n &-fieldset {\n position: absolute;\n inset: calc(var(--multi-select-notch-height) / -2) 0 0;\n width: 100%;\n margin: 0;\n padding: 0 0 0 8px;\n min-width: 0;\n box-sizing: border-box;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n font-size: 0.8em;\n pointer-events: none;\n user-select: none;\n transition: border-color 0.15s;\n\n &-focused {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-error {\n border-color: var(--error-border-color, var(--error-color));\n }\n\n &-legend {\n display: block;\n\n /* Not taken from the text: an empty span gets no line box, which raised a label-less\n field's border half a notch. */\n height: var(--multi-select-notch-height);\n max-width: 0;\n padding: 0;\n white-space: nowrap;\n transition: max-width 0.2s;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--multi-select-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0;\n }\n }\n }\n\n &-control {\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n box-sizing: border-box;\n width: 100%;\n\n /* Input's container sets the same, and Dropdown's button reaches it through a 1.25 line-height\n plus 14px of padding. Kept as the formula rather than a flat 34px so it still matches them at\n another font size. */\n min-height: var(--multi-select-min-height, calc(1.25em + 14px));\n\n /* No --field-label-offset: unlike text, a chip is a filled box nearly as tall as the field, and\n the eye measures it against the border, not the label. */\n padding: 2px 8px;\n border-radius: var(--default-border-radius);\n background: var(--input-background, var(--background));\n color: var(--text-color);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n /* An outline here would draw a second, un-notched rectangle over the fieldset's border. */\n &:focus-visible {\n outline: none;\n\n .multiSelect-fieldset {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n }\n }\n\n &-values {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n flex: 1;\n min-width: 0;\n }\n\n /* At full size a Chip is nearly as tall as the field, so one row would set the height instead\n of fitting inside it. Shrinking the font shrinks the text and the 1em remove icon together. */\n &-chip {\n max-width: 100%;\n min-width: 0;\n font-size: 0.8em;\n }\n\n /* Faded in on a delay rather than swapped in: the label takes 0.3s to float clear, and showing\n the placeholder as it starts moving puts the two on top of each other. As Input does it. */\n &-placeholder {\n position: absolute;\n left: 8px;\n right: 1.75em;\n top: calc(50% + var(--field-label-offset));\n transform: translateY(-50%);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-shown {\n animation: 0.2s multiSelectFadeIn 0.3s forwards;\n }\n\n /* Nothing to wait for without a label. Must stay after `-shown` to win the specificity tie. */\n &-instant {\n animation-delay: 0s;\n }\n }\n\n @keyframes multiSelectFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n &-clearButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: 22px;\n height: 22px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:hover {\n background: var(--background-accent);\n color: var(--text-color);\n }\n }\n\n &-icon {\n flex: none;\n color: var(--input-icon-color, var(--text-dark));\n transition: transform 0.2s;\n\n &-open {\n transform: rotate(180deg);\n }\n }\n\n &-disabled {\n opacity: 0.5;\n\n .multiSelect-control {\n cursor: default;\n }\n }\n}\n\n/* Portalled, so a sibling of the field rather than a descendant, and not nestable above. */\n.multiSelect-panel {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 180px;\n}\n\n.multiSelect-search {\n flex: none;\n}\n\n.multiSelect-options {\n display: flex;\n flex-direction: column;\n max-height: var(--multi-select-panel-height, 260px);\n overflow-y: auto;\n}\n\n.multiSelect-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &-active {\n background: var(--background-accent);\n }\n\n &-selected {\n color: var(--primary-color);\n font-weight: 600;\n }\n\n &-disabled {\n opacity: 0.45;\n cursor: default;\n pointer-events: none;\n }\n}\n\n.multiSelect-optionCheck {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: 1em;\n color: var(--primary-color);\n}\n\n.multiSelect-optionLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.multiSelect-empty {\n padding: 12px 10px;\n color: var(--text-dark);\n text-align: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .multiSelect-label,\n .multiSelect-icon {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {\n /* Only set when the split layout wraps this input in a flex row. */\n &-split {\n flex: 1;\n min-width: 0;\n }\n}\n\n/* ── Stacked layout: chevrons inside the field's right edge (mouse-oriented) ───────── */\n\n/* Input's `suffix` slot: stretch to the field so the chevrons get its full height. Two classes, to\n outrank Input's one-class suffix rules whichever stylesheet loads first. */\n.numberInput .arrowSuffix {\n align-self: stretch;\n display: flex;\n padding-right: 0;\n
|
|
1
|
+
{"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {\n /* Only set when the split layout wraps this input in a flex row. */\n &-split {\n flex: 1;\n min-width: 0;\n }\n}\n\n/* ── Stacked layout: chevrons inside the field's right edge (mouse-oriented) ───────── */\n\n/* Input's `suffix` slot: stretch to the field so the chevrons get its full height. Two classes, to\n outrank Input's one-class suffix rules whichever stylesheet loads first. */\n.numberInput .arrowSuffix {\n align-self: stretch;\n display: flex;\n padding-right: 0;\n}\n\n.arrows {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n border-left: 1px solid var(--border-color);\n\n /* Sitting flush against the field's edge, the chevrons' background would square off its\n rounded corner, so it is clipped. Read from --group-radius-* like Input's own border, so it\n still flattens inside a ButtonGroup. */\n overflow: hidden;\n border-top-right-radius: var(--group-radius-tr, var(--default-border-radius));\n border-bottom-right-radius: var(--group-radius-br, var(--default-border-radius));\n}\n\n.arrowBtn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0 0.5em;\n\n /* No min-height: the two halves divide the field's own height, so a stepper never makes a\n NumberInput taller than a plain Input. In em, so it tracks the field's text size. */\n min-width: 1.75em;\n font-size: 0.75em;\n line-height: 1;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n /* So a long press reads as a hold, not a text gesture. */\n touch-action: manipulation;\n user-select: none;\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n transition:\n color 0.15s,\n opacity 0.15s;\n\n &:disabled {\n cursor: default;\n opacity: 0.35;\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n\n /* (hover: hover) only — on touch a :hover state latches after a tap until you tap elsewhere.\n\n Colour-only, unlike the --background-accent-light hover surface used elsewhere in the\n library: this button sits flush against .arrows' 1px --border-color divider, and in dark\n palettes those two tokens are close enough in luminance that painting the surface right up\n to the line eats most of the divider's already-low contrast, under the pointer. Tuning the\n hover colour per theme would not hold — the collision is between three tokens (divider,\n hover surface, field background), so any new theme can reintroduce it. The chevron turning\n --primary-color is affordance enough on a target this small. */\n @media (hover: hover) {\n &:hover:not(:disabled) {\n color: var(--primary-color);\n }\n }\n\n &:active:not(:disabled) {\n color: var(--primary-color);\n }\n}\n\n/* ── Split layout: full-height − / + flanking the field (touch-oriented) ───────────── */\n\n/* ButtonGroup is inline-flex; a form field fills its row instead, with the Input taking the\n slack (see .numberInput-split). The class is repeated to beat `.buttonGroup`'s own `display`\n without depending on which CSS module the bundler emits first. */\n.split.split {\n display: flex;\n width: 100%;\n}\n\n/* Two classes, to outrank Button's one-class rules whichever stylesheet loads first. Resting state\n only: Button's hover and press layer tints over it. */\n.split .splitBtn {\n background: var(--input-background);\n color: var(--text-dark);\n border-color: var(--border-color);\n}\n\n.splitBtn {\n flex: 0 0 auto;\n\n /* No fixed height — ButtonGroup stretches these to the field.\n\n The width repeats Input's own height, `calc(1.25em + 14px)` on `.input-container`, to come\n out square at any text size, and must follow it if that changes. `aspect-ratio: 1` cannot do this: a flex item's main size is resolved from\n its content before the stretched cross size exists. */\n align-self: stretch;\n width: calc(1.25em + 14px);\n touch-action: manipulation;\n user-select: none;\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n transition: opacity 0.15s;\n\n &:disabled {\n opacity: 0.35;\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n}\n\n/* One continuous border, so the buttons follow the field's focus and error colours — left grey,\n the group reads as a box inside a box. */\n.split:focus-within .splitBtn {\n border-color: var(--focus-border-color, var(--primary-color));\n}\n\n.split-invalid .splitBtn {\n border-color: var(--error-border-color);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n /* The base is declared here rather than only on the option, so every em below resolves\n against the theme's text size instead of whatever the group happens to sit in. At a 16px\n base these are the 18px dot, 12px row gap and 10px label gap it has always had. */\n font-size: var(--default-font-size);\n\n --custom-radio-size: var(--radio-size, 1.125em);\n --custom-radio-gap: var(--radio-gap, 0.625em);\n\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n width: fit-content;\n\n &-horizontal {\n flex-flow: row wrap;\n gap: 1.25em;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: var(--custom-radio-gap);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n\n &:focus-visible {\n outline: none;\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--custom-radio-size);\n height: var(--custom-radio-size);\n border-radius: 50%;\n border: 0.1125em solid var(--border-color);\n
|
|
1
|
+
{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n /* The base is declared here rather than only on the option, so every em below resolves\n against the theme's text size instead of whatever the group happens to sit in. At a 16px\n base these are the 18px dot, 12px row gap and 10px label gap it has always had. */\n font-size: var(--default-font-size);\n\n --custom-radio-size: var(--radio-size, 1.125em);\n --custom-radio-gap: var(--radio-gap, 0.625em);\n\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n width: fit-content;\n\n &-horizontal {\n flex-flow: row wrap;\n gap: 1.25em;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: var(--custom-radio-gap);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n\n &:focus-visible {\n outline: none;\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--custom-radio-size);\n height: var(--custom-radio-size);\n border-radius: 50%;\n border: 0.1125em solid var(--border-color);\n position: relative;\n margin-top: 0.0625em;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n /* Inset by a transparent border, not centred by flex: border widths snap to whole device\n pixels, so the gap is equal on every side. A flex-centred 9px dot sat 3.5px into the ring and\n rendered a pixel off. 0.1875 leaves a dot of about half the ring. */\n position: absolute;\n inset: 0;\n border: calc(var(--custom-radio-size) * 0.1875) solid transparent;\n border-radius: 50%;\n background-color: var(--primary-color);\n background-clip: padding-box;\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: 0.125em;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .radioGroup-dot {\n transition: none;\n }\n}\n"],"mappings":""}
|