@sbb-esta/lyne-elements-dev 5.10.0-dev.1790760894 → 5.10.0-dev.1790846348

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.
Files changed (11) hide show
  1. package/development/expansion-panel.pure.js +6 -3
  2. package/expansion-panel/_expansion-panel.global.scss +3 -1
  3. package/expansion-panel.pure.js +3 -3
  4. package/lean-off-brand-theme.css +163 -1
  5. package/lean-safety-theme.css +163 -1
  6. package/lean-theme.css +163 -1
  7. package/off-brand-theme.css +163 -1
  8. package/package.json +2 -2
  9. package/safety-theme.css +163 -1
  10. package/standard-theme.css +163 -1
  11. package/table/_table.global.scss +229 -0
package/development/expansion-panel.pure.js CHANGED
@@ -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 display: block;\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(:focus-visible) {\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 border-radius: var(--sbb-expansion-panel-border-radius);\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}\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";
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 transition-property: translate, box-shadow;\n transition-duration: var(--sbb-expansion-panel-header-transition-duration);\n transition-timing-function: var(--sbb-expansion-panel-header-transition-easing-function);\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 box-shadow: var(--sbb-expansion-panel-header-box-shadow-hover);\n translate: 0 var(--sbb-expansion-panel-header-translate-y-hover, 0);\n}\n\n:host(:focus-visible) {\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 border-radius: var(--sbb-expansion-panel-border-radius);\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}\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
@@ -93,7 +93,10 @@ var SbbExpansionPanelHeaderElement = class extends SbbDisabledTabIndexActionMixi
93
93
  }
94
94
  _onMouseMovement(toggleDataAttribute) {
95
95
  const parent = this.closest("sbb-expansion-panel");
96
- if (!toggleDataAttribute || parent && this._isHover) ɵstateController(parent).toggle("toggle-hover", toggleDataAttribute);
96
+ if (!toggleDataAttribute || parent && this._isHover) {
97
+ ɵstateController(parent).toggle("toggle-hover", toggleDataAttribute);
98
+ this.toggleState("toggle-hover", toggleDataAttribute);
99
+ }
97
100
  }
98
101
  /**
99
102
  * The :is(:state(icon),[state--icon]) is used by the 'sbb-expansion-panel'.
@@ -123,7 +126,7 @@ var SbbExpansionPanelHeaderElement = class extends SbbDisabledTabIndexActionMixi
123
126
 
124
127
  //#endregion
125
128
  //#region src/elements/expansion-panel/expansion-panel/expansion-panel.scss?inline
126
- 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 --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);\n}\n\n:host([color=milk]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-3);\n --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-1);\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:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])) {\n background-color: var(--sbb-expansion-panel-background-color-hover);\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-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";
127
130
 
128
131
  //#endregion
129
132
  //#region src/elements/expansion-panel/expansion-panel/expansion-panel.component.ts
package/expansion-panel/_expansion-panel.global.scss CHANGED
@@ -4,7 +4,6 @@ $theme: 'standard' !default;
4
4
 
5
5
  @mixin base {
6
6
  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
7
- --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
8
7
  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
9
8
 
10
9
  // Vars which will be used by child components
@@ -59,6 +58,9 @@ $theme: 'standard' !default;
59
58
  ),
60
59
  $theme
61
60
  )};
61
+ --sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
62
+ --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);
62
64
  }
63
65
 
64
66
  @mixin forced-colors {
package/expansion-panel.pure.js CHANGED
@@ -1,6 +1,6 @@
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{display:block}: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(:focus-visible){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);border-radius:var(--sbb-expansion-panel-border-radius)}.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;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
- `,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)}_setIconState(){this.toggleState(`icon`,!!(this.iconName||this.matches?.(`:is(:state(icon),[state--icon])`)))}renderTemplate(){return this._setIconState(),e`
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));transition-property:translate,box-shadow;transition-duration:var(--sbb-expansion-panel-header-transition-duration);transition-timing-function:var(--sbb-expansion-panel-header-transition-easing-function);display:block}: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])){box-shadow:var(--sbb-expansion-panel-header-box-shadow-hover);translate:0 var(--sbb-expansion-panel-header-translate-y-hover,0)}:host(:focus-visible){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);border-radius:var(--sbb-expansion-panel-border-radius)}.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;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
+ `,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>
6
6
  <slot></slot>
@@ -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);--sbb-expansion-panel-background-color-hover:var(--sbb-background-color-3)}:host([color=milk]){--sbb-expansion-panel-background-color:var(--sbb-background-color-3);--sbb-expansion-panel-background-color-hover:var(--sbb-background-color-1)}: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])){background-color:var(--sbb-expansion-panel-background-color-hover)}@media (forced-colors:active){: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-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}}
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
@@ -1309,7 +1309,6 @@ summary {
1309
1309
  --sbb-download-info-color: var(--sbb-color-granite);
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
- --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
1313
1312
  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
1314
1313
  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
1315
1314
  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
@@ -1332,6 +1331,9 @@ summary {
1332
1331
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1333
1332
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1334
1333
  --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
+ --sbb-expansion-panel-header-translate-y-hover: -0.125rem;
1336
+ --sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
1335
1337
  --sbb-file-selector-color: var(--sbb-color-2);
1336
1338
  --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1337
1339
  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
@@ -1754,6 +1756,13 @@ summary {
1754
1756
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
1755
1757
  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
1756
1758
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
1759
+ --sbb-table-sort-header-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
1760
+ --sbb-table-sort-header-color: var(--sbb-color-2);
1761
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary125);
1762
+ --sbb-table-sort-header-hover-color: light-dark(
1763
+ var(--sbb-color-primary125),
1764
+ var(--sbb-color-primary85)
1765
+ );
1757
1766
  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
1758
1767
  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
1759
1768
  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -3256,6 +3265,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
3256
3265
  --sbb-disable-animation-duration,
3257
3266
  var(--sbb-animation-duration-6x)
3258
3267
  );
3268
+ --sbb-table-sort-header-animation-duration: var(
3269
+ --sbb-disable-animation-duration,
3270
+ var(--sbb-animation-duration-6x)
3271
+ );
3259
3272
  border-spacing: 0;
3260
3273
  caption-side: bottom;
3261
3274
  color: var(--sbb-table-color);
@@ -3342,6 +3355,8 @@ sbb-table-wrapper[negative] .sbb-table,
3342
3355
  --sbb-table-color: var(--sbb-color-1-negative);
3343
3356
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
3344
3357
  --sbb-table-caption-color: var(--sbb-color-cement);
3358
+ --sbb-table-sort-header-color: var(--sbb-color-2-negative);
3359
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary85);
3345
3360
  }
3346
3361
 
3347
3362
  .sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
@@ -3469,6 +3484,153 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
3469
3484
  text-align: right;
3470
3485
  }
3471
3486
 
3487
+ .sbb-sort-header {
3488
+ position: relative;
3489
+ }
3490
+ .sbb-sort-header:is(:focus-visible, .cdk-keyboard-focused, .cdk-program-focused), .sbb-sort-header:has(.sbb-sort-header-container:focus-visible) {
3491
+ --sbb-focus-outline-offset: calc(-1 * var(--sbb-focus-outline-width));
3492
+ outline-offset: var(--sbb-focus-outline-offset);
3493
+ outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
3494
+ }
3495
+ .sbb-sort-header:not(.sbb-sort-header-disabled) {
3496
+ cursor: pointer;
3497
+ }
3498
+ .sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
3499
+ color: var(--sbb-table-sort-header-hover-color);
3500
+ }
3501
+
3502
+ .sbb-sort-header-sorted {
3503
+ color: var(--sbb-table-sort-header-color);
3504
+ }
3505
+
3506
+ .sbb-sort-header-container {
3507
+ display: flex;
3508
+ letter-spacing: normal;
3509
+ text-align: left;
3510
+ height: 100%;
3511
+ outline: 0;
3512
+ }
3513
+ .sbb-sort-header-disabled .sbb-sort-header-container {
3514
+ cursor: default;
3515
+ }
3516
+ .sbb-table-align-center .sbb-sort-header-container {
3517
+ text-align: center;
3518
+ }
3519
+
3520
+ .sbb-sort-header-content {
3521
+ flex-shrink: 1;
3522
+ flex-grow: 1;
3523
+ }
3524
+
3525
+ .sbb-sort-header-position-before {
3526
+ flex-direction: row-reverse;
3527
+ }
3528
+
3529
+ .sbb-sort-header-arrow {
3530
+ height: var(--sbb-size-icon-ui-small);
3531
+ width: var(--sbb-size-icon-ui-small);
3532
+ min-width: var(--sbb-size-icon-ui-small);
3533
+ position: relative;
3534
+ opacity: 0;
3535
+ animation: var(--sbb-sort-header-animation-name) var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3536
+ transition-property: opacity, translate;
3537
+ transition-duration: var(--sbb-table-sort-header-animation-duration);
3538
+ transition-timing-function: var(--sbb-table-sort-header-animation-easing);
3539
+ margin: -0.0625rem -0.5rem -0.0625rem -0.25rem;
3540
+ }
3541
+ .sbb-sort-header-position-before .sbb-sort-header-arrow {
3542
+ margin: -0.0625rem -0.25rem -0.0625rem -0.0625rem;
3543
+ }
3544
+ .sbb-sort-header-arrow svg {
3545
+ width: 100%;
3546
+ height: 100%;
3547
+ }
3548
+ .sbb-sort-header-arrow svg :where(path:nth-child(2)) {
3549
+ transform-origin: center;
3550
+ }
3551
+ .sbb-sort-header-arrow.no-transition {
3552
+ transition: opacity 0ms, translate 0ms !important;
3553
+ }
3554
+ .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3555
+ opacity: 1;
3556
+ }
3557
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.desc-to-hint, .sbb-sort-header-arrow.asc-to-hint {
3558
+ opacity: 0.54;
3559
+ }
3560
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.void, .sbb-sort-header-arrow.hint-to-desc, .sbb-sort-header-arrow.active-to-desc, .sbb-sort-header-arrow.hint-to-asc, .sbb-sort-header-arrow.active-to-asc {
3561
+ opacity: 0;
3562
+ }
3563
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3564
+ translate: 0;
3565
+ }
3566
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.active-to-desc {
3567
+ translate: 0 25%;
3568
+ }
3569
+ .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.active-to-asc {
3570
+ translate: 0 -25%;
3571
+ }
3572
+ .sbb-sort-header-arrow.desc-to-hint {
3573
+ --sbb-sort-header-animation-name: move-desc-to-hint;
3574
+ translate: 0;
3575
+ }
3576
+ .sbb-sort-header-arrow.hint-to-desc {
3577
+ --sbb-sort-header-animation-name: move-hint-to-desc;
3578
+ translate: 0 25%;
3579
+ }
3580
+ .sbb-sort-header-arrow.asc-to-hint {
3581
+ --sbb-sort-header-animation-name: move-asc-to-hint;
3582
+ translate: 0;
3583
+ }
3584
+ .sbb-sort-header-arrow.hint-to-asc {
3585
+ --sbb-sort-header-animation-name: move-hint-to-asc;
3586
+ translate: 0 -25%;
3587
+ }
3588
+
3589
+ .sbb-sort-indicator {
3590
+ transition: scale var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3591
+ }
3592
+ .sbb-sort-indicator.asc, .sbb-sort-indicator.active-asc {
3593
+ scale: 1 -1;
3594
+ }
3595
+ .sbb-sort-indicator.desc, .sbb-sort-indicator.active-desc {
3596
+ scale: 1 1;
3597
+ }
3598
+ .sbb-sort-indicator.no-transition {
3599
+ transition: none !important;
3600
+ }
3601
+
3602
+ @keyframes move-desc-to-hint {
3603
+ from {
3604
+ translate: 0 25%;
3605
+ }
3606
+ to {
3607
+ translate: 0 0;
3608
+ }
3609
+ }
3610
+ @keyframes move-hint-to-desc {
3611
+ from {
3612
+ translate: 0 0;
3613
+ }
3614
+ to {
3615
+ translate: 0 25%;
3616
+ }
3617
+ }
3618
+ @keyframes move-asc-to-hint {
3619
+ from {
3620
+ translate: 0 -25%;
3621
+ }
3622
+ to {
3623
+ translate: 0 0;
3624
+ }
3625
+ }
3626
+ @keyframes move-hint-to-asc {
3627
+ from {
3628
+ translate: 0 0;
3629
+ }
3630
+ to {
3631
+ translate: 0 -25%;
3632
+ }
3633
+ }
3472
3634
  sbb-tab-nav-bar .sbb-tab-amount {
3473
3635
  margin: 0;
3474
3636
  color: var(--sbb-tab-label-amount-color);
package/lean-safety-theme.css CHANGED
@@ -1329,7 +1329,6 @@ summary {
1329
1329
  --sbb-download-info-color: var(--sbb-color-granite);
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
- --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
1333
1332
  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
1334
1333
  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
1335
1334
  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
@@ -1352,6 +1351,9 @@ summary {
1352
1351
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1353
1352
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1354
1353
  --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
+ --sbb-expansion-panel-header-translate-y-hover: -0.125rem;
1356
+ --sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
1355
1357
  --sbb-file-selector-color: var(--sbb-color-2);
1356
1358
  --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1357
1359
  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
@@ -1774,6 +1776,13 @@ summary {
1774
1776
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
1775
1777
  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
1776
1778
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
1779
+ --sbb-table-sort-header-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
1780
+ --sbb-table-sort-header-color: var(--sbb-color-2);
1781
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary125);
1782
+ --sbb-table-sort-header-hover-color: light-dark(
1783
+ var(--sbb-color-primary125),
1784
+ var(--sbb-color-primary85)
1785
+ );
1777
1786
  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
1778
1787
  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
1779
1788
  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -3276,6 +3285,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
3276
3285
  --sbb-disable-animation-duration,
3277
3286
  var(--sbb-animation-duration-6x)
3278
3287
  );
3288
+ --sbb-table-sort-header-animation-duration: var(
3289
+ --sbb-disable-animation-duration,
3290
+ var(--sbb-animation-duration-6x)
3291
+ );
3279
3292
  border-spacing: 0;
3280
3293
  caption-side: bottom;
3281
3294
  color: var(--sbb-table-color);
@@ -3362,6 +3375,8 @@ sbb-table-wrapper[negative] .sbb-table,
3362
3375
  --sbb-table-color: var(--sbb-color-1-negative);
3363
3376
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
3364
3377
  --sbb-table-caption-color: var(--sbb-color-cement);
3378
+ --sbb-table-sort-header-color: var(--sbb-color-2-negative);
3379
+ --sbb-table-sort-header-hover-color: var(--sbb-color-primary85);
3365
3380
  }
3366
3381
 
3367
3382
  .sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
@@ -3489,6 +3504,153 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
3489
3504
  text-align: right;
3490
3505
  }
3491
3506
 
3507
+ .sbb-sort-header {
3508
+ position: relative;
3509
+ }
3510
+ .sbb-sort-header:is(:focus-visible, .cdk-keyboard-focused, .cdk-program-focused), .sbb-sort-header:has(.sbb-sort-header-container:focus-visible) {
3511
+ --sbb-focus-outline-offset: calc(-1 * var(--sbb-focus-outline-width));
3512
+ outline-offset: var(--sbb-focus-outline-offset);
3513
+ outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
3514
+ }
3515
+ .sbb-sort-header:not(.sbb-sort-header-disabled) {
3516
+ cursor: pointer;
3517
+ }
3518
+ .sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
3519
+ color: var(--sbb-table-sort-header-hover-color);
3520
+ }
3521
+
3522
+ .sbb-sort-header-sorted {
3523
+ color: var(--sbb-table-sort-header-color);
3524
+ }
3525
+
3526
+ .sbb-sort-header-container {
3527
+ display: flex;
3528
+ letter-spacing: normal;
3529
+ text-align: left;
3530
+ height: 100%;
3531
+ outline: 0;
3532
+ }
3533
+ .sbb-sort-header-disabled .sbb-sort-header-container {
3534
+ cursor: default;
3535
+ }
3536
+ .sbb-table-align-center .sbb-sort-header-container {
3537
+ text-align: center;
3538
+ }
3539
+
3540
+ .sbb-sort-header-content {
3541
+ flex-shrink: 1;
3542
+ flex-grow: 1;
3543
+ }
3544
+
3545
+ .sbb-sort-header-position-before {
3546
+ flex-direction: row-reverse;
3547
+ }
3548
+
3549
+ .sbb-sort-header-arrow {
3550
+ height: var(--sbb-size-icon-ui-small);
3551
+ width: var(--sbb-size-icon-ui-small);
3552
+ min-width: var(--sbb-size-icon-ui-small);
3553
+ position: relative;
3554
+ opacity: 0;
3555
+ animation: var(--sbb-sort-header-animation-name) var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3556
+ transition-property: opacity, translate;
3557
+ transition-duration: var(--sbb-table-sort-header-animation-duration);
3558
+ transition-timing-function: var(--sbb-table-sort-header-animation-easing);
3559
+ margin: -0.0625rem -0.5rem -0.0625rem -0.25rem;
3560
+ }
3561
+ .sbb-sort-header-position-before .sbb-sort-header-arrow {
3562
+ margin: -0.0625rem -0.25rem -0.0625rem -0.0625rem;
3563
+ }
3564
+ .sbb-sort-header-arrow svg {
3565
+ width: 100%;
3566
+ height: 100%;
3567
+ }
3568
+ .sbb-sort-header-arrow svg :where(path:nth-child(2)) {
3569
+ transform-origin: center;
3570
+ }
3571
+ .sbb-sort-header-arrow.no-transition {
3572
+ transition: opacity 0ms, translate 0ms !important;
3573
+ }
3574
+ .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3575
+ opacity: 1;
3576
+ }
3577
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.desc-to-hint, .sbb-sort-header-arrow.asc-to-hint {
3578
+ opacity: 0.54;
3579
+ }
3580
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.void, .sbb-sort-header-arrow.hint-to-desc, .sbb-sort-header-arrow.active-to-desc, .sbb-sort-header-arrow.hint-to-asc, .sbb-sort-header-arrow.active-to-asc {
3581
+ opacity: 0;
3582
+ }
3583
+ .sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
3584
+ translate: 0;
3585
+ }
3586
+ .sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.active-to-desc {
3587
+ translate: 0 25%;
3588
+ }
3589
+ .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.active-to-asc {
3590
+ translate: 0 -25%;
3591
+ }
3592
+ .sbb-sort-header-arrow.desc-to-hint {
3593
+ --sbb-sort-header-animation-name: move-desc-to-hint;
3594
+ translate: 0;
3595
+ }
3596
+ .sbb-sort-header-arrow.hint-to-desc {
3597
+ --sbb-sort-header-animation-name: move-hint-to-desc;
3598
+ translate: 0 25%;
3599
+ }
3600
+ .sbb-sort-header-arrow.asc-to-hint {
3601
+ --sbb-sort-header-animation-name: move-asc-to-hint;
3602
+ translate: 0;
3603
+ }
3604
+ .sbb-sort-header-arrow.hint-to-asc {
3605
+ --sbb-sort-header-animation-name: move-hint-to-asc;
3606
+ translate: 0 -25%;
3607
+ }
3608
+
3609
+ .sbb-sort-indicator {
3610
+ transition: scale var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
3611
+ }
3612
+ .sbb-sort-indicator.asc, .sbb-sort-indicator.active-asc {
3613
+ scale: 1 -1;
3614
+ }
3615
+ .sbb-sort-indicator.desc, .sbb-sort-indicator.active-desc {
3616
+ scale: 1 1;
3617
+ }
3618
+ .sbb-sort-indicator.no-transition {
3619
+ transition: none !important;
3620
+ }
3621
+
3622
+ @keyframes move-desc-to-hint {
3623
+ from {
3624
+ translate: 0 25%;
3625
+ }
3626
+ to {
3627
+ translate: 0 0;
3628
+ }
3629
+ }
3630
+ @keyframes move-hint-to-desc {
3631
+ from {
3632
+ translate: 0 0;
3633
+ }
3634
+ to {
3635
+ translate: 0 25%;
3636
+ }
3637
+ }
3638
+ @keyframes move-asc-to-hint {
3639
+ from {
3640
+ translate: 0 -25%;
3641
+ }
3642
+ to {
3643
+ translate: 0 0;
3644
+ }
3645
+ }
3646
+ @keyframes move-hint-to-asc {
3647
+ from {
3648
+ translate: 0 0;
3649
+ }
3650
+ to {
3651
+ translate: 0 -25%;
3652
+ }
3653
+ }
3492
3654
  sbb-tab-nav-bar .sbb-tab-amount {
3493
3655
  margin: 0;
3494
3656
  color: var(--sbb-tab-label-amount-color);