tide-design-system 2.0.32 → 2.0.34

package/src/components/TideInputCheckbox.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
 
   import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
@@ -34,8 +34,6 @@
   const checked = ref(props.checked || props.indeterminate);
   const indeterminate = ref(props.indeterminate);
 
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
-
   const handleClick = () => {
     checked.value = !checked.value;
   };
@@ -88,7 +86,7 @@
       :disabled="props.disabled"
       :name="props.name"
       ref="input"
-      :id="uniqueId"
+      :id="props.inputId"
       type="checkbox"
     />
 
@@ -118,7 +116,7 @@
 
     <label
       :class="[CSS.DISPLAY.FLEX, CSS.GAP.HALF, disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER]"
-      :for="uniqueId"
+      :for="props.inputId"
       @click.prevent="checked = !checked"
       v-if="label"
     >

package/src/components/TideInputRadio.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { ref, watch } from 'vue';
 
   import { CSS } from '@/types/Styles';
 
@@ -22,8 +22,6 @@
 
   const checked = ref(props.checked);
 
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
-
   watch(
     () => props.checked,
     (newValue, oldValue) => {
@@ -39,7 +37,7 @@
     <input
       :checked="checked"
       :class="[CSS.DISPLAY.NONE]"
-      :id="uniqueId"
+      :id="props.inputId"
       name=""
       type="radio"
       value=""
@@ -63,7 +61,7 @@
 
     <label
       :class="CSS.FONT.WEIGHT.FOUR_HUNDRED"
-      :for="uniqueId"
+      :for="props.inputId"
     >
       {{ props.label }}
     </label>

package/src/components/TideInputSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { getCurrentInstance, computed, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
 
   import type { SelectField } from '@/types/Field';
   import type { SelectOption, SelectOptionGroup } from '@/types/Select';
@@ -37,8 +37,6 @@
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
   const isEmpty = computed(() => value.value === undefined);
 
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
-
   const expandOptions = () => {
     const event = new MouseEvent('mousedown');
     input?.value?.dispatchEvent(event);
@@ -99,7 +97,7 @@
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
             CSS.FONT.WEIGHT.FIVE_HUNDRED,
           ]"
-          :for="uniqueId"
+          :for="props.inputId"
           v-if="label"
         >
           {{ formattedLabel }}
@@ -113,7 +111,7 @@
           :required="required"
           @focus="handleFocus"
           @focusout="handleFocusOut"
-          :id="uniqueId"
+          :id="props.inputId"
           v-model="value"
         >
           <template v-for="optgroup in props.optgroups">

package/src/components/TideInputText.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
 
   import type { FormValueTransformer } from '@/types/Form';
   import type { Icon } from '@/types/Icon';
@@ -71,7 +71,6 @@
   const type = computed(() =>
     props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
   );
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
 
   const handleClear = () => {
     value.value = '';
@@ -172,7 +171,7 @@
               CSS.FONT.WEIGHT.FIVE_HUNDRED,
               CSS.CURSOR.TEXT,
             ]"
-            :for="uniqueId"
+            :for="props.inputId"
             v-if="label"
           >
             {{ formattedLabel }}
@@ -193,7 +192,7 @@
             @focus="handleFocus"
             @focusout="handleFocusOut"
             @input="handleInput"
-            :id="uniqueId"
+            :id="props.inputId"
             v-model="value"
           />
         </div>

package/src/components/TideInputTextarea.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
 
   import type { ValidationError } from '@/types/Validation';
 
@@ -47,7 +47,6 @@
   const hasError = computed(() => (props.required && !value.value) || getFieldHasError(error.value, props.error));
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
   const isEmpty = computed(() => value.value === '');
-  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
 
   const handleFocus = () => {
     hasFocus.value = true;
@@ -101,7 +100,7 @@
           CSS.FONT.WEIGHT.FIVE_HUNDRED,
           CSS.CURSOR.TEXT,
         ]"
-        :for="uniqueId"
+        :for="props.inputId"
         ref="label"
         v-if="label"
       >
@@ -120,7 +119,7 @@
         @change="handleValidation"
         @focus="handleFocus"
         @focusout="handleFocusOut"
-        :id="uniqueId"
+        :id="props.inputId"
         v-model="value"
       />
     </div>

package/src/types/Styles.ts

@@ -21,6 +21,7 @@ export const CSS = {
     },
     Y: {
       MIDDLE: 'tide-align-middle',
+      INITIAL: 'tide-align-initial',
     },
   },
   AXIS1: {
@@ -37,6 +38,7 @@ export const CSS = {
     START: 'tide-axis2-start',
   },
   BG: {
+    INITIAL: 'tide-bg-initial',
     BLUR: 'tide-bg-blur',
     ERROR: 'tide-bg-error',
     INFO: 'tide-bg-info',
@@ -60,6 +62,7 @@ export const CSS = {
   },
   BORDER: {
     COLOR: {
+      INITIAL: 'tide-border-color-initial',
       DEFAULT: 'tide-border',
       FLOATING: 'tide-border-floating',
       HIGH: 'tide-border-high',
@@ -67,28 +70,34 @@ export const CSS = {
       PRIMARY: 'tide-border-primary',
     },
     RADIUS: {
+      ZERO: 'tide-radius-0',
       QUARTER: 'tide-radius-1/4',
       HALF: 'tide-radius-1/2',
       ONE: 'tide-radius-1',
       FULL: 'tide-radius-full',
     },
     BOTTOM: {
+      ZERO: 'tide-border-bottom-0',
       ONE: 'tide-border-bottom-1',
       TWO: 'tide-border-bottom-2',
     },
     FULL: {
+      ZERO: 'tide-border-0',
       ONE: 'tide-border-1',
       TWO: 'tide-border-2',
     },
     LEFT: {
+      ZERO: 'tide-border-left-0',
       ONE: 'tide-border-left-1',
       TWO: 'tide-border-left-2',
     },
     RIGHT: {
+      ZERO: 'tide-border-right-0',
       ONE: 'tide-border-right-1',
       TWO: 'tide-border-right-2',
     },
     TOP: {
+      ZERO: 'tide-border-top-0',
       ONE: 'tide-border-top-1',
       TWO: 'tide-border-top-2',
     },
@@ -98,9 +107,11 @@ export const CSS = {
     CONTENT_BOX: 'tide-box-content',
   },
   BREAK_WORD: {
+    OFF: 'tide-break-initial',
     ON: 'tide-break-word',
   },
   COLUMNS: {
+    INITIAL: 'tide-columns-initial',
     ONE: 'tide-columns-1',
     TWO: 'tide-columns-2',
     THREE: 'tide-columns-3',
@@ -124,6 +135,7 @@ export const CSS = {
   },
   FLEX: {
     BASIS: {
+      AUTO: 'tide-flex-basis-auto',
       ZERO: 'tide-flex-basis-0',
     },
     DIRECTION: {
@@ -170,6 +182,7 @@ export const CSS = {
     },
   },
   GAP: {
+    ZERO: 'tide-gap-0',
     QUARTER: 'tide-gap-1/4',
     HALF: 'tide-gap-1/2',
     ONE: 'tide-gap-1',
@@ -212,7 +225,8 @@ export const CSS = {
     XL: 'tide-grid-xl',
   },
   HEIGHT: {
-    ZERO: 'tide-width-0',
+    AUTO: 'tide-height-auto',
+    ZERO: 'tide-height-0',
     FULL: 'tide-height-full',
   },
   ISOLATION: {
@@ -223,6 +237,7 @@ export const CSS = {
   },
   MARGIN: {
     BOTTOM: {
+      ZERO: 'tide-margin-bottom-0',
       QUARTER: 'tide-margin-bottom-1/4',
       HALF: 'tide-margin-bottom-1/2',
       ONE: 'tide-margin-bottom-1',
@@ -230,6 +245,7 @@ export const CSS = {
       FOUR: 'tide-margin-bottom-4',
     },
     FULL: {
+      ZERO: 'tide-margin-0',
       QUARTER: 'tide-margin-1/4',
       HALF: 'tide-margin-1/2',
       ONE: 'tide-margin-1',
@@ -238,6 +254,7 @@ export const CSS = {
     },
     LEFT: {
       AUTO: 'tide-margin-left-auto',
+      ZERO: 'tide-margin-left-0',
       QUARTER: 'tide-margin-left-1/4',
       HALF: 'tide-margin-left-1/2',
       ONE: 'tide-margin-left-1',
@@ -246,6 +263,7 @@ export const CSS = {
     },
     RIGHT: {
       AUTO: 'tide-margin-right-auto',
+      ZERO: 'tide-margin-right-0',
       QUARTER: 'tide-margin-right-1/4',
       HALF: 'tide-margin-right-1/2',
       ONE: 'tide-margin-right-1',
@@ -253,6 +271,7 @@ export const CSS = {
       FOUR: 'tide-margin-right-4',
     },
     TOP: {
+      ZERO: 'tide-margin-top-0',
       QUARTER: 'tide-margin-top-1/4',
       HALF: 'tide-margin-top-1/2',
       ONE: 'tide-margin-top-1',
@@ -261,6 +280,7 @@ export const CSS = {
     },
     X: {
       AUTO: 'tide-margin-x-auto',
+      ZERO: 'tide-margin-x-0',
       QUARTER: 'tide-margin-x-1/4',
       HALF: 'tide-margin-x-1/2',
       ONE: 'tide-margin-x-1',
@@ -268,6 +288,7 @@ export const CSS = {
       FOUR: 'tide-margin-x-4',
     },
     Y: {
+      ZERO: 'tide-margin-y-0',
       QUARTER: 'tide-margin-y-1/4',
       HALF: 'tide-margin-y-1/2',
       ONE: 'tide-margin-y-1',
@@ -302,6 +323,7 @@ export const CSS = {
   },
   PADDING: {
     BOTTOM: {
+      ZERO: 'tide-padding-bottom-0',
       QUARTER: 'tide-padding-bottom-1/4',
       HALF: 'tide-padding-bottom-1/2',
       ONE: 'tide-padding-bottom-1',
@@ -309,6 +331,7 @@ export const CSS = {
       FOUR: 'tide-padding-bottom-4',
     },
     FULL: {
+      ZERO: 'tide-padding-0',
       QUARTER: 'tide-padding-1/4',
       HALF: 'tide-padding-1/2',
       ONE: 'tide-padding-1',
@@ -316,6 +339,7 @@ export const CSS = {
       FOUR: 'tide-padding-4',
     },
     LEFT: {
+      ZERO: 'tide-padding-left-0',
       QUARTER: 'tide-padding-left-1/4',
       HALF: 'tide-padding-left-1/2',
       ONE: 'tide-padding-left-1',
@@ -323,6 +347,7 @@ export const CSS = {
       FOUR: 'tide-padding-left-4',
     },
     RIGHT: {
+      ZERO: 'tide-padding-right-0',
       QUARTER: 'tide-padding-right-1/4',
       HALF: 'tide-padding-right-1/2',
       ONE: 'tide-padding-right-1',
@@ -330,6 +355,7 @@ export const CSS = {
       FOUR: 'tide-padding-right-4',
     },
     TOP: {
+      ZERO: 'tide-padding-top-0',
       QUARTER: 'tide-padding-top-1/4',
       HALF: 'tide-padding-top-1/2',
       ONE: 'tide-padding-top-1',
@@ -337,6 +363,7 @@ export const CSS = {
       FOUR: 'tide-padding-top-4',
     },
     X: {
+      ZERO: 'tide-padding-x-0',
       QUARTER: 'tide-padding-x-1/4',
       HALF: 'tide-padding-x-1/2',
       ONE: 'tide-padding-x-1',
@@ -344,6 +371,7 @@ export const CSS = {
       FOUR: 'tide-padding-x-4',
     },
     Y: {
+      ZERO: 'tide-padding-y-0',
       QUARTER: 'tide-padding-y-1/4',
       HALF: 'tide-padding-y-1/2',
       ONE: 'tide-padding-y-1',
@@ -359,6 +387,7 @@ export const CSS = {
     ABSOLUTE: 'tide-position-absolute',
     FIXED: 'tide-position-fixed',
     RELATIVE: 'tide-position-relative',
+    STATIC: 'tide-static',
     STICKY: 'tide-sticky',
   },
   POSITIONING: {
@@ -371,6 +400,7 @@ export const CSS = {
     OFF: 'tide-scrollbar-none',
   },
   SHADOW: {
+    INITIAL: 'tide-shadow-initial',
     BOTTOM: 'tide-shadow-bottom',
     TOP: 'tide-shadow-top',
   },
@@ -398,11 +428,13 @@ export const CSS = {
     OFF: 'tide-whitespace-nowrap',
   },
   WIDTH: {
+    AUTO: 'tide-width-auto',
     ZERO: 'tide-width-0',
     FULL: 'tide-width-full',
     MAX_FULL: 'tide-max-width-full',
   },
   Z_INDEX: {
+    INITIAL: 'tide-z-index-initial',
     ONE: 'tide-z-index-1',
   },
 } as const;
@@ -453,38 +485,45 @@ export const cssSortOrder = [
   CSS.POSITIONING.LEFT,
   CSS.BOX_SIZING.BORDER_BOX,
   CSS.BOX_SIZING.CONTENT_BOX,
+  CSS.MARGIN.FULL.ZERO,
   CSS.MARGIN.FULL.ONE,
   CSS.MARGIN.FULL.HALF,
   CSS.MARGIN.FULL.QUARTER,
   CSS.MARGIN.FULL.TWO,
   CSS.MARGIN.FULL.FOUR,
+  CSS.MARGIN.Y.ZERO,
   CSS.MARGIN.Y.ONE,
   CSS.MARGIN.Y.HALF,
   CSS.MARGIN.Y.QUARTER,
   CSS.MARGIN.Y.TWO,
   CSS.MARGIN.Y.FOUR,
+  CSS.MARGIN.TOP.ZERO,
   CSS.MARGIN.TOP.ONE,
   CSS.MARGIN.TOP.HALF,
   CSS.MARGIN.TOP.QUARTER,
   CSS.MARGIN.TOP.TWO,
   CSS.MARGIN.TOP.FOUR,
+  CSS.MARGIN.X.ZERO,
   CSS.MARGIN.X.ONE,
   CSS.MARGIN.X.HALF,
   CSS.MARGIN.X.QUARTER,
   CSS.MARGIN.X.TWO,
   CSS.MARGIN.X.FOUR,
   CSS.MARGIN.X.AUTO,
+  CSS.MARGIN.RIGHT.ZERO,
   CSS.MARGIN.RIGHT.ONE,
   CSS.MARGIN.RIGHT.HALF,
   CSS.MARGIN.RIGHT.QUARTER,
   CSS.MARGIN.RIGHT.TWO,
   CSS.MARGIN.RIGHT.FOUR,
   CSS.MARGIN.RIGHT.AUTO,
+  CSS.MARGIN.BOTTOM.ZERO,
   CSS.MARGIN.BOTTOM.ONE,
   CSS.MARGIN.BOTTOM.HALF,
   CSS.MARGIN.BOTTOM.QUARTER,
   CSS.MARGIN.BOTTOM.TWO,
   CSS.MARGIN.BOTTOM.FOUR,
+  CSS.MARGIN.LEFT.ZERO,
   CSS.MARGIN.LEFT.ONE,
   CSS.MARGIN.LEFT.HALF,
   CSS.MARGIN.LEFT.QUARTER,
@@ -505,36 +544,43 @@ export const cssSortOrder = [
   CSS.BORDER.RADIUS.HALF,
   CSS.BORDER.RADIUS.QUARTER,
   CSS.BORDER.RADIUS.FULL,
+  CSS.PADDING.FULL.ZERO,
   CSS.PADDING.FULL.ONE,
   CSS.PADDING.FULL.HALF,
   CSS.PADDING.FULL.QUARTER,
   CSS.PADDING.FULL.TWO,
   CSS.PADDING.FULL.FOUR,
+  CSS.PADDING.Y.ZERO,
   CSS.PADDING.Y.ONE,
   CSS.PADDING.Y.HALF,
   CSS.PADDING.Y.QUARTER,
   CSS.PADDING.Y.TWO,
   CSS.PADDING.Y.FOUR,
+  CSS.PADDING.TOP.ZERO,
   CSS.PADDING.TOP.ONE,
   CSS.PADDING.TOP.HALF,
   CSS.PADDING.TOP.QUARTER,
   CSS.PADDING.TOP.TWO,
   CSS.PADDING.TOP.FOUR,
+  CSS.PADDING.X.ZERO,
   CSS.PADDING.X.ONE,
   CSS.PADDING.X.HALF,
   CSS.PADDING.X.QUARTER,
   CSS.PADDING.X.TWO,
   CSS.PADDING.X.FOUR,
+  CSS.PADDING.RIGHT.ZERO,
   CSS.PADDING.RIGHT.ONE,
   CSS.PADDING.RIGHT.HALF,
   CSS.PADDING.RIGHT.QUARTER,
   CSS.PADDING.RIGHT.TWO,
   CSS.PADDING.RIGHT.FOUR,
+  CSS.PADDING.BOTTOM.ZERO,
   CSS.PADDING.BOTTOM.ONE,
   CSS.PADDING.BOTTOM.HALF,
   CSS.PADDING.BOTTOM.QUARTER,
   CSS.PADDING.BOTTOM.TWO,
   CSS.PADDING.BOTTOM.FOUR,
+  CSS.PADDING.LEFT.ZERO,
   CSS.PADDING.LEFT.ONE,
   CSS.PADDING.LEFT.HALF,
   CSS.PADDING.LEFT.QUARTER,