@sbb-esta/lyne-elements-dev 4.6.0-dev.1772463840 → 4.6.0-dev.1772464299
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/autocomplete/autocomplete-base-element.js +17 -17
- package/core/styles/core.scss +15 -16
- package/core/styles/mixins/overlay.scss +25 -15
- package/core.css +46 -12
- package/custom-elements.json +1840 -1840
- package/development/autocomplete/autocomplete-base-element.js +11 -16
- package/development/option/optgroup/optgroup-base-element.js +4 -13
- package/development/option/option/option-base-element.d.ts.map +1 -1
- package/development/option/option/option-base-element.js +12 -14
- package/development/option/option/option.component.js +4 -28
- package/development/option/option-hint/option-hint.component.d.ts.map +1 -1
- package/development/option/option-hint/option-hint.component.js +11 -26
- package/development/select/select.component.js +11 -16
- package/off-brand-theme.css +46 -12
- package/option/optgroup/optgroup-base-element.js +22 -22
- package/option/option/option-base-element.js +11 -13
- package/option/option/option.component.js +15 -15
- package/option/option-hint/option-hint.component.js +16 -18
- package/package.json +2 -2
- package/safety-theme.css +46 -12
- package/select/select.component.js +18 -18
- package/standard-theme.css +46 -12
package/off-brand-theme.css
CHANGED
|
@@ -1572,6 +1572,40 @@ summary {
|
|
|
1572
1572
|
--sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
|
|
1573
1573
|
--sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
|
|
1574
1574
|
--sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
|
|
1575
|
+
--sbb-option-color: var(--sbb-color-3);
|
|
1576
|
+
--sbb-option-background-color: inherit;
|
|
1577
|
+
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
1578
|
+
--sbb-option-background-color-active: var(--sbb-background-color-4);
|
|
1579
|
+
--sbb-option-disabled-border-color: var(--sbb-color-graphite);
|
|
1580
|
+
--sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
|
|
1581
|
+
--sbb-option-disabled-background-color: var(--sbb-background-color-3);
|
|
1582
|
+
--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
|
|
1583
|
+
--sbb-option-min-height: var(--sbb-size-element-s);
|
|
1584
|
+
--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
|
|
1585
|
+
--sbb-option-justify-content: start;
|
|
1586
|
+
--sbb-option-cursor: var(--sbb-cursor-pointer);
|
|
1587
|
+
--sbb-option-border-radius: var(--sbb-border-radius-4x);
|
|
1588
|
+
--sbb-option-icon-color: var(--sbb-color-metal);
|
|
1589
|
+
--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1590
|
+
--sbb-option-focus-outline-color: transparent;
|
|
1591
|
+
--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
|
|
1592
|
+
--sbb-option-font-size: var(--sbb-text-font-size-s);
|
|
1593
|
+
--sbb-option-hint-color: var(--sbb-color-metal);
|
|
1594
|
+
--sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1595
|
+
--sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
|
|
1596
|
+
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
|
|
1597
|
+
--sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
|
|
1598
|
+
--sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
|
|
1599
|
+
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1600
|
+
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1601
|
+
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
1602
|
+
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);
|
|
1603
|
+
--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
|
|
1604
|
+
--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1605
|
+
--sbb-options-panel-animation-timing-function: ease;
|
|
1606
|
+
--sbb-options-panel-background-color: var(--sbb-background-color-1);
|
|
1607
|
+
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1608
|
+
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
|
|
1575
1609
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1576
1610
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1577
1611
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
@@ -1839,6 +1873,18 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
|
|
|
1839
1873
|
padding-inline-end: 0;
|
|
1840
1874
|
}
|
|
1841
1875
|
|
|
1876
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
1877
|
+
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
1878
|
+
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
1879
|
+
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
1880
|
+
}
|
|
1881
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
1882
|
+
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
1883
|
+
}
|
|
1884
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
1885
|
+
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1842
1888
|
sbb-tab-nav-bar .sbb-tab-amount {
|
|
1843
1889
|
margin: 0;
|
|
1844
1890
|
color: var(--sbb-tab-label-amount-color);
|
|
@@ -2283,18 +2329,6 @@ sbb-toggle:has(:focus-visible) {
|
|
|
2283
2329
|
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2284
2330
|
}
|
|
2285
2331
|
|
|
2286
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
2287
|
-
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
2288
|
-
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
2289
|
-
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
2290
|
-
}
|
|
2291
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
2292
|
-
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
2293
|
-
}
|
|
2294
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
2295
|
-
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
2296
|
-
}
|
|
2297
|
-
|
|
2298
2332
|
sbb-notification:has(sbb-title) {
|
|
2299
2333
|
--_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
|
|
2300
2334
|
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
var m = (
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var m = (i) => {
|
|
2
|
+
throw TypeError(i);
|
|
3
3
|
};
|
|
4
|
-
var f = (
|
|
5
|
-
var c = (
|
|
6
|
-
import { __esDecorate as
|
|
7
|
-
import { css as
|
|
8
|
-
import { property as
|
|
4
|
+
var f = (i, t, s) => t.has(i) || m("Cannot " + s);
|
|
5
|
+
var c = (i, t, s) => (f(i, t, "read from private field"), s ? s.call(i) : t.get(i)), u = (i, t, s) => t.has(i) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), h = (i, t, s, l) => (f(i, t, "write to private field"), l ? l.call(i, s) : t.set(i, s), s);
|
|
6
|
+
import { __esDecorate as y, __runInitializers as p } from "tslib";
|
|
7
|
+
import { css as x, LitElement as G, nothing as k, html as A } from "lit";
|
|
8
|
+
import { property as S, state as z } from "lit/decorators.js";
|
|
9
9
|
import { forceType as w } from "../../core/decorators.js";
|
|
10
10
|
import { isSafari as L } from "../../core/dom.js";
|
|
11
11
|
import { SbbDisabledMixin as I, SbbElementInternalsMixin as $, SbbHydrationMixin as C } from "../../core/mixins.js";
|
|
12
12
|
import { boxSizingStyles as D } from "../../core/styles.js";
|
|
13
13
|
import "../../divider.js";
|
|
14
|
-
const E =
|
|
14
|
+
const E = x`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display: none}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color: var(--sbb-color-5)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end)}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display, block);padding-block:var(--sbb-options-panel-divider-margin-block)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}`, d = L;
|
|
15
15
|
let K = (() => {
|
|
16
16
|
var o, n, r;
|
|
17
|
-
let
|
|
18
|
-
return r = class extends
|
|
17
|
+
let i = I($(C(G))), t, s = [], l = [], g, _ = [], v = [];
|
|
18
|
+
return r = class extends i {
|
|
19
19
|
constructor() {
|
|
20
20
|
super();
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
p(this,
|
|
21
|
+
u(this, o, p(this, s, ""));
|
|
22
|
+
u(this, n, (p(this, l), p(this, _, !1)));
|
|
23
|
+
p(this, v), d && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = d) : this._inertAriaGroups = d);
|
|
24
24
|
}
|
|
25
25
|
/** Option group label. */
|
|
26
26
|
get label() {
|
|
27
27
|
return c(this, o);
|
|
28
28
|
}
|
|
29
29
|
set label(e) {
|
|
30
|
-
|
|
30
|
+
h(this, o, e);
|
|
31
31
|
}
|
|
32
32
|
get _inertAriaGroups() {
|
|
33
33
|
return c(this, n);
|
|
34
34
|
}
|
|
35
35
|
set _inertAriaGroups(e) {
|
|
36
|
-
|
|
36
|
+
h(this, n, e);
|
|
37
37
|
}
|
|
38
38
|
connectedCallback() {
|
|
39
39
|
super.connectedCallback(), this._updateAriaLabel();
|
|
@@ -55,26 +55,26 @@ let K = (() => {
|
|
|
55
55
|
a && this.options.forEach((b) => b.highlight(a));
|
|
56
56
|
}
|
|
57
57
|
render() {
|
|
58
|
-
return
|
|
58
|
+
return A`
|
|
59
59
|
<div class="sbb-optgroup__divider">
|
|
60
60
|
<sbb-divider ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}></sbb-divider>
|
|
61
61
|
</div>
|
|
62
|
-
${this.label ?
|
|
62
|
+
${this.label ? A`
|
|
63
63
|
<div class="sbb-optgroup__label" aria-hidden="true">
|
|
64
64
|
<div class="sbb-optgroup__icon-space"></div>
|
|
65
65
|
<span>${this.label}</span>
|
|
66
66
|
</div>
|
|
67
|
-
` :
|
|
67
|
+
` : k}
|
|
68
68
|
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
69
69
|
`;
|
|
70
70
|
}
|
|
71
71
|
}, o = new WeakMap(), n = new WeakMap(), (() => {
|
|
72
|
-
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
73
|
-
|
|
72
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
|
|
73
|
+
t = [w(), S()], g = [z()], y(r, null, t, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (a) => "label" in a, get: (a) => a.label, set: (a, b) => {
|
|
74
74
|
a.label = b;
|
|
75
|
-
} }, metadata: e }, s, l),
|
|
75
|
+
} }, metadata: e }, s, l), y(r, null, g, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (a) => "_inertAriaGroups" in a, get: (a) => a._inertAriaGroups, set: (a, b) => {
|
|
76
76
|
a._inertAriaGroups = b;
|
|
77
|
-
} }, metadata: e },
|
|
77
|
+
} }, metadata: e }, _, v), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
78
78
|
})(), r.role = d ? null : "group", r.styles = [D, E], r;
|
|
79
79
|
})();
|
|
80
80
|
export {
|
|
@@ -166,26 +166,24 @@ let ut = (() => {
|
|
|
166
166
|
}
|
|
167
167
|
render() {
|
|
168
168
|
return f`
|
|
169
|
-
<div class="sbb-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
aria-hidden=${/**
|
|
169
|
+
<div class="sbb-option">
|
|
170
|
+
${this.renderIcon()}
|
|
171
|
+
<span class="sbb-option__label">
|
|
172
|
+
<slot @slotchange=${this.handleHighlightState}></slot>
|
|
173
|
+
<span
|
|
174
|
+
aria-hidden=${/**
|
|
176
175
|
* Screen readers with Chromium read the option twice.
|
|
177
176
|
* We therefore have to hide the option for the screen readers.
|
|
178
177
|
* TODO: Recheck periodically if this is still necessary.
|
|
179
178
|
* https://issues.chromium.org/issues/460165741
|
|
180
179
|
*/
|
|
181
180
|
W ? "true" : S}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
</span>
|
|
185
|
-
${this._inertAriaGroups && this.groupLabel ? f`<sbb-screen-reader-only> (${this.groupLabel})</sbb-screen-reader-only>` : S}
|
|
181
|
+
>
|
|
182
|
+
${this.renderLabel()}
|
|
186
183
|
</span>
|
|
187
|
-
${this.
|
|
188
|
-
</
|
|
184
|
+
${this._inertAriaGroups && this.groupLabel ? f`<sbb-screen-reader-only> (${this.groupLabel})</sbb-screen-reader-only>` : S}
|
|
185
|
+
</span>
|
|
186
|
+
${this.renderTick()}
|
|
189
187
|
</div>
|
|
190
188
|
`;
|
|
191
189
|
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { __esDecorate as c, __runInitializers as d } from "tslib";
|
|
2
|
-
import { css as
|
|
3
|
-
import { customElement as
|
|
2
|
+
import { css as h, nothing as s, html as o } from "lit";
|
|
3
|
+
import { customElement as p } from "lit/decorators.js";
|
|
4
4
|
import { SbbPropertyWatcherController as a } from "../../core/controllers.js";
|
|
5
5
|
import { boxSizingStyles as u } from "../../core/styles.js";
|
|
6
6
|
import { SbbOptionBaseElement as v } from "./option-base-element.js";
|
|
7
7
|
import "../../visual-checkbox.js";
|
|
8
|
-
const g =
|
|
8
|
+
const g = h`:host{display:block;background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:is(:state(negative),[state--negative])){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5);--sbb-option-background-color-hover: var(--sbb-background-color-3-negative);--sbb-option-background-color-active: var(--sbb-background-color-4-negative);--sbb-option-disabled-border-color: var(--sbb-border-color-5);--sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-option-color: GrayText}}:host(:is(:state(variant-select),[state--variant-select])){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])){--sbb-option-justify-content: start}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight{color:Highlight}}.sbb-option{position:relative;display:flex;min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option{position:relative;z-index:0}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`;
|
|
9
9
|
let I = (() => {
|
|
10
|
-
var
|
|
11
|
-
let
|
|
12
|
-
return
|
|
10
|
+
var e;
|
|
11
|
+
let b = [p("sbb-option")], n, l = [], i, r = v;
|
|
12
|
+
return e = class extends r {
|
|
13
13
|
set _variant(t) {
|
|
14
14
|
this._variantInternal && this.internals.states.delete(`variant-${this._variantInternal}`), this._variantInternal = t, this._variantInternal && this.internals.states.add(`variant-${this._variantInternal}`);
|
|
15
15
|
}
|
|
@@ -62,12 +62,12 @@ let I = (() => {
|
|
|
62
62
|
super.handleHighlightState();
|
|
63
63
|
}
|
|
64
64
|
renderIcon() {
|
|
65
|
-
return
|
|
65
|
+
return o`
|
|
66
66
|
<!-- Icon -->
|
|
67
|
-
${this._isMultiple() ? s :
|
|
67
|
+
${this._isMultiple() ? s : o` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
|
|
68
68
|
|
|
69
69
|
<!-- Checkbox -->
|
|
70
|
-
${this._isMultiple() ?
|
|
70
|
+
${this._isMultiple() ? o`
|
|
71
71
|
<sbb-visual-checkbox
|
|
72
72
|
?checked=${this.selected}
|
|
73
73
|
?disabled=${this.disabled || this.disabledFromGroup}
|
|
@@ -80,15 +80,15 @@ let I = (() => {
|
|
|
80
80
|
return this._variant !== "autocomplete" ? s : super.renderLabel();
|
|
81
81
|
}
|
|
82
82
|
renderTick() {
|
|
83
|
-
return this._variant === "select" && !this._isMultiple() && this.selected ?
|
|
83
|
+
return this._variant === "select" && !this._isMultiple() && this.selected ? o`<sbb-icon name="tick-small"></sbb-icon>` : s;
|
|
84
84
|
}
|
|
85
|
-
},
|
|
86
|
-
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
87
|
-
c(null,
|
|
88
|
-
})(),
|
|
85
|
+
}, i = e, (() => {
|
|
86
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
|
|
87
|
+
c(null, n = { value: i }, b, { kind: "class", name: i.name, metadata: t }, null, l), i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
88
|
+
})(), e.role = "option", e.styles = [u, g], e.events = {
|
|
89
89
|
optionselectionchange: "optionselectionchange",
|
|
90
90
|
optionselected: "optionselected"
|
|
91
|
-
}, d(
|
|
91
|
+
}, d(i, l), i;
|
|
92
92
|
})();
|
|
93
93
|
export {
|
|
94
94
|
I as SbbOptionElement
|
|
@@ -1,28 +1,26 @@
|
|
|
1
|
-
import { __esDecorate as
|
|
2
|
-
import { css as
|
|
1
|
+
import { __esDecorate as l, __runInitializers as r } from "tslib";
|
|
2
|
+
import { css as b, LitElement as c, html as p } from "lit";
|
|
3
3
|
import { customElement as m } from "lit/decorators.js";
|
|
4
4
|
import { SbbNegativeMixin as d } from "../../core/mixins.js";
|
|
5
|
-
import { boxSizingStyles as
|
|
6
|
-
const
|
|
7
|
-
let
|
|
5
|
+
import { boxSizingStyles as u } from "../../core/styles.js";
|
|
6
|
+
const v = b`:host{display:flex;column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);padding-block-end:var(--sbb-option-hint-padding-block-end);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([negative]){--sbb-option-hint-color: var(--sbb-color-5)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}`;
|
|
7
|
+
let x = (() => {
|
|
8
8
|
var o;
|
|
9
|
-
let a = [m("sbb-option-hint")],
|
|
10
|
-
return o = class extends
|
|
9
|
+
let a = [m("sbb-option-hint")], e, n = [], t, s = d(c);
|
|
10
|
+
return o = class extends s {
|
|
11
11
|
render() {
|
|
12
|
-
return
|
|
13
|
-
<div class="sbb-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
</span>
|
|
18
|
-
</div>
|
|
12
|
+
return p`
|
|
13
|
+
<div class="sbb-optgroup__icon-space"></div>
|
|
14
|
+
<span class="sbb-option-hint">
|
|
15
|
+
<slot></slot>
|
|
16
|
+
</span>
|
|
19
17
|
`;
|
|
20
18
|
}
|
|
21
19
|
}, t = o, (() => {
|
|
22
|
-
const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
23
|
-
|
|
24
|
-
})(), o.styles = [
|
|
20
|
+
const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
|
|
21
|
+
l(null, e = { value: t }, a, { kind: "class", name: t.name, metadata: i }, null, n), t = e.value, i && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
|
|
22
|
+
})(), o.styles = [u, v], r(t, n), t;
|
|
25
23
|
})();
|
|
26
24
|
export {
|
|
27
|
-
|
|
25
|
+
x as SbbOptionHintElement
|
|
28
26
|
};
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.6.0-dev.
|
|
3
|
+
"version": "4.6.0-dev.1772464299",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
9
|
"storybook",
|
|
10
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
10
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/af34a176e9dc135d84a14f217ad097b3647bb2dd"
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1572,6 +1572,40 @@ summary {
|
|
|
1572
1572
|
--sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
|
|
1573
1573
|
--sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
|
|
1574
1574
|
--sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
|
|
1575
|
+
--sbb-option-color: var(--sbb-color-3);
|
|
1576
|
+
--sbb-option-background-color: inherit;
|
|
1577
|
+
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
1578
|
+
--sbb-option-background-color-active: var(--sbb-background-color-4);
|
|
1579
|
+
--sbb-option-disabled-border-color: var(--sbb-color-graphite);
|
|
1580
|
+
--sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
|
|
1581
|
+
--sbb-option-disabled-background-color: var(--sbb-background-color-3);
|
|
1582
|
+
--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
|
|
1583
|
+
--sbb-option-min-height: var(--sbb-size-element-s);
|
|
1584
|
+
--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
|
|
1585
|
+
--sbb-option-justify-content: start;
|
|
1586
|
+
--sbb-option-cursor: var(--sbb-cursor-pointer);
|
|
1587
|
+
--sbb-option-border-radius: var(--sbb-border-radius-4x);
|
|
1588
|
+
--sbb-option-icon-color: var(--sbb-color-metal);
|
|
1589
|
+
--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1590
|
+
--sbb-option-focus-outline-color: transparent;
|
|
1591
|
+
--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
|
|
1592
|
+
--sbb-option-font-size: var(--sbb-text-font-size-s);
|
|
1593
|
+
--sbb-option-hint-color: var(--sbb-color-metal);
|
|
1594
|
+
--sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1595
|
+
--sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
|
|
1596
|
+
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
|
|
1597
|
+
--sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
|
|
1598
|
+
--sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
|
|
1599
|
+
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1600
|
+
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1601
|
+
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
1602
|
+
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);
|
|
1603
|
+
--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
|
|
1604
|
+
--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1605
|
+
--sbb-options-panel-animation-timing-function: ease;
|
|
1606
|
+
--sbb-options-panel-background-color: var(--sbb-background-color-1);
|
|
1607
|
+
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1608
|
+
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
|
|
1575
1609
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1576
1610
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1577
1611
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
@@ -1839,6 +1873,18 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
|
|
|
1839
1873
|
padding-inline-end: 0;
|
|
1840
1874
|
}
|
|
1841
1875
|
|
|
1876
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
1877
|
+
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
1878
|
+
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
1879
|
+
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
1880
|
+
}
|
|
1881
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
1882
|
+
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
1883
|
+
}
|
|
1884
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
1885
|
+
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1842
1888
|
sbb-tab-nav-bar .sbb-tab-amount {
|
|
1843
1889
|
margin: 0;
|
|
1844
1890
|
color: var(--sbb-tab-label-amount-color);
|
|
@@ -2283,18 +2329,6 @@ sbb-toggle:has(:focus-visible) {
|
|
|
2283
2329
|
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2284
2330
|
}
|
|
2285
2331
|
|
|
2286
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
2287
|
-
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
2288
|
-
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
2289
|
-
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
2290
|
-
}
|
|
2291
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
2292
|
-
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
2293
|
-
}
|
|
2294
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
2295
|
-
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
2296
|
-
}
|
|
2297
|
-
|
|
2298
2332
|
sbb-notification:has(sbb-title) {
|
|
2299
2333
|
--_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
|
|
2300
2334
|
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
|
|
@@ -3,7 +3,7 @@ var Y = (i) => {
|
|
|
3
3
|
};
|
|
4
4
|
var Z = (i, a, r) => a.has(i) || Y("Cannot " + r);
|
|
5
5
|
var f = (i, a, r) => (Z(i, a, "read from private field"), r ? r.call(i) : a.get(i)), y = (i, a, r) => a.has(i) ? Y("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), l = (i, a, r, b) => (Z(i, a, "write to private field"), b ? b.call(i, r) : a.set(i, r), r);
|
|
6
|
-
import { __esDecorate as
|
|
6
|
+
import { __esDecorate as d, __runInitializers as n } from "tslib";
|
|
7
7
|
import { MutationController as X } from "@lit-labs/observers/mutation-controller.js";
|
|
8
8
|
import { ResizeController as ee } from "@lit-labs/observers/resize-controller.js";
|
|
9
9
|
import { css as te, isServer as se, html as w, nothing as E } from "lit";
|
|
@@ -14,12 +14,12 @@ import { getNextElementIndex as oe } from "../core/a11y.js";
|
|
|
14
14
|
import { SbbOpenCloseBaseElement as re } from "../core/base-elements.js";
|
|
15
15
|
import { SbbEscapableOverlayController as ne, SbbLanguageController as le, SbbPropertyWatcherController as be } from "../core/controllers.js";
|
|
16
16
|
import { forceType as A, handleDistinctChange as J, getOverride as pe } from "../core/decorators.js";
|
|
17
|
-
import { isLean as ce, setOrRemoveAttribute as S, isZeroAnimationDuration as
|
|
17
|
+
import { isLean as ce, setOrRemoveAttribute as S, isZeroAnimationDuration as he, isNextjs as G, isSafari as de } from "../core/dom.js";
|
|
18
18
|
import { i18nSelectionRequired as ue } from "../core/i18n.js";
|
|
19
19
|
import { SbbUpdateSchedulerMixin as _e, SbbDisabledMixin as ge, SbbNegativeMixin as ve, SbbHydrationMixin as me, SbbRequiredMixin as fe, SbbReadonlyMixin as ye, SbbFormAssociatedMixin as xe } from "../core/mixins.js";
|
|
20
20
|
import { isEventOnElement as W, setOverlayPosition as we, overlayGapFixCorners as ke } from "../core/overlay.js";
|
|
21
21
|
import { boxSizingStyles as Ee } from "../core/styles.js";
|
|
22
|
-
const Oe = te`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--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-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--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-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);--sbb-select-placeholder-fallback-color: light-dark( var(--sbb-color-metal), var(--sbb-color-smoke) );display:block}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-select__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-select__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-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-select__options::-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-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media(forced-colors:active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, k = he;
|
|
22
|
+
const Oe = te`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--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-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--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-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);--sbb-select-placeholder-fallback-color: light-dark( var(--sbb-color-metal), var(--sbb-color-smoke) );display:block}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([size=m]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x)}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-select__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility, visible);opacity:var(--sbb-options-panel-gap-fix-opacity, 0);background-color:transparent;width:var(--sbb-options-panel-width, fit-content);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform, none);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility, "visible");overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width, fit-content);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-select__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-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-select__options::-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-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media(forced-colors:active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, k = de;
|
|
23
23
|
let Ae = 0, je = (() => {
|
|
24
24
|
var u, _, g, v, m, o;
|
|
25
25
|
let i = [ie("sbb-select")], a, r = [], b, C = _e(ge(ve(me(fe(ye(xe(re))))))), V = [], I, D = [], z = [], L, P = [], $ = [], M, R = [], T = [], N, F, U = [], q = [], B, K = [], j = [];
|
|
@@ -132,7 +132,7 @@ let Ae = 0, je = (() => {
|
|
|
132
132
|
this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this.internals.states.delete("expanded"), this._openPanelEventsController?.abort(), this._originElement && this._originResizeObserver.unobserve(this._originElement), this._isZeroAnimationDuration() && this._handleClosing());
|
|
133
133
|
}
|
|
134
134
|
_isZeroAnimationDuration() {
|
|
135
|
-
return
|
|
135
|
+
return he(this, "--sbb-options-panel-animation-duration");
|
|
136
136
|
}
|
|
137
137
|
/** Gets the current displayed value. */
|
|
138
138
|
getDisplayValue() {
|
|
@@ -213,12 +213,12 @@ let Ae = 0, je = (() => {
|
|
|
213
213
|
*/
|
|
214
214
|
formStateRestoreCallback(e, t) {
|
|
215
215
|
try {
|
|
216
|
-
const { value: s, manuallyAssigned:
|
|
216
|
+
const { value: s, manuallyAssigned: h } = JSON.parse(e);
|
|
217
217
|
if ((Array.isArray(s) ? s : [s]).some((p) => p !== null && typeof p == "object")) {
|
|
218
218
|
console.warn(`Restoring complex objects is not supported for sbb-select with state ${e}`);
|
|
219
219
|
return;
|
|
220
220
|
}
|
|
221
|
-
this._isValueManuallyAssigned =
|
|
221
|
+
this._isValueManuallyAssigned = h, this._value = s, this._updateOptionsFromValue();
|
|
222
222
|
} catch {
|
|
223
223
|
console.warn(`Failed to restore sbb-select with state ${e}`);
|
|
224
224
|
}
|
|
@@ -341,14 +341,14 @@ let Ae = 0, je = (() => {
|
|
|
341
341
|
}
|
|
342
342
|
_setNextActiveOptionByText(e) {
|
|
343
343
|
typeof this._searchTimeout == typeof setTimeout && clearTimeout(this._searchTimeout), this._searchTimeout = setTimeout(() => this._searchString = "", 1e3), this._searchString += e.key;
|
|
344
|
-
const t = this._activeItemIndex + 1, s = this._selectableOptions(),
|
|
344
|
+
const t = this._activeItemIndex + 1, s = this._selectableOptions(), h = [
|
|
345
345
|
...s.slice(t),
|
|
346
346
|
...s.slice(0, t)
|
|
347
|
-
], c =
|
|
347
|
+
], c = h.find((p) => p.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase()) === 0);
|
|
348
348
|
if (c)
|
|
349
349
|
this._setNextActiveOption(e, s.indexOf(c));
|
|
350
350
|
else if (this._searchString.length > 1 && new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)) {
|
|
351
|
-
const p =
|
|
351
|
+
const p = h.find((Q) => Q.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase()) === 0);
|
|
352
352
|
p && this._setNextActiveOption(e, s.indexOf(p));
|
|
353
353
|
} else
|
|
354
354
|
clearTimeout(this._searchTimeout), this._searchString = "";
|
|
@@ -361,8 +361,8 @@ let Ae = 0, je = (() => {
|
|
|
361
361
|
const s = this._selectableOptions();
|
|
362
362
|
if (s.length === 0)
|
|
363
363
|
return;
|
|
364
|
-
const
|
|
365
|
-
this._setActiveElement(c, p), this.multiple ? e?.shiftKey && c.selectViaUserInteraction(!c.selected) : this._setSelectedElement(c, p), this._activeItemIndex =
|
|
364
|
+
const h = t ?? oe(e, this._activeItemIndex, s.length), c = s[h], p = s[this._activeItemIndex];
|
|
365
|
+
this._setActiveElement(c, p), this.multiple ? e?.shiftKey && c.selectViaUserInteraction(!c.selected) : this._setSelectedElement(c, p), this._activeItemIndex = h;
|
|
366
366
|
}
|
|
367
367
|
_setActiveElement(e, t = null, s = !0) {
|
|
368
368
|
e.setActive(!0), e.scrollIntoView({ block: "nearest" }), s && this._triggerElement?.setAttribute("aria-activedescendant", e.id), t && t !== e && t.setActive(!1);
|
|
@@ -470,19 +470,19 @@ let Ae = 0, je = (() => {
|
|
|
470
470
|
}
|
|
471
471
|
}, u = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), m = new WeakMap(), b = o, (() => {
|
|
472
472
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
|
|
473
|
-
I = [A(), x()], L = [A(), J((t, s) => t._onMultipleChanged(s)), x({ reflect: !0, type: Boolean })], M = [A(), J((t, s) => t._closeOnDisabledReadonlyChanged(s)), x({ reflect: !0, type: Boolean }), pe((t, s) => s || t.isDisabledExternally())], N = [x()], F = [x({ reflect: !0 })], B = [ae()],
|
|
473
|
+
I = [A(), x()], L = [A(), J((t, s) => t._onMultipleChanged(s)), x({ reflect: !0, type: Boolean })], M = [A(), J((t, s) => t._closeOnDisabledReadonlyChanged(s)), x({ reflect: !0, type: Boolean }), pe((t, s) => s || t.isDisabledExternally())], N = [x()], F = [x({ reflect: !0 })], B = [ae()], d(o, null, I, { kind: "accessor", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, get: (t) => t.placeholder, set: (t, s) => {
|
|
474
474
|
t.placeholder = s;
|
|
475
|
-
} }, metadata: e }, D, z),
|
|
475
|
+
} }, metadata: e }, D, z), d(o, null, L, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, s) => {
|
|
476
476
|
t.multiple = s;
|
|
477
|
-
} }, metadata: e }, P, $),
|
|
477
|
+
} }, metadata: e }, P, $), d(o, null, M, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (t) => "disabled" in t, get: (t) => t.disabled, set: (t, s) => {
|
|
478
478
|
t.disabled = s;
|
|
479
|
-
} }, metadata: e }, R, T),
|
|
479
|
+
} }, metadata: e }, R, T), d(o, null, N, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, s) => {
|
|
480
480
|
t.value = s;
|
|
481
|
-
} }, metadata: e }, null, V),
|
|
481
|
+
} }, metadata: e }, null, V), d(o, null, F, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
|
|
482
482
|
t.size = s;
|
|
483
|
-
} }, metadata: e }, U, q),
|
|
483
|
+
} }, metadata: e }, U, q), d(o, null, B, { kind: "accessor", name: "_displayValue", static: !1, private: !1, access: { has: (t) => "_displayValue" in t, get: (t) => t._displayValue, set: (t, s) => {
|
|
484
484
|
t._displayValue = s;
|
|
485
|
-
} }, metadata: e }, K, j),
|
|
485
|
+
} }, metadata: e }, K, j), d(null, a = { value: b }, i, { kind: "class", name: b.name, metadata: e }, null, r), b = a.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
486
486
|
})(), o.role = k ? "listbox" : null, o.styles = [Ee, Oe], o.events = {
|
|
487
487
|
change: "change",
|
|
488
488
|
input: "input",
|