mtrl 0.8.0-next.13 → 0.8.0-next.15

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

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

package/dist/components/dialog/config.d.ts

@@ -43,11 +43,7 @@ export declare const getElementConfig: (config: DialogConfig) => {
  */
 export declare const getOverlayConfig: (config: DialogConfig) => {
     tag: string;
-    attributes: {
-        'aria-modal': boolean;
-        role: string;
-        tabindex: number;
-    };
+    attributes: {};
     className: string;
 };
 /**

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

@@ -1,9 +1,4 @@
 import { DialogConfig } from "./types";
-/**
- * Creates the dialog DOM structure with proper divider handling
- * @param config Dialog configuration
- * @returns Component enhancer with DOM structure
- */
 export declare const withStructure: (config: DialogConfig) => (component: any) => any;
 /**
  * Add methods to manage dividers

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

@@ -11,4 +11,4 @@
  * @category Components
  */
 export { default } from "./dialog";
-export { DialogConfig, DialogComponent, DialogButton, DialogEvent, DialogConfirmOptions, DialogSize, DialogAnimation, DialogFooterAlignment, DialogEventType, } from "./types";
+export type { DialogConfig, DialogComponent, DialogButton, DialogEvent, DialogConfirmOptions, DialogSize, DialogAnimation, DialogFooterAlignment, DialogEventType, } from "./types";

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

@@ -71,10 +71,21 @@ export interface DialogConfig {
      */
     content?: string;
     /**
-     * Whether to show close button (X) in the header
-     * @default true
+     * Whether to show a close affordance in the header. A basic dialog has
+     * none in M3: it is dismissed by its actions. A full-screen dialog shows
+     * one unless this is set to false.
+     * @default false (true for the fullscreen size)
      */
     closeButton?: boolean;
+    /**
+     * Accessible name for a dialog without a headline
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA role for the dialog. A basic dialog is an `alertdialog` and a
+     * full-screen one a `dialog`; set this to override.
+     */
+    role?: 'alertdialog' | 'dialog';
     /**
      * Additional CSS classes to apply to the dialog
      * @example "settings-dialog important-dialog"

package/dist/components/extended-fab/index.d.ts

@@ -33,4 +33,4 @@
  * @category Components
  */
 export { default, default as createExtendedFab } from './extended-fab';
-export { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabVariant, ExtendedFabWidth, ExtendedFabPosition } from './types';
+export type { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabVariant, ExtendedFabWidth, ExtendedFabPosition } from './types';

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

@@ -32,4 +32,4 @@
  * @category Components
  */
 export { default, default as createFab } from "./fab";
-export { FabConfig, FabComponent, FabVariant, FabSize, FabPosition, } from "./types";
+export type { FabConfig, FabComponent, FabVariant, FabSize, FabPosition, } from "./types";

package/dist/components/index.d.ts

@@ -28,6 +28,7 @@ export { default as createNavigation } from "./navigation";
 export { default as createNavigationSystem } from "./navigation/system";
 export { default as createProgress } from "./progress";
 export { default as createLoadingIndicator } from "./loading-indicator";
+export { default as createSplitButton } from "./split-button";
 export { default as createRadios } from "./radios";
 export { default as createSearch } from "./search";
 export { default as createSelect } from "./select";
@@ -63,6 +64,7 @@ export type { ExtendedFabConfig, ExtendedFabComponent, } from "./extended-fab/ty
 export type { IconButtonConfig, IconButtonComponent, } from "./icon-button/types";
 export type { ListConfig, ListComponent, SelectEvent as ListSelectEvent, LoadEvent, } from "./list/types";
 export type { MenuConfig, MenuComponent, MenuItem } from "./menu/types";
+export type { SplitButtonConfig, SplitButtonComponent, } from "./split-button/types";
 export type { LoadingIndicatorConfig, LoadingIndicatorComponent, } from "./loading-indicator/types";
 export type { ProgressConfig, ProgressComponent, ProgressShape, } from "./progress/types";
 export type { RadiosConfig, RadiosComponent, RadioOptionConfig, } from "./radios/types";

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

@@ -1,3 +1,3 @@
 export { default } from './navigation';
-export { NavigationConfig, NavigationComponent, NavItemConfig, NavGroupConfig } from './types';
+export type { NavigationConfig, NavigationComponent, NavItemConfig, NavGroupConfig } from './types';
 export { NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS, NAV_ITEM_STATES, NAV_EVENTS, NAV_DEFAULTS, NAV_CLASSES } from './constants';

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

@@ -1,3 +1,3 @@
 export { default } from './radios';
-export { RadiosConfig, RadiosComponent, RadioOptionConfig } from './types';
+export type { RadiosConfig, RadiosComponent, RadioOptionConfig } from './types';
 export { RADIO_STATES, RADIO_DIRECTIONS, RADIO_VARIANTS, RADIO_LABEL_POSITIONS, RADIO_SIZES, RADIO_EVENTS, RADIO_DEFAULTS, RADIO_CLASSES } from './constants';

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

@@ -1,3 +1,3 @@
 export { default } from './sheet';
 export { SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS, SHEET_ELEVATION, SHEET_DEFAULTS, SHEET_ANIMATION, SHEET_GESTURE, SHEET_CLASSES } from './constants';
-export { SheetConfig, SheetComponent } from './types';
+export type { SheetConfig, SheetComponent } from './types';

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

@@ -1,2 +1,2 @@
 export { default } from "./slider";
-export { type SliderConfig, type SliderComponent, type SliderEvent, } from "./types";
+export type { SliderConfig, SliderComponent, SliderEvent, } from "./types";

package/dist/components/split-button/api.d.ts

@@ -0,0 +1,14 @@
+import { BaseComponent, SplitButtonComponent, SplitButtonConfig } from "./types";
+interface ApiOptions {
+    config: SplitButtonConfig;
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Adds the public API and wires the two buttons together
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds the API
+ */
+export declare const withAPI: ({ config, lifecycle }: ApiOptions) => (component: BaseComponent) => SplitButtonComponent;
+export {};

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

@@ -0,0 +1,40 @@
+import { SplitButtonConfig } from "./types";
+/**
+ * Default configuration
+ */
+export declare const defaultConfig: Partial<SplitButtonConfig>;
+/**
+ * Creates the base configuration with the defaults applied
+ * @param {SplitButtonConfig} config - User provided configuration
+ * @returns {SplitButtonConfig} Complete configuration
+ */
+export declare const createBaseConfig: (config?: SplitButtonConfig) => SplitButtonConfig;
+/**
+ * Element configuration. The two buttons are a group, so a screen reader
+ * announces them together and the group can carry a name of its own.
+ * @param {SplitButtonConfig} config - Configuration
+ * @returns {Object} Element configuration for withElement
+ */
+export declare const getElementConfig: (config: SplitButtonConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    id: string;
+    name: string;
+    title: string;
+    tabIndex: number;
+    style: string | Partial<CSSStyleDeclaration>;
+    data: Record<string, string>;
+    role: string;
+    ariaLabel: string;
+    ariaDescribedBy: string;
+    ariaLabelledBy: string;
+    ariaHidden: boolean;
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+export default defaultConfig;

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

@@ -0,0 +1,67 @@
+/**
+ * Visual styles, the same set the button offers
+ * @category Components
+ */
+export declare const SPLIT_BUTTON_VARIANTS: {
+    readonly FILLED: "filled";
+    readonly TONAL: "tonal";
+    readonly OUTLINED: "outlined";
+    readonly ELEVATED: "elevated";
+};
+/**
+ * Sizes, matching the button and icon button scale
+ * @category Components
+ */
+export declare const SPLIT_BUTTON_SIZES: {
+    readonly XS: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+    readonly XL: "xl";
+};
+/**
+ * Events the component emits
+ * @category Components
+ */
+export declare const SPLIT_BUTTON_EVENTS: {
+    /** The leading button was activated */
+    readonly CLICK: "click";
+    /** The trailing button opened whatever it opens */
+    readonly EXPAND: "expand";
+    /** The trailing button closed it */
+    readonly COLLAPSE: "collapse";
+    /** Either of the two, carrying the new state */
+    readonly CHANGE: "change";
+    /** A menu item was chosen, when the component owns a menu */
+    readonly SELECT: "select";
+};
+/**
+ * Defaults
+ * @category Components
+ */
+export declare const SPLIT_BUTTON_DEFAULTS: {
+    readonly VARIANT: "filled";
+    readonly SIZE: "s";
+    /** Accessible name of the trailing button when none is given */
+    readonly TRAILING_LABEL: "More options";
+    /** How far the menu sits from the button (M3 split button guidelines) */
+    readonly MENU_OFFSET: 4;
+};
+/**
+ * CSS class names, without the prefix
+ * @category Components
+ */
+export declare const SPLIT_BUTTON_CLASSES: {
+    readonly ROOT: "split-button";
+    readonly LEADING: "split-button__leading";
+    readonly TRAILING: "split-button__trailing";
+    readonly CHEVRON: "split-button__chevron";
+    readonly EXPANDED: "split-button--expanded";
+};
+/**
+ * The trailing button's icon. It always points down and turns 180 degrees
+ * when the button is activated, so it should not be swapped out
+ * (M3 split button guidelines, "Anatomy").
+ * @category Components
+ */
+export declare const SPLIT_BUTTON_CHEVRON: string;

package/dist/components/split-button/features/buttons.d.ts

@@ -0,0 +1,7 @@
+import { BaseComponent, SplitButtonConfig } from "../types";
+/**
+ * Adds the leading and trailing buttons
+ * @param {SplitButtonConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds both buttons
+ */
+export declare const withButtons: (config: SplitButtonConfig) => (component: BaseComponent) => BaseComponent;

package/dist/components/split-button/features/menu.d.ts

@@ -0,0 +1,7 @@
+import { BaseComponent, SplitButtonConfig } from "../types";
+/**
+ * Adds a menu anchored to the trailing button
+ * @param {SplitButtonConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds the menu
+ */
+export declare const withMenu: (config: SplitButtonConfig) => (component: BaseComponent) => BaseComponent;

package/dist/components/split-button/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./split-button";
+export type { SplitButtonConfig, SplitButtonComponent, SplitButtonEvent, SplitButtonVariant, SplitButtonSize, } from "./types";
+export { SPLIT_BUTTON_VARIANTS, SPLIT_BUTTON_SIZES, SPLIT_BUTTON_EVENTS, } from "./constants";

package/dist/components/split-button/split-button.d.ts

@@ -0,0 +1,24 @@
+import { SplitButtonConfig, SplitButtonComponent } from "./types";
+/**
+ * Creates a split button: one action beside a button that opens more choices.
+ *
+ * @param {SplitButtonConfig} config - Split button configuration
+ * @returns {SplitButtonComponent} Split button component instance
+ *
+ * @example
+ * ```ts
+ * const button = createSplitButton({
+ *   text: 'Watch later',
+ *   icon: watchIcon,
+ *   trailingLabel: 'More watch options',
+ *   items: [
+ *     { id: 'queue', text: 'Add to queue' },
+ *     { id: 'playlist', text: 'Save to playlist' }
+ *   ],
+ *   onClick: () => watchLater(),
+ *   onSelect: ({ item }) => choose(item.id)
+ * });
+ * ```
+ */
+declare const createSplitButton: (config?: SplitButtonConfig) => SplitButtonComponent;
+export default createSplitButton;

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

@@ -0,0 +1,116 @@
+import type { MenuContent, MenuComponent } from "../menu/types";
+/** Visual style, the same set the button offers */
+export type SplitButtonVariant = "filled" | "tonal" | "outlined" | "elevated";
+/** Size, matching the button and icon button scale */
+export type SplitButtonSize = "xs" | "s" | "m" | "l" | "xl";
+/** Events the component emits */
+export type SplitButtonEventType = "click" | "expand" | "collapse" | "change" | "select";
+/** What an event handler receives */
+export interface SplitButtonEvent {
+    /** The component that emitted it */
+    splitButton: SplitButtonComponent;
+    /** Whether the trailing button is showing its menu */
+    expanded: boolean;
+    /** The DOM event behind it, when there was one */
+    originalEvent: Event | null;
+    /** The chosen item, on a `select` event */
+    item?: MenuContent;
+}
+/**
+ * Configuration for the split button
+ * @interface SplitButtonConfig
+ */
+export interface SplitButtonConfig {
+    /** Label of the leading button */
+    text?: string;
+    /** Icon of the leading button, as an HTML string */
+    icon?: string;
+    /** Visual style, shared by both buttons */
+    variant?: SplitButtonVariant;
+    /** Size of both buttons */
+    size?: SplitButtonSize;
+    /** Whether both buttons are disabled */
+    disabled?: boolean;
+    /**
+     * Accessible name of the trailing button. It should say that more choices
+     * are available and how they relate to the leading action, such as
+     * "More watch options" beside a "Watch later" button (M3 split button
+     * accessibility).
+     * @default 'More options'
+     */
+    trailingLabel?: string;
+    /** Accessible name of the leading button, when its label is not enough */
+    ariaLabel?: string;
+    /** Accessible name of the whole group */
+    groupLabel?: string;
+    /** What the leading button does */
+    onClick?: (event: SplitButtonEvent) => void;
+    /**
+     * Menu items for the trailing button to open. Without them the component
+     * only reports that the trailing button was activated, and the caller
+     * shows whatever it likes.
+     */
+    items?: MenuContent[];
+    /** Called with the chosen item when the component owns the menu */
+    onSelect?: (event: SplitButtonEvent) => void;
+    /** Additional CSS classes */
+    class?: string;
+    /** Component prefix for CSS class names */
+    prefix?: string;
+    /** Component name for CSS class names */
+    componentName?: string;
+    /** Event handlers */
+    on?: {
+        [key in SplitButtonEventType]?: (event: SplitButtonEvent) => void;
+    };
+}
+/**
+ * The split button's public API
+ * @interface SplitButtonComponent
+ */
+export interface SplitButtonComponent {
+    /** The element holding both buttons */
+    element: HTMLElement;
+    /** The leading button's element */
+    leadingElement: HTMLButtonElement;
+    /** The trailing button's element */
+    trailingElement: HTMLButtonElement;
+    /** The menu, when the component was given items */
+    menu?: MenuComponent;
+    /** Sets the leading button's label */
+    setText: (text: string) => SplitButtonComponent;
+    /** The leading button's label */
+    getText: () => string;
+    /** Sets the leading button's icon */
+    setIcon: (icon: string) => SplitButtonComponent;
+    /** Opens whatever the trailing button opens */
+    expand: () => SplitButtonComponent;
+    /** Closes it */
+    collapse: () => SplitButtonComponent;
+    /** Whether it is open */
+    isExpanded: () => boolean;
+    /** Disables both buttons */
+    disable: () => SplitButtonComponent;
+    /** Enables both buttons */
+    enable: () => SplitButtonComponent;
+    /** Whether both buttons are disabled */
+    isDisabled: () => boolean;
+    /** Adds an event listener */
+    on: (event: SplitButtonEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonComponent;
+    /** Removes an event listener */
+    off: (event: SplitButtonEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonComponent;
+    /** Takes the component off the page and releases what it holds */
+    destroy: () => void;
+}
+/** The component as it passes through the enhancers */
+export interface BaseComponent {
+    element: HTMLElement;
+    emit?: (event: string, data?: unknown) => void;
+    on?: (event: string, handler: (...args: unknown[]) => void) => unknown;
+    off?: (event: string, handler: (...args: unknown[]) => void) => unknown;
+    getClass?: (name: string) => string;
+    lifecycle?: {
+        destroy?: () => void;
+    };
+    [key: string]: unknown;
+}

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

@@ -1,4 +1,5 @@
 export { default } from './switch';
 export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from './constants';
-export { SwitchConfig, SwitchComponent } from './types';
-export { withSupportingText, SupportingTextComponent } from './features';
+export type { SwitchConfig, SwitchComponent } from './types';
+export { withSupportingText } from './features';
+export type { SupportingTextComponent } from './features';

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

@@ -5,7 +5,8 @@ import { createTabsState } from "./state";
 import { createTabIndicator } from "./indicator";
 import { updateTabPanels, setupKeyboardNavigation } from "./utils";
 export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, } from "./constants";
-export { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig, } from "./types";
+export type { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig, } from "./types";
 export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation, };
-export { withTabsManagement, withScrollable, withDivider, withIndicator, TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent, } from "./features";
+export { withTabsManagement, withScrollable, withDivider, withIndicator } from "./features";
+export type { TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent } from "./features";
 export default createTabs;

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

@@ -1,2 +1,2 @@
 export { default } from "./textfield";
-export { TextfieldConfig, TextfieldComponent, TextfieldDensity } from "./types";
+export type { TextfieldConfig, TextfieldComponent, TextfieldDensity } from "./types";

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

@@ -1,3 +1,3 @@
 export { default } from './tooltip';
 export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES } from './constants';
-export { TooltipConfig, TooltipComponent } from './types';
+export type { TooltipConfig, TooltipComponent } from './types';