@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

package/dist/packages/link/link.js

@@ -1,276 +1,276 @@
 var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n)=>{for(var t=n>1?void 0:n?x(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&&f(a,d,t),t};import{html as _,LitElement as h,nothing as Y}from"lit";import{property as o}from"lit/decorators.js";import{css as k}from"lit";import{unsafeCSS as y}from"lit";var g=k`
-  *,
-  :before,
-  :after {
-    box-sizing: border-box;
-    border-style: solid;
-    border-width: 0;
-    border-color: var(--w-s-color-border);
-  }
-  html {
-    font-size: 62.5%;
-  }
-  body {
-    background-color: var(--w-s-color-background);
-    min-height: 100%;
-    margin: 0;
-    overflow-y: scroll;
-  }
-  body,
-  :host {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    -webkit-tap-highlight-color: transparent;
-    font-family: var(--w-font-family);
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    color: var(--w-s-color-text);
-  }
-  hr {
-    color: inherit;
-    border-top-width: 1px;
-    height: 0;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 700;
-  }
-  a {
-    cursor: pointer;
-    color: var(--w-s-color-text-link);
-    text-decoration: none;
-  }
-  a:hover,
-  a:focus,
-  a:active {
-    text-decoration: underline;
-  }
-  a:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: 1px;
-  }
-  b,
-  strong {
-    font-weight: 700;
-  }
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      Liberation Mono,
-      Courier New,
-      monospace;
-    font-size: 1em;
-  }
-  sub,
-  sup {
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  button,
-  select {
-    text-transform: none;
-  }
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
-    -webkit-appearance: button;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  summary {
-    display: list-item;
-  }
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-  legend {
-    padding: 0;
-  }
-  ol,
-  ul,
-  menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  textarea {
-    resize: vertical;
-  }
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    color: var(--w-s-color-text-placeholder);
-  }
-  button,
-  [role='button'] {
-    cursor: pointer;
-  }
-  :disabled {
-    cursor: default;
-  }
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    vertical-align: middle;
-    display: block;
-  }
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-  h1 {
-    font-size: var(--w-font-size-xxl);
-    line-height: var(--w-line-height-xxl);
-  }
-  h2 {
-    font-size: var(--w-font-size-xl);
-    line-height: var(--w-line-height-xl);
-  }
-  h3 {
-    font-size: var(--w-font-size-l);
-    line-height: var(--w-line-height-l);
-  }
-  h4 {
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-  }
-  h5 {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-  }
-  dt,
-  dd {
-    margin: 0 16px;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  ul,
-  ol,
-  dl,
-  p,
-  blockquote {
-    margin: 0 0 8px;
-  }
-  [hidden] {
-    display: none !important;
-  }
-  [tabindex='-1']:focus:not(:focus-visible) {
-    outline: none;
-  }
-  legend {
-    float: left;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    display: table;
-  }
-  legend + * {
-    clear: both;
-  }
-  fieldset {
-    border: 0;
-    min-width: 0;
-    margin: 0;
-    padding: 0.01em 0 0;
-  }
-  body:not(:-moz-handler-blocked) fieldset {
-    display: table-cell;
-  }
-  svg {
-    pointer-events: none;
-  }
+	*,
+	:before,
+	:after {
+		box-sizing: border-box;
+		border-style: solid;
+		border-width: 0;
+		border-color: var(--w-s-color-border);
+	}
+	html {
+		font-size: 62.5%;
+	}
+	body {
+		background-color: var(--w-s-color-background);
+		min-height: 100%;
+		margin: 0;
+		overflow-y: scroll;
+	}
+	body,
+	:host {
+		-webkit-text-size-adjust: 100%;
+		tab-size: 4;
+		-webkit-tap-highlight-color: transparent;
+		font-family: var(--w-font-family);
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+		color: var(--w-s-color-text);
+	}
+	hr {
+		color: inherit;
+		border-top-width: 1px;
+		height: 0;
+	}
+	abbr:where([title]) {
+		-webkit-text-decoration: underline dotted;
+		text-decoration: underline dotted;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-size: inherit;
+		font-weight: 700;
+	}
+	a {
+		cursor: pointer;
+		color: var(--w-s-color-text-link);
+		text-decoration: none;
+	}
+	a:hover,
+	a:focus,
+	a:active {
+		text-decoration: underline;
+	}
+	a:focus-visible {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: 1px;
+	}
+	b,
+	strong {
+		font-weight: 700;
+	}
+	code,
+	kbd,
+	samp,
+	pre {
+		font-family:
+			ui-monospace,
+			SFMono-Regular,
+			Menlo,
+			Monaco,
+			Consolas,
+			Liberation Mono,
+			Courier New,
+			monospace;
+		font-size: 1em;
+	}
+	sub,
+	sup {
+		vertical-align: baseline;
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+	}
+	sub {
+		bottom: -0.25em;
+	}
+	sup {
+		top: -0.5em;
+	}
+	table {
+		text-indent: 0;
+		border-color: inherit;
+		border-collapse: collapse;
+	}
+	button,
+	input,
+	optgroup,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: 100%;
+		font-weight: inherit;
+		line-height: inherit;
+		color: inherit;
+		margin: 0;
+		padding: 0;
+	}
+	button,
+	select {
+		text-transform: none;
+	}
+	button,
+	[type="button"],
+	[type="reset"],
+	[type="submit"] {
+		-webkit-appearance: button;
+	}
+	:-moz-focusring {
+		outline: auto;
+	}
+	:-moz-ui-invalid {
+		box-shadow: none;
+	}
+	progress {
+		vertical-align: baseline;
+	}
+	::-webkit-inner-spin-button {
+		height: auto;
+	}
+	::-webkit-outer-spin-button {
+		height: auto;
+	}
+	[type="search"] {
+		-webkit-appearance: textfield;
+		outline-offset: -2px;
+	}
+	::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+	::-webkit-file-upload-button {
+		-webkit-appearance: button;
+		font: inherit;
+	}
+	summary {
+		display: list-item;
+	}
+	blockquote,
+	dl,
+	dd,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	hr,
+	figure,
+	p,
+	pre {
+		margin: 0;
+	}
+	fieldset {
+		margin: 0;
+		padding: 0;
+	}
+	legend {
+		padding: 0;
+	}
+	ol,
+	ul,
+	menu {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	textarea {
+		resize: vertical;
+	}
+	input::placeholder,
+	textarea::placeholder {
+		opacity: 1;
+		color: var(--w-s-color-text-placeholder);
+	}
+	button,
+	[role="button"] {
+		cursor: pointer;
+	}
+	:disabled {
+		cursor: default;
+	}
+	img,
+	svg,
+	video,
+	canvas,
+	audio,
+	iframe,
+	embed,
+	object {
+		vertical-align: middle;
+		display: block;
+	}
+	img,
+	video {
+		max-width: 100%;
+		height: auto;
+	}
+	h1 {
+		font-size: var(--w-font-size-xxl);
+		line-height: var(--w-line-height-xxl);
+	}
+	h2 {
+		font-size: var(--w-font-size-xl);
+		line-height: var(--w-line-height-xl);
+	}
+	h3 {
+		font-size: var(--w-font-size-l);
+		line-height: var(--w-line-height-l);
+	}
+	h4 {
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+	}
+	h5 {
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+	}
+	dt,
+	dd {
+		margin: 0 16px;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	ul,
+	ol,
+	dl,
+	p,
+	blockquote {
+		margin: 0 0 8px;
+	}
+	[hidden] {
+		display: none !important;
+	}
+	[tabindex="-1"]:focus:not(:focus-visible) {
+		outline: none;
+	}
+	legend {
+		float: left;
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		display: table;
+	}
+	legend + * {
+		clear: both;
+	}
+	fieldset {
+		border: 0;
+		min-width: 0;
+		margin: 0;
+		padding: 0.01em 0 0;
+	}
+	body:not(:-moz-handler-blocked) fieldset {
+		display: table-cell;
+	}
+	svg {
+		pointer-events: none;
+	}
 `,q=y(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
@@ -2438,308 +2438,334 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n
                 }
             }
         `);import{css as z}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, var(--w-button-radius-default, 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;
-  }
+	: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, var(--w-button-radius-default, 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;
+	}
 `,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: var(--w-button-radius-utility, 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));
-  }
+	: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: var(--w-button-radius-utility, 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)
+		);
+	}
 `,p=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);
-  }
+	: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);
+	}
 `,u=i`
-  :host([disabled]) {
-    pointer-events: none;
-    cursor: default;
+	:host([disabled]) {
+		pointer-events: none;
+		cursor: default;
 
-    --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-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-color: var(--w-s-color-text-inverted);
+		--w-c-button-border-width: 0px;
+	}
 `,I=i`
-  ${b}
+	${b}
 
-  /* ============================================================
+	/* ============================================================
    * Base element (NATIVE button mode ONLY)
    * ============================================================ */
   button[part='base'] {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
 
-    cursor: pointer;
+		cursor: pointer;
 
-    background-color: var(--_bg);
-    color: var(--_color);
+		background-color: var(--_bg);
+		color: var(--_color);
 
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--_radius);
+		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));
+		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);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
 
-    transition: var(--_transition);
-  }
+		transition: var(--_transition);
+	}
 
-  /* Optional: helps avoid "grew a bit" from slot typography differences */
-  button[part='base'] ::slotted(*) {
-    line-height: inherit;
-  }
+	/* 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);
-  }
-
-  /* ============================================================
+	: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)
    * ============================================================ */
-  ${v}
+	${v}
 
-  /* Button-specific: quiet attribute backwards compatibility */
+	/* 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));
-  }
-
-  :host([variant='pill']) button[part='base'] {
-    min-height: 44px;
-    min-width: 44px;
-  }
-
-  :host([small][variant='pill']) button[part='base'] {
-    min-height: 32px;
-    min-width: 32px;
-  }
-
-  /* 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 ===== */
-  ${p}
-
-  :host([small][variant='pill']) {
-    --w-c-button-padding-x: 8px;
-    --w-c-button-padding-y: 8px;
-  }
-
-  /* ===== Layout ===== */
-
-  :host([full-width]) {
-    display: block;
-    width: 100%;
-  }
-
-  :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));
-  }
-
-  /* ============================================================
+		--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));
+	}
+
+	:host([variant="pill"]) button[part="base"] {
+		min-height: 44px;
+		min-width: 44px;
+	}
+
+	:host([small][variant="pill"]) button[part="base"] {
+		min-height: 32px;
+		min-width: 32px;
+	}
+
+	/* 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 ===== */
+	${p}
+
+	:host([small][variant='pill']) {
+		--w-c-button-padding-x: 8px;
+		--w-c-button-padding-y: 8px;
+	}
+
+	/* ===== Layout ===== */
+
+	:host([full-width]) {
+		display: block;
+		width: 100%;
+	}
+
+	: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)
    *
@@ -2748,166 +2774,166 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n
    * To ensure states always win, we match similar specificity via extra attribute selectors.
    * ============================================================ */
 
-  /* ===== Disabled ===== */
-  ${u}
+	/* ===== Disabled ===== */
+	${u}
 
-  /* Additional specificity for button to override quiet variants */
+	/* 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;
-    }
-  }
+		--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;
+		}
+	}
 `;var w=z`
-  ${b}
+	${b}
 
-  /* ============================================================
+	/* ============================================================
    * Link element (anchor with button styling)
    * ============================================================ */
   a[part='base'] {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
 
-    cursor: pointer;
-    text-decoration: none;
+		cursor: pointer;
+		text-decoration: none;
 
-    background-color: var(--_bg);
-    color: var(--_color);
+		background-color: var(--_bg);
+		color: var(--_color);
 
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--_radius);
+		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));
+		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);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
 
-    transition: var(--_transition);
-  }
+		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"]: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(: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);
-  }
+	:host(:focus-visible) a[part="base"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
 
-  /* ===== Variants (shared from button) ===== */
-  ${v}
+	/* ===== Variants (shared from button) ===== */
+	${v}
 
-  /* Link-specific: link variant element styles */
+	/* Link-specific: link variant element styles */
   :host([variant='link']) a[part='base'] {
-    display: inline;
-    padding: 0;
-  }
+		display: inline;
+		padding: 0;
+	}
 
-  :host([variant='link']:not([disabled])) a[part='base']:hover {
-    text-decoration: underline;
-    background-color: transparent;
-    border-color: transparent;
-  }
+	:host([variant="link"]:not([disabled])) a[part="base"]:hover {
+		text-decoration: underline;
+		background-color: transparent;
+		border-color: transparent;
+	}
 
-  /* ===== Sizes (shared from button) ===== */
-  ${p}
+	/* ===== Sizes (shared from button) ===== */
+	${p}
 
-  /* ===== Layout ===== */
+	/* ===== Layout ===== */
   :host([full-width]) {
-    display: block;
-    width: 100%;
-  }
+		display: block;
+		width: 100%;
+	}
 
-  :host([full-width]) a[part='base'] {
-    width: 100%;
-  }
+	:host([full-width]) a[part="base"] {
+		width: 100%;
+	}
 
-  /* ===== Disabled (shared from button) ===== */
-  ${u}
+	/* ===== Disabled (shared from button) ===== */
+	${u}
 `;var m=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],r=class extends h{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!m.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
 ${m.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){return _`
-      <a
-        href="${this.href}"
-        part="base"
-        target="${this.target}"
-        rel="${this.target==="_blank"?this.rel||"noopener":Y}"
-        tabindex="0"
-      >
-        <slot></slot>
-      </a>
-    `}};r.shadowRootOptions={...h.shadowRootOptions,delegatesFocus:!0},r.styles=[g,w],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};
+			<a
+				href="${this.href}"
+				part="base"
+				target="${this.target}"
+				rel="${this.target==="_blank"?this.rel||"noopener":Y}"
+				tabindex="0"
+			>
+				<slot></slot>
+			</a>
+		`}};r.shadowRootOptions={...h.shadowRootOptions,delegatesFocus:!0},r.styles=[g,w],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