@sbb-esta/lyne-elements-dev 5.1.0-dev.1782718491 → 5.1.0-dev.1782741955

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/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/development/carousel.pure.js

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

package/lean-off-brand-theme.css

@@ -2256,6 +2256,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/lean-safety-theme.css

@@ -2256,6 +2256,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/lean-theme.css

@@ -2256,6 +2256,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/off-brand-theme.css

@@ -2256,6 +2256,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.1.0-dev.1782718491",
+  "version": "5.1.0-dev.1782741955",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/c2a27bf4f052edfd27b4e64f78bbb295f605fc58"
+    "https://github.com/sbb-design-systems/lyne-components/commit/d185b414012c80b86d44a7401d724ca7b5f18bc0"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -2256,6 +2256,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/standard-theme.css

@@ -2256,6 +2256,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;