@sbb-esta/lyne-elements 5.1.0 → 5.3.0

package/date-input.pure.js

@@ -1,2 +1,2 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedInputMixin as o,defaultDateAdapter as s,i18nDateInvalid as c,i18nDateMax as l,i18nDateMin as u,i18nDatePickerPlaceholder as d,plainDate as f,plainDateConverter as p,readConfig as m}from"./core.js";var h=`:host{cursor:text;align-items:center;min-width:9.375rem;max-width:100%;font-weight:400;display:inline-flex}@media (forced-colors:active){:host{color:fieldtext}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media (forced-colors:active){:host(:empty):after{color:graytext}}
-`;Object.assign(ValidityState.prototype,{get sbbDateFilter(){return!1}});let g=(()=>{let g=o(a),_=[],v,y,b=[],x=[],S,C=[],w=[],T,E,D=[],O=[];return class extends g{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(g[Symbol.metadata]??null):void 0;v=[i({attribute:!1})],y=[f(),i({converter:p,reflect:!0})],S=[f(),i({converter:p,reflect:!0})],T=[i({attribute:!1})],E=[i({attribute:`weekday-style`})],e(this,null,v,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,_),e(this,null,y,{kind:`accessor`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,get:e=>e.min,set:(e,t)=>{e.min=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,get:e=>e.max,set:(e,t)=>{e.max=t}},metadata:t},C,w),e(this,null,T,{kind:`setter`,name:`dateFilter`,static:!1,private:!1,access:{has:e=>`dateFilter`in e,set:(e,t)=>{e.dateFilter=t}},metadata:t},null,_),e(this,null,E,{kind:`accessor`,name:`weekdayStyle`,static:!1,private:!1,access:{has:e=>`weekdayStyle`in e,get:e=>e.weekdayStyle,set:(e,t)=>{e.weekdayStyle=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-date-input`}static{this.styles=[r(h)]}set value(e){this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatDate()),super.value=e}get value(){return super.value??``}set valueAsDate(e){if(e=this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)),!(this.isSelected()&&(e===null||this._dateAdapter.sameDate(e,this._dateAdapter.parse(this.value))))){if(!e)this._valueAsDate=null,this._valueCache=[``,null],this.value=``;else if(!this._dateAdapter.isDateInstance(this._valueAsDate)||this._dateAdapter.compareDate(this._valueAsDate,e)!==0){this._valueAsDate=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),this._dateAdapter.getDate(e));let t=this._formatDate();this._valueCache=[t,this._valueAsDate],this.value=t}}}get valueAsDate(){return this._valueAsDate?this._dateAdapter.clone(this._valueAsDate):null}#e;get min(){return this.#e}set min(e){this.#e=e}#t;get max(){return this.#t}set max(e){this.#t=e}set dateFilter(e){this._dateFilter=e}get dateFilter(){return this._dateFilter}#n;get weekdayStyle(){return this.#n}set weekdayStyle(e){this.#n=e}get datepicker(){return this.parentElement.querySelector(`sbb-datepicker`)}constructor(){super(),this._valueAsDate=t(this,_),this.#e=t(this,b,null),this.#t=(t(this,x),t(this,C,null)),this.#n=(t(this,w),t(this,D,`short`)),this._valueCache=t(this,O),this._dateAdapter=m().datetime?.dateAdapter??s,this._placeholderMutable=!1,this._dateFilter=()=>!0,this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0})}static resolveAssociation(e){if(e.hasAttribute(`input`)||e.input)return;let t=e.closest(`sbb-form-field`)?.querySelector(`sbb-date-input`);t&&(e.input=t)}connectedCallback(){super.connectedCallback(),this.placeholder||=(this._placeholderMutable=!0,d[this.language.current]);for(let e of Array.from(this.closest(`sbb-form-field`)?.children??[]))customElements.upgrade?.(e),e.constructor.sbbDateInputAssociated&&!e.hasAttribute(`input`)&&!e.input&&(e.input=this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),this.hasUpdated&&!e?(this._updateValueDateFormat(),this._placeholderMutable&&(this.placeholder=d[this.language.current])):e===`weekdayStyle`&&this._updateValueDateFormat(),this.isConnected&&this.dispatchEvent(new Event(`ɵchange`))}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._dateAdapter.toIso8601(this.valueAsDate);this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsDate=this._dateAdapter.parse(e),this._valueCache=[e,this._valueAsDate])}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatDate();this.value!==e&&(super.value=e)}}_formatDate(){return this._dateAdapter.format(this.valueAsDate,{weekdayStyle:this.weekdayStyle})}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._dateAdapter.isValid(this.valueAsDate)?this._dateAdapter.isValid(this.min)&&this._dateAdapter.compareDate(this.min,this.valueAsDate)>0?this.setValidityFlag(`rangeUnderflow`,u(this._dateAdapter.format(this.min,{weekdayStyle:`none`}))[this.language.current]):this._dateAdapter.isValid(this.max)&&this._dateAdapter.compareDate(this.valueAsDate,this.max)>0?this.setValidityFlag(`rangeOverflow`,l(this._dateAdapter.format(this.max,{weekdayStyle:`none`}))[this.language.current]):this.dateFilter&&!this.dateFilter(this.valueAsDate)?this.setValidityFlag(`sbbDateFilter`,c[this.language.current]):this._removeValidityErrors():this.setValidityFlag(`badInput`,c[this.language.current]):this._removeValidityErrors()}_removeValidityErrors(){[`badInput`,`rangeUnderflow`,`rangeOverflow`,`sbbDateFilter`].forEach(e=>this.removeValidityFlag(e))}}})();export{g as SbbDateInputElement};
+`;Object.assign(ValidityState.prototype,{get sbbDateFilter(){return!1}});let g=(()=>{let g=o(a),_=[],v,y,b=[],x=[],S,C=[],w=[],T,E,D=[],O=[];return class extends g{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(g[Symbol.metadata]??null):void 0;v=[i({attribute:!1})],y=[f(),i({converter:p,reflect:!0})],S=[f(),i({converter:p,reflect:!0})],T=[i({attribute:!1})],E=[i({attribute:`weekday-style`})],e(this,null,v,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,_),e(this,null,y,{kind:`accessor`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,get:e=>e.min,set:(e,t)=>{e.min=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,get:e=>e.max,set:(e,t)=>{e.max=t}},metadata:t},C,w),e(this,null,T,{kind:`setter`,name:`dateFilter`,static:!1,private:!1,access:{has:e=>`dateFilter`in e,set:(e,t)=>{e.dateFilter=t}},metadata:t},null,_),e(this,null,E,{kind:`accessor`,name:`weekdayStyle`,static:!1,private:!1,access:{has:e=>`weekdayStyle`in e,get:e=>e.weekdayStyle,set:(e,t)=>{e.weekdayStyle=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-date-input`}static{this.styles=[r(h)]}set value(e){this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatDate()),super.value=e}get value(){return super.value??``}set valueAsDate(e){if(e=this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)),!(this.isSelected()&&(e===null||this._dateAdapter.sameDate(e,this._dateAdapter.parse(this.value))))){if(!e)this._valueAsDate=null,this._valueCache=[``,null],this.value=``;else if(!this._dateAdapter.isDateInstance(this._valueAsDate)||this._dateAdapter.compareDate(this._valueAsDate,e)!==0){this._valueAsDate=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),this._dateAdapter.getDate(e));let t=this._formatDate();this._valueCache=[t,this._valueAsDate],this.value=t}}}get valueAsDate(){return this._valueAsDate?this._dateAdapter.clone(this._valueAsDate):null}#e;get min(){return this.#e}set min(e){this.#e=e}#t;get max(){return this.#t}set max(e){this.#t=e}set dateFilter(e){this._dateFilter=e}get dateFilter(){return this._dateFilter}#n;get weekdayStyle(){return this.#n}set weekdayStyle(e){this.#n=e}get datepicker(){return this.parentElement.querySelector(`sbb-datepicker`)}constructor(){super(),this._valueAsDate=t(this,_),this.#e=t(this,b,null),this.#t=(t(this,x),t(this,C,null)),this.#n=(t(this,w),t(this,D,`short`)),this._valueCache=t(this,O),this._dateAdapter=m().datetime?.dateAdapter??s,this._placeholderMutable=!1,this._dateFilter=()=>!0,this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0})}static resolveAssociation(e){if(e.hasAttribute(`input`)||e.input)return;let t=e.closest(`sbb-form-field`)?.querySelector(`sbb-date-input`);t&&(e.input=t)}connectedCallback(){super.connectedCallback(),this.placeholder||=(this._placeholderMutable=!0,d[this.language.current]);for(let e of Array.from(this.closest(`sbb-form-field`)?.children??[]))customElements.upgrade?.(e),e.constructor.sbbDateInputAssociated&&!e.hasAttribute(`input`)&&!e.input&&(e.input=this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),this.hasUpdated&&!e?(this._updateValueDateFormat(),this._placeholderMutable&&(this.placeholder=d[this.language.current])):e===`weekdayStyle`&&this._updateValueDateFormat(),this.isConnected&&this.dispatchEvent(new Event(`ɵchange`))}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._dateAdapter.toIso8601(this.valueAsDate);this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsDate=this._dateAdapter.parse(e),this._valueCache=[e,this._valueAsDate])}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatDate();this.value!==e&&(super.value=e)}}_formatDate(){return this._dateAdapter.format(this.valueAsDate,{weekdayStyle:this.weekdayStyle})}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._dateAdapter.isValid(this.valueAsDate)?this._dateAdapter.isValid(this.min)&&this._dateAdapter.compareDate(this.min,this.valueAsDate)>0?(this._removeValidityErrors(`rangeUnderflow`),this.setValidityFlag(`rangeUnderflow`,u(this._dateAdapter.format(this.min,{weekdayStyle:`none`}))[this.language.current])):this._dateAdapter.isValid(this.max)&&this._dateAdapter.compareDate(this.valueAsDate,this.max)>0?(this._removeValidityErrors(`rangeOverflow`),this.setValidityFlag(`rangeOverflow`,l(this._dateAdapter.format(this.max,{weekdayStyle:`none`}))[this.language.current])):this.dateFilter&&!this.dateFilter(this.valueAsDate)?(this._removeValidityErrors(`sbbDateFilter`),this.setValidityFlag(`sbbDateFilter`,c[this.language.current])):this._removeValidityErrors():(this._removeValidityErrors(`badInput`),this.setValidityFlag(`badInput`,c[this.language.current])):this._removeValidityErrors()}_removeValidityErrors(e){[`badInput`,`rangeUnderflow`,`rangeOverflow`,`sbbDateFilter`].filter(t=>t!==e).forEach(e=>this.removeValidityFlag(e))}}})();export{g as SbbDateInputElement};

package/development/action-group.pure.js

@@ -2,7 +2,7 @@ import { html, unsafeCSS } from "lit";
 import { SbbElement } from "./core.js";
 
 //#region src/elements/action-group/action-group.scss?inline
-var action_group_default = ":host {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  gap: var(--sbb-action-group-gap);\n}\n\n:host(.sbb-orientation-vertical-full-width) {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n:host(:where(.sbb-orientation-vertical,\n.sbb-orientation-horizontal-from-small,\n.sbb-orientation-horizontal-from-large,\n.sbb-orientation-horizontal-from-ultra)) {\n  align-items: start;\n}\n\n@media (min-width: calc(37.5rem)) {\n  :host(.sbb-orientation-horizontal-from-small) {\n    align-items: center;\n  }\n}\n\n@media (min-width: calc(64rem)) {\n  :host(.sbb-orientation-horizontal-from-large) {\n    align-items: center;\n  }\n}\n\n@media (min-width: calc(90rem)) {\n  :host(.sbb-orientation-horizontal-from-ultra) {\n    align-items: center;\n  }\n}\n";
+var action_group_default = ":host {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  gap: var(--sbb-action-group-gap);\n  flex-wrap: wrap;\n}\n\n:host(.sbb-orientation-vertical-full-width) {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n:host(:where(.sbb-orientation-vertical,\n.sbb-orientation-horizontal-from-small,\n.sbb-orientation-horizontal-from-large,\n.sbb-orientation-horizontal-from-ultra)) {\n  align-items: start;\n}\n\n@media (min-width: calc(37.5rem)) {\n  :host(.sbb-orientation-horizontal-from-small) {\n    align-items: center;\n  }\n}\n\n@media (min-width: calc(64rem)) {\n  :host(.sbb-orientation-horizontal-from-large) {\n    align-items: center;\n  }\n}\n\n@media (min-width: calc(90rem)) {\n  :host(.sbb-orientation-horizontal-from-ultra) {\n    align-items: center;\n  }\n}\n";
 
 //#endregion
 //#region src/elements/action-group/action-group.component.ts

package/development/alert.pure.js

@@ -369,20 +369,20 @@ let SbbAlertElement = (() => {
             </p>
           </span>
           ${!this.readOnly ? html`<span class="sbb-alert__close-button-wrapper">
-                <sbb-divider
-                  orientation="vertical"
-                  ?negative=${this._isLightMode()}
-                  class="sbb-alert__close-button-divider"
-                ></sbb-divider>
-                <sbb-transparent-button
-                  ?negative=${this._isLightMode()}
-                  size=${this.size === "l" ? "m" : this.size || nothing}
-                  icon-name="cross-small"
-                  @click=${() => this.close()}
-                  aria-label=${i18nCloseAlert[this._language.current]}
-                  class="sbb-alert__close-button"
-                ></sbb-transparent-button>
-              </span>` : nothing}
+                  <sbb-divider
+                    orientation="vertical"
+                    ?negative=${this._isLightMode()}
+                    class="sbb-alert__close-button-divider"
+                  ></sbb-divider>
+                  <sbb-transparent-button
+                    ?negative=${this._isLightMode()}
+                    size=${this.size === "l" ? "m" : this.size || nothing}
+                    icon-name="cross-small"
+                    @click=${() => this.close()}
+                    aria-label=${i18nCloseAlert[this._language.current]}
+                    class="sbb-alert__close-button"
+                  ></sbb-transparent-button>
+                </span>` : nothing}
         </div>
       </div>
     `;

package/development/breadcrumb.pure.js

@@ -178,9 +178,9 @@ let SbbBreadcrumbGroupElement = (() => {
         <li class="sbb-breadcrumb-group__item">
           <slot name=${slot.name}></slot>
           ${index !== array.length - 1 ? html`<sbb-icon
-                name="chevron-small-right-small"
-                class="sbb-breadcrumb-group__divider-icon"
-              ></sbb-icon>` : nothing}
+                  name="chevron-small-right-small"
+                  class="sbb-breadcrumb-group__divider-icon"
+                ></sbb-icon>` : nothing}
         </li>
       `);
 		}

package/development/calendar.pure.js

@@ -1604,17 +1604,17 @@ let SbbCalendarElement = (() => {
               ${this._weekdays.map((weekDay, index) => html`
                   <th class="sbb-calendar__table-header-cell">
                     ${this.multiple ? html`
-                          <sbb-calendar-weekday
-                            .value=${weekDay}
-                            @click=${() => {
+                            <sbb-calendar-weekday
+                              .value=${weekDay}
+                              @click=${() => {
 				const days = weeksForSelectMultipleWeekDays.filter((day) => day.weekDayValue === (index + 1) % 7);
 				this._selectMultipleDates(days);
 			}}
-                          ></sbb-calendar-weekday>
-                        ` : html`
-                          <span class="sbb-screen-reader-only">${weekDay.long}</span>
-                          <span aria-hidden="true">${weekDay.narrow}</span>
-                        `}
+                            ></sbb-calendar-weekday>
+                          ` : html`
+                            <span class="sbb-screen-reader-only">${weekDay.long}</span>
+                            <span aria-hidden="true">${weekDay.narrow}</span>
+                          `}
                   </th>
                 `)}
             </tr>
@@ -1625,23 +1625,23 @@ let SbbCalendarElement = (() => {
 				if (rowIndex === 0 && firstRowOffset) return html`
                   <tr>
                     ${this.weekNumbers ? html`
-                          <td class="sbb-calendar__table-header-cell-vertical">
-                            ${this.multiple ? html`
-                                  <sbb-calendar-weeknumber
-                                    .value=${weekNumbers[0]}
-                                    @click=${() => {
+                            <td class="sbb-calendar__table-header-cell-vertical">
+                              ${this.multiple ? html`
+                                      <sbb-calendar-weeknumber
+                                        .value=${weekNumbers[0]}
+                                        @click=${() => {
 					const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[0]);
 					this._selectMultipleDates(days);
 				}}
-                                  ></sbb-calendar-weeknumber>
-                                ` : html`
-                                  <span class="sbb-screen-reader-only"
-                                    >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[0]}`}</span
-                                  >
-                                  <span aria-hidden="true">${weekNumbers[0]}</span>
-                                `}
-                          </td>
-                        ` : nothing}
+                                      ></sbb-calendar-weeknumber>
+                                    ` : html`
+                                      <span class="sbb-screen-reader-only"
+                                        >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[0]}`}</span
+                                      >
+                                      <span aria-hidden="true">${weekNumbers[0]}</span>
+                                    `}
+                            </td>
+                          ` : nothing}
                     ${[...Array(firstRowOffset).keys()].map(() => html`<td class="sbb-calendar__table-data"></td>`)}
                     ${this._createDayCells(week)}
                   </tr>
@@ -1649,23 +1649,23 @@ let SbbCalendarElement = (() => {
 				return html`
                 <tr>
                   ${this.weekNumbers ? html`
-                        <td class="sbb-calendar__table-header-cell-vertical">
-                          ${this.multiple ? html`
-                                <sbb-calendar-weeknumber
-                                  .value=${weekNumbers[rowIndex]}
-                                  @click=${() => {
+                          <td class="sbb-calendar__table-header-cell-vertical">
+                            ${this.multiple ? html`
+                                    <sbb-calendar-weeknumber
+                                      .value=${weekNumbers[rowIndex]}
+                                      @click=${() => {
 					const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[rowIndex]);
 					this._selectMultipleDates(days);
 				}}
-                                ></sbb-calendar-weeknumber>
-                              ` : html`
-                                <span class="sbb-screen-reader-only"
-                                  >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[rowIndex]}`}</span
-                                >
-                                <span aria-hidden="true">${weekNumbers[rowIndex]}</span>
-                              `}
-                        </td>
-                      ` : nothing}
+                                    ></sbb-calendar-weeknumber>
+                                  ` : html`
+                                    <span class="sbb-screen-reader-only"
+                                      >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[rowIndex]}`}</span
+                                    >
+                                    <span aria-hidden="true">${weekNumbers[rowIndex]}</span>
+                                  `}
+                          </td>
+                        ` : nothing}
                   ${this._createDayCells(week)}
                 </tr>
               `;
@@ -1692,30 +1692,30 @@ let SbbCalendarElement = (() => {
           @focusout=${(event) => this._handleTableBlur(event.relatedTarget)}
         >
           ${this.weekNumbers ? html`
-                <thead>
-                  <tr>
-                    <th class="sbb-calendar__table-data"></th>
-                    ${weekNumbers.map((weekNumber) => html`
-                        <th class="sbb-calendar__table-header-cell">
-                          ${this.multiple ? html`
-                                <sbb-calendar-weeknumber
-                                  .value=${weekNumber}
-                                  @click=${() => {
+                  <thead>
+                    <tr>
+                      <th class="sbb-calendar__table-data"></th>
+                      ${weekNumbers.map((weekNumber) => html`
+                          <th class="sbb-calendar__table-header-cell">
+                            ${this.multiple ? html`
+                                    <sbb-calendar-weeknumber
+                                      .value=${weekNumber}
+                                      @click=${() => {
 				const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumber);
 				this._selectMultipleDates(days);
 			}}
-                                ></sbb-calendar-weeknumber>
-                              ` : html`
-                                <span class="sbb-screen-reader-only"
-                                  >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumber}`}</span
-                                >
-                                <span aria-hidden="true">${weekNumber}</span>
-                              `}
-                        </th>
-                      `)}
-                  </tr>
-                </thead>
-              ` : nothing}
+                                    ></sbb-calendar-weeknumber>
+                                  ` : html`
+                                    <span class="sbb-screen-reader-only"
+                                      >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumber}`}</span
+                                    >
+                                    <span aria-hidden="true">${weekNumber}</span>
+                                  `}
+                          </th>
+                        `)}
+                    </tr>
+                  </thead>
+                ` : nothing}
           <tbody>
             ${weeks.map((week, rowIndex) => {
 				const weekday = this._weekdays[rowIndex];
@@ -1723,16 +1723,16 @@ let SbbCalendarElement = (() => {
                 <tr>
                   <td class="sbb-calendar__table-header-cell-vertical">
                     ${this.multiple ? html`
-                          <sbb-calendar-weekday
-                            .value=${weekday}
-                            @click=${() => this._selectMultipleDates(week)}
-                          >
-                            ${weekday.narrow}
-                          </sbb-calendar-weekday>
-                        ` : html`
-                          <span class="sbb-screen-reader-only">${weekday.long}</span>
-                          <span aria-hidden="true">${weekday.narrow}</span>
-                        `}
+                            <sbb-calendar-weekday
+                              .value=${weekday}
+                              @click=${() => this._selectMultipleDates(week)}
+                            >
+                              ${weekday.narrow}
+                            </sbb-calendar-weekday>
+                          ` : html`
+                            <span class="sbb-screen-reader-only">${weekday.long}</span>
+                            <span aria-hidden="true">${weekday.narrow}</span>
+                          `}
                   </td>
                   ${rowIndex < weekOffset ? html`<td class="sbb-calendar__table-data"></td>` : nothing}
                   ${this._createDayCells(week)}

package/development/carousel.pure.js

@@ -6,7 +6,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { property } from "lit/decorators.js";
 
 //#region src/elements/carousel/carousel-item/carousel-item.scss?inline
-var carousel_item_default = ":host {\n  display: flex;\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n::slotted(sbb-image) {\n  border-radius: unset;\n}\n";
+var carousel_item_default = ":host {\n  display: flex;\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n";
 
 //#endregion
 //#region src/elements/carousel/carousel-item/carousel-item.component.ts

package/development/chip/chip-group/chip-group.component.d.ts

@@ -1,5 +1,5 @@
 import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
-import { type FormRestoreReason, type FormRestoreState, SbbElement } from '../../core.ts';
+import { type FormRestoreReason, type FormRestoreState, SbbElement, type SbbElementType } from '../../core.ts';
 export declare class SbbChipInputTokenEndEvent<T = string> extends Event {
     /** The element that triggered the chip creation */
     origin: 'input' | 'autocomplete';
@@ -26,6 +26,7 @@ declare const SbbChipGroupElement_base: import("../../core.ts").AbstractConstruc
  */
 export declare class SbbChipGroupElement<T = string> extends SbbChipGroupElement_base {
     static readonly elementName: string;
+    static elementDependencies: SbbElementType[];
     static readonly role = "listbox";
     static styles: CSSResultGroup;
     static readonly events: {

package/development/chip.pure.js

@@ -237,6 +237,9 @@ let SbbChipGroupElement = (() => {
 		static {
 			this.elementName = "sbb-chip-group";
 		}
+		static {
+			this.elementDependencies = [SbbChipElement];
+		}
 		static {
 			this.role = "listbox";
 		}

package/development/clock.pure.js

@@ -69,10 +69,10 @@ let SbbClockElement = (() => {
 			this._moveHoursHandFn = () => this._moveHoursHand();
 			/** Callback function for minutes hand. */
 			this._moveMinutesHandFn = () => this._moveMinutesHand();
-			this._handlePageVisibilityChange = async () => {
+			this._handlePageVisibilityChange = () => {
 				if (this.now) return;
-				if (document.visibilityState === "hidden") await this._stopClock();
-				else await this._startClock();
+				if (document.visibilityState === "hidden") this._stopClock();
+				else this._startClock();
 			};
 		}
 		static {
@@ -122,7 +122,8 @@ let SbbClockElement = (() => {
 		}
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
-			if (!isServer && changedProperties.has("now")) this._startOrConfigureClock();
+			if (isServer || !this.hasUpdated) return;
+			if (changedProperties.has("now")) this._startOrConfigureClock();
 		}
 		firstUpdated(changedProperties) {
 			super.firstUpdated(changedProperties);
@@ -136,26 +137,23 @@ let SbbClockElement = (() => {
 			this._removeEventListeners();
 			clearInterval(this._resetIntervalId);
 		}
-		async _startOrConfigureClock() {
+		_startOrConfigureClock() {
 			if (this.now) {
-				await this._stopClock();
+				this._stopClock();
 				this._resetSecondsHandAnimation();
 				this._setHandsStartingPosition();
-			} else await this._startClock();
+			} else this._startClock();
 		}
 		/** Starts the clock by defining the hands starting position then starting the animations. */
-		async _startClock() {
+		_startClock() {
 			this._clockHandHours?.addEventListener("animationend", this._moveHoursHandFn, ADD_EVENT_LISTENER_OPTIONS);
 			this._clockHandSeconds?.addEventListener("animationend", this._moveMinutesHandFn, ADD_EVENT_LISTENER_OPTIONS);
-			await new Promise((resolve) => setTimeout(() => {
-				this._setHandsStartingPosition();
-				this.style?.setProperty("--sbb-clock-animation-play-state", "running");
-				this._state = "running";
-				resolve();
-			}, INITIAL_TIMEOUT_DURATION));
+			this._setHandsStartingPosition();
+			this.style?.setProperty("--sbb-clock-animation-play-state", "running");
+			this._state = "running";
 		}
 		/** Stops the clock by removing all the animations. */
-		async _stopClock() {
+		_stopClock() {
 			clearInterval(this._handMovement);
 			this._removeSecondsAnimationStyles();
 			this._removeHoursAnimationStyles();
@@ -170,8 +168,8 @@ let SbbClockElement = (() => {
 		*/
 		async _resetClock() {
 			if (this._state !== "running") return;
-			await this._stopClock();
-			await this._startClock();
+			this._stopClock();
+			setTimeout(() => this._startClock(), INITIAL_TIMEOUT_DURATION);
 		}
 		/** Set the starting position for the three hands on the clock face. */
 		_setHandsStartingPosition() {

package/development/core/i18n/i18n.d.ts

@@ -18,6 +18,8 @@ export declare const i18nRestaurantWagonLabel: Record<string, string>;
 export declare const i18nBlockedPassage: Record<string, Record<string, string>>;
 export declare const i18nAdditionalWagonInformationHeading: Record<string, string>;
 export declare const i18nDeparture: Record<string, string>;
+export declare const i18nNonAccessible: Record<string, string>;
+export declare const i18nDownload: Record<string, string>;
 export declare const i18nDurationMinute: Record<string, Record<string, Record<string, string>>>;
 export declare const i18nDurationHour: Record<string, Record<string, Record<string, string>>>;
 export declare const i18nDurationDay: Record<string, Record<string, Record<string, string>>>;

package/development/core.js

@@ -1817,6 +1817,18 @@ const i18nDeparture = {
 	fr: "Départ",
 	it: "Partenza"
 };
+const i18nNonAccessible = {
+	de: "nicht barrierefrei",
+	en: "not accessible",
+	fr: "non accessible",
+	it: "non accessibile"
+};
+const i18nDownload = {
+	de: "herunterladen",
+	en: "download",
+	fr: "télécharger",
+	it: "scaricare"
+};
 const i18nDurationMinute = {
 	single: {
 		long: {
@@ -2696,8 +2708,8 @@ let SbbLinkBaseElement = (() => {
         ${renderContent}
       </a>
       ${opensInNewWindow ? html`<span id="sbb-link-new-window" hidden
-            >${i18nTargetOpensInNewWindow[this.language.current]}</span
-          >` : nothing}
+              >${i18nTargetOpensInNewWindow[this.language.current]}</span
+            >` : nothing}
     `;
 		}
 	};
@@ -6148,4 +6160,4 @@ function removeAriaComboBoxAttributes(trigger) {
 }
 
 //#endregion
-export { DateAdapter, FORMAT_DATE, FRIDAY, ISO8601_FORMAT_DATE, IS_FOCUSABLE_QUERY, InteractivityChecker, IsFocusableConfig, MONDAY, NativeDateAdapter, SATURDAY, SUNDAY, SbbActionBaseElement, SbbAnimationCompleteMixin, SbbButtonBaseElement, SbbButtonLikeBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbFocusVisibleWithinController, SbbFormAssociatedCheckboxMixin, SbbFormAssociatedInputMixin, SbbFormAssociatedMixin, SbbFormAssociatedRadioButtonMixin, SbbIdReferenceController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbLiveAnnouncer, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbMediaQueryBreakpointLargeAndBelow, SbbMediaQueryBreakpointSmallAndAbove, SbbMediaQueryBreakpointSmallAndBelow, SbbMediaQueryBreakpointUltraAndAbove, SbbMediaQueryBreakpointZeroAndAbove, SbbMediaQueryDarkMode, SbbMediaQueryForcedColors, SbbMediaQueryHover, SbbMediaQueryPointerCoarse, SbbNamedSlotListMixin, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbOverlayOutsidePointerEventListener, SbbOverlayPositionController, SbbPanelMixin, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbScrollHandler, SbbSelectionGroupBaseElement, SbbSelectionPanelMixin, SbbSlottedChangeEvent, SbbUpdateSchedulerMixin, THURSDAY, TUESDAY, TemporalDateAdapter, WEDNESDAY, appendAriaElements, buttonResetStyles, containsPierceShadowDom, defaultDateAdapter, forceType, forwardEvent, getElementPosition, getElementPositionHorizontal, getElementRectangle, getEventTarget, getNextElementIndex, getOverride, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nArrival, i18nBlockedPassage, i18nBreadcrumbEllipsisButtonLabel, i18nCalendarDateSelection, i18nCalendarWeekNumber, i18nCarouselArrowsNavigationHint, i18nCarouselItemAriaLabel, i18nCheckboxRequired, i18nChipDelete, i18nChipGroupInputDescription, i18nClass, i18nClearInput, i18nCloseAlert, i18nCloseDialog, i18nCloseNavigation, i18nCloseNotification, i18nClosePopover, i18nCloseSidebar, i18nClosedCompartmentLabel, i18nCollapsed, i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo, i18nCouchetteWagonLabel, i18nDateChangedTo, i18nDateInvalid, i18nDateMax, i18nDateMin, i18nDatePickerPlaceholder, i18nDeparture, i18nDialog, i18nDirection, i18nDurationDay, i18nDurationHour, i18nDurationMinute, i18nExpanded, i18nFileSelectorButtonLabel, i18nFileSelectorButtonLabelMultiple, i18nFileSelectorCurrentlySelected, i18nFileSelectorDeleteFile, i18nFileSelectorSubtitleLabel, i18nFileSelectorSubtitleLabelMultiple, i18nFlipCard, i18nFromPlatform, i18nGoBack, i18nInputRequired, i18nItemsPerPage, i18nLocomotiveLabel, i18nMapContainerButtonLabel, i18nMeansOfTransport, i18nNew, i18nNextDay, i18nNextMonth, i18nNextPage, i18nNextSlide, i18nNextYear, i18nNextYearRange, i18nOccupancy, i18nPage, i18nPaginatorOf, i18nPaginatorSelected, i18nPreviousDay, i18nPreviousMonth, i18nPreviousPage, i18nPreviousSlide, i18nPreviousYear, i18nPreviousYearRange, i18nRealTimeInfo, i18nRemainingCharacters, i18nRestaurantWagonLabel, i18nReverseCard, i18nSector, i18nSectorShort, i18nSelectNextDay, i18nSelectPreviousDay, i18nSelectionRequired, i18nShowCalendar, i18nSleepingWagonLabel, i18nSlide, i18nSupersaver, i18nTargetOpensInNewWindow, i18nTimeInputChange, i18nTimeInvalid, i18nTimeMax, i18nTimeMaxLength, i18nTimetableFormSwapButtonLabel, i18nToday, i18nTrain, i18nTrains, i18nTransferProcedure, i18nTransferProcedures, i18nTravelhints, i18nTripDuration, i18nTripQuayChange, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture, i18nYearMonthSelection, idReference, interactivityChecker, isAndroid, isArrowKeyOrPageKeysPressed, isArrowKeyPressed, isBlink, isChromium, isEdge, isEventOnElement, isEventPrevented, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, isFirefox, isIOS, isMacOS, isNextArrowKeyPressed, isNextjs, isPreviousArrowKeyPressed, isSafari, isTrident, isWebkit, isZeroAnimationDuration, listResetStyles, mergeConfig, omitEmptyConverter, pageScrollDisabled, plainDate, plainDateConverter, popoverResetStyles, preventScrollOnSpacebarPress, queueDomContentLoaded, radioButtonRegistry, readConfig, removeAriaComboBoxAttributes, removeAriaElements, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, sbbLiveAnnouncer, sbbOverlayOutsidePointerEventListener, screenReaderOnlyStyles, scrollbarStyles, setAriaComboBoxAttributes, setAriaOverlayTriggerProperties, setOrRemoveAttribute, setOverlayPosition, ɵstateController };
+export { DateAdapter, FORMAT_DATE, FRIDAY, ISO8601_FORMAT_DATE, IS_FOCUSABLE_QUERY, InteractivityChecker, IsFocusableConfig, MONDAY, NativeDateAdapter, SATURDAY, SUNDAY, SbbActionBaseElement, SbbAnimationCompleteMixin, SbbButtonBaseElement, SbbButtonLikeBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbFocusVisibleWithinController, SbbFormAssociatedCheckboxMixin, SbbFormAssociatedInputMixin, SbbFormAssociatedMixin, SbbFormAssociatedRadioButtonMixin, SbbIdReferenceController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbLiveAnnouncer, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbMediaQueryBreakpointLargeAndBelow, SbbMediaQueryBreakpointSmallAndAbove, SbbMediaQueryBreakpointSmallAndBelow, SbbMediaQueryBreakpointUltraAndAbove, SbbMediaQueryBreakpointZeroAndAbove, SbbMediaQueryDarkMode, SbbMediaQueryForcedColors, SbbMediaQueryHover, SbbMediaQueryPointerCoarse, SbbNamedSlotListMixin, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbOverlayOutsidePointerEventListener, SbbOverlayPositionController, SbbPanelMixin, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbScrollHandler, SbbSelectionGroupBaseElement, SbbSelectionPanelMixin, SbbSlottedChangeEvent, SbbUpdateSchedulerMixin, THURSDAY, TUESDAY, TemporalDateAdapter, WEDNESDAY, appendAriaElements, buttonResetStyles, containsPierceShadowDom, defaultDateAdapter, forceType, forwardEvent, getElementPosition, getElementPositionHorizontal, getElementRectangle, getEventTarget, getNextElementIndex, getOverride, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nArrival, i18nBlockedPassage, i18nBreadcrumbEllipsisButtonLabel, i18nCalendarDateSelection, i18nCalendarWeekNumber, i18nCarouselArrowsNavigationHint, i18nCarouselItemAriaLabel, i18nCheckboxRequired, i18nChipDelete, i18nChipGroupInputDescription, i18nClass, i18nClearInput, i18nCloseAlert, i18nCloseDialog, i18nCloseNavigation, i18nCloseNotification, i18nClosePopover, i18nCloseSidebar, i18nClosedCompartmentLabel, i18nCollapsed, i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo, i18nCouchetteWagonLabel, i18nDateChangedTo, i18nDateInvalid, i18nDateMax, i18nDateMin, i18nDatePickerPlaceholder, i18nDeparture, i18nDialog, i18nDirection, i18nDownload, i18nDurationDay, i18nDurationHour, i18nDurationMinute, i18nExpanded, i18nFileSelectorButtonLabel, i18nFileSelectorButtonLabelMultiple, i18nFileSelectorCurrentlySelected, i18nFileSelectorDeleteFile, i18nFileSelectorSubtitleLabel, i18nFileSelectorSubtitleLabelMultiple, i18nFlipCard, i18nFromPlatform, i18nGoBack, i18nInputRequired, i18nItemsPerPage, i18nLocomotiveLabel, i18nMapContainerButtonLabel, i18nMeansOfTransport, i18nNew, i18nNextDay, i18nNextMonth, i18nNextPage, i18nNextSlide, i18nNextYear, i18nNextYearRange, i18nNonAccessible, i18nOccupancy, i18nPage, i18nPaginatorOf, i18nPaginatorSelected, i18nPreviousDay, i18nPreviousMonth, i18nPreviousPage, i18nPreviousSlide, i18nPreviousYear, i18nPreviousYearRange, i18nRealTimeInfo, i18nRemainingCharacters, i18nRestaurantWagonLabel, i18nReverseCard, i18nSector, i18nSectorShort, i18nSelectNextDay, i18nSelectPreviousDay, i18nSelectionRequired, i18nShowCalendar, i18nSleepingWagonLabel, i18nSlide, i18nSupersaver, i18nTargetOpensInNewWindow, i18nTimeInputChange, i18nTimeInvalid, i18nTimeMax, i18nTimeMaxLength, i18nTimetableFormSwapButtonLabel, i18nToday, i18nTrain, i18nTrains, i18nTransferProcedure, i18nTransferProcedures, i18nTravelhints, i18nTripDuration, i18nTripQuayChange, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture, i18nYearMonthSelection, idReference, interactivityChecker, isAndroid, isArrowKeyOrPageKeysPressed, isArrowKeyPressed, isBlink, isChromium, isEdge, isEventOnElement, isEventPrevented, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, isFirefox, isIOS, isMacOS, isNextArrowKeyPressed, isNextjs, isPreviousArrowKeyPressed, isSafari, isTrident, isWebkit, isZeroAnimationDuration, listResetStyles, mergeConfig, omitEmptyConverter, pageScrollDisabled, plainDate, plainDateConverter, popoverResetStyles, preventScrollOnSpacebarPress, queueDomContentLoaded, radioButtonRegistry, readConfig, removeAriaComboBoxAttributes, removeAriaElements, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, sbbLiveAnnouncer, sbbOverlayOutsidePointerEventListener, screenReaderOnlyStyles, scrollbarStyles, setAriaComboBoxAttributes, setAriaOverlayTriggerProperties, setOrRemoveAttribute, setOverlayPosition, ɵstateController };

package/development/date-input.pure.js

@@ -282,19 +282,27 @@ let SbbDateInputElement = (() => {
 		validate() {
 			super.validate();
 			if (!this.value) this._removeValidityErrors();
-			else if (!this._dateAdapter.isValid(this.valueAsDate)) this.setValidityFlag("badInput", i18nDateInvalid[this.language.current]);
-			else if (this._dateAdapter.isValid(this.min) && this._dateAdapter.compareDate(this.min, this.valueAsDate) > 0) this.setValidityFlag("rangeUnderflow", i18nDateMin(this._dateAdapter.format(this.min, { weekdayStyle: "none" }))[this.language.current]);
-			else if (this._dateAdapter.isValid(this.max) && this._dateAdapter.compareDate(this.valueAsDate, this.max) > 0) this.setValidityFlag("rangeOverflow", i18nDateMax(this._dateAdapter.format(this.max, { weekdayStyle: "none" }))[this.language.current]);
-			else if (this.dateFilter && !this.dateFilter(this.valueAsDate)) this.setValidityFlag("sbbDateFilter", i18nDateInvalid[this.language.current]);
-			else this._removeValidityErrors();
+			else if (!this._dateAdapter.isValid(this.valueAsDate)) {
+				this._removeValidityErrors("badInput");
+				this.setValidityFlag("badInput", i18nDateInvalid[this.language.current]);
+			} else if (this._dateAdapter.isValid(this.min) && this._dateAdapter.compareDate(this.min, this.valueAsDate) > 0) {
+				this._removeValidityErrors("rangeUnderflow");
+				this.setValidityFlag("rangeUnderflow", i18nDateMin(this._dateAdapter.format(this.min, { weekdayStyle: "none" }))[this.language.current]);
+			} else if (this._dateAdapter.isValid(this.max) && this._dateAdapter.compareDate(this.valueAsDate, this.max) > 0) {
+				this._removeValidityErrors("rangeOverflow");
+				this.setValidityFlag("rangeOverflow", i18nDateMax(this._dateAdapter.format(this.max, { weekdayStyle: "none" }))[this.language.current]);
+			} else if (this.dateFilter && !this.dateFilter(this.valueAsDate)) {
+				this._removeValidityErrors("sbbDateFilter");
+				this.setValidityFlag("sbbDateFilter", i18nDateInvalid[this.language.current]);
+			} else this._removeValidityErrors();
 		}
-		_removeValidityErrors() {
+		_removeValidityErrors(except) {
 			[
 				"badInput",
 				"rangeUnderflow",
 				"rangeOverflow",
 				"sbbDateFilter"
-			].forEach((f) => this.removeValidityFlag(f));
+			].filter((v) => v !== except).forEach((f) => this.removeValidityFlag(f));
 		}
 	};
 })();

package/development/download/download/download.component.d.ts

@@ -0,0 +1,51 @@
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { type SbbElementType, SbbLinkBaseElement } from '../../core.ts';
+declare const SbbDownloadElement_base: import("../../core.ts").AbstractConstructor<import("../../icon.pure.ts").SbbIconNameMixinType> & typeof SbbLinkBaseElement;
+/**
+ * It displays a downloadable document, styled as a card.
+ *
+ * Inherits link properties from `SbbLinkBaseElement`: `href`, `target`, `rel`
+ * and `accessibilityLabel`. The download behavior is always enabled.
+ *
+ * @slot - Use the unnamed slot to add custom content. Optional.
+ * @slot info - Slot used to render a `sbb-download-info`. A `sbb-download-info`
+ * placed in the unnamed slot is automatically moved to this slot. Optional.
+ * @slot icon - Use this slot to display a custom icon, by providing a
+ * `sbb-icon` component. Optional.
+ */
+export declare class SbbDownloadElement extends SbbDownloadElement_base {
+    static readonly elementName: string;
+    static elementDependencies: SbbElementType[];
+    static styles: CSSResultGroup;
+    /** Option to set the component's background color. */
+    accessor color: 'white' | 'milk';
+    /** The label of the download. Defaults to the file name of the `href`. */
+    accessor label: string;
+    /**
+     * The download behavior is always enabled and handled internally, therefore
+     * this property cannot be disabled and is not reflected to the host element.
+     * @default true
+     */
+    set download(_value: boolean);
+    get download(): boolean;
+    /** The file name extracted from the `href` (e.g. `report.pdf`). */
+    get fileName(): string;
+    /** The lower-cased file extension extracted from the `href` (e.g. `pdf`), if any. */
+    get fileExtension(): string;
+    private _languageController;
+    /**
+     * Provides a default icon based on the `href` extension, if no icon name is
+     * set.
+     */
+    protected renderIconName(): string;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private _updateDescribedByElements;
+    private _downloadInfoElements;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-download': SbbDownloadElement;
+    }
+}
+export {};

package/development/download/download-info/download-info.component.d.ts

@@ -0,0 +1,59 @@
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { SbbElement } from '../../core.ts';
+/**
+ * It displays metadata of a document; used within a `sbb-download`.
+ */
+export declare class SbbDownloadInfoElement extends SbbElement {
+    static readonly elementName: string;
+    static styles: CSSResultGroup;
+    /**
+     * The type of the document (e.g. `PDF`). Falls back to the extension of the
+     * parent `sbb-download`.
+     */
+    accessor type: string;
+    /**
+     * The size of the document. If the value contains non-numeric characters it
+     * is rendered as is, otherwise it is interpreted as a number of bytes and
+     * shortened to the closest unit.
+     */
+    accessor size: string;
+    /** The date of the latest change of the document, as an ISO 8601 string. */
+    accessor changed: string;
+    /** Whether the document is not accessible. */
+    accessor nonAccessible: boolean;
+    private _language;
+    private _dateAdapter;
+    private _resolvedType;
+    private _typeRedundant;
+    private _resolvedSize;
+    private _resolvedChanged;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** Resolves the type, falling back to the extension of the parent download's
+     * href.
+     */
+    private _resolveType;
+    /**
+     * Whether the type is already conveyed by the parent download's label.
+     * When the parent download has no explicit `label`, it falls back to the file
+     * name (e.g. `some-file.pdf`), which already includes the extension. In that
+     * case the type is redundant for assistive technology.
+     */
+    private _isTypeRedundant;
+    /**
+     * Formats the size, shortening a pure number of bytes to the closest unit.
+     */
+    private _resolveSize;
+    /**
+     * Formats the ISO 8601 change date using the configured date adapter, or
+     * renders it as is if invalid.
+     */
+    private _resolveChanged;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-download-info': SbbDownloadInfoElement;
+    }
+}

package/development/download.d.ts

@@ -0,0 +1 @@
+export * from './download.pure.ts';

package/development/download.js

@@ -0,0 +1,10 @@
+import { SbbDownloadElement, SbbDownloadInfoElement } from "./download.pure.js";
+
+export * from "./download.pure.js"
+
+//#region src/elements/download.ts
+/** @entrypoint */
+SbbDownloadElement.define();
+SbbDownloadInfoElement.define();
+
+//#endregion

package/development/download.pure.d.ts

@@ -0,0 +1,3 @@
+/** @entrypoint */
+export * from './download/download/download.component.ts';
+export * from './download/download-info/download-info.component.ts';