@momentum-design/components 0.137.7 → 0.138.0

package/dist/index.d.ts

@@ -92,6 +92,7 @@ import Buttonsimple from './components/buttonsimple';
 import Verticaltablist from './components/verticaltablist';
 import StatusMessage from './components/statusmessage';
 import FocusTrap from './components/focustrap';
+import CheckboxTree from './components/checkboxtree';
 import type { AvatarSize } from './components/avatar/avatar.types';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ColorType as ChipColorType } from './components/staticchip/staticchip.types';
@@ -122,6 +123,6 @@ import type { TimePickerChangeEvent, TimePickerInputEvent } from './components/t
 import type { DatePickerChangeEvent, DatePickerInputEvent } from './components/datepicker/datepicker.types';
 import type { CalendarDateSelectedEvent, CalendarMonthChangedEvent } from './components/calendar/calendar.types';
 import type { ListBoxChangeEvent } from './components/listbox/listbox.types';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
 export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, StatusMessageSeverity, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, DatePickerChangeEvent, DatePickerInputEvent, CalendarDateSelectedEvent, CalendarMonthChangedEvent, VerticaltablistChangeEvent, ListBoxChangeEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -94,11 +94,12 @@ import Buttonsimple from './components/buttonsimple';
 import Verticaltablist from './components/verticaltablist';
 import StatusMessage from './components/statusmessage';
 import FocusTrap from './components/focustrap';
+import CheckboxTree from './components/checkboxtree';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/react/checkboxtree/index.d.ts

@@ -0,0 +1,50 @@
+import Component from '../../components/checkboxtree';
+/**
+ * The checkbox tree lets people select related options at different levels while parent choices summarize and control
+ * their descendants. It supports hierarchical choice sets that would be difficult to understand as one flat group.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-checkboxtree` when options belong to categories and people need to select any number of categories or
+ *   individual descendants.
+ * - Use `mdc-checkboxtree` when a parent choice must select or clear every available option in its branch.
+ * - Use `mdc-checkboxtree` when mixed parent states help people understand that only part of a category is selected.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use a checkbox tree for a flat list of unrelated options. Use `mdc-formfieldgroup` with direct `mdc-checkbox`
+ *   children instead.
+ * - Do not use a checkbox tree when exactly one option can be selected. Use `mdc-radiogroup` with `mdc-radio` children
+ *   instead.
+ * - Do not use a deeply nested checkbox tree when the hierarchy can be split into smaller steps or filtered lists.
+ *   Shallower choices are easier to scan and use on small screens.
+ * 
+ * @tagname mdc-checkboxtree
+ * 
+ * @dependency mdc-button
+ * @dependency mdc-checkbox
+ * @dependency mdc-icon
+ * @dependency mdc-statusmessage
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
+ * 
+ * @slot default - Direct `mdc-checkbox` children and nested `mdc-checkboxtree` descendants. A nested tree belongs to the checkbox immediately before it.
+ * @slot label - Slot for the visible group label. If omitted, the `label` property is used.
+ * @slot toggletip - Slot for the label's information button and toggletip.
+ * @slot help-icon - Slot for the helper or validation icon.
+ * @slot help-text - Slot for the helper or validation text.
+ * 
+ * @csspart group-header - Container for the outer tree's label and helper text.
+ * @csspart label - The outer tree's label.
+ * @csspart label-text - Container for the label, required indicator, and information button.
+ * @csspart required-indicator - Required indicator displayed next to the label.
+ * @csspart info-icon-btn - Information button displayed next to the label.
+ * @csspart label-toggletip - Toggletip associated with the information button.
+ * @csspart help-text - Helper or validation text.
+ * @csspart helper-icon - Helper or validation icon.
+ * @csspart help-text-container - Container for helper or validation content.
+ * 
+ * @cssproperty --mdc-checkboxtree-indent - Inline indentation added by each nested tree.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/checkboxtree/index.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/checkboxtree';
+import { TAG_NAME } from '../../components/checkboxtree/checkboxtree.constants';
+/**
+ * @tagname mdc-checkboxtree
+ *
+ * @dependency mdc-button
+ * @dependency mdc-checkbox
+ * @dependency mdc-icon
+ * @dependency mdc-statusmessage
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
+ *
+ * @slot default - Direct `mdc-checkbox` children and nested `mdc-checkboxtree` descendants. A nested tree belongs to the checkbox immediately before it.
+ * @slot label - Slot for the visible group label. If omitted, the `label` property is used.
+ * @slot toggletip - Slot for the label's information button and toggletip.
+ * @slot help-icon - Slot for the helper or validation icon.
+ * @slot help-text - Slot for the helper or validation text.
+ *
+ * @csspart group-header - Container for the outer tree's label and helper text.
+ * @csspart label - The outer tree's label.
+ * @csspart label-text - Container for the label, required indicator, and information button.
+ * @csspart required-indicator - Required indicator displayed next to the label.
+ * @csspart info-icon-btn - Information button displayed next to the label.
+ * @csspart label-toggletip - Toggletip associated with the information button.
+ * @csspart help-text - Helper or validation text.
+ * @csspart helper-icon - Helper or validation icon.
+ * @csspart help-text-container - Container for helper or validation content.
+ *
+ * @cssproperty --mdc-checkboxtree-indent - Inline indentation added by each nested tree.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'CheckboxTree',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -21,6 +21,7 @@ export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
+export { default as CheckboxTree } from './checkboxtree';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';

package/dist/react/index.js

@@ -21,6 +21,7 @@ export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
+export { default as CheckboxTree } from './checkboxtree';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';

package/dist/utils/mixins/lifecycle/LifeCycleMixin.d.ts

@@ -1,13 +1,6 @@
 import type { LitElement } from 'lit';
 import type { Constructor } from '../index.types';
-export declare class LifeCycleMixinInterface {
-    /**
-     * Dispatches a 'LifeCycleModifiedEvent' event for the passed changed type.
-     *
-     * @param change - The type of change that occurred, e.g., 'disabled'.
-     */
-    protected dispatchModifiedEvent(change: string): void;
-}
+import { ModifiedEventMixinInterface } from './ModifiedEventMixin';
 /**
  * Mixin to create Lifecycle Manager compatible events for the component.
  *
@@ -30,4 +23,4 @@ export declare class LifeCycleMixinInterface {
  *  }
  * ```
  */
-export declare const LifeCycleMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<LifeCycleMixinInterface> & T;
+export declare const LifeCycleMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ModifiedEventMixinInterface> & T;

package/dist/utils/mixins/lifecycle/LifeCycleMixin.js

@@ -1,4 +1,5 @@
 import { LIFE_CYCLE_EVENTS } from './lifecycle.contants';
+import { ModifiedEventMixin } from './ModifiedEventMixin';
 /**
  * Mixin to create Lifecycle Manager compatible events for the component.
  *
@@ -22,7 +23,7 @@ import { LIFE_CYCLE_EVENTS } from './lifecycle.contants';
  * ```
  */
 export const LifeCycleMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
+    class InnerMixinClass extends ModifiedEventMixin(superClass) {
         connectedCallback() {
             super.connectedCallback();
             this.dispatchEvent(new CustomEvent(LIFE_CYCLE_EVENTS.CREATED, { bubbles: true, composed: true, detail: { lifecycle: true } }));
@@ -39,14 +40,6 @@ export const LifeCycleMixin = (superClass) => {
             super.disconnectedCallback();
             this.dispatchEvent(new CustomEvent(LIFE_CYCLE_EVENTS.DESTROYED, { bubbles: true, composed: true, detail: { lifecycle: true } }));
         }
-        /** @see LifeCycleMixinInterface.dispatchModifiedEvent */
-        dispatchModifiedEvent(change) {
-            this.dispatchEvent(new CustomEvent(LIFE_CYCLE_EVENTS.MODIFIED, {
-                detail: { change, lifecycle: true },
-                bubbles: true,
-                composed: true,
-            }));
-        }
     }
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;

package/dist/utils/mixins/lifecycle/ModifiedEventMixin.d.ts

@@ -0,0 +1,12 @@
+import type { LitElement } from 'lit';
+import type { Constructor } from '../index.types';
+export declare class ModifiedEventMixinInterface {
+    /**
+     * Dispatches a lifecycle `modified` event for the passed change type.
+     *
+     * @param change - The type of change that occurred.
+     */
+    protected dispatchModifiedEvent(change: string): void;
+}
+/** Adds support for dispatching lifecycle `modified` events without emitting connection events. */
+export declare const ModifiedEventMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ModifiedEventMixinInterface> & T;

package/dist/utils/mixins/lifecycle/ModifiedEventMixin.js

@@ -0,0 +1,15 @@
+import { LIFE_CYCLE_EVENTS } from './lifecycle.contants';
+/** Adds support for dispatching lifecycle `modified` events without emitting connection events. */
+export const ModifiedEventMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        /** @see ModifiedEventMixinInterface.dispatchModifiedEvent */
+        dispatchModifiedEvent(change) {
+            this.dispatchEvent(new CustomEvent(LIFE_CYCLE_EVENTS.MODIFIED, {
+                detail: { change, lifecycle: true },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    return InnerMixinClass;
+};

package/package.json

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