@emuanalytics/flow-rdf-ui 4.1.4 → 4.1.5

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.
@@ -14,6 +14,7 @@ import FlowUiPopup from '../popup/popup.component.mjs';
14
14
  import styles from './autocomplete.styles.mjs';
15
15
  import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.mjs';
16
16
  import { stopAnimations, animateTo } from '../../internal/animate.mjs';
17
+ import { waitForEvent } from '../../internal/event.mjs';
17
18
 
18
19
  var __defProp = Object.defineProperty;
19
20
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -158,7 +159,6 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
158
159
  (inputText) => {
159
160
  this.inputText = inputText;
160
161
  this.emit("flow-ui-input");
161
- this.toggleListbox();
162
162
  },
163
163
  this.debounceDelay,
164
164
  { leading: false, trailing: true, context: this }
@@ -203,11 +203,12 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
203
203
  if (option && !option.disabled) {
204
204
  this.setValue(option.value, { emitChangeEvent: true });
205
205
  this.input.focus();
206
- this.hide();
206
+ await waitForEvent(this, "flow-ui-change");
207
+ this.blur();
207
208
  }
208
209
  }
209
210
  /** @internal */
210
- handleKeyDown(event) {
211
+ async handleKeyDown(event) {
211
212
  if (event.key === "Escape" && this.open) {
212
213
  event.preventDefault();
213
214
  event.stopPropagation();
@@ -250,8 +251,8 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
250
251
  this.setSelectedOption(this.currentOption);
251
252
  this.setValue(this.currentOption.value, { emitChangeEvent: true });
252
253
  }
253
- this.hide();
254
- this.input.focus({ preventScroll: true });
254
+ await waitForEvent(this, "flow-ui-change");
255
+ this.blur();
255
256
  }
256
257
  }
257
258
  /** @internal Add event listeners to the document when the dropdown is opened. */
@@ -334,7 +335,7 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
334
335
  /** Blurs from the control. */
335
336
  blur() {
336
337
  if (this.hasFocus) {
337
- this.input.focus({ preventScroll: true });
338
+ this.input.blur();
338
339
  this.hasFocus = false;
339
340
  this.toggleListbox();
340
341
  this.removeListenersForDropdown();
@@ -505,6 +506,7 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
505
506
  role="listbox"
506
507
  part="listbox"
507
508
  class="autocomplete__listbox"
509
+ aria-labelledby="label"
508
510
  aria-expanded=${this.open ? "true" : "false"}
509
511
  aria-multiselectable="false"
510
512
  @mouseup=${this.handleListboxClick}
@@ -36,6 +36,7 @@ class Ticker {
36
36
  }
37
37
  clearInterval(this.timer);
38
38
  this.timer = void 0;
39
+ this.nextUpdateAt = DateTime.fromMillis(0);
39
40
  this.notifySubscribers(this.currentDateTime, "major");
40
41
  }
41
42
  setZone(zone) {
@@ -855,151 +855,80 @@
855
855
  },
856
856
  {
857
857
  "kind": "javascript-module",
858
- "path": "components/badge/badge.component.js",
858
+ "path": "components/autocomplete/autocomplete.component.js",
859
859
  "declarations": [
860
860
  {
861
861
  "kind": "class",
862
862
  "description": "",
863
- "name": "FlowUiBadge",
863
+ "name": "FlowUiAutocomplete",
864
864
  "cssParts": [
865
865
  {
866
- "description": "The component's base wrapper.",
867
- "name": "base"
868
- }
869
- ],
870
- "slots": [
866
+ "description": "The form control that wraps the label, input, and help text.",
867
+ "name": "form-control"
868
+ },
871
869
  {
872
- "description": "The badge's content.",
873
- "name": ""
874
- }
875
- ],
876
- "members": [
870
+ "description": "The label's wrapper.",
871
+ "name": "form-control-label"
872
+ },
877
873
  {
878
- "kind": "field",
879
- "name": "variant",
880
- "type": {
881
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
882
- },
883
- "default": "'primary'",
884
- "description": "The badge's theme variant.",
885
- "attribute": "variant",
886
- "reflects": true
874
+ "description": "The select's wrapper.",
875
+ "name": "form-control-input"
887
876
  },
888
877
  {
889
- "kind": "field",
890
- "name": "size",
891
- "type": {
892
- "text": "'small' | 'medium' | 'large'"
893
- },
894
- "default": "'medium'",
895
- "description": "The badge size.",
896
- "attribute": "size",
897
- "reflects": true
878
+ "description": "The help text's wrapper.",
879
+ "name": "form-control-help-text"
898
880
  },
899
881
  {
900
- "kind": "field",
901
- "name": "pill",
902
- "type": {
903
- "text": "boolean"
904
- },
905
- "default": "false",
906
- "description": "Draws a pill-style badge with rounded edges.",
907
- "attribute": "pill",
908
- "reflects": true
882
+ "description": "The container the wraps the prefix, suffix, combobox, clear icon, and expand button.",
883
+ "name": "combobox"
909
884
  },
910
885
  {
911
- "kind": "field",
912
- "name": "pulse",
913
- "type": {
914
- "text": "boolean"
915
- },
916
- "default": "false",
917
- "description": "Makes the badge pulsate to draw attention.",
918
- "attribute": "pulse",
919
- "reflects": true
886
+ "description": "The container that wraps the prefix slot.",
887
+ "name": "prefix"
888
+ },
889
+ {
890
+ "description": "The container that wraps the suffix slot.",
891
+ "name": "suffix"
892
+ },
893
+ {
894
+ "description": "The element that displays the selected option's label, an `<input>` element.",
895
+ "name": "display-input"
896
+ },
897
+ {
898
+ "description": "The listbox container where options are slotted.",
899
+ "name": "listbox"
900
+ },
901
+ {
902
+ "description": "The clear button.",
903
+ "name": "clear-button"
920
904
  }
921
905
  ],
922
- "attributes": [
906
+ "slots": [
923
907
  {
924
- "name": "variant",
925
- "type": {
926
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
927
- },
928
- "default": "'primary'",
929
- "description": "The badge's theme variant.",
930
- "fieldName": "variant"
908
+ "description": "The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.",
909
+ "name": ""
931
910
  },
932
911
  {
933
- "name": "size",
934
- "type": {
935
- "text": "'small' | 'medium' | 'large'"
936
- },
937
- "default": "'medium'",
938
- "description": "The badge size.",
939
- "fieldName": "size"
912
+ "description": "The input's label. Alternatively, you can use the `label` attribute.",
913
+ "name": "label"
940
914
  },
941
915
  {
942
- "name": "pill",
943
- "type": {
944
- "text": "boolean"
945
- },
946
- "default": "false",
947
- "description": "Draws a pill-style badge with rounded edges.",
948
- "fieldName": "pill"
916
+ "description": "Used to prepend a presentational icon or similar element to the combobox.",
917
+ "name": "prefix"
949
918
  },
950
919
  {
951
- "name": "pulse",
952
- "type": {
953
- "text": "boolean"
954
- },
955
- "default": "false",
956
- "description": "Makes the badge pulsate to draw attention.",
957
- "fieldName": "pulse"
920
+ "description": "Used to append a presentational icon or similar element to the combobox.",
921
+ "name": "suffix"
922
+ },
923
+ {
924
+ "description": "An icon to use in lieu of the default clear icon.",
925
+ "name": "clear-icon"
926
+ },
927
+ {
928
+ "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
929
+ "name": "help-text"
958
930
  }
959
931
  ],
960
- "superclass": {
961
- "name": "FlowRdfElement",
962
- "module": "/src/internal/flow-ui-rdf-element"
963
- },
964
- "tagName": "flow-ui-badge",
965
- "summary": "Badges are used to draw attention and display statuses or counts.",
966
- "customElement": true
967
- }
968
- ],
969
- "exports": [
970
- {
971
- "kind": "js",
972
- "name": "default",
973
- "declaration": {
974
- "name": "FlowUiBadge",
975
- "module": "components/badge/badge.component.js"
976
- }
977
- }
978
- ]
979
- },
980
- {
981
- "kind": "javascript-module",
982
- "path": "components/badge/badge.js",
983
- "declarations": [],
984
- "exports": [
985
- {
986
- "kind": "js",
987
- "name": "default",
988
- "declaration": {
989
- "name": "FlowUiBadge",
990
- "module": "components/badge/badge.js"
991
- }
992
- }
993
- ]
994
- },
995
- {
996
- "kind": "javascript-module",
997
- "path": "components/autocomplete/autocomplete.component.js",
998
- "declarations": [
999
- {
1000
- "kind": "class",
1001
- "description": "",
1002
- "name": "FlowUiAutocomplete",
1003
932
  "members": [
1004
933
  {
1005
934
  "kind": "field",
@@ -1655,6 +1584,145 @@
1655
1584
  }
1656
1585
  ]
1657
1586
  },
1587
+ {
1588
+ "kind": "javascript-module",
1589
+ "path": "components/badge/badge.component.js",
1590
+ "declarations": [
1591
+ {
1592
+ "kind": "class",
1593
+ "description": "",
1594
+ "name": "FlowUiBadge",
1595
+ "cssParts": [
1596
+ {
1597
+ "description": "The component's base wrapper.",
1598
+ "name": "base"
1599
+ }
1600
+ ],
1601
+ "slots": [
1602
+ {
1603
+ "description": "The badge's content.",
1604
+ "name": ""
1605
+ }
1606
+ ],
1607
+ "members": [
1608
+ {
1609
+ "kind": "field",
1610
+ "name": "variant",
1611
+ "type": {
1612
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1613
+ },
1614
+ "default": "'primary'",
1615
+ "description": "The badge's theme variant.",
1616
+ "attribute": "variant",
1617
+ "reflects": true
1618
+ },
1619
+ {
1620
+ "kind": "field",
1621
+ "name": "size",
1622
+ "type": {
1623
+ "text": "'small' | 'medium' | 'large'"
1624
+ },
1625
+ "default": "'medium'",
1626
+ "description": "The badge size.",
1627
+ "attribute": "size",
1628
+ "reflects": true
1629
+ },
1630
+ {
1631
+ "kind": "field",
1632
+ "name": "pill",
1633
+ "type": {
1634
+ "text": "boolean"
1635
+ },
1636
+ "default": "false",
1637
+ "description": "Draws a pill-style badge with rounded edges.",
1638
+ "attribute": "pill",
1639
+ "reflects": true
1640
+ },
1641
+ {
1642
+ "kind": "field",
1643
+ "name": "pulse",
1644
+ "type": {
1645
+ "text": "boolean"
1646
+ },
1647
+ "default": "false",
1648
+ "description": "Makes the badge pulsate to draw attention.",
1649
+ "attribute": "pulse",
1650
+ "reflects": true
1651
+ }
1652
+ ],
1653
+ "attributes": [
1654
+ {
1655
+ "name": "variant",
1656
+ "type": {
1657
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1658
+ },
1659
+ "default": "'primary'",
1660
+ "description": "The badge's theme variant.",
1661
+ "fieldName": "variant"
1662
+ },
1663
+ {
1664
+ "name": "size",
1665
+ "type": {
1666
+ "text": "'small' | 'medium' | 'large'"
1667
+ },
1668
+ "default": "'medium'",
1669
+ "description": "The badge size.",
1670
+ "fieldName": "size"
1671
+ },
1672
+ {
1673
+ "name": "pill",
1674
+ "type": {
1675
+ "text": "boolean"
1676
+ },
1677
+ "default": "false",
1678
+ "description": "Draws a pill-style badge with rounded edges.",
1679
+ "fieldName": "pill"
1680
+ },
1681
+ {
1682
+ "name": "pulse",
1683
+ "type": {
1684
+ "text": "boolean"
1685
+ },
1686
+ "default": "false",
1687
+ "description": "Makes the badge pulsate to draw attention.",
1688
+ "fieldName": "pulse"
1689
+ }
1690
+ ],
1691
+ "superclass": {
1692
+ "name": "FlowRdfElement",
1693
+ "module": "/src/internal/flow-ui-rdf-element"
1694
+ },
1695
+ "tagName": "flow-ui-badge",
1696
+ "summary": "Badges are used to draw attention and display statuses or counts.",
1697
+ "customElement": true
1698
+ }
1699
+ ],
1700
+ "exports": [
1701
+ {
1702
+ "kind": "js",
1703
+ "name": "default",
1704
+ "declaration": {
1705
+ "name": "FlowUiBadge",
1706
+ "module": "components/badge/badge.component.js"
1707
+ }
1708
+ }
1709
+ ]
1710
+ },
1711
+ {
1712
+ "kind": "javascript-module",
1713
+ "path": "components/badge/badge.js",
1714
+ "declarations": [],
1715
+ "exports": [
1716
+ {
1717
+ "kind": "js",
1718
+ "name": "default",
1719
+ "declaration": {
1720
+ "name": "FlowUiBadge",
1721
+ "module": "components/badge/badge.js"
1722
+ }
1723
+ }
1724
+ ]
1725
+ },
1658
1726
  {
1659
1727
  "kind": "javascript-module",
1660
1728
  "path": "components/base-control/base-control.component.js",
@@ -25650,6 +25718,6 @@
25650
25718
  ],
25651
25719
  "package": {
25652
25720
  "name": "@emuanalytics/flow-rdf-ui",
25653
- "version": "4.1.2"
25721
+ "version": "4.1.5"
25654
25722
  }
25655
25723
  }
package/dist/index.d.mts CHANGED
@@ -1938,6 +1938,13 @@ declare global {
1938
1938
  * @dependency flow-ui-popup
1939
1939
  * @dependency flow-ui-icon
1940
1940
  *
1941
+ * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
1942
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
1943
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
1944
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
1945
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
1946
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
1947
+ *
1941
1948
  * @event flow-ui-input - Emitted when the display value changes.
1942
1949
  * @event flow-ui-change - Emitted when the input value changes.
1943
1950
  * @event flow-ui-focus - Emitted when the input is focused.
@@ -1952,6 +1959,17 @@ declare global {
1952
1959
  * @event flow-ui-validate-complete - Emitted when the input is validated and the validity state is updated.
1953
1960
  * @event flow-ui-validate-error - Emitted when the input is validated and an error occurs.
1954
1961
  * @event flow-ui-validate-success - Emitted when the input is validated and no errors occur.
1962
+ *
1963
+ * @csspart form-control - The form control that wraps the label, input, and help text.
1964
+ * @csspart form-control-label - The label's wrapper.
1965
+ * @csspart form-control-input - The select's wrapper.
1966
+ * @csspart form-control-help-text - The help text's wrapper.
1967
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
1968
+ * @csspart prefix - The container that wraps the prefix slot.
1969
+ * @csspart suffix - The container that wraps the suffix slot.
1970
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
1971
+ * @csspart listbox - The listbox container where options are slotted.
1972
+ * @csspart clear-button - The clear button.
1955
1973
  */
1956
1974
  declare class FlowUiAutocomplete extends FlowRdfFormControl {
1957
1975
  static styles: CSSResultGroup;
package/dist/index.d.ts CHANGED
@@ -1938,6 +1938,13 @@ declare global {
1938
1938
  * @dependency flow-ui-popup
1939
1939
  * @dependency flow-ui-icon
1940
1940
  *
1941
+ * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
1942
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
1943
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
1944
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
1945
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
1946
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
1947
+ *
1941
1948
  * @event flow-ui-input - Emitted when the display value changes.
1942
1949
  * @event flow-ui-change - Emitted when the input value changes.
1943
1950
  * @event flow-ui-focus - Emitted when the input is focused.
@@ -1952,6 +1959,17 @@ declare global {
1952
1959
  * @event flow-ui-validate-complete - Emitted when the input is validated and the validity state is updated.
1953
1960
  * @event flow-ui-validate-error - Emitted when the input is validated and an error occurs.
1954
1961
  * @event flow-ui-validate-success - Emitted when the input is validated and no errors occur.
1962
+ *
1963
+ * @csspart form-control - The form control that wraps the label, input, and help text.
1964
+ * @csspart form-control-label - The label's wrapper.
1965
+ * @csspart form-control-input - The select's wrapper.
1966
+ * @csspart form-control-help-text - The help text's wrapper.
1967
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
1968
+ * @csspart prefix - The container that wraps the prefix slot.
1969
+ * @csspart suffix - The container that wraps the suffix slot.
1970
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
1971
+ * @csspart listbox - The listbox container where options are slotted.
1972
+ * @csspart clear-button - The clear button.
1955
1973
  */
1956
1974
  declare class FlowUiAutocomplete extends FlowRdfFormControl {
1957
1975
  static styles: CSSResultGroup;
@@ -1,3 +1,3 @@
1
- const version = "4.1.2";
1
+ const version = "4.1.5";
2
2
 
3
3
  export { version };
@@ -133,47 +133,9 @@
133
133
  ],
134
134
  "references": []
135
135
  },
136
- {
137
- "name": "flow-ui-badge",
138
- "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
139
- "attributes": [
140
- {
141
- "name": "variant",
142
- "description": "The badge's theme variant.",
143
- "values": [
144
- { "name": "primary" },
145
- { "name": "secondary" },
146
- { "name": "success" },
147
- { "name": "neutral" },
148
- { "name": "warning" },
149
- { "name": "danger" }
150
- ]
151
- },
152
- {
153
- "name": "size",
154
- "description": "The badge size.",
155
- "values": [
156
- { "name": "small" },
157
- { "name": "medium" },
158
- { "name": "large" }
159
- ]
160
- },
161
- {
162
- "name": "pill",
163
- "description": "Draws a pill-style badge with rounded edges.",
164
- "values": []
165
- },
166
- {
167
- "name": "pulse",
168
- "description": "Makes the badge pulsate to draw attention.",
169
- "values": []
170
- }
171
- ],
172
- "references": []
173
- },
174
136
  {
175
137
  "name": "flow-ui-autocomplete",
176
- "description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input",
138
+ "description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **clear-button** - The clear button.",
177
139
  "attributes": [
178
140
  {
179
141
  "name": "size",
@@ -270,6 +232,44 @@
270
232
  ],
271
233
  "references": []
272
234
  },
235
+ {
236
+ "name": "flow-ui-badge",
237
+ "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
238
+ "attributes": [
239
+ {
240
+ "name": "variant",
241
+ "description": "The badge's theme variant.",
242
+ "values": [
243
+ { "name": "primary" },
244
+ { "name": "secondary" },
245
+ { "name": "success" },
246
+ { "name": "neutral" },
247
+ { "name": "warning" },
248
+ { "name": "danger" }
249
+ ]
250
+ },
251
+ {
252
+ "name": "size",
253
+ "description": "The badge size.",
254
+ "values": [
255
+ { "name": "small" },
256
+ { "name": "medium" },
257
+ { "name": "large" }
258
+ ]
259
+ },
260
+ {
261
+ "name": "pill",
262
+ "description": "Draws a pill-style badge with rounded edges.",
263
+ "values": []
264
+ },
265
+ {
266
+ "name": "pulse",
267
+ "description": "Makes the badge pulsate to draw attention.",
268
+ "values": []
269
+ }
270
+ ],
271
+ "references": []
272
+ },
273
273
  {
274
274
  "name": "flow-ui-base-control",
275
275
  "description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emuanalytics/flow-rdf-ui",
3
- "version": "4.1.4",
3
+ "version": "4.1.5",
4
4
  "type": "module",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",