@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/radio-button-description/radio-button-description.css

@@ -0,0 +1,5 @@
+:host {
+  font-size: var(--r-font-size-400, 1rem);
+  font-weight: var(--r-font-weight-regular, 400);
+  color: var(--r-text-regular, #282828);
+}

package/dist/collection/components/radio-button-description/radio-button-description.js

@@ -0,0 +1,22 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export class RadioButtonDescription {
+    render() {
+        return (h(Host, { key: '30f29f811a727ba758a1e5b89fb86baf78076694', slot: "description" }, h("div", { key: '233da5297c2b1e47def8e92f0d8e9a5fba846dc8', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: 'f00f06ec8f07b3995fb2249977cad70df930a4c9' }))));
+    }
+    static get is() { return "r-radio-button-description"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button-description.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button-description.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/radio-button-leading/radio-button-leading.css

@@ -0,0 +1,3 @@
+:host {
+  color: var(--r-icon-soft, #686868);
+}

package/dist/collection/components/radio-button-leading/radio-button-leading.js

@@ -0,0 +1,22 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export class RadioButtonLeading {
+    render() {
+        return (h(Host, { key: 'fcfa2b1df999df8a168bd0255ad7855dce28485c', slot: "leading" }, h("div", { key: '2d0e091a66adb24576f5e4a2f0959b8c83dc2017', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: 'cebdf0262db3ce092efbe2e8e830aa54903aa59e' }))));
+    }
+    static get is() { return "r-radio-button-leading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button-leading.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button-leading.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/radio-button-title/radio-button-title.css

@@ -0,0 +1,8 @@
+:host {
+  font-weight: var(--r-font-weight-semibold, 600);
+  font-size: var(--r-font-size-400, 1rem);
+  line-height: var(--r-line-height-m, 1.5);
+  color: var(--r-text-regular, #282828);
+  text-align: left;
+  cursor: inherit;
+}

package/dist/collection/components/radio-button-title/radio-button-title.js

@@ -0,0 +1,22 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export class RadioButtonTitle {
+    render() {
+        return (h(Host, { key: '12da195c66d902eba41e84b1ccaf3efbabbac144', slot: "title" }, h("div", { key: '84fc3a3e1d0b9b641a7fb859d03e904b5009cb44', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: '6562965e5dfa79f4b9f80f22b4293e8ea600e4b2' }))));
+    }
+    static get is() { return "r-radio-button-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button-title.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button-title.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/radio-button-trailing/radio-button-trailing.css

@@ -0,0 +1,6 @@
+:host {
+  font-weight: var(--r-font-weight-regular, 400);
+  font-size: var(--r-font-size-400, 1rem);
+  text-align: right;
+  color: var(--r-text-regular, #282828);
+}

package/dist/collection/components/radio-button-trailing/radio-button-trailing.js

@@ -0,0 +1,22 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export class RadioButtonTrailing {
+    render() {
+        return (h(Host, { key: 'b9fc1731ecc2b522e341cfaceb5b703c8d74253f', slot: "trailing" }, h("div", { key: 'f1319664b1543a4a784cb2cd665567a4d561bdc3', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: 'dbed8559c3b0a5ba2580fe9e8c297e7eb947e5a5' }))));
+    }
+    static get is() { return "r-radio-button-trailing"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button-trailing.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button-trailing.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/radio-group/exports.js

@@ -0,0 +1 @@
+export const radioGroupVariantArray = ['standard', 'contained'];

package/dist/collection/components/radio-group/radio-group.css

@@ -0,0 +1,65 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin-bottom: var(--r-spacing-100);
+}
+:host ::slotted(r-radio-button) {
+  display: var(--r-radio-group--slotted-radio-button--display, flex);
+}
+:host ::slotted(.focused) {
+  --r-radio-button--box-shadow: 0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);
+  --r-radio-button--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-radio-button--outline-offset: 2px;
+}
+:host slot {
+  display: contents;
+}
+
+:host([variant=contained]) ::slotted(r-radio-button) {
+  padding: 0;
+  --r-radio-button--padding: var(--r-spacing-100, 1rem);
+  --r-radio-button--border-color: var(--r-border-soft, #686868);
+  --r-radio-button--border-width: 1px;
+}
+
+:host([invalid]:not([invalid=false])) ::slotted(r-radio-button) {
+  --r-radio-button--box--border-color: var(--r-status-error-regular, #b00c15);
+  --r-radio-button--box--background-color: var(--r-status-error-soft, #fef6f6);
+  --r-radio-button--marker--background-color: var(--r-status-error-regular, #b00c15);
+}
+
+:host .r-radio-group {
+  display: var(--r-radio-group--display, flex);
+  flex-direction: var(--r-radio-group--flex-direction, column);
+  padding: var(--r-radio-group--padding, 0);
+  margin: var(--r-radio-group--margin, 0);
+  border: var(--r-radio-group--border, none);
+}
+:host .r-radio-group--label-container {
+  display: var(--r-radio-group--label-container--display, flex);
+  gap: var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));
+  align-items: var(--r-radio-group--label-container--align-items, center);
+  justify-content: var(--r-radio-group--label-container--justify-content, space-between);
+}
+:host .r-radio-group--label-container ::slotted([slot=popover]) {
+  display: var(--r-radio-group--popover--display, inline-flex);
+  height: var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));
+  align-items: var(--r-radio-group--popover--align-items, center);
+  justify-content: var(--r-radio-group--popover--justify-content, center);
+  margin-right: var(--r-radio-group--popover--margin-right, -0.25rem);
+  --r-popover--trigger--min-width: var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));
+  --r-popover--trigger--min-height: var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5));
+}
+:host .r-radio-group--hint {
+  margin-bottom: var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem));
+}
+:host .r-radio-group--content {
+  display: var(--r-radio-group--content--display, flex);
+  flex-direction: var(--r-radio-group--content--flex-direction, column);
+  flex-wrap: var(--r-radio-group--content--flex-wrap, nowrap);
+  gap: var(--r-radio-group--content--gap, var(--r-spacing-050, 0.5rem));
+}
+:host .r-radio-group + .r-radio-group--message r-hint {
+  margin-top: var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem));
+}