@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/select-option/select-option.css

@@ -0,0 +1,93 @@
+:host(:hover) {
+  --r-select-option--background-color: var(--r-background-interactive-hovered);
+}
+
+:host(:not([aria-disabled=true]):focus) {
+  outline: var(--outline, none);
+  --r-select-option--background-color: var(--r-background-interactive-hovered);
+  --r-select-option--border-color: var(--r-background-interactive-softest);
+  --r-select-option--box-shadow: inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);
+  --r-select-option--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-select-option--outline-offset: -4px;
+  --r-select-option--z-index: 1;
+}
+
+:host([data-focused=true]) {
+  outline: var(--outline, none);
+  --r-select-option--background-color: var(--r-background-interactive-hovered);
+  --r-select-option--border-color: var(--r-background-interactive-softest);
+  --r-select-option--box-shadow: inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);
+  --r-select-option--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-select-option--outline-offset: -4px;
+}
+
+:host(:not([aria-disabled=true]):active) {
+  --r-select-option--background-color: var(--r-background-interactive-pressed);
+}
+
+:host([aria-disabled=true]),
+:host([aria-disabled=true]:hover),
+:host([aria-disabled=true]:focus) {
+  --r-select-option--opacity: 0.4;
+  --r-select-option--background-color: transparent;
+}
+
+:host([aria-selected=true]) {
+  --r-select-option--font-weight: 600;
+  --r-select-option--background-color: var(--r-background-interactive-hovered);
+}
+
+:host([aria-hidden=true]) {
+  --r-select-option--display: none;
+}
+
+:host([icon-position=end]) {
+  --r-select-option--flex-direction: row-reverse;
+  --r-select-option--icon--margin-left: 0.75em;
+  --r-select-option--icon--margin-right: 0;
+}
+
+.r-select-option {
+  box-sizing: var(--r-select-option--box-sizing);
+  position: var(--r-select-option--position);
+  display: var(--r-select-option--display, flex);
+  flex-direction: var(--r-select-option--flex-direction, row);
+  min-height: var(--r-select-option--min-height, 1.125em);
+  width: var(--r-select-option--width, auto);
+  font-size: var(--r-select-option--font-size, 1rem);
+  line-height: var(--r-select-option--line-height, 1.2);
+  font-weight: var(--r-select-option--font-weight, normal);
+  padding-top: var(--r-select-option--padding-top, 0.75em);
+  padding-right: var(--r-select-option--padding-right, 0.75em);
+  padding-bottom: var(--r-select-option--padding-bottom, 0.75em);
+  padding-left: var(--r-select-option--padding-left, 0.75em);
+  align-items: var(--r-select-option--align-items, center);
+  color: var(--r-select-option--color, inherit);
+  background-color: var(--r-select-option--background-color, rgba(0, 0, 0, 0));
+  border-color: var(--r-select-option--border-color, rgba(0, 0, 0, 0));
+  border-radius: var(--r-select-option--border-radius, 0);
+  border-width: var(--r-select-option--border-width, 1px);
+  border-style: var(--r-select-option--border-style, solid);
+  box-shadow: var(--r-select-option--box-shadow, none);
+  outline: var(--r-select-option--outline, none);
+  outline-offset: var(--r-select-option--outline-offset, 0);
+  transform: var(--r-select-option--transform, none);
+  z-index: var(--r-select-option--z-index, 0);
+  opacity: var(--r-select-option--opacity, 1);
+}
+.r-select-option--icon {
+  display: var(--r-select-option--icon--display, inline-flex);
+  align-items: var(--r-select-option--icon--align-items, center);
+  justify-content: var(--r-select-option--icon--justify-content, center);
+  margin-top: var(--r-select-option--icon--margin-top, 0.05em);
+  margin-left: var(--r-select-option--icon--margin-left, 0);
+  margin-right: var(--r-select-option--icon--margin-right, 0.75em);
+}
+.r-select-option--icon svg {
+  display: var(--r-select-option--icon--svg--display, inline-flex);
+}
+.r-select-option--label {
+  max-width: var(--r-select-option--label--max-width, 100%);
+  text-overflow: var(--r-select-option--label--text-overflow, ellipsis);
+  white-space: var(--r-select-option--label--white-space, normal);
+}

package/dist/collection/components/select-option/select-option.js

@@ -0,0 +1,459 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<r-select-option>` represents a single choice inside `<r-select>`.
+ *
+ * Accessibility:
+ * - Hosts `role="option"` and `aria-selected` / `aria-disabled`.
+ * - Emits granular events consumed by the parent select for state + keyboard logic.
+ *
+ * Keyboard (handled by parent `<r-select>`):
+ * - Arrow keys move focus between options.
+ * - Enter/Space commit the focused option.
+ * - Typeahead supported via characters typed while the listbox is open.
+ *
+ * Do not use directly outside `<r-select>`.
+ */
+export class SelectOption {
+    constructor() {
+        /**
+         * When true, the option is not focusable or selectable.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Marks the option as selected. Controlled by `<r-select>`; not user‑set in isolation.
+         * @default false
+         */
+        this.selected = false;
+        /**
+         * Icon size (applied when `icon` provided).
+         * @default "m"
+         */
+        this.iconSize = 'm';
+        /**
+         * Icon color token / CSS color value (when `icon` provided).
+         * @default "var(--r-select-option--color)"
+         */
+        this.iconColor = 'var(--r-select-option--color)';
+        /**
+         * Icon position relative to label content.
+         * @default "start"
+         */
+        this.iconPosition = 'start';
+        /** Internal unique id assigned for accessibility / focus tracking. */
+        this.uniqueId = `r-select-option-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.isFocused = false;
+        this.isSelected = false;
+        this.handleClick = event => {
+            event.preventDefault();
+            if (this.disabled)
+                return;
+            const { host, value } = this;
+            this.optionClick.emit({
+                element: host,
+                value
+            });
+        };
+        this.handleKeydown = event => {
+            event.preventDefault();
+            if (this.disabled)
+                return;
+        };
+    }
+    /**
+     * Sets the component's focus state programmatically.
+     * @method
+     * @returns Promise that resolves once the focus state has been applied.
+     */
+    async setFocus() {
+        this.isFocused = true;
+    }
+    /**
+     * Removes the component's focus state programmatically.
+     * @method
+     * @returns Promise that resolves once the focus state has been removed.
+     */
+    async setBlur() {
+        this.isFocused = false;
+    }
+    /**
+     * Marks this option as selected.
+     *
+     * Sets the internal `isSelected` flag to `true`. Declared as `async` to allow for
+     * future asynchronous side effects or integration with async selection workflows,
+     * and may be safely awaited by callers.
+     *
+     * Idempotent: calling it multiple times will keep the option selected.
+     *
+     * @returns Promise that resolves once the selection state has been updated.
+     */
+    async setSelected() {
+        this.isSelected = true;
+    }
+    /**
+     * Clears the current selection state for this option by setting `isSelected` to `false`.
+     *
+     * Intended for use when programmatically resetting or updating the selection (e.g., on form reset
+     * or when enforcing single-selection logic in a parent component).
+     *
+     * Side effects:
+     * - Triggers any reactive updates or re-renders that depend on `isSelected`.
+     *
+     * @returns A promise that resolves after the selection state has been cleared.
+     */
+    async clearSelected() {
+        this.isSelected = false;
+    }
+    get hasIconSlot() {
+        return !!this.host.querySelector('[slot="icon"]');
+    }
+    get definedValue() {
+        var _a, _b;
+        const text = (_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const label = (_b = this.host.getAttribute('label')) === null || _b === void 0 ? void 0 : _b.trim();
+        return label || text || '';
+    }
+    componentWillLoad() {
+        var _a;
+        const isValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        if (!isValue) {
+            this.host.setAttribute('value', this.definedValue);
+        }
+        this.isSelected = this.selected;
+    }
+    render() {
+        const { disabled, uniqueId, icon, iconSize, iconColor, hasIconSlot } = this;
+        const iconAttributes = {
+            name: icon,
+            size: iconSize,
+            color: iconColor
+        };
+        return (h(Host, { key: 'f55e1ac28062ff9c02ab76c3e1b9aede186743a2', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '89a1ac5a1cf7e842eb2083469c802b41de0d24a2', class: "r-select-option" }, icon && h("span", { key: '97dfa1b0384b43175e42aab83d27afbca3ba954d', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: 'd22429de6f0f5e44e265a71626eb839129ab0792' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: 'b660efa16353c5f0ad5953e576eb1dab6779da02', class: "r-select-option--icon" }, h("slot", { key: '99495694c323df2122e039414c1fdb1588b3e59f', name: "icon" })), h("span", { key: '0630026934eab56f02a309ae668667fbaf9ec1c9', class: "r-select-option--label" }, h("slot", { key: '2d4fb9319fc58ac4a838f1799046e4822f2bccf3' })))));
+    }
+    static get is() { return "r-select-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select-option.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When true, the option is not focusable or selectable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Marks the option as selected. Controlled by `<r-select>`; not user\u2011set in isolation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value submitted with a form when this option is selected.\nIf omitted or empty, it's auto-filled from text content / `label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Presentational label. Falls back to slotted text; finally to `value`.\nUse `label` if the rendered text differs from the submitted `value`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of an icon from the design system icon set to render with the option.\nMutually exclusive with a provided `<slot name=\"icon\">`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconSize": {
+                "type": "string",
+                "attribute": "icon-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconSize",
+                    "resolved": "\"l\" | \"m\" | \"s\"",
+                    "references": {
+                        "IconSize": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"m\""
+                        }],
+                    "text": "Icon size (applied when `icon` provided)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'m'"
+            },
+            "iconColor": {
+                "type": "string",
+                "attribute": "icon-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"var(--r-select-option--color)\""
+                        }],
+                    "text": "Icon color token / CSS color value (when `icon` provided)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'var(--r-select-option--color)'"
+            },
+            "iconPosition": {
+                "type": "string",
+                "attribute": "icon-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconPosition",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "IconPosition": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"start\""
+                        }],
+                    "text": "Icon position relative to label content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'start'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "isSelected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionClick",
+                "name": "optionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the option is activated via pointer (not disabled).\nPayload includes the element + its value (resolved)."
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRSelectOptionElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRSelectOptionElement; value: any; }",
+                    "references": {
+                        "HTMLRSelectOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLRSelectOptionElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the component's focus state programmatically.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "Promise that resolves once the focus state has been applied."
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes the component's focus state programmatically.",
+                    "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "Promise that resolves once the focus state has been removed."
+                        }]
+                }
+            },
+            "setSelected": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Marks this option as selected.\n\nSets the internal `isSelected` flag to `true`. Declared as `async` to allow for\nfuture asynchronous side effects or integration with async selection workflows,\nand may be safely awaited by callers.\n\nIdempotent: calling it multiple times will keep the option selected.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves once the selection state has been updated."
+                        }]
+                }
+            },
+            "clearSelected": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the current selection state for this option by setting `isSelected` to `false`.\n\nIntended for use when programmatically resetting or updating the selection (e.g., on form reset\nor when enforcing single-selection logic in a parent component).\n\nSide effects:\n- Triggers any reactive updates or re-renders that depend on `isSelected`.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves after the selection state has been cleared."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/skip-link/exports.js

@@ -0,0 +1 @@
+export const skipLinkPositionArray = ['left', 'center'];

package/dist/collection/components/skip-link/skip-link.css

@@ -0,0 +1,37 @@
+:host {
+  display: inline-block;
+  position: absolute;
+  z-index: 99999;
+}
+:host:has(:not(:focus-within)) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+:host:has(:focus-within) {
+  top: var(--r-spacing-100);
+  padding: var(--r-spacing-100);
+  border: 1px solid var(--r-border-regular);
+  background: var(--r-background-softest);
+  left: var(--r-skip-link--left, 50%);
+  transform: var(--r-skip-link--transform, translateX(-50%));
+}
+
+:host([position=left]) {
+  --r-skip-link--left: var(--r-spacing-100);
+  --r-skip-link--transform: none;
+}
+
+::slotted(*:not(:focus-within)) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/dist/collection/components/skip-link/skip-link.js

@@ -0,0 +1,52 @@
+import { Host, h } from "@stencil/core";
+export class SkipLink {
+    constructor() {
+        /** Defines skip link position */
+        this.position = 'center';
+    }
+    render() {
+        return (h(Host, { key: '0a243668431f65138c3bf66e40013eb4be72a2be' }, h("slot", { key: '65749c9f436173b7497d11a8f71e5237317e4d3e' })));
+    }
+    static get is() { return "r-skip-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skip-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["skip-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "attribute": "position",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkipLinkPosition",
+                    "resolved": "\"center\" | \"left\"",
+                    "references": {
+                        "SkipLinkPosition": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/skip-link/exports.ts::SkipLinkPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines skip link position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'center'"
+            }
+        };
+    }
+}

package/dist/collection/components/stepper/stepper.css

@@ -0,0 +1,25 @@
+.r-stepper {
+  display: var(--r-stepper--display, flex);
+  align-items: var(--r-stepper--align-items, top);
+  list-style-type: var(--r-stepper--list-style-type, none);
+  padding: var(--r-stepper--padding, 0);
+  margin: var(--r-stepper--margin, 0);
+}
+.r-stepper > r-stepper-item,
+.r-stepper ::slotted(r-stepper-item) {
+  display: var(--r-stepper--slotted--stepper-item--display, flex);
+}
+.r-stepper > r-stepper-item:not(:last-of-type),
+.r-stepper ::slotted(r-stepper-item:not(:last-child)) {
+  flex: var(--r-stepper--slotted--stepper-item--flex, 1);
+}
+.r-stepper > r-stepper-item:not(:last-of-type)::after,
+.r-stepper ::slotted(r-stepper-item:not(:last-child))::after {
+  content: var(--r-stepper-divider--content, "");
+  display: var(--r-stepper-divider--display, block);
+  position: var(--r-stepper-divider--position, relative);
+  width: var(--r-stepper-divider--width, 100%);
+  height: var(--r-stepper-divider--height, 1px);
+  top: var(--r-stepper-divider--top, 0.625rem);
+  background-color: var(--r-stepper-divider--background-color, var(--r-text-regular, #282828));
+}