@youcan/celeste 0.17.2 → 0.18.0

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

@@ -73,15 +73,21 @@ export const Size: Story = {
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px" size="md">
-          <i class="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
 
         <TextInput v-bind="args" style="width: 300px" size="sm">
-          <i class="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
         
         <TextInput v-bind="args" style="width: 300px" size="xs">
-          <i class="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
       </div>
     `,
@@ -361,3 +367,47 @@ export const WithTrailingCombobox: Story = {
     `,
   }),
 };
+
+function flag(color: string): string {
+  return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="${color}"/></svg>`)}`;
+}
+
+const COUNTRIES = [
+  { value: 'MA', label: 'Morocco (+212)', shortLabel: '+212', image: flag('#c1272d') },
+  { value: 'FR', label: 'France (+33)', shortLabel: '+33', image: flag('#002654') },
+  { value: 'US', label: 'United States (+1)', shortLabel: '+1', image: flag('#3c3b6e') },
+];
+
+export const Phone: Story = {
+  args: {
+    type: 'tel',
+    placeholder: '610-101010',
+  },
+
+  render: args => ({
+    components: { TextInput, Combobox },
+    setup() {
+      const country = ref(COUNTRIES[0]);
+      const phone = ref('+212610101010');
+
+      return { args, COUNTRIES, country, phone };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; width: 360px;">
+        <TextInput v-for="size in ['md', 'sm', 'xs']" :key="size" v-bind="args" v-model="phone" :size="size">
+          <template #leadingNode>
+            <Combobox
+              v-model="country"
+              searchable
+              :options="COUNTRIES"
+              :size="size"
+              value-by="value"
+              label-by="shortLabel"
+              type="compact-input"
+            />
+          </template>
+        </TextInput>
+      </div>
+    `,
+  }),
+};

package/src/components/text-input/text-input-affix.vue

@@ -27,18 +27,22 @@ const delegatedProps = useDelegatedProps(props, 'class');
   flex-shrink: 0;
   align-items: center;
   color: var(--celeste-text-input-affix-color);
+  unicode-bidi: plaintext;
 
   &[inline='false'] {
-    padding-inline: var(--spacing-10);
+    padding-inline: var(--input-affix-padding);
     background-color: var(--celeste-text-input-affix-background-color);
   }
 
   &[askbd='true'] {
+    box-sizing: border-box;
     width: fit-content;
-    height: fit-content;
-    padding: var(--spacing-2) calc(var(--spacing-8) - var(--spacing-2));
+    height: 20px;
+    padding-inline: var(--spacing-6);
     border: 1px solid var(--color-stroke-soft-200);
     border-radius: var(--radius-4);
+    background-color: var(--color-bg-white-0);
+    color: var(--celeste-text-input-muted-color);
     font: var(--subheading-xs);
   }
 }

package/src/components/text-input/text-input-button.vue

@@ -37,10 +37,14 @@ const delegatedProps = useDelegatedProps(props, 'class');
   }
 
   &[inline='false'] {
-    padding: var(--spacing-10);
+    padding-inline: var(--spacing-14);
     border-end-start-radius: 0;
     border-start-start-radius: 0;
 
+    &:has(> :only-child:is(i)) {
+      padding-inline: var(--spacing-10);
+    }
+
     &:is(.celeste-button-intent-neutral, .celeste-button-variant-stroke):not(:disabled) {
       background-color: var(--color-bg-white-0);
 
@@ -53,7 +57,7 @@ const delegatedProps = useDelegatedProps(props, 'class');
   &[inline='true'] {
     width: 20px;
     height: 20px;
-    color: var(--celeste-text-input-icon-color) !important;
+    color: var(--celeste-text-input-muted-color) !important;
 
     &:hover {
       background-color: transparent !important;

package/src/components/text-input/text-input.vue

@@ -80,6 +80,7 @@ function clearInput() {
     >
       <TextInputButton
         v-if="showClearButton"
+        inline
         type="button"
         aria-label="Clear search"
         @click="clearInput"
@@ -97,8 +98,9 @@ function clearInput() {
 .celeste-text-input-wrapper {
   --celeste-text-input-border-color: var(--color-stroke-soft-200);
   --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
-  --celeste-text-input-icon-color: var(--color-text-soft-400);
-  --celeste-text-input-affix-color: var(--color-text-soft-400);
+  --celeste-text-input-icon-color: var(--color-text-sub-600);
+  --celeste-text-input-affix-color: var(--color-text-sub-600);
+  --celeste-text-input-muted-color: var(--color-text-soft-400);
   --celeste-text-input-placeholder-color: var(--color-text-soft-400);
   --celeste-text-input-affix-background-color: var(--color-bg-white-0);
 
@@ -106,12 +108,10 @@ function clearInput() {
   box-sizing: border-box;
   align-items: center;
   height: var(--input-height);
-  padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
+  padding-inline: var(--input-padding);
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--celeste-text-input-border-color);
   border-radius: var(--input-radius);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   background-color: var(--color-bg-white-0);
   box-shadow: var(--celeste-text-input-drop-shadow);
   color: var(--color-text-strong-950);
@@ -119,24 +119,27 @@ function clearInput() {
   gap: var(--input-gap);
 
   &[size='xs'] {
-    --input-gap: 8px;
+    --input-gap: var(--spacing-6);
     --input-height: 32px;
     --input-radius: var(--radius-8);
-    --input-padding: calc(var(--spacing-8) - var(--spacing-2));
+    --input-padding: var(--spacing-8);
+    --input-affix-padding: var(--spacing-10);
   }
 
   &[size='sm'] {
-    --input-gap: 6px;
+    --input-gap: var(--spacing-8);
     --input-height: 36px;
     --input-radius: var(--radius-8);
-    --input-padding: var(--spacing-8);
+    --input-padding: var(--spacing-10);
+    --input-affix-padding: var(--spacing-10);
   }
 
   &[size='md'] {
-    --input-gap: 6px;
+    --input-gap: var(--spacing-8);
     --input-height: 40px;
     --input-radius: var(--radius-10);
-    --input-padding: var(--spacing-10);
+    --input-padding: var(--spacing-12);
+    --input-affix-padding: var(--spacing-12);
   }
 
   &[has-error='true'] {
@@ -158,6 +161,12 @@ function clearInput() {
       color: var(--celeste-text-input-placeholder-color);
     }
 
+    &[type='tel'] {
+      direction: ltr;
+      text-align: -webkit-match-parent;
+      text-align: match-parent;
+    }
+
     // Hide default webkit search cancel button
     &[type='search'] {
       &::-webkit-search-cancel-button {
@@ -199,18 +208,36 @@ function clearInput() {
     padding-inline-end: 0;
   }
 
+  &:has(.celeste-text-input:placeholder-shown) {
+    --celeste-text-input-icon-color: var(--color-text-soft-400);
+    --celeste-text-input-affix-color: var(--color-text-soft-400);
+  }
+
+  &:hover:not(:has(.celeste-text-input:focus)) {
+    --celeste-text-input-drop-shadow: none;
+
+    &:not([has-error='true'], :has(.celeste-text-input-node)) {
+      --celeste-text-input-border-color: transparent;
+    }
+
+    &:not(:has(.celeste-text-input-node:hover)) {
+      --celeste-text-input-icon-color: var(--color-text-sub-600);
+      --celeste-text-input-placeholder-color: var(--color-text-sub-600);
+
+      background-color: var(--color-bg-weak-50);
+    }
+  }
+
   &:has(.celeste-text-input:focus) {
     --celeste-text-input-border-color: var(--color-stroke-strong-950);
+    --celeste-text-input-drop-shadow: var(--shadow-buttons-important-focus);
     --celeste-text-input-placeholder-color: var(--color-text-sub-600);
     --celeste-text-input-icon-color: var(--color-text-sub-600);
     --celeste-text-input-affix-color: var(--color-text-sub-600);
 
-    outline-color: var(--color-stroke-soft-200);
-
     &[has-error='true'] {
       --celeste-text-input-border-color: var(--color-state-error-base);
-
-      outline-color: var(--color-state-error-lighter);
+      --celeste-text-input-drop-shadow: var(--shadow-buttons-error-focus);
     }
   }
 
@@ -229,35 +256,17 @@ function clearInput() {
     --celeste-text-input-drop-shadow: none;
     --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
     --celeste-text-input-affix-color: var(--color-text-disabled-300);
+    --celeste-text-input-muted-color: var(--color-text-disabled-300);
     --celeste-text-input-placeholder-color: var(--color-text-disabled-300);
     --celeste-text-input-icon-color: var(--color-text-disabled-300);
 
     background-color: var(--color-bg-weak-50);
-    box-shadow: none;
     color: var(--color-text-disabled-300);
     pointer-events: none;
 
     .celeste-text-input::placeholder {
       color: currentcolor;
     }
-
-    .celeste-text-input-clear-button {
-      color: var(--color-text-disabled-300);
-      pointer-events: none;
-    }
-  }
-
-  &:has(.celeste-text-input:hover:not(:focus, :disabled)) {
-    &:not(:has(.celeste-text-input-node)) {
-      --celeste-text-input-border-color: transparent;
-    }
-
-    &:not(:has(.celeste-text-input-node:hover)) {
-      --celeste-text-input-icon-color: var(--color-text-sub-600);
-      --celeste-text-input-placeholder-color: var(--color-text-sub-600);
-
-      background-color: var(--color-bg-weak-50);
-    }
   }
 
   .celeste-text-input-icon {
@@ -274,6 +283,7 @@ function clearInput() {
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
+    margin-inline-end: calc(var(--input-padding) - var(--input-gap));
     border-inline-end: 1px solid var(--color-stroke-soft-200);
     border-start-start-radius: var(--input-radius);
     border-start-end-radius: 0;
@@ -282,6 +292,7 @@ function clearInput() {
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
+    margin-inline-start: calc(var(--input-padding) - var(--input-gap));
     border-inline-start: 1px solid var(--color-stroke-soft-200);
     border-start-start-radius: 0;
     border-start-end-radius: var(--input-radius);