@momentum-design/components 0.57.0 → 0.58.1

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
+import StaticToggle from './components/statictoggle';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -43,6 +44,7 @@ import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
 import TabList from './components/tablist';
+import ButtonLink from './components/buttonlink';
 import Linksimple from './components/linksimple';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
@@ -51,6 +53,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, Linksimple, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -12,6 +12,7 @@ import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
+import StaticToggle from './components/statictoggle';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -44,11 +45,12 @@ import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
 import TabList from './components/tablist';
+import ButtonLink from './components/buttonlink';
 import Linksimple from './components/linksimple';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, Linksimple, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

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

@@ -0,0 +1,30 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/buttonlink';
+/**
+ * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
+ * features of `mdc-button`. This includes support for variants, sizing, and optional
+ * prefix and postfix icons via slots.
+ *
+ * ### Features:
+ * - Behaves like an link while visually resembling a button.
+ * - Supports slots for `prefix-icon` and `postfix-icon`.
+ * - Customizable size, color, and variant through attributes.
+ * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-buttonlink
+ *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
+    onBlur: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/buttonlink/index.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/buttonlink';
+import { TAG_NAME } from '../../components/buttonlink/buttonlink.constants';
+/**
+ * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
+ * features of `mdc-button`. This includes support for variants, sizing, and optional
+ * prefix and postfix icons via slots.
+ *
+ * ### Features:
+ * - Behaves like an link while visually resembling a button.
+ * - Supports slots for `prefix-icon` and `postfix-icon`.
+ * - Customizable size, color, and variant through attributes.
+ * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-buttonlink
+ *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
+    displayName: 'ButtonLink',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -2,10 +2,11 @@ export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Badge } from './badge';
+export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
@@ -37,6 +38,7 @@ export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
+export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -2,10 +2,11 @@ export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Badge } from './badge';
+export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
@@ -37,6 +38,7 @@ export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
+export { default as StaticToggle } from './statictoggle';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

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

@@ -0,0 +1,30 @@
+import Component from '../../components/statictoggle';
+/**
+ * This is a decorative component that is styled to look as a toggle. <br/>
+ * It has 3 properties - checked, size and disabled. <br/>
+ * We are using the same styling that has been created for the `mdc-toggle` component.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-statictoggle
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --mdc-statictoggle-width - Width of the toggle
+ * @cssproperty --mdc-statictoggle-height - Height of the toggle
+ * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
+ * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border - Border of the toggle
+ * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
+ * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
+ * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
+ * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
+ * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/statictoggle/index.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/statictoggle';
+import { TAG_NAME } from '../../components/statictoggle/statictoggle.constants';
+/**
+ * This is a decorative component that is styled to look as a toggle. <br/>
+ * It has 3 properties - checked, size and disabled. <br/>
+ * We are using the same styling that has been created for the `mdc-toggle` component.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-statictoggle
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --mdc-statictoggle-width - Width of the toggle
+ * @cssproperty --mdc-statictoggle-height - Height of the toggle
+ * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
+ * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border - Border of the toggle
+ * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
+ * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
+ * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
+ * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
+ * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'StaticToggle',
+});
+export default reactWrapper;

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

@@ -11,30 +11,26 @@ import Component from '../../components/toggle';
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
+ * @dependency mdc-statictoggle
  *
  * @tagname mdc-toggle
  *
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - width of the toggle
- * @cssproperty --mdc-toggle-height - height of the toggle
- * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
- * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border - border of the toggle
- * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
- * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
- * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
- * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
- * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
- * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
- * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
- * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
- * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
- * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
- *
+ * @cssproperty --mdc-toggle-width - Width of the toggle
+ * @cssproperty --mdc-toggle-height - Height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
+ * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
+ * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
+ * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
+ * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
+ * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Event>;

package/dist/react/toggle/index.js

@@ -13,30 +13,26 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
+ * @dependency mdc-statictoggle
  *
  * @tagname mdc-toggle
  *
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - width of the toggle
- * @cssproperty --mdc-toggle-height - height of the toggle
- * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
- * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border - border of the toggle
- * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
- * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
- * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
- * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
- * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
- * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
- * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
- * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
- * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
- * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
- *
+ * @cssproperty --mdc-toggle-width - Width of the toggle
+ * @cssproperty --mdc-toggle-height - Height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
+ * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
+ * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
+ * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
+ * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
+ * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/utils/mixins/ButtonComponentMixin.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonColor, ButtonTypeInternal, ButtonVariant, IconButtonSize, PillButtonSize } from '../../components/button/button.types';
+import type { IconNames } from '../../components/icon/icon.types';
+import type { Component } from '../../models';
+import type { Constructor } from './index.types';
+export interface ButtonComponentMixinInterface {
+    prefixIcon?: IconNames;
+    postfixIcon?: IconNames;
+    variant: ButtonVariant;
+    color: ButtonColor;
+    typeInternal: ButtonTypeInternal;
+    setSize(size: PillButtonSize | IconButtonSize): void;
+    setVariant(variant: ButtonVariant): void;
+    setColor(color: ButtonColor): void;
+    inferButtonType(): void;
+}
+export declare const ButtonComponentMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<ButtonComponentMixinInterface> & T;

package/dist/utils/mixins/ButtonComponentMixin.js

@@ -0,0 +1,114 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property, state } from 'lit/decorators.js';
+import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from '../../components/button/button.constants';
+export const ButtonComponentMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+              * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
+              * - **Primary**: Solid background color.
+              * - **Secondary**: Transparent background with a solid border.
+              * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
+              * @default primary
+              */
+            this.variant = DEFAULTS.VARIANT;
+            /**
+             * There are 5 colors for button: positive, negative, accent, promotional, default.
+             * @default default
+             */
+            this.color = DEFAULTS.COLOR;
+            /** @internal */
+            this.typeInternal = DEFAULTS.TYPE_INTERNAL;
+        }
+        /**
+         * Sets the variant attribute for the button component.
+         * If the provided variant is not included in the BUTTON_VARIANTS,
+         * it defaults to the value specified in DEFAULTS.VARIANT.
+         *
+         * @param variant - The variant to set.
+         */
+        setVariant(variant) {
+            this.setAttribute('variant', Object.values(BUTTON_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
+        }
+        /**
+         * Sets the color attribute for the button.
+         * Defaults to DEFAULTS.COLOR if invalid or for tertiary button.
+         *
+         * @param color - The color to set.
+         */
+        setColor(color) {
+            if (!Object.values(BUTTON_COLORS).includes(color) || this.variant === BUTTON_VARIANTS.TERTIARY) {
+                this.setAttribute('color', `${DEFAULTS.COLOR}`);
+            }
+            else {
+                this.setAttribute('color', color);
+            }
+        }
+        /**
+         * Sets the size attribute for the button component.
+         * Validates the size based on the button type (icon, pill, or tertiary).
+         * Defaults to DEFAULTS.SIZE if invalid.
+         *
+         * @param size - The size to set.
+         */
+        setSize(size) {
+            const isIconType = this.typeInternal === BUTTON_TYPE_INTERNAL.ICON;
+            const isValidSize = isIconType
+                ? Object.values(ICON_BUTTON_SIZES).includes(size)
+                    && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
+                : Object.values(PILL_BUTTON_SIZES).includes(size);
+            this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
+        }
+        /**
+         * Infers the type of button based on the presence of slot and/or prefix and postfix icons.
+         * @param slot - default slot of button
+         */
+        inferButtonType() {
+            var _a, _b;
+            const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().filter((node) => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
+            if (slot && (this.prefixIcon || this.postfixIcon)) {
+                this.typeInternal = BUTTON_TYPE_INTERNAL.PILL_WITH_ICON;
+                this.setAttribute('data-btn-type', 'pill-with-icon');
+            }
+            else if (!slot && (this.prefixIcon || this.postfixIcon)) {
+                this.typeInternal = BUTTON_TYPE_INTERNAL.ICON;
+                this.setAttribute('data-btn-type', 'icon');
+            }
+            else {
+                this.typeInternal = BUTTON_TYPE_INTERNAL.PILL;
+                this.setAttribute('data-btn-type', 'pill');
+            }
+        }
+    }
+    __decorate([
+        property({ type: String, attribute: 'prefix-icon', reflect: true }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "prefixIcon", void 0);
+    __decorate([
+        property({ type: String, attribute: 'postfix-icon', reflect: true }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "postfixIcon", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "variant", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "color", void 0);
+    __decorate([
+        state(),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "typeInternal", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.57.0"
+  "version": "0.58.1"
 }