@kubex/zinc 1.1.78 → 1.1.80

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 (34) hide show
  1. package/dist/custom-elements.json +1149 -130
  2. package/dist/vscode.html-custom-data.json +175 -1
  3. package/dist/web-types.json +396 -2
  4. package/dist/zn.d.ts +384 -0
  5. package/dist/zn.min.js +350 -295
  6. package/docs/pages/components/inline-edit.md +21 -0
  7. package/docs/pages/components/rating.md +2 -1
  8. package/docs/pages/components/slash-item.md +126 -0
  9. package/docs/pages/components/slash-menu.md +168 -0
  10. package/docs/pages/components/textarea.md +148 -0
  11. package/docs/pages/components/translations.md +34 -0
  12. package/package.json +1 -1
  13. package/src/components/inline-edit/inline-edit.component.ts +31 -0
  14. package/src/components/inline-edit/inline-edit.test.ts +83 -1
  15. package/src/components/rating/rating.component.ts +10 -1
  16. package/src/components/rating/rating.scss +6 -9
  17. package/src/components/slash-item/index.ts +12 -0
  18. package/src/components/slash-item/slash-item.component.ts +76 -0
  19. package/src/components/slash-item/slash-item.scss +5 -0
  20. package/src/components/slash-menu/index.ts +14 -0
  21. package/src/components/slash-menu/slash-menu-controller.ts +361 -0
  22. package/src/components/slash-menu/slash-menu-items.ts +122 -0
  23. package/src/components/slash-menu/slash-menu.component.ts +305 -0
  24. package/src/components/slash-menu/slash-menu.scss +120 -0
  25. package/src/components/slash-menu/slash-menu.test.ts +154 -0
  26. package/src/components/textarea/textarea.component.ts +143 -0
  27. package/src/components/textarea/textarea.test.ts +310 -2
  28. package/src/components/translations/translations.component.ts +31 -0
  29. package/src/components/translations/translations.test.ts +89 -1
  30. package/src/events/events.ts +2 -0
  31. package/src/events/zn-slash-insert.ts +9 -0
  32. package/src/events/zn-slash-select.ts +9 -0
  33. package/src/utilities/caret-position.ts +118 -0
  34. package/src/zinc.ts +3 -0
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@kubex/zinc",
4
- "version": "1.1.78",
4
+ "version": "1.1.80",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -4571,6 +4571,26 @@
4571
4571
  }
4572
4572
  },
4573
4573
  { "name": "textarea-rows", "value": { "type": "1" } },
4574
+ {
4575
+ "name": "slash-items",
4576
+ "description": "Quick insertions offered by the slash menu of a `textarea` input. Accepts a JSON array of items, or the\nshorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Forwarded to the inner `zn-textarea`.",
4577
+ "value": { "type": "SlashMenuItem[]", "default": "[]" }
4578
+ },
4579
+ {
4580
+ "name": "slash-preset",
4581
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
4582
+ "value": { "type": "string", "default": "''" }
4583
+ },
4584
+ {
4585
+ "name": "slash-trigger",
4586
+ "description": "The characters that open the slash menu.",
4587
+ "value": { "type": "string", "default": "'/'" }
4588
+ },
4589
+ {
4590
+ "name": "slash-heading",
4591
+ "description": "The heading shown above the slash menu's items.",
4592
+ "value": { "type": "string", "default": "'Insert'" }
4593
+ },
4574
4594
  {
4575
4595
  "name": "options",
4576
4596
  "value": { "type": "{ [key: string]: string }", "default": "{}" }
@@ -4666,6 +4686,31 @@
4666
4686
  "type": "'select' | 'text' | 'data-select' | 'number' | 'textarea'"
4667
4687
  },
4668
4688
  { "name": "textareaRows", "type": "1" },
4689
+ {
4690
+ "name": "slashItems",
4691
+ "description": "Quick insertions offered by the slash menu of a `textarea` input. Accepts a JSON array of items, or the\nshorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Forwarded to the inner `zn-textarea`.",
4692
+ "type": "SlashMenuItem[]"
4693
+ },
4694
+ {
4695
+ "name": "slashPreset",
4696
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
4697
+ "type": "string"
4698
+ },
4699
+ {
4700
+ "name": "slashTrigger",
4701
+ "description": "The characters that open the slash menu.",
4702
+ "type": "string"
4703
+ },
4704
+ {
4705
+ "name": "slashHeading",
4706
+ "description": "The heading shown above the slash menu's items.",
4707
+ "type": "string"
4708
+ },
4709
+ {
4710
+ "name": "slashItemsProvider",
4711
+ "description": "Resolves additional slash menu items each time the menu opens. JavaScript only.",
4712
+ "type": "(query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]> | undefined"
4713
+ },
4669
4714
  { "name": "options", "type": "{ [key: string]: string }" },
4670
4715
  { "name": "selectProvider", "type": "string" },
4671
4716
  { "name": "iconPosition", "type": "'start' | 'end' | 'none'" },
@@ -8670,6 +8715,240 @@
8670
8715
  "events": []
8671
8716
  }
8672
8717
  },
8718
+ {
8719
+ "name": "zn-slash-item",
8720
+ "description": "Declares a single insertion for a slash menu. Renders nothing itself — it describes an\nentry for the component it is slotted into, e.g. `<zn-textarea>`'s `slash-items` slot.\n---\n\n\n### **Methods:**\n - **toSlashMenuItem(): _SlashMenuItem_** - The item as the slash menu consumes it.\n\n### **Slots:**\n - _default_ - The text to insert, for values that are long or span multiple lines. Ignored when the `value` attribute is set.",
8721
+ "doc-url": "",
8722
+ "attributes": [
8723
+ {
8724
+ "name": "label",
8725
+ "description": "The text shown in the menu.",
8726
+ "value": { "type": "string", "default": "''" }
8727
+ },
8728
+ {
8729
+ "name": "value",
8730
+ "description": "The text inserted into the field. Falls back to this element's text content.",
8731
+ "value": { "type": "string" }
8732
+ },
8733
+ {
8734
+ "name": "icon",
8735
+ "description": "Icon shown against the item, e.g. `tag@lu`.",
8736
+ "value": { "type": "string" }
8737
+ },
8738
+ {
8739
+ "name": "description",
8740
+ "description": "Supporting text shown under the label.",
8741
+ "value": { "type": "string" }
8742
+ },
8743
+ {
8744
+ "name": "keywords",
8745
+ "description": "Extra terms the item can be found by, comma separated.",
8746
+ "value": { "type": "string" }
8747
+ },
8748
+ {
8749
+ "name": "group",
8750
+ "description": "Heading the item is listed under.",
8751
+ "value": { "type": "string" }
8752
+ },
8753
+ {
8754
+ "name": "order",
8755
+ "description": "Overrides the item's position in the menu. Lower sorts first.",
8756
+ "value": { "type": "number" }
8757
+ },
8758
+ {
8759
+ "name": "caret-offset",
8760
+ "description": "Where the caret lands after insertion, as an offset into the inserted value.",
8761
+ "value": { "type": "number" }
8762
+ },
8763
+ {
8764
+ "name": "action",
8765
+ "description": "Identifier passed through on `zn-slash-select`, for items that do something other than insert.",
8766
+ "value": { "type": "string" }
8767
+ },
8768
+ {
8769
+ "name": "disabled",
8770
+ "description": "Listed, but not selectable.",
8771
+ "value": { "type": "boolean", "default": "false" }
8772
+ }
8773
+ ],
8774
+ "slots": [
8775
+ {
8776
+ "name": "",
8777
+ "description": "The text to insert, for values that are long or span multiple lines. Ignored when the `value` attribute is set."
8778
+ }
8779
+ ],
8780
+ "events": [],
8781
+ "js": {
8782
+ "properties": [
8783
+ {
8784
+ "name": "label",
8785
+ "description": "The text shown in the menu.",
8786
+ "type": "string"
8787
+ },
8788
+ {
8789
+ "name": "value",
8790
+ "description": "The text inserted into the field. Falls back to this element's text content.",
8791
+ "type": "string"
8792
+ },
8793
+ {
8794
+ "name": "icon",
8795
+ "description": "Icon shown against the item, e.g. `tag@lu`.",
8796
+ "type": "string"
8797
+ },
8798
+ {
8799
+ "name": "description",
8800
+ "description": "Supporting text shown under the label.",
8801
+ "type": "string"
8802
+ },
8803
+ {
8804
+ "name": "keywords",
8805
+ "description": "Extra terms the item can be found by, comma separated.",
8806
+ "type": "string"
8807
+ },
8808
+ {
8809
+ "name": "group",
8810
+ "description": "Heading the item is listed under.",
8811
+ "type": "string"
8812
+ },
8813
+ {
8814
+ "name": "order",
8815
+ "description": "Overrides the item's position in the menu. Lower sorts first.",
8816
+ "type": "number"
8817
+ },
8818
+ {
8819
+ "name": "caretOffset",
8820
+ "description": "Where the caret lands after insertion, as an offset into the inserted value.",
8821
+ "type": "number"
8822
+ },
8823
+ {
8824
+ "name": "action",
8825
+ "description": "Identifier passed through on `zn-slash-select`, for items that do something other than insert.",
8826
+ "type": "string"
8827
+ },
8828
+ {
8829
+ "name": "disabled",
8830
+ "description": "Listed, but not selectable.",
8831
+ "type": "boolean"
8832
+ }
8833
+ ],
8834
+ "events": []
8835
+ }
8836
+ },
8837
+ {
8838
+ "name": "zn-slash-menu",
8839
+ "description": "A keyboard-driven list of insertions, anchored to the caret of the field that opened it.\n---\n\n\n### **Events:**\n - **SLASH_ITEM_SELECT**\n- **zn-slash-item-select** - Emitted when an item is chosen. Does not cross shadow boundaries; the component driving the menu (e.g. `zn-textarea`) re-emits it as `zn-slash-select`.\n\n### **Methods:**\n - **setActiveIndex(index: _number_)** - Sets the active item by index, wrapping at both ends and skipping disabled items.\n- **moveActive(delta: _number_)** - Moves the active item by `delta` places.\n- **selectActive()** - Chooses the active item, as pressing Enter would.\n- **reposition()** - Recalculates the panel's position against its anchor.\n\n### **CSS Properties:**\n - **--slash-menu-width** - The width of the panel. _(default: undefined)_\n- **--slash-menu-max-height** - The maximum height of the panel before it scrolls. _(default: undefined)_\n\n### **CSS Parts:**\n - **panel** - The floating panel that holds the list.\n- **heading** - The panel's heading.\n- **item** - An item in the list.\n- **group-heading** - A group heading between items.\n- **footer** - The truncation footer, shown when not every match fits.",
8840
+ "doc-url": "",
8841
+ "attributes": [
8842
+ {
8843
+ "name": "open",
8844
+ "description": "Whether the menu is showing.",
8845
+ "value": { "type": "boolean", "default": "false" }
8846
+ },
8847
+ {
8848
+ "name": "items",
8849
+ "description": "The items to list. Already filtered — the menu displays what it is given.",
8850
+ "value": { "type": "SlashMenuItem[]", "default": "[]" }
8851
+ },
8852
+ {
8853
+ "name": "query",
8854
+ "description": "The query the items were matched against, shown in the heading.",
8855
+ "value": { "type": "string", "default": "''" }
8856
+ },
8857
+ {
8858
+ "name": "heading",
8859
+ "description": "The heading shown when there is no query.",
8860
+ "value": { "type": "string", "default": "'Insert'" }
8861
+ },
8862
+ {
8863
+ "name": "empty-text",
8864
+ "description": "Shown in place of the list when there are no items.",
8865
+ "value": { "type": "string", "default": "'No matches'" }
8866
+ },
8867
+ {
8868
+ "name": "max-items",
8869
+ "description": "The most items to render at once. Remaining matches are reported in the footer.",
8870
+ "value": { "type": "number", "default": "25" }
8871
+ },
8872
+ {
8873
+ "name": "placement",
8874
+ "description": "The preferred placement of the panel.",
8875
+ "value": { "type": "Placement", "default": "'bottom-start'" }
8876
+ },
8877
+ {
8878
+ "name": "distance",
8879
+ "description": "The gap between the caret and the panel.",
8880
+ "value": { "type": "number", "default": "4" }
8881
+ }
8882
+ ],
8883
+ "events": [
8884
+ { "name": "SLASH_ITEM_SELECT", "type": "CustomEvent" },
8885
+ {
8886
+ "name": "zn-slash-item-select",
8887
+ "description": "Emitted when an item is chosen. Does not cross shadow boundaries; the component driving the menu (e.g. `zn-textarea`) re-emits it as `zn-slash-select`."
8888
+ }
8889
+ ],
8890
+ "js": {
8891
+ "properties": [
8892
+ {
8893
+ "name": "open",
8894
+ "description": "Whether the menu is showing.",
8895
+ "type": "boolean"
8896
+ },
8897
+ {
8898
+ "name": "items",
8899
+ "description": "The items to list. Already filtered — the menu displays what it is given.",
8900
+ "type": "SlashMenuItem[]"
8901
+ },
8902
+ {
8903
+ "name": "query",
8904
+ "description": "The query the items were matched against, shown in the heading.",
8905
+ "type": "string"
8906
+ },
8907
+ {
8908
+ "name": "heading",
8909
+ "description": "The heading shown when there is no query.",
8910
+ "type": "string"
8911
+ },
8912
+ {
8913
+ "name": "emptyText",
8914
+ "description": "Shown in place of the list when there are no items.",
8915
+ "type": "string"
8916
+ },
8917
+ {
8918
+ "name": "maxItems",
8919
+ "description": "The most items to render at once. Remaining matches are reported in the footer.",
8920
+ "type": "number"
8921
+ },
8922
+ {
8923
+ "name": "anchor",
8924
+ "description": "The element or caret rect the panel is positioned against.",
8925
+ "type": "Element | VirtualElement | null"
8926
+ },
8927
+ {
8928
+ "name": "placement",
8929
+ "description": "The preferred placement of the panel.",
8930
+ "type": "Placement"
8931
+ },
8932
+ {
8933
+ "name": "distance",
8934
+ "description": "The gap between the caret and the panel.",
8935
+ "type": "number"
8936
+ },
8937
+ {
8938
+ "name": "activeItem",
8939
+ "description": "The item that Enter would insert.",
8940
+ "type": "SlashMenuItem | undefined"
8941
+ }
8942
+ ],
8943
+ "events": [
8944
+ { "name": "SLASH_ITEM_SELECT", "type": "CustomEvent" },
8945
+ {
8946
+ "name": "zn-slash-item-select",
8947
+ "description": "Emitted when an item is chosen. Does not cross shadow boundaries; the component driving the menu (e.g. `zn-textarea`) re-emits it as `zn-slash-select`."
8948
+ }
8949
+ ]
8950
+ }
8951
+ },
8673
8952
  {
8674
8953
  "name": "zn-slideout",
8675
8954
  "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the slideout is opens.\n- **zn-close** - Emitted when the slideout is closed.\n- **zn-request-close** - Emitted when the user attempts to close the slideout by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the slideout open. Avoid using this unless closing the slideout will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the slideout.\n- **hide()** - Hides the slideout.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The slideout's label. Alternatively you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the slideout. Note the slideout will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The slideout's header. This element wraps the title and header actions.\n- **close-button** - The slideout's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The slideout's body.",
@@ -9495,7 +9774,7 @@
9495
9774
  },
9496
9775
  {
9497
9776
  "name": "zn-textarea",
9498
- "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-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 textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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 textareas label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute.\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- **textarea** - The internal `<textarea>` control.",
9777
+ "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-slash-select** - Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself.\n- **zn-slash-insert** - Emitted after a slash menu item's value has been inserted.\n\n### **Methods:**\n - **resolveSlashItems(search): _Promise<SlashMenuItem[]>_** - The insertions the slash menu offers, gathered from every source, in the order they were declared.\n- **showSlashMenu()** - Opens the slash menu at the caret, inserting the trigger if it isn't already there.\n- **hideSlashMenu()** - Closes the slash menu.\n- **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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 textareas label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **slash-items** - `<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the textarea, so this slot name is optional.\n- **slash-menu** - A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `<zn-slash-item>` children of it become the menu's items.\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- **textarea** - The internal `<textarea>` control.\n- **slash-menu** - The slash menu shown at the caret.",
9499
9778
  "doc-url": "",
9500
9779
  "attributes": [
9501
9780
  { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -9630,6 +9909,26 @@
9630
9909
  "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
9631
9910
  }
9632
9911
  },
9912
+ {
9913
+ "name": "slash-items",
9914
+ "description": "Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand\n`Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of\n`SlashMenuItem` objects in JavaScript.",
9915
+ "value": { "type": "SlashMenuItem[]", "default": "[]" }
9916
+ },
9917
+ {
9918
+ "name": "slash-preset",
9919
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
9920
+ "value": { "type": "string", "default": "''" }
9921
+ },
9922
+ {
9923
+ "name": "slash-trigger",
9924
+ "description": "The characters that open the slash menu.",
9925
+ "value": { "type": "string", "default": "'/'" }
9926
+ },
9927
+ {
9928
+ "name": "slash-heading",
9929
+ "description": "The heading shown above the slash menu's items.",
9930
+ "value": { "type": "string", "default": "'Insert'" }
9931
+ },
9633
9932
  {
9634
9933
  "name": "transparent",
9635
9934
  "value": { "type": "boolean", "default": "false" }
@@ -9651,6 +9950,14 @@
9651
9950
  {
9652
9951
  "name": "help-text",
9653
9952
  "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
9953
+ },
9954
+ {
9955
+ "name": "slash-items",
9956
+ "description": "`<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the textarea, so this slot name is optional."
9957
+ },
9958
+ {
9959
+ "name": "slash-menu",
9960
+ "description": "A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `<zn-slash-item>` children of it become the menu's items."
9654
9961
  }
9655
9962
  ],
9656
9963
  "events": [
@@ -9673,12 +9980,21 @@
9673
9980
  {
9674
9981
  "name": "zn-invalid",
9675
9982
  "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
9983
+ },
9984
+ {
9985
+ "name": "zn-slash-select",
9986
+ "description": "Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself."
9987
+ },
9988
+ {
9989
+ "name": "zn-slash-insert",
9990
+ "description": "Emitted after a slash menu item's value has been inserted."
9676
9991
  }
9677
9992
  ],
9678
9993
  "js": {
9679
9994
  "properties": [
9680
9995
  { "name": "formControl", "type": "HTMLElement" },
9681
9996
  { "name": "input", "type": "HTMLTextAreaElement" },
9997
+ { "name": "slashMenuElement", "type": "ZnSlashMenu | null" },
9682
9998
  { "name": "hasFocus", "type": "boolean" },
9683
9999
  { "name": "title", "type": "string" },
9684
10000
  {
@@ -9797,6 +10113,31 @@
9797
10113
  "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
9798
10114
  "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
9799
10115
  },
10116
+ {
10117
+ "name": "slashItems",
10118
+ "description": "Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand\n`Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of\n`SlashMenuItem` objects in JavaScript.",
10119
+ "type": "SlashMenuItem[]"
10120
+ },
10121
+ {
10122
+ "name": "slashPreset",
10123
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
10124
+ "type": "string"
10125
+ },
10126
+ {
10127
+ "name": "slashTrigger",
10128
+ "description": "The characters that open the slash menu.",
10129
+ "type": "string"
10130
+ },
10131
+ {
10132
+ "name": "slashHeading",
10133
+ "description": "The heading shown above the slash menu's items.",
10134
+ "type": "string"
10135
+ },
10136
+ {
10137
+ "name": "slashItemsProvider",
10138
+ "description": "Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an\nAPI). Receives the current query and may return a promise. JavaScript only.",
10139
+ "type": "(query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]> | undefined"
10140
+ },
9800
10141
  {
9801
10142
  "name": "defaultValue",
9802
10143
  "description": "The default value of the form control. Primarily used for resetting the form control.",
@@ -9832,6 +10173,14 @@
9832
10173
  {
9833
10174
  "name": "zn-invalid",
9834
10175
  "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
10176
+ },
10177
+ {
10178
+ "name": "zn-slash-select",
10179
+ "description": "Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself."
10180
+ },
10181
+ {
10182
+ "name": "zn-slash-insert",
10183
+ "description": "Emitted after a slash menu item's value has been inserted."
9835
10184
  }
9836
10185
  ]
9837
10186
  }
@@ -10582,6 +10931,26 @@
10582
10931
  "name": "textarea-rows",
10583
10932
  "value": { "type": "number | undefined" }
10584
10933
  },
10934
+ {
10935
+ "name": "slash-items",
10936
+ "description": "Quick insertions offered by the slash menu when `input-type` is `textarea`. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.",
10937
+ "value": { "type": "SlashMenuItem[]", "default": "[]" }
10938
+ },
10939
+ {
10940
+ "name": "slash-preset",
10941
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
10942
+ "value": { "type": "string", "default": "''" }
10943
+ },
10944
+ {
10945
+ "name": "slash-trigger",
10946
+ "description": "The characters that open the slash menu.",
10947
+ "value": { "type": "string", "default": "'/'" }
10948
+ },
10949
+ {
10950
+ "name": "slash-heading",
10951
+ "description": "The heading shown above the slash menu's items.",
10952
+ "value": { "type": "string", "default": "'Insert'" }
10953
+ },
10585
10954
  {
10586
10955
  "name": "grouped",
10587
10956
  "description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",
@@ -10613,6 +10982,31 @@
10613
10982
  "type": "'select' | 'text' | 'number' | 'textarea'"
10614
10983
  },
10615
10984
  { "name": "textareaRows", "type": "number | undefined" },
10985
+ {
10986
+ "name": "slashItems",
10987
+ "description": "Quick insertions offered by the slash menu when `input-type` is `textarea`. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.",
10988
+ "type": "SlashMenuItem[]"
10989
+ },
10990
+ {
10991
+ "name": "slashPreset",
10992
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
10993
+ "type": "string"
10994
+ },
10995
+ {
10996
+ "name": "slashTrigger",
10997
+ "description": "The characters that open the slash menu.",
10998
+ "type": "string"
10999
+ },
11000
+ {
11001
+ "name": "slashHeading",
11002
+ "description": "The heading shown above the slash menu's items.",
11003
+ "type": "string"
11004
+ },
11005
+ {
11006
+ "name": "slashItemsProvider",
11007
+ "description": "Resolves additional slash menu items each time the menu opens. JavaScript only.",
11008
+ "type": "(query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]> | undefined"
11009
+ },
10616
11010
  {
10617
11011
  "name": "grouped",
10618
11012
  "description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",