@momentum-design/components 0.76.8 → 0.77.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.
- package/dist/browser/index.js +14 -1
- package/dist/browser/index.js.map +2 -2
- package/dist/components/chip/chip.component.d.ts +1 -0
- package/dist/components/chip/chip.component.js +1 -0
- package/dist/components/chip/chip.constants.d.ts +1 -0
- package/dist/components/chip/chip.constants.js +1 -0
- package/dist/components/chip/chip.styles.js +13 -0
- package/dist/custom-elements.json +136 -136
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -105,6 +105,19 @@ const styles = css `
|
|
|
105
105
|
--mdc-chip-background-color: var(--mds-color-theme-background-label-purple-active);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
+
:host([color='orange']) {
|
|
109
|
+
--mdc-chip-border-color: var(--mds-color-theme-outline-label-orange);
|
|
110
|
+
--mdc-chip-background-color: var(--mds-color-theme-background-label-orange-normal);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
:host([color='orange']:hover) {
|
|
114
|
+
--mdc-chip-background-color: var(--mds-color-theme-background-label-orange-hover);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
:host([color='orange']:active) {
|
|
118
|
+
--mdc-chip-background-color: var(--mds-color-theme-background-label-orange-active);
|
|
119
|
+
}
|
|
120
|
+
|
|
108
121
|
:host([color='slate']) {
|
|
109
122
|
--mdc-chip-border-color: var(--mds-color-theme-outline-label-slate);
|
|
110
123
|
--mdc-chip-background-color: var(--mds-color-theme-background-label-slate-normal);
|
|
@@ -2814,6 +2814,138 @@
|
|
|
2814
2814
|
}
|
|
2815
2815
|
]
|
|
2816
2816
|
},
|
|
2817
|
+
{
|
|
2818
|
+
"kind": "javascript-module",
|
|
2819
|
+
"path": "components/buttongroup/buttongroup.component.js",
|
|
2820
|
+
"declarations": [
|
|
2821
|
+
{
|
|
2822
|
+
"kind": "class",
|
|
2823
|
+
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
|
2824
|
+
"name": "ButtonGroup",
|
|
2825
|
+
"cssProperties": [
|
|
2826
|
+
{
|
|
2827
|
+
"description": "The border radius of the buttongroup",
|
|
2828
|
+
"name": "--mdc-buttongroup-border-radius"
|
|
2829
|
+
},
|
|
2830
|
+
{
|
|
2831
|
+
"description": "The border color of the buttongroup",
|
|
2832
|
+
"name": "--mdc-buttongroup-border-color"
|
|
2833
|
+
},
|
|
2834
|
+
{
|
|
2835
|
+
"description": "The color of the divider between buttons within the buttongroup",
|
|
2836
|
+
"name": "--mdc-buttongroup-divider-color"
|
|
2837
|
+
}
|
|
2838
|
+
],
|
|
2839
|
+
"slots": [
|
|
2840
|
+
{
|
|
2841
|
+
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
2842
|
+
"name": "default"
|
|
2843
|
+
}
|
|
2844
|
+
],
|
|
2845
|
+
"members": [
|
|
2846
|
+
{
|
|
2847
|
+
"kind": "field",
|
|
2848
|
+
"name": "orientation",
|
|
2849
|
+
"type": {
|
|
2850
|
+
"text": "ButtonGroupOrientation"
|
|
2851
|
+
},
|
|
2852
|
+
"description": "Orientation of the buttongroup.",
|
|
2853
|
+
"default": "'horizontal'",
|
|
2854
|
+
"attribute": "orientation",
|
|
2855
|
+
"reflects": true
|
|
2856
|
+
},
|
|
2857
|
+
{
|
|
2858
|
+
"kind": "field",
|
|
2859
|
+
"name": "variant",
|
|
2860
|
+
"type": {
|
|
2861
|
+
"text": "ButtonGroupVariant"
|
|
2862
|
+
},
|
|
2863
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2864
|
+
"default": "'primary'",
|
|
2865
|
+
"attribute": "variant",
|
|
2866
|
+
"reflects": true
|
|
2867
|
+
},
|
|
2868
|
+
{
|
|
2869
|
+
"kind": "field",
|
|
2870
|
+
"name": "size",
|
|
2871
|
+
"type": {
|
|
2872
|
+
"text": "ButtonGroupSize"
|
|
2873
|
+
},
|
|
2874
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2875
|
+
"default": "'28'",
|
|
2876
|
+
"attribute": "size",
|
|
2877
|
+
"reflects": true
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
"kind": "field",
|
|
2881
|
+
"name": "compact",
|
|
2882
|
+
"type": {
|
|
2883
|
+
"text": "boolean"
|
|
2884
|
+
},
|
|
2885
|
+
"default": "false",
|
|
2886
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2887
|
+
"attribute": "compact",
|
|
2888
|
+
"reflects": true
|
|
2889
|
+
}
|
|
2890
|
+
],
|
|
2891
|
+
"attributes": [
|
|
2892
|
+
{
|
|
2893
|
+
"name": "orientation",
|
|
2894
|
+
"type": {
|
|
2895
|
+
"text": "ButtonGroupOrientation"
|
|
2896
|
+
},
|
|
2897
|
+
"description": "Orientation of the buttongroup.",
|
|
2898
|
+
"default": "'horizontal'",
|
|
2899
|
+
"fieldName": "orientation"
|
|
2900
|
+
},
|
|
2901
|
+
{
|
|
2902
|
+
"name": "variant",
|
|
2903
|
+
"type": {
|
|
2904
|
+
"text": "ButtonGroupVariant"
|
|
2905
|
+
},
|
|
2906
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2907
|
+
"default": "'primary'",
|
|
2908
|
+
"fieldName": "variant"
|
|
2909
|
+
},
|
|
2910
|
+
{
|
|
2911
|
+
"name": "size",
|
|
2912
|
+
"type": {
|
|
2913
|
+
"text": "ButtonGroupSize"
|
|
2914
|
+
},
|
|
2915
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2916
|
+
"default": "'28'",
|
|
2917
|
+
"fieldName": "size"
|
|
2918
|
+
},
|
|
2919
|
+
{
|
|
2920
|
+
"name": "compact",
|
|
2921
|
+
"type": {
|
|
2922
|
+
"text": "boolean"
|
|
2923
|
+
},
|
|
2924
|
+
"default": "false",
|
|
2925
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2926
|
+
"fieldName": "compact"
|
|
2927
|
+
}
|
|
2928
|
+
],
|
|
2929
|
+
"superclass": {
|
|
2930
|
+
"name": "Component",
|
|
2931
|
+
"module": "/src/models"
|
|
2932
|
+
},
|
|
2933
|
+
"tagName": "mdc-buttongroup",
|
|
2934
|
+
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
|
2935
|
+
"customElement": true
|
|
2936
|
+
}
|
|
2937
|
+
],
|
|
2938
|
+
"exports": [
|
|
2939
|
+
{
|
|
2940
|
+
"kind": "js",
|
|
2941
|
+
"name": "default",
|
|
2942
|
+
"declaration": {
|
|
2943
|
+
"name": "ButtonGroup",
|
|
2944
|
+
"module": "components/buttongroup/buttongroup.component.js"
|
|
2945
|
+
}
|
|
2946
|
+
}
|
|
2947
|
+
]
|
|
2948
|
+
},
|
|
2817
2949
|
{
|
|
2818
2950
|
"kind": "javascript-module",
|
|
2819
2951
|
"path": "components/buttonlink/buttonlink.component.js",
|
|
@@ -4177,138 +4309,6 @@
|
|
|
4177
4309
|
}
|
|
4178
4310
|
]
|
|
4179
4311
|
},
|
|
4180
|
-
{
|
|
4181
|
-
"kind": "javascript-module",
|
|
4182
|
-
"path": "components/buttongroup/buttongroup.component.js",
|
|
4183
|
-
"declarations": [
|
|
4184
|
-
{
|
|
4185
|
-
"kind": "class",
|
|
4186
|
-
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
|
4187
|
-
"name": "ButtonGroup",
|
|
4188
|
-
"cssProperties": [
|
|
4189
|
-
{
|
|
4190
|
-
"description": "The border radius of the buttongroup",
|
|
4191
|
-
"name": "--mdc-buttongroup-border-radius"
|
|
4192
|
-
},
|
|
4193
|
-
{
|
|
4194
|
-
"description": "The border color of the buttongroup",
|
|
4195
|
-
"name": "--mdc-buttongroup-border-color"
|
|
4196
|
-
},
|
|
4197
|
-
{
|
|
4198
|
-
"description": "The color of the divider between buttons within the buttongroup",
|
|
4199
|
-
"name": "--mdc-buttongroup-divider-color"
|
|
4200
|
-
}
|
|
4201
|
-
],
|
|
4202
|
-
"slots": [
|
|
4203
|
-
{
|
|
4204
|
-
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
4205
|
-
"name": "default"
|
|
4206
|
-
}
|
|
4207
|
-
],
|
|
4208
|
-
"members": [
|
|
4209
|
-
{
|
|
4210
|
-
"kind": "field",
|
|
4211
|
-
"name": "orientation",
|
|
4212
|
-
"type": {
|
|
4213
|
-
"text": "ButtonGroupOrientation"
|
|
4214
|
-
},
|
|
4215
|
-
"description": "Orientation of the buttongroup.",
|
|
4216
|
-
"default": "'horizontal'",
|
|
4217
|
-
"attribute": "orientation",
|
|
4218
|
-
"reflects": true
|
|
4219
|
-
},
|
|
4220
|
-
{
|
|
4221
|
-
"kind": "field",
|
|
4222
|
-
"name": "variant",
|
|
4223
|
-
"type": {
|
|
4224
|
-
"text": "ButtonGroupVariant"
|
|
4225
|
-
},
|
|
4226
|
-
"description": "Variant of the buttons within the buttongroup.",
|
|
4227
|
-
"default": "'primary'",
|
|
4228
|
-
"attribute": "variant",
|
|
4229
|
-
"reflects": true
|
|
4230
|
-
},
|
|
4231
|
-
{
|
|
4232
|
-
"kind": "field",
|
|
4233
|
-
"name": "size",
|
|
4234
|
-
"type": {
|
|
4235
|
-
"text": "ButtonGroupSize"
|
|
4236
|
-
},
|
|
4237
|
-
"description": "Size of the buttons within the buttongroup.",
|
|
4238
|
-
"default": "'28'",
|
|
4239
|
-
"attribute": "size",
|
|
4240
|
-
"reflects": true
|
|
4241
|
-
},
|
|
4242
|
-
{
|
|
4243
|
-
"kind": "field",
|
|
4244
|
-
"name": "compact",
|
|
4245
|
-
"type": {
|
|
4246
|
-
"text": "boolean"
|
|
4247
|
-
},
|
|
4248
|
-
"default": "false",
|
|
4249
|
-
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
4250
|
-
"attribute": "compact",
|
|
4251
|
-
"reflects": true
|
|
4252
|
-
}
|
|
4253
|
-
],
|
|
4254
|
-
"attributes": [
|
|
4255
|
-
{
|
|
4256
|
-
"name": "orientation",
|
|
4257
|
-
"type": {
|
|
4258
|
-
"text": "ButtonGroupOrientation"
|
|
4259
|
-
},
|
|
4260
|
-
"description": "Orientation of the buttongroup.",
|
|
4261
|
-
"default": "'horizontal'",
|
|
4262
|
-
"fieldName": "orientation"
|
|
4263
|
-
},
|
|
4264
|
-
{
|
|
4265
|
-
"name": "variant",
|
|
4266
|
-
"type": {
|
|
4267
|
-
"text": "ButtonGroupVariant"
|
|
4268
|
-
},
|
|
4269
|
-
"description": "Variant of the buttons within the buttongroup.",
|
|
4270
|
-
"default": "'primary'",
|
|
4271
|
-
"fieldName": "variant"
|
|
4272
|
-
},
|
|
4273
|
-
{
|
|
4274
|
-
"name": "size",
|
|
4275
|
-
"type": {
|
|
4276
|
-
"text": "ButtonGroupSize"
|
|
4277
|
-
},
|
|
4278
|
-
"description": "Size of the buttons within the buttongroup.",
|
|
4279
|
-
"default": "'28'",
|
|
4280
|
-
"fieldName": "size"
|
|
4281
|
-
},
|
|
4282
|
-
{
|
|
4283
|
-
"name": "compact",
|
|
4284
|
-
"type": {
|
|
4285
|
-
"text": "boolean"
|
|
4286
|
-
},
|
|
4287
|
-
"default": "false",
|
|
4288
|
-
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
4289
|
-
"fieldName": "compact"
|
|
4290
|
-
}
|
|
4291
|
-
],
|
|
4292
|
-
"superclass": {
|
|
4293
|
-
"name": "Component",
|
|
4294
|
-
"module": "/src/models"
|
|
4295
|
-
},
|
|
4296
|
-
"tagName": "mdc-buttongroup",
|
|
4297
|
-
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
|
4298
|
-
"customElement": true
|
|
4299
|
-
}
|
|
4300
|
-
],
|
|
4301
|
-
"exports": [
|
|
4302
|
-
{
|
|
4303
|
-
"kind": "js",
|
|
4304
|
-
"name": "default",
|
|
4305
|
-
"declaration": {
|
|
4306
|
-
"name": "ButtonGroup",
|
|
4307
|
-
"module": "components/buttongroup/buttongroup.component.js"
|
|
4308
|
-
}
|
|
4309
|
-
}
|
|
4310
|
-
]
|
|
4311
|
-
},
|
|
4312
4312
|
{
|
|
4313
4313
|
"kind": "javascript-module",
|
|
4314
4314
|
"path": "components/cardbutton/cardbutton.component.js",
|
|
@@ -6937,7 +6937,7 @@
|
|
|
6937
6937
|
"type": {
|
|
6938
6938
|
"text": "ColorType"
|
|
6939
6939
|
},
|
|
6940
|
-
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
|
|
6940
|
+
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
|
|
6941
6941
|
"default": "default",
|
|
6942
6942
|
"attribute": "color",
|
|
6943
6943
|
"reflects": true
|
|
@@ -7246,7 +7246,7 @@
|
|
|
7246
7246
|
"type": {
|
|
7247
7247
|
"text": "ColorType"
|
|
7248
7248
|
},
|
|
7249
|
-
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
|
|
7249
|
+
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
|
|
7250
7250
|
"default": "default",
|
|
7251
7251
|
"fieldName": "color"
|
|
7252
7252
|
},
|
|
@@ -10290,7 +10290,7 @@
|
|
|
10290
10290
|
"type": {
|
|
10291
10291
|
"text": "ColorType"
|
|
10292
10292
|
},
|
|
10293
|
-
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
|
|
10293
|
+
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
|
|
10294
10294
|
"default": "default",
|
|
10295
10295
|
"attribute": "color",
|
|
10296
10296
|
"reflects": true,
|
|
@@ -10610,7 +10610,7 @@
|
|
|
10610
10610
|
"type": {
|
|
10611
10611
|
"text": "ColorType"
|
|
10612
10612
|
},
|
|
10613
|
-
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
|
|
10613
|
+
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
|
|
10614
10614
|
"default": "default",
|
|
10615
10615
|
"fieldName": "color",
|
|
10616
10616
|
"inheritedFrom": {
|
package/dist/react/index.d.ts
CHANGED
|
@@ -7,10 +7,10 @@ export { default as Badge } from './badge';
|
|
|
7
7
|
export { default as Brandvisual } from './brandvisual';
|
|
8
8
|
export { default as Bullet } from './bullet';
|
|
9
9
|
export { default as Button } from './button';
|
|
10
|
+
export { default as ButtonGroup } from './buttongroup';
|
|
10
11
|
export { default as ButtonLink } from './buttonlink';
|
|
11
12
|
export { default as Buttonsimple } from './buttonsimple';
|
|
12
13
|
export { default as Card } from './card';
|
|
13
|
-
export { default as ButtonGroup } from './buttongroup';
|
|
14
14
|
export { default as CardButton } from './cardbutton';
|
|
15
15
|
export { default as CardCheckbox } from './cardcheckbox';
|
|
16
16
|
export { default as CardRadio } from './cardradio';
|
package/dist/react/index.js
CHANGED
|
@@ -7,10 +7,10 @@ export { default as Badge } from './badge';
|
|
|
7
7
|
export { default as Brandvisual } from './brandvisual';
|
|
8
8
|
export { default as Bullet } from './bullet';
|
|
9
9
|
export { default as Button } from './button';
|
|
10
|
+
export { default as ButtonGroup } from './buttongroup';
|
|
10
11
|
export { default as ButtonLink } from './buttonlink';
|
|
11
12
|
export { default as Buttonsimple } from './buttonsimple';
|
|
12
13
|
export { default as Card } from './card';
|
|
13
|
-
export { default as ButtonGroup } from './buttongroup';
|
|
14
14
|
export { default as CardButton } from './cardbutton';
|
|
15
15
|
export { default as CardCheckbox } from './cardcheckbox';
|
|
16
16
|
export { default as CardRadio } from './cardradio';
|
package/package.json
CHANGED