@momentum-design/components 0.112.6 → 0.113.0

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

@@ -1,2 +1,9 @@
 declare const TAG_NAME: "mdc-combobox";
-export { TAG_NAME };
+declare const ICON_NAME: {
+    readonly ARROW_UP: "arrow-up-bold";
+    readonly ARROW_DOWN: "arrow-down-bold";
+};
+declare const AUTOCOMPLETE_LIST = "list";
+declare const LISTBOX_ID = "combobox-listbox-id";
+declare const TRIGGER_ID = "combobox-trigger-id";
+export { TAG_NAME, ICON_NAME, TRIGGER_ID, LISTBOX_ID, AUTOCOMPLETE_LIST };

package/dist/components/combobox/combobox.constants.js

@@ -1,3 +1,10 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('combobox');
-export { TAG_NAME };
+const ICON_NAME = {
+    ARROW_UP: 'arrow-up-bold',
+    ARROW_DOWN: 'arrow-down-bold',
+};
+const AUTOCOMPLETE_LIST = 'list';
+const LISTBOX_ID = 'combobox-listbox-id';
+const TRIGGER_ID = 'combobox-trigger-id';
+export { TAG_NAME, ICON_NAME, TRIGGER_ID, LISTBOX_ID, AUTOCOMPLETE_LIST };

package/dist/components/combobox/combobox.events.d.ts

@@ -0,0 +1,27 @@
+import type Option from '../option/option.component';
+import type Combobox from './combobox.component';
+export declare class ComboboxEventManager {
+    /**
+     * Dispatches a custom event for the Combobox.
+     *
+     * @param instance - The combobox instance.
+     * @param eventName - The name of the event.
+     * @param option - The option that triggered the event.
+     * @param bubbles - Whether the event should bubble up the DOM tree.
+     */
+    static dispatchComboboxEvent(instance: Combobox, eventName: string, option: Option, bubbles?: boolean): void;
+    /**
+     * Dispatches a custom event for the Combobox when the input value changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onInputCombobox(instance: Combobox, option: Option): void;
+    /**
+     * Dispatches a custom event for the Combobox when the selected option changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onChangeCombobox(instance: Combobox, option: Option): void;
+}

package/dist/components/combobox/combobox.events.js

@@ -0,0 +1,35 @@
+export class ComboboxEventManager {
+    /**
+     * Dispatches a custom event for the Combobox.
+     *
+     * @param instance - The combobox instance.
+     * @param eventName - The name of the event.
+     * @param option - The option that triggered the event.
+     * @param bubbles - Whether the event should bubble up the DOM tree.
+     */
+    static dispatchComboboxEvent(instance, eventName, option, bubbles = true) {
+        instance.dispatchEvent(new CustomEvent(eventName, {
+            detail: { value: option === null || option === void 0 ? void 0 : option.value, label: option === null || option === void 0 ? void 0 : option.label },
+            composed: true,
+            bubbles,
+        }));
+    }
+    /**
+     * Dispatches a custom event for the Combobox when the input value changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onInputCombobox(instance, option) {
+        this.dispatchComboboxEvent(instance, 'input', option);
+    }
+    /**
+     * Dispatches a custom event for the Combobox when the selected option changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onChangeCombobox(instance, option) {
+        this.dispatchComboboxEvent(instance, 'change', option);
+    }
+}

package/dist/components/combobox/combobox.styles.js

@@ -1,7 +1,128 @@
 import { css } from 'lit';
 const styles = css `
   :host {
-    display: block;
+    --mdc-combobox-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-combobox-icon-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-combobox-width: 100%;
+    --mdc-combobox-listbox-width: var(--mdc-combobox-width);
+    --mdc-combobox-listbox-height: auto;
+    --mdc-combobox-text-color-disabled: var(--mds-color-theme-text-primary-disabled);
+    --mdc-combobox-hover-background-color: var(--mds-color-theme-background-primary-hover);
+    --mdc-combobox-error-border-color: var(--mds-color-theme-text-error-normal);
+    --mdc-combobox-warning-border-color: var(--mds-color-theme-text-warning-normal);
+    --mdc-combobox-success-border-color: var(--mds-color-theme-text-success-normal);
+    --mdc-combobox-primary-border-color: var(--mds-color-theme-text-accent-normal);
+    --mdc-combobox-focused-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-combobox-focused-border-color: var(--mds-color-theme-outline-input-active);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.5rem;
+    width: var(--mdc-combobox-width);
+  }
+  :host::part(combobox__base) {
+    width: 100%;
+    display: flex;
+    position: relative;
+    border-radius: 0.5rem;
+  }
+  :host(:dir(ltr))::part(combobox__button) {
+    background-color: unset;
+    border-radius: 0 0.5rem 0.5rem 0;
+    border-left: 1px solid var(--mdc-combobox-border-color);
+    position: absolute;
+    padding: 0.5rem;
+    right: 0;
+  }
+  :host(:dir(rtl))::part(combobox__button) {
+    background-color: unset;
+    border-radius: 0.5rem 0 0 0.5rem;
+    border-right: 1px solid var(--mdc-combobox-border-color);
+    position: absolute;
+    padding: 0.5rem;
+    left: 0;
+  }
+  :host([disabled])::part(combobox__button) {
+    cursor: unset;
+  }
+  :host mdc-input {
+    --mdc-input-error-border-color: var(--mdc-combobox-error-border-color);
+    --mdc-input-warning-border-color: var(--mdc-combobox-warning-border-color);
+    --mdc-input-success-border-color: var(--mdc-combobox-success-border-color);
+    --mdc-input-primary-border-color: var(--mdc-combobox-primary-border-color);
+    --mdc-input-focused-border-color: var(--mdc-combobox-focused-border-color);
+    --mdc-input-focused-background-color: var(--mdc-combobox-focused-background-color);
+  }
+  :host(:focus-within)::part(combobox__button) {
+    border-left: 1px solid var(--mdc-combobox-focused-border-color);
+  }
+  :host(:not([disabled]))::part(combobox__base):hover {
+    background-color: var(--mdc-combobox-hover-background-color);
+  }
+  :host([help-text-type='error'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-error-border-color);
+  }
+  :host([help-text-type='warning'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-warning-border-color);
+  }
+  :host([help-text-type='success'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-success-border-color);
+  }
+  :host([help-text-type='priority'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-primary-border-color);
+  }
+  :host([disabled])::part(combobox__button) {
+    border-left: 1px solid var(--mdc-combobox-text-color-disabled);
+  }
+  :host::part(mdc-input) {
+    width: calc(100% - 1.5rem);
+  }
+  :host::part(combobox__button-icon) {
+    --mdc-icon-fill-color: var(--mdc-combobox-icon-color);
+  }
+  :host([disabled])::part(combobox__button-icon) {
+    --mdc-icon-fill-color: var(--mdc-combobox-text-color-disabled);
+  }
+  :host::part(no-result-text) {
+    pointer-events: none;
+  }
+  :host([disabled]) input,
+  :host([disabled]) mdc-input {
+    user-select: none;
+    pointer-events: none;
+  }
+  :host::part(internal-native-input) {
+    margin: 0;
+    opacity: 0.1%;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  :host ::slotted(mdc-selectlistbox) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: var(--mdc-popover-internal-available-height);
+  }
+  /* Popover height & width overrides */
+  :host mdc-popover {
+    --mdc-popover-max-height: var(--mdc-combobox-listbox-height);
+    --mdc-popover-max-width: var(--mdc-combobox-listbox-width);
+  }
+  :host mdc-popover::part(popover-content) {
+    max-height: var(--mdc-popover-max-height);
+    outline: none;
+  }
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host::part(combobox__button-icon) {
+      --mdc-icon-fill-color: ButtonText;
+    }
   }
 `;
 export default [styles];

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

@@ -1,3 +1,24 @@
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type { PopoverHiddenEvent, PopoverPlacement, PopoverShownEvent } from '../popover/popover.types';
+import type Combobox from './combobox.component';
+import { ICON_NAME } from './combobox.constants';
+type ComboboxChangeEvent = TypedCustomEvent<Combobox, {
+    value: string;
+    label?: string;
+}>;
+type ComboboxInputEvent = TypedCustomEvent<Combobox, {
+    value: string;
+    label?: string;
+}>;
 interface Events {
+    onClickEvent: OverrideEventTarget<MouseEvent, Combobox>;
+    onChangeEvent: ComboboxChangeEvent;
+    onInputEvent: ComboboxInputEvent;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, Combobox>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Combobox>;
+    onShownEvent: PopoverShownEvent;
+    onHiddenEvent: PopoverHiddenEvent;
 }
-export type { Events };
+type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
+type IconName = ValueOf<typeof ICON_NAME>;
+export type { Events, IconName, Placement };

package/dist/components/combobox/combobox.types.js

@@ -1,2 +1 @@
-// import type { ValueOf } from '../../utils/types';
 export {};

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

@@ -1,3 +1,8 @@
+import '../buttonsimple';
+import '../icon';
+import '../input';
+import '../listitem';
+import '../popover';
 import Combobox from './combobox.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/combobox/index.js

@@ -1,3 +1,8 @@
+import '../buttonsimple';
+import '../icon';
+import '../input';
+import '../listitem';
+import '../popover';
 import Combobox from './combobox.component';
 import { TAG_NAME } from './combobox.constants';
 Combobox.register(TAG_NAME);

package/dist/components/divider/divider.styles.js

@@ -203,6 +203,10 @@ const styles = [
       line-height: var(--mdc-divider-text-line-height);
       flex-shrink: 0;
     }
+
+    :host([data-hidden]) {
+      display: none;
+    }
   `,
 ];
 export default styles;

package/dist/components/input/input.styles.js

@@ -31,6 +31,16 @@ const styles = [
       font-family: inherit;
     }
 
+    :host .input-container:hover {
+      background-color: var(--mdc-input-hover-background-color);
+    }
+
+    :host .input-container:active,
+    :host .input-container:focus-within {
+      background-color: var(--mdc-input-focused-background-color);
+      border-color: var(--mdc-input-focused-border-color);
+    }
+
     :host([readonly]) .leading-icon {
       color: var(--mdc-input-support-text-color);
     }
@@ -89,16 +99,6 @@ const styles = [
       white-space: nowrap; /* restrict prefix text to be in one line */
     }
 
-    :host(:not([disabled])) .input-container:hover {
-      background-color: var(--mdc-input-hover-background-color);
-    }
-
-    :host(:not([disabled])) .input-container:active,
-    :host(:not([disabled])) .input-container:focus-within {
-      background-color: var(--mdc-input-focused-background-color);
-      border-color: var(--mdc-input-focused-border-color);
-    }
-
     .input::placeholder {
       color: var(--mdc-input-support-text-color);
     }

package/dist/components/optgroup/optgroup.styles.js

@@ -12,5 +12,8 @@ const styles = css `
     color: var(--mdc-optgroup-disabled-color);
     cursor: default;
   }
+  :host([data-hidden]) {
+    display: none;
+  }
 `;
 export default [styles];

package/dist/components/option/option.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/option/option.styles.js

@@ -1,27 +1,40 @@
 import { css } from 'lit';
-const styles = css `
-  :host {
-    --mdc-listitem-column-gap: 0.75rem;
-    --mdc-option-icon-width: 1rem;
-    flex-shrink: 0;
-  }
+import { baseHostStyleVariables, focusRingBoxShadow } from '../../utils/styles';
+const styles = [
+    baseHostStyleVariables,
+    css `
+    :host {
+      --mdc-listitem-column-gap: 0.75rem;
+      --mdc-option-icon-width: 1rem;
+      flex-shrink: 0;
+    }
 
-  :host::part(leading-icon),
-  :host::part(trailing) {
-    display: flex;
-    align-items: center;
-    width: var(--mdc-option-icon-width);
-  }
+    :host::part(leading-icon),
+    :host::part(trailing) {
+      display: flex;
+      align-items: center;
+      width: var(--mdc-option-icon-width);
+    }
 
-  :host::part(leading-text) {
-    flex: 1;
-  }
+    :host::part(leading-text) {
+      flex: 1;
+    }
 
-  :host::part(leading-icon) {
-    margin-inline-end: var(--mdc-listitem-column-gap);
-  }
-  :host::part(trailing) {
-    margin-inline-start: var(--mdc-listitem-column-gap);
-  }
-`;
-export default [styles];
+    :host::part(leading-icon) {
+      margin-inline-end: var(--mdc-listitem-column-gap);
+    }
+    :host::part(trailing) {
+      margin-inline-start: var(--mdc-listitem-column-gap);
+    }
+
+    :host([data-focused]) {
+      outline: none;
+      position: relative;
+      box-shadow: ${focusRingBoxShadow};
+    }
+    :host([data-hidden]) {
+      display: none;
+    }
+  `,
+];
+export default styles;

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
-import type { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
+import type { PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
 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.
@@ -250,7 +250,7 @@ declare class Popover extends Popover_base {
      * @default absolute
      * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
      */
-    strategy: 'absolute' | 'fixed';
+    strategy: PopoverStrategy;
     /**
      * Role of the popover
      * @default dialog

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

@@ -953,7 +953,7 @@ __decorate([
     __metadata("design:type", Object)
 ], Popover.prototype, "closeButtonAriaLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'strategy' }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Popover.prototype, "strategy", void 0);
 __decorate([

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

@@ -23,6 +23,10 @@ declare const COLOR: {
     readonly TONAL: "tonal";
     readonly CONTRAST: "contrast";
 };
+declare const STRATEGY: {
+    readonly ABSOLUTE: "absolute";
+    readonly FIXED: "fixed";
+};
 declare const DEFAULTS: {
     readonly PLACEMENT: "bottom";
     readonly TRIGGER: "click";
@@ -53,4 +57,4 @@ declare const DEFAULTS: {
     readonly STRATEGY: "absolute";
     readonly IS_BACKDROP_INVISIBLE: true;
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

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

@@ -1,4 +1,5 @@
 import utils from '../../utils/tag-name';
+import { ROLE } from '../../utils/roles';
 const TAG_NAME = utils.constructTagName('popover');
 const POPOVER_PLACEMENT = {
     LEFT_START: 'left-start',
@@ -24,6 +25,10 @@ const COLOR = {
     TONAL: 'tonal',
     CONTRAST: 'contrast',
 };
+const STRATEGY = {
+    ABSOLUTE: 'absolute',
+    FIXED: 'fixed',
+};
 const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.BOTTOM,
     TRIGGER: TRIGGER.CLICK,
@@ -46,7 +51,7 @@ const DEFAULTS = {
     FLIP: true,
     SIZE: false,
     DELAY: '0,0',
-    ROLE: 'dialog',
+    ROLE: ROLE.DIALOG,
     Z_INDEX: 1000,
     DISABLE_ARIA_EXPANDED: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
@@ -54,4 +59,4 @@ const DEFAULTS = {
     STRATEGY: 'absolute',
     IS_BACKDROP_INVISIBLE: true,
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

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

@@ -1,8 +1,9 @@
 import type { ValueOf, TypedCustomEvent } from '../../utils/types';
 import type Popover from './popover.component';
-import { POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
+import { POPOVER_PLACEMENT, TRIGGER, COLOR, STRATEGY } from './popover.constants';
 type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
 type PopoverColor = ValueOf<typeof COLOR>;
+type PopoverStrategy = ValueOf<typeof STRATEGY>;
 type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;
 type PopoverShownEvent = TypedCustomEvent<Popover, {
     show: boolean;
@@ -22,4 +23,4 @@ interface Events {
     onCreatedEvent: PopoverCreatedEvent;
     onDestroyedEvent: PopoverDestroyedEvent;
 }
-export type { PopoverPlacement, PopoverColor, PopoverTrigger, Events, PopoverShownEvent, PopoverHiddenEvent };
+export type { PopoverPlacement, PopoverColor, PopoverStrategy, PopoverTrigger, Events, PopoverShownEvent, PopoverHiddenEvent, };