@salt-ds/core 1.65.0 → 1.66.0

package/dist-es/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = Date.now();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (Date.now() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role=\"img\"\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["Spinner","spinnerCss"],"mappings":";;;;;;;;;;;;;;;;AAiBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAA,GAAa,CAAC,IAAA,KAClB,IAAA,KAAS,YAAY,QAAA,GAAW,IAAA;AAElC,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAqCxC,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,SAASA,QAAAA,CACP;AAAA,IACE,cAAc,SAAA,GAAY,SAAA;AAAA,IAC1B,iBAAA,GAAoB,GAAA;AAAA,IACpB,gBAAA,GAAmB,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,EAAA,EAAI,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAS,GAAI,gBAAA,EAAiB;AAEtC,IAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAA,EAAkB;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAA,GAAY,KAAK,GAAA,EAAI;AAE3B,MAAA,MAAM,QAAA,GACJ,iBAAA,GAAoB,CAAA,IACpB,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAA,CAAK,GAAA,EAAI,GAAI,SAAA,GAAY,gBAAA,EAAkB;AAE7C,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA,QACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,MACpB,GAAG,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAA,EAAkB;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAA,EAAwB;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA,QACjC;AAAA,MACF,CAAA;AAAA,IACF,CAAA,EAAG;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,SAAA;AAAA,QACZ,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,OAAA,EAAkB,EAAA,EAAQ;AAAA;AAAA,KACpD;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      className,\n      size: sizeProp = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const size = handleSize(sizeProp);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = Date.now();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (Date.now() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role=\"img\"\n        {...rest}\n      >\n        <SpinnerSVG id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["Spinner","spinnerCss"],"mappings":";;;;;;;;;;;;;;;;AAgBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAA,GAAa,CAAC,IAAA,KAClB,IAAA,KAAS,YAAY,QAAA,GAAW,IAAA;AAElC,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAqCxC,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,SAASA,QAAAA,CACP;AAAA,IACE,cAAc,SAAA,GAAY,SAAA;AAAA,IAC1B,iBAAA,GAAoB,GAAA;AAAA,IACpB,gBAAA,GAAmB,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAM,QAAA,GAAW,QAAA;AAAA,IACjB,EAAA,EAAI,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAS,GAAI,gBAAA,EAAiB;AAEtC,IAAA,MAAM,IAAA,GAAO,WAAW,QAAQ,CAAA;AAEhC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAA,EAAkB;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAA,GAAY,KAAK,GAAA,EAAI;AAE3B,MAAA,MAAM,QAAA,GACJ,iBAAA,GAAoB,CAAA,IACpB,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAA,CAAK,GAAA,EAAI,GAAI,SAAA,GAAY,gBAAA,EAAkB;AAE7C,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA,QACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,MACpB,GAAG,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAA,EAAkB;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAA,EAAwB;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA,QACjC;AAAA,MACF,CAAA;AAAA,IACF,CAAA,EAAG;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,SAAA;AAAA,QACZ,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,cAAW,EAAA,EAAQ;AAAA;AAAA,KACtB;AAAA,EAEJ;AACF;;;;"}

package/dist-es/spinner/svgSpinners/SpinnerSVG.js

@@ -8,46 +8,20 @@ import '../../salt-provider/SaltProvider.js';
 import '../../viewport/ViewportProvider.js';
 
 const withBaseName = makePrefixer("saltSpinner");
-const sizeAndStrokeWidthMapping = {
-  small: {
-    high: { width: 12, strokeWidth: 2 },
-    medium: { width: 12, strokeWidth: 2 },
-    low: { width: 14, strokeWidth: 2 },
-    touch: { width: 16, strokeWidth: 2 },
-    mobile: { width: 16, strokeWidth: 2 }
-  },
-  medium: {
-    high: { width: 20, strokeWidth: 2 },
-    medium: { width: 28, strokeWidth: 4 },
-    low: { width: 36, strokeWidth: 6 },
-    touch: { width: 44, strokeWidth: 8 },
-    mobile: { width: 44, strokeWidth: 8 }
-  },
-  large: {
-    high: { width: 40, strokeWidth: 2 },
-    medium: { width: 56, strokeWidth: 4 },
-    low: { width: 72, strokeWidth: 6 },
-    touch: { width: 88, strokeWidth: 8 },
-    mobile: { width: 88, strokeWidth: 8 }
-  }
-};
 const SpinnerSVG = ({
   id = "svg-spinner",
-  rest,
-  size,
-  density
+  ...rest
 }) => {
-  const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];
-  const radius = (width - strokeWidth) / 2;
+  const gradientId = `${id}-1`;
   return /* @__PURE__ */ jsxs(
     "svg",
     {
       className: withBaseName("spinner"),
-      viewBox: `0 0 ${width} ${width}`,
+      preserveAspectRatio: "xMidYMid meet",
       id,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-1`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "50%", y2: "0", children: [
           /* @__PURE__ */ jsx(
             "stop",
             {
@@ -65,26 +39,34 @@ const SpinnerSVG = ({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs("g", { fill: "none", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: `M${width - strokeWidth / 2},${width / 2} a${radius},${radius} 0 1,0 -${width - strokeWidth},0`,
-              stroke: "var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background)",
-              strokeWidth: "var(--spinner-strokeWidth)",
-              fill: "none"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: `M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${width - strokeWidth}`,
-              stroke: `url(#${id}-1)`,
-              strokeWidth: "var(--spinner-strokeWidth)",
-              fill: "none"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: withBaseName("arc"),
+            cx: "50%",
+            cy: "50%",
+            fill: "none",
+            stroke: "var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background))",
+            strokeWidth: "var(--spinner-strokeWidth)",
+            pathLength: "100",
+            strokeDasharray: "50 50",
+            strokeDashoffset: "50"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: withBaseName("arc"),
+            cx: "50%",
+            cy: "50%",
+            fill: "none",
+            stroke: `url(#${gradientId})`,
+            strokeWidth: "var(--spinner-strokeWidth)",
+            pathLength: "100",
+            strokeDasharray: "50 50",
+            strokeDashoffset: "75"
+          }
+        )
       ]
     }
   );

package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { Density } from \"../../theme\";\nimport { makePrefixer } from \"../../utils\";\nimport type { SpinnerSVGSize } from \"../Spinner\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ninterface SpinnerProps {\n  id?: string;\n  rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n  size: SpinnerSVGSize;\n  density: Density;\n}\n\nconst sizeAndStrokeWidthMapping = {\n  small: {\n    high: { width: 12, strokeWidth: 2 },\n    medium: { width: 12, strokeWidth: 2 },\n    low: { width: 14, strokeWidth: 2 },\n    touch: { width: 16, strokeWidth: 2 },\n    mobile: { width: 16, strokeWidth: 2 },\n  },\n  medium: {\n    high: { width: 20, strokeWidth: 2 },\n    medium: { width: 28, strokeWidth: 4 },\n    low: { width: 36, strokeWidth: 6 },\n    touch: { width: 44, strokeWidth: 8 },\n    mobile: { width: 44, strokeWidth: 8 },\n  },\n  large: {\n    high: { width: 40, strokeWidth: 2 },\n    medium: { width: 56, strokeWidth: 4 },\n    low: { width: 72, strokeWidth: 6 },\n    touch: { width: 88, strokeWidth: 8 },\n    mobile: { width: 88, strokeWidth: 8 },\n  },\n};\n\nexport const SpinnerSVG = ({\n  id = \"svg-spinner\",\n  rest,\n  size,\n  density,\n}: SpinnerProps) => {\n  const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];\n  const radius = (width - strokeWidth) / 2;\n\n  return (\n    <svg\n      className={withBaseName(\"spinner\")}\n      viewBox={`0 0 ${width} ${width}`}\n      id={id}\n      {...rest}\n    >\n      <defs>\n        <linearGradient id={`${id}-1`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"15%\"\n            stopOpacity=\"1\"\n          />\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"100%\"\n            stopOpacity=\"0\"\n          />\n        </linearGradient>\n      </defs>\n      <g fill=\"none\">\n        {/*\n          This first path draws the top half of the circle without a gradient.\n          It starts from the right end, moves in a circular arc, and ends at the left end.\n        */}\n        <path\n          d={`M${width - strokeWidth / 2},${\n            width / 2\n          } a${radius},${radius} 0 1,0 -${width - strokeWidth},0`}\n          stroke=\"var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background)\"\n          strokeWidth=\"var(--spinner-strokeWidth)\"\n          fill=\"none\"\n        />\n        {/*\n          This second path draws the left half of the circle with a gradient that transitions\n          from opaque on the left to transparent on the right.\n          It starts from the top-center, moves in a circular arc, and ends at the bottom-center.\n        */}\n        <path\n          d={`M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${\n            width - strokeWidth\n          }`}\n          stroke={`url(#${id}-1)`}\n          strokeWidth=\"var(--spinner-strokeWidth)\"\n          fill=\"none\"\n        />\n      </g>\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAS/C,MAAM,yBAAA,GAA4B;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IAClC,MAAA,EAAQ,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACpC,GAAA,EAAK,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACjC,KAAA,EAAO,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACnC,MAAA,EAAQ,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA;AAAE,GACtC;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IAClC,MAAA,EAAQ,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACpC,GAAA,EAAK,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACjC,KAAA,EAAO,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACnC,MAAA,EAAQ,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA;AAAE,GACtC;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IAClC,MAAA,EAAQ,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACpC,GAAA,EAAK,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACjC,KAAA,EAAO,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,IACnC,MAAA,EAAQ,EAAE,KAAA,EAAO,EAAA,EAAI,aAAa,CAAA;AAAE;AAExC,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,EAAA,GAAK,aAAA;AAAA,EACL,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAAoB;AAClB,EAAA,MAAM,EAAE,KAAA,EAAO,WAAA,KAAgB,yBAAA,CAA0B,IAAI,EAAE,OAAO,CAAA;AACtE,EAAA,MAAM,MAAA,GAAA,CAAU,QAAQ,WAAA,IAAe,CAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACjC,OAAA,EAAS,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAAA,MAC9B,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,gBAAA,EAAA,EAAe,EAAA,EAAI,GAAG,EAAE,CAAA,EAAA,CAAA,EAAM,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,MAAA,EAAO,IAAG,GAAA,EACxD,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,cACtC,MAAA,EAAO,KAAA;AAAA,cACP,WAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,cACtC,MAAA,EAAO,MAAA;AAAA,cACP,WAAA,EAAY;AAAA;AAAA;AACd,SAAA,EACF,CAAA,EACF,CAAA;AAAA,wBACA,IAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAK,MAAA,EAKN,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,CAAA,EAAI,KAAA,GAAQ,WAAA,GAAc,CAAC,CAAA,CAAA,EAC5B,KAAA,GAAQ,CACV,CAAA,EAAA,EAAK,MAAM,CAAA,CAAA,EAAI,MAAM,CAAA,QAAA,EAAW,QAAQ,WAAW,CAAA,EAAA,CAAA;AAAA,cACnD,MAAA,EAAO,2EAAA;AAAA,cACP,WAAA,EAAY,4BAAA;AAAA,cACZ,IAAA,EAAK;AAAA;AAAA,WACP;AAAA,0BAMA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,CAAA,EAAI,KAAA,GAAQ,CAAC,CAAA,CAAA,EAAI,WAAA,GAAc,CAAC,CAAA,EAAA,EAAK,MAAM,CAAA,CAAA,EAAI,MAAM,CAAA,SAAA,EACtD,QAAQ,WACV,CAAA,CAAA;AAAA,cACA,MAAA,EAAQ,QAAQ,EAAE,CAAA,GAAA,CAAA;AAAA,cAClB,WAAA,EAAY,4BAAA;AAAA,cACZ,IAAA,EAAK;AAAA;AAAA;AACP,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ntype SpinnerSVGProps = ComponentPropsWithoutRef<\"svg\">;\n\n/**\n * Draws the spinner as two overlapping circles. Each circle is half-stroked\n * (`stroke-dasharray=\"50 50\"` against a normalised `pathLength` of 100) and\n * rotated via `stroke-dashoffset`: the first draws the top half, the second\n * draws the left half with a fading gradient. Radius and stroke width come\n * from CSS custom properties set by the parent `.saltSpinner-*` size class.\n */\nexport const SpinnerSVG = ({\n  id = \"svg-spinner\",\n  ...rest\n}: SpinnerSVGProps) => {\n  const gradientId = `${id}-1`;\n\n  return (\n    <svg\n      className={withBaseName(\"spinner\")}\n      preserveAspectRatio=\"xMidYMid meet\"\n      id={id}\n      {...rest}\n    >\n      <defs>\n        <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"50%\" y2=\"0\">\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"15%\"\n            stopOpacity=\"1\"\n          />\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"100%\"\n            stopOpacity=\"0\"\n          />\n        </linearGradient>\n      </defs>\n      <circle\n        className={withBaseName(\"arc\")}\n        cx=\"50%\"\n        cy=\"50%\"\n        fill=\"none\"\n        stroke=\"var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background))\"\n        strokeWidth=\"var(--spinner-strokeWidth)\"\n        pathLength=\"100\"\n        strokeDasharray=\"50 50\"\n        strokeDashoffset=\"50\"\n      />\n      <circle\n        className={withBaseName(\"arc\")}\n        cx=\"50%\"\n        cy=\"50%\"\n        fill=\"none\"\n        stroke={`url(#${gradientId})`}\n        strokeWidth=\"var(--spinner-strokeWidth)\"\n        pathLength=\"100\"\n        strokeDasharray=\"50 50\"\n        strokeDashoffset=\"75\"\n      />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAWxC,MAAM,aAAa,CAAC;AAAA,EACzB,EAAA,GAAK,aAAA;AAAA,EACL,GAAG;AACL,CAAA,KAAuB;AACrB,EAAA,MAAM,UAAA,GAAa,GAAG,EAAE,CAAA,EAAA,CAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACjC,mBAAA,EAAoB,eAAA;AAAA,MACpB,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,gBAAA,EAAA,EAAe,EAAA,EAAI,UAAA,EAAY,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,KAAA,EAAM,EAAA,EAAG,GAAA,EACxD,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,cACtC,MAAA,EAAO,KAAA;AAAA,cACP,WAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,cACtC,MAAA,EAAO,MAAA;AAAA,cACP,WAAA,EAAY;AAAA;AAAA;AACd,SAAA,EACF,CAAA,EACF,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,YAC7B,EAAA,EAAG,KAAA;AAAA,YACH,EAAA,EAAG,KAAA;AAAA,YACH,IAAA,EAAK,MAAA;AAAA,YACL,MAAA,EAAO,4EAAA;AAAA,YACP,WAAA,EAAY,4BAAA;AAAA,YACZ,UAAA,EAAW,KAAA;AAAA,YACX,eAAA,EAAgB,OAAA;AAAA,YAChB,gBAAA,EAAiB;AAAA;AAAA,SACnB;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,YAC7B,EAAA,EAAG,KAAA;AAAA,YACH,EAAA,EAAG,KAAA;AAAA,YACH,IAAA,EAAK,MAAA;AAAA,YACL,MAAA,EAAQ,QAAQ,UAAU,CAAA,CAAA,CAAA;AAAA,YAC1B,WAAA,EAAY,4BAAA;AAAA,YACZ,UAAA,EAAW,KAAA;AAAA,YACX,eAAA,EAAgB,OAAA;AAAA,YAChB,gBAAA,EAAiB;AAAA;AAAA;AACnB;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist-types/index.d.ts

@@ -30,6 +30,7 @@ export * from "./link";
 export * from "./link-card";
 export * from "./list-box";
 export * from "./list-control";
+export * from "./mega-menu";
 export * from "./menu";
 export * from "./multiline-input";
 export * from "./navigation-item";

package/dist-types/mega-menu/MegaMenu.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+/**
+ * Supported placements for the mega menu panel.
+ */
+export type MegaMenuPlacement = "bottom" | "bottom-start" | "bottom-end";
+export interface MegaMenuProps {
+    /**
+     * The content of the mega menu, typically `MegaMenuTrigger` and `MegaMenuPanel`.
+     */
+    children?: ReactNode;
+    /**
+     * Whether the mega menu is open. Use for controlled mode.
+     */
+    open?: boolean;
+    /**
+     * Whether the mega menu is initially open. Use for uncontrolled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The placement of the mega menu panel relative to the trigger.
+     * @default "bottom"
+     */
+    placement?: MegaMenuPlacement;
+}
+/**
+ * Root of a mega menu, coordinating its trigger and panel.
+ *
+ * Not intended to be nested inside another floating overlay (e.g. a dialog or
+ * popover): the mega menu does not participate in floating-ui's `FloatingTree`
+ */
+export declare function MegaMenu({ children, open, defaultOpen, onOpenChange, placement, }: MegaMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist-types/mega-menu/MegaMenuActions.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuActionsProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the actions. Place `MegaMenuActions` inside
+     * `MegaMenuContent`, after `MegaMenuGroups`; it renders as a band beneath the
+     * groups, spanning their width.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuActions: import("react").ForwardRefExoticComponent<MegaMenuActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/mega-menu/MegaMenuAside.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuAsideProps extends ComponentPropsWithoutRef<"aside"> {
+    /**
+     * The content. Renders to the left of `MegaMenuContent` when placed before
+     * it, and to the right when placed after.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuAside: import("react").ForwardRefExoticComponent<MegaMenuAsideProps & import("react").RefAttributes<HTMLElement>>;

package/dist-types/mega-menu/MegaMenuContent.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the mega menu navigation area, typically a `MegaMenuGroups`
+     * and an optional `MegaMenuActions`.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuContent: import("react").ForwardRefExoticComponent<MegaMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/mega-menu/MegaMenuContext.d.ts

@@ -0,0 +1,28 @@
+import type { FloatingRootContext } from "@floating-ui/react";
+import type { Dispatch, HTMLProps, MutableRefObject, SetStateAction } from "react";
+import type { MegaMenuPlacement } from "./MegaMenu";
+export interface MegaMenuContextValue {
+    /** Whether the mega menu is currently open. */
+    openState: boolean;
+    /** Toggle or set the open state of the mega menu. */
+    setOpen: (open: boolean) => void;
+    /** The floating-ui root context for coordinating interactions. */
+    floatingRootContext: FloatingRootContext;
+    /** The placement of the mega menu panel relative to the trigger. */
+    placement: MegaMenuPlacement;
+    /** Props getter for the trigger (reference) element. Merges floating-ui interaction props with user props. */
+    getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;
+    /** Props getter for the floating panel element. Merges floating-ui interaction props with user props. */
+    getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    /** Ref setter for the floating panel element. */
+    setFloating: Dispatch<SetStateAction<HTMLElement | null>>;
+    /** Ref setter for the trigger (reference) element. */
+    setReference: Dispatch<SetStateAction<HTMLElement | null>>;
+    /** Whether the first item should receive focus when the panel opens. */
+    focusFirstItemOnOpenRef: MutableRefObject<boolean>;
+    /** The id of the mega menu panel, used for aria-controls on the trigger. */
+    panelId: string | undefined;
+    /** Registers the panel's id so the trigger's aria-controls stays in sync. */
+    setPanelId: Dispatch<SetStateAction<string | undefined>>;
+}
+export declare const MegaMenuContext: import("react").Context<MegaMenuContextValue | undefined>;

package/dist-types/mega-menu/MegaMenuGroup.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the mega menu group: a `MegaMenuGroupHeading` and a
+     * `MegaMenuList` of `MegaMenuListItem`s.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuGroup: import("react").ForwardRefExoticComponent<MegaMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/mega-menu/MegaMenuGroupContext.d.ts

@@ -0,0 +1,12 @@
+export interface MegaMenuGroupContextValue {
+    /**
+     * The rendered heading's id, used to label the item list via `aria-labelledby`.
+     * `undefined` when the group has no `MegaMenuGroupHeading`.
+     */
+    headingId: string | undefined;
+    /** Register (or clear, with `undefined`) the heading's id. */
+    setHeadingId: (id: string | undefined) => void;
+}
+export declare const MegaMenuGroupContext: import("react").Context<MegaMenuGroupContextValue>;
+/** Access the nearest `MegaMenuGroup` context. */
+export declare function useMegaMenuGroup(): MegaMenuGroupContextValue;

package/dist-types/mega-menu/MegaMenuGroupHeading.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuGroupHeadingProps extends ComponentPropsWithoutRef<"h2"> {
+    /**
+     * The content of the mega menu group heading.
+     */
+    children?: ReactNode;
+    /**
+     * The heading element to render.
+     * @default "h3"
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+export declare const MegaMenuGroupHeading: import("react").ForwardRefExoticComponent<MegaMenuGroupHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist-types/mega-menu/MegaMenuGroups.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuGroupsProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The `MegaMenuGroup` columns of the mega menu.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuGroups: import("react").ForwardRefExoticComponent<MegaMenuGroupsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/mega-menu/MegaMenuList.d.ts

@@ -0,0 +1,16 @@
+import { type ElementType, type FunctionComponent, type ReactNode } from "react";
+import { type PolymorphicComponentPropWithRef } from "../utils";
+export type MegaMenuListProps<T extends ElementType = "ul"> = PolymorphicComponentPropWithRef<T, {
+    /**
+     * The items of the group, typically `MegaMenuListItem` components. Each
+     * `MegaMenuListItem` renders its own `<li>`.
+     */
+    children?: ReactNode;
+}>;
+type MegaMenuListComponent = <T extends ElementType = "ul">(props: MegaMenuListProps<T>) => ReturnType<FunctionComponent>;
+/**
+ * The list of a group's `MegaMenuListItem`s. Renders a `<ul>` by default; pass
+ * `as="ol"` for an ordered list.
+ */
+export declare const MegaMenuList: MegaMenuListComponent;
+export {};

package/dist-types/mega-menu/MegaMenuListItem.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef, type MouseEventHandler, type ReactNode } from "react";
+import { type RenderPropsType } from "../utils";
+export interface MegaMenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">, "onClick"> {
+    /**
+     * The content of the mega menu item.
+     */
+    children?: ReactNode;
+    /**
+     * Whether the item is the current page. Sets `aria-current="page"`
+     */
+    current?: boolean;
+    /**
+     * Href passed to the link action element.
+     */
+    href?: string;
+    /**
+     * Called when the item's action is activated, before the menu closes.
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Render prop to enable customization of the underlying action element (e.g. a router `Link`).
+     */
+    render?: RenderPropsType["render"];
+}
+export declare const MegaMenuListItem: import("react").ForwardRefExoticComponent<MegaMenuListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist-types/mega-menu/MegaMenuPanel.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface MegaMenuPanelProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the mega menu panel.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuPanel: import("react").ForwardRefExoticComponent<MegaMenuPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/mega-menu/MegaMenuTrigger.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+export interface MegaMenuTriggerProps {
+    /**
+     * The trigger element for the mega menu, typically a `NavigationItem` or `Button`.
+     * Wrap each mega menu in its own `<li>` — arrow-key navigation between triggers depends on it.
+     */
+    children?: ReactNode;
+}
+export declare const MegaMenuTrigger: import("react").ForwardRefExoticComponent<MegaMenuTriggerProps & import("react").RefAttributes<HTMLElement>>;

package/dist-types/mega-menu/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./MegaMenu";
+export * from "./MegaMenuActions";
+export * from "./MegaMenuAside";
+export * from "./MegaMenuContent";
+export * from "./MegaMenuGroup";
+export * from "./MegaMenuGroupHeading";
+export * from "./MegaMenuGroups";
+export * from "./MegaMenuList";
+export * from "./MegaMenuListItem";
+export * from "./MegaMenuPanel";
+export * from "./MegaMenuTrigger";

package/dist-types/mega-menu/useMegaMenu.d.ts

@@ -0,0 +1,6 @@
+import { type MegaMenuContextValue } from "./MegaMenuContext";
+/**
+ * Access the nearest MegaMenu context.
+ * Must be used within a `MegaMenu` provider.
+ */
+export declare function useMegaMenu(): MegaMenuContextValue;

package/dist-types/mega-menu/useMegaMenuNavigation.d.ts

@@ -0,0 +1,16 @@
+import type { ElementProps, FloatingRootContext } from "@floating-ui/react";
+export declare const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+export interface UseMegaMenuNavigationProps {
+    /**
+     * Whether the interaction is enabled.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Floating-ui interaction hook for mega menu keyboard navigation. Handles keys
+ * on the panel only; the trigger keys are owned by `MegaMenuTrigger`.
+ */
+export declare function useMegaMenuNavigation(context: FloatingRootContext, props?: UseMegaMenuNavigationProps): ElementProps;
+/** Focus the first navigable item inside a mega menu panel, retrying until rendered. */
+export declare function focusFirstItem(panel: HTMLElement, attempt?: number): void;

package/dist-types/mega-menu/usePageMargin.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves the panel's page-margin token to pixels for floating-ui padding, to
+ * handle token (`--saltMegaMenuPanel-pageMargin`) override by consumers
+ * (edge to edge example).
+ */
+export declare function usePageMargin(referenceEl: HTMLElement | null | undefined): number;

package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts

@@ -1,11 +1,11 @@
-import type { SVGAttributes } from "react";
-import type { Density } from "../../theme";
-import type { SpinnerSVGSize } from "../Spinner";
-interface SpinnerProps {
-    id?: string;
-    rest?: Omit<SVGAttributes<SVGSVGElement>, "id">;
-    size: SpinnerSVGSize;
-    density: Density;
-}
-export declare const SpinnerSVG: ({ id, rest, size, density, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+import type { ComponentPropsWithoutRef } from "react";
+type SpinnerSVGProps = ComponentPropsWithoutRef<"svg">;
+/**
+ * Draws the spinner as two overlapping circles. Each circle is half-stroked
+ * (`stroke-dasharray="50 50"` against a normalised `pathLength` of 100) and
+ * rotated via `stroke-dashoffset`: the first draws the top half, the second
+ * draws the left half with a fading gradient. Radius and stroke width come
+ * from CSS custom properties set by the parent `.saltSpinner-*` size class.
+ */
+export declare const SpinnerSVG: ({ id, ...rest }: SpinnerSVGProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "@salt-ds/styles": "0.3.0",
     "@salt-ds/window": "0.1.1",
     "clsx": "^2.0.0",
+    "compute-scroll-into-view": "^3.0.0",
     "dom-accessibility-api": "^0.7.1",
     "tabbable": "^6.0.0",
     "use-sync-external-store": "^1.5.0"