@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/popover-action/popover-action.css

@@ -0,0 +1,21 @@
+:host slot {
+  display: contents;
+}
+
+::slotted(r-button) {
+  --r-button--color: var(--r-text-regular);
+  --r-button--border-width: 0;
+  --r-button--background-color: rgba(0,0,0,0);
+  --r-button--slot--position: relative;
+  --r-button--slot--text-decoration: underline;
+  --r-button--padding: 10px 2px 18px 2px;
+  --r-button--slot--text-underline-offset: 9px;
+}
+
+::slotted(r-button:hover:not([disabled]):not([disabled=false])) {
+  --r-button--background-color: var(--r-background-interactive-hovered);
+}
+
+::slotted(r-button:active:not([disabled]):not([disabled=false])) {
+  --r-button--background-color: var(--r-background-interactive-pressed);
+}

package/dist/collection/components/popover-action/popover-action.js

@@ -0,0 +1,150 @@
+import { Host, h } from "@stencil/core";
+import { setupInverseThemeAwareness, stopInverseThemeAwareness } from "../../utils/theming";
+import { focusableElements } from "../../utils/focusable";
+export class PopoverAction {
+    constructor() {
+        this.handleSlotChange = () => {
+            this.setButtonDefaults();
+        };
+    }
+    connectedCallback() {
+        // Apply default properties to any buttons
+        this.setButtonDefaults();
+        const themeContextElement = this.host.closest('r-popover');
+        setupInverseThemeAwareness(this.host, themeContextElement);
+    }
+    disconnectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        stopInverseThemeAwareness(this.host, themeContextElement);
+    }
+    setButtonDefaults() {
+        const buttons = this.host.querySelectorAll('r-button');
+        // Set default attributes on each button
+        buttons.forEach(button => {
+            // Default size="small"
+            if (!button.hasAttribute('size')) {
+                button.setAttribute('size', 'small');
+            }
+            // Default variant="text-inline"
+            if (!button.hasAttribute('variant')) {
+                button.setAttribute('variant', 'text-inline');
+            }
+        });
+    }
+    /**
+     * Set focus on the first focusable element within the popover action
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    async setFocus() {
+        if (!this.activeElement)
+            return;
+        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
+            await this.activeElement.setFocus();
+            return;
+        }
+        this.activeElement.focus();
+        return this.activeElement;
+    }
+    /**
+     * Remove focus from the first focusable element within the popover action
+     * @returns {Promise<void>}
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    get activeElement() {
+        return this.getActiveElements[0] || null;
+    }
+    /**
+     * Get all focusable elements within the popover content
+     * @returns {Promise<HTMLElement[]>} Array of focusable elements
+     */
+    async getActiveElements() {
+        return focusableElements(this.host);
+    }
+    render() {
+        return (h(Host, { key: 'a2e9f0482b6de85e54d5fb6c748113efbb76b887', slot: "action" }, h("slot", { key: '656f07644cd0d2e9a15263f644676a3e698d005d', onSlotchange: this.handleSlotChange })));
+    }
+    static get is() { return "r-popover-action"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-action.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-action.css"]
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "Set focus on the first focusable element within the popover action",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The focused element or null if no element is found"
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove focus from the first focusable element within the popover action",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getActiveElements": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement[]>"
+                },
+                "docs": {
+                    "text": "Get all focusable elements within the popover content",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Array of focusable elements"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/popover-content/popover-content.css

@@ -0,0 +1,9 @@
+::slotted(*:first-child) {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+::slotted(*:last-child) {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}

package/dist/collection/components/popover-content/popover-content.js

@@ -0,0 +1,130 @@
+import { Host, h } from "@stencil/core";
+import { setupInverseThemeAwareness, stopInverseThemeAwareness } from "../../utils/theming";
+import { focusableElements } from "../../utils/focusable";
+export class PopoverContent {
+    connectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        setupInverseThemeAwareness(this.host, themeContextElement);
+    }
+    disconnectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        stopInverseThemeAwareness(this.host, themeContextElement);
+    }
+    /**
+     * Set focus on the first focusable element within the popover content
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    async setFocus() {
+        var _a;
+        if (!this.activeElement)
+            return Promise.resolve(null);
+        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
+            await this.activeElement.setFocus();
+            return Promise.resolve(this.activeElement);
+        }
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.focus();
+        return Promise.resolve(this.activeElement);
+    }
+    /**
+     * Remove focus from the first focusable element within the popover content
+     * @returns {Promise<void>}
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    get activeElement() {
+        return this.getActiveElements[0] || null;
+    }
+    /**
+     * Get all focusable elements within the popover content
+     * @returns {Promise<HTMLElement[]>} Array of focusable elements
+     */
+    async getActiveElements() {
+        return focusableElements(this.host);
+    }
+    render() {
+        return (h(Host, { key: '2384c04a8610e5d26bcd3e3fb4e70c99fca7d76a', slot: "content", class: "r-typography" }, h("slot", { key: '52ce40873c2e32725ee8ef8fc385d498ff8b973c' })));
+    }
+    static get is() { return "r-popover-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-content.css"]
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "Set focus on the first focusable element within the popover content",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The focused element or null if no element is found"
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove focus from the first focusable element within the popover content",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getActiveElements": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement[]>"
+                },
+                "docs": {
+                    "text": "Get all focusable elements within the popover content",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Array of focusable elements"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/popover-headline/popover-headline.css

@@ -0,0 +1,7 @@
+:host {
+  margin: 0;
+  font-family: var(--r-font-family-heading);
+  font-size: var(--r-font-size-500, 1.25rem);
+  font-weight: var(--r-font-weight-light, 300);
+  line-height: var(--r-line-height-s, 1.25);
+}

package/dist/collection/components/popover-headline/popover-headline.js

@@ -0,0 +1,28 @@
+import { Host, h } from "@stencil/core";
+import { setupInverseThemeAwareness, stopInverseThemeAwareness } from "../../utils/theming";
+export class PopoverHeadline {
+    connectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        setupInverseThemeAwareness(this.host, themeContextElement);
+    }
+    disconnectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        stopInverseThemeAwareness(this.host, themeContextElement);
+    }
+    render() {
+        return (h(Host, { key: 'bdbaecb36f49d54a1b33ef27d1c954834df68198', slot: "headline" }, h("slot", { key: '82eb6ae289211e5a23149e12125c1c30cf6b3ffd' })));
+    }
+    static get is() { return "r-popover-headline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-headline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-headline.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/popover-trigger/exports.js

@@ -0,0 +1 @@
+export const popoverTriggerActionArray = ['show', 'hide', 'toggle'];

package/dist/collection/components/popover-trigger/popover-trigger.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  cursor: pointer;
+}

package/dist/collection/components/popover-trigger/popover-trigger.js

@@ -0,0 +1,163 @@
+import { Host, h } from "@stencil/core";
+export class PopoverTrigger {
+    constructor() {
+        this.handleMouseEnter = () => {
+            this.triggerMouseEnter.emit();
+        };
+        this.handleMouseLeave = () => {
+            this.triggerMouseLeave.emit();
+        };
+    }
+    get activeElement() {
+        const selector = [
+            'r-button',
+            'r-icon-button',
+            'a[href]',
+            'button:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+        const el = this.host.querySelector(selector);
+        if (!el || !(el instanceof HTMLElement))
+            return null;
+        const tag = el.tagName.toLowerCase();
+        // Return strongly typed elements if needed
+        if (tag === 'r-button' || tag === 'r-icon-button') {
+            return el; // Adjust type to your component’s base
+        }
+        // Default mappings for known HTML types
+        if (tag === 'button')
+            return el;
+        if (tag === 'a')
+            return el;
+        return el;
+    }
+    /**
+     * Set focus on the first focusable element within the trigger
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    async setFocus() {
+        if (!this.activeElement)
+            return Promise.resolve(null);
+        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
+            await this.activeElement.setFocus();
+            return Promise.resolve(this.activeElement);
+        }
+        this.activeElement.focus();
+        return Promise.resolve(this.activeElement);
+    }
+    /**
+     * Remove focus from the first focusable element within the trigger
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        return (h(Host, { key: '6c97f11b7263d0cf574fdafcef3d7a9733fe7925', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '7d434e3505eda793e8d1d50f9fb1aa608061fa50' })));
+    }
+    static get is() { return "r-popover-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-trigger.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-trigger.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "triggerMouseEnter",
+                "name": "triggerMouseEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "triggerMouseEnter"
+                        }, {
+                            "name": "property",
+                            "text": "{HTMLRPopoverTriggerElement} element - The trigger element"
+                        }, {
+                            "name": "property",
+                            "text": "{MouseEvent} event - The mouse event"
+                        }],
+                    "text": "Event emitted when the mouse enters the trigger"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "triggerMouseLeave",
+                "name": "triggerMouseLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "triggerMouseLeave"
+                        }, {
+                            "name": "property",
+                            "text": "{HTMLRPopoverTriggerElement} element - The trigger element"
+                        }, {
+                            "name": "property",
+                            "text": "{MouseEvent} event - The mouse event"
+                        }],
+                    "text": "Event emitted when the mouse leaves the trigger"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "Set focus on the first focusable element within the trigger",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The focused element or null if no element is found"
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove focus from the first focusable element within the trigger",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/progress-bar/progress-bar.css

@@ -0,0 +1,41 @@
+:host {
+  --r-progress-bar--appearance: none;
+  --r-progress-bar--width: 100%;
+  --r-progress-bar--height: 8px;
+  --r-progress-bar--background-color: var(--r-background-soft);
+  --r-progress-bar--border-radius: 0;
+  --r-progress-bar--border: none;
+  --progress-bar--value--background-color: var(--r-background-interactive-regular);
+  --progress-bar--value--border-radius: 0;
+  --progress-bar--value--transition: all 0.6s ease;
+  display: block;
+}
+
+.r-progress-bar {
+  appearance: var(--r-progress-bar--appearance);
+  width: var(--r-progress-bar--width);
+  height: var(--r-progress-bar--height);
+  background-color: var(--r-progress-bar--background-color);
+  border-radius: var(--r-progress-bar--border-radius);
+  border: var(--r-progress-bar--border);
+}
+.r-progress-bar::-webkit-progress-bar {
+  background-color: var(--r-progress-bar--background-color);
+  border-radius: var(--r-progress-bar--border-radius);
+  border: var(--r-progress-bar--border);
+}
+.r-progress-bar::-webkit-progress-value {
+  background-color: var(--progress-bar--value--background-color);
+  border-radius: var(--progress-bar--value--border-radius);
+  transition: var(--progress-bar--value--transition);
+}
+.r-progress-bar::-moz-progress-bar {
+  background-color: var(--progress-bar--value--background-color);
+  border-radius: var(--progress-bar--value--border-radius);
+  transition: var(--progress-bar--value--transition);
+}
+.r-progress-bar::-ms-fill {
+  background-color: var(--progress-bar--value--background-color);
+  border-radius: var(--progress-bar--value--border-radius);
+  transition: var(--progress-bar--value--transition);
+}

package/dist/collection/components/progress-bar/progress-bar.js

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+export class ProgressBar {
+    constructor() {
+        /** Progress bar value */
+        this.progress = 0;
+    }
+    render() {
+        const { progress, rAriaLabel } = this;
+        const progressBarAttrs = {
+            value: progress,
+            max: '100',
+            'aria-label': rAriaLabel
+        };
+        return (h(Host, { key: '832812688a18bea634c8ff2c5ea69599cdefdcff' }, h("progress", Object.assign({ key: 'd3384feada9ee1594e3ee331377d30ae1e8725f1' }, progressBarAttrs, { class: "r-progress-bar" }))));
+    }
+    static get is() { return "r-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progress": {
+                "type": "number",
+                "attribute": "progress",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress bar value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "rAriaLabel": {
+                "type": "string",
+                "attribute": "r-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets string value for `aria-label` attribute\n(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+}