@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/stepper/stepper.js

@@ -0,0 +1,216 @@
+import { h, Host } from "@stencil/core";
+const OFFSET = 20;
+export class Stepper {
+    constructor() {
+        /** Complete steps. Default value 0 */
+        this.completed = 0;
+        /** _DEPRECATED_ (use `completed` instead) Completed steps. Default value 0 */
+        this.completeSteps = 0;
+        /** Label for completed steps for screen reader users. */
+        this.completedStepsLabel = 'Completed';
+        this.handleSlotChange = () => {
+            this.setStepStatus();
+            this.updateVisibilityOfStepText();
+        };
+    }
+    handleCompletedStepsLabelChange() {
+        this.setStepStatus();
+    }
+    onResize() {
+        this.updateVisibilityOfStepText();
+    }
+    get hasSteps() {
+        return this.host.querySelectorAll('r-stepper-item').length > 0;
+    }
+    componentDidLoad() {
+        this.setStepStatus();
+        this.updateVisibilityOfStepText();
+    }
+    setStepStatus() {
+        var _a;
+        const innerSteps = ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('r-stepper-item')) || [];
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        const allSteps = [...Array.from(innerSteps), ...Array.from(slotSteps)];
+        allSteps === null || allSteps === void 0 ? void 0 : allSteps.forEach((step) => {
+            const existingSpan = step.querySelector('.visually-hidden');
+            if (existingSpan) {
+                existingSpan.remove();
+            }
+            const span = document.createElement('span');
+            span.className = 'visually-hidden';
+            span.textContent = `${step.complete ? `${this.completedStepsLabel}.` : ''}`;
+            step.prepend(span);
+        });
+    }
+    getTextElementWidth(stepElement) {
+        var _a;
+        const textElement = (_a = stepElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-stepper-item--text');
+        if (!textElement)
+            return 0;
+        // Temporarily remove visually-hidden to get the natural width
+        const wasHidden = textElement.classList.contains('visually-hidden');
+        if (wasHidden) {
+            textElement.classList.remove('visually-hidden');
+        }
+        const width = textElement.offsetWidth;
+        // Restore the previous state
+        if (wasHidden) {
+            textElement.classList.add('visually-hidden');
+        }
+        return width;
+    }
+    updateVisibilityOfStepText() {
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        let totalWidth = 0;
+        slotSteps.forEach((step) => {
+            totalWidth += this.getTextElementWidth(step) + OFFSET;
+        });
+        const isOverflowing = totalWidth >= this.host.offsetWidth;
+        if (isOverflowing) {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.add('visually-hidden');
+            });
+        }
+        else {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.remove('visually-hidden');
+            });
+        }
+    }
+    render() {
+        const completed = this.completed || this.completeSteps;
+        return (h(Host, { key: 'd4e3e3aca9a2c52e3549c686679ca6d110b715c0' }, h("ol", { key: '7cad36ede8507e3583f877ce3856df903f5ddd80', class: "r-stepper", "aria-label": this.label || null }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '4942b4293e607acc74afa59a49dd4b4ce0348f5e', onSlotchange: this.handleSlotChange }))));
+    }
+    static get is() { return "r-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "completed": {
+                "type": "number",
+                "attribute": "completed",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Complete steps. Default value 0"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "completeSteps": {
+                "type": "number",
+                "attribute": "complete-steps",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "_DEPRECATED_ (use `completed` instead) Completed steps. Default value 0"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "total": {
+                "type": "number",
+                "attribute": "total",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of steps. Used when no slot-based steps provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the stepper for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "completedStepsLabel": {
+                "type": "string",
+                "attribute": "completed-steps-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for completed steps for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'Completed'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "completedStepsLabel",
+                "methodName": "handleCompletedStepsLabelChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -0,0 +1,62 @@
+:host([active]) {
+  --r-stepper-item--indicator--background-color: var(--r-background-inverse, #282828);
+  --r-stepper-item--color: var(--r-text-inverse, #FFF);
+  --r-stepper-item--text--color: var(--r-text-regular, #282828);
+  --r-stepper-item--indicator--border-color: transparent;
+}
+
+:host([complete]) {
+  --r-stepper-item--indicator--background-color: var(--r-status-success-regular, #298535);
+  --r-stepper-item--color: var(--r-text-inverse, #FFF);
+  --r-stepper-item--text--color: var(--r-text-regular, #282828);
+  --r-stepper-item--indicator--border-color: transparent;
+}
+
+::slotted(.visually-hidden),
+[data-visually-hidden-only=true],
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.r-stepper-item {
+  display: var(--r-stepper-item--display, flex);
+  flex-direction: var(--r-stepper-item--flex-direction, column);
+  align-items: var(--r-stepper-item--align-items, center);
+  justify-content: var(--r-stepper-item--justify-content, center);
+  font-size: var(--r-stepper-item--font-size, var(--r-font-size-200, 0.8125rem));
+  color: var(--r-stepper-item--color, var(--r-text-regular, #282828));
+  font-family: var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));
+  width: var(--r-stepper-item--width, var(--r-spacing-225, 2.25rem));
+  white-space: var(--r-stepper-item--white-space, nowrap);
+  gap: var(--r-stepper-item--gap, var(--r-spacing-100, 0.5rem));
+}
+.r-stepper-item--indicator {
+  width: var(--r-stepper-item--indicator--width, var(--r-spacing-125, 1.25rem));
+  height: var(--r-stepper-item--indicator--height, var(--r-spacing-125, 1.25rem));
+  line-height: var(--r-stepper-item--indicator--line-height, var(--r-spacing-125, 1.25rem));
+  border-radius: var(--r-stepper-item--indicator--border-radius, 50%);
+  background-color: var(--r-stepper-item--indicator--background-color, transparent);
+  display: var(--r-stepper-item--indicator--display, flex);
+  justify-content: var(--r-stepper-item--indicator--justify-content, center);
+  align-items: var(--r-stepper-item--indicator--align-items, center);
+  border-width: var(--r-stepper-item--indicator--border-width, 1px);
+  border-style: var(--r-stepper-item--indicator--border-style, solid);
+  border-color: var(--r-stepper-item--indicator--border-color, var(--r-text-regular, #282828));
+  margin-left: var(--r-stepper-item--indicator--margin-left, var(--r-spacing-100, 0.5rem));
+  margin-right: var(--r-stepper-item--indicator--margin-right, var(--r-spacing-100, 0.5rem));
+}
+.r-stepper-item--indicator--step-number {
+  vertical-align: var(--r-stepper-item--step-number--vertical-align, middle);
+}
+.r-stepper-item--text {
+  font-size: var(--r-stepper-item--text--font-size, var(--r-font-size-200, 0.8125rem));
+  color: var(--r-stepper-item--text--color, var(--r-text-regular, #282828));
+  text-align: var(--r-stepper-item--text--text-align, center);
+}

package/dist/collection/components/stepper-item/stepper-item.js

@@ -0,0 +1,171 @@
+import { Host, h } from "@stencil/core";
+export class StepperItem {
+    constructor() {
+        /** Defines a property complete that determines whether the step is complete */
+        this.complete = false;
+        /** Defines a property active that determines whether the step is active */
+        this.active = false;
+    }
+    /**
+     * Checks if the slot contains only visually-hidden elements (no visible text).
+     * Returns true if only visually-hidden elements are present.
+     */
+    get hasOnlyVisuallyHiddenContent() {
+        var _a;
+        const textContent = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        const visuallyHiddenElement = this.host.querySelector('.visually-hidden');
+        if (!visuallyHiddenElement) {
+            return false;
+        }
+        const visuallyHiddenText = visuallyHiddenElement.textContent || '';
+        const remainingText = textContent.replace(visuallyHiddenText.trim(), '').trim();
+        return !remainingText.length;
+    }
+    get hasText() {
+        return this.host.textContent.trim().length > 0;
+    }
+    render() {
+        const number = this.number || this.stepNumber;
+        return (h(Host, { key: '2a3f15db4e1214ddb2b9b9ca61f7be4f7cc93cdf', role: "listitem", "aria-current": this.active ? 'step' : null }, h("div", { key: '98026269db0de698e020ac591d99cb4ac8ff296b', class: "r-stepper-item" }, h("div", { key: '87227beabbe2200e0ac4e99fa4246a72eaaebf55', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, iconAriaLabel: this.label, size: "s" })) : number !== undefined ? (h("span", { "aria-hidden": `${!this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            h("div", { key: '447f86dfda0e76666e5d313f088e45e7a0a86787', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, h("slot", { key: '039013569ab20d64f2e067325f341b2d720acc19' })))));
+    }
+    static get is() { return "r-stepper-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stepper-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stepper-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "complete": {
+                "type": "boolean",
+                "attribute": "complete",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a property complete that determines whether the step is complete"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a property active that determines whether the step is active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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": "Defines an icon for the step. Optional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "number": {
+                "type": "number",
+                "attribute": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the step number. Optional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "stepNumber": {
+                "type": "number",
+                "attribute": "step-number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "_DEPRECATED_ (use `number` instead) Index of the progress step"
+                },
+                "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": "Label for the step icon for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/tab/tab.css

@@ -0,0 +1,81 @@
+:host {
+  display: flex;
+  outline: none;
+  opacity: 1;
+  cursor: pointer;
+}
+
+:host(:hover:not([disabled]:not([disabled=false]))) {
+  --r-tab--background: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
+}
+
+:host(:active:not([disabled]:not([disabled=false]))) {
+  --r-tab--background: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
+}
+
+:host(:focus-visible) {
+  --r-tab--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  --r-tab--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-tab--outline-offset: 2px;
+}
+
+:host([active]:not([active=false])) {
+  cursor: default;
+  --r-tab--font-weight: var(--r-font-weight-semibold, 600);
+  --r-tab--marker--visibility: visible;
+}
+
+:host([disabled]:not([disabled=false])) {
+  cursor: not-allowed;
+  --r-tab--pointer-events: none;
+  --r-tab--color: var(--r-text-soft, #686868);
+  --r-tab--marker--background-color: var(--r-border-soft, #686868) ;
+}
+
+.r-tab {
+  position: var(--r-tab--position, relative);
+  font-family: var(--r-tab--font-family, var(--r-font-family-text, system-ui));
+  font-weight: var(--r-tab--font-weight, var(--r-font-weight-regular, 400));
+  font-size: var(--r-tab--font-size, var(--r-font-size-400, 1rem));
+  line-height: var(--r-tab--line-height, var(--r-line-height-m, 1.5));
+  cursor: var(--r-tab--cursor, inherit);
+  pointer-events: var(--r-tab--pointer-events, initial);
+  display: var(--r-tab--display, flex);
+  align-items: var(--r-tab--align-items, center);
+  justify-content: var(--r-tab--justify-content, center);
+  gap: var(--r-tab--gap, var(--r-spacing-050, 0.5rem));
+  width: var(--r-tab--width, auto);
+  padding-top: var(--r-tab--padding-top, var(--r-spacing-025, 0.25rem));
+  padding-right: var(--r-tab--padding-right, var(--r-spacing-050, 0.5rem));
+  padding-bottom: var(--r-tab--padding-bottom, var(--r-spacing-100, 1rem));
+  padding-left: var(--r-tab--padding-left, var(--r-spacing-050, 0.5rem));
+  margin-bottom: var(--r-tab--margin-bottom, -1px);
+  opacity: var(--r-tab--opacity, 1);
+  background: var(--r-tab--background, none);
+  color: var(--r-tab--color, var(--r-text-regular, #282828));
+  border: var(--r-tab--border, none);
+  box-shadow: var(--r-tab--box-shadow, none);
+  outline: var(--r-tab--outline, none);
+  outline-offset: var(--r-tab--outline-offset, 0);
+}
+.r-tab::after {
+  content: var(--r-tab--marker--content, "");
+  width: var(--r-tab--marker--width, 100%);
+  height: var(--r-tab--marker--height, 3px);
+  position: var(--r-tab--marker--position, absolute);
+  bottom: var(--r-tab--marker--bottom, 0);
+  left: var(--r-tab--marker--left, 0);
+  visibility: var(--r-tab--marker--visibility, hidden);
+  background-color: var(--r-tab--marker--background-color, var(--r-border-regular, #282828));
+  transition: var(--r-tab--marker--transition, all 0.1s ease-in);
+}
+.r-tab--disabled-icon,
+.r-tab ::slotted([slot=icon]) {
+  color: var(--r-tab--icon--color, var(--r-icon-soft, #686868));
+}
+
+@media (prefers-reduced-motion) {
+  .r-tab::after {
+    transition: none;
+  }
+}