@momentum-design/components 0.56.2 → 0.58.0

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 Linksimple from './components/linksimple';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -50,6 +52,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, };
+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, 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,10 +45,11 @@ import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
 import TabList from './components/tablist';
+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, };
+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, Linksimple, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -19,6 +19,7 @@ export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
+export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
@@ -36,6 +37,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

@@ -19,6 +19,7 @@ export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
+export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
@@ -36,6 +37,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/link/index.d.ts

@@ -13,22 +13,10 @@ import Component from '../../components/link';
  *
  * @tagname mdc-link
  *
- * @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.
- *
- * @cssproperty --mdc-link-border-radius - Border radius of the link
- * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
- * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
- * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
- * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
- * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
- * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
- * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
- * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
- * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
- * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
+ * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.
+ * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/link/index.js

@@ -15,22 +15,10 @@ import { TAG_NAME } from '../../components/link/link.constants';
  *
  * @tagname mdc-link
  *
- * @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.
- *
- * @cssproperty --mdc-link-border-radius - Border radius of the link
- * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
- * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
- * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
- * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
- * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
- * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
- * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
- * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
- * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
- * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
+ * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.
+ * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -0,0 +1,34 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/linksimple';
+/**
+ * `mdc-linksimple` is a lightweight link component that can be used to navigate
+ * within the application or to an external URL. It does not have any predefined default size.
+ *
+ * The `children` of the `mdc-linksimple` component can be customized to suit
+ * different use cases, including text, icons, or other inline content. For the child to be an icon,
+ * the `mdc-icon` component should be used to render.
+ *
+ * @tagname mdc-linksimple
+ *
+ * @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.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the link.
+ * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.
+ */
+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/linksimple/index.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/linksimple';
+import { TAG_NAME } from '../../components/linksimple/linksimple.constants';
+/**
+ * `mdc-linksimple` is a lightweight link component that can be used to navigate
+ * within the application or to an external URL. It does not have any predefined default size.
+ *
+ * The `children` of the `mdc-linksimple` component can be customized to suit
+ * different use cases, including text, icons, or other inline content. For the child to be an icon,
+ * the `mdc-icon` component should be used to render.
+ *
+ * @tagname mdc-linksimple
+ *
+ * @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.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the link.
+ * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
+    displayName: 'Linksimple',
+});
+export default reactWrapper;

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/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.56.2"
+  "version": "0.58.0"
 }