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

package/custom-elements.json

@@ -81411,7 +81411,7 @@
           "name": "SbbCarouselItemElement",
           "slots": [
             {
-              "description": "Use the unnamed slot to add images for the carousel, as <img>, <sbb-image>, <picture>, ...",
+              "description": "Use the unnamed slot to add images for the carousel, as `<img>`, `<sbb-image>`, `<picture>`, ...",
               "name": ""
             }
           ],
@@ -143134,8 +143134,8 @@
               "name": ""
             },
             {
-              "description": "Use the title slot to add an <sbb-title>.",
-              "name": "title"
+              "description": "Use the title-section slot to add an `<sbb-title>`.",
+              "name": "title-section"
             }
           ],
           "members": [
@@ -149397,6 +149397,15 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_internalDisable",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "_isNotDeactivatedByLinearMode",

package/development/carousel/carousel-item/carousel-item.component.d.ts

@@ -8,7 +8,7 @@ export declare class SbbCarouselItemShowEvent extends Event {
 /**
  * It displays an item contained into the `sbb-carousel` component.
  *
- * @slot - Use the unnamed slot to add images for the carousel, as <img>, <sbb-image>, <picture>, ...
+ * @slot - Use the unnamed slot to add images for the carousel, as `<img>`, `<sbb-image>`, `<picture>`, ...
  * @event {SbbCarouselItemShowEvent} beforeshow - Event emitted when the item is starting scrolling.
  * @event {SbbCarouselItemShowEvent} show - Event emitted when the item is full visible after scrolling.
  */

package/development/carousel.pure.js

@@ -25,7 +25,7 @@ var SbbCarouselItemShowEvent = class extends Event {
 /**
 * It displays an item contained into the `sbb-carousel` component.
 *
-* @slot - Use the unnamed slot to add images for the carousel, as <img>, <sbb-image>, <picture>, ...
+* @slot - Use the unnamed slot to add images for the carousel, as `<img>`, `<sbb-image>`, `<picture>`, ...
 * @event {SbbCarouselItemShowEvent} beforeshow - Event emitted when the item is starting scrolling.
 * @event {SbbCarouselItemShowEvent} show - Event emitted when the item is full visible after scrolling.
 */

package/development/sidebar/sidebar/sidebar.component.d.ts

@@ -6,7 +6,7 @@ declare const SbbSidebarElement_base: import("../../core.ts").AbstractConstructo
  * This component corresponds to a sidebar that can be opened on the sidebar container.
  *
  * @slot - Use the unnamed slot to slot any content into the sidebar.
- * @slot title - Use the title slot to add an <sbb-title>.
+ * @slot title-section - Use the title-section slot to add an `<sbb-title>`.
  */
 export declare class SbbSidebarElement extends SbbSidebarElement_base {
     static readonly elementName: string;

package/development/sidebar.pure.js

@@ -267,7 +267,7 @@ var sidebar_default = ":host {\n  --sbb-link-text-decoration-line: none;\n  --sb
 * This component corresponds to a sidebar that can be opened on the sidebar container.
 *
 * @slot - Use the unnamed slot to slot any content into the sidebar.
-* @slot title - Use the title slot to add an <sbb-title>.
+* @slot title-section - Use the title-section slot to add an `<sbb-title>`.
 */
 let SbbSidebarElement = (() => {
 	let _classSuper = SbbAnimationCompleteMixin(SbbOpenCloseBaseElement);

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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.4.1-dev.1785927478",
+  "version": "5.4.1-dev.1785942709",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/49034a7c742ac83dd039a44a3576b0c49188ba53"
+    "https://github.com/sbb-design-systems/lyne-components/commit/d65a85ba4f58c73a129db1a37121d16d7e54742e"
   ],
   "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}}