@momentum-design/components 0.80.5 → 0.81.1

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

@@ -84,15 +84,25 @@ declare class Dialog extends Dialog_base {
      * Defines a string value for the aria-label attribute for close button accessibility
      */
     closeButtonAriaLabel: string | null;
+    /**
+     * Defines a string value for the aria-label attribute when header is not used
+     */
+    ariaLabel: string | null;
     /**
      * Defines a string value for the aria-labelledby attribute that refers to the element
      * labeling the dialog for accessibility
      */
     ariaLabelledby: string | null;
     /**
-     * Defines a string value for the aria-label attribute when header is not used
+     * Defines a string value for the aria-describedby attribute that refers to the element
+     * describing the dialog for accessibility
      */
-    ariaLabel: string | null;
+    ariaDescribedBy: string | null;
+    /**
+     * Defines a string value for the aria-description attribute that refers to the element
+     * describing the dialog for accessibility
+     */
+    ariaDescription: string | null;
     /**
      * Defines a string value to display as the title of the dialog
      */
@@ -114,19 +124,45 @@ declare class Dialog extends Dialog_base {
      * @default dialog
      */
     role: DialogRole;
+    /**
+     * Disable setting the aria-haspopup attribute on trigger element.
+     * Make sure to set this to true when the popover is extended and its role
+     * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
+     * @default false
+     */
+    disableAriaHasPopup: boolean;
+    /**
+     * For now FocusTrap is always true as the dialog is a modal component only.
+     * This means it will always trap focus within the dialog when it is open.
+     */
+    /** @internal */
+    protected focusTrap: boolean;
     /** @internal */
     protected triggerElement: HTMLElement | null;
     /** @internal */
     protected backdropElement: HTMLElement | null;
     /** @internal */
     protected lastActiveElement: HTMLElement | null;
-    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    protected updated(changedProperties: PropertyValues): Promise<void>;
     /**
-     * Sets up the aria attributes for the dialog based on the header text and aria attributes.
-     * If no header text or aria attributes are provided, it will use the triggerId if available.
+     * Sets up the aria-haspopup attribute for the dialog.
+     * This is used to indicate that the dialog can be opened by a trigger element.
+     * If the trigger element does not have an aria-haspopup attribute, it will default to 'dialog'.
+     *
      * @internal
      */
-    private setupAriaAttributes;
+    private setupAriaHasPopup;
+    /**
+     * Sets up the aria-labelledby and aria-describedby attributes for the dialog.
+     * If no header text or description text is provided, it will point to the the triggerId if available.
+     * If neither is provided, it will not set the attributes.
+     *
+     * @internal
+     */
+    private setupAriaLabelledDescribedBy;
     /**
      * Creates a backdrop element for the dialog.
      * The backdrop is a full-screen overlay that appears behind the dialog when it is open.
@@ -134,17 +170,6 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     private createBackdrop;
-    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
-    disconnectedCallback(): Promise<void>;
-    /**
-     * Sets up the trigger listener for focus trap
-     */
-    private setupTriggerListener;
-    /**
-     * Removes the trigger event listener
-     */
-    private removeEventListeners;
-    protected updated(changedProperties: PropertyValues): Promise<void>;
     /**
      * Handles the escape keydown event to close the dialog.
      * @internal
@@ -159,6 +184,13 @@ declare class Dialog extends Dialog_base {
      * @param newValue - The new value of the visible property.
      */
     private isOpenUpdated;
+    /**
+     * Sets the focs back to the trigger element or the last active element.
+     * This is called when the dialog is closed to ensure that the user can continue interacting with the application.
+     *
+     * @internal
+     */
+    private focusBackToTrigger;
     /**
      * Hides the dialog.
      * @internal
@@ -169,10 +201,6 @@ declare class Dialog extends Dialog_base {
      * @internal
      */
     showDialog: () => void;
-    /**
-     * Sets the focusable elements inside the dialog.
-     */
-    private handleCreateDialogFirstUpdate;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -67,7 +67,7 @@ import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooter
  */
 class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The unique ID of the dialog
          */
@@ -96,15 +96,25 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * Defines a string value for the aria-label attribute for close button accessibility
          */
         this.closeButtonAriaLabel = null;
+        /**
+         * Defines a string value for the aria-label attribute when header is not used
+         */
+        this.ariaLabel = null;
         /**
          * Defines a string value for the aria-labelledby attribute that refers to the element
          * labeling the dialog for accessibility
          */
         this.ariaLabelledby = null;
         /**
-         * Defines a string value for the aria-label attribute when header is not used
+         * Defines a string value for the aria-describedby attribute that refers to the element
+         * describing the dialog for accessibility
          */
-        this.ariaLabel = null;
+        this.ariaDescribedBy = null;
+        /**
+         * Defines a string value for the aria-description attribute that refers to the element
+         * describing the dialog for accessibility
+         */
+        this.ariaDescription = null;
         /**
          * The html tag to be used for the header text
          */
@@ -118,6 +128,19 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * @default dialog
          */
         this.role = DEFAULTS.ROLE;
+        /**
+         * Disable setting the aria-haspopup attribute on trigger element.
+         * Make sure to set this to true when the popover is extended and its role
+         * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
+         * @default false
+         */
+        this.disableAriaHasPopup = DEFAULTS.DISABLE_ARIA_HAS_POPUP;
+        /**
+         * For now FocusTrap is always true as the dialog is a modal component only.
+         * This means it will always trap focus within the dialog when it is open.
+         */
+        /** @internal */
+        this.focusTrap = true;
         /** @internal */
         this.triggerElement = null;
         /** @internal */
@@ -150,22 +173,94 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         this.showDialog = () => {
             this.visible = true;
         };
-        document.addEventListener('keydown', this.onEscapeKeydown);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this.onEscapeKeydown.bind(this));
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.onEscapeKeydown);
+        (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
+        this.backdropElement = null;
+        (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
+        // Set aria-expanded attribute on the trigger element to false if it exists
+        (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
+        this.focusBackToTrigger();
+        DialogEventManager.onDestroyedDialog(this);
+    }
+    async firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setAttribute('aria-modal', 'true');
+        this.setupAriaLabelledDescribedBy();
+        this.style.zIndex = `${this.zIndex}`;
+        DialogEventManager.onCreatedDialog(this);
+    }
+    async updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('triggerId')) {
+            this.triggerElement = this.getRootNode().querySelector(`[id="${this.triggerId}"]`);
+            this.setupAriaHasPopup();
+        }
+        if (changedProperties.has('visible')) {
+            const oldValue = changedProperties.get('visible');
+            await this.isOpenUpdated(oldValue, this.visible);
+        }
+        if (changedProperties.has('zIndex')) {
+            this.setAttribute('z-index', `${this.zIndex}`);
+        }
+        if (changedProperties.has('variant')) {
+            this.updateFooterButtonColors(this.variant);
+        }
+        if (changedProperties.has('ariaLabel')
+            || changedProperties.has('ariaLabelledBy')
+            || changedProperties.has('ariaDescribedBy')
+            || changedProperties.has('ariaDescription')
+            || changedProperties.has('headerText')
+            || changedProperties.has('descriptionText')) {
+            this.setupAriaLabelledDescribedBy();
+        }
     }
     /**
-     * Sets up the aria attributes for the dialog based on the header text and aria attributes.
-     * If no header text or aria attributes are provided, it will use the triggerId if available.
+     * Sets up the aria-haspopup attribute for the dialog.
+     * This is used to indicate that the dialog can be opened by a trigger element.
+     * If the trigger element does not have an aria-haspopup attribute, it will default to 'dialog'.
+     *
      * @internal
      */
-    setupAriaAttributes() {
-        if (this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
-            this.setAttribute('aria-labelledby', this.headerText);
+    setupAriaHasPopup() {
+        var _a, _b;
+        if (!this.disableAriaHasPopup) {
+            (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ((_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.getAttribute('aria-haspopup')) || 'dialog');
         }
-        else if (!this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
-            if (this.triggerId) {
+    }
+    /**
+     * Sets up the aria-labelledby and aria-describedby attributes for the dialog.
+     * If no header text or description text is provided, it will point to the the triggerId if available.
+     * If neither is provided, it will not set the attributes.
+     *
+     * @internal
+     */
+    setupAriaLabelledDescribedBy() {
+        // If aria-labelledby or aria-label is already set, do not override it
+        if (!this.ariaLabelledby && !this.ariaLabel) {
+            if (this.headerText) {
+                this.setAttribute('aria-label', this.headerText);
+            }
+            else if (this.triggerId) {
                 this.setAttribute('aria-labelledby', this.triggerId);
             }
         }
+        // If aria-describedby or aria-description is already set, do not override it
+        if (!this.ariaDescribedBy && !this.ariaDescription) {
+            if (this.descriptionText) {
+                this.setAttribute('aria-description', this.descriptionText);
+            }
+            else if (this.triggerId) {
+                this.setAttribute('aria-describedby', this.triggerId);
+            }
+        }
     }
     /**
      * Creates a backdrop element for the dialog.
@@ -193,58 +288,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
         this.backdropElement = backdrop;
     }
-    async firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.setupTriggerListener();
-        this.setupAriaAttributes();
-        this.style.zIndex = `${this.zIndex}`;
-        DialogEventManager.onCreatedDialog(this);
-        if (this.visible) {
-            await this.handleCreateDialogFirstUpdate();
-        }
-    }
-    async disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListeners();
-        document.removeEventListener('keydown', this.onEscapeKeydown);
-        DialogEventManager.onDestroyedDialog(this);
-    }
-    /**
-     * Sets up the trigger listener for focus trap
-     */
-    setupTriggerListener() {
-        if (!this.triggerId) {
-            this.addEventListener('focus-trap-exit', this.hideDialog);
-            return;
-        }
-        this.triggerElement = this.getRootNode().querySelector(`[id="${this.triggerId}"]`);
-        if (!this.triggerElement)
-            return;
-        this.addEventListener('focus-trap-exit', this.hideDialog);
-    }
-    /**
-     * Removes the trigger event listener
-     */
-    removeEventListeners() {
-        this.removeEventListener('focus-trap-exit', this.hideDialog);
-    }
-    async updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('visible')) {
-            const oldValue = changedProperties.get('visible');
-            await this.isOpenUpdated(oldValue, this.visible);
-        }
-        if (changedProperties.has('zIndex')) {
-            this.setAttribute('z-index', `${this.zIndex}`);
-        }
-        if (changedProperties.has('variant')) {
-            this.updateFooterButtonColors(this.variant);
-        }
-        if (changedProperties.has('aria-label')
-            || changedProperties.has('aria-labelledby')) {
-            this.setupAriaAttributes();
-        }
-    }
     /**
      * Handles the dialog visibility change.
      * Handles the exit event to close the dialog.
@@ -253,51 +296,46 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         if (oldValue === newValue) {
             return;
         }
         if (newValue && !oldValue) {
             // Store the currently focused element before opening the dialog
             this.lastActiveElement = document.activeElement;
-            this.enabledFocusTrap = true;
             this.enabledPreventScroll = true;
             this.createBackdrop();
-            await this.handleCreateDialogFirstUpdate();
-            // If we have a trigger element, update its attributes
-            if (this.triggerElement) {
-                this.triggerElement.setAttribute('aria-expanded', 'true');
-                this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
-            }
+            await this.updateComplete;
+            (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
+            // Set aria-expanded attribute on the trigger element to true if it exists
+            (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'true');
             DialogEventManager.onShowDialog(this);
         }
         else if (!newValue && oldValue) {
-            (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
+            (_d = this.backdropElement) === null || _d === void 0 ? void 0 : _d.remove();
             this.backdropElement = null;
-            (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
-            // If we have a trigger element, restore focus to it
-            if (this.triggerElement) {
-                this.triggerElement.removeAttribute('aria-expanded');
-                this.triggerElement.removeAttribute('aria-haspopup');
-                this.triggerElement.focus();
-            }
-            else if (this.lastActiveElement && this.lastActiveElement.focus) {
-                // Otherwise restore focus to the last active element
-                this.lastActiveElement.focus();
-            }
+            (_e = this.deactivateFocusTrap) === null || _e === void 0 ? void 0 : _e.call(this);
+            // Set aria-expanded attribute on the trigger element to false if it exists
+            (_f = this.triggerElement) === null || _f === void 0 ? void 0 : _f.setAttribute('aria-expanded', 'false');
+            this.focusBackToTrigger();
             DialogEventManager.onHideDialog(this);
         }
     }
     /**
-     * Sets the focusable elements inside the dialog.
+     * Sets the focs back to the trigger element or the last active element.
+     * This is called when the dialog is closed to ensure that the user can continue interacting with the application.
+     *
+     * @internal
      */
-    async handleCreateDialogFirstUpdate() {
-        var _a, _b;
-        if (this.visible) {
-            // Wait for the first update to complete before setting focusable elements
-            await this.updateComplete;
-            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
-            (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
+    focusBackToTrigger() {
+        // If the trigger element is defined, focus it
+        if (this.triggerElement) {
+            this.triggerElement.focus();
+        }
+        else if (this.lastActiveElement && this.lastActiveElement.focus) {
+            // If the trigger element is not defined, focus the last active element
+            this.lastActiveElement.focus();
         }
     }
     render() {
@@ -369,14 +407,22 @@ __decorate([
     property({ type: String, attribute: 'close-button-aria-label' }),
     __metadata("design:type", Object)
 ], Dialog.prototype, "closeButtonAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Dialog.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'aria-labelledby' }),
     __metadata("design:type", Object)
 ], Dialog.prototype, "ariaLabelledby", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'aria-label' }),
+    property({ type: String, reflect: true, attribute: 'aria-describedby' }),
     __metadata("design:type", Object)
-], Dialog.prototype, "ariaLabel", void 0);
+], Dialog.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-description' }),
+    __metadata("design:type", Object)
+], Dialog.prototype, "ariaDescription", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'header-text' }),
     __metadata("design:type", String)
@@ -397,4 +443,8 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Dialog.prototype, "role", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-aria-haspopup' }),
+    __metadata("design:type", Boolean)
+], Dialog.prototype, "disableAriaHasPopup", void 0);
 export default Dialog;

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

@@ -12,6 +12,7 @@ declare const DEFAULTS: {
     readonly DESCRIPTION_TAG_NAME: "p";
     readonly CANCEL_ICON: "cancel-bold";
     readonly VARIANT: "default";
+    readonly DISABLE_ARIA_HAS_POPUP: false;
 };
 declare const DIALOG_SIZE: readonly ["small", "medium", "large"];
 declare const DIALOG_ROLE: readonly ["dialog", "alertdialog"];

package/dist/components/dialog/dialog.constants.js

@@ -13,6 +13,7 @@ const DEFAULTS = {
     DESCRIPTION_TAG_NAME: 'p',
     CANCEL_ICON: 'cancel-bold',
     VARIANT: DIALOG_VARIANT.DEFAULT,
+    DISABLE_ARIA_HAS_POPUP: false,
 };
 const DIALOG_SIZE = ['small', 'medium', 'large'];
 const DIALOG_ROLE = ['dialog', 'alertdialog'];

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

@@ -184,11 +184,18 @@ declare class Popover extends Popover_base {
      */
     ariaDescribedby: string | null;
     /**
-     * Disable aria-expanded attribute on trigger element.
+     * Disable setting the aria-expanded attribute on trigger element.
      * Make sure to set this to false when the popover is interactive.
      * @default false
      */
     disableAriaExpanded: boolean;
+    /**
+     * Disable setting the aria-haspopup attribute on trigger element.
+     * Make sure to set this to true when the popover is extended and its role
+     * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
+     * @default false
+     */
+    disableAriaHasPopup: boolean;
     arrowElement: HTMLElement | null;
     triggerElement: HTMLElement | null;
     /** @internal */

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

@@ -197,11 +197,18 @@ class Popover extends FocusTrapMixin(Component) {
          */
         this.ariaDescribedby = null;
         /**
-         * Disable aria-expanded attribute on trigger element.
+         * Disable setting the aria-expanded attribute on trigger element.
          * Make sure to set this to false when the popover is interactive.
          * @default false
          */
         this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
+        /**
+         * Disable setting the aria-haspopup attribute on trigger element.
+         * Make sure to set this to true when the popover is extended and its role
+         * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
+         * @default false
+         */
+        this.disableAriaHasPopup = DEFAULTS.DISABLE_ARIA_HAS_POPUP;
         this.arrowElement = null;
         this.triggerElement = null;
         /** @internal */
@@ -325,8 +332,10 @@ class Popover extends FocusTrapMixin(Component) {
         }
     }
     async disconnectedCallback() {
+        var _a;
         super.disconnectedCallback();
         this.removeEventListeners();
+        (_a = this.deactivateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
         PopoverEventManager.onDestroyedPopover(this);
         popoverStack.remove(this);
     }
@@ -425,7 +434,7 @@ class Popover extends FocusTrapMixin(Component) {
         if (changedProperties.has('disableAriaExpanded')) {
             this.utils.updateAriaExpandedAttribute();
         }
-        if (changedProperties.has('interactive')) {
+        if (changedProperties.has('interactive') || changedProperties.has('disableAriaHasPopup')) {
             this.utils.updateAriaHasPopupAttribute();
         }
     }
@@ -445,7 +454,6 @@ class Popover extends FocusTrapMixin(Component) {
             if (popoverStack.peek() !== this) {
                 popoverStack.push(this);
             }
-            this.enabledFocusTrap = this.focusTrap;
             this.enabledPreventScroll = this.preventScroll;
             if (this.backdrop) {
                 this.utils.createBackdrop();
@@ -509,7 +517,7 @@ class Popover extends FocusTrapMixin(Component) {
         if (this.visible && this.interactive) {
             // Wait for the first update to complete before setting focusable elements
             await this.updateComplete;
-            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_a = this.activateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
             (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
         }
     }
@@ -695,4 +703,8 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "disableAriaExpanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-aria-haspopup' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "disableAriaHasPopup", void 0);
 export default Popover;

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

@@ -45,5 +45,6 @@ declare const DEFAULTS: {
     readonly ROLE: "dialog";
     readonly Z_INDEX: 1000;
     readonly DISABLE_ARIA_EXPANDED: false;
+    readonly DISABLE_ARIA_HAS_POPUP: false;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -46,5 +46,6 @@ const DEFAULTS = {
     ROLE: 'dialog',
     Z_INDEX: 1000,
     DISABLE_ARIA_EXPANDED: false,
+    DISABLE_ARIA_HAS_POPUP: false,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.utils.js

@@ -112,7 +112,7 @@ export class PopoverUtils {
      */
     updateAriaHasPopupAttribute() {
         var _a, _b, _c;
-        if (this.popover.interactive) {
+        if (this.popover.interactive && !this.popover.disableAriaHasPopup) {
             (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.getAttribute('aria-haspopup')) || 'dialog');
         }
         else {

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

@@ -0,0 +1,7 @@
+import Skeleton from './skeleton.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-skeleton']: Skeleton;
+    }
+}
+export default Skeleton;

package/dist/components/skeleton/index.js

@@ -0,0 +1,4 @@
+import Skeleton from './skeleton.component';
+import { TAG_NAME } from './skeleton.constants';
+Skeleton.register(TAG_NAME);
+export default Skeleton;

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

@@ -0,0 +1,46 @@
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { SkeletonVariant } from './skeleton.types';
+/**
+ * `mdc-skeleton` is a component that shows a grey placeholder area.
+ * It provides visual feedback to users that content is being loaded.
+ *
+ * **Skeleton Variants:**
+ * - **rectangular**: Default variant with 0.25rem border radius
+ * - **rounded**: Has 0.5rem border radius
+ * - **circular**: Has 50% border radius for circular shapes
+ * - **button**: Optimized for button placeholders with 1.25rem border radius
+ *
+ * **Sizing Behavior:**
+ * 1. If wrapping content, takes dimensions of wrapped content
+ * 2. Otherwise grows to fill parent container
+ *
+ * @tagname mdc-skeleton
+ *
+ * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
+ *
+ * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
+ * @cssproperty --mdc-skeleton-height - height of the skeleton
+ * @cssproperty --mdc-skeleton-width - width of the skeleton
+ */
+declare class Skeleton extends Component {
+    /**
+     * The variant of skeleton to display
+     * - **rectangular**: Default rectangular shape with 0.25rem border radius
+     * - **rounded**: Rounded rectangle with 0.5rem border radius
+     * - **circular**: Circular shape with 50% border radius
+     * - **button**: Button placeholder with 1.25rem border radius
+     * @default rectangular
+     */
+    variant: SkeletonVariant;
+    /**
+     * Styles associated with this component.
+     */
+    static styles: Array<CSSResult>;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    private checkSlotContent;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export default Skeleton;