chore(vivid): release vivid-4 (VIV-1795) (#1817)

feat(tooltip)!: sets default max width (VIV-1799) (#1798)

feat(data-grid-cell)!: change default value of block-size and white-space (VIV-1797) (#1793)

feat(audio-player)!: remove css-variable for min-inline-size and max-inline-size on host (VIV-1800) (#1803)

feat(vue-wrappers)!: forward form values by DOM prop name (VIV-1798) (#1789)

feat(vue-wrappers)!: forward form values by DOM prop name (VIV-1798)

chore(docs): v4 migration page (VIV-1801) (#1796)

fix(tabs)!: change gutters default to small (VIV-1796) (#1804)

chore(docs)!: refine docs for v-4 (VIV-000) (#1813)

feat(toggletip)!: add max-inline-size of 30ch & css-variable for custom size (VIV-1846) (#1814)

.github/workflows/pull-request.yml

@@ -9,7 +9,7 @@ on:
       - ready_for_review
       - converted_to_draft
     branches:
-      - main
+      - main*
 
 concurrency:
   group: ci-tests-${{ github.ref }}-1

apps/docs/_data/guides.json

@@ -13,6 +13,10 @@
 		"title": "Localization",
 		"markdown": "./docs/guides/localization.md"
 	},
+	{
+		"title": "V4 release Migration",
+		"markdown": "./docs/guides/v4-release-migration.md"
+	},
 	{
 		"title": "Migrating From Vivid 2.x",
 		"slug": "vivid-2-migration",

apps/docs/_layouts/base.njk

@@ -55,15 +55,15 @@
       	class="vvd-theme-alternate desktop"
       	label="For More Details"
       	icon="double-chevron-right-line" icon-trailing
-      	href="https://vivid.deno.dev/resources/release-policy/#major-releases"
+      	href="/guides/v4-release-migration/"
       ></vwc-button>
       <vwc-button
             	appearance="ghost"
             	slot="action-items"
             	class="vvd-theme-alternate mobile-only"
             	aria-label="For More Details"
             	icon="open-line"
-            	href="https://vivid.deno.dev/resources/release-policy/#major-releases"
+            	href="/guides/v4-release-migration/"
             ></vwc-button>
             </vwc-banner>
 

docs/guides/v4-release-migration.md

@@ -0,0 +1,184 @@
+# Vivid v4.0.0 Migration Guide
+
+Release date: 1st July 2024.  
+This document provides descriptions of the breaking changes in this release and instructions on how to prepare for them.
+
+---
+
+## Audio-player
+
+### The change
+
+The audio-player will now stretch to fill it's container's inline-size by default. Previously it was restricted to 350px.
+
+|                                               | V-3      | V-4       |
+| --------------------------------------------- | -------- | --------- |
+| audio-player `max-inline-size`                | `350px`  | `100%`    |
+| css-variable `--audio-player-min-inline-size` | `in-use` | `removed` |
+
+### How to get ready?
+
+set `max-inline-size` or `inline-size` directly on audio-player or on its parent.
+
+---
+
+## Data-grid
+
+Data-grid-cells outside of the table header will no longer have a fixed block-size but will adjust to its content and its text will not be trimmed by default as before.
+
+### The change
+
+|                              | V-3      | V-4      |
+| ---------------------------- | -------- | -------- |
+| data-grid-cell `block-size`  | `48px`   | `100%`   |
+| data-grid-cell `white-space` | `nowrap` | `normal` |
+
+### How to get ready?
+
+#### Keeping the tables the same as before:
+
+set the css-variable for the Data-grid:
+
+```js
+--data-grid-cell-block-size: 48px;
+--data-grid-cell-white-space: nowrap;
+```
+
+#### Already using the css-variable
+
+If you set the css-variable - you can either remove them from your code or leave them as they are.
+
+---
+
+## Tabs
+
+### The change
+
+Tab panel will now have a 16px padding by default, previously it had no padding at all.
+
+|                                                | V-3    | V-4                      |
+| ---------------------------------------------- | ------ | ------------------------ |
+| Tab panel [gutters](/components/tabs/#gutters) | `none` | `small (= 16px padding)` |
+
+### How to get ready?
+
+If you do not wish to have gutters, set `gutters="none"` on tabs:
+
+```js
+<vwc-tabs gutters="none">...</vwc-tabs>
+```
+
+---
+
+## Tooltip
+
+### The change
+
+The tooltip will now have a default max-inline-size of 30 characters. Previously it didn't have max-inline-size.
+
+|                           | V-3 default value | V-4 default value |
+| ------------------------- | ----------------- | ----------------- |
+| tooltip `max-inline-size` | `none`            | `30ch`            |
+
+### How to get ready?
+
+If you do not wish to have a set `max-inline-size` use the css-variable `--tooltip-max-inline-size`.
+
+```js
+vwc-tooltip {
+	--tooltip-max-inline-size: none;
+}
+```
+
+---
+
+## Toggletip
+
+### The change
+
+The toggletip will now have a default max-inline-size of 30 characters. Previously it didn't have max-inline-size.
+
+|                             | V-3 default value | V-4 default value |
+| --------------------------- | ----------------- | ----------------- |
+| toggletip `max-inline-size` | `none`            | `30ch`            |
+
+### How to get ready?
+
+If you do not wish to have a set `max-inline-size` use the css-variable `--toggletip-max-inline-size`.
+
+```js
+vwc-toggletip {
+	--toggletip-max-inline-size: none;
+}
+```
+
+---
+
+## Vue Wrappers
+
+Form elements like `VTextField` will now forward value props consistently as DOM properties.
+
+This change will affect the props `value` and `currentValue` on:
+
+- VTextField
+- VTextArea
+- VNumberField
+- VSelect
+- VCombobox
+- VSlider
+- VRangeSlider
+- VDatePicker
+- VDateRangePicker
+- VTimePicker
+- VFilePicker
+
+`checked` and `currentChecked` props on:
+
+- VCheckbox
+- VSwitch
+- VRadio
+
+`currentStart` / `currentEnd` on:
+
+- VDateRangePicker
+- VRangeSlider
+
+Usage of these props is discouraged. To set the current value, you should use the `v-model` instead:
+
+```html
+<VTextField v-model="value" />
+<!-- Which is syntactic sugar for: -->
+<VTextField
+	:model-value="value"
+	@update:modelValue="$event => (value = $event)"
+/>
+```
+
+Code using `v-model` or `modelValue` is not affected.
+
+### The change
+
+|                                                                   | V-3                                | V-4                    |
+| ----------------------------------------------------------------- | ---------------------------------- | ---------------------- |
+| `currentValue` / `currentChecked` / `currentStart` / `currentEnd` | Controls current value             | Removed                |
+| `value`/`checked`                                                 | Inconsistent between Vue 2 / Vue 3 | Controls current value |
+| `initialValue` / `defaultChecked`                                 | Doesn't exist                      | Controls initial value |
+
+### How to get ready?
+
+- First, make sure you're on the latest version of Vivid 3.x.  
+  Optionally, install the latest version of our new [ESLint plugin](/eslint-plugin), which can help with the migration.
+
+- Replace all usage of `currentValue` / `currentChecked` with `modelValue` and all usages `currentStart` / `currentEnd` with `start` / `end`.  
+  The `no-current-value-attribute` rule of our ESLint plugin can perform this migration automatically.
+
+- Replace all usages of `value` / `checked`:
+
+  - **Vue 3:**  
+    `value`/`checked` sets the current value and can be replaced with `modelValue`.
+
+  - **Vue 2:**  
+    `value` / `checked` sets the initial value and can be replaced with `initalValue` / `defaultChecked`.  
+    Keep in mind that the original code may be wrong and intended to set the current value instead.
+
+  The `no-value-attribute` rule of our ESLint plugin will warn about any usages of `value` / `checked`.

libs/components/src/lib/audio-player/README.md

@@ -162,23 +162,19 @@ Use the pause method to pause the audio if playing.
 
 ### Max-Inline-size
 
-By default, audio-player `max-inline-size` is set to `350px`.
-You can specify a different value or set it to `initial` for full width or taking parent width.
+By default, audio-player `max-inline-size` is 100%;
+You can specify a different value with setting `max-inline-size` on the `vwc-audio-layer.`
 
-```html preview
+```html preview 200px
 <style>
 	.audio-player {
-		max-inline-size: initial;
+		max-inline-size: 350px;
 	}
 </style>
 <vwc-audio-player
+	playback-rates="0.5, 1, 1.5, 2"
+	skip-by="5"
 	class="audio-player"
 	src="https://download.samplelib.com/mp3/sample-6s.mp3"
 ></vwc-audio-player>
 ```
-
-### Minimum inline Size
-
-`--audio-player-min-inline-size` css-variable is deprecated (as of 05/24) and is replaced with `max-inline-size`.  
-`--audio-player-min-inline-size` is still functional in the component but will be removed in a future major release.  
-This will be communicated when it's removal becomes a release candidate at the end of the support period.

libs/components/src/lib/audio-player/audio-player.scss

@@ -3,7 +3,6 @@
 
 :host {
 	display: block;
-	max-inline-size: 350px;
 }
 
 .wrapper {
@@ -23,7 +22,6 @@
 	.slider {
 		flex: 1;
 		grid-area: slider;
-		min-inline-size: var(#{variables.$audio-player-min-inline-size}, 200px);
 	}
 
 	.controls {

libs/components/src/lib/banner/banner.ts

@@ -37,7 +37,8 @@ export class Banner extends FoundationElement {
 	@attr({ attribute: 'action-href' }) actionHref: string | undefined;
 	@attr({ attribute: 'action-text' }) actionText: string | undefined;
 	@attr({ mode: 'boolean' }) removable = false;
-	@attr({ attribute: 'aria-live' }) override ariaLive: any;
+	// @ts-expect-error: allow uninitialized value
+	@attr({ attribute: 'aria-live' }) override ariaLive: string | null;
 	@attr() text: string | undefined;
 	@attr() connotation: BannerConnotation | undefined;
 

libs/components/src/lib/checkbox/checkbox.ts

@@ -29,7 +29,7 @@ export type CheckboxConnotation = Extract<
  * @slot helper-text - Describes how to use the checkbox. Alternative to the `helper-text` attribute.
  * @event {CustomEvent<undefined>} change - Emitted when the checked state changes.
  * @event {CustomEvent<undefined>} input - Emitted when the checked state changes.
- * @vueModel modelValue current-checked change `(event.target as HTMLInputElement).checked`
+ * @vueModel modelValue checked change `(event.target as HTMLInputElement).checked`
  */
 @errorText
 @formElements

libs/components/src/lib/combobox/combobox.ts

@@ -33,7 +33,7 @@ export type ComboboxAppearance = Extract<
  * @component combobox
  * @slot - Default slot.
  * @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value updates
- * @vueModel modelValue current-value change `(event.target as HTMLInputElement).value`
+ * @vueModel modelValue value change `(event.target as HTMLInputElement).value`
  */
 @formElements
 export class Combobox extends FoundationCombobox {

libs/components/src/lib/data-grid/README.md

@@ -571,69 +571,44 @@ Use `--data-grid-row-background` to change the sticky row background-color.
 
 ### Block Size
 
-By default, cells have a fixed `block-size`. Use `--data-grid-cell-block-size` to change the cell's `block-size`.
+Use `--data-grid-cell-block-size` to change the cell's `block-size`.
 
-Set it to `100%` to make the cells' height dynamic based on content.
-
-<vwc-note connotation="information" icon="info-solid" headline="Change Announcement">
-
-We will change the default value of `--data-grid-cell-block-size` to `100%` in a future major version of Vivid to make dynamic row heights the default behavior.
-
-</vwc-note>
+By default, header cells have a fixed height while data cells have a dynamic height based on content.
 
 ```html preview
 <style>
-	.dynamic-height {
-		--data-grid-cell-block-size: 100%;
+	.fixed-height {
+		--data-grid-cell-block-size: 100px;
 	}
 </style>
 <vwc-data-grid>
 	<vwc-data-grid-row row-type="header">
 		<vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
-		<vwc-data-grid-cell cell-type="columnheader"> Column 2 </vwc-data-grid-cell>
 	</vwc-data-grid-row>
 	<vwc-data-grid-row>
-		<vwc-data-grid-cell> Fixed height (default) </vwc-data-grid-cell>
-		<vwc-data-grid-cell>
-			<vwc-button label="Action" appearance="outlined"></vwc-button>
-		</vwc-data-grid-cell>
+		<vwc-data-grid-cell> Dynamic height (default) </vwc-data-grid-cell>
 	</vwc-data-grid-row>
-	<vwc-data-grid-row class="dynamic-height">
-		<vwc-data-grid-cell> Variable height </vwc-data-grid-cell>
-		<vwc-data-grid-cell>
-			<vwc-button
-				label="Action"
-				appearance="outlined"
-				size="expanded"
-			></vwc-button>
-		</vwc-data-grid-cell>
+	<vwc-data-grid-row class="fixed-height">
+		<vwc-data-grid-cell> Fixed height </vwc-data-grid-cell>
 	</vwc-data-grid-row>
 </vwc-data-grid>
 ```
 
 ### White Space
 
-By default, the cell's `white-space` is `nowrap`, which prevents text from wrapping to multiple lines.
+Use `--data-grid-cell-white-space` to change the cell's `white-space`.
 
-Set the value to `normal` in combination with a `--data-grid-cell-block-size` of `100%` to allow text to wrap to multiple lines.
-
-<vwc-note connotation="information" icon="info-solid" headline="Change Announcement">
-
-We will change the default value of `--data-grid-cell-white-space` to `normal` in a future major version of Vivid to make dynamic row heights the default behavior.
-
-</vwc-note>
+By default, header cells will not wrap text (`nowrap`), while data cells will wrap text (`normal`).
 
 ```html preview
 <style>
-	vwc-data-grid {
-		--data-grid-cell-white-space: normal;
-		--data-grid-cell-block-size: 100%;
+	.nowrap {
+		--data-grid-cell-white-space: nowrap;
 	}
 </style>
 <vwc-data-grid>
 	<vwc-data-grid-row row-type="header">
 		<vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
-		<vwc-data-grid-cell cell-type="columnheader"> Column 2 </vwc-data-grid-cell>
 	</vwc-data-grid-row>
 	<vwc-data-grid-row>
 		<vwc-data-grid-cell>
@@ -642,8 +617,13 @@ We will change the default value of `--data-grid-cell-white-space` to `normal` i
 			feugiat neque eget semper. Nam commodo pharetra lobortis. Sed id enim
 			metus.
 		</vwc-data-grid-cell>
+	</vwc-data-grid-row>
+	<vwc-data-grid-row class="nowrap">
 		<vwc-data-grid-cell>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius
+			libero ipsum, ut rhoncus nulla varius sit amet. Vestibulum volutpat
+			feugiat neque eget semper. Nam commodo pharetra lobortis. Sed id enim
+			metus.
 		</vwc-data-grid-cell>
 	</vwc-data-grid-row>
 </vwc-data-grid>