@warp-ds/elements 2.9.2-next.1 → 2.10.0-next.10

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.9.2-next.1",
-  "packageManager": "pnpm@10.33.2",
+  "version": "2.10.0-next.10",
+  "packageManager": "pnpm@11.1.0",
+  "browserslist": [
+    "supports es6-module and > 0.25% in FI or > 0.25% in NO or > 0.25% in SE or > 0.25% in DK and not dead and not Safari < 15 and not iOS < 15",
+    "not chrome < 61"
+  ],
   "description": "Custom elements for Warp",
   "exports": {
     ".": {
@@ -140,16 +144,13 @@
       "types": "./dist/packages/*/react.d.ts",
       "import": "./dist/packages/*/react.js"
     },
-    "./docs/*": {
-      "default": "./dist/docs/*"
-    },
     "./*": {
       "types": "./dist/packages/*/*.d.ts",
       "import": "./dist/packages/*/*.js"
     }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./eik/index.js",
+  "module": "./eik/index.js",
   "customElements": "./dist/custom-elements.json",
   "web-types": "./dist/web-types.json",
   "types": "./dist/index.d.ts",
@@ -267,7 +268,8 @@
   },
   "files": [
     "./dist/",
-    "./dist/custom-elements.json"
+    "./dist/custom-elements.json",
+    "./eik/index.js"
   ],
   "scripts": {
     "build:bundle": "tsc --project tsconfig.json --outDir .tmp --declaration false --sourceMap true && rollup -c ./build/bundle.js && rimraf .tmp",
@@ -291,6 +293,7 @@
     "format": "pnpm biome format --write .",
     "lint:check": "pnpm biome lint .",
     "lint": "pnpm biome lint --write .",
+    "lint:package": "publint",
     "messages:compile": "lingui compile",
     "messages:extract": "lingui extract",
     "prepare": "husky",
@@ -307,7 +310,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@biomejs/biome": "2.4.14",
+    "@biomejs/biome": "2.4.15",
     "@chbphone55/classnames": "2.0.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eik/cli": "2.0.39",
@@ -316,13 +319,14 @@
     "@lingui/cli": "5.9.5",
     "@lingui/conf": "5.9.5",
     "@lingui/core": "5.9.5",
-    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
+    "@lit-labs/rollup-plugin-minify-html-literals": "^0.2.0",
     "@oddbird/css-anchor-positioning": "^0.9.0",
     "@open-wc/form-control": "^1.0.0",
     "@open-wc/lit-helpers": "^0.7.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-swc": "^0.4.0",
     "@rollup/plugin-terser": "^1.0.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -333,7 +337,7 @@
     "@storybook/react-vite": "^10.3.5",
     "@storybook/web-components": "^10.3.5",
     "@storybook/web-components-vite": "^10.3.5",
-    "@types/node": "24.12.2",
+    "@types/node": "24.12.4",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^6.0.1",
@@ -349,12 +353,13 @@
     "@wc-toolkit/storybook-helpers": "^10.0.0",
     "@wc-toolkit/type-parser": "^1.2.0",
     "axe-core": "^4.11.1",
+    "browserslist-to-esbuild": "^2.1.1",
     "custom-element-jet-brains-integration": "^1.7.0",
     "cz-conventional-changelog": "3.3.0",
     "date-fns": "^4.1.0",
     "element-collapse": "1.1.0",
     "esbuild": "0.28.0",
-    "express": "4.22.1",
+    "express": "4.22.2",
     "glob": "13.0.6",
     "globals": "17.6.0",
     "html-format": "1.1.7",
@@ -363,6 +368,7 @@
     "nanoid": "^5.1.5",
     "playwright": "^1.55.0",
     "prettier": "3.8.3",
+    "publint": "^0.3.21",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "rimraf": "6.1.3",

package/dist/docs/radio/examples.md

@@ -1 +0,0 @@
-## Examples

package/dist/docs/radio/usage.md

@@ -1 +0,0 @@
-## Usage

package/dist/packages/button/styles/w-button.styles.d.ts

@@ -1 +0,0 @@
-export declare const wButtonStyles: import("lit").CSSResult;

package/dist/packages/button/styles/w-button.styles.js

@@ -1,282 +0,0 @@
-import { css } from "lit";
-export const wButtonStyles = css `
-  :host {
-    /* Local scoped variables, given the default button (the secondary variant) as a default */
-    --_background: var(--background, var(--w-s-color-background));
-    --_background-hover: var(
-      --background-hover,
-      var(--w-s-color-background-hover)
-    );
-    --_background-active: var(
-      --background-active,
-      var(--w-s-color-background-active)
-    );
-    --_text-color: var(--color, var(--w-s-color-text-link));
-    --_text-color-hover: var(--color-hover, var(--w-s-color-text-link));
-    --_text-color-active: var(--color-active, var(--w-s-color-text-link));
-    --_border-width: var(--border-width, 2px);
-    --_border: var(--border, var(--w-s-color-border));
-    --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
-    --_border-active: var(--border-active, var(--w-s-color-border-active));
-    --_border-radius: var(--border-radius, var(--w-button-radius-default, 8px));
-    --_font-size: var(--font-size, var(--w-font-size-m));
-    --_line-height: var(--line-height, var(--w-line-height-m));
-    --_font-weight: var(--font-weight, bold);
-    --_padding-x: var(--padding-x, 16px);
-    --_padding-y: var(--padding-y, 13px);
-  }
-
-  button {
-    /* Base setup for all buttons */
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    cursor: pointer;
-    transition:
-      color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hook the local vars up to the button stuff  */
-    background-color: var(--_background);
-    color: var(--_text-color);
-    border: var(--_border-width) solid var(--_border);
-    border-radius: var(--_border-radius);
-    padding: calc(var(--_padding-y) - var(--_border-width))
-      calc(var(--_padding-x) - var(--_border-width));
-    font-size: var(--_font-size);
-    line-height: var(--_line-height);
-    font-weight: var(--_font-weight);
-  }
-
-  button:hover {
-    background-color: var(--_background-hover);
-    border-color: var(--_border-hover);
-    color: var(--_text-color-hover);
-  }
-
-  button:active {
-    background-color: var(--_background-active);
-    border-color: var(--_border-active);
-    color: var(--_text-color-active);
-  }
-
-  button:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-  }
-
-  /* Variants config */
-  :host([variant="primary"]) {
-    --background: var(--w-s-color-background-primary);
-    --background-hover: var(--w-s-color-background-primary-hover);
-    --background-active: var(--w-s-color-background-primary-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-width: 0px;
-  }
-  :host([variant="quiet"]),
-  :host([quiet]) /* deprecated, backwards compatibility, use variant="quiet" */ {
-    --background: transparent;
-    --color: var(--w-s-color-text-link);
-    --color-hover: var(--w-s-color-text-link-hover);
-    --color-active: var(--w-s-color-text-link-active);
-    --border-width: 0px;
-  }
-  :host([variant="negative"]) {
-    --background: var(--w-s-color-background-negative);
-    --background-hover: var(--w-s-color-background-negative-hover);
-    --background-active: var(--w-s-color-background-negative-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-width: 0px;
-  }
-  :host([variant="negativeQuiet"]),
-  :host([quiet][variant="negative"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --background-hover: var(--w-s-color-background-negative-subtle-hover);
-    --background-active: var(--w-s-color-background-negative-subtle-active);
-    --color: var(--w-s-color-text-negative);
-    --color-hover: var(--w-s-color-text-negative);
-    --color-active: var(--w-s-color-text-negative);
-    --border-width: 0px;
-  }
-  :host([variant="utility"]) {
-    --background: var(--w-s-color-background);
-    --background-hover: var(--w-s-color-background-hover);
-    --background-active: var(--w-s-color-background-active);
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-radius: var(--w-button-radius-utility, 4px);
-    --border-width: 1px;
-  }
-  :host([variant="utilityQuiet"]),
-  :host([quiet][variant="utility"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-width: 0px;
-  }
-  :host([variant="overlay"]) {
-    --background: var(--w-color-background);
-    --background-hover: var(--w-color-background-hover);
-    --background-active: var(--w-color-background-active);
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-  :host([variant="overlayQuiet"]),
-  :host([quiet][variant="overlay"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --background-hover: var(--w-s-color-background-hover);
-    --background-active: var(--w-s-color-background-active);
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-  :host([variant="overlayInverted"]) {
-    --background: var(--w-s-color-background-inverted);
-    --background-hover: var(--w-s-color-background-inverted-hover);
-    --background-active: var(--w-s-color-background-inverted-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-  :host([variant="overlayInvertedQuiet"]),
-  :host([quiet][variant="overlayInverted"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --background-hover: var(--w-s-color-background-inverted-hover);
-    --background-active: var(--w-s-color-background-inverted-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-
-  :host([variant="link"]) {
-    --background: none;
-    --background-hover: none;
-    --background-active: none;
-    --border-width: 0px;
-    --font-weight: normal;
-    display: inline;
-  }
-
-  :host([variant="pill"]) {
-    --background: transparent;
-    --background-hover: var(--w-color-button-pill-background-hover); /** TODO: this should use a semantic token */
-    --background-active: var(--w-color-button-pill-background-active); /** TODO: this should use a semantic token */
-    --border-radius: 50%;
-    --border-width: 0px;
-    --color: var(--w-s-color-icon);
-    --color-hover: var(--w-s-color-icon-hover);
-    --color-active: var(--w-s-color-icon-active);
-    --padding-x: 14px; /* get a total height and width of 44px, matching atomic CSS variant */
-    --padding-y: 14px;
-  }
-
-  /* States config,  selects --loading as well since loading is always supposed to be disabled */
-  :host(:disabled),
-  :host([disabled]) {
-    --background: var(--w-s-color-background-disabled);
-    --background-hover: var(--w-s-color-background-disabled);
-    --background-active: var(--w-s-color-background-disabled);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-width: 0px;
-  }
-
-  :host(:disabled) button,
-  :host([disabled]) button {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  :host([loading]) {
-    --background: var(--w-s-color-background-subtle);
-    --background-hover: var(--w-s-color-background-subtle);
-    --background-active: var(--w-s-color-background-subtle);
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-width: 0px;
-  }
-
-  :host([loading]) button {
-    cursor: wait;
-    pointer-events: none;
-  }
-
-  :host([variant="link"]):hover {
-    text-decoration: underline;
-  }
-
-  /* Sizes config */
-  :host([small]) {
-    --padding-x: 12px;
-    --padding-y: 8px;
-    --font-size: var(--w-font-size-xs);
-    --line-height: var(--w-line-height-xs);
-  }
-
-  :host([small][variant="pill"]) {
-    --padding-x: 8px; /* get a total height and width of 32px, matching atomic CSS variant */
-    --padding-y: 8px;
-  }
-
-  /* Width config */
-  :host([full-width]) button {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  :host([has-icon-only]) {
-    --_padding-x: var(--_padding-y);
-  }
-
-  :host([has-icon-only]) button {
-    width: auto;
-    max-width: none;
-    aspect-ratio: 1 / 1;
-  }
-
-  /* Copy of loading animation from warp  */
-  :host([loading]) button {
-    background-image: linear-gradient(
-      135deg,
-      rgba(0, 0, 0, 0.05) 25%,
-      transparent 25%,
-      transparent 50%,
-      rgba(0, 0, 0, 0.05) 50%,
-      rgba(0, 0, 0, 0.05) 75%,
-      transparent 75%,
-      transparent
-    );
-    background-size: 30px 30px;
-    animation: animate-inprogress 3s linear infinite;
-  }
-
-  @keyframes animate-inprogress {
-    0% {
-      background-position: 0 0;
-    }
-    100% {
-      background-position: 60px 0;
-    }
-  }
-`;

package/dist/packages/link/styles/w-link.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import("lit").CSSResult;

package/dist/packages/link/styles/w-link.styles.js

@@ -1,213 +0,0 @@
-import { css } from "lit";
-export const styles = css `
-  /* If not a link variant this should look like a button */
-  :host(:not([variant="link"])) {
-    --_background: var(--background, var(--w-s-color-background));
-    --_background-hover: var(
-      --background-hover,
-      var(--w-s-color-background-hover)
-    );
-    --_background-active: var(
-      --background-active,
-      var(--w-s-color-background-active)
-    );
-    --_text-color: var(--color, var(--w-s-color-text-link));
-    --_text-color-hover: var(--color-hover, var(--w-s-color-text-link));
-    --_text-color-active: var(--color-active, var(--w-s-color-text-link));
-    --_border-width: var(--border-width, 2px);
-    --_border: var(--border, var(--w-s-color-border));
-    --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
-    --_border-active: var(--border-active, var(--w-s-color-border-active));
-    --_border-radius: var(--border-radius, var(--w-button-radius-default, 8px));
-    --_font-size: var(--font-size, var(--w-font-size-m));
-    --_line-height: var(--line-height, var(--w-line-height-m));
-    --_font-weight: var(--font-weight, bold);
-    --_padding-x: var(--padding-x, 16px);
-    --_padding-y: var(--padding-y, 13px);
-  }
-
-  :host(:not([variant="link"])) a {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
-    transition:
-      color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    background-color: var(--_background);
-    color: var(--_text-color);
-    border: var(--_border-width) solid var(--_border);
-    border-radius: var(--_border-radius);
-    padding: calc(var(--_padding-y) - var(--_border-width))
-      calc(var(--_padding-x) - var(--_border-width));
-    font-size: var(--_font-size);
-    line-height: var(--_line-height);
-    font-weight: var(--_font-weight);
-  }
-
-  :host(:not([variant="link"])) a:hover {
-    background-color: var(--_background-hover);
-    border-color: var(--_border-hover);
-    color: var(--_text-color-hover);
-  }
-
-  :host(:not([variant="link"])) a:active {
-    background-color: var(--_background-active);
-    border-color: var(--_border-active);
-    color: var(--_text-color-active);
-  }
-
-  :host(:not([variant="link"])) a:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-  }
-
-  /* Variants config */
-  :host([variant="primary"]) {
-    --background: var(--w-s-color-background-primary);
-    --background-hover: var(--w-s-color-background-primary-hover);
-    --background-active: var(--w-s-color-background-primary-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-width: 0px;
-  }
-  :host([variant="quiet"]),
-  :host([quiet]) /* deprecated, backwards compatibility, use variant="quiet" */ {
-    --background: transparent;
-    --color: var(--w-s-color-text-link);
-    --color-hover: var(--w-s-color-text-link-hover);
-    --color-active: var(--w-s-color-text-link-active);
-    --border-width: 0px;
-  }
-  :host([variant="negative"]) {
-    --background: var(--w-s-color-background-negative);
-    --background-hover: var(--w-s-color-background-negative-hover);
-    --background-active: var(--w-s-color-background-negative-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-width: 0px;
-  }
-  :host([variant="negativeQuiet"]),
-  :host([quiet][variant="negative"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --background-hover: var(--w-s-color-background-negative-subtle-hover);
-    --background-active: var(--w-s-color-background-negative-subtle-active);
-    --color: var(--w-s-color-text-negative);
-    --color-hover: var(--w-s-color-text-negative);
-    --color-active: var(--w-s-color-text-negative);
-    --border-width: 0px;
-  }
-  :host([variant="utility"]) {
-    --background: var(--w-s-color-background);
-    --background-hover: var(--w-s-color-background-hover);
-    --background-active: var(--w-s-color-background-active);
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-radius: var(--w-button-radius-utility, 4px);
-    --border-width: 1px;
-  }
-  :host([variant="utilityQuiet"]),
-  :host([quiet][variant="utility"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-width: 0px;
-  }
-  :host([variant="overlay"]) {
-    --background: var(--w-color-background);
-    --background-hover: var(--w-color-background-hover);
-    --background-active: var(--w-color-background-active);
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-  :host([variant="overlayQuiet"]),
-  :host([quiet][variant="overlay"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --background-hover: var(--w-s-color-background-hover);
-    --background-active: var(--w-s-color-background-active);
-    --color: var(--w-s-color-text);
-    --color-hover: var(--w-s-color-text);
-    --color-active: var(--w-s-color-text);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-  :host([variant="overlayInverted"]) {
-    --background: var(--w-s-color-background-inverted);
-    --background-hover: var(--w-s-color-background-inverted-hover);
-    --background-active: var(--w-s-color-background-inverted-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-  :host([variant="overlayInvertedQuiet"]),
-  :host([quiet][variant="overlayInverted"]) /* deprecated, backwards compatibility */ {
-    --background: transparent;
-    --background-hover: var(--w-s-color-background-inverted-hover);
-    --background-active: var(--w-s-color-background-inverted-active);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-radius: 9999px;
-    --border-width: 0px;
-  }
-
-  :host([variant="link"]) {
-    --background: none;
-    --background-hover: none;
-    --background-active: none;
-    --border-width: 0px;
-    --font-weight: normal;
-    display: inline;
-  }
-
-  /* States config,  selects --loading as well since loading is always supposed to be disabled */
-  :host(:disabled),
-  :host([disabled]) {
-    --background: var(--w-s-color-background-disabled);
-    --background-hover: var(--w-s-color-background-disabled);
-    --background-active: var(--w-s-color-background-disabled);
-    --color: var(--w-s-color-text-inverted);
-    --color-hover: var(--w-s-color-text-inverted);
-    --color-active: var(--w-s-color-text-inverted);
-    --border-width: 0px;
-  }
-
-  :host(:disabled) a,
-  :host([disabled]) a {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  :host([variant="link"]):hover a {
-    text-decoration: underline;
-  }
-
-  /* Sizes config */
-  :host([small]) {
-    --padding-x: 12px;
-    --padding-y: 8px;
-    --font-size: var(--w-font-size-xs);
-    --line-height: var(--w-line-height-xs);
-  }
-
-  /* Width config */
-  :host([full-width]) a {
-    width: 100%;
-    max-width: 100%;
-  }
-`;