@bug-on/m3-expressive 1.1.0 → 1.2.1

package/dist/{split-button-trailing-uncheckable-BRPuTqi1.d.mts → split-button-trailing-uncheckable-BcPD_7uK.d.ts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-DFhj-NZj.mjs';
+import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-Dty-Qcad.js';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -170,9 +170,37 @@ declare const BUTTON_COLOR_TOKENS: {
         readonly selected: "bg-transparent text-m3-primary";
         readonly unselected: "bg-transparent text-m3-primary";
     };
+    /**
+     * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+     * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+     */
+    readonly tertiary: {
+        readonly default: "bg-m3-tertiary text-m3-on-tertiary";
+        readonly selected: "bg-m3-tertiary text-m3-on-tertiary";
+        readonly unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container";
+    };
+    /**
+     * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+     * Ideal for badges, pill chips, and elements that must carry the brand color
+     * regardless of the active theme.
+     */
+    readonly "primary-fixed": {
+        readonly default: "bg-m3-primary-fixed text-m3-on-primary-fixed";
+        readonly selected: "bg-m3-primary-fixed text-m3-on-primary-fixed";
+        readonly unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant";
+    };
+    /**
+     * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+     * badges, or accent pills that need a fixed tertiary hue across themes.
+     */
+    readonly "tertiary-fixed": {
+        readonly default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed";
+        readonly selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed";
+        readonly unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant";
+    };
 };
 
-type ButtonGroupVariant = "standard" | "connected" | "navbar";
+type ButtonGroupVariant = "standard" | "connected";
 type ButtonGroupOrientation = "horizontal" | "vertical";
 /**
  * Props for ButtonGroup component.
@@ -182,7 +210,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      * Display variant of the button group:
      * - `standard`: Independent buttons with gap spacing.
      * - `connected`: Connected buttons sharing borders (Segmented Button).
-     * - `navbar`: Navigation bar variant with animated active sliding indicator pill.
      * @default "standard"
      */
     variant?: ButtonGroupVariant;
@@ -217,14 +244,14 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      */
     showCheck?: boolean;
     /**
-     * Controls icon display behavior (primarily for `navbar`).
+     * Controls icon display behavior.
      * - `selected`: Display icon only on selected item.
      * - `all`: Display on all items.
      * - `none`: Hide all icons.
      */
     iconBehavior?: "selected" | "all" | "none";
     /**
-     * Controls label display behavior (primarily for `navbar`).
+     * Controls label display behavior.
      * - `selected`: Display label only on selected item.
      * - `all`: Display on all items.
      * - `none`: Hide all labels.
@@ -240,7 +267,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
     /**
      * Custom CSS class applied to individual child buttons in group.
      * Useful for customizing padding, min-width, or other layout properties.
-     * For `navbar` variant, overrides default padding styles.
      */
     itemClassName?: string;
 }
@@ -282,6 +308,13 @@ interface ExtendedFABProps extends MotionButtonProps$2 {
     onCollapsedChange?: (collapsed: boolean) => void;
     /** Layout ID for Framer Motion Container Transform transitions. */
     layoutId?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React$1.ReactNode;
 }
 declare const ExtendedFAB: React$1.NamedExoticComponent<Omit<ExtendedFABProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -348,6 +381,12 @@ interface FABProps extends MotionButtonProps$1 {
      * @default true
      */
     visible?: boolean;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
 }
 /**
  * Props for `FABPosition` layout wrapper component.
@@ -548,6 +587,13 @@ interface FABMenuItemProps {
     totalItems?: number;
     /** Logic `tabIndex` value for manual keyboard navigation. */
     tabIndex?: number;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React$1.ReactNode;
 }
 /**
  * Toggle FAB button (Morphing FAB) usable as standalone or trigger for `FABMenu`.
@@ -579,7 +625,7 @@ declare const ToggleFAB: React$1.NamedExoticComponent<ToggleFABProps & React$1.R
  * Disabled items use `aria-disabled="true"` rather than native HTML `disabled`
  * so they remain focusable in the tab sequence per MD3 specification.
  */
-declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, className, tabIndex, }: FABMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, className, tabIndex, asChild, children, }: FABMenuItemProps): react_jsx_runtime.JSX.Element;
 /**
  * MD3 Expressive FAB Menu.
  *
@@ -672,6 +718,12 @@ interface SplitButtonLeadingProps extends MotionButtonProps {
     children?: React.ReactNode;
     disabled?: boolean;
     className?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
 }
 interface SplitButtonTrailingProps extends Omit<MotionButtonProps, "onChange" | "color" | "children"> {
     variant?: SplitButtonVariant;
@@ -687,6 +739,13 @@ interface SplitButtonTrailingProps extends Omit<MotionButtonProps, "onChange" |
     /** ID of controlled menu element */
     "aria-controls"?: string;
     className?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
 }
 interface SplitButtonTrailingUncheckableProps extends Omit<MotionButtonProps, "color" | "children"> {
     variant?: SplitButtonVariant;
@@ -695,6 +754,13 @@ interface SplitButtonTrailingUncheckableProps extends Omit<MotionButtonProps, "c
     disabled?: boolean;
     "aria-label": string;
     className?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
 }
 
 declare const SplitButtonLayout: React$1.NamedExoticComponent<SplitButtonLayoutProps & React$1.RefAttributes<HTMLDivElement>>;

package/dist/{split-button-trailing-uncheckable-CjOFCoyW.d.ts → split-button-trailing-uncheckable-DtFJkTFr.d.mts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-DFhj-NZj.js';
+import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-Dty-Qcad.mjs';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -170,9 +170,37 @@ declare const BUTTON_COLOR_TOKENS: {
         readonly selected: "bg-transparent text-m3-primary";
         readonly unselected: "bg-transparent text-m3-primary";
     };
+    /**
+     * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+     * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+     */
+    readonly tertiary: {
+        readonly default: "bg-m3-tertiary text-m3-on-tertiary";
+        readonly selected: "bg-m3-tertiary text-m3-on-tertiary";
+        readonly unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container";
+    };
+    /**
+     * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+     * Ideal for badges, pill chips, and elements that must carry the brand color
+     * regardless of the active theme.
+     */
+    readonly "primary-fixed": {
+        readonly default: "bg-m3-primary-fixed text-m3-on-primary-fixed";
+        readonly selected: "bg-m3-primary-fixed text-m3-on-primary-fixed";
+        readonly unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant";
+    };
+    /**
+     * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+     * badges, or accent pills that need a fixed tertiary hue across themes.
+     */
+    readonly "tertiary-fixed": {
+        readonly default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed";
+        readonly selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed";
+        readonly unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant";
+    };
 };
 
-type ButtonGroupVariant = "standard" | "connected" | "navbar";
+type ButtonGroupVariant = "standard" | "connected";
 type ButtonGroupOrientation = "horizontal" | "vertical";
 /**
  * Props for ButtonGroup component.
@@ -182,7 +210,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      * Display variant of the button group:
      * - `standard`: Independent buttons with gap spacing.
      * - `connected`: Connected buttons sharing borders (Segmented Button).
-     * - `navbar`: Navigation bar variant with animated active sliding indicator pill.
      * @default "standard"
      */
     variant?: ButtonGroupVariant;
@@ -217,14 +244,14 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      */
     showCheck?: boolean;
     /**
-     * Controls icon display behavior (primarily for `navbar`).
+     * Controls icon display behavior.
      * - `selected`: Display icon only on selected item.
      * - `all`: Display on all items.
      * - `none`: Hide all icons.
      */
     iconBehavior?: "selected" | "all" | "none";
     /**
-     * Controls label display behavior (primarily for `navbar`).
+     * Controls label display behavior.
      * - `selected`: Display label only on selected item.
      * - `all`: Display on all items.
      * - `none`: Hide all labels.
@@ -240,7 +267,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
     /**
      * Custom CSS class applied to individual child buttons in group.
      * Useful for customizing padding, min-width, or other layout properties.
-     * For `navbar` variant, overrides default padding styles.
      */
     itemClassName?: string;
 }
@@ -282,6 +308,13 @@ interface ExtendedFABProps extends MotionButtonProps$2 {
     onCollapsedChange?: (collapsed: boolean) => void;
     /** Layout ID for Framer Motion Container Transform transitions. */
     layoutId?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React$1.ReactNode;
 }
 declare const ExtendedFAB: React$1.NamedExoticComponent<Omit<ExtendedFABProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -348,6 +381,12 @@ interface FABProps extends MotionButtonProps$1 {
      * @default true
      */
     visible?: boolean;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
 }
 /**
  * Props for `FABPosition` layout wrapper component.
@@ -548,6 +587,13 @@ interface FABMenuItemProps {
     totalItems?: number;
     /** Logic `tabIndex` value for manual keyboard navigation. */
     tabIndex?: number;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React$1.ReactNode;
 }
 /**
  * Toggle FAB button (Morphing FAB) usable as standalone or trigger for `FABMenu`.
@@ -579,7 +625,7 @@ declare const ToggleFAB: React$1.NamedExoticComponent<ToggleFABProps & React$1.R
  * Disabled items use `aria-disabled="true"` rather than native HTML `disabled`
  * so they remain focusable in the tab sequence per MD3 specification.
  */
-declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, className, tabIndex, }: FABMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, className, tabIndex, asChild, children, }: FABMenuItemProps): react_jsx_runtime.JSX.Element;
 /**
  * MD3 Expressive FAB Menu.
  *
@@ -672,6 +718,12 @@ interface SplitButtonLeadingProps extends MotionButtonProps {
     children?: React.ReactNode;
     disabled?: boolean;
     className?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
 }
 interface SplitButtonTrailingProps extends Omit<MotionButtonProps, "onChange" | "color" | "children"> {
     variant?: SplitButtonVariant;
@@ -687,6 +739,13 @@ interface SplitButtonTrailingProps extends Omit<MotionButtonProps, "onChange" |
     /** ID of controlled menu element */
     "aria-controls"?: string;
     className?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
 }
 interface SplitButtonTrailingUncheckableProps extends Omit<MotionButtonProps, "color" | "children"> {
     variant?: SplitButtonVariant;
@@ -695,6 +754,13 @@ interface SplitButtonTrailingUncheckableProps extends Omit<MotionButtonProps, "c
     disabled?: boolean;
     "aria-label": string;
     className?: string;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
 }
 
 declare const SplitButtonLayout: React$1.NamedExoticComponent<SplitButtonLayoutProps & React$1.RefAttributes<HTMLDivElement>>;

package/dist/{text-field-eAIpz9z1.d.mts → text-field-T4Rg-9Bw.d.mts}

@@ -145,6 +145,13 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * When provided, a dedicated tabbable close button with `aria-label="Remove {label}"` is rendered.
      */
     onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
 }
 /**
  * MD3 Expressive Chip — 4-variant interactive tag component.

package/dist/{text-field-eAIpz9z1.d.ts → text-field-T4Rg-9Bw.d.ts}

@@ -145,6 +145,13 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * When provided, a dedicated tabbable close button with `aria-label="Remove {label}"` is rendered.
      */
     onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
 }
 /**
  * MD3 Expressive Chip — 4-variant interactive tag component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",
@@ -169,7 +169,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@material/material-color-utilities": "^0.3.0",
+    "@material/material-color-utilities": "^0.4.0",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -179,8 +179,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
-    "@bug-on/m3-tailwind": "1.1.0",
-    "@bug-on/m3-tokens": "1.1.0"
+    "@bug-on/m3-tailwind": "1.2.0",
+    "@bug-on/m3-tokens": "1.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",