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

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

@@ -0,0 +1,134 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { SbbPropertyWatcherController } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { ɵstateController as _stateController } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles } from "@sbb-esta/lyne-elements/core/styles.js";
+import { SbbOptionBaseElement } from "@sbb-esta/lyne-elements/option.js";
+import { customElement } from "lit/decorators.js";
+import { css } from "lit";
+const style = css`: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: normal;
+  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: bold;
+}
+@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);
+}`;
+const autocompleteGridOptionId = `sbb-autocomplete-grid-option`;
+let SbbAutocompleteGridOptionElement = (() => {
+  var _a;
+  let _classDecorators = [customElement("sbb-autocomplete-grid-option")];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbOptionBaseElement;
+  _a = class extends _classSuper {
+    constructor() {
+      super();
+      this.optionId = autocompleteGridOptionId;
+      this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete-grid-optgroup"), {
+        disabled: (p) => {
+          this.disabledFromGroup = p.disabled;
+          _stateController(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup);
+          this.updateAriaDisabled();
+        },
+        label: (p) => this.groupLabel = p.label
+      }));
+      this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete-grid"), {
+        negative: (e) => this.toggleState("negative", e.negative)
+      }));
+    }
+    willUpdate(changedProperties) {
+      super.willUpdate(changedProperties);
+      if (changedProperties.has("disabled")) {
+        _stateController(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup);
+        this.updateAriaDisabled();
+      }
+    }
+    selectByClick(event) {
+      if (this.disabled || this.disabledFromGroup) {
+        event.stopPropagation();
+        return;
+      }
+      this.selectViaUserInteraction(true);
+    }
+  }, _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.role = "gridcell", _a.styles = [boxSizingStyles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbAutocompleteGridOptionElement,
+  autocompleteGridOptionId
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWdyaWQtb3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzLWV4cGVyaW1lbnRhbC9hdXRvY29tcGxldGUtZ3JpZC9hdXRvY29tcGxldGUtZ3JpZC1vcHRpb24vYXV0b2NvbXBsZXRlLWdyaWQtb3B0aW9uLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBTYmJQcm9wZXJ0eVdhdGNoZXJDb250cm9sbGVyIH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyDJtXN0YXRlQ29udHJvbGxlciB9IGZyb20gJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2NvcmUvbWl4aW5zLmpzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2NvcmUvc3R5bGVzLmpzJztcbmltcG9ydCB7IFNiYk9wdGlvbkJhc2VFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvb3B0aW9uLmpzJztcbmltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFByb3BlcnR5VmFsdWVzIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2F1dG9jb21wbGV0ZS1ncmlkLW9wdGlvbi5zY3NzP2xpdCZpbmxpbmUnO1xuXG5leHBvcnQgY29uc3QgYXV0b2NvbXBsZXRlR3JpZE9wdGlvbklkOiBzdHJpbmcgPSBgc2JiLWF1dG9jb21wbGV0ZS1ncmlkLW9wdGlvbmA7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYW4gb3B0aW9uIGl0ZW0gd2hpY2ggY2FuIGJlIHVzZWQgaW4gYHNiYi1hdXRvY29tcGxldGUtZ3JpZGAuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgY29udGVudCB0byB0aGUgb3B0aW9uIGxhYmVsLlxuICogQHNsb3QgaWNvbiAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBpY29uLiBJZiBgaWNvbi1uYW1lYCBpcyBzZXQsIGEgc2JiLWljb24gd2lsbCBiZSB1c2VkLlxuICogQGNzc3Byb3AgWy0tc2JiLW9wdGlvbi1pY29uLWNvbnRhaW5lci1kaXNwbGF5PW5vbmVdIC0gQ2FuIGJlIHVzZWQgdG8gcmVzZXJ2ZSBzcGFjZSBldmVuXG4gKiB3aGVuIHByZXNlcnZlLWljb24tc3BhY2Ugb24gYXV0b2NvbXBsZXRlIGlzIG5vdCBzZXQgb3IgaWNvbk5hbWUgaXMgbm90IHNldC5cbiAqIEBvdmVycmlkZVR5cGUgdmFsdWUgLSBUID0gc3RyaW5nXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi1hdXRvY29tcGxldGUtZ3JpZC1vcHRpb24nKVxuY2xhc3MgU2JiQXV0b2NvbXBsZXRlR3JpZE9wdGlvbkVsZW1lbnQ8VCA9IHN0cmluZz4gZXh0ZW5kcyBTYmJPcHRpb25CYXNlRWxlbWVudDxUPiB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgcm9sZSA9ICdncmlkY2VsbCc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcm90ZWN0ZWQgb3B0aW9uSWQgPSBhdXRvY29tcGxldGVHcmlkT3B0aW9uSWQ7XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5hZGRDb250cm9sbGVyKFxuICAgICAgbmV3IFNiYlByb3BlcnR5V2F0Y2hlckNvbnRyb2xsZXIodGhpcywgKCkgPT4gdGhpcy5jbG9zZXN0KCdzYmItYXV0b2NvbXBsZXRlLWdyaWQtb3B0Z3JvdXAnKSwge1xuICAgICAgICBkaXNhYmxlZDogKHApID0+IHtcbiAgICAgICAgICB0aGlzLmRpc2FibGVkRnJvbUdyb3VwID0gcC5kaXNhYmxlZDtcbiAgICAgICAgICDJtXN0YXRlQ29udHJvbGxlcih0aGlzLmNsb3Nlc3Q/Lignc2JiLWF1dG9jb21wbGV0ZS1ncmlkLXJvdycpKT8udG9nZ2xlKFxuICAgICAgICAgICAgJ2Rpc2FibGVkJyxcbiAgICAgICAgICAgIHRoaXMuZGlzYWJsZWQgfHwgdGhpcy5kaXNhYmxlZEZyb21Hcm91cCxcbiAgICAgICAgICApO1xuICAgICAgICAgIHRoaXMudXBkYXRlQXJpYURpc2FibGVkKCk7XG4gICAgICAgIH0sXG4gICAgICAgIGxhYmVsOiAocCkgPT4gKHRoaXMuZ3JvdXBMYWJlbCA9IHAubGFiZWwpLFxuICAgICAgfSksXG4gICAgKTtcblxuICAgIHRoaXMuYWRkQ29udHJvbGxlcihcbiAgICAgIG5ldyBTYmJQcm9wZXJ0eVdhdGNoZXJDb250cm9sbGVyKHRoaXMsICgpID0+IHRoaXMuY2xvc2VzdCgnc2JiLWF1dG9jb21wbGV0ZS1ncmlkJyksIHtcbiAgICAgICAgbmVnYXRpdmU6IChlKSA9PiB0aGlzLnRvZ2dsZVN0YXRlKCduZWdhdGl2ZScsIGUubmVnYXRpdmUpLFxuICAgICAgfSksXG4gICAgKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSB3aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczx0aGlzPik6IHZvaWQge1xuICAgIHN1cGVyLndpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXMpO1xuICAgIGlmIChjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2Rpc2FibGVkJykpIHtcbiAgICAgIMm1c3RhdGVDb250cm9sbGVyKHRoaXMuY2xvc2VzdD8uKCdzYmItYXV0b2NvbXBsZXRlLWdyaWQtcm93JykpPy50b2dnbGUoXG4gICAgICAgICdkaXNhYmxlZCcsXG4gICAgICAgIHRoaXMuZGlzYWJsZWQgfHwgdGhpcy5kaXNhYmxlZEZyb21Hcm91cCxcbiAgICAgICk7XG4gICAgICB0aGlzLnVwZGF0ZUFyaWFEaXNhYmxlZCgpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBzZWxlY3RCeUNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQgfHwgdGhpcy5kaXNhYmxlZEZyb21Hcm91cCkge1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5zZWxlY3RWaWFVc2VySW50ZXJhY3Rpb24odHJ1ZSk7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1hdXRvY29tcGxldGUtZ3JpZC1vcHRpb24nOiBTYmJBdXRvY29tcGxldGVHcmlkT3B0aW9uRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbIsm1c3RhdGVDb250cm9sbGVyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQVNPLE1BQU0sMkJBQW1DO0lBYTFDLG9DQUFnQyxNQUFBOzswQkFEckMsY0FBYyw4QkFBOEIsQ0FBQzs7OztvQkFDYTtBQUFSLEVBQUEsbUJBQVEsWUFBdUI7QUFBQSxJQU1oRixjQUFBO0FBQ0UsWUFBQTtBQUhRLFdBQUEsV0FBVztBQUluQixXQUFLLGNBQ0gsSUFBSSw2QkFBNkIsTUFBTSxNQUFNLEtBQUssUUFBUSxnQ0FBZ0MsR0FBRztBQUFBLFFBQzNGLFVBQVUsQ0FBQyxNQUFLO0FBQ2QsZUFBSyxvQkFBb0IsRUFBRTtBQUMzQkEsMkJBQWlCLEtBQUssVUFBVSwyQkFBMkIsQ0FBQyxHQUFHLE9BQzdELFlBQ0EsS0FBSyxZQUFZLEtBQUssaUJBQWlCO0FBRXpDLGVBQUssbUJBQUE7QUFBQSxRQUNQO0FBQUEsUUFDQSxPQUFPLENBQUMsTUFBTyxLQUFLLGFBQWEsRUFBRTtBQUFBLE1BQUEsQ0FDcEMsQ0FBQztBQUdKLFdBQUssY0FDSCxJQUFJLDZCQUE2QixNQUFNLE1BQU0sS0FBSyxRQUFRLHVCQUF1QixHQUFHO0FBQUEsUUFDbEYsVUFBVSxDQUFDLE1BQU0sS0FBSyxZQUFZLFlBQVksRUFBRSxRQUFRO0FBQUEsTUFBQSxDQUN6RCxDQUFDO0FBQUEsSUFFTjtBQUFBLElBRW1CLFdBQVcsbUJBQXVDO0FBQ25FLFlBQU0sV0FBVyxpQkFBaUI7QUFDbEMsVUFBSSxrQkFBa0IsSUFBSSxVQUFVLEdBQUc7QUFDckNBLHlCQUFpQixLQUFLLFVBQVUsMkJBQTJCLENBQUMsR0FBRyxPQUM3RCxZQUNBLEtBQUssWUFBWSxLQUFLLGlCQUFpQjtBQUV6QyxhQUFLLG1CQUFBO0FBQUEsTUFDUDtBQUFBLElBQ0Y7QUFBQSxJQUVVLGNBQWMsT0FBaUI7QUFDdkMsVUFBSSxLQUFLLFlBQVksS0FBSyxtQkFBbUI7QUFDM0MsY0FBTSxnQkFBQTtBQUNOO0FBQUEsTUFDRjtBQUVBLFdBQUsseUJBQXlCLElBQUk7QUFBQSxJQUNwQztBQUFBOztBQS9DRixpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ2tDLEdBQUEsT0FBTyxZQUNoQixHQUFBLFNBQXlCLENBQUMsaUJBQWlCLEtBQUssR0FGbkUsa0JBQUEsWUFBQSx1QkFBQSxHQUE2Qzs7OyJ9

package/development/autocomplete-grid/autocomplete-grid-option.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './autocomplete-grid-option/autocomplete-grid-option.component.ts';
+//# sourceMappingURL=autocomplete-grid-option.d.ts.map

package/development/autocomplete-grid/autocomplete-grid-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid-option.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-option.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kEAAkE,CAAC"}

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

@@ -0,0 +1,6 @@
+import { SbbAutocompleteGridOptionElement, autocompleteGridOptionId } from "./autocomplete-grid-option/autocomplete-grid-option.component.js";
+export {
+  SbbAutocompleteGridOptionElement,
+  autocompleteGridOptionId
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWdyaWQtb3B0aW9uLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==

package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+declare const SbbAutocompleteGridRowElement_base: import('@sbb-esta/lyne-elements/core/mixins.js').AbstractConstructor<import('@sbb-esta/lyne-elements/core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('@sbb-esta/lyne-elements/core/mixins.js').SbbElementInternalsConstructor;
+/**
+ * The component is used as a wrapper for options and action buttons.
+ *
+ * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-cell` with one or more `sbb-autocomplete-grid-button`.
+ */
+export declare class SbbAutocompleteGridRowElement extends SbbAutocompleteGridRowElement_base {
+    static readonly role = "row";
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-autocomplete-grid-row': SbbAutocompleteGridRowElement;
+    }
+}
+export {};
+//# sourceMappingURL=autocomplete-grid-row.component.d.ts.map

package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid-row.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAOjF;;;;GAIG;AACH,qBAEM,6BAA8B,SAAQ,kCAAoC;IAC9E,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzD,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}

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

@@ -0,0 +1,115 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { SbbElementInternalsMixin } from "@sbb-esta/lyne-elements/core/mixins.js";
+import { boxSizingStyles } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+const style = css`: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: 0.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 autocompleteRowNextId = 0;
+let SbbAutocompleteGridRowElement = (() => {
+  var _a;
+  let _classDecorators = [customElement("sbb-autocomplete-grid-row")];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbElementInternalsMixin(LitElement);
+  _a = class extends _classSuper {
+    connectedCallback() {
+      super.connectedCallback();
+      this.id ||= `sbb-autocomplete-grid-row-${++autocompleteRowNextId}`;
+    }
+    render() {
+      return html`
+      <span class="sbb-autocomplete-grid-row">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.role = "row", _a.styles = [boxSizingStyles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbAutocompleteGridRowElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWdyaWQtcm93LmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzLWV4cGVyaW1lbnRhbC9hdXRvY29tcGxldGUtZ3JpZC9hdXRvY29tcGxldGUtZ3JpZC1yb3cvYXV0b2NvbXBsZXRlLWdyaWQtcm93LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4gfSBmcm9tICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9jb3JlL21peGlucy5qcyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9jb3JlL3N0eWxlcy5qcyc7XG5pbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBodG1sLCBMaXRFbGVtZW50LCB0eXBlIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2F1dG9jb21wbGV0ZS1ncmlkLXJvdy5zY3NzP2xpdCZpbmxpbmUnO1xuXG5sZXQgYXV0b2NvbXBsZXRlUm93TmV4dElkID0gMDtcblxuLyoqXG4gKiBUaGUgY29tcG9uZW50IGlzIHVzZWQgYXMgYSB3cmFwcGVyIGZvciBvcHRpb25zIGFuZCBhY3Rpb24gYnV0dG9ucy5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBhIGBzYmItYXV0b2NvbXBsZXRlLWdyaWQtb3B0aW9uYCBhbmQgYSBgc2JiLWF1dG9jb21wbGV0ZS1ncmlkLWNlbGxgIHdpdGggb25lIG9yIG1vcmUgYHNiYi1hdXRvY29tcGxldGUtZ3JpZC1idXR0b25gLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItYXV0b2NvbXBsZXRlLWdyaWQtcm93JylcbmNsYXNzIFNiYkF1dG9jb21wbGV0ZUdyaWRSb3dFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudEludGVybmFsc01peGluKExpdEVsZW1lbnQpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ3Jvdyc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICB0aGlzLmlkIHx8PSBgc2JiLWF1dG9jb21wbGV0ZS1ncmlkLXJvdy0keysrYXV0b2NvbXBsZXRlUm93TmV4dElkfWA7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWF1dG9jb21wbGV0ZS1ncmlkLXJvd1wiPlxuICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWF1dG9jb21wbGV0ZS1ncmlkLXJvdyc6IFNiYkF1dG9jb21wbGV0ZUdyaWRSb3dFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFPQSxJQUFJLHdCQUF3QjtJQVN0QixpQ0FBNkIsTUFBQTs7MEJBRGxDLGNBQWMsMkJBQTJCLENBQUM7Ozs7b0JBQ0MseUJBQXlCLFVBQVU7QUFBM0MsRUFBQSxtQkFBUSxZQUFvQztBQUFBLElBSTlELG9CQUFpQjtBQUMvQixZQUFNLGtCQUFBO0FBQ04sV0FBSyxPQUFPLDZCQUE2QixFQUFFLHFCQUFxQjtBQUFBLElBQ2xFO0FBQUEsSUFFbUIsU0FBTTtBQUN2QixhQUFPO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUtUO0FBQUE7O0FBZkYsaUJBQUEsTUFBQSxtQkFBQSxFQUFBLE9BQUEsV0FBQSxHQUFBLGtCQUFBLEVBQUEsTUFBQSxTQUFBLE1BQUEsV0FBQSxNQUFBLFVBQUEsVUFBQSxHQUFBLE1BQUEsdUJBQUE7OztRQUNrQyxHQUFBLE9BQU8sT0FDaEIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBRm5FLGtCQUFBLFlBQUEsdUJBQUEsR0FBOEI7OzsifQ==

package/development/autocomplete-grid/autocomplete-grid-row.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './autocomplete-grid-row/autocomplete-grid-row.component.ts';
+//# sourceMappingURL=autocomplete-grid-row.d.ts.map

package/development/autocomplete-grid/autocomplete-grid-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid-row.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid-row.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4DAA4D,CAAC"}

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

@@ -0,0 +1,5 @@
+import { SbbAutocompleteGridRowElement } from "./autocomplete-grid-row/autocomplete-grid-row.component.js";
+export {
+  SbbAutocompleteGridRowElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWdyaWQtcm93LmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==

package/development/autocomplete-grid/autocomplete-grid.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './autocomplete-grid/autocomplete-grid.component.ts';
+//# sourceMappingURL=autocomplete-grid.d.ts.map

package/development/autocomplete-grid/autocomplete-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/autocomplete-grid/autocomplete-grid.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oDAAoD,CAAC"}

package/development/autocomplete-grid/autocomplete-grid.js

@@ -0,0 +1,5 @@
+import { SbbAutocompleteGridElement } from "./autocomplete-grid/autocomplete-grid.component.js";
+export {
+  SbbAutocompleteGridElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWdyaWQuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

package/development/autocomplete-grid.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @entrypoint
+ */
+export * from './autocomplete-grid/autocomplete-grid.ts';
+export * from './autocomplete-grid/autocomplete-grid-button.ts';
+export * from './autocomplete-grid/autocomplete-grid-cell.ts';
+export * from './autocomplete-grid/autocomplete-grid-optgroup.ts';
+export * from './autocomplete-grid/autocomplete-grid-option.ts';
+export * from './autocomplete-grid/autocomplete-grid-row.ts';
+//# sourceMappingURL=autocomplete-grid.d.ts.map

package/development/autocomplete-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/autocomplete-grid.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0CAA0C,CAAC;AACzD,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mDAAmD,CAAC;AAClE,cAAc,iDAAiD,CAAC;AAChE,cAAc,8CAA8C,CAAC"}

package/development/autocomplete-grid.js

@@ -0,0 +1,16 @@
+import { SbbAutocompleteGridElement } from "./autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js";
+import { SbbAutocompleteGridButtonElement } from "./autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js";
+import { SbbAutocompleteGridCellElement } from "./autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js";
+import { SbbAutocompleteGridOptgroupElement } from "./autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js";
+import { SbbAutocompleteGridOptionElement, autocompleteGridOptionId } from "./autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js";
+import { SbbAutocompleteGridRowElement } from "./autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js";
+export {
+  SbbAutocompleteGridButtonElement,
+  SbbAutocompleteGridCellElement,
+  SbbAutocompleteGridElement,
+  SbbAutocompleteGridOptgroupElement,
+  SbbAutocompleteGridOptionElement,
+  SbbAutocompleteGridRowElement,
+  autocompleteGridOptionId
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLWdyaWQuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7In0=

package/development/core/datetime/date-helper.d.ts

@@ -0,0 +1,27 @@
+/**
+ * This function removes the offset of a ISO date string. This needs to be done to make sure that the offset is ignored.
+ * If it is not removed the time would be converted to the browsers local time.
+ * Example: "2022-08-29T09:30:00+03:00" would be changed to "2022-08-29T08:30:00+02:00" --> not the desired outcome, as we want to use the time in the timezone and not the local time.
+ *
+ * After the offset is removed a new date is created in the browsers local time. This ensures that the time of the ISO date string is displayed and not a converted time.
+ * Example: "2022-08-29T09:30:00+03:00" would be changed to "2022-08-29T09:30:00+02:00" --> desired outcome
+ * Attention: This function does not convert the time to the correct time in the local timezone. It is a workaround to make sure, that the given time is displayed without being converted.
+ *
+ * Offset: Difference between the timezone and Coordinated Universal Time.
+ *
+ * @param isoTime - the iso time with the timezone offset
+ * @returns a new date with the local timezone with the local offset
+ */
+export declare function removeTimezoneFromISOTimeString(isoTime?: string): Date | undefined;
+/**
+ * This function converts a duration number to date string with specific format
+ *
+ * @param duration - duration in minutes
+ * @param currentLanguage - currentLanguage
+ * @returns an Object with two strings in the format "dd hh mm" (short) an "x Day(s) x Hour(s) x Minute(s) (long)"
+ * */
+export declare const durationToTime: (duration: number, currentLanguage?: string) => {
+    short: string;
+    long: string;
+};
+//# sourceMappingURL=date-helper.d.ts.map

package/development/core/datetime/date-helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-helper.d.ts","sourceRoot":"","sources":["../../../../../src/elements-experimental/core/datetime/date-helper.ts"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,+BAA+B,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAsBlF;AAED;;;;;;KAMK;AAEL,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,kBAAkB,MAAM,KACvB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAuD/B,CAAC"}