@sbb-esta/lyne-elements-dev 5.4.1-dev.1785937286 → 5.4.1-dev.1786020383

package/custom-elements.json

@@ -149397,6 +149397,15 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_internalDisable",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "_isNotDeactivatedByLinearMode",
@@ -153385,6 +153394,25 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_checkedChangedByUser",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "_updateCheckedState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_tagGroup",
@@ -153403,7 +153431,13 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "tagGroup",
+                  "default": "this._tagGroup()"
+                }
+              ]
             },
             {
               "kind": "method",
@@ -153431,6 +153465,34 @@
               },
               "description": "Method triggered on button click. Inverts the checked value and emits events."
             },
+            {
+              "kind": "method",
+              "name": "_setCheckedFromUser",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "checked",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_dispatchChangeEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "updateFormValue",

package/development/stepper/step-label/step-label.component.d.ts

@@ -21,6 +21,7 @@ export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
     get disabled(): boolean;
     private _previousOrientation?;
     private _previousSize;
+    private _internalDisable;
     constructor();
     private _isNotDeactivatedByLinearMode;
     connectedCallback(): void;
@@ -42,8 +43,11 @@ export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
     private _assignStep;
     /**
      * @internal
-     * Disables the step label and avoids setting the `disabled` state to preserve the initial
-     * disabled state in case of switching between linear and non-linear mode.
+     * Disables the step label.
+     * Calling `super.disabled` here will result in the set of the `disabled` attribute in the disabled-mixin,
+     * which triggers the setter of the `disabled` prop of the step-label.
+     * To avoid having all the steps set as 'user-disabled', the `_internalDisable` flag is set
+     * immediately before, avoiding the `toggleState` to be called, and then is reset.
      */
     disable(value: boolean): void;
     protected render(): TemplateResult;

package/development/stepper.pure.js

@@ -36,7 +36,7 @@ var SbbStepLabelElement = class extends SbbIconNameMixin(SbbDisabledMixin(SbbBut
 	}
 	set disabled(value) {
 		super.disabled = value;
-		this.toggleState("user-disabled", value);
+		if (!this._internalDisable) this.toggleState("user-disabled", value);
 	}
 	get disabled() {
 		return super.disabled;
@@ -45,6 +45,7 @@ var SbbStepLabelElement = class extends SbbIconNameMixin(SbbDisabledMixin(SbbBut
 		super();
 		this._step = null;
 		this._previousSize = null;
+		this._internalDisable = false;
 		this.addEventListener?.("click", () => {
 			const stepper = this.stepper;
 			if (stepper && this.step && this._isNotDeactivatedByLinearMode(this.step) && !this.disabled) stepper.selected = this.step;
@@ -114,11 +115,19 @@ var SbbStepLabelElement = class extends SbbIconNameMixin(SbbDisabledMixin(SbbBut
 	}
 	/**
 	* @internal
-	* Disables the step label and avoids setting the `disabled` state to preserve the initial
-	* disabled state in case of switching between linear and non-linear mode.
+	* Disables the step label.
+	* Calling `super.disabled` here will result in the set of the `disabled` attribute in the disabled-mixin,
+	* which triggers the setter of the `disabled` prop of the step-label.
+	* To avoid having all the steps set as 'user-disabled', the `_internalDisable` flag is set
+	* immediately before, avoiding the `toggleState` to be called, and then is reset.
 	*/
 	disable(value) {
-		super.disabled = value;
+		this._internalDisable = true;
+		try {
+			super.disabled = value;
+		} finally {
+			this._internalDisable = false;
+		}
 	}
 	render() {
 		return html`

package/development/tag/tag/tag.component.d.ts

@@ -1,4 +1,4 @@
-import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyDeclaration, type PropertyValues, type TemplateResult } from 'lit';
 import { type FormRestoreReason, type FormRestoreState, SbbButtonLikeBaseElement } from '../../core.ts';
 declare const SbbTagElement_base: import("../../core.ts").AbstractConstructor<import("../../icon.pure.ts").SbbIconNameMixinType> & import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbDisabledMixinType & import("../../core.ts").SbbDisabledInteractiveMixinType> & typeof SbbButtonLikeBaseElement;
 /**
@@ -28,13 +28,19 @@ export declare class SbbTagElement<T = string> extends SbbTagElement_base {
      * The value is inherited from the closest `<sbb-tag-group>`.
      */
     accessor size: 's' | 'm' | null;
+    private _checkedChangedByUser;
     constructor();
+    private _updateCheckedState;
     private _tagGroup;
     private _updateAriaRole;
     protected isDisabledExternally(): boolean;
     /** Method triggered on button click. Inverts the checked value and emits events. */
     private _handleClick;
+    private _setCheckedFromUser;
+    private _dispatchChangeEvents;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * @internal
      */

package/development/tag.pure.js

@@ -153,7 +153,10 @@ let SbbTagGroupElement = (() => {
 		}
 		/** The child instances of sbb-tag as an array. */
 		get tags() {
-			return Array.from(this.querySelectorAll?.("sbb-tag") ?? []);
+			return Array.from(this.querySelectorAll?.("sbb-tag") ?? [], (t) => {
+				customElements.upgrade(t);
+				return t;
+			});
 		}
 		constructor() {
 			super();
@@ -341,7 +344,7 @@ let SbbTagElement = (() => {
 				change: "change"
 			};
 		}
-		#value_accessor_storage = __runInitializers(this, _value_initializers, null);
+		#value_accessor_storage;
 		/** Value of the form element. */
 		get value() {
 			return this.#value_accessor_storage;
@@ -349,7 +352,7 @@ let SbbTagElement = (() => {
 		set value(value) {
 			this.#value_accessor_storage = value;
 		}
-		#amount_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _amount_initializers, ""));
+		#amount_accessor_storage;
 		/** Amount displayed inside the tag. */
 		get amount() {
 			return this.#amount_accessor_storage;
@@ -357,7 +360,7 @@ let SbbTagElement = (() => {
 		set amount(value) {
 			this.#amount_accessor_storage = value;
 		}
-		#checked_accessor_storage = (__runInitializers(this, _amount_extraInitializers), __runInitializers(this, _checked_initializers, false));
+		#checked_accessor_storage;
 		/** Whether the tag is checked. */
 		get checked() {
 			return this.#checked_accessor_storage;
@@ -365,7 +368,7 @@ let SbbTagElement = (() => {
 		set checked(value) {
 			this.#checked_accessor_storage = value;
 		}
-		#size_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _size_initializers, null));
+		#size_accessor_storage;
 		/**
 		* Tag size, either s (lean theme default) or m (standard theme default).
 		* The value is inherited from the closest `<sbb-tag-group>`.
@@ -378,20 +381,29 @@ let SbbTagElement = (() => {
 		}
 		constructor() {
 			super();
-			__runInitializers(this, _size_extraInitializers);
+			this.#value_accessor_storage = __runInitializers(this, _value_initializers, null);
+			this.#amount_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _amount_initializers, ""));
+			this.#checked_accessor_storage = (__runInitializers(this, _amount_extraInitializers), __runInitializers(this, _checked_initializers, false));
+			this.#size_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _size_initializers, null));
+			this._checkedChangedByUser = (__runInitializers(this, _size_extraInitializers), false);
 			this.addEventListener?.("click", () => this._handleClick());
 			this.addController(new SbbPropertyWatcherController(this, () => this._tagGroup(), {
-				multiple: () => this._updateAriaRole(),
+				multiple: (g) => this._updateAriaRole(g),
 				size: (g) => {
 					this.size = g.size;
 				}
 			}));
+			this._updateCheckedState();
+		}
+		_updateCheckedState() {
+			this.toggleState("checked", this.checked);
+			this.updateFormValue();
+			this._updateAriaRole();
 		}
 		_tagGroup() {
 			return this.closest?.("sbb-tag-group") ?? null;
 		}
-		_updateAriaRole() {
-			const tagGroup = this._tagGroup();
+		_updateAriaRole(tagGroup = this._tagGroup()) {
 			if (tagGroup && !tagGroup.multiple) {
 				this.internals.role = "radio";
 				this.internals.ariaChecked = `${this.checked}`;
@@ -410,11 +422,18 @@ let SbbTagElement = (() => {
 			if (this.disabled) return;
 			const tagGroup = this._tagGroup();
 			if (tagGroup && !tagGroup.multiple && this.checked) return;
-			this.checked = !this.checked;
+			this._setCheckedFromUser(!this.checked);
 			this.dispatchEvent(new InputEvent("input", {
 				bubbles: true,
 				composed: true
 			}));
+		}
+		_setCheckedFromUser(checked) {
+			if (this.checked === checked) return;
+			this._checkedChangedByUser = true;
+			this.checked = checked;
+		}
+		_dispatchChangeEvents() {
 			/**
 			* The change event is fired when the user modifies the element's value.
 			* Unlike the input event, the change event is not necessarily fired
@@ -427,20 +446,32 @@ let SbbTagElement = (() => {
 			*/
 			this.dispatchEvent(new Event("didChange", { bubbles: true }));
 		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (name === "checked") this._updateCheckedState();
+		}
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
-			const tagGroup = this._tagGroup();
+			const checkedChangedByUser = this._checkedChangedByUser;
 			if (changedProperties.has("checked")) {
-				this._updateAriaRole();
-				this.toggleState("checked", this.checked);
-				this.updateFormValue();
+				const tagGroup = this._tagGroup();
+				if (tagGroup && !tagGroup.multiple) {
+					if (this.checked) tagGroup.tags.forEach((t) => {
+						t.tabIndex = t === this ? 0 : -1;
+						if (t !== this) if (checkedChangedByUser) t._setCheckedFromUser(false);
+						else t.checked = false;
+					});
+					else if (!tagGroup.tags.some((t) => t.checked)) tagGroup["updateExclusiveTabIndex"]();
+				}
 			}
-			if (tagGroup && !tagGroup.multiple && changedProperties.has("checked")) {
-				if (this.checked) tagGroup.tags.forEach((t) => {
-					t.tabIndex = t === this ? 0 : -1;
-					t.checked = t === this;
-				});
-				else if (!tagGroup.tags.some((t) => t.checked)) tagGroup["updateExclusiveTabIndex"]();
+		}
+		updated(changedProperties) {
+			super.updated(changedProperties);
+			if (changedProperties.has("checked")) {
+				if (this._checkedChangedByUser) {
+					this._dispatchChangeEvents();
+					this._checkedChangedByUser = false;
+				}
 			}
 		}
 		/**

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.4.1-dev.1785937286",
+  "version": "5.4.1-dev.1786020383",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/26cb6fbd06fdb0c9996cd9e1f5fbcfd0ec68e182"
+    "https://github.com/sbb-design-systems/lyne-components/commit/bdafaf122c39ead8f200553230932a934f3faaad"
   ],
   "type": "module",
   "exports": {

package/stepper.pure.js

@@ -1,5 +1,5 @@
 import{html as e,unsafeCSS as t}from"lit";import{SbbButtonBaseElement as n,SbbDisabledMixin as r,SbbElement as i,SbbMediaMatcherController as a,SbbMediaQueryBreakpointLargeAndAbove as o,SbbMediaQueryBreakpointSmallAndAbove as s,SbbMediaQueryBreakpointUltraAndAbove as c,SbbMediaQueryBreakpointZeroAndAbove as l,SbbPropertyWatcherController as u,appendAriaElements as d,forceType as f,getNextElementIndex as p,isArrowKeyPressed as m,removeAriaElements as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";import{ResizeController as _}from"@lit-labs/observers/resize-controller.js";import{__esDecorate as v,__runInitializers as y}from"tslib";import{IntersectionController as b}from"@lit-labs/observers/intersection-controller.js";import{property as x}from"lit/decorators.js";var S=`:host{--sbb-step-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));gap:var(--sbb-step-label-gap);min-width:0;max-width:fit-content;cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex;position:relative}:host:before{font-size:var(--sbb-step-label-number-font-size);font-weight:var(--sbb-step-label-font-weight-selected,normal);top:50%;left:50%;z-index:1;translate:-50% -50%;translate:-50% calc(-50% + var(--sbb-step-label-translate-y-content-hover,0px));transition:translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing);line-height:1;position:absolute;inset-block-start:calc(var(--sbb-step-label-font-size) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2)}:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:var(--sbb-color-3);--sbb-step-label-font-weight-selected:bold}@media (forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:Highlight!important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap:var(--sbb-step-label-gap-s);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-s);--sbb-step-label-font-size:var(--sbb-step-label-font-size-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-step-label-gap:var(--sbb-step-label-gap-m);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-m);--sbb-step-label-font-size:var(--sbb-step-label-font-size-m)}:host(:disabled){--sbb-step-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite));--sbb-step-label-prefix-border-style:dashed}@media (forced-colors:active){:host(:disabled){--sbb-step-label-color:GrayText!important}}@media (any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor:var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color:var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover:-.0625rem;--sbb-step-label-prefix-size-grow-hover:calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label__prefix{width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";inset:calc(var(--sbb-step-label-prefix-size-grow-hover,0px));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset;position:absolute}.sbb-step-label__text{font-weight:700}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);translate:0 var(--sbb-step-label-translate-y-content-hover,0);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,translate}
-`,C=class extends g(r(n)){static{this.elementName=`sbb-step-label`}static{this.role=`tab`}static{this.styles=[t(S)]}get step(){return this._step}get stepper(){return this.closest(`sbb-stepper`)}set disabled(e){super.disabled=e,this.toggleState(`user-disabled`,e)}get disabled(){return super.disabled}constructor(){super(),this._step=null,this._previousSize=null,this.addEventListener?.(`click`,()=>{let e=this.stepper;e&&this.step&&this._isNotDeactivatedByLinearMode(this.step)&&!this.disabled&&(e.selected=this.step)}),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)},size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}_isNotDeactivatedByLinearMode(e){let t=this.stepper;if(t?.linear&&t.selectedIndex!==null){let n=t.steps.indexOf(e);return n<t.selectedIndex||n===t.selectedIndex+1}return!0}connectedCallback(){super.connectedCallback(),this.slot||=`step-label`,this.internals.ariaSelected=`false`,this.tabIndex=-1,this._assignStep()}select(){this.tabIndex=0,this.internals.ariaSelected=`true`,this.internals.states.add(`selected`)}deselect(){this.tabIndex=-1,this.internals.ariaSelected=`false`,this.internals.states.delete(`selected`)}configure(e,t,n){n&&this._assignStep(),this.internals.ariaPosInSet=`${e}`,this.internals.ariaSetSize=`${t}`}_assignStep(){let e=this.nextElementSibling;for(;e&&e.localName!==`sbb-step`;)e=e.nextElementSibling;let t=e;this.internals.ariaControlsElements=h(this.internals.ariaControlsElements,this._step),this._step=t instanceof Element?t:null,this.internals.ariaControlsElements=d(this.internals.ariaControlsElements,this._step)}disable(e){super.disabled=e}render(){return e`
+`,C=class extends g(r(n)){static{this.elementName=`sbb-step-label`}static{this.role=`tab`}static{this.styles=[t(S)]}get step(){return this._step}get stepper(){return this.closest(`sbb-stepper`)}set disabled(e){super.disabled=e,this._internalDisable||this.toggleState(`user-disabled`,e)}get disabled(){return super.disabled}constructor(){super(),this._step=null,this._previousSize=null,this._internalDisable=!1,this.addEventListener?.(`click`,()=>{let e=this.stepper;e&&this.step&&this._isNotDeactivatedByLinearMode(this.step)&&!this.disabled&&(e.selected=this.step)}),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)},size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}_isNotDeactivatedByLinearMode(e){let t=this.stepper;if(t?.linear&&t.selectedIndex!==null){let n=t.steps.indexOf(e);return n<t.selectedIndex||n===t.selectedIndex+1}return!0}connectedCallback(){super.connectedCallback(),this.slot||=`step-label`,this.internals.ariaSelected=`false`,this.tabIndex=-1,this._assignStep()}select(){this.tabIndex=0,this.internals.ariaSelected=`true`,this.internals.states.add(`selected`)}deselect(){this.tabIndex=-1,this.internals.ariaSelected=`false`,this.internals.states.delete(`selected`)}configure(e,t,n){n&&this._assignStep(),this.internals.ariaPosInSet=`${e}`,this.internals.ariaSetSize=`${t}`}_assignStep(){let e=this.nextElementSibling;for(;e&&e.localName!==`sbb-step`;)e=e.nextElementSibling;let t=e;this.internals.ariaControlsElements=h(this.internals.ariaControlsElements,this._step),this._step=t instanceof Element?t:null,this.internals.ariaControlsElements=d(this.internals.ariaControlsElements,this._step)}disable(e){this._internalDisable=!0;try{super.disabled=e}finally{this._internalDisable=!1}}render(){return e`
       <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
       <span class="sbb-step-label__text"><slot></slot></span>
     `}},w=`:host{--sbb-step-opacity:0;--sbb-step-margin-inline-start:var(--sbb-spacing-fixed-4x);--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));display:block}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete;margin-inline-start:var(--sbb-step-margin-inline-start)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity:1;--sbb-step-display:block;--sbb-step-height:fit-content;--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-step-animation-delay:var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position:absolute;--sbb-step-inset-block-start:0}.sbb-step{position:var(--sbb-step-position,initial);width:100%;opacity:var(--sbb-step-opacity);display:var(--sbb-step-display,none);height:var(--sbb-step-height,0);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay,0);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete;inset-block-start:var(--sbb-step-inset-block-start,unset)}@starting-style{.sbb-step{--sbb-step-opacity:0}}

package/tag.pure.js

@@ -1,8 +1,8 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbButtonLikeBaseElement as o,SbbDisabledMixin as s,SbbDisabledTabIndexActionMixin as c,SbbElement as l,SbbNamedSlotListMixin as u,SbbPropertyWatcherController as d,forceType as f,getNextElementIndex as p,isArrowKeyPressed as m,omitEmptyConverter as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{display:block}.sbb-tag-group__list{gap:var(--sbb-spacing-fixed-3x);flex-wrap:wrap;display:flex}.sbb-tag-group__list>:is(li,span){max-width:100%;display:flex}
-`;let v=(()=>{let o=s(u(l)),c=[],d,h=[],g=[],v,y=[],b=[],x,S=[],C=[],w;return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;d=[f(),a({attribute:`accessibility-label`})],v=[f(),a({type:Boolean})],x=[a({reflect:!0})],w=[a()],e(this,null,d,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},h,g),e(this,null,v,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},S,C),e(this,null,w,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,c),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tag-group`}static{this.styles=[i(_)]}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set value(e){if(r||!this.hasUpdated){this._value=e;return}this._applyValueToTags(e)}get value(){return r||!this.hasUpdated?this._value:this.multiple?this.tags.filter(e=>e.checked).map(e=>e.value):this.tags.find(e=>e.checked)?.value??null}get tags(){return Array.from(this.querySelectorAll?.(`sbb-tag`)??[])}constructor(){super(),this.listChildLocalNames=(t(this,c),[`sbb-tag`,`div`]),this.#e=t(this,h,``),this.#t=(t(this,g),t(this,y,!1)),this.#n=(t(this,b),t(this,S,null)),this._value=(t(this,C),null),this.addEventListener?.(`keydown`,e=>this._handleArrowKeyDown(e))}willUpdate(e){super.willUpdate(e),e.has(`value`)&&!this.hasUpdated&&this._value&&this._applyValueToTags(this.value),e.has(`disabled`)&&this.tags.forEach(e=>e.requestUpdate?.(`disabled`)),(e.has(`listChildren`)||e.has(`multiple`))&&(this.multiple?e.has(`multiple`)&&this._enabledTags().forEach(e=>e.tabIndex=0):(this.tags.filter(e=>e.checked).slice(1).forEach(e=>e.checked=!1),this.updateExclusiveTabIndex())),(e.has(`accessibilityLabel`)||e.has(`multiple`))&&(this.multiple?(this.internals.role=this.accessibilityLabel?null:`group`,this.internals.ariaLabel=null):(this.internals.role=`radiogroup`,this.internals.ariaLabel=this.accessibilityLabel))}_enabledTags(){return this.tags.filter(e=>!e.disabled)}updateExclusiveTabIndex(){let e=this._enabledTags(),t=e.find(e=>e.checked)??e[0];e.forEach(e=>e.tabIndex=e===t?0:-1)}_handleArrowKeyDown(e){if(this.multiple||!m(e))return;e.preventDefault();let t=this._enabledTags(),n=t.indexOf(e.target);if(n===-1)return;let r=t[p(e,n,t.length)];t.forEach(e=>e.tabIndex=e===r?0:-1),r.focus()}_applyValueToTags(e){let t=this.tags;if(e===null)t.forEach(e=>e.checked=!1);else if(this.multiple){if(!Array.isArray(e)&&t.every(t=>t.value!==e))try{e=JSON.parse(e)}catch{}let n=Array.isArray(e)?e:[e];t.forEach(e=>e.checked=n.includes(e.value))}else Array.isArray(e)||t.forEach(t=>t.checked=t.value===e)}render(){return n`
+`;let v=(()=>{let o=s(u(l)),c=[],d,h=[],g=[],v,y=[],b=[],x,S=[],C=[],w;return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;d=[f(),a({attribute:`accessibility-label`})],v=[f(),a({type:Boolean})],x=[a({reflect:!0})],w=[a()],e(this,null,d,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},h,g),e(this,null,v,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},S,C),e(this,null,w,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,c),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tag-group`}static{this.styles=[i(_)]}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set value(e){if(r||!this.hasUpdated){this._value=e;return}this._applyValueToTags(e)}get value(){return r||!this.hasUpdated?this._value:this.multiple?this.tags.filter(e=>e.checked).map(e=>e.value):this.tags.find(e=>e.checked)?.value??null}get tags(){return Array.from(this.querySelectorAll?.(`sbb-tag`)??[],e=>(customElements.upgrade(e),e))}constructor(){super(),this.listChildLocalNames=(t(this,c),[`sbb-tag`,`div`]),this.#e=t(this,h,``),this.#t=(t(this,g),t(this,y,!1)),this.#n=(t(this,b),t(this,S,null)),this._value=(t(this,C),null),this.addEventListener?.(`keydown`,e=>this._handleArrowKeyDown(e))}willUpdate(e){super.willUpdate(e),e.has(`value`)&&!this.hasUpdated&&this._value&&this._applyValueToTags(this.value),e.has(`disabled`)&&this.tags.forEach(e=>e.requestUpdate?.(`disabled`)),(e.has(`listChildren`)||e.has(`multiple`))&&(this.multiple?e.has(`multiple`)&&this._enabledTags().forEach(e=>e.tabIndex=0):(this.tags.filter(e=>e.checked).slice(1).forEach(e=>e.checked=!1),this.updateExclusiveTabIndex())),(e.has(`accessibilityLabel`)||e.has(`multiple`))&&(this.multiple?(this.internals.role=this.accessibilityLabel?null:`group`,this.internals.ariaLabel=null):(this.internals.role=`radiogroup`,this.internals.ariaLabel=this.accessibilityLabel))}_enabledTags(){return this.tags.filter(e=>!e.disabled)}updateExclusiveTabIndex(){let e=this._enabledTags(),t=e.find(e=>e.checked)??e[0];e.forEach(e=>e.tabIndex=e===t?0:-1)}_handleArrowKeyDown(e){if(this.multiple||!m(e))return;e.preventDefault();let t=this._enabledTags(),n=t.indexOf(e.target);if(n===-1)return;let r=t[p(e,n,t.length)];t.forEach(e=>e.tabIndex=e===r?0:-1),r.focus()}_applyValueToTags(e){let t=this.tags;if(e===null)t.forEach(e=>e.checked=!1);else if(this.multiple){if(!Array.isArray(e)&&t.every(t=>t.value!==e))try{e=JSON.parse(e)}catch{}let n=Array.isArray(e)?e:[e];t.forEach(e=>e.checked=n.includes(e.value))}else Array.isArray(e)||t.forEach(t=>t.checked=t.value===e)}render(){return n`
       ${this.renderList({class:`sbb-tag-group__list`,ariaLabel:this.multiple?this.accessibilityLabel:void 0})}
     `}}})();var y=`:host{--sbb-tag-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));max-width:100%;display:inline-block;outline:none!important}:host([size=s]){--sbb-tag-height:var(--sbb-tag-height-s);--sbb-tag-padding-inline:var(--sbb-tag-padding-inline-s)}:host([size=m]){--sbb-tag-height:var(--sbb-tag-height-m);--sbb-tag-padding-inline:var(--sbb-tag-padding-inline-m)}:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color:var(--sbb-border-color-3);--sbb-tag-border-width:var(--sbb-border-width-2x)}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-tag-border-width:var(--sbb-border-width-4x);--sbb-tag-border-color:Highlight!important}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color:light-dark(var(--sbb-color-granite),var(--sbb-color-aluminium));--sbb-tag-amount-color:var(--sbb-tag-text-color);--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-border-color:light-dark(var(--sbb-color-cement),var(--sbb-color-smoke));--sbb-tag-border-style:dashed;--sbb-tag-cursor:unset;--sbb-tag-pointer-events:none}@media (forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color:GrayText;--sbb-tag-amount-color:GrayText;--sbb-tag-border-color:GrayText}}:host(:is(:state(checked),[state--checked]):is(:disabled,[disabled-interactive])){--sbb-tag-border-color:light-dark(var(--sbb-color-metal),var(--sbb-color-cement));--sbb-tag-border-style:dashed}@media (any-hover:hover){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-inset:calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift:translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover:hover) and (forced-colors:active){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-border-color:Highlight}}:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-border-color:light-dark(var(--sbb-color-iron),var(--sbb-color-storm));--sbb-tag-border-width:var(--sbb-border-width-2x);--sbb-tag-text-color:var(--sbb-color-4)}@media (forced-colors:active){:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-border-color:Highlight;--sbb-tag-text-color:ButtonText}}.sbb-tag{height:var(--sbb-tag-height);max-width:100%;font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);align-items:center;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:var(--sbb-tag-cursor,var(--sbb-cursor-pointer));border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;user-select:none;pointer-events:var(--sbb-tag-pointer-events,unset);display:flex;position:relative}.sbb-tag:before{content:"";inset:var(--sbb-tag-inset,0);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow;position:absolute}:host(:focus-visible) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}.sbb-tag__icon{height:calc(var(--sbb-typo-line-height-text) * 1em);flex-shrink:0;align-items:center;display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon{display:none}.sbb-tag__text{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.sbb-tag__amount{color:var(--sbb-tag-amount-color)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift,0);will-change:transform}
-`;let b=(()=>{let r=g(c(o)),s,l=[],u=[],p,m=[],_=[],v,b=[],x=[],S,C=[],w=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;s=[a()],p=[f(),a({reflect:!0,converter:h})],v=[f(),a({reflect:!1,type:Boolean})],S=[a({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:t},l,u),e(this,null,p,{kind:`accessor`,name:`amount`,static:!1,private:!1,access:{has:e=>`amount`in e,get:e=>e.amount,set:(e,t)=>{e.amount=t}},metadata:t},m,_),e(this,null,v,{kind:`accessor`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,get:e=>e.checked,set:(e,t)=>{e.checked=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},C,w),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tag`}static{this.styles=[i(y)]}static{this.events={input:`input`,didChange:`didChange`,change:`change`}}#e=t(this,l,null);get value(){return this.#e}set value(e){this.#e=e}#t=(t(this,u),t(this,m,``));get amount(){return this.#t}set amount(e){this.#t=e}#n=(t(this,_),t(this,b,!1));get checked(){return this.#n}set checked(e){this.#n=e}#r=(t(this,x),t(this,C,null));get size(){return this.#r}set size(e){this.#r=e}constructor(){super(),t(this,w),this.addEventListener?.(`click`,()=>this._handleClick()),this.addController(new d(this,()=>this._tagGroup(),{multiple:()=>this._updateAriaRole(),size:e=>{this.size=e.size}}))}_tagGroup(){return this.closest?.(`sbb-tag-group`)??null}_updateAriaRole(){let e=this._tagGroup();e&&!e.multiple?(this.internals.role=`radio`,this.internals.ariaChecked=`${this.checked}`,this.internals.ariaPressed=null):(this.internals.role=`button`,this.internals.ariaChecked=null,this.internals.ariaPressed=`${this.checked}`)}isDisabledExternally(){return this._tagGroup()?.disabled??!1}_handleClick(){if(this.disabled)return;let e=this._tagGroup();e&&!e.multiple&&this.checked||(this.checked=!this.checked,this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0})))}willUpdate(e){super.willUpdate(e);let t=this._tagGroup();e.has(`checked`)&&(this._updateAriaRole(),this.toggleState(`checked`,this.checked),this.updateFormValue()),t&&!t.multiple&&e.has(`checked`)&&(this.checked?t.tags.forEach(e=>{e.tabIndex=e===this?0:-1,e.checked=e===this}):t.tags.some(e=>e.checked)||t.updateExclusiveTabIndex())}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formStateRestoreCallback(e,t){e&&(this.checked=e===`true`)}updateFormValue(){this.checked?super.updateFormValue():this.internals.setFormValue(null)}formState(){return`${this.checked}`}renderTemplate(){return n`
+`;let b=(()=>{let r=g(c(o)),s,l=[],u=[],p,m=[],_=[],v,b=[],x=[],S,C=[],w=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;s=[a()],p=[f(),a({reflect:!0,converter:h})],v=[f(),a({reflect:!1,type:Boolean})],S=[a({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:t},l,u),e(this,null,p,{kind:`accessor`,name:`amount`,static:!1,private:!1,access:{has:e=>`amount`in e,get:e=>e.amount,set:(e,t)=>{e.amount=t}},metadata:t},m,_),e(this,null,v,{kind:`accessor`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,get:e=>e.checked,set:(e,t)=>{e.checked=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},C,w),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tag`}static{this.styles=[i(y)]}static{this.events={input:`input`,didChange:`didChange`,change:`change`}}#e;get value(){return this.#e}set value(e){this.#e=e}#t;get amount(){return this.#t}set amount(e){this.#t=e}#n;get checked(){return this.#n}set checked(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}constructor(){super(),this.#e=t(this,l,null),this.#t=(t(this,u),t(this,m,``)),this.#n=(t(this,_),t(this,b,!1)),this.#r=(t(this,x),t(this,C,null)),this._checkedChangedByUser=(t(this,w),!1),this.addEventListener?.(`click`,()=>this._handleClick()),this.addController(new d(this,()=>this._tagGroup(),{multiple:e=>this._updateAriaRole(e),size:e=>{this.size=e.size}})),this._updateCheckedState()}_updateCheckedState(){this.toggleState(`checked`,this.checked),this.updateFormValue(),this._updateAriaRole()}_tagGroup(){return this.closest?.(`sbb-tag-group`)??null}_updateAriaRole(e=this._tagGroup()){e&&!e.multiple?(this.internals.role=`radio`,this.internals.ariaChecked=`${this.checked}`,this.internals.ariaPressed=null):(this.internals.role=`button`,this.internals.ariaChecked=null,this.internals.ariaPressed=`${this.checked}`)}isDisabledExternally(){return this._tagGroup()?.disabled??!1}_handleClick(){if(this.disabled)return;let e=this._tagGroup();e&&!e.multiple&&this.checked||(this._setCheckedFromUser(!this.checked),this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})))}_setCheckedFromUser(e){this.checked!==e&&(this._checkedChangedByUser=!0,this.checked=e)}_dispatchChangeEvents(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`checked`&&this._updateCheckedState()}willUpdate(e){super.willUpdate(e);let t=this._checkedChangedByUser;if(e.has(`checked`)){let e=this._tagGroup();e&&!e.multiple&&(this.checked?e.tags.forEach(e=>{e.tabIndex=e===this?0:-1,e!==this&&(t?e._setCheckedFromUser(!1):e.checked=!1)}):e.tags.some(e=>e.checked)||e.updateExclusiveTabIndex())}}updated(e){super.updated(e),e.has(`checked`)&&(this._checkedChangedByUser&&=(this._dispatchChangeEvents(),!1))}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formStateRestoreCallback(e,t){e&&(this.checked=e===`true`)}updateFormValue(){this.checked?super.updateFormValue():this.internals.setFormValue(null)}formState(){return`${this.checked}`}renderTemplate(){return n`
       <span class="sbb-tag__icon sbb-tag--shift"> ${this.renderIconSlot()} </span>
       <span class="sbb-tag__text sbb-tag--shift">
         <slot></slot>