vueless 0.0.398 → 0.0.399

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.398",
+  "version": "0.0.399",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.navigation-progress/StepperProgress.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg width="100%" height="100%" viewBox="0 0 40 40" v-bind="stepperSvgAttrs">
+  <svg viewBox="0 0 40 40" v-bind="stepperSvgAttrs">
     <defs>
       <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" v-bind="stepperGradientAttrs">
         <stop offset="0%" :stop-color="stepperColor" />
@@ -27,7 +27,7 @@
       stroke-dashoffset="0"
     />
     <g v-bind="stepperCountAttrs">
-      <text y="45%" transform="translate(0, 2)">
+      <text y="45%">
         <tspan x="50%" text-anchor="middle">{{ value }}</tspan>
       </text>
     </g>

package/ui.navigation-progress/UProgress.vue

@@ -139,7 +139,7 @@ const isSteps = computed(() => Array.isArray(props.max));
 
 const realMax = computed(() => {
   if (isSteps.value) {
-    return props.max.length;
+    return props.max.length - 1;
   }
 
   return Number(props.max);
@@ -162,6 +162,6 @@ const progressPercent = computed(() => {
 });
 
 function isActiveStep(index) {
-  return index === props.value - 1;
+  return index === props.value;
 }
 </script>

package/ui.navigation-progress/config.js

@@ -4,15 +4,15 @@ export default /*tw*/ {
     variants: {
       variant: {
         progress: "w-full h-auto flex flex-col gap-1.5",
-        stepper: "flex items-center justify-between",
+        stepper: "flex items-center justify-between gap-4",
       },
     },
   },
   stepper: {
-    base: "",
+    base: "shrink-0 grow-0",
     variants: {
       size: {
-        "2xs": "size-8",
+        "2xs": "size-6",
         xs: "size-8",
         sm: "size-10",
         md: "size-12",
@@ -24,8 +24,15 @@ export default /*tw*/ {
   },
   stepperSvg: "",
   stepperGradient: "",
-  stepperCircle: "stroke-current text-{color}-100",
-  stepperCount: "text-xl font-bold text-gray-900 translate-y-2 transform",
+  stepperCircle: {
+    base: "stroke-{color}-100 text-{color}-100",
+    variants: {
+      color: {
+        grayscale: "stroke-gray-100",
+      },
+    },
+  },
+  stepperCount: "text-md font-bold text-gray-900 translate-y-2 transform",
   indicator: {
     base: "text-{color}-600 flex justify-end w-full min-w-fit font-medium transition",
     variants: {
@@ -103,6 +110,7 @@ export default /*tw*/ {
   safelist: (colors) => [
     { pattern: `text-(${colors})-600` },
     { pattern: `text-(${colors})-100` },
+    { pattern: `stroke-(${colors})-100` },
     {
       pattern: `bg-(${colors})-50`,
       variants: ["[&::-webkit-progress-bar]", "[@supports(selector(&::-moz-progress-bar))]"],

package/ui.navigation-progress/storybook/stories.js

@@ -26,7 +26,7 @@ const DefaultTemplate = (args) => ({
     args.iterator = args.max ? 1 : 10;
 
     function updateProgress() {
-      args.value = args.value < (args.max?.length || 100) ? args.value + args.iterator : 0;
+      args.value = args.value < (args.max?.length - 1 || 100) ? args.value + args.iterator : 0;
     }
 
     return { slots, args, updateProgress };
@@ -68,13 +68,13 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const VariantStepper = DefaultTemplate.bind({});
-VariantStepper.args = { variant: "stepper", max: ["Step 1", "Step 2", "Step 3"] };
+VariantStepper.args = { variant: "stepper", max: ["Step 0", "Step 1", "Step 2"] };
 
 export const Indicator = DefaultTemplate.bind({});
 Indicator.args = { indicator: true };
 
 export const Steps = DefaultTemplate.bind({});
-Steps.args = { max: ["Step 1", "Step 2", "Step 3"] };
+Steps.args = { max: ["Step 0", "Step 1", "Step 2"] };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
@@ -97,7 +97,7 @@ IndicatorSlot.args = {
 
 export const StepSlot = DefaultTemplate.bind({});
 StepSlot.args = {
-  max: ["Step 1", "Step 2", "Step 3"],
+  max: ["Step 0", "Step 1", "Step 2"],
   slotTemplate: `
   <template #step-0>
     💻

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.398",
+  "version": "0.0.399",
   "contributions": {
     "html": {
       "description-markup": "markdown",