tide-design-system 2.4.4 → 2.4.7

package/dist/utilities/storybook.ts

@@ -1,4 +1,4 @@
-import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';
 import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { formatKebabCase } from '@/utilities/format';
@@ -61,6 +61,7 @@ export const change = {
   isEmit: true,
   name: 'change',
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -71,6 +72,7 @@ export const click = {
   description: 'JS code or function to execute on click event',
   isEmit: true,
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -81,6 +83,7 @@ export const close = {
   description: 'JS code or function to execute on close event',
   isEmit: true,
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -90,6 +93,7 @@ export const dataTrack = {
   control: 'text',
   description: 'Data attribute for external tracking',
   table: {
+    category: 'Native',
     defaultValue: { summary: 'None' },
     type: { summary: 'string' },
   },
@@ -252,7 +256,7 @@ export const formatSnippet = (code: string, context: StoryContext) => {
     if (
       isClick &&
       value &&
-      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_TEXT_AS_ICON.BUTTON)
+      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_BROAD.BUTTON)
     ) {
       return `@click="${value}"`;
     }

package/dist/utilities/validation.ts

@@ -70,7 +70,7 @@ export const getFieldValidationResult = ({
   }
 
   // all other prop-based errors come last
-  if (required && value.value.trim() === '') {
+  if (required && value.value?.trim() === '') {
     return VALIDATION_RESULT.REQUIRED;
   }
 

package/index.ts

@@ -15,6 +15,7 @@ import TideChipFilter from '@/components/TideChipFilter.vue';
 import TideChipInput from '@/components/TideChipInput.vue';
 import TideColumns from '@/components/TideColumns.vue';
 import TideDivider from '@/components/TideDivider.vue';
+import TideForm from '@/components/TideForm.vue';
 import TideIcon from '@/components/TideIcon.vue';
 import TideImage from '@/components/TideImage.vue';
 import TideImageBackground from '@/components/TideImageBackground.vue';
@@ -30,18 +31,20 @@ import TideInputTextDeprecated from '@/components/TideInputTextDeprecated.vue';
 import TideInputTextarea from '@/components/TideInputTextarea.vue';
 import TideInputTextareaDeprecated from '@/components/TideInputTextareaDeprecated.vue';
 import TideLink from '@/components/TideLink.vue';
+import TideMenuItem from '@/components/TideMenuItem.vue';
 import TideModal from '@/components/TideModal.vue';
 import TidePagination from '@/components/TidePagination.vue';
 import TidePopover from '@/components/TidePopover.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideSheet from '@/components/TideSheet.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
+import { provideTideConfig } from '@/composables/useTideConfig';
 import { useTideForm } from '@/composables/useTideForm';
 import { ALERT } from '@/types/Alert';
 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';
+import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';
 import { FORMAT, FORMAT_REGEX } from '@/types/Formatted';
 import { ICON, ICON_REALM } from '@/types/Icon';
 import { OBJECT_FIT } from '@/types/Image';
@@ -59,7 +62,7 @@ import type { BadgeTrustedYears } from '@/types/Badge';
 import type { BreadCrumb } from '@/types/BreadCrumb';
 import type { Breakpoint, Media } from '@/types/Breakpoint';
 import type { CardType } from '@/types/Card';
-import type { Element, ElementTextAsIcon } from '@/types/Element';
+import type { Element, ElementBroad } from '@/types/Element';
 import type { FormValueTransformer } from '@/types/Form';
 import type { TextInput } from '@/types/FormDeprecated';
 import type { Formatted } from '@/types/Formatted';
@@ -86,7 +89,7 @@ export type {
   Breakpoint,
   CardType,
   Element,
-  ElementTextAsIcon,
+  ElementBroad,
   FormValueTransformer,
   Formatted,
   Icon,
@@ -120,7 +123,7 @@ export {
   BREAKPOINT,
   CSS,
   ELEMENT,
-  ELEMENT_TEXT_AS_ICON,
+  ELEMENT_BROAD,
   FORMAT,
   FORMAT_REGEX,
   ICON,
@@ -139,7 +142,7 @@ export {
   VALIDATOR,
 };
 
-export { useTideForm };
+export { useTideForm, provideTideConfig };
 
 export {
   TideAccordionItem,
@@ -159,6 +162,7 @@ export {
   TideChipInput,
   TideColumns,
   TideDivider,
+  TideForm,
   TideIcon,
   TideImage,
   TideImageBackground,
@@ -174,6 +178,7 @@ export {
   TideInputTextarea,
   TideInputTextareaDeprecated,
   TideLink,
+  TideMenuItem,
   TideModal,
   TidePagination,
   TidePopover,

package/package.json

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

package/src/assets/css/reset.css

@@ -25,7 +25,7 @@ body {
   border: 0;
   padding: 0;
   color: inherit;
-  font-family: Montserrat;
+  font-family: Montserrat, system-ui, sans-serif;
   font-weight: inherit;
   line-height: inherit;
   -webkit-font-smoothing: antialiased;