@warp-ds/elements 2.3.0-next.10 → 2.3.0-next.12

package/dist/custom-elements.json

@@ -1884,17 +1884,38 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Whether the element should receive focus on render",
+              "description": "Whether the element should receive focus on render.",
+              "deprecated": "Use the native `autofocus` attribute instead.",
               "attribute": "auto-focus",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the element should receive focus on render",
+              "attribute": "autofocus",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+              "attribute": "help-text",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "invalid",
               "type": {
                 "text": "boolean"
               },
-              "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
+              "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
               "attribute": "invalid",
               "reflects": true
             },
@@ -1904,7 +1925,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Whether to always show a hint",
+              "description": "Whether to always show a hint.",
+              "deprecated": "Use `help-text` instead and only set it if you want to display the help text.",
               "attribute": "always",
               "reflects": true
             },
@@ -1914,7 +1936,8 @@
               "type": {
                 "text": "string"
               },
-              "description": "The content displayed as the help text",
+              "description": "The content displayed as the help text.",
+              "deprecated": "Use `help-text` instead.",
               "attribute": "hint",
               "reflects": true
             },
@@ -1955,9 +1978,20 @@
                 "text": "boolean"
               },
               "description": "Renders the field in a readonly state.",
+              "deprecated": "Use the native readonly attribute instead.",
               "attribute": "read-only",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Renders the field in a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2040,15 +2074,32 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Whether the element should receive focus on render",
+              "description": "Whether the element should receive focus on render.",
+              "deprecated": "Use the native `autofocus` attribute instead.",
               "fieldName": "autoFocus"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the element should receive focus on render",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+              "fieldName": "helpText"
+            },
             {
               "name": "invalid",
               "type": {
                 "text": "boolean"
               },
-              "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
+              "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
               "fieldName": "invalid"
             },
             {
@@ -2056,7 +2107,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Whether to always show a hint",
+              "description": "Whether to always show a hint.",
+              "deprecated": "Use `help-text` instead and only set it if you want to display the help text.",
               "fieldName": "always"
             },
             {
@@ -2064,7 +2116,8 @@
               "type": {
                 "text": "string"
               },
-              "description": "The content displayed as the help text",
+              "description": "The content displayed as the help text.",
+              "deprecated": "Use `help-text` instead.",
               "fieldName": "hint"
             },
             {
@@ -2097,8 +2150,17 @@
                 "text": "boolean"
               },
               "description": "Renders the field in a readonly state.",
+              "deprecated": "Use the native readonly attribute instead.",
               "fieldName": "readOnly"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Renders the field in a readonly state.",
+              "fieldName": "readonly"
+            },
             {
               "name": "name",
               "type": {
@@ -5460,6 +5522,24 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "invalid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowValuesOutsideRange",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set by `<w-slider>`"
+            },
             {
               "kind": "field",
               "name": "markers",
@@ -5512,7 +5592,7 @@
               "kind": "field",
               "name": "formatter",
               "type": {
-                "text": "(value: string) => string"
+                "text": "(value: string, type: 'from' | 'to') => string"
               },
               "description": "JS hook to help you format the numeric value how you want."
             },
@@ -5550,13 +5630,23 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "#syncRangeValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "#onInput",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "Promise<boolean>"
                 }
               },
               "parameters": [
@@ -5567,6 +5657,29 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "field",
+              "name": "boundaryValue",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "textFieldDisplayValue",
+              "description": "Value to display in the textfield (shows boundary when focused on empty value)",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltipDisplayValue",
+              "type": {
+                "text": "string | number"
+              },
+              "description": "Value to display in the tooltip",
+              "readonly": true
             }
           ],
           "events": [
@@ -5619,6 +5732,13 @@
                 "text": "boolean"
               },
               "fieldName": "disabled"
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "invalid"
             }
           ],
           "mixins": [
@@ -5716,6 +5836,25 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "allowValuesOutsideRange",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "allow-values-outside-range"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "helpText",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "invalid",
@@ -5788,7 +5927,7 @@
               "kind": "field",
               "name": "formatter",
               "type": {
-                "text": "(value: string) => string"
+                "text": "(value: string, type: 'to' | 'from') => string"
               },
               "description": "Function to format the to- and from labels and value in the slider thumb tooltip."
             },
@@ -5802,6 +5941,16 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "edgeMin",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "edgeMax",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "#onInput",
@@ -5815,6 +5964,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#doValidation",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "#onSliderValidity",
@@ -5828,6 +5982,30 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#getEdgeValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "boundary",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "WarpSliderThumb"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#updateActiveTrack",
@@ -5860,6 +6038,22 @@
               "default": "false",
               "fieldName": "disabled"
             },
+            {
+              "name": "allow-values-outside-range",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "allowValuesOutsideRange"
+            },
+            {
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "helpText"
+            },
             {
               "name": "invalid",
               "type": {

package/dist/index.d.ts

@@ -379,15 +379,21 @@ export type WarpPillProps = {
 
 
 export type WarpSelectProps = {
-  /** Whether the element should receive focus on render */
+  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
   "auto-focus"?: WarpSelect['autoFocus'];
-  /** Whether the element should receive focus on render */
+  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
   "autoFocus"?: WarpSelect['autoFocus'];
-  /** Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error */
+  /** Whether the element should receive focus on render */
+  "autofocus"?: WarpSelect['autofocus'];
+  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  "help-text"?: WarpSelect['helpText'];
+  /** The content displayed as the help text. Paired with `invalid` to show the text as a validation error. */
+  "helpText"?: WarpSelect['helpText'];
+  /** Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. */
   "invalid"?: WarpSelect['invalid'];
-  /** Whether to always show a hint */
+  /** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
   "always"?: WarpSelect['always'];
-  /** The content displayed as the help text */
+  /** @deprecated Use `help-text` instead. - The content displayed as the help text. */
   "hint"?: WarpSelect['hint'];
   /** The content to disply as the label */
   "label"?: WarpSelect['label'];
@@ -395,10 +401,12 @@ export type WarpSelectProps = {
   "optional"?: WarpSelect['optional'];
   /** Renders the field in a disabled state. */
   "disabled"?: WarpSelect['disabled'];
-  /** Renders the field in a readonly state. */
+  /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
   "read-only"?: WarpSelect['readOnly'];
-  /** Renders the field in a readonly state. */
+  /** @deprecated Use the native readonly attribute instead. - Renders the field in a readonly state. */
   "readOnly"?: WarpSelect['readOnly'];
+  /** Renders the field in a readonly state. */
+  "readonly"?: WarpSelect['readonly'];
   /**  */
   "name"?: WarpSelect['name'];
   /**  */
@@ -705,6 +713,10 @@ export type WarpSliderThumbProps = {
   "value"?: WarpSliderThumb['value'];
   /**  */
   "disabled"?: WarpSliderThumb['disabled'];
+  /**  */
+  "invalid"?: WarpSliderThumb['invalid'];
+  /** Set by `<w-slider>` */
+  "allowValuesOutsideRange"?: WarpSliderThumb['allowValuesOutsideRange'];
   /** Set by `<w-slider>` */
   "markers"?: WarpSliderThumb['markers'];
   /** Set by `<w-slider>` */
@@ -737,6 +749,12 @@ If you need to display HTML, use the `label` slot instead. */
   /**  */
   "disabled"?: WarpSlider['disabled'];
   /**  */
+  "allow-values-outside-range"?: WarpSlider['allowValuesOutsideRange'];
+  /**  */
+  "allowValuesOutsideRange"?: WarpSlider['allowValuesOutsideRange'];
+  /**  */
+  "helpText"?: WarpSlider['helpText'];
+  /**  */
   "invalid"?: WarpSlider['invalid'];
   /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
   "required"?: WarpSlider['required'];
@@ -1131,14 +1149,17 @@ export type WarpTextareaProps = {
  * 
  * Component attributes and properties that can be applied to the element or by using JavaScript.
  * 
- * - `auto-focus`/`autoFocus`: Whether the element should receive focus on render 
- * - `invalid`: Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error 
- * - `always`: Whether to always show a hint 
- * - `hint`: The content displayed as the help text 
+ * - `auto-focus`/`autoFocus`: Whether the element should receive focus on render. 
+ * - `autofocus`: Whether the element should receive focus on render 
+ * - `help-text`/`helpText`: The content displayed as the help text. Paired with `invalid` to show the text as a validation error. 
+ * - `invalid`: Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. 
+ * - `always`: Whether to always show a hint. 
+ * - `hint`: The content displayed as the help text. 
  * - `label`: The content to disply as the label 
  * - `optional`: Whether to show optional text 
  * - `disabled`: Renders the field in a disabled state. 
  * - `read-only`/`readOnly`: Renders the field in a readonly state. 
+ * - `readonly`: Renders the field in a readonly state. 
  * - `name`: undefined 
  * - `value`: undefined 
  * 
@@ -1452,6 +1473,8 @@ export type WarpTextareaProps = {
  * - `name`: undefined 
  * - `value`: undefined 
  * - `disabled`: undefined 
+ * - `invalid`: undefined 
+ * - `allowValuesOutsideRange`: Set by `<w-slider>` (property only)
  * - `markers`: Set by `<w-slider>` (property only)
  * - `required`: Set by `<w-slider>` (property only)
  * - `step`: Set by `<w-slider>` (property only)
@@ -1461,6 +1484,9 @@ export type WarpTextareaProps = {
  * - `formatter`: JS hook to help you format the numeric value how you want. (property only)
  * - `range`: undefined (property only)
  * - `textfield`: undefined (property only)
+ * - `boundaryValue`: undefined (property only) (readonly)
+ * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
+ * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
  * 
  * ## Events
  * 
@@ -1484,6 +1510,8 @@ export type WarpTextareaProps = {
  * 
  * If you need to display HTML, use the `label` slot instead. 
  * - `disabled`: undefined 
+ * - `allow-values-outside-range`/`allowValuesOutsideRange`: undefined 
+ * - `helpText`: undefined 
  * - `invalid`: undefined 
  * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit. 
  * - `min`: undefined 
@@ -1492,6 +1520,8 @@ export type WarpTextareaProps = {
  * - `step`: undefined 
  * - `suffix`: Suffix used in text input fields and for the min and max values of the slider. 
  * - `formatter`: Function to format the to- and from labels and value in the slider thumb tooltip. (property only)
+ * - `edgeMin`: undefined (property only) (readonly)
+ * - `edgeMax`: undefined (property only) (readonly)
  * 
  * ## Slots
  * 

package/dist/packages/combobox/combobox.react.stories.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         onChange: string;
         onchange: string;
     }>;
-    render(args: Omit<React.HTMLAttributes<import(".").WarpCombobox>, "label" | "onchange" | "onselect" | "onChange" | "onSelect" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "name" | "value" | "invalid" | "optional" | "helpText" | "placeholder" | "required" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering" | "containerClassName" | "listClassName"> & {
+    render(args: Omit<React.HTMLAttributes<import(".").WarpCombobox>, "label" | "onchange" | "onselect" | "onChange" | "onSelect" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "name" | "value" | "invalid" | "helpText" | "optional" | "placeholder" | "required" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering" | "containerClassName" | "listClassName"> & {
         onSelect?: (e: Event) => void;
         onselect?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/select/index.d.ts

@@ -8,13 +8,28 @@ declare const WarpSelect_base: import("@open-wc/form-control").Constructor<impor
  */
 export declare class WarpSelect extends WarpSelect_base {
     #private;
-    /** Whether the element should receive focus on render */
+    /**
+     * Whether the element should receive focus on render.
+     * @deprecated Use the native `autofocus` attribute instead.
+     */
     autoFocus: boolean;
-    /** Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error */
+    /** Whether the element should receive focus on render */
+    autofocus: boolean;
+    /**
+     * The content displayed as the help text. Paired with `invalid` to show the text as a validation error.
+     */
+    helpText: string;
+    /** Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. */
     invalid: boolean;
-    /** Whether to always show a hint */
+    /**
+     * Whether to always show a hint.
+     * @deprecated Use `help-text` instead and only set it if you want to display the help text.
+     */
     always: boolean;
-    /** The content displayed as the help text */
+    /**
+     * The content displayed as the help text.
+     * @deprecated Use `help-text` instead.
+     */
     hint: string;
     /** The content to disply as the label */
     label: string;
@@ -22,8 +37,13 @@ export declare class WarpSelect extends WarpSelect_base {
     optional: boolean;
     /** Renders the field in a disabled state. */
     disabled: boolean;
-    /** Renders the field in a readonly state. */
+    /**
+     * Renders the field in a readonly state.
+     * @deprecated Use the native readonly attribute instead.
+     */
     readOnly: boolean;
+    /** Renders the field in a readonly state. */
+    readonly: boolean;
     /** @internal */
     _options: Array<TemplateResult>;
     name: string;