@sbb-esta/lyne-elements-dev 5.7.0-dev.1788770150 → 5.7.0-dev.1788796277
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/alert.pure.js +1 -1
- package/badge/_badge.global.scss +1 -1
- package/breadcrumb.pure.js +1 -1
- package/button.pure.js +2 -2
- package/calendar.pure.js +2 -2
- package/card.pure.js +1 -1
- package/checkbox-panel.pure.js +1 -1
- package/checkbox.pure.js +1 -1
- package/chip-label.pure.js +1 -1
- package/chip.pure.js +1 -1
- package/core/styles/_theme.scss +9 -1
- package/core/styles/features/image.scss +1 -1
- package/core/styles/lean-off-brand-theme.scss +2 -1
- package/core/styles/mixins/_lists.scss +2 -2
- package/core/styles/mixins/_typo.scss +3 -3
- package/core/styles/off-brand-theme.scss +2 -1
- package/custom-elements.json +1 -25
- package/datepicker.pure.js +1 -1
- package/development/alert.pure.js +1 -1
- package/development/breadcrumb.pure.js +1 -1
- package/development/button.pure.js +2 -2
- package/development/calendar.pure.js +2 -2
- package/development/card.pure.js +1 -1
- package/development/checkbox-panel.pure.js +1 -1
- package/development/checkbox.pure.js +1 -1
- package/development/chip-label.pure.js +1 -1
- package/development/chip.pure.js +1 -1
- package/development/datepicker.pure.js +1 -1
- package/development/download.pure.js +1 -1
- package/development/expansion-panel.pure.js +1 -1
- package/development/file-selector.pure.js +2 -2
- package/development/footer.pure.js +1 -1
- package/development/form-field.pure.js +3 -3
- package/development/header.pure.js +2 -2
- package/development/link.pure.js +1 -1
- package/development/menu.pure.js +1 -1
- package/development/message.pure.js +1 -1
- package/development/mini-calendar.pure.js +1 -1
- package/development/navigation.pure.js +4 -4
- package/development/notification.pure.js +1 -1
- package/development/option.pure.js +3 -3
- package/development/paginator.pure.js +2 -2
- package/development/radio-button-panel.pure.js +1 -1
- package/development/radio-button.pure.js +1 -1
- package/development/status.pure.js +1 -1
- package/development/stepper.pure.js +1 -1
- package/development/tabs.pure.js +1 -1
- package/development/tag.pure.js +1 -1
- package/development/teaser-panel.pure.js +1 -1
- package/development/teaser-product.pure.js +1 -1
- package/development/teaser.pure.js +7 -3
- package/development/timetable-occupancy.pure.js +1 -1
- package/development/title.pure.js +1 -1
- package/development/toast.pure.js +1 -1
- package/development/toggle-check.pure.js +1 -1
- package/development/toggle.pure.js +2 -2
- package/development/tooltip.pure.js +1 -1
- package/development/train.pure.js +3 -3
- package/download.pure.js +1 -1
- package/expansion-panel.pure.js +1 -1
- package/file-selector.pure.js +2 -2
- package/footer.pure.js +1 -1
- package/form-field/_form-field.global.scss +1 -1
- package/form-field.pure.js +3 -3
- package/header/_header.global.scss +2 -2
- package/header.pure.js +2 -2
- package/lean-off-brand-theme.css +16 -34
- package/lean-safety-theme.css +18 -16
- package/lean-theme.css +18 -16
- package/link.pure.js +1 -1
- package/menu.pure.js +1 -1
- package/message.pure.js +1 -1
- package/mini-calendar.pure.js +1 -1
- package/navigation/_navigation.global.scss +2 -2
- package/navigation.pure.js +4 -4
- package/notification.pure.js +1 -1
- package/off-brand-theme.css +16 -34
- package/option.pure.js +3 -3
- package/package.json +2 -2
- package/paginator.pure.js +2 -2
- package/radio-button-panel.pure.js +1 -1
- package/radio-button.pure.js +1 -1
- package/safety-theme.css +18 -16
- package/standard-theme.css +18 -16
- package/status.pure.js +1 -1
- package/stepper.pure.js +1 -1
- package/table/_table.global.scss +4 -4
- package/tabs.pure.js +1 -1
- package/tag.pure.js +1 -1
- package/teaser-panel.pure.js +1 -1
- package/teaser-product.pure.js +1 -1
- package/teaser.pure.js +2 -2
- package/timetable-occupancy.pure.js +1 -1
- package/title.pure.js +1 -1
- package/toast.pure.js +1 -1
- package/toggle-check.pure.js +1 -1
- package/toggle.pure.js +2 -2
- package/tooltip.pure.js +1 -1
- package/train.pure.js +3 -3
|
@@ -9,7 +9,7 @@ import { SbbTransparentButtonElement } from "./button.pure.js";
|
|
|
9
9
|
import { ref } from "lit/directives/ref.js";
|
|
10
10
|
|
|
11
11
|
//#region src/elements/navigation/common/navigation-action.scss?inline
|
|
12
|
-
var navigation_action_default = ":host {\n --_sbb-navigation-action-inset-inline-start: calc(\n (var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1\n );\n --_sbb-navigation-action-inset-block-start: calc(1em * (var(--sbb-typo-line-height-text) / 2));\n --sbb-navigation-action-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-3x)\n );\n --sbb-navigation-cursor: var(--sbb-cursor-pointer);\n --sbb-navigation-text-decoration: none;\n display: block;\n outline: none !important;\n}\n\n:host(:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active]).sbb-active) {\n --sbb-navigation-action-icon-display: block;\n}\n\n:host(:is(:state(action-active),[state--action-active])) {\n --sbb-navigation-action-color: var(--sbb-color-5);\n}\n@media (forced-colors: active) {\n :host(:is(:state(action-active),[state--action-active])) {\n --sbb-navigation-action-color: Highlight;\n }\n}\n\nsbb-icon {\n display: var(--sbb-navigation-action-icon-display);\n position: absolute;\n inset-inline-start: var(--_sbb-navigation-action-inset-inline-start);\n inset-block-start: var(--_sbb-navigation-action-inset-block-start);\n translate: 0 -50%;\n}\n\n@media (any-hover: hover) {\n :host(:hover) {\n --sbb-navigation-action-color: var(--sbb-color-5);\n }\n}\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-navigation-action-color: ButtonText;\n }\n}\n\n:host(:is(:is(:state(size-s),[state--size-s]), :is(:state(size-m),[state--size-m]))) {\n --sbb-navigation-action-line-height: var(--sbb-typo-line-height-text);\n --sbb-navigation-action-letter-spacing: var(--sbb-
|
|
12
|
+
var navigation_action_default = ":host {\n --_sbb-navigation-action-inset-inline-start: calc(\n (var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1\n );\n --_sbb-navigation-action-inset-block-start: calc(1em * (var(--sbb-typo-line-height-text) / 2));\n --sbb-navigation-action-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-3x)\n );\n --sbb-navigation-cursor: var(--sbb-cursor-pointer);\n --sbb-navigation-text-decoration: none;\n display: block;\n outline: none !important;\n}\n\n:host(:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active]).sbb-active) {\n --sbb-navigation-action-icon-display: block;\n}\n\n:host(:is(:state(action-active),[state--action-active])) {\n --sbb-navigation-action-color: var(--sbb-color-5);\n}\n@media (forced-colors: active) {\n :host(:is(:state(action-active),[state--action-active])) {\n --sbb-navigation-action-color: Highlight;\n }\n}\n\nsbb-icon {\n display: var(--sbb-navigation-action-icon-display);\n position: absolute;\n inset-inline-start: var(--_sbb-navigation-action-inset-inline-start);\n inset-block-start: var(--_sbb-navigation-action-inset-block-start);\n translate: 0 -50%;\n}\n\n@media (any-hover: hover) {\n :host(:hover) {\n --sbb-navigation-action-color: var(--sbb-color-5);\n }\n}\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-navigation-action-color: ButtonText;\n }\n}\n\n:host(:is(:is(:state(size-s),[state--size-s]), :is(:state(size-m),[state--size-m]))) {\n --sbb-navigation-action-line-height: var(--sbb-typo-line-height-text);\n --sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-text);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-navigation-action-font-size: var(--sbb-text-font-size-xxs);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-navigation-action-font-size: var(--sbb-text-font-size-s);\n}\n\n:is(.sbb-navigation-button, .sbb-navigation-link) {\n display: flex;\n position: relative;\n color: var(--sbb-navigation-action-color);\n cursor: var(--sbb-navigation-cursor);\n transition: color var(--sbb-navigation-action-transition-duration) ease;\n outline: none;\n text-align: left;\n font-size: var(--sbb-navigation-action-font-size);\n line-height: var(--sbb-navigation-action-line-height);\n letter-spacing: var(--sbb-navigation-action-letter-spacing);\n font-weight: bold;\n hyphens: auto;\n text-decoration: var(--sbb-navigation-text-decoration);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n@media (forced-colors: active) {\n :is(.sbb-navigation-button, .sbb-navigation-link) {\n transition: none;\n }\n}\n:host(:focus-visible) :is(.sbb-navigation-button, .sbb-navigation-link), :is(.sbb-navigation-button, .sbb-navigation-link):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 border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset));\n}\n\n:host(:is(:disabled, [disabled])) {\n --sbb-navigation-action-color: var(--sbb-color-5);\n --sbb-navigation-cursor: unset;\n --sbb-navigation-text-decoration: line-through;\n}\n";
|
|
13
13
|
|
|
14
14
|
//#endregion
|
|
15
15
|
//#region src/elements/navigation/common/navigation-action-common.ts
|
|
@@ -86,7 +86,7 @@ var SbbNavigationLinkElement = class extends SbbNavigationActionCommonElementMix
|
|
|
86
86
|
|
|
87
87
|
//#endregion
|
|
88
88
|
//#region src/elements/navigation/navigation-list/navigation-list.scss?inline
|
|
89
|
-
var navigation_list_default = ":host {\n display: block;\n}\n\n.sbb-navigation-list__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--sbb-navigation-list-gap);\n margin-block: var(--sbb-navigation-list-margin-block);\n}\n\n.sbb-navigation-list__label {\n display: block;\n color: var(--sbb-color-5);\n padding-block-end: var(--sbb-navigation-list-padding-block-end);\n font-weight: bold;\n font-size: var(--sbb-navigation-list-font-size);\n letter-spacing: var(--sbb-
|
|
89
|
+
var navigation_list_default = ":host {\n display: block;\n}\n\n.sbb-navigation-list__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--sbb-navigation-list-gap);\n margin-block: var(--sbb-navigation-list-margin-block);\n}\n\n.sbb-navigation-list__label {\n display: block;\n color: var(--sbb-color-5);\n padding-block-end: var(--sbb-navigation-list-padding-block-end);\n font-weight: bold;\n font-size: var(--sbb-navigation-list-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:not(:is(:state(slotted-label),[state--slotted-label]), [label])) .sbb-navigation-list__label {\n display: none;\n}\n";
|
|
90
90
|
|
|
91
91
|
//#endregion
|
|
92
92
|
//#region src/elements/navigation/navigation-list/navigation-list.component.ts
|
|
@@ -167,7 +167,7 @@ let SbbNavigationListElement = (() => {
|
|
|
167
167
|
|
|
168
168
|
//#endregion
|
|
169
169
|
//#region src/elements/navigation/navigation-marker/navigation-marker.scss?inline
|
|
170
|
-
var navigation_marker_default = ":host {\n --sbb-navigation-marker-margin-block: calc(\n 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) /\n 2\n );\n display: block;\n}\n\n:host([size=s]) {\n --sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);\n --sbb-navigation-marker-width: 0.5rem;\n --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-text);\n --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);\n --sbb-navigation-marker-position-x: calc(\n var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x)\n );\n --sbb-navigation-marker-padding-inline-start: calc(\n var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x)\n );\n --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xxs);\n --sbb-navigation-marker-letter-spacing: var(--sbb-
|
|
170
|
+
var navigation_marker_default = ":host {\n --sbb-navigation-marker-margin-block: calc(\n 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) /\n 2\n );\n display: block;\n}\n\n:host([size=s]) {\n --sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);\n --sbb-navigation-marker-width: 0.5rem;\n --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-text);\n --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);\n --sbb-navigation-marker-position-x: calc(\n var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x)\n );\n --sbb-navigation-marker-padding-inline-start: calc(\n var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x)\n );\n --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xxs);\n --sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-text);\n --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([size=l]) {\n --sbb-navigation-marker-font-size: var(--sbb-heading-font-size-4);\n --sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);\n --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);\n}\n\n.sbb-navigation-marker {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--sbb-navigation-action-gap);\n padding-inline-start: var(--sbb-navigation-marker-padding-inline-start);\n font-size: var(--sbb-navigation-marker-font-size);\n line-height: var(--sbb-navigation-marker-line-height);\n letter-spacing: var(--sbb-navigation-marker-letter-spacing);\n font-weight: bold;\n}\n.sbb-navigation-marker::before {\n content: \"\";\n position: absolute;\n opacity: 0;\n inset-inline-start: var(--sbb-navigation-marker-position-x);\n inset-block-start: var(--sbb-navigation-marker-position-y);\n width: var(--sbb-navigation-marker-width);\n border-block-start: var(--sbb-navigation-marker-border) solid var(--sbb-color-5);\n margin-block: var(--sbb-navigation-marker-margin-block);\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x));\n transition-timing-function: ease;\n transition-property: opacity, inset-block-start;\n}\n:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker::before {\n opacity: 1;\n}\n@media (forced-colors: active) {\n .sbb-navigation-marker::before {\n border-color: CanvasText;\n }\n}\n\n::slotted(:is(sbb-navigation-button, sbb-navigation-link)) {\n margin-inline-start: var(--sbb-navigation-margin-inline-start);\n}\n";
|
|
171
171
|
|
|
172
172
|
//#endregion
|
|
173
173
|
//#region src/elements/navigation/navigation-marker/navigation-marker.component.ts
|
|
@@ -281,7 +281,7 @@ let SbbNavigationMarkerElement = (() => {
|
|
|
281
281
|
|
|
282
282
|
//#endregion
|
|
283
283
|
//#region src/elements/navigation/navigation-section/navigation-section.scss?inline
|
|
284
|
-
var navigation_section_default = ":host {\n --sbb-navigation-section-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-3x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n display: var(--sbb-navigation-section-display, none);\n position: var(--sbb-navigation-section-position);\n grid-column: var(--sbb-navigation-section-column);\n inset-inline-start: 0;\n inset-block-start: 0;\n width: var(--sbb-navigation-section-width);\n height: var(--sbb-navigation-section-height);\n z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-navigation-section-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-navigation-section-width: calc(\n 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive)\n );\n translate: calc(var(--sbb-grid-base-gutter-responsive) * -1) 0;\n }\n}\n\n:host(:is(:state(state-opened),[state--state-opened])) {\n --sbb-navigation-section-pointer-events: all;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n --sbb-navigation-section-position: absolute;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-navigation-section-pointer-events: none;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-navigation-section-display: block;\n}\n\n::slotted(*) {\n padding-inline-start: var(--sbb-navigation-section-content-padding-inline-start);\n}\n\n::slotted(:is(:state(sbb-button),[state--sbb-button])) {\n grid-column-start: 1;\n}\n\n.sbb-navigation-section__container {\n pointer-events: var(--sbb-navigation-section-pointer-events);\n height: var(--sbb-navigation-section-height);\n}\n\n.sbb-navigation-section {\n display: none;\n border: none;\n margin: 0;\n width: 100%;\n height: 100%;\n color: var(--sbb-navigation-color, var(--sbb-color-1-negative));\n background-color: transparent;\n padding: 0;\n overflow: hidden;\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section {\n display: block;\n animation-name: open;\n animation-duration: var(--sbb-navigation-section-animation-duration);\n animation-timing-function: var(--sbb-navigation-section-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section {\n animation-name: close;\n}\n@media (forced-colors: active) {\n .sbb-navigation-section {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-navigation-section__wrapper {\n height: 100%;\n padding-block: var(--sbb-navigation-section-padding-block);\n outline: none;\n overflow-y: auto;\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper {\n --sbb-scrollbar-color: transparent;\n scrollbar-color: transparent transparent;\n}\n\n.sbb-navigation-section__header {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--sbb-spacing-fixed-1x);\n margin-block-start: var(--sbb-spacing-responsive-xxl);\n padding-inline-start: var(--sbb-navigation-section-content-padding-inline-start);\n}\n@media (min-width: calc(64rem)) {\n .sbb-navigation-section__header {\n margin-block-start: 0;\n padding-inline-start: 0;\n }\n}\n@media (min-width: calc(90rem)) {\n .sbb-navigation-section__header {\n grid-column: 1/4;\n }\n}\n\n.sbb-navigation-section__back {\n position: absolute;\n translate: calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0;\n}\n@media (min-width: calc(64rem)) {\n .sbb-navigation-section__back {\n display: none;\n }\n}\n\n.sbb-navigation-section__title {\n font-weight: bold;\n font-size: var(--sbb-navigation-section-font-size);\n letter-spacing: var(--sbb-
|
|
284
|
+
var navigation_section_default = ":host {\n --sbb-navigation-section-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-3x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n display: var(--sbb-navigation-section-display, none);\n position: var(--sbb-navigation-section-position);\n grid-column: var(--sbb-navigation-section-column);\n inset-inline-start: 0;\n inset-block-start: 0;\n width: var(--sbb-navigation-section-width);\n height: var(--sbb-navigation-section-height);\n z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-navigation-section-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-navigation-section-width: calc(\n 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive)\n );\n translate: calc(var(--sbb-grid-base-gutter-responsive) * -1) 0;\n }\n}\n\n:host(:is(:state(state-opened),[state--state-opened])) {\n --sbb-navigation-section-pointer-events: all;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n --sbb-navigation-section-position: absolute;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-navigation-section-pointer-events: none;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-navigation-section-display: block;\n}\n\n::slotted(*) {\n padding-inline-start: var(--sbb-navigation-section-content-padding-inline-start);\n}\n\n::slotted(:is(:state(sbb-button),[state--sbb-button])) {\n grid-column-start: 1;\n}\n\n.sbb-navigation-section__container {\n pointer-events: var(--sbb-navigation-section-pointer-events);\n height: var(--sbb-navigation-section-height);\n}\n\n.sbb-navigation-section {\n display: none;\n border: none;\n margin: 0;\n width: 100%;\n height: 100%;\n color: var(--sbb-navigation-color, var(--sbb-color-1-negative));\n background-color: transparent;\n padding: 0;\n overflow: hidden;\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section {\n display: block;\n animation-name: open;\n animation-duration: var(--sbb-navigation-section-animation-duration);\n animation-timing-function: var(--sbb-navigation-section-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section {\n animation-name: close;\n}\n@media (forced-colors: active) {\n .sbb-navigation-section {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-navigation-section__wrapper {\n height: 100%;\n padding-block: var(--sbb-navigation-section-padding-block);\n outline: none;\n overflow-y: auto;\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper {\n --sbb-scrollbar-color: transparent;\n scrollbar-color: transparent transparent;\n}\n\n.sbb-navigation-section__header {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--sbb-spacing-fixed-1x);\n margin-block-start: var(--sbb-spacing-responsive-xxl);\n padding-inline-start: var(--sbb-navigation-section-content-padding-inline-start);\n}\n@media (min-width: calc(64rem)) {\n .sbb-navigation-section__header {\n margin-block-start: 0;\n padding-inline-start: 0;\n }\n}\n@media (min-width: calc(90rem)) {\n .sbb-navigation-section__header {\n grid-column: 1/4;\n }\n}\n\n.sbb-navigation-section__back {\n position: absolute;\n translate: calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0;\n}\n@media (min-width: calc(64rem)) {\n .sbb-navigation-section__back {\n display: none;\n }\n}\n\n.sbb-navigation-section__title {\n font-weight: bold;\n font-size: var(--sbb-navigation-section-font-size);\n letter-spacing: var(--sbb-letter-spacing-heading);\n line-height: var(--sbb-typo-line-height-heading);\n}\n\n.sbb-navigation-section__content {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);\n padding-inline: var(--sbb-navigation-section-padding-inline);\n}\n@media (min-width: calc(64rem)) {\n .sbb-navigation-section__content {\n opacity: 0;\n translate: 0 var(--sbb-spacing-fixed-3x);\n transition-duration: var(--sbb-navigation-section-animation-duration);\n transition-delay: var(--sbb-navigation-section-animation-duration);\n transition-timing-function: var(--sbb-navigation-section-animation-easing);\n transition-property: opacity, translate;\n }\n :host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content {\n opacity: 1;\n translate: 0 0;\n }\n}\n@media (min-width: calc(90rem)) {\n .sbb-navigation-section__content {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content {\n transition-delay: 0s;\n}\n\n@keyframes open {\n from {\n translate: var(--sbb-navigation-section-translate) 0;\n }\n to {\n translate: 0 0;\n }\n}\n@keyframes close {\n from {\n translate: 0 0;\n }\n to {\n translate: var(--sbb-navigation-section-translate) 0;\n }\n}\n";
|
|
285
285
|
|
|
286
286
|
//#endregion
|
|
287
287
|
//#region src/elements/navigation/navigation-section/navigation-section.component.ts
|
|
@@ -8,7 +8,7 @@ import { SbbDividerElement } from "./divider.pure.js";
|
|
|
8
8
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
9
9
|
|
|
10
10
|
//#region src/elements/notification/notification.scss?inline
|
|
11
|
-
var notification_default = ":host {\n --sbb-notification-border: var(--sbb-notification-border-width) solid\n var(--sbb-notification-type-color);\n --sbb-notification-background-color: color-mix(in srgb, var(--sbb-notification-type-color) 5%, white);\n --sbb-notification-background-color: light-dark(\n color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),\n color-mix(in srgb, var(--sbb-notification-type-color) 35%, white)\n );\n --sbb-notification-icon-color: var(--sbb-notification-type-color);\n --sbb-notification-border-radius-start: calc(var(--sbb-notification-base-border-radius) / 2);\n --sbb-notification-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-notification-icon-authoritative-font-size: 1em;\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);\n --_sbb-notification-inset-inline-start: calc(\n var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n display: block;\n font-size: var(--sbb-notification-font-size);\n letter-spacing: var(--sbb-
|
|
11
|
+
var notification_default = ":host {\n --sbb-notification-border: var(--sbb-notification-border-width) solid\n var(--sbb-notification-type-color);\n --sbb-notification-background-color: color-mix(in srgb, var(--sbb-notification-type-color) 5%, white);\n --sbb-notification-background-color: light-dark(\n color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),\n color-mix(in srgb, var(--sbb-notification-type-color) 35%, white)\n );\n --sbb-notification-icon-color: var(--sbb-notification-type-color);\n --sbb-notification-border-radius-start: calc(var(--sbb-notification-base-border-radius) / 2);\n --sbb-notification-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-notification-icon-authoritative-font-size: 1em;\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);\n --_sbb-notification-inset-inline-start: calc(\n var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n display: block;\n font-size: var(--sbb-notification-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:state(state-opening),[state--state-opening]):not([animation=open], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(state-closing),[state--state-closing]):not([animation=close], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:where(:is(:state(slotted-title),[state--slotted-title]), :is(:state(slotted-title),[state--slotted-title])[size=m])) {\n --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])[size=s]) {\n --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([size=s]) {\n --sbb-notification-font-size: var(--sbb-text-font-size-xs);\n --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);\n --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)\n var(--sbb-spacing-responsive-xxxs);\n --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)\n var(--sbb-spacing-responsive-xxs);\n}\n@media (min-width: calc(37.5rem)) {\n :host([size=s]) {\n --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);\n }\n}\n\n:host([size=m]) {\n --sbb-notification-font-size: var(--sbb-text-font-size-s);\n --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);\n --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);\n --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)\n var(--sbb-spacing-responsive-xs);\n}\n@media (min-width: calc(37.5rem)) {\n :host([size=m]) {\n --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);\n }\n}\n\n:host(:is(:not([type]), [type=info])) {\n --sbb-notification-type-color: var(--sbb-color-smoke);\n --sbb-notification-icon-color: var(--sbb-notification-color);\n --sbb-notification-divider-opacity-light: 20%;\n --sbb-notification-divider-opacity-dark: 20%;\n}\n\n:host([type=note]) {\n --sbb-notification-type-color: var(--sbb-color-sky);\n --sbb-notification-divider-opacity-light: 20%;\n --sbb-notification-divider-opacity-dark: 20%;\n}\n\n:host([type=success]) {\n --sbb-notification-type-color: var(--sbb-color-success);\n --sbb-notification-divider-opacity-light: 15%;\n --sbb-notification-divider-opacity-dark: 30%;\n}\n\n:host([type=warn]) {\n --sbb-notification-type-color: var(--sbb-color-warning);\n --sbb-notification-icon-color: var(--sbb-notification-color);\n --sbb-notification-divider-opacity-light: 25%;\n --sbb-notification-divider-opacity-dark: 40%;\n}\n\n:host([type=error]) {\n --sbb-notification-type-color: var(--sbb-color-error);\n --sbb-notification-divider-opacity-light: 10%;\n --sbb-notification-divider-opacity-dark: 25%;\n}\n\n.sbb-notification__wrapper {\n position: relative;\n inset-inline-start: var(--_sbb-notification-inset-inline-start);\n width: calc(100% - var(--_sbb-notification-inset-inline-start));\n border: var(--sbb-notification-border);\n border-radius: var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);\n opacity: 0;\n max-height: 0;\n margin: 0;\n}\n.sbb-notification__wrapper::before {\n content: \"\";\n position: absolute;\n inset: calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);\n background-color: var(--sbb-notification-type-color);\n border: var(--sbb-notification-border);\n border-radius: var(--sbb-notification-base-border-radius);\n}\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-notification__wrapper {\n opacity: 1;\n max-height: calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);\n margin: var(--sbb-notification-margin, 0);\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-notification__wrapper {\n animation-name: open;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-notification-animation-duration);\n animation-timing-function: var(--sbb-notification-timing-function);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-notification__wrapper {\n animation-name: close, close-height;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-notification-animation-duration);\n animation-timing-function: var(--sbb-notification-timing-function);\n animation-delay: 0s, var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n}\n\n.sbb-notification {\n position: relative;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n padding-block: var(--sbb-notification-padding-block);\n padding-inline: var(--sbb-notification-padding-inline);\n color: var(--sbb-notification-color);\n border-radius: var(--sbb-notification-border-radius-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);\n overflow: hidden;\n background-color: var(--sbb-notification-background-color);\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-notification {\n grid-template-columns: auto 1fr auto auto;\n }\n}\n\n.sbb-notification__icon,\n::slotted(sbb-icon) {\n color: var(--sbb-notification-icon-color);\n align-self: var(--sbb-notification-icon-align-self);\n --sbb-icon-svg-width: var(--sbb-notification-icon-size);\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-notification__icon,\n ::slotted(sbb-icon) {\n margin-block-start: max(0rem, (var(--_sbb-notification-icon-authoritative-font-size) * var(--_sbb-notification-icon-authoritative-line-height) - var(--sbb-size-icon-ui-small)) / 2);\n }\n}\n\n.sbb-notification__content {\n color-scheme: only light;\n order: 3;\n grid-area: 2/1/3/3;\n align-self: flex-start;\n margin-block-start: var(--sbb-notification-content-margin-block-start);\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-notification__content {\n order: initial;\n grid-area: initial;\n margin-block-start: 0;\n padding-inline: var(--sbb-notification-content-padding-inline);\n }\n}\n\n.sbb-notification__text {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n.sbb-notification__divider {\n --sbb-divider-color: color-mix(\n in srgb,\n var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light),\n var(--sbb-notification-background-color)\n );\n --sbb-divider-color: light-dark(\n color-mix(\n in srgb,\n var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light),\n var(--sbb-notification-background-color)\n ),\n color-mix(\n in srgb,\n var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark),\n var(--sbb-notification-background-color)\n )\n );\n display: none;\n position: relative;\n inset-inline-start: var(--sbb-border-width-1x);\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-notification__divider {\n display: block;\n margin-inline-end: var(--sbb-notification-close-wrapper-gap);\n height: calc(100% - var(--sbb-spacing-fixed-1x) * 2);\n }\n}\n\n@keyframes open {\n from {\n opacity: 0;\n max-height: 0;\n margin: 0;\n }\n to {\n opacity: 1;\n max-height: calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);\n margin: var(--sbb-notification-margin, 0);\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n margin: var(--sbb-notification-margin, 0);\n }\n to {\n opacity: 0;\n margin: 0;\n }\n}\n@keyframes close-height {\n from {\n max-height: calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);\n }\n to {\n max-height: 0;\n }\n}\n::slotted(sbb-title) {\n margin: 0;\n font-size: var(--_sbb-notification-icon-authoritative-font-size);\n line-height: var(--_sbb-notification-icon-authoritative-line-height);\n}\n";
|
|
12
12
|
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/elements/notification/notification.component.ts
|
|
@@ -7,7 +7,7 @@ import { SbbIconNameMixin } from "./icon.pure.js";
|
|
|
7
7
|
import { SbbVisualCheckboxElement } from "./visual-checkbox.pure.js";
|
|
8
8
|
|
|
9
9
|
//#region src/elements/option/optgroup/optgroup-base-element.scss?inline
|
|
10
|
-
var optgroup_base_element_default = ":host {\n display: block;\n}\n\n:host(:first-child) {\n --sbb-optgroup-divider-display: none;\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-optgroup-label-color: var(--sbb-color-5);\n --sbb-optgroup-divider-color: var(--sbb-divider-color-negative);\n}\n\n:host::before {\n content: \"\";\n display: var(--sbb-optgroup-divider-display, block);\n margin-block: var(--sbb-options-panel-divider-margin-block);\n border-block-start: var(--sbb-divider-border-width) solid var(--sbb-optgroup-divider-color);\n}\n\n.sbb-optgroup {\n margin-block: var(--sbb-spacing-fixed-4x);\n margin-inline: var(--sbb-spacing-fixed-4x);\n}\n\n.sbb-optgroup__label {\n display: flex;\n column-gap: var(--sbb-spacing-responsive-xxxs);\n font-size: var(--sbb-optgroup-label-font-size);\n letter-spacing: var(--sbb-
|
|
10
|
+
var optgroup_base_element_default = ":host {\n display: block;\n}\n\n:host(:first-child) {\n --sbb-optgroup-divider-display: none;\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-optgroup-label-color: var(--sbb-color-5);\n --sbb-optgroup-divider-color: var(--sbb-divider-color-negative);\n}\n\n:host::before {\n content: \"\";\n display: var(--sbb-optgroup-divider-display, block);\n margin-block: var(--sbb-options-panel-divider-margin-block);\n border-block-start: var(--sbb-divider-border-width) solid var(--sbb-optgroup-divider-color);\n}\n\n.sbb-optgroup {\n margin-block: var(--sbb-spacing-fixed-4x);\n margin-inline: var(--sbb-spacing-fixed-4x);\n}\n\n.sbb-optgroup__label {\n display: flex;\n column-gap: var(--sbb-spacing-responsive-xxxs);\n font-size: var(--sbb-optgroup-label-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n color: var(--sbb-optgroup-label-color);\n -webkit-text-fill-color: var(--sbb-optgroup-label-color);\n padding-inline: var(--sbb-optgroup-label-padding-inline);\n padding-block-end: var(--sbb-optgroup-label-padding-end);\n}\n\n.sbb-optgroup__icon-space {\n display: var(--sbb-option-icon-container-display, none);\n min-width: var(--sbb-size-icon-ui-small);\n}\n\n::slotted(sbb-divider) {\n margin-block: var(--sbb-options-panel-divider-margin-block);\n}\n";
|
|
11
11
|
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/elements/option/optgroup/optgroup-base-element.ts
|
|
@@ -182,7 +182,7 @@ var SbbOptGroupElement = class extends SbbOptgroupBaseElement {
|
|
|
182
182
|
|
|
183
183
|
//#endregion
|
|
184
184
|
//#region src/elements/option/option-hint/option-hint.scss?inline
|
|
185
|
-
var option_hint_default = ":host {\n display: flex;\n column-gap: var(--sbb-option-hint-column-gap);\n padding-inline: var(--sbb-option-hint-padding-inline);\n padding-block-end: var(--sbb-option-hint-padding-block-end);\n font-size: var(--sbb-option-hint-font-size);\n letter-spacing: var(--sbb-
|
|
185
|
+
var option_hint_default = ":host {\n display: flex;\n column-gap: var(--sbb-option-hint-column-gap);\n padding-inline: var(--sbb-option-hint-padding-inline);\n padding-block-end: var(--sbb-option-hint-padding-block-end);\n font-size: var(--sbb-option-hint-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n\n:host([negative]) {\n --sbb-option-hint-color: var(--sbb-color-5);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);\n}\n\n.sbb-optgroup__icon-space {\n display: var(--sbb-option-icon-container-display, none);\n min-width: var(--sbb-size-icon-ui-small);\n}\n\n.sbb-option-hint {\n color: var(--sbb-option-hint-color);\n -webkit-text-fill-color: var(--sbb-option-hint-color);\n flex-grow: 1;\n}\n";
|
|
186
186
|
|
|
187
187
|
//#endregion
|
|
188
188
|
//#region src/elements/option/option-hint/option-hint.component.ts
|
|
@@ -606,7 +606,7 @@ let SbbOptionBaseElement = (() => {
|
|
|
606
606
|
|
|
607
607
|
//#endregion
|
|
608
608
|
//#region src/elements/option/option/option.scss?inline
|
|
609
|
-
var option_default = ":host {\n --sbb-focus-outline-offset: var(--sbb-option-focus-outline-offset);\n display: block;\n background-color: var(--sbb-option-background-color);\n font-size: var(--sbb-option-font-size);\n letter-spacing: var(--sbb-
|
|
609
|
+
var option_default = ":host {\n --sbb-focus-outline-offset: var(--sbb-option-focus-outline-offset);\n display: block;\n background-color: var(--sbb-option-background-color);\n font-size: var(--sbb-option-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-option-color: var(--sbb-color-3-negative);\n --sbb-option-icon-color: var(--sbb-color-5);\n --sbb-option-background-color-hover: var(--sbb-color-midnight);\n --sbb-option-background-color-active: var(--sbb-background-color-4-negative);\n --sbb-option-disabled-border-color: var(--sbb-border-color-5);\n --sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-option-min-height: var(--sbb-size-element-xxs);\n --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));\n --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-option-min-height: var(--sbb-size-element-s);\n --sbb-option-focus-outline-offset: inherit;\n --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-hover);\n }\n}\n\n:host(:active:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-active);\n}\n\n:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot {\n display: none;\n}\n\n:host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-color: GrayText;\n }\n}\n\n:host(:is(:state(variant-select),[state--variant-select])) {\n --sbb-option-column-gap: var(--sbb-spacing-fixed-2x);\n --sbb-option-justify-content: space-between;\n}\n\n:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])) {\n --sbb-option-justify-content: start;\n}\n\n:host(:is(:state(active),[state--active])) {\n --sbb-option-focus-outline-color: var(--sbb-focus-outline-color);\n}\n\n:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n font-weight: bold;\n}\n@media (forced-colors: active) {\n :host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n color: Highlight;\n }\n}\n\n.sbb-option {\n position: relative;\n display: flex;\n min-height: var(--sbb-option-min-height);\n align-items: center;\n column-gap: var(--sbb-option-column-gap);\n padding-inline: var(--sbb-option-padding-inline);\n justify-content: var(--sbb-option-justify-content);\n color: var(--sbb-option-color);\n cursor: var(--sbb-option-cursor);\n -webkit-tap-highlight-color: transparent;\n -webkit-text-fill-color: var(--sbb-option-color);\n}\n.sbb-option::after {\n content: \"\";\n display: block;\n position: absolute;\n inset: var(--sbb-option-focus-outline-inset);\n pointer-events: none;\n border: var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);\n border-radius: var(--sbb-option-border-radius);\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option {\n position: relative;\n z-index: 0;\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0.375rem;\n border: var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);\n border-radius: var(--sbb-border-radius-2x);\n background-color: var(--sbb-option-disabled-background-color);\n z-index: -1;\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n border-color: GrayText;\n }\n}\n\n.sbb-option__icon {\n display: flex;\n min-width: var(--sbb-size-icon-ui-small);\n min-height: var(--sbb-size-icon-ui-small);\n color: var(--sbb-option-icon-color);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon {\n display: var(--sbb-option-icon-container-display, none);\n}\n\n.sbb-option__label {\n text-overflow: var(--sbb-option-text-overflow);\n overflow: var(--sbb-option-overflow);\n white-space: var(--sbb-option-white-space, initial);\n}\n";
|
|
610
610
|
|
|
611
611
|
//#endregion
|
|
612
612
|
//#region src/elements/option/option/option.component.ts
|
|
@@ -435,7 +435,7 @@ const SbbPaginatorCommonElementMixin = (superClass) => {
|
|
|
435
435
|
|
|
436
436
|
//#endregion
|
|
437
437
|
//#region src/elements/paginator/compact-paginator/compact-paginator.scss?inline
|
|
438
|
-
var compact_paginator_default = ":host {\n display: flex;\n gap: var(--sbb-compact-paginator-gap);\n justify-content: var(--sbb-paginator-compact-justify-content, start);\n min-height: var(--sbb-paginator-height);\n}\n\n:host([pager-position=end]) {\n --sbb-paginator-compact-justify-content: end;\n}\n\n.sbb-paginator__pages {\n font-size: var(--sbb-compact-paginator-font-size);\n letter-spacing: var(--sbb-
|
|
438
|
+
var compact_paginator_default = ":host {\n display: flex;\n gap: var(--sbb-compact-paginator-gap);\n justify-content: var(--sbb-paginator-compact-justify-content, start);\n min-height: var(--sbb-paginator-height);\n}\n\n:host([pager-position=end]) {\n --sbb-paginator-compact-justify-content: end;\n}\n\n.sbb-paginator__pages {\n font-size: var(--sbb-compact-paginator-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--sbb-compact-paginator-pages-gap);\n color: var(--sbb-paginator-color);\n}\n\n.sbb-compact-paginator__divider {\n height: 1rem;\n --sbb-divider-color: currentcolor;\n}\n";
|
|
439
439
|
|
|
440
440
|
//#endregion
|
|
441
441
|
//#region src/elements/paginator/compact-paginator/compact-paginator.component.ts
|
|
@@ -479,7 +479,7 @@ var SbbCompactPaginatorElement = class extends SbbPaginatorCommonElementMixin(Sb
|
|
|
479
479
|
|
|
480
480
|
//#endregion
|
|
481
481
|
//#region src/elements/paginator/paginator/paginator.scss?inline
|
|
482
|
-
var paginator_default = ":host {\n --sbb-paginator-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host([pager-position=end]) {\n --sbb-paginator-justify-content: end;\n --sbb-paginator-wrapping-group-wrap: wrap;\n --sbb-paginator-wrap: wrap-reverse;\n}\n\n.sbb-paginator,\n.sbb-paginator__wrapping-group {\n display: flex;\n gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);\n justify-content: var(--sbb-paginator-justify-content, start);\n}\n\n.sbb-paginator {\n flex-wrap: var(--sbb-paginator-wrap, wrap);\n min-height: var(--sbb-paginator-height);\n}\n\n.sbb-paginator__wrapping-group {\n flex-wrap: var(--sbb-paginator-wrapping-group-wrap, wrap-reverse);\n}\n\n.sbb-paginator__page-size-options {\n display: flex;\n align-items: center;\n gap: var(--sbb-spacing-fixed-2x);\n white-space: nowrap;\n color: var(--sbb-paginator-color);\n font-size: var(--sbb-paginator-font-size);\n letter-spacing: var(--sbb-
|
|
482
|
+
var paginator_default = ":host {\n --sbb-paginator-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host([pager-position=end]) {\n --sbb-paginator-justify-content: end;\n --sbb-paginator-wrapping-group-wrap: wrap;\n --sbb-paginator-wrap: wrap-reverse;\n}\n\n.sbb-paginator,\n.sbb-paginator__wrapping-group {\n display: flex;\n gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);\n justify-content: var(--sbb-paginator-justify-content, start);\n}\n\n.sbb-paginator {\n flex-wrap: var(--sbb-paginator-wrap, wrap);\n min-height: var(--sbb-paginator-height);\n}\n\n.sbb-paginator__wrapping-group {\n flex-wrap: var(--sbb-paginator-wrapping-group-wrap, wrap-reverse);\n}\n\n.sbb-paginator__page-size-options {\n display: flex;\n align-items: center;\n gap: var(--sbb-spacing-fixed-2x);\n white-space: nowrap;\n color: var(--sbb-paginator-color);\n font-size: var(--sbb-paginator-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n.sbb-paginator__page-size-options sbb-select {\n color: var(--sbb-form-field-text-color);\n font-size: var(--sbb-form-field-input-text-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n\n.sbb-paginator__pages {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--sbb-spacing-fixed-1x);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-paginator__page--ellipsis,\n.sbb-paginator__page--number {\n position: relative;\n font-size: var(--sbb-paginator-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n color: var(--sbb-paginator-color);\n}\n\n.sbb-paginator__page--ellipsis-item,\n.sbb-paginator__page--number-item {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--sbb-size-element-xxs);\n height: var(--sbb-size-element-xxs);\n}\n\n.sbb-paginator__page--number-item {\n font-family: var(--sbb-typo-font-family);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-paginator-font-size);\n line-height: var(--sbb-typo-line-height-text);\n font-weight: normal;\n position: relative;\n cursor: var(--sbb-paginator-page-cursor);\n outline: none !important;\n color: var(--sbb-paginator-color);\n transition: color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);\n}\n.sbb-paginator__page--number-item::before {\n content: \"\";\n position: absolute;\n background-color: var(--sbb-paginator-page-background-color, transparent);\n border: var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style, none) var(--sbb-paginator-page-border-color, none);\n border-radius: var(--sbb-border-radius-infinity);\n inset: var(--sbb-paginator-page-inset, 0);\n transition-property: background-color, border, inset;\n transition-duration: var(--sbb-paginator-animation-duration);\n transition-timing-function: var(--sbb-paginator-animation-easing);\n}\n.sbb-paginator__page--number-item:focus-visible::before {\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-border-width-2x);\n}\n.sbb-paginator__page--number-item[data-selected] {\n font-weight: bold;\n --sbb-paginator-color: var(--sbb-color-3);\n --sbb-paginator-page-border-width: var(--sbb-border-width-2x);\n --sbb-paginator-page-border-style: solid;\n --sbb-paginator-page-border-color: var(--sbb-border-color-2);\n}\n:host([negative]) .sbb-paginator__page--number-item[data-selected] {\n --sbb-paginator-color: var(--sbb-color-3-negative);\n --sbb-paginator-page-border-color: var(--sbb-border-color-2-negative);\n}\n@media (forced-colors: active) {\n .sbb-paginator__page--number-item[data-selected] {\n --sbb-paginator-page-border-color: Highlight !important;\n }\n}\n.sbb-paginator__page--number-item:disabled {\n --sbb-paginator-color: var(--sbb-color-5);\n --sbb-paginator-page-border-style: dashed;\n --sbb-paginator-page-border-color: var(--sbb-border-color-5);\n --sbb-paginator-page-background-color: var(--sbb-background-color-3);\n --sbb-paginator-page-cursor: var(--sbb-cursor-default);\n}\n.sbb-paginator__page--number-item:disabled:not([data-selected]) {\n --sbb-paginator-page-border-width: var(--sbb-border-width-1x);\n}\n:host([negative]) .sbb-paginator__page--number-item:disabled {\n --sbb-paginator-color: var(--sbb-color-5);\n --sbb-paginator-page-background-color: var(--sbb-background-color-3-negative);\n}\n@media (forced-colors: active) {\n .sbb-paginator__page--number-item:disabled {\n --sbb-paginator-page-border-color: GrayText;\n --sbb-paginator-color: GrayText;\n --sbb-paginator-page-background-color: Canvas;\n }\n}\n@media (any-hover: hover) {\n .sbb-paginator__page--number-item:not(:disabled):hover {\n --sbb-paginator-page-background-color: var(--sbb-background-color-3);\n --sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);\n --sbb-paginator-translate-y-content-hover: -0.0625rem;\n }\n :host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover {\n --sbb-paginator-page-background-color: var(--sbb-background-color-3-negative);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n .sbb-paginator__page--number-item:not(:disabled):hover {\n --sbb-paginator-page-background-color: Highlight !important;\n }\n}\n.sbb-paginator__page--number-item:not(:disabled):active {\n --sbb-paginator-color: var(--sbb-color-3);\n --sbb-paginator-page-background-color: var(--sbb-background-color-4);\n --sbb-paginator-page-inset: 0;\n --sbb-paginator-translate-y-content-hover: 0;\n}\n:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active {\n --sbb-paginator-color: var(--sbb-color-3-negative);\n --sbb-paginator-page-background-color: var(--sbb-background-color-4-negative);\n}\n@media (forced-colors: active) {\n .sbb-paginator__page--number-item:not(:disabled):active {\n --sbb-paginator-page-background-color: Highlight !important;\n }\n}\n\n.sbb-paginator__page--number-item-label {\n transition: transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);\n transform: translateY(var(--sbb-paginator-translate-y-content-hover, 0));\n}\n";
|
|
483
483
|
|
|
484
484
|
//#endregion
|
|
485
485
|
//#region src/elements/paginator/paginator/paginator.component.ts
|
|
@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
|
|
|
4
4
|
import { SbbElement, SbbFormAssociatedRadioButtonMixin, SbbPanelMixin, SbbPropertyWatcherController, SbbUpdateSchedulerMixin, screenReaderOnlyStyles } from "./core.js";
|
|
5
5
|
|
|
6
6
|
//#region src/elements/radio-button/common/radio-button-common.scss?inline
|
|
7
|
-
var radio_button_common_default = ":host {\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);\n --sbb-radio-button-icon-align: calc(\n (1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2\n );\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-color-primary);\n --sbb-radio-button-background-fake-border-width: calc(\n (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2\n );\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: Highlight;\n --sbb-radio-button-border-color: Highlight;\n }\n}\n\n:host(:disabled) {\n --sbb-radio-button-label-color: var(--sbb-color-granite);\n --sbb-radio-button-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n --sbb-radio-button-background-color: var(--sbb-background-color-3);\n --sbb-radio-button-border-style: dashed;\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-radio-button-background-color: Canvas;\n --sbb-radio-button-inner-circle-color: GrayText;\n --sbb-radio-button-border-color: GrayText;\n --sbb-radio-button-border-style: solid;\n }\n}\n\n:host(:disabled:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-background-color-2-inverted);\n}\n\n:host([size=xs]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-xs);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-s);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-m);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);\n}\n\n.sbb-radio-button {\n font-size: var(--sbb-radio-button-font-size);\n letter-spacing: var(--sbb-
|
|
7
|
+
var radio_button_common_default = ":host {\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);\n --sbb-radio-button-icon-align: calc(\n (1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2\n );\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-color-primary);\n --sbb-radio-button-background-fake-border-width: calc(\n (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2\n );\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: Highlight;\n --sbb-radio-button-border-color: Highlight;\n }\n}\n\n:host(:disabled) {\n --sbb-radio-button-label-color: var(--sbb-color-granite);\n --sbb-radio-button-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n --sbb-radio-button-background-color: var(--sbb-background-color-3);\n --sbb-radio-button-border-style: dashed;\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-radio-button-background-color: Canvas;\n --sbb-radio-button-inner-circle-color: GrayText;\n --sbb-radio-button-border-color: GrayText;\n --sbb-radio-button-border-style: solid;\n }\n}\n\n:host(:disabled:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-background-color-2-inverted);\n}\n\n:host([size=xs]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-xs);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-s);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-m);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);\n}\n\n.sbb-radio-button {\n font-size: var(--sbb-radio-button-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n display: block;\n cursor: var(--sbb-radio-button-cursor);\n user-select: none;\n position: relative;\n color: var(--sbb-radio-button-label-color);\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-radio-button__label-slot {\n display: flex;\n align-items: flex-start;\n overflow: hidden;\n min-height: calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));\n}\n.sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n content: \"\";\n flex-shrink: 0;\n width: var(--sbb-radio-button-dimension);\n height: var(--sbb-radio-button-dimension);\n border-radius: 50%;\n margin-block-start: var(--sbb-radio-button-icon-align);\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));\n transition-timing-function: ease;\n transition-property: background-color, border;\n}\n@media (forced-colors: active) {\n .sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n transition: none;\n }\n}\n.sbb-radio-button__label-slot::before {\n background: var(--sbb-radio-button-inner-circle-color);\n border: var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);\n margin-inline-end: var(--sbb-radio-button-label-gap);\n}\n.sbb-radio-button__label-slot::after {\n position: absolute;\n border: var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);\n}\n";
|
|
8
8
|
|
|
9
9
|
//#endregion
|
|
10
10
|
//#region src/elements/radio-button/common/radio-button-common.ts
|
|
@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
|
|
|
4
4
|
import { SbbElement, SbbFormAssociatedRadioButtonMixin, SbbPropertyWatcherController, getOverride } from "./core.js";
|
|
5
5
|
|
|
6
6
|
//#region src/elements/radio-button/common/radio-button-common.scss?inline
|
|
7
|
-
var radio_button_common_default = ":host {\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);\n --sbb-radio-button-icon-align: calc(\n (1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2\n );\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-color-primary);\n --sbb-radio-button-background-fake-border-width: calc(\n (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2\n );\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: Highlight;\n --sbb-radio-button-border-color: Highlight;\n }\n}\n\n:host(:disabled) {\n --sbb-radio-button-label-color: var(--sbb-color-granite);\n --sbb-radio-button-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n --sbb-radio-button-background-color: var(--sbb-background-color-3);\n --sbb-radio-button-border-style: dashed;\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-radio-button-background-color: Canvas;\n --sbb-radio-button-inner-circle-color: GrayText;\n --sbb-radio-button-border-color: GrayText;\n --sbb-radio-button-border-style: solid;\n }\n}\n\n:host(:disabled:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-background-color-2-inverted);\n}\n\n:host([size=xs]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-xs);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-s);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-m);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);\n}\n\n.sbb-radio-button {\n font-size: var(--sbb-radio-button-font-size);\n letter-spacing: var(--sbb-
|
|
7
|
+
var radio_button_common_default = ":host {\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);\n --sbb-radio-button-icon-align: calc(\n (1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2\n );\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-color-primary);\n --sbb-radio-button-background-fake-border-width: calc(\n (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2\n );\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: Highlight;\n --sbb-radio-button-border-color: Highlight;\n }\n}\n\n:host(:disabled) {\n --sbb-radio-button-label-color: var(--sbb-color-granite);\n --sbb-radio-button-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n --sbb-radio-button-background-color: var(--sbb-background-color-3);\n --sbb-radio-button-border-style: dashed;\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);\n --sbb-radio-button-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-radio-button-background-color: Canvas;\n --sbb-radio-button-inner-circle-color: GrayText;\n --sbb-radio-button-border-color: GrayText;\n --sbb-radio-button-border-style: solid;\n }\n}\n\n:host(:disabled:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-background-color-2-inverted);\n}\n\n:host([size=xs]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-xs);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-s);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-radio-button-font-size: var(--sbb-text-font-size-m);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);\n}\n\n.sbb-radio-button {\n font-size: var(--sbb-radio-button-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n display: block;\n cursor: var(--sbb-radio-button-cursor);\n user-select: none;\n position: relative;\n color: var(--sbb-radio-button-label-color);\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-radio-button__label-slot {\n display: flex;\n align-items: flex-start;\n overflow: hidden;\n min-height: calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));\n}\n.sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n content: \"\";\n flex-shrink: 0;\n width: var(--sbb-radio-button-dimension);\n height: var(--sbb-radio-button-dimension);\n border-radius: 50%;\n margin-block-start: var(--sbb-radio-button-icon-align);\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));\n transition-timing-function: ease;\n transition-property: background-color, border;\n}\n@media (forced-colors: active) {\n .sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n transition: none;\n }\n}\n.sbb-radio-button__label-slot::before {\n background: var(--sbb-radio-button-inner-circle-color);\n border: var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);\n margin-inline-end: var(--sbb-radio-button-label-gap);\n}\n.sbb-radio-button__label-slot::after {\n position: absolute;\n border: var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);\n}\n";
|
|
8
8
|
|
|
9
9
|
//#endregion
|
|
10
10
|
//#region src/elements/radio-button/common/radio-button-common.ts
|
|
@@ -5,7 +5,7 @@ import { SbbElement } from "./core.js";
|
|
|
5
5
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/status/status.scss?inline
|
|
8
|
-
var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([type=error]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=success]) {\n --sbb-status-color: var(--sbb-color-success);\n}\n\n:host([type=warning]) {\n --sbb-status-color: var(--sbb-color-2);\n}\n\n:host([type=pending]) {\n --sbb-status-color: var(--sbb-color-sky);\n}\n\n:host([type=incomplete]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=not-started]) {\n --sbb-status-color: var(--sbb-color-5);\n --sbb-status-text-color: var(--sbb-color-2);\n}\n\n:host([type=in-progress]) {\n --sbb-status-color: var(--sbb-color-pink);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])) {\n --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);\n --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);\n --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-status-title-color);\n}\n\n.sbb-status__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--sbb-status-color);\n margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-status__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/status/status.component.ts
|
|
@@ -7,7 +7,7 @@ import { IntersectionController } from "@lit-labs/observers/intersection-control
|
|
|
7
7
|
import { property } from "lit/decorators.js";
|
|
8
8
|
|
|
9
9
|
//#region src/elements/stepper/step-label/step-label.scss?inline
|
|
10
|
-
var step_label_default = ":host {\n --sbb-step-label-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n position: relative;\n display: flex;\n min-width: 0;\n max-width: fit-content;\n gap: var(--sbb-step-label-gap);\n cursor: var(--sbb-step-label-cursor);\n color: var(--sbb-step-label-color);\n font-size: var(--sbb-step-label-font-size);\n letter-spacing: var(--sbb-
|
|
10
|
+
var step_label_default = ":host {\n --sbb-step-label-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n position: relative;\n display: flex;\n min-width: 0;\n max-width: fit-content;\n gap: var(--sbb-step-label-gap);\n cursor: var(--sbb-step-label-cursor);\n color: var(--sbb-step-label-color);\n font-size: var(--sbb-step-label-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n:host::before {\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n font-size: var(--sbb-step-label-number-font-size);\n font-weight: var(--sbb-step-label-font-weight-selected, normal);\n inset-block-start: calc(var(--sbb-step-label-font-size) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);\n inset-inline-start: calc(var(--sbb-step-label-prefix-size) / 2);\n line-height: 1;\n z-index: 1;\n translate: -50% calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0px));\n transition: translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing);\n}\n\n:host(:is(:state(selected),[state--selected])) {\n --sbb-step-label-color: var(--sbb-color-3);\n --sbb-step-label-font-weight-selected: bold;\n}\n@media (forced-colors: active) {\n :host(:is(:state(selected),[state--selected])) {\n --sbb-step-label-color: Highlight !important;\n }\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-step-label-gap: var(--sbb-step-label-gap-s);\n --sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-s);\n --sbb-step-label-font-size: var(--sbb-step-label-font-size-s);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-step-label-gap: var(--sbb-step-label-gap-m);\n --sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-m);\n --sbb-step-label-font-size: var(--sbb-step-label-font-size-m);\n}\n\n:host(:disabled) {\n --sbb-step-label-color: var(--sbb-color-granite);\n --sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));\n --sbb-step-label-prefix-border-style: dashed;\n}\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-step-label-color: GrayText !important;\n }\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:disabled)) {\n --sbb-step-label-cursor: var(--sbb-cursor-pointer);\n --sbb-step-label-prefix-background-color: var(--sbb-background-color-3);\n --sbb-step-label-translate-y-content-hover: -0.0625rem;\n --sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1);\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 border-radius: var(--sbb-border-radius-1x);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) {\n transition: margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)) {\n margin-block-start: var(--sbb-spacing-fixed-6x);\n}\n\n:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])) {\n margin-block-end: var(--sbb-spacing-fixed-8x);\n}\n\n.sbb-step-label__prefix {\n position: relative;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--sbb-step-label-prefix-size);\n height: var(--sbb-step-label-prefix-size);\n inset-block-start: calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2);\n}\n.sbb-step-label__prefix::before {\n content: \"\";\n position: absolute;\n inset: calc(var(--sbb-step-label-prefix-size-grow-hover, 0px));\n border-radius: var(--sbb-border-radius-infinity);\n border: var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);\n background-color: var(--sbb-step-label-prefix-background-color);\n transition-duration: var(--sbb-step-label-animation-duration);\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: background-color, inset;\n}\n\n.sbb-step-label__text {\n font-weight: bold;\n}\n:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n::slotted(sbb-icon),\nsbb-icon {\n z-index: 1;\n background-color: var(--sbb-step-label-prefix-background-color);\n border-radius: var(--sbb-border-radius-infinity);\n translate: 0 var(--sbb-step-label-translate-y-content-hover, 0);\n transition-duration: var(--sbb-step-label-animation-duration);\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: background-color, translate;\n}\n";
|
|
11
11
|
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/elements/stepper/step-label/step-label.component.ts
|
package/development/tabs.pure.js
CHANGED
|
@@ -12,7 +12,7 @@ var tab_group_common_default = ":host {\n display: flex;\n flex-direction: col
|
|
|
12
12
|
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/elements/tabs/common/tab-label-common.scss?inline
|
|
15
|
-
var tab_label_common_default = ":host {\n --sbb-tab-label-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-tab-label-outline-border-radius-internal: calc(\n var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset)\n );\n}\n\n:host(:is(:is(:state(size-s),[state--size-s]), [size=s])) {\n --sbb-tab-label-height: var(--sbb-size-element-xs);\n --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);\n --sbb-tab-label-font-size: var(--sbb-text-font-size-s);\n}\n\n:host(:is(:is(:state(size-l),[state--size-l]), [size=l])) {\n --sbb-tab-label-height: var(--sbb-size-element-m);\n --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);\n --sbb-tab-label-font-size: var(--sbb-text-font-size-m);\n}\n\n:host(:is(:is(:state(size-xl),[state--size-xl]), [size=xl])) {\n --sbb-tab-label-height: var(--sbb-size-element-m);\n --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);\n --sbb-tab-label-font-size: var(--sbb-text-font-size-xl);\n}\n\n:host(sbb-tab-label),\n:host(sbb-tab-nav-bar) ::slotted(a) {\n pointer-events: var(--sbb-tab-label-pointer-events, unset);\n}\n@media (forced-colors: active) {\n :host(sbb-tab-label),\n :host(sbb-tab-nav-bar) ::slotted(a) {\n --sbb-tab-label-color: ButtonText;\n --sbb-tab-label-amount-color: ButtonText;\n }\n}\n\n:host(sbb-tab-nav-bar) ::slotted(a),\n:host(sbb-tab-label) .sbb-tab-label {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--sbb-tab-label-gap);\n color: var(--sbb-tab-label-color);\n margin: 0;\n padding-inline: var(--sbb-tab-label-inline-padding);\n min-height: var(--sbb-tab-label-height);\n transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);\n font-size: var(--sbb-tab-label-font-size);\n letter-spacing: var(--sbb-
|
|
15
|
+
var tab_label_common_default = ":host {\n --sbb-tab-label-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-tab-label-outline-border-radius-internal: calc(\n var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset)\n );\n}\n\n:host(:is(:is(:state(size-s),[state--size-s]), [size=s])) {\n --sbb-tab-label-height: var(--sbb-size-element-xs);\n --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);\n --sbb-tab-label-font-size: var(--sbb-text-font-size-s);\n}\n\n:host(:is(:is(:state(size-l),[state--size-l]), [size=l])) {\n --sbb-tab-label-height: var(--sbb-size-element-m);\n --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);\n --sbb-tab-label-font-size: var(--sbb-text-font-size-m);\n}\n\n:host(:is(:is(:state(size-xl),[state--size-xl]), [size=xl])) {\n --sbb-tab-label-height: var(--sbb-size-element-m);\n --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);\n --sbb-tab-label-font-size: var(--sbb-text-font-size-xl);\n}\n\n:host(sbb-tab-label),\n:host(sbb-tab-nav-bar) ::slotted(a) {\n pointer-events: var(--sbb-tab-label-pointer-events, unset);\n}\n@media (forced-colors: active) {\n :host(sbb-tab-label),\n :host(sbb-tab-nav-bar) ::slotted(a) {\n --sbb-tab-label-color: ButtonText;\n --sbb-tab-label-amount-color: ButtonText;\n }\n}\n\n:host(sbb-tab-nav-bar) ::slotted(a),\n:host(sbb-tab-label) .sbb-tab-label {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--sbb-tab-label-gap);\n color: var(--sbb-tab-label-color);\n margin: 0;\n padding-inline: var(--sbb-tab-label-inline-padding);\n min-height: var(--sbb-tab-label-height);\n transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);\n font-size: var(--sbb-tab-label-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n font-weight: var(--sbb-tab-label-font-weight);\n text-decoration: var(--sbb-tab-label-text-decoration);\n}\n:host(sbb-tab-nav-bar) ::slotted(a)::after,\n:host(sbb-tab-label) .sbb-tab-label::after {\n position: absolute;\n content: \"\";\n inset-inline: 0;\n inset-block-end: 0;\n height: var(--sbb-tab-label-marker-thickness);\n background-color: var(--sbb-tab-label-color);\n scale: var(--sbb-tab-label-marker-scale, 0);\n transition-duration: var(--sbb-tab-label-animation-duration);\n transition-timing-function: var(--sbb-tab-label-animation-easing);\n transition-property: scale, background-color;\n}\n\n:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider],\n:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])) {\n position: relative;\n}\n:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider]::before,\n:host(sbb-tab-label:is(:state(has-divider),[state--has-divider]))::before {\n content: \"\";\n position: absolute;\n inset-inline-start: 0;\n inset-block-end: 0;\n width: var(--sbb-tab-group-width);\n height: var(--sbb-border-width-1x);\n background-color: var(--sbb-tab-label-line-color);\n}\n\n:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),\n:host(sbb-tab-label[disabled]) {\n --sbb-tab-label-cursor: unset;\n --sbb-tab-label-pointer-events: none;\n --sbb-tab-label-text-decoration: line-through;\n}\n@media (forced-colors: active) {\n :host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),\n :host(sbb-tab-label[disabled]) {\n --sbb-tab-label-color: GrayText;\n --sbb-tab-label-amount-color: GrayText;\n }\n}\n\n:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),\n:host(sbb-tab-label[active]:not([disabled])) {\n --sbb-tab-label-color: var(--sbb-color-3);\n --sbb-tab-label-cursor: unset;\n --sbb-tab-label-pointer-events: none;\n --sbb-tab-label-marker-scale: 1;\n}\n@media (forced-colors: active) {\n :host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),\n :host(sbb-tab-label[active]:not([disabled])) {\n --sbb-tab-label-color: ButtonText;\n --sbb-tab-label-amount-color: ButtonText;\n }\n}\n\n@media (any-hover: hover) {\n :host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),\n :host(sbb-tab-label:hover:not([disabled])) {\n --sbb-tab-label-marker-scale: 1;\n }\n}\n\n:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),\n:host(sbb-tab-label:active) {\n --sbb-tab-label-color: var(--sbb-color-3);\n}\n@media (forced-colors: active) {\n :host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),\n :host(sbb-tab-label:active) {\n --sbb-tab-label-color: ButtonText;\n --sbb-tab-label-amount-color: ButtonText;\n }\n}\n\n:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),\n:host(sbb-tab-label:focus-visible) .sbb-tab-label {\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 border-radius: var(--sbb-tab-label-outline-border-radius-internal);\n}\n";
|
|
16
16
|
|
|
17
17
|
//#endregion
|
|
18
18
|
//#region src/elements/tabs/common/styles.ts
|
package/development/tag.pure.js
CHANGED
|
@@ -231,7 +231,7 @@ let SbbTagGroupElement = (() => {
|
|
|
231
231
|
|
|
232
232
|
//#endregion
|
|
233
233
|
//#region src/elements/tag/tag/tag.scss?inline
|
|
234
|
-
var tag_default = ":host {\n --sbb-tag-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: inline-block;\n max-width: 100%;\n outline: none !important;\n}\n\n:host([size=s]) {\n --sbb-tag-height: var(--sbb-tag-height-s);\n --sbb-tag-padding-inline: var(--sbb-tag-padding-inline-s);\n}\n\n:host([size=m]) {\n --sbb-tag-height: var(--sbb-tag-height-m);\n --sbb-tag-padding-inline: var(--sbb-tag-padding-inline-m);\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-tag-border-color: var(--sbb-border-color-3);\n --sbb-tag-border-width: var(--sbb-border-width-2x);\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-tag-border-color: Highlight !important;\n --sbb-tag-border-width: var(--sbb-border-width-4x);\n }\n}\n\n:host(:is(:disabled, [disabled-interactive])) {\n --sbb-tag-text-color: var(--sbb-color-granite);\n --sbb-tag-text-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n --sbb-tag-amount-color: var(--sbb-tag-text-color);\n --sbb-tag-background-color: var(--sbb-background-color-3);\n --sbb-tag-border-color: var(--sbb-color-cement);\n --sbb-tag-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));\n --sbb-tag-border-style: dashed;\n --sbb-tag-cursor: unset;\n --sbb-tag-pointer-events: none;\n}\n@media (forced-colors: active) {\n :host(:is(:disabled, [disabled-interactive])) {\n --sbb-tag-text-color: GrayText;\n --sbb-tag-amount-color: GrayText;\n --sbb-tag-border-color: GrayText;\n }\n}\n\n:host(:is(:state(checked),[state--checked]):is(:disabled, [disabled-interactive])) {\n --sbb-tag-border-color: var(--sbb-color-metal);\n --sbb-tag-border-color: light-dark(var(--sbb-color-metal), var(--sbb-color-cement));\n --sbb-tag-border-style: dashed;\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n --sbb-tag-background-color: var(--sbb-background-color-3);\n --sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);\n --sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1));\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover:not(:disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n --sbb-tag-border-color: Highlight;\n }\n}\n\n:host(:is(:active, :is(:state(active),[state--active])):not(:disabled, [disabled-interactive])) {\n --sbb-tag-background-color: var(--sbb-background-color-3);\n --sbb-tag-border-color: var(--sbb-color-iron);\n --sbb-tag-border-color: light-dark(var(--sbb-color-iron), var(--sbb-color-storm));\n --sbb-tag-border-width: var(--sbb-border-width-2x);\n --sbb-tag-text-color: var(--sbb-color-4);\n}\n@media (forced-colors: active) {\n :host(:is(:active, :is(:state(active),[state--active])):not(:disabled, [disabled-interactive])) {\n --sbb-tag-border-color: Highlight;\n --sbb-tag-text-color: ButtonText;\n }\n}\n\n.sbb-tag {\n position: relative;\n display: flex;\n align-items: center;\n height: var(--sbb-tag-height);\n max-width: 100%;\n font-size: var(--sbb-text-font-size-xs);\n letter-spacing: var(--sbb-
|
|
234
|
+
var tag_default = ":host {\n --sbb-tag-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: inline-block;\n max-width: 100%;\n outline: none !important;\n}\n\n:host([size=s]) {\n --sbb-tag-height: var(--sbb-tag-height-s);\n --sbb-tag-padding-inline: var(--sbb-tag-padding-inline-s);\n}\n\n:host([size=m]) {\n --sbb-tag-height: var(--sbb-tag-height-m);\n --sbb-tag-padding-inline: var(--sbb-tag-padding-inline-m);\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-tag-border-color: var(--sbb-border-color-3);\n --sbb-tag-border-width: var(--sbb-border-width-2x);\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-tag-border-color: Highlight !important;\n --sbb-tag-border-width: var(--sbb-border-width-4x);\n }\n}\n\n:host(:is(:disabled, [disabled-interactive])) {\n --sbb-tag-text-color: var(--sbb-color-granite);\n --sbb-tag-text-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n --sbb-tag-amount-color: var(--sbb-tag-text-color);\n --sbb-tag-background-color: var(--sbb-background-color-3);\n --sbb-tag-border-color: var(--sbb-color-cement);\n --sbb-tag-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));\n --sbb-tag-border-style: dashed;\n --sbb-tag-cursor: unset;\n --sbb-tag-pointer-events: none;\n}\n@media (forced-colors: active) {\n :host(:is(:disabled, [disabled-interactive])) {\n --sbb-tag-text-color: GrayText;\n --sbb-tag-amount-color: GrayText;\n --sbb-tag-border-color: GrayText;\n }\n}\n\n:host(:is(:state(checked),[state--checked]):is(:disabled, [disabled-interactive])) {\n --sbb-tag-border-color: var(--sbb-color-metal);\n --sbb-tag-border-color: light-dark(var(--sbb-color-metal), var(--sbb-color-cement));\n --sbb-tag-border-style: dashed;\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n --sbb-tag-background-color: var(--sbb-background-color-3);\n --sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);\n --sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1));\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover:not(:disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n --sbb-tag-border-color: Highlight;\n }\n}\n\n:host(:is(:active, :is(:state(active),[state--active])):not(:disabled, [disabled-interactive])) {\n --sbb-tag-background-color: var(--sbb-background-color-3);\n --sbb-tag-border-color: var(--sbb-color-iron);\n --sbb-tag-border-color: light-dark(var(--sbb-color-iron), var(--sbb-color-storm));\n --sbb-tag-border-width: var(--sbb-border-width-2x);\n --sbb-tag-text-color: var(--sbb-color-4);\n}\n@media (forced-colors: active) {\n :host(:is(:active, :is(:state(active),[state--active])):not(:disabled, [disabled-interactive])) {\n --sbb-tag-border-color: Highlight;\n --sbb-tag-text-color: ButtonText;\n }\n}\n\n.sbb-tag {\n position: relative;\n display: flex;\n align-items: center;\n height: var(--sbb-tag-height);\n max-width: 100%;\n font-size: var(--sbb-text-font-size-xs);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n gap: var(--sbb-tag-gap);\n padding-inline: var(--sbb-tag-padding-inline);\n cursor: var(--sbb-tag-cursor, var(--sbb-cursor-pointer));\n border-radius: var(--sbb-tag-border-radius);\n color: var(--sbb-tag-text-color);\n transition: color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n pointer-events: var(--sbb-tag-pointer-events, unset);\n}\n.sbb-tag::before {\n content: \"\";\n position: absolute;\n inset: var(--sbb-tag-inset, 0);\n background-color: var(--sbb-tag-background-color);\n border: var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);\n border-radius: var(--sbb-tag-border-radius);\n transition-duration: var(--sbb-tag-animation-duration);\n transition-timing-function: var(--sbb-tag-animation-easing);\n transition-property: inset, background-color, border-color, box-shadow;\n}\n:host(:focus-visible) .sbb-tag::before {\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}\n\n.sbb-tag__icon {\n display: flex;\n align-items: center;\n height: calc(var(--sbb-typo-line-height-text) * 1em);\n flex-shrink: 0;\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon {\n display: none;\n}\n\n.sbb-tag__text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: bold;\n}\n\n.sbb-tag__amount {\n color: var(--sbb-tag-amount-color);\n}\n:host(:not(:is(:state(slotted-amount),[state--slotted-amount]), [amount])) .sbb-tag__amount {\n display: none;\n}\n\n.sbb-tag--shift {\n transition: transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);\n transform: var(--sbb-tag-content-shift, 0);\n will-change: transform;\n}\n";
|
|
235
235
|
|
|
236
236
|
//#endregion
|
|
237
237
|
//#region src/elements/tag/tag/tag.component.ts
|
|
@@ -3,7 +3,7 @@ import { html } from "lit/static-html.js";
|
|
|
3
3
|
import { SbbElement } from "./core.js";
|
|
4
4
|
|
|
5
5
|
//#region src/elements/teaser-panel/teaser-panel.scss?inline
|
|
6
|
-
var teaser_panel_default = ":host {\n --sbb-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n inset: 0;\n min-height: var(--_sbb-panel-height);\n font-size: var(--sbb-panel-font-size);\n font-weight: var(--sbb-panel-font-weight);\n line-height: var(--sbb-panel-line-height);\n letter-spacing: var(--sbb-
|
|
6
|
+
var teaser_panel_default = ":host {\n --sbb-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n inset: 0;\n min-height: var(--_sbb-panel-height);\n font-size: var(--sbb-panel-font-size);\n font-weight: var(--sbb-panel-font-weight);\n line-height: var(--sbb-panel-line-height);\n letter-spacing: var(--sbb-letter-spacing-heading);\n color: var(--sbb-panel-color);\n hyphens: auto;\n}\n\n@media (any-hover: hover) {\n :host(:hover) {\n --sbb-panel-background-color: var(--sbb-panel-background-color-hover);\n }\n}\n.sbb-teaser-panel {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--sbb-panel-gap);\n width: var(--sbb-panel-width);\n height: var(--_sbb-panel-height);\n padding-block: var(--sbb-panel-triangle-height);\n padding-inline: var(--sbb-panel-padding-inline);\n clip-path: polygon(0 0, 100% var(--sbb-panel-triangle-height), 100% calc(100% - var(--sbb-panel-triangle-height)), 0% 100%);\n background-color: var(--sbb-panel-background-color);\n transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);\n}\n";
|
|
7
7
|
|
|
8
8
|
//#endregion
|
|
9
9
|
//#region src/elements/teaser-panel/teaser-panel.component.ts
|
|
@@ -5,7 +5,7 @@ import { SbbActionBaseElement, SbbLinkBaseElement, SbbNegativeMixin, screenReade
|
|
|
5
5
|
import { html as html$1 } from "lit/static-html.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/teaser-product/common/teaser-product-common.scss?inline
|
|
8
|
-
var teaser_product_common_default = ":host {\n --sbb-teaser-product-background: var(--sbb-teaser-product-background-color);\n display: block;\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-teaser-product-content-min-height: calc(\n var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-spacing)\n );\n --sbb-teaser-product-background: linear-gradient(\n var(--sbb-teaser-product-background-gradient-direction),\n var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start),\n transparent var(--sbb-teaser-product-background-gradient-end)\n );\n }\n}\n\n:host([negative]) {\n --sbb-teaser-product-background-color: var(--sbb-background-color-1-negative);\n --sbb-teaser-product-content-color: var(--sbb-color-4-negative);\n --sbb-teaser-product-footer-color: var(--sbb-color-4-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-title-color: var(--sbb-color-3-negative);\n}\n\n:host([image-alignment=before]) {\n --sbb-teaser-product-background-gradient-direction: to left;\n}\n\n:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) {\n --sbb-teaser-product-footer-padding-block-start: 0;\n}\n\n.sbb-teaser-product__image-container {\n overflow: hidden;\n border-radius: var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0;\n}\n@media (min-width: calc(64rem)) {\n .sbb-teaser-product__image-container {\n position: absolute;\n inset: 0;\n border-radius: var(--sbb-teaser-product-border-radius);\n }\n}\n\n::slotted(p.sbb-teaser-product--spacing) {\n margin: 0;\n}\n\n::slotted(sbb-title.sbb-teaser-product--spacing) {\n margin-block-start: 0;\n}\n\n::slotted(:is(sbb-action-group, :is(:state(action),[state--action])).sbb-teaser-product--spacing) {\n margin-block-start: var(--sbb-spacing-responsive-xxs);\n}\n\n::slotted([slot=image]) {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n@media (forced-colors: active) {\n .sbb-teaser-product__root::after {\n content: \"\";\n position: absolute;\n display: block;\n inset: 0;\n pointer-events: none;\n border: var(--sbb-border-width-2x) solid CanvasText;\n border-radius: var(--sbb-teaser-product-border-radius);\n }\n}\n\n.sbb-action-base {\n display: block;\n position: relative;\n text-decoration: none;\n}\n\n.sbb-teaser-product__container {\n background: var(--sbb-teaser-product-background);\n border-radius: 0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);\n padding-block: var(--sbb-teaser-product-container-padding-block);\n padding-inline: var(--sbb-teaser-product-container-padding-inline);\n}\n@media (min-width: calc(64rem)) {\n .sbb-teaser-product__container {\n display: grid;\n grid: \"content .\" 1fr \"footnote .\" auto/1fr 1fr;\n column-gap: var(--sbb-spacing-responsive-xxl);\n border-radius: var(--sbb-teaser-product-border-radius);\n position: relative;\n }\n :host([image-alignment=before]) .sbb-teaser-product__container {\n grid-template-areas: \". content\" \". footnote\";\n }\n}\n\n.sbb-teaser-product__content {\n grid-area: content;\n align-self: center;\n margin: 0;\n color: var(--sbb-teaser-product-content-color);\n min-height: var(--sbb-teaser-product-content-min-height, 0);\n align-content: var(--sbb-teaser-product-content-align-content, normal);\n}\n\n.sbb-teaser-product__footnote {\n grid-area: footnote;\n padding-block: var(--sbb-teaser-product-footer-padding-block-start) var(--sbb-teaser-product-footer-padding-block-end);\n color: var(--sbb-teaser-product-footer-color);\n font-size: var(--sbb-teaser-product-footer-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var teaser_product_common_default = ":host {\n --sbb-teaser-product-background: var(--sbb-teaser-product-background-color);\n display: block;\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-teaser-product-content-min-height: calc(\n var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-spacing)\n );\n --sbb-teaser-product-background: linear-gradient(\n var(--sbb-teaser-product-background-gradient-direction),\n var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start),\n transparent var(--sbb-teaser-product-background-gradient-end)\n );\n }\n}\n\n:host([negative]) {\n --sbb-teaser-product-background-color: var(--sbb-background-color-1-negative);\n --sbb-teaser-product-content-color: var(--sbb-color-4-negative);\n --sbb-teaser-product-footer-color: var(--sbb-color-4-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-title-color: var(--sbb-color-3-negative);\n}\n\n:host([image-alignment=before]) {\n --sbb-teaser-product-background-gradient-direction: to left;\n}\n\n:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) {\n --sbb-teaser-product-footer-padding-block-start: 0;\n}\n\n.sbb-teaser-product__image-container {\n overflow: hidden;\n border-radius: var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0;\n}\n@media (min-width: calc(64rem)) {\n .sbb-teaser-product__image-container {\n position: absolute;\n inset: 0;\n border-radius: var(--sbb-teaser-product-border-radius);\n }\n}\n\n::slotted(p.sbb-teaser-product--spacing) {\n margin: 0;\n}\n\n::slotted(sbb-title.sbb-teaser-product--spacing) {\n margin-block-start: 0;\n}\n\n::slotted(:is(sbb-action-group, :is(:state(action),[state--action])).sbb-teaser-product--spacing) {\n margin-block-start: var(--sbb-spacing-responsive-xxs);\n}\n\n::slotted([slot=image]) {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n@media (forced-colors: active) {\n .sbb-teaser-product__root::after {\n content: \"\";\n position: absolute;\n display: block;\n inset: 0;\n pointer-events: none;\n border: var(--sbb-border-width-2x) solid CanvasText;\n border-radius: var(--sbb-teaser-product-border-radius);\n }\n}\n\n.sbb-action-base {\n display: block;\n position: relative;\n text-decoration: none;\n}\n\n.sbb-teaser-product__container {\n background: var(--sbb-teaser-product-background);\n border-radius: 0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);\n padding-block: var(--sbb-teaser-product-container-padding-block);\n padding-inline: var(--sbb-teaser-product-container-padding-inline);\n}\n@media (min-width: calc(64rem)) {\n .sbb-teaser-product__container {\n display: grid;\n grid: \"content .\" 1fr \"footnote .\" auto/1fr 1fr;\n column-gap: var(--sbb-spacing-responsive-xxl);\n border-radius: var(--sbb-teaser-product-border-radius);\n position: relative;\n }\n :host([image-alignment=before]) .sbb-teaser-product__container {\n grid-template-areas: \". content\" \". footnote\";\n }\n}\n\n.sbb-teaser-product__content {\n grid-area: content;\n align-self: center;\n margin: 0;\n color: var(--sbb-teaser-product-content-color);\n min-height: var(--sbb-teaser-product-content-min-height, 0);\n align-content: var(--sbb-teaser-product-content-align-content, normal);\n}\n\n.sbb-teaser-product__footnote {\n grid-area: footnote;\n padding-block: var(--sbb-teaser-product-footer-padding-block-start) var(--sbb-teaser-product-footer-padding-block-end);\n color: var(--sbb-teaser-product-footer-color);\n font-size: var(--sbb-teaser-product-footer-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n min-height: var(--sbb-teaser-product-footer-min-height, 0);\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/teaser-product/common/teaser-product-common.ts
|
|
@@ -5,7 +5,7 @@ import { SbbActionBaseElement, SbbLinkBaseElement, screenReaderOnlyStyles } from
|
|
|
5
5
|
import { html as html$1 } from "lit/static-html.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/teaser/common/teaser-common.scss?inline
|
|
8
|
-
var teaser_common_default = "@charset \"UTF-8\";\n:host {\n --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-border-radius: calc(\n var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n );\n display: inline-block;\n}\n\n:host([size=l]) {\n --sbb-teaser-gap: var(--sbb-teaser-gap-l);\n --sbb-teaser-title-gap: var(--sbb-teaser-title-gap-l);\n --sbb-teaser-button-gap: var(--sbb-teaser-button-gap-l);\n --sbb-teaser-font-size: var(--sbb-teaser-font-size-l);\n}\n\n:host(:is([alignment=after], [alignment=before])) {\n --sbb-teaser-align-items: start;\n}\n\n:host(:is([alignment=before], [alignment=before-centered])) {\n --sbb-teaser-flex-direction: row-reverse;\n}\n\n:host([alignment=below]) {\n --sbb-teaser-flex-direction: column;\n --sbb-teaser-align-items: baseline;\n --sbb-teaser-gap: var(--sbb-teaser-gap-below);\n}\n\n.sbb-teaser__wrapper {\n display: flex;\n position: relative;\n}\n.sbb-teaser__wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n@media (forced-colors: active) {\n .sbb-teaser__wrapper::after {\n content: \"\";\n position: absolute;\n inset: var(--_sbb-teaser-forced-colors-inset);\n pointer-events: none;\n border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-teaser__container {\n display: flex;\n flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n align-items: var(--sbb-teaser-align-items);\n gap: var(--sbb-teaser-gap);\n max-width: 100%;\n width: 100%;\n}\n\n.sbb-teaser__content {\n display: flex;\n flex-direction: column;\n gap: var(--sbb-teaser-button-gap);\n width: 100%;\n}\n\n.sbb-teaser__text {\n color: var(--sbb-teaser-description-color);\n font-size: var(--sbb-teaser-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var teaser_common_default = "@charset \"UTF-8\";\n:host {\n --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-border-radius: calc(\n var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n );\n display: inline-block;\n}\n\n:host([size=l]) {\n --sbb-teaser-gap: var(--sbb-teaser-gap-l);\n --sbb-teaser-title-gap: var(--sbb-teaser-title-gap-l);\n --sbb-teaser-button-gap: var(--sbb-teaser-button-gap-l);\n --sbb-teaser-font-size: var(--sbb-teaser-font-size-l);\n}\n\n:host(:is([alignment=after], [alignment=before])) {\n --sbb-teaser-align-items: start;\n}\n\n:host(:is([alignment=before], [alignment=before-centered])) {\n --sbb-teaser-flex-direction: row-reverse;\n}\n\n:host([alignment=below]) {\n --sbb-teaser-flex-direction: column;\n --sbb-teaser-align-items: baseline;\n --sbb-teaser-gap: var(--sbb-teaser-gap-below);\n}\n\n.sbb-teaser__wrapper {\n display: flex;\n position: relative;\n}\n.sbb-teaser__wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n@media (forced-colors: active) {\n .sbb-teaser__wrapper::after {\n content: \"\";\n position: absolute;\n inset: var(--_sbb-teaser-forced-colors-inset);\n pointer-events: none;\n border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-teaser__container {\n display: flex;\n flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n align-items: var(--sbb-teaser-align-items);\n gap: var(--sbb-teaser-gap);\n max-width: 100%;\n width: 100%;\n}\n\n.sbb-teaser__content {\n display: flex;\n flex-direction: column;\n gap: var(--sbb-teaser-button-gap);\n width: 100%;\n}\n\n.sbb-teaser__text {\n color: var(--sbb-teaser-description-color);\n font-size: var(--sbb-teaser-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n overflow: hidden;\n max-width: 100%;\n}\n\n:host(:is(:state(slotted-action),[state--slotted-action])) slot[name=action] {\n display: block;\n}\n\n::slotted([slot=image]) {\n display: block;\n width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--sbb-teaser-border-radius);\n transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n max-width: 100%;\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n display: none;\n}\n\n.sbb-teaser__description {\n display: inline-block;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n display: flex;\n width: fit-content;\n max-width: 100%;\n margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n margin-block: 0 var(--sbb-teaser-title-gap);\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/teaser/common/teaser-common.ts
|
|
@@ -77,6 +77,10 @@ const SbbTeaserCommonElementMixin = (superClass) => {
|
|
|
77
77
|
set size(value) {
|
|
78
78
|
this.#size_accessor_storage = value;
|
|
79
79
|
}
|
|
80
|
+
willUpdate(changedProperties) {
|
|
81
|
+
super.willUpdate(changedProperties);
|
|
82
|
+
if (changedProperties.has("size")) this._configureTitle();
|
|
83
|
+
}
|
|
80
84
|
_handleSlotchange() {
|
|
81
85
|
let foundChipLabel = false;
|
|
82
86
|
let foundTitle = false;
|
|
@@ -98,8 +102,8 @@ const SbbTeaserCommonElementMixin = (superClass) => {
|
|
|
98
102
|
chipLabel.size = "xxs";
|
|
99
103
|
}
|
|
100
104
|
}
|
|
101
|
-
_configureTitle(
|
|
102
|
-
const title =
|
|
105
|
+
_configureTitle() {
|
|
106
|
+
const title = this.shadowRoot?.querySelector("slot[name=\"title\"]")?.assignedElements().find((e) => e.localName === "sbb-title");
|
|
103
107
|
if (title) {
|
|
104
108
|
customElements.upgrade(title);
|
|
105
109
|
title.visualLevel = this.size === "l" ? "2" : "5";
|
|
@@ -5,7 +5,7 @@ import { SbbElement, SbbLanguageController, SbbNegativeMixin, i18nClass, listRes
|
|
|
5
5
|
import { SbbTimetableOccupancyIconElement } from "./timetable-occupancy-icon.pure.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/timetable-occupancy/timetable-occupancy.scss?inline
|
|
8
|
-
var timetable_occupancy_default = ":host {\n --sbb-icon-svg-width: 0.890625rem;\n --sbb-icon-svg-height: v0.75rem;\n display: inline-block;\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-icon-svg-width: 1.1875rem;\n --sbb-icon-svg-height: v1rem;\n }\n}\n\n:host([negative]) {\n --sbb-timetable-occupancy-color: var(--sbb-color-2-negative);\n}\n\n.sbb-timetable-occupancy__list {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--sbb-timetable-occupancy-list-gap);\n}\n\n.sbb-timetable-occupancy__list-item {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--sbb-timetable-occupancy-item-gap);\n}\n\n.sbb-timetable-occupancy__list-item-class {\n color: var(--sbb-timetable-occupancy-color);\n font-size: var(--sbb-timetable-occupancy-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var timetable_occupancy_default = ":host {\n --sbb-icon-svg-width: 0.890625rem;\n --sbb-icon-svg-height: v0.75rem;\n display: inline-block;\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-icon-svg-width: 1.1875rem;\n --sbb-icon-svg-height: v1rem;\n }\n}\n\n:host([negative]) {\n --sbb-timetable-occupancy-color: var(--sbb-color-2-negative);\n}\n\n.sbb-timetable-occupancy__list {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--sbb-timetable-occupancy-list-gap);\n}\n\n.sbb-timetable-occupancy__list-item {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--sbb-timetable-occupancy-item-gap);\n}\n\n.sbb-timetable-occupancy__list-item-class {\n color: var(--sbb-timetable-occupancy-color);\n font-size: var(--sbb-timetable-occupancy-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: 1;\n}\n\n.sbb-timetable-occupancy__list-item-icon {\n display: flex;\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/timetable-occupancy/timetable-occupancy.component.ts
|
|
@@ -5,7 +5,7 @@ import { html } from "lit/static-html.js";
|
|
|
5
5
|
import { SbbElement, SbbNegativeMixin } from "./core.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/title/title-common.scss?inline
|
|
8
|
-
var title_common_default = ":host {\n display: block;\n font-weight: bold;\n letter-spacing: var(--sbb-
|
|
8
|
+
var title_common_default = ":host {\n display: block;\n font-weight: bold;\n letter-spacing: var(--sbb-letter-spacing-heading);\n line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-title-color);\n font-size: var(--sbb-heading-font-size-1);\n}\n\n:host([id]) {\n scroll-margin-block-start: var(--sbb-spacing-fixed-10x);\n}\n\n:host(:where([level=\"2\"]:not([visual-level]), [visual-level=\"2\"])) {\n font-size: var(--sbb-heading-font-size-2);\n}\n\n:host(:where([level=\"3\"]:not([visual-level]), [visual-level=\"3\"])) {\n font-size: var(--sbb-heading-font-size-3);\n}\n\n:host(:where([level=\"4\"]:not([visual-level]), [visual-level=\"4\"])) {\n font-size: var(--sbb-heading-font-size-4);\n}\n\n:host(:where([level=\"5\"]:not([visual-level]), [visual-level=\"5\"])) {\n font-size: var(--sbb-heading-font-size-5);\n}\n\n:host(:where([level=\"6\"]:not([visual-level]), [visual-level=\"6\"])) {\n font-size: var(--sbb-heading-font-size-6);\n line-height: var(--sbb-typo-line-height-text);\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/title/title-base.ts
|
|
@@ -7,7 +7,7 @@ import { SbbDividerElement } from "./divider.pure.js";
|
|
|
7
7
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
8
8
|
|
|
9
9
|
//#region src/elements/toast/toast.scss?inline
|
|
10
|
-
var toast_default = ":host {\n --sbb-toast-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n display: none;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-toast-container-display: flex;\n display: block;\n}\n\n:host([position=bottom-left]),\n:host([position=bottom-start]) {\n --sbb-toast-horizontal-position: flex-start;\n --sbb-toast-vertical-position: flex-end;\n}\n\n:host([position=bottom-center]) {\n --sbb-toast-horizontal-position: center;\n --sbb-toast-vertical-position: flex-end;\n}\n\n:host([position=bottom-right]),\n:host([position=bottom-end]) {\n --sbb-toast-horizontal-position: flex-end;\n --sbb-toast-vertical-position: flex-end;\n}\n\n:host([position=top-left]),\n:host([position=top-start]) {\n --sbb-toast-horizontal-position: flex-start;\n --sbb-toast-vertical-position: flex-start;\n}\n\n:host([position=top-center]) {\n --sbb-toast-horizontal-position: center;\n --sbb-toast-vertical-position: flex-start;\n}\n\n:host([position=top-right]),\n:host([position=top-end]) {\n --sbb-toast-horizontal-position: flex-end;\n --sbb-toast-vertical-position: flex-start;\n}\n\n:host(:is(:state(dark),[state--dark])) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n}\n\n.sbb-toast__overlay-container {\n position: var(--sbb-toast-container-position);\n pointer-events: none;\n inset: 0;\n display: var(--sbb-toast-container-display, none);\n justify-content: var(--sbb-toast-horizontal-position);\n align-items: var(--sbb-toast-vertical-position);\n}\n\n.sbb-toast {\n z-index: var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));\n pointer-events: auto;\n margin: var(--sbb-toast-margin);\n border-radius: var(--sbb-toast-border-radius);\n max-width: var(--sbb-toast-max-width);\n display: flex;\n color: var(--sbb-toast-text-color);\n background-color: var(--sbb-toast-background-color);\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-toast {\n animation-name: open;\n animation-duration: var(--sbb-toast-animation-duration);\n animation-timing-function: var(--sbb-toast-animation-timing-function);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-toast {\n animation-name: close;\n animation-duration: var(--sbb-toast-animation-duration);\n animation-timing-function: var(--sbb-toast-animation-timing-function);\n}\n\n.sbb-toast-wrapper {\n display: flex;\n align-items: center;\n gap: var(--sbb-toast-gap);\n padding-block: var(--sbb-toast-padding-block);\n padding-inline: var(--sbb-toast-padding-inline);\n}\n\nslot:not([name=icon]),\n.sbb-toast__close {\n color-scheme: only light;\n}\n\n.sbb-toast__content {\n font-weight: bold;\n font-size: var(--sbb-heading-font-size-6);\n letter-spacing: var(--sbb-
|
|
10
|
+
var toast_default = ":host {\n --sbb-toast-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n display: none;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-toast-container-display: flex;\n display: block;\n}\n\n:host([position=bottom-left]),\n:host([position=bottom-start]) {\n --sbb-toast-horizontal-position: flex-start;\n --sbb-toast-vertical-position: flex-end;\n}\n\n:host([position=bottom-center]) {\n --sbb-toast-horizontal-position: center;\n --sbb-toast-vertical-position: flex-end;\n}\n\n:host([position=bottom-right]),\n:host([position=bottom-end]) {\n --sbb-toast-horizontal-position: flex-end;\n --sbb-toast-vertical-position: flex-end;\n}\n\n:host([position=top-left]),\n:host([position=top-start]) {\n --sbb-toast-horizontal-position: flex-start;\n --sbb-toast-vertical-position: flex-start;\n}\n\n:host([position=top-center]) {\n --sbb-toast-horizontal-position: center;\n --sbb-toast-vertical-position: flex-start;\n}\n\n:host([position=top-right]),\n:host([position=top-end]) {\n --sbb-toast-horizontal-position: flex-end;\n --sbb-toast-vertical-position: flex-start;\n}\n\n:host(:is(:state(dark),[state--dark])) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n}\n\n.sbb-toast__overlay-container {\n position: var(--sbb-toast-container-position);\n pointer-events: none;\n inset: 0;\n display: var(--sbb-toast-container-display, none);\n justify-content: var(--sbb-toast-horizontal-position);\n align-items: var(--sbb-toast-vertical-position);\n}\n\n.sbb-toast {\n z-index: var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));\n pointer-events: auto;\n margin: var(--sbb-toast-margin);\n border-radius: var(--sbb-toast-border-radius);\n max-width: var(--sbb-toast-max-width);\n display: flex;\n color: var(--sbb-toast-text-color);\n background-color: var(--sbb-toast-background-color);\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-toast {\n animation-name: open;\n animation-duration: var(--sbb-toast-animation-duration);\n animation-timing-function: var(--sbb-toast-animation-timing-function);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-toast {\n animation-name: close;\n animation-duration: var(--sbb-toast-animation-duration);\n animation-timing-function: var(--sbb-toast-animation-timing-function);\n}\n\n.sbb-toast-wrapper {\n display: flex;\n align-items: center;\n gap: var(--sbb-toast-gap);\n padding-block: var(--sbb-toast-padding-block);\n padding-inline: var(--sbb-toast-padding-inline);\n}\n\nslot:not([name=icon]),\n.sbb-toast__close {\n color-scheme: only light;\n}\n\n.sbb-toast__content {\n font-weight: bold;\n font-size: var(--sbb-heading-font-size-6);\n letter-spacing: var(--sbb-letter-spacing-heading);\n flex: 1 1 0;\n}\n\n.sbb-toast__close {\n display: flex;\n align-items: center;\n}\n\n.sbb-toast__close-divider {\n padding-block: var(--sbb-toast-padding-block);\n}\n\n.sbb-toast__close-button {\n margin-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n@keyframes open {\n from {\n visibility: hidden;\n opacity: 0;\n translate: 0 var(--sbb-spacing-fixed-2x);\n }\n to {\n visibility: visible;\n opacity: 1;\n translate: 0;\n }\n}\n@keyframes close {\n from {\n visibility: visible;\n opacity: 1;\n translate: 0;\n }\n to {\n visibility: hidden;\n opacity: 0;\n translate: 0 var(--sbb-spacing-fixed-2x);\n }\n}\n";
|
|
11
11
|
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/elements/toast/toast.component.ts
|
|
@@ -5,7 +5,7 @@ import { SbbElement, SbbFormAssociatedCheckboxMixin } from "./core.js";
|
|
|
5
5
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/toggle-check/toggle-check.scss?inline
|
|
8
|
-
var toggle_check_default = "@charset \"UTF-8\";\n:host {\n --sbb-toggle-check-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --_sbb-toggle-check-overall-height: var(--sbb-toggle-check-circle-diameter);\n --_sbb-toggle-check-width: calc(2 * var(--sbb-toggle-check-height));\n display: inline-block;\n outline: none !important;\n}\n\n:host([size=xs]) {\n --sbb-toggle-check-font-size: var(--sbb-text-font-size-xs);\n}\n\n:host([size=s]) {\n --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);\n}\n\n:host([size=m]) {\n --sbb-toggle-check-font-size: var(--sbb-text-font-size-m);\n --_sbb-toggle-check-overall-height: calc(1em * var(--sbb-typo-line-height-text));\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-toggle-check-background-color: var(--sbb-toggle-check-checked-color);\n --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1-negative-inverted);\n --sbb-toggle-check-circle-border-color: var(--sbb-toggle-check-background-color);\n --_sbb-toggle-check-circle-translate: calc(\n 100% - 2 * (100% - 0.5 * var(--_sbb-toggle-check-width))\n ) -50%;\n --_sbb-toggle-check-icon-opacity: 1;\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-toggle-check-icon-color: Highlight;\n --sbb-toggle-check-background-color: Highlight;\n }\n}\n\n:host(:disabled) {\n --sbb-toggle-check-background-color: var(--sbb-background-color-4);\n --sbb-toggle-check-circle-background-color: var(--sbb-background-color-3);\n --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);\n --sbb-toggle-check-circle-border-style: dashed;\n --sbb-toggle-check-icon-color: var(--sbb-color-granite);\n --sbb-toggle-check-icon-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n --sbb-toggle-check-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-toggle-check-icon-color: GrayText;\n --sbb-toggle-check-background-color: GrayText;\n --sbb-toggle-check-circle-border-style: solid;\n }\n}\n\n:host([label-position=before]) {\n --_sbb-toggle-check-flex-direction: row;\n}\n\n.sbb-toggle-check {\n position: relative;\n display: flex;\n color: var(--sbb-toggle-check-color);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n cursor: var(--sbb-toggle-check-cursor);\n border-radius: calc(var(--sbb-toggle-check-border-radius) - var(--sbb-focus-outline-offset));\n}\n.sbb-toggle-check::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n:host(:focus-visible) .sbb-toggle-check {\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}\n\n.sbb-toggle-check__container {\n display: flex;\n flex-direction: var(--_sbb-toggle-check-flex-direction, row-reverse);\n gap: var(--sbb-toggle-check-gap);\n align-items: start;\n width: 100%;\n font-size: var(--sbb-toggle-check-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var toggle_check_default = "@charset \"UTF-8\";\n:host {\n --sbb-toggle-check-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --_sbb-toggle-check-overall-height: var(--sbb-toggle-check-circle-diameter);\n --_sbb-toggle-check-width: calc(2 * var(--sbb-toggle-check-height));\n display: inline-block;\n outline: none !important;\n}\n\n:host([size=xs]) {\n --sbb-toggle-check-font-size: var(--sbb-text-font-size-xs);\n}\n\n:host([size=s]) {\n --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);\n}\n\n:host([size=m]) {\n --sbb-toggle-check-font-size: var(--sbb-text-font-size-m);\n --_sbb-toggle-check-overall-height: calc(1em * var(--sbb-typo-line-height-text));\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-toggle-check-background-color: var(--sbb-toggle-check-checked-color);\n --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1-negative-inverted);\n --sbb-toggle-check-circle-border-color: var(--sbb-toggle-check-background-color);\n --_sbb-toggle-check-circle-translate: calc(\n 100% - 2 * (100% - 0.5 * var(--_sbb-toggle-check-width))\n ) -50%;\n --_sbb-toggle-check-icon-opacity: 1;\n}\n@media (forced-colors: active) {\n :host(:is(:state(checked),[state--checked])) {\n --sbb-toggle-check-icon-color: Highlight;\n --sbb-toggle-check-background-color: Highlight;\n }\n}\n\n:host(:disabled) {\n --sbb-toggle-check-background-color: var(--sbb-background-color-4);\n --sbb-toggle-check-circle-background-color: var(--sbb-background-color-3);\n --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);\n --sbb-toggle-check-circle-border-style: dashed;\n --sbb-toggle-check-icon-color: var(--sbb-color-granite);\n --sbb-toggle-check-icon-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n --sbb-toggle-check-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-toggle-check-icon-color: GrayText;\n --sbb-toggle-check-background-color: GrayText;\n --sbb-toggle-check-circle-border-style: solid;\n }\n}\n\n:host([label-position=before]) {\n --_sbb-toggle-check-flex-direction: row;\n}\n\n.sbb-toggle-check {\n position: relative;\n display: flex;\n color: var(--sbb-toggle-check-color);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n cursor: var(--sbb-toggle-check-cursor);\n border-radius: calc(var(--sbb-toggle-check-border-radius) - var(--sbb-focus-outline-offset));\n}\n.sbb-toggle-check::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n:host(:focus-visible) .sbb-toggle-check {\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}\n\n.sbb-toggle-check__container {\n display: flex;\n flex-direction: var(--_sbb-toggle-check-flex-direction, row-reverse);\n gap: var(--sbb-toggle-check-gap);\n align-items: start;\n width: 100%;\n font-size: var(--sbb-toggle-check-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n.sbb-toggle-check__label {\n flex-grow: 1;\n padding-block-start: calc((var(--sbb-toggle-check-circle-diameter) - var(--sbb-typo-line-height-text) * 1em) / 2);\n}\n:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-toggle-check__label {\n display: none;\n}\n\n.sbb-toggle-check__track {\n display: inline-block;\n position: relative;\n min-width: var(--_sbb-toggle-check-width);\n height: var(--sbb-toggle-check-height);\n border-radius: var(--sbb-border-radius-infinity);\n background-color: var(--sbb-toggle-check-background-color);\n margin-block: calc((var(--_sbb-toggle-check-overall-height) - var(--sbb-toggle-check-height)) / 2);\n}\n\n.sbb-toggle-check__circle {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n width: var(--sbb-toggle-check-circle-diameter);\n height: var(--sbb-toggle-check-circle-diameter);\n border: var(--sbb-toggle-check-border-width) var(--sbb-toggle-check-circle-border-style) var(--sbb-toggle-check-circle-border-color);\n border-radius: 50%;\n background-color: var(--sbb-toggle-check-circle-background-color);\n color: var(--sbb-toggle-check-icon-color);\n will-change: translate;\n translate: var(--_sbb-toggle-check-circle-translate, 0 -50%);\n transition: translate ease var(--sbb-toggle-check-animation-duration);\n box-shadow: var(--sbb-toggle-check-shadow);\n}\n\n.sbb-toggle-check__icon {\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n width: var(--sbb-size-icon-ui-small);\n height: var(--sbb-size-icon-ui-small);\n opacity: var(--_sbb-toggle-check-icon-opacity, 0);\n transition: opacity ease var(--sbb-toggle-check-animation-duration);\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/toggle-check/toggle-check.component.ts
|