@sbb-esta/lyne-elements-dev 4.8.1-dev.1774279338 → 4.9.0-dev.1774283352
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/core/styles/core.scss +4 -0
- package/core.css +6 -0
- package/development/popover/popover.component.js +1 -1
- package/development/popover.component-dRXm7_Mv.js +736 -0
- package/development/popover.js +1 -1
- package/development/popover.pure.js +1 -1
- package/off-brand-theme.css +6 -0
- package/package.json +2 -2
- package/popover/popover.component.js +1 -1
- package/{popover.component-BpxBMLI-.js → popover.component-H1g1e1o9.js} +2 -2
- package/popover.js +1 -1
- package/popover.pure.js +1 -1
- package/safety-theme.css +6 -0
- package/standard-theme.css +6 -0
- package/development/popover.component-DCJdrVsB.js +0 -746
package/development/popover.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-
|
|
1
|
+
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-dRXm7_Mv.js";
|
|
2
2
|
import "./popover.pure.js";
|
|
3
3
|
//#region src/elements/popover.ts
|
|
4
4
|
/** @entrypoint */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-
|
|
1
|
+
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-dRXm7_Mv.js";
|
|
2
2
|
export { SbbPopoverBaseElement, SbbPopoverElement };
|
package/off-brand-theme.css
CHANGED
|
@@ -1692,6 +1692,12 @@ slot[name=error]::slotted(*) {
|
|
|
1692
1692
|
--sbb-options-panel-background-color: var(--sbb-background-color-1);
|
|
1693
1693
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1694
1694
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
|
|
1695
|
+
--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
|
|
1696
|
+
--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
|
|
1697
|
+
--sbb-popover-border-radius: var(--sbb-border-radius-8x);
|
|
1698
|
+
--sbb-popover-padding: var(--sbb-spacing-fixed-4x);
|
|
1699
|
+
--sbb-popover-background: var(--sbb-background-color-1);
|
|
1700
|
+
--sbb-popover-animation-easing: ease-out;
|
|
1695
1701
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1696
1702
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1697
1703
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.9.0-dev.1774283352",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/be32ef4d243b204aa9c12364926e04eba56e17ef"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "../popover.component-
|
|
1
|
+
import { n as e, t } from "../popover.component-H1g1e1o9.js";
|
|
2
2
|
export { t as SbbPopoverBaseElement, e as SbbPopoverElement };
|
|
@@ -15,7 +15,7 @@ import { IS_FOCUSABLE_QUERY as C, SbbFocusTrapController as w, isFakeMousedownFr
|
|
|
15
15
|
import { readConfig as D } from "./core/config.js";
|
|
16
16
|
import "./button/secondary-button.js";
|
|
17
17
|
//#region src/elements/popover/popover.scss?lit&inline
|
|
18
|
-
var O = n`:host{--sbb-
|
|
18
|
+
var O = n`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--_sbb-popover-inset: 0 auto auto 0;--_sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));outline:none!important;display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset: 0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([hide-close-button],:is(:state(hover-trigger),[state--hover-trigger]))){--sbb-popover-min-height: calc(var(--sbb-size-element-xs) + 2 * var(--sbb-popover-padding))}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x, 0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index))}.sbb-popover{box-shadow:var(--sbb-box-shadow-level-5-hard);display:none;position:var(--sbb-popover-position, absolute);pointer-events:all;top:var(--_sbb-popover-position-y, 0);bottom:unset;left:var(--_sbb-popover-position-x, 0);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--sbb-box-shadow-level-5-hard)}@media(forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media(forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;inset:0;z-index:-1;background-color:transparent}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding-block:var(--sbb-popover-padding) 0;padding-inline:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);flex-direction:row-reverse;min-height:var(--sbb-popover-min-height)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}.sbb-popover__scrollable-content{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-popover__scrollable-content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-popover__scrollable-content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-popover__scrollable-content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-popover__scrollable-content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-popover__scrollable-content::-webkit-scrollbar-button,.sbb-popover__scrollable-content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-popover__scrollable-content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-popover__scrollable-content{display:block;padding-block-end:var(--sbb-popover-padding);max-height:calc(var(--_sbb-popover-max-height));overflow:auto}@keyframes open{0%{opacity:0;transform:var(--_sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--_sbb-popover-transform)}}`, k = 16, A = 32, j = 0, M = /* @__PURE__ */ new Set(), N = i ? !1 : matchMedia(g).matches, P = (() => {
|
|
19
19
|
let n = s, a, c = [], f = [];
|
|
20
20
|
return class extends n {
|
|
21
21
|
constructor() {
|
|
@@ -140,7 +140,7 @@ var O = n`:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--s
|
|
|
140
140
|
}), t = e.alignment.vertical;
|
|
141
141
|
for (let e of ["above", "below"]) this.toggleState(`position-${e}`, e === t);
|
|
142
142
|
let n = this._triggerElement.getBoundingClientRect().left - e.left + this._triggerElement.clientWidth / 2 - 8;
|
|
143
|
-
this.style.setProperty("--
|
|
143
|
+
this.style.setProperty("--_sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--_sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--_sbb-popover-arrow-position-x", `${n}px`), this.style.setProperty("--_sbb-popover-max-height", e.maxHeight);
|
|
144
144
|
}
|
|
145
145
|
dispatchBeforeCloseEvent(e) {
|
|
146
146
|
return this.dispatchEvent(new CustomEvent("beforeclose", {
|
package/popover.js
CHANGED
package/popover.pure.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "./popover.component-
|
|
1
|
+
import { n as e, t } from "./popover.component-H1g1e1o9.js";
|
|
2
2
|
export { t as SbbPopoverBaseElement, e as SbbPopoverElement };
|
package/safety-theme.css
CHANGED
|
@@ -1692,6 +1692,12 @@ slot[name=error]::slotted(*) {
|
|
|
1692
1692
|
--sbb-options-panel-background-color: var(--sbb-background-color-1);
|
|
1693
1693
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1694
1694
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
|
|
1695
|
+
--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
|
|
1696
|
+
--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
|
|
1697
|
+
--sbb-popover-border-radius: var(--sbb-border-radius-8x);
|
|
1698
|
+
--sbb-popover-padding: var(--sbb-spacing-fixed-4x);
|
|
1699
|
+
--sbb-popover-background: var(--sbb-background-color-1);
|
|
1700
|
+
--sbb-popover-animation-easing: ease-out;
|
|
1695
1701
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1696
1702
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1697
1703
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
package/standard-theme.css
CHANGED
|
@@ -1692,6 +1692,12 @@ slot[name=error]::slotted(*) {
|
|
|
1692
1692
|
--sbb-options-panel-background-color: var(--sbb-background-color-1);
|
|
1693
1693
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1694
1694
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
|
|
1695
|
+
--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
|
|
1696
|
+
--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
|
|
1697
|
+
--sbb-popover-border-radius: var(--sbb-border-radius-8x);
|
|
1698
|
+
--sbb-popover-padding: var(--sbb-spacing-fixed-4x);
|
|
1699
|
+
--sbb-popover-background: var(--sbb-background-color-1);
|
|
1700
|
+
--sbb-popover-animation-easing: ease-out;
|
|
1695
1701
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1696
1702
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1697
1703
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|