mtrl 0.10.0-next.3 → 0.10.0

package/dist/components/badge/features.js

@@ -5,7 +5,7 @@ const COLOR_ERROR = 'error';
 const POSITION_TOP_RIGHT = 'top-right';
 export const withVisibility = () => (component) => {
     const visible = component.config.visible !== false;
-    const nothingToShow = isEmptyBadgeLabel(formatBadgeLabel(component.config.label ?? "", component.config.max));
+    const nothingToShow = component.config.variant !== "small" && isEmptyBadgeLabel(formatBadgeLabel(component.config.label ?? "", component.config.max));
     if (!visible || nothingToShow) {
         component.element.classList.add(`${component.getClass('badge')}--invisible`);
     }

package/dist/components/bottom-sheet/api.d.ts

@@ -1,4 +1,5 @@
 import { BottomSheetComponent, BottomSheetEventHandlers, BottomSheetState } from "./types.js";
+import type { EventCallback } from "../../core/state/emitter.js";
 interface ApiOptions {
     state: {
         open: () => void;
@@ -23,8 +24,8 @@ interface ApiOptions {
 interface BaseComponent {
     element: HTMLElement;
     getClass: (name: string) => string;
-    on: (event: string, handler: (...args: never[]) => void) => unknown;
-    off: (event: string, handler: (...args: never[]) => void) => unknown;
+    on: (event: string, handler: EventCallback) => unknown;
+    off: (event: string, handler: EventCallback) => unknown;
 }
 /**
  * The public surface. Every method here is backed by a feature above it; none
@@ -38,6 +39,6 @@ export declare const withAPI: ({ state, structure, drag, lifecycle }: ApiOptions
  * so handlers passed at creation are silently dropped. This one reads it.
  */
 export declare const applyEventHandlers: (component: {
-    on: (event: string, handler: (...args: never[]) => void) => unknown;
+    on: (event: string, handler: EventCallback) => unknown;
 }, handlers?: BottomSheetEventHandlers) => void;
 export {};

package/dist/components/bottom-sheet/features/drag.d.ts

@@ -2,6 +2,8 @@ import { BottomSheetState } from "../types.js";
 interface DragComponent {
     getClass: (name: string) => string;
     emit: (event: string, data?: unknown) => unknown;
+    on?: (event: string, handler: () => void) => unknown;
+    off?: (event: string, handler: () => void) => unknown;
     structure: {
         container: HTMLElement;
         handle: HTMLElement | null;
@@ -9,6 +11,7 @@ interface DragComponent {
     state: {
         getState: () => BottomSheetState;
         setState: (next: BottomSheetState) => void;
+        open: (to?: BottomSheetState) => void;
         close: () => void;
     };
 }

package/dist/components/bottom-sheet/features/drag.js

@@ -8,6 +8,25 @@ export const withDrag = () => (component) => {
     let startTime = 0;
     let offset = 0;
     let dragging = false;
+    let dragged = false;
+    const label = () => {
+        handle.setAttribute("aria-label", state.getState() === BOTTOM_SHEET_STATES.EXPANDED ? "Close sheet" : "Expand sheet");
+    };
+    const onClick = () => {
+        if (dragged) {
+            dragged = false;
+            return;
+        }
+        const current = state.getState();
+        if (current === BOTTOM_SHEET_STATES.EXPANDED)
+            state.close();
+        else if (current === BOTTOM_SHEET_STATES.PARTIAL)
+            state.setState(BOTTOM_SHEET_STATES.EXPANDED);
+        else
+            state.open();
+    };
+    label();
+    component.on?.(BOTTOM_SHEET_EVENTS.STATE_CHANGE, label);
     const settle = (distance, velocity) => {
         const current = state.getState();
         const far = Math.abs(distance) >= BOTTOM_SHEET_DEFAULTS.POSITIONAL_THRESHOLD;
@@ -45,6 +64,7 @@ export const withDrag = () => (component) => {
         const velocity = (offset / elapsed) * 1000;
         structure.container.style.transition = "";
         structure.container.style.transform = "";
+        dragged = Math.abs(offset) > 4;
         const previous = state.getState();
         const next = settle(offset, velocity);
         if (next === BOTTOM_SHEET_STATES.HIDDEN)
@@ -57,6 +77,7 @@ export const withDrag = () => (component) => {
     handle.addEventListener("pointermove", onPointerMove);
     handle.addEventListener("pointerup", onPointerUp);
     handle.addEventListener("pointercancel", onPointerUp);
+    handle.addEventListener("click", onClick);
     return {
         ...component,
         drag: {
@@ -65,6 +86,8 @@ export const withDrag = () => (component) => {
                 handle.removeEventListener("pointermove", onPointerMove);
                 handle.removeEventListener("pointerup", onPointerUp);
                 handle.removeEventListener("pointercancel", onPointerUp);
+                handle.removeEventListener("click", onClick);
+                component.off?.(BOTTOM_SHEET_EVENTS.STATE_CHANGE, label);
             },
         },
     };

package/dist/components/bottom-sheet/features/state.js

@@ -1,6 +1,6 @@
 import { BOTTOM_SHEET_CLASSES, BOTTOM_SHEET_EVENTS, BOTTOM_SHEET_STATES, BOTTOM_SHEET_VARIANTS, } from "../constants.js";
 import { deepActiveElement, wrapTab } from "../../../core/dom/focus.js";
-import { hideFromTopLayer, onTopLayerClose, showInTopLayer, } from "../../../core/dom/layer.js";
+import { hideFromTopLayer, inertOutside, onTopLayerClose, showInTopLayer, } from "../../../core/dom/layer.js";
 export const withState = (config) => (component) => {
     const { element, getClass, structure } = component;
     const root = getClass(BOTTOM_SHEET_CLASSES.ROOT);
@@ -8,6 +8,20 @@ export const withState = (config) => (component) => {
     const top = config.layer === "top";
     let state = config.initialState ?? BOTTOM_SHEET_STATES.HIDDEN;
     let previouslyFocused = null;
+    let restorePage = null;
+    const trap = (on) => {
+        if (!isModal || top)
+            return;
+        if (on && !restorePage) {
+            restorePage = inertOutside(element);
+            element.addEventListener("keydown", handleTab);
+        }
+        else if (!on && restorePage) {
+            restorePage();
+            restorePage = null;
+            element.removeEventListener("keydown", handleTab);
+        }
+    };
     const applyState = (next) => {
         for (const name of Object.values(BOTTOM_SHEET_STATES)) {
             element.classList.toggle(`${root}--${name}`, name === next);
@@ -31,6 +45,8 @@ export const withState = (config) => (component) => {
             return;
         if (!config.closeOnEscape)
             return;
+        if (!isModal && !event.composedPath().includes(element))
+            return;
         event.preventDefault();
         close();
     };
@@ -62,6 +78,7 @@ export const withState = (config) => (component) => {
         }
         setState(to);
         if (wasHidden) {
+            trap(true);
             if (isModal)
                 structure.container.focus();
             component.emit(BOTTOM_SHEET_EVENTS.OPEN);
@@ -71,6 +88,7 @@ export const withState = (config) => (component) => {
         if (state === BOTTOM_SHEET_STATES.HIDDEN)
             return;
         setState(BOTTOM_SHEET_STATES.HIDDEN);
+        trap(false);
         if (top)
             hideFromTopLayer(element);
         if (isModal && previouslyFocused?.isConnected) {
@@ -110,6 +128,7 @@ export const withState = (config) => (component) => {
                 element.removeEventListener("cancel", handleCancel);
                 element.removeEventListener("click", handleBackdropClick);
                 element.removeEventListener("keydown", handleTab);
+                trap(false);
                 stopCloses?.();
                 if (top)
                     hideFromTopLayer(element);

package/dist/components/bottom-sheet/features/structure.js

@@ -26,9 +26,10 @@ export const withStructure = (config) => (component) => {
     }
     let handle = null;
     if (config.dragHandle) {
-        handle = document.createElement("div");
-        handle.className = getClass(BOTTOM_SHEET_CLASSES.HANDLE);
-        handle.setAttribute("aria-hidden", "true");
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = getClass(BOTTOM_SHEET_CLASSES.HANDLE);
+        handle = button;
         container.appendChild(handle);
     }
     let title = null;

package/dist/components/button/features/progress.js

@@ -35,9 +35,11 @@ export const withProgress = (config) => (component) => {
                 progress = p;
                 addClass(progress.element, component.getClass("button__progress"));
                 progress.element.style.display = "none";
-                Object.entries(progressEventHandlers).forEach(([event, handler]) => {
-                    p.on(event, handler);
-                });
+                for (const event of Object.keys(progressEventHandlers)) {
+                    const handler = progressEventHandlers[event];
+                    if (handler)
+                        p.on(event, handler);
+                }
                 component.progress = progress;
                 return progress;
             });

package/dist/components/button-group/button-group.js

@@ -98,6 +98,7 @@ const createButtonGroup = (config = {}) => {
             const changeEvent = {
                 buttonGroup,
                 values: selected.map(valueOf),
+                value: selection === 'multi' ? selected.map(valueOf) : (selected[0] ? valueOf(selected[0]) : null),
                 selected,
                 button,
                 originalEvent
@@ -128,7 +129,8 @@ const createButtonGroup = (config = {}) => {
             else
                 selectedValues.delete(value);
             applySelectedState(target, selected);
-            emitChange(button ?? target, originalEvent);
+            if (button)
+                emitChange(button, originalEvent);
             return true;
         };
         buttonConfigs.forEach((buttonConfig, index) => {

package/dist/components/button-group/config.d.ts

@@ -90,13 +90,13 @@ export declare const getButtonConfig: (buttonConfig: NonNullable<ButtonGroupConf
     rawClass?: string | string[] | undefined;
     progress?: (import("../index.js").ProgressConfig | boolean) | undefined;
     toggle?: boolean | undefined;
-    prefix?: string | undefined;
-    iconSize?: string | undefined;
     componentName?: string | undefined;
     type?: "button" | "submit" | "reset" | undefined;
-    showProgress?: boolean | undefined;
-    toggleOnClick?: boolean | undefined;
+    prefix?: string | undefined;
     parent?: (HTMLElement | string | null) | undefined;
+    iconSize?: string | undefined;
+    toggleOnClick?: boolean | undefined;
+    showProgress?: boolean | undefined;
 } | {
     variant: ButtonGroupVariant | undefined;
     size: import("./types.js").ButtonGroupSize;
@@ -129,13 +129,13 @@ export declare const getButtonConfig: (buttonConfig: NonNullable<ButtonGroupConf
     rawClass?: string | string[] | undefined;
     progress?: (import("../index.js").ProgressConfig | boolean) | undefined;
     toggle?: boolean | undefined;
-    prefix?: string | undefined;
-    iconSize?: string | undefined;
     componentName?: string | undefined;
     type?: "button" | "submit" | "reset" | undefined;
-    showProgress?: boolean | undefined;
-    toggleOnClick?: boolean | undefined;
+    prefix?: string | undefined;
     parent?: (HTMLElement | string | null) | undefined;
+    iconSize?: string | undefined;
+    toggleOnClick?: boolean | undefined;
+    showProgress?: boolean | undefined;
 };
 /**
  * Maps variant name to button variant

package/dist/components/button-group/config.js

@@ -1,4 +1,5 @@
 import { createComponentConfig } from "../../core/config/component.js";
+import { cornerToken } from "../../core/theme/shape.js";
 import { BUTTON_GROUP_DEFAULTS, BUTTON_GROUP_DENSITY, BUTTON_GROUP_SIZE_TOKENS, BUTTON_GROUP_CONNECTED_GAP, BUTTON_GROUP_CONNECTED_PRESSED_CORNER, BUTTON_GROUP_DENSITY_STEP } from "./constants.js";
 export const DEFAULT_CONFIG = {
     kind: BUTTON_GROUP_DEFAULTS.KIND,
@@ -70,8 +71,8 @@ export const getSizeStyles = (prefix, size, kind, density = BUTTON_GROUP_DENSITY
         [`--${prefix}-button-group-height`]: `${height}px`,
         [`--${prefix}-button-group-icon`]: `${tokens.icon}px`,
         [`--${prefix}-button-group-gap`]: `${gap}px`,
-        [`--${prefix}-button-group-inner-corner`]: `${tokens.connectedCorner}px`,
-        [`--${prefix}-button-group-pressed-corner`]: `${BUTTON_GROUP_CONNECTED_PRESSED_CORNER}px`,
+        [`--${prefix}-button-group-inner-corner`]: cornerToken(tokens.connectedStep, tokens.connectedCorner, prefix),
+        [`--${prefix}-button-group-pressed-corner`]: cornerToken("extra-small", BUTTON_GROUP_CONNECTED_PRESSED_CORNER, prefix),
         [`--${prefix}-button-group-radius`]: `${height / 2}px`
     };
 };

package/dist/components/button-group/constants.d.ts

@@ -72,8 +72,8 @@ export declare const BUTTON_GROUP_SIZES: {
 };
 /**
  * Material 3 button group tokens per size (dp): container height, button
- * icon size, standard between-space, connected inner corner
- * (m3.material.io button group specs; ButtonGroupSmallTokens.kt and
+ * icon size, standard between-space, connected inner corner and its shape
+ * scale step (FLO-331) (m3.material.io button group specs; ButtonGroupSmallTokens.kt and
  * ConnectedButtonGroupSmallTokens.kt for the s size)
  */
 export declare const BUTTON_GROUP_SIZE_TOKENS: {
@@ -82,30 +82,35 @@ export declare const BUTTON_GROUP_SIZE_TOKENS: {
         readonly icon: 20;
         readonly standardGap: 18;
         readonly connectedCorner: 4;
+        readonly connectedStep: "extra-small";
     };
     readonly s: {
         readonly height: 40;
         readonly icon: 20;
         readonly standardGap: 12;
         readonly connectedCorner: 8;
+        readonly connectedStep: "small";
     };
     readonly m: {
         readonly height: 56;
         readonly icon: 24;
         readonly standardGap: 8;
         readonly connectedCorner: 8;
+        readonly connectedStep: "small";
     };
     readonly l: {
         readonly height: 96;
         readonly icon: 32;
         readonly standardGap: 8;
         readonly connectedCorner: 16;
+        readonly connectedStep: "large";
     };
     readonly xl: {
         readonly height: 136;
         readonly icon: 40;
         readonly standardGap: 8;
         readonly connectedCorner: 20;
+        readonly connectedStep: "large-increased";
     };
 };
 /** Connected groups use 2dp between buttons at every size */

package/dist/components/button-group/constants.js

@@ -41,11 +41,11 @@ export const BUTTON_GROUP_SIZES = {
     XL: 'xl'
 };
 export const BUTTON_GROUP_SIZE_TOKENS = {
-    xs: { height: 32, icon: 20, standardGap: 18, connectedCorner: 4 },
-    s: { height: 40, icon: 20, standardGap: 12, connectedCorner: 8 },
-    m: { height: 56, icon: 24, standardGap: 8, connectedCorner: 8 },
-    l: { height: 96, icon: 32, standardGap: 8, connectedCorner: 16 },
-    xl: { height: 136, icon: 40, standardGap: 8, connectedCorner: 20 }
+    xs: { height: 32, icon: 20, standardGap: 18, connectedCorner: 4, connectedStep: "extra-small" },
+    s: { height: 40, icon: 20, standardGap: 12, connectedCorner: 8, connectedStep: "small" },
+    m: { height: 56, icon: 24, standardGap: 8, connectedCorner: 8, connectedStep: "small" },
+    l: { height: 96, icon: 32, standardGap: 8, connectedCorner: 16, connectedStep: "large" },
+    xl: { height: 136, icon: 40, standardGap: 8, connectedCorner: 20, connectedStep: "large-increased" }
 };
 export const BUTTON_GROUP_CONNECTED_GAP = 2;
 export const BUTTON_GROUP_CONNECTED_PRESSED_CORNER = 4;

package/dist/components/button-group/types.d.ts

@@ -38,6 +38,11 @@ export interface ButtonGroupChangeEvent {
     buttonGroup: ButtonGroupComponent;
     /** Values of the selected buttons, in button order */
     values: string[];
+    /**
+     * The selection in the `value` shape of the `<m-button-group>` element's
+     * `change`: an array for a multi-select group, a string or null otherwise.
+     */
+    value: string | string[] | null;
     selected: ButtonComponent[];
     /** The button whose click caused the change, if any */
     button?: ButtonComponent;

package/dist/components/card/api.d.ts

@@ -1,4 +1,5 @@
 import { BaseComponent, CardComponent, ApiOptions } from "./types.js";
+import type { EventCallback } from "../../core/state/emitter.js";
 /**
  * Enhances a card component with API methods.
  * This follows the higher-order function pattern to add public API methods
@@ -15,6 +16,9 @@ import { BaseComponent, CardComponent, ApiOptions } from "./types.js";
  */
 type ComponentWithElements = Omit<BaseComponent, 'config' | 'addClass'> & {
     addClass: (...classes: string[]) => unknown;
+    /** From withEvents in the card's pipe */
+    on: (event: string, handler: EventCallback) => unknown;
+    off: (event: string, handler: EventCallback) => unknown;
 };
 export declare const withAPI: ({ lifecycle, config }: ApiOptions) => (component: ComponentWithElements) => CardComponent;
 export {};

package/dist/components/card/api.js

@@ -2,6 +2,14 @@ export const withAPI = ({ lifecycle, config }) => (component) => ({
     ...component,
     element: component.element,
     config,
+    on(event, handler) {
+        component.on(event, handler);
+        return this;
+    },
+    off(event, handler) {
+        component.off(event, handler);
+        return this;
+    },
     addContent(contentElement) {
         if (contentElement && contentElement.classList.contains(`${component.getClass('card')}__content`)) {
             component.element.appendChild(contentElement);

package/dist/components/card/card.js

@@ -3,12 +3,11 @@ import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withVariant, withRipple, withLifecycle } from "../../core/compose/features/index.js";
 import { withAPI } from "./api.js";
 import { createBaseConfig, getElementConfig, getApiConfig, withInteractiveBehavior, processInlineConfig, applyInlineConfiguration } from "./config.js";
-import { withElevation } from "./features.js";
 const createCard = (config = {}) => {
     const processedConfig = processInlineConfig(config);
     const baseConfig = createBaseConfig(processedConfig);
     try {
-        const card = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), baseConfig.clickable ? withRipple(baseConfig) : (c) => c, withLifecycle(), withInteractiveBehavior, withElevation, comp => withAPI({ ...getApiConfig(comp), config: baseConfig })(comp))(baseConfig);
+        const card = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), baseConfig.clickable ? withRipple(baseConfig) : (c) => c, withLifecycle(), withInteractiveBehavior, comp => withAPI({ ...getApiConfig(comp), config: baseConfig })(comp))(baseConfig);
         applyInlineConfiguration(card, processedConfig);
         return card;
     }

package/dist/components/card/config.js

@@ -70,7 +70,7 @@ export const applyInlineConfiguration = (card, config) => {
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "card");
 export const getElementConfig = (config) => {
     const isInteractive = config.interactive || config.clickable;
-    const defaultRole = isInteractive ? "button" : "region";
+    const defaultRole = config.clickable ? "button" : "article";
     const ariaAttributes = {};
     if (config.aria) {
         Object.entries(config.aria).forEach(([key, value]) => {
@@ -83,7 +83,7 @@ export const getElementConfig = (config) => {
     if (!ariaAttributes["role"] && !config.aria?.role) {
         ariaAttributes["role"] = defaultRole;
     }
-    if (isInteractive && !ariaAttributes["tabindex"]) {
+    if (config.clickable && !ariaAttributes["tabindex"]) {
         ariaAttributes["tabindex"] = "0";
     }
     return createElementConfig(config, {
@@ -115,16 +115,6 @@ export const withInteractiveBehavior = (comp) => {
     const config = comp.config;
     const isInteractive = config.interactive || config.clickable;
     if (isInteractive) {
-        comp.element.addEventListener("mouseenter", () => {
-            if (config.variant === CARD_VARIANTS.ELEVATED) {
-                comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL2));
-            }
-        });
-        comp.element.addEventListener("mouseleave", () => {
-            if (config.variant === CARD_VARIANTS.ELEVATED) {
-                comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
-            }
-        });
         comp.element.addEventListener("keydown", (e) => {
             if ((e.key === "Enter" || e.key === " ") && config.clickable) {
                 e.preventDefault();
@@ -141,7 +131,6 @@ export const withInteractiveBehavior = (comp) => {
     if (config.draggable) {
         comp.element.setAttribute("draggable", "true");
         comp.element.addEventListener("dragstart", (e) => {
-            comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL4));
             comp.element.classList.add(`${comp.getClass("card")}--dragging`);
             comp.emit?.("dragstart", { event: e });
             if (e.dataTransfer) {
@@ -151,7 +140,6 @@ export const withInteractiveBehavior = (comp) => {
             }
         });
         comp.element.addEventListener("dragend", (e) => {
-            comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
             comp.element.classList.remove(`${comp.getClass("card")}--dragging`);
             comp.emit?.("dragend", { event: e });
         });

package/dist/components/card/content.js

@@ -21,7 +21,6 @@ export const createCardContent = (config = {}) => {
                 config.padding === false ? `${PREFIX}-card__content--no-padding` : null
             ].filter((name) => Boolean(name)),
             attributes: {
-                'role': 'region',
                 'style': 'display: block; color: inherit;'
             }
         }))(baseConfig);
@@ -58,10 +57,6 @@ export const createCardHeader = (config = {}) => {
             tag: 'div',
             componentName: 'card__header',
             className: config.class,
-            attributes: {
-                'role': 'heading',
-                'aria-level': '3'
-            }
         }))(baseConfig);
         const textContainer = createElement({
             tag: 'div',
@@ -81,7 +76,7 @@ export const createCardHeader = (config = {}) => {
         }
         if (config.subtitle) {
             createElement({
-                tag: 'h4',
+                tag: 'p',
                 className: `${PREFIX}-card__header-subtitle`,
                 text: config.subtitle,
                 container: textContainer

package/dist/components/card/features.d.ts

@@ -52,27 +52,13 @@ export declare const withLoading: (config?: LoadingConfig) => (component: BaseCo
     loading: LoadingFeature;
 };
 /**
- * Higher-order function to add elevation to a card based on its variant.
+ * Did nothing visible: it wrote a `--{prefix}-card-elevation` custom property
+ * that no stylesheet reads. A card's elevation comes from its variant and
+ * state classes in the stylesheet.
  *
- * Sets the initial elevation CSS variable according to Material Design 3 guidelines:
- * - Elevated variant: 1dp elevation
- * - Filled and outlined variants: 0dp elevation
- *
- * These elevation values affect shadows and surface appearance of the card
- * to create appropriate visual hierarchy.
- *
- * @param {BaseComponent} component - Card component
- * @returns {BaseComponent} Card component with elevation applied
+ * @deprecated Since 0.10 (FLO-323): a no-op, removed in 1.0. Drop it from
+ * the composition.
  * @category Components
- * @example
- * ```typescript
- * // Apply elevation in the composition chain
- * const card = pipe(
- *   createBase,
- *   withElement(config),
- *   withElevation
- * )(baseConfig);
- * ```
  */
 export declare const withElevation: <C extends ElementComponent>(component: C) => C;
 /**

package/dist/components/card/features.js

@@ -6,7 +6,6 @@ const HIDDEN_ACTION_STYLE = {
     visibility: "hidden",
 };
 import { createElement } from "../../core/dom/create.js";
-import { CARD_ELEVATION_LEVELS } from "./config.js";
 export const withLoading = (config = {}) => (component) => {
     const initialState = config.initialState || false;
     let loadingElement = null;
@@ -50,16 +49,7 @@ export const withLoading = (config = {}) => (component) => {
         },
     };
 };
-export const withElevation = (component) => {
-    const config = component.config;
-    if (config.variant === "elevated") {
-        component.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
-    }
-    else {
-        component.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL0));
-    }
-    return component;
-};
+export const withElevation = (component) => component;
 export const withExpandable = (config = {}) => (component) => {
     const initialExpanded = config.initialExpanded || false;
     let isExpanded = initialExpanded;

package/dist/components/card/index.d.ts

@@ -65,7 +65,7 @@ export { default } from "./card.js";
  *
  * These types define the structure and behavior of the Card component.
  */
-export type { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardContentConfig, CardActionsConfig, CardMediaConfig, CardAriaAttributes, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature, } from "./types.js";
+export type { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardContentConfig, CardActionsConfig, CardMediaConfig, CardAriaAttributes, CardComponent, CardEvents, LoadingFeature, ExpandableFeature, SwipeableFeature, } from "./types.js";
 export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./content.js";
 export { withAPI } from "./api.js";
 export { withLoading, withExpandable, withSwipeable, withElevation, } from "./features.js";

package/dist/components/card/types.d.ts

@@ -1,4 +1,5 @@
 import type { ButtonConfig as BaseButtonConfig } from "../button/types.js";
+import type { ForwardedEventPayload } from "../../core/dom/index.js";
 /**
  * Card variant types following Material Design 3 guidelines.
  * - elevated: Card with shadow elevation (default)
@@ -58,11 +59,18 @@ export interface ButtonConfig extends Omit<BaseButtonConfig, "variant"> {
 export interface CardSchema {
     /** Card variant type (elevated, filled, outlined) */
     variant?: CardVariant | string;
-    /** Whether the card is interactive */
+    /**
+     * The hover and press states and their elevation, for a card the app
+     * makes interactive itself. Not a control: no role of button and no tab
+     * stop; `clickable` is (FLO-109).
+     */
     interactive?: boolean;
     /** Whether the card should take full width */
     fullWidth?: boolean;
-    /** Whether the card is clickable (with ripple effect) */
+    /**
+     * A card that acts on activation: a button (role, tab stop, Enter and
+     * Space click it) with the ripple (FLO-109)
+     */
     clickable?: boolean;
     /** Whether the card is draggable */
     draggable?: boolean;
@@ -109,7 +117,7 @@ export interface CardAriaAttributes {
     labelledby?: string;
     /** ARIA describedby */
     describedby?: string;
-    /** ARIA role (default is 'region' for non-interactive, 'button' for interactive) */
+    /** ARIA role (default: 'button' for a clickable card, 'article' for any other) */
     role?: string;
     /** Additional ARIA attributes as key-value pairs */
     [key: string]: string | undefined;
@@ -277,6 +285,25 @@ export interface CardComponentConfig extends CardSchema {
     /** CSS class prefix */
     prefix: string;
 }
+/**
+ * The card's events (FLO-323). A clickable card forwards `click`; an
+ * interactive one `mouseenter`, `mouseleave`, `keydown`, `focus` and `blur`;
+ * a draggable one emits `dragstart` and `dragend`.
+ */
+export interface CardEvents {
+    click: (payload: ForwardedEventPayload<MouseEvent, HTMLElement>) => void;
+    mouseenter: (payload: ForwardedEventPayload<MouseEvent, HTMLElement>) => void;
+    mouseleave: (payload: ForwardedEventPayload<MouseEvent, HTMLElement>) => void;
+    keydown: (payload: ForwardedEventPayload<KeyboardEvent, HTMLElement>) => void;
+    focus: (payload: ForwardedEventPayload<FocusEvent, HTMLElement>) => void;
+    blur: (payload: ForwardedEventPayload<FocusEvent, HTMLElement>) => void;
+    dragstart: (payload: {
+        event: DragEvent;
+    }) => void;
+    dragend: (payload: {
+        event: DragEvent;
+    }) => void;
+}
 /**
  * Card component interface with methods.
  * This is the public API of the card component that users interact with.
@@ -286,6 +313,10 @@ export interface CardComponentConfig extends CardSchema {
  * @category Components
  */
 export interface CardComponent extends BaseComponent {
+    /** Subscribes to one of the card's events (FLO-323) */
+    on: <K extends keyof CardEvents>(event: K, handler: CardEvents[K]) => CardComponent;
+    /** Removes a handler added with `on` */
+    off: <K extends keyof CardEvents>(event: K, handler: CardEvents[K]) => CardComponent;
     /**
      * Adds content to the card.
      * This method appends content to the card component.

package/dist/components/carousel/features/scroll.js

@@ -1,5 +1,6 @@
 import { CAROUSEL_DEFAULTS, CAROUSEL_EVENTS, CAROUSEL_VARIANTS } from "../constants.js";
 import { resolveLayoutDefaults } from "../config.js";
+import { cornerToken } from "../../../core/theme/shape.js";
 import { multiBrowseKeylines, heroKeylines, uncontainedKeylines, fullScreenKeylines, } from "../keylines.js";
 import { createStrategy, keylinesForScrollOffset, snapPositionOffset, maxScrollOffset, placeItem, } from "../strategy.js";
 const FLING_VELOCITY = 0.4;
@@ -14,6 +15,9 @@ export const withScroll = (config) => (component) => {
         mediumLargeThreshold: CAROUSEL_DEFAULTS.MEDIUM_LARGE_THRESHOLD,
     };
     const cornerRadius = config.cornerRadius ?? CAROUSEL_DEFAULTS.CORNER_RADIUS;
+    const corner = cornerRadius === CAROUSEL_DEFAULTS.CORNER_RADIUS
+        ? cornerToken("extra-large", cornerRadius, config.prefix)
+        : `${cornerRadius}px`;
     const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function"
         ? window.matchMedia("(prefers-reduced-motion: reduce)")
         : null;
@@ -121,7 +125,7 @@ export const withScroll = (config) => (component) => {
             el.style[vertical ? "height" : "width"] = `${strategy.itemSize}px`;
             el.style[vertical ? "width" : "height"] = "";
         });
-        element.style.setProperty(`--${config.prefix}-carousel-corner`, `${cornerRadius}px`);
+        element.style.setProperty(`--${config.prefix}-carousel-corner`, corner);
     };
     const layout = () => {
         if (!strategy)
@@ -152,8 +156,8 @@ export const withScroll = (config) => (component) => {
             el.style.visibility = "";
             el.style.transform = vertical ? `translate3d(0, ${start}px, 0)` : `translate3d(${start}px, 0, 0)`;
             el.style.clipPath = vertical
-                ? `inset(${inset}px 0 round ${cornerRadius}px)`
-                : `inset(0 ${inset}px round ${cornerRadius}px)`;
+                ? `inset(${inset}px 0 round ${corner})`
+                : `inset(0 ${inset}px round ${corner})`;
             el.style.setProperty(`--${config.prefix}-carousel-fade`, fade.toFixed(3));
         }
         if (pending !== null) {