@momentum-design/components 0.137.7 → 0.138.0

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

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type { CheckboxValidationType } from './checkbox.types';
-declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/ModifiedEventMixin").ModifiedEventMixinInterface> & typeof FormfieldWrapper;
 /**
  * The checkbox is a form control that represents a binary choice ("checked"/"unchecked") or, when used in a group, allows multiple selections from a list. It wraps a native `<input type="checkbox">` and renders a custom visual through `mdc-staticcheckbox`, while preserving full form participation (value, name, validation, reset).
  * 
@@ -47,6 +47,11 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @cssstate checked - Active when the checkbox is checked.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
+    /**
+     * Controls the tab order of the native checkbox input.
+     * @default 0
+     */
+    tabIndex: number;
     /**
      * Determines whether the checkbox is checked (selected) or unchecked.
      * @default false

package/dist/components/checkbox/checkbox.component.js

@@ -17,6 +17,7 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { KeyToActionMixin, ACTIONS, NAV_MODES } from '../../utils/mixins/KeyToActionMixin';
 import { KeyDownHandledMixin } from '../../utils/mixins/KeyDownHandledMixin';
+import { ModifiedEventMixin } from '../../utils/mixins/lifecycle/ModifiedEventMixin';
 import styles from './checkbox.styles';
 import { CHECKBOX_VALIDATION } from './checkbox.constants';
 /**
@@ -45,9 +46,14 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  *
  * @cssstate checked - Active when the checkbox is checked.
  */
-class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
+class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(ModifiedEventMixin(FormfieldWrapper)))))) {
     constructor() {
         super(...arguments);
+        /**
+         * Controls the tab order of the native checkbox input.
+         * @default 0
+         */
+        this.tabIndex = 0;
         /**
          * Determines whether the checkbox is checked (selected) or unchecked.
          * @default false
@@ -144,11 +150,17 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         if (!this.disabled && !this.softDisabled && !this.readonly) {
             this.checked = !this.checked;
             this.indeterminate = false;
+            return true;
         }
+        return false;
     }
     click() {
         super.click();
-        this.toggleState();
+        const hasBeenToggled = this.toggleState();
+        if (hasBeenToggled) {
+            // Host clicks bypass the native input, so dispatch the equivalent change event.
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
     }
     /**
      * Handles the keydown event on the checkbox.
@@ -171,7 +183,10 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         }
         if (this.getKeyboardNavMode() === NAV_MODES.SPATIAL) {
             if (!(this.readonly || this.softDisabled) && action === ACTIONS.ENTER) {
-                this.toggleState();
+                const hasBeenToggled = this.toggleState();
+                if (hasBeenToggled) {
+                    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+                }
                 this.keyDownEventHandled();
             }
         }
@@ -197,6 +212,13 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
                 this.internals.states.delete('checked');
             }
         }
+        if (changedProperties.has('checked') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('indeterminate') ||
+            changedProperties.has('readonly') ||
+            changedProperties.has('softDisabled')) {
+            this.dispatchModifiedEvent('state');
+        }
     }
     render() {
         var _a;
@@ -223,7 +245,7 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
           .disabled="${this.disabled}"
           ?readonly="${this.readonly}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-          tabindex="${this.disabled ? -1 : 0}"
+          tabindex="${this.disabled ? -1 : this.tabIndex}"
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
           @change=${this.handleChange}
           @keydown=${this.handleKeyDown}
@@ -235,6 +257,14 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
 }
 Checkbox.styles = [...FormfieldWrapper.styles, ...styles];
 Checkbox.shadowRootOptions = { ...FormfieldWrapper.shadowRootOptions, delegatesFocus: true };
+__decorate([
+    property({
+        converter: {
+            fromAttribute: value => (value === null ? 0 : Number(value)),
+        },
+    }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "tabIndex", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)

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

@@ -0,0 +1,99 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import type Checkbox from '../checkbox/checkbox.component';
+import FormfieldGroup from '../formfieldgroup/formfieldgroup.component';
+declare const CheckboxTree_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface & import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface & import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & typeof FormfieldGroup;
+/**
+ * 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 class CheckboxTree extends CheckboxTree_base {
+    /** @internal */
+    protected loop: 'true' | 'false';
+    /** @internal */
+    private generatedAriaLabel?;
+    private pendingSynchronization;
+    constructor();
+    connectedCallback(): void;
+    /** @internal */
+    private get parentTree();
+    /** @internal */
+    private get rootTree();
+    /** @internal */
+    private get isNested();
+    /** @internal */
+    protected get navItems(): Checkbox[];
+    /** @internal */
+    protected setInitialFocus(): void;
+    /** @internal */
+    private getCheckboxes;
+    /** @internal */
+    private handleSlotChange;
+    /** @internal */
+    private handleCheckboxModified;
+    /** Coalesces checkbox modifications into one full-tree synchronization. @internal */
+    private scheduleSynchronizeTree;
+    /** @internal */
+    private handleCheckboxChange;
+    /** @internal */
+    private getChildTree;
+    /** @internal */
+    private getParentCheckbox;
+    /** @internal */
+    private setDescendantState;
+    /** @internal */
+    private synchronizeTree;
+    /** @internal */
+    private synchronizeParentStates;
+    /** @internal */
+    private synchronizeTabIndexes;
+    /** @internal */
+    private synchronizeContext;
+    update(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default CheckboxTree;

package/dist/components/checkboxtree/checkboxtree.component.js

@@ -0,0 +1,213 @@
+import { html, nothing } from 'lit';
+import { ListNavigationMixin } from '../../utils/mixins/ListNavigationMixin';
+import { ROLE } from '../../utils/roles';
+import { TAG_NAME as CHECKBOX_TAG_NAME } from '../checkbox/checkbox.constants';
+import FormfieldGroup from '../formfieldgroup/formfieldgroup.component';
+import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+import { TAG_NAME } from './checkboxtree.constants';
+import styles from './checkboxtree.styles';
+/**
+ * @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.
+ */
+class CheckboxTree extends ListNavigationMixin(FormfieldGroup) {
+    constructor() {
+        super();
+        /** @internal */
+        this.loop = 'false';
+        this.pendingSynchronization = false;
+        /** @internal */
+        this.handleSlotChange = () => {
+            this.rootTree.synchronizeTree();
+        };
+        /** @internal */
+        this.handleCheckboxModified = (event) => {
+            if (this.isNested || !(event.target instanceof HTMLElement) || !event.target.matches(CHECKBOX_TAG_NAME))
+                return;
+            this.scheduleSynchronizeTree();
+        };
+        /** @internal */
+        this.handleCheckboxChange = (event) => {
+            if (this.isNested || !(event.target instanceof HTMLElement) || !event.target.matches(CHECKBOX_TAG_NAME))
+                return;
+            const checkbox = event.target;
+            const childTree = this.getChildTree(checkbox);
+            if (childTree) {
+                this.setDescendantState(childTree, checkbox.checked);
+            }
+            this.synchronizeParentStates();
+        };
+        this.addEventListener('change', this.handleCheckboxChange);
+        this.addEventListener('modified', this.handleCheckboxModified);
+    }
+    connectedCallback() {
+        var _a;
+        const ariaLabelBeforeConnection = this.getAttribute('aria-label');
+        super.connectedCallback();
+        if (this.generatedAriaLabel === undefined && ariaLabelBeforeConnection === null) {
+            this.generatedAriaLabel = (_a = this.label) !== null && _a !== void 0 ? _a : '';
+        }
+        this.synchronizeContext();
+        if (!this.isNested) {
+            this.synchronizeTree();
+        }
+    }
+    /** @internal */
+    get parentTree() {
+        var _a, _b;
+        return (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.closest(TAG_NAME)) !== null && _b !== void 0 ? _b : null;
+    }
+    /** @internal */
+    get rootTree() {
+        var _a, _b;
+        return (_b = (_a = this.parentTree) === null || _a === void 0 ? void 0 : _a.rootTree) !== null && _b !== void 0 ? _b : this;
+    }
+    /** @internal */
+    get isNested() {
+        return this.parentTree !== null;
+    }
+    /** @internal */
+    get navItems() {
+        if (this.isNested)
+            return [];
+        return this.getCheckboxes().filter(checkbox => !checkbox.disabled);
+    }
+    /** @internal */
+    setInitialFocus() {
+        if (this.isNested)
+            return;
+        this.synchronizeTabIndexes();
+    }
+    /** @internal */
+    getCheckboxes() {
+        return Array.from(this.querySelectorAll(CHECKBOX_TAG_NAME));
+    }
+    /** Coalesces checkbox modifications into one full-tree synchronization. @internal */
+    scheduleSynchronizeTree() {
+        if (this.pendingSynchronization)
+            return;
+        this.pendingSynchronization = true;
+        queueMicrotask(() => {
+            this.pendingSynchronization = false;
+            this.synchronizeTree();
+        });
+    }
+    /** @internal */
+    getChildTree(checkbox) {
+        const sibling = checkbox.nextElementSibling;
+        return (sibling === null || sibling === void 0 ? void 0 : sibling.matches(TAG_NAME)) ? sibling : null;
+    }
+    /** @internal */
+    getParentCheckbox(tree) {
+        const sibling = tree.previousElementSibling;
+        return (sibling === null || sibling === void 0 ? void 0 : sibling.matches(CHECKBOX_TAG_NAME)) ? sibling : null;
+    }
+    /** @internal */
+    setDescendantState(tree, checked) {
+        tree.getCheckboxes().forEach(checkbox => {
+            if (checkbox.disabled || checkbox.readonly || checkbox.softDisabled)
+                return;
+            const descendant = checkbox;
+            descendant.checked = checked;
+            descendant.indeterminate = false;
+        });
+    }
+    /** @internal */
+    synchronizeTree() {
+        if (this.isNested || !this.isConnected)
+            return;
+        this.synchronizeParentStates();
+        this.synchronizeTabIndexes();
+    }
+    /** @internal */
+    synchronizeParentStates() {
+        const nestedTrees = Array.from(this.querySelectorAll(TAG_NAME)).reverse();
+        nestedTrees.forEach(tree => {
+            const parentCheckbox = this.getParentCheckbox(tree);
+            const descendants = tree.getCheckboxes();
+            if (!parentCheckbox || descendants.length === 0)
+                return;
+            const allChecked = descendants.every(checkbox => checkbox.checked && !checkbox.indeterminate);
+            const anyChecked = descendants.some(checkbox => checkbox.checked || checkbox.indeterminate);
+            parentCheckbox.checked = allChecked;
+            parentCheckbox.indeterminate = !allChecked && anyChecked;
+        });
+    }
+    /** @internal */
+    synchronizeTabIndexes() {
+        var _a;
+        const checkboxes = this.getCheckboxes();
+        const navigableCheckboxes = checkboxes.filter(checkbox => !checkbox.disabled);
+        const focusedCheckbox = navigableCheckboxes.find(checkbox => checkbox.matches(':focus-within'));
+        const currentCheckbox = navigableCheckboxes.find(checkbox => checkbox.getAttribute('tabindex') === '0');
+        const activeCheckbox = (_a = focusedCheckbox !== null && focusedCheckbox !== void 0 ? focusedCheckbox : currentCheckbox) !== null && _a !== void 0 ? _a : navigableCheckboxes[0];
+        checkboxes.forEach(checkbox => {
+            checkbox.setAttribute('tabindex', checkbox === activeCheckbox ? '0' : '-1');
+        });
+    }
+    /** @internal */
+    synchronizeContext() {
+        var _a;
+        if (this.isNested) {
+            this.removeAttribute('aria-description');
+            this.removeAttribute('aria-invalid');
+            this.removeAttribute('aria-label');
+            this.removeAttribute('role');
+            return;
+        }
+        this.role = ROLE.GROUP;
+        this.ariaDescription = (_a = this.helpText) !== null && _a !== void 0 ? _a : '';
+        if (this.helpTextType === VALIDATION.ERROR) {
+            this.setAttribute('aria-invalid', 'true');
+        }
+        else {
+            this.removeAttribute('aria-invalid');
+        }
+    }
+    update(changedProperties) {
+        var _a;
+        // Capture before FormfieldGroup may regenerate aria-label from label.
+        const ariaLabelBeforeUpdate = this.getAttribute('aria-label');
+        super.update(changedProperties);
+        if (!this.isNested && (ariaLabelBeforeUpdate === null || ariaLabelBeforeUpdate === this.generatedAriaLabel)) {
+            this.generatedAriaLabel = (_a = this.label) !== null && _a !== void 0 ? _a : '';
+            this.setAttribute('aria-label', this.generatedAriaLabel);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.synchronizeContext();
+    }
+    render() {
+        return html `
+      ${this.isNested ? nothing : html `<div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>`}
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+    }
+}
+CheckboxTree.styles = [...FormfieldGroup.styles, ...styles];
+export default CheckboxTree;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-checkboxtree";
+export { TAG_NAME };

package/dist/components/checkboxtree/checkboxtree.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('checkboxtree');
+export { TAG_NAME };

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

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

package/dist/components/checkboxtree/checkboxtree.styles.js

@@ -0,0 +1,25 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+
+  :host::part(label) {
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+  }
+
+  ::slotted(mdc-checkbox),
+  ::slotted(mdc-checkboxtree) {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+
+  ::slotted(mdc-checkboxtree) {
+    /* Keep the fallback here so consumer overrides inherit through nested trees. */
+    padding-inline-start: var(--mdc-checkboxtree-indent, 1.5rem);
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,13 @@
+import '../button';
+import '../checkbox';
+import '../icon';
+import '../statusmessage';
+import '../text';
+import '../toggletip';
+import CheckboxTree from './checkboxtree.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-checkboxtree']: CheckboxTree;
+    }
+}
+export default CheckboxTree;

package/dist/components/checkboxtree/index.js

@@ -0,0 +1,10 @@
+import '../button';
+import '../checkbox';
+import '../icon';
+import '../statusmessage';
+import '../text';
+import '../toggletip';
+import CheckboxTree from './checkboxtree.component';
+import { TAG_NAME } from './checkboxtree.constants';
+CheckboxTree.register(TAG_NAME);
+export default CheckboxTree;

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

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
 import type { TextType } from '../text/text.types';
 import { ListItemVariants } from './listitem.types';
-declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Component;
+declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/ModifiedEventMixin").ModifiedEventMixinInterface> & typeof Component;
 /**
  * `mdc-listitem` is the row primitive for an `mdc-list` — a single focusable entry that presents one piece of repeated content and lets the user act on it. The parent `mdc-list` manages navigation between rows, so each item only has to represent its own content and behavior.
  * 

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { TabSize, Variant } from './tab.types';
-declare const Tab_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Buttonsimple;
+declare const Tab_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/ModifiedEventMixin").ModifiedEventMixinInterface> & typeof Buttonsimple;
 /**
  * `mdc-tab` is a single tab control inside an `mdc-tablist`, representing one panel of related content the user can switch to. It shows which panel is currently active, while the parent `mdc-tablist` owns focus movement and selection.
  *