@sbb-esta/lyne-elements-dev 5.13.0-dev.1793626084 → 5.13.0-dev.1793630348
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/card/_card.global.scss +6 -6
- package/card.pure.js +5 -13
- package/custom-elements.json +11 -73
- package/development/card/card/card.component.d.ts +3 -2
- package/development/card.pure.js +14 -39
- package/development/download.pure.js +1 -1
- package/download.pure.js +1 -1
- package/lean-off-brand-theme.css +1 -5
- package/lean-safety-theme.css +1 -5
- package/lean-theme.css +1 -5
- package/off-brand-theme.css +1 -5
- package/package.json +2 -2
- package/safety-theme.css +1 -5
- package/standard-theme.css +1 -5
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-
|
|
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
|
-
//
|
|
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{
|
|
2
|
-
`;let
|
|
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
|
|
8
|
-
`;const
|
|
9
|
-
`;let
|
|
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",
|
|
@@ -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
|
-
*
|
|
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 {
|
|
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
|
|
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
|
|
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
|
-
*
|
|
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);
|
|
@@ -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/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-
|
|
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);
|
|
@@ -3133,10 +3133,6 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3133
3133
|
initial-value: 0%;
|
|
3134
3134
|
inherits: false;
|
|
3135
3135
|
}
|
|
3136
|
-
sbb-card .sbb-action {
|
|
3137
|
-
pointer-events: all;
|
|
3138
|
-
}
|
|
3139
|
-
|
|
3140
3136
|
sbb-carousel-item sbb-image {
|
|
3141
3137
|
border-radius: unset;
|
|
3142
3138
|
}
|
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-
|
|
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);
|
|
@@ -3153,10 +3153,6 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3153
3153
|
initial-value: 0%;
|
|
3154
3154
|
inherits: false;
|
|
3155
3155
|
}
|
|
3156
|
-
sbb-card .sbb-action {
|
|
3157
|
-
pointer-events: all;
|
|
3158
|
-
}
|
|
3159
|
-
|
|
3160
3156
|
sbb-carousel-item sbb-image {
|
|
3161
3157
|
border-radius: unset;
|
|
3162
3158
|
}
|
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-
|
|
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);
|
|
@@ -3153,10 +3153,6 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3153
3153
|
initial-value: 0%;
|
|
3154
3154
|
inherits: false;
|
|
3155
3155
|
}
|
|
3156
|
-
sbb-card .sbb-action {
|
|
3157
|
-
pointer-events: all;
|
|
3158
|
-
}
|
|
3159
|
-
|
|
3160
3156
|
sbb-carousel-item sbb-image {
|
|
3161
3157
|
border-radius: unset;
|
|
3162
3158
|
}
|
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-
|
|
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);
|
|
@@ -3133,10 +3133,6 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3133
3133
|
initial-value: 0%;
|
|
3134
3134
|
inherits: false;
|
|
3135
3135
|
}
|
|
3136
|
-
sbb-card .sbb-action {
|
|
3137
|
-
pointer-events: all;
|
|
3138
|
-
}
|
|
3139
|
-
|
|
3140
3136
|
sbb-carousel-item sbb-image {
|
|
3141
3137
|
border-radius: unset;
|
|
3142
3138
|
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.13.0-dev.
|
|
3
|
+
"version": "5.13.0-dev.1793630348",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/bdd296604869c12c0caa5184bea352ef9af8d770"
|
|
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-
|
|
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);
|
|
@@ -3153,10 +3153,6 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3153
3153
|
initial-value: 0%;
|
|
3154
3154
|
inherits: false;
|
|
3155
3155
|
}
|
|
3156
|
-
sbb-card .sbb-action {
|
|
3157
|
-
pointer-events: all;
|
|
3158
|
-
}
|
|
3159
|
-
|
|
3160
3156
|
sbb-carousel-item sbb-image {
|
|
3161
3157
|
border-radius: unset;
|
|
3162
3158
|
}
|
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-
|
|
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);
|
|
@@ -3153,10 +3153,6 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3153
3153
|
initial-value: 0%;
|
|
3154
3154
|
inherits: false;
|
|
3155
3155
|
}
|
|
3156
|
-
sbb-card .sbb-action {
|
|
3157
|
-
pointer-events: all;
|
|
3158
|
-
}
|
|
3159
|
-
|
|
3160
3156
|
sbb-carousel-item sbb-image {
|
|
3161
3157
|
border-radius: unset;
|
|
3162
3158
|
}
|