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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/ds-theme-provider/ds-theme-provider.js +1 -1
  2. package/dist/components/ds-tooltip/ds-tooltip.d.ts +1 -0
  3. package/dist/components/ds-tooltip/ds-tooltip.js +70 -56
  4. package/dist/utils/StylesRegistry/StylesRegistry.js +1 -1
  5. package/dist/utils/cssWithTokens.js +1 -1
  6. package/dist/utils/htmlWithTokens.js +1 -1
  7. package/dist-react/components/ds-theme-provider/ds-theme-provider.js +1 -1
  8. package/dist-react/components/ds-tooltip/ds-tooltip.d.ts +1 -0
  9. package/dist-react/components/ds-tooltip/ds-tooltip.js +70 -56
  10. package/dist-react/utils/StylesRegistry/StylesRegistry.js +1 -1
  11. package/dist-react/utils/cssWithTokens.js +1 -1
  12. package/dist-react/utils/htmlWithTokens.js +1 -1
  13. package/package.json +1 -1
package/dist/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -53,7 +53,7 @@ let m = class extends $ {
53
53
  }
54
54
  loadThemeStyles() {
55
55
  return this.loadStyles ? new Promise((t, o) => {
56
- const s = "/1.0.0-canary.15", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
56
+ const s = "/1.0.0-canary.16", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
57
57
  if (document.head.querySelector(`link[href="${r}"]`)) t();
58
58
  else {
59
59
  const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
package/dist/components/ds-tooltip/ds-tooltip.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare class DsTooltip extends DsTooltip_base {
11
11
  disableFocusListener: DsTooltipAttrs['disable-focus-listener'];
12
12
  disablePressListener: DsTooltipAttrs['disable-press-listener'];
13
13
  protected tooltopPlacement: Placement;
14
+ private tooltipId;
14
15
  protected container: HTMLInputElement;
15
16
  protected anchorContainer: HTMLInputElement;
16
17
  protected arrow: HTMLInputElement;
package/dist/components/ds-tooltip/ds-tooltip.js CHANGED
@@ -1,31 +1,31 @@
1
- import { UiKitElement as w } from "../base/UiKitElement.js";
1
+ import { UiKitElement as y } from "../base/UiKitElement.js";
2
2
  import { customUiKitElement as v } from "../../decorators/customUiKitElement.js";
3
- import { computePosition as y, flip as b, shift as g, offset as P, arrow as E, size as L } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
4
- import { ViewportMixin as $ } from "../../mixins/ViewportMixin.js";
5
- import { booleanConverter as c } from "../../utils/booleanConverter.js";
6
- import { debounce as C } from "../../utils/debounce.js";
7
- import { htmlWithTokens as x } from "../../utils/htmlWithTokens.js";
3
+ import { computePosition as g, flip as $, shift as P, offset as L, arrow as E, size as C } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
4
+ import { ViewportMixin as x } from "../../mixins/ViewportMixin.js";
5
+ import { booleanConverter as u } from "../../utils/booleanConverter.js";
6
+ import { debounce as O } from "../../utils/debounce.js";
7
+ import { htmlWithTokens as A } from "../../utils/htmlWithTokens.js";
8
8
  import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
9
- import { html as p, nothing as O } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
9
+ import { html as m, nothing as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
10
10
  import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
11
11
  import { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
12
- import { state as A } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
13
- import { query as m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
14
- import { queryAssignedElements as u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
15
- import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
16
- import { commonStyles as D } from "./styles/common.styles.js";
17
- var F = Object.defineProperty, M = Object.getOwnPropertyDescriptor, r = (e, t, o, i) => {
18
- for (var n = i > 1 ? void 0 : i ? M(t, o) : t, h = e.length - 1, a; h >= 0; h--)
19
- (a = e[h]) && (n = (i ? a(t, o, n) : a(n)) || n);
20
- return i && n && F(t, o, n), n;
12
+ import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
13
+ import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
14
+ import { queryAssignedElements as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
15
+ import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
16
+ import { commonStyles as M } from "./styles/common.styles.js";
17
+ var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, r = (e, t, o, n) => {
18
+ for (var i = n > 1 ? void 0 : n ? F(t, o) : t, h = e.length - 1, a; h >= 0; h--)
19
+ (a = e[h]) && (i = (n ? a(t, o, i) : a(i)) || i);
20
+ return n && i && D(t, o, i), i;
21
21
  };
22
- let s = class extends $(w) {
22
+ let s = class extends x(y) {
23
23
  constructor() {
24
- super(...arguments), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.usingKeyboard = !1, this.handleKeyDown = () => {
24
+ super(...arguments), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.tooltipId = `ds-tooltip-${Date.now()}-${Math.floor(Math.random() * 1e6)}`, this.usingKeyboard = !1, this.handleKeyDown = () => {
25
25
  this.usingKeyboard = !0;
26
26
  }, this.handlePointerDown = () => {
27
27
  this.usingKeyboard = !1;
28
- }, this.handleResize = C({ func: () => this.requestUpdate() }), this.handleClose = () => {
28
+ }, this.handleResize = O({ func: () => this.requestUpdate() }), this.handleClose = () => {
29
29
  this.show = !1;
30
30
  }, this.handleAnchorPointerDown = (e) => {
31
31
  this.disablePressListener || e.button === 0 && (this.show = !this.show);
@@ -33,8 +33,8 @@ let s = class extends $(w) {
33
33
  this.disableHoverListener || (this.show = !0);
34
34
  }, this.handleAnchorMouseOut = () => {
35
35
  this.disableHoverListener || setTimeout(() => {
36
- var e, t, o, i, n;
37
- !((t = (e = this.container) == null ? void 0 : e.matches) != null && t.call(e, ":hover")) && !((i = (o = this.arrow) == null ? void 0 : o.matches) != null && i.call(o, ":hover")) && !((n = this == null ? void 0 : this.matches) != null && n.call(this, ":hover")) && (this.show = !1);
36
+ var e, t, o, n, i;
37
+ !((t = (e = this.container) == null ? void 0 : e.matches) != null && t.call(e, ":hover")) && !((n = (o = this.arrow) == null ? void 0 : o.matches) != null && n.call(o, ":hover")) && !((i = this == null ? void 0 : this.matches) != null && i.call(this, ":hover")) && (this.show = !1);
38
38
  }, 150);
39
39
  }, this.handleAnchorFocusIn = () => {
40
40
  this.usingKeyboard && (this.disableFocusListener || (this.show = !0));
@@ -56,16 +56,16 @@ let s = class extends $(w) {
56
56
  updatePosition() {
57
57
  requestAnimationFrame(() => {
58
58
  var e;
59
- !this.anchorContainer || !this.container || !this.show || !((e = this.anchorElements) != null && e[0]) || !(this.anchorContainer instanceof Element) || !(this.container instanceof Element) || !(this.arrow instanceof Element) || (y(this.anchorContainer, this.container, {
59
+ !this.anchorContainer || !this.container || !this.show || !((e = this.anchorElements) != null && e[0]) || !(this.anchorContainer instanceof Element) || !(this.container instanceof Element) || !(this.arrow instanceof Element) || (g(this.anchorContainer, this.container, {
60
60
  placement: "bottom-start",
61
61
  middleware: [
62
- b(),
63
- g(),
64
- P(8),
62
+ $(),
63
+ P(),
64
+ L(8),
65
65
  E({ element: this.arrow }),
66
- L({
67
- apply({ availableWidth: t, availableHeight: o, elements: i }) {
68
- Object.assign(i.floating.style, {
66
+ C({
67
+ apply({ availableWidth: t, availableHeight: o, elements: n }) {
68
+ Object.assign(n.floating.style, {
69
69
  maxWidth: `${Math.min(240, t - 8)}px`,
70
70
  maxHeight: `${Math.max(0, o - 8)}px`
71
71
  });
@@ -73,15 +73,15 @@ let s = class extends $(w) {
73
73
  })
74
74
  ]
75
75
  }).then((t) => {
76
- const { x: o, y: i, middlewareData: n, placement: h } = t;
76
+ const { x: o, y: n, middlewareData: i, placement: h } = t;
77
77
  if (this.tooltopPlacement = h, Object.assign(this.container.style, {
78
78
  left: `${o ?? 0}px`,
79
- top: `${i ?? 0}px`
80
- }), n.arrow) {
81
- const { x: a, y: f } = n.arrow;
79
+ top: `${n ?? 0}px`
80
+ }), i.arrow) {
81
+ const { x: a, y: w } = i.arrow;
82
82
  Object.assign(this.arrow.style, {
83
83
  left: a != null ? `${a}px` : "",
84
- top: f != null ? `${f}px` : ""
84
+ top: w != null ? `${w}px` : ""
85
85
  });
86
86
  }
87
87
  }), this.requestUpdate());
@@ -119,28 +119,34 @@ let s = class extends $(w) {
119
119
  };
120
120
  }
121
121
  get arrowTemplate() {
122
- return p`
123
- <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${d(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}">
122
+ return m`
123
+ <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${c(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
124
124
  <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" fill="#26262C" class="ds-tooltip-arrow-background"/>
125
125
  <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke="#FAFAFA" stroke-opacity="0.3" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
126
126
  </svg>`;
127
127
  }
128
128
  get tooltipTemplate() {
129
- return this.show && this.anchorElements.length > 0 ? p`
130
- <div id="tooltip" part="container" class=${d(this.containerClasses)} @mouseout=${this.handleAnchorMouseOut}>
131
- <header part="header" class=${d(this.headerClasses)}>
129
+ return this.show && this.anchorElements.length > 0 ? m`
130
+ <div
131
+ id=${this.tooltipId}
132
+ part="container"
133
+ class=${c(this.containerClasses)}
134
+ @mouseout=${this.handleAnchorMouseOut}
135
+ role="tooltip"
136
+ >
137
+ <header part="header" class=${c(this.headerClasses)}>
132
138
  <slot @slotchange=${this.updatePosition} name="header"></slot>
133
139
  <slot @slotchange=${this.updatePosition} name="close-button" @click=${this.handleClose}></slot>
134
140
  </header>
135
- <div part="content" class=${d(this.contentClasses)}>
141
+ <div part="content" class=${c(this.contentClasses)}>
136
142
  <slot @slotchange=${this.updatePosition} name="content"></slot>
137
143
  </div>
138
144
  <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
139
145
  ${this.arrowTemplate}
140
- </div>` : O;
146
+ </div>` : d;
141
147
  }
142
148
  get styleTokens() {
143
- return x`
149
+ return A`
144
150
  <style>
145
151
  :host {
146
152
  color-scheme: ${this.mode};
@@ -149,17 +155,22 @@ let s = class extends $(w) {
149
155
  `;
150
156
  }
151
157
  render() {
152
- return p`
158
+ return m`
153
159
  <style>
154
160
  .anchor {
155
161
  cursor: ${this.disablePressListener ? "default" : "pointer"};
156
162
  }
157
163
  </style>
158
164
  ${this.styleTokens}
159
- <div
165
+ <div
160
166
  id="button"
161
167
  class="anchor"
162
168
  tabindex="0"
169
+ role=${this.disablePressListener ? d : "button"}
170
+ aria-controls=${this.tooltipId}
171
+ aria-expanded=${this.disablePressListener ? d : String(this.show)}
172
+ aria-describedby=${this.show ? this.tooltipId : d}
173
+ aria-label="open tooltip"
163
174
  @mouseover="${this.handleAnchorMouseOver}"
164
175
  @mouseout="${this.handleAnchorMouseOut}"
165
176
  @pointerdown="${this.handleAnchorPointerDown}"
@@ -172,45 +183,48 @@ let s = class extends $(w) {
172
183
  `;
173
184
  }
174
185
  };
175
- s.styles = [D];
186
+ s.styles = [M];
176
187
  r([
177
188
  l({ type: String, reflect: !0 })
178
189
  ], s.prototype, "mode", 2);
179
190
  r([
180
- l({ type: Boolean, reflect: !0, converter: c })
191
+ l({ type: Boolean, reflect: !0, converter: u })
181
192
  ], s.prototype, "show", 2);
182
193
  r([
183
- l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-hover-listener" })
194
+ l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-hover-listener" })
184
195
  ], s.prototype, "disableHoverListener", 2);
185
196
  r([
186
- l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-focus-listener" })
197
+ l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-focus-listener" })
187
198
  ], s.prototype, "disableFocusListener", 2);
188
199
  r([
189
- l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-press-listener" })
200
+ l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-press-listener" })
190
201
  ], s.prototype, "disablePressListener", 2);
191
202
  r([
192
- A()
203
+ b()
193
204
  ], s.prototype, "tooltopPlacement", 2);
194
205
  r([
195
- m(".container")
206
+ b()
207
+ ], s.prototype, "tooltipId", 2);
208
+ r([
209
+ f(".container")
196
210
  ], s.prototype, "container", 2);
197
211
  r([
198
- m("#button")
212
+ f("#button")
199
213
  ], s.prototype, "anchorContainer", 2);
200
214
  r([
201
- m("#arrow")
215
+ f("#arrow")
202
216
  ], s.prototype, "arrow", 2);
203
217
  r([
204
- u({ slot: "" })
218
+ p({ slot: "" })
205
219
  ], s.prototype, "anchorElements", 2);
206
220
  r([
207
- u({ slot: "header" })
221
+ p({ slot: "header" })
208
222
  ], s.prototype, "headerElements", 2);
209
223
  r([
210
- u({ slot: "close-button" })
224
+ p({ slot: "close-button" })
211
225
  ], s.prototype, "closeButtonElements", 2);
212
226
  r([
213
- u({ slot: "content" })
227
+ p({ slot: "content" })
214
228
  ], s.prototype, "contentElements", 2);
215
229
  s = r([
216
230
  v("ds-tooltip")
package/dist/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -5,7 +5,7 @@ class s {
5
5
  theme: t
6
6
  }) => {
7
7
  if (!t || !e) return;
8
- const c = `https://ds-assets.cupra.com/1.0.0-canary.15/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
8
+ const c = `https://ds-assets.cupra.com/1.0.0-canary.16/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
9
9
  if (r) return r;
10
10
  const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
11
11
  return this.stylePromises.set(c, i), this.stylePromises.get(c);
package/dist/utils/cssWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
5
  function x(t, ...r) {
6
- const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-15"), i = n(e);
6
+ const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), i = n(e);
7
7
  return o`${i}`;
8
8
  }
9
9
  export {
package/dist/utils/htmlWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
5
5
  function x(t, ...r) {
6
- const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-15"), e = i(o);
6
+ const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), e = i(o);
7
7
  return n`${e}`;
8
8
  }
9
9
  export {
package/dist-react/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -53,7 +53,7 @@ let m = class extends $ {
53
53
  }
54
54
  loadThemeStyles() {
55
55
  return this.loadStyles ? new Promise((t, o) => {
56
- const s = "/1.0.0-canary.15", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
56
+ const s = "/1.0.0-canary.16", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
57
57
  if (document.head.querySelector(`link[href="${r}"]`)) t();
58
58
  else {
59
59
  const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
package/dist-react/components/ds-tooltip/ds-tooltip.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare class DsTooltip extends DsTooltip_base {
11
11
  disableFocusListener: DsTooltipAttrs['disable-focus-listener'];
12
12
  disablePressListener: DsTooltipAttrs['disable-press-listener'];
13
13
  protected tooltopPlacement: Placement;
14
+ private tooltipId;
14
15
  protected container: HTMLInputElement;
15
16
  protected anchorContainer: HTMLInputElement;
16
17
  protected arrow: HTMLInputElement;
package/dist-react/components/ds-tooltip/ds-tooltip.js CHANGED
@@ -1,31 +1,31 @@
1
- import { UiKitElement as w } from "../base/UiKitElement.js";
1
+ import { UiKitElement as y } from "../base/UiKitElement.js";
2
2
  import { customUiKitElement as v } from "../../decorators/customUiKitElement.js";
3
- import { computePosition as y, flip as b, shift as g, offset as P, arrow as E, size as L } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
4
- import { ViewportMixin as $ } from "../../mixins/ViewportMixin.js";
5
- import { booleanConverter as c } from "../../utils/booleanConverter.js";
6
- import { debounce as C } from "../../utils/debounce.js";
7
- import { htmlWithTokens as x } from "../../utils/htmlWithTokens.js";
3
+ import { computePosition as g, flip as $, shift as P, offset as L, arrow as E, size as C } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
4
+ import { ViewportMixin as x } from "../../mixins/ViewportMixin.js";
5
+ import { booleanConverter as u } from "../../utils/booleanConverter.js";
6
+ import { debounce as O } from "../../utils/debounce.js";
7
+ import { htmlWithTokens as A } from "../../utils/htmlWithTokens.js";
8
8
  import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
9
- import { html as p, nothing as O } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
9
+ import { html as m, nothing as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
10
10
  import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
11
11
  import { property as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
12
- import { state as A } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
13
- import { query as m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
14
- import { queryAssignedElements as u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
15
- import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
16
- import { commonStyles as D } from "./styles/common.styles.js";
17
- var F = Object.defineProperty, M = Object.getOwnPropertyDescriptor, r = (e, t, o, i) => {
18
- for (var n = i > 1 ? void 0 : i ? M(t, o) : t, h = e.length - 1, a; h >= 0; h--)
19
- (a = e[h]) && (n = (i ? a(t, o, n) : a(n)) || n);
20
- return i && n && F(t, o, n), n;
12
+ import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
13
+ import { query as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
14
+ import { queryAssignedElements as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
15
+ import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
16
+ import { commonStyles as M } from "./styles/common.styles.js";
17
+ var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, r = (e, t, o, n) => {
18
+ for (var i = n > 1 ? void 0 : n ? F(t, o) : t, h = e.length - 1, a; h >= 0; h--)
19
+ (a = e[h]) && (i = (n ? a(t, o, i) : a(i)) || i);
20
+ return n && i && D(t, o, i), i;
21
21
  };
22
- let s = class extends $(w) {
22
+ let s = class extends x(y) {
23
23
  constructor() {
24
- super(...arguments), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.usingKeyboard = !1, this.handleKeyDown = () => {
24
+ super(...arguments), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.tooltipId = `ds-tooltip-${Date.now()}-${Math.floor(Math.random() * 1e6)}`, this.usingKeyboard = !1, this.handleKeyDown = () => {
25
25
  this.usingKeyboard = !0;
26
26
  }, this.handlePointerDown = () => {
27
27
  this.usingKeyboard = !1;
28
- }, this.handleResize = C({ func: () => this.requestUpdate() }), this.handleClose = () => {
28
+ }, this.handleResize = O({ func: () => this.requestUpdate() }), this.handleClose = () => {
29
29
  this.show = !1;
30
30
  }, this.handleAnchorPointerDown = (e) => {
31
31
  this.disablePressListener || e.button === 0 && (this.show = !this.show);
@@ -33,8 +33,8 @@ let s = class extends $(w) {
33
33
  this.disableHoverListener || (this.show = !0);
34
34
  }, this.handleAnchorMouseOut = () => {
35
35
  this.disableHoverListener || setTimeout(() => {
36
- var e, t, o, i, n;
37
- !((t = (e = this.container) == null ? void 0 : e.matches) != null && t.call(e, ":hover")) && !((i = (o = this.arrow) == null ? void 0 : o.matches) != null && i.call(o, ":hover")) && !((n = this == null ? void 0 : this.matches) != null && n.call(this, ":hover")) && (this.show = !1);
36
+ var e, t, o, n, i;
37
+ !((t = (e = this.container) == null ? void 0 : e.matches) != null && t.call(e, ":hover")) && !((n = (o = this.arrow) == null ? void 0 : o.matches) != null && n.call(o, ":hover")) && !((i = this == null ? void 0 : this.matches) != null && i.call(this, ":hover")) && (this.show = !1);
38
38
  }, 150);
39
39
  }, this.handleAnchorFocusIn = () => {
40
40
  this.usingKeyboard && (this.disableFocusListener || (this.show = !0));
@@ -56,16 +56,16 @@ let s = class extends $(w) {
56
56
  updatePosition() {
57
57
  requestAnimationFrame(() => {
58
58
  var e;
59
- !this.anchorContainer || !this.container || !this.show || !((e = this.anchorElements) != null && e[0]) || !(this.anchorContainer instanceof Element) || !(this.container instanceof Element) || !(this.arrow instanceof Element) || (y(this.anchorContainer, this.container, {
59
+ !this.anchorContainer || !this.container || !this.show || !((e = this.anchorElements) != null && e[0]) || !(this.anchorContainer instanceof Element) || !(this.container instanceof Element) || !(this.arrow instanceof Element) || (g(this.anchorContainer, this.container, {
60
60
  placement: "bottom-start",
61
61
  middleware: [
62
- b(),
63
- g(),
64
- P(8),
62
+ $(),
63
+ P(),
64
+ L(8),
65
65
  E({ element: this.arrow }),
66
- L({
67
- apply({ availableWidth: t, availableHeight: o, elements: i }) {
68
- Object.assign(i.floating.style, {
66
+ C({
67
+ apply({ availableWidth: t, availableHeight: o, elements: n }) {
68
+ Object.assign(n.floating.style, {
69
69
  maxWidth: `${Math.min(240, t - 8)}px`,
70
70
  maxHeight: `${Math.max(0, o - 8)}px`
71
71
  });
@@ -73,15 +73,15 @@ let s = class extends $(w) {
73
73
  })
74
74
  ]
75
75
  }).then((t) => {
76
- const { x: o, y: i, middlewareData: n, placement: h } = t;
76
+ const { x: o, y: n, middlewareData: i, placement: h } = t;
77
77
  if (this.tooltopPlacement = h, Object.assign(this.container.style, {
78
78
  left: `${o ?? 0}px`,
79
- top: `${i ?? 0}px`
80
- }), n.arrow) {
81
- const { x: a, y: f } = n.arrow;
79
+ top: `${n ?? 0}px`
80
+ }), i.arrow) {
81
+ const { x: a, y: w } = i.arrow;
82
82
  Object.assign(this.arrow.style, {
83
83
  left: a != null ? `${a}px` : "",
84
- top: f != null ? `${f}px` : ""
84
+ top: w != null ? `${w}px` : ""
85
85
  });
86
86
  }
87
87
  }), this.requestUpdate());
@@ -119,28 +119,34 @@ let s = class extends $(w) {
119
119
  };
120
120
  }
121
121
  get arrowTemplate() {
122
- return p`
123
- <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${d(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}">
122
+ return m`
123
+ <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${c(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
124
124
  <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" fill="#26262C" class="ds-tooltip-arrow-background"/>
125
125
  <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke="#FAFAFA" stroke-opacity="0.3" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
126
126
  </svg>`;
127
127
  }
128
128
  get tooltipTemplate() {
129
- return this.show && this.anchorElements.length > 0 ? p`
130
- <div id="tooltip" part="container" class=${d(this.containerClasses)} @mouseout=${this.handleAnchorMouseOut}>
131
- <header part="header" class=${d(this.headerClasses)}>
129
+ return this.show && this.anchorElements.length > 0 ? m`
130
+ <div
131
+ id=${this.tooltipId}
132
+ part="container"
133
+ class=${c(this.containerClasses)}
134
+ @mouseout=${this.handleAnchorMouseOut}
135
+ role="tooltip"
136
+ >
137
+ <header part="header" class=${c(this.headerClasses)}>
132
138
  <slot @slotchange=${this.updatePosition} name="header"></slot>
133
139
  <slot @slotchange=${this.updatePosition} name="close-button" @click=${this.handleClose}></slot>
134
140
  </header>
135
- <div part="content" class=${d(this.contentClasses)}>
141
+ <div part="content" class=${c(this.contentClasses)}>
136
142
  <slot @slotchange=${this.updatePosition} name="content"></slot>
137
143
  </div>
138
144
  <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
139
145
  ${this.arrowTemplate}
140
- </div>` : O;
146
+ </div>` : d;
141
147
  }
142
148
  get styleTokens() {
143
- return x`
149
+ return A`
144
150
  <style>
145
151
  :host {
146
152
  color-scheme: ${this.mode};
@@ -149,17 +155,22 @@ let s = class extends $(w) {
149
155
  `;
150
156
  }
151
157
  render() {
152
- return p`
158
+ return m`
153
159
  <style>
154
160
  .anchor {
155
161
  cursor: ${this.disablePressListener ? "default" : "pointer"};
156
162
  }
157
163
  </style>
158
164
  ${this.styleTokens}
159
- <div
165
+ <div
160
166
  id="button"
161
167
  class="anchor"
162
168
  tabindex="0"
169
+ role=${this.disablePressListener ? d : "button"}
170
+ aria-controls=${this.tooltipId}
171
+ aria-expanded=${this.disablePressListener ? d : String(this.show)}
172
+ aria-describedby=${this.show ? this.tooltipId : d}
173
+ aria-label="open tooltip"
163
174
  @mouseover="${this.handleAnchorMouseOver}"
164
175
  @mouseout="${this.handleAnchorMouseOut}"
165
176
  @pointerdown="${this.handleAnchorPointerDown}"
@@ -172,45 +183,48 @@ let s = class extends $(w) {
172
183
  `;
173
184
  }
174
185
  };
175
- s.styles = [D];
186
+ s.styles = [M];
176
187
  r([
177
188
  l({ type: String, reflect: !0 })
178
189
  ], s.prototype, "mode", 2);
179
190
  r([
180
- l({ type: Boolean, reflect: !0, converter: c })
191
+ l({ type: Boolean, reflect: !0, converter: u })
181
192
  ], s.prototype, "show", 2);
182
193
  r([
183
- l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-hover-listener" })
194
+ l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-hover-listener" })
184
195
  ], s.prototype, "disableHoverListener", 2);
185
196
  r([
186
- l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-focus-listener" })
197
+ l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-focus-listener" })
187
198
  ], s.prototype, "disableFocusListener", 2);
188
199
  r([
189
- l({ type: Boolean, reflect: !0, converter: c, attribute: "disable-press-listener" })
200
+ l({ type: Boolean, reflect: !0, converter: u, attribute: "disable-press-listener" })
190
201
  ], s.prototype, "disablePressListener", 2);
191
202
  r([
192
- A()
203
+ b()
193
204
  ], s.prototype, "tooltopPlacement", 2);
194
205
  r([
195
- m(".container")
206
+ b()
207
+ ], s.prototype, "tooltipId", 2);
208
+ r([
209
+ f(".container")
196
210
  ], s.prototype, "container", 2);
197
211
  r([
198
- m("#button")
212
+ f("#button")
199
213
  ], s.prototype, "anchorContainer", 2);
200
214
  r([
201
- m("#arrow")
215
+ f("#arrow")
202
216
  ], s.prototype, "arrow", 2);
203
217
  r([
204
- u({ slot: "" })
218
+ p({ slot: "" })
205
219
  ], s.prototype, "anchorElements", 2);
206
220
  r([
207
- u({ slot: "header" })
221
+ p({ slot: "header" })
208
222
  ], s.prototype, "headerElements", 2);
209
223
  r([
210
- u({ slot: "close-button" })
224
+ p({ slot: "close-button" })
211
225
  ], s.prototype, "closeButtonElements", 2);
212
226
  r([
213
- u({ slot: "content" })
227
+ p({ slot: "content" })
214
228
  ], s.prototype, "contentElements", 2);
215
229
  s = r([
216
230
  v("ds-tooltip")
package/dist-react/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -5,7 +5,7 @@ class s {
5
5
  theme: t
6
6
  }) => {
7
7
  if (!t || !e) return;
8
- const c = `https://ds-assets.cupra.com/1.0.0-canary.15/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
8
+ const c = `https://ds-assets.cupra.com/1.0.0-canary.16/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
9
9
  if (r) return r;
10
10
  const i = this.fetchStyle({ url: c }).then((n) => (n || this.stylePromises.delete(c), n));
11
11
  return this.stylePromises.set(c, i), this.stylePromises.get(c);
package/dist-react/utils/cssWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
5
  function x(t, ...r) {
6
- const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-15"), i = n(e);
6
+ const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), i = n(e);
7
7
  return o`${i}`;
8
8
  }
9
9
  export {
package/dist-react/utils/htmlWithTokens.js CHANGED
@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
5
5
  function x(t, ...r) {
6
- const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-15"), e = i(o);
6
+ const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-16"), e = i(o);
7
7
  return n`${e}`;
8
8
  }
9
9
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cupra/ui-kit",
3
- "version": "1.0.0-canary.15",
3
+ "version": "1.0.0-canary.16",
4
4
  "description": "Web components library",
5
5
  "author": "SEAT S.A.",
6
6
  "license": "SEAT S.A. Library EULA 1.0",