@momentum-design/components 0.101.0 → 0.101.2

package/dist/components/input/input.styles.js

@@ -20,7 +20,6 @@ const styles = [
       --mdc-input-success-border-color: var(--mds-color-theme-text-success-normal);
       --mdc-input-primary-border-color: var(--mds-color-theme-text-accent-normal);
     }
-
     :host,
     .input-container,
     .input-section,
@@ -87,7 +86,7 @@ const styles = [
 
     .prefix-text {
       color: var(--mdc-input-support-text-color);
-      white-space: nowrap; // restrict prefix text to be in one line
+      white-space: nowrap; /* restrict prefix text to be in one line */
     }
 
     :host(:not([disabled])) .input-container:hover {

package/dist/components/popover/popover.styles.js

@@ -36,15 +36,13 @@ const styles = css `
     color: var(--mdc-popover-inverted-text-color);
   }
 
-  :host([color='contrast']) {
-    .popover-arrow {
-      background-color: var(--mdc-popover-inverted-background-color);
-      border-color: var(--mdc-popover-inverted-border-color);
-    }
-
-    .popover-close {
-      color: var(--mdc-popover-inverted-text-color);
-    }
+  :host([color='contrast']) .popover-arrow {
+    background-color: var(--mdc-popover-inverted-background-color);
+    border-color: var(--mdc-popover-inverted-border-color);
+  }
+
+  :host([color='contrast']) .popover-close {
+    color: var(--mdc-popover-inverted-text-color);
   }
 
   :host::part(popover-content) {

package/dist/components/stepperconnector/stepperconnector.component.js

@@ -47,9 +47,6 @@ class StepperConnector extends Component {
     updated(changedProperties) {
         var _a;
         super.updated(changedProperties);
-        if (changedProperties.has('orientation')) {
-            this.ariaOrientation = this.orientation;
-        }
         const context = (_a = this.stepperContext) === null || _a === void 0 ? void 0 : _a.value;
         if (!context || !context.orientation)
             return;

package/dist/components/stepperitem/stepperitem.component.d.ts

@@ -10,6 +10,8 @@ declare const StepperItem_base: import("../../utils/mixins/index.types").Constru
  * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
  * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
  *
+ * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/dist/components/stepperitem/stepperitem.component.js

@@ -26,6 +26,8 @@ import { DEFAULT, STATUS, STATUS_ICON } from './stepperitem.constants';
  * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
  * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
  *
+ * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/dist/components/tablist/tablist.styles.js

@@ -12,10 +12,10 @@ const styles = [
       width: var(--mdc-tablist-width);
       display: flex;
       align-items: center;
+    }
 
-      ::slotted(mdc-tab) {
-        width: initial;
-      }
+    :host ::slotted(mdc-tab) {
+      width: initial;
     }
 
     :host .container {

package/dist/custom-elements.json

@@ -33658,7 +33658,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.",
+          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
           "name": "StepperItem",
           "cssProperties": [
             {
@@ -33934,7 +33934,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-stepperitem",
-          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
+          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
           "customElement": true
         }
       ],

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

@@ -8,6 +8,8 @@ import Component from '../../components/stepperitem';
  * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
  * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
  *
+ * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/dist/react/stepperitem/index.js

@@ -10,6 +10,8 @@ import { TAG_NAME } from '../../components/stepperitem/stepperitem.constants';
  * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
  * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
  *
+ * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/package.json

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