@cupra/ui-kit 2.0.0-canary.19 → 2.0.0-canary.191

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

@@ -1,12 +1,300 @@
-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`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-secondary-navigation/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
+
+    .ds-blur {
+        position: relative;
+        isolation: isolate;
+        overflow: visible;
+        background: transparent;
+    }
+
+    .ds-blur::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--ui-kit-private-blur-background);
+        backdrop-filter: blur(var(--ui-kit-private-blur-size));
+        border-radius: var(--ui-kit-private-blur-border-radius, inherit);
+        border: var(--ui-kit-private-blur-border, inherit);
+        pointer-events: none;
+        z-index: -1;
+        will-change: filter;
+    }
+
+    :host {
+        --ui-kit-private-secondary-navigation-container-height: 58px;
+    }
+
+    .container {
+        position: relative;
+        margin: 0 auto;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .nav {
+        position: relative;
+        width: 100%;
+        height: var(--ui-kit-private-secondary-navigation-container-height);
+        display: flex;
+        padding: var(--ds-spacing-s-5);
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--ds-spacing-m-1);
+        max-width: 100%;
+        box-sizing: border-box;
+        pointer-events: auto;
+    }
+
+    .nav::before {
+        border-radius: var(--ds-border-radius-s);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        --ui-kit-private-blur-size: 40px;
+    }
+
+    .gutter {
+        padding: 0 var(--ds-spacing-s-5);
+    }
+
+    @media (min-width: 480px) {
+        .gutter {
+            padding: 0 var(--ds-spacing-m-1);
+        }
+    }
+
+    @media (min-width: 768px) {
+        .gutter {
+            padding: 0 var(--ds-spacing-m-2);
+        }
+        .nav {
+            flex-wrap: wrap;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .gutter {
+            padding: 0;
+            max-width: 1375px;
+        }
+        .nav {
+            width: auto;
+            flex-wrap: nowrap;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host {
+            --ui-kit-private-secondary-navigation-container-height: 66px;
+        }
+        .gutter {
+            max-width: 1360px;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        .gutter {
+            max-width: 1824px;
+        }
+    }
+
+    .items-container {
+        flex: 1 1 auto;
+        overflow-x: auto;
+        display: flex;
+        min-width: 0;
+    }
+
+    .scroll-left .items-container {
+        mask-image: linear-gradient(
+            to left,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .scroll-right .items-container {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .scroll-left.scroll-right .items-container {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0.5) 5%,
+            rgba(0, 0, 0, 1) 10%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    .items-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    .items-container div {
+        display: flex;
+        text-transform: var(--ui-kit-secondary-navigation-text-transform);
+    }
+
+    ::slotted([slot='items']) {
+        width: auto;
+        max-width: 300px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        color: var(--ds-color-text-default) !important;
+        text-align: center;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-body-l);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        text-decoration: none;
+        display: inline-flex;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+        align-items: center;
+        border-radius: var(--ds-border-radius-xs);
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        flex: 0 0 auto;
+    }
+
+    ::slotted([slot='items']:hover) {
+        color: var(--ds-color-text-default-subtle);
+    }
+
+    ::slotted([slot='items'].selected) {
+        border: var(--ds-border-width-m) solid var(--ds-color-border-selected-subtle);
+        background: var(--ds-color-surface-container-active);
+        color: var(--ds-color-text-selected-subtle) !important;
+    }
+
+    :host a:-webkit-any-link {
+        all: unset;
+        color: -webkit-link;
+        text-decoration: underline;
+        cursor: auto;
+    }
+
+    @media (min-width: 768px) {
+        ::slotted([slot='items']) {
+            padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+        }
+    }
+
+    @media (min-width: 1440px) {
+        ::slotted([slot='items']) {
+            padding: var(--ds-spacing-m-1);
+        }
+    }
+
+    .actions-container {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-spacing-m-1);
+        flex: 0 0 auto;
+        text-overflow: ellipsis;
+        text-transform: var(--ui-kit-secondary-navigation-text-transform);
+    }
+
+    @media (min-width: 0px) {
+        .nav {
+            gap: var(--ds-spacing-s-4);
+        }
+    }
+
+    .dropdown-container {
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+        z-index: var(--ds-z-index-context-menu);
+        left: 0;
+        bottom: calc(var(--ui-kit-private-secondary-navigation-container-height) + var(--ds-spacing-s-5));
+    }
+
+    .dropdown-container.open {
+        display: flex;
+    }
+
+    .dropdown {
+        width: 100%;
+        display: flex;
+        padding: var(--ds-spacing-s-5);
+        flex-direction: column;
+        gap: var(--ds-spacing-m-1);
+        align-self: stretch;
+        border-radius: var(--ds-border-radius-s);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        max-height: 75dvh;
+        overflow-y: scroll;
+        text-transform: var(--ui-kit-secondary-navigation-text-transform);
+
+        --ui-kit-private-blur-background: var(--ds-color-surface-container-hover);
+        --ui-kit-private-blur-size: 40px;
+    }
+
+    .items-dropdown,
+    .actions-dropdown {
+        pointer-events: auto;
+    }
+
+    .items-dropdown.open .dropdown {
+        align-items: flex-start;
+    }
+
+    .actions-dropdown.open .dropdown {
+        justify-content: flex-end;
+        align-items: flex-end;
+    }
+
+    .dropdown-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .items-dropdown-button {
+        --ui-kit-button-background: var(--ds-dropdown-select-bg-color-default);
+        --ui-kit-button-background-hover: var(--ds-dropdown-select-bg-color-hover);
+        --ui-kit-button-background-focus: var(--ds-dropdown-select-bg-color-focus);
+        --ui-kit-button-background-active: var(--ds-dropdown-select-bg-color-pressed);
+        --ui-kit-button-color: var(--ds-dropdown-select-text-color-input-default);
+        --ui-kit-button-color-hover: var(--ds-icon-button-icon-color-secondary-hover);
+        --ui-kit-button-border-color: var(--ds-dropdown-select-border-color-default);
+        --ui-kit-button-border-color-hover: var(--ds-icon-button-border-color-secondary-hover);
+        --ui-kit-button-border-color-active: var(--ds-dropdown-select-border-color-pressed);
+        --ui-kit-button-border-width: var(--ds-border-width-m);
+        --ui-kit-button-font-weight: var(--ds-typography-weight-body-primary);
+        --ui-kit-button-text-transform: none;
+    }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -1,71 +1,56 @@
-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)}>
+import { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { o as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { commonStyles as c } from "./styles/common.styles.js";
+//#region src/components/ds-segmented-control/ds-segmented-control.ts
+var l, u = (l = class extends i {
+	constructor(...e) {
+		super(...e), 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", (e) => this.updateFocusState(e, !0)), this.addEventListener("focusout", (e) => this.updateFocusState(e, !1)), this.updateCheckedStates();
+	}
+	updateCheckedStates() {
+		this.slottedElements.forEach((e) => {
+			if (e.tagName === "LABEL") {
+				let t = e, n = this.querySelector(`#${t.htmlFor}`);
+				n && t.classList.toggle("checked", n.checked);
+			}
+		});
+	}
+	updateFocusState(e, t) {
+		let n = e.target, r = n.matches(":focus-visible"), i = this.slottedElements.find((e) => e.tagName === "LABEL" && e.htmlFor === n.id);
+		i && i.classList.toggle("focused", r);
+	}
+	render() {
+		return e`
+            <fieldset class=${s(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
-};
+	}
+}, l.styles = [c], l);
+r([t({ type: String })], u.prototype, "size", void 0), r([t({
+	type: Boolean,
+	converter: o,
+	attribute: "full-width"
+})], u.prototype, "fullWidth", void 0), r([n({
+	slot: "",
+	flatten: !0
+})], u.prototype, "slottedElements", void 0), u = r([a("ds-segmented-control")], u);
+//#endregion

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

@@ -1,8 +1,7 @@
-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`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-segmented-control/styles/common.styles.ts
+var t = e`
     :host {
         display: flex;
         flex: 1 1 auto;
@@ -51,6 +50,5 @@ const n = t`
         flex-shrink: 0;
     }
 `;
-export {
-  n as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -1,33 +1,44 @@
-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
+//#region src/components/ds-select/controllers/SelectKeyboardController.ts
+var e, t = class {
+	static handleKeydownWhenOpen(e, t) {
+		switch (this.KEYS_WHEN_OPEN.has(e.key) && e.preventDefault(), e.key) {
+			case " ":
+			case "Enter":
+				t.commit();
+				break;
+			case "ArrowDown":
+				t.navigateNext();
+				break;
+			case "ArrowUp":
+				t.navigatePrev();
+				break;
+			case "Home":
+				t.navigateFirst();
+				break;
+			case "End":
+				t.navigateLast();
+				break;
+			case "Escape":
+				t.close();
+				break;
+		}
+	}
+	static handleKeydownWhenClosed(e, t) {
+		this.KEYS_WHEN_CLOSED.has(e.key) && (e.preventDefault(), t.open());
+	}
 };
+e = t, e.KEYS_WHEN_OPEN = new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End",
+	"Enter",
+	"Escape",
+	" "
+]), e.KEYS_WHEN_CLOSED = new Set([
+	"ArrowDown",
+	"ArrowUp",
+	" "
+]);
+//#endregion
+export { t as SelectKeyboardController };