@momentum-design/components 0.104.4 → 0.104.6

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { DialogRole, DialogSize, DialogVariant } from './dialog.types';
-declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
+declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.
@@ -162,8 +162,6 @@ declare class Dialog extends Dialog_base {
     /** @internal */
     protected triggerElement: HTMLElement | null;
     /** @internal */
-    protected backdropElement: HTMLElement | null;
-    /** @internal */
     protected lastActiveElement: HTMLElement | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -192,13 +190,6 @@ declare class Dialog extends Dialog_base {
      * @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.
-     * It prevents interaction with the rest of the application while the dialog is open.
-     * @internal
-     */
-    private createBackdrop;
     /**
      * Fired when Close Button is clicked or Escape key is pressed.
      * This method dispatches the close event. Setting visible to false

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

@@ -16,6 +16,7 @@ import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
 import { FooterMixin } from '../../utils/mixins/FooterMixin';
+import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
 import { DEFAULTS } from './dialog.constants';
 import { DialogEventManager } from './dialog.events';
 import styles from './dialog.styles';
@@ -74,7 +75,7 @@ import styles from './dialog.styles';
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred
  */
-class Dialog extends PreventScrollMixin(FocusTrapMixin(FooterMixin(Component))) {
+class Dialog extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))) {
     constructor() {
         super(...arguments);
         /**
@@ -167,8 +168,6 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))
         /** @internal */
         this.triggerElement = null;
         /** @internal */
-        this.backdropElement = null;
-        /** @internal */
         this.lastActiveElement = null;
         /**
          * Handles the escape keydown event to close the dialog.
@@ -193,15 +192,14 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))
         this.addEventListener('keydown', this.onEscapeKeydown.bind(this));
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a, _b;
         super.disconnectedCallback();
         this.removeEventListener('keydown', this.onEscapeKeydown);
-        (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.remove();
-        this.backdropElement = null;
+        this.removeBackdrop();
         // Set aria-expanded attribute on the trigger element to false if it exists
-        (_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
         this.deactivatePreventScroll();
-        (_c = this.deactivateFocusTrap) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
         this.focusBackToTrigger();
         DialogEventManager.onDestroyedDialog(this);
     }
@@ -299,37 +297,6 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))
             }
         }
     }
-    /**
-     * Creates a backdrop element for the dialog.
-     * The backdrop is a full-screen overlay that appears behind the dialog when it is open.
-     * It prevents interaction with the rest of the application while the dialog is open.
-     * @internal
-     */
-    createBackdrop() {
-        var _a;
-        // Remove existing backdrop if present
-        if (this.backdropElement && this.backdropElement.parentElement) {
-            this.backdropElement.parentElement.removeChild(this.backdropElement);
-            this.backdropElement = null;
-        }
-        const backdrop = document.createElement('div');
-        backdrop.classList.add('dialog-backdrop');
-        const styleElement = document.createElement('style');
-        styleElement.textContent = `
-      .dialog-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: var(--mds-color-theme-common-overlays-secondary-normal);
-        z-index: ${this.zIndex - 1};
-      }
-    `;
-        backdrop.appendChild(styleElement);
-        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
-        this.backdropElement = backdrop;
-    }
     /**
      * Fired when Close Button is clicked or Escape key is pressed.
      * This method dispatches the close event. Setting visible to false
@@ -346,14 +313,16 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))
      * @param newValue - The new value of the visible property.
      */
     async isOpenUpdated(oldValue, newValue) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (oldValue === newValue) {
             return;
         }
         if (newValue && !oldValue) {
             // Store the currently focused element before opening the dialog
             this.lastActiveElement = document.activeElement;
-            this.createBackdrop();
+            // remove any existing backdrop and create a new one
+            this.removeBackdrop();
+            this.createBackdrop('dialog');
             this.activatePreventScroll();
             await this.updateComplete;
             if (this.focusTrap) {
@@ -365,12 +334,11 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(FooterMixin(Component)))
             DialogEventManager.onShowDialog(this);
         }
         else if (!newValue && oldValue) {
-            (_d = this.backdropElement) === null || _d === void 0 ? void 0 : _d.remove();
-            this.backdropElement = null;
+            this.removeBackdrop();
             // Set aria-expanded attribute on the trigger element to false if it exists
-            (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-expanded', 'false');
+            (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-expanded', 'false');
             this.deactivatePreventScroll();
-            (_f = this.deactivateFocusTrap) === null || _f === void 0 ? void 0 : _f.call(this);
+            (_e = this.deactivateFocusTrap) === null || _e === void 0 ? void 0 : _e.call(this);
             this.focusBackToTrigger();
             DialogEventManager.onHideDialog(this);
         }

package/dist/components/menubar/menubar.component.js

@@ -88,7 +88,7 @@ class MenuBar extends Component {
             const id = item.getAttribute('id');
             if (!id)
                 return;
-            const submenu = (_a = this.querySelector) === null || _a === void 0 ? void 0 : _a.call(this, `${MENUPOPOVER_TAGNAME}[triggerid="${id}"]`);
+            const submenu = (_a = document.querySelector) === null || _a === void 0 ? void 0 : _a.call(document, `${MENUPOPOVER_TAGNAME}[triggerid="${id}"]`);
             if (submenu && submenu.visible) {
                 subMenus.push(submenu);
             }

package/dist/components/menupopover/menupopover.component.js

@@ -11,6 +11,7 @@ import { property } from 'lit/decorators.js';
 import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
+import { TAG_NAME as NAVMENUITEM_TAGNAME } from '../navmenuitem/navmenuitem.constants';
 import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
 import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuitemcheckbox.constants';
 import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
@@ -358,7 +359,7 @@ class MenuPopover extends Popover {
         // make sure backdrop is set before showing the popover, but it does not change when popover is closing, otherwise
         // `super.isOpenUpdated` will skip the backdrop cleanup
         if (newValue) {
-            this.backdrop = !(this.triggerElement.tagName.toLowerCase() === MENUITEM_TAGNAME);
+            this.backdrop = ![MENUITEM_TAGNAME, NAVMENUITEM_TAGNAME].includes(this.triggerElement.tagName.toLowerCase());
         }
         // if the current menupopover is closed, close all submenus
         if (newValue === false) {

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
-declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
+declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
  * It can be used for tooltips, dropdowns, or contextual menus.
@@ -195,6 +195,18 @@ declare class Popover extends Popover_base {
      * @default false
      */
     backdrop: boolean;
+    /**
+     * Element ID the backdrop will be a append to (if `backdrop` is true).
+     * @default ''
+     */
+    backdropAppendTo?: string;
+    /**
+     * Set this property to true to make the backdrop invisible (if `backdrop` is true).
+     * This is useful for components that do want a backdrop which stops interaction,
+     * but do not want the backdrop to be visible as a overlay.
+     * @default false
+     */
+    isBackdropInvisible?: boolean;
     /**
      * Changes the placement of popover to keep it in view when scrolling.
      * @default true
@@ -271,8 +283,6 @@ declare class Popover extends Popover_base {
     arrowElement: HTMLElement | null;
     triggerElement: HTMLElement | null;
     /** @internal */
-    private triggerElementOriginalStyle;
-    /** @internal */
     private hoverTimer;
     /** @internal */
     private isHovered;
@@ -287,8 +297,6 @@ declare class Popover extends Popover_base {
     /** @internal */
     protected shouldSupressOpening: boolean;
     /** @internal */
-    backdropElement: HTMLElement | null;
-    /** @internal */
     private connectedTooltip;
     constructor();
     private storeConnectedTooltip;

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

@@ -13,6 +13,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
@@ -50,7 +51,7 @@ import { PopoverUtils } from './popover.utils';
  * @slot - Default slot for the popover content
  *
  */
-class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
+class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component))) {
     constructor() {
         super();
         /**
@@ -204,6 +205,13 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * @default false
          */
         this.backdrop = DEFAULTS.BACKDROP;
+        /**
+         * Set this property to true to make the backdrop invisible (if `backdrop` is true).
+         * This is useful for components that do want a backdrop which stops interaction,
+         * but do not want the backdrop to be visible as a overlay.
+         * @default false
+         */
+        this.isBackdropInvisible = DEFAULTS.IS_BACKDROP_INVISIBLE;
         /**
          * Changes the placement of popover to keep it in view when scrolling.
          * @default true
@@ -275,11 +283,6 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         this.arrowElement = null;
         this.triggerElement = null;
         /** @internal */
-        this.triggerElementOriginalStyle = {
-            zIndex: '',
-            position: '',
-        };
-        /** @internal */
         this.hoverTimer = null;
         /** @internal */
         this.isHovered = false;
@@ -292,8 +295,6 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         /** @internal */
         this.shouldSupressOpening = false;
         /** @internal */
-        this.backdropElement = null;
-        /** @internal */
         this.connectedTooltip = null;
         this.storeConnectedTooltip = () => {
             const connectedTooltips = this.getRootNode().querySelectorAll(`mdc-tooltip[triggerID="${this.triggerID}"]`);
@@ -642,7 +643,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         this.removeAllListeners();
         (_a = this.deactivateFocusTrap) === null || _a === void 0 ? void 0 : _a.call(this);
         this.deactivatePreventScroll();
-        this.utils.removeBackdrop();
+        this.moveElementBackAfterBackdropRemoval(this.triggerElement);
+        this.removeBackdrop();
         (_b = this.floatingUICleanupFunction) === null || _b === void 0 ? void 0 : _b.call(this);
         // clean timer if there is one set:
         this.cancelCloseDelay();
@@ -740,14 +742,10 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                     this.connectedTooltip.shouldSupressOpening = true;
                 }
             }
-            if (this.backdrop) {
-                this.utils.createBackdrop();
-                this.triggerElementOriginalStyle = {
-                    position: this.triggerElement.style.position,
-                    zIndex: this.triggerElement.style.zIndex,
-                };
-                this.triggerElement.style.position = 'relative';
-                this.triggerElement.style.zIndex = `${this.zIndex}`;
+            // create backdrop if it doesn't exist
+            if (this.backdrop && !this.backdropElement) {
+                this.createBackdrop('popover');
+                this.keepElementAboveBackdrop(this.triggerElement);
             }
             this.positionPopover();
             if (this.hideOnBlur) {
@@ -781,9 +779,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             // cleanup floating-ui on closing the popover
             (_b = this.floatingUICleanupFunction) === null || _b === void 0 ? void 0 : _b.call(this);
             if (this.backdrop) {
-                this.triggerElement.style.position = this.triggerElementOriginalStyle.position;
-                this.triggerElement.style.zIndex = this.triggerElementOriginalStyle.zIndex;
-                this.utils.removeBackdrop();
+                this.moveElementBackAfterBackdropRemoval(this.triggerElement);
+                this.removeBackdrop();
             }
             if (this.hideOnBlur) {
                 this.removeEventListener('focusout', this.onPopoverFocusOut);
@@ -927,6 +924,14 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "backdrop", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'backdrop-append-to' }),
+    __metadata("design:type", String)
+], Popover.prototype, "backdropAppendTo", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'is-backdrop-invisible' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "isBackdropInvisible", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)

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

@@ -52,5 +52,6 @@ declare const DEFAULTS: {
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
     readonly STRATEGY: "absolute";
+    readonly IS_BACKDROP_INVISIBLE: false;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

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

@@ -53,5 +53,6 @@ const DEFAULTS = {
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_CLOSED: true,
     STRATEGY: 'absolute',
+    IS_BACKDROP_INVISIBLE: false,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

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

@@ -57,6 +57,4 @@ export declare class PopoverUtils {
      * @param y - The y position.
      */
     updatePopoverStyle(x: number, y: number): void;
-    createBackdrop(): void;
-    removeBackdrop(): void;
 }

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

@@ -184,33 +184,4 @@ export class PopoverUtils {
             top: `${y}px`,
         });
     }
-    createBackdrop() {
-        var _a;
-        if (!this.popover.backdropElement) {
-            const backdrop = document.createElement('div');
-            backdrop.classList.add('popover-backdrop');
-            const styleElement = document.createElement('style');
-            styleElement.textContent = `
-        .popover-backdrop {
-          position: fixed;
-          cursor: default;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: transparent;
-          z-index: ${this.popover.zIndex - 1};
-        }
-      `;
-            backdrop.appendChild(styleElement);
-            (_a = this.popover.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
-            this.popover.backdropElement = backdrop;
-        }
-    }
-    removeBackdrop() {
-        if (this.popover.backdropElement) {
-            this.popover.backdropElement.remove();
-            this.popover.backdropElement = null;
-        }
-    }
 }

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

@@ -97,6 +97,19 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
      */
     strategy: 'absolute' | 'fixed';
+    /**
+     * The z-index of the popover within Select.
+     *
+     * Override this to make sure this stays on top of other components.
+     * @default 1000
+     */
+    popoverZIndex: number;
+    /**
+     * ID of the element where the backdrop will be appended to.
+     * This is useful to ensure that the backdrop is appended to the correct element in the DOM.
+     * If not set, the backdrop will be appended to the parent element of the select.
+     */
+    backdropAppendTo?: string;
     /** @internal */
     slottedListboxes: Array<HTMLElement>;
     /** @internal */

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

@@ -103,6 +103,13 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
          */
         this.strategy = POPOVER_DEFAULTS.STRATEGY;
+        /**
+         * The z-index of the popover within Select.
+         *
+         * Override this to make sure this stays on top of other components.
+         * @default 1000
+         */
+        this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
         /** @internal */
         this.displayPopover = false;
         /** @internal */
@@ -549,6 +556,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           ?visible="${this.displayPopover}"
           role=""
           backdrop
+          backdrop-append-to="${ifDefined(this.backdropAppendTo)}"
+          is-backdrop-invisible
           hide-on-outside-click
           hide-on-escape
           focus-back-to-trigger
@@ -563,6 +572,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           @closebyoutsideclick="${() => {
             this.displayPopover = false;
         }}"
+          z-index="${ifDefined(this.popoverZIndex)}"
+          exportparts="popover-content"
         >
           <slot @click="${this.handleOptionsClick}"></slot>
         </mdc-popover>
@@ -596,6 +607,14 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'strategy' }),
     __metadata("design:type", String)
 ], Select.prototype, "strategy", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'popover-z-index' }),
+    __metadata("design:type", Number)
+], Select.prototype, "popoverZIndex", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'backdrop-append-to' }),
+    __metadata("design:type", String)
+], Select.prototype, "backdropAppendTo", void 0);
 __decorate([
     queryAssignedElements({ selector: 'mdc-selectlistbox' }),
     __metadata("design:type", Array)

package/dist/components/select/select.styles.js

@@ -89,6 +89,7 @@ const styles = css `
   }
   :host mdc-popover::part(popover-content) {
     max-height: var(--mdc-popover-max-height);
+    min-width: auto;
     padding: 0.75rem 0.5rem;
   }
 

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

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

package/dist/components/slider/index.js

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

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

@@ -0,0 +1,120 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+/**
+ * slider component, which ...
+ *
+ * @tagname mdc-slider
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --custom-property-name - Description of the CSS custom property
+ */
+declare class Slider extends Component {
+    /**
+     * Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.
+     */
+    range: boolean;
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Acts similar to disabled, but component is focusable and tooltip is shown on focus.
+     */
+    softDisabled?: boolean;
+    /**
+     * Icon that represents the minimum value; ex: muted speaker.
+     */
+    leadingIcon?: string;
+    /**
+     * Icon that represents the maximum value; ex: speaker with full volume.
+     */
+    trailingIcon?: string;
+    /**
+     * The slider minimum value.
+     */
+    min: number;
+    /**
+     * The slider maximum value.
+     */
+    max: number;
+    /**
+     * The slider value displayed when range is false.
+     */
+    value?: number;
+    /**
+     * The slider start value displayed when range is true.
+     */
+    valueStart?: number;
+    /**
+     * The slider end value displayed when range is true.
+     */
+    valueEnd?: number;
+    /**
+     * The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.
+     */
+    step: number;
+    /**
+     * It represents the label for slider component.
+     */
+    label?: string;
+    /**
+     * The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.
+     */
+    labelStart?: string;
+    /**
+     * The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.
+     */
+    labelEnd?: string;
+    /**
+     * An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.
+     */
+    valueLabel: string;
+    /**
+     * An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.
+     */
+    valueLabelStart: string;
+    /**
+     * An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.
+     */
+    valueLabelEnd: string;
+    /**
+     * Aria label for the slider's start handle displayed when range is true.
+     */
+    ariaLabelStart: string;
+    /**
+     * Aria value text for the slider's start value displayed when range is true.
+     */
+    ariaValuetextStart: string;
+    /**
+     * Aria label for the slider's end handle displayed when range is true.
+     */
+    ariaLabelEnd: string;
+    /**
+     * Aria value text for the slider's end value displayed when range is true.
+     */
+    ariaValuetextEnd: string;
+    /**
+     * Name attribute for the slider (single value).
+     */
+    name?: string;
+    /**
+     * Name attribute for the slider's start handle (range).
+     */
+    nameStart?: string;
+    /**
+     * Name attribute for the slider's end handle (range).
+     */
+    nameEnd?: string;
+    /**
+     * Aria value text for the slider's value displayed when range is false.
+     */
+    dataAriaValuetext: string;
+    /**
+     * Aria label for the slider's handle displayed when range is false.
+     */
+    dataAriaLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Slider;