@kubex/zinc 1.1.79 → 1.1.81

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 (38) hide show
  1. package/dist/custom-elements.json +1398 -109
  2. package/dist/vscode.html-custom-data.json +202 -3
  3. package/dist/web-types.json +478 -4
  4. package/dist/zn.d.ts +467 -8
  5. package/dist/zn.min.js +388 -316
  6. package/docs/pages/components/inline-edit.md +22 -0
  7. package/docs/pages/components/input.md +21 -0
  8. package/docs/pages/components/remarkd-editor.md +43 -0
  9. package/docs/pages/components/slash-item.md +126 -0
  10. package/docs/pages/components/slash-menu.md +161 -0
  11. package/docs/pages/components/textarea.md +148 -0
  12. package/docs/pages/components/translations.md +34 -0
  13. package/package.json +1 -1
  14. package/src/components/inline-edit/inline-edit.component.ts +36 -0
  15. package/src/components/inline-edit/inline-edit.test.ts +83 -1
  16. package/src/components/input/input.component.ts +143 -0
  17. package/src/components/input/input.test.ts +113 -1
  18. package/src/components/remarkd-editor/remarkd-editor.component.ts +157 -95
  19. package/src/components/remarkd-editor/remarkd-editor.scss +24 -36
  20. package/src/components/remarkd-editor/remarkd-editor.test.ts +110 -6
  21. package/src/components/slash-item/index.ts +12 -0
  22. package/src/components/slash-item/slash-item.component.ts +76 -0
  23. package/src/components/slash-item/slash-item.scss +5 -0
  24. package/src/components/slash-menu/index.ts +14 -0
  25. package/src/components/slash-menu/slash-menu-controller.ts +361 -0
  26. package/src/components/slash-menu/slash-menu-items.ts +122 -0
  27. package/src/components/slash-menu/slash-menu.component.ts +327 -0
  28. package/src/components/slash-menu/slash-menu.scss +120 -0
  29. package/src/components/slash-menu/slash-menu.test.ts +154 -0
  30. package/src/components/textarea/textarea.component.ts +143 -0
  31. package/src/components/textarea/textarea.test.ts +310 -2
  32. package/src/components/translations/translations.component.ts +31 -0
  33. package/src/components/translations/translations.test.ts +89 -1
  34. package/src/events/events.ts +2 -0
  35. package/src/events/zn-slash-insert.ts +9 -0
  36. package/src/events/zn-slash-select.ts +9 -0
  37. package/src/utilities/caret-position.ts +118 -0
  38. package/src/zinc.ts +3 -0
@@ -1939,6 +1939,26 @@
1939
1939
  ]
1940
1940
  },
1941
1941
  { "name": "textarea-rows", "values": [{ "name": "1" }] },
1942
+ {
1943
+ "name": "slash-items",
1944
+ "description": "Quick insertions offered by the slash menu of a `text` or `textarea` input. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`.",
1945
+ "values": [{ "name": "SlashMenuItem[]" }]
1946
+ },
1947
+ {
1948
+ "name": "slash-preset",
1949
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
1950
+ "values": []
1951
+ },
1952
+ {
1953
+ "name": "slash-trigger",
1954
+ "description": "The characters that open the slash menu.",
1955
+ "values": []
1956
+ },
1957
+ {
1958
+ "name": "slash-heading",
1959
+ "description": "The heading shown above the slash menu's items.",
1960
+ "values": []
1961
+ },
1942
1962
  {
1943
1963
  "name": "options",
1944
1964
  "values": [{ "name": "{ [key: string]: string }" }]
@@ -1993,7 +2013,7 @@
1993
2013
  },
1994
2014
  {
1995
2015
  "name": "zn-input",
1996
- "description": "Short summary of the component's intended use.\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-clear** - Emitted when the clear button is activated.\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 input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\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- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the 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- **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 input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\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 Properties:**\n - **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\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.",
2016
+ "description": "Short summary of the component's intended use.\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-clear** - Emitted when the clear button is activated.\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 input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\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- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the 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- **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 input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\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- **slash-items** - `<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the input, 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 Properties:**\n - **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **slash-menu** - The slash menu shown at the caret.\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.",
1997
2017
  "attributes": [
1998
2018
  { "name": "title", "values": [] },
1999
2019
  {
@@ -2219,6 +2239,26 @@
2219
2239
  { "name": "url" }
2220
2240
  ]
2221
2241
  },
2242
+ {
2243
+ "name": "slash-items",
2244
+ "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.",
2245
+ "values": [{ "name": "SlashMenuItem[]" }]
2246
+ },
2247
+ {
2248
+ "name": "slash-preset",
2249
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
2250
+ "values": []
2251
+ },
2252
+ {
2253
+ "name": "slash-trigger",
2254
+ "description": "The characters that open the slash menu.",
2255
+ "values": []
2256
+ },
2257
+ {
2258
+ "name": "slash-heading",
2259
+ "description": "The heading shown above the slash menu's items.",
2260
+ "values": []
2261
+ },
2222
2262
  {
2223
2263
  "name": "trigger-submit",
2224
2264
  "description": "When enabled, pressing enter will always submit the surrounding form, even when the form uses\nenter-navigation to move between fields.",
@@ -3343,7 +3383,7 @@
3343
3383
  },
3344
3384
  {
3345
3385
  "name": "zn-remarkd-editor",
3346
- "description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **slash-menu** - The context menu opened by typing \"/\" in a block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.",
3386
+ "description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.",
3347
3387
  "attributes": [
3348
3388
  {
3349
3389
  "name": "name",
@@ -3365,6 +3405,11 @@
3365
3405
  "description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
3366
3406
  "values": []
3367
3407
  },
3408
+ {
3409
+ "name": "allow-raw",
3410
+ "description": "Adds a toolbar toggle that swaps the block view for the full remarkd source.",
3411
+ "values": []
3412
+ },
3368
3413
  {
3369
3414
  "name": "required",
3370
3415
  "description": "Makes the editor required for form submission.",
@@ -3677,6 +3722,120 @@
3677
3722
  }
3678
3723
  ]
3679
3724
  },
3725
+ {
3726
+ "name": "zn-slash-item",
3727
+ "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.",
3728
+ "attributes": [
3729
+ {
3730
+ "name": "label",
3731
+ "description": "The text shown in the menu.",
3732
+ "values": []
3733
+ },
3734
+ {
3735
+ "name": "value",
3736
+ "description": "The text inserted into the field. Falls back to this element's text content.",
3737
+ "values": []
3738
+ },
3739
+ {
3740
+ "name": "icon",
3741
+ "description": "Icon shown against the item, e.g. `tag@lu`.",
3742
+ "values": []
3743
+ },
3744
+ {
3745
+ "name": "description",
3746
+ "description": "Supporting text shown under the label.",
3747
+ "values": []
3748
+ },
3749
+ {
3750
+ "name": "keywords",
3751
+ "description": "Extra terms the item can be found by, comma separated.",
3752
+ "values": []
3753
+ },
3754
+ {
3755
+ "name": "group",
3756
+ "description": "Heading the item is listed under.",
3757
+ "values": []
3758
+ },
3759
+ {
3760
+ "name": "order",
3761
+ "description": "Overrides the item's position in the menu. Lower sorts first.",
3762
+ "values": []
3763
+ },
3764
+ {
3765
+ "name": "caret-offset",
3766
+ "description": "Where the caret lands after insertion, as an offset into the inserted value.",
3767
+ "values": []
3768
+ },
3769
+ {
3770
+ "name": "action",
3771
+ "description": "Identifier passed through on `zn-slash-select`, for items that do something other than insert.",
3772
+ "values": []
3773
+ },
3774
+ {
3775
+ "name": "disabled",
3776
+ "description": "Listed, but not selectable.",
3777
+ "values": []
3778
+ }
3779
+ ],
3780
+ "references": [
3781
+ {
3782
+ "name": "Documentation",
3783
+ "url": "https://zinc.style/components/slash-item"
3784
+ }
3785
+ ]
3786
+ },
3787
+ {
3788
+ "name": "zn-slash-menu",
3789
+ "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.",
3790
+ "attributes": [
3791
+ {
3792
+ "name": "open",
3793
+ "description": "Whether the menu is showing.",
3794
+ "values": []
3795
+ },
3796
+ {
3797
+ "name": "items",
3798
+ "description": "The items to list. Already filtered — the menu displays what it is given.",
3799
+ "values": [{ "name": "SlashMenuItem[]" }]
3800
+ },
3801
+ {
3802
+ "name": "query",
3803
+ "description": "The query the items were matched against, shown in the heading.",
3804
+ "values": []
3805
+ },
3806
+ {
3807
+ "name": "heading",
3808
+ "description": "The heading shown when there is no query.",
3809
+ "values": []
3810
+ },
3811
+ {
3812
+ "name": "empty-text",
3813
+ "description": "Shown in place of the list when there are no items.",
3814
+ "values": []
3815
+ },
3816
+ {
3817
+ "name": "max-items",
3818
+ "description": "The most items to render at once. Remaining matches are reported in the footer.",
3819
+ "values": []
3820
+ },
3821
+ {
3822
+ "name": "placement",
3823
+ "description": "The preferred placement of the panel.",
3824
+ "values": [{ "name": "Placement" }]
3825
+ },
3826
+ {
3827
+ "name": "distance",
3828
+ "description": "The gap between the caret and the panel.",
3829
+ "values": []
3830
+ }
3831
+ ],
3832
+ "references": [
3833
+ {
3834
+ "name": "Documentation",
3835
+ "url": "https://zinc.style/components/slash-menu"
3836
+ }
3837
+ ]
3838
+ },
3680
3839
  {
3681
3840
  "name": "zn-slideout",
3682
3841
  "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.",
@@ -4003,7 +4162,7 @@
4003
4162
  },
4004
4163
  {
4005
4164
  "name": "zn-textarea",
4006
- "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.",
4165
+ "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.",
4007
4166
  "attributes": [
4008
4167
  { "name": "title", "values": [] },
4009
4168
  {
@@ -4154,6 +4313,26 @@
4154
4313
  { "name": "url" }
4155
4314
  ]
4156
4315
  },
4316
+ {
4317
+ "name": "slash-items",
4318
+ "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.",
4319
+ "values": [{ "name": "SlashMenuItem[]" }]
4320
+ },
4321
+ {
4322
+ "name": "slash-preset",
4323
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
4324
+ "values": []
4325
+ },
4326
+ {
4327
+ "name": "slash-trigger",
4328
+ "description": "The characters that open the slash menu.",
4329
+ "values": []
4330
+ },
4331
+ {
4332
+ "name": "slash-heading",
4333
+ "description": "The heading shown above the slash menu's items.",
4334
+ "values": []
4335
+ },
4157
4336
  { "name": "transparent", "values": [] }
4158
4337
  ],
4159
4338
  "references": [
@@ -4475,6 +4654,26 @@
4475
4654
  ]
4476
4655
  },
4477
4656
  { "name": "textarea-rows", "values": [] },
4657
+ {
4658
+ "name": "slash-items",
4659
+ "description": "Quick insertions offered by the slash menu on `text` and `textarea` inputs. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.",
4660
+ "values": [{ "name": "SlashMenuItem[]" }]
4661
+ },
4662
+ {
4663
+ "name": "slash-preset",
4664
+ "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
4665
+ "values": []
4666
+ },
4667
+ {
4668
+ "name": "slash-trigger",
4669
+ "description": "The characters that open the slash menu.",
4670
+ "values": []
4671
+ },
4672
+ {
4673
+ "name": "slash-heading",
4674
+ "description": "The heading shown above the slash menu's items.",
4675
+ "values": []
4676
+ },
4478
4677
  {
4479
4678
  "name": "grouped",
4480
4679
  "description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",