@lumx/core 4.10.0 → 4.11.0-alpha.1

package/components-and-utils.css

@@ -4988,21 +4988,10 @@ table {
 /* Selection Chip group
    ========================================================================== */
 .lumx-selection-chip-group {
-  max-width: 100%;
-}
-.lumx-selection-chip-group:empty {
-  display: none;
-}
-.lumx-selection-chip-group__item {
-  display: flex;
-  overflow: hidden;
+  align-content: flex-start;
 }
-.lumx-selection-chip-group__chip {
-  overflow: hidden;
-}
-.lumx-selection-chip-group__chip .lumx-chip__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.lumx-selection-chip-group, .lumx-selection-chip-group .lumx-chip, .lumx-selection-chip-group .lumx-chip__label {
+  min-width: 0;
 }
 
 /* ==========================================================================
@@ -5020,6 +5009,22 @@ table {
 }
 .lumx-combobox-popover__scroll {
   overflow-y: auto;
+  scroll-snap-type: y proximity;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .lumx-combobox-popover__scroll {
+    scroll-behavior: smooth;
+  }
+}
+.lumx-combobox-popover__scroll::before {
+  content: "";
+  display: block;
+  scroll-snap-align: start;
+}
+.lumx-combobox-popover__scroll::after {
+  content: "";
+  display: block;
+  scroll-snap-align: end;
 }
 
 .lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),

package/js/components/AlertDialog/Tests.d.ts

@@ -0,0 +1,11 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    alertDialog: HTMLElement | null;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Chip/SelectionChipGroup.d.ts

@@ -0,0 +1,56 @@
+import type { LumxClassName, HasClassName, HasTheme } from '../../types';
+import type { Selector } from '../../types/Selector';
+import type { ChipProps } from '.';
+/**
+ * Framework-specific components injected by React/Vue wrappers.
+ */
+export interface SelectionChipGroupComponents {
+    Chip: any;
+    ChipGroup: any;
+    Icon: any;
+    Text: any;
+    Tooltip: any;
+}
+/**
+ * Props that consumers can override per chip via getChipProps.
+ * Excludes internal/framework props that the core always controls.
+ */
+export type ChipOverrideProps = Pick<ChipProps, 'isDisabled' | 'color' | 'isHighlighted' | 'isSelected' | 'className' | 'before' | 'after'>;
+/**
+ * Defines the props of the component.
+ */
+export interface SelectionChipGroupProps<O> extends HasClassName, HasTheme {
+    /** Option object id selector (either a property name or a function to get the id) */
+    getOptionId: Selector<O>;
+    /** Option object name selector. Falls back to the id if not defined */
+    getOptionName?: Selector<O, string | undefined | null>;
+    /** Selected options array */
+    value?: O[];
+    /** Label for accessibility (aria-label on the listbox) */
+    label: string;
+    /** Label for the remove action (visually hidden text appended to each chip) */
+    chipRemoveLabel?: string;
+    /** Disabled state for all chips */
+    isDisabled?: boolean;
+    /** Customize chip props per option */
+    getChipProps?: (option: O) => Partial<ChipProps>;
+    /** Ref for the container element */
+    ref?: any;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "SelectionChipGroup";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * SelectionChipGroup component.
+ * Renders a listbox of removable selection chips using component injection for framework-agnostic rendering.
+ *
+ * @param props      Component props.
+ * @param components Framework-specific components injected by the wrapper (Chip, ChipGroup, Icon, Tooltip).
+ * @return JSX element, or null when value is empty.
+ */
+export declare const SelectionChipGroup: <O>(props: SelectionChipGroupProps<O>, { Chip, ChipGroup, Icon, Text, Tooltip }: SelectionChipGroupComponents) => import("react").JSX.Element | null;

package/js/components/Chip/SelectionChipGroupTests.d.ts

@@ -0,0 +1,18 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    selectionChipGroup: HTMLElement | null;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+interface CoreTestOptions extends SetupOptions<any> {
+    /**
+     * Render a stateful SelectionChipGroup that updates its own value on change.
+     * When provided, enables roving tabindex recovery tests.
+     */
+    renderStateful?: () => void;
+}
+declare const _default: (renderOptions: CoreTestOptions) => void;
+export default _default;

package/js/components/Chip/index.d.ts

@@ -0,0 +1,81 @@
+import { ColorPalette, Size } from '../../constants';
+import { HasTheme, HasAriaDisabled, JSXElement, LumxClassName, HasClassName, HasDisabled, CommonRef, GenericProps } from '../../types';
+/**
+ * Chip sizes.
+ */
+export type ChipSize = Extract<Size, 's' | 'm'>;
+/**
+ * Defines the props of the component.
+ */
+export interface ChipProps extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
+    /** A component to be rendered after the content. */
+    after?: JSXElement;
+    /** A component to be rendered before the content. */
+    before?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Whether the component is clickable or not. */
+    isClickable?: boolean;
+    /** Whether the chip is currently in a highlighted state or not. */
+    isHighlighted?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Size variant. */
+    size?: ChipSize;
+    /** href for the chip if it is a link */
+    href?: string;
+    /** reference to the root element */
+    ref?: CommonRef;
+    /** On "after" element clicked callback. */
+    handleAfterClick?: (event: any) => void;
+    /** On element key down callback. */
+    handleKeyDown?: (event: any) => void;
+    /** On "before" element clicked callback. */
+    handleBeforeClick?: (event: any) => void;
+    /** On element clicked callback. */
+    handleClick?: (event: any) => void;
+    /** name of the prop for handling key down events */
+    keyDownProp?: string;
+    /** name of the prop for tab index */
+    tabIndexProp?: string;
+    /** Children */
+    children?: JSXElement;
+    /** Props to apply when the component is in a disabled state. */
+    disabledStateProps: GenericProps;
+    /** Whether the "after" element has a click handler. */
+    hasAfterClick?: boolean;
+    /** Whether the "before" element has a click handler. */
+    hasBeforeClick?: boolean;
+    /** Whether the component has a main click handler. */
+    hasOnClick?: boolean;
+    /** Whether any part of the component is disabled. */
+    isAnyDisabled?: boolean;
+}
+export type ChipPropsToOverride = 'disabledStateProps' | 'hasOnClick' | 'hasBeforeClick' | 'hasAfterClick' | 'before' | 'after' | 'keyDownProp' | 'tabIndexProp' | 'isAnyDisabled';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Chip";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+}, element: {
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ChipProps>;
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Chip: (props: ChipProps) => import("react").JSX.Element;

package/js/components/Chip/setupSelectionChipGroupEvents.d.ts

@@ -0,0 +1,28 @@
+import type { Selector } from '../../types/Selector';
+/**
+ * Options for setting up selection chip group event handlers.
+ * All option accessors are wrapped in getters so that React/Vue can provide
+ * reactive values without the core needing to know about reactivity systems.
+ */
+export interface SetupSelectionChipGroupEventsOptions<O> {
+    /** Getter for the current selected options array. */
+    getValue: () => O[] | undefined;
+    /** Getter for the option id selector. */
+    getOptionId: Selector<O>;
+    /** Callback when the option array changes. */
+    onChange: (newValue?: O[]) => void;
+    /** Getter for the chip group container element. */
+    getContainer: () => HTMLElement | null | undefined;
+    /** Getter for the associated input element (optional). */
+    getInput?: () => HTMLInputElement | null | undefined;
+}
+/**
+ * Attach delegated click and keydown event listeners on the chip group container,
+ * and optionally an input backspace handler.
+ *
+ * Uses addEventListener on the container element. Events bubble up from individual
+ * chips, so there is no need to re-attach listeners when chips change.
+ *
+ * @returns A cleanup function that removes all attached event listeners.
+ */
+export declare function setupSelectionChipGroupEvents<O>(options: SetupSelectionChipGroupEventsOptions<O>): () => void;

package/js/components/Combobox/ComboboxInput.d.ts

@@ -17,6 +17,11 @@ export interface ComboboxInputProps extends HasClassName, HasTheme {
     toggleButtonProps?: Record<string, any>;
     /** Toggle callback for the chevron button. */
     handleToggle?(): void;
+    /**
+     * Controls how the combobox filters options as the user types.
+     * When `'off'`, the input is rendered as `readOnly`.
+     */
+    filter?: 'auto' | 'manual' | 'off';
 }
 /**
  * Injected framework-specific components for ComboboxInput rendering.

package/js/components/Combobox/setupComboboxInput.d.ts

@@ -2,14 +2,22 @@ import type { ComboboxCallbacks, ComboboxHandle } from './types';
 /** Options for configuring the input-mode combobox controller. */
 export interface SetupComboboxInputOptions extends ComboboxCallbacks {
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Each registered `Combobox.Option` receives filter state updates and hides itself
-     * when it does not match the current input value.
+     * Controls how the combobox filters options as the user types.
      *
-     * Set to false when you want to handle filtering yourself (e.g. async search,
-     * consumer-side pre-filtering). Options will not be registered for auto-filtering.
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, and `openOnFocus` defaults to `true`.
+     *   The core template renders the input as `readOnly`.
      */
-    autoFilter?: boolean;
+    filter?: 'auto' | 'manual' | 'off';
+    /**
+     * When true, the combobox opens automatically when the input receives focus.
+     * When false (default, unless `filter` is `'off'`), the combobox only opens
+     * on click, typing, or keyboard navigation.
+     *
+     * @default false (true when filter is 'off')
+     */
+    openOnFocus?: boolean;
 }
 /**
  * Set up a combobox with an input trigger (autocomplete/filter pattern).

package/js/components/Dialog/Tests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    dialog: HTMLElement | null;
+    container: HTMLElement | null;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/InputLabel/index.d.ts

@@ -9,6 +9,8 @@ export interface InputLabelProps extends HasClassName, HasTheme {
     children: JSXElement;
     /** Native htmlFor property. */
     htmlFor: string;
+    /** Native id property. */
+    id?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** ref to the root element */

package/js/utils/InfiniteScroll/setupInfiniteScrollObserver.d.ts

@@ -0,0 +1,8 @@
+type EventCallback = (evt?: Event) => void;
+/**
+ * Sets up an IntersectionObserver on the given element.
+ * Calls `callback` when at least one observed entry is intersecting.
+ * Returns a cleanup function that unobserves the element.
+ */
+export declare function setupInfiniteScrollObserver(element: Element, callback: EventCallback, options?: IntersectionObserverInit): () => void;
+export {};

package/js/utils/browser/querySelectorInclusive.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Like `querySelectorAll`, but also tests the root node itself.
+ *
+ * Yields the root element first (if it matches), then all matching descendants
+ * in document order. Being a generator, callers that only need the first match
+ * can break early without collecting the full list.
+ *
+ * @param node  The starting DOM node.
+ * @param selector  CSS selector to match against.
+ */
+export declare function querySelectorInclusive(node: Node, selector: string): Generator<HTMLElement>;

package/js/utils/browser/trackContainerFocus.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Track whether the container currently has focus.
+ *
+ * We can't rely on `document.activeElement` inside MutationObserver callbacks because
+ * the browser moves focus to `<body>` before they fire. focusout with `relatedTarget === null`
+ * (element removed from DOM) keeps the flag true so the observer can move focus to a fallback.
+ */
+export declare function trackContainerFocus(container: HTMLElement, signal: AbortSignal): {
+    readonly hasFocus: boolean;
+    reset(): void;
+};

package/js/utils/focusNavigation/createListFocusNavigation.d.ts

@@ -1,10 +1,15 @@
-import type { FocusNavigationCallbacks, FocusNavigationController, ListNavigationOptions } from './types';
+import type { FocusNavigationCallbacks, ListFocusNavigationController, ListNavigationOptions } from './types';
 /**
  * Create a focus navigation controller for a 1D list.
  *
- * @param options List navigation options (container, itemSelector, direction, wrap).
+ * This controller is **stateless** — it does not maintain an internal reference to
+ * the active item. Instead it reads the active item from the DOM each time via the
+ * `getActiveItem` callback provided in the options. This avoids any desync between
+ * the controller's internal state and the actual DOM.
+ *
+ * @param options List navigation options (container, itemSelector, direction, wrap, getActiveItem).
  * @param callbacks Callbacks for focus state changes.
  * @param signal AbortSignal for cleanup.
- * @returns FocusNavigationController instance.
+ * @returns ListFocusNavigationController instance.
  */
-export declare function createListFocusNavigation(options: ListNavigationOptions, callbacks: FocusNavigationCallbacks, signal: AbortSignal): FocusNavigationController;
+export declare function createListFocusNavigation(options: ListNavigationOptions, callbacks: FocusNavigationCallbacks, signal: AbortSignal): ListFocusNavigationController;

package/js/utils/focusNavigation/index.d.ts

@@ -1,4 +1,4 @@
-export type { FocusNavigationCallbacks, FocusNavigationController, GridNavigationOptions, ListNavigationOptions, NavigationOptions, } from './types';
+export type { FocusNavigationCallbacks, FocusNavigationController, GridNavigationOptions, ListFocusNavigationController, ListNavigationOptions, NavigationOptions, } from './types';
 export type { RovingTabIndexOptions } from './setupRovingTabIndex';
 export { createListFocusNavigation } from './createListFocusNavigation';
 export { createGridFocusNavigation } from './createGridFocusNavigation';

package/js/utils/focusNavigation/setupRovingTabIndex.d.ts

@@ -1,42 +1,37 @@
 import type { FocusNavigationController } from './types';
-/**
- * Options for the roving tabindex setup.
- */
+/** Options for {@link setupRovingTabIndex}. */
 export interface RovingTabIndexOptions {
-    /** The container element holding the focusable items. */
+    /** Container element holding the focusable items. */
     container: HTMLElement;
-    /** CSS selector to identify focusable items within the container. */
+    /** CSS selector identifying focusable items within the container. */
     itemSelector: string;
     /**
-     * Primary navigation axis — determines which arrow keys navigate.
-     * - `'horizontal'` (default): Left/Right navigate, Up/Down are no-ops.
-     * - `'vertical'`: Up/Down navigate, Left/Right are no-ops.
+     * Navigation axis — determines which arrow keys navigate.
+     * - `'horizontal'` (default): Left/Right navigate.
+     * - `'vertical'`: Up/Down navigate.
      */
     direction?: 'horizontal' | 'vertical';
+    /** CSS selector matching disabled items (skipped during navigation). */
+    itemDisabledSelector?: string;
     /**
-     * CSS selector matching disabled items within the container.
-     * Disabled items are skipped during keyboard navigation.
+     * Attribute name indicating the selected item (e.g. `'aria-selected'`, `'aria-checked'`).
+     * When set, the roving tabindex will observe changes to this attribute and keep
+     * `tabindex="0"` in sync with the item whose attribute value is `"true"`.
+     * Default: `'aria-selected'`.
      */
-    itemDisabledSelector?: string;
-    /** Callback invoked when an item receives focus via keyboard navigation. */
+    itemSelectedAttr?: string;
+    /** Called when an item receives focus via keyboard navigation. */
     onItemFocused?: (item: HTMLElement) => void;
 }
 /**
  * Set up the roving tabindex pattern on a container element.
  *
- * Handles:
- * - Keyboard navigation (Arrow keys, Home, End) via a keydown listener on the container
- * - tabindex management on focus changes (`0` on active, `-1` on inactive)
- * - Calling `.focus()` on the newly active item
- *
- * The consumer is responsible for setting the initial tabindex values on items
- * (`tabindex="0"` on the active item, `tabindex="-1"` on the rest). On setup, the item
- * with `tabindex="0"` is silently adopted as the initial active item.
- *
- * The setup is torn down when the provided `signal` is aborted.
+ * - Keyboard navigation (Arrow keys, Home, End)
+ * - tabindex management (`0` on active, `-1` on others)
+ * - Mount normalization (single-tabstop invariant)
+ * - DOM mutation handling via MutationObserver:
+ *   removal recovery, insertion normalization, disabled-state changes
  *
- * @param options  Roving tabindex configuration.
- * @param signal   AbortSignal for teardown.
- * @returns The underlying {@link FocusNavigationController} for programmatic access.
+ * Torn down when `signal` is aborted.
  */
 export declare function setupRovingTabIndex(options: RovingTabIndexOptions, signal: AbortSignal): FocusNavigationController;

package/js/utils/focusNavigation/types.d.ts

@@ -33,11 +33,18 @@ export interface ListNavigationOptions {
      */
     itemDisabledSelector?: string;
     /**
-     * CSS selector identifying the initially active item within the container.
-     * If an item matching this selector is found on setup, it becomes the active item
-     * without triggering focus or activation callbacks (silent init from DOM state).
+     * Callback returning the currently active item from the DOM.
+     *
+     * The list navigation controller does **not** maintain an internal active-item
+     * reference; instead it delegates to this callback every time it needs the current
+     * active item (e.g. before navigating by offset).
+     *
+     * The callback is expected to read from the DOM (e.g. query `[tabindex="0"]` for
+     * roving tabindex, or read `aria-activedescendant` for combobox patterns).
+     *
+     * Default: `() => null` (no active item).
      */
-    itemActiveSelector?: string;
+    getActiveItem?: () => HTMLElement | null;
 }
 /** Options for 2D grid navigation. */
 export interface GridNavigationOptions {
@@ -100,3 +107,20 @@ export interface FocusNavigationController {
     /** Navigate right (next item in horizontal list, next cell in grid). */
     goRight(): boolean;
 }
+/**
+ * Extended controller for 1D list navigation.
+ * Adds list-specific methods that don't apply to grid navigation.
+ */
+export interface ListFocusNavigationController extends FocusNavigationController {
+    /** Combined CSS selector matching enabled (non-disabled) items. */
+    readonly enabledItemSelector: string;
+    /**
+     * Find the nearest enabled item to the given anchor node.
+     * The anchor does not need to be an item or even an HTMLElement — it's used
+     * as a positional reference to find the closest enabled item in DOM order.
+     * Prefers the next item; falls back to the previous item.
+     *
+     * @returns The nearest enabled item, or null if no enabled items exist.
+     */
+    findNearestEnabled(anchor: Node): HTMLElement | null;
+}

package/lumx.css

@@ -5669,21 +5669,10 @@ table {
 /* Selection Chip group
    ========================================================================== */
 .lumx-selection-chip-group {
-  max-width: 100%;
-}
-.lumx-selection-chip-group:empty {
-  display: none;
-}
-.lumx-selection-chip-group__item {
-  display: flex;
-  overflow: hidden;
+  align-content: flex-start;
 }
-.lumx-selection-chip-group__chip {
-  overflow: hidden;
-}
-.lumx-selection-chip-group__chip .lumx-chip__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.lumx-selection-chip-group, .lumx-selection-chip-group .lumx-chip, .lumx-selection-chip-group .lumx-chip__label {
+  min-width: 0;
 }
 
 /* ==========================================================================
@@ -5701,6 +5690,22 @@ table {
 }
 .lumx-combobox-popover__scroll {
   overflow-y: auto;
+  scroll-snap-type: y proximity;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .lumx-combobox-popover__scroll {
+    scroll-behavior: smooth;
+  }
+}
+.lumx-combobox-popover__scroll::before {
+  content: "";
+  display: block;
+  scroll-snap-align: start;
+}
+.lumx-combobox-popover__scroll::after {
+  content: "";
+  display: block;
+  scroll-snap-align: end;
 }
 
 .lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.10.0",
+        "@lumx/icons": "^4.11.0-alpha.1",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -69,7 +69,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.10.0",
+    "version": "4.11.0-alpha.1",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
@@ -92,5 +92,6 @@
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^4.0.18"
-    }
+    },
+    "stableVersion": "4.10.0"
 }

package/scss/components/chip/_index.scss

@@ -191,23 +191,10 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-selection-chip-group {
-  max-width: 100%;
+    align-content: flex-start;
 
-  &:empty {
-    display: none;
-  }
-
-  &__item {
-    display: flex;
-    overflow: hidden;
-  }
-
-  &__chip {
-    overflow: hidden;
-
-    .#{$lumx-base-prefix}-chip__label {
-      overflow: hidden;
-      text-overflow: ellipsis;
+    // Shrink chips in constrained space
+    &, & .#{$lumx-base-prefix}-chip, & .#{$lumx-base-prefix}-chip__label {
+        min-width: 0;
     }
-  }
 }

package/scss/components/combobox/_index.scss

@@ -18,6 +18,21 @@
 
     &__scroll {
         overflow-y: auto;
+        scroll-snap-type: y proximity;
+        @media (prefers-reduced-motion: no-preference) {
+            scroll-behavior: smooth;
+        }
+
+        &::before {
+          content: '';
+          display: block;
+          scroll-snap-align: start;
+        }
+        &::after {
+          content: '';
+          display: block;
+          scroll-snap-align: end;
+        }
     }
 }