@alfakit/vue 0.1.1 → 0.1.2

package/dist/components/table/SelectCell.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,18 @@
 import { cn as e } from "../../lib/utils.js";
 import { useCellUpdate as t } from "./cell-update.js";
 import { isOptionGroup as n } from "@alfakit/core";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, withModifiers as h } from "vue";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useId as h, withModifiers as g } from "vue";
 //#region src/components/table/SelectCell.vue?vue&type=script&setup=true&lang.ts
-var g = [
+var _ = [
 	"value",
 	"disabled",
-	"aria-invalid"
-], _ = {
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby"
+], v = {
 	key: 0,
 	value: ""
-}, v = ["value", "disabled"], y = {
-	key: 0,
-	class: "text-destructive block text-xs"
-}, b = /*@__PURE__*/ c({
+}, y = ["value", "disabled"], b = ["id"], x = /*@__PURE__*/ c({
 	__name: "SelectCell",
 	props: {
 		column: {},
@@ -23,23 +22,29 @@ var g = [
 		component: {}
 	},
 	setup(c) {
-		let b = c, x = i(() => b.column), { update: S, saving: C, error: w } = t(b), T = d(b.cell.state === null || b.cell.state === void 0 ? "" : String(b.cell.state)), E = i(() => x.value.options.flatMap((e) => n(e) ? e.options : [e]).filter((e) => !(x.value.ignoreRecord && e.value === String(b.recordKey)))), D = (e) => {
-			T.value = e.target.value, S(T.value === "" ? null : T.value);
+		let x = c, S = i(() => x.column), { update: C, saving: w, error: T } = t(x), E = h(), D = d(x.cell.state === null || x.cell.state === void 0 ? "" : String(x.cell.state)), O = i(() => S.value.options.flatMap((e) => n(e) ? e.options : [e]).filter((e) => !(S.value.ignoreRecord && e.value === String(x.recordKey)))), k = (e) => {
+			D.value = e.target.value, C(D.value === "" ? null : D.value);
 		};
-		return (t, n) => (u(), o("span", { onClick: n[0] ||= h(() => {}, ["stop"]) }, [s("select", {
-			value: T.value,
-			disabled: !!b.cell.disabled || m(C),
-			"aria-invalid": m(w) ? !0 : void 0,
-			class: l(m(e)("border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]", m(w) && "border-destructive")),
-			onChange: D
-		}, [x.value.selectablePlaceholder ? (u(), o("option", _, p(x.value.placeholder ?? ""), 1)) : a("", !0), (u(!0), o(r, null, f(E.value, (e) => (u(), o("option", {
+		return (t, n) => (u(), o("span", { onClick: n[0] ||= g(() => {}, ["stop"]) }, [s("select", {
+			value: D.value,
+			disabled: !!x.cell.disabled || m(w),
+			"aria-label": x.column.label || x.column.name,
+			"aria-invalid": m(T) ? !0 : void 0,
+			"aria-describedby": m(T) ? m(E) : void 0,
+			class: l(m(e)("border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]", m(T) && "border-destructive")),
+			onChange: k
+		}, [S.value.selectablePlaceholder ? (u(), o("option", v, p(S.value.placeholder ?? ""), 1)) : a("", !0), (u(!0), o(r, null, f(O.value, (e) => (u(), o("option", {
 			key: e.value,
 			value: e.value,
 			disabled: e.disabled
-		}, p(e.label), 9, v))), 128))], 42, g), m(w) ? (u(), o("span", y, p(m(w)), 1)) : a("", !0)]));
+		}, p(e.label), 9, y))), 128))], 42, _), m(T) ? (u(), o("span", {
+			key: 0,
+			id: m(E),
+			class: "text-destructive block text-xs"
+		}, p(m(T)), 9, b)) : a("", !0)]));
 	}
 });
 //#endregion
-export { b as default };
+export { x as default };
 
 //# sourceMappingURL=SelectCell.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/table/SelectCell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_normalizeClass","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","SelectCell_vue_vue_type_script_setup_true_lang_default","props","__props","schema","computed","useCellUpdate","value","ref","options","isOptionGroup","option","onChange","event","update","openBlock","createElementBlock","_cache","withModifiers","createElementVNode","unref","saving","error","normalizeClass","cn","toDisplayString","createCommentVNode","Fragment","renderList"],"sources":["../../../src/components/table/SelectCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectColumnSchema } from '@alfakit/core'\nimport { isOptionGroup } from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as SelectColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst value = ref(\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\n// `optionsRelationship(ignoreRecord: true)`: the record itself is not an option.\nconst options = computed(() =>\n  schema.value.options\n    .flatMap((option) => (isOptionGroup(option) ? option.options : [option]))\n    .filter((option) => !(schema.value.ignoreRecord && option.value === String(props.recordKey))),\n)\n\nconst onChange = (event: Event) => {\n  value.value = (event.target as HTMLSelectElement).value\n  void update(value.value === '' ? null : value.value)\n}\n</script>\n\n<template>\n  <span @click.stop>\n    <select\n      :value=\"value\"\n      :disabled=\"Boolean(props.cell.disabled) || saving\"\n      :aria-invalid=\"error ? true : undefined\"\n      :class=\"\n        cn(\n          'border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]',\n          error && 'border-destructive',\n        )\n      \"\n      @change=\"onChange\"\n    >\n      <option v-if=\"schema.selectablePlaceholder\" value=\"\">{{ schema.placeholder ?? '' }}</option>\n      <option\n        v-for=\"option in options\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </option>\n    </select>\n    <span v-if=\"error\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMe,IAAQC,GACRC,IAASC,QAAeH,EAAM,MAA4B,GAC1D,EAAE,WAAQ,WAAQ,aAAUI,EAAcJ,CAAK,GAC/CK,IAAQC,EACZN,EAAM,KAAK,UAAU,QAAQA,EAAM,KAAK,UAAU,KAAA,IAAY,KAAK,OAAOA,EAAM,KAAK,KAAK,CAC5F,GAEMO,IAAUJ,QACdD,EAAO,MAAM,QACV,SAAS,MAAYM,EAAcC,CAAM,IAAIA,EAAO,UAAU,CAACA,CAAM,CAAE,CAAA,CACvE,QAAQ,MAAW,EAAEP,EAAO,MAAM,gBAAgBO,EAAO,UAAU,OAAOT,EAAM,SAAS,EAAE,CAChG,GAEMU,KAAY,MAAiB;GAEjC,AADA,EAAM,QAASC,EAAM,OAA6B,OAClDC,EAAYP,EAAM,UAAU,KAAK,OAAOA,EAAM,KAAK;EACrD;oBAIEpB,EAAA,GAAAC,EAwBO,QAAA,EAxBA,SAAK,AAAA6B,EAAA,OAAA5B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA,EAAA,GAAA,CACfC,EAqBS,UAAA;GApBN,OAAOiB,EAAA;GACP,UAAU,EAAQL,EAAM,KAAK,YAAaX,EAAA8B,CAAA;GAC1C,gBAAc9B,EAAA+B,CAAA,IAAK,KAAU,KAAA;GAC7B,OAAK9B,EAAWD,EAAAiC,CAAA,CAAE,CAAA,uKAA6LjC,EAAA+B,CAAA,KAAK,oBAAA,CAAA;GAM5M;EAEK,GAAA,CAAAlB,EAAA,MAAO,yBAArBjB,EAAA,GAAAC,EAA4F,UAA5FU,GAA4FL,EAApCW,EAAA,MAAO,eAAW,EAAA,GAAA,CAAA,KAAAsB,EAAA,IAAA,EAAA,IAC1EvC,EAAA,EAAA,GAAAC,EAOSO,GAAA,MAAAC,EANUa,EAAA,QAAV,OADTtB,EAAA,GAAAC,EAOS,UAAA;GALN,KAAKuB,EAAO;GACZ,OAAOA,EAAO;GACd,UAAUA,EAAO;EAEf,GAAAlB,EAAAkB,EAAO,KAAK,GAAA,GAAAZ,CAAA,EAGPR,GAAAA,GAAAA,EAAAA,GAAAA,IAAAA,CAAAA,GAAAA,EAAA+B,CAAA,KAAZnC,EAAA,GAAAC,EAA4E,QAA5EY,GAA4EP,EAAfF,EAAA+B,CAAA,CAAK,GAAA,CAAA,KAAAI,EAAA,IAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"SelectCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_normalizeClass","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","SelectCell_vue_vue_type_script_setup_true_lang_default","props","__props","schema","computed","useCellUpdate","errorId","useId","value","ref","options","isOptionGroup","option","onChange","event","update","openBlock","createElementBlock","_cache","withModifiers","createElementVNode","unref","saving","error","normalizeClass","cn","toDisplayString","createCommentVNode","Fragment","renderList"],"sources":["../../../src/components/table/SelectCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectColumnSchema } from '@alfakit/core'\nimport { isOptionGroup } from '@alfakit/core'\nimport { computed, ref, useId } from 'vue'\nimport { cn } from '../../lib/utils'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as SelectColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst errorId = useId()\nconst value = ref(\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\n// `optionsRelationship(ignoreRecord: true)`: the record itself is not an option.\nconst options = computed(() =>\n  schema.value.options\n    .flatMap((option) => (isOptionGroup(option) ? option.options : [option]))\n    .filter((option) => !(schema.value.ignoreRecord && option.value === String(props.recordKey))),\n)\n\nconst onChange = (event: Event) => {\n  value.value = (event.target as HTMLSelectElement).value\n  void update(value.value === '' ? null : value.value)\n}\n</script>\n\n<template>\n  <span @click.stop>\n    <select\n      :value=\"value\"\n      :disabled=\"Boolean(props.cell.disabled) || saving\"\n      :aria-label=\"props.column.label || props.column.name\"\n      :aria-invalid=\"error ? true : undefined\"\n      :aria-describedby=\"error ? errorId : undefined\"\n      :class=\"\n        cn(\n          'border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]',\n          error && 'border-destructive',\n        )\n      \"\n      @change=\"onChange\"\n    >\n      <option v-if=\"schema.selectablePlaceholder\" value=\"\">{{ schema.placeholder ?? '' }}</option>\n      <option\n        v-for=\"option in options\"\n        :key=\"option.value\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </option>\n    </select>\n    <span v-if=\"error\" :id=\"errorId\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMe,IAAQC,GACRC,IAASC,QAAeH,EAAM,MAA4B,GAC1D,EAAE,WAAQ,WAAQ,aAAUI,EAAcJ,CAAK,GAC/CK,IAAUC,EAAM,GAChBC,IAAQC,EACZR,EAAM,KAAK,UAAU,QAAQA,EAAM,KAAK,UAAU,KAAA,IAAY,KAAK,OAAOA,EAAM,KAAK,KAAK,CAC5F,GAEMS,IAAUN,QACdD,EAAO,MAAM,QACV,SAAS,MAAYQ,EAAcC,CAAM,IAAIA,EAAO,UAAU,CAACA,CAAM,CAAE,CAAA,CACvE,QAAQ,MAAW,EAAET,EAAO,MAAM,gBAAgBS,EAAO,UAAU,OAAOX,EAAM,SAAS,EAAE,CAChG,GAEMY,KAAY,MAAiB;GAEjC,AADA,EAAM,QAASC,EAAM,OAA6B,OAClDC,EAAYP,EAAM,UAAU,KAAK,OAAOA,EAAM,KAAK;EACrD;oBAIEtB,EAAA,GAAAC,EA0BO,QAAA,EA1BA,SAAK,AAAA+B,EAAA,OAAA9B,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA,EAAA,GAAA,CACfC,EAuBS,UAAA;GAtBN,OAAOmB,EAAA;GACP,UAAU,EAAQP,EAAM,KAAK,YAAaX,EAAAgC,CAAA;GAC1C,cAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO;GAC/C,gBAAcX,EAAAiC,CAAA,IAAK,KAAU,KAAA;GAC7B,oBAAkBjC,EAAAiC,CAAA,IAAQjC,EAAAgB,CAAA,IAAU,KAAA;GACpC,OAAKf,EAAWD,EAAAmC,CAAA,CAAE,CAAA,uKAA6LnC,EAAAiC,CAAA,KAAK,oBAAA,CAAA;GAM5M;EAEK,GAAA,CAAApB,EAAA,MAAO,yBAArBjB,EAAA,GAAAC,EAA4F,UAA5FU,GAA4FL,EAApCW,EAAA,MAAO,eAAW,EAAA,GAAA,CAAA,KAAAwB,EAAA,IAAA,EAAA,IAC1EzC,EAAA,EAAA,GAAAC,EAOSO,GAAA,MAAAC,EANUe,EAAA,QAAV,OADTxB,EAAA,GAAAC,EAOS,UAAA;GALN,KAAKyB,EAAO;GACZ,OAAOA,EAAO;GACd,UAAUA,EAAO;EAEf,GAAApB,EAAAoB,EAAO,KAAK,GAAA,GAAAd,CAAA,EAGPR,GAAAA,GAAAA,EAAAA,GAAAA,IAAAA,CAAAA,GAAAA,EAAAiC,CAAA,KAAZrC,EAAA,GAAAC,EAA0F,QAAA;;GAAtE,IAAIG,EAAAgB,CAAA;GAAS,OAAM;EAAoC,GAAAd,EAAAF,EAAAiC,CAAA,CAAK,GAAA,GAAAxB,CAAA,KAAA4B,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/components/table/TextInputCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputCell.js","names":["_sfc_main","TextInputCell_vue_vue_type_script_setup_true_lang_default","TextInputCell_default"],"sources":["../../../src/components/table/TextInputCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TextInputColumnSchema } from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Input from '../ui/Input.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as TextInputColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst initial =\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state)\nconst value = ref(initial)\n// `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.\nconst grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))\n</script>\n\n<template>\n  <span @click.stop>\n    <span\n      :data-slot=\"grouped ? 'input-group' : undefined\"\n      :class=\"\n        grouped\n          ? cn(\n              'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-8 min-w-32 items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',\n              error && 'border-destructive',\n            )\n          : 'contents'\n      \"\n    >\n      <span\n        v-if=\"props.cell.prefix\"\n        data-slot=\"input-prefix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-e px-2 text-sm\"\n        >{{ props.cell.prefix }}</span\n      >\n      <span :class=\"cn('relative block', grouped && 'min-w-0 flex-1')\">\n        <span\n          v-if=\"schema.prefixIcon\"\n          data-slot=\"input-prefix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.prefixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.prefixIcon\" class=\"size-4\" />\n        </span>\n        <Input\n          :type=\"schema.inputType\"\n          :model-value=\"value\"\n          :placeholder=\"schema.placeholder\"\n          :step=\"schema.step\"\n          :inputmode=\"schema.inputMode\"\n          :disabled=\"Boolean(props.cell.disabled) || saving\"\n          :aria-invalid=\"error ? true : undefined\"\n          :class=\"\n            cn(\n              'h-8 min-w-32',\n              schema.prefixIcon && 'ps-8',\n              schema.suffixIcon && 'pe-8',\n              grouped &&\n                'h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',\n            )\n          \"\n          @update:model-value=\"value = $event\"\n          @blur=\"value !== initial && void update(value)\"\n          @keydown.enter=\"($event.target as HTMLInputElement).blur()\"\n        />\n        <span\n          v-if=\"schema.suffixIcon\"\n          data-slot=\"input-suffix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.suffixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.suffixIcon\" class=\"size-4\" />\n        </span>\n      </span>\n      <span\n        v-if=\"props.cell.suffix\"\n        data-slot=\"input-suffix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-s px-2 text-sm\"\n        >{{ props.cell.suffix }}</span\n      >\n    </span>\n    <span v-if=\"error\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TextInputCell.js","names":["_sfc_main","TextInputCell_vue_vue_type_script_setup_true_lang_default","TextInputCell_default"],"sources":["../../../src/components/table/TextInputCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TextInputColumnSchema } from '@alfakit/core'\nimport { computed, ref, useId } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Input from '../ui/Input.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as TextInputColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst errorId = useId()\n// The saved value: follows the cell after the table reloads, so changing the input back to\n// an earlier value is saved too.\nconst initial = computed(() =>\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\nconst value = ref(initial.value)\n// `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.\nconst grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))\n</script>\n\n<template>\n  <span @click.stop>\n    <span\n      :data-slot=\"grouped ? 'input-group' : undefined\"\n      :class=\"\n        grouped\n          ? cn(\n              'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-8 min-w-32 items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',\n              error && 'border-destructive',\n            )\n          : 'contents'\n      \"\n    >\n      <span\n        v-if=\"props.cell.prefix\"\n        data-slot=\"input-prefix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-e px-2 text-sm\"\n        >{{ props.cell.prefix }}</span\n      >\n      <span :class=\"cn('relative block', grouped && 'min-w-0 flex-1')\">\n        <span\n          v-if=\"schema.prefixIcon\"\n          data-slot=\"input-prefix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.prefixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.prefixIcon\" class=\"size-4\" />\n        </span>\n        <Input\n          :type=\"schema.inputType\"\n          :model-value=\"value\"\n          :placeholder=\"schema.placeholder\"\n          :step=\"schema.step\"\n          :inputmode=\"schema.inputMode\"\n          :disabled=\"Boolean(props.cell.disabled) || saving\"\n          :aria-label=\"props.column.label || props.column.name\"\n          :aria-invalid=\"error ? true : undefined\"\n          :aria-describedby=\"error ? errorId : undefined\"\n          :class=\"\n            cn(\n              'h-8 min-w-32',\n              schema.prefixIcon && 'ps-8',\n              schema.suffixIcon && 'pe-8',\n              grouped &&\n                'h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',\n            )\n          \"\n          @update:model-value=\"value = $event\"\n          @blur=\"value !== initial && void update(value)\"\n          @keydown.enter=\"($event.target as HTMLInputElement).blur()\"\n        />\n        <span\n          v-if=\"schema.suffixIcon\"\n          data-slot=\"input-suffix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.suffixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.suffixIcon\" class=\"size-4\" />\n        </span>\n      </span>\n      <span\n        v-if=\"props.cell.suffix\"\n        data-slot=\"input-suffix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-s px-2 text-sm\"\n        >{{ props.cell.suffix }}</span\n      >\n    </span>\n    <span v-if=\"error\" :id=\"errorId\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/table/TextInputCell.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TextInputCell.vue"],"names":[],"mappings":"AAyGA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;;AAqN7D,wBAMG"}
+{"version":3,"file":"TextInputCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TextInputCell.vue"],"names":[],"mappings":"AA+GA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;;AA+N7D,wBAMG"}

package/dist/components/table/TextInputCell.vue_vue_type_script_setup_true_lang.js

@@ -3,20 +3,17 @@ import { colorClass as t, textColorClasses as n } from "../../lib/colors.js";
 import r from "../../lib/Icon.js";
 import i from "../ui/Input.js";
 import { useCellUpdate as a } from "./cell-update.js";
-import { computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, ref as m, toDisplayString as h, unref as g, withKeys as _, withModifiers as v } from "vue";
+import { computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, ref as m, toDisplayString as h, unref as g, useId as _, withKeys as v, withModifiers as y } from "vue";
 //#region src/components/table/TextInputCell.vue?vue&type=script&setup=true&lang.ts
-var y = ["data-slot"], b = {
+var b = ["data-slot"], x = {
 	key: 0,
 	"data-slot": "input-prefix",
 	class: "text-muted-foreground bg-muted/50 flex items-center border-e px-2 text-sm"
-}, x = {
+}, S = {
 	key: 1,
 	"data-slot": "input-suffix",
 	class: "text-muted-foreground bg-muted/50 flex items-center border-s px-2 text-sm"
-}, S = {
-	key: 0,
-	class: "text-destructive block text-xs"
-}, C = /*@__PURE__*/ d({
+}, C = ["id"], w = /*@__PURE__*/ d({
 	__name: "TextInputCell",
 	props: {
 		column: {},
@@ -26,34 +23,36 @@ var y = ["data-slot"], b = {
 		component: {}
 	},
 	setup(d) {
-		let C = d, w = o(() => C.column), { update: T, saving: E, error: D } = a(C), O = C.cell.state === null || C.cell.state === void 0 ? "" : String(C.cell.state), k = m(O), A = o(() => !!(C.cell.prefix || C.cell.suffix));
-		return (a, o) => (p(), c("span", { onClick: o[3] ||= v(() => {}, ["stop"]) }, [l("span", {
-			"data-slot": A.value ? "input-group" : void 0,
-			class: f(A.value ? g(e)("border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-8 min-w-32 items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]", g(D) && "border-destructive") : "contents")
+		let w = d, T = o(() => w.column), { update: E, saving: D, error: O } = a(w), k = _(), A = o(() => w.cell.state === null || w.cell.state === void 0 ? "" : String(w.cell.state)), j = m(A.value), M = o(() => !!(w.cell.prefix || w.cell.suffix));
+		return (a, o) => (p(), c("span", { onClick: o[3] ||= y(() => {}, ["stop"]) }, [l("span", {
+			"data-slot": M.value ? "input-group" : void 0,
+			class: f(M.value ? g(e)("border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-8 min-w-32 items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]", g(O) && "border-destructive") : "contents")
 		}, [
-			C.cell.prefix ? (p(), c("span", b, h(C.cell.prefix), 1)) : s("", !0),
-			l("span", { class: f(g(e)("relative block", A.value && "min-w-0 flex-1")) }, [
-				w.value.prefixIcon ? (p(), c("span", {
+			w.cell.prefix ? (p(), c("span", x, h(w.cell.prefix), 1)) : s("", !0),
+			l("span", { class: f(g(e)("relative block", M.value && "min-w-0 flex-1")) }, [
+				T.value.prefixIcon ? (p(), c("span", {
 					key: 0,
 					"data-slot": "input-prefix-icon",
 					"aria-hidden": "true",
-					class: f(g(e)("pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2", g(t)(g(n), w.value.prefixIconColor, "gray")))
+					class: f(g(e)("pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2", g(t)(g(n), T.value.prefixIconColor, "gray")))
 				}, [u(g(r), {
-					name: w.value.prefixIcon,
+					name: T.value.prefixIcon,
 					class: "size-4"
 				}, null, 8, ["name"])], 2)) : s("", !0),
 				u(i, {
-					type: w.value.inputType,
-					"model-value": k.value,
-					placeholder: w.value.placeholder,
-					step: w.value.step,
-					inputmode: w.value.inputMode,
-					disabled: !!C.cell.disabled || g(E),
-					"aria-invalid": g(D) ? !0 : void 0,
-					class: f(g(e)("h-8 min-w-32", w.value.prefixIcon && "ps-8", w.value.suffixIcon && "pe-8", A.value && "h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent")),
-					"onUpdate:modelValue": o[0] ||= (e) => k.value = e,
-					onBlur: o[1] ||= (e) => k.value !== g(O) && void g(T)(k.value),
-					onKeydown: o[2] ||= _((e) => e.target.blur(), ["enter"])
+					type: T.value.inputType,
+					"model-value": j.value,
+					placeholder: T.value.placeholder,
+					step: T.value.step,
+					inputmode: T.value.inputMode,
+					disabled: !!w.cell.disabled || g(D),
+					"aria-label": w.column.label || w.column.name,
+					"aria-invalid": g(O) ? !0 : void 0,
+					"aria-describedby": g(O) ? g(k) : void 0,
+					class: f(g(e)("h-8 min-w-32", T.value.prefixIcon && "ps-8", T.value.suffixIcon && "pe-8", M.value && "h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent")),
+					"onUpdate:modelValue": o[0] ||= (e) => j.value = e,
+					onBlur: o[1] ||= (e) => j.value !== A.value && void g(E)(j.value),
+					onKeydown: o[2] ||= v((e) => e.target.blur(), ["enter"])
 				}, null, 8, [
 					"type",
 					"model-value",
@@ -61,24 +60,30 @@ var y = ["data-slot"], b = {
 					"step",
 					"inputmode",
 					"disabled",
+					"aria-label",
 					"aria-invalid",
+					"aria-describedby",
 					"class"
 				]),
-				w.value.suffixIcon ? (p(), c("span", {
+				T.value.suffixIcon ? (p(), c("span", {
 					key: 1,
 					"data-slot": "input-suffix-icon",
 					"aria-hidden": "true",
-					class: f(g(e)("pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2", g(t)(g(n), w.value.suffixIconColor, "gray")))
+					class: f(g(e)("pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2", g(t)(g(n), T.value.suffixIconColor, "gray")))
 				}, [u(g(r), {
-					name: w.value.suffixIcon,
+					name: T.value.suffixIcon,
 					class: "size-4"
 				}, null, 8, ["name"])], 2)) : s("", !0)
 			], 2),
-			C.cell.suffix ? (p(), c("span", x, h(C.cell.suffix), 1)) : s("", !0)
-		], 10, y), g(D) ? (p(), c("span", S, h(g(D)), 1)) : s("", !0)]));
+			w.cell.suffix ? (p(), c("span", S, h(w.cell.suffix), 1)) : s("", !0)
+		], 10, b), g(O) ? (p(), c("span", {
+			key: 0,
+			id: g(k),
+			class: "text-destructive block text-xs"
+		}, h(g(O)), 9, C)) : s("", !0)]));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };
 
 //# sourceMappingURL=TextInputCell.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/table/TextInputCell.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_normalizeClass","_unref","_toDisplayString","_createCommentVNode","_createVNode","Icon","Input","_withKeys","Icon_default","Input_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","TextInputCell_vue_vue_type_script_setup_true_lang_default","props","__props","schema","computed","useCellUpdate","initial","value","ref","grouped","openBlock","createElementBlock","_cache","withModifiers","createElementVNode","normalizeClass","unref","cn","error","toDisplayString","createCommentVNode","colorClass","textColorClasses","createVNode","saving","$event","update","withKeys"],"sources":["../../../src/components/table/TextInputCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TextInputColumnSchema } from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Input from '../ui/Input.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as TextInputColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst initial =\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state)\nconst value = ref(initial)\n// `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.\nconst grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))\n</script>\n\n<template>\n  <span @click.stop>\n    <span\n      :data-slot=\"grouped ? 'input-group' : undefined\"\n      :class=\"\n        grouped\n          ? cn(\n              'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-8 min-w-32 items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',\n              error && 'border-destructive',\n            )\n          : 'contents'\n      \"\n    >\n      <span\n        v-if=\"props.cell.prefix\"\n        data-slot=\"input-prefix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-e px-2 text-sm\"\n        >{{ props.cell.prefix }}</span\n      >\n      <span :class=\"cn('relative block', grouped && 'min-w-0 flex-1')\">\n        <span\n          v-if=\"schema.prefixIcon\"\n          data-slot=\"input-prefix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.prefixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.prefixIcon\" class=\"size-4\" />\n        </span>\n        <Input\n          :type=\"schema.inputType\"\n          :model-value=\"value\"\n          :placeholder=\"schema.placeholder\"\n          :step=\"schema.step\"\n          :inputmode=\"schema.inputMode\"\n          :disabled=\"Boolean(props.cell.disabled) || saving\"\n          :aria-invalid=\"error ? true : undefined\"\n          :class=\"\n            cn(\n              'h-8 min-w-32',\n              schema.prefixIcon && 'ps-8',\n              schema.suffixIcon && 'pe-8',\n              grouped &&\n                'h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',\n            )\n          \"\n          @update:model-value=\"value = $event\"\n          @blur=\"value !== initial && void update(value)\"\n          @keydown.enter=\"($event.target as HTMLInputElement).blur()\"\n        />\n        <span\n          v-if=\"schema.suffixIcon\"\n          data-slot=\"input-suffix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.suffixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.suffixIcon\" class=\"size-4\" />\n        </span>\n      </span>\n      <span\n        v-if=\"props.cell.suffix\"\n        data-slot=\"input-suffix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-s px-2 text-sm\"\n        >{{ props.cell.suffix }}</span\n      >\n    </span>\n    <span v-if=\"error\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TextInputCell.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_normalizeClass","_unref","_toDisplayString","_createCommentVNode","_createVNode","Icon","Input","_withKeys","Icon_default","Input_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","TextInputCell_vue_vue_type_script_setup_true_lang_default","props","__props","schema","computed","useCellUpdate","errorId","useId","initial","value","ref","grouped","openBlock","createElementBlock","_cache","withModifiers","createElementVNode","normalizeClass","unref","cn","error","toDisplayString","createCommentVNode","colorClass","textColorClasses","createVNode","saving","$event","update","withKeys"],"sources":["../../../src/components/table/TextInputCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TextInputColumnSchema } from '@alfakit/core'\nimport { computed, ref, useId } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Input from '../ui/Input.vue'\nimport { useCellUpdate, type CellProps } from './cell-update'\n\nconst props = defineProps<CellProps>()\nconst schema = computed(() => props.column as TextInputColumnSchema)\nconst { update, saving, error } = useCellUpdate(props)\nconst errorId = useId()\n// The saved value: follows the cell after the table reloads, so changing the input back to\n// an earlier value is saved too.\nconst initial = computed(() =>\n  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),\n)\nconst value = ref(initial.value)\n// `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.\nconst grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))\n</script>\n\n<template>\n  <span @click.stop>\n    <span\n      :data-slot=\"grouped ? 'input-group' : undefined\"\n      :class=\"\n        grouped\n          ? cn(\n              'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-8 min-w-32 items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',\n              error && 'border-destructive',\n            )\n          : 'contents'\n      \"\n    >\n      <span\n        v-if=\"props.cell.prefix\"\n        data-slot=\"input-prefix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-e px-2 text-sm\"\n        >{{ props.cell.prefix }}</span\n      >\n      <span :class=\"cn('relative block', grouped && 'min-w-0 flex-1')\">\n        <span\n          v-if=\"schema.prefixIcon\"\n          data-slot=\"input-prefix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.prefixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.prefixIcon\" class=\"size-4\" />\n        </span>\n        <Input\n          :type=\"schema.inputType\"\n          :model-value=\"value\"\n          :placeholder=\"schema.placeholder\"\n          :step=\"schema.step\"\n          :inputmode=\"schema.inputMode\"\n          :disabled=\"Boolean(props.cell.disabled) || saving\"\n          :aria-label=\"props.column.label || props.column.name\"\n          :aria-invalid=\"error ? true : undefined\"\n          :aria-describedby=\"error ? errorId : undefined\"\n          :class=\"\n            cn(\n              'h-8 min-w-32',\n              schema.prefixIcon && 'ps-8',\n              schema.suffixIcon && 'pe-8',\n              grouped &&\n                'h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',\n            )\n          \"\n          @update:model-value=\"value = $event\"\n          @blur=\"value !== initial && void update(value)\"\n          @keydown.enter=\"($event.target as HTMLInputElement).blur()\"\n        />\n        <span\n          v-if=\"schema.suffixIcon\"\n          data-slot=\"input-suffix-icon\"\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              'pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2',\n              colorClass(textColorClasses, schema.suffixIconColor, 'gray'),\n            )\n          \"\n        >\n          <Icon :name=\"schema.suffixIcon\" class=\"size-4\" />\n        </span>\n      </span>\n      <span\n        v-if=\"props.cell.suffix\"\n        data-slot=\"input-suffix\"\n        class=\"text-muted-foreground bg-muted/50 flex items-center border-s px-2 text-sm\"\n        >{{ props.cell.suffix }}</span\n      >\n    </span>\n    <span v-if=\"error\" :id=\"errorId\" class=\"text-destructive block text-xs\">{{ error }}</span>\n  </span>\n</template>\n"],"mappings":"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"}

package/dist/components.css

@@ -0,0 +1,347 @@
+/*
+ * Component styles shared by panels (themes.css) and by Alfakit outside panels
+ * (standalone.css, starter-kit panels): chart colours, RichEditor columns, the calendar,
+ * tree and Kanban plugins, and field positioning. They read the theme tokens (`--primary`,
+ * `--border`…), whichever stylesheet defines them. Copied into each renderer's dist.
+ */
+
+/* ------------------------------------------------------------------ Charts */
+
+/*
+ * Chart.js paints axes, legends and tooltips on the canvas, so chart widgets read these
+ * properties from <html> (re-read when the theme or dark mode changes). Colours take any
+ * CSS colour; the widths and radius are unitless numbers. Override them in a theme:
+ *   :root[data-alfakit-theme~='acme'] { --chart-tooltip-bg: oklch(0.2 0 0); }
+ * Stat sparklines (`[data-slot='stat-chart']`) use the `--stat-chart-*` properties.
+ */
+:root {
+  --chart-text: var(--muted-foreground);
+  --chart-grid: var(--border);
+  --chart-legend-foreground: var(--muted-foreground);
+  --chart-tooltip-bg: var(--popover);
+  --chart-tooltip-foreground: var(--popover-foreground);
+  --chart-tooltip-border: var(--border);
+  --chart-tooltip-border-width: 1;
+  --chart-tooltip-radius: 6;
+  --stat-chart-stroke-width: 2;
+  --stat-chart-fill-opacity: 0.12;
+}
+
+/*
+ * RichEditor `grid` column blocks and `lead` / `small` text, in the editor and in rendered
+ * content (`RichContentRenderer`). Columns stack on small screens. Stored as
+ * `<div data-type="grid" class="alfakit-grid alfakit-grid-cols-2"><div data-type="gridColumn">`
+ * and `<p class="alfakit-lead">`; copy these rules when showing content outside a panel.
+ */
+:where(.alfakit-grid) {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr);
+  margin-block: 0.5rem;
+}
+:where(.alfakit-grid-column) {
+  min-width: 0;
+}
+:where(.alfakit-grid-column) > :first-child {
+  margin-block-start: 0;
+}
+@media (min-width: 768px) {
+  :where(.alfakit-grid-cols-2) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  :where(.alfakit-grid-cols-3) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  :where(.alfakit-grid-cols-4) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  :where(.alfakit-grid-cols-5) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  :where(.alfakit-grid-cols-6) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+:where([contenteditable] .alfakit-grid-column) {
+  border: 1px dashed var(--border);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+:where(.alfakit-lead) {
+  font-size: 1.125em;
+  line-height: 1.6;
+}
+:where(.alfakit-prose small) {
+  font-size: 0.8125em;
+}
+
+/* ---------------------------------------------------------- Calendar and tree */
+
+/*
+ * The calendar widget (alfasix/alfakit-calendar) draws FullCalendar inside
+ * `[data-slot="calendar"]`; FullCalendar reads these `--fc-*` variables, so every theme's
+ * tokens (and dark mode) apply. Override them on the slot to restyle one calendar.
+ */
+:where(.fc[data-slot='calendar']) {
+  --fc-small-font-size: 0.75rem;
+  --fc-page-bg-color: var(--card);
+  --fc-neutral-bg-color: var(--muted);
+  --fc-neutral-text-color: var(--muted-foreground);
+  --fc-border-color: var(--border);
+  --fc-button-text-color: var(--foreground);
+  --fc-button-bg-color: var(--background);
+  --fc-button-border-color: var(--border);
+  --fc-button-hover-bg-color: var(--accent);
+  --fc-button-hover-border-color: var(--border);
+  --fc-button-active-bg-color: var(--secondary);
+  --fc-button-active-border-color: var(--border);
+  --fc-event-bg-color: var(--primary);
+  --fc-event-border-color: var(--primary);
+  --fc-event-text-color: var(--primary-foreground);
+  --fc-event-selected-overlay-color: color-mix(in oklab, var(--foreground) 25%, transparent);
+  --fc-more-link-bg-color: var(--muted);
+  --fc-more-link-text-color: var(--foreground);
+  --fc-non-business-color: color-mix(in oklab, var(--muted) 60%, transparent);
+  --fc-bg-event-color: var(--primary);
+  --fc-bg-event-opacity: 0.2;
+  --fc-highlight-color: color-mix(in oklab, var(--primary) 15%, transparent);
+  --fc-today-bg-color: color-mix(in oklab, var(--primary) 6%, transparent);
+  --fc-now-indicator-color: var(--destructive);
+  --fc-list-event-hover-bg-color: var(--accent);
+  color: var(--card-foreground);
+}
+/*
+ * FullCalendar puts its `fc` class on the slot element itself and injects its own CSS
+ * (`.fc .fc-button`, two classes), so these rules are plain selectors anchored on
+ * `.fc[data-slot='calendar']` (three) rather than `:where()`, which would always lose.
+ * Restyle one calendar with a more specific selector or with the `--fc-*` variables.
+ */
+.fc[data-slot='calendar'] .fc-toolbar-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  color: var(--foreground);
+}
+.fc[data-slot='calendar'] .fc-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.25rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  box-shadow: none;
+  text-transform: capitalize;
+}
+.fc[data-slot='calendar'] .fc-button .fc-icon {
+  font-size: 1.125rem;
+}
+.fc[data-slot='calendar'] .fc-button-group > .fc-button:not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.fc[data-slot='calendar'] .fc-button-group > .fc-button:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.fc[data-slot='calendar'] .fc-button-primary:disabled {
+  opacity: 0.5;
+}
+.fc[data-slot='calendar'] .fc-button-primary:not(:disabled).fc-button-active,
+.fc[data-slot='calendar'] .fc-button-primary:not(:disabled):active {
+  color: var(--secondary-foreground);
+}
+.fc[data-slot='calendar'] .fc-button-primary:focus,
+.fc[data-slot='calendar'] .fc-button-primary:not(:disabled).fc-button-active:focus,
+.fc[data-slot='calendar'] .fc-button-primary:not(:disabled):active:focus {
+  box-shadow: none;
+}
+.fc[data-slot='calendar'] .fc-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  z-index: 2;
+}
+.fc[data-slot='calendar'] a {
+  color: inherit;
+}
+.fc[data-slot='calendar'] .fc-daygrid-day-number,
+.fc[data-slot='calendar'] .fc-col-header-cell-cushion {
+  text-decoration: none;
+}
+.fc[data-slot='calendar'] .fc-col-header-cell-cushion {
+  padding-block: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+.fc[data-slot='calendar'] .fc-daygrid-day-number {
+  font-size: 0.875rem;
+}
+.fc[data-slot='calendar'] .fc-day-other .fc-daygrid-day-number {
+  color: var(--muted-foreground);
+}
+/* Today: a tinted cell (`--fc-today-bg-color`) and the date in a primary pill. */
+.fc[data-slot='calendar'] .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  margin: 0.25rem;
+  padding: 0 0.375rem;
+  border-radius: 9999px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-weight: 600;
+}
+.fc[data-slot='calendar'] .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
+  color: var(--primary);
+  font-weight: 600;
+}
+.fc[data-slot='calendar'] .fc-event {
+  border-radius: min(var(--radius), 0.375rem);
+}
+.fc[data-slot='calendar'] .fc-daygrid-event,
+.fc[data-slot='calendar'] .fc-timegrid-event .fc-event-main,
+.fc[data-slot='calendar'] .fc-list-event td {
+  font-size: 0.75rem;
+}
+/* Clipped titles keep their beginning and end with an ellipsis, also a Latin title in a
+   right-to-left calendar (its direction follows its own text). */
+.fc[data-slot='calendar'] .fc-event-title {
+  text-overflow: ellipsis;
+  unicode-bidi: plaintext;
+  text-align: start;
+}
+.fc[data-slot='calendar'] .fc-daygrid-dot-event:hover,
+.fc[data-slot='calendar'] .fc-daygrid-dot-event.fc-event-mirror {
+  background: var(--accent);
+}
+.fc[data-slot='calendar'] .fc-list-day-cushion,
+.fc[data-slot='calendar'] .fc-popover-header {
+  color: var(--foreground);
+}
+.fc[data-slot='calendar'] .fc-popover {
+  border-radius: var(--radius);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  overflow: hidden;
+}
+.fc[data-slot='calendar'] .fc-timegrid-slot-label,
+.fc[data-slot='calendar'] .fc-timegrid-axis,
+.fc[data-slot='calendar'] .fc-list-event-time {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+/*
+ * The list view hides its column headers for screen readers with `left: -10000px`. Right to
+ * left that is scrollable overflow: the whole page gains a 10 000 px horizontal scroll and the
+ * top bar slides under the sidebar. Clip it in place instead (still read by screen readers).
+ */
+.fc[data-slot='calendar'] .fc-list-table thead {
+  left: auto;
+  inset-inline-start: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * Fields contain what they position. Headless switches, checkboxes and radios render a
+ * visually hidden native input beside the control, absolutely positioned (and shifted by
+ * -100%); without a positioned field it lands at the page edge and, right to left, widens
+ * the page on phones.
+ */
+:where([data-slot='field']) {
+  position: relative;
+}
+
+/*
+ * Narrow screens: FullCalendar keeps its header toolbar on one row, wider than a phone.
+ * Its chunks (navigation, title, views) wrap instead, and the title shrinks. Flex gaps and
+ * `justify-content` follow the writing direction, so this works right to left too. (Plain
+ * selectors: FullCalendar injects its own CSS, which would beat `:where()`; the slot is
+ * the `.fc` element itself.)
+ */
+@media (max-width: 39.99rem) {
+  [data-slot='calendar'] .fc-toolbar.fc-header-toolbar {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  [data-slot='calendar'] .fc-toolbar .fc-toolbar-chunk {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  [data-slot='calendar'] .fc-toolbar .fc-toolbar-title {
+    font-size: 1rem;
+    overflow-wrap: anywhere;
+  }
+  [data-slot='calendar'] .fc-toolbar .fc-button {
+    font-size: 0.8125rem;
+  }
+}
+
+/*
+ * The tree (alfasix/alfakit-tree): the drop indicator while dragging. Rows carry
+ * `data-drop="before|after|inside"`; lines are drawn above or below the row, so they
+ * need no direction.
+ */
+:where([data-slot='tree-item'][data-drop='before']) {
+  box-shadow: inset 0 2px 0 0 var(--primary);
+}
+:where([data-slot='tree-item'][data-drop='after']) {
+  box-shadow: inset 0 -2px 0 0 var(--primary);
+}
+:where([data-slot='tree-item'][data-drop='inside']) {
+  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+  outline: 1px dashed var(--primary);
+  outline-offset: -1px;
+}
+
+/*
+ * The Kanban board (alfasix/alfakit-kanban). A card being dragged leaves a dashed
+ * placeholder (`data-picked="pointer"`) while a copy follows the pointer
+ * (`data-slot="kanban-ghost"`); a card picked up with the keyboard is lifted
+ * (`data-picked="keyboard"`). A list the picked card may not enter has `data-refused`.
+ */
+:where([data-slot='kanban-card'][data-picked='pointer']) {
+  opacity: 0.45;
+}
+:where([data-slot='kanban-card'][data-picked='pointer'] > [data-slot='kanban-card-body']) {
+  border-style: dashed;
+  box-shadow: none;
+}
+:where([data-slot='kanban-card'][data-picked='keyboard'] > [data-slot='kanban-card-body']) {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
+}
+:where([data-slot='kanban-card'][data-saving]) {
+  opacity: 0.7;
+}
+:where([data-slot='kanban-ghost']) {
+  cursor: grabbing;
+  list-style: none;
+  box-shadow: 0 18px 40px -16px color-mix(in oklab, var(--foreground) 55%, transparent);
+}
+:where([data-slot='kanban-dropzone'][data-refused]) {
+  background-color: color-mix(in oklab, var(--destructive) 8%, transparent);
+  outline: 1px dashed var(--destructive);
+  outline-offset: -1px;
+}
+:where(body[data-kanban-dragging]) {
+  cursor: grabbing;
+  user-select: none;
+  -webkit-user-select: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot='kanban-card'] > [data-slot='kanban-card-body']) {
+    transition: none;
+  }
+}