@xtyle/core 0.5.0

package/dist/coverage.d.ts

@@ -0,0 +1,20 @@
+import type { CoverageResult, TokenName, TokenRegister } from "./types.js";
+import type { ComponentManifest } from "./manifest/types.js";
+export declare function coverage(consumed: TokenName[], produced: TokenRegister): CoverageResult;
+export declare function coverage(args: {
+    consumed: TokenName[];
+    produced: TokenRegister;
+}): CoverageResult;
+export declare function coverComponent(manifest: ComponentManifest, produced: TokenRegister): CoverageResult;
+type ComponentRef = ComponentManifest | string;
+type ComponentCoverage = {
+    id: string;
+    covered: boolean;
+    missing: string[];
+};
+export declare function coverComponents(produced: TokenRegister, subset?: ComponentRef[]): ComponentCoverage[];
+export declare function coverComponents(components: ComponentRef[], opts: {
+    produced: TokenRegister;
+}): ComponentCoverage[];
+export {};
+//# sourceMappingURL=coverage.d.ts.map

package/dist/coverage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coverage.d.ts","sourceRoot":"","sources":["../src/coverage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG7D,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,aAAa,GAAG,cAAc,CAAC;AACzF,wBAAgB,QAAQ,CAAC,IAAI,EAAE;IAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,GAAG,cAAc,CAAC;AAYnG,wBAAgB,cAAc,CAC7B,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EAAE,aAAa,GACrB,cAAc,CAEhB;AAED,KAAK,YAAY,GAAG,iBAAiB,GAAG,MAAM,CAAC;AAC/C,KAAK,iBAAiB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAS7E,wBAAgB,eAAe,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,iBAAiB,EAAE,CAAC;AACvG,wBAAgB,eAAe,CAC9B,UAAU,EAAE,YAAY,EAAE,EAC1B,IAAI,EAAE;IAAE,QAAQ,EAAE,aAAa,CAAA;CAAE,GAC/B,iBAAiB,EAAE,CAAC"}

package/dist/coverage.js

@@ -0,0 +1,37 @@
+import { getComponent, listComponents } from "./manifest/registry.js";
+export function coverage(consumedOrArgs, produced) {
+    const consumed = Array.isArray(consumedOrArgs) ? consumedOrArgs : consumedOrArgs.consumed;
+    const register = Array.isArray(consumedOrArgs) ? produced : consumedOrArgs.produced;
+    const have = new Set(Object.keys(register).map(normalize));
+    const missing = consumed.map(normalize).filter((name) => !have.has(name));
+    return { covered: missing.length === 0, missing };
+}
+export function coverComponent(manifest, produced) {
+    return coverage(manifest.consumedTokens, produced);
+}
+function resolveComponent(ref) {
+    if (typeof ref !== "string")
+        return ref;
+    const manifest = getComponent(ref);
+    if (!manifest)
+        throw new Error(`coverComponents: unknown component id "${ref}"`);
+    return manifest;
+}
+export function coverComponents(producedOrComponents, subsetOrOpts) {
+    const componentsFirst = Array.isArray(producedOrComponents);
+    const produced = componentsFirst
+        ? subsetOrOpts.produced
+        : producedOrComponents;
+    const refs = componentsFirst
+        ? producedOrComponents
+        : subsetOrOpts;
+    const manifests = refs ? refs.map(resolveComponent) : listComponents();
+    return manifests.map((manifest) => {
+        const result = coverComponent(manifest, produced);
+        return { id: manifest.id, covered: result.covered, missing: result.missing };
+    });
+}
+function normalize(name) {
+    return name.startsWith("--") ? name : `--${name}`;
+}
+//# sourceMappingURL=coverage.js.map

package/dist/coverage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coverage.js","sourceRoot":"","sources":["../src/coverage.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,UAAU,QAAQ,CACvB,cAAgF,EAChF,QAAwB;IAExB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC;IAC1F,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAE,QAA0B,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC;IACvG,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1E,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,cAAc,CAC7B,QAA2B,EAC3B,QAAuB;IAEvB,OAAO,QAAQ,CAAC,QAAQ,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpD,CAAC;AAKD,SAAS,gBAAgB,CAAC,GAAiB;IAC1C,IAAI,OAAO,GAAG,KAAK,QAAQ;QAAE,OAAO,GAAG,CAAC;IACxC,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ;QAAE,MAAM,IAAI,KAAK,CAAC,0CAA0C,GAAG,GAAG,CAAC,CAAC;IACjF,OAAO,QAAQ,CAAC;AACjB,CAAC;AAOD,MAAM,UAAU,eAAe,CAC9B,oBAAoD,EACpD,YAA2D;IAE3D,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,eAAe;QAC/B,CAAC,CAAE,YAA4C,CAAC,QAAQ;QACxD,CAAC,CAAC,oBAAoB,CAAC;IACxB,MAAM,IAAI,GAAG,eAAe;QAC3B,CAAC,CAAC,oBAAoB;QACtB,CAAC,CAAE,YAA2C,CAAC;IAChD,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;IACvE,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QACjC,MAAM,MAAM,GAAG,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAClD,OAAO,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;IAC9E,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,IAAe;IACjC,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;AACnD,CAAC"}

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

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

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

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

package/dist/css/components/accordion.js

@@ -0,0 +1,98 @@
+export const accordionCss = `
+.xtyle-accordion {
+	display: flex;
+	flex-direction: column;
+	font-family: var(--font-sans);
+	color: var(--fg-0);
+	background: var(--bg-1);
+	border: var(--border-thin) solid var(--line);
+	border-radius: var(--radius-md);
+	overflow: hidden;
+}
+.xtyle-accordion__item + .xtyle-accordion__item {
+	border-top: var(--border-thin) solid var(--line);
+}
+.xtyle-accordion__heading {
+	margin: 0;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+}
+.xtyle-accordion__trigger {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+	width: 100%;
+	font-family: inherit;
+	font-size: var(--text-body);
+	font-weight: var(--weight-medium);
+	line-height: var(--leading-tight);
+	text-align: start;
+	color: var(--fg-0);
+	background: transparent;
+	border: none;
+	padding: var(--space-3) var(--space-4);
+	cursor: pointer;
+	position: relative;
+	isolation: isolate;
+	transition: color var(--duration-fast) var(--ease-standard);
+}
+.xtyle-accordion__trigger::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: transparent;
+	transition: background-color var(--duration-fast) var(--ease-standard);
+	z-index: -1;
+}
+.xtyle-accordion__trigger:hover::after { background: var(--state-hover); }
+.xtyle-accordion__trigger:active::after { background: var(--state-press); }
+.xtyle-accordion__trigger:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: inset 0 0 0 var(--border-thick) var(--ring);
+}
+.xtyle-accordion__trigger:disabled,
+.xtyle-accordion__trigger[aria-disabled="true"] {
+	cursor: not-allowed;
+	color: var(--fg-disabled);
+}
+.xtyle-accordion__trigger:disabled::after,
+.xtyle-accordion__trigger[aria-disabled="true"]::after { background: transparent; }
+.xtyle-accordion__chevron {
+	width: 1em;
+	height: 1em;
+	flex: none;
+	color: var(--fg-2);
+	transition: transform var(--duration-fast) var(--ease-standard);
+}
+.xtyle-accordion__trigger[aria-expanded="true"] .xtyle-accordion__chevron {
+	transform: rotate(180deg);
+}
+.xtyle-accordion__panel {
+	color: var(--fg-1);
+}
+.xtyle-accordion__panel[hidden] { display: none; }
+.xtyle-accordion__content {
+	padding: var(--space-1) var(--space-4) var(--space-4);
+	font-size: var(--text-body);
+	line-height: var(--leading-normal);
+}
+.xtyle-accordion--sm .xtyle-accordion__trigger {
+	font-size: var(--text-sm);
+	padding: var(--space-2) var(--space-3);
+}
+.xtyle-accordion--sm .xtyle-accordion__content {
+	padding: var(--space-1) var(--space-3) var(--space-3);
+	font-size: var(--text-sm);
+}
+.xtyle-accordion--lg .xtyle-accordion__trigger {
+	font-size: var(--text-lg);
+	padding: var(--space-4) var(--space-5);
+}
+.xtyle-accordion--lg .xtyle-accordion__content {
+	padding: var(--space-2) var(--space-5) var(--space-5);
+	font-size: var(--text-lg);
+}
+`.trim();
+//# sourceMappingURL=accordion.js.map

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

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

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

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

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

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

package/dist/css/components/alert.js

@@ -0,0 +1,98 @@
+import { FULL_TONES as TONES } from "../../vocab.js";
+const softRules = TONES.map((t) => `.xtyle-alert--soft.xtyle-alert--${t} {
+	background: var(--${t}-bg);
+	color: var(--${t}-text);
+	border-color: var(--${t});
+}
+.xtyle-alert--soft.xtyle-alert--${t} .xtyle-alert__icon { color: var(--${t}); }`).join("\n");
+const solidRules = TONES.map((t) => `.xtyle-alert--solid.xtyle-alert--${t} {
+	background: var(--${t});
+	color: var(--${t}-fg);
+	border-color: transparent;
+}
+.xtyle-alert--solid.xtyle-alert--${t} .xtyle-alert__title { color: var(--${t}-fg); }
+.xtyle-alert--solid.xtyle-alert--${t} .xtyle-alert__icon { color: var(--${t}-fg); }`).join("\n");
+export const alertCss = `
+.xtyle-alert {
+	display: flex;
+	gap: var(--space-3);
+	font-family: var(--font-sans);
+	font-size: var(--text-body);
+	line-height: var(--leading-normal);
+	border: var(--border-thin) solid transparent;
+	border-radius: var(--radius-md);
+	padding: var(--space-3) var(--space-4);
+}
+${softRules}
+${solidRules}
+.xtyle-alert__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: 1em;
+	height: 1em;
+	font-size: var(--text-lg);
+	margin-top: var(--space-0);
+}
+.xtyle-alert--noicon .xtyle-alert__icon { display: none; }
+:host(:has([slot="icon"])) .xtyle-alert__icon { display: inline-flex; }
+.xtyle-alert__body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	min-width: 0;
+	flex: 1;
+}
+.xtyle-alert__title {
+	display: block;
+	font-weight: var(--weight-semibold);
+	font-size: var(--text-lg);
+	line-height: var(--leading-tight);
+	color: var(--fg-0);
+}
+.xtyle-alert__message { display: block; }
+.xtyle-alert__actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	margin-top: var(--space-1);
+}
+.xtyle-alert__dismiss {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: 1em;
+	height: 1em;
+	font-size: var(--text-lg);
+	padding: var(--space-0);
+	margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) auto auto;
+	color: currentColor;
+	background: transparent;
+	border: var(--border-thin) solid transparent;
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+	position: relative;
+	isolation: isolate;
+	transition:
+		background-color var(--duration-fast) var(--ease-standard),
+		box-shadow var(--duration-fast) var(--ease-standard);
+}
+.xtyle-alert__dismiss::after {
+	content: "";
+	position: absolute;
+	inset: calc(-1 * var(--space-1));
+	border-radius: inherit;
+	background: transparent;
+	transition: background-color var(--duration-fast) var(--ease-standard);
+	z-index: -1;
+}
+.xtyle-alert__dismiss:hover::after { background: var(--state-hover); }
+.xtyle-alert__dismiss:active::after { background: var(--state-press); }
+.xtyle-alert__dismiss:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-thick) var(--ring);
+}
+`.trim();
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/css/components/alert.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,mCAAmC,CAAC;qBACvB,CAAC;gBACN,CAAC;uBACM,CAAC;;kCAEU,CAAC,sCAAsC,CAAC,MAAM,CAC/E,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAC3B,CAAC,CAAC,EAAE,EAAE,CAAC,oCAAoC,CAAC;qBACxB,CAAC;gBACN,CAAC;;;mCAGkB,CAAC,uCAAuC,CAAC;mCACzC,CAAC,sCAAsC,CAAC,SAAS,CACnF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;EAWtB,SAAS;EACT,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEX,CAAC,IAAI,EAAE,CAAC"}

package/dist/css/components/app-shell.d.ts

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

package/dist/css/components/app-shell.d.ts.map

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

package/dist/css/components/app-shell.js

@@ -0,0 +1,145 @@
+export const appShellCss = `
+.xtyle-app {
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+	grid-template-columns: minmax(0, 1fr);
+	height: 100dvh;
+	background: var(--body-bg);
+	color: var(--fg-0);
+	font-family: var(--font-sans);
+	font-size: var(--text-body);
+	line-height: var(--leading-normal);
+	overflow: hidden;
+}
+.xtyle-app__body {
+	--xtyle-app-left: auto;
+	--xtyle-app-right: auto;
+	display: grid;
+	grid-template-columns: var(--xtyle-app-left) auto minmax(0, 1fr) var(--xtyle-app-right);
+	min-width: 0;
+	min-height: 0;
+	overflow: hidden;
+	position: relative;
+}
+.xtyle-app__rail {
+	min-width: 0;
+}
+.xtyle-app__rail--left {
+	grid-column: 1;
+}
+.xtyle-app__rail--right {
+	grid-column: 4;
+}
+/* A resizable rail is the positioned, full-height container its content can fill (an inset panel that
+   scrolls), while its handle rides the body edge. */
+.xtyle-app__rail--resizable {
+	position: relative;
+}
+.xtyle-main {
+	grid-column: 3;
+	min-width: 0;
+	overflow-y: auto;
+	padding: var(--space-5);
+}
+/* The rail resize handle: absolutely placed on the rail's inner edge (following its size var), so it
+   spans the body row and never touches the toolbar or status bar. Driven by the element's drag. */
+.xtyle-app__resizer {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 11px;
+	z-index: 5;
+	padding: 0;
+	background: none;
+	border: none;
+	cursor: col-resize;
+	touch-action: none;
+}
+.xtyle-app__resizer--left {
+	left: var(--xtyle-app-left);
+	transform: translateX(-50%);
+}
+.xtyle-app__resizer--right {
+	right: var(--xtyle-app-right);
+	transform: translateX(50%);
+}
+.xtyle-app__resizer::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	width: var(--border-thin);
+	transform: translateX(-50%);
+	background: var(--line);
+	transition:
+		background var(--duration-fast) var(--ease-standard),
+		width var(--duration-fast) var(--ease-standard);
+}
+.xtyle-app__resizer:hover::before,
+.xtyle-app__resizer[data-active]::before {
+	background: var(--accent);
+	width: var(--border-normal);
+}
+.xtyle-app__resizer:focus-visible {
+	outline: none;
+}
+.xtyle-app__resizer[data-focus-ring]::before {
+	background: var(--accent);
+	width: var(--border-normal);
+	box-shadow: 0 0 0 var(--border-thin) var(--ring);
+}
+.xtyle-main:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: inset 0 0 0 var(--border-thick) var(--ring);
+}
+.xtyle-app__skip-link {
+	position: absolute;
+	top: var(--space-2);
+	left: var(--space-2);
+	z-index: 100;
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	font-weight: var(--weight-medium);
+	line-height: var(--leading-tight);
+	color: var(--accent-fg);
+	background: var(--accent);
+	border: var(--border-thin) solid transparent;
+	border-radius: var(--radius-md);
+	padding: var(--space-2) var(--space-3);
+	text-decoration: none;
+	transform: translateY(calc(-100% - var(--space-4)));
+	transition: transform var(--duration-fast) var(--ease-standard);
+}
+.xtyle-app__skip-link:focus-visible {
+	transform: translateY(0);
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-thick) var(--ring);
+}
+@media (max-width: 900px) {
+	.xtyle-app {
+		height: auto;
+		min-height: 100dvh;
+		overflow: visible;
+		/* Document scrolls vertically at this width; clip the x-axis so a wide child
+		   (a code sample, a data table) scrolls itself instead of the whole page. */
+		overflow-x: clip;
+	}
+	.xtyle-app__body {
+		grid-template-columns: minmax(0, 1fr);
+		overflow: visible;
+	}
+	.xtyle-main {
+		grid-column: 1;
+		overflow: visible;
+	}
+	.xtyle-app__rail--left,
+	.xtyle-app__rail--right {
+		grid-column: 1;
+	}
+	.xtyle-app__resizer {
+		display: none;
+	}
+}
+`.trim();
+//# sourceMappingURL=app-shell.js.map

package/dist/css/components/app-shell.js.map

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

package/dist/css/components/avatar-group.d.ts

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

package/dist/css/components/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/css/components/avatar-group.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,QA4DnB,CAAC"}

package/dist/css/components/avatar-group.js

@@ -0,0 +1,65 @@
+// The overlap works in both render modes without double-applying: in shadow DOM the avatars are
+// reachable only through `::slotted()` and the `+N` chip only as a `> ` child, while in light DOM
+// every item is a `> ` child (and `::slotted` is inert), so each rule set touches a disjoint layer.
+export const avatarGroupCss = `
+[data-avatar-group] { display: contents; }
+.xtyle-avatar-group {
+	display: inline-flex;
+	align-items: center;
+	--_overlap: var(--space-3);
+}
+.xtyle-avatar-group--snug { --_overlap: var(--space-4); }
+.xtyle-avatar-group--loose { --_overlap: var(--space-2); }
+
+.xtyle-avatar-group ::slotted(*),
+.xtyle-avatar-group > *,
+.xtyle-avatar-group__overflow {
+	box-shadow: 0 0 0 var(--border-thick) var(--bg-0);
+}
+.xtyle-avatar-group ::slotted(*:not(:first-child)),
+.xtyle-avatar-group > *:not(:first-child) {
+	margin-inline-start: calc(-1 * var(--_overlap));
+}
+
+/* Raise a hovered or focused avatar above its neighbours so a covered face reads in full; flex
+   items honour z-index without needing position, so this works in both render modes. */
+.xtyle-avatar-group ::slotted(*:hover),
+.xtyle-avatar-group ::slotted(*:focus-within),
+.xtyle-avatar-group > *:hover,
+.xtyle-avatar-group > *:focus-within {
+	z-index: 1;
+}
+
+.xtyle-avatar-group__overflow {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: var(--space-7);
+	height: var(--space-7);
+	border-radius: var(--radius-full);
+	background: var(--neutral-bg);
+	color: var(--neutral-text);
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	font-weight: var(--weight-semibold);
+	line-height: var(--leading-tight);
+	user-select: none;
+}
+.xtyle-avatar-group--sm .xtyle-avatar-group__overflow {
+	width: var(--space-6);
+	height: var(--space-6);
+	font-size: var(--text-xs);
+}
+.xtyle-avatar-group--lg .xtyle-avatar-group__overflow {
+	width: var(--space-8);
+	height: var(--space-8);
+	font-size: var(--text-body);
+}
+.xtyle-avatar-group--xl .xtyle-avatar-group__overflow {
+	width: calc(var(--space-8) + var(--space-4));
+	height: calc(var(--space-8) + var(--space-4));
+	font-size: var(--text-lg);
+}
+`.trim();
+//# sourceMappingURL=avatar-group.js.map

package/dist/css/components/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"","sources":["../../../src/css/components/avatar-group.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,kGAAkG;AAClG,oGAAoG;AACpG,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D7B,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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

package/dist/css/components/avatar.js

@@ -0,0 +1,108 @@
+import { FULL_TONES, TONES as STATUS_TONES } from "../../vocab.js";
+const toneFallback = FULL_TONES.map((t) => `.xtyle-avatar--${t} .xtyle-avatar__fallback {
+	background: var(--${t}-bg);
+	color: var(--${t}-text);
+}`).join("\n");
+// The presence dot is a status signal, not a free color choice — it stays on the semantic roles.
+const statusTones = STATUS_TONES.map((t) => `.xtyle-avatar--status-${t} .xtyle-avatar__status-dot { background: var(--${t}); }`).join("\n");
+export const avatarCss = `
+[data-avatar] { display: contents; }
+.xtyle-avatar {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	flex: none;
+	width: var(--space-7);
+	height: var(--space-7);
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	font-weight: var(--weight-semibold);
+	line-height: var(--leading-tight);
+	color: var(--neutral-text);
+	border-radius: var(--radius-full);
+}
+.xtyle-avatar--sm {
+	width: var(--space-6);
+	height: var(--space-6);
+	font-size: var(--text-xs);
+}
+.xtyle-avatar--lg {
+	width: var(--space-8);
+	height: var(--space-8);
+	font-size: var(--text-body);
+}
+.xtyle-avatar--xl {
+	width: calc(var(--space-8) + var(--space-4));
+	height: calc(var(--space-8) + var(--space-4));
+	font-size: var(--text-lg);
+}
+.xtyle-avatar--square {
+	border-radius: var(--radius-md);
+}
+.xtyle-avatar--sm.xtyle-avatar--square {
+	border-radius: var(--radius-sm);
+}
+.xtyle-avatar--xl.xtyle-avatar--square {
+	border-radius: var(--radius-lg);
+}
+.xtyle-avatar__image {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+	display: block;
+}
+.xtyle-avatar__fallback {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	border-radius: inherit;
+	background: var(--neutral-bg);
+	color: var(--neutral-text);
+	user-select: none;
+	text-transform: uppercase;
+	letter-spacing: var(--space-0);
+}
+.xtyle-avatar__fallback svg {
+	width: 60%;
+	height: 60%;
+}
+${toneFallback}
+.xtyle-avatar__status-dot {
+	position: absolute;
+	display: block;
+	width: 28%;
+	height: 28%;
+	min-width: var(--space-2);
+	min-height: var(--space-2);
+	inset-block-end: 0;
+	inset-inline-end: 0;
+	background: var(--neutral);
+	border-radius: var(--radius-full);
+	box-shadow: 0 0 0 var(--border-thick) var(--bg-1);
+}
+.xtyle-avatar--square .xtyle-avatar__status-dot {
+	inset-block-end: 0;
+	inset-inline-end: 0;
+	transform: translate(25%, 25%);
+}
+.xtyle-avatar--pulse-slow .xtyle-avatar__status-dot {
+	animation: xtyle-badge-pulse 1.8s var(--ease-standard) infinite;
+}
+.xtyle-avatar--pulse-fast .xtyle-avatar__status-dot {
+	animation: xtyle-badge-pulse 0.9s var(--ease-standard) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.xtyle-avatar--pulse-slow .xtyle-avatar__status-dot,
+	.xtyle-avatar--pulse-fast .xtyle-avatar__status-dot {
+		animation: none;
+	}
+}
+${statusTones}
+`.trim();
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/css/components/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnE,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAClC,CAAC,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC;qBACN,CAAC;gBACN,CAAC;EACf,CACD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,iGAAiG;AACjG,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,yBAAyB,CAAC,kDAAkD,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE5I,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEvB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BZ,WAAW;CACZ,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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