@sbb-esta/lyne-elements-dev 5.7.0-dev.1788418878 → 5.7.0-dev.1788435806
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 +1424 -253
- package/development/autocomplete/autocomplete.component.d.ts +1 -0
- package/development/autocomplete.pure.js +1 -0
- package/development/option.pure.js +1 -1
- package/development/select/select.component.d.ts +1 -0
- package/development/select.pure.js +1 -0
- 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 +17 -5
- package/lean-safety-theme.css +17 -5
- package/lean-theme.css +17 -5
- package/off-brand-theme.css +17 -5
- package/option/_option.global.scss +3 -1
- package/option.pure.js +1 -1
- package/package.json +2 -2
- package/safety-theme.css +17 -5
- package/standard-theme.css +17 -5
- package/teaser/_teaser.global.scss +17 -6
- package/teaser.js +1 -1
- package/teaser.pure.js +22 -18
package/off-brand-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
|
@@ -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);
|
|
@@ -66,8 +66,10 @@ $theme: 'standard' !default;
|
|
|
66
66
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
67
67
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
68
68
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
69
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
70
69
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
70
|
+
|
|
71
|
+
// Public documented variable on sbb-select and sbb-autocomplete.
|
|
72
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
@mixin rules {
|
package/option.pure.js
CHANGED
|
@@ -13,7 +13,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
|
|
|
13
13
|
<span class="sbb-option-hint">
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</span>
|
|
16
|
-
`}};const E=i(`:host{--sbb-options-panel-position-x:0;--sbb-options-panel-position-y:0;--sbb-options-pointer-events:all;--_sbb-options-panel-max-height:min(var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height,100000em));--sbb-options-panel-min-height:1em;--sbb-options-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));font-weight:400}:host([negative]){--sbb-options-panel-box-shadow:var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color:var(--sbb-background-color-2-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility:hidden;--sbb-options-pointer-events:none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name:open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name:close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate:var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-animation-translate:calc(-1 * var(--sbb-spacing-fixed-2x));--
|
|
16
|
+
`}};const E=i(`:host{--sbb-options-panel-position-x:0;--sbb-options-panel-position-y:0;--sbb-options-pointer-events:all;--_sbb-options-panel-max-height:min(var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height,100000em));--sbb-options-panel-min-height:1em;--sbb-options-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));font-weight:400}:host([negative]){--sbb-options-panel-box-shadow:var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color:var(--sbb-background-color-2-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility:hidden;--sbb-options-pointer-events:none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name:open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name:close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate:var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-animation-translate:calc(-1 * var(--sbb-spacing-fixed-2x));--_sbb-options-panel-offset:calc(-1 * var(--sbb-options-panel-offset))}:host([preserve-icon-space]){--sbb-option-icon-container-display:block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-option-panel__overlay-container{pointer-events:none;z-index:var(--sbb-options-panel-internal-z-index);position:fixed;inset:0}.sbb-option-panel__overlay-container:after{content:"";top:var(--sbb-options-panel-origin-position-y);left:var(--sbb-options-panel-origin-position-x);width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-origin-height);border-radius:var(--sbb-options-panel-border-radius);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);background-color:#0000;display:block;position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container:after{box-shadow:var(--sbb-options-panel-box-shadow)}.sbb-option-panel__overlay{visibility:var(--sbb-options-panel-visibility,visible);border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width,fit-content);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);box-shadow:var(--sbb-options-panel-box-shadow);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:var(--sbb-options-pointer-events);animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);border:none;margin-block-start:var(--_sbb-options-panel-offset,var(--sbb-options-panel-offset));padding-inline:0;display:block;position:absolute;overflow:hidden auto}@media (forced-colors:active){.sbb-option-panel__overlay{border:var(--sbb-border-width-1x) solid CanvasText}}@keyframes open{0%{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}}
|
|
17
17
|
`),D=m,O={childList:!0,subtree:!0,characterData:!0};let k=(()=>{let i=s(v(c)),l=[],d,m,y,b=[],x=[],S,C=[],w=[],T,E=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;d=[a()],m=[a({type:Boolean})],y=[o()],S=[o()],T=[o()],A=[o()],N=[o()],I=[o()],e(this,null,d,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,l),e(this,null,m,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:t},null,l),e(this,null,y,{kind:`accessor`,name:`disabledFromGroup`,static:!1,private:!1,access:{has:e=>`disabledFromGroup`in e,get:e=>e.disabledFromGroup,set:(e,t)=>{e.disabledFromGroup=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`groupLabel`,static:!1,private:!1,access:{has:e=>`groupLabel`in e,get:e=>e.groupLabel,set:(e,t)=>{e.groupLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},E,k),e(this,null,A,{kind:`accessor`,name:`disableLabelHighlight`,static:!1,private:!1,access:{has:e=>`disableLabelHighlight`in e,get:e=>e.disableLabelHighlight,set:(e,t)=>{e.disableLabelHighlight=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`_highlightString`,static:!1,private:!1,access:{has:e=>`_highlightString`in e,get:e=>e._highlightString,set:(e,t)=>{e._highlightString=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},L,R),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.events={optionselected:`optionselected`}}static{this.styles=[h]}set value(e){typeof e==`string`?(this.setAttribute(`value`,`${e}`),this._value=null):this._value=e,this.dispatchEvent(new Event(`ɵoptionvaluechange`,{bubbles:!0}))}get value(){return this._value??this.getAttribute(`value`)}set selected(e){this.toggleAttribute(`selected`,e),this._updateAriaSelected()}get selected(){return this.hasAttribute(`selected`)}#e;get disabledFromGroup(){return this.#e}set disabledFromGroup(e){this.#e=e}#t;get groupLabel(){return this.#t}set groupLabel(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get disableLabelHighlight(){return this.#r}set disableLabelHighlight(e){this.#r=e}#i;get _highlightString(){return this.#i}set _highlightString(e){this.#i=e}#a;get _inertAriaGroups(){return this.#a}set _inertAriaGroups(e){this.#a=e}constructor(){super(),this._value=(t(this,l),null),this.#e=t(this,b,!1),this.#t=(t(this,x),t(this,C,``)),this.#n=(t(this,w),t(this,E,void 0)),this.#r=(t(this,k),t(this,j,!1)),this.#i=(t(this,M),t(this,P,null)),this.#a=(t(this,F),t(this,L,!1)),this._previousSize=(t(this,R),null),this.addEventListener?.(`click`,e=>this.selectByClick(e),{passive:!0}),this.addController(new _(this,{config:O,callback:()=>{this.handleHighlightState(),this.dispatchEvent(new Event(`optionLabelChanged`,{bubbles:!0}))}})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),D&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=D):this._inertAriaGroups=D)}attributeChangedCallback(e,t,n){(e!==`value`||t!==n)&&super.attributeChangedCallback(e,t,n)}highlight(e){this._highlightString=e}selectViaUserInteraction(e){this.selected=e,this.selected&&this.dispatchEvent(new Event(`optionselected`,{bubbles:!0,composed:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),(e===`disabled`||e===`disabledFromGroup`)&&(this.toggleState(`disabled`,this.disabled||this.disabledFromGroup),g(this,`tabindex`,f&&!this.disabled&&!this.disabledFromGroup?0:null),this.updateAriaDisabled())}firstUpdated(e){super.firstUpdated(e),this._updateAriaSelected()}updateDisableHighlight(e){this.disableLabelHighlight=e,this.toggleState(`disable-highlight`,e)}setActive(e){this.toggleState(`active`,e)}updateAriaDisabled(){this.internals.ariaDisabled=this.disabled||this.disabledFromGroup?`true`:null,this.dispatchEvent(new Event(`ɵdisabledchange`,{bubbles:!0}))}_updateAriaSelected(){this.internals.ariaSelected=`${this.selected}`}handleHighlightState(){let e=Array.from(this.childNodes??[]).filter(e=>e.nodeType!==Node.COMMENT_NODE&&(!(e instanceof Element)||e.slot!==`icon`)),t=e.filter(e=>e.nodeType===Node.TEXT_NODE);if(t.length===0||e.filter(e=>!(e instanceof Element)||e.localName!==`template`).length!==t.length){this.updateDisableHighlight(!0);return}this.label=t.map(e=>e.wholeText).filter(e=>e.trim()).join(``)}getHighlightedLabel(){if(!this._highlightString||!this._highlightString.trim())return n`${this.label}`;let e=this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());if(e===-1)return n`${this.label}`;let t=this.label.substring(0,e),r=this.label.substring(e,e+this._highlightString.length),i=this.label.substring(e+this._highlightString.length);return n`
|
|
18
18
|
<span class="sbb-option__label--highlight">${t}</span><span>${r}</span
|
|
19
19
|
><span class="sbb-option__label--highlight">${i}</span>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.7.0-dev.
|
|
3
|
+
"version": "5.7.0-dev.1788435806",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/ad3ef270a9264bab60574fa6a65f014e53321438"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
|
@@ -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);
|
package/standard-theme.css
CHANGED
|
@@ -1589,8 +1589,8 @@ summary {
|
|
|
1589
1589
|
--sbb-options-panel-background-color: var(--sbb-background-color-2);
|
|
1590
1590
|
--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
|
|
1591
1591
|
--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
|
|
1592
|
-
--sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1593
1592
|
--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
|
|
1593
|
+
--sbb-options-panel-offset: var(--sbb-spacing-fixed-2x);
|
|
1594
1594
|
--sbb-overlay-background-color: var(--sbb-background-color-3);
|
|
1595
1595
|
--sbb-overlay-height: 100%;
|
|
1596
1596
|
--sbb-overlay-animation-easing: ease;
|
|
@@ -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};
|