@xtyle/core 0.5.0

package/dist/css/components/heading.js

@@ -0,0 +1,37 @@
+import { FULL_TONES } from "../../vocab.js";
+const LARGE_SIZES = ["lg", "xl", "2xl", "3xl", "4xl", "5xl"];
+const EMPHASIS = [
+    ["muted", "--fg-2"],
+    ["subtle", "--fg-3"],
+];
+const sizeRules = LARGE_SIZES.map((s) => `.xtyle-heading--${s} { font-size: var(--text-${s}); }`).join("\n");
+const emphasisRules = EMPHASIS.map(([name, token]) => `.xtyle-heading--${name} { color: var(${token}); }`).join("\n");
+const toneRules = FULL_TONES.map((t) => `.xtyle-heading--${t} { color: var(--${t}-vivid); }`).join("\n");
+export const headingCss = `
+[data-heading] { display: contents; }
+.xtyle-heading {
+	margin: 0;
+	font-family: var(--font-display);
+	font-size: var(--text-body);
+	font-weight: var(--weight-bold);
+	line-height: var(--leading-tight);
+	color: var(--fg-0);
+	text-wrap: balance;
+}
+.xtyle-heading--xs {
+	font-size: var(--text-xs);
+	font-weight: var(--weight-semibold);
+	line-height: var(--leading-normal);
+}
+.xtyle-heading--sm {
+	font-size: var(--text-sm);
+	font-weight: var(--weight-semibold);
+}
+.xtyle-heading--md {
+	font-size: var(--text-body);
+}
+${sizeRules}
+${emphasisRules}
+${toneRules}
+`.trim();
+//# sourceMappingURL=heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../src/css/components/heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAC;AACtE,MAAM,QAAQ,GAAG;IAChB,CAAC,OAAO,EAAE,QAAQ,CAAC;IACnB,CAAC,QAAQ,EAAE,QAAQ,CAAC;CACX,CAAC;AAEX,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAChC,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,MAAM,CAC9D,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,CACjC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,mBAAmB,IAAI,iBAAiB,KAAK,MAAM,CACtE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAC/B,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,YAAY,CAC3D,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,SAAS;EACT,aAAa;EACb,SAAS;CACV,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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

package/dist/css/components/heatmap.js

@@ -0,0 +1,111 @@
+export const heatmapCss = `
+[data-heatmap] { display: block; }
+.xtyle-heatmap {
+	display: block;
+	margin: 0;
+	font-family: var(--font-sans);
+	position: relative;
+}
+.xtyle-heatmap__svg {
+	display: block;
+	width: 100%;
+	height: auto;
+	overflow: visible;
+}
+.xtyle-heatmap__cell {
+	stroke: var(--bg-0);
+	stroke-width: 1;
+	transition: stroke var(--duration-fast) var(--ease-standard);
+	cursor: default;
+}
+.xtyle-heatmap__cell:focus-visible {
+	outline: var(--border-thick) solid var(--ring);
+	outline-offset: 1px;
+}
+.xtyle-heatmap--selectable .xtyle-heatmap__cell { cursor: pointer; }
+.xtyle-heatmap--hovering .xtyle-heatmap__cell.is-active { stroke: var(--fg-0); }
+.xtyle-heatmap__cell--current {
+	stroke: var(--accent);
+	stroke-width: 2.5;
+	paint-order: stroke;
+}
+.xtyle-heatmap--now-success .xtyle-heatmap__cell--current { stroke: var(--success); }
+.xtyle-heatmap--now-danger .xtyle-heatmap__cell--current { stroke: var(--danger); }
+.xtyle-heatmap--now-warn .xtyle-heatmap__cell--current { stroke: var(--warn); }
+.xtyle-heatmap--now-info .xtyle-heatmap__cell--current { stroke: var(--info); }
+.xtyle-heatmap--now-neutral .xtyle-heatmap__cell--current { stroke: var(--neutral); }
+.xtyle-heatmap__cell--current.xtyle-heatmap__cell--pulse {
+	animation: xtyle-heatmap-now 1.8s var(--ease-standard) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.xtyle-heatmap__cell--current.xtyle-heatmap__cell--pulse { animation: none; }
+}
+@keyframes xtyle-heatmap-now { 50% { stroke-opacity: 0.35; } }
+.xtyle-heatmap__rowlabel,
+.xtyle-heatmap__collabel {
+	fill: var(--fg-3);
+	font-size: var(--text-xs);
+}
+.xtyle-heatmap__value {
+	fill: var(--fg-0);
+	font-size: var(--text-xs);
+	pointer-events: none;
+}
+.xtyle-heatmap__empty {
+	padding: var(--space-2);
+	font-size: var(--text-sm);
+	color: var(--fg-2);
+	text-align: center;
+}
+.xtyle-heatmap__scale {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-2);
+	margin-top: var(--space-2);
+	font-size: var(--text-xs);
+	color: var(--fg-3);
+}
+.xtyle-heatmap__scale-ramp {
+	display: inline-flex;
+	gap: 2px;
+}
+.xtyle-heatmap__scale-swatch {
+	width: 0.9rem;
+	height: 0.9rem;
+	border-radius: 2px;
+	border: var(--border-thin) solid var(--bg-0);
+}
+.xtyle-heatmap__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-heatmap__tooltip[hidden] { display: none; }
+.xtyle-heatmap__tooltip-name { color: var(--fg-2); }
+.xtyle-heatmap__tooltip-value { font-weight: var(--weight-semibold); }
+.xtyle-heatmap__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=heatmap.js.map

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

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

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

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

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

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

package/dist/css/components/hero.js

@@ -0,0 +1,30 @@
+export const heroCss = `
+xtyle-hero {
+	display: grid;
+	gap: var(--space-5);
+	justify-items: center;
+	align-content: center;
+	text-align: center;
+	padding: var(--space-8) var(--space-6);
+}
+xtyle-hero[align="start"] {
+	justify-items: start;
+	text-align: start;
+}
+xtyle-hero:not([split]) > * {
+	max-width: 62ch;
+}
+xtyle-hero[split] {
+	grid-template-columns: 1fr 1fr;
+	gap: var(--space-8);
+	align-items: center;
+	justify-items: stretch;
+	text-align: start;
+}
+@media (max-width: 48rem) {
+	xtyle-hero[split] {
+		grid-template-columns: 1fr;
+	}
+}
+`.trim();
+//# sourceMappingURL=hero.js.map

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

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

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

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

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

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

package/dist/css/components/icon.js

@@ -0,0 +1,24 @@
+import { FULL_TONES as TONES } from "../../vocab.js";
+const iconTones = TONES.map((t) => `.xtyle-icon--${t} { color: var(--${t}); }`).join("\n");
+export const iconCss = `
+[data-icon] { display: contents; }
+.xtyle-icon {
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	vertical-align: -0.125em;
+	flex: none;
+}
+.xtyle-icon--sm { font-size: 0.85em; }
+.xtyle-icon--lg { font-size: 1.5em; }
+.xtyle-icon--xl { font-size: 2em; }
+.xtyle-icon--spin { animation: xtyle-icon-spin 1s linear infinite; transform-origin: center; }
+@keyframes xtyle-icon-spin {
+	to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+	.xtyle-icon--spin { animation: none; }
+}
+${iconTones}
+`.trim();
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/css/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE3F,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;EAmBrB,SAAS;CACV,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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

package/dist/css/components/image.js

@@ -0,0 +1,118 @@
+export const imageCss = `
+[data-image] { display: contents; }
+.xtyle-image {
+	display: block;
+	margin: 0;
+}
+.xtyle-image__frame {
+	position: relative;
+	display: block;
+	width: 100%;
+	overflow: hidden;
+	border-radius: var(--radius-md);
+	background: var(--bg-2);
+}
+.xtyle-image--radius-none .xtyle-image__frame { border-radius: 0; }
+.xtyle-image--radius-sm .xtyle-image__frame { border-radius: var(--radius-sm); }
+.xtyle-image--radius-lg .xtyle-image__frame { border-radius: var(--radius-lg); }
+.xtyle-image__img {
+	display: block;
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+	opacity: 1;
+	transition: opacity var(--duration-slow) var(--ease-standard);
+}
+.xtyle-image__frame[style*="aspect-ratio"] .xtyle-image__img {
+	position: absolute;
+	inset: 0;
+	height: 100%;
+}
+.xtyle-image--contain .xtyle-image__img { object-fit: contain; }
+.xtyle-image__placeholder {
+	display: none;
+	position: absolute;
+	inset: 0;
+	background-color: var(--bg-2);
+	background-image: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
+	background-size: 200% 100%;
+	background-repeat: no-repeat;
+	animation: xtyle-image-shimmer var(--duration-slow) var(--ease-standard) infinite;
+}
+.xtyle-image__frame[data-loading] .xtyle-image__placeholder { display: block; }
+.xtyle-image__frame[data-loading] .xtyle-image__img { opacity: 0; }
+.xtyle-image__frame[data-error] .xtyle-image__placeholder { display: block; animation: none; background-image: none; }
+.xtyle-image__frame[data-error] .xtyle-image__img { opacity: 0; }
+.xtyle-image__error {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--fg-2);
+}
+.xtyle-image__frame[role="button"] { cursor: zoom-in; }
+.xtyle-image__frame[role="button"]:focus-visible {
+	outline: var(--border-thick) solid var(--ring);
+	outline-offset: 2px;
+}
+.xtyle-image__caption {
+	margin-top: var(--space-2);
+	color: var(--fg-2);
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+}
+.xtyle-image__lightbox {
+	padding: 0;
+	border: 0;
+	background: transparent;
+	/* A definite viewport-relative size, not a max: a shrink-to-fit modal collapses to 0 around an
+	   image with only an intrinsic ratio and no intrinsic size (an SVG with a viewBox but no
+	   width/height), so the frame fills the capped area and the image is contained within it. */
+	width: 92vw;
+	height: 92vh;
+	overflow: visible;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.xtyle-image__lightbox::backdrop { background: var(--scrim); }
+.xtyle-image__full {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	/* The image is letterboxed inside the full-size frame, so a click on the empty area falls
+	   through to the dialog (which closes on a self-click), keeping click-outside-to-dismiss. */
+	pointer-events: none;
+}
+.xtyle-image__close {
+	position: absolute;
+	top: var(--space-2);
+	right: var(--space-2);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--space-6);
+	height: var(--space-6);
+	padding: 0;
+	border: 0;
+	border-radius: var(--radius-full);
+	background: var(--bg-1);
+	color: var(--fg-1);
+	cursor: pointer;
+}
+.xtyle-image__close:focus-visible {
+	outline: var(--border-thick) solid var(--ring);
+	outline-offset: 2px;
+}
+@keyframes xtyle-image-shimmer {
+	from { background-position: 100% 0; }
+	to { background-position: -100% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+	.xtyle-image__placeholder { animation: none; }
+	.xtyle-image__img { transition: none; }
+}
+`.trim();
+//# sourceMappingURL=image.js.map

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

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

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

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

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

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

package/dist/css/components/kbd.js

@@ -0,0 +1,30 @@
+import { FULL_TONES as TONES } from "../../vocab.js";
+const kbdTones = TONES.map((t) => `.xtyle-kbd--${t} {
+	background-color: var(--${t}-bg);
+	border-color: var(--${t});
+	color: var(--${t}-text);
+}`).join("\n");
+export const kbdCss = `
+[data-kbd] { display: contents; }
+.xtyle-kbd {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 1.6em;
+	padding: 0.15em 0.45em;
+	border: var(--border-thin) solid var(--line-2);
+	border-bottom-width: var(--border-thick);
+	border-radius: var(--radius-sm);
+	background-color: var(--bg-2);
+	color: var(--fg-1);
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	font-weight: var(--weight-medium);
+	line-height: var(--leading-tight);
+	white-space: nowrap;
+}
+.xtyle-kbd--sm { font-size: var(--text-xs); }
+.xtyle-kbd--lg { font-size: var(--text-lg); }
+${kbdTones}
+`.trim();
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sourceRoot":"","sources":["../../../src/css/components/kbd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CACzB,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC;2BACG,CAAC;uBACL,CAAC;gBACR,CAAC;EACf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;EAqBpB,QAAQ;CACT,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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

package/dist/css/components/link.js

@@ -0,0 +1,61 @@
+export const linkCss = `
+[data-link] { display: contents; }
+.xtyle-link {
+	display: inline;
+	font-family: var(--font-sans);
+	color: var(--link);
+	text-decoration: underline;
+	text-decoration-thickness: var(--border-thin);
+	text-underline-offset: var(--space-1);
+	border-radius: var(--radius-sm);
+	transition:
+		color var(--duration-fast) var(--ease-standard),
+		text-decoration-color var(--duration-fast) var(--ease-standard);
+}
+.xtyle-link:hover {
+	color: var(--link-hover);
+}
+.xtyle-link:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-normal) var(--ring);
+}
+.xtyle-link--muted {
+	color: var(--fg-2);
+	text-decoration-color: transparent;
+}
+.xtyle-link--muted:hover {
+	color: var(--link);
+	text-decoration-color: currentColor;
+}
+.xtyle-link--quiet {
+	color: var(--fg-3);
+	text-decoration: none;
+}
+.xtyle-link--quiet:hover {
+	color: var(--fg-2);
+	text-decoration: underline;
+	text-decoration-thickness: var(--border-thin);
+	text-underline-offset: var(--space-1);
+}
+.xtyle-link__external-icon {
+	display: inline-block;
+	width: 0.85em;
+	height: 0.85em;
+	margin-inline-start: var(--space-1);
+	vertical-align: baseline;
+	flex: none;
+}
+.xtyle-link__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;
+}
+`.trim();
+//# sourceMappingURL=link.js.map

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

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

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

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

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

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

package/dist/css/components/menu.js

@@ -0,0 +1,114 @@
+export const menuCss = `
+.xtyle-menu {
+	display: inline-block;
+}
+.xtyle-menu__trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	color: var(--fg-1);
+	background: var(--bg-1);
+	border: var(--border-thin) solid var(--line);
+	border-radius: var(--radius-md);
+	padding-block: var(--space-1);
+	padding-inline: var(--space-3);
+	cursor: pointer;
+	transition:
+		background-color var(--duration-fast) var(--ease-standard),
+		color var(--duration-fast) var(--ease-standard);
+}
+.xtyle-menu__trigger:hover {
+	background: var(--state-hover);
+	color: var(--fg-0);
+}
+.xtyle-menu__trigger:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-thick) var(--ring);
+}
+.xtyle-menu__trigger[aria-expanded="true"] {
+	background: var(--state-selected);
+	color: var(--fg-0);
+}
+.xtyle-menu__popup {
+	position: fixed;
+	margin: 0;
+	min-width: 11rem;
+	padding: var(--space-1);
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+	background: var(--surface-overlay);
+	border: var(--border-thin) solid var(--surface-overlay-border);
+	border-radius: var(--radius-md);
+	box-shadow: var(--elevation-3);
+}
+.xtyle-menu__popup:not(:popover-open) {
+	display: none;
+}
+.xtyle-menu__item {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: var(--space-3);
+	padding-block: var(--space-1);
+	padding-inline: var(--space-3);
+	font: inherit;
+	text-align: start;
+	color: var(--fg-1);
+	background: transparent;
+	border: none;
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+	transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.xtyle-menu__item-label {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.xtyle-menu__item-hint {
+	flex: none;
+	font-family: var(--font-mono);
+	font-size: var(--text-xs);
+	color: inherit;
+	opacity: 0.65;
+}
+.xtyle-menu__group {
+	display: contents;
+}
+.xtyle-menu__heading {
+	padding-block: var(--space-1);
+	padding-inline: var(--space-3);
+	font-size: var(--text-xs);
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--fg-2);
+}
+.xtyle-menu__item:hover,
+.xtyle-menu__item:focus-visible {
+	outline: none;
+	background: var(--accent-bg);
+	color: var(--accent-text);
+}
+.xtyle-menu__item[data-intent="danger"]:not([aria-disabled="true"]) {
+	color: var(--danger-text);
+}
+.xtyle-menu__item[data-intent="danger"]:not([aria-disabled="true"]):hover,
+.xtyle-menu__item[data-intent="danger"]:not([aria-disabled="true"]):focus-visible {
+	background: var(--danger-bg);
+}
+.xtyle-menu__item[aria-disabled="true"] {
+	color: var(--fg-disabled);
+	cursor: not-allowed;
+	background: transparent;
+}
+.xtyle-menu__separator {
+	height: var(--border-thin);
+	margin-block: var(--space-1);
+	margin-inline: var(--space-2);
+	background: var(--line);
+}
+`.trim();
+//# sourceMappingURL=menu.js.map

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

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

package/dist/css/components/number-input.d.ts

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

package/dist/css/components/number-input.d.ts.map

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