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

package/dist/packages/link/link.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var e=(n,a,d,i)=>{for(var t=i>1?void 0:i?u(a,d):a,c=n.length-1,l;c>=0;c--)(l=n[c])&&(t=(i?l(a,d,t):l(t))||t);return i&&t&&h(a,d,t),t};import{html as m,LitElement as g,nothing as f}from"lit";import{property as o}from"lit/decorators.js";import{css as s}from"lit";var b=s`
+var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var e=(c,a,d,n)=>{for(var t=n>1?void 0:n?k(a,d):a,l=c.length-1,s;l>=0;l--)(s=c[l])&&(t=(n?s(a,d,t):s(t))||t);return n&&t&&x(a,d,t),t};import{html as z,LitElement as m,nothing as _}from"lit";import{property as o}from"lit/decorators.js";import{css as u}from"lit";var w=u`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var e=(n,a,d,i
   svg {
     pointer-events: none;
   }
-`,y=s`*, :before, :after {
+`,S=u`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,226 +2437,456 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var e=(n,a,d,i
                     display: none
                 }
             }
-        `;import{css as w}from"lit";var v=w`
-  /* 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)
+        `;import{css as y}from"lit";import{css as i}from"lit";var b=i`
+  :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)
     );
-    --_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 {
+
+    /* 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;
+  }
+`,v=i`
+  :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));
+  }
+`,g=i`
+  :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);
+  }
+`,p=i`
+  :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;
+  }
+`,B=i`
+  ${b}
+
+  /* ============================================================
+   * Base element (NATIVE button mode ONLY)
+   * ============================================================ */
+  button[part='base'] {
     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));
+
+    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;
   }
 
-  :host(:not([variant="link"])) a:hover {
-    background-color: var(--_background-hover);
-    border-color: var(--_border-hover);
-    color: var(--_text-color-hover);
+  /* ============================================================
+   * 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;
   }
 
-  :host(:not([variant="link"])) a:active {
-    background-color: var(--_background-active);
-    border-color: var(--_border-active);
-    color: var(--_text-color-active);
+  /* 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([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;
+  :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)
+   * ============================================================ */
+  ${v}
+
+  /* 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;
   }
 
-  /* 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;
+  :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 ===== */
+  ${g}
+
+  :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 ===== */
+  ${p}
+
+  /* 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;
   }
 
-  :host([variant="link"]):hover a {
-    text-decoration: underline;
+  @media (prefers-reduced-motion: reduce) {
+    :host([loading]) button[part='base'] {
+      animation: none;
+    }
   }
 
-  /* Sizes config */
-  :host([small]) {
-    --padding-x: 12px;
-    --padding-y: 8px;
-    --font-size: var(--w-font-size-xs);
-    --line-height: var(--w-line-height-xs);
+  @keyframes animate-inprogress {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 60px 0;
+    }
   }
+`;var h=y`
+  ${b}
 
-  /* Width config */
-  :host([full-width]) a {
+  /* ============================================================
+   * Link element (anchor with button styling)
+   * ============================================================ */
+  a[part='base'] {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    cursor: pointer;
+    text-decoration: none;
+
+    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);
+  }
+
+  :host(:not([disabled])) a[part='base']:hover {
+    background-color: var(--_bg-hover);
+    border-color: var(--_border-color-hover);
+    color: var(--_color-hover);
+  }
+
+  :host(:not([disabled])) a[part='base']:active {
+    background-color: var(--_bg-active);
+    border-color: var(--_border-color-active);
+    color: var(--_color-active);
+  }
+
+  :host(:focus-visible) a[part='base'] {
+    outline: var(--_outline-width) solid var(--_outline-color);
+    outline-offset: var(--_outline-offset);
+  }
+
+  /* ===== Variants (shared from button) ===== */
+  ${v}
+
+  /* Link-specific: link variant element styles */
+  :host([variant='link']) a[part='base'] {
+    display: inline;
+    padding: 0;
+  }
+
+  :host([variant='link']:not([disabled])) a[part='base']:hover {
+    text-decoration: underline;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  /* ===== Sizes (shared from button) ===== */
+  ${g}
+
+  /* ===== Layout ===== */
+  :host([full-width]) a[part='base'] {
     width: 100%;
-    max-width: 100%;
   }
-`;var p=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],r=class extends g{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!p.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
-${p.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){return m`
+
+  /* ===== Disabled (shared from button) ===== */
+  ${p}
+`;var f=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],r=class extends m{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!f.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${f.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){return z`
       <a
         href="${this.href}"
+        part="base"
         target="${this.target}"
-        rel="${this.target==="_blank"?this.rel||"noopener":f}"
+        rel="${this.target==="_blank"?this.rel||"noopener":_}"
         tabindex="0"
       >
         <slot></slot>
       </a>
-    `}};r.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},r.styles=[b,v],e([o({type:Boolean,reflect:!0})],r.prototype,"autofocus",2),e([o({reflect:!0})],r.prototype,"variant",2),e([o({type:Boolean,reflect:!0})],r.prototype,"small",2),e([o({reflect:!0})],r.prototype,"href",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({reflect:!0})],r.prototype,"target",2),e([o({reflect:!0})],r.prototype,"rel",2),e([o({attribute:"full-width",type:Boolean,reflect:!0})],r.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",r);export{r as WarpLink};
+    `}};r.shadowRootOptions={...m.shadowRootOptions,delegatesFocus:!0},r.styles=[w,h],e([o({type:Boolean,reflect:!0})],r.prototype,"autofocus",2),e([o({reflect:!0})],r.prototype,"variant",2),e([o({type:Boolean,reflect:!0})],r.prototype,"small",2),e([o({reflect:!0})],r.prototype,"href",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({reflect:!0})],r.prototype,"target",2),e([o({reflect:!0})],r.prototype,"rel",2),e([o({attribute:"full-width",type:Boolean,reflect:!0})],r.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",r);export{r as WarpLink};
 //# sourceMappingURL=link.js.map