@warp-ds/elements 2.8.2-next.6 → 2.9.0-next.2

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.8.2-next.5",
+  "version": "2.9.0-next.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -181,13 +181,17 @@
             {
               "name": "variant",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
               }
             },
             {
               "name": "quiet",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "icon-only",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "small",
               "value": { "type": "boolean", "default": "false" }
@@ -198,6 +202,10 @@
             },
             { "name": "href", "value": { "type": "string" } },
             { "name": "target", "value": { "type": "string" } },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             { "name": "rel", "value": { "type": "string" } },
             {
               "name": "full-width",
@@ -214,13 +222,15 @@
               { "name": "autofocus", "type": "boolean" },
               {
                 "name": "variant",
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
               },
               { "name": "quiet", "type": "boolean" },
+              { "name": "iconOnly", "type": "boolean" },
               { "name": "small", "type": "boolean" },
               { "name": "loading", "type": "boolean" },
               { "name": "href", "type": "string" },
               { "name": "target", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
               { "name": "rel", "type": "string" },
               { "name": "fullWidth", "type": "boolean" },
               { "name": "buttonClass", "type": "string" },
@@ -1436,7 +1446,7 @@
         },
         {
           "name": "w-slider-thumb",
-          "description": "Component to place inside a `<w-slider>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\n---\n\n\n### **Events:**\n - **slidervalidity**",
+          "description": "Component to place inside a `<w-slider>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)\n---\n\n\n### **Events:**\n - **thumbreset**\n- **slidervalidity**",
           "doc-url": "",
           "attributes": [
             { "name": "aria-label", "value": { "type": "string" } },
@@ -1445,7 +1455,10 @@
             { "name": "value", "value": { "type": "string" } },
             { "name": "placeholder", "value": { "type": "string" } }
           ],
-          "events": [{ "name": "slidervalidity", "type": "CustomEvent" }],
+          "events": [
+            { "name": "thumbreset", "type": "CustomEvent" },
+            { "name": "slidervalidity", "type": "CustomEvent" }
+          ],
           "js": {
             "properties": [
               { "name": "ariaLabel", "type": "string" },
@@ -1468,7 +1481,10 @@
               },
               { "name": "ariaDescriptionText" }
             ],
-            "events": [{ "name": "slidervalidity", "type": "CustomEvent" }]
+            "events": [
+              { "name": "thumbreset", "type": "CustomEvent" },
+              { "name": "slidervalidity", "type": "CustomEvent" }
+            ]
           }
         },
         {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.8.2-next.6",
-  "packageManager": "pnpm@10.30.3",
+  "version": "2.9.0-next.2",
+  "packageManager": "pnpm@10.33.0",
   "description": "Custom elements for Warp",
   "exports": {
     ".": {
@@ -319,25 +319,23 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.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",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/react": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@storybook/web-components": "^10.3.5",
+    "@storybook/web-components-vite": "^10.3.5",
     "@types/node": "24.10.15",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "@unocss/core": "^66.5.0",
-    "@vitejs/plugin-react": "^5.0.2",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/utils": "^3.2.4",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/utils": "^4.1.4",
     "@warp-ds/core": "1.1.8",
     "@warp-ds/css": "2.1.1",
     "@warp-ds/uno": "2.1.0",
@@ -366,14 +364,14 @@
     "rollup": "^4.52.3",
     "scroll-doctor": "2.0.2",
     "semantic-release": "25.0.3",
-    "storybook": "^9.1.4",
+    "storybook": "^10.3.5",
     "tslib": "^2.8.1",
     "typescript": "5.5.3",
-    "unocss": "0.x",
-    "vite": "^6.0.0",
-    "vitest": "^3.2.4",
-    "vitest-browser-lit": "^0.1.0",
-    "vitest-browser-react": "^1.0.1"
+    "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",

package/dist/packages/link/styles.js

@@ -1,236 +0,0 @@
-import { css } from 'lit';
-export const styles = css `.w-button,
-.w-button--secondary {
-    /* 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));
-    --_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(--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);
-
-    /* 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);
-}
-
-    .w-button:hover {
-        background-color: var(--_background-hover);
-        border-color: var(--_border-hover);
-    }
-
-    .w-button:active {
-        background-color: var(--_background-active);
-        border-color: var(--_border-active);
-    }
-
-    .w-button:focus-visible {
-        outline: 2px solid var(--w-s-color-border-focus);
-        outline-offset: var(--w-outline-offset, 1px);
-    }
-
-    /* Variants config */
-    .w-button--primary {
-        --background: var(--w-color-button-primary-background);
-        --background-hover: var(--w-color-button-primary-background-hover);
-        --background-active: var(--w-color-button-primary-background-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-width: 0px;
-    }
-    .w-button--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);
-        --border-width: 0px;
-    }
-    .w-button--negative-quiet {
-        --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);
-        --border-width: 0px;
-    }
-    .w-button--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);
-        --border-radius: var(--w-button-radius-utility, 4px);
-        --border-width: 1px;
-    }
-    .w-button--utility-quiet {
-        --background: transparent;
-        --color: var(--w-s-color-text);
-        --border-width: 0px;
-    }
-    .w-button--quiet {
-        --background: transparent;
-        --border-width: 0px;
-    }
-    .w-button--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);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-hover);
-        --background-active: var(--w-s-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted {
-        --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);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted-quiet {
-        --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);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-
-    .w-button--link {
-        --background: none;
-        --background-hover: none;
-        --background-active: none;
-        --border-width: 0;
-        --font-weight: normal;
-        display: inline;
-    }
-    .w-button--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);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-hover);
-        --background-active: var(--w-s-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted {
-        --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);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted-quiet {
-        --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);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-
-    /* States config,  selects --loading as well since loading is always supposed to be disabled */
-    .w-button:disabled,
-    .w-button--disabled,
-    .w-button--loading {
-        --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);
-        --border-width: 0px;
-        pointer-events: none;
-    }
-
-    .w-button--link:hover {
-        text-decoration: underline;
-    }
-
-    /* Sizes config */
-    .w-button--small {
-        --padding-x: 12px;
-        --padding-y: 8px;
-        --font-size: var(--w-font-size-xs);
-        --line-height: var(--w-line-height-xs);
-    }
-
-    /* Width config */
-    .w-button--full-width {
-        width: 100%;
-        max-width: 100%;
-    }
-
-    .w-button--has-icon-only {
-        width: auto;
-        max-width: none;
-        --_padding-x: var(--_padding-y);
-        aspect-ratio: 1 / 1;
-    }
-
-    a.w-button {
-        text-decoration: none !important;
-    }
-
-    /* Copy of loading animation from warp  */
-    .w-button--loading {
-        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/utils/index.d.ts

@@ -1,10 +0,0 @@
-export function kebabCaseAttributes(constructor: any): {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
-};
-export function classes(defn: any): string;
-export function fclasses(definition: any): import("lit/async-directive.js").DirectiveResult<typeof import("lit/directives/class-map.js").ClassMapDirective>;
-export function generateRandomId(): string;

package/dist/packages/utils/index.js

@@ -1,37 +0,0 @@
-import { classMap } from 'lit/directives/class-map.js';
-const camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137
-export function kebabCaseAttributes(constructor) {
-    return class extends constructor {
-        static createProperty(name, options) {
-            let customOptions = options;
-            // derive the attribute name if not already defined or disabled
-            if (typeof options?.attribute === 'undefined' || options?.attribute === true) {
-                customOptions = Object.assign({}, options, {
-                    attribute: camelCaseToKebabCase(name.toString()),
-                });
-            }
-            super.createProperty(name, customOptions);
-        }
-    };
-}
-export function classes(defn) {
-    const classes = [];
-    for (const [key, value] of Object.entries(defn)) {
-        if (value)
-            classes.push(key);
-    }
-    return classes.join(' ');
-}
-export function fclasses(definition) {
-    const defn = {};
-    for (const [key, value] of Object.entries(definition)) {
-        for (const className of key.split(' ')) {
-            defn[className] = value;
-        }
-    }
-    return classMap(defn);
-}
-export function generateRandomId() {
-    return `m${Math.random().toString(36).slice(2)}`;
-}