@youcan/celeste 0.6.68 → 0.6.69

package/dist/celeste.css

@@ -3201,21 +3201,21 @@ to {
 .celeste-counter-input-wrapper:has(.celeste-counter-input:hover:not(:focus, :disabled)) {
   --celeste-counter-input-border-color: transparent;
   --celeste-counter-input-bg-color: var(--color-bg-weak-50);
-}.celeste-digit-input-group[data-v-1a28428d] {
+}.celeste-digit-input-group[data-v-44b2fcc1] {
   display: flex;
   align-items: center;
+  max-width: 100%;
   gap: var(--spacing-10);
-}.celeste-digit-input-slot[data-v-a9112549] {
+}.celeste-digit-input-slot[data-v-5a1bb76d] {
   --celeste-digit-input-border-color: var(--color-stroke-soft-200);
   --celeste-digit-input-drop-shadow: var(--shadow-regular-xs);
   --celeste-digit-input-placeholder-color: var(--color-text-soft-400);
   display: flex;
   box-sizing: border-box;
-  flex-grow: 1;
-  flex-shrink: 1;
+  flex: 1 1 0;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
+  min-width: 32px;
   max-width: 64px;
   padding: 0;
   transition: all var(--animation-fast) ease-out;
@@ -3230,21 +3230,21 @@ to {
   text-align: center;
   aspect-ratio: 1;
 }
-.celeste-digit-input-slot[data-v-a9112549]::-moz-placeholder {
+.celeste-digit-input-slot[data-v-5a1bb76d]::-moz-placeholder {
   -moz-transition: color var(--animation-fast) ease-out;
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-digit-input-placeholder-color);
 }
-.celeste-digit-input-slot[data-v-a9112549]::placeholder {
+.celeste-digit-input-slot[data-v-5a1bb76d]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-digit-input-placeholder-color);
 }
-.celeste-digit-input-slot[data-v-a9112549]:focus {
+.celeste-digit-input-slot[data-v-5a1bb76d]:focus {
   --celeste-digit-input-border-color: var(--color-stroke-strong-950);
   --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
   outline-color: var(--color-stroke-soft-200);
 }
-.celeste-digit-input-slot[data-v-a9112549]:disabled {
+.celeste-digit-input-slot[data-v-5a1bb76d]:disabled {
   --celeste-digit-input-border-color: transparent;
   --celeste-digit-input-drop-shadow: none;
   --celeste-digit-input-placeholder-color: var(--color-text-disabled-300);
@@ -3253,20 +3253,20 @@ to {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-digit-input-slot[data-v-a9112549]:disabled::-moz-placeholder {
+.celeste-digit-input-slot[data-v-5a1bb76d]:disabled::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-digit-input-slot[data-v-a9112549]:disabled::placeholder {
+.celeste-digit-input-slot[data-v-5a1bb76d]:disabled::placeholder {
   color: currentcolor;
 }
-[data-error=true] .celeste-digit-input-slot[data-v-a9112549] {
+[data-error=true] .celeste-digit-input-slot[data-v-5a1bb76d] {
   --celeste-digit-input-border-color: var(--color-state-error-base);
 }
-[data-error=true] .celeste-digit-input-slot[data-v-a9112549]:focus {
+[data-error=true] .celeste-digit-input-slot[data-v-5a1bb76d]:focus {
   --celeste-digit-input-border-color: var(--color-state-error-base);
   outline-color: var(--color-state-error-lighter);
 }
-.celeste-digit-input-slot[data-v-a9112549]:hover:not(:focus, :disabled) {
+.celeste-digit-input-slot[data-v-5a1bb76d]:hover:not(:focus, :disabled) {
   --celeste-digit-input-border-color: transparent;
   --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
   background-color: var(--color-bg-weak-50);

package/dist/cjs/digit-input-group.js

@@ -28,5 +28,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const digitInputGroup = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-1a28428d"]]);
+const digitInputGroup = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-44b2fcc1"]]);
 module.exports = digitInputGroup;

package/dist/cjs/digit-input-slot.js

@@ -25,5 +25,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const digitInputSlot = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a9112549"]]);
+const digitInputSlot = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5a1bb76d"]]);
 module.exports = digitInputSlot;

package/dist/es/digit-input-group.js

@@ -27,7 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const digitInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1a28428d"]]);
+const digitInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-44b2fcc1"]]);
 export {
   digitInputGroup as default
 };

package/dist/es/digit-input-slot.js

@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const digitInputSlot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a9112549"]]);
+const digitInputSlot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5a1bb76d"]]);
 export {
   digitInputSlot as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.68",
+  "version": "0.6.69",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.68",
-    "@youcan/celeste-tokens": "0.6.68"
+    "@youcan/celeste-icons": "0.6.69",
+    "@youcan/celeste-tokens": "0.6.69"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

package/src/components/digit-input/digit-input-group.vue

@@ -19,6 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 .celeste-digit-input-group {
   display: flex;
   align-items: center;
+  max-width: 100%;
   gap: var(--spacing-10);
 }
 </style>

package/src/components/digit-input/digit-input-slot.vue

@@ -23,11 +23,10 @@ const forwardedProps = useForwardProps(delegatedProps);
 
   display: flex;
   box-sizing: border-box;
-  flex-grow: 1;
-  flex-shrink: 1;
+  flex: 1 1 0;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
+  min-width: 32px;
   max-width: 64px;
   padding: 0;
   transition: all var(--animation-fast) ease-out;

package/src/components/digit-input/stories/digit-input.stories.ts

@@ -218,3 +218,31 @@ export const ErrorState: Story = {
     `,
   }),
 };
+
+export const Responsive: Story = {
+  args: {
+    otp: true,
+    placeholder: '●',
+    type: 'number',
+  },
+
+  render: args => ({
+    components: { DigitInput, DigitInputSlot, DigitInputGroup },
+    setup() {
+      const value = ref(['', '', '', '', '', '']);
+      return { args, value };
+    },
+    template: `
+      <div style="max-width: 320px; border: 1px dashed #ccc; padding: 16px;">
+        <p style="margin-bottom: 12px; font-size: 12px; color: #666;">Container width: 320px (small mobile)</p>
+        <DigitInput v-bind="args" v-model="value">
+          <DigitInputGroup>
+            <DigitInputSlot v-for="(id, idx) in 3" :key="id" :index="idx" />
+            <i class="i-celeste-subtract-line" style="width: 16px; flex-shrink: 0;" />
+            <DigitInputSlot v-for="(id, idx) in 3" :key="id + 3" :index="idx + 3" />
+          </DigitInputGroup>
+        </DigitInput>
+      </div>
+    `,
+  }),
+};