@sbb-esta/lyne-elements-dev 5.7.0-dev.1788418878 → 5.7.0-dev.1788418915
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1195 -34
- package/development/teaser/common/teaser-common.d.ts +6 -0
- package/development/teaser/{teaser.component.d.ts → teaser/teaser.component.d.ts} +6 -9
- package/development/teaser/teaser-static/teaser-static.component.d.ts +22 -0
- package/development/teaser.js +2 -1
- package/development/teaser.pure.d.ts +3 -1
- package/development/teaser.pure.js +171 -100
- package/index.d.ts +2 -1
- package/index.js +2 -1
- package/lean-off-brand-theme.css +16 -4
- package/lean-safety-theme.css +16 -4
- package/lean-theme.css +16 -4
- package/off-brand-theme.css +16 -4
- package/package.json +2 -2
- package/safety-theme.css +16 -4
- package/standard-theme.css +16 -4
- package/teaser/_teaser.global.scss +17 -6
- package/teaser.js +1 -1
- package/teaser.pure.js +22 -18
package/standard-theme.css
CHANGED
|
@@ -1788,10 +1788,21 @@ summary {
|
|
|
1788
1788
|
--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
|
|
1789
1789
|
--sbb-teaser-flex-direction: row;
|
|
1790
1790
|
--sbb-teaser-align-items: center;
|
|
1791
|
-
--sbb-teaser-font-size: var(--sbb-text-font-size-s);
|
|
1792
|
-
--sbb-teaser-
|
|
1791
|
+
--sbb-teaser-font-size-m: var(--sbb-text-font-size-s);
|
|
1792
|
+
--sbb-teaser-font-size-l: var(--sbb-text-font-size-m);
|
|
1793
|
+
--sbb-teaser-font-size: var(--sbb-teaser-font-size-m);
|
|
1794
|
+
--sbb-teaser-gap-m: var(--sbb-spacing-fixed-4x);
|
|
1795
|
+
--sbb-teaser-gap-l: var(--sbb-spacing-responsive-m);
|
|
1796
|
+
--sbb-teaser-gap: var(--sbb-teaser-gap-m);
|
|
1797
|
+
--sbb-teaser-gap-below: var(--sbb-spacing-fixed-3x);
|
|
1793
1798
|
--sbb-teaser-border-radius: var(--sbb-border-radius-4x);
|
|
1794
1799
|
--sbb-teaser-image-width: 18.75rem;
|
|
1800
|
+
--sbb-teaser-title-gap-m: 0;
|
|
1801
|
+
--sbb-teaser-title-gap-l: var(--sbb-spacing-responsive-xxxs);
|
|
1802
|
+
--sbb-teaser-title-gap: var(--sbb-teaser-title-gap-m);
|
|
1803
|
+
--sbb-teaser-button-gap-m: var(--sbb-spacing-fixed-2x);
|
|
1804
|
+
--sbb-teaser-button-gap-l: var(--sbb-spacing-responsive-xxs);
|
|
1805
|
+
--sbb-teaser-button-gap: var(--sbb-teaser-button-gap-m);
|
|
1795
1806
|
--sbb-teaser-hero-link-font-weight: 400;
|
|
1796
1807
|
--sbb-panel-width: 13.9375rem;
|
|
1797
1808
|
--sbb-panel-inner-height: 10.4375rem;
|
|
@@ -2811,11 +2822,12 @@ sbb-tab-nav-bar .sbb-tab-amount {
|
|
|
2811
2822
|
transition-timing-function: var(--sbb-teaser-image-animation-easing);
|
|
2812
2823
|
transition-property: filter, scale;
|
|
2813
2824
|
}
|
|
2814
|
-
|
|
2825
|
+
|
|
2826
|
+
:is(sbb-teaser, sbb-teaser-static, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
|
|
2815
2827
|
max-width: 100%;
|
|
2816
2828
|
}
|
|
2817
2829
|
|
|
2818
|
-
sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2830
|
+
:is(sbb-teaser, sbb-teaser-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2819
2831
|
--sbb-image-object-fit: cover;
|
|
2820
2832
|
--sbb-image-aspect-ratio: 4 / 3;
|
|
2821
2833
|
scale: var(--sbb-teaser-scale, 1);
|
|
@@ -7,10 +7,21 @@ $theme: 'standard' !default;
|
|
|
7
7
|
--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
|
|
8
8
|
--sbb-teaser-flex-direction: row;
|
|
9
9
|
--sbb-teaser-align-items: center;
|
|
10
|
-
--sbb-teaser-font-size: var(--sbb-text-font-size-s);
|
|
11
|
-
--sbb-teaser-
|
|
10
|
+
--sbb-teaser-font-size-m: var(--sbb-text-font-size-s);
|
|
11
|
+
--sbb-teaser-font-size-l: var(--sbb-text-font-size-m);
|
|
12
|
+
--sbb-teaser-font-size: var(--sbb-teaser-font-size-m);
|
|
13
|
+
--sbb-teaser-gap-m: var(--sbb-spacing-fixed-4x);
|
|
14
|
+
--sbb-teaser-gap-l: var(--sbb-spacing-responsive-m);
|
|
15
|
+
--sbb-teaser-gap: var(--sbb-teaser-gap-m);
|
|
16
|
+
--sbb-teaser-gap-below: var(--sbb-spacing-fixed-3x);
|
|
12
17
|
--sbb-teaser-border-radius: var(--sbb-border-radius-4x);
|
|
13
18
|
--sbb-teaser-image-width: #{sbb.px-to-rem-build(300)};
|
|
19
|
+
--sbb-teaser-title-gap-m: 0;
|
|
20
|
+
--sbb-teaser-title-gap-l: var(--sbb-spacing-responsive-xxxs);
|
|
21
|
+
--sbb-teaser-title-gap: var(--sbb-teaser-title-gap-m);
|
|
22
|
+
--sbb-teaser-button-gap-m: var(--sbb-spacing-fixed-2x);
|
|
23
|
+
--sbb-teaser-button-gap-l: var(--sbb-spacing-responsive-xxs);
|
|
24
|
+
--sbb-teaser-button-gap: var(--sbb-teaser-button-gap-m);
|
|
14
25
|
}
|
|
15
26
|
|
|
16
27
|
@mixin rules {
|
|
@@ -42,13 +53,13 @@ $theme: 'standard' !default;
|
|
|
42
53
|
property: filter, scale;
|
|
43
54
|
}
|
|
44
55
|
}
|
|
56
|
+
}
|
|
45
57
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
58
|
+
:is(sbb-teaser, sbb-teaser-static, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
|
|
59
|
+
max-width: 100%;
|
|
49
60
|
}
|
|
50
61
|
|
|
51
|
-
sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
62
|
+
:is(sbb-teaser, sbb-teaser-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
52
63
|
--sbb-image-object-fit: cover;
|
|
53
64
|
--sbb-image-aspect-ratio: 4 / 3;
|
|
54
65
|
|
package/teaser.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{SbbTeaserElement as e}from"./teaser.pure.js";export*from"./teaser.pure.js";e.define();
|
|
1
|
+
import{SbbTeaserElement as e,SbbTeaserStaticElement as t}from"./teaser.pure.js";export*from"./teaser.pure.js";e.define(),t.define();
|
package/teaser.pure.js
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as
|
|
2
|
-
`;
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbActionBaseElement as a,SbbLinkBaseElement as o,screenReaderOnlyStyles as s}from"./core.js";import{html as c}from"lit/static-html.js";var l=`: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}:host([size=l]){--sbb-teaser-gap:var(--sbb-teaser-gap-l);--sbb-teaser-title-gap:var(--sbb-teaser-title-gap-l);--sbb-teaser-button-gap:var(--sbb-teaser-button-gap-l);--sbb-teaser-font-size:var(--sbb-teaser-font-size-l)}:host(:is([alignment=after],[alignment=before])){--sbb-teaser-align-items:start}:host(:is([alignment=before],[alignment=before-centered])){--sbb-teaser-flex-direction:row-reverse}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-teaser-gap-below)}.sbb-teaser__wrapper{display:flex;position:relative}.sbb-teaser__wrapper:before{content:"";user-select:none;width:0;height:0}@media (forced-colors:active){.sbb-teaser__wrapper:after{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);width:100%;max-width:100%;display:flex}.sbb-teaser__content{gap:var(--sbb-teaser-button-gap);flex-direction:column;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}:host(:is(:state(slotted-action),[state--slotted-action])) slot[name=action]{display:block}::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}.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 var(--sbb-teaser-title-gap)}
|
|
2
|
+
`;const u=a=>(()=>{let o=a,s,c=[],u=[],d,f=[],p=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[i({reflect:!0})],d=[i({reflect:!0})],e(this,null,s,{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},c,u),e(this,null,d,{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:t},f,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[r(l)]}#e=t(this,c,`after-centered`);get alignment(){return this.#e}set alignment(e){this.#e=e}#t=(t(this,u),t(this,f,null));get size(){return this.#t}set size(e){this.#t=e}_handleSlotchange(){let e=!1,t=!1;for(let n of this.children)n.localName===`sbb-chip-label`&&!e?(n.slot||=`chip`,n.slot===`chip`&&(e=!0)):n.localName===`sbb-title`&&!t?(n.slot||=`title`,n.slot===`title`&&(t=!0)):/^sbb-(secondary-|accent-|transparent-)?button(-static|-link)?$/.test(n.localName)&&(n.slot||=`action`)}_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=this.size===`l`?`2`:`5`)}renderTemplate(){return n`
|
|
3
|
+
<span class="sbb-teaser__container">
|
|
4
|
+
<span class="sbb-teaser__image-wrapper">
|
|
5
|
+
<slot name="image"></slot>
|
|
6
|
+
</span>
|
|
7
|
+
<span class="sbb-teaser__content">
|
|
8
|
+
<span class="sbb-teaser__text">
|
|
9
|
+
<slot name="chip" @slotchange=${this._configureChip}></slot>
|
|
10
|
+
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
11
|
+
<p class="sbb-teaser__description">
|
|
12
|
+
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
13
|
+
</p>
|
|
14
|
+
</span>
|
|
15
|
+
<slot name="action"></slot>
|
|
16
|
+
</span>
|
|
17
|
+
</span>
|
|
18
|
+
`}constructor(){super(...arguments),t(this,p)}}})();var d=class extends u(a){static{this.elementName=`sbb-teaser-static`}render(){return c`<div class="sbb-teaser__wrapper">${this.renderTemplate()}</div>`}},f=`:host{outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-color:LinkText!important}}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer)}.sbb-teaser__container{pointer-events:none}.sbb-teaser{text-decoration:none;position:absolute;inset:0}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.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)}}
|
|
19
|
+
`,p=class extends u(o){static{this.elementName=`sbb-teaser`}static{this.styles=[s,r(f)]}render(){return c`
|
|
3
20
|
<div class="sbb-teaser__wrapper">
|
|
4
|
-
${this.renderLink(
|
|
5
|
-
${this.
|
|
21
|
+
${this.renderLink(c`<span class="sbb-screen-reader-only">${this.accessibilityLabel}</span>`)}
|
|
22
|
+
${this.renderTemplate()}
|
|
6
23
|
</div>
|
|
7
|
-
`}
|
|
8
|
-
<span class="sbb-teaser__container">
|
|
9
|
-
<span class="sbb-teaser__image-wrapper">
|
|
10
|
-
<slot name="image"></slot>
|
|
11
|
-
</span>
|
|
12
|
-
<span class="sbb-teaser__text">
|
|
13
|
-
<slot name="chip" @slotchange=${this._configureChip}></slot>
|
|
14
|
-
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
15
|
-
<p class="sbb-teaser__description">
|
|
16
|
-
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
17
|
-
</p>
|
|
18
|
-
</span>
|
|
19
|
-
</span>
|
|
20
|
-
`}constructor(){super(...arguments),t(this,d)}}})();export{c as SbbTeaserElement};
|
|
24
|
+
`}};export{u as SbbTeaserCommonElementMixin,p as SbbTeaserElement,d as SbbTeaserStaticElement};
|