material 3.1.0 → 3.2.1

package/README.md

@@ -93,11 +93,11 @@ What a bundler keeps, minified and gzipped (kB is 1,000 bytes), measured from th
 |--------|-----:|
 | `createButton` from `material`, with code splitting: the initial chunks (the progress indicator loads on demand) | 7.4 kB |
 | `createButton`, without code splitting (the progress indicator included) | 13.7 kB |
-| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 19.9 kB |
-| Everything the root exports (`export * from 'material'`), without code splitting | 127.0 kB |
+| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.0 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.1 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
-| `material/styles`, the full stylesheet | 62.7 kB |
+| `material/styles`, the full stylesheet | 62.8 kB |
 <!-- /sizes -->
 
 `material` publishes ESM only, so bundlers drop what you do not import. Each component's page on [md3.io/components](https://md3.io/components/) gives its size.

package/dist/components/tabs/tab.js

@@ -49,6 +49,7 @@ export const createTab = (config = {}) => {
         for (const type of ["focus", "blur"]) {
             button.element.addEventListener(type, (event) => baseComponent.emit?.(type, event));
         }
+        const badgeAnchor = () => button.element.querySelector(`.${baseComponent.getClass("button__icon")},.${baseComponent.getClass("button__text")}`) ?? button.element;
         const tab = {
             ...baseComponent,
             button,
@@ -125,7 +126,7 @@ export const createTab = (config = {}) => {
                     const badgeConfig = {
                         label: content,
                         standalone: false,
-                        target: this.element,
+                        target: badgeAnchor(),
                         prefix: baseConfig.prefix,
                         ...(baseConfig.badgeConfig || {}),
                     };
@@ -184,6 +185,12 @@ export const createTab = (config = {}) => {
                     this.element.classList.remove(`${this.getClass("tab")}--${layout}`);
                 });
                 this.element.classList.add(`${this.getClass("tab")}--${layoutClass}`);
+                const wrapper = this.badge?.wrapper;
+                const anchor = badgeAnchor();
+                if (wrapper && anchor !== this.element && wrapper.firstElementChild !== anchor) {
+                    wrapper.replaceWith(...wrapper.childNodes);
+                    this.badge?.attachTo(anchor);
+                }
             },
         };
         if (baseConfig.badge !== undefined) {

package/dist/components/text-field/api.d.ts

@@ -24,4 +24,6 @@ type ComponentWithDensity = BaseComponent & {
  * @returns {Function} Higher-order function that adds API methods to component
  */
 export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: ComponentWithDensity) => TextFieldComponent;
+/** Development diagnostic, shared by the factory and its element host. */
+export declare const checkTrailingLabel: (element: HTMLElement) => void;
 export {};

package/dist/components/text-field/api.js

@@ -1,12 +1,21 @@
+import { warnDev } from "../../core/utils/warn.js";
 export const withAPI = ({ disabled, lifecycle }) => (component) => {
+    const element = component.element;
+    const classes = element.classList;
+    const fieldClass = component.getClass("text-field");
+    const variantClass = (variant) => `${fieldClass}--${variant}`;
+    const schedulePlacement = () => {
+        if (component.updateElementPositions)
+            component.schedulePositionUpdate?.();
+    };
     const setTrailingDisabled = (off) => {
         const icon = component.trailingIcon;
         if (icon?.tagName === "BUTTON")
             icon.disabled = off;
     };
     return {
-        element: component.element,
-        field: component.field ?? component.element,
+        element: element,
+        field: component.field ?? element,
         input: component.input,
         getValue: component.getValue || (() => ""),
         setValue(value) {
@@ -25,28 +34,20 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
             return this;
         },
         setVariant(variant) {
-            const PREFIX = component.config?.prefix || "mtrl";
-            const COMPONENT = component.config?.componentName || "text-field";
-            component.element.classList.remove(`${PREFIX}-${COMPONENT}--filled`, `${PREFIX}-${COMPONENT}--outlined`);
-            component.element.classList.add(`${PREFIX}-${COMPONENT}--${variant}`);
-            if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
-            }
+            classes.remove(variantClass("filled"), variantClass("outlined"));
+            classes.add(variantClass(variant));
+            schedulePlacement();
             return this;
         },
         getVariant() {
-            const PREFIX = component.config?.prefix || "mtrl";
-            const COMPONENT = component.config?.componentName || "text-field";
-            if (component.element.classList.contains(`${PREFIX}-${COMPONENT}--outlined`)) {
+            if (classes.contains(variantClass("outlined"))) {
                 return "outlined";
             }
             return "filled";
         },
         setLabel(text) {
             component.label?.setText(text);
-            if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
-            }
+            schedulePlacement();
             return this;
         },
         getLabel() {
@@ -58,18 +59,14 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
         setLeadingIcon(html) {
             if (component.setLeadingIcon) {
                 component.setLeadingIcon(html);
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
         removeLeadingIcon() {
             if (component.removeLeadingIcon) {
                 component.removeLeadingIcon();
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
@@ -79,34 +76,26 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
         setTrailingIcon(html, label) {
             if (component.setTrailingIcon) {
                 component.setTrailingIcon(html, label);
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
         removeTrailingIcon() {
             if (component.removeTrailingIcon) {
                 component.removeTrailingIcon();
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
         get supportingTextElement() {
-            return component.element.querySelector(`.${component.getClass("text-field__helper")}`);
+            return element.querySelector(`.${component.getClass("text-field__helper")}`);
         },
         setSupportingText(text, isError) {
-            if (component.setSupportingText) {
-                component.setSupportingText(text, isError);
-            }
+            component.setSupportingText?.(text, isError);
             return this;
         },
         removeSupportingText() {
-            if (component.removeSupportingText) {
-                component.removeSupportingText();
-            }
+            component.removeSupportingText?.();
             return this;
         },
         get prefixTextElement() {
@@ -115,18 +104,14 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
         setPrefixText(text) {
             if (component.setPrefixText) {
                 component.setPrefixText(text);
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
         removePrefixText() {
             if (component.removePrefixText) {
                 component.removePrefixText();
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
@@ -136,55 +121,40 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
         setSuffixText(text) {
             if (component.setSuffixText) {
                 component.setSuffixText(text);
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
         removeSuffixText() {
             if (component.removeSuffixText) {
                 component.removeSuffixText();
-                if (component.updateElementPositions) {
-                    component.schedulePositionUpdate?.();
-                }
+                schedulePlacement();
             }
             return this;
         },
         updatePositions() {
-            if (component.input && component.element) {
-                const hasValue = component.input.value && component.input.value.length > 0;
+            if (component.input) {
+                const hasValue = component.input.value;
                 let isAutofilled = false;
                 try {
                     isAutofilled = component.input.matches?.(":-webkit-autofill") || false;
                 }
                 catch {
                 }
-                if (hasValue || isAutofilled) {
-                    component.element.classList.remove(`${component.config?.prefix || "mtrl"}-text-field--empty`);
-                }
-                else {
-                    component.element.classList.add(`${component.config?.prefix || "mtrl"}-text-field--empty`);
-                }
-            }
-            if (component.updateElementPositions) {
-                component.updateElementPositions();
+                classes.toggle(`${fieldClass}--empty`, !(hasValue || isAutofilled));
             }
+            component.updateElementPositions?.();
             return this;
         },
         setError(error, message) {
-            if (component.setError) {
-                component.setError(error, message);
-            }
+            component.setError?.(error, message);
             return this;
         },
         isError() {
             return component.isError?.() || false;
         },
         setDensity(density) {
-            if (component.density?.set) {
-                component.density.set(density);
-            }
+            component.density?.set?.(density);
             component.schedulePositionUpdate?.();
             return this;
         },
@@ -193,6 +163,20 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
         },
         on(event, handler) {
             component.on?.(event, handler);
+            if (event === "trailing" && /*#__PURE__*/ (() => {
+                try {
+                    return process.env.NODE_ENV !== "production";
+                }
+                catch {
+                    return false;
+                }
+            })() && process.env.NODE_ENV !== "production") {
+                const host = handler.__h;
+                if (host)
+                    element.__h = host;
+                else if (component.trailingIcon?.tagName === "SPAN")
+                    checkTrailingLabel(element.__h ?? element);
+            }
             return this;
         },
         off(event, handler) {
@@ -225,3 +209,10 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
         },
     };
 };
+const warned = /*#__PURE__*/ new WeakSet();
+export const checkTrailingLabel = (element) => {
+    if (!warned.has(element)) {
+        warned.add(element);
+        warnDev('text-field', 'Set trailingIconLabel/trailing-icon-label');
+    }
+};

package/dist/core/shapes/material.js

@@ -1,20 +1,3 @@
-// src/core/shapes/material.ts
-//
-// The Material 3 Expressive shapes: all 35 of Compose Material 3's
-// `MaterialShapes`, built as it builds them (vertex lists repeated around a
-// centre, stars, rectangles, circles), normalised into the unit square.
-//
-// Ported from androidx (Apache License 2.0, Copyright The Android Open Source
-// Project): compose/material3/material3/src/commonMain/kotlin/androidx/compose/
-// material3/MaterialShapes.kt at 080d2b3e5326ba80392d93442c4a51a02dc22650, on
-// the geometry of androidx.graphics:graphics-shapes 1.0.1, the version Compose
-// Material 3 depends on. test/fixtures/material-shapes.json holds every shape
-// as Compose builds it (scripts/generate-material-shapes.kt), and the tests
-// hold this port to it.
-//
-// Each shape is its own export, built once on first use, so a bundle carries
-// only the shapes it names. `materialShape(name)` looks any of them up by name,
-// and carries them all.
 import { pointOnCurve } from "./cubic.js";
 import { circle, normalizePolygon, polygonBounds, polygonMaxRadius, rectangle, regularPolygon, rotatePolygon, roundedPolygon, scalePolygon, star, } from "./polygon.js";
 const cornerRound15 = { radius: 0.15 };
@@ -24,10 +7,6 @@ const cornerRound50 = { radius: 0.5 };
 const cornerRound100 = { radius: 1 };
 const point = (x, y, radius = 0, smoothing = 0) => ({ x, y, r: { radius, smoothing } });
 const toRadians = (degrees) => (degrees / 360) * 2 * Math.PI;
-/**
- * Repeats a few points around the centre, `reps` times, optionally mirroring
- * every other repetition (MaterialShapes.doRepeat)
- */
 const repeat = (points, reps, cx, cy, mirroring) => {
     const result = [];
     if (mirroring) {
@@ -56,7 +35,6 @@ const repeat = (points, reps, cx, cy, mirroring) => {
     }
     return result;
 };
-/** MaterialShapes.customPolygon: points repeated around (0.5, 0.5) */
 const custom = (pnr, reps, mirroring = false) => {
     const points = repeat(pnr, reps, 0.5, 0.5, mirroring);
     const vertices = [];
@@ -64,91 +42,55 @@ const custom = (pnr, reps, mirroring = false) => {
         vertices.push(p.x, p.y);
     return roundedPolygon(vertices, undefined, points.map((p) => p.r), 0.5, 0.5);
 };
-/** A shape built once, on first use, and normalised into the unit square */
 const shape = (build) => {
     let built;
     return () => (built ?? (built = normalizePolygon(build())));
 };
-/** Circle */
 export const shapeCircle = /*#__PURE__*/ shape(() => circle(10));
-/** A rounded square */
 export const shapeSquare = /*#__PURE__*/ shape(() => rectangle(1, 1, cornerRound30));
-/** A slanted square */
 export const shapeSlanted = /*#__PURE__*/ shape(() => custom([point(0.926, 0.97, 0.189, 0.811), point(-0.021, 0.967, 0.187, 0.057)], 2));
-/** An arch */
 export const shapeArch = /*#__PURE__*/ shape(() => rotatePolygon(regularPolygon(4, 1, 0, 0, undefined, [cornerRound100, cornerRound100, cornerRound20, cornerRound20]), -135));
-/** A fan */
 export const shapeFan = /*#__PURE__*/ shape(() => custom([point(1.004, 1.0, 0.148, 0.417), point(0.0, 1.0, 0.151), point(0.0, -0.003, 0.148), point(0.978, 0.02, 0.803)], 1));
-/** An arrow */
 export const shapeArrow = /*#__PURE__*/ shape(() => custom([point(0.5, 0.892, 0.313), point(-0.216, 1.05, 0.207), point(0.499, -0.16, 0.215, 1.0), point(1.225, 1.06, 0.211)], 1));
-/** A semicircle */
 export const shapeSemiCircle = /*#__PURE__*/ shape(() => rectangle(1.6, 1, undefined, [cornerRound20, cornerRound20, cornerRound100, cornerRound100]));
-/** An oval */
 export const shapeOval = /*#__PURE__*/ shape(() => rotatePolygon(scalePolygon(circle(), 1, 0.64), -45));
-/** A pill */
 export const shapePill = /*#__PURE__*/ shape(() => custom([point(0.961, 0.039, 0.426), point(1.001, 0.428), point(1.0, 0.609, 1.0)], 2, true));
-/** A triangle */
 export const shapeTriangle = /*#__PURE__*/ shape(() => rotatePolygon(regularPolygon(3, 1, 0, 0, cornerRound20), -90));
-/** A diamond */
 export const shapeDiamond = /*#__PURE__*/ shape(() => custom([point(0.5, 1.096, 0.151, 0.524), point(0.04, 0.5, 0.159)], 2));
-/** A clam shell */
 export const shapeClamShell = /*#__PURE__*/ shape(() => custom([point(0.171, 0.841, 0.159), point(-0.02, 0.5, 0.14), point(0.17, 0.159, 0.159)], 2));
-/** A pentagon */
 export const shapePentagon = /*#__PURE__*/ shape(() => custom([point(0.5, -0.009, 0.172), point(1.03, 0.365, 0.164), point(0.828, 0.97, 0.169)], 1, true));
-/** A gem */
 export const shapeGem = /*#__PURE__*/ shape(() => custom([point(0.499, 1.023, 0.241, 0.778), point(-0.005, 0.792, 0.208), point(0.073, 0.258, 0.228), point(0.433, -0.0, 0.491)], 1, true));
-/** A sunny shape: an 8-point star */
 export const shapeSunny = /*#__PURE__*/ shape(() => star(8, 1, 0.8, cornerRound15));
-/** A very sunny shape */
 export const shapeVerySunny = /*#__PURE__*/ shape(() => custom([point(0.5, 1.08, 0.085), point(0.358, 0.843, 0.085)], 8));
-/** A 4-sided cookie */
 export const shapeCookie4Sided = /*#__PURE__*/ shape(() => custom([point(1.237, 1.236, 0.258), point(0.5, 0.918, 0.233)], 4));
-/** A 6-sided cookie */
 export const shapeCookie6Sided = /*#__PURE__*/ shape(() => custom([point(0.723, 0.884, 0.394), point(0.5, 1.099, 0.398)], 6));
-/** A 7-sided cookie */
 export const shapeCookie7Sided = /*#__PURE__*/ shape(() => rotatePolygon(star(7, 1, 0.75, cornerRound50), -90));
-/** A 9-sided cookie */
 export const shapeCookie9Sided = /*#__PURE__*/ shape(() => rotatePolygon(star(9, 1, 0.8, cornerRound50), -90));
-/** A 12-sided cookie */
 export const shapeCookie12Sided = /*#__PURE__*/ shape(() => rotatePolygon(star(12, 1, 0.8, cornerRound50), -90));
-/** A ghost-ish shape */
 export const shapeGhostish = /*#__PURE__*/ shape(() => custom([point(0.5, 0, 1.0), point(1, 0, 1.0), point(1, 1.14, 0.254, 0.106), point(0.575, 0.906, 0.253)], 1, true));
-/** A 4-leaf clover */
 export const shapeClover4Leaf = /*#__PURE__*/ shape(() => custom([point(0.5, 0.074), point(0.725, -0.099, 0.476)], 4, true));
-/** An 8-leaf clover */
 export const shapeClover8Leaf = /*#__PURE__*/ shape(() => custom([point(0.5, 0.036), point(0.758, -0.101, 0.209)], 8));
-/** A burst */
 export const shapeBurst = /*#__PURE__*/ shape(() => custom([point(0.5, -0.006, 0.006), point(0.592, 0.158, 0.006)], 12));
-/** A soft burst */
 export const shapeSoftBurst = /*#__PURE__*/ shape(() => custom([point(0.193, 0.277, 0.053), point(0.176, 0.055, 0.053)], 10));
-/** A boom */
 export const shapeBoom = /*#__PURE__*/ shape(() => custom([point(0.457, 0.296, 0.007), point(0.5, -0.051, 0.007)], 15));
-/** A soft boom */
 export const shapeSoftBoom = /*#__PURE__*/ shape(() => custom([point(0.733, 0.454), point(0.839, 0.437, 0.532), point(0.949, 0.449, 0.439, 1.0), point(0.998, 0.478, 0.174)], 16, true));
-/** A flower */
 export const shapeFlower = /*#__PURE__*/ shape(() => custom([point(0.37, 0.187), point(0.416, 0.049, 0.381), point(0.479, 0.001, 0.095)], 8, true));
-/** A puffy shape */
 export const shapePuffy = /*#__PURE__*/ shape(() => scalePolygon(custom([
     point(0.5, 0.053), point(0.545, -0.04, 0.405), point(0.67, -0.035, 0.426), point(0.717, 0.066, 0.574),
     point(0.722, 0.128), point(0.777, 0.002, 0.36), point(0.914, 0.149, 0.66), point(0.926, 0.289, 0.66),
     point(0.881, 0.346), point(0.94, 0.344, 0.126), point(1.003, 0.437, 0.255),
 ], 2, true), 1, 0.742));
-/** A puffy diamond */
 export const shapePuffyDiamond = /*#__PURE__*/ shape(() => custom([point(0.87, 0.13, 0.146), point(0.818, 0.357), point(1.0, 0.332, 0.853)], 4, true));
-/** A pixelated circle */
 export const shapePixelCircle = /*#__PURE__*/ shape(() => custom([
     point(0.5, 0.0), point(0.704, 0.0), point(0.704, 0.065), point(0.843, 0.065),
     point(0.843, 0.148), point(0.926, 0.148), point(0.926, 0.296), point(1.0, 0.296),
 ], 2, true));
-/** A pixelated triangle */
 export const shapePixelTriangle = /*#__PURE__*/ shape(() => custom([
     point(0.11, 0.5), point(0.113, 0.0), point(0.287, 0.0), point(0.287, 0.087), point(0.421, 0.087),
     point(0.421, 0.17), point(0.56, 0.17), point(0.56, 0.265), point(0.674, 0.265), point(0.675, 0.344),
     point(0.789, 0.344), point(0.789, 0.439), point(0.888, 0.439),
 ], 1, true));
-/** A bun */
 export const shapeBun = /*#__PURE__*/ shape(() => custom([point(0.796, 0.5), point(0.853, 0.518, 1), point(0.992, 0.631, 1), point(0.968, 1.0, 1)], 2, true));
-/** A heart */
 export const shapeHeart = /*#__PURE__*/ shape(() => custom([point(0.5, 0.268, 0.016), point(0.792, -0.066, 0.958), point(1.064, 0.276, 1.0), point(0.501, 0.946, 0.129)], 1, true));
 const byName = {
     circle: shapeCircle,
@@ -187,16 +129,11 @@ const byName = {
     bun: shapeBun,
     heart: shapeHeart,
 };
-/** A Material shape by name, normalised into the unit square. Carries every shape; import `shapeX` to carry one. */
 export const materialShape = (name) => byName[name]();
 const num = (value) => {
     const rounded = Math.round(value * 1000) / 1000;
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
-/**
- * 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 const polygonPath = (polygon, size = 1) => {
     const cubics = polygon.cubics;
     if (!cubics.length)
@@ -207,25 +144,14 @@ export const polygonPath = (polygon, size = 1) => {
         d += `C${s(c[2])} ${s(c[3])} ${s(c[4])} ${s(c[5])} ${s(c[6])} ${s(c[7])}`;
     return `${d}Z`;
 };
-/** A Material shape as an SVG path in a `size` × `size` box. Carries every shape, as materialShape does. */
 export const materialShapePath = (name, size = 1) => polygonPath(materialShape(name), size);
 const TWO_PI = Math.PI * 2;
-/**
- * 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.
- * @internal
- */
 export const sampleProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
-    // The outline as a dense polygon
     const points = [];
     for (const cubic of polygon.cubics) {
         for (let s = 0; s < stepsPerCubic; s++)
             points.push(pointOnCurve(cubic, s / stepsPerCubic));
     }
-    // Its area centroid (shoelace formula)
     let area = 0;
     let centerX = 0;
     let centerY = 0;
@@ -246,7 +172,6 @@ export const sampleProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
         centerX = (bounds[0] + bounds[2]) / 2;
         centerY = (bounds[1] + bounds[3]) / 2;
     }
-    // The outline as (angle, radius) pairs, sorted by angle
     const outline = [];
     for (const [x, y] of points) {
         const dx = x - centerX;
@@ -278,13 +203,6 @@ export const sampleProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
     }
     return { radii, centerX, centerY, maxRadius };
 };
-/**
- * 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 const radialProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
     const profile = sampleProfile(polygon, samples, stepsPerCubic);
     const { centerX, centerY } = profile;
@@ -293,9 +211,6 @@ export const radialProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
         for (let s = 0; s < stepsPerCubic; s++)
             points.push(pointOnCurve(cubic, s / stepsPerCubic));
     }
-    // Star-shaped around the centroid: walking the outline, the angle seen from
-    // the centroid only ever turns one way. A shape that doubles back (a heart's
-    // notch, an arch's inner curve) would be sampled wrong: refuse it.
     let turn = 0;
     for (let i = 0; i < points.length; i++) {
         const [x0, y0] = points[i];

package/dist/elements/button-group.d.ts

@@ -27,6 +27,7 @@ declare const buttonGroupSpec: {
     name: string;
     create: (config: Config) => ButtonGroupComponent;
     styles: string[];
+    hostStyles: string;
     attributes: {
         variant: {
             type: "string";

package/dist/elements/button-group.js

@@ -95,6 +95,7 @@ const buttonGroupSpec = {
     name: "button-group",
     create: (config) => createButtonGroup(config),
     styles: ["progress", "button", "icon-button", "button-group"],
+    hostStyles: ":host{display:inline-flex}",
     attributes: {
         variant: { type: "string", config: "variant", update: (c, v) => void c.setVariant(String(v ?? "outlined")) },
         kind: { type: "string", config: "kind" },

package/dist/elements/button.js

@@ -5,7 +5,7 @@ const buttonSpec = {
     name: "button",
     create: (config) => createButton({ ...config, type: "button" }),
     styles: ["progress", "button"],
-    hostStyles: ":host{vertical-align:middle}",
+    hostStyles: ":host{display:inline-flex;vertical-align:middle}",
     attributes: {
         variant: { type: "string", config: "variant", update: (c, v) => void c.setVariant(String(v ?? "filled")) },
         size: { type: "string", config: "size", update: (c, v) => void c.setSize(String(v ?? "s")) },

package/dist/elements/checkbox.d.ts

@@ -15,6 +15,7 @@ declare const checkboxSpec: {
     name: string;
     create: (config: import("./define.js").Config) => CheckboxComponent;
     styles: string[];
+    hostStyles: string;
     attributes: {
         checked: {
             type: "boolean";

package/dist/elements/checkbox.js

@@ -4,6 +4,7 @@ const checkboxSpec = {
     name: "checkbox",
     create: (config) => createCheckbox(config),
     styles: ["checkbox"],
+    hostStyles: ":host{display:inline-flex}",
     attributes: {
         checked: { type: "boolean", config: "checked", update: (c, v) => void c.setValue(!!v) },
         disabled: { type: "boolean", config: "disabled", update: (c, v) => void (v ? c.disable() : c.enable()) },

package/dist/elements/css/hosts/badge.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex;vertical-align:middle}:host>*{position:relative}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex;vertical-align:middle}:host>*{position:relative}

package/dist/elements/css/hosts/bottom-app-bar.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}

package/dist/elements/css/hosts/bottom-sheet.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:contents}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:contents}

package/dist/elements/css/hosts/button-group.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex}

package/dist/elements/css/hosts/button.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{vertical-align:middle}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex;vertical-align:middle}

package/dist/elements/css/hosts/card.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}:host([disabled]){pointer-events:none}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}:host([disabled]){pointer-events:none}

package/dist/elements/css/hosts/carousel.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}

package/dist/elements/css/hosts/checkbox.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex}

package/dist/elements/css/hosts/chips.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}

package/dist/elements/css/hosts/datepicker.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex}

package/dist/elements/css/hosts/dialog.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:contents}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:contents}

package/dist/elements/css/hosts/divider.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}:host([orientation="vertical"]:not([hidden])){display:inline-block;align-self:stretch}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}:host([orientation="vertical"]:not([hidden])){display:inline-block;align-self:stretch}

package/dist/elements/css/hosts/drawer.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block;flex-shrink:0}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block;flex-shrink:0}

package/dist/elements/css/hosts/icon-button.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{vertical-align:middle}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex;vertical-align:middle}:host::before{content:'';align-self:stretch;width:0}

package/dist/elements/css/hosts/list.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}

package/dist/elements/css/hosts/loading-indicator.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex;vertical-align:middle}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:inline-flex;vertical-align:middle}

package/dist/elements/css/hosts/menu.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:contents}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:contents}

package/dist/elements/css/hosts/navigation-bar.css

@@ -1 +1 @@
-:host{display:inline-block}:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}
+:host([hidden]){display:none}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,visibility!important;scroll-behavior:auto!important}}:host{display:block}