@sbb-esta/lyne-elements 4.6.0 → 4.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete/autocomplete-base-element.js +34 -34
- package/chip/chip-group/chip-group.component.js +69 -49
- package/core/styles/core.scss +45 -73
- package/core/styles/mixins/overlay.scss +25 -15
- package/core/styles/mixins/pearl-chain-bullet.scss +12 -6
- package/core.css +113 -49
- package/custom-elements.json +351 -225
- package/datepicker/common/datepicker-button.js +18 -14
- package/datepicker/datepicker-next-day/datepicker-next-day.component.js +18 -26
- package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +20 -28
- package/development/autocomplete/autocomplete-base-element.d.ts +2 -0
- package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/development/autocomplete/autocomplete-base-element.js +37 -34
- package/development/calendar/calendar/calendar.component.d.ts +1 -1
- package/development/calendar/calendar/calendar.component.d.ts.map +1 -1
- package/development/calendar/calendar/calendar.component.js +1 -1
- package/development/calendar/calendar-day/calendar-day.component.d.ts +1 -1
- package/development/calendar/calendar-day/calendar-day.component.d.ts.map +1 -1
- package/development/calendar/calendar-day/calendar-day.component.js +1 -1
- package/development/chip/chip-group/chip-group.component.d.ts +6 -0
- package/development/chip/chip-group/chip-group.component.d.ts.map +1 -1
- package/development/chip/chip-group/chip-group.component.js +33 -4
- package/development/container/container/container.component.d.ts +2 -0
- package/development/container/container/container.component.d.ts.map +1 -1
- package/development/container/container/container.component.js +1 -1
- package/development/datepicker/common/datepicker-button.d.ts +3 -1
- package/development/datepicker/common/datepicker-button.d.ts.map +1 -1
- package/development/datepicker/common/datepicker-button.js +8 -4
- package/development/datepicker/datepicker-next-day/datepicker-next-day.component.d.ts +1 -1
- package/development/datepicker/datepicker-next-day/datepicker-next-day.component.d.ts.map +1 -1
- package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +3 -12
- package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.d.ts +1 -1
- package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.d.ts.map +1 -1
- package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +3 -12
- package/development/dialog/dialog/dialog.component.js +24 -37
- package/development/dialog/dialog-actions/dialog-actions.component.js +2 -2
- package/development/dialog/dialog-close-button/dialog-close-button.component.js +2 -2
- package/development/footer/footer.component.js +4 -19
- package/development/form-field/form-field/form-field.component.js +2 -1
- package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts +1 -1
- package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts.map +1 -1
- package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +2 -2
- 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/development/status/status.component.d.ts.map +1 -1
- package/development/status/status.component.js +20 -26
- package/dialog/dialog/dialog.component.js +19 -19
- package/dialog/dialog-actions/dialog-actions.component.js +6 -6
- package/dialog/dialog-close-button/dialog-close-button.component.js +9 -9
- package/footer/footer.component.js +22 -22
- package/form-field/form-field/form-field.component.js +1 -1
- package/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +1 -1
- package/off-brand-theme.css +113 -49
- 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 +1 -1
- package/safety-theme.css +113 -49
- package/select/select.component.js +18 -18
- package/standard-theme.css +113 -49
- package/status/status.component.js +27 -29
|
@@ -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
package/safety-theme.css
CHANGED
|
@@ -1516,6 +1516,27 @@ summary {
|
|
|
1516
1516
|
--sbb-clock-seconds-hand-color: var(--sbb-color-brand);
|
|
1517
1517
|
--sbb-clock-face-color: var(--sbb-color-1);
|
|
1518
1518
|
--sbb-clock-background-color: var(--sbb-background-color-1);
|
|
1519
|
+
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);
|
|
1520
|
+
--sbb-dialog-color: var(--sbb-color-2);
|
|
1521
|
+
--sbb-dialog-background-color: var(--sbb-background-color-1);
|
|
1522
|
+
--sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1523
|
+
--sbb-dialog-color-negative: var(--sbb-color-2-negative);
|
|
1524
|
+
--sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
|
|
1525
|
+
--sbb-dialog-width: 100%;
|
|
1526
|
+
--sbb-dialog-max-width: 100%;
|
|
1527
|
+
--sbb-dialog-max-width-default: 55.75rem;
|
|
1528
|
+
--sbb-dialog-height: 100%;
|
|
1529
|
+
--sbb-dialog-max-height: 100%;
|
|
1530
|
+
--sbb-dialog-inset: 0 auto auto 0;
|
|
1531
|
+
--sbb-dialog-border-radius: var(--sbb-border-radius-8x);
|
|
1532
|
+
--sbb-dialog-animation-easing: ease;
|
|
1533
|
+
--sbb-dialog-pointer-events: none;
|
|
1534
|
+
--sbb-dialog-backdrop-visibility: hidden;
|
|
1535
|
+
--sbb-dialog-backdrop-pointer-events: none;
|
|
1536
|
+
--sbb-dialog-backdrop-color: transparent;
|
|
1537
|
+
--sbb-dialog-actions-border-color: var(--sbb-background-color-4);
|
|
1538
|
+
--sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
|
|
1539
|
+
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1519
1540
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1520
1541
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1521
1542
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -1543,6 +1564,48 @@ summary {
|
|
|
1543
1564
|
--sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
|
|
1544
1565
|
--sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
|
|
1545
1566
|
--sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
|
|
1567
|
+
--sbb-footer-background-color: var(--sbb-background-color-3);
|
|
1568
|
+
--sbb-footer-clock-width: 4.75rem;
|
|
1569
|
+
--sbb-footer-color: var(--sbb-color-granite);
|
|
1570
|
+
--sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
|
|
1571
|
+
--sbb-footer-font-size: var(--sbb-text-font-size-s);
|
|
1572
|
+
--sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
|
|
1573
|
+
--sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
|
|
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);
|
|
1546
1609
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1547
1610
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1548
1611
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
@@ -1577,6 +1640,11 @@ summary {
|
|
|
1577
1640
|
--sbb-selection-panel-input-padding-block-m
|
|
1578
1641
|
);
|
|
1579
1642
|
--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
|
|
1643
|
+
--sbb-status-color: var(--sbb-color-4);
|
|
1644
|
+
--sbb-status-gap: var(--sbb-spacing-fixed-1x);
|
|
1645
|
+
--sbb-status-font-size: var(--sbb-text-font-size-s);
|
|
1646
|
+
--sbb-status-title-color: var(--sbb-color-granite);
|
|
1647
|
+
--sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
1580
1648
|
--sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
|
|
1581
1649
|
--sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
|
|
1582
1650
|
--sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
|
|
@@ -1686,6 +1754,8 @@ summary {
|
|
|
1686
1754
|
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
|
|
1687
1755
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
|
|
1688
1756
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
1757
|
+
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x);
|
|
1758
|
+
--sbb-footer-clock-width: 7rem;
|
|
1689
1759
|
}
|
|
1690
1760
|
}
|
|
1691
1761
|
@media (min-width: calc(64rem)) {
|
|
@@ -1729,6 +1799,8 @@ summary {
|
|
|
1729
1799
|
--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
|
|
1730
1800
|
--sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
|
|
1731
1801
|
--sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
|
|
1802
|
+
--sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
|
|
1803
|
+
--sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
|
|
1732
1804
|
}
|
|
1733
1805
|
:root.sbb-lean {
|
|
1734
1806
|
--sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
|
|
@@ -1775,6 +1847,12 @@ summary {
|
|
|
1775
1847
|
font-display: swap;
|
|
1776
1848
|
font-weight: 300;
|
|
1777
1849
|
}
|
|
1850
|
+
sbb-breadcrumb-group:not(:defined) {
|
|
1851
|
+
display: block;
|
|
1852
|
+
height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
|
|
1853
|
+
overflow: hidden;
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1778
1856
|
sbb-container > [slot=image]:is(sbb-image, img),
|
|
1779
1857
|
sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
1780
1858
|
--sbb-image-object-fit: cover;
|
|
@@ -1783,6 +1861,41 @@ sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image)
|
|
|
1783
1861
|
position: absolute;
|
|
1784
1862
|
}
|
|
1785
1863
|
|
|
1864
|
+
sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
|
|
1865
|
+
position: absolute;
|
|
1866
|
+
z-index: 1;
|
|
1867
|
+
}
|
|
1868
|
+
sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
|
|
1869
|
+
--_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
|
|
1870
|
+
}
|
|
1871
|
+
sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
|
|
1872
|
+
--_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
|
|
1873
|
+
}
|
|
1874
|
+
|
|
1875
|
+
sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
|
|
1876
|
+
padding-block-start: var(--sbb-spacing-fixed-1x);
|
|
1877
|
+
}
|
|
1878
|
+
sbb-dialog[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element),[state--has-intermediate-element]) > * > sbb-dialog-content {
|
|
1879
|
+
--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
|
|
1880
|
+
--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
|
|
1881
|
+
}
|
|
1882
|
+
|
|
1883
|
+
sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
|
|
1884
|
+
padding-inline-end: 0;
|
|
1885
|
+
}
|
|
1886
|
+
|
|
1887
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
1888
|
+
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
1889
|
+
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
1890
|
+
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
1891
|
+
}
|
|
1892
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
1893
|
+
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
1894
|
+
}
|
|
1895
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
1896
|
+
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
1897
|
+
}
|
|
1898
|
+
|
|
1786
1899
|
sbb-tab-nav-bar .sbb-tab-amount {
|
|
1787
1900
|
margin: 0;
|
|
1788
1901
|
color: var(--sbb-tab-label-amount-color);
|
|
@@ -2028,12 +2141,6 @@ sbb-toast) {
|
|
|
2028
2141
|
pointer-events: none;
|
|
2029
2142
|
}
|
|
2030
2143
|
|
|
2031
|
-
sbb-breadcrumb-group:not(:defined) {
|
|
2032
|
-
display: block;
|
|
2033
|
-
height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
|
|
2034
|
-
overflow: hidden;
|
|
2035
|
-
}
|
|
2036
|
-
|
|
2037
2144
|
:is(sbb-card, sbb-flip-card) .sbb-action {
|
|
2038
2145
|
pointer-events: all;
|
|
2039
2146
|
}
|
|
@@ -2227,41 +2334,6 @@ sbb-toggle:has(:focus-visible) {
|
|
|
2227
2334
|
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2228
2335
|
}
|
|
2229
2336
|
|
|
2230
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
2231
|
-
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
2232
|
-
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
2233
|
-
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
2234
|
-
}
|
|
2235
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
2236
|
-
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
2237
|
-
}
|
|
2238
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
2239
|
-
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
2240
|
-
}
|
|
2241
|
-
|
|
2242
|
-
sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
|
|
2243
|
-
padding-inline-end: 0;
|
|
2244
|
-
}
|
|
2245
|
-
|
|
2246
|
-
sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
|
|
2247
|
-
padding-block-start: var(--sbb-spacing-fixed-1x);
|
|
2248
|
-
}
|
|
2249
|
-
sbb-dialog[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element),[state--has-intermediate-element]) > * > sbb-dialog-content {
|
|
2250
|
-
--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
|
|
2251
|
-
--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
|
|
2252
|
-
}
|
|
2253
|
-
|
|
2254
|
-
sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
|
|
2255
|
-
position: absolute;
|
|
2256
|
-
z-index: 1;
|
|
2257
|
-
}
|
|
2258
|
-
sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
|
|
2259
|
-
--_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
|
|
2260
|
-
}
|
|
2261
|
-
sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
|
|
2262
|
-
--_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
|
|
2263
|
-
}
|
|
2264
|
-
|
|
2265
2337
|
sbb-notification:has(sbb-title) {
|
|
2266
2338
|
--_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
|
|
2267
2339
|
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
|
|
@@ -2271,14 +2343,6 @@ sbb-notification:has(sbb-title)[size=s] {
|
|
|
2271
2343
|
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
|
|
2272
2344
|
}
|
|
2273
2345
|
|
|
2274
|
-
sbb-status:has(sbb-title) {
|
|
2275
|
-
--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
|
|
2276
|
-
--_sbb-status-text-color-override: var(--sbb-color-granite);
|
|
2277
|
-
--_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
2278
|
-
--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
|
|
2279
|
-
--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
|
|
2280
|
-
}
|
|
2281
|
-
|
|
2282
2346
|
.sbb-overlay-outlet {
|
|
2283
2347
|
position: fixed;
|
|
2284
2348
|
inset: 0;
|