@momentum-design/components 0.101.2 → 0.101.3
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 +7 -3
- package/dist/browser/index.js.map +2 -2
- package/dist/components/buttongroup/buttongroup.component.js +1 -1
- package/dist/components/buttongroup/buttongroup.styles.js +6 -2
- package/dist/custom-elements.json +151 -151
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -67,7 +67,7 @@ class ButtonGroup extends Component {
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
|
|
70
|
+
return html `<div part="container"><slot @slotchange=${this.handleSlotChange}></slot></div>`;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
ButtonGroup.styles = [...Component.styles, ...styles];
|
|
@@ -5,24 +5,28 @@ const styles = css `
|
|
|
5
5
|
--mdc-buttongroup-border-radius: 1.25rem;
|
|
6
6
|
--mdc-buttongroup-border-color: var(--mds-color-theme-outline-button-normal);
|
|
7
7
|
--mdc-buttongroup-divider-color: var(--mds-color-theme-outline-secondary-normal);
|
|
8
|
+
}
|
|
8
9
|
|
|
10
|
+
:host::part(container) {
|
|
11
|
+
display: flex;
|
|
9
12
|
border-radius: var(--mdc-buttongroup-border-radius);
|
|
10
13
|
border: 1px solid var(--mdc-buttongroup-border-color);
|
|
11
14
|
}
|
|
12
15
|
|
|
13
|
-
:host([variant='primary']) {
|
|
16
|
+
:host([variant='primary'])::part(container) {
|
|
14
17
|
border: none;
|
|
15
18
|
background-color: var(--mds-color-theme-outline-primary-normal);
|
|
16
19
|
gap: 1px;
|
|
17
20
|
}
|
|
18
21
|
|
|
19
22
|
::slotted(mdc-button) {
|
|
23
|
+
width: inherit;
|
|
20
24
|
border-radius: 0;
|
|
21
25
|
border: none;
|
|
22
26
|
box-sizing: content-box;
|
|
23
27
|
}
|
|
24
28
|
|
|
25
|
-
:host([orientation='vertical']) {
|
|
29
|
+
:host([orientation='vertical'])::part(container) {
|
|
26
30
|
flex-direction: column;
|
|
27
31
|
}
|
|
28
32
|
|
|
@@ -477,6 +477,157 @@
|
|
|
477
477
|
}
|
|
478
478
|
]
|
|
479
479
|
},
|
|
480
|
+
{
|
|
481
|
+
"kind": "javascript-module",
|
|
482
|
+
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
483
|
+
"declarations": [
|
|
484
|
+
{
|
|
485
|
+
"kind": "class",
|
|
486
|
+
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
487
|
+
"name": "AccordionGroup",
|
|
488
|
+
"cssProperties": [
|
|
489
|
+
{
|
|
490
|
+
"description": "The border color of the entire accordiongroup",
|
|
491
|
+
"name": "--mdc-accordiongroup-border-color"
|
|
492
|
+
}
|
|
493
|
+
],
|
|
494
|
+
"slots": [
|
|
495
|
+
{
|
|
496
|
+
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
497
|
+
"name": "default"
|
|
498
|
+
}
|
|
499
|
+
],
|
|
500
|
+
"members": [
|
|
501
|
+
{
|
|
502
|
+
"kind": "field",
|
|
503
|
+
"name": "size",
|
|
504
|
+
"type": {
|
|
505
|
+
"text": "Size"
|
|
506
|
+
},
|
|
507
|
+
"description": "The size of the accordion item.",
|
|
508
|
+
"default": "'small'",
|
|
509
|
+
"attribute": "size",
|
|
510
|
+
"reflects": true
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"kind": "field",
|
|
514
|
+
"name": "variant",
|
|
515
|
+
"type": {
|
|
516
|
+
"text": "Variant"
|
|
517
|
+
},
|
|
518
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
519
|
+
"default": "'stacked'",
|
|
520
|
+
"attribute": "variant",
|
|
521
|
+
"reflects": true
|
|
522
|
+
},
|
|
523
|
+
{
|
|
524
|
+
"kind": "field",
|
|
525
|
+
"name": "allowMultiple",
|
|
526
|
+
"type": {
|
|
527
|
+
"text": "boolean"
|
|
528
|
+
},
|
|
529
|
+
"default": "false",
|
|
530
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
531
|
+
"attribute": "allow-multiple",
|
|
532
|
+
"reflects": true
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"kind": "method",
|
|
536
|
+
"name": "handleAccordionExpanded",
|
|
537
|
+
"privacy": "private",
|
|
538
|
+
"return": {
|
|
539
|
+
"type": {
|
|
540
|
+
"text": "void"
|
|
541
|
+
}
|
|
542
|
+
},
|
|
543
|
+
"parameters": [
|
|
544
|
+
{
|
|
545
|
+
"name": "event",
|
|
546
|
+
"type": {
|
|
547
|
+
"text": "Event"
|
|
548
|
+
},
|
|
549
|
+
"description": "The event object from the 'shown' event."
|
|
550
|
+
}
|
|
551
|
+
],
|
|
552
|
+
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"kind": "method",
|
|
556
|
+
"name": "setChildrenAccordionAttributes",
|
|
557
|
+
"privacy": "private",
|
|
558
|
+
"return": {
|
|
559
|
+
"type": {
|
|
560
|
+
"text": "void"
|
|
561
|
+
}
|
|
562
|
+
},
|
|
563
|
+
"parameters": [
|
|
564
|
+
{
|
|
565
|
+
"name": "attributeName",
|
|
566
|
+
"type": {
|
|
567
|
+
"text": "string"
|
|
568
|
+
},
|
|
569
|
+
"description": "The name of the attribute to set."
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"name": "attributeValue",
|
|
573
|
+
"type": {
|
|
574
|
+
"text": "string"
|
|
575
|
+
},
|
|
576
|
+
"description": "The value to set the attribute to."
|
|
577
|
+
}
|
|
578
|
+
],
|
|
579
|
+
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
580
|
+
}
|
|
581
|
+
],
|
|
582
|
+
"attributes": [
|
|
583
|
+
{
|
|
584
|
+
"name": "size",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "Size"
|
|
587
|
+
},
|
|
588
|
+
"description": "The size of the accordion item.",
|
|
589
|
+
"default": "'small'",
|
|
590
|
+
"fieldName": "size"
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"name": "variant",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "Variant"
|
|
596
|
+
},
|
|
597
|
+
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
598
|
+
"default": "'stacked'",
|
|
599
|
+
"fieldName": "variant"
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"name": "allow-multiple",
|
|
603
|
+
"type": {
|
|
604
|
+
"text": "boolean"
|
|
605
|
+
},
|
|
606
|
+
"default": "false",
|
|
607
|
+
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
608
|
+
"fieldName": "allowMultiple"
|
|
609
|
+
}
|
|
610
|
+
],
|
|
611
|
+
"superclass": {
|
|
612
|
+
"name": "Component",
|
|
613
|
+
"module": "/src/models"
|
|
614
|
+
},
|
|
615
|
+
"tagName": "mdc-accordiongroup",
|
|
616
|
+
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
617
|
+
"customElement": true
|
|
618
|
+
}
|
|
619
|
+
],
|
|
620
|
+
"exports": [
|
|
621
|
+
{
|
|
622
|
+
"kind": "js",
|
|
623
|
+
"name": "default",
|
|
624
|
+
"declaration": {
|
|
625
|
+
"name": "AccordionGroup",
|
|
626
|
+
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
627
|
+
}
|
|
628
|
+
}
|
|
629
|
+
]
|
|
630
|
+
},
|
|
480
631
|
{
|
|
481
632
|
"kind": "javascript-module",
|
|
482
633
|
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
@@ -817,157 +968,6 @@
|
|
|
817
968
|
}
|
|
818
969
|
]
|
|
819
970
|
},
|
|
820
|
-
{
|
|
821
|
-
"kind": "javascript-module",
|
|
822
|
-
"path": "components/accordiongroup/accordiongroup.component.js",
|
|
823
|
-
"declarations": [
|
|
824
|
-
{
|
|
825
|
-
"kind": "class",
|
|
826
|
-
"description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
|
|
827
|
-
"name": "AccordionGroup",
|
|
828
|
-
"cssProperties": [
|
|
829
|
-
{
|
|
830
|
-
"description": "The border color of the entire accordiongroup",
|
|
831
|
-
"name": "--mdc-accordiongroup-border-color"
|
|
832
|
-
}
|
|
833
|
-
],
|
|
834
|
-
"slots": [
|
|
835
|
-
{
|
|
836
|
-
"description": "The default slot can contain the `accordion` or `accordionbutton` components.",
|
|
837
|
-
"name": "default"
|
|
838
|
-
}
|
|
839
|
-
],
|
|
840
|
-
"members": [
|
|
841
|
-
{
|
|
842
|
-
"kind": "field",
|
|
843
|
-
"name": "size",
|
|
844
|
-
"type": {
|
|
845
|
-
"text": "Size"
|
|
846
|
-
},
|
|
847
|
-
"description": "The size of the accordion item.",
|
|
848
|
-
"default": "'small'",
|
|
849
|
-
"attribute": "size",
|
|
850
|
-
"reflects": true
|
|
851
|
-
},
|
|
852
|
-
{
|
|
853
|
-
"kind": "field",
|
|
854
|
-
"name": "variant",
|
|
855
|
-
"type": {
|
|
856
|
-
"text": "Variant"
|
|
857
|
-
},
|
|
858
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
859
|
-
"default": "'stacked'",
|
|
860
|
-
"attribute": "variant",
|
|
861
|
-
"reflects": true
|
|
862
|
-
},
|
|
863
|
-
{
|
|
864
|
-
"kind": "field",
|
|
865
|
-
"name": "allowMultiple",
|
|
866
|
-
"type": {
|
|
867
|
-
"text": "boolean"
|
|
868
|
-
},
|
|
869
|
-
"default": "false",
|
|
870
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
871
|
-
"attribute": "allow-multiple",
|
|
872
|
-
"reflects": true
|
|
873
|
-
},
|
|
874
|
-
{
|
|
875
|
-
"kind": "method",
|
|
876
|
-
"name": "handleAccordionExpanded",
|
|
877
|
-
"privacy": "private",
|
|
878
|
-
"return": {
|
|
879
|
-
"type": {
|
|
880
|
-
"text": "void"
|
|
881
|
-
}
|
|
882
|
-
},
|
|
883
|
-
"parameters": [
|
|
884
|
-
{
|
|
885
|
-
"name": "event",
|
|
886
|
-
"type": {
|
|
887
|
-
"text": "Event"
|
|
888
|
-
},
|
|
889
|
-
"description": "The event object from the 'shown' event."
|
|
890
|
-
}
|
|
891
|
-
],
|
|
892
|
-
"description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
|
|
893
|
-
},
|
|
894
|
-
{
|
|
895
|
-
"kind": "method",
|
|
896
|
-
"name": "setChildrenAccordionAttributes",
|
|
897
|
-
"privacy": "private",
|
|
898
|
-
"return": {
|
|
899
|
-
"type": {
|
|
900
|
-
"text": "void"
|
|
901
|
-
}
|
|
902
|
-
},
|
|
903
|
-
"parameters": [
|
|
904
|
-
{
|
|
905
|
-
"name": "attributeName",
|
|
906
|
-
"type": {
|
|
907
|
-
"text": "string"
|
|
908
|
-
},
|
|
909
|
-
"description": "The name of the attribute to set."
|
|
910
|
-
},
|
|
911
|
-
{
|
|
912
|
-
"name": "attributeValue",
|
|
913
|
-
"type": {
|
|
914
|
-
"text": "string"
|
|
915
|
-
},
|
|
916
|
-
"description": "The value to set the attribute to."
|
|
917
|
-
}
|
|
918
|
-
],
|
|
919
|
-
"description": "Sets the given attribute on all child accordion or accordionbutton components."
|
|
920
|
-
}
|
|
921
|
-
],
|
|
922
|
-
"attributes": [
|
|
923
|
-
{
|
|
924
|
-
"name": "size",
|
|
925
|
-
"type": {
|
|
926
|
-
"text": "Size"
|
|
927
|
-
},
|
|
928
|
-
"description": "The size of the accordion item.",
|
|
929
|
-
"default": "'small'",
|
|
930
|
-
"fieldName": "size"
|
|
931
|
-
},
|
|
932
|
-
{
|
|
933
|
-
"name": "variant",
|
|
934
|
-
"type": {
|
|
935
|
-
"text": "Variant"
|
|
936
|
-
},
|
|
937
|
-
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
938
|
-
"default": "'stacked'",
|
|
939
|
-
"fieldName": "variant"
|
|
940
|
-
},
|
|
941
|
-
{
|
|
942
|
-
"name": "allow-multiple",
|
|
943
|
-
"type": {
|
|
944
|
-
"text": "boolean"
|
|
945
|
-
},
|
|
946
|
-
"default": "false",
|
|
947
|
-
"description": "If true, multiple accordion items can be visible at the same time.",
|
|
948
|
-
"fieldName": "allowMultiple"
|
|
949
|
-
}
|
|
950
|
-
],
|
|
951
|
-
"superclass": {
|
|
952
|
-
"name": "Component",
|
|
953
|
-
"module": "/src/models"
|
|
954
|
-
},
|
|
955
|
-
"tagName": "mdc-accordiongroup",
|
|
956
|
-
"jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
|
|
957
|
-
"customElement": true
|
|
958
|
-
}
|
|
959
|
-
],
|
|
960
|
-
"exports": [
|
|
961
|
-
{
|
|
962
|
-
"kind": "js",
|
|
963
|
-
"name": "default",
|
|
964
|
-
"declaration": {
|
|
965
|
-
"name": "AccordionGroup",
|
|
966
|
-
"module": "components/accordiongroup/accordiongroup.component.js"
|
|
967
|
-
}
|
|
968
|
-
}
|
|
969
|
-
]
|
|
970
|
-
},
|
|
971
971
|
{
|
|
972
972
|
"kind": "javascript-module",
|
|
973
973
|
"path": "components/alertchip/alertchip.component.js",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as Accordion } from './accordion';
|
|
2
|
-
export { default as AccordionButton } from './accordionbutton';
|
|
3
2
|
export { default as AccordionGroup } from './accordiongroup';
|
|
3
|
+
export { default as AccordionButton } from './accordionbutton';
|
|
4
4
|
export { default as AlertChip } from './alertchip';
|
|
5
5
|
export { default as Animation } from './animation';
|
|
6
6
|
export { default as Appheader } from './appheader';
|
package/dist/react/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as Accordion } from './accordion';
|
|
2
|
-
export { default as AccordionButton } from './accordionbutton';
|
|
3
2
|
export { default as AccordionGroup } from './accordiongroup';
|
|
3
|
+
export { default as AccordionButton } from './accordionbutton';
|
|
4
4
|
export { default as AlertChip } from './alertchip';
|
|
5
5
|
export { default as Animation } from './animation';
|
|
6
6
|
export { default as Appheader } from './appheader';
|