@warp-ds/elements 2.3.0-next.29 → 2.3.0-next.30

package/dist/packages/link/link.stories.js

@@ -67,28 +67,45 @@ export const Link = {
         target: '_new',
     },
 };
-export const Pill = {
+export const Quiet = {
     args: {
-        variant: 'pill',
+        variant: 'quiet',
         href: 'http://developer.mozilla.org',
         target: '_new',
     },
-    render(args) {
-        return html `<w-link ${spread(prespread(args))}>💙</w-link>`;
+};
+export const Overlay = {
+    args: {
+        variant: 'overlay',
+        href: 'http://developer.mozilla.org',
+        target: '_new',
     },
 };
-export const Small = {
+export const OverlayInverted = {
     args: {
-        variant: 'primary',
-        small: true,
+        variant: 'overlayInverted',
         href: 'http://developer.mozilla.org',
         target: '_new',
     },
 };
-export const Quiet = {
+export const OverlayQuiet = {
     args: {
-        variant: 'secondary',
-        quiet: true,
+        variant: 'overlayQuiet',
+        href: 'http://developer.mozilla.org',
+        target: '_new',
+    },
+};
+export const OverlayInvertedQuiet = {
+    args: {
+        variant: 'overlayInvertedQuiet',
+        href: 'http://developer.mozilla.org',
+        target: '_new',
+    },
+};
+export const Small = {
+    args: {
+        variant: 'primary',
+        small: true,
         href: 'http://developer.mozilla.org',
         target: '_new',
     },

package/dist/packages/link/styles.js

@@ -91,6 +91,10 @@ export const styles = css `.w-button,
         --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);
@@ -132,6 +136,38 @@ export const styles = css `.w-button,
         --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,

package/dist/packages/textfield/textfield.react.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 import { TextField } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import(".").WarpTextField>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "mask" | "pattern" | "disabled" | "name" | "type" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "step" | "helpText" | "readOnly" | "readonly" | "size" | "max" | "min" | "minLength" | "maxLength" | "placeholder" | "required" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
+    render(args: Omit<React.HTMLAttributes<import(".").WarpTextField>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "mask" | "pattern" | "disabled" | "type" | "name" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "step" | "helpText" | "readOnly" | "readonly" | "size" | "max" | "min" | "minLength" | "maxLength" | "placeholder" | "required" | "formatter" | "_hasPrefix" | "_hasSuffix" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

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.3.0-next.28",
+  "version": "2.3.0-next.29",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -86,19 +86,16 @@
             {
               "name": "variant",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'",
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'link' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'",
                 "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" } }
+            { "name": "full-width", "value": { "type": "boolean" } }
           ],
           "events": [],
           "js": {
@@ -106,18 +103,14 @@
               { "name": "autofocus", "type": "boolean" },
               {
                 "name": "variant",
-                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet'"
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'link' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'"
               },
-              { "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" }
+              { "name": "fullWidth", "type": "boolean" }
             ],
             "events": []
           }
@@ -138,7 +131,7 @@
             {
               "name": "variant",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'",
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'link' | 'pill'",
                 "default": "'secondary'"
               }
             },
@@ -160,7 +153,7 @@
               { "name": "autofocus", "type": "boolean" },
               {
                 "name": "variant",
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'link' | 'pill'"
               },
               { "name": "quiet", "type": "boolean" },
               { "name": "small", "type": "boolean" },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.3.0-next.29",
+  "version": "2.3.0-next.30",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {