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

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
+};

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

@@ -0,0 +1,274 @@
+import { UiKitElement as f } from "../base/UiKitElement.js";
+import { customUiKitElement as S } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as d, nothing as y } 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 p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as O } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as v } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { SelectKeyboardController as m } from "./controllers/SelectKeyboardController.js";
+import { commonStyles as b } from "./styles/common.styles.js";
+var x = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (e, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? I(t, i) : t, l = e.length - 1, r; l >= 0; l--)
+    (r = e[l]) && (a = (o ? r(t, i, a) : r(a)) || a);
+  return o && a && x(t, i, a), a;
+};
+let s = class extends f {
+  constructor() {
+    super(...arguments), this.mode = "light", this.size = "medium", this.variant = "primary", this._open = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.activeIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
+      e.forEach((t) => {
+        t.type === "childList" && this.syncNativeOptions();
+      }), this.requestUpdate();
+    }, this.syncNativeOptions = () => {
+      this.nativeOptions = Array.from(this.nativeSelect.options);
+    }, this.handleOpen = () => {
+      this._open = !0, this.activeIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect();
+    }, this.handleClose = () => {
+      this._open = !1;
+    }, this.handleClickDisplaySelect = () => {
+      this._open ? this.handleClose() : this.handleOpen();
+    }, this.handleKeydown = (e) => {
+      this._open ? m.handleKeydownWhenOpen(e, {
+        commit: () => this.commitSelection(),
+        navigateNext: () => this.advanceSelection(1),
+        navigatePrev: () => this.advanceSelection(-1),
+        navigateFirst: () => this.advanceToFirst(),
+        navigateLast: () => this.advanceToLast(),
+        close: this.handleClose
+      }) : m.handleKeydownWhenClosed(e, {
+        open: this.handleOpen
+      });
+    };
+  }
+  firstUpdated() {
+    this.initializeNativeSelect();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  initializeNativeSelect() {
+    var e, t;
+    this.nativeSelect = (e = this.nativeSelects) == null ? void 0 : e[0], this.nativeLabel = (t = this.nativeLabels) == null ? void 0 : t[0], this.nativeSelect && (this.syncNativeOptions(), this.setupNativeElementsAttributes(), this.setupEventListeners());
+  }
+  handleChangeForcedError() {
+    var e;
+    this.hasForcedError = ((e = this.forcedError) == null ? void 0 : e.length) > 0;
+  }
+  setupNativeElementsAttributes() {
+    this.nativeSelect.setAttribute("aria-hidden", "true"), this.nativeSelect.setAttribute("tabindex", "-1");
+  }
+  setupEventListeners() {
+    this.nativeSelect.addEventListener("change", this.syncNativeOptions), this.observer = new MutationObserver(this.handleMutations), this.observer.observe(this.nativeSelect, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0
+    });
+  }
+  cleanup() {
+    var e, t;
+    (e = this.nativeSelect) == null || e.removeEventListener("change", this.syncNativeOptions), (t = this.observer) == null || t.disconnect();
+  }
+  findSelectedOptionIndex() {
+    var t;
+    const e = this.nativeOptions.findIndex((i) => i.value === this.nativeSelect.value);
+    return (t = this.nativeOptions[e]) != null && t.hidden ? this.nativeOptions.findIndex((i) => !i.hidden) : e;
+  }
+  focusDisplaySelect() {
+    this.updateComplete.then(() => {
+      var e;
+      (e = this.displaySelect) == null || e.focus();
+    });
+  }
+  advanceToFirst() {
+    if (this.nativeOptions.length) {
+      const t = this.nativeOptions.findIndex((i) => !i.hidden);
+      this.advanceSelection(t - this.activeIndex);
+    }
+  }
+  advanceToLast() {
+    if (this.nativeOptions.length) {
+      let t = -1;
+      for (let i = this.nativeOptions.length - 1; i >= 0; i--)
+        if (!this.nativeOptions[i].hidden) {
+          t = i;
+          break;
+        }
+      this.advanceSelection(t - this.activeIndex);
+    }
+  }
+  advanceSelection(e) {
+    const t = this.nativeOptions.length;
+    this.activeIndex = (this.activeIndex + e + t) % t, this.shouldSkipHiddenOption() ? this.advanceSelection(Math.sign(e)) : this.scrollToActive(this.nativeOptions[this.activeIndex]);
+  }
+  shouldSkipHiddenOption() {
+    return this.nativeOptions.some((t) => !t.hidden) && this.nativeOptions[this.activeIndex].hidden;
+  }
+  scrollToActive(e) {
+    var t;
+    (t = e == null ? void 0 : e.scrollIntoView) == null || t.call(e, { block: "nearest" });
+  }
+  commitSelection() {
+    this.handleClose();
+    const e = this.nativeOptions[this.activeIndex];
+    this.nativeSelect && (e != null && e.value) && this.updateNativeSelectValue(e.value);
+  }
+  updateNativeSelectValue(e) {
+    this.nativeSelect.value = e, ["input", "change"].forEach(
+      (t) => this.nativeSelect.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
+    );
+  }
+  get containerClasses() {
+    var e, t, i, o;
+    return {
+      container: !0,
+      open: this._open,
+      disabled: !!((e = this.nativeSelect) != null && e.disabled),
+      filled: !!((i = (t = this.nativeOptions) == null ? void 0 : t.find((a) => a.selected && !a.hidden)) != null && i.selected),
+      invalid: !((o = this.nativeSelect) != null && o.validity.valid),
+      error: this.hasForcedError,
+      [this.size]: !!this.size,
+      [this.mode]: !!this.mode,
+      [this.variant]: !!this.variant
+    };
+  }
+  set open(e) {
+    this._open = e;
+  }
+  get open() {
+    return this._open;
+  }
+  render() {
+    return d`
+            <slot @slotchange=${this.initializeNativeSelect}></slot>
+            <div class=${u(this.containerClasses)}>
+                ${this.displaySelectTemplate}
+                ${this.optionsContainerTemplate}
+                <slot name="helper-text"></slot>
+                <slot name="forced-error" @slotchange=${this.handleChangeForcedError}></slot>
+                <slot name="invalid-error"></slot>
+            </div>
+        `;
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this._open ? "arrow-up" : "arrow-down"
+    });
+  }
+  get displaySelectTemplate() {
+    var i, o, a;
+    const e = this.nativeOptions.find((l) => l.selected), t = (i = Array.from((e == null ? void 0 : e.childNodes) || [])) == null ? void 0 : i.map((l) => {
+      const r = l.cloneNode(!0);
+      if (l.nodeType !== 3)
+        return r;
+      if (l.textContent.trim() === "") return "";
+      const h = document.createElement("span");
+      return h.classList.add("text"), h.appendChild(r), h;
+    });
+    return d`
+            <div class="select-outline">
+                <div class="select-container">
+                    <label id="display-label" class="label">${(o = this.nativeLabel) == null ? void 0 : o.innerText}</label>
+                    <div
+                        class="select"
+                        role="combobox"
+                        tabindex="0"
+                        aria-expanded="${this._open}"
+                        aria-activedescendant="${this.activeDescendantId}"
+                        aria-controls="options-container"
+                        aria-labelledby="display-label"
+                        aria-disabled=${!!((a = this.nativeSelect) != null && a.disabled)}
+                        @click=${this.handleClickDisplaySelect}
+                        @keydown=${this.handleKeydown}
+                        @blur=${this.handleClose}
+                    >
+                        <span class="select-content">${t}</span>
+                        ${this.iconTemplate}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+  get activeDescendantId() {
+    return this._open && this.activeIndex >= 0 ? `${s.ARIA_OPTION_PREFIX}${this.nativeOptions[this.activeIndex].value}` : "";
+  }
+  get optionsContainerTemplate() {
+    return d`
+            <div id="options-container" class="options-container" role="listbox">
+                ${this.nativeOptions.map(
+      (e, t) => e.hidden ? y : this.renderOptionClone(e, t)
+    )}
+            </div>
+        `;
+  }
+  renderOptionClone(e, t) {
+    const i = Array.from(e.childNodes).map((o) => o.cloneNode(!0));
+    return d`
+            <div
+                id="${s.ARIA_OPTION_PREFIX}${e.value}"
+                class=${u({
+      option: !0,
+      active: t === this.activeIndex,
+      selected: e.value === this.nativeSelect.value
+    })}
+                role="option"
+                aria-selected="${e.value === this.nativeSelect.value}"
+                tabindex="-1"
+                @mousedown=${() => {
+      this.activeIndex = t, this.commitSelection();
+    }}
+            >
+                ${i}
+            </div>
+        `;
+  }
+};
+s.styles = [b];
+s.ARIA_OPTION_PREFIX = "option-";
+n([
+  p({ type: String })
+], s.prototype, "mode", 2);
+n([
+  p({ type: String })
+], s.prototype, "size", 2);
+n([
+  p({ type: String })
+], s.prototype, "variant", 2);
+n([
+  c()
+], s.prototype, "_open", 2);
+n([
+  c()
+], s.prototype, "nativeSelect", 2);
+n([
+  c()
+], s.prototype, "nativeLabel", 2);
+n([
+  c()
+], s.prototype, "nativeOptions", 2);
+n([
+  c()
+], s.prototype, "activeIndex", 2);
+n([
+  c()
+], s.prototype, "hasForcedError", 2);
+n([
+  v({ slot: "", selector: "select", flatten: !0 })
+], s.prototype, "nativeSelects", 2);
+n([
+  v({ slot: "", selector: "label", flatten: !0 })
+], s.prototype, "nativeLabels", 2);
+n([
+  v({ slot: "forced-error", flatten: !0 })
+], s.prototype, "forcedError", 2);
+n([
+  O(".select")
+], s.prototype, "displaySelect", 2);
+s = n([
+  S("ds-select")
+], s);
+export {
+  s as DsSelect
+};

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

@@ -0,0 +1,29 @@
+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 i = o`
+    :host {
+        display: contents;
+    }
+
+    ::slotted(:not([slot])) {
+        display: none;
+    }
+
+    .disabled {
+        pointer-events: none;
+    }
+
+    .select,
+    .option {
+        cursor: pointer;
+    }
+
+    .option.selected {
+        pointer-events: none;
+    }
+`;
+export {
+  i as commonStyles
+};

package/dist-react/components/ds-selection/ds-selection.js

@@ -0,0 +1,57 @@
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as m } 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 h } 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 d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 u } from "./styles/common.styles.js";
+var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (n, t, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? k(t, r) : t, o = n.length - 1, i; o >= 0; o--)
+    (i = n[o]) && (e = (s ? i(t, r, e) : i(e)) || e);
+  return s && e && v(t, r, e), e;
+};
+let c = class extends a {
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      size: 40,
+      "icon-name": this.checked ? "check" : "plus"
+    });
+  }
+  get classes() {
+    return {
+      container: !0,
+      checked: this.checked
+    };
+  }
+  handleClick() {
+    this.checked = !this.checked, this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          checked: this.checked
+        }
+      })
+    );
+  }
+  render() {
+    return h`
+            <span data-testid="ds-selection-container" class=${f(this.classes)} @click=${this.handleClick}>
+                ${this.iconTemplate}
+            </span>
+        `;
+  }
+};
+c.styles = [u];
+l([
+  d({ type: Boolean, converter: m })
+], c.prototype, "checked", 2);
+c = l([
+  p("ds-selection")
+], c);
+export {
+  c as DsSelection
+};

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

@@ -0,0 +1,17 @@
+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 s = o`
+    :host {
+        display: inline-block;
+    }
+
+    .container {
+        display: inline-block;
+        cursor: pointer;
+    }
+`;
+export {
+  s as commonStyles
+};

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

@@ -0,0 +1,102 @@
+import { UiKitElement as m } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html 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 { state as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.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 u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (t, e, a, o) => {
+  for (var s = o > 1 ? void 0 : o ? v(e, a) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (s = (o ? n(e, a, s) : n(s)) || s);
+  return o && s && g(e, a, s), s;
+};
+let i = class extends m {
+  constructor() {
+    super(...arguments), this.open = !1, this.toggleModal = () => {
+      this.open = !this.open;
+    }, this.handleSlotChange = (t) => {
+      const o = t.target.assignedElements().find((s) => s.tagName === "DS-BUTTON");
+      this.setMainCtaSize(o);
+    }, this.setMainCtaSize = (t) => {
+      t && t.setAttribute(
+        "size",
+        JSON.stringify({
+          xxl: "large",
+          xl: "large",
+          l: "medium",
+          m: "medium",
+          s: "small",
+          xs: "small",
+          xxs: "small"
+        })
+      );
+    };
+  }
+  firstUpdated(t) {
+    var a;
+    super.firstUpdated(t);
+    const e = (a = this.mainCtas) == null ? void 0 : a[0];
+    e && this.setMainCtaSize(e);
+  }
+  modalButtonTemplate() {
+    return this.componentFactory.createIconButton({
+      class: "modal-button",
+      "icon-name": this.open ? "cross" : "triple-dot-v",
+      "@click": this.toggleModal,
+      "data-testid": "modal-button",
+      "data-aria-label": "more actions",
+      size: JSON.stringify({
+        xxl: "large",
+        xl: "large",
+        l: "medium",
+        m: "medium",
+        s: "small",
+        xs: "small",
+        xxs: "small"
+      })
+    });
+  }
+  classes() {
+    return {
+      container: !0,
+      open: this.open
+    };
+  }
+  render() {
+    return c`
+      <div class=${u(this.classes())}>
+        <nav class="nav" part="bar">
+          <div class="aside" part="aside">
+            <slot name="aside-text"></slot>
+            <span class="helper-text-container">
+                <slot name="aside-icon"></slot>
+                <slot name="aside-helper-text"></slot>
+            </span>
+          </div>
+          <div class="actions-container" part="actions-container">
+            <slot name="main-cta" @slotchange=${this.handleSlotChange}></slot>
+            ${this.modalButtonTemplate()}
+          </div>
+        </nav>
+          <div part="modal" class="modal">
+              <slot name="ctas"></slot>
+          </div>
+      </div>
+    `;
+  }
+};
+i.styles = [f];
+r([
+  d()
+], i.prototype, "open", 2);
+r([
+  h({ slot: "main-cta", selector: "ds-button", flatten: !0 })
+], i.prototype, "mainCtas", 2);
+i = r([
+  p("ds-sidebar-navigation")
+], i);
+export {
+  i as DsSidebarNavigation
+};

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

@@ -0,0 +1,25 @@
+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 r = o`
+    :host {
+        display: contents;
+    }
+
+    .container {
+        width: 100%;
+    }
+
+    .nav {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        display: flex;
+        box-sizing: border-box;
+    }
+`;
+export {
+  r as commonStyles
+};