@xtyle/core 0.5.0

package/dist/css/components/dock-zone.js

@@ -0,0 +1,285 @@
+export const dockZoneCss = `
+xtyle-dock-zone {
+	position: relative;
+	display: flex;
+	min-height: 0;
+	min-width: 0;
+	width: 100%;
+	height: 100%;
+	gap: var(--space-1);
+	font-family: var(--font-sans);
+}
+.xtyle-dock-split {
+	display: flex;
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	gap: var(--space-1);
+}
+.xtyle-dock-split--row { flex-direction: row; }
+.xtyle-dock-split--column { flex-direction: column; }
+.xtyle-dock-zone__leaf {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	min-height: 0;
+	background: var(--bg-1);
+	border: var(--border-thin) solid var(--line);
+	border-radius: var(--radius-md);
+	overflow: hidden;
+}
+.xtyle-dock-zone__head {
+	display: flex;
+	align-items: stretch;
+	background: var(--bg-2);
+	border-bottom: var(--border-thin) solid var(--line);
+}
+.xtyle-dock-zone__tabs {
+	display: flex;
+	flex: 1;
+	min-width: 0;
+	gap: var(--space-0);
+	padding: var(--space-1) var(--space-1) 0;
+	overflow-x: auto;
+}
+.xtyle-dock-zone__actions {
+	display: flex;
+	flex: none;
+	align-items: center;
+	gap: var(--space-0);
+	padding: 0 var(--space-1);
+}
+.xtyle-dock-zone__action {
+	appearance: none;
+	border: none;
+	background: transparent;
+	color: var(--fg-2);
+	font: inherit;
+	font-size: var(--text-sm);
+	line-height: 1;
+	display: grid;
+	place-items: center;
+	min-width: var(--space-6);
+	height: var(--space-6);
+	padding: 0 var(--space-1);
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+}
+.xtyle-dock-zone__action:hover { color: var(--fg-0); background: var(--state-hover); }
+.xtyle-dock-zone__action:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-normal) var(--ring);
+}
+.xtyle-dock-zone__close:hover { color: var(--danger); }
+.xtyle-dock-zone__menu {
+	display: inline-flex;
+	align-items: center;
+	line-height: 0;
+}
+.xtyle-dock-zone__menu::part(trigger) {
+	position: relative;
+	width: var(--space-6);
+	min-width: var(--space-6);
+	height: var(--space-6);
+	padding: 0;
+	font-size: 0;
+	color: transparent;
+	background: transparent;
+	border: none;
+	overflow: hidden;
+	border-radius: var(--radius-sm);
+}
+.xtyle-dock-zone__menu::part(trigger)::after {
+	content: "\\22EE";
+	position: absolute;
+	inset: 0;
+	display: grid;
+	place-items: center;
+	color: var(--fg-2);
+	font-size: var(--text-lg);
+	line-height: 1;
+}
+.xtyle-dock-zone__menu::part(trigger):hover { background: var(--state-hover); }
+.xtyle-dock-zone__menu::part(trigger):hover::after { color: var(--fg-0); }
+.xtyle-dock-zone__tab {
+	appearance: none;
+	border: none;
+	background: transparent;
+	color: var(--fg-2);
+	font: inherit;
+	font-size: var(--text-sm);
+	padding: var(--space-1) var(--space-3);
+	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+	cursor: grab;
+	white-space: nowrap;
+	touch-action: none;
+}
+.xtyle-dock-zone__badge {
+	margin-inline-start: var(--space-1);
+	font-size: 0.85em;
+	color: var(--fg-2);
+	font-variant-numeric: tabular-nums;
+}
+.xtyle-dock-zone__tab:hover { color: var(--fg-0); background: var(--state-hover); }
+.xtyle-dock-zone__tab.is-active {
+	color: var(--fg-0);
+	background: var(--bg-1);
+	box-shadow: inset 0 calc(-1 * var(--border-thick)) 0 var(--accent);
+}
+.xtyle-dock-zone__tab:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: 0 0 0 var(--border-normal) var(--ring);
+}
+.xtyle-dock-zone__body {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	padding: var(--space-3);
+	color: var(--fg-1);
+}
+.xtyle-dock-zone__leaf--stack {
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+.xtyle-dock-zone__section {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	border-bottom: var(--border-thin) solid var(--line);
+}
+.xtyle-dock-zone__section.is-collapsed { flex: none; }
+.xtyle-dock-zone__section-head {
+	display: flex;
+	align-items: stretch;
+	background: var(--bg-2);
+}
+.xtyle-dock-zone__section-toggle {
+	flex: 1;
+	min-width: 0;
+	appearance: none;
+	border: none;
+	background: transparent;
+	color: var(--fg-2);
+	font: inherit;
+	font-size: var(--text-sm);
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding: var(--space-1) var(--space-2);
+	cursor: grab;
+	text-align: start;
+	touch-action: none;
+}
+.xtyle-dock-zone__section-toggle:hover { color: var(--fg-0); background: var(--state-hover); }
+.xtyle-dock-zone__section-toggle:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	box-shadow: inset 0 0 0 var(--border-normal) var(--ring);
+}
+.xtyle-dock-zone__chevron {
+	flex: none;
+	width: 0;
+	height: 0;
+	border-left: 0.4em solid currentColor;
+	border-top: 0.3em solid transparent;
+	border-bottom: 0.3em solid transparent;
+	transition: transform var(--duration-fast) var(--ease-standard);
+}
+.xtyle-dock-zone__section:not(.is-collapsed) .xtyle-dock-zone__chevron { transform: rotate(90deg); }
+.xtyle-dock-zone__section-title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.xtyle-dock-zone__section-body {
+	min-height: 0;
+	overflow: auto;
+	padding: var(--space-3);
+	color: var(--fg-1);
+}
+[data-dock-panel-host] { display: block; }
+.xtyle-dock-zone__film {
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border-radius: var(--radius-md);
+	transition: top var(--duration-fast) var(--ease-standard), left var(--duration-fast) var(--ease-standard), width var(--duration-fast) var(--ease-standard), height var(--duration-fast) var(--ease-standard);
+}
+.xtyle-dock-zone__film--drop {
+	background: color-mix(in oklch, var(--accent) 26%, transparent);
+	border: var(--border-normal) solid var(--accent);
+}
+.xtyle-dock-zone__film--remnant {
+	background: color-mix(in oklch, var(--accent-2) 18%, transparent);
+	border: var(--border-thin) solid var(--accent-2);
+}
+.xtyle-dock-zone__film--rest {
+	background: color-mix(in oklch, var(--accent-3) 13%, transparent);
+	border: var(--border-thin) solid color-mix(in oklch, var(--accent-3) 45%, transparent);
+}
+.xtyle-dock-zone__floats {
+	position: absolute;
+	inset: 0;
+	z-index: 3;
+	pointer-events: none;
+}
+.xtyle-dock-zone__float {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	min-width: 10rem;
+	min-height: 7rem;
+	background: var(--bg-1);
+	border: var(--border-thin) solid var(--line);
+	border-radius: var(--radius-md);
+	box-shadow: var(--elevation-4);
+	overflow: hidden;
+	pointer-events: auto;
+}
+.xtyle-dock-zone__float.is-dragging {
+	opacity: 0.55;
+}
+.xtyle-dock-zone__float-head {
+	display: flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding-left: var(--space-3);
+	padding-block: var(--space-1);
+	background: var(--bg-2);
+	border-bottom: var(--border-thin) solid var(--line);
+	cursor: grab;
+	touch-action: none;
+	user-select: none;
+}
+.xtyle-dock-zone__float-head:active { cursor: grabbing; }
+.xtyle-dock-zone__float-title {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--text-sm);
+	font-weight: var(--weight-medium);
+	color: var(--fg-1);
+}
+.xtyle-dock-zone__float-body {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	padding: var(--space-3);
+	color: var(--fg-1);
+}
+.xtyle-dock-zone__float-resize {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	width: var(--space-4);
+	height: var(--space-4);
+	cursor: nwse-resize;
+	touch-action: none;
+	background: linear-gradient(135deg, transparent 50%, var(--fg-2) 50%, var(--fg-2) 62%, transparent 62%, transparent 74%, var(--fg-2) 74%, var(--fg-2) 86%, transparent 86%);
+	opacity: 0.5;
+	border-bottom-right-radius: var(--radius-md);
+}
+.xtyle-dock-zone__float-resize:hover { opacity: 0.85; }
+`.trim();
+//# sourceMappingURL=dock-zone.js.map

package/dist/css/components/dock-zone.js.map

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

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

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

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

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

package/dist/css/components/dock.js

@@ -0,0 +1,66 @@
+import { FULL_TONES } from "../../vocab.js";
+const dockToneEdges = FULL_TONES.map((t) => `.xtyle-dock--${t} { --dock-edge: var(--${t}); --dock-edge-w: var(--border-thick); }`).join("\n");
+export const dockCss = `
+[data-dock] { display: contents; }
+.xtyle-dock {
+	display: flex;
+	flex-direction: column;
+	flex: none;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	gap: var(--space-2);
+	font-family: var(--font-sans);
+	font-size: var(--text-body);
+	line-height: var(--leading-normal);
+	color: var(--fg-1);
+	background: var(--bg-1);
+	border-right: var(--dock-edge-w, var(--border-thin)) solid var(--dock-edge, var(--line));
+	padding: var(--space-4) var(--space-3);
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+.xtyle-dock--right {
+	border-right: none;
+	border-left: var(--dock-edge-w, var(--border-thin)) solid var(--dock-edge, var(--line));
+}
+.xtyle-dock__header {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: var(--text-xs);
+	font-weight: var(--weight-semibold);
+	line-height: var(--leading-tight);
+	letter-spacing: var(--space-0);
+	text-transform: uppercase;
+	color: var(--fg-2);
+	padding: var(--space-1) var(--space-2);
+}
+.xtyle-dock__body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	min-height: 0;
+}
+.xtyle-dock__footer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	margin-top: auto;
+	padding-top: var(--space-3);
+	border-top: var(--border-thin) solid var(--line);
+}
+${dockToneEdges}
+.xtyle-dock--edge-thin { --dock-edge-w: var(--border-thin); }
+.xtyle-dock--edge-thick { --dock-edge-w: var(--border-thick); }
+.xtyle-dock--edge-bold { --dock-edge-w: var(--space-1); }
+.xtyle-dock--edge-out {
+	border-right: none;
+	border-left: var(--dock-edge-w, var(--border-thin)) solid var(--dock-edge, var(--line));
+}
+.xtyle-dock--right.xtyle-dock--edge-out {
+	border-left: none;
+	border-right: var(--dock-edge-w, var(--border-thin)) solid var(--dock-edge, var(--line));
+}
+`.trim();
+//# sourceMappingURL=dock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dock.js","sourceRoot":"","sources":["../../../src/css/components/dock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,aAAa,GAAG,UAAU,CAAC,GAAG,CACnC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,0CAA0C,CAC5F,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,aAAa;;;;;;;;;;;;CAYd,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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

package/dist/css/components/eyebrow.js

@@ -0,0 +1,22 @@
+import { FULL_TONES } from "../../vocab.js";
+const toneRules = FULL_TONES.filter((t) => t !== "accent")
+    .map((t) => `.xtyle-eyebrow--${t} { color: var(--${t}-vivid); }`)
+    .join("\n");
+export const eyebrowCss = `
+[data-eyebrow] { display: contents; }
+.xtyle-eyebrow {
+	margin: 0;
+	font-family: var(--font-sans);
+	font-size: var(--text-xs);
+	font-weight: var(--weight-semibold);
+	line-height: var(--leading-tight);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--accent-vivid);
+}
+.xtyle-eyebrow--wide { letter-spacing: 0.12em; }
+.xtyle-eyebrow--muted { color: var(--fg-2); }
+.xtyle-eyebrow--subtle { color: var(--fg-3); }
+${toneRules}
+`.trim();
+//# sourceMappingURL=eyebrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eyebrow.js","sourceRoot":"","sources":["../../../src/css/components/eyebrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC;KACxD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,YAAY,CAAC;KAChE,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;EAexB,SAAS;CACV,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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

package/dist/css/components/field.js

@@ -0,0 +1,135 @@
+export const fieldCss = `
+.xtyle-field {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	font-family: var(--font-sans);
+}
+.xtyle-field__label {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	font-size: var(--text-sm);
+	font-weight: var(--weight-medium);
+	color: var(--fg-1);
+	line-height: var(--leading-normal);
+}
+.xtyle-field__required {
+	color: var(--danger);
+	font-weight: var(--weight-semibold);
+}
+.xtyle-field__control {
+	display: flex;
+	align-items: stretch;
+	position: relative;
+	isolation: isolate;
+	color: var(--fg-0);
+	background: var(--field-bg);
+	border: var(--border-thin) solid var(--field-border);
+	border-radius: var(--radius-md);
+	transition:
+		border-color var(--duration-fast) var(--ease-standard),
+		box-shadow var(--duration-fast) var(--ease-standard);
+}
+.xtyle-field__control:focus-within {
+	border-color: var(--accent);
+	box-shadow: 0 0 0 var(--border-normal) var(--ring);
+}
+.xtyle-field__input.xtyle-field__input {
+	flex: 1 1 auto;
+	min-width: 0;
+	border: none;
+	border-radius: inherit;
+	background: transparent;
+	box-shadow: none;
+}
+.xtyle-field__input:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+.xtyle-field__input:disabled {
+	background: transparent;
+}
+.xtyle-field--sm .xtyle-field__input { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); }
+.xtyle-field--lg .xtyle-field__input { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); }
+.xtyle-field--mono .xtyle-field__input { font-family: var(--font-mono); }
+.xtyle-field__adornment {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	padding: 0 var(--space-3);
+	color: var(--fg-2);
+	font-size: var(--text-sm);
+	line-height: var(--leading-tight);
+}
+.xtyle-field__adornment:empty { display: none; }
+.xtyle-field__action {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: 2em;
+	padding: 0;
+	margin-right: var(--space-1);
+	color: var(--fg-2);
+	background: transparent;
+	border: var(--border-thin) solid transparent;
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+	position: relative;
+	isolation: isolate;
+	transition: color var(--duration-fast) var(--ease-standard);
+}
+.xtyle-field__action::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background: transparent;
+	transition: background-color var(--duration-fast) var(--ease-standard);
+	z-index: -1;
+}
+.xtyle-field__action:hover { color: var(--fg-0); }
+.xtyle-field__action:hover::after { background: var(--state-hover); }
+.xtyle-field__action:active::after { background: var(--state-press); }
+.xtyle-field__action:focus-visible {
+	outline: var(--border-normal) solid transparent;
+	color: var(--fg-0);
+	box-shadow: 0 0 0 var(--border-normal) var(--ring);
+}
+.xtyle-field__description {
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+	color: var(--fg-2);
+}
+.xtyle-field__error {
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+	color: var(--danger-text);
+}
+.xtyle-field--invalid .xtyle-field__control {
+	border-color: var(--danger);
+}
+.xtyle-field--invalid .xtyle-field__control:focus-within {
+	box-shadow: 0 0 0 var(--border-normal) var(--danger-bg);
+}
+.xtyle-field--disabled .xtyle-field__control {
+	cursor: not-allowed;
+	color: var(--fg-disabled);
+	background: var(--state-disabled);
+}
+.xtyle-field--disabled .xtyle-field__label,
+.xtyle-field--disabled .xtyle-field__input::placeholder {
+	color: var(--fg-disabled);
+}
+.xtyle-field--readonly .xtyle-field__control {
+	background: var(--bg-1);
+}
+.xtyle-field__description[hidden],
+.xtyle-field__error[hidden],
+.xtyle-field__label[hidden],
+.xtyle-field__action[hidden] { display: none; }
+`.trim();
+//# sourceMappingURL=field.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,66 @@
+export const formGroupCss = `
+.xtyle-form-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	font-family: var(--font-sans);
+}
+.xtyle-form-group__label {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	font-size: var(--text-sm);
+	font-weight: var(--weight-medium);
+	color: var(--fg-1);
+	line-height: var(--leading-normal);
+}
+.xtyle-form-group__required {
+	color: var(--danger);
+	font-weight: var(--weight-semibold);
+}
+.xtyle-form-group__description {
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+	color: var(--fg-2);
+}
+.xtyle-form-group__control {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+}
+.xtyle-form-group__error {
+	display: flex;
+	align-items: center;
+	gap: var(--space-1);
+	font-size: var(--text-sm);
+	line-height: var(--leading-normal);
+	color: var(--danger-text);
+}
+.xtyle-form-group--sm {
+	gap: var(--space-0);
+}
+.xtyle-form-group--sm .xtyle-form-group__label,
+.xtyle-form-group--sm .xtyle-form-group__description,
+.xtyle-form-group--sm .xtyle-form-group__error {
+	font-size: var(--text-xs);
+}
+.xtyle-form-group--lg {
+	gap: var(--space-2);
+}
+.xtyle-form-group--lg .xtyle-form-group__label {
+	font-size: var(--text-body);
+}
+.xtyle-form-group--lg .xtyle-form-group__description,
+.xtyle-form-group--lg .xtyle-form-group__error {
+	font-size: var(--text-body);
+}
+.xtyle-form-group--invalid .xtyle-form-group__label {
+	color: var(--danger-text);
+}
+.xtyle-form-group__label[hidden],
+.xtyle-form-group__description[hidden],
+.xtyle-form-group__error[hidden] {
+	display: none;
+}
+`.trim();
+//# sourceMappingURL=form-group.js.map

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

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

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

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

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

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

package/dist/css/components/grid.js

@@ -0,0 +1,42 @@
+const GAPS = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+const COLUMNS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const ALIGN = ["start", "center", "end", "stretch"];
+const JUSTIFY = ["start", "center", "end", "stretch"];
+const ALIGN_VALUE = {
+    start: "start",
+    center: "center",
+    end: "end",
+    stretch: "stretch",
+};
+const gapRules = GAPS.map((g) => `.xtyle-grid--gap-${g} { gap: var(--space-${g}); }`).join("\n");
+const columnRules = COLUMNS.map((c) => `.xtyle-grid--cols-${c} { grid-template-columns: repeat(${c}, minmax(0, 1fr)); }`).join("\n");
+const columnTabletRules = COLUMNS.filter((c) => c >= 3)
+    .map((c) => `.xtyle-grid--cols-${c} { grid-template-columns: repeat(2, minmax(0, 1fr)); }`)
+    .join("\n");
+const columnMobileRules = COLUMNS.filter((c) => c >= 2)
+    .map((c) => `.xtyle-grid--cols-${c} { grid-template-columns: minmax(0, 1fr); }`)
+    .join("\n");
+const alignRules = ALIGN.map((a) => `.xtyle-grid--align-${a} { align-items: ${ALIGN_VALUE[a]}; }`).join("\n");
+const justifyRules = JUSTIFY.map((j) => `.xtyle-grid--justify-${j} { justify-items: ${ALIGN_VALUE[j]}; }`).join("\n");
+export const gridCss = `
+[data-grid] { display: contents; }
+.xtyle-grid {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	gap: var(--space-4);
+}
+.xtyle-grid--inline {
+	display: inline-grid;
+}
+${gapRules}
+${columnRules}
+${alignRules}
+${justifyRules}
+@media (max-width: 60rem) {
+${columnTabletRules}
+}
+@media (max-width: 40rem) {
+${columnMobileRules}
+}
+`.trim();
+//# sourceMappingURL=grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/css/components/grid.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU,CAAC;AAClD,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAC;AACjE,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAC7D,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAU,CAAC;AAE/D,MAAM,WAAW,GAA2C;IAC3D,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,OAAO,EAAE,SAAS;CAClB,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACjG,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAC9B,CAAC,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,oCAAoC,CAAC,sBAAsB,CACxF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACb,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;KACrD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,wDAAwD,CAAC;KAC1F,IAAI,CAAC,IAAI,CAAC,CAAC;AACb,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;KACrD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,6CAA6C,CAAC;KAC/E,IAAI,CAAC,IAAI,CAAC,CAAC;AACb,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,sBAAsB,CAAC,mBAAmB,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9G,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,wBAAwB,CAAC,qBAAqB,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEtH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;EAUrB,QAAQ;EACR,WAAW;EACX,UAAU;EACV,YAAY;;EAEZ,iBAAiB;;;EAGjB,iBAAiB;;CAElB,CAAC,IAAI,EAAE,CAAC"}

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

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

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

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