@sbb-esta/lyne-elements 3.12.1 → 3.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +4 -4
- package/breadcrumb/breadcrumb/breadcrumb.component.js +1 -1
- package/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts +1 -0
- package/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts.map +1 -1
- package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +4 -4
- package/button/common.js +1 -1
- package/button.js +1 -1
- package/calendar/calendar.component.d.ts +1 -0
- package/calendar/calendar.component.d.ts.map +1 -1
- package/calendar/calendar.component.js +126 -126
- package/card/common/card-action-common.d.ts.map +1 -1
- package/card/common/card-action-common.js +3 -8
- package/checkbox/common.js +1 -1
- package/checkbox-common-C5r-MPLc.js +5 -0
- package/checkbox.js +1 -1
- package/core/a11y/interactivity-checker.js +0 -7
- package/core/a11y/live-announcer.js +0 -7
- package/core/config/config.d.ts +5 -0
- package/core/config/config.d.ts.map +1 -1
- package/core/datetime/native-date-adapter.d.ts +1 -0
- package/core/datetime/native-date-adapter.d.ts.map +1 -1
- package/core/datetime/native-date-adapter.js +1 -1
- package/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
- package/core/mixins.js +2 -2
- package/core/styles/core.scss +4 -0
- package/core.css +2 -0
- package/custom-elements.json +24 -179
- package/date-input/date-input.component.d.ts +1 -0
- package/date-input/date-input.component.d.ts.map +1 -1
- package/date-input/date-input.component.js +2 -1
- package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +2 -2
- package/development/breadcrumb/breadcrumb/breadcrumb.component.js +1 -1
- package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts +1 -0
- package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts.map +1 -1
- package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +3 -3
- package/development/button/common.js +1 -1
- package/development/button.js +1 -1
- package/development/calendar/calendar.component.d.ts +1 -0
- package/development/calendar/calendar.component.d.ts.map +1 -1
- package/development/calendar/calendar.component.js +4 -4
- package/development/card/common/card-action-common.d.ts.map +1 -1
- package/development/card/common/card-action-common.js +15 -8
- package/development/checkbox/common.js +1 -1
- package/development/{checkbox-common-Dy_ofVhp.js → checkbox-common-Cq9DLK37.js} +3 -3
- package/development/checkbox.js +1 -1
- package/development/core/a11y/interactivity-checker.js +1 -8
- package/development/core/a11y/live-announcer.js +1 -8
- package/development/core/config/config.d.ts +5 -0
- package/development/core/config/config.d.ts.map +1 -1
- package/development/core/config/config.js +1 -1
- package/development/core/datetime/native-date-adapter.d.ts +1 -0
- package/development/core/datetime/native-date-adapter.d.ts.map +1 -1
- package/development/core/datetime/native-date-adapter.js +2 -2
- package/development/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
- package/development/core/mixins/form-associated-input-mixin.js +1 -1
- package/development/core/mixins.js +2 -2
- package/development/date-input/date-input.component.d.ts +1 -0
- package/development/date-input/date-input.component.d.ts.map +1 -1
- package/development/date-input/date-input.component.js +3 -2
- package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +2 -2
- package/development/flip-card/flip-card/flip-card.component.js +2 -2
- package/development/form-field/form-field/form-field.component.js +1 -1
- package/development/header/common/header-action-common.js +1 -1
- package/development/{icon-sidebar-button-common-BGrKtvyM.js → icon-sidebar-button-common-CaOV-n8E.js} +2 -2
- package/development/link/common/block-link-common.js +1 -1
- package/development/link/common/inline-link-common.js +1 -1
- package/development/link/common/link-common.js +1 -1
- package/development/link/common.js +1 -1
- package/development/{link-common-BDFF9Oiz.js → link-common-B9KyXHCd.js} +3 -3
- package/development/link.js +1 -1
- package/development/menu/common/menu-action-common.js +4 -4
- package/development/navigation/common/navigation-action-common.js +1 -1
- package/development/option/option/option.component.js +2 -2
- package/development/paginator/common/paginator-common.d.ts.map +1 -1
- package/development/paginator/common/paginator-common.js +7 -24
- package/development/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
- package/development/paginator/compact-paginator/compact-paginator.component.js +2 -3
- package/development/paginator/paginator/paginator.component.d.ts +0 -6
- package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/development/paginator/paginator/paginator.component.js +6 -21
- package/development/popover/popover/popover.component.d.ts.map +1 -1
- package/development/popover/popover/popover.component.js +63 -13
- package/development/radio-button/common.js +1 -1
- package/development/{radio-button-common-CgM3kQSW.js → radio-button-common-DWGEcWfZ.js} +3 -3
- package/development/radio-button.js +1 -1
- package/development/select/select.component.d.ts +1 -1
- package/development/select/select.component.d.ts.map +1 -1
- package/development/select/select.component.js +8 -5
- package/development/sidebar/common.js +1 -1
- package/development/sidebar.js +1 -1
- package/development/stepper/step-label/step-label.component.js +1 -1
- package/development/tabs/tab-label/tab-label.component.js +1 -1
- package/development/tag/tag/tag.component.js +1 -1
- package/development/teaser/teaser.component.js +1 -1
- package/development/time-input/time-input.component.js +1 -1
- package/development/toggle/toggle-option/toggle-option.component.js +1 -1
- package/development/toggle-check/toggle-check.component.js +2 -2
- package/development/{transparent-button-DdSaBp_-.js → transparent-button-BUTXbd7W.js} +3 -3
- package/development/visual-checkbox/visual-checkbox.component.js +2 -2
- package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +5 -5
- package/flip-card/flip-card/flip-card.component.js +8 -8
- package/form-field/form-field/form-field.component.js +1 -1
- package/header/common/header-action-common.js +1 -1
- package/{icon-sidebar-button-common-XcKoF2SP.js → icon-sidebar-button-common-D_doPv2r.js} +1 -1
- package/link/common/block-link-common.js +1 -1
- package/link/common/inline-link-common.js +1 -1
- package/link/common/link-common.js +1 -1
- package/link/common.js +1 -1
- package/{link-common-nA3q92jp.js → link-common-CfSIg7al.js} +8 -8
- package/link.js +1 -1
- package/menu/common/menu-action-common.js +8 -8
- package/navigation/common/navigation-action-common.js +1 -1
- package/off-brand-theme.css +2 -0
- package/option/option/option.component.js +18 -18
- package/package.json +1 -1
- package/paginator/common/paginator-common.d.ts.map +1 -1
- package/paginator/common/paginator-common.js +30 -46
- package/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
- package/paginator/compact-paginator/compact-paginator.component.js +1 -2
- package/paginator/paginator/paginator.component.d.ts +0 -6
- package/paginator/paginator/paginator.component.d.ts.map +1 -1
- package/paginator/paginator/paginator.component.js +45 -57
- package/popover/popover/popover.component.d.ts.map +1 -1
- package/popover/popover/popover.component.js +72 -74
- package/radio-button/common.js +1 -1
- package/radio-button-common-BHR2tjCF.js +5 -0
- package/radio-button.js +1 -1
- package/safety-theme.css +2 -0
- package/select/select.component.d.ts +1 -1
- package/select/select.component.d.ts.map +1 -1
- package/select/select.component.js +25 -23
- package/sidebar/common.js +1 -1
- package/sidebar.js +1 -1
- package/standard-theme.css +2 -0
- package/stepper/step-label/step-label.component.js +4 -4
- package/tabs/tab-label/tab-label.component.js +1 -1
- package/tag/tag/tag.component.js +1 -1
- package/teaser/teaser.component.js +1 -1
- package/time-input/time-input.component.js +1 -1
- package/toggle/toggle-option/toggle-option.component.js +9 -9
- package/toggle-check/toggle-check.component.js +1 -1
- package/transparent-button-CBNZHS9a.js +9 -0
- package/visual-checkbox/visual-checkbox.component.js +18 -18
- package/checkbox-common-gjHkSAmN.js +0 -5
- package/radio-button-common-Bw2t3Sxz.js +0 -5
- package/transparent-button-DJIkG5hj.js +0 -9
|
@@ -13,7 +13,7 @@ import { isLean as ye } from "../../core/dom.js";
|
|
|
13
13
|
import { i18nOptional as xe } from "../../core/i18n.js";
|
|
14
14
|
import { SbbNegativeMixin as we, SbbElementInternalsMixin as Ee, SbbHydrationMixin as ke, removeAriaElements as ze, appendAriaElements as Ie } from "../../core/mixins.js";
|
|
15
15
|
import "../../icon.js";
|
|
16
|
-
const Se = pe`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;color:var(--sbb-color-3);--sbb-form-field-background-color: var(--sbb-background-color-1);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-3);--sbb-form-field-arrow-color: var(--sbb-color-3);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) )}@media(min-width:52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media(forced-colors:active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error])))){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media(forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;inset:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media(forced-colors:active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
|
|
16
|
+
const Se = pe`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;color:var(--sbb-color-3);--sbb-form-field-background-color: var(--sbb-background-color-1);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-3);--sbb-form-field-arrow-color: var(--sbb-color-3);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) )}@media(min-width:52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media(forced-colors:active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error])))){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media(forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;inset:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media(forced-colors:active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
|
|
17
17
|
let ne = 0;
|
|
18
18
|
const z = /* @__PURE__ */ new WeakMap(), be = ["input", "textarea", "select"];
|
|
19
19
|
class Ve extends Event {
|
|
@@ -9,7 +9,7 @@ import { html as z } from "lit/static-html.js";
|
|
|
9
9
|
import { slotState as k } from "../../core/decorators/slot-state.js";
|
|
10
10
|
import { SbbIconNameMixin as S } from "../../icon.js";
|
|
11
11
|
import { css as F } from "lit";
|
|
12
|
-
const H = F`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-1);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);--sbb-header-action-active-border-width: var(--sbb-border-width-2x);--sbb-header-action-active-border-color: var(--sbb-header-action-color);--sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);--sbb-header-action-active-border-scale: 0;--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-icon-shift: .125rem;--sbb-header-first-item-margin-inline-start: calc( var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) )}@media(forced-colors:active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText;--sbb-header-action-active-border-width: 0}}@media(any-hover:hover){:host(:hover:not(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-background-color-3);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media(any-hover:hover)and (forced-colors:active){:host(:hover:not(:active,[data-active])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-background-color-4)}@media(forced-colors:active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale: 1}@media(forced-colors:active){:host(.sbb-active){--sbb-header-action-border-color: Highlight}}@media(forced-colors:active){:host([data-button]){--sbb-header-action-color: ButtonText}}:host(:not([data-slot-names~=icon],[icon-name])){--sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift)}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media(forced-colors:active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-action-base:after{content:"";position:absolute;border-bottom:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-header-action__icon{display:none}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}:host(:not([data-slot-names~=unnamed])) .sbb-header-action__text{display:none}@media(max-width:-.0625rem){:host([expand-from=zero]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=zero]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:22.4375rem){:host([expand-from=micro]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=micro]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:37.4375rem){:host([expand-from=small]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=small]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:52.4375rem){:host([expand-from=medium]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=medium]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:63.9375rem){:host([expand-from=large]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=large]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:79.9375rem){:host([expand-from=wide]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=wide]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:89.9375rem){:host([expand-from=ultra]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra--max-content]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}`, O = (e) => (() => {
|
|
12
|
+
const H = F`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-1);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);--sbb-header-action-active-border-width: var(--sbb-border-width-2x);--sbb-header-action-active-border-color: var(--sbb-header-action-color);--sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);--sbb-header-action-active-border-scale: 0;--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-icon-shift: .125rem;--sbb-header-first-item-margin-inline-start: calc( var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) )}@media(forced-colors:active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText;--sbb-header-action-active-border-width: 0}}@media(any-hover:hover){:host(:hover:not(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-background-color-3);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media(any-hover:hover)and (forced-colors:active){:host(:hover:not(:active,[data-active])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-background-color-4)}@media(forced-colors:active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale: 1}@media(forced-colors:active){:host(.sbb-active){--sbb-header-action-border-color: Highlight}}@media(forced-colors:active){:host([data-button]){--sbb-header-action-color: ButtonText}}:host(:not([data-slot-names~=icon],[icon-name])){--sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift)}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));cursor:var(--sbb-cursor-pointer);-webkit-user-select:none;user-select:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media(forced-colors:active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-action-base:after{content:"";position:absolute;border-bottom:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-header-action__icon{display:none}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}:host(:not([data-slot-names~=unnamed])) .sbb-header-action__text{display:none}@media(max-width:-.0625rem){:host([expand-from=zero]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=zero]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:22.4375rem){:host([expand-from=micro]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=micro]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:37.4375rem){:host([expand-from=small]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=small]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:52.4375rem){:host([expand-from=medium]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=medium]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:63.9375rem){:host([expand-from=large]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=large]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:79.9375rem){:host([expand-from=wide]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=wide]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:89.9375rem){:host([expand-from=ultra]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]:is([data-slot-names~=icon],[icon-name])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra--max-content]:is([data-slot-names~=icon],[icon-name])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}`, O = (e) => (() => {
|
|
13
13
|
var s, t;
|
|
14
14
|
let i = [k()], r, c = [], n, h = S(e), l, m = [], p = [];
|
|
15
15
|
return t = class extends h {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css as o } from "lit";
|
|
2
|
-
const b = o`*,:before,:after{box-sizing:border-box}:host{position:absolute;inset:0}`, i = o`*,:before,:after{box-sizing:border-box}:host{position:relative;display:block;height:100%;overflow:auto;outline-color:var(--sbb-focus-outline-color)}`, r = o`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-icon-sidebar-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);--sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);--sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);--sbb-icon-sidebar-button-color: var(--sbb-color-granite);--sbb-icon-sidebar-button-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-icon-sidebar-button-current-color: var(--sbb-color-3);--sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);--sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);--sbb-icon-sidebar-button__current-border-inset-inline-start: 0;--sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color)}@media(forced-colors:active){:host{--sbb-icon-sidebar-button-current-color: Highlight !important}}@media(forced-colors:active){:host([data-button]){--sbb-icon-sidebar-button-color: ButtonText !important}}@media(forced-colors:active){:host([data-link]){--sbb-icon-sidebar-button-color: LinkText !important}}@media(any-hover:hover){:host(:not(:active,[data-active]):hover){--sbb-icon-sidebar-button__hover-shift: .0625rem;--sbb-icon-sidebar-button__cursor: pointer}}.sbb-action-base{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--sbb-icon-sidebar-button-dimension);padding-block:0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));color:var(--sbb-icon-sidebar-button__color);border-radius:var(--sbb-icon-sidebar-button-border-radius);cursor:var(--sbb-icon-sidebar-button__cursor);-webkit-user-select:none;user-select:none;transition-duration:var(--sbb-icon-sidebar-button-transition-duration);transition-timing-function:var(--sbb-icon-sidebar-button-transition-easing-function);transition-property:color,padding}:host(.sbb-active) .sbb-action-base{color:var(--sbb-icon-sidebar-button-current-color)}:host(.sbb-active) .sbb-action-base:before{content:"";display:block;position:absolute;inset-block:var(--sbb-icon-sidebar-button-current-border-inset-block);inset-inline:var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;border-inline-start:var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor}:host(:focus-visible) .sbb-action-base,.sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:calc(-1 * var(--sbb-focus-outline-width) - .3125rem)}`;
|
|
2
|
+
const b = o`*,:before,:after{box-sizing:border-box}:host{position:absolute;inset:0}`, i = o`*,:before,:after{box-sizing:border-box}:host{position:relative;display:block;height:100%;overflow:auto;outline-color:var(--sbb-focus-outline-color)}`, r = o`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-icon-sidebar-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);--sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);--sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);--sbb-icon-sidebar-button-color: var(--sbb-color-granite);--sbb-icon-sidebar-button-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-icon-sidebar-button-current-color: var(--sbb-color-3);--sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);--sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);--sbb-icon-sidebar-button__current-border-inset-inline-start: 0;--sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color)}@media(forced-colors:active){:host{--sbb-icon-sidebar-button-current-color: Highlight !important}}@media(forced-colors:active){:host([data-button]){--sbb-icon-sidebar-button-color: ButtonText !important}}@media(forced-colors:active){:host([data-link]){--sbb-icon-sidebar-button-color: LinkText !important}}@media(any-hover:hover){:host(:not(:active,[data-active]):hover){--sbb-icon-sidebar-button__hover-shift: .0625rem;--sbb-icon-sidebar-button__cursor: var(--sbb-cursor-pointer)}}.sbb-action-base{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--sbb-icon-sidebar-button-dimension);padding-block:0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));color:var(--sbb-icon-sidebar-button__color);border-radius:var(--sbb-icon-sidebar-button-border-radius);cursor:var(--sbb-icon-sidebar-button__cursor);-webkit-user-select:none;user-select:none;transition-duration:var(--sbb-icon-sidebar-button-transition-duration);transition-timing-function:var(--sbb-icon-sidebar-button-transition-easing-function);transition-property:color,padding}:host(.sbb-active) .sbb-action-base{color:var(--sbb-icon-sidebar-button-current-color)}:host(.sbb-active) .sbb-action-base:before{content:"";display:block;position:absolute;inset-block:var(--sbb-icon-sidebar-button-current-border-inset-block);inset-inline:var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;border-inline-start:var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor}:host(:focus-visible) .sbb-action-base,.sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:calc(-1 * var(--sbb-focus-outline-width) - .3125rem)}`;
|
|
3
3
|
export {
|
|
4
4
|
i as a,
|
|
5
5
|
r as i,
|
|
@@ -7,7 +7,7 @@ import { __esDecorate as g, __runInitializers as f } from "tslib";
|
|
|
7
7
|
import { property as d } from "lit/decorators.js";
|
|
8
8
|
import { html as k } from "lit/static-html.js";
|
|
9
9
|
import { SbbIconNameMixin as u } from "../../icon.js";
|
|
10
|
-
import { S as x, s as _ } from "../../link-common-
|
|
10
|
+
import { S as x, s as _ } from "../../link-common-CfSIg7al.js";
|
|
11
11
|
import { css as z } from "lit";
|
|
12
12
|
const P = z`:host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));--sbb-link-gap: var(--sbb-spacing-fixed-1x);display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}.sbb-action-base{gap:var(--sbb-link-gap)}:host([size=xs]) .sbb-action-base{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-action-base{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=m]) .sbb-action-base{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-body-text) * 1em);width:var(--sbb-size-icon-ui-small);flex:0 0 auto;align-self:start}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;transform:translateY(-50%)}`, O = (t) => (() => {
|
|
13
13
|
var r, i;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { S as t, s as e } from "../../link-common-
|
|
1
|
+
import { S as t, s as e } from "../../link-common-CfSIg7al.js";
|
|
2
2
|
import { css as l } from "lit";
|
|
3
3
|
const n = l`:host{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: inherit;color:inherit;display:inline-block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-hover: var(--sbb-color-graphite);--sbb-link-color-active: var(--sbb-color-metal)}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit}`, b = (o) => {
|
|
4
4
|
const r = class r extends t(o) {
|
|
@@ -4,7 +4,7 @@ import "lit/static-html.js";
|
|
|
4
4
|
import "../../core/decorators.js";
|
|
5
5
|
import "../../core/dom.js";
|
|
6
6
|
import "../../core/mixins.js";
|
|
7
|
-
import { S as b } from "../../link-common-
|
|
7
|
+
import { S as b } from "../../link-common-CfSIg7al.js";
|
|
8
8
|
export {
|
|
9
9
|
b as SbbLinkCommonElementMixin
|
|
10
10
|
};
|
package/link/common.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SbbBlockLinkCommonElementMixin as m } from "./common/block-link-common.js";
|
|
2
2
|
import { SbbInlineLinkCommonElementMixin as i } from "./common/inline-link-common.js";
|
|
3
|
-
import { S as r } from "../link-common-
|
|
3
|
+
import { S as r } from "../link-common-CfSIg7al.js";
|
|
4
4
|
export {
|
|
5
5
|
m as SbbBlockLinkCommonElementMixin,
|
|
6
6
|
i as SbbInlineLinkCommonElementMixin,
|
|
@@ -10,10 +10,10 @@ import { hostAttributes as g, slotState as T } from "./core/decorators.js";
|
|
|
10
10
|
import { isLean as w } from "./core/dom.js";
|
|
11
11
|
import { SbbNegativeMixin as E } from "./core/mixins.js";
|
|
12
12
|
import { css as L } from "lit";
|
|
13
|
-
const B = L`*,:before,:after{box-sizing:border-box}:host{outline:none!important}@media(forced-colors:active){:host([data-button]){--sbb-link-color-normal: ButtonText;--sbb-link-color-hover: ButtonText;--sbb-link-color-active: ButtonText}}.sbb-action-base{color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media(forced-colors:active){.sbb-action-base{text-decoration:underline}}.sbb-action-base{display:flex;align-items:center;width:100%;cursor:pointer;padding:var(--sbb-link-padding, 0);outline:none}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-action-base{pointer-events:none;cursor:default}@media(forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:GrayText}}:host(:focus-visible) .sbb-action-base,.sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}@media(any-hover:hover){:host(:hover:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:var(--sbb-link-color-hover);text-decoration-line:var(--sbb-link-hover-text-decoration, underline)}}:host(:is(:active,[data-active]):not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:var(--sbb-link-color-active)}`, P = (e) => (() => {
|
|
14
|
-
var n,
|
|
15
|
-
let s = [g({ "data-sbb-link": "" }), T()], r, c = [],
|
|
16
|
-
return
|
|
13
|
+
const B = L`*,:before,:after{box-sizing:border-box}:host{outline:none!important}@media(forced-colors:active){:host([data-button]){--sbb-link-color-normal: ButtonText;--sbb-link-color-hover: ButtonText;--sbb-link-color-active: ButtonText}}.sbb-action-base{color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media(forced-colors:active){.sbb-action-base{text-decoration:underline}}.sbb-action-base{display:flex;align-items:center;width:100%;cursor:var(--sbb-cursor-pointer);padding:var(--sbb-link-padding, 0);outline:none}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-action-base{pointer-events:none;cursor:var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:GrayText}}:host(:focus-visible) .sbb-action-base,.sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}@media(any-hover:hover){:host(:hover:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:var(--sbb-link-color-hover);text-decoration-line:var(--sbb-link-hover-text-decoration, underline)}}:host(:is(:active,[data-active]):not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{color:var(--sbb-link-color-active)}`, P = (e) => (() => {
|
|
14
|
+
var n, o;
|
|
15
|
+
let s = [g({ "data-sbb-link": "" }), T()], r, c = [], i, d = E(e), u, m = [], v = [];
|
|
16
|
+
return o = class extends d {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
19
|
x(this, n, b(this, m, w() ? "xs" : "s"));
|
|
@@ -33,12 +33,12 @@ const B = L`*,:before,:after{box-sizing:border-box}:host{outline:none!important}
|
|
|
33
33
|
renderTemplate() {
|
|
34
34
|
return S`<slot></slot>`;
|
|
35
35
|
}
|
|
36
|
-
}, n = new WeakMap(),
|
|
36
|
+
}, n = new WeakMap(), i = o, (() => {
|
|
37
37
|
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
|
|
38
|
-
u = [y({ reflect: !0 })], k(
|
|
38
|
+
u = [y({ reflect: !0 })], k(o, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (l) => "size" in l, get: (l) => l.size, set: (l, z) => {
|
|
39
39
|
l.size = z;
|
|
40
|
-
} }, metadata: a }, m, v), k(null, r = { value:
|
|
41
|
-
})(),
|
|
40
|
+
} }, metadata: a }, m, v), k(null, r = { value: i }, s, { kind: "class", name: i.name, metadata: a }, null, c), i = r.value, a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
|
|
41
|
+
})(), o.styles = B, b(i, c), i;
|
|
42
42
|
})();
|
|
43
43
|
export {
|
|
44
44
|
P as S,
|
package/link.js
CHANGED
|
@@ -6,7 +6,7 @@ import { SbbLinkButtonElement as x } from "./link/link-button/link-button.compon
|
|
|
6
6
|
import { SbbLinkStaticElement as f } from "./link/link-static/link-static.component.js";
|
|
7
7
|
import { SbbBlockLinkCommonElementMixin as E } from "./link/common/block-link-common.js";
|
|
8
8
|
import { SbbInlineLinkCommonElementMixin as c } from "./link/common/inline-link-common.js";
|
|
9
|
-
import { S as a } from "./link-common-
|
|
9
|
+
import { S as a } from "./link-common-CfSIg7al.js";
|
|
10
10
|
export {
|
|
11
11
|
m as SbbBlockLinkButtonElement,
|
|
12
12
|
E as SbbBlockLinkCommonElementMixin,
|
|
@@ -3,11 +3,11 @@ import { css as l } from "lit";
|
|
|
3
3
|
import { html as u } from "lit/static-html.js";
|
|
4
4
|
import { slotState as d } from "../../core/decorators.js";
|
|
5
5
|
import { SbbDisabledMixin as m } from "../../core/mixins.js";
|
|
6
|
-
import { SbbIconNameMixin as
|
|
7
|
-
const
|
|
8
|
-
var
|
|
9
|
-
let b = [d()], t, a = [],
|
|
10
|
-
return
|
|
6
|
+
import { SbbIconNameMixin as v } from "../../icon.js";
|
|
7
|
+
const p = l`*,:before,:after{box-sizing:border-box}:host{outline:none!important;--sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);--sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);--sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);--sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);--sbb-menu-action-cursor: var(--sbb-cursor-pointer);--sbb-menu-action-color: var(--sbb-color-2-inverted);--sbb-menu-action-forced-color-border-color: CanvasText;--sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);display:block}@media(any-hover:hover){:host(:is(:hover:not([disabled],:disabled,[disabled-interactive]),[aria-expanded=true])){--sbb-menu-background-color: var(--sbb-color-iron);--sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));--sbb-menu-action-forced-color-border-color: Highlight}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-cursor: var(--sbb-cursor-default);--sbb-menu-action-color: var(--sbb-color-graphite);--sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));--sbb-menu-action-forced-color-border-color: GrayText;pointer-events:none;cursor:var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-color: GrayText}}:host([data-sbb-menu-trigger]){--sbb-menu-action-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host([data-button]){--sbb-menu-action-color: ButtonText}}:host([sbb-badge]:not([icon-name],[data-slot-names~=icon])):after{inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important;translate:50% -50%}:host([sbb-badge]:is([icon-name],[data-slot-names~=icon])):after{inset:calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto!important}:host([aria-controls*=sbb-menu]){--sbb-menu-action-submenu-icon-display: flex}:is(.sbb-menu-button,.sbb-menu-link){text-decoration:none;display:block;width:100%;color:var(--sbb-menu-action-color);padding:var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);cursor:var(--sbb-menu-action-cursor);outline:none}.sbb-menu-action__content{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-menu-action-gap);padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);border-radius:var(--sbb-menu-action-border-radius);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--sbb-menu-background-color)}:host(:focus-visible) .sbb-menu-action__content,:focus-visible .sbb-menu-action__content{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media(forced-colors:active){.sbb-menu-action__content{border:var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color)}}.sbb-menu-action__icon,.sbb-menu-submenu__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}.sbb-menu-submenu__icon{display:var(--sbb-menu-action-submenu-icon-display, none);margin-inline-start:auto}.sbb-menu-action__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}`, z = (s) => (() => {
|
|
8
|
+
var e;
|
|
9
|
+
let b = [d()], t, a = [], o, i = v(m(s));
|
|
10
|
+
return e = class extends i {
|
|
11
11
|
renderTemplate() {
|
|
12
12
|
return u`
|
|
13
13
|
<span class="sbb-menu-action__content">
|
|
@@ -21,10 +21,10 @@ const v = l`*,:before,:after{box-sizing:border-box}:host{outline:none!important;
|
|
|
21
21
|
</span>
|
|
22
22
|
`;
|
|
23
23
|
}
|
|
24
|
-
},
|
|
24
|
+
}, o = e, (() => {
|
|
25
25
|
const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
|
|
26
|
-
r(null, t = { value:
|
|
27
|
-
})(),
|
|
26
|
+
r(null, t = { value: o }, b, { kind: "class", name: o.name, metadata: n }, null, a), o = t.value, n && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
|
|
27
|
+
})(), e.styles = p, c(o, a), o;
|
|
28
28
|
})();
|
|
29
29
|
export {
|
|
30
30
|
z as SbbMenuActionCommonElementMixin
|
|
@@ -9,7 +9,7 @@ import { html as y } from "lit/static-html.js";
|
|
|
9
9
|
import { isLean as z } from "../../core/dom.js";
|
|
10
10
|
import { css as x } from "lit";
|
|
11
11
|
import "../../icon.js";
|
|
12
|
-
const k = x`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-action-color: var(--sbb-color-4-negative);--sbb-navigation-action-icon-display: none;display:block;outline:none!important}:host([data-section-action][data-action-active].sbb-active){--sbb-navigation-action-icon-display: block}:host([data-action-active]){--sbb-navigation-action-color: var(--sbb-color-5)}@media(forced-colors:active){:host([data-action-active]){--sbb-navigation-action-color: Highlight}}sbb-icon{display:var(--sbb-navigation-action-icon-display);position:absolute;inset-inline-start:calc((var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2);translate:0 -50%}@media(any-hover:hover){:host(:hover){--sbb-navigation-action-color: var(--sbb-color-5)}}@media(forced-colors:active){:host([data-button]){--sbb-navigation-action-color: ButtonText}}:is(.sbb-navigation-button,.sbb-navigation-link){--sbb-title-font-size: var(--sbb-title-font-size-level-4);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);cursor:pointer;position:relative;text-decoration:none;display:flex;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease;-webkit-hyphens:auto;hyphens:auto;text-align:left;color:var(--sbb-navigation-action-color);outline:none}@media(forced-colors:active){:is(.sbb-navigation-button,.sbb-navigation-link){transition:none}}:host([size=m]) :is(.sbb-navigation-button,.sbb-navigation-link){--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([size=s]) :is(.sbb-navigation-button,.sbb-navigation-link){--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:focus-visible) :is(.sbb-navigation-button,.sbb-navigation-link),:is(.sbb-navigation-button,.sbb-navigation-link):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`, I = (t) => (() => {
|
|
12
|
+
const k = x`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-action-color: var(--sbb-color-4-negative);--sbb-navigation-action-icon-display: none;display:block;outline:none!important}:host([data-section-action][data-action-active].sbb-active){--sbb-navigation-action-icon-display: block}:host([data-action-active]){--sbb-navigation-action-color: var(--sbb-color-5)}@media(forced-colors:active){:host([data-action-active]){--sbb-navigation-action-color: Highlight}}sbb-icon{display:var(--sbb-navigation-action-icon-display);position:absolute;inset-inline-start:calc((var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2);translate:0 -50%}@media(any-hover:hover){:host(:hover){--sbb-navigation-action-color: var(--sbb-color-5)}}@media(forced-colors:active){:host([data-button]){--sbb-navigation-action-color: ButtonText}}:is(.sbb-navigation-button,.sbb-navigation-link){--sbb-title-font-size: var(--sbb-title-font-size-level-4);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);cursor:var(--sbb-cursor-pointer);position:relative;text-decoration:none;display:flex;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease;-webkit-hyphens:auto;hyphens:auto;text-align:left;color:var(--sbb-navigation-action-color);outline:none}@media(forced-colors:active){:is(.sbb-navigation-button,.sbb-navigation-link){transition:none}}:host([size=m]) :is(.sbb-navigation-button,.sbb-navigation-link){--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host([size=s]) :is(.sbb-navigation-button,.sbb-navigation-link){--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:focus-visible) :is(.sbb-navigation-button,.sbb-navigation-link),:is(.sbb-navigation-button,.sbb-navigation-link):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`, I = (t) => (() => {
|
|
13
13
|
var n, o;
|
|
14
14
|
let e = t, s, l = [], c = [];
|
|
15
15
|
return o = class extends e {
|
package/off-brand-theme.css
CHANGED
|
@@ -1438,6 +1438,8 @@ summary {
|
|
|
1438
1438
|
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1439
1439
|
--sbb-time-input-max-width: 3.625rem;
|
|
1440
1440
|
--sbb-overlay-default-z-index: 1000;
|
|
1441
|
+
--sbb-cursor-default: default;
|
|
1442
|
+
--sbb-cursor-pointer: pointer;
|
|
1441
1443
|
--sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
|
|
1442
1444
|
--sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
|
|
1443
1445
|
--sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
|
|
@@ -3,42 +3,42 @@ import { css as d, nothing as e, html as s } from "lit";
|
|
|
3
3
|
import { customElement as p } from "lit/decorators.js";
|
|
4
4
|
import { SbbOptionBaseElement as u } from "./option-base-element.js";
|
|
5
5
|
import "../../visual-checkbox.js";
|
|
6
|
-
const h = d`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-background-color-3);--sbb-option-background-color-active: var(--sbb-background-color-4);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-option-disabled-background-color: var(--sbb-background-color-3);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5);--sbb-option-background-color-hover: var(--sbb-background-color-3-negative);--sbb-option-background-color-active: var(--sbb-background-color-4-negative);--sbb-option-disabled-border-color: var(--sbb-border-color-5);--sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media(forced-colors:active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__container{background-color:var(--sbb-option-background-color)}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`;
|
|
6
|
+
const h = d`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-background-color-3);--sbb-option-background-color-active: var(--sbb-background-color-4);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-option-disabled-background-color: var(--sbb-background-color-3);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: var(--sbb-cursor-pointer);--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5);--sbb-option-background-color-hover: var(--sbb-background-color-3-negative);--sbb-option-background-color-active: var(--sbb-background-color-4-negative);--sbb-option-disabled-border-color: var(--sbb-border-color-5);--sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__container{background-color:var(--sbb-option-background-color)}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`;
|
|
7
7
|
let k = (() => {
|
|
8
|
-
var
|
|
8
|
+
var t;
|
|
9
9
|
let n = [p("sbb-option")], a, b = [], i, r = u;
|
|
10
|
-
return
|
|
10
|
+
return t = class extends r {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments), this.optionId = "sbb-option";
|
|
13
13
|
}
|
|
14
|
-
set _variant(
|
|
15
|
-
|
|
14
|
+
set _variant(o) {
|
|
15
|
+
o && this.setAttribute("data-variant", o);
|
|
16
16
|
}
|
|
17
17
|
get _variant() {
|
|
18
18
|
return this.getAttribute("data-variant");
|
|
19
19
|
}
|
|
20
|
-
set _isMultiple(
|
|
21
|
-
this.toggleAttribute("data-multiple",
|
|
20
|
+
set _isMultiple(o) {
|
|
21
|
+
this.toggleAttribute("data-multiple", o);
|
|
22
22
|
}
|
|
23
23
|
get _isMultiple() {
|
|
24
24
|
return !this.hydrationRequired && this.hasAttribute("data-multiple");
|
|
25
25
|
}
|
|
26
26
|
setAttributeFromParent() {
|
|
27
|
-
const
|
|
28
|
-
|
|
27
|
+
const o = this.closest?.("sbb-optgroup");
|
|
28
|
+
o && (this.disabledFromGroup = o.disabled, this.updateAriaDisabled()), this.negative = !!this.closest?.(
|
|
29
29
|
// :is() selector not possible due to test environment
|
|
30
30
|
"sbb-autocomplete[negative],sbb-form-field[negative]"
|
|
31
31
|
), this.toggleAttribute("data-negative", this.negative), this.toggleAttribute("data-multiple", this._isMultiple);
|
|
32
32
|
}
|
|
33
|
-
selectByClick(
|
|
33
|
+
selectByClick(o) {
|
|
34
34
|
if (this.disabled || this.disabledFromGroup) {
|
|
35
|
-
|
|
35
|
+
o.stopPropagation();
|
|
36
36
|
return;
|
|
37
37
|
}
|
|
38
|
-
this._isMultiple ? (
|
|
38
|
+
this._isMultiple ? (o.stopPropagation(), this.selectViaUserInteraction(!this.selected)) : this.selectViaUserInteraction(!0);
|
|
39
39
|
}
|
|
40
|
-
selectViaUserInteraction(
|
|
41
|
-
super.selectViaUserInteraction(
|
|
40
|
+
selectViaUserInteraction(o) {
|
|
41
|
+
super.selectViaUserInteraction(o), this.dispatchEvent(new Event("optionselectionchange", { bubbles: !0, composed: !0 }));
|
|
42
42
|
}
|
|
43
43
|
init() {
|
|
44
44
|
super.init(), this._setVariantByContext(), this.handleHighlightState();
|
|
@@ -74,10 +74,10 @@ let k = (() => {
|
|
|
74
74
|
renderTick() {
|
|
75
75
|
return this._variant === "select" && !this._isMultiple && this.selected ? s`<sbb-icon name="tick-small"></sbb-icon>` : e;
|
|
76
76
|
}
|
|
77
|
-
}, i =
|
|
78
|
-
const
|
|
79
|
-
l(null, a = { value: i }, n, { kind: "class", name: i.name, metadata:
|
|
80
|
-
})(),
|
|
77
|
+
}, i = t, (() => {
|
|
78
|
+
const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
|
|
79
|
+
l(null, a = { value: i }, n, { kind: "class", name: i.name, metadata: o }, null, b), i = a.value, o && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
|
|
80
|
+
})(), t.role = "option", t.styles = h, t.events = {
|
|
81
81
|
optionselectionchange: "optionselectionchange",
|
|
82
82
|
optionselected: "optionselected"
|
|
83
83
|
}, c(i, b), i;
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAItF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AASlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EACL,KAAK,mBAAmB,EAIzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAmC,SAAQ,uCAExE;IACC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAgB,sBAAsB,EAAE,MAAM,CAAC;IAC/C,SAAgB,8BAA8B,EAAE,MAAM,CAAC;IACvD,SAAgB,0BAA0B,EAAE,MAAM,CAAC;IAC5C,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAItF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AASlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EACL,KAAK,mBAAmB,EAIzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAmC,SAAQ,uCAExE;IACC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAgB,sBAAsB,EAAE,MAAM,CAAC;IAC/C,SAAgB,8BAA8B,EAAE,MAAM,CAAC;IACvD,SAAgB,0BAA0B,EAAE,MAAM,CAAC;IAC5C,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAE1C,SAAS,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IACpD,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAC5E,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAoP5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
|