pxd 0.0.64 → 0.1.3

package/dist/components/fader/index.vue

@@ -1,76 +1,78 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
-import { useResizeObserver } from "../../composables/use-browser-observer";
-import { cachedOff, cachedOn } from "../../utils/event";
-import { getCssUnitValue } from "../../utils/format";
-import { unrefElement } from "../../utils/ref";
-import { throttleByRaf } from "../../utils/timing";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { getElement } from "../../utils/dom.js";
+import { cachedOff, cachedOn, throttleByRaf } from "../../utils/event.js";
+import { getCssUnitValue } from "../../utils/format.js";
 defineOptions({
-  name: "PFader",
-  inheritAttrs: false
+	name: "PFader",
+	inheritAttrs: false
 });
 const props = defineProps({
-  size: { type: Number, required: false },
-  color: { type: String, required: false },
-  container: { type: [String, Object], required: false },
-  direction: { type: String, required: false, default: "both" }
-});
-const fader = shallowRef({
-  top: false,
-  left: false,
-  right: false,
-  bottom: false
+	size: {
+		type: Number,
+		required: false
+	},
+	color: {
+		type: String,
+		required: false
+	},
+	scrollTarget: {
+		type: null,
+		required: false
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: "both"
+	}
 });
 const DEFAULT_SIZE = 16;
 const DIFF_THRESHOLD = 16;
+const fader = shallowRef({
+	top: false,
+	left: false,
+	right: false,
+	bottom: false
+});
 const computedStyle = computed(() => ({
-  "--fader-color": props.color,
-  "--fader-size": getCssUnitValue(props.size)
+	"--fader-color": props.color,
+	"--fader-size": getCssUnitValue(props.size)
 }));
-const formattedContainer = computed(() => {
-  const { container } = props;
-  if (typeof container === "string") {
-    return document.querySelector(container);
-  } else {
-    return unrefElement(container);
-  }
-});
+const formattedContainer = computed(() => getElement(props.scrollTarget));
 const onContainerScroll = throttleByRaf(() => {
-  const container = formattedContainer.value;
-  if (!container || !container.isConnected) {
-    return;
-  }
-  const { size = DEFAULT_SIZE } = props;
-  const { scrollLeft, scrollWidth, clientWidth, scrollTop, clientHeight, scrollHeight } = container;
-  fader.value = {
-    left: scrollLeft >= size,
-    right: scrollLeft + clientWidth < scrollWidth - DIFF_THRESHOLD,
-    top: scrollTop >= size,
-    bottom: scrollTop + clientHeight < scrollHeight - DIFF_THRESHOLD
-  };
+	const container = formattedContainer.value;
+	if (!container || !container.isConnected) {
+		return;
+	}
+	const { size = DEFAULT_SIZE } = props;
+	const { scrollLeft, scrollWidth, clientWidth, scrollTop, clientHeight, scrollHeight } = container;
+	fader.value = {
+		left: scrollLeft >= size,
+		right: scrollLeft + clientWidth < scrollWidth - DIFF_THRESHOLD,
+		top: scrollTop >= size,
+		bottom: scrollTop + clientHeight < scrollHeight - DIFF_THRESHOLD
+	};
 });
 useResizeObserver(() => formattedContainer.value, onContainerScroll);
-watch(
-  () => formattedContainer.value,
-  (container, oldDom) => {
-    if (oldDom) {
-      cachedOff(oldDom, "scroll", onContainerScroll);
-      return;
-    }
-    if (!container) {
-      return;
-    }
-    cachedOn(container, "scroll", onContainerScroll, { passive: true });
-  },
-  { immediate: true }
-);
+watch(() => formattedContainer.value, (container, oldDom) => {
+	if (oldDom) {
+		cachedOff(oldDom, "scroll", onContainerScroll);
+	}
+	if (!container) {
+		return;
+	}
+	cachedOn(container, "scroll", onContainerScroll, { passive: true });
+}, { immediate: true });
 onBeforeUnmount(() => {
-  cachedOff(formattedContainer.value, "scroll", onContainerScroll);
+	onContainerScroll.cancel();
+	cachedOff(formattedContainer.value, "scroll", onContainerScroll);
 });
 </script>
 
 <template>
   <div
+    data-fader
     aria-hidden="true"
     class="pxd-fader inset-0 pointer-events-none absolute size-full rounded-inherit"
     :style="computedStyle"
@@ -89,64 +91,6 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-fader--item::before,
-.pxd-fader--item::after {
-  content: '';
-  position: absolute;
-  border-radius: inherit;
-  background: linear-gradient(var(--dir), transparent, var(--fader-color));
-  mask-image: linear-gradient(var(--dir-revert), var(--fader-color) 50%, transparent);
-  transition-property: opacity;
-  opacity: 0;
-}
-
-.pxd-fader--item.left::before,
-.pxd-fader--item.top::before,
-.pxd-fader--item.right::after,
-.pxd-fader--item.bottom::after {
-  opacity: 1;
-}
-
-.pxd-fader--item.horizontal {
-  &::before,
-  &::after {
-    top: 0;
-    width: var(--fader-size);
-    height: 100%;
-  }
-
-  &::before {
-    left: 0;
-    --dir: to left;
-    --dir-revert: to right;
-  }
-
-  &::after {
-    right: 0;
-    --dir: to right;
-    --dir-revert: to left;
-  }
-}
-
-.pxd-fader--item.vertical {
-  &::before,
-  &::after {
-    left: 0;
-    width: 100%;
-    height: var(--fader-size);
-  }
-
-  &::before {
-    top: 0;
-    --dir: to top;
-    --dir-revert: to bottom;
-  }
-
-  &::after {
-    bottom: 0;
-    --dir: to bottom;
-    --dir-revert: to top;
-  }
-}
+<style>
+.pxd-fader--item:after,.pxd-fader--item:before{background:linear-gradient(var(--dir),transparent,var(--fader-color));border-radius:inherit;content:"";-webkit-mask-image:linear-gradient(var(--dir-revert),var(--fader-color) 50%,transparent);mask-image:linear-gradient(var(--dir-revert),var(--fader-color) 50%,transparent);opacity:0;position:absolute;transition-property:opacity}.pxd-fader--item.bottom:after,.pxd-fader--item.left:before,.pxd-fader--item.right:after,.pxd-fader--item.top:before{opacity:1}.pxd-fader--item.horizontal:after,.pxd-fader--item.horizontal:before{height:100%;top:0;width:var(--fader-size)}.pxd-fader--item.horizontal:before{left:0;--dir:to left;--dir-revert:to right}.pxd-fader--item.horizontal:after{right:0;--dir:to right;--dir-revert:to left}.pxd-fader--item.vertical:after,.pxd-fader--item.vertical:before{height:var(--fader-size);left:0;width:100%}.pxd-fader--item.vertical:before{top:0;--dir:to top;--dir-revert:to bottom}.pxd-fader--item.vertical:after{bottom:0;--dir:to bottom;--dir-revert:to top}
 </style>

package/dist/components/fader/types.d.ts

@@ -1,8 +1,9 @@
-import type { ComponentDirection } from '../../types/shared'
+import type { ComponentDirection } from '../../types/shared/props'
+import type { ComponentPublicInstance } from 'vue'
 
 export interface FaderProps {
   size?: number
   color?: string
-  container?: string | object
+  scrollTarget?: string | HTMLElement | ComponentPublicInstance | null
   direction?: ComponentDirection | 'both'
 }

package/dist/components/feedback-bar/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { FeedbackBarProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<FeedbackBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    thumbUp: () => any;
+    thumbDown: () => any;
+}, string, import("vue").PublicProps, Readonly<FeedbackBarProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onThumbUp?: (() => any) | undefined;
+    onThumbDown?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/feedback-bar/index.vue

@@ -0,0 +1,81 @@
+<script setup>
+import CrossIcon from "@gdsicon/vue/cross";
+import InformationIcon from "@gdsicon/vue/information";
+import ThumbDownIcon from "@gdsicon/vue/thumb-down";
+import ThumbUpIcon from "@gdsicon/vue/thumb-up";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import PButton from "../button/index.vue";
+defineOptions({
+	name: "PFeedbackBar",
+	inheritAttrs: false
+});
+const props = defineProps({ label: {
+	type: String,
+	required: false
+} });
+const emits = defineEmits([
+	"close",
+	"thumbUp",
+	"thumbDown"
+]);
+const configProvider = useConfigProvider();
+function handleClose() {
+	emits("close");
+}
+function handleThumbUp() {
+	emits("thumbUp");
+}
+function handleThumbDown() {
+	emits("thumbDown");
+}
+</script>
+
+<template>
+  <div
+    data-feedback-bar
+    class="pxd-feedback-bar p-1.5 gap-1 flex w-full max-w-full items-center overflow-hidden rounded-xl border bg-background-100"
+    v-bind="$attrs"
+  >
+    <InformationIcon aria-hidden="true" class="size-3 ms-2.5 me-1 shrink-0 text-gray-900" />
+
+    <span class="pxd-feedback-bar--label text-sm flex-1 shrink-0 text-foreground">
+      {{ label }}
+    </span>
+
+    <PButton
+      variant="ghost"
+      size="sm"
+      icon
+      class="text-gray-900"
+      :aria-label="configProvider.locale.feedback.thumbUp"
+      :title="configProvider.locale.feedback.thumbUp"
+      @click="handleThumbUp"
+    >
+      <ThumbUpIcon class="size-3" />
+    </PButton>
+
+    <PButton
+      variant="ghost"
+      size="sm"
+      icon
+      class="text-gray-900"
+      :aria-label="configProvider.locale.feedback.thumbDown"
+      :title="configProvider.locale.feedback.thumbDown"
+      @click="handleThumbDown"
+    >
+      <ThumbDownIcon class="size-3" />
+    </PButton>
+
+    <PButton
+      variant="ghost"
+      size="sm"
+      icon
+      class="text-gray-900"
+      :aria-label="configProvider.locale.feedback.close"
+      :title="configProvider.locale.feedback.close"
+      @click="handleClose"
+    >
+      <CrossIcon class="size-3" />
+    </PButton>
+  </div>
+</template>

package/dist/components/feedback-bar/types.d.ts

@@ -0,0 +1,9 @@
+export interface FeedbackBarProps {
+  label?: string
+}
+
+export interface FeedbackBarEmits {
+  close: []
+  thumbUp: []
+  thumbDown: []
+}

package/dist/components/gauge/index.vue

@@ -1,28 +1,45 @@
 <script setup>
 import ChartActivityIcon from "@gdsicon/vue/chart-activity";
 import { computed } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getColorByThreshold, getFallbackValue } from "../../utils/get";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getColorByThreshold, getFallbackValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PGauge",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PGauge",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  modelValue: { type: [Number, null], required: false, default: 60 },
-  showValue: { type: Boolean, required: false, default: false },
-  indeterminate: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  colors: { type: Object, required: false }
+	modelValue: {
+		type: [Number, null],
+		required: false,
+		default: 60
+	},
+	showValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	indeterminate: {
+		type: Boolean,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	colors: {
+		type: Object,
+		required: false
+	}
 });
 const SIZES = {
-  xs: "24",
-  sm: "32",
-  md: "64",
-  lg: "128"
+	xs: "24",
+	sm: "32",
+	md: "64",
+	lg: "128"
 };
 const PROGRESS_BAR_GAP = 5;
 const MIN_VISIBLE_TRACK = PROGRESS_BAR_GAP * 2;
@@ -31,77 +48,80 @@ const STROKE_WIDTH = 10;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const GAP_LENGTH = PROGRESS_BAR_GAP / 100 * CIRCUMFERENCE;
 const defaultColors = {
-  0: "var(--color-red-800)",
-  30: "var(--color-amber-800)",
-  60: "var(--color-green-700)"
+	0: "var(--color-red-800)",
+	30: "var(--color-amber-800)",
+	60: "var(--color-green-700)"
 };
-const configProvider = useConfigProvider();
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const progress = computed(() => {
-  if (props.indeterminate) {
-    return 0;
-  }
-  return Math.min(Math.max(props.modelValue || 0, 0), 100);
+	if (props.indeterminate) {
+		return 0;
+	}
+	return Math.min(Math.max(props.modelValue || 0, 0), 100);
 });
+// Arc length is taken as a percentage of the geometric arc; round linecap overhangs
+// past the endpoints, so trimming slightly keeps gaps from looking too full.
 const progressArc = computed(() => {
-  if (progress.value === 0 || progress.value === 100) {
-    return progress.value / 100 * CIRCUMFERENCE;
-  }
-  const baseArc = progress.value / 100 * CIRCUMFERENCE;
-  const roundCapTrim = STROKE_WIDTH;
-  return Math.max(0, baseArc - roundCapTrim);
+	if (progress.value === 0 || progress.value === 100) {
+		return progress.value / 100 * CIRCUMFERENCE;
+	}
+	const baseArc = progress.value / 100 * CIRCUMFERENCE;
+	const roundCapTrim = STROKE_WIDTH;
+	return Math.max(0, baseArc - roundCapTrim);
 });
 const progressStatus = computed(() => {
-  const _progress = progress.value;
-  return {
-    isComplete: props.indeterminate ? false : _progress >= 100,
-    hasProgress: props.indeterminate ? false : _progress > 0
-  };
+	const _progress = progress.value;
+	return {
+		isComplete: props.indeterminate ? false : _progress >= 100,
+		hasProgress: props.indeterminate ? false : _progress > 0
+	};
 });
 const shouldShowTrack = computed(() => {
-  if (progressStatus.value.isComplete) {
-    return false;
-  }
-  if (!progressStatus.value.hasProgress) {
-    return true;
-  }
-  const remainingPercent = 100 - progress.value;
-  return remainingPercent >= MIN_VISIBLE_TRACK;
+	if (progressStatus.value.isComplete) {
+		return false;
+	}
+	if (!progressStatus.value.hasProgress) {
+		return true;
+	}
+	const remainingPercent = 100 - progress.value;
+	return remainingPercent >= MIN_VISIBLE_TRACK;
 });
 const trackArc = computed(() => {
-  if (!shouldShowTrack.value) {
-    return 0;
-  }
-  if (!progressStatus.value.hasProgress) {
-    return CIRCUMFERENCE;
-  }
-  return CIRCUMFERENCE - progressArc.value - GAP_LENGTH * 2;
+	if (!shouldShowTrack.value) {
+		return 0;
+	}
+	if (!progressStatus.value.hasProgress) {
+		return CIRCUMFERENCE;
+	}
+	return CIRCUMFERENCE - progressArc.value - GAP_LENGTH * 2;
 });
 const trackOffset = computed(() => {
-  if (!shouldShowTrack.value || !progressStatus.value.hasProgress) {
-    return 0;
-  }
-  return -progressArc.value - GAP_LENGTH;
+	if (!shouldShowTrack.value || !progressStatus.value.hasProgress) {
+		return 0;
+	}
+	return -progressArc.value - GAP_LENGTH;
 });
 const progressColors = computed(() => {
-  const colors = props.colors || defaultColors;
-  let primaryColor = colors.primary;
-  let secondaryColor = colors.secondary || "hsl(var(--color-gray-200-value))";
-  if (props.indeterminate) {
-    primaryColor = "hsl(var(--color-gray-200-value))";
-    secondaryColor = "hsl(var(--color-gray-200-value))";
-  } else if (!primaryColor) {
-    primaryColor = getColorByThreshold(progress.value, colors) || colors.primary;
-  }
-  return {
-    primary: primaryColor,
-    secondary: secondaryColor
-  };
+	const colors = props.colors || defaultColors;
+	let primaryColor = colors.primary;
+	let secondaryColor = colors.secondary || "hsl(var(--color-gray-200-value))";
+	if (props.indeterminate) {
+		primaryColor = "hsl(var(--color-gray-200-value))";
+		secondaryColor = "hsl(var(--color-gray-200-value))";
+	} else if (!primaryColor) {
+		primaryColor = getColorByThreshold(progress.value, colors) || colors.primary;
+	}
+	return {
+		primary: primaryColor,
+		secondary: secondaryColor
+	};
 });
+const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 </script>
 
 <template>
   <div
+    data-gauge
     class="pxd-gauge relative size-max"
     :style="`--gauge-size: ${computedSize}px`"
     v-bind="$attrs"
@@ -123,7 +143,7 @@ const progressColors = computed(() => {
           stroke-linecap="round"
           :stroke-dashoffset="trackOffset"
           :stroke="progressColors.secondary"
-          class="pxd-gauge--track motion-safe:transition-appearance"
+          class="pxd-gauge--track motion-safe:transition-[stroke,stroke-dasharray,stroke-dashoffset]"
           :stroke-dasharray="
   progressStatus.hasProgress ? `${trackArc} ${CIRCUMFERENCE}` : void 0
 "
@@ -139,7 +159,7 @@ const progressColors = computed(() => {
           stroke-dashoffset="0"
           stroke-linecap="round"
           :stroke="progressColors.primary"
-          class="pxd-gauge--bar motion-safe:transition-appearance"
+          class="pxd-gauge--bar motion-safe:transition-[stroke,stroke-dasharray,stroke-dashoffset]"
           :stroke-dasharray="`${progressArc} ${CIRCUMFERENCE}`"
         />
       </g>

package/dist/components/gauge/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSizeWithXs } from '../../types/shared'
+import type { ComponentSizeWithXs } from '../../types/shared/props'
 
 export interface GaugeProps {
   modelValue?: number | null

package/dist/components/grid/index.vue

@@ -1,76 +1,82 @@
 <script setup>
 import { computed } from "vue";
-import { getResponsiveValue } from "../../utils/get";
+import { getResponsiveValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PGrid",
-  inheritAttrs: false
+	name: "PGrid",
+	inheritAttrs: false
 });
 const props = defineProps({
-  debug: { type: Boolean, required: false },
-  rows: { type: [String, Number, Object], required: false },
-  columns: { type: [String, Number, Object], required: false }
+	debug: {
+		type: Boolean,
+		required: false
+	},
+	rows: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	},
+	columns: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	}
 });
 const presetGridRows = {
-  "--xs-rows": "grid-rows-(--xs-rows) [--rows-count:var(--xs-rows-count)]",
-  "--sm-rows": "sm:grid-rows-(--sm-rows) sm:[--rows-count:var(--sm-rows-count)]",
-  "--md-rows": "md:grid-rows-(--md-rows) md:[--rows-count:var(--md-rows-count)]",
-  "--lg-rows": "lg:grid-rows-(--lg-rows) lg:[--rows-count:var(--lg-rows-count)]",
-  "--xl-rows": "xl:grid-rows-(--xl-rows) xl:[--rows-count:var(--xl-rows-count)]"
+	"--xs-rows": "grid-rows-(--xs-rows) [--rows-count:var(--xs-rows-count)]",
+	"--sm-rows": "sm:grid-rows-(--sm-rows) sm:[--rows-count:var(--sm-rows-count)]",
+	"--md-rows": "md:grid-rows-(--md-rows) md:[--rows-count:var(--md-rows-count)]",
+	"--lg-rows": "lg:grid-rows-(--lg-rows) lg:[--rows-count:var(--lg-rows-count)]",
+	"--xl-rows": "xl:grid-rows-(--xl-rows) xl:[--rows-count:var(--xl-rows-count)]"
 };
 const presetGridCols = {
-  "--xs-cols": "grid-cols-(--xs-cols) [--cols-count:var(--xs-cols-count)]",
-  "--sm-cols": "sm:grid-cols-(--sm-cols) sm:[--cols-count:var(--sm-cols-count)]",
-  "--md-cols": "md:grid-cols-(--md-cols) md:[--cols-count:var(--md-cols-count)]",
-  "--lg-cols": "lg:grid-cols-(--lg-cols) lg:[--cols-count:var(--lg-cols-count)]",
-  "--xl-cols": "xl:grid-cols-(--xl-cols) xl:[--cols-count:var(--xl-cols-count)]"
+	"--xs-cols": "grid-cols-(--xs-cols) [--cols-count:var(--xs-cols-count)]",
+	"--sm-cols": "sm:grid-cols-(--sm-cols) sm:[--cols-count:var(--sm-cols-count)]",
+	"--md-cols": "md:grid-cols-(--md-cols) md:[--cols-count:var(--md-cols-count)]",
+	"--lg-cols": "lg:grid-cols-(--lg-cols) lg:[--cols-count:var(--lg-cols-count)]",
+	"--xl-cols": "xl:grid-cols-(--xl-cols) xl:[--cols-count:var(--xl-cols-count)]"
 };
 const formattedRows = computed(() => {
-  const { rows, debug } = props;
-  return getResponsiveValue(
-    rows,
-    (typeof rows === "object" ? rows.xs : rows) ?? 0,
-    (acc, bp, value) => {
-      acc[`--${bp}-rows`] = `repeat(${value}, minmax(0, 1fr))`;
-      if (debug) {
-        acc[`--${bp}-rows-count`] = value || 1;
-      }
-    }
-  );
+	const { rows, debug } = props;
+	return getResponsiveValue(rows, (typeof rows === "object" ? rows.xs : rows) ?? 0, (acc, bp, value) => {
+		acc[`--${bp}-rows`] = `repeat(${value}, minmax(0, 1fr))`;
+		if (debug) {
+			acc[`--${bp}-rows-count`] = value || 1;
+		}
+	});
 });
 const formattedCols = computed(() => {
-  const { columns, debug } = props;
-  return getResponsiveValue(
-    columns,
-    (typeof columns === "object" ? columns.xs : columns) ?? 1,
-    (acc, bp, value) => {
-      acc[`--${bp}-cols`] = `repeat(${value}, minmax(0, 1fr))`;
-      if (debug) {
-        acc[`--${bp}-cols-count`] = value || 1;
-      }
-    }
-  );
+	const { columns, debug } = props;
+	return getResponsiveValue(columns, (typeof columns === "object" ? columns.xs : columns) ?? 1, (acc, bp, value) => {
+		acc[`--${bp}-cols`] = `repeat(${value}, minmax(0, 1fr))`;
+		if (debug) {
+			acc[`--${bp}-cols-count`] = value || 1;
+		}
+	});
 });
 const computedClasses = computed(() => {
-  return [
-    ...Object.keys(formattedRows.value).map(
-      (bp) => presetGridRows[bp]
-    ),
-    ...Object.keys(formattedCols.value).map(
-      (bp) => presetGridCols[bp]
-    ),
-    props.debug ? "debug" : ""
-  ].join(" ");
+	const classes = [
+		...Object.keys(formattedRows.value).map((bp) => presetGridRows[bp]),
+		...Object.keys(formattedCols.value).map((bp) => presetGridCols[bp]),
+		props.debug ? "debug" : ""
+	];
+	return classes;
 });
 const computedStyle = computed(() => {
-  return {
-    ...formattedRows.value,
-    ...formattedCols.value
-  };
+	return {
+		...formattedRows.value,
+		...formattedCols.value
+	};
 });
 </script>
 
 <template>
-  <div class="pxd-grid relative w-full max-w-full" v-bind="$attrs">
+  <div data-grid class="pxd-grid relative w-full max-w-full" v-bind="$attrs">
     <section
       class="pxd-grid-section [container-type:inline-size] grid h-full max-h-inherit min-h-inherit w-full max-w-inherit min-w-inherit"
       :class="computedClasses"