@sbb-esta/lyne-elements-experimental-dev 0.0.0 → 4.5.1-dev.1771849274

package/README.md

@@ -0,0 +1,55 @@
+# Lyne Components
+
+> Lyne Components are the building blocks of the Lyne Design System
+> and are based on standard compliant Web Components
+> created using [Lit](https://lit.dev/) and
+> browsable through [Storybook](https://lyne-storybook.app.sbb.ch/)
+
+## 🎯 Our aim
+
+To fulfill our [Vision](./docs/VISION.md), we are building and maintaining Lyne, our Design System, which is and acts
+as our common language — our Single Source of Truth.
+For this purpose we use [Design Tokens](https://github.com/sbb-design-systems/lyne-design-tokens) as our design abstractions.
+Those [Design Tokens](https://github.com/sbb-design-systems/lyne-design-tokens) are consumed by Lyne Components and are integrated within our documentation.
+
+Lyne Design Tokens and Lyne Components are available for developers and designers.
+
+## 📚 Documentation
+
+- General docs: [digital.sbb.ch](https://digital.sbb.ch)
+- Component docs: [Storybook](https://lyne-storybook.app.sbb.ch)
+- [Getting started guide](./docs/GETTING_STARTED.md)
+
+## 🔗 Packages
+
+| Package                                | Description                                                                 |
+| -------------------------------------- | --------------------------------------------------------------------------- |
+| `@sbb-esta/lyne-elements`              | Web components built on top of the Lyne Design System                       |
+| `@sbb-esta/lyne-elements-experimental` | Web components that do not yet align with our architecture or testing goals |
+| `@sbb-esta/lyne-react`                 | React wrappers for `@sbb-esta/lyne-elements`                                |
+| `@sbb-esta/lyne-react-experimental`    | React wrappers for `@sbb-esta/lyne-elements-experimental`                   |
+
+- [NPM Packages](https://www.npmjs.com/search?q=%40sbb-esta%2Flyne-)
+
+## 🖥 Browser and screen reader support
+
+This library supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and Edge.
+
+We aim for great user experience with the following screen readers:
+
+Windows: NVDA and JAWS with FF / Chrome.
+macOS: VoiceOver with Safari / Chrome.
+iOS: VoiceOver with Safari
+Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
+
+## 🙌 Contributing
+
+- [General contribution guide](./docs/CONTRIBUTING.md)
+- [Developer guide](./docs/DEVELOPER.md) for developers to get started working with this repo.
+- [Coding standards](./docs/CODING_STANDARDS.md) for developers.
+- [Code of conduct](./docs/CODE_OF_CONDUCT.md)
+
+## 📝 License
+
+This software is published by SBB-CFF-FFS under the [MIT](/LICENSE) licence and unsupported unless otherwise clearly stated.
+Use at your own risk.

package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js

@@ -0,0 +1,86 @@
+import { __esDecorate as v, __runInitializers as f } from "tslib";
+import { SbbAutocompleteBaseElement as g } from "@sbb-esta/lyne-elements/autocomplete.js";
+import { getNextElementIndex as m } from "@sbb-esta/lyne-elements/core/a11y.js";
+import { isSafari as A } from "@sbb-esta/lyne-elements/core/dom.js";
+import { ɵstateController as a } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { setAriaComboBoxAttributes as O } from "@sbb-esta/lyne-elements/core/overlay.js";
+import { customElement as x } from "lit/decorators.js";
+import { SbbAutocompleteGridOptionElement as b } from "../autocomplete-grid-option.js";
+let y = 0;
+const d = A;
+let D = (() => {
+  var o;
+  let p = [x("sbb-autocomplete-grid")], n, c = [], i, u = g;
+  return o = class extends u {
+    constructor() {
+      super(...arguments), this.overlayId = `sbb-autocomplete-grid-${++y}`, this.panelRole = "grid", this._activeColumnIndex = 0;
+    }
+    get options() {
+      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
+    }
+    syncNegative() {
+      this.querySelectorAll?.("sbb-divider, sbb-autocomplete-grid-button, sbb-option-hint").forEach((t) => t.negative = this.negative), this.querySelectorAll?.("sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup").forEach((t) => a(t).toggle("negative", this.negative));
+    }
+    openedPanelKeyboardInteraction(t) {
+      if (this.isOpen)
+        switch (t.key) {
+          case "Enter":
+            this.selectByKeyboard(t);
+            break;
+          case "ArrowDown":
+          case "ArrowUp":
+            this.setNextActiveOption(t);
+            break;
+          case "ArrowRight":
+          case "ArrowLeft":
+            this._setNextHorizontalActiveElement(t);
+            break;
+        }
+    }
+    /**
+     * Select an element on 'Enter' keypress.
+     *
+     * Due to keyboard navigation code, the `_activeColumnIndex` is zero when an option is 'focused'
+     * and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
+     * would always return a `SbbAutocompleteGridButtonElement`.
+     */
+    selectByKeyboard(t) {
+      this.activeOption && (t.preventDefault(), this._activeColumnIndex !== 0 ? this.activeOption.closest("sbb-autocomplete-grid-row")?.querySelectorAll("sbb-autocomplete-grid-button")[
+        // We ignore the option in the selector. Therefore, we have to shift the activeColumnIndex by one.
+        this._activeColumnIndex - 1
+      ]?.click() : this.activeOption.selectViaUserInteraction(!0));
+    }
+    setNextActiveOption(t) {
+      const e = this.options.filter((r) => !r.matches(":is(:state(disabled),[state--disabled])"));
+      if (this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-row :is(:state(focus-visible),[state--focus-visible])") ?? []).forEach((r) => a(r).delete("focus-visible")), this._activeColumnIndex = 0, !e.length) {
+        this.activeOption = null;
+        return;
+      }
+      const l = this.activeOption ? e.indexOf(this.activeOption) : -1, s = m(t, l, e.length);
+      this.activeOption = e[s], this.activeOption.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", this.activeOption.id), this.activeOption.scrollIntoView({ block: "nearest" }), t && t.preventDefault(), this.autoSelectActiveOption && t && this.setPendingSelection(this.activeOption);
+    }
+    _setNextHorizontalActiveElement(t) {
+      if (!this.activeOption)
+        return;
+      const e = Array.from(this.activeOption?.closest("sbb-autocomplete-grid-row")?.querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button") ?? [])?.filter((h) => !h.matches(":is(:state(disabled),[state--disabled])"));
+      if (!e.length)
+        return;
+      const l = m(t, this._activeColumnIndex, e.length), s = e[l];
+      s instanceof b ? s.setActive(!0) : a(s).add("focus-visible");
+      const r = e[this._activeColumnIndex];
+      r instanceof b ? r.setActive(!1) : a(r).delete("focus-visible"), this.triggerElement?.setAttribute("aria-activedescendant", s.id), s.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = l;
+    }
+    resetActiveElement() {
+      this._activeColumnIndex !== 0 && this.activeOption?.closest("sbb-autocomplete-grid-row")?.querySelectorAll("sbb-autocomplete-grid-button").forEach((t) => a(t).delete("focus-visible")), this.activeOption?.setActive(!1), this.activeOption = null, this._activeColumnIndex = 0, this.triggerElement?.removeAttribute("aria-activedescendant");
+    }
+    setTriggerAttributes(t) {
+      O(t, d ? this.id : this.overlayId, !1, "grid");
+    }
+  }, i = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    v(null, n = { value: i }, p, { kind: "class", name: i.name, metadata: t }, null, c), i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = d ? "grid" : null, f(i, c), i;
+})();
+export {
+  D as SbbAutocompleteGridElement
+};

package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js

@@ -0,0 +1,54 @@
+import { __esDecorate as o, __runInitializers as n } from "tslib";
+import { miniButtonStyle as d } from "@sbb-esta/lyne-elements/button/common.js";
+import { SbbActionBaseElement as u } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { SbbPropertyWatcherController as b } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { hostAttributes as c } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { isEventPrevented as m } from "@sbb-esta/lyne-elements/core/eventing.js";
+import { SbbDisabledMixin as p, SbbNegativeMixin as h } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles as f } from "@sbb-esta/lyne-elements/core/styles.js";
+import { SbbIconNameMixin as S } from "@sbb-esta/lyne-elements/icon.js";
+import { isServer as g } from "lit";
+import { customElement as _ } from "lit/decorators.js";
+let y = 0, M = (() => {
+  var t;
+  let l = [_("sbb-autocomplete-grid-button"), c({
+    tabindex: null
+  })], i, r = [], s, a = p(h(S(u)));
+  return t = class extends a {
+    /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
+    get option() {
+      return this.closest("sbb-autocomplete-grid-row")?.querySelector("sbb-autocomplete-grid-option") || null;
+    }
+    get optgroup() {
+      return this.closest("sbb-autocomplete-grid-optgroup");
+    }
+    constructor() {
+      super(), this._handleButtonClick = async (e) => {
+        await m(e) || this.closest("form");
+      }, this.internals.states.add("button"), g || (this.setupBaseEventHandlers(), this.addEventListener("click", this._handleButtonClick), this.addController(new b(this, () => this.closest("sbb-autocomplete-grid-optgroup"), {
+        disabled: () => this._updateInternals()
+      })));
+    }
+    isDisabledExternally() {
+      return this.optgroup?.disabled ?? !1;
+    }
+    renderTemplate() {
+      return super.renderIconSlot();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-button-${++y}`;
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("disabled") && this._updateInternals();
+    }
+    _updateInternals() {
+      this.disabled || this.optgroup?.disabled ? (this.internals.states.add("disabled"), this.internals.ariaDisabled = "true") : (this.internals.states.delete("disabled"), this.internals.ariaDisabled = null);
+    }
+  }, s = t, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    o(null, i = { value: s }, l, { kind: "class", name: s.name, metadata: e }, null, r), s = i.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t.role = "button", t.styles = [f, d], n(s, r), s;
+})();
+export {
+  M as SbbAutocompleteGridButtonElement
+};

package/autocomplete-grid/autocomplete-grid-button.js

@@ -0,0 +1,4 @@
+import { SbbAutocompleteGridButtonElement as o } from "./autocomplete-grid-button/autocomplete-grid-button.component.js";
+export {
+  o as SbbAutocompleteGridButtonElement
+};

package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js

@@ -0,0 +1,25 @@
+import { __esDecorate as o, __runInitializers as c } from "tslib";
+import { SbbElementInternalsMixin as m } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles as n } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as b, LitElement as u, html as p } from "lit";
+import { customElement as d } from "lit/decorators.js";
+const f = b`:host{display:block}.sbb-autocomplete-grid-cell{display:flex;column-gap:var(--sbb-spacing-fixed-6x)}`;
+let h = (() => {
+  var t;
+  let i = [d("sbb-autocomplete-grid-cell")], a, s = [], e, r = m(u);
+  return t = class extends r {
+    render() {
+      return p`
+      <span class="sbb-autocomplete-grid-cell">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, e = t, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    o(null, a = { value: e }, i, { kind: "class", name: e.name, metadata: l }, null, s), e = a.value, l && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), t.role = "gridcell", t.styles = [n, f], c(e, s), e;
+})();
+export {
+  h as SbbAutocompleteGridCellElement
+};

package/autocomplete-grid/autocomplete-grid-cell.js

@@ -0,0 +1,4 @@
+import { SbbAutocompleteGridCellElement as o } from "./autocomplete-grid-cell/autocomplete-grid-cell.component.js";
+export {
+  o as SbbAutocompleteGridCellElement
+};

package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js

@@ -0,0 +1,29 @@
+import { __esDecorate as i, __runInitializers as n } from "tslib";
+import { SbbPropertyWatcherController as u } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { SbbOptgroupBaseElement as c } from "@sbb-esta/lyne-elements/option/optgroup.js";
+import { customElement as m } from "lit/decorators.js";
+let f = (() => {
+  var e;
+  let s = [m("sbb-autocomplete-grid-optgroup")], o, a = [], t, l = c;
+  return e = class extends l {
+    get options() {
+      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
+    }
+    constructor() {
+      super(), this.addController(new u(this, () => this.closest("sbb-autocomplete-grid"), {
+        negative: (r) => {
+          this.toggleState("negative", r.negative), this.requestUpdate();
+        }
+      }));
+    }
+    getAutocompleteParent() {
+      return this.closest?.("sbb-autocomplete-grid") || null;
+    }
+  }, t = e, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    i(null, o = { value: t }, s, { kind: "class", name: t.name, metadata: r }, null, a), t = o.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r }), n(t, a);
+  })(), t;
+})();
+export {
+  f as SbbAutocompleteGridOptgroupElement
+};

package/autocomplete-grid/autocomplete-grid-optgroup.js

@@ -0,0 +1,4 @@
+import { SbbAutocompleteGridOptgroupElement as t } from "./autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js";
+export {
+  t as SbbAutocompleteGridOptgroupElement
+};

package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js

@@ -0,0 +1,41 @@
+import { __esDecorate as n, __runInitializers as c } from "tslib";
+import { SbbPropertyWatcherController as l } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { ɵstateController as b } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles as p } from "@sbb-esta/lyne-elements/core/styles.js";
+import { SbbOptionBaseElement as d } from "@sbb-esta/lyne-elements/option.js";
+import { customElement as h } from "lit/decorators.js";
+import { css as m } from "lit";
+const u = m`:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`, g = "sbb-autocomplete-grid-option";
+let z = (() => {
+  var o;
+  let r = [h("sbb-autocomplete-grid-option")], e, s = [], i, a = d;
+  return o = class extends a {
+    constructor() {
+      super(), this.optionId = g, this.addController(new l(this, () => this.closest("sbb-autocomplete-grid-optgroup"), {
+        disabled: (t) => {
+          this.disabledFromGroup = t.disabled, b(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled();
+        },
+        label: (t) => this.groupLabel = t.label
+      })), this.addController(new l(this, () => this.closest("sbb-autocomplete-grid"), {
+        negative: (t) => this.toggleState("negative", t.negative)
+      }));
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("disabled") && (b(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
+    }
+    selectByClick(t) {
+      if (this.disabled || this.disabledFromGroup) {
+        t.stopPropagation();
+        return;
+      }
+      this.selectViaUserInteraction(!0);
+    }
+  }, i = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    n(null, e = { value: i }, r, { kind: "class", name: i.name, metadata: t }, null, s), i = e.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "gridcell", o.styles = [p, u], c(i, s), i;
+})();
+export {
+  z as SbbAutocompleteGridOptionElement,
+  g as autocompleteGridOptionId
+};

package/autocomplete-grid/autocomplete-grid-option.js

@@ -0,0 +1,5 @@
+import { SbbAutocompleteGridOptionElement as e, autocompleteGridOptionId as p } from "./autocomplete-grid-option/autocomplete-grid-option.component.js";
+export {
+  e as SbbAutocompleteGridOptionElement,
+  p as autocompleteGridOptionId
+};

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js

@@ -0,0 +1,28 @@
+import { __esDecorate as l, __runInitializers as i } from "tslib";
+import { SbbElementInternalsMixin as c } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles as d } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as n, LitElement as u, html as g } from "lit";
+import { customElement as m } from "lit/decorators.js";
+const p = n`:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-3);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-pointer);display:block}:host(:is(:state(negative),[state--negative])){--sbb-autocomplete-grid-row-color: var(--sbb-color-3-negative);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3-negative);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-border-color-5);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host(:is(:state(disabled),[state--disabled])){--sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x));overflow-x:hidden}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
+let v = 0, y = (() => {
+  var o;
+  let b = [m("sbb-autocomplete-grid-row")], t, a = [], e, s = c(u);
+  return o = class extends s {
+    connectedCallback() {
+      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-row-${++v}`;
+    }
+    render() {
+      return g`
+      <span class="sbb-autocomplete-grid-row">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, e = o, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    l(null, t = { value: e }, b, { kind: "class", name: e.name, metadata: r }, null, a), e = t.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), o.role = "row", o.styles = [d, p], i(e, a), e;
+})();
+export {
+  y as SbbAutocompleteGridRowElement
+};

package/autocomplete-grid/autocomplete-grid-row.js

@@ -0,0 +1,4 @@
+import { SbbAutocompleteGridRowElement as t } from "./autocomplete-grid-row/autocomplete-grid-row.component.js";
+export {
+  t as SbbAutocompleteGridRowElement
+};

package/autocomplete-grid/autocomplete-grid.js

@@ -0,0 +1,4 @@
+import { SbbAutocompleteGridElement as t } from "./autocomplete-grid/autocomplete-grid.component.js";
+export {
+  t as SbbAutocompleteGridElement
+};

package/autocomplete-grid.js

@@ -0,0 +1,15 @@
+import { SbbAutocompleteGridElement as t } from "./autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js";
+import { SbbAutocompleteGridButtonElement as m } from "./autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js";
+import { SbbAutocompleteGridCellElement as l } from "./autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js";
+import { SbbAutocompleteGridOptgroupElement as i } from "./autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js";
+import { SbbAutocompleteGridOptionElement as u, autocompleteGridOptionId as d } from "./autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js";
+import { SbbAutocompleteGridRowElement as G } from "./autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js";
+export {
+  m as SbbAutocompleteGridButtonElement,
+  l as SbbAutocompleteGridCellElement,
+  t as SbbAutocompleteGridElement,
+  i as SbbAutocompleteGridOptgroupElement,
+  u as SbbAutocompleteGridOptionElement,
+  G as SbbAutocompleteGridRowElement,
+  d as autocompleteGridOptionId
+};

package/core/datetime/date-helper.js

@@ -0,0 +1,191 @@
+import { i18nDurationDay as N, i18nDurationHour as h, i18nDurationMinute as T } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { n as w, d as y, i as U } from "../../isValid-m3_OsPaB.js";
+import { t as d, c as g, b as m, m as I } from "../../toDate-Bw2KTWeq.js";
+import { g as C, a as Y, d as F } from "../../differenceInMinutes-COvvdYsJ.js";
+function x(e, t, n) {
+  const i = d(e, n?.in);
+  return isNaN(t) ? g(e, NaN) : (t && i.setDate(i.getDate() + t), i);
+}
+function z(e, t, n) {
+  return g(e, +d(e) + t);
+}
+function H(e, t, n) {
+  return z(e, t * m);
+}
+function S(e, t, n) {
+  const [i, s] = w(
+    n?.in,
+    e,
+    t
+  ), r = M(i, s), a = Math.abs(
+    y(i, s)
+  );
+  i.setDate(i.getDate() - r * a);
+  const o = +(M(i, s) === -r), u = r * (a - o);
+  return u === 0 ? 0 : u;
+}
+function M(e, t) {
+  const n = e.getFullYear() - t.getFullYear() || e.getMonth() - t.getMonth() || e.getDate() - t.getDate() || e.getHours() - t.getHours() || e.getMinutes() - t.getMinutes() || e.getSeconds() - t.getSeconds() || e.getMilliseconds() - t.getMilliseconds();
+  return n < 0 ? -1 : n > 0 ? 1 : n;
+}
+function Z(e, t, n) {
+  const [i, s] = w(
+    n?.in,
+    e,
+    t
+  ), r = (+i - +s) / m;
+  return C(n?.roundingMethod)(r);
+}
+function v(e, t, n) {
+  return x(e, -t, n);
+}
+function O(e, t) {
+  const n = () => g(t?.in, NaN), s = k(e);
+  let r;
+  if (s.date) {
+    const c = W(s.date, 2);
+    r = j(c.restDateString, c.year);
+  }
+  if (!r || isNaN(+r)) return n();
+  const a = +r;
+  let o = 0, u;
+  if (s.time && (o = A(s.time), isNaN(o)))
+    return n();
+  if (s.timezone) {
+    if (u = E(s.timezone), isNaN(u)) return n();
+  } else {
+    const c = new Date(a + o), p = d(0, t?.in);
+    return p.setFullYear(
+      c.getUTCFullYear(),
+      c.getUTCMonth(),
+      c.getUTCDate()
+    ), p.setHours(
+      c.getUTCHours(),
+      c.getUTCMinutes(),
+      c.getUTCSeconds(),
+      c.getUTCMilliseconds()
+    ), p;
+  }
+  return d(a + o + u, t?.in);
+}
+const l = {
+  dateTimeDelimiter: /[T ]/,
+  timeZoneDelimiter: /[Z ]/i,
+  timezone: /([Z+-].*)$/
+}, _ = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/, b = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/, R = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+function k(e) {
+  const t = {}, n = e.split(l.dateTimeDelimiter);
+  let i;
+  if (n.length > 2)
+    return t;
+  if (/:/.test(n[0]) ? i = n[0] : (t.date = n[0], i = n[1], l.timeZoneDelimiter.test(t.date) && (t.date = e.split(l.timeZoneDelimiter)[0], i = e.substr(
+    t.date.length,
+    e.length
+  ))), i) {
+    const s = l.timezone.exec(i);
+    s ? (t.time = i.replace(s[1], ""), t.timezone = s[1]) : t.time = i;
+  }
+  return t;
+}
+function W(e, t) {
+  const n = new RegExp(
+    "^(?:(\\d{4}|[+-]\\d{" + (4 + t) + "})|(\\d{2}|[+-]\\d{" + (2 + t) + "})$)"
+  ), i = e.match(n);
+  if (!i) return { year: NaN, restDateString: "" };
+  const s = i[1] ? parseInt(i[1]) : null, r = i[2] ? parseInt(i[2]) : null;
+  return {
+    year: r === null ? s : r * 100,
+    restDateString: e.slice((i[1] || i[2]).length)
+  };
+}
+function j(e, t) {
+  if (t === null) return /* @__PURE__ */ new Date(NaN);
+  const n = e.match(_);
+  if (!n) return /* @__PURE__ */ new Date(NaN);
+  const i = !!n[4], s = f(n[1]), r = f(n[2]) - 1, a = f(n[3]), o = f(n[4]), u = f(n[5]) - 1;
+  if (i)
+    return G(t, o, u) ? J(t, o, u) : /* @__PURE__ */ new Date(NaN);
+  {
+    const c = /* @__PURE__ */ new Date(0);
+    return !q(t, r, a) || !B(t, s) ? /* @__PURE__ */ new Date(NaN) : (c.setUTCFullYear(t, r, Math.max(s, a)), c);
+  }
+}
+function f(e) {
+  return e ? parseInt(e) : 1;
+}
+function A(e) {
+  const t = e.match(b);
+  if (!t) return NaN;
+  const n = D(t[1]), i = D(t[2]), s = D(t[3]);
+  return K(n, i, s) ? n * m + i * I + s * 1e3 : NaN;
+}
+function D(e) {
+  return e && parseFloat(e.replace(",", ".")) || 0;
+}
+function E(e) {
+  if (e === "Z") return 0;
+  const t = e.match(R);
+  if (!t) return 0;
+  const n = t[1] === "+" ? -1 : 1, i = parseInt(t[2]), s = t[3] && parseInt(t[3]) || 0;
+  return P(i, s) ? n * (i * m + s * I) : NaN;
+}
+function J(e, t, n) {
+  const i = /* @__PURE__ */ new Date(0);
+  i.setUTCFullYear(e, 0, 4);
+  const s = i.getUTCDay() || 7, r = (t - 1) * 7 + n + 1 - s;
+  return i.setUTCDate(i.getUTCDate() + r), i;
+}
+const V = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function $(e) {
+  return e % 400 === 0 || e % 4 === 0 && e % 100 !== 0;
+}
+function q(e, t, n) {
+  return t >= 0 && t <= 11 && n >= 1 && n <= (V[t] || ($(e) ? 29 : 28));
+}
+function B(e, t) {
+  return t >= 1 && t <= ($(e) ? 366 : 365);
+}
+function G(e, t, n) {
+  return t >= 1 && t <= 53 && n >= 0 && n <= 6;
+}
+function K(e, t, n) {
+  return e === 24 ? t === 0 && n === 0 : n >= 0 && n < 60 && t >= 0 && t < 60 && e >= 0 && e < 25;
+}
+function P(e, t) {
+  return t >= 0 && t <= 59;
+}
+function Q(e, t, n) {
+  return H(e, -t);
+}
+function nt(e) {
+  if (!e)
+    return;
+  const t = O(e);
+  if (U(t)) {
+    if (e.includes("Z"))
+      return new Date(e.replace("Z", ""));
+    if (e.includes("T")) {
+      const n = e.split("T");
+      if (n[1] && (n[1].includes("+") || n[1].includes("-")))
+        return /* @__PURE__ */ new Date(`${n[0]}T${n[1].split(/[+-]/)[0]}`);
+    }
+    return new Date(e);
+  }
+}
+const it = (e, t) => {
+  const n = [], i = [];
+  let r = Y(0, e);
+  const a = S(r, 0);
+  a > 0 && (n.push(`${a} d`), t && i.push(`${a} ${a > 1 ? N.multiple.long[t] : N.single.long[t]}`), r = v(r, a));
+  const o = Z(r, 0);
+  o > 0 && (n.push(`${o} h`), t && i.push(`${o} ${o > 1 ? h.multiple.long[t] : h.single.long[t]}`), r = Q(r, o));
+  const u = F(r, 0);
+  return u > 0 && (n.push(`${u} min`), t && i.push(`${u} ${u > 1 ? T.multiple.long[t] : T.single.long[t]}`)), {
+    short: n.join(" "),
+    long: i.join(" ")
+  };
+};
+export {
+  it as durationToTime,
+  nt as removeTimezoneFromISOTimeString
+};

package/core/datetime.js

@@ -0,0 +1,5 @@
+import { durationToTime as m, removeTimezoneFromISOTimeString as r } from "./datetime/date-helper.js";
+export {
+  m as durationToTime,
+  r as removeTimezoneFromISOTimeString
+};