@emuanalytics/flow-rdf-ui 4.1.2 → 4.1.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.
Files changed (10) hide show
  1. package/dist/components/list-item/list-item.component.mjs +2 -1
  2. package/dist/components/list-item/list-item.styles.mjs +15 -3
  3. package/dist/custom-elements.json +611 -611
  4. package/dist/package.json.mjs +1 -1
  5. package/dist/vscode.html-custom-data.json +85 -85
  6. package/package.json +1 -1
  7. package/themes/dark.css +4 -0
  8. package/themes/dark.styles.js +4 -0
  9. package/themes/light.css +4 -0
  10. package/themes/light.styles.js +4 -0
package/dist/custom-elements.json CHANGED
@@ -670,12 +670,12 @@
670
670
  },
671
671
  {
672
672
  "kind": "javascript-module",
673
- "path": "components/badge/badge.component.js",
673
+ "path": "components/breadcrumb/breadcrumb.component.js",
674
674
  "declarations": [
675
675
  {
676
676
  "kind": "class",
677
677
  "description": "",
678
- "name": "FlowUiBadge",
678
+ "name": "FlowUiBreadcrumb",
679
679
  "cssParts": [
680
680
  {
681
681
  "description": "The component's base wrapper.",
@@ -684,100 +684,84 @@
684
684
  ],
685
685
  "slots": [
686
686
  {
687
- "description": "The badge's content.",
687
+ "description": "One or more breadcrumb items to display.",
688
688
  "name": ""
689
+ },
690
+ {
691
+ "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
692
+ "name": "separator"
689
693
  }
690
694
  ],
691
695
  "members": [
692
696
  {
693
697
  "kind": "field",
694
- "name": "variant",
695
- "type": {
696
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
697
- },
698
- "default": "'primary'",
699
- "description": "The badge's theme variant.",
700
- "attribute": "variant",
701
- "reflects": true
698
+ "name": "localize",
699
+ "privacy": "private",
700
+ "readonly": true,
701
+ "default": "new LocalizeController(this)"
702
702
  },
703
703
  {
704
704
  "kind": "field",
705
- "name": "size",
706
- "type": {
707
- "text": "'small' | 'medium' | 'large'"
708
- },
709
- "default": "'medium'",
710
- "description": "The badge size.",
711
- "attribute": "size",
712
- "reflects": true
705
+ "name": "separatorDir",
706
+ "privacy": "private"
713
707
  },
714
708
  {
715
709
  "kind": "field",
716
- "name": "pill",
710
+ "name": "defaultSlot",
717
711
  "type": {
718
- "text": "boolean"
712
+ "text": "HTMLSlotElement"
719
713
  },
720
- "default": "false",
721
- "description": "Draws a pill-style badge with rounded edges.",
722
- "attribute": "pill",
723
- "reflects": true
714
+ "privacy": "private"
724
715
  },
725
716
  {
726
717
  "kind": "field",
727
- "name": "pulse",
728
- "type": {
729
- "text": "boolean"
730
- },
731
- "default": "false",
732
- "description": "Makes the badge pulsate to draw attention.",
733
- "attribute": "pulse",
734
- "reflects": true
735
- }
736
- ],
737
- "attributes": [
738
- {
739
- "name": "variant",
718
+ "name": "separatorSlot",
740
719
  "type": {
741
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
720
+ "text": "HTMLSlotElement"
742
721
  },
743
- "default": "'primary'",
744
- "description": "The badge's theme variant.",
745
- "fieldName": "variant"
722
+ "privacy": "private"
746
723
  },
747
724
  {
748
- "name": "size",
725
+ "kind": "field",
726
+ "name": "label",
749
727
  "type": {
750
- "text": "'small' | 'medium' | 'large'"
728
+ "text": "string"
751
729
  },
752
- "default": "'medium'",
753
- "description": "The badge size.",
754
- "fieldName": "size"
730
+ "default": "''",
731
+ "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
732
+ "attribute": "label"
755
733
  },
756
734
  {
757
- "name": "pill",
758
- "type": {
759
- "text": "boolean"
760
- },
761
- "default": "false",
762
- "description": "Draws a pill-style badge with rounded edges.",
763
- "fieldName": "pill"
735
+ "kind": "method",
736
+ "name": "getSeparator",
737
+ "privacy": "private"
764
738
  },
765
739
  {
766
- "name": "pulse",
740
+ "kind": "method",
741
+ "name": "handleSlotChange",
742
+ "privacy": "private"
743
+ }
744
+ ],
745
+ "attributes": [
746
+ {
747
+ "name": "label",
767
748
  "type": {
768
- "text": "boolean"
749
+ "text": "string"
769
750
  },
770
- "default": "false",
771
- "description": "Makes the badge pulsate to draw attention.",
772
- "fieldName": "pulse"
751
+ "default": "''",
752
+ "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
753
+ "fieldName": "label"
773
754
  }
774
755
  ],
775
756
  "superclass": {
776
757
  "name": "FlowRdfElement",
777
758
  "module": "/src/internal/flow-ui-rdf-element"
778
759
  },
779
- "tagName": "flow-ui-badge",
780
- "summary": "Badges are used to draw attention and display statuses or counts.",
760
+ "tagName": "flow-ui-breadcrumb",
761
+ "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
762
+ "dependencies": [
763
+ "flow-ui-icon"
764
+ ],
781
765
  "customElement": true
782
766
  }
783
767
  ],
@@ -786,69 +770,125 @@
786
770
  "kind": "js",
787
771
  "name": "default",
788
772
  "declaration": {
789
- "name": "FlowUiBadge",
790
- "module": "components/badge/badge.component.js"
773
+ "name": "FlowUiBreadcrumb",
774
+ "module": "components/breadcrumb/breadcrumb.component.js"
791
775
  }
792
776
  }
793
777
  ]
794
778
  },
795
779
  {
796
780
  "kind": "javascript-module",
797
- "path": "components/badge/badge.js",
781
+ "path": "components/breadcrumb/breadcrumb.js",
798
782
  "declarations": [],
799
783
  "exports": [
800
784
  {
801
785
  "kind": "js",
802
786
  "name": "default",
803
787
  "declaration": {
804
- "name": "FlowUiBadge",
805
- "module": "components/badge/badge.js"
788
+ "name": "FlowUiBreadcrumb",
789
+ "module": "components/breadcrumb/breadcrumb.js"
806
790
  }
807
791
  }
808
792
  ]
809
793
  },
810
794
  {
811
795
  "kind": "javascript-module",
812
- "path": "components/avatar/avatar.component.js",
796
+ "path": "components/base-control/base-control.component.js",
813
797
  "declarations": [
814
798
  {
815
799
  "kind": "class",
816
800
  "description": "",
817
- "name": "FlowUiAvatar",
818
- "cssProperties": [
819
- {
820
- "description": "The size of the avatar.",
821
- "name": "--size"
822
- }
823
- ],
801
+ "name": "FlowUiBaseControl",
824
802
  "cssParts": [
803
+ {
804
+ "description": "The form control that wraps the label, input, and help text.",
805
+ "name": "form-control"
806
+ },
807
+ {
808
+ "description": "The label's wrapper.",
809
+ "name": "form-control-label"
810
+ },
811
+ {
812
+ "description": "The input's wrapper.",
813
+ "name": "form-control-input"
814
+ },
815
+ {
816
+ "description": "The help text's wrapper.",
817
+ "name": "form-control-help-text"
818
+ },
825
819
  {
826
820
  "description": "The component's base wrapper.",
827
821
  "name": "base"
828
822
  },
829
823
  {
830
- "description": "The container that wraps the avatar's icon.",
831
- "name": "icon"
824
+ "description": "The internal `<input>` control.",
825
+ "name": "input"
832
826
  },
833
827
  {
834
- "description": "The container that wraps the avatar's initials.",
835
- "name": "initials"
828
+ "description": "The container that wraps the prefix.",
829
+ "name": "prefix"
836
830
  },
837
831
  {
838
- "description": "The avatar image. Only shown when the `image` attribute is set.",
839
- "name": "image"
832
+ "description": "The clear button.",
833
+ "name": "clear-button"
834
+ },
835
+ {
836
+ "description": "The password toggle button.",
837
+ "name": "password-toggle-button"
838
+ },
839
+ {
840
+ "description": "The container that wraps the suffix.",
841
+ "name": "suffix"
840
842
  }
841
843
  ],
842
844
  "slots": [
843
845
  {
844
- "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
845
- "name": "icon"
846
+ "description": "The input's label. Alternatively, you can use the `label` attribute.",
847
+ "name": "label"
848
+ },
849
+ {
850
+ "description": "Used to prepend a presentational icon or similar element to the input.",
851
+ "name": "prefix"
852
+ },
853
+ {
854
+ "description": "Used to append a presentational icon or similar element to the input.",
855
+ "name": "suffix"
856
+ },
857
+ {
858
+ "description": "An icon to use in lieu of the default clear icon.",
859
+ "name": "clear-icon"
860
+ },
861
+ {
862
+ "description": "An icon to use in lieu of the default show password icon.",
863
+ "name": "show-password-icon"
864
+ },
865
+ {
866
+ "description": "An icon to use in lieu of the default hide password icon.",
867
+ "name": "hide-password-icon"
868
+ },
869
+ {
870
+ "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
871
+ "name": "help-text"
846
872
  }
847
873
  ],
848
874
  "members": [
849
875
  {
850
876
  "kind": "field",
851
- "name": "hasError",
877
+ "name": "formControlController",
878
+ "privacy": "private",
879
+ "readonly": true,
880
+ "default": "new FormControlController(this, {\n assumeInteractionOn: ['flow-ui-blur', 'flow-ui-input']\n })"
881
+ },
882
+ {
883
+ "kind": "field",
884
+ "name": "hasSlotController",
885
+ "privacy": "private",
886
+ "readonly": true,
887
+ "default": "new HasSlotController(this, 'help-text', 'label')"
888
+ },
889
+ {
890
+ "kind": "field",
891
+ "name": "hasFocus",
852
892
  "type": {
853
893
  "text": "boolean"
854
894
  },
@@ -857,13 +897,36 @@
857
897
  },
858
898
  {
859
899
  "kind": "field",
860
- "name": "image",
900
+ "name": "size",
861
901
  "type": {
862
- "text": "string"
902
+ "text": "'small' | 'medium' | 'large'"
863
903
  },
864
- "default": "''",
865
- "description": "The image source to use for the avatar.",
866
- "attribute": "image"
904
+ "default": "'medium'",
905
+ "description": "The input's size.",
906
+ "attribute": "size",
907
+ "reflects": true
908
+ },
909
+ {
910
+ "kind": "field",
911
+ "name": "filled",
912
+ "type": {
913
+ "text": "boolean"
914
+ },
915
+ "default": "false",
916
+ "description": "Draws a filled input.",
917
+ "attribute": "filled",
918
+ "reflects": true
919
+ },
920
+ {
921
+ "kind": "field",
922
+ "name": "pill",
923
+ "type": {
924
+ "text": "boolean"
925
+ },
926
+ "default": "false",
927
+ "description": "Draws a pill-style input with rounded edges.",
928
+ "attribute": "pill",
929
+ "reflects": true
867
930
  },
868
931
  {
869
932
  "kind": "field",
@@ -872,244 +935,286 @@
872
935
  "text": "string"
873
936
  },
874
937
  "default": "''",
875
- "description": "A label to use to describe the avatar to assistive devices.",
938
+ "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
876
939
  "attribute": "label"
877
940
  },
878
941
  {
879
942
  "kind": "field",
880
- "name": "initials",
943
+ "name": "helpText",
881
944
  "type": {
882
945
  "text": "string"
883
946
  },
884
947
  "default": "''",
885
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
886
- "attribute": "initials"
948
+ "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
949
+ "attribute": "help-text"
887
950
  },
888
951
  {
889
952
  "kind": "field",
890
- "name": "loading",
953
+ "name": "disabled",
891
954
  "type": {
892
- "text": "'eager' | 'lazy'"
955
+ "text": "boolean"
893
956
  },
894
- "default": "'eager'",
895
- "description": "Indicates how the browser should load the image.",
896
- "attribute": "loading"
897
- },
898
- {
899
- "kind": "field",
900
- "name": "shape",
901
- "type": {
902
- "text": "'circle' | 'square' | 'rounded'"
903
- },
904
- "default": "'circle'",
905
- "description": "The shape of the avatar.",
906
- "attribute": "shape",
957
+ "default": "false",
958
+ "description": "Disables the input.",
959
+ "attribute": "disabled",
907
960
  "reflects": true
908
- }
909
- ],
910
- "attributes": [
961
+ },
911
962
  {
912
- "name": "image",
963
+ "kind": "field",
964
+ "name": "form",
913
965
  "type": {
914
966
  "text": "string"
915
967
  },
916
968
  "default": "''",
917
- "description": "The image source to use for the avatar.",
918
- "fieldName": "image"
969
+ "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
970
+ "attribute": "form",
971
+ "reflects": true
919
972
  },
920
973
  {
921
- "name": "label",
974
+ "kind": "field",
975
+ "name": "required",
922
976
  "type": {
923
- "text": "string"
977
+ "text": "boolean"
924
978
  },
925
- "default": "''",
926
- "description": "A label to use to describe the avatar to assistive devices.",
927
- "fieldName": "label"
979
+ "default": "false",
980
+ "description": "Makes the input a required field.",
981
+ "attribute": "required",
982
+ "reflects": true
928
983
  },
929
984
  {
930
- "name": "initials",
985
+ "kind": "field",
986
+ "name": "inline",
931
987
  "type": {
932
- "text": "string"
988
+ "text": "boolean"
933
989
  },
934
- "default": "''",
935
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
936
- "fieldName": "initials"
990
+ "default": "false",
991
+ "description": "Display the input in the 'inline' form control style.",
992
+ "attribute": "inline",
993
+ "reflects": true
937
994
  },
938
995
  {
939
- "name": "loading",
996
+ "kind": "field",
997
+ "name": "divider",
940
998
  "type": {
941
- "text": "'eager' | 'lazy'"
999
+ "text": "boolean"
942
1000
  },
943
- "default": "'eager'",
944
- "description": "Indicates how the browser should load the image.",
945
- "fieldName": "loading"
1001
+ "default": "false",
1002
+ "description": "Indicates that the control should display a divider",
1003
+ "attribute": "divider",
1004
+ "reflects": true
946
1005
  },
947
1006
  {
948
- "name": "shape",
949
- "type": {
950
- "text": "'circle' | 'square' | 'rounded'"
951
- },
952
- "default": "'circle'",
953
- "description": "The shape of the avatar.",
954
- "fieldName": "shape"
955
- }
956
- ],
957
- "superclass": {
958
- "name": "FlowRdfElement",
959
- "module": "/src/internal/flow-ui-rdf-element"
960
- },
961
- "tagName": "flow-ui-avatar",
962
- "summary": "Avatars are used to represent a person or object.",
963
- "dependencies": [
964
- "flow-ui-icon"
965
- ],
966
- "customElement": true
967
- }
968
- ],
969
- "exports": [
970
- {
971
- "kind": "js",
972
- "name": "default",
973
- "declaration": {
974
- "name": "FlowUiAvatar",
975
- "module": "components/avatar/avatar.component.js"
976
- }
977
- }
978
- ]
979
- },
980
- {
981
- "kind": "javascript-module",
982
- "path": "components/avatar/avatar.js",
983
- "declarations": [],
984
- "exports": [
985
- {
986
- "kind": "js",
987
- "name": "default",
988
- "declaration": {
989
- "name": "FlowUiAvatar",
990
- "module": "components/avatar/avatar.js"
991
- }
992
- }
993
- ]
994
- },
995
- {
996
- "kind": "javascript-module",
997
- "path": "components/breadcrumb-item/breadcrumb-item.component.js",
998
- "declarations": [
999
- {
1000
- "kind": "class",
1001
- "description": "",
1002
- "name": "FlowUiBreadcrumbItem",
1003
- "cssParts": [
1007
+ "kind": "field",
1008
+ "name": "validity",
1009
+ "description": "Gets the validity state object",
1010
+ "readonly": true
1011
+ },
1004
1012
  {
1005
- "description": "The component's base wrapper.",
1006
- "name": "base"
1013
+ "kind": "field",
1014
+ "name": "validationMessage",
1015
+ "description": "Gets the validation message",
1016
+ "readonly": true
1007
1017
  },
1008
1018
  {
1009
- "description": "The breadcrumb item's label.",
1010
- "name": "label"
1019
+ "kind": "method",
1020
+ "name": "handleBlur",
1021
+ "privacy": "private"
1011
1022
  },
1012
1023
  {
1013
- "description": "The container that wraps the prefix.",
1014
- "name": "prefix"
1024
+ "kind": "method",
1025
+ "name": "handleFocus",
1026
+ "privacy": "private"
1015
1027
  },
1016
1028
  {
1017
- "description": "The container that wraps the suffix.",
1018
- "name": "suffix"
1029
+ "kind": "method",
1030
+ "name": "focus",
1031
+ "parameters": [
1032
+ {
1033
+ "name": "options",
1034
+ "optional": true,
1035
+ "type": {
1036
+ "text": "FocusOptions"
1037
+ }
1038
+ }
1039
+ ],
1040
+ "description": "Sets focus on the input."
1019
1041
  },
1020
1042
  {
1021
- "description": "The container that wraps the separator.",
1022
- "name": "separator"
1043
+ "kind": "method",
1044
+ "name": "blur",
1045
+ "description": "Removes focus from the input."
1046
+ },
1047
+ {
1048
+ "kind": "method",
1049
+ "name": "checkValidity",
1050
+ "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
1051
+ },
1052
+ {
1053
+ "kind": "method",
1054
+ "name": "getForm",
1055
+ "return": {
1056
+ "type": {
1057
+ "text": "HTMLFormElement | null"
1058
+ }
1059
+ },
1060
+ "description": "Gets the associated form, if one exists."
1061
+ },
1062
+ {
1063
+ "kind": "method",
1064
+ "name": "reportValidity",
1065
+ "description": "Checks for validity and shows the browser's validation message if the control is invalid."
1066
+ },
1067
+ {
1068
+ "kind": "method",
1069
+ "name": "setCustomValidity",
1070
+ "parameters": [
1071
+ {
1072
+ "name": "message",
1073
+ "type": {
1074
+ "text": "string"
1075
+ }
1076
+ }
1077
+ ],
1078
+ "description": "Sets a custom validation message. Pass an empty string to restore validity."
1023
1079
  }
1024
1080
  ],
1025
- "slots": [
1081
+ "events": [
1026
1082
  {
1027
- "description": "The breadcrumb item's label.",
1028
- "name": ""
1083
+ "description": "Emitted when the control loses focus.",
1084
+ "name": "flow-ui-blur",
1085
+ "reactName": "onFlowUiBlur"
1029
1086
  },
1030
1087
  {
1031
- "description": "An optional prefix, usually an icon or icon button.",
1032
- "name": "prefix"
1088
+ "description": "Emitted when an alteration to the control's value is committed by the user.",
1089
+ "name": "flow-ui-change",
1090
+ "reactName": "onFlowUiChange"
1033
1091
  },
1034
1092
  {
1035
- "description": "An optional suffix, usually an icon or icon button.",
1036
- "name": "suffix"
1093
+ "description": "Emitted when the clear button is activated.",
1094
+ "name": "flow-ui-clear",
1095
+ "reactName": "onFlowUiClear"
1037
1096
  },
1038
1097
  {
1039
- "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.",
1040
- "name": "separator"
1098
+ "description": "Emitted when the control gains focus.",
1099
+ "name": "flow-ui-focus",
1100
+ "reactName": "onFlowUiFocus"
1101
+ },
1102
+ {
1103
+ "description": "Emitted when the control receives input.",
1104
+ "name": "flow-ui-input",
1105
+ "reactName": "onFlowUiInput"
1106
+ },
1107
+ {
1108
+ "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
1109
+ "name": "flow-ui-invalid",
1110
+ "reactName": "onFlowUiInvalid"
1041
1111
  }
1042
1112
  ],
1043
- "members": [
1113
+ "attributes": [
1044
1114
  {
1045
- "kind": "field",
1046
- "name": "hasSlotController",
1047
- "privacy": "private",
1048
- "readonly": true,
1049
- "default": "new HasSlotController(this, 'prefix', 'suffix')"
1115
+ "name": "size",
1116
+ "type": {
1117
+ "text": "'small' | 'medium' | 'large'"
1118
+ },
1119
+ "default": "'medium'",
1120
+ "description": "The input's size.",
1121
+ "fieldName": "size"
1050
1122
  },
1051
1123
  {
1052
- "kind": "field",
1053
- "name": "href",
1124
+ "name": "filled",
1054
1125
  "type": {
1055
- "text": "string | undefined"
1126
+ "text": "boolean"
1056
1127
  },
1057
- "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1058
- "attribute": "href"
1128
+ "default": "false",
1129
+ "description": "Draws a filled input.",
1130
+ "fieldName": "filled"
1059
1131
  },
1060
1132
  {
1061
- "kind": "field",
1062
- "name": "target",
1133
+ "name": "pill",
1063
1134
  "type": {
1064
- "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1135
+ "text": "boolean"
1065
1136
  },
1066
- "description": "Tells the browser where to open the link. Only used when `href` is set.",
1067
- "attribute": "target"
1137
+ "default": "false",
1138
+ "description": "Draws a pill-style input with rounded edges.",
1139
+ "fieldName": "pill"
1068
1140
  },
1069
1141
  {
1070
- "kind": "field",
1071
- "name": "rel",
1142
+ "name": "label",
1072
1143
  "type": {
1073
1144
  "text": "string"
1074
1145
  },
1075
- "default": "'noreferrer noopener'",
1076
- "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1077
- "attribute": "rel"
1078
- }
1079
- ],
1080
- "attributes": [
1146
+ "default": "''",
1147
+ "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
1148
+ "fieldName": "label"
1149
+ },
1081
1150
  {
1082
- "name": "href",
1151
+ "name": "help-text",
1083
1152
  "type": {
1084
- "text": "string | undefined"
1153
+ "text": "string"
1085
1154
  },
1086
- "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1087
- "fieldName": "href"
1155
+ "default": "''",
1156
+ "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
1157
+ "fieldName": "helpText"
1088
1158
  },
1089
1159
  {
1090
- "name": "target",
1160
+ "name": "disabled",
1091
1161
  "type": {
1092
- "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1162
+ "text": "boolean"
1093
1163
  },
1094
- "description": "Tells the browser where to open the link. Only used when `href` is set.",
1095
- "fieldName": "target"
1164
+ "default": "false",
1165
+ "description": "Disables the input.",
1166
+ "fieldName": "disabled"
1096
1167
  },
1097
1168
  {
1098
- "name": "rel",
1169
+ "name": "form",
1099
1170
  "type": {
1100
1171
  "text": "string"
1101
1172
  },
1102
- "default": "'noreferrer noopener'",
1103
- "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1104
- "fieldName": "rel"
1173
+ "default": "''",
1174
+ "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
1175
+ "fieldName": "form"
1176
+ },
1177
+ {
1178
+ "name": "required",
1179
+ "type": {
1180
+ "text": "boolean"
1181
+ },
1182
+ "default": "false",
1183
+ "description": "Makes the input a required field.",
1184
+ "fieldName": "required"
1185
+ },
1186
+ {
1187
+ "name": "inline",
1188
+ "type": {
1189
+ "text": "boolean"
1190
+ },
1191
+ "default": "false",
1192
+ "description": "Display the input in the 'inline' form control style.",
1193
+ "fieldName": "inline"
1194
+ },
1195
+ {
1196
+ "name": "divider",
1197
+ "type": {
1198
+ "text": "boolean"
1199
+ },
1200
+ "default": "false",
1201
+ "description": "Indicates that the control should display a divider",
1202
+ "fieldName": "divider"
1105
1203
  }
1106
1204
  ],
1107
1205
  "superclass": {
1108
- "name": "FlowRdfElement",
1206
+ "name": "FlowRdfFormControl",
1109
1207
  "module": "/src/internal/flow-ui-rdf-element"
1110
1208
  },
1111
- "tagName": "flow-ui-breadcrumb-item",
1112
- "summary": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.",
1209
+ "tagName": "flow-ui-base-control",
1210
+ "summary": "Inputs collect data from the user.",
1211
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input",
1212
+ "status": "stable",
1213
+ "since": "2.0",
1214
+ "dependencies": [
1215
+ "flow-ui-icon",
1216
+ "flow-ui-icon-button"
1217
+ ],
1113
1218
  "customElement": true
1114
1219
  }
1115
1220
  ],
@@ -1118,163 +1223,92 @@
1118
1223
  "kind": "js",
1119
1224
  "name": "default",
1120
1225
  "declaration": {
1121
- "name": "FlowUiBreadcrumbItem",
1122
- "module": "components/breadcrumb-item/breadcrumb-item.component.js"
1226
+ "name": "FlowUiBaseControl",
1227
+ "module": "components/base-control/base-control.component.js"
1123
1228
  }
1124
1229
  }
1125
1230
  ]
1126
1231
  },
1127
1232
  {
1128
1233
  "kind": "javascript-module",
1129
- "path": "components/breadcrumb-item/breadcrumb-item.js",
1234
+ "path": "components/base-control/base-control.js",
1130
1235
  "declarations": [],
1131
1236
  "exports": [
1237
+ {
1238
+ "kind": "js",
1239
+ "name": "*",
1240
+ "declaration": {
1241
+ "name": "*",
1242
+ "package": "./base-control.component"
1243
+ }
1244
+ },
1132
1245
  {
1133
1246
  "kind": "js",
1134
1247
  "name": "default",
1135
1248
  "declaration": {
1136
- "name": "FlowUiBreadcrumbItem",
1137
- "module": "components/breadcrumb-item/breadcrumb-item.js"
1249
+ "name": "FlowUiBaseControl",
1250
+ "module": "components/base-control/base-control.js"
1138
1251
  }
1139
1252
  }
1140
1253
  ]
1141
1254
  },
1142
1255
  {
1143
1256
  "kind": "javascript-module",
1144
- "path": "components/base-control/base-control.component.js",
1257
+ "path": "components/avatar/avatar.component.js",
1145
1258
  "declarations": [
1146
1259
  {
1147
1260
  "kind": "class",
1148
1261
  "description": "",
1149
- "name": "FlowUiBaseControl",
1150
- "cssParts": [
1151
- {
1152
- "description": "The form control that wraps the label, input, and help text.",
1153
- "name": "form-control"
1154
- },
1155
- {
1156
- "description": "The label's wrapper.",
1157
- "name": "form-control-label"
1158
- },
1159
- {
1160
- "description": "The input's wrapper.",
1161
- "name": "form-control-input"
1162
- },
1163
- {
1164
- "description": "The help text's wrapper.",
1165
- "name": "form-control-help-text"
1166
- },
1167
- {
1168
- "description": "The component's base wrapper.",
1169
- "name": "base"
1170
- },
1171
- {
1172
- "description": "The internal `<input>` control.",
1173
- "name": "input"
1174
- },
1175
- {
1176
- "description": "The container that wraps the prefix.",
1177
- "name": "prefix"
1178
- },
1179
- {
1180
- "description": "The clear button.",
1181
- "name": "clear-button"
1182
- },
1183
- {
1184
- "description": "The password toggle button.",
1185
- "name": "password-toggle-button"
1186
- },
1187
- {
1188
- "description": "The container that wraps the suffix.",
1189
- "name": "suffix"
1190
- }
1191
- ],
1192
- "slots": [
1193
- {
1194
- "description": "The input's label. Alternatively, you can use the `label` attribute.",
1195
- "name": "label"
1196
- },
1197
- {
1198
- "description": "Used to prepend a presentational icon or similar element to the input.",
1199
- "name": "prefix"
1200
- },
1201
- {
1202
- "description": "Used to append a presentational icon or similar element to the input.",
1203
- "name": "suffix"
1204
- },
1205
- {
1206
- "description": "An icon to use in lieu of the default clear icon.",
1207
- "name": "clear-icon"
1208
- },
1209
- {
1210
- "description": "An icon to use in lieu of the default show password icon.",
1211
- "name": "show-password-icon"
1212
- },
1213
- {
1214
- "description": "An icon to use in lieu of the default hide password icon.",
1215
- "name": "hide-password-icon"
1216
- },
1262
+ "name": "FlowUiAvatar",
1263
+ "cssProperties": [
1217
1264
  {
1218
- "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
1219
- "name": "help-text"
1265
+ "description": "The size of the avatar.",
1266
+ "name": "--size"
1220
1267
  }
1221
1268
  ],
1222
- "members": [
1269
+ "cssParts": [
1223
1270
  {
1224
- "kind": "field",
1225
- "name": "formControlController",
1226
- "privacy": "private",
1227
- "readonly": true,
1228
- "default": "new FormControlController(this, {\n assumeInteractionOn: ['flow-ui-blur', 'flow-ui-input']\n })"
1271
+ "description": "The component's base wrapper.",
1272
+ "name": "base"
1229
1273
  },
1230
1274
  {
1231
- "kind": "field",
1232
- "name": "hasSlotController",
1233
- "privacy": "private",
1234
- "readonly": true,
1235
- "default": "new HasSlotController(this, 'help-text', 'label')"
1275
+ "description": "The container that wraps the avatar's icon.",
1276
+ "name": "icon"
1236
1277
  },
1237
1278
  {
1238
- "kind": "field",
1239
- "name": "hasFocus",
1240
- "type": {
1241
- "text": "boolean"
1242
- },
1243
- "privacy": "private",
1244
- "default": "false"
1279
+ "description": "The container that wraps the avatar's initials.",
1280
+ "name": "initials"
1245
1281
  },
1246
1282
  {
1247
- "kind": "field",
1248
- "name": "size",
1249
- "type": {
1250
- "text": "'small' | 'medium' | 'large'"
1251
- },
1252
- "default": "'medium'",
1253
- "description": "The input's size.",
1254
- "attribute": "size",
1255
- "reflects": true
1256
- },
1283
+ "description": "The avatar image. Only shown when the `image` attribute is set.",
1284
+ "name": "image"
1285
+ }
1286
+ ],
1287
+ "slots": [
1288
+ {
1289
+ "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
1290
+ "name": "icon"
1291
+ }
1292
+ ],
1293
+ "members": [
1257
1294
  {
1258
1295
  "kind": "field",
1259
- "name": "filled",
1296
+ "name": "hasError",
1260
1297
  "type": {
1261
1298
  "text": "boolean"
1262
1299
  },
1263
- "default": "false",
1264
- "description": "Draws a filled input.",
1265
- "attribute": "filled",
1266
- "reflects": true
1300
+ "privacy": "private",
1301
+ "default": "false"
1267
1302
  },
1268
1303
  {
1269
1304
  "kind": "field",
1270
- "name": "pill",
1305
+ "name": "image",
1271
1306
  "type": {
1272
- "text": "boolean"
1307
+ "text": "string"
1273
1308
  },
1274
- "default": "false",
1275
- "description": "Draws a pill-style input with rounded edges.",
1276
- "attribute": "pill",
1277
- "reflects": true
1309
+ "default": "''",
1310
+ "description": "The image source to use for the avatar.",
1311
+ "attribute": "image"
1278
1312
  },
1279
1313
  {
1280
1314
  "kind": "field",
@@ -1283,286 +1317,236 @@
1283
1317
  "text": "string"
1284
1318
  },
1285
1319
  "default": "''",
1286
- "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
1320
+ "description": "A label to use to describe the avatar to assistive devices.",
1287
1321
  "attribute": "label"
1288
1322
  },
1289
1323
  {
1290
1324
  "kind": "field",
1291
- "name": "helpText",
1325
+ "name": "initials",
1292
1326
  "type": {
1293
1327
  "text": "string"
1294
1328
  },
1295
1329
  "default": "''",
1296
- "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
1297
- "attribute": "help-text"
1330
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
1331
+ "attribute": "initials"
1298
1332
  },
1299
1333
  {
1300
1334
  "kind": "field",
1301
- "name": "disabled",
1335
+ "name": "loading",
1302
1336
  "type": {
1303
- "text": "boolean"
1337
+ "text": "'eager' | 'lazy'"
1304
1338
  },
1305
- "default": "false",
1306
- "description": "Disables the input.",
1307
- "attribute": "disabled",
1308
- "reflects": true
1339
+ "default": "'eager'",
1340
+ "description": "Indicates how the browser should load the image.",
1341
+ "attribute": "loading"
1309
1342
  },
1310
1343
  {
1311
1344
  "kind": "field",
1312
- "name": "form",
1345
+ "name": "shape",
1313
1346
  "type": {
1314
- "text": "string"
1347
+ "text": "'circle' | 'square' | 'rounded'"
1315
1348
  },
1316
- "default": "''",
1317
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
1318
- "attribute": "form",
1349
+ "default": "'circle'",
1350
+ "description": "The shape of the avatar.",
1351
+ "attribute": "shape",
1319
1352
  "reflects": true
1320
- },
1353
+ }
1354
+ ],
1355
+ "attributes": [
1321
1356
  {
1322
- "kind": "field",
1323
- "name": "required",
1357
+ "name": "image",
1324
1358
  "type": {
1325
- "text": "boolean"
1359
+ "text": "string"
1326
1360
  },
1327
- "default": "false",
1328
- "description": "Makes the input a required field.",
1329
- "attribute": "required",
1330
- "reflects": true
1361
+ "default": "''",
1362
+ "description": "The image source to use for the avatar.",
1363
+ "fieldName": "image"
1331
1364
  },
1332
1365
  {
1333
- "kind": "field",
1334
- "name": "inline",
1366
+ "name": "label",
1335
1367
  "type": {
1336
- "text": "boolean"
1368
+ "text": "string"
1337
1369
  },
1338
- "default": "false",
1339
- "description": "Display the input in the 'inline' form control style.",
1340
- "attribute": "inline",
1341
- "reflects": true
1370
+ "default": "''",
1371
+ "description": "A label to use to describe the avatar to assistive devices.",
1372
+ "fieldName": "label"
1342
1373
  },
1343
1374
  {
1344
- "kind": "field",
1345
- "name": "divider",
1375
+ "name": "initials",
1346
1376
  "type": {
1347
- "text": "boolean"
1377
+ "text": "string"
1348
1378
  },
1349
- "default": "false",
1350
- "description": "Indicates that the control should display a divider",
1351
- "attribute": "divider",
1352
- "reflects": true
1353
- },
1354
- {
1355
- "kind": "field",
1356
- "name": "validity",
1357
- "description": "Gets the validity state object",
1358
- "readonly": true
1359
- },
1360
- {
1361
- "kind": "field",
1362
- "name": "validationMessage",
1363
- "description": "Gets the validation message",
1364
- "readonly": true
1365
- },
1366
- {
1367
- "kind": "method",
1368
- "name": "handleBlur",
1369
- "privacy": "private"
1370
- },
1371
- {
1372
- "kind": "method",
1373
- "name": "handleFocus",
1374
- "privacy": "private"
1375
- },
1376
- {
1377
- "kind": "method",
1378
- "name": "focus",
1379
- "parameters": [
1380
- {
1381
- "name": "options",
1382
- "optional": true,
1383
- "type": {
1384
- "text": "FocusOptions"
1385
- }
1386
- }
1387
- ],
1388
- "description": "Sets focus on the input."
1389
- },
1390
- {
1391
- "kind": "method",
1392
- "name": "blur",
1393
- "description": "Removes focus from the input."
1394
- },
1395
- {
1396
- "kind": "method",
1397
- "name": "checkValidity",
1398
- "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
1379
+ "default": "''",
1380
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
1381
+ "fieldName": "initials"
1399
1382
  },
1400
1383
  {
1401
- "kind": "method",
1402
- "name": "getForm",
1403
- "return": {
1404
- "type": {
1405
- "text": "HTMLFormElement | null"
1406
- }
1384
+ "name": "loading",
1385
+ "type": {
1386
+ "text": "'eager' | 'lazy'"
1407
1387
  },
1408
- "description": "Gets the associated form, if one exists."
1409
- },
1410
- {
1411
- "kind": "method",
1412
- "name": "reportValidity",
1413
- "description": "Checks for validity and shows the browser's validation message if the control is invalid."
1388
+ "default": "'eager'",
1389
+ "description": "Indicates how the browser should load the image.",
1390
+ "fieldName": "loading"
1414
1391
  },
1415
1392
  {
1416
- "kind": "method",
1417
- "name": "setCustomValidity",
1418
- "parameters": [
1419
- {
1420
- "name": "message",
1421
- "type": {
1422
- "text": "string"
1423
- }
1424
- }
1425
- ],
1426
- "description": "Sets a custom validation message. Pass an empty string to restore validity."
1393
+ "name": "shape",
1394
+ "type": {
1395
+ "text": "'circle' | 'square' | 'rounded'"
1396
+ },
1397
+ "default": "'circle'",
1398
+ "description": "The shape of the avatar.",
1399
+ "fieldName": "shape"
1427
1400
  }
1428
1401
  ],
1429
- "events": [
1430
- {
1431
- "description": "Emitted when the control loses focus.",
1432
- "name": "flow-ui-blur",
1433
- "reactName": "onFlowUiBlur"
1434
- },
1435
- {
1436
- "description": "Emitted when an alteration to the control's value is committed by the user.",
1437
- "name": "flow-ui-change",
1438
- "reactName": "onFlowUiChange"
1439
- },
1440
- {
1441
- "description": "Emitted when the clear button is activated.",
1442
- "name": "flow-ui-clear",
1443
- "reactName": "onFlowUiClear"
1444
- },
1445
- {
1446
- "description": "Emitted when the control gains focus.",
1447
- "name": "flow-ui-focus",
1448
- "reactName": "onFlowUiFocus"
1449
- },
1402
+ "superclass": {
1403
+ "name": "FlowRdfElement",
1404
+ "module": "/src/internal/flow-ui-rdf-element"
1405
+ },
1406
+ "tagName": "flow-ui-avatar",
1407
+ "summary": "Avatars are used to represent a person or object.",
1408
+ "dependencies": [
1409
+ "flow-ui-icon"
1410
+ ],
1411
+ "customElement": true
1412
+ }
1413
+ ],
1414
+ "exports": [
1415
+ {
1416
+ "kind": "js",
1417
+ "name": "default",
1418
+ "declaration": {
1419
+ "name": "FlowUiAvatar",
1420
+ "module": "components/avatar/avatar.component.js"
1421
+ }
1422
+ }
1423
+ ]
1424
+ },
1425
+ {
1426
+ "kind": "javascript-module",
1427
+ "path": "components/avatar/avatar.js",
1428
+ "declarations": [],
1429
+ "exports": [
1430
+ {
1431
+ "kind": "js",
1432
+ "name": "default",
1433
+ "declaration": {
1434
+ "name": "FlowUiAvatar",
1435
+ "module": "components/avatar/avatar.js"
1436
+ }
1437
+ }
1438
+ ]
1439
+ },
1440
+ {
1441
+ "kind": "javascript-module",
1442
+ "path": "components/badge/badge.component.js",
1443
+ "declarations": [
1444
+ {
1445
+ "kind": "class",
1446
+ "description": "",
1447
+ "name": "FlowUiBadge",
1448
+ "cssParts": [
1450
1449
  {
1451
- "description": "Emitted when the control receives input.",
1452
- "name": "flow-ui-input",
1453
- "reactName": "onFlowUiInput"
1454
- },
1450
+ "description": "The component's base wrapper.",
1451
+ "name": "base"
1452
+ }
1453
+ ],
1454
+ "slots": [
1455
1455
  {
1456
- "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
1457
- "name": "flow-ui-invalid",
1458
- "reactName": "onFlowUiInvalid"
1456
+ "description": "The badge's content.",
1457
+ "name": ""
1459
1458
  }
1460
1459
  ],
1461
- "attributes": [
1460
+ "members": [
1462
1461
  {
1463
- "name": "size",
1462
+ "kind": "field",
1463
+ "name": "variant",
1464
1464
  "type": {
1465
- "text": "'small' | 'medium' | 'large'"
1465
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1466
1466
  },
1467
- "default": "'medium'",
1468
- "description": "The input's size.",
1469
- "fieldName": "size"
1467
+ "default": "'primary'",
1468
+ "description": "The badge's theme variant.",
1469
+ "attribute": "variant",
1470
+ "reflects": true
1470
1471
  },
1471
1472
  {
1472
- "name": "filled",
1473
+ "kind": "field",
1474
+ "name": "size",
1473
1475
  "type": {
1474
- "text": "boolean"
1476
+ "text": "'small' | 'medium' | 'large'"
1475
1477
  },
1476
- "default": "false",
1477
- "description": "Draws a filled input.",
1478
- "fieldName": "filled"
1478
+ "default": "'medium'",
1479
+ "description": "The badge size.",
1480
+ "attribute": "size",
1481
+ "reflects": true
1479
1482
  },
1480
1483
  {
1484
+ "kind": "field",
1481
1485
  "name": "pill",
1482
1486
  "type": {
1483
1487
  "text": "boolean"
1484
1488
  },
1485
1489
  "default": "false",
1486
- "description": "Draws a pill-style input with rounded edges.",
1487
- "fieldName": "pill"
1488
- },
1489
- {
1490
- "name": "label",
1491
- "type": {
1492
- "text": "string"
1493
- },
1494
- "default": "''",
1495
- "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
1496
- "fieldName": "label"
1497
- },
1498
- {
1499
- "name": "help-text",
1500
- "type": {
1501
- "text": "string"
1502
- },
1503
- "default": "''",
1504
- "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
1505
- "fieldName": "helpText"
1490
+ "description": "Draws a pill-style badge with rounded edges.",
1491
+ "attribute": "pill",
1492
+ "reflects": true
1506
1493
  },
1507
1494
  {
1508
- "name": "disabled",
1495
+ "kind": "field",
1496
+ "name": "pulse",
1509
1497
  "type": {
1510
1498
  "text": "boolean"
1511
1499
  },
1512
1500
  "default": "false",
1513
- "description": "Disables the input.",
1514
- "fieldName": "disabled"
1515
- },
1501
+ "description": "Makes the badge pulsate to draw attention.",
1502
+ "attribute": "pulse",
1503
+ "reflects": true
1504
+ }
1505
+ ],
1506
+ "attributes": [
1516
1507
  {
1517
- "name": "form",
1508
+ "name": "variant",
1518
1509
  "type": {
1519
- "text": "string"
1510
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1520
1511
  },
1521
- "default": "''",
1522
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
1523
- "fieldName": "form"
1512
+ "default": "'primary'",
1513
+ "description": "The badge's theme variant.",
1514
+ "fieldName": "variant"
1524
1515
  },
1525
1516
  {
1526
- "name": "required",
1517
+ "name": "size",
1527
1518
  "type": {
1528
- "text": "boolean"
1519
+ "text": "'small' | 'medium' | 'large'"
1529
1520
  },
1530
- "default": "false",
1531
- "description": "Makes the input a required field.",
1532
- "fieldName": "required"
1521
+ "default": "'medium'",
1522
+ "description": "The badge size.",
1523
+ "fieldName": "size"
1533
1524
  },
1534
1525
  {
1535
- "name": "inline",
1526
+ "name": "pill",
1536
1527
  "type": {
1537
1528
  "text": "boolean"
1538
1529
  },
1539
1530
  "default": "false",
1540
- "description": "Display the input in the 'inline' form control style.",
1541
- "fieldName": "inline"
1531
+ "description": "Draws a pill-style badge with rounded edges.",
1532
+ "fieldName": "pill"
1542
1533
  },
1543
1534
  {
1544
- "name": "divider",
1535
+ "name": "pulse",
1545
1536
  "type": {
1546
1537
  "text": "boolean"
1547
1538
  },
1548
1539
  "default": "false",
1549
- "description": "Indicates that the control should display a divider",
1550
- "fieldName": "divider"
1540
+ "description": "Makes the badge pulsate to draw attention.",
1541
+ "fieldName": "pulse"
1551
1542
  }
1552
1543
  ],
1553
1544
  "superclass": {
1554
- "name": "FlowRdfFormControl",
1545
+ "name": "FlowRdfElement",
1555
1546
  "module": "/src/internal/flow-ui-rdf-element"
1556
1547
  },
1557
- "tagName": "flow-ui-base-control",
1558
- "summary": "Inputs collect data from the user.",
1559
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input",
1560
- "status": "stable",
1561
- "since": "2.0",
1562
- "dependencies": [
1563
- "flow-ui-icon",
1564
- "flow-ui-icon-button"
1565
- ],
1548
+ "tagName": "flow-ui-badge",
1549
+ "summary": "Badges are used to draw attention and display statuses or counts.",
1566
1550
  "customElement": true
1567
1551
  }
1568
1552
  ],
@@ -1571,129 +1555,145 @@
1571
1555
  "kind": "js",
1572
1556
  "name": "default",
1573
1557
  "declaration": {
1574
- "name": "FlowUiBaseControl",
1575
- "module": "components/base-control/base-control.component.js"
1558
+ "name": "FlowUiBadge",
1559
+ "module": "components/badge/badge.component.js"
1576
1560
  }
1577
1561
  }
1578
1562
  ]
1579
1563
  },
1580
1564
  {
1581
1565
  "kind": "javascript-module",
1582
- "path": "components/base-control/base-control.js",
1566
+ "path": "components/badge/badge.js",
1583
1567
  "declarations": [],
1584
1568
  "exports": [
1585
- {
1586
- "kind": "js",
1587
- "name": "*",
1588
- "declaration": {
1589
- "name": "*",
1590
- "package": "./base-control.component"
1591
- }
1592
- },
1593
1569
  {
1594
1570
  "kind": "js",
1595
1571
  "name": "default",
1596
1572
  "declaration": {
1597
- "name": "FlowUiBaseControl",
1598
- "module": "components/base-control/base-control.js"
1573
+ "name": "FlowUiBadge",
1574
+ "module": "components/badge/badge.js"
1599
1575
  }
1600
1576
  }
1601
1577
  ]
1602
1578
  },
1603
1579
  {
1604
1580
  "kind": "javascript-module",
1605
- "path": "components/breadcrumb/breadcrumb.component.js",
1581
+ "path": "components/breadcrumb-item/breadcrumb-item.component.js",
1606
1582
  "declarations": [
1607
1583
  {
1608
1584
  "kind": "class",
1609
1585
  "description": "",
1610
- "name": "FlowUiBreadcrumb",
1586
+ "name": "FlowUiBreadcrumbItem",
1611
1587
  "cssParts": [
1612
1588
  {
1613
1589
  "description": "The component's base wrapper.",
1614
1590
  "name": "base"
1591
+ },
1592
+ {
1593
+ "description": "The breadcrumb item's label.",
1594
+ "name": "label"
1595
+ },
1596
+ {
1597
+ "description": "The container that wraps the prefix.",
1598
+ "name": "prefix"
1599
+ },
1600
+ {
1601
+ "description": "The container that wraps the suffix.",
1602
+ "name": "suffix"
1603
+ },
1604
+ {
1605
+ "description": "The container that wraps the separator.",
1606
+ "name": "separator"
1615
1607
  }
1616
1608
  ],
1617
1609
  "slots": [
1618
1610
  {
1619
- "description": "One or more breadcrumb items to display.",
1611
+ "description": "The breadcrumb item's label.",
1620
1612
  "name": ""
1621
1613
  },
1622
1614
  {
1623
- "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
1615
+ "description": "An optional prefix, usually an icon or icon button.",
1616
+ "name": "prefix"
1617
+ },
1618
+ {
1619
+ "description": "An optional suffix, usually an icon or icon button.",
1620
+ "name": "suffix"
1621
+ },
1622
+ {
1623
+ "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.",
1624
1624
  "name": "separator"
1625
1625
  }
1626
1626
  ],
1627
1627
  "members": [
1628
1628
  {
1629
1629
  "kind": "field",
1630
- "name": "localize",
1630
+ "name": "hasSlotController",
1631
1631
  "privacy": "private",
1632
1632
  "readonly": true,
1633
- "default": "new LocalizeController(this)"
1634
- },
1635
- {
1636
- "kind": "field",
1637
- "name": "separatorDir",
1638
- "privacy": "private"
1633
+ "default": "new HasSlotController(this, 'prefix', 'suffix')"
1639
1634
  },
1640
1635
  {
1641
1636
  "kind": "field",
1642
- "name": "defaultSlot",
1637
+ "name": "href",
1643
1638
  "type": {
1644
- "text": "HTMLSlotElement"
1639
+ "text": "string | undefined"
1645
1640
  },
1646
- "privacy": "private"
1641
+ "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1642
+ "attribute": "href"
1647
1643
  },
1648
1644
  {
1649
1645
  "kind": "field",
1650
- "name": "separatorSlot",
1646
+ "name": "target",
1651
1647
  "type": {
1652
- "text": "HTMLSlotElement"
1648
+ "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1653
1649
  },
1654
- "privacy": "private"
1650
+ "description": "Tells the browser where to open the link. Only used when `href` is set.",
1651
+ "attribute": "target"
1655
1652
  },
1656
1653
  {
1657
1654
  "kind": "field",
1658
- "name": "label",
1655
+ "name": "rel",
1659
1656
  "type": {
1660
1657
  "text": "string"
1661
1658
  },
1662
- "default": "''",
1663
- "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
1664
- "attribute": "label"
1665
- },
1666
- {
1667
- "kind": "method",
1668
- "name": "getSeparator",
1669
- "privacy": "private"
1670
- },
1671
- {
1672
- "kind": "method",
1673
- "name": "handleSlotChange",
1674
- "privacy": "private"
1659
+ "default": "'noreferrer noopener'",
1660
+ "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1661
+ "attribute": "rel"
1675
1662
  }
1676
1663
  ],
1677
1664
  "attributes": [
1678
1665
  {
1679
- "name": "label",
1666
+ "name": "href",
1667
+ "type": {
1668
+ "text": "string | undefined"
1669
+ },
1670
+ "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1671
+ "fieldName": "href"
1672
+ },
1673
+ {
1674
+ "name": "target",
1675
+ "type": {
1676
+ "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1677
+ },
1678
+ "description": "Tells the browser where to open the link. Only used when `href` is set.",
1679
+ "fieldName": "target"
1680
+ },
1681
+ {
1682
+ "name": "rel",
1680
1683
  "type": {
1681
1684
  "text": "string"
1682
1685
  },
1683
- "default": "''",
1684
- "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
1685
- "fieldName": "label"
1686
+ "default": "'noreferrer noopener'",
1687
+ "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1688
+ "fieldName": "rel"
1686
1689
  }
1687
1690
  ],
1688
1691
  "superclass": {
1689
1692
  "name": "FlowRdfElement",
1690
1693
  "module": "/src/internal/flow-ui-rdf-element"
1691
1694
  },
1692
- "tagName": "flow-ui-breadcrumb",
1693
- "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
1694
- "dependencies": [
1695
- "flow-ui-icon"
1696
- ],
1695
+ "tagName": "flow-ui-breadcrumb-item",
1696
+ "summary": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.",
1697
1697
  "customElement": true
1698
1698
  }
1699
1699
  ],
@@ -1702,23 +1702,23 @@
1702
1702
  "kind": "js",
1703
1703
  "name": "default",
1704
1704
  "declaration": {
1705
- "name": "FlowUiBreadcrumb",
1706
- "module": "components/breadcrumb/breadcrumb.component.js"
1705
+ "name": "FlowUiBreadcrumbItem",
1706
+ "module": "components/breadcrumb-item/breadcrumb-item.component.js"
1707
1707
  }
1708
1708
  }
1709
1709
  ]
1710
1710
  },
1711
1711
  {
1712
1712
  "kind": "javascript-module",
1713
- "path": "components/breadcrumb/breadcrumb.js",
1713
+ "path": "components/breadcrumb-item/breadcrumb-item.js",
1714
1714
  "declarations": [],
1715
1715
  "exports": [
1716
1716
  {
1717
1717
  "kind": "js",
1718
1718
  "name": "default",
1719
1719
  "declaration": {
1720
- "name": "FlowUiBreadcrumb",
1721
- "module": "components/breadcrumb/breadcrumb.js"
1720
+ "name": "FlowUiBreadcrumbItem",
1721
+ "module": "components/breadcrumb-item/breadcrumb-item.js"
1722
1722
  }
1723
1723
  }
1724
1724
  ]
@@ -24987,6 +24987,6 @@
24987
24987
  ],
24988
24988
  "package": {
24989
24989
  "name": "@emuanalytics/flow-rdf-ui",
24990
- "version": "4.1.2"
24990
+ "version": "4.1.3"
24991
24991
  }
24992
24992
  }