tide-design-system 2.1.4 → 2.1.6

package/dist/utilities/storybook.ts

@@ -5,6 +5,8 @@ import { formatKebabCase } from '@/utilities/format';
 
 import type { ArgTypes, StoryContext } from '@storybook/vue3';
 
+type KeyString = { [key: string]: string };
+
 // Extensible object of key/value pairs
 type KeyValue = { [key: string]: any };
 
@@ -13,6 +15,10 @@ type KeyValueNamed = {
   [key: string]: KeyValue;
 };
 
+type Nested = {
+  [key: string]: string | Nested;
+};
+
 export const lineBreak = '\r';
 export const tab = '  ';
 
@@ -89,6 +95,25 @@ export const doSomething = () => {
   alert('Did something.');
 };
 
+// Flatten a nested constant into a simple constant.
+export const flatten = (input: Nested): KeyString => {
+  const output: KeyString = {};
+
+  Object.entries(input).forEach(([key, value]) => {
+    if (typeof value === 'string') {
+      output[key] = value;
+    } else {
+      const flattened = flatten(value);
+
+      Object.entries(flattened).forEach(([key2, value2]) => {
+        output[`${key}.${key2}`] = value2;
+      });
+    }
+  });
+
+  return output;
+};
+
 // Accept a KeyValue as the value of an object with a retrievable key as a Storybook argType.
 export const formatArgType = (collection: KeyValueNamed) => {
   const constant = getKey(collection);

package/dist/utilities/validation.ts

@@ -114,14 +114,14 @@ export const handleFieldValidation = ({
   minlength?: number;
   required?: boolean;
   validators?: Validator[];
-  value: Ref<string>;
+  value?: Ref<string | undefined>;
 }) => {
   // error in props takes precedence over validation error
 
   error.value = errorFromProps ? errorFromProps : false;
 
   if (!error.value && validators) {
-    const validation = validateProperty(value.value, validators);
+    const validation = validateProperty(value?.value || '', validators);
 
     if (!validation.valid) {
       error.value = validation.message;
@@ -133,7 +133,7 @@ export const handleFieldValidation = ({
       maxlength,
       minlength,
       required,
-      value: value.value,
+      value: value?.value || '',
     });
 
     if (!lengthValidation.valid) {

package/package.json

@@ -48,10 +48,10 @@
     "build-vite": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/utilities/ dist/utilities/",
     "coverage": "vitest run --coverage",
     "dev": "vite",
-    "enforce": "npm run lint && npm run type-check",
+    "enforce": "npm run lint && npm run type-check && npm run test",
     "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
-    "precommit": "npm run lint:fix && npm run type-check",
+    "precommit": "npm run lint:fix && npm run type-check && npm run test",
     "preview": "npm run build-storybook && npx http-server -a localhost storybook-static/",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
@@ -61,5 +61,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.1.4"
+  "version": "2.1.6"
 }

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

@@ -9,16 +9,6 @@
 .tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
 .tide-bg-surface-floating       {background: var(--tide-surface-floating);}
 
-.tide-bg-surface-error   {background-color: var(--tide-error-surface);}
-.tide-bg-surface-info    {background-color: var(--tide-info-surface);}
-.tide-bg-surface-success {background-color: var(--tide-success-surface);}
-.tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
-
-.tide-bg-error   {background-color: var(--tide-error-primary);}
-.tide-bg-info    {background-color: var(--tide-info-primary);}
-.tide-bg-success {background-color: var(--tide-success-primary);}
-.tide-bg-warning {background-color: var(--tide-warning-primary);}
-
 /* Border */
 .tide-border-primary   {border-color: var(--tide-primary);}
 

package/src/assets/css/fonts.css

@@ -0,0 +1,36 @@
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/assets/css/main.css

@@ -1,3 +1,4 @@
+@import './fonts.css';
 @import './reset.css';
 @import './variables.css';
 @import './utilities.css';

package/src/assets/css/utilities.css

@@ -117,9 +117,15 @@
 .tide-margin-left-4    {margin-left: var(--tide-spacing-4);}
 .tide-margin-left-auto {margin-left: auto;}
 
-/* Border */
+/* Border Color */
 .tide-border-color-initial {border-color: initial;}
 
+.tide-border-error   {border-color: var(--tide-error-border);}
+.tide-border-info    {border-color: var(--tide-info-border);}
+.tide-border-success {border-color: var(--tide-success-border);}
+.tide-border-warning {border-color: var(--tide-warning-border);}
+
+/* Border Width */
 .tide-border-1,
 .tide-border-2,
 .tide-border-bottom-1,
@@ -225,9 +231,19 @@
 .tide-height-0    {height: 0;}
 .tide-height-full {height: 100%;}
 
-/* Backgrounds */
+/* Background */
 .tide-bg-initial {background-color: initial;}
 
+.tide-bg-primary-error   {background-color: var(--tide-error-primary);}
+.tide-bg-primary-info    {background-color: var(--tide-info-primary);}
+.tide-bg-primary-success {background-color: var(--tide-success-primary);}
+.tide-bg-primary-warning {background-color: var(--tide-warning-primary);}
+
+.tide-bg-surface-error   {background-color: var(--tide-error-surface);}
+.tide-bg-surface-info    {background-color: var(--tide-info-surface);}
+.tide-bg-surface-success {background-color: var(--tide-success-surface);}
+.tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
+
 .tide-transparent-100 {background-color: var(--tide-transparent-100);}
 .tide-transparent-200 {background-color: var(--tide-transparent-200);}
 .tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -253,6 +269,12 @@
 .tide-typography-button-1         {font-size: var(--tide-font-16); font-weight: 600;}
 .tide-typography-button-2         {font-size: var(--tide-font-14); font-weight: 600;}
 
+/* Font Color */
+.tide-font-error   {color: var(--tide-error-primary);}
+.tide-font-info    {color: var(--tide-info-primary);}
+.tide-font-success {color: var(--tide-success-primary);}
+.tide-font-warning {color: var(--tide-warning-primary);}
+
 /* Font Size */
 .tide-font-10 {font-size: var(--tide-font-10);}
 .tide-font-12 {font-size: var(--tide-font-12);}
@@ -485,7 +507,7 @@
 
   /* Border */
   .sm-tide-border-color-initial {border-color: initial;}
-  
+
   .sm-tide-border-1,
   .sm-tide-border-2,
   .sm-tide-border-bottom-1,
@@ -852,7 +874,7 @@
 
   /* Border */
   .md-tide-border-color-initial {border-color: initial;}
-  
+
   .md-tide-border-1,
   .md-tide-border-2,
   .md-tide-border-bottom-1,
@@ -1219,7 +1241,7 @@
 
   /* Border */
   .lg-tide-border-color-initial {border-color: initial;}
-  
+
   .lg-tide-border-1,
   .lg-tide-border-2,
   .lg-tide-border-bottom-1,
@@ -1586,7 +1608,7 @@
 
   /* Border */
   .xl-tide-border-color-initial {border-color: initial;}
-  
+
   .xl-tide-border-1,
   .xl-tide-border-2,
   .xl-tide-border-bottom-1,

package/src/assets/css/variables.css

@@ -85,31 +85,21 @@
   --tide-yellow-400:  #FACA33;
 
   /* Global color roles */
-  --tide-error-primary:        var(--tide-red-400);
-  --tide-error-primary-border: var(--tide-red-300);
-  --tide-error-surface:        var(--tide-red-100);
+  --tide-error-primary: var(--tide-red-400);
+  --tide-error-surface: var(--tide-red-100);
+  --tide-error-border:  var(--tide-red-400);
 
-  --tide-error-border:      var(--tide-red-400);
-  --tide-error-border-low:  var(--tide-red-200);
-  --tide-error-border-high: var(--tide-red-500);
+  --tide-info-primary: var(--tide-blue-400);
+  --tide-info-surface: var(--tide-blue-100);
+  --tide-info-border:  var(--tide-blue-400);
 
-  --tide-error-on-surface:         var(--tide-red-400);
-  --tide-error-on-surface-variant: var(--tide-red-500 );
+  --tide-success-primary: var(--tide-green-400);
+  --tide-success-surface: var(--tide-green-100);
+  --tide-success-border:  var(--tide-green-400);
 
-  --tide-info-primary:        var(--tide-blue-400);
-  --tide-info-primary-border: var(--tide-blue-300);
-  --tide-info-surface:        var(--tide-blue-100);
-  --tide-info-border:         var(--tide-blue-200);
-
-  --tide-success-primary:        var(--tide-green-400);
-  --tide-success-primary-border: var(--tide-green-300);
-  --tide-success-surface:        var(--tide-green-100);
-  --tide-success-border:         var(--tide-green-200);
-
-  --tide-warning-primary:        var(--tide-yellow-400);
-  --tide-warning-primary-border: var(--tide-yellow-300);
-  --tide-warning-surface:        var(--tide-yellow-100);
-  --tide-warning-border:         var(--tide-yellow-200);
+  --tide-warning-primary: var(--tide-yellow-400);
+  --tide-warning-surface: var(--tide-yellow-100);
+  --tide-warning-border:  var(--tide-yellow-400);
 
   /* Global color roles (defined in realm tonal palettes in Figma) */
   --tide-secondary:    var(--tide-gray-900);
@@ -118,7 +108,7 @@
   --tide-surface:          var(--tide-gray-100);
   --tide-surface-variant:  var(--tide-gray-200);
   --tide-surface-floating: var(--tide-transparent-100);
-  
+
   --tide-on-surface:                 var(--tide-gray-900);
   --tide-on-surface-variant:         var(--tide-gray-700);
   --tide-on-surface-inverse:         var(--tide-gray-100);

package/src/components/TideAlert.vue

@@ -55,10 +55,10 @@
       CSS.AXIS2.CENTER,
       CSS.BORDER.RADIUS.HALF,
       CSS.PADDING.FULL.ONE,
-      props.type === ALERT.ERROR && CSS.BG.SURFACE.ERROR,
-      props.type === ALERT.INFO && CSS.BG.SURFACE.INFO,
-      props.type === ALERT.SUCCESS && CSS.BG.SURFACE.SUCCESS,
-      props.type === ALERT.WARNING && CSS.BG.SURFACE.WARNING,
+      props.type === ALERT.ERROR && CSS.BG.GLOBAL.SURFACE.ERROR,
+      props.type === ALERT.INFO && CSS.BG.GLOBAL.SURFACE.INFO,
+      props.type === ALERT.SUCCESS && CSS.BG.GLOBAL.SURFACE.SUCCESS,
+      props.type === ALERT.WARNING && CSS.BG.GLOBAL.SURFACE.WARNING,
       props.isToast ? CSS.SHADOW.BOTTOM : '',
     ]"
   >
@@ -68,10 +68,10 @@
         CSS.PADDING.FULL.HALF,
         CSS.BORDER.RADIUS.FULL,
         CSS.FONT.COLOR.SURFACE.INVERSE,
-        props.type === ALERT.ERROR && CSS.BG.ERROR,
-        props.type === ALERT.INFO && CSS.BG.INFO,
-        props.type === ALERT.SUCCESS && CSS.BG.SUCCESS,
-        props.type === ALERT.WARNING && CSS.BG.WARNING,
+        props.type === ALERT.ERROR && CSS.BG.GLOBAL.PRIMARY.ERROR,
+        props.type === ALERT.INFO && CSS.BG.GLOBAL.PRIMARY.INFO,
+        props.type === ALERT.SUCCESS && CSS.BG.GLOBAL.PRIMARY.SUCCESS,
+        props.type === ALERT.WARNING && CSS.BG.GLOBAL.PRIMARY.WARNING,
       ]"
     >
       <TideIcon :icon="icon" />

package/src/components/TideImage.vue

@@ -23,26 +23,27 @@
     width: undefined,
   });
 
-  const tideImage = ref();
+  const picture = ref();
+  const img = ref();
+
   const imageDefault = 'https://cdn-static-rec.tilabs.io/image-coming-soon-512.png';
 
   const setImageFromDefault = () => {
-    const src = tideImage.value.currentSrc;
-    const currentSource = tideImage.value.parentElement.querySelector(`source[srcset="${src}"]`);
+    const currentSrc = img.value?.currentSrc;
+    const pictureSource = picture.value?.querySelector(`source[srcset="${currentSrc}"]`);
 
-    if (currentSource) {
-      currentSource.srcset = imageDefault;
-    } else {
-      tideImage.value.src = imageDefault;
+    if (currentSrc && pictureSource) {
+      pictureSource.srcset = imageDefault;
+    } else if (img.value) {
+      img.value.src = imageDefault;
     }
   };
-
-  defineExpose(tideImage.value);
 </script>
 
 <template>
   <picture
     :class="['tide-image', CSS.DISPLAY.BLOCK]"
+    ref="picture"
     :style="
       width || height
         ? {
@@ -64,11 +65,9 @@
       :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
       :fetchpriority="isLazy ? undefined : 'high'"
       :loading="props.isLazy ? 'lazy' : 'eager'"
-      ref="tideImage"
+      ref="img"
       :src="src ?? imageDefault"
       @error="setImageFromDefault"
     />
   </picture>
 </template>
-
-<style scoped></style>

package/src/components/TideInputSelect.vue

@@ -81,6 +81,7 @@
         CSS.AXIS2.CENTER,
         CSS.GAP.HALF,
         CSS.BORDER.RADIUS.HALF,
+        CSS.BG.SURFACE.DEFAULT,
         props.disabled ? CSS.CURSOR.NOT_ALLOWED : '',
         CSS.OVERFLOW.XY.HIDDEN,
       ]"
@@ -96,6 +97,7 @@
             CSS.MARGIN.LEFT.ONE,
             !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
             CSS.FONT.WEIGHT.FIVE_HUNDRED,
+            CSS.POINTER_EVENTS.OFF,
           ]"
           :for="props.inputId"
           v-if="label"
@@ -218,7 +220,7 @@
   }
 
   .tide-input-select.error {
-    color: var(--tide-error-on-surface);
+    color: var(--tide-error-primary);
   }
 
   .tide-input-select.error option {

package/src/components/TideInputText.vue

@@ -53,7 +53,7 @@
     transformValue: undefined,
     type: TEXT_INPUT_TYPE.TEXT,
     validators: undefined,
-    value: '',
+    value: undefined,
   });
 
   const error = ref(props.error);
@@ -65,9 +65,11 @@
   const errorMessage = computed(() => getErrorMessage(props.error, error.value));
   const formattedLabel = computed(() => (props.required && props.label ? `${props.label} *` : props.label));
   const hasClear = computed(() => props.hasClear && value.value);
-  const hasError = computed(() => (props.required && !value.value) || getFieldHasError(error.value, props.error));
+  const hasError = computed(
+    () => (props.required && value.value !== undefined && !value.value) || getFieldHasError(error.value, props.error)
+  );
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
-  const isEmpty = computed(() => value.value === '');
+  const isEmpty = computed(() => value.value === '' || value.value === undefined);
   const type = computed(() =>
     props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
   );
@@ -83,12 +85,17 @@
 
   const handleFocusOut = () => {
     hasFocus.value = false;
+
+    if (!value.value) {
+      value.value = '';
+    }
+
     handleValidation();
   };
 
   const handleInput = () => {
     if (props.transformValue) {
-      const digits = value.value.match(/\d/g)?.join('') || undefined;
+      const digits = value.value?.match(/\d/g)?.join('') || undefined;
 
       value.value = digits ? props.transformValue(digits) : '';
     }
@@ -141,6 +148,7 @@
         CSS.GAP.HALF,
         CSS.POSITION.RELATIVE,
         CSS.BORDER.RADIUS.HALF,
+        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,
@@ -170,6 +178,7 @@
               !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
               CSS.FONT.WEIGHT.FIVE_HUNDRED,
               CSS.CURSOR.TEXT,
+              CSS.POINTER_EVENTS.OFF,
             ]"
             :for="props.inputId"
             v-if="label"
@@ -262,7 +271,7 @@
   }
 
   .tide-input-text.error {
-    color: var(--tide-error-on-surface);
+    color: var(--tide-error-primary);
   }
 
   .tide-input-text.error .tide-input-border {

package/src/components/TideInputTextarea.vue

@@ -91,6 +91,7 @@
         CSS.PADDING.LEFT.ONE,
         CSS.PADDING.TOP.HALF,
         CSS.OVERFLOW.XY.HIDDEN,
+        CSS.BG.SURFACE.DEFAULT,
       ]"
     >
       <label
@@ -99,6 +100,7 @@
           !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
           CSS.FONT.WEIGHT.FIVE_HUNDRED,
           CSS.CURSOR.TEXT,
+          CSS.POINTER_EVENTS.OFF,
         ]"
         :for="props.inputId"
         ref="label"
@@ -165,7 +167,7 @@
   }
 
   .tide-input-textarea.error {
-    color: var(--tide-error-on-surface);
+    color: var(--tide-error-primary);
   }
 
   .tide-input-textarea.error .tide-input-textarea-field {

package/src/stories/FoundationsColor.stories.ts

@@ -0,0 +1,156 @@
+import { CSS } from '@/types/Styles';
+import { flatten, formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+import type { StoryContext } from '@storybook/vue3';
+
+const COLOR_BACKGROUND = prependNoneAsEmpty(flatten(CSS.BG));
+const COLOR_BORDER = prependNoneAsEmpty(flatten(CSS.BORDER.COLOR));
+const COLOR_FONT = prependNoneAsEmpty(flatten(CSS.FONT.COLOR));
+
+const formatArgs = (args: any) => {
+  args.class = formatClassNames(args).join(' ');
+
+  return { args };
+};
+
+const formatClassNames = (args: any) => {
+  const classNames = [];
+
+  if (args.backgroundColor) classNames.push(args.backgroundColor);
+  if (args.borderColor) classNames.push(...['tide-border-1', args.borderColor]);
+  if (args.fontColor) classNames.push(args.fontColor);
+
+  return classNames;
+};
+
+const formatClassNamesSnippet = (args: any) => {
+  const classNames = formatClassNames(args);
+
+  return getConstantsByValues(classNames);
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+  const classNames = formatClassNamesSnippet(args);
+
+  return classNames.length ? `<div :class="[${classNames.join(', ')}]">Demo</div>` : '<div>Demo</div>';
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: false,
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  setup() {
+    return formatArgs(args);
+  },
+  template: '<div class="tide-display-inline-block tide-padding-1" v-bind="args">Demo</div>',
+  updated() {
+    return formatArgs(args);
+  },
+});
+
+export default {
+  argTypes: {
+    backgroundColor: {
+      ...formatArgType({ COLOR_BACKGROUND }),
+      description: 'Applies a background color',
+      name: 'Background Color',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.BG' },
+      },
+    },
+    borderColor: {
+      ...formatArgType({ COLOR_BORDER }),
+      description: 'Applies a border color',
+      name: 'Border Color',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.BORDER.COLOR' },
+      },
+    },
+    fontColor: {
+      ...formatArgType({ COLOR_FONT }),
+      description: 'Applies a font color',
+      name: 'Font Color',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.FONT.COLOR' },
+      },
+    },
+  },
+  args: {
+    backgroundColor: COLOR_BACKGROUND.None,
+    borderColor: COLOR_BORDER.None,
+    fontColor: COLOR_FONT.None,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Foundations/Color',
+};
+
+export const Default = {};
+
+export const SurfaceAccent = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['SURFACE.ACCENT'],
+    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
+  },
+};
+
+export const SurfaceBrand = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['SURFACE.BRAND'],
+    fontColor: COLOR_FONT['SURFACE.INVERSE'],
+  },
+};
+
+export const SurfaceGradient = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['SURFACE.GRADIENT'],
+    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
+  },
+};
+
+export const SurfaceVariant = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['SURFACE.VARIANT'],
+    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
+  },
+};
+
+export const GlobalSurfaceError = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.ERROR'],
+    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
+  },
+};
+
+export const GlobalSurfaceInfo = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.INFO'],
+    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
+  },
+};
+
+export const GlobalSurfaceSuccess = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.SUCCESS'],
+    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
+  },
+};
+
+export const GlobalSurfaceWarning = {
+  args: {
+    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.WARNING'],
+    fontColor: COLOR_FONT['SURFACE.DEFAULT'],
+  },
+};

package/src/stories/TideInputSelect.stories.ts

@@ -135,6 +135,14 @@ export default {
         type: { summary: 'string' },
       },
     },
+    name: {
+      control: 'text',
+      description: 'Name attribute',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
     optgroups: {
       ...formatArgType({ selectOptionGroups }),
       control: 'object',