@cupra/ui-kit 1.0.0-canary.1 → 1.0.0-canary.11

package/dist-react/components/ds-search/styles/common.styles.js

@@ -0,0 +1,61 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = t`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .error-text,
+    .helper-text {
+        user-select: none;
+    }
+`, s = t`
+    .container {
+        position: relative;
+    }
+`, l = t`
+    .input-field::-webkit-search-decoration,
+    .input-field::-webkit-search-cancel-button,
+    .input-field::-webkit-search-results-button,
+    .input-field::-webkit-search-results-decoration,
+    .input-field::-webkit-inner-spin-button,
+    .input-field::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+
+    .input-field {
+        box-sizing: border-box;
+        width: 100%;
+        border: none;
+        outline: none;
+        background-color: transparent;
+    }
+
+    .input-field:focus {
+        outline: none;
+    }
+`, c = t`
+    .helper-text {
+        cursor: pointer;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+`, p = t`
+    .input-container {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        position: relative;
+    }
+`;
+export {
+  r as commonStyles,
+  s as containerStyles,
+  c as helperTextStyles,
+  p as inputContainerStyles,
+  l as inputFieldStyles
+};

package/dist-react/components/ds-search-input/ds-search-input.js

@@ -0,0 +1,158 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
+import { inputStatesMixin as v } from "../../mixins/inputStatesMixin.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { validateMaxLength as f } from "../../utils/validateMaxLength.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l, nothing as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as g } from "./styles/common.styles.js";
+var y = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, e, o, a) => {
+  for (var s = a > 1 ? void 0 : a ? E(e, o) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (s = (a ? u(e, o, s) : u(s)) || s);
+  return a && s && y(e, o, s), s;
+};
+let i = class extends v(d) {
+  constructor() {
+    super(...arguments), this.size = "medium", this.variant = "primary", this.loading = !1, this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.dataAriaLabelPositionButton = "", this.withPositionButton = !0, this.handleRemove = () => {
+      this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
+        (t) => this.nativeInput.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
+      );
+    }, this.handleClickPositionButton = () => {
+      this.dispatchEvent(
+        new Event("ds-search-input:click-position-button", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  get classes() {
+    return {
+      container: !0,
+      error: !!this.forcedError,
+      loading: this.loading,
+      [this.size]: !!this.size,
+      [this.variant]: !!this.variant,
+      disabled: this.inputStates.disabled,
+      filled: this.inputStates.filled,
+      invalid: this.inputStates.invalid,
+      focus: this.inputStates.focus,
+      "focus-visible": this.inputStates.focusVisible
+    };
+  }
+  render() {
+    return l`
+            <div part="container" class=${b(this.classes)}>
+                <div part="input-container" class="input-container">
+                    ${this.searchIconTemplate}
+                    <slot></slot>
+                    <span class="buttons-container">
+                        ${this.removeTemplate}
+                        ${this.positionTemplate}
+                        ${this.loaderSpinnerTemplate}
+                    </span>
+                </div>
+                ${this.footerTemplate}
+            </div>
+        `;
+  }
+  get searchIconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": "magnifying-glass",
+      variant: "standard"
+    });
+  }
+  get removeTemplate() {
+    var t, e, o;
+    return !((e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length) || this.loading ? p : this.componentFactory.createIconButton({
+      class: "remove-icon-button",
+      "icon-name": "cross",
+      disabled: !!((o = this.nativeInput) != null && o.disabled),
+      size: this.size,
+      variant: "standard",
+      "@click": this.handleRemove,
+      "data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
+    });
+  }
+  get positionTemplate() {
+    var t;
+    return this.loading || !this.withPositionButton ? p : this.componentFactory.createIconButton({
+      class: "position-icon-button",
+      "icon-name": "position",
+      disabled: !!((t = this.nativeInput) != null && t.disabled),
+      size: this.size,
+      variant: "standard",
+      "@click": this.handleClickPositionButton,
+      "data-aria-label": this.dataAriaLabelPositionButton || "position button"
+    });
+  }
+  get loaderSpinnerTemplate() {
+    return this.componentFactory.createLoaderSpinner({
+      show: this.loading
+    });
+  }
+  get footerTemplate() {
+    var t, e;
+    return !((t = this.helperText) != null && t.length) && !this.forcedError && (!this.inputStates.invalid || !this.invalidError) && Number((e = this.nativeInput) == null ? void 0 : e.maxLength) < 0 ? p : l`
+            <div class="footer">
+                ${this.helperTextTemplate}
+                ${this.forcedErrorTemplate}
+                ${this.invalidErrorTemplate}
+                ${this.lengthTemplate}
+            </div>
+        `;
+  }
+  get helperTextTemplate() {
+    var t;
+    return this.forcedError || this.inputStates.invalid && this.invalidError || !((t = this.helperText) != null && t.length) ? p : l`<span class="support-text helper-text">${this.helperText}</span>`;
+  }
+  get forcedErrorTemplate() {
+    return this.forcedError ? l`<span class="support-text error-text forced-error">${this.forcedError}</span>` : p;
+  }
+  get invalidErrorTemplate() {
+    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? p : l`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+  }
+  get lengthTemplate() {
+    var e, o, a;
+    const t = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
+    return f(t) ? l`<span class="char-counter">${((a = this.inputStates.currentValue) == null ? void 0 : a.length) || 0}/${t}</span>` : p;
+  }
+};
+i.styles = [g];
+r([
+  n({ type: String })
+], i.prototype, "size", 2);
+r([
+  n({ type: String })
+], i.prototype, "variant", 2);
+r([
+  n({ type: Boolean, converter: c })
+], i.prototype, "loading", 2);
+r([
+  n({ type: String, attribute: "helper-text" })
+], i.prototype, "helperText", 2);
+r([
+  n({ type: String, attribute: "forced-error" })
+], i.prototype, "forcedError", 2);
+r([
+  n({ type: String, attribute: "invalid-error" })
+], i.prototype, "invalidError", 2);
+r([
+  n({ type: String, attribute: "data-aria-label-remove-button" })
+], i.prototype, "dataAriaLabelRemoveButton", 2);
+r([
+  n({ type: String, attribute: "data-aria-label-position-button" })
+], i.prototype, "dataAriaLabelPositionButton", 2);
+r([
+  n({ type: Boolean, converter: c, attribute: "with-position-button" })
+], i.prototype, "withPositionButton", 2);
+i = r([
+  m("ds-search-input")
+], i);
+export {
+  i as DsSearchInput
+};

package/dist-react/components/ds-search-input/styles/common.styles.js

@@ -0,0 +1,12 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const p = o`
+    :host {
+        display: contents;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist-react/components/ds-secondary-navigation/ds-secondary-navigation.js

@@ -0,0 +1,233 @@
+import { UiKitElement as v } from "../base/UiKitElement.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as w } from "../../mixins/ViewportMixin.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a, nothing as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as g } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as x } from "./styles/common.styles.js";
+var I = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? C(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (i = (n ? c(t, s, i) : c(i)) || i);
+  return n && i && I(t, s, i), i;
+};
+let o = class extends w(v) {
+  constructor() {
+    super(...arguments), this.dropdownButtonText = "Menu", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
+      this.handleScroll();
+    }), this.handleScroll = () => {
+      var t, s, n, i;
+      const e = ((t = this.itemsContainer) == null ? void 0 : t.scrollLeft) + ((s = this.itemsContainer) == null ? void 0 : s.clientWidth);
+      this.hasScrollLeft = ((n = this.itemsContainer) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = e < ((i = this.itemsContainer) == null ? void 0 : i.scrollWidth);
+    };
+  }
+  updated(e) {
+    super.updated(e), e.has("viewport") && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
+  }
+  firstUpdated(e) {
+    var t;
+    super.firstUpdated(e), this.handleScroll(), this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), (t = this.itemsContainer) == null || t.addEventListener("scroll", this.handleScroll);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
+  }
+  get selectedItemText() {
+    var e, t, s;
+    return ((s = (t = (e = this.items) == null ? void 0 : e[this.selectedIndex]) == null ? void 0 : t.textContent) == null ? void 0 : s.trim()) || this.dropdownButtonText;
+  }
+  get classes() {
+    return {
+      nav: !0,
+      "ds-blur": !0,
+      "scroll-left": this.hasScrollLeft,
+      "scroll-right": this.hasScrollRight
+    };
+  }
+  toggleItemsDropdown() {
+    this.openItems = !this.openItems, this.openItems && (this.openCtas = !1);
+  }
+  toggleActionsDropdown() {
+    this.openCtas = !this.openCtas, this.openCtas && (this.openItems = !1);
+  }
+  closeDropdowns() {
+    this.openItems = !1, this.openCtas = !1;
+  }
+  handleItemsSlotChange() {
+    this.updateSelectedItem();
+  }
+  handleActionsSlotChange() {
+    this.updateCtas();
+  }
+  updateSelectedItem() {
+    var e;
+    (e = this.items) == null || e.forEach((t, s) => {
+      s === this.selectedIndex ? t.classList.add("selected") : t.classList.remove("selected");
+    });
+  }
+  updateCtas() {
+    var e;
+    (e = this.ctas) == null || e.forEach((t) => {
+      ["xxl", "xl"].includes(this.viewport) ? t == null || t.setAttribute("size", "large") : t == null || t.setAttribute("size", "medium");
+    });
+  }
+  handleItemClick(e) {
+    var n, i;
+    const t = e.target, s = ((n = this.items) == null ? void 0 : n.indexOf(t)) ?? -1;
+    if (s !== -1) {
+      this.selectedIndex = s, this.updateSelectedItem();
+      const d = ((i = t.textContent) == null ? void 0 : i.trim()) || t.getAttribute("data-label") || "";
+      this.dispatchEvent(
+        new CustomEvent("ds-secondary-navigation:select", {
+          detail: {
+            index: s,
+            label: d
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.closeDropdowns();
+    }
+  }
+  render() {
+    return a`
+            ${this.backdropTemplate}
+            <div class="container gutter">
+                <nav data-testid="ds-secondary-navigation-container" class=${h(this.classes)}>
+                    ${this.itemsTemplate}
+                    ${this.itemsDropdownButtonTemplate}
+                    ${this.actionsTemplate}
+                    ${this.actionsDropdownButtonTemplate}
+                </nav>
+                ${this.itemsDropdownTemplate}
+                ${this.actionsDropdownTemplate}
+            </div>
+        `;
+  }
+  get itemsTemplate() {
+    return ["l", "xl", "xxl"].includes(this.viewport) ? a`
+            <div class="items-container">
+                <div>
+                    <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
+                </div>
+            </div>
+        ` : l;
+  }
+  get actionsTemplate() {
+    return ["m", "l", "xl", "xxl"].includes(this.viewport) ? a`
+            <div class="actions-container">
+                <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+            </div>
+        ` : l;
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.openItems ? "arrow-up" : "arrow-down",
+      size: 20
+    });
+  }
+  get itemsDropdownButtonTemplate() {
+    return ["xxs", "xs", "s", "m"].includes(this.viewport) ? a`
+            <button
+                class="items-dropdown-button"
+                @click=${this.toggleItemsDropdown}
+                aria-expanded=${this.openItems}
+                aria-haspopup="true"
+            >
+                <span>${this.selectedItemText}</span>
+                ${this.iconTemplate}
+            </button>
+        ` : l;
+  }
+  get itemsDropdownTemplate() {
+    return ["xxs", "xs", "s", "m"].includes(this.viewport) ? a`
+            <div
+                class=${h({
+      gutter: !0,
+      "dropdown-container": !0,
+      "items-dropdown": !0,
+      open: this.openItems
+    })}
+                role="menu"
+                aria-hidden=${!this.openItems}
+            >
+                <div
+                    class="dropdown ds-blur"
+                >
+                    <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
+                </div>
+            </div>
+        ` : l;
+  }
+  get actionsDropdownButtonTemplate() {
+    return ["xxs", "xs", "s"].includes(this.viewport) ? this.componentFactory.createIconButton({
+      class: "nav-arrow",
+      "data-aria-label": "open actions dropdown",
+      "@click": this.toggleActionsDropdown,
+      size: "medium",
+      "icon-name": "triple-dot-v"
+    }) : l;
+  }
+  get actionsDropdownTemplate() {
+    return ["xxs", "xs", "s"].includes(this.viewport) ? a`
+            <div                     
+                class=${h({
+      gutter: !0,
+      "dropdown-container": !0,
+      "actions-dropdown": !0,
+      open: this.openCtas
+    })}                    
+                role="menu"
+                aria-hidden=${!this.openCtas}
+            >
+                <div
+                    class="dropdown ds-blur"
+
+                >
+                    <slot name="actions"></slot>
+                </div>
+            </div>
+        ` : l;
+  }
+  get backdropTemplate() {
+    return !this.openItems && !this.openCtas ? l : a`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
+  }
+};
+o.styles = [x];
+r([
+  m({ type: String, attribute: "dropdown-button-text" })
+], o.prototype, "dropdownButtonText", 2);
+r([
+  m({ type: Number, attribute: "selected-index" })
+], o.prototype, "selectedIndex", 2);
+r([
+  p()
+], o.prototype, "openItems", 2);
+r([
+  p()
+], o.prototype, "openCtas", 2);
+r([
+  p()
+], o.prototype, "hasScrollLeft", 2);
+r([
+  p()
+], o.prototype, "hasScrollRight", 2);
+r([
+  u({ slot: "items" })
+], o.prototype, "items", 2);
+r([
+  u({ slot: "actions" })
+], o.prototype, "ctas", 2);
+r([
+  g(".items-container")
+], o.prototype, "itemsContainer", 2);
+o = r([
+  f("ds-secondary-navigation")
+], o);
+export {
+  o as DsSecondaryNavigation
+};

package/dist-react/components/ds-secondary-navigation/styles/common.styles.js

@@ -0,0 +1,12 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const p = o`
+    :host {
+        display: contents;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist-react/components/ds-segmented-control/ds-segmented-control.js

@@ -0,0 +1,71 @@
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as p } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as g } from "./styles/common.styles.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (t, o, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(o, s) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (e = (r ? n(o, s, e) : n(e)) || e);
+  return r && e && v(o, s, e), e;
+};
+let l = class extends d {
+  constructor() {
+    super(...arguments), this.size = "medium", this.fullWidth = !1;
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !0,
+      "full-width": this.fullWidth
+    };
+  }
+  firstUpdated() {
+    this.addEventListener("change", () => this.updateCheckedStates()), this.addEventListener("focusin", (t) => this.updateFocusState(t, !0)), this.addEventListener("focusout", (t) => this.updateFocusState(t, !1)), this.updateCheckedStates();
+  }
+  updateCheckedStates() {
+    this.slottedElements.forEach((t) => {
+      if (t.tagName === "LABEL") {
+        const o = t, s = this.querySelector(`#${o.htmlFor}`);
+        s && o.classList.toggle("checked", s.checked);
+      }
+    });
+  }
+  updateFocusState(t, o) {
+    const s = t.target, r = s.matches(":focus-visible"), e = this.slottedElements.find(
+      (i) => i.tagName === "LABEL" && i.htmlFor === s.id
+    );
+    e && e.classList.toggle("focused", r);
+  }
+  render() {
+    return m`
+            <fieldset class=${f(this.classes)}>
+                <slot @slotchange=${this.updateCheckedStates}></slot>
+            </fieldset>
+        `;
+  }
+};
+l.styles = [g];
+a([
+  c({ type: String })
+], l.prototype, "size", 2);
+a([
+  c({
+    type: Boolean,
+    converter: p,
+    attribute: "full-width"
+  })
+], l.prototype, "fullWidth", 2);
+a([
+  h({ slot: "", flatten: !0 })
+], l.prototype, "slottedElements", 2);
+l = a([
+  u("ds-segmented-control")
+], l);
+export {
+  l as DsSegmentedControl
+};

package/dist-react/components/ds-segmented-control/styles/common.styles.js

@@ -0,0 +1,56 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const n = t`
+    :host {
+        display: flex;
+        flex: 1 1 auto;
+    }
+
+    .container {
+        display: inline-flex;
+        padding: 0;
+        border: 0;
+        background: gray;
+        border-radius: 2em;
+        flex: 0 0 auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .container.full-width {
+        display: flex;
+    }
+
+    ::slotted(input) {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    ::slotted(label) {
+        cursor: pointer;
+        display: block;
+        align-content: center;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1 1 auto;
+    }
+
+    .full-width ::slotted(label) {
+        flex: 1 1 content;
+    }
+
+    ::slotted(label.checked) {
+        flex-shrink: 0;
+    }
+`;
+export {
+  n as commonStyles
+};

package/dist-react/components/ds-select/controllers/SelectKeyboardController.js

@@ -0,0 +1,33 @@
+const s = class s {
+  static handleKeydownWhenOpen(a, e) {
+    switch (this.KEYS_WHEN_OPEN.has(a.key) && a.preventDefault(), a.key) {
+      case " ":
+      case "Enter":
+        e.commit();
+        break;
+      case "ArrowDown":
+        e.navigateNext();
+        break;
+      case "ArrowUp":
+        e.navigatePrev();
+        break;
+      case "Home":
+        e.navigateFirst();
+        break;
+      case "End":
+        e.navigateLast();
+        break;
+      case "Escape":
+        e.close();
+        break;
+    }
+  }
+  static handleKeydownWhenClosed(a, e) {
+    this.KEYS_WHEN_CLOSED.has(a.key) && (a.preventDefault(), e.open());
+  }
+};
+s.KEYS_WHEN_OPEN = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End", "Enter", "Escape", " "]), s.KEYS_WHEN_CLOSED = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", " "]);
+let t = s;
+export {
+  t as SelectKeyboardController
+};