@sbb-esta/lyne-elements 3.3.0 → 3.4.0

package/core/mixins/form-associated-input-mixin.js

@@ -30,7 +30,7 @@ const k = () => {
      * The value of the input. Reflects the current text value of this input.
      */
     set value(e) {
-      this._value = this._cleanText(e), this.hasUpdated && (this.innerHTML = this._value);
+      this._value = this._cleanText(e), this.hasUpdated && (this.innerHTML = this._value), this.dispatchEvent(new Event("displayvaluechange", { bubbles: !0, composed: !0 }));
     }
     get value() {
       return this._value ?? "";
@@ -167,7 +167,7 @@ const k = () => {
     } }, metadata: e }, null, n), r(s, null, h, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, i) => {
       t.placeholder = i;
     } }, metadata: e }, null, n), r(s, null, u, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, n), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), s.role = "textbox", s;
+  })(), s.role = "textbox", s.formFieldAssociated = !0, s;
 })();
 export {
   H as SbbFormAssociatedInputMixin

package/core/mixins/form-associated-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-mixin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAuC,MAAM,KAAK,CAAC;AAK3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAEjF,OAAO,CAAC,MAAM,CAAC;IACb;;OAEG;IACH,UAAU,mBAAmB;KAAG;IAChC,UAAU,aAAc,SAAQ,mBAAmB;KAAG;IACtD,UAAU,kBAAmB,SAAQ,OAAO,CAAC,mBAAmB,CAAC;KAAG;CACrE;AAoCD,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,0BAA0B;IACtD,IAAW,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;IAC1C,SAAgB,IAAI,EAAE,MAAM,CAAC;IAC7B,IAAW,IAAI,IAAI,MAAM,CAAC;IAE1B,kBAAyB,KAAK,EAAE,OAAO,CAAC;IAExC,IAAW,QAAQ,IAAI,aAAa,CAAC;IACrC,IAAW,iBAAiB,IAAI,MAAM,CAAC;IACvC,IAAW,YAAY,IAAI,OAAO,CAAC;IAEnC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAEzB,aAAa,IAAI,OAAO;IACxB,cAAc,IAAI,OAAO;IACzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAExC,sBAAsB,CAAC,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAC3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;aACpC,iBAAiB,IAAI,IAAI;aACzB,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,MAAM,EAAE,iBAAiB,GACxB,IAAI;IAEP,SAAS,CAAC,eAAe,IAAI,IAAI;IACjC,SAAS,CAAC,SAAS,CAAC,IAAI,gBAAgB;IACxC,SAAS,CAAC,eAAe,CAAC,CAAC,SAAS,MAAM,kBAAkB,EAC1D,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAChC,IAAI;IACP,SAAS,CAAC,kBAAkB,CAAC,CAAC,SAAS,MAAM,kBAAkB,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI;IAC/E,SAAS,CAAC,QAAQ,IAAI,IAAI;IAC1B,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;CACjE;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GACjC,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,4BAA4B,CAAC,EAExE,YAAY,CAAC,KACZ,mBAAmB,CAAC,0BAA0B,CAAC,GAAG,CA0TpD,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,cAAc,CAAC"}
+{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-mixin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAuC,MAAM,KAAK,CAAC;AAK3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAEjF,OAAO,CAAC,MAAM,CAAC;IACb;;OAEG;IACH,UAAU,mBAAmB;KAAG;IAChC,UAAU,aAAc,SAAQ,mBAAmB;KAAG;IACtD,UAAU,kBAAmB,SAAQ,OAAO,CAAC,mBAAmB,CAAC;KAAG;CACrE;AAoCD,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,0BAA0B;IACtD,IAAW,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;IAC1C,SAAgB,IAAI,EAAE,MAAM,CAAC;IAC7B,IAAW,IAAI,IAAI,MAAM,CAAC;IAE1B,kBAAyB,KAAK,EAAE,OAAO,CAAC;IAExC,IAAW,QAAQ,IAAI,aAAa,CAAC;IACrC,IAAW,iBAAiB,IAAI,MAAM,CAAC;IACvC,IAAW,YAAY,IAAI,OAAO,CAAC;IAEnC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAEzB,aAAa,IAAI,OAAO;IACxB,cAAc,IAAI,OAAO;IACzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAExC,sBAAsB,CAAC,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAC3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;aACpC,iBAAiB,IAAI,IAAI;aACzB,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,MAAM,EAAE,iBAAiB,GACxB,IAAI;IAEP,SAAS,CAAC,eAAe,IAAI,IAAI;IACjC,SAAS,CAAC,SAAS,CAAC,IAAI,gBAAgB;IACxC,SAAS,CAAC,eAAe,CAAC,CAAC,SAAS,MAAM,kBAAkB,EAC1D,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAChC,IAAI;IACP,SAAS,CAAC,kBAAkB,CAAC,CAAC,SAAS,MAAM,kBAAkB,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI;IAC/E,SAAS,CAAC,QAAQ,IAAI,IAAI;IAC1B,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;CACjE;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GACjC,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,4BAA4B,CAAC,EAExE,YAAY,CAAC,KACZ,mBAAmB,CAAC,0BAA0B,CAAC,GAAG,CAgUpD,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,cAAc,CAAC"}

package/core/mixins/form-associated-mixin.js

@@ -1,9 +1,9 @@
-var v = (a) => {
+var b = (a) => {
   throw TypeError(a);
 };
-var b = (a, s, r) => s.has(a) || v("Cannot " + r);
-var g = (a, s, r) => (b(a, s, "read from private field"), r ? r.call(a) : s.get(a)), V = (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), c = (a, s, r, d) => (b(a, s, "write to private field"), d ? d.call(a, r) : s.set(a, r), r);
-import { __esDecorate as _, __runInitializers as h } from "tslib";
+var v = (a, s, r) => s.has(a) || b("Cannot " + r);
+var g = (a, s, r) => (v(a, s, "read from private field"), r ? r.call(a) : s.get(a)), _ = (a, s, r) => s.has(a) ? b("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), h = (a, s, r, d) => (v(a, s, "write to private field"), d ? d.call(a, r) : s.set(a, r), r);
+import { __esDecorate as V, __runInitializers as c } from "tslib";
 import { property as E, state as w } from "lit/decorators.js";
 import { isWebkit as F } from "../dom.js";
 const S = {
@@ -33,14 +33,14 @@ if (typeof ValidityState > "u") {
     }
   })), globalThis.ValidityState = a;
 }
-const A = (a) => (() => {
+const C = (a) => (() => {
   var o, n;
   let r = a, d = [], f, m, y = [], p = [];
   return n = class extends r {
     constructor(...t) {
       super(...t);
-      V(this, o);
-      this._validityStates = (h(this, d), /* @__PURE__ */ new Map()), c(this, o, h(this, y, !1)), h(this, p), this.addEventListener?.("invalid", (e) => e.preventDefault());
+      _(this, o);
+      this._validityStates = (c(this, d), /* @__PURE__ */ new Map()), h(this, o, c(this, y, !1)), c(this, p), this.addEventListener?.("invalid", (e) => e.preventDefault());
     }
     /**
      * Returns the form owner of this element.
@@ -94,7 +94,7 @@ const A = (a) => (() => {
       return g(this, o);
     }
     set formDisabled(t) {
-      c(this, o, t);
+      h(this, o, t);
     }
     attributeChangedCallback(t, e, i) {
       (t !== "name" || e !== i) && super.attributeChangedCallback(t, e, i);
@@ -122,15 +122,21 @@ const A = (a) => (() => {
       t ? this.setValidityFlag("customError", t) : this.removeValidityFlag("customError");
     }
     /**
-     * Is called whenever a surrounding form / fieldset changes disabled state.
-     * @param disabled
+     * Is called whenever a surrounding fieldset changes disabled state.
      *
      * @internal
      */
     formDisabledCallback(t) {
-      Promise.resolve().then(() => {
-        this.formDisabled = t;
-      });
+      this.formDisabled = this._hasDisabledAncestor();
+    }
+    _hasDisabledAncestor() {
+      let t = this.parentElement;
+      for (; t; ) {
+        if (t.localName === "fieldset" && t.hasAttribute("disabled"))
+          return !0;
+        t = t.parentElement;
+      }
+      return !1;
     }
     requestUpdate(t, e, i) {
       super.requestUpdate(t, e, i), t === "value" && this.updateFormValue(), this.hasUpdated && this.shouldValidate(t) && this.validate();
@@ -212,13 +218,13 @@ const A = (a) => (() => {
     }
   }, o = new WeakMap(), (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    f = [E()], m = [w()], _(n, null, f, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (e) => "name" in e, set: (e, i) => {
+    f = [E()], m = [w()], V(n, null, f, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (e) => "name" in e, set: (e, i) => {
       e.name = i;
-    } }, metadata: t }, null, d), _(n, null, m, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (e) => "formDisabled" in e, get: (e) => e.formDisabled, set: (e, i) => {
+    } }, metadata: t }, null, d), V(n, null, m, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (e) => "formDisabled" in e, get: (e) => e.formDisabled, set: (e, i) => {
       e.formDisabled = i;
     } }, metadata: t }, y, p), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), n.formAssociated = !0, n;
 })();
 export {
-  A as SbbFormAssociatedMixin
+  C as SbbFormAssociatedMixin
 };

package/core/styles/core/mediaqueries.scss

@@ -4,7 +4,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
-@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables.scss' as sbb-tokens;
+@use '../node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
 
 $mq-breakpoints: (
   zero: sbb-tokens.$sbb-breakpoint-zero-min,

package/core/styles/core.scss

@@ -1,4 +1,4 @@
-@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--mixin.scss' as sbb-css-tokens;
+@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens;
 @use './core/mediaqueries';
 @use './core/functions';
 @use './mixins/a11y';
@@ -33,6 +33,39 @@
     // Overlay
     --sbb-overlay-default-z-index: 1000;
 
+    // Title
+    --sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
+    --sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
+    --sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
+    --sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
+    --sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
+    --sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
+    --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
+    --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
+    --sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
+    --sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
+    --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
+    --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
+    --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
+    --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
+
+    &.sbb-lean {
+      --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
+      --sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
+      --sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
+      --sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
+      --sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
+      --sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
+      --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
+      --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
+      --sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
+      --sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
+      --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
+      --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
+      --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
+      --sbb-title-margin-block-end-level-6: 0;
+    }
+
     // Infinity border radius, can be used to achieve rounded border on start and end
     // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
     --sbb-border-radius-infinity: 100000em;

package/core/styles/mixins/typo.scss

@@ -2,86 +2,133 @@
 // Typo: Title Style Mixins
 // ----------------------------------------------------------------------------------------------------
 
-@mixin title($exclude-spacing: false) {
-  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
-  --sbb-title-margin-block-start: 0;
-  --sbb-title-margin-block-end: 0;
-
-  @if not($exclude-spacing) {
-    --sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);
-    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
-  }
-
-  margin: 0;
-  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+@mixin title-rules {
+  margin-block: var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);
+  margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height);
+  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));
   letter-spacing: var(--sbb-typo-letter-spacing-titles);
   font-size: var(--sbb-title-font-size);
 }
 
-@mixin title-1($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title--level-1 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-1);
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-1);
+@mixin title--level-1-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-margin-block-start-level-1);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-1);
 }
 
-@mixin title-2($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title--level-2 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-2);
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-2);
+@mixin title--level-2-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-2);
+}
 
-  @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs);
-  }
+@mixin title--level-3 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-3);
 }
 
-@mixin title-3($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title--level-3-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-3);
+}
+
+@mixin title--level-4 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-4);
+}
+
+@mixin title--level-4-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-4);
+}
+
+@mixin title--level-5 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-5);
+}
+
+@mixin title--level-5-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-5);
+}
+
+@mixin title--level-6 {
+  --sbb-title-font-size: var(--sbb-title-font-size-level-6);
+  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-3);
+@mixin title--level-6-spacing {
+  --sbb-title-margin-block-start: var(--sbb-title-default-margin-block-start);
+  --sbb-title-margin-block-end: var(--sbb-title-margin-block-end-level-6);
+}
 
+@mixin title-1($exclude-spacing: false) {
+  @include title--level-1;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs);
+    @include title--level-1-spacing;
   }
+  @include title-rules;
 }
 
-@mixin title-4($exclude-spacing: false) {
-  @include title($exclude-spacing);
+@mixin title-2($exclude-spacing: false) {
+  @include title--level-2;
+  @if not($exclude-spacing) {
+    @include title--level-2-spacing;
+  }
+  @include title-rules;
+}
 
-  --sbb-title-font-size: var(--sbb-font-size-title-4);
+@mixin title-3($exclude-spacing: false) {
+  @include title--level-3;
+  @if not($exclude-spacing) {
+    @include title--level-3-spacing;
+  }
+  @include title-rules;
+}
 
+@mixin title-4($exclude-spacing: false) {
+  @include title--level-4;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x);
+    @include title--level-4-spacing;
   }
+  @include title-rules;
 }
 
 @mixin title-5($exclude-spacing: false) {
-  @include title($exclude-spacing);
-
-  --sbb-title-font-size: var(--sbb-font-size-title-5);
-
+  @include title--level-5;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x);
+    @include title--level-5-spacing;
   }
+  @include title-rules;
 }
 
 @mixin title-6($exclude-spacing: false) {
-  @include title($exclude-spacing);
-
-  --sbb-title-font-size: var(--sbb-font-size-title-6);
-  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
-
+  @include title--level-6;
   @if not($exclude-spacing) {
-    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x);
+    @include title--level-6-spacing;
   }
+  @include title-rules;
 }
 
 @mixin title--negative {
   --sbb-title-text-color-normal: var(--sbb-color-milk);
 }
 
+// @deprecated, non-standard values, title rules combined with title level mixins are the alternative
+@mixin title($exclude-spacing: false) {
+  @if not($exclude-spacing) {
+    --sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);
+    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
+  }
+
+  @include title-rules;
+}
+
 // ----------------------------------------------------------------------------------------------------
 // Typo: Text Style Mixins
 // ----------------------------------------------------------------------------------------------------