@warp-ds/elements 2.3.0-next.2 → 2.3.0-next.21

package/dist/packages/textfield/react.d.ts

@@ -1,4 +1,4 @@
-import { WarpTextField } from '.';
+import { WarpTextField } from './index.js';
 export declare const TextField: import("@lit/react").ReactWebComponent<WarpTextField, {
     onBlur: string;
     onblur: string;

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 import { TextField } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import(".").WarpTextField>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "mask" | "pattern" | "disabled" | "name" | "type" | "value" | "updated" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "readOnly" | "helpText" | "size" | "max" | "min" | "minLength" | "maxLength" | "placeholder" | "required" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
+    render(args: Omit<React.HTMLAttributes<import(".").WarpTextField>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "mask" | "pattern" | "disabled" | "name" | "type" | "value" | "updated" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "step" | "helpText" | "readOnly" | "readonly" | "size" | "max" | "min" | "minLength" | "maxLength" | "placeholder" | "required" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/toggle-styles.js

@@ -11,7 +11,6 @@ export const toggleStyles = css `
     display: grid;
     grid-template-columns: 2rem max-content;
     gap: 8px;
-    padding: 0.2rem 0;
   }
   .hide-toggle {
     position: absolute;
@@ -34,7 +33,7 @@ export const toggleStyles = css `
     height: 2rem;
     width: 2rem;
     background-color: var(--w-s-color-background);
-    border-color: var(--w-s-color-border);
+    border-color: var(--w-s-color-border-strong);
     color: var(--w-s-color-icon-inverted);
     font-weight: 700;
     text-align: center;
@@ -45,7 +44,7 @@ export const toggleStyles = css `
     position: relative;
   }
   :host([type='checkbox']) .control {
-    border-radius: 2px;
+    border-radius: 4px;
   }
   .checkbox:has(:checked, :indeterminate),
   :host([type='checkbox'][checked]) .control,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.3.0-next.1",
+  "version": "2.3.0-next.20",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -464,22 +464,32 @@
           "attributes": [
             {
               "name": "auto-focus",
+              "description": "Whether the element should receive focus on render.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "autofocus",
               "description": "Whether the element should receive focus on render",
               "value": { "type": "boolean" }
             },
+            {
+              "name": "help-text",
+              "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+              "value": { "type": "string" }
+            },
             {
               "name": "invalid",
-              "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.",
               "value": { "type": "boolean" }
             },
             {
               "name": "always",
-              "description": "Whether to always show a hint",
+              "description": "Whether to always show a hint.",
               "value": { "type": "boolean" }
             },
             {
               "name": "hint",
-              "description": "The content displayed as the help text",
+              "description": "The content displayed as the help text.",
               "value": { "type": "string" }
             },
             {
@@ -502,6 +512,11 @@
               "description": "Renders the field in a readonly state.",
               "value": { "type": "boolean" }
             },
+            {
+              "name": "readonly",
+              "description": "Renders the field in a readonly state.",
+              "value": { "type": "boolean" }
+            },
             { "name": "name", "value": { "type": "string" } },
             { "name": "value", "value": { "type": "string" } }
           ],
@@ -510,22 +525,32 @@
             "properties": [
               {
                 "name": "autoFocus",
+                "description": "Whether the element should receive focus on render.",
+                "type": "boolean"
+              },
+              {
+                "name": "autofocus",
                 "description": "Whether the element should receive focus on render",
                 "type": "boolean"
               },
+              {
+                "name": "helpText",
+                "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
+                "type": "string"
+              },
               {
                 "name": "invalid",
-                "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.",
                 "type": "boolean"
               },
               {
                 "name": "always",
-                "description": "Whether to always show a hint",
+                "description": "Whether to always show a hint.",
                 "type": "boolean"
               },
               {
                 "name": "hint",
-                "description": "The content displayed as the help text",
+                "description": "The content displayed as the help text.",
                 "type": "string"
               },
               {
@@ -548,6 +573,11 @@
                 "description": "Renders the field in a readonly state.",
                 "type": "boolean"
               },
+              {
+                "name": "readonly",
+                "description": "Renders the field in a readonly state.",
+                "type": "boolean"
+              },
               { "name": "name", "type": "string" },
               { "name": "value", "type": "string" }
             ],
@@ -572,13 +602,15 @@
             { "name": "pattern", "value": { "type": "string" } },
             { "name": "placeholder", "value": { "type": "string" } },
             { "name": "read-only", "value": { "type": "boolean" } },
+            { "name": "readonly", "value": { "type": "boolean" } },
             { "name": "required", "value": { "type": "boolean" } },
             {
               "name": "type",
               "value": { "type": "string", "default": "'text'" }
             },
             { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } }
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "step", "value": { "type": "number" } }
           ],
           "events": [],
           "js": {
@@ -596,10 +628,12 @@
               { "name": "pattern", "type": "string" },
               { "name": "placeholder", "type": "string" },
               { "name": "readOnly", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
               { "name": "required", "type": "boolean" },
               { "name": "type", "type": "string" },
               { "name": "value", "type": "string" },
               { "name": "name", "type": "string" },
+              { "name": "step", "type": "number" },
               {
                 "name": "formatter",
                 "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input masking example from Filament Group\n\nhttps://css-tricks.com/input-masking/\nhttps://filamentgroup.github.io/politespace/demo/demo.html",
@@ -1069,7 +1103,11 @@
             { "name": "label", "value": { "type": "string" } },
             { "name": "name", "value": { "type": "string" } },
             { "name": "value", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "boolean" } }
+            { "name": "disabled", "value": { "type": "boolean" } },
+            {
+              "name": "invalid",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
           "events": [{ "name": "slidervalidity", "type": "CustomEvent" }],
           "js": {
@@ -1080,6 +1118,12 @@
               { "name": "name", "type": "string" },
               { "name": "value", "type": "string" },
               { "name": "disabled", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              {
+                "name": "allowValuesOutsideRange",
+                "description": "Set by `<w-slider>`",
+                "type": "boolean"
+              },
               {
                 "name": "markers",
                 "description": "Set by `<w-slider>`",
@@ -1113,10 +1157,20 @@
               {
                 "name": "formatter",
                 "description": "JS hook to help you format the numeric value how you want.",
-                "type": "(value: string) => string"
+                "type": "(value: string, type: 'from' | 'to') => string"
               },
               { "name": "range", "type": "HTMLInputElement" },
-              { "name": "textfield", "type": "WarpTextField" }
+              { "name": "textfield", "type": "WarpTextField" },
+              { "name": "boundaryValue", "type": "string" },
+              {
+                "name": "textFieldDisplayValue",
+                "description": "Value to display in the textfield (shows boundary when focused on empty value)"
+              },
+              {
+                "name": "tooltipDisplayValue",
+                "description": "Value to display in the tooltip",
+                "type": "string | number"
+              }
             ],
             "events": [{ "name": "slidervalidity", "type": "CustomEvent" }]
           }
@@ -1135,6 +1189,15 @@
               "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "allow-values-outside-range",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "error", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "help-text",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "invalid",
               "value": { "type": "boolean", "default": "false" }
@@ -1155,7 +1218,7 @@
             {
               "name": "suffix",
               "description": "Suffix used in text input fields and for the min and max values of the slider.",
-              "value": { "type": "string" }
+              "value": { "type": "string", "default": "''" }
             }
           ],
           "slots": [
@@ -1189,6 +1252,9 @@
                 "type": "string"
               },
               { "name": "disabled", "type": "boolean" },
+              { "name": "allowValuesOutsideRange", "type": "boolean" },
+              { "name": "error", "type": "string" },
+              { "name": "helpText", "type": "string" },
               { "name": "invalid", "type": "boolean" },
               {
                 "name": "required",
@@ -1211,14 +1277,20 @@
               {
                 "name": "formatter",
                 "description": "Function to format the to- and from labels and value in the slider thumb tooltip.",
-                "type": "(value: string) => string"
-              }
+                "type": "(value: string, type: 'to' | 'from') => string"
+              },
+              { "name": "_invalidMessage", "type": "string" },
+              { "name": "_hasInternalError", "type": "boolean" },
+              { "name": "edgeMin" },
+              { "name": "edgeMax" },
+              { "name": "componentHasError", "type": "boolean" },
+              { "name": "errorText", "type": "string" }
             ],
             "events": []
           }
         },
         {
-          "name": "w-steps",
+          "name": "w-step-indicator",
           "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n---\n",
           "doc-url": "",
           "attributes": [
@@ -1342,6 +1414,47 @@
             ],
             "events": [{ "name": "change", "type": "CustomEvent" }]
           }
+        },
+        {
+          "name": "w-textarea",
+          "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)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "disabled", "value": { "type": "boolean" } },
+            { "name": "invalid", "value": { "type": "boolean" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "help-text", "value": { "type": "string" } },
+            { "name": "maximum-rows", "value": { "type": "number" } },
+            { "name": "minimum-rows", "value": { "type": "number" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "placeholder", "value": { "type": "string" } },
+            { "name": "read-only", "value": { "type": "boolean" } },
+            { "name": "readonly", "value": { "type": "boolean" } },
+            { "name": "required", "value": { "type": "boolean" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "optional", "value": { "type": "boolean" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "disabled", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "label", "type": "string" },
+              { "name": "helpText", "type": "string" },
+              { "name": "maxRows", "type": "number" },
+              { "name": "minRows", "type": "number" },
+              { "name": "name", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "readOnly", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "value", "type": "string" },
+              { "name": "optional", "type": "boolean" },
+              { "name": "minHeight" },
+              { "name": "maxHeight" }
+            ],
+            "events": []
+          }
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.3.0-next.2",
+  "version": "2.3.0-next.21",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {
@@ -25,6 +25,110 @@
     "./components/toast": "./dist/packages/toast/index.js",
     "./toast": "./dist/api.js",
     "./custom-elements.json": "./dist/custom-elements.json",
+    "./react/affix": {
+      "types": "./dist/packages/affix/react.d.ts",
+      "import": "./dist/packages/affix/react.js"
+    },
+    "./react/alert": {
+      "types": "./dist/packages/alert/react.d.ts",
+      "import": "./dist/packages/alert/react.js"
+    },
+    "./react/attention": {
+      "types": "./dist/packages/attention/react.d.ts",
+      "import": "./dist/packages/attention/react.js"
+    },
+    "./react/badge": {
+      "types": "./dist/packages/badge/react.d.ts",
+      "import": "./dist/packages/badge/react.js"
+    },
+    "./react/box": {
+      "types": "./dist/packages/box/react.d.ts",
+      "import": "./dist/packages/box/react.js"
+    },
+    "./react/breadcrumbs": {
+      "types": "./dist/packages/breadcrumbs/react.d.ts",
+      "import": "./dist/packages/breadcrumbs/react.js"
+    },
+    "./react/button": {
+      "types": "./dist/packages/button/react.d.ts",
+      "import": "./dist/packages/button/react.js"
+    },
+    "./react/card": {
+      "types": "./dist/packages/card/react.d.ts",
+      "import": "./dist/packages/card/react.js"
+    },
+    "./react/combobox": {
+      "types": "./dist/packages/combobox/react.d.ts",
+      "import": "./dist/packages/combobox/react.js"
+    },
+    "./react/datepicker": {
+      "types": "./dist/packages/datepicker/react.d.ts",
+      "import": "./dist/packages/datepicker/react.js"
+    },
+    "./react/deadtoggle": {
+      "types": "./dist/packages/dead-toggle/react.d.ts",
+      "import": "./dist/packages/deadtoggle/react.js"
+    },
+    "./react/expandable": {
+      "types": "./dist/packages/expandable/react.d.ts",
+      "import": "./dist/packages/expandable/react.js"
+    },
+    "./react/link": {
+      "types": "./dist/packages/link/react.d.ts",
+      "import": "./dist/packages/link/react.js"
+    },
+    "./react/modal": {
+      "types": "./dist/packages/modal/react.d.ts",
+      "import": "./dist/packages/modal/react.js"
+    },
+    "./react/pageindicator": {
+      "types": "./dist/packages/pageindicator/react.d.ts",
+      "import": "./dist/packages/pageindicator/react.js"
+    },
+    "./react/pagination": {
+      "types": "./dist/packages/pagination/react.d.ts",
+      "import": "./dist/packages/pagination/react.js"
+    },
+    "./react/pill": {
+      "types": "./dist/packages/pill/react.d.ts",
+      "import": "./dist/packages/pill/react.js"
+    },
+    "./react/checkbox": {
+      "types": "./dist/packages/checkbox/react.d.ts",
+      "import": "./dist/packages/checkbox/react.js"
+    },
+    "./react/radio": {
+      "types": "./dist/packages/radio/react.d.ts",
+      "import": "./dist/packages/radio/react.js"
+    },
+    "./react/select": {
+      "types": "./dist/packages/select/react.d.ts",
+      "import": "./dist/packages/select/react.js"
+    },
+    "./react/slider": {
+      "types": "./dist/packages/slider/react.d.ts",
+      "import": "./dist/packages/slider/react.js"
+    },
+    "./react/stepindicator": {
+      "types": "./dist/packages/stepindicator/react.d.ts",
+      "import": "./dist/packages/stepindicator/react.js"
+    },
+    "./react/switch": {
+      "types": "./dist/packages/switch/react.d.ts",
+      "import": "./dist/packages/switch/react.js"
+    },
+    "./react/tabs": {
+      "types": "./dist/packages/tabs/react.d.ts",
+      "import": "./dist/packages/tabs/react.js"
+    },
+    "./react/textarea": {
+      "types": "./dist/packages/textarea/react.d.ts",
+      "import": "./dist/packages/textarea/react.js"
+    },
+    "./react/textfield": {
+      "types": "./dist/packages/textfield/react.d.ts",
+      "import": "./dist/packages/textfield/react.js"
+    },
     "./react/*": {
       "types": "./dist/packages/*/react.d.ts",
       "import": "./dist/packages/*/react.js"
@@ -39,6 +143,91 @@
   "customElements": "./dist/custom-elements.json",
   "web-types": "./dist/web-types.json",
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "react/affix": [
+        "./dist/packages/affix/react.d.ts"
+      ],
+      "react/alert": [
+        "./dist/packages/alert/react.d.ts"
+      ],
+      "react/attention": [
+        "./dist/packages/attention/react.d.ts"
+      ],
+      "react/badge": [
+        "./dist/packages/badge/react.d.ts"
+      ],
+      "react/box": [
+        "./dist/packages/box/react.d.ts"
+      ],
+      "react/breadcrumbs": [
+        "./dist/packages/breadcrumbs/react.d.ts"
+      ],
+      "react/button": [
+        "./dist/packages/button/react.d.ts"
+      ],
+      "react/card": [
+        "./dist/packages/card/react.d.ts"
+      ],
+      "react/combobox": [
+        "./dist/packages/combobox/react.d.ts"
+      ],
+      "react/datepicker": [
+        "./dist/packages/datepicker/react.d.ts"
+      ],
+      "react/deadtoggle": [
+        "./dist/packages/deadtoggle/react.d.ts"
+      ],
+      "react/expandable": [
+        "./dist/packages/expandable/react.d.ts"
+      ],
+      "react/link": [
+        "./dist/packages/link/react.d.ts"
+      ],
+      "react/modal": [
+        "./dist/packages/modal/react.d.ts"
+      ],
+      "react/pageindicator": [
+        "./dist/packages/pageindicator/react.d.ts"
+      ],
+      "react/pagination": [
+        "./dist/packages/pagination/react.d.ts"
+      ],
+      "react/pill": [
+        "./dist/packages/pill/react.d.ts"
+      ],
+      "react/checkbox": [
+        "./dist/packages/checkbox/react.d.ts"
+      ],
+      "react/radio": [
+        "./dist/packages/radio/react.d.ts"
+      ],
+      "react/select": [
+        "./dist/packages/select/react.d.ts"
+      ],
+      "react/slider": [
+        "./dist/packages/slider/react.d.ts"
+      ],
+      "react/stepindicator": [
+        "./dist/packages/stepindicator/react.d.ts"
+      ],
+      "react/switch": [
+        "./dist/packages/switch/react.d.ts"
+      ],
+      "react/tabs": [
+        "./dist/packages/tabs/react.d.ts"
+      ],
+      "react/textarea": [
+        "./dist/packages/textarea/react.d.ts"
+      ],
+      "react/textfield": [
+        "./dist/packages/textfield/react.d.ts"
+      ],
+      "toast": [
+        "./dist/packages/toast/api.d.ts"
+      ]
+    }
+  },
   "files": [
     "./dist/",
     "./dist/custom-elements.json"
@@ -69,6 +258,7 @@
     "prepare": "husky",
     "semantic-release": "semantic-release",
     "test": "vitest",
+    "test:module-resolution": "cd tests/module-resolution && ./setup.sh && ./test.sh",
     "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch"
   },
   "repository": {
@@ -120,7 +310,6 @@
     "html-format": "1.1.7",
     "husky": "^9.1.7",
     "lightningcss": "^1.30.1",
-    "lit": "3.x",
     "nanoid": "^5.1.5",
     "playwright": "^1.55.0",
     "prettier": "3.3.2",
@@ -134,25 +323,25 @@
     "vite": "^6.0.0",
     "vitest": "^3.2.4",
     "vitest-browser-lit": "^0.1.0",
-    "vitest-browser-react": "^1.0.1"
-  },
-  "dependencies": {
-    "@lingui/core": "5.2.0",
-    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
-    "@lit/react": "^1.0.8",
-    "@open-wc/form-control": "^1.0.0",
+    "vitest-browser-react": "^1.0.1",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
+    "tslib": "^2.8.1",
+    "rollup": "^4.52.3",
+    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
+    "@lingui/core": "5.2.0",
     "@warp-ds/core": "1.1.8",
     "@warp-ds/css": "2.1.1",
-    "@warp-ds/elements-core": "2.0.1",
     "@warp-ds/icons": "2.5.0",
     "date-fns": "^4.1.0",
-    "rollup": "^4.52.3",
     "scroll-doctor": "2.0.2",
-    "tslib": "^2.8.1"
+    "@open-wc/form-control": "^1.0.0"
+  },
+  "dependencies": {
+    "lit": "3.x",
+    "@lit/react": "^1.0.8"
   },
   "publishConfig": {
     "access": "public"