@momentum-design/components 0.53.5 → 0.53.7

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.
Files changed (7) hide show
  1. package/dist/browser/index.js +62 -34
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/button/button.styles.js +62 -34
  4. package/dist/custom-elements.json +209 -209
  5. package/dist/react/index.d.ts +1 -1
  6. package/dist/react/index.js +1 -1
  7. package/package.json +1 -1
package/dist/components/button/button.styles.js CHANGED
@@ -12,7 +12,7 @@ const styles = css `
12
12
  --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-primary-pressed);
13
13
  --mdc-button-primary-disabled-background-color: var(--mds-color-theme-button-primary-disabled);
14
14
  --mdc-button-primary-disabled-color: var(--mds-color-theme-text-primary-disabled);
15
-
15
+
16
16
  --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
17
17
  --mdc-button-secondary-border-color: var(--mds-color-theme-outline-button-normal);
18
18
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
@@ -27,6 +27,11 @@ const styles = css `
27
27
  --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
28
28
  --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
29
29
 
30
+ --mdc-button-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
31
+ --mdc-button-active-hover-background-color: var(--mds-color-theme-button-secondary-active-hover);
32
+ --mdc-button-active-pressed-background-color: var(--mds-color-theme-button-secondary-active-pressed);
33
+ --mdc-button-active-disabled-background-color: var(--mds-color-theme-button-secondary-active-disabled);
34
+
30
35
  --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
31
36
  --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
32
37
  --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
@@ -36,17 +41,17 @@ const styles = css `
36
41
  --mdc-button-postfix-icon-size: 1rem;
37
42
  }
38
43
 
39
- :host([size="64"]) {
44
+ :host([size='64']) {
40
45
  --mdc-button-prefix-icon-size: 2rem;
41
46
  --mdc-button-postfix-icon-size: 2rem;
42
47
  }
43
48
 
44
- :host([size="52"]) {
49
+ :host([size='52']) {
45
50
  --mdc-button-prefix-icon-size: 1.75rem;
46
51
  --mdc-button-postfix-icon-size: 1.75rem;
47
52
  }
48
53
 
49
- :host([size="40"]) {
54
+ :host([size='40']) {
50
55
  --mdc-button-prefix-icon-size: 1.25rem;
51
56
  --mdc-button-postfix-icon-size: 1.25rem;
52
57
  }
@@ -60,101 +65,124 @@ const styles = css `
60
65
  --mdc-icon-size: var(--mdc-button-postfix-icon-size);
61
66
  }
62
67
 
63
- :host([active]){
68
+ :host([active]) {
69
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
70
+ }
71
+
72
+ :host([active][color='default']:not([variant='primary'])) {
73
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
74
+ background: var(--mdc-button-active-background-color);
75
+ }
76
+ :host([active][color='default']:not([variant='primary']):hover) {
77
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
78
+ background: var(--mdc-button-active-hover-background-color);
79
+ }
80
+ :host([active][color='default']:not([variant='primary']):active),
81
+ :host([active][color='default']:not([variant='primary']).pressed) {
82
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
83
+ background: var(--mdc-button-active-pressed-background-color);
84
+ }
85
+ :host([active][color='default']:not([variant='primary'])[disabled]),
86
+ :host([active][color='default']:not([variant='primary'])[soft-disabled]) {
64
87
  font-weight: var(--mds-font-apps-body-large-bold-font-weight);
88
+ background: var(--mdc-button-active-disabled-background-color);
65
89
  }
66
90
 
67
- :host([variant="primary"]){
91
+ :host([variant='primary']) {
68
92
  background: var(--mdc-button-primary-background-color);
69
93
  color: var(--mdc-button-primary-color);
70
94
  }
71
- :host([variant="primary"]:hover){
95
+ :host([variant='primary']:hover) {
72
96
  background: var(--mdc-button-primary-hover-background-color);
73
97
  }
74
- :host([variant="primary"]:active), :host([variant="primary"].pressed){
98
+ :host([variant='primary']:active),
99
+ :host([variant='primary'].pressed) {
75
100
  background: var(--mdc-button-primary-pressed-background-color);
76
101
  }
77
- :host([variant="primary"][disabled]), :host([variant="primary"][soft-disabled]){
102
+ :host([variant='primary'][disabled]),
103
+ :host([variant='primary'][soft-disabled]) {
78
104
  background: var(--mdc-button-primary-disabled-background-color);
79
105
  color: var(--mdc-button-primary-disabled-color);
80
106
  cursor: auto;
81
107
  }
82
108
 
83
- :host([variant="secondary"]){
109
+ :host([variant='secondary']) {
84
110
  color: var(--mdc-button-secondary-color);
85
111
  border-color: var(--mdc-button-secondary-border-color);
86
112
  }
87
- :host([variant="secondary"]:hover){
113
+ :host([variant='secondary']:hover) {
88
114
  background: var(--mdc-button-secondary-hover-background-color);
89
115
  }
90
- :host([variant="secondary"]:active), :host([variant="secondary"].pressed){
116
+ :host([variant='secondary']:active),
117
+ :host([variant='secondary'].pressed) {
91
118
  background: var(--mdc-button-secondary-pressed-background-color);
92
119
  }
93
- :host([variant="secondary"][disabled]),
94
- :host([variant="secondary"][soft-disabled]){
120
+ :host([variant='secondary'][disabled]),
121
+ :host([variant='secondary'][soft-disabled]) {
95
122
  color: var(--mdc-button-primary-disabled-color);
96
123
  border-color: var(--mdc-button-secondary-disabled-border-color);
97
124
  background: var(--mdc-button-secondary-disabled-background-color);
98
125
  cursor: auto;
99
126
  }
100
127
 
101
- :host([variant="tertiary"]){
128
+ :host([variant='tertiary']) {
102
129
  border-color: transparent;
103
130
  color: var(--mdc-button-tertiary-color);
104
131
  }
105
- :host([variant="tertiary"]:hover){
132
+ :host([variant='tertiary']:hover) {
106
133
  background: var(--mdc-button-tertiary-hover-background-color);
107
134
  }
108
- :host([variant="tertiary"]:active), :host([variant="tertiary"].pressed){
135
+ :host([variant='tertiary']:active),
136
+ :host([variant='tertiary'].pressed) {
109
137
  background: var(--mdc-button-tertiary-pressed-background-color);
110
138
  }
111
- :host([variant="tertiary"][disabled]),
112
- :host([variant="tertiary"][soft-disabled]){
139
+ :host([variant='tertiary'][disabled]),
140
+ :host([variant='tertiary'][soft-disabled]) {
113
141
  color: var(--mdc-button-tertiary-disabled-color);
114
142
  background: var(--mdc-button-tertiary-disabled-background-color);
115
143
  cursor: auto;
116
144
  }
117
145
 
118
- :host([size="64"][data-btn-type='icon']),
119
- :host([size="52"][data-btn-type='icon']),
120
- :host([size="40"][data-btn-type='icon']),
121
- :host([size="32"][data-btn-type='icon']),
122
- :host([size="28"][data-btn-type='icon']),
123
- :host([size="24"][data-btn-type='icon']){
146
+ :host([size='64'][data-btn-type='icon']),
147
+ :host([size='52'][data-btn-type='icon']),
148
+ :host([size='40'][data-btn-type='icon']),
149
+ :host([size='32'][data-btn-type='icon']),
150
+ :host([size='28'][data-btn-type='icon']),
151
+ :host([size='24'][data-btn-type='icon']) {
124
152
  border-radius: 6.25rem;
125
153
  aspect-ratio: 1;
126
154
  padding: unset;
127
155
  }
128
- :host([size="40"]){
156
+ :host([size='40']) {
129
157
  font-size: var(--mds-font-size-body-large);
130
158
  line-height: var(--mdc-button-line-height-size-40);
131
159
  padding: 0 1rem;
132
160
  gap: 0.5rem;
133
161
  }
134
- :host([size="32"]){
162
+ :host([size='32']) {
135
163
  font-size: var(--mds-font-size-body-large);
136
164
  line-height: var(--mdc-button-line-height-size-32);
137
165
  padding: 0 0.75rem;
138
166
  gap: 0.375rem;
139
167
  }
140
- :host([size="28"]){
168
+ :host([size='28']) {
141
169
  font-size: var(--mds-font-size-body-midsize);
142
170
  line-height: var(--mdc-button-line-height-size-28);
143
171
  padding: 0 0.75rem;
144
172
  gap: 0.375rem;
145
173
  }
146
- :host([size="24"]){
174
+ :host([size='24']) {
147
175
  font-size: var(--mds-font-size-body-small);
148
176
  line-height: var(--mdc-button-line-height-size-24);
149
177
  padding: 0 0.625rem;
150
178
  gap: 0.25rem;
151
179
  }
152
- :host([size="20"]){
180
+ :host([size='20']) {
153
181
  padding: 0.0625rem;
154
182
  aspect-ratio: 1;
155
183
  }
156
184
 
157
- :host([color="accent"]){
185
+ :host([color='accent']) {
158
186
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
159
187
  --mdc-button-primary-background-color: var(--mds-color-theme-button-accent-normal);
160
188
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-accent-hover);
@@ -165,7 +193,7 @@ const styles = css `
165
193
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
166
194
  --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
167
195
  }
168
- :host([color="positive"]){
196
+ :host([color='positive']) {
169
197
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
170
198
  --mdc-button-primary-background-color: var(--mds-color-theme-button-join-normal);
171
199
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-join-hover);
@@ -176,7 +204,7 @@ const styles = css `
176
204
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
177
205
  --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
178
206
  }
179
- :host([color="negative"]){
207
+ :host([color='negative']) {
180
208
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
181
209
  --mdc-button-primary-background-color: var(--mds-color-theme-button-cancel-normal);
182
210
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-cancel-hover);
@@ -187,7 +215,7 @@ const styles = css `
187
215
  --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
188
216
  --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
189
217
  }
190
- :host([color="promotional"]){
218
+ :host([color='promotional']) {
191
219
  --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
192
220
  --mdc-button-primary-background-color: var(--mds-color-theme-common-button-promotion-normal);
193
221
  --mdc-button-primary-hover-background-color: var(--mds-color-theme-common-button-promotion-hover);
package/dist/custom-elements.json CHANGED
@@ -9041,215 +9041,6 @@
9041
9041
  }
9042
9042
  ]
9043
9043
  },
9044
- {
9045
- "kind": "javascript-module",
9046
- "path": "components/marker/marker.component.js",
9047
- "declarations": [
9048
- {
9049
- "kind": "class",
9050
- "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
9051
- "name": "Marker",
9052
- "cssProperties": [
9053
- {
9054
- "description": "Allows customization of the default background color in solid variant.",
9055
- "name": "--mdc-marker-solid-background-color"
9056
- },
9057
- {
9058
- "description": "Allows customization of the default stripes in striped variant.",
9059
- "name": "--mdc-marker-striped-color"
9060
- },
9061
- {
9062
- "description": "Allows customization of the default background color in striped variant.",
9063
- "name": "--mdc-marker-striped-background-color"
9064
- },
9065
- {
9066
- "description": "Allows customization of the default width.",
9067
- "name": "--mdc-marker-width"
9068
- }
9069
- ],
9070
- "members": [
9071
- {
9072
- "kind": "field",
9073
- "name": "variant",
9074
- "type": {
9075
- "text": "MarkerVariants"
9076
- },
9077
- "privacy": "public",
9078
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
9079
- "default": "solid",
9080
- "attribute": "variant",
9081
- "reflects": true
9082
- }
9083
- ],
9084
- "attributes": [
9085
- {
9086
- "name": "variant",
9087
- "type": {
9088
- "text": "MarkerVariants"
9089
- },
9090
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
9091
- "default": "solid",
9092
- "fieldName": "variant"
9093
- }
9094
- ],
9095
- "superclass": {
9096
- "name": "Component",
9097
- "module": "/src/models"
9098
- },
9099
- "tagName": "mdc-marker",
9100
- "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
9101
- "customElement": true
9102
- }
9103
- ],
9104
- "exports": [
9105
- {
9106
- "kind": "js",
9107
- "name": "default",
9108
- "declaration": {
9109
- "name": "Marker",
9110
- "module": "components/marker/marker.component.js"
9111
- }
9112
- }
9113
- ]
9114
- },
9115
- {
9116
- "kind": "javascript-module",
9117
- "path": "components/optgroup/optgroup.component.js",
9118
- "declarations": [
9119
- {
9120
- "kind": "class",
9121
- "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
9122
- "name": "OptGroup",
9123
- "cssProperties": [
9124
- {
9125
- "description": "Allows customization of the disabled option color.",
9126
- "name": "--mdc-optgroup-disabled-color"
9127
- }
9128
- ],
9129
- "slots": [
9130
- {
9131
- "description": "This is a default slot for mdc-option elements.",
9132
- "name": "default"
9133
- }
9134
- ],
9135
- "members": [
9136
- {
9137
- "kind": "field",
9138
- "name": "label",
9139
- "type": {
9140
- "text": "string | undefined"
9141
- },
9142
- "description": "The header text to be displayed on the top of the options list.",
9143
- "attribute": "label",
9144
- "reflects": true
9145
- },
9146
- {
9147
- "kind": "method",
9148
- "name": "setDisabledForAllOptions",
9149
- "privacy": "private",
9150
- "return": {
9151
- "type": {
9152
- "text": "void"
9153
- }
9154
- }
9155
- },
9156
- {
9157
- "kind": "field",
9158
- "name": "dataAriaLabel",
9159
- "type": {
9160
- "text": "string | null"
9161
- },
9162
- "default": "null",
9163
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
9164
- "attribute": "data-aria-label",
9165
- "reflects": true,
9166
- "inheritedFrom": {
9167
- "name": "DataAriaLabelMixin",
9168
- "module": "utils/mixins/DataAriaLabelMixin.js"
9169
- }
9170
- },
9171
- {
9172
- "kind": "field",
9173
- "name": "disabled",
9174
- "type": {
9175
- "text": "boolean | undefined"
9176
- },
9177
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9178
- "default": "undefined",
9179
- "attribute": "disabled",
9180
- "reflects": true,
9181
- "inheritedFrom": {
9182
- "name": "DisabledMixin",
9183
- "module": "utils/mixins/DisabledMixin.js"
9184
- }
9185
- }
9186
- ],
9187
- "attributes": [
9188
- {
9189
- "name": "label",
9190
- "type": {
9191
- "text": "string | undefined"
9192
- },
9193
- "description": "The header text to be displayed on the top of the options list.",
9194
- "fieldName": "label"
9195
- },
9196
- {
9197
- "name": "data-aria-label",
9198
- "type": {
9199
- "text": "string | null"
9200
- },
9201
- "default": "null",
9202
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
9203
- "fieldName": "dataAriaLabel",
9204
- "inheritedFrom": {
9205
- "name": "DataAriaLabelMixin",
9206
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
9207
- }
9208
- },
9209
- {
9210
- "name": "disabled",
9211
- "type": {
9212
- "text": "boolean | undefined"
9213
- },
9214
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9215
- "default": "undefined",
9216
- "fieldName": "disabled",
9217
- "inheritedFrom": {
9218
- "name": "DisabledMixin",
9219
- "module": "src/utils/mixins/DisabledMixin.ts"
9220
- }
9221
- }
9222
- ],
9223
- "mixins": [
9224
- {
9225
- "name": "DataAriaLabelMixin",
9226
- "module": "/src/utils/mixins/DataAriaLabelMixin"
9227
- },
9228
- {
9229
- "name": "DisabledMixin",
9230
- "module": "/src/utils/mixins/DisabledMixin"
9231
- }
9232
- ],
9233
- "superclass": {
9234
- "name": "Component",
9235
- "module": "/src/models"
9236
- },
9237
- "tagName": "mdc-optgroup",
9238
- "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
9239
- "customElement": true
9240
- }
9241
- ],
9242
- "exports": [
9243
- {
9244
- "kind": "js",
9245
- "name": "default",
9246
- "declaration": {
9247
- "name": "OptGroup",
9248
- "module": "components/optgroup/optgroup.component.js"
9249
- }
9250
- }
9251
- ]
9252
- },
9253
9044
  {
9254
9045
  "kind": "javascript-module",
9255
9046
  "path": "components/listitem/listitem.component.js",
@@ -9627,6 +9418,215 @@
9627
9418
  }
9628
9419
  ]
9629
9420
  },
9421
+ {
9422
+ "kind": "javascript-module",
9423
+ "path": "components/marker/marker.component.js",
9424
+ "declarations": [
9425
+ {
9426
+ "kind": "class",
9427
+ "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
9428
+ "name": "Marker",
9429
+ "cssProperties": [
9430
+ {
9431
+ "description": "Allows customization of the default background color in solid variant.",
9432
+ "name": "--mdc-marker-solid-background-color"
9433
+ },
9434
+ {
9435
+ "description": "Allows customization of the default stripes in striped variant.",
9436
+ "name": "--mdc-marker-striped-color"
9437
+ },
9438
+ {
9439
+ "description": "Allows customization of the default background color in striped variant.",
9440
+ "name": "--mdc-marker-striped-background-color"
9441
+ },
9442
+ {
9443
+ "description": "Allows customization of the default width.",
9444
+ "name": "--mdc-marker-width"
9445
+ }
9446
+ ],
9447
+ "members": [
9448
+ {
9449
+ "kind": "field",
9450
+ "name": "variant",
9451
+ "type": {
9452
+ "text": "MarkerVariants"
9453
+ },
9454
+ "privacy": "public",
9455
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
9456
+ "default": "solid",
9457
+ "attribute": "variant",
9458
+ "reflects": true
9459
+ }
9460
+ ],
9461
+ "attributes": [
9462
+ {
9463
+ "name": "variant",
9464
+ "type": {
9465
+ "text": "MarkerVariants"
9466
+ },
9467
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
9468
+ "default": "solid",
9469
+ "fieldName": "variant"
9470
+ }
9471
+ ],
9472
+ "superclass": {
9473
+ "name": "Component",
9474
+ "module": "/src/models"
9475
+ },
9476
+ "tagName": "mdc-marker",
9477
+ "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
9478
+ "customElement": true
9479
+ }
9480
+ ],
9481
+ "exports": [
9482
+ {
9483
+ "kind": "js",
9484
+ "name": "default",
9485
+ "declaration": {
9486
+ "name": "Marker",
9487
+ "module": "components/marker/marker.component.js"
9488
+ }
9489
+ }
9490
+ ]
9491
+ },
9492
+ {
9493
+ "kind": "javascript-module",
9494
+ "path": "components/optgroup/optgroup.component.js",
9495
+ "declarations": [
9496
+ {
9497
+ "kind": "class",
9498
+ "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
9499
+ "name": "OptGroup",
9500
+ "cssProperties": [
9501
+ {
9502
+ "description": "Allows customization of the disabled option color.",
9503
+ "name": "--mdc-optgroup-disabled-color"
9504
+ }
9505
+ ],
9506
+ "slots": [
9507
+ {
9508
+ "description": "This is a default slot for mdc-option elements.",
9509
+ "name": "default"
9510
+ }
9511
+ ],
9512
+ "members": [
9513
+ {
9514
+ "kind": "field",
9515
+ "name": "label",
9516
+ "type": {
9517
+ "text": "string | undefined"
9518
+ },
9519
+ "description": "The header text to be displayed on the top of the options list.",
9520
+ "attribute": "label",
9521
+ "reflects": true
9522
+ },
9523
+ {
9524
+ "kind": "method",
9525
+ "name": "setDisabledForAllOptions",
9526
+ "privacy": "private",
9527
+ "return": {
9528
+ "type": {
9529
+ "text": "void"
9530
+ }
9531
+ }
9532
+ },
9533
+ {
9534
+ "kind": "field",
9535
+ "name": "dataAriaLabel",
9536
+ "type": {
9537
+ "text": "string | null"
9538
+ },
9539
+ "default": "null",
9540
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
9541
+ "attribute": "data-aria-label",
9542
+ "reflects": true,
9543
+ "inheritedFrom": {
9544
+ "name": "DataAriaLabelMixin",
9545
+ "module": "utils/mixins/DataAriaLabelMixin.js"
9546
+ }
9547
+ },
9548
+ {
9549
+ "kind": "field",
9550
+ "name": "disabled",
9551
+ "type": {
9552
+ "text": "boolean | undefined"
9553
+ },
9554
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9555
+ "default": "undefined",
9556
+ "attribute": "disabled",
9557
+ "reflects": true,
9558
+ "inheritedFrom": {
9559
+ "name": "DisabledMixin",
9560
+ "module": "utils/mixins/DisabledMixin.js"
9561
+ }
9562
+ }
9563
+ ],
9564
+ "attributes": [
9565
+ {
9566
+ "name": "label",
9567
+ "type": {
9568
+ "text": "string | undefined"
9569
+ },
9570
+ "description": "The header text to be displayed on the top of the options list.",
9571
+ "fieldName": "label"
9572
+ },
9573
+ {
9574
+ "name": "data-aria-label",
9575
+ "type": {
9576
+ "text": "string | null"
9577
+ },
9578
+ "default": "null",
9579
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
9580
+ "fieldName": "dataAriaLabel",
9581
+ "inheritedFrom": {
9582
+ "name": "DataAriaLabelMixin",
9583
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
9584
+ }
9585
+ },
9586
+ {
9587
+ "name": "disabled",
9588
+ "type": {
9589
+ "text": "boolean | undefined"
9590
+ },
9591
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9592
+ "default": "undefined",
9593
+ "fieldName": "disabled",
9594
+ "inheritedFrom": {
9595
+ "name": "DisabledMixin",
9596
+ "module": "src/utils/mixins/DisabledMixin.ts"
9597
+ }
9598
+ }
9599
+ ],
9600
+ "mixins": [
9601
+ {
9602
+ "name": "DataAriaLabelMixin",
9603
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
9604
+ },
9605
+ {
9606
+ "name": "DisabledMixin",
9607
+ "module": "/src/utils/mixins/DisabledMixin"
9608
+ }
9609
+ ],
9610
+ "superclass": {
9611
+ "name": "Component",
9612
+ "module": "/src/models"
9613
+ },
9614
+ "tagName": "mdc-optgroup",
9615
+ "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
9616
+ "customElement": true
9617
+ }
9618
+ ],
9619
+ "exports": [
9620
+ {
9621
+ "kind": "js",
9622
+ "name": "default",
9623
+ "declaration": {
9624
+ "name": "OptGroup",
9625
+ "module": "components/optgroup/optgroup.component.js"
9626
+ }
9627
+ }
9628
+ ]
9629
+ },
9630
9630
  {
9631
9631
  "kind": "javascript-module",
9632
9632
  "path": "components/option/option.component.js",
package/dist/react/index.d.ts CHANGED
@@ -20,9 +20,9 @@ export { default as Input } from './input';
20
20
  export { default as InputChip } from './inputchip';
21
21
  export { default as Link } from './link';
22
22
  export { default as List } from './list';
23
+ export { default as ListItem } from './listitem';
23
24
  export { default as Marker } from './marker';
24
25
  export { default as OptGroup } from './optgroup';
25
- export { default as ListItem } from './listitem';
26
26
  export { default as Option } from './option';
27
27
  export { default as Popover } from './popover';
28
28
  export { default as Presence } from './presence';
package/dist/react/index.js CHANGED
@@ -20,9 +20,9 @@ export { default as Input } from './input';
20
20
  export { default as InputChip } from './inputchip';
21
21
  export { default as Link } from './link';
22
22
  export { default as List } from './list';
23
+ export { default as ListItem } from './listitem';
23
24
  export { default as Marker } from './marker';
24
25
  export { default as OptGroup } from './optgroup';
25
- export { default as ListItem } from './listitem';
26
26
  export { default as Option } from './option';
27
27
  export { default as Popover } from './popover';
28
28
  export { default as Presence } from './presence';