tide-design-system 2.2.15 → 2.2.16

package/dist/utilities/storybook.ts

@@ -103,12 +103,21 @@ export const disabledArgType = {
 
 export const isProduction = process.env.NODE_ENV === 'production';
 
-export const doSomething = () => {
-  alert('Did something.');
+export const doSomething = (message: string = 'Did something.') => {
+  const doSomethingAlert = document.getElementById('do-something-alert');
+
+  if (!doSomethingAlert) return;
+
+  doSomethingAlert.innerHTML = message;
+  doSomethingAlert.style.opacity = '1';
+
+  setTimeout(() => {
+    doSomethingAlert.style.opacity = '0';
+  }, 1000);
 };
 
 export const doSomethingElse = () => {
-  alert('Did something else.');
+  doSomething('Did something else.');
 };
 
 // Flatten a nested constant into a simple constant.

package/index.ts

@@ -32,7 +32,7 @@ import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideSheet from '@/components/TideSheet.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
 import { ALERT } from '@/types/Alert';
-import { BADGE_TRUSTED } from '@/types/Badge';
+import { BADGE_COLOR, BADGE_COLOR_DETAILS, BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
 import { TYPE_CARD } from '@/types/Card';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
@@ -161,6 +161,8 @@ export type {
 
 export {
   ALERT,
+  BADGE_COLOR,
+  BADGE_COLOR_DETAILS,
   BADGE_TRUSTED,
   BREAKPOINT,
   CSS,

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.2.15",
+  "version": "2.2.16",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/reset.css

@@ -78,7 +78,7 @@ button:disabled {
 
 /* cross-browser normalization */
 input::placeholder {
-  color: var(--tide-gray); /* TODO: replace with an accessible light text color from design system */
+  color: var(--tide-gray-700);
   opacity: 1;
 }
 

package/src/assets/css/utilities-lg.css

@@ -411,9 +411,13 @@
 	.lg-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.lg-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.lg-tide-text-center {text-align: center;}
-	.lg-tide-text-left   {text-align: left;}
-	.lg-tide-text-right  {text-align: right;}
+	.lg-tide-strikethrough      {text-decoration: line-through;}
+	.lg-tide-strikethrough-none {text-decoration: none;}
+
+	.lg-tide-text-center  {text-align: center;}
+	.lg-tide-text-justify {text-align: justify;}
+	.lg-tide-text-left    {text-align: left;}
+	.lg-tide-text-right   {text-align: right;}
 
 	.lg-tide-text-transform-lower {text-transform: lowercase;}
 	.lg-tide-text-transform-none  {text-transform: none;}

package/src/assets/css/utilities-md.css

@@ -411,9 +411,13 @@
 	.md-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.md-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.md-tide-text-center {text-align: center;}
-	.md-tide-text-left   {text-align: left;}
-	.md-tide-text-right  {text-align: right;}
+	.md-tide-strikethrough      {text-decoration: line-through;}
+	.md-tide-strikethrough-none {text-decoration: none;}
+
+	.md-tide-text-center  {text-align: center;}
+	.md-tide-text-justify {text-align: justify;}
+	.md-tide-text-left    {text-align: left;}
+	.md-tide-text-right   {text-align: right;}
 
 	.md-tide-text-transform-lower {text-transform: lowercase;}
 	.md-tide-text-transform-none  {text-transform: none;}

package/src/assets/css/utilities-sm.css

@@ -411,9 +411,13 @@
 	.sm-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.sm-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.sm-tide-text-center {text-align: center;}
-	.sm-tide-text-left   {text-align: left;}
-	.sm-tide-text-right  {text-align: right;}
+	.sm-tide-strikethrough      {text-decoration: line-through;}
+	.sm-tide-strikethrough-none {text-decoration: none;}
+
+	.sm-tide-text-center  {text-align: center;}
+	.sm-tide-text-justify {text-align: justify;}
+	.sm-tide-text-left    {text-align: left;}
+	.sm-tide-text-right   {text-align: right;}
 
 	.sm-tide-text-transform-lower {text-transform: lowercase;}
 	.sm-tide-text-transform-none  {text-transform: none;}

package/src/assets/css/utilities-xl.css

@@ -411,9 +411,13 @@
 	.xl-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 	.xl-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-	.xl-tide-text-center {text-align: center;}
-	.xl-tide-text-left   {text-align: left;}
-	.xl-tide-text-right  {text-align: right;}
+	.xl-tide-strikethrough      {text-decoration: line-through;}
+	.xl-tide-strikethrough-none {text-decoration: none;}
+
+	.xl-tide-text-center  {text-align: center;}
+	.xl-tide-text-justify {text-align: justify;}
+	.xl-tide-text-left    {text-align: left;}
+	.xl-tide-text-right   {text-align: right;}
 
 	.xl-tide-text-transform-lower {text-transform: lowercase;}
 	.xl-tide-text-transform-none  {text-transform: none;}

package/src/assets/css/utilities.css

@@ -410,9 +410,13 @@
 .tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
 .tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
-.tide-text-center {text-align: center;}
-.tide-text-left   {text-align: left;}
-.tide-text-right  {text-align: right;}
+.tide-strikethrough      {text-decoration: line-through;}
+.tide-strikethrough-none {text-decoration: none;}
+
+.tide-text-center  {text-align: center;}
+.tide-text-justify {text-align: justify;}
+.tide-text-left    {text-align: left;}
+.tide-text-right   {text-align: right;}
 
 .tide-text-transform-lower {text-transform: lowercase;}
 .tide-text-transform-none  {text-transform: none;}

package/src/assets/css/variables.css

@@ -53,7 +53,7 @@
   --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
 
   /* Blur */
-  --tide-bg-blur: var(--tide-bg-blur);
+  --tide-bg-blur: 8px;
 
   /* Global tonal palette */
   --tide-gray-100:  #FFFFFF;

package/src/components/TideImage.vue

@@ -79,7 +79,7 @@
 
     <img
       :alt="alt"
-      :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, objectFitClassName]"
+      :class="['tide-image-img', CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, objectFitClassName]"
       :fetchpriority="isLazy ? undefined : 'high'"
       :loading="props.isLazy ? 'lazy' : 'eager'"
       ref="img"
@@ -88,3 +88,9 @@
     />
   </picture>
 </template>
+
+<style scoped>
+  .tide-image-img {
+    border-radius: inherit;
+  }
+</style>

package/src/components/TideInputCheckbox.vue

@@ -9,18 +9,16 @@
 
   type Props = {
     checked?: boolean;
-    dataTrack?: string;
     disabled?: boolean;
     indeterminate?: boolean;
     inputId?: string;
     label: string;
     name: string;
-    number?: number | undefined;
+    number?: number;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     checked: false,
-    dataTrack: '',
     disabled: false,
     indeterminate: false,
     inputId: undefined,
@@ -42,7 +40,6 @@
       CSS.FONT.ROLE.BODY_1,
       disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,
     ]"
-    :data-track="props.dataTrack"
   >
     <input
       :checked="isChecked"
@@ -81,7 +78,8 @@
     <label
       :class="[
         CSS.DISPLAY.FLEX,
-        CSS.GAP.HALF,
+        CSS.AXIS1.BETWEEN,
+        CSS.FLEX.GROW.ON,
         CSS.FONT.ROLE.BODY_1,
         disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
       ]"

package/src/components/TideInputRadio.vue

@@ -2,22 +2,23 @@
   import { ref, watch } from 'vue';
 
   import { CSS } from '@/types/Styles';
+  import { formatNumber } from '@/utilities/format';
 
   type Props = {
     checked?: boolean;
-    dataTrack?: string;
     disabled?: boolean;
     inputId?: string;
     label: string;
     name: string;
+    number?: number;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     checked: false,
-    dataTrack: '',
     disabled: false,
     inputId: undefined,
     label: undefined,
+    number: undefined,
   });
 
   const checked = ref(props.checked);
@@ -46,7 +47,6 @@
     <input
       :checked="checked"
       :class="[CSS.DISPLAY.NONE]"
-      :data-track="props.dataTrack"
       :id="props.inputId"
       name=""
       type="radio"
@@ -73,10 +73,23 @@
     </div>
 
     <label
-      :class="[CSS.FONT.ROLE.BODY_1, CSS.CURSOR.POINTER, CSS.POINTER_EVENTS.ON]"
+      :class="[
+        CSS.DISPLAY.FLEX,
+        CSS.FLEX.GROW.ON,
+        CSS.AXIS1.BETWEEN,
+        CSS.FONT.ROLE.BODY_1,
+        CSS.CURSOR.POINTER,
+        CSS.POINTER_EVENTS.ON,
+      ]"
       :for="props.inputId"
     >
-      {{ props.label }}
+      <span>{{ label }}</span>
+      <span
+        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
+        v-if="props.number"
+      >
+        ({{ formatNumber(props.number) }})
+      </span>
     </label>
   </div>
 </template>

package/src/components/TideInputText.vue

@@ -15,7 +15,6 @@
 
   type Props = {
     autocomplete?: boolean;
-    dataTrack?: string;
     disabled?: boolean;
     error?: ValidationError;
     hasClear?: boolean;
@@ -37,7 +36,6 @@
 
   const props = withDefaults(defineProps<Props>(), {
     autocomplete: false,
-    dataTrack: '',
     disabled: false,
     error: false,
     hasClear: false,
@@ -70,7 +68,7 @@
   );
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
   const isEmpty = computed(() => value.value === '' || value.value === undefined);
-  const type = computed(() =>
+  const inputType = computed(() =>
     props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
   );
 
@@ -145,9 +143,9 @@
       hasError && 'error',
     ]"
   >
-    <div
+    <label
       :class="[
-        'tide-input-border',
+        'tide-input-text-field',
         CSS.DISPLAY.FLEX,
         CSS.AXIS2.CENTER,
         CSS.GAP.HALF,
@@ -156,14 +154,15 @@
         CSS.BG.SURFACE.DEFAULT,
         hasClear ? [CSS.PADDING.RIGHT.HALF, CSS.PADDING.LEFT.ONE] : [CSS.PADDING.X.ONE],
         CSS.PADDING.Y.HALF,
-        props.disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,
+        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,
       ]"
+      :for="inputId"
     >
       <TideIcon
         :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
-        :icon="props.iconLeading"
+        :icon="iconLeading"
         :size="SIZE.SMALL"
-        v-if="props.iconLeading"
+        v-if="iconLeading"
       />
 
       <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]">
@@ -171,48 +170,43 @@
           :class="[
             'tide-input-text-prefix',
             CSS.FONT.ROLE.BODY_1,
-            ,
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
             hasMinilabel ? '' : 'offset',
           ]"
-          v-if="props.prefix"
+          v-if="prefix"
         >
-          {{ props.prefix }}
+          {{ prefix }}
         </div>
 
-        <div
-          :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]"
-          @click.prevent="input?.focus()"
-        >
-          <label
+        <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]">
+          <div
             :class="[
+              'tide-input-text-label',
               hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
               !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
               CSS.CURSOR.TEXT,
               CSS.POINTER_EVENTS.OFF,
             ]"
-            :for="props.inputId"
             v-if="label"
           >
             {{ formattedLabel }}
-          </label>
+          </div>
 
           <input
             :autocomplete="autocomplete ? 'on' : 'off'"
             :class="[CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED, CSS.FONT.ROLE.BODY_1]"
-            :data-track="props.dataTrack"
-            :disabled="props.disabled"
-            :maxlength="props.maxlength"
-            :minlength="props.minlength"
-            :name="props.name"
+            :disabled="disabled"
+            :maxlength="maxlength"
+            :minlength="minlength"
+            :name="name"
             ref="input"
-            :required="props.required"
-            :type="type"
+            :required="required"
+            :type="inputType"
             @change="handleValidation"
             @focus="handleFocus"
             @focusout="handleFocusOut"
             @input="handleInput"
-            :id="props.inputId"
+            :id="inputId"
             v-model="value"
           />
         </div>
@@ -224,32 +218,38 @@
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
             hasMinilabel ? '' : 'offset',
           ]"
-          v-if="props.suffix"
+          v-if="suffix"
         >
-          {{ props.suffix }}
+          {{ suffix }}
         </div>
       </div>
 
-      <TideIcon
-        :class="[CSS.PADDING.Y.HALF, CSS.PADDING.FULL.HALF, CSS.CURSOR.POINTER]"
-        :icon="ICON.CLOSE"
-        :size="SIZE.SMALL"
+      <button
         @click="handleClear"
-        v-if="hasClear && props.type !== TEXT_INPUT_TYPE.PASSWORD"
-      />
-
-      <TideIcon
-        :class="[CSS.PADDING.Y.HALF, CSS.PADDING.FULL.HALF, CSS.CURSOR.POINTER]"
-        :icon="ICON.VISIBILITY"
-        :size="SIZE.SMALL"
+        v-if="hasClear && type !== TEXT_INPUT_TYPE.PASSWORD"
+      >
+        <TideIcon
+          :class="[CSS.MARGIN.FULL.HALF]"
+          :icon="ICON.CLOSE"
+          :size="SIZE.SMALL"
+        />
+      </button>
+
+      <button
         @click="showPassword = !showPassword"
-        v-if="props.type === TEXT_INPUT_TYPE.PASSWORD"
-      />
-    </div>
+        v-if="type === TEXT_INPUT_TYPE.PASSWORD"
+      >
+        <TideIcon
+          :class="[CSS.MARGIN.FULL.HALF]"
+          :icon="ICON.VISIBILITY"
+          :size="SIZE.SMALL"
+        />
+      </button>
+    </label>
 
     <div
       :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
-      v-if="props.supportingText || hasError"
+      v-if="supportingText || hasError"
     >
       <TideIcon
         :class="[]"
@@ -259,19 +259,19 @@
       />
 
       <div :class="[CSS.FONT.ROLE.LABEL_3]">
-        {{ hasError ? errorMessage : props.supportingText }}
+        {{ hasError ? errorMessage : supportingText }}
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-  label {
+  .tide-input-text-label {
     height: 1.1875rem;
     transition: font-size var(--tide-animate), transform var(--tide-animate);
   }
 
-  label:not(.minilabel),
+  .tide-input-text-label:not(.minilabel),
   .tide-input-text-prefix:not(.offset),
   .tide-input-text-suffix:not(.offset) {
     transform: translate(0, calc(9 / 16 * 1rem));
@@ -290,16 +290,16 @@
     color: var(--tide-error-primary);
   }
 
-  .tide-input-text.error .tide-input-border {
+  .tide-input-text.error .tide-input-text-field {
     outline-color: var(--tide-error-border);
     background-color: var(--tide-error-surface);
   }
 
-  .tide-input-text.error:focus-within .tide-input-border {
+  .tide-input-text.error:focus-within .tide-input-text-field {
     outline-color: var(--tide-error-border);
   }
 
-  .tide-input-text:focus-within .tide-input-border {
+  .tide-input-text:focus-within .tide-input-text-field {
     --tide-input-outline-width: var(--tide-border-width-2);
     outline-color: var(--tide-surface-border-high);
   }
@@ -308,7 +308,7 @@
     outline: none;
   }
 
-  .tide-input-border {
+  .tide-input-text-field {
     --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);

package/src/components/TideInputTextarea.vue

@@ -10,7 +10,6 @@
   import type { ValidationError } from '@/types/Validation';
 
   type Props = {
-    dataTrack?: string;
     error?: ValidationError;
     inputId?: string;
     label?: string;
@@ -24,7 +23,6 @@
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    dataTrack: '',
     error: false,
     inputId: undefined,
     label: undefined,
@@ -93,7 +91,7 @@
   <div
     :class="['tide-input-textarea', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, hasError && 'error']"
   >
-    <div
+    <label
       :class="[
         'tide-input-textarea-field',
         CSS.GAP.HALF,
@@ -103,42 +101,41 @@
         CSS.PADDING.TOP.HALF,
         CSS.OVERFLOW.XY.HIDDEN,
         CSS.BG.SURFACE.DEFAULT,
+        CSS.CURSOR.TEXT,
       ]"
+      :for="inputId"
     >
-      <label
+      <div
         :class="[
+          'tide-input-textarea-label',
           hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
           !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
-          CSS.CURSOR.TEXT,
           CSS.POINTER_EVENTS.OFF,
         ]"
-        :for="props.inputId"
-        ref="label"
         v-if="label"
       >
         {{ formattedLabel }}
-      </label>
+      </div>
 
       <textarea
-        :class="[CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1]"
-        :data-track="props.dataTrack"
-        :maxlength="props.maxlength"
-        :minlength="props.minlength"
-        :name="props.name"
+        :class="[CSS.DISPLAY.BLOCK, CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1]"
+        :maxlength="maxlength"
+        :minlength="minlength"
+        :name="name"
         ref="input"
-        :required="props.required"
-        :rows="props.rows"
+        :required="required"
+        :rows="rows"
         @change="handleValidation"
         @focus="handleFocus"
         @focusout="handleFocusOut"
-        :id="props.inputId"
+        :id="inputId"
         v-model="value"
       />
-    </div>
+    </label>
 
     <div
       :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
-      v-if="props.supportingText || hasError"
+      v-if="supportingText || hasError"
     >
       <TideIcon
         :icon="ICON.ERROR"
@@ -147,7 +144,7 @@
       />
 
       <div :class="[CSS.FONT.ROLE.LABEL_3]">
-        {{ hasError ? errorMessage : props.supportingText }}
+        {{ hasError ? errorMessage : supportingText }}
       </div>
     </div>
   </div>
@@ -157,10 +154,8 @@
   textarea {
     resize: vertical;
   }
-</style>
 
-<style scoped>
-  label {
+  .tide-input-textarea-label {
     height: 1.1875rem;
     transition: font-size var(--tide-animate), transform var(--tide-animate);
   }

package/src/components/TidePopover.vue

@@ -35,8 +35,9 @@
   const handlePermanentOpenBodyClick = (e: MouseEvent) => {
     if (!anchor.value || !floating.value) return;
     if (isClickOutside(e, [anchor.value, floating.value])) {
-      e.stopImmediatePropagation();
       isToggledOpen.value = false;
+      e.preventDefault();
+      e.stopImmediatePropagation();
     }
   };
 
@@ -49,9 +50,13 @@
   };
 
   const handleAnchorElementClick = (e: MouseEvent) => {
-    isToggledOpen.value = true;
-    e.stopPropagation();
     e.preventDefault();
+    if (isToggledOpen.value) {
+      isToggledOpen.value = false;
+      isHovered.value = false;
+    } else {
+      isToggledOpen.value = true;
+    }
   };
 
   const addListenersToAnchorElement = () => {

package/src/contexts/sandbox/AppSandbox.vue

@@ -1,4 +1,6 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import {} from '../../../index';
+</script>
 
 <template>
   <div />

package/src/stories/TideInputRadio.stories.ts

@@ -64,6 +64,14 @@ export default {
         type: { summary: 'string' },
       },
     },
+    number: {
+      control: 'text',
+      description: 'Parenthetical response count',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
   },
   args: {
     checked: undefined,
@@ -73,6 +81,7 @@ export default {
     inputId: '',
     label: 'Input label',
     name: '',
+    number: '',
   },
   component: TideInputRadio,
   parameters,