material 3.2.6 → 3.3.0

package/dist/elements/extended-fab.d.ts

@@ -1,16 +1,3 @@
-/**
- * `<m-extended-fab>`: the extended floating action button as a custom
- * element. Children are the label.
- *
- * `variant`, `size`, `width`, `icon-position`, `position`,
- * `collapse-on-scroll` and `aria-label` have no setter on the extended FAB:
- * changing one recreates it. `type="submit"` and `type="reset"` act on the
- * host's form.
- *
- * Parts: `extended-fab`, `icon`, `label` (also `text`), `ripple`.
- *
- * @module elements
- */
 import type { ExtendedFabComponent } from "../components/extended-fab/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const extendedFabSpec: {
@@ -36,7 +23,6 @@ declare const extendedFabSpec: {
             config: string;
             update: (c: ExtendedFabComponent, v: import("./define.js").AttributeValue) => undefined;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         icon: {
             type: "string";
             config: string;
@@ -50,6 +36,10 @@ declare const extendedFabSpec: {
             type: "string";
             config: string;
         };
+        placement: {
+            type: "string";
+            config: string;
+        };
         "collapse-on-scroll": {
             type: "boolean";
             config: string;
@@ -68,7 +58,12 @@ declare const extendedFabSpec: {
             config: string;
         };
     };
-    methods: readonly ["lower", "raise", "collapse", "expand"];
+    methods: readonly [
+        "lower",
+        "raise",
+        "collapse",
+        "expand"
+    ];
     events: {
         collapse: {
             detail: () => null;
@@ -86,12 +81,9 @@ declare const extendedFabSpec: {
 };
 export declare const extendedFabElement: import("./define.js").ElementDefinition<ExtendedFabComponent>;
 export type ExtendedFabSpec = typeof extendedFabSpec;
-/** `<m-extended-fab>` as a ref or a query returns it. */
 export type ExtendedFabElement = ElementInstance<ExtendedFabSpec, ExtendedFabComponent>;
-/** Registers `<m-extended-fab>` (or `<prefix-extended-fab>`). */
 export declare const defineExtendedFab: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-extended-fab": ExtendedFabElement;
     }

package/dist/elements/extended-fab.js

@@ -1,12 +1,13 @@
 import createExtendedFab from "../components/extended-fab/index.js";
 import { defineElement } from "./define.js";
 import { buttonForm, submitOnClick, typeAttribute } from "./form-button.js";
+import { FLOATING_HOST_STYLES } from "./floating-placement.js";
 const create = (config) => createExtendedFab({ ...config, type: "button" });
 const extendedFabSpec = {
     name: "extended-fab",
     create: (config) => create(config),
     styles: ["extended-fab"],
-    hostStyles: ":host{vertical-align:middle}",
+    hostStyles: ":host{vertical-align:middle}" + FLOATING_HOST_STYLES,
     attributes: {
         variant: { type: "string", config: "variant" },
         size: { type: "string", config: "size" },
@@ -15,6 +16,7 @@ const extendedFabSpec = {
         icon: { type: "string", config: "icon", update: (c, v) => void c.setIcon(String(v ?? "")) },
         "icon-position": { type: "string", config: "iconPosition" },
         position: { type: "string", config: "position" },
+        placement: { type: "string", config: "placement" },
         "collapse-on-scroll": { type: "boolean", config: "collapseOnScroll" },
         value: { type: "string", config: "value", update: (c, v) => void c.setValue(String(v ?? "")) },
         type: typeAttribute,

package/dist/elements/fab-menu.d.ts

@@ -1,30 +1,7 @@
-/**
- * `<m-fab-menu>` with `<m-fab-menu-item>` children.
- *
- * Each `<m-fab-menu-item>` declares one action: its text (or `label`),
- * `value` and `icon`. The FAB takes `icon` and `aria-label`, which names the
- * menu it opens. `color`, `size`, `presentation` and `placement` are the
- * factory's options: the expressive list below 600px, the baseline menu from
- * 600px, unless `presentation` says otherwise.
- *
- * `open` is state, as on `<m-menu>`: the attribute reflects whether the menu
- * is open, and setting or removing it opens or closes it. `show()`, `hide()`
- * and `toggle()` do the same. `open` and `close` are dispatched as it opens
- * and closes, by those methods or the user (not when the attribute or the
- * property is what changed: that is applied at once, and quietly), and
- * `select` with the item's value when one is chosen.
- *
- * Parts: `fab-menu`, `fab`, `list`, `item`.
- *
- * @module elements
- */
 import type { FabMenuComponent } from "../components/fab-menu/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementInstance } from "./define.js";
-/** The FAB menu, with the methods the element adds to it. */
 export type FabMenuElementComponent = FabMenuComponent & {
-    /** Opens the menu. */
     show: () => void;
-    /** Closes the menu. */
     hide: () => void;
 };
 declare const fabMenuSpec: {
@@ -37,7 +14,6 @@ declare const fabMenuSpec: {
             type: "boolean";
             update: (c: FabMenuElementComponent, v: import("./define.js").AttributeValue) => void;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. The menu opts out of server rendering, so the server leaves this escaped until the component upgrades. */
         icon: {
             type: "string";
             config: string;
@@ -64,7 +40,11 @@ declare const fabMenuSpec: {
             config: string;
         };
     };
-    methods: readonly ["show", "hide", "toggle"];
+    methods: readonly [
+        "show",
+        "hide",
+        "toggle"
+    ];
     events: {
         open: {
             detail: () => {};
@@ -86,9 +66,7 @@ declare const fabMenuSpec: {
 };
 export declare const fabMenuElement: import("./define.js").ElementDefinition<FabMenuElementComponent>;
 export type FabMenuSpec = typeof fabMenuSpec;
-/** `<m-fab-menu>` as a ref or a query returns it. */
 export type FabMenuElement = ElementInstance<FabMenuSpec, FabMenuElementComponent>;
-/** `<m-fab-menu-item>` declares one action and renders nothing. Its text is the label unless `label` is set. */
 export declare const fabMenuItemDeclaration: {
     readonly name: "fab-menu-item";
     readonly attributes: {
@@ -98,17 +76,14 @@ export declare const fabMenuItemDeclaration: {
         readonly label: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. The menu opts out of server rendering, so the server leaves this escaped until the component upgrades. */
         readonly icon: {
             readonly type: "string";
         };
     };
 };
 export type FabMenuItemAttributes = ElementAttributes<typeof fabMenuItemDeclaration>;
-/** Registers `<m-fab-menu>` and `<m-fab-menu-item>` (or with another prefix). */
 export declare const defineFabMenu: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-fab-menu": FabMenuElement;
         "m-fab-menu-item": HTMLElement & FabMenuItemAttributes;

package/dist/elements/fab.d.ts

@@ -1,15 +1,3 @@
-/**
- * `<m-fab>`: the floating action button as a custom element. It has no text,
- * so `aria-label` is its accessible name.
- *
- * `variant`, `size`, `position` and `aria-label` have no setter on the FAB:
- * changing one recreates it. `type="submit"` and `type="reset"` act on the
- * host's form.
- *
- * Parts: `fab`, `icon`, `ripple`.
- *
- * @module elements
- */
 import type { FabComponent } from "../components/fab/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const fabSpec: {
@@ -31,7 +19,6 @@ declare const fabSpec: {
             config: string;
             update: (c: FabComponent, v: import("./define.js").AttributeValue) => undefined;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         icon: {
             type: "string";
             config: string;
@@ -41,6 +28,10 @@ declare const fabSpec: {
             type: "string";
             config: string;
         };
+        placement: {
+            type: "string";
+            config: string;
+        };
         value: {
             type: "string";
             config: string;
@@ -55,18 +46,18 @@ declare const fabSpec: {
             config: string;
         };
     };
-    methods: readonly ["lower", "raise"];
+    methods: readonly [
+        "lower",
+        "raise"
+    ];
     form: import("./define.js").FormSpec<FabComponent>;
     setup: <C extends import("./define.js").ElementComponent>(host: import("./define.js").ElementHost<C>) => (() => void);
 };
 export declare const fabElement: import("./define.js").ElementDefinition<FabComponent>;
 export type FabSpec = typeof fabSpec;
-/** `<m-fab>` as a ref or a query returns it. */
 export type FabElement = ElementInstance<FabSpec, FabComponent>;
-/** Registers `<m-fab>` (or `<prefix-fab>`). */
 export declare const defineFab: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-fab": FabElement;
     }

package/dist/elements/fab.js

@@ -1,17 +1,19 @@
 import createFab from "../components/fab/index.js";
 import { defineElement } from "./define.js";
 import { buttonForm, submitOnClick, typeAttribute } from "./form-button.js";
+import { FLOATING_HOST_STYLES } from "./floating-placement.js";
 const fabSpec = {
     name: "fab",
     create: (config) => createFab({ ...config, type: "button" }),
     styles: ["fab"],
-    hostStyles: ":host{vertical-align:middle}",
+    hostStyles: ":host{vertical-align:middle}" + FLOATING_HOST_STYLES,
     attributes: {
         variant: { type: "string", config: "variant" },
         size: { type: "string", config: "size" },
         disabled: { type: "boolean", config: "disabled", update: (c, v) => void (v ? c.disable() : c.enable()) },
         icon: { type: "string", config: "icon", update: (c, v) => void c.setIcon(String(v ?? "")) },
         position: { type: "string", config: "position" },
+        placement: { type: "string", config: "placement" },
         value: { type: "string", config: "value", update: (c, v) => void c.setValue(String(v ?? "")) },
         type: typeAttribute,
         "aria-label": { type: "string", config: "ariaLabel" },

package/dist/elements/floating-placement.js

@@ -0,0 +1 @@
+export const FLOATING_HOST_STYLES = ":host(:is([placement='top-start'],[placement='top-end'],[placement='bottom-start'],[placement='bottom-end'])){position:fixed}";

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

@@ -1,23 +1,3 @@
-/**
- * `<m-icon-button>`: the icon button as a custom element. It has no text, so
- * `aria-label` is its accessible name.
- *
- * With `toggle`, the `selected` attribute is the default state and the
- * `selected` property the live one: the attribute moves the state until the
- * user or script changes it. A click dispatches `change` with `{ selected, value }`
- * from the host, as `<m-switch>` and `<m-checkbox>` do. The `toggle` event
- * 0.10 dispatched beside it, which clashed with the native ToggleEvent, is
- * gone in material 3.0.0.
- * `type="submit"` and `type="reset"` act on the host's form.
- *
- * Parts: `icon-button`, `icon`, `ripple`.
- *
- * The host carries `data-mtrl-icon-button` whenever it is connected: its
- * prefix-independent marker, which another element's `::slotted()` rules can
- * match where they cannot spell the tag (`ElementSpec.marker`).
- *
- * @module elements
- */
 import type { IconButtonComponent } from "../components/icon-button/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const iconButtonSpec: {
@@ -52,13 +32,11 @@ declare const iconButtonSpec: {
             config: string;
             update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         icon: {
             type: "string";
             config: string;
             update: (c: IconButtonComponent, v: import("./define.js").AttributeValue) => undefined;
         };
-        /** Markup (HTML), shown while `toggle` and `selected`. Not sanitized by default: see Markup and sanitizing. */
         "selected-icon": {
             type: "string";
             config: string;
@@ -95,7 +73,11 @@ declare const iconButtonSpec: {
             config: string;
         };
     };
-    methods: readonly ["select", "deselect", "toggleSelected"];
+    methods: readonly [
+        "select",
+        "deselect",
+        "toggleSelected"
+    ];
     model: "selected";
     events: {
         change: {
@@ -110,12 +92,9 @@ declare const iconButtonSpec: {
 };
 export declare const iconButtonElement: import("./define.js").ElementDefinition<IconButtonComponent>;
 export type IconButtonSpec = typeof iconButtonSpec;
-/** `<m-icon-button>` as a ref or a query returns it. */
 export type IconButtonElement = ElementInstance<IconButtonSpec, IconButtonComponent>;
-/** Registers `<m-icon-button>` (or `<prefix-icon-button>`). */
 export declare const defineIconButton: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-icon-button": IconButtonElement;
     }

package/dist/elements/index.d.ts

@@ -1,13 +1,3 @@
-/**
- * The web component layer: each component as a custom element.
- *
- * Importing registers nothing and touches no DOM, so this module is safe on a
- * server. In the browser, import the CSS (`material/elements/css` or one
- * component's `material/elements/css/<name>`), then call a `define*` function or
- * `defineAll()`.
- *
- * @module elements
- */
 import type { DefineOptions } from "./define.js";
 export { defineElement, DEFAULT_PREFIX, SHADOW_BASE_STYLES } from "./define.js";
 export type { DefineOptions, ElementSpec, ElementDefinition, ElementComponent, ElementHost, ElementInstance, ElementAttributes, ElementProperties, ElementSlotText, ElementSlots, ElementSlotProp, ElementMarkup, ElementEvents, ElementMethods, ElementProps, AttributeSpec, AttributeType, PropertySpec, EventSpec, SlotSpec, FormSpec, } from "./define.js";
@@ -88,10 +78,6 @@ export { timepickerElement, defineTimepicker } from "./timepicker.js";
 export type { TimepickerSpec, TimepickerElement, TimepickerElementComponent } from "./timepicker.js";
 export { searchElement, searchSuggestionDeclaration, defineSearch } from "./search.js";
 export type { SearchSpec, SearchElement, SearchSuggestionAttributes, SearchElementComponent, SearchElementEvents } from "./search.js";
-/**
- * Every element, by name. Framework adapters are generated from this list and
- * name `<key>Element` and `define<Key>` after each key, so keys are camelCase.
- */
 export declare const elements: {
     readonly button: import("./define.js").ElementDefinition<import("../index.js").ButtonComponent>;
     readonly switch: import("./define.js").ElementDefinition<import("../index.js").SwitchComponent>;
@@ -131,7 +117,6 @@ export declare const elements: {
     readonly timepicker: import("./define.js").ElementDefinition<import("./timepicker.js").TimepickerElementComponent>;
     readonly search: import("./define.js").ElementDefinition<import("./search.js").SearchElementComponent>;
 };
-/** Declaration children, which render nothing and are read by their parent. */
 export declare const declarations: {
     readonly tab: {
         readonly name: "tab";
@@ -457,5 +442,4 @@ export declare const declarations: {
         };
     };
 };
-/** Registers every element. */
 export declare const defineAll: (options?: DefineOptions) => void;

package/dist/elements/list.d.ts

@@ -1,27 +1,3 @@
-/**
- * `<m-list>` with `<m-list-item>` children.
- *
- * Each `<m-list-item>` declares one row: its text (or `headline`) is the
- * headline, with `overline`, `supporting-text`, a leading icon, avatar or
- * image, a trailing icon or text, `value`, `disabled` and `selected`. An item
- * with `kind="divider"` or `kind="subheader"` declares the list's structure
- * instead. The list reads them into the factory's config and updates in place
- * when they change; the children stay where the framework put them.
- *
- * `variant` is the factory's style: `standard` (the default) or `segmented`.
- *
- * `selection` is the factory's mode: `single` (the default), `multiple`, or
- * `none` (rows are not interactive). `value` on `<m-list>` and the items'
- * `selected` are the default selection, which moves the live one until the
- * user or script changes it; the `value` property is the live selection (the
- * first selected value, as on a native `<select multiple>`) and `values` all
- * of it. A click or Enter on a row dispatches `activate` with its value, then
- * `change` when the selection moved.
- *
- * Parts: `list`, `content`, `item`, `action`, `text`, `headline`, `supporting`.
- *
- * @module elements
- */
 import type { ListComponent, ListItem } from "../components/list/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementHost, type ElementInstance } from "./define.js";
 declare const listSpec: {
@@ -87,12 +63,7 @@ declare const listSpec: {
 };
 export declare const listElement: import("./define.js").ElementDefinition<ListComponent<ListItem>>;
 export type ListSpec = typeof listSpec;
-/** `<m-list>` as a ref or a query returns it. */
 export type ListElement = ElementInstance<ListSpec, ListComponent<ListItem>>;
-/**
- * `<m-list-item>` declares one row and renders nothing. Its text content is
- * the headline unless `headline` is set.
- */
 export declare const listItemDeclaration: {
     readonly name: "list-item";
     readonly attributes: {
@@ -108,18 +79,15 @@ export declare const listItemDeclaration: {
         readonly "supporting-text": {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly "leading-icon": {
             readonly type: "string";
         };
-        /** Markup (HTML), not a person's name or an image URL. Not sanitized by default: see Markup and sanitizing. */
         readonly "leading-avatar": {
             readonly type: "string";
         };
         readonly "leading-image": {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly "trailing-icon": {
             readonly type: "string";
         };
@@ -141,10 +109,8 @@ export declare const listItemDeclaration: {
     };
 };
 export type ListItemAttributes = ElementAttributes<typeof listItemDeclaration>;
-/** Registers `<m-list>` and `<m-list-item>` (or with another prefix). */
 export declare const defineList: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-list": ListElement;
         "m-list-item": HTMLElement & ListItemAttributes;

package/dist/elements/loading-indicator.d.ts

@@ -1,12 +1,3 @@
-/**
- * `<m-loading-indicator>`: the expressive loading indicator as a custom
- * element. It animates from connection; a `value` from 0 to 1 makes it
- * determinate. `aria-label` names what is loading.
- *
- * Parts: `loading-indicator`, `canvas`.
- *
- * @module elements
- */
 import type { LoadingIndicatorComponent } from "../components/loading-indicator/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const loadingIndicatorSpec: {
@@ -35,16 +26,16 @@ declare const loadingIndicatorSpec: {
             update: (c: LoadingIndicatorComponent, v: import("./define.js").AttributeValue) => undefined;
         };
     };
-    methods: readonly ["start", "stop"];
+    methods: readonly [
+        "start",
+        "stop"
+    ];
 };
 export declare const loadingIndicatorElement: import("./define.js").ElementDefinition<LoadingIndicatorComponent>;
 export type LoadingIndicatorSpec = typeof loadingIndicatorSpec;
-/** `<m-loading-indicator>` as a ref or a query returns it. */
 export type LoadingIndicatorElement = ElementInstance<LoadingIndicatorSpec, LoadingIndicatorComponent>;
-/** Registers `<m-loading-indicator>` (or `<prefix-loading-indicator>`). */
 export declare const defineLoadingIndicator: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-loading-indicator": LoadingIndicatorElement;
     }

package/dist/elements/menu.d.ts

@@ -1,50 +1,10 @@
-/**
- * `<m-menu>` with `<m-menu-item>` children.
- *
- * Each `<m-menu-item>` declares one item: its text (or `label`), `value`,
- * `icon`, `shortcut`, `supporting-text` and `disabled`; `divider` makes it a
- * divider instead and `gap` a gap between groups (separate surfaces in the
- * vertical menu), and `<m-menu-item>` children inside it are its submenu.
- * The menu reads them into the factory's items and updates in place when they
- * change; the children stay where the framework put them.
- *
- * The menu opens against an anchor: `anchor` is the id of an element in the
- * menu's own root, then the document's, and the `anchor` property an element
- * (or an id). The anchor opens and closes the menu by pointer and key, as the
- * factory's opener does. The surface stays in the element's shadow root and
- * is shown in the top layer (the factory's `layer: "top"`), so it keeps its
- * styles and is above everything on the page.
- *
- * `open` is state, not a value, as on `<details>`: the attribute reflects
- * whether the menu is open, setting or removing it opens or closes it, and
- * the user closing the menu removes it. `show()`, `hide()` and `toggle()` do
- * the same. `open` and `close` are dispatched as it opens and closes, by
- * those methods, the anchor or the user (not when the attribute or the
- * property is what changed: that is applied at once, and quietly, as on the
- * other elements), and `select` with the item's value when one is chosen.
- * There is no two-way binding: an app that keeps `open` in its state follows
- * the `close` event. `no-close-on-select` keeps the menu open when an item is
- * chosen, and `color="vibrant"` is the vertical menu's vibrant colours.
- *
- * Parts: `menu`, `list`, `item`, `item-content`, `item-text`.
- *
- * @module elements
- */
 import type { MenuComponent, MenuContent } from "../components/menu/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementInstance } from "./define.js";
-/** The menu, with the methods the element adds to it. */
 export type MenuElementComponent = MenuComponent & {
-    /** Opens the menu. */
     show: () => void;
-    /** Closes the menu. */
     hide: () => void;
 };
-/** An anchor as a property takes it: an element, or an id. */
 export type MenuAnchor = HTMLElement | string | null;
-/**
- * The items `<tag>` children declare, with their own `<tag>` children as a
- * submenu. Shared by the elements whose menu takes items (`<m-split-button>`).
- */
 export declare const declaredMenuItems: (parent: Element, tag: string) => MenuContent[];
 declare const menuSpec: {
     name: string;
@@ -104,7 +64,11 @@ declare const menuSpec: {
             config: string;
         };
     };
-    methods: readonly ["show", "hide", "toggle"];
+    methods: readonly [
+        "show",
+        "hide",
+        "toggle"
+    ];
     events: {
         open: {
             detail: () => {};
@@ -126,13 +90,7 @@ declare const menuSpec: {
 };
 export declare const menuElement: import("./define.js").ElementDefinition<MenuElementComponent>;
 export type MenuSpec = typeof menuSpec;
-/** `<m-menu>` as a ref or a query returns it. */
 export type MenuElement = ElementInstance<MenuSpec, MenuElementComponent>;
-/**
- * `<m-menu-item>` declares one item and renders nothing. Its text is the
- * label unless `label` is set; `<m-menu-item>` children are its submenu.
- * Shared with `<m-split-button>`.
- */
 export declare const menuItemDeclaration: {
     readonly name: "menu-item";
     readonly attributes: {
@@ -142,7 +100,6 @@ export declare const menuItemDeclaration: {
         readonly label: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly icon: {
             readonly type: "string";
         };
@@ -164,12 +121,9 @@ export declare const menuItemDeclaration: {
     };
 };
 export type MenuItemAttributes = ElementAttributes<typeof menuItemDeclaration>;
-/** Registers `<m-menu-item>`, before the elements that read it. */
 export declare const defineMenuItem: (options?: DefineOptions) => void;
-/** Registers `<m-menu>` and `<m-menu-item>` (or with another prefix). */
 export declare const defineMenu: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-menu": MenuElement;
         "m-menu-item": HTMLElement & MenuItemAttributes;

package/dist/elements/navigation-bar.d.ts

@@ -1,23 +1,3 @@
-/**
- * `<m-navigation-bar>` with `<m-navigation-bar-item>` children: the M3
- * Expressive navigation bar.
- *
- * Each `<m-navigation-bar-item>` declares one destination, as the rail's items
- * do: `value`, `icon`, `selected-icon`, `badge` (empty: the dot), `badge-label`,
- * `href`, `disabled`, and its text as the label. An item with `href` renders as
- * a link and keeps native navigation. `value` on the bar is the default
- * destination, which moves the live one until the user or script changes it;
- * the `value` property is the live one, and `change` carries it.
- *
- * `item-layout` is `auto` (the default: icon above the label, beside it once
- * the bar is 600px wide), `vertical` or `horizontal`. `hide-on-scroll` hides
- * the bar while the window scrolls down and shows it on the way back up;
- * `visibility` reports each change. A change to either recreates the bar.
- *
- * Parts: `navigation-bar`, `items`, `item`, `content`, `indicator`, `icon`, `label`.
- *
- * @module elements
- */
 import type { NavigationBarComponent } from "../components/navigation-bar/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementHost, type ElementInstance } from "./define.js";
 declare const navigationBarSpec: {
@@ -53,7 +33,10 @@ declare const navigationBarSpec: {
             set: (c: NavigationBarComponent, v: unknown) => undefined;
         };
     };
-    methods: readonly ["hide", "show"];
+    methods: readonly [
+        "hide",
+        "show"
+    ];
     model: "value";
     events: {
         change: {
@@ -74,12 +57,7 @@ declare const navigationBarSpec: {
 };
 export declare const navigationBarElement: import("./define.js").ElementDefinition<NavigationBarComponent>;
 export type NavigationBarSpec = typeof navigationBarSpec;
-/** `<m-navigation-bar>` as a ref or a query returns it. */
 export type NavigationBarElement = ElementInstance<NavigationBarSpec, NavigationBarComponent>;
-/**
- * `<m-navigation-bar-item>` declares one destination and renders nothing.
- * Its text content is the label unless `label` is set; `icon` is required.
- */
 export declare const navigationBarItemDeclaration: {
     readonly name: "navigation-bar-item";
     readonly attributes: {
@@ -89,11 +67,9 @@ export declare const navigationBarItemDeclaration: {
         readonly label: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly icon: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. Shown while this destination is active. */
         readonly "selected-icon": {
             readonly type: "string";
         };
@@ -112,7 +88,6 @@ export declare const navigationBarItemDeclaration: {
     };
 };
 export type NavigationBarItemAttributes = ElementAttributes<typeof navigationBarItemDeclaration>;
-/** Registers `<m-navigation-bar>` and `<m-navigation-bar-item>` (or with another prefix). */
 export declare const defineNavigationBar: (options?: DefineOptions) => string;
 declare global {
     interface HTMLElementTagNameMap {