mtrl 0.10.4 → 0.10.6

package/dist/components/textfield/features/required.d.ts

@@ -0,0 +1,33 @@
+import type { BaseComponent, ElementComponent } from "../../../core/compose/component.js";
+import type { LabelManager } from "../../../core/compose/features/textlabel.js";
+/**
+ * A required field's asterisk (FLO-301). M3's text field guidelines mark a
+ * required field with an asterisk after its label, and Material's own web
+ * text field appends it to the label text in the label's colour. Here it is a
+ * span after the text, hidden from screen readers: the input's native
+ * `required` already announces the field as required, and "star" would not.
+ */
+export interface RequiredConfig {
+    /** Whether the field is required; the input gets `required` from withTextInput */
+    required?: boolean;
+    /**
+     * No asterisk on a required field. M3 lets a form whose fields are mostly
+     * required mark its optional ones instead (Material Web's `noAsterisk`).
+     */
+    noAsterisk?: boolean;
+    prefix?: string;
+    componentName?: string;
+}
+/** What this feature installs */
+export interface RequiredFeature {
+    /** Makes the field required or optional, its asterisk with it */
+    setRequired: (required: boolean) => RequiredFeature;
+    /** Whether the field is required */
+    isRequired: () => boolean;
+}
+interface LabelledInputComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    label?: LabelManager;
+}
+export declare const withRequired: <T extends RequiredConfig & object>(config: T) => <C extends LabelledInputComponent>(component: C) => C & RequiredFeature & BaseComponent;
+export {};

package/dist/components/textfield/features/required.js

@@ -0,0 +1,50 @@
+export const withRequired = (config) => (component) => {
+    const PREFIX = config.prefix || "mtrl";
+    const NAME = config.componentName || "textfield";
+    const label = component.label;
+    let required = Boolean(config.required);
+    const asterisk = () => label?.getElement().querySelector(`.${PREFIX}-${NAME}__required`) ?? null;
+    const render = () => {
+        if (!label)
+            return;
+        const shown = asterisk();
+        if (required && !config.noAsterisk) {
+            if (shown)
+                return;
+            const span = document.createElement("span");
+            span.className = `${PREFIX}-${NAME}__required`;
+            span.setAttribute("aria-hidden", "true");
+            span.textContent = "*";
+            label.getElement().append(span);
+        }
+        else {
+            shown?.remove();
+        }
+    };
+    if (label) {
+        const setText = label.setText.bind(label);
+        label.setText = (text) => {
+            setText(text);
+            render();
+            return label;
+        };
+        label.getText = () => {
+            const text = label.getElement().textContent ?? "";
+            return asterisk() ? text.slice(0, -1) : text;
+        };
+    }
+    render();
+    return {
+        ...component,
+        setRequired(next) {
+            required = next;
+            if (component.input)
+                component.input.required = next;
+            render();
+            return this;
+        },
+        isRequired() {
+            return required;
+        },
+    };
+};

package/dist/components/textfield/features/supporting-text.js

@@ -14,27 +14,42 @@ export const withSupportingText = (config) => (component) => {
         else
             removeIdRef(component.input, "aria-describedby", supportingId);
     };
-    const createSupportingElement = (text, isError = false) => {
+    let pendingFrame = 0;
+    const cancelFill = () => {
+        if (pendingFrame)
+            cancelAnimationFrame(pendingFrame);
+        pendingFrame = 0;
+    };
+    const createSupportingElement = () => {
         const element = document.createElement("div");
         element.className = `${PREFIX}-${COMPONENT}__helper`;
         element.id = supportingId;
-        element.textContent = text;
-        if (isError)
-            element.classList.add(`${PREFIX}-${COMPONENT}__helper--error`);
+        element.setAttribute("aria-live", "polite");
         return element;
     };
+    const markError = (element, isError) => {
+        element.classList.toggle(`${PREFIX}-${COMPONENT}__helper--error`, isError);
+    };
+    const detach = () => {
+        cancelFill();
+        if (!supportingElement)
+            return;
+        supportingElement.remove();
+        supportingElement = null;
+        row.release();
+        describe(null);
+    };
     if (config.supportingText) {
-        supportingElement = createSupportingElement(config.supportingText, config.error);
+        supportingElement = createSupportingElement();
+        supportingElement.textContent = config.supportingText;
+        markError(supportingElement, Boolean(config.error));
         show(supportingElement);
         describe(supportingElement);
     }
     if ("lifecycle" in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            if (supportingElement) {
-                supportingElement.remove();
-                row.release();
-            }
+            detach();
             originalDestroy.call(component.lifecycle);
         };
     }
@@ -44,22 +59,29 @@ export const withSupportingText = (config) => (component) => {
             return supportingElement;
         },
         setSupportingText(text, isError = false) {
-            supportingElement?.remove();
-            supportingElement = text ? createSupportingElement(text, isError) : null;
-            if (supportingElement)
-                show(supportingElement);
-            else
-                row.release();
+            if (!text) {
+                detach();
+                return this;
+            }
+            if (supportingElement) {
+                supportingElement.textContent = text;
+                markError(supportingElement, isError);
+                return this;
+            }
+            supportingElement = createSupportingElement();
+            supportingElement.textContent = text;
+            markError(supportingElement, isError);
+            show(supportingElement);
             describe(supportingElement);
+            const element = supportingElement;
+            pendingFrame = requestAnimationFrame(() => {
+                pendingFrame = 0;
+                element.replaceChildren(document.createTextNode(element.textContent ?? ""));
+            });
             return this;
         },
         removeSupportingText() {
-            if (supportingElement) {
-                supportingElement.remove();
-                supportingElement = null;
-                row.release();
-                describe(null);
-            }
+            detach();
             return this;
         },
     };

package/dist/components/textfield/features/trailing-icon.d.ts

@@ -4,10 +4,18 @@ import { BaseComponent, ElementComponent } from "../../../core/compose/component
  */
 interface InputElementComponent extends ElementComponent {
     input?: HTMLInputElement | HTMLTextAreaElement;
+    emit?: (event: string, data?: unknown) => void;
     lifecycle?: {
         destroy: () => void;
     };
 }
+/** What an interactive trailing icon's `trailing` event carries (FLO-301) */
+export interface TextfieldTrailingPayload {
+    /** The field's value when the icon was activated */
+    value: string;
+    /** The click (Enter and Space reach a button as one) */
+    event: MouseEvent;
+}
 /**
  * Configuration for trailing icon feature
  */
@@ -16,6 +24,18 @@ export interface TrailingIconConfig {
      * Trailing icon HTML content
      */
     trailingIcon?: string;
+    /**
+     * Makes the trailing icon a button with this accessible name: clear, show
+     * password, open a menu (FLO-301). M3 draws an interactive trailing icon as an
+     * icon button, as Compose's trailing slot holds an `IconButton`: a 40dp state
+     * layer and a 48dp target. Activating it emits `trailing`. Without a label the
+     * icon is decorative.
+     */
+    trailingIconLabel?: string;
+    /** Called when the trailing icon button is activated, after `trailing` is emitted */
+    onTrailingClick?: (event: TextfieldTrailingPayload) => void;
+    /** Whether the field starts disabled; the trailing button is disabled with it */
+    disabled?: boolean;
     /**
      * CSS class prefix
      */
@@ -45,9 +65,11 @@ export interface TrailingIconFeature {
     /**
      * Sets trailing icon content
      * @param html - HTML content for the icon
+     * @param label - The button's accessible name, making the icon a button; an empty
+     *   string makes it decorative again; left out, the icon keeps what it is
      * @returns Component instance for chaining
      */
-    setTrailingIcon: (html: string) => TrailingIconComponent;
+    setTrailingIcon: (html: string, label?: string) => TrailingIconComponent;
     /**
      * Removes trailing icon
      * @returns Component instance for chaining

package/dist/components/textfield/features/trailing-icon.js

@@ -4,12 +4,44 @@ export const withTrailingIcon = (config) => (component) => {
     const PREFIX = config.prefix || 'mtrl';
     const NAME = config.componentName || 'textfield';
     let slot = null;
+    let label = config.trailingIconLabel ?? '';
+    const activate = (event) => {
+        if (component.input?.disabled)
+            return;
+        const detail = { value: component.input?.value ?? '', event };
+        component.emit?.('trailing', detail);
+        config.onTrailingClick?.(detail);
+    };
+    const create = () => {
+        const className = `${PREFIX}-${NAME}__trailing-icon`;
+        if (!label) {
+            const element = document.createElement('span');
+            element.className = className;
+            return element;
+        }
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `${className} ${className}--button`;
+        button.setAttribute('aria-label', label);
+        button.disabled = Boolean(component.input?.disabled ?? config.disabled);
+        button.addEventListener('click', activate);
+        return button;
+    };
     const ensureSlot = () => {
-        if (slot && slot.parentNode)
+        const wanted = label ? 'BUTTON' : 'SPAN';
+        if (slot && slot.parentNode && slot.tagName === wanted) {
+            if (label)
+                slot.setAttribute('aria-label', label);
             return slot;
-        const element = document.createElement('span');
-        element.className = `${PREFIX}-${NAME}__trailing-icon`;
-        fieldOf(component).appendChild(element);
+        }
+        const element = create();
+        if (slot?.parentNode) {
+            element.append(...Array.from(slot.childNodes));
+            slot.replaceWith(element);
+        }
+        else {
+            fieldOf(component).appendChild(element);
+        }
         component.element.classList.add(`${PREFIX}-${NAME}--with-trailing-icon`);
         if (component.input) {
             component.input.classList.add(`${PREFIX}-${NAME}__input--with-trailing-icon`);
@@ -42,7 +74,9 @@ export const withTrailingIcon = (config) => (component) => {
     return {
         ...component,
         trailingIcon: slot,
-        setTrailingIcon(html) {
+        setTrailingIcon(html, nextLabel) {
+            if (nextLabel !== undefined)
+                label = nextLabel;
             this.trailingIcon = ensureSlot();
             write(this.trailingIcon, html);
             return this;

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

@@ -1,2 +1,17 @@
 export { default } from "./textfield.js";
-export type { TextfieldConfig, TextfieldComponent, TextfieldDensity, TextfieldEvents, TextfieldValuePayload, TextfieldFocusPayload, } from "./types.js";
+export { default as createTextField } from "./textfield.js";
+export type { TextfieldConfig as TextFieldConfig, TextfieldComponent as TextFieldComponent, 
+/** @deprecated Use TextFieldConfig: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldConfig, 
+/** @deprecated Use TextFieldComponent: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldComponent, TextfieldDensity as TextFieldDensity, TextfieldEvents as TextFieldEvents, TextfieldValuePayload as TextFieldValuePayload, TextfieldFocusPayload as TextFieldFocusPayload, TextfieldTrailingPayload as TextFieldTrailingPayload, 
+/** @deprecated Use TextFieldDensity: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldDensity, 
+/** @deprecated Use TextFieldEvents: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldEvents, 
+/** @deprecated Use TextFieldValuePayload: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldValuePayload, 
+/** @deprecated Use TextFieldFocusPayload: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldFocusPayload, 
+/** @deprecated Use TextFieldTrailingPayload: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldTrailingPayload, } from "./types.js";

package/dist/components/textfield/index.js

@@ -1 +1,2 @@
 export { default } from "./textfield.js";
+export { default as createTextField } from "./textfield.js";

package/dist/components/textfield/textfield.js

@@ -2,12 +2,12 @@ import { pipe } from "../../core/compose/index.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withDisabled, withLifecycle, withVariant, withTextInput, withTextLabel, } from "../../core/compose/features/index.js";
 import { withAPI } from "./api.js";
-import { withLeadingIcon, withTrailingIcon, withSupportingText, withPrefixText, withSuffixText, withPlacement, withDensity, withError, withField, withCounter, } from "./features/index.js";
+import { withLeadingIcon, withTrailingIcon, withSupportingText, withPrefixText, withSuffixText, withPlacement, withDensity, withError, withField, withCounter, withRequired, } from "./features/index.js";
 import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
 const createTextfield = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const textfield = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withLifecycle(), withVariant(baseConfig), withField(baseConfig), withTextInput(baseConfig), withDensity(baseConfig), withTextLabel(baseConfig), withLeadingIcon(baseConfig), withTrailingIcon(baseConfig), withPrefixText(baseConfig), withSuffixText(baseConfig), withSupportingText(baseConfig), withError(baseConfig), withCounter(baseConfig), withDisabled(baseConfig), withPlacement(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        const textfield = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withLifecycle(), withVariant(baseConfig), withField(baseConfig), withTextInput(baseConfig), withDensity(baseConfig), withTextLabel(baseConfig), withRequired(baseConfig), withLeadingIcon(baseConfig), withTrailingIcon(baseConfig), withPrefixText(baseConfig), withSuffixText(baseConfig), withSupportingText(baseConfig), withError(baseConfig), withCounter(baseConfig), withDisabled(baseConfig), withPlacement(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
         return textfield;
     }
     catch (error) {

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

@@ -1,4 +1,6 @@
 import type { EventCallback } from "../../core/state/emitter.js";
+import type { TextfieldTrailingPayload } from "./features/trailing-icon.js";
+export type { TextfieldTrailingPayload };
 /**
  * Available Textfield variants
  */
@@ -60,8 +62,13 @@ export interface TextfieldConfig {
     value?: string;
     /** Placeholder text */
     placeholder?: string;
-    /** Whether input is required */
+    /** Whether input is required; the label gets an asterisk (FLO-301) */
     required?: boolean;
+    /**
+     * No asterisk on a required field: M3 lets a form whose fields are mostly
+     * required mark its optional ones instead (FLO-301)
+     */
+    noAsterisk?: boolean;
     /** Whether textfield is disabled */
     disabled?: boolean;
     /** Whether textfield is readonly */
@@ -76,6 +83,15 @@ export interface TextfieldConfig {
     leadingIcon?: string;
     /** Trailing icon HTML content */
     trailingIcon?: string;
+    /**
+     * Makes the trailing icon a button with this accessible name (clear, show
+     * password, …), emitting `trailing` when activated. Without it the icon is
+     * decorative. M3 draws an interactive trailing icon as an icon button, as
+     * Compose's trailing slot holds an `IconButton` (FLO-301).
+     */
+    trailingIconLabel?: string;
+    /** Called when the trailing icon button is activated, after `trailing` is emitted */
+    onTrailingClick?: (event: TextfieldTrailingPayload) => void;
     /** Supporting text content */
     supportingText?: string;
     /** Whether supporting text indicates an error */
@@ -103,6 +119,8 @@ export interface TextfieldFocusPayload {
 }
 /** Events emitted by the text input feature. setValue() is silent. */
 export interface TextfieldEvents {
+    /** The trailing icon button was activated (`trailingIconLabel`; FLO-301) */
+    trailing: (payload: TextfieldTrailingPayload) => void;
     input: (payload: TextfieldValuePayload) => void;
     change: (payload: TextfieldValuePayload) => void;
     focus: (payload: TextfieldFocusPayload) => void;
@@ -148,9 +166,17 @@ export interface TextfieldComponent {
     /** Trailing icon element (if present) */
     trailingIcon: HTMLElement | null;
     /** Sets the trailing icon HTML content */
-    setTrailingIcon: (html: string) => TextfieldComponent;
+    /**
+     * Sets the trailing icon. `label` makes it a button with that accessible name,
+     * an empty one makes it decorative; left out, the icon keeps what it is.
+     */
+    setTrailingIcon: (html: string, label?: string) => TextfieldComponent;
     /** Removes the trailing icon */
     removeTrailingIcon: () => TextfieldComponent;
+    /** Makes the field required or optional, the label's asterisk with it (FLO-301) */
+    setRequired: (required: boolean) => TextfieldComponent;
+    /** Whether the field is required */
+    isRequired: () => boolean;
     /** Supporting text element (if present) */
     supportingTextElement: HTMLElement | null;
     /** Sets the supporting text content */
@@ -187,6 +213,8 @@ export interface TextfieldComponent {
     enable: () => TextfieldComponent;
     /** Disables the textfield */
     disable: () => TextfieldComponent;
+    /** Whether the text field is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /** Destroys the textfield component and cleans up resources */
     destroy: () => void;
 }
@@ -197,6 +225,7 @@ export interface ApiOptions {
     disabled: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
         destroy: () => void;
@@ -227,7 +256,7 @@ export interface BaseComponent {
     setLeadingIcon?: (html: string) => void;
     removeLeadingIcon?: () => void;
     trailingIcon?: HTMLElement | null;
-    setTrailingIcon?: (html: string) => void;
+    setTrailingIcon?: (html: string, label?: string) => void;
     removeTrailingIcon?: () => void;
     supportingTextElement?: HTMLElement | null;
     setSupportingText?: (text: string, isError?: boolean) => void;
@@ -244,6 +273,7 @@ export interface BaseComponent {
     disabled?: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle?: {
         destroy: () => void;

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

@@ -222,7 +222,8 @@ export interface TimePickerConfig {
      */
     onClose?: () => void;
     /**
-     * Callback when time is confirmed; receives the same 24-hour value as getValue()
+     * Callback when time is confirmed; receives the same 24-hour value as getValue().
+     * In 1.0 it receives `{ value }`, the object a `confirm` listener receives.
      */
     onConfirm?: (time: string) => void;
     /**

package/dist/components/toolbar/toolbar.js

@@ -1,3 +1,4 @@
+import { processClassNames } from "../../core/config/component.js";
 import { pipe } from "../../core/compose/pipe.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
@@ -27,7 +28,7 @@ const createToolbar = (config = {}) => {
             placement !== TOOLBAR_PLACEMENTS.NONE ? `${block}--${placement}` : "",
             variant === TOOLBAR_VARIANTS.DOCKED ? `${block}--${settings.arrangement}` : "",
             settings.elevated ? `${block}--elevated` : "",
-            settings.class ?? "",
+            processClassNames(settings.className || ""),
         ].filter(Boolean),
     }), withLifecycle())(settings);
     const resources = getCleanup(component);

package/dist/components/tooltip/api.js

@@ -39,7 +39,9 @@ export const withAPI = ({ lifecycle }) => (component) => {
     const calculatePosition = () => {
         if (!target)
             return { top: 0, left: 0 };
-        const tooltipRect = component.element.getBoundingClientRect();
+        component.element.style.left = "0px";
+        const tooltipWidth = component.element.offsetWidth;
+        const tooltipHeight = component.element.offsetHeight;
         const targetRect = target.getBoundingClientRect();
         const scrollY = topLayer ? 0 : window.scrollY || window.pageYOffset;
         const scrollX = topLayer ? 0 : window.scrollX || window.pageXOffset;
@@ -49,23 +51,23 @@ export const withAPI = ({ lifecycle }) => (component) => {
         let arrowPosition;
         switch (position) {
             case TOOLTIP_POSITIONS.TOP:
-                top = targetRect.top + scrollY - tooltipRect.height - offset;
+                top = targetRect.top + scrollY - tooltipHeight - offset;
                 left =
                     targetRect.left +
                         scrollX +
                         targetRect.width / 2 -
-                        tooltipRect.width / 2;
+                        tooltipWidth / 2;
                 arrowPosition = "bottom";
                 break;
             case TOOLTIP_POSITIONS.TOP_START:
-                top = targetRect.top + scrollY - tooltipRect.height - offset;
+                top = targetRect.top + scrollY - tooltipHeight - offset;
                 left = targetRect.left + scrollX;
                 arrowPosition = "bottom-start";
                 break;
             case TOOLTIP_POSITIONS.TOP_END:
-                top = targetRect.top + scrollY - tooltipRect.height - offset;
+                top = targetRect.top + scrollY - tooltipHeight - offset;
                 left =
-                    targetRect.left + scrollX + targetRect.width - tooltipRect.width;
+                    targetRect.left + scrollX + targetRect.width - tooltipWidth;
                 arrowPosition = "bottom-end";
                 break;
             case TOOLTIP_POSITIONS.RIGHT:
@@ -73,7 +75,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.top +
                         scrollY +
                         targetRect.height / 2 -
-                        tooltipRect.height / 2;
+                        tooltipHeight / 2;
                 left = targetRect.left + scrollX + targetRect.width + offset;
                 arrowPosition = "left";
                 break;
@@ -84,7 +86,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                 break;
             case TOOLTIP_POSITIONS.RIGHT_END:
                 top =
-                    targetRect.top + scrollY + targetRect.height - tooltipRect.height;
+                    targetRect.top + scrollY + targetRect.height - tooltipHeight;
                 left = targetRect.left + scrollX + targetRect.width + offset;
                 arrowPosition = "left-end";
                 break;
@@ -94,7 +96,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.left +
                         scrollX +
                         targetRect.width / 2 -
-                        tooltipRect.width / 2;
+                        tooltipWidth / 2;
                 arrowPosition = "top";
                 break;
             case TOOLTIP_POSITIONS.BOTTOM_START:
@@ -105,7 +107,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
             case TOOLTIP_POSITIONS.BOTTOM_END:
                 top = targetRect.top + scrollY + targetRect.height + offset;
                 left =
-                    targetRect.left + scrollX + targetRect.width - tooltipRect.width;
+                    targetRect.left + scrollX + targetRect.width - tooltipWidth;
                 arrowPosition = "top-end";
                 break;
             case TOOLTIP_POSITIONS.LEFT:
@@ -113,19 +115,19 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.top +
                         scrollY +
                         targetRect.height / 2 -
-                        tooltipRect.height / 2;
-                left = targetRect.left + scrollX - tooltipRect.width - offset;
+                        tooltipHeight / 2;
+                left = targetRect.left + scrollX - tooltipWidth - offset;
                 arrowPosition = "right";
                 break;
             case TOOLTIP_POSITIONS.LEFT_START:
                 top = targetRect.top + scrollY;
-                left = targetRect.left + scrollX - tooltipRect.width - offset;
+                left = targetRect.left + scrollX - tooltipWidth - offset;
                 arrowPosition = "right-start";
                 break;
             case TOOLTIP_POSITIONS.LEFT_END:
                 top =
-                    targetRect.top + scrollY + targetRect.height - tooltipRect.height;
-                left = targetRect.left + scrollX - tooltipRect.width - offset;
+                    targetRect.top + scrollY + targetRect.height - tooltipHeight;
+                left = targetRect.left + scrollX - tooltipWidth - offset;
                 arrowPosition = "right-end";
                 break;
             default:
@@ -134,15 +136,15 @@ export const withAPI = ({ lifecycle }) => (component) => {
                     targetRect.left +
                         scrollX +
                         targetRect.width / 2 -
-                        tooltipRect.width / 2;
+                        tooltipWidth / 2;
                 arrowPosition = "top";
         }
         const windowWidth = window.innerWidth;
         if (left < 0) {
             left = 0;
         }
-        else if (left + tooltipRect.width > windowWidth) {
-            left = windowWidth - tooltipRect.width;
+        else if (left + tooltipWidth > windowWidth) {
+            left = windowWidth - tooltipWidth;
         }
         return { top, left, arrowPosition };
     };

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

@@ -77,7 +77,10 @@ export declare const TOOLTIP_DEFAULTS: {
     readonly SHOW_ON_FOCUS: true;
     /** Whether to show tooltip on hover by default */
     readonly SHOW_ON_HOVER: true;
-    /** Whether to allow rich HTML content by default */
+    /**
+     * Whether to allow rich HTML content by default
+     * @deprecated The `rich` option has no effect and is removed in 1.0, and this default with it.
+     */
     readonly RICH: false;
 };
 /**

package/dist/components/top-app-bar/index.d.ts

@@ -6,4 +6,6 @@ import { createTopAppBar } from "./top-app-bar.js";
 export { TOP_APP_BAR_TYPES, TOP_APP_BAR_STATES, TOP_APP_BAR_DEFAULTS, TOP_APP_BAR_CLASSES } from "./constants.js";
 export default createTopAppBar;
 export { createTopAppBar };
-export type { TopAppBarConfig, TopAppBar } from "./types.js";
+export type { TopAppBarConfig, TopAppBar as TopAppBarComponent, 
+/** @deprecated Use TopAppBarComponent, the name every component type has. Removed in 1.0 (FLO-383). */
+TopAppBar, } from "./types.js";

package/dist/components/top-app-bar/top-app-bar.d.ts

@@ -2,63 +2,8 @@
  * @module components/top-app-bar
  * @description Top app bar implementation
  */
-import { ElementComponent } from "../../core/compose/index.js";
-import { TopAppBarConfig, TopAppBarType } from "./types.js";
-/**
- * Top app bar component interface
- */
-export interface TopAppBar extends ElementComponent {
-    /**
-     * Sets the title of the top app bar
-     * @param {string} title - Title text
-     * @returns {TopAppBar} TopAppBar instance for chaining
-     */
-    setTitle: (title: string) => TopAppBar;
-    /**
-     * Gets the current title
-     * @returns {string} Current title text
-     */
-    getTitle: () => string;
-    /**
-     * Adds a leading navigation icon or element
-     * @param {HTMLElement} element - Element to add to the leading section
-     * @returns {TopAppBar} TopAppBar instance for chaining
-     */
-    addLeadingElement: (element: HTMLElement) => TopAppBar;
-    /**
-     * Adds a trailing action icon or element
-     * @param {HTMLElement} element - Element to add to the trailing section
-     * @returns {TopAppBar} TopAppBar instance for chaining
-     */
-    addTrailingElement: (element: HTMLElement) => TopAppBar;
-    /**
-     * Changes the top app bar type
-     * @param {TopAppBarType} type - New app bar type
-     * @returns {TopAppBar} TopAppBar instance for chaining
-     */
-    setType: (type: TopAppBarType) => TopAppBar;
-    /**
-     * Manually sets the scrolled state
-     * @param {boolean} scrolled - Whether to show the scrolled state
-     * @returns {TopAppBar} TopAppBar instance for chaining
-     */
-    setScrollState: (scrolled: boolean) => TopAppBar;
-    /**
-     * Gets the headline element
-     * @returns {HTMLElement} Headline element
-     */
-    getHeadlineElement: () => HTMLElement;
-    /**
-     * Gets the leading container element
-     * @returns {HTMLElement} Leading container element
-     */
-    getLeadingContainer: () => HTMLElement;
-    /**
-     * Gets the trailing container element
-     * @returns {HTMLElement} Trailing container element
-     */
-    getTrailingContainer: () => HTMLElement;
-}
+import type { TopAppBar, TopAppBarConfig } from "./types.js";
+export type { TopAppBar };
 /**
  * Creates a top app bar component
  *