@sbb-esta/lyne-elements-dev 5.1.0-dev.1782307952 → 5.1.0-dev.1782310350

package/development/teaser.pure.js

@@ -5,7 +5,7 @@ import { html } from "lit/static-html.js";
 import { SbbLinkBaseElement, screenReaderOnlyStyles } from "./core.js";
 
 //#region src/elements/teaser/teaser.scss?inline
-var teaser_default = "@charset \"UTF-8\";\n:host {\n  --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-border-radius: calc(\n    var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n  );\n  display: inline-block;\n  outline: none !important;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-teaser-description-color: LinkText;\n    --sbb-title-color: LinkText !important;\n  }\n}\n\n:host([alignment=after]) {\n  --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n  --sbb-teaser-flex-direction: column;\n  --sbb-teaser-align-items: baseline;\n  --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n  }\n}\n.sbb-teaser__wrapper {\n  display: flex;\n  position: relative;\n  cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-teaser {\n  text-decoration: none;\n  position: absolute;\n  inset: 0;\n}\n.sbb-teaser:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n  .sbb-teaser:focus-visible {\n    outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n  }\n}\n@media (forced-colors: active) {\n  .sbb-teaser::before {\n    content: \"\";\n    position: absolute;\n    inset: var(--_sbb-teaser-forced-colors-inset);\n    pointer-events: none;\n    border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-teaser__container {\n  display: flex;\n  flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n  align-items: var(--sbb-teaser-align-items);\n  gap: var(--sbb-teaser-gap);\n  max-width: 100%;\n  width: 100%;\n  pointer-events: none;\n}\n\n.sbb-teaser__text {\n  color: var(--sbb-teaser-description-color);\n  font-size: var(--sbb-teaser-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n::slotted([slot=image]) {\n  display: block;\n  width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: var(--sbb-teaser-border-radius);\n  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:hover) .sbb-teaser__image-wrapper {\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n\n.sbb-teaser__description {\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n  margin-block: 0;\n}\n";
+var teaser_default = "@charset \"UTF-8\";\n:host {\n  --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-border-radius: calc(\n    var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n  );\n  display: inline-block;\n  outline: none !important;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-teaser-description-color: LinkText;\n    --sbb-title-color: LinkText !important;\n  }\n}\n\n:host([alignment=after]) {\n  --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n  --sbb-teaser-flex-direction: column;\n  --sbb-teaser-align-items: baseline;\n  --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n  }\n}\n.sbb-teaser__wrapper {\n  display: flex;\n  position: relative;\n  cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-teaser {\n  text-decoration: none;\n  position: absolute;\n  inset: 0;\n}\n.sbb-teaser:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n  .sbb-teaser:focus-visible {\n    outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n  }\n}\n@media (forced-colors: active) {\n  .sbb-teaser::before {\n    content: \"\";\n    position: absolute;\n    inset: var(--_sbb-teaser-forced-colors-inset);\n    pointer-events: none;\n    border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-teaser__container {\n  display: flex;\n  flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n  align-items: var(--sbb-teaser-align-items);\n  gap: var(--sbb-teaser-gap);\n  max-width: 100%;\n  width: 100%;\n  pointer-events: none;\n}\n\n.sbb-teaser__text {\n  color: var(--sbb-teaser-description-color);\n  font-size: var(--sbb-teaser-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n::slotted([slot=image]) {\n  display: block;\n  width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: var(--sbb-teaser-border-radius);\n  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n  max-width: 100%;\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:hover) .sbb-teaser__image-wrapper {\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n\n.sbb-teaser__description {\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n  margin-block: 0;\n}\n";
 
 //#endregion
 //#region src/elements/teaser/teaser.component.ts

package/lean-off-brand-theme.css

@@ -2797,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/lean-safety-theme.css

@@ -2797,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/lean-theme.css

@@ -2797,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/off-brand-theme.css

@@ -2797,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :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.1782307952",
+  "version": "5.1.0-dev.1782310350",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/e05787f487cd8c128a4483f3d9f6d77726d6f873"
+    "https://github.com/sbb-design-systems/lyne-components/commit/09415e80b45e3276693cf8f74cb6fc02dc2cdd53"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -2797,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/standard-theme.css

@@ -2797,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/teaser/_teaser.global.scss

@@ -39,6 +39,10 @@ $theme: 'standard' !default;
         filter,
         scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
     }
+
+    .sbb-figure {
+      max-width: 100%;
+    }
   }
 
   sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {

package/teaser.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbLinkBaseElement as a,screenReaderOnlyStyles as o}from"./core.js";var s=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-color:LinkText!important}}:host([alignment=after]){--sbb-teaser-align-items:start}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-spacing-fixed-3x)}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer);display:flex;position:relative}.sbb-teaser__wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors:active){.sbb-teaser:focus-visible{outline-offset:var(--_sbb-teaser-forced-colors-outline-offset)}.sbb-teaser:before{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);pointer-events:none;width:100%;max-width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);max-width:100%;overflow:hidden}::slotted([slot=image]){width:var(--sbb-teaser-image-width);display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){width:fit-content;max-width:100%;margin-block-end:var(--sbb-spacing-fixed-1x);display:flex}::slotted(sbb-title){margin-block:0}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbLinkBaseElement as a,screenReaderOnlyStyles as o}from"./core.js";var s=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-color:LinkText!important}}:host([alignment=after]){--sbb-teaser-align-items:start}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-spacing-fixed-3x)}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer);display:flex;position:relative}.sbb-teaser__wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors:active){.sbb-teaser:focus-visible{outline-offset:var(--_sbb-teaser-forced-colors-outline-offset)}.sbb-teaser:before{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);pointer-events:none;width:100%;max-width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);max-width:100%;overflow:hidden}::slotted([slot=image]){width:var(--sbb-teaser-image-width);display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;max-width:100%;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){width:fit-content;max-width:100%;margin-block-end:var(--sbb-spacing-fixed-1x);display:flex}::slotted(sbb-title){margin-block:0}
 `;let c=(()=>{let c=a,l,u=[],d=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[r({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`alignment`,static:!1,private:!1,access:{has:e=>`alignment`in e,get:e=>e.alignment,set:(e,t)=>{e.alignment=t}},metadata:t},u,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-teaser`}static{this.styles=[o,n(s)]}#e=t(this,u,`after-centered`);get alignment(){return this.#e}set alignment(e){this.#e=e}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-chip-label`);e&&(e.slot=`chip`);let t=Array.from(this.children).find(e=>e.localName===`sbb-title`);t&&(t.slot=`title`)}_configureChip(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-chip-label`);t&&(customElements.upgrade(t),t.color=`charcoal`,t.size=`xxs`)}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}render(){return i`
       <div class="sbb-teaser__wrapper">
         ${this.renderLink(i`<span class="sbb-screen-reader-only">${this.accessibilityLabel}</span>`)}