@cupra/ui-kit 1.0.0-canary.8 → 1.0.0

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

@@ -0,0 +1,210 @@
+import { UiKitElement as m } from "../base/UiKitElement.js";
+import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
+import { FormAssociatedMixin as v } from "../../mixins/FormAssociatedMixin.js";
+import { booleanConverter as u } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as f } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as o, nothing as c } 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 r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as d } 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 { classMap as T } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as x, containerStyles as b, helperTextStyles as $, inputFieldStyles as S, inputContainerStyles as _ } from "./styles/common.styles.js";
+var C = Object.defineProperty, I = Object.getOwnPropertyDescriptor, t = (s, l, n, a) => {
+  for (var i = a > 1 ? void 0 : a ? I(l, n) : l, p = s.length - 1, h; p >= 0; p--)
+    (h = s[p]) && (i = (a ? h(l, n, i) : h(i)) || i);
+  return a && i && C(l, n, i), i;
+};
+let e = class extends v(m) {
+  constructor() {
+    super(...arguments), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.name = "", this.placeholder = "", this.type = "text", this.focused = !1, this.handleFocus = () => {
+      this.focused = !0;
+    }, this.handleBlur = () => {
+      this.focused = !1;
+    }, this.handleClickClearIcon = () => {
+      this._value = "", this.dispatchEvent(
+        new CustomEvent("ds-search:clear", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.handleInput = (s) => {
+      const l = s.target;
+      this._value = l.value || "";
+    }, this.handleSuccess = (s) => {
+      this.dispatchEvent(
+        new CustomEvent("ds-search:position-success", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            position: s
+          }
+        })
+      );
+    }, this.handleError = (s) => {
+      this.dispatchEvent(
+        new CustomEvent("ds-search:position-error", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            error: s
+          }
+        })
+      );
+    };
+  }
+  firstUpdated() {
+    this._value = this.initialValue;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(s) {
+    this._value = s;
+  }
+  get classes() {
+    return {
+      container: !0,
+      focused: this.focused,
+      error: !!this.errorText,
+      success: this.success,
+      disabled: this.disabled,
+      [this.size]: !0,
+      [this.mode]: !0
+    };
+  }
+  get searchIconTemplate() {
+    return o`
+            ${this.componentFactory.createIcon({
+      class: "search-icon",
+      "icon-name": "magnifying-glass"
+    })}
+        `;
+  }
+  get positionIconTemplate() {
+    return o`
+            ${this.componentFactory.createIcon({
+      class: "position-icon",
+      "icon-name": "position"
+    })}
+        `;
+  }
+  get clearIconTemplate() {
+    return o`
+            ${this.componentFactory.createIcon({
+      class: "clear-icon",
+      "data-testid": "clear-icon",
+      "icon-name": "cross",
+      "@click": this.handleClickClearIcon
+    })}
+        `;
+  }
+  get inputTemplate() {
+    return o`
+            <input
+                class="input-field"
+                type=${this.type}
+                name=${this.name}
+                maxlength=${this.maxLength}
+                .placeholder=${this.placeholder}
+                .value=${this._value}
+                aria-label=${this._value}
+                @focus=${this.handleFocus}
+                @blur=${this.handleBlur}
+                @input=${this.handleInput}
+                ?disabled=${this.disabled}
+            />
+        `;
+  }
+  get helperTextTemplate() {
+    return this.helperText ? o`
+            <div class="helper-text" @click=${this.handleClickHelperText}>
+                ${this.positionIconTemplate}
+                ${this.helperText}
+            </div>
+        ` : c;
+  }
+  get errorTextTemplate() {
+    return this.errorText ? o`<div class="error-text">${this.errorText}</div>` : c;
+  }
+  get styleTokens() {
+    return f`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+        `;
+  }
+  handleClickHelperText() {
+    navigator.geolocation.getCurrentPosition(this.handleSuccess, this.handleError);
+  }
+  render() {
+    return o`
+            ${this.styleTokens}
+            <div class=${T(this.classes)}>
+                <div class="input-container">
+                    ${this.searchIconTemplate}
+                    ${this.inputTemplate}
+                    ${this.clearIconTemplate}
+                </div>
+                ${this.errorTextTemplate}
+                ${this.helperTextTemplate}
+            </div>
+        `;
+  }
+};
+e.styles = [x, b, $, S, _];
+t([
+  r({ type: String, reflect: !0, attribute: "initial-value" })
+], e.prototype, "initialValue", 2);
+t([
+  r({ type: String })
+], e.prototype, "label", 2);
+t([
+  r({ type: String, attribute: "helper-text" })
+], e.prototype, "helperText", 2);
+t([
+  r({ type: String, attribute: "error-text" })
+], e.prototype, "errorText", 2);
+t([
+  r({ type: Boolean, converter: u })
+], e.prototype, "disabled", 2);
+t([
+  r({ type: Boolean, converter: u })
+], e.prototype, "success", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+t([
+  r({ type: String })
+], e.prototype, "size", 2);
+t([
+  r({ type: String })
+], e.prototype, "name", 2);
+t([
+  r({ type: String })
+], e.prototype, "placeholder", 2);
+t([
+  r({ type: String, attribute: "max-length" })
+], e.prototype, "maxLength", 2);
+t([
+  r({ type: String })
+], e.prototype, "type", 2);
+t([
+  d()
+], e.prototype, "_value", 2);
+t([
+  d()
+], e.prototype, "focused", 2);
+t([
+  g(".input-field")
+], e.prototype, "inputField", 2);
+e = t([
+  y("ds-search")
+], e);
+export {
+  e as DsSearch
+};

package/dist/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/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/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/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/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
+};