@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/custom-elements.json +62 -21
- package/dist/docs/affix/affix.md +24 -38
- package/dist/docs/affix/examples.md +24 -38
- package/dist/docs/alert/accessibility.md +4 -9
- package/dist/docs/alert/alert.md +24 -39
- package/dist/docs/alert/examples.md +20 -30
- package/dist/docs/attention/accessibility.md +50 -0
- package/dist/docs/attention/api.md +40 -27
- package/dist/docs/attention/attention.md +276 -27
- package/dist/docs/attention/examples.md +91 -0
- package/dist/docs/attention/usage.md +91 -0
- package/dist/docs/badge/badge.md +23 -36
- package/dist/docs/badge/examples.md +23 -36
- package/dist/docs/textarea/accessibility.md +5 -0
- package/dist/docs/textarea/api.md +32 -47
- package/dist/docs/textarea/examples.md +81 -0
- package/dist/docs/textarea/textarea.md +133 -49
- package/dist/docs/textarea/usage.md +9 -0
- package/dist/docs/textfield/examples.md +32 -49
- package/dist/docs/textfield/textfield.md +39 -60
- package/dist/docs/textfield/usage.md +7 -11
- package/dist/index.d.ts +236 -134
- package/dist/packages/attention/attention.d.ts +46 -37
- package/dist/packages/attention/attention.js +20 -20
- package/dist/packages/attention/attention.js.map +3 -3
- package/dist/packages/textarea/textarea.d.ts +38 -29
- package/dist/packages/textarea/textarea.js.map +2 -2
- package/dist/web-types.json +182 -38
- package/package.json +1 -2
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
|
|
1839
|
+
/** @deprecated Use the native `readonly` attribute instead */
|
|
1796
1840
|
"read-only"?: WarpTextarea["readOnly"];
|
|
1797
|
-
/** @deprecated Use the native readonly attribute instead
|
|
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
|
|
1886
|
+
/** @deprecated Use the native `readonly` attribute instead */
|
|
1837
1887
|
"bool:read-only"?: WarpTextarea["readOnly"];
|
|
1838
|
-
/** @deprecated Use the native readonly attribute instead
|
|
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`:
|
|
2035
|
-
*
|
|
2036
|
-
* - `
|
|
2037
|
-
*
|
|
2038
|
-
* - `
|
|
2039
|
-
* -
|
|
2040
|
-
* - `
|
|
2041
|
-
*
|
|
2042
|
-
* - `
|
|
2043
|
-
*
|
|
2044
|
-
* - `
|
|
2045
|
-
*
|
|
2046
|
-
* - `
|
|
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
|
|
2870
|
+
* A multi-line text input with built-in form validation, auto-resizing, and styling support.
|
|
2808
2871
|
*
|
|
2809
|
-
*
|
|
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`:
|
|
2816
|
-
*
|
|
2817
|
-
*
|
|
2818
|
-
*
|
|
2819
|
-
*
|
|
2820
|
-
* - `
|
|
2821
|
-
*
|
|
2822
|
-
*
|
|
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`:
|
|
2825
|
-
* - `required`:
|
|
2826
|
-
* - `value`:
|
|
2827
|
-
* - `optional`:
|
|
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`:
|
|
3040
|
-
*
|
|
3041
|
-
* - `
|
|
3042
|
-
*
|
|
3043
|
-
* - `
|
|
3044
|
-
* -
|
|
3045
|
-
* - `
|
|
3046
|
-
*
|
|
3047
|
-
* - `
|
|
3048
|
-
*
|
|
3049
|
-
* - `
|
|
3050
|
-
*
|
|
3051
|
-
* - `
|
|
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
|
|
3980
|
+
* A multi-line text input with built-in form validation, auto-resizing, and styling support.
|
|
3890
3981
|
*
|
|
3891
|
-
*
|
|
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`:
|
|
3898
|
-
*
|
|
3899
|
-
*
|
|
3900
|
-
*
|
|
3901
|
-
*
|
|
3902
|
-
* - `
|
|
3903
|
-
*
|
|
3904
|
-
*
|
|
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`:
|
|
3907
|
-
* - `required`:
|
|
3908
|
-
* - `value`:
|
|
3909
|
-
* - `optional`:
|
|
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
|
*
|