mtrl 0.10.0-next.0 → 0.10.0-next.2

package/README.md

@@ -134,6 +134,60 @@ const button = createButton({
 
 Button progress and card actions load on demand; enable code splitting in your build to keep them out of the initial chunk.
 
+## Web components and frameworks (experimental)
+
+From the 0.10.0 prereleases (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. The API may still change.
+
+| Element | Framework component (Vue: `M` prefix, e.g. `MTextfield`) | Kind |
+|---------|---------------------|------|
+| `<m-button>` | `Button` | action, submits or resets its form |
+| `<m-icon-button>` | `IconButton` | action or toggle (`selected`) |
+| `<m-fab>`, `<m-extended-fab>` | `Fab`, `ExtendedFab` | action |
+| `<m-checkbox>` | `Checkbox` | form control (`checked`, `indeterminate`) |
+| `<m-switch>` | `Switch` | form control (`checked`) |
+| `<m-radios>` with `<m-radio>` | `Radios`, `Radio` | form control (`value`) |
+| `<m-slider>` | `Slider` | form control (`value`, `secondValue` with `range`) |
+| `<m-textfield>` | `Textfield` | form control (`value`) |
+| `<m-tabs>` with `<m-tab>` | `Tabs`, `Tab` | selection (`value`) |
+| `<m-progress>`, `<m-loading-indicator>` | `Progress`, `LoadingIndicator` | indicator |
+| `<m-badge>`, `<m-divider>` | `Badge`, `Divider` | display |
+
+More components follow through 0.10.x; the others are available as factories today.
+
+```html
+<script type="module">
+  import 'mtrl/elements/css';            // the elements' styles
+  import { defineAll } from 'mtrl/elements';
+  defineAll();                           // registers every element (<m-button>, <m-switch>, …)
+</script>
+
+<form>
+  <m-textfield name="email" type="email" label="Email" required></m-textfield>
+  <m-radios name="plan" value="free" aria-label="Plan">
+    <m-radio value="free">Free</m-radio>
+    <m-radio value="pro">Pro</m-radio>
+  </m-radios>
+  <m-switch name="news" checked>Newsletter</m-switch>
+  <m-button type="submit">Sign up</m-button>
+</form>
+
+<m-tabs value="songs">
+  <m-tab value="songs">Songs</m-tab>
+  <m-tab value="albums">Albums</m-tab>
+</m-tabs>
+```
+
+The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls: a `checked` or `value` attribute sets the state until the user or a script changes it, and `form.reset()` goes back to it. Form controls take part in forms (their host's `name`), reset, validation and back-navigation restore.
+
+| Framework | Import | Two-way binding |
+|-----------|--------|-----------------|
+| React 18 and 19 | `import { Switch } from 'mtrl/react'` | `checked` + `onChange`, or `defaultChecked` |
+| Vue 3 | `import { MSwitch } from 'mtrl/vue'` | `v-model` |
+| Svelte 5 | `import { Switch } from 'mtrl/svelte'` | `bind:checked` |
+| Solid | `import { Switch } from 'mtrl/solid'` | `checked` + `onChange` |
+
+Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate. Angular apps use the elements directly, with `CUSTOM_ELEMENTS_SCHEMA`.
+
 ## Building your own components
 
 Components are composed from small features with `pipe`. The same building blocks are public:
@@ -198,7 +252,7 @@ The policy sees every string, the library's own icons included; a `TrustedHTML`
 - `title-large` uses weight 400, as M3 specifies.
 - The slider draws with DOM and CSS; styles for `.mtrl-slider-canvas` no longer apply.
 
-The full list, with every renamed property, is in [changelog.txt](changelog.txt).
+The full list, with every renamed property, is in the [0.8.0 changelog](CHANGELOG.md#080---2026-09-15).
 
 ## Browser support
 

package/dist/README.md

@@ -134,6 +134,60 @@ const button = createButton({
 
 Button progress and card actions load on demand; enable code splitting in your build to keep them out of the initial chunk.
 
+## Web components and frameworks (experimental)
+
+From the 0.10.0 prereleases (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. The API may still change.
+
+| Element | Framework component (Vue: `M` prefix, e.g. `MTextfield`) | Kind |
+|---------|---------------------|------|
+| `<m-button>` | `Button` | action, submits or resets its form |
+| `<m-icon-button>` | `IconButton` | action or toggle (`selected`) |
+| `<m-fab>`, `<m-extended-fab>` | `Fab`, `ExtendedFab` | action |
+| `<m-checkbox>` | `Checkbox` | form control (`checked`, `indeterminate`) |
+| `<m-switch>` | `Switch` | form control (`checked`) |
+| `<m-radios>` with `<m-radio>` | `Radios`, `Radio` | form control (`value`) |
+| `<m-slider>` | `Slider` | form control (`value`, `secondValue` with `range`) |
+| `<m-textfield>` | `Textfield` | form control (`value`) |
+| `<m-tabs>` with `<m-tab>` | `Tabs`, `Tab` | selection (`value`) |
+| `<m-progress>`, `<m-loading-indicator>` | `Progress`, `LoadingIndicator` | indicator |
+| `<m-badge>`, `<m-divider>` | `Badge`, `Divider` | display |
+
+More components follow through 0.10.x; the others are available as factories today.
+
+```html
+<script type="module">
+  import 'mtrl/elements/css';            // the elements' styles
+  import { defineAll } from 'mtrl/elements';
+  defineAll();                           // registers every element (<m-button>, <m-switch>, …)
+</script>
+
+<form>
+  <m-textfield name="email" type="email" label="Email" required></m-textfield>
+  <m-radios name="plan" value="free" aria-label="Plan">
+    <m-radio value="free">Free</m-radio>
+    <m-radio value="pro">Pro</m-radio>
+  </m-radios>
+  <m-switch name="news" checked>Newsletter</m-switch>
+  <m-button type="submit">Sign up</m-button>
+</form>
+
+<m-tabs value="songs">
+  <m-tab value="songs">Songs</m-tab>
+  <m-tab value="albums">Albums</m-tab>
+</m-tabs>
+```
+
+The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls: a `checked` or `value` attribute sets the state until the user or a script changes it, and `form.reset()` goes back to it. Form controls take part in forms (their host's `name`), reset, validation and back-navigation restore.
+
+| Framework | Import | Two-way binding |
+|-----------|--------|-----------------|
+| React 18 and 19 | `import { Switch } from 'mtrl/react'` | `checked` + `onChange`, or `defaultChecked` |
+| Vue 3 | `import { MSwitch } from 'mtrl/vue'` | `v-model` |
+| Svelte 5 | `import { Switch } from 'mtrl/svelte'` | `bind:checked` |
+| Solid | `import { Switch } from 'mtrl/solid'` | `checked` + `onChange` |
+
+Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate. Angular apps use the elements directly, with `CUSTOM_ELEMENTS_SCHEMA`.
+
 ## Building your own components
 
 Components are composed from small features with `pipe`. The same building blocks are public:
@@ -198,7 +252,7 @@ The policy sees every string, the library's own icons included; a `TrustedHTML`
 - `title-large` uses weight 400, as M3 specifies.
 - The slider draws with DOM and CSS; styles for `.mtrl-slider-canvas` no longer apply.
 
-The full list, with every renamed property, is in [changelog.txt](changelog.txt).
+The full list, with every renamed property, is in the [0.8.0 changelog](CHANGELOG.md#080---2026-09-15).
 
 ## Browser support
 

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

@@ -64,8 +64,8 @@ export declare const BUTTON_CLASSES: {
     readonly ROOT: "button";
     readonly ICON: "button__icon";
     readonly TEXT: "button__text";
-    readonly ACTIVE: "button-active";
-    readonly DISABLED: "button-disabled";
+    readonly ACTIVE: "button--active";
+    readonly DISABLED: "button--disabled";
 };
 /**
  * Default ripple effect configuration

package/dist/components/button/constants.js

@@ -25,8 +25,8 @@ export const BUTTON_CLASSES = {
     ROOT: "button",
     ICON: "button__icon",
     TEXT: "button__text",
-    ACTIVE: "button-active",
-    DISABLED: "button-disabled",
+    ACTIVE: "button--active",
+    DISABLED: "button--disabled",
 };
 export const DEFAULT_RIPPLE_CONFIG = {
     DURATION: 450,

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

@@ -38,10 +38,11 @@ export interface ButtonConfig extends BaseComponentConfig {
      */
     disabled?: boolean;
     /**
-     * Initial button text content
+     * Initial button text content, or a node placed where the text goes (the
+     * web component passes a `<slot>` so the page's content is the label)
      * @example 'Submit'
      */
-    text?: string;
+    text?: string | Node;
     /**
      * Initial button icon HTML content
      * @example '<svg>...</svg>'
@@ -84,11 +85,11 @@ export interface ButtonConfig extends BaseComponentConfig {
      * Ripple effect configuration
      */
     rippleConfig?: {
-        /** Duration of the ripple animation in milliseconds */
+        /** How long, in milliseconds, a released wave lingers before it is removed */
         duration?: number;
-        /** Timing function for the ripple animation */
+        /** @deprecated Not applied: the ripple's motion comes from the stylesheet (FLO-268). */
         timing?: string;
-        /** Opacity values for ripple start and end [start, end] */
+        /** @deprecated Not applied: the wave is the 0.10 pressed state layer, drawn by the stylesheet (FLO-268). */
         opacity?: [string, string];
     };
     /**

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

@@ -199,11 +199,11 @@ export interface ButtonGroupConfig {
      * Ripple effect configuration
      */
     rippleConfig?: {
-        /** Duration of the ripple animation in milliseconds */
+        /** How long, in milliseconds, a released wave lingers before it is removed */
         duration?: number;
-        /** Timing function for the ripple animation */
+        /** @deprecated Not applied: the ripple's motion comes from the stylesheet (FLO-268). */
         timing?: string;
-        /** Opacity values for ripple start and end [start, end] */
+        /** @deprecated Not applied: the wave is the 0.10 pressed state layer, drawn by the stylesheet (FLO-268). */
         opacity?: [string, string];
     };
     /**

package/dist/components/card/api.js

@@ -3,16 +3,16 @@ export const withAPI = ({ lifecycle, config }) => (component) => ({
     element: component.element,
     config,
     addContent(contentElement) {
-        if (contentElement && contentElement.classList.contains(`${component.getClass('card')}-content`)) {
+        if (contentElement && contentElement.classList.contains(`${component.getClass('card')}__content`)) {
             component.element.appendChild(contentElement);
         }
         return this;
     },
     setHeader(headerElement) {
         const card = component.getClass('card');
-        if (headerElement && headerElement.classList.contains(`${card}-header`)) {
-            const title = (header) => header?.querySelector(`.${card}-header-title`)?.id || null;
-            const existingHeader = component.element.querySelector(`.${card}-header`);
+        if (headerElement && headerElement.classList.contains(`${card}__header`)) {
+            const title = (header) => header?.querySelector(`.${card}__header-title`)?.id || null;
+            const existingHeader = component.element.querySelector(`.${card}__header`);
             if (existingHeader) {
                 const previous = title(existingHeader);
                 if (previous && component.element.getAttribute('aria-labelledby') === previous) {
@@ -21,7 +21,7 @@ export const withAPI = ({ lifecycle, config }) => (component) => ({
                 existingHeader.remove();
             }
             let before = component.element.firstElementChild;
-            while (before && before.classList.contains(`${card}-media`)) {
+            while (before && before.classList.contains(`${card}__media`)) {
                 before = before.nextElementSibling;
             }
             component.element.insertBefore(headerElement, before);
@@ -35,7 +35,7 @@ export const withAPI = ({ lifecycle, config }) => (component) => ({
         return this;
     },
     addMedia(mediaElement, position = 'top') {
-        if (mediaElement && mediaElement.classList.contains(`${component.getClass('card')}-media`)) {
+        if (mediaElement && mediaElement.classList.contains(`${component.getClass('card')}__media`)) {
             if (position === 'top') {
                 component.element.insertBefore(mediaElement, component.element.firstChild);
             }
@@ -46,8 +46,8 @@ export const withAPI = ({ lifecycle, config }) => (component) => ({
         return this;
     },
     setActions(actionsElement) {
-        if (actionsElement && actionsElement.classList.contains(`${component.getClass('card')}-actions`)) {
-            const existingActions = component.element.querySelector(`.${component.getClass('card')}-actions`);
+        if (actionsElement && actionsElement.classList.contains(`${component.getClass('card')}__actions`)) {
+            const existingActions = component.element.querySelector(`.${component.getClass('card')}__actions`);
             if (existingActions) {
                 existingActions.remove();
             }

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

@@ -57,7 +57,7 @@ import { CardComponent, CardSchema } from "./types.js";
  * // Using API methods
  * const card = createCard();
  * const content = document.createElement('div');
- * content.className = 'mtrl-card-content';
+ * content.className = 'mtrl-card__content';
  * content.textContent = 'Added programmatically';
  * card.addContent(content);
  * card.makeDraggable();

package/dist/components/card/config.js

@@ -145,7 +145,7 @@ export const withInteractiveBehavior = (comp) => {
             comp.element.classList.add(`${comp.getClass("card")}--dragging`);
             comp.emit?.("dragstart", { event: e });
             if (e.dataTransfer) {
-                const cardTitle = comp.element.querySelector(`.${comp.getClass("card")}-header-title`)
+                const cardTitle = comp.element.querySelector(`.${comp.getClass("card")}__header-title`)
                     ?.textContent || "Card";
                 e.dataTransfer.setData("text/plain", cardTitle);
             }

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

@@ -67,19 +67,22 @@ export declare const CARD_MEDIA_POSITION: {
  */
 export declare const CARD_CLASSES: {
     readonly ROOT: "card";
-    readonly HEADER: "card-header";
-    readonly TITLE: "card-title";
-    readonly SUBTITLE: "card-subtitle";
-    readonly AVATAR: "card-avatar";
-    readonly HEADER_ACTION: "card-header-action";
-    readonly CONTENT: "card-content";
-    readonly MEDIA: "card-media";
-    readonly ACTIONS: "card-actions";
-    readonly DRAGGABLE: "card-draggable";
-    readonly INTERACTIVE: "card-interactive";
-    readonly FULL_WIDTH: "card-full-width";
-    readonly CLICKABLE: "card-clickable";
-    readonly LOADING: "card-loading";
-    readonly EXPANDED: "card-expanded";
-    readonly ELEVATION_PREFIX: "card-elevation-";
+    readonly HEADER: "card__header";
+    readonly TITLE: "card__header-title";
+    readonly SUBTITLE: "card__header-subtitle";
+    readonly AVATAR: "card__header-avatar";
+    readonly HEADER_ACTION: "card__header-action";
+    readonly CONTENT: "card__content";
+    readonly MEDIA: "card__media";
+    readonly ACTIONS: "card__actions";
+    /** Reserved modifier; draggable currently uses the native attribute. */
+    readonly DRAGGABLE: "card--draggable";
+    readonly INTERACTIVE: "card--interactive";
+    readonly FULL_WIDTH: "card--full-width";
+    /** Reserved modifier; clickable currently uses INTERACTIVE. */
+    readonly CLICKABLE: "card--clickable";
+    readonly LOADING: "card--state-loading";
+    readonly EXPANDED: "card--expanded";
+    /** Reserved modifier prefix; elevation currently uses styles. */
+    readonly ELEVATION_PREFIX: "card--elevation-";
 };

package/dist/components/card/constants.js

@@ -37,19 +37,19 @@ export const CARD_MEDIA_POSITION = {
 };
 export const CARD_CLASSES = {
     ROOT: 'card',
-    HEADER: 'card-header',
-    TITLE: 'card-title',
-    SUBTITLE: 'card-subtitle',
-    AVATAR: 'card-avatar',
-    HEADER_ACTION: 'card-header-action',
-    CONTENT: 'card-content',
-    MEDIA: 'card-media',
-    ACTIONS: 'card-actions',
-    DRAGGABLE: 'card-draggable',
-    INTERACTIVE: 'card-interactive',
-    FULL_WIDTH: 'card-full-width',
-    CLICKABLE: 'card-clickable',
-    LOADING: 'card-loading',
-    EXPANDED: 'card-expanded',
-    ELEVATION_PREFIX: 'card-elevation-'
+    HEADER: 'card__header',
+    TITLE: 'card__header-title',
+    SUBTITLE: 'card__header-subtitle',
+    AVATAR: 'card__header-avatar',
+    HEADER_ACTION: 'card__header-action',
+    CONTENT: 'card__content',
+    MEDIA: 'card__media',
+    ACTIONS: 'card__actions',
+    DRAGGABLE: 'card--draggable',
+    INTERACTIVE: 'card--interactive',
+    FULL_WIDTH: 'card--full-width',
+    CLICKABLE: 'card--clickable',
+    LOADING: 'card--state-loading',
+    EXPANDED: 'card--expanded',
+    ELEVATION_PREFIX: 'card--elevation-'
 };

package/dist/components/card/content.js

@@ -9,16 +9,16 @@ let headerCount = 0;
 export const createCardContent = (config = {}) => {
     const baseConfig = {
         ...config,
-        componentName: 'card-content',
+        componentName: 'card__content',
         prefix: PREFIX
     };
     try {
         const content = pipe(createBase, withElement({
             tag: 'div',
-            componentName: 'card-content',
+            componentName: 'card__content',
             className: [
                 config.class,
-                config.padding === false ? `${PREFIX}-card-content--no-padding` : null
+                config.padding === false ? `${PREFIX}-card__content--no-padding` : null
             ].filter((name) => Boolean(name)),
             attributes: {
                 'role': 'region',
@@ -50,13 +50,13 @@ export const createCardContent = (config = {}) => {
 export const createCardHeader = (config = {}) => {
     const baseConfig = {
         ...config,
-        componentName: 'card-header',
+        componentName: 'card__header',
         prefix: PREFIX
     };
     try {
         const header = pipe(createBase, withElement({
             tag: 'div',
-            componentName: 'card-header',
+            componentName: 'card__header',
             className: config.class,
             attributes: {
                 'role': 'heading',
@@ -65,13 +65,13 @@ export const createCardHeader = (config = {}) => {
         }))(baseConfig);
         const textContainer = createElement({
             tag: 'div',
-            className: `${PREFIX}-card-header-text`,
+            className: `${PREFIX}-card__header-text`,
             container: header.element
         });
         if (config.title) {
             createElement({
                 tag: 'h3',
-                className: `${PREFIX}-card-header-title`,
+                className: `${PREFIX}-card__header-title`,
                 text: config.title,
                 container: textContainer,
                 attributes: {
@@ -82,7 +82,7 @@ export const createCardHeader = (config = {}) => {
         if (config.subtitle) {
             createElement({
                 tag: 'h4',
-                className: `${PREFIX}-card-header-subtitle`,
+                className: `${PREFIX}-card__header-subtitle`,
                 text: config.subtitle,
                 container: textContainer
             });
@@ -91,7 +91,7 @@ export const createCardHeader = (config = {}) => {
             const avatarElement = typeof config.avatar === 'string'
                 ? createElement({
                     tag: 'div',
-                    className: `${PREFIX}-card-header-avatar`,
+                    className: `${PREFIX}-card__header-avatar`,
                     html: config.avatar
                 })
                 : config.avatar;
@@ -106,7 +106,7 @@ export const createCardHeader = (config = {}) => {
             const actionElement = typeof config.action === 'string'
                 ? createElement({
                     tag: 'div',
-                    className: `${PREFIX}-card-header-action`,
+                    className: `${PREFIX}-card__header-action`,
                     html: config.action
                 })
                 : config.action;
@@ -122,18 +122,18 @@ export const createCardHeader = (config = {}) => {
 export const createCardActions = (config = {}) => {
     const baseConfig = {
         ...config,
-        componentName: 'card-actions',
+        componentName: 'card__actions',
         prefix: PREFIX
     };
     try {
         const actions = pipe(createBase, withElement({
             tag: 'div',
-            componentName: 'card-actions',
+            componentName: 'card__actions',
             className: [
                 config.class,
-                config.fullBleed ? `${PREFIX}-card-actions--full-bleed` : null,
-                config.vertical ? `${PREFIX}-card-actions--vertical` : null,
-                config.align ? `${PREFIX}-card-actions--${config.align}` : null
+                config.fullBleed ? `${PREFIX}-card__actions--full-bleed` : null,
+                config.vertical ? `${PREFIX}-card__actions--vertical` : null,
+                config.align ? `${PREFIX}-card__actions--${config.align}` : null
             ].filter((name) => Boolean(name)),
             attributes: {
                 'role': 'group'
@@ -161,17 +161,17 @@ export const createCardActions = (config = {}) => {
 export const createCardMedia = (config = {}) => {
     const baseConfig = {
         ...config,
-        componentName: 'card-media',
+        componentName: 'card__media',
         prefix: PREFIX
     };
     try {
         const media = pipe(createBase, withElement({
             tag: 'div',
-            componentName: 'card-media',
+            componentName: 'card__media',
             className: [
                 config.class,
-                config.aspectRatio ? `${PREFIX}-card-media--${config.aspectRatio.replace(':', '-')}` : null,
-                config.contain ? `${PREFIX}-card-media--contain` : null
+                config.aspectRatio ? `${PREFIX}-card__media--${config.aspectRatio.replace(':', '-')}` : null,
+                config.contain ? `${PREFIX}-card__media--contain` : null
             ].filter((name) => Boolean(name))
         }))(baseConfig);
         if (config.element instanceof HTMLElement) {
@@ -180,7 +180,7 @@ export const createCardMedia = (config = {}) => {
         else if (config.src) {
             const img = document.createElement('img');
             img.src = safeUrl(config.src);
-            img.className = `${PREFIX}-card-media-img`;
+            img.className = `${PREFIX}-card__media-img`;
             img.alt = config.alt || '';
             if (!config.alt) {
                 img.setAttribute('aria-hidden', 'true');

package/dist/components/card/features.js

@@ -16,7 +16,7 @@ export const withLoading = (config = {}) => (component) => {
         if (loading && !loadingElement) {
             loadingElement = createElement({
                 tag: "div",
-                className: `${PREFIX}-card-loading-overlay`,
+                className: `${PREFIX}-card__loading-overlay`,
                 container: component.element,
                 attributes: {
                     role: "progressbar",
@@ -26,7 +26,7 @@ export const withLoading = (config = {}) => (component) => {
             });
             createElement({
                 tag: "div",
-                className: `${PREFIX}-card-loading-spinner`,
+                className: `${PREFIX}-card__loading-spinner`,
                 container: loadingElement,
             });
             component.element.classList.add(`${PREFIX}-card--state-loading`);
@@ -66,7 +66,7 @@ export const withExpandable = (config = {}) => (component) => {
     const expandableContent = config.expandableContent;
     const expandButton = createElement({
         tag: "button",
-        className: `${PREFIX}-card-expand-button`,
+        className: `${PREFIX}-card__expand-button`,
         attributes: {
             "aria-expanded": isExpanded ? "true" : "false",
             "aria-label": isExpanded ? "Collapse content" : "Expand content",
@@ -74,14 +74,14 @@ export const withExpandable = (config = {}) => (component) => {
                 `${component.element.id || "card"}-expandable-content`,
         },
     });
-    const actionsContainer = component.element.querySelector(`.${PREFIX}-card-actions`);
+    const actionsContainer = component.element.querySelector(`.${PREFIX}-card__actions`);
     if (actionsContainer) {
         actionsContainer.appendChild(expandButton);
     }
     else {
         const newActionsContainer = createElement({
             tag: "div",
-            className: `${PREFIX}-card-actions`,
+            className: `${PREFIX}-card__actions`,
             container: component.element,
             attributes: {
                 role: "group",
@@ -90,7 +90,7 @@ export const withExpandable = (config = {}) => (component) => {
         newActionsContainer.appendChild(expandButton);
     }
     if (expandableContent) {
-        expandableContent.classList.add(`${PREFIX}-card-expandable-content`);
+        expandableContent.classList.add(`${PREFIX}-card__expandable-content`);
         if (!expandableContent.id) {
             expandableContent.id = `${component.element.id || "card"}-expandable-content`;
         }
@@ -148,7 +148,7 @@ export const withSwipeable = (config = {}) => (component) => {
     component.element.setAttribute("aria-description", "Swipeable card. Swipe left or right to perform actions.");
     const leftActionButton = createElement({
         tag: "button",
-        className: `${PREFIX}-card-swipe-left-action`,
+        className: `${PREFIX}-card__swipe-left-action`,
         text: "Swipe Left Action",
         container: component.element,
         attributes: { "aria-label": "Perform swipe left action" },
@@ -156,7 +156,7 @@ export const withSwipeable = (config = {}) => (component) => {
     });
     const rightActionButton = createElement({
         tag: "button",
-        className: `${PREFIX}-card-swipe-right-action`,
+        className: `${PREFIX}-card__swipe-right-action`,
         text: "Swipe Right Action",
         container: component.element,
         attributes: { "aria-label": "Perform swipe right action" },
@@ -166,14 +166,14 @@ export const withSwipeable = (config = {}) => (component) => {
         if (config.onSwipeLeft) {
             component.element.style.transform = "translateX(-100%)";
             component.element.style.transition = "transform 0.3s ease";
-            config.onSwipeLeft(component);
+            config.onSwipeLeft(card);
         }
     });
     rightActionButton.addEventListener("click", () => {
         if (config.onSwipeRight) {
             component.element.style.transform = "translateX(100%)";
             component.element.style.transition = "transform 0.3s ease";
-            config.onSwipeRight(component);
+            config.onSwipeRight(card);
         }
     });
     function handleTouchStart(e) {
@@ -195,11 +195,11 @@ export const withSwipeable = (config = {}) => (component) => {
         if (Math.abs(diffX) >= threshold) {
             if (diffX > 0 && config.onSwipeRight) {
                 component.element.style.transform = "translateX(100%)";
-                config.onSwipeRight(component);
+                config.onSwipeRight(card);
             }
             else if (diffX < 0 && config.onSwipeLeft) {
                 component.element.style.transform = "translateX(-100%)";
-                config.onSwipeLeft(component);
+                config.onSwipeLeft(card);
             }
             else {
                 component.element.style.transform = "translateX(0)";
@@ -215,7 +215,7 @@ export const withSwipeable = (config = {}) => (component) => {
     component.element.addEventListener("touchmove", handleTouchMove, { passive: true });
     component.element.addEventListener("touchend", handleTouchEnd);
     component.element.classList.add(`${PREFIX}-card--swipeable`);
-    return {
+    const card = {
         ...component,
         swipeable: {
             reset: () => {
@@ -224,4 +224,5 @@ export const withSwipeable = (config = {}) => (component) => {
             },
         },
     };
+    return card;
 };

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

@@ -44,7 +44,7 @@
  *
  * // Modify card programmatically using API methods
  * const image = document.createElement('div');
- * image.className = 'mtrl-card-media';
+ * image.className = 'mtrl-card__media';
  * image.style.backgroundImage = 'url(path/to/image.jpg)';
  *
  * card.addMedia(image, 'top')

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

@@ -209,7 +209,7 @@ export interface BaseComponent {
     /** The DOM element */
     element: HTMLElement;
     /** Get class name with prefix */
-    getClass: (name?: string) => string;
+    getClass: (name: string) => string;
     /** Get modifier class */
     getModifierClass: (base: string, modifier: string) => string;
     /** Get element class */
@@ -295,7 +295,7 @@ export interface CardComponent extends BaseComponent {
      * @example
      * ```typescript
      * const content = document.createElement('div');
-     * content.className = 'mtrl-card-content';
+     * content.className = 'mtrl-card__content';
      * content.textContent = 'Card content goes here';
      * card.addContent(content);
      * ```
@@ -327,7 +327,7 @@ export interface CardComponent extends BaseComponent {
      * ```typescript
      * // Creating media element
      * const media = document.createElement('div');
-     * media.className = 'mtrl-card-media';
+     * media.className = 'mtrl-card__media';
      *
      * // Adding at the top (default)
      * card.addMedia(media);
@@ -349,7 +349,7 @@ export interface CardComponent extends BaseComponent {
      * ```typescript
      * // Create actions container
      * const actions = document.createElement('div');
-     * actions.className = 'mtrl-card-actions';
+     * actions.className = 'mtrl-card__actions';
      *
      * // Add buttons to actions
      * const button = document.createElement('button');