@warp-ds/elements 2.2.0-next.6 → 2.2.0-next.8

package/dist/web-types.json

@@ -1,45 +1,11 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.2.0-next.5",
+  "version": "2.2.0-next.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
-        {
-          "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",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "value": {
-                "type": "'negative' | 'positive' | 'warning' | 'info'",
-                "default": "'info'"
-              }
-            },
-            {
-              "name": "show",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "role",
-              "value": { "type": "string", "default": "'alert'" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "type": "'negative' | 'positive' | 'warning' | 'info'"
-              },
-              { "name": "show", "type": "boolean" },
-              { "name": "role", "type": "string" }
-            ],
-            "events": []
-          }
-        },
         {
           "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",
@@ -77,6 +43,40 @@
             "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "'negative' | 'positive' | 'warning' | 'info'",
+                "default": "'info'"
+              }
+            },
+            {
+              "name": "show",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "role",
+              "value": { "type": "string", "default": "'alert'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "type": "'negative' | 'positive' | 'warning' | 'info'"
+              },
+              { "name": "show", "type": "boolean" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "w-badge",
           "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n---\n",
@@ -147,6 +147,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",
@@ -292,11 +337,6 @@
                 "type": "string"
               },
               { "name": "isCalendarOpen", "type": "boolean" },
-              {
-                "name": "internalValue",
-                "description": "The current input value as a stringified date-like",
-                "type": "string"
-              },
               { "name": "navigationDate", "type": "Date" },
               { "name": "selectedDate", "type": "Date | null" },
               { "name": "month" },
@@ -305,6 +345,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": []
@@ -694,6 +740,75 @@
             "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**",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "value", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
         {
           "name": "w-textfield",
           "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",
@@ -703,7 +818,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" } },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.2.0-next.6",
+  "version": "2.2.0-next.8",
   "packageManager": "pnpm@10.15.1",
   "description": "Custom elements for Warp",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "module": "./dist/index.js"
+      "import": "./dist/index.js"
     },
     "./components/affix": "./dist/packages/affix/index.js",
     "./components/alert": "./dist/packages/alert/index.js",
@@ -27,11 +27,11 @@
     "./custom-elements.json": "./dist/custom-elements.json",
     "./react/*": {
       "types": "./dist/packages/*/react.d.ts",
-      "module": "./dist/packages/*/react.js"
+      "import": "./dist/packages/*/react.js"
     },
     "./*": {
       "types": "./dist/packages/*/index.d.ts",
-      "module": "./dist/packages/*/index.js"
+      "import": "./dist/packages/*/index.js"
     }
   },
   "main": "./dist/index.js",
@@ -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",
-    "storybook": "storybook dev",
+    "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"
   },