@cupra/ui-kit 1.0.0-canary.13 → 1.0.0-canary.15

package/dist/components/ds-tooltip/styles/common.styles.js

@@ -2,10 +2,11 @@ import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@li
 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 e = t`
+const i = t`
     :host {
         position: relative;
         display: inline-block;
+        width: fit-content;
     }
 
     .title {
@@ -21,143 +22,109 @@ const e = t`
         grid-template-columns: 1fr 1fr;
         justify-content: flex-end;
     }
-`, p = t`
-    .tooltip {
-        width: max-content;
-        white-space: normal;
-        box-sizing: border-box;
-        position: absolute;
-    }
 
-    .tooltip.complex {
-        padding: 12px;
+    ::slotted([slot='content']) {
+        text-align: left;
     }
 
-    .tooltip.top {
-        bottom: 100%;
-        margin-bottom: 13px;
-    }
+    .container {
+        white-space: normal;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5, 8px);
+        align-self: stretch;
 
-    .tooltip.bottom {
-        top: 100%;
-        margin-top: 13px;
-    }
+        z-index: var(--ds-z-index-tooltip, 1300);
 
-    .tooltip.left {
-        right: 100%;
-        margin-right: 13px;
+        position: absolute;
+        width: max-content;
     }
 
-    .tooltip.right {
-        left: 100%;
-        margin-left: 13px;
+    ::slotted([slot='image']) {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
     }
 
-    .tooltip.top.center,
-    .tooltip.bottom.center {
-        left: 50%;
-        transform: translateX(-50%);
+    .header-container {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
     }
 
-    .tooltip.left.center,
-    .tooltip.right.center {
-        top: 50%;
-        transform: translateY(-50%);
+    .header-container.hidden,
+    .content-container.hidden {
+        display: none;
     }
 
-    .tooltip.top.start,
-    .tooltip.bottom.start {
-        left: 0;
-        transform: none;
+    .content-container {
+        overflow: auto;
     }
 
-    .tooltip.left.start,
-    .tooltip.right.start {
-        top: 0;
-        transform: none;
+    ::slotted([slot='header']) {
+        flex: 1 1 auto;
     }
 
-    .tooltip.top.end,
-    .tooltip.bottom.end {
-        left: auto;
-        right: 0;
-        transform: none;
+    ::slotted([slot='close-button']) {
+        flex: 0 0 auto;
+        margin-left: auto;
     }
 
-    .tooltip.left.end,
-    .tooltip.right.end {
-        top: auto;
-        bottom: 0;
-        transform: none;
-    }
-`, a = t`
     .arrow {
-        width: 0;
-        height: 0;
-        border-style: solid;
         position: absolute;
+        z-index: var(--ds-z-index-tooltip, 1300);
     }
 
-    .arrow.top {
-        border-width: 5px 6px 0 6px;
-        bottom: calc(100% + 9px);
-    }
-
-    .arrow.bottom {
-        border-width: 0 6px 5px 6px;
-        top: calc(100% + 9px);
-    }
-
-    .arrow.left {
-        border-width: 6px 0 6px 5px;
-        right: calc(100% + 9px);
+    .ds-tooltip-arrow-background {
+        fill: var(--ds-tooltip-arrow-background-color);
     }
 
-    .arrow.right {
-        border-width: 6px 5px 6px 0;
-        left: calc(100% + 9px);
+    .ds-tooltip-arrow-border {
+        stroke: var(--ds-tooltip-arrow-border-color);
     }
 
-    .arrow.top,
-    .arrow.bottom {
-        left: 50%;
-        transform: translateX(-50%);
+    .anchor {
+        line-height: 0;
+        outline: none;
+        width: fit-content;
     }
 
-    .arrow.left,
-    .arrow.right {
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
-    .arrow.top.start.not-positionable,
-    .arrow.bottom.start.not-positionable {
-        left: 6px;
-        transform: none;
+    .top .arrow,
+    .top-start .arrow,
+    .top-end .arrow {
+        bottom: 0;
+        margin-bottom: -9px;
+        transform: rotate(180deg);
     }
 
-    .arrow.top.end.not-positionable,
-    .arrow.bottom.end.not-positionable {
-        left: auto;
-        right: 6px;
-        transform: none;
+    .bottom .arrow,
+    .bottom-start .arrow,
+    .bottom-end .arrow {
+        top: 0;
+        margin-top: -9px;
+        transform: rotate(0deg);
     }
 
-    .arrow.left.start.not-positionable,
-    .arrow.right.start.not-positionable {
-        top: 6px;
-        transform: none;
+    .left .arrow,
+    .left-start .arrow,
+    .left-end .arrow {
+        right: 0;
+        margin-right: -9px;
+        transform: rotate(90deg);
     }
 
-    .arrow.left.end.not-positionable,
-    .arrow.right.end.not-positionable {
-        top: auto;
-        bottom: 6px;
-        transform: none;
+    .right .arrow,
+    .right-start .arrow,
+    .right-end .arrow {
+        left: 0;
+        margin-left: -9px;
+        transform: rotate(270deg);
     }
 `;
 export {
-  a as arrowStyles,
-  e as commonStyles,
-  p as tooltipStyles
+  i as commonStyles
 };

package/dist/components/index.d.ts

@@ -27,9 +27,10 @@ import './ds-password-input/ds-password-input.ts';
 import './ds-picker-item/ds-picker-item.ts';
 import './ds-portal/ds-portal.ts';
 import './ds-progress-bar/ds-progress-bar.ts';
+import './ds-radio/ds-radio.ts';
 import './ds-radio-button/ds-radio-button.ts';
 import './ds-radio-group/ds-radio-group.ts';
-import './ds-radio/ds-radio.ts';
+import './ds-rating/ds-rating.ts';
 import './ds-search-input/ds-search-input.ts';
 import './ds-search/ds-search.ts';
 import './ds-secondary-navigation/ds-secondary-navigation.ts';

package/dist/index.js

@@ -27,9 +27,10 @@ import "./components/ds-password-input/ds-password-input.js";
 import "./components/ds-picker-item/ds-picker-item.js";
 import "./components/ds-portal/ds-portal.js";
 import "./components/ds-progress-bar/ds-progress-bar.js";
+import "./components/ds-radio/ds-radio.js";
 import "./components/ds-radio-button/ds-radio-button.js";
 import "./components/ds-radio-group/ds-radio-group.js";
-import "./components/ds-radio/ds-radio.js";
+import "./components/ds-rating/ds-rating.js";
 import "./components/ds-search-input/ds-search-input.js";
 import "./components/ds-search/ds-search.js";
 import "./components/ds-secondary-navigation/ds-secondary-navigation.js";
@@ -54,7 +55,7 @@ import "./components/ds-static-box/ds-static-box.js";
 import "./components/ds-interactive-card/ds-interactive-card.js";
 import "./components/ds-radio-button-group/ds-radio-button-group.js";
 import "./components/ds-sidebar-navigation/ds-sidebar-navigation.js";
-import { iconNames as po } from "./components/ds-icon/iconNames.js";
+import { iconNames as to } from "./components/ds-icon/iconNames.js";
 export {
-  po as iconNames
+  to as iconNames
 };

package/dist/node_modules/.pnpm/@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js

@@ -0,0 +1,430 @@
+import { evaluate as H, getSide as B, getSideAxis as $, getOppositePlacement as N, getExpandedPlacements as Q, getOppositeAxisPlacements as U, getAlignmentSides as Z, clamp as _, getPaddingObject as q, getAlignmentAxis as G, getAlignment as Y, min as W, max as j, rectToClientRect as X, getOppositeAxis as tt, getAxisLength as J } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.js";
+function I(a, e, d) {
+  let {
+    reference: o,
+    floating: f
+  } = a;
+  const n = $(e), c = G(e), r = J(c), g = B(e), x = n === "y", i = o.x + o.width / 2 - f.width / 2, s = o.y + o.height / 2 - f.height / 2, m = o[r] / 2 - f[r] / 2;
+  let t;
+  switch (g) {
+    case "top":
+      t = {
+        x: i,
+        y: o.y - f.height
+      };
+      break;
+    case "bottom":
+      t = {
+        x: i,
+        y: o.y + o.height
+      };
+      break;
+    case "right":
+      t = {
+        x: o.x + o.width,
+        y: s
+      };
+      break;
+    case "left":
+      t = {
+        x: o.x - f.width,
+        y: s
+      };
+      break;
+    default:
+      t = {
+        x: o.x,
+        y: o.y
+      };
+  }
+  switch (Y(e)) {
+    case "start":
+      t[c] -= m * (d && x ? -1 : 1);
+      break;
+    case "end":
+      t[c] += m * (d && x ? -1 : 1);
+      break;
+  }
+  return t;
+}
+const ot = async (a, e, d) => {
+  const {
+    placement: o = "bottom",
+    strategy: f = "absolute",
+    middleware: n = [],
+    platform: c
+  } = d, r = n.filter(Boolean), g = await (c.isRTL == null ? void 0 : c.isRTL(e));
+  let x = await c.getElementRects({
+    reference: a,
+    floating: e,
+    strategy: f
+  }), {
+    x: i,
+    y: s
+  } = I(x, o, g), m = o, t = {}, l = 0;
+  for (let u = 0; u < r.length; u++) {
+    const {
+      name: w,
+      fn: p
+    } = r[u], {
+      x: h,
+      y,
+      data: b,
+      reset: v
+    } = await p({
+      x: i,
+      y: s,
+      initialPlacement: o,
+      placement: m,
+      strategy: f,
+      middlewareData: t,
+      rects: x,
+      platform: c,
+      elements: {
+        reference: a,
+        floating: e
+      }
+    });
+    i = h ?? i, s = y ?? s, t = {
+      ...t,
+      [w]: {
+        ...t[w],
+        ...b
+      }
+    }, v && l <= 50 && (l++, typeof v == "object" && (v.placement && (m = v.placement), v.rects && (x = v.rects === !0 ? await c.getElementRects({
+      reference: a,
+      floating: e,
+      strategy: f
+    }) : v.rects), {
+      x: i,
+      y: s
+    } = I(x, m, g)), u = -1);
+  }
+  return {
+    x: i,
+    y: s,
+    placement: m,
+    strategy: f,
+    middlewareData: t
+  };
+};
+async function z(a, e) {
+  var d;
+  e === void 0 && (e = {});
+  const {
+    x: o,
+    y: f,
+    platform: n,
+    rects: c,
+    elements: r,
+    strategy: g
+  } = a, {
+    boundary: x = "clippingAncestors",
+    rootBoundary: i = "viewport",
+    elementContext: s = "floating",
+    altBoundary: m = !1,
+    padding: t = 0
+  } = H(e, a), l = q(t), w = r[m ? s === "floating" ? "reference" : "floating" : s], p = X(await n.getClippingRect({
+    element: (d = await (n.isElement == null ? void 0 : n.isElement(w))) == null || d ? w : w.contextElement || await (n.getDocumentElement == null ? void 0 : n.getDocumentElement(r.floating)),
+    boundary: x,
+    rootBoundary: i,
+    strategy: g
+  })), h = s === "floating" ? {
+    x: o,
+    y: f,
+    width: c.floating.width,
+    height: c.floating.height
+  } : c.reference, y = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(r.floating)), b = await (n.isElement == null ? void 0 : n.isElement(y)) ? await (n.getScale == null ? void 0 : n.getScale(y)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  }, v = X(n.convertOffsetParentRelativeRectToViewportRelativeRect ? await n.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements: r,
+    rect: h,
+    offsetParent: y,
+    strategy: g
+  }) : h);
+  return {
+    top: (p.top - v.top + l.top) / b.y,
+    bottom: (v.bottom - p.bottom + l.bottom) / b.y,
+    left: (p.left - v.left + l.left) / b.x,
+    right: (v.right - p.right + l.right) / b.x
+  };
+}
+const st = (a) => ({
+  name: "arrow",
+  options: a,
+  async fn(e) {
+    const {
+      x: d,
+      y: o,
+      placement: f,
+      rects: n,
+      platform: c,
+      elements: r,
+      middlewareData: g
+    } = e, {
+      element: x,
+      padding: i = 0
+    } = H(a, e) || {};
+    if (x == null)
+      return {};
+    const s = q(i), m = {
+      x: d,
+      y: o
+    }, t = G(f), l = J(t), u = await c.getDimensions(x), w = t === "y", p = w ? "top" : "left", h = w ? "bottom" : "right", y = w ? "clientHeight" : "clientWidth", b = n.reference[l] + n.reference[t] - m[t] - n.floating[l], v = m[t] - n.reference[t], T = await (c.getOffsetParent == null ? void 0 : c.getOffsetParent(x));
+    let O = T ? T[y] : 0;
+    (!O || !await (c.isElement == null ? void 0 : c.isElement(T))) && (O = r.floating[y] || n.floating[l]);
+    const k = b / 2 - v / 2, S = O / 2 - u[l] / 2 - 1, P = W(s[p], S), L = W(s[h], S), C = P, M = O - u[l] - L, A = O / 2 - u[l] / 2 + k, F = _(C, A, M), E = !g.arrow && Y(f) != null && A !== F && n.reference[l] / 2 - (A < C ? P : L) - u[l] / 2 < 0, R = E ? A < C ? A - C : A - M : 0;
+    return {
+      [t]: m[t] + R,
+      data: {
+        [t]: F,
+        centerOffset: A - F - R,
+        ...E && {
+          alignmentOffset: R
+        }
+      },
+      reset: E
+    };
+  }
+}), at = function(a) {
+  return a === void 0 && (a = {}), {
+    name: "flip",
+    options: a,
+    async fn(e) {
+      var d, o;
+      const {
+        placement: f,
+        middlewareData: n,
+        rects: c,
+        initialPlacement: r,
+        platform: g,
+        elements: x
+      } = e, {
+        mainAxis: i = !0,
+        crossAxis: s = !0,
+        fallbackPlacements: m,
+        fallbackStrategy: t = "bestFit",
+        fallbackAxisSideDirection: l = "none",
+        flipAlignment: u = !0,
+        ...w
+      } = H(a, e);
+      if ((d = n.arrow) != null && d.alignmentOffset)
+        return {};
+      const p = B(f), h = $(r), y = B(r) === r, b = await (g.isRTL == null ? void 0 : g.isRTL(x.floating)), v = m || (y || !u ? [N(r)] : Q(r)), T = l !== "none";
+      !m && T && v.push(...U(r, u, l, b));
+      const O = [r, ...v], k = await z(e, w), S = [];
+      let P = ((o = n.flip) == null ? void 0 : o.overflows) || [];
+      if (i && S.push(k[p]), s) {
+        const A = Z(f, c, b);
+        S.push(k[A[0]], k[A[1]]);
+      }
+      if (P = [...P, {
+        placement: f,
+        overflows: S
+      }], !S.every((A) => A <= 0)) {
+        var L, C;
+        const A = (((L = n.flip) == null ? void 0 : L.index) || 0) + 1, F = O[A];
+        if (F && (!(s === "alignment" ? h !== $(F) : !1) || // We leave the current main axis only if every placement on that axis
+        // overflows the main axis.
+        P.every((D) => $(D.placement) === h ? D.overflows[0] > 0 : !0)))
+          return {
+            data: {
+              index: A,
+              overflows: P
+            },
+            reset: {
+              placement: F
+            }
+          };
+        let E = (C = P.filter((R) => R.overflows[0] <= 0).sort((R, D) => R.overflows[1] - D.overflows[1])[0]) == null ? void 0 : C.placement;
+        if (!E)
+          switch (t) {
+            case "bestFit": {
+              var M;
+              const R = (M = P.filter((D) => {
+                if (T) {
+                  const V = $(D.placement);
+                  return V === h || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  V === "y";
+                }
+                return !0;
+              }).map((D) => [D.placement, D.overflows.filter((V) => V > 0).reduce((V, K) => V + K, 0)]).sort((D, V) => D[1] - V[1])[0]) == null ? void 0 : M[0];
+              R && (E = R);
+              break;
+            }
+            case "initialPlacement":
+              E = r;
+              break;
+          }
+        if (f !== E)
+          return {
+            reset: {
+              placement: E
+            }
+          };
+      }
+      return {};
+    }
+  };
+}, et = /* @__PURE__ */ new Set(["left", "top"]);
+async function nt(a, e) {
+  const {
+    placement: d,
+    platform: o,
+    elements: f
+  } = a, n = await (o.isRTL == null ? void 0 : o.isRTL(f.floating)), c = B(d), r = Y(d), g = $(d) === "y", x = et.has(c) ? -1 : 1, i = n && g ? -1 : 1, s = H(e, a);
+  let {
+    mainAxis: m,
+    crossAxis: t,
+    alignmentAxis: l
+  } = typeof s == "number" ? {
+    mainAxis: s,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: s.mainAxis || 0,
+    crossAxis: s.crossAxis || 0,
+    alignmentAxis: s.alignmentAxis
+  };
+  return r && typeof l == "number" && (t = r === "end" ? l * -1 : l), g ? {
+    x: t * i,
+    y: m * x
+  } : {
+    x: m * x,
+    y: t * i
+  };
+}
+const lt = function(a) {
+  return a === void 0 && (a = 0), {
+    name: "offset",
+    options: a,
+    async fn(e) {
+      var d, o;
+      const {
+        x: f,
+        y: n,
+        placement: c,
+        middlewareData: r
+      } = e, g = await nt(e, a);
+      return c === ((d = r.offset) == null ? void 0 : d.placement) && (o = r.arrow) != null && o.alignmentOffset ? {} : {
+        x: f + g.x,
+        y: n + g.y,
+        data: {
+          ...g,
+          placement: c
+        }
+      };
+    }
+  };
+}, ct = function(a) {
+  return a === void 0 && (a = {}), {
+    name: "shift",
+    options: a,
+    async fn(e) {
+      const {
+        x: d,
+        y: o,
+        placement: f
+      } = e, {
+        mainAxis: n = !0,
+        crossAxis: c = !1,
+        limiter: r = {
+          fn: (w) => {
+            let {
+              x: p,
+              y: h
+            } = w;
+            return {
+              x: p,
+              y: h
+            };
+          }
+        },
+        ...g
+      } = H(a, e), x = {
+        x: d,
+        y: o
+      }, i = await z(e, g), s = $(B(f)), m = tt(s);
+      let t = x[m], l = x[s];
+      if (n) {
+        const w = m === "y" ? "top" : "left", p = m === "y" ? "bottom" : "right", h = t + i[w], y = t - i[p];
+        t = _(h, t, y);
+      }
+      if (c) {
+        const w = s === "y" ? "top" : "left", p = s === "y" ? "bottom" : "right", h = l + i[w], y = l - i[p];
+        l = _(h, l, y);
+      }
+      const u = r.fn({
+        ...e,
+        [m]: t,
+        [s]: l
+      });
+      return {
+        ...u,
+        data: {
+          x: u.x - d,
+          y: u.y - o,
+          enabled: {
+            [m]: n,
+            [s]: c
+          }
+        }
+      };
+    }
+  };
+}, rt = function(a) {
+  return a === void 0 && (a = {}), {
+    name: "size",
+    options: a,
+    async fn(e) {
+      var d, o;
+      const {
+        placement: f,
+        rects: n,
+        platform: c,
+        elements: r
+      } = e, {
+        apply: g = () => {
+        },
+        ...x
+      } = H(a, e), i = await z(e, x), s = B(f), m = Y(f), t = $(f) === "y", {
+        width: l,
+        height: u
+      } = n.floating;
+      let w, p;
+      s === "top" || s === "bottom" ? (w = s, p = m === (await (c.isRTL == null ? void 0 : c.isRTL(r.floating)) ? "start" : "end") ? "left" : "right") : (p = s, w = m === "end" ? "top" : "bottom");
+      const h = u - i.top - i.bottom, y = l - i.left - i.right, b = W(u - i[w], h), v = W(l - i[p], y), T = !e.middlewareData.shift;
+      let O = b, k = v;
+      if ((d = e.middlewareData.shift) != null && d.enabled.x && (k = y), (o = e.middlewareData.shift) != null && o.enabled.y && (O = h), T && !m) {
+        const P = j(i.left, 0), L = j(i.right, 0), C = j(i.top, 0), M = j(i.bottom, 0);
+        t ? k = l - 2 * (P !== 0 || L !== 0 ? P + L : j(i.left, i.right)) : O = u - 2 * (C !== 0 || M !== 0 ? C + M : j(i.top, i.bottom));
+      }
+      await g({
+        ...e,
+        availableWidth: k,
+        availableHeight: O
+      });
+      const S = await c.getDimensions(r.floating);
+      return l !== S.width || u !== S.height ? {
+        reset: {
+          rects: !0
+        }
+      } : {};
+    }
+  };
+};
+export {
+  st as arrow,
+  ot as computePosition,
+  z as detectOverflow,
+  at as flip,
+  lt as offset,
+  X as rectToClientRect,
+  ct as shift,
+  rt as size
+};