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

package/README.md

@@ -144,17 +144,19 @@ For optimal behaviour, manually preload the fonts and load the theme CSS via a s
 
 ---
 
-### Option B — Installed via npm in an app build
+### Option B — Installed via npm in an application bundle
 Install the package:
 
 ```bash
 npm install @cupra/ui-kit
 ```
 
-Import the package once so the custom elements are registered:
+Import only the components you will use so their custom elements are registered:
 
 ```js
-import '@cupra/ui-kit';
+import '@cupra/ui-kit/ds-theme-provider';
+import '@cupra/ui-kit/ds-button';
+import '@cupra/ui-kit/ds-icon';
 ```
 
 Then include the theme provider:

package/dist/components/base/DsUiElement.js

@@ -0,0 +1,47 @@
+import { themeContext as n } from "../ds-theme-provider/themeContext.js";
+import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { pubSub as l } from "../../utils/PubSub.js";
+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 { LitElement as c } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { adoptStyles as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.defineProperty, h = (m, e, s, o) => {
+  for (var t = void 0, r = m.length - 1, i; r >= 0; r--)
+    (i = m[r]) && (t = i(e, s, t) || t);
+  return t && f(e, s, t), t;
+};
+class p extends c {
+  constructor() {
+    super(), this.handleChangeTheme = (e) => {
+      this.pubSubTheme = e;
+    }, this.pubSubTheme = l.subscribe("theme", this.handleChangeTheme);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.applyTheme();
+  }
+  updated(e) {
+    super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && (this.theme = this.contextTheme ?? this.pubSubTheme, this.applyTheme());
+  }
+  applyTheme() {
+    var r;
+    const e = this.constructor, s = (r = e.themesStyles) == null ? void 0 : r[this.theme], o = Array.isArray(s) ? s : [s];
+    if (!(o != null && o.length)) return;
+    const t = Array.isArray(e.styles) ? e.styles : [e.styles];
+    y(this.shadowRoot, [...t, ...o].filter(Boolean));
+  }
+}
+h([
+  b({ attribute: !1 }),
+  u({ context: n, subscribe: !0 })
+], p.prototype, "contextTheme");
+h([
+  a()
+], p.prototype, "pubSubTheme");
+h([
+  a()
+], p.prototype, "theme");
+export {
+  p as DsUiElement
+};

package/dist/components/base/UiKitElement.js

@@ -0,0 +1,82 @@
+import { themeContext as m } from "../ds-theme-provider/themeContext.js";
+import { THEME_STORAGE_KEY as d } from "../../core/theme.constants.js";
+import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { pubSub as p } from "../../utils/PubSub.js";
+import { stylesRegistry as S } from "../../utils/StylesRegistry/StylesRegistry.js";
+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 { LitElement as y } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { css as C, adoptStyles as T } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, l = (n, e, t, i) => {
+  for (var o = void 0, a = n.length - 1, s; a >= 0; a--)
+    (s = n[a]) && (o = s(e, t, o) || o);
+  return o && g(e, t, o), o;
+};
+const E = C`:host([unresolved]){visibility:hidden}`, h = class c extends y {
+  constructor() {
+    super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
+      this.pubSubTheme = e;
+    }, this.pubSubTheme = p.subscribe("theme", this.handleChangeTheme);
+  }
+  get theme() {
+    const e = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(d) : null;
+    return this.contextTheme ?? this.pubSubTheme ?? e;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.setAttribute("unresolved", "");
+    const e = this.constructor, t = Array.isArray(e.styles) ? e.styles : [e.styles].filter(Boolean);
+    T(this.shadowRoot, [...t, E]), this.applyThemeStyles();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), p.unsubscribe("theme", this.handleChangeTheme);
+  }
+  updated(e) {
+    super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && this.applyThemeStyles();
+  }
+  getComponentNames() {
+    const e = /* @__PURE__ */ new Set();
+    let t = this.constructor;
+    for (; t && t !== c; )
+      Array.isArray(t.componentName) && t.componentName.forEach((i) => e.add(i)), t = Object.getPrototypeOf(t);
+    return Array.from(e).reverse();
+  }
+  supportsAdoptedSheets() {
+    return "adoptedStyleSheets" in ((ShadowRoot == null ? void 0 : ShadowRoot.prototype) || {}) && "replace" in CSSStyleSheet.prototype;
+  }
+  async applyThemeStyles() {
+    const e = this.getComponentNames();
+    if (!(!this.theme || !(e != null && e.length)))
+      try {
+        const t = await Promise.all(
+          e.map((s) => S.getStyles({ componentName: s, theme: this.theme }))
+        ), i = this.supportsAdoptedSheets(), o = this.shadowRoot.adoptedStyleSheets || [], a = this.appliedConstructables ? o.filter((s) => !this.appliedConstructables.includes(s)) : o;
+        this.appliedConstructables = [], this.appliedStyleTags.forEach((s) => s.remove()), this.appliedStyleTags = [], t.forEach((s) => {
+          if (s)
+            if (i) {
+              const r = new CSSStyleSheet();
+              r.replaceSync(s), this.appliedConstructables.push(r);
+            } else {
+              const r = document.createElement("style");
+              r.textContent = s, this.shadowRoot.appendChild(r), this.appliedStyleTags.push(r);
+            }
+        }), i && (this.shadowRoot.adoptedStyleSheets = [...a, ...this.appliedConstructables]);
+      } catch (t) {
+        console.error(t);
+      } finally {
+        this.removeAttribute("unresolved"), this.requestUpdate();
+      }
+  }
+};
+l([
+  b({ attribute: !1 }),
+  u({ context: m, subscribe: !0 })
+], h.prototype, "contextTheme");
+l([
+  f()
+], h.prototype, "pubSubTheme");
+let N = h;
+export {
+  N as UiKitElement
+};

package/dist/components/base/ds-base-input/ds-base-input.js

@@ -0,0 +1,112 @@
+import { DsUiElement as d } from "../DsUiElement.js";
+import { FormAssociatedMixin as m } from "../../../mixins/FormAssociatedMixin.js";
+import { booleanConverter as n } from "../../../utils/booleanConverter.js";
+import { htmlWithTokens as c } 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 r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as u } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as y } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as v } from "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as x, inputStyles as b } from "./styles/common.styles.js";
+import { cupraStyles as T } from "./styles/cupra.styles.js";
+var g = Object.defineProperty, t = (p, i, a, $) => {
+  for (var s = void 0, l = p.length - 1, h; l >= 0; l--)
+    (h = p[l]) && (s = h(i, a, s) || s);
+  return s && g(i, a, s), s;
+};
+const o = class o extends m(d) {
+  constructor() {
+    super(...arguments), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.focused = !1, this.handleFocus = () => {
+      this.focused = !0;
+    }, this.handleBlur = () => {
+      this.focused = !1;
+    };
+  }
+  firstUpdated() {
+    this._value = this.initialValue;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(i) {
+    this._value = i;
+  }
+  get classes() {
+    return {
+      container: !0,
+      focused: this.focused,
+      error: !!this.errorText,
+      success: this.success,
+      disabled: this.disabled,
+      [this.size]: !0,
+      [this.mode]: !0
+    };
+  }
+  get styleTokens() {
+    return c`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return f`
+            ${this.styleTokens}
+            <div class=${v(this.classes)}>
+                <div class="inner-container">
+                    ${this.labelTemplate}
+                    ${this.inputTemplate}
+                    ${this.iconTemplate}
+                </div>
+                <div class="helper-text">${this.helperText}</div>
+                <div class="error-text">${this.errorText}</div>
+                ${this.dropdownTemplate}
+            </div>
+        `;
+  }
+};
+o.styles = [x, b], o.themesStyles = {
+  cupra: T
+};
+let e = o;
+t([
+  r({ type: String, reflect: !0, attribute: "initial-value" })
+], e.prototype, "initialValue");
+t([
+  r({ type: String })
+], e.prototype, "label");
+t([
+  r({ type: String, attribute: "helper-text" })
+], e.prototype, "helperText");
+t([
+  r({ type: String, attribute: "error-text" })
+], e.prototype, "errorText");
+t([
+  r({ type: Boolean, converter: n })
+], e.prototype, "disabled");
+t([
+  r({ type: Boolean, converter: n })
+], e.prototype, "success");
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "mode");
+t([
+  r({ type: String })
+], e.prototype, "size");
+t([
+  u()
+], e.prototype, "_value");
+t([
+  u()
+], e.prototype, "focused");
+t([
+  y(".input-field")
+], e.prototype, "inputField");
+export {
+  e as DsBaseInput
+};

package/dist/components/base/ds-base-input/styles/common.styles.js

@@ -0,0 +1,63 @@
+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 r = e`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .label,
+    .error-text,
+    .helper-text {
+        user-select: none;
+    }
+
+    .label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform-origin: top left;
+        pointer-events: none;
+        transition:
+            transform 0.2s,
+            font-size 0.2s;
+        white-space: nowrap;
+    }
+`, s = e`
+    .container {
+        position: relative;
+    }
+
+    .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:not(.number)::-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;
+    }
+
+    .inner-container {
+        align-items: center;
+        display: flex;
+        position: relative;
+    }
+
+    .input-field:focus {
+        outline: none;
+    }
+`;
+export {
+  r as commonStyles,
+  s as inputStyles
+};

package/dist/components/base/ds-base-input/styles/cupra.styles.js

@@ -0,0 +1,124 @@
+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 r } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const o = r`
+    .container {
+        padding: 16px 0 0 0;
+    }
+    .inner-container {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        margin-top: 4px;
+    }
+    .light .inner-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    .dark .inner-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    .success.light .inner-container {
+        border-bottom-color: var(--ds-color-green-100);
+    }
+    .success.dark .inner-container {
+        border-bottom-color: var(--ds-color-green-100);
+    }
+    :focus.light .inner-container {
+        border-bottom-color: var(--ds-color-black);
+    }
+    .focused.dark .inner-container {
+        border-bottom-color: var(--ds-color-light-grey);
+    }
+    .error.light .inner-container {
+        border-bottom-color: #b50303;
+    }
+    .error.dark .inner-container {
+        border-bottom-color: #ec8b8b;
+    }
+    .disabled.light .inner-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    .disabled.dark .inner-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    .input-field {
+        padding: 0 0 8px 0;
+    }
+    .large .input-field {
+        font: var(--ds-font-cupra-light-30-title);
+    }
+    .small .input-field {
+        font: var(--ds-font-cupra-light-20-title);
+    }
+    .light .input-field {
+        color: var(--ds-color-black);
+    }
+    .dark .input-field {
+        color: var(--ds-color-white);
+    }
+    .disabled.light .input-field {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.dark .input-field {
+        color: var(--ds-color-grey);
+    }
+    .error-text {
+        font: var(--ds-font-cupra-light-10);
+        margin-top: 4px;
+    }
+    .light .error-text {
+        color: #b50303;
+    }
+    .dark .error-text {
+        color: #ec8b8b;
+    }
+    .helper-text {
+        font: var(--ds-font-cupra-light-10);
+        margin-top: 4px;
+    }
+    .light .helper-text {
+        color: var(--ds-color-grey);
+    }
+    .dark .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.light .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.dark .helper-text {
+        color: var(--ds-color-grey);
+    }
+    .large .label {
+        font: var(--ds-font-cupra-light-30-title);
+    }
+    .small .label {
+        font: var(--ds-font-cupra-light-20-title);
+    }
+    .light .label {
+        color: var(--ds-color-grey);
+    }
+    .dark .label {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.light .label {
+        color: var(--ds-color-off-white);
+    }
+    .disabled.dark .label {
+        color: var(--ds-color-grey);
+    }
+    .light .icon {
+        --ds-icon-color: var(--ds-color-dark-grey);
+    }
+    .dark .icon {
+        --ds-icon-color: var(--ds-color-light-grey);
+    }
+    .disabled.light .icon {
+        --ds-icon-color: var(--ds-color-medium-grey);
+    }
+    .disabled.dark .icon {
+        --ds-icon-color: var(--ds-color-dark-grey);
+    }
+`, d = [o];
+export {
+  d as cupraStyles
+};

package/dist/components/base/ds-base-progress-bar/ds-base-progress-bar.js

@@ -0,0 +1,64 @@
+import { DsUiElement as n } from "../DsUiElement.js";
+import { booleanConverter as h } from "../../../utils/booleanConverter.js";
+import { htmlWithTokens as c } 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 s } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as y } 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";
+import { cupraDiagonalStyles as d } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as v } from "./styles/cupra.styles.js";
+import { seatStyles as g } from "./styles/seat.styles.js";
+var S = Object.defineProperty, i = (m, l, p, k) => {
+  for (var t = void 0, o = m.length - 1, a; o >= 0; o--)
+    (a = m[o]) && (t = a(l, p, t) || t);
+  return t && S(l, p, t), t;
+};
+const r = class r extends n {
+  constructor() {
+    super(...arguments), this.show = !1, this.mode = "light", this.size = "large";
+  }
+  get classes() {
+    return {
+      track: !0,
+      [this.size]: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get styleTokens() {
+    return c`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `;
+  }
+  get barTemplate() {
+    return f`
+            ${this.styleTokens}
+            <div class=${y(this.classes)}>
+                <div class="fill"></div>
+            </div>
+        `;
+  }
+};
+r.styles = [u], r.themesStyles = {
+  cupra: v,
+  "cupra-diagonal": d,
+  seat: g
+};
+let e = r;
+i([
+  s({ type: Boolean, converter: h })
+], e.prototype, "show");
+i([
+  s({ type: String, reflect: !0 })
+], e.prototype, "mode");
+i([
+  s({ type: String })
+], e.prototype, "size");
+export {
+  e as DsBaseProgressBar
+};

package/dist/components/base/ds-base-progress-bar/styles/common.styles.js

@@ -0,0 +1,22 @@
+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`
+    .track {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        display: block;
+    }
+`;
+export {
+  p as commonStyles
+};

package/dist/components/base/ds-base-progress-bar/styles/cupra-diagonal.styles.js

@@ -0,0 +1,27 @@
+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`
+    .track.large {
+        height: 4px;
+    }
+    .track.small {
+        height: 2px;
+    }
+    .track.light {
+        background-color: var(--ds-color-off-white);
+    }
+    .track.dark {
+        background-color: var(--ds-color-off-white);
+    }
+    .light .fill {
+        background-color: var(--ds-color-black);
+    }
+    .dark .fill {
+        background-color: var(--ds-color-white);
+    }
+`, i = [r];
+export {
+  i as cupraDiagonalStyles
+};

package/dist/components/base/ds-base-progress-bar/styles/cupra.styles.js

@@ -0,0 +1,27 @@
+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`
+    .track.large {
+        height: 4px;
+    }
+    .track.small {
+        height: 2px;
+    }
+    .track.light {
+        background-color: var(--ds-color-off-white);
+    }
+    .track.dark {
+        background-color: var(--ds-color-off-white);
+    }
+    .light .fill {
+        background-color: var(--ds-color-black);
+    }
+    .dark .fill {
+        background-color: var(--ds-color-white);
+    }
+`, i = [r];
+export {
+  i as cupraStyles
+};

package/dist/components/base/ds-base-progress-bar/styles/seat.styles.js

@@ -0,0 +1,8 @@
+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 t = o``, p = [t];
+export {
+  p as seatStyles
+};