@xtyle/core 0.5.0

package/dist/css/components/badge.js

@@ -0,0 +1,161 @@
+import { FULL_TONES as TONES } from "../../vocab.js";
+const toneSolid = TONES.map((t) => `.xtyle-badge--solid.xtyle-badge--${t} {
+	background: var(--${t});
+	color: var(--${t}-fg);
+	border-color: transparent;
+}`).join("\n");
+const toneSoft = TONES.map((t) => `.xtyle-badge--soft.xtyle-badge--${t} {
+	background: var(--${t}-bg);
+	color: var(--${t}-text);
+	border-color: transparent;
+}`).join("\n");
+const toneOutline = TONES.map((t) => `.xtyle-badge--outline.xtyle-badge--${t} {
+	background: transparent;
+	color: var(--${t}-text);
+	border-color: var(--${t});
+}`).join("\n");
+export const badgeCss = `
+[data-badge] { display: contents; }
+.xtyle-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	font-family: var(--font-sans);
+	font-size: var(--text-xs);
+	font-weight: var(--weight-medium);
+	line-height: var(--leading-tight);
+	white-space: nowrap;
+	background: var(--neutral-bg);
+	color: var(--neutral-text);
+	border: var(--border-thin) solid transparent;
+	border-radius: var(--radius-full);
+	padding: var(--space-0) var(--space-2);
+}
+.xtyle-badge--sm {
+	font-size: var(--text-xs);
+	gap: var(--space-1);
+	padding: var(--space-0) var(--space-1);
+}
+.xtyle-badge--lg {
+	font-size: var(--text-sm);
+	gap: var(--space-2);
+	padding: var(--space-1) var(--space-3);
+}
+${toneSolid}
+${toneSoft}
+${toneOutline}
+.xtyle-badge__dot {
+	display: inline-block;
+	width: var(--space-2);
+	height: var(--space-2);
+	flex: none;
+	border-radius: var(--radius-full);
+	background: currentColor;
+}
+.xtyle-badge--lg .xtyle-badge__dot {
+	width: var(--space-3);
+	height: var(--space-3);
+}
+.xtyle-badge--pulse-slow .xtyle-badge__dot {
+	animation: xtyle-badge-pulse 1.8s var(--ease-standard) infinite;
+}
+.xtyle-badge--pulse-fast .xtyle-badge__dot {
+	animation: xtyle-badge-pulse 0.9s var(--ease-standard) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.xtyle-badge--pulse-slow .xtyle-badge__dot,
+	.xtyle-badge--pulse-fast .xtyle-badge__dot {
+		animation: none;
+	}
+}
+@keyframes xtyle-badge-pulse {
+	50% { opacity: 0.4; }
+}
+.xtyle-badge__count {
+	font-variant-numeric: tabular-nums;
+	font-weight: var(--weight-semibold);
+}
+.xtyle-badge__label {
+	display: inline-flex;
+	align-items: center;
+}
+.xtyle-badge__sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+.xtyle-badge__remove {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+	flex: none;
+	margin-inline-start: var(--space-1);
+	padding: 0;
+	color: currentColor;
+	background: transparent;
+	border: none;
+	border-radius: var(--radius-full);
+	cursor: pointer;
+	position: relative;
+	isolation: isolate;
+	transition: box-shadow var(--duration-fast) var(--ease-standard);
+}
+.xtyle-badge__remove::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background: transparent;
+	transition: background-color var(--duration-fast) var(--ease-standard);
+	z-index: -1;
+}
+.xtyle-badge__remove:hover::after { background: var(--state-hover); }
+.xtyle-badge__remove:active::after { background: var(--state-press); }
+.xtyle-badge__remove:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-thick) var(--ring);
+}
+.xtyle-badge__remove svg {
+	width: 0.75em;
+	height: 0.75em;
+}
+.xtyle-dot {
+	display: inline-block;
+	width: var(--space-2);
+	height: var(--space-2);
+	flex: none;
+	border-radius: var(--radius-full);
+	background: var(--neutral);
+}
+.xtyle-dot--sm {
+	width: var(--space-1);
+	height: var(--space-1);
+}
+.xtyle-dot--lg {
+	width: var(--space-3);
+	height: var(--space-3);
+}
+${TONES.map((t) => `.xtyle-dot--${t} { background: var(--${t}); }`).join("\n")}
+.xtyle-dot--pulse-slow {
+	animation: xtyle-badge-pulse 1.8s var(--ease-standard) infinite;
+}
+.xtyle-dot--pulse-fast {
+	animation: xtyle-badge-pulse 0.9s var(--ease-standard) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.xtyle-dot--pulse-slow,
+	.xtyle-dot--pulse-fast {
+		animation: none;
+	}
+}
+`.trim();
+//# sourceMappingURL=badge.js.map

package/dist/css/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/css/components/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAC1B,CAAC,CAAC,EAAE,EAAE,CAAC,oCAAoC,CAAC;qBACxB,CAAC;gBACN,CAAC;;EAEf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CACzB,CAAC,CAAC,EAAE,EAAE,CAAC,mCAAmC,CAAC;qBACvB,CAAC;gBACN,CAAC;;EAEf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAC5B,CAAC,CAAC,EAAE,EAAE,CAAC,sCAAsC,CAAC;;gBAE/B,CAAC;uBACM,CAAC;EACtB,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BtB,SAAS;EACT,QAAQ;EACR,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGX,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;;;;;;;CAa7E,CAAC,IAAI,EAAE,CAAC"}

package/dist/css/components/bar.d.ts

@@ -0,0 +1,2 @@
+export declare const barCss: string;
+//# sourceMappingURL=bar.d.ts.map

package/dist/css/components/bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../src/css/components/bar.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,QAoGX,CAAC"}

package/dist/css/components/bar.js

@@ -0,0 +1,102 @@
+export const barCss = `
+[data-bar] { display: block; }
+.xtyle-bar {
+	--bar-height: 320px;
+	display: block;
+	margin: 0;
+	font-family: var(--font-sans);
+	position: relative;
+}
+.xtyle-bar__svg {
+	display: block;
+	width: 100%;
+	height: var(--bar-height, 320px);
+	overflow: visible;
+}
+.xtyle-bar__grid {
+	stroke: var(--line-2);
+	stroke-width: 1;
+}
+.xtyle-bar__axis {
+	stroke: var(--line);
+	stroke-width: 1;
+}
+.xtyle-bar__ytick,
+.xtyle-bar__xtick {
+	fill: var(--fg-3);
+	font-size: var(--text-xs);
+}
+.xtyle-bar__value {
+	fill: var(--fg-2);
+	font-size: var(--text-xs);
+}
+.xtyle-bar__empty {
+	fill: var(--fg-2);
+	font-size: var(--text-sm);
+}
+.xtyle-bar__bar {
+	rx: 2;
+	transition: opacity var(--duration-fast) var(--ease-standard);
+	cursor: default;
+}
+.xtyle-bar--selectable .xtyle-bar__bar { cursor: pointer; }
+.xtyle-bar__bar:focus-visible {
+	outline: var(--border-thick) solid var(--ring);
+	outline-offset: 1px;
+}
+.xtyle-bar--hovering .xtyle-bar__bar:not(.is-active) {
+	opacity: 0.35;
+}
+.xtyle-bar__legend {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-1) var(--space-3);
+	margin-top: var(--space-2);
+	font-size: var(--text-sm);
+	color: var(--fg-1);
+}
+.xtyle-bar__legend-item {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+}
+.xtyle-bar__legend-dot {
+	width: 0.75em;
+	height: 0.75em;
+	border-radius: var(--radius-sm);
+	flex: none;
+}
+.xtyle-bar__tooltip {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	pointer-events: none;
+	transform: translate(-50%, calc(-100% - 8px));
+	padding: var(--space-1) var(--space-2);
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+	color: var(--fg-0);
+	background: var(--surface-overlay);
+	border: var(--border-thin) solid var(--surface-overlay-border);
+	border-radius: var(--radius-md);
+	box-shadow: var(--elevation-3);
+	white-space: nowrap;
+}
+.xtyle-bar__tooltip[hidden] { display: none; }
+.xtyle-bar__tooltip-name { color: var(--fg-2); }
+.xtyle-bar__tooltip-value { font-weight: var(--weight-semibold); }
+.xtyle-bar__a11y {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+`.trim();
+//# sourceMappingURL=bar.js.map

package/dist/css/components/bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.js","sourceRoot":"","sources":["../../../src/css/components/bar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGrB,CAAC,IAAI,EAAE,CAAC"}

package/dist/css/components/base.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The shared base of the component class layer: global accessibility rules every
+ * xtyle app wants, plus `.xtyle-control` — the common input chrome that Field,
+ * Select, and Textarea inherit. Concatenated FIRST in `componentsCss` so the
+ * resets cascade correctly and component modules can rely on `.xtyle-control`.
+ *
+ * The reduced-motion block neutralizes motion at the consumption layer rather
+ * than zeroing the duration/easing token values, so the tokens stay inspectable
+ * and any non-motion consumer is untouched. The forced-colors block pairs every
+ * box-shadow focus ring with a transparent `outline` on `:focus-visible`: shadows
+ * are dropped in forced-colors mode, but a transparent outline becomes a real,
+ * system-colored one — so keyboard focus survives.
+ */
+export declare const baseCss: string;
+//# sourceMappingURL=base.d.ts.map

package/dist/css/components/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../src/css/components/base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,QA+CZ,CAAC"}

package/dist/css/components/base.js

@@ -0,0 +1,62 @@
+/**
+ * The shared base of the component class layer: global accessibility rules every
+ * xtyle app wants, plus `.xtyle-control` — the common input chrome that Field,
+ * Select, and Textarea inherit. Concatenated FIRST in `componentsCss` so the
+ * resets cascade correctly and component modules can rely on `.xtyle-control`.
+ *
+ * The reduced-motion block neutralizes motion at the consumption layer rather
+ * than zeroing the duration/easing token values, so the tokens stay inspectable
+ * and any non-motion consumer is untouched. The forced-colors block pairs every
+ * box-shadow focus ring with a transparent `outline` on `:focus-visible`: shadows
+ * are dropped in forced-colors mode, but a transparent outline becomes a real,
+ * system-colored one — so keyboard focus survives.
+ */
+export const baseCss = `
+@media (prefers-reduced-motion: reduce) {
+	[class^="xtyle-"],
+	[class*=" xtyle-"],
+	[class^="xtyle-"] *,
+	[class*=" xtyle-"] * {
+		transition-duration: 0.01ms !important;
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		scroll-behavior: auto !important;
+	}
+}
+@media (forced-colors: active) {
+	[class^="xtyle-"]:focus-visible,
+	[class*=" xtyle-"]:focus-visible {
+		outline: var(--border-normal) solid Highlight;
+		outline-offset: var(--border-normal);
+	}
+}
+.xtyle-control {
+	box-sizing: border-box;
+	font-family: var(--font-sans);
+	font-size: var(--text-body);
+	line-height: var(--leading-normal);
+	color: var(--fg-0);
+	background: var(--field-bg);
+	border: var(--border-thin) solid var(--field-border);
+	border-radius: var(--radius-md);
+	padding: var(--space-2) var(--space-3);
+	transition:
+		border-color var(--duration-fast) var(--ease-standard),
+		box-shadow var(--duration-fast) var(--ease-standard);
+}
+.xtyle-control::placeholder { color: var(--placeholder); }
+.xtyle-control:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	border-color: var(--accent);
+	box-shadow: 0 0 0 var(--border-normal) var(--ring);
+}
+.xtyle-control:disabled {
+	cursor: not-allowed;
+	color: var(--fg-disabled);
+	background: var(--state-disabled);
+}
+.xtyle-control--invalid {
+	border-color: var(--danger);
+}
+`.trim();
+//# sourceMappingURL=base.js.map

package/dist/css/components/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/css/components/base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CtB,CAAC,IAAI,EAAE,CAAC"}

package/dist/css/components/breadcrumb.d.ts

@@ -0,0 +1,2 @@
+export declare const breadcrumbCss: string;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/css/components/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/css/components/breadcrumb.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,QAmFlB,CAAC"}

package/dist/css/components/breadcrumb.js

@@ -0,0 +1,89 @@
+import { FULL_TONES } from "../../vocab.js";
+const toneRules = FULL_TONES.map((t) => `.xtyle-breadcrumb--${t} .xtyle-breadcrumb__link {
+	color: var(--${t}-vivid);
+}`).join("\n");
+export const breadcrumbCss = `
+.xtyle-breadcrumb {
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+	color: var(--fg-2);
+}
+.xtyle-breadcrumb__list {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-1);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.xtyle-breadcrumb__item {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+}
+.xtyle-breadcrumb__link {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	color: var(--accent-vivid);
+	text-decoration: none;
+	border-radius: var(--radius-sm);
+	padding: var(--space-0) var(--space-1);
+	transition:
+		color var(--duration-fast) var(--ease-standard),
+		box-shadow var(--duration-fast) var(--ease-standard);
+}
+button.xtyle-breadcrumb__link {
+	background: none;
+	border: 0;
+	margin: 0;
+	font: inherit;
+	cursor: pointer;
+}
+${toneRules}
+.xtyle-breadcrumb__link:hover {
+	text-decoration: underline;
+}
+.xtyle-breadcrumb__link:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-thick) var(--ring);
+}
+.xtyle-breadcrumb__current {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding: var(--space-0) var(--space-1);
+	color: var(--fg-0);
+	font-weight: var(--weight-medium);
+}
+.xtyle-breadcrumb__separator {
+	display: inline-flex;
+	align-items: center;
+	color: var(--fg-3);
+	user-select: none;
+}
+.xtyle-breadcrumb__separator svg {
+	width: 1em;
+	height: 1em;
+}
+.xtyle-breadcrumb--sm {
+	font-size: var(--text-xs);
+}
+.xtyle-breadcrumb--lg {
+	font-size: var(--text-body);
+}
+::slotted(.xtyle-breadcrumb__item) {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+}
+::slotted(.xtyle-breadcrumb__separator) {
+	display: inline-flex;
+	align-items: center;
+	color: var(--fg-3);
+	user-select: none;
+}
+`.trim();
+//# sourceMappingURL=breadcrumb.js.map

package/dist/css/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/css/components/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAC/B,CAAC,CAAC,EAAE,EAAE,CAAC,sBAAsB,CAAC;gBACf,CAAC;EACf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwC3B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAC,IAAI,EAAE,CAAC"}

package/dist/css/components/button.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonCss: string;
+//# sourceMappingURL=button.d.ts.map

package/dist/css/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/css/components/button.ts"],"names":[],"mappings":"AAwCA,eAAO,MAAM,SAAS,QA2Id,CAAC"}

package/dist/css/components/button.js

@@ -0,0 +1,165 @@
+import { FULL_TONES as TONES } from "../../vocab.js";
+const solidRules = TONES.map((t) => `.xtyle-button--solid.xtyle-button--${t} {
+	background: var(--${t});
+	color: var(--${t}-fg);
+	border-color: transparent;
+}`).join("\n");
+const outlineRules = TONES.map((t) => `.xtyle-button--outline.xtyle-button--${t} {
+	background: transparent;
+	color: var(--${t}-text);
+	border-color: var(--${t});
+}`).join("\n");
+const ghostRules = TONES.map((t) => `.xtyle-button--ghost.xtyle-button--${t} {
+	background: transparent;
+	color: var(--${t}-text);
+	border-color: transparent;
+}`).join("\n");
+const subtleRules = TONES.map((t) => `.xtyle-button--subtle.xtyle-button--${t} {
+	background: var(--${t}-bg);
+	color: var(--${t}-text);
+	border-color: transparent;
+}`).join("\n");
+const linkRules = TONES.map((t) => `.xtyle-button--link.xtyle-button--${t} {
+	color: var(--${t}-text);
+}`).join("\n");
+export const buttonCss = `
+[data-button] { display: contents; }
+.xtyle-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--space-2);
+	font-family: var(--font-sans);
+	font-size: var(--text-body);
+	font-weight: var(--weight-medium);
+	line-height: var(--leading-tight);
+	text-decoration: none;
+	white-space: nowrap;
+	border: var(--border-thin) solid transparent;
+	border-radius: var(--radius-md);
+	padding: var(--space-2) var(--space-4);
+	cursor: pointer;
+	position: relative;
+	isolation: isolate;
+	transition:
+		background-color var(--duration-fast) var(--ease-standard),
+		border-color var(--duration-fast) var(--ease-standard),
+		color var(--duration-fast) var(--ease-standard),
+		box-shadow var(--duration-fast) var(--ease-standard);
+}
+.xtyle-button::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background: transparent;
+	transition: background-color var(--duration-fast) var(--ease-standard);
+	z-index: -1;
+}
+.xtyle-button--xs {
+	font-size: var(--text-xs);
+	gap: var(--space-1);
+	padding: var(--space-0) var(--space-2);
+}
+.xtyle-button--sm {
+	font-size: var(--text-sm);
+	gap: var(--space-1);
+	padding: var(--space-1) var(--space-3);
+}
+.xtyle-button--lg {
+	font-size: var(--text-lg);
+	gap: var(--space-3);
+	padding: var(--space-3) var(--space-5);
+}
+${solidRules}
+${outlineRules}
+${ghostRules}
+${subtleRules}
+${linkRules}
+.xtyle-button--link {
+	background: transparent;
+	border-color: transparent;
+	padding: 0;
+	border-radius: var(--radius-sm);
+}
+.xtyle-button--link:hover {
+	text-decoration: underline;
+}
+.xtyle-button--link:hover::after,
+.xtyle-button--link:active::after {
+	background: transparent;
+}
+.xtyle-button:hover::after { background: var(--state-hover); }
+.xtyle-button:active::after { background: var(--state-press); }
+.xtyle-button[aria-pressed="true"]::after,
+.xtyle-button[aria-pressed="true"]:hover::after { background: var(--state-press); }
+.xtyle-button--link[aria-pressed="true"]::after { background: transparent; }
+.xtyle-button[aria-selected="true"]::after,
+.xtyle-button[aria-selected="true"]:hover::after { background: var(--state-selected); }
+.xtyle-button--link[aria-selected="true"]::after { background: transparent; }
+.xtyle-button:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-thick) var(--ring);
+}
+.xtyle-button--block {
+	display: flex;
+	width: 100%;
+}
+.xtyle-button--align-start { justify-content: flex-start; }
+.xtyle-button--align-end { justify-content: flex-end; }
+.xtyle-button--icon {
+	padding: var(--space-2);
+	aspect-ratio: 1;
+	/* Zero the inter-slot gap so the lone icon centers — the empty label/end slots
+	   would otherwise keep their gaps and push the icon off to one side. */
+	gap: 0;
+}
+.xtyle-button--icon.xtyle-button--xs { padding: var(--space-0); }
+.xtyle-button--icon.xtyle-button--sm { padding: var(--space-1); }
+.xtyle-button--icon.xtyle-button--lg { padding: var(--space-3); }
+.xtyle-button__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+}
+.xtyle-button__label {
+	display: inline-flex;
+	align-items: center;
+}
+.xtyle-button__spinner {
+	display: inline-flex;
+	width: 1em;
+	height: 1em;
+	flex: none;
+	border: var(--border-normal) solid currentColor;
+	border-top-color: transparent;
+	border-radius: var(--radius-full);
+	animation: xtyle-button-spin var(--duration-slow) linear infinite;
+}
+@keyframes xtyle-button-spin {
+	to { transform: rotate(360deg); }
+}
+.xtyle-button--loading {
+	cursor: progress;
+}
+.xtyle-button--loading .xtyle-button__label,
+.xtyle-button--loading .xtyle-button__icon {
+	opacity: 0;
+}
+.xtyle-button--loading .xtyle-button__spinner {
+	position: absolute;
+	inset: 0;
+	margin: auto;
+}
+.xtyle-button:disabled,
+.xtyle-button[aria-disabled="true"] {
+	cursor: not-allowed;
+	color: var(--fg-disabled);
+	background: var(--state-disabled);
+	border-color: transparent;
+}
+.xtyle-button:disabled::after,
+.xtyle-button[aria-disabled="true"]::after { background: transparent; }
+`.trim();
+//# sourceMappingURL=button.js.map

package/dist/css/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/css/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAC3B,CAAC,CAAC,EAAE,EAAE,CAAC,sCAAsC,CAAC;qBAC1B,CAAC;gBACN,CAAC;;EAEf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAC7B,CAAC,CAAC,EAAE,EAAE,CAAC,wCAAwC,CAAC;;gBAEjC,CAAC;uBACM,CAAC;EACtB,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAC3B,CAAC,CAAC,EAAE,EAAE,CAAC,sCAAsC,CAAC;;gBAE/B,CAAC;;EAEf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAC5B,CAAC,CAAC,EAAE,EAAE,CAAC,uCAAuC,CAAC;qBAC3B,CAAC;gBACN,CAAC;;EAEf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAC1B,CAAC,CAAC,EAAE,EAAE,CAAC,qCAAqC,CAAC;gBAC9B,CAAC;EACf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDvB,UAAU;EACV,YAAY;EACZ,UAAU;EACV,WAAW;EACX,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFV,CAAC,IAAI,EAAE,CAAC"}

package/dist/css/components/card-link.d.ts

@@ -0,0 +1,2 @@
+export declare const cardLinkCss: string;
+//# sourceMappingURL=card-link.d.ts.map

package/dist/css/components/card-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-link.d.ts","sourceRoot":"","sources":["../../../src/css/components/card-link.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,QAShB,CAAC"}

package/dist/css/components/card-link.js

@@ -0,0 +1,11 @@
+export const cardLinkCss = `
+[data-card-link] { display: contents; }
+.xtyle-card-link {
+	text-decoration: none;
+}
+.xtyle-card-link:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-thick) var(--ring);
+}
+`.trim();
+//# sourceMappingURL=card-link.js.map

package/dist/css/components/card-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-link.js","sourceRoot":"","sources":["../../../src/css/components/card-link.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;CAS1B,CAAC,IAAI,EAAE,CAAC"}

package/dist/css/components/card.d.ts

@@ -0,0 +1,2 @@
+export declare const cardCss: string;
+//# sourceMappingURL=card.d.ts.map

package/dist/css/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/css/components/card.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,QAiFZ,CAAC"}