@sbb-esta/lyne-elements 1.4.0 → 1.6.0

package/alert/alert/alert.d.ts

@@ -1,16 +1,18 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { LinkTargetType } from '../../core/base-elements.js';
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { LinkTargetType, SbbOpenCloseBaseElement } from '../../core/base-elements.js';
 import { SbbTitleLevel } from '../../title.js';
 
-declare const SbbAlertElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
+declare const SbbAlertElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays messages which require user's attention.
  *
  * @slot - Use the unnamed slot to add content to the `sbb-alert`.
  * @slot icon - Should be a `sbb-icon` which is displayed next to the title. Styling is optimized for icons of type HIM-CUS.
  * @slot title - Title content.
- * @event {CustomEvent<void>} willOpen - Emits when the fade in animation starts.
- * @event {CustomEvent<void>} didOpen - Emits when the fade in animation ends and the button is displayed.
+ * @event {CustomEvent<void>} willOpen - Emits when the opening animation starts.
+ * @event {CustomEvent<void>} didOpen - Emits when the opening animation ends.
+ * @event {CustomEvent<void>} willClose - Emits when the closing animation starts. Can be canceled.
+ * @event {CustomEvent<void>} didClose - Emits when the closing animation ends.
  * @event {CustomEvent<void>} dismissalRequested - Emits when dismissal of an alert was requested.
  */
 export declare class SbbAlertElement extends SbbAlertElement_base {
@@ -18,6 +20,8 @@ export declare class SbbAlertElement extends SbbAlertElement_base {
     static readonly events: {
         readonly willOpen: "willOpen";
         readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
         readonly dismissalRequested: "dismissalRequested";
     };
     /**
@@ -48,23 +52,25 @@ export declare class SbbAlertElement extends SbbAlertElement_base {
     /** This will be forwarded as aria-label to the relevant nested element. */
     accessibilityLabel: string | undefined;
     /** The enabled animations. */
-    animation: 'open' | 'none';
-    /** The state of the alert. */
-    private get _state();
-    private set _state(value);
-    /** Emits when the fade in animation starts. */
-    private _willOpen;
-    /** Emits when the fade in animation ends and the button is displayed. */
-    private _didOpen;
-    /** Emits when dismissal of an alert was requested. */
+    animation: 'open' | 'close' | 'all' | 'none';
+    /**
+     * Emits when dismissal of an alert was requested.
+     * @deprecated
+     */
     private _dismissalRequested;
     private _language;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
-    /** Requests dismissal of the alert. */
+    /** Requests dismissal of the alert.
+     * @deprecated in favour of 'willClose' and 'didClose' events
+     */
     requestDismissal(): void;
     /** Open the alert. */
-    private _open;
+    open(): void;
+    /** Close the alert. */
+    close(): void;
     private _onAnimationEnd;
+    private _handleOpening;
+    private _handleClosing;
     protected render(): TemplateResult;
 }
 declare global {

package/alert/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAMlE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;;AAIxB;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,oBAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mDAAmD;IACf,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAO;IAEhE;;;;OAIG;IACmD,QAAQ,EAAE,MAAM,CAAU;IAEhF,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,sFAAsF;IACvC,UAAU,EAAE,aAAa,CAAO;IAE/E,2BAA2B;IACqB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,0CAA0C;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5C,uCAAuC;IACpB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;IAE/D,wEAAwE;IACrD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3C,2EAA2E;IACpB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,MAAM,CAAU;IAExE,8BAA8B;IAC9B,OAAO,KAAK,MAAM,GAEjB;IACD,OAAO,KAAK,MAAM,QAEjB;IAED,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAA+E;IAEhG,yEAAyE;IACzE,OAAO,CAAC,QAAQ,CAA8E;IAE9F,sDAAsD;IACtD,OAAO,CAAC,mBAAmB,CAGzB;IAEF,OAAO,CAAC,SAAS,CAAmC;cAE3B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAM7F,uCAAuC;IAChC,gBAAgB,IAAI,IAAI;IAI/B,sBAAsB;IACtB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,eAAe;cAOJ,MAAM,IAAI,cAAc;CAqD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnG,OAAO,EAAE,KAAK,cAAc,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAK3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;;AAExB;;;;;;;;;;;GAWG;AACH,qBACa,eAAgB,SAAQ,oBAAyC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mDAAmD;IACf,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAO;IAEhE;;;;OAIG;IACmD,QAAQ,EAAE,MAAM,CAAU;IAEhF,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,sFAAsF;IACvC,UAAU,EAAE,aAAa,CAAO;IAE/E,2BAA2B;IACqB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,0CAA0C;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5C,uCAAuC;IACpB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;IAE/D,wEAAwE;IACrD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3C,2EAA2E;IACpB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAEzF;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAGzB;IAEF,OAAO,CAAC,SAAS,CAAmC;cAE3B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAM7F;;OAEG;IACI,gBAAgB,IAAI,IAAI;IAI/B,sBAAsB;IACf,IAAI,IAAI,IAAI;IAKnB,uBAAuB;IAChB,KAAK,IAAI,IAAI;IAMpB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;cAMH,MAAM,IAAI,cAAc;CAqD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/alert/alert-group/alert-group.d.ts

@@ -34,8 +34,8 @@ export declare class SbbAlertGroupElement extends SbbAlertGroupElement_base {
     /** Emits when `sbb-alert-group` becomes empty. */
     private _empty;
     private _abort;
-    private _removeAlert;
     connectedCallback(): void;
+    private _alertClosed;
     private _slotChanged;
     protected render(): TemplateResult;
 }

package/alert/alert-group/alert-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert-group/alert-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAO1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAKpD;;;;;;;GAOG;AACH,qBACa,oBAAqB,SAAQ,yBAA6B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IAEa,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAY;IAE7D,gFAAgF;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,wGAAwG;IAEjG,uBAAuB,EAAE,aAAa,CAAO;IAEpD,kDAAkD;IACzC,OAAO,CAAC,UAAU,CAAC,CAAU;IAEtC,gDAAgD;IAChD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,kDAAkD;IAClD,OAAO,CAAC,MAAM,CAAiF;IAE/F,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,YAAY;IAoBJ,iBAAiB,IAAI,IAAI;IAQzC,OAAO,CAAC,YAAY;cAaD,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"alert-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert-group/alert-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAO1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAKpD;;;;;;;GAOG;AACH,qBACa,oBAAqB,SAAQ,yBAA6B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IAEa,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAY;IAE7D,gFAAgF;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,wGAAwG;IAEjG,uBAAuB,EAAE,aAAa,CAAO;IAEpD,kDAAkD;IACzC,OAAO,CAAC,UAAU,CAAC,CAAU;IAEtC,gDAAgD;IAChD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,kDAAkD;IAClD,OAAO,CAAC,MAAM,CAAiF;IAE/F,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;IAezC,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,YAAY;cAaD,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/alert/alert-group.js

@@ -1,37 +1,42 @@
-import { css as h, LitElement as m, nothing as u } from "lit";
-import { property as b, state as f, customElement as v } from "lit/decorators.js";
-import { html as c, unsafeStatic as p } from "lit/static-html.js";
-import { SbbConnectedAbortController as g } from "../core/controllers.js";
-import { EventEmitter as d } from "../core/eventing.js";
-import { SbbHydrationMixin as _ } from "../core/mixins.js";
-import { SbbAlertElement as y } from "./alert.js";
-const A = h`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var x = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
-  for (var o = r > 1 ? void 0 : r ? E(t, i) : t, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (o = (r ? n(t, i, o) : n(o)) || o);
-  return r && o && x(t, i, o), o;
+import { css as u, LitElement as m, nothing as f } from "lit";
+import { property as b, state as g, customElement as v } from "lit/decorators.js";
+import { html as c, unsafeStatic as d } from "lit/static-html.js";
+import { SbbConnectedAbortController as _ } from "../core/controllers.js";
+import { EventEmitter as p } from "../core/eventing.js";
+import { SbbHydrationMixin as y } from "../core/mixins.js";
+import { SbbAlertElement as h } from "./alert.js";
+const A = u`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var x = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? E(t, i) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = (o ? n(t, i, r) : n(r)) || r);
+  return o && r && x(t, i, r), r;
 };
-let s = class extends _(m) {
+let s = class extends y(m) {
   constructor() {
-    super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this._didDismissAlert = new d(
+    super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this._didDismissAlert = new p(
       this,
       s.events.didDismissAlert
-    ), this._empty = new d(this, s.events.empty), this._abort = new g(this);
-  }
-  _removeAlert(e) {
-    var r;
-    const t = e.target, i = document.activeElement === t;
-    (r = t.parentNode) == null || r.removeChild(t), this._didDismissAlert.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
-      once: !0
-    }));
+    ), this._empty = new p(this, s.events.empty), this._abort = new _(this);
   }
   connectedCallback() {
     super.connectedCallback();
     const e = this._abort.signal;
-    this.addEventListener(y.events.dismissalRequested, (t) => this._removeAlert(t), {
+    this.addEventListener(
+      h.events.dismissalRequested,
+      (t) => t.target.close(),
+      {
+        signal: e
+      }
+    ), this.addEventListener(h.events.didClose, (t) => this._alertClosed(t), {
       signal: e
     });
   }
+  _alertClosed(e) {
+    const t = e.target, i = document.activeElement === t;
+    this._didDismissAlert.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
+      once: !0
+    }));
+  }
   _slotChanged(e) {
     const t = this._hasAlerts;
     this._hasAlerts = e.target.assignedElements().filter((i) => i instanceof Element && i.localName === "sbb-alert").length > 0, !this._hasAlerts && t && this._empty.emit(), this.toggleAttribute("data-empty", !this._hasAlerts);
@@ -40,9 +45,9 @@ let s = class extends _(m) {
     const e = `h${this.accessibilityTitleLevel}`;
     return c`
       <div class="sbb-alert-group">
-        ${this._hasAlerts ? c`<${p(e)} class="sbb-alert-group__title">
+        ${this._hasAlerts ? c`<${d(e)} class="sbb-alert-group__title">
               <slot name="accessibility-title">${this.accessibilityTitle}</slot>
-            </${p(e)}>` : u}
+            </${d(e)}>` : f}
         <slot @slotchange=${(t) => this._slotChanged(t)}></slot>
       </div>
     `;
@@ -63,7 +68,7 @@ l([
   b({ attribute: "accessibility-title-level" })
 ], s.prototype, "accessibilityTitleLevel", 2);
 l([
-  f()
+  g()
 ], s.prototype, "_hasAlerts", 2);
 s = l([
   v("sbb-alert-group")

package/alert/alert.js

@@ -1,49 +1,55 @@
-import { css as m, LitElement as v, html as d, nothing as r } from "lit";
-import { property as i, customElement as h } from "lit/decorators.js";
-import { SbbLanguageController as u } from "../core/controllers.js";
-import { EventEmitter as c } from "../core/eventing.js";
-import { i18nFindOutMore as g, i18nCloseAlert as _ } from "../core/i18n.js";
-import { SbbIconNameMixin as f } from "../icon.js";
+import { css as m, html as p, nothing as n } from "lit";
+import { property as i, customElement as c } from "lit/decorators.js";
+import { SbbOpenCloseBaseElement as g } from "../core/base-elements.js";
+import { SbbLanguageController as h } from "../core/controllers.js";
+import { EventEmitter as u } from "../core/eventing.js";
+import { i18nFindOutMore as v, i18nCloseAlert as f } from "../core/i18n.js";
+import { SbbIconNameMixin as _ } from "../icon.js";
 import "../button/transparent-button.js";
 import "../divider.js";
 import "../link.js";
 import "../title.js";
-const y = m`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );display:block}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([animation=none]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:ease-in;animation-delay:0s,var(--sbb-alert-animation-duration)}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}`;
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (s, n, l, o) => {
-  for (var a = o > 1 ? void 0 : o ? x(n, l) : n, b = s.length - 1, p; b >= 0; b--)
-    (p = s[b]) && (a = (o ? p(n, l, a) : p(a)) || a);
-  return o && a && w(n, l, a), a;
+const y = m`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-alert-timing-function: ease-in;display:block}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host(:is([data-state=opened],[data-state=closing])) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host([data-state=closing]) .sbb-alert__transition-wrapper{animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}`;
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (s, r, l, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(r, l) : r, b = s.length - 1, d; b >= 0; b--)
+    (d = s[b]) && (a = (o ? d(r, l, a) : d(a)) || a);
+  return o && a && w(r, l, a), a;
 };
-let t = class extends f(v) {
+let t = class extends _(g) {
   constructor() {
-    super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "open", this._willOpen = new c(this, t.events.willOpen), this._didOpen = new c(this, t.events.didOpen), this._dismissalRequested = new c(
+    super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "all", this._dismissalRequested = new u(
       this,
       t.events.dismissalRequested
-    ), this._language = new u(this);
-  }
-  /** The state of the alert. */
-  get _state() {
-    return this.getAttribute("data-state") ?? "closed";
-  }
-  set _state(s) {
-    this.setAttribute("data-state", s);
+    ), this._language = new h(this);
   }
   async firstUpdated(s) {
-    super.firstUpdated(s), this._open();
+    super.firstUpdated(s), this.open();
   }
-  /** Requests dismissal of the alert. */
+  /** Requests dismissal of the alert.
+   * @deprecated in favour of 'willClose' and 'didClose' events
+   */
   requestDismissal() {
     this._dismissalRequested.emit();
   }
   /** Open the alert. */
-  _open() {
-    this._state = "opening", this._willOpen.emit();
+  open() {
+    this.willOpen.emit(), this.state = "opening";
+  }
+  /** Close the alert. */
+  close() {
+    this.willClose.emit() && (this.state = "closing");
   }
   _onAnimationEnd(s) {
-    this._state === "opening" && s.animationName === "open-opacity" && (this._state = "opened", this._didOpen.emit());
+    this.state === "opening" && s.animationName === "open-opacity" ? this._handleOpening() : this.state === "closing" && s.animationName === "close" && this._handleClosing();
+  }
+  _handleOpening() {
+    this.state = "opened", this.didOpen.emit();
+  }
+  _handleClosing() {
+    this.state = "closed", this.didClose.emit(), setTimeout(() => this.remove());
   }
   render() {
-    return d`
+    return p`
       <div class="sbb-alert__transition-wrapper" @animationend=${this._onAnimationEnd}>
         <!-- sub wrapper needed to properly support fade in animation -->
         <div class="sbb-alert__transition-sub-wrapper">
@@ -61,17 +67,17 @@ let t = class extends f(v) {
               <p class="sbb-alert__content-slot">
                 <slot></slot>
               </p>
-              ${this.href ? d` <sbb-link
-                    accessibility-label=${this.accessibilityLabel ?? r}
-                    href=${this.href ?? r}
-                    target=${this.target ?? r}
-                    rel=${this.rel ?? r}
+              ${this.href ? p` <sbb-link
+                    accessibility-label=${this.accessibilityLabel ?? n}
+                    href=${this.href ?? n}
+                    target=${this.target ?? n}
+                    rel=${this.rel ?? n}
                     negative
                   >
-                    ${this.linkContent ? this.linkContent : g[this._language.current]}
-                  </sbb-link>` : r}
+                    ${this.linkContent ? this.linkContent : v[this._language.current]}
+                  </sbb-link>` : n}
             </span>
-            ${this.readonly ? r : d`<span class="sbb-alert__close-button-wrapper">
+            ${this.readonly ? n : p`<span class="sbb-alert__close-button-wrapper">
                   <sbb-divider
                     orientation="vertical"
                     negative
@@ -82,7 +88,7 @@ let t = class extends f(v) {
                     size=${this.size === "l" ? "m" : this.size}
                     icon-name="cross-small"
                     @click=${() => this.requestDismissal()}
-                    aria-label=${_[this._language.current]}
+                    aria-label=${f[this._language.current]}
                     class="sbb-alert__close-button"
                   ></sbb-transparent-button>
                 </span>`}
@@ -96,6 +102,8 @@ t.styles = y;
 t.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
+  willClose: "willClose",
+  didClose: "didClose",
   dismissalRequested: "dismissalRequested"
 };
 e([
@@ -132,7 +140,7 @@ e([
   i({ reflect: !0 })
 ], t.prototype, "animation", 2);
 t = e([
-  h("sbb-alert")
+  c("sbb-alert")
 ], t);
 export {
   t as SbbAlertElement

package/checkbox/checkbox/checkbox.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
 import { SbbIconPlacement } from '../../core/interfaces.js';
+import { SbbCheckboxSize } from '../common.js';
 
 declare const SbbCheckboxElement_base: import('../../core/mixins.js').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
 /**
@@ -16,6 +17,10 @@ export declare class SbbCheckboxElement extends SbbCheckboxElement_base {
     static readonly events: {
         readonly didChange: "didChange";
     };
+    /** Size variant. */
+    set size(value: SbbCheckboxSize);
+    get size(): SbbCheckboxSize;
+    private _size;
     /** The label position relative to the labelIcon. Defaults to end */
     iconPlacement: SbbIconPlacement;
     protected render(): TemplateResult;

package/checkbox/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAMjE,OAAO,0BAA0B,CAAC;;AAElC;;;;;;;;GAQG;AACH,qBAEa,kBAAmB,SAAQ,uBAEvC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAwC;IAErF,gBAAuB,MAAM;;MAElB;IAEX,oEAAoE;IAE7D,aAAa,EAAE,gBAAgB,CAAS;cAE5B,MAAM,IAAI,cAAc;CAuB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAItB,OAAO,0BAA0B,CAAC;;AAElC;;;;;;;;GAQG;AACH,qBAEa,kBAAmB,SAAQ,uBAEvC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAwC;IAErF,gBAAuB,MAAM;;MAElB;IAEX,oBAAoB;IACpB,IACW,IAAI,CAAC,KAAK,EAAE,eAAe,EAErC;IACD,IAAW,IAAI,IAAI,eAAe,CAEjC;IACD,OAAO,CAAC,KAAK,CAAwB;IAErC,oEAAoE;IAE7D,aAAa,EAAE,gBAAgB,CAAS;cAE5B,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/checkbox/checkbox-panel/checkbox-panel.d.ts

@@ -1,6 +1,7 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { EventEmitter } from '../../core/eventing.js';
 import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '../../core/interfaces/types.js';
+import { SbbPanelSize } from '../../core/mixins.js';
 
 export type SbbCheckboxPanelStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
 declare const SbbCheckboxPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbPanelMixinType> & import('../../core/mixins.js').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
@@ -22,6 +23,10 @@ export declare class SbbCheckboxPanelElement extends SbbCheckboxPanelElement_bas
         readonly stateChange: "stateChange";
         readonly panelConnected: "panelConnected";
     };
+    /** Size variant. */
+    set size(value: SbbPanelSize);
+    get size(): SbbPanelSize;
+    private _size;
     /**
      * @internal
      * Internal event that emits whenever the state of the checkbox

package/checkbox/checkbox-panel/checkbox-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox-panel/checkbox-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,gCAAgC,CAAC;AAIxC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAC/C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;;GAUG;AACH,qBAEa,uBAAwB,SAAQ,4BAE5C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA2C;IAGxF,gBAAuB,MAAM;;;;MAIlB;IAEX;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAI9D;cAEuB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAkBxE,MAAM,IAAI,cAAc;CA8B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"checkbox-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox-panel/checkbox-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAC/C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;;GAUG;AACH,qBAEa,uBAAwB,SAAQ,4BAE5C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA2C;IAGxF,gBAAuB,MAAM;;;;MAIlB;IAEX,oBAAoB;IACpB,IACW,IAAI,CAAC,KAAK,EAAE,YAAY,EAElC;IACD,IAAW,IAAI,IAAI,YAAY,CAE9B;IACD,OAAO,CAAC,KAAK,CAAqB;IAElC;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAI9D;cAEuB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAkBxE,MAAM,IAAI,cAAc;CA8B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/checkbox/checkbox-panel.js

@@ -1,31 +1,38 @@
-import { LitElement as o, html as c, nothing as h } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { slotState as r } from "../core/decorators.js";
-import { EventEmitter as p } from "../core/eventing.js";
-import { SbbPanelMixin as m, SbbUpdateSchedulerMixin as x, panelCommonStyle as f } from "../core/mixins.js";
-import { SbbCheckboxCommonElementMixin as k, checkboxCommonStyle as u } from "./common.js";
+import { LitElement as h, html as o, nothing as r } from "lit";
+import { property as p, customElement as d } from "lit/decorators.js";
+import { slotState as m } from "../core/decorators.js";
+import { EventEmitter as u } from "../core/eventing.js";
+import { SbbPanelMixin as x, SbbUpdateSchedulerMixin as f, panelCommonStyle as g } from "../core/mixins.js";
+import { SbbCheckboxCommonElementMixin as _, checkboxCommonStyle as k } from "./common.js";
 import "../screen-reader-only.js";
 import "../visual-checkbox.js";
-var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, g = (e, a, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? _(a, i) : a, b = e.length - 1, l; b >= 0; b--)
-    (l = e[b]) && (s = (n ? l(a, i, s) : l(s)) || s);
-  return n && s && C(a, i, s), s;
+var C = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, i, n, a) => {
+  for (var s = a > 1 ? void 0 : a ? v(i, n) : i, l = e.length - 1, b; l >= 0; l--)
+    (b = e[l]) && (s = (a ? b(i, n, s) : b(s)) || s);
+  return a && s && C(i, n, s), s;
 };
-let t = class extends m(
-  k(x(o))
+let t = class extends x(
+  _(f(h))
 ) {
   constructor() {
-    super(...arguments), this.stateChange = new p(
+    super(...arguments), this._size = "m", this.stateChange = new u(
       this,
       t.events.stateChange,
       { bubbles: !0 }
     );
   }
+  set size(e) {
+    this._size = e;
+  }
+  get size() {
+    var e;
+    return (e = this.group) != null && e.size ? this.group.size === "xs" ? "s" : this.group.size : this._size;
+  }
   async willUpdate(e) {
     super.willUpdate(e), e.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== e.get("checked") && this.stateChange.emit({ type: "checked", checked: this.checked })), e.has("disabled") && this.disabled !== e.get("disabled") && this.stateChange.emit({ type: "disabled", disabled: this.disabled });
   }
   render() {
-    return c`
+    return o`
       <span class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -46,22 +53,25 @@ let t = class extends m(
               </span>
             </span>
             <slot name="subtext"></slot>
-            ${this.expansionState ? c`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : h}
+            ${this.expansionState ? o`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : r}
           </span>
         </span>
       </span>
     `;
   }
 };
-t.styles = [u, f];
+t.styles = [k, g];
 t.events = {
   didChange: "didChange",
   stateChange: "stateChange",
   panelConnected: "panelConnected"
 };
-t = g([
+c([
+  p({ reflect: !0 })
+], t.prototype, "size", 1);
+t = c([
   d("sbb-checkbox-panel"),
-  r()
+  m()
 ], t);
 export {
   t as SbbCheckboxPanelElement

package/checkbox/checkbox.js

@@ -1,20 +1,27 @@
-import { css as l, LitElement as r, html as p } from "lit";
-import { property as h, customElement as m } from "lit/decorators.js";
+import { css as r, LitElement as h, html as p } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
 import { slotState as d } from "../core/decorators.js";
 import { SbbIconNameMixin as x } from "../icon.js";
-import { SbbCheckboxCommonElementMixin as f, checkboxCommonStyle as u } from "./common.js";
+import { SbbCheckboxCommonElementMixin as u, checkboxCommonStyle as f } from "./common.js";
 import "../visual-checkbox.js";
-const _ = l`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:is([icon-name],[data-slot-names~=icon]):not([icon-placement=end])) .sbb-checkbox__label--icon{padding-inline-end:var(--sbb-spacing-fixed-2x)}:host(:is([icon-name],[data-slot-names~=icon])[icon-placement=end]) .sbb-checkbox__label--icon{padding-inline-start:var(--sbb-spacing-fixed-2x)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
-var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (a, s, c, n) => {
-  for (var e = n > 1 ? void 0 : n ? v(s, c) : s, t = a.length - 1, b; t >= 0; t--)
-    (b = a[t]) && (e = (n ? b(s, c, e) : b(e)) || e);
-  return n && e && k(s, c, e), e;
+const _ = r`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:is([icon-name],[data-slot-names~=icon]):not([icon-placement=end])) .sbb-checkbox__label--icon{padding-inline-end:var(--sbb-spacing-fixed-2x)}:host(:is([icon-name],[data-slot-names~=icon])[icon-placement=end]) .sbb-checkbox__label--icon{padding-inline-start:var(--sbb-spacing-fixed-2x)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
+var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, n, c, t) => {
+  for (var s = t > 1 ? void 0 : t ? v(n, c) : n, i = e.length - 1, b; i >= 0; i--)
+    (b = e[i]) && (s = (t ? b(n, c, s) : b(s)) || s);
+  return t && s && k(n, c, s), s;
 };
-let o = class extends f(
-  x(r)
+let o = class extends u(
+  x(h)
 ) {
   constructor() {
-    super(...arguments), this.iconPlacement = "end";
+    super(...arguments), this._size = "m", this.iconPlacement = "end";
+  }
+  set size(e) {
+    this._size = e;
+  }
+  get size() {
+    var e;
+    return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
   }
   render() {
     return p`
@@ -26,6 +33,7 @@ let o = class extends f(
                 ?checked=${this.checked}
                 ?indeterminate=${this.indeterminate}
                 ?disabled=${this.disabled || this.formDisabled}
+                size=${this.size}
               ></sbb-visual-checkbox>
             </span>
             <span class="sbb-checkbox__label">
@@ -40,14 +48,17 @@ let o = class extends f(
     `;
   }
 };
-o.styles = [u, _];
+o.styles = [f, _];
 o.events = {
   didChange: "didChange"
 };
-i([
-  h({ attribute: "icon-placement", reflect: !0 })
+a([
+  l({ reflect: !0 })
+], o.prototype, "size", 1);
+a([
+  l({ attribute: "icon-placement", reflect: !0 })
 ], o.prototype, "iconPlacement", 2);
-o = i([
+o = a([
   m("sbb-checkbox"),
   d()
 ], o);

package/checkbox/common/checkbox-common.d.ts

@@ -2,11 +2,9 @@ import { LitElement } from 'lit';
 import { Constructor, SbbDisabledMixinType, SbbFormAssociatedCheckboxMixinType, SbbRequiredMixinType } from '../../core/mixins.js';
 import { SbbCheckboxGroupElement } from '../checkbox-group.js';
 
-export type SbbCheckboxSize = 's' | 'm';
+export type SbbCheckboxSize = 'xs' | 's' | 'm';
 export declare class SbbCheckboxCommonElementMixinType extends SbbFormAssociatedCheckboxMixinType implements Partial<SbbDisabledMixinType>, Partial<SbbRequiredMixinType> {
     indeterminate: boolean;
-    set size(value: SbbCheckboxSize);
-    get size(): SbbCheckboxSize;
     get group(): SbbCheckboxGroupElement | null;
 }
 export declare const SbbCheckboxCommonElementMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SbbCheckboxCommonElementMixinType> & T;

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/common/checkbox-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAEzB,KAAK,kCAAkC,EACvC,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,CAAC;AAExC,MAAM,CAAC,OAAO,OAAO,iCACnB,SAAQ,kCACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEhE,aAAa,EAAE,OAAO,CAAC;IAE9B,IAAW,IAAI,CAAC,KAAK,EAAE,eAAe,EAAE;IACxC,IAAW,IAAI,IAAI,eAAe,CAAC;IAEnC,IAAW,KAAK,IAAI,uBAAuB,GAAG,IAAI,CAAC;CACpD;AAGD,eAAO,MAAM,6BAA6B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cACjE,CAAC,KACZ,WAAW,CAAC,iCAAiC,CAAC,GAAG,CAuDnD,CAAC"}
+{"version":3,"file":"checkbox-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/common/checkbox-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAEzB,KAAK,kCAAkC,EACvC,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,iCACnB,SAAQ,kCACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEhE,aAAa,EAAE,OAAO,CAAC;IAE9B,IAAW,KAAK,IAAI,uBAAuB,GAAG,IAAI,CAAC;CACpD;AAGD,eAAO,MAAM,6BAA6B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cACjE,CAAC,KACZ,WAAW,CAAC,iCAAiC,CAAC,GAAG,CA6CnD,CAAC"}

package/checkbox/common.js

@@ -1,22 +1,15 @@
-import { property as c } from "lit/decorators.js";
+import { property as n } from "lit/decorators.js";
 import { SbbFormAssociatedCheckboxMixin as a } from "../core/mixins.js";
-import { css as l } from "lit";
-var h = Object.defineProperty, p = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
-  for (var s = e > 1 ? void 0 : e ? p(t, i) : t, r = o.length - 1, b; r >= 0; r--)
-    (b = o[r]) && (s = (e ? b(t, i, s) : b(s)) || s);
-  return e && s && h(t, i, s), s;
+import { css as c } from "lit";
+var l = Object.defineProperty, h = (s, o, b, e) => {
+  for (var t = void 0, i = s.length - 1, r; i >= 0; i--)
+    (r = s[i]) && (t = r(o, b, t) || t);
+  return t && l(o, b, t), t;
 };
-const m = (o) => {
-  class t extends a(o) {
+const d = (s) => {
+  class o extends a(s) {
     constructor() {
-      super(...arguments), this.indeterminate = !1, this._size = "m", this._group = null;
-    }
-    set size(e) {
-      this._size = e;
-    }
-    get size() {
-      var e;
-      return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
+      super(...arguments), this.indeterminate = !1, this._group = null;
     }
     /** Reference to the connected checkbox group. */
     get group() {
@@ -40,13 +33,11 @@ const m = (o) => {
       this.indeterminate && (this.indeterminate = !1);
     }
   }
-  return n([
-    c({ type: Boolean })
-  ], t.prototype, "indeterminate", 2), n([
-    c({ reflect: !0 })
-  ], t.prototype, "size", 1), t;
-}, u = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
+  return h([
+    n({ type: Boolean })
+  ], o.prototype, "indeterminate"), o;
+}, m = c`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=xs]) .sbb-checkbox{--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)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
 export {
-  m as SbbCheckboxCommonElementMixin,
-  u as checkboxCommonStyle
+  d as SbbCheckboxCommonElementMixin,
+  m as checkboxCommonStyle
 };