@sbb-esta/lyne-elements-dev 5.1.0-dev.1782687750 → 5.1.0-dev.1782718456

package/development/visual-checkbox.pure.js

@@ -118,19 +118,19 @@ let SbbVisualCheckboxElement = (() => {
 		render() {
 			return html`
       ${this.checked || this.indeterminate ? html`<svg
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            width="100%"
-            height="100%"
-          >
-            <path
-              fill="none"
-              d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>` : nothing}
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              width="100%"
+              height="100%"
+            >
+              <path
+                fill="none"
+                d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>` : nothing}
     `;
 		}
 		constructor() {

package/expansion-panel.pure.js

@@ -6,12 +6,12 @@ import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseEleme
         <slot></slot>
       </span>
       ${this.disabled?t:e`<span class="sbb-expansion-panel-header__toggle">
-            <sbb-icon
-              name="chevron-small-down-medium"
-              class="sbb-expansion-panel-header__toggle-icon"
-            >
-            </sbb-icon>
-          </span>`}
+              <sbb-icon
+                name="chevron-small-down-medium"
+                class="sbb-expansion-panel-header__toggle-icon"
+              >
+              </sbb-icon>
+            </span>`}
     `}},b=`:host{--sbb-expansion-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-expansion-panel-border-color:var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color:var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius);background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box;display:block}:host([size=s]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-default)}@media (forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color:GrayText;--sbb-expansion-panel-border-block-start-color:GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded:grid}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent;--sbb-expansion-panel-start-end-radius:0;--sbb-expansion-panel-start-start-radius:0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius:0;--sbb-expansion-panel-end-start-radius:0}:host([color=white]){--sbb-expansion-panel-background-color:var(--sbb-background-color-1);--sbb-expansion-panel-background-color-hover:var(--sbb-background-color-3)}:host([color=milk]){--sbb-expansion-panel-background-color:var(--sbb-background-color-3);--sbb-expansion-panel-background-color-hover:var(--sbb-background-color-1)}:host([borderless]){--sbb-expansion-panel-border-width:0;--sbb-expansion-panel-border-color:transparent;--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent}@media (forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:var(--sbb-spacing-fixed-1x)}@media (forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0}}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){background-color:var(--sbb-expansion-panel-background-color-hover)}@media (forced-colors:active){:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color:Highlight;--sbb-expansion-panel-border-block-start-color:Highlight}}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded,none);opacity:0;grid-template-rows:0fr}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s, var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);display:grid}.sbb-expansion-panel__content{min-width:0;min-height:0}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{opacity:1;grid-template-rows:1fr}to{opacity:0;grid-template-rows:0fr}}
 `;let x=0,S=(()=>{let r=a,i=[],o,s=[],c=[],f,g=[],_=[],v,y,S,C=[],w=[],T,E=[],D=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[h({attribute:`title-level`})],f=[h({reflect:!0})],v=[h({reflect:!0,type:Boolean})],y=[h({reflect:!0,type:Boolean})],S=[l(),h({reflect:!0,type:Boolean})],T=[h({reflect:!0})],p(this,null,o,{kind:`accessor`,name:`titleLevel`,static:!1,private:!1,access:{has:e=>`titleLevel`in e,get:e=>e.titleLevel,set:(e,t)=>{e.titleLevel=t}},metadata:e},s,c),p(this,null,f,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:e},g,_),p(this,null,v,{kind:`setter`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,set:(e,t)=>{e.expanded=t}},metadata:e},null,i),p(this,null,y,{kind:`setter`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,set:(e,t)=>{e.disabled=t}},metadata:e},null,i),p(this,null,S,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},C,w),p(this,null,T,{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:e},E,D),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-expansion-panel`}static{this.styles=[n(b)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get titleLevel(){return this.#e}set titleLevel(e){this.#e=e}#t;get color(){return this.#t}set color(e){this.#t=e}set expanded(e){this._expanded=e,this._onExpandedChange()}get expanded(){return this._expanded}set disabled(e){this._disabled=e,this._updateDisabledOnHeader(this._disabled)}get disabled(){return this._disabled}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=(m(this,i),m(this,s,null)),this.#t=(m(this,c),m(this,g,`white`)),this._expanded=(m(this,_),!1),this._disabled=!1,this.#n=m(this,C,!1),this.#r=(m(this,w),m(this,E,null)),this._stateInternal=m(this,D),this._progressiveId=`-${++x}`,this._state=`closed`,this.addEventListener?.(`toggleexpanded`,e=>{e.target===this._headerRef&&this._toggleExpanded()})}connectedCallback(){super.connectedCallback(),this.toggleState(`accordion`,!!this.closest?.(`sbb-accordion`))}disconnectedCallback(){super.disconnectedCallback(),this.internals.states.delete(`accordion`)}_toggleExpanded(){this.expanded=!this.expanded}_onExpandedChange(){this._headerRef?.setAttribute(`aria-expanded`,String(this.expanded)),this._contentRef?.setAttribute(`aria-hidden`,String(!this.expanded)),this.expanded?this._open():this._state===`opened`&&this._close()}_open(){this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`)),(!this.hasUpdated||this._isZeroAnimationDuration())&&this._handleOpening()}_close(){this._state=`closing`,this.dispatchEvent(new Event(`beforeclose`)),this._isZeroAnimationDuration()&&this._handleClosing()}_isZeroAnimationDuration(){return u(this,`--sbb-expansion-panel-animation-duration`)}_handleOpening(){this._state=`opened`,this.dispatchEvent(new Event(`open`))}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`))}_updateDisabledOnHeader(e){this._headerRef&&(this._headerRef.disabled=e)}_handleSlotchange(){let e=Array.from(this.children??[]),t=e.find(e=>e.localName===`sbb-expansion-panel-header`),n=e.find(e=>e.localName===`sbb-expansion-panel-content`);this._headerRef===t&&this._contentRef===n||(t&&this._headerRef!==t&&(t.id||=`sbb-expansion-panel-header${this._progressiveId}`,t.setAttribute(`aria-expanded`,String(this.expanded)),t.toggleAttribute(`disabled`,this.disabled)),n&&this._contentRef!==n&&(n.id||=`sbb-expansion-panel-content${this._progressiveId}`,n.setAttribute(`aria-hidden`,String(!this.expanded))),this._headerRef=t,this._contentRef=n,this._headerRef&&this._contentRef&&(this._headerRef.setAttribute(`aria-controls`,this._contentRef.id),this._contentRef.setAttribute(`aria-labelledby`,this._headerRef.id),d(this._contentRef).toggle(`icon-space`,d(this._headerRef).has(`icon`))))}_onAnimationEnd(e){e.animationName===`open-opacity`&&this._state===`opening`?this._handleOpening():e.animationName===`close`&&this._state===`closing`&&this._handleClosing()}render(){return e`
       <div

package/image.pure.js

@@ -53,14 +53,14 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
       }`,u(e)}_createMediaQueryString(e){let t=``;return e.forEach(e=>{let n=e.conditionFeature,r;r=e.conditionFeatureValue.lyneDesignToken?f[e.conditionFeatureValue.value]??``:e.conditionFeatureValue.value;let i=e.conditionOperator?` ${e.conditionOperator} `:``;t+=`(${n}: ${r})${i}`}),t}_imageLoaded(){this._logPerformanceMarks(),this.internals.states.add(`loaded`),this.dispatchEvent(new Event(`load`))}render(){let e=this._prepareImageUrl(this.imageSrc,!0),t=this._prepareImageUrl(this.imageSrc,!1);this.loading===`lazy`&&(this.decoding=`async`,this.importance=`low`);let i=this._preparePictureSizeConfigs();return n`
       <div class="sbb-image__wrapper">
         ${this.skipLqip?r:n`<img
-              alt=""
-              class="sbb-image__blurred"
-              src=${e}
-              width="1000"
-              height="562"
-              loading=${this.loading??r}
-              decoding=${this.decoding??r}
-            />`}
+                alt=""
+                class="sbb-image__blurred"
+                src=${e}
+                width="1000"
+                height="562"
+                loading=${this.loading??r}
+                decoding=${this.decoding??r}
+              />`}
 
         <picture>
           <!-- render picture element sources -->

package/map-container.pure.js

@@ -12,13 +12,13 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{IntersectionC
         <slot></slot>
 
         ${this.hideScrollUpButton?i:r`<sbb-accent-button
-              class="sbb-map-container__sidebar-button"
-              size="l"
-              icon-name="location-pin-map-small"
-              @click=${()=>this._onScrollButtonClick()}
-              ?inert=${!this._scrollUpButtonVisible}
-            >
-              ${p[this._language.current]}
-            </sbb-accent-button>`}
+                class="sbb-map-container__sidebar-button"
+                size="l"
+                icon-name="location-pin-map-small"
+                @click=${()=>this._onScrollButtonClick()}
+                ?inert=${!this._scrollUpButtonVisible}
+              >
+                ${p[this._language.current]}
+              </sbb-accent-button>`}
       </div>
     `}}})();export{g as SbbMapContainerElement};

package/notification.pure.js

@@ -11,15 +11,18 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
           </span>
 
           ${this.readOnly?i:r`
-                <sbb-divider class="sbb-notification__divider" orientation="vertical"></sbb-divider>
-                <sbb-secondary-button
-                  size=${this.size||i}
-                  icon-name="cross-small"
-                  @click=${()=>this.close()}
-                  aria-label=${d[this._language.current]}
-                  class="sbb-notification__close"
-                ></sbb-secondary-button>
-              `}
+                  <sbb-divider
+                    class="sbb-notification__divider"
+                    orientation="vertical"
+                  ></sbb-divider>
+                  <sbb-secondary-button
+                    size=${this.size||i}
+                    icon-name="cross-small"
+                    @click=${()=>this.close()}
+                    aria-label=${d[this._language.current]}
+                    class="sbb-notification__close"
+                  ></sbb-secondary-button>
+                `}
         </div>
       </div>
     `}}})();export{_ as SbbNotificationElement};

package/option.pure.js

@@ -1,11 +1,11 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a,state as o}from"lit/decorators.js";import{SbbDisabledMixin as s,SbbElement as c,SbbNegativeMixin as l,SbbPropertyWatcherController as u,forceType as d,isAndroid as f,isBlink as p,isSafari as m,screenReaderOnlyStyles as h,setOrRemoveAttribute as g}from"./core.js";import{MutationController as _}from"@lit-labs/observers/mutation-controller.js";import{SbbIconNameMixin as v}from"./icon.pure.js";import{SbbVisualCheckboxElement as y}from"./visual-checkbox.pure.js";var b=`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display:none}:host(:is(:state(size-s),[state--size-s])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-2x)}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color:var(--sbb-color-5);--sbb-optgroup-divider-color:var(--sbb-divider-color-negative)}:host:before{content:"";display:var(--sbb-optgroup-divider-display,block);margin-block:var(--sbb-options-panel-divider-margin-block);border-block-start:var(--sbb-divider-border-width) solid var(--sbb-optgroup-divider-color)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end);display:flex}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}
 `;const x=m;let S=(()=>{let l=s(c),f,p=[],m=[],h,g=[],_=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;f=[d(),a()],h=[o()],e(this,null,f,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},p,m),e(this,null,h,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.role=x?null:`group`}static{this.styles=[i(b)]}#e;get label(){return this.#e}set label(e){this.#e=e}#t;get _inertAriaGroups(){return this.#t}set _inertAriaGroups(e){this.#t=e}constructor(){super(),this.#e=t(this,p,``),this.#t=(t(this,m),t(this,g,!1)),this._previousSize=(t(this,_),null),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),x&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=x):this._inertAriaGroups=x)}connectedCallback(){super.connectedCallback(),this._updateAriaLabel()}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&(this._inertAriaGroups||(this.internals.ariaDisabled=this.disabled?`true`:null)),e.has(`label`)&&this._updateAriaLabel()}_handleSlotchange(){this._updateAriaLabel(),this._highlightOptions(),this.dispatchEvent(new Event(`ɵoptgroupslotchange`))}_updateAriaLabel(){this.internals.ariaLabel=this._inertAriaGroups?null:this.label}_highlightOptions(){let e=this.getAutocompleteParent();if(!e)return;let t=e.triggerElement?.value;t&&this.options.forEach(e=>e.highlight(t))}render(){return n`
       ${this.label?n`
-            <div class="sbb-optgroup__label" aria-hidden="true">
-              <div class="sbb-optgroup__icon-space"></div>
-              <span>${this.label}</span>
-            </div>
-          `:r}
+              <div class="sbb-optgroup__label" aria-hidden="true">
+                <div class="sbb-optgroup__icon-space"></div>
+                <span>${this.label}</span>
+              </div>
+            `:r}
       <slot @slotchange=${this._handleSlotchange}></slot>
     `}}})();var C=class extends S{static{this.elementName=`sbb-optgroup`}get options(){return Array.from(this.querySelectorAll?.(`sbb-option`)??[])}constructor(){super(),this.addController(new u(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this._handleNegativeChange(e)})),this.addController(new u(this,()=>this.closest(`sbb-select`),{multiple:e=>this.toggleState(`multiple`,e.multiple),negative:e=>this._handleNegativeChange(e)}))}_handleNegativeChange(e){this.toggleState(`negative`,e.negative),this.requestUpdate()}getAutocompleteParent(){return this.closest?.(`sbb-autocomplete`)||null}connectedCallback(){super.connectedCallback();let e=this.closest?.(`sbb-autocomplete`)?`autocomplete`:this.closest?.(`sbb-select`)?`select`:null;this.internals.states.delete(`variant-autocomplete`),this.internals.states.delete(`variant-select`),e&&this.internals.states.add(`variant-${e}`)}},w=`:host{column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);padding-block-end:var(--sbb-option-hint-padding-block-end);display:flex}:host([negative]){--sbb-option-hint-color:var(--sbb-color-5)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-2x)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}
 `,T=class extends l(c){static{this.elementName=`sbb-option-hint`}static{this.styles=[i(w)]}constructor(){super(),this._previousSize=null,this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}render(){return n`
@@ -38,10 +38,10 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
 
       <!-- Checkbox -->
       ${this._isMultiple()?n`
-            <sbb-visual-checkbox
-              ?checked=${this.selected}
-              ?disabled=${this.disabled||this.disabledFromGroup}
-              ?negative=${this.matches?.(`:is(:state(negative),[state--negative])`)}
-            ></sbb-visual-checkbox>
-          `:r}
+              <sbb-visual-checkbox
+                ?checked=${this.selected}
+                ?disabled=${this.disabled||this.disabledFromGroup}
+                ?negative=${this.matches?.(`:is(:state(negative),[state--negative])`)}
+              ></sbb-visual-checkbox>
+            `:r}
     `}renderLabel(){return this._variant===`autocomplete`?super.renderLabel():r}renderTick(){return this._variant===`select`&&!this._isMultiple()&&this.selected?n`<sbb-icon name="tick-small"></sbb-icon>`:r}};export{C as SbbOptGroupElement,S as SbbOptgroupBaseElement,k as SbbOptionBaseElement,j as SbbOptionElement,T as SbbOptionHintElement,E as optionPanelStyles};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.1.0-dev.1782687750",
+  "version": "5.1.0-dev.1782718456",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/8e80fe5ff3e0ca69e26da4170cfdffebd63baa9f"
+    "https://github.com/sbb-design-systems/lyne-components/commit/4151642e21b055068cde0fafced1b2853052fc04"
   ],
   "type": "module",
   "exports": {

package/paginator.pure.js

@@ -60,24 +60,24 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
         `:r}_renderPageNumbers(){return n`
       <ul class="sbb-paginator__pages">
         ${w(this._getVisiblePagesIndex(),e=>e===`ellipsis`?n`
-                  <li class="sbb-paginator__page--ellipsis">
-                    <span class="sbb-paginator__page--ellipsis-item">…</span>
-                  </li>
-                `:n`
-                  <li class="sbb-paginator__page--number">
-                    <button
-                      ?data-selected=${this.pageIndex===e}
-                      ?disabled=${this.disabled}
-                      class="sbb-paginator__page--number-item"
-                      data-index=${e}
-                      aria-label="${this.accessibilityPageLabel?this.accessibilityPageLabel:g[this.language.current]} ${e+1}"
-                      aria-current=${this.pageIndex===e?`true`:r}
-                      @click=${()=>this._onPageNumberClick(e)}
-                    >
-                      <span class="sbb-paginator__page--number-item-label">${e+1}</span>
-                    </button>
-                  </li>
-                `)}
+                <li class="sbb-paginator__page--ellipsis">
+                  <span class="sbb-paginator__page--ellipsis-item">…</span>
+                </li>
+              `:n`
+                <li class="sbb-paginator__page--number">
+                  <button
+                    ?data-selected=${this.pageIndex===e}
+                    ?disabled=${this.disabled}
+                    class="sbb-paginator__page--number-item"
+                    data-index=${e}
+                    aria-label="${this.accessibilityPageLabel?this.accessibilityPageLabel:g[this.language.current]} ${e+1}"
+                    aria-current=${this.pageIndex===e?`true`:r}
+                    @click=${()=>this._onPageNumberClick(e)}
+                  >
+                    <span class="sbb-paginator__page--number-item-label">${e+1}</span>
+                  </button>
+                </li>
+              `)}
       </ul>
     `}renderPaginator(){return n`
       <div class="sbb-paginator">

package/signet.pure.js

@@ -2,22 +2,22 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,uns
 `;let c=(()=>{let c=a,l,u=[],d=[],f,p=[],m=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[i({attribute:`protective-room`,reflect:!0})],f=[o(),i({attribute:`accessibility-label`})],e(this,null,l,{kind:`accessor`,name:`protectiveRoom`,static:!1,private:!1,access:{has:e=>`protectiveRoom`in e,get:e=>e.protectiveRoom,set:(e,t)=>{e.protectiveRoom=t}},metadata:t},u,d),e(this,null,f,{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},p,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-signet`}static{this.styles=[r(s)]}#e=t(this,u,`ideal`);get protectiveRoom(){return this.#e}set protectiveRoom(e){this.#e=e}#t=(t(this,d),t(this,p,`Logo`));get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}render(){return n`
       <span class="sbb-signet__svg-container">
         ${this.protectiveRoom===`panel`?n`
-              <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
-                <path
-                  id="sbb-signet__icon"
-                  d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
-                ></path>
-              </svg>
-            `:n`
-              <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path
-                  id="sbb-signet__icon"
-                  d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
-                ></path>
-              </svg>
-            `}
+                <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
+                  ></path>
+                </svg>
+              `:n`
+                <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
+                  ></path>
+                </svg>
+              `}
       </span>
     `}constructor(){super(...arguments),t(this,m)}}})();export{c as SbbSignetElement};

package/tabs.pure.js

@@ -10,10 +10,10 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
         <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
       ${this.fixedHeight?r`<slot @slotchange=${this._onContentSlotChange}></slot>`:r`
-            <div class="sbb-tab-group-content">
-              <slot @slotchange=${this._onContentSlotChange}></slot>
-            </div>
-          `}
+              <div class="sbb-tab-group-content">
+                <slot @slotchange=${this._onContentSlotChange}></slot>
+              </div>
+            `}
     `}}})();var D=`:host{max-width:100%;display:inline-block;outline:none!important}.sbb-tab-label{cursor:var(--sbb-tab-label-cursor);user-select:none;-webkit-tap-highlight-color:transparent}.sbb-tab-label__icon{flex-shrink:0;display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{color:var(--sbb-tab-label-amount-color);text-decoration:var(--sbb-tab-label-text-decoration);margin:0;font-weight:400}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}
 `;let O=(()=>{let n=s(y(c)),r,o=[],l=[],f,p=[],m=[],g,b=[],x=[];return class extends n{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;r=[a()],f=[d(),a({reflect:!0,type:Boolean})],g=[d(),a({reflect:!0,converter:h})],e(this,null,r,{kind:`accessor`,name:`level`,static:!1,private:!1,access:{has:e=>`level`in e,get:e=>e.level,set:(e,t)=>{e.level=t}},metadata:t},o,l),e(this,null,f,{kind:`accessor`,name:`active`,static:!1,private:!1,access:{has:e=>`active`in e,get:e=>e.active,set:(e,t)=>{e.active=t}},metadata:t},p,m),e(this,null,g,{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},b,x),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tab-label`}static{this.role=`tab`}static{this.styles=[C,i(D)]}#e;get level(){return this.#e}set level(e){this.#e=e}#t;get active(){return this.#t}set active(e){this.#t=e}#n;get amount(){return this.#n}set amount(e){this.#n=e}get tab(){return this.nextElementSibling?.localName===`sbb-tab`?this.nextElementSibling:null}get group(){return this.closest(`sbb-tab-group`)}constructor(){super(),this._selected=!1,this._previousSize=null,this.#e=t(this,o,`1`),this.#t=(t(this,l),t(this,p,!1)),this.#n=(t(this,m),t(this,b,``)),t(this,x),this.addEventListener(`click`,()=>this.activate()),this.addController(new u(this,()=>this.group,{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size??null,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot=`tab-bar`,this.tabIndex=this.active?0:-1}willUpdate(e){super.willUpdate(e),e.has(`active`)&&(this.internals.ariaSelected=`${this.active}`,this.active&&!this.disabled?this.activate():this.deactivate()),e.has(`disabled`)&&this.disabled&&(this.tabIndex=-1,this.active&&(this.deactivate(),this.group?.activateTab(0)))}deactivate(){this.active=!1,this.tab?.deactivate(),this._selected=!1,this.tabIndex=-1}activate(){if(this.disabled)return;let e=this.group?.labels||[],t=e.find(e=>e._selected);if(t!==this){t?.deactivate(),this.active=!0,this.tab?.activate(),this._selected=!0,this.tabIndex=0,this.tab?.dispatchEvent(new Event(`active`,{bubbles:!0,composed:!0}));let n={activeIndex:e.findIndex(e=>e===this),activeTabLabel:this,activeTab:this.tab,previousIndex:e.findIndex(e=>e===t),previousTabLabel:t,previousTab:t?.tab};this.group?.dispatchEvent(new T(n))}}linkToTab(){this.tab&&(this.internals.ariaControlsElements=[this.tab])}render(){let e=`h${Number(this.level)<7?this.level:`1`}`;return _`
         <${v(e)} class="sbb-tab-label">

package/timetable-form.pure.js

@@ -2,9 +2,9 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbElement as r,S
 `,l=class extends r{static{this.elementName=`sbb-timetable-form-details`}static{this.styles=[n(c)]}render(){return e`<slot></slot>`}},u=`:host{--_sbb-timetable-form-field-start-icon-connecting-line-offset:.1875rem;--_sbb-timetable-form-field-start-icon-connecting-line-width:calc((var(--sbb-form-field-min-height) - var(--sbb-icon-svg-height)) / 2 + var(--_sbb-timetable-form-field-start-icon-connecting-line-offset));--sbb-form-field-border-radius:var(--sbb-border-radius-6x);--sbb-form-field-outline-offset:-.3125rem;display:flex}:host(:first-of-type){--sbb-timetable-form-field-route-icon-rotate:90deg}:host(:last-of-type){--sbb-timetable-form-field-route-icon-rotate:-90deg;--sbb-timetable-form-field-route-icon-translate:-.0625rem 0}:host(:where(:not(:last-of-type))) .sbb-form-field__wrapper:after{content:"";border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-border-color-4-inverted);inset-inline:var(--sbb-form-field-padding-inline);position:absolute;inset-block-end:0}.sbb-timetable-form-field__start-route-icon{rotate:var(--sbb-timetable-form-field-route-icon-rotate);translate:var(--sbb-timetable-form-field-route-icon-translate);align-self:center;margin-inline-start:var(--sbb-form-field-padding-inline)}.sbb-timetable-form-field__start-route-icon:after{content:"";border-block-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);width:var(--_sbb-timetable-form-field-start-icon-connecting-line-width);margin-left:calc(var(--_sbb-timetable-form-field-start-icon-connecting-line-offset) * -1);position:absolute;inset-block-start:50%}.sbb-timetable-form-field__via-route-icon{width:var(--sbb-timetable-form-field-route-via-icon-width);align-self:stretch;margin-inline-start:var(--sbb-form-field-padding-inline);position:relative}.sbb-timetable-form-field__via-route-icon:before{content:"";border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);height:100%;margin-inline-start:-.0625rem;position:absolute;inset-inline-start:50%}.sbb-timetable-form-field__via-route-icon:after{content:"";width:var(--sbb-timetable-form-field-route-via-after-dimension);height:var(--sbb-timetable-form-field-route-via-after-dimension);border:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-timetable-form-field-route-icon-background-color);margin-inline-start:-.03125rem;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.sbb-form-field__space-wrapper{flex-grow:1}
 `,d=class extends o{static{this.elementName=`sbb-timetable-form-field`}static{this.styles=[n(u)]}constructor(){super(),this._routeIcon=!1,this.borderless=!0,this.floatingLabel=!0,this.width=`collapse`,this.size=`l`}connectedCallback(){super.connectedCallback(),!t&&this.hydrationComplete.then(()=>this._routeIcon=this.matches(`:first-of-type, :last-of-type`))}render(){return e`
       ${this._routeIcon?e` <sbb-icon
-            name="route-circle-start-small"
-            class="sbb-timetable-form-field__start-route-icon"
-          ></sbb-icon>`:e` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
+              name="route-circle-start-small"
+              class="sbb-timetable-form-field__start-route-icon"
+            ></sbb-icon>`:e` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
       ${super.render()}
     `}},f=`:host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end:var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate:0 -50%;--sbb-timetable-form-swap-button-z-index:1;--sbb-timetable-form-swap-button-position:absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position,relative);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);inset-inline-end:0}
 `,p=class extends s{static{this.elementName=`sbb-timetable-form-swap-button`}static{this.styles=[n(f)]}constructor(){super(),this._languageController=new i(this),this.size=`l`,this.addEventListener(`click`,()=>this._invertFieldValues())}connectedCallback(){super.connectedCallback(),this.toggleState(`timetable-form-context`,!!this.closest(`sbb-timetable-form`))}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=a[this._languageController.current]}_invertFieldValues(){let e=this.closest(`sbb-timetable-form`),t=Array.from(e?.querySelectorAll(`sbb-timetable-form-field`)||[]),n=t.map(e=>e.inputElement?.value);!e||n.length===0||n.every(e=>!e)||n.reverse().forEach((e,n)=>{let r=t[n].inputElement;r instanceof HTMLInputElement&&(r.value=e,r.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),r.dispatchEvent(new Event(`change`,{bubbles:!0})))})}renderIconName(){return super.renderIconName()||`arrow-change-small`}},m=`:host{border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);flex-direction:column;display:flex}

package/timetable-occupancy.pure.js

@@ -1,24 +1,24 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbElement as o,SbbLanguageController as s,SbbNegativeMixin as c,i18nClass as l,listResetStyles as u,screenReaderOnlyStyles as d}from"./core.js";import{SbbTimetableOccupancyIconElement as f}from"./timetable-occupancy-icon.pure.js";var p=`:host{--sbb-icon-svg-width:.890625rem;--sbb-icon-svg-height:v0.75rem;display:inline-block}@media (width>=64rem){:host{--sbb-icon-svg-width:1.1875rem;--sbb-icon-svg-height:v1rem}}:host([negative]){--sbb-timetable-occupancy-color:var(--sbb-color-2-negative)}.sbb-timetable-occupancy__list{align-items:center;gap:var(--sbb-timetable-occupancy-list-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item{align-items:center;gap:var(--sbb-timetable-occupancy-item-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item-class{color:var(--sbb-timetable-occupancy-color);font-size:var(--sbb-timetable-occupancy-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:1}.sbb-timetable-occupancy__list-item-icon{display:flex}
 `;let m=(()=>{let m=c(o),h,g=[],_=[],v,y=[],b=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this.#t=(t(this,_),t(this,y,null)),this._language=(t(this,b),new s(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a({attribute:`first-class-occupancy`})],v=[a({attribute:`second-class-occupancy`})],e(this,null,h,{kind:`accessor`,name:`firstClassOccupancy`,static:!1,private:!1,access:{has:e=>`firstClassOccupancy`in e,get:e=>e.firstClassOccupancy,set:(e,t)=>{e.firstClassOccupancy=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`secondClassOccupancy`,static:!1,private:!1,access:{has:e=>`secondClassOccupancy`in e,get:e=>e.secondClassOccupancy,set:(e,t)=>{e.secondClassOccupancy=t}},metadata:t},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-timetable-occupancy`}static{this.elementDependencies=[f]}static{this.styles=[u,d,i(p)]}#e;get firstClassOccupancy(){return this.#e}set firstClassOccupancy(e){this.#e=e}#t;get secondClassOccupancy(){return this.#t}set secondClassOccupancy(e){this.#t=e}render(){return n` ${(this.firstClassOccupancy||this.secondClassOccupancy)&&n`
-      <ul
-        class="sbb-timetable-occupancy__list"
-        role=${!this.firstClassOccupancy||!this.secondClassOccupancy?`presentation`:r}
-      >
-        ${[this.firstClassOccupancy,this.secondClassOccupancy].map((e,t)=>e&&n`
-              <li class="sbb-timetable-occupancy__list-item">
-                <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
-                  ${this.firstClassOccupancy&&t===0?`1`:`2`}.
-                </span>
-                <span class="sbb-screen-reader-only">
-                  ${`${l[this.firstClassOccupancy&&t===0?`first`:`second`][this._language.current]}.`}
-                </span>
-                <sbb-timetable-occupancy-icon
-                  class="sbb-timetable-occupancy__list-item-icon"
-                  ?negative=${this.negative}
-                  .occupancy=${e}
-                >
-                </sbb-timetable-occupancy-icon>
-              </li>
-            `)}
-      </ul>
-    `}`}}})();export{m as SbbTimetableOccupancyElement};
+        <ul
+          class="sbb-timetable-occupancy__list"
+          role=${!this.firstClassOccupancy||!this.secondClassOccupancy?`presentation`:r}
+        >
+          ${[this.firstClassOccupancy,this.secondClassOccupancy].map((e,t)=>e&&n`
+                <li class="sbb-timetable-occupancy__list-item">
+                  <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
+                    ${this.firstClassOccupancy&&t===0?`1`:`2`}.
+                  </span>
+                  <span class="sbb-screen-reader-only">
+                    ${`${l[this.firstClassOccupancy&&t===0?`first`:`second`][this._language.current]}.`}
+                  </span>
+                  <sbb-timetable-occupancy-icon
+                    class="sbb-timetable-occupancy__list-item-icon"
+                    ?negative=${this.negative}
+                    .occupancy=${e}
+                  >
+                  </sbb-timetable-occupancy-icon>
+                </li>
+              `)}
+        </ul>
+      `}`}}})();export{m as SbbTimetableOccupancyElement};

package/toast.pure.js

@@ -16,12 +16,12 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
               ?negative=${this._isLightMode()}
             ></sbb-divider>
             ${this.readOnly?r:n`<sbb-transparent-button
-                  class="sbb-toast__close-button"
-                  icon-name="cross-small"
-                  ?negative=${this._isLightMode()}
-                  aria-label=${f[this._language.current]}
-                  sbb-toast-close
-                ></sbb-transparent-button>`}
+                    class="sbb-toast__close-button"
+                    icon-name="cross-small"
+                    ?negative=${this._isLightMode()}
+                    aria-label=${f[this._language.current]}
+                    sbb-toast-close
+                  ></sbb-transparent-button>`}
           </div>
         </div>
       </div>

package/train.pure.js

@@ -2,15 +2,15 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
 `,L=class extends F(a){static{this.elementName=`sbb-train-blocked-passage`}static{this.styles=[r(I)]}},R=`:host{--sbb-train-formation-scroll-padding:var(--sbb-train-formation-padding);--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-short);gap:var(--_sbb-train-formation-sectors-to-train-gap,0) 0;padding-block:var(--sbb-train-formation-padding);color:var(--sbb-train-formation-text-color);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);grid-template:"start sectors end""start trains end"/auto 1fr auto;display:grid;position:relative;overflow:auto visible}:host:before,:host:after{content:"";width:var(--sbb-train-formation-scroll-padding);display:block}:host:before{grid-area:start}:host:after{grid-area:end}: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)}:host(:is(:state(has-sectors),[state--has-sectors])){--_sbb-train-formation-sectors-to-train-gap:var(--sbb-train-formation-gap)}:host(:is(:state(has-direction-label),[state--has-direction-label])){--_sbb-train-formation-reserve-spacing-display:block}:host([orientation=vertical]){--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-short);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-flex-direction:column;--_sbb-train-formation-flex-direction-inverted:row;padding-block:unset;padding-inline:var(--sbb-train-formation-padding);gap:0 var(--_sbb-train-formation-sectors-to-train-gap,0);grid-template:"start start""sectors trains"1fr"end end";width:fit-content;overflow:visible auto}:host([orientation=vertical]):before,:host([orientation=vertical]):after{width:auto;height:var(--sbb-train-formation-scroll-padding)}.sbb-train-formation__sectors{gap:var(--sbb-train-formation-wagon-gap);flex-direction:var(--_sbb-train-formation-flex-direction);grid-area:sectors;display:flex}.sbb-train-formation__sector{--_wagon-sum:var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-dimension-long);--_blocked-passage-sum:var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-dimension);--_total-count:calc(var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count));--_gap-sum:calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width:calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--_sector-line-length:calc(.5 * var(--_sector-width));flex:0 0 var(--_sector-width);flex-direction:var(--_sbb-train-formation-flex-direction);justify-content:center;display:flex;overflow:clip visible}:host([orientation=vertical]) .sbb-train-formation__sector{overflow:visible clip}.sbb-train-formation__sector-sticky-wrapper{padding:0 var(--sbb-train-formation-sector-padding);margin:0 var(--sbb-train-formation-sector-margin);white-space:nowrap;position:sticky;inset:auto 0}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper{writing-mode:sideways-lr;padding:var(--sbb-train-formation-sector-padding) 0;margin:var(--sbb-train-formation-sector-margin) 0;inset:0 auto}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:var(--_sector-line-length);position:absolute}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:before,:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:after{width:auto;height:var(--_sector-line-length)}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{flex-direction:var(--_sbb-train-formation-flex-direction);gap:var(--sbb-train-formation-wagon-gap);display:flex}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}
 `;let z=(()=>{let t=c(a),i,s=[],l=[],u,d=[],p=[],m,h=[],g=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[k({reflect:!0})],u=[k({reflect:!0})],m=[A()],D(this,null,i,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:e},s,l),D(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,p),D(this,null,m,{kind:`accessor`,name:`_sectors`,static:!1,private:!1,access:{has:e=>`_sectors`in e,get:e=>e._sectors,set:(e,t)=>{e._sectors=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-train-formation`}static{this.styles=[f,r(R)]}#e;get view(){return this.#e}set view(e){this.#e=e}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get _sectors(){return this.#n}set _sectors(e){this.#n=e}constructor(){super(),this.listChildLocalNames=[`sbb-train`],this.#e=O(this,s,`side`),this.#t=(O(this,l),O(this,d,`horizontal`)),this.#n=(O(this,p),O(this,h,[])),this._language=(O(this,g),new o(this)),this.addEventListener?.(`trainslotchange`,e=>{this._readSectors(e),this._readDirectionLabel(e)}),this.addEventListener?.(`sectorchange`,e=>this._readSectors(e)),this.addEventListener?.(`directionlabelchange`,e=>this._readDirectionLabel(e))}connectedCallback(){super.connectedCallback(),this.classList.add(`sbb-scrollbar`)}_readDirectionLabel(e){e?.stopPropagation(),this.toggleState(`has-direction-label`,Array.from(this.querySelectorAll?.(`sbb-train`)??[]).some(e=>!!e.directionLabel))}_readSectors(e){e?.stopPropagation(),this._sectors=Array.from(this.querySelectorAll?.(`sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage`)??[]).reduce((e,t)=>{let n=e[e.length-1];if(t.localName.startsWith(`sbb-train-wagon`)){let r=t.sector??t.getAttribute(`sector`);!n.label&&r&&(n.label=r),!r||n.label===r?n.wagonCount++:e.push({label:r,wagonCount:1,blockedPassageCount:0})}else t.localName===`sbb-train-blocked-passage`&&n.blockedPassageCount++;return e},[{wagonCount:0,blockedPassageCount:0}]),this.toggleState(`has-sectors`,this._sectors.some(e=>!!e.label))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&(this._readSectors(),this._readDirectionLabel())}render(){return e`
       ${this._sectors.length&&this._sectors[0].label!==void 0?e`<div class="sbb-train-formation__sectors" aria-hidden="true">
-            ${this._sectors.map(t=>e`<span
-                  class="sbb-train-formation__sector"
-                  style=${j({"--sbb-train-formation-wagon-count":t.wagonCount,"--sbb-train-formation-wagon-blocked-passage-count":t.blockedPassageCount})}
-                >
-                  <span class="sbb-train-formation__sector-sticky-wrapper">
-                    ${`${t.wagonCount===1&&t.label?S[this._language.current]:x[this._language.current]} ${t.label?t.label:``}`}
-                  </span>
-                </span>`)}
-          </div>`:n}
+              ${this._sectors.map(t=>e`<span
+                    class="sbb-train-formation__sector"
+                    style=${j({"--sbb-train-formation-wagon-count":t.wagonCount,"--sbb-train-formation-wagon-blocked-passage-count":t.blockedPassageCount})}
+                  >
+                    <span class="sbb-train-formation__sector-sticky-wrapper">
+                      ${`${t.wagonCount===1&&t.label?S[this._language.current]:x[this._language.current]} ${t.label?t.label:``}`}
+                    </span>
+                  </span>`)}
+            </div>`:n}
 
       <div class="sbb-train-formation__trains">
         ${this.renderList({class:`sbb-train-formation__train-list`,ariaLabel:w[this._language.current]})}
@@ -36,13 +36,13 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
                 ${this.label?M`<li class="sbb-screen-reader-only">${a}</li>`:n}
                 ${this.wagonClass&&this.wagonType!==`closed`?M`<li class="sbb-train-wagon__class">${o}</li>`:n}
                 ${this.occupancy&&this.wagonType!==`closed`?M`<sbb-timetable-occupancy-icon
-                      class="sbb-train-wagon__occupancy"
-                      role="listitem"
-                      occupancy=${this.occupancy}
-                    ></sbb-timetable-occupancy-icon>`:n}
+                        class="sbb-train-wagon__occupancy"
+                        role="listitem"
+                        occupancy=${this.occupancy}
+                      ></sbb-timetable-occupancy-icon>`:n}
                 ${t?M`<li class="sbb-screen-reader-only">
-                      ${h[e][this._language.current]}
-                    </li>`:n}
+                        ${h[e][this._language.current]}
+                      </li>`:n}
               </ul>`,()=>M`<div class="sbb-train-wagon__compartment">
                 <span class="sbb-screen-reader-only">
                   ${`${this._wagonTypeLabel()}${this.sector?`, ${i}`:``}`}
@@ -50,17 +50,17 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
                 ${this.label?M`<span class="sbb-screen-reader-only">${a}</span>`:n}
                 ${this.wagonClass&&this.wagonType!==`closed`?M`<span class="sbb-train-wagon__class">${o}</span>`:n}
                 ${this.occupancy&&this.wagonType!==`closed`?M`<sbb-timetable-occupancy-icon
-                      class="sbb-train-wagon__occupancy"
-                      occupancy=${this.occupancy}
-                    ></sbb-timetable-occupancy-icon>`:n}
+                        class="sbb-train-wagon__occupancy"
+                        occupancy=${this.occupancy}
+                      ></sbb-timetable-occupancy-icon>`:n}
                 ${t?M`<span class="sbb-screen-reader-only">
-                      ${h[e][this._language.current]}
-                    </span>`:n}
+                        ${h[e][this._language.current]}
+                      </span>`:n}
               </div> `)}
           ${V[this.wagonType]?M`<sbb-icon
-                name=${V[this.wagonType]}
-                class="sbb-train-wagon__main-icon"
-              ></sbb-icon>`:n}
+                  name=${V[this.wagonType]}
+                  class="sbb-train-wagon__main-icon"
+                ></sbb-icon>`:n}
           <svg class="sbb-train-wagon__shape" viewBox="0 0 84 36" aria-hidden="true">
             <path d=${s}></path>
             <path
@@ -73,18 +73,18 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
             ></path>
           </svg>
           ${this.additionalAccessibilityText?M`<span class="sbb-screen-reader-only"
-                >, ${this.additionalAccessibilityText}</span
-              >`:n}
+                  >, ${this.additionalAccessibilityText}</span
+                >`:n}
           <span
             class="sbb-train-wagon__information-wrapper"
             ?hidden=${!this.listChildren.length&&!this.label}
           >
             ${this.label?M`<span aria-hidden="true" class="sbb-train-wagon__label">${this.label}</span>`:n}
             ${this.label&&this.listChildren.length?M`<sbb-divider
-                  orientation=${this.orientation===`vertical`?`horizontal`:`vertical`}
-                  aria-hidden="true"
-                  class="sbb-train-wagon__label-divider"
-                ></sbb-divider>`:n}
+                    orientation=${this.orientation===`vertical`?`horizontal`:`vertical`}
+                    aria-hidden="true"
+                    class="sbb-train-wagon__label-divider"
+                  ></sbb-divider>`:n}
             ${this.renderList({class:`sbb-train-wagon__attribute-icon-list`,ariaLabel:p[this._language.current]})}
           </span>
         </div>

package/visual-checkbox.pure.js

@@ -1,17 +1,17 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbElement as s,SbbNegativeMixin as c,forceType as l}from"./core.js";var u=`:host{width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor);outline:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);outline-offset:calc(-1 * var(--sbb-visual-checkbox-border-width));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([size=xs]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-m)}:host([negative]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-negative);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-negative)}:host([disabled]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-disabled);--sbb-visual-checkbox-border-style:var(--sbb-visual-checkbox-border-style-disabled);--sbb-visual-checkbox-cursor:var(--sbb-cursor-default);--sbb-visual-checkbox-border-color:var(--sbb-visual-checkbox-border-color-disabled);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-disabled)}:host([disabled][negative]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-negative-disabled);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-disabled-negative)}@media (forced-colors:active){:host([indeterminate]){--sbb-visual-checkbox-selection-color:ButtonBorder}:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color:GrayText}:host([checked]:not([indeterminate])){--sbb-visual-checkbox-background-color:Highlight;--sbb-visual-checkbox-border-width:0}:host([disabled][checked]:not([indeterminate])){--sbb-visual-checkbox-background-color:GrayText}}path{stroke:var(--sbb-visual-checkbox-selection-color)}
 `;let d=(()=>{let d=o(c(s)),f,p=[],m=[],h,g=[],_=[],v,y=[],b=[];return class extends d{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;f=[l(),a({reflect:!0,type:Boolean})],h=[l(),a({reflect:!0,type:Boolean})],v=[a({reflect:!0})],e(this,null,f,{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},p,m),e(this,null,h,{kind:`accessor`,name:`indeterminate`,static:!1,private:!1,access:{has:e=>`indeterminate`in e,get:e=>e.indeterminate,set:(e,t)=>{e.indeterminate=t}},metadata:t},g,_),e(this,null,v,{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},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-visual-checkbox`}static{this.styles=[i(u)]}#e=t(this,p,!1);get checked(){return this.#e}set checked(e){this.#e=e}#t=(t(this,m),t(this,g,!1));get indeterminate(){return this.#t}set indeterminate(e){this.#t=e}#n=(t(this,_),t(this,y,null));get size(){return this.#n}set size(e){this.#n=e}render(){return n`
       ${this.checked||this.indeterminate?n`<svg
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            width="100%"
-            height="100%"
-          >
-            <path
-              fill="none"
-              d=${this.indeterminate?`M9 12H15`:`M8 12.3304L10.4615 15L16 9`}
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>`:r}
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              width="100%"
+              height="100%"
+            >
+              <path
+                fill="none"
+                d=${this.indeterminate?`M9 12H15`:`M8 12.3304L10.4615 15L16 9`}
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>`:r}
     `}constructor(){super(...arguments),t(this,b)}}})();export{d as SbbVisualCheckboxElement};