@sbb-esta/lyne-elements 4.0.0-next.4 → 4.0.1

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.
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}
@@ -150,7 +150,7 @@ let qt = (() => {
150
150
  open() {
151
151
  if (this.state !== "closed" || !this._overlay || this.options.length === 0 || this._readonly() || !this.dispatchBeforeOpenEvent())
152
152
  return;
153
- this.showPopover?.(), this.state = "opening", this._triggerElement?.toggleAttribute("data-expanded", !0);
153
+ this.showPopover?.(), this.state = "opening", this.triggerElement?.toggleAttribute("data-expanded", !0);
154
154
  const t = this.originElement;
155
155
  if (!t)
156
156
  throw new Error('Cannot find the origin element. Please specify a valid element or check the usage of the "origin" property from the documentation');
@@ -158,7 +158,7 @@ let qt = (() => {
158
158
  }
159
159
  /** Closes the autocomplete. */
160
160
  close() {
161
- this.state !== "opened" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this._triggerElement?.toggleAttribute("data-expanded", !1), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
161
+ this.state !== "opened" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
162
162
  }
163
163
  _isZeroAnimationDuration() {
164
164
  return bt(this, "--sbb-options-panel-animation-duration");
@@ -214,10 +214,10 @@ let qt = (() => {
214
214
  }
215
215
  _configureTrigger() {
216
216
  const t = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
217
- if (t === this._triggerElement || (this._triggerAbortController?.abort(), gt(this.triggerElement), this._triggerElement = t, !this.triggerElement))
217
+ if (t === this.triggerElement || (this._triggerAbortController?.abort(), gt(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = t, !this.triggerElement))
218
218
  return;
219
219
  const e = this.originElement;
220
- this.triggerElement === e && this.isOpen && this._setOverlayPosition(e), this._triggerAttributeObserver?.observe(this._triggerElement, {
220
+ this.triggerElement === e && this.isOpen && this._setOverlayPosition(e), this._triggerAttributeObserver?.observe(this.triggerElement, {
221
221
  attributes: !0,
222
222
  attributeFilter: ["disabled", "readonly"]
223
223
  }), this.setTriggerAttributes(this.triggerElement), this._triggerAbortController = new AbortController(), this.triggerElement.addEventListener("focus", () => this.open(), {
@@ -4,12 +4,12 @@ var v = (a) => {
4
4
  var g = (a, s, r) => s.has(a) || v("Cannot " + r);
5
5
  var h = (a, s, r) => (g(a, s, "read from private field"), r ? r.call(a) : s.get(a)), x = (a, s, r) => s.has(a) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), u = (a, s, r, o) => (g(a, s, "write to private field"), o ? o.call(a, r) : s.set(a, r), r);
6
6
  import { __esDecorate as m, __runInitializers as c } from "tslib";
7
- import { css as k, LitElement as w, html as _ } from "lit";
7
+ import { css as f, LitElement as w, html as _ } from "lit";
8
8
  import { customElement as y, property as S } from "lit/decorators.js";
9
9
  import { SbbElementInternalsMixin as z } from "../../core/mixins.js";
10
10
  import { boxSizingStyles as E } from "../../core/styles.js";
11
- const I = k`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-title-text-color-normal-override: var(--sbb-card-color);--sbb-card-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-1x) );display:block;position:relative;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)}:host:after{content:"";position:absolute;inset:0;background-color:transparent;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}:host([color=milk]){--sbb-card-background-color: var(--sbb-background-color-3);--sbb-card-border-color: transparent}:host([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([color=transparent-bordered-dashed]){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cement);--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(: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(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button])){--sbb-card-color: ButtonText}}@media(forced-colors:active){:host(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link])){--sbb-card-color: LinkText}}: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{display:block;height:100%;pointer-events:var(--sbb-card-pointer-events, auto);translate:0 var(--sbb-card-hover-shift);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display, none);overflow:hidden;position:absolute;inset:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);pointer-events:var(--sbb-card-pointer-events, auto)}::slotted(sbb-title){margin-block-start:0}`;
12
- let C = (() => {
11
+ const I = f`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-title-text-color-normal-override: var(--sbb-card-color);--sbb-card-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-1x) );display:block;position:relative;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)}:host:after{content:"";position:absolute;inset:0;background-color:transparent;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}: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: var(--sbb-color-cement);--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(: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}}@media(forced-colors:active){: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{display:block;height:100%;pointer-events:var(--sbb-card-pointer-events, auto);translate:0 var(--sbb-card-hover-shift, 0);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display, none);overflow:hidden;position:absolute;inset:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);pointer-events:var(--sbb-card-pointer-events, auto)}::slotted(sbb-title){margin-block-start:0}`;
12
+ let B = (() => {
13
13
  var t, b;
14
14
  let a = [y("sbb-card")], s, r = [], o, d = z(w), n, l = [], p = [];
15
15
  return b = class extends d {
@@ -38,11 +38,11 @@ let C = (() => {
38
38
  }
39
39
  }, t = new WeakMap(), o = b, (() => {
40
40
  const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
41
- n = [S({ reflect: !0 })], m(b, null, n, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, f) => {
42
- i.color = f;
41
+ n = [S({ reflect: !0 })], m(b, null, n, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, k) => {
42
+ i.color = k;
43
43
  } }, metadata: e }, l, p), m(null, s = { value: o }, a, { kind: "class", name: o.name, metadata: e }, null, r), o = s.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
44
44
  })(), b.styles = [E, I], c(o, r), o;
45
45
  })();
46
46
  export {
47
- C as SbbCardElement
47
+ B as SbbCardElement
48
48
  };
@@ -1 +1 @@
1
- {"version":3,"file":"property-watcher-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/property-watcher-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EACf,KAAK,kBAAkB,EAExB,MAAM,KAAK,CAAC;AAEb,KAAK,sBAAsB,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,IAAI,CAAC;AAgD3E,qBAAa,4BAA4B,CAAC,CAAC,SAAS,UAAU,CAAE,YAAW,kBAAkB;IAKzF,OAAO,CAAC,QAAQ,CAAC,KAAK;IACtB,OAAO,CAAC,QAAQ,CAAC,kBAAkB;IACnC,OAAO,CAAC,QAAQ,CAAC,SAAS;IAN5B,OAAO,CAAC,UAAU,CAAC,CAAW;IAC9B,OAAO,CAAC,SAAS,CAAC,CAAkC;gBAGjC,KAAK,EAAE,sBAAsB,GAAG,WAAW,EAC3C,kBAAkB,EAAE,MAAM,CAAC,GAAG,IAAI,EAClC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;IAK1E,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAMxB,OAAO,IAAI,IAAI;IA6Bf,UAAU,IAAI,IAAI;CAmB1B"}
1
+ {"version":3,"file":"property-watcher-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/property-watcher-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EACf,KAAK,kBAAkB,EAExB,MAAM,KAAK,CAAC;AAEb,KAAK,sBAAsB,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,IAAI,CAAC;AAwE3E,qBAAa,4BAA4B,CAAC,CAAC,SAAS,UAAU,CAAE,YAAW,kBAAkB;IAKzF,OAAO,CAAC,QAAQ,CAAC,KAAK;IACtB,OAAO,CAAC,QAAQ,CAAC,kBAAkB;IACnC,OAAO,CAAC,QAAQ,CAAC,SAAS;IAN5B,OAAO,CAAC,UAAU,CAAC,CAAW;IAC9B,OAAO,CAAC,SAAS,CAAC,CAAkC;gBAGjC,KAAK,EAAE,sBAAsB,GAAG,WAAW,EAC3C,kBAAkB,EAAE,MAAM,CAAC,GAAG,IAAI,EAClC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;IAK1E,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAMxB,OAAO,IAAI,IAAI;IA6Bf,UAAU,IAAI,IAAI;CAmB1B"}
@@ -1,16 +1,18 @@
1
- import { isServer as o } from "lit";
2
- class c {
1
+ import { isServer as n } from "lit";
2
+ class l {
3
3
  get size() {
4
4
  return this._handlers.size;
5
5
  }
6
6
  constructor(e, t) {
7
- this._host = e, this._property = t, this._handlers = /* @__PURE__ */ new Set(), o || customElements.upgrade(this._host), this._value = this._host[this._property];
7
+ this._host = e, this._property = t, this._handlers = /* @__PURE__ */ new Set(), this._hostDefinedPromise = null, n || (customElements.get(this._host.localName) ? customElements.upgrade(this._host) : this._hostDefinedPromise = customElements.whenDefined(this._host.localName).then(() => {
8
+ customElements.upgrade(this._host), this._hostDefinedPromise = null;
9
+ })), this._value = this._host[this._property];
8
10
  }
9
11
  addHandler(e) {
10
- this._handlers.size || this._host.addController(this), this._handlers.add(e), e(this._host);
12
+ this._handlers.size || (this._host.addController ? this._host.addController(this) : this._hostDefinedPromise && this._hostDefinedPromise.then(() => this._host.addController(this))), this._handlers.add(e), this._hostDefinedPromise ? this._hostDefinedPromise.then(() => e(this._host)) : e(this._host);
11
13
  }
12
14
  removeHandler(e) {
13
- this._handlers.delete(e), this._handlers.size || this._host.removeController(this);
15
+ this._handlers.delete(e), this._handlers.size || (this._host.removeController ? this._host.removeController(this) : this._hostDefinedPromise && this._hostDefinedPromise.then(() => this._host.removeController(this)));
14
16
  }
15
17
  hostUpdate() {
16
18
  const e = this._host[this._property];
@@ -22,7 +24,7 @@ class c {
22
24
  }
23
25
  }
24
26
  const h = /* @__PURE__ */ new WeakMap();
25
- class a {
27
+ class c {
26
28
  constructor(e, t, s) {
27
29
  this._host = e, this._referenceResolver = t, this._handlers = s, this._host.addController(this);
28
30
  }
@@ -38,9 +40,9 @@ class a {
38
40
  return;
39
41
  let t = h.get(this._reference);
40
42
  t || (t = /* @__PURE__ */ new Map(), h.set(this._reference, t)), this._watchers = t;
41
- for (const [s, n] of Object.entries(this._handlers)) {
43
+ for (const [s, o] of Object.entries(this._handlers)) {
42
44
  let r = this._watchers.get(s);
43
- r || (r = new c(this._reference, s), this._watchers.set(s, r)), r.addHandler(n);
45
+ r || (r = new l(this._reference, s), this._watchers.set(s, r)), r.addHandler(o);
44
46
  }
45
47
  }
46
48
  disconnect() {
@@ -54,5 +56,5 @@ class a {
54
56
  }
55
57
  }
56
58
  export {
57
- a as SbbPropertyWatcherController
59
+ c as SbbPropertyWatcherController
58
60
  };
@@ -95,6 +95,10 @@ $theme: 'standard' !default;
95
95
  --sbb-cursor-default: default;
96
96
  --sbb-cursor-pointer: pointer;
97
97
 
98
+ // Infinity border radius, can be used to achieve rounded border on start and end
99
+ // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
100
+ --sbb-border-radius-infinity: 100000em;
101
+
98
102
  // TODO: Remove complete block when new lean theme is complete
99
103
  // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
100
104
  // Only render the block in standard theme as fallback for CSS class usage
@@ -120,10 +124,6 @@ $theme: 'standard' !default;
120
124
  }
121
125
  }
122
126
 
123
- // Infinity border radius, can be used to achieve rounded border on start and end
124
- // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
125
- --sbb-border-radius-infinity: 100000em;
126
-
127
127
  &:has(sbb-header[size='s']) {
128
128
  --sbb-header-height: #{functions.px-to-rem-build(52)};
129
129
  }
@@ -8,12 +8,11 @@
8
8
  // Card: Mixins & CSS custom properties
9
9
  // -----------------------------------------------------------------------------
10
10
  @mixin card-variables--global($theme: 'standard') {
11
- --sbb-card-background-color: var(--sbb-background-color-1);
11
+ @include card-variables--white;
12
+
12
13
  --sbb-card-border-radius: var(--sbb-border-radius-4x);
13
14
  --sbb-card-animation-easing: var(--sbb-animation-easing);
14
- --sbb-card-border-color: transparent;
15
15
  --sbb-card-border-style: solid;
16
- --sbb-card-hover-shift: 0;
17
16
  --sbb-card-padding-inline: #{functions.theme-pattern-select(
18
17
  (
19
18
  'standard': var(--sbb-spacing-responsive-s),
@@ -50,6 +49,11 @@
50
49
  }
51
50
  }
52
51
 
52
+ @mixin card-variables--white {
53
+ --sbb-card-background-color: var(--sbb-background-color-1);
54
+ --sbb-card-border-color: transparent;
55
+ }
56
+
53
57
  @mixin card-variables--milk {
54
58
  --sbb-card-background-color: var(--sbb-background-color-3);
55
59
  --sbb-card-border-color: transparent;
@@ -134,6 +138,7 @@
134
138
  @mixin card-variables--link {
135
139
  @include a11y.if-forced-colors {
136
140
  --sbb-card-color: LinkText;
141
+ --sbb-card-border-color: CanvasText;
137
142
  }
138
143
  }
139
144
 
package/core.css CHANGED
@@ -1102,11 +1102,10 @@
1102
1102
  --sbb-size-element-m: var(--sbb-size-element-m-zero);
1103
1103
  --sbb-size-element-l: var(--sbb-size-element-l-zero);
1104
1104
  --sbb-card-background-color: var(--sbb-background-color-1);
1105
+ --sbb-card-border-color: transparent;
1105
1106
  --sbb-card-border-radius: var(--sbb-border-radius-4x);
1106
1107
  --sbb-card-animation-easing: var(--sbb-animation-easing);
1107
- --sbb-card-border-color: transparent;
1108
1108
  --sbb-card-border-style: solid;
1109
- --sbb-card-hover-shift: 0;
1110
1109
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
1111
1110
  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
1112
1111
  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
@@ -1243,6 +1242,7 @@
1243
1242
  --sbb-overlay-default-z-index: 1000;
1244
1243
  --sbb-cursor-default: default;
1245
1244
  --sbb-cursor-pointer: pointer;
1245
+ --sbb-border-radius-infinity: 100000em;
1246
1246
  }
1247
1247
  :root.sbb-lean {
1248
1248
  --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
@@ -1263,9 +1263,6 @@
1263
1263
  var(--sbb-spacing-fixed-1x);
1264
1264
  --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
1265
1265
  }
1266
- :root {
1267
- --sbb-border-radius-infinity: 100000em;
1268
- }
1269
1266
  :root:has(sbb-header[size=s]) {
1270
1267
  --sbb-header-height: 3.25rem;
1271
1268
  }