docs(disable-animation): add docs to readmes

src/components/accordion/readme.md

@@ -39,6 +39,10 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped
 </sbb-accordion>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/alert/alert/readme.md

@@ -71,6 +71,10 @@ The description text is wrapped into an `<p>` element to guarantee the semantic
 
 Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and can have negative effects on screen readers.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/autocomplete/readme.md

@@ -91,6 +91,10 @@ Nesting interactive controls like this interferes with many assistive technologi
 The component preserves focus on the input trigger,
 using `aria-activedescendant` to support navigation though the autocomplete options.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/calendar/readme.md

@@ -60,6 +60,10 @@ For accessibility purposes, the component is rendered as a native table element
 To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds).
 This is helpful if you need a specific state of the component.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/container/sticky-bar/readme.md

@@ -18,6 +18,10 @@ The `sbb-sticky-bar` content is provided via an unnamed slot.
 The `sbb-sticky-bar` inherits its variant from the `sbb-container` it's placed in.
 Optionally the user can set the `color` property on the `sbb-sticky-bar` in order to override the one inherited by the `sbb-container`. The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/datepicker/datepicker/readme.md

@@ -100,6 +100,10 @@ Whenever the validation state changes (e.g., a valid value becomes invalid or vi
 To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds).
 This is helpful if you need a specific state of the component.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/dialog/readme.md

@@ -74,6 +74,10 @@ You can also set the property `titleBackButton` to display the back button in th
 
 It's possible to display the component in `negative` variant using the self-named property.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/expansion-panel/expansion-panel/readme.md

@@ -67,6 +67,10 @@ and the header's `id` is set as `aria-labelledby` attribute on the content.
 The `expanded` attribute is used to correctly set the `aria-expanded` attribute on the header
 and the `aria-hidden` attribute on the content.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/file-selector/readme.md

@@ -78,6 +78,10 @@ It's suggested to have a different value for each variant, e.g.:
 ></sbb-file-selector>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/header/header/readme.md

@@ -98,6 +98,10 @@ set the CSS class `sbb-header-shrinkable` on the desired `sbb-header-button`/`sb
 in the component's stories (see also [this Storybook issue](https://github.com/storybookjs/storybook/issues/8820)),
 so they were wrapped into a `style` tag and added to the Storybook's configuration file named `preview-head.html`.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/image/readme.md

@@ -3,6 +3,10 @@ The `sbb-image` component is used to render an image.
 Mainly from cdn.img.sbb.ch (with `imageSrc`), but we can set an external image too.
 The size can be set with `pictureSizesConfig`.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/loading-indicator/readme.md

@@ -45,6 +45,10 @@ and then append the `sbb-loading-indicator` on it after giving it the correct `a
 </div>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/menu/menu/readme.md

@@ -57,6 +57,10 @@ As the menu opens, the focus will automatically be set to the first focusable it
 When using the `sbb-menu` as a select (e.g. language selection) it's recommended to use the `aria-pressed` attribute
 to identify which actions are active and which are not.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/navigation/navigation/readme.md

@@ -54,6 +54,10 @@ On opening, the focus will be automatically set on the first focusable element o
 When a navigation action is marked to indicate the user is currently on that page, `aria-current="page"` should be set on that action.
 Similarly, if a navigation action is marked to indicate a selected option (e.g., the selected language) `aria-pressed` should be set on that action.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/notification/readme.md

@@ -71,6 +71,10 @@ This ensures that users who rely on screen readers are promptly informed of any
 </div>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/pearl-chain/readme.md

@@ -51,6 +51,10 @@ The `legs` property is mandatory.
 To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds).
 This is helpful if you need a specific state of the component.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/popover/popover/readme.md

@@ -74,6 +74,10 @@ If the close button is not hidden, it's the first element and therefore gets foc
 
 Overlays should always contain a heading level 2 title. It can be visually hidden if necessary.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/select/readme.md

@@ -97,6 +97,10 @@ Opened panel:
 | <kbd>Shift</kbd><kbd>Up Arrow</kbd>     | If `multiple`, moves to the next non-disabled option and toggle its selection.                                                                    |
 | Any char or number                      | If exists, select the first non-disabled matching option after the selected value.                                                                |
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/selection-panel/readme.md

@@ -73,6 +73,10 @@ It's also possible to display the `sbb-selection-panel` without border by settin
 <sbb-selection-panel borderless> ... </sbb-selection-panel>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/slider/readme.md

@@ -65,6 +65,10 @@ The `sbb-slider` has the following behaviour on keypress when focused:
 | End         | Set the value to the maximum.                     |
 | Home        | Set the value to the minimum.                     |
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/tabs/tab-group/readme.md

@@ -36,6 +36,10 @@ It's possible to set the first selected tab using the `initialSelectedIndex` pro
 <sbb-tab-group initial-selected-index="1"> ... </sbb-tab-group>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/teaser-hero/readme.md

@@ -30,6 +30,10 @@ The description text is wrapped into an `p` element to guarantee the semantic me
 
 Avoid slotting block elements (e.g. `div`) as this violates semantic rules and can have negative effects on screen readers.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/teaser-paid/readme.md

@@ -11,6 +11,10 @@ The `sbb-teaser-paid` is a component with a background image and a chip with a t
 
 The `sbb-teaser-paid` component has two slots: the `image` slot, used to slot an `sbb-image` and the `chip` slot, used to slot an `sbb-chip`.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/teaser/readme.md

@@ -48,6 +48,10 @@ The description text is wrapped into an `<p>` element to guarantee the semantic
 
 Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and can have negative effects on screen readers.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/timetable-row/readme.md

@@ -44,6 +44,10 @@ _`tripProp` property_
 To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds).
 This is helpful if you need a specific state of the component.
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/toast/readme.md

@@ -98,6 +98,10 @@ Unless strictly necessary, we advise you not to wrap it preventively and let the
 </sbb-toast>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/components/toggle/toggle/readme.md

@@ -30,6 +30,10 @@ The component has two different sizes, `s` and `m` (default), which can be set u
 <sbb-toggle size="s" even> ... </sbb-toggle>
 ```
 
+## Animation
+
+Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+
 <!-- Auto Generated Below -->
 
 ## Properties