mtrl 0.10.0-next.2 → 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/config.js

@@ -1,17 +1,24 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
-import { BOTTOM_SHEET_DEFAULTS, BOTTOM_SHEET_STATES, } from "./constants.js";
+import { BOTTOM_SHEET_DEFAULTS, BOTTOM_SHEET_STATES, BOTTOM_SHEET_VARIANTS, } from "./constants.js";
+import { supportsTopLayer } from "../../core/dom/layer.js";
 export const defaultConfig = {
     variant: BOTTOM_SHEET_DEFAULTS.VARIANT,
     dragHandle: BOTTOM_SHEET_DEFAULTS.DRAG_HANDLE,
-    peekHeight: BOTTOM_SHEET_DEFAULTS.PEEK_HEIGHT,
     maxWidth: BOTTOM_SHEET_DEFAULTS.MAX_WIDTH,
     initialState: BOTTOM_SHEET_STATES.HIDDEN,
     closeOnScrimClick: BOTTOM_SHEET_DEFAULTS.CLOSE_ON_SCRIM_CLICK,
     closeOnEscape: BOTTOM_SHEET_DEFAULTS.CLOSE_ON_ESCAPE,
 };
-export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "bottom-sheet");
+export const createBaseConfig = (config = {}) => {
+    const merged = createComponentConfig(defaultConfig, config, "bottom-sheet");
+    if (merged.layer === "top" &&
+        (merged.variant !== BOTTOM_SHEET_VARIANTS.MODAL || !supportsTopLayer("modal"))) {
+        merged.layer = undefined;
+    }
+    return merged;
+};
 export const getElementConfig = (config) => createElementConfig(config, {
-    tag: "div",
+    tag: config.layer === "top" ? "dialog" : "div",
     className: [config.class].filter(Boolean),
     attributes: {
         "aria-hidden": "true",

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

@@ -25,8 +25,6 @@ export declare const BOTTOM_SHEET_STATES: {
  */
 export declare const BOTTOM_SHEET_DEFAULTS: {
     readonly VARIANT: "modal";
-    /** BottomSheetDefaults.SheetPeekHeight */
-    readonly PEEK_HEIGHT: 56;
     /** BottomSheetDefaults.SheetMaxWidth; wider viewports centre the sheet */
     readonly MAX_WIDTH: 640;
     /** A drag handle is part of the anatomy, so it is on unless asked otherwise */

package/dist/components/bottom-sheet/constants.js

@@ -9,7 +9,6 @@ export const BOTTOM_SHEET_STATES = {
 };
 export const BOTTOM_SHEET_DEFAULTS = {
     VARIANT: BOTTOM_SHEET_VARIANTS.MODAL,
-    PEEK_HEIGHT: 56,
     MAX_WIDTH: 640,
     DRAG_HANDLE: true,
     CLOSE_ON_SCRIM_CLICK: true,

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,10 +1,27 @@
 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, 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);
     const isModal = config.variant === BOTTOM_SHEET_VARIANTS.MODAL;
+    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);
@@ -28,6 +45,8 @@ export const withState = (config) => (component) => {
             return;
         if (!config.closeOnEscape)
             return;
+        if (!isModal && !event.composedPath().includes(element))
+            return;
         event.preventDefault();
         close();
     };
@@ -35,15 +54,31 @@ export const withState = (config) => (component) => {
         if (config.closeOnScrimClick)
             close();
     };
+    const handleBackdropClick = (event) => {
+        if (event.target === element)
+            handleScrimClick();
+    };
+    const handleTab = (event) => wrapTab(element, event);
+    const handleCancel = (event) => {
+        event.preventDefault();
+        if (config.closeOnEscape)
+            close();
+    };
     function open(to = BOTTOM_SHEET_STATES.PARTIAL) {
         if (state === to)
             return;
         const wasHidden = state === BOTTOM_SHEET_STATES.HIDDEN;
         if (wasHidden && isModal) {
-            previouslyFocused = document.activeElement;
+            previouslyFocused = deepActiveElement();
+        }
+        if (wasHidden && top) {
+            if (!showInTopLayer(element, { kind: "modal" }))
+                element.setAttribute("open", "");
+            void element.offsetWidth;
         }
         setState(to);
         if (wasHidden) {
+            trap(true);
             if (isModal)
                 structure.container.focus();
             component.emit(BOTTOM_SHEET_EVENTS.OPEN);
@@ -53,6 +88,9 @@ 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) {
             previouslyFocused.focus();
             previouslyFocused = null;
@@ -60,8 +98,19 @@ export const withState = (config) => (component) => {
         component.emit(BOTTOM_SHEET_EVENTS.CLOSE);
     }
     applyState(state);
-    if (config.closeOnEscape)
+    let stopCloses = null;
+    if (top) {
+        element.addEventListener("cancel", handleCancel);
+        element.addEventListener("click", handleBackdropClick);
+        element.addEventListener("keydown", handleTab);
+        stopCloses = onTopLayerClose(element, close);
+        if (state !== BOTTOM_SHEET_STATES.HIDDEN && element.isConnected) {
+            showInTopLayer(element, { kind: "modal" });
+        }
+    }
+    else if (config.closeOnEscape) {
         document.addEventListener("keydown", handleKeydown);
+    }
     structure.scrim?.addEventListener("click", handleScrimClick);
     return {
         ...component,
@@ -76,6 +125,13 @@ export const withState = (config) => (component) => {
             release: () => {
                 document.removeEventListener("keydown", handleKeydown);
                 structure.scrim?.removeEventListener("click", handleScrimClick);
+                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

@@ -1,4 +1,5 @@
 import { BOTTOM_SHEET_CLASSES, BOTTOM_SHEET_VARIANTS } from "../constants.js";
+import { PREFIX } from "../../../core/config.js";
 import { setHTML } from "../../../core/dom/html.js";
 export const withStructure = (config) => (component) => {
     const { element, getClass } = component;
@@ -6,7 +7,7 @@ export const withStructure = (config) => (component) => {
     element.classList.add(getClass(BOTTOM_SHEET_CLASSES.ROOT));
     element.classList.add(`${getClass(BOTTOM_SHEET_CLASSES.ROOT)}--${config.variant}`);
     let scrim = null;
-    if (isModal) {
+    if (isModal && config.layer !== "top") {
         scrim = document.createElement("div");
         scrim.className = getClass(BOTTOM_SHEET_CLASSES.SCRIM);
         element.appendChild(scrim);
@@ -20,11 +21,15 @@ export const withStructure = (config) => (component) => {
     if (config.maxWidth) {
         container.style.maxWidth = `${config.maxWidth}px`;
     }
+    if (config.peekHeight) {
+        container.style.setProperty(`--${PREFIX}-bottom-sheet-peek-height`, `${config.peekHeight}px`);
+    }
     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/bottom-sheet/types.d.ts

@@ -44,8 +44,9 @@ export interface BottomSheetConfig {
      */
     dragHandle?: boolean;
     /**
-     * Height of the partially expanded state, in pixels.
-     * @default 56
+     * Height of the partially expanded state, in pixels: a sheet with more
+     * content shows this much of it until it is expanded. Unset, the partial
+     * sheet shows its content up to half the screen.
      */
     peekHeight?: number;
     /**
@@ -72,6 +73,18 @@ export interface BottomSheetConfig {
     closeOnEscape?: boolean;
     /** Where to mount the sheet. Defaults to `document.body` */
     container?: HTMLElement;
+    /**
+     * `"top"` makes a modal sheet's root a `<dialog>` element, rendered in
+     * `container` like any sheet, and opens it with `showModal()`: in the
+     * browser's top layer, above every z-index and outside any clipping
+     * ancestor, with the rest of the page inert. The scrim is its `::backdrop`,
+     * and Escape reaches the sheet as the dialog's `cancel` event. The sheet
+     * slides as without it.
+     *
+     * A standard sheet stays in the page, and where the browser has no
+     * `showModal()` the sheet behaves as without it.
+     */
+    layer?: "top";
     /** Handlers registered at creation, equivalent to calling `on` for each */
     on?: BottomSheetEventHandlers;
     /** Extra classes for the root element */

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