@momentum-design/components 0.129.6 → 0.129.8

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

@@ -1,6 +1,6 @@
 import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
-import type { ColorType } from './chip.types';
+import type { ColorType } from '../staticchip/staticchip.types';
 declare const Chip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.

package/dist/components/chip/chip.types.d.ts

@@ -1,11 +1,9 @@
-import type { OverrideEventTarget, ValueOf } from '../../utils/types';
+import type { OverrideEventTarget } from '../../utils/types';
 import type Chip from './chip.component';
-import { COLOR } from './chip.constants';
-type ColorType = ValueOf<typeof COLOR>;
 interface Events {
     onClickEvent: OverrideEventTarget<MouseEvent, Chip>;
     onKeyDownEvent: OverrideEventTarget<KeyboardEvent, Chip>;
     onKeyUpEvent: OverrideEventTarget<KeyboardEvent, Chip>;
     onFocusEvent: OverrideEventTarget<FocusEvent, Chip>;
 }
-export type { ColorType, Events };
+export type { Events };

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

@@ -181,6 +181,15 @@ declare class Dialog extends Dialog_base {
      * @default true
      */
     focusTrap: boolean;
+    /**
+     * Determines whether a backdrop should be displayed behind the dialog.
+     * By default, a backdrop is present and it will cover the rest of the page and prevent interaction
+     * with other elements while the dialog is open.
+     * When this attribute is set to true, no backdrop will be created.
+     *
+     * @default false
+     */
+    hideBackdrop: boolean;
     /**
      * For now preventScroll is always true as the dialog is a modal component only.
      * This means scroll will be prevented when the dialog is open.

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

@@ -186,6 +186,15 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
          * @default true
          */
         this.focusTrap = DEFAULTS.FOCUS_TRAP;
+        /**
+         * Determines whether a backdrop should be displayed behind the dialog.
+         * By default, a backdrop is present and it will cover the rest of the page and prevent interaction
+         * with other elements while the dialog is open.
+         * When this attribute is set to true, no backdrop will be created.
+         *
+         * @default false
+         */
+        this.hideBackdrop = DEFAULTS.HIDE_BACKDROP;
         /**
          * For now preventScroll is always true as the dialog is a modal component only.
          * This means scroll will be prevented when the dialog is open.
@@ -358,9 +367,12 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
         if (newValue && !oldValue) {
             // Store the currently focused element before opening the dialog
             this.lastActiveElement = document.activeElement;
-            // remove any existing backdrop and create a new one
-            this.removeBackdrop();
-            this.createBackdrop('dialog');
+            // create backdrop if enabled
+            if (!this.hideBackdrop) {
+                // remove any existing backdrop and create a new one
+                this.removeBackdrop();
+                this.createBackdrop('dialog');
+            }
             this.activatePreventScroll();
             await this.updateComplete;
             if (this.focusTrap) {
@@ -372,6 +384,8 @@ class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin
             DialogEventManager.onShowDialog(this);
         }
         else if (!newValue && oldValue) {
+            // Always remove backdrop if it exists, regardless of current hideBackdrop value
+            // This handles the case where hideBackdrop was changed while dialog was open
             this.removeBackdrop();
             // Set aria-expanded attribute on the trigger element to false if it exists
             (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-expanded', 'false');
@@ -526,4 +540,8 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),
     __metadata("design:type", Boolean)
 ], Dialog.prototype, "focusTrap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-backdrop' }),
+    __metadata("design:type", Boolean)
+], Dialog.prototype, "hideBackdrop", void 0);
 export default Dialog;

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

@@ -15,6 +15,7 @@ declare const DEFAULTS: {
     readonly VARIANT: "default";
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly FOCUS_TRAP: true;
+    readonly HIDE_BACKDROP: false;
 };
 declare const DIALOG_SIZE: readonly ["small", "medium", "large", "xlarge", "fullscreen"];
 declare const DIALOG_ROLE: readonly ["dialog", "alertdialog"];

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

@@ -15,6 +15,7 @@ const DEFAULTS = {
     VARIANT: DIALOG_VARIANT.DEFAULT,
     DISABLE_ARIA_HAS_POPUP: false,
     FOCUS_TRAP: true,
+    HIDE_BACKDROP: false,
 };
 const DIALOG_SIZE = ['small', 'medium', 'large', 'xlarge', 'fullscreen'];
 const DIALOG_ROLE = ['dialog', 'alertdialog'];

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

@@ -1,5 +1,5 @@
 import type { IconNames } from '../icon/icon.types';
-import { ColorType } from '../chip/chip.types';
+import type { ColorType } from '../staticchip/staticchip.types';
 declare const TAG_NAME: "mdc-filterchip";
 declare const DEFAULTS: {
     readonly ICON_NAME: Extract<IconNames, "check-bold">;

package/dist/custom-elements.json

@@ -2483,6 +2483,21 @@
                 "module": "components/dialog/dialog.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "hideBackdrop",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether a backdrop should be displayed behind the dialog.\nBy default, a backdrop is present and it will cover the rest of the page and prevent interaction\nwith other elements while the dialog is open.\nWhen this attribute is set to true, no backdrop will be created.",
+              "default": "false",
+              "attribute": "hide-backdrop",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "id",
@@ -3211,6 +3226,19 @@
                 "name": "Dialog",
                 "module": "src/components/dialog/dialog.component.ts"
               }
+            },
+            {
+              "name": "hide-backdrop",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether a backdrop should be displayed behind the dialog.\nBy default, a backdrop is present and it will cover the rest of the page and prevent interaction\nwith other elements while the dialog is open.\nWhen this attribute is set to true, no backdrop will be created.",
+              "default": "false",
+              "fieldName": "hideBackdrop",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -15689,6 +15717,17 @@
               "attribute": "header-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "hideBackdrop",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether a backdrop should be displayed behind the dialog.\nBy default, a backdrop is present and it will cover the rest of the page and prevent interaction\nwith other elements while the dialog is open.\nWhen this attribute is set to true, no backdrop will be created.",
+              "default": "false",
+              "attribute": "hide-backdrop",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "id",
@@ -16253,6 +16292,15 @@
               "default": "true",
               "fieldName": "focusTrap"
             },
+            {
+              "name": "hide-backdrop",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether a backdrop should be displayed behind the dialog.\nBy default, a backdrop is present and it will cover the rest of the page and prevent interaction\nwith other elements while the dialog is open.\nWhen this attribute is set to true, no backdrop will be created.",
+              "default": "false",
+              "fieldName": "hideBackdrop"
+            },
             {
               "name": "should-focus-trap-wrap",
               "type": {

package/dist/index.d.ts

@@ -86,6 +86,7 @@ import Slider from './components/slider';
 import ListBox from './components/listbox';
 import Banner from './components/banner';
 import type { BadgeType } from './components/badge/badge.types';
+import type { ColorType as ChipColorType } from './components/staticchip/staticchip.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
 import type { SkeletonVariant } from './components/skeleton/skeleton.types';
@@ -104,5 +105,5 @@ import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 import type { TablistChangeEvent } from './components/tablist/tablist.types';
 export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
-export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, };
+export type { BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/package.json

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