@momentum-design/components 0.80.0 → 0.80.2

package/dist/components/select/select.component.js

@@ -26,9 +26,11 @@ import styles from './select.styles';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
  * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-select
  *
@@ -68,11 +70,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         super.connectedCallback();
         // select will only contain name and value will be defined in the options.
         this.value = undefined;
-        this.addEventListener('keydown', this.handleKeydown);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this.handleKeydown);
     }
     /**
      * A helper function which returns a flattened array of all valid options from the assigned slot.
@@ -94,6 +91,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     handlePopoverOpen() {
         this.displayPopover = true;
         this.baseIconName = ARROW_ICON.ARROW_UP;
+        this.updateActivedescendant();
     }
     handlePopoverClose() {
         this.displayPopover = false;
@@ -343,7 +341,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     updateActivedescendant(target) {
         var _a, _b;
         const currentIndex = this.getAllValidOptions().findIndex((option) => option === target);
-        this.activeDescendant = (_b = (_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
+        this.activeDescendant = ((_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.getAllValidOptions()[0]) === null || _b === void 0 ? void 0 : _b.id);
     }
     resetActivedescendant() {
         this.activeDescendant = '';
@@ -452,6 +450,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       <mdc-popover
         id="options-popover"
         triggerid="select-base-triggerid"
+        @keydown="${this.handleKeydown}"
         interactive
         ?visible="${this.displayPopover}"
         hide-on-outside-click
@@ -482,6 +481,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         <div
           id="select-base-triggerid"
           part="base-container"
+          @keydown="${this.handleKeydown}"
           tabindex="${this.disabled ? '-1' : '0'}"
           class="${this.disabled ? '' : 'mdc-focus-ring'}"
           role="combobox"
@@ -490,6 +490,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
           aria-expanded="${this.displayPopover ? 'true' : 'false'}"
+          aria-controls="options-popover"
         >
       ${this.selectedIcon
             ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`

package/dist/components/textarea/index.d.ts

@@ -2,6 +2,7 @@ import Textarea from './textarea.component';
 import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-textarea']: Textarea;

package/dist/components/textarea/index.js

@@ -3,5 +3,6 @@ import { TAG_NAME } from './textarea.constants';
 import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
 Textarea.register(TAG_NAME);
 export default Textarea;

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

@@ -32,10 +32,10 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
  * exceeds or restored.
  *
- *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
- * @dependency mdc-button
+ * @dependency mdc-toggletip
  *
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled

package/dist/components/textarea/textarea.component.js

@@ -46,10 +46,10 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
  * exceeds or restored.
  *
- *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
- * @dependency mdc-button
+ * @dependency mdc-toggletip
  *
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled

package/dist/components/toggle/index.d.ts

@@ -1,5 +1,8 @@
+import '../button';
 import '../icon';
 import '../statictoggle';
+import '../text';
+import '../toggletip';
 import Toggle from './toggle.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/toggle/index.js

@@ -1,5 +1,8 @@
+import '../button';
 import '../icon';
 import '../statictoggle';
+import '../text';
+import '../toggletip';
 import Toggle from './toggle.component';
 import { TAG_NAME } from './toggle.constants';
 Toggle.register(TAG_NAME);

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

@@ -13,8 +13,11 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-statictoggle
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-toggle
  *

package/dist/components/toggle/toggle.component.js

@@ -26,8 +26,11 @@ import styles from './toggle.styles';
  *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-statictoggle
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-toggle
  *

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

@@ -47,7 +47,7 @@ declare class ToggleTip extends Popover {
       *
       * Please refer to the `mdc-screenreaderannouncer` component for more details.
     */
-    screenreaderAnnouncerIdentity: string;
+    screenreaderAnnouncerIdentity?: string;
     connectedCallback(): void;
     /**
      * @returns The text content of all the nodes in the default slot, joined by a space.

package/dist/components/toggletip/toggletip.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property, queryAssignedNodes, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import Popover from '../popover/popover.component';
 import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { DEFAULTS } from './toggletip.constants';
@@ -53,19 +54,11 @@ class ToggleTip extends Popover {
         super(...arguments);
         /** @internal */
         this.currentAnnouncement = '';
-        /**
-          * Set this attribute with the id of the element in the DOM, to which announcement
-          * elements will be appended.
-          * If an id is provided, the announcement elements will be appended to this element.
-          * If id is not provided, a visually hidden div element will be created in the DOM.
-          *
-          * Please refer to the `mdc-screenreaderannouncer` component for more details.
-        */
-        this.screenreaderAnnouncerIdentity = '';
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
-        this.closeButton = DEFAULTS.CLOSE_BUTTON;
+        this.closeButton = (_a = this.closeButton) !== null && _a !== void 0 ? _a : DEFAULTS.CLOSE_BUTTON;
         this.closeButtonAriaLabel = DEFAULTS.CLOSE_BUTTON_ARIA_LABEL;
         this.placement = DEFAULTS.PLACEMENT;
         this.trigger = DEFAULTS.CLICK;
@@ -108,7 +101,7 @@ class ToggleTip extends Popover {
         return html `
       ${super.render()}
       <mdc-screenreaderannouncer
-        identity="${this.screenreaderAnnouncerIdentity}"
+        identity="${ifDefined(this.screenreaderAnnouncerIdentity)}"
         announcement="${this.currentAnnouncement}"
         delay="300">
       </mdc-screenreaderannouncer>
@@ -126,6 +119,6 @@ __decorate([
 ], ToggleTip.prototype, "currentAnnouncement", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'screenreader-announcer-identity' }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], ToggleTip.prototype, "screenreaderAnnouncerIdentity", void 0);
 export default ToggleTip;

package/dist/components/toggletip/toggletip.styles.js

@@ -22,11 +22,11 @@ const styles = css `
     color: var(--mdc-toggletip-text-color-contrast);
   }
 
-  :host(:dir(ltr))::part(popover-content) {
+  :host([close-button]:dir(ltr))::part(popover-content) {
     margin-right: 2rem;
   }
 
-  :host(:dir(rtl))::part(popover-content) {
+  :host([close-button]:dir(rtl))::part(popover-content) {
     margin-left: 2rem;
   }
 `;