@react-md/core 1.0.0-next.1 → 1.0.0-next.10

package/dist/form/useResizingTextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = \"24\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef: RefObject<HTMLDivElement>;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const { maxRows, resize, onChange = noop, containerRef } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [height, setHeight] = useState<number>();\n  const [scrollable, setScrollable] = useState(false);\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    if (!mask || !container) {\n      return;\n    }\n\n    const containerStyles = window.getComputedStyle(container);\n    const borderHeight =\n      parseFloat(containerStyles.borderTopWidth) +\n      parseFloat(containerStyles.borderBottomWidth);\n    let nextHeight = mask.scrollHeight + borderHeight;\n    /* istanbul ignore if */\n    if (maxRows > 0) {\n      const lineHeight = parseFloat(\n        window.getComputedStyle(mask).lineHeight || DEFAULT_LINE_HEIGHT\n      );\n      const maxHeight = maxRows * lineHeight;\n      nextHeight = Math.min(maxHeight, nextHeight);\n\n      // only want the textarea to be scrollable if there's a limit on the rows\n      // since it'll flash the scrollbar on most OS during the height transition\n      if (nextHeight === maxHeight && !scrollable) {\n        setScrollable(true);\n      } else if (nextHeight !== maxHeight && scrollable) {\n        setScrollable(false);\n      }\n    }\n\n    setHeight(nextHeight + 2);\n  }, [containerRef, maxRows, scrollable]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    scrollable,\n    onChange(event) {\n      const mask = maskRef.current;\n      onChange(event);\n      if (event.isPropagationStopped() || !mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","maskRef","height","setHeight","scrollable","setScrollable","undefined","updateHeight","mask","current","container","containerStyles","window","getComputedStyle","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","lineHeight","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","event","isPropagationStopped","value","currentTarget"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QAIH,QAAQ;AACf,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,0DAA0D;AAC1D,MAAMC,sBAAsB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA0CA,cAAc,GACd,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEC,WAAWL,IAAI,EAAEM,YAAY,EAAE,GAAGJ;IAE3D,MAAMK,UAAUX,OAA4B;IAC5C,MAAM,CAACY,QAAQC,UAAU,GAAGZ;IAC5B,MAAM,CAACa,YAAYC,cAAc,GAAGd,SAAS;IAC7CF,UAAU;QACR,IAAIS,WAAW,QAAQ;YACrBK,UAAUG;QACZ;IACF,GAAG;QAACR;KAAO;IAEX,MAAMS,eAAenB,YAAY;QAC/B,MAAMoB,OAAOP,QAAQQ,OAAO;QAC5B,MAAMC,YAAYV,aAAaS,OAAO;QACtC,IAAI,CAACD,QAAQ,CAACE,WAAW;YACvB;QACF;QAEA,MAAMC,kBAAkBC,OAAOC,gBAAgB,CAACH;QAChD,MAAMI,eACJC,WAAWJ,gBAAgBK,cAAc,IACzCD,WAAWJ,gBAAgBM,iBAAiB;QAC9C,IAAIC,aAAaV,KAAKW,YAAY,GAAGL;QACrC,sBAAsB,GACtB,IAAIjB,UAAU,GAAG;YACf,MAAMuB,aAAaL,WACjBH,OAAOC,gBAAgB,CAACL,MAAMY,UAAU,IAAI3B;YAE9C,MAAM4B,YAAYxB,UAAUuB;YAC5BF,aAAaI,KAAKC,GAAG,CAACF,WAAWH;YAEjC,yEAAyE;YACzE,0EAA0E;YAC1E,IAAIA,eAAeG,aAAa,CAACjB,YAAY;gBAC3CC,cAAc;YAChB,OAAO,IAAIa,eAAeG,aAAajB,YAAY;gBACjDC,cAAc;YAChB;QACF;QAEAF,UAAUe,aAAa;IACzB,GAAG;QAAClB;QAAcH;QAASO;KAAW;IAEtC,MAAMoB,kBAAkBhC,kBAAkB;QACxCiC,KAAKxB;QACLyB,UAAUnB;QACVoB,eAAe;IACjB;IAEA,OAAO;QACLzB,QAAQ,OAAOA,WAAW,WAAW,CAAC,EAAEA,OAAO,EAAE,CAAC,GAAGI;QACrDL,SAASuB;QACTpB;QACAL,UAAS6B,KAAK;YACZ,MAAMpB,OAAOP,QAAQQ,OAAO;YAC5BV,SAAS6B;YACT,IAAIA,MAAMC,oBAAoB,MAAM,CAACrB,QAAQV,WAAW,QAAQ;gBAC9D;YACF;YAEA,uEAAuE;YACvE,uEAAuE;YACvE,wBAAwB;YACxB,yEAAyE;YACzE,aAAa;YACb,2EAA2E;YAC3E,EAAE;YACF,yEAAyE;YACzE,4EAA4E;YAC5E,uEAAuE;YACvE,sDAAsD;YACtD,8EAA8E;YAC9E,cAAc;YACd,8EAA8E;YAC9E,sDAAsD;YACtD,6EAA6E;YAC7E,2EAA2E;YAC3E,0BAA0B;YAC1BU,KAAKsB,KAAK,GAAGF,MAAMG,aAAa,CAACD,KAAK;YACtCvB;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useResizingTextArea.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type Ref,\n  type RefCallback,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\n\n// this is the default of 1.5rem line-height in the styles\nconst DEFAULT_LINE_HEIGHT = 24;\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * A textarea is normally resizable in browsers by default by dragging the\n * bottom right corner to the desired size which will set inline styles for\n * `height` and `width`. Since this makes creating layouts a bit more difficult,\n * this is disabled by default but can be configured using one of these values:\n *\n * - `\"auto\"` - The textarea will automatically grow in in height as the user\n *   types until a max number of rows have been added. If there is additional\n *   text, a scrollbar will appear in the textarea. The browser's native resize\n *   behavior is disabled.\n * - `\"none\"` - The textarea's height and width will remain static\n * - `\"horizontal\"` - The textarea's width can be resized by the browser's\n *   native resize behavior.\n * - `\"vertical\"` - The textarea's height can be resized by the browser's native\n *   resize behavior.\n * - `\"both\"` - The browser's native resize behavior will be allowed.\n */\nexport type TextAreaResize =\n  | \"none\"\n  | \"auto\"\n  | \"horizontal\"\n  | \"vertical\"\n  | \"both\";\n\n/** @internal */\nexport interface ResizingTextAreaOptions {\n  resize: TextAreaResize;\n  maxRows: number;\n  onChange: ChangeEventHandler<HTMLTextAreaElement> | undefined;\n  containerRef?: Ref<HTMLDivElement>;\n  disableTransition: boolean | undefined;\n}\n\n/** @internal */\nexport interface ResizingTextAreaReturnValue {\n  height: string | undefined;\n  maskRef: RefCallback<HTMLTextAreaElement>;\n  containerRef: RefCallback<HTMLDivElement>;\n  onChange: ChangeEventHandler<HTMLTextAreaElement>;\n  scrollable: boolean;\n  disableTransition: boolean;\n}\n\n/** @internal */\nexport function useResizingTextArea(\n  options: ResizingTextAreaOptions\n): ResizingTextAreaReturnValue {\n  const {\n    maxRows,\n    resize,\n    onChange = noop,\n    containerRef: propContainerRef,\n    disableTransition,\n  } = options;\n\n  const maskRef = useRef<HTMLTextAreaElement>(null);\n  const [containerRef, containerRefCallback] = useEnsuredRef(propContainerRef);\n  const [height, setHeight] = useState<number>();\n  useEffect(() => {\n    if (resize !== \"auto\") {\n      setHeight(undefined);\n    }\n  }, [resize]);\n\n  // Since access to the DOM is required to calculate the current height of the\n  // textarea, do not enable the height transition until it has been calculated\n  // once.\n  const isHeightSet = useRef(true);\n  useEffect(() => {\n    isHeightSet.current = !height;\n  }, [height]);\n\n  // Do not enable the scrollbar until the max height has been reached since\n  // it'll flash as the user types on OS that display scrollbars.\n  //\n  // Note: This does cause an infinite loop issue on browsers that display OS\n  // when rendered in a flex/grid container and a \"fluid\" width since:\n  // - the width changes when the overflow changes to `auto`\n  // - the resize observer triggers since there was a width change\n  // - the number of rows imght change because of this width change\n  // - it might no longer be at the max height, so remove the scrollbar\n  // - restart\n  const [isMaxHeightReached, setMaxHeightReached] = useState(false);\n  const updateHeight = useCallback(() => {\n    const mask = maskRef.current;\n    const container = containerRef.current;\n    /* c8 ignore start */\n    if (!mask || !container) {\n      return;\n    }\n    /* c8 ignore stop */\n\n    const containerStyles = window.getComputedStyle(container);\n    const isBorderBox = containerStyles.boxSizing === \"border-box\";\n    let borderHeight = 0;\n    if (isBorderBox) {\n      borderHeight =\n        parseFloat(containerStyles.borderTopWidth) +\n        parseFloat(containerStyles.borderBottomWidth);\n    }\n\n    let nextHeight = mask.scrollHeight + borderHeight;\n    if (maxRows > 0) {\n      nextHeight -= borderHeight;\n      const maskStyles = window.getComputedStyle(mask);\n      // in tests, this is `\"normal\"` by default instead of a number\n      let lineHeight = parseFloat(maskStyles.lineHeight);\n      if (Number.isNaN(lineHeight)) {\n        lineHeight = DEFAULT_LINE_HEIGHT;\n      }\n\n      const maxHeight = maxRows * lineHeight;\n      nextHeight = Math.min(maxHeight, nextHeight);\n      setMaxHeightReached(nextHeight === maxHeight);\n      nextHeight += borderHeight;\n    }\n\n    // This just makes snapshots look nicer since `nextHeight` will be 0 in\n    // tests unless the user mocks out all the DOM properties\n    if (nextHeight) {\n      setHeight(nextHeight);\n    }\n  }, [containerRef, maxRows]);\n\n  const maskRefCallback = useResizeObserver({\n    ref: maskRef,\n    onUpdate: updateHeight,\n    disableHeight: true,\n  });\n\n  return {\n    height: typeof height === \"number\" ? `${height}px` : undefined,\n    maskRef: maskRefCallback,\n    containerRef: containerRefCallback,\n    scrollable: maxRows > 0 && isMaxHeightReached,\n    disableTransition: disableTransition || isHeightSet.current,\n    onChange(event) {\n      onChange(event);\n\n      const mask = maskRef.current;\n      if (!mask || resize !== \"auto\") {\n        return;\n      }\n\n      // to get the height transition to work, you have to set the height on:\n      // - the main container element (including padding) that has the height\n      //    transition enabled\n      // - a child div wrapper (without padding) that has the height transition\n      //    enabled\n      // - the textarea element (without padding) and without a height transition\n      //\n      // if it isn't done this way, the height transition will look weird since\n      // the text will be fixed to the bottom of the area and more text at the top\n      // will become visible as the height transition completes. applying the\n      // transition on the two parent elements work because:\n      // - the height is set immediately on the text field so it expands to show all\n      //    the text\n      // - the height is correctly applied to both parent elements, but their height\n      //    haven't fully been adjusted due to the animation\n      // - the parent divs have overflow visible by default, so the textarea's text\n      //    will expand past the boundaries of the divs and not cause the upwards\n      //    animation weirdness.\n      mask.value = event.currentTarget.value;\n      updateHeight();\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useEnsuredRef","useResizeObserver","DEFAULT_LINE_HEIGHT","noop","useResizingTextArea","options","maxRows","resize","onChange","containerRef","propContainerRef","disableTransition","maskRef","containerRefCallback","height","setHeight","undefined","isHeightSet","current","isMaxHeightReached","setMaxHeightReached","updateHeight","mask","container","containerStyles","window","getComputedStyle","isBorderBox","boxSizing","borderHeight","parseFloat","borderTopWidth","borderBottomWidth","nextHeight","scrollHeight","maskStyles","lineHeight","Number","isNaN","maxHeight","Math","min","maskRefCallback","ref","onUpdate","disableHeight","scrollable","event","value","currentTarget"],"mappings":"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"}

package/dist/form/useSelectCombobox.d.ts

@@ -0,0 +1,17 @@
+import { type BaseComboboxOptions, type ComboboxImplementation } from "./useCombobox.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SelectComboboxOptions<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends BaseComboboxOptions<ComboboxEl, PopupEl> {
+    value: string;
+    values: readonly string[];
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SelectComboboxImplementation<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement> extends ComboboxImplementation<ComboboxEl, PopupEl> {
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function useSelectCombobox<ComboboxEl extends HTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: SelectComboboxOptions<ComboboxEl, PopupEl>): SelectComboboxImplementation<ComboboxEl, PopupEl>;

package/dist/form/useSelectCombobox.js

@@ -0,0 +1,36 @@
+"use client";
+import { useCombobox } from "./useCombobox.js";
+/**
+ * @remarks \@since 6.0.0
+ */ export function useSelectCombobox(options) {
+    const { value, values, ...comboboxOptions } = options;
+    return useCombobox({
+        ...comboboxOptions,
+        searchable: true,
+        extendKeyDown (movementData) {
+            const { event, show, focusLast, visible } = movementData;
+            if (visible) {
+                return;
+            }
+            switch(event.key){
+                case " ":
+                case "Home":
+                case "End":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    focusLast.current = event.key === "End";
+                    show();
+                    break;
+            }
+        },
+        getEnterDefaultFocusedIndex (options) {
+            const { focusLast } = options;
+            if (focusLast && !value) {
+                return values.length - 1;
+            }
+            return Math.max(0, values.findIndex((option)=>option === value));
+        }
+    });
+}
+
+//# sourceMappingURL=useSelectCombobox.js.map

package/dist/form/useSelectCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useSelectCombobox.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCombobox,\n  type BaseComboboxOptions,\n  type ComboboxImplementation,\n} from \"./useCombobox.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SelectComboboxOptions<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends BaseComboboxOptions<ComboboxEl, PopupEl> {\n  value: string;\n  values: readonly string[];\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SelectComboboxImplementation<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends ComboboxImplementation<ComboboxEl, PopupEl> {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useSelectCombobox<\n  ComboboxEl extends HTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: SelectComboboxOptions<ComboboxEl, PopupEl>\n): SelectComboboxImplementation<ComboboxEl, PopupEl> {\n  const { value, values, ...comboboxOptions } = options;\n\n  return useCombobox({\n    ...comboboxOptions,\n    searchable: true,\n    extendKeyDown(movementData) {\n      const { event, show, focusLast, visible } = movementData;\n      if (visible) {\n        return;\n      }\n\n      switch (event.key) {\n        case \" \":\n        case \"Home\":\n        case \"End\":\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast.current = event.key === \"End\";\n          show();\n          break;\n      }\n    },\n    getEnterDefaultFocusedIndex(options) {\n      const { focusLast } = options;\n      if (focusLast && !value) {\n        return values.length - 1;\n      }\n\n      return Math.max(\n        0,\n        values.findIndex((option) => option === value)\n      );\n    },\n  });\n}\n"],"names":["useCombobox","useSelectCombobox","options","value","values","comboboxOptions","searchable","extendKeyDown","movementData","event","show","focusLast","visible","key","preventDefault","stopPropagation","current","getEnterDefaultFocusedIndex","length","Math","max","findIndex","option"],"mappings":"AAAA;AACA,SACEA,WAAW,QAGN,mBAAmB;AAqB1B;;CAEC,GACD,OAAO,SAASC,kBAIdC,OAAmD;IAEnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,iBAAiB,GAAGH;IAE9C,OAAOF,YAAY;QACjB,GAAGK,eAAe;QAClBC,YAAY;QACZC,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGJ;YAC5C,IAAII,SAAS;gBACX;YACF;YAEA,OAAQH,MAAMI,GAAG;gBACf,KAAK;gBACL,KAAK;gBACL,KAAK;oBACHJ,MAAMK,cAAc;oBACpBL,MAAMM,eAAe;oBACrBJ,UAAUK,OAAO,GAAGP,MAAMI,GAAG,KAAK;oBAClCH;oBACA;YACJ;QACF;QACAO,6BAA4Bf,OAAO;YACjC,MAAM,EAAES,SAAS,EAAE,GAAGT;YACtB,IAAIS,aAAa,CAACR,OAAO;gBACvB,OAAOC,OAAOc,MAAM,GAAG;YACzB;YAEA,OAAOC,KAAKC,GAAG,CACb,GACAhB,OAAOiB,SAAS,CAAC,CAACC,SAAWA,WAAWnB;QAE5C;IACF;AACF"}

package/dist/form/utils.d.ts

@@ -27,7 +27,17 @@ export declare function tryToSubmitRelatedForm<E extends HTMLElement>(event: Key
  * @internal
  * @remarks \@since 6.0.0
  */
-export type ChangeableHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare function isChangeableHTMLElement(element: Element | null): element is ChangeableHTMLElement;
 /**
  * This is used to trigger a change event for a form element.
  *

package/dist/form/utils.js

@@ -38,6 +38,12 @@
     }
     form.requestSubmit(submit);
 }
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function isChangeableHTMLElement(element) {
+    return !!element && "value" in element;
+}
 /**
  * This is used to trigger a change event for a form element.
  *

package/dist/form/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @remarks\n * \\@since 2.7.0\n * \\@since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * \\@since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type ChangeableHTMLElement =\n  | HTMLInputElement\n  | HTMLTextAreaElement\n  | HTMLSelectElement;\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @remarks \\@since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","triggerManualChangeEvent","element","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAWA;;;;;;CAMC,GACD,OAAO,SAASG,yBACdC,OAAqC,EACrCC,KAAsB;IAEtB,IAAI,CAACD,SAAS;QACZ;IACF;IAEA,MAAME,YAAYC,OAAOC,cAAc,CAACJ;IACxC,MAAMK,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACR,SAASC;IACrB,MAAMd,QAAQ,IAAIsB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDV,QAAQW,aAAa,CAACxB;AACxB"}
+{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @remarks\n * \\@since 2.7.0\n * \\@since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * \\@since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function isChangeableHTMLElement(\n  element: Element | null\n): element is ChangeableHTMLElement {\n  return !!element && \"value\" in element;\n}\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @remarks \\@since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","isChangeableHTMLElement","element","triggerManualChangeEvent","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAcA;;;CAGC,GACD,OAAO,SAASG,wBACdC,OAAuB;IAEvB,OAAO,CAAC,CAACA,WAAW,WAAWA;AACjC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,yBACdD,OAAqC,EACrCE,KAAsB;IAEtB,IAAI,CAACF,SAAS;QACZ;IACF;IAEA,MAAMG,YAAYC,OAAOC,cAAc,CAACL;IACxC,MAAMM,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACT,SAASE;IACrB,MAAMf,QAAQ,IAAIuB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDX,QAAQY,aAAa,CAACzB;AACxB"}

package/dist/icon/IconRotator.js

@@ -8,7 +8,7 @@ import { iconRotator } from "./styles.js";
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  */ export const IconRotator = /*#__PURE__*/ forwardRef(function IconRotator(props, ref) {
-    const { style, className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
+    const { className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
     const className = iconRotator({
         rotated,
         className: propClassName,
@@ -22,9 +22,8 @@ import { iconRotator } from "./styles.js";
     }
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
-        style: style,
-        className: className,
         ref: ref,
+        className: className,
         children: children
     });
 });

package/dist/icon/IconRotator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { iconRotator, type IconRotatorClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks \\@since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      style,\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} style={style} className={className} ref={ref}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","style","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,cAAc,QAIT,QAAQ;AACf,SAASC,WAAW,QAA0C,cAAc;AAiC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,EACLC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGT;IAEJ,MAAMG,YAAYL,YAAY;QAC5BO;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBV,eAAuCS,WAAW;QACtE,MAAMI,QAAQhB,SAASiB,IAAI,CAACL;QAC5B,qBAAOX,aAAae,OAAO;YACzBP,WAAWV,IAAIU,WAAWO,MAAMV,KAAK,CAACG,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,OAAOA;QAAOC,WAAWA;QAAWF,KAAKA;kBAC3DK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { iconRotator, type IconRotatorClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks \\@since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} ref={ref} className={className}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,cAAc,QAIT,QAAQ;AACf,SAASC,WAAW,QAA0C,cAAc;AAiC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQf,SAASgB,IAAI,CAACL;QAC5B,qBAAOV,aAAac,OAAO;YACzBP,WAAWT,IAAIS,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP,GACA"}

package/dist/icon/_icon.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "sass:map";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../utils";
@@ -47,61 +46,34 @@ $rotate-from: 0deg !default;
 $rotate-to: 180deg !default;
 $rotate-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-icon-color,
-    value: $color,
-  ),
-  size: (
-    var: --rmd-icon-size,
-    value: $size,
-  ),
-  spacing: (
-    var: --rmd-icon-spacing,
-    value: $spacing,
-  ),
-  rotate-from: (
-    var: --rmd-icon-rotate-from,
-    value: $rotate-from,
-  ),
-  rotate-to: (
-    var: --rmd-icon-rotate-to,
-    value: $rotate-to,
-  ),
-  symbol-fill: (
-    var: --rmd-symbol-fill,
-    value: $symbol-fill,
-  ),
-  symbol-grade: (
-    var: --rmd-symbol-grad,
-    value: $symbol-grade,
-  ),
-  symbol-weight: (
-    var: --rmd-symbol-wght,
-    value: $symbol-weight,
-  ),
-  symbol-optical-size: (
-    var: --rmd-symbol-opsz,
-    value: $symbol-optical-size,
-  ),
+$variables: (
+  color,
+  size,
+  spacing,
+  rotate-from,
+  rotate-to,
+  symbol-fill,
+  symbol-grade,
+  symbol-weight,
+  symbol-optical-size
 );
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "icon var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+// shouldn't really use react-md without icons though...
+$_disable-icons: $disable-font and $disable-svg and $disable-symbol;
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "icon");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "icon var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "icon")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -109,13 +81,13 @@ $var-lookup: (
 }
 
 @mixin use-light-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $light-theme-color);
   }
 }
 
 @mixin use-dark-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $dark-theme-color);
   }
 }
@@ -126,94 +98,115 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
-  // shouldn't really use react-md without icons though...
-  @if not $disable-font or not $disable-svg and not $disable-symbol {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+@mixin variables {
+  @if not $_disable-icons {
+    @include set-var(color, $color);
+    @include set-var(size, $size);
+    @include set-var(spacing, $spacing);
+  }
 
-    .rmd-icon {
-      @include use-var(font-size, size);
-      @include use-var(color);
+  @if not $disable-symbol {
+    @include set-var(symbol-fill, $symbol-fill);
+    @include set-var(symbol-grade, $symbol-grade);
+    @include set-var(symbol-weight, $symbol-weight);
+    @include set-var(symbol-optical-size, $symbol-optical-size);
+  }
 
-      // you normally don't want icons to shrink in flex containers.
-      // update the icon manually instead.
-      flex-shrink: 0;
-      user-select: none;
+  @if not $disable-rotator {
+    @include set-var(rotate-from, $rotate-from);
+    @include set-var(rotate-to, $rotate-to);
+  }
+}
 
-      @if not $disable-font {
-        &--font {
-          text-align: center;
-        }
+@mixin styles($disable-layer: false) {
+  @if not $_disable-icons {
+    @include utils.optional-layer(icon, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
       }
 
-      @if not $disable-svg {
-        &--svg {
-          fill: currentcolor;
-          height: 1em;
-          width: 1em;
+      .rmd-icon {
+        @include use-var(font-size, size);
+        @include use-var(color);
+
+        // you normally don't want icons to shrink in flex containers.
+        // update the icon manually instead.
+        flex-shrink: 0;
+        user-select: none;
+
+        @if not $disable-font {
+          &--font {
+            text-align: center;
+          }
         }
-      }
 
-      @if not $disable-symbol {
-        &--symbol {
-          font-variation-settings:
-            "FILL" get-var(symbol-fill),
-            "wght" get-var(symbol-weight),
-            "GRAD" get-var(symbol-grade),
-            "opsz" get-var(symbol-optical-size);
+        @if not $disable-svg {
+          &--svg {
+            fill: currentcolor;
+            height: 1em;
+            width: 1em;
+          }
         }
-      }
 
-      @if not $disable-inline {
-        &--vab {
-          vertical-align: bottom;
+        @if not $disable-symbol {
+          &--symbol {
+            font-variation-settings:
+              "FILL" get-var(symbol-fill),
+              "wght" get-var(symbol-weight),
+              "GRAD" get-var(symbol-grade),
+              "opsz" get-var(symbol-optical-size);
+          }
         }
-      }
 
-      @if not $disable-spacing-before {
-        &--before {
-          @include utils.auto-rtl(margin-right, get-var(spacing), 0);
+        @if not $disable-inline {
+          &--vab {
+            vertical-align: bottom;
+          }
         }
-      }
 
-      @if not $disable-spacing-after {
-        &--after {
-          @include utils.auto-rtl(margin-left, get-var(spacing), 0);
+        @if not $disable-spacing-before {
+          &--before {
+            @include utils.auto-rtl(margin-right, get-var(spacing), 0);
+          }
         }
-      }
 
-      @if not $disable-spacing-above {
-        &--above {
-          @include use-var(margin-top, spacing);
+        @if not $disable-spacing-after {
+          &--after {
+            @include utils.auto-rtl(margin-left, get-var(spacing), 0);
+          }
         }
-      }
 
-      @if not $disable-spacing-below {
-        &--below {
-          @include use-var(margin-bottom, spacing);
+        @if not $disable-spacing-above {
+          &--above {
+            @include use-var(margin-bottom, spacing);
+          }
         }
-      }
 
-      @if not $disable-dense {
-        &--dense {
-          @include set-var(size, $dense-size);
+        @if not $disable-spacing-below {
+          &--below {
+            @include use-var(margin-top, spacing);
+          }
+        }
+
+        @if not $disable-dense {
+          &--dense {
+            @include set-var(size, $dense-size);
+          }
         }
       }
     }
-  }
 
-  @if not $disable-rotator {
-    .rmd-icon-rotator {
-      transform: rotate(get-var(rotate-from));
+    @if not $disable-rotator {
+      .rmd-icon-rotator {
+        transform: rotate(get-var(rotate-from));
 
-      &--animate {
-        transition: transform $rotate-duration linear;
-      }
+        &--animate {
+          transition: transform $rotate-duration linear;
+        }
 
-      &--rotated {
-        transform: rotate(get-var(rotate-to));
+        &--rotated {
+          transform: rotate(get-var(rotate-to));
+        }
       }
     }
   }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { nanoid } from "nanoid";
 export * from "./CoreProviders.js";
 export * from "./NoSsr.js";
+export * from "./RootHtml.js";
 export * from "./SsrProvider.js";
 export * from "./app-bar/AppBar.js";
 export * from "./app-bar/AppBarTitle.js";
@@ -13,6 +14,7 @@ export * from "./button/AsyncButton.js";
 export * from "./button/Button.js";
 export * from "./button/ButtonUnstyled.js";
 export * from "./button/FloatingActionButton.js";
+export * from "./button/TooltippedButton.js";
 export * from "./button/buttonStyles.js";
 export * from "./button/buttonUnstyledStyles.js";
 export * from "./card/Card.js";
@@ -21,6 +23,7 @@ export * from "./card/CardFooter.js";
 export * from "./card/CardHeader.js";
 export * from "./card/CardSubtitle.js";
 export * from "./card/CardTitle.js";
+export * from "./card/ClickableCard.js";
 export * from "./card/styles.js";
 export * from "./chip/Chip.js";
 export * from "./chip/styles.js";
@@ -67,6 +70,7 @@ export * from "./form/Option.js";
 export * from "./form/Password.js";
 export * from "./form/Radio.js";
 export * from "./form/Select.js";
+export * from "./form/SelectedOption.js";
 export * from "./form/Slider.js";
 export * from "./form/SliderContainer.js";
 export * from "./form/SliderMark.js";
@@ -84,6 +88,7 @@ export * from "./form/TextFieldContainerStyles.js";
 export * from "./form/fileUtils.js";
 export * from "./form/formConfig.js";
 export * from "./form/formMessageStyles.js";
+export * from "./form/menuItemInputToggleStyles.js";
 export * from "./form/nativeSelectStyles.js";
 export * from "./form/optionStyles.js";
 export * from "./form/passwordStyles.js";
@@ -92,12 +97,18 @@ export * from "./form/switchStyles.js";
 export * from "./form/textFieldStyles.js";
 export * from "./form/types.js";
 export * from "./form/useCheckboxGroup.js";
+export * from "./form/useCombobox.js";
+export * from "./form/useEditableCombobox.js";
 export * from "./form/useFileUpload.js";
+export * from "./form/useFormReset.js";
+export * from "./form/useListboxProvider.js";
 export * from "./form/useNumberField.js";
 export * from "./form/useRadioGroup.js";
 export * from "./form/useRangeSlider.js";
+export * from "./form/useSelectCombobox.js";
 export * from "./form/useSlider.js";
 export * from "./form/useTextField.js";
+export * from "./form/utils.js";
 export * from "./form/validation.js";
 export * from "./hoverMode/useHoverMode.js";
 export * from "./hoverMode/useHoverModeProvider.js";
@@ -156,6 +167,7 @@ export * from "./menu/MenuButton.js";
 export * from "./menu/MenuConfigurationProvider.js";
 export * from "./menu/MenuItem.js";
 export * from "./menu/MenuItemButton.js";
+export * from "./menu/MenuItemCircularProgress.js";
 export * from "./menu/MenuItemGroup.js";
 export * from "./menu/MenuItemSeparator.js";
 export * from "./menu/MenuSheet.js";
@@ -185,6 +197,12 @@ export * from "./responsive-item/styles.js";
 export * from "./scroll/ScrollLock.js";
 export * from "./scroll/getScrollbarWidth.js";
 export * from "./scroll/useScrollLock.js";
+export * from "./searching/caseInsensitive.js";
+export * from "./searching/fuzzy.js";
+export * from "./searching/toSearchQuery.js";
+export * from "./searching/types.js";
+export * from "./searching/useFuzzyMatch.js";
+export * from "./searching/utils.js";
 export * from "./segmented-button/SegmentedButton.js";
 export * from "./segmented-button/SegmentedButtonContainer.js";
 export * from "./segmented-button/segmentedButtonContainerStyles.js";
@@ -247,6 +265,7 @@ export * from "./theme/utils.js";
 export * from "./tooltip/Tooltip.js";
 export * from "./tooltip/TooltipHoverModeProvider.js";
 export * from "./tooltip/constants.js";
+export * from "./tooltip/tooltipStyles.js";
 export * from "./tooltip/useTooltip.js";
 export * from "./transition/CSSTransition.js";
 export * from "./transition/Collapse.js";
@@ -257,6 +276,7 @@ export * from "./transition/Slide.js";
 export * from "./transition/SlideContainer.js";
 export * from "./transition/config.js";
 export * from "./transition/maxWidthTransition.js";
+export * from "./transition/skeletonPlaceholderUtils.js";
 export * from "./transition/types.js";
 export * from "./transition/useCSSTransition.js";
 export * from "./transition/useCarousel.js";
@@ -288,6 +308,7 @@ export * from "./typography/WritingDirectionProvider.js";
 export * from "./useAsyncAction.js";
 export * from "./useDebouncedFunction.js";
 export * from "./useDropzone.js";
+export * from "./useElementSize.js";
 export * from "./useEnsuredId.js";
 export * from "./useEnsuredRef.js";
 export * from "./useHtmlClassName.js";
@@ -306,8 +327,8 @@ export * from "./utils/RenderRecursively.js";
 export * from "./utils/alphaNumericSort.js";
 export * from "./utils/applyRef.js";
 export * from "./utils/bem.js";
-export * from "./utils/filters.js";
 export * from "./utils/getClientPosition.js";
+export * from "./utils/getMiddleOfRange.js";
 export * from "./utils/getPercentage.js";
 export * from "./utils/getRangeDefaultValue.js";
 export * from "./utils/getRangeSteps.js";