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

package/custom-elements.json

@@ -153394,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",
@@ -153412,7 +153431,13 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "tagGroup",
+                  "default": "this._tagGroup()"
+                }
+              ]
             },
             {
               "kind": "method",
@@ -153440,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/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.1785942709",
+  "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/d65a85ba4f58c73a129db1a37121d16d7e54742e"
+    "https://github.com/sbb-design-systems/lyne-components/commit/bdafaf122c39ead8f200553230932a934f3faaad"
   ],
   "type": "module",
   "exports": {

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>