@swell/swell-ui 0.0.0-stage → 0.1.1

package/dist/chunks/config-C-FYxOaJ.js

@@ -0,0 +1,588 @@
+// src/runtime/css.ts
+var e = (e) => `--swell-${e.replaceAll(".", "-")}`, t = [
+	"background",
+	"foreground",
+	"border",
+	"accent",
+	"shadow"
+], n = t.slice(0, 4), r = (t) => e(t).replace("--swell-", "--_swell-"), i = (e) => parseFloat(e) * (e.trim().endsWith("ms") ? 1 : 1e3) || 0, a = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui"
+]);
+function o(e) {
+	return a.has(e) || /^-?[A-Za-z][A-Za-z0-9-]*$/.test(e) ? e : JSON.stringify(e);
+}
+// src/runtime/tokens.generated.ts
+var s = ":root {\n  --swell-color-background: light-dark(#ffffff, #14171d);\n  --swell-color-foreground: light-dark(#0e1117, #e8eaef);\n  --swell-color-border: light-dark(#e4e5e5, #2b2e34);\n  --swell-color-accent: light-dark(#3a66f5, #5b8cff);\n  --swell-color-danger: light-dark(#d7373d, #f2555a);\n  --swell-color-success: light-dark(#12945e, #3ecf8e);\n  --swell-color-warning: light-dark(#b9700a, #f0aa3c);\n  --swell-color-secondary-background: light-dark(#f5f5f6, #1c1f25);\n  --swell-color-secondary-foreground: light-dark(#6a6b6f, #979a9f);\n  --swell-color-secondary-border: var(--swell-color-border);\n  --swell-color-secondary-accent: var(--swell-color-secondary-foreground);\n  --swell-color-secondary-shadow: light-dark(#f5f5f699, #1c1f2599);\n  --swell-font-family: -apple-system, BlinkMacSystemFont, Inter, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  --swell-font-size: 14px;\n  --swell-font-weight: 400;\n  --swell-font-tracking: 0em;\n  --swell-font-leading: 1.5;\n  --swell-font-caption-size: 13px;\n  --swell-font-footnote-size: 12px;\n  --swell-font-heading-family: var(--swell-font-family);\n  --swell-font-heading-weight: 650;\n  --swell-font-heading-tracking: -0.015em;\n  --swell-font-medium-weight: 500;\n  --swell-font-strong-weight: 600;\n  --swell-font-bold-weight: 700;\n  --swell-border-radius: 8px;\n  --swell-border-width: 1px;\n  --swell-border-strong-width: 1.5px;\n  --swell-focus-color: var(--swell-color-accent);\n  --swell-focus-width: 2px;\n  --swell-focus-offset: 2px;\n  --swell-motion-duration-fast: 200ms;\n  --swell-motion-duration-base: 250ms;\n  --swell-motion-duration-slow: 450ms;\n  --swell-motion-duration-loop: 1350ms;\n  --swell-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);\n  --swell-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n  --swell-control-height: 48px;\n  --swell-control-font-size: var(--swell-font-size);\n  --swell-control-xsmall-height: 32px;\n  --swell-control-xsmall-font-size: 12px;\n  --swell-control-small-height: 40px;\n  --swell-control-small-font-size: 13px;\n  --swell-control-large-height: 56px;\n  --swell-control-large-font-size: 16px;\n  --swell-control-xlarge-height: 64px;\n  --swell-control-xlarge-font-size: 18px;\n  --swell-control-disabled-opacity: 0.5;\n  --swell-field-color-background: var(--swell-color-secondary-background);\n  --swell-field-color-foreground: var(--swell-color-foreground);\n  --swell-field-color-border: light-dark(#8b8d90, #7a7c82);\n  --swell-field-hover-color-border: light-dark(#595b5f, #a6a8ad);\n  --swell-field-focus-color-ring: light-dark(#3a66f529, #5b8cff29);\n  --swell-field-invalid-color-ring: light-dark(#d7373d17, #f2555a17);\n  --swell-field-label-font-family: var(--swell-font-family);\n  --swell-field-label-font-weight: var(--swell-font-strong-weight);\n  --swell-field-label-font-tracking: var(--swell-font-tracking);\n  --swell-field-label-color-foreground: light-dark(#484a4f, #b5b7bd);\n  --swell-field-ring-width: 3px;\n  --swell-field-gap: 6px;\n  --swell-field-outline-color-background: #00000000;\n  --swell-overlay-border-radius: var(--swell-border-radius);\n  --swell-overlay-color-background: var(--swell-color-background);\n  --swell-overlay-color-border: var(--swell-color-border);\n  --swell-overlay-color-shadow: #00000059;\n  --swell-overlay-shadow: 0px 20px 40px -18px;\n  --swell-overlay-padding: 16px;\n  --swell-overlay-offset: 12px;\n  --swell-overlay-height: 320px;\n}\n", c = {
+	color: "global",
+	font: "global",
+	border: "global",
+	focus: "global",
+	motion: "global",
+	control: "global",
+	field: "global",
+	overlay: "global",
+	text: "components",
+	link: "components",
+	button: "components",
+	checkbox: "components",
+	radio: "components",
+	status: "components",
+	badge: "components",
+	chip: "components",
+	thumbnail: "components",
+	card: "components",
+	tabs: "components"
+}, l = {
+	"color.background": { type: "color" },
+	"color.foreground": { type: "color" },
+	"color.border": { type: "color" },
+	"color.accent": { type: "color" },
+	"color.danger": { type: "color" },
+	"color.success": { type: "color" },
+	"color.warning": { type: "color" },
+	"color.secondary.background": { type: "color" },
+	"color.secondary.foreground": { type: "color" },
+	"color.secondary.border": { type: "color" },
+	"color.secondary.accent": { type: "color" },
+	"color.secondary.shadow": { type: "color" },
+	"font.family": { type: "fontFamily" },
+	"font.size": { type: "dimension" },
+	"font.weight": { type: "fontWeight" },
+	"font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"font.leading": { type: "number" },
+	"font.caption.size": { type: "dimension" },
+	"font.footnote.size": { type: "dimension" },
+	"font.heading.family": { type: "fontFamily" },
+	"font.heading.weight": { type: "fontWeight" },
+	"font.heading.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"font.medium.weight": { type: "fontWeight" },
+	"font.strong.weight": { type: "fontWeight" },
+	"font.bold.weight": { type: "fontWeight" },
+	"border.radius": { type: "dimension" },
+	"border.width": { type: "dimension" },
+	"border.strong.width": { type: "dimension" },
+	"focus.color": { type: "color" },
+	"focus.width": { type: "dimension" },
+	"focus.offset": { type: "dimension" },
+	"motion.duration.fast": { type: "duration" },
+	"motion.duration.base": { type: "duration" },
+	"motion.duration.slow": { type: "duration" },
+	"motion.duration.loop": { type: "duration" },
+	"motion.easing": { type: "cubicBezier" },
+	"motion.spring": { type: "cubicBezier" },
+	"control.height": { type: "dimension" },
+	"control.font.size": { type: "dimension" },
+	"control.xsmall.height": { type: "dimension" },
+	"control.xsmall.font.size": { type: "dimension" },
+	"control.small.height": { type: "dimension" },
+	"control.small.font.size": { type: "dimension" },
+	"control.large.height": { type: "dimension" },
+	"control.large.font.size": { type: "dimension" },
+	"control.xlarge.height": { type: "dimension" },
+	"control.xlarge.font.size": { type: "dimension" },
+	"control.disabled.opacity": { type: "number" },
+	"field.color.background": { type: "color" },
+	"field.color.foreground": { type: "color" },
+	"field.color.border": { type: "color" },
+	"field.hover.color.border": { type: "color" },
+	"field.focus.color.ring": { type: "color" },
+	"field.invalid.color.ring": { type: "color" },
+	"field.label.font.family": { type: "fontFamily" },
+	"field.label.font.weight": { type: "fontWeight" },
+	"field.label.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"field.label.color.foreground": { type: "color" },
+	"field.ring.width": { type: "dimension" },
+	"field.gap": { type: "dimension" },
+	"field.outline.color.background": { type: "color" },
+	"overlay.border.radius": { type: "dimension" },
+	"overlay.color.background": { type: "color" },
+	"overlay.color.border": { type: "color" },
+	"overlay.color.shadow": { type: "color" },
+	"overlay.shadow": { type: "shadow" },
+	"overlay.padding": { type: "dimension" },
+	"overlay.offset": { type: "dimension" },
+	"overlay.height": { type: "dimension" },
+	"text.font.family": { type: "fontFamily" },
+	"text.font.size": { type: "dimension" },
+	"text.font.weight": { type: "fontWeight" },
+	"text.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"text.font.leading": { type: "number" },
+	"text.color.accent": { type: "color" },
+	"text.title.font.family": { type: "fontFamily" },
+	"text.title.font.size": { type: "dimension" },
+	"text.title.font.weight": { type: "fontWeight" },
+	"text.title.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"text.title.font.leading": { type: "number" },
+	"text.heading.font.family": { type: "fontFamily" },
+	"text.heading.font.size": { type: "dimension" },
+	"text.heading.font.weight": { type: "fontWeight" },
+	"text.heading.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"text.heading.font.leading": { type: "number" },
+	"text.subheading.font.family": { type: "fontFamily" },
+	"text.subheading.font.size": { type: "dimension" },
+	"text.subheading.font.weight": { type: "fontWeight" },
+	"text.subheading.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"text.subheading.font.leading": { type: "number" },
+	"text.strong.font.weight": { type: "fontWeight" },
+	"text.caption.font.size": { type: "dimension" },
+	"text.footnote.font.size": { type: "dimension" },
+	"text.eyebrow.font.size": { type: "dimension" },
+	"text.eyebrow.font.weight": { type: "fontWeight" },
+	"text.eyebrow.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"link.font.weight": { type: "fontWeight" },
+	"link.color.accent": { type: "color" },
+	"button.height": { type: "dimension" },
+	"button.font.size": { type: "dimension" },
+	"button.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"button.font.weight": { type: "fontWeight" },
+	"button.xsmall.height": { type: "dimension" },
+	"button.xsmall.font.size": { type: "dimension" },
+	"button.small.height": { type: "dimension" },
+	"button.small.font.size": { type: "dimension" },
+	"button.large.height": { type: "dimension" },
+	"button.large.font.size": { type: "dimension" },
+	"button.large.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"button.xlarge.height": { type: "dimension" },
+	"button.xlarge.font.size": { type: "dimension" },
+	"button.xlarge.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"button.border.radius": { type: "dimension" },
+	"button.color.accent": { type: "color" },
+	"button.color.background": { type: "color" },
+	"button.color.foreground": { type: "color" },
+	"button.color.border": { type: "color" },
+	"button.color.shadow": { type: "color" },
+	"button.shadow": { type: "shadow" },
+	"button.hover.shadow": { type: "shadow" },
+	"button.hover.offset": { type: "dimension" },
+	"checkbox.border.radius": { type: "dimension" },
+	"radio.border.radius": { type: "dimension" },
+	"radio.color.background": { type: "color" },
+	"radio.color.border": { type: "color" },
+	"radio.color.shadow": { type: "color" },
+	"radio.checked.color.background": { type: "color" },
+	"radio.shadow": { type: "shadow" },
+	"radio.gap": { type: "dimension" },
+	"radio.button.gap": { type: "dimension" },
+	"status.border.radius": { type: "dimension" },
+	"status.color.background": { type: "color" },
+	"status.color.foreground": { type: "color" },
+	"status.color.accent": { type: "color" },
+	"status.color.border": { type: "color" },
+	"status.danger.color.accent": { type: "color" },
+	"status.danger.color.background": { type: "color" },
+	"status.danger.color.border": { type: "color" },
+	"status.success.color.accent": { type: "color" },
+	"status.success.color.background": { type: "color" },
+	"status.success.color.border": { type: "color" },
+	"status.warning.color.accent": { type: "color" },
+	"status.warning.color.background": { type: "color" },
+	"status.warning.color.border": { type: "color" },
+	"badge.height": { type: "dimension" },
+	"badge.font.size": { type: "dimension" },
+	"badge.font.weight": { type: "fontWeight" },
+	"badge.xsmall.height": { type: "dimension" },
+	"badge.xsmall.font.size": { type: "dimension" },
+	"badge.xsmall.font.weight": { type: "fontWeight" },
+	"badge.small.height": { type: "dimension" },
+	"badge.small.font.size": { type: "dimension" },
+	"badge.small.font.weight": { type: "fontWeight" },
+	"badge.large.height": { type: "dimension" },
+	"badge.large.font.size": { type: "dimension" },
+	"badge.xlarge.height": { type: "dimension" },
+	"badge.xlarge.font.size": { type: "dimension" },
+	"badge.color.background": { type: "color" },
+	"badge.color.foreground": { type: "color" },
+	"badge.color.border": { type: "color" },
+	"badge.color.accent": { type: "color" },
+	"chip.height": { type: "dimension" },
+	"chip.font.size": { type: "dimension" },
+	"chip.font.weight": { type: "fontWeight" },
+	"chip.font.tracking": {
+		type: "number",
+		unit: "em"
+	},
+	"chip.xsmall.height": { type: "dimension" },
+	"chip.xsmall.font.size": { type: "dimension" },
+	"chip.small.height": { type: "dimension" },
+	"chip.small.font.size": { type: "dimension" },
+	"chip.large.height": { type: "dimension" },
+	"chip.large.font.size": { type: "dimension" },
+	"chip.xlarge.height": { type: "dimension" },
+	"chip.xlarge.font.size": { type: "dimension" },
+	"chip.color.background": { type: "color" },
+	"chip.color.foreground": { type: "color" },
+	"chip.color.border": { type: "color" },
+	"chip.color.accent": { type: "color" },
+	"thumbnail.border.radius": { type: "dimension" },
+	"thumbnail.color.background": { type: "color" },
+	"thumbnail.color.foreground": { type: "color" },
+	"thumbnail.color.border": { type: "color" },
+	"thumbnail.font.weight": { type: "fontWeight" },
+	"card.border.radius": { type: "dimension" },
+	"card.color.background": { type: "color" },
+	"card.color.border": { type: "color" },
+	"tabs.border.radius": { type: "dimension" },
+	"tabs.indicator.width": { type: "dimension" },
+	"tabs.color.background": { type: "color" },
+	"tabs.color.shadow": { type: "color" },
+	"tabs.font.weight": { type: "fontWeight" },
+	"tabs.shadow": { type: "shadow" }
+}, u = {
+	"field.appearance": {
+		values: [
+			"outline",
+			"filled",
+			"underline"
+		],
+		default: "outline"
+	},
+	"field.label.position": {
+		values: ["above", "floating"],
+		default: "floating"
+	},
+	"button.appearance": {
+		values: [
+			"filled",
+			"outline",
+			"plain"
+		],
+		default: "filled"
+	},
+	"button.secondary.appearance": {
+		values: [
+			"filled",
+			"outline",
+			"plain"
+		],
+		default: "outline"
+	},
+	"radio.appearance": {
+		values: ["plain", "outline"],
+		default: "plain"
+	},
+	"radio.indicator.position": {
+		values: ["start", "end"],
+		default: "start"
+	},
+	"status.appearance": {
+		values: [
+			"filled",
+			"outline",
+			"plain"
+		],
+		default: "filled"
+	},
+	"badge.appearance": {
+		values: ["filled", "outline"],
+		default: "outline"
+	},
+	"card.appearance": {
+		values: ["outline", "filled"],
+		default: "outline"
+	},
+	"tabs.appearance": {
+		values: ["underline", "segmented"],
+		default: "underline"
+	}
+}, d = {
+	color: { variant: ["secondary"] },
+	font: { type: [
+		"caption",
+		"footnote",
+		"heading",
+		"medium",
+		"strong",
+		"bold"
+	] },
+	border: { type: ["strong"] },
+	focus: {},
+	motion: {},
+	control: { size: [
+		"xsmall",
+		"small",
+		"large",
+		"xlarge"
+	] },
+	field: {},
+	overlay: {},
+	text: { type: [
+		"title",
+		"heading",
+		"subheading",
+		"strong",
+		"caption",
+		"footnote",
+		"eyebrow"
+	] },
+	link: {},
+	button: { size: [
+		"xsmall",
+		"small",
+		"large",
+		"xlarge"
+	] },
+	checkbox: {},
+	radio: {},
+	status: { type: [
+		"danger",
+		"success",
+		"warning"
+	] },
+	badge: { size: [
+		"xsmall",
+		"small",
+		"large",
+		"xlarge"
+	] },
+	chip: { size: [
+		"xsmall",
+		"small",
+		"large",
+		"xlarge"
+	] },
+	thumbnail: {},
+	card: {},
+	tabs: {}
+}, f = {
+	text: { accent: "var(--swell-text-color-accent, var(--swell-color-foreground))" },
+	link: { accent: "var(--swell-link-color-accent, var(--swell-color-accent))" },
+	button: {
+		accent: "var(--swell-button-color-accent, var(--swell-color-accent))",
+		background: "var(--swell-button-color-background, var(--swell-button-color-accent, var(--swell-color-accent)))",
+		foreground: "var(--swell-button-color-foreground, var(--swell-color-background))",
+		border: "var(--swell-button-color-border, var(--swell-button-color-accent, var(--swell-color-accent)))",
+		shadow: "var(--swell-button-color-shadow, light-dark(#3a66f599, #5b8cff99))"
+	},
+	badge: {
+		background: "var(--swell-badge-color-background, var(--swell-color-foreground))",
+		foreground: "var(--swell-badge-color-foreground, var(--swell-color-background))",
+		border: "var(--swell-badge-color-border, var(--swell-color-border))",
+		accent: "var(--swell-badge-color-accent, var(--swell-color-foreground))"
+	},
+	thumbnail: {
+		background: "var(--swell-thumbnail-color-background, var(--swell-color-accent))",
+		foreground: "var(--swell-thumbnail-color-foreground, var(--swell-color-background))",
+		border: "var(--swell-thumbnail-color-border, #00000000)"
+	}
+}, p = (e) => typeof e == "object" && !!e && typeof e.light == "string" && typeof e.dark == "string", m = /[;{}!]|\/\*|\*\//, h = (e) => !m.test(e), g = RegExp(`^color\\.[a-z][a-z0-9-]*\\.(${t.join("|")})$`), _ = (e) => l[e] ?? (g.test(e) ? { type: "color" } : void 0);
+function v(e, t) {
+	let n = _(e);
+	if (!n) return !1;
+	switch (n.type) {
+		case "color": return typeof t == "string" ? h(t) : p(t) && h(t.light) && h(t.dark);
+		case "fontFamily": return typeof t == "string" ? h(t) : Array.isArray(t) && t.every((e) => typeof e == "string" && h(e));
+		case "number": return typeof t == "number";
+		case "fontWeight": return typeof t == "number" || typeof t == "string" && h(t);
+		case "shadow": return typeof t == "string" && h(t) && !t.includes(",") && !/\binset\b/.test(t) && CSS.supports("box-shadow", `${t} red`);
+		default: return typeof t == "string" && h(t);
+	}
+}
+function y(e) {
+	return p(e) ? {
+		light: e.light,
+		dark: e.dark
+	} : Array.isArray(e) ? e.slice() : e;
+}
+function b(e, t) {
+	let n = _(e);
+	return n?.type === "color" && p(t) ? `light-dark(${t.light}, ${t.dark})` : n?.type === "fontFamily" && Array.isArray(t) ? t.map((e) => o(String(e))).join(", ") : n?.type === "number" && n.unit ? `${String(t)}${n.unit}` : (n?.type === "dimension" || n?.type === "duration") && /^\s*[+-]?0*\.?0+\s*$/.test(String(t)) ? n.type === "dimension" ? "0px" : "0ms" : String(t);
+}
+// src/runtime/sheet.ts
+var x = t, S = /* @__PURE__ */ new Set([
+	"primary",
+	...x,
+	"ring",
+	"variant",
+	"size",
+	"type",
+	"state"
+]), C = [
+	"light",
+	"dark",
+	"system"
+], w = new Set([...Object.keys(l), ...Object.keys(u)].flatMap((e) => e.split(".").slice(1, -1).map((t, n, r) => [e.split(".")[0], ...r.slice(0, n + 1)].join(".")))), T = (e) => typeof e == "object" && !!e && !Array.isArray(e);
+function E(e, t, n) {
+	let r = t.split("."), i = e.config;
+	for (let e of r.slice(0, -1)) i = i[e] ??= {};
+	i[r.at(-1)] = y(n);
+}
+function D(e, t) {
+	let n = {
+		tokens: /* @__PURE__ */ new Map(),
+		settings: /* @__PURE__ */ new Map(),
+		config: {},
+		warnings: [],
+		area: t,
+		variants: []
+	};
+	if (e == null) return n;
+	if (!T(e)) return n.warnings.push("Swell UI: the configuration is not an object"), n;
+	for (let [t, r] of Object.entries(e)) if (t === "theme") C.includes(r) ? (n.theme = r, E(n, t, r)) : n.warnings.push(`Swell UI: theme is ${JSON.stringify(r)}; it takes ${C.join(", ")}`);
+	else if (t === "components") for (let [e, t] of Object.entries(T(r) ? r : {})) c[e] === "components" ? O(n, e, t, `components.${e}`) : n.warnings.push(`Swell UI: unknown component components.${e} in the configuration`);
+	else c[t] === "global" ? O(n, t, r, t) : n.warnings.push(`Swell UI: unknown group ${t} in the configuration`);
+	return n;
+}
+function O(e, t, n, r) {
+	if (!T(n)) e.warnings.push(`Swell UI: ${r} is not an object`);
+	else for (let [i, a] of Object.entries(n)) k(e, `${t}.${i}`, a, `${r}.${i}`);
+}
+function k(e, t, n, r) {
+	let i = u[t];
+	if (i && e.area !== void 0) {
+		e.warnings.push(`Swell UI: ${r} is a setting, which applies to the whole page; the configuration of area ${JSON.stringify(e.area)} skips it`);
+		return;
+	}
+	if (i) {
+		typeof n == "string" && i.values.includes(n) ? (e.settings.set(t, n), E(e, r, n)) : e.warnings.push(`Swell UI: ${r} is ${JSON.stringify(n)}; it takes ${i.values.join(", ")}`);
+		return;
+	}
+	if (l[t]) {
+		let i = y(n);
+		v(t, i) ? (e.tokens.set(t, i), E(e, r, i)) : e.warnings.push(`Swell UI: ${r} takes a CSS value of its type without ; { } ! or comments, not ${JSON.stringify(n)}`);
+		return;
+	}
+	if (T(n) && w.has(t)) {
+		for (let [i, a] of Object.entries(n)) k(e, `${t}.${i}`, a, `${r}.${i}`);
+		return;
+	}
+	let [a, o, ...s] = t.split(".");
+	a === "color" && o && s.length === 0 && T(n) ? A(e, o, n, r) : e.warnings.push(`Swell UI: unknown key ${r} in the configuration`);
+}
+function A(e, t, r, i) {
+	if (!/^[a-z][a-z0-9-]*$/.test(t) || S.has(t)) {
+		e.warnings.push(`Swell UI: ${i} isn't a variant's name: a variant is a lowercase word other than ${[...S].join(", ")}; the configuration is keyed by token names`);
+		return;
+	}
+	let a = /* @__PURE__ */ new Map(), o = !0;
+	for (let [n, s] of Object.entries(r)) {
+		if (s === void 0) continue;
+		let r = `color.${t}.${n}`, c = y(s);
+		x.includes(n) ? v(r, c) ? a.set(r, c) : (e.warnings.push(`Swell UI: ${i}.${n} takes a color without ; { } ! or comments, not ${JSON.stringify(s)}`), o = !1) : (e.warnings.push(`Swell UI: ${i}.${n} is not a palette role; a variant holds ${x.join(", ")}`), o = !1);
+	}
+	let s = n.filter((e) => !a.has(`color.${t}.${e}`));
+	if (s.length > 0 && o && e.warnings.push(`Swell UI: ${i} is a variant without ${s.join(", ")}; a variant holds ${n.join(", ")}`), !(s.length > 0 || !o)) {
+		for (let [t, n] of a) e.tokens.set(t, n), E(e, `${i}.${t.split(".").at(-1)}`, n);
+		e.variants.push(t);
+	}
+}
+var j = {
+	light: "light",
+	dark: "dark",
+	system: "light dark"
+}, M = `@media (prefers-reduced-motion: reduce) { :root, swell-ui[config] { ${Object.entries(l).filter(([, e]) => e.type === "duration").map(([t]) => `${e(t)}: 0ms;`).join(" ")} } }`, N = [...s.matchAll(/(--swell-[\w-]+): (var\(.*\));/g)].map(([, e, t]) => [e, t]);
+function P({ tokens: t, theme: n }) {
+	let r = n ? [`color-scheme: ${j[n]};`] : [];
+	for (let [n, i] of t) r.push(`${e(n)}: ${b(n, i)};`);
+	return r;
+}
+var F = (e, t) => `${e} {${t.length ? ` ${t.join(" ")} ` : ""}}`;
+function I(t, n = /* @__PURE__ */ new Map()) {
+	let r = [F(":root", P(t)), "swell-ui:not([hidden]) { display: contents; }"];
+	for (let [i, a] of n) {
+		let n = new Set([...t.tokens.keys(), ...a.tokens.keys()].map(e)), o = N.filter(([e]) => !n.has(e)).map(([e, t]) => `${e}: ${t};`);
+		r.push(F(`swell-ui[config=${CSS.escape(i)}]`, [...P(a), ...o]));
+	}
+	return [...r, M].join("\n");
+}
+// src/runtime/config.ts
+var L = Symbol.for("swell-ui.runtime"), R = "0.1.1";
+function z() {
+	let e = getComputedStyle(document.documentElement).colorScheme, t = e.includes("dark");
+	return t && e.includes("light") ? "system" : t ? "dark" : "light";
+}
+function B() {
+	let e = D(void 0), t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Set(), r = new CSSStyleSheet();
+	r.replaceSync(I(e));
+	function i() {
+		r.replaceSync(I(e, t));
+		for (let e of n) e();
+	}
+	return {
+		version: R,
+		configSheet: r,
+		configure(n, r) {
+			if (r !== void 0 && (typeof r != "string" || !r)) {
+				console.warn(`Swell UI: an area's id is a non-empty string, not ${JSON.stringify(r)}`);
+				return;
+			}
+			let a = D(n, r);
+			for (let e of a.warnings) console.warn(e);
+			r === void 0 ? e = a : n == null ? t.delete(r) : t.set(r, a), i();
+		},
+		setTheme(t) {
+			C.includes(t) ? (e = {
+				...e,
+				theme: t,
+				config: {
+					...e.config,
+					theme: t
+				}
+			}, i()) : console.warn(`Swell UI: unknown theme ${JSON.stringify(t)}; it takes ${C.join(", ")}`);
+		},
+		getConfig(n) {
+			if (n !== void 0) return structuredClone(t.get(n)?.config ?? {});
+			let r = structuredClone(e.config);
+			return {
+				...r,
+				theme: r.theme ?? z()
+			};
+		},
+		resolveSetting(t, n) {
+			let r = `${t}.${n}`;
+			return e.settings.get(r) ?? u[r]?.default;
+		},
+		onChange(e) {
+			return n.add(e), () => n.delete(e);
+		},
+		variants() {
+			return [...new Set([e, ...t.values()].flatMap((e) => e.variants))];
+		}
+	};
+}
+var V = new CSSStyleSheet();
+V.replaceSync(`${s}\n${M}`);
+var H = globalThis, U = H[L], W = U ?? B();
+U ? (console.warn(`Swell UI ${R} loaded on a page that already has Swell UI ${U.version}: it takes that copy's configuration. Load the kit once per page.`), document.adoptedStyleSheets = [V, ...document.adoptedStyleSheets]) : (document.adoptedStyleSheets.push(V, W.configSheet), H[L] = W);
+var G = W.version, K = W.configSheet, q = W.configure, J = W.setTheme, Y = W.getConfig, X = () => W.variants?.() ?? [], Z = W.onChange;
+function Q(e, t) {
+	return W.resolveSetting(e, t) ?? u[`${e}.${t}`]?.default;
+}
+export { Z as a, G as c, f as d, r as f, X as i, d as l, i as m, q as n, Q as o, e as p, Y as r, J as s, K as t, u };

package/dist/chunks/define-BlQTa1g4.js

@@ -0,0 +1,19 @@
+// \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+// src/runtime/define.ts
+function n(e, t) {
+	customElements.get(e) || customElements.define(e, t);
+}
+function r(e, t) {
+	if (!Object.hasOwn(e, t)) return;
+	let n = e, r = n[t];
+	delete n[t], n[t] = r;
+}
+export { r as n, t as r, n as t };

package/dist/chunks/description-BHfQ8meK.js

@@ -0,0 +1,19 @@
+// src/runtime/description.ts
+function e(e, t) {
+	let n = document.createElement("div");
+	n.className = `${e}-hint`, n.id = `${t}-hint`;
+	let r = document.createElement("div");
+	return r.className = `${e}-error`, r.id = `${t}-error`, r.append(document.createElement("span")), {
+		hint: n,
+		error: r
+	};
+}
+function t(e, t, { hint: n, error: r }, i) {
+	let a = e.hasAttribute("invalid");
+	n.textContent = i ? "" : e.getAttribute("hint") ?? "", n.hidden = !n.textContent;
+	let o = e.getAttribute("error") ?? "";
+	r.lastElementChild.textContent = o, r.hidden = !a || !o, a ? t.setAttribute("aria-invalid", "true") : t.removeAttribute("aria-invalid");
+	let s = [i?.id ?? (n.hidden ? "" : n.id), r.hidden ? "" : r.id].filter(Boolean).join(" ");
+	s ? t.setAttribute("aria-describedby", s) : t.removeAttribute("aria-describedby");
+}
+export { t as n, e as t };