@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,216 +0,0 @@
-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: '9a8684fe78d610b90c824a8bd06371efc222b94a' }, h("ol", { key: '89c37db27cab79946f29e5302784f3a17c853cef', 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: '92d043648fb9c12ca5222a569ec40a917798af5a', 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

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

@@ -1,171 +0,0 @@
-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: '4f55b5491ec5eee7cad6313fa85e7d6cc89b2178', role: "listitem", "aria-current": this.active ? 'step' : null }, h("div", { key: '2864f0e19f2f11af0f8674b9a701cd948024c085', class: "r-stepper-item" }, h("div", { key: 'de896ec98a13a4b20965a3ca58c5517a30de1f74', 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: 'cf3b6b5e3f4454830ecce06a6b6c16225aadd93e', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, h("slot", { key: '65bd1f231c445f9681750c71ef156297edbf05fb' })))));
-    }
-    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

@@ -1,81 +0,0 @@
-: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;
-  }
-}