@sbb-esta/lyne-elements 5.1.0 → 5.3.0

package/_index.scss

@@ -15,6 +15,7 @@
 @forward './container/container.global' as container-*;
 @forward './dialog/dialog.global' as dialog-*;
 @forward './divider/divider.global' as divider-*;
+@forward './download/download.global' as download-*;
 @forward './expansion-panel/expansion-panel.global' as expansion-panel-*;
 @forward './file-selector/file-selector.global' as file-selector-*;
 @forward './flip-card/flip-card.global' as flip-card-*;

package/action-group.pure.js

@@ -1,2 +1,2 @@
-import{html as e,unsafeCSS as t}from"lit";import{SbbElement as n}from"./core.js";var r=`:host{justify-content:start;align-items:center;gap:var(--sbb-action-group-gap);display:flex}:host(.sbb-orientation-vertical-full-width){flex-direction:column;align-items:stretch}:host(:where(.sbb-orientation-vertical,.sbb-orientation-horizontal-from-small,.sbb-orientation-horizontal-from-large,.sbb-orientation-horizontal-from-ultra)){align-items:start}@media (width>=37.5rem){:host(.sbb-orientation-horizontal-from-small){align-items:center}}@media (width>=64rem){:host(.sbb-orientation-horizontal-from-large){align-items:center}}@media (width>=90rem){:host(.sbb-orientation-horizontal-from-ultra){align-items:center}}
+import{html as e,unsafeCSS as t}from"lit";import{SbbElement as n}from"./core.js";var r=`:host{justify-content:start;align-items:center;gap:var(--sbb-action-group-gap);flex-wrap:wrap;display:flex}:host(.sbb-orientation-vertical-full-width){flex-direction:column;align-items:stretch}:host(:where(.sbb-orientation-vertical,.sbb-orientation-horizontal-from-small,.sbb-orientation-horizontal-from-large,.sbb-orientation-horizontal-from-ultra)){align-items:start}@media (width>=37.5rem){:host(.sbb-orientation-horizontal-from-small){align-items:center}}@media (width>=64rem){:host(.sbb-orientation-horizontal-from-large){align-items:center}}@media (width>=90rem){:host(.sbb-orientation-horizontal-from-ultra){align-items:center}}
 `,i=class extends n{static{this.elementName=`sbb-action-group`}static{this.styles=[t(r)]}render(){return e`<slot></slot>`}};export{i as SbbActionGroupElement};

package/alert.pure.js

@@ -17,20 +17,20 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
             </p>
           </span>
           ${this.readOnly?r:n`<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||r}
-                  icon-name="cross-small"
-                  @click=${()=>this.close()}
-                  aria-label=${h[this._language.current]}
-                  class="sbb-alert__close-button"
-                ></sbb-transparent-button>
-              </span>`}
+                  <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||r}
+                    icon-name="cross-small"
+                    @click=${()=>this.close()}
+                    aria-label=${h[this._language.current]}
+                    class="sbb-alert__close-button"
+                  ></sbb-transparent-button>
+                </span>`}
         </div>
       </div>
     `}}})();export{T as SbbAlertElement,C as SbbAlertGroupElement};

package/breadcrumb.pure.js

@@ -29,9 +29,9 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
         <li class="sbb-breadcrumb-group__item">
           <slot name=${e.name}></slot>
           ${t===n.length-1?i:r`<sbb-icon
-                name="chevron-small-right-small"
-                class="sbb-breadcrumb-group__divider-icon"
-              ></sbb-icon>`}
+                  name="chevron-small-right-small"
+                  class="sbb-breadcrumb-group__divider-icon"
+                ></sbb-icon>`}
         </li>
       `)}render(){return r`
       <ol class="sbb-breadcrumb-group">

package/calendar.pure.js

@@ -1,6 +1,6 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{MONDAY as c,SbbButtonLikeBaseElement as l,SbbDisabledMixin as u,SbbElement as ee,SbbFormAssociatedMixin as te,SbbLanguageController as d,SbbPropertyWatcherController as f,THURSDAY as ne,TUESDAY as re,WEDNESDAY as ie,buttonResetStyles as ae,defaultDateAdapter as p,forceType as m,handleDistinctChange as oe,i18nCalendarDateSelection as h,i18nCalendarWeekNumber as g,i18nNextMonth as se,i18nNextYear as ce,i18nNextYearRange as le,i18nPreviousMonth as ue,i18nPreviousYear as de,i18nPreviousYearRange as fe,i18nYearMonthSelection as pe,isArrowKeyOrPageKeysPressed as me,plainDate as _,readConfig as v,screenReaderOnlyStyles as he}from"./core.js";import{SbbSecondaryButtonElement as ge}from"./button.pure.js";import{SbbIconElement as _e}from"./icon.pure.js";var y=`:host{--sbb-focus-outline-offset:.125rem;--sbb-calendar-cell-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));font-size:var(--sbb-calendar-cell-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);cursor:var(--sbb-calendar-cell-cursor);color:var(--sbb-calendar-cell-color);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));margin:var(--sbb-calendar-cell-margin);padding:var(--sbb-calendar-cell-border-width);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);background-clip:content-box;transition-property:background-color;display:block}:host(:is(sbb-calendar-weekday,sbb-calendar-weeknumber)){--sbb-calendar-cell-font-size:var(--sbb-text-font-size-xs);--sbb-calendar-day-height:var(--sbb-calendar-day-size);color:var(--sbb-calendar-header-color)}:host(:is(sbb-calendar-day,sbb-calendar-weekday,sbb-calendar-weeknumber)){height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width)}:host(:is(:state(current),[state--current])){font-weight:700}:host(:is(:state(selected),[state--selected])){border:var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);padding:0}:host(:disabled){--sbb-calendar-cell-color:var(--sbb-calendar-cell-disabled-color);--sbb-calendar-cell-cursor:unset}: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)}@media (any-hover:hover){:host(:not(:disabled,:where(:is(:state(active),[state--active]),:active)):hover){background-color:var(--sbb-calendar-cell-background-color-hover)}}@media (any-hover:hover) and (forced-colors:active){:host(:not(:disabled):hover){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style:initial}}:host(:not(:disabled):where(:is(:state(active),[state--active]),:active)){background-color:var(--sbb-calendar-cell-background-color-active)}.sbb-action-base{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex}.sbb-calendar-year,.sbb-calendar-month{height:var(--sbb-calendar-cell-year-month-height);width:var(--sbb-calendar-cell-year-month-width)}:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year,.sbb-calendar-month,.sbb-calendar-day__value):after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);background-color:var(--sbb-calendar-cell-disabled-color);position:absolute;top:50%;left:50%;translate:-50% -50%;rotate:-45deg}
 `,b=class extends u(l){static{this.styles=[a(y)]}constructor(){super(),this.dateAdapter=v().datetime?.dateAdapter??p,this.addController(new f(this,()=>this.getParent(),{dateFilter:e=>this.setDisabledFilteredState(e),min:e=>this.setDisabledFilteredState(e),max:e=>this.setDisabledFilteredState(e),value:e=>this.setSelectedState(e)}))}getParent(){return this.getRootNode?.()?.host?.closest(`sbb-calendar`)}formResetCallback(){}formStateRestoreCallback(e,t){}},x=`.sbb-calendar-day{justify-content:var(--sbb-calendar-day-justify-content)}.sbb-calendar-day__value{height:var(--sbb-calendar-day-value-height);justify-content:center;align-items:center;display:flex;position:relative}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height)}::slotted(*){height:var(--sbb-calendar-day-extra-height)}
-`;let S=(()=>{let r=b,i=[],c,l;return class extends r{constructor(){super(...arguments),this._value=(t(this,i),null)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[o()],l=[s()],e(this,null,c,{kind:`setter`,name:`slot`,static:!1,private:!1,access:{has:e=>`slot`in e,set:(e,t)=>{e.slot=t}},metadata:t},null,i),e(this,null,l,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-day`}static{this.styles=[a(x)]}set slot(e){super.slot=e,this.value=this.dateAdapter.deserialize(e)}get slot(){return super.slot}set value(e){let t=this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));if(t){this._value=t;let e=this.dateAdapter.sameDate(t,this.dateAdapter.today());this.toggleState(`current`,e),this.internals.ariaCurrent=e?`date`:null,this.internals.ariaLabel=this.dateAdapter.getAccessibilityFormatDate(t);let n=this.getParent();n&&(this.setDisabledFilteredState(n),this.setSelectedState(n))}}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}getParent(){return this.closest?.(`sbb-calendar`)??this.getRootNode?.()?.host?.closest(`sbb-calendar`)}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value.some(e=>this.dateAdapter.sameDate(this.value,e)):!!e.value&&this.dateAdapter.compareDate(this.value,e.value)===0);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveDate(e.dateFilter),n=!this._isDayInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveDate(e){return e&&this.value?e(this.value):!0}_isDayInRange(e,t){return!e&&!t?!0:this.dateAdapter.sameDate(this.value,this.dateAdapter.clampDate(this.value,e,t))}_handleSlotchange(e){this.internals.ariaDescribedByElements=e.target.assignedElements()}renderTemplate(){return n` <span class="sbb-calendar-day__value" aria-hidden="true">
+`;let S=(()=>{let r=b,i=[],c,l;return class extends r{constructor(){super(...arguments),this._value=(t(this,i),null)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[o()],l=[s()],e(this,null,c,{kind:`setter`,name:`slot`,static:!1,private:!1,access:{has:e=>`slot`in e,set:(e,t)=>{e.slot=t}},metadata:t},null,i),e(this,null,l,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-day`}static{this.styles=[a(x)]}set slot(e){super.slot=e,this.value=this.dateAdapter.deserialize(e)}get slot(){return super.slot}set value(e){let t=this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));if(t){this._value=t;let e=this.dateAdapter.sameDate(t,this.dateAdapter.today());this.toggleState(`current`,e),this.internals.ariaCurrent=e?`date`:null,this.internals.ariaLabel=this.dateAdapter.getAccessibilityFormatDate(t);let n=this.getParent();n&&(this.setDisabledFilteredState(n),this.setSelectedState(n))}}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}getParent(){return this.closest?.(`sbb-calendar`)??this.getRootNode?.()?.host?.closest(`sbb-calendar`)}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value.some(e=>this.dateAdapter.sameDate(this.value,e)):!!e.value&&this.dateAdapter.compareDate(this.value,e.value)===0);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveDate(e.dateFilter),n=!this._isDayInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveDate(e){return e&&this.value?e(this.value):!0}_isDayInRange(e,t){return!e&&!t||this.dateAdapter.sameDate(this.value,this.dateAdapter.clampDate(this.value,e,t))}_handleSlotchange(e){this.internals.ariaDescribedByElements=e.target.assignedElements()}renderTemplate(){return n` <span class="sbb-calendar-day__value" aria-hidden="true">
         ${this.dateAdapter.getDate(this.value)}
       </span>
       <span class="sbb-calendar-day__extra">
@@ -21,14 +21,14 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
               ${this._weekdays.map((e,t)=>n`
                   <th class="sbb-calendar__table-header-cell">
                     ${this.multiple?n`
-                          <sbb-calendar-weekday
-                            .value=${e}
-                            @click=${()=>{let e=c.filter(e=>e.weekDayValue===(t+1)%7);this._selectMultipleDates(e)}}
-                          ></sbb-calendar-weekday>
-                        `:n`
-                          <span class="sbb-screen-reader-only">${e.long}</span>
-                          <span aria-hidden="true">${e.narrow}</span>
-                        `}
+                            <sbb-calendar-weekday
+                              .value=${e}
+                              @click=${()=>{let e=c.filter(e=>e.weekDayValue===(t+1)%7);this._selectMultipleDates(e)}}
+                            ></sbb-calendar-weekday>
+                          `:n`
+                            <span class="sbb-screen-reader-only">${e.long}</span>
+                            <span aria-hidden="true">${e.narrow}</span>
+                          `}
                   </th>
                 `)}
             </tr>
@@ -37,40 +37,40 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
             ${e.map((e,r)=>{let a=7-e.length;return r===0&&a?n`
                   <tr>
                     ${this.weekNumbers?n`
-                          <td class="sbb-calendar__table-header-cell-vertical">
-                            ${this.multiple?n`
-                                  <sbb-calendar-weeknumber
-                                    .value=${t[0]}
-                                    @click=${()=>{let e=s.filter(e=>e.weekValue===t[0]);this._selectMultipleDates(e)}}
-                                  ></sbb-calendar-weeknumber>
-                                `:n`
-                                  <span class="sbb-screen-reader-only"
-                                    >${`${g[this._language.current]} ${t[0]}`}</span
-                                  >
-                                  <span aria-hidden="true">${t[0]}</span>
-                                `}
-                          </td>
-                        `:i}
+                            <td class="sbb-calendar__table-header-cell-vertical">
+                              ${this.multiple?n`
+                                      <sbb-calendar-weeknumber
+                                        .value=${t[0]}
+                                        @click=${()=>{let e=s.filter(e=>e.weekValue===t[0]);this._selectMultipleDates(e)}}
+                                      ></sbb-calendar-weeknumber>
+                                    `:n`
+                                      <span class="sbb-screen-reader-only"
+                                        >${`${g[this._language.current]} ${t[0]}`}</span
+                                      >
+                                      <span aria-hidden="true">${t[0]}</span>
+                                    `}
+                            </td>
+                          `:i}
                     ${[...Array(a).keys()].map(()=>n`<td class="sbb-calendar__table-data"></td>`)}
                     ${this._createDayCells(e)}
                   </tr>
                 `:n`
                 <tr>
                   ${this.weekNumbers?n`
-                        <td class="sbb-calendar__table-header-cell-vertical">
-                          ${this.multiple?n`
-                                <sbb-calendar-weeknumber
-                                  .value=${t[r]}
-                                  @click=${()=>{let e=s.filter(e=>e.weekValue===t[r]);this._selectMultipleDates(e)}}
-                                ></sbb-calendar-weeknumber>
-                              `:n`
-                                <span class="sbb-screen-reader-only"
-                                  >${`${g[this._language.current]} ${t[r]}`}</span
-                                >
-                                <span aria-hidden="true">${t[r]}</span>
-                              `}
-                        </td>
-                      `:i}
+                          <td class="sbb-calendar__table-header-cell-vertical">
+                            ${this.multiple?n`
+                                    <sbb-calendar-weeknumber
+                                      .value=${t[r]}
+                                      @click=${()=>{let e=s.filter(e=>e.weekValue===t[r]);this._selectMultipleDates(e)}}
+                                    ></sbb-calendar-weeknumber>
+                                  `:n`
+                                    <span class="sbb-screen-reader-only"
+                                      >${`${g[this._language.current]} ${t[r]}`}</span
+                                    >
+                                    <span aria-hidden="true">${t[r]}</span>
+                                  `}
+                          </td>
+                        `:i}
                   ${this._createDayCells(e)}
                 </tr>
               `})}
@@ -87,42 +87,42 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
           @focusout=${e=>this._handleTableBlur(e.relatedTarget)}
         >
           ${this.weekNumbers?n`
-                <thead>
-                  <tr>
-                    <th class="sbb-calendar__table-data"></th>
-                    ${t.map(e=>n`
-                        <th class="sbb-calendar__table-header-cell">
-                          ${this.multiple?n`
-                                <sbb-calendar-weeknumber
-                                  .value=${e}
-                                  @click=${()=>{let t=l.filter(t=>t.weekValue===e);this._selectMultipleDates(t)}}
-                                ></sbb-calendar-weeknumber>
-                              `:n`
-                                <span class="sbb-screen-reader-only"
-                                  >${`${g[this._language.current]} ${e}`}</span
-                                >
-                                <span aria-hidden="true">${e}</span>
-                              `}
-                        </th>
-                      `)}
-                  </tr>
-                </thead>
-              `:i}
+                  <thead>
+                    <tr>
+                      <th class="sbb-calendar__table-data"></th>
+                      ${t.map(e=>n`
+                          <th class="sbb-calendar__table-header-cell">
+                            ${this.multiple?n`
+                                    <sbb-calendar-weeknumber
+                                      .value=${e}
+                                      @click=${()=>{let t=l.filter(t=>t.weekValue===e);this._selectMultipleDates(t)}}
+                                    ></sbb-calendar-weeknumber>
+                                  `:n`
+                                    <span class="sbb-screen-reader-only"
+                                      >${`${g[this._language.current]} ${e}`}</span
+                                    >
+                                    <span aria-hidden="true">${e}</span>
+                                  `}
+                          </th>
+                        `)}
+                    </tr>
+                  </thead>
+                `:i}
           <tbody>
             ${e.map((e,t)=>{let r=this._weekdays[t];return n`
                 <tr>
                   <td class="sbb-calendar__table-header-cell-vertical">
                     ${this.multiple?n`
-                          <sbb-calendar-weekday
-                            .value=${r}
-                            @click=${()=>this._selectMultipleDates(e)}
-                          >
-                            ${r.narrow}
-                          </sbb-calendar-weekday>
-                        `:n`
-                          <span class="sbb-screen-reader-only">${r.long}</span>
-                          <span aria-hidden="true">${r.narrow}</span>
-                        `}
+                            <sbb-calendar-weekday
+                              .value=${r}
+                              @click=${()=>this._selectMultipleDates(e)}
+                            >
+                              ${r.narrow}
+                            </sbb-calendar-weekday>
+                          `:n`
+                            <span class="sbb-screen-reader-only">${r.long}</span>
+                            <span aria-hidden="true">${r.narrow}</span>
+                          `}
                   </td>
                   ${t<c?n`<td class="sbb-calendar__table-data"></td>`:i}
                   ${this._createDayCells(e)}

package/carousel/_carousel.global.scss

@@ -9,3 +9,9 @@ $theme: 'standard' !default;
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
   --sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);
 }
+
+@mixin rules {
+  sbb-carousel-item sbb-image {
+    border-radius: unset;
+  }
+}

package/carousel.pure.js

@@ -1,4 +1,4 @@
-import{html as e,unsafeCSS as t}from"lit";import{SbbElement as n,SbbLanguageController as r,forceType as i,i18nCarouselArrowsNavigationHint as a,i18nCarouselItemAriaLabel as o,i18nNextSlide as s,i18nPreviousSlide as c,i18nSlide as l,isArrowKeyPressed as u,screenReaderOnlyStyles as d}from"./core.js";import{IntersectionController as f}from"@lit-labs/observers/intersection-controller.js";import{ResizeController as p}from"@lit-labs/observers/resize-controller.js";import{__esDecorate as m,__runInitializers as h}from"tslib";import{property as g}from"lit/decorators.js";var _=`:host{scroll-snap-align:start;flex-shrink:0;display:flex}::slotted(sbb-image){border-radius:unset}
+import{html as e,unsafeCSS as t}from"lit";import{SbbElement as n,SbbLanguageController as r,forceType as i,i18nCarouselArrowsNavigationHint as a,i18nCarouselItemAriaLabel as o,i18nNextSlide as s,i18nPreviousSlide as c,i18nSlide as l,isArrowKeyPressed as u,screenReaderOnlyStyles as d}from"./core.js";import{IntersectionController as f}from"@lit-labs/observers/intersection-controller.js";import{ResizeController as p}from"@lit-labs/observers/resize-controller.js";import{__esDecorate as m,__runInitializers as h}from"tslib";import{property as g}from"lit/decorators.js";var _=`:host{scroll-snap-align:start;flex-shrink:0;display:flex}
 `,v=class extends Event{get index(){return this._index}constructor(e,{index:t}){super(e,{bubbles:!0,composed:!0}),this._index=t}},y=class extends n{static{this.elementName=`sbb-carousel-item`}static{this.styles=[t(_)]}static{this.events={beforeshow:`beforeshow`,show:`show`}}connectedCallback(){super.connectedCallback(),this.internals.role=`group`,this.internals.ariaRoleDescription=`slide`}render(){return e`<slot></slot>`}},b=`:host{height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width,0);scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:var(--sbb-carousel-inherit-border-radius);outline:none;display:flex;overflow-x:auto}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);content:"";height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);position:absolute}
 `,x=class extends n{static{this.elementName=`sbb-carousel-list`}static{this.styles=[t(b)]}constructor(){super(),this._currentIndex=0,this._language=new r(this),this._observedCarouselItems=[],this._beforeShowObserver=new f(this,{target:null,callback:e=>{e.filter(e=>e.isIntersecting&&e.target!==this).forEach(e=>{let t=e.target;t.dispatchEvent(new v(`beforeshow`,{index:this._carouselItems().findIndex(e=>e===t)}))})},config:{threshold:.01,root:this,rootMargin:`100% 0% 100% 0%`}}),this._showObserver=new f(this,{target:null,callback:e=>{for(let t of e){if(t.target===this)continue;let e=t.target;t.isIntersecting?(e.ariaHidden=null,this._currentIndex=this._carouselItems().findIndex(t=>t===e),e.dispatchEvent(new v(`show`,{index:this._currentIndex}))):e.ariaHidden=`true`}},config:{threshold:.99,root:this,rootMargin:`100% 0% 100% 0%`}}),this._resizeObserverController=new p(this,{skipInitial:!0,callback:()=>this._readDimensions()}),this.addEventListener?.(`keydown`,e=>this._onKeyDown(e))}_carouselItems(){return Array.from(this.querySelectorAll?.(`sbb-carousel-item`)??[])}_handleSlotchange(){this._observedCarouselItems.forEach(e=>{this._beforeShowObserver.unobserve(e),this._showObserver.unobserve(e)});let e=this._carouselItems();e.forEach((t,n)=>{t.ariaLabel||=o(n+1,e.length)[this._language.current],t.ariaHidden=n===this._currentIndex?null:`true`}),this._readDimensions()}_readDimensions(){let e=this._carouselItems();if(e.length===0)return;let t=e[0];t.clientHeight>0&&this.style.setProperty(`--sbb-carousel-list-height`,`${t.clientHeight}px`),t.clientWidth>0&&(this.style.setProperty(`--sbb-carousel-list-width`,`${t.clientWidth}px`),e.forEach(e=>{this._beforeShowObserver.observe(e),this._showObserver.observe(e)}),this._observedCarouselItems=e,this._resizeObserverController.unobserve(this))}_onKeyDown(e){if(!u(e))return;e.preventDefault();let t=this._currentIndex,n=e.key===`ArrowUp`||e.key===`ArrowLeft`,r=e.key===`ArrowDown`||e.key===`ArrowRight`;n?t=Math.max(0,this._currentIndex-1):r&&(t=Math.min(this._carouselItems().length-1,this._currentIndex+1)),t!==this._currentIndex&&(this._currentIndex=t,this.scrollTo({left:this._carouselItems()[this._currentIndex].offsetLeft-this.offsetLeft}))}connectedCallback(){super.connectedCallback(),this.internals.ariaLive=`polite`,this.internals.ariaAtomic=`true`}render(){return e`<slot @slotchange=${this._handleSlotchange}></slot>`}},S=`:host{border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0;display:inline-block;overflow:hidden}:host([shadow]){box-shadow:var(--sbb-carousel-box-shadow);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius:var(--sbb-carousel-border-radius)}.sbb-carousel{background-color:var(--sbb-carousel-background-color);flex-direction:column;justify-content:center;align-items:center;display:flex}::slotted(sbb-compact-paginator){padding:var(--sbb-carousel-paginator-padding)}
 `;let C=(()=>{let o=n,u,f=[],p=[];return class extends o{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;u=[i(),g({reflect:!0,type:Boolean})],m(this,null,u,{kind:`accessor`,name:`shadow`,static:!1,private:!1,access:{has:e=>`shadow`in e,get:e=>e.shadow,set:(e,t)=>{e.shadow=t}},metadata:e},f,p),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-carousel`}static{this.styles=[d,t(S)]}#e;get shadow(){return this.#e}set shadow(e){this.#e=e}constructor(){super(),this.#e=h(this,f,!1),this._paginator=(h(this,p),null),this._abortController=null,this._language=new r(this),this._requestedPageIndexByPaginator=-1,this.addEventListener?.(`show`,e=>{this._requestedPageIndexByPaginator!==-1&&this._requestedPageIndexByPaginator!==e.index||(this._paginator&&e.index!==this._paginator.pageIndex&&(this._paginator.pageIndex=e.index),this._requestedPageIndexByPaginator=-1)})}connectedCallback(){super.connectedCallback(),this.internals.role=`region`,this.internals.ariaLabel=`carousel`,this._setupPaginator()}firstUpdated(e){super.firstUpdated(e),this.internals.ariaDescribedByElements=[this.shadowRoot.querySelector(`#sbb-carousel-arrows-navigation-hint`)]}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-compact-paginator`),t=Array.from(this.children).find(e=>e.localName===`sbb-carousel-list`);if(!e||!t)return;let n=t.querySelectorAll(`sbb-carousel-item`);n&&n.length>0&&(e.length=n.length,e.pageSize=1),e.accessibilityNextPageLabel||=s[this._language.current],e.accessibilityPreviousPageLabel||=c[this._language.current],e.accessibilityPageLabel||=l[this._language.current],e!==this._paginator&&(this._paginator=e,this._setupPaginator())}_setupPaginator(){this._abortController?.abort(),this._paginator&&(this._abortController=new AbortController,this._paginator.addEventListener(`click`,()=>this._scrollAtPaginatorChange(),{signal:this._abortController.signal}))}_scrollAtPaginatorChange(){if(!this._paginator)return;this._requestedPageIndexByPaginator=this._paginator.pageIndex;let e=this.querySelector(`sbb-carousel-list`);if(e){let t=e.querySelectorAll(`sbb-carousel-item`)[this._paginator.pageIndex].offsetLeft-this.offsetLeft;(e.clientWidth<=100||Math.abs(e.scrollLeft-t)>50)&&e.scrollTo({left:t})}}render(){return e`

package/chip.pure.js

@@ -14,4 +14,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
       </sbb-mini-button>
       <span class="sbb-screen-reader-only">, ${g[this._language.current]}</span>
     `}}})();var w=`:host{gap:var(--sbb-chip-group-gap);width:100%;margin-block:var(--sbb-chip-group-margin-block);line-height:var(--sbb-typo-line-height-text);flex-wrap:wrap;align-items:center;display:flex}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-s)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-s)}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-base-lm)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-m)}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block:var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-m)}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block:var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-l)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-l)}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}
-`,T=class extends Event{constructor(e){super(`chipinputtokenend`,{cancelable:!0,bubbles:!0,composed:!0}),this.origin=e.origin,this.value=e.value,this.label=e.label}setValue(e){this.value=e}setLabel(e){this.label=e}};let E=(()=>{let f=p(o(u(c(s)))),g=[],b,x,S=[],E=[],D,O=[],k=[],A,j=[],M=[];return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;b=[a({type:Array})],x=[a({attribute:!1})],D=[a({attribute:`separator-keys`,type:Array})],A=[m(),a({attribute:`add-on-blur`,type:Boolean})],e(this,null,b,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,g),e(this,null,x,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},S,E),e(this,null,D,{kind:`accessor`,name:`separatorKeys`,static:!1,private:!1,access:{has:e=>`separatorKeys`in e,get:e=>e.separatorKeys,set:(e,t)=>{e.separatorKeys=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`addOnBlur`,static:!1,private:!1,access:{has:e=>`addOnBlur`in e,get:e=>e.addOnBlur,set:(e,t)=>{e.addOnBlur=t}},metadata:t},j,M),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip-group`}static{this.role=`listbox`}static{this.styles=[i(w)]}static{this.events={input:`input`,change:`change`,chipinputtokenend:`chipinputtokenend`}}set value(e){e??=[];let t=this.value,n=[...t];for(let t of e)n.includes(t)&&n.splice(n.indexOf(t),1);n.forEach(e=>this._chipElements().find(t=>t.value===e)?.remove());let r=[...e];for(let e of t)r.includes(e)&&r.splice(r.indexOf(e),1);r.forEach(e=>this._createChipElement(e))}get value(){return this._chipElements().map(e=>e.value)}#e;get displayWith(){return this.#e}set displayWith(e){this.#e=e}#t;get separatorKeys(){return this.#t}set separatorKeys(e){this.#t=e}#n;get addOnBlur(){return this.#n}set addOnBlur(e){this.#n=e}constructor(){super(),this.#e=(t(this,g),t(this,S,null)),this.#t=(t(this,E),t(this,O,[`Enter`])),this.#n=(t(this,k),t(this,j,!1)),this._inputAttributeObserver=(t(this,M),r?null:new MutationObserver(()=>this._reactToInputChanges())),this._language=new l(this),this._previousSize=null,this.addEventListener?.(C.events.requestdelete,e=>this._deleteChip(e.target)),this.addEventListener?.(`keydown`,e=>this._onChipKeyDown(e)),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{size:e=>this._updateSize(e.size),label:e=>this._updateLabelState(e),hiddenLabel:e=>this._updateLabelState(e)}))}_updateLabelState(e){this.toggleState(`without-label`,!e.label||e.hiddenLabel)}connectedCallback(){super.connectedCallback(),this._setupComponent()}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`)||e.has(`negative`))&&this._proxyStateToChips()}formResetCallback(){this.value=null}formStateRestoreCallback(e,t){if(!e){this.value=null;return}this._readFormData(e).then(e=>this.value=e)}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}shouldValidate(e){return super.shouldValidate(e)||e===`required`||e===`value`}validate(){super.validate(),this.required&&this.value.length===0?this.setValidityFlag(`valueMissing`,v[this._language.current]):this.removeValidityFlag(`valueMissing`)}_chipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip`)??[])}_enabledChipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip:not([disabled])`)??[])}_setupComponent(){let e=this.querySelector(`input`);e&&e!==this._inputElement&&(this._inputAbortController?.abort(),this._inputAttributeObserver?.disconnect(),this._inputElement=e,this._inputAbortController=new AbortController,this._inputElement.addEventListener(`keydown`,e=>this._onInputKeyDown(e),{signal:this._inputAbortController.signal}),this._inputElement.addEventListener(`blur`,()=>this._onInputBlur(),{signal:this._inputAbortController.signal,capture:!0}),this._inputElement.addEventListener(`inputAutocomplete`,e=>this._createChipFromInput(`autocomplete`,e.option.value),{signal:this._inputAbortController.signal}),this._inputAttributeObserver?.observe(this._inputElement,{attributes:!0,attributeFilter:[`readonly`,`disabled`]})),this.closest(`sbb-form-field`)||this._updateSize(null),this.toggleState(`empty`,this.value.length===0),this._reactToInputChanges(),this._updateInputDescription(),this.updateFormValue()}_onChipKeyDown(e){let t=e.target;if(t.localName===`sbb-chip`){if(y(e)){let n=this._enabledChipElements();n[h(e,n.indexOf(t),n.length)].focus();return}switch(e.key){case`Backspace`:case`Delete`:!t.readOnly&&!t.disabled&&(e.preventDefault(),this._deleteChip(t));break}}}_onInputKeyDown(e){switch(e.key){case`Backspace`:case`ArrowLeft`:this._inputElement.value||this._focusChip();break;case`Enter`:e.preventDefault();break}this.separatorKeys.includes(e.key)&&(e.preventDefault(),this._createChipFromInput(`input`))}_onInputBlur(){this.addOnBlur&&this._createChipFromInput(`input`)}_createChipFromInput(e=`input`,t){let n=t??this._inputElement.value.trim();if(!n)return;let r=new T({origin:e,value:n,label:(t?this.displayWith?.(t):null)??void 0});this.dispatchEvent(r)&&(this._createChipElement(r.value,r.label),this._inputElement.value=``,this._emitInputEvents())}_deleteChip(e){let t=this._enabledChipElements();e.remove(),this._emitInputEvents(),this._focusChip(t.indexOf(e))}_focusChip(e){let t=this._enabledChipElements();if(e!==void 0&&t[e]){t[e].focus();return}if(t.length>0){t[t.length-1].focus();return}this._inputElement?.focus()}_emitInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_createChipElement(e,t){if(r)return;let n=document.createElement(`sbb-chip`);n.value=e,n.innerText=t??(e?this.displayWith?.(e):null)??``,this.insertBefore(n,this._inputElement??this.querySelector(`input`))}_reactToInputChanges(){this.disabled=this._inputElement?.disabled??!1,this._proxyStateToChips()}_proxyStateToChips(){this._chipElements().forEach(e=>{e.disabled=this.disabled||this.formDisabled,e.readOnly=this._inputElement?.hasAttribute(`readonly`)??!1,e.negative=this.negative})}_updateSize(e){this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}_updateInputDescription(){this._inputElement&&this._inputElement.setAttribute(`aria-description`,`${_[this._language.current]} ${this.value.length}`)}render(){return n`<slot @slotchange=${this._setupComponent}></slot>`}}})();export{C as SbbChipElement,E as SbbChipGroupElement,T as SbbChipInputTokenEndEvent};
+`,T=class extends Event{constructor(e){super(`chipinputtokenend`,{cancelable:!0,bubbles:!0,composed:!0}),this.origin=e.origin,this.value=e.value,this.label=e.label}setValue(e){this.value=e}setLabel(e){this.label=e}};let E=(()=>{let f=p(o(u(c(s)))),g=[],b,x,S=[],E=[],D,O=[],k=[],A,j=[],M=[];return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;b=[a({type:Array})],x=[a({attribute:!1})],D=[a({attribute:`separator-keys`,type:Array})],A=[m(),a({attribute:`add-on-blur`,type:Boolean})],e(this,null,b,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,g),e(this,null,x,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},S,E),e(this,null,D,{kind:`accessor`,name:`separatorKeys`,static:!1,private:!1,access:{has:e=>`separatorKeys`in e,get:e=>e.separatorKeys,set:(e,t)=>{e.separatorKeys=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`addOnBlur`,static:!1,private:!1,access:{has:e=>`addOnBlur`in e,get:e=>e.addOnBlur,set:(e,t)=>{e.addOnBlur=t}},metadata:t},j,M),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip-group`}static{this.elementDependencies=[C]}static{this.role=`listbox`}static{this.styles=[i(w)]}static{this.events={input:`input`,change:`change`,chipinputtokenend:`chipinputtokenend`}}set value(e){e??=[];let t=this.value,n=[...t];for(let t of e)n.includes(t)&&n.splice(n.indexOf(t),1);n.forEach(e=>this._chipElements().find(t=>t.value===e)?.remove());let r=[...e];for(let e of t)r.includes(e)&&r.splice(r.indexOf(e),1);r.forEach(e=>this._createChipElement(e))}get value(){return this._chipElements().map(e=>e.value)}#e;get displayWith(){return this.#e}set displayWith(e){this.#e=e}#t;get separatorKeys(){return this.#t}set separatorKeys(e){this.#t=e}#n;get addOnBlur(){return this.#n}set addOnBlur(e){this.#n=e}constructor(){super(),this.#e=(t(this,g),t(this,S,null)),this.#t=(t(this,E),t(this,O,[`Enter`])),this.#n=(t(this,k),t(this,j,!1)),this._inputAttributeObserver=(t(this,M),r?null:new MutationObserver(()=>this._reactToInputChanges())),this._language=new l(this),this._previousSize=null,this.addEventListener?.(C.events.requestdelete,e=>this._deleteChip(e.target)),this.addEventListener?.(`keydown`,e=>this._onChipKeyDown(e)),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{size:e=>this._updateSize(e.size),label:e=>this._updateLabelState(e),hiddenLabel:e=>this._updateLabelState(e)}))}_updateLabelState(e){this.toggleState(`without-label`,!e.label||e.hiddenLabel)}connectedCallback(){super.connectedCallback(),this._setupComponent()}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`)||e.has(`negative`))&&this._proxyStateToChips()}formResetCallback(){this.value=null}formStateRestoreCallback(e,t){if(!e){this.value=null;return}this._readFormData(e).then(e=>this.value=e)}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}shouldValidate(e){return super.shouldValidate(e)||e===`required`||e===`value`}validate(){super.validate(),this.required&&this.value.length===0?this.setValidityFlag(`valueMissing`,v[this._language.current]):this.removeValidityFlag(`valueMissing`)}_chipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip`)??[])}_enabledChipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip:not([disabled])`)??[])}_setupComponent(){let e=this.querySelector(`input`);e&&e!==this._inputElement&&(this._inputAbortController?.abort(),this._inputAttributeObserver?.disconnect(),this._inputElement=e,this._inputAbortController=new AbortController,this._inputElement.addEventListener(`keydown`,e=>this._onInputKeyDown(e),{signal:this._inputAbortController.signal}),this._inputElement.addEventListener(`blur`,()=>this._onInputBlur(),{signal:this._inputAbortController.signal,capture:!0}),this._inputElement.addEventListener(`inputAutocomplete`,e=>this._createChipFromInput(`autocomplete`,e.option.value),{signal:this._inputAbortController.signal}),this._inputAttributeObserver?.observe(this._inputElement,{attributes:!0,attributeFilter:[`readonly`,`disabled`]})),this.closest(`sbb-form-field`)||this._updateSize(null),this.toggleState(`empty`,this.value.length===0),this._reactToInputChanges(),this._updateInputDescription(),this.updateFormValue()}_onChipKeyDown(e){let t=e.target;if(t.localName===`sbb-chip`){if(y(e)){let n=this._enabledChipElements();n[h(e,n.indexOf(t),n.length)].focus();return}switch(e.key){case`Backspace`:case`Delete`:!t.readOnly&&!t.disabled&&(e.preventDefault(),this._deleteChip(t));break}}}_onInputKeyDown(e){switch(e.key){case`Backspace`:case`ArrowLeft`:this._inputElement.value||this._focusChip();break;case`Enter`:e.preventDefault();break}this.separatorKeys.includes(e.key)&&(e.preventDefault(),this._createChipFromInput(`input`))}_onInputBlur(){this.addOnBlur&&this._createChipFromInput(`input`)}_createChipFromInput(e=`input`,t){let n=t??this._inputElement.value.trim();if(!n)return;let r=new T({origin:e,value:n,label:(t?this.displayWith?.(t):null)??void 0});this.dispatchEvent(r)&&(this._createChipElement(r.value,r.label),this._inputElement.value=``,this._emitInputEvents())}_deleteChip(e){let t=this._enabledChipElements();e.remove(),this._emitInputEvents(),this._focusChip(t.indexOf(e))}_focusChip(e){let t=this._enabledChipElements();if(e!==void 0&&t[e]){t[e].focus();return}if(t.length>0){t[t.length-1].focus();return}this._inputElement?.focus()}_emitInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_createChipElement(e,t){if(r)return;let n=document.createElement(`sbb-chip`);n.value=e,n.innerText=t??(e?this.displayWith?.(e):null)??``,this.insertBefore(n,this._inputElement??this.querySelector(`input`))}_reactToInputChanges(){this.disabled=this._inputElement?.disabled??!1,this._proxyStateToChips()}_proxyStateToChips(){this._chipElements().forEach(e=>{e.disabled=this.disabled||this.formDisabled,e.readOnly=this._inputElement?.hasAttribute(`readonly`)??!1,e.negative=this.negative})}_updateSize(e){this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}_updateInputDescription(){this._inputElement&&this._inputElement.setAttribute(`aria-description`,`${_[this._language.current]} ${this.value.length}`)}render(){return n`<slot @slotchange=${this._setupComponent}></slot>`}}})();export{C as SbbChipElement,E as SbbChipGroupElement,T as SbbChipInputTokenEndEvent};

package/clock.pure.js

@@ -3,7 +3,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
 `,u=`<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
 `,d=`<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
 `,f=`:host{aspect-ratio:1;contain:content;display:block;position:relative;overflow:hidden}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{transform-origin:50%;transform-style:preserve-3d;backface-visibility:hidden;position:absolute;inset:0;transform:rotate(0)}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration,.2s) cubic-bezier(.4, 2.08, .55, .44)}@supports not (aspect-ratio:1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:var(--sbb-clock-animation-play-state,"paused")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state,"paused");fill:var(--sbb-clock-seconds-hand-color);animation-iteration-count:infinite}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--initialized]))) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotateZ(var(--sbb-clock-hours-animation-start-angle,0deg))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotateZ(var(--sbb-clock-seconds-animation-start-angle,0deg))}97.5%,to{transform:rotate(360deg)}}
-`;const p={once:!0,passive:!0};let m=(()=>{let m=s,h,g=[],_=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this._state=(t(this,_),`paused`),this._moveHoursHandFn=()=>this._moveHoursHand(),this._moveMinutesHandFn=()=>this._moveMinutesHand(),this._handlePageVisibilityChange=async()=>{this.now||(document.visibilityState===`hidden`?await this._stopClock():await this._startClock())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a()],e(this,null,h,{kind:`accessor`,name:`now`,static:!1,private:!1,access:{has:e=>`now`in e,get:e=>e.now,set:(e,t)=>{e.now=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-clock`}static{this.styles=[i(f)]}#e;get now(){return this.#e}set now(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._resetIntervalId=setInterval(()=>this._resetClock(),1800*1e3)}willUpdate(e){super.willUpdate(e),!r&&e.has(`now`)&&this._startOrConfigureClock()}firstUpdated(e){super.firstUpdated(e),r||(document.addEventListener(`visibilitychange`,this._handlePageVisibilityChange,!1),this._startOrConfigureClock())}disconnectedCallback(){super.disconnectedCallback(),this._removeEventListeners(),clearInterval(this._resetIntervalId)}async _startOrConfigureClock(){this.now?(await this._stopClock(),this._resetSecondsHandAnimation(),this._setHandsStartingPosition()):await this._startClock()}async _startClock(){this._clockHandHours?.addEventListener(`animationend`,this._moveHoursHandFn,p),this._clockHandSeconds?.addEventListener(`animationend`,this._moveMinutesHandFn,p),await new Promise(e=>setTimeout(()=>{this._setHandsStartingPosition(),this.style?.setProperty(`--sbb-clock-animation-play-state`,`running`),this._state=`running`,e()},50))}async _stopClock(){clearInterval(this._handMovement),this._removeSecondsAnimationStyles(),this._removeHoursAnimationStyles(),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._clockHandMinutes?.classList.add(`sbb-clock__hand-minutes--no-transition`),this.style?.setProperty(`--sbb-clock-animation-play-state`,`paused`),this._state=`paused`}async _resetClock(){this._state===`running`&&(await this._stopClock(),await this._startClock())}_setHandsStartingPosition(){this._assignCurrentTime();let e=60-this._seconds,t=60-this._minutes,n=12-this._hours,r=0,i=0;e>0&&(r+=e,i=1),t>0&&(r+=(t-i)*60,i=1),n>0&&(r+=(n-i)*3600),this.style?.setProperty(`--sbb-clock-hours-animation-start-angle`,`${Math.ceil(this._hours*30+this._minutes/2)}deg`),this.style?.setProperty(`--sbb-clock-hours-animation-duration`,`${r}s`),this.style?.setProperty(`--sbb-clock-seconds-animation-start-angle`,`${Math.ceil(this._seconds*6.153846153846154)}deg`),this.style?.setProperty(`--sbb-clock-seconds-animation-duration`,`${e}s`),this._setMinutesHand(),this._clockHandSeconds?.classList.add(`sbb-clock__hand-seconds--initial-minute`),this._clockHandHours?.classList.add(`sbb-clock__hand-hours--initial-hour`),this.internals.states.add(`initialized`)}_assignCurrentTime(){let e=this.now?null:new Date,[t,n,r]=e?[e.getHours(),e.getMinutes(),e.getSeconds()]:this.now.split(`:`).map(e=>+e);this._hours=t%12,this._minutes=n,this._seconds=r}_setMinutesHand(){this._clockHandMinutes?.style.setProperty(`transform`,`rotateZ(${Math.ceil(this._minutes*6)}deg)`)}_moveHoursHand(){this._removeHoursAnimationStyles();let e=Math.ceil(this._hours*30+this._minutes/2);e>=360&&(e-=360),this._clockHandHours?.style.setProperty(`transform`,`rotateZ(${e}deg)`)}_moveMinutesHand(){this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._removeSecondsAnimationStyles(),this._addMinutesAndSetHands(),this._handMovement=setInterval(()=>this._addMinutesAndSetHands(),60*1e3)}_addMinutesAndSetHands(){this._minutes++,this._setMinutesHand()}_resetSecondsHandAnimation(){this._clockHandSeconds&&(this._clockHandSeconds.style.animation=``,this._clockHandSeconds.offsetHeight,this._clockHandSeconds.style.removeProperty(`animation`))}_removeEventListeners(){document?.removeEventListener(`visibilitychange`,this._handlePageVisibilityChange),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),clearInterval(this._handMovement)}_removeHoursAnimationStyles(){this._clockHandHours?.classList.remove(`sbb-clock__hand-hours--initial-hour`),this.style.removeProperty(`--sbb-clock-hours-animation-start-angle`),this.style.removeProperty(`--sbb-clock-hours-animation-duration`)}_removeSecondsAnimationStyles(){this._clockHandSeconds?.classList.remove(`sbb-clock__hand-seconds--initial-minute`),this._clockHandMinutes?.classList.remove(`sbb-clock__hand-minutes--no-transition`),this.style.removeProperty(`--sbb-clock-seconds-animation-start-angle`),this.style.removeProperty(`--sbb-clock-seconds-animation-duration`)}render(){return n`
+`;const p={once:!0,passive:!0};let m=(()=>{let m=s,h,g=[],_=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this._state=(t(this,_),`paused`),this._moveHoursHandFn=()=>this._moveHoursHand(),this._moveMinutesHandFn=()=>this._moveMinutesHand(),this._handlePageVisibilityChange=()=>{this.now||(document.visibilityState===`hidden`?this._stopClock():this._startClock())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a()],e(this,null,h,{kind:`accessor`,name:`now`,static:!1,private:!1,access:{has:e=>`now`in e,get:e=>e.now,set:(e,t)=>{e.now=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-clock`}static{this.styles=[i(f)]}#e;get now(){return this.#e}set now(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._resetIntervalId=setInterval(()=>this._resetClock(),1800*1e3)}willUpdate(e){super.willUpdate(e),!(r||!this.hasUpdated)&&e.has(`now`)&&this._startOrConfigureClock()}firstUpdated(e){super.firstUpdated(e),r||(document.addEventListener(`visibilitychange`,this._handlePageVisibilityChange,!1),this._startOrConfigureClock())}disconnectedCallback(){super.disconnectedCallback(),this._removeEventListeners(),clearInterval(this._resetIntervalId)}_startOrConfigureClock(){this.now?(this._stopClock(),this._resetSecondsHandAnimation(),this._setHandsStartingPosition()):this._startClock()}_startClock(){this._clockHandHours?.addEventListener(`animationend`,this._moveHoursHandFn,p),this._clockHandSeconds?.addEventListener(`animationend`,this._moveMinutesHandFn,p),this._setHandsStartingPosition(),this.style?.setProperty(`--sbb-clock-animation-play-state`,`running`),this._state=`running`}_stopClock(){clearInterval(this._handMovement),this._removeSecondsAnimationStyles(),this._removeHoursAnimationStyles(),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._clockHandMinutes?.classList.add(`sbb-clock__hand-minutes--no-transition`),this.style?.setProperty(`--sbb-clock-animation-play-state`,`paused`),this._state=`paused`}async _resetClock(){this._state===`running`&&(this._stopClock(),setTimeout(()=>this._startClock(),50))}_setHandsStartingPosition(){this._assignCurrentTime();let e=60-this._seconds,t=60-this._minutes,n=12-this._hours,r=0,i=0;e>0&&(r+=e,i=1),t>0&&(r+=(t-i)*60,i=1),n>0&&(r+=(n-i)*3600),this.style?.setProperty(`--sbb-clock-hours-animation-start-angle`,`${Math.ceil(this._hours*30+this._minutes/2)}deg`),this.style?.setProperty(`--sbb-clock-hours-animation-duration`,`${r}s`),this.style?.setProperty(`--sbb-clock-seconds-animation-start-angle`,`${Math.ceil(this._seconds*6.153846153846154)}deg`),this.style?.setProperty(`--sbb-clock-seconds-animation-duration`,`${e}s`),this._setMinutesHand(),this._clockHandSeconds?.classList.add(`sbb-clock__hand-seconds--initial-minute`),this._clockHandHours?.classList.add(`sbb-clock__hand-hours--initial-hour`),this.internals.states.add(`initialized`)}_assignCurrentTime(){let e=this.now?null:new Date,[t,n,r]=e?[e.getHours(),e.getMinutes(),e.getSeconds()]:this.now.split(`:`).map(e=>+e);this._hours=t%12,this._minutes=n,this._seconds=r}_setMinutesHand(){this._clockHandMinutes?.style.setProperty(`transform`,`rotateZ(${Math.ceil(this._minutes*6)}deg)`)}_moveHoursHand(){this._removeHoursAnimationStyles();let e=Math.ceil(this._hours*30+this._minutes/2);e>=360&&(e-=360),this._clockHandHours?.style.setProperty(`transform`,`rotateZ(${e}deg)`)}_moveMinutesHand(){this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._removeSecondsAnimationStyles(),this._addMinutesAndSetHands(),this._handMovement=setInterval(()=>this._addMinutesAndSetHands(),60*1e3)}_addMinutesAndSetHands(){this._minutes++,this._setMinutesHand()}_resetSecondsHandAnimation(){this._clockHandSeconds&&(this._clockHandSeconds.style.animation=``,this._clockHandSeconds.offsetHeight,this._clockHandSeconds.style.removeProperty(`animation`))}_removeEventListeners(){document?.removeEventListener(`visibilitychange`,this._handlePageVisibilityChange),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),clearInterval(this._handMovement)}_removeHoursAnimationStyles(){this._clockHandHours?.classList.remove(`sbb-clock__hand-hours--initial-hour`),this.style.removeProperty(`--sbb-clock-hours-animation-start-angle`),this.style.removeProperty(`--sbb-clock-hours-animation-duration`)}_removeSecondsAnimationStyles(){this._clockHandSeconds?.classList.remove(`sbb-clock__hand-seconds--initial-minute`),this._clockHandMinutes?.classList.remove(`sbb-clock__hand-minutes--no-transition`),this.style.removeProperty(`--sbb-clock-seconds-animation-start-angle`),this.style.removeProperty(`--sbb-clock-seconds-animation-duration`)}render(){return n`
       <span class="sbb-clock__face" .innerHTML=${c}></span>
       <span
         class="sbb-clock__hand-hours"

package/core/styles/_theme.scss

@@ -52,6 +52,9 @@ $theme: 'standard' !default;
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
+@use '../../download/download.global' as download with (
+  $theme: $theme
+);
 @use '../../expansion-panel/expansion-panel.global' as expansion-panel with (
   $theme: $theme
 );
@@ -229,6 +232,7 @@ $theme: 'standard' !default;
   @include container.base;
   @include dialog.base;
   @include divider.base;
+  @include download.base;
   @include expansion-panel.base;
   @include file-selector.base;
   @include flip-card.base;
@@ -285,6 +289,7 @@ $theme: 'standard' !default;
     @include breadcrumb.forced-colors;
     @include calendar.forced-colors;
     @include card.forced-colors;
+    @include download.forced-colors;
     @include expansion-panel.forced-colors;
     @include form-field.forced-colors;
     @include header.forced-colors;
@@ -338,6 +343,7 @@ $theme: 'standard' !default;
 @include badge.rules;
 @include breadcrumb.rules;
 @include card.rules;
+@include carousel.rules;
 @include container.rules;
 @include dialog.rules;
 @include flip-card.rules;