@riverty/web-components 6.2.1 → 6.3.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 6.3.0 (2026-03-04)
+
+### 🚀 Features
+
+- **badge**: added css variables for the content and `::part()` support to give an ability to provide styles.
+- **input-code**: add `rComplete` event (alias `r-complete`) that fires when all segments are filled with values. Event payload: `{ value: string, isComplete: boolean }`. The event fires only once per completion to avoid redundant triggers on every keystroke when the input is complete.
+- **input**: add dynamic passthrough for native HTML input attributes. 
+- **tooltip**: dialog layer is used for position
+- **storybook**: add comprehensive documentation templates (anatomy, do/don't, grouping) and alert component stories with improved styling and layout.
+- **tests**: improve button and tabs E2E tests for better reliability and accuracy.
+- **toast**: prevent emitting dismiss event if component is disconnected from DOM. Also clear pending timers on disconnection to prevent events from firing after component removal.
+- **input-phone-number**: added new message `invalidPhoneNumberMessage` to display when phone number is not valid.
+- **form components**: added `setCustomValidity` method to form components to validate an element, and display provided message in case value is invalid.
+- **r-input**: Added native events support to r-input component
+- **pagination**: add property watchers (`@Watch`) to handle pagination state changes more efficiently, replacing the `componentDidUpdate` lifecycle method for better performance and reactivity.
+
+### 🩹 Fixes
+
+- **r-input**: fixed TypeError when using type="number" with null value by adding null checks in handleTypeChange and validEmailPattern getters. Null is a valid value for native HTML number input.
+- **tooltip**: add configurable white-space and normalize style token fallbacks
+- **toast-group**: change from scoped to shadow DOM to fix slot functionality
+
+  **toast**: improve animation performance and smoothness
+
 ## 6.2.1 (2026-02-12)
 
 ### 🩹 Fixes

package/README.md

@@ -5,3 +5,81 @@
 Riverty Design System: a design and development toolkit tailor-made for Riverty teams and collaborators.
 
 → [designsystem.riverty.com](https://designsystem.riverty.com/)
+
+## Contributing
+
+We welcome contributions to the Web Components package! Here's how to get started:
+
+### Development Setup
+
+```bash
+cd packages/components
+npm install
+npm run develop  # Starts watch mode
+```
+
+### Creating Components
+
+1. **Generate a new component**:
+   ```bash
+   npx stencil generate component-name
+   ```
+
+2. **Follow the component checklist**:
+   - [ ] TypeScript definitions with JSDoc comments
+   - [ ] Sass styles following BEM methodology
+   - [ ] Responsive design
+   - [ ] Dark mode support (via CSS variables)
+   - [ ] Storybook story in `packages/storybook/stories/`
+   - [ ] Unit tests (Jest)
+   - [ ] Accessibility (ARIA labels, keyboard navigation)
+   - [ ] Documentation
+
+### Component Structure
+
+```typescript
+import { Component, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'r-component',
+  styleUrl: 'component.scss',
+  shadow: true,
+})
+export class RComponent {
+  /** Description of prop */
+  @Prop() myProp: string;
+
+  render() {
+    return <div>{this.myProp}</div>;
+  }
+}
+```
+
+### Testing
+
+```bash
+# Run unit tests
+npm run test
+
+# Run in watch mode
+npm run test -- --watch
+```
+
+### Best Practices
+
+- Use web component standards
+- Follow StencilJS conventions
+- Ensure accessibility (WCAG 2.1/2.2 AA)
+- Support keyboard navigation
+- Test with screen readers
+- Include all component variants in Storybook
+- Write meaningful JSDoc comments
+
+### Useful Commands
+
+- `npm run build` - Build the component library
+- `npm run develop` - Watch mode for development
+- `npm run test` - Run unit tests
+- `npm run generate` - Generate new component
+
+For complete contribution guidelines, see [CONTRIBUTING.md](../../CONTRIBUTING.md) in the repository root.

package/custom-elements.json

@@ -1551,6 +1551,10 @@
           "name": "invalid",
           "description": "Validity indicator, serving to change UI of the component"
         },
+        {
+          "name": "invalid-phone-number-message",
+          "description": "Custom error message displayed when phone number is not valid."
+        },
         {
           "name": "label",
           "description": "The label for the phone number."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riverty/web-components",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "Riverty Design System: Web Components",
   "homepage": "https://designsystem.riverty.com/",
   "private": false,
@@ -38,7 +38,8 @@
     "test:spec": "stencil test --spec",
     "generate": "stencil generate",
     "clean": "rm -rf dist; rm -rf loader",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "check:version": "node ../../bin/check-versions.js"
   },
   "dependencies": {
     "@stencil/core": "^4.36.3",

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;

package/dist/cjs/focusable-Oll_rmtP.js

@@ -1,28 +0,0 @@
-'use strict';
-
-function focusableElements(root) {
-    const selectors = [
-        'a[href]',
-        'button:not([disabled])',
-        'textarea:not([disabled])',
-        'input:not([disabled])',
-        'select:not([disabled])',
-        '[tabindex]:not([tabindex="-1"])',
-        'r-button',
-        'r-checkbox',
-        'r-radio-button',
-        'r-input',
-        'r-textarea',
-        'r-select',
-        'r-input-code',
-        'r-input-date',
-        'r-input-password',
-        'r-input-phone-number'
-    ];
-    return Array.from(root.querySelectorAll(selectors.join(',')))
-        .filter((el) => el instanceof HTMLElement &&
-        !el.hasAttribute('disabled') &&
-        !el.getAttribute('aria-hidden')) || null;
-}
-
-exports.focusableElements = focusableElements;

package/dist/cjs/formData-B2DZyLxP.js

@@ -1,44 +0,0 @@
-'use strict';
-
-function appendControlToFormData(controlOrControls, formData) {
-    var _a, _b, _c;
-    const controls = Array.isArray(controlOrControls)
-        ? controlOrControls
-        : [controlOrControls];
-    for (const control of controls) {
-        const name = control.name;
-        if (!name)
-            continue;
-        if (control.disabled)
-            continue;
-        const tag = (_b = (_a = control.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (tag === 'BUTTON' || tag === 'FIELDSET')
-            continue;
-        let valueToAppend = '';
-        switch (control.type) {
-            case 'checkbox':
-            case 'radio':
-                if (!control.checked)
-                    continue;
-                valueToAppend = control.value || 'on';
-                break;
-            case 'file':
-                if (control.files && control.files.length > 0) {
-                    for (const file of control.files) {
-                        formData.append(name, file);
-                    }
-                    continue;
-                }
-                else {
-                    formData.append(name, new File([], ''));
-                    continue;
-                }
-            default:
-                valueToAppend = (_c = control.value) !== null && _c !== void 0 ? _c : '';
-                break;
-        }
-        formData.append(name, valueToAppend);
-    }
-}
-
-exports.appendControlToFormData = appendControlToFormData;