@cupra/ui-kit 0.2.0-canary.0 → 1.0.0-canary.10

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

@@ -0,0 +1,124 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+import { themeConfig as m } from "./theme-config.js";
+import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as d } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as g } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as h, html as v } 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 b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+var _ = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, a, n) => {
+  for (var s = n > 1 ? void 0 : n ? $(t, a) : t, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (s = (n ? p(t, a, s) : p(s)) || s);
+  return n && s && _(t, a, s), s;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.maxHeight = 300, this.open = !1, this.mode = "light", this.size = "medium", this.disabled = !1, this._open = !1;
+  }
+  async firstUpdated(e) {
+    super.firstUpdated(e), await this.updateComplete, this._open = this.open;
+  }
+  get containerClasses() {
+    return {
+      container: !0,
+      disabled: this.disabled,
+      open: this._open,
+      [this.size]: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get dividerClasses() {
+    return {
+      divider: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get openIconTemplate() {
+    var t;
+    if (!this.theme) return h;
+    const e = (t = m[this.theme]) == null ? void 0 : t["icon-names"];
+    return this.componentFactory.createIcon({
+      class: "icon open-icon",
+      role: "image",
+      "aria-hidden": "true",
+      "icon-name": (e == null ? void 0 : e.open) || "minus"
+    });
+  }
+  get closeIconTemplate() {
+    var t;
+    if (!this.theme) return h;
+    const e = (t = m[this.theme]) == null ? void 0 : t["icon-names"];
+    return this.componentFactory.createIcon({
+      class: "icon close-icon",
+      role: "image",
+      "aria-hidden": "true",
+      "icon-name": (e == null ? void 0 : e.close) || "plus"
+    });
+  }
+  get styleTokens() {
+    return g`
+                <style>
+                    :host{
+                        color-scheme: ${this.mode};
+                        pointer-events: ${this.disabled ? "none" : "visible"};
+                    }
+                </style>
+        `;
+  }
+  handleKeyDown(e) {
+    this.disabled && e.preventDefault();
+  }
+  handleToggle(e) {
+    this._open = e.newState === "open";
+  }
+  render() {
+    return v`
+            ${this.styleTokens}
+
+            <details
+                class=${c(this.containerClasses)}
+                aria-disabled=${!!this.disabled}
+                ?open=${this.open}
+                @keydown=${this.handleKeyDown}
+                @toggle=${this.handleToggle}
+            >
+                <summary class="title">
+                    <slot name="title"></slot>
+                    ${this.openIconTemplate}
+                    ${this.closeIconTemplate}
+                </summary>
+                <slot name="content"></slot>
+            </details>
+            <div class=${c(this.dividerClasses)}></div>
+        `;
+  }
+};
+o.styles = [f];
+i([
+  r({ type: Number, attribute: "max-height" })
+], o.prototype, "maxHeight", 2);
+i([
+  r({ type: Boolean, converter: d, reflect: !0 })
+], o.prototype, "open", 2);
+i([
+  r({ type: String, reflect: !0 })
+], o.prototype, "mode", 2);
+i([
+  r({ type: String })
+], o.prototype, "size", 2);
+i([
+  r({ type: Boolean, converter: d })
+], o.prototype, "disabled", 2);
+i([
+  b()
+], o.prototype, "_open", 2);
+o = i([
+  y("ds-accordion")
+], o);
+export {
+  o as DsAccordion
+};

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

@@ -0,0 +1,64 @@
+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 e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const s = e`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    summary {
+        list-style: none;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
+    summary::marker {
+        content: none;
+    }
+
+    .title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .open .close-icon,
+    .open-icon {
+        display: none;
+    }
+
+    .open .open-icon,
+    .close-icon {
+        display: block;
+    }
+
+    details {
+        @media (prefers-reduced-motion: no-preference) {
+            interpolate-size: allow-keywords;
+        }
+
+        &::details-content {
+            opacity: 0;
+            block-size: 0;
+            overflow-y: clip;
+            transition:
+                content-visibility 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete,
+                opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+                block-size 0.3s cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        &[open]::details-content {
+            opacity: 1;
+            block-size: auto;
+        }
+    }
+`;
+export {
+  s as commonStyles
+};

package/dist-react/components/ds-accordion/theme-config.js

@@ -0,0 +1,26 @@
+const n = {
+  cupra: {
+    "icon-names": {
+      open: "minus",
+      close: "plus"
+    },
+    "icon-button-variant": "secondary"
+  },
+  "cupra-diagonal": {
+    "icon-names": {
+      open: "arrow-up",
+      close: "arrow-down"
+    },
+    "icon-button-variant": "primary"
+  },
+  seat: {
+    "icon-names": {
+      open: "minus",
+      close: "plus"
+    },
+    "icon-button-variant": "secondary"
+  }
+};
+export {
+  n as themeConfig
+};

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

@@ -0,0 +1,102 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as g } 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 d, 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 l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as $ } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { ifDefined as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import { commonStyles as b } from "./styles/common.styles.js";
+var v = Object.defineProperty, I = Object.getOwnPropertyDescriptor, r = (e, s, o, a) => {
+  for (var t = a > 1 ? void 0 : a ? I(s, o) : s, n = e.length - 1, m; n >= 0; n--)
+    (m = e[n]) && (t = (a ? m(s, o, t) : m(t)) || t);
+  return a && t && v(s, o, t), t;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.size = "medium", this.disabled = !1;
+  }
+  get iconTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": "user"
+    });
+  }
+  get initialsTemplate() {
+    const e = this.getInitialsFromName(this.name);
+    return d`<span class="initials" aria-hidden="true">${e}</span>`;
+  }
+  getInitialsFromName(e) {
+    return e ? e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("").toUpperCase() : "";
+  }
+  get classes() {
+    return {
+      container: !0,
+      disabled: this.disabled,
+      [this.size]: !0,
+      [`mode-${this.mode}`]: !0
+    };
+  }
+  get hasImage() {
+    return Array.isArray(this.assignedImages) && this.assignedImages.length > 0;
+  }
+  get mode() {
+    var e;
+    return this.hasImage ? "media" : (e = this.name) != null && e.trim() ? "text" : "icon";
+  }
+  handleSlotChange() {
+    this.requestUpdate();
+  }
+  get styleTokens() {
+    return f`
+            <style>
+                :host{
+                    pointer-events: ${this.disabled ? "none" : "auto"};
+                }
+            </style>
+        `;
+  }
+  handleKeyDown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+  }
+  render() {
+    return d`
+            ${this.styleTokens}
+            <div
+                class=${$(this.classes)}
+                title=${h(this.name)}
+                aria-label=${`Open ${this.name ? this.name + "'s " : ""}profile menu`}
+                aria-disabled=${h(this.disabled ? "true" : void 0)}
+                role="button"
+                tabindex=${this.disabled ? -1 : 0}
+                @keydown=${this.handleKeyDown}
+            >
+                ${this.mode === "icon" ? this.iconTemplate : p}
+                ${this.mode === "text" ? this.initialsTemplate : p}
+                <div class="media" aria-hidden=${String(this.mode !== "media")}><slot name="media" @slotchange=${this.handleSlotChange}></slot></div>
+            </div>
+        `;
+  }
+};
+i.styles = [b];
+r([
+  l({ type: String })
+], i.prototype, "size", 2);
+r([
+  l({ type: String })
+], i.prototype, "name", 2);
+r([
+  l({ type: Boolean, converter: g, reflect: !0 })
+], i.prototype, "disabled", 2);
+r([
+  y({ slot: "media", selector: "img" })
+], i.prototype, "assignedImages", 2);
+i = r([
+  u("ds-avatar")
+], i);
+export {
+  i as DsAvatar
+};

package/dist-react/components/ds-avatar/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-bullets/ds-bullets.js

@@ -0,0 +1,79 @@
+import { UiKitElement as a } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as b } 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 p, nothing as d } 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 c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as v } from "./styles/common.styles.js";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, t, l, i) => {
+  for (var s = i > 1 ? void 0 : i ? y(t, l) : t, u = e.length - 1, m; u >= 0; u--)
+    (m = e[u]) && (s = (i ? m(t, l, s) : m(s)) || s);
+  return i && s && f(t, l, s), s;
+};
+let r = class extends a {
+  constructor() {
+    super(...arguments), this.mode = "light", this.activeBulletIndex = 0, this.handleClickChunk = (e) => () => {
+      this.activeBulletIndex !== e && (this.activeBulletIndex = e, this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            index: e
+          }
+        })
+      ));
+    };
+  }
+  get bulletsTemplate() {
+    const e = [];
+    for (let t = 0; t < this.bulletsNumber; t++) {
+      const l = {
+        bullet: !0,
+        active: t === this.activeBulletIndex
+      };
+      e.push(p`
+                <div @click=${this.handleClickChunk(t)} class=${c(l)}></div>
+            `);
+    }
+    return e;
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.mode]: !0
+    };
+  }
+  get styleTokens() {
+    return b`
+                <style>
+                    :host{
+                        color-scheme: ${this.mode};
+                    }
+                </style>
+        `;
+  }
+  render() {
+    return this.bulletsNumber > 0 ? p`
+                  ${this.styleTokens}
+                  <div class=${c(this.classes)}>${this.bulletsTemplate}</div>
+              ` : d;
+  }
+};
+r.styles = [v];
+o([
+  n({ type: String, reflect: !0 })
+], r.prototype, "mode", 2);
+o([
+  n({ type: Number, attribute: "bullets-number" })
+], r.prototype, "bulletsNumber", 2);
+o([
+  n({ type: Number, attribute: "active-bullet-index", reflect: !0 })
+], r.prototype, "activeBulletIndex", 2);
+r = o([
+  h("ds-bullets")
+], r);
+export {
+  r as DsBullets
+};

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

@@ -0,0 +1,26 @@
+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 l = o`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .container {
+        display: flex;
+    }
+
+    .bullet {
+        cursor: pointer;
+        background-clip: content-box;
+    }
+
+    .bullet.active {
+        cursor: auto;
+    }
+`;
+export {
+  l as commonStyles
+};

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

@@ -0,0 +1,196 @@
+import { UiKitElement as f } from "../base/UiKitElement.js";
+import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as g } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as a } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as b } from "../../utils/htmlWithTokens.js";
+import { objectConverter as v } from "../../utils/objectConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as u, html as o } 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 s } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as $ } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { choose as T } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { when as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { buttonStyles as S, textStyles as P, loadingDotsStyles as w } from "./styles/common.styles.js";
+var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (i, n, h, l) => {
+  for (var r = l > 1 ? void 0 : l ? x(n, h) : n, c = i.length - 1, m; c >= 0; c--)
+    (m = i[c]) && (r = (l ? m(n, h, r) : m(r)) || r);
+  return l && r && C(n, h, r), r;
+};
+let t = class extends g(f) {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
+  }
+  firstUpdated() {
+    this.closestForm = this.closest("form");
+  }
+  get classes() {
+    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
+    return {
+      button: !0,
+      custom: this.htmlTagName === "custom",
+      [i]: !!i,
+      [this.mode]: !!this.mode,
+      [this.variant]: !!this.variant,
+      rounded: this.rounded,
+      disabled: this.disabled || this.loading,
+      destructive: this.destructive,
+      "full-width": this.fullWidth
+    };
+  }
+  handleClick(i) {
+    if (this.href || i.preventDefault(), this.closestForm && this.type === "submit") {
+      const n = new Event("submit", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      });
+      this.closestForm.dispatchEvent(n);
+    }
+  }
+  get iconTemplate() {
+    return this.iconName ? this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName
+    }) : u;
+  }
+  get loadingTemplate() {
+    return this.loading ? o`
+            <span class="loading-dots">
+                <span>.</span>
+                <span>.</span>
+                <span>.</span>
+            </span>
+        ` : u;
+  }
+  get cssTokens() {
+    return b`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.loading || this.disabled ? "none" : "visible"};
+                }
+
+                :host:has(::slotted(*:disabled)){
+                    pointer-events: none;
+                }
+            </style>`;
+  }
+  render() {
+    return o`
+            ${this.cssTokens}
+            ${T(this.htmlTagName || "button", [
+      [
+        "button",
+        () => {
+          var i;
+          return o`
+                        <button
+                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
+                            class=${d(this.classes)}
+                            type=${this.type}
+                            @click=${this.handleClick}
+                            ?disabled=${this.disabled}
+                        >
+                            ${p(this.iconPosition === "left", () => o` ${this.iconTemplate} `)}
+                            <span class="container">
+                                <slot></slot>
+                                ${this.loadingTemplate}
+                            </span>
+                            ${p(this.iconPosition === "right", () => o` ${this.iconTemplate} `)}
+                        </button>
+                    `;
+        }
+      ],
+      [
+        "a",
+        () => {
+          var i;
+          return o`
+                        <a
+                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
+                            class=${d(this.classes)}
+                            href=${this.href}
+                            rel=${this.rel}
+                            target=${this.target}
+                            @click=${this.handleClick}
+                            ?disabled=${this.disabled}
+                        >
+                            ${p(this.iconPosition === "left", () => o`${this.iconTemplate}`)}
+                            <span class="container">
+                                <slot></slot>
+                                ${this.loadingTemplate}
+                            </span>
+                            ${p(this.iconPosition === "right", () => o`${this.iconTemplate}`)}
+                        </a>
+                    `;
+        }
+      ],
+      [
+        "custom",
+        () => o`
+                        <div class=${d(this.classes)}>
+                            <slot></slot>
+                        </div>
+                    `
+      ]
+    ])}
+        `;
+  }
+};
+t.styles = [S, P, w];
+e([
+  s({ type: String })
+], t.prototype, "variant", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+e([
+  s({ type: String, converter: v })
+], t.prototype, "size", 2);
+e([
+  s({ type: Boolean, converter: a })
+], t.prototype, "disabled", 2);
+e([
+  s({ type: Boolean, converter: a })
+], t.prototype, "destructive", 2);
+e([
+  s({ type: String, attribute: "icon-name" })
+], t.prototype, "iconName", 2);
+e([
+  s({ type: String, attribute: "html-tag-name" })
+], t.prototype, "htmlTagName", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "href", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "rel", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "target", 2);
+e([
+  s({ type: String })
+], t.prototype, "type", 2);
+e([
+  s({ type: String, attribute: "icon-position" })
+], t.prototype, "iconPosition", 2);
+e([
+  s({ type: Boolean, converter: a })
+], t.prototype, "rounded", 2);
+e([
+  s({ type: Boolean, converter: a, attribute: "full-width" })
+], t.prototype, "fullWidth", 2);
+e([
+  s({ type: Boolean, converter: a })
+], t.prototype, "loading", 2);
+e([
+  $()
+], t.prototype, "closestForm", 2);
+t = e([
+  y("ds-button")
+], t);
+export {
+  t as DsButton
+};

package/dist-react/components/ds-button/ds-button.types.d.ts

@@ -19,15 +19,13 @@ type CustomElement = {
     target?: never;
 };
 type HtmlElement = Link | Button | CustomElement;
-type SizeType = 'small' | 'medium' | 'large';
-type ResponsiveSize = SizeType | Record<string, SizeType>;
 export type DsButtonAttrs = {
     variant?: string;
     mode?: 'dark' | 'light';
     disabled?: boolean;
     destructive?: boolean;
     'icon-name'?: DsIconAttrs['icon-name'];
-    size?: ResponsiveSize;
+    size?: 'small' | 'medium' | 'large' | string;
     type?: 'button' | 'submit' | 'reset';
     'icon-position'?: 'left' | 'right';
     'icon-size'?: number;