mtrl 0.10.0 → 0.10.2

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

@@ -17,7 +17,7 @@ export const createBaseConfig = (config = {}) => {
     }
     return merged;
 };
-export const getElementConfig = (config) => createElementConfig(config, {
+export const getElementConfig = (config) => createElementConfig({ ...config, title: undefined }, {
     tag: config.layer === "top" ? "dialog" : "div",
     className: [config.class].filter(Boolean),
     attributes: {

package/dist/components/chips/api.js

@@ -133,6 +133,10 @@ export const withAPI = (options) => (component) => {
             }
             return this;
         },
+        keyboard: {
+            enable: () => options.keyboard?.enableKeyboardNavigation?.(),
+            disable: () => options.keyboard?.disableKeyboardNavigation?.(),
+        },
         on(event, handler) {
             if (options.events && typeof options.events.on === "function") {
                 options.events.on(event, handler);

package/dist/components/chips/features/controller.js

@@ -9,6 +9,7 @@ export const withController = (config) => (component) => {
         remove: [],
     };
     let focusedChipIndex = -1;
+    let keyboardEnabled = true;
     const dispatchEvent = (eventName, ...args) => {
         if (eventListeners[eventName]) {
             eventListeners[eventName].forEach((handler) => handler(...args));
@@ -58,11 +59,13 @@ export const withController = (config) => (component) => {
             current.tabIndex = 0;
     };
     const handleKeyboardNavigation = (event) => {
+        if (!keyboardEnabled)
+            return;
         const list = targets();
         if (list.length === 0)
             return;
         const isVertical = !!(component.layout && component.layout.isVertical());
-        const rtl = component.element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+        const rtl = component.element.matches(":dir(rtl)");
         const back = isVertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
         const forward = isVertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
         const from = list.indexOf(event.target);
@@ -236,11 +239,13 @@ export const withController = (config) => (component) => {
         }
     };
     const enableKeyboardNavigation = () => {
+        keyboardEnabled = true;
         component.chipInstances.forEach((chip) => {
             chip.element.addEventListener("keydown", handleKeyboardNavigation);
         });
     };
     const disableKeyboardNavigation = () => {
+        keyboardEnabled = false;
         component.chipInstances.forEach((chip) => {
             chip.element.removeEventListener("keydown", handleKeyboardNavigation);
         });

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

@@ -345,6 +345,16 @@ export interface ChipsComponent {
      * @returns The chips instance for chaining
      */
     enableKeyboardNavigation: () => ChipsComponent;
+    /**
+     * Turns keyboard navigation between the chips on and off: while disabled,
+     * the arrows, Home and End no longer move focus in the set (FLO-352)
+     */
+    keyboard: {
+        /** Moves focus with the arrows, Home and End again */
+        enable: () => void;
+        /** Stops moving focus with the arrows, Home and End */
+        disable: () => void;
+    };
     /**
      * Destroys the chips container and all contained chips
      */

package/dist/components/dialog/config.js

@@ -29,7 +29,7 @@ export const getElementConfig = (config) => {
     if (config.modal !== false) {
         attributes['aria-modal'] = 'true';
     }
-    return createElementConfig(config, {
+    return createElementConfig({ ...config, title: undefined }, {
         tag: config.layer === 'top' ? 'dialog' : 'div',
         attributes,
         className: config.class

package/dist/components/fab-menu/fab-menu.js

@@ -63,17 +63,20 @@ const createFabMenu = (config) => {
         element.className = `${block}__item`;
         element.setAttribute("role", "menuitem");
         element.tabIndex = -1;
+        const content = document.createElement("span");
+        content.className = `${block}__item-content`;
         if (item.icon) {
             const icon = document.createElement("span");
             icon.className = `${block}__item-icon`;
             icon.setAttribute("aria-hidden", "true");
             setHTML(icon, item.icon);
-            element.appendChild(icon);
+            content.appendChild(icon);
         }
         const label = document.createElement("span");
         label.className = `${block}__item-text`;
         label.textContent = item.text;
-        element.appendChild(label);
+        content.appendChild(label);
+        element.appendChild(content);
         list.appendChild(element);
         return { item, element };
     });
@@ -108,7 +111,7 @@ const createFabMenu = (config) => {
     const wire = (created) => {
         created.on("select", (event) => {
             if (event.itemId !== undefined)
-                component.emit(FAB_MENU_EVENTS.SELECT, { id: event.itemId });
+                component.emit(FAB_MENU_EVENTS.SELECT, { id: event.itemId, value: event.itemId });
         });
         created.on("close", () => setOpened(false));
         if (created.element.id)
@@ -159,7 +162,12 @@ const createFabMenu = (config) => {
         if (!event.composedPath().includes(root))
             closeList(false);
     };
+    const measure = () => entries.forEach(({ element }) => {
+        const content = element.firstElementChild;
+        element.style.setProperty(`--${PREFIX}-fab-menu-item-width`, `${content.offsetWidth}px`);
+    });
     const openList = () => {
+        measure();
         stagger(true);
         const top = root.getBoundingClientRect().top;
         list.style.maxHeight = top > 0 ? `${Math.max(0, top - FAB_MENU_LIST_GAP - WINDOW_MARGIN)}px` : "";
@@ -248,7 +256,7 @@ const createFabMenu = (config) => {
         const entry = entries.find(({ element }) => element.contains(event.target));
         if (!entry)
             return;
-        component.emit(FAB_MENU_EVENTS.SELECT, { id: entry.item.id });
+        component.emit(FAB_MENU_EVENTS.SELECT, { id: entry.item.id, value: entry.item.id });
         closeList(true);
     });
     if (settings.presentation === "auto") {

package/dist/components/fab-menu/types.d.ts

@@ -79,9 +79,13 @@ export interface FabMenuEvents {
     open: () => void;
     /** The menu closed */
     close: () => void;
-    /** An item was chosen; the menu closes */
+    /**
+     * An item was chosen; the menu closes. `value` is the item's id again, as
+     * the `value` of `<m-fab-menu>`'s `select` (the FLO-320 payload rule)
+     */
     select: (event: {
         id: string;
+        value: string;
     }) => void;
 }
 /**

package/dist/components/loading-indicator/constants.js

@@ -16,11 +16,11 @@ export const LOADING_INDICATOR_SPRING = {
 };
 export const LOADING_INDICATOR_SHAPES = [
     'softBurst',
-    'cookie9',
+    'cookie9Sided',
     'pentagon',
     'pill',
     'sunny',
-    'cookie4',
+    'cookie4Sided',
     'oval'
 ];
 export const LOADING_INDICATOR_DETERMINATE_SHAPES = ['circle', 'softBurst'];

package/dist/components/loading-indicator/features/renderer.js

@@ -1,12 +1,23 @@
 import { createCanvasContext, updateCanvasDimensions } from "../../../core/canvas/utils.js";
 import { onThemeChange } from "../../../core/utils/theme.js";
-import { materialShape, radialProfile } from "../../../core/shapes/index.js";
+import { shapeCircle, shapeCookie4Sided, shapeCookie9Sided, shapeOval, shapePentagon, shapePill, shapeSoftBurst, shapeSunny, } from "../../../core/shapes/index.js";
+import { sampleProfile } from "../../../core/shapes/material.js";
+const indicatorShapes = {
+    circle: shapeCircle,
+    oval: shapeOval,
+    pentagon: shapePentagon,
+    pill: shapePill,
+    softBurst: shapeSoftBurst,
+    sunny: shapeSunny,
+    cookie4Sided: shapeCookie4Sided,
+    cookie9Sided: shapeCookie9Sided,
+};
 import { LOADING_INDICATOR_CLASSES, LOADING_INDICATOR_DEFAULTS } from "../constants.js";
 const profileCache = new Map();
 const profileFor = (name) => {
     let profile = profileCache.get(name);
     if (!profile) {
-        profile = radialProfile(materialShape(name), LOADING_INDICATOR_DEFAULTS.SAMPLES);
+        profile = sampleProfile((indicatorShapes[name] ?? shapeCircle)(), LOADING_INDICATOR_DEFAULTS.SAMPLES);
         profileCache.set(name, profile);
     }
     return profile;

package/dist/components/side-sheet/config.js

@@ -19,7 +19,7 @@ export const createBaseConfig = (config = {}) => {
     }
     return merged;
 };
-export const getElementConfig = (config) => createElementConfig(config, {
+export const getElementConfig = (config) => createElementConfig({ ...config, title: undefined }, {
     tag: config.layer === "top" ? "dialog" : "div",
     className: [config.class].filter(Boolean),
     attributes: {

package/dist/components/tabs/utils.js

@@ -62,11 +62,12 @@ export function updateTabPanels(component) {
         }
     }
 }
+const isEnabledTab = (tab) => !tab.element.disabled && tab.element.getAttribute("aria-disabled") !== "true";
 export function syncTabStops(component) {
     if (typeof component.getTabs !== "function")
         return;
     const tabs = component.getTabs();
-    const enabled = tabs.filter((tab) => !tab.element.disabled);
+    const enabled = tabs.filter(isEnabledTab);
     const active = getActiveTab(component);
     const stop = active && enabled.includes(active) ? active : enabled[0];
     tabs.forEach((tab) => tab.element.setAttribute("tabindex", tab === stop ? "0" : "-1"));
@@ -89,7 +90,7 @@ export function setupKeyboardNavigation(component, options = {}) {
             return;
         const tabs = component
             .getTabs()
-            .filter((tab) => !tab.element.disabled);
+            .filter(isEnabledTab);
         const currentIndex = tabs.findIndex((tab) => tab.element === tabElement);
         if (currentIndex === -1)
             return;

package/dist/components/timepicker/config.js

@@ -18,7 +18,7 @@ export const defaultConfig = {
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "time-picker");
 const inDialog = (event, prefix) => event.target instanceof Element && event.target.closest(`.${prefix}-time-picker__dialog`) !== null;
 export const getContainerConfig = (config) => {
-    return createElementConfig(config, {
+    return createElementConfig({ ...config, title: undefined }, {
         tag: "div",
         className: [
             config.class,

package/dist/core/shapes/cubic.d.ts

@@ -18,6 +18,8 @@ export declare const straightLine: (x0: number, y0: number, x1: number, y1: numb
  */
 export declare const circularArc: (centerX: number, centerY: number, x0: number, y0: number, x1: number, y1: number) => Cubic;
 export declare const pointOnCurve: (c: Cubic, t: number) => Point;
+/** Splits a cubic at `t` into two that together trace it (de Casteljau) */
+export declare const splitCubic: (c: Cubic, t: number) => [Cubic, Cubic];
 export declare const reverseCubic: (c: Cubic) => Cubic;
 export declare const zeroLength: (c: Cubic) => boolean;
 export type PointTransformer = (x: number, y: number) => Point;

package/dist/core/shapes/cubic.js

@@ -41,6 +41,20 @@ export const pointOnCurve = (c, t) => {
         c[1] * (u * u * u) + c[3] * (3 * t * u * u) + c[5] * (3 * t * t * u) + c[7] * (t * t * t),
     ];
 };
+export const splitCubic = (c, t) => {
+    const u = 1 - t;
+    const [x0, y0, x1, y1, x2, y2, x3, y3] = c;
+    const ax = u * x0 + t * x1, ay = u * y0 + t * y1;
+    const bx = u * x1 + t * x2, by = u * y1 + t * y2;
+    const cx = u * x2 + t * x3, cy = u * y2 + t * y3;
+    const dx = u * ax + t * bx, dy = u * ay + t * by;
+    const ex = u * bx + t * cx, ey = u * by + t * cy;
+    const mx = u * dx + t * ex, my = u * dy + t * ey;
+    return [
+        [x0, y0, ax, ay, dx, dy, mx, my],
+        [mx, my, ex, ey, cx, cy, x3, y3],
+    ];
+};
 export const reverseCubic = (c) => [c[6], c[7], c[4], c[5], c[2], c[3], c[0], c[1]];
 export const zeroLength = (c) => Math.abs(c[0] - c[6]) < DISTANCE_EPSILON && Math.abs(c[1] - c[7]) < DISTANCE_EPSILON;
 export const transformCubic = (c, f) => {

package/dist/core/shapes/index.d.ts

@@ -1,6 +1,6 @@
 export type { Cubic, Point, PointTransformer } from "./cubic.js";
-export { straightLine, circularArc, pointOnCurve, cubicBounds } from "./cubic.js";
+export { straightLine, circularArc, pointOnCurve, cubicBounds, splitCubic } from "./cubic.js";
 export type { CornerRounding, RoundedPolygon } from "./polygon.js";
-export { UNROUNDED, roundedPolygon, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } from "./polygon.js";
+export { UNROUNDED, roundedPolygon, rectangle, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } from "./polygon.js";
 export type { MaterialShapeName, RadialProfile } from "./material.js";
-export { materialShape, radialProfile } from "./material.js";
+export { materialShape, materialShapePath, polygonPath, radialProfile, shapeCircle, shapeSquare, shapeSlanted, shapeArch, shapeFan, shapeArrow, shapeSemiCircle, shapeOval, shapePill, shapeTriangle, shapeDiamond, shapeClamShell, shapePentagon, shapeGem, shapeSunny, shapeVerySunny, shapeCookie4Sided, shapeCookie6Sided, shapeCookie7Sided, shapeCookie9Sided, shapeCookie12Sided, shapeGhostish, shapeClover4Leaf, shapeClover8Leaf, shapeBurst, shapeSoftBurst, shapeBoom, shapeSoftBoom, shapeFlower, shapePuffy, shapePuffyDiamond, shapePixelCircle, shapePixelTriangle, shapeBun, shapeHeart, } from "./material.js";

package/dist/core/shapes/index.js

@@ -1,3 +1,3 @@
-export { straightLine, circularArc, pointOnCurve, cubicBounds } from "./cubic.js";
-export { UNROUNDED, roundedPolygon, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } from "./polygon.js";
-export { materialShape, radialProfile } from "./material.js";
+export { straightLine, circularArc, pointOnCurve, cubicBounds, splitCubic } from "./cubic.js";
+export { UNROUNDED, roundedPolygon, rectangle, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } from "./polygon.js";
+export { materialShape, materialShapePath, polygonPath, radialProfile, shapeCircle, shapeSquare, shapeSlanted, shapeArch, shapeFan, shapeArrow, shapeSemiCircle, shapeOval, shapePill, shapeTriangle, shapeDiamond, shapeClamShell, shapePentagon, shapeGem, shapeSunny, shapeVerySunny, shapeCookie4Sided, shapeCookie6Sided, shapeCookie7Sided, shapeCookie9Sided, shapeCookie12Sided, shapeGhostish, shapeClover4Leaf, shapeClover8Leaf, shapeBurst, shapeSoftBurst, shapeBoom, shapeSoftBoom, shapeFlower, shapePuffy, shapePuffyDiamond, shapePixelCircle, shapePixelTriangle, shapeBun, shapeHeart, } from "./material.js";

package/dist/core/shapes/material.d.ts

@@ -1,8 +1,129 @@
 import { RoundedPolygon, polygonMaxRadius } from "./polygon.js";
-/** Names of the Material shapes available here */
-export type MaterialShapeName = 'circle' | 'oval' | 'pill' | 'pentagon' | 'sunny' | 'cookie4' | 'cookie9' | 'softBurst';
-/** A Material shape, normalised into the unit square */
+/** Circle */
+export declare const shapeCircle: () => RoundedPolygon;
+/** A rounded square */
+export declare const shapeSquare: () => RoundedPolygon;
+/** A slanted square */
+export declare const shapeSlanted: () => RoundedPolygon;
+/** An arch */
+export declare const shapeArch: () => RoundedPolygon;
+/** A fan */
+export declare const shapeFan: () => RoundedPolygon;
+/** An arrow */
+export declare const shapeArrow: () => RoundedPolygon;
+/** A semicircle */
+export declare const shapeSemiCircle: () => RoundedPolygon;
+/** An oval */
+export declare const shapeOval: () => RoundedPolygon;
+/** A pill */
+export declare const shapePill: () => RoundedPolygon;
+/** A triangle */
+export declare const shapeTriangle: () => RoundedPolygon;
+/** A diamond */
+export declare const shapeDiamond: () => RoundedPolygon;
+/** A clam shell */
+export declare const shapeClamShell: () => RoundedPolygon;
+/** A pentagon */
+export declare const shapePentagon: () => RoundedPolygon;
+/** A gem */
+export declare const shapeGem: () => RoundedPolygon;
+/** A sunny shape: an 8-point star */
+export declare const shapeSunny: () => RoundedPolygon;
+/** A very sunny shape */
+export declare const shapeVerySunny: () => RoundedPolygon;
+/** A 4-sided cookie */
+export declare const shapeCookie4Sided: () => RoundedPolygon;
+/** A 6-sided cookie */
+export declare const shapeCookie6Sided: () => RoundedPolygon;
+/** A 7-sided cookie */
+export declare const shapeCookie7Sided: () => RoundedPolygon;
+/** A 9-sided cookie */
+export declare const shapeCookie9Sided: () => RoundedPolygon;
+/** A 12-sided cookie */
+export declare const shapeCookie12Sided: () => RoundedPolygon;
+/** A ghost-ish shape */
+export declare const shapeGhostish: () => RoundedPolygon;
+/** A 4-leaf clover */
+export declare const shapeClover4Leaf: () => RoundedPolygon;
+/** An 8-leaf clover */
+export declare const shapeClover8Leaf: () => RoundedPolygon;
+/** A burst */
+export declare const shapeBurst: () => RoundedPolygon;
+/** A soft burst */
+export declare const shapeSoftBurst: () => RoundedPolygon;
+/** A boom */
+export declare const shapeBoom: () => RoundedPolygon;
+/** A soft boom */
+export declare const shapeSoftBoom: () => RoundedPolygon;
+/** A flower */
+export declare const shapeFlower: () => RoundedPolygon;
+/** A puffy shape */
+export declare const shapePuffy: () => RoundedPolygon;
+/** A puffy diamond */
+export declare const shapePuffyDiamond: () => RoundedPolygon;
+/** A pixelated circle */
+export declare const shapePixelCircle: () => RoundedPolygon;
+/** A pixelated triangle */
+export declare const shapePixelTriangle: () => RoundedPolygon;
+/** A bun */
+export declare const shapeBun: () => RoundedPolygon;
+/** A heart */
+export declare const shapeHeart: () => RoundedPolygon;
+declare const byName: {
+    circle: () => RoundedPolygon;
+    square: () => RoundedPolygon;
+    slanted: () => RoundedPolygon;
+    arch: () => RoundedPolygon;
+    fan: () => RoundedPolygon;
+    arrow: () => RoundedPolygon;
+    semiCircle: () => RoundedPolygon;
+    oval: () => RoundedPolygon;
+    pill: () => RoundedPolygon;
+    triangle: () => RoundedPolygon;
+    diamond: () => RoundedPolygon;
+    clamShell: () => RoundedPolygon;
+    pentagon: () => RoundedPolygon;
+    gem: () => RoundedPolygon;
+    sunny: () => RoundedPolygon;
+    verySunny: () => RoundedPolygon;
+    cookie4Sided: () => RoundedPolygon;
+    cookie6Sided: () => RoundedPolygon;
+    cookie7Sided: () => RoundedPolygon;
+    cookie9Sided: () => RoundedPolygon;
+    cookie12Sided: () => RoundedPolygon;
+    ghostish: () => RoundedPolygon;
+    clover4Leaf: () => RoundedPolygon;
+    clover8Leaf: () => RoundedPolygon;
+    burst: () => RoundedPolygon;
+    softBurst: () => RoundedPolygon;
+    boom: () => RoundedPolygon;
+    softBoom: () => RoundedPolygon;
+    flower: () => RoundedPolygon;
+    puffy: () => RoundedPolygon;
+    puffyDiamond: () => RoundedPolygon;
+    pixelCircle: () => RoundedPolygon;
+    pixelTriangle: () => RoundedPolygon;
+    bun: () => RoundedPolygon;
+    heart: () => RoundedPolygon;
+    /** @deprecated Use 'cookie4Sided' */
+    cookie4: () => RoundedPolygon;
+    /** @deprecated Use 'cookie9Sided' */
+    cookie9: () => RoundedPolygon;
+};
+/**
+ * Names of the Material shapes: Compose's, camelCased. 'cookie4' and
+ * 'cookie9' are deprecated aliases of 'cookie4Sided' and 'cookie9Sided'.
+ */
+export type MaterialShapeName = keyof typeof byName;
+/** A Material shape by name, normalised into the unit square. Carries every shape; import `shapeX` to carry one. */
 export declare const materialShape: (name: MaterialShapeName) => RoundedPolygon;
+/**
+ * A polygon's outline as an SVG path ("M … C … Z"), scaled by `size`: a
+ * normalised shape fills a `size` × `size` box. Coordinates keep three decimals.
+ */
+export declare const polygonPath: (polygon: RoundedPolygon, size?: number) => string;
+/** A Material shape as an SVG path in a `size` × `size` box. Carries every shape, as materialShape does. */
+export declare const materialShapePath: (name: MaterialShapeName, size?: number) => string;
 /** A shape's outline as radii at evenly spaced angles around its centre */
 export interface RadialProfile {
     /** Radius at angle i * 2π / radii.length, clockwise from the positive x axis on a y-down canvas */
@@ -14,11 +135,20 @@ export interface RadialProfile {
     maxRadius: number;
 }
 /**
- * Samples the outline at `samples` angles around the shape's area centroid.
+ * radialProfile without its star-shape check, for callers whose shapes are
+ * known to be star-shaped: the loading indicator's, which the tests check.
  * The centroid, not the bounds centre, is the pivot: a pentagon's mass sits
  * below the middle of its box, and turning it about the box would make it
- * orbit. The shape must be star-shaped around its centroid, which every
- * Material shape is: each ray from the centre crosses the outline once.
+ * orbit.
+ * @internal
+ */
+export declare const sampleProfile: (polygon: RoundedPolygon, samples?: number, stepsPerCubic?: number) => RadialProfile;
+/**
+ * Samples the outline at `samples` angles around the shape's area centroid.
+ * Throws for a shape that is not star-shaped around it. Of the Material
+ * shapes, 33 are; Puffy and PixelTriangle are not (their outlines double back
+ * as seen from the centroid, Puffy by about 0.1°): a ray from the centroid
+ * would cross the outline more than once, and the profile would be wrong.
  */
 export declare const radialProfile: (polygon: RoundedPolygon, samples?: number, stepsPerCubic?: number) => RadialProfile;
 export { polygonMaxRadius };