@sparklingopinions/sparkling-ui 0.2.2 → 0.4.0

package/dist/components/Popover/Popover.vue_vue_type_script_setup_true_lang.js

@@ -10,70 +10,78 @@ var _ = /*@__PURE__*/ n({
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		width: { default: "16rem" }
 	},
 	emits: ["show", "hide"],
 	setup(n, { expose: _, emit: v }) {
-		let y = n, b = v, x = l(), S = o(!1), C = o(), w = o(), T = o();
-		function E(e, t) {
-			w.value = e.currentTarget, C.value = t ?? w.value, T.value = x["aria-label"] ?? w.value?.getAttribute("aria-label") ?? w.value?.textContent?.trim(), S.value = !0;
+		let y = n, b = v, x = l(), S = o(!1), C = o(), w = o(), T = o(), E = !1;
+		function D(e, t) {
+			w.value = e.currentTarget, C.value = t ?? w.value, T.value = x["aria-label"] ?? w.value?.getAttribute("aria-label") ?? w.value?.textContent?.trim(), E = !1, S.value = !0;
 		}
-		function D() {
+		function O() {
 			S.value = !1;
 		}
-		function O(e, t) {
-			S.value ? D() : E(e, t);
+		function k(e, t) {
+			S.value ? O() : D(e, t);
 		}
 		_({
-			show: E,
-			hide: D,
-			toggle: O
+			show: D,
+			hide: O,
+			toggle: k
 		});
-		function k(e) {
-			return e instanceof Node && [C.value, w.value].some((t) => t?.contains(e));
-		}
 		function A(e) {
-			k(e.detail.originalEvent.target) && e.preventDefault();
+			return e instanceof Node && [C.value, w.value].some((t) => t?.contains(e));
 		}
 		function j(e) {
-			if (!y.closeOnEscape) return e.preventDefault();
-			C.value?.focus();
+			A(e.detail.originalEvent.target) ? e.preventDefault() : E = !0;
 		}
 		function M(e) {
-			e.preventDefault(), e.target?.querySelector("[autofocus]")?.focus();
+			y.closeOnEscape || e.preventDefault();
 		}
 		function N(e) {
-			e.target instanceof Node && e.target.contains(C.value ?? null) && D();
+			e.preventDefault();
+			let t = document.activeElement;
+			(!t || t === document.body || e.target.contains(t)) && !E && C.value?.focus();
+		}
+		function P(e) {
+			e.preventDefault();
+			let t = e.target?.querySelector("[role=\"dialog\"]");
+			(t?.querySelector("[autofocus]") ?? t)?.focus();
+		}
+		function F(e) {
+			e.target instanceof Node && e.target.contains(C.value ?? null) && O();
 		}
 		return u(S, (e) => {
-			e ? (window.addEventListener("scroll", N, !0), window.addEventListener("resize", D), b("show")) : (window.removeEventListener("scroll", N, !0), window.removeEventListener("resize", D), b("hide"));
+			e ? (window.addEventListener("scroll", F, !0), window.addEventListener("resize", O), b("show")) : (window.removeEventListener("scroll", F, !0), window.removeEventListener("resize", O), b("hide"));
 		}), i(() => {
-			window.removeEventListener("scroll", N, !0), window.removeEventListener("resize", D);
+			window.removeEventListener("scroll", F, !0), window.removeEventListener("resize", O);
 		}), (i, o) => (a(), e(c(g), {
 			open: S.value,
-			"onUpdate:open": o[2] ||= (e) => S.value = e
+			"onUpdate:open": o[1] ||= (e) => S.value = e
 		}, {
 			default: d(() => [t(c(p), { reference: C.value }, null, 8, ["reference"]), t(c(h), null, {
 				default: d(() => [t(c(m), r(i.$attrs, {
 					align: "start",
 					"align-offset": n.alignOffset,
 					"aria-label": T.value,
-					class: "z-[1000] block w-64 origin-center rounded-lg border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in",
+					class: "z-[1100] block origin-center rounded-lg border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in",
 					side: "bottom",
 					"side-offset": n.offset,
-					"trap-focus": "",
-					onCloseAutoFocus: o[0] ||= f(() => {}, ["prevent"]),
-					onEscapeKeyDown: j,
-					onFocusOutside: o[1] ||= f(() => {}, ["prevent"]),
-					onOpenAutoFocus: M,
-					onPointerDownOutside: A
+					style: { width: n.width },
+					onCloseAutoFocus: N,
+					onEscapeKeyDown: M,
+					onFocusOutside: o[0] ||= f(() => {}, ["prevent"]),
+					onOpenAutoFocus: P,
+					onPointerDownOutside: j
 				}), {
-					default: d(() => [s(i.$slots, "default", { hide: D })]),
+					default: d(() => [s(i.$slots, "default", { hide: O })]),
 					_: 3
 				}, 16, [
 					"align-offset",
 					"aria-label",
-					"side-offset"
+					"side-offset",
+					"style"
 				])]),
 				_: 3
 			})]),

package/dist/components/Popover/Popover.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_withModifiers","_renderSlot","Popover_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","attrs","useAttrs","open","ref","anchor","opener","label","show","event","target","hide","toggle","isOnAnchor","el","onPointerDownOutside","onEscape","onOpenAutoFocus","onScroll","watch","isOpen","onBeforeUnmount","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","PopoverPortal","PopoverContent","mergeProps","_ctx","withModifiers","renderSlot"],"sources":["../../../src/components/Popover/Popover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, useAttrs, watch } from 'vue'\n\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'\n\nexport interface PopoverProps {\n  /** The gap to the anchor, in px; negative overlaps it. */\n  offset?: number\n  /** Shifts it along the anchor's edge, in px. */\n  alignOffset?: number\n  closeOnEscape?: boolean\n}\n\n// Root is Reka's renderless PopoverRoot: class and attributes belong on the panel.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<PopoverProps>(), { offset: 4, alignOffset: 0, closeOnEscape: true })\n\nconst emit = defineEmits<{ show: []; hide: [] }>()\n\nconst attrs = useAttrs()\n\nconst open = ref(false)\nconst anchor = ref<HTMLElement>()\n// What was clicked to open it; clicks on it toggle the popover rather than counting as outside.\nconst opener = ref<HTMLElement>()\nconst label = ref<string>()\n\n/** Opens below the event's element, or below `target` when given. */\nfunction show(event: Event, target?: HTMLElement) {\n  opener.value = event.currentTarget as HTMLElement\n  anchor.value = target ?? opener.value\n  // A dialog needs a name: an aria-label given to the popover, or else the name of the element it opened from.\n  label.value =\n    (attrs['aria-label'] as string | undefined) ??\n    opener.value?.getAttribute('aria-label') ??\n    opener.value?.textContent?.trim()\n  open.value = true\n}\n\nfunction hide() {\n  open.value = false\n}\n\nfunction toggle(event: Event, target?: HTMLElement) {\n  if (open.value) hide()\n  else show(event, target)\n}\n\ndefineExpose({ show, hide, toggle })\n\nfunction isOnAnchor(target: EventTarget | null) {\n  return target instanceof Node && [anchor.value, opener.value].some((el) => el?.contains(target))\n}\n\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n  if (isOnAnchor(event.detail.originalEvent.target)) event.preventDefault()\n}\n\nfunction onEscape(event: KeyboardEvent) {\n  if (!props.closeOnEscape) return event.preventDefault()\n  anchor.value?.focus()\n}\n\n// Only an [autofocus] element inside takes focus on open; otherwise it stays where it was.\nfunction onOpenAutoFocus(event: Event) {\n  event.preventDefault()\n  ;(event.target as HTMLElement | null)?.querySelector<HTMLElement>('[autofocus]')?.focus()\n}\n\n// It closes when the page moves under it: a scrolling ancestor of the anchor, or a resized window.\nfunction onScroll(event: Event) {\n  if (event.target instanceof Node && event.target.contains(anchor.value ?? null)) hide()\n}\n\nwatch(open, (isOpen) => {\n  if (isOpen) {\n    window.addEventListener('scroll', onScroll, true)\n    window.addEventListener('resize', hide)\n    emit('show')\n  } else {\n    window.removeEventListener('scroll', onScroll, true)\n    window.removeEventListener('resize', hide)\n    emit('hide')\n  }\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('scroll', onScroll, true)\n  window.removeEventListener('resize', hide)\n})\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor :reference=\"anchor\" />\n    <PopoverPortal>\n      <PopoverContent\n        v-bind=\"$attrs\"\n        align=\"start\"\n        :align-offset=\"alignOffset\"\n        :aria-label=\"label\"\n        class=\"z-[1000] block w-64 origin-center rounded-lg border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in\"\n        side=\"bottom\"\n        :side-offset=\"offset\"\n        trap-focus\n        @close-auto-focus.prevent\n        @escape-key-down=\"onEscape\"\n        @focus-outside.prevent\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @pointer-down-outside=\"onPointerDownOutside\"\n      >\n        <slot :hide=\"hide\" />\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAgBA,IAAMY,IAAQC,GAERC,IAAOH,GAEPI,IAAQC,EAAS,GAEjBC,IAAOC,EAAI,EAAK,GAChBC,IAASD,EAAiB,GAE1BE,IAASF,EAAiB,GAC1BG,IAAQH,EAAY;EAG1B,SAASI,EAAK,GAAc,GAAsB;GAQhD,AAPA,EAAO,QAAQC,EAAM,eACrB,EAAO,QAAQC,KAAUJ,EAAO,OAEhC,EAAM,QACHL,EAAM,iBACPK,EAAO,OAAO,aAAa,YAAY,KACvCA,EAAO,OAAO,aAAa,KAAK,GAClC,EAAK,QAAQ;EACf;EAEA,SAASK,IAAO;GACd,EAAK,QAAQ;EACf;EAEA,SAASC,EAAO,GAAc,GAAsB;GAClD,AAAIT,EAAK,QAAOQ,EAAK,IAChBH,EAAKC,GAAOC,CAAM;EACzB;EAEA,EAAa;GAAE;GAAM;GAAM;EAAO,CAAC;EAEnC,SAASG,EAAW,GAA4B;GAC9C,OAAOH,aAAkB,QAAQ,CAACL,EAAO,OAAOC,EAAO,KAAK,CAAC,CAAC,MAAM,MAAOQ,GAAI,SAASJ,CAAM,CAAC;EACjG;EAEA,SAASK,EAAqB,GAAqD;GACjF,AAAIF,EAAWJ,EAAM,OAAO,cAAc,MAAM,KAAGA,EAAM,eAAe;EAC1E;EAEA,SAASO,EAAS,GAAsB;GACtC,IAAI,CAAClB,EAAM,eAAe,OAAOW,EAAM,eAAe;GACtD,EAAO,OAAO,MAAM;EACtB;EAGA,SAASQ,EAAgB,GAAc;GAEpC,AADDR,EAAM,eAAe,GACpBA,EAAO,QAA+B,cAA2B,aAAa,CAAC,EAAE,MAAM;EAC1F;EAGA,SAASS,EAAS,GAAc;GAC9B,AAAIT,EAAM,kBAAkB,QAAQA,EAAM,OAAO,SAASJ,EAAO,SAAS,IAAI,KAAGM,EAAK;EACxF;E,OAEAQ,EAAMhB,IAAO,MAAW;GACtB,AAAIiB,KACF,OAAO,iBAAiB,UAAUF,GAAU,EAAI,GAChD,OAAO,iBAAiB,UAAUP,CAAI,GACtCX,EAAK,MAAM,MAEX,OAAO,oBAAoB,UAAUkB,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUP,CAAI,GACzCX,EAAK,MAAM;EAEf,CAAC,GAEDqB,QAAsB;GAEpB,AADA,OAAO,oBAAoB,UAAUH,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUP,CAAI;EAC3C,CAAC,I,UAICxB,EAAA,GAAAC,EAqBcC,EAAAoC,CAAA,GAAA;GArBO,MAAMtB,EAAA;GAAA,iBAAA,AAAAuB,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC7B,SAAArC,QAAqC,CAArCC,EAAqCF,EAAAyC,CAAA,GAAA,EAArB,WAAWzB,EAAA,MAAM,GAAA,MAAA,GAAA,CAAA,WAAA,CAAA,GACjCd,EAkBgBF,EAAA0C,CAAA,GAAA,MAAA;IAjBd,SAAAzC,QAgBiB,CAhBjBC,EAgBiBF,EAAA2C,CAAA,GAhBjBxC,EACUN,EAeO,QAfD;KACd,OAAM;KACL,gBAAca,EAAA;KACd,cAAYQ,EAAA;KACb,OAAM;KACN,MAAK;KACJ,eAAaR,EAAA;KACd,cAAA;KACC,kBAAgB,AAAA2B,EAAA,OAAAjC,QAAjB,CAAA,GAAyB,CAAA,SAAA,CAAA;KACxB,iBAAiBuB;KACjB,gBAAa,AAAAU,EAAA,OAAAjC,QAAd,CAAA,GAAsB,CAAA,SAAA,CAAA;KACJ;KACK;;KAEvB,SAAAH,QAAqB,CAArBI,EAAqBwC,EAAA,QAAA,WAAA,EAAR,QAAI,CAAA,C"}
+{"version":3,"file":"Popover.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_withModifiers","_renderSlot","Popover_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","attrs","useAttrs","open","ref","anchor","opener","label","pressedOutside","show","event","target","hide","toggle","isOnAnchor","el","onPointerDownOutside","onEscape","onCloseAutoFocus","active","onOpenAutoFocus","panel","onScroll","watch","isOpen","onBeforeUnmount","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","PopoverPortal","PopoverContent","mergeProps","_ctx","withModifiers","renderSlot"],"sources":["../../../src/components/Popover/Popover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, useAttrs, watch } from 'vue'\n\nimport { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'\n\nexport interface PopoverProps {\n  /** The gap to the anchor, in px; negative overlaps it. */\n  offset?: number\n  /** Shifts it along the anchor's edge, in px. */\n  alignOffset?: number\n  closeOnEscape?: boolean\n  /** The panel's width, e.g. `20rem`. */\n  width?: string\n}\n\n// Root is Reka's renderless PopoverRoot: class and attributes belong on the panel.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n  offset: 4,\n  alignOffset: 0,\n  closeOnEscape: true,\n  width: '16rem'\n})\n\nconst emit = defineEmits<{ show: []; hide: [] }>()\n\nconst attrs = useAttrs()\n\nconst open = ref(false)\nconst anchor = ref<HTMLElement>()\n// What was clicked to open it; clicks on it toggle the popover rather than counting as outside.\nconst opener = ref<HTMLElement>()\nconst label = ref<string>()\n// A press outside closes it and leaves focus to what was pressed.\nlet pressedOutside = false\n\n/** Opens below the event's element, or below `target` when given. */\nfunction show(event: Event, target?: HTMLElement) {\n  opener.value = event.currentTarget as HTMLElement\n  anchor.value = target ?? opener.value\n  // A dialog needs a name: an aria-label given to the popover, or else the name of the element it opened from.\n  label.value =\n    (attrs['aria-label'] as string | undefined) ??\n    opener.value?.getAttribute('aria-label') ??\n    opener.value?.textContent?.trim()\n  pressedOutside = false\n  open.value = true\n}\n\nfunction hide() {\n  open.value = false\n}\n\nfunction toggle(event: Event, target?: HTMLElement) {\n  if (open.value) hide()\n  else show(event, target)\n}\n\ndefineExpose({ show, hide, toggle })\n\nfunction isOnAnchor(target: EventTarget | null) {\n  return target instanceof Node && [anchor.value, opener.value].some((el) => el?.contains(target))\n}\n\nfunction onPointerDownOutside(event: CustomEvent<{ originalEvent: PointerEvent }>) {\n  if (isOnAnchor(event.detail.originalEvent.target)) event.preventDefault()\n  else pressedOutside = true\n}\n\nfunction onEscape(event: KeyboardEvent) {\n  if (!props.closeOnEscape) event.preventDefault()\n}\n\n// Otherwise focus left in the panel goes back to the anchor.\nfunction onCloseAutoFocus(event: Event) {\n  event.preventDefault()\n  const active = document.activeElement\n  const inPanel = !active || active === document.body || (event.target as HTMLElement).contains(active)\n  if (inPanel && !pressedOutside) anchor.value?.focus()\n}\n\n// Focus goes to an [autofocus] element inside, or else the panel, so Tab moves through it and Escape works at once.\n// The event comes from Reka's positioning wrapper around the panel.\nfunction onOpenAutoFocus(event: Event) {\n  event.preventDefault()\n  const wrapper = event.target as HTMLElement | null\n  const panel = wrapper?.querySelector<HTMLElement>('[role=\"dialog\"]')\n  ;(panel?.querySelector<HTMLElement>('[autofocus]') ?? panel)?.focus()\n}\n\n// It closes when the page moves under it: a scrolling ancestor of the anchor, or a resized window.\nfunction onScroll(event: Event) {\n  if (event.target instanceof Node && event.target.contains(anchor.value ?? null)) hide()\n}\n\nwatch(open, (isOpen) => {\n  if (isOpen) {\n    window.addEventListener('scroll', onScroll, true)\n    window.addEventListener('resize', hide)\n    emit('show')\n  } else {\n    window.removeEventListener('scroll', onScroll, true)\n    window.removeEventListener('resize', hide)\n    emit('hide')\n  }\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('scroll', onScroll, true)\n  window.removeEventListener('resize', hide)\n})\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor :reference=\"anchor\" />\n    <PopoverPortal>\n      <PopoverContent\n        v-bind=\"$attrs\"\n        align=\"start\"\n        :align-offset=\"alignOffset\"\n        :aria-label=\"label\"\n        class=\"z-[1100] block origin-center rounded-lg border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-xl data-[state=closed]:animate-sui-overlay-out data-[state=open]:animate-sui-overlay-in\"\n        side=\"bottom\"\n        :side-offset=\"offset\"\n        :style=\"{ width }\"\n        @close-auto-focus=\"onCloseAutoFocus\"\n        @escape-key-down=\"onEscape\"\n        @focus-outside.prevent\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @pointer-down-outside=\"onPointerDownOutside\"\n      >\n        <slot :hide=\"hide\" />\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAkBA,IAAMY,IAAQC,GAORC,IAAOH,GAEPI,IAAQC,EAAS,GAEjBC,IAAOC,EAAI,EAAK,GAChBC,IAASD,EAAiB,GAE1BE,IAASF,EAAiB,GAC1BG,IAAQH,EAAY,GAEtBI,IAAiB;EAGrB,SAASC,EAAK,GAAc,GAAsB;GAShD,AARA,EAAO,QAAQC,EAAM,eACrB,EAAO,QAAQC,KAAUL,EAAO,OAEhC,EAAM,QACHL,EAAM,iBACPK,EAAO,OAAO,aAAa,YAAY,KACvCA,EAAO,OAAO,aAAa,KAAK,GAClC,IAAiB,IACjB,EAAK,QAAQ;EACf;EAEA,SAASM,IAAO;GACd,EAAK,QAAQ;EACf;EAEA,SAASC,EAAO,GAAc,GAAsB;GAClD,AAAIV,EAAK,QAAOS,EAAK,IAChBH,EAAKC,GAAOC,CAAM;EACzB;EAEA,EAAa;GAAE;GAAM;GAAM;EAAO,CAAC;EAEnC,SAASG,EAAW,GAA4B;GAC9C,OAAOH,aAAkB,QAAQ,CAACN,EAAO,OAAOC,EAAO,KAAK,CAAC,CAAC,MAAM,MAAOS,GAAI,SAASJ,CAAM,CAAC;EACjG;EAEA,SAASK,EAAqB,GAAqD;GACjF,AAAIF,EAAWJ,EAAM,OAAO,cAAc,MAAM,IAAGA,EAAM,eAAe,IACnE,IAAiB;EACxB;EAEA,SAASO,EAAS,GAAsB;GACtC,AAAKnB,EAAM,iBAAeY,EAAM,eAAe;EACjD;EAGA,SAASQ,EAAiB,GAAc;GACtC,EAAM,eAAe;GACrB,IAAMC,IAAS,SAAS;GAExB,CADgB,CAACA,KAAUA,MAAW,SAAS,QAAST,EAAM,OAAuB,SAASS,CAAM,MACrF,CAACX,KAAgBH,EAAO,OAAO,MAAM;EACtD;EAIA,SAASe,EAAgB,GAAc;GACrC,EAAM,eAAe;GAErB,IAAMC,IADUX,EAAM,QACC,cAA2B,mBAAiB;GAClE,CAACW,GAAO,cAA2B,aAAa,KAAKA,EAAA,EAAQ,MAAM;EACtE;EAGA,SAASC,EAAS,GAAc;GAC9B,AAAIZ,EAAM,kBAAkB,QAAQA,EAAM,OAAO,SAASL,EAAO,SAAS,IAAI,KAAGO,EAAK;EACxF;E,OAEAW,EAAMpB,IAAO,MAAW;GACtB,AAAIqB,KACF,OAAO,iBAAiB,UAAUF,GAAU,EAAI,GAChD,OAAO,iBAAiB,UAAUV,CAAI,GACtCZ,EAAK,MAAM,MAEX,OAAO,oBAAoB,UAAUsB,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUV,CAAI,GACzCZ,EAAK,MAAM;EAEf,CAAC,GAEDyB,QAAsB;GAEpB,AADA,OAAO,oBAAoB,UAAUH,GAAU,EAAI,GACnD,OAAO,oBAAoB,UAAUV,CAAI;EAC3C,CAAC,I,UAICzB,EAAA,GAAAC,EAqBcC,EAAAwC,CAAA,GAAA;GArBO,MAAM1B,EAAA;GAAA,iBAAA,AAAA2B,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC7B,SAAAzC,QAAqC,CAArCC,EAAqCF,EAAA6C,CAAA,GAAA,EAArB,WAAW7B,EAAA,MAAM,GAAA,MAAA,GAAA,CAAA,WAAA,CAAA,GACjCd,EAkBgBF,EAAA8C,CAAA,GAAA,MAAA;IAjBd,SAAA7C,QAgBiB,CAhBjBC,EAgBiBF,EAAA+C,CAAA,GAhBjB5C,EACUN,EAeO,QAfD;KACd,OAAM;KACL,gBAAca,EAAA;KACd,cAAYQ,EAAA;KACb,OAAM;KACN,MAAK;KACJ,eAAaR,EAAA;KACb,OAAK,EAAA,OAAIA,EAAA,MAAK;KACI;KAClB,iBAAiBkB;KACjB,gBAAa,AAAAa,EAAA,OAAArC,QAAd,CAAA,GAAsB,CAAA,SAAA,CAAA;KACJ;KACK;;KAEvB,SAAAH,QAAqB,CAArBI,EAAqB4C,EAAA,QAAA,WAAA,EAAR,QAAI,CAAA,C"}

package/dist/components/PropertyList/Editable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.js","names":["_sfc_main","Editable_vue_vue_type_script_setup_true_lang_default","Editable_default"],"sources":["../../../src/components/PropertyList/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, toRaw, useAttrs, useTemplateRef, watch } from 'vue'\n\nimport Select from '../Select/Select.vue'\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Tag from '../Tag/Tag.vue'\nimport Textarea from '../Textarea/Textarea.vue'\n\nexport interface EditableProps {\n  /** `text` (one line), `multiline` (Shift+Enter for a new line), `select` (an outline Tag, picked from `options`) or `title`\n   *  (a record's 18px name). */\n  variant?: 'text' | 'multiline' | 'select' | 'title'\n  placeholder?: string\n  /** For `select`. */\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<EditableProps>(), {\n  variant: 'text',\n  placeholder: undefined,\n  options: () => []\n})\n\nconst emit = defineEmits<{ blur: [] }>()\n\nconst model = defineModel<string | SelectValue | null>({ default: null })\n\n// The class also styles the textarea; only the id and data- and aria- attributes go on the root. The name is said\n// before the value, not as an aria-label, which would hide the value from it.\nconst attrs = useAttrs()\nconst rootAttrs = computed(() =>\n  Object.fromEntries(\n    Object.entries(attrs).filter(([key]) => key !== 'aria-label' && (key === 'id' || /^(data|aria)-/.test(key)))\n  )\n)\nconst name = computed(() => (attrs['aria-label'] as string | undefined) ?? props.placeholder)\n\nconst title = computed(() => props.variant === 'title')\nconst multiline = computed(() => props.variant === 'multiline')\n\nconst local = ref(toRaw(model.value) as string | null)\nconst original = ref(local.value)\nconst editing = ref(false)\nconst wrapper = useTemplateRef<HTMLElement>('wrapper')\n\n// Follows the value from outside (a failed save rolled back, a refetch) unless it's being edited.\nwatch(model, (value) => {\n  if (editing.value) return\n  local.value = toRaw(value) as string | null\n  original.value = local.value\n})\n\nconst rows = computed(() => (title.value ? 1 : Math.max(1, Math.ceil((local.value?.length ?? 0) / 34))))\n\nasync function edit() {\n  if (props.disabled) return\n  editing.value = true\n  await nextTick()\n  wrapper.value?.querySelector('textarea')?.focus()\n}\n\nfunction save() {\n  editing.value = false\n  model.value = toRaw(local.value) || null\n  original.value = local.value\n  emit('blur')\n}\n\nfunction revert(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  local.value = original.value\n  editing.value = false\n}\n\nfunction onEnter(event: KeyboardEvent) {\n  if (multiline.value && event.shiftKey) return\n  event.preventDefault()\n  ;(event.target as HTMLElement).blur()\n}\n\nconst field =\n  'block w-full rounded-lg px-3 py-1.5 text-left text-sui-ink transition-colors outline-hidden focus-visible:sui-ring-field'\n</script>\n\n<!-- One value shown as plain text and edited where it is: click or Enter to edit, Enter or leaving to save, Escape to\n     undo. A `select` opens its list under the value instead. -->\n<template>\n  <Select\n    v-if=\"variant === 'select'\"\n    v-model=\"model as SelectValue | null\"\n    :aria-label=\"name\"\n    :disabled=\"disabled\"\n    :options=\"options\"\n    @update:model-value=\"emit('blur')\"\n  >\n    <template #trigger=\"{ open, toggle, selected }\">\n      <button\n        v-bind=\"rootAttrs\"\n        :aria-expanded=\"open\"\n        aria-haspopup=\"listbox\"\n        :class=\"[\n          field,\n          'max-w-[16rem] text-sm leading-5',\n          disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken'\n        ]\"\n        :disabled=\"disabled\"\n        type=\"button\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n        <Tag v-if=\"selected[0]\" :name=\"selected[0].label\" variant=\"outline\" />\n        <span v-else class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      </button>\n    </template>\n  </Select>\n  <div\n    v-else\n    v-bind=\"rootAttrs\"\n    ref=\"wrapper\"\n    class=\"relative\"\n    :class=\"[\n      field,\n      title\n        ? 'min-h-10 min-w-4 text-lg leading-7 font-semibold [&_textarea]:min-h-10 [&_textarea]:text-lg [&_textarea]:leading-7 [&_textarea]:font-semibold [&_textarea]:whitespace-nowrap [&_textarea]:placeholder:text-lg [&_textarea]:placeholder:font-semibold'\n        : 'max-w-[16rem] text-sm leading-5 [&_textarea]:placeholder:text-sm [&_textarea]:placeholder:leading-5',\n      disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken',\n      '[&_textarea]:bg-sui-surface [&_textarea]:placeholder:text-sui-ink-muted'\n    ]\"\n    role=\"button\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @click=\"edit\"\n    @keydown.enter=\"!editing && ($event.preventDefault(), edit())\"\n  >\n    <div>\n      <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n      <span v-if=\"!local\" class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      <span v-else :class=\"{ 'whitespace-pre-wrap': multiline }\">{{ local }}</span>\n    </div>\n    <div v-if=\"editing\" class=\"absolute inset-0 z-10\" :class=\"{ '-mt-px': title }\">\n      <Textarea\n        v-model=\"local\"\n        :aria-label=\"name\"\n        :auto-resize=\"!title\"\n        class=\"resize-none\"\n        :class=\"[$attrs.class, title && 'h-full px-3 py-1.5']\"\n        :placeholder=\"placeholder\"\n        :rows=\"rows\"\n        @blur=\"save\"\n        @keydown.enter.stop=\"onEnter\"\n        @keydown.esc.stop=\"revert\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Editable.js","names":["_sfc_main","Editable_vue_vue_type_script_setup_true_lang_default","Editable_default"],"sources":["../../../src/components/PropertyList/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, toRaw, useAttrs, useTemplateRef, watch } from 'vue'\n\nimport Select from '../Select/Select.vue'\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Tag from '../Tag/Tag.vue'\nimport Textarea from '../Textarea/Textarea.vue'\n\nexport interface EditableProps {\n  /** `text` (one line), `multiline` (Shift+Enter for a new line), `select` (an outline Tag, picked from `options`) or `title`\n   *  (a record's 18px name). */\n  variant?: 'text' | 'multiline' | 'select' | 'title'\n  placeholder?: string\n  /** For `select`. */\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<EditableProps>(), {\n  variant: 'text',\n  placeholder: undefined,\n  options: () => []\n})\n\nconst emit = defineEmits<{ blur: [] }>()\n\nconst model = defineModel<string | SelectValue | null>({ default: null })\n\n// Only the id, class and data- and aria- attributes go on the root. The name is said before the value, not as an\n// aria-label, which would hide the value from it.\nconst attrs = useAttrs()\nconst rootAttrs = computed(() =>\n  Object.fromEntries(\n    Object.entries(attrs).filter(\n      ([key]) => key !== 'aria-label' && (key === 'id' || key === 'class' || /^(data|aria)-/.test(key))\n    )\n  )\n)\nconst name = computed(() => (attrs['aria-label'] as string | undefined) ?? props.placeholder)\n\nconst title = computed(() => props.variant === 'title')\nconst multiline = computed(() => props.variant === 'multiline')\n\nconst local = ref(toRaw(model.value) as string | null)\nconst original = ref(local.value)\nconst editing = ref(false)\nconst wrapper = useTemplateRef<HTMLElement>('wrapper')\n\n// Follows the value from outside (a failed save rolled back, a refetch) unless it's being edited.\nwatch(model, (value) => {\n  if (editing.value) return\n  local.value = toRaw(value) as string | null\n  original.value = local.value\n})\n\nconst rows = computed(() => (title.value ? 1 : Math.max(1, Math.ceil((local.value?.length ?? 0) / 34))))\n\nasync function edit() {\n  if (props.disabled) return\n  editing.value = true\n  await nextTick()\n  wrapper.value?.querySelector('textarea')?.focus()\n}\n\nfunction save() {\n  editing.value = false\n  const value = toRaw(local.value) || null\n  // Leaving it untouched isn't a change: an empty value stays as it came, '' or null.\n  if (value !== (toRaw(model.value) || null)) model.value = value\n  original.value = local.value\n  emit('blur')\n}\n\nfunction revert(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  local.value = original.value\n  editing.value = false\n}\n\nfunction onEnter(event: KeyboardEvent) {\n  if (multiline.value && event.shiftKey) return\n  event.preventDefault()\n  ;(event.target as HTMLElement).blur()\n}\n\nconst field =\n  'block w-full rounded-lg border border-transparent px-[0.6875rem] py-1.25 text-left text-sui-ink transition-[background-color,border-color,box-shadow] outline-hidden focus-visible:border-sui-accent focus-visible:sui-ring-field'\n</script>\n\n<!-- One value shown as plain text and edited where it is: click or Enter to edit, Enter or leaving to save, Escape to\n     undo. A `select` opens its list under the value instead. -->\n<template>\n  <Select\n    v-if=\"variant === 'select'\"\n    v-model=\"model as SelectValue | null\"\n    :aria-label=\"name\"\n    :disabled=\"disabled\"\n    :options=\"options\"\n    @update:model-value=\"emit('blur')\"\n  >\n    <template #trigger=\"{ open, toggle, selected }\">\n      <button\n        v-bind=\"rootAttrs\"\n        :aria-expanded=\"open\"\n        aria-haspopup=\"listbox\"\n        :class=\"[\n          field,\n          'max-w-[16rem] text-sm leading-5',\n          disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken'\n        ]\"\n        :disabled=\"disabled\"\n        type=\"button\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n        <Tag v-if=\"selected[0]\" :name=\"selected[0].label\" variant=\"outline\" />\n        <span v-else class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      </button>\n    </template>\n  </Select>\n  <div\n    v-else\n    v-bind=\"rootAttrs\"\n    ref=\"wrapper\"\n    class=\"relative\"\n    :class=\"[\n      field,\n      title\n        ? 'min-h-10 min-w-4 text-lg leading-7 font-semibold [&_textarea]:min-h-10 [&_textarea]:text-lg [&_textarea]:leading-7 [&_textarea]:font-semibold [&_textarea]:whitespace-nowrap [&_textarea]:placeholder:text-lg [&_textarea]:placeholder:font-semibold'\n        : 'max-w-[16rem] text-sm leading-5 [&_textarea]:placeholder:text-sm [&_textarea]:placeholder:leading-5',\n      disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken',\n      '[&_textarea]:bg-sui-surface [&_textarea]:placeholder:text-sui-ink-muted'\n    ]\"\n    role=\"button\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @click=\"edit\"\n    @keydown.enter=\"!editing && ($event.preventDefault(), edit())\"\n  >\n    <div>\n      <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n      <span v-if=\"!local\" class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      <span v-else :class=\"{ 'whitespace-pre-wrap': multiline }\">{{ local }}</span>\n    </div>\n    <div v-if=\"editing\" class=\"absolute inset-0 z-10\" :class=\"{ '-mt-px': title }\">\n      <Textarea\n        v-model=\"local\"\n        :aria-label=\"name\"\n        :auto-resize=\"!title\"\n        class=\"resize-none\"\n        :class=\"title && 'h-full px-3 py-1.5'\"\n        :placeholder=\"placeholder\"\n        :rows=\"rows\"\n        @blur=\"save\"\n        @keydown.enter.stop=\"onEnter\"\n        @keydown.esc.stop=\"revert\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PropertyList/Editable.vue_vue_type_script_setup_true_lang.js

@@ -19,7 +19,7 @@ var T = [
 }, A = {
 	key: 1,
 	class: "text-sui-ink-muted"
-}, j = "block w-full rounded-lg px-3 py-1.5 text-left text-sui-ink transition-colors outline-hidden focus-visible:sui-ring-field", M = /*@__PURE__*/ l({
+}, j = "block w-full rounded-lg border border-transparent px-[0.6875rem] py-1.25 text-left text-sui-ink transition-[background-color,border-color,box-shadow] outline-hidden focus-visible:border-sui-accent focus-visible:sui-ring-field", M = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "Editable",
 	props: /*@__PURE__*/ u({
@@ -33,7 +33,7 @@ var T = [
 	}),
 	emits: /*@__PURE__*/ u(["blur"], ["update:modelValue"]),
 	setup(l, { emit: u }) {
-		let M = l, N = u, P = y(l, "modelValue"), F = v(), I = r(() => Object.fromEntries(Object.entries(F).filter(([e]) => e !== "aria-label" && (e === "id" || /^(data|aria)-/.test(e))))), L = r(() => F["aria-label"] ?? M.placeholder), R = r(() => M.variant === "title"), z = r(() => M.variant === "multiline"), B = h(_(P.value)), V = h(B.value), H = h(!1), U = b("wrapper");
+		let M = l, N = u, P = y(l, "modelValue"), F = v(), I = r(() => Object.fromEntries(Object.entries(F).filter(([e]) => e !== "aria-label" && (e === "id" || e === "class" || /^(data|aria)-/.test(e))))), L = r(() => F["aria-label"] ?? M.placeholder), R = r(() => M.variant === "title"), z = r(() => M.variant === "multiline"), B = h(_(P.value)), V = h(B.value), H = h(!1), U = b("wrapper");
 		x(P, (e) => {
 			H.value || (B.value = _(e), V.value = B.value);
 		});
@@ -42,7 +42,9 @@ var T = [
 			M.disabled || (H.value = !0, await f(), U.value?.querySelector("textarea")?.focus());
 		}
 		function K() {
-			H.value = !1, P.value = _(B.value) || null, V.value = B.value, N("blur");
+			H.value = !1;
+			let e = _(B.value) || null;
+			e !== (_(P.value) || null) && (P.value = e), V.value = B.value, N("blur");
 		}
 		function q(e) {
 			e.preventDefault(), e.stopPropagation(), B.value = V.value, H.value = !1;
@@ -104,7 +106,7 @@ var T = [
 			"onUpdate:modelValue": u[2] ||= (e) => B.value = e,
 			"aria-label": L.value,
 			"auto-resize": !R.value,
-			class: p(["resize-none", [r.$attrs.class, R.value && "h-full px-3 py-1.5"]]),
+			class: p(["resize-none", R.value && "h-full px-3 py-1.5"]),
 			placeholder: l.placeholder,
 			rows: W.value,
 			onBlur: K,

package/dist/components/PropertyList/Editable.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","Select","_withCtx","_createElementVNode","_mergeProps","_createElementBlock","_toDisplayString","_createCommentVNode","Tag","_withKeys","_normalizeClass","_createVNode","Textarea","_withModifiers","Tag_default","Select_default","Textarea_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","field","Editable_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","props","__props","emit","model","useModel","attrs","useAttrs","rootAttrs","computed","key","name","title","multiline","local","ref","toRaw","original","editing","wrapper","useTemplateRef","value","rows","edit","nextTick","save","revert","event","onEnter","openBlock","createBlock","_cache","$event","withCtx","createElementVNode","mergeProps","open","toggle","createElementBlock","toDisplayString","createCommentVNode","selected","withKeys","normalizeClass","createVNode","_ctx","withModifiers"],"sources":["../../../src/components/PropertyList/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, toRaw, useAttrs, useTemplateRef, watch } from 'vue'\n\nimport Select from '../Select/Select.vue'\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Tag from '../Tag/Tag.vue'\nimport Textarea from '../Textarea/Textarea.vue'\n\nexport interface EditableProps {\n  /** `text` (one line), `multiline` (Shift+Enter for a new line), `select` (an outline Tag, picked from `options`) or `title`\n   *  (a record's 18px name). */\n  variant?: 'text' | 'multiline' | 'select' | 'title'\n  placeholder?: string\n  /** For `select`. */\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<EditableProps>(), {\n  variant: 'text',\n  placeholder: undefined,\n  options: () => []\n})\n\nconst emit = defineEmits<{ blur: [] }>()\n\nconst model = defineModel<string | SelectValue | null>({ default: null })\n\n// The class also styles the textarea; only the id and data- and aria- attributes go on the root. The name is said\n// before the value, not as an aria-label, which would hide the value from it.\nconst attrs = useAttrs()\nconst rootAttrs = computed(() =>\n  Object.fromEntries(\n    Object.entries(attrs).filter(([key]) => key !== 'aria-label' && (key === 'id' || /^(data|aria)-/.test(key)))\n  )\n)\nconst name = computed(() => (attrs['aria-label'] as string | undefined) ?? props.placeholder)\n\nconst title = computed(() => props.variant === 'title')\nconst multiline = computed(() => props.variant === 'multiline')\n\nconst local = ref(toRaw(model.value) as string | null)\nconst original = ref(local.value)\nconst editing = ref(false)\nconst wrapper = useTemplateRef<HTMLElement>('wrapper')\n\n// Follows the value from outside (a failed save rolled back, a refetch) unless it's being edited.\nwatch(model, (value) => {\n  if (editing.value) return\n  local.value = toRaw(value) as string | null\n  original.value = local.value\n})\n\nconst rows = computed(() => (title.value ? 1 : Math.max(1, Math.ceil((local.value?.length ?? 0) / 34))))\n\nasync function edit() {\n  if (props.disabled) return\n  editing.value = true\n  await nextTick()\n  wrapper.value?.querySelector('textarea')?.focus()\n}\n\nfunction save() {\n  editing.value = false\n  model.value = toRaw(local.value) || null\n  original.value = local.value\n  emit('blur')\n}\n\nfunction revert(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  local.value = original.value\n  editing.value = false\n}\n\nfunction onEnter(event: KeyboardEvent) {\n  if (multiline.value && event.shiftKey) return\n  event.preventDefault()\n  ;(event.target as HTMLElement).blur()\n}\n\nconst field =\n  'block w-full rounded-lg px-3 py-1.5 text-left text-sui-ink transition-colors outline-hidden focus-visible:sui-ring-field'\n</script>\n\n<!-- One value shown as plain text and edited where it is: click or Enter to edit, Enter or leaving to save, Escape to\n     undo. A `select` opens its list under the value instead. -->\n<template>\n  <Select\n    v-if=\"variant === 'select'\"\n    v-model=\"model as SelectValue | null\"\n    :aria-label=\"name\"\n    :disabled=\"disabled\"\n    :options=\"options\"\n    @update:model-value=\"emit('blur')\"\n  >\n    <template #trigger=\"{ open, toggle, selected }\">\n      <button\n        v-bind=\"rootAttrs\"\n        :aria-expanded=\"open\"\n        aria-haspopup=\"listbox\"\n        :class=\"[\n          field,\n          'max-w-[16rem] text-sm leading-5',\n          disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken'\n        ]\"\n        :disabled=\"disabled\"\n        type=\"button\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n        <Tag v-if=\"selected[0]\" :name=\"selected[0].label\" variant=\"outline\" />\n        <span v-else class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      </button>\n    </template>\n  </Select>\n  <div\n    v-else\n    v-bind=\"rootAttrs\"\n    ref=\"wrapper\"\n    class=\"relative\"\n    :class=\"[\n      field,\n      title\n        ? 'min-h-10 min-w-4 text-lg leading-7 font-semibold [&_textarea]:min-h-10 [&_textarea]:text-lg [&_textarea]:leading-7 [&_textarea]:font-semibold [&_textarea]:whitespace-nowrap [&_textarea]:placeholder:text-lg [&_textarea]:placeholder:font-semibold'\n        : 'max-w-[16rem] text-sm leading-5 [&_textarea]:placeholder:text-sm [&_textarea]:placeholder:leading-5',\n      disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken',\n      '[&_textarea]:bg-sui-surface [&_textarea]:placeholder:text-sui-ink-muted'\n    ]\"\n    role=\"button\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @click=\"edit\"\n    @keydown.enter=\"!editing && ($event.preventDefault(), edit())\"\n  >\n    <div>\n      <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n      <span v-if=\"!local\" class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      <span v-else :class=\"{ 'whitespace-pre-wrap': multiline }\">{{ local }}</span>\n    </div>\n    <div v-if=\"editing\" class=\"absolute inset-0 z-10\" :class=\"{ '-mt-px': title }\">\n      <Textarea\n        v-model=\"local\"\n        :aria-label=\"name\"\n        :auto-resize=\"!title\"\n        class=\"resize-none\"\n        :class=\"[$attrs.class, title && 'h-full px-3 py-1.5']\"\n        :placeholder=\"placeholder\"\n        :rows=\"rows\"\n        @blur=\"save\"\n        @keydown.enter.stop=\"onEnter\"\n        @keydown.esc.stop=\"revert\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Editable.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","Select","_withCtx","_createElementVNode","_mergeProps","_createElementBlock","_toDisplayString","_createCommentVNode","Tag","_withKeys","_normalizeClass","_createVNode","Textarea","_withModifiers","Tag_default","Select_default","Textarea_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","field","Editable_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","props","__props","emit","model","useModel","attrs","useAttrs","rootAttrs","computed","key","name","title","multiline","local","ref","toRaw","original","editing","wrapper","useTemplateRef","value","rows","edit","nextTick","save","revert","event","onEnter","openBlock","createBlock","_cache","$event","withCtx","createElementVNode","mergeProps","open","toggle","createElementBlock","toDisplayString","createCommentVNode","selected","withKeys","normalizeClass","createVNode","withModifiers"],"sources":["../../../src/components/PropertyList/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, toRaw, useAttrs, useTemplateRef, watch } from 'vue'\n\nimport Select from '../Select/Select.vue'\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Tag from '../Tag/Tag.vue'\nimport Textarea from '../Textarea/Textarea.vue'\n\nexport interface EditableProps {\n  /** `text` (one line), `multiline` (Shift+Enter for a new line), `select` (an outline Tag, picked from `options`) or `title`\n   *  (a record's 18px name). */\n  variant?: 'text' | 'multiline' | 'select' | 'title'\n  placeholder?: string\n  /** For `select`. */\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<EditableProps>(), {\n  variant: 'text',\n  placeholder: undefined,\n  options: () => []\n})\n\nconst emit = defineEmits<{ blur: [] }>()\n\nconst model = defineModel<string | SelectValue | null>({ default: null })\n\n// Only the id, class and data- and aria- attributes go on the root. The name is said before the value, not as an\n// aria-label, which would hide the value from it.\nconst attrs = useAttrs()\nconst rootAttrs = computed(() =>\n  Object.fromEntries(\n    Object.entries(attrs).filter(\n      ([key]) => key !== 'aria-label' && (key === 'id' || key === 'class' || /^(data|aria)-/.test(key))\n    )\n  )\n)\nconst name = computed(() => (attrs['aria-label'] as string | undefined) ?? props.placeholder)\n\nconst title = computed(() => props.variant === 'title')\nconst multiline = computed(() => props.variant === 'multiline')\n\nconst local = ref(toRaw(model.value) as string | null)\nconst original = ref(local.value)\nconst editing = ref(false)\nconst wrapper = useTemplateRef<HTMLElement>('wrapper')\n\n// Follows the value from outside (a failed save rolled back, a refetch) unless it's being edited.\nwatch(model, (value) => {\n  if (editing.value) return\n  local.value = toRaw(value) as string | null\n  original.value = local.value\n})\n\nconst rows = computed(() => (title.value ? 1 : Math.max(1, Math.ceil((local.value?.length ?? 0) / 34))))\n\nasync function edit() {\n  if (props.disabled) return\n  editing.value = true\n  await nextTick()\n  wrapper.value?.querySelector('textarea')?.focus()\n}\n\nfunction save() {\n  editing.value = false\n  const value = toRaw(local.value) || null\n  // Leaving it untouched isn't a change: an empty value stays as it came, '' or null.\n  if (value !== (toRaw(model.value) || null)) model.value = value\n  original.value = local.value\n  emit('blur')\n}\n\nfunction revert(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  local.value = original.value\n  editing.value = false\n}\n\nfunction onEnter(event: KeyboardEvent) {\n  if (multiline.value && event.shiftKey) return\n  event.preventDefault()\n  ;(event.target as HTMLElement).blur()\n}\n\nconst field =\n  'block w-full rounded-lg border border-transparent px-[0.6875rem] py-1.25 text-left text-sui-ink transition-[background-color,border-color,box-shadow] outline-hidden focus-visible:border-sui-accent focus-visible:sui-ring-field'\n</script>\n\n<!-- One value shown as plain text and edited where it is: click or Enter to edit, Enter or leaving to save, Escape to\n     undo. A `select` opens its list under the value instead. -->\n<template>\n  <Select\n    v-if=\"variant === 'select'\"\n    v-model=\"model as SelectValue | null\"\n    :aria-label=\"name\"\n    :disabled=\"disabled\"\n    :options=\"options\"\n    @update:model-value=\"emit('blur')\"\n  >\n    <template #trigger=\"{ open, toggle, selected }\">\n      <button\n        v-bind=\"rootAttrs\"\n        :aria-expanded=\"open\"\n        aria-haspopup=\"listbox\"\n        :class=\"[\n          field,\n          'max-w-[16rem] text-sm leading-5',\n          disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken'\n        ]\"\n        :disabled=\"disabled\"\n        type=\"button\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n        <Tag v-if=\"selected[0]\" :name=\"selected[0].label\" variant=\"outline\" />\n        <span v-else class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      </button>\n    </template>\n  </Select>\n  <div\n    v-else\n    v-bind=\"rootAttrs\"\n    ref=\"wrapper\"\n    class=\"relative\"\n    :class=\"[\n      field,\n      title\n        ? 'min-h-10 min-w-4 text-lg leading-7 font-semibold [&_textarea]:min-h-10 [&_textarea]:text-lg [&_textarea]:leading-7 [&_textarea]:font-semibold [&_textarea]:whitespace-nowrap [&_textarea]:placeholder:text-lg [&_textarea]:placeholder:font-semibold'\n        : 'max-w-[16rem] text-sm leading-5 [&_textarea]:placeholder:text-sm [&_textarea]:placeholder:leading-5',\n      disabled ? 'cursor-auto' : 'cursor-pointer hover:bg-sui-sunken',\n      '[&_textarea]:bg-sui-surface [&_textarea]:placeholder:text-sui-ink-muted'\n    ]\"\n    role=\"button\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @click=\"edit\"\n    @keydown.enter=\"!editing && ($event.preventDefault(), edit())\"\n  >\n    <div>\n      <span v-if=\"name\" class=\"sr-only\">{{ name }}: </span>\n      <span v-if=\"!local\" class=\"text-sui-ink-muted\">{{ placeholder }}</span>\n      <span v-else :class=\"{ 'whitespace-pre-wrap': multiline }\">{{ local }}</span>\n    </div>\n    <div v-if=\"editing\" class=\"absolute inset-0 z-10\" :class=\"{ '-mt-px': title }\">\n      <Textarea\n        v-model=\"local\"\n        :aria-label=\"name\"\n        :auto-resize=\"!title\"\n        class=\"resize-none\"\n        :class=\"title && 'h-full px-3 py-1.5'\"\n        :placeholder=\"placeholder\"\n        :rows=\"rows\"\n        @blur=\"save\"\n        @keydown.enter.stop=\"onEnter\"\n        @keydown.esc.stop=\"revert\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PropertyList/PropertyList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyList.js","names":["_sfc_main","PropertyList_vue_vue_type_script_setup_true_lang_default","PropertyList_default"],"sources":["../../../src/components/PropertyList/PropertyList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Editable from './Editable.vue'\n\nexport interface PropertyListField {\n  id: string\n  label?: string\n  /** How the value is edited: one line, several, or picked from `options`. */\n  type?: 'text' | 'multiline' | 'select'\n  placeholder?: string\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineProps<{ fields: PropertyListField[] }>()\n\nconst model = defineModel<Record<string, unknown>>({ required: true })\n\n// `change` names the one field that changed, for hosts that save field by field.\nconst emit = defineEmits<{ submit: []; change: [id: string, value: unknown] }>()\n\nconst valueOf = (id: string) => (model.value[id] ?? null) as SelectValue | null\n\nfunction update(id: string, value: unknown) {\n  model.value = { ...model.value, [id]: value }\n  emit('change', id, value)\n}\n</script>\n\n<!-- A record's details: a quiet label beside each value, every value an Editable edited where it is. -->\n<template>\n  <form class=\"relative flex flex-col\" @submit.prevent=\"emit('submit')\">\n    <div v-for=\"field of fields\" :key=\"field.id\" class=\"mb-1.5 flex items-start gap-2\">\n      <label\n        v-if=\"field.label\"\n        class=\"block w-22 shrink-0 pt-1.5 text-sm font-normal text-sui-ink-muted\"\n        :for=\"field.id\"\n      >\n        {{ field.label }}\n      </label>\n      <Editable\n        :id=\"field.id\"\n        :aria-label=\"field.label\"\n        :disabled=\"field.disabled\"\n        :model-value=\"valueOf(field.id)\"\n        :options=\"field.options\"\n        :placeholder=\"field.placeholder\"\n        :variant=\"field.type ?? 'text'\"\n        @update:model-value=\"(value) => update(field.id, value)\"\n      />\n    </div>\n  </form>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PropertyList.js","names":["_sfc_main","PropertyList_vue_vue_type_script_setup_true_lang_default","PropertyList_default"],"sources":["../../../src/components/PropertyList/PropertyList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Editable from './Editable.vue'\n\nexport interface PropertyListField {\n  id: string\n  label?: string\n  /** How the value is edited: one line, several, or picked from `options`. A `field-<id>` slot replaces it. */\n  type?: 'text' | 'multiline' | 'select'\n  placeholder?: string\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineProps<{ fields: PropertyListField[] }>()\n\nconst model = defineModel<Record<string, unknown>>({ required: true })\n\n// `change` names the one field that changed, for hosts that save field by field.\nconst emit = defineEmits<{ submit: []; change: [id: string, value: unknown] }>()\n\nconst valueOf = (id: string) => (model.value[id] ?? null) as SelectValue | null\n\nfunction update(id: string, value: unknown) {\n  model.value = { ...model.value, [id]: value }\n  emit('change', id, value)\n}\n</script>\n\n<!-- A record's details: a quiet label beside each value, every value an Editable edited where it is. A `field-<id>` slot\n     draws a field of its own and gets `id` (for its label), `value` and `update(value)`. -->\n<template>\n  <form class=\"relative flex flex-col\" @submit.prevent=\"emit('submit')\">\n    <div v-for=\"field of fields\" :key=\"field.id\" class=\"mb-1.5 flex items-start gap-2\">\n      <label\n        v-if=\"field.label\"\n        class=\"block w-22 shrink-0 pt-1.5 text-sm font-normal text-sui-ink-muted\"\n        :for=\"field.id\"\n      >\n        {{ field.label }}\n      </label>\n      <slot\n        :id=\"field.id\"\n        :field=\"field\"\n        :name=\"`field-${field.id}`\"\n        :update=\"(value: unknown) => update(field.id, value)\"\n        :value=\"model[field.id]\"\n      >\n        <Editable\n          :id=\"field.id\"\n          :aria-label=\"field.label\"\n          :disabled=\"field.disabled\"\n          :model-value=\"valueOf(field.id)\"\n          :options=\"field.options\"\n          :placeholder=\"field.placeholder\"\n          :variant=\"field.type ?? 'text'\"\n          @update:model-value=\"(value) => update(field.id, value)\"\n        />\n      </slot>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/PropertyList/PropertyList.vue.d.ts

@@ -2,7 +2,7 @@ import type { SelectOption } from '../Select/types';
 export interface PropertyListField {
     id: string;
     label?: string;
-    /** How the value is edited: one line, several, or picked from `options`. */
+    /** How the value is edited: one line, several, or picked from `options`. A `field-<id>` slot replaces it. */
     type?: 'text' | 'multiline' | 'select';
     placeholder?: string;
     options?: SelectOption[];
@@ -15,7 +15,16 @@ type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_3: `field-${string}`, __VLS_4: {
+    id: string;
+    field: PropertyListField;
+    update: (value: unknown) => void;
+    value: unknown;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_3>]?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (id: string, value: unknown) => any;
     submit: () => any;
     "update:modelValue": (value: Record<string, unknown>) => any;
@@ -24,5 +33,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/PropertyList/PropertyList.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import e from "./Editable.js";
-import { Fragment as t, createCommentVNode as n, createElementBlock as r, createVNode as i, defineComponent as a, mergeModels as o, openBlock as s, renderList as c, toDisplayString as l, useModel as u, withModifiers as d } from "vue";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createVNode as i, defineComponent as a, mergeModels as o, openBlock as s, renderList as c, renderSlot as l, toDisplayString as u, useModel as d, withModifiers as f } from "vue";
 //#region src/components/PropertyList/PropertyList.vue?vue&type=script&setup=true&lang.ts
-var f = ["for"], p = /*@__PURE__*/ a({
+var p = ["for"], m = /*@__PURE__*/ a({
 	__name: "PropertyList",
 	props: /*@__PURE__*/ o({ fields: {} }, {
 		modelValue: { required: !0 },
@@ -9,16 +9,16 @@ var f = ["for"], p = /*@__PURE__*/ a({
 	}),
 	emits: /*@__PURE__*/ o(["submit", "change"], ["update:modelValue"]),
 	setup(a, { emit: o }) {
-		let p = u(a, "modelValue"), m = o, h = (e) => p.value[e] ?? null;
-		function g(e, t) {
-			p.value = {
-				...p.value,
+		let m = d(a, "modelValue"), h = o, g = (e) => m.value[e] ?? null;
+		function _(e, t) {
+			m.value = {
+				...m.value,
 				[e]: t
-			}, m("change", e, t);
+			}, h("change", e, t);
 		}
-		return (o, u) => (s(), r("form", {
+		return (o, d) => (s(), r("form", {
 			class: "relative flex flex-col",
-			onSubmit: u[0] ||= d((e) => m("submit"), ["prevent"])
+			onSubmit: d[0] ||= f((e) => h("submit"), ["prevent"])
 		}, [(s(!0), r(t, null, c(a.fields, (t) => (s(), r("div", {
 			key: t.id,
 			class: "mb-1.5 flex items-start gap-2"
@@ -26,15 +26,20 @@ var f = ["for"], p = /*@__PURE__*/ a({
 			key: 0,
 			class: "block w-22 shrink-0 pt-1.5 text-sm font-normal text-sui-ink-muted",
 			for: t.id
-		}, l(t.label), 9, f)) : n("", !0), i(e, {
+		}, u(t.label), 9, p)) : n("", !0), l(o.$slots, `field-${t.id}`, {
+			id: t.id,
+			field: t,
+			update: (e) => _(t.id, e),
+			value: m.value[t.id]
+		}, () => [i(e, {
 			id: t.id,
 			"aria-label": t.label,
 			disabled: t.disabled,
-			"model-value": h(t.id),
+			"model-value": g(t.id),
 			options: t.options,
 			placeholder: t.placeholder,
 			variant: t.type ?? "text",
-			"onUpdate:modelValue": (e) => g(t.id, e)
+			"onUpdate:modelValue": (e) => _(t.id, e)
 		}, null, 8, [
 			"id",
 			"aria-label",
@@ -44,10 +49,10 @@ var f = ["for"], p = /*@__PURE__*/ a({
 			"placeholder",
 			"variant",
 			"onUpdate:modelValue"
-		])]))), 128))], 32));
+		])])]))), 128))], 32));
 	}
 });
 //#endregion
-export { p as default };
+export { m as default };
 
 //# sourceMappingURL=PropertyList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/PropertyList/PropertyList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyList.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_withModifiers","_Fragment","_renderList","_toDisplayString","_createCommentVNode","_createVNode","Editable","Editable_default","_hoisted_1","PropertyList_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","model","useModel","__props","emit","valueOf","id","update","value","openBlock","createElementBlock","_cache","withModifiers","Fragment","renderList","field","toDisplayString","createCommentVNode","createVNode"],"sources":["../../../src/components/PropertyList/PropertyList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Editable from './Editable.vue'\n\nexport interface PropertyListField {\n  id: string\n  label?: string\n  /** How the value is edited: one line, several, or picked from `options`. */\n  type?: 'text' | 'multiline' | 'select'\n  placeholder?: string\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineProps<{ fields: PropertyListField[] }>()\n\nconst model = defineModel<Record<string, unknown>>({ required: true })\n\n// `change` names the one field that changed, for hosts that save field by field.\nconst emit = defineEmits<{ submit: []; change: [id: string, value: unknown] }>()\n\nconst valueOf = (id: string) => (model.value[id] ?? null) as SelectValue | null\n\nfunction update(id: string, value: unknown) {\n  model.value = { ...model.value, [id]: value }\n  emit('change', id, value)\n}\n</script>\n\n<!-- A record's details: a quiet label beside each value, every value an Editable edited where it is. -->\n<template>\n  <form class=\"relative flex flex-col\" @submit.prevent=\"emit('submit')\">\n    <div v-for=\"field of fields\" :key=\"field.id\" class=\"mb-1.5 flex items-start gap-2\">\n      <label\n        v-if=\"field.label\"\n        class=\"block w-22 shrink-0 pt-1.5 text-sm font-normal text-sui-ink-muted\"\n        :for=\"field.id\"\n      >\n        {{ field.label }}\n      </label>\n      <Editable\n        :id=\"field.id\"\n        :aria-label=\"field.label\"\n        :disabled=\"field.disabled\"\n        :model-value=\"valueOf(field.id)\"\n        :options=\"field.options\"\n        :placeholder=\"field.placeholder\"\n        :variant=\"field.type ?? 'text'\"\n        @update:model-value=\"(value) => update(field.id, value)\"\n      />\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;EAgBA,IAAMgB,IAAQhB,EAAoCkB,GAAA,YAAmB,GAG/DC,IAAOJ,GAEPK,KAAW,MAAgBJ,EAAM,MAAMK,MAAO;EAEpD,SAASC,EAAO,GAAY,GAAgB;GAE1C,AADA,EAAM,QAAQ;IAAE,GAAGN,EAAM;KAAQK,IAAKE;GAAM,GAC5CJ,EAAK,UAAUE,GAAIE,CAAK;EAC1B;E,kBAKEtB,EAAA,GAAAC,EAoBO,QAAA;GApBD,OAAM;GAA0B,UAAM,AAAAwB,EAAA,OAAAvB,GAAA,MAAUgB,EAAI,QAAA,GAAA,CAAA,SAAA,CAAA;E,KACxDlB,EAAA,EAAA,GAAAC,EAkBME,GAAA,MAAAC,EAlBea,EAAA,SAAT,OAAZjB,EAAA,GAAAC,EAkBM,OAAA;GAlBwB,KAAK4B,EAAM;GAAI,OAAM;E,IAEzCA,EAAM,SADd7B,EAAA,GAAAC,EAMQ,SAAA;;GAJN,OAAM;GACL,KAAK4B,EAAM;EAET,GAAAxB,EAAAwB,EAAM,KAAK,GAAA,GAAAnB,CAAA,K,WAEhBH,EASEC,GAAA;GARC,IAAIqB,EAAM;GACV,cAAYA,EAAM;GAClB,UAAUA,EAAM;GAChB,eAAaV,EAAQU,EAAM,EAAE;GAC7B,SAASA,EAAM;GACf,aAAaA,EAAM;GACnB,SAASA,EAAM,QAAI;GACnB,wBAAqB,MAAUR,EAAOQ,EAAM,IAAIP,CAAK"}
+{"version":3,"file":"PropertyList.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_withModifiers","_Fragment","_renderList","_toDisplayString","_createCommentVNode","_renderSlot","_createVNode","Editable","Editable_default","_hoisted_1","PropertyList_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","model","useModel","__props","emit","valueOf","id","update","value","openBlock","createElementBlock","_cache","withModifiers","Fragment","renderList","field","toDisplayString","createCommentVNode","renderSlot","_ctx","createVNode"],"sources":["../../../src/components/PropertyList/PropertyList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectOption, SelectValue } from '../Select/types'\nimport Editable from './Editable.vue'\n\nexport interface PropertyListField {\n  id: string\n  label?: string\n  /** How the value is edited: one line, several, or picked from `options`. A `field-<id>` slot replaces it. */\n  type?: 'text' | 'multiline' | 'select'\n  placeholder?: string\n  options?: SelectOption[]\n  disabled?: boolean\n}\n\ndefineProps<{ fields: PropertyListField[] }>()\n\nconst model = defineModel<Record<string, unknown>>({ required: true })\n\n// `change` names the one field that changed, for hosts that save field by field.\nconst emit = defineEmits<{ submit: []; change: [id: string, value: unknown] }>()\n\nconst valueOf = (id: string) => (model.value[id] ?? null) as SelectValue | null\n\nfunction update(id: string, value: unknown) {\n  model.value = { ...model.value, [id]: value }\n  emit('change', id, value)\n}\n</script>\n\n<!-- A record's details: a quiet label beside each value, every value an Editable edited where it is. A `field-<id>` slot\n     draws a field of its own and gets `id` (for its label), `value` and `update(value)`. -->\n<template>\n  <form class=\"relative flex flex-col\" @submit.prevent=\"emit('submit')\">\n    <div v-for=\"field of fields\" :key=\"field.id\" class=\"mb-1.5 flex items-start gap-2\">\n      <label\n        v-if=\"field.label\"\n        class=\"block w-22 shrink-0 pt-1.5 text-sm font-normal text-sui-ink-muted\"\n        :for=\"field.id\"\n      >\n        {{ field.label }}\n      </label>\n      <slot\n        :id=\"field.id\"\n        :field=\"field\"\n        :name=\"`field-${field.id}`\"\n        :update=\"(value: unknown) => update(field.id, value)\"\n        :value=\"model[field.id]\"\n      >\n        <Editable\n          :id=\"field.id\"\n          :aria-label=\"field.label\"\n          :disabled=\"field.disabled\"\n          :model-value=\"valueOf(field.id)\"\n          :options=\"field.options\"\n          :placeholder=\"field.placeholder\"\n          :variant=\"field.type ?? 'text'\"\n          @update:model-value=\"(value) => update(field.id, value)\"\n        />\n      </slot>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;EAgBA,IAAMiB,IAAQjB,EAAoCmB,GAAA,YAAmB,GAG/DC,IAAOJ,GAEPK,KAAW,MAAgBJ,EAAM,MAAMK,MAAO;EAEpD,SAASC,EAAO,GAAY,GAAgB;GAE1C,AADA,EAAM,QAAQ;IAAE,GAAGN,EAAM;KAAQK,IAAKE;GAAM,GAC5CJ,EAAK,UAAUE,GAAIE,CAAK;EAC1B;E,kBAMEvB,EAAA,GAAAC,EA4BO,QAAA;GA5BD,OAAM;GAA0B,UAAM,AAAAyB,EAAA,OAAAxB,GAAA,MAAUiB,EAAI,QAAA,GAAA,CAAA,SAAA,CAAA;E,KACxDnB,EAAA,EAAA,GAAAC,EA0BME,GAAA,MAAAC,EA1Bec,EAAA,SAAT,OAAZlB,EAAA,GAAAC,EA0BM,OAAA;GA1BwB,KAAK6B,EAAM;GAAI,OAAM;E,IAEzCA,EAAM,SADd9B,EAAA,GAAAC,EAMQ,SAAA;;GAJN,OAAM;GACL,KAAK6B,EAAM;EAET,GAAAzB,EAAAyB,EAAM,KAAK,GAAA,GAAAnB,CAAA,K,WAEhBJ,EAiBO2B,EAAA,QAAA,SAdWJ,EAAM,MAAE;GAFvB,IAAIA,EAAM;GACH;GAEP,SAAS,MAAmBR,EAAOQ,EAAM,IAAIP,CAAK;GAClD,OAAOP,EAAA,MAAMc,EAAM;EALtB,SAiBO,CAVLtB,EASEC,GAAA;GARC,IAAIqB,EAAM;GACV,cAAYA,EAAM;GAClB,UAAUA,EAAM;GAChB,eAAaV,EAAQU,EAAM,EAAE;GAC7B,SAASA,EAAM;GACf,aAAaA,EAAM;GACnB,SAASA,EAAM,QAAI;GACnB,wBAAqB,MAAUR,EAAOQ,EAAM,IAAIP,CAAK"}

package/dist/components/PropertyRow/Collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","names":["_sfc_main","Collapsible_vue_vue_type_script_setup_true_lang_default","Collapsible_default"],"sources":["../../../src/components/PropertyRow/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CollapsibleProps {\n  /** What's folded away, shown beside the label while closed, e.g. \"Phone, birthday\". */\n  summary: string\n  /** Opens it, when any of its fields holds a value. */\n  filled?: boolean\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CollapsibleProps>(), { label: 'More details' })\n\nconst open = ref(false)\nconst isOpen = computed(() => open.value || props.filled)\n</script>\n\n<!-- Rarely used fields, folded away. -->\n<template>\n  <div>\n    <button\n      :aria-expanded=\"isOpen\"\n      class=\"flex h-10.5 w-full items-center gap-1.5 bg-transparent p-0 text-13 font-medium text-sui-ink-body focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"open = !open\"\n    >\n      <ChevronIcon\n        class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body transition-transform duration-150\"\n        :class=\"{ 'rotate-90': isOpen }\"\n        direction=\"right\"\n      />\n      {{ label }}\n      <span v-if=\"!isOpen\" class=\"font-normal text-sui-ink-muted\">{{ summary }}</span>\n    </button>\n    <div v-if=\"isOpen\" class=\"-mt-1.5 pb-1\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Collapsible.js","names":["_sfc_main","Collapsible_vue_vue_type_script_setup_true_lang_default","Collapsible_default"],"sources":["../../../src/components/PropertyRow/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CollapsibleProps {\n  /** What's folded away, shown beside the label while closed, e.g. \"Phone, birthday\". */\n  summary: string\n  /** Opens it when any of its fields holds a value; it can still be folded. */\n  filled?: boolean\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CollapsibleProps>(), { label: 'More details' })\n\nconst isOpen = ref(props.filled)\nwatch(\n  () => props.filled,\n  (filled) => filled && (isOpen.value = true)\n)\n</script>\n\n<!-- Rarely used fields, folded away. -->\n<template>\n  <div>\n    <button\n      :aria-expanded=\"isOpen\"\n      class=\"flex h-10.5 w-full items-center gap-1.5 bg-transparent p-0 text-13 font-medium text-sui-ink-body focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"isOpen = !isOpen\"\n    >\n      <ChevronIcon\n        class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body transition-transform duration-150\"\n        :class=\"{ 'rotate-90': isOpen }\"\n        direction=\"right\"\n      />\n      {{ label }}\n      <span v-if=\"!isOpen\" class=\"font-normal text-sui-ink-muted\">{{ summary }}</span>\n    </button>\n    <div v-if=\"isOpen\" class=\"-mt-1.5 pb-1\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PropertyRow/Collapsible.vue.d.ts

@@ -1,7 +1,7 @@
 export interface CollapsibleProps {
     /** What's folded away, shown beside the label while closed, e.g. "Phone, birthday". */
     summary: string;
-    /** Opens it, when any of its fields holds a value. */
+    /** Opens it when any of its fields holds a value; it can still be folded. */
     filled?: boolean;
     label?: string;
 }

package/dist/components/PropertyRow/Collapsible.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import e from "../internal/ChevronIcon.js";
-import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, ref as u, renderSlot as d, toDisplayString as f } from "vue";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, watch as f } from "vue";
 //#region src/components/PropertyRow/Collapsible.vue?vue&type=script&setup=true&lang.ts
 var p = ["aria-expanded"], m = {
 	key: 0,
@@ -7,28 +7,28 @@ var p = ["aria-expanded"], m = {
 }, h = {
 	key: 0,
 	class: "-mt-1.5 pb-1"
-}, g = /*@__PURE__*/ s({
+}, g = /*@__PURE__*/ o({
 	__name: "Collapsible",
 	props: {
 		summary: {},
 		filled: { type: Boolean },
 		label: { default: "More details" }
 	},
-	setup(s) {
-		let g = s, _ = u(!1), v = t(() => _.value || g.filled);
-		return (t, u) => (l(), r("div", null, [i("button", {
-			"aria-expanded": v.value,
+	setup(o) {
+		let g = o, _ = l(g.filled);
+		return f(() => g.filled, (e) => e && (_.value = !0)), (l, f) => (c(), n("div", null, [r("button", {
+			"aria-expanded": _.value,
 			class: "flex h-10.5 w-full items-center gap-1.5 bg-transparent p-0 text-13 font-medium text-sui-ink-body focus-visible:sui-ring",
 			type: "button",
-			onClick: u[0] ||= (e) => _.value = !_.value
+			onClick: f[0] ||= (e) => _.value = !_.value
 		}, [
-			o(e, {
-				class: c(["h-4 w-4 fill-sui-ink-body stroke-sui-ink-body transition-transform duration-150", { "rotate-90": v.value }]),
+			a(e, {
+				class: s(["h-4 w-4 fill-sui-ink-body stroke-sui-ink-body transition-transform duration-150", { "rotate-90": _.value }]),
 				direction: "right"
 			}, null, 8, ["class"]),
-			a(" " + f(s.label) + " ", 1),
-			v.value ? n("", !0) : (l(), r("span", m, f(s.summary), 1))
-		], 8, p), v.value ? (l(), r("div", h, [d(t.$slots, "default")])) : n("", !0)]));
+			i(" " + d(o.label) + " ", 1),
+			_.value ? t("", !0) : (c(), n("span", m, d(o.summary), 1))
+		], 8, p), _.value ? (c(), n("div", h, [u(l.$slots, "default")])) : t("", !0)]));
 	}
 });
 //#endregion

package/dist/components/PropertyRow/Collapsible.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","ChevronIcon","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","ChevronIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","Collapsible_vue_vue_type_script_setup_true_lang_default","props","__props","open","ref","isOpen","computed","openBlock","createElementBlock","createElementVNode","_cache","createVNode","normalizeClass","createTextVNode","toDisplayString","createCommentVNode","renderSlot","_ctx"],"sources":["../../../src/components/PropertyRow/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CollapsibleProps {\n  /** What's folded away, shown beside the label while closed, e.g. \"Phone, birthday\". */\n  summary: string\n  /** Opens it, when any of its fields holds a value. */\n  filled?: boolean\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CollapsibleProps>(), { label: 'More details' })\n\nconst open = ref(false)\nconst isOpen = computed(() => open.value || props.filled)\n</script>\n\n<!-- Rarely used fields, folded away. -->\n<template>\n  <div>\n    <button\n      :aria-expanded=\"isOpen\"\n      class=\"flex h-10.5 w-full items-center gap-1.5 bg-transparent p-0 text-13 font-medium text-sui-ink-body focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"open = !open\"\n    >\n      <ChevronIcon\n        class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body transition-transform duration-150\"\n        :class=\"{ 'rotate-90': isOpen }\"\n        direction=\"right\"\n      />\n      {{ label }}\n      <span v-if=\"!isOpen\" class=\"font-normal text-sui-ink-muted\">{{ summary }}</span>\n    </button>\n    <div v-if=\"isOpen\" class=\"-mt-1.5 pb-1\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAaA,IAAMe,IAAQC,GAERC,IAAOC,EAAI,EAAK,GAChBC,IAASC,QAAeH,EAAK,SAASF,EAAM,MAAM;E,kBAKtDf,EAAA,GAAAC,EAkBM,OAAA,MAAA,CAjBJC,EAaS,UAAA;GAZN,iBAAeiB,EAAA;GAChB,OAAM;GACN,MAAK;GACJ,SAAK,AAAAK,EAAA,QAAA,MAAE,EAAA,QAAI,CAAIP,EAAA;;GAEhBd,EAIEC,GAAA;IAHA,OAAKC,EAAA,CAAC,mFAAiF,EAAA,aAChEc,EAAA,MAAM,CAAA,CAAA;IAC7B,WAAU;;GACVb,EAAA,MACFC,EAAGS,EAAA,KAAK,IAAG,KACX,CAAA;GAAaG,EAAA,Q,aAAbnB,EAAA,GAAAC,EAAgF,QAAhFW,GAAgFL,EAAjBS,EAAA,OAAO,GAAA,CAAA;E,UAE7DG,EAAA,SAAXnB,EAAA,GAAAC,EAEM,OAFNY,GAEM,CADJJ,EAAQsB,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"Collapsible.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","ChevronIcon","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_renderSlot","ChevronIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","Collapsible_vue_vue_type_script_setup_true_lang_default","props","__props","isOpen","ref","watch","filled","openBlock","createElementBlock","createElementVNode","_cache","createVNode","normalizeClass","createTextVNode","toDisplayString","createCommentVNode","renderSlot","_ctx"],"sources":["../../../src/components/PropertyRow/Collapsible.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport ChevronIcon from '../internal/ChevronIcon.vue'\n\nexport interface CollapsibleProps {\n  /** What's folded away, shown beside the label while closed, e.g. \"Phone, birthday\". */\n  summary: string\n  /** Opens it when any of its fields holds a value; it can still be folded. */\n  filled?: boolean\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CollapsibleProps>(), { label: 'More details' })\n\nconst isOpen = ref(props.filled)\nwatch(\n  () => props.filled,\n  (filled) => filled && (isOpen.value = true)\n)\n</script>\n\n<!-- Rarely used fields, folded away. -->\n<template>\n  <div>\n    <button\n      :aria-expanded=\"isOpen\"\n      class=\"flex h-10.5 w-full items-center gap-1.5 bg-transparent p-0 text-13 font-medium text-sui-ink-body focus-visible:sui-ring\"\n      type=\"button\"\n      @click=\"isOpen = !isOpen\"\n    >\n      <ChevronIcon\n        class=\"h-4 w-4 fill-sui-ink-body stroke-sui-ink-body transition-transform duration-150\"\n        :class=\"{ 'rotate-90': isOpen }\"\n        direction=\"right\"\n      />\n      {{ label }}\n      <span v-if=\"!isOpen\" class=\"font-normal text-sui-ink-muted\">{{ summary }}</span>\n    </button>\n    <div v-if=\"isOpen\" class=\"-mt-1.5 pb-1\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAaA,IAAMe,IAAQC,GAERC,IAASC,EAAIH,EAAM,MAAM;E,OAC/BI,QACQJ,EAAM,SACX,MAAWK,MAAW,EAAO,QAAQ,GACxC,I,UAKEpB,EAAA,GAAAC,EAkBM,OAAA,MAAA,CAjBJC,EAaS,UAAA;GAZN,iBAAee,EAAA;GAChB,OAAM;GACN,MAAK;GACJ,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAAM,CAAIP,EAAA;;GAElBd,EAIEC,GAAA;IAHA,OAAKC,EAAA,CAAC,mFAAiF,EAAA,aAChEY,EAAA,MAAM,CAAA,CAAA;IAC7B,WAAU;;GACVX,EAAA,MACFC,EAAGS,EAAA,KAAK,IAAG,KACX,CAAA;GAAaC,EAAA,Q,aAAbjB,EAAA,GAAAC,EAAgF,QAAhFW,GAAgFL,EAAjBS,EAAA,OAAO,GAAA,CAAA;E,UAE7DC,EAAA,SAAXjB,EAAA,GAAAC,EAEM,OAFNY,GAEM,CADJJ,EAAQsB,EAAA,QAAA,SAAA,C"}

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["_sfc_main","Radio_vue_vue_type_script_setup_true_lang_default","Radio_default"],"sources":["../../../src/components/Radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, useAttrs } from 'vue'\n\nexport interface RadioProps<T> {\n  /** The value the group's v-model takes when this radio is chosen. */\n  value: T\n  invalid?: boolean\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<RadioProps<T>>()\n\nconst model = defineModel<T>()\n\nconst checked = computed(() => model.value === props.value)\n\n// Class and style size the control; everything else (id, name, aria-label) belongs on the input.\nconst attrs = useAttrs()\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs\n  return rest\n})\n\nconst box = computed(() => [\n  checked.value && !props.disabled && 'border-sui-accent-solid bg-sui-accent-solid',\n  !checked.value && (props.invalid ? 'border-sui-danger-mid' : 'border-sui-line-control'),\n  props.disabled\n    ? 'pointer-events-none cursor-default border-sui-accent-line bg-sui-surface select-none [&>*:first-child]:bg-sui-accent-soft'\n    : [\n        !checked.value && 'peer-hover:border-sui-accent-bright peer-hover:[&>*:first-child]:bg-sui-accent-bright',\n        'peer-focus-visible:sui-ring'\n      ]\n])\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex h-4 w-4 cursor-pointer align-bottom select-none\"\n    :class=\"attrs.class\"\n    :style=\"attrs.style as string\"\n  >\n    <input\n      v-bind=\"inputAttrs\"\n      :aria-invalid=\"invalid ? 'true' : undefined\"\n      :checked=\"checked\"\n      class=\"peer absolute top-0 left-0 z-10 m-0 h-full w-full cursor-pointer appearance-none p-0 opacity-0 outline-hidden\"\n      :disabled=\"disabled\"\n      type=\"radio\"\n      :value=\"value\"\n      @change=\"model = value\"\n    />\n    <div\n      class=\"flex h-4 w-4 items-center justify-center rounded-full border transition duration-200 ease-in-out\"\n      :class=\"box\"\n    >\n      <div\n        class=\"block h-1.5 w-1.5 rounded-full transition duration-200\"\n        :class=\"checked ? 'visible scale-[1,1] bg-sui-surface' : 'invisible scale-[0.1]'\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Radio.js","names":["_sfc_main","Radio_vue_vue_type_script_setup_true_lang_default","Radio_default"],"sources":["../../../src/components/Radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, useAttrs } from 'vue'\n\nexport interface RadioProps<T> {\n  /** The value the group's v-model takes when this radio is chosen. */\n  value: T\n  invalid?: boolean\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<RadioProps<T>>()\n\nconst model = defineModel<T>()\n\nconst checked = computed(() => model.value === props.value)\n\n// Class and style size the control; everything else (id, name, aria-label) belongs on the input.\nconst attrs = useAttrs()\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs\n  return rest\n})\n\nconst box = computed(() => [\n  checked.value && !props.disabled && 'border-sui-accent-solid bg-sui-accent-solid',\n  !checked.value && (props.invalid ? 'border-sui-danger-mid' : 'border-sui-line-control'),\n  props.disabled\n    ? 'pointer-events-none cursor-default border-sui-accent-line bg-sui-surface select-none [&>*:first-child]:bg-sui-accent-soft'\n    : [!checked.value && !props.invalid && 'peer-hover:border-sui-accent-solid', 'peer-focus-visible:sui-ring']\n])\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex h-4 w-4 cursor-pointer align-bottom select-none\"\n    :class=\"attrs.class\"\n    :style=\"attrs.style as string\"\n  >\n    <input\n      v-bind=\"inputAttrs\"\n      :aria-invalid=\"invalid ? 'true' : undefined\"\n      :checked=\"checked\"\n      class=\"peer absolute top-0 left-0 z-10 m-0 h-full w-full cursor-pointer appearance-none p-0 opacity-0 outline-hidden\"\n      :disabled=\"disabled\"\n      type=\"radio\"\n      :value=\"value\"\n      @change=\"model = value\"\n    />\n    <div\n      class=\"flex h-4 w-4 items-center justify-center rounded-full border transition duration-200 ease-in-out\"\n      :class=\"box\"\n    >\n      <div\n        class=\"block h-1.5 w-1.5 rounded-full transition duration-200\"\n        :class=\"checked ? 'visible scale-[1,1] bg-sui-surface' : 'invisible scale-[0.1]'\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Radio/Radio.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,7 @@ var f = [
 		}), _ = e(() => [
 			m.value && !i.disabled && "border-sui-accent-solid bg-sui-accent-solid",
 			!m.value && (i.invalid ? "border-sui-danger-mid" : "border-sui-line-control"),
-			i.disabled ? "pointer-events-none cursor-default border-sui-accent-line bg-sui-surface select-none [&>*:first-child]:bg-sui-accent-soft" : [!m.value && "peer-hover:border-sui-accent-bright peer-hover:[&>*:first-child]:bg-sui-accent-bright", "peer-focus-visible:sui-ring"]
+			i.disabled ? "pointer-events-none cursor-default border-sui-accent-line bg-sui-surface select-none [&>*:first-child]:bg-sui-accent-soft" : [!m.value && !i.invalid && "peer-hover:border-sui-accent-solid", "peer-focus-visible:sui-ring"]
 		]);
 		return (e, i) => (c(), t("div", {
 			class: o(["relative inline-flex h-4 w-4 cursor-pointer align-bottom select-none", l(h).class]),

package/dist/components/Radio/Radio.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_hoisted_1","Radio_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","checked","computed","attrs","useAttrs","inputAttrs","_class","_style","rest","box","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache"],"sources":["../../../src/components/Radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, useAttrs } from 'vue'\n\nexport interface RadioProps<T> {\n  /** The value the group's v-model takes when this radio is chosen. */\n  value: T\n  invalid?: boolean\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<RadioProps<T>>()\n\nconst model = defineModel<T>()\n\nconst checked = computed(() => model.value === props.value)\n\n// Class and style size the control; everything else (id, name, aria-label) belongs on the input.\nconst attrs = useAttrs()\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs\n  return rest\n})\n\nconst box = computed(() => [\n  checked.value && !props.disabled && 'border-sui-accent-solid bg-sui-accent-solid',\n  !checked.value && (props.invalid ? 'border-sui-danger-mid' : 'border-sui-line-control'),\n  props.disabled\n    ? 'pointer-events-none cursor-default border-sui-accent-line bg-sui-surface select-none [&>*:first-child]:bg-sui-accent-soft'\n    : [\n        !checked.value && 'peer-hover:border-sui-accent-bright peer-hover:[&>*:first-child]:bg-sui-accent-bright',\n        'peer-focus-visible:sui-ring'\n      ]\n])\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex h-4 w-4 cursor-pointer align-bottom select-none\"\n    :class=\"attrs.class\"\n    :style=\"attrs.style as string\"\n  >\n    <input\n      v-bind=\"inputAttrs\"\n      :aria-invalid=\"invalid ? 'true' : undefined\"\n      :checked=\"checked\"\n      class=\"peer absolute top-0 left-0 z-10 m-0 h-full w-full cursor-pointer appearance-none p-0 opacity-0 outline-hidden\"\n      :disabled=\"disabled\"\n      type=\"radio\"\n      :value=\"value\"\n      @change=\"model = value\"\n    />\n    <div\n      class=\"flex h-4 w-4 items-center justify-center rounded-full border transition duration-200 ease-in-out\"\n      :class=\"box\"\n    >\n      <div\n        class=\"block h-1.5 w-1.5 rounded-full transition duration-200\"\n        :class=\"checked ? 'visible scale-[1,1] bg-sui-surface' : 'invisible scale-[0.1]'\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAYA,IAAMY,IAAQC,GAERC,IAAQd,EAAca,GAAA,YAAC,GAEvBG,IAAUC,QAAeH,EAAM,UAAUF,EAAM,KAAK,GAGpDM,IAAQC,EAAS,GACjBC,IAAaH,QAAe;GAChC,IAAM,EAAE,OAAOI,GAAQ,OAAOC,GAAQ,GAAGC,MAASL;GAClD,OAAOK;EACT,CAAC,GAEKC,IAAMP,QAAe;GACzBD,EAAQ,SAAS,CAACJ,EAAM,YAAY;GACpC,CAACI,EAAQ,UAAUJ,EAAM,UAAU,0BAA0B;GAC7DA,EAAM,WACF,8HACA,CACE,CAACI,EAAQ,SAAS,yFAClB,6BACF;EACN,CAAC;E,kBAICf,EAAA,GAAAC,EAwBM,OAAA;GAvBJ,OAAKC,EAAA,CAAC,wEACEC,EAAAc,CAAA,CAAK,CAAC,KAAK,CAAA;GAClB,OAAKb,EAAED,EAAAc,CAAA,CAAK,CAAC,KAAK;E,IAEnBZ,EASE,SATFC,EACUa,EAQR,OARkB;GACjB,gBAAcP,EAAA,UAAO,SAAY,KAAA;GACjC,SAASG,EAAA;GACV,OAAM;GACL,UAAUH,EAAA;GACX,MAAK;GACJ,OAAOA,EAAA;GACP,UAAM,AAAAmB,EAAA,QAAA,MAAE,EAAA,QAAQnB,EAAA;E,kBAEnBP,EAQM,OAAA,EAPJ,OAAKH,EAAA,CAAC,oGACEqB,EAAA,KAAG,CAAA,E,IAEXlB,EAGE,OAAA,EAFA,OAAKH,EAAA,CAAC,0DACEa,EAAA,QAAO,uCAAA,uBAAA,CAAA,E"}
+{"version":3,"file":"Radio.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_hoisted_1","Radio_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","checked","computed","attrs","useAttrs","inputAttrs","_class","_style","rest","box","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache"],"sources":["../../../src/components/Radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, useAttrs } from 'vue'\n\nexport interface RadioProps<T> {\n  /** The value the group's v-model takes when this radio is chosen. */\n  value: T\n  invalid?: boolean\n  disabled?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<RadioProps<T>>()\n\nconst model = defineModel<T>()\n\nconst checked = computed(() => model.value === props.value)\n\n// Class and style size the control; everything else (id, name, aria-label) belongs on the input.\nconst attrs = useAttrs()\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs\n  return rest\n})\n\nconst box = computed(() => [\n  checked.value && !props.disabled && 'border-sui-accent-solid bg-sui-accent-solid',\n  !checked.value && (props.invalid ? 'border-sui-danger-mid' : 'border-sui-line-control'),\n  props.disabled\n    ? 'pointer-events-none cursor-default border-sui-accent-line bg-sui-surface select-none [&>*:first-child]:bg-sui-accent-soft'\n    : [!checked.value && !props.invalid && 'peer-hover:border-sui-accent-solid', 'peer-focus-visible:sui-ring']\n])\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex h-4 w-4 cursor-pointer align-bottom select-none\"\n    :class=\"attrs.class\"\n    :style=\"attrs.style as string\"\n  >\n    <input\n      v-bind=\"inputAttrs\"\n      :aria-invalid=\"invalid ? 'true' : undefined\"\n      :checked=\"checked\"\n      class=\"peer absolute top-0 left-0 z-10 m-0 h-full w-full cursor-pointer appearance-none p-0 opacity-0 outline-hidden\"\n      :disabled=\"disabled\"\n      type=\"radio\"\n      :value=\"value\"\n      @change=\"model = value\"\n    />\n    <div\n      class=\"flex h-4 w-4 items-center justify-center rounded-full border transition duration-200 ease-in-out\"\n      :class=\"box\"\n    >\n      <div\n        class=\"block h-1.5 w-1.5 rounded-full transition duration-200\"\n        :class=\"checked ? 'visible scale-[1,1] bg-sui-surface' : 'invisible scale-[0.1]'\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAYA,IAAMY,IAAQC,GAERC,IAAQd,EAAca,GAAA,YAAC,GAEvBG,IAAUC,QAAeH,EAAM,UAAUF,EAAM,KAAK,GAGpDM,IAAQC,EAAS,GACjBC,IAAaH,QAAe;GAChC,IAAM,EAAE,OAAOI,GAAQ,OAAOC,GAAQ,GAAGC,MAASL;GAClD,OAAOK;EACT,CAAC,GAEKC,IAAMP,QAAe;GACzBD,EAAQ,SAAS,CAACJ,EAAM,YAAY;GACpC,CAACI,EAAQ,UAAUJ,EAAM,UAAU,0BAA0B;GAC7DA,EAAM,WACF,8HACA,CAAC,CAACI,EAAQ,SAAS,CAACJ,EAAM,WAAW,sCAAsC,6BAA6B;EAC9G,CAAC;E,kBAICX,EAAA,GAAAC,EAwBM,OAAA;GAvBJ,OAAKC,EAAA,CAAC,wEACEC,EAAAc,CAAA,CAAK,CAAC,KAAK,CAAA;GAClB,OAAKb,EAAED,EAAAc,CAAA,CAAK,CAAC,KAAK;E,IAEnBZ,EASE,SATFC,EACUa,EAQR,OARkB;GACjB,gBAAcP,EAAA,UAAO,SAAY,KAAA;GACjC,SAASG,EAAA;GACV,OAAM;GACL,UAAUH,EAAA;GACX,MAAK;GACJ,OAAOA,EAAA;GACP,UAAM,AAAAmB,EAAA,QAAA,MAAE,EAAA,QAAQnB,EAAA;E,kBAEnBP,EAQM,OAAA,EAPJ,OAAKH,EAAA,CAAC,oGACEqB,EAAA,KAAG,CAAA,E,IAEXlB,EAGE,OAAA,EAFA,OAAKH,EAAA,CAAC,0DACEa,EAAA,QAAO,uCAAA,uBAAA,CAAA,E"}