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

package/dist/custom-elements.json

@@ -1469,7 +1469,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "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.\n\nThe 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.\n\nNote: 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.",
           "name": "WarpAttention",
           "members": [
             {
@@ -1479,6 +1479,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.",
               "attribute": "show",
               "reflects": true
             },
@@ -1488,6 +1489,7 @@
               "type": {
                 "text": "Directions"
               },
+              "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
               "default": "'bottom'",
               "attribute": "placement"
             },
@@ -1498,6 +1500,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.",
               "attribute": "tooltip",
               "reflects": true
             },
@@ -1508,6 +1511,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.",
               "attribute": "callout",
               "reflects": true
             },
@@ -1517,6 +1521,7 @@
               "type": {
                 "text": "boolean"
               },
+              "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.",
               "default": "false",
               "attribute": "popover",
               "reflects": true
@@ -1528,6 +1533,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.",
               "attribute": "highlight",
               "reflects": true
             },
@@ -1538,6 +1544,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.",
               "attribute": "can-close",
               "reflects": true
             },
@@ -1548,6 +1555,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.",
               "attribute": "no-arrow",
               "reflects": true
             },
@@ -1557,6 +1565,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.",
               "default": "8",
               "attribute": "distance"
             },
@@ -1566,6 +1575,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.",
               "default": "0",
               "attribute": "skidding"
             },
@@ -1576,6 +1586,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.",
               "attribute": "flip",
               "reflects": true
             },
@@ -1586,6 +1597,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.",
               "attribute": "cross-axis",
               "reflects": true
             },
@@ -1595,6 +1607,8 @@
               "type": {
                 "text": "Directions[]"
               },
+              "default": "[]",
+              "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.",
               "attribute": "fallback-placements",
               "reflects": true
             },
@@ -1664,6 +1678,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.",
               "fieldName": "show"
             },
             {
@@ -1671,6 +1686,7 @@
               "type": {
                 "text": "Directions"
               },
+              "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
               "default": "'bottom'",
               "fieldName": "placement"
             },
@@ -1680,6 +1696,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.",
               "fieldName": "tooltip"
             },
             {
@@ -1688,6 +1705,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.",
               "fieldName": "callout"
             },
             {
@@ -1695,6 +1713,7 @@
               "type": {
                 "text": "boolean"
               },
+              "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.",
               "default": "false",
               "fieldName": "popover"
             },
@@ -1704,6 +1723,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.",
               "fieldName": "highlight"
             },
             {
@@ -1712,6 +1732,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.",
               "fieldName": "canClose"
             },
             {
@@ -1720,6 +1741,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.",
               "fieldName": "noArrow"
             },
             {
@@ -1727,6 +1749,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.",
               "default": "8",
               "fieldName": "distance"
             },
@@ -1735,6 +1758,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.",
               "default": "0",
               "fieldName": "skidding"
             },
@@ -1744,6 +1768,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.",
               "fieldName": "flip"
             },
             {
@@ -1752,6 +1777,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.",
               "fieldName": "crossAxis"
             },
             {
@@ -1759,6 +1785,8 @@
               "type": {
                 "text": "Directions[]"
               },
+              "default": "[]",
+              "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.",
               "fieldName": "fallbackPlacements"
             }
           ],
@@ -1890,6 +1918,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.",
               "attribute": "bleed",
               "reflects": true
             },
@@ -1900,6 +1929,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.",
               "attribute": "bordered",
               "reflects": true
             },
@@ -1910,6 +1940,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.",
               "attribute": "info",
               "reflects": true
             },
@@ -1920,6 +1951,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.",
               "attribute": "neutral",
               "reflects": true
             },
@@ -1929,6 +1961,8 @@
               "type": {
                 "text": "string"
               },
+              "default": "'region'",
+              "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.",
               "attribute": "role",
               "reflects": true
             }
@@ -1940,6 +1974,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.",
               "fieldName": "bleed"
             },
             {
@@ -1948,6 +1983,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.",
               "fieldName": "bordered"
             },
             {
@@ -1956,6 +1992,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.",
               "fieldName": "info"
             },
             {
@@ -1964,6 +2001,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.",
               "fieldName": "neutral"
             },
             {
@@ -1971,9 +2009,17 @@
               "type": {
                 "text": "string"
               },
+              "default": "'region'",
+              "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.",
               "fieldName": "role"
             }
           ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -8048,18 +8094,9 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)",
+          "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\nThe component automatically handles:\n - Form integration\n - Auto-resizing based on content and row constraints\n - Built-in validation with customizable error messages\n - Accessibility attributes and labeling",
           "name": "WarpTextarea",
           "members": [
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -8067,6 +8104,8 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere 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.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
+              "summary": "Makes the element not focusable and hides it from form submits",
               "attribute": "disabled",
               "reflects": true
             },
@@ -8077,6 +8116,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.",
               "attribute": "invalid",
               "reflects": true
             },
@@ -8086,6 +8126,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Either a `label` or an `aria-label` must be provided.",
               "attribute": "label",
               "reflects": true
             },
@@ -8095,6 +8136,8 @@
               "type": {
                 "text": "string"
               },
+              "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
+              "summary": "Description shown below the input field",
               "attribute": "help-text",
               "reflects": true
             },
@@ -8104,6 +8147,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Sets the maximum number of text rows before the content starts scrolling.",
               "attribute": "maximum-rows",
               "reflects": true
             },
@@ -8113,6 +8157,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Sets the minimum number of text rows the textarea should display",
               "attribute": "minimum-rows",
               "reflects": true
             },
@@ -8122,6 +8167,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form",
               "attribute": "name",
               "reflects": true
             },
@@ -8131,6 +8177,8 @@
               "type": {
                 "text": "string"
               },
+              "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
+              "summary": "Shown in the textarea when it doesn't have a value",
               "attribute": "placeholder",
               "reflects": true
             },
@@ -8141,7 +8189,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "deprecated": "Use the native readonly attribute instead. Here for API consistency with `w-textfield`.",
+              "deprecated": "Use the native `readonly` attribute instead",
               "attribute": "read-only",
               "reflects": true
             },
@@ -8152,6 +8200,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the input can be selected but not changed by the user",
               "attribute": "readonly",
               "reflects": true
             },
@@ -8162,6 +8211,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether user input is required on the input before form submission",
               "attribute": "required",
               "reflects": true
             },
@@ -8171,6 +8221,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Lets you set the current value",
               "attribute": "value",
               "reflects": true
             },
@@ -8181,17 +8232,10 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Show an icon behind the label indicating the field is optional",
               "attribute": "optional",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "minHeight"
-            },
-            {
-              "kind": "field",
-              "name": "maxHeight"
-            },
             {
               "kind": "field",
               "name": "_textarea",
@@ -8355,6 +8399,8 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere 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.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
+              "summary": "Makes the element not focusable and hides it from form submits",
               "fieldName": "disabled"
             },
             {
@@ -8363,6 +8409,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.",
               "fieldName": "invalid"
             },
             {
@@ -8370,6 +8417,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Either a `label` or an `aria-label` must be provided.",
               "fieldName": "label"
             },
             {
@@ -8377,6 +8425,8 @@
               "type": {
                 "text": "string"
               },
+              "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
+              "summary": "Description shown below the input field",
               "fieldName": "helpText"
             },
             {
@@ -8384,6 +8434,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Sets the maximum number of text rows before the content starts scrolling.",
               "fieldName": "maxRows"
             },
             {
@@ -8391,6 +8442,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "Sets the minimum number of text rows the textarea should display",
               "fieldName": "minRows"
             },
             {
@@ -8398,6 +8450,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form",
               "fieldName": "name"
             },
             {
@@ -8405,6 +8458,8 @@
               "type": {
                 "text": "string"
               },
+              "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
+              "summary": "Shown in the textarea when it doesn't have a value",
               "fieldName": "placeholder"
             },
             {
@@ -8413,7 +8468,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "deprecated": "Use the native readonly attribute instead. Here for API consistency with `w-textfield`.",
+              "deprecated": "Use the native `readonly` attribute instead",
               "fieldName": "readOnly"
             },
             {
@@ -8422,6 +8477,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the input can be selected but not changed by the user",
               "fieldName": "readonly"
             },
             {
@@ -8430,6 +8486,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether user input is required on the input before form submission",
               "fieldName": "required"
             },
             {
@@ -8437,6 +8494,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Lets you set the current value",
               "fieldName": "value"
             },
             {
@@ -8445,6 +8503,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Show an icon behind the label indicating the field is optional",
               "fieldName": "optional"
             }
           ],

package/dist/docs/affix/affix.md

@@ -68,58 +68,46 @@ When `search` or `clear` is enabled, `w-affix` renders a button and a matching `
 
 ### Prefix Label
 
-<style-isolate>
-  <w-textfield label="Price">
-    <w-affix slot="prefix" label="kr"></w-affix>
-  </w-textfield>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-textfield label="Price">
   <w-affix slot="suffix" label="kr"></w-affix>
 </w-textfield>
 ```
 
-### Suffix Label
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Price">
-    <w-affix slot="suffix" label="kr"></w-affix>
-  </w-textfield>
-</style-isolate>
+### Suffix Label
 
+<elements-example>
+  
 ```html
 <w-textfield label="Price">
   <w-affix slot="suffix" label="kr"></w-affix>
 </w-textfield>
 ```
 
-### Prefix Search Icon
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Search">
-    <w-affix slot="prefix" search></w-affix>
-  </w-textfield>
-</style-isolate>
+### Prefix Search Icon
 
+<elements-example>
+  
 ```html
 <w-textfield label="Search">
   <w-affix slot="prefix" search></w-affix>
 </w-textfield>
 ```
 
+</elements-example>
+
 ### Suffix Search Icon
 
 If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form
 
-<style-isolate>
-  <form>
-    <w-textfield label="Search">
-      <w-affix slot="suffix" search></w-affix>
-    </w-textfield>
-  </form>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <form>
   <w-textfield label="Search">
@@ -128,36 +116,34 @@ If you wrap the textfield with affix in a form element, clicking the search butt
 </form>
 ```
 
+</elements-example>
+
 ### Suffix Clear Icon
 
 Clicking the clear button will reset the textfield
 
-<style-isolate>
-  <w-textfield label="Search input">
-    <w-affix slot="suffix" clear></w-affix>
-  </w-textfield>
-</style-isolate>
-
+<elements-example>
+  
 ```html
 <w-textfield label="Search input">
   <w-affix slot="suffix" clear></w-affix>
 </w-textfield>
 ```
 
-### Icons
+</elements-example>
 
-<style-isolate>
-  <w-textfield label="Award">
-    <w-affix slot="prefix" icon="AwardMedal"></w-affix>
-  </w-textfield>
-</style-isolate>
+### Icons
 
+<elements-example>
+  
 ```html
 <w-textfield label="Award">
   <w-affix slot="prefix" icon="AwardMedal"></w-affix>
 </w-textfield>
 ```
 
+</elements-example>
+
 ## API Documentation
 
 ### Properties