@viasat/beam-web-components 2.55.2 → 2.56.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.
Files changed (3) hide show
  1. package/custom-elements.json +597 -597
  2. package/package.json +6 -6
  3. package/vscode.html-custom-data.json +164 -164
package/custom-elements.json CHANGED
@@ -730,508 +730,524 @@
730
730
  },
731
731
  {
732
732
  "kind": "javascript-module",
733
- "path": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts",
733
+ "path": "libs/web-components/src/lib/Box/Box.ts",
734
734
  "declarations": [
735
735
  {
736
736
  "kind": "class",
737
- "description": "`bm-badge-dot`\n\n### Attributes:\n- **theme** - Specify the theme of the BadgeDot. By default it inherits the theme from the parent\n- **appearance** - Specify the appearance of the BadgeDot\n- **emphasis** - Specify the emphasis of the BadgeDot\n- **overrideDotColor** - Overrides default dot color",
738
- "name": "BmBadgeDot",
737
+ "description": "`bm-box`\n\n### Attributes:\n- **backgroundColor** - Specify the background color of a Box\n- **borderColor** - Specify the border color of a Box\n- **borderWidth** - Specify the border width of a Box\n- **borderRadius** - Specify the border radius of a Box\n- **px** - Specify before and after padding of a Box\n- **py** - Specify top and bottom padding of a Box\n- **pTop** - Specify top padding of a Box\n- **pBottom** - Specify bottom padding of a Box\n- **pBefore** - Specify before padding of a Box\n- **pAfter** - Specify after padding of a Box\n- **mx** - Specify before and after margin of a Box\n- **my** - Specify top and bottom margin of a Box\n- **mTop** - Specify top margin of a Box\n- **mBottom** - Specify bottom margin of a Box\n- **mBefore** - Specify before margin of a Box\n- **mAfter** - Specify after margin of a Box\n- **m** - Specify all margin\n- **p** - Specify all padding\n- **gap** - Specify gap between child elements\n- **shadow** - Specify if a Box has a shadow",
738
+ "name": "BmBox",
739
739
  "slots": [
740
740
  {
741
- "description": "Provide text for the BadgeDot",
741
+ "description": "Provide content for the Box",
742
742
  "name": "default"
743
743
  }
744
744
  ],
745
745
  "members": [
746
746
  {
747
747
  "kind": "field",
748
- "name": "theme",
748
+ "name": "backgroundColor",
749
749
  "type": {
750
- "text": "'light' | 'dark' | undefined"
750
+ "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
751
751
  },
752
- "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
753
- "attribute": "theme"
752
+ "description": "Specify the background color of a Box",
753
+ "attribute": "backgroundColor"
754
754
  },
755
755
  {
756
756
  "kind": "field",
757
- "name": "appearance",
757
+ "name": "borderColor",
758
758
  "type": {
759
- "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
759
+ "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
760
760
  },
761
- "default": "'infoPrimary'",
762
- "description": "Specify the appearance of the BadgeDot",
763
- "attribute": "appearance"
761
+ "description": "Specify the border color of a Box",
762
+ "attribute": "borderColor"
764
763
  },
765
764
  {
766
765
  "kind": "field",
767
- "name": "emphasis",
766
+ "name": "borderWidth",
768
767
  "type": {
769
- "text": "'strong' | 'subtle'"
768
+ "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
770
769
  },
771
- "default": "'strong'",
772
- "description": "Specify the emphasis of the BadgeDot",
773
- "attribute": "emphasis"
770
+ "description": "Specify the border width of a Box",
771
+ "attribute": "borderWidth"
774
772
  },
775
773
  {
776
774
  "kind": "field",
777
- "name": "overrideDotColor",
775
+ "name": "borderRadius",
778
776
  "type": {
779
- "text": "string | undefined"
777
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
780
778
  },
781
- "description": "Overrides default dot color",
782
- "attribute": "overrideDotColor"
783
- }
784
- ],
785
- "attributes": [
779
+ "description": "Specify the border radius of a Box",
780
+ "attribute": "borderRadius"
781
+ },
786
782
  {
787
- "name": "theme",
783
+ "kind": "field",
784
+ "name": "px",
788
785
  "type": {
789
- "text": "'light' | 'dark' | undefined"
786
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
790
787
  },
791
- "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
792
- "fieldName": "theme"
788
+ "description": "Specify before and after padding of a Box",
789
+ "attribute": "px"
793
790
  },
794
791
  {
795
- "name": "appearance",
792
+ "kind": "field",
793
+ "name": "py",
796
794
  "type": {
797
- "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
795
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
798
796
  },
799
- "default": "'infoPrimary'",
800
- "description": "Specify the appearance of the BadgeDot",
801
- "fieldName": "appearance"
797
+ "description": "Specify top and bottom padding of a Box",
798
+ "attribute": "py"
802
799
  },
803
800
  {
804
- "name": "emphasis",
801
+ "kind": "field",
802
+ "name": "pTop",
805
803
  "type": {
806
- "text": "'strong' | 'subtle'"
804
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
807
805
  },
808
- "default": "'strong'",
809
- "description": "Specify the emphasis of the BadgeDot",
810
- "fieldName": "emphasis"
806
+ "description": "Specify top padding of a Box",
807
+ "attribute": "pTop"
811
808
  },
812
809
  {
813
- "name": "overrideDotColor",
810
+ "kind": "field",
811
+ "name": "pBottom",
814
812
  "type": {
815
- "text": "string | undefined"
813
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
816
814
  },
817
- "description": "Overrides default dot color",
818
- "fieldName": "overrideDotColor"
819
- }
820
- ],
821
- "superclass": {
822
- "name": "LitElement",
823
- "package": "lit"
824
- },
825
- "tagName": "bm-badge-dot",
826
- "customElement": true
827
- }
828
- ],
829
- "exports": [
830
- {
831
- "kind": "js",
832
- "name": "BmBadgeDot",
833
- "declaration": {
834
- "name": "BmBadgeDot",
835
- "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
836
- }
837
- },
838
- {
839
- "kind": "custom-element-definition",
840
- "name": "bm-badge-dot",
841
- "declaration": {
842
- "name": "BmBadgeDot",
843
- "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
844
- }
845
- }
846
- ]
847
- },
848
- {
849
- "kind": "javascript-module",
850
- "path": "libs/web-components/src/lib/BadgeDot/index.ts",
851
- "declarations": [],
852
- "exports": [
853
- {
854
- "kind": "js",
855
- "name": "*",
856
- "declaration": {
857
- "name": "*",
858
- "package": "./BadgeDot"
859
- }
860
- }
861
- ]
862
- },
863
- {
864
- "kind": "javascript-module",
865
- "path": "libs/web-components/src/lib/Avatar/Avatar.ts",
866
- "declarations": [
867
- {
868
- "kind": "class",
869
- "description": "`bm-avatar`\n\n### Attributes:\n- **appearance** - Specify the appearance of the Avatar\n- **name** - Specify a name to display initials in the Avatar\n- **src** - Pass an image to the Avatar\n- **alt** - Specify alt for image\n- **size** - Specify the size of the Avatar\n- **disabled** - Specify if the Avatar is disabled\n- **shape** - Specify the shape of the Avatar\n- **isInteractive** - If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer\n- **isFocusable** - If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable\n- **withBorder** ",
870
- "name": "BmAvatar",
871
- "slots": [
815
+ "description": "Specify bottom padding of a Box",
816
+ "attribute": "pBottom"
817
+ },
872
818
  {
873
- "description": "Customize the default icon",
874
- "name": "icon"
875
- }
876
- ],
877
- "members": [
819
+ "kind": "field",
820
+ "name": "pBefore",
821
+ "type": {
822
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
823
+ },
824
+ "description": "Specify before padding of a Box",
825
+ "attribute": "pBefore"
826
+ },
878
827
  {
879
828
  "kind": "field",
880
- "name": "appearance",
829
+ "name": "pAfter",
881
830
  "type": {
882
- "text": "'accent' | 'neutral' | undefined"
831
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
883
832
  },
884
- "default": "'neutral'",
885
- "description": "Specify the appearance of the Avatar",
886
- "attribute": "appearance"
833
+ "description": "Specify after padding of a Box",
834
+ "attribute": "pAfter"
887
835
  },
888
836
  {
889
837
  "kind": "field",
890
- "name": "name",
838
+ "name": "mx",
891
839
  "type": {
892
- "text": "string | undefined"
840
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
893
841
  },
894
- "description": "Specify a name to display initials in the Avatar",
895
- "attribute": "name"
842
+ "description": "Specify before and after margin of a Box",
843
+ "attribute": "mx"
896
844
  },
897
845
  {
898
846
  "kind": "field",
899
- "name": "src",
847
+ "name": "my",
900
848
  "type": {
901
- "text": "string | undefined"
849
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
902
850
  },
903
- "description": "Pass an image to the Avatar",
904
- "attribute": "src"
851
+ "description": "Specify top and bottom margin of a Box",
852
+ "attribute": "my"
905
853
  },
906
854
  {
907
855
  "kind": "field",
908
- "name": "alt",
856
+ "name": "mTop",
909
857
  "type": {
910
- "text": "string | undefined"
858
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
911
859
  },
912
- "description": "Specify alt for image",
913
- "attribute": "alt"
860
+ "description": "Specify top margin of a Box",
861
+ "attribute": "mTop"
914
862
  },
915
863
  {
916
864
  "kind": "field",
917
- "name": "size",
865
+ "name": "mBottom",
918
866
  "type": {
919
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined"
867
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
920
868
  },
921
- "default": "'md'",
922
- "description": "Specify the size of the Avatar",
923
- "attribute": "size"
869
+ "description": "Specify bottom margin of a Box",
870
+ "attribute": "mBottom"
924
871
  },
925
872
  {
926
873
  "kind": "field",
927
- "name": "disabled",
874
+ "name": "mBefore",
928
875
  "type": {
929
- "text": "boolean | undefined"
876
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
930
877
  },
931
- "default": "false",
932
- "description": "Specify if the Avatar is disabled",
933
- "attribute": "disabled"
878
+ "description": "Specify before margin of a Box",
879
+ "attribute": "mBefore"
934
880
  },
935
881
  {
936
882
  "kind": "field",
937
- "name": "shape",
883
+ "name": "mAfter",
938
884
  "type": {
939
- "text": "'circle' | 'square' | undefined"
885
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
940
886
  },
941
- "default": "'circle'",
942
- "description": "Specify the shape of the Avatar",
943
- "attribute": "shape"
887
+ "description": "Specify after margin of a Box",
888
+ "attribute": "mAfter"
944
889
  },
945
890
  {
946
891
  "kind": "field",
947
- "name": "isInteractive",
892
+ "name": "m",
948
893
  "type": {
949
- "text": "boolean"
894
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
950
895
  },
951
- "default": "false",
952
- "description": "If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer",
953
- "attribute": "isInteractive"
896
+ "description": "Specify all margin",
897
+ "attribute": "m"
954
898
  },
955
899
  {
956
900
  "kind": "field",
957
- "name": "isFocusable",
901
+ "name": "p",
958
902
  "type": {
959
- "text": "boolean"
903
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
960
904
  },
961
- "default": "false",
962
- "description": "If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable",
963
- "attribute": "isFocusable"
905
+ "description": "Specify all padding",
906
+ "attribute": "p"
964
907
  },
965
908
  {
966
909
  "kind": "field",
967
- "name": "withBorder",
910
+ "name": "gap",
968
911
  "type": {
969
- "text": "boolean"
912
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
970
913
  },
971
- "default": "false",
972
- "attribute": "withBorder"
914
+ "description": "Specify gap between child elements",
915
+ "attribute": "gap"
916
+ },
917
+ {
918
+ "kind": "field",
919
+ "name": "shadow",
920
+ "type": {
921
+ "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
922
+ },
923
+ "description": "Specify if a Box has a shadow",
924
+ "attribute": "shadow"
973
925
  }
974
926
  ],
975
927
  "attributes": [
976
928
  {
977
- "name": "appearance",
929
+ "name": "backgroundColor",
978
930
  "type": {
979
- "text": "'accent' | 'neutral' | undefined"
931
+ "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
980
932
  },
981
- "default": "'neutral'",
982
- "description": "Specify the appearance of the Avatar",
983
- "fieldName": "appearance"
933
+ "description": "Specify the background color of a Box",
934
+ "fieldName": "backgroundColor"
984
935
  },
985
936
  {
986
- "name": "name",
937
+ "name": "borderColor",
987
938
  "type": {
988
- "text": "string | undefined"
939
+ "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
989
940
  },
990
- "description": "Specify a name to display initials in the Avatar",
991
- "fieldName": "name"
941
+ "description": "Specify the border color of a Box",
942
+ "fieldName": "borderColor"
992
943
  },
993
944
  {
994
- "name": "src",
945
+ "name": "borderWidth",
995
946
  "type": {
996
- "text": "string | undefined"
947
+ "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
997
948
  },
998
- "description": "Pass an image to the Avatar",
999
- "fieldName": "src"
949
+ "description": "Specify the border width of a Box",
950
+ "fieldName": "borderWidth"
1000
951
  },
1001
952
  {
1002
- "name": "alt",
953
+ "name": "borderRadius",
1003
954
  "type": {
1004
- "text": "string | undefined"
955
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
1005
956
  },
1006
- "description": "Specify alt for image",
1007
- "fieldName": "alt"
957
+ "description": "Specify the border radius of a Box",
958
+ "fieldName": "borderRadius"
1008
959
  },
1009
960
  {
1010
- "name": "size",
961
+ "name": "px",
1011
962
  "type": {
1012
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined"
963
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1013
964
  },
1014
- "default": "'md'",
1015
- "description": "Specify the size of the Avatar",
1016
- "fieldName": "size"
965
+ "description": "Specify before and after padding of a Box",
966
+ "fieldName": "px"
1017
967
  },
1018
968
  {
1019
- "name": "disabled",
969
+ "name": "py",
1020
970
  "type": {
1021
- "text": "boolean | undefined"
971
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1022
972
  },
1023
- "default": "false",
1024
- "description": "Specify if the Avatar is disabled",
1025
- "fieldName": "disabled"
973
+ "description": "Specify top and bottom padding of a Box",
974
+ "fieldName": "py"
1026
975
  },
1027
976
  {
1028
- "name": "shape",
977
+ "name": "pTop",
1029
978
  "type": {
1030
- "text": "'circle' | 'square' | undefined"
979
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1031
980
  },
1032
- "default": "'circle'",
1033
- "description": "Specify the shape of the Avatar",
1034
- "fieldName": "shape"
981
+ "description": "Specify top padding of a Box",
982
+ "fieldName": "pTop"
1035
983
  },
1036
984
  {
1037
- "name": "isInteractive",
985
+ "name": "pBottom",
1038
986
  "type": {
1039
- "text": "boolean"
987
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1040
988
  },
1041
- "default": "false",
1042
- "description": "If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer",
1043
- "fieldName": "isInteractive"
989
+ "description": "Specify bottom padding of a Box",
990
+ "fieldName": "pBottom"
1044
991
  },
1045
992
  {
1046
- "name": "isFocusable",
993
+ "name": "pBefore",
1047
994
  "type": {
1048
- "text": "boolean"
995
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1049
996
  },
1050
- "default": "false",
1051
- "description": "If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable",
1052
- "fieldName": "isFocusable"
997
+ "description": "Specify before padding of a Box",
998
+ "fieldName": "pBefore"
1053
999
  },
1054
1000
  {
1055
- "name": "withBorder",
1001
+ "name": "pAfter",
1056
1002
  "type": {
1057
- "text": "boolean"
1003
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1058
1004
  },
1059
- "default": "false",
1060
- "fieldName": "withBorder"
1005
+ "description": "Specify after padding of a Box",
1006
+ "fieldName": "pAfter"
1007
+ },
1008
+ {
1009
+ "name": "mx",
1010
+ "type": {
1011
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1012
+ },
1013
+ "description": "Specify before and after margin of a Box",
1014
+ "fieldName": "mx"
1015
+ },
1016
+ {
1017
+ "name": "my",
1018
+ "type": {
1019
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1020
+ },
1021
+ "description": "Specify top and bottom margin of a Box",
1022
+ "fieldName": "my"
1023
+ },
1024
+ {
1025
+ "name": "mTop",
1026
+ "type": {
1027
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1028
+ },
1029
+ "description": "Specify top margin of a Box",
1030
+ "fieldName": "mTop"
1031
+ },
1032
+ {
1033
+ "name": "mBottom",
1034
+ "type": {
1035
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1036
+ },
1037
+ "description": "Specify bottom margin of a Box",
1038
+ "fieldName": "mBottom"
1039
+ },
1040
+ {
1041
+ "name": "mBefore",
1042
+ "type": {
1043
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1044
+ },
1045
+ "description": "Specify before margin of a Box",
1046
+ "fieldName": "mBefore"
1047
+ },
1048
+ {
1049
+ "name": "mAfter",
1050
+ "type": {
1051
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1052
+ },
1053
+ "description": "Specify after margin of a Box",
1054
+ "fieldName": "mAfter"
1055
+ },
1056
+ {
1057
+ "name": "m",
1058
+ "type": {
1059
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1060
+ },
1061
+ "description": "Specify all margin",
1062
+ "fieldName": "m"
1063
+ },
1064
+ {
1065
+ "name": "p",
1066
+ "type": {
1067
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1068
+ },
1069
+ "description": "Specify all padding",
1070
+ "fieldName": "p"
1071
+ },
1072
+ {
1073
+ "name": "gap",
1074
+ "type": {
1075
+ "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1076
+ },
1077
+ "description": "Specify gap between child elements",
1078
+ "fieldName": "gap"
1079
+ },
1080
+ {
1081
+ "name": "shadow",
1082
+ "type": {
1083
+ "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
1084
+ },
1085
+ "description": "Specify if a Box has a shadow",
1086
+ "fieldName": "shadow"
1061
1087
  }
1062
1088
  ],
1063
1089
  "superclass": {
1064
1090
  "name": "LitElement",
1065
1091
  "package": "lit"
1066
1092
  },
1067
- "tagName": "bm-avatar",
1093
+ "tagName": "bm-box",
1068
1094
  "customElement": true
1069
1095
  }
1070
1096
  ],
1071
1097
  "exports": [
1072
1098
  {
1073
1099
  "kind": "js",
1074
- "name": "BmAvatar",
1100
+ "name": "BmBox",
1075
1101
  "declaration": {
1076
- "name": "BmAvatar",
1077
- "module": "libs/web-components/src/lib/Avatar/Avatar.ts"
1102
+ "name": "BmBox",
1103
+ "module": "libs/web-components/src/lib/Box/Box.ts"
1078
1104
  }
1079
1105
  },
1080
1106
  {
1081
1107
  "kind": "custom-element-definition",
1082
- "name": "bm-avatar",
1108
+ "name": "bm-box",
1083
1109
  "declaration": {
1084
- "name": "BmAvatar",
1085
- "module": "libs/web-components/src/lib/Avatar/Avatar.ts"
1110
+ "name": "BmBox",
1111
+ "module": "libs/web-components/src/lib/Box/Box.ts"
1086
1112
  }
1087
1113
  }
1088
1114
  ]
1089
1115
  },
1090
1116
  {
1091
1117
  "kind": "javascript-module",
1092
- "path": "libs/web-components/src/lib/Avatar/AvatarGroup.context.ts",
1093
- "declarations": [
1094
- {
1095
- "kind": "variable",
1096
- "name": "AvatarGroupCtx"
1097
- }
1098
- ],
1118
+ "path": "libs/web-components/src/lib/Box/index.ts",
1119
+ "declarations": [],
1099
1120
  "exports": [
1100
1121
  {
1101
1122
  "kind": "js",
1102
- "name": "AvatarGroupCtx",
1123
+ "name": "*",
1103
1124
  "declaration": {
1104
- "name": "AvatarGroupCtx",
1105
- "module": "libs/web-components/src/lib/Avatar/AvatarGroup.context.ts"
1125
+ "name": "*",
1126
+ "package": "./Box"
1106
1127
  }
1107
1128
  }
1108
1129
  ]
1109
1130
  },
1110
1131
  {
1111
1132
  "kind": "javascript-module",
1112
- "path": "libs/web-components/src/lib/Avatar/AvatarGroup.ts",
1133
+ "path": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts",
1113
1134
  "declarations": [
1114
1135
  {
1115
1136
  "kind": "class",
1116
- "description": "`bm-avatar-group`\n\n### Attributes:\n- **wrapping** - Specify if the AvatarGroup wraps\n- **maxCount** - Specify the max number of avatars displayed in the group.\n- **size** - Specify the size of all Avatars\n- **layout** - Specify the kind of the group.",
1117
- "name": "BmAvatarGroup",
1137
+ "description": "`bm-badge-dot`\n\n### Attributes:\n- **theme** - Specify the theme of the BadgeDot. By default it inherits the theme from the parent\n- **appearance** - Specify the appearance of the BadgeDot\n- **emphasis** - Specify the emphasis of the BadgeDot\n- **overrideDotColor** - Overrides default dot color",
1138
+ "name": "BmBadgeDot",
1118
1139
  "slots": [
1119
1140
  {
1120
- "description": "Add Avatars to create a group",
1141
+ "description": "Provide text for the BadgeDot",
1121
1142
  "name": "default"
1122
1143
  }
1123
1144
  ],
1124
1145
  "members": [
1125
1146
  {
1126
1147
  "kind": "field",
1127
- "name": "wrapping",
1148
+ "name": "theme",
1128
1149
  "type": {
1129
- "text": "boolean"
1150
+ "text": "'light' | 'dark' | undefined"
1130
1151
  },
1131
- "default": "false",
1132
- "description": "Specify if the AvatarGroup wraps",
1133
- "attribute": "wrapping"
1152
+ "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
1153
+ "attribute": "theme"
1134
1154
  },
1135
1155
  {
1136
1156
  "kind": "field",
1137
- "name": "maxCount",
1157
+ "name": "appearance",
1138
1158
  "type": {
1139
- "text": "number"
1159
+ "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
1140
1160
  },
1141
- "default": "5",
1142
- "description": "Specify the max number of avatars displayed in the group.",
1143
- "attribute": "maxCount",
1144
- "reflects": true
1161
+ "default": "'infoPrimary'",
1162
+ "description": "Specify the appearance of the BadgeDot",
1163
+ "attribute": "appearance"
1145
1164
  },
1146
1165
  {
1147
1166
  "kind": "field",
1148
- "name": "size",
1167
+ "name": "emphasis",
1149
1168
  "type": {
1150
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
1169
+ "text": "'strong' | 'subtle'"
1151
1170
  },
1152
- "default": "'md'",
1153
- "description": "Specify the size of all Avatars",
1154
- "attribute": "size"
1171
+ "default": "'strong'",
1172
+ "description": "Specify the emphasis of the BadgeDot",
1173
+ "attribute": "emphasis"
1155
1174
  },
1156
1175
  {
1157
1176
  "kind": "field",
1158
- "name": "layout",
1177
+ "name": "overrideDotColor",
1159
1178
  "type": {
1160
- "text": "'stacked' | 'spaced' | undefined"
1179
+ "text": "string | undefined"
1161
1180
  },
1162
- "default": "'stacked'",
1163
- "description": "Specify the kind of the group.",
1164
- "attribute": "layout"
1181
+ "description": "Overrides default dot color",
1182
+ "attribute": "overrideDotColor"
1165
1183
  }
1166
1184
  ],
1167
1185
  "attributes": [
1168
1186
  {
1169
- "name": "wrapping",
1187
+ "name": "theme",
1170
1188
  "type": {
1171
- "text": "boolean"
1189
+ "text": "'light' | 'dark' | undefined"
1172
1190
  },
1173
- "default": "false",
1174
- "description": "Specify if the AvatarGroup wraps",
1175
- "fieldName": "wrapping"
1191
+ "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
1192
+ "fieldName": "theme"
1176
1193
  },
1177
1194
  {
1178
- "name": "maxCount",
1195
+ "name": "appearance",
1179
1196
  "type": {
1180
- "text": "number"
1197
+ "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
1181
1198
  },
1182
- "default": "5",
1183
- "description": "Specify the max number of avatars displayed in the group.",
1184
- "fieldName": "maxCount"
1199
+ "default": "'infoPrimary'",
1200
+ "description": "Specify the appearance of the BadgeDot",
1201
+ "fieldName": "appearance"
1185
1202
  },
1186
1203
  {
1187
- "name": "size",
1204
+ "name": "emphasis",
1188
1205
  "type": {
1189
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
1206
+ "text": "'strong' | 'subtle'"
1190
1207
  },
1191
- "default": "'md'",
1192
- "description": "Specify the size of all Avatars",
1193
- "fieldName": "size"
1208
+ "default": "'strong'",
1209
+ "description": "Specify the emphasis of the BadgeDot",
1210
+ "fieldName": "emphasis"
1194
1211
  },
1195
1212
  {
1196
- "name": "layout",
1213
+ "name": "overrideDotColor",
1197
1214
  "type": {
1198
- "text": "'stacked' | 'spaced' | undefined"
1215
+ "text": "string | undefined"
1199
1216
  },
1200
- "default": "'stacked'",
1201
- "description": "Specify the kind of the group.",
1202
- "fieldName": "layout"
1217
+ "description": "Overrides default dot color",
1218
+ "fieldName": "overrideDotColor"
1203
1219
  }
1204
1220
  ],
1205
1221
  "superclass": {
1206
1222
  "name": "LitElement",
1207
1223
  "package": "lit"
1208
1224
  },
1209
- "tagName": "bm-avatar-group",
1225
+ "tagName": "bm-badge-dot",
1210
1226
  "customElement": true
1211
1227
  }
1212
1228
  ],
1213
1229
  "exports": [
1214
1230
  {
1215
1231
  "kind": "js",
1216
- "name": "BmAvatarGroup",
1232
+ "name": "BmBadgeDot",
1217
1233
  "declaration": {
1218
- "name": "BmAvatarGroup",
1219
- "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
1234
+ "name": "BmBadgeDot",
1235
+ "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
1220
1236
  }
1221
1237
  },
1222
1238
  {
1223
1239
  "kind": "custom-element-definition",
1224
- "name": "bm-avatar-group",
1240
+ "name": "bm-badge-dot",
1225
1241
  "declaration": {
1226
- "name": "BmAvatarGroup",
1227
- "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
1242
+ "name": "BmBadgeDot",
1243
+ "module": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts"
1228
1244
  }
1229
1245
  }
1230
1246
  ]
1231
1247
  },
1232
1248
  {
1233
1249
  "kind": "javascript-module",
1234
- "path": "libs/web-components/src/lib/Avatar/index.ts",
1250
+ "path": "libs/web-components/src/lib/BadgeDot/index.ts",
1235
1251
  "declarations": [],
1236
1252
  "exports": [
1237
1253
  {
@@ -1239,407 +1255,383 @@
1239
1255
  "name": "*",
1240
1256
  "declaration": {
1241
1257
  "name": "*",
1242
- "package": "./Avatar"
1243
- }
1244
- },
1245
- {
1246
- "kind": "js",
1247
- "name": "*",
1248
- "declaration": {
1249
- "name": "*",
1250
- "package": "./AvatarGroup"
1258
+ "package": "./BadgeDot"
1251
1259
  }
1252
1260
  }
1253
1261
  ]
1254
1262
  },
1255
1263
  {
1256
1264
  "kind": "javascript-module",
1257
- "path": "libs/web-components/src/lib/Box/Box.ts",
1265
+ "path": "libs/web-components/src/lib/Avatar/Avatar.ts",
1258
1266
  "declarations": [
1259
1267
  {
1260
1268
  "kind": "class",
1261
- "description": "`bm-box`\n\n### Attributes:\n- **backgroundColor** - Specify the background color of a Box\n- **borderColor** - Specify the border color of a Box\n- **borderWidth** - Specify the border width of a Box\n- **borderRadius** - Specify the border radius of a Box\n- **px** - Specify before and after padding of a Box\n- **py** - Specify top and bottom padding of a Box\n- **pTop** - Specify top padding of a Box\n- **pBottom** - Specify bottom padding of a Box\n- **pBefore** - Specify before padding of a Box\n- **pAfter** - Specify after padding of a Box\n- **mx** - Specify before and after margin of a Box\n- **my** - Specify top and bottom margin of a Box\n- **mTop** - Specify top margin of a Box\n- **mBottom** - Specify bottom margin of a Box\n- **mBefore** - Specify before margin of a Box\n- **mAfter** - Specify after margin of a Box\n- **m** - Specify all margin\n- **p** - Specify all padding\n- **gap** - Specify gap between child elements\n- **shadow** - Specify if a Box has a shadow",
1262
- "name": "BmBox",
1269
+ "description": "`bm-avatar`\n\n### Attributes:\n- **appearance** - Specify the appearance of the Avatar\n- **name** - Specify a name to display initials in the Avatar\n- **src** - Pass an image to the Avatar\n- **alt** - Specify alt for image\n- **size** - Specify the size of the Avatar\n- **disabled** - Specify if the Avatar is disabled\n- **shape** - Specify the shape of the Avatar\n- **isInteractive** - If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer\n- **isFocusable** - If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable\n- **withBorder** ",
1270
+ "name": "BmAvatar",
1263
1271
  "slots": [
1264
1272
  {
1265
- "description": "Provide content for the Box",
1266
- "name": "default"
1273
+ "description": "Customize the default icon",
1274
+ "name": "icon"
1267
1275
  }
1268
1276
  ],
1269
1277
  "members": [
1270
1278
  {
1271
1279
  "kind": "field",
1272
- "name": "backgroundColor",
1273
- "type": {
1274
- "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
1275
- },
1276
- "description": "Specify the background color of a Box",
1277
- "attribute": "backgroundColor"
1278
- },
1279
- {
1280
- "kind": "field",
1281
- "name": "borderColor",
1282
- "type": {
1283
- "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
1284
- },
1285
- "description": "Specify the border color of a Box",
1286
- "attribute": "borderColor"
1287
- },
1288
- {
1289
- "kind": "field",
1290
- "name": "borderWidth",
1291
- "type": {
1292
- "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
1293
- },
1294
- "description": "Specify the border width of a Box",
1295
- "attribute": "borderWidth"
1296
- },
1297
- {
1298
- "kind": "field",
1299
- "name": "borderRadius",
1300
- "type": {
1301
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
1302
- },
1303
- "description": "Specify the border radius of a Box",
1304
- "attribute": "borderRadius"
1305
- },
1306
- {
1307
- "kind": "field",
1308
- "name": "px",
1309
- "type": {
1310
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1311
- },
1312
- "description": "Specify before and after padding of a Box",
1313
- "attribute": "px"
1314
- },
1315
- {
1316
- "kind": "field",
1317
- "name": "py",
1318
- "type": {
1319
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1320
- },
1321
- "description": "Specify top and bottom padding of a Box",
1322
- "attribute": "py"
1323
- },
1324
- {
1325
- "kind": "field",
1326
- "name": "pTop",
1327
- "type": {
1328
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1329
- },
1330
- "description": "Specify top padding of a Box",
1331
- "attribute": "pTop"
1332
- },
1333
- {
1334
- "kind": "field",
1335
- "name": "pBottom",
1336
- "type": {
1337
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1338
- },
1339
- "description": "Specify bottom padding of a Box",
1340
- "attribute": "pBottom"
1341
- },
1342
- {
1343
- "kind": "field",
1344
- "name": "pBefore",
1345
- "type": {
1346
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1347
- },
1348
- "description": "Specify before padding of a Box",
1349
- "attribute": "pBefore"
1350
- },
1351
- {
1352
- "kind": "field",
1353
- "name": "pAfter",
1354
- "type": {
1355
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1356
- },
1357
- "description": "Specify after padding of a Box",
1358
- "attribute": "pAfter"
1359
- },
1360
- {
1361
- "kind": "field",
1362
- "name": "mx",
1280
+ "name": "appearance",
1363
1281
  "type": {
1364
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1282
+ "text": "'accent' | 'neutral' | undefined"
1365
1283
  },
1366
- "description": "Specify before and after margin of a Box",
1367
- "attribute": "mx"
1284
+ "default": "'neutral'",
1285
+ "description": "Specify the appearance of the Avatar",
1286
+ "attribute": "appearance"
1368
1287
  },
1369
1288
  {
1370
1289
  "kind": "field",
1371
- "name": "my",
1290
+ "name": "name",
1372
1291
  "type": {
1373
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1292
+ "text": "string | undefined"
1374
1293
  },
1375
- "description": "Specify top and bottom margin of a Box",
1376
- "attribute": "my"
1294
+ "description": "Specify a name to display initials in the Avatar",
1295
+ "attribute": "name"
1377
1296
  },
1378
1297
  {
1379
1298
  "kind": "field",
1380
- "name": "mTop",
1299
+ "name": "src",
1381
1300
  "type": {
1382
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1301
+ "text": "string | undefined"
1383
1302
  },
1384
- "description": "Specify top margin of a Box",
1385
- "attribute": "mTop"
1303
+ "description": "Pass an image to the Avatar",
1304
+ "attribute": "src"
1386
1305
  },
1387
1306
  {
1388
1307
  "kind": "field",
1389
- "name": "mBottom",
1308
+ "name": "alt",
1390
1309
  "type": {
1391
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1310
+ "text": "string | undefined"
1392
1311
  },
1393
- "description": "Specify bottom margin of a Box",
1394
- "attribute": "mBottom"
1312
+ "description": "Specify alt for image",
1313
+ "attribute": "alt"
1395
1314
  },
1396
1315
  {
1397
1316
  "kind": "field",
1398
- "name": "mBefore",
1317
+ "name": "size",
1399
1318
  "type": {
1400
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1319
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined"
1401
1320
  },
1402
- "description": "Specify before margin of a Box",
1403
- "attribute": "mBefore"
1321
+ "default": "'md'",
1322
+ "description": "Specify the size of the Avatar",
1323
+ "attribute": "size"
1404
1324
  },
1405
1325
  {
1406
1326
  "kind": "field",
1407
- "name": "mAfter",
1327
+ "name": "disabled",
1408
1328
  "type": {
1409
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1329
+ "text": "boolean | undefined"
1410
1330
  },
1411
- "description": "Specify after margin of a Box",
1412
- "attribute": "mAfter"
1331
+ "default": "false",
1332
+ "description": "Specify if the Avatar is disabled",
1333
+ "attribute": "disabled"
1413
1334
  },
1414
1335
  {
1415
1336
  "kind": "field",
1416
- "name": "m",
1337
+ "name": "shape",
1417
1338
  "type": {
1418
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1339
+ "text": "'circle' | 'square' | undefined"
1419
1340
  },
1420
- "description": "Specify all margin",
1421
- "attribute": "m"
1341
+ "default": "'circle'",
1342
+ "description": "Specify the shape of the Avatar",
1343
+ "attribute": "shape"
1422
1344
  },
1423
1345
  {
1424
1346
  "kind": "field",
1425
- "name": "p",
1347
+ "name": "isInteractive",
1426
1348
  "type": {
1427
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1349
+ "text": "boolean"
1428
1350
  },
1429
- "description": "Specify all padding",
1430
- "attribute": "p"
1351
+ "default": "false",
1352
+ "description": "If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer",
1353
+ "attribute": "isInteractive"
1431
1354
  },
1432
1355
  {
1433
1356
  "kind": "field",
1434
- "name": "gap",
1357
+ "name": "isFocusable",
1435
1358
  "type": {
1436
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1359
+ "text": "boolean"
1437
1360
  },
1438
- "description": "Specify gap between child elements",
1439
- "attribute": "gap"
1361
+ "default": "false",
1362
+ "description": "If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable",
1363
+ "attribute": "isFocusable"
1440
1364
  },
1441
1365
  {
1442
1366
  "kind": "field",
1443
- "name": "shadow",
1367
+ "name": "withBorder",
1444
1368
  "type": {
1445
- "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
1369
+ "text": "boolean"
1446
1370
  },
1447
- "description": "Specify if a Box has a shadow",
1448
- "attribute": "shadow"
1371
+ "default": "false",
1372
+ "attribute": "withBorder"
1449
1373
  }
1450
1374
  ],
1451
1375
  "attributes": [
1452
1376
  {
1453
- "name": "backgroundColor",
1454
- "type": {
1455
- "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
1456
- },
1457
- "description": "Specify the background color of a Box",
1458
- "fieldName": "backgroundColor"
1459
- },
1460
- {
1461
- "name": "borderColor",
1377
+ "name": "appearance",
1462
1378
  "type": {
1463
- "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
1379
+ "text": "'accent' | 'neutral' | undefined"
1464
1380
  },
1465
- "description": "Specify the border color of a Box",
1466
- "fieldName": "borderColor"
1381
+ "default": "'neutral'",
1382
+ "description": "Specify the appearance of the Avatar",
1383
+ "fieldName": "appearance"
1467
1384
  },
1468
1385
  {
1469
- "name": "borderWidth",
1386
+ "name": "name",
1470
1387
  "type": {
1471
- "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
1388
+ "text": "string | undefined"
1472
1389
  },
1473
- "description": "Specify the border width of a Box",
1474
- "fieldName": "borderWidth"
1390
+ "description": "Specify a name to display initials in the Avatar",
1391
+ "fieldName": "name"
1475
1392
  },
1476
1393
  {
1477
- "name": "borderRadius",
1394
+ "name": "src",
1478
1395
  "type": {
1479
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
1396
+ "text": "string | undefined"
1480
1397
  },
1481
- "description": "Specify the border radius of a Box",
1482
- "fieldName": "borderRadius"
1398
+ "description": "Pass an image to the Avatar",
1399
+ "fieldName": "src"
1483
1400
  },
1484
1401
  {
1485
- "name": "px",
1402
+ "name": "alt",
1486
1403
  "type": {
1487
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1404
+ "text": "string | undefined"
1488
1405
  },
1489
- "description": "Specify before and after padding of a Box",
1490
- "fieldName": "px"
1406
+ "description": "Specify alt for image",
1407
+ "fieldName": "alt"
1491
1408
  },
1492
1409
  {
1493
- "name": "py",
1410
+ "name": "size",
1494
1411
  "type": {
1495
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1412
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined"
1496
1413
  },
1497
- "description": "Specify top and bottom padding of a Box",
1498
- "fieldName": "py"
1414
+ "default": "'md'",
1415
+ "description": "Specify the size of the Avatar",
1416
+ "fieldName": "size"
1499
1417
  },
1500
1418
  {
1501
- "name": "pTop",
1419
+ "name": "disabled",
1502
1420
  "type": {
1503
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1421
+ "text": "boolean | undefined"
1504
1422
  },
1505
- "description": "Specify top padding of a Box",
1506
- "fieldName": "pTop"
1423
+ "default": "false",
1424
+ "description": "Specify if the Avatar is disabled",
1425
+ "fieldName": "disabled"
1507
1426
  },
1508
1427
  {
1509
- "name": "pBottom",
1428
+ "name": "shape",
1510
1429
  "type": {
1511
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1430
+ "text": "'circle' | 'square' | undefined"
1512
1431
  },
1513
- "description": "Specify bottom padding of a Box",
1514
- "fieldName": "pBottom"
1432
+ "default": "'circle'",
1433
+ "description": "Specify the shape of the Avatar",
1434
+ "fieldName": "shape"
1515
1435
  },
1516
1436
  {
1517
- "name": "pBefore",
1437
+ "name": "isInteractive",
1518
1438
  "type": {
1519
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1439
+ "text": "boolean"
1520
1440
  },
1521
- "description": "Specify before padding of a Box",
1522
- "fieldName": "pBefore"
1441
+ "default": "false",
1442
+ "description": "If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer",
1443
+ "fieldName": "isInteractive"
1523
1444
  },
1524
1445
  {
1525
- "name": "pAfter",
1446
+ "name": "isFocusable",
1526
1447
  "type": {
1527
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1448
+ "text": "boolean"
1528
1449
  },
1529
- "description": "Specify after padding of a Box",
1530
- "fieldName": "pAfter"
1450
+ "default": "false",
1451
+ "description": "If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable",
1452
+ "fieldName": "isFocusable"
1531
1453
  },
1532
1454
  {
1533
- "name": "mx",
1455
+ "name": "withBorder",
1534
1456
  "type": {
1535
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1457
+ "text": "boolean"
1536
1458
  },
1537
- "description": "Specify before and after margin of a Box",
1538
- "fieldName": "mx"
1539
- },
1459
+ "default": "false",
1460
+ "fieldName": "withBorder"
1461
+ }
1462
+ ],
1463
+ "superclass": {
1464
+ "name": "LitElement",
1465
+ "package": "lit"
1466
+ },
1467
+ "tagName": "bm-avatar",
1468
+ "customElement": true
1469
+ }
1470
+ ],
1471
+ "exports": [
1472
+ {
1473
+ "kind": "js",
1474
+ "name": "BmAvatar",
1475
+ "declaration": {
1476
+ "name": "BmAvatar",
1477
+ "module": "libs/web-components/src/lib/Avatar/Avatar.ts"
1478
+ }
1479
+ },
1480
+ {
1481
+ "kind": "custom-element-definition",
1482
+ "name": "bm-avatar",
1483
+ "declaration": {
1484
+ "name": "BmAvatar",
1485
+ "module": "libs/web-components/src/lib/Avatar/Avatar.ts"
1486
+ }
1487
+ }
1488
+ ]
1489
+ },
1490
+ {
1491
+ "kind": "javascript-module",
1492
+ "path": "libs/web-components/src/lib/Avatar/AvatarGroup.context.ts",
1493
+ "declarations": [
1494
+ {
1495
+ "kind": "variable",
1496
+ "name": "AvatarGroupCtx"
1497
+ }
1498
+ ],
1499
+ "exports": [
1500
+ {
1501
+ "kind": "js",
1502
+ "name": "AvatarGroupCtx",
1503
+ "declaration": {
1504
+ "name": "AvatarGroupCtx",
1505
+ "module": "libs/web-components/src/lib/Avatar/AvatarGroup.context.ts"
1506
+ }
1507
+ }
1508
+ ]
1509
+ },
1510
+ {
1511
+ "kind": "javascript-module",
1512
+ "path": "libs/web-components/src/lib/Avatar/AvatarGroup.ts",
1513
+ "declarations": [
1514
+ {
1515
+ "kind": "class",
1516
+ "description": "`bm-avatar-group`\n\n### Attributes:\n- **wrapping** - Specify if the AvatarGroup wraps\n- **maxCount** - Specify the max number of avatars displayed in the group.\n- **size** - Specify the size of all Avatars\n- **layout** - Specify the kind of the group.",
1517
+ "name": "BmAvatarGroup",
1518
+ "slots": [
1540
1519
  {
1541
- "name": "my",
1542
- "type": {
1543
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1544
- },
1545
- "description": "Specify top and bottom margin of a Box",
1546
- "fieldName": "my"
1547
- },
1520
+ "description": "Add Avatars to create a group",
1521
+ "name": "default"
1522
+ }
1523
+ ],
1524
+ "members": [
1548
1525
  {
1549
- "name": "mTop",
1526
+ "kind": "field",
1527
+ "name": "wrapping",
1550
1528
  "type": {
1551
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1529
+ "text": "boolean"
1552
1530
  },
1553
- "description": "Specify top margin of a Box",
1554
- "fieldName": "mTop"
1531
+ "default": "false",
1532
+ "description": "Specify if the AvatarGroup wraps",
1533
+ "attribute": "wrapping"
1555
1534
  },
1556
1535
  {
1557
- "name": "mBottom",
1536
+ "kind": "field",
1537
+ "name": "maxCount",
1558
1538
  "type": {
1559
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1539
+ "text": "number"
1560
1540
  },
1561
- "description": "Specify bottom margin of a Box",
1562
- "fieldName": "mBottom"
1541
+ "default": "5",
1542
+ "description": "Specify the max number of avatars displayed in the group.",
1543
+ "attribute": "maxCount",
1544
+ "reflects": true
1563
1545
  },
1564
1546
  {
1565
- "name": "mBefore",
1547
+ "kind": "field",
1548
+ "name": "size",
1566
1549
  "type": {
1567
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1550
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
1568
1551
  },
1569
- "description": "Specify before margin of a Box",
1570
- "fieldName": "mBefore"
1552
+ "default": "'md'",
1553
+ "description": "Specify the size of all Avatars",
1554
+ "attribute": "size"
1571
1555
  },
1572
1556
  {
1573
- "name": "mAfter",
1557
+ "kind": "field",
1558
+ "name": "layout",
1574
1559
  "type": {
1575
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1560
+ "text": "'stacked' | 'spaced' | undefined"
1576
1561
  },
1577
- "description": "Specify after margin of a Box",
1578
- "fieldName": "mAfter"
1579
- },
1562
+ "default": "'stacked'",
1563
+ "description": "Specify the kind of the group.",
1564
+ "attribute": "layout"
1565
+ }
1566
+ ],
1567
+ "attributes": [
1580
1568
  {
1581
- "name": "m",
1569
+ "name": "wrapping",
1582
1570
  "type": {
1583
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1571
+ "text": "boolean"
1584
1572
  },
1585
- "description": "Specify all margin",
1586
- "fieldName": "m"
1573
+ "default": "false",
1574
+ "description": "Specify if the AvatarGroup wraps",
1575
+ "fieldName": "wrapping"
1587
1576
  },
1588
1577
  {
1589
- "name": "p",
1578
+ "name": "maxCount",
1590
1579
  "type": {
1591
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1580
+ "text": "number"
1592
1581
  },
1593
- "description": "Specify all padding",
1594
- "fieldName": "p"
1582
+ "default": "5",
1583
+ "description": "Specify the max number of avatars displayed in the group.",
1584
+ "fieldName": "maxCount"
1595
1585
  },
1596
1586
  {
1597
- "name": "gap",
1587
+ "name": "size",
1598
1588
  "type": {
1599
- "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
1589
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
1600
1590
  },
1601
- "description": "Specify gap between child elements",
1602
- "fieldName": "gap"
1591
+ "default": "'md'",
1592
+ "description": "Specify the size of all Avatars",
1593
+ "fieldName": "size"
1603
1594
  },
1604
1595
  {
1605
- "name": "shadow",
1596
+ "name": "layout",
1606
1597
  "type": {
1607
- "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
1598
+ "text": "'stacked' | 'spaced' | undefined"
1608
1599
  },
1609
- "description": "Specify if a Box has a shadow",
1610
- "fieldName": "shadow"
1600
+ "default": "'stacked'",
1601
+ "description": "Specify the kind of the group.",
1602
+ "fieldName": "layout"
1611
1603
  }
1612
1604
  ],
1613
1605
  "superclass": {
1614
1606
  "name": "LitElement",
1615
1607
  "package": "lit"
1616
1608
  },
1617
- "tagName": "bm-box",
1609
+ "tagName": "bm-avatar-group",
1618
1610
  "customElement": true
1619
1611
  }
1620
1612
  ],
1621
1613
  "exports": [
1622
1614
  {
1623
1615
  "kind": "js",
1624
- "name": "BmBox",
1616
+ "name": "BmAvatarGroup",
1625
1617
  "declaration": {
1626
- "name": "BmBox",
1627
- "module": "libs/web-components/src/lib/Box/Box.ts"
1618
+ "name": "BmAvatarGroup",
1619
+ "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
1628
1620
  }
1629
1621
  },
1630
1622
  {
1631
1623
  "kind": "custom-element-definition",
1632
- "name": "bm-box",
1624
+ "name": "bm-avatar-group",
1633
1625
  "declaration": {
1634
- "name": "BmBox",
1635
- "module": "libs/web-components/src/lib/Box/Box.ts"
1626
+ "name": "BmAvatarGroup",
1627
+ "module": "libs/web-components/src/lib/Avatar/AvatarGroup.ts"
1636
1628
  }
1637
1629
  }
1638
1630
  ]
1639
1631
  },
1640
1632
  {
1641
1633
  "kind": "javascript-module",
1642
- "path": "libs/web-components/src/lib/Box/index.ts",
1634
+ "path": "libs/web-components/src/lib/Avatar/index.ts",
1643
1635
  "declarations": [],
1644
1636
  "exports": [
1645
1637
  {
@@ -1647,7 +1639,15 @@
1647
1639
  "name": "*",
1648
1640
  "declaration": {
1649
1641
  "name": "*",
1650
- "package": "./Box"
1642
+ "package": "./Avatar"
1643
+ }
1644
+ },
1645
+ {
1646
+ "kind": "js",
1647
+ "name": "*",
1648
+ "declaration": {
1649
+ "name": "*",
1650
+ "package": "./AvatarGroup"
1651
1651
  }
1652
1652
  }
1653
1653
  ]
@@ -2218,6 +2218,98 @@
2218
2218
  }
2219
2219
  ]
2220
2220
  },
2221
+ {
2222
+ "kind": "javascript-module",
2223
+ "path": "libs/web-components/src/lib/CloseButton/CloseButton.ts",
2224
+ "declarations": [
2225
+ {
2226
+ "kind": "class",
2227
+ "description": "`bm-close-button`\n\n### Attributes:\n- **size** - Specify the size of the CloseButton\n- **disabled** - Specify if the CloseButton is disabled",
2228
+ "name": "BmCloseButton",
2229
+ "members": [
2230
+ {
2231
+ "kind": "field",
2232
+ "name": "size",
2233
+ "type": {
2234
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
2235
+ },
2236
+ "default": "'md'",
2237
+ "description": "Specify the size of the CloseButton",
2238
+ "attribute": "size"
2239
+ },
2240
+ {
2241
+ "kind": "field",
2242
+ "name": "disabled",
2243
+ "type": {
2244
+ "text": "boolean"
2245
+ },
2246
+ "default": "false",
2247
+ "description": "Specify if the CloseButton is disabled",
2248
+ "attribute": "disabled"
2249
+ }
2250
+ ],
2251
+ "attributes": [
2252
+ {
2253
+ "name": "size",
2254
+ "type": {
2255
+ "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
2256
+ },
2257
+ "default": "'md'",
2258
+ "description": "Specify the size of the CloseButton",
2259
+ "fieldName": "size"
2260
+ },
2261
+ {
2262
+ "name": "disabled",
2263
+ "type": {
2264
+ "text": "boolean"
2265
+ },
2266
+ "default": "false",
2267
+ "description": "Specify if the CloseButton is disabled",
2268
+ "fieldName": "disabled"
2269
+ }
2270
+ ],
2271
+ "superclass": {
2272
+ "name": "LitElement",
2273
+ "package": "lit"
2274
+ },
2275
+ "tagName": "bm-close-button",
2276
+ "customElement": true
2277
+ }
2278
+ ],
2279
+ "exports": [
2280
+ {
2281
+ "kind": "js",
2282
+ "name": "BmCloseButton",
2283
+ "declaration": {
2284
+ "name": "BmCloseButton",
2285
+ "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
2286
+ }
2287
+ },
2288
+ {
2289
+ "kind": "custom-element-definition",
2290
+ "name": "bm-close-button",
2291
+ "declaration": {
2292
+ "name": "BmCloseButton",
2293
+ "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
2294
+ }
2295
+ }
2296
+ ]
2297
+ },
2298
+ {
2299
+ "kind": "javascript-module",
2300
+ "path": "libs/web-components/src/lib/CloseButton/index.ts",
2301
+ "declarations": [],
2302
+ "exports": [
2303
+ {
2304
+ "kind": "js",
2305
+ "name": "*",
2306
+ "declaration": {
2307
+ "name": "*",
2308
+ "package": "./CloseButton"
2309
+ }
2310
+ }
2311
+ ]
2312
+ },
2221
2313
  {
2222
2314
  "kind": "javascript-module",
2223
2315
  "path": "libs/web-components/src/lib/Divider/Divider.ts",
@@ -2411,98 +2503,6 @@
2411
2503
  }
2412
2504
  ]
2413
2505
  },
2414
- {
2415
- "kind": "javascript-module",
2416
- "path": "libs/web-components/src/lib/CloseButton/CloseButton.ts",
2417
- "declarations": [
2418
- {
2419
- "kind": "class",
2420
- "description": "`bm-close-button`\n\n### Attributes:\n- **size** - Specify the size of the CloseButton\n- **disabled** - Specify if the CloseButton is disabled",
2421
- "name": "BmCloseButton",
2422
- "members": [
2423
- {
2424
- "kind": "field",
2425
- "name": "size",
2426
- "type": {
2427
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
2428
- },
2429
- "default": "'md'",
2430
- "description": "Specify the size of the CloseButton",
2431
- "attribute": "size"
2432
- },
2433
- {
2434
- "kind": "field",
2435
- "name": "disabled",
2436
- "type": {
2437
- "text": "boolean"
2438
- },
2439
- "default": "false",
2440
- "description": "Specify if the CloseButton is disabled",
2441
- "attribute": "disabled"
2442
- }
2443
- ],
2444
- "attributes": [
2445
- {
2446
- "name": "size",
2447
- "type": {
2448
- "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
2449
- },
2450
- "default": "'md'",
2451
- "description": "Specify the size of the CloseButton",
2452
- "fieldName": "size"
2453
- },
2454
- {
2455
- "name": "disabled",
2456
- "type": {
2457
- "text": "boolean"
2458
- },
2459
- "default": "false",
2460
- "description": "Specify if the CloseButton is disabled",
2461
- "fieldName": "disabled"
2462
- }
2463
- ],
2464
- "superclass": {
2465
- "name": "LitElement",
2466
- "package": "lit"
2467
- },
2468
- "tagName": "bm-close-button",
2469
- "customElement": true
2470
- }
2471
- ],
2472
- "exports": [
2473
- {
2474
- "kind": "js",
2475
- "name": "BmCloseButton",
2476
- "declaration": {
2477
- "name": "BmCloseButton",
2478
- "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
2479
- }
2480
- },
2481
- {
2482
- "kind": "custom-element-definition",
2483
- "name": "bm-close-button",
2484
- "declaration": {
2485
- "name": "BmCloseButton",
2486
- "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
2487
- }
2488
- }
2489
- ]
2490
- },
2491
- {
2492
- "kind": "javascript-module",
2493
- "path": "libs/web-components/src/lib/CloseButton/index.ts",
2494
- "declarations": [],
2495
- "exports": [
2496
- {
2497
- "kind": "js",
2498
- "name": "*",
2499
- "declaration": {
2500
- "name": "*",
2501
- "package": "./CloseButton"
2502
- }
2503
- }
2504
- ]
2505
- },
2506
2506
  {
2507
2507
  "kind": "javascript-module",
2508
2508
  "path": "libs/web-components/src/lib/EmptyState/EmptyState.ts",