@sbb-esta/lyne-elements 2.4.1 → 2.5.0

package/button/common/button-common.d.ts

@@ -3,10 +3,9 @@ import { AbstractConstructor, SbbDisabledMixinType, SbbNegativeMixinType } from
 import { SbbIconNameMixinType } from '../../icon.js';
 export type SbbButtonCommonElement = SbbButtonCommonElementMixinType & SbbActionBaseElement;
 export type SbbButtonSize = 'l' | 'm' | 's';
-export declare class SbbButtonCommonElementMixinType implements SbbNegativeMixinType, Partial<SbbDisabledMixinType>, Partial<SbbIconNameMixinType> {
+export declare class SbbButtonCommonElementMixinType extends SbbIconNameMixinType implements SbbNegativeMixinType, Partial<SbbDisabledMixinType> {
     accessor size: SbbButtonSize;
     accessor disabled: boolean;
-    accessor iconName: string;
     accessor negative: boolean;
 }
 export declare const SbbButtonCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbButtonCommonElementMixinType> & T;

package/button/common/button-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/button/common/button-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE5E,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,GAAG,oBAAoB,CAAC;AAE5F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,+BACnB,YAAW,oBAAoB,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAE7F,SAAgB,IAAI,EAAE,aAAa,CAAC;IACpC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,QAAQ,EAAE,OAAO,CAAC;CACnC;AAGD,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,EAC7F,YAAY,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CA0BzD,CAAC"}
+{"version":3,"file":"button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/button/common/button-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE5E,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,GAAG,oBAAoB,CAAC;AAE5F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,+BACnB,SAAQ,oBACR,YAAW,oBAAoB,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAE9D,SAAgB,IAAI,EAAE,aAAa,CAAC;IACpC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;CACnC;AAGD,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,EAC7F,YAAY,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CA0BzD,CAAC"}

package/button/common.js

@@ -1,8 +1,8 @@
 var f = (o) => {
   throw TypeError(o);
 };
-var p = (o, t, b) => t.has(o) || f("Cannot " + b);
-var g = (o, t, b) => (p(o, t, "read from private field"), b ? b.call(o) : t.get(o)), x = (o, t, b) => t.has(o) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, b), w = (o, t, b, s) => (p(o, t, "write to private field"), s ? s.call(o, b) : t.set(o, b), b);
+var g = (o, t, b) => t.has(o) || f("Cannot " + b);
+var p = (o, t, b) => (g(o, t, "read from private field"), b ? b.call(o) : t.get(o)), x = (o, t, b) => t.has(o) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, b), w = (o, t, b, s) => (g(o, t, "write to private field"), s ? s.call(o, b) : t.set(o, b), b);
 import { __esDecorate as k, __runInitializers as c } from "tslib";
 import { property as y } from "lit/decorators.js";
 import { html as z } from "lit/static-html.js";
@@ -27,7 +27,7 @@ const G = (o) => (() => {
      * @default 'l' / 's' (lean)
      */
     get size() {
-      return g(this, n);
+      return p(this, n);
     }
     set size(e) {
       w(this, n, e);
@@ -46,7 +46,7 @@ const G = (o) => (() => {
       l.size = _;
     } }, metadata: e }, h, m), k(null, s = { value: r }, b, { kind: "class", name: r.name, metadata: e }, null, d), r = s.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), c(r, d);
   })(), r;
-})(), $ = i`*,: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-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-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-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-duration, 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-box-shadow: transparent 0 0;--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);--_width: unset;--_border-color: var(--sbb-button-color-default-border);--_background-color: var(--sbb-button-color-default-background);--_color: var(--sbb-button-color-default-text);--_button-inset: 0;--_outline-width: 0;--_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid var(--_border-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;--sbb-button-border-overlap-fix: 0rem}}@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;--_width: var(--sbb-button-min-height)}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],: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));--sbb-button-cursor: pointer;--_border-color: var(--sbb-button-color-hover-border);--_color: var(--sbb-button-color-hover-text);--_background-color: var(--sbb-button-color-hover-background);--_button-inset: calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors: active){:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor: default;--_color: var(--sbb-button-color-disabled-text);--_background-color: var(--sbb-button-color-disabled-background);--_border-color: var(--sbb-button-color-disabled-border);--_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,[data-active])){--_color: var(--sbb-button-color-active-text);--_background-color: var(--sbb-button-color-active-background);--_border-color: var(--sbb-button-color-active-border)}:host([data-focus-visible]),:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])),:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible{--_outline-width: var(--sbb-focus-outline-width)}.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;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;white-space:nowrap;text-decoration:none;min-height:var(--sbb-button-min-height);outline:none;width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);-webkit-user-select:none;user-select:none;background-color:var(--_background-color);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color,background-color;padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);position:relative}.sbb-action-base:before{content:"";position:absolute;inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);outline:var(--sbb-focus-outline-color) solid var(--_outline-width);outline-offset:var(--sbb-focus-outline-offset);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}`, q = i`: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);--sbb-button-shadow-1-color: var(--sbb-color-red-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-20)}: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],:disabled,[disabled-interactive],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, F = i`: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);--sbb-button-border-overlap-fix: 0rem}: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],:disabled,[disabled-interactive],[negative],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, J = i`:host{--sbb-button-color-active-background: var(--sbb-color-midnight);--sbb-button-color-active-border: var(--sbb-color-midnight);--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-charcoal);--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-milk);--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: var(--sbb-color-white);--sbb-button-color-active-border: var(--sbb-color-white);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-color-milk);--sbb-button-color-default-border: var(--sbb-color-milk);--sbb-button-color-default-text: var(--sbb-color-midnight);--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-iron);--sbb-button-shadow-1-color: var(--sbb-color-black-alpha-30);--sbb-button-shadow-2-color: var(--sbb-color-black-alpha-30)}:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, K = i`: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)}`;
+})(), $ = i`*,: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-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-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-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-duration, 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-box-shadow: transparent 0 0;--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);--_width: unset;--_border-color: var(--sbb-button-color-default-border);--_background-color: var(--sbb-button-color-default-background);--_color: var(--sbb-button-color-default-text);--_button-inset: 0;--_outline-width: 0;--_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid var(--_border-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;--sbb-button-border-overlap-fix: 0rem}}@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;--_width: var(--sbb-button-min-height)}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],: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));--sbb-button-cursor: pointer;--_border-color: var(--sbb-button-color-hover-border);--_color: var(--sbb-button-color-hover-text);--_background-color: var(--sbb-button-color-hover-background);--_button-inset: calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors: active){:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor: default;--_color: var(--sbb-button-color-disabled-text);--_background-color: var(--sbb-button-color-disabled-background);--_border-color: var(--sbb-button-color-disabled-border);--_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,[data-active])){--_color: var(--sbb-button-color-active-text);--_background-color: var(--sbb-button-color-active-background);--_border-color: var(--sbb-button-color-active-border)}:host([data-focus-visible]),:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])),:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible{--_outline-width: var(--sbb-focus-outline-width)}.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;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;white-space:nowrap;text-decoration:none;min-height:var(--sbb-button-min-height);outline:none;width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);-webkit-user-select:none;user-select:none;background-color:var(--_background-color);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color,background-color;padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);position:relative}.sbb-action-base:before{content:"";position:absolute;inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);outline:var(--sbb-focus-outline-color) solid var(--_outline-width);outline-offset:var(--sbb-focus-outline-offset);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}`, q = i`: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);--sbb-button-shadow-1-color: var(--sbb-color-red-alpha-20);--sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-20)}:host([negative]){--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);--sbb-button-shadow-1-color: var(--sbb-color-red-alpha-60);--sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-60)}:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, F = i`: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);--sbb-button-border-overlap-fix: 0rem}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-charcoal);--sbb-button-color-active-border: var(--sbb-color-iron);--sbb-button-color-active-text: var(--sbb-color-graphite);--sbb-button-color-default-background: var(--sbb-color-midnight);--sbb-button-color-default-border: var(--sbb-color-iron);--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-iron);--sbb-button-color-hover-text: var(--sbb-color-cloud);--sbb-button-shadow-1-color: var(--sbb-color-black-alpha-30);--sbb-button-shadow-2-color: var(--sbb-color-black-alpha-30)}:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, J = i`:host{--sbb-button-color-active-background: var(--sbb-color-midnight);--sbb-button-color-active-border: var(--sbb-color-midnight);--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-charcoal);--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-milk);--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: var(--sbb-color-white);--sbb-button-color-active-border: var(--sbb-color-white);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-color-milk);--sbb-button-color-default-border: var(--sbb-color-milk);--sbb-button-color-default-text: var(--sbb-color-midnight);--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-iron);--sbb-button-shadow-1-color: var(--sbb-color-black-alpha-30);--sbb-button-shadow-2-color: var(--sbb-color-black-alpha-30)}:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, K = i`: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-midnight);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-midnight);--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-midnight)}: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 {
   G as SbbButtonCommonElementMixin,
   J as buttonAccentStyle,

package/clock/clock.d.ts

@@ -10,6 +10,8 @@ export declare class SbbClockElement extends LitElement {
      * @param value HH:MM:ss
      */
     accessor now: SbbTime | null;
+    /** Whether the clock is ticking or not */
+    private _state;
     /** Reference to the hour hand. */
     private _clockHandHours;
     /** Reference to the minute hand. */
@@ -24,10 +26,12 @@ export declare class SbbClockElement extends LitElement {
     private _seconds;
     /** Move the minutes hand every minute. */
     private _handMovement?;
+    private _resetIntervalId?;
     /** Callback function for hours hand. */
     private _moveHoursHandFn;
     /** Callback function for minutes hand. */
     private _moveMinutesHandFn;
+    connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     disconnectedCallback(): void;
@@ -37,6 +41,10 @@ export declare class SbbClockElement extends LitElement {
     private _startClock;
     /** Stops the clock by removing all the animations. */
     private _stopClock;
+    /**
+     * As a fallback measure to prevent de-sync, reset the clock to the system time.
+     */
+    private _resetClock;
     /** Set the starting position for the three hands on the clock face. */
     private _setHandsStartingPosition;
     /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */

package/clock/clock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA2CrD;;GAEG;AACH,qBAEM,eAAgB,SAAQ,UAAU;IACtC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEvD,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;IAEvD,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;cAE9C,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQnD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,2BAA2B,CAMjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAsBzB,sDAAsD;YACxC,UAAU;IAcxB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA8CrD;;GAEG;AACH,qBAEM,eAAgB,SAAQ,UAAU;IACtC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEvD,0CAA0C;IAC1C,OAAO,CAAC,MAAM,CAAkC;IAEhD,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;IAEvD,OAAO,CAAC,gBAAgB,CAAC,CAAiC;IAE1D,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjD,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQnD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,2BAA2B,CAMjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAuBzB,sDAAsD;YACxC,UAAU;IAexB;;OAEG;YACW,WAAW;IAQzB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/clock.js

@@ -1,28 +1,28 @@
-var f = (n) => {
+var z = (n) => {
   throw TypeError(n);
 };
-var S = (n, i, e) => i.has(n) || f("Cannot " + e);
-var w = (n, i, e) => (S(n, i, "read from private field"), e ? e.call(n) : i.get(n)), L = (n, i, e) => i.has(n) ? f("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(n) : i.set(n, e), h = (n, i, e, c) => (S(n, i, "write to private field"), c ? c.call(n, e) : i.set(n, e), e);
-import { __runInitializers as m, __esDecorate as C } from "tslib";
-import { css as P, LitElement as I, isServer as E, html as F } from "lit";
-import { customElement as x, property as U } from "lit/decorators.js";
+var S = (n, e, i) => e.has(n) || z("Cannot " + i);
+var w = (n, e, i) => (S(n, e, "read from private field"), i ? i.call(n) : e.get(n)), C = (n, e, i) => e.has(n) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, i), h = (n, e, i, c) => (S(n, e, "write to private field"), c ? c.call(n, i) : e.set(n, i), i);
+import { __runInitializers as m, __esDecorate as L } from "tslib";
+import { css as P, LitElement as F, isServer as E, html as x } from "lit";
+import { customElement as U, property as $ } from "lit/decorators.js";
 import { ref as _ } from "lit/directives/ref.js";
-const $ = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="#FFF" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
-`, D = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
-`, V = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
-`, G = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
-`, B = P`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-red);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`, R = 12, K = 60, A = 60, j = 50, O = 360, T = 30, Z = 6, q = 360 / 58.5, J = 60, Q = 3600, N = {
+const D = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="#FFF" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
+`, V = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
+`, G = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
+`, R = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
+`, B = P`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-red);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`, K = 12, j = 60, A = 60, Z = 50, O = 360, T = 30, q = 6, J = 360 / 58.5, Q = 60, N = 3600, W = N / 2, I = {
   once: !0,
   passive: !0
 };
 let it = (() => {
   var r, l;
-  let n = [x("sbb-clock")], i, e = [], c, u = I, b, v = [], k = [];
+  let n = [U("sbb-clock")], e, i = [], c, u = F, b, k = [], v = [];
   return l = class extends u {
     constructor() {
       super(...arguments);
-      L(this, r);
-      h(this, r, m(this, v, null)), this._clockHandHours = m(this, k), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
+      C(this, r);
+      h(this, r, m(this, k, null)), this._state = (m(this, v), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
         document.visibilityState === "hidden" ? await this._stopClock() : this.now || await this._startClock();
       };
     }
@@ -36,6 +36,9 @@ let it = (() => {
     set now(t) {
       h(this, r, t);
     }
+    connectedCallback() {
+      super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), W * 1e3);
+    }
     willUpdate(t) {
       super.willUpdate(t), !E && t.has("now") && this._startOrConfigureClock();
     }
@@ -43,7 +46,7 @@ let it = (() => {
       super.firstUpdated(t), E || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), await this._startOrConfigureClock());
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this._removeEventListeners();
+      super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
     }
     async _startOrConfigureClock() {
       this.now ? (await this._stopClock(), this._resetSecondsHandAnimation(), this._setHandsStartingPosition()) : await this._startClock();
@@ -51,23 +54,29 @@ let it = (() => {
     /** Starts the clock by defining the hands starting position then starting the animations. */
     async _startClock() {
       var t, s;
-      (t = this._clockHandHours) == null || t.addEventListener("animationend", this._moveHoursHandFn, N), (s = this._clockHandSeconds) == null || s.addEventListener("animationend", this._moveMinutesHandFn, N), await new Promise((o) => setTimeout(() => {
+      (t = this._clockHandHours) == null || t.addEventListener("animationend", this._moveHoursHandFn, I), (s = this._clockHandSeconds) == null || s.addEventListener("animationend", this._moveMinutesHandFn, I), await new Promise((o) => setTimeout(() => {
         var a;
-        this._setHandsStartingPosition(), (a = this.style) == null || a.setProperty("--sbb-clock-animation-play-state", "running"), o();
-      }, j));
+        this._setHandsStartingPosition(), (a = this.style) == null || a.setProperty("--sbb-clock-animation-play-state", "running"), this._state = "running", o();
+      }, Z));
     }
     /** Stops the clock by removing all the animations. */
     async _stopClock() {
       var t, s, o, a;
-      clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), (o = this._clockHandMinutes) == null || o.classList.add("sbb-clock__hand-minutes--no-transition"), (a = this.style) == null || a.setProperty("--sbb-clock-animation-play-state", "paused");
+      clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), (o = this._clockHandMinutes) == null || o.classList.add("sbb-clock__hand-minutes--no-transition"), (a = this.style) == null || a.setProperty("--sbb-clock-animation-play-state", "paused"), this._state = "paused";
+    }
+    /**
+     * As a fallback measure to prevent de-sync, reset the clock to the system time.
+     */
+    async _resetClock() {
+      this._state === "running" && (await this._stopClock(), await this._startClock());
     }
     /** Set the starting position for the three hands on the clock face. */
     _setHandsStartingPosition() {
-      var M, H, g, p, y, z;
+      var M, p, g, H, y, f;
       this._assignCurrentTime();
-      const t = A - this._seconds, s = K - this._minutes, o = R - this._hours;
+      const t = A - this._seconds, s = j - this._minutes, o = K - this._hours;
       let a = 0, d = 0;
-      t > 0 && (a += t, d = 1), s > 0 && (a += (s - d) * J, d = 1), o > 0 && (a += (o - d) * Q), (M = this.style) == null || M.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * T + this._minutes / 2)}deg`), (H = this.style) == null || H.setProperty("--sbb-clock-hours-animation-duration", `${a}s`), (g = this.style) == null || g.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * q)}deg`), (p = this.style) == null || p.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), (y = this._clockHandSeconds) == null || y.classList.add("sbb-clock__hand-seconds--initial-minute"), (z = this._clockHandHours) == null || z.classList.add("sbb-clock__hand-hours--initial-hour"), this.toggleAttribute("data-initialized", !0);
+      t > 0 && (a += t, d = 1), s > 0 && (a += (s - d) * Q, d = 1), o > 0 && (a += (o - d) * N), (M = this.style) == null || M.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * T + this._minutes / 2)}deg`), (p = this.style) == null || p.setProperty("--sbb-clock-hours-animation-duration", `${a}s`), (g = this.style) == null || g.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * J)}deg`), (H = this.style) == null || H.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), (y = this._clockHandSeconds) == null || y.classList.add("sbb-clock__hand-seconds--initial-minute"), (f = this._clockHandHours) == null || f.classList.add("sbb-clock__hand-hours--initial-hour"), this.toggleAttribute("data-initialized", !0);
     }
     /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
     _assignCurrentTime() {
@@ -77,7 +86,7 @@ let it = (() => {
     /** Set the starting position for the minutes hand. */
     _setMinutesHand() {
       var t;
-      (t = this._clockHandMinutes) == null || t.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * Z)}deg)`);
+      (t = this._clockHandMinutes) == null || t.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * q)}deg)`);
     }
     /** Move the hours hand to the next value. */
     _moveHoursHand() {
@@ -115,26 +124,26 @@ let it = (() => {
       (t = this._clockHandSeconds) == null || t.classList.remove("sbb-clock__hand-seconds--initial-minute"), (s = this._clockHandMinutes) == null || s.classList.remove("sbb-clock__hand-minutes--no-transition"), this.style.removeProperty("--sbb-clock-seconds-animation-start-angle"), this.style.removeProperty("--sbb-clock-seconds-animation-duration");
     }
     render() {
-      return F`
+      return x`
       <div class="sbb-clock">
-        <span class="sbb-clock__face" .innerHTML=${$}></span>
+        <span class="sbb-clock__face" .innerHTML=${D}></span>
         <span
           class="sbb-clock__hand-hours"
-          .innerHTML=${D}
+          .innerHTML=${V}
           ${_((t) => {
         this._clockHandHours = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-          .innerHTML=${V}
+          .innerHTML=${G}
           ${_((t) => {
         this._clockHandMinutes = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-seconds"
-          .innerHTML=${G}
+          .innerHTML=${R}
           ${_((t) => {
         this._clockHandSeconds = t;
       })}
@@ -144,10 +153,10 @@ let it = (() => {
     }
   }, r = new WeakMap(), c = l, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    b = [U()], C(l, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (s) => "now" in s, get: (s) => s.now, set: (s, o) => {
+    b = [$()], L(l, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (s) => "now" in s, get: (s) => s.now, set: (s, o) => {
       s.now = o;
-    } }, metadata: t }, v, k), C(null, i = { value: c }, n, { kind: "class", name: c.name, metadata: t }, null, e), c = i.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = B, m(c, e), c;
+    } }, metadata: t }, k, v), L(null, e = { value: c }, n, { kind: "class", name: c.name, metadata: t }, null, i), c = e.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = B, m(c, i), c;
 })();
 export {
   it as SbbClockElement

package/core/a11y/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,QAWnB,CAAC;AAGb,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,WAAW,EAAE,EACvB,UAAU,CAAC,EAAE;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,GACA,WAAW,EAAE,CAuCf;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,WAAW,EAAE,EACvB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,GACpC,WAAW,GAAG,IAAI,CAMpB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,WAAW,CAAyB;IAE5C;;;;;OAKG;IACI,IAAI,CACT,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;QACtC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;KAC3C,GACA,IAAI;IA4CA,UAAU,IAAI,IAAI;CAI1B"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,QAWnB,CAAC;AAGb,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,WAAW,EAAE,EACvB,UAAU,CAAC,EAAE;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,GACA,WAAW,EAAE,CAuCf;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,WAAW,EAAE,EACvB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,GACpC,WAAW,GAAG,IAAI,CAMpB;AAGD,qBAAa,eAAe;IAC1B,OAAO,CAAC,WAAW,CAAyB;IAE5C;;;;;OAKG;IACI,IAAI,CACT,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;QACtC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;KAC3C,GACA,IAAI;IA4CA,UAAU,IAAI,IAAI;CAI1B"}

package/core/base-elements.js

@@ -1,22 +1,22 @@
-var V = (l) => {
+var W = (l) => {
   throw TypeError(l);
 };
-var W = (l, r, n) => r.has(l) || V("Cannot " + n);
-var g = (l, r, n) => (W(l, r, "read from private field"), n ? n.call(l) : r.get(l)), k = (l, r, n) => r.has(l) ? V("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(l) : r.set(l, n), h = (l, r, n, i) => (W(l, r, "write to private field"), i ? i.call(l, n) : r.set(l, n), n);
+var G = (l, r, n) => r.has(l) || W("Cannot " + n);
+var g = (l, r, n) => (G(l, r, "read from private field"), n ? n.call(l) : r.get(l)), k = (l, r, n) => r.has(l) ? W("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(l) : r.set(l, n), h = (l, r, n, i) => (G(l, r, "write to private field"), i ? i.call(l, n) : r.set(l, n), n);
 import { __esDecorate as _, __runInitializers as o } from "tslib";
-import { LitElement as J, html as B, isServer as Q, nothing as y } from "lit";
-import { hostAttributes as T, forceType as D } from "./decorators.js";
+import { LitElement as Q, html as T, isServer as U, nothing as y } from "lit";
+import { hostAttributes as K, forceType as D, omitEmptyConverter as B } from "./decorators.js";
 import { property as v } from "lit/decorators.js";
-import { isEventPrevented as X, EventEmitter as A } from "./eventing.js";
-import { SbbFormAssociatedMixin as Y } from "./mixins.js";
-import { SbbLanguageController as Z } from "./controllers.js";
-import { i18nTargetOpensInNewWindow as ee } from "./i18n.js";
+import { isEventPrevented as Y, EventEmitter as A } from "./eventing.js";
+import { SbbFormAssociatedMixin as Z } from "./mixins.js";
+import { SbbLanguageController as ee } from "./controllers.js";
+import { i18nTargetOpensInNewWindow as te } from "./i18n.js";
 import "../screen-reader-only.js";
-let U = (() => {
+let X = (() => {
   var u;
-  let l = [T({
+  let l = [K({
     "data-action": ""
-  })], r, n = [], i, f = J;
+  })], r, n = [], i, f = Q;
   return u = class extends f {
     get maybeDisabled() {
       const d = this;
@@ -45,18 +45,18 @@ let U = (() => {
     }
     /** Default render method for button-like components. */
     render() {
-      return B`<span class="sbb-action-base ${this.localName}">${this.renderTemplate()}</span>`;
+      return T`<span class="sbb-action-base ${this.localName}">${this.renderTemplate()}</span>`;
     }
   }, i = u, (() => {
     const d = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
     _(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: d }, null, n), i = r.value, d && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: d }), o(i, n);
   })(), i;
-})(), he = (() => {
+})(), be = (() => {
   var m;
-  let l = [T({
+  let l = [K({
     tabindex: "0",
     "data-button": ""
-  })], r, n = [], i, f = Y(U), u = [], O, d;
+  })], r, n = [], i, f = Z(X), u = [], O, d;
   return m = class extends f {
     /**
      * The type attribute to use for the button.
@@ -78,7 +78,7 @@ let U = (() => {
     }
     constructor() {
       if (super(), this._formId = (o(this, u), ""), this._handleButtonClick = async (e) => {
-        if (this.type === "button" || await X(e))
+        if (this.type === "button" || await Y(e))
           return;
         const s = this.form;
         if (s)
@@ -106,7 +106,7 @@ let U = (() => {
           metaKey: z,
           shiftKey: $
         }));
-      }, this.internals.role = "button", !Q) {
+      }, this.internals.role = "button", !U) {
         this.setupBaseEventHandlers();
         const e = { passive: !0 };
         this.addEventListener("click", this._handleButtonClick), this.addEventListener("keydown", this._preventScrollOnSpaceKeydown), this.addEventListener("keyup", this._dispatchClickEventOnSpaceKeyup, e), this.addEventListener("blur", this._removeActiveMarker, e), this.addEventListener("keypress", (s) => {
@@ -145,11 +145,11 @@ let U = (() => {
       s.form = c;
     } }, metadata: e }, null, u), _(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: e }, null, n), i = r.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), o(i, n);
   })(), i;
-})(), be = (() => {
+})(), me = (() => {
   var C, S, E, I, L, x, b;
-  let l = [T({
+  let l = [K({
     "data-link": ""
-  })], r, n = [], i, f = U, u, O = [], d = [], m, K = [], e = [], s, c = [], z = [], $, R = [], j = [], P, q = [], M = [], H, N = [], F = [];
+  })], r, n = [], i, f = X, u, O = [], d = [], m, R = [], e = [], s, c = [], z = [], $, j = [], P = [], q, M = [], H = [], N, F = [], V = [];
   return b = class extends f {
     constructor() {
       super();
@@ -159,7 +159,7 @@ let U = (() => {
       k(this, I);
       k(this, L);
       k(this, x);
-      h(this, C, o(this, O, "")), h(this, S, (o(this, d), o(this, K, ""))), h(this, E, (o(this, e), o(this, c, ""))), h(this, I, (o(this, z), o(this, R, !1))), h(this, L, (o(this, j), o(this, q, ""))), h(this, x, (o(this, M), o(this, N, ""))), this.language = (o(this, F), new Z(this)), this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : y, Q || this.setupBaseEventHandlers();
+      h(this, C, o(this, O, "")), h(this, S, (o(this, d), o(this, R, ""))), h(this, E, (o(this, e), o(this, c, ""))), h(this, I, (o(this, z), o(this, j, !1))), h(this, L, (o(this, P), o(this, M, ""))), h(this, x, (o(this, H), o(this, F, ""))), this.language = (o(this, V), new ee(this)), this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : y, U || this.setupBaseEventHandlers();
     }
     /** The href value you want to link to. */
     get href() {
@@ -223,7 +223,7 @@ let U = (() => {
       return this.renderLink(this.renderTemplate());
     }
     renderLink(a) {
-      return B`
+      return T`
       <a
         class="sbb-action-base ${this.localName}"
         href=${this.href || y}
@@ -236,30 +236,30 @@ let U = (() => {
         aria-disabled=${this.maybeDisabled ? "true" : y}
       >
         ${a}
-        ${this.href && this.target === "_blank" ? B`<sbb-screen-reader-only
-              >. ${ee[this.language.current]}</sbb-screen-reader-only
+        ${this.href && this.target === "_blank" ? T`<sbb-screen-reader-only
+              >. ${te[this.language.current]}</sbb-screen-reader-only
             >` : y}
       </a>
     `;
     }
   }, C = new WeakMap(), S = new WeakMap(), E = new WeakMap(), I = new WeakMap(), L = new WeakMap(), x = new WeakMap(), i = b, (() => {
     const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    u = [D(), v()], m = [D(), v()], s = [D(), v()], $ = [D(), v({ type: Boolean })], P = [D(), v({ attribute: "accessibility-label" })], H = [D(), v({ attribute: "accessibility-current" })], _(b, null, u, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (t) => "href" in t, get: (t) => t.href, set: (t, p) => {
+    u = [D(), v({ reflect: !0, converter: B })], m = [D(), v({ reflect: !0, converter: B })], s = [D(), v({ reflect: !0, converter: B })], $ = [D(), v({ type: Boolean, reflect: !0 })], q = [D(), v({ attribute: "accessibility-label" })], N = [D(), v({ attribute: "accessibility-current" })], _(b, null, u, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (t) => "href" in t, get: (t) => t.href, set: (t, p) => {
       t.href = p;
     } }, metadata: a }, O, d), _(b, null, m, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (t) => "target" in t, get: (t) => t.target, set: (t, p) => {
       t.target = p;
-    } }, metadata: a }, K, e), _(b, null, s, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (t) => "rel" in t, get: (t) => t.rel, set: (t, p) => {
+    } }, metadata: a }, R, e), _(b, null, s, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (t) => "rel" in t, get: (t) => t.rel, set: (t, p) => {
       t.rel = p;
     } }, metadata: a }, c, z), _(b, null, $, { kind: "accessor", name: "download", static: !1, private: !1, access: { has: (t) => "download" in t, get: (t) => t.download, set: (t, p) => {
       t.download = p;
-    } }, metadata: a }, R, j), _(b, null, P, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, p) => {
+    } }, metadata: a }, j, P), _(b, null, q, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, p) => {
       t.accessibilityLabel = p;
-    } }, metadata: a }, q, M), _(b, null, H, { kind: "accessor", name: "accessibilityCurrent", static: !1, private: !1, access: { has: (t) => "accessibilityCurrent" in t, get: (t) => t.accessibilityCurrent, set: (t, p) => {
+    } }, metadata: a }, M, H), _(b, null, N, { kind: "accessor", name: "accessibilityCurrent", static: !1, private: !1, access: { has: (t) => "accessibilityCurrent" in t, get: (t) => t.accessibilityCurrent, set: (t, p) => {
       t.accessibilityCurrent = p;
-    } }, metadata: a }, N, F), _(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: a }, null, n), i = r.value, a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), o(i, n);
+    } }, metadata: a }, F, V), _(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: a }, null, n), i = r.value, a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), o(i, n);
   })(), i;
 })();
-const w = class w extends J {
+const w = class w extends Q {
   constructor() {
     super(...arguments), this.willOpen = new A(this, w.events.willOpen, { cancelable: !0 }), this.didOpen = new A(this, w.events.didOpen, {
       cancelable: !0
@@ -286,10 +286,10 @@ w.events = {
   willClose: "willClose",
   didClose: "didClose"
 };
-let G = w;
+let J = w;
 export {
-  U as SbbActionBaseElement,
-  he as SbbButtonBaseElement,
-  be as SbbLinkBaseElement,
-  G as SbbOpenCloseBaseElement
+  X as SbbActionBaseElement,
+  be as SbbButtonBaseElement,
+  me as SbbLinkBaseElement,
+  J as SbbOpenCloseBaseElement
 };

package/core/controllers/inert-controller.d.ts

@@ -1,16 +1,16 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { SbbOpenCloseBaseElement } from '../base-elements/open-close-base-element.js';
 export declare class SbbInertController implements ReactiveController {
     private _host;
     private _inertElements;
     private _inertOverlays;
-    constructor(_host: ReactiveControllerHost & SbbOpenCloseBaseElement, _inertElements?: Set<HTMLElement>, _inertOverlays?: Set<HTMLElement>);
-    hostConnected(): void;
+    constructor(_host: ReactiveControllerHost & HTMLElement, _inertElements?: Set<HTMLElement>, _inertOverlays?: Set<HTMLElement>);
     hostDisconnected(): void;
     /** Applies inert state to every other element on the page except the overlay. */
     activate(): void;
     /** Removes inert state. */
     deactivate(): void;
+    /** Whether the assigned host is currently inert */
+    isInert(): boolean;
     private _currentOverlay;
     private _removeInertAttributes;
     private _addInertAttributes;

package/core/controllers/inert-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inert-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/inert-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAM3F,qBAAa,kBAAmB,YAAW,kBAAkB;IAEzD,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,cAAc;IACtB,OAAO,CAAC,cAAc;gBAFd,KAAK,EAAE,sBAAsB,GAAG,uBAAuB,EACvD,cAAc,mBAAgB,EAC9B,cAAc,mBAAgB;IAKjC,aAAa,IAAI,IAAI;IAMrB,gBAAgB,IAAI,IAAI;IAM/B,iFAAiF;IAC1E,QAAQ,IAAI,IAAI;IAUvB,2BAA2B;IACpB,UAAU,IAAI,IAAI;IAyBzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,sBAAsB;IAmB9B,OAAO,CAAC,mBAAmB;CA6B5B"}
+{"version":3,"file":"inert-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/inert-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAMtE,qBAAa,kBAAmB,YAAW,kBAAkB;IAEzD,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,cAAc;IACtB,OAAO,CAAC,cAAc;gBAFd,KAAK,EAAE,sBAAsB,GAAG,WAAW,EAC3C,cAAc,mBAAgB,EAC9B,cAAc,mBAAgB;IAKjC,gBAAgB,IAAI,IAAI;IAM/B,iFAAiF;IAC1E,QAAQ,IAAI,IAAI;IAUvB,2BAA2B;IACpB,UAAU,IAAI,IAAI;IAyBzB,mDAAmD;IAC5C,OAAO,IAAI,OAAO;IAIzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,sBAAsB;IAmB9B,OAAO,CAAC,mBAAmB;CA6B5B"}

package/core/controllers.js

@@ -23,11 +23,8 @@ class O {
     var s, n;
     this._host = t, this._inertElements = e, this._inertOverlays = r, (n = (s = this._host).addController) == null || n.call(s, this);
   }
-  hostConnected() {
-    this._host.isOpen && this.activate();
-  }
   hostDisconnected() {
-    this._inertOverlays.has(this._host) && this.deactivate();
+    this.isInert() && this.deactivate();
   }
   /** Applies inert state to every other element on the page except the overlay. */
   activate() {
@@ -41,6 +38,10 @@ class O {
     }
     this._removeInertAttributes(), this._inertOverlays.delete(this._host), this._inertOverlays.size && this._addInertAttributes();
   }
+  /** Whether the assigned host is currently inert */
+  isInert() {
+    return this._inertOverlays.has(this._host);
+  }
   _currentOverlay() {
     return [...this._inertOverlays].pop() ?? null;
   }
@@ -92,8 +93,8 @@ i._defaultLanguage = "en", i._supportedLocales = ["en", "de", "fr", "it"], i._li
   attributeOldValue: !0
 };
 let u = i;
-const _ = (o) => o / v, M = "(forced-colors: active)", k = "(any-hover: hover)", L = "(pointer: coarse)", N = `(min-width: ${_(g)}rem)`, Q = `(max-width: ${_(m)}rem)`, l = /* @__PURE__ */ new Map();
-class H {
+const _ = (o) => o / v, M = "(forced-colors: active)", k = "(any-hover: hover)", I = "(pointer: coarse)", L = `(min-width: ${_(g)}rem)`, N = `(max-width: ${_(m)}rem)`, l = /* @__PURE__ */ new Map();
+class Q {
   constructor(t, e) {
     this._queries = e, t.addController(this);
   }
@@ -132,7 +133,7 @@ a || window.addEventListener("keydown", (o) => {
   var t;
   o.key === "Escape" && !o.defaultPrevented && (o.preventDefault(), (t = b.at(-1)) == null || t.close());
 });
-class I {
+class H {
   constructor(t, e = b) {
     var r, s;
     this._host = t, this._overlayStack = e, (s = (r = this._host).addController) == null || s.call(r, this);
@@ -181,14 +182,14 @@ class D {
 }
 export {
   w as SbbConnectedAbortController,
-  I as SbbEscapableOverlayController,
+  H as SbbEscapableOverlayController,
   O as SbbInertController,
   u as SbbLanguageController,
-  H as SbbMediaMatcherController,
-  N as SbbMediaQueryBreakpointMediumAndAbove,
-  Q as SbbMediaQueryBreakpointSmallAndBelow,
+  Q as SbbMediaMatcherController,
+  L as SbbMediaQueryBreakpointMediumAndAbove,
+  N as SbbMediaQueryBreakpointSmallAndBelow,
   M as SbbMediaQueryForcedColors,
   k as SbbMediaQueryHover,
-  L as SbbMediaQueryPointerCoarse,
+  I as SbbMediaQueryPointerCoarse,
   D as SbbSlotStateController
 };

package/core/decorators/force-type.d.ts

@@ -4,5 +4,5 @@ import { Interface, PropertyDecorator } from './base.js';
  * Decorator that forces the value of a property or getter/setter
  * to the defined type.
  */
-export declare const forceType: <C extends Interface<ReactiveElement>, V>() => PropertyDecorator;
+export declare const forceType: <C extends Interface<ReactiveElement>, V>(convert?: (v: unknown) => V) => PropertyDecorator;
 //# sourceMappingURL=force-type.d.ts.map

package/core/decorators/force-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"force-type.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/decorators/force-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,CAAC,eAAe,CAAC,EAAE,CAAC,OAAK,iBAsCrE,CAAC"}
+{"version":3,"file":"force-type.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/decorators/force-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,CAAC,eAAe,CAAC,EAAE,CAAC,EAC/D,UAAU,CAAC,CAAC,EAAE,OAAO,KAAK,CAAC,KAC1B,iBAwCF,CAAC"}