@thinkpixellab-public/px-vue 3.0.1

package/assets/feather/sliders.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>

package/assets/feather/smartphone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>

package/assets/feather/smile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>

package/assets/feather/speaker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-speaker"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><circle cx="12" cy="14" r="4"></circle><line x1="12" y1="6" x2="12.01" y2="6"></line></svg>

package/assets/feather/square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>

package/assets/feather/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>

package/assets/feather/stop-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-stop-circle"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>

package/assets/feather/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>

package/assets/feather/sunrise.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sunrise"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="2" x2="12" y2="9"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="8 6 12 2 16 6"></polyline></svg>

package/assets/feather/sunset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sunset"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="9" x2="12" y2="2"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="16 5 12 9 8 5"></polyline></svg>

package/assets/feather/table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-table"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"></path></svg>

package/assets/feather/tablet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tablet"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>

package/assets/feather/tag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>

package/assets/feather/target.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>

package/assets/feather/terminal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>

package/assets/feather/thermometer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thermometer"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"></path></svg>

package/assets/feather/thumbs-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>

package/assets/feather/thumbs-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>

package/assets/feather/toggle-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-left"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="8" cy="12" r="3"></circle></svg>

package/assets/feather/toggle-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-right"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="16" cy="12" r="3"></circle></svg>

package/assets/feather/tool.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>

package/assets/feather/trash-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>

package/assets/feather/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>

package/assets/feather/trello.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trello"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><rect x="7" y="7" width="3" height="9"></rect><rect x="14" y="7" width="3" height="5"></rect></svg>

package/assets/feather/trending-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-down"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>

package/assets/feather/trending-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>

package/assets/feather/triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path></svg>

package/assets/feather/truck.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>

package/assets/feather/tv.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tv"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect><polyline points="17 2 12 7 7 2"></polyline></svg>

package/assets/feather/twitch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitch"><path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"></path></svg>

package/assets/feather/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>

package/assets/feather/type.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>

package/assets/feather/umbrella.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-umbrella"><path d="M23 12a11.05 11.05 0 0 0-22 0zm-5 7a3 3 0 0 1-6 0v-7"></path></svg>

package/assets/feather/underline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-underline"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path><line x1="4" y1="21" x2="20" y2="21"></line></svg>

package/assets/feather/unlock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-unlock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>

package/assets/feather/upload-cloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>

package/assets/feather/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>

package/assets/feather/user-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-check"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>

package/assets/feather/user-minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-minus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>

package/assets/feather/user-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>

package/assets/feather/user-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-x"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="18" y1="8" x2="23" y2="13"></line><line x1="23" y1="8" x2="18" y2="13"></line></svg>

package/assets/feather/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>

package/assets/feather/users.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>

package/assets/feather/video-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video-off"><path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>

package/assets/feather/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>

package/assets/feather/voicemail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-voicemail"><circle cx="5.5" cy="11.5" r="4.5"></circle><circle cx="18.5" cy="11.5" r="4.5"></circle><line x1="5.5" y1="16" x2="18.5" y2="16"></line></svg>

package/assets/feather/volume-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-1"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>

package/assets/feather/volume-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>

package/assets/feather/volume-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>

package/assets/feather/volume.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>

package/assets/feather/watch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-watch"><circle cx="12" cy="12" r="7"></circle><polyline points="12 9 12 12 13.5 13.5"></polyline><path d="M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83"></path></svg>

package/assets/feather/wifi-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wifi-off"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>

package/assets/feather/wifi.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wifi"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>

package/assets/feather/wind.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>

package/assets/feather/x-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/assets/feather/x-octagon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/assets/feather/x-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>

package/assets/feather/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

package/assets/feather/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>

package/assets/feather/zap-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap-off"><polyline points="12.41 6.75 13 2 10.57 4.92"></polyline><polyline points="18.57 12.91 21 10 15.66 10"></polyline><polyline points="8 8 3 14 12 14 11 22 16 16"></polyline><line x1="1" y1="1" x2="23" y2="23"></line></svg>

package/assets/feather/zap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>

package/assets/feather/zoom-in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-in"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>

package/assets/feather/zoom-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-out"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>

package/assets/icons/calendar.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 14 13" xmlns="http://www.w3.org/2000/svg" >
+    <g fill="#000">
+        <path d="M12.444 0C13.304 0 14 .672 14 1.5v10c0 .828-.696 1.5-1.556 1.5H1.556C.696 13 0 12.328 0 11.5v-10C0 .672.696 0 1.556 0h10.888ZM1.556 11.5h10.888v-8H1.556v8Z"/>
+        <path d="M7 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM4 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"/>
+    </g>
+</svg>

package/assets/icons/check.svg

@@ -0,0 +1 @@
+<svg width="9" height="7" xmlns="http://www.w3.org/2000/svg"><path fill="#000" fill-rule="nonzero" d="M7.615.086 3.5 4.199 1.35 2.051l-1.4 1.398L3.5 7l5.516-5.516z"/></svg>

package/assets/icons/close-sm.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m1.929.515 7.07 7.07 7.072-7.07a1 1 0 0 1 1.414 1.414l-7.071 7.07 7.071 7.072a1 1 0 0 1-1.414 1.414L9 10.414l-7.071 7.071a1 1 0 1 1-1.414-1.414L7.585 9 .515 1.929A1 1 0 0 1 1.929.515Z" fill="#000" fill-rule="evenodd"/></svg>

package/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg width="23" height="23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="M21.753 1.247a1.5 1.5 0 0 1 0 2.121L13.621 11.5l8.132 8.132a1.5 1.5 0 1 1-2.121 2.121l-8.133-8.132-8.13 8.132a1.5 1.5 0 1 1-2.122-2.121l8.131-8.133-8.131-8.13a1.5 1.5 0 0 1 2.121-2.122L11.5 9.379l8.132-8.132a1.5 1.5 0 0 1 2.121 0Z" fill="#000" fill-rule="evenodd"/></svg>

package/assets/icons/copy.svg

@@ -0,0 +1 @@
+<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="nonzero"><path d="M4.164 0A4.163 4.163 0 0 0 0 4.164V31.25c0 1.148.934 2.082 2.082 2.082a2.084 2.084 0 0 0 2.082-2.082V4.164H31.25a2.084 2.084 0 0 0 2.082-2.082A2.084 2.084 0 0 0 31.25 0H4.164Z"/><path d="M12.5 8.332A4.164 4.164 0 0 0 8.332 12.5v25c0 2.3 1.863 4.164 4.168 4.164h25c2.3 0 4.164-1.863 4.164-4.164v-25A4.164 4.164 0 0 0 37.5 8.332h-25Z"/></g></svg>

package/assets/icons/dropdown.svg

@@ -0,0 +1,8 @@
+
+<svg width="8px" height="5px" viewBox="0 0 8 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" fill="#000000">
+            <path d="M0.832249939,0 L7.16775006,0 C7.38866396,0 7.56775006,0.1790861 7.56775006,0.4 C7.56775006,0.490828598 7.53683776,0.5789528 7.48009758,0.649878019 L4.31234752,4.6095656 C4.1743437,4.78207037 3.92262676,4.81003892 3.75012198,4.6720351 C3.7270561,4.6535824 3.70610518,4.63263148 3.68765248,4.6095656 L0.519902415,0.649878019 C0.381898596,0.477373245 0.409867146,0.225656295 0.58237192,0.0876524762 C0.653297139,0.0309123008 0.741421341,0 0.832249939,0 Z" id="Rectangle"></path>
+        </g>
+    </g>
+</svg>

package/assets/icons/invalid.svg

@@ -0,0 +1 @@
+<svg width="10" height="9" xmlns="http://www.w3.org/2000/svg"><path d="M9.885 7.372 5.688.39A.796.796 0 0 0 5 0a.795.795 0 0 0-.688.389L.114 7.372a.804.804 0 0 0 .688 1.216h8.396a.803.803 0 0 0 .687-1.216Zm-4.647-.215h-.477a.239.239 0 0 1-.238-.238V6.44c0-.131.107-.238.238-.238h.477c.132 0 .239.107.239.238v.478a.239.239 0 0 1-.239.238ZM5 5.25a.477.477 0 0 1-.477-.478V3.34a.477.477 0 0 1 .954 0v1.431A.477.477 0 0 1 5 5.25Z" fill="#000" fill-rule="nonzero"/></svg>

package/assets/icons/menu.svg

@@ -0,0 +1 @@
+<svg width="22" height="16" viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="evenodd"><rect width="22" height="2" rx="1"/><rect y="7" width="22" height="2" rx="1"/><rect y="14" width="22" height="2" rx="1"/></g></svg>

package/assets/icons/nav-next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 37"><path d="M1.969 0a1.996 1.996 0 0 1 1.438.58l16.987 16.487a1.999 1.999 0 0 1 0 2.868L3.413 36.415a1.998 1.998 0 0 1-3.33-1.977 1.99 1.99 0 0 1 .54-.885L16.13 18.5.628 3.454A1.997 1.997 0 0 1 .858.358 2 2 0 0 1 1.967 0Z" fill="#000" fill-rule="nonzero"/></svg>

package/assets/icons/nav-prev.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 37"><path d="M19.031 0c-.48-.007-.945.16-1.308.461l-.13.12L.606 17.067a1.999 1.999 0 0 0-.122 2.737l.122.13 16.982 16.482a1.998 1.998 0 0 0 3.33-1.978 1.999 1.999 0 0 0-.418-.759l-.123-.126L4.87 18.5 20.372 3.454a1.997 1.997 0 0 0-.23-3.096A2.002 2.002 0 0 0 19.033 0Z" fill="#000" fill-rule="nonzero"/></svg>

package/assets/icons/sort-asc.svg

@@ -0,0 +1 @@
+<svg width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.743 11.349a.94.94 0 0 1-.65-.276L7.806 7.785a.938.938 0 0 1 .413-1.587c.33-.087.681.012.916.258l1.684 1.685V1.953a.934.934 0 0 1 .467-.824.931.931 0 0 1 .946 0c.294.17.472.485.467.824v6.188l1.684-1.685a.938.938 0 0 1 1.587.413.938.938 0 0 1-.258.916l-3.289 3.288a.94.94 0 0 1-.679.276Zm-10.79-.47a.934.934 0 0 1-.824-.466.931.931 0 0 1 0-.947A.934.934 0 0 1 .953 9h5.168a.934.934 0 0 1 .824.466.931.931 0 0 1 0 .947.934.934 0 0 1-.824.466H.953Zm0-3.758a.934.934 0 0 1-.824-.466.931.931 0 0 1 0-.947.934.934 0 0 1 .824-.466h3.289a.934.934 0 0 1 .824.466.931.931 0 0 1 0 .947.934.934 0 0 1-.824.466H.953Zm0-3.759a.934.934 0 0 1-.824-.466.931.931 0 0 1 0-.947.934.934 0 0 1 .824-.466h1.41a.934.934 0 0 1 .824.466.931.931 0 0 1 0 .947.934.934 0 0 1-.824.466H.953Z" fill="#171718" fill-rule="nonzero"/></svg>

package/assets/icons/sort-desc.svg

@@ -0,0 +1 @@
+<svg width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.743 1a.94.94 0 0 0-.65.275L7.806 4.564a.938.938 0 0 0 .413 1.587c.33.086.681-.013.916-.259l1.684-1.684v6.187a.934.934 0 0 0 .467.824.931.931 0 0 0 .946 0 .934.934 0 0 0 .467-.824V4.208l1.684 1.684a.938.938 0 0 0 1.587-.413.938.938 0 0 0-.258-.915l-3.289-3.289A.94.94 0 0 0 11.743 1Zm-10.79.47a.934.934 0 0 0-.824.466.931.931 0 0 0 0 .947c.171.293.485.471.824.466h5.168a.934.934 0 0 0 .824-.466.931.931 0 0 0 0-.947.934.934 0 0 0-.824-.466H.953Zm0 3.758a.934.934 0 0 0-.824.466.931.931 0 0 0 0 .947c.171.294.485.472.824.466h3.289a.934.934 0 0 0 .824-.466.931.931 0 0 0 0-.947.934.934 0 0 0-.824-.466H.953Zm0 3.758a.934.934 0 0 0-.824.466.931.931 0 0 0 0 .947c.171.294.485.472.824.466h1.41a.934.934 0 0 0 .824-.466.931.931 0 0 0 0-.947.934.934 0 0 0-.824-.466H.953Z" fill="#171718" fill-rule="nonzero"/></svg>

package/assets/test/README.md

@@ -0,0 +1 @@
+This folder contains assets for testing only. Don't take a dependency on these outside of local testing.

package/assets/test/trash.svg

@@ -0,0 +1,8 @@
+<!-- icon for testing onlye-->
+<svg viewBox="0 0 15 17" xmlns="http://www.w3.org/2000/svg">
+  <g fill-rule="evenodd" fill="black">
+    <path d="m4.91 0-.82.818H0v1.637h.818v9.272c0 .895.742 1.637 1.637 1.637H6v-1.637H2.455V2.455h6.181v5.181h1.637V2.455h.818V.818H7L6.182 0H4.909Z" fill-rule="nonzero"/>
+    <path fill-rule="nonzero" d="m8.355 9.215-1.156 1.157 2.735 2.736-2.735 2.735L8.355 17l2.736-2.735L13.826 17l1.157-1.157-2.735-2.735 2.735-2.736-1.157-1.157-2.735 2.736z"/>
+    <path d="M9 1v5.341C6.67 7.165 5 9.387 5 12H2V1h7Z" opacity=".2"/>
+  </g>
+</svg>

package/babel.config.js

@@ -0,0 +1,16 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = [
+    [
+        '@babel/preset-env',
+        // Config for @babel/preset-env
+        {
+            // Example: Always transpile optional chaining/nullish coalescing
+            // include: [
+            //   /(optional-chaining|nullish-coalescing)/
+            // ],
+        },
+    ],
+];
+module.exports = {
+    presets: process.env.NODE_ENV === 'development' ? devPresets : buildPresets,
+};

package/components/PxAspect.vue

@@ -0,0 +1,127 @@
+<!--
+    Maintains the aspect ratio of an element based on width and height (work in progress)
+-->
+<template>
+    <div :class="bem({ debug: debug })">
+        <div :class="bem('aspect')" :style="aspectStyle">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+import aspectFilter from '../plugins/filters/aspect.js';
+import { contain } from '../utils/fit';
+import PxBaseResize from './PxBaseResize.vue';
+
+export default {
+    name: 'px-aspect',
+    mixins: [PxBaseResize],
+    props: {
+        // the aspect ration (can be express as a number or a ration string like '16:9')
+        aspect: { default: 16 / 9 },
+
+        // the horizontal positioning when there is leftover space
+        alignX: { default: 0.5 }, // number | 'start' | 'center' | 'end'
+
+        // the vertical positioning when there is leftover space
+        alignY: { default: 0.5 }, // number | 'start' | 'center' | 'end'
+
+        // if true then draw a border around the fixed aspect area
+        debug: { type: Boolean, default: false },
+    },
+    data() {
+        return {
+            aspectRect: null,
+        };
+    },
+    computed: {
+        aspectRatio() {
+            return aspectFilter(this.aspect);
+        },
+        aspectRatioRect() {
+            return {
+                width: this.aspectRatio,
+                height: 1,
+            };
+        },
+        aspectStyle() {
+            if (this.aspectRect) {
+                return {
+                    width: this.cssPx(this.aspectRect.width),
+                    height: this.cssPx(this.aspectRect.height),
+                    left: this.cssPx(this.aspectRect.x),
+                    top: this.cssPx(this.aspectRect.y),
+                };
+            }
+            return null;
+        },
+    },
+    watch: {
+        aspectRatio() {
+            this.resize();
+        },
+    },
+    methods: {
+        alignToDecimal(align) {
+            if (typeof align == 'number') {
+                return align;
+            }
+            if (align === 'center') {
+                return 0.5;
+            }
+            if (align === 'start') {
+                return 0;
+            }
+            if (align === 'end') {
+                return 1;
+            }
+
+            const float = parseFloat(align);
+            return !isNaN(float) ? float : 0.5;
+        },
+        resize() {
+            this.aspectRect = contain(
+                this.aspectRatioRect,
+                this.$el.getBoundingClientRect(),
+                this.alignToDecimal(this.alignX),
+                this.alignToDecimal(this.alignY)
+            );
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-aspect {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    &__aspect {
+        position: absolute;
+
+        > img,
+        > video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &--debug {
+        border: 1px dashed rgba(black, 0.2);
+    }
+
+    &--debug & {
+        &__aspect {
+            @include after() {
+                @include abs;
+                z-index: 1;
+                border: 1px dashed red;
+            }
+        }
+    }
+}
+</style>

package/components/PxAutoClamp.vue

@@ -0,0 +1,75 @@
+<!--
+    Automatically computes line clamp based on the available height and current line height.
+-->
+<template>
+    <div :class="bem()" :style="{}">
+        <span
+            :class="bem('clamp')"
+            :style="{
+                '-webkit-line-clamp': lineCount,
+                'line-clamp': lineCount,
+                height: cssPx(maxHeight),
+            }"
+        >
+            {{ text }}
+        </span>
+    </div>
+</template>
+
+<script>
+import PxBaseResize from './PxBaseResize.vue';
+
+export default {
+    name: 'px-auto-clamp',
+    mixins: [PxBaseResize],
+    props: {
+        text: { type: String, default: null },
+    },
+    data() {
+        return {
+            lineCount: 0,
+            maxHeight: null,
+        };
+    },
+    computed: {},
+    methods: {
+        resize() {
+            if (process.server || typeof window == undefined || !this.$el) {
+                return;
+            }
+
+            const availableHeight = this.$el.clientHeight;
+            const lineHeight = parseFloat(window.getComputedStyle(this.$el).lineHeight);
+
+            this.lineCount = Math.floor(availableHeight / lineHeight);
+            this.height = this.lineCount * this.lineHeight;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.px-auto-clamp {
+    // required
+    padding: 0;
+    display: block;
+    display: -webkit-box;
+    overflow: hidden;
+    position: relative;
+
+    &__clamp {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        display: block;
+        display: -webkit-box;
+        overflow: hidden;
+
+        max-height: 100%;
+        height: auto;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+    }
+}
+</style>