@youcan/celeste 0.17.1 → 0.18.0

package/src/components/button/button.vue

@@ -68,7 +68,7 @@ $size-map: (
 $intent-map: (
   'primary': (
     'fill': (
-      fg: var(--color-text-white-0),
+      fg: var(--color-static-white),
       bg: var(--color-primary-base),
       border: var(--color-primary-base),
       shadow: none,
@@ -120,7 +120,7 @@ $intent-map: (
   ),
   'error': (
     'fill': (
-      fg: var(--color-text-white-0),
+      fg: var(--color-static-white),
       bg: var(--color-state-error-base),
       border: var(--color-state-error-base),
       shadow: none,
@@ -148,7 +148,7 @@ $intent-map: (
 $hover-map: (
   'primary': (
     'fill': (
-      fg: var(--color-text-white-0),
+      fg: var(--color-static-white),
       bg: var(--color-primary-darker),
       border: var(--color-primary-darker),
     ),
@@ -192,7 +192,7 @@ $hover-map: (
   ),
   'error': (
     'fill': (
-      fg: var(--color-text-white-0),
+      fg: var(--color-static-white),
       bg: var(--color-red-700),
       border: var(--color-red-700),
     ),
@@ -270,7 +270,7 @@ $hover-map: (
           color: map.get($hover-values, fg);
         }
 
-        &:focus:not(:disabled) {
+        &:focus-visible:not(:disabled) {
           outline: none;
           box-shadow: if(
             $intent == 'neutral',

package/src/components/button/compact-button.vue

@@ -73,7 +73,7 @@ const props = withDefaults(defineProps<CompactButtonProps>(), {
     color: var(--color-icon-strong-950);
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: transparent;
     outline: none;
     background-color: var(--color-bg-weak-50);

package/src/components/button/fancy-button.vue

@@ -107,7 +107,7 @@ $intent-map: (
     height: 20px;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
   }
 
@@ -129,7 +129,7 @@ $intent-map: (
         linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%),
         #{map.get($v, bg)};
       box-shadow: var(--shadow-fancy-buttons-#{$k});
-      color: var(--color-text-white-0);
+      color: if($k == 'neutral', var(--color-text-white-0), var(--color-static-white));
 
       &::before {
         content: '';
@@ -148,7 +148,7 @@ $intent-map: (
         --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
       }
 
-      &:focus {
+      &:focus-visible {
         --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
         --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
 
@@ -167,13 +167,13 @@ $intent-map: (
     &:hover {
       background: var(--color-bg-weak-50);
       box-shadow: none;
-      color: var(--text-strong-950);
+      color: var(--color-text-strong-950);
     }
 
-    &:focus {
+    &:focus-visible {
       background: var(--color-bg-weak-50);
       box-shadow: var(--shadow-buttons-important-focus);
-      color: var(--text-strong-950);
+      color: var(--color-text-strong-950);
     }
   }
 }

package/src/components/button/link-button.vue

@@ -57,7 +57,7 @@ const props = withDefaults(defineProps<LinkButtonProps>(), {
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     outline: none;
     text-decoration: underline;
   }
@@ -92,7 +92,7 @@ const props = withDefaults(defineProps<LinkButtonProps>(), {
     color: var(--color-primary-base);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: var(--color-primary-darker);
     }
   }
@@ -101,7 +101,7 @@ const props = withDefaults(defineProps<LinkButtonProps>(), {
     color: var(--color-text-strong-950);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: var(--color-text-strong-950);
     }
   }
@@ -110,7 +110,7 @@ const props = withDefaults(defineProps<LinkButtonProps>(), {
     color: var(--color-text-sub-600);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: var(--color-text-sub-600);
     }
   }
@@ -119,7 +119,7 @@ const props = withDefaults(defineProps<LinkButtonProps>(), {
     color: var(--color-state-error-base);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: var(--color-red-700);
     }
   }

package/src/components/button/social-button.vue

@@ -87,7 +87,7 @@ $brand-map: (
     padding-inline-end: var(--spacing-6);
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
     box-shadow: var(--shadow-buttons-important-focus);
   }
@@ -100,7 +100,7 @@ $brand-map: (
     border-color: var(--color-stroke-soft-200);
     background-color: var(--color-bg-white-0);
     box-shadow: var(--shadow-regular-xs);
-    color: var(--text-strong-950);
+    color: var(--color-text-strong-950);
 
     &:hover {
       border-color: transparent;

package/src/components/combobox/combobox-item.vue

@@ -2,7 +2,7 @@
 import type { ComboboxItemEmits } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
+import { ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'reka-ui';
 import { computed } from 'vue';
 import Checkbox from '../checkbox/checkbox.vue';
 
@@ -48,7 +48,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         props.class,
         'celeste-dropdown-item',
         { 'celeste-dropdown-item-disabled': disabled },
-        { 'celeste-dropdown-item-selected': selected },
         { 'celeste-dropdown-item-focused': focused },
       )"
     >
@@ -83,7 +82,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <div v-if="$slots.suffix" class="celeste-dropdown-item-suffix">
         <slot name="suffix" />
       </div>
-      <i v-if="selected" class="i-celeste-check-fill" />
+      <ComboboxItemIndicator as-child>
+        <i class="celeste-dropdown-item-indicator i-celeste-check-line" />
+      </ComboboxItemIndicator>
     </div>
   </ComboboxItem>
 </template>
@@ -91,8 +92,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-item {
   display: flex;
+  position: relative;
   align-items: center;
   padding: var(--spacing-8);
+  padding-inline-end: var(--spacing-36);
   transition-property: background-color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
@@ -159,6 +162,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     color: var(--color-icon-sub-600);
   }
 
+  &-indicator {
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    inset-inline-end: var(--spacing-8);
+  }
+
   &-disabled {
     color: var(--color-text-disabled-300);
     cursor: not-allowed;
@@ -174,10 +186,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     }
   }
 
-  &-selected {
-    background: var(--color-bg-weak-50);
-  }
-
   .celeste-dropdown-item-info {
     display: flex;
     flex: 1 0 0;

package/src/components/combobox/combobox-list.vue

@@ -39,14 +39,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 div:deep(.celeste-dropdown-content) {
   --dropdown-height: 300px;
   --dropdown-min-width: var(--reka-combobox-trigger-width, 300px);
-  --dropdown-width: max(var(--reka-popper-anchor-width), 300px);
 
   display: flex;
   z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
-  width: var(--dropdown-width);
+  width: max-content;
   min-width: var(--dropdown-min-width);
+  max-width: max(var(--reka-popper-anchor-width), 320px);
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);

package/src/components/combobox/combobox-trigger.vue

@@ -197,6 +197,19 @@ const forwarded = useForwardProps(delegatedProps);
     border: none;
     border-radius: 0;
     box-shadow: none;
+    gap: 0;
+
+    :deep(.celeste-dropdown-anchor-trigger-prefix) {
+      margin-inline-end: var(--spacing-8);
+    }
+
+    :deep(.celeste-dropdown-trigger) {
+      margin-inline-start: var(--spacing-2);
+    }
+
+    &.celeste-dropdown-anchor-trigger-filled:not([data-disabled]) :deep(.celeste-dropdown-trigger i) {
+      color: var(--color-icon-sub-600);
+    }
 
     &:deep(.celeste-dropdown-trigger-label) {
       flex: inherit;
@@ -206,6 +219,31 @@ const forwarded = useForwardProps(delegatedProps);
     &[data-state='open'] {
       box-shadow: none;
     }
+
+    &:focus-visible {
+      background: var(--color-bg-weak-50);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-md {
+      padding-inline: var(--spacing-10) var(--spacing-8);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-sm {
+      padding-inline: var(--spacing-8);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-xs {
+      padding-inline: var(--spacing-8) var(--spacing-6);
+
+      :deep(.celeste-dropdown-anchor-trigger-prefix) {
+        margin-inline-end: var(--spacing-6);
+      }
+
+      :deep(.celeste-dropdown-anchor-trigger-prefix :is(i, .selected-dropdown-image)) {
+        width: 16px;
+        height: 16px;
+      }
+    }
   }
 
   &.celeste-dropdown-anchor-trigger-type-inline {

package/src/components/combobox/combobox.vue

@@ -253,6 +253,7 @@ const filteredOptions = computed(() => props.ignoreFilter
   align-items: center;
   justify-content: center;
   width: 20px;
+  max-width: none;
   height: 20px;
   object-fit: cover;
   border-radius: var(--radius-full);
@@ -274,6 +275,7 @@ const filteredOptions = computed(() => props.ignoreFilter
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    unicode-bidi: plaintext;
   }
 }
 

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);