@momentum-design/components 0.120.36 → 0.120.38

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

@@ -37,7 +37,7 @@ declare class Animation extends Component {
     /**
      * Aria-labelledby attribute to be set for accessibility
      */
-    ariaLabelledBy: string | null;
+    ariaLabelledby: string | null;
     /**
      * Lottie animation instance
      */

package/dist/components/animation/animation.component.js

@@ -13,6 +13,7 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import lottie from 'lottie-web/build/player/lottie_light';
 import animationManifest from '@momentum-design/animations/dist/manifest';
 import { Component } from '../../models';
+import { ROLE } from '../../utils/roles';
 import styles from './animation.styles';
 import { DEFAULTS } from './animation.constants';
 /**
@@ -52,7 +53,7 @@ class Animation extends Component {
         /**
          * Aria-labelledby attribute to be set for accessibility
          */
-        this.ariaLabelledBy = null;
+        this.ariaLabelledby = null;
         /**
          * Container for the animation
          */
@@ -143,8 +144,8 @@ class Animation extends Component {
         if (changedProperties.has('name') || changedProperties.has('loop') || changedProperties.has('autoplay')) {
             this.getAnimationData();
         }
-        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
+            this.role = this.ariaLabel || this.ariaLabelledby ? ROLE.IMG : null;
         }
     }
     disconnectedCallback() {
@@ -180,5 +181,5 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'aria-labelledby' }),
     __metadata("design:type", Object)
-], Animation.prototype, "ariaLabelledBy", void 0);
+], Animation.prototype, "ariaLabelledby", void 0);
 export default Animation;

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

@@ -117,7 +117,7 @@ declare class Dialog extends Dialog_base {
      * Defines a string value for the aria-describedby attribute that refers to the element
      * describing the dialog for accessibility
      */
-    ariaDescribedBy: string | null;
+    ariaDescribedby: string | null;
     /**
      * Defines a string value for the aria-description attribute that refers to the element
      * describing the dialog for accessibility

package/dist/components/dialog/dialog.component.js

@@ -131,7 +131,7 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          * Defines a string value for the aria-describedby attribute that refers to the element
          * describing the dialog for accessibility
          */
-        this.ariaDescribedBy = null;
+        this.ariaDescribedby = null;
         /**
          * Defines a string value for the aria-description attribute that refers to the element
          * describing the dialog for accessibility
@@ -251,8 +251,8 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             this.updateFooterButtonColors(this.variant);
         }
         if (changedProperties.has('ariaLabel') ||
-            changedProperties.has('ariaLabelledBy') ||
-            changedProperties.has('ariaDescribedBy') ||
+            changedProperties.has('ariaLabelledby') ||
+            changedProperties.has('ariaDescribedby') ||
             changedProperties.has('ariaDescription') ||
             changedProperties.has('headerText') ||
             changedProperties.has('descriptionText')) {
@@ -296,7 +296,7 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             }
         }
         // If aria-describedby or aria-description is already set, do not override it
-        if (!this.ariaDescribedBy && !this.ariaDescription) {
+        if (!this.ariaDescribedby && !this.ariaDescription) {
             if (this.descriptionText) {
                 this.setAttribute('aria-description', this.descriptionText);
             }
@@ -462,7 +462,7 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: 'aria-describedby' }),
     __metadata("design:type", Object)
-], Dialog.prototype, "ariaDescribedBy", void 0);
+], Dialog.prototype, "ariaDescribedby", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'aria-description' }),
     __metadata("design:type", Object)

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

@@ -72,7 +72,7 @@ declare class Icon extends Component {
     /**
      * Aria-labelledby attribute to be set for accessibility
      */
-    ariaLabelledBy: string | null;
+    ariaLabelledby: string | null;
     private readonly iconProviderContext;
     private abortController?;
     constructor();

package/dist/components/icon/icon.component.js

@@ -77,7 +77,7 @@ class Icon extends Component {
         /**
          * Aria-labelledby attribute to be set for accessibility
          */
-        this.ariaLabelledBy = null;
+        this.ariaLabelledby = null;
         this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
         this.abortController = new AbortController(); // Initialize AbortController
     }
@@ -205,8 +205,8 @@ class Icon extends Component {
                 }
             });
         }
-        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
+            this.role = this.ariaLabel || this.ariaLabelledby ? 'img' : null;
         }
         if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();
@@ -263,7 +263,7 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'aria-labelledby' }),
     __metadata("design:type", Object)
-], Icon.prototype, "ariaLabelledBy", void 0);
+], Icon.prototype, "ariaLabelledby", void 0);
 __decorate([
     state(),
     __metadata("design:type", AbortController)

package/dist/components/illustration/illustration.component.js

@@ -12,6 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
 import IllustrationProvider from '../illustrationprovider/illustrationprovider.component';
+import { ROLE } from '../../utils/roles';
 import styles from './illustration.styles';
 import { svgFetch } from './illustration.utils';
 import { DEFAULTS } from './illustration.constants';
@@ -181,8 +182,8 @@ class Illustration extends Component {
                 }
             });
         }
-        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = this.ariaLabel || this.ariaLabelledby ? 'img' : null;
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledby')) {
+            this.role = this.ariaLabel || this.ariaLabelledby ? ROLE.IMG : null;
         }
     }
     disconnectedCallback() {

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

@@ -447,6 +447,19 @@ declare class Popover extends Popover_base {
      */
     private positionPopover;
     protected isEventFromTrigger(event: Event): boolean;
+    /**
+     * Detects if the current layout is in RTL (right-to-left) mode.
+     * @returns True if RTL, false if LTR
+     * @internal
+     */
+    protected isRtl(): boolean;
+    /**
+     * Adjusts the placement for RTL layouts by flipping left/right directions.
+     * @param placement - The original placement value
+     * @returns The adjusted placement for RTL or original placement for LTR
+     * @internal
+     */
+    protected adjustPlacementForRtl(placement: PopoverPlacement): PopoverPlacement;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/popover/popover.component.js

@@ -648,8 +648,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 const { triggerElement } = this;
                 if (!triggerElement)
                     return;
+                const adjustedPlacement = this.adjustPlacementForRtl(this.placement);
                 const { x, y, middlewareData, placement } = await computePosition(triggerElement, this, {
-                    placement: this.placement,
+                    placement: adjustedPlacement,
                     middleware,
                     strategy: this.strategy,
                 });
@@ -860,6 +861,34 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         }
         return ((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) === this.triggerID;
     }
+    /**
+     * Detects if the current layout is in RTL (right-to-left) mode.
+     * @returns True if RTL, false if LTR
+     * @internal
+     */
+    isRtl() {
+        return window.getComputedStyle(this).direction === 'rtl';
+    }
+    /**
+     * Adjusts the placement for RTL layouts by flipping left/right directions.
+     * @param placement - The original placement value
+     * @returns The adjusted placement for RTL or original placement for LTR
+     * @internal
+     */
+    adjustPlacementForRtl(placement) {
+        if (!this.isRtl()) {
+            return placement;
+        }
+        switch (placement) {
+            case POPOVER_PLACEMENT.LEFT: return POPOVER_PLACEMENT.RIGHT;
+            case POPOVER_PLACEMENT.LEFT_START: return POPOVER_PLACEMENT.RIGHT_START;
+            case POPOVER_PLACEMENT.LEFT_END: return POPOVER_PLACEMENT.RIGHT_END;
+            case POPOVER_PLACEMENT.RIGHT: return POPOVER_PLACEMENT.LEFT;
+            case POPOVER_PLACEMENT.RIGHT_START: return POPOVER_PLACEMENT.LEFT_START;
+            case POPOVER_PLACEMENT.RIGHT_END: return POPOVER_PLACEMENT.LEFT_END;
+            default: return placement;
+        }
+    }
     render() {
         return html `
       <div part="popover-hover-bridge"></div>