tide-design-system 2.4.5 → 2.5.0

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/docs/upgrading.md

@@ -4,6 +4,85 @@ This document provides step-by-step instructions for upgrading from previous ver
 
 ---
 
+## Upgrading from 2.4 → 2.5
+
+### What changed?
+
+TIDE **2.5** updates several *stateful* components to use Vue’s `v-model` for two-way binding. This replaces each component’s old “value prop + change emit” pattern.
+
+Affected components:
+
+- `TideAccordionItem`
+- `TideButtonSegmented`
+- `TideChipFilter`
+- `TideModal`
+- `TideSheet`
+- `TideSwitch`
+
+### How to migrate
+
+#### 1. Replace old props with `v-model`
+
+| Component | v2.4 prop | v2.5+ |
+|---|---|---|
+| TideAccordionItem | `:is-expanded` | `v-model` |
+| TideButtonSegmented | `:active-tab` | `v-model` |
+| TideChipFilter | `:is-active` | `v-model` |
+| TideModal | `:is-open` | `v-model` |
+| TideSheet | `:is-open` | `v-model` |
+| TideSwitch | `:is-active` | `v-model` |
+
+##### 2.4 example
+
+```
+<TideButtonSegmented
+  :active-tab="active"
+  @change="active = $event"
+/>
+```
+
+##### 2.5+
+
+``` vue
+<TideButtonSegmented v-model="active" />
+```
+
+#### 2. Replace old emits with `@update:modelValue`
+
+| Component | Old emit | New emit |
+|---|---|---|
+| TideAccordionItem | `@toggle` | `@update:modelValue` |
+| TideButtonSegmented | `@change` | `@update:modelValue` |
+| TideChipFilter | `@click` | `@update:modelValue` |
+| TideModal | `@close` | `@update:modelValue` |
+| TideSheet | `@close` | `@update:modelValue` |
+| TideSwitch | `@change` | `@update:modelValue` |
+
+Use this only for **side effects**, not basic value updates.
+
+Or use Vue’s `watch()`:
+
+``` ts
+watch(active, doSomething);
+```
+
+### Handling cancellable modals (new API)
+
+**2.4** used `@close` + manual logic.
+
+**2.5+** introduces `:before-close`, which cancels dismissal if it returns `false`.
+
+```
+<TideModal
+  v-model="isOpen"
+  :before-close="() => {
+    if (!confirm('Close modal?')) return false;
+  }"
+>
+```
+
+✅ After these changes your project should be compatible with **TIDE 2.5**.
+
 ## Upgrading from 2.3 → 2.4
 
 ### Summary

package/index.ts

@@ -31,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';
@@ -60,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';
@@ -87,7 +89,7 @@ export type {
   Breakpoint,
   CardType,
   Element,
-  ElementTextAsIcon,
+  ElementBroad,
   FormValueTransformer,
   Formatted,
   Icon,
@@ -121,7 +123,7 @@ export {
   BREAKPOINT,
   CSS,
   ELEMENT,
-  ELEMENT_TEXT_AS_ICON,
+  ELEMENT_BROAD,
   FORMAT,
   FORMAT_REGEX,
   ICON,
@@ -140,7 +142,7 @@ export {
   VALIDATOR,
 };
 
-export { useTideForm };
+export { useTideForm, provideTideConfig };
 
 export {
   TideAccordionItem,
@@ -176,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.5",
+  "version": "2.5.0",
   "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;