@sbb-esta/lyne-elements-dev 4.7.0-dev.1773208987 → 4.7.0-dev.1773217409
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/core/styles/core.scss +18 -127
- package/core.css +104 -71
- package/custom-elements.json +695 -695
- package/development/form-field/error/error.component.js +6 -12
- package/development/form-field/form-field/form-field.component.js +33 -60
- package/development/lead-container/lead-container.component.d.ts.map +1 -1
- package/development/lead-container/lead-container.component.js +9 -28
- package/form-field/error/error.component.js +2 -2
- package/form-field/form-field/form-field.component.js +18 -18
- package/lead-container/lead-container.component.js +9 -11
- package/off-brand-theme.css +104 -71
- package/package.json +2 -2
- package/safety-theme.css +104 -71
- package/standard-theme.css +104 -71
|
@@ -11,14 +11,14 @@ import { SbbElement as fe } from "../../core/base-elements.js";
|
|
|
11
11
|
import { SbbLanguageController as pe } from "../../core/controllers.js";
|
|
12
12
|
import { forceType as E } from "../../core/decorators.js";
|
|
13
13
|
import { isLean as he } from "../../core/dom.js";
|
|
14
|
-
import { i18nOptional as
|
|
15
|
-
import { SbbNegativeMixin as
|
|
14
|
+
import { i18nOptional as ue } from "../../core/i18n.js";
|
|
15
|
+
import { SbbNegativeMixin as me, removeAriaElements as _e, appendAriaElements as ge } from "../../core/mixins.js";
|
|
16
16
|
import { boxSizingStyles as ve } from "../../core/styles.js";
|
|
17
17
|
import "../../icon.js";
|
|
18
|
-
const ye = be`@charset "UTF-8";:host{display:inline-block;color:var(--sbb-color-3);--sbb-form-field-background-color: var(--sbb-background-color-1);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-3);--sbb-form-field-arrow-color: var(--sbb-color-3);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-text-font-size-m);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) )}@media(min-width:64rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media(forced-colors:active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-s);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:64rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error])))){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media(forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}.sbb-form-field__space-wrapper{display:flex;flex-direction:column;height:100%}.sbb-form-field__space-wrapper:before{content:"";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;flex:1;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;inset:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media(forced-colors:active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{display:flex;flex-direction:column;flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex;flex:1;align-items:start}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
|
|
18
|
+
const ye = be`@charset "UTF-8";:host{--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-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-icon-svg-width: var(--sbb-form-field-icon-size);--sbb-icon-svg-height: var(--sbb-form-field-icon-size);--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) );display:inline-block;color:var(--sbb-form-field-color)}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-s);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);--_sbb-form-field-label-to-input-overlapping: .625rem;--_sbb-form-field-floating-label-transform: .34375rem;--_sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping: .6875rem;--_sbb-form-field-floating-label-transform: .3125rem;--_sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=m]){--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-m);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform: .53125rem;--_sbb-form-field-spacer-margin-block-end: calc( -1 * var(--_sbb-form-field-label-to-input-overlapping) )}@media(min-width:64rem){:host([size=m]){--_sbb-form-field-floating-label-transform: .65625rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error])))){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media(forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size: 0rem;--_sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}.sbb-form-field__space-wrapper{display:flex;flex-direction:column;height:100%}.sbb-form-field__space-wrapper:before{content:"";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;flex:1;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;inset:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media(forced-colors:active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{display:flex;flex-direction:column;flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end)}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex;flex:1;align-items:start}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
|
|
19
19
|
let re = 0;
|
|
20
20
|
const z = /* @__PURE__ */ new WeakMap(), oe = ["input", "textarea", "select"];
|
|
21
|
-
class
|
|
21
|
+
class Be extends Event {
|
|
22
22
|
get control() {
|
|
23
23
|
return this._control;
|
|
24
24
|
}
|
|
@@ -27,15 +27,15 @@ class $e extends Event {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
let De = (() => {
|
|
30
|
-
var p, h,
|
|
31
|
-
let o =
|
|
30
|
+
var p, h, u, m, _, g, v, y, x, w, l;
|
|
31
|
+
let o = me(fe), a, n = [], k = [], S, L = [], N = [], C, U = [], O = [], $, B = [], D = [], M, T = [], V = [], q, j = [], H = [], G, R = [], P = [], W, Y = [], J = [], K, Q = [], X = [], Z, F = [], ee = [];
|
|
32
32
|
return l = class extends o {
|
|
33
33
|
constructor() {
|
|
34
34
|
super();
|
|
35
35
|
d(this, p);
|
|
36
36
|
d(this, h);
|
|
37
|
-
d(this, m);
|
|
38
37
|
d(this, u);
|
|
38
|
+
d(this, m);
|
|
39
39
|
d(this, _);
|
|
40
40
|
d(this, g);
|
|
41
41
|
d(this, v);
|
|
@@ -55,7 +55,7 @@ let De = (() => {
|
|
|
55
55
|
"tel",
|
|
56
56
|
"text",
|
|
57
57
|
"url"
|
|
58
|
-
], i(this, p, r(this, n, "none")), i(this, h, (r(this, k), r(this, L, !1))), i(this,
|
|
58
|
+
], i(this, p, r(this, n, "none")), i(this, h, (r(this, k), r(this, L, !1))), i(this, u, (r(this, N), r(this, U, he() ? "s" : "m"))), i(this, m, (r(this, O), r(this, B, !1))), i(this, _, (r(this, D), r(this, T, "default"))), i(this, g, (r(this, V), r(this, j, !1))), i(this, v, (r(this, H), r(this, R, !1))), i(this, y, (r(this, P), r(this, Y, []))), i(this, x, (r(this, J), r(this, Q, null))), i(this, w, (r(this, X), r(this, F, void 0))), this._language = (r(this, ee), new pe(this)), this._formFieldAttributeObserver = de ? null : new MutationObserver((e) => {
|
|
59
59
|
e.some((t) => t.type === "attributes") && this._input && (this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty());
|
|
60
60
|
}), this._inputFormAbortController = new AbortController(), this._control = null, this.addEventListener?.("focusin", (e) => {
|
|
61
61
|
(e.target === this.inputElement || e.target === this.inputElement?.inputElement) && (this.internals.states.add("focus"), this.internals.states.add(`focus-origin-${ce.mostRecentModality}`));
|
|
@@ -92,17 +92,17 @@ let De = (() => {
|
|
|
92
92
|
* @default 'm' / 's' (lean)
|
|
93
93
|
*/
|
|
94
94
|
get size() {
|
|
95
|
-
return b(this,
|
|
95
|
+
return b(this, u);
|
|
96
96
|
}
|
|
97
97
|
set size(e) {
|
|
98
|
-
i(this,
|
|
98
|
+
i(this, u, e);
|
|
99
99
|
}
|
|
100
100
|
/** Whether to display the form field without a border. */
|
|
101
101
|
get borderless() {
|
|
102
|
-
return b(this,
|
|
102
|
+
return b(this, m);
|
|
103
103
|
}
|
|
104
104
|
set borderless(e) {
|
|
105
|
-
i(this,
|
|
105
|
+
i(this, m, e);
|
|
106
106
|
}
|
|
107
107
|
/** Defines the width of the component:
|
|
108
108
|
* - `default`: the component has defined width and min-width;
|
|
@@ -293,7 +293,7 @@ let De = (() => {
|
|
|
293
293
|
<span class="sbb-form-field__label">
|
|
294
294
|
<span class="sbb-form-field__label-ellipsis">
|
|
295
295
|
<slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
|
|
296
|
-
${this.optional ? I` <span aria-hidden="true"> ${
|
|
296
|
+
${this.optional ? I` <span aria-hidden="true"> ${ue[this._language.current]} </span>` : ie}
|
|
297
297
|
</span>
|
|
298
298
|
</span>
|
|
299
299
|
<div class="sbb-form-field__input">
|
|
@@ -313,17 +313,17 @@ let De = (() => {
|
|
|
313
313
|
</div>
|
|
314
314
|
`;
|
|
315
315
|
}
|
|
316
|
-
}, p = new WeakMap(), h = new WeakMap(),
|
|
316
|
+
}, p = new WeakMap(), h = new WeakMap(), u = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), x = new WeakMap(), w = new WeakMap(), (() => {
|
|
317
317
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
|
|
318
|
-
a = [f({ attribute: "error-space", reflect: !0 })], S = [E(), f({ type: Boolean })], C = [f({ reflect: !0 })],
|
|
318
|
+
a = [f({ attribute: "error-space", reflect: !0 })], S = [E(), f({ type: Boolean })], C = [f({ reflect: !0 })], $ = [E(), f({ reflect: !0, type: Boolean })], M = [f({ reflect: !0 })], q = [E(), f({ attribute: "hidden-label", reflect: !0, type: Boolean })], G = [E(), f({ attribute: "floating-label", reflect: !0, type: Boolean })], W = [A()], K = [A()], Z = [A()], c(l, null, a, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (t) => "errorSpace" in t, get: (t) => t.errorSpace, set: (t, s) => {
|
|
319
319
|
t.errorSpace = s;
|
|
320
320
|
} }, metadata: e }, n, k), c(l, null, S, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (t) => "optional" in t, get: (t) => t.optional, set: (t, s) => {
|
|
321
321
|
t.optional = s;
|
|
322
322
|
} }, metadata: e }, L, N), c(l, null, C, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
|
|
323
323
|
t.size = s;
|
|
324
|
-
} }, metadata: e }, U,
|
|
324
|
+
} }, metadata: e }, U, O), c(l, null, $, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, s) => {
|
|
325
325
|
t.borderless = s;
|
|
326
|
-
} }, metadata: e },
|
|
326
|
+
} }, metadata: e }, B, D), c(l, null, M, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, s) => {
|
|
327
327
|
t.width = s;
|
|
328
328
|
} }, metadata: e }, T, V), c(l, null, q, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (t) => "hiddenLabel" in t, get: (t) => t.hiddenLabel, set: (t, s) => {
|
|
329
329
|
t.hiddenLabel = s;
|
|
@@ -339,6 +339,6 @@ let De = (() => {
|
|
|
339
339
|
})(), l.elementName = "sbb-form-field", l.styles = [ve, ye], l;
|
|
340
340
|
})();
|
|
341
341
|
export {
|
|
342
|
-
|
|
342
|
+
Be as SbbFormFieldControlEvent,
|
|
343
343
|
De as SbbFormFieldElement
|
|
344
344
|
};
|
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
import { css as n, html as i } from "lit";
|
|
2
2
|
import { SbbElement as r } from "../core/base-elements.js";
|
|
3
3
|
import { boxSizingStyles as s } from "../core/styles.js";
|
|
4
|
-
const
|
|
4
|
+
const o = n`:host{display:block;padding-block:var(--sbb-lead-container-padding-block)}:host(:not(:is(:state(slotted-image),[state--slotted-image]))){--sbb-lead-container-image-overlap: 0}::slotted([slot=image]){display:block;width:100%}::slotted(:is(sbb-breadcrumb-group,sbb-block-link).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-alert,sbb-alert-group).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-m)}::slotted(sbb-title.sbb-lead-container-spacing){margin-block-start:0}::slotted(sbb-notification.sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-xxxs)}::slotted(.sbb-lead-container-lead-text){margin-block:0 var(--sbb-spacing-responsive-s);color:var(--sbb-color-iron);color:light-dark(var(--sbb-color-iron),var(--sbb-color-smoke))}@media(min-width:90rem){.sbb-lead-container-image{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive));margin-inline:auto}}.sbb-lead-container-content-wrapper{background-color:var(--sbb-lead-container-background-color);display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){.sbb-lead-container-content-wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}@media(min-width:64rem){.sbb-lead-container-content-wrapper{background-color:transparent}}.sbb-lead-container-content{position:relative;border-radius:var(--sbb-lead-container-border-radius);padding-block:var(--sbb-lead-container-content-padding-block);background-color:var(--sbb-lead-container-background-color);grid-column:1/-1}@media(min-width:64rem){.sbb-lead-container-content{grid-column:2/-2;margin-block-start:calc(-1 * var(--sbb-lead-container-image-overlap));padding-inline:var(--sbb-lead-container-padding-inline);margin-inline:calc(-1 * var(--sbb-lead-container-padding-inline))}}@media(min-width:90rem){.sbb-lead-container-content{grid-column:4/-4}}`, a = class a extends r {
|
|
5
5
|
render() {
|
|
6
6
|
return i`
|
|
7
|
-
<div class="sbb-lead-container">
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<div class="sbb-lead-container-content
|
|
13
|
-
<
|
|
14
|
-
<slot></slot>
|
|
15
|
-
</div>
|
|
7
|
+
<div class="sbb-lead-container-image">
|
|
8
|
+
<slot name="image"></slot>
|
|
9
|
+
</div>
|
|
10
|
+
<!-- Content wrapper needed because grid needs to be applied but container image should not be touched by grid. -->
|
|
11
|
+
<div class="sbb-lead-container-content-wrapper">
|
|
12
|
+
<div class="sbb-lead-container-content">
|
|
13
|
+
<slot></slot>
|
|
16
14
|
</div>
|
|
17
15
|
</div>
|
|
18
16
|
`;
|
|
19
17
|
}
|
|
20
18
|
};
|
|
21
|
-
a.elementName = "sbb-lead-container", a.styles = [s,
|
|
19
|
+
a.elementName = "sbb-lead-container", a.styles = [s, o];
|
|
22
20
|
let e = a;
|
|
23
21
|
export {
|
|
24
22
|
e as SbbLeadContainerElement
|
package/off-brand-theme.css
CHANGED
|
@@ -1540,6 +1540,9 @@ summary {
|
|
|
1540
1540
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1541
1541
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1542
1542
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
1543
|
+
--sbb-error-color: var(--sbb-color-error);
|
|
1544
|
+
--sbb-error-icon-size: 1.0625rem;
|
|
1545
|
+
--sbb-error-font-size: var(--sbb-text-font-size-xs);
|
|
1543
1546
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
1544
1547
|
--sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
|
|
1545
1548
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
@@ -1580,8 +1583,37 @@ summary {
|
|
|
1580
1583
|
--sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
|
|
1581
1584
|
--sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
|
|
1582
1585
|
--sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
|
|
1586
|
+
--sbb-form-field-background-color: var(--sbb-background-color-1);
|
|
1587
|
+
--sbb-form-field-border-color: var(--sbb-border-color-5);
|
|
1588
|
+
--sbb-form-field-border-style: solid;
|
|
1589
|
+
--sbb-form-field-border-radius: var(--sbb-border-radius-4x);
|
|
1590
|
+
--sbb-form-field-border-width: var(--sbb-border-width-1x);
|
|
1591
|
+
--sbb-form-field-color: var(--sbb-color-3);
|
|
1592
|
+
--sbb-form-field-label-color: var(--sbb-color-metal);
|
|
1593
|
+
--sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1594
|
+
--sbb-form-field-prefix-color: var(--sbb-color-metal);
|
|
1595
|
+
--sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1596
|
+
--sbb-form-field-text-color: var(--sbb-color-3);
|
|
1597
|
+
--sbb-form-field-arrow-color: var(--sbb-color-3);
|
|
1598
|
+
--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
|
|
1599
|
+
--sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
|
|
1600
|
+
--sbb-form-field-min-height: var(--sbb-size-element-m);
|
|
1601
|
+
--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
|
|
1602
|
+
--sbb-form-field-input-text-size: var(--sbb-text-font-size-m);
|
|
1603
|
+
--sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);
|
|
1604
|
+
--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
|
|
1605
|
+
--_sbb-form-field-floating-label-transform: 0.53125rem;
|
|
1606
|
+
--_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
|
|
1583
1607
|
--sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
|
|
1584
1608
|
--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
|
|
1609
|
+
--sbb-lead-container-background-color: var(--sbb-background-color-1);
|
|
1610
|
+
--sbb-lead-container-image-ratio: 2 / 1;
|
|
1611
|
+
--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
|
|
1612
|
+
--sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
|
|
1613
|
+
--sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
|
|
1614
|
+
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
1615
|
+
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
1616
|
+
--sbb-lead-container-image-border-radius: 0;
|
|
1585
1617
|
--sbb-option-color: var(--sbb-color-3);
|
|
1586
1618
|
--sbb-option-background-color: inherit;
|
|
1587
1619
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -1703,6 +1735,7 @@ summary {
|
|
|
1703
1735
|
--sbb-card-badge-border-display: block;
|
|
1704
1736
|
--sbb-card-badge-inline-border-display: none;
|
|
1705
1737
|
--sbb-expansion-panel-header-text-color: ButtonText;
|
|
1738
|
+
--sbb-form-field-border-color: ButtonBorder;
|
|
1706
1739
|
--sbb-visual-checkbox-selection-color: Canvas;
|
|
1707
1740
|
--sbb-visual-checkbox-selection-color-negative: Canvas;
|
|
1708
1741
|
--sbb-visual-checkbox-selection-color-disabled: Canvas;
|
|
@@ -1812,6 +1845,9 @@ summary {
|
|
|
1812
1845
|
--sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
|
|
1813
1846
|
--sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
|
|
1814
1847
|
--sbb-flip-card-min-height: 20rem;
|
|
1848
|
+
--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
|
|
1849
|
+
--_sbb-form-field-floating-label-transform: 0.65625rem;
|
|
1850
|
+
--_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
|
|
1815
1851
|
}
|
|
1816
1852
|
:root.sbb-lean {
|
|
1817
1853
|
--sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
|
|
@@ -1837,6 +1873,8 @@ summary {
|
|
|
1837
1873
|
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
|
|
1838
1874
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
|
|
1839
1875
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
|
|
1876
|
+
--sbb-lead-container-image-ratio: 21 / 9;
|
|
1877
|
+
--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
|
|
1840
1878
|
}
|
|
1841
1879
|
}
|
|
1842
1880
|
|
|
@@ -1904,70 +1942,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
|
|
|
1904
1942
|
height: 100%;
|
|
1905
1943
|
}
|
|
1906
1944
|
|
|
1907
|
-
sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
|
|
1908
|
-
--sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
|
|
1909
|
-
}
|
|
1910
|
-
|
|
1911
|
-
sbb-icon-sidebar-content + sbb-icon-sidebar {
|
|
1912
|
-
border-start-end-radius: 0;
|
|
1913
|
-
border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
|
|
1914
|
-
}
|
|
1915
|
-
|
|
1916
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
1917
|
-
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
1918
|
-
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
1919
|
-
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
1920
|
-
}
|
|
1921
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
1922
|
-
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
1923
|
-
}
|
|
1924
|
-
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
1925
|
-
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
1926
|
-
}
|
|
1927
|
-
|
|
1928
|
-
sbb-tab-nav-bar .sbb-tab-amount {
|
|
1929
|
-
margin: 0;
|
|
1930
|
-
color: var(--sbb-tab-label-amount-color);
|
|
1931
|
-
font-weight: normal;
|
|
1932
|
-
text-decoration: var(--sbb-tab-label-text-decoration);
|
|
1933
|
-
}
|
|
1934
|
-
|
|
1935
|
-
.sbb-dark {
|
|
1936
|
-
color-scheme: dark;
|
|
1937
|
-
}
|
|
1938
|
-
|
|
1939
|
-
.sbb-light {
|
|
1940
|
-
color-scheme: light;
|
|
1941
|
-
}
|
|
1942
|
-
|
|
1943
|
-
.sbb-light-dark {
|
|
1944
|
-
color-scheme: light dark;
|
|
1945
|
-
}
|
|
1946
|
-
|
|
1947
|
-
html {
|
|
1948
|
-
font-family: var(--sbb-typo-font-family);
|
|
1949
|
-
font-weight: normal;
|
|
1950
|
-
line-height: var(--sbb-typo-line-height-text);
|
|
1951
|
-
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
1952
|
-
font-size: var(--sbb-text-font-size);
|
|
1953
|
-
color-scheme: light dark;
|
|
1954
|
-
color: var(--sbb-font-color-default);
|
|
1955
|
-
background-color: var(--sbb-background-color-1);
|
|
1956
|
-
}
|
|
1957
|
-
|
|
1958
|
-
::placeholder {
|
|
1959
|
-
color: var(--sbb-color-5);
|
|
1960
|
-
-webkit-text-fill-color: var(--sbb-color-5);
|
|
1961
|
-
opacity: 1;
|
|
1962
|
-
}
|
|
1963
|
-
|
|
1964
1945
|
:is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
|
|
1965
|
-
--sbb-text-font-size: var(--sbb-text-font-size-m);
|
|
1966
|
-
font-family: var(--sbb-typo-font-family);
|
|
1967
|
-
font-weight: normal;
|
|
1968
|
-
line-height: var(--sbb-typo-line-height-text);
|
|
1969
|
-
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
1970
|
-
font-size: var(--sbb-text-font-size);
|
|
1971
1946
|
overflow: hidden;
|
|
1972
1947
|
white-space: nowrap;
|
|
1973
1948
|
text-overflow: ellipsis;
|
|
@@ -1977,7 +1952,7 @@ html {
|
|
|
1977
1952
|
padding: 0;
|
|
1978
1953
|
appearance: none;
|
|
1979
1954
|
outline: none !important;
|
|
1980
|
-
overflow: var(--sbb-form-field-overflow);
|
|
1955
|
+
overflow: var(--sbb-form-field-overflow, hidden);
|
|
1981
1956
|
width: 100%;
|
|
1982
1957
|
box-sizing: border-box;
|
|
1983
1958
|
color: var(--sbb-form-field-text-color);
|
|
@@ -1985,6 +1960,7 @@ html {
|
|
|
1985
1960
|
opacity: 1;
|
|
1986
1961
|
background-color: transparent;
|
|
1987
1962
|
font-size: var(--sbb-form-field-input-text-size) !important;
|
|
1963
|
+
letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
|
|
1988
1964
|
font-family: var(--sbb-typo-font-family) !important;
|
|
1989
1965
|
line-height: var(--sbb-typo-line-height-text) !important;
|
|
1990
1966
|
}
|
|
@@ -2135,6 +2111,70 @@ html {
|
|
|
2135
2111
|
}
|
|
2136
2112
|
}
|
|
2137
2113
|
|
|
2114
|
+
sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
|
|
2115
|
+
--sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
|
|
2116
|
+
}
|
|
2117
|
+
|
|
2118
|
+
sbb-icon-sidebar-content + sbb-icon-sidebar {
|
|
2119
|
+
border-start-end-radius: 0;
|
|
2120
|
+
border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
|
|
2121
|
+
}
|
|
2122
|
+
|
|
2123
|
+
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
2124
|
+
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
2125
|
+
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
2126
|
+
--sbb-image-object-fit: cover;
|
|
2127
|
+
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2128
|
+
}
|
|
2129
|
+
|
|
2130
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
2131
|
+
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
2132
|
+
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
2133
|
+
--sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
|
|
2134
|
+
}
|
|
2135
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
|
|
2136
|
+
--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
|
|
2137
|
+
}
|
|
2138
|
+
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
|
|
2139
|
+
--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
sbb-tab-nav-bar .sbb-tab-amount {
|
|
2143
|
+
margin: 0;
|
|
2144
|
+
color: var(--sbb-tab-label-amount-color);
|
|
2145
|
+
font-weight: normal;
|
|
2146
|
+
text-decoration: var(--sbb-tab-label-text-decoration);
|
|
2147
|
+
}
|
|
2148
|
+
|
|
2149
|
+
.sbb-dark {
|
|
2150
|
+
color-scheme: dark;
|
|
2151
|
+
}
|
|
2152
|
+
|
|
2153
|
+
.sbb-light {
|
|
2154
|
+
color-scheme: light;
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
.sbb-light-dark {
|
|
2158
|
+
color-scheme: light dark;
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2161
|
+
html {
|
|
2162
|
+
font-family: var(--sbb-typo-font-family);
|
|
2163
|
+
font-weight: normal;
|
|
2164
|
+
line-height: var(--sbb-typo-line-height-text);
|
|
2165
|
+
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
2166
|
+
font-size: var(--sbb-text-font-size);
|
|
2167
|
+
color-scheme: light dark;
|
|
2168
|
+
color: var(--sbb-font-color-default);
|
|
2169
|
+
background-color: var(--sbb-background-color-1);
|
|
2170
|
+
}
|
|
2171
|
+
|
|
2172
|
+
::placeholder {
|
|
2173
|
+
color: var(--sbb-color-5);
|
|
2174
|
+
-webkit-text-fill-color: var(--sbb-color-5);
|
|
2175
|
+
opacity: 1;
|
|
2176
|
+
}
|
|
2177
|
+
|
|
2138
2178
|
:is(sbb-autocomplete,
|
|
2139
2179
|
sbb-autocomplete-grid,
|
|
2140
2180
|
sbb-datepicker,
|
|
@@ -2203,13 +2243,6 @@ img {
|
|
|
2203
2243
|
object-position: var(--sbb-image-object-position);
|
|
2204
2244
|
}
|
|
2205
2245
|
|
|
2206
|
-
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
2207
|
-
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
2208
|
-
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
2209
|
-
--sbb-image-object-fit: cover;
|
|
2210
|
-
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2211
|
-
}
|
|
2212
|
-
|
|
2213
2246
|
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2214
2247
|
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2215
2248
|
border-radius: var(--sbb-message-image-border-radius);
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.7.0-dev.
|
|
3
|
+
"version": "4.7.0-dev.1773217409",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
9
|
"storybook",
|
|
10
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
10
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/10e0f29cb6711cd977d0994d54f67c953b697397"
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|