@sbb-esta/lyne-elements 5.1.0 → 5.2.0

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

@@ -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/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

@@ -338,6 +338,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;

package/core.js

@@ -34,8 +34,8 @@ let xe=0;var Se=class{constructor(){r||(document.body?this._liveElement=this._cr
         ${e}
       </a>
       ${t?n`<span id="sbb-link-new-window" hidden
-            >${mt[this.language.current]}</span
-          >`:i}
+              >${mt[this.language.current]}</span
+            >`:i}
     `}}})();var jn=class extends P{static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}set state(e){this._state&&this.internals.states.delete(`state-${this._state}`),this._state=e,this._state&&this.internals.states.add(`state-${this._state}`)}get state(){return this._state}get isOpen(){return this.state===`opened`}constructor(){super(),this.state=`closed`}escapeStrategy(){this.close()}dispatchBeforeOpenEvent(){return this.dispatchEvent(new Event(`beforeopen`,{cancelable:!0}))}dispatchOpenEvent(){return this.dispatchEvent(new Event(`open`))}dispatchBeforeCloseEvent(){return this.dispatchEvent(new Event(`beforeclose`,{cancelable:!0}))}dispatchCloseEvent(){return this.dispatchEvent(new Event(`close`))}};const V=e=>(()=>{let t=e,n=[],r;return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;r=[l({type:Boolean,reflect:!0})],o(this,null,r,{kind:`setter`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,set:(e,t)=>{e.disabled=t}},metadata:e},null,n),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}set disabled(e){this.#e=!!e,this.toggleAttribute(`disabled`,this.disabled)}get disabled(){return this.#e||this.isDisabledExternally()}#e=(s(this,n),!1);isDisabledExternally(){return!1}}})(),Mn=e=>(()=>{let t=e,n,r=[],i=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[I(),l({attribute:`disabled-interactive`,type:Boolean,reflect:!0})],o(this,null,n,{kind:`accessor`,name:`disabledInteractive`,static:!1,private:!1,access:{has:e=>`disabledInteractive`in e,get:e=>e.disabledInteractive,set:(e,t)=>{e.disabledInteractive=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#e=s(this,r,!1);get disabledInteractive(){return this.#e}set disabledInteractive(e){this.#e=e}constructor(){super(...arguments),s(this,i)}}})(),Nn=e=>{class t extends Mn(V(e)){willUpdate(e){super.willUpdate(e),e.has(`disabledInteractive`)&&(this.internals.ariaDisabled=this.disabledInteractive?`true`:null),e.has(`disabled`)&&(this.disabled?this.removeAttribute(`tabindex`):this.setAttribute(`tabindex`,`0`))}}return t},H=e=>(()=>{let t=e,n=[],r;return class extends t{constructor(){super(...arguments),this._required=(s(this,n),!1)}static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;r=[l({reflect:!0,type:Boolean})],o(this,null,r,{kind:`setter`,name:`required`,static:!1,private:!1,access:{has:e=>`required`in e,set:(e,t)=>{e.required=t}},metadata:e},null,n),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}set required(e){this._required=!!e}get required(){return this._required||this.isRequiredExternally()}willUpdate(e){super.willUpdate(e),e.has(`required`)&&(this.internals.ariaRequired=`${this.required}`)}isRequiredExternally(){return!1}}})();var Pn=`:host{flex-flow:var(--sbb-selection-group-orientation) wrap;gap:var(--sbb-selection-group-gap);width:var(--sbb-selection-group-width);align-items:flex-start;display:flex}:host([orientation=vertical]){--sbb-selection-group-orientation:column;--sbb-selection-group-width:100%;--sbb-selection-group-elements-width:100%}:host(:is(:state(has-panel),[state--has-panel])){--sbb-selection-group-width:100%;--sbb-selection-group-gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-selection-group-elements-flex:auto}@media (width>=0){:host([orientation=vertical][horizontal-from=zero]){--sbb-selection-group-orientation:row;--sbb-selection-group-elements-width:auto}:host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-selection-group-width:auto}}@media (width>=37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-selection-group-orientation:row;--sbb-selection-group-elements-width:auto}:host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-selection-group-width:auto}}@media (width>=64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-selection-group-orientation:row;--sbb-selection-group-elements-width:auto}:host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-selection-group-width:auto}}@media (width>=90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-selection-group-orientation:row;--sbb-selection-group-elements-width:auto}:host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))){--sbb-selection-group-width:auto}}slot[name=error]::slotted(*){flex-basis:100%}::slotted(:is(sbb-checkbox-panel,sbb-radio-button-panel)){flex:var(--sbb-selection-group-elements-flex)}::slotted(:is(sbb-checkbox,sbb-checkbox-panel,sbb-radio-button-panel)){width:var(--sbb-selection-group-elements-width)}
 `;let Fn=(()=>{let e=V(H(P)),t,r=[],i=[],c,u=[],f=[],p,m=[],h=[];return class extends e{static{let n=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[l()],c=[l({attribute:`horizontal-from`,reflect:!0})],p=[l({reflect:!0})],o(this,null,t,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:n},r,i),o(this,null,c,{kind:`accessor`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,get:e=>e.horizontalFrom,set:(e,t)=>{e.horizontalFrom=t}},metadata:n},u,f),o(this,null,p,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:n},m,h),n&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:n})}static{this.styles=[a(Pn)]}#e=s(this,r,null);get size(){return this.#e}set size(e){this.#e=e}#t=(s(this,i),s(this,u,null));get horizontalFrom(){return this.#t}set horizontalFrom(e){this.#t=e}#n=(s(this,f),s(this,m,`horizontal`));get orientation(){return this.#n}set orientation(e){this.#n=e}get selectionElements(){return Array.from(this.querySelectorAll?.(this.selectionElementSelectors)??[]).filter(e=>e.closest?.(this.localName)===this)}constructor(){super(),s(this,h),this.addController(new d(this,{config:{childList:!0,subtree:!0},callback:()=>this.toggleState(`has-panel`,!!this.querySelector?.(this.panelElementSelector))}))}onSlotChange(){}render(){return n`
       <slot @slotchange=${()=>this.onSlotChange()}></slot>