@sbb-esta/lyne-elements 3.11.0 → 3.12.0

package/core/overlay/overlay-option-panel.d.ts

@@ -5,6 +5,7 @@
  * @param optionContainer The reference to the option panel.
  * @param container The element which has the position:fixed applied.
  * @param element The reference to the component.
+ * @param position The allowed position of the overlay relative to the origin.
  */
-export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement): void;
+export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement, position?: 'auto' | 'above' | 'below'): void;
 //# sourceMappingURL=overlay-option-panel.d.ts.map

package/core/overlay/overlay-option-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,GACnB,IAAI,CAmBN"}
+{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,GAAE,MAAM,GAAG,OAAO,GAAG,OAAgB,GAC5C,IAAI,CAsBN"}

package/core/overlay/overlay-option-panel.js

@@ -1,11 +1,14 @@
-import { getElementPosition as a } from "./position.js";
-function r(p, o, i, e, t) {
-  if (!p || !o)
+import { getElementPosition as r } from "./position.js";
+function b(e, o, i, a, t, p = "auto") {
+  if (!e || !o)
     return;
   t.style.setProperty("--sbb-options-panel-width", `${o.offsetWidth}px`), t.style.setProperty("--sbb-options-panel-origin-height", `${o.offsetHeight}px`);
-  const s = a(i, o, e);
+  const s = r(i, o, a, {
+    forceBelow: p === "below",
+    forceAbove: p === "above"
+  });
   t.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), t.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), t.style.setProperty("--sbb-options-panel-max-height", s.maxHeight), t.setAttribute("data-options-panel-position", s.alignment.vertical), o.setAttribute("data-options-panel-position", s.alignment.vertical);
 }
 export {
-  r as setOverlayPosition
+  b as setOverlayPosition
 };

package/core/overlay/position.d.ts

@@ -37,6 +37,8 @@ export declare function getElementPosition(element: HTMLElement, trigger: HTMLEl
     horizontalOffset?: number;
     centered?: boolean;
     responsiveHeight?: boolean;
+    forceAbove?: boolean;
+    forceBelow?: boolean;
 }): SbbElementPositionInfos;
 /**
  * Determines the position of an element relative to a trigger element by evaluating

package/core/overlay/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,KAAK,EAAE,UAAU,GAAG,YAAY,GAC/B,OAAO,CAYT;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACA,uBAAuB,CAqGzB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GACA,uBAAuB,CAgEzB"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,KAAK,EAAE,UAAU,GAAG,YAAY,GAC/B,OAAO,CAYT;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GACA,uBAAuB,CAsGzB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GACA,uBAAuB,CAgEzB"}

package/core/overlay/position.js

@@ -1,6 +1,6 @@
 function R(t) {
-  const o = window.getComputedStyle(t), c = o.display, h = parseInt(o.maxHeight, 10).toString();
-  if (c !== "none" && h !== "0")
+  const o = window.getComputedStyle(t), c = o.display, s = parseInt(o.maxHeight, 10).toString();
+  if (c !== "none" && s !== "0")
     return {
       scrollHeight: t.scrollHeight,
       clientHeight: t.clientHeight,
@@ -10,8 +10,8 @@ function R(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const v = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: v, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
+  const p = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: p, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
 }
 function x(t, o) {
   if (!t || !o)
@@ -19,33 +19,35 @@ function x(t, o) {
   const c = t.getBoundingClientRect();
   return c.top <= o.clientY && o.clientY <= c.top + c.height && c.left <= o.clientX && o.clientX <= c.left + c.width;
 }
-function y(t, o, c, h) {
-  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = h?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
-  let s = f, m = H + e.height + n, l = i.offsetWidth - e.width;
+function w(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = s?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
+  let h = f, m = H + e.height + n, l = i.offsetWidth - e.width;
   const a = { horizontal: "start", vertical: "below" };
   let O = `${u - n}px`;
-  h?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (s -= l /= 2, a.horizontal = "center"), W < l && f > l && (s = s - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (s += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (s = document.documentElement.clientWidth / 2 - i.offsetWidth / 2), (u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
-  const p = c.getBoundingClientRect();
-  return p.left < 0 && (s -= p.left), p.top < 0 && (m -= p.top), {
+  s?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (h -= l /= 2, a.horizontal = "center"), W < l && f > l && (h = h - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (h += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (h = document.documentElement.clientWidth / 2 - i.offsetWidth / 2);
+  const b = u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r;
+  !s?.forceBelow && (s?.forceAbove || b) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
+  const v = c.getBoundingClientRect();
+  return v.left < 0 && (h -= v.left), v.top < 0 && (m -= v.top), {
     top: m,
-    left: s,
+    left: h,
     maxHeight: O,
     alignment: a
   };
 }
-function b(t, o, c, h) {
-  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(h?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, s = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
+function y(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(s?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, h = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
   let l = i.right, a = r.top + n;
-  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, s.horizontal = "start"), g && s.horizontal !== "center" && (l += g * (s.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
+  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, h.horizontal = "start"), g && h.horizontal !== "center" && (l += g * (h.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
     top: a,
     left: l,
     maxHeight: u,
-    alignment: s
+    alignment: h
   };
 }
 export {
-  y as getElementPosition,
-  b as getElementPositionHorizontal,
+  w as getElementPosition,
+  y as getElementPositionHorizontal,
   R as getElementRectangle,
   x as isEventOnElement
 };

package/core/styles/layout.scss

@@ -14,3 +14,7 @@
 .sbb-grid-expanded {
   @include layout.grid-base;
 }
+
+.sbb-grid-only {
+  @include layout.grid-base;
+}

package/core/styles/mixins/badge.scss

@@ -12,6 +12,9 @@
   color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
+
+  // Transparent outline is visible in forced colors mode to ensure readability
+  outline: var(--sbb-border-width-1x) solid transparent;
 }
 
 @mixin badge-attribute {

package/core/styles/mixins/layout.scss

@@ -1,7 +1,7 @@
 @use '../core/mediaqueries';
 
 @mixin page-spacing {
-  padding-inline: var(--sbb-layout-base-offset-responsive);
+  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));
   margin-inline: auto;
 
   // If using page-spacing in flex context,
@@ -10,14 +10,15 @@
 
   @include mediaqueries.mq($from: ultra) {
     // Subtract padding to get real max-width
-    max-width: calc(
-      var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)
+    max-width: var(
+      --sbb-spacing-max-width,
+      calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))
     );
   }
 }
 
 @mixin page-spacing-expanded {
-  padding-inline: var(--sbb-spacing-responsive-xxs);
+  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));
 }
 
 @mixin grid-base {

package/core/styles/mixins/link.scss

@@ -6,17 +6,10 @@
 @mixin link-common-variables {
   --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));
   --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));
-  --sbb-link-text-decoration-color: light-dark(
-    color-mix(in srgb, currentcolor 80%, white),
-    color-mix(in srgb, currentcolor 80%, black)
-  );
-  --sbb-link-text-decoration-color-hover: currentcolor;
 }
 
 @mixin link-common-variables--negative {
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
-  --sbb-link-text-decoration-color: color-mix(in srgb, currentcolor 80%, black);
-  --sbb-link-text-decoration-color-hover: currentcolor;
 }
 
 @mixin block-link-variables {
@@ -39,14 +32,12 @@
 @mixin block-link-variables--active {
   --sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));
   --sbb-link-text-decoration-line: underline;
-  --sbb-link-text-decoration-color: currentcolor;
 }
 
 // To display a current active page, e.g. if the CSS class sbb-active is set
 @mixin block-link-variables--active-negative {
   --sbb-link-color-normal: var(--sbb-color-cement);
   --sbb-link-text-decoration-line: underline;
-  --sbb-link-text-decoration-color: currentcolor;
 }
 
 @mixin link-variables {
@@ -73,7 +64,6 @@
 @mixin link-base {
   color: var(--sbb-link-color-normal);
   text-decoration-line: var(--sbb-link-text-decoration-line, underline);
-  text-decoration-color: var(--sbb-link-text-decoration-color);
   text-decoration-thickness: #{functions.px-to-rem-build(1)};
   text-underline-offset: 0.3125em; // 5px
   user-select: none;
@@ -95,7 +85,6 @@
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
     text-decoration-line: var(--sbb-link-hover-text-decoration, underline);
-    text-decoration-color: var(--sbb-link-text-decoration-color-hover);
   }
 }