@sbb-esta/lyne-elements 0.52.2 → 1.0.0

package/radio-button/radio-button.js

@@ -1,111 +1,19 @@
-import { css as p, LitElement as f, html as n, nothing as b } from "lit";
-import { property as r, state as h, customElement as v } from "lit/decorators.js";
-import { SbbConnectedAbortController as m, SbbLanguageController as g, SbbSlotStateController as _ } from "../core/controllers.js";
-import { hostAttributes as y } from "../core/decorators.js";
-import { setOrRemoveAttribute as x } from "../core/dom.js";
-import { EventEmitter as u, HandlerRepository as k, formElementHandlerAspect as w } from "../core/eventing.js";
-import { i18nExpanded as E, i18nCollapsed as S } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as z } from "../core/mixins.js";
-const C = p`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-suffix-color: var(--sbb-color-charcoal);--sbb-radio-button-subtext-color: var(--sbb-color-granite);--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 );display:block;outline:none!important}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host(:focus-visible[data-is-selection-panel-input]){outline:none!important}:host(:focus-visible[data-is-selection-panel-input]) .sbb-radio-button:after{content:"";position:absolute;display:block;inset-block:calc(var(--sbb-spacing-responsive-xs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);inset-inline:calc(var(--sbb-spacing-responsive-xxs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);border: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([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}.sbb-radio-button{--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);display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--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(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch],[data-is-selection-panel-input])) .sbb-radio-button{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))}slot[name=suffix]{color:var(--sbb-radio-button-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-radio-button-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var P = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, o, l, a) => {
-  for (var s = a > 1 ? void 0 : a ? L(o, l) : o, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (s = (a ? c(o, l, s) : c(s)) || s);
-  return a && s && P(o, l, s), s;
+import { css as a, LitElement as l, html as u, nothing as d } from "lit";
+import { customElement as c } from "lit/decorators.js";
+import { SbbSlotStateController as f } from "../core/controllers.js";
+import { SbbRadioButtonCommonElementMixin as m, radioButtonCommonStyle as p } from "./common.js";
+const h = a`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-radio-button{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))}`;
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, x = (b, t, r, e) => {
+  for (var o = e > 1 ? void 0 : e ? _(t, r) : t, i = b.length - 1, n; i >= 0; i--)
+    (n = b[i]) && (o = (e ? n(t, r, o) : n(o)) || o);
+  return e && o && v(t, r, o), o;
 };
-let t = class extends z(f) {
+let s = class extends m(l) {
   constructor() {
-    super(), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._size = "m", this._isSelectionPanelInput = !1, this._selectionPanelElement = null, this._abort = new m(this), this._language = new g(this), this._stateChange = new u(
-      this,
-      t.events.stateChange,
-      { bubbles: !0 }
-    ), this._radioButtonLoaded = new u(
-      this,
-      t.events.radioButtonLoaded,
-      { bubbles: !0 }
-    ), this._handlerRepository = new k(this, w), new _(this);
-  }
-  set allowEmptySelection(e) {
-    this._allowEmptySelection = !!e;
-  }
-  get allowEmptySelection() {
-    var e;
-    return this._allowEmptySelection || (((e = this.group) == null ? void 0 : e.allowEmptySelection) ?? !1);
-  }
-  set disabled(e) {
-    this._disabled = !!e;
-  }
-  get disabled() {
-    var e;
-    return this._disabled || (((e = this.group) == null ? void 0 : e.disabled) ?? !1);
-  }
-  set required(e) {
-    this._required = !!e;
-  }
-  get required() {
-    var e;
-    return this._required || (((e = this.group) == null ? void 0 : e.required) ?? !1);
-  }
-  /**
-   * Reference to the connected radio button group.
-   */
-  get group() {
-    return this._group;
-  }
-  set checked(e) {
-    this._checked = !!e;
-  }
-  get checked() {
-    return this._checked;
-  }
-  set size(e) {
-    this._size = e;
-  }
-  get size() {
-    var e;
-    return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
-  }
-  /**
-   * Whether the input is the main input of a selection panel.
-   * @internal
-   */
-  get isSelectionPanelInput() {
-    return this._isSelectionPanelInput;
-  }
-  _handleClick(e) {
-    e.preventDefault(), this.select();
-  }
-  select() {
-    this.disabled || (this.allowEmptySelection ? this.checked = !this.checked : this.checked || (this.checked = !0));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._group = this.closest("sbb-radio-button-group"), this._selectionPanelElement = this.closest("sbb-selection-panel"), this._isSelectionPanelInput = !!this._selectionPanelElement && !this.closest('sbb-selection-panel [slot="content"]'), this.toggleAttribute("data-is-selection-panel-input", this._isSelectionPanelInput);
-    const e = this._abort.signal;
-    this.addEventListener("click", (o) => this._handleClick(o), { signal: e }), this.addEventListener("keydown", (o) => this._handleKeyDown(o), { signal: e }), this._handlerRepository.connect(), this._radioButtonLoaded.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
-  }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this.checked !== e.get("checked") && (this._stateChange.emit({ type: "checked", checked: this.checked }), this.isSelectionPanelInput && this._updateExpandedLabel())), e.has("disabled") && (x(this, "aria-disabled", this.disabled ? "true" : null), this.disabled !== e.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled })), e.has("required") && this.setAttribute("aria-required", `${this.required}`);
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.startUpdate(), setTimeout(() => {
-      this.isSelectionPanelInput && this._updateExpandedLabel(), this.completeUpdate();
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._handlerRepository.disconnect();
-  }
-  _handleKeyDown(e) {
-    e.code === "Space" && this.select();
-  }
-  _updateExpandedLabel() {
-    var e;
-    if (!((e = this._selectionPanelElement) != null && e.hasContent)) {
-      this._selectionPanelExpandedLabel = "";
-      return;
-    }
-    this._selectionPanelExpandedLabel = this.checked ? ", " + E[this._language.current] : ", " + S[this._language.current];
+    super(), new f(this);
   }
   render() {
-    return n`
+    return u`
       <label class="sbb-radio-button">
         <input
           type="radio"
@@ -114,54 +22,23 @@ let t = class extends z(f) {
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?checked=${this.checked}
-          value=${this.value || b}
+          value=${this.value || d}
           class="sbb-screen-reader-only"
         />
         <span class="sbb-radio-button__label-slot">
           <slot></slot>
-          ${this._selectionPanelElement ? n`<slot name="suffix"></slot>` : b}
         </span>
-        ${this._selectionPanelElement ? n`<slot name="subtext"></slot>` : b}
-        ${this.isSelectionPanelInput && this._selectionPanelExpandedLabel ? n`<span class="sbb-screen-reader-only"> ${this._selectionPanelExpandedLabel} </span>` : b}
       </label>
     `;
   }
 };
-t.styles = C;
-t.events = {
-  stateChange: "stateChange",
-  radioButtonLoaded: "radioButtonLoaded"
+s.styles = [p, h];
+s.events = {
+  stateChange: "stateChange"
 };
-i([
-  r({ attribute: "allow-empty-selection", type: Boolean })
-], t.prototype, "allowEmptySelection", 1);
-i([
-  r()
-], t.prototype, "value", 2);
-i([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "disabled", 1);
-i([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "required", 1);
-i([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "checked", 1);
-i([
-  r({ reflect: !0 })
-], t.prototype, "size", 1);
-i([
-  h()
-], t.prototype, "_isSelectionPanelInput", 2);
-i([
-  h()
-], t.prototype, "_selectionPanelExpandedLabel", 2);
-t = i([
-  v("sbb-radio-button"),
-  y({
-    role: "radio"
-  })
-], t);
+s = x([
+  c("sbb-radio-button")
+], s);
 export {
-  t as SbbRadioButtonElement
+  s as SbbRadioButtonElement
 };

package/radio-button.d.ts

@@ -1,3 +1,5 @@
 export * from './radio-button/radio-button.js';
 export * from './radio-button/radio-button-group.js';
+export * from './radio-button/radio-button-panel.js';
+export * from './radio-button/common.js';
 //# sourceMappingURL=radio-button.d.ts.map

package/radio-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../src/elements/radio-button.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../src/elements/radio-button.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,0BAA0B,CAAC"}

package/radio-button.js

@@ -1,2 +1,4 @@
 export * from "./radio-button/radio-button.js";
 export * from "./radio-button/radio-button-group.js";
+export * from "./radio-button/radio-button-panel.js";
+export * from "./radio-button/common.js";

package/{development/selection-panel/selection-panel.d.ts → selection-expansion-panel/selection-expansion-panel.d.ts}

@@ -1,17 +1,17 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
 
+declare const SbbSelectionExpansionPanelElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
 /**
  * It displays an expandable panel connected to a `sbb-checkbox` or to a `sbb-radio-button`.
  *
- * @slot - Use the unnamed slot to add `sbb-checkbox` or `sbb-radio-button` elements to the `sbb-selection-panel`.
- * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
+ * @slot - Use the unnamed slot to add `sbb-checkbox` or `sbb-radio-button` elements to the `sbb-selection-expansion-panel`.
  * @slot content - Use this slot to provide custom content for the panel (optional).
  * @event {CustomEvent<void>} willOpen - Emits whenever the content section starts the opening transition.
  * @event {CustomEvent<void>} didOpen - Emits whenever the content section is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the content section begins the closing transition.
  * @event {CustomEvent<void>} didClose - Emits whenever the content section is closed.
  */
-export declare class SbbSelectionPanelElement extends LitElement {
+export declare class SbbSelectionExpansionPanelElement extends SbbSelectionExpansionPanelElement_base {
     static styles: CSSResultGroup;
     static readonly events: Record<string, string>;
     /** The background color of the panel. */
@@ -36,13 +36,13 @@ export declare class SbbSelectionPanelElement extends LitElement {
     private _willClose;
     /** Emits whenever the content section is closed. */
     private _didClose;
+    private _language;
     private _abort;
     private _initialized;
     /**
      * Whether it has an expandable content
-     * @internal
      */
-    get hasContent(): boolean;
+    private get _hasContent();
     constructor();
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
@@ -53,11 +53,13 @@ export declare class SbbSelectionPanelElement extends LitElement {
     private _initFromInput;
     private _onInputStateChange;
     private _onAnimationEnd;
+    private _updateExpandedLabel;
     protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sbb-selection-panel': SbbSelectionPanelElement;
+        'sbb-selection-expansion-panel': SbbSelectionExpansionPanelElement;
     }
 }
-//# sourceMappingURL=selection-panel.d.ts.map
+export {};
+//# sourceMappingURL=selection-expansion-panel.d.ts.map

package/selection-expansion-panel/selection-expansion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAiBvC,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBACa,iCAAkC,SAAQ,sCAA6B;IAElF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtC;;OAEG;IACH,OAAO,KAAK,WAAW,GAGtB;;IAOe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAUT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}

package/selection-expansion-panel.d.ts

@@ -0,0 +1,2 @@
+export * from './selection-expansion-panel/selection-expansion-panel.js';
+//# sourceMappingURL=selection-expansion-panel.d.ts.map

package/selection-expansion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../src/elements/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,cAAc,0DAA0D,CAAC"}

package/selection-expansion-panel.js

@@ -0,0 +1,146 @@
+import { css as b, LitElement as c, html as h } from "lit";
+import { property as d, state as _, customElement as u } from "lit/decorators.js";
+import { SbbLanguageController as m, SbbConnectedAbortController as x, SbbSlotStateController as v } from "./core/controllers.js";
+import { EventEmitter as a } from "./core/eventing.js";
+import { i18nExpanded as g, i18nCollapsed as f } from "./core/i18n.js";
+import { SbbHydrationMixin as w } from "./core/mixins.js";
+import "./divider.js";
+const y = b`*,:before,:after{box-sizing:border-box}:host{--sbb-selection-expansion-panel-background: var(--sbb-color-white);--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-selection-expansion-panel-inner-background: transparent;--sbb-selection-expansion-panel-inner-border-width: 0px;--sbb-selection-expansion-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-selection-expansion-panel-content-visibility: hidden;--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-selection-expansion-panel-border-radius: var(--sbb-border-radius-4x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:contents}:host([color=milk]){--sbb-selection-expansion-panel-background: var(--sbb-color-milk)}:host([data-checked]:not([data-disabled])){--sbb-selection-expansion-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-2x)}:host([data-slot-names~=content][data-disabled]){--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud)}:host([borderless]:not([data-checked])){--sbb-selection-expansion-panel-border-color: transparent}:host([data-slot-names~=content]:where([data-state=opening],[data-state=opened])){--sbb-selection-expansion-panel-content-visibility: visible;--sbb-selection-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs)}.sbb-selection-expansion-panel{flex:auto;position:relative;width:100%;background-color:var(--sbb-selection-expansion-panel-background);border-radius:var(--sbb-selection-expansion-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-expansion-panel-border-width) var(--sbb-selection-expansion-panel-border-color);transition-duration:var(--sbb-selection-expansion-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-expansion-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-expansion-panel-border-width) solid var(--sbb-selection-expansion-panel-border-color);border-radius:var(--sbb-selection-expansion-panel-border-radius)}}.sbb-selection-expansion-panel__content--wrapper{display:grid;visibility:var(--sbb-selection-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-selection-expansion-panel__content--wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-selection-expansion-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-selection-expansion-panel-animation-duration)}:host([data-state=closing]) .sbb-selection-expansion-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not([data-slot-names~=content])) .sbb-selection-expansion-panel__content--wrapper{display:none}.sbb-selection-expansion-panel__content{overflow:hidden;padding-inline:var(--sbb-selection-expansion-panel-content-padding-inline);padding-block-end:var(--sbb-selection-expansion-panel-content-padding-block-end);transition:padding var(--sbb-selection-expansion-panel-animation-duration) var(--sbb-animation-easing)}sbb-divider{margin-block-end:var(--sbb-spacing-responsive-xxs)}@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;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (e, n, r, o) => {
+  for (var i = o > 1 ? void 0 : o ? C(n, r) : n, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (i = (o ? p(n, r, i) : p(i)) || i);
+  return o && i && k(n, r, i), i;
+};
+let t = class extends w(c) {
+  constructor() {
+    super(), this.color = "white", this.forceOpen = !1, this.borderless = !1, this._willOpen = new a(
+      this,
+      t.events.willOpen
+    ), this._didOpen = new a(
+      this,
+      t.events.didOpen
+    ), this._willClose = new a(
+      this,
+      t.events.willClose
+    ), this._didClose = new a(
+      this,
+      t.events.didClose
+    ), this._language = new m(this), this._abort = new x(this), this._initialized = !1, new v(this);
+  }
+  set _state(e) {
+    this.setAttribute("data-state", e);
+  }
+  get _state() {
+    return this.getAttribute("data-state");
+  }
+  /** Whether the selection panel is checked. */
+  set _checked(e) {
+    this.toggleAttribute("data-checked", e);
+  }
+  get _checked() {
+    return this.hasAttribute("data-checked");
+  }
+  /** Whether the selection panel is disabled. */
+  set _disabled(e) {
+    this.toggleAttribute("data-disabled", e);
+  }
+  /**
+   * Whether it has an expandable content
+   */
+  get _hasContent() {
+    var e;
+    return ((e = this.querySelectorAll) == null ? void 0 : e.call(this, '[slot="content"]').length) > 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("panelConnected", this._initFromInput.bind(this), {
+      signal: this._abort.signal
+    }), this._state || (this._state = "closed");
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("forceOpen") && this._updateState();
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._initialized = !0;
+  }
+  _updateState() {
+    this._hasContent && (this.forceOpen || this._checked ? this._open(!this._initialized) : this._close(), this._updateExpandedLabel(this.forceOpen || this._checked));
+  }
+  _open(e = !1) {
+    this._state !== "closed" && this._state !== "closing" || (this._state = "opening", this._willOpen.emit(), e && (this._state = "opened", this._didOpen.emit()));
+  }
+  _close() {
+    this._state !== "opened" && this._state !== "opening" || (this._state = "closing", this._willClose.emit());
+  }
+  _initFromInput(e) {
+    const n = e.target;
+    this._checked = n.checked, this._disabled = n.disabled, this._updateState();
+  }
+  _onInputStateChange(e) {
+    if (e.detail.type === "disabled") {
+      this._disabled = e.detail.disabled;
+      return;
+    } else if (e.detail.type !== "checked")
+      return;
+    this._checked = e.detail.checked, this._updateState();
+  }
+  _onAnimationEnd(e) {
+    e.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : e.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
+  }
+  async _updateExpandedLabel(e) {
+    await this.hydrationComplete;
+    const n = this.querySelector(
+      "sbb-radio-button-panel, sbb-checkbox-panel"
+    );
+    if (n) {
+      if (!this._hasContent) {
+        n.expansionState = "";
+        return;
+      }
+      n.expansionState = e ? ", " + g[this._language.current] : ", " + f[this._language.current];
+    }
+  }
+  render() {
+    return h`
+      <div class="sbb-selection-expansion-panel">
+        <div class="sbb-selection-expansion-panel__input" @stateChange=${this._onInputStateChange}>
+          <slot></slot>
+        </div>
+        <div
+          class="sbb-selection-expansion-panel__content--wrapper"
+          .inert=${this._state !== "opened"}
+          @animationend=${(e) => this._onAnimationEnd(e)}
+        >
+          <div class="sbb-selection-expansion-panel__content">
+            <sbb-divider></sbb-divider>
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = y;
+t.events = {
+  willOpen: "willOpen",
+  didOpen: "didOpen",
+  willClose: "willClose",
+  didClose: "didClose"
+};
+s([
+  d()
+], t.prototype, "color", 2);
+s([
+  d({ attribute: "force-open", type: Boolean })
+], t.prototype, "forceOpen", 2);
+s([
+  d({ reflect: !0, type: Boolean })
+], t.prototype, "borderless", 2);
+s([
+  _()
+], t.prototype, "_state", 1);
+t = s([
+  u("sbb-selection-expansion-panel")
+], t);
+export {
+  t as SbbSelectionExpansionPanelElement
+};

package/standard-theme.css

@@ -212,7 +212,7 @@ summary {
 
 /**
  * Do not edit directly
- * Generated on Tue, 28 May 2024 11:11:03 GMT
+ * Generated on Fri, 14 Jun 2024 15:20:35 GMT
  */
 *,
 ::before,

package/tabs/tab/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tab.js';
+//# sourceMappingURL=index.d.ts.map

package/tabs/tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/tabs/tab/tab.d.ts

@@ -0,0 +1,24 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbTabLabelElement } from '../tab-label.js';
+
+/**
+ * Combined with a `sbb-tab-group`, it displays a tab's content.
+ *
+ * @slot - Use the unnamed slot to provide content.
+ */
+export declare class SbbTabElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The `sbb-tab-label` associated with the tab. */
+    get label(): SbbTabLabelElement | null;
+    private _label;
+    private _getTabLabel;
+    /** @internal */
+    configure(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-tab': SbbTabElement;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

package/tabs/tab/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/tab.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAI1D;;;;GAIG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mDAAmD;IACnD,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;IACD,OAAO,CAAC,MAAM,CAAmC;IAEjD,OAAO,CAAC,YAAY;IAQpB,gBAAgB;IACT,SAAS,IAAI,IAAI;cAIL,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

package/tabs/tab-group/tab-group.d.ts

@@ -1,5 +1,16 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTabLabelElement } from '../tab-label.js';
+import { SbbTabElement } from '../tab.js';
 
+export type SbbTabSupportedContentType = SbbTabElement | SbbTabGroupElement;
+export type SbbTabChangedEventDetails = {
+    activeIndex: number;
+    activeTabLabel: SbbTabLabelElement;
+    activeTab: SbbTabElement;
+    previousIndex: number;
+    previousTabLabel: SbbTabLabelElement | undefined;
+    previousTab: SbbTabElement | undefined;
+};
 export interface InterfaceSbbTabGroupActions {
     activate(): void;
     deactivate(): void;
@@ -7,10 +18,10 @@ export interface InterfaceSbbTabGroupActions {
     disable(): void;
     select(): void;
 }
-export interface InterfaceSbbTabGroupTab extends HTMLElement {
+export interface InterfaceSbbTabGroupTab extends SbbTabLabelElement {
     active?: boolean;
-    disabled?: boolean;
-    relatedContent?: HTMLElement;
+    disabled: boolean;
+    relatedContent?: SbbTabSupportedContentType;
     index?: number;
     tabGroupActions?: InterfaceSbbTabGroupActions;
     size: 's' | 'l' | 'xl';
@@ -18,13 +29,11 @@ export interface InterfaceSbbTabGroupTab extends HTMLElement {
 /**
  * It displays one or more tab, each one with a title and a content.
  *
- * @slot - Use the unnamed slot to add html-content to the `sbb-tab-group`.
- * Wrap the content in a `div`, a `section`, an `article` or provide a nested `sbb-tab-group`:
- * This is correct: `<div>Some text <p>Some other text</p></div>`
- * This is not correct: `<span>Some text</span><p>Some other text</p>`
- * @slot tab-bar - When you provide the `sbb-tab-title` tag through the unnamed slot,
+ * @slot - Use the unnamed slot to add html-content to the `sbb-tab-group`;
+ * wrap the content in a `sbb-tab` or provide a nested `sbb-tab-group`.
+ * @slot tab-bar - When you provide the `sbb-tab-label` tag through the unnamed slot,
  * it will be automatically moved to this slot. You do not need to use it directly.
- * @event {CustomEvent<void>} didChange - Emits an event on selected tab change
+ * @event {CustomEvent<SbbTabChangedEventDetails>} didChange - Emits an event on selected tab change.
  */
 export declare class SbbTabGroupElement extends LitElement {
     static styles: CSSResultGroup;
@@ -39,9 +48,7 @@ export declare class SbbTabGroupElement extends LitElement {
     private _tabAttributeObserver;
     private _tabGroupResizeObserver;
     private _tabContentResizeObserver;
-    /**
-     * Size variant, either s, l or xl.
-     */
+    /** Size variant, either s, l or xl. */
     set size(value: InterfaceSbbTabGroupTab['size']);
     get size(): InterfaceSbbTabGroupTab['size'];
     private _size;
@@ -51,9 +58,7 @@ export declare class SbbTabGroupElement extends LitElement {
      */
     initialSelectedIndex: number;
     private _updateSize;
-    /**
-     * Emits an event on selected tab change
-     */
+    /** Emits an event on selected tab change. */
     private _selectedTabChanged;
     /**
      * Disables a tab by index.

package/tabs/tab-group/tab-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAYvC,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;AAUD;;;;;;;;;;GAUG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,qBAAqB,CAE3B;IACF,OAAO,CAAC,uBAAuB,CAE7B;IACF,OAAO,CAAC,yBAAyB,CAE/B;IAEF;;OAEG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAwC;IAErD;;;OAGG;IACqE,oBAAoB,SAAK;IAEjG,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAGzB;IAEF;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,KAAK,YAAY,GAEvB;IAEe,iBAAiB,IAAI,IAAI;cAOtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAO5C,OAAO,CAAC,oBAAoB,CAS1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,UAAU;IA4FlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"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"}