@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,8 +1,8 @@
|
|
|
1
1
|
var w = (e) => {
|
|
2
2
|
throw TypeError(e);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var x = (e, a, o) => a.has(e) || w("Cannot " + o);
|
|
5
|
+
var h = (e, a, o) => (x(e, a, "read from private field"), o ? o.call(e) : a.get(e)), g = (e, a, o) => a.has(e) ? w("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, o), b = (e, a, o, s) => (x(e, a, "write to private field"), s ? s.call(e, o) : a.set(e, o), o);
|
|
6
6
|
import { __esDecorate as p, __runInitializers as d } from "tslib";
|
|
7
7
|
import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
|
|
8
8
|
import { customElement as O, property as E } from "lit/decorators.js";
|
|
@@ -11,19 +11,19 @@ import { html as A } from "lit/static-html.js";
|
|
|
11
11
|
import { isZeroAnimationDuration as D } from "../../core/dom.js";
|
|
12
12
|
import { boxSizingStyles as z } from "../../core/styles.js";
|
|
13
13
|
import { SbbOverlayBaseElement as I, overlayRefs as R, SbbOverlayCloseEvent as C } from "../../overlay.js";
|
|
14
|
-
import { css as
|
|
14
|
+
import { css as q } from "lit";
|
|
15
15
|
import "../../screen-reader-only.js";
|
|
16
16
|
import { SbbOverlayCloseEvent as X, assignOverlayResult as Y } from "../../overlay/overlay-base-element.js";
|
|
17
|
-
const
|
|
17
|
+
const L = q`:host{--sbb-dialog-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);--sbb-dialog-shadow-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:none;position:fixed;inset:var(--sbb-dialog-inset);z-index:var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index))}@media(min-width:64rem){:host{--sbb-dialog-max-width: min( calc(100vw - var(--sbb-spacing-fixed-30x) * 2), var(--sbb-dialog-max-width-default) )}}:host(:is(:state(top-shadow),[state--top-shadow])){--sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-pointer-events: all;--sbb-dialog-backdrop-color: var(--sbb-background-color-3)}@media(min-width:64rem){:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-visibility: visible;--sbb-dialog-backdrop-pointer-events: all}}:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent)}:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color: var(--sbb-background-color-3)}:host(:not([negative])){--_sbb-dialog-color: var(--sbb-dialog-color);--_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);--sbb-dialog-actions-border-color: var(--sbb-background-color-4);--sbb-dialog-background-color: var(--sbb-background-color-1)}:host([negative]){--_sbb-dialog-color: var(--sbb-dialog-color-negative);--_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow-negative);--sbb-dialog-background-color: var(--sbb-background-color-1-negative);--sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);--sbb-dialog-backdrop-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:state(bottom-shadow),[state--bottom-shadow])){--sbb-dialog-block-end-box-shadow: var(--_sbb-dialog-block-shadow);--sbb-dialog-actions-border-color: transparent}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-dialog-inset: 0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);display:flex;align-items:center;position:fixed;inset:var(--sbb-dialog-inset)}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);position:fixed;inset:var(--sbb-dialog-inset);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility}.sbb-dialog{display:none;position:absolute;inset-inline:0;margin:auto;padding:0;border:none;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);color:var(--_sbb-dialog-color);background-color:var(--sbb-dialog-background-color)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-dialog{display:block;animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease}:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog{pointer-events:none;animation-name:close}@media(forced-colors:active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media(min-width:64rem){.sbb-dialog{border-radius:var(--sbb-dialog-border-radius);overflow:hidden;height:auto}}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),.sbb-dialog__wrapper{width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height)}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper{display:grid;grid-template:"title close-button" auto "content content" 1fr "actions actions" auto/1fr auto;gap:0}@keyframes open{0%{opacity:0;translate:0 var(--sbb-spacing-fixed-4x)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:0 var(--sbb-spacing-fixed-4x)}}`;
|
|
18
18
|
let P = 0, M = (() => {
|
|
19
19
|
var l, r, n;
|
|
20
|
-
let e = [O("sbb-dialog")],
|
|
20
|
+
let e = [O("sbb-dialog")], a, o = [], s, v = I, m, u = [], k = [], _, f = [], y = [];
|
|
21
21
|
return n = class extends v {
|
|
22
22
|
constructor() {
|
|
23
23
|
super();
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
b(this, l, d(this, u, "close")), b(this, r, (d(this,
|
|
24
|
+
g(this, l);
|
|
25
|
+
g(this, r);
|
|
26
|
+
b(this, l, d(this, u, "close")), b(this, r, (d(this, k), d(this, f, "opaque"))), this._dialogContentResizeObserver = (d(this, y), new S(this, {
|
|
27
27
|
target: null,
|
|
28
28
|
skipInitial: !0,
|
|
29
29
|
callback: () => setTimeout(() => this._updateOverflowState())
|
|
@@ -38,14 +38,14 @@ let P = 0, M = (() => {
|
|
|
38
38
|
}
|
|
39
39
|
/** Backdrop click action. */
|
|
40
40
|
get backdropAction() {
|
|
41
|
-
return
|
|
41
|
+
return h(this, l);
|
|
42
42
|
}
|
|
43
43
|
set backdropAction(t) {
|
|
44
44
|
b(this, l, t);
|
|
45
45
|
}
|
|
46
46
|
/** Backdrop density. */
|
|
47
47
|
get backdrop() {
|
|
48
|
-
return
|
|
48
|
+
return h(this, r);
|
|
49
49
|
}
|
|
50
50
|
set backdrop(t) {
|
|
51
51
|
b(this, r, t);
|
|
@@ -82,8 +82,8 @@ let P = 0, M = (() => {
|
|
|
82
82
|
this._syncTitleNegative(), this._detectIntermediateElement();
|
|
83
83
|
}
|
|
84
84
|
_syncTitleNegative() {
|
|
85
|
-
const t = this.querySelector?.("sbb-dialog-title"),
|
|
86
|
-
t && (t.negative = this.negative),
|
|
85
|
+
const t = this.querySelector?.("sbb-dialog-title"), i = this.querySelector?.("sbb-dialog-close-button");
|
|
86
|
+
t && (t.negative = this.negative), i && (i.negative = this.negative);
|
|
87
87
|
}
|
|
88
88
|
_detectIntermediateElement() {
|
|
89
89
|
const t = this.querySelector(":scope > :is(sbb-dialog-title, sbb-dialog-close-button, sbb-dialog-content, sbb-dialog-actions)") === null;
|
|
@@ -132,14 +132,14 @@ let P = 0, M = (() => {
|
|
|
132
132
|
<sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
|
|
133
133
|
`;
|
|
134
134
|
}
|
|
135
|
-
}, l = new WeakMap(), r = new WeakMap(),
|
|
135
|
+
}, l = new WeakMap(), r = new WeakMap(), s = n, (() => {
|
|
136
136
|
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
|
|
137
|
-
m = [E({ attribute: "backdrop-action" })],
|
|
138
|
-
|
|
139
|
-
} }, metadata: t }, u,
|
|
140
|
-
|
|
141
|
-
} }, metadata: t },
|
|
142
|
-
})(), n.styles = [z,
|
|
137
|
+
m = [E({ attribute: "backdrop-action" })], _ = [E({ attribute: "backdrop", reflect: !0 })], p(n, null, m, { kind: "accessor", name: "backdropAction", static: !1, private: !1, access: { has: (i) => "backdropAction" in i, get: (i) => i.backdropAction, set: (i, c) => {
|
|
138
|
+
i.backdropAction = c;
|
|
139
|
+
} }, metadata: t }, u, k), p(n, null, _, { kind: "accessor", name: "backdrop", static: !1, private: !1, access: { has: (i) => "backdrop" in i, get: (i) => i.backdrop, set: (i, c) => {
|
|
140
|
+
i.backdrop = c;
|
|
141
|
+
} }, metadata: t }, f, y), p(null, a = { value: s }, e, { kind: "class", name: s.name, metadata: t }, null, o), s = a.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
142
|
+
})(), n.styles = [z, L], d(s, o), s;
|
|
143
143
|
})();
|
|
144
144
|
export {
|
|
145
145
|
X as SbbDialogCloseEvent,
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { __esDecorate as b, __runInitializers as c } from "tslib";
|
|
2
2
|
import { customElement as d } from "lit/decorators.js";
|
|
3
|
-
import { SbbActionGroupElement as
|
|
3
|
+
import { SbbActionGroupElement as r } from "../../action-group.js";
|
|
4
4
|
import { isLean as l } from "../../core/dom/lean-context.js";
|
|
5
5
|
import { css as m } from "lit";
|
|
6
|
-
const
|
|
6
|
+
const u = m`:host{grid-area:actions;padding-inline:var(--sbb-dialog-padding-inline);padding-block:var(--sbb-dialog-padding-block);margin-block-start:auto;background-color:var(--sbb-dialog-background-color);transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-end-box-shadow, none);position:relative}:host:before{content:"";display:block;position:absolute;align-self:start;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);transition:border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);inset:0 auto auto 0;width:100%}@media(forced-colors:active){:host:before{border-color:CanvasText}}`;
|
|
7
7
|
let k = (() => {
|
|
8
8
|
var o;
|
|
9
|
-
let n = [d("sbb-dialog-actions")], i, s = [], a,
|
|
10
|
-
return o = class extends
|
|
9
|
+
let n = [d("sbb-dialog-actions")], i, s = [], a, e = r;
|
|
10
|
+
return o = class extends e {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(), this.buttonSize = l() ? "s" : "m", this.linkSize = l() ? "xs" : "s";
|
|
13
13
|
}
|
|
14
14
|
}, a = o, (() => {
|
|
15
|
-
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
15
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
|
|
16
16
|
b(null, i = { value: a }, n, { kind: "class", name: a.name, metadata: t }, null, s), a = i.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
17
|
-
})(), o.styles = [
|
|
17
|
+
})(), o.styles = [r.styles, u], c(a, s), a;
|
|
18
18
|
})();
|
|
19
19
|
export {
|
|
20
20
|
k as SbbDialogActionsElement
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { __esDecorate as o, __runInitializers as c } from "tslib";
|
|
2
2
|
import { customElement as b } from "lit/decorators.js";
|
|
3
|
-
import { SbbSecondaryButtonElement as
|
|
3
|
+
import { SbbSecondaryButtonElement as n } from "../../button/secondary-button.js";
|
|
4
4
|
import { SbbLanguageController as m } from "../../core/controllers.js";
|
|
5
5
|
import { i18nCloseDialog as u } from "../../core/i18n.js";
|
|
6
6
|
import { css as d } from "lit";
|
|
7
|
-
const
|
|
8
|
-
let
|
|
7
|
+
const g = d`:host{display:block;height:fit-content;grid-area:close-button;margin-inline:var(--sbb-dialog-close-button-margin-inline);inset-inline-end:var(--sbb-dialog-close-button-inset-inline-end);margin-block-start:calc(var(--sbb-dialog-padding-block) + .5 * (var(--sbb-typo-line-height-heading) * var(--_sbb-dialog-title-size, var(--sbb-heading-font-size-4)) - var(--sbb-size-element-xs)))}`;
|
|
8
|
+
let S = (() => {
|
|
9
9
|
var t;
|
|
10
|
-
let
|
|
11
|
-
return t = class extends
|
|
10
|
+
let i = [b("sbb-dialog-close-button")], l, r = [], e, s = n;
|
|
11
|
+
return t = class extends s {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(), this._languageController = new m(this), this.size = "s";
|
|
14
14
|
}
|
|
@@ -22,10 +22,10 @@ let x = (() => {
|
|
|
22
22
|
return super.renderIconName() || "cross-small";
|
|
23
23
|
}
|
|
24
24
|
}, e = t, (() => {
|
|
25
|
-
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
26
|
-
o(null,
|
|
27
|
-
})(), t.styles = [
|
|
25
|
+
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
|
|
26
|
+
o(null, l = { value: e }, i, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
|
|
27
|
+
})(), t.styles = [n.styles, g], c(e, r), e;
|
|
28
28
|
})();
|
|
29
29
|
export {
|
|
30
|
-
|
|
30
|
+
S as SbbDialogCloseButtonElement
|
|
31
31
|
};
|
|
@@ -2,26 +2,26 @@ var j = (i) => {
|
|
|
2
2
|
throw TypeError(i);
|
|
3
3
|
};
|
|
4
4
|
var D = (i, s, a) => s.has(i) || j("Cannot " + a);
|
|
5
|
-
var h = (i, s, a) => (D(i, s, "read from private field"), a ? a.call(i) : s.get(i)), v = (i, s, a) => s.has(i) ? j("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), p = (i, s, a,
|
|
6
|
-
import { __esDecorate as
|
|
5
|
+
var h = (i, s, a) => (D(i, s, "read from private field"), a ? a.call(i) : s.get(i)), v = (i, s, a) => s.has(i) ? j("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), p = (i, s, a, l) => (D(i, s, "write to private field"), l ? l.call(i, a) : s.set(i, a), a);
|
|
6
|
+
import { __esDecorate as u, __runInitializers as r } from "tslib";
|
|
7
7
|
import { css as O, LitElement as B, nothing as C } from "lit";
|
|
8
|
-
import { customElement as F, property as
|
|
8
|
+
import { customElement as F, property as g } from "lit/decorators.js";
|
|
9
9
|
import { unsafeStatic as A, html as M } from "lit/static-html.js";
|
|
10
10
|
import { forceType as N } from "../core/decorators.js";
|
|
11
11
|
import { SbbNegativeMixin as G } from "../core/mixins.js";
|
|
12
12
|
import { boxSizingStyles as P } from "../core/styles.js";
|
|
13
|
-
const q = O`:host{
|
|
13
|
+
const q = O`:host{--sbb-link-text-decoration-line: none;display:block}:host([negative]){--sbb-footer-background-color: var(--sbb-background-color-2-negative);--sbb-footer-color: var(--sbb-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-footer{font-size:var(--sbb-footer-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-footer-color);padding-block:var(--sbb-footer-padding-block);background-color:var(--sbb-footer-background-color)}@media(forced-colors:active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-footer__title{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}::slotted(.sbb-link-list-button-group){display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-6x);align-items:flex-start}:host([variant=clock-columns]) slot{display:grid;grid-template-columns:auto;grid-template-rows:auto;column-gap:var(--sbb-footer-gap-horizontal)}@media(min-width:37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media(min-width:90rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);margin-inline:auto;grid-template-columns:repeat(4,1fr)}}:host([variant=clock-columns]) ::slotted(*:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){align-self:start;grid-row:2}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:1;grid-column:4/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:3;grid-column:1/4;width:100%}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:4}}@media(min-width:64rem){:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/4}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/5}}`;
|
|
14
14
|
let Y = (() => {
|
|
15
|
-
var n,
|
|
16
|
-
let i = [F("sbb-footer")], s, a = [],
|
|
15
|
+
var n, d, b, m, o;
|
|
16
|
+
let i = [F("sbb-footer")], s, a = [], l, f = G(B), _, y = [], x = [], k, w = [], T = [], z, L = [], S = [], I, E = [], $ = [];
|
|
17
17
|
return o = class extends f {
|
|
18
18
|
constructor() {
|
|
19
19
|
super(...arguments);
|
|
20
|
-
v(this, n,
|
|
21
|
-
v(this,
|
|
22
|
-
v(this,
|
|
23
|
-
v(this, m, (
|
|
24
|
-
|
|
20
|
+
v(this, n, r(this, y, "default"));
|
|
21
|
+
v(this, d, (r(this, x), r(this, w, !1)));
|
|
22
|
+
v(this, b, (r(this, T), r(this, L, "")));
|
|
23
|
+
v(this, m, (r(this, S), r(this, E, "1")));
|
|
24
|
+
r(this, $);
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
27
|
* Variants to display the footer. The default, displays the content in regular block element
|
|
@@ -39,17 +39,17 @@ let Y = (() => {
|
|
|
39
39
|
* By default, the content has the appropriate page size.
|
|
40
40
|
*/
|
|
41
41
|
get expanded() {
|
|
42
|
-
return h(this,
|
|
42
|
+
return h(this, d);
|
|
43
43
|
}
|
|
44
44
|
set expanded(e) {
|
|
45
|
-
p(this,
|
|
45
|
+
p(this, d, e);
|
|
46
46
|
}
|
|
47
47
|
/** Footer title text, visually hidden, necessary for screen readers. */
|
|
48
48
|
get accessibilityTitle() {
|
|
49
|
-
return h(this,
|
|
49
|
+
return h(this, b);
|
|
50
50
|
}
|
|
51
51
|
set accessibilityTitle(e) {
|
|
52
|
-
p(this,
|
|
52
|
+
p(this, b, e);
|
|
53
53
|
}
|
|
54
54
|
/** Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1. */
|
|
55
55
|
get accessibilityTitleLevel() {
|
|
@@ -70,18 +70,18 @@ let Y = (() => {
|
|
|
70
70
|
</footer>
|
|
71
71
|
`;
|
|
72
72
|
}
|
|
73
|
-
}, n = new WeakMap(),
|
|
73
|
+
}, n = new WeakMap(), d = new WeakMap(), b = new WeakMap(), m = new WeakMap(), l = o, (() => {
|
|
74
74
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
|
|
75
|
-
|
|
75
|
+
_ = [g({ reflect: !0 })], k = [N(), g({ reflect: !0, type: Boolean })], z = [N(), g({ attribute: "accessibility-title" })], I = [g({ attribute: "accessibility-title-level" })], u(o, null, _, { kind: "accessor", name: "variant", static: !1, private: !1, access: { has: (t) => "variant" in t, get: (t) => t.variant, set: (t, c) => {
|
|
76
76
|
t.variant = c;
|
|
77
|
-
} }, metadata: e },
|
|
77
|
+
} }, metadata: e }, y, x), u(o, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, c) => {
|
|
78
78
|
t.expanded = c;
|
|
79
|
-
} }, metadata: e }, w, T),
|
|
79
|
+
} }, metadata: e }, w, T), u(o, null, z, { kind: "accessor", name: "accessibilityTitle", static: !1, private: !1, access: { has: (t) => "accessibilityTitle" in t, get: (t) => t.accessibilityTitle, set: (t, c) => {
|
|
80
80
|
t.accessibilityTitle = c;
|
|
81
|
-
} }, metadata: e }, L, S),
|
|
81
|
+
} }, metadata: e }, L, S), u(o, null, I, { kind: "accessor", name: "accessibilityTitleLevel", static: !1, private: !1, access: { has: (t) => "accessibilityTitleLevel" in t, get: (t) => t.accessibilityTitleLevel, set: (t, c) => {
|
|
82
82
|
t.accessibilityTitleLevel = c;
|
|
83
|
-
} }, metadata: e }, E, $),
|
|
84
|
-
})(), o.styles = [P, q], l
|
|
83
|
+
} }, metadata: e }, E, $), u(null, s = { value: l }, i, { kind: "class", name: l.name, metadata: e }, null, a), l = s.value, e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
84
|
+
})(), o.styles = [P, q], r(l, a), l;
|
|
85
85
|
})();
|
|
86
86
|
export {
|
|
87
87
|
Y as SbbFooterElement
|
|
@@ -14,7 +14,7 @@ import { i18nOptional as ye } from "../../core/i18n.js";
|
|
|
14
14
|
import { SbbNegativeMixin as xe, SbbElementInternalsMixin as Ee, SbbHydrationMixin as we, removeAriaElements as ke, appendAriaElements as ze } from "../../core/mixins.js";
|
|
15
15
|
import { boxSizingStyles as Ie } from "../../core/styles.js";
|
|
16
16
|
import "../../icon.js";
|
|
17
|
-
const Se = pe`@charset "UTF-8";:host{display:inline-block;color:var(--sbb-color-3);--sbb-form-field-background-color: var(--sbb-background-color-1);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-3);--sbb-form-field-arrow-color: var(--sbb-color-3);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-text-font-size-m);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--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) )}@media(min-width:64rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media(forced-colors:active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-s);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:64rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error])))){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media(forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}.sbb-form-field__space-wrapper{display:flex;flex-direction:column;height:100%}.sbb-form-field__space-wrapper:before{content:"";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;flex:1;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;inset:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media(forced-colors:active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{display:flex;flex-direction:column;flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex;flex:1;align-items:start}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
|
|
17
|
+
const Se = pe`@charset "UTF-8";:host{display:inline-block;color:var(--sbb-color-3);--sbb-form-field-background-color: var(--sbb-background-color-1);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-3);--sbb-form-field-arrow-color: var(--sbb-color-3);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-text-font-size-m);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--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) )}@media(min-width:64rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media(forced-colors:active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-s);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:64rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error])))){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media(forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}.sbb-form-field__space-wrapper{display:flex;flex-direction:column;height:100%}.sbb-form-field__space-wrapper:before{content:"";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;flex:1;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;inset:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media(forced-colors:active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{display:flex;flex-direction:column;flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex;flex:1;align-items:start}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
|
|
18
18
|
let ne = 0;
|
|
19
19
|
const z = /* @__PURE__ */ new WeakMap(), be = ["input", "textarea", "select"];
|
|
20
20
|
class qe extends Event {
|
|
@@ -22,7 +22,7 @@ let q = (() => {
|
|
|
22
22
|
v(this, n);
|
|
23
23
|
m(this, n, d(this, c, "")), this._dateAdapter = (d(this, p), L().datetime?.dateAdapter ?? D), this._monthNames = this._dateAdapter.getMonthNames("short"), this._monthLabel = null, this._yearLabel = null;
|
|
24
24
|
}
|
|
25
|
-
/** Date as ISO string (YYYY-MM
|
|
25
|
+
/** Date as ISO string (YYYY-MM) */
|
|
26
26
|
get date() {
|
|
27
27
|
return u(this, n);
|
|
28
28
|
}
|
package/off-brand-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;
|