@momentum-design/components 0.133.4 → 0.133.6

package/dist/react/radio/index.d.ts

@@ -10,19 +10,26 @@ import type { Events } from '../../components/radio/radio.types';
  * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons
  * share the same `name` attribute.
  *
- * **Note:** This component internally renders a native radio input element with custom styling.
+ * ## Validation
  *
- * ## When to use
- * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,
- * consider using a dropdown menu instead.
+ * Radio component support native form validation. But it does not have default validation message.
+ * Also, `required` attribute does not render indicator (red asterisk) for the radio component.
+ *
+ * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`
+ * and set the `help-text` of the `mdc-radiogroup` based on its validation state.
+ *
+ * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear
+ * in a native tooltip when the radio is checked and invalid.
  *
  * ## Accessibility
+ *
  * - Provide clear labels that describe each option
  * - Use `data-aria-label` when a visual label is not present
  * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form
  * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component
  *
  * ## Styling
+ *
  * Use the `static-radio` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
@@ -34,22 +41,19 @@ import type { Events } from '../../components/radio/radio.types';
  *
  * @tagname mdc-radio
  *
- * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
- * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
- * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
- * @csspart help-text - The helper/validation text element.
- * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
- * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart radio-input - The native radio input element that provides the interactive functionality.
- * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ *
+ * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
+ * @slot label - Slot for the label of the radio.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onInput: EventName<Events["onInputEvent"]>;
     onChange: EventName<Events["onChangeEvent"]>;
     onFocus: EventName<Events["onFocusEvent"]>;
 }>;

package/dist/react/radio/index.js

@@ -11,19 +11,26 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons
  * share the same `name` attribute.
  *
- * **Note:** This component internally renders a native radio input element with custom styling.
+ * ## Validation
  *
- * ## When to use
- * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,
- * consider using a dropdown menu instead.
+ * Radio component support native form validation. But it does not have default validation message.
+ * Also, `required` attribute does not render indicator (red asterisk) for the radio component.
+ *
+ * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`
+ * and set the `help-text` of the `mdc-radiogroup` based on its validation state.
+ *
+ * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear
+ * in a native tooltip when the radio is checked and invalid.
  *
  * ## Accessibility
+ *
  * - Provide clear labels that describe each option
  * - Use `data-aria-label` when a visual label is not present
  * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form
  * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component
  *
  * ## Styling
+ *
  * Use the `static-radio` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
@@ -35,26 +42,23 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  *
  * @tagname mdc-radio
  *
- * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
- * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
- * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
- * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
- * @csspart help-text - The helper/validation text element.
- * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
- * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart radio-input - The native radio input element that provides the interactive functionality.
- * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ *
+ * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
+ * @slot label - Slot for the label of the radio.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
     events: {
+        onInput: 'input',
         onChange: 'change',
         onFocus: 'focus',
     },

package/dist/react/radiogroup/index.d.ts

@@ -6,8 +6,6 @@ import Component from '../../components/radiogroup';
  *
  * @tagname mdc-radiogroup
  *
- * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
- *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/radiogroup/index.js

@@ -9,8 +9,6 @@ import { TAG_NAME } from '../../components/radiogroup/radiogroup.constants';
  *
  * @tagname mdc-radiogroup
  *
- * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
- *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/tab/index.d.ts

@@ -56,6 +56,9 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
+ *
+ * @slot prefix - The slot for the content before the text, typically used for the icon.
+ * @slot postfix - The slot for the content after the text, typically used for the badge or chip.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onActiveChange: EventName<Events["onActiveChangeEvent"]>;

package/dist/react/tab/index.js

@@ -56,6 +56,9 @@ import { TAG_NAME } from '../../components/tab/tab.constants';
  * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
+ *
+ * @slot prefix - The slot for the content before the text, typically used for the icon.
+ * @slot postfix - The slot for the content after the text, typically used for the badge or chip.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/utils/mixins/DataAriaLabelMixin.d.ts

@@ -3,4 +3,18 @@ import type { Constructor } from './index.types';
 export interface DataAriaLabelMixinInterface {
     dataAriaLabel: string | null;
 }
+/**
+ * This mixin adds a `data-aria-label` property to the component, which can be used to set the Aria-Label attribute for accessibility.
+ *
+ * It is useful when a component inside the shadow DOM needs to be labeled for accessibility purposes.
+ * The problem with using `aria-label` directly on the host element is that the Screen Reader will read both
+ * the host element and the component inside the shadow DOM, which can lead to redundant or confusing information being read out.
+ *
+ * So instead the consumer can use `data-aria-label` to set the Aria-Label attribute on the component inside the shadow DOM.
+ *
+ * For example all the input component which has a native input element inside the shadow DOM can use this mixin to allow the
+ * consumer to set the Aria-Label attribute on the native input element for better accessibility.
+ * @param superClass
+ * @constructor
+ */
 export declare const DataAriaLabelMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DataAriaLabelMixinInterface> & T;

package/dist/utils/mixins/DataAriaLabelMixin.js

@@ -8,6 +8,20 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property } from 'lit/decorators.js';
+/**
+ * This mixin adds a `data-aria-label` property to the component, which can be used to set the Aria-Label attribute for accessibility.
+ *
+ * It is useful when a component inside the shadow DOM needs to be labeled for accessibility purposes.
+ * The problem with using `aria-label` directly on the host element is that the Screen Reader will read both
+ * the host element and the component inside the shadow DOM, which can lead to redundant or confusing information being read out.
+ *
+ * So instead the consumer can use `data-aria-label` to set the Aria-Label attribute on the component inside the shadow DOM.
+ *
+ * For example all the input component which has a native input element inside the shadow DOM can use this mixin to allow the
+ * consumer to set the Aria-Label attribute on the native input element for better accessibility.
+ * @param superClass
+ * @constructor
+ */
 export const DataAriaLabelMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.4",
+  "version": "0.133.6",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"