@momentum-design/components 0.53.9 → 0.54.0

package/dist/custom-elements.json

@@ -2885,14 +2885,6 @@
               "description": "Allows customization of the background color on hover.",
               "name": "--mdc-checkbox-background-color-hover"
             },
-            {
-              "description": "Border color in high contrast.",
-              "name": "--mdc-checkbox-border-color"
-            },
-            {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-checkbox-checked-background-color"
-            },
             {
               "description": "Background color for a selected checkbox when hovered.",
               "name": "--mdc-checkbox-checked-background-color-hover"
@@ -2902,36 +2894,12 @@
               "name": "--mdc-checkbox-checked-pressed-icon-color"
             },
             {
-              "description": "Background color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-background-color"
-            },
-            {
-              "description": "Border color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-border-color"
+              "description": "Background color for a selected checkbox when pressed.",
+              "name": "--mdc-checkbox-pressed-icon-color"
             },
             {
-              "description": "Background color for a disabled, selected checkbox.",
+              "description": "Background color for a selected checkbox when disabled.",
               "name": "--mdc-checkbox-disabled-checked-icon-color"
-            },
-            {
-              "description": "Icon color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-icon-color"
-            },
-            {
-              "description": "Background color for an unselected checkbox.",
-              "name": "--mdc-checkbox-icon-background-color"
-            },
-            {
-              "description": "Default background color for an unselected checkbox.",
-              "name": "--mdc-checkbox-icon-border-color"
-            },
-            {
-              "description": "Icon color for an unselected checkbox.",
-              "name": "--mdc-checkbox-icon-color"
-            },
-            {
-              "description": "Background color for a selected checkbox when pressed.",
-              "name": "--mdc-checkbox-pressed-icon-color"
             }
           ],
           "members": [
@@ -3506,7 +3474,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
+          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n */",
           "customElement": true,
           "slots": [
             {
@@ -12978,34 +12946,10 @@
           "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
           "name": "Radio",
           "cssProperties": [
-            {
-              "description": "size of the inner circle",
-              "name": "--mdc-radio-inner-circle-size"
-            },
             {
               "description": "color of the label when disabled",
               "name": "--mdc-radio-text-disabled-color"
             },
-            {
-              "description": "color of the radio button border when disabled",
-              "name": "--mdc-radio-disabled-border-color"
-            },
-            {
-              "description": "color of the radio button border when normal",
-              "name": "--mdc-radio-normal-border-color"
-            },
-            {
-              "description": "background color of the inner circle when normal",
-              "name": "--mdc-radio-inner-circle-normal-background"
-            },
-            {
-              "description": "background color of the inner circle when disabled",
-              "name": "--mdc-radio-inner-circle-disabled-background"
-            },
-            {
-              "description": "color of the radio button when inactive",
-              "name": "--mdc-radio-control-inactive-color"
-            },
             {
               "description": "color of the radio button when inactive and hovered",
               "name": "--mdc-radio-control-inactive-hover"
@@ -13014,14 +12958,6 @@
               "description": "color of the radio button when inactive and pressed",
               "name": "--mdc-radio-control-inactive-pressed-color"
             },
-            {
-              "description": "background color of the radio button when inactive and disabled",
-              "name": "--mdc-radio-control-inactive-disabled-background"
-            },
-            {
-              "description": "color of the radio button when active",
-              "name": "--mdc-radio-control-active-color"
-            },
             {
               "description": "color of the radio button when active and hovered",
               "name": "--mdc-radio-control-active-hover-color"
@@ -13031,8 +12967,16 @@
               "name": "--mdc-radio-control-active-pressed-color"
             },
             {
-              "description": "background color of the radio button when active and disabled",
+              "description": "color of the radio button when disabled",
+              "name": "--mdc-radio-disabled-border-color"
+            },
+            {
+              "description": "color of the radio button when active and disabled",
               "name": "--mdc-radio-control-active-disabled-background"
+            },
+            {
+              "description": "color of the radio button when inactive and disabled",
+              "name": "--mdc-radio-control-inactive-disabled-background"
             }
           ],
           "members": [
@@ -13681,7 +13625,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-radio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n *\n */",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
           "customElement": true,
           "slots": [
             {
@@ -16437,6 +16381,298 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/staticcheckbox/staticcheckbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
+          "name": "StaticCheckbox",
+          "cssProperties": [
+            {
+              "description": "Border color in high contrast.",
+              "name": "--mdc-staticcheckbox-border-color"
+            },
+            {
+              "description": "Background color for a selected checkbox.",
+              "name": "--mdc-staticcheckbox-checked-background-color"
+            },
+            {
+              "description": "Background color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-background-color"
+            },
+            {
+              "description": "Border color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-border-color"
+            },
+            {
+              "description": "Background color for a disabled, selected checkbox.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
+            },
+            {
+              "description": "Icon color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-icon-color"
+            },
+            {
+              "description": "Background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-background-color"
+            },
+            {
+              "description": "Default background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-border-color"
+            },
+            {
+              "description": "Icon color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-staticcheckbox",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticCheckbox",
+            "module": "components/staticcheckbox/staticcheckbox.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/staticradio/staticradio.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
+          "name": "StaticRadio",
+          "cssProperties": [
+            {
+              "description": "size of the inner circle",
+              "name": "--mdc-staticradio-inner-circle-size"
+            },
+            {
+              "description": "color of the label when disabled",
+              "name": "--mdc-staticradio-text-disabled-color"
+            },
+            {
+              "description": "color of the radio button border when normal",
+              "name": "--mdc-staticradio-normal-border-color"
+            },
+            {
+              "description": "color of the radio button border when disabled",
+              "name": "--mdc-staticradio-disabled-border-color"
+            },
+            {
+              "description": "background color of the inner circle when normal",
+              "name": "--mdc-staticradio-inner-circle-normal-background"
+            },
+            {
+              "description": "background color of the inner circle when disabled",
+              "name": "--mdc-staticradio-inner-circle-disabled-background"
+            },
+            {
+              "description": "color of the radio button when inactive",
+              "name": "--mdc-staticradio-control-inactive-color"
+            },
+            {
+              "description": "background color of the radio button when inactive and disabled",
+              "name": "--mdc-staticradio-control-inactive-disabled-background"
+            },
+            {
+              "description": "color of the radio button when active",
+              "name": "--mdc-staticradio-control-active-color"
+            },
+            {
+              "description": "background color of the radio button when active and disabled",
+              "name": "--mdc-staticradio-control-active-disabled-background"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-staticradio",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticRadio",
+            "module": "components/staticradio/staticradio.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tab/tab.component.js",

package/dist/index.d.ts

@@ -9,6 +9,8 @@ import Button from './components/button';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
+import StaticCheckbox from './components/staticcheckbox';
+import StaticRadio from './components/staticradio';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -47,6 +49,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, Textarea, 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, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 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

@@ -10,6 +10,8 @@ import Button from './components/button';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
+import StaticCheckbox from './components/staticcheckbox';
+import StaticRadio from './components/staticradio';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -45,6 +47,6 @@ 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, Textarea, 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, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

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

@@ -16,18 +16,10 @@ import Component from '../../components/checkbox';
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Event>;

package/dist/react/checkbox/index.js

@@ -18,18 +18,10 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -34,6 +34,8 @@ export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 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 Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -34,6 +34,8 @@ export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 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 Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

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

@@ -12,22 +12,14 @@ import Component from '../../components/radio';
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
  * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
  * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
  * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
  * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
+ * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {

package/dist/react/radio/index.js

@@ -14,22 +14,14 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
  * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
  * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
  * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
  * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
+ * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
  */
 const reactWrapper = createComponent({

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

@@ -0,0 +1,25 @@
+import Component from '../../components/staticcheckbox';
+/**
+ * This is a decorative component that is styled to look as a checkbox.
+ *
+ * It has 3 properties - checked, indeterminate and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-checkbox` component.
+ *
+ * @tagname mdc-staticcheckbox
+ *
+ * @dependency mdc-icon
+ *
+ * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;