@sbb-esta/lyne-elements-dev 5.10.0-dev.1791362600 → 5.10.0-dev.1791383702
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/development/expansion-panel.pure.js +2 -2
- package/expansion-panel/_expansion-panel.global.scss +2 -2
- package/expansion-panel.pure.js +2 -2
- package/lean-off-brand-theme.css +2 -2
- package/lean-safety-theme.css +2 -2
- package/lean-theme.css +2 -2
- package/off-brand-theme.css +2 -2
- package/package.json +2 -2
- package/safety-theme.css +2 -2
- package/standard-theme.css +2 -2
|
@@ -44,7 +44,7 @@ var SbbExpansionPanelContentElement = class extends SbbElement {
|
|
|
44
44
|
|
|
45
45
|
//#endregion
|
|
46
46
|
//#region src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss?inline
|
|
47
|
-
var expansion_panel_header_default = ":host {\n --sbb-expansion-panel-header-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n
|
|
47
|
+
var expansion_panel_header_default = ":host {\n --sbb-expansion-panel-header-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n position: relative;\n}\n:host::after {\n content: \"\";\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n border-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-s);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-s);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-s);\n}\n\n:host(:is(:state(size-l),[state--size-l])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-l);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-l);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-l);\n}\n\n:host(:not(:is(:state(size-s),[state--size-s]), :is(:state(size-l),[state--size-l]))) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-default);\n --sbb-expansion-panel-header-padding-block: var(\n --sbb-expansion-panel-header-padding-block-default\n );\n --sbb-expansion-panel-header-padding-inline: var(\n --sbb-expansion-panel-header-padding-inline-default\n );\n}\n\n:host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);\n --sbb-expansion-panel-header-text-color: var(--sbb-color-granite);\n --sbb-expansion-panel-header-text-color: light-dark(\n var(--sbb-color-granite),\n var(--sbb-color-storm)\n );\n}\n@media (forced-colors: active) {\n :host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-text-color: GrayText;\n }\n}\n\n:host(:not([disabled], [aria-expanded=true]):is(:state(toggle-hover),[state--toggle-hover])) {\n --sbb-expansion-panel-header-translate: 0 var(--sbb-expansion-panel-header-translate-y-hover, 0);\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n:host(:focus-visible)::after {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-spacing-fixed-1x);\n}\n\n.sbb-expansion-panel-header {\n display: flex;\n justify-content: var(--sbb-expansion-panel-header-justify-content);\n align-items: center;\n gap: var(--sbb-expansion-panel-header-gap);\n width: 100%;\n padding: var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);\n text-align: start;\n cursor: var(--sbb-expansion-panel-header-cursor);\n color: var(--sbb-expansion-panel-header-text-color);\n font-size: var(--sbb-expansion-panel-header-font-size);\n font-weight: normal;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n -webkit-tap-highlight-color: transparent;\n transition: translate var(--sbb-expansion-panel-header-transition-duration) var(--sbb-expansion-panel-transition-easing-function);\n translate: var(--sbb-expansion-panel-header-translate, none);\n}\n\n.sbb-expansion-panel-header__title,\n.sbb-expansion-panel-header__toggle,\n.sbb-expansion-panel-header__icon {\n display: flex;\n}\n\n.sbb-expansion-panel-header__icon {\n width: var(--sbb-expansion-panel-icon-size);\n --sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);\n --sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon {\n display: none;\n}\n\n.sbb-expansion-panel-header__title {\n align-items: center;\n gap: var(--sbb-expansion-panel-title-gap);\n overflow: hidden;\n min-height: var(--sbb-size-icon-ui-medium);\n}\n\n.sbb-expansion-panel-header__toggle-icon {\n transition: transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));\n}\n:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon {\n transform: rotate(-180deg);\n}\n";
|
|
48
48
|
|
|
49
49
|
//#endregion
|
|
50
50
|
//#region src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.component.ts
|
|
@@ -126,7 +126,7 @@ var SbbExpansionPanelHeaderElement = class extends SbbDisabledTabIndexActionMixi
|
|
|
126
126
|
|
|
127
127
|
//#endregion
|
|
128
128
|
//#region src/elements/expansion-panel/expansion-panel/expansion-panel.scss?inline
|
|
129
|
-
var expansion_panel_default = ":host {\n --sbb-expansion-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-expansion-panel-border-color: var(--sbb-border-color-4-inverted);\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-color: var(--sbb-expansion-panel-border-color);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n display: block;\n background-color: var(--sbb-expansion-panel-background-color);\n border: var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);\n border-block-start-color: var(--sbb-expansion-panel-border-block-start-color);\n border-block-start-width: var(--sbb-expansion-panel-border-block-start-width);\n border-radius: var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);\n background-clip: padding-box;\n}\n\n:host([size=s]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-s);\n}\n\n:host([size=l]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-l);\n}\n\n:host(:not([size])) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-default);\n}\n\n@media (forced-colors: active) {\n :host([disabled]) {\n --sbb-expansion-panel-border-color: GrayText;\n --sbb-expansion-panel-border-block-start-color: GrayText;\n }\n}\n\n:host([expanded]) {\n --_sbb-expansion-panel-display-expanded: grid;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])) {\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n --sbb-expansion-panel-start-end-radius: 0;\n --sbb-expansion-panel-start-start-radius: 0;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])) {\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))) {\n --sbb-expansion-panel-end-end-radius: 0;\n --sbb-expansion-panel-end-start-radius: 0;\n}\n\n:host([color=white]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=milk]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-3);\n}\n\n:host([borderless]) {\n --sbb-expansion-panel-border-width: 0;\n --sbb-expansion-panel-border-color: transparent;\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n}\n@media (forced-colors: active) {\n :host([borderless]) {\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n }\n}\n\n:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x);\n}\n@media (forced-colors: active) {\n :host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n }\n}\n\n@media (forced-colors: active) {\n :host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])) {\n --sbb-expansion-panel-border-color: Highlight;\n --sbb-expansion-panel-border-block-start-color: Highlight;\n }\n}\n\n.sbb-expansion-panel__header {\n margin: 0;\n}\n\n.sbb-expansion-panel__content-wrapper {\n display: var(--_sbb-expansion-panel-display-expanded, none);\n grid-template-rows: 0fr;\n opacity: 0;\n}\n:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper {\n grid-template-rows: 1fr;\n opacity: 1;\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper {\n animation-name: open, open-opacity;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n animation-delay: 0s, var(--sbb-expansion-panel-animation-duration);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper {\n display: grid;\n visibility: hidden;\n animation-name: close;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n}\n\n.sbb-expansion-panel__content {\n min-height: 0;\n min-width: 0;\n}\n\n@keyframes open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n@keyframes open-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n grid-template-rows: 1fr;\n opacity: 1;\n }\n to {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n}\n";
|
|
129
|
+
var expansion_panel_default = ":host {\n --sbb-expansion-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-expansion-panel-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-expansion-panel-border-color: var(--sbb-border-color-4-inverted);\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-color: var(--sbb-expansion-panel-border-color);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n display: block;\n background-color: var(--sbb-expansion-panel-background-color);\n border: var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);\n border-block-start-color: var(--sbb-expansion-panel-border-block-start-color);\n border-block-start-width: var(--sbb-expansion-panel-border-block-start-width);\n border-radius: var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);\n background-clip: padding-box;\n transition: box-shadow var(--sbb-expansion-panel-transition-duration) var(--sbb-expansion-panel-transition-easing-function);\n}\n\n:host([size=s]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-s);\n}\n\n:host([size=l]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-l);\n}\n\n:host(:not([size])) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-default);\n}\n\n@media (forced-colors: active) {\n :host([disabled]) {\n --sbb-expansion-panel-border-color: GrayText;\n --sbb-expansion-panel-border-block-start-color: GrayText;\n }\n}\n\n:host([expanded]) {\n --_sbb-expansion-panel-display-expanded: grid;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])) {\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n --sbb-expansion-panel-start-end-radius: 0;\n --sbb-expansion-panel-start-start-radius: 0;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])) {\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))) {\n --sbb-expansion-panel-end-end-radius: 0;\n --sbb-expansion-panel-end-start-radius: 0;\n}\n\n:host([color=white]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=milk]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-3);\n}\n\n:host([borderless]) {\n --sbb-expansion-panel-border-width: 0;\n --sbb-expansion-panel-border-color: transparent;\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n}\n@media (forced-colors: active) {\n :host([borderless]) {\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n }\n}\n\n:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x);\n}\n@media (forced-colors: active) {\n :host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n }\n}\n\n@media (forced-colors: active) {\n :host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])) {\n --sbb-expansion-panel-border-color: Highlight;\n --sbb-expansion-panel-border-block-start-color: Highlight;\n }\n}\n\n:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])) {\n box-shadow: var(--sbb-expansion-panel-box-shadow-hover);\n isolation: isolate;\n}\n\n.sbb-expansion-panel__header {\n margin: 0;\n}\n\n.sbb-expansion-panel__content-wrapper {\n display: var(--_sbb-expansion-panel-display-expanded, none);\n grid-template-rows: 0fr;\n opacity: 0;\n}\n:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper {\n grid-template-rows: 1fr;\n opacity: 1;\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper {\n animation-name: open, open-opacity;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n animation-delay: 0s, var(--sbb-expansion-panel-animation-duration);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper {\n display: grid;\n visibility: hidden;\n animation-name: close;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n}\n\n.sbb-expansion-panel__content {\n min-height: 0;\n min-width: 0;\n}\n\n@keyframes open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n@keyframes open-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n grid-template-rows: 1fr;\n opacity: 1;\n }\n to {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n}\n";
|
|
130
130
|
|
|
131
131
|
//#endregion
|
|
132
132
|
//#region src/elements/expansion-panel/expansion-panel/expansion-panel.component.ts
|
|
@@ -5,6 +5,8 @@ $theme: 'standard' !default;
|
|
|
5
5
|
@mixin base {
|
|
6
6
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
7
7
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
8
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
9
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
8
10
|
|
|
9
11
|
// Vars which will be used by child components
|
|
10
12
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
@@ -58,9 +60,7 @@ $theme: 'standard' !default;
|
|
|
58
60
|
),
|
|
59
61
|
$theme
|
|
60
62
|
)};
|
|
61
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
62
63
|
--sbb-expansion-panel-header-translate-y-hover: #{sbb.px-to-rem-build(-2)};
|
|
63
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
@mixin forced-colors {
|
package/expansion-panel.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbMediaMatcherController as o,SbbMediaQueryHover as s,SbbPropertyWatcherController as c,forceType as l,isZeroAnimationDuration as u,ɵstateController as d}from"./core.js";import{SbbIconNameMixin as f}from"./icon.pure.js";import{__esDecorate as p,__runInitializers as m}from"tslib";import{property as h}from"lit/decorators.js";var g=`:host{--sbb-expansion-panel-content-padding-inline-start:var(--sbb-expansion-panel-content-padding-inline);padding-block-end:var(--sbb-expansion-panel-content-padding-block-end);padding-inline:var(--sbb-expansion-panel-content-padding-inline-start) var(--sbb-expansion-panel-content-padding-inline);display:block}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-default)}@media (width>=37.5rem){:host(:is(:state(icon-space),[state--icon-space])){--sbb-expansion-panel-content-padding-inline-start:calc(var(--sbb-expansion-panel-content-padding-inline) + var(--sbb-expansion-panel-icon-size) + var(--sbb-expansion-panel-title-gap))}}::slotted(:is(p,sbb-title):first-child){margin-block-start:0}
|
|
2
|
-
`,_=class extends a{static{this.elementName=`sbb-expansion-panel-content`}static{this.role=`region`}static{this.styles=[n(g)]}constructor(){super(),this._previousSize=null,this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`content`}render(){return e`<slot></slot>`}},v=`:host{--sbb-expansion-panel-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));
|
|
2
|
+
`,_=class extends a{static{this.elementName=`sbb-expansion-panel-content`}static{this.role=`region`}static{this.styles=[n(g)]}constructor(){super(),this._previousSize=null,this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`content`}render(){return e`<slot></slot>`}},v=`:host{--sbb-expansion-panel-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));display:block;position:relative}:host:after{content:"";pointer-events:none;border-radius:var(--sbb-expansion-panel-border-radius);width:100%;height:100%;position:absolute;inset:0}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-s);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-s);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-l);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-l);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-default);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-default);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-default)}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor:var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color:GrayText}}:host(:not([disabled],[aria-expanded=true]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-header-translate:0 var(--sbb-expansion-panel-header-translate-y-hover,0)}:host(:focus-visible){outline:none}:host(:focus-visible):after{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-spacing-fixed-1x)}.sbb-expansion-panel-header{justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);font-size:var(--sbb-expansion-panel-header-font-size);letter-spacing:var(--sbb-letter-spacing-text);font-weight:400;line-height:var(--sbb-typo-line-height-text);-webkit-tap-highlight-color:transparent;transition:translate var(--sbb-expansion-panel-header-transition-duration) var(--sbb-expansion-panel-transition-easing-function);translate:var(--sbb-expansion-panel-header-translate,none);display:flex}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height:var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);min-height:var(--sbb-size-icon-ui-medium);overflow:hidden}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}
|
|
3
3
|
`,y=class extends i(f(r)){static{this.elementName=`sbb-expansion-panel-header`}static{this.styles=[n(v)]}static{this.events={toggleexpanded:`toggleexpanded`}}constructor(){super(),this._mediaMatcher=new o(this,{[s]:e=>this._isHover=e}),this._isHover=this._mediaMatcher.matches(s)??!1,this._previousSize=null,this.addEventListener?.(`click`,()=>this._emitExpandedEvent()),this.addEventListener?.(`mouseenter`,()=>this._onMouseMovement(!0)),this.addEventListener?.(`mouseleave`,()=>this._onMouseMovement(!1)),this.addEventListener?.(`slottedchange`,()=>this._setIconState()),this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`header`}_emitExpandedEvent(){this.disabled||this.dispatchEvent(new Event(`toggleexpanded`,{bubbles:!0,composed:!0}))}_onMouseMovement(e){let t=this.closest(`sbb-expansion-panel`);(!e||t&&this._isHover)&&(d(t).toggle(`toggle-hover`,e),this.toggleState(`toggle-hover`,e))}_setIconState(){this.toggleState(`icon`,!!(this.iconName||this.matches?.(`:is(:state(icon),[state--icon])`)))}renderTemplate(){return this._setIconState(),e`
|
|
4
4
|
<span class="sbb-expansion-panel-header__title">
|
|
5
5
|
<span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>
|
|
@@ -12,7 +12,7 @@ import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseEleme
|
|
|
12
12
|
>
|
|
13
13
|
</sbb-icon>
|
|
14
14
|
</span>`}
|
|
15
|
-
`}},b=`:host{--sbb-expansion-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-expansion-panel-border-color:var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color:var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius);background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box;display:block}:host([size=s]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-default)}@media (forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color:GrayText;--sbb-expansion-panel-border-block-start-color:GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded:grid}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent;--sbb-expansion-panel-start-end-radius:0;--sbb-expansion-panel-start-start-radius:0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius:0;--sbb-expansion-panel-end-start-radius:0}:host([color=white]){--sbb-expansion-panel-background-color:var(--sbb-background-color-1)}:host([color=milk]){--sbb-expansion-panel-background-color:var(--sbb-background-color-3)}:host([borderless]){--sbb-expansion-panel-border-width:0;--sbb-expansion-panel-border-color:transparent;--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent}@media (forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:var(--sbb-spacing-fixed-1x)}@media (forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color:Highlight;--sbb-expansion-panel-border-block-start-color:Highlight}}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded,none);opacity:0;grid-template-rows:0fr}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s, var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);display:grid}.sbb-expansion-panel__content{min-width:0;min-height:0}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{opacity:1;grid-template-rows:1fr}to{opacity:0;grid-template-rows:0fr}}
|
|
15
|
+
`}},b=`:host{--sbb-expansion-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-expansion-panel-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-expansion-panel-border-color:var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color:var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius);background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);transition:box-shadow var(--sbb-expansion-panel-transition-duration) var(--sbb-expansion-panel-transition-easing-function);background-clip:padding-box;display:block}:host([size=s]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-default)}@media (forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color:GrayText;--sbb-expansion-panel-border-block-start-color:GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded:grid}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent;--sbb-expansion-panel-start-end-radius:0;--sbb-expansion-panel-start-start-radius:0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius:0;--sbb-expansion-panel-end-start-radius:0}:host([color=white]){--sbb-expansion-panel-background-color:var(--sbb-background-color-1)}:host([color=milk]){--sbb-expansion-panel-background-color:var(--sbb-background-color-3)}:host([borderless]){--sbb-expansion-panel-border-width:0;--sbb-expansion-panel-border-color:transparent;--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent}@media (forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:var(--sbb-spacing-fixed-1x)}@media (forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color:Highlight;--sbb-expansion-panel-border-block-start-color:Highlight}}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){box-shadow:var(--sbb-expansion-panel-box-shadow-hover);isolation:isolate}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded,none);opacity:0;grid-template-rows:0fr}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s, var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);display:grid}.sbb-expansion-panel__content{min-width:0;min-height:0}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{opacity:1;grid-template-rows:1fr}to{opacity:0;grid-template-rows:0fr}}
|
|
16
16
|
`;let x=0,S=(()=>{let r=a,i=[],o,s=[],c=[],f,g=[],_=[],v,y,S,C=[],w=[],T,E=[],D=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[h({attribute:`title-level`})],f=[h({reflect:!0})],v=[h({reflect:!0,type:Boolean})],y=[h({reflect:!0,type:Boolean})],S=[l(),h({reflect:!0,type:Boolean})],T=[h({reflect:!0})],p(this,null,o,{kind:`accessor`,name:`titleLevel`,static:!1,private:!1,access:{has:e=>`titleLevel`in e,get:e=>e.titleLevel,set:(e,t)=>{e.titleLevel=t}},metadata:e},s,c),p(this,null,f,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:e},g,_),p(this,null,v,{kind:`setter`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,set:(e,t)=>{e.expanded=t}},metadata:e},null,i),p(this,null,y,{kind:`setter`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,set:(e,t)=>{e.disabled=t}},metadata:e},null,i),p(this,null,S,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},C,w),p(this,null,T,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},E,D),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-expansion-panel`}static{this.styles=[n(b)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get titleLevel(){return this.#e}set titleLevel(e){this.#e=e}#t;get color(){return this.#t}set color(e){this.#t=e}set expanded(e){this._expanded=e,this._onExpandedChange()}get expanded(){return this._expanded}set disabled(e){this._disabled=e,this._updateDisabledOnHeader(this._disabled)}get disabled(){return this._disabled}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=(m(this,i),m(this,s,null)),this.#t=(m(this,c),m(this,g,`white`)),this._expanded=(m(this,_),!1),this._disabled=!1,this.#n=m(this,C,!1),this.#r=(m(this,w),m(this,E,null)),this._stateInternal=m(this,D),this._progressiveId=`-${++x}`,this._state=`closed`,this.addEventListener?.(`toggleexpanded`,e=>{e.target===this._headerRef&&this._toggleExpanded()})}connectedCallback(){super.connectedCallback(),this.toggleState(`accordion`,!!this.closest?.(`sbb-accordion`))}disconnectedCallback(){super.disconnectedCallback(),this.internals.states.delete(`accordion`)}_toggleExpanded(){this.expanded=!this.expanded}_onExpandedChange(){this._headerRef?.setAttribute(`aria-expanded`,String(this.expanded)),this._contentRef?.setAttribute(`aria-hidden`,String(!this.expanded)),this.expanded?this._open():this._state===`opened`&&this._close()}_open(){this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`)),(!this.hasUpdated||this._isZeroAnimationDuration())&&this._handleOpening()}_close(){this._state=`closing`,this.dispatchEvent(new Event(`beforeclose`)),this._isZeroAnimationDuration()&&this._handleClosing()}_isZeroAnimationDuration(){return u(this,`--sbb-expansion-panel-animation-duration`)}_handleOpening(){this._state=`opened`,this.dispatchEvent(new Event(`open`))}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`))}_updateDisabledOnHeader(e){this._headerRef&&(this._headerRef.disabled=e)}_handleSlotchange(){let e=Array.from(this.children??[]),t=e.find(e=>e.localName===`sbb-expansion-panel-header`),n=e.find(e=>e.localName===`sbb-expansion-panel-content`);(this._headerRef!==t||this._contentRef!==n)&&(t&&this._headerRef!==t&&(t.id||=`sbb-expansion-panel-header${this._progressiveId}`,t.setAttribute(`aria-expanded`,String(this.expanded)),t.toggleAttribute(`disabled`,this.disabled)),n&&this._contentRef!==n&&(n.id||=`sbb-expansion-panel-content${this._progressiveId}`,n.setAttribute(`aria-hidden`,String(!this.expanded))),this._headerRef=t,this._contentRef=n,this._headerRef&&this._contentRef&&(this._headerRef.setAttribute(`aria-controls`,this._contentRef.id),this._contentRef.setAttribute(`aria-labelledby`,this._headerRef.id),d(this._contentRef).toggle(`icon-space`,d(this._headerRef).has(`icon`))))}_onAnimationEnd(e){e.animationName===`open-opacity`&&this._state===`opening`?this._handleOpening():e.animationName===`close`&&this._state===`closing`&&this._handleClosing()}render(){return e`
|
|
17
17
|
<div
|
|
18
18
|
role=${this.titleLevel?`heading`:t}
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1310,6 +1310,8 @@ summary {
|
|
|
1310
1310
|
--sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1311
1311
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
1312
1312
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1313
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1314
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
1313
1315
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
1314
1316
|
--sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
|
|
1315
1317
|
--sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
|
|
@@ -1331,9 +1333,7 @@ summary {
|
|
|
1331
1333
|
--sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
|
|
1332
1334
|
--sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
|
|
1333
1335
|
--sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-s);
|
|
1334
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1335
1336
|
--sbb-expansion-panel-header-translate-y-hover: -0.125rem;
|
|
1336
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
1337
1337
|
--sbb-file-selector-color: var(--sbb-color-2);
|
|
1338
1338
|
--sbb-file-selector-subtitle-color: var(--sbb-color-granite);
|
|
1339
1339
|
--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
package/lean-safety-theme.css
CHANGED
|
@@ -1330,6 +1330,8 @@ summary {
|
|
|
1330
1330
|
--sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1331
1331
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
1332
1332
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1333
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1334
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
1333
1335
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
1334
1336
|
--sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
|
|
1335
1337
|
--sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
|
|
@@ -1351,9 +1353,7 @@ summary {
|
|
|
1351
1353
|
--sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
|
|
1352
1354
|
--sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
|
|
1353
1355
|
--sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-s);
|
|
1354
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1355
1356
|
--sbb-expansion-panel-header-translate-y-hover: -0.125rem;
|
|
1356
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
1357
1357
|
--sbb-file-selector-color: var(--sbb-color-2);
|
|
1358
1358
|
--sbb-file-selector-subtitle-color: var(--sbb-color-granite);
|
|
1359
1359
|
--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
package/lean-theme.css
CHANGED
|
@@ -1330,6 +1330,8 @@ summary {
|
|
|
1330
1330
|
--sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1331
1331
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
1332
1332
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1333
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1334
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
1333
1335
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
1334
1336
|
--sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
|
|
1335
1337
|
--sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
|
|
@@ -1351,9 +1353,7 @@ summary {
|
|
|
1351
1353
|
--sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
|
|
1352
1354
|
--sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
|
|
1353
1355
|
--sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-s);
|
|
1354
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1355
1356
|
--sbb-expansion-panel-header-translate-y-hover: -0.125rem;
|
|
1356
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
1357
1357
|
--sbb-file-selector-color: var(--sbb-color-2);
|
|
1358
1358
|
--sbb-file-selector-subtitle-color: var(--sbb-color-granite);
|
|
1359
1359
|
--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
package/off-brand-theme.css
CHANGED
|
@@ -1310,6 +1310,8 @@ summary {
|
|
|
1310
1310
|
--sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1311
1311
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
1312
1312
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1313
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1314
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
1313
1315
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
1314
1316
|
--sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
|
|
1315
1317
|
--sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
|
|
@@ -1331,9 +1333,7 @@ summary {
|
|
|
1331
1333
|
--sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
|
|
1332
1334
|
--sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
|
|
1333
1335
|
--sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
|
|
1334
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1335
1336
|
--sbb-expansion-panel-header-translate-y-hover: -0.125rem;
|
|
1336
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
1337
1337
|
--sbb-file-selector-color: var(--sbb-color-2);
|
|
1338
1338
|
--sbb-file-selector-subtitle-color: var(--sbb-color-granite);
|
|
1339
1339
|
--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.10.0-dev.
|
|
3
|
+
"version": "5.10.0-dev.1791383702",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/90c9977c411f7213c5d8a8a930be4ea828f607f1"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1330,6 +1330,8 @@ summary {
|
|
|
1330
1330
|
--sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1331
1331
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
1332
1332
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1333
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1334
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
1333
1335
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
1334
1336
|
--sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
|
|
1335
1337
|
--sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
|
|
@@ -1351,9 +1353,7 @@ summary {
|
|
|
1351
1353
|
--sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
|
|
1352
1354
|
--sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
|
|
1353
1355
|
--sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
|
|
1354
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1355
1356
|
--sbb-expansion-panel-header-translate-y-hover: -0.125rem;
|
|
1356
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
1357
1357
|
--sbb-file-selector-color: var(--sbb-color-2);
|
|
1358
1358
|
--sbb-file-selector-subtitle-color: var(--sbb-color-granite);
|
|
1359
1359
|
--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
package/standard-theme.css
CHANGED
|
@@ -1330,6 +1330,8 @@ summary {
|
|
|
1330
1330
|
--sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1331
1331
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
1332
1332
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
1333
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1334
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
1333
1335
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
1334
1336
|
--sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
|
|
1335
1337
|
--sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
|
|
@@ -1351,9 +1353,7 @@ summary {
|
|
|
1351
1353
|
--sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
|
|
1352
1354
|
--sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
|
|
1353
1355
|
--sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
|
|
1354
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
1355
1356
|
--sbb-expansion-panel-header-translate-y-hover: -0.125rem;
|
|
1356
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
1357
1357
|
--sbb-file-selector-color: var(--sbb-color-2);
|
|
1358
1358
|
--sbb-file-selector-subtitle-color: var(--sbb-color-granite);
|
|
1359
1359
|
--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|