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

package/dist-react/esm/components/ds-toast-message/styles/common.styles.js

@@ -1,12 +1,146 @@
-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`
+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-toast-message/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
+
+    .container {
+        display: inline-flex;
+        box-sizing: border-box;
+        flex-direction: row;
+        width: auto;
+        min-width: 288px;
+        max-width: 317px;
+        padding: var(--ds-spacing-m-1);
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-m);
+        border-width: var(--ds-border-width-l);
+        border-style: solid;
+        border-color: var(--ds-color-border-selected);
+        background: var(--ds-card-bg-color-default);
+        box-shadow: 0px 4px 4px 0px var(--ds-opacity-black-20);
+        backdrop-filter: blur(60px);
+    }
+
+    .container.warning {
+        border-color: var(--ds-color-border-feedback-warning);
+    }
+
+    .container.info {
+        border-color: var(--ds-color-border-feedback-info);
+    }
+
+    .container.error {
+        border-color: var(--ds-color-border-feedback-error);
+    }
+
+    .container.success {
+        border-color: var(--ds-color-border-feedback-success);
+    }
+
+    .icon {
+        --ui-kit-icon-color: var(--ds-color-border-selected);
+    }
+
+    .container.warning .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-warning);
+    }
+
+    .container.info .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-info);
+    }
+
+    .container.error .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-error);
+    }
+
+    .container.success .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-success);
+    }
+
+    .content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        align-self: stretch;
+    }
+
+    .header {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+        align-self: stretch;
+    }
+
+    .title {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-headline-xs);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-headline-xs);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+
+    .message {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 350;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        text-align: left;
+    }
+
+    @media (min-width: 480px) {
+        .container {
+            min-width: 318px;
+            max-width: 456px;
+        }
+    }
+
+    @media (min-width: 768px) {
+        .container {
+            min-width: 457px;
+            max-width: 463px;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .container {
+            min-width: 464px;
+            max-width: 547px;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .container {
+            min-width: 548px;
+            max-width: 575px;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        .container {
+            min-width: 576px;
+            max-width: 732px;
+        }
+    }
 `;
-export {
-  r as toastMessageStyles
-};
+//#endregion
+export { t as toastMessageStyles };

package/dist-react/esm/components/ds-toggle-button/ds-toggle-button.js

@@ -1,38 +1,32 @@
-import { DsButton as u } from "../ds-button/ds-button.js";
-import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as l } 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 a } 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 { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { when as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-var k = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (e, i, n, r) => {
-  for (var t = r > 1 ? void 0 : r ? f(i, n) : i, h = e.length - 1, p; h >= 0; h--)
-    (p = e[h]) && (t = (r ? p(i, n, t) : p(t)) || t);
-  return r && t && k(i, n, t), t;
-};
-let s = class extends u {
-  constructor() {
-    super(...arguments), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
-  }
-  updated(e) {
-    super.updated(e), this.iconName = this.checked ? "minus" : "plus", this.variant = this.checked ? "primary" : "secondary";
-  }
-  handleClick() {
-    this.checked = !this.checked, this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          checked: this.checked
-        }
-      })
-    );
-  }
-  render() {
-    var e;
-    return a`
+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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as i } from "../../utils/booleanConverter.js";
+import { e as a } 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 { n as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { DsButton as s } from "../ds-button/ds-button.js";
+//#region src/components/ds-toggle-button/ds-toggle-button.ts
+var c = class extends s {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
+	}
+	updated(e) {
+		super.updated(e), this.iconName = this.checked ? "minus" : "plus", this.variant = this.checked ? "primary" : "secondary";
+	}
+	handleClick() {
+		this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { checked: this.checked }
+		}));
+	}
+	render() {
+		var t;
+		return e`
             <style>
                 :host {
                     pointer-events: ${this.disabled ? "none" : "visible"};
@@ -40,34 +34,35 @@ let s = class extends u {
             </style>
             ${this.cssTokens}
             <button
-                aria-label=${(e = this.textContent) == null ? void 0 : e.replace(/^\s+|\s+$/g, "")}
-                class=${b(this.classes)}
+                aria-label=${(t = this.textContent) == null ? void 0 : t.replace(/^\s+|\s+$/g, "")}
+                aria-pressed=${this.checked}
+                class=${a(this.classes)}
                 ?disabled=${this.disabled}
                 type=${this.type}
                 @click=${this.handleClick}
             >
-                ${d(this.iconPosition === "left", () => a`${this.iconTemplate}`)}
+                ${o(this.iconPosition === "left", () => e`${this.iconTemplate}`)}
                 ${this.checked ? this.checkedText : this.uncheckedText}
-                ${d(this.iconPosition === "right", () => a`${this.iconTemplate}`)}
+                ${o(this.iconPosition === "right", () => e`${this.iconTemplate}`)}
             </button>
         `;
-  }
-};
-o([
-  c({ type: Boolean, converter: l, reflect: !0 })
-], s.prototype, "checked", 2);
-o([
-  c({ type: String, attribute: "checked-text" })
-], s.prototype, "checkedText", 2);
-o([
-  c({ type: String, attribute: "unchecked-text" })
-], s.prototype, "uncheckedText", 2);
-o([
-  c({ type: Boolean, converter: l })
-], s.prototype, "rounded", 2);
-s = o([
-  m("ds-toggle-button", { skipTagAsComponentName: !0, extendComponentNames: ["ds-button"] })
-], s);
-export {
-  s as DsToggleButton
+	}
 };
+n([t({
+	type: Boolean,
+	converter: i,
+	reflect: !0
+})], c.prototype, "checked", void 0), n([t({
+	type: String,
+	attribute: "checked-text"
+})], c.prototype, "checkedText", void 0), n([t({
+	type: String,
+	attribute: "unchecked-text"
+})], c.prototype, "uncheckedText", void 0), n([t({
+	type: Boolean,
+	converter: i
+})], c.prototype, "rounded", void 0), c = n([r("ds-toggle-button", {
+	skipTagAsComponentName: !0,
+	extendComponentNames: ["ds-button"]
+})], c);
+//#endregion

package/dist-react/esm/components/ds-toggle-switch/ds-toggle-switch.js

@@ -1,61 +1,66 @@
-import { UiKitElement as d } from "../base/UiKitElement.js";
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as n } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as m } 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 f } 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 b } from "./styles/common.styles.js";
-var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (h, l, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? y(l, o) : l, a = h.length - 1, c; a >= 0; a--)
-    (c = h[a]) && (t = (r ? c(l, o, t) : c(t)) || t);
-  return r && t && k(l, o, t), t;
-};
-let e = class extends d {
-  constructor() {
-    super(...arguments), this.size = "medium", this.checked = !1, this.disabled = !1, this.mode = "light";
-  }
-  handleClick() {
-    this.checked = !this.checked, this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          checked: this.checked
-        }
-      })
-    );
-  }
-  handleClickOff() {
-    this.checked && this.handleClick();
-  }
-  handleClickOn() {
-    this.checked || this.handleClick();
-  }
-  get styleTokens() {
-    return m`
+import "../ds-theme-provider/themeContext.js";
+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 { r as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.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-toggle-switch/ds-toggle-switch.ts
+var l, u = (l = class extends i {
+	constructor(...e) {
+		super(...e), this.size = "medium", this._checked = void 0, this._checkedState = !1, this.disabled = !1, this.mode = "light";
+	}
+	get checked() {
+		return this._checked ?? this._checkedState;
+	}
+	set checked(e) {
+		this._checked = e;
+	}
+	handleClick() {
+		let e = !this.checked;
+		this._checkedState = e, this._checked = void 0, this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { checked: e }
+		}));
+	}
+	handleClickOff(e) {
+		e.stopPropagation(), this.checked && this.handleClick();
+	}
+	handleClickOn(e) {
+		e.stopPropagation(), !this.checked && this.handleClick();
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host {
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  get labelClasses() {
-    return {
-      container: !0,
-      [this.size]: !!this.size,
-      checked: this.checked,
-      disabled: this.disabled,
-      [this.mode]: !!this.mode
-    };
-  }
-  render() {
-    return f`
+	}
+	get labelClasses() {
+		return {
+			container: !0,
+			[this.size]: !!this.size,
+			checked: this.checked,
+			disabled: this.disabled,
+			[this.mode]: !!this.mode
+		};
+	}
+	render() {
+		return e`
             ${this.styleTokens}
-            <div class=${u(this.labelClasses)} @click=${this.handleClick}>
+            <div
+                class=${s(this.labelClasses)}
+                @click=${this.handleClick}
+            >
                 <slot name="off" @click=${this.handleClickOff}></slot>
                 <slot name="label"></slot>
                 <button
@@ -74,27 +79,22 @@ let e = class extends d {
                 <slot name="on" @click=${this.handleClickOn}></slot>
             </div>
         `;
-  }
-};
-e.styles = [b];
-s([
-  i({ type: String })
-], e.prototype, "size", 2);
-s([
-  i({ type: Boolean, converter: n, reflect: !0 })
-], e.prototype, "checked", 2);
-s([
-  i({ type: Boolean, converter: n, reflect: !0 })
-], e.prototype, "disabled", 2);
-s([
-  i({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-s([
-  i({ type: String, attribute: "data-aria-label" })
-], e.prototype, "dataAriaLabel", 2);
-e = s([
-  p("ds-toggle-switch")
-], e);
-export {
-  e as DsToggleSwitch
-};
+	}
+}, l.styles = [c], l);
+r([t({ type: String })], u.prototype, "size", void 0), r([t({
+	type: Boolean,
+	attribute: "checked",
+	converter: o,
+	reflect: !0
+})], u.prototype, "_checked", void 0), r([n()], u.prototype, "_checkedState", void 0), r([t({
+	type: Boolean,
+	converter: o,
+	reflect: !0
+})], u.prototype, "disabled", void 0), r([t({
+	type: String,
+	reflect: !0
+})], u.prototype, "mode", void 0), r([t({
+	type: String,
+	attribute: "data-aria-label"
+})], u.prototype, "dataAriaLabel", void 0), u = r([a("ds-toggle-switch")], u);
+//#endregion

package/dist-react/esm/components/ds-toggle-switch/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 s = 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-toggle-switch/styles/common.styles.ts
+var t = e`
     .container {
         display: flex;
         justify-content: flex-start;
@@ -37,11 +36,14 @@ const s = t`
     .dot {
         border-radius: 100%;
         position: absolute;
-        top: 0;
-        left: 0;
-        transition: left 200ms ease-in-out;
+        top: 50%;
+        transform: translateY(-50%);
+        transition:
+            left 0.3s cubic-bezier(0, 0, 0.2, 1),
+            width 0.3s cubic-bezier(0, 0, 0.2, 1),
+            height 0.3s cubic-bezier(0, 0, 0.2, 1),
+            background-color 0.3s cubic-bezier(0, 0, 0.2, 1);
     }
 `;
-export {
-  s as commonStyles
-};
+//#endregion
+export { t as commonStyles };