@cupra/ui-kit 1.0.0-canary.11 → 1.0.0-canary.12

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-chip/ds-chip.js +1 -0
  2. package/dist/components/ds-chips/styles/common.styles.js +45 -29
  3. package/dist/components/ds-theme-provider/ds-theme-provider.js +1 -1
  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-chip/ds-chip.js +1 -0
  8. package/dist-react/components/ds-chips/styles/common.styles.js +45 -29
  9. package/dist-react/components/ds-theme-provider/ds-theme-provider.js +1 -1
  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-chip/ds-chip.js CHANGED
@@ -26,6 +26,7 @@ let t = class extends h {
26
26
  get classes() {
27
27
  return {
28
28
  container: !0,
29
+ "ds-blur": !0,
29
30
  [this.size]: !0,
30
31
  [this.mode]: !!this.mode,
31
32
  selected: this.selected,
package/dist/components/ds-chips/styles/common.styles.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
2
2
  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
- import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
- const l = r`
4
+ import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
+ const a = t`
6
6
  .container {
7
7
  display: inline-flex;
8
8
  position: relative;
9
9
  max-width: 100%;
10
+ position: relative;
11
+ --ds-chips-fade-width: 54px;
10
12
  }
11
13
 
12
14
  .chips-container {
@@ -18,38 +20,52 @@ const l = r`
18
20
  scroll-behavior: smooth;
19
21
  }
20
22
 
21
- .chips-container.scroll-left {
22
- mask-image: linear-gradient(
23
- to left,
24
- rgba(0, 0, 0, 1) 0,
25
- rgba(0, 0, 0, 1) calc(100% - 48px),
26
- rgba(0, 0, 0, 0) calc(100% - 32px),
27
- rgba(0, 0, 0, 0) 100%
28
- );
29
- }
30
-
31
- .chips-container.scroll-right {
32
- mask-image: linear-gradient(
23
+ .chips-container.scroll-left:before {
24
+ content: '';
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ width: var(--ds-chips-fade-width);
29
+ height: 100%;
30
+ pointer-events: none;
31
+ background: linear-gradient(
33
32
  to right,
34
- rgba(0, 0, 0, 1) 0,
35
- rgba(0, 0, 0, 1) calc(100% - 48px),
36
- rgba(0, 0, 0, 0) calc(100% - 32px),
37
- rgba(0, 0, 0, 0) 100%
33
+ var(--ds-chips-fade-color) 0%,
34
+ var(--ds-chips-fade-color) 40%,
35
+ rgba(255, 255, 255, 0) 100%
38
36
  );
37
+ z-index: var(--ds-z-index-default, 1);
39
38
  }
40
39
 
41
- .chips-container.scroll-left.scroll-right {
42
- mask-image: linear-gradient(
43
- to right,
44
- rgba(0, 0, 0, 0) 0px,
45
- rgba(0, 0, 0, 0) 32px,
46
- rgba(0, 0, 0, 1) 48px,
47
- rgba(0, 0, 0, 1) calc(100% - 48px),
48
- rgba(0, 0, 0, 0) calc(100% - 32px),
49
- rgba(0, 0, 0, 0) 100%
40
+ .chips-container.scroll-right:after {
41
+ content: '';
42
+ position: absolute;
43
+ top: 0;
44
+ right: 0;
45
+ width: var(--ds-chips-fade-width);
46
+ height: 100%;
47
+ pointer-events: none;
48
+ background: linear-gradient(
49
+ to left,
50
+ var(--ds-chips-fade-color) 0%,
51
+ var(--ds-chips-fade-color) 40%,
52
+ rgba(255, 255, 255, 0) 100%
50
53
  );
54
+ z-index: var(--ds-z-index-default, 1);
51
55
  }
52
56
 
57
+ //.chips-container.scroll-left.scroll-right {
58
+ // mask-image: linear-gradient(
59
+ // to right,
60
+ // rgba(0, 0, 0, 0) 0px,
61
+ // rgba(0, 0, 0, 0) 32px,
62
+ // rgba(0, 0, 0, 1) 48px,
63
+ // rgba(0, 0, 0, 1) calc(100% - 48px),
64
+ // rgba(0, 0, 0, 0) calc(100% - 32px),
65
+ // rgba(0, 0, 0, 0) 100%
66
+ // );
67
+ //}
68
+
53
69
  .chips-container::-webkit-scrollbar {
54
70
  display: none;
55
71
  }
@@ -62,7 +78,7 @@ const l = r`
62
78
  .scroll-button {
63
79
  position: absolute;
64
80
  top: 0;
65
- z-index: 1;
81
+ z-index: 2;
66
82
  }
67
83
 
68
84
  .scroll-button.left {
@@ -74,5 +90,5 @@ const l = r`
74
90
  }
75
91
  `;
76
92
  export {
77
- l as commonStyles
93
+ a as commonStyles
78
94
  };
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.11", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
56
+ const s = "/1.0.0-canary.12", 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/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.11/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
8
+ const c = `https://ds-assets.cupra.com/1.0.0-canary.12/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-11"), i = n(e);
6
+ const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-12"), 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-11"), e = i(o);
6
+ const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-12"), e = i(o);
7
7
  return n`${e}`;
8
8
  }
9
9
  export {
package/dist-react/components/ds-chip/ds-chip.js CHANGED
@@ -26,6 +26,7 @@ let t = class extends h {
26
26
  get classes() {
27
27
  return {
28
28
  container: !0,
29
+ "ds-blur": !0,
29
30
  [this.size]: !0,
30
31
  [this.mode]: !!this.mode,
31
32
  selected: this.selected,
package/dist-react/components/ds-chips/styles/common.styles.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
2
2
  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
- import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
- const l = r`
4
+ import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
+ const a = t`
6
6
  .container {
7
7
  display: inline-flex;
8
8
  position: relative;
9
9
  max-width: 100%;
10
+ position: relative;
11
+ --ds-chips-fade-width: 54px;
10
12
  }
11
13
 
12
14
  .chips-container {
@@ -18,38 +20,52 @@ const l = r`
18
20
  scroll-behavior: smooth;
19
21
  }
20
22
 
21
- .chips-container.scroll-left {
22
- mask-image: linear-gradient(
23
- to left,
24
- rgba(0, 0, 0, 1) 0,
25
- rgba(0, 0, 0, 1) calc(100% - 48px),
26
- rgba(0, 0, 0, 0) calc(100% - 32px),
27
- rgba(0, 0, 0, 0) 100%
28
- );
29
- }
30
-
31
- .chips-container.scroll-right {
32
- mask-image: linear-gradient(
23
+ .chips-container.scroll-left:before {
24
+ content: '';
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ width: var(--ds-chips-fade-width);
29
+ height: 100%;
30
+ pointer-events: none;
31
+ background: linear-gradient(
33
32
  to right,
34
- rgba(0, 0, 0, 1) 0,
35
- rgba(0, 0, 0, 1) calc(100% - 48px),
36
- rgba(0, 0, 0, 0) calc(100% - 32px),
37
- rgba(0, 0, 0, 0) 100%
33
+ var(--ds-chips-fade-color) 0%,
34
+ var(--ds-chips-fade-color) 40%,
35
+ rgba(255, 255, 255, 0) 100%
38
36
  );
37
+ z-index: var(--ds-z-index-default, 1);
39
38
  }
40
39
 
41
- .chips-container.scroll-left.scroll-right {
42
- mask-image: linear-gradient(
43
- to right,
44
- rgba(0, 0, 0, 0) 0px,
45
- rgba(0, 0, 0, 0) 32px,
46
- rgba(0, 0, 0, 1) 48px,
47
- rgba(0, 0, 0, 1) calc(100% - 48px),
48
- rgba(0, 0, 0, 0) calc(100% - 32px),
49
- rgba(0, 0, 0, 0) 100%
40
+ .chips-container.scroll-right:after {
41
+ content: '';
42
+ position: absolute;
43
+ top: 0;
44
+ right: 0;
45
+ width: var(--ds-chips-fade-width);
46
+ height: 100%;
47
+ pointer-events: none;
48
+ background: linear-gradient(
49
+ to left,
50
+ var(--ds-chips-fade-color) 0%,
51
+ var(--ds-chips-fade-color) 40%,
52
+ rgba(255, 255, 255, 0) 100%
50
53
  );
54
+ z-index: var(--ds-z-index-default, 1);
51
55
  }
52
56
 
57
+ //.chips-container.scroll-left.scroll-right {
58
+ // mask-image: linear-gradient(
59
+ // to right,
60
+ // rgba(0, 0, 0, 0) 0px,
61
+ // rgba(0, 0, 0, 0) 32px,
62
+ // rgba(0, 0, 0, 1) 48px,
63
+ // rgba(0, 0, 0, 1) calc(100% - 48px),
64
+ // rgba(0, 0, 0, 0) calc(100% - 32px),
65
+ // rgba(0, 0, 0, 0) 100%
66
+ // );
67
+ //}
68
+
53
69
  .chips-container::-webkit-scrollbar {
54
70
  display: none;
55
71
  }
@@ -62,7 +78,7 @@ const l = r`
62
78
  .scroll-button {
63
79
  position: absolute;
64
80
  top: 0;
65
- z-index: 1;
81
+ z-index: 2;
66
82
  }
67
83
 
68
84
  .scroll-button.left {
@@ -74,5 +90,5 @@ const l = r`
74
90
  }
75
91
  `;
76
92
  export {
77
- l as commonStyles
93
+ a as commonStyles
78
94
  };
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.11", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
56
+ const s = "/1.0.0-canary.12", 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/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.11/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
8
+ const c = `https://ds-assets.cupra.com/1.0.0-canary.12/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-11"), i = n(e);
6
+ const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-12"), 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-11"), e = i(o);
6
+ const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v1-0-0-canary-12"), 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.11",
3
+ "version": "1.0.0-canary.12",
4
4
  "description": "Web components library",
5
5
  "author": "SEAT S.A.",
6
6
  "license": "SEAT S.A. Library EULA 1.0",