@warp-ds/elements 2.2.0-next.7 → 2.2.0-next.9

package/dist/web-types.json

@@ -1,11 +1,48 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.2.0-next.6",
+  "version": "2.2.0-next.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "w-affix",
+          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "aria-label", "value": { "type": "string" } },
+            {
+              "name": "clear",
+              "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "search",
+              "description": "Add this property to render a clickable Warp search icon.\n\nSet an `aria-label` that explains the action when using this.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "label", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "ariaLabel", "type": "string" },
+              {
+                "name": "clear",
+                "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
+                "type": "boolean"
+              },
+              {
+                "name": "search",
+                "description": "Add this property to render a clickable Warp search icon.\n\nSet an `aria-label` that explains the action when using this.",
+                "type": "boolean"
+              },
+              { "name": "label", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "w-alert",
           "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n---\n",
@@ -41,38 +78,81 @@
           }
         },
         {
-          "name": "w-affix",
-          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
+          "name": "w-attention",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
-            { "name": "aria-label", "value": { "type": "string" } },
             {
-              "name": "clear",
-              "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
+              "name": "show",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "search",
-              "description": "Add this property to render a clickable Warp search icon.\n\nSet an `aria-label` that explains the action when using this.",
+              "name": "placement",
+              "value": { "type": "Directions", "default": "'bottom'" }
+            },
+            {
+              "name": "tooltip",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "label", "value": { "type": "string" } }
+            {
+              "name": "callout",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "popover",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "highlight",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "can-close",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-arrow",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "distance",
+              "value": { "type": "number", "default": "8" }
+            },
+            {
+              "name": "skidding",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "flip",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "cross-axis",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "fallback-placements",
+              "value": { "type": "Directions[]" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "ariaLabel", "type": "string" },
-              {
-                "name": "clear",
-                "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
-                "type": "boolean"
-              },
-              {
-                "name": "search",
-                "description": "Add this property to render a clickable Warp search icon.\n\nSet an `aria-label` that explains the action when using this.",
-                "type": "boolean"
-              },
-              { "name": "label", "type": "string" }
+              { "name": "show", "type": "boolean" },
+              { "name": "placement", "type": "Directions" },
+              { "name": "tooltip", "type": "boolean" },
+              { "name": "callout", "type": "boolean" },
+              { "name": "popover", "type": "boolean" },
+              { "name": "highlight", "type": "boolean" },
+              { "name": "canClose", "type": "boolean" },
+              { "name": "noArrow", "type": "boolean" },
+              { "name": "distance", "type": "number" },
+              { "name": "skidding", "type": "number" },
+              { "name": "flip", "type": "boolean" },
+              { "name": "crossAxis", "type": "boolean" },
+              { "name": "fallbackPlacements", "type": "Directions[]" },
+              { "name": "_initialPlacement" },
+              { "name": "_actualDirection" }
             ],
             "events": []
           }
@@ -147,6 +227,51 @@
             "events": []
           }
         },
+        {
+          "name": "w-link",
+          "description": "Buttons are used to perform actions, with different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "autofocus", "value": { "type": "boolean" } },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'",
+                "default": "'secondary'"
+              }
+            },
+            { "name": "quiet", "value": { "type": "boolean" } },
+            { "name": "small", "value": { "type": "boolean" } },
+            { "name": "href", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "boolean" } },
+            { "name": "target", "value": { "type": "string" } },
+            { "name": "rel", "value": { "type": "string" } },
+            { "name": "full-width", "value": { "type": "boolean" } },
+            { "name": "button-class", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "autofocus", "type": "boolean" },
+              {
+                "name": "variant",
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+              },
+              { "name": "quiet", "type": "boolean" },
+              { "name": "small", "type": "boolean" },
+              { "name": "href", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "target", "type": "string" },
+              { "name": "rel", "type": "string" },
+              { "name": "fullWidth", "type": "boolean" },
+              { "name": "buttonClass", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "classes", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "w-button",
           "description": "Buttons are used to perform actions, widh different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)\n---\n",
@@ -300,6 +425,12 @@
               { "name": "input", "type": "HTMLInputElement" },
               { "name": "toggleButton", "type": "HTMLButtonElement" },
               { "name": "wrapper", "type": "HTMLDivElement" },
+              {
+                "name": "previousMonthButton",
+                "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore.",
+                "type": "HTMLButtonElement"
+              },
+              { "name": "todayCell", "type": "HTMLTableCellElement" },
               { "name": "selectedCell", "type": "HTMLTableCellElement" }
             ],
             "events": []
@@ -689,6 +820,52 @@
             "events": []
           }
         },
+        {
+          "name": "w-steps",
+          "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": [
+            {
+              "name": "horizontal",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "right",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "horizontal", "type": "boolean" },
+              { "name": "right", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-step",
+          "description": "Individual step component that shows a single step in a process\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "completed",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "active", "type": "boolean" },
+              { "name": "completed", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "w-switch",
           "description": "\n---\n\n\n### **Events:**\n - **change**",
@@ -721,7 +898,7 @@
             { "name": "invalid", "value": { "type": "boolean" } },
             { "name": "id", "value": { "type": "string" } },
             { "name": "label", "value": { "type": "string" } },
-            { "name": "helpText", "value": { "type": "string" } },
+            { "name": "help-text", "value": { "type": "string" } },
             { "name": "size", "value": { "type": "string" } },
             { "name": "max", "value": { "type": "number" } },
             { "name": "min", "value": { "type": "number" } },
@@ -761,83 +938,6 @@
             ],
             "events": []
           }
-        },
-        {
-          "name": "w-attention",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "show",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "value": { "type": "string", "default": "'bottom'" }
-            },
-            {
-              "name": "tooltip",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "callout",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "popover",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "highlight",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "canClose",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "noArrow",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "distance",
-              "value": { "type": "number", "default": "8" }
-            },
-            {
-              "name": "skidding",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "flip",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "crossAxis",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "fallbackPlacements", "value": { "type": "array" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "show", "type": "boolean" },
-              { "name": "placement", "type": "string" },
-              { "name": "tooltip", "type": "boolean" },
-              { "name": "callout", "type": "boolean" },
-              { "name": "popover", "type": "boolean" },
-              { "name": "highlight", "type": "boolean" },
-              { "name": "canClose", "type": "boolean" },
-              { "name": "noArrow", "type": "boolean" },
-              { "name": "distance", "type": "number" },
-              { "name": "skidding", "type": "number" },
-              { "name": "flip", "type": "boolean" },
-              { "name": "crossAxis", "type": "boolean" },
-              { "name": "_initialPlacement" },
-              { "name": "_actualDirection" },
-              { "name": "fallbackPlacements", "type": "array" }
-            ],
-            "events": []
-          }
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.2.0-next.7",
+  "version": "2.2.0-next.9",
   "packageManager": "pnpm@10.15.1",
   "description": "Custom elements for Warp",
   "exports": {
@@ -44,6 +44,7 @@
     "./dist/custom-elements.json"
   ],
   "scripts": {
+    "clean": "rimraf .pnpm-store node_modules dist eik storybook-static",
     "build:storybook": "pnpm run messages:compile && pnpm run build:manifest && storybook build && touch ./storybook-static/.nojekyll",
     "build:eik": "node build.js eik",
     "build:npm": "node build.js npm",
@@ -51,13 +52,12 @@
     "build:styles": "node build.js styles",
     "build": "rimraf dist && rimraf eik && pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:npm && pnpm build:eik",
     "commit": "cz",
-    "dev": "vite",
+    "dev": "pnpm run storybook",
     "storybook": "storybook dev --port 63900",
     "lint:check": "eslint .",
     "lint": "eslint . --fix",
     "messages:compile": "lingui compile",
     "messages:extract": "lingui extract",
-    "preview:docs": "vite preview",
     "semantic-release": "semantic-release",
     "test": "vitest",
     "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch"
@@ -91,13 +91,16 @@
     "@storybook/web-components": "^9.1.4",
     "@storybook/web-components-vite": "^9.1.4",
     "@types/node": "20.14.10",
+    "@types/react": "^19.1.12",
     "@unocss/core": "^66.5.0",
+    "@vitejs/plugin-react": "^5.0.2",
     "@vitest/browser": "^3.2.4",
     "@vitest/utils": "^3.2.4",
     "@warp-ds/eslint-config": "1.1.0",
     "@warp-ds/uno": "2.1.0",
     "@wc-toolkit/cem-validator": "^1.0.3",
     "@wc-toolkit/storybook-helpers": "^9.0.1",
+    "@wc-toolkit/type-parser": "^1.2.0",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "cz-conventional-changelog": "3.3.0",
@@ -117,28 +120,27 @@
     "nanoid": "^5.1.5",
     "playwright": "^1.55.0",
     "prettier": "3.3.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rimraf": "6.0.1",
     "semantic-release": "24.0.0",
     "storybook": "^9.1.4",
     "typescript": "5.5.3",
     "typescript-eslint": "^8.41.0",
     "unocss": "0.x",
-    "vite": "5.3.3",
-    "vite-plugin-html": "3.2.2",
-    "vite-plugin-top-level-await": "1.4.1",
+    "vite": "^6.0.0",
     "vitest": "^3.2.4",
-    "vitest-browser-lit": "^0.1.0"
+    "vitest-browser-lit": "^0.1.0",
+    "vitest-browser-react": "^1.0.1"
   },
   "dependencies": {
     "@lingui/core": "5.2.0",
     "@lit/react": "^1.0.8",
     "@open-wc/form-control": "^1.0.0",
-    "@vitest/browser": "^3.2.4",
     "@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",
-    "@wc-toolkit/type-parser": "^1.2.0",
     "date-fns": "^4.1.0",
     "scroll-doctor": "2.0.2"
   },