@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.22

package/dist/vscode.html-custom-data.json

@@ -39,6 +39,74 @@
       ],
       "references": []
     },
+    {
+      "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---\n\n",
+      "attributes": [
+        { "name": "autofocus", "values": [] },
+        {
+          "name": "variant",
+          "values": [
+            { "name": "negative" },
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "negativeQuiet" },
+            { "name": "utility" },
+            { "name": "pill" },
+            { "name": "link" },
+            { "name": "quiet" },
+            { "name": "utilityQuiet" }
+          ]
+        },
+        { "name": "quiet", "values": [] },
+        { "name": "small", "values": [] },
+        { "name": "href", "values": [] },
+        { "name": "disabled", "values": [] },
+        { "name": "target", "values": [] },
+        { "name": "rel", "values": [] },
+        { "name": "full-width", "values": [] },
+        { "name": "button-class", "values": [] },
+        { "name": "name", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "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---\n\n",
+      "attributes": [
+        {
+          "name": "type",
+          "values": [
+            { "name": "button" },
+            { "name": "submit" },
+            { "name": "reset" }
+          ]
+        },
+        { "name": "autofocus", "values": [] },
+        {
+          "name": "variant",
+          "values": [
+            { "name": "negative" },
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "utility" },
+            { "name": "pill" },
+            { "name": "link" }
+          ]
+        },
+        { "name": "quiet", "values": [] },
+        { "name": "small", "values": [] },
+        { "name": "loading", "values": [] },
+        { "name": "href", "values": [] },
+        { "name": "target", "values": [] },
+        { "name": "rel", "values": [] },
+        { "name": "full-width", "values": [] },
+        { "name": "button-class", "values": [] },
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "w-attention",
       "description": "\n\n---\n\n",
@@ -109,74 +177,6 @@
       "attributes": [{ "name": "aria-label", "values": [] }],
       "references": []
     },
-    {
-      "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---\n\n",
-      "attributes": [
-        { "name": "autofocus", "values": [] },
-        {
-          "name": "variant",
-          "values": [
-            { "name": "negative" },
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "negativeQuiet" },
-            { "name": "utility" },
-            { "name": "pill" },
-            { "name": "link" },
-            { "name": "quiet" },
-            { "name": "utilityQuiet" }
-          ]
-        },
-        { "name": "quiet", "values": [] },
-        { "name": "small", "values": [] },
-        { "name": "href", "values": [] },
-        { "name": "disabled", "values": [] },
-        { "name": "target", "values": [] },
-        { "name": "rel", "values": [] },
-        { "name": "full-width", "values": [] },
-        { "name": "button-class", "values": [] },
-        { "name": "name", "values": [] }
-      ],
-      "references": []
-    },
-    {
-      "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---\n\n",
-      "attributes": [
-        {
-          "name": "type",
-          "values": [
-            { "name": "button" },
-            { "name": "submit" },
-            { "name": "reset" }
-          ]
-        },
-        { "name": "autofocus", "values": [] },
-        {
-          "name": "variant",
-          "values": [
-            { "name": "negative" },
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "utility" },
-            { "name": "pill" },
-            { "name": "link" }
-          ]
-        },
-        { "name": "quiet", "values": [] },
-        { "name": "small", "values": [] },
-        { "name": "loading", "values": [] },
-        { "name": "href", "values": [] },
-        { "name": "target", "values": [] },
-        { "name": "rel", "values": [] },
-        { "name": "full-width", "values": [] },
-        { "name": "button-class", "values": [] },
-        { "name": "name", "values": [] },
-        { "name": "value", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "w-card",
       "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)\n\n---\n\n",
@@ -597,7 +597,6 @@
           "description": "Renders the field in a readonly state.",
           "values": []
         },
-        { "name": "_options", "values": [] },
         { "name": "name", "values": [] },
         { "name": "value", "values": [] }
       ],
@@ -699,15 +698,6 @@
       ],
       "references": []
     },
-    {
-      "name": "w-tabs",
-      "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n\n---\n\n\n\n### **Events:**\n - **change**",
-      "attributes": [
-        { "name": "active", "values": [] },
-        { "name": "tab-class", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "w-tab",
       "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n\n---\n\n",
@@ -728,6 +718,21 @@
         { "name": "hidden", "values": [] }
       ],
       "references": []
+    },
+    {
+      "name": "w-tabs",
+      "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n\n---\n\n\n\n### **Events:**\n - **change**",
+      "attributes": [
+        { "name": "active", "values": [] },
+        { "name": "tab-class", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "w-toast-container",
+      "description": "\n\n---\n\n",
+      "attributes": [],
+      "references": []
     }
   ]
 }

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.2.0-next.19",
+  "version": "2.2.0-next.21",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -77,6 +77,106 @@
             "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            },
+            { "name": "autofocus", "value": { "type": "boolean" } },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'",
+                "default": "'secondary'"
+              }
+            },
+            { "name": "quiet", "value": { "type": "boolean" } },
+            { "name": "small", "value": { "type": "boolean" } },
+            { "name": "loading", "value": { "type": "boolean" } },
+            { "name": "href", "value": { "type": "string" } },
+            { "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" } },
+            { "name": "value", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "type", "type": "'button' | 'submit' | 'reset'" },
+              { "name": "autofocus", "type": "boolean" },
+              {
+                "name": "variant",
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+              },
+              { "name": "quiet", "type": "boolean" },
+              { "name": "small", "type": "boolean" },
+              { "name": "loading", "type": "boolean" },
+              { "name": "href", "type": "string" },
+              { "name": "target", "type": "string" },
+              { "name": "rel", "type": "string" },
+              { "name": "fullWidth", "type": "boolean" },
+              { "name": "buttonClass", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "ariaValueTextLoading" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "w-attention",
           "description": "\n---\n",
@@ -227,106 +327,6 @@
             "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",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "type",
-              "value": {
-                "type": "'button' | 'submit' | 'reset'",
-                "default": "'button'"
-              }
-            },
-            { "name": "autofocus", "value": { "type": "boolean" } },
-            {
-              "name": "variant",
-              "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'",
-                "default": "'secondary'"
-              }
-            },
-            { "name": "quiet", "value": { "type": "boolean" } },
-            { "name": "small", "value": { "type": "boolean" } },
-            { "name": "loading", "value": { "type": "boolean" } },
-            { "name": "href", "value": { "type": "string" } },
-            { "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" } },
-            { "name": "value", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "type", "type": "'button' | 'submit' | 'reset'" },
-              { "name": "autofocus", "type": "boolean" },
-              {
-                "name": "variant",
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
-              },
-              { "name": "quiet", "type": "boolean" },
-              { "name": "small", "type": "boolean" },
-              { "name": "loading", "type": "boolean" },
-              { "name": "href", "type": "string" },
-              { "name": "target", "type": "string" },
-              { "name": "rel", "type": "string" },
-              { "name": "fullWidth", "type": "boolean" },
-              { "name": "buttonClass", "type": "string" },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "ariaValueTextLoading" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "w-card",
           "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)\n---\n",
@@ -1264,7 +1264,6 @@
               "description": "Renders the field in a readonly state.",
               "value": { "type": "boolean" }
             },
-            { "name": "_options", "value": { "type": "string" } },
             { "name": "name", "value": { "type": "string" } },
             { "name": "value", "value": { "type": "string" } }
           ],
@@ -1312,8 +1311,7 @@
                 "type": "boolean"
               },
               { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "_options" }
+              { "name": "value", "type": "string" }
             ],
             "events": []
           }
@@ -1600,29 +1598,6 @@
             "events": [{ "name": "change", "type": "CustomEvent" }]
           }
         },
-        {
-          "name": "w-tabs",
-          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n\n\n### **Events:**\n - **change**",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "active",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "tab-class",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "events": [{ "name": "change", "type": "CustomEvent" }],
-          "js": {
-            "properties": [
-              { "name": "active", "type": "string" },
-              { "name": "tabClass", "type": "string" }
-            ],
-            "events": [{ "name": "change", "type": "CustomEvent" }]
-          }
-        },
         {
           "name": "w-tab",
           "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
@@ -1674,6 +1649,39 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "w-tabs",
+          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "tab-class",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "active", "type": "string" },
+              { "name": "tabClass", "type": "string" },
+              { "name": "tabs" },
+              { "name": "activeTab" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "w-toast-container",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
         }
       ]
     },

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.2.0-next.20",
-  "packageManager": "pnpm@10.15.1",
+  "version": "2.2.0-next.22",
+  "packageManager": "pnpm@10.19.0",
   "description": "Custom elements for Warp",
   "exports": {
     ".": {
@@ -44,28 +44,31 @@
     "./dist/custom-elements.json"
   ],
   "scripts": {
-    "clean": "rimraf .pnpm-store node_modules dist eik storybook-static entrypoint.js",
-    "build:entrypoint": "node ./build/entrypoint.js",
-    "build:storybook": "pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:entrypoint && storybook build && pnpm run build:polyfill && touch ./storybook-static/.nojekyll",
-    "build:manifest": "custom-elements-manifest analyze --config .cem/custom-element-manifest.config.js",
-    "build": "rimraf dist && rimraf eik && pnpm messages:compile && tsc && pnpm build:manifest && pnpm build:editor && pnpm build:components && pnpm run build:cloak && pnpm build:bundle && pnpm run build:polyfill",
+    "build:bundle": "tsc --project tsconfig.json --outDir .tmp --declaration false --sourceMap true && rollup -c ./build/bundle.js && rimraf .tmp",
     "build:cloak": "node ./build/cloak.js",
     "build:components": "node ./build/components.js",
     "build:editor": "node ./build/editor.js",
-    "build:styles": "node ./build/styles.js",
+    "build:entrypoint": "node ./build/entrypoint.js",
+    "build:manifest": "custom-elements-manifest analyze --config .cem/custom-element-manifest.config.js",
     "build:polyfill": "node ./build/polyfill.js",
-    "build:bundle": "tsc --project tsconfig.json --outDir .tmp --declaration false --sourceMap true && rollup -c ./build/bundle.js && rimraf .tmp",
+    "build:storybook": "pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:entrypoint && storybook build && pnpm run build:polyfill && touch ./storybook-static/.nojekyll",
+    "build:styles": "node ./build/styles.js",
+    "build": "rimraf dist && rimraf eik && pnpm messages:compile && tsc && pnpm build:manifest && pnpm build:editor && pnpm build:components && pnpm run build:cloak && pnpm build:bundle && pnpm run build:polyfill",
+    "check": "pnpm biome check --write .",
+    "clean": "rimraf .pnpm-store node_modules dist eik storybook-static entrypoint.js",
     "commit": "cz",
     "dev": "pnpm run storybook",
     "storybook": "storybook dev --port 63900",
-    "lint:check": "eslint .",
-    "lint": "eslint . --fix",
+    "storybook:react": "storybook dev -p 63901 -c .storybook-react",
+    "format": "pnpm biome format --write .",
+    "lint:check": "pnpm biome lint .",
+    "lint": "pnpm biome lint --write .",
     "messages:compile": "lingui compile",
     "messages:extract": "lingui extract",
+    "prepare": "husky",
     "semantic-release": "semantic-release",
     "test": "vitest",
-    "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch",
-    "prepare": "husky"
+    "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch"
   },
   "repository": {
     "type": "git",
@@ -73,11 +76,11 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
+    "@biomejs/biome": "2.2.6",
     "@chbphone55/classnames": "2.0.0",
     "@custom-elements-manifest/analyzer": "^0.10.5",
     "@eik/cli": "2.0.38",
     "@eik/esbuild-plugin": "1.1.47",
-    "@eslint/js": "9.16.0",
     "@itsy/animate": "0.0.9",
     "@lingui/cli": "5.2.0",
     "@lingui/conf": "5.2.0",
@@ -85,8 +88,13 @@
     "@open-wc/lit-helpers": "^0.7.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
+    "@storybook/addon-a11y": "^9.1.4",
     "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
     "@storybook/builder-vite": "^9.1.4",
+    "@storybook/react": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
     "@storybook/web-components": "^9.1.4",
     "@storybook/web-components-vite": "^9.1.4",
     "@types/node": "20.14.10",
@@ -96,7 +104,6 @@
     "@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/jsx-types": "^1.4.2",
@@ -107,11 +114,6 @@
     "cz-conventional-changelog": "3.3.0",
     "element-collapse": "1.1.0",
     "esbuild": "0.25.10",
-    "eslint": "9.16.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-lit": "2.1.1",
-    "eslint-plugin-prettier": "5.5.4",
     "express": "4.19.2",
     "glob": "11.0.0",
     "globals": "15.13.0",
@@ -128,7 +130,6 @@
     "semantic-release": "24.0.0",
     "storybook": "^9.1.4",
     "typescript": "5.5.3",
-    "typescript-eslint": "^8.41.0",
     "unocss": "0.x",
     "vite": "^6.0.0",
     "vitest": "^3.2.4",