@momentum-ui/web-components 3.0.0-beta.3 → 3.0.0-beta.5

package/dist/index.js

@@ -1 +1 @@
-require("./6633"),require("./7103"),require("./4765"),require("./1873"),require("./1890"),require("./4313"),require("./510"),require("./6283"),require("./5087"),require("./6865"),require("./8889"),require("./8210"),require("./5630"),require("./3135"),require("./1013"),require("./3739"),require("./7819"),require("./2848"),require("./4363"),require("./2243"),require("./7919"),require("./7292"),require("./6188"),require("./15"),require("./8345"),require("./9270"),require("./8923"),require("./4548"),require("./2669"),require("./1729"),require("./9164"),require("./9480"),require("./1625"),require("./836"),require("./3625"),require("./2056"),require("./4889"),require("./9409"),require("./9654"),require("./4659"),require("./5838"),require("./6765"),require("./1626"),require("./3852"),require("./8161"),require("./6273"),require("./8391"),require("./679"),require("./8033"),require("./1564"),require("./4462"),require("./4744"),require("./8576"),require("./1092"),require("./8171"),require("./2201"),require("./2186"),require("./9425"),require("./8588"),require("./3212"),require("./622"),require("./5809"),require("./9455"),require("./759"),require("./2093"),require("./8148"),require("./5799"),require("./9312"),require("./2714"),require("./9238"),require("./7833"),require("./2924"),require("./5524"),require("./674"),require("./2314"),module.exports=require("./index-entry");
+require("./8493"),require("./7103"),require("./4765"),require("./1873"),require("./1890"),require("./4313"),require("./510"),require("./5087"),require("./6865"),require("./8889"),require("./8210"),require("./5630"),require("./3135"),require("./1013"),require("./3739"),require("./7819"),require("./2848"),require("./4363"),require("./2243"),require("./7919"),require("./7292"),require("./6188"),require("./15"),require("./8345"),require("./9270"),require("./8923"),require("./4548"),require("./2669"),require("./1729"),require("./9164"),require("./9480"),require("./1625"),require("./836"),require("./3625"),require("./2056"),require("./4889"),require("./9409"),require("./9654"),require("./4659"),require("./5838"),require("./6765"),require("./1626"),require("./3852"),require("./8161"),require("./6273"),require("./8391"),require("./679"),require("./8033"),require("./1564"),require("./4462"),require("./4744"),require("./8576"),require("./1092"),require("./8171"),require("./2201"),require("./2186"),require("./9425"),require("./8588"),require("./3212"),require("./622"),require("./5809"),require("./9455"),require("./759"),require("./2093"),require("./8148"),require("./5799"),require("./9312"),require("./2714"),require("./9238"),require("./7833"),require("./2924"),require("./5524"),require("./674"),require("./2314"),module.exports=require("./index-entry");

package/dist/types/components/button/Button.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import "@/components/spinner/Spinner";
-import { LitElement, nothing } from "lit";
+import { LitElement, nothing, PropertyValues } from "lit";
 export declare const buttonSize: readonly ["20", "24", "28", "32", "36", "40", "44", "52", "56", "72", "68", "84", "size-none", 20, 24, 28, 32, 36, 40, 44, 52, 56, 68, 72, 68, 84];
 export declare const buttonTag: readonly ["button", "input", "a"];
 export declare const buttonType: readonly ["button", "reset", "submit"];
@@ -100,7 +100,12 @@ export declare namespace Button {
         ariaDescribedBy?: string;
         clickFunction?: () => void;
         isPlaceholderText?: boolean;
+        autofocus: boolean;
         button: HTMLButtonElement;
+        protected firstUpdated(changedProperties: PropertyValues): void;
+        manageAutoFocus(element?: HTMLElement): void;
+        focus(): void;
+        blur(): void;
         renderWidth: () => string | typeof nothing;
         renderMaxWidth: () => string | typeof nothing;
         getStyles: () => import("lit").TemplateResult<1> | undefined;

package/dist/types/components/dropdown/Dropdown.d.ts

@@ -8,10 +8,10 @@
 import "@/components/icon/Icon";
 import { LitElement, nothing, PropertyValues } from "lit";
 export declare namespace Dropdown {
-    type OptionMember = {
+    export type OptionMember = {
         [key: string]: string;
     };
-    type Option = string | OptionMember;
+    export type Option = string | OptionMember;
     type RenderOptionMember = {
         key: string;
         value: string;
@@ -151,4 +151,16 @@ declare global {
     interface HTMLElementTagNameMap {
         "md-dropdown": Dropdown.ELEMENT;
     }
+    interface HTMLElementEventMap {
+        "dropdown-focus-in": CustomEvent<undefined>;
+        "dropdown-focus-out": CustomEvent<undefined>;
+        "dropdown-selected": CustomEvent<{
+            option: Dropdown.Option;
+        }>;
+        "dropdown-input": CustomEvent<{
+            value: string;
+        }>;
+        "combobox-on-expand": CustomEvent<undefined>;
+        "remove-all-selected": CustomEvent<undefined>;
+    }
 }

package/dist/types/components/input/Input.d.ts

@@ -20,7 +20,7 @@ export declare const iconPosition: string[];
 export declare const nestedLevel: number[];
 export declare const ariaInvalidType: string[];
 export declare namespace Input {
-    export type Type = "text" | "number" | "password" | "email" | "tel" | "checkbox";
+    export type Type = "text" | "number" | "password" | "email" | "tel" | "checkbox" | "search";
     export type MessageType = "error" | "success" | "warning" | "priority";
     export type Message = {
         type: MessageType;
@@ -33,6 +33,7 @@ export declare namespace Input {
     export type InputType = typeof inputSize;
     export type shape = typeof inputShape;
     export type AriaInvalidType = (typeof ariaInvalidType)[number];
+    export type Autocomplete = "on" | "off";
     export class MessageController {
         determineMessageType(array: Input.Message[]): MessageType;
         filterMessagesByType(array: Input.Message[], value: string): string[];
@@ -103,6 +104,7 @@ export declare namespace Input {
         newMomentum: boolean;
         control?: FormControl<unknown>;
         disableUserTextInput: boolean;
+        autocomplete?: Autocomplete;
         showDropdown: boolean;
         dropdownExpanded: boolean;
         dropdownAriaLabel: string;

package/dist/types/components/link/Link.d.ts

@@ -32,7 +32,14 @@ export declare namespace Link {
         private _tabIndex;
         get tabIndex(): number;
         set tabIndex(newValue: number);
+        autofocus: boolean;
+        linkRef: HTMLElement;
         static get styles(): import("lit").CSSResult[];
+        firstUpdated(): void;
+        focus(): void;
+        blur(): void;
+        private get linkClassNamesInfo();
+        private get linkElement();
         render(): import("lit").TemplateResult<1>;
     }
 }

package/dist/types/components/list-v2/list-item-v2.d.ts

@@ -0,0 +1,67 @@
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import { LitElement } from "lit";
+export declare namespace ListItemV2 {
+    type Variant = "full-width" | "inset-pill" | "inset-rectangle";
+    /**
+     * @fires list-item-click
+     * @fires list-item-expanded
+     */
+    class ELEMENT extends LitElement {
+        /**
+         * The primary label of the list item.
+         * This appears on the leading side of the list item.
+         */
+        label?: string;
+        /**
+         * Secondary label of the list item.
+         * This appears on the trailing side of the list item, under the primary label
+         */
+        secondaryLabel?: string;
+        /**
+         * Tertiary label of the list item.
+         * This appears on the leading side of the list item, under the secondary label.
+         */
+        tertiaryLabel?: string;
+        /**
+         * Make the list item expandable.
+         * This will allow the content inside the "panel" slot to be collapsible.
+         * It will render an expand button before the leading controls
+         */
+        expandable: boolean;
+        /**
+         * Whether the list item is expanded.
+         * @default false
+         */
+        expanded: boolean;
+        disabled: boolean;
+        /**
+         * The visual style variant of the list item. This can be a pill, rectangle or a full-width
+         */
+        variant: Variant;
+        /**
+         * The ARIA label for the expand button. Only use if `expandable` is true.
+         */
+        expandLabel: string;
+        header: HTMLElement;
+        render(): import("lit").TemplateResult<1>;
+        private renderExpandButton;
+        private renderLeadingControls;
+        private renderTrailingControls;
+        private stopArrowKeyEventPropagation;
+        private isExpandCollapseKey;
+        protected stopEventPropagation(event: Event): void;
+        private setExpanded;
+        private _handleExpand;
+        private _handleListItemClick;
+        private _handleArrowKeyExpand;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        static get styles(): import("lit").CSSResult;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "md-list-item-v2": ListItemV2.ELEMENT;
+    }
+}

package/dist/types/components/list-v2/list-v2.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from "lit";
+export declare namespace ListV2 {
+    type Gap = "none" | "sm" | "md" | "lg";
+    type Orientation = "vertical" | "horizontal";
+    class ELEMENT extends LitElement {
+        /**
+         * The gap between list items.
+         */
+        gap: Gap;
+        orientation: Orientation;
+        assignedNodes: NodeList;
+        connectedCallback(): void;
+        render(): import("lit").TemplateResult<1>;
+        private get listItems();
+        private handleMouseClick;
+        /**
+         * Calculates a new index based on the pressed keyboard key.
+         * Supports navigation keys for moving focus within a list.
+         * @param key - The key that was pressed.
+         * @param currentIndex - The current index of the focused list item.
+         * @param wrappedDivsCount - The total number of list items.
+         * @returns The new index to focus on, or undefined if the key is not supported.
+         */
+        private getNewIndexBasedOnKey;
+        /**
+         * Handles the keydown event on the list element.
+         * If the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item
+         * and sets the active tabindex of the list item.
+         * Prevents the default event behavior.
+         * @param event - The keyboard event.
+         */
+        private handleKeyDown;
+        /**
+         * Returns the index of the given target in the listItems array.
+         * If the target is not a list item, but a child element of a list item,
+         * it returns the index of the parent list item.
+         * @param target - The target element to find the index of.
+         * @returns The index of the target element in the listItems array.
+         */
+        private getCurrentIndex;
+        /**
+         * Resets all list items tabindex to -1 and sets the tabindex of the
+         * element at the given index to 0, effectively setting the active
+         * element. This is used when navigating the list via keyboard.
+         *
+         * @param newIndex - The index of the new active element in the list.
+         */
+        private resetTabIndexAndSetActiveTabIndex;
+        static get styles(): import("lit").CSSResult;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "md-list-v2": ListV2.ELEMENT;
+    }
+}

package/dist/types/components/slider/Slider.d.ts

@@ -1,5 +1,12 @@
 import { LitElement, PropertyValues } from "lit";
 export declare namespace Slider {
+    export interface SliderChangeEventDetail {
+        value: number;
+    }
+    export interface SliderChangingEventDetail {
+        oldValue: number;
+        newValue: number;
+    }
     const ELEMENT_base: typeof LitElement & import("../../mixins/FocusMixin").AnyConstructor<import("../../mixins/FocusMixin").FocusClass>;
     export class ELEMENT extends ELEMENT_base {
         private _disabled;
@@ -45,4 +52,8 @@ declare global {
     interface HTMLElementTagNameMap {
         "md-slider": Slider.ELEMENT;
     }
+    interface HTMLElementEventMap {
+        "slider-change": CustomEvent<Slider.SliderChangeEventDetail>;
+        "slider-changing": CustomEvent<Slider.SliderChangingEventDetail>;
+    }
 }

package/dist/types/components/tooltip/Tooltip.d.ts

@@ -30,6 +30,9 @@ export declare namespace Tooltip {
         private slotContent;
         private readonly _keyDownListener;
         private readonly _wheelListener;
+        private hasMessage;
+        private hasSlotContent;
+        private get hasTooltipContent();
         connectedCallback(): void;
         disconnectedCallback(): void;
         protected handleResize(contentRect: DOMRect): void;

package/dist/types/index.d.ts

@@ -56,6 +56,8 @@ export { InputFile } from "./components/input-file/InputFile";
 export { Input } from "./components/input/Input";
 export { Label } from "./components/label/Label";
 export { Link } from "./components/link/Link";
+export { ListItemV2 } from "./components/list-v2/list-item-v2";
+export { ListV2 } from "./components/list-v2/list-v2";
 export { List } from "./components/list/List";
 export { ListItem } from "./components/list/ListItem";
 export { Loading } from "./components/loading/Loading";

package/dist/types/utils/keyboard.d.ts

@@ -1 +1,2 @@
 export declare function isActionKey(keyCode: string): boolean;
+export declare function isNavigationKey(keyCode: string): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.5",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
@@ -14,7 +14,7 @@
     "@interactjs/interact": "1.10.3",
     "@interactjs/modifiers": "1.10.3",
     "@interactjs/utils": "1.10.3",
-    "@momentum-design/icons": "0.34.0",
+    "@momentum-design/icons": "0.35.2",
     "@popperjs/core": "^2.11.8",
     "country-codes-list": "1.6.8",
     "country-flags-svg": "1.1.4",