@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/core/overlay.js

@@ -0,0 +1,121 @@
+import { html as w } from "lit";
+const x = ":is(sbb-dialog, sbb-navigation, sbb-menu, sbb-overlay)[data-state='opened']";
+function R() {
+  return w`
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="left"></div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="right"></div>
+    </div>
+  `;
+}
+const E = (t, e) => {
+  let n = t.parentElement;
+  const o = [];
+  for (; n && (o.push(n), n !== e); )
+    n = n.parentElement;
+  return o;
+}, W = (t) => {
+  t.inert || (t.inert = !0, t.matches(x) ? t.setAttribute("data-sbb-inert", `${+t.getAttribute("data-sbb-inert") + 1 || 0}`) : t.toggleAttribute("data-sbb-inert", !0)), t.hasAttribute("aria-hidden") || (t.setAttribute("aria-hidden", "true"), t.toggleAttribute("data-sbb-aria-hidden", !0));
+}, y = (t) => {
+  t.hasAttribute("data-sbb-inert") && (t.inert = !1, t.removeAttribute("data-sbb-inert")), t.hasAttribute("data-sbb-aria-hidden") && (t.removeAttribute("aria-hidden"), t.removeAttribute("data-sbb-aria-hidden"));
+};
+function $(t) {
+  y(t);
+  const e = t.closest("body > *");
+  Array.from(document.querySelectorAll("body > *")).filter(
+    (i) => i !== e
+  ).forEach((i) => W(i));
+  let o = [];
+  const a = E(t, e);
+  for (const i of a)
+    o = o.concat(
+      Array.from(i.children).filter(
+        (c) => c !== t && !a.includes(c)
+      )
+    ), i.matches(x) && i.setAttribute("data-sbb-inert", `${+i.getAttribute("data-sbb-inert") + 1 || 0}`);
+  o.forEach((i) => W(i));
+}
+function C() {
+  const t = Array.from(
+    document.documentElement.querySelectorAll(x)
+  );
+  if (t.length) {
+    t.forEach((e) => {
+      const n = +e.getAttribute("data-sbb-inert") - 1;
+      e.setAttribute("data-sbb-inert", `${n}`), n && n < 0 && (y(e), Array.from(e.children).forEach((o) => y(o)));
+    });
+    return;
+  }
+  Array.from(document.documentElement.querySelectorAll("[data-sbb-inert]")).forEach(
+    (e) => y(e)
+  );
+}
+function O(t) {
+  const e = window.getComputedStyle(t), n = e.display, o = parseInt(e.maxHeight, 10).toString();
+  if (n !== "none" && o !== "0")
+    return {
+      scrollHeight: t.scrollHeight,
+      clientHeight: t.clientHeight,
+      offsetHeight: t.offsetHeight,
+      scrollWidth: t.scrollWidth,
+      clientWidth: t.clientWidth,
+      offsetWidth: t.offsetWidth
+    };
+  t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
+  const a = t.scrollHeight, i = t.clientHeight, c = t.offsetHeight, u = t.scrollWidth, r = t.clientWidth, s = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: a, clientHeight: i, offsetHeight: c, scrollWidth: u, clientWidth: r, offsetWidth: s };
+}
+function z(t, e) {
+  if (!t || !e)
+    return !1;
+  const n = t.getBoundingClientRect();
+  return n.top <= e.clientY && e.clientY <= n.top + n.height && n.left <= e.clientX && e.clientX <= n.left + n.width;
+}
+function S(t, e, n, o) {
+  const i = (o == null ? void 0 : o.verticalOffset) || 0, c = (o == null ? void 0 : o.horizontalOffset) || 0, u = (o == null ? void 0 : o.responsiveHeight) || !1, r = e.getBoundingClientRect(), s = O(t), f = r.left, m = r.top, g = document.documentElement.clientWidth - (f + r.width), h = m - i, A = document.documentElement.clientHeight - (m + r.height + i);
+  let l = f, p = m + r.height + i, b = s.offsetWidth - r.width;
+  const d = { horizontal: "start", vertical: "below" };
+  let H = `${A - i}px`;
+  o != null && o.centered && f - 16 + r.width / 2 > s.offsetWidth / 2 && g - 16 > b / 2 && (l -= b /= 2, d.horizontal = "center"), g < b && f > b && (l = l - b, d.horizontal = "end"), c && d.horizontal !== "center" && r.width / 2 < c && (l += c * (d.horizontal === "start" ? -1 : 1)), (f < b && g < b || document.documentElement.clientWidth < s.offsetWidth) && (l = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (A - i < s.scrollHeight && h - i > (u ? s.clientHeight : s.scrollHeight) || h > A && A - i < s.clientHeight && !u) && (p = h < s.scrollHeight ? p - r.height - h - i : m - s.clientHeight - i, H = `${h - i}px`, d.vertical = "above");
+  const v = n.getBoundingClientRect();
+  return v.left < 0 && (l -= v.left), v.top < 0 && (p -= v.top), {
+    top: p,
+    left: l,
+    maxHeight: H,
+    alignment: d
+  };
+}
+function B(t, e, n, o, a) {
+  if (!t || !e)
+    return;
+  a.style.setProperty("--sbb-options-panel-width", `${e.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${e.offsetHeight}px`);
+  const i = S(n, e, o);
+  a.style.setProperty("--sbb-options-panel-position-x", `${i.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${i.top}px`), a.style.setProperty("--sbb-options-panel-max-height", i.maxHeight), a.setAttribute("data-options-panel-position", i.alignment.vertical), e.setAttribute("data-options-panel-position", i.alignment.vertical);
+}
+function I(t, e, n, o) {
+  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", n), t.setAttribute("aria-expanded", `${o === "opening" || o === "opened"}`));
+}
+function Y(t) {
+  t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
+}
+function M(t, e, n) {
+  t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${n}`));
+}
+function X(t) {
+  t && (t.removeAttribute("autocomplete"), t.removeAttribute("role"), t.removeAttribute("aria-autocomplete"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-owns"), t.removeAttribute("aria-expanded"));
+}
+export {
+  $ as applyInertMechanism,
+  S as getElementPosition,
+  O as getElementRectangle,
+  z as isEventOnElement,
+  R as overlayGapFixCorners,
+  X as removeAriaComboBoxAttributes,
+  Y as removeAriaOverlayTriggerAttributes,
+  C as removeInertMechanism,
+  M as setAriaComboBoxAttributes,
+  I as setAriaOverlayTriggerAttributes,
+  B as setOverlayPosition
+};

package/core/styles/_index.scss

@@ -0,0 +1,24 @@
+@forward './core/functions';
+@forward './core/mediaqueries';
+
+@forward './mixins/a11y';
+@forward './mixins/animation';
+@forward './mixins/badge';
+@forward './mixins/buttons';
+@forward './mixins/card';
+@forward './mixins/chip';
+@forward './mixins/font-face';
+@forward './mixins/helpers';
+@forward './mixins/inputs';
+@forward './mixins/layout';
+@forward './mixins/link';
+@forward './mixins/lists';
+@forward './mixins/overlay';
+@forward './mixins/panel';
+@forward './mixins/pearl-chain-bullet';
+@forward './mixins/scrollbar';
+@forward './mixins/shadows';
+@forward './mixins/typo';
+
+// Internals
+@forward './mixins/dev_and_debug';

package/core/styles/a11y.scss

@@ -0,0 +1,15 @@
+@use './mixins/a11y';
+
+.sbb-screen-reader-only {
+  @include a11y.screen-reader-only;
+}
+
+.sbb-focus-outline:focus-visible {
+  @include a11y.focus-outline;
+}
+
+.sbb-focus-outline-dark:focus-visible {
+  @include a11y.focus-outline;
+
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}

package/core/styles/animation.scss

@@ -0,0 +1,17 @@
+@use './mixins/animation';
+
+.sbb-disable-animation {
+  @include animation.disable-animation;
+}
+
+.sbb-disable-animation-locally {
+  @include animation.disable-animation;
+
+  & > * {
+    @include animation.enable-animation;
+  }
+}
+
+.sbb-enable-animation {
+  @include animation.enable-animation;
+}

package/core/styles/core/functions.scss

@@ -0,0 +1,6 @@
+@use 'sass:math';
+
+@function px-to-rem-build($size) {
+  /* size: value in px (no unit) */
+  @return ((math.div($size, 16)) * 1rem);
+}

package/core/styles/core/mediaqueries.scss

@@ -0,0 +1,105 @@
+// Inspired by: https://github.com/sass-mq/sass-mq
+
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+@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,
+  // 0
+  micro: sbb-tokens.$sbb-breakpoint-micro-min,
+  // 360
+  small: sbb-tokens.$sbb-breakpoint-small-min,
+  // 600
+  medium: sbb-tokens.$sbb-breakpoint-medium-min,
+  // 840
+  large: sbb-tokens.$sbb-breakpoint-large-min,
+  // 1024
+  wide: sbb-tokens.$sbb-breakpoint-wide-min,
+  // 1280
+  ultra: sbb-tokens.$sbb-breakpoint-ultra-min,
+  // 1440
+  ultra--max-content:
+    (
+      sbb-tokens.$sbb-breakpoint-ultra-min + (2 * sbb-tokens.$sbb-spacing-fixed-18x),
+    ),
+) !default;
+$mq-media-type: all !default;
+
+@function mq-px2rem($rem, $modifier) {
+  @return calc(#{$rem + (math.div($modifier, 16) * 1rem)});
+}
+
+@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) {
+  @if map.has-key($breakpoints, $name) {
+    @return map.get($breakpoints, $name);
+  } @else {
+    @warn "Breakpoint #{$name} wasn't found in $breakpoints.";
+  }
+}
+
+@mixin mq(
+  $from: false,
+  $to: false,
+  $and: false,
+  $media-type: $mq-media-type,
+  $breakpoints: $mq-breakpoints
+) {
+  $min-width: 0;
+  $max-width: 0;
+  $media-query: '';
+
+  // From: this breakpoint (inclusive)
+  @if $from {
+    @if meta.type-of($from) == number {
+      $min-width: mq-px2rem($from);
+    } @else {
+      $min-width: mq-px2rem(mq-get-breakpoint-width($from, $breakpoints), 0);
+    }
+  }
+
+  // Until: that breakpoint (exclusive)
+  @if $to {
+    @if meta.type-of($to) == number {
+      $max-width: mq-px2rem($to);
+    } @else {
+      $max-width: mq-px2rem(mq-get-breakpoint-width($to, $breakpoints), -1);
+    }
+  }
+
+  @if $min-width != 0 {
+    $media-query: '#{$media-query} and (min-width: #{$min-width})';
+  }
+  @if $max-width != 0 {
+    $media-query: '#{$media-query} and (max-width: #{$max-width})';
+  }
+  @if $and {
+    $media-query: '#{$media-query} and #{$and}';
+  }
+
+  // Remove unnecessary media query prefix 'all and '
+  @if $media-type == 'all' and $media-query != '' {
+    $media-type: '';
+    $media-query: string.slice(string.unquote($media-query), 6);
+  }
+
+  @media #{$media-type + $media-query} {
+    @content;
+  }
+}
+
+@mixin hover-mq($hover: true) {
+  $media-query: '';
+
+  @if $hover == true {
+    $media-query: '(any-hover: hover)';
+  } @else if $hover == false {
+    $media-query: '(hover: none)';
+  }
+
+  @media #{$media-query} {
+    @content;
+  }
+}

package/core/styles/core.scss

@@ -0,0 +1,123 @@
+@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/font-face';
+@use './mixins/a11y';
+@use './mixins/scrollbar';
+@use './mixins/typo';
+@use './mixins/helpers';
+
+@include helpers.box-sizing;
+
+// Core variables, are always needed
+:root {
+  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
+  @include sbb-css-tokens.lyne-design-tokens-css-variables;
+
+  // Train formation
+  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+
+  // Header
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // 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: 10000000em;
+
+  @include mediaqueries.mq($from: medium) {
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+  }
+}
+
+@include font-face.font-declarations;
+
+html {
+  @include typo.text;
+
+  color: var(--sbb-font-default-color);
+}
+
+// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+::placeholder {
+  @include typo.placeholder;
+}
+
+// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+sbb-form-field {
+  :where(input, textarea):disabled::placeholder {
+    color: var(--sbb-color-granite);
+    -webkit-text-fill-color: var(--sbb-color-granite);
+  }
+
+  &[floating-label] :where(input, textarea)::placeholder {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+
+    @include a11y.if-forced-colors {
+      color: Canvas;
+      -webkit-text-fill-color: Canvas;
+    }
+  }
+
+  textarea {
+    @include scrollbar.scrollbar;
+  }
+
+  &[negative] textarea {
+    @include scrollbar.scrollbar($negative: true);
+  }
+}
+
+// Hiding components until they are instantiated
+:is(
+    sbb-autocomplete,
+    sbb-dialog,
+    sbb-menu,
+    sbb-navigation,
+    sbb-navigation-section,
+    sbb-overlay,
+    sbb-select,
+    sbb-skiplink-list,
+    sbb-toast,
+    sbb-popover
+  ):not(:defined) {
+  display: none;
+}
+
+// Ensure stable breadcrumb height during hydrating
+sbb-breadcrumb-group:not(:defined) {
+  display: block;
+  height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs));
+  overflow: hidden;
+}
+
+// Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
+// This style enables accessing focusable elements inside an sbb-card.
+[data-card-focusable] {
+  pointer-events: all;
+}
+
+// In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
+// Due to margin collapsing, the wrong paragraph space wins.
+// To prevent the mistakenly large gap, we reset the paragraph space.
+sbb-title + p {
+  margin-block-start: 0;
+}
+
+input[data-sbb-time-input] {
+  max-width: var(--sbb-time-input-max-width);
+}

package/core/styles/font-characters-extension.scss

@@ -0,0 +1,3 @@
+@use './mixins/font-face';
+
+@include font-face.font-declarations-full;

package/core/styles/layout.scss

@@ -0,0 +1,16 @@
+@use './mixins/layout';
+
+.sbb-grid,
+.sbb-page-spacing {
+  @include layout.page-spacing;
+}
+
+.sbb-grid-expanded,
+.sbb-page-spacing-expanded {
+  @include layout.page-spacing-expanded;
+}
+
+.sbb-grid,
+.sbb-grid-expanded {
+  @include layout.grid-base;
+}

package/core/styles/lists.scss

@@ -0,0 +1,10 @@
+@use './mixins/lists';
+
+.sbb-list {
+  @include lists.list;
+  @include lists.description-list;
+}
+
+.sbb-step-list {
+  @include lists.step-list;
+}

package/core/styles/mixins/a11y.scss

@@ -0,0 +1,41 @@
+// ----------------------------------------------------------------------------------------------------
+// A11y: MediaQueries & Other things
+// ----------------------------------------------------------------------------------------------------
+@mixin if-forced-colors {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
+@mixin if-forced-colors-light {
+  @media (forced-colors: active) and (prefers-color-scheme: light) {
+    @content;
+  }
+}
+
+@mixin if-forced-colors-dark {
+  @media (forced-colors: active) and (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+@mixin focus-outline {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+
+@mixin screen-reader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@mixin scroll-margin-block-start {
+  scroll-margin-block-start: var(--sbb-spacing-fixed-10x);
+}

package/core/styles/mixins/animation.scss

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------------------------------
+// Animation related stuff
+// ----------------------------------------------------------------------------------------------------
+
+@mixin disable-animation {
+  --sbb-disable-animation-time: 0.1ms;
+  --sbb-disable-animation-zero-time: 0s;
+}
+
+@mixin enable-animation {
+  --sbb-disable-animation-time: initial;
+  --sbb-disable-animation-zero-time: initial;
+}

package/core/styles/mixins/badge.scss

@@ -0,0 +1,14 @@
+@use './typo';
+
+@mixin badge {
+  @include typo.text-xxs--bold;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--sbb-spacing-fixed-1x);
+  border-radius: var(--sbb-border-radius-infinity);
+  background-color: var(--sbb-color-red);
+  color: var(--sbb-color-white);
+  min-width: fit-content;
+}