@warp-ds/elements 2.10.0-next.3 → 2.10.0-next.5

package/dist/packages/button/button.stories.d.ts

@@ -20,3 +20,32 @@ export declare const Loading: Story;
 export declare const FullWidth: Story;
 export declare const AsLink: Story;
 export declare const FormControl: Story;
+export declare const Overlay: Story;
+export declare const OverlayInverted: Story;
+export declare const OverlayQuiet: Story;
+export declare const OverlayInvertedQuiet: Story;
+/**
+ * Helpful grid to spot:
+ * - hover backgrounds (especially link + quiet variants)
+ * - pill icon color regressions
+ * - any padding/outline oddities
+ */
+export declare const AllVariantsGrid: Story;
+/**
+ * Confirms backwards compat mapping for the deprecated `quiet` flag.
+ * Especially relevant for overlay/overlayInverted and negative/utility.
+ */
+export declare const QuietBackCompatMapping: Story;
+/**
+ * Loading should be consistent across variants (disabled-like + stripes).
+ * This story makes it obvious if a variant leaks hover/background/color into loading.
+ */
+export declare const LoadingAcrossVariants: Story;
+/**
+ * This targets the known tricky path:
+ * w-button with href renders w-link (back-compat).
+ * Great for spotting:
+ * - hover gray bg (should not happen for "link" look)
+ * - double padding when link is rendered inside button styling assumptions
+ */
+export declare const HrefModeRegression: Story;

package/dist/packages/button/button.stories.js

@@ -48,8 +48,6 @@ export const Link = {
     args: {
         variant: 'link',
         type: 'button',
-        href: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_components',
-        target: '_new',
     },
 };
 export const Pill = {
@@ -144,3 +142,179 @@ export const FormControl = {
     `;
     },
 };
+/* -------------------------------------------------------------------------------------------------
+ * Added stories: overlay variants + regressions (href mode + quiet mapping + loading across variants)
+ * ------------------------------------------------------------------------------------------------- */
+export const Overlay = {
+    args: {
+        variant: 'overlay',
+        type: 'button',
+    },
+};
+export const OverlayInverted = {
+    args: {
+        variant: 'overlayInverted',
+        type: 'button',
+    },
+};
+export const OverlayQuiet = {
+    args: {
+        variant: 'overlayQuiet',
+        type: 'button',
+    },
+};
+export const OverlayInvertedQuiet = {
+    args: {
+        variant: 'overlayInvertedQuiet',
+        type: 'button',
+    },
+};
+/**
+ * Helpful grid to spot:
+ * - hover backgrounds (especially link + quiet variants)
+ * - pill icon color regressions
+ * - any padding/outline oddities
+ */
+export const AllVariantsGrid = {
+    args: {},
+    render() {
+        const locale = detectLocale();
+        const variants = [
+            'primary',
+            'secondary',
+            'negative',
+            'negativeQuiet',
+            'utility',
+            'utilityQuiet',
+            'quiet',
+            'link',
+            'pill',
+            'overlay',
+            'overlayInverted',
+            'overlayQuiet',
+            'overlayInvertedQuiet',
+        ];
+        return html `
+      <div style="display:grid; gap: 16px;">
+        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+          Grid for visual regression checking (hover states / padding / icon colors).
+        </div>
+
+        <div style="display:grid; gap: 12px;">
+          ${variants.map((v) => html `
+              <div style="display:flex; align-items:center; gap: 12px; flex-wrap: wrap;">
+                <div style="width: 210px; font: 12px/1.4 system-ui; opacity: 0.8;">variant="${v}"</div>
+
+                <w-button variant=${v} type="button">Label</w-button>
+
+                ${v === 'pill'
+            ? html `
+                      <w-button variant="pill" type="button" icon-only aria-label="Pill icon">
+                        <w-icon
+                          name="Heart"
+                          size="small"
+                          locale="${locale}"
+                          style="height: 16px;"
+                          class="flex"
+                        ></w-icon>
+                      </w-button>
+                    `
+            : null}
+              </div>
+            `)}
+        </div>
+      </div>
+    `;
+    },
+};
+/**
+ * Confirms backwards compat mapping for the deprecated `quiet` flag.
+ * Especially relevant for overlay/overlayInverted and negative/utility.
+ */
+export const QuietBackCompatMapping = {
+    args: {},
+    render() {
+        return html `
+      <div style="display:grid; gap: 12px;">
+        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+          These should look like their corresponding <code>*Quiet</code> variants.
+        </div>
+
+        <div style="display:flex; gap: 12px; flex-wrap: wrap;">
+          <w-button variant="negative" quiet type="button">negative + quiet</w-button>
+          <w-button variant="utility" quiet type="button">utility + quiet</w-button>
+          <w-button variant="overlay" quiet type="button">overlay + quiet</w-button>
+          <w-button variant="overlayInverted" quiet type="button">overlayInverted + quiet</w-button>
+          <w-button variant="secondary" quiet type="button">secondary + quiet</w-button>
+        </div>
+      </div>
+    `;
+    },
+};
+/**
+ * Loading should be consistent across variants (disabled-like + stripes).
+ * This story makes it obvious if a variant leaks hover/background/color into loading.
+ */
+export const LoadingAcrossVariants = {
+    args: {},
+    render() {
+        const variants = [
+            'primary',
+            'secondary',
+            'negative',
+            'negativeQuiet',
+            'utility',
+            'utilityQuiet',
+            'quiet',
+            'link',
+            'overlay',
+            'overlayInverted',
+            'overlayQuiet',
+            'overlayInvertedQuiet',
+            'pill',
+        ];
+        return html `
+      <div style="display:grid; gap: 16px;">
+        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+          Loading should look the same no matter the variant.
+        </div>
+
+        <div style="display:flex; flex-wrap: wrap; gap: 12px;">
+          ${variants.map((v) => html `<w-button variant=${v} loading type="button">${v}</w-button>`)}
+        </div>
+      </div>
+    `;
+    },
+};
+/**
+ * This targets the known tricky path:
+ * w-button with href renders w-link (back-compat).
+ * Great for spotting:
+ * - hover gray bg (should not happen for "link" look)
+ * - double padding when link is rendered inside button styling assumptions
+ */
+export const HrefModeRegression = {
+    args: {},
+    render() {
+        return html `
+      <div style="display:grid; gap: 12px;">
+        <div style="font: 12px/1.4 system-ui; opacity: 0.8;">
+          <code>w-button[href]</code> renders <code>w-link</code> (backwards compatibility path).
+          Hover these and check for unwanted gray backgrounds / padding.
+        </div>
+
+        <div style="display:flex; gap: 12px; flex-wrap: wrap;">
+          <w-button variant="primary" href="https://example.com" target="_blank" type="button">primary href</w-button>
+          <w-button variant="overlay" href="https://example.com" target="_blank" type="button">overlay href</w-button>
+          <w-button variant="overlayQuiet" href="https://example.com" target="_blank" type="button"
+            >overlayQuiet href</w-button
+          >
+          <w-button variant="overlayInvertedQuiet" href="https://example.com" target="_blank" type="button"
+            >overlayInvertedQuiet href</w-button
+          >
+          <w-button variant="link" href="https://example.com" target="_blank" type="button">link href</w-button>
+        </div>
+      </div>
+    `;
+    },
+};

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

@@ -1 +1,22 @@
-export declare const styles: import("lit").CSSResult;
+/**
+ * Shared base tokens used by both w-button and w-link.
+ * These define the internal CSS variables that map component tokens to semantic tokens.
+ */
+export declare const buttonSharedBase: import("lit").CSSResult;
+/**
+ * Shared variant styles used by both w-button and w-link.
+ * These set component tokens for different visual styles.
+ */
+export declare const buttonSharedVariants: import("lit").CSSResult;
+/**
+ * Shared sizing styles used by both w-button and w-link.
+ */
+export declare const buttonSharedSizing: import("lit").CSSResult;
+/**
+ * Shared disabled state used by both w-button and w-link.
+ */
+export declare const buttonSharedDisabled: import("lit").CSSResult;
+/**
+ * Complete w-button styles (shared + button-specific).
+ */
+export declare const wButtonStyles: import("lit").CSSResult;

package/dist/packages/button/styles.js

@@ -1,2 +1,391 @@
+/* packages/button/styles.ts */
 import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.text-center{text-align:center}.animate-inprogress{background-size:30px 30px;animation:3s linear infinite animate-inprogress;background-image:linear-gradient(135deg,#0000000d 25%,#0000 0 50%,#0000000d 0 75%,#0000 0,#0000)!important}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent{background-color:#0000}.bg-\\[--w-color-button-primary-background\\]{background-color:var(--w-color-button-primary-background)}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover{background-color:var(--w-color-button-primary-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.active\\:bg-\\[--w-color-button-primary-background-active\\]:active{background-color:var(--w-color-button-primary-background-active)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.inline-block{display:inline-block}.inline{display:inline}.inline-flex{display:inline-flex}.hover\\:underline:hover,.focus\\:underline:focus,.active\\:underline:active{text-decoration-line:underline}.hover\\:no-underline:hover,.focus\\:no-underline:focus,.active\\:no-underline:active{text-decoration:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-negative{background-color:var(--w-s-color-background-negative)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-icon{color:var(--w-s-color-icon)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border{border-color:var(--w-s-color-border)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.min-h-32{min-height:3.2rem}.min-w-32{min-width:3.2rem}.w-full{width:100%}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-0{padding:0}.p-4{padding:.4rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.px-\\[15px\\]{padding-left:15px;padding-right:15px}.py-\\[11px\\]{padding-top:11px;padding-bottom:11px}.py-\\[7px\\]{padding-top:7px;padding-bottom:7px}.cursor-default{cursor:default}.font-bold{font-weight:700}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-\\[24\\]{line-height:2.4rem}`;
+/**
+ * Shared base tokens used by both w-button and w-link.
+ * These define the internal CSS variables that map component tokens to semantic tokens.
+ */
+export const buttonSharedBase = css `
+  :host {
+    display: inline-block;
+
+    /* Internal resolved vars (defaults) */
+    --_bg: var(--w-c-button-bg, var(--w-s-color-background));
+    --_bg-hover: var(--w-c-button-bg-hover, var(--w-s-color-background-hover));
+    --_bg-active: var(--w-c-button-bg-active, var(--w-s-color-background-active));
+
+    --_color: var(--w-c-button-color, var(--w-s-color-text-link));
+    --_color-hover: var(--w-c-button-color-hover, var(--_color));
+    --_color-active: var(--w-c-button-color-active, var(--_color));
+
+    --_border-width: var(--w-c-button-border-width, 2px);
+    --_border-color: var(--w-c-button-border-color, var(--w-s-color-border));
+    --_border-color-hover: var(--w-c-button-border-color-hover, var(--w-s-color-border-hover));
+    --_border-color-active: var(--w-c-button-border-color-active, var(--w-s-color-border-active));
+
+    --_radius: var(--w-c-button-radius, 8px);
+
+    --_font-size: var(--w-c-button-font-size, var(--w-font-size-m));
+    --_line-height: var(--w-c-button-line-height, var(--w-line-height-m));
+    --_font-weight: var(--w-c-button-font-weight, 700);
+
+    --_pad-x: var(--w-c-button-padding-x, 16px);
+    --_pad-y: var(--w-c-button-padding-y, 13px);
+
+    --_outline-width: var(--w-c-button-outline-width, 2px);
+    --_outline-color: var(--w-c-button-outline-color, var(--w-s-color-border-focus));
+    --_outline-offset: var(--w-c-button-outline-offset, var(--w-outline-offset, 1px));
+
+    --_transition: var(
+      --w-c-button-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)
+    );
+
+    /* Icon color for pill/icon-only variants (semantic; default dark grey icon) */
+    --w-c-button-icon-color: var(--w-s-color-icon);
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+`;
+/**
+ * Shared variant styles used by both w-button and w-link.
+ * These set component tokens for different visual styles.
+ */
+export const buttonSharedVariants = css `
+  :host([variant='primary']) {
+    --w-c-button-bg: var(--w-s-color-background-primary);
+    --w-c-button-bg-hover: var(--w-s-color-background-primary-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-primary-active);
+    --w-c-button-color: var(--w-s-color-text-inverted);
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='negative']) {
+    --w-c-button-bg: var(--w-s-color-background-negative);
+    --w-c-button-bg-hover: var(--w-s-color-background-negative-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-negative-active);
+    --w-c-button-color: var(--w-s-color-text-inverted);
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='negativeQuiet']) {
+    --w-c-button-bg: transparent;
+    --w-c-button-bg-hover: var(--w-s-color-background-negative-subtle-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-negative-subtle-active);
+    --w-c-button-color: var(--w-s-color-text-negative);
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='utility']) {
+    --w-c-button-bg: var(--w-s-color-background);
+    --w-c-button-color: var(--w-s-color-text);
+    --w-c-button-radius: 4px;
+    --w-c-button-border-width: 1px;
+  }
+
+  :host([variant='utilityQuiet']) {
+    --w-c-button-bg: transparent;
+    --w-c-button-color: var(--w-s-color-text);
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='quiet']) {
+    --w-c-button-bg: transparent;
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='overlay']) {
+    --w-c-button-bg: var(--w-s-color-background);
+    --w-c-button-bg-hover: var(--w-s-color-background-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-active);
+    --w-c-button-color: var(--w-s-color-text);
+    --w-c-button-radius: 9999px;
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='overlayInverted']) {
+    --w-c-button-bg: var(--w-s-color-background-inverted);
+    --w-c-button-bg-hover: var(--w-s-color-background-inverted-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-inverted-active);
+    --w-c-button-color: var(--w-s-color-text-inverted);
+    --w-c-button-radius: 9999px;
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='overlayQuiet']) {
+    --w-c-button-bg: transparent;
+    --w-c-button-bg-hover: var(--w-s-color-background-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-active);
+    --w-c-button-color: var(--w-s-color-text);
+    --w-c-button-radius: 9999px;
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='overlayInvertedQuiet']) {
+    --w-c-button-bg: transparent;
+    --w-c-button-bg-hover: var(--w-s-color-background-inverted-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-inverted-active);
+    --w-c-button-color: var(--w-s-color-text-inverted);
+    --w-c-button-radius: 9999px;
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='link']) {
+    --w-c-button-bg: transparent;
+    --w-c-button-border-width: 0px;
+    --w-c-button-padding-x: 0px;
+    --w-c-button-padding-y: 0px;
+    --w-c-button-font-weight: 400;
+
+    --w-c-button-bg-hover: transparent;
+    --w-c-button-bg-active: transparent;
+
+    --w-c-button-color: var(--w-s-color-text-link);
+    --w-c-button-color-hover: var(--w-s-color-text-link-hover, var(--w-c-button-color));
+    --w-c-button-color-active: var(--w-s-color-text-link-active, var(--w-c-button-color));
+  }
+`;
+/**
+ * Shared sizing styles used by both w-button and w-link.
+ */
+export const buttonSharedSizing = css `
+  :host([small]) {
+    --w-c-button-padding-x: 12px;
+    --w-c-button-padding-y: 8px;
+    --w-c-button-font-size: var(--w-font-size-xs);
+    --w-c-button-line-height: var(--w-line-height-xs);
+  }
+`;
+/**
+ * Shared disabled state used by both w-button and w-link.
+ */
+export const buttonSharedDisabled = css `
+  :host([disabled]) {
+    pointer-events: none;
+
+    --w-c-button-bg: var(--w-s-color-background-disabled);
+    --w-c-button-bg-hover: var(--w-s-color-background-disabled);
+    --w-c-button-bg-active: var(--w-s-color-background-disabled);
+
+    --w-c-button-color: var(--w-s-color-text-inverted);
+    --w-c-button-border-width: 0px;
+  }
+`;
+/**
+ * Complete w-button styles (shared + button-specific).
+ */
+export const wButtonStyles = css `
+  ${buttonSharedBase}
+
+  /* ============================================================
+   * Base element (NATIVE button mode ONLY)
+   * ============================================================ */
+  button[part='base'] {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    cursor: pointer;
+
+    background-color: var(--_bg);
+    color: var(--_color);
+
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+
+    padding: calc(var(--_pad-y) - var(--_border-width))
+      calc(var(--_pad-x) - var(--_border-width));
+
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    font-weight: var(--_font-weight);
+
+    transition: var(--_transition);
+  }
+
+  /* Optional: helps avoid "grew a bit" from slot typography differences */
+  button[part='base'] ::slotted(*) {
+    line-height: inherit;
+  }
+
+  /* ============================================================
+   * Link mode wrapper (w-link host carries part="base" in button.ts)
+   * Keep it layout-only to avoid double chrome.
+   * ============================================================ */
+  :host > w-link[part='base'] {
+    display: inline-block;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  /* Hover / active (native button mode only) */
+  :host(:not([disabled]):not([loading])) button[part='base']:hover {
+    background-color: var(--_bg-hover);
+    border-color: var(--_border-color-hover);
+    color: var(--_color-hover);
+  }
+
+  :host(:not([disabled]):not([loading])) button[part='base']:active {
+    background-color: var(--_bg-active);
+    border-color: var(--_border-color-active);
+    color: var(--_color-active);
+  }
+
+  :host(:focus-visible) button[part='base'] {
+    outline: var(--_outline-width) solid var(--_outline-color);
+    outline-offset: var(--_outline-offset);
+  }
+
+  /* ============================================================
+   * Variants (shared + button-specific quiet mappings)
+   * ============================================================ */
+  ${buttonSharedVariants}
+
+  /* Button-specific: quiet attribute backwards compatibility */
+  :host([variant='negative'][quiet]) {
+    --w-c-button-bg: transparent;
+    --w-c-button-bg-hover: var(--w-s-color-background-negative-subtle-hover);
+    --w-c-button-bg-active: var(--w-s-color-background-negative-subtle-active);
+    --w-c-button-color: var(--w-s-color-text-negative);
+    --w-c-button-border-width: 0px;
+  }
+
+  :host([variant='utility'][quiet]) {
+    --w-c-button-bg: transparent;
+    --w-c-button-color: var(--w-s-color-text);
+    --w-c-button-border-width: 0px;
+  }
+
+  /* Button-specific: pill variant */
+  :host([variant='pill']) {
+    --w-c-button-bg: transparent;
+    --w-c-button-radius: 50%;
+    --w-c-button-border-width: 0px;
+    --w-c-button-padding-x: 14px;
+    --w-c-button-padding-y: 14px;
+
+    /* pill uses semantic icon color (dark grey by default) */
+    --w-c-button-color: var(--w-c-button-icon-color, var(--w-s-color-icon));
+  }
+
+  /* Button-specific: link variant element styles */
+  :host([variant='link']) button[part='base'] {
+    display: inline;
+    padding: 0;
+  }
+
+  :host([variant='link']:not([disabled]):not([loading])) button[part='base']:hover {
+    text-decoration: underline;
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--w-c-button-color-hover);
+  }
+
+  /* ===== Size ===== */
+  ${buttonSharedSizing}
+
+  :host([small][variant='pill']) {
+    --w-c-button-padding-x: 8px;
+    --w-c-button-padding-y: 8px;
+  }
+
+  /* ===== Layout ===== */
+
+  :host([full-width]) button[part='base'],
+  :host([full-width]) > w-link[part='base'] {
+    width: 100%;
+  }
+
+  :host([icon-only]) button[part='base'] {
+    aspect-ratio: 1 / 1;
+    padding-left: calc(var(--w-c-button-padding-y) - var(--w-c-button-border-width, 0px));
+    padding-right: calc(var(--w-c-button-padding-y) - var(--w-c-button-border-width, 0px));
+  }
+
+  /* ============================================================
+   * STATE OVERRIDES (must be last so they win over variants)
+   * Disabled first, Loading last (loading is disabled-like + visuals)
+   *
+   * IMPORTANT:
+   * Some variant selectors are more specific (e.g. [variant='negative']:not([quiet])).
+   * To ensure states always win, we match similar specificity via extra attribute selectors.
+   * ============================================================ */
+
+  /* ===== Disabled ===== */
+  ${buttonSharedDisabled}
+
+  /* Additional specificity for button to override quiet variants */
+  :host([disabled][variant]),
+  :host([disabled][quiet]) {
+    --w-c-button-bg: var(--w-s-color-background-disabled);
+    --w-c-button-bg-hover: var(--w-s-color-background-disabled);
+    --w-c-button-bg-active: var(--w-s-color-background-disabled);
+
+    --w-c-button-color: var(--w-s-color-text-inverted);
+
+    --w-c-button-border-width: 0px;
+    --w-c-button-border-color: transparent;
+    --w-c-button-border-color-hover: transparent;
+    --w-c-button-border-color-active: transparent;
+
+    --w-c-button-color-hover: var(--w-s-color-text-inverted);
+    --w-c-button-color-active: var(--w-s-color-text-inverted);
+  }
+
+  /* ===== Loading (wins over everything) ===== */
+  :host([loading]),
+  :host([loading][variant]),
+  :host([loading][quiet]) {
+    pointer-events: none;
+
+    /* Strong overrides so variants can't leak through */
+    --w-c-button-bg: var(--w-s-color-background-subtle);
+    --w-c-button-bg-hover: var(--w-s-color-background-subtle);
+    --w-c-button-bg-active: var(--w-s-color-background-subtle);
+
+    --w-c-button-color: var(--w-s-color-text);
+    --w-c-button-color-hover: var(--w-s-color-text);
+    --w-c-button-color-active: var(--w-s-color-text);
+
+    --w-c-button-border-width: 0px;
+    --w-c-button-border-color: transparent;
+    --w-c-button-border-color-hover: transparent;
+    --w-c-button-border-color-active: transparent;
+  }
+
+  /* Loading stripes (native button mode only) */
+  :host([loading]) button[part='base'] {
+    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;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([loading]) button[part='base'] {
+      animation: none;
+    }
+  }
+
+  @keyframes animate-inprogress {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 60px 0;
+    }
+  }
+`;

package/dist/packages/card/card.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './card.js';
 describe('w-card React SSR hydration', () => {

package/dist/packages/checkbox/checkbox.d.ts

@@ -1,9 +1,9 @@
 import { LitElement, PropertyValues } from 'lit';
-declare const WCheckbox_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+declare const WarpCheckbox_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * @parent w-checkbox-group
  */
-export declare class WCheckbox extends WCheckbox_base {
+export declare class WarpCheckbox extends WarpCheckbox_base {
     #private;
     static styles: import("lit").CSSResult[];
     static shadowRootOptions: {
@@ -88,9 +88,11 @@ export declare class WCheckbox extends WCheckbox_base {
     reportValidity(): boolean;
     render(): import("lit").TemplateResult<1>;
 }
+/** @deprecated Use WarpCheckbox */
+export declare const WCheckbox: typeof WarpCheckbox;
 declare global {
     interface HTMLElementTagNameMap {
-        'w-checkbox': WCheckbox;
+        'w-checkbox': WarpCheckbox;
     }
 }
 export {};

package/dist/packages/checkbox/checkbox.hydration.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
 import './checkbox.js';
 describe('w-checkbox React SSR hydration', () => {