@sbb-esta/lyne-elements-dev 5.13.0-dev.1793626084 → 5.13.0-dev.1793630843

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.
Files changed (17) hide show
  1. package/card/_card.global.scss +6 -6
  2. package/card.pure.js +5 -13
  3. package/custom-elements.json +11 -73
  4. package/development/card/card/card.component.d.ts +3 -2
  5. package/development/card.pure.js +14 -39
  6. package/development/download.pure.js +1 -1
  7. package/development/status.pure.js +1 -1
  8. package/download.pure.js +1 -1
  9. package/lean-off-brand-theme.css +43 -5
  10. package/lean-safety-theme.css +43 -5
  11. package/lean-theme.css +43 -5
  12. package/off-brand-theme.css +43 -5
  13. package/package.json +2 -2
  14. package/safety-theme.css +43 -5
  15. package/standard-theme.css +43 -5
  16. package/status/_status.global.scss +42 -0
  17. package/status.pure.js +1 -1
package/card/_card.global.scss CHANGED
@@ -156,6 +156,9 @@ $theme: 'standard' !default;
156
156
 
157
157
  display: block;
158
158
  position: relative;
159
+
160
+ // Avoid interfering with other page content
161
+ isolation: isolate;
159
162
  padding-inline: var(--sbb-card-padding-inline);
160
163
  padding-block: var(--sbb-card-padding-block);
161
164
  border-radius: var(--sbb-card-border-radius);
@@ -205,7 +208,7 @@ $theme: 'standard' !default;
205
208
  --sbb-card-badge-color: var(--sbb-color-2-inverted);
206
209
  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
207
210
  --sbb-card-badge-border-color: transparent;
208
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
211
+ --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-3x);
209
212
  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
210
213
  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
211
214
  --sbb-card-badge-skew: skew(16deg, 0deg);
@@ -218,10 +221,7 @@ $theme: 'standard' !default;
218
221
  --sbb-card-badge-inline-border-display: none;
219
222
  }
220
223
 
224
+ // @deprecated
221
225
  @mixin rules {
222
- // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
223
- // This style enables accessing focusable elements inside an sbb-card.
224
- sbb-card .sbb-action {
225
- pointer-events: all;
226
- }
226
+ // no-op
227
227
  }
package/card.pure.js CHANGED
@@ -1,17 +1,9 @@
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{IS_FOCUSABLE_QUERY as a,SbbButtonBaseElement as o,SbbElement as s,SbbLinkBaseElement as c,screenReaderOnlyStyles as l,ɵstateController as u}from"./core.js";import{MutationController as d}from"@lit-labs/observers/mutation-controller.js";import{html as f}from"lit/static-html.js";var p=`:host{width:fit-content;height:fit-content;margin-inline-start:auto;display:flex;position:relative}:host:after{content:"";display:var(--sbb-card-badge-border-display,none);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute;inset:0}:host{padding-inline:var(--sbb-card-badge-padding-inline);inset-block-start:0;inset-inline-end:0}:host([color=white]){--sbb-card-badge-color:var(--sbb-color-3);--sbb-card-badge-background-color:var(--sbb-background-color-1);--sbb-card-badge-border-color:light-dark(var(--sbb-color-aluminium),var(--sbb-color-anthracite))}:host(:dir(rtl)){--sbb-card-badge-skew:skew(-16deg, 0deg)}.sbb-card-badge-content{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color);font-weight:700;display:flex;position:relative}.sbb-card-badge-background{background-color:var(--sbb-card-badge-background-color);transform:var(--sbb-card-badge-skew);border-end-start-radius:var(--sbb-card-badge-border-radius);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);display:block;position:absolute;inset:0}.sbb-card-badge-background:before{content:"";display:var(--sbb-card-badge-inline-border-display,block);border-block-end:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-card-badge-border-radius);position:absolute;inset:0}
2
- `;let m=(()=>{let a=s,o,c=[],l=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;o=[i({reflect:!0})],e(this,null,o,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},c,l),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-card-badge`}static{this.role=`text`}static{this.styles=[r(p)]}#e=t(this,c,`charcoal`);get color(){return this.#e}set color(e){this.#e=e}connectedCallback(){super.connectedCallback(),this.slot||=`badge`}render(){return n`
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{SbbButtonBaseElement as a,SbbElement as o,SbbLinkBaseElement as s,screenReaderOnlyStyles as c,ɵstateController as l}from"./core.js";import{html as u}from"lit/static-html.js";var d=`:host{width:fit-content;height:fit-content;margin-inline-start:auto;display:flex;position:relative}:host:after{content:"";display:var(--sbb-card-badge-border-display,none);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute;inset:0}:host{padding-inline:var(--sbb-card-badge-padding-inline);inset-block-start:0;inset-inline-end:0}:host([color=white]){--sbb-card-badge-color:var(--sbb-color-3);--sbb-card-badge-background-color:var(--sbb-background-color-1);--sbb-card-badge-border-color:light-dark(var(--sbb-color-aluminium),var(--sbb-color-anthracite))}:host(:dir(rtl)){--sbb-card-badge-skew:skew(-16deg, 0deg)}.sbb-card-badge-content{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color);font-weight:700;display:flex;position:relative}.sbb-card-badge-background{background-color:var(--sbb-card-badge-background-color);margin-inline:var(--sbb-spacing-fixed-1x) calc(var(--sbb-spacing-fixed-3x) * -1);transform:var(--sbb-card-badge-skew);border-end-start-radius:var(--sbb-card-badge-border-radius);display:block;position:absolute;inset:0}.sbb-card-badge-background:before{content:"";display:var(--sbb-card-badge-inline-border-display,block);border-block-end:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-card-badge-border-radius);position:absolute;inset:0}
2
+ `;let f=(()=>{let a=o,s,c=[],l=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;s=[i({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},c,l),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-card-badge`}static{this.role=`text`}static{this.styles=[r(d)]}#e=t(this,c,`charcoal`);get color(){return this.#e}set color(e){this.#e=e}connectedCallback(){super.connectedCallback(),this.closest(`sbb-card`)||(this.slot||=`badge`)}render(){return n`
3
3
  <span class="sbb-card-badge-background" aria-hidden="true"></span>
4
4
  <span class="sbb-card-badge-content">
5
5
  <slot></slot>
6
6
  </span>
7
- `}constructor(){super(...arguments),t(this,l)}}})();var h=`:host{display:block;position:absolute;inset:0;outline:none!important}:is(.sbb-card-button,.sbb-card-link){border-radius:var(--sbb-card-border-radius);cursor:var(--sbb-cursor-pointer);outline:none;display:block;position:absolute;inset:0}:host(:focus-visible) :is(.sbb-card-button,.sbb-card-link),:is(.sbb-card-button,.sbb-card-link):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)}
8
- `;const g=n=>(()=>{let o=n,s=[],c;return class extends o{constructor(){super(...arguments),this._active=(t(this,s),!1),this._card=null,this._cardMutationObserver=new d(this,{target:null,config:{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`href`,`tabindex`,`disabled`,`inert`]},callback:()=>this._checkForSlottedActions()})}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;c=[i({reflect:!0,type:Boolean})],e(this,null,c,{kind:`setter`,name:`active`,static:!1,private:!1,access:{has:e=>`active`in e,set:(e,t)=>{e.active=t}},metadata:t},null,s),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[l,r(h)]}set active(e){this._active=e,this._onActiveChange()}get active(){return this._active}_onActiveChange(){this._card&&u(this._card).toggle(`has-active-action`,this.active)}_checkForSlottedActions(){Array.from(this._card?.querySelectorAll?.(a)??[]).filter(e=>e.localName!==`sbb-card-link`&&e.localName!==`sbb-card-button`&&!e.classList.contains(`sbb-action`)).forEach(e=>e.classList.toggle(`sbb-action`,!0))}connectedCallback(){if(super.connectedCallback(),this._card=this.closest?.(`sbb-card`),this._card){this.slot||=`action`;let e=u(this._card);e.add(`has-action`),e.toggle(`has-active-action`,this.active),e.add(`action-role-${this.actionRole}`),e.delete(`action-role-${this.actionRole===`button`?`link`:`button`}`),this._checkForSlottedActions(),this._cardMutationObserver.observe(this._card)}}disconnectedCallback(){if(super.disconnectedCallback(),this._card){let e=u(this._card);e.delete(`has-action`),e.delete(`has-active-action`),e.delete(`action-role-button`),e.delete(`action-role-link`),this._card.querySelectorAll(`.sbb-action`).forEach(e=>e.classList.remove(`sbb-action`)),this._card=null}}renderTemplate(){return f`<span class="sbb-screen-reader-only"><slot></slot></span>`}}})();var _=class extends g(o){constructor(){super(...arguments),this.actionRole=`button`}static{this.elementName=`sbb-card-button`}},v=class extends g(c){constructor(){super(...arguments),this.actionRole=`link`}static{this.elementName=`sbb-card-link`}},y=`:host{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}:host:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){:host{--sbb-title-color:var(--sbb-card-color)}}:host{--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default)}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}:host(:where([color=transparent-bordered])){--sbb-card-background-color:transparent;--sbb-card-border-color:var(--sbb-border-color-4-inverted);--sbb-card-border-width:var(--sbb-border-width-1x);--sbb-focus-outline-color:inherit}:host(:where([color=transparent-bordered-dashed])){--sbb-card-background-color:transparent;--sbb-card-border-color:light-dark(var(--sbb-color-cement),var(--sbb-color-granite));--sbb-card-border-width:var(--sbb-border-width-1x);--sbb-card-border-style:dashed;--sbb-focus-outline-color:inherit}:host(:where(:not([color]))){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color:var(--sbb-border-color-3);--sbb-card-border-width:var(--sbb-border-width-2x);--sbb-card-border-style:solid}@media (forced-colors:active){:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color:Highlight}}:host(:is(:state(has-action),[state--has-action])){--sbb-card-pointer-events:none}@media (any-hover:hover){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-border-color:Highlight}}@media (forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))){--sbb-card-color:ButtonText}:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))){--sbb-card-color:LinkText;--sbb-card-border-color:CanvasText}}:host(.sbb-card-spacing-3x-xxs){--sbb-card-padding-block:var(--sbb-spacing-fixed-3x);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-xxs){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-s){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-4x-xxs){--sbb-card-padding-block:var(--sbb-spacing-fixed-4x);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxs){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-s){--sbb-card-padding-block:var(--sbb-spacing-responsive-s);--sbb-card-with-badge-padding-block:var(--sbb-spacing-responsive-s);--sbb-card-padding-inline:var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-l){--sbb-card-padding-block:var(--sbb-spacing-responsive-l);--sbb-card-with-badge-padding-block:var(--sbb-spacing-responsive-l);--sbb-card-padding-inline:var(--sbb-spacing-responsive-l)}:host(:is(:state(slotted-badge),[state--slotted-badge])){--sbb-card-padding-block:var(--sbb-card-with-badge-padding-block);--sbb-card-badge-display:block}.sbb-card__wrapper{pointer-events:var(--sbb-card-pointer-events,auto);height:100%;translate:0 var(--sbb-card-hover-shift,0);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);display:block}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display,none);inset:0;pointer-events:var(--sbb-card-pointer-events,auto);border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);position:absolute;inset-block-end:unset;overflow:hidden}::slotted(sbb-title){margin-block-start:0}
9
- `;let b=(()=>{let a=s,o,c=[],l=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;o=[i({reflect:!0})],e(this,null,o,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},c,l),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-card`}static{this.styles=[r(y)]}#e=t(this,c,`white`);get color(){return this.#e}set color(e){this.#e=e}render(){return n`
10
- <slot name="action"></slot>
11
- <span class="sbb-card__wrapper">
12
- <slot></slot>
13
- </span>
14
- <span class="sbb-card__badge-wrapper">
15
- <slot name="badge"></slot>
16
- </span>
17
- `}constructor(){super(...arguments),t(this,l)}}})();export{g as SbbCardActionCommonElementMixin,m as SbbCardBadgeElement,_ as SbbCardButtonElement,b as SbbCardElement,v as SbbCardLinkElement};
7
+ `}constructor(){super(...arguments),t(this,l)}}})();var p=`:host{z-index:1;display:block;position:absolute;inset:0;outline:none!important}:is(.sbb-card-button,.sbb-card-link){border-radius:var(--sbb-card-border-radius);cursor:var(--sbb-cursor-pointer);outline:none;display:block;position:absolute;inset:0}:host(:focus-visible) :is(.sbb-card-button,.sbb-card-link),:is(.sbb-card-button,.sbb-card-link):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)}
8
+ `;const m=n=>(()=>{let a=n,o=[],s;return class extends a{constructor(){super(...arguments),this._active=(t(this,o),!1),this._card=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;s=[i({reflect:!0,type:Boolean})],e(this,null,s,{kind:`setter`,name:`active`,static:!1,private:!1,access:{has:e=>`active`in e,set:(e,t)=>{e.active=t}},metadata:t},null,o),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[c,r(p)]}set active(e){this._active=e,this._onActiveChange()}get active(){return this._active}_onActiveChange(){this._card&&l(this._card).toggle(`has-active-action`,this.active)}connectedCallback(){if(super.connectedCallback(),this._card=this.closest?.(`sbb-card`),this._card){let e=l(this._card);e.add(`has-action`),e.toggle(`has-active-action`,this.active),e.add(`action-role-${this.actionRole}`),e.delete(`action-role-${this.actionRole===`button`?`link`:`button`}`)}}disconnectedCallback(){if(super.disconnectedCallback(),this._card){let e=l(this._card);e.delete(`has-action`),e.delete(`has-active-action`),e.delete(`action-role-button`),e.delete(`action-role-link`),this._card=null}}renderTemplate(){return u`<span class="sbb-screen-reader-only"><slot></slot></span>`}}})();var h=class extends m(a){constructor(){super(...arguments),this.actionRole=`button`}static{this.elementName=`sbb-card-button`}},g=class extends m(s){constructor(){super(...arguments),this.actionRole=`link`}static{this.elementName=`sbb-card-link`}},_=`:host{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));isolation:isolate;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}:host:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){:host{--sbb-title-color:var(--sbb-card-color)}}:host{--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default)}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}:host(:where([color=transparent-bordered])){--sbb-card-background-color:transparent;--sbb-card-border-color:var(--sbb-border-color-4-inverted);--sbb-card-border-width:var(--sbb-border-width-1x);--sbb-focus-outline-color:inherit}:host(:where([color=transparent-bordered-dashed])){--sbb-card-background-color:transparent;--sbb-card-border-color:light-dark(var(--sbb-color-cement),var(--sbb-color-granite));--sbb-card-border-width:var(--sbb-border-width-1x);--sbb-card-border-style:dashed;--sbb-focus-outline-color:inherit}:host(:where(:not([color]))){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color:var(--sbb-border-color-3);--sbb-card-border-width:var(--sbb-border-width-2x);--sbb-card-border-style:solid}@media (forced-colors:active){:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color:Highlight}}@media (any-hover:hover){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-border-color:Highlight}}@media (forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))){--sbb-card-color:ButtonText}:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))){--sbb-card-color:LinkText;--sbb-card-border-color:CanvasText}}:host(.sbb-card-spacing-3x-xxs){--sbb-card-padding-block:var(--sbb-spacing-fixed-3x);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-xxs){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-s){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-4x-xxs){--sbb-card-padding-block:var(--sbb-spacing-fixed-4x);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxs){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-s){--sbb-card-padding-block:var(--sbb-spacing-responsive-s);--sbb-card-with-badge-padding-block:var(--sbb-spacing-responsive-s);--sbb-card-padding-inline:var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-l){--sbb-card-padding-block:var(--sbb-spacing-responsive-l);--sbb-card-with-badge-padding-block:var(--sbb-spacing-responsive-l);--sbb-card-padding-inline:var(--sbb-spacing-responsive-l)}:host(:is(:state(has-badge),[state--has-badge])){--sbb-card-padding-block:var(--sbb-card-with-badge-padding-block)}slot{height:100%;margin-block:var(--sbb-card-hover-shift,0) calc(-1 * var(--sbb-card-hover-shift,0px));transition:margin var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);display:block}::slotted(sbb-card-badge){inset:0;border-start-end-radius:var(--sbb-card-border-radius);position:absolute;inset-block-end:unset;overflow:hidden}::slotted(sbb-title){margin-block-start:0}
9
+ `;let v=(()=>{let a=o,s,c=[],l=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;s=[i({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},c,l),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-card`}static{this.styles=[r(_)]}#e=t(this,c,`white`);get color(){return this.#e}set color(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._toggleBadgePresence()}_toggleBadgePresence(){this.toggleState(`has-badge`,!!this.querySelector?.(`sbb-card-badge`))}render(){return n`<slot @slotchange=${()=>this._toggleBadgePresence()}></slot>`}constructor(){super(...arguments),t(this,l)}}})();export{m as SbbCardActionCommonElementMixin,f as SbbCardBadgeElement,h as SbbCardButtonElement,v as SbbCardElement,g as SbbCardLinkElement};
package/custom-elements.json CHANGED
@@ -80675,16 +80675,8 @@
80675
80675
  "name": "SbbCardElement",
80676
80676
  "slots": [
80677
80677
  {
80678
- "description": "Use the unnamed slot to add content to the card.",
80678
+ "description": "Use the unnamed slot to add content to the card. For specific use cases, `<sbb-card-button>`, `<sbb-card-link>` or `<sbb-card-badge>` elements can be slotted.",
80679
80679
  "name": ""
80680
- },
80681
- {
80682
- "description": "Use this slot to render a `sbb-card-badge` component.",
80683
- "name": "badge"
80684
- },
80685
- {
80686
- "description": "Use this slot to render a `sbb-card-button` or a `sbb-card-link` component.",
80687
- "name": "action"
80688
80680
  }
80689
80681
  ],
80690
80682
  "members": [
@@ -80715,6 +80707,16 @@
80715
80707
  "attribute": "color",
80716
80708
  "reflects": true
80717
80709
  },
80710
+ {
80711
+ "kind": "method",
80712
+ "name": "_toggleBadgePresence",
80713
+ "privacy": "private",
80714
+ "return": {
80715
+ "type": {
80716
+ "text": "void"
80717
+ }
80718
+ }
80719
+ },
80718
80720
  {
80719
80721
  "kind": "field",
80720
80722
  "name": "['_$sbbElement$']",
@@ -81108,12 +81110,6 @@
81108
81110
  "privacy": "private",
81109
81111
  "default": "null"
81110
81112
  },
81111
- {
81112
- "kind": "field",
81113
- "name": "_cardMutationObserver",
81114
- "privacy": "private",
81115
- "default": "new MutationController(this, { target: null, config: { childList: true, subtree: true, attributes: true, attributeFilter: ['href', 'tabindex', 'disabled', 'inert'], }, callback: () => this._checkForSlottedActions(), })"
81116
- },
81117
81113
  {
81118
81114
  "kind": "method",
81119
81115
  "name": "_onActiveChange",
@@ -81124,16 +81120,6 @@
81124
81120
  }
81125
81121
  }
81126
81122
  },
81127
- {
81128
- "kind": "method",
81129
- "name": "_checkForSlottedActions",
81130
- "privacy": "private",
81131
- "return": {
81132
- "type": {
81133
- "text": "void"
81134
- }
81135
- }
81136
- },
81137
81123
  {
81138
81124
  "kind": "method",
81139
81125
  "name": "renderTemplate",
@@ -81283,16 +81269,6 @@
81283
81269
  "module": "card/common/card-action-common.js"
81284
81270
  }
81285
81271
  },
81286
- {
81287
- "kind": "field",
81288
- "name": "_cardMutationObserver",
81289
- "privacy": "private",
81290
- "default": "new MutationController(this, { target: null, config: { childList: true, subtree: true, attributes: true, attributeFilter: ['href', 'tabindex', 'disabled', 'inert'], }, callback: () => this._checkForSlottedActions(), })",
81291
- "inheritedFrom": {
81292
- "name": "SbbCardActionCommonElementMixin",
81293
- "module": "card/common/card-action-common.js"
81294
- }
81295
- },
81296
81272
  {
81297
81273
  "kind": "method",
81298
81274
  "name": "_onActiveChange",
@@ -81307,20 +81283,6 @@
81307
81283
  "module": "card/common/card-action-common.js"
81308
81284
  }
81309
81285
  },
81310
- {
81311
- "kind": "method",
81312
- "name": "_checkForSlottedActions",
81313
- "privacy": "private",
81314
- "return": {
81315
- "type": {
81316
- "text": "void"
81317
- }
81318
- },
81319
- "inheritedFrom": {
81320
- "name": "SbbCardActionCommonElementMixin",
81321
- "module": "card/common/card-action-common.js"
81322
- }
81323
- },
81324
81286
  {
81325
81287
  "kind": "method",
81326
81288
  "name": "renderTemplate",
@@ -82325,16 +82287,6 @@
82325
82287
  "module": "card/common/card-action-common.js"
82326
82288
  }
82327
82289
  },
82328
- {
82329
- "kind": "field",
82330
- "name": "_cardMutationObserver",
82331
- "privacy": "private",
82332
- "default": "new MutationController(this, { target: null, config: { childList: true, subtree: true, attributes: true, attributeFilter: ['href', 'tabindex', 'disabled', 'inert'], }, callback: () => this._checkForSlottedActions(), })",
82333
- "inheritedFrom": {
82334
- "name": "SbbCardActionCommonElementMixin",
82335
- "module": "card/common/card-action-common.js"
82336
- }
82337
- },
82338
82290
  {
82339
82291
  "kind": "method",
82340
82292
  "name": "_onActiveChange",
@@ -82349,20 +82301,6 @@
82349
82301
  "module": "card/common/card-action-common.js"
82350
82302
  }
82351
82303
  },
82352
- {
82353
- "kind": "method",
82354
- "name": "_checkForSlottedActions",
82355
- "privacy": "private",
82356
- "return": {
82357
- "type": {
82358
- "text": "void"
82359
- }
82360
- },
82361
- "inheritedFrom": {
82362
- "name": "SbbCardActionCommonElementMixin",
82363
- "module": "card/common/card-action-common.js"
82364
- }
82365
- },
82366
82304
  {
82367
82305
  "kind": "method",
82368
82306
  "name": "renderTemplate",
package/development/card/card/card.component.d.ts CHANGED
@@ -4,14 +4,15 @@ import { SbbElement } from '../../core.ts';
4
4
  * It displays content related to a single subject.
5
5
  *
6
6
  * @slot - Use the unnamed slot to add content to the card.
7
- * @slot badge - Use this slot to render a `sbb-card-badge` component.
8
- * @slot action - Use this slot to render a `sbb-card-button` or a `sbb-card-link` component.
7
+ * For specific use cases, `<sbb-card-button>`, `<sbb-card-link>` or `<sbb-card-badge>` elements can be slotted.
9
8
  */
10
9
  export declare class SbbCardElement extends SbbElement {
11
10
  static readonly elementName: string;
12
11
  static styles: CSSResultGroup;
13
12
  /** Option to set the component's background color. */
14
13
  accessor color: 'white' | 'milk' | 'transparent-bordered' | 'transparent-bordered-dashed';
14
+ connectedCallback(): void;
15
+ private _toggleBadgePresence;
15
16
  protected render(): TemplateResult;
16
17
  }
17
18
  declare global {
package/development/card.pure.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
2
  import { html, unsafeCSS } from "lit";
3
3
  import { property } from "lit/decorators.js";
4
- import { IS_FOCUSABLE_QUERY, SbbButtonBaseElement, SbbElement, SbbLinkBaseElement, screenReaderOnlyStyles, ɵstateController } from "./core.js";
5
- import { MutationController } from "@lit-labs/observers/mutation-controller.js";
4
+ import { SbbButtonBaseElement, SbbElement, SbbLinkBaseElement, screenReaderOnlyStyles, ɵstateController } from "./core.js";
6
5
  import { html as html$1 } from "lit/static-html.js";
7
6
 
8
7
  // src/elements/card/card-badge/card-badge.scss?inline
9
- var card_badge_default = ":host {\n display: flex;\n position: relative;\n height: fit-content;\n width: fit-content;\n margin-inline-start: auto;\n}\n:host::after {\n content: \"\";\n display: var(--sbb-card-badge-border-display, none);\n position: absolute;\n inset: 0;\n border: var(--sbb-border-width-1x) solid CanvasText;\n}\n:host {\n inset-block-start: 0;\n inset-inline-end: 0;\n padding-inline: var(--sbb-card-badge-padding-inline);\n}\n\n:host([color=white]) {\n --sbb-card-badge-color: var(--sbb-color-3);\n --sbb-card-badge-background-color: var(--sbb-background-color-1);\n --sbb-card-badge-border-color: var(--sbb-color-aluminium);\n --sbb-card-badge-border-color: light-dark(\n var(--sbb-color-aluminium),\n var(--sbb-color-anthracite)\n );\n}\n\n:host(:dir(rtl)) {\n --sbb-card-badge-skew: skew(-16deg, 0deg);\n}\n\n.sbb-card-badge-content {\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n font-weight: bold;\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--sbb-card-badge-gap);\n color: var(--sbb-card-badge-color);\n}\n\n.sbb-card-badge-background {\n display: block;\n position: absolute;\n inset: 0;\n background-color: var(--sbb-card-badge-background-color);\n border-end-start-radius: var(--sbb-card-badge-border-radius);\n margin-inline-end: calc(var(--sbb-spacing-fixed-3x) * -1);\n transform: var(--sbb-card-badge-skew);\n}\n.sbb-card-badge-background::before {\n content: \"\";\n display: var(--sbb-card-badge-inline-border-display, block);\n position: absolute;\n inset: 0;\n border-block-end: var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);\n border-inline-start: var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);\n border-end-start-radius: var(--sbb-card-badge-border-radius);\n}\n";
8
+ var card_badge_default = ":host {\n display: flex;\n position: relative;\n height: fit-content;\n width: fit-content;\n margin-inline-start: auto;\n}\n:host::after {\n content: \"\";\n display: var(--sbb-card-badge-border-display, none);\n position: absolute;\n inset: 0;\n border: var(--sbb-border-width-1x) solid CanvasText;\n}\n:host {\n inset-block-start: 0;\n inset-inline-end: 0;\n padding-inline: var(--sbb-card-badge-padding-inline);\n}\n\n:host([color=white]) {\n --sbb-card-badge-color: var(--sbb-color-3);\n --sbb-card-badge-background-color: var(--sbb-background-color-1);\n --sbb-card-badge-border-color: var(--sbb-color-aluminium);\n --sbb-card-badge-border-color: light-dark(\n var(--sbb-color-aluminium),\n var(--sbb-color-anthracite)\n );\n}\n\n:host(:dir(rtl)) {\n --sbb-card-badge-skew: skew(-16deg, 0deg);\n}\n\n.sbb-card-badge-content {\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n font-weight: bold;\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--sbb-card-badge-gap);\n color: var(--sbb-card-badge-color);\n}\n\n.sbb-card-badge-background {\n display: block;\n position: absolute;\n inset: 0;\n background-color: var(--sbb-card-badge-background-color);\n border-end-start-radius: var(--sbb-card-badge-border-radius);\n margin-inline: var(--sbb-spacing-fixed-1x) calc(var(--sbb-spacing-fixed-3x) * -1);\n transform: var(--sbb-card-badge-skew);\n}\n.sbb-card-badge-background::before {\n content: \"\";\n display: var(--sbb-card-badge-inline-border-display, block);\n position: absolute;\n inset: 0;\n border-block-end: var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);\n border-inline-start: var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);\n border-end-start-radius: var(--sbb-card-badge-border-radius);\n}\n";
10
9
 
11
10
  // src/elements/card/card-badge/card-badge.component.ts
12
11
  /**
@@ -64,7 +63,7 @@ let SbbCardBadgeElement = (() => {
64
63
  }
65
64
  connectedCallback() {
66
65
  super.connectedCallback();
67
- this.slot ||= "badge";
66
+ if (!this.closest("sbb-card")) this.slot ||= "badge";
68
67
  }
69
68
  render() {
70
69
  return html`
@@ -82,7 +81,7 @@ let SbbCardBadgeElement = (() => {
82
81
  })();
83
82
 
84
83
  // src/elements/card/common/card-action.scss?inline
85
- var card_action_default = ":host {\n display: block;\n outline: none !important;\n position: absolute;\n inset: 0;\n}\n\n:is(.sbb-card-button, .sbb-card-link) {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: var(--sbb-card-border-radius);\n cursor: var(--sbb-cursor-pointer);\n outline: none;\n}\n:host(:focus-visible) :is(.sbb-card-button, .sbb-card-link), :is(.sbb-card-button, .sbb-card-link):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}\n";
84
+ var card_action_default = ":host {\n display: block;\n outline: none !important;\n position: absolute;\n inset: 0;\n z-index: 1;\n}\n\n:is(.sbb-card-button, .sbb-card-link) {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: var(--sbb-card-border-radius);\n cursor: var(--sbb-cursor-pointer);\n outline: none;\n}\n:host(:focus-visible) :is(.sbb-card-button, .sbb-card-link), :is(.sbb-card-button, .sbb-card-link):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}\n";
86
85
 
87
86
  // src/elements/card/common/card-action-common.ts
88
87
  const SbbCardActionCommonElementMixin = (superClass) => {
@@ -95,21 +94,6 @@ const SbbCardActionCommonElementMixin = (superClass) => {
95
94
  super(...arguments);
96
95
  this._active = (__runInitializers(this, _instanceExtraInitializers), false);
97
96
  this._card = null;
98
- this._cardMutationObserver = new MutationController(this, {
99
- target: null,
100
- config: {
101
- childList: true,
102
- subtree: true,
103
- attributes: true,
104
- attributeFilter: [
105
- "href",
106
- "tabindex",
107
- "disabled",
108
- "inert"
109
- ]
110
- },
111
- callback: () => this._checkForSlottedActions()
112
- });
113
97
  }
114
98
  static {
115
99
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -151,21 +135,15 @@ const SbbCardActionCommonElementMixin = (superClass) => {
151
135
  _onActiveChange() {
152
136
  if (this._card) ɵstateController(this._card).toggle("has-active-action", this.active);
153
137
  }
154
- _checkForSlottedActions() {
155
- Array.from(this._card?.querySelectorAll?.(IS_FOCUSABLE_QUERY) ?? []).filter((el) => el.localName !== "sbb-card-link" && el.localName !== "sbb-card-button" && !el.classList.contains("sbb-action")).forEach((el) => el.classList.toggle("sbb-action", true));
156
- }
157
138
  connectedCallback() {
158
139
  super.connectedCallback();
159
140
  this._card = this.closest?.("sbb-card");
160
141
  if (this._card) {
161
- this.slot ||= "action";
162
142
  const controller = ɵstateController(this._card);
163
143
  controller.add("has-action");
164
144
  controller.toggle("has-active-action", this.active);
165
145
  controller.add(`action-role-${this.actionRole}`);
166
146
  controller.delete(`action-role-${this.actionRole === "button" ? "link" : "button"}`);
167
- this._checkForSlottedActions();
168
- this._cardMutationObserver.observe(this._card);
169
147
  }
170
148
  }
171
149
  disconnectedCallback() {
@@ -176,7 +154,6 @@ const SbbCardActionCommonElementMixin = (superClass) => {
176
154
  controller.delete("has-active-action");
177
155
  controller.delete("action-role-button");
178
156
  controller.delete("action-role-link");
179
- this._card.querySelectorAll(`.sbb-action`).forEach((el) => el.classList.remove("sbb-action"));
180
157
  this._card = null;
181
158
  }
182
159
  }
@@ -222,15 +199,14 @@ var SbbCardLinkElement = class extends SbbCardActionCommonElementMixin(SbbLinkBa
222
199
  };
223
200
 
224
201
  // src/elements/card/card/card.scss?inline
225
- var card_default = ":host {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n:host::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n:host {\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=transparent-bordered])) {\n --sbb-card-background-color: transparent;\n --sbb-card-border-color: var(--sbb-border-color-4-inverted);\n --sbb-card-border-width: var(--sbb-border-width-1x);\n --sbb-focus-outline-color: inherit;\n}\n\n:host(:where([color=transparent-bordered-dashed])) {\n --sbb-card-background-color: transparent;\n --sbb-card-border-color: var(--sbb-color-cement);\n --sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));\n --sbb-card-border-width: var(--sbb-border-width-1x);\n --sbb-card-border-style: dashed;\n --sbb-focus-outline-color: inherit;\n}\n\n:host(:where(:not([color]))) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:is(:state(has-active-action),[state--has-active-action])) {\n --sbb-card-border-color: var(--sbb-border-color-3);\n --sbb-card-border-width: var(--sbb-border-width-2x);\n --sbb-card-border-style: solid;\n}\n@media (forced-colors: active) {\n :host(:is(:state(has-active-action),[state--has-active-action])) {\n --sbb-card-border-color: Highlight;\n }\n}\n\n:host(:is(:state(has-action),[state--has-action])) {\n --sbb-card-pointer-events: none;\n}\n\n@media (any-hover: hover) {\n :host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover) {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover) {\n --sbb-card-border-color: Highlight;\n }\n}\n\n@media (forced-colors: active) {\n :host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))) {\n --sbb-card-color: ButtonText;\n }\n}\n\n@media (forced-colors: active) {\n :host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))) {\n --sbb-card-color: LinkText;\n --sbb-card-border-color: CanvasText;\n }\n}\n\n:host(.sbb-card-spacing-3x-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-xxxs-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)\n var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-xxxs-s) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)\n var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);\n}\n\n:host(.sbb-card-spacing-4x-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-fixed-4x);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-s) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-s);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);\n}\n\n:host(.sbb-card-spacing-l) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-l);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);\n}\n\n:host(:is(:state(slotted-badge),[state--slotted-badge])) {\n --sbb-card-padding-block: var(--sbb-card-with-badge-padding-block);\n --sbb-card-badge-display: block;\n}\n\n.sbb-card__wrapper {\n display: block;\n height: 100%;\n pointer-events: var(--sbb-card-pointer-events, auto);\n translate: 0 var(--sbb-card-hover-shift, 0);\n transition: translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-card__badge-wrapper {\n display: var(--sbb-card-badge-display, none);\n overflow: hidden;\n position: absolute;\n inset: 0;\n inset-block-end: unset;\n border-start-start-radius: var(--sbb-card-border-radius);\n border-start-end-radius: var(--sbb-card-border-radius);\n pointer-events: var(--sbb-card-pointer-events, auto);\n}\n\n::slotted(sbb-title) {\n margin-block-start: 0;\n}\n";
202
+ var card_default = ":host {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n isolation: isolate;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n:host::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n:host {\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=transparent-bordered])) {\n --sbb-card-background-color: transparent;\n --sbb-card-border-color: var(--sbb-border-color-4-inverted);\n --sbb-card-border-width: var(--sbb-border-width-1x);\n --sbb-focus-outline-color: inherit;\n}\n\n:host(:where([color=transparent-bordered-dashed])) {\n --sbb-card-background-color: transparent;\n --sbb-card-border-color: var(--sbb-color-cement);\n --sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));\n --sbb-card-border-width: var(--sbb-border-width-1x);\n --sbb-card-border-style: dashed;\n --sbb-focus-outline-color: inherit;\n}\n\n:host(:where(:not([color]))) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:is(:state(has-active-action),[state--has-active-action])) {\n --sbb-card-border-color: var(--sbb-border-color-3);\n --sbb-card-border-width: var(--sbb-border-width-2x);\n --sbb-card-border-style: solid;\n}\n@media (forced-colors: active) {\n :host(:is(:state(has-active-action),[state--has-active-action])) {\n --sbb-card-border-color: Highlight;\n }\n}\n\n@media (any-hover: hover) {\n :host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover) {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover) {\n --sbb-card-border-color: Highlight;\n }\n}\n\n@media (forced-colors: active) {\n :host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))) {\n --sbb-card-color: ButtonText;\n }\n}\n\n@media (forced-colors: active) {\n :host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))) {\n --sbb-card-color: LinkText;\n --sbb-card-border-color: CanvasText;\n }\n}\n\n:host(.sbb-card-spacing-3x-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-xxxs-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)\n var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-xxxs-s) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)\n var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);\n}\n\n:host(.sbb-card-spacing-4x-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-fixed-4x);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-xxs) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);\n}\n\n:host(.sbb-card-spacing-s) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-s);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);\n}\n\n:host(.sbb-card-spacing-l) {\n --sbb-card-padding-block: var(--sbb-spacing-responsive-l);\n --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);\n --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);\n}\n\n:host(:is(:state(has-badge),[state--has-badge])) {\n --sbb-card-padding-block: var(--sbb-card-with-badge-padding-block);\n}\n\nslot {\n display: block;\n height: 100%;\n margin-block: var(--sbb-card-hover-shift, 0) calc(-1 * var(--sbb-card-hover-shift, 0px));\n transition: margin var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n::slotted(sbb-card-badge) {\n position: absolute;\n inset: 0;\n inset-block-end: unset;\n border-start-end-radius: var(--sbb-card-border-radius);\n overflow: hidden;\n}\n\n::slotted(sbb-title) {\n margin-block-start: 0;\n}\n";
226
203
 
227
204
  // src/elements/card/card/card.component.ts
228
205
  /**
229
206
  * It displays content related to a single subject.
230
207
  *
231
208
  * @slot - Use the unnamed slot to add content to the card.
232
- * @slot badge - Use this slot to render a `sbb-card-badge` component.
233
- * @slot action - Use this slot to render a `sbb-card-button` or a `sbb-card-link` component.
209
+ * For specific use cases, `<sbb-card-button>`, `<sbb-card-link>` or `<sbb-card-badge>` elements can be slotted.
234
210
  */
235
211
  let SbbCardElement = (() => {
236
212
  let _classSuper = SbbElement;
@@ -276,16 +252,15 @@ let SbbCardElement = (() => {
276
252
  set color(value) {
277
253
  this.#color_accessor_storage = value;
278
254
  }
255
+ connectedCallback() {
256
+ super.connectedCallback();
257
+ this._toggleBadgePresence();
258
+ }
259
+ _toggleBadgePresence() {
260
+ this.toggleState("has-badge", !!this.querySelector?.("sbb-card-badge"));
261
+ }
279
262
  render() {
280
- return html`
281
- <slot name="action"></slot>
282
- <span class="sbb-card__wrapper">
283
- <slot></slot>
284
- </span>
285
- <span class="sbb-card__badge-wrapper">
286
- <slot name="badge"></slot>
287
- </span>
288
- `;
263
+ return html`<slot @slotchange=${() => this._toggleBadgePresence()}></slot>`;
289
264
  }
290
265
  constructor() {
291
266
  super(...arguments);
package/development/download.pure.js CHANGED
@@ -7,7 +7,7 @@ import { SbbDividerElement } from "./divider.pure.js";
7
7
  import { SbbIconNameMixin } from "./icon.pure.js";
8
8
 
9
9
  // src/elements/download/download/download.scss?inline
10
- var download_default = ":host {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n --sbb-card-border-radius: var(--sbb-border-radius-4x);\n --sbb-card-animation-easing: var(--sbb-animation-easing);\n --sbb-card-border-style: solid;\n --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n display: block;\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n.sbb-download::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n .sbb-download {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n.sbb-download {\n display: flex;\n align-items: center;\n text-decoration: none;\n translate: 0 var(--sbb-card-hover-shift, 0);\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download: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}\n\n@media (any-hover: hover) {\n :host(:hover) .sbb-download {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover) .sbb-download {\n --sbb-card-border-color: Highlight;\n }\n}\n\n.sbb-download__icon {\n flex: 0 0 auto;\n}\n\n.sbb-download__divider {\n align-self: stretch;\n height: auto;\n margin-block: var(--sbb-download-divider-margin-block);\n margin-inline: var(--sbb-download-gap) var(--sbb-download-content-gap);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-download__divider {\n display: none;\n}\n\n.sbb-download__content {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.sbb-download__label {\n overflow-wrap: break-word;\n font-size: var(--sbb-download-label-font-size);\n line-height: var(--sbb-typo-line-height-heading);\n letter-spacing: var(--sbb-letter-spacing-heading);\n font-weight: bold;\n color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xxs);\n color: var(--sbb-download-info-color);\n}\n\n.sbb-download__button {\n flex: 0 0 auto;\n margin-inline-start: var(--sbb-download-content-gap);\n}\n";
10
+ var download_default = ":host {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n --sbb-card-border-radius: var(--sbb-border-radius-4x);\n --sbb-card-animation-easing: var(--sbb-animation-easing);\n --sbb-card-border-style: solid;\n --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n display: block;\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n isolation: isolate;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n.sbb-download::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n .sbb-download {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n.sbb-download {\n display: flex;\n align-items: center;\n text-decoration: none;\n translate: 0 var(--sbb-card-hover-shift, 0);\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download: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}\n\n@media (any-hover: hover) {\n :host(:hover) .sbb-download {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover) .sbb-download {\n --sbb-card-border-color: Highlight;\n }\n}\n\n.sbb-download__icon {\n flex: 0 0 auto;\n}\n\n.sbb-download__divider {\n align-self: stretch;\n height: auto;\n margin-block: var(--sbb-download-divider-margin-block);\n margin-inline: var(--sbb-download-gap) var(--sbb-download-content-gap);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-download__divider {\n display: none;\n}\n\n.sbb-download__content {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.sbb-download__label {\n overflow-wrap: break-word;\n font-size: var(--sbb-download-label-font-size);\n line-height: var(--sbb-typo-line-height-heading);\n letter-spacing: var(--sbb-letter-spacing-heading);\n font-weight: bold;\n color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xxs);\n color: var(--sbb-download-info-color);\n}\n\n.sbb-download__button {\n flex: 0 0 auto;\n margin-inline-start: var(--sbb-download-content-gap);\n}\n";
11
11
 
12
12
  // src/elements/download/download/download.component.ts
13
13
  const fileExtensionIcons = /* @__PURE__ */ new Map([
package/development/status.pure.js CHANGED
@@ -5,7 +5,7 @@ import { SbbElement } from "./core.js";
5
5
  import { SbbIconNameMixin } from "./icon.pure.js";
6
6
 
7
7
  // src/elements/status/status.scss?inline
8
- var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([type=error]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=success]) {\n --sbb-status-color: var(--sbb-color-success);\n}\n\n:host([type=warning]) {\n --sbb-status-color: var(--sbb-color-2);\n}\n\n:host([type=pending]) {\n --sbb-status-color: var(--sbb-color-sky);\n}\n\n:host([type=incomplete]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=not-started]) {\n --sbb-status-color: var(--sbb-color-5);\n --sbb-status-text-color: var(--sbb-color-2);\n}\n\n:host([type=in-progress]) {\n --sbb-status-color: var(--sbb-color-pink);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])) {\n --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);\n --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);\n --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-status-title-color);\n}\n\n.sbb-status__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--sbb-status-color);\n margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-status__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n";
8
+ var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([type=error]) {\n --sbb-status-color: var(--sbb-status-color-error);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-error);\n}\n\n:host([type=success]) {\n --sbb-status-color: var(--sbb-status-color-success);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-success);\n}\n\n:host([type=warning]) {\n --sbb-status-color: var(--sbb-status-color-warning);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-warning);\n}\n\n:host([type=pending]) {\n --sbb-status-color: var(--sbb-status-color-pending);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-pending);\n}\n\n:host([type=incomplete]) {\n --sbb-status-color: var(--sbb-status-color-incomplete);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-incomplete);\n}\n\n:host([type=not-started]) {\n --sbb-status-color: var(--sbb-status-color-not-started);\n --sbb-status-text-color: var(--sbb-status-text-color-not-started);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-not-started);\n}\n\n:host([type=in-progress]) {\n --sbb-status-color: var(--sbb-status-color-in-progress);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-in-progress);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])) {\n --sbb-status-gap: var(--sbb-status-gap-with-title);\n --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);\n --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-status-title-color);\n}\n\n.sbb-status__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--sbb-status-color);\n margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-status__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n\nsbb-icon {\n --sbb-icon-svg-width: var(--sbb-status-icon-dimension);\n --sbb-icon-svg-height: var(--sbb-status-icon-dimension);\n height: fit-content;\n background: radial-gradient(circle, var(--sbb-status-icon-background-color) calc(100% - 0.4375rem), transparent calc(100% - 0.4375rem));\n}\n";
9
9
 
10
10
  // src/elements/status/status.component.ts
11
11
  /**
package/download.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbSecondaryButtonStaticElement as o}from"./button.pure.js";import{SbbElement as s,SbbLanguageController as c,SbbLinkBaseElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f,i18nDownload as p,i18nNonAccessible as m,omitEmptyConverter as h,readConfig as g,screenReaderOnlyStyles as _}from"./core.js";import{SbbDividerElement as v}from"./divider.pure.js";import{SbbIconNameMixin as y}from"./icon.pure.js";var b=`:host{--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent;--sbb-card-border-radius:var(--sbb-border-radius-4x);--sbb-card-animation-easing:var(--sbb-animation-easing);--sbb-card-border-style:solid;--sbb-card-padding-inline-default:var(--sbb-spacing-responsive-s);--sbb-card-padding-block-default:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block-default:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default);display:block}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}.sbb-download{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}.sbb-download:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){.sbb-download{--sbb-title-color:var(--sbb-card-color)}}.sbb-download{translate:0 var(--sbb-card-hover-shift,0);transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);align-items:center;text-decoration:none;display:flex}.sbb-download: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)}@media (any-hover:hover){:host(:hover) .sbb-download{--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover) .sbb-download{--sbb-card-border-color:Highlight}}.sbb-download__icon{flex:none}.sbb-download__divider{height:auto;margin-block:var(--sbb-download-divider-margin-block);margin-inline:var(--sbb-download-gap) var(--sbb-download-content-gap);align-self:stretch}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-download__divider{display:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;font-size:var(--sbb-download-label-font-size);line-height:var(--sbb-typo-line-height-heading);letter-spacing:var(--sbb-letter-spacing-heading);color:var(--sbb-download-label-color);font-weight:700}.sbb-download__custom-content,.sbb-download__info{line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-download-info-color)}.sbb-download__button{flex:none;margin-inline-start:var(--sbb-download-content-gap)}
1
+ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbSecondaryButtonStaticElement as o}from"./button.pure.js";import{SbbElement as s,SbbLanguageController as c,SbbLinkBaseElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f,i18nDownload as p,i18nNonAccessible as m,omitEmptyConverter as h,readConfig as g,screenReaderOnlyStyles as _}from"./core.js";import{SbbDividerElement as v}from"./divider.pure.js";import{SbbIconNameMixin as y}from"./icon.pure.js";var b=`:host{--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent;--sbb-card-border-radius:var(--sbb-border-radius-4x);--sbb-card-animation-easing:var(--sbb-animation-easing);--sbb-card-border-style:solid;--sbb-card-padding-inline-default:var(--sbb-spacing-responsive-s);--sbb-card-padding-block-default:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block-default:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default);display:block}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}.sbb-download{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));isolation:isolate;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}.sbb-download:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){.sbb-download{--sbb-title-color:var(--sbb-card-color)}}.sbb-download{translate:0 var(--sbb-card-hover-shift,0);transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);align-items:center;text-decoration:none;display:flex}.sbb-download: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)}@media (any-hover:hover){:host(:hover) .sbb-download{--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover) .sbb-download{--sbb-card-border-color:Highlight}}.sbb-download__icon{flex:none}.sbb-download__divider{height:auto;margin-block:var(--sbb-download-divider-margin-block);margin-inline:var(--sbb-download-gap) var(--sbb-download-content-gap);align-self:stretch}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-download__divider{display:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;font-size:var(--sbb-download-label-font-size);line-height:var(--sbb-typo-line-height-heading);letter-spacing:var(--sbb-letter-spacing-heading);color:var(--sbb-download-label-color);font-weight:700}.sbb-download__custom-content,.sbb-download__info{line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-download-info-color)}.sbb-download__button{flex:none;margin-inline-start:var(--sbb-download-content-gap)}
2
2
  `;const x=/* @__PURE__ */ new Map([[`pdf`,`document-pdf-small`],[`xls`,`document-xls-small`],[`xlsx`,`document-xls-small`],[`ppt`,`document-ppt-small`],[`pptx`,`document-ppt-small`],[`doc`,`document-doc-small`],[`docx`,`document-doc-small`],[`zip`,`document-zip-small`],[`jpg`,`document-image-small`],[`jpeg`,`document-image-small`],[`png`,`document-image-small`],[`gif`,`document-image-small`],[`svg`,`document-image-small`],[`webp`,`document-image-small`]]);let S=(()=>{let s=y(l),u,d=[],m=[],g,S=[],C=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,d,`white`),this.#t=(t(this,m),t(this,S,``)),this._languageController=(t(this,C),new c(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;u=[a({reflect:!0})],g=[f(),a({converter:h})],e(this,null,u,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},d,m),e(this,null,g,{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},S,C),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download`}static{this.elementDependencies=[v,o]}static{this.styles=[_,i(b)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get label(){return this.#t}set label(e){this.#t=e}get fileName(){return this.href.split(/[?#]/)[0].split(`/`).filter(Boolean).at(-1)??``}get fileExtension(){let e=this.fileName;return e.includes(`.`)?e.split(`.`).at(-1)?.toLowerCase()??``:``}renderIconName(){if(this.iconName)return this.iconName;if(!this.href)return``;let e=this.fileExtension;return e&&x.get(e)||`document-standard-small`}resolveTarget(){return this.target||this.hasAttribute(`target`)?this.target:this.download?``:`_blank`}updated(e){super.updated(e),this._updateDescribedByElements()}_updateDescribedByElements(){let e=this.shadowRoot?.querySelector?.(`a`);if(e){let t=this.shadowRoot?.querySelector?.(`.sbb-download__custom-content`),n=this.shadowRoot?.querySelector?.(`#sbb-link-new-window`);e.ariaDescribedByElements=[...t?[t]:[],...this._downloadInfoElements(),...n?[n]:[]]}}_downloadInfoElements(){return this.querySelectorAll?.(`sbb-download-info`)??[]}renderTemplate(){return n`
3
3
  ${this.renderIconSlot(`sbb-download__icon`)}
4
4
  <sbb-divider
package/lean-off-brand-theme.css CHANGED
@@ -1226,7 +1226,7 @@ summary {
1226
1226
  --sbb-card-badge-color: var(--sbb-color-2-inverted);
1227
1227
  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
1228
1228
  --sbb-card-badge-border-color: transparent;
1229
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
1229
+ --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-3x);
1230
1230
  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
1231
1231
  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
1232
1232
  --sbb-card-badge-skew: skew(16deg, 0deg);
@@ -1855,9 +1855,51 @@ summary {
1855
1855
  --sbb-slider-padding-block: 0.125rem;
1856
1856
  --sbb-status-color: var(--sbb-color-4);
1857
1857
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1858
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1858
1859
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1859
1860
  --sbb-status-title-color: var(--sbb-color-granite);
1860
1861
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1862
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1863
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1864
+ --sbb-status-color-error: var(--sbb-color-error);
1865
+ --sbb-status-icon-background-color-error: color-mix(
1866
+ in srgb,
1867
+ var(--sbb-color-error) 10%,
1868
+ transparent
1869
+ );
1870
+ --sbb-status-color-success: var(--sbb-color-success);
1871
+ --sbb-status-icon-background-color-success: color-mix(
1872
+ in srgb,
1873
+ var(--sbb-color-success) 10%,
1874
+ transparent
1875
+ );
1876
+ --sbb-status-color-warning: var(--sbb-color-2);
1877
+ --sbb-status-icon-background-color-warning: color-mix(
1878
+ in srgb,
1879
+ var(--sbb-color-peach) 30%,
1880
+ transparent
1881
+ );
1882
+ --sbb-status-color-pending: var(--sbb-color-sky);
1883
+ --sbb-status-icon-background-color-pending: color-mix(
1884
+ in srgb,
1885
+ var(--sbb-color-sky) 10%,
1886
+ transparent
1887
+ );
1888
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1889
+ --sbb-status-icon-background-color-incomplete: color-mix(
1890
+ in srgb,
1891
+ var(--sbb-color-error) 10%,
1892
+ transparent
1893
+ );
1894
+ --sbb-status-color-not-started: var(--sbb-color-5);
1895
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1896
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1897
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1898
+ --sbb-status-icon-background-color-in-progress: color-mix(
1899
+ in srgb,
1900
+ var(--sbb-color-sky) 10%,
1901
+ transparent
1902
+ );
1861
1903
  --sbb-step-label-color: var(--sbb-color-4);
1862
1904
  --sbb-step-label-prefix-border-style: solid;
1863
1905
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
@@ -3133,10 +3175,6 @@ sbb-breadcrumb-group:not(:defined) {
3133
3175
  initial-value: 0%;
3134
3176
  inherits: false;
3135
3177
  }
3136
- sbb-card .sbb-action {
3137
- pointer-events: all;
3138
- }
3139
-
3140
3178
  sbb-carousel-item sbb-image {
3141
3179
  border-radius: unset;
3142
3180
  }
package/lean-safety-theme.css CHANGED
@@ -1246,7 +1246,7 @@ summary {
1246
1246
  --sbb-card-badge-color: var(--sbb-color-2-inverted);
1247
1247
  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
1248
1248
  --sbb-card-badge-border-color: transparent;
1249
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
1249
+ --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-3x);
1250
1250
  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
1251
1251
  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
1252
1252
  --sbb-card-badge-skew: skew(16deg, 0deg);
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
@@ -3153,10 +3195,6 @@ sbb-breadcrumb-group:not(:defined) {
3153
3195
  initial-value: 0%;
3154
3196
  inherits: false;
3155
3197
  }
3156
- sbb-card .sbb-action {
3157
- pointer-events: all;
3158
- }
3159
-
3160
3198
  sbb-carousel-item sbb-image {
3161
3199
  border-radius: unset;
3162
3200
  }
package/lean-theme.css CHANGED
@@ -1246,7 +1246,7 @@ summary {
1246
1246
  --sbb-card-badge-color: var(--sbb-color-2-inverted);
1247
1247
  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
1248
1248
  --sbb-card-badge-border-color: transparent;
1249
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
1249
+ --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-3x);
1250
1250
  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
1251
1251
  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
1252
1252
  --sbb-card-badge-skew: skew(16deg, 0deg);
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
@@ -3153,10 +3195,6 @@ sbb-breadcrumb-group:not(:defined) {
3153
3195
  initial-value: 0%;
3154
3196
  inherits: false;
3155
3197
  }
3156
- sbb-card .sbb-action {
3157
- pointer-events: all;
3158
- }
3159
-
3160
3198
  sbb-carousel-item sbb-image {
3161
3199
  border-radius: unset;
3162
3200
  }
package/off-brand-theme.css CHANGED
@@ -1226,7 +1226,7 @@ summary {
1226
1226
  --sbb-card-badge-color: var(--sbb-color-2-inverted);
1227
1227
  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
1228
1228
  --sbb-card-badge-border-color: transparent;
1229
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
1229
+ --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-3x);
1230
1230
  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
1231
1231
  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
1232
1232
  --sbb-card-badge-skew: skew(16deg, 0deg);
@@ -1855,9 +1855,51 @@ summary {
1855
1855
  --sbb-slider-padding-block: 0.125rem;
1856
1856
  --sbb-status-color: var(--sbb-color-4);
1857
1857
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1858
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1858
1859
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1859
1860
  --sbb-status-title-color: var(--sbb-color-granite);
1860
1861
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1862
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1863
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1864
+ --sbb-status-color-error: var(--sbb-color-error);
1865
+ --sbb-status-icon-background-color-error: color-mix(
1866
+ in srgb,
1867
+ var(--sbb-color-error) 10%,
1868
+ transparent
1869
+ );
1870
+ --sbb-status-color-success: var(--sbb-color-success);
1871
+ --sbb-status-icon-background-color-success: color-mix(
1872
+ in srgb,
1873
+ var(--sbb-color-success) 10%,
1874
+ transparent
1875
+ );
1876
+ --sbb-status-color-warning: var(--sbb-color-2);
1877
+ --sbb-status-icon-background-color-warning: color-mix(
1878
+ in srgb,
1879
+ var(--sbb-color-peach) 30%,
1880
+ transparent
1881
+ );
1882
+ --sbb-status-color-pending: var(--sbb-color-sky);
1883
+ --sbb-status-icon-background-color-pending: color-mix(
1884
+ in srgb,
1885
+ var(--sbb-color-sky) 10%,
1886
+ transparent
1887
+ );
1888
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1889
+ --sbb-status-icon-background-color-incomplete: color-mix(
1890
+ in srgb,
1891
+ var(--sbb-color-error) 10%,
1892
+ transparent
1893
+ );
1894
+ --sbb-status-color-not-started: var(--sbb-color-5);
1895
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1896
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1897
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1898
+ --sbb-status-icon-background-color-in-progress: color-mix(
1899
+ in srgb,
1900
+ var(--sbb-color-sky) 10%,
1901
+ transparent
1902
+ );
1861
1903
  --sbb-step-label-color: var(--sbb-color-4);
1862
1904
  --sbb-step-label-prefix-border-style: solid;
1863
1905
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
@@ -3133,10 +3175,6 @@ sbb-breadcrumb-group:not(:defined) {
3133
3175
  initial-value: 0%;
3134
3176
  inherits: false;
3135
3177
  }
3136
- sbb-card .sbb-action {
3137
- pointer-events: all;
3138
- }
3139
-
3140
3178
  sbb-carousel-item sbb-image {
3141
3179
  border-radius: unset;
3142
3180
  }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.13.0-dev.1793626084",
3
+ "version": "5.13.0-dev.1793630843",
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/b48040bb5308b445c67e9227023db8f28ffc1b9d"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/faf81772232ccd117dacc3794d761a652f992d88"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1246,7 +1246,7 @@ summary {
1246
1246
  --sbb-card-badge-color: var(--sbb-color-2-inverted);
1247
1247
  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
1248
1248
  --sbb-card-badge-border-color: transparent;
1249
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
1249
+ --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-3x);
1250
1250
  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
1251
1251
  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
1252
1252
  --sbb-card-badge-skew: skew(16deg, 0deg);
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
@@ -3153,10 +3195,6 @@ sbb-breadcrumb-group:not(:defined) {
3153
3195
  initial-value: 0%;
3154
3196
  inherits: false;
3155
3197
  }
3156
- sbb-card .sbb-action {
3157
- pointer-events: all;
3158
- }
3159
-
3160
3198
  sbb-carousel-item sbb-image {
3161
3199
  border-radius: unset;
3162
3200
  }
package/standard-theme.css CHANGED
@@ -1246,7 +1246,7 @@ summary {
1246
1246
  --sbb-card-badge-color: var(--sbb-color-2-inverted);
1247
1247
  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
1248
1248
  --sbb-card-badge-border-color: transparent;
1249
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
1249
+ --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-3x);
1250
1250
  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
1251
1251
  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
1252
1252
  --sbb-card-badge-skew: skew(16deg, 0deg);
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
@@ -3153,10 +3195,6 @@ sbb-breadcrumb-group:not(:defined) {
3153
3195
  initial-value: 0%;
3154
3196
  inherits: false;
3155
3197
  }
3156
- sbb-card .sbb-action {
3157
- pointer-events: all;
3158
- }
3159
-
3160
3198
  sbb-carousel-item sbb-image {
3161
3199
  border-radius: unset;
3162
3200
  }
package/status/_status.global.scss CHANGED
@@ -5,6 +5,48 @@ $theme: 'standard' !default;
5
5
  @mixin base {
6
6
  --sbb-status-color: var(--sbb-color-4);
7
7
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
8
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
8
9
  --sbb-status-font-size: var(--sbb-text-font-size-s);
9
10
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
11
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
12
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
13
+ --sbb-status-color-error: var(--sbb-color-error);
14
+ --sbb-status-icon-background-color-error: color-mix(
15
+ in srgb,
16
+ var(--sbb-color-error) 10%,
17
+ transparent
18
+ );
19
+ --sbb-status-color-success: var(--sbb-color-success);
20
+ --sbb-status-icon-background-color-success: color-mix(
21
+ in srgb,
22
+ var(--sbb-color-success) 10%,
23
+ transparent
24
+ );
25
+ --sbb-status-color-warning: var(--sbb-color-2);
26
+ --sbb-status-icon-background-color-warning: color-mix(
27
+ in srgb,
28
+ var(--sbb-color-peach) 30%,
29
+ transparent
30
+ );
31
+ --sbb-status-color-pending: var(--sbb-color-sky);
32
+ --sbb-status-icon-background-color-pending: color-mix(
33
+ in srgb,
34
+ var(--sbb-color-sky) 10%,
35
+ transparent
36
+ );
37
+ --sbb-status-color-incomplete: var(--sbb-color-error);
38
+ --sbb-status-icon-background-color-incomplete: color-mix(
39
+ in srgb,
40
+ var(--sbb-color-error) 10%,
41
+ transparent
42
+ );
43
+ --sbb-status-color-not-started: var(--sbb-color-5);
44
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
45
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
46
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
47
+ --sbb-status-icon-background-color-in-progress: color-mix(
48
+ in srgb,
49
+ var(--sbb-color-sky) 10%,
50
+ transparent
51
+ );
10
52
  }
package/status.pure.js CHANGED
@@ -1,4 +1,4 @@
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{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-color-2)}:host([type=pending]){--sbb-status-color:var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color:var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color:var(--sbb-color-5);--sbb-status-text-color:var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color:var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}
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{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-status-color-error);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-status-color-success);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-status-color-warning);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-warning)}:host([type=pending]){--sbb-status-color:var(--sbb-status-color-pending);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-pending)}:host([type=incomplete]){--sbb-status-color:var(--sbb-status-color-incomplete);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-incomplete)}:host([type=not-started]){--sbb-status-color:var(--sbb-status-color-not-started);--sbb-status-text-color:var(--sbb-status-text-color-not-started);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-not-started)}:host([type=in-progress]){--sbb-status-color:var(--sbb-status-color-in-progress);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-in-progress)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-status-gap-with-title);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}sbb-icon{--sbb-icon-svg-width:var(--sbb-status-icon-dimension);--sbb-icon-svg-height:var(--sbb-status-icon-dimension);background:radial-gradient(circle, var(--sbb-status-icon-background-color) calc(100% - .4375rem), transparent calc(100% - .4375rem));height:fit-content}
2
2
  `;let c=(()=>{let c=o(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=[i({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},u,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-status`}static{this.styles=[r(s)]}#e;get type(){return this.#e}set type(e){this.#e=e}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}renderIconName(){return super.renderIconName()||this._statusTypes.get(this.type)}render(){return n`
3
3
  <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
4
4
  <span class="sbb-status__content">