@lumx/core 4.9.0-next.8 → 4.9.0

package/components-and-utils.css

@@ -5008,7 +5008,17 @@ table {
 /* ==========================================================================
    Combobox
    ========================================================================== */
+.lumx-combobox-input .lumx-text-field__chips {
+  width: -moz-min-content;
+  width: min-content;
+  min-width: 0;
+}
+
 .lumx-combobox-popover {
+  max-height: 50vh;
+  color: var(--lumx-color-dark-N);
+}
+.lumx-combobox-popover__scroll {
   overflow-y: auto;
 }
 
@@ -5031,7 +5041,11 @@ table {
 .lumx-combobox-option-skeleton:nth-child(3n+2) .lumx-skeleton-typography {
   width: min(55%, 170px);
 }
-
+.lumx-combobox-option .lumx-list-item__content {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+}
 .lumx-combobox-option-more-info__popover {
   max-width: 256px;
   padding: 16px;
@@ -8233,7 +8247,7 @@ table {
 
 /* Section
    ========================================================================== */
-.lumx-list-section:not(:first-child):not(.lumx-list-section:not([hidden]) + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
+.lumx-list-section:not([hidden]) ~ .lumx-list-section:not(.lumx-list-section:not([hidden]) + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
   content: "";
   display: block;
   height: 1px;

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

@@ -1,8 +1,8 @@
-import type { CommonRef, HasClassName, LumxClassName } from '../../types';
+import type { CommonRef, HasClassName, HasTheme, LumxClassName } from '../../types';
 /**
  * Defines the props for the core ComboboxInput template.
  */
-export interface ComboboxInputProps extends HasClassName {
+export interface ComboboxInputProps extends HasClassName, HasTheme {
     /** The ID of the listbox element (for aria-controls). */
     listboxId?: string;
     /** Whether the combobox is open. */

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

@@ -41,6 +41,8 @@ export interface ComboboxOptionProps extends HasClassName {
     hidden?: boolean;
     /** On click callback. */
     handleClick?(): void;
+    /** Extra props forwarded to the inner action element (e.g. link props when as="a"). */
+    actionProps?: Record<string, any>;
     /** ref to the root <li> element. */
     ref?: CommonRef;
     /** The value for this option (used for selection). */
@@ -50,7 +52,7 @@ export interface ComboboxOptionProps extends HasClassName {
  * Props that React/Vue wrappers need to re-declare with framework-specific types.
  * Used by `ReactToJSX<ComboboxOptionProps, ComboboxOptionPropsToOverride>`.
  */
-export type ComboboxOptionPropsToOverride = 'before' | 'after' | 'children' | 'tooltipProps';
+export type ComboboxOptionPropsToOverride = 'before' | 'after' | 'children' | 'tooltipProps' | 'actionProps';
 /**
  * Component display name.
  */

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

@@ -15,6 +15,8 @@ export interface ComboboxOptionMoreInfoProps extends HasClassName {
     onMouseEnter?(): void;
     /** Mouse leave callback. */
     onMouseLeave?(): void;
+    /** Props forwarded to the IconButton. */
+    buttonProps?: Record<string, any>;
 }
 /**
  * Props that React/Vue wrappers need to re-declare with framework-specific types.

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

@@ -13,6 +13,12 @@ export interface ComboboxOptionSkeletonProps extends HasClassName {
     children?: JSXElement;
     /** ref to the root <li> element. */
     ref?: CommonRef;
+    /**
+     * Number of skeleton `<li>` elements to render.
+     * Each is an independent element with `:nth-child` width cycling applied by SCSS.
+     * @default 1
+     */
+    count?: number;
 }
 /**
  * Props that React/Vue wrappers need to re-declare with framework-specific types.

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

@@ -35,6 +35,8 @@ export interface ComboboxPopoverProps extends HasClassName {
 export interface ComboboxPopoverComponents {
     /** Popover component (framework-specific). */
     Popover: any;
+    /** FlexBox component (framework-specific). */
+    FlexBox: any;
 }
 /**
  * ComboboxPopover core template.
@@ -47,4 +49,4 @@ export interface ComboboxPopoverComponents {
  * @param components Injected framework-specific components.
  * @return JSX element.
  */
-export declare const ComboboxPopover: (props: ComboboxPopoverProps, { Popover }: ComboboxPopoverComponents) => import("react").JSX.Element;
+export declare const ComboboxPopover: (props: ComboboxPopoverProps, { Popover, FlexBox }: ComboboxPopoverComponents) => import("react").JSX.Element;

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

@@ -3,8 +3,8 @@ import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../t
  * Defines the props for the core ComboboxSection template.
  */
 export interface ComboboxSectionProps extends HasClassName {
-    /** Section label displayed as the group title. */
-    label?: string;
+    /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+    label?: string | JSXElement;
     /** Section icon */
     icon?: string;
     /** Section content (should be ComboboxOption elements). */

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

@@ -53,6 +53,12 @@ export interface ComboboxStateProps {
          * Used to suppress false "empty" state while data is loading.
          */
         isLoading?: boolean;
+        /**
+         * Whether the combobox popover is open.
+         * Used to gate live region content so screen readers announce messages
+         * when the popover opens (content insertion triggers `aria-live` announcement).
+         */
+        isOpen?: boolean;
     };
 }
 /**

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

@@ -21,3 +21,5 @@ export { ComboboxSection } from './ComboboxSection';
 export type { ComboboxSectionProps, ComboboxSectionPropsToOverride, ComboboxSectionComponents, } from './ComboboxSection';
 export { ComboboxState } from './ComboboxState';
 export type { ComboboxStateProps } from './ComboboxState';
+export { subscribeComboboxState } from './subscribeComboboxState';
+export type { ComboboxStateSetters } from './subscribeComboboxState';

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

@@ -13,7 +13,7 @@ interface ComboboxOptions {
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  *
- * @param callbacks Callbacks for select and open/close events.
+ * @param callbacks Callbacks invoked on combobox events (e.g. option selection).
  * @param options Options for configuring the shared combobox behavior.
  * @param onTriggerAttach Optional callback invoked when the trigger is registered and the signal is ready.
  *                        Used by mode-specific wrappers (setupComboboxInput/Button) to automatically

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

@@ -1,6 +1,6 @@
 import type { ComboboxCallbacks, ComboboxHandle } from './types';
 /** Options for configuring the input-mode combobox controller. */
-export interface SetupComboboxInputOptions {
+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
@@ -21,9 +21,8 @@ export interface SetupComboboxInputOptions {
  * Handles: Home/End (text cursor), ArrowLeft/Right (clear active descendant),
  * filtering (on input and on open), and focus behavior.
  *
- * @param input     The input element to use as the combobox trigger.
- * @param callbacks Callbacks for select and open/close events.
- * @param options   Options for configuring the input-mode controller.
+ * @param input   The input element to use as the combobox trigger.
+ * @param options Options and callbacks for configuring the input-mode controller.
  * @returns A ComboboxHandle for interacting with the combobox.
  */
-export declare function setupComboboxInput(input: HTMLInputElement, callbacks: ComboboxCallbacks, options?: SetupComboboxInputOptions): ComboboxHandle;
+export declare function setupComboboxInput(input: HTMLInputElement, options: SetupComboboxInputOptions): ComboboxHandle;

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

@@ -0,0 +1,23 @@
+import type { ComboboxHandle } from './types';
+/** Setters invoked by `subscribeComboboxState` when handle events fire. */
+export interface ComboboxStateSetters {
+    /** Called immediately with the current loading state, then on every `loadingChange` event. */
+    setIsLoading: (value: boolean) => void;
+    /** Called on every `loadingAnnouncement` event (debounced 500ms after skeletons mount). */
+    setShouldAnnounce: (value: boolean) => void;
+    /** Called with `true` after a short delay when the combobox opens, and `false` immediately on close. */
+    setIsOpen: (value: boolean) => void;
+}
+/**
+ * Subscribe to the combobox handle events needed by `ComboboxState`.
+ *
+ * Manages three subscriptions:
+ * - `loadingChange` → `setIsLoading` (+ synchronous initial read of `handle.isLoading`)
+ * - `loadingAnnouncement` → `setShouldAnnounce`
+ * - `open` → `setIsOpen` (deferred by {@link OPEN_ANNOUNCEMENT_DELAY}ms on open, immediate on close)
+ *
+ * @param handle  The combobox handle to subscribe to.
+ * @param setters Framework-specific state setters.
+ * @returns A cleanup function that unsubscribes all events and clears timers.
+ */
+export declare function subscribeComboboxState(handle: ComboboxHandle, setters: ComboboxStateSetters): () => void;

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

@@ -41,10 +41,10 @@ export interface ComboboxEventMap {
 }
 /** Callbacks provided by the consumer (React/Vue) to react to combobox state changes. */
 export interface ComboboxCallbacks {
-    /** Called when an option is selected (click or keyboard). */
+    /** Called when an option is selected (click or keyboard). Receives the combobox handle for post-selection side effects. */
     onSelect(option: {
         value: string;
-    }): void;
+    }, handle: ComboboxHandle): void;
 }
 /** Handle returned by `setupCombobox`. Used by framework wrappers and mode controllers. */
 export interface ComboboxHandle {

package/js/components/ExpansionPanel/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>) => {
+    element: HTMLElement;
+    header: HTMLElement | null;
+    props: any;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

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

@@ -0,0 +1,70 @@
+import type { HasClassName, LumxClassName, HasCloseMode, HasTheme, CommonRef, GenericProps, JSXElement } from '../../types';
+/**
+ * Defines the props of the component.
+ */
+export interface ExpansionPanelProps extends HasClassName, HasCloseMode, HasTheme {
+    /** Whether the expansion panel has a background. */
+    hasBackground?: boolean;
+    /** Whether the header has a divider. */
+    hasHeaderDivider?: boolean;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Label text (overwritten if a `<header>` is provided in the children). */
+    label?: string;
+    /** On open callback. */
+    handleOpen?: (event: any) => void;
+    /** On close callback. */
+    handleClose?: (event: any) => void;
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+    toggleButtonProps: any;
+    /** On toggle open or close callback. */
+    handleToggleOpen?(shouldOpen: boolean, event: any): void;
+    /** Children */
+    children?: JSXElement;
+    /** Ref forwarded to the root `<section>` element. */
+    ref?: CommonRef;
+    /** Ref forwarded to the collapsible wrapper `<div>`. */
+    wrapperRef?: CommonRef;
+    /** Props spread onto the header content `<div>` (e.g. `aria-*`, `data-*`). */
+    headerProps: GenericProps;
+    /** Content rendered inside the header content area. */
+    headerContent?: JSXElement;
+    /** Optional drag handle element rendered at the start of the header. */
+    dragHandle?: JSXElement;
+    /** Content rendered inside the collapsible content area. */
+    content?: JSXElement;
+    /** Optional footer element rendered below the content. */
+    footer?: JSXElement;
+    /** IconButton component injected by the framework wrapper (React or Vue). */
+    IconButton: any;
+    /** Whether the children should remain mounted (visible in the DOM) while the panel is closed. */
+    isChildrenVisible?: boolean;
+}
+export type ExpansionPanelPropsToOverride = 'handleOpen' | 'handleClose' | 'toggleButtonProps' | 'handleToggleOpen' | 'wrapperRef' | 'headerProps' | 'headerContent' | 'dragHandle' | 'content' | 'IconButton' | 'isChildrenVisible' | 'footer';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ExpansionPanel";
+/**
+ * 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<ExpansionPanelProps>;
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const ExpansionPanel: (props: ExpansionPanelProps) => import("react").JSX.Element;

package/js/components/ImageBlock/ImageCaption.d.ts

@@ -0,0 +1,36 @@
+import { HorizontalAlignment } from '../../constants';
+import { GenericProps, HasPolymorphicAs, HasTheme, JSXElement } from '../../types';
+export type As = 'div' | 'figcaption';
+export type ImageCaptionMetadata = {
+    /** Image title to display in the caption. */
+    title?: string;
+    /** Props to pass to the title. */
+    titleProps?: GenericProps;
+    /** Image description. Can be either a string, ReactNode, or sanitized html object. */
+    description?: JSXElement | {
+        __html: string;
+    };
+    /** Props to pass to the description. */
+    descriptionProps?: GenericProps;
+    /** Tag content. */
+    tags?: JSXElement;
+    /** Caption custom CSS style. */
+    captionStyle?: GenericProps;
+    /** Props to pass to the wrapper FlexBox element. */
+    wrapperProps?: GenericProps;
+    /** FlexBox component injected by the framework wrapper (React or Vue). */
+    FlexBox: any;
+    /** Text component injected by the framework wrapper (React or Vue). */
+    Text: any;
+};
+export type ImageCaptionPropsToOverride = 'FlexBox' | 'Text' | 'wrapperProps';
+export type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme & HasPolymorphicAs<AS> & ImageCaptionMetadata & {
+    /** Base className for sub elements */
+    baseClassName?: string;
+    /** Alignment. */
+    align?: HorizontalAlignment;
+    /** Truncate text on title & description (no line wrapping). */
+    truncate?: boolean;
+};
+/** Internal component used to render image captions */
+export declare const ImageCaption: <AS extends As>(props: ImageCaptionProps<AS>) => import("react").JSX.Element | null;

package/js/components/ImageBlock/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;
+    imageBlock: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

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

@@ -0,0 +1,63 @@
+import { HorizontalAlignment, Size } from '../../constants';
+import type { CommonRef, HasClassName, JSXElement, LumxClassName, GenericProps, HasTheme, ValueOf } from '../../types';
+import { ImageCaptionMetadata, ImageCaptionPropsToOverride } from './ImageCaption';
+/**
+ * Image block variants.
+ */
+export declare const ImageBlockCaptionPosition: {
+    readonly below: "below";
+    readonly over: "over";
+};
+export type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;
+/**
+ *  Image block sizes.
+ */
+export type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+export interface ImageBlockProps extends HasClassName, HasTheme, Omit<ImageCaptionMetadata, ImageCaptionPropsToOverride> {
+    /** Action toolbar content. */
+    actions?: JSXElement;
+    /** Alignment. */
+    align?: HorizontalAlignment;
+    /** Image alternative text. */
+    alt: string;
+    /** Caption position. */
+    captionPosition?: ImageBlockCaptionPosition;
+    /** Whether the image has to fill its container height or not. */
+    fillHeight?: boolean;
+    /** Image URL. */
+    image: string;
+    /** Size variant. */
+    size?: ImageBlockSize;
+    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+    thumbnailProps?: GenericProps;
+    /** reference to the root element */
+    ref?: CommonRef;
+    /** component for rendering the thumbnail */
+    Thumbnail: any;
+    /** component for rendering the image caption */
+    ImageCaption: any;
+}
+export type ImageBlockPropsToOverride = 'Thumbnail' | 'ImageCaption' | 'thumbnailProps';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "ImageBlock";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ImageBlockProps>;
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const ImageBlock: (props: ImageBlockProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+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;
+    mosaic: HTMLElement;
+    thumbnails: HTMLElement[];
+    overlay: HTMLElement | null;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/TextField/RawInputTextarea.d.ts

@@ -8,6 +8,7 @@ export interface RawInputTextareaProps extends HasTheme, HasClassName {
     name?: string | undefined;
     ref?: CommonRef;
     handleChange?: (value: string, name?: string, event?: any) => void;
+    handleInput?: (value: string, name?: string, event?: any) => void;
 }
 /**
  * Component default props.

package/js/types/jsx/PropsToOverride.d.ts

@@ -1,2 +1,2 @@
 /** list of generic props defined on JSX that need to be redefined for each framework */
-export type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleKeyPress' | 'handleClose' | 'handleFocus' | 'handleBeforeClick' | 'handleAfterClick' | 'handleMouseEnter' | 'handleMouseLeave' | 'handleKeyDown';
+export type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleInput' | 'handleKeyPress' | 'handleClose' | 'handleFocus' | 'handleBeforeClick' | 'handleAfterClick' | 'handleMouseEnter' | 'handleMouseLeave' | 'handleKeyDown';

package/lumx.css

@@ -5689,7 +5689,17 @@ table {
 /* ==========================================================================
    Combobox
    ========================================================================== */
+.lumx-combobox-input .lumx-text-field__chips {
+  width: -moz-min-content;
+  width: min-content;
+  min-width: 0;
+}
+
 .lumx-combobox-popover {
+  max-height: 50vh;
+  color: var(--lumx-color-dark-N);
+}
+.lumx-combobox-popover__scroll {
   overflow-y: auto;
 }
 
@@ -5712,7 +5722,11 @@ table {
 .lumx-combobox-option-skeleton:nth-child(3n+2) .lumx-skeleton-typography {
   width: min(55%, 170px);
 }
-
+.lumx-combobox-option .lumx-list-item__content {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+}
 .lumx-combobox-option-more-info__popover {
   max-width: 256px;
   padding: 16px;
@@ -8914,7 +8928,7 @@ table {
 
 /* Section
    ========================================================================== */
-.lumx-list-section:not(:first-child):not(.lumx-list-section:not([hidden]) + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
+.lumx-list-section:not([hidden]) ~ .lumx-list-section:not(.lumx-list-section:not([hidden]) + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
   content: "";
   display: block;
   height: 1px;

package/package.json

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

package/scss/components/combobox/_index.scss

@@ -2,8 +2,23 @@
    Combobox
    ========================================================================== */
 
+// ---- Input -----------------------
+.#{$lumx-base-prefix}-combobox-input {
+    .#{$lumx-base-prefix}-text-field__chips {
+        width: min-content;
+        min-width: 0;
+    }
+}
+
+// ---- Popover -----------------------
+
 .#{$lumx-base-prefix}-combobox-popover {
-    overflow-y: auto;
+    max-height: 50vh;
+    color: var(--lumx-color-dark-N);
+
+    &__scroll {
+        overflow-y: auto;
+    }
 }
 
 // Hide popover and list when there is no option, no state, and no skeleton
@@ -17,28 +32,42 @@
     }
 }
 
+// ---- State -----------------------
+
 .#{$lumx-base-prefix}-combobox-state {
     text-align: center;
 }
 
-// Skeleton option placeholders — width variation via :nth-child cycling
-.#{$lumx-base-prefix}-combobox-option-skeleton {
-    .#{$lumx-base-prefix}-skeleton-typography {
-        width: min(65%, 200px);
-    }
+// ---- Option -----------------------
+
+.#{$lumx-base-prefix}-combobox-option {
+    // Skeleton option placeholders — width variation via :nth-child cycling
+    &-skeleton {
+        .#{$lumx-base-prefix}-skeleton-typography {
+            width: min(65%, 200px);
+        }
 
-    &:nth-child(3n + 1) .#{$lumx-base-prefix}-skeleton-typography {
-        width: min(70%, 230px);
+        &:nth-child(3n + 1) .#{$lumx-base-prefix}-skeleton-typography {
+            width: min(70%, 230px);
+        }
+
+        &:nth-child(3n + 2) .#{$lumx-base-prefix}-skeleton-typography {
+            width: min(55%, 170px);
+        }
     }
 
-    &:nth-child(3n + 2) .#{$lumx-base-prefix}-skeleton-typography {
-        width: min(55%, 170px);
+    // Center option content
+    .#{$lumx-base-prefix}-list-item__content {
+        display: flex;
+        flex-direction: column;
+        justify-items: center;
     }
-}
 
-.#{$lumx-base-prefix}-combobox-option-more-info {
-    &__popover {
-        max-width: $lumx-size-xxl;
-        padding: $lumx-spacing-unit-big;
+    // Option more info popover sizing
+    &-more-info {
+        &__popover {
+            max-width: $lumx-size-xxl;
+            padding: $lumx-spacing-unit-big;
+        }
     }
 }

package/scss/components/list/_mixins.scss

@@ -144,10 +144,12 @@
     $divider: '.#{$lumx-base-prefix}-list-divider';
     $section: &;
 
-    // Insert a divider before each section NOT directly following another visible section or an explicit divider.
-    // Avoids double dividers when two visible sections are adjacent or when a ListDivider separates them.
-    // Uses #{$section}:not([hidden]) so that hidden sections in between don't prevent the divider.
-    &:not(:first-child):not(#{$section}:not([hidden]) + &):not(#{$divider} + &) {
+    // Insert a divider before each section that:
+    // 1. Is not directly following another visible section (avoids double dividers)
+    // 2. Is not directly following an explicit divider
+    // 3. Has at least one preceding visible section (uses `~` general sibling combinator
+    //    so hidden-first-sections don't get a spurious top divider)
+    #{$section}:not([hidden]) ~ &:not(#{$section}:not([hidden]) + &):not(#{$divider} + &) {
         &::before {
             content: '';
             display: block;