@ahrowe/ui 0.47.1 → 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 +7 -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/menu/menu.module.mjs.map +1 -1
- package/dist/esm/common/multiSelect/multiSelect.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.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
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
|
+
|
|
3
10
|
## 0.47.1
|
|
4
11
|
|
|
5
12
|
### Patch 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 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
|
|
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":"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 +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":""}
|