tide-design-system 2.0.47 → 2.0.49

package/dist/utilities/storybook.ts

@@ -1,6 +1,6 @@
-import type { ArgTypes } from '@storybook/vue3';
+import type { ArgTypes, StoryContext } from '@storybook/vue3';
 
-import { BOOLEAN, BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 
@@ -12,10 +12,7 @@ type KeyValueNamed = {
   [key: string]: KeyValue;
 };
 
-import type { StoryContext } from '@storybook/vue3';
-
 import { formatKebabCase } from '@/utilities/format';
-import { NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 
 export const lineBreak = '\r';
 export const tab = '  ';

package/index.ts

@@ -48,8 +48,8 @@ import type {
   SelectField,
   StringField,
   StringValue,
-  TextField,
   TextareaField,
+  TextField,
 } from '@/types/Field';
 import type {
   BooleanInput,
@@ -58,8 +58,8 @@ import type {
   Input,
   SelectInput,
   StringInput,
-  TextInput,
   TextareaInput,
+  TextInput,
 } from '@/types/Form';
 import type { Formatted } from '@/types/Formatted';
 import type { Icon } from '@/types/Icon';
@@ -71,12 +71,12 @@ import type { Raw } from '@/types/Raw';
 import type { Realm } from '@/types/Realm';
 import type { RealmConfig } from '@/types/RealmConfig';
 import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-import type { Size } from '@/types/Size';
+import type { Size, SizeButton } from '@/types/Size';
 import type { CssUtility } from '@/types/Styles';
 import type { Tab } from '@/types/Tab';
 import type { Target } from '@/types/Target';
 import type { TextInputType } from '@/types/TextInput';
-import type { ValidationError, ValidationResult, ValidationLength, Validator } from '@/types/Validation';
+import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
 
 import { ALERT } from '@/types/Alert';
 import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
@@ -90,7 +90,7 @@ import { ORIENTATION } from '@/types/Orientation';
 import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
 import { PRIORITY } from '@/types/Priority';
 import { REALM } from '@/types/Realm';
-import { SIZE } from '@/types/Size';
+import { SIZE, SIZE_BUTTON } from '@/types/Size';
 import { TARGET } from '@/types/Target';
 import { TEXT_INPUT_TYPE } from '@/types/TextInput';
 import { VALIDATOR } from '@/types/Validation';
@@ -139,6 +139,7 @@ export type {
   SelectOptionGroup,
   SelectOption,
   Size,
+  SizeButton,
   StringField,
   StringInput,
   StringValue,
@@ -177,6 +178,7 @@ export {
   PRIORITY,
   REALM,
   SIZE,
+  SIZE_BUTTON,
   TARGET,
   TEXT_INPUT_TYPE,
   TYPE_CARD,

package/package.json

@@ -18,6 +18,8 @@
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.0.0-rc.18",
     "@vue/tsconfig": "^0.4.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.9.0",
     "happy-dom": "^15.10.2",
@@ -38,7 +40,7 @@
   "name": "tide-design-system",
   "scripts": {
     "build": "npm run enforce && npm run build-vite",
-    "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/css/realm/ storybook-static/public/",
+    "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/ storybook-static/",
     "build-vite": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/utilities/ dist/utilities/",
     "coverage": "vitest run --coverage",
     "dev": "vite",
@@ -55,5 +57,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.47"
+  "version": "2.0.49"
 }

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

@@ -1,15 +1,3 @@
-.tide-link-as-button,
-.tide-button {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.tide-link-as-button.tide-button-quaternary,
-.tide-button.tide-button-quaternary {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
 /* Rest State */
 .tide-button-primary {
   background: var(--tide-primary);

package/src/assets/css/reset.css

@@ -1,6 +1,7 @@
-html,
 body {
   color: var(--tide-on-surface);
+  font-weight: 500;
+  line-height: 1.4;
 }
 
 *,
@@ -12,9 +13,12 @@ body {
   padding: 0;
   color: inherit;
   font-family: Montserrat;
-  font-weight: 400;
+  font-weight: inherit;
+  line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-underline-offset: .2em;
+  text-decoration-skip-ink: none;
 }
 
 h1 {font-size: var(--tide-font-32);} /* 32px */
@@ -42,7 +46,6 @@ img {
 
 p {
   max-width: 80ch;
-  line-height: 150%;
 }
 
 button,

package/src/assets/css/utilities.css

@@ -83,6 +83,7 @@
 .tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 .tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 .tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
+.tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
 
 .tide-margin-top-0    {margin-top: 0;}
 .tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -90,6 +91,7 @@
 .tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 .tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 .tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+.tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
 
 .tide-margin-right-0    {margin-right: 0;}
 .tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -105,8 +107,10 @@
 .tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 .tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 .tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+.tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
 
 .tide-margin-left-0    {margin-left: 0;}
+.tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/2);}
 .tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
 .tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
 .tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -285,7 +289,7 @@
 
 .tide-isolate {isolation: isolate;}
 
-.tide-leading-default {line-height: 100%;}
+.tide-leading-default {line-height: 1.4;}
 .tide-leading-normal  {line-height: normal;}
 
 .tide-list-none {list-style-type: none;}
@@ -453,6 +457,7 @@
   .sm-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .sm-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .sm-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .sm-tide-margin-top-auto {margin-top: auto;}
 
   .sm-tide-margin-right-0    {margin-right: 0;}
   .sm-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -468,8 +473,10 @@
   .sm-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .sm-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .sm-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .sm-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .sm-tide-margin-left-0    {margin-left: 0;}
+  .sm-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .sm-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .sm-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .sm-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -648,7 +655,7 @@
 
   .sm-tide-isolate {isolation: isolate;}
 
-  .sm-tide-leading-default {line-height: 100%;}
+  .sm-tide-leading-default {line-height: 1.4;}
   .sm-tide-leading-normal  {line-height: normal;}
 
   .sm-tide-list-none {list-style-type: none;}
@@ -817,6 +824,7 @@
   .md-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .md-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .md-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .md-tide-margin-top-auto {margin-top: auto;}
 
   .md-tide-margin-right-0    {margin-right: 0;}
   .md-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -832,8 +840,10 @@
   .md-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .md-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .md-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .md-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .md-tide-margin-left-0    {margin-left: 0;}
+  .md-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .md-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .md-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .md-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -1012,7 +1022,7 @@
 
   .md-tide-isolate {isolation: isolate;}
 
-  .md-tide-leading-default {line-height: 100%;}
+  .md-tide-leading-default {line-height: 1.4;}
   .md-tide-leading-normal  {line-height: normal;}
 
   .md-tide-list-none {list-style-type: none;}
@@ -1181,6 +1191,7 @@
   .lg-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .lg-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .lg-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .lg-tide-margin-top-auto {margin-top: auto;}
 
   .lg-tide-margin-right-0    {margin-right: 0;}
   .lg-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -1196,8 +1207,10 @@
   .lg-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .lg-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .lg-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .lg-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .lg-tide-margin-left-0    {margin-left: 0;}
+  .lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .lg-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .lg-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .lg-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -1376,7 +1389,7 @@
 
   .lg-tide-isolate {isolation: isolate;}
 
-  .lg-tide-leading-default {line-height: 100%;}
+  .lg-tide-leading-default {line-height: 1.4;}
   .lg-tide-leading-normal  {line-height: normal;}
 
   .lg-tide-list-none {list-style-type: none;}
@@ -1545,6 +1558,7 @@
   .xl-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
   .xl-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
   .xl-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
+  .xl-tide-margin-top-auto {margin-top: auto;}
 
   .xl-tide-margin-right-0    {margin-right: 0;}
   .xl-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -1560,8 +1574,10 @@
   .xl-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
   .xl-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
   .xl-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
+  .xl-tide-margin-bottom-auto {margin-bottom: auto;}
 
   .xl-tide-margin-left-0    {margin-left: 0;}
+  .xl-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
   .xl-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
   .xl-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
   .xl-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -1740,7 +1756,7 @@
 
   .xl-tide-isolate {isolation: isolate;}
 
-  .xl-tide-leading-default {line-height: 100%;}
+  .xl-tide-leading-default {line-height: 1.4;}
   .xl-tide-leading-normal  {line-height: normal;}
 
   .xl-tide-list-none {list-style-type: none;}

package/src/assets/svg/icons/IconBunkhouse.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M5.95 21a.87.87 0 0 1-.75-.39.94.94 0 0 1-.15-.84L9.5 3.7a.98.98 0 0 1 .35-.51.93.93 0 0 1 .58-.19c.33 0 .59.13.77.39.18.26.23.53.15.83L10.85 6h5.63l.62-2.3a.99.99 0 0 1 .95-.7c.32 0 .57.13.75.39.18.26.23.53.15.83L14.5 20.3a.98.98 0 0 1-.35.51.93.93 0 0 1-.58.19.9.9 0 0 1-.77-.39.95.95 0 0 1-.15-.84l.5-1.77H7.53l-.63 2.3a.99.99 0 0 1-.95.7Zm3.53-10h5.6l.82-3h-5.6l-.82 3ZM8.1 16h5.6l.83-3h-5.6l-.83 3Z" />
+</svg>

package/src/components/TideButton.vue

@@ -7,7 +7,7 @@
   import { CSS } from '@/types/Styles';
   import { ELEMENT } from '@/types/Element';
   import { PRIORITY } from '@/types/Priority';
-  import { SIZE } from '@/types/Size';
+  import { SIZE, SIZE_BUTTON, type SizeButton } from '@/types/Size';
   import { TARGET } from '@/types/Target';
 
   type Props = {
@@ -19,6 +19,7 @@
     isNewTab?: boolean;
     label: string;
     priority?: Priority;
+    size?: SizeButton;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -30,19 +31,23 @@
     isNewTab: false,
     label: undefined,
     priority: PRIORITY.PRIMARY,
+    size: SIZE_BUTTON.LARGE,
   });
 </script>
 
 <template>
   <component
     :class="[
-      props.element === ELEMENT.LINK ? 'tide-link-as-button' : 'tide-button',
+      'tide-button',
       props.priority && `tide-button-${props.priority}`,
       props.element === ELEMENT.LINK ? [CSS.DISPLAY.INLINE_FLEX] : [CSS.DISPLAY.FLEX],
-      [CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.BORDER.RADIUS.HALF],
       props.element === ELEMENT.LINK ? CSS.UNDERLINE.OFF : '',
-      CSS.PADDING.Y.ONE,
-      CSS.PADDING.X.TWO,
+      size === SIZE_BUTTON.SMALL && [CSS.FONT.ROLE.BUTTON_2, CSS.PADDING.X.ONE, CSS.PADDING.Y.HALF],
+      size === SIZE_BUTTON.LARGE && [CSS.FONT.ROLE.BUTTON_1, CSS.PADDING.X.TWO, CSS.PADDING.Y.ONE],
+      CSS.AXIS1.CENTER,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.BORDER.RADIUS.HALF,
       CSS.FONT.WEIGHT.SIX_HUNDRED,
     ]"
     :disabled="props.element === ELEMENT.BUTTON && props.disabled"
@@ -52,7 +57,7 @@
   >
     <TideIcon
       :icon="props.iconLeading"
-      :size="SIZE.LARGE"
+      :size="size === SIZE_BUTTON.LARGE ? SIZE.LARGE : SIZE.SMALL"
       v-if="props.iconLeading"
     />
 
@@ -60,7 +65,7 @@
 
     <TideIcon
       :icon="props.iconTrailing"
-      :size="SIZE.LARGE"
+      :size="size === SIZE_BUTTON.LARGE ? SIZE.LARGE : SIZE.SMALL"
       v-if="props.iconTrailing"
     />
   </component>

package/src/components/TideCard.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-  import { POSITION_CARD_ICON, TYPE_CARD, type CardIconPosition, type CardType } from '@/types/Card';
+  import type { CardIconPosition, CardType } from '@/types/Card';
   import type { Icon } from '@/types/Icon';
+
+  import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
+  import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
   import { SIZE } from '@/types/Size';
-  import TideIcon from '@/components/TideIcon.vue';
 
   type Props = {
     description?: string;
@@ -12,10 +14,12 @@
     iconPosition: CardIconPosition;
     selected?: boolean;
     type: CardType;
+    href?: string;
   };
 
   withDefaults(defineProps<Props>(), {
     description: undefined,
+    href: undefined,
     icon: undefined,
     iconPosition: POSITION_CARD_ICON.LEFT,
     selected: undefined,
@@ -41,16 +45,20 @@
       type !== TYPE_CARD.INFORMATIONAL && 'hoverable',
       type === TYPE_CARD.SELECTABLE && selected && 'selected',
     ]"
-    :is="type === TYPE_CARD.INFORMATIONAL ? 'div' : 'button'"
+    :href="href"
+    :is="href ? 'a' : type === TYPE_CARD.INFORMATIONAL ? 'div' : 'button'"
   >
     <TideIcon
+      :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
       :icon="icon"
       :size="SIZE.SMALL"
       v-if="icon"
     />
 
     <div :class="[CSS.AXIS2.START, CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.HALF]">
-      <div :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">{{ heading }}</div>
+      <div :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+        {{ heading }}
+      </div>
 
       <div
         :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"

package/src/components/TideColumns.vue

@@ -12,7 +12,9 @@
 
 <template>
   <section class="tide-columns">
-    <h2 :class="[CSS.MARGIN.BOTTOM.HALF, CSS.FONT.SIZE.SIXTEEN]">{{ props.heading }}</h2>
+    <h2 :class="[CSS.MARGIN.BOTTOM.HALF, CSS.FONT.SIZE.SIXTEEN]">
+      {{ props.heading }}
+    </h2>
 
     <ul :class="[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.GAP.TWO, CSS.LIST_BULLETS.OFF]">
       <li class="tide-columns-column">

package/src/components/TideIcon.vue

@@ -24,16 +24,18 @@
   watch(
     () => props.icon,
     async () => {
-      const id = props.icon as unknown as string;
-      const [prefix, ...rest] = id.split('-');
-      const name = formatPascalCase(rest.length > 0 ? rest.join('-') : prefix);
+      const id: string = props.icon;
+      const name = formatPascalCase(id);
+      const [prefix] = id.split('-');
       const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
+      const component = defineAsyncComponent(() => {
+        if (realmFolder) {
+          return import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`);
+        }
 
-      const componentPath: string = realmFolder
-        ? `../assets/svg/icons/realm/${realmFolder}/Icon${formatPascalCase(prefix)}${name}.svg`
-        : `../assets/svg/icons/Icon${name}.svg`;
+        return import(`../assets/svg/icons/Icon${name}.svg?component`);
+      });
 
-      const component = defineAsyncComponent(() => import(componentPath));
       innerSVG.value = markRaw(component);
     },
     { immediate: true }
@@ -57,10 +59,12 @@
     width: 1.5rem;
     height: 1.5rem;
   }
+
   .tide-icon.small {
     width: 1.25rem;
     height: 1.25rem;
   }
+
   .tide-icon svg {
     width: 100%;
     height: 100%;

package/src/components/TideInputSelect.vue

@@ -8,7 +8,7 @@
   import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
-  import { getFieldHasError, getErrorMessage } from '@/utilities/validation';
+  import { getErrorMessage, getFieldHasError } from '@/utilities/validation';
 
   interface Props extends SelectField {
     inputId?: string;

package/src/components/TideLink.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-  import { computed } from 'vue';
-
   import type { Element } from '@/types/Element';
   import type { Icon } from '@/types/Icon';
 
@@ -16,6 +14,7 @@
     iconTrailing?: Icon;
     isNewTab?: boolean;
     label: string;
+    typography?: (typeof CSS.FONT.ROLE)['LINK_1' | 'LINK_2' | 'LINK_3'];
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -25,40 +24,29 @@
     iconTrailing: undefined,
     isNewTab: false,
     label: undefined,
+    typography: CSS.FONT.ROLE.LINK_1,
   });
-
-  const hasIcon = computed(() => props.iconLeading || props.iconTrailing);
 </script>
 
 <template>
   <component
-    :class="[
-      props.element === ELEMENT.LINK ? 'tide-button-as-link' : 'tide-link',
-      hasIcon
-        ? [CSS.DISPLAY.INLINE_FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF]
-        : [CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.UNDERLINE.ON],
-    ]"
+    :class="['tide-link', CSS.DISPLAY.INLINE, CSS.UNDERLINE.ON, CSS.ALIGN.X.LEFT, typography]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
     :is="props.element === ELEMENT.LINK ? ELEMENT.LINK : ELEMENT.BUTTON"
   >
     <TideIcon
+      :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.RIGHT.QUARTER]"
       :icon="props.iconLeading"
       v-if="props.iconLeading"
     />
 
-    <div
-      :class="[CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.UNDERLINE.ON]"
-      v-if="hasIcon"
-    >
-      {{ props.label }}
-    </div>
-
-    <template v-else>
+    <span :class="[CSS.ALIGN.Y.MIDDLE]">
       {{ props.label }}
-    </template>
+    </span>
 
     <TideIcon
+      :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.LEFT.QUARTER]"
       :icon="props.iconTrailing"
       v-if="props.iconTrailing"
     />

package/src/stories/FoundationsGap.stories.ts

@@ -1,8 +1,12 @@
 import type { StoryContext } from '@storybook/vue3';
 
 import * as STYLES from '@/types/Storybook';
-import { argTypeBooleanUnrequired } from '@/utilities/storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import {
+  argTypeBooleanUnrequired,
+  formatArgType,
+  getConstantsByValues,
+  prependNoneAsEmpty,
+} from '@/utilities/storybook';
 
 const FLEX_AXIS1 = prependNoneAsEmpty(STYLES.FLEX_AXIS1);
 const FLEX_AXIS2 = prependNoneAsEmpty(STYLES.FLEX_AXIS2);

package/src/stories/TideButton.stories.ts

@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
 import * as STANDARD_ELEMENT from '@/types/Element';
 import * as STANDARD_ICON from '@/types/Icon';
 import * as STANDARD_PRIORITY from '@/types/Priority';
+import * as STANDARD_SIZE_BUTTON from '@/types/Size';
 import TideButton from '@/components/TideButton.vue';
 import {
   argTypeBooleanUnrequired,
@@ -17,6 +18,7 @@ import {
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
+const SIZE_BUTTON = prependNoneAsUndefined(STANDARD_SIZE_BUTTON.SIZE_BUTTON);
 
 const render = (args: any) => ({
   components: { TideButton },
@@ -95,6 +97,13 @@ export default {
         defaultValue: { summary: 'PRIMARY' },
       },
     },
+    size: {
+      ...formatArgType({ SIZE_BUTTON }),
+      description: 'Determines rendered size',
+      table: {
+        defaultValue: { summary: 'LARGE' },
+      },
+    },
   },
   args: {
     click: 'doSomething',
@@ -107,6 +116,7 @@ export default {
     isNewTab: undefined,
     label: 'Demo',
     priority: undefined,
+    size: undefined,
   },
   component: TideButton,
   parameters,

package/src/stories/TideCard.stories.ts

@@ -3,8 +3,14 @@ import { action } from '@storybook/addon-actions';
 import TideCard from '@/components/TideCard.vue';
 import { ICON } from '@/types/Icon';
 import { POSITION_CARD_ICON as STANDARD_POSITION_CARD_ICON, TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
-import { argTypeBooleanUnrequired, click, doSomething } from '@/utilities/storybook';
-import { parameters, prependNoneAsUndefined, formatArgType } from '@/utilities/storybook';
+import {
+  argTypeBooleanUnrequired,
+  click,
+  doSomething,
+  formatArgType,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
 
 const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
 const POSITION_CARD_ICON = prependNoneAsUndefined(STANDARD_POSITION_CARD_ICON);

package/src/stories/TideIcon.stories.ts

@@ -1,8 +1,9 @@
+import { ICON as STANDARD_ICON, ICON_REALM as STANDARD_ICON_REALM } from '@/types/Icon';
 import * as STANDARD_SIZE from '@/types/Size';
 import TideIcon from '@/components/TideIcon.vue';
-import { ICON } from '@/types/Icon';
 import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
 
+const ICON = prependNoneAsUndefined({ ...STANDARD_ICON, ...STANDARD_ICON_REALM.RV });
 const SIZE = prependNoneAsUndefined(STANDARD_SIZE.SIZE);
 
 export default {

package/src/types/Field.ts

@@ -1,5 +1,5 @@
 import type { FormValueTransformer } from '@/types/Form';
-import type { SelectOptionGroup, SelectOption } from '@/types/Select';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 

package/src/types/Form.ts

@@ -1,4 +1,4 @@
-import type { SelectOptionGroup, SelectOption } from '@/types/Select';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 

package/src/types/Icon.ts

@@ -14,6 +14,7 @@ export const ICON = {
   AWARD_STAR: 'award-star',
   BED: 'bed',
   BOOKMARK: 'bookmark',
+  BUNKHOUSE: 'bunkhouse',
   CALENDAR_MONTH: 'calendar-month',
   CALL: 'call',
   CHECK: 'check',

package/src/types/Size.ts

@@ -4,3 +4,10 @@ export const SIZE = {
 } as const;
 
 export type Size = (typeof SIZE)[keyof typeof SIZE];
+
+export const SIZE_BUTTON = {
+  LARGE: 'large',
+  SMALL: 'small',
+} as const;
+
+export type SizeButton = (typeof SIZE)[keyof typeof SIZE];

package/src/types/Styles.ts

@@ -126,7 +126,7 @@ export const CSS = {
     CONTENTS: 'tide-display-contents',
     FLEX: 'tide-display-flex',
     GRID: 'tide-display-grid',
-    INITIAL: 'initial',
+    INITIAL: 'tide-display-initial',
     INLINE: 'tide-display-inline',
     INLINE_BLOCK: 'tide-display-inline-block',
     INLINE_FLEX: 'tide-display-inline-flex',