@riverty/web-components 6.2.0 → 6.2.1

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 (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/r-illustration.cjs.entry.js +2 -2
  3. package/dist/collection/components/illustration/illustration.css +52 -0
  4. package/dist/collection/components/illustration/illustration.js +1 -1
  5. package/dist/esm/r-illustration.entry.js +2 -2
  6. package/dist/web-components/{p-c1f59ed1.entry.js → p-ff6b1b8f.entry.js} +1 -1
  7. package/dist/web-components/web-components.esm.js +1 -1
  8. package/package.json +1 -1
  9. package/dist/collection/components/illustration/illustration.scss +0 -56
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 6.2.1 (2026-02-12)
2
+
3
+ ### 🩹 Fixes
4
+
5
+ - **illustration**: fix import of components styles to support stencil-based projects.
6
+
1
7
  ## 6.2.0 (2026-02-10)
2
8
 
3
9
  ### 🚀 Features
package/dist/cjs/r-illustration.cjs.entry.js CHANGED
@@ -110,7 +110,7 @@ const getSvgElementByNameFromCdn = async (name) => {
110
110
  }
111
111
  };
112
112
 
113
- const illustrationScss = ":host {\n display: inline-flex;\n svg {\n width: 100%;\n height: auto;\n vertical-align: top;\n }\n}\n\n:host([theme=\"auto\"]) {\n color-scheme: light dark;\n}\n\n:host([theme=\"light\"]) {\n color-scheme: light;\n}\n\n:host([theme=\"dark\"]) {\n color-scheme: dark;\n}\n\n:host([data-error=\"true\"]) {\n .status {\n background: var(--r-illustration--status--background, var(--r-haze-500));\n height: var(--r-illustration--status--height, 100%);\n display: var(--r-illustration--status--display, flex);\n justify-content: var(--r-illustration--status--justify-content, center);\n align-items: var(--r-illustration--status--align-items, center);\n aspect-ratio: var(--r-illustration--status--aspect-ratio, 342 / 176);\n }\n\n .status-icon {\n width: var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));\n position: var(--r-illustration--status-info--position, relative);\n }\n\n .status-marker {\n width: var(--r-illustration--status-marker--width, clamp(16px, 40%, 22px));\n position: var(--r-illustration--status-marker--position, absolute);\n top: var(--r-illustration--status-marker--top, 100%);\n left: var(--r-illustration--status-marker--left, 100%);\n transform: var(--r-illustration--status-marker--transform, translate(-65%, -65%));\n }\n}\n\n.r-illustration {\n display: var(--r-illustration--display, flex);\n justify-content: var(--r-illustration--justify-content, center);\n align-items: var(--r-illustration--align-items, center);\n background: var(--r-illustration--background, transparent);\n aspect-ratio: var(--r-illustration--aspect-ratio, 342 / 176);\n width: var(--r-illustration--width, 100%);\n min-width: var(--r-illustration--min-width, auto);\n max-width: var(--r-illustration--max-width, 100%);\n height: var(--r-illustration--height, auto);\n}";
113
+ const illustrationCss = ":host{display:inline-flex}:host svg{width:100%;height:auto;vertical-align:top}:host([theme=auto]){color-scheme:light dark}:host([theme=light]){color-scheme:light}:host([theme=dark]){color-scheme:dark}:host([data-error=true]) .status{background:var(--r-illustration--status--background, var(--r-haze-500));height:var(--r-illustration--status--height, 100%);display:var(--r-illustration--status--display, flex);justify-content:var(--r-illustration--status--justify-content, center);align-items:var(--r-illustration--status--align-items, center);aspect-ratio:var(--r-illustration--status--aspect-ratio, 342/176)}:host([data-error=true]) .status-icon{width:var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));position:var(--r-illustration--status-info--position, relative)}:host([data-error=true]) .status-marker{width:var(--r-illustration--status-marker--width, clamp(16px, 40%, 22px));position:var(--r-illustration--status-marker--position, absolute);top:var(--r-illustration--status-marker--top, 100%);left:var(--r-illustration--status-marker--left, 100%);transform:var(--r-illustration--status-marker--transform, translate(-65%, -65%))}.r-illustration{display:var(--r-illustration--display, flex);justify-content:var(--r-illustration--justify-content, center);align-items:var(--r-illustration--align-items, center);background:var(--r-illustration--background, transparent);aspect-ratio:var(--r-illustration--aspect-ratio, 342/176);width:var(--r-illustration--width, 100%);min-width:var(--r-illustration--min-width, auto);max-width:var(--r-illustration--max-width, 100%);height:var(--r-illustration--height, auto)}";
114
114
 
115
115
  const RIllustration = class {
116
116
  constructor(hostRef) {
@@ -391,6 +391,6 @@ const RIllustration = class {
391
391
  }
392
392
  get host() { return index.getElement(this); }
393
393
  };
394
- RIllustration.style = illustrationScss;
394
+ RIllustration.style = illustrationCss;
395
395
 
396
396
  exports.r_illustration = RIllustration;
package/dist/collection/components/illustration/illustration.css ADDED
@@ -0,0 +1,52 @@
1
+ :host {
2
+ display: inline-flex;
3
+ }
4
+ :host svg {
5
+ width: 100%;
6
+ height: auto;
7
+ vertical-align: top;
8
+ }
9
+
10
+ :host([theme=auto]) {
11
+ color-scheme: light dark;
12
+ }
13
+
14
+ :host([theme=light]) {
15
+ color-scheme: light;
16
+ }
17
+
18
+ :host([theme=dark]) {
19
+ color-scheme: dark;
20
+ }
21
+
22
+ :host([data-error=true]) .status {
23
+ background: var(--r-illustration--status--background, var(--r-haze-500));
24
+ height: var(--r-illustration--status--height, 100%);
25
+ display: var(--r-illustration--status--display, flex);
26
+ justify-content: var(--r-illustration--status--justify-content, center);
27
+ align-items: var(--r-illustration--status--align-items, center);
28
+ aspect-ratio: var(--r-illustration--status--aspect-ratio, 342/176);
29
+ }
30
+ :host([data-error=true]) .status-icon {
31
+ width: var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));
32
+ position: var(--r-illustration--status-info--position, relative);
33
+ }
34
+ :host([data-error=true]) .status-marker {
35
+ width: var(--r-illustration--status-marker--width, clamp(16px, 40%, 22px));
36
+ position: var(--r-illustration--status-marker--position, absolute);
37
+ top: var(--r-illustration--status-marker--top, 100%);
38
+ left: var(--r-illustration--status-marker--left, 100%);
39
+ transform: var(--r-illustration--status-marker--transform, translate(-65%, -65%));
40
+ }
41
+
42
+ .r-illustration {
43
+ display: var(--r-illustration--display, flex);
44
+ justify-content: var(--r-illustration--justify-content, center);
45
+ align-items: var(--r-illustration--align-items, center);
46
+ background: var(--r-illustration--background, transparent);
47
+ aspect-ratio: var(--r-illustration--aspect-ratio, 342/176);
48
+ width: var(--r-illustration--width, 100%);
49
+ min-width: var(--r-illustration--min-width, auto);
50
+ max-width: var(--r-illustration--max-width, 100%);
51
+ height: var(--r-illustration--height, auto);
52
+ }
package/dist/collection/components/illustration/illustration.js CHANGED
@@ -278,7 +278,7 @@ export class RIllustration {
278
278
  static get encapsulation() { return "shadow"; }
279
279
  static get originalStyleUrls() {
280
280
  return {
281
- "$": ["illustration.scss"]
281
+ "$": ["illustration.css"]
282
282
  };
283
283
  }
284
284
  static get styleUrls() {
package/dist/esm/r-illustration.entry.js CHANGED
@@ -108,7 +108,7 @@ const getSvgElementByNameFromCdn = async (name) => {
108
108
  }
109
109
  };
110
110
 
111
- const illustrationScss = ":host {\n display: inline-flex;\n svg {\n width: 100%;\n height: auto;\n vertical-align: top;\n }\n}\n\n:host([theme=\"auto\"]) {\n color-scheme: light dark;\n}\n\n:host([theme=\"light\"]) {\n color-scheme: light;\n}\n\n:host([theme=\"dark\"]) {\n color-scheme: dark;\n}\n\n:host([data-error=\"true\"]) {\n .status {\n background: var(--r-illustration--status--background, var(--r-haze-500));\n height: var(--r-illustration--status--height, 100%);\n display: var(--r-illustration--status--display, flex);\n justify-content: var(--r-illustration--status--justify-content, center);\n align-items: var(--r-illustration--status--align-items, center);\n aspect-ratio: var(--r-illustration--status--aspect-ratio, 342 / 176);\n }\n\n .status-icon {\n width: var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));\n position: var(--r-illustration--status-info--position, relative);\n }\n\n .status-marker {\n width: var(--r-illustration--status-marker--width, clamp(16px, 40%, 22px));\n position: var(--r-illustration--status-marker--position, absolute);\n top: var(--r-illustration--status-marker--top, 100%);\n left: var(--r-illustration--status-marker--left, 100%);\n transform: var(--r-illustration--status-marker--transform, translate(-65%, -65%));\n }\n}\n\n.r-illustration {\n display: var(--r-illustration--display, flex);\n justify-content: var(--r-illustration--justify-content, center);\n align-items: var(--r-illustration--align-items, center);\n background: var(--r-illustration--background, transparent);\n aspect-ratio: var(--r-illustration--aspect-ratio, 342 / 176);\n width: var(--r-illustration--width, 100%);\n min-width: var(--r-illustration--min-width, auto);\n max-width: var(--r-illustration--max-width, 100%);\n height: var(--r-illustration--height, auto);\n}";
111
+ const illustrationCss = ":host{display:inline-flex}:host svg{width:100%;height:auto;vertical-align:top}:host([theme=auto]){color-scheme:light dark}:host([theme=light]){color-scheme:light}:host([theme=dark]){color-scheme:dark}:host([data-error=true]) .status{background:var(--r-illustration--status--background, var(--r-haze-500));height:var(--r-illustration--status--height, 100%);display:var(--r-illustration--status--display, flex);justify-content:var(--r-illustration--status--justify-content, center);align-items:var(--r-illustration--status--align-items, center);aspect-ratio:var(--r-illustration--status--aspect-ratio, 342/176)}:host([data-error=true]) .status-icon{width:var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));position:var(--r-illustration--status-info--position, relative)}:host([data-error=true]) .status-marker{width:var(--r-illustration--status-marker--width, clamp(16px, 40%, 22px));position:var(--r-illustration--status-marker--position, absolute);top:var(--r-illustration--status-marker--top, 100%);left:var(--r-illustration--status-marker--left, 100%);transform:var(--r-illustration--status-marker--transform, translate(-65%, -65%))}.r-illustration{display:var(--r-illustration--display, flex);justify-content:var(--r-illustration--justify-content, center);align-items:var(--r-illustration--align-items, center);background:var(--r-illustration--background, transparent);aspect-ratio:var(--r-illustration--aspect-ratio, 342/176);width:var(--r-illustration--width, 100%);min-width:var(--r-illustration--min-width, auto);max-width:var(--r-illustration--max-width, 100%);height:var(--r-illustration--height, auto)}";
112
112
 
113
113
  const RIllustration = class {
114
114
  constructor(hostRef) {
@@ -389,6 +389,6 @@ const RIllustration = class {
389
389
  }
390
390
  get host() { return getElement(this); }
391
391
  };
392
- RIllustration.style = illustrationScss;
392
+ RIllustration.style = illustrationCss;
393
393
 
394
394
  export { RIllustration as r_illustration };