@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/types/components/mds-separator/mds-separator.d.ts

@@ -1,3 +1,11 @@
 export declare class MdsSeparator {
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-spinner/mds-spinner.d.ts

@@ -1,4 +1,8 @@
 export declare class MdsSpinner {
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Specifies if the animation is running or not, it's required for performance reasons
      */

package/dist/types/components/mds-status-bar/mds-status-bar.d.ts

@@ -1,7 +1,7 @@
 import { ModalOverflowType } from "../../components";
 import { StatusBarPositionType } from './meta/types';
 /**
- * @slot default - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
+ * @slot - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @part actions - Selects the `actions` container element wrapped in shadowDOM.
  * @part status-bar - Selects the `status-bar` window component wrapped in shadowDOM.
  * @part status-bar-area - Selects the `status-bar-area` which wraps `status-bar` element with darker area in shadowDOM.
@@ -9,6 +9,14 @@ import { StatusBarPositionType } from './meta/types';
 export declare class MdsStatusBar {
     host: HTMLMdsStatusBarElement;
     private modal;
+    consumption?: string;
+    private unsubscribeConsumption?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     /**
      * Specifies the description near the slotted actions
      */
@@ -25,8 +33,13 @@ export declare class MdsStatusBar {
      * Specifies if the component is visible
      */
     visible?: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     handleVisbilityProp(newValue?: boolean): void;
+    /**
+     * Hides the status bar.
+     */
     hide(): Promise<void>;
     render(): any;
 }

package/dist/types/components/mds-stepper-bar/mds-stepper-bar.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsStepperBarEventDetail } from './meta/event-detail';
 import { StepperBarNavigationType } from './meta/meta';
 /**
- * @slot default - Add `mds-tepper-bar-item` element/s.
+ * @slot - Add `mds-tepper-bar-item` element/s.
  * @slot content - Add `HTML elements` or `components`, one per mds-stepper-bar-item added
  * @part items - Selects the `items` container element wrapped in shadowDOM.
  * @part contents - Selects the `contents` container element wrapped in shadowDOM.

package/dist/types/components/mds-stepper-bar-item/mds-stepper-bar-item.d.ts

@@ -6,12 +6,17 @@ import { MdsStepperBarItemEventDetail } from './meta/event-detail';
  */
 export declare class MdsStepperBarItem {
     private host;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
     isDone: boolean;
     isCurrent: boolean;
     index: number;
     private km;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     /**
      * Specifies a short description of the component
@@ -52,6 +57,7 @@ export declare class MdsStepperBarItem {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     selectedHandler(newValue: boolean): void;
     currentHandler(newValue: boolean): void;

package/dist/types/components/mds-tab/mds-tab.d.ts

@@ -9,10 +9,18 @@ import { DirectionType } from './meta/type';
  * @part slider - Selects the slider element which is visible when attribute `animation` is set to `slide`.
  * @part tabs - Selects the container of `mds-tab-item` list elements.
  * @slot content - Add `HTML elements` or `components`, one per mds-tab-item added.
- * @slot default - Add `mds-tab-item` element/s.
+ * @slot - Add `mds-tab-item` element/s.
  */
 export declare class MdsTab {
     private element;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     private currentItemIndex;
     private currentItemEl;
     private tabs;
@@ -57,6 +65,7 @@ export declare class MdsTab {
     changedEvent: EventEmitter<MdsTabEventDetail>;
     private queryContentItems;
     componentWillLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     private updateContentItems;
@@ -71,7 +80,8 @@ export declare class MdsTab {
     private readonly updateCSSCustomProps;
     changeEventHandler(event: CustomEvent<MdsTabItemEventDetail>): void;
     focusEventHandler(event: CustomEvent<MdsTabItemEventDetail>): void;
-    handleAnimationChange(): void;
+    handleAnimationChange(newValue?: HorizontalActionsAnimationType): void;
+    handleDirectionChange(newValue?: DirectionType): void;
     handleScrollbarChange(newValue?: boolean): void;
     handleFillChange(newValue?: boolean): void;
     handleOverflowChange(newValue?: boolean): void;

package/dist/types/components/mds-tab-bar/mds-tab-bar.d.ts

@@ -1,16 +1,26 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsTabBarEventDetail } from './meta/event-detail';
 /**
- * @slot default - Add `mds-tab-bar-item` element/s.
+ * @slot - Add `mds-tab-bar-item` element/s.
  */
 export declare class MdsTabBar {
     private element;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     /**
      * Emits when a step is changed
      */
     changedEvent: EventEmitter<MdsTabBarEventDetail>;
     private queryItems;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     changeEventHandler(event: CustomEvent<string>): void;
     render(): any;
 }

package/dist/types/components/mds-tab-bar-item/mds-tab-bar-item.d.ts

@@ -1,11 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TypographySmallerType } from "../../type/typography";
 /**
- * @slot default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export declare class MdsTabBarItem {
     private element;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     isSelected: boolean;
+    /**
+     * The icon displayed in the tab bar item.
+     */
     readonly icon: string;
     /**
      * Sets the label of the tab bar item
@@ -20,6 +31,8 @@ export declare class MdsTabBarItem {
      */
     readonly typography?: TypographySmallerType;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private select;
     /**
      * Emits when the component is selected

package/dist/types/components/mds-tab-item/mds-tab-item.d.ts

@@ -1,8 +1,16 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ButtonIconPositionType, ButtonSizeType, ButtonType } from "../../type/button";
+import { HorizontalActionsAnimationType } from "../../type/animation";
+import { DirectionType } from "../mds-tab/meta/type";
 import { MdsTabItemEventDetail } from './meta/event-detail';
 export declare class MdsTabItem {
     private element;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     isSelected?: boolean;
     hasText: boolean;
     /**
@@ -37,6 +45,16 @@ export declare class MdsTabItem {
      * Specifies the size for the tab item
      */
     readonly size?: ButtonSizeType;
+    /**
+     * Reflects the parent tab layout direction (set by mds-tab); drives the
+     * vertical layout without :host-context
+     */
+    readonly direction?: DirectionType;
+    /**
+     * Reflects the parent tab selection animation (set by mds-tab); drives the
+     * slide-variant styling without :host-context
+     */
+    readonly animation?: HorizontalActionsAnimationType;
     /**
      * Specifies an optional value to get from mdsTabItemSelect event
      */
@@ -56,6 +74,8 @@ export declare class MdsTabItem {
     private toggle;
     private focus;
     validateActive(newValue?: boolean): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components/mds-table/mds-table.d.ts

@@ -2,14 +2,22 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsTableSelectionEventDetail } from './meta/event-detail';
 import { MdsTableRowSelection } from './meta/type';
 /**
- * @slot default - Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s.
- * @slot batch-actions - Put `mds-button` element/s.
+ * @slot - Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s.
+ * @slot batch-action - Put `mds-button` element/s.
  * @part table-wrapper - Selects the element which wraps the table
  * @part table - Selects the table element
  * @part batch-actions - Selects the element which wraps the batch actions
  */
 export declare class MdsTable {
     host: HTMLMdsTableElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     private rows;
     private body;
     private header;
@@ -29,6 +37,9 @@ export declare class MdsTable {
      * Specifies if the table rows are selectable by a checkbox
      */
     readonly selectable?: boolean;
+    /**
+     * Indicates whether row selection is currently active in the table.
+     */
     selection?: boolean;
     /**
      * Dispatces when interactive property changes
@@ -52,6 +63,7 @@ export declare class MdsTable {
     componentWillLoad(): void;
     componentDidLoad(): void;
     private updateSlottedElements;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-table-body/mds-table-body.d.ts

@@ -1,8 +1,18 @@
 /**
- * @slot default - Put `mds-table-row` element/s.
+ * @slot - Put `mds-table-row` element/s.
  */
 export declare class MdsTableBody {
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    /**
+     * Specifies whether the rows react to user interaction (hover/focus).
+     */
     readonly interactive?: boolean;
+    /**
+     * Enables the selection column for the rows in this table body.
+     */
     readonly selection?: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-table-cell/mds-table-cell.d.ts

@@ -1,12 +1,16 @@
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export declare class MdsTableCell {
     host: HTMLMdsTableCellElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
     /**
      * Sets a value to help the sorting function from `mds-table-header-cell`, if not set it will be used the content of the cell.
      */
     readonly value?: string | number;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-table-footer/mds-table-footer.d.ts

@@ -1,6 +1,10 @@
 /**
- * @slot default - Add `mds-table-row` element/s.
+ * @slot - Add `mds-table-row` element/s.
  */
 export declare class MdsTableFooter {
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-table-header/mds-table-header.d.ts

@@ -1,8 +1,10 @@
 /**
- * @slot default - Add `mds-table-row` element/s.
+ * @slot - Add `mds-table-row` element/s.
  */
 export declare class MdsTableHeader {
     host: HTMLMdsTableHeaderElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
     private table;
     private checkboxEl;
     selectAll: boolean;
@@ -11,9 +13,22 @@ export declare class MdsTableHeader {
     hasSelection?: boolean;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
+    /**
+     * Enables the select-all checkbox in the header.
+     */
     readonly selectable?: boolean;
+    /**
+     * Updates the header's select-all state from the number of selected rows.
+     * @param selectedItems the number of currently selected rows
+     * @param totalItems the total number of selectable rows
+     */
     setSelection(selectedItems: number, totalItems: number): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     private handleSelectAllChange;
     render(): any;

package/dist/types/components/mds-table-header-cell/mds-table-header-cell.d.ts

@@ -2,6 +2,8 @@ import { SortDirectionType } from './meta/types';
 export declare class MdsTableHeaderCell {
     isAscending: boolean;
     element: HTMLMdsTableHeaderCellElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
     private currentDirection;
     private index;
     private tableBody;
@@ -17,7 +19,12 @@ export declare class MdsTableHeaderCell {
      * Sets a label for the cell
      */
     readonly label?: string;
+    /**
+     * Specifies the current sort direction of the column.
+     */
     direction: SortDirectionType;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     private prepareSorter;
     private getValue;

package/dist/types/components/mds-table-row/mds-table-row.d.ts

@@ -1,21 +1,47 @@
 /**
- * @slot default - Put `mds-table-cell` element/s.
+ * @slot - Put `mds-table-cell` element/s.
  * @slot action - Put `mds-button` element/s or other kind of actions as aside menu for the single row.
  */
 export declare class MdsTableRow {
     host: HTMLMdsTableRowElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
     private actions;
     private hasActions;
     private observer?;
     sizerWidth: string;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
+    /**
+     * Specifies whether the row reacts to user interaction (hover/focus).
+     */
     readonly interactive?: boolean;
+    /**
+     * Specifies whether the row's actions are shown as an overlay.
+     */
     readonly overlayActions: boolean;
+    /**
+     * Specifies whether the row can be selected via a checkbox.
+     */
     readonly selectable?: boolean;
+    /**
+     * Specifies whether the row is currently selected.
+     */
     selected?: boolean;
+    /**
+     * Reflects the parent table selection state (set by mds-table); drives the
+     * row action background without :host-context
+     */
+    readonly selection?: boolean;
+    /**
+     * The value associated with the row, emitted when the row is selected.
+     */
     readonly value?: string | number;
+    connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     private initObserver;

package/dist/types/components/mds-text/mds-text.d.ts

@@ -3,7 +3,7 @@ import { TypographyTagType } from "../../type/text";
 import { TypographyTruncateType } from "../../type/text";
 import { TypographyType, TypographyVariants } from "../../type/typography";
 /**
- * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export declare class MdsText {
     private cssTextAnimationSpeed;
@@ -11,6 +11,8 @@ export declare class MdsText {
     private randomTextOptions;
     private randomText;
     host: HTMLMdsTextElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
     /**
      * Specifies if the text is animated when it is rendered
      */
@@ -37,6 +39,8 @@ export declare class MdsText {
     readonly variant?: TypographyVariants;
     private animateText;
     private updateCSSCustomProps;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillRender(): void;
     componentDidLoad(): void;
     textHandler(newValue?: string): void;

package/dist/types/components/mds-toast/mds-toast.d.ts

@@ -3,7 +3,7 @@ import { ThemeVariantType } from "../../type/variant";
 import { ToneMinimalVariantType } from "../../type/tone";
 import { ToastPosition } from './meta/types';
 /**
- * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  * @slot icon - Insert an icon image, it can be `HTML elements` or `components`, it is **recommended** to add `mds-icon` element.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  */
@@ -14,6 +14,14 @@ export declare class MdsToast {
     private actions;
     private hasText?;
     hostElement: HTMLMdsToastElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     /**
      * If set, specifies the visibility duration in milliseconds of the element inside the viewport, when the time is up the visible property will be set to false. If the duration is set to 0 the component will still visible until intentionally closed by user.
      */
@@ -42,6 +50,8 @@ export declare class MdsToast {
     private reloadTimeListeners;
     private removeTimeListener;
     private addTimeListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     visibleChanged(visible: boolean): void;

package/dist/types/components/mds-tooltip/mds-tooltip.d.ts

@@ -2,24 +2,32 @@ import { FloatingUIPlacement, FloatingUIStrategy } from "../../type/floating-ui"
 import { TypographyTooltipType } from "../../type/typography";
 import { FloatingElement } from "../../common/floating-controller";
 /**
- * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export declare class MdsTooltip implements FloatingElement {
     private caller;
     private floatingController;
     host: HTMLMdsTooltipElement;
+    prefAnimation?: string;
+    private unsubscribePrefAnimation?;
+    prefContrast?: string;
+    private unsubscribePrefContrast?;
+    prefTheme?: string;
+    private unsubscribePrefTheme?;
+    prefThemeScheme?: string;
+    private unsubscribePrefThemeScheme?;
     /**
      * @internal
      */
-    readonly arrow: boolean;
+    readonly hideArrow: boolean;
     /**
      * @internal
      */
     arrowPadding: number;
     /**
-     * If set, the component will be placed automatically near it's caller.
+     * If set, the component will not be placed automatically near it's caller.
      */
-    readonly autoPlacement: boolean;
+    readonly disableAutoPlacement: boolean;
     /**
      * Specifies the placement of the component if no space is available where it is placed.
      */
@@ -41,9 +49,9 @@ export declare class MdsTooltip implements FloatingElement {
      */
     readonly typography: TypographyTooltipType;
     /**
-     * If set, the component will be kept inside the viewport.
+     * If set, the component will not be kept inside the viewport.
      */
-    readonly shift: boolean;
+    readonly disableShift: boolean;
     /**
      * Sets a safe area distance between the tooltip and the viewport.
      */
@@ -57,16 +65,17 @@ export declare class MdsTooltip implements FloatingElement {
      */
     visible: boolean;
     private readonly handleVisibility;
-    arrowChanged(): void;
-    autoPlacementChanged(): void;
+    hideArrowChanged(): void;
+    disableAutoPlacementChanged(): void;
     flipChanged(): void;
     offsetChanged(): void;
     placementChanged(): void;
-    shiftChanged(): void;
+    disableShiftChanged(): void;
     shiftPaddingChanged(): void;
     strategyChanged(): void;
     visibleChanged(newValue: boolean): void;
     targetChanged(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/mds-tooltip/test/mds-tooltip.stories.d.ts

@@ -1,13 +1,13 @@
 declare const _default: {
     title: string;
     argTypes: {
-        arrow: {
+        'hide-arrow': {
             type: {
                 name: string;
             };
             description: string;
         };
-        'auto-placement': {
+        'disable-auto-placement': {
             type: {
                 name: string;
             };
@@ -48,7 +48,7 @@ declare const _default: {
                 type: string;
             };
         };
-        shift: {
+        'disable-shift': {
             type: {
                 name: string;
             };
@@ -104,7 +104,7 @@ export declare const Arrow: {
         layout: any;
     }) => any;
     args: {
-        arrow: boolean;
+        'hide-arrow': boolean;
         'shift-padding': number;
         layout: string;
     };
@@ -115,7 +115,7 @@ export declare const AutoPlacement: {
         layout: any;
     }) => any;
     args: {
-        'auto-placement': boolean;
+        'disable-auto-placement': boolean;
         layout: string;
     };
 };
@@ -145,7 +145,7 @@ export declare const Placement: {
         layout: any;
     }) => any;
     args: {
-        'auto-placement': boolean;
+        'disable-auto-placement': boolean;
         layout: string;
         placement: string;
     };
@@ -157,7 +157,7 @@ export declare const Shift: {
     }) => any;
     args: {
         layout: string;
-        shift: boolean;
+        'disable-shift': boolean;
     };
 };
 export declare const ShiftPadding: {
@@ -167,7 +167,7 @@ export declare const ShiftPadding: {
     }) => any;
     args: {
         layout: string;
-        shift: boolean;
+        'disable-shift': boolean;
         'shift-padding': number;
     };
 };

package/dist/types/components/mds-tree/mds-tree.d.ts

@@ -2,7 +2,7 @@ import { TreeActions, TreeAppearance, TreeIcon } from "../../type/tree";
 import { TypographyTruncateType } from "../../type/text";
 import { ButtonIconPositionType } from "../../type/button";
 /**
- * @slot default - Add `mds-tree-item` element/s.
+ * @slot - Add `mds-tree-item` element/s.
  */
 export declare class MdsTree {
     private host;
@@ -44,6 +44,11 @@ export declare class MdsTree {
     handleExpandedChange(newValue: boolean): void;
     private updateChildrenToggle;
     handleToggleChange(newValue: TreeIcon): void;
+    private updateChildrenTogglePosition;
+    handleTogglePositionChange(newValue: ButtonIconPositionType): void;
+    private updateChildrenAppearance;
+    handleAppearanceChange(newValue: TreeAppearance): void;
+    handleActionsChange(): void;
     private updateChildrenTruncate;
     handleTruncateChange(newValue: TypographyTruncateType): void;
     private updateElements;