@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/dist/button/AsyncButton.d.ts

@@ -1,4 +1,7 @@
 import { type MouseEvent, type ReactNode } from "react";
+import { type CircularProgressProps } from "../progress/CircularProgress.js";
+import { type LinearProgressProps } from "../progress/LinearProgress.js";
+import { type PropsWithRef } from "../types.js";
 import { type ButtonProps } from "./Button.js";
 /**
  * @remarks \@since 6.0.0
@@ -8,6 +11,11 @@ export type AsyncButtonLoadingType = "circular-before" | "circular-after" | "cir
  * @remarks \@since 6.0.0
  */
 export interface AsyncButtonProps extends ButtonProps {
+    /**
+     * @see {@link progressAriaLabelledBy}
+     * @defaultValue `"async-button" + useId()`
+     */
+    id?: string;
     /**
      * When this is defined and returns a `Promise`, the loading indicator will
      * display until the promise has resolved.
@@ -63,6 +71,27 @@ export interface AsyncButtonProps extends ButtonProps {
      * the button, and the loading indicator should replace the icon.
      */
     afterAddon?: ReactNode;
+    /**
+     * An optional label to provide to the progressbar.
+     *
+     * @see {@link progressAriaLabelledBy}
+     */
+    progressAriaLabel?: string;
+    /**
+     * @see {@link id}
+     * @defaultValue `id`
+     */
+    progressAriaLabelledBy?: string;
+    /**
+     * Any additional props to pass to the `CircularProgress` bar when the
+     * {@link loadingType} is one of the circular types.
+     */
+    linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;
+    /**
+     * Any additional props to pass to the `LinearProgress` bar when the
+     * {@link loadingType} is one of the linear types.
+     */
+    circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;
 }
 /**
  * **Client Component**

package/dist/button/AsyncButton.js

@@ -6,6 +6,7 @@ import { overlay } from "../overlay/overlayStyles.js";
 import { CircularProgress } from "../progress/CircularProgress.js";
 import { LinearProgress } from "../progress/LinearProgress.js";
 import { useAsyncAction } from "../useAsyncAction.js";
+import { useEnsuredId } from "../useEnsuredId.js";
 import { Button } from "./Button.js";
 const noop = ()=>{
 // do nothing
@@ -72,7 +73,8 @@ const noop = ()=>{
  *
  * @remarks \@since 6.0.0
  */ export const AsyncButton = /*#__PURE__*/ forwardRef(function AsyncButton(props, ref) {
-    const { onClick = noop, children, floating = null, theme = floating ? "secondary" : "clear", themeType = floating ? "contained" : "flat", buttonType = floating ? "icon" : "text", className, disabled, loading: propLoading = false, loadingType = "circular-overlay", loadingChildren, loadingDisabledTheme = false, afterAddon: propAfterAddon, beforeAddon: propBeforeAddon, ...remaining } = props;
+    const { id: propId, onClick = noop, children, floating = null, theme = floating ? "secondary" : "clear", themeType = floating ? "contained" : "flat", buttonType = floating ? "icon" : "text", className, disabled, loading: propLoading = false, loadingType = "circular-overlay", loadingChildren, loadingDisabledTheme = false, afterAddon: propAfterAddon, beforeAddon: propBeforeAddon, linearProgressProps, circularProgressProps, progressAriaLabel, progressAriaLabelledBy: propProgressAriaLabelledBy, ...remaining } = props;
+    const id = useEnsuredId(propId, "async-button");
     const { handleAsync, pending } = useAsyncAction({
         disabled
     });
@@ -81,9 +83,19 @@ const noop = ()=>{
     if (theme === "clear" || theme === "disabled") {
         progressTheme = "primary";
     }
+    let progressAriaLabelledBy = propProgressAriaLabelledBy;
+    if (!progressAriaLabel && !linearProgressProps?.["aria-label"] && !linearProgressProps?.["aria-labelledby"] && !circularProgressProps?.["aria-label"] && !circularProgressProps?.["aria-labelledby"]) {
+        progressAriaLabelledBy = id;
+    }
     const progress = loadingType.includes("linear") ? /*#__PURE__*/ _jsx(LinearProgress, {
+        "aria-label": progressAriaLabel,
+        "aria-labelledby": progressAriaLabelledBy,
+        ...linearProgressProps,
         theme: progressTheme
     }) : /*#__PURE__*/ _jsx(CircularProgress, {
+        "aria-label": progressAriaLabel,
+        "aria-labelledby": progressAriaLabelledBy,
+        ...circularProgressProps,
         theme: progressTheme
     });
     let afterAddon = propAfterAddon;
@@ -124,6 +136,7 @@ const noop = ()=>{
     return /*#__PURE__*/ _jsxs(Button, {
         ...remaining,
         "aria-disabled": loading || undefined,
+        id: id,
         ref: ref,
         disabled: disabled,
         floating: floating,

package/dist/button/AsyncButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEvent, type ReactNode } from \"react\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/overlayStyles.js\";\nimport { CircularProgress } from \"../progress/CircularProgress.js\";\nimport { LinearProgress } from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { useAsyncAction } from \"../useAsyncAction.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example\n * Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example\n * Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      ...remaining\n    } = props;\n    const { handleAsync, pending } = useAsyncAction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress theme={progressTheme} />\n    ) : (\n      <CircularProgress theme={progressTheme} />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && typeof loadingChildren !== \"undefined\"\n          ? loadingChildren\n          : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncAction","Button","noop","AsyncButton","props","ref","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","remaining","handleAsync","pending","progressTheme","progress","includes","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAyC,QAAQ;AAEpE,SAASC,OAAO,QAAQ,8BAA8B;AACtD,SAASC,gBAAgB,QAAQ,kCAAkC;AACnE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAASC,MAAM,QAA0B,cAAc;AAEvD,MAAMC,OAAO;AACX,aAAa;AACf;AA+EA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,MAAMC,4BAAcP,WACzB,SAASO,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,UAAUJ,IAAI,EACdK,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQD,WAAW,cAAc,OAAO,EACxCE,YAAYF,WAAW,cAAc,MAAM,EAC3CG,aAAaH,WAAW,SAAS,MAAM,EACvCI,SAAS,EACTC,QAAQ,EACRC,SAASC,cAAc,KAAK,EAC5BC,cAAc,kBAAkB,EAChCC,eAAe,EACfC,uBAAuB,KAAK,EAC5BC,YAAYC,cAAc,EAC1BC,aAAaC,eAAe,EAC5B,GAAGC,WACJ,GAAGnB;IACJ,MAAM,EAAEoB,WAAW,EAAEC,OAAO,EAAE,GAAGzB,eAAe;QAAEa;IAAS;IAC3D,MAAMC,UAAUW,WAAWV;IAE3B,IAAIW,gBAA+B;IACnC,IAAIjB,UAAU,WAAWA,UAAU,YAAY;QAC7CiB,gBAAgB;IAClB;IAEA,MAAMC,WAAWX,YAAYY,QAAQ,CAAC,0BACpC,KAAC7B;QAAeU,OAAOiB;uBAEvB,KAAC5B;QAAiBW,OAAOiB;;IAG3B,IAAIP,aAAaC;IACjB,IAAIC,cAAcC;IAClB,IAAIO;IACJ,IAAIC,iBAAiB;IACrB,OAAQd;QACN,KAAK;YACHK,cAAcP,UAAUa,WAAWL;YACnC;QACF,KAAK;YACHH,aAAaL,UAAUa,WAAWP;YAClC;QACF,KAAK;QACL,KAAK;QACL,KAAK;YAAgB;gBACnB,IAAIW,aAA4B;gBAChC,IAAIf,gBAAgB,gBAAgB;oBAClCe,aAAa;gBACf,OAAO,IAAIf,gBAAgB,gBAAgB;oBACzCe,aAAa;gBACf,OAAO;oBACLD,iBAAiB;gBACnB;gBAEAD,iBAAiBf,yBACf,KAACkB;oBACCpB,WAAWf,QAAQ;wBACjBoC,QAAQ;wBACRC,SAAS;wBACTC,UAAU;wBACVC,OAAOL;oBACT;8BAECJ;;gBAGL;YACF;IACF;IAEA,qBACE,MAAC1B;QACE,GAAGsB,SAAS;QACbc,iBAAevB,WAAWwB;QAC1BjC,KAAKA;QACLQ,UAAUA;QACVL,UAAUA;QACVI,WAAWjB,IACT,qBACAmB,WAAWgB,kBAAkB,6BAC7BlB;QAEFH,OAAOK,WAAWI,uBAAuB,aAAaT;QACtDC,WAAWA;QACXC,YAAYA;QACZL,SAASkB,YAAY,CAACe,QAAUC,QAAQC,OAAO,CAACnC,QAAQiC;;YAEvDlB;YACAP,WAAW,OAAOG,oBAAoB,cACnCA,kBACAV;YACHY;YACAU;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEvent, type ReactNode } from \"react\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/overlayStyles.js\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n  LinearProgress,\n  type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncAction } from \"../useAsyncAction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * @see {@link progressAriaLabelledBy}\n   * @defaultValue `\"async-button\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * An optional label to provide to the progressbar.\n   *\n   * @see {@link progressAriaLabelledBy}\n   */\n  progressAriaLabel?: string;\n\n  /**\n   * @see {@link id}\n   * @defaultValue `id`\n   */\n  progressAriaLabelledBy?: string;\n\n  /**\n   * Any additional props to pass to the `CircularProgress` bar when the\n   * {@link loadingType} is one of the circular types.\n   */\n  linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;\n\n  /**\n   * Any additional props to pass to the `LinearProgress` bar when the\n   * {@link loadingType} is one of the linear types.\n   */\n  circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example\n * Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example\n * Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      id: propId,\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      linearProgressProps,\n      circularProgressProps,\n      progressAriaLabel,\n      progressAriaLabelledBy: propProgressAriaLabelledBy,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"async-button\");\n    const { handleAsync, pending } = useAsyncAction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    let progressAriaLabelledBy = propProgressAriaLabelledBy;\n    if (\n      !progressAriaLabel &&\n      !linearProgressProps?.[\"aria-label\"] &&\n      !linearProgressProps?.[\"aria-labelledby\"] &&\n      !circularProgressProps?.[\"aria-label\"] &&\n      !circularProgressProps?.[\"aria-labelledby\"]\n    ) {\n      progressAriaLabelledBy = id;\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...linearProgressProps}\n        theme={progressTheme}\n      />\n    ) : (\n      <CircularProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...circularProgressProps}\n        theme={progressTheme}\n      />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        id={id}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && typeof loadingChildren !== \"undefined\"\n          ? loadingChildren\n          : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncAction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAyC,QAAQ;AAEpE,SAASC,OAAO,QAAQ,8BAA8B;AACtD,SACEC,gBAAgB,QAEX,kCAAkC;AACzC,SACEC,cAAc,QAET,gCAAgC;AAGvC,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAA0B,cAAc;AAEvD,MAAMC,OAAO;AACX,aAAa;AACf;AA8GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,MAAMC,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQD,WAAW,cAAc,OAAO,EACxCE,YAAYF,WAAW,cAAc,MAAM,EAC3CG,aAAaH,WAAW,SAAS,MAAM,EACvCI,SAAS,EACTC,QAAQ,EACRC,SAASC,cAAc,KAAK,EAC5BC,cAAc,kBAAkB,EAChCC,eAAe,EACfC,uBAAuB,KAAK,EAC5BC,YAAYC,cAAc,EAC1BC,aAAaC,eAAe,EAC5BC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,wBAAwBC,0BAA0B,EAClD,GAAGC,WACJ,GAAG1B;IACJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEwB,WAAW,EAAEC,OAAO,EAAE,GAAGjC,eAAe;QAAEgB;IAAS;IAC3D,MAAMC,UAAUgB,WAAWf;IAE3B,IAAIgB,gBAA+B;IACnC,IAAItB,UAAU,WAAWA,UAAU,YAAY;QAC7CsB,gBAAgB;IAClB;IAEA,IAAIL,yBAAyBC;IAC7B,IACE,CAACF,qBACD,CAACF,qBAAqB,CAAC,aAAa,IACpC,CAACA,qBAAqB,CAAC,kBAAkB,IACzC,CAACC,uBAAuB,CAAC,aAAa,IACtC,CAACA,uBAAuB,CAAC,kBAAkB,EAC3C;QACAE,yBAAyBtB;IAC3B;IAEA,MAAM4B,WAAWhB,YAAYiB,QAAQ,CAAC,0BACpC,KAACrC;QACCsC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGH,mBAAmB;QACvBd,OAAOsB;uBAGT,KAACpC;QACCuC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGF,qBAAqB;QACzBf,OAAOsB;;IAIX,IAAIZ,aAAaC;IACjB,IAAIC,cAAcC;IAClB,IAAIc;IACJ,IAAIC,iBAAiB;IACrB,OAAQrB;QACN,KAAK;YACHK,cAAcP,UAAUkB,WAAWV;YACnC;QACF,KAAK;YACHH,aAAaL,UAAUkB,WAAWZ;YAClC;QACF,KAAK;QACL,KAAK;QACL,KAAK;YAAgB;gBACnB,IAAIkB,aAA4B;gBAChC,IAAItB,gBAAgB,gBAAgB;oBAClCsB,aAAa;gBACf,OAAO,IAAItB,gBAAgB,gBAAgB;oBACzCsB,aAAa;gBACf,OAAO;oBACLD,iBAAiB;gBACnB;gBAEAD,iBAAiBtB,yBACf,KAACyB;oBACC3B,WAAWlB,QAAQ;wBACjB8C,QAAQ;wBACRC,SAAS;wBACTC,UAAU;wBACVC,OAAOL;oBACT;8BAECN;;gBAGL;YACF;IACF;IAEA,qBACE,MAACjC;QACE,GAAG6B,SAAS;QACbgB,iBAAe9B,WAAW+B;QAC1BzC,IAAIA;QACJD,KAAKA;QACLU,UAAUA;QACVL,UAAUA;QACVI,WAAWpB,IACT,qBACAsB,WAAWuB,kBAAkB,6BAC7BzB;QAEFH,OAAOK,WAAWI,uBAAuB,aAAaT;QACtDC,WAAWA;QACXC,YAAYA;QACZL,SAASuB,YAAY,CAACiB,QAAUC,QAAQC,OAAO,CAAC1C,QAAQwC;;YAEvDzB;YACAP,WAAW,OAAOG,oBAAoB,cACnCA,kBACAV;YACHY;YACAiB;;;AAGP,GACA"}

package/dist/button/_button.scss

@@ -72,77 +72,35 @@ $floating-positions: (
   ),
 ) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-button-background-color,
-    value: transparent,
-  ),
-  color: (
-    var: --rmd-button-color,
-    value: null,
-  ),
-  border-radius: (
-    var: --rmd-button-border-radius,
-    value: null,
-  ),
-  contained-background-color: (
-    var: --rmd-button-contained-background-color,
-    value: $clear-contained-background-color,
-  ),
-  contained-color: (
-    var: --rmd-button-contained-color,
-    value: $clear-contained-color,
-  ),
-  text-horizontal-padding: (
-    var: --rmd-button-text-horizontal-padding,
-    value: $text-horizontal-padding,
-  ),
-  text-vertical-padding: (
-    var: --rmd-button-text-vertical-padding,
-    value: $text-vertical-padding,
-  ),
-  text-min-height: (
-    var: --rmd-button-text-min-height,
-    value: $text-min-height,
-  ),
-  text-min-width: (
-    var: --rmd-button-text-min-width,
-    value: $text-min-width,
-  ),
-  icon-size: (
-    var: --rmd-button-icon-size,
-    value: $icon-size,
-  ),
-  icon-font-size: (
-    var: --rmd-button-icon-font-size,
-    value: $icon-font-size,
-  ),
-  icon-border-radius: (
-    var: --rmd-button-icon-radius,
-    value: $icon-border-radius,
-  ),
-  fab-offset: (
-    var: --rmd-fab-offset,
-    value: utils.scrollbar-size(),
-  ),
+$variables: (
+  background-color,
+  color,
+  border-radius,
+  contained-background-color,
+  contained-color,
+  text-horizontal-padding,
+  text-vertical-padding,
+  text-min-height,
+  text-min-width,
+  icon-size,
+  icon-font-size,
+  icon-border-radius,
+  fab-offset
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "button var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "button");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "button var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "button")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -176,6 +134,36 @@ $var-lookup: (
   padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, transparent);
+    @if not $disable-contained {
+      @include set-var(
+        contained-background-color,
+        $clear-contained-background-color
+      );
+      @include set-var(contained-color, $clear-contained-color);
+    }
+
+    @if not $disable-text {
+      @include set-var(text-horizontal-padding, $text-horizontal-padding);
+      @include set-var(text-vertical-padding, $text-vertical-padding);
+      @include set-var(text-min-height, $text-min-height);
+      @include set-var(text-min-width, $text-min-width);
+    }
+
+    @if not $disable-icon {
+      @include set-var(icon-size, $icon-size);
+      @include set-var(icon-font-size, $icon-font-size);
+      @include set-var(icon-border-radius, $icon-border-radius);
+    }
+
+    @if not $disable-floating {
+      @include set-var(fab-offset, utils.scrollbar-size());
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-button {

package/dist/card/_card.scss

@@ -44,37 +44,21 @@ $content-padding-bottom: 1.5rem !default;
 
 $footer-padding: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-card-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-card-color,
-    value: $color,
-  ),
-  secondary-color: (
-    var: --rmd-card-secondary-color,
-    value: null,
-  ),
-);
+$variables: (background-color, color, secondary-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "card var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "card");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "card var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "card")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -93,6 +77,13 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {

package/dist/chip/_chip.scss

@@ -23,7 +23,6 @@ $disable-outline-theme: $disable-everything !default;
 $disable-outline-raisable: false !default;
 $disable-left-addon: false !default;
 $disable-right-addon: false !default;
-$disable-both-addons: $disable-left-addon and $disable-right-addon !default;
 $disable-selected-theme: false !default;
 $disable-selected-icon-transition: false !default;
 
@@ -112,61 +111,31 @@ $outline-text-color: theme.get-default-color(
 $outline-raisable-box-shadow-z-value: 8 !default;
 $outline-raisable-transition-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  solid-background-color: (
-    var: --rmd-chip-solid-background-color,
-    value: $solid-background-color,
-  ),
-  solid-disabled-background-color: (
-    var: --rmd-chip-solid-disabled-background-color,
-    value: $solid-disabled-background-color,
-  ),
-  solid-color: (
-    var: --rmd-chip-solid-color,
-    value: $solid-color,
-  ),
-  theme-background-color: (
-    var: --rmd-chip-theme-background-color,
-    value: $theme-background-color,
-  ),
-  theme-color: (
-    var: --rmd-chip-theme-color,
-    value: $theme-color,
-  ),
-  outline-color: (
-    var: --rmd-chip-outline-color,
-    value: $outline-color,
-  ),
-  outline-width: (
-    var: --rmd-chip-outline-width,
-    value: $outline-width,
-  ),
-  outline-background-color: (
-    var: --rmd-chip-outline-background-color,
-    value: $outline-background-color,
-  ),
-  outline-text-color: (
-    var: --rmd-chip-outline-text-color,
-    value: $outline-text-color,
-  ),
+$variables: (
+  solid-background-color,
+  solid-disabled-background-color,
+  solid-color,
+  theme-background-color,
+  theme-color,
+  outline-color,
+  outline-width,
+  outline-background-color,
+  outline-text-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "chip var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "chip");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "chip var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "chip")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -203,6 +172,23 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(solid-background-color, $solid-background-color);
+    @include set-var(
+      solid-disabled-background-color,
+      $solid-disabled-background-color
+    );
+    @include set-var(solid-color, $solid-color);
+    @include set-var(theme-background-color, $theme-background-color);
+    @include set-var(theme-color, $theme-color);
+    @include set-var(outline-color, $outline-color);
+    @include set-var(outline-width, $outline-width);
+    @include set-var(outline-background-color, $outline-background-color);
+    @include set-var(outline-text-color, $outline-text-color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {
@@ -324,21 +310,6 @@ $var-lookup: (
         }
       }
 
-      @if not $disable-both-addons {
-        &--surrounded {
-          @include utils.auto-rtl(
-            padding-left,
-            $addon-left-padding,
-            $addon-right-padding
-          );
-          @include utils.auto-rtl(
-            padding-right,
-            $addon-right-padding,
-            $addon-left-padding
-          );
-        }
-      }
-
       @if not $disable-content {
         &__content {
           @include typography.text-overflow;

package/dist/chip/styles.d.ts

@@ -41,7 +41,7 @@ export interface ChipClassNameOptions {
     selected?: boolean;
     /** @defaultValue `false` */
     selectedThemed?: boolean;
-    /** @defaultValue `false` */
+    /** @defaultValue `true` */
     noninteractive?: boolean;
     /** @defaultValue `false` */
     leftAddon?: boolean;

package/dist/chip/styles.js

@@ -5,16 +5,15 @@ const styles = bem("rmd-chip");
 /**
  * @remarks \@since 6.0.0
  */ export function chip(options = {}) {
-    const { className, theme = "solid", pressed = false, disabled = false, selected = false, selectedThemed = false, selectedClassName, noninteractive = false, pressedClassName, leftAddon = false, rightAddon = false, backgroundColor } = options;
+    const { className, theme = "solid", pressed = false, disabled = false, selected = false, selectedThemed = false, selectedClassName, noninteractive = true, pressedClassName, leftAddon = false, rightAddon = false, backgroundColor } = options;
     return cnb(styles({
         themed: !disabled && selected && selectedThemed,
         selected: !disabled && selected && !selectedThemed,
         solid: theme === "solid",
         outline: theme === "outline",
         disabled,
-        "left-addon": leftAddon && !rightAddon,
-        "right-addon": !leftAddon && rightAddon,
-        surrounded: leftAddon && rightAddon,
+        "left-addon": leftAddon,
+        "right-addon": rightAddon,
         pressed
     }), selected && selectedClassName, pressedClassName, cssUtils({
         surface: !noninteractive,

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-chip\");\n\n/**\n * @remarks \\@since 6.0.0\n *\n * Note for the future: Once Firefox supports the `:has` selector, the\n * `leftAddon` and `rightAddon` can be removed. The styles would automatically\n * apply the padding instead:\n *\n * ```scss\n * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {\n *   @include core.auto-rtl(\n *     padding-left,\n *     $addon-left-padding,\n *     $horizontal-padding\n *   );\n * }\n *\n * $index: if(\n *   not core.$interaction-mode or core.$interaction-mode == press,\n *   1,\n *   2 // last child is always the `.rmd-ripple-container`\n * );\n * &:has(.rmd-icon:nth-last-child(#{$index})) {\n *   @include core.auto-rtl(\n *     padding-right,\n *     $addon-right-padding,\n *     $horizontal-padding\n *   );\n * }\n * ```\n */\nexport interface ChipClassNameOptions {\n  className?: string;\n  selectedClassName?: string;\n\n  /** @defaultValue `\"solid\"` */\n  theme?: \"outline\" | \"solid\";\n\n  backgroundColor?: BackgroundColor;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  selected?: boolean;\n\n  /** @defaultValue `false` */\n  selectedThemed?: boolean;\n\n  /** @defaultValue `false` */\n  noninteractive?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function chip(options: ChipClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"solid\",\n    pressed = false,\n    disabled = false,\n    selected = false,\n    selectedThemed = false,\n    selectedClassName,\n    noninteractive = false,\n    pressedClassName,\n    leftAddon = false,\n    rightAddon = false,\n    backgroundColor,\n  } = options;\n\n  return cnb(\n    styles({\n      themed: !disabled && selected && selectedThemed,\n      selected: !disabled && selected && !selectedThemed,\n      solid: theme === \"solid\",\n      outline: theme === \"outline\",\n      disabled,\n      \"left-addon\": leftAddon && !rightAddon,\n      \"right-addon\": !leftAddon && rightAddon,\n      surrounded: leftAddon && rightAddon,\n      pressed,\n    }),\n    selected && selectedClassName,\n    pressedClassName,\n    cssUtils({\n      surface: !noninteractive,\n      textColor: disabled ? \"text-disabled\" : undefined,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ChipContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function chipContent(options: ChipContentClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","chip","options","className","theme","pressed","disabled","selected","selectedThemed","selectedClassName","noninteractive","pressedClassName","leftAddon","rightAddon","backgroundColor","themed","solid","outline","surrounded","surface","textColor","undefined","chipContent"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgEnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,OAAO,EACfC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,iBAAiB,KAAK,EACtBC,gBAAgB,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,eAAe,EAChB,GAAGZ;IAEJ,OAAOL,IACLG,OAAO;QACLe,QAAQ,CAACT,YAAYC,YAAYC;QACjCD,UAAU,CAACD,YAAYC,YAAY,CAACC;QACpCQ,OAAOZ,UAAU;QACjBa,SAASb,UAAU;QACnBE;QACA,cAAcM,aAAa,CAACC;QAC5B,eAAe,CAACD,aAAaC;QAC7BK,YAAYN,aAAaC;QACzBR;IACF,IACAE,YAAYE,mBACZE,kBACAb,SAAS;QACPqB,SAAS,CAACT;QACVU,WAAWd,WAAW,kBAAkBe;QACxCP;IACF,IACAX;AAEJ;AASA;;CAEC,GACD,OAAO,SAASmB,YAAYpB,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,YAAYG;AAChC"}
+{"version":3,"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-chip\");\n\n/**\n * @remarks \\@since 6.0.0\n *\n * Note for the future: Once Firefox supports the `:has` selector, the\n * `leftAddon` and `rightAddon` can be removed. The styles would automatically\n * apply the padding instead:\n *\n * ```scss\n * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {\n *   @include core.auto-rtl(\n *     padding-left,\n *     $addon-left-padding,\n *     $horizontal-padding\n *   );\n * }\n *\n * $index: if(\n *   not core.$interaction-mode or core.$interaction-mode == press,\n *   1,\n *   2 // last child is always the `.rmd-ripple-container`\n * );\n * &:has(.rmd-icon:nth-last-child(#{$index})) {\n *   @include core.auto-rtl(\n *     padding-right,\n *     $addon-right-padding,\n *     $horizontal-padding\n *   );\n * }\n * ```\n */\nexport interface ChipClassNameOptions {\n  className?: string;\n  selectedClassName?: string;\n\n  /** @defaultValue `\"solid\"` */\n  theme?: \"outline\" | \"solid\";\n\n  backgroundColor?: BackgroundColor;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  selected?: boolean;\n\n  /** @defaultValue `false` */\n  selectedThemed?: boolean;\n\n  /** @defaultValue `true` */\n  noninteractive?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function chip(options: ChipClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"solid\",\n    pressed = false,\n    disabled = false,\n    selected = false,\n    selectedThemed = false,\n    selectedClassName,\n    noninteractive = true,\n    pressedClassName,\n    leftAddon = false,\n    rightAddon = false,\n    backgroundColor,\n  } = options;\n\n  return cnb(\n    styles({\n      themed: !disabled && selected && selectedThemed,\n      selected: !disabled && selected && !selectedThemed,\n      solid: theme === \"solid\",\n      outline: theme === \"outline\",\n      disabled,\n      \"left-addon\": leftAddon,\n      \"right-addon\": rightAddon,\n      pressed,\n    }),\n    selected && selectedClassName,\n    pressedClassName,\n    cssUtils({\n      surface: !noninteractive,\n      textColor: disabled ? \"text-disabled\" : undefined,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ChipContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function chipContent(options: ChipContentClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","chip","options","className","theme","pressed","disabled","selected","selectedThemed","selectedClassName","noninteractive","pressedClassName","leftAddon","rightAddon","backgroundColor","themed","solid","outline","surface","textColor","undefined","chipContent"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgEnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,OAAO,EACfC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,iBAAiB,IAAI,EACrBC,gBAAgB,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,eAAe,EAChB,GAAGZ;IAEJ,OAAOL,IACLG,OAAO;QACLe,QAAQ,CAACT,YAAYC,YAAYC;QACjCD,UAAU,CAACD,YAAYC,YAAY,CAACC;QACpCQ,OAAOZ,UAAU;QACjBa,SAASb,UAAU;QACnBE;QACA,cAAcM;QACd,eAAeC;QACfR;IACF,IACAE,YAAYE,mBACZE,kBACAb,SAAS;QACPoB,SAAS,CAACR;QACVS,WAAWb,WAAW,kBAAkBc;QACxCN;IACF,IACAX;AAEJ;AASA;;CAEC,GACD,OAAO,SAASkB,YAAYnB,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,YAAYG;AAChC"}

package/dist/cssUtils.d.ts

@@ -57,6 +57,7 @@ export type FontWeight = "thin" | "light" | "regular" | "medium" | "bold" | "sem
 export type Margin = "none" | "top" | "bottom" | "centered";
 /** @remarks \@since 6.0.0 */
 export type TextOverflow = "allow" | "nowrap" | "ellipsis";
+/** @remarks \@since 6.0.0 */
 export interface TextCssUtilsOptions {
     textColor?: ThemeColor | TextColor;
     textAlign?: TextAlign;

package/dist/cssUtils.js

@@ -13,7 +13,7 @@ import { cnb } from "cnbuilder";
     const { className, srOnly, textColor, outlineColor, backgroundColor, surface, surfaceColor, margin, fontStyle, fontWeight, textAlign, textDecoration, textTransform, textOverflow } = options;
     const isMarginTop = margin === "top";
     const isTextColor = textColor === "text-primary" || textColor === "text-secondary" || textColor === "text-hint" || textColor === "text-disabled";
-    return cnb(!backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`, !backgroundColor && isTextColor && `rmd-${textColor}-color`, backgroundColor && "rmd-background-container", backgroundColor && `rmd-${backgroundColor}-container`, outlineColor && "rmd-outline", outlineColor && `rmd-${outlineColor}-outline`, (isMarginTop || margin === "bottom") && `rmd-no-margin-${isMarginTop ? "bottom" : "top"}`, margin === "none" && "rmd-no-margin", margin === "centered" && "rmd-centered", textAlign && `rmd-align-${textAlign}`, textDecoration && `rmd-${textDecoration}`, textTransform && `rmd-${textTransform}`, fontStyle && `rmd-${fontStyle}`, fontWeight && `rmd-${fontWeight}`, srOnly && srOnly !== "phone" && "rmd-sr-only", srOnly === "phone" && "rmd-phone-sr-only", srOnly === "focusable" && "rmd-sr-only--focusable", surfaceColor === "light" && "rmd-light-surface", surfaceColor === "dark" && "rmd-dark-surface", textOverflow && textOverflow !== "allow" && "rmd-nowrap", textOverflow === "ellipsis" && "rmd-ellipsis", surface && "rmd-interaction-surface", className);
+    return cnb(!backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`, !backgroundColor && isTextColor && `rmd-${textColor}-color`, backgroundColor && "rmd-background-container", backgroundColor && backgroundColor !== "current-color" && `rmd-${backgroundColor}-container`, outlineColor && "rmd-outline", outlineColor && `rmd-${outlineColor}-outline`, (isMarginTop || margin === "bottom") && `rmd-no-margin-${isMarginTop ? "bottom" : "top"}`, margin === "none" && "rmd-no-margin", margin === "centered" && "rmd-centered", textAlign && `rmd-align-${textAlign}`, textDecoration && `rmd-${textDecoration}`, textTransform && `rmd-${textTransform}`, fontStyle && `rmd-${fontStyle}`, fontWeight && `rmd-${fontWeight}`, srOnly && srOnly !== "phone" && "rmd-sr-only", srOnly === "phone" && "rmd-phone-sr-only", srOnly === "focusable" && "rmd-sr-only--focusable", surfaceColor === "light" && "rmd-light-surface", surfaceColor === "dark" && "rmd-dark-surface", textOverflow && textOverflow !== "allow" && "rmd-nowrap", textOverflow === "ellipsis" && "rmd-ellipsis", surface && "rmd-interaction-surface", className);
 }
 
 //# sourceMappingURL=cssUtils.js.map

package/dist/cssUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @remarks \\@since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @remarks \\@since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable FOnts}\n * @remarks \\@since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @remarks \\@since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to allow the content to only be visible for screen\n   * readers. Set this to `\"focusable\"` to allow the content to be visible to\n   * screen readers and once focused. Set this to `\"phone\"` to only render the\n   * the content as screen reader only text on phones.\n   *\n   * @defaultValue `false`\n   */\n  srOnly?: boolean | \"focusable\" | \"phone\";\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @remarks \\@since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor && `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAwKhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBAAmB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACrDD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,MAAM,CAAC,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,UAAU,CAAC,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,eAAe,CAAC,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,cAAc,CAAC,EACvCJ,aAAa,CAAC,IAAI,EAAEA,UAAU,CAAC,EAC/BC,cAAc,CAAC,IAAI,EAAEA,WAAW,CAAC,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}
+{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @remarks \\@since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @remarks \\@since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable FOnts}\n * @remarks \\@since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @remarks \\@since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to allow the content to only be visible for screen\n   * readers. Set this to `\"focusable\"` to allow the content to be visible to\n   * screen readers and once focused. Set this to `\"phone\"` to only render the\n   * the content as screen reader only text on phones.\n   *\n   * @defaultValue `false`\n   */\n  srOnly?: boolean | \"focusable\" | \"phone\";\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @remarks \\@since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor &&\n      backgroundColor !== \"current-color\" &&\n      `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAyKhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBACEA,oBAAoB,mBACpB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACpCD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,MAAM,CAAC,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,UAAU,CAAC,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,eAAe,CAAC,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,cAAc,CAAC,EACvCJ,aAAa,CAAC,IAAI,EAAEA,UAAU,CAAC,EAC/BC,cAAc,CAAC,IAAI,EAAEA,WAAW,CAAC,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}

package/dist/dialog/Dialog.d.ts

@@ -23,7 +23,7 @@ export declare const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames
 export declare const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout>;
 export interface BaseDialogProps extends HTMLAttributes<HTMLDivElement>, CSSTransitionComponentProps, TransitionActions, FocusContainerComponentProps {
     /**
-     * @defaultValue `useEnsuredId('dialog')`
+     * @defaultValue `"dialog-" + useId()`
      */
     id?: string;
     /**

package/dist/dialog/Dialog.js

@@ -83,7 +83,7 @@ const noopBool = ()=>false;
  * within once it becomes visible. You must manually add `autoFocus` to a
  * element instead.
  */ export const Dialog = /*#__PURE__*/ forwardRef(function Dialog(props, ref) {
-    const { id: propId, role = "dialog", type = "centered", tabIndex = -1, visible, onRequestClose, containerProps, temporary = true, className, timeout = DEFAULT_DIALOG_TIMEOUT, classNames = DEFAULT_DIALOG_CLASSNAMES, disableTransition = false, appear, enter, exit, onEnter = noop, onEntering = noop, onEntered, onExit = noop, onExiting = noop, onExited, exitedHidden = true, fixed = false, modal = false, disableOverlay = false, overlayProps, overlayHidden, onKeyDown = noop, isFocusTypeDisabled = noopBool, disablePortal: propDisablePortal, disableScrollLock = false, disableEscapeClose = modal, disableFocusOutline = type === "full-page", children, ...remaining } = props;
+    const { id: propId, fixed = false, modal = false, role = modal ? "alertdialog" : "dialog", type = "centered", tabIndex = -1, visible, onRequestClose, containerProps, temporary = true, className, timeout = DEFAULT_DIALOG_TIMEOUT, classNames = DEFAULT_DIALOG_CLASSNAMES, disableTransition = false, appear, enter, exit, onEnter = noop, onEntering = noop, onEntered, onExit = noop, onExiting = noop, onExited, exitedHidden = true, disableOverlay = false, overlayProps, overlayHidden, onKeyDown = noop, isFocusTypeDisabled = noopBool, disablePortal: propDisablePortal, disableScrollLock = false, disableEscapeClose = modal, disableFocusOutline = type === "full-page", children, ...remaining } = props;
     const id = useEnsuredId(propId, "dialog");
     const ssr = useSsr();
     const setChildVisible = useNestedDialogContext();
@@ -158,6 +158,7 @@ const noopBool = ()=>false;
                     className: cnb(containerProps?.className, !temporary && exitedHidden && stage === "exited" && DISPLAY_NONE_CLASS),
                     enabled: type === "centered",
                     children: /*#__PURE__*/ _jsx("div", {
+                        "aria-modal": modal || undefined,
                         ...remaining,
                         ...elementProps,
                         ...eventHandlers,