@ahrowe/ui 0.47.0 → 0.47.2
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 +16 -0
- package/dist/esm/common/accordion/accordion.module.mjs.map +1 -1
- package/dist/esm/common/animatedIcon/animatedIcon.module.mjs.map +1 -1
- package/dist/esm/common/commandPalette/commandPalette.module.mjs.map +1 -1
- package/dist/esm/common/copyButton/copyButton.module.mjs.map +1 -1
- package/dist/esm/common/input/input.module.mjs.map +1 -1
- package/dist/esm/common/menu/menu.module.mjs.map +1 -1
- package/dist/esm/common/multiSelect/multiSelect.module.mjs.map +1 -1
- package/dist/esm/common/numberInput/numberInput.module.mjs +1 -1
- package/dist/esm/common/numberInput/numberInput.module.mjs.map +1 -1
- package/dist/esm/common/rating/rating.module.mjs.map +1 -1
- package/dist/esm/common/tree/tree.module.mjs.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @ahrowe/ui
|
|
2
2
|
|
|
3
|
+
## 0.47.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- d29507d: Search's magnifier and clear icon, and CopyButton's icon, fill their box in apps that load FontAwesome's CSS; 0.47.1's fix could not win from inside the library's cascade layer
|
|
8
|
+
- d29507d: Accordion, CommandPalette, Menu, Rating and Tree icons are 1em wide as designed, instead of FontAwesome's own 1.25em
|
|
9
|
+
|
|
10
|
+
## 0.47.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- 236e8ea: Search's magnifier and clear icon, and CopyButton's icon, keep their size when FontAwesome's stylesheet loads after the library's, as under Vite's dev server, instead of rendering smaller and too high
|
|
15
|
+
- c8d9cda: Fixed CopyButton's hidden status text lengthening the page when the button sits in a scroll container without a positioned ancestor
|
|
16
|
+
- 236e8ea: Input's placeholder and resting label start exactly where the typed text does, instead of 0.5px to its left
|
|
17
|
+
- 236e8ea: Input's suffix, placeholder and resting label share the baseline of the typed text instead of sitting 1px above it
|
|
18
|
+
|
|
3
19
|
## 0.47.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":[".accordion {\n color: var(--text-color);\n\n /* Clips the header's fill and hover layer to the corners; the body clips anyway, for its height\n transition. */\n overflow: hidden;\n\n /* Positioned, so a joined section paints over the one above, whose positioned header would\n otherwise cover the seam where WebKit draws it thinner than the 1px overlap. */\n position: relative;\n\n &-header {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75em;\n padding: 0.75em 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n /* The rest of the accordion measures from the header, so the base is set here. */\n font-size: var(--default-font-size);\n\n /* A layer in currentcolor, so it shows on a fill as on nothing: a Light header already uses\n the background. */\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: currentcolor;\n opacity: 0;\n transition: opacity 0.15s;\n pointer-events: none;\n }\n\n /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.06;\n }\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n /* Positioned, so they paint above the hover layer, which is positioned too and comes first. */\n &-title {\n position: relative;\n flex: 1;\n min-width: 0;\n }\n\n &-icon {\n position: relative;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n transition: transform 0.2s;\n\n &-active {\n transform: rotate(180deg);\n }\n }\n\n &-body {\n overflow: hidden;\n position: relative;\n transition: height 0.2s ease;\n\n &-inner {\n padding: 1em;\n }\n }\n\n /* --accordion-seam is the line a joined section draws where it meets the one above. */\n &-style {\n &-light {\n /* The page colour: the border is the tint itself, so a seam in it would merge two tinted\n headers into one block. */\n --accordion-seam: var(--background);\n\n border: 1px solid var(--tone-light);\n border-radius: var(--default-border-radius);\n }\n\n &-outlined {\n --accordion-seam: var(--tone-outline);\n\n border: 1px solid var(--tone-outline);\n border-radius: var(--default-border-radius);\n }\n }\n\n &-style-light &-header {\n background: var(--tone-light);\n color: var(--tone-text);\n }\n\n &-style-outlined &-header,\n &-style-plain &-header {\n color: var(--tone-text);\n }\n\n /* Plain sits inside other content: no padding, so no hover layer, and the focus ring goes\n outside the text rather than over it. */\n &-style-plain &-header {\n padding: 0;\n\n &::before {\n display: none;\n }\n\n &:focus-visible {\n outline-offset: 2px;\n }\n }\n\n &-style-plain &-body-inner {\n padding: 0.375em 0 0;\n }\n\n & + & {\n margin-top: 0.5em;\n }\n\n /* Each joined section overlaps the one above by its 1px border, and that one hides (not removes)\n its bottom border: a 1px gap or two borders snap to different device pixels at fractional zoom.\n Ties `& + &` on specificity, so it stays after it. Firefox before 121 lacks :has(). */\n &-joined + &-joined {\n margin-top: -1px;\n border-top-color: var(--accordion-seam);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n &-style-plain&-joined + &-style-plain&-joined {\n margin-top: 0;\n }\n\n &-joined:has(+ &-joined) {\n border-bottom-color: transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-body,\n .accordion-icon {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":[".accordion {\n color: var(--text-color);\n\n /* Clips the header's fill and hover layer to the corners; the body clips anyway, for its height\n transition. */\n overflow: hidden;\n\n /* Positioned, so a joined section paints over the one above, whose positioned header would\n otherwise cover the seam where WebKit draws it thinner than the 1px overlap. */\n position: relative;\n\n &-header {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75em;\n padding: 0.75em 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n /* The rest of the accordion measures from the header, so the base is set here. */\n font-size: var(--default-font-size);\n\n /* A layer in currentcolor, so it shows on a fill as on nothing: a Light header already uses\n the background. */\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: currentcolor;\n opacity: 0;\n transition: opacity 0.15s;\n pointer-events: none;\n }\n\n /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.06;\n }\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n /* Positioned, so they paint above the hover layer, which is positioned too and comes first. */\n &-title {\n position: relative;\n flex: 1;\n min-width: 0;\n }\n\n &-icon {\n /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n reads this instead. `width` still sizes a custom icon. */\n --fa-width: 1em;\n\n position: relative;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n transition: transform 0.2s;\n\n &-active {\n transform: rotate(180deg);\n }\n }\n\n &-body {\n overflow: hidden;\n position: relative;\n transition: height 0.2s ease;\n\n &-inner {\n padding: 1em;\n }\n }\n\n /* --accordion-seam is the line a joined section draws where it meets the one above. */\n &-style {\n &-light {\n /* The page colour: the border is the tint itself, so a seam in it would merge two tinted\n headers into one block. */\n --accordion-seam: var(--background);\n\n border: 1px solid var(--tone-light);\n border-radius: var(--default-border-radius);\n }\n\n &-outlined {\n --accordion-seam: var(--tone-outline);\n\n border: 1px solid var(--tone-outline);\n border-radius: var(--default-border-radius);\n }\n }\n\n &-style-light &-header {\n background: var(--tone-light);\n color: var(--tone-text);\n }\n\n &-style-outlined &-header,\n &-style-plain &-header {\n color: var(--tone-text);\n }\n\n /* Plain sits inside other content: no padding, so no hover layer, and the focus ring goes\n outside the text rather than over it. */\n &-style-plain &-header {\n padding: 0;\n\n &::before {\n display: none;\n }\n\n &:focus-visible {\n outline-offset: 2px;\n }\n }\n\n &-style-plain &-body-inner {\n padding: 0.375em 0 0;\n }\n\n & + & {\n margin-top: 0.5em;\n }\n\n /* Each joined section overlaps the one above by its 1px border, and that one hides (not removes)\n its bottom border: a 1px gap or two borders snap to different device pixels at fractional zoom.\n Ties `& + &` on specificity, so it stays after it. Firefox before 121 lacks :has(). */\n &-joined + &-joined {\n margin-top: -1px;\n border-top-color: var(--accordion-seam);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n &-style-plain&-joined + &-style-plain&-joined {\n margin-top: 0;\n }\n\n &-joined:has(+ &-joined) {\n border-bottom-color: transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-body,\n .accordion-icon {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animatedIcon.module.mjs","names":[],"sources":["../../../../package/common/animatedIcon/animatedIcon.module.pcss"],"sourcesContent":[".animatedIcon {\n position: relative;\n display: inline-block;\n width: 1em;\n height: 1em;\n\n /* Fab's original technique: a single shared rotation on the whole icon, not per layer — both\n the outgoing and incoming icon sit at the exact same angle at every instant, only their\n opacity differs, which is what makes the spin read as one coherent piece rather than two\n icons independently rotating past each other. Always a further full turn per step (not\n Fab's 225°, which only worked there because its \"+\" icon looks identical rotated 45°) so an\n arbitrary icon always lands back upright, no matter how many times it's toggled. A real\n `transition`, so retapping mid-spin reverses smoothly from wherever it currently is instead\n of snapping. */\n &-spin {\n transition: transform var(--animated-icon-duration, 200ms) ease;\n transform: rotate(var(--animated-icon-spin-rotation, 0deg));\n\n /* The wrapper alone carries the rotation in this variant — the two layers underneath it\n only need to crossfade, not rotate individually. */\n .animatedIcon-layer {\n &:first-child,\n &:last-child {\n transform: none;\n }\n }\n }\n\n /* Two layers, always both mounted — never conditionally rendered. A `transition` only\n retargets smoothly when the property changes on an element already on screen; a freshly-\n mounted element with its \"final\" state applied in the same paint has no \"from\" state to\n animate from. Keeping both layers permanently in the DOM (like Fab does) and only ever\n toggling which one is `-front` is what makes this cancel cleanly mid-transition instead of\n jumping or finishing a stale animation. */\n &-layer {\n position: absolute;\n inset: 0;\n width: 100
|
|
1
|
+
{"version":3,"file":"animatedIcon.module.mjs","names":[],"sources":["../../../../package/common/animatedIcon/animatedIcon.module.pcss"],"sourcesContent":[".animatedIcon {\n position: relative;\n display: inline-block;\n width: 1em;\n height: 1em;\n\n /* Fab's original technique: a single shared rotation on the whole icon, not per layer — both\n the outgoing and incoming icon sit at the exact same angle at every instant, only their\n opacity differs, which is what makes the spin read as one coherent piece rather than two\n icons independently rotating past each other. Always a further full turn per step (not\n Fab's 225°, which only worked there because its \"+\" icon looks identical rotated 45°) so an\n arbitrary icon always lands back upright, no matter how many times it's toggled. A real\n `transition`, so retapping mid-spin reverses smoothly from wherever it currently is instead\n of snapping. */\n &-spin {\n transition: transform var(--animated-icon-duration, 200ms) ease;\n transform: rotate(var(--animated-icon-spin-rotation, 0deg));\n\n /* The wrapper alone carries the rotation in this variant — the two layers underneath it\n only need to crossfade, not rotate individually. */\n .animatedIcon-layer {\n &:first-child,\n &:last-child {\n transform: none;\n }\n }\n }\n\n /* Two layers, always both mounted — never conditionally rendered. A `transition` only\n retargets smoothly when the property changes on an element already on screen; a freshly-\n mounted element with its \"final\" state applied in the same paint has no \"from\" state to\n animate from. Keeping both layers permanently in the DOM (like Fab does) and only ever\n toggling which one is `-front` is what makes this cancel cleanly mid-transition instead of\n jumping or finishing a stale animation. */\n &-layer {\n position: absolute;\n inset: 0;\n\n /* FontAwesome's unlayered `height: 1em` outranks anything short of !important from inside the\n library's layer, and has no variable to set instead. */\n width: 100% !important;\n height: 100% !important;\n opacity: 0;\n transition:\n opacity var(--animated-icon-duration, 200ms) ease,\n transform var(--animated-icon-duration, 200ms) ease;\n\n /* Fixed per-layer resting pose (not per-toggle) — the first layer always approaches/leaves\n through +90°, the second always through -90°, so which direction a given swap rotates in\n depends only on which layer is taking over, the same way Fab's own icon always rotates\n between two fixed angles rather than accumulating. */\n &:first-child {\n transform: rotate(90deg) scale(0.5);\n\n &.animatedIcon-layer-front {\n transform: none;\n }\n }\n\n &:last-child {\n transform: rotate(-90deg) scale(0.5);\n\n &.animatedIcon-layer-front {\n transform: none;\n }\n }\n\n &-front {\n opacity: 1;\n }\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .animatedIcon-spin,\n .animatedIcon-layer {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"commandPalette.module.mjs","names":[],"sources":["../../../../package/common/commandPalette/commandPalette.module.pcss"],"sourcesContent":[".commandPalette {\n --modal-padding: var(--spacing-s);\n --modal-body-bleed: 0;\n\n width: 640px;\n\n /* Near the top rather than centred, so the panel does not jump as the list shrinks while\n typing. A sheet overrides both with its own doubled selector. */\n align-self: flex-start;\n margin-top: 12vh;\n\n &-search {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n padding: var(--spacing-s) var(--spacing-m);\n border-bottom: 1px solid var(--border-color);\n\n &-icon {\n flex: none;\n color: var(--text-light);\n }\n }\n\n &-input {\n flex: 1;\n min-width: 0;\n padding: 4px 0;\n border: none;\n outline: none;\n background: transparent;\n font: inherit;\n font-size: 1.1em;\n color: var(--text-color);\n\n &::placeholder {\n color: var(--text-light);\n }\n }\n\n &-list {\n max-height: min(24rem, 60vh);\n max-height: min(24rem, 60dvh);\n overflow-y: auto;\n padding: 4px 0;\n\n &:empty {\n display: none;\n }\n }\n\n &-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n /* Same token as Menu's highlight: `--background-accent-light` matches the modal surface in\n the default theme. */\n &-active {\n background: var(--background-accent);\n }\n\n &-danger {\n color: var(--error-color);\n }\n\n &-disabled {\n opacity: 0.45;\n cursor: default;\n }\n\n &-icon {\n flex: none;\n width: 1em;\n text-align: center;\n }\n\n &-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &-shortcut {\n flex: none;\n margin-left: 16px;\n font-size: 0.85em;\n color: var(--text-light);\n }\n }\n\n &-heading {\n padding: 10px 12px 4px;\n font-size: 0.8em;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-light);\n }\n\n &-separator {\n height: 1px;\n margin: 4px 0;\n background: var(--border-color);\n }\n\n &-empty {\n padding: var(--spacing-l) var(--spacing-m);\n text-align: center;\n color: var(--text-light);\n }\n\n &-status {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n overflow: hidden;\n white-space: nowrap;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"commandPalette.module.mjs","names":[],"sources":["../../../../package/common/commandPalette/commandPalette.module.pcss"],"sourcesContent":[".commandPalette {\n --modal-padding: var(--spacing-s);\n --modal-body-bleed: 0;\n\n width: 640px;\n\n /* Near the top rather than centred, so the panel does not jump as the list shrinks while\n typing. A sheet overrides both with its own doubled selector. */\n align-self: flex-start;\n margin-top: 12vh;\n\n &-search {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n padding: var(--spacing-s) var(--spacing-m);\n border-bottom: 1px solid var(--border-color);\n\n &-icon {\n flex: none;\n color: var(--text-light);\n }\n }\n\n &-input {\n flex: 1;\n min-width: 0;\n padding: 4px 0;\n border: none;\n outline: none;\n background: transparent;\n font: inherit;\n font-size: 1.1em;\n color: var(--text-color);\n\n &::placeholder {\n color: var(--text-light);\n }\n }\n\n &-list {\n max-height: min(24rem, 60vh);\n max-height: min(24rem, 60dvh);\n overflow-y: auto;\n padding: 4px 0;\n\n &:empty {\n display: none;\n }\n }\n\n &-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n /* Same token as Menu's highlight: `--background-accent-light` matches the modal surface in\n the default theme. */\n &-active {\n background: var(--background-accent);\n }\n\n &-danger {\n color: var(--error-color);\n }\n\n &-disabled {\n opacity: 0.45;\n cursor: default;\n }\n\n &-icon {\n /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n reads this instead. `width` still sizes a custom icon. */\n --fa-width: 1em;\n\n flex: none;\n width: 1em;\n text-align: center;\n }\n\n &-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &-shortcut {\n flex: none;\n margin-left: 16px;\n font-size: 0.85em;\n color: var(--text-light);\n }\n }\n\n &-heading {\n padding: 10px 12px 4px;\n font-size: 0.8em;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-light);\n }\n\n &-separator {\n height: 1px;\n margin: 4px 0;\n background: var(--border-color);\n }\n\n &-empty {\n padding: var(--spacing-l) var(--spacing-m);\n text-align: center;\n color: var(--text-light);\n }\n\n &-status {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n overflow: hidden;\n white-space: nowrap;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyButton.module.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.module.pcss"],"sourcesContent":[".copyButton-status {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n overflow: hidden;\n white-space: nowrap;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"copyButton.module.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.module.pcss"],"sourcesContent":["/* Pinned to a corner because the span has no root of its own to sit in: left at its static\n position, its containing block can be the page, and inside a scroll container that left\n empty page to scroll through below it. */\n.copyButton-status {\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n overflow: hidden;\n white-space: nowrap;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["/* Chrome fills a field on page load without firing anything React can see, and an animation\n bound to the pseudo-class is the only hook it offers. The declarations are inert on purpose;\n the pair exists to be listened for — see handleAutofillAnimation in input.tsx. */\n@keyframes inputAutofillStart {\n from {\n opacity: 1;\n }\n}\n\n@keyframes inputAutofillEnd {\n from {\n opacity: 1;\n }\n}\n\n.required-mark {\n padding: 0 0 0 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n\n --input-notch-height: 1.75em;\n --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n\n /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n --input-radius: var(--group-radius-tl, var(--default-border-radius))\n var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n var(--group-radius-bl, var(--default-border-radius));\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\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\n &-floating {\n inset: 0 0 auto 14px;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--input-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\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(--input-notch-height);\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0;\n }\n }\n }\n\n &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n\n /* Matches the textarea's padding-top, so they sit on its first line. */\n .input-field-icon,\n .input-field-suffix {\n margin-top: 4px;\n }\n }\n\n /* Not on the textarea, whose grip would sit beside the icons. The textarea's\n align-self: stretch is what makes it follow. */\n &-resizable {\n resize: vertical;\n }\n\n /* On the container, not the field, so it reaches under the icons and the suffix too. */\n &-disabled {\n background-color: var(--disabled-input-color);\n }\n\n &-border {\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--focus-border-color, var(--primary-color));\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n /* Chrome overrides `background` and `color` on an autofilled field outright. Clipping the\n background to the glyphs is what removes it: the page cannot win on colour, but it can\n say where a background paints, and -webkit-text-fill-color then beats the text colour.\n The field is transparent either way, so what shows through is whatever is really behind\n it — no surface has to declare itself, which an inset-shadow cover-up would have needed. */\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n animation-name: inputAutofillStart;\n animation-duration: 1ms;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: var(--text-color);\n caret-color: var(--text-color);\n }\n\n &:not(:-webkit-autofill) {\n animation-name: inputAutofillEnd;\n animation-duration: 1ms;\n }\n\n /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n /* The left icon's margins carry the gap, so the text starts exactly at --input-icon-gutter,\n where the label, the placeholder and the notch are drawn. */\n &-withIcon-left {\n padding-left: 0 !important;\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: var(--input-icon-color);\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n align-self: stretch;\n overflow-y: auto;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n outline: none;\n flex: none;\n margin-right: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n\n &-left {\n margin-left: var(--input-icon-offset);\n margin-right: calc(var(--input-icon-gutter) - var(--input-icon-offset) - var(--input-icon-size));\n }\n\n &-notClickable {\n pointer-events: none;\n }\n\n &-clear {\n transition: 0.15s ease-out;\n transition-property: width, margin-right, opacity;\n\n &-hidden {\n width: 0 !important;\n margin-right: 0;\n opacity: 0;\n visibility: hidden;\n\n /* Only on the way out: visibility holds at visible until the fade has played. */\n transition-property: width, margin-right, opacity, visibility;\n }\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 0.5;\n }\n }\n}\n\n/* The label's glide between resting and floating is the motion; it still moves, just instantly.\n The clear button keeps its fade, while the suffix beside it jumps instead of sliding. */\n@media (prefers-reduced-motion: reduce) {\n .input-matLabel,\n .input-placeholder {\n transition: none;\n }\n\n .input-field-icon-clear {\n transition-property: opacity, visibility;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["/* Chrome fills a field on page load without firing anything React can see, and an animation\n bound to the pseudo-class is the only hook it offers. The declarations are inert on purpose;\n the pair exists to be listened for — see handleAutofillAnimation in input.tsx. */\n@keyframes inputAutofillStart {\n from {\n opacity: 1;\n }\n}\n\n@keyframes inputAutofillEnd {\n from {\n opacity: 1;\n }\n}\n\n.required-mark {\n padding: 0 0 0 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n\n --input-notch-height: 1.75em;\n --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n\n /* Uneven so that capitals and digits look centred, which leaves the line box 1px low. Icons centre\n on the field like the glyphs do; text beside the value (suffix, placeholder, resting label)\n moves down by half the difference to share its baseline. */\n --input-padding-top: 8px;\n --input-padding-bottom: 6px;\n\n /* Where the text starts, and so where the placeholder and the resting label start too. */\n --input-padding-inline: 7.5px;\n\n /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n --input-radius: var(--group-radius-tl, var(--default-border-radius))\n var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n var(--group-radius-bl, var(--default-border-radius));\n\n &-placeholder {\n position: absolute;\n top: calc(50% + (var(--input-padding-top) - var(--input-padding-bottom)) / 2);\n left: var(--input-padding-inline);\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: var(--input-padding-inline);\n right: 0;\n top: calc(50% + (var(--input-padding-top) - var(--input-padding-bottom)) / 2);\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\n &-floating {\n inset: 0 0 auto 14px;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--input-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\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(--input-notch-height);\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0;\n }\n }\n }\n\n &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n\n /* Matches the textarea's padding-top, so they sit on its first line. */\n .input-field-icon,\n .input-field-suffix {\n margin-top: 4px;\n }\n }\n\n /* Not on the textarea, whose grip would sit beside the icons. The textarea's\n align-self: stretch is what makes it follow. */\n &-resizable {\n resize: vertical;\n }\n\n /* On the container, not the field, so it reaches under the icons and the suffix too. */\n &-disabled {\n background-color: var(--disabled-input-color);\n }\n\n &-border {\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--focus-border-color, var(--primary-color));\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n /* Chrome overrides `background` and `color` on an autofilled field outright. Clipping the\n background to the glyphs is what removes it: the page cannot win on colour, but it can\n say where a background paints, and -webkit-text-fill-color then beats the text colour.\n The field is transparent either way, so what shows through is whatever is really behind\n it — no surface has to declare itself, which an inset-shadow cover-up would have needed. */\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n animation-name: inputAutofillStart;\n animation-duration: 1ms;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: var(--text-color);\n caret-color: var(--text-color);\n }\n\n &:not(:-webkit-autofill) {\n animation-name: inputAutofillEnd;\n animation-duration: 1ms;\n }\n\n /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n /* The left icon's margins carry the gap, so the text starts exactly at --input-icon-gutter,\n where the label, the placeholder and the notch are drawn. */\n &-withIcon-left {\n padding-left: 0 !important;\n }\n\n &-suffix {\n margin-top: calc(var(--input-padding-top) - var(--input-padding-bottom));\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: var(--input-icon-color);\n }\n }\n\n &-default {\n padding: var(--input-padding-top) var(--input-padding-inline) var(--input-padding-bottom);\n }\n\n &[disabled] {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n align-self: stretch;\n overflow-y: auto;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n outline: none;\n flex: none;\n margin-right: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n\n &-left {\n margin-left: var(--input-icon-offset);\n margin-right: calc(var(--input-icon-gutter) - var(--input-icon-offset) - var(--input-icon-size));\n }\n\n &-notClickable {\n pointer-events: none;\n }\n\n &-clear {\n transition: 0.15s ease-out;\n transition-property: width, margin-right, opacity;\n\n &-hidden {\n width: 0 !important;\n margin-right: 0;\n opacity: 0;\n visibility: hidden;\n\n /* Only on the way out: visibility holds at visible until the fade has played. */\n transition-property: width, margin-right, opacity, visibility;\n }\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 0.5;\n }\n }\n}\n\n/* The label's glide between resting and floating is the motion; it still moves, just instantly.\n The clear button keeps its fade, while the suffix beside it jumps instead of sliding. */\n@media (prefers-reduced-motion: reduce) {\n .input-matLabel,\n .input-placeholder {\n transition: none;\n }\n\n .input-field-icon-clear {\n transition-property: opacity, visibility;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.module.mjs","names":[],"sources":["../../../../package/common/menu/menu.module.pcss"],"sourcesContent":[".menuPanel {\n padding: 0;\n}\n\n.menu {\n display: flex;\n flex-direction: column;\n min-width: 180px;\n padding: 4px 0;\n box-sizing: border-box;\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n color: var(--text-color);\n\n /* Chrome (background, shadow, radius, positioning) comes from the Popover panel\n this renders inside — keep only the list itself here. */\n\n &-trigger {\n /* The trigger is only here to give Escape somewhere to return the focus to;\n it must not become a box of its own in the consumer's layout. */\n display: contents;\n }\n\n &-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 8px 12px;\n border: none;\n background: none;\n font: inherit;\n color: inherit;\n text-align: left;\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n box-sizing: border-box;\n transition: background 0.1s;\n\n /* `:focus`, not `:focus-visible`: the entry with the focus is the one the\n arrow keys are on, and it has to look like it whether the menu was opened\n by keyboard or by mouse. `:focus-visible` would stay dark after a click on\n the trigger, because the browser does not count that as keyboard input.\n\n Not `--background-accent-light`: the panel under this list is\n `--background-modal`, and the default theme gives both the same colour, so\n the highlight was invisible. Dropdown and MultiSelect pick this one too. */\n &:hover:not(:disabled),\n &:focus {\n background: var(--background-accent);\n }\n\n /* The ring would sit on top of the neighbouring rows' backgrounds; the row\n highlight above is what marks the active entry. */\n &:focus {\n outline: none;\n }\n\n &:disabled {\n opacity: 0.45;\n cursor: default;\n }\n\n &-danger {\n color: var(--error-color);\n }\n\n &-icon {\n flex: none;\n width: 1em;\n text-align: center;\n }\n\n &-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &-shortcut {\n flex: none;\n margin-left: 16px;\n font-size: 0.85em;\n color: var(--text-light);\n }\n }\n\n &-separator {\n height: 1px;\n margin: 4px 0;\n background: var(--border-color);\n }\n\n &-heading {\n padding: 6px 12px 2px;\n font-size: 0.8em;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-light);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"menu.module.mjs","names":[],"sources":["../../../../package/common/menu/menu.module.pcss"],"sourcesContent":[".menuPanel {\n padding: 0;\n}\n\n.menu {\n display: flex;\n flex-direction: column;\n min-width: 180px;\n padding: 4px 0;\n box-sizing: border-box;\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n color: var(--text-color);\n\n /* Chrome (background, shadow, radius, positioning) comes from the Popover panel\n this renders inside — keep only the list itself here. */\n\n &-trigger {\n /* The trigger is only here to give Escape somewhere to return the focus to;\n it must not become a box of its own in the consumer's layout. */\n display: contents;\n }\n\n &-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 8px 12px;\n border: none;\n background: none;\n font: inherit;\n color: inherit;\n text-align: left;\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n box-sizing: border-box;\n transition: background 0.1s;\n\n /* `:focus`, not `:focus-visible`: the entry with the focus is the one the\n arrow keys are on, and it has to look like it whether the menu was opened\n by keyboard or by mouse. `:focus-visible` would stay dark after a click on\n the trigger, because the browser does not count that as keyboard input.\n\n Not `--background-accent-light`: the panel under this list is\n `--background-modal`, and the default theme gives both the same colour, so\n the highlight was invisible. Dropdown and MultiSelect pick this one too. */\n &:hover:not(:disabled),\n &:focus {\n background: var(--background-accent);\n }\n\n /* The ring would sit on top of the neighbouring rows' backgrounds; the row\n highlight above is what marks the active entry. */\n &:focus {\n outline: none;\n }\n\n &:disabled {\n opacity: 0.45;\n cursor: default;\n }\n\n &-danger {\n color: var(--error-color);\n }\n\n &-icon {\n /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n reads this instead. `width` still sizes a custom icon. */\n --fa-width: 1em;\n\n flex: none;\n width: 1em;\n text-align: center;\n }\n\n &-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &-shortcut {\n flex: none;\n margin-left: 16px;\n font-size: 0.85em;\n color: var(--text-light);\n }\n }\n\n &-separator {\n height: 1px;\n margin: 4px 0;\n background: var(--border-color);\n }\n\n &-heading {\n padding: 6px 12px 2px;\n font-size: 0.8em;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-light);\n }\n}\n"],"mappings":""}
|
|
@@ -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%;\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 and Dropdown both resolve to this: a 1.25 line-height plus 14px of padding. Kept as\n the formula rather than a flat 34px so it still matches them at another font size. */\n min-height: var(--multi-select-min-height, calc(1.25em + 14px));\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
|
|
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%;\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 and Dropdown both resolve to this: a 1.25 line-height plus 14px of padding. Kept as\n the formula rather than a flat 34px so it still matches them at another font size. */\n min-height: var(--multi-select-min-height, calc(1.25em + 14px));\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: 50%;\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,2 +1,2 @@
|
|
|
1
|
-
"use client";var e=`numberInput-split_1kFLr`,t=`
|
|
1
|
+
"use client";var e=`numberInput-split_1kFLr`,t=`numberInput_7p2O3`,n=`arrowSuffix_QECPG`,r=`arrows_yjRlc`,i=`arrowBtn_DbJoa`,a=`split_FYvfQ`,o=`splitBtn_MquuB`,s=`split-invalid_F94dA`,c={"numberInput-split":`numberInput-split_1kFLr`,numberInputSplit:e,numberInput:t,arrowSuffix:n,arrows:r,arrowBtn:i,split:a,splitBtn:o,"split-invalid":`split-invalid_F94dA`,splitInvalid:s};export{i as arrowBtn,n as arrowSuffix,r as arrows,c as default,t as numberInput,e as numberInputSplit,a as split,o as splitBtn,s as splitInvalid};
|
|
2
2
|
//# sourceMappingURL=numberInput.module.mjs.map
|
|
@@ -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. */\n.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 formula (`line-height: 1.25` plus the 8px/6px padding\n of `.input-field-default`) to come out square at any text size, and must follow it if that\n padding 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
|
+
{"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 margin-top: 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 formula (`line-height: 1.25` plus the 8px/6px padding\n of `.input-field-default`) to come out square at any text size, and must follow it if that\n padding 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":"rating.module.mjs","names":[],"sources":["../../../../package/common/rating/rating.module.pcss"],"sourcesContent":[".rating {\n /* calc, not em: this is the element that sets the base, so an em here would measure\n whatever the rating happens to sit in instead of the theme's text size. */\n --custom-rating-size: var(--rating-size, calc(var(--default-font-size) * 1.25));\n\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n width: fit-content;\n gap: 0.15em;\n font-size: var(--custom-rating-size);\n outline: none;\n touch-action: pan-y;\n user-select: none;\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-lighter);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-disabled,\n &-readOnly {\n pointer-events: none;\n }\n\n &-item {\n position: relative;\n display: inline-flex;\n width: 1em;\n height: 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-iconEmpty {\n width: 1em;\n height: 1em;\n color: var(--rating-empty-color, var(--background-accent-light));\n }\n\n &-iconFilledClip {\n position: absolute;\n top: 0;\n left: 0;\n\n /* flex, so the icon is not an inline box: on a baseline it sat a fraction of a pixel below\n the empty icon behind it, which the clip then cut off the bottom of. */\n display: flex;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-iconFilled {\n width: 1em;\n height: 1em;\n\n /* The clip is narrower than a star at a partial fill. An `svg` refuses to shrink, but `icon`\n takes any element, and a wrapped one would be squeezed rather than clipped. */\n flex-shrink: 0;\n color: var(--rating-filled-color, var(--primary-color));\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"rating.module.mjs","names":[],"sources":["../../../../package/common/rating/rating.module.pcss"],"sourcesContent":[".rating {\n /* calc, not em: this is the element that sets the base, so an em here would measure\n whatever the rating happens to sit in instead of the theme's text size. */\n --custom-rating-size: var(--rating-size, calc(var(--default-font-size) * 1.25));\n\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n width: fit-content;\n gap: 0.15em;\n font-size: var(--custom-rating-size);\n outline: none;\n touch-action: pan-y;\n user-select: none;\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-lighter);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-disabled,\n &-readOnly {\n pointer-events: none;\n }\n\n &-item {\n position: relative;\n display: inline-flex;\n width: 1em;\n height: 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-iconEmpty {\n /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n reads this instead. `width` still sizes a custom icon. */\n --fa-width: 1em;\n\n width: 1em;\n height: 1em;\n color: var(--rating-empty-color, var(--background-accent-light));\n }\n\n &-iconFilledClip {\n position: absolute;\n top: 0;\n left: 0;\n\n /* flex, so the icon is not an inline box: on a baseline it sat a fraction of a pixel below\n the empty icon behind it, which the clip then cut off the bottom of. */\n display: flex;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-iconFilled {\n --fa-width: 1em;\n\n width: 1em;\n height: 1em;\n\n /* The clip is narrower than a star at a partial fill. An `svg` refuses to shrink, but `icon`\n takes any element, and a wrapped one would be squeezed rather than clipped. */\n flex-shrink: 0;\n color: var(--rating-filled-color, var(--primary-color));\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.module.mjs","names":[],"sources":["../../../../package/common/tree/tree.module.pcss"],"sourcesContent":[".tree {\n display: flex;\n flex-direction: column;\n width: 100%;\n color: var(--text-color);\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-node {\n display: flex;\n align-items: center;\n gap: 6px;\n box-sizing: border-box;\n min-height: var(--tree-node-height, 32px);\n padding-right: 8px;\n border-radius: var(--default-border-radius);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n\n &:hover {\n background: var(--background-accent);\n }\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &-selected {\n background: var(--tree-selected-background, var(--primary-color));\n color: var(--tree-selected-color, var(--text-on-primary));\n\n &:hover {\n background: var(--tree-selected-background, var(--primary-color));\n }\n\n &:focus-visible {\n outline-color: var(--tree-selected-color, var(--text-on-primary));\n }\n }\n\n &-disabled {\n opacity: 0.5;\n cursor: default;\n\n &:hover {\n background: transparent;\n }\n }\n }\n\n &-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: 1.25em;\n height: 1.25em;\n font-size: 0.8em;\n border-radius: 50%;\n transition: transform 0.15s;\n\n &-open {\n transform: rotate(90deg);\n }\n\n /* Kept in the layout rather than removed, so leaf labels line up with their siblings'. */\n &-hidden {\n visibility: hidden;\n }\n }\n\n &-icon {\n flex: none;\n width: 1em;\n }\n\n &-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-empty {\n padding: 12px 8px;\n color: var(--text-dark);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tree-toggle {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"tree.module.mjs","names":[],"sources":["../../../../package/common/tree/tree.module.pcss"],"sourcesContent":[".tree {\n display: flex;\n flex-direction: column;\n width: 100%;\n color: var(--text-color);\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-node {\n display: flex;\n align-items: center;\n gap: 6px;\n box-sizing: border-box;\n min-height: var(--tree-node-height, 32px);\n padding-right: 8px;\n border-radius: var(--default-border-radius);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n\n &:hover {\n background: var(--background-accent);\n }\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &-selected {\n background: var(--tree-selected-background, var(--primary-color));\n color: var(--tree-selected-color, var(--text-on-primary));\n\n &:hover {\n background: var(--tree-selected-background, var(--primary-color));\n }\n\n &:focus-visible {\n outline-color: var(--tree-selected-color, var(--text-on-primary));\n }\n }\n\n &-disabled {\n opacity: 0.5;\n cursor: default;\n\n &:hover {\n background: transparent;\n }\n }\n }\n\n &-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: 1.25em;\n height: 1.25em;\n font-size: 0.8em;\n border-radius: 50%;\n transition: transform 0.15s;\n\n &-open {\n transform: rotate(90deg);\n }\n\n /* Kept in the layout rather than removed, so leaf labels line up with their siblings'. */\n &-hidden {\n visibility: hidden;\n }\n }\n\n &-icon {\n /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n reads this instead. `width` still sizes a custom icon. */\n --fa-width: 1em;\n\n flex: none;\n width: 1em;\n }\n\n &-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-empty {\n padding: 12px 8px;\n color: var(--text-dark);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tree-toggle {\n transition: none;\n }\n}\n"],"mappings":""}
|