@sbb-esta/lyne-elements 1.12.0 → 1.13.0

package/autocomplete-grid/autocomplete-grid-button.js

@@ -7,7 +7,7 @@ import { setOrRemoveAttribute as i } from "../core/dom.js";
 import { isEventPrevented as h } from "../core/eventing.js";
 import { SbbDisabledMixin as g, SbbNegativeMixin as f } from "../core/mixins.js";
 import { SbbIconNameMixin as k } from "../icon.js";
-const x = l`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
+const x = l`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
 var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, w = (t, b, a, r) => {
   for (var o = r > 1 ? void 0 : r ? _(b, a) : b, e = t.length - 1, s; e >= 0; e--)
     (s = t[e]) && (o = (r ? s(b, a, o) : s(o)) || o);

package/button/common.js

@@ -31,7 +31,7 @@ const z = (r) => {
     }),
     u()
   ], o), o;
-}, C = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-button-icon-size: var(--sbb-size-icon-ui-small);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);--sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);--sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);--sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);--sbb-button-shadow-1-color: var(--sbb-color-red-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-20);--sbb-button-border-style: solid;--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: var(--sbb-border-width-2x);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-min-height: var(--sbb-size-element-m);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x);--sbb-button-gap: var(--sbb-spacing-fixed-2x);--sbb-button-inset: 0;--sbb-button-box-shadow: transparent;--sbb-button-box-shadow-definition: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color)}@media (min-width: 52.5rem){:host{--sbb-button-padding-inline: var(--sbb-spacing-fixed-10x)}}@media (forced-colors: active){:host{--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-default-background: Canvas !important;--sbb-button-color-hover-background: Canvas !important;--sbb-button-color-active-background: Canvas !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-text: GrayText !important;--sbb-button-color-default-text: CanvasText !important;--sbb-button-color-hover-text: CanvasText !important;--sbb-button-color-active-text: CanvasText !important}}@media (forced-colors: active){:host([data-button]){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-hover-text: ButtonText !important;--sbb-button-color-active-text: ButtonText !important}}@media (forced-colors: active){:host([data-link]){--sbb-button-color-default-text: LinkText !important;--sbb-button-color-hover-text: LinkText !important;--sbb-button-color-active-text: LinkText !important}}:host([negative]){--sbb-button-color-disabled-background: var(--sbb-color-anthracite);--sbb-button-color-disabled-text: var(--sbb-color-aluminium)}:host([size=m]){--sbb-button-min-height: var(--sbb-size-element-s);--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}@media (min-width: 52.5rem){:host([size=m]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x)}}:host([size=s]){--sbb-button-min-height: var(--sbb-size-element-xs);--sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}@media (min-width: 52.5rem){:host([size=s]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])){--sbb-button-padding-inline: 0}@media (any-hover: hover){:host(:not([disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem;--sbb-button-shadow-1-offset-y: calc( .5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y) );--sbb-button-shadow-1-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur))}}@media (forced-colors: active){:host(:not([disabled],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}.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);font-weight:700;text-decoration:none;width:100%;position:relative;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;min-height:var(--sbb-button-min-height);border-radius:var(--sbb-button-border-radius);padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);color:var(--sbb-button-color-default-text);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:var(--sbb-button-inset);border:var(--sbb-button-border-width) var(--sbb-button-border-style) var(--sbb-button-color-default-border);border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color,border-color,box-shadow;box-shadow:var(--sbb-button-box-shadow)}:host([disabled]) .sbb-action-base:before{background-color:var(--sbb-button-color-disabled-background);border-width:var(--sbb-button-border-disabled-width);border-color:var(--sbb-button-color-disabled-border);border-style:var(--sbb-button-border-disabled-style)}@media (any-hover: hover){:host(:not([disabled],:active,[data-active]):hover) .sbb-action-base:before{inset:calc(var(--sbb-button-border-width) * -1);background-color:var(--sbb-button-color-hover-background);border-color:var(--sbb-button-color-hover-border)}}:host(:not([disabled]):is(:active,[data-active])) .sbb-action-base:before{color:var(--sbb-button-color-active-text);background-color:var(--sbb-button-color-active-background);border-color:var(--sbb-button-color-active-border)}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])) .sbb-action-base{width:var(--sbb-button-min-height);justify-content:center}:host([disabled]) .sbb-action-base{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}@media (any-hover: hover){:host(:not([disabled],:active,[data-active]):hover) .sbb-action-base{color:var(--sbb-button-color-hover-text)}}:host([data-focus-visible]) .sbb-action-base:before,:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem))}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])) .sbb-button__label{display:none}`, T = b`:host{--sbb-button-color-active-background: var(--sbb-color-red150);--sbb-button-color-active-border: var(--sbb-color-red150);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-default-background: var(--sbb-color-red);--sbb-button-color-default-border: var(--sbb-color-red);--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: var(--sbb-color-red125);--sbb-button-color-hover-border: var(--sbb-color-red125);--sbb-button-color-hover-text: var(--sbb-color-milk)}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-red150);--sbb-button-color-default-background: var(--sbb-color-white);--sbb-button-color-default-border: var(--sbb-color-white);--sbb-button-color-default-text: var(--sbb-color-red);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-red125);--sbb-button-shadow-1-color: var(--sbb-color-smoke-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-metal-alpha-20)}:host(:not([disabled],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, _ = b`:host{--sbb-button-color-active-background: var(--sbb-color-milk);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-color-white);--sbb-button-color-default-border: var(--sbb-color-cloud);--sbb-button-color-default-text: var(--sbb-color-charcoal);--sbb-button-color-hover-background: var(--sbb-color-white);--sbb-button-color-hover-border: var(--sbb-color-cloud);--sbb-button-color-hover-text: var(--sbb-color-iron);--sbb-button-shadow-1-color: var(--sbb-color-platinum-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20)}:host([negative]){--sbb-button-color-active-background: transparent;--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: var(--sbb-color-white);--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: transparent;--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-milk)}:host(:not([disabled],[negative],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, S = b`:host{--sbb-button-color-active-background: var(--sbb-color-black);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-default-background: var(--sbb-color-charcoal);--sbb-button-color-default-border: var(--sbb-color-cloud);--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: var(--sbb-color-midnight);--sbb-button-color-hover-border: var(--sbb-color-cloud);--sbb-button-color-hover-text: var(--sbb-color-milk);--sbb-button-shadow-1-color: var(--sbb-color-platinum-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20)}:host(:not([disabled],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, B = b`:host{--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-black);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-black);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-black)}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-active-border: var(--sbb-color-iron);--sbb-button-color-active-text: var(--sbb-color-white);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-hover-border: var(--sbb-color-charcoal);--sbb-button-color-hover-text: var(--sbb-color-white)}`;
+}, C = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-button-icon-size: var(--sbb-size-icon-ui-small);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);--sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);--sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);--sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);--sbb-button-shadow-1-color: var(--sbb-color-red-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-20);--sbb-button-border-style: solid;--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: var(--sbb-border-width-2x);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-min-height: var(--sbb-size-element-m);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x);--sbb-button-gap: var(--sbb-spacing-fixed-2x);--sbb-button-inset: 0;--sbb-button-box-shadow: transparent;--sbb-button-box-shadow-definition: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color)}@media (min-width: 52.5rem){:host{--sbb-button-padding-inline: var(--sbb-spacing-fixed-10x)}}@media (forced-colors: active){:host{--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-default-background: Canvas !important;--sbb-button-color-hover-background: Canvas !important;--sbb-button-color-active-background: Canvas !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-text: GrayText !important;--sbb-button-color-default-text: CanvasText !important;--sbb-button-color-hover-text: CanvasText !important;--sbb-button-color-active-text: CanvasText !important}}@media (forced-colors: active){:host([data-button]){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-hover-text: ButtonText !important;--sbb-button-color-active-text: ButtonText !important}}@media (forced-colors: active){:host([data-link]){--sbb-button-color-default-text: LinkText !important;--sbb-button-color-hover-text: LinkText !important;--sbb-button-color-active-text: LinkText !important}}:host([negative]){--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-text: var(--sbb-color-aluminium)}:host([size=m]){--sbb-button-min-height: var(--sbb-size-element-s);--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}@media (min-width: 52.5rem){:host([size=m]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x)}}:host([size=s]){--sbb-button-min-height: var(--sbb-size-element-xs);--sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}@media (min-width: 52.5rem){:host([size=s]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])){--sbb-button-padding-inline: 0}@media (any-hover: hover){:host(:not([disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem;--sbb-button-shadow-1-offset-y: calc( .5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y) );--sbb-button-shadow-1-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur))}}@media (forced-colors: active){:host(:not([disabled],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}.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);font-weight:700;text-decoration:none;width:100%;position:relative;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;min-height:var(--sbb-button-min-height);border-radius:var(--sbb-button-border-radius);padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);color:var(--sbb-button-color-default-text);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:var(--sbb-button-inset);border:var(--sbb-button-border-width) var(--sbb-button-border-style) var(--sbb-button-color-default-border);border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color,border-color,box-shadow;box-shadow:var(--sbb-button-box-shadow)}:host([disabled]) .sbb-action-base:before{background-color:var(--sbb-button-color-disabled-background);border-width:var(--sbb-button-border-disabled-width);border-color:var(--sbb-button-color-disabled-border);border-style:var(--sbb-button-border-disabled-style)}@media (any-hover: hover){:host(:not([disabled],:active,[data-active]):hover) .sbb-action-base:before{inset:calc(var(--sbb-button-border-width) * -1);background-color:var(--sbb-button-color-hover-background);border-color:var(--sbb-button-color-hover-border)}}:host(:not([disabled]):is(:active,[data-active])) .sbb-action-base:before{color:var(--sbb-button-color-active-text);background-color:var(--sbb-button-color-active-background);border-color:var(--sbb-button-color-active-border)}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])) .sbb-action-base{width:var(--sbb-button-min-height);justify-content:center}:host([disabled]) .sbb-action-base{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}@media (any-hover: hover){:host(:not([disabled],:active,[data-active]):hover) .sbb-action-base{color:var(--sbb-button-color-hover-text)}}:host([data-focus-visible]) .sbb-action-base:before,:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem))}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])) .sbb-button__label{display:none}`, T = b`:host{--sbb-button-color-active-background: var(--sbb-color-red150);--sbb-button-color-active-border: var(--sbb-color-red150);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-default-background: var(--sbb-color-red);--sbb-button-color-default-border: var(--sbb-color-red);--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: var(--sbb-color-red125);--sbb-button-color-hover-border: var(--sbb-color-red125);--sbb-button-color-hover-text: var(--sbb-color-milk)}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-red150);--sbb-button-color-default-background: var(--sbb-color-white);--sbb-button-color-default-border: var(--sbb-color-white);--sbb-button-color-default-text: var(--sbb-color-red);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-red125);--sbb-button-shadow-1-color: var(--sbb-color-smoke-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-metal-alpha-20)}:host(:not([disabled],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, _ = b`:host{--sbb-button-color-active-background: var(--sbb-color-milk);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-color-white);--sbb-button-color-default-border: var(--sbb-color-cloud);--sbb-button-color-default-text: var(--sbb-color-charcoal);--sbb-button-color-hover-background: var(--sbb-color-white);--sbb-button-color-hover-border: var(--sbb-color-cloud);--sbb-button-color-hover-text: var(--sbb-color-iron);--sbb-button-shadow-1-color: var(--sbb-color-platinum-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20)}:host([negative]){--sbb-button-color-active-background: transparent;--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: var(--sbb-color-white);--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: transparent;--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-milk)}:host(:not([disabled],[negative],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, S = b`:host{--sbb-button-color-active-background: var(--sbb-color-black);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-default-background: var(--sbb-color-charcoal);--sbb-button-color-default-border: var(--sbb-color-cloud);--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: var(--sbb-color-midnight);--sbb-button-color-hover-border: var(--sbb-color-cloud);--sbb-button-color-hover-text: var(--sbb-color-milk);--sbb-button-shadow-1-color: var(--sbb-color-platinum-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20)}:host(:not([disabled],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, B = b`:host{--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-black);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-black);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-black)}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-active-border: var(--sbb-color-iron);--sbb-button-color-active-text: var(--sbb-color-white);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-white);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-hover-border: var(--sbb-color-charcoal);--sbb-button-color-hover-text: var(--sbb-color-white)}`;
 export {
   z as SbbButtonCommonElementMixin,
   C as buttonCommonStyle,

package/button/mini-button.js

@@ -1,5 +1,5 @@
-import { SbbButtonBaseElement as l } from "../core/base-elements.js";
-import { slotState as d } from "../core/decorators.js";
+import { SbbButtonBaseElement as d } from "../core/base-elements.js";
+import { slotState as l } from "../core/decorators.js";
 import { SbbNegativeMixin as u, SbbDisabledTabIndexActionMixin as c } from "../core/mixins.js";
 import { SbbIconNameMixin as v } from "../icon.js";
 import { customElement as m } from "lit/decorators.js";
@@ -10,16 +10,16 @@ var p = Object.defineProperty, h = Object.getOwnPropertyDescriptor, g = (e, t, r
   return b && o && p(t, r, o), o;
 };
 let s = class extends u(
-  v(l)
+  v(d)
 ) {
   renderTemplate() {
     return super.renderIconSlot();
   }
 };
 s = g([
-  d()
+  l()
 ], s);
-const x = f`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-mini-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-mini-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-mini-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-mini-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-mini-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-mini-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-mini-button:before{background-color:var(--sbb-button-color-active-background)}`;
+const x = f`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-mini-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-mini-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-mini-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-mini-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-mini-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-mini-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-mini-button:before{background-color:var(--sbb-button-color-active-background)}`;
 var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, _ = (e, t, r, b) => {
   for (var o = b > 1 ? void 0 : b ? y(t, r) : t, a = e.length - 1, n; a >= 0; a--)
     (n = e[a]) && (o = (b ? n(t, r, o) : n(o)) || o);

package/core/mixins/form-associated-checkbox-mixin.d.ts

@@ -15,6 +15,7 @@ export declare abstract class SbbFormAssociatedCheckboxMixinType extends SbbForm
     protected isDisabledExternally(): boolean;
     protected isRequiredExternally(): boolean;
     protected withUserInteraction?(): void;
+    protected updateFormValue(): void;
 }
 /**
  * The FormAssociatedCheckboxMixin enables native form support for checkbox controls.

package/core/mixins/form-associated-checkbox-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-checkbox-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-checkbox-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAMxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIlF,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAC5B,SAAQ,0BACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEvE,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE;IAEnC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAExB,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,mBAAmB,CAAC,IAAI,IAAI;CACvC;AAED;;;;GAIG;AAEH,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAClE,CAAC,KACZ,WAAW,CAAC,kCAAkC,CAAC,GAAG,CA6IpD,CAAC"}
+{"version":3,"file":"form-associated-checkbox-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-checkbox-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAMxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIlF,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAC5B,SAAQ,0BACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEvE,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE;IAEnC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAExB,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,mBAAmB,CAAC,IAAI,IAAI;IACtC,SAAS,CAAC,eAAe,IAAI,IAAI;CAClC;AAED;;;;GAIG;AAEH,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAClE,CAAC,KACZ,WAAW,CAAC,kCAAkC,CAAC,GAAG,CA6IpD,CAAC"}

package/core/mixins/form-associated-mixin.d.ts

@@ -1,12 +1,12 @@
 import { LitElement } from 'lit';
-import { Constructor } from './constructor.js';
-export declare abstract class SbbFormAssociatedMixinType {
+import { AbstractConstructor } from './constructor.js';
+export declare abstract class SbbFormAssociatedMixinType<V = string> {
     get form(): HTMLFormElement | null;
     get name(): string;
     set name(value: string);
     get type(): string;
-    get value(): string | null;
-    set value(value: string | null);
+    get value(): V | null;
+    set value(value: V | null);
     get validity(): ValidityState;
     get validationMessage(): string;
     get willValidate(): boolean;
@@ -18,12 +18,12 @@ export declare abstract class SbbFormAssociatedMixinType {
     formDisabledCallback(disabled: boolean): void;
     abstract formResetCallback(): void;
     abstract formStateRestoreCallback(state: FormRestoreState | null, reason: FormRestoreReason): void;
-    protected updateFormValue(): void;
+    protected abstract updateFormValue(): void;
 }
 /**
  * The FormAssociatedMixin enables native form support for custom controls.
  */
-export declare const SbbFormAssociatedMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SbbFormAssociatedMixinType> & T;
+export declare const SbbFormAssociatedMixin: <T extends AbstractConstructor<LitElement>, V = string>(superClass: T) => AbstractConstructor<SbbFormAssociatedMixinType<V>> & T;
 /**
  * A value to be restored for a component's form value. If a component's form
  * state is a `FormData` object, its entry list of name and values will be

package/core/mixins/form-associated-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,0BAA0B;IACtD,IAAW,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;IAC1C,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;IAC/B,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC;IAClC,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE;IAEvC,IAAW,QAAQ,IAAI,aAAa,CAAC;IACrC,IAAW,iBAAiB,IAAI,MAAM,CAAC;IACvC,IAAW,YAAY,IAAI,OAAO,CAAC;IAEnC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAExC,aAAa,IAAI,OAAO;IACxB,cAAc,IAAI,OAAO;IAEzB,sBAAsB,CAAC,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAC3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;aACpC,iBAAiB,IAAI,IAAI;aACzB,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,MAAM,EAAE,iBAAiB,GACxB,IAAI;IAEP,SAAS,CAAC,eAAe,IAAI,IAAI;CAClC;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAC1D,CAAC,KACZ,WAAW,CAAC,0BAA0B,CAAC,GAAG,CAgK5C,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,EAAE,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,cAAc,CAAC"}
+{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,0BAA0B,CAAC,CAAC,GAAG,MAAM;IACjE,IAAW,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;IAC1C,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;IAC/B,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC7B,IAAW,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE;IAElC,IAAW,QAAQ,IAAI,aAAa,CAAC;IACrC,IAAW,iBAAiB,IAAI,MAAM,CAAC;IACvC,IAAW,YAAY,IAAI,OAAO,CAAC;IAEnC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAExC,aAAa,IAAI,OAAO;IACxB,cAAc,IAAI,OAAO;IAEzB,sBAAsB,CAAC,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAC3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;aACpC,iBAAiB,IAAI,IAAI;aACzB,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,MAAM,EAAE,iBAAiB,GACxB,IAAI;IAEP,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,IAAI;CAC3C;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EAAE,CAAC,uBACrE,CAAC,KACZ,mBAAmB,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,GAAG,CAsKvD,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,EAAE,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,cAAc,CAAC"}

package/core/mixins/required-mixin.d.ts

@@ -9,5 +9,5 @@ export declare class SbbRequiredMixinType {
 /**
  * Enhance your component with a required property.
  */
-export declare const SbbRequiredMixin: <T extends AbstractConstructor<LitElement & SbbFormAssociatedMixinType>>(superClass: T) => AbstractConstructor<SbbRequiredMixinType> & T;
+export declare const SbbRequiredMixin: <T extends AbstractConstructor<LitElement & SbbFormAssociatedMixinType<V>>, V>(superClass: T) => AbstractConstructor<SbbRequiredMixinType> & T;
 //# sourceMappingURL=required-mixin.d.ts.map

package/core/mixins/required-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"required-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/required-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAE7E,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,SAAS,CAAC,oBAAoB,IAAI,OAAO;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,0BAA0B,CAAC,cAE1D,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiC9C,CAAC"}
+{"version":3,"file":"required-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/required-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAE7E,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,SAAS,CAAC,oBAAoB,IAAI,OAAO;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,0BAA0B,CAAC,CAAC,CAAC,CAAC,EACzE,CAAC,cAEW,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiC9C,CAAC"}

package/core/mixins.js

@@ -65,13 +65,13 @@ const R = (n) => {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
     /**
-     * Returns the form owner of internals target element.
+     * Returns the form owner of the internals of the target element.
      */
     get form() {
       return this.internals.form;
     }
     set name(e) {
-      this.setAttribute("name", `${e}`);
+      this.setAttribute("name", `${e}`), this.updateFormValue();
     }
     get name() {
       return this.getAttribute("name") ?? "";
@@ -145,10 +145,6 @@ const R = (n) => {
         this.formDisabled = e;
       });
     }
-    /** Should be called when form value is changed. */
-    updateFormValue() {
-      this.internals.setFormValue(this.value);
-    }
   };
   r.formAssociated = !0;
   let s = r;

package/core/styles/core/functions.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 
 @function px-to-rem-build($size) {
-  /* size: value in px (no unit) */
+  // size: value in px (no unit)
   @return ((math.div($size, 16)) * 1rem);
 }

package/core/styles/mixins/buttons.scss

@@ -85,7 +85,7 @@
   --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
   --sbb-button-color-hover-background: var(--sbb-color-charcoal);
   --sbb-button-color-active-background: var(--sbb-color-iron);
-  --sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-disabled-background: var(--sbb-color-charcoal);
   --sbb-button-color-disabled-border: var(--sbb-color-smoke);
   --sbb-button-color-disabled-text: var(--sbb-color-smoke);
 }

package/core/styles/mixins/helpers.scss

@@ -23,7 +23,7 @@
   transform: translateY(-50%);
 }
 
-/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+// This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element.
 @mixin zero-width-space {
   &::before {
     content: '\200B';

package/core/styles/mixins/lists.scss

@@ -22,7 +22,6 @@
       margin: 0;
       padding: 0;
       padding-inline-start: var(--sbb-list-padding-inline-start);
-      color: var(--sbb-color-iron);
 
       > li {
         + li {
@@ -89,7 +88,6 @@
     // Ensure that description is always attached to the label
     grid-template-columns: auto minmax(20%, 1fr);
     gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
-    color: var(--sbb-color-iron);
 
     :is(dt, dd) {
       margin: 0;
@@ -127,7 +125,7 @@
     }
   }
 
-  /* stylelint-disable-next-line no-descending-specificity */
+  // stylelint-disable-next-line no-descending-specificity
   > li {
     position: relative;
     padding-inline: calc(var(#{$padding-inline}) + var(#{$dimensions}) + var(#{$to-text-gap}))
@@ -202,6 +200,7 @@
     --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
 
     counter-reset: steps;
+    color: var(--sbb-color-iron);
   }
 
   &:where(.sbb-text-s) {

package/core/styles/mixins/scrollbar.scss

@@ -14,7 +14,7 @@
     background-color: var(--sbb-scrollbar-track-color, transparent);
   }
 
-  /* Scrollbar itself */
+  // Scrollbar itself
   &::-webkit-scrollbar-thumb {
     background-color: var(--sbb-scrollbar-color, currentcolor);
     border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid
@@ -30,7 +30,7 @@
     }
   }
 
-  /* Hide button (top and bottom of the scrollbar) */
+  // Hide button (top and bottom of the scrollbar)
   &::-webkit-scrollbar-button,
   &::-webkit-scrollbar-corner {
     display: none;

package/core/styles/mixins/table.scss

@@ -1,11 +1,9 @@
 @use './typo';
 
-/*
- * SBB table mixin
- * Notes:
- * We cannot use `border-collapse` because it is not compatible with the `border-radius` property.
- * Therefore, we have to build the grid avoiding double borders.
- */
+// SBB table mixin
+// Notes:
+// We cannot use `border-collapse` because it is not compatible with the `border-radius` property.
+// Therefore, we have to build the grid avoiding double borders.
 @mixin table {
   @include table--m;
   @include table--striped;

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -63,6 +63,7 @@ $sbb-color-black-alpha-50: rgba(0, 0, 0, 0.5);
 $sbb-color-black-alpha-60: rgba(0, 0, 0, 0.6);
 $sbb-color-black-alpha-70: rgba(0, 0, 0, 0.7);
 $sbb-color-midnight: #151515;
+$sbb-color-blue: #2d327d;
 $sbb-color-charcoal: #212121;
 $sbb-color-iron: #444444;
 $sbb-color-anthracite: #5a5a5a;
@@ -97,6 +98,9 @@ $sbb-color-red125: #c60018;
 $sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
 $sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
 $sbb-color-red150: #a20013;
+$sbb-color-royal: #06348b;
+$sbb-color-royal125: #032668;
+$sbb-color-royal150: #021c4e;
 $sbb-color-white: #ffffff;
 $sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
 $sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Sep 2024 15:45:11 GMT
+ * Generated on Mon, 21 Oct 2024 06:34:22 GMT
  */
 
 @mixin lyne-design-tokens-css-variables {
@@ -115,6 +115,7 @@
   --sbb-color-black-alpha-60: rgba(0, 0, 0, 0.6);
   --sbb-color-black-alpha-70: rgba(0, 0, 0, 0.7);
   --sbb-color-midnight: #151515;
+  --sbb-color-blue: #2d327d;
   --sbb-color-charcoal: #212121;
   --sbb-color-iron: #444444;
   --sbb-color-anthracite: #5a5a5a;
@@ -149,6 +150,9 @@
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
   --sbb-color-red150: #a20013;
+  --sbb-color-royal: #06348b;
+  --sbb-color-royal125: #032668;
+  --sbb-color-royal150: #021c4e;
   --sbb-color-white: #ffffff;
   --sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
   --sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);