@thinkpixellab-public/px-vue 4.1.24 → 4.1.26

package/bases/PxBaseItemsSelect.vue

@@ -139,15 +139,19 @@ export default {
             immediate: true,
             handler(nv, ov) {
                 // check for matching values
-                if (nv && ov && nv.length == ov.length) {
+                const nvArray = ensureSet(nv);
+                const ovArray = ensureSet(ov);
+
+                if (nvArray.length === ovArray.length) {
                     let match = true;
-                    for (let i = 0; i < nv.length; i++) {
-                        match = match && nv[i] == ov[i];
+                    for (let i = 0; i < nvArray.length; i++) {
+                        match = match && nvArray[i] === ovArray[i];
                     }
                     if (match) {
                         return;
                     }
                 }
+
                 this.setSelection(nv);
             },
         },

package/components/PxCard.vue

@@ -21,7 +21,7 @@ export default {
 .px-card {
     /// Configuration defautls for px-calendar
     $-defaults: (
-        'px-card.background-color': color(page-bg),
+        'px-card.background-color': site-var(page-bg),
         'px-card.padding': 1rem,
         'px-card.border-radius': 0.5rem,
         'px-card.box-shadow': depth-shadow(20, 0.1, black),

package/components/PxCorners.vue

@@ -0,0 +1,233 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div
+        v-if="smoothingEnabled"
+        :class="bem()"
+        ref="el"
+        :style="{
+            position: 'relative',
+            clipPath: renderMode === 'clip' ? smoothCornersPath : null,
+            mask: renderMode === 'mask' ? smoothCornersPath : null,
+            ...overrideStyles,
+        }"
+    >
+        <div
+            v-if="hasBorder"
+            :style="{
+                position: 'absolute',
+                inset: 0,
+                clipPath: renderMode === 'clip' ? borderMaskPath : null,
+                mask: renderMode === 'mask' ? borderMaskPath : null,
+                backgroundColor: computedBorderColor,
+                touchAction: 'none',
+            }"
+        ></div>
+
+        <slot />
+    </div>
+
+    <div v-else>
+        <slot />
+    </div>
+</template>
+
+<script>
+import { getSmoothCornersPath, getBorderMaskClipPath } from '../utils/smootherCorners';
+
+export default {
+    name: 'px-corners',
+    props: {
+        smoothingEnabled: { type: Boolean, default: true },
+        smoothing: { type: Number, default: 1 },
+        maxRadius: { type: [Number, String], default: Infinity },
+        minRadius: { type: [Number, String], default: 0 },
+        radius: { type: [Array, Number, String], default: 'auto' },
+        borderWidth: { type: [Number, String], default: 'auto' },
+        borderColor: { type: String, default: 'auto' },
+
+        // clip or mask
+        renderMode: { type: String, default: 'clip' },
+    },
+    data() {
+        return {
+            dimensions: {
+                width: 0,
+                height: 0,
+            },
+            computedRadius: null,
+            computedBorderWidth: 0,
+            computedBorderColor: null,
+            resizeObserver: null,
+
+            // flag that we've detected auto styles
+            autoStylesDetected: false,
+        };
+    },
+    computed: {
+        smoothCornersPath() {
+            if (
+                !this.smoothingEnabled ||
+                this.dimensions.width <= 0 ||
+                this.dimensions.height <= 0
+            ) {
+                return null;
+            }
+
+            return getSmoothCornersPath({
+                width: this.dimensions.width,
+                height: this.dimensions.height,
+                radius: this.computedRadius || this.radius,
+                smoothing: this.smoothing,
+                borderWidth: 0,
+                minRadius: this.minRadius,
+                maxRadius: this.maxRadius,
+                preserveSmoothing: true,
+                renderMode: this.renderMode,
+            });
+        },
+        borderMaskPath() {
+            if (
+                !this.smoothingEnabled ||
+                this.dimensions.width <= 0 ||
+                this.dimensions.height <= 0 ||
+                this.computedBorderWidth <= 0
+            ) {
+                return null;
+            }
+
+            return getBorderMaskClipPath({
+                width: this.dimensions.width,
+                height: this.dimensions.height,
+                radius: this.computedRadius || this.radius,
+                smoothing: this.smoothing,
+                borderWidth: this.computedBorderWidth,
+                minRadius: this.minRadius,
+                maxRadius: this.maxRadius,
+                preserveSmoothing: true,
+                renderMode: this.renderMode,
+            });
+        },
+        hasBorder() {
+            return !!this.borderMaskPath;
+        },
+        overrideStyles() {
+            if (!this.smoothingEnabled || !this.autoStylesDetected) return {};
+
+            return {
+                borderRadius: 'unset',
+                borderTopLeftRadius: 'unset',
+                borderTopRightRadius: 'unset',
+                borderBottomRightRadius: 'unset',
+                borderBottomLeftRadius: 'unset',
+                border: 'unset',
+                borderWidth: 'unset',
+                borderStyle: 'unset',
+                borderColor: 'unset',
+            };
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (!this.$refs.el) return;
+            if (!this.smoothingEnabled) return;
+
+            this.detectAutoValues();
+            this.updateDimensions();
+            this.setupResizeObserver();
+        });
+    },
+    beforeUnmount() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    },
+    methods: {
+        parseCssDimension(value) {
+            if (typeof value === 'string' && value.length > 0) {
+                value = value.trim().split(/\s+/)[0];
+
+                if (value.endsWith('px')) return parseFloat(value);
+                if (value.endsWith('rem')) {
+                    return (
+                        parseFloat(value) *
+                        parseFloat(getComputedStyle(document.documentElement).fontSize)
+                    );
+                }
+                if (value.endsWith('em')) {
+                    return parseFloat(value) * parseFloat(getComputedStyle(this.$refs.el).fontSize);
+                }
+            }
+
+            return value;
+        },
+        detectAutoValues() {
+            if (!this.$refs.el) return;
+
+            const cs = getComputedStyle(this.$refs.el);
+
+            // auto radius detection
+            if (this.radius === 'auto') {
+                const radiusTopLeft = cs.getPropertyValue('border-top-left-radius') || '0';
+                const radiusTopRight = cs.getPropertyValue('border-top-right-radius') || '0';
+                const radiusBottomRight = cs.getPropertyValue('border-bottom-right-radius') || '0';
+                const radiusBottomLeft = cs.getPropertyValue('border-bottom-left-radius') || '0';
+
+                this.computedRadius = [
+                    radiusTopLeft,
+                    radiusTopRight,
+                    radiusBottomRight,
+                    radiusBottomLeft,
+                ].map(r => this.parseCssDimension(r));
+            }
+
+            // auto border width detection
+            if (this.borderWidth === 'auto') {
+                // try border-width first, fallback to border-top-width
+                let borderWidth = cs.getPropertyValue('border-width') || '0';
+                if (borderWidth === '0' || borderWidth === '0px') {
+                    borderWidth = cs.getPropertyValue('border-top-width') || '0';
+                }
+                this.computedBorderWidth = this.parseCssDimension(borderWidth);
+            } else {
+                this.computedBorderWidth = parseFloat(this.borderWidth) || 0;
+            }
+
+            // auto border color detection
+            if (this.borderColor === 'auto') {
+                this.computedBorderColor = cs.getPropertyValue('border-color') || 'transparent';
+            } else {
+                this.computedBorderColor = this.borderColor;
+            }
+
+            // flag that we've detected styles, now we can apply overrides
+            this.autoStylesDetected = true;
+        },
+        updateDimensions() {
+            if (!this.$refs.el) return;
+
+            const rect = this.$refs.el.getBoundingClientRect();
+            this.dimensions.width = rect.width;
+            this.dimensions.height = rect.height;
+        },
+        setupResizeObserver() {
+            if (!this.$refs.el) return;
+
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.dimensions.width = entry.contentRect.width;
+                    this.dimensions.height = entry.contentRect.height;
+                }
+            });
+
+            this.resizeObserver.observe(this.$refs.el);
+        },
+    },
+};
+</script>
+
+<!-- <style lang="scss" scoped>
+// @use '@/styles/include.scss' as *;
+@use '../styles/px.scss' as *;
+</style> -->

package/components/PxDatePicker.vue

@@ -190,7 +190,7 @@ export default {
     $popup: get(
         'controls.popup',
         (
-            background-color: color(page-bg),
+            background-color: site-var(page-bg),
             border-radius: get('controls.base.border-radius'),
             box-shadow: shadow(15),
             font-size: get('controls.base.font-size'),

package/components/PxMenu.vue

@@ -198,8 +198,8 @@ export {
 
 .px-menu {
     font-family: get('font-family');
-    background-color: color(page-bg);
-    color: color(page-fg);
+    background-color: site-var(page-bg);
+    color: site-var(page-fg);
     border-radius: get('controls.border-radius');
     overflow: hidden;
     display: flex;

package/components/PxScrubber.vue

@@ -121,15 +121,15 @@ function mouseMove(e) {
 <style lang="scss">
 @use '../styles/px.scss' as *;
 
-.px-scrubber {
-    @at-root :root {
-        --px-scrubber-height: 4px;
-        --px-scrubber-bg: #{clr(accent, $alpha: 0.1)};
-        --px-scrubber-padding: 1em 0;
-        --px-scrubber-progress-bg: #{clr(accent, 1)};
-        --px-scrubber-preview-bg: #{clr(accent, $alpha: 0.33)};
-    }
+@at-root :root {
+    --px-scrubber-height: 4px;
+    --px-scrubber-bg: #{clr(accent, $alpha: 0.1)};
+    --px-scrubber-padding: 1em 0;
+    --px-scrubber-progress-bg: #{clr(accent, 1)};
+    --px-scrubber-preview-bg: #{clr(accent, $alpha: 0.33)};
+}
 
+.px-scrubber {
     width: 100%;
     padding: var(--px-scrubber-padding);
     cursor: pointer;

package/composables/useCornerSmoothing.js

@@ -47,7 +47,7 @@
  */
 
 import { computed, onMounted, onUnmounted, nextTick, reactive, watch } from 'vue';
-import { getSvgPath } from 'figma-squircle';
+import { getSmoothCornersPath, getBorderMaskClipPath } from '../utils/smootherCorners';
 
 function useCornerSmoothing(elementRef, options = {}) {
     const dimensions = reactive({ width: 0, height: 0 });
@@ -55,7 +55,7 @@ function useCornerSmoothing(elementRef, options = {}) {
     let resizeObserver = null;
 
     const config = reactive({
-        radius: 8,
+        radius: 'auto',
         smoothing: 0.8,
         borderWidth: 0,
         minRadius: 0,
@@ -66,127 +66,59 @@ function useCornerSmoothing(elementRef, options = {}) {
     });
 
     /**
-     * parse percentage string to number
+     * Computed clip-path value for the outer container (full size, ignoring borderWidth)
      */
-    function parsePercentage(value, reference) {
-        if (typeof value === 'string' && value.endsWith('%')) {
-            const percent = parseFloat(value) / 100;
-            return reference * percent;
-        }
-        return parseFloat(value) || 0;
-    }
-
-    /**
-     * expand radius array using css border-radius rules
-     */
-    function expandRadiusArray(radius) {
-        if (!Array.isArray(radius)) {
-            return [radius, radius, radius, radius];
-        }
-
-        const [tl, tr = tl, br = tl, bl = tr] = radius;
-        return [tl, tr, br, bl];
-    }
-
-    /**
-     * calculate corner radii with percentage support and clamping
-     */
-    function calculateCornerRadii(radius, width, height, minRadius, maxRadius) {
-        const reference = Math.max(width, height);
-        const expanded = expandRadiusArray(radius);
+    const clipPath = computed(() => {
+        if (dimensions.width <= 0 || dimensions.height <= 0) return null;
 
-        return expanded.map(r => {
-            const parsed = parsePercentage(r, reference);
-            return Math.max(minRadius, Math.min(maxRadius, parsed));
+        return getSmoothCornersPath({
+            width: dimensions.width,
+            height: dimensions.height,
+            radius: config.radius,
+            smoothing: config.smoothing,
+            borderWidth: 0, // always 0 for outer container
+            minRadius: config.minRadius,
+            maxRadius: config.maxRadius,
+            preserveSmoothing: config.preserveSmoothing,
         });
-    }
+    });
 
     /**
-     * generates squircle path using figma-squircle library
+     * Computed clip-path value for inner content (accounting for borderWidth to create border space)
      */
-    function generateSquirclePath(width, height, radii, smoothing, preserveSmoothing) {
-        if (width <= 0 || height <= 0) return '';
-
-        const [tl, tr, br, bl] = radii;
-
-        // check if all corners are the same (uniform)
-        const isUniform = tl === tr && tr === br && br === bl;
-
-        if (isUniform) {
-            // use simple API for uniform corners
-            return getSvgPath({
-                width,
-                height,
-                cornerRadius: tl,
-                cornerSmoothing: smoothing,
-                preserveSmoothing,
-            });
-        } else {
-            // use individual corner API for different corners
-            return getSvgPath({
-                width,
-                height,
-                cornerRadius: Math.max(tl, tr, br, bl), // fallback base radius
-                cornerSmoothing: smoothing,
-                preserveSmoothing,
-                topLeftCornerRadius: tl,
-                topRightCornerRadius: tr,
-                bottomRightCornerRadius: br,
-                bottomLeftCornerRadius: bl,
-            });
-        }
-    }
+    const innerClipPath = computed(() => {
+        if (dimensions.width <= 0 || dimensions.height <= 0) return null;
+        if (config.borderWidth <= 0) return clipPath.value; // no border, use full path
+
+        return getSmoothCornersPath({
+            width: dimensions.width,
+            height: dimensions.height,
+            radius: config.radius,
+            smoothing: config.smoothing,
+            borderWidth: config.borderWidth, // reduce for border space
+            minRadius: config.minRadius,
+            maxRadius: config.maxRadius,
+            preserveSmoothing: config.preserveSmoothing,
+        });
+    });
 
     /**
-     * Computed clip-path value
+     * Computed border mask clip-path (full rectangle with smooth hole cut out)
      */
-    const clipPath = computed(() => {
+    const borderMaskClipPath = computed(() => {
         if (dimensions.width <= 0 || dimensions.height <= 0) return null;
-
-        const adjustedWidth = Math.max(0, dimensions.width - config.borderWidth * 2);
-        const adjustedHeight = Math.max(0, dimensions.height - config.borderWidth * 2);
-
-        if (adjustedWidth <= 0 || adjustedHeight <= 0) return null;
-
-        // calculate corner radii with percentage support and clamping
-        const radii = calculateCornerRadii(
-            config.radius,
-            adjustedWidth,
-            adjustedHeight,
-            config.minRadius,
-            config.maxRadius,
-        );
-
-        const path = generateSquirclePath(
-            adjustedWidth,
-            adjustedHeight,
-            radii,
-            config.smoothing,
-            config.preserveSmoothing,
-        );
-
-        if (!path) return null;
-
-        // offset path if border width is specified
-        const offsetX = config.borderWidth;
-        const offsetY = config.borderWidth;
-
-        if (offsetX > 0 || offsetY > 0) {
-            // transform path to account for border offset
-            const translatedPath = path
-                .replace(/([ML])\s*([0-9.]+)\s+([0-9.]+)/g, (_, command, x, y) => {
-                    return `${command} ${parseFloat(x) + offsetX} ${parseFloat(y) + offsetY}`;
-                })
-                .replace(
-                    /([C])\s*([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)/g,
-                    (_, command, x1, y1, x2, y2, x3, y3) => {
-                        return `${command} ${parseFloat(x1) + offsetX} ${parseFloat(y1) + offsetY} ${parseFloat(x2) + offsetX} ${parseFloat(y2) + offsetY} ${parseFloat(x3) + offsetX} ${parseFloat(y3) + offsetY}`;
-                    },
-                );
-            return `path('${translatedPath}')`;
-        }
-
-        return `path('${path}')`;
+        if (config.borderWidth <= 0) return null;
+
+        return getBorderMaskClipPath({
+            width: dimensions.width,
+            height: dimensions.height,
+            radius: config.radius,
+            smoothing: config.smoothing,
+            borderWidth: config.borderWidth,
+            minRadius: config.minRadius,
+            maxRadius: config.maxRadius,
+            preserveSmoothing: config.preserveSmoothing,
+        });
     });
 
     /**
@@ -220,6 +152,61 @@ function useCornerSmoothing(elementRef, options = {}) {
         nextTick(() => {
             if (!elementRef.value) return;
 
+            function parseCssDimension(value) {
+                if (typeof value === 'string' && value.length > 0) {
+                    value = value.trim().split(/\s+/)[0];
+
+                    if (value.endsWith('px')) return parseFloat(value);
+                    if (value.endsWith('rem')) {
+                        return (
+                            parseFloat(value) *
+                            parseFloat(getComputedStyle(document.documentElement).fontSize)
+                        );
+                    }
+                    if (value.endsWith('em')) {
+                        return (
+                            parseFloat(value) *
+                            parseFloat(getComputedStyle(elementRef.value).fontSize)
+                        );
+                    }
+                }
+
+                return value;
+            }
+
+            let cs = null;
+
+            // auto radius
+
+            if (config.radius === 'auto') {
+                // auto-detect radius based on current styles
+                cs = getComputedStyle(elementRef.value);
+                const radiusTopLeft = cs.getPropertyValue('border-top-left-radius') || '0';
+                const radiusTopRight = cs.getPropertyValue('border-top-right-radius') || '0';
+                const radiusBottomRight = cs.getPropertyValue('border-bottom-right-radius') || '0';
+                const radiusBottomLeft = cs.getPropertyValue('border-bottom-left-radius') || '0';
+                config.radius = [
+                    radiusTopLeft,
+                    radiusTopRight,
+                    radiusBottomRight,
+                    radiusBottomLeft,
+                ].map(r => {
+                    return parseCssDimension(r, true);
+                });
+            }
+
+            // auto border width
+            if (config.borderWidth === 'auto') {
+                cs = cs || getComputedStyle(elementRef.value);
+                const borderWidth = cs.getPropertyValue('border-thickness') || '0';
+
+                console.log('bw' + cs.getPropertyValue('border-thickness'));
+
+                config.borderWidth = parseCssDimension(borderWidth, true);
+            }
+
+            console.log(config.borderWidth);
+
             // initial dimension update
             updateDimensions();
 
@@ -255,6 +242,8 @@ function useCornerSmoothing(elementRef, options = {}) {
 
     return {
         clipPath,
+        innerClipPath,
+        borderMaskClipPath,
         updateConfig,
         forceUpdate,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.1.24",
+    "version": "4.1.26",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": {
         "name": "Pixel Lab"

package/stories/PxCorners.stories.js

@@ -0,0 +1,187 @@
+// Reference:
+// https://storybook.js.org/blog/storybook-7-docs/
+// https://storybook.js.org/docs/7.5/writing-docs/autodocs
+
+import PxCorners from '@/components/PxCorners.vue';
+import { extractArgTypes } from '@/storybook/sb-utils.js';
+
+export default {
+    component: PxCorners,
+    // decorators: [ ... ],
+    // parameters: { ... },
+
+    // https://storybook.js.org/docs/7.0/vue/essentials/controls#annotation
+    // https://storybook.js.org/docs/7.0/vue/api/argtypes#available-properties
+    argTypes: {
+        ...extractArgTypes(PxCorners),
+        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
+    },
+    args: {
+        // label: 'Hello',
+        // onClick: () => {}),
+    },
+};
+
+export const Compare = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div class="story-flex" style=" position: relative;">
+                <div v-bind="args" class="story-bg-blue" style="border-radius: 50px; width: 200px; height: 200px;" />
+                <PxCorners v-bind="args" class="story-bg-orange" :radius="50" style="width: 200px; height: 200px;" />
+            </div>
+        `,
+    }),
+};
+
+export const Basic = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners v-bind="args" class="story-size-md story-bg-orange" :radius="40" :borderWidth="4" borderColor="black" />`,
+    }),
+};
+
+export const Slot = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners v-bind="args" class="story-size-md story-bg-blue story-center" :radius="40" > Slot content </PxCorners>`,
+    }),
+};
+
+export const SlotWithBorder = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners v-bind="args" class="story-size-md story-bg-blue story-center" :radius="40" :borderWidth="4"> Slot content </PxCorners>`,
+    }),
+};
+
+export const HoverWithBorder = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners v-bind="args" class="story-size-md story-bg-orange story-hover-bg-blue story-center" :radius="40" :borderWidth="10"> Slot content </PxCorners>`,
+    }),
+};
+
+export const AutoFromStyle = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners :smoothingEnabled="true" v-bind="args" class="story-size-md story-bg-orange" style="border-radius: 40px; border: 4px solid black;" />`,
+    }),
+};
+
+export const AutoPercent = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `
+        <div class="story-flex" style=" position: relative;">
+            <PxCorners :smoothingEnabled="true" v-bind="args" class="story-bg-orange story-center" style="width: 300px; height: 200px; border-radius: 20%;">
+                Style 20%
+            </PxCorners>
+            <PxCorners :smoothingEnabled="true" v-bind="args" class="story-bg-orange story-center" style="width: 300px; height: 200px;" :radius="60">
+                :radius 60px
+            </PxCorners>
+            <div class="story-bg-orange story-center" style="width: 300px; height: 200px; border-radius: 20%;">
+                Div 20%
+            </div>
+            <div class="story-bg-orange story-center" style="width: 300px; height: 200px; border-radius: 60px;">
+                Div 60px
+            </div>
+        </div>
+        `,
+    }),
+};
+
+export const Disabled = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners :smoothingEnabled="false" v-bind="args" class="story-size-md story-bg-orange" :radius="40" :borderWidth="4" borderColor="black" />`,
+    }),
+};
+
+export const DisabledAutoFromStyle = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners :smoothingEnabled="false" v-bind="args" class="story-size-md story-bg-orange" style="border-radius: 40px; border: 4px solid black;" />`,
+    }),
+};
+
+export const BasicMask = {
+    // name: 'Story Name',
+    // parameters: {
+    //     customCSS: `.myclass { border: 4px solid red; }`,
+    // },
+    render: (args, { argTypes }) => ({
+        components: { PxCorners },
+        setup() {
+            return { args };
+        },
+        template: `<PxCorners v-bind="args" renderMode="mask" class="story-size-md story-bg-orange" :radius="40" :borderWidth="4" borderColor="black" />`,
+    }),
+};
+// export const Advanced = {
+//     ...Basic,
+//     // args: { ... },
+// };

package/storybook/sb-styles.scss

@@ -1,4 +1,5 @@
 @use '@thinkpixellab-public/px-styles/all' as *;
+@use 'sass:color' as color;
 
 // Update this to test font inheritance
 .sbdocs {
@@ -91,11 +92,8 @@ body {
 }
 
 .story-gradient {
-    background-image: repeating-linear-gradient(
-            -45deg,
-            rgba(black, 0.1) 0 20px,
-            rgba(black, 0) 20px 40px
-        ),
+    background-image:
+        repeating-linear-gradient(-45deg, rgba(black, 0.1) 0 20px, rgba(black, 0) 20px 40px),
         linear-gradient(135deg, tomato, purple);
     width: 100%;
     height: 100%;
@@ -145,6 +143,13 @@ body {
     background-color: gold;
 }
 
+.story-hover-bg-blue {
+    cursor: pointer;
+}
+.story-hover-bg-blue:hover {
+    background-color: dodgerblue;
+}
+
 .story-size-xs {
     width: 2em;
     height: 2em;
@@ -176,7 +181,7 @@ body {
             font-family: sans-serif,
             padding: 0.5em,
             font-size: 14px,
-            background-color: mix(dodgerblue, white, 15%),
+            background-color: color.mix(dodgerblue, white, 15%),
         )
     );
 }

package/utils/smootherCorners.js

@@ -0,0 +1,395 @@
+/**
+ * smootherCorners.js
+ *
+ * Utility functions for creating smooth, squircle-like corners using CSS clip-path.
+ * Based on Figma's corner smoothing approach.
+ *
+ * Usage:
+ * ```js
+ * import { getSmoothCornersPath } from '@thinkpixellab-public/px-vue/utils/smootherCorners'
+ *
+ * const clipPath = getSmoothCornersPath({
+ *   width: 200,
+ *   height: 100,
+ *   radius: 16,
+ *   smoothing: 0.8
+ * })
+ * ```
+ */
+
+import { getSvgPath } from 'figma-squircle';
+
+/**
+ * Parse percentage string to number
+ * @param {string|number} value - Value to parse
+ * @param {number} reference - Reference value for percentage calculation
+ * @returns {number}
+ */
+export function parsePercentage(value, reference) {
+    if (typeof value === 'string' && value.endsWith('%')) {
+        const percent = parseFloat(value) / 100;
+        return reference * percent;
+    }
+    return parseFloat(value) || 0;
+}
+
+/**
+ * Expand radius array using CSS border-radius rules
+ * @param {number|Array} radius - Single radius or array of radii
+ * @returns {Array<number>} Array of four corner radii [tl, tr, br, bl]
+ */
+export function expandRadiusArray(radius) {
+    if (!Array.isArray(radius)) {
+        return [radius, radius, radius, radius];
+    }
+
+    const [tl, tr = tl, br = tl, bl = tr] = radius;
+    return [tl, tr, br, bl];
+}
+
+/**
+ * Calculate corner radii with percentage support and clamping
+ * @param {number|Array|string} radius - Radius value(s)
+ * @param {number} width - Element width
+ * @param {number} height - Element height
+ * @param {number} minRadius - Minimum radius constraint
+ * @param {number} maxRadius - Maximum radius constraint
+ * @returns {Array<number>} Calculated radii for each corner
+ */
+export function calculateCornerRadii(radius, width, height, minRadius = 0, maxRadius = Infinity) {
+    const reference = Math.max(width, height);
+    const expanded = expandRadiusArray(radius);
+
+    return expanded.map(r => {
+        const parsed = parsePercentage(r, reference);
+        return Math.max(minRadius, Math.min(maxRadius, parsed));
+    });
+}
+
+/**
+ * Generate squircle path using figma-squircle library
+ * @param {number} width - Path width
+ * @param {number} height - Path height
+ * @param {Array<number>} radii - Corner radii [tl, tr, br, bl]
+ * @param {number} smoothing - Smoothing amount (0-1)
+ * @param {boolean} preserveSmoothing - Maintain smoothing at larger radii
+ * @returns {string} SVG path string
+ */
+export function generateSquirclePath(
+    width,
+    height,
+    radii,
+    smoothing = 0.8,
+    preserveSmoothing = true,
+) {
+    if (width <= 0 || height <= 0) return '';
+
+    const [tl, tr, br, bl] = radii;
+
+    // check if all corners are the same (uniform)
+    const isUniform = tl === tr && tr === br && br === bl;
+
+    if (isUniform) {
+        // use simple API for uniform corners
+        return getSvgPath({
+            width,
+            height,
+            cornerRadius: tl,
+            cornerSmoothing: smoothing,
+            preserveSmoothing,
+        });
+    } else {
+        // use individual corner API for different corners
+        return getSvgPath({
+            width,
+            height,
+            cornerRadius: Math.max(tl, tr, br, bl), // fallback base radius
+            cornerSmoothing: smoothing,
+            preserveSmoothing,
+            topLeftCornerRadius: tl,
+            topRightCornerRadius: tr,
+            bottomRightCornerRadius: br,
+            bottomLeftCornerRadius: bl,
+        });
+    }
+}
+
+/**
+ * Apply border offset to SVG path
+ * @param {string} path - SVG path string
+ * @param {number} offsetX - X offset
+ * @param {number} offsetY - Y offset
+ * @returns {string} Transformed path string
+ */
+export function applyPathOffset(path, offsetX, offsetY) {
+    if (!path || (offsetX === 0 && offsetY === 0)) return path;
+
+    // transform path to account for offset
+    const translatedPath = path
+        .replace(/([ML])\s*([0-9.]+)\s+([0-9.]+)/g, (_, command, x, y) => {
+            return `${command} ${parseFloat(x) + offsetX} ${parseFloat(y) + offsetY}`;
+        })
+        .replace(
+            /([C])\s*([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)/g,
+            (_, command, x1, y1, x2, y2, x3, y3) => {
+                return `${command} ${parseFloat(x1) + offsetX} ${parseFloat(y1) + offsetY} ${parseFloat(x2) + offsetX} ${parseFloat(y2) + offsetY} ${parseFloat(x3) + offsetX} ${parseFloat(y3) + offsetY}`;
+            },
+        );
+
+    return translatedPath;
+}
+
+/**
+ * Generate smooth corners clip-path value or SVG mask
+ * @param {Object} options - Configuration options
+ * @param {number} options.width - Element width
+ * @param {number} options.height - Element height
+ * @param {number|Array|string} options.radius - Corner radius (number, array, or percentage)
+ * @param {number} options.smoothing - Smoothing amount 0-1 (default: 0.8)
+ * @param {number} options.borderWidth - Border width to account for (default: 0)
+ * @param {number} options.minRadius - Min radius in px (default: 0)
+ * @param {number} options.maxRadius - Max radius in px (default: Infinity)
+ * @param {boolean} options.preserveSmoothing - Maintain smoothing at larger radii (default: true)
+ * @param {string} options.renderMode - Render mode: 'clip-path' | 'mask' (default: 'clip-path')
+ * @returns {string|null} CSS clip-path value, SVG mask data URL, or null if invalid dimensions
+ */
+export function getSmoothCornersPath(options = {}) {
+    const {
+        width,
+        height,
+        radius = 8,
+        smoothing = 0.8,
+        borderWidth = 0,
+        minRadius = 0,
+        maxRadius = Infinity,
+        preserveSmoothing = true,
+        renderMode = 'clip-path',
+    } = options;
+
+    if (width <= 0 || height <= 0) return null;
+
+    const adjustedWidth = Math.max(0, width - borderWidth * 2);
+    const adjustedHeight = Math.max(0, height - borderWidth * 2);
+
+    if (adjustedWidth <= 0 || adjustedHeight <= 0) return null;
+
+    // calculate corner radii with percentage support and clamping
+    const radii = calculateCornerRadii(radius, adjustedWidth, adjustedHeight, minRadius, maxRadius);
+    
+    // check if all radii are 0 - no need for clipping/masking
+    if (radii.every(r => r === 0)) {
+        return null;
+    }
+    
+    // adjust radii for inner path when borderWidth is present
+    const adjustedRadii = borderWidth > 0 
+        ? radii.map(r => Math.max(0, r - borderWidth))
+        : radii;
+
+    const path = generateSquirclePath(
+        adjustedWidth,
+        adjustedHeight,
+        adjustedRadii,
+        smoothing,
+        preserveSmoothing,
+    );
+
+    if (!path) return null;
+
+    // apply border offset if needed
+    const finalPath = borderWidth > 0 ? applyPathOffset(path, borderWidth, borderWidth) : path;
+
+    // return format based on render mode
+    if (renderMode === 'mask') {
+        return createSvgMaskDataUrl(finalPath, width, height);
+    } else {
+        return `path('${finalPath}')`;
+    }
+}
+
+/**
+ * Generate border mask using CSS masks instead of complex path manipulation
+ * @param {Object} options - Configuration options
+ * @returns {Object} Object with CSS mask properties for creating border effect
+ */
+export function getBorderMaskStyles(options = {}) {
+    const { width, height, borderWidth = 0 } = options;
+    
+    if (width <= 0 || height <= 0 || borderWidth <= 0) return null;
+    
+    // Create the inner path (smaller for content area)
+    const innerPath = getSmoothCornersPath({
+        width: width - (borderWidth * 2),
+        height: height - (borderWidth * 2),
+        radius: options.radius,
+        smoothing: options.smoothing,
+        borderWidth: 0,
+        minRadius: options.minRadius,
+        maxRadius: options.maxRadius,
+        preserveSmoothing: options.preserveSmoothing,
+    });
+    
+    if (!innerPath) return null;
+    
+    // Position the inner mask to create border space
+    const maskPosition = `${borderWidth}px ${borderWidth}px`;
+    const maskSize = `${width - (borderWidth * 2)}px ${height - (borderWidth * 2)}px`;
+    
+    return {
+        WebkitMask: `radial-gradient(white, white), ${innerPath}`,
+        mask: `radial-gradient(white, white), ${innerPath}`,
+        WebkitMaskComposite: 'xor',
+        maskComposite: 'subtract',
+        WebkitMaskPosition: `0 0, ${maskPosition}`,
+        maskPosition: `0 0, ${maskPosition}`,
+        WebkitMaskSize: `100% 100%, ${maskSize}`,
+        maskSize: `100% 100%, ${maskSize}`,
+        WebkitMaskRepeat: 'no-repeat, no-repeat',
+        maskRepeat: 'no-repeat, no-repeat'
+    };
+}
+
+/**
+ * Generate border mask clip path using compound path approach or SVG mask
+ * @param {Object} options - Configuration options
+ * @param {string} options.renderMode - Render mode: 'clip-path' | 'mask' (default: 'clip-path')
+ * @returns {string|null} CSS clip-path value, SVG mask data URL, or null if invalid
+ */
+export function getBorderMaskClipPath(options = {}) {
+    const { width, height, borderWidth = 0, renderMode = 'clip-path' } = options;
+    
+    if (width <= 0 || height <= 0 || borderWidth <= 0) return null;
+    
+    // Check if the border is too large for the element
+    if (borderWidth * 2 >= width || borderWidth * 2 >= height) return null;
+    
+    // Create outer rectangle path (clockwise)
+    const rectPath = `M 0 0 H ${width} V ${height} H 0 Z`;
+    
+    // Generate the inner smooth path directly at the correct size and position
+    const innerWidth = width - (borderWidth * 2);
+    const innerHeight = height - (borderWidth * 2);
+    
+    // Calculate radii for the outer dimensions first
+    const outerRadii = calculateCornerRadii(
+        options.radius,
+        width,
+        height,
+        options.minRadius || 0,
+        options.maxRadius || Infinity
+    );
+    
+    // check if all radii are 0 - no need for border masking
+    if (outerRadii.every(r => r === 0)) {
+        return null;
+    }
+    
+    // Adjust radii for the inner path by subtracting border width
+    // This ensures consistent border thickness around corners
+    const innerRadii = outerRadii.map(r => Math.max(0, r - borderWidth));
+    
+    // Generate the inner path with adjusted radii
+    const innerSmoothPath = generateSquirclePath(
+        innerWidth,
+        innerHeight,
+        innerRadii,
+        options.smoothing || 0.8,
+        options.preserveSmoothing !== false
+    );
+    
+    if (!innerSmoothPath) return null;
+    
+    // Apply offset to position the inner path
+    const offsetInnerPath = applyPathOffset(innerSmoothPath, borderWidth, borderWidth);
+    
+    // Combine the paths
+    const combinedPath = `${rectPath} ${offsetInnerPath}`;
+    
+    // Return format based on render mode
+    if (renderMode === 'mask') {
+        return createSvgBorderMaskDataUrl(combinedPath, width, height);
+    } else {
+        return `path(evenodd, '${combinedPath}')`;
+    }
+}
+
+
+/**
+ * Create SVG mask data URL from path string
+ * @param {string} pathString - SVG path string
+ * @param {number} width - Mask width
+ * @param {number} height - Mask height
+ * @returns {string} Data URL for SVG mask
+ */
+export function createSvgMaskDataUrl(pathString, width, height) {
+    const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+        <defs>
+            <mask id="smooth-mask">
+                <rect width="100%" height="100%" fill="black"/>
+                <path d="${pathString}" fill="white"/>
+            </mask>
+        </defs>
+        <rect width="100%" height="100%" fill="white" mask="url(#smooth-mask)"/>
+    </svg>`;
+    
+    return `url('data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}')`;
+}
+
+/**
+ * Create SVG border mask data URL using compound path approach
+ * @param {string} compoundPathString - Compound path string (outer rect + inner hole)
+ * @param {number} width - Mask width  
+ * @param {number} height - Mask height
+ * @returns {string} Data URL for SVG border mask
+ */
+export function createSvgBorderMaskDataUrl(compoundPathString, width, height) {
+    const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+        <defs>
+            <mask id="border-mask">
+                <path d="${compoundPathString}" fill="white" fill-rule="evenodd"/>
+            </mask>
+        </defs>
+        <rect width="100%" height="100%" fill="white" mask="url(#border-mask)"/>
+    </svg>`;
+    
+    return `url('data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}')`;
+}
+
+/**
+ * Generate smooth corners configuration object
+ * @param {Object} options - Configuration options (same as getSmoothCornersPath)
+ * @returns {Object} Configuration object with computed values
+ */
+export function generateSmoothCornersConfig(options = {}) {
+    const {
+        width,
+        height,
+        radius = 8,
+        smoothing = 0.8,
+        borderWidth = 0,
+        minRadius = 0,
+        maxRadius = Infinity,
+        preserveSmoothing = true,
+    } = options;
+
+    const adjustedWidth = Math.max(0, width - borderWidth * 2);
+    const adjustedHeight = Math.max(0, height - borderWidth * 2);
+
+    const radii = calculateCornerRadii(radius, adjustedWidth, adjustedHeight, minRadius, maxRadius);
+    
+    // adjust radii for inner path when borderWidth is present
+    const adjustedRadii = borderWidth > 0 
+        ? radii.map(r => Math.max(0, r - borderWidth))
+        : radii;
+
+    return {
+        width: adjustedWidth,
+        height: adjustedHeight,
+        radii: adjustedRadii,
+        originalRadii: radii,
+        smoothing,
+        preserveSmoothing,
+        borderWidth,
+        clipPath: getSmoothCornersPath(options),
+    };
+}