@momentum-design/components 0.85.9 → 0.86.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9579,7 +9579,7 @@
9579
9579
  "type": {
9580
9580
  "text": "number"
9581
9581
  },
9582
- "description": "The z-index of the dialog",
9582
+ "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
9583
9583
  "default": "1000",
9584
9584
  "attribute": "z-index",
9585
9585
  "reflects": true
@@ -10369,7 +10369,7 @@
10369
10369
  "type": {
10370
10370
  "text": "number"
10371
10371
  },
10372
- "description": "The z-index of the dialog",
10372
+ "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
10373
10373
  "default": "1000",
10374
10374
  "fieldName": "zIndex"
10375
10375
  },
@@ -15527,15 +15527,15 @@
15527
15527
  },
15528
15528
  {
15529
15529
  "kind": "javascript-module",
15530
- "path": "components/menuitem/menuitem.component.js",
15530
+ "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
15531
15531
  "declarations": [
15532
15532
  {
15533
15533
  "kind": "class",
15534
- "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
15535
- "name": "MenuItem",
15534
+ "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
15535
+ "name": "MenuItemCheckbox",
15536
15536
  "slots": [
15537
15537
  {
15538
- "description": "slot for menu item controls to appear of leading end.",
15538
+ "description": "slot for menu item checkbox controls to appear of leading end.",
15539
15539
  "name": "leading-controls",
15540
15540
  "inheritedFrom": {
15541
15541
  "name": "ListItem",
@@ -15543,7 +15543,7 @@
15543
15543
  }
15544
15544
  },
15545
15545
  {
15546
- "description": "slot for menu item primary label.",
15546
+ "description": "slot for menu item checkbox primary label.",
15547
15547
  "name": "leading-text-primary-label",
15548
15548
  "inheritedFrom": {
15549
15549
  "name": "ListItem",
@@ -15551,7 +15551,7 @@
15551
15551
  }
15552
15552
  },
15553
15553
  {
15554
- "description": "slot for menu item secondary label.",
15554
+ "description": "slot for menu item checkbox secondary label.",
15555
15555
  "name": "leading-text-secondary-label",
15556
15556
  "inheritedFrom": {
15557
15557
  "name": "ListItem",
@@ -15559,7 +15559,7 @@
15559
15559
  }
15560
15560
  },
15561
15561
  {
15562
- "description": "slot for menu item tertiary label.",
15562
+ "description": "slot for menu item checkbox tertiary label.",
15563
15563
  "name": "leading-text-tertiary-label",
15564
15564
  "inheritedFrom": {
15565
15565
  "name": "ListItem",
@@ -15567,7 +15567,7 @@
15567
15567
  }
15568
15568
  },
15569
15569
  {
15570
- "description": "slot for menu item side header text.",
15570
+ "description": "slot for menu item checkbox side header text.",
15571
15571
  "name": "trailing-text-side-header",
15572
15572
  "inheritedFrom": {
15573
15573
  "name": "ListItem",
@@ -15575,7 +15575,7 @@
15575
15575
  }
15576
15576
  },
15577
15577
  {
15578
- "description": "slot for menu item subline text.",
15578
+ "description": "slot for menu item checkbox subline text.",
15579
15579
  "name": "trailing-text-subline",
15580
15580
  "inheritedFrom": {
15581
15581
  "name": "ListItem",
@@ -15583,7 +15583,7 @@
15583
15583
  }
15584
15584
  },
15585
15585
  {
15586
- "description": "slot for menu item controls to appear of trailing end.",
15586
+ "description": "slot for menu item checkbox controls to appear of trailing end.",
15587
15587
  "name": "trailing-controls",
15588
15588
  "inheritedFrom": {
15589
15589
  "name": "ListItem",
@@ -15592,6 +15592,67 @@
15592
15592
  }
15593
15593
  ],
15594
15594
  "members": [
15595
+ {
15596
+ "kind": "field",
15597
+ "name": "checked",
15598
+ "type": {
15599
+ "text": "boolean"
15600
+ },
15601
+ "default": "false",
15602
+ "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
15603
+ "attribute": "checked",
15604
+ "reflects": true
15605
+ },
15606
+ {
15607
+ "kind": "field",
15608
+ "name": "indicator",
15609
+ "type": {
15610
+ "text": "Indicator"
15611
+ },
15612
+ "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
15613
+ "default": "'checkbox'",
15614
+ "attribute": "indicator",
15615
+ "reflects": true
15616
+ },
15617
+ {
15618
+ "kind": "field",
15619
+ "name": "handleMouseClick",
15620
+ "privacy": "private",
15621
+ "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
15622
+ },
15623
+ {
15624
+ "kind": "method",
15625
+ "name": "staticCheckbox",
15626
+ "privacy": "private",
15627
+ "return": {
15628
+ "type": {
15629
+ "text": ""
15630
+ }
15631
+ },
15632
+ "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
15633
+ },
15634
+ {
15635
+ "kind": "method",
15636
+ "name": "staticToggle",
15637
+ "privacy": "private",
15638
+ "return": {
15639
+ "type": {
15640
+ "text": ""
15641
+ }
15642
+ },
15643
+ "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
15644
+ },
15645
+ {
15646
+ "kind": "method",
15647
+ "name": "getCheckmarkIcon",
15648
+ "privacy": "private",
15649
+ "return": {
15650
+ "type": {
15651
+ "text": ""
15652
+ }
15653
+ },
15654
+ "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
15655
+ },
15595
15656
  {
15596
15657
  "kind": "field",
15597
15658
  "name": "arrowPosition",
@@ -15600,7 +15661,11 @@
15600
15661
  },
15601
15662
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
15602
15663
  "attribute": "arrow-position",
15603
- "reflects": true
15664
+ "reflects": true,
15665
+ "inheritedFrom": {
15666
+ "name": "MenuItem",
15667
+ "module": "components/menuitem/menuitem.component.js"
15668
+ }
15604
15669
  },
15605
15670
  {
15606
15671
  "kind": "field",
@@ -15610,7 +15675,11 @@
15610
15675
  },
15611
15676
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
15612
15677
  "attribute": "arrow-direction",
15613
- "reflects": true
15678
+ "reflects": true,
15679
+ "inheritedFrom": {
15680
+ "name": "MenuItem",
15681
+ "module": "components/menuitem/menuitem.component.js"
15682
+ }
15614
15683
  },
15615
15684
  {
15616
15685
  "kind": "field",
@@ -15621,7 +15690,11 @@
15621
15690
  "default": "undefined",
15622
15691
  "description": "The name attribute is used to identify the menu item when it is selected.",
15623
15692
  "attribute": "name",
15624
- "reflects": true
15693
+ "reflects": true,
15694
+ "inheritedFrom": {
15695
+ "name": "MenuItem",
15696
+ "module": "components/menuitem/menuitem.component.js"
15697
+ }
15625
15698
  },
15626
15699
  {
15627
15700
  "kind": "field",
@@ -15632,7 +15705,11 @@
15632
15705
  "default": "undefined",
15633
15706
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
15634
15707
  "attribute": "value",
15635
- "reflects": true
15708
+ "reflects": true,
15709
+ "inheritedFrom": {
15710
+ "name": "MenuItem",
15711
+ "module": "components/menuitem/menuitem.component.js"
15712
+ }
15636
15713
  },
15637
15714
  {
15638
15715
  "kind": "method",
@@ -15676,7 +15753,11 @@
15676
15753
  "description": "The keyboard event that triggered the action."
15677
15754
  }
15678
15755
  ],
15679
- "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
15756
+ "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
15757
+ "inheritedFrom": {
15758
+ "name": "MenuItem",
15759
+ "module": "components/menuitem/menuitem.component.js"
15760
+ }
15680
15761
  },
15681
15762
  {
15682
15763
  "kind": "method",
@@ -16013,7 +16094,12 @@
16013
16094
  ],
16014
16095
  "events": [
16015
16096
  {
16016
- "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
16097
+ "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
16098
+ "name": "change",
16099
+ "reactName": "onChange"
16100
+ },
16101
+ {
16102
+ "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
16017
16103
  "name": "click",
16018
16104
  "reactName": "onClick",
16019
16105
  "inheritedFrom": {
@@ -16022,27 +16108,27 @@
16022
16108
  }
16023
16109
  },
16024
16110
  {
16025
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
16026
- "name": "keydown",
16027
- "reactName": "onKeyDown",
16111
+ "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
16112
+ "name": "focus",
16113
+ "reactName": "onFocus",
16028
16114
  "inheritedFrom": {
16029
16115
  "name": "ListItem",
16030
16116
  "module": "src/components/listitem/listitem.component.ts"
16031
16117
  }
16032
16118
  },
16033
16119
  {
16034
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
16035
- "name": "keyup",
16036
- "reactName": "onKeyUp",
16120
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
16121
+ "name": "keydown",
16122
+ "reactName": "onKeyDown",
16037
16123
  "inheritedFrom": {
16038
16124
  "name": "ListItem",
16039
16125
  "module": "src/components/listitem/listitem.component.ts"
16040
16126
  }
16041
16127
  },
16042
16128
  {
16043
- "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
16044
- "name": "focus",
16045
- "reactName": "onFocus",
16129
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
16130
+ "name": "keyup",
16131
+ "reactName": "onKeyUp",
16046
16132
  "inheritedFrom": {
16047
16133
  "name": "ListItem",
16048
16134
  "module": "src/components/listitem/listitem.component.ts"
@@ -16050,13 +16136,35 @@
16050
16136
  }
16051
16137
  ],
16052
16138
  "attributes": [
16139
+ {
16140
+ "name": "checked",
16141
+ "type": {
16142
+ "text": "boolean"
16143
+ },
16144
+ "default": "false",
16145
+ "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
16146
+ "fieldName": "checked"
16147
+ },
16148
+ {
16149
+ "name": "indicator",
16150
+ "type": {
16151
+ "text": "Indicator"
16152
+ },
16153
+ "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
16154
+ "default": "'checkbox'",
16155
+ "fieldName": "indicator"
16156
+ },
16053
16157
  {
16054
16158
  "name": "arrow-position",
16055
16159
  "type": {
16056
16160
  "text": "ArrowPositions | undefined"
16057
16161
  },
16058
16162
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
16059
- "fieldName": "arrowPosition"
16163
+ "fieldName": "arrowPosition",
16164
+ "inheritedFrom": {
16165
+ "name": "MenuItem",
16166
+ "module": "src/components/menuitem/menuitem.component.ts"
16167
+ }
16060
16168
  },
16061
16169
  {
16062
16170
  "name": "arrow-direction",
@@ -16064,7 +16172,11 @@
16064
16172
  "text": "ArrowDirections | undefined"
16065
16173
  },
16066
16174
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
16067
- "fieldName": "arrowDirection"
16175
+ "fieldName": "arrowDirection",
16176
+ "inheritedFrom": {
16177
+ "name": "MenuItem",
16178
+ "module": "src/components/menuitem/menuitem.component.ts"
16179
+ }
16068
16180
  },
16069
16181
  {
16070
16182
  "name": "name",
@@ -16073,7 +16185,11 @@
16073
16185
  },
16074
16186
  "default": "undefined",
16075
16187
  "description": "The name attribute is used to identify the menu item when it is selected.",
16076
- "fieldName": "name"
16188
+ "fieldName": "name",
16189
+ "inheritedFrom": {
16190
+ "name": "MenuItem",
16191
+ "module": "src/components/menuitem/menuitem.component.ts"
16192
+ }
16077
16193
  },
16078
16194
  {
16079
16195
  "name": "value",
@@ -16082,7 +16198,11 @@
16082
16198
  },
16083
16199
  "default": "undefined",
16084
16200
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
16085
- "fieldName": "value"
16201
+ "fieldName": "value",
16202
+ "inheritedFrom": {
16203
+ "name": "MenuItem",
16204
+ "module": "src/components/menuitem/menuitem.component.ts"
16205
+ }
16086
16206
  },
16087
16207
  {
16088
16208
  "name": "disabled",
@@ -16223,11 +16343,11 @@
16223
16343
  }
16224
16344
  ],
16225
16345
  "superclass": {
16226
- "name": "ListItem",
16227
- "module": "/src/components/listitem/listitem.component"
16346
+ "name": "MenuItem",
16347
+ "module": "/src/components/menuitem/menuitem.component"
16228
16348
  },
16229
- "tagName": "mdc-menuitem",
16230
- "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
16349
+ "tagName": "mdc-menuitemcheckbox",
16350
+ "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
16231
16351
  "customElement": true,
16232
16352
  "cssProperties": [
16233
16353
  {
@@ -16302,23 +16422,23 @@
16302
16422
  "kind": "js",
16303
16423
  "name": "default",
16304
16424
  "declaration": {
16305
- "name": "MenuItem",
16306
- "module": "components/menuitem/menuitem.component.js"
16425
+ "name": "MenuItemCheckbox",
16426
+ "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
16307
16427
  }
16308
16428
  }
16309
16429
  ]
16310
16430
  },
16311
16431
  {
16312
16432
  "kind": "javascript-module",
16313
- "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
16433
+ "path": "components/menuitemradio/menuitemradio.component.js",
16314
16434
  "declarations": [
16315
16435
  {
16316
16436
  "kind": "class",
16317
- "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
16318
- "name": "MenuItemCheckbox",
16437
+ "description": "A menuitemradio component is a checkable menuitem that is used in a menu.\nA menuitemradio should be checked only one at a time. <br/>\nThere should be no focusable descendants inside this menuitemradio component.\n\nThe `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n\nMenu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nIf you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n\nThe `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>radio</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe checkmark will always be positioned on the trailing side.\n\nThe radio will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe third options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.",
16438
+ "name": "MenuItemRadio",
16319
16439
  "slots": [
16320
16440
  {
16321
- "description": "slot for menu item checkbox controls to appear of leading end.",
16441
+ "description": "slot for menu item radio controls to appear of leading end.",
16322
16442
  "name": "leading-controls",
16323
16443
  "inheritedFrom": {
16324
16444
  "name": "ListItem",
@@ -16326,7 +16446,7 @@
16326
16446
  }
16327
16447
  },
16328
16448
  {
16329
- "description": "slot for menu item checkbox primary label.",
16449
+ "description": "slot for menu item radio primary label.",
16330
16450
  "name": "leading-text-primary-label",
16331
16451
  "inheritedFrom": {
16332
16452
  "name": "ListItem",
@@ -16334,7 +16454,7 @@
16334
16454
  }
16335
16455
  },
16336
16456
  {
16337
- "description": "slot for menu item checkbox secondary label.",
16457
+ "description": "slot for menu item radio secondary label.",
16338
16458
  "name": "leading-text-secondary-label",
16339
16459
  "inheritedFrom": {
16340
16460
  "name": "ListItem",
@@ -16342,7 +16462,7 @@
16342
16462
  }
16343
16463
  },
16344
16464
  {
16345
- "description": "slot for menu item checkbox tertiary label.",
16465
+ "description": "slot for menu item radio tertiary label.",
16346
16466
  "name": "leading-text-tertiary-label",
16347
16467
  "inheritedFrom": {
16348
16468
  "name": "ListItem",
@@ -16350,7 +16470,7 @@
16350
16470
  }
16351
16471
  },
16352
16472
  {
16353
- "description": "slot for menu item checkbox side header text.",
16473
+ "description": "slot for menu item radio side header text.",
16354
16474
  "name": "trailing-text-side-header",
16355
16475
  "inheritedFrom": {
16356
16476
  "name": "ListItem",
@@ -16358,7 +16478,7 @@
16358
16478
  }
16359
16479
  },
16360
16480
  {
16361
- "description": "slot for menu item checkbox subline text.",
16481
+ "description": "slot for menu item radio subline text.",
16362
16482
  "name": "trailing-text-subline",
16363
16483
  "inheritedFrom": {
16364
16484
  "name": "ListItem",
@@ -16366,7 +16486,7 @@
16366
16486
  }
16367
16487
  },
16368
16488
  {
16369
- "description": "slot for menu item checkbox controls to appear of trailing end.",
16489
+ "description": "slot for menu item radio controls to appear of trailing end.",
16370
16490
  "name": "trailing-controls",
16371
16491
  "inheritedFrom": {
16372
16492
  "name": "ListItem",
@@ -16382,7 +16502,7 @@
16382
16502
  "text": "boolean"
16383
16503
  },
16384
16504
  "default": "false",
16385
- "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
16505
+ "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
16386
16506
  "attribute": "checked",
16387
16507
  "reflects": true
16388
16508
  },
@@ -16392,42 +16512,53 @@
16392
16512
  "type": {
16393
16513
  "text": "Indicator"
16394
16514
  },
16395
- "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
16396
- "default": "'checkbox'",
16515
+ "description": "The indicator attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.",
16516
+ "default": "'radio'",
16397
16517
  "attribute": "indicator",
16398
16518
  "reflects": true
16399
16519
  },
16400
16520
  {
16401
- "kind": "field",
16402
- "name": "menuitemcheckboxHandleClick",
16521
+ "kind": "method",
16522
+ "name": "getAllRadiosWithinSameGroup",
16403
16523
  "privacy": "private",
16404
- "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
16524
+ "return": {
16525
+ "type": {
16526
+ "text": "MenuItemRadio[]"
16527
+ }
16528
+ },
16529
+ "description": "Returns all radios within the same group (name)."
16405
16530
  },
16406
16531
  {
16407
16532
  "kind": "method",
16408
- "name": "staticCheckbox",
16533
+ "name": "updateOtherRadiosCheckedState",
16409
16534
  "privacy": "private",
16410
16535
  "return": {
16411
16536
  "type": {
16412
- "text": ""
16537
+ "text": "void"
16413
16538
  }
16414
16539
  },
16415
- "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
16540
+ "description": "Updates the checked state of all other radios in the same group.\nThis method is called when a radio is clicked to ensure that only one radio in the group can be checked at a time.\nIt sets the `checked` property of all other radios in the same group to `false`."
16541
+ },
16542
+ {
16543
+ "kind": "field",
16544
+ "name": "handleMouseClick",
16545
+ "privacy": "private",
16546
+ "description": "Handles click events to set checked state and uncheck siblings in the same group and container.\nIf the menuitemradio is not checked, it sets its checked state to `true`\nand sets all other menuitemradio elements of the same group with checked state to `false`."
16416
16547
  },
16417
16548
  {
16418
16549
  "kind": "method",
16419
- "name": "staticToggle",
16550
+ "name": "renderStaticRadio",
16420
16551
  "privacy": "private",
16421
16552
  "return": {
16422
16553
  "type": {
16423
16554
  "text": ""
16424
16555
  }
16425
16556
  },
16426
- "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
16557
+ "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
16427
16558
  },
16428
16559
  {
16429
16560
  "kind": "method",
16430
- "name": "getCheckmarkIcon",
16561
+ "name": "renderCheckmarkIcon",
16431
16562
  "privacy": "private",
16432
16563
  "return": {
16433
16564
  "type": {
@@ -16877,12 +17008,12 @@
16877
17008
  ],
16878
17009
  "events": [
16879
17010
  {
16880
- "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
17011
+ "description": "(React: onChange) This event is dispatched when the menuitemradio changes.",
16881
17012
  "name": "change",
16882
17013
  "reactName": "onChange"
16883
17014
  },
16884
17015
  {
16885
- "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
17016
+ "description": "(React: onClick) This event is dispatched when the menuitemradio is clicked.",
16886
17017
  "name": "click",
16887
17018
  "reactName": "onClick",
16888
17019
  "inheritedFrom": {
@@ -16891,7 +17022,7 @@
16891
17022
  }
16892
17023
  },
16893
17024
  {
16894
- "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
17025
+ "description": "(React: onFocus) This event is dispatched when the menuitemradio receives focus.",
16895
17026
  "name": "focus",
16896
17027
  "reactName": "onFocus",
16897
17028
  "inheritedFrom": {
@@ -16925,7 +17056,7 @@
16925
17056
  "text": "boolean"
16926
17057
  },
16927
17058
  "default": "false",
16928
- "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
17059
+ "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
16929
17060
  "fieldName": "checked"
16930
17061
  },
16931
17062
  {
@@ -16933,8 +17064,8 @@
16933
17064
  "type": {
16934
17065
  "text": "Indicator"
16935
17066
  },
16936
- "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
16937
- "default": "'checkbox'",
17067
+ "description": "The indicator attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.",
17068
+ "default": "'radio'",
16938
17069
  "fieldName": "indicator"
16939
17070
  },
16940
17071
  {
@@ -17129,8 +17260,8 @@
17129
17260
  "name": "MenuItem",
17130
17261
  "module": "/src/components/menuitem/menuitem.component"
17131
17262
  },
17132
- "tagName": "mdc-menuitemcheckbox",
17133
- "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
17263
+ "tagName": "mdc-menuitemradio",
17264
+ "jsDoc": "/**\n * A menuitemradio component is a checkable menuitem that is used in a menu.\n * A menuitemradio should be checked only one at a time. <br/>\n * There should be no focusable descendants inside this menuitemradio component.\n *\n * The `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n *\n * Menu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n *\n * The `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>radio</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the checkmark will always be positioned on the trailing side.\n *\n * The radio will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The third options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitemradio\n *\n * @slot leading-controls - slot for menu item radio controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item radio primary label.\n * @slot leading-text-secondary-label - slot for menu item radio secondary label.\n * @slot leading-text-tertiary-label - slot for menu item radio tertiary label.\n * @slot trailing-text-side-header - slot for menu item radio side header text.\n * @slot trailing-text-subline - slot for menu item radio subline text.\n * @slot trailing-controls - slot for menu item radio controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.\n */",
17134
17265
  "customElement": true,
17135
17266
  "cssProperties": [
17136
17267
  {
@@ -17205,23 +17336,23 @@
17205
17336
  "kind": "js",
17206
17337
  "name": "default",
17207
17338
  "declaration": {
17208
- "name": "MenuItemCheckbox",
17209
- "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
17339
+ "name": "MenuItemRadio",
17340
+ "module": "components/menuitemradio/menuitemradio.component.js"
17210
17341
  }
17211
17342
  }
17212
17343
  ]
17213
17344
  },
17214
17345
  {
17215
17346
  "kind": "javascript-module",
17216
- "path": "components/menuitemradio/menuitemradio.component.js",
17347
+ "path": "components/menuitem/menuitem.component.js",
17217
17348
  "declarations": [
17218
17349
  {
17219
17350
  "kind": "class",
17220
- "description": "A menuitemradio component is a checkable menuitem that is used in a menu.\nA menuitemradio should be checked only one at a time. <br/>\nThere should be no focusable descendants inside this menuitemradio component.\n\nThe `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n\nMenu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nIf you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n\nThe `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>radio</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe checkmark will always be positioned on the trailing side.\n\nThe radio will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe third options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.",
17221
- "name": "MenuItemRadio",
17351
+ "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
17352
+ "name": "MenuItem",
17222
17353
  "slots": [
17223
17354
  {
17224
- "description": "slot for menu item radio controls to appear of leading end.",
17355
+ "description": "slot for menu item controls to appear of leading end.",
17225
17356
  "name": "leading-controls",
17226
17357
  "inheritedFrom": {
17227
17358
  "name": "ListItem",
@@ -17229,7 +17360,7 @@
17229
17360
  }
17230
17361
  },
17231
17362
  {
17232
- "description": "slot for menu item radio primary label.",
17363
+ "description": "slot for menu item primary label.",
17233
17364
  "name": "leading-text-primary-label",
17234
17365
  "inheritedFrom": {
17235
17366
  "name": "ListItem",
@@ -17237,7 +17368,7 @@
17237
17368
  }
17238
17369
  },
17239
17370
  {
17240
- "description": "slot for menu item radio secondary label.",
17371
+ "description": "slot for menu item secondary label.",
17241
17372
  "name": "leading-text-secondary-label",
17242
17373
  "inheritedFrom": {
17243
17374
  "name": "ListItem",
@@ -17245,7 +17376,7 @@
17245
17376
  }
17246
17377
  },
17247
17378
  {
17248
- "description": "slot for menu item radio tertiary label.",
17379
+ "description": "slot for menu item tertiary label.",
17249
17380
  "name": "leading-text-tertiary-label",
17250
17381
  "inheritedFrom": {
17251
17382
  "name": "ListItem",
@@ -17253,7 +17384,7 @@
17253
17384
  }
17254
17385
  },
17255
17386
  {
17256
- "description": "slot for menu item radio side header text.",
17387
+ "description": "slot for menu item side header text.",
17257
17388
  "name": "trailing-text-side-header",
17258
17389
  "inheritedFrom": {
17259
17390
  "name": "ListItem",
@@ -17261,7 +17392,7 @@
17261
17392
  }
17262
17393
  },
17263
17394
  {
17264
- "description": "slot for menu item radio subline text.",
17395
+ "description": "slot for menu item subline text.",
17265
17396
  "name": "trailing-text-subline",
17266
17397
  "inheritedFrom": {
17267
17398
  "name": "ListItem",
@@ -17269,7 +17400,7 @@
17269
17400
  }
17270
17401
  },
17271
17402
  {
17272
- "description": "slot for menu item radio controls to appear of trailing end.",
17403
+ "description": "slot for menu item controls to appear of trailing end.",
17273
17404
  "name": "trailing-controls",
17274
17405
  "inheritedFrom": {
17275
17406
  "name": "ListItem",
@@ -17278,78 +17409,6 @@
17278
17409
  }
17279
17410
  ],
17280
17411
  "members": [
17281
- {
17282
- "kind": "field",
17283
- "name": "checked",
17284
- "type": {
17285
- "text": "boolean"
17286
- },
17287
- "default": "false",
17288
- "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
17289
- "attribute": "checked",
17290
- "reflects": true
17291
- },
17292
- {
17293
- "kind": "field",
17294
- "name": "indicator",
17295
- "type": {
17296
- "text": "Indicator"
17297
- },
17298
- "description": "The indicator attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.",
17299
- "default": "'radio'",
17300
- "attribute": "indicator",
17301
- "reflects": true
17302
- },
17303
- {
17304
- "kind": "method",
17305
- "name": "getAllRadiosWithinSameGroup",
17306
- "privacy": "private",
17307
- "return": {
17308
- "type": {
17309
- "text": "MenuItemRadio[]"
17310
- }
17311
- },
17312
- "description": "Returns all radios within the same group (name)."
17313
- },
17314
- {
17315
- "kind": "method",
17316
- "name": "updateOtherRadiosCheckedState",
17317
- "privacy": "private",
17318
- "return": {
17319
- "type": {
17320
- "text": "void"
17321
- }
17322
- },
17323
- "description": "Updates the checked state of all other radios in the same group.\nThis method is called when a radio is clicked to ensure that only one radio in the group can be checked at a time.\nIt sets the `checked` property of all other radios in the same group to `false`."
17324
- },
17325
- {
17326
- "kind": "field",
17327
- "name": "radioHandleClick",
17328
- "privacy": "private",
17329
- "description": "Handles click events to set checked state and uncheck siblings in the same group and container.\nIf the menuitemradio is not checked, it sets its checked state to `true`\nand sets all other menuitemradio elements of the same group with checked state to `false`."
17330
- },
17331
- {
17332
- "kind": "method",
17333
- "name": "renderStaticRadio",
17334
- "privacy": "private",
17335
- "return": {
17336
- "type": {
17337
- "text": ""
17338
- }
17339
- },
17340
- "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
17341
- },
17342
- {
17343
- "kind": "method",
17344
- "name": "renderCheckmarkIcon",
17345
- "privacy": "private",
17346
- "return": {
17347
- "type": {
17348
- "text": ""
17349
- }
17350
- },
17351
- "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
17352
- },
17353
17412
  {
17354
17413
  "kind": "field",
17355
17414
  "name": "arrowPosition",
@@ -17358,11 +17417,7 @@
17358
17417
  },
17359
17418
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
17360
17419
  "attribute": "arrow-position",
17361
- "reflects": true,
17362
- "inheritedFrom": {
17363
- "name": "MenuItem",
17364
- "module": "components/menuitem/menuitem.component.js"
17365
- }
17420
+ "reflects": true
17366
17421
  },
17367
17422
  {
17368
17423
  "kind": "field",
@@ -17372,11 +17427,7 @@
17372
17427
  },
17373
17428
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
17374
17429
  "attribute": "arrow-direction",
17375
- "reflects": true,
17376
- "inheritedFrom": {
17377
- "name": "MenuItem",
17378
- "module": "components/menuitem/menuitem.component.js"
17379
- }
17430
+ "reflects": true
17380
17431
  },
17381
17432
  {
17382
17433
  "kind": "field",
@@ -17387,11 +17438,7 @@
17387
17438
  "default": "undefined",
17388
17439
  "description": "The name attribute is used to identify the menu item when it is selected.",
17389
17440
  "attribute": "name",
17390
- "reflects": true,
17391
- "inheritedFrom": {
17392
- "name": "MenuItem",
17393
- "module": "components/menuitem/menuitem.component.js"
17394
- }
17441
+ "reflects": true
17395
17442
  },
17396
17443
  {
17397
17444
  "kind": "field",
@@ -17402,11 +17449,7 @@
17402
17449
  "default": "undefined",
17403
17450
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
17404
17451
  "attribute": "value",
17405
- "reflects": true,
17406
- "inheritedFrom": {
17407
- "name": "MenuItem",
17408
- "module": "components/menuitem/menuitem.component.js"
17409
- }
17452
+ "reflects": true
17410
17453
  },
17411
17454
  {
17412
17455
  "kind": "method",
@@ -17450,11 +17493,7 @@
17450
17493
  "description": "The keyboard event that triggered the action."
17451
17494
  }
17452
17495
  ],
17453
- "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
17454
- "inheritedFrom": {
17455
- "name": "MenuItem",
17456
- "module": "components/menuitem/menuitem.component.js"
17457
- }
17496
+ "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
17458
17497
  },
17459
17498
  {
17460
17499
  "kind": "method",
@@ -17791,12 +17830,7 @@
17791
17830
  ],
17792
17831
  "events": [
17793
17832
  {
17794
- "description": "(React: onChange) This event is dispatched when the menuitemradio changes.",
17795
- "name": "change",
17796
- "reactName": "onChange"
17797
- },
17798
- {
17799
- "description": "(React: onClick) This event is dispatched when the menuitemradio is clicked.",
17833
+ "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
17800
17834
  "name": "click",
17801
17835
  "reactName": "onClick",
17802
17836
  "inheritedFrom": {
@@ -17804,15 +17838,6 @@
17804
17838
  "module": "src/components/listitem/listitem.component.ts"
17805
17839
  }
17806
17840
  },
17807
- {
17808
- "description": "(React: onFocus) This event is dispatched when the menuitemradio receives focus.",
17809
- "name": "focus",
17810
- "reactName": "onFocus",
17811
- "inheritedFrom": {
17812
- "name": "ListItem",
17813
- "module": "src/components/listitem/listitem.component.ts"
17814
- }
17815
- },
17816
17841
  {
17817
17842
  "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
17818
17843
  "name": "keydown",
@@ -17830,38 +17855,25 @@
17830
17855
  "name": "ListItem",
17831
17856
  "module": "src/components/listitem/listitem.component.ts"
17832
17857
  }
17858
+ },
17859
+ {
17860
+ "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
17861
+ "name": "focus",
17862
+ "reactName": "onFocus",
17863
+ "inheritedFrom": {
17864
+ "name": "ListItem",
17865
+ "module": "src/components/listitem/listitem.component.ts"
17866
+ }
17833
17867
  }
17834
17868
  ],
17835
17869
  "attributes": [
17836
- {
17837
- "name": "checked",
17838
- "type": {
17839
- "text": "boolean"
17840
- },
17841
- "default": "false",
17842
- "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
17843
- "fieldName": "checked"
17844
- },
17845
- {
17846
- "name": "indicator",
17847
- "type": {
17848
- "text": "Indicator"
17849
- },
17850
- "description": "The indicator attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.",
17851
- "default": "'radio'",
17852
- "fieldName": "indicator"
17853
- },
17854
17870
  {
17855
17871
  "name": "arrow-position",
17856
17872
  "type": {
17857
17873
  "text": "ArrowPositions | undefined"
17858
17874
  },
17859
17875
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
17860
- "fieldName": "arrowPosition",
17861
- "inheritedFrom": {
17862
- "name": "MenuItem",
17863
- "module": "src/components/menuitem/menuitem.component.ts"
17864
- }
17876
+ "fieldName": "arrowPosition"
17865
17877
  },
17866
17878
  {
17867
17879
  "name": "arrow-direction",
@@ -17869,11 +17881,7 @@
17869
17881
  "text": "ArrowDirections | undefined"
17870
17882
  },
17871
17883
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
17872
- "fieldName": "arrowDirection",
17873
- "inheritedFrom": {
17874
- "name": "MenuItem",
17875
- "module": "src/components/menuitem/menuitem.component.ts"
17876
- }
17884
+ "fieldName": "arrowDirection"
17877
17885
  },
17878
17886
  {
17879
17887
  "name": "name",
@@ -17882,11 +17890,7 @@
17882
17890
  },
17883
17891
  "default": "undefined",
17884
17892
  "description": "The name attribute is used to identify the menu item when it is selected.",
17885
- "fieldName": "name",
17886
- "inheritedFrom": {
17887
- "name": "MenuItem",
17888
- "module": "src/components/menuitem/menuitem.component.ts"
17889
- }
17893
+ "fieldName": "name"
17890
17894
  },
17891
17895
  {
17892
17896
  "name": "value",
@@ -17895,11 +17899,7 @@
17895
17899
  },
17896
17900
  "default": "undefined",
17897
17901
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
17898
- "fieldName": "value",
17899
- "inheritedFrom": {
17900
- "name": "MenuItem",
17901
- "module": "src/components/menuitem/menuitem.component.ts"
17902
- }
17902
+ "fieldName": "value"
17903
17903
  },
17904
17904
  {
17905
17905
  "name": "disabled",
@@ -18040,11 +18040,11 @@
18040
18040
  }
18041
18041
  ],
18042
18042
  "superclass": {
18043
- "name": "MenuItem",
18044
- "module": "/src/components/menuitem/menuitem.component"
18043
+ "name": "ListItem",
18044
+ "module": "/src/components/listitem/listitem.component"
18045
18045
  },
18046
- "tagName": "mdc-menuitemradio",
18047
- "jsDoc": "/**\n * A menuitemradio component is a checkable menuitem that is used in a menu.\n * A menuitemradio should be checked only one at a time. <br/>\n * There should be no focusable descendants inside this menuitemradio component.\n *\n * The `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n *\n * Menu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n *\n * The `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>radio</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the checkmark will always be positioned on the trailing side.\n *\n * The radio will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The third options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @tagname mdc-menuitemradio\n *\n * @slot leading-controls - slot for menu item radio controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item radio primary label.\n * @slot leading-text-secondary-label - slot for menu item radio secondary label.\n * @slot leading-text-tertiary-label - slot for menu item radio tertiary label.\n * @slot trailing-text-side-header - slot for menu item radio side header text.\n * @slot trailing-text-subline - slot for menu item radio subline text.\n * @slot trailing-controls - slot for menu item radio controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.\n */",
18046
+ "tagName": "mdc-menuitem",
18047
+ "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
18048
18048
  "customElement": true,
18049
18049
  "cssProperties": [
18050
18050
  {
@@ -18119,8 +18119,8 @@
18119
18119
  "kind": "js",
18120
18120
  "name": "default",
18121
18121
  "declaration": {
18122
- "name": "MenuItemRadio",
18123
- "module": "components/menuitemradio/menuitemradio.component.js"
18122
+ "name": "MenuItem",
18123
+ "module": "components/menuitem/menuitem.component.js"
18124
18124
  }
18125
18125
  }
18126
18126
  ]
@@ -20050,7 +20050,7 @@
20050
20050
  },
20051
20051
  "default": "null",
20052
20052
  "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
20053
- "attribute": "headerText",
20053
+ "attribute": "header-text",
20054
20054
  "reflects": true
20055
20055
  },
20056
20056
  {
@@ -20077,7 +20077,7 @@
20077
20077
  "fieldName": "ariaLabel"
20078
20078
  },
20079
20079
  {
20080
- "name": "headerText",
20080
+ "name": "header-text",
20081
20081
  "type": {
20082
20082
  "text": "string | null"
20083
20083
  },