@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/chip.js

@@ -1,35 +1,54 @@
-import { css as n, LitElement as p, html as h } from "lit";
-import { property as l, customElement as d } from "lit/decorators.js";
-const x = n`*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([color=milk]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-milk)}:host([color=charcoal]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-charcoal)}:host([color=white]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-white)}:host([color=granite]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-granite)}:host([size=xxs]){--sbb-chip-padding-block: 0em;--sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([size=xs]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-padding-block) * 2);background-color:var(--sbb-chip-background-color);padding-inline:var(--sbb-chip-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-color);overflow:hidden}@media (forced-colors: active){.sbb-chip{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (a, b, i, e) => {
-  for (var o = e > 1 ? void 0 : e ? v(b, i) : b, r = a.length - 1, t; r >= 0; r--)
-    (t = a[r]) && (o = (e ? t(b, i, o) : t(o)) || o);
-  return e && o && f(b, i, o), o;
+var y = (e) => {
+  throw TypeError(e);
 };
-let s = class extends p {
-  constructor() {
-    super(...arguments), this.size = "xxs", this.color = "milk";
-  }
-  render() {
-    return h`
+var k = (e, s, t) => s.has(e) || y("Cannot " + t);
+var p = (e, s, t) => (k(e, s, "read from private field"), t ? t.call(e) : s.get(e)), h = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, o) => (k(e, s, "write to private field"), o ? o.call(e, t) : s.set(e, t), t);
+import { __esDecorate as f, __runInitializers as c } from "tslib";
+import { css as S, html as E, LitElement as I } from "lit";
+import { customElement as j, property as w } from "lit/decorators.js";
+const D = S`*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([color=milk]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-milk)}:host([color=charcoal]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-charcoal)}:host([color=white]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-white)}:host([color=granite]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-granite)}:host([size=xxs]){--sbb-chip-padding-block: 0em;--sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([size=xs]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-padding-block) * 2);background-color:var(--sbb-chip-background-color);padding-inline:var(--sbb-chip-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-color);overflow:hidden}@media (forced-colors: active){.sbb-chip{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
+let q = (() => {
+  var b, l, r;
+  let e = [j("sbb-chip")], s, t = [], o, x = I, g, v = [], u = [], m, _ = [], z = [];
+  return r = class extends x {
+    constructor() {
+      super(...arguments);
+      h(this, b, c(this, v, "xxs"));
+      h(this, l, (c(this, u), c(this, _, "milk")));
+      c(this, z);
+    }
+    /** Size of the chip. */
+    get size() {
+      return p(this, b);
+    }
+    set size(a) {
+      d(this, b, a);
+    }
+    /** Color of the chip. */
+    get color() {
+      return p(this, l);
+    }
+    set color(a) {
+      d(this, l, a);
+    }
+    render() {
+      return E`
       <span class="sbb-chip">
         <span class="sbb-chip__text-wrapper">
           <slot></slot>
         </span>
       </span>
     `;
-  }
-};
-s.styles = x;
-c([
-  l({ reflect: !0 })
-], s.prototype, "size", 2);
-c([
-  l({ reflect: !0 })
-], s.prototype, "color", 2);
-s = c([
-  d("sbb-chip")
-], s);
+    }
+  }, b = new WeakMap(), l = new WeakMap(), o = r, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    g = [w({ reflect: !0 })], m = [w({ reflect: !0 })], f(r, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, n) => {
+      i.size = n;
+    } }, metadata: a }, v, u), f(r, null, m, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, n) => {
+      i.color = n;
+    } }, metadata: a }, _, z), f(null, s = { value: o }, e, { kind: "class", name: o.name, metadata: a }, null, t), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), r.styles = D, c(o, t), o;
+})();
 export {
-  s as SbbChipElement
+  q as SbbChipElement
 };

package/clock/clock.d.ts

@@ -9,7 +9,7 @@ export declare class SbbClockElement extends LitElement {
      * Define a specific time which the clock should show statically.
      * @param value HH:MM:ss
      */
-    now: SbbTime | null;
+    accessor now: SbbTime | null;
     /** Reference to the hour hand. */
     private _clockHandHours;
     /** Reference to the minute hand. */

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,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE9C,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;cAExC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQlE,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;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;cAExC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQlE,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"}

package/clock.js

@@ -1,162 +1,154 @@
-import { css as p, LitElement as H, isServer as _, html as g } from "lit";
-import { property as y, customElement as z } from "lit/decorators.js";
-import { ref as r } from "lit/directives/ref.js";
-const f = `<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>
-`, S = `<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>
-`, w = `<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>
-`, L = `<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>
-`, C = 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-zero-time, .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)}}`;
-var E = Object.defineProperty, A = Object.getOwnPropertyDescriptor, k = (t, n, o, s) => {
-  for (var i = s > 1 ? void 0 : s ? A(n, o) : n, e = t.length - 1, a; e >= 0; e--)
-    (a = t[e]) && (i = (s ? a(n, o, i) : a(i)) || i);
-  return s && i && E(n, o, i), i;
+var f = (n) => {
+  throw TypeError(n);
 };
-const O = 12, P = 60, u = 60, T = 50, b = 360, v = 30, N = 6, F = 360 / 58.5, I = 60, x = 3600, M = {
+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, isServer as E, html as I, LitElement as F } from "lit";
+import { customElement as x, property as U } 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-zero-time, .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 = {
   once: !0,
   passive: !0
 };
-let c = class extends H {
-  constructor() {
-    super(...arguments), this.now = null, this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
-      document.visibilityState === "hidden" ? await this._stopClock() : this.now || await this._startClock();
-    };
-  }
-  async willUpdate(t) {
-    super.willUpdate(t), !_ && t.has("now") && await this._startOrConfigureClock();
-  }
-  async firstUpdated(t) {
-    super.firstUpdated(t), _ || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), await this._startOrConfigureClock());
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._removeEventListeners();
-  }
-  async _startOrConfigureClock() {
-    this.now ? (await this._stopClock(), this._resetSecondsHandAnimation(), this._setHandsStartingPosition()) : await this._startClock();
-  }
-  /** Starts the clock by defining the hands starting position then starting the animations. */
-  async _startClock() {
-    var t, n;
-    (t = this._clockHandHours) == null || t.addEventListener(
-      "animationend",
-      this._moveHoursHandFn,
-      M
-    ), (n = this._clockHandSeconds) == null || n.addEventListener(
-      "animationend",
-      this._moveMinutesHandFn,
-      M
-    ), await new Promise(
-      (o) => setTimeout(() => {
-        var s;
-        this._setHandsStartingPosition(), (s = this.style) == null || s.setProperty("--sbb-clock-animation-play-state", "running"), o();
-      }, T)
-    );
-  }
-  /** Stops the clock by removing all the animations. */
-  async _stopClock() {
-    var t, n, o, s;
-    clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (n = this._clockHandSeconds) == null || n.removeEventListener("animationend", this._moveMinutesHandFn), (o = this._clockHandMinutes) == null || o.classList.add("sbb-clock__hand-minutes--no-transition"), (s = this.style) == null || s.setProperty("--sbb-clock-animation-play-state", "paused");
-  }
-  /** Set the starting position for the three hands on the clock face. */
-  _setHandsStartingPosition() {
-    var e, a, l, d, h, m;
-    this._assignCurrentTime();
-    const t = u - this._seconds, n = P - this._minutes, o = O - this._hours;
-    let s = 0, i = 0;
-    t > 0 && (s += t, i = 1), n > 0 && (s += (n - i) * I, i = 1), o > 0 && (s += (o - i) * x), (e = this.style) == null || e.setProperty(
-      "--sbb-clock-hours-animation-start-angle",
-      `${Math.ceil(this._hours * v + this._minutes / 2)}deg`
-    ), (a = this.style) == null || a.setProperty("--sbb-clock-hours-animation-duration", `${s}s`), (l = this.style) == null || l.setProperty(
-      "--sbb-clock-seconds-animation-start-angle",
-      `${Math.ceil(this._seconds * F)}deg`
-    ), (d = this.style) == null || d.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), (h = this._clockHandSeconds) == null || h.classList.add("sbb-clock__hand-seconds--initial-minute"), (m = this._clockHandHours) == null || m.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() {
-    const t = this.now ? null : /* @__PURE__ */ new Date(), [n, o, s] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((i) => +i);
-    this._hours = n % 12, this._minutes = o, this._seconds = s;
-  }
-  /** Set the starting position for the minutes hand. */
-  _setMinutesHand() {
-    var t;
-    (t = this._clockHandMinutes) == null || t.style.setProperty(
-      "transform",
-      `rotateZ(${Math.ceil(this._minutes * N)}deg)`
-    );
-  }
-  /** Move the hours hand to the next value. */
-  _moveHoursHand() {
-    var n;
-    this._removeHoursAnimationStyles();
-    let t = Math.ceil(this._hours * v + this._minutes / 2);
-    t >= b && (t -= b), (n = this._clockHandHours) == null || n.style.setProperty("transform", `rotateZ(${t}deg)`);
-  }
-  /** Move the minutes hand to the next value. */
-  _moveMinutesHand() {
-    var t;
-    (t = this._clockHandSeconds) == null || t.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(
-      () => this._addMinutesAndSetHands(),
-      u * 1e3
-    );
-  }
-  _addMinutesAndSetHands() {
-    this._minutes++, this._setMinutesHand();
-  }
-  /**
-   * Removing animation by overriding with empty string,
-   * then triggering a reflow and re add original animation by removing override.
-   * @private
-   */
-  _resetSecondsHandAnimation() {
-    this._clockHandSeconds && (this._clockHandSeconds.style.animation = "", this._clockHandSeconds.offsetHeight, this._clockHandSeconds.style.removeProperty("animation"));
-  }
-  _removeEventListeners() {
-    var t, n;
-    document == null || document.removeEventListener("visibilitychange", this._handlePageVisibilityChange), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (n = this._clockHandSeconds) == null || n.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
-  }
-  _removeHoursAnimationStyles() {
-    var t;
-    (t = this._clockHandHours) == null || t.classList.remove("sbb-clock__hand-hours--initial-hour"), this.style.removeProperty("--sbb-clock-hours-animation-start-angle"), this.style.removeProperty("--sbb-clock-hours-animation-duration");
-  }
-  _removeSecondsAnimationStyles() {
-    var t, n;
-    (t = this._clockHandSeconds) == null || t.classList.remove("sbb-clock__hand-seconds--initial-minute"), (n = this._clockHandMinutes) == null || n.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 g`
+let it = (() => {
+  var r, l;
+  let n = [x("sbb-clock")], i, e = [], c, u = F, b, v = [], k = [];
+  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 () => {
+        document.visibilityState === "hidden" ? await this._stopClock() : this.now || await this._startClock();
+      };
+    }
+    /**
+     * Define a specific time which the clock should show statically.
+     * @param value HH:MM:ss
+     */
+    get now() {
+      return w(this, r);
+    }
+    set now(t) {
+      h(this, r, t);
+    }
+    async willUpdate(t) {
+      super.willUpdate(t), !E && t.has("now") && await this._startOrConfigureClock();
+    }
+    async firstUpdated(t) {
+      super.firstUpdated(t), E || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), await this._startOrConfigureClock());
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._removeEventListeners();
+    }
+    async _startOrConfigureClock() {
+      this.now ? (await this._stopClock(), this._resetSecondsHandAnimation(), this._setHandsStartingPosition()) : await this._startClock();
+    }
+    /** 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(() => {
+        var a;
+        this._setHandsStartingPosition(), (a = this.style) == null || a.setProperty("--sbb-clock-animation-play-state", "running"), o();
+      }, j));
+    }
+    /** 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");
+    }
+    /** Set the starting position for the three hands on the clock face. */
+    _setHandsStartingPosition() {
+      var M, H, g, p, y, z;
+      this._assignCurrentTime();
+      const t = A - this._seconds, s = K - this._minutes, o = R - 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);
+    }
+    /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
+    _assignCurrentTime() {
+      const t = this.now ? null : /* @__PURE__ */ new Date(), [s, o, a] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((d) => +d);
+      this._hours = s % 12, this._minutes = o, this._seconds = a;
+    }
+    /** 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)`);
+    }
+    /** Move the hours hand to the next value. */
+    _moveHoursHand() {
+      var s;
+      this._removeHoursAnimationStyles();
+      let t = Math.ceil(this._hours * T + this._minutes / 2);
+      t >= O && (t -= O), (s = this._clockHandHours) == null || s.style.setProperty("transform", `rotateZ(${t}deg)`);
+    }
+    /** Move the minutes hand to the next value. */
+    _moveMinutesHand() {
+      var t;
+      (t = this._clockHandSeconds) == null || t.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), A * 1e3);
+    }
+    _addMinutesAndSetHands() {
+      this._minutes++, this._setMinutesHand();
+    }
+    /**
+     * Removing animation by overriding with empty string,
+     * then triggering a reflow and re add original animation by removing override.
+     * @private
+     */
+    _resetSecondsHandAnimation() {
+      this._clockHandSeconds && (this._clockHandSeconds.style.animation = "", this._clockHandSeconds.offsetHeight, this._clockHandSeconds.style.removeProperty("animation"));
+    }
+    _removeEventListeners() {
+      var t, s;
+      document == null || document.removeEventListener("visibilitychange", this._handlePageVisibilityChange), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
+    }
+    _removeHoursAnimationStyles() {
+      var t;
+      (t = this._clockHandHours) == null || t.classList.remove("sbb-clock__hand-hours--initial-hour"), this.style.removeProperty("--sbb-clock-hours-animation-start-angle"), this.style.removeProperty("--sbb-clock-hours-animation-duration");
+    }
+    _removeSecondsAnimationStyles() {
+      var t, s;
+      (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 I`
       <div class="sbb-clock">
-        <span class="sbb-clock__face" .innerHTML=${f}></span>
+        <span class="sbb-clock__face" .innerHTML=${$}></span>
         <span
           class="sbb-clock__hand-hours"
-          .innerHTML=${S}
-          ${r((t) => {
-      this._clockHandHours = t;
-    })}
+          .innerHTML=${D}
+          ${_((t) => {
+        this._clockHandHours = t;
+      })}
         ></span>
         <span
           class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-          .innerHTML=${w}
-          ${r((t) => {
-      this._clockHandMinutes = t;
-    })}
+          .innerHTML=${V}
+          ${_((t) => {
+        this._clockHandMinutes = t;
+      })}
         ></span>
         <span
           class="sbb-clock__hand-seconds"
-          .innerHTML=${L}
-          ${r((t) => {
-      this._clockHandSeconds = t;
-    })}
+          .innerHTML=${G}
+          ${_((t) => {
+        this._clockHandSeconds = t;
+      })}
         ></span>
       </div>
     `;
-  }
-};
-c.styles = C;
-k([
-  y()
-], c.prototype, "now", 2);
-c = k([
-  z("sbb-clock")
-], c);
+    }
+  }, 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) => {
+      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;
+})();
 export {
-  c as SbbClockElement
+  it as SbbClockElement
 };

package/container/container/container.d.ts

@@ -9,11 +9,11 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
 export declare class SbbContainerElement extends LitElement {
     static styles: CSSResultGroup;
     /** Whether the container is expanded. */
-    expanded: boolean;
+    accessor expanded: boolean;
     /** Whether the background color is shown on full container width on large screens. */
-    backgroundExpanded: boolean;
+    accessor backgroundExpanded: boolean;
     /** Color of the container, like transparent, white etc. */
-    color: 'transparent' | 'white' | 'milk';
+    accessor color: 'transparent' | 'white' | 'milk';
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }

package/container/container/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;GAMG;AACH,qBAEa,mBAAoB,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,yCAAyC;IACU,QAAQ,UAAS;IAEpE,sFAAsF;IAE/E,kBAAkB,UAAS;IAElC,2DAA2D;IACvB,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,CAAW;cAEnE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;GAMG;AACH,qBAGM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,yCAAyC;IACzC,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,sFAAsF;IACtF,SAEgB,kBAAkB,EAAE,OAAO,CAAS;IAEpD,2DAA2D;IAC3D,SAA6C,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,CAAW;cAE5E,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/container/container.js

@@ -1,22 +1,51 @@
-import { css as l, LitElement as c, html as p } from "lit";
-import { property as d, customElement as g } from "lit/decorators.js";
-import { slotState as m } from "../core/decorators.js";
-const u = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host([data-slot-names~=image]){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host([data-slot-names~=image][background-expanded]){position:relative}.sbb-container{background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}:host([data-slot-names~=image]:not([background-expanded])) .sbb-container{position:relative}:host([data-slot-names~=image]) .sbb-container__content{position:relative}::slotted([slot=image]){--sbb-image-border-radius: 0;position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 90rem){:host(:not([expanded],[background-expanded])) ::slotted([slot=image]){--sbb-image-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-border-radius-4x)}}::slotted(img[slot=image]){object-fit:cover;height:100%;width:100%}`;
-var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (r, e, t, n) => {
-  for (var o = n > 1 ? void 0 : n ? v(e, t) : e, i = r.length - 1, b; i >= 0; i--)
-    (b = r[i]) && (o = (n ? b(e, t, o) : b(o)) || o);
-  return n && o && h(e, t, o), o;
+var I = (t) => {
+  throw TypeError(t);
 };
-let a = class extends c {
-  constructor() {
-    super(...arguments), this.expanded = !1, this.backgroundExpanded = !1, this.color = "white";
-  }
-  willUpdate(r) {
-    var e, t;
-    super.willUpdate(r), r.has("expanded") && ((t = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || t.toggleAttribute("data-expanded", this.expanded));
-  }
-  render() {
-    return p`
+var j = (t, a, s) => a.has(t) || I("Cannot " + s);
+var p = (t, a, s) => (j(t, a, "read from private field"), s ? s.call(t) : a.get(t)), u = (t, a, s) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), m = (t, a, s, r) => (j(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
+import { __esDecorate as g, __runInitializers as d } from "tslib";
+import { css as T, html as U, LitElement as B } from "lit";
+import { customElement as O, property as h } from "lit/decorators.js";
+import { slotState as q, forceType as D } from "../core/decorators.js";
+const A = T`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host([data-slot-names~=image]){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host([data-slot-names~=image][background-expanded]){position:relative}.sbb-container{background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}:host([data-slot-names~=image]:not([background-expanded])) .sbb-container{position:relative}:host([data-slot-names~=image]) .sbb-container__content{position:relative}::slotted([slot=image]){--sbb-image-border-radius: 0;position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 90rem){:host(:not([expanded],[background-expanded])) ::slotted([slot=image]){--sbb-image-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-border-radius-4x)}}::slotted(img[slot=image]){object-fit:cover;height:100%;width:100%}`;
+let K = (() => {
+  var l, c, b, n;
+  let t = [O("sbb-container"), q()], a, s = [], r, x = B, _, f = [], k = [], v, y = [], E = [], w, z = [], S = [];
+  return n = class extends x {
+    constructor() {
+      super(...arguments);
+      u(this, l, d(this, f, !1));
+      u(this, c, (d(this, k), d(this, y, !1)));
+      u(this, b, (d(this, E), d(this, z, "white")));
+      d(this, S);
+    }
+    /** Whether the container is expanded. */
+    get expanded() {
+      return p(this, l);
+    }
+    set expanded(o) {
+      m(this, l, o);
+    }
+    /** Whether the background color is shown on full container width on large screens. */
+    get backgroundExpanded() {
+      return p(this, c);
+    }
+    set backgroundExpanded(o) {
+      m(this, c, o);
+    }
+    /** Color of the container, like transparent, white etc. */
+    get color() {
+      return p(this, b);
+    }
+    set color(o) {
+      m(this, b, o);
+    }
+    willUpdate(o) {
+      var e, i;
+      super.willUpdate(o), o.has("expanded") && ((i = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || i.toggleAttribute("data-expanded", this.expanded));
+    }
+    render() {
+      return U`
       <div class="sbb-container">
         <slot name="image"></slot>
         <div class="sbb-container__content">
@@ -25,22 +54,18 @@ let a = class extends c {
       </div>
       <slot name="sticky-bar"></slot>
     `;
-  }
-};
-a.styles = u;
-s([
-  d({ type: Boolean, reflect: !0 })
-], a.prototype, "expanded", 2);
-s([
-  d({ type: Boolean, reflect: !0, attribute: "background-expanded" })
-], a.prototype, "backgroundExpanded", 2);
-s([
-  d({ reflect: !0 })
-], a.prototype, "color", 2);
-a = s([
-  g("sbb-container"),
-  m()
-], a);
+    }
+  }, l = new WeakMap(), c = new WeakMap(), b = new WeakMap(), r = n, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    _ = [D(), h({ type: Boolean, reflect: !0 })], v = [D(), h({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [h({ reflect: !0 })], g(n, null, _, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, i) => {
+      e.expanded = i;
+    } }, metadata: o }, f, k), g(n, null, v, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, i) => {
+      e.backgroundExpanded = i;
+    } }, metadata: o }, y, E), g(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, i) => {
+      e.color = i;
+    } }, metadata: o }, z, S), g(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: o }, null, s), r = a.value, o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), n.styles = A, d(r, s), r;
+})();
 export {
-  a as SbbContainerElement
+  K as SbbContainerElement
 };

package/container/sticky-bar/sticky-bar.d.ts

@@ -13,7 +13,7 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
 export declare class SbbStickyBarElement extends LitElement {
     static styles: CSSResultGroup;
     /** Color of the container, like transparent, white etc. */
-    color?: 'white' | 'milk';
+    accessor color: 'white' | 'milk' | null;
     private _intersector?;
     private _observer;
     connectedCallback(): void;

package/container/sticky-bar/sticky-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;;;;;GAUG;AACH,qBAIa,mBAAoB,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,2DAA2D;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE7D,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;cAYtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,uBAAuB;cAOZ,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;;;;;GAUG;AACH,qBAKM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,2DAA2D;IAC3D,SAA6C,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAQ;IAEnF,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;cAYtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,uBAAuB;cAOZ,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}