@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,93 +0,0 @@
-: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

@@ -1,459 +0,0 @@
-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: 'd75c7a753d325360d4bee79ef7b96fbedd2d9b96', 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: '8d8d449a5352f90d7731df10ea011856537b02f4', class: "r-select-option" }, icon && h("span", { key: 'f74192805472c8023b921f0a2869772f4c007d78', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '6ac112921c222e83df33b2cf0113f3b158a98407' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '8c5779ab3446a8d4b8880bf1f9958f02d32ca5e4', class: "r-select-option--icon" }, h("slot", { key: '05647b1a0f7fb6f3c996461a825d8d60bb966b50', name: "icon" })), h("span", { key: 'a4de330d788288995da81cd7cbe7a9f8e9ba44c0', class: "r-select-option--label" }, h("slot", { key: '2cb6ac3d005a3bf9b75b0c23d27cbf1930bc15cc' })))));
-    }
-    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

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

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

@@ -1,37 +0,0 @@
-: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

@@ -1,52 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class SkipLink {
-    constructor() {
-        /** Defines skip link position */
-        this.position = 'center';
-    }
-    render() {
-        return (h(Host, { key: '08280b6003ccf78bf96eba9778fd3ddcaebc8947' }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
-    }
-    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

@@ -1,25 +0,0 @@
-.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));
-}