@nexxtmove/ui 1.2.3 → 1.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Squircle/Squircle.vue

@@ -23,21 +23,39 @@ const px = computed(() => (typeof props.size === 'number' ? props.size : sizeMap
 
 const id = Math.random().toString(36).slice(2, 9)
 const clipPathId = `squircle-clip-${id}`
+
+// Squircle outline normalised to a 0-1 box so a single path works at any size.
+// Safari renders foreignObject content unreliably, so the slot lives in a plain
+// element that is clipped with an objectBoundingBox clipPath instead.
+const squirclePath =
+  'M0.5,1 c0.219,0 0.341,0 0.4205,-0.0795 C1,0.841 1,0.719 1,0.5 s0,-0.341 -0.0795,-0.4205 ' +
+  'C0.841,0 0.719,0 0.5,0 S0.159,0 0.0795,0.0795 C0,0.159 0,0.281 0,0.5 ' +
+  's0,0.341 0.0795,0.4205 C0.159,1 0.281,1 0.5,1 Z'
+
+const style = computed(() => ({
+  width: `${px.value}px`,
+  height: `${px.value}px`,
+  clipPath: `url(#${clipPathId})`,
+  WebkitClipPath: `url(#${clipPathId})`,
+}))
 </script>
 
 <template>
-  <svg :viewBox="`0 0 ${px} ${px}`" :width="px" :height="px">
-    <defs>
-      <clipPath :id="clipPathId">
-        <path
-          :transform="`scale(${px / 200})`"
-          d="M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z"
-        />
-      </clipPath>
-    </defs>
-
-    <foreignObject x="0" y="0" width="100%" height="100%" :clip-path="`url(#${clipPathId})`">
-      <slot />
-    </foreignObject>
-  </svg>
+  <div class="relative block shrink-0 overflow-hidden" :style="style">
+    <svg
+      class="absolute h-0 w-0 overflow-hidden"
+      aria-hidden="true"
+      focusable="false"
+      width="0"
+      height="0"
+    >
+      <defs>
+        <clipPath :id="clipPathId" clipPathUnits="objectBoundingBox">
+          <path :d="squirclePath" />
+        </clipPath>
+      </defs>
+    </svg>
+
+    <slot />
+  </div>
 </template>

package/src/test-setup.ts

@@ -0,0 +1,9 @@
+// jsdom ships no media playback, so components driving a <video> element make it
+// log "Not implemented: HTMLMediaElement's play() method" on every test run.
+// The stubs stay configurable and writable so individual tests can still spy on
+// or override them per element.
+Object.defineProperties(HTMLMediaElement.prototype, {
+  play: { configurable: true, writable: true, value: () => Promise.resolve() },
+  pause: { configurable: true, writable: true, value: () => {} },
+  load: { configurable: true, writable: true, value: () => {} },
+})