more generic

Author: Rich-Harris

documentation/docs/98-reference/.generated/client-warnings.md

@@ -223,12 +223,14 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
-### transition_slide_display_table
+### transition_slide_display
 
 ```
 The `slide` transition does not work correctly with elements with `display: %value%`
 ```
 
-The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element. Setting `height` to a value smaller than the element's natural height has no effect if the element's [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) style starts with `table` (which is the default state of table elements such as `<tr>`).
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
 
-Consider using a `flex` or `grid` layout instead.
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`

packages/svelte/messages/client-warnings/warnings.md

@@ -187,10 +187,12 @@ To fix it, either create callback props to communicate changes, or mark `person`
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
-## transition_slide_display_table
+## transition_slide_display
 
 > The `slide` transition does not work correctly with elements with `display: %value%`
 
-The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element. Setting `height` to a value smaller than the element's natural height has no effect if the element's [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) style starts with `table` (which is the default state of table elements such as `<tr>`).
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
 
-Consider using a `flex` or `grid` layout instead.
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`

packages/svelte/src/internal/client/warnings.js

@@ -171,10 +171,10 @@ export function state_proxy_equality_mismatch(operator) {
  * The `slide` transition does not work correctly with elements with `display: %value%`
  * @param {string} value
  */
-export function transition_slide_display_table(value) {
+export function transition_slide_display(value) {
 	if (DEV) {
-		console.warn(`%c[svelte] transition_slide_display_table\n%cThe \`slide\` transition does not work correctly with elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display_table`, bold, normal);
+		console.warn(`%c[svelte] transition_slide_display\n%cThe \`slide\` transition does not work correctly with elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display`, bold, normal);
 	} else {
-		console.warn(`https://svelte.dev/e/transition_slide_display_table`);
+		console.warn(`https://svelte.dev/e/transition_slide_display`);
 	}
 }

packages/svelte/src/transition/index.js

@@ -108,10 +108,16 @@ var slide_warning = false;
 export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) {
 	const style = getComputedStyle(node);
 
-	if (DEV && style.display.startsWith('table-') && !slide_warning) {
+	if (
+		DEV &&
+		!slide_warning &&
+		(style.display.includes('table') ||
+			style.display.includes('inline') ||
+			style.display === 'contents')
+	) {
 		slide_warning = true;
 		Promise.resolve().then(() => (slide_warning = false));
-		w.transition_slide_display_table(style.display);
+		w.transition_slide_display(style.display);
 	}
 
 	const opacity = +style.opacity;