mtrl 0.9.8 → 0.10.0-next.0

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

@@ -1,36 +1,38 @@
-import { BadgeConfig } from "./types.js";
+import { BadgeConfig, BadgeFeatureHost, BadgeVisibility } from "./types.js";
 /**
  * Higher-order function that adds visibility control features to a component
  * @returns {Function} Component enhancer with visibility features
  */
-export declare const withVisibility: () => (component: any) => any;
+export declare const withVisibility: () => <C extends BadgeFeatureHost>(component: C) => C & {
+    visibility: BadgeVisibility;
+};
 /**
  * Higher-order function that adds variant features to a badge component
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with variant features
  */
-export declare const withVariant: (config: BadgeConfig) => (component: any) => any;
+export declare const withVariant: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
 /**
  * Higher-order function that adds color features to a badge component
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with color features
  */
-export declare const withColor: (config: BadgeConfig) => (component: any) => any;
+export declare const withColor: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
 /**
  * Higher-order function that adds positioning features to a badge component
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with positioning features
  */
-export declare const withPosition: (config: BadgeConfig) => (component: any) => any;
+export declare const withPosition: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
 /**
  * Higher-order function that adds max value features to a badge component
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with max value features
  */
-export declare const withMax: (config: BadgeConfig) => (component: any) => any;
+export declare const withMax: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
 /**
  * Higher-order function that attaches badge to a target element
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with attachment features
  */
-export declare const withAttachment: (config: BadgeConfig) => (component: any) => any;
+export declare const withAttachment: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;

package/dist/components/badge/features.js

@@ -1,11 +1,12 @@
-import { formatBadgeLabel } from "./config.js";
+import { formatBadgeLabel, isBadgeOverflow, isEmptyBadgeLabel } from "./config.js";
 const VARIANT_SMALL = 'small';
 const VARIANT_LARGE = 'large';
 const COLOR_ERROR = 'error';
 const POSITION_TOP_RIGHT = 'top-right';
-export const withVisibility = () => component => {
+export const withVisibility = () => (component) => {
     const visible = component.config.visible !== false;
-    if (!visible) {
+    const nothingToShow = isEmptyBadgeLabel(formatBadgeLabel(component.config.label ?? "", component.config.max));
+    if (!visible || nothingToShow) {
         component.element.classList.add(`${component.getClass('badge')}--invisible`);
     }
     return {
@@ -34,7 +35,7 @@ export const withVisibility = () => component => {
         }
     };
 };
-export const withVariant = (config) => component => {
+export const withVariant = (config) => (component) => {
     const variant = config.variant || VARIANT_LARGE;
     component.element.classList.add(`${component.getClass('badge')}--${variant}`);
     if (variant === VARIANT_SMALL) {
@@ -50,39 +51,39 @@ export const withVariant = (config) => component => {
     }
     return component;
 };
-export const withColor = (config) => component => {
+export const withColor = (config) => (component) => {
     const color = config.color || COLOR_ERROR;
     component.element.classList.add(`${component.getClass('badge')}--${color}`);
     return component;
 };
-export const withPosition = (config) => component => {
+export const withPosition = (config) => (component) => {
     const position = config.position || POSITION_TOP_RIGHT;
     component.element.classList.add(`${component.getClass('badge')}--${position}`);
-    if (config.target) {
+    if (config.target && config.target.parentNode) {
         component.element.classList.add(`${component.getClass('badge')}--positioned`);
     }
     return component;
 };
-export const withMax = (config) => component => {
+export const withMax = (config) => (component) => {
     if (config.max === undefined || config.variant === VARIANT_SMALL) {
         return component;
     }
     component.config.max = config.max;
-    if (config.label !== undefined && config.label !== '') {
+    if (config.label !== undefined) {
         const formattedLabel = formatBadgeLabel(config.label, config.max);
         component.element.textContent = formattedLabel;
-        if (typeof config.label === 'number' && config.label > config.max) {
+        if (isBadgeOverflow(config.label, config.max)) {
             component.element.classList.add(`${component.getClass('badge')}--overflow`);
         }
     }
     return component;
 };
-export const withAttachment = (config) => component => {
+export const withAttachment = (config) => (component) => {
     if (!config.target) {
         return component;
     }
     const wrapper = document.createElement('div');
-    wrapper.classList.add(component.getClass('badge-wrapper'));
+    wrapper.classList.add(component.getClass('badge__wrapper'));
     wrapper.style.position = 'relative';
     const parent = config.target.parentNode;
     if (parent) {

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

@@ -1,3 +1,4 @@
+import { ElementComponent } from "../../core/compose/component.js";
 /**
  * Badge variant types - determines the badge size and appearance
  * @category Components
@@ -96,6 +97,43 @@ export interface BadgeConfig {
      */
     componentName?: string;
 }
+/**
+ * The visibility control withVisibility installs on a badge.
+ *
+ * Named because three places need the same shape: the feature that builds it,
+ * getApiConfig that forwards it, and withAPI that wraps it.
+ *
+ * @category Components
+ * @internal
+ */
+export interface BadgeVisibility {
+    /** Shows the badge */
+    show: () => void;
+    /** Hides the badge */
+    hide: () => void;
+    /** Toggles badge visibility, or forces it when given a flag */
+    toggle: (visible?: boolean) => void;
+    /** Whether the badge is currently visible */
+    isVisible: () => boolean;
+}
+/**
+ * What a badge feature enhancer needs from the component it is handed.
+ *
+ * The badge pipe is createBase, withEvents, withElement, then these features --
+ * so the element half is installed before any of them runs, which is why
+ * `element` and `getClass` are required rather than optional.
+ *
+ * `config` is the badge's own config: createBase keeps the type it was created
+ * with, so a feature reading `config.variant` gets BadgeVariant and not
+ * `unknown`. `wrapper` is written by withAttachment, not read by it.
+ *
+ * @category Components
+ * @internal
+ */
+export interface BadgeFeatureHost extends ElementComponent {
+    config: BadgeConfig & Record<string, unknown>;
+    wrapper?: HTMLElement;
+}
 /**
  * Badge component interface
  * Provides methods for controlling a Material Design 3 badge

package/dist/components/bottom-app-bar/bottom-app-bar.js

@@ -4,9 +4,9 @@ export const createBottomAppBar = (config = {}) => {
     const componentConfig = createConfig(config);
     const component = createBase(componentConfig);
     const actionsContainer = document.createElement("div");
-    actionsContainer.className = `${component.getClass("bottom-app-bar")}-actions`;
+    actionsContainer.className = `${component.getClass("bottom-app-bar")}__actions`;
     const fabContainer = document.createElement("div");
-    fabContainer.className = `${component.getClass("bottom-app-bar")}-fab-container`;
+    fabContainer.className = `${component.getClass("bottom-app-bar")}__fab-container`;
     const enhancedComponent = withElement({
         tag: componentConfig.tag,
         componentName: "bottom-app-bar",
@@ -55,6 +55,10 @@ export const createBottomAppBar = (config = {}) => {
     }
     const bottomBar = {
         ...withLifecycleComponent,
+        addClass(...classes) {
+            withLifecycleComponent.addClass(...classes);
+            return this;
+        },
         destroy() {
             withLifecycleComponent.lifecycle.destroy();
         },

package/dist/components/bottom-app-bar/constants.d.ts

@@ -14,8 +14,8 @@ export declare const DEFAULT_TRANSITION_DURATION = 300;
  */
 export declare const BOTTOM_APP_BAR_CLASSES: {
     readonly ROOT: "bottom-app-bar";
-    readonly ACTIONS: "bottom-app-bar-actions";
-    readonly FAB_CONTAINER: "bottom-app-bar-fab";
+    readonly ACTIONS: "bottom-app-bar__actions";
+    readonly FAB_CONTAINER: "bottom-app-bar__fab-container";
     readonly HIDDEN: "bottom-app-bar--hidden";
     readonly FAB_CENTER: "bottom-app-bar--fab-center";
     readonly FAB_END: "bottom-app-bar--fab-end";

package/dist/components/bottom-app-bar/constants.js

@@ -5,8 +5,8 @@ export const FAB_POSITIONS = {
 export const DEFAULT_TRANSITION_DURATION = 300;
 export const BOTTOM_APP_BAR_CLASSES = {
     ROOT: 'bottom-app-bar',
-    ACTIONS: 'bottom-app-bar-actions',
-    FAB_CONTAINER: 'bottom-app-bar-fab',
+    ACTIONS: 'bottom-app-bar__actions',
+    FAB_CONTAINER: 'bottom-app-bar__fab-container',
     HIDDEN: 'bottom-app-bar--hidden',
     FAB_CENTER: 'bottom-app-bar--fab-center',
     FAB_END: 'bottom-app-bar--fab-end'

package/dist/components/bottom-app-bar/types.d.ts

@@ -66,23 +66,23 @@ export interface BottomAppBar extends ElementComponent {
      * @param {HTMLElement} button - Button element to add
      * @returns {BottomAppBar} BottomAppBar instance for chaining
      */
-    addAction: (button: HTMLElement) => BottomAppBar;
+    addAction(button: HTMLElement): this;
     /**
      * Adds a floating action button to the bottom bar
      * @param {HTMLElement} fab - FAB element to add
      * @returns {BottomAppBar} BottomAppBar instance for chaining
      */
-    addFab: (fab: HTMLElement) => BottomAppBar;
+    addFab(fab: HTMLElement): this;
     /**
      * Shows the bottom bar
      * @returns {BottomAppBar} BottomAppBar instance for chaining
      */
-    show: () => BottomAppBar;
+    show(): this;
     /**
      * Hides the bottom bar
      * @returns {BottomAppBar} BottomAppBar instance for chaining
      */
-    hide: () => BottomAppBar;
+    hide(): this;
     /**
      * Checks if the bottom bar is visible
      * @returns {boolean} Whether the bottom bar is visible