tide-design-system 2.4.7 → 2.5.2

package/src/components/TideInputTextarea.vue

@@ -189,7 +189,7 @@
 
   .tide-input-textarea:focus-within .tide-input-textarea-field {
     --tide-input-outline-width: var(--tide-border-width-2);
-    outline-color: var(--tide-surface-border-high);
+    outline-color: var(--tide-border-high);
   }
 
   .tide-input-textarea textarea {
@@ -200,6 +200,6 @@
     --tide-input-outline-width: var(--tide-border-width-1);
     outline: var(--tide-input-outline-width) solid var(--tide-border);
     outline-offset: calc(var(--tide-input-outline-width) * -1);
-    color: var(--tide-surface-foreground);
+    color: var(--tide-on-surface);
   }
 </style>

package/src/components/TideInputTextareaDeprecated.vue

@@ -182,7 +182,7 @@
 
   .tide-input-textarea:focus-within .tide-input-textarea-field {
     --tide-input-outline-width: var(--tide-border-width-2);
-    outline-color: var(--tide-surface-border-high);
+    outline-color: var(--tide-border-high);
   }
 
   .tide-input-textarea textarea {
@@ -193,6 +193,6 @@
     --tide-input-outline-width: var(--tide-border-width-1);
     outline: var(--tide-input-outline-width) solid var(--tide-border);
     outline-offset: calc(var(--tide-input-outline-width) * -1);
-    color: var(--tide-surface-foreground);
+    color: var(--tide-on-surface);
   }
 </style>

package/src/components/TideModal.vue

@@ -11,14 +11,20 @@
   import type { Ref } from 'vue';
 
   type Props = {
+    /**
+     * Called before the modal closes.
+     *
+     * Return `false` to cancel the close event.
+     */
+    beforeClose?: () => void | boolean | Promise<void | boolean>;
     isBackButton?: boolean;
     isDismissible?: boolean;
-    isOpen: boolean;
     title?: string;
     width?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    beforeClose: undefined,
     isBackButton: false,
     isDismissible: true,
     title: undefined,
@@ -26,7 +32,6 @@
   });
 
   type Emits = {
-    (e: 'close'): void;
     (e: 'back'): void;
   };
 
@@ -35,6 +40,8 @@
   const modalContent: Ref<HTMLDivElement | undefined> = ref();
   const modalDialog: Ref<HTMLDialogElement | undefined> = ref();
 
+  const isOpen = defineModel<boolean>({ required: true });
+
   const triggerNativeDialogOpen = () => {
     modalDialog.value?.showModal();
   };
@@ -50,35 +57,41 @@
     });
   };
 
+  const close = async () => {
+    if (props.beforeClose) {
+      const result = await props.beforeClose();
+      if (result === false) return;
+    }
+
+    isOpen.value = false;
+  };
+
   const handleBackdropClick = () => {
-    if (props.isDismissible) emit('close');
+    if (props.isDismissible) close();
   };
 
   const handleEscapeKeydown = (e: Event) => {
     e.preventDefault();
-    if (props.isDismissible) emit('close');
+    if (props.isDismissible) close();
   };
 
-  watch(
-    () => props.isOpen,
-    (newValue) => {
-      if (!modalDialog.value) return;
-      if (newValue) {
-        triggerNativeDialogOpen();
-        scrollContentToTop();
-      } else {
-        triggerNativeDialogClose();
-      }
-      setScrollLock(newValue);
+  watch(isOpen, () => {
+    if (!modalDialog.value) return;
+    if (isOpen.value) {
+      triggerNativeDialogOpen();
+      scrollContentToTop();
+    } else {
+      triggerNativeDialogClose();
     }
-  );
+    setScrollLock(isOpen.value);
+  });
 
   onBeforeMount(() => {
     initFauxTopLayer();
   });
 
   onMounted(() => {
-    if (props.isOpen) {
+    if (isOpen.value) {
       triggerNativeDialogOpen();
     }
   });
@@ -89,7 +102,7 @@
     <dialog
       :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
       ref="modalDialog"
-      :style="{ '--modal-width': props.width }"
+      :style="{ '--modal-width': width }"
       @click.self="handleBackdropClick"
       @close.prevent
       @keydown.escape="handleEscapeKeydown"
@@ -141,7 +154,7 @@
             :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
             :icon="ICON.CLOSE"
             :priority="PRIORITY.QUATERNARY"
-            @click="emit('close')"
+            @click="close"
             v-if="isDismissible"
           />
         </header>
@@ -223,7 +236,7 @@
     padding-inline: var(--modal-padding-x);
   }
   .tide-modal-content {
-    grid-template-columns: var(--modal-padding-x) 1fr var(--modal-padding-x);
+    grid-template-columns: var(--modal-padding-x) var(--tide-safe-fr) var(--modal-padding-x);
   }
   :where(.tide-modal-content):deep(> :where(*)) {
     grid-column: 2;

package/src/components/TidePagination.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, ref } from 'vue';
+  import { computed } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideButtonPagination from '@/components/TideButtonPagination.vue';
@@ -8,25 +8,25 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
-    pageCurrent?: number;
-    pageTotal?: number;
+    pageTotal: number;
   };
 
-  const props = withDefaults(defineProps<Props>(), {
-    pageCurrent: 1,
-    pageTotal: 1,
-  });
+  const props = defineProps<Props>();
 
-  const emit = defineEmits(['change']);
-
-  const pageCurrent = ref(props.pageCurrent);
+  const currentIndex = defineModel<number>({ required: true });
 
   const paginationButtons = computed(() => new Array(props.pageTotal).fill('').map((empty, index) => index + 1));
 
   const handleClick = (index: number) => {
-    pageCurrent.value = index;
+    currentIndex.value = index;
+  };
 
-    emit('change', event, index);
+  const handlePreviousClick = () => {
+    currentIndex.value--;
+  };
+
+  const handleNextClick = () => {
+    currentIndex.value++;
   };
 </script>
 
@@ -35,10 +35,10 @@
     :class="['tide-pagination', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]"
   >
     <TideButtonIcon
-      :disabled="pageCurrent === 1"
+      :disabled="currentIndex <= 1"
       :icon="ICON.CHEVRON_LEFT"
       :priority="PRIORITY.QUATERNARY"
-      @click="handleClick(pageCurrent - 1)"
+      @click="handlePreviousClick"
     />
 
     <ul :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]">
@@ -47,7 +47,7 @@
         v-for="paginationButton in paginationButtons"
       >
         <TideButtonPagination
-          :disabled="pageCurrent === paginationButton"
+          :disabled="currentIndex === paginationButton"
           :label="paginationButton"
           :priority="PRIORITY.QUATERNARY"
           @click="handleClick(paginationButton)"
@@ -56,12 +56,10 @@
     </ul>
 
     <TideButtonIcon
-      :disabled="pageCurrent === paginationButtons[paginationButtons.length - 1]"
+      :disabled="currentIndex >= paginationButtons[paginationButtons.length - 1]"
       :icon="ICON.CHEVRON_RIGHT"
       :priority="PRIORITY.QUATERNARY"
-      @click="handleClick(pageCurrent + 1)"
+      @click="handleNextClick"
     />
   </section>
 </template>
-
-<style scoped></style>

package/src/components/TideRating.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    description?: string;
+    maxRating?: number;
+    showRating?: boolean;
+    title?: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    description: undefined,
+    maxRating: 10,
+    showRating: false,
+    title: undefined,
+  });
+
+  const ratingValue = defineModel<number>({ required: true });
+
+  const segments = computed(() => Array.from({ length: props.maxRating }, (_, index) => index + 1));
+
+  const handleClick = (segment: number) => {
+    ratingValue.value = segment;
+  };
+</script>
+
+<template>
+  <div :class="['tide-rating', CSS.WIDTH.FULL]">
+    <section :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.AXIS1.BETWEEN, CSS.PADDING.BOTTOM.HALF]">
+      <div :class="[CSS.FONT.ROLE.LABEL_2]">
+        {{ props.title }}
+      </div>
+      <div
+        :class="[CSS.FONT.ROLE.LABEL_3, CSS.FONT.COLOR.SURFACE.VARIANT]"
+        v-if="props.showRating"
+      >
+        {{ ratingValue }}/{{ props.maxRating }}
+      </div>
+    </section>
+    <section
+      :class="[CSS.FONT.ROLE.BODY_2, CSS.PADDING.BOTTOM.ONE, CSS.OVERFLOW.XY.HIDDEN, CSS.ELLIPSIS]"
+      v-if="props.description"
+    >
+      {{ props.description }}
+    </section>
+
+    <section :class="['tide-rating-bar', CSS.DISPLAY.FLEX, CSS.GAP.QUARTER, CSS.FLEX.GROW.ON, CSS.FLEX.SHRINK.ON]">
+      <button
+        :class="[
+          'tide-rating-segment',
+          CSS.BG.SURFACE.VARIANT,
+          CSS.POSITION.RELATIVE,
+          CSS.OVERFLOW.XY.HIDDEN,
+          CSS.FLEX.GROW.ON,
+          CSS.FLEX.SHRINK.ON,
+          CSS.FLEX.BASIS.ZERO,
+          CSS.BORDER.FULL.ZERO,
+          segment === 1 && ['tide-rating-segment-first'],
+          segment === segments.length && ['tide-rating-segment-last'],
+          segment <= ratingValue && [CSS.BG.SURFACE.GRADIENT],
+        ]"
+        :key="segment"
+        @click="handleClick(segment)"
+        type="button"
+        v-for="segment in segments"
+      />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+  .tide-rating-bar {
+    height: 28px;
+  }
+
+  .tide-rating-segment {
+    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
+  }
+
+  .tide-rating-segment-first {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
+  }
+
+  .tide-rating-segment-last {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
+  }
+</style>

package/src/components/TideSheet.vue

@@ -2,30 +2,32 @@
   import { onBeforeMount, onMounted, ref, watch } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
+  import TideDivider from '@/components/TideDivider.vue';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
   import { CSS } from '@/types/Styles';
   import { TOP_LAYER_ID, initFauxTopLayer, setScrollLock } from '@/utilities/viewport';
 
-  import TideDivider from './TideDivider.vue';
-
   import type { Ref } from 'vue';
 
   type Props = {
-    isOpen: boolean;
     isBackButton?: boolean;
   };
-  const props = defineProps<Props>();
+
+  withDefaults(defineProps<Props>(), {
+    isBackButton: false,
+  });
 
   type Emits = {
     (e: 'back'): void;
-    (e: 'close'): void;
   };
 
   const emit = defineEmits<Emits>();
 
   const dialogElement: Ref<HTMLDialogElement | null> = ref(null);
 
+  const isOpen = defineModel<boolean>({ required: true });
+
   const triggerNativeDialogOpen = () => {
     dialogElement.value?.showModal();
   };
@@ -34,34 +36,35 @@
     dialogElement.value?.close();
   };
 
+  const close = () => {
+    isOpen.value = false;
+  };
+
   const handleBackdropClick = () => {
-    emit('close');
+    close();
   };
 
   const handleEscapeKeydown = (e: Event) => {
     e.preventDefault();
-    emit('close');
+    close();
   };
 
-  watch(
-    () => props.isOpen,
-    (newValue) => {
-      if (!dialogElement.value) return;
-      if (newValue) {
-        triggerNativeDialogOpen();
-      } else {
-        triggerNativeDialogClose();
-      }
-      setScrollLock(newValue);
+  watch(isOpen, () => {
+    if (!dialogElement.value) return;
+    if (isOpen.value) {
+      triggerNativeDialogOpen();
+    } else {
+      triggerNativeDialogClose();
     }
-  );
+    setScrollLock(isOpen.value);
+  });
 
   onBeforeMount(() => {
     initFauxTopLayer();
   });
 
   onMounted(() => {
-    if (props.isOpen) {
+    if (isOpen.value) {
       triggerNativeDialogOpen();
     }
   });
@@ -109,7 +112,7 @@
             :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
             :icon="ICON.CLOSE"
             :priority="PRIORITY.QUATERNARY"
-            @click="emit('close')"
+            @click="close"
           />
         </header>
 
@@ -167,7 +170,7 @@
   }
 
   .tide-sheet-content {
-    grid-template-columns: var(--sheet-padding-x) 1fr var(--sheet-padding-x);
+    grid-template-columns: var(--sheet-padding-x) var(--tide-safe-fr) var(--sheet-padding-x);
   }
 
   :where(.tide-sheet-content):deep(> :where(*)) {

package/src/components/TideSwitch.vue

@@ -6,19 +6,17 @@
 
   type Props = {
     disabled?: boolean;
-    isActive?: boolean;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     disabled: false,
-    isActive: false,
   });
 
-  const emit = defineEmits(['change']);
+  const isActive = defineModel<boolean>({ required: true });
 
   const handleClick = () => {
     if (!props.disabled) {
-      emit('change');
+      isActive.value = !isActive.value;
     }
   };
 </script>
@@ -27,14 +25,15 @@
   <button
     :class="[
       'tide-switch',
-      props.isActive ? 'active' : '',
       CSS.DISPLAY.FLEX,
       CSS.AXIS2.CENTER,
       CSS.BORDER.FULL.ONE,
       CSS.BORDER.RADIUS.FULL,
-      props.isActive ? '' : CSS.BORDER.COLOR.DEFAULT,
       CSS.OVERFLOW.XY.HIDDEN,
-      props.isActive ? CSS.BG.SECONDARY : CSS.BG.SURFACE.DEFAULT,
+      CSS.FLEX.SHRINK.OFF,
+      CSS.FLEX.GROW.OFF,
+      isActive ? ['active', CSS.BG.SECONDARY] : [CSS.BG.SURFACE.DEFAULT, CSS.BORDER.COLOR.DEFAULT],
+      disabled && [CSS.OPACITY.DISABLED],
     ]"
     :disabled="props.disabled"
     @click="handleClick"
@@ -49,7 +48,7 @@
         CSS.AXIS1.CENTER,
         CSS.AXIS2.CENTER,
         CSS.BORDER.RADIUS.FULL,
-        props.isActive ? CSS.BG.SURFACE.DEFAULT : CSS.BG.SECONDARY,
+        isActive ? ['active', CSS.BG.SURFACE.DEFAULT] : [CSS.BG.SECONDARY],
       ]"
     >
       <TideIcon
@@ -62,27 +61,31 @@
 
 <style scoped>
   .tide-switch {
-    width: 64px;
-    height: 32px;
-    transition: var(--tide-animate);
-    transition-property: background-color;
-  }
+    --switch-indicator-size: 24px;
+    --switch-indicator-margin: var(--tide-spacing-1\/4);
+    --switch-border-width: var(--tide-border-width-1);
+    --switch-width: calc(var(--switch-indicator-size) * 2 + var(--switch-indicator-margin) * 4);
+    --switch-height: calc(var(--switch-indicator-size) + var(--switch-indicator-margin) * 2);
 
-  .tide-switch:disabled {
-    opacity: var(--tide-opacity);
+    width: var(--switch-width);
+    height: var(--switch-height);
+    transition: var(--tide-animate);
+    transition-property: background-color, border-color;
   }
 
   .tide-switch.active {
     border-color: var(--tide-secondary);
   }
 
-  .tide-switch.active .tide-switch-indicator {
-    left: 36px;
-  }
-
   .tide-switch-indicator {
-    left: 4px;
+    left: var(--switch-indicator-margin);
     transition: var(--tide-animate);
     transition-property: left, border-color, background-color;
   }
+
+  .tide-switch-indicator.active {
+    left: calc(
+      var(--switch-width) - var(--switch-indicator-size) - var(--switch-indicator-margin) - var(--switch-border-width)
+    );
+  }
 </style>

package/src/components/TideTabs.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+  import TideCarousel from '@/components/TideCarousel.vue';
+  import TideLink from '@/components/TideLink.vue';
+  import { ELEMENT } from '@/types/Element';
+  import { CSS } from '@/types/Styles';
+
+  import type { Tab } from '@/types/Tab';
+
+  type Props = {
+    tabs: Tab[];
+  };
+
+  defineProps<Props>();
+
+  const currentTab = defineModel<number>({ required: true });
+
+  const handleClick = (index: number) => {
+    currentTab.value = index;
+  };
+</script>
+
+<template>
+  <div :class="['tide-tabs', CSS.DISPLAY.FLEX, CSS.BORDER.BOTTOM.TWO, CSS.BORDER.COLOR.LOW]">
+    <TideCarousel :is-floating="true">
+      <li
+        :key="tab.label"
+        v-for="(tab, index) in tabs"
+      >
+        <TideLink
+          :class="[
+            index === currentTab ? CSS.FONT.COLOR.SURFACE.BRAND : CSS.FONT.COLOR.SURFACE.VARIANT,
+            CSS.PADDING.BOTTOM.ONE,
+            CSS.FONT.ROLE.LABEL_1,
+            CSS.WHITESPACE_WRAP.OFF,
+          ]"
+          :element="ELEMENT.BUTTON"
+          :label="tab.label"
+          :subtle="true"
+          @click="handleClick(index)"
+        />
+        <div :class="['rounded-border', index === currentTab && 'active']" />
+      </li>
+    </TideCarousel>
+  </div>
+</template>
+
+<style scoped>
+  .rounded-border {
+    border-radius: var(--tide-radius-full) var(--tide-radius-full) 0 0;
+    border-top-width: 4px;
+    border-top-style: solid;
+    border-color: transparent;
+  }
+
+  .active {
+    border-color: var(--tide-on-surface-brand);
+  }
+</style>