@warp-ds/elements 2.9.0-next.6 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -468,39 +468,56 @@ export type WarpButtonSolidJsProps = {
468
468
  };
469
469
 
470
470
  export type WarpAttentionProps = {
471
- /** */
471
+ /** Controls whether the attention panel is visible.
472
+ Set to `true` to show the attention content and `false` to hide it. */
472
473
  show?: WarpAttention["show"];
473
- /** */
474
+ /** Preferred placement relative to the trigger element.
475
+ Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants. */
474
476
  placement?: WarpAttention["placement"];
475
- /** */
477
+ /** Renders the component with tooltip styling and behavior.
478
+ Use for compact, non-modal contextual hints anchored to another element. */
476
479
  tooltip?: WarpAttention["tooltip"];
477
- /** */
480
+ /** Renders the component as an inline callout.
481
+ Callout mode is used for always-in-flow informational content instead of floating overlay behavior. */
478
482
  callout?: WarpAttention["callout"];
479
- /** */
483
+ /** Enables native popover behavior for the attention element.
484
+ When enabled, the component uses popover semantics and styling suitable for floating surface UI. */
480
485
  popover?: WarpAttention["popover"];
481
- /** */
486
+ /** Renders the component with highlight styling.
487
+ Use highlight mode to visually emphasize important contextual information. */
482
488
  highlight?: WarpAttention["highlight"];
483
- /** */
489
+ /** Shows a close button inside the attention component.
490
+ Adds an internal dismiss action that lets users close the attention panel. */
484
491
  "can-close"?: WarpAttention["canClose"];
485
- /** */
492
+ /** Shows a close button inside the attention component.
493
+ Adds an internal dismiss action that lets users close the attention panel. */
486
494
  canClose?: WarpAttention["canClose"];
487
- /** */
495
+ /** Hides the directional arrow of the attention component.
496
+ Disable the arrow when the visual connection to the trigger should not be shown. */
488
497
  "no-arrow"?: WarpAttention["noArrow"];
489
- /** */
498
+ /** Hides the directional arrow of the attention component.
499
+ Disable the arrow when the visual connection to the trigger should not be shown. */
490
500
  noArrow?: WarpAttention["noArrow"];
491
- /** */
501
+ /** Distance offset between trigger and attention panel.
502
+ Defines the main-axis spacing in pixels from the anchor element. */
492
503
  distance?: WarpAttention["distance"];
493
- /** */
504
+ /** Cross-axis offset for fine-grained positioning.
505
+ Moves the panel along the cross axis in pixels to adjust alignment with the trigger. */
494
506
  skidding?: WarpAttention["skidding"];
495
- /** */
507
+ /** Enables automatic flipping when placement has no space.
508
+ Allows the component to choose an alternative side if the preferred placement would overflow. */
496
509
  flip?: WarpAttention["flip"];
497
- /** */
510
+ /** Allows overflow checks on the cross axis when flipping.
511
+ Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
498
512
  "cross-axis"?: WarpAttention["crossAxis"];
499
- /** */
513
+ /** Allows overflow checks on the cross axis when flipping.
514
+ Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
500
515
  crossAxis?: WarpAttention["crossAxis"];
501
- /** */
516
+ /** Ordered list of fallback placements.
517
+ Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
502
518
  "fallback-placements"?: WarpAttention["fallbackPlacements"];
503
- /** */
519
+ /** Ordered list of fallback placements.
520
+ Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
504
521
  fallbackPlacements?: WarpAttention["fallbackPlacements"];
505
522
  /** */
506
523
  _initialPlacement?: WarpAttention["_initialPlacement"];
@@ -509,39 +526,56 @@ export type WarpAttentionProps = {
509
526
  };
510
527
 
511
528
  export type WarpAttentionSolidJsProps = {
512
- /** */
529
+ /** Controls whether the attention panel is visible.
530
+ Set to `true` to show the attention content and `false` to hide it. */
513
531
  "prop:show"?: WarpAttention["show"];
514
- /** */
532
+ /** Preferred placement relative to the trigger element.
533
+ Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants. */
515
534
  "prop:placement"?: WarpAttention["placement"];
516
- /** */
535
+ /** Renders the component with tooltip styling and behavior.
536
+ Use for compact, non-modal contextual hints anchored to another element. */
517
537
  "prop:tooltip"?: WarpAttention["tooltip"];
518
- /** */
538
+ /** Renders the component as an inline callout.
539
+ Callout mode is used for always-in-flow informational content instead of floating overlay behavior. */
519
540
  "prop:callout"?: WarpAttention["callout"];
520
- /** */
541
+ /** Enables native popover behavior for the attention element.
542
+ When enabled, the component uses popover semantics and styling suitable for floating surface UI. */
521
543
  "prop:popover"?: WarpAttention["popover"];
522
- /** */
544
+ /** Renders the component with highlight styling.
545
+ Use highlight mode to visually emphasize important contextual information. */
523
546
  "prop:highlight"?: WarpAttention["highlight"];
524
- /** */
547
+ /** Shows a close button inside the attention component.
548
+ Adds an internal dismiss action that lets users close the attention panel. */
525
549
  "bool:can-close"?: WarpAttention["canClose"];
526
- /** */
550
+ /** Shows a close button inside the attention component.
551
+ Adds an internal dismiss action that lets users close the attention panel. */
527
552
  "prop:canClose"?: WarpAttention["canClose"];
528
- /** */
553
+ /** Hides the directional arrow of the attention component.
554
+ Disable the arrow when the visual connection to the trigger should not be shown. */
529
555
  "bool:no-arrow"?: WarpAttention["noArrow"];
530
- /** */
556
+ /** Hides the directional arrow of the attention component.
557
+ Disable the arrow when the visual connection to the trigger should not be shown. */
531
558
  "prop:noArrow"?: WarpAttention["noArrow"];
532
- /** */
559
+ /** Distance offset between trigger and attention panel.
560
+ Defines the main-axis spacing in pixels from the anchor element. */
533
561
  "prop:distance"?: WarpAttention["distance"];
534
- /** */
562
+ /** Cross-axis offset for fine-grained positioning.
563
+ Moves the panel along the cross axis in pixels to adjust alignment with the trigger. */
535
564
  "prop:skidding"?: WarpAttention["skidding"];
536
- /** */
565
+ /** Enables automatic flipping when placement has no space.
566
+ Allows the component to choose an alternative side if the preferred placement would overflow. */
537
567
  "prop:flip"?: WarpAttention["flip"];
538
- /** */
568
+ /** Allows overflow checks on the cross axis when flipping.
569
+ Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
539
570
  "bool:cross-axis"?: WarpAttention["crossAxis"];
540
- /** */
571
+ /** Allows overflow checks on the cross axis when flipping.
572
+ Use with `flip` to improve collision handling when space is constrained horizontally or vertically. */
541
573
  "prop:crossAxis"?: WarpAttention["crossAxis"];
542
- /** */
574
+ /** Ordered list of fallback placements.
575
+ Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
543
576
  "attr:fallback-placements"?: WarpAttention["fallbackPlacements"];
544
- /** */
577
+ /** Ordered list of fallback placements.
578
+ Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit. */
545
579
  "prop:fallbackPlacements"?: WarpAttention["fallbackPlacements"];
546
580
  /** */
547
581
  "prop:_initialPlacement"?: WarpAttention["_initialPlacement"];
@@ -1770,85 +1804,97 @@ export type WarpTabsSolidJsProps = {
1770
1804
  };
1771
1805
 
1772
1806
  export type WarpTextareaProps = {
1773
- /** */
1807
+ /** Keep in mind that using disabled in its current form is an anti-pattern.
1808
+
1809
+ There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
1810
+
1811
+ Please consider more informative alternatives before choosing to use disabled on an element. */
1774
1812
  disabled?: WarpTextarea["disabled"];
1775
- /** */
1813
+ /** Mark the form field as invalid.
1814
+
1815
+ Make sure to also set a `help-text` to help users fix the validation problem. */
1776
1816
  invalid?: WarpTextarea["invalid"];
1777
- /** */
1817
+ /** Either a `label` or an `aria-label` must be provided. */
1778
1818
  label?: WarpTextarea["label"];
1779
- /** */
1819
+ /** Use in combination with `invalid` to show as a validation error message,
1820
+ or on its own to show a help text. */
1780
1821
  "help-text"?: WarpTextarea["helpText"];
1781
- /** */
1822
+ /** Use in combination with `invalid` to show as a validation error message,
1823
+ or on its own to show a help text. */
1782
1824
  helpText?: WarpTextarea["helpText"];
1783
- /** */
1825
+ /** Sets the maximum number of text rows before the content starts scrolling. */
1784
1826
  "maximum-rows"?: WarpTextarea["maxRows"];
1785
- /** */
1827
+ /** Sets the maximum number of text rows before the content starts scrolling. */
1786
1828
  maxRows?: WarpTextarea["maxRows"];
1787
- /** */
1829
+ /** Sets the minimum number of text rows the textarea should display */
1788
1830
  "minimum-rows"?: WarpTextarea["minRows"];
1789
- /** */
1831
+ /** Sets the minimum number of text rows the textarea should display */
1790
1832
  minRows?: WarpTextarea["minRows"];
1791
- /** */
1833
+ /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form */
1792
1834
  name?: WarpTextarea["name"];
1793
- /** */
1835
+ /** Set a text that is shown in the textarea when it doesn't have a value.
1836
+
1837
+ Placeholder text should not be used as a substitute for labeling the element with a visible label. */
1794
1838
  placeholder?: WarpTextarea["placeholder"];
1795
- /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
1839
+ /** @deprecated Use the native `readonly` attribute instead */
1796
1840
  "read-only"?: WarpTextarea["readOnly"];
1797
- /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
1841
+ /** @deprecated Use the native `readonly` attribute instead */
1798
1842
  readOnly?: WarpTextarea["readOnly"];
1799
- /** */
1843
+ /** Whether the input can be selected but not changed by the user */
1800
1844
  readonly?: WarpTextarea["readonly"];
1801
- /** */
1845
+ /** Whether user input is required on the input before form submission */
1802
1846
  required?: WarpTextarea["required"];
1803
- /** */
1847
+ /** Lets you set the current value */
1804
1848
  value?: WarpTextarea["value"];
1805
- /** */
1849
+ /** Show an icon behind the label indicating the field is optional */
1806
1850
  optional?: WarpTextarea["optional"];
1807
- /** */
1808
- minHeight?: WarpTextarea["minHeight"];
1809
- /** */
1810
- maxHeight?: WarpTextarea["maxHeight"];
1811
1851
  };
1812
1852
 
1813
1853
  export type WarpTextareaSolidJsProps = {
1814
- /** */
1854
+ /** Keep in mind that using disabled in its current form is an anti-pattern.
1855
+
1856
+ There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
1857
+
1858
+ Please consider more informative alternatives before choosing to use disabled on an element. */
1815
1859
  "prop:disabled"?: WarpTextarea["disabled"];
1816
- /** */
1860
+ /** Mark the form field as invalid.
1861
+
1862
+ Make sure to also set a `help-text` to help users fix the validation problem. */
1817
1863
  "prop:invalid"?: WarpTextarea["invalid"];
1818
- /** */
1864
+ /** Either a `label` or an `aria-label` must be provided. */
1819
1865
  "prop:label"?: WarpTextarea["label"];
1820
- /** */
1866
+ /** Use in combination with `invalid` to show as a validation error message,
1867
+ or on its own to show a help text. */
1821
1868
  "attr:help-text"?: WarpTextarea["helpText"];
1822
- /** */
1869
+ /** Use in combination with `invalid` to show as a validation error message,
1870
+ or on its own to show a help text. */
1823
1871
  "prop:helpText"?: WarpTextarea["helpText"];
1824
- /** */
1872
+ /** Sets the maximum number of text rows before the content starts scrolling. */
1825
1873
  "attr:maximum-rows"?: WarpTextarea["maxRows"];
1826
- /** */
1874
+ /** Sets the maximum number of text rows before the content starts scrolling. */
1827
1875
  "prop:maxRows"?: WarpTextarea["maxRows"];
1828
- /** */
1876
+ /** Sets the minimum number of text rows the textarea should display */
1829
1877
  "attr:minimum-rows"?: WarpTextarea["minRows"];
1830
- /** */
1878
+ /** Sets the minimum number of text rows the textarea should display */
1831
1879
  "prop:minRows"?: WarpTextarea["minRows"];
1832
- /** */
1880
+ /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form */
1833
1881
  "prop:name"?: WarpTextarea["name"];
1834
- /** */
1882
+ /** Set a text that is shown in the textarea when it doesn't have a value.
1883
+
1884
+ Placeholder text should not be used as a substitute for labeling the element with a visible label. */
1835
1885
  "prop:placeholder"?: WarpTextarea["placeholder"];
1836
- /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
1886
+ /** @deprecated Use the native `readonly` attribute instead */
1837
1887
  "bool:read-only"?: WarpTextarea["readOnly"];
1838
- /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
1888
+ /** @deprecated Use the native `readonly` attribute instead */
1839
1889
  "prop:readOnly"?: WarpTextarea["readOnly"];
1840
- /** */
1890
+ /** Whether the input can be selected but not changed by the user */
1841
1891
  "prop:readonly"?: WarpTextarea["readonly"];
1842
- /** */
1892
+ /** Whether user input is required on the input before form submission */
1843
1893
  "prop:required"?: WarpTextarea["required"];
1844
- /** */
1894
+ /** Lets you set the current value */
1845
1895
  "prop:value"?: WarpTextarea["value"];
1846
- /** */
1896
+ /** Show an icon behind the label indicating the field is optional */
1847
1897
  "prop:optional"?: WarpTextarea["optional"];
1848
- /** */
1849
- "prop:minHeight"?: WarpTextarea["minHeight"];
1850
- /** */
1851
- "prop:maxHeight"?: WarpTextarea["maxHeight"];
1852
1898
 
1853
1899
  /** Set the innerHTML of the element */
1854
1900
  innerHTML?: string;
@@ -2025,25 +2071,42 @@ export type CustomElements = {
2025
2071
  "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
2026
2072
 
2027
2073
  /**
2074
+ * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
2075
+ *
2076
+ * The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.
2028
2077
  *
2078
+ * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
2029
2079
  *
2030
2080
  * ## Attributes & Properties
2031
2081
  *
2032
2082
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2033
2083
  *
2034
- * - `show`: undefined
2035
- * - `placement`: undefined
2036
- * - `tooltip`: undefined
2037
- * - `callout`: undefined
2038
- * - `popover`: undefined
2039
- * - `highlight`: undefined
2040
- * - `can-close`/`canClose`: undefined
2041
- * - `no-arrow`/`noArrow`: undefined
2042
- * - `distance`: undefined
2043
- * - `skidding`: undefined
2044
- * - `flip`: undefined
2045
- * - `cross-axis`/`crossAxis`: undefined
2046
- * - `fallback-placements`/`fallbackPlacements`: undefined
2084
+ * - `show`: Controls whether the attention panel is visible.
2085
+ * Set to `true` to show the attention content and `false` to hide it.
2086
+ * - `placement`: Preferred placement relative to the trigger element.
2087
+ * Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
2088
+ * - `tooltip`: Renders the component with tooltip styling and behavior.
2089
+ * Use for compact, non-modal contextual hints anchored to another element.
2090
+ * - `callout`: Renders the component as an inline callout.
2091
+ * Callout mode is used for always-in-flow informational content instead of floating overlay behavior.
2092
+ * - `popover`: Enables native popover behavior for the attention element.
2093
+ * When enabled, the component uses popover semantics and styling suitable for floating surface UI.
2094
+ * - `highlight`: Renders the component with highlight styling.
2095
+ * Use highlight mode to visually emphasize important contextual information.
2096
+ * - `can-close`/`canClose`: Shows a close button inside the attention component.
2097
+ * Adds an internal dismiss action that lets users close the attention panel.
2098
+ * - `no-arrow`/`noArrow`: Hides the directional arrow of the attention component.
2099
+ * Disable the arrow when the visual connection to the trigger should not be shown.
2100
+ * - `distance`: Distance offset between trigger and attention panel.
2101
+ * Defines the main-axis spacing in pixels from the anchor element.
2102
+ * - `skidding`: Cross-axis offset for fine-grained positioning.
2103
+ * Moves the panel along the cross axis in pixels to adjust alignment with the trigger.
2104
+ * - `flip`: Enables automatic flipping when placement has no space.
2105
+ * Allows the component to choose an alternative side if the preferred placement would overflow.
2106
+ * - `cross-axis`/`crossAxis`: Allows overflow checks on the cross axis when flipping.
2107
+ * Use with `flip` to improve collision handling when space is constrained horizontally or vertically.
2108
+ * - `fallback-placements`/`fallbackPlacements`: Ordered list of fallback placements.
2109
+ * Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.
2047
2110
  * - `_initialPlacement`: undefined (property only)
2048
2111
  * - `_actualDirection`: undefined (property only)
2049
2112
  *
@@ -2804,29 +2867,40 @@ export type CustomElements = {
2804
2867
  "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
2805
2868
 
2806
2869
  /**
2807
- * A single line text input element.
2870
+ * A multi-line text input with built-in form validation, auto-resizing, and styling support.
2808
2871
  *
2809
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
2872
+ * The component automatically handles:
2873
+ * - Form integration
2874
+ * - Auto-resizing based on content and row constraints
2875
+ * - Built-in validation with customizable error messages
2876
+ * - Accessibility attributes and labeling
2810
2877
  *
2811
2878
  * ## Attributes & Properties
2812
2879
  *
2813
2880
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2814
2881
  *
2815
- * - `disabled`: undefined
2816
- * - `invalid`: undefined
2817
- * - `label`: undefined
2818
- * - `help-text`/`helpText`: undefined
2819
- * - `maximum-rows`/`maxRows`: undefined
2820
- * - `minimum-rows`/`minRows`: undefined
2821
- * - `name`: undefined
2822
- * - `placeholder`: undefined
2882
+ * - `disabled`: Keep in mind that using disabled in its current form is an anti-pattern.
2883
+ *
2884
+ * There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
2885
+ *
2886
+ * Please consider more informative alternatives before choosing to use disabled on an element.
2887
+ * - `invalid`: Mark the form field as invalid.
2888
+ *
2889
+ * Make sure to also set a `help-text` to help users fix the validation problem.
2890
+ * - `label`: Either a `label` or an `aria-label` must be provided.
2891
+ * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
2892
+ * or on its own to show a help text.
2893
+ * - `maximum-rows`/`maxRows`: Sets the maximum number of text rows before the content starts scrolling.
2894
+ * - `minimum-rows`/`minRows`: Sets the minimum number of text rows the textarea should display
2895
+ * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form
2896
+ * - `placeholder`: Set a text that is shown in the textarea when it doesn't have a value.
2897
+ *
2898
+ * Placeholder text should not be used as a substitute for labeling the element with a visible label.
2823
2899
  * - `read-only`/`readOnly`: undefined
2824
- * - `readonly`: undefined
2825
- * - `required`: undefined
2826
- * - `value`: undefined
2827
- * - `optional`: undefined
2828
- * - `minHeight`: undefined (property only)
2829
- * - `maxHeight`: undefined (property only)
2900
+ * - `readonly`: Whether the input can be selected but not changed by the user
2901
+ * - `required`: Whether user input is required on the input before form submission
2902
+ * - `value`: Lets you set the current value
2903
+ * - `optional`: Show an icon behind the label indicating the field is optional
2830
2904
  * - `validationMessage`: Returns the validation message if the textarea is invalid, otherwise an empty string (property only) (readonly)
2831
2905
  * - `validity`: Returns the validity state of the textarea (property only) (readonly)
2832
2906
  *
@@ -3030,25 +3104,42 @@ export type CustomElementsSolidJs = {
3030
3104
  >;
3031
3105
 
3032
3106
  /**
3107
+ * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
3033
3108
  *
3109
+ * The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.
3110
+ *
3111
+ * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
3034
3112
  *
3035
3113
  * ## Attributes & Properties
3036
3114
  *
3037
3115
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3038
3116
  *
3039
- * - `show`: undefined
3040
- * - `placement`: undefined
3041
- * - `tooltip`: undefined
3042
- * - `callout`: undefined
3043
- * - `popover`: undefined
3044
- * - `highlight`: undefined
3045
- * - `can-close`/`canClose`: undefined
3046
- * - `no-arrow`/`noArrow`: undefined
3047
- * - `distance`: undefined
3048
- * - `skidding`: undefined
3049
- * - `flip`: undefined
3050
- * - `cross-axis`/`crossAxis`: undefined
3051
- * - `fallback-placements`/`fallbackPlacements`: undefined
3117
+ * - `show`: Controls whether the attention panel is visible.
3118
+ * Set to `true` to show the attention content and `false` to hide it.
3119
+ * - `placement`: Preferred placement relative to the trigger element.
3120
+ * Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
3121
+ * - `tooltip`: Renders the component with tooltip styling and behavior.
3122
+ * Use for compact, non-modal contextual hints anchored to another element.
3123
+ * - `callout`: Renders the component as an inline callout.
3124
+ * Callout mode is used for always-in-flow informational content instead of floating overlay behavior.
3125
+ * - `popover`: Enables native popover behavior for the attention element.
3126
+ * When enabled, the component uses popover semantics and styling suitable for floating surface UI.
3127
+ * - `highlight`: Renders the component with highlight styling.
3128
+ * Use highlight mode to visually emphasize important contextual information.
3129
+ * - `can-close`/`canClose`: Shows a close button inside the attention component.
3130
+ * Adds an internal dismiss action that lets users close the attention panel.
3131
+ * - `no-arrow`/`noArrow`: Hides the directional arrow of the attention component.
3132
+ * Disable the arrow when the visual connection to the trigger should not be shown.
3133
+ * - `distance`: Distance offset between trigger and attention panel.
3134
+ * Defines the main-axis spacing in pixels from the anchor element.
3135
+ * - `skidding`: Cross-axis offset for fine-grained positioning.
3136
+ * Moves the panel along the cross axis in pixels to adjust alignment with the trigger.
3137
+ * - `flip`: Enables automatic flipping when placement has no space.
3138
+ * Allows the component to choose an alternative side if the preferred placement would overflow.
3139
+ * - `cross-axis`/`crossAxis`: Allows overflow checks on the cross axis when flipping.
3140
+ * Use with `flip` to improve collision handling when space is constrained horizontally or vertically.
3141
+ * - `fallback-placements`/`fallbackPlacements`: Ordered list of fallback placements.
3142
+ * Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.
3052
3143
  * - `_initialPlacement`: undefined (property only)
3053
3144
  * - `_actualDirection`: undefined (property only)
3054
3145
  *
@@ -3886,29 +3977,40 @@ export type CustomElementsSolidJs = {
3886
3977
  >;
3887
3978
 
3888
3979
  /**
3889
- * A single line text input element.
3980
+ * A multi-line text input with built-in form validation, auto-resizing, and styling support.
3890
3981
  *
3891
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
3982
+ * The component automatically handles:
3983
+ * - Form integration
3984
+ * - Auto-resizing based on content and row constraints
3985
+ * - Built-in validation with customizable error messages
3986
+ * - Accessibility attributes and labeling
3892
3987
  *
3893
3988
  * ## Attributes & Properties
3894
3989
  *
3895
3990
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3896
3991
  *
3897
- * - `disabled`: undefined
3898
- * - `invalid`: undefined
3899
- * - `label`: undefined
3900
- * - `help-text`/`helpText`: undefined
3901
- * - `maximum-rows`/`maxRows`: undefined
3902
- * - `minimum-rows`/`minRows`: undefined
3903
- * - `name`: undefined
3904
- * - `placeholder`: undefined
3992
+ * - `disabled`: Keep in mind that using disabled in its current form is an anti-pattern.
3993
+ *
3994
+ * There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
3995
+ *
3996
+ * Please consider more informative alternatives before choosing to use disabled on an element.
3997
+ * - `invalid`: Mark the form field as invalid.
3998
+ *
3999
+ * Make sure to also set a `help-text` to help users fix the validation problem.
4000
+ * - `label`: Either a `label` or an `aria-label` must be provided.
4001
+ * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
4002
+ * or on its own to show a help text.
4003
+ * - `maximum-rows`/`maxRows`: Sets the maximum number of text rows before the content starts scrolling.
4004
+ * - `minimum-rows`/`minRows`: Sets the minimum number of text rows the textarea should display
4005
+ * - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form
4006
+ * - `placeholder`: Set a text that is shown in the textarea when it doesn't have a value.
4007
+ *
4008
+ * Placeholder text should not be used as a substitute for labeling the element with a visible label.
3905
4009
  * - `read-only`/`readOnly`: undefined
3906
- * - `readonly`: undefined
3907
- * - `required`: undefined
3908
- * - `value`: undefined
3909
- * - `optional`: undefined
3910
- * - `minHeight`: undefined (property only)
3911
- * - `maxHeight`: undefined (property only)
4010
+ * - `readonly`: Whether the input can be selected but not changed by the user
4011
+ * - `required`: Whether user input is required on the input before form submission
4012
+ * - `value`: Lets you set the current value
4013
+ * - `optional`: Show an icon behind the label indicating the field is optional
3912
4014
  * - `validationMessage`: Returns the validation message if the textarea is invalid, otherwise an empty string (property only) (readonly)
3913
4015
  * - `validity`: Returns the validity state of the textarea (property only) (readonly)
3914
4016
  *