@milaboratories/uikit 2.15.37 → 2.15.38

package/dist/layout/PlPlaceholder/PlPlaceholder.vue2.js

@@ -2,7 +2,10 @@ import e from "../../components/PlLoaderLogo.js";
 import t from "./paint-worklet.js";
 import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderList as u, toDisplayString as d, unref as f, useCssModule as p } from "vue";
 //#region src/layout/PlPlaceholder/PlPlaceholder.vue?vue&type=script&setup=true&lang.ts
-var m = { key: 1 }, h = new Blob([t], { type: "application/javascript" }), g = URL.createObjectURL(h);
+var m = {
+	key: 1,
+	"data-testid": "pl-placeholder-subtitle-item"
+}, h = new Blob([t], { type: "application/javascript" }), g = URL.createObjectURL(h);
 CSS.paintWorklet.addModule(g);
 var _ = /* @__PURE__ */ s({
 	__name: "PlPlaceholder",
@@ -13,22 +16,38 @@ var _ = /* @__PURE__ */ s({
 	},
 	setup(t) {
 		let s = t, h = p();
-		return (t, p) => (l(), i("div", { class: c(f(h).root) }, [a("div", { class: c([f(h).background, {
-			[f(h).table]: s.variant === "table",
-			[f(h).graph]: s.variant === "graph"
-		}]) }, null, 2), a("div", { class: c(f(h).content) }, [o(e, {
+		return (t, p) => (l(), i("div", {
+			"data-testid": "pl-placeholder",
+			class: c(f(h).root)
+		}, [a("div", {
+			"data-testid": "pl-placeholder-background",
+			class: c([f(h).background, {
+				[f(h).table]: s.variant === "table",
+				[f(h).graph]: s.variant === "graph"
+			}])
+		}, null, 2), a("div", {
+			"data-testid": "pl-placeholder-content",
+			class: c(f(h).content)
+		}, [o(e, {
+			"data-testid": "pl-placeholder-loader",
 			size: 64,
 			color: "var(--color-div-grey)"
 		}), s.title || s.subtitle ? (l(), i("div", {
 			key: 0,
+			"data-testid": "pl-placeholder-text",
 			class: c(f(h).text)
 		}, [s.title ? (l(), i("div", {
 			key: 0,
+			"data-testid": "pl-placeholder-title",
 			class: c(f(h).title)
 		}, d(s.title), 3)) : r("", !0), s.subtitle ? (l(), i("div", {
 			key: 1,
+			"data-testid": "pl-placeholder-subtitle",
 			class: c(f(h).subtitle)
-		}, [Array.isArray(s.subtitle) ? (l(!0), i(n, { key: 0 }, u(s.subtitle, (e, t) => (l(), i("span", { key: t }, d(e), 1))), 128)) : (l(), i("span", m, d(s.subtitle), 1))], 2)) : r("", !0)], 2)) : r("", !0)], 2)], 2));
+		}, [Array.isArray(s.subtitle) ? (l(!0), i(n, { key: 0 }, u(s.subtitle, (e, t) => (l(), i("span", {
+			key: t,
+			"data-testid": "pl-placeholder-subtitle-item"
+		}, d(e), 1))), 128)) : (l(), i("span", m, d(s.subtitle), 1))], 2)) : r("", !0)], 2)) : r("", !0)], 2)], 2));
 	}
 });
 //#endregion

package/dist/layout/PlPlaceholder/PlPlaceholder.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlPlaceholder.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from \"./paint-worklet.js?raw\";\n\nexport interface PlPlaceholderProps {\n  variant?: \"table\" | \"graph\";\n  title?: string;\n  subtitle?: string | string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob([paintWorkletCode], { type: \"application/javascript\" });\nconst workletUrl = URL.createObjectURL(workletBlob);\n(\n  CSS as unknown as {\n    paintWorklet: { addModule: (url: string) => void };\n  }\n).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from \"vue\";\nimport PlLoaderLogo from \"../../components/PlLoaderLogo.vue\";\n\nconst props = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n  <div :class=\"styles.root\">\n    <div\n      :class=\"[\n        styles.background,\n        {\n          [styles.table]: props.variant === 'table',\n          [styles.graph]: props.variant === 'graph',\n        },\n      ]\"\n    />\n    <div :class=\"styles.content\">\n      <PlLoaderLogo :size=\"64\" color=\"var(--color-div-grey)\" />\n      <div v-if=\"props.title || props.subtitle\" :class=\"styles.text\">\n        <div v-if=\"props.title\" :class=\"styles.title\">{{ props.title }}</div>\n        <div v-if=\"props.subtitle\" :class=\"styles.subtitle\">\n          <template v-if=\"Array.isArray(props.subtitle)\">\n            <span v-for=\"(item, key) of props.subtitle\" :key>{{ item }}</span>\n          </template>\n          <span v-else>{{ props.subtitle }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root {\n  block-size: 100%;\n  inline-size: 100%;\n  position: relative;\n  user-select: none;\n  background-color: var(--bg-elevated-01);\n}\n\n.background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n  mask-size: 100% 300%;\n  animation-duration: 5s;\n  animation-iteration-count: infinite;\n  animation-name: slide;\n  &.table {\n    background-image: paint(pl-placeholder-table-skeleton);\n  }\n  &.graph {\n    background-image: paint(pl-placeholder-graph-skeleton);\n  }\n}\n\n.content {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  -webkit-text-stroke-color: white;\n  -webkit-text-stroke-width: 4px;\n  paint-order: stroke;\n}\n\n.title {\n  color: var(--txt-03);\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: -0.2px;\n}\n\n.subtitle {\n  color: var(--txt-03);\n  font-weight: 500;\n  line-height: 20px;\n  display: grid;\n  span {\n    grid-area: 1 / 1;\n    text-align: center;\n    animation-name: active-subtitle;\n    animation-duration: calc(6s * sibling-count());\n    animation-iteration-count: infinite;\n    animation-timing-function: steps(sibling-count(), jump-none);\n    visibility: if(\n      style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;\n    );\n  }\n}\n\n@keyframes slide {\n  from {\n    mask-position: 0 100%;\n  }\n}\n\n@keyframes active-subtitle {\n  from {\n    --pl-placeholder-active-subtitle: 1;\n  }\n  to {\n    --pl-placeholder-active-subtitle: sibling-count();\n  }\n}\n\n@property --pl-placeholder-active-subtitle {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 1;\n}\n</style>\n"],"mappings":";;;;oBAUM,IAAc,IAAI,KAAK,CAAC,EAAiB,EAAE,EAAE,MAAM,0BAA0B,CAAC,EAC9E,IAAa,IAAI,gBAAgB,EAAY;AAEjD,IAGA,aAAa,UAAU,EAAW;;;;;;;;;EAOpC,IAAM,IAAQ,GAER,IAAS,GAAc;yBAI3B,EAsBM,OAAA,EAtBA,OAAK,EAAE,EAAA,EAAM,CAAC,KAAI,EAAA,EAAA,CACtB,EAQE,OAAA,EAPC,OAAK,EAAA,CAAY,EAAA,EAAM,CAAC,YAAA;IAAiC,EAAA,EAAM,CAAC,QAAQ,EAAM,YAAO;IAAyB,EAAA,EAAM,CAAC,QAAQ,EAAM,YAAO;mBAQ7I,EAWM,OAAA,EAXA,OAAK,EAAE,EAAA,EAAM,CAAC,QAAO,EAAA,EAAA,CACzB,EAAyD,GAAA;GAA1C,MAAM;GAAI,OAAM;MACpB,EAAM,SAAS,EAAM,YAAA,GAAA,EAAhC,EAQM,OAAA;;GARqC,OAAK,EAAE,EAAA,EAAM,CAAC,KAAI;MAChD,EAAM,SAAA,GAAA,EAAjB,EAAqE,OAAA;;GAA5C,OAAK,EAAE,EAAA,EAAM,CAAC,MAAK;OAAK,EAAM,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EACjD,EAAM,YAAA,GAAA,EAAjB,EAKM,OAAA;;GALsB,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;MAChC,MAAM,QAAQ,EAAM,SAAQ,IAAA,EAAA,GAAA,EAC1C,EAAkE,GAAA,EAAA,KAAA,GAAA,EAAA,EAAtC,EAAM,WAApB,GAAM,YAApB,EAAkE,QAAA,EAArB,QAAG,EAAA,EAAI,EAAI,EAAA,EAAA,kBAE1D,EAAwC,QAAA,GAAA,EAAxB,EAAM,SAAQ,EAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"PlPlaceholder.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from \"./paint-worklet.js?raw\";\n\nexport interface PlPlaceholderProps {\n  variant?: \"table\" | \"graph\";\n  title?: string;\n  subtitle?: string | string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob([paintWorkletCode], { type: \"application/javascript\" });\nconst workletUrl = URL.createObjectURL(workletBlob);\n(\n  CSS as unknown as {\n    paintWorklet: { addModule: (url: string) => void };\n  }\n).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from \"vue\";\nimport PlLoaderLogo from \"../../components/PlLoaderLogo.vue\";\n\nconst props = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n  <div data-testid=\"pl-placeholder\" :class=\"styles.root\">\n    <div\n      data-testid=\"pl-placeholder-background\"\n      :class=\"[\n        styles.background,\n        {\n          [styles.table]: props.variant === 'table',\n          [styles.graph]: props.variant === 'graph',\n        },\n      ]\"\n    />\n    <div data-testid=\"pl-placeholder-content\" :class=\"styles.content\">\n      <PlLoaderLogo data-testid=\"pl-placeholder-loader\" :size=\"64\" color=\"var(--color-div-grey)\" />\n      <div\n        v-if=\"props.title || props.subtitle\"\n        data-testid=\"pl-placeholder-text\"\n        :class=\"styles.text\"\n      >\n        <div v-if=\"props.title\" data-testid=\"pl-placeholder-title\" :class=\"styles.title\">\n          {{ props.title }}\n        </div>\n        <div v-if=\"props.subtitle\" data-testid=\"pl-placeholder-subtitle\" :class=\"styles.subtitle\">\n          <template v-if=\"Array.isArray(props.subtitle)\">\n            <span\n              v-for=\"(item, key) of props.subtitle\"\n              :key\n              data-testid=\"pl-placeholder-subtitle-item\"\n              >{{ item }}</span\n            >\n          </template>\n          <span v-else data-testid=\"pl-placeholder-subtitle-item\">{{ props.subtitle }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root {\n  block-size: 100%;\n  inline-size: 100%;\n  position: relative;\n  user-select: none;\n  background-color: var(--bg-elevated-01);\n}\n\n.background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n  mask-size: 100% 300%;\n  animation-duration: 5s;\n  animation-iteration-count: infinite;\n  animation-name: slide;\n  &.table {\n    background-image: paint(pl-placeholder-table-skeleton);\n  }\n  &.graph {\n    background-image: paint(pl-placeholder-graph-skeleton);\n  }\n}\n\n.content {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  -webkit-text-stroke-color: white;\n  -webkit-text-stroke-width: 4px;\n  paint-order: stroke;\n}\n\n.title {\n  color: var(--txt-03);\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: -0.2px;\n}\n\n.subtitle {\n  color: var(--txt-03);\n  font-weight: 500;\n  line-height: 20px;\n  display: grid;\n  span {\n    grid-area: 1 / 1;\n    text-align: center;\n    animation-name: active-subtitle;\n    animation-duration: calc(6s * sibling-count());\n    animation-iteration-count: infinite;\n    animation-timing-function: steps(sibling-count(), jump-none);\n    visibility: if(\n      style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;\n    );\n  }\n}\n\n@keyframes slide {\n  from {\n    mask-position: 0 100%;\n  }\n}\n\n@keyframes active-subtitle {\n  from {\n    --pl-placeholder-active-subtitle: 1;\n  }\n  to {\n    --pl-placeholder-active-subtitle: sibling-count();\n  }\n}\n\n@property --pl-placeholder-active-subtitle {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 1;\n}\n</style>\n"],"mappings":";;;;;;;GAUM,IAAc,IAAI,KAAK,CAAC,EAAiB,EAAE,EAAE,MAAM,0BAA0B,CAAC,EAC9E,IAAa,IAAI,gBAAgB,EAAY;AAEjD,IAGA,aAAa,UAAU,EAAW;;;;;;;;;EAOpC,IAAM,IAAQ,GAER,IAAS,GAAc;yBAI3B,EAkCM,OAAA;GAlCD,eAAY;GAAkB,OAAK,EAAE,EAAA,EAAM,CAAC,KAAI;MACnD,EASE,OAAA;GARA,eAAY;GACX,OAAK,EAAA,CAAY,EAAA,EAAM,CAAC,YAAA;KAAiC,EAAA,EAAM,CAAC,QAAQ,EAAM,YAAO;KAAyB,EAAA,EAAM,CAAC,QAAQ,EAAM,YAAO;;eAQ7I,EAsBM,OAAA;GAtBD,eAAY;GAA0B,OAAK,EAAE,EAAA,EAAM,CAAC,QAAO;MAC9D,EAA6F,GAAA;GAA/E,eAAY;GAAyB,MAAM;GAAI,OAAM;MAE3D,EAAM,SAAS,EAAM,YAAA,GAAA,EAD7B,EAmBM,OAAA;;GAjBJ,eAAY;GACX,OAAK,EAAE,EAAA,EAAM,CAAC,KAAI;MAER,EAAM,SAAA,GAAA,EAAjB,EAEM,OAAA;;GAFkB,eAAY;GAAwB,OAAK,EAAE,EAAA,EAAM,CAAC,MAAK;OAC1E,EAAM,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAEL,EAAM,YAAA,GAAA,EAAjB,EAUM,OAAA;;GAVqB,eAAY;GAA2B,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;MACtE,MAAM,QAAQ,EAAM,SAAQ,IAAA,EAAA,GAAA,EAC1C,EAKC,GAAA,EAAA,KAAA,GAAA,EAAA,EAJuB,EAAM,WAApB,GAAM,YADhB,EAKC,QAAA;GAHE;GACD,eAAY;OACR,EAAI,EAAA,EAAA,kBAGZ,EAAmF,QAAnF,GAAmF,EAAxB,EAAM,SAAQ,EAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/layout/PlRow/PlRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRow.js","names":[],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-layout-component pl-row\" :class=\"{ wrap, 'align-center': alignCenter }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlRow.js","names":[],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    class=\"pl-layout-component pl-row\"\n    data-testid=\"pl-row\"\n    :class=\"{ wrap, 'align-center': alignCenter }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/layout/PlRow/PlRow.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlRow.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlRow/PlRow.vue"],"names":[],"mappings":"AAyBA,OAAO,eAAe,CAAC;AAGvB,qCAAqC;wBAChB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;WAET,OAAO;kBACA,OAAO;YACb,OAAO;;WAFR,OAAO;kBACA,OAAO;YACb,OAAO;;cA8BH,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlRow.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlRow/PlRow.vue"],"names":[],"mappings":"AA6BA,OAAO,eAAe,CAAC;AAGvB,qCAAqC;wBAChB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;WAET,OAAO;kBACA,OAAO;YACb,OAAO;;WAFR,OAAO;kBACA,OAAO;YACb,OAAO;;cA+BH,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/layout/PlRow/PlRow.vue2.js

@@ -8,10 +8,13 @@ var a = /* @__PURE__ */ t({
 		noGap: { type: Boolean }
 	},
 	setup(t) {
-		return (a, o) => (r(), e("div", { class: n(["pl-layout-component pl-row", {
-			wrap: t.wrap,
-			"align-center": t.alignCenter
-		}]) }, [i(a.$slots, "default")], 2));
+		return (a, o) => (r(), e("div", {
+			class: n(["pl-layout-component pl-row", {
+				wrap: t.wrap,
+				"align-center": t.alignCenter
+			}]),
+			"data-testid": "pl-row"
+		}, [i(a.$slots, "default")], 2));
 	}
 });
 //#endregion

package/dist/layout/PlRow/PlRow.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-layout-component pl-row\" :class=\"{ wrap, 'align-center': alignCenter }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;CAGE,MAAM;;;;;;;yBAeN,EAEM,OAAA,EAFD,OAAK,EAAA,CAAC,8BAA4B;GAAA,MAAW,EAAA;GAAI,gBAAkB,EAAA;GAAW,CAAA,CAAA,EAAA,EAAA,CACjF,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"PlRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlRow/PlRow.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Horizontal Flex flow container */\nexport default {\n  name: \"PlRow\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-row.scss\";\n\ndefineProps<{\n  wrap?: boolean;\n  alignCenter?: boolean;\n  noGap?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    class=\"pl-layout-component pl-row\"\n    data-testid=\"pl-row\"\n    :class=\"{ wrap, 'align-center': alignCenter }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;CAGE,MAAM;;;;;;;yBAeN,EAMM,OAAA;GALJ,OAAK,EAAA,CAAC,8BAA4B;IAAA,MAExB,EAAA;IAAI,gBAAkB,EAAA;IAAW,CAAA,CAAA;GAD3C,eAAY;MAGZ,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/layout/PlSpacer/PlSpacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSpacer.js","names":[],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlSpacer.js","names":[],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" data-testid=\"pl-spacer\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":""}

package/dist/layout/PlSpacer/PlSpacer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlSpacer.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"names":[],"mappings":"AAkBA,iCAAiC;wBACZ,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,+QAoBd,CAAC"}
+{"version":3,"file":"PlSpacer.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"names":[],"mappings":"AAkBA,iCAAiC;wBACZ,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,+QAqBd,CAAC"}

package/dist/layout/PlSpacer/PlSpacer.vue2.js

@@ -2,6 +2,7 @@ import { createElementBlock as e, defineComponent as t, openBlock as n } from "v
 //#region src/layout/PlSpacer/PlSpacer.vue?vue&type=script&setup=true&lang.ts
 var r = {
 	class: "pl-layout-component",
+	"data-testid": "pl-spacer",
 	style: { "flex-grow": "1" }
 }, i = /* @__PURE__ */ t({
 	name: "PlSpacer",

package/dist/layout/PlSpacer/PlSpacer.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSpacer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":";;;;;;CAGE,MAAM;;yBASN,EAAwD,OAAxD,EAAwD"}
+{"version":3,"file":"PlSpacer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlSpacer/PlSpacer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Fills flex remaining space */\nexport default {\n  name: \"PlSpacer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\n//\n</script>\n\n<template>\n  <div class=\"pl-layout-component\" data-testid=\"pl-spacer\" style=\"flex-grow: 1\" />\n</template>\n"],"mappings":";;;;;;;CAGE,MAAM;;yBASN,EAAgF,OAAhF,EAAgF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.15.37",
+  "version": "2.15.38",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -40,9 +40,9 @@
     "svgo": "^3.3.2",
     "typescript": "7.0.2",
     "vitest": "^4.1.3",
-    "@milaboratories/build-configs": "2.0.2",
+    "@milaboratories/ts-builder": "1.7.2",
     "@milaboratories/ts-configs": "1.4.0",
-    "@milaboratories/ts-builder": "1.7.2"
+    "@milaboratories/build-configs": "2.0.2"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/__tests__/default-testid.test.ts

@@ -0,0 +1,95 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import type { Component } from "vue";
+
+/**
+ * Every component ships a default `data-testid` on its root, `pl-<component-kebab>`, so E2E tests
+ * can find it without the consuming app configuring anything. A `data-testid` passed by the caller
+ * replaces it.
+ */
+
+// Components without a root element to mark, or whose root needs data these generic props don't give.
+const exempt: Record<string, string> = {
+  PlAccordion: "renders only slots",
+  PlErrorBoundary: "renders its slot plus an alert, no own root",
+  PlProgressBar: "renders nothing unless loading",
+  PlStatusTag: "renders nothing without a type",
+  PlChartHistogram: "needs chart data to mount",
+  PlChartStackedBar: "needs chart data to mount",
+  PlChartStackedBarCompact: "needs chart data to mount",
+  PlIcon16: "icon",
+  PlIcon24: "icon",
+  PlMaskIcon16: "icon",
+  PlMaskIcon24: "icon",
+  PlSvg: "icon",
+};
+
+const genericProps = {
+  modelValue: true,
+  options: [],
+  items: [],
+  label: "L",
+  loading: true,
+  type: "info",
+};
+
+const kebab = (name: string) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+// vitest cannot compile PlSlideModal and PlProgressCell (imported types in defineProps), so they are
+// left out of the glob; both mark their root in the template.
+const modules = import.meta.glob<Record<string, unknown>>([
+  "../components/Pl*/index.ts",
+  "../layout/Pl*/index.ts",
+  "!../components/PlSlideModal/index.ts",
+  "!../components/PlProgressCell/index.ts",
+]);
+
+function isComponent(value: unknown): value is Component {
+  return typeof value === "object" && value !== null && ("setup" in value || "render" in value);
+}
+
+async function collect(): Promise<[string, Component][]> {
+  const found: [string, Component][] = [];
+  for (const load of Object.values(modules)) {
+    for (const [name, value] of Object.entries(await load())) {
+      if (/^Pl[A-Z]/.test(name) && !(name in exempt) && isComponent(value))
+        found.push([name, value]);
+    }
+  }
+  return found.sort(([a], [b]) => a.localeCompare(b));
+}
+
+// jsdom has no CSS Houdini; PlPlaceholder registers a paint worklet when its module loads.
+Object.defineProperty(globalThis, "CSS", {
+  configurable: true,
+  value: { paintWorklet: { addModule: () => {} }, supports: () => false, escape: (s: string) => s },
+});
+
+const components = await collect();
+
+describe("default data-testid", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it.each(components)("%s marks its root", async (name, component) => {
+    const wrapper = mount(component, { attachTo: document.body, props: genericProps });
+    await wrapper.vm.$nextTick();
+
+    expect(document.body.querySelector(`[data-testid="${kebab(name)}"]`)).not.toBeNull();
+    wrapper.unmount();
+  });
+
+  it.each(components)("%s lets the caller replace the root id", async (name, component) => {
+    const wrapper = mount(component, {
+      attachTo: document.body,
+      props: genericProps,
+      attrs: { "data-testid": "from-caller" },
+    });
+    await wrapper.vm.$nextTick();
+
+    expect(document.body.querySelector('[data-testid="from-caller"]')).not.toBeNull();
+    expect(document.body.querySelector(`[data-testid="${kebab(name)}"]`)).toBeNull();
+    wrapper.unmount();
+  });
+});

package/src/base/BtnBase.vue

@@ -36,12 +36,12 @@ useRipple(btn);
     :class="{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }"
     v-bind="{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }"
   >
-    <span v-if="!round">
+    <span v-if="!round" data-testid="pl-btn-label">
       <slot />
     </span>
     <slot name="icon">
-      <PlMaskIcon16 v-if="loading" name="loading" :size="size" />
-      <PlMaskIcon16 v-else-if="icon" :name="icon" :size="size" />
+      <PlMaskIcon16 v-if="loading" data-testid="pl-btn-loading" name="loading" :size="size" />
+      <PlMaskIcon16 v-else-if="icon" data-testid="pl-btn-icon" :name="icon" :size="size" />
     </slot>
   </button>
 </template>

package/src/components/DropdownListItem.vue

@@ -47,21 +47,31 @@ const checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : Chec
 </script>
 
 <template>
-  <div :class="classes" class="dropdown-list-item">
+  <div :class="classes" class="dropdown-list-item" data-testid="pl-dropdown-list-item">
     <!-- eslint-disable vue/no-v-html -->
-    <div v-if="props.useCheckbox" :class="checkboxClasses" v-html="checkboxSvg" />
+    <div
+      v-if="props.useCheckbox"
+      :class="checkboxClasses"
+      data-testid="pl-dropdown-list-item-checkbox"
+      v-html="checkboxSvg"
+    />
     <!--eslint-enable-->
     <div class="dropdown-list-item__title-container">
-      <div class="dropdown-list-item__title text-s">
+      <div class="dropdown-list-item__title text-s" data-testid="pl-dropdown-list-item-title">
         {{ option.label }}
       </div>
-      <div v-if="option.description" class="dropdown-list-item__description text-description">
+      <div
+        v-if="option.description"
+        class="dropdown-list-item__description text-description"
+        data-testid="pl-dropdown-list-item-description"
+      >
         {{ option.description }}
       </div>
     </div>
     <div
       v-if="!props.useCheckbox && props.isSelected"
       class="dropdown-list-item__icon flex-self-start"
+      data-testid="pl-dropdown-list-item-selected-icon"
     />
   </div>
 </template>

package/src/components/InputRange.vue

@@ -77,9 +77,10 @@ function validateInput(isLeft: boolean, event: Event) {
 
 <template>
   <!-- {{ data }} -->
-  <div :class="classes" class="ui-input-range" v-bind="$attrs">
+  <div :class="classes" class="ui-input-range" data-testid="pl-input-range" v-bind="$attrs">
     <input
       v-model="valuesModel.left"
+      data-testid="pl-input-range-left"
       class="text-s"
       type="text"
       @change="updateModel"
@@ -87,9 +88,12 @@ function validateInput(isLeft: boolean, event: Event) {
       @focusout="isFocused = false"
       @input="validateInput(true, $event)"
     />
-    <div class="ui-input-range__separator">{{ props.separator }}</div>
+    <div data-testid="pl-input-range-separator" class="ui-input-range__separator">
+      {{ props.separator }}
+    </div>
     <input
       v-model="valuesModel.right"
+      data-testid="pl-input-range-right"
       class="text-s"
       type="text"
       @change="updateModel"

package/src/components/PlAccordion/PlAccordionSection.vue

@@ -50,13 +50,22 @@ defineProps<{
 </script>
 
 <template>
-  <div class="pl-accordion-section">
-    <PlSectionSeparator :class="$style.separator" :compact="compact" @click="open = !open">
-      <PlMaskIcon16 name="chevron-right" :class="[{ [$style.down]: open }, $style.chevron]" />
+  <div class="pl-accordion-section" data-testid="pl-accordion-section">
+    <PlSectionSeparator
+      data-testid="pl-accordion-section-header"
+      :class="$style.separator"
+      :compact="compact"
+      @click="open = !open"
+    >
+      <PlMaskIcon16
+        data-testid="pl-accordion-section-chevron"
+        name="chevron-right"
+        :class="[{ [$style.down]: open }, $style.chevron]"
+      />
       {{ label }}
     </PlSectionSeparator>
     <ExpandTransition>
-      <div v-if="open" :class="$style.content">
+      <div v-if="open" data-testid="pl-accordion-section-body" :class="$style.content">
         <slot />
       </div>
     </ExpandTransition>

package/src/components/PlAlert/PlAlert.vue

@@ -80,19 +80,21 @@ const iconMap = {
 <template>
   <div
     v-if="modelValue"
+    data-testid="pl-alert"
     class="pl-alert"
     :style="{ maxHeight }"
     :class="[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']"
   >
-    <div v-if="icon && type" class="pl-alert__icon">
+    <div v-if="icon && type" data-testid="pl-alert-icon" class="pl-alert__icon">
       <div :class="`icon-24 icon-${iconMap[type]}`" />
     </div>
     <div class="pl-alert__main">
-      <label v-if="label">{{ label }}</label>
-      <div class="pl-alert__main__text"><slot /></div>
+      <label v-if="label" data-testid="pl-alert-label">{{ label }}</label>
+      <div data-testid="pl-alert-message" class="pl-alert__main__text"><slot /></div>
     </div>
     <PlCloseModalBtn
       v-if="closeable"
+      data-testid="pl-alert-close"
       class="pl-alert__close-btn"
       @click="$emit('update:modelValue', false)"
     />

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -378,11 +378,16 @@ watch(
 </script>
 
 <template>
-  <div class="pl-autocomplete__envelope" @click.stop="setFocusOnInput">
+  <div
+    class="pl-autocomplete__envelope"
+    @click.stop="setFocusOnInput"
+    data-testid="pl-autocomplete"
+  >
     <div
       ref="rootRef"
       :tabindex="tabindex"
       class="pl-autocomplete"
+      data-testid="pl-autocomplete-control"
       :class="{ open: data.open, error: Boolean(computedError), disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
@@ -398,23 +403,33 @@ watch(
             :placeholder="computedPlaceholder"
             spellcheck="false"
             autocomplete="chrome-off"
+            data-testid="pl-autocomplete-input"
             @focus="onInputFocus"
           />
 
-          <div v-if="!data.open" class="input-value">
+          <div v-if="!data.open" class="input-value" data-testid="pl-autocomplete-value">
             <LongText> {{ textValue }} </LongText>
           </div>
 
           <div class="pl-autocomplete__controls">
-            <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
+            <PlMaskIcon24
+              v-if="isLoadingOptions"
+              name="loading"
+              data-testid="pl-autocomplete-loading"
+            />
             <PlIcon16
               v-if="clearable && hasValue"
               class="clear"
+              data-testid="pl-autocomplete-clear"
               name="delete-clear"
               @click.stop="clear"
             />
             <slot name="append" />
-            <div class="pl-autocomplete__arrow-wrapper" @click.stop="toggleOpen">
+            <div
+              class="pl-autocomplete__arrow-wrapper"
+              data-testid="pl-autocomplete-arrow"
+              @click.stop="toggleOpen"
+            >
               <div
                 v-if="arrowIconLarge"
                 class="arrow-icon"
@@ -425,10 +440,15 @@ watch(
             </div>
           </div>
         </div>
-        <label v-if="label">
-          <PlSvg v-if="required" :uri="SvgRequired" />
+        <label v-if="label" data-testid="pl-autocomplete-label">
+          <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-autocomplete-required" />
           <span>{{ label }}</span>
-          <PlTooltip v-if="slots.tooltip" class="info" position="top">
+          <PlTooltip
+            v-if="slots.tooltip"
+            class="info"
+            position="top"
+            data-testid="pl-autocomplete-tooltip"
+          >
             <template #tooltip>
               <slot name="tooltip" />
             </template>
@@ -439,6 +459,7 @@ watch(
           ref="overlay"
           :root="rootRef"
           class="pl-autocomplete__options"
+          data-testid="pl-autocomplete-options"
           tabindex="-1"
           :gap="3"
         >
@@ -449,17 +470,32 @@ watch(
             :is-selected="item.isSelected"
             :is-hovered="item.isActive"
             :size="optionSize"
+            data-testid="pl-autocomplete-option"
             @click.stop="selectOption(item)"
           />
-          <div v-if="!renderedOptionsRef.length" class="nothing-found">Nothing found</div>
+          <div
+            v-if="!renderedOptionsRef.length"
+            class="nothing-found"
+            data-testid="pl-autocomplete-options-empty"
+          >
+            Nothing found
+          </div>
         </DropdownOverlay>
         <DoubleContour class="pl-autocomplete__contour" :group-position="groupPosition" />
       </div>
     </div>
-    <div v-if="computedError" class="pl-autocomplete__error">{{ computedError }}</div>
-    <div v-else-if="isLoadingOptions && loadingOptionsHelper" class="pl-autocomplete__helper">
+    <div v-if="computedError" class="pl-autocomplete__error" data-testid="pl-autocomplete-error">
+      {{ computedError }}
+    </div>
+    <div
+      v-else-if="isLoadingOptions && loadingOptionsHelper"
+      class="pl-autocomplete__helper"
+      data-testid="pl-autocomplete-helper"
+    >
       {{ loadingOptionsHelper }}
     </div>
-    <div v-else-if="helper" class="pl-autocomplete__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="pl-autocomplete__helper" data-testid="pl-autocomplete-helper">
+      {{ helper }}
+    </div>
   </div>
 </template>