@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.10.0-next.2",
-  "packageManager": "pnpm@11.1.0",
+  "version": "2.10.0-next.20",
+  "packageManager": "pnpm@11.3.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": {
     ".": {
@@ -52,6 +56,10 @@
       "types": "./dist/packages/breadcrumbs/react.d.ts",
       "import": "./dist/packages/breadcrumbs/react.js"
     },
+    "./react/breadcrumb-item": {
+      "types": "./dist/packages/breadcrumb-item/react.d.ts",
+      "import": "./dist/packages/breadcrumb-item/react.js"
+    },
     "./react/button": {
       "types": "./dist/packages/button/react.d.ts",
       "import": "./dist/packages/button/react.js"
@@ -140,16 +148,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",
@@ -173,6 +178,9 @@
       "react/breadcrumbs": [
         "./dist/packages/breadcrumbs/react.d.ts"
       ],
+      "react/breadcrumb-item": [
+        "./dist/packages/breadcrumb-item/react.d.ts"
+      ],
       "react/button": [
         "./dist/packages/button/react.d.ts"
       ],
@@ -267,7 +275,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",
@@ -280,20 +289,18 @@
     "build:manifest": "custom-elements-manifest analyze --config .cem/custom-element-manifest.config.js",
     "build:polyfill": "node ./build/polyfill.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:styles": "node ./build/styles.js",
+    "build:styles": "node ./build/styles.js && pnpm run lint:fix",
     "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 build:eik-components-backwards-compat && pnpm run build:polyfill && pnpm run build:docs",
-    "check": "pnpm biome check --write .",
-    "clean": "rimraf .pnpm-store node_modules dist eik storybook-static entrypoint.js",
+    "clean": "git clean -fdx",
     "commit": "cz",
     "dev": "pnpm run storybook",
     "storybook": "storybook dev --port 63900",
     "storybook:react": "storybook dev -p 63901 -c .storybook-react",
-    "format": "pnpm biome format --write .",
-    "lint:check": "pnpm biome lint .",
-    "lint": "pnpm biome lint --write .",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix  .",
+    "lint:package": "publint",
     "messages:compile": "lingui compile",
     "messages:extract": "lingui extract",
-    "prepare": "husky",
     "semantic-release": "semantic-release",
     "test": "vitest",
     "test:module-resolution": "cd tests/module-resolution && ./setup.sh && ./test.sh",
@@ -306,8 +313,12 @@
     "url": "git+https://github.com/warp-ds/elements.git"
   },
   "license": "Apache-2.0",
+  "dependencies": {
+    "@lit/react": "^1.0.8",
+    "@open-wc/form-control": "^1.0.0",
+    "lit": "3.x"
+  },
   "devDependencies": {
-    "@biomejs/biome": "2.4.15",
     "@chbphone55/classnames": "2.0.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eik/cli": "2.0.39",
@@ -316,13 +327,13 @@
     "@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",
@@ -342,6 +353,7 @@
     "@vitest/utils": "^4.1.4",
     "@warp-ds/core": "1.1.8",
     "@warp-ds/css": "2.4.1",
+    "@warp-ds/eslint-config": "^2.0.0",
     "@warp-ds/uno": "2.2.0",
     "@wc-toolkit/cem-validator": "^1.0.3",
     "@wc-toolkit/jsdoc-tags": "^1.2.0",
@@ -349,20 +361,20 @@
     "@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",
+    "eslint": "^10.4.1",
     "express": "4.22.2",
     "glob": "13.0.6",
     "globals": "17.6.0",
-    "html-format": "1.1.7",
-    "husky": "^9.1.7",
     "lightningcss": "^1.30.1",
-    "nanoid": "^5.1.5",
+    "nanoid": "^5.1.11",
     "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",
@@ -370,19 +382,13 @@
     "scroll-doctor": "2.0.2",
     "semantic-release": "25.0.3",
     "storybook": "^10.3.5",
-    "tslib": "^2.8.1",
-    "typescript": "5.9.3",
+    "typescript": "^6.0.3",
     "unocss": "^66.6.8",
     "vite": "^8.0.8",
     "vitest": "^4.1.4",
     "vitest-browser-lit": "^1.0.1",
     "vitest-browser-react": "^2.2.0"
   },
-  "dependencies": {
-    "@lit/react": "^1.0.8",
-    "@warp-ds/components": "1.0.0-beta.2",
-    "lit": "3.x"
-  },
   "publishConfig": {
     "access": "public",
     "provenance": true

package/dist/docs/modal-footer/accessibility.md

@@ -1 +0,0 @@
-## Accessibility

package/dist/docs/modal-footer/examples.md

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

package/dist/docs/modal-footer/usage.md

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

package/dist/docs/modal-header/accessibility.md

@@ -1 +0,0 @@
-## Accessibility

package/dist/docs/modal-header/examples.md

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

package/dist/docs/modal-header/usage.md

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

package/dist/docs/radio/accessibility.md

@@ -1 +0,0 @@
-## Accessibility

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;
-    }
-  }
-`;