@salt-ds/core 1.71.0 → 1.73.0

package/dist-es/tabs/internal/overflow/useOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.js","sources":["../src/tabs/internal/overflow/useOverflow.ts"],"sourcesContent":["import {\n  type MutableRefObject,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { ownerWindow, useIsomorphicLayoutEffect } from \"../../../utils\";\nimport type { RenderedTab } from \"../contexts/TabsContext\";\nimport { isHTMLElement } from \"../utils/domUtils\";\nimport {\n  calculateVisibleCount,\n  MIN_TRUSTED_TAB_WIDTH,\n  partitionVisibleValues,\n} from \"./overflowMath\";\nimport {\n  getGapValue,\n  getMeasuredWidth,\n  seedWidthMap,\n  updateWidthMap,\n} from \"./widthMeasurement\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement>;\n  selected?: string;\n  tabs: RenderedTab[];\n  overflowButton: RefObject<HTMLButtonElement>;\n  menuOpen: boolean;\n}\n\nfunction getTabWidth(tab: RenderedTab) {\n  const width = tab.width || getMeasuredWidth(tab.root);\n  return width > MIN_TRUSTED_TAB_WIDTH ? width : null;\n}\n\nfunction getAvailableWidth(element: HTMLElement) {\n  const parent = element.parentElement;\n  if (!parent) {\n    return getMeasuredWidth(element);\n  }\n\n  const parentWidth = getMeasuredWidth(parent);\n  const parentStyles = ownerWindow(parent).getComputedStyle(parent);\n  const parentGap = getGapValue(parentStyles);\n  const siblings = Array.from(parent.children).filter(\n    (child): child is HTMLElement => {\n      if (!isHTMLElement(child) || child === element) {\n        return false;\n      }\n\n      return ownerWindow(child).getComputedStyle(child).display !== \"none\";\n    },\n  );\n\n  const siblingWidth = siblings.reduce((width, sibling) => {\n    return width + getMeasuredWidth(sibling);\n  }, 0);\n  const gapCount = siblings.length > 0 ? siblings.length : 0;\n  const availableWidth = Math.max(\n    0,\n    parentWidth - siblingWidth - gapCount * parentGap,\n  );\n  return availableWidth;\n}\n\nfunction isSelectedValueHidden(\n  selected: string | undefined,\n  hiddenValues: string[],\n) {\n  return selected !== undefined && hiddenValues.includes(selected);\n}\n\nfunction getPinnedSelectionValue(\n  selected: string | undefined,\n  selectedIsHidden: boolean,\n  pinnedSelectionRef: MutableRefObject<string | undefined>,\n) {\n  return selectedIsHidden ? selected : pinnedSelectionRef.current;\n}\n\nexport function useOverflow({\n  container,\n  overflowButton,\n  tabs,\n  selected,\n  menuOpen,\n}: UseOverflowProps) {\n  const orderedValues = useMemo(() => tabs.map((tab) => tab.value), [tabs]);\n  const measurementInputKey = useMemo(() => {\n    return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join(\"\\0\");\n  }, [tabs]);\n  const [visibleCount, setVisibleCount] = useState(0);\n  const [isMeasuring, setIsMeasuring] = useState(true);\n  const [measureRetryVersion, setMeasureRetryVersion] = useState(0);\n  const pinnedSelectionRef = useRef(selected);\n  const previousOverflowButtonWidthRef = useRef(0);\n  const previousMeasurementInputKeyRef = useRef(measurementInputKey);\n  const previousMenuOpenRef = useRef(menuOpen);\n  const measureRetryFrameRef = useRef<number | null>(null);\n  const measureRetryCountRef = useRef(0);\n  const baseHiddenValues = orderedValues.slice(visibleCount);\n  const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);\n  const pinnedValue = getPinnedSelectionValue(\n    selected,\n    selectedIsHidden,\n    pinnedSelectionRef,\n  );\n  const getCurrentPinnedValue = useCallback(() => {\n    return getPinnedSelectionValue(\n      selected,\n      selectedIsHidden,\n      pinnedSelectionRef,\n    );\n  }, [selected, selectedIsHidden]);\n  const markMeasurementStale = useCallback(() => {\n    setIsMeasuring(true);\n  }, []);\n\n  const measureVisibleCount = useCallback(\n    (pinnedValue?: string) => {\n      const element = container.current;\n      if (!element) {\n        return null;\n      }\n\n      const maxWidth = getAvailableWidth(element);\n      const styles = ownerWindow(element).getComputedStyle(element);\n      const gap = getGapValue(styles);\n      const overflowWidth = overflowButton.current\n        ? overflowButton.current.offsetWidth + gap\n        : 0;\n      const measuredTabs = tabs.map((tab) => ({\n        value: tab.value,\n        width: getTabWidth(tab),\n      }));\n\n      return calculateVisibleCount({\n        gap,\n        maxWidth,\n        overflowWidth,\n        pinnedValue,\n        tabs: measuredTabs,\n      });\n    },\n    [container, overflowButton, tabs],\n  );\n  const clearMeasureRetry = useCallback(() => {\n    const element = container.current;\n    const frame = measureRetryFrameRef.current;\n\n    if (element && frame != null) {\n      ownerWindow(element).cancelAnimationFrame(frame);\n    }\n\n    measureRetryFrameRef.current = null;\n    measureRetryCountRef.current = 0;\n  }, [container]);\n\n  useEffect(() => {\n    return clearMeasureRetry;\n  }, [clearMeasureRetry]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (selected !== undefined && selectedIsHidden) {\n      pinnedSelectionRef.current = selected;\n      const nextVisibleCount = measureVisibleCount(selected);\n      if (nextVisibleCount == null) {\n        markMeasurementStale();\n        return;\n      }\n      if (nextVisibleCount !== visibleCount) {\n        setVisibleCount(nextVisibleCount);\n      }\n      if (isMeasuring) {\n        setIsMeasuring(false);\n      }\n    }\n  }, [\n    isMeasuring,\n    markMeasurementStale,\n    measureVisibleCount,\n    selected,\n    selectedIsHidden,\n    visibleCount,\n  ]);\n\n  useEffect(() => {\n    const element = container.current;\n    if (!element || menuOpen || isMeasuring) {\n      return;\n    }\n\n    const observedElements = [element];\n    const parent = element.parentElement;\n    if (parent) {\n      observedElements.push(parent);\n      for (const child of Array.from(parent.children)) {\n        if (isHTMLElement(child) && child !== element) {\n          observedElements.push(child);\n        }\n      }\n    }\n\n    const widths = seedWidthMap(observedElements);\n    const resizeObserverCtor = ownerWindow(element).ResizeObserver;\n    if (!resizeObserverCtor) {\n      return;\n    }\n\n    const resizeObserver = new resizeObserverCtor(\n      (entries: ResizeObserverEntry[]) => {\n        for (const entry of entries) {\n          if (!isHTMLElement(entry.target)) {\n            continue;\n          }\n\n          const nextWidth = entry.contentRect.width;\n          if (updateWidthMap(widths, entry.target, nextWidth)) {\n            const nextVisibleCount = measureVisibleCount(\n              getCurrentPinnedValue(),\n            );\n\n            if (nextVisibleCount != null && nextVisibleCount === visibleCount) {\n              continue;\n            }\n\n            markMeasurementStale();\n            return;\n          }\n        }\n      },\n    );\n\n    for (const observedElement of observedElements) {\n      resizeObserver.observe(observedElement);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [\n    container,\n    getCurrentPinnedValue,\n    isMeasuring,\n    markMeasurementStale,\n    measureVisibleCount,\n    menuOpen,\n    visibleCount,\n  ]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (previousMenuOpenRef.current && !menuOpen) {\n      markMeasurementStale();\n    }\n\n    previousMenuOpenRef.current = menuOpen;\n  }, [markMeasurementStale, menuOpen]);\n\n  useIsomorphicLayoutEffect(() => {\n    const nextOverflowButtonWidth = overflowButton.current?.offsetWidth ?? 0;\n    if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {\n      return;\n    }\n\n    previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;\n    if (visibleCount < tabs.length) {\n      markMeasurementStale();\n    }\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (previousMeasurementInputKeyRef.current !== measurementInputKey) {\n      previousMeasurementInputKeyRef.current = measurementInputKey;\n      markMeasurementStale();\n    }\n  }, [markMeasurementStale, measurementInputKey]);\n\n  useIsomorphicLayoutEffect(() => {\n    // A content-only tab width update can briefly leave a tab without a\n    // trustworthy measured width after it moves through the portal slots.\n    // Retry on the next frame instead of leaving overflow stuck measuring.\n    void measureRetryVersion;\n\n    if (!isMeasuring || menuOpen) {\n      return;\n    }\n\n    const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());\n\n    if (nextVisibleCount == null) {\n      if (measureRetryFrameRef.current != null) {\n        return;\n      }\n\n      const element = container.current;\n      if (!element || getMeasuredWidth(element) <= MIN_TRUSTED_TAB_WIDTH) {\n        measureRetryCountRef.current = 0;\n        return;\n      }\n\n      if (measureRetryCountRef.current >= 5) {\n        return;\n      }\n\n      measureRetryCountRef.current += 1;\n      measureRetryFrameRef.current = ownerWindow(element).requestAnimationFrame(\n        () => {\n          measureRetryFrameRef.current = null;\n          setMeasureRetryVersion((currentVersion) => currentVersion + 1);\n        },\n      );\n      return;\n    }\n\n    clearMeasureRetry();\n\n    setVisibleCount(nextVisibleCount);\n    setIsMeasuring(false);\n  }, [\n    clearMeasureRetry,\n    container.current,\n    getCurrentPinnedValue,\n    isMeasuring,\n    measureRetryVersion,\n    measureVisibleCount,\n    menuOpen,\n  ]);\n\n  const { visibleValues, hiddenValues } = partitionVisibleValues(\n    orderedValues,\n    visibleCount,\n    pinnedValue,\n  );\n\n  return [visibleValues, hiddenValues, isMeasuring] as const;\n}\n"],"names":["pinnedValue"],"mappings":"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"}
+{"version":3,"file":"useOverflow.js","sources":["../src/tabs/internal/overflow/useOverflow.ts"],"sourcesContent":["import {\n  type MutableRefObject,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { ownerWindow, useIsomorphicLayoutEffect } from \"../../../utils\";\nimport type { RenderedTab } from \"../contexts/TabsContext\";\nimport { isHTMLElement } from \"../utils/domUtils\";\nimport {\n  calculateVisibleCount,\n  MIN_TRUSTED_TAB_WIDTH,\n  partitionVisibleValues,\n} from \"./overflowMath\";\nimport {\n  getGapValue,\n  getMeasuredWidth,\n  seedWidthMap,\n  updateWidthMap,\n} from \"./widthMeasurement\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement | null>;\n  selected?: string;\n  tabs: RenderedTab[];\n  overflowButton: RefObject<HTMLButtonElement | null>;\n  menuOpen: boolean;\n}\n\nfunction getTabWidth(tab: RenderedTab) {\n  const width = tab.width || getMeasuredWidth(tab.root);\n  return width > MIN_TRUSTED_TAB_WIDTH ? width : null;\n}\n\nfunction getAvailableWidth(element: HTMLElement) {\n  const parent = element.parentElement;\n  if (!parent) {\n    return getMeasuredWidth(element);\n  }\n\n  const parentWidth = getMeasuredWidth(parent);\n  const parentStyles = ownerWindow(parent).getComputedStyle(parent);\n  const parentGap = getGapValue(parentStyles);\n  const siblings = Array.from(parent.children).filter(\n    (child): child is HTMLElement => {\n      if (!isHTMLElement(child) || child === element) {\n        return false;\n      }\n\n      return ownerWindow(child).getComputedStyle(child).display !== \"none\";\n    },\n  );\n\n  const siblingWidth = siblings.reduce((width, sibling) => {\n    return width + getMeasuredWidth(sibling);\n  }, 0);\n  const gapCount = siblings.length > 0 ? siblings.length : 0;\n  const availableWidth = Math.max(\n    0,\n    parentWidth - siblingWidth - gapCount * parentGap,\n  );\n  return availableWidth;\n}\n\nfunction isSelectedValueHidden(\n  selected: string | undefined,\n  hiddenValues: string[],\n) {\n  return selected !== undefined && hiddenValues.includes(selected);\n}\n\nfunction getPinnedSelectionValue(\n  selected: string | undefined,\n  selectedIsHidden: boolean,\n  pinnedSelectionRef: MutableRefObject<string | undefined>,\n) {\n  return selectedIsHidden ? selected : pinnedSelectionRef.current;\n}\n\nexport function useOverflow({\n  container,\n  overflowButton,\n  tabs,\n  selected,\n  menuOpen,\n}: UseOverflowProps) {\n  const orderedValues = useMemo(() => tabs.map((tab) => tab.value), [tabs]);\n  const measurementInputKey = useMemo(() => {\n    return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join(\"\\0\");\n  }, [tabs]);\n  const [visibleCount, setVisibleCount] = useState(0);\n  const [isMeasuring, setIsMeasuring] = useState(true);\n  const [measureRetryVersion, setMeasureRetryVersion] = useState(0);\n  const pinnedSelectionRef = useRef(selected);\n  const previousOverflowButtonWidthRef = useRef(0);\n  const previousMeasurementInputKeyRef = useRef(measurementInputKey);\n  const previousMenuOpenRef = useRef(menuOpen);\n  const measureRetryFrameRef = useRef<number | null>(null);\n  const measureRetryCountRef = useRef(0);\n  const baseHiddenValues = orderedValues.slice(visibleCount);\n  const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);\n  const pinnedValue = getPinnedSelectionValue(\n    selected,\n    selectedIsHidden,\n    pinnedSelectionRef,\n  );\n  const getCurrentPinnedValue = useCallback(() => {\n    return getPinnedSelectionValue(\n      selected,\n      selectedIsHidden,\n      pinnedSelectionRef,\n    );\n  }, [selected, selectedIsHidden]);\n  const markMeasurementStale = useCallback(() => {\n    setIsMeasuring(true);\n  }, []);\n\n  const measureVisibleCount = useCallback(\n    (pinnedValue?: string) => {\n      const element = container.current;\n      if (!element) {\n        return null;\n      }\n\n      const maxWidth = getAvailableWidth(element);\n      const styles = ownerWindow(element).getComputedStyle(element);\n      const gap = getGapValue(styles);\n      const overflowWidth = overflowButton.current\n        ? overflowButton.current.offsetWidth + gap\n        : 0;\n      const measuredTabs = tabs.map((tab) => ({\n        value: tab.value,\n        width: getTabWidth(tab),\n      }));\n\n      return calculateVisibleCount({\n        gap,\n        maxWidth,\n        overflowWidth,\n        pinnedValue,\n        tabs: measuredTabs,\n      });\n    },\n    [container, overflowButton, tabs],\n  );\n  const clearMeasureRetry = useCallback(() => {\n    const element = container.current;\n    const frame = measureRetryFrameRef.current;\n\n    if (element && frame != null) {\n      ownerWindow(element).cancelAnimationFrame(frame);\n    }\n\n    measureRetryFrameRef.current = null;\n    measureRetryCountRef.current = 0;\n  }, [container]);\n\n  useEffect(() => {\n    return clearMeasureRetry;\n  }, [clearMeasureRetry]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (selected !== undefined && selectedIsHidden) {\n      pinnedSelectionRef.current = selected;\n      const nextVisibleCount = measureVisibleCount(selected);\n      if (nextVisibleCount == null) {\n        markMeasurementStale();\n        return;\n      }\n      if (nextVisibleCount !== visibleCount) {\n        setVisibleCount(nextVisibleCount);\n      }\n      if (isMeasuring) {\n        setIsMeasuring(false);\n      }\n    }\n  }, [\n    isMeasuring,\n    markMeasurementStale,\n    measureVisibleCount,\n    selected,\n    selectedIsHidden,\n    visibleCount,\n  ]);\n\n  useEffect(() => {\n    const element = container.current;\n    if (!element || menuOpen || isMeasuring) {\n      return;\n    }\n\n    const observedElements = [element];\n    const parent = element.parentElement;\n    if (parent) {\n      observedElements.push(parent);\n      for (const child of Array.from(parent.children)) {\n        if (isHTMLElement(child) && child !== element) {\n          observedElements.push(child);\n        }\n      }\n    }\n\n    const widths = seedWidthMap(observedElements);\n    const resizeObserverCtor = ownerWindow(element).ResizeObserver;\n    if (!resizeObserverCtor) {\n      return;\n    }\n\n    const resizeObserver = new resizeObserverCtor(\n      (entries: ResizeObserverEntry[]) => {\n        for (const entry of entries) {\n          if (!isHTMLElement(entry.target)) {\n            continue;\n          }\n\n          const nextWidth = entry.contentRect.width;\n          if (updateWidthMap(widths, entry.target, nextWidth)) {\n            const nextVisibleCount = measureVisibleCount(\n              getCurrentPinnedValue(),\n            );\n\n            if (nextVisibleCount != null && nextVisibleCount === visibleCount) {\n              continue;\n            }\n\n            markMeasurementStale();\n            return;\n          }\n        }\n      },\n    );\n\n    for (const observedElement of observedElements) {\n      resizeObserver.observe(observedElement);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [\n    container,\n    getCurrentPinnedValue,\n    isMeasuring,\n    markMeasurementStale,\n    measureVisibleCount,\n    menuOpen,\n    visibleCount,\n  ]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (previousMenuOpenRef.current && !menuOpen) {\n      markMeasurementStale();\n    }\n\n    previousMenuOpenRef.current = menuOpen;\n  }, [markMeasurementStale, menuOpen]);\n\n  useIsomorphicLayoutEffect(() => {\n    const nextOverflowButtonWidth = overflowButton.current?.offsetWidth ?? 0;\n    if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {\n      return;\n    }\n\n    previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;\n    if (visibleCount < tabs.length) {\n      markMeasurementStale();\n    }\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (previousMeasurementInputKeyRef.current !== measurementInputKey) {\n      previousMeasurementInputKeyRef.current = measurementInputKey;\n      markMeasurementStale();\n    }\n  }, [markMeasurementStale, measurementInputKey]);\n\n  useIsomorphicLayoutEffect(() => {\n    // A content-only tab width update can briefly leave a tab without a\n    // trustworthy measured width after it moves through the portal slots.\n    // Retry on the next frame instead of leaving overflow stuck measuring.\n    void measureRetryVersion;\n\n    if (!isMeasuring || menuOpen) {\n      return;\n    }\n\n    const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());\n\n    if (nextVisibleCount == null) {\n      if (measureRetryFrameRef.current != null) {\n        return;\n      }\n\n      const element = container.current;\n      if (!element || getMeasuredWidth(element) <= MIN_TRUSTED_TAB_WIDTH) {\n        measureRetryCountRef.current = 0;\n        return;\n      }\n\n      if (measureRetryCountRef.current >= 5) {\n        return;\n      }\n\n      measureRetryCountRef.current += 1;\n      measureRetryFrameRef.current = ownerWindow(element).requestAnimationFrame(\n        () => {\n          measureRetryFrameRef.current = null;\n          setMeasureRetryVersion((currentVersion) => currentVersion + 1);\n        },\n      );\n      return;\n    }\n\n    clearMeasureRetry();\n\n    setVisibleCount(nextVisibleCount);\n    setIsMeasuring(false);\n  }, [\n    clearMeasureRetry,\n    container.current,\n    getCurrentPinnedValue,\n    isMeasuring,\n    measureRetryVersion,\n    measureVisibleCount,\n    menuOpen,\n  ]);\n\n  const { visibleValues, hiddenValues } = partitionVisibleValues(\n    orderedValues,\n    visibleCount,\n    pinnedValue,\n  );\n\n  return [visibleValues, hiddenValues, isMeasuring] as const;\n}\n"],"names":["pinnedValue"],"mappings":"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"}

package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRenderedTabWidth.js","sources":["../src/tabs/internal/overflow/useRenderedTabWidth.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport type { TabsContextValue, TabsRenderMode } from \"../contexts/TabsContext\";\nimport { getIntrinsicMeasuredWidth } from \"./widthMeasurement\";\n\nconst MIN_TRUSTED_RENDERED_TAB_WIDTH = 0.5;\n\ninterface UseRenderedTabWidthProps {\n  hostElement: HTMLDivElement | null;\n  renderMode: TabsRenderMode;\n  tabRootRef: RefObject<HTMLDivElement>;\n  targetWindow: Window | null | undefined;\n  updateRenderedTab: TabsContextValue[\"updateRenderedTab\"];\n  value: string;\n}\n\nfunction isSecondaryMeasurementContext(element: HTMLElement) {\n  return (\n    element.closest(\".saltTabOverflowList-list\") ||\n    element.closest(\".saltTabList-measureContainer\")\n  );\n}\n\nexport function useRenderedTabWidth({\n  hostElement,\n  renderMode,\n  tabRootRef,\n  targetWindow,\n  updateRenderedTab,\n  value,\n}: UseRenderedTabWidthProps) {\n  useEffect(() => {\n    if (!hostElement) {\n      return;\n    }\n\n    const element = tabRootRef.current;\n    const resizeObserverCtor = (\n      targetWindow as\n        | (Window & { ResizeObserver?: typeof ResizeObserver })\n        | undefined\n    )?.ResizeObserver;\n    const mutationObserverCtor = (\n      targetWindow as\n        | (Window & { MutationObserver?: typeof MutationObserver })\n        | undefined\n    )?.MutationObserver;\n    if (!element || !resizeObserverCtor) {\n      return;\n    }\n\n    const updateWidth = (allowSecondaryMeasurementContext = false) => {\n      if (!element.isConnected) {\n        return;\n      }\n\n      // Preserve the strip width while a tab is rendered in the overflow menu.\n      // Overflow items stretch to the menu width, and hidden measurement tabs\n      // can collapse to a different intrinsic size. Neither width is suitable\n      // for deciding whether the tab fits back in the main strip once the tab\n      // is already established. A one-time seeded width is still useful for\n      // newly mounted tabs before they have ever appeared in the main strip.\n      if (\n        !allowSecondaryMeasurementContext &&\n        isSecondaryMeasurementContext(element)\n      ) {\n        return;\n      }\n\n      const width = getIntrinsicMeasuredWidth(element);\n      if (width <= MIN_TRUSTED_RENDERED_TAB_WIDTH) {\n        return;\n      }\n\n      updateRenderedTab(value, {\n        width,\n      });\n    };\n\n    let animationFrameId: number | null = null;\n    const scheduleWidthUpdate = (allowSecondaryMeasurementContext = false) => {\n      if (!targetWindow?.requestAnimationFrame) {\n        updateWidth(allowSecondaryMeasurementContext);\n        return;\n      }\n\n      if (animationFrameId != null) {\n        targetWindow.cancelAnimationFrame(animationFrameId);\n      }\n\n      animationFrameId = targetWindow.requestAnimationFrame(() => {\n        animationFrameId = null;\n        updateWidth(allowSecondaryMeasurementContext);\n      });\n    };\n\n    if (renderMode === \"portal\") {\n      scheduleWidthUpdate(true);\n    } else {\n      updateWidth(true);\n    }\n\n    const resizeObserver = new resizeObserverCtor(() => {\n      updateWidth();\n    });\n\n    resizeObserver.observe(element);\n    const mutationObserver = mutationObserverCtor\n      ? new mutationObserverCtor(() => {\n          scheduleWidthUpdate();\n        })\n      : null;\n\n    mutationObserver?.observe(element, {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n\n    return () => {\n      if (animationFrameId != null && targetWindow) {\n        targetWindow.cancelAnimationFrame(animationFrameId);\n      }\n      mutationObserver?.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [\n    hostElement,\n    renderMode,\n    tabRootRef,\n    targetWindow,\n    updateRenderedTab,\n    value,\n  ]);\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,8BAAA,GAAiC,GAAA;AAWvC,SAAS,8BAA8B,OAAA,EAAsB;AAC3D,EAAA,OACE,QAAQ,OAAA,CAAQ,2BAA2B,CAAA,IAC3C,OAAA,CAAQ,QAAQ,+BAA+B,CAAA;AAEnD;AAEO,SAAS,mBAAA,CAAoB;AAAA,EAClC,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAA,EAA6B;AAC3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,WAAA,EAAa;AAChB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAC3B,IAAA,MAAM,qBACJ,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAGC,cAAA;AACH,IAAA,MAAM,uBACJ,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAGC,gBAAA;AACH,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,kBAAA,EAAoB;AACnC,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,gCAAA,GAAmC,KAAA,KAAU;AAChE,MAAA,IAAI,CAAC,QAAQ,WAAA,EAAa;AACxB,QAAA;AAAA,MACF;AAQA,MAAA,IACE,CAAC,gCAAA,IACD,6BAAA,CAA8B,OAAO,CAAA,EACrC;AACA,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,KAAA,GAAQ,0BAA0B,OAAO,CAAA;AAC/C,MAAA,IAAI,SAAS,8BAAA,EAAgC;AAC3C,QAAA;AAAA,MACF;AAEA,MAAA,iBAAA,CAAkB,KAAA,EAAO;AAAA,QACvB;AAAA,OACD,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,IAAI,gBAAA,GAAkC,IAAA;AACtC,IAAA,MAAM,mBAAA,GAAsB,CAAC,gCAAA,GAAmC,KAAA,KAAU;AACxE,MAAA,IAAI,EAAC,6CAAc,qBAAA,CAAA,EAAuB;AACxC,QAAA,WAAA,CAAY,gCAAgC,CAAA;AAC5C,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,oBAAoB,IAAA,EAAM;AAC5B,QAAA,YAAA,CAAa,qBAAqB,gBAAgB,CAAA;AAAA,MACpD;AAEA,MAAA,gBAAA,GAAmB,YAAA,CAAa,sBAAsB,MAAM;AAC1D,QAAA,gBAAA,GAAmB,IAAA;AACnB,QAAA,WAAA,CAAY,gCAAgC,CAAA;AAAA,MAC9C,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,IAAI,eAAe,QAAA,EAAU;AAC3B,MAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,IAC1B,CAAA,MAAO;AACL,MAAA,WAAA,CAAY,IAAI,CAAA;AAAA,IAClB;AAEA,IAAA,MAAM,cAAA,GAAiB,IAAI,kBAAA,CAAmB,MAAM;AAClD,MAAA,WAAA,EAAY;AAAA,IACd,CAAC,CAAA;AAED,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAC9B,IAAA,MAAM,gBAAA,GAAmB,oBAAA,GACrB,IAAI,oBAAA,CAAqB,MAAM;AAC7B,MAAA,mBAAA,EAAoB;AAAA,IACtB,CAAC,CAAA,GACD,IAAA;AAEJ,IAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,QAAQ,OAAA,EAAS;AAAA,MACjC,SAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAe,IAAA;AAAA,MACf,OAAA,EAAS;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAA,IAAoB,QAAQ,YAAA,EAAc;AAC5C,QAAA,YAAA,CAAa,qBAAqB,gBAAgB,CAAA;AAAA,MACpD;AACA,MAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,UAAA,EAAA;AAClB,MAAA,cAAA,CAAe,UAAA,EAAW;AAAA,IAC5B,CAAA;AAAA,EACF,CAAA,EAAG;AAAA,IACD,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"useRenderedTabWidth.js","sources":["../src/tabs/internal/overflow/useRenderedTabWidth.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport type { TabsContextValue, TabsRenderMode } from \"../contexts/TabsContext\";\nimport { getIntrinsicMeasuredWidth } from \"./widthMeasurement\";\n\nconst MIN_TRUSTED_RENDERED_TAB_WIDTH = 0.5;\n\ninterface UseRenderedTabWidthProps {\n  hostElement: HTMLDivElement | null;\n  renderMode: TabsRenderMode;\n  tabRootRef: RefObject<HTMLDivElement | null>;\n  targetWindow: Window | null | undefined;\n  updateRenderedTab: TabsContextValue[\"updateRenderedTab\"];\n  value: string;\n}\n\nfunction isSecondaryMeasurementContext(element: HTMLElement) {\n  return (\n    element.closest(\".saltTabOverflowList-list\") ||\n    element.closest(\".saltTabList-measureContainer\")\n  );\n}\n\nexport function useRenderedTabWidth({\n  hostElement,\n  renderMode,\n  tabRootRef,\n  targetWindow,\n  updateRenderedTab,\n  value,\n}: UseRenderedTabWidthProps) {\n  useEffect(() => {\n    if (!hostElement) {\n      return;\n    }\n\n    const element = tabRootRef.current;\n    const resizeObserverCtor = (\n      targetWindow as\n        | (Window & { ResizeObserver?: typeof ResizeObserver })\n        | undefined\n    )?.ResizeObserver;\n    const mutationObserverCtor = (\n      targetWindow as\n        | (Window & { MutationObserver?: typeof MutationObserver })\n        | undefined\n    )?.MutationObserver;\n    if (!element || !resizeObserverCtor) {\n      return;\n    }\n\n    const updateWidth = (allowSecondaryMeasurementContext = false) => {\n      if (!element.isConnected) {\n        return;\n      }\n\n      // Preserve the strip width while a tab is rendered in the overflow menu.\n      // Overflow items stretch to the menu width, and hidden measurement tabs\n      // can collapse to a different intrinsic size. Neither width is suitable\n      // for deciding whether the tab fits back in the main strip once the tab\n      // is already established. A one-time seeded width is still useful for\n      // newly mounted tabs before they have ever appeared in the main strip.\n      if (\n        !allowSecondaryMeasurementContext &&\n        isSecondaryMeasurementContext(element)\n      ) {\n        return;\n      }\n\n      const width = getIntrinsicMeasuredWidth(element);\n      if (width <= MIN_TRUSTED_RENDERED_TAB_WIDTH) {\n        return;\n      }\n\n      updateRenderedTab(value, {\n        width,\n      });\n    };\n\n    let animationFrameId: number | null = null;\n    const scheduleWidthUpdate = (allowSecondaryMeasurementContext = false) => {\n      if (!targetWindow?.requestAnimationFrame) {\n        updateWidth(allowSecondaryMeasurementContext);\n        return;\n      }\n\n      if (animationFrameId != null) {\n        targetWindow.cancelAnimationFrame(animationFrameId);\n      }\n\n      animationFrameId = targetWindow.requestAnimationFrame(() => {\n        animationFrameId = null;\n        updateWidth(allowSecondaryMeasurementContext);\n      });\n    };\n\n    if (renderMode === \"portal\") {\n      scheduleWidthUpdate(true);\n    } else {\n      updateWidth(true);\n    }\n\n    const resizeObserver = new resizeObserverCtor(() => {\n      updateWidth();\n    });\n\n    resizeObserver.observe(element);\n    const mutationObserver = mutationObserverCtor\n      ? new mutationObserverCtor(() => {\n          scheduleWidthUpdate();\n        })\n      : null;\n\n    mutationObserver?.observe(element, {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n\n    return () => {\n      if (animationFrameId != null && targetWindow) {\n        targetWindow.cancelAnimationFrame(animationFrameId);\n      }\n      mutationObserver?.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [\n    hostElement,\n    renderMode,\n    tabRootRef,\n    targetWindow,\n    updateRenderedTab,\n    value,\n  ]);\n}\n"],"names":[],"mappings":"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"}

package/dist-es/tag/Tag.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--salt-content-bold-foreground);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-background);\n  --tag-primary-foreground: var(--salt-category-1-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-background);\n  --tag-primary-foreground: var(--salt-category-2-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-background);\n  --tag-primary-foreground: var(--salt-category-3-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-background);\n  --tag-primary-foreground: var(--salt-category-4-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-background);\n  --tag-primary-foreground: var(--salt-category-5-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-background);\n  --tag-primary-foreground: var(--salt-category-6-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-background);\n  --tag-primary-foreground: var(--salt-category-7-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-background);\n  --tag-primary-foreground: var(--salt-category-8-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-background);\n  --tag-primary-foreground: var(--salt-category-9-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-background);\n  --tag-primary-foreground: var(--salt-category-10-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-background);\n  --tag-primary-foreground: var(--salt-category-11-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-background);\n  --tag-primary-foreground: var(--salt-category-12-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-background);\n  --tag-primary-foreground: var(--salt-category-13-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-background);\n  --tag-primary-foreground: var(--salt-category-14-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-background);\n  --tag-primary-foreground: var(--salt-category-15-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-background);\n  --tag-primary-foreground: var(--salt-category-16-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-background);\n  --tag-primary-foreground: var(--salt-category-17-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-background);\n  --tag-primary-foreground: var(--salt-category-18-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-background);\n  --tag-primary-foreground: var(--salt-category-19-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-background);\n  --tag-primary-foreground: var(--salt-category-20-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n}\n";
+var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--salt-content-bold-foreground);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-background);\n  --tag-primary-foreground: var(--salt-category-1-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-background);\n  --tag-primary-foreground: var(--salt-category-2-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-background);\n  --tag-primary-foreground: var(--salt-category-3-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-background);\n  --tag-primary-foreground: var(--salt-category-4-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-background);\n  --tag-primary-foreground: var(--salt-category-5-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-background);\n  --tag-primary-foreground: var(--salt-category-6-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-background);\n  --tag-primary-foreground: var(--salt-category-7-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-background);\n  --tag-primary-foreground: var(--salt-category-8-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-background);\n  --tag-primary-foreground: var(--salt-category-9-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-background);\n  --tag-primary-foreground: var(--salt-category-10-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-background);\n  --tag-primary-foreground: var(--salt-category-11-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-background);\n  --tag-primary-foreground: var(--salt-category-12-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-background);\n  --tag-primary-foreground: var(--salt-category-13-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-background);\n  --tag-primary-foreground: var(--salt-category-14-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-background);\n  --tag-primary-foreground: var(--salt-category-15-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-background);\n  --tag-primary-foreground: var(--salt-category-16-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-background);\n  --tag-primary-foreground: var(--salt-category-17-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-background);\n  --tag-primary-foreground: var(--salt-category-18-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-background);\n  --tag-primary-foreground: var(--salt-category-19-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-background);\n  --tag-primary-foreground: var(--salt-category-20-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Tag.css.js.map

package/dist-es/text/Code.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { Text } from './Text.js';
 
 const Code = forwardRef(
-  function TextAction({ children, ...rest }, ref) {
+  function Code2({ children, ...rest }, ref) {
     return /* @__PURE__ */ jsx(Text, { as: "code", ref, ...rest, children });
   }
 );

package/dist-es/text/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n  function TextAction({ children, ...rest }, ref) {\n    return (\n      <Text as=\"code\" ref={ref} {...rest}>\n        {children}\n      </Text>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;AAGO,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,SAAS,UAAA,CAAW,EAAE,UAAU,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC9C,IAAA,2BACG,IAAA,EAAA,EAAK,EAAA,EAAG,QAAO,GAAA,EAAW,GAAG,MAC3B,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n  function Code({ children, ...rest }, ref) {\n    return (\n      <Text as=\"code\" ref={ref} {...rest}>\n        {children}\n      </Text>\n    );\n  },\n);\n"],"names":["Code"],"mappings":";;;;AAGO,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,SAASA,KAAAA,CAAK,EAAE,UAAU,GAAG,IAAA,IAAQ,GAAA,EAAK;AACxC,IAAA,2BACG,IAAA,EAAA,EAAK,EAAA,EAAG,QAAO,GAAA,EAAW,GAAG,MAC3B,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/text/Editorial.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Text } from './Text.js';
+
+const Editorial1 = forwardRef(function Editorial12({ children, styleAs = "editorial1", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, { as: "span", styleAs, ref, ...rest, children });
+});
+const Editorial2 = forwardRef(function Editorial22({ children, styleAs = "editorial2", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, { as: "span", styleAs, ref, ...rest, children });
+});
+const Editorial3 = forwardRef(function Editorial32({ children, styleAs = "editorial3", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, { as: "span", styleAs, ref, ...rest, children });
+});
+const Editorial4 = forwardRef(function Editorial42({ children, styleAs = "editorial4", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, { as: "span", styleAs, ref, ...rest, children });
+});
+const Editorial5 = forwardRef(function Editorial52({ children, styleAs = "editorial5", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, { as: "span", styleAs, ref, ...rest, children });
+});
+const Editorial6 = forwardRef(function Editorial62({ children, styleAs = "editorial6", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, { as: "span", styleAs, ref, ...rest, children });
+});
+
+export { Editorial1, Editorial2, Editorial3, Editorial4, Editorial5, Editorial6 };
+//# sourceMappingURL=Editorial.js.map

package/dist-es/text/Editorial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editorial.js","sources":["../src/text/Editorial.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Editorial1 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Editorial1({ children, styleAs = \"editorial1\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Editorial2 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Editorial2({ children, styleAs = \"editorial2\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Editorial3 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Editorial3({ children, styleAs = \"editorial3\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Editorial4 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Editorial4({ children, styleAs = \"editorial4\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Editorial5 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Editorial5({ children, styleAs = \"editorial5\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Editorial6 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Editorial6({ children, styleAs = \"editorial6\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n"],"names":["Editorial1","Editorial2","Editorial3","Editorial4","Editorial5","Editorial6"],"mappings":";;;;AAGO,MAAM,UAAA,GAAa,UAAA,CAGxB,SAASA,WAAAA,CAAW,EAAE,QAAA,EAAU,OAAA,GAAU,YAAA,EAAc,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACxE,EAAA,uBACE,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,UAAA,GAAa,UAAA,CAGxB,SAASC,WAAAA,CAAW,EAAE,QAAA,EAAU,OAAA,GAAU,YAAA,EAAc,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACxE,EAAA,uBACE,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,UAAA,GAAa,UAAA,CAGxB,SAASC,WAAAA,CAAW,EAAE,QAAA,EAAU,OAAA,GAAU,YAAA,EAAc,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACxE,EAAA,uBACE,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,UAAA,GAAa,UAAA,CAGxB,SAASC,WAAAA,CAAW,EAAE,QAAA,EAAU,OAAA,GAAU,YAAA,EAAc,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACxE,EAAA,uBACE,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,UAAA,GAAa,UAAA,CAGxB,SAASC,WAAAA,CAAW,EAAE,QAAA,EAAU,OAAA,GAAU,YAAA,EAAc,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACxE,EAAA,uBACE,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,UAAA,GAAa,UAAA,CAGxB,SAASC,WAAAA,CAAW,EAAE,QAAA,EAAU,OAAA,GAAU,YAAA,EAAc,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACxE,EAAA,uBACE,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/text/Eyebrow.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Text } from './Text.js';
+
+const Eyebrow = forwardRef(function Eyebrow2({ children, styleAs = "eyebrow", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, { as: "span", styleAs, ref, ...rest, children });
+});
+
+export { Eyebrow };
+//# sourceMappingURL=Eyebrow.js.map

package/dist-es/text/Eyebrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Eyebrow.js","sources":["../src/text/Eyebrow.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Eyebrow = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Eyebrow({ children, styleAs = \"eyebrow\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n"],"names":["Eyebrow"],"mappings":";;;;AAGO,MAAM,OAAA,GAAU,UAAA,CAGrB,SAASA,QAAAA,CAAQ,EAAE,QAAA,EAAU,OAAA,GAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAClE,EAAA,uBACE,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/text/Text.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltText {\n  --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n  font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n  --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n  --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n  --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n  --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n  font-family: var(--salt-text-notation-fontFamily);\n  font-size: var(--salt-text-notation-fontSize);\n  line-height: var(--salt-text-notation-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n  font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  text-align: var(--salt-text-action-textAlign);\n  font-weight: var(--salt-text-action-fontWeight);\n}\n.saltText-action.saltText strong {\n  font-weight: var(--salt-text-action-fontWeight-strong);\n}\n.saltText-action.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n  font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 1 emphasis strong */\n.saltText-display1.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display1-fontWeight-strong);\n}\n\n/* Display 1 emphasis small */\n.saltText-display1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display1-fontWeight-small);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 2 emphasis strong */\n.saltText-display2.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display2-fontWeight-strong);\n}\n\n/* Display 2 emphasis small */\n.saltText-display2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display2-fontWeight-small);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Display 3 emphasis strong */\n.saltText-display3.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display3-fontWeight-strong);\n}\n\n/* Display 3 emphasis small */\n.saltText-display3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display3-fontWeight-small);\n}\n\n/* Display 4 */\n.saltText-display4.saltText {\n  font-family: var(--salt-text-display4-fontFamily);\n  font-size: var(--salt-text-display4-fontSize);\n  font-weight: var(--salt-text-display4-fontWeight);\n  line-height: var(--salt-text-display4-lineHeight);\n}\n\n/* Display 4 emphasis strong */\n.saltText-display4.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display4-fontWeight-strong);\n}\n\n/* Display 4 emphasis small */\n.saltText-display4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display4-fontWeight-small);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = ".saltText {\n  --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n  font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  --text-fontWeight-bolder: var(--salt-text-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-fontWeight-lighter);\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n  --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n  --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n  --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n  --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-notation-fontSize);\n  line-height: var(--salt-text-notation-lineHeight);\n  font-weight: var(--salt-text-notation-fontWeight);\n  --text-fontWeight-bolder: var(--salt-text-notation-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-notation-fontWeight-lighter);\n}\n\n/* Action */\n.saltText-action.saltText {\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  text-align: var(--salt-text-action-textAlign);\n  font-weight: var(--salt-text-action-fontWeight);\n  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n  font-family: var(--salt-text-code-fontFamily);\n  font-weight: var(--salt-text-code-fontWeight);\n  /* Code has a single weight, so lighter and bolder match the default */\n  --text-fontWeight-bolder: var(--salt-text-code-fontWeight);\n  --text-fontWeight-lighter: var(--salt-text-code-fontWeight);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display1-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display2-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display3-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);\n}\n\n/* Display 4 */\n.saltText-display4.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display4-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display4-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);\n}\n\n/* Editorial 1 */\n.saltText-editorial1.saltText {\n  font-family: var(--salt-text-editorial-fontFamily);\n  font-size: var(--salt-text-editorial1-fontSize);\n  font-style: var(--salt-text-editorial-fontStyle, normal);\n  font-weight: var(--salt-text-editorial-fontWeight);\n  letter-spacing: var(--salt-text-editorial-letterSpacing);\n  line-height: var(--salt-text-editorial1-lineHeight);\n  text-transform: var(--salt-text-editorial-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);\n}\n\n/* Editorial 2 */\n.saltText-editorial2.saltText {\n  font-family: var(--salt-text-editorial-fontFamily);\n  font-size: var(--salt-text-editorial2-fontSize);\n  font-style: var(--salt-text-editorial-fontStyle, normal);\n  font-weight: var(--salt-text-editorial-fontWeight);\n  letter-spacing: var(--salt-text-editorial-letterSpacing);\n  line-height: var(--salt-text-editorial2-lineHeight);\n  text-transform: var(--salt-text-editorial-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);\n}\n\n/* Editorial 3 */\n.saltText-editorial3.saltText {\n  font-family: var(--salt-text-editorial-fontFamily);\n  font-size: var(--salt-text-editorial3-fontSize);\n  font-style: var(--salt-text-editorial-fontStyle, normal);\n  font-weight: var(--salt-text-editorial-fontWeight);\n  letter-spacing: var(--salt-text-editorial-letterSpacing);\n  line-height: var(--salt-text-editorial3-lineHeight);\n  text-transform: var(--salt-text-editorial-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);\n}\n\n/* Editorial 4 */\n.saltText-editorial4.saltText {\n  font-family: var(--salt-text-editorial-fontFamily);\n  font-size: var(--salt-text-editorial4-fontSize);\n  font-style: var(--salt-text-editorial-fontStyle, normal);\n  font-weight: var(--salt-text-editorial-fontWeight);\n  letter-spacing: var(--salt-text-editorial-letterSpacing);\n  line-height: var(--salt-text-editorial4-lineHeight);\n  text-transform: var(--salt-text-editorial-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);\n}\n\n/* Editorial 5 */\n.saltText-editorial5.saltText {\n  font-family: var(--salt-text-editorial-fontFamily);\n  font-size: var(--salt-text-editorial5-fontSize);\n  font-style: var(--salt-text-editorial-fontStyle, normal);\n  font-weight: var(--salt-text-editorial-fontWeight);\n  letter-spacing: var(--salt-text-editorial-letterSpacing);\n  line-height: var(--salt-text-editorial5-lineHeight);\n  text-transform: var(--salt-text-editorial-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);\n}\n\n/* Editorial 6 */\n.saltText-editorial6.saltText {\n  font-family: var(--salt-text-editorial-fontFamily);\n  font-size: var(--salt-text-editorial6-fontSize);\n  font-style: var(--salt-text-editorial-fontStyle, normal);\n  font-weight: var(--salt-text-editorial-fontWeight);\n  letter-spacing: var(--salt-text-editorial-letterSpacing);\n  line-height: var(--salt-text-editorial6-lineHeight);\n  text-transform: var(--salt-text-editorial-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-label-fontWeight);\n  --text-fontWeight-bolder: var(--salt-text-label-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-label-fontWeight-lighter);\n}\n\n/* Label 2 */\n.saltText-label2.saltText {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label2-fontSize);\n  line-height: var(--salt-text-label2-lineHeight);\n  font-weight: var(--salt-text-label-fontWeight);\n  --text-fontWeight-bolder: var(--salt-text-label-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-label-fontWeight-lighter);\n}\n\n/* Body 2 */\n.saltText-body2.saltText {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-body2-fontSize);\n  line-height: var(--salt-text-body2-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n  --text-fontWeight-bolder: var(--salt-text-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-fontWeight-lighter);\n}\n\n/* Eyebrow */\n.saltText-eyebrow.saltText {\n  font-family: var(--salt-text-eyebrow-fontFamily);\n  font-size: var(--salt-text-eyebrow-fontSize);\n  font-style: var(--salt-text-eyebrow-fontStyle, normal);\n  font-weight: var(--salt-text-eyebrow-fontWeight);\n  letter-spacing: var(--salt-text-eyebrow-letterSpacing);\n  line-height: var(--salt-text-eyebrow-lineHeight);\n  text-transform: var(--salt-text-eyebrow-textTransform, none);\n  --text-fontWeight-bolder: var(--salt-text-eyebrow-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-eyebrow-fontWeight-lighter);\n}\n\n/* Inherit the parent's text style, including its bolder and lighter weights */\n.saltText-inheritStyle.saltText {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  --text-fontWeight-bolder: inherit;\n  --text-fontWeight-lighter: inherit;\n}\n\n/* Emphasis strong */\n.saltText strong,\n.saltText b {\n  font-weight: var(--text-fontWeight-bolder, var(--salt-text-fontWeight-bolder));\n}\n\n/* Emphasis small. Deprecated, use the fontWeight prop instead */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--text-fontWeight-lighter, var(--salt-text-fontWeight-lighter));\n}\n\n/* Font weight prop. Must follow the text styles so it overrides their weights */\n.saltText.saltText-bolder {\n  font-weight: var(--text-fontWeight-bolder, var(--salt-text-fontWeight-bolder));\n}\n\n.saltText.saltText-lighter {\n  font-weight: var(--text-fontWeight-lighter, var(--salt-text-fontWeight-lighter));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Text.css.js.map

package/dist-es/text/Text.js

@@ -16,6 +16,7 @@ const Text = forwardRef(function Text2({
   children,
   className,
   disabled = false,
+  fontWeight,
   maxRows,
   style,
   styleAs,
@@ -31,7 +32,7 @@ const Text = forwardRef(function Text2({
   });
   const Component = as ?? "div";
   const textStyles = { "--text-max-rows": maxRows, ...style };
-  const color = variant ?? colorProp ?? "primary";
+  const color = variant ?? colorProp ?? (styleAs === "inherit" ? "inherit" : "primary");
   return /* @__PURE__ */ jsx(
     Component,
     {
@@ -40,7 +41,10 @@ const Text = forwardRef(function Text2({
         {
           [withBaseName("disabled")]: disabled,
           [withBaseName("lineClamp")]: maxRows,
-          [withBaseName(styleAs)]: styleAs,
+          [withBaseName(
+            styleAs === "inherit" ? "inheritStyle" : styleAs
+          )]: styleAs,
+          [withBaseName(fontWeight)]: fontWeight,
           [withBaseName(color)]: color !== "inherit"
         },
         className

package/dist-es/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n} from \"../utils\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"display4\"\n      | \"notation\"\n      | \"action\"\n      | \"code\";\n    /**\n     * Change text color palette\n     * @deprecated since 1.27.1. Use `color` instead.\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled = false,\n    maxRows,\n    style,\n    styleAs,\n    variant,\n    color: colorProp,\n    ...restProps\n  }: TextProps<T>,\n  ref?: ForwardedRef<unknown>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text\",\n    css: textCss,\n    window: targetWindow,\n  });\n\n  const Component = as ?? \"div\";\n\n  const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n  const color = variant ?? colorProp ?? \"primary\";\n\n  return (\n    <Component\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"lineClamp\")]: maxRows,\n          [withBaseName(styleAs as string)]: styleAs,\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      {...restProps}\n      ref={ref as PolymorphicRef<T>}\n      style={textStyles}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["Text","textCss"],"mappings":";;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAErC,MAAM,IAAA,GAAsB,UAAA,CAAW,SAASA,KAAAA,CAGrD;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AAExB,EAAA,MAAM,UAAA,GAAa,EAAE,iBAAA,EAAmB,OAAA,EAAS,GAAG,KAAA,EAAM;AAE1D,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n} from \"../utils\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Adjust the font weight using the theme's weights for the current text style.\n     * This is a visual change only and isn't conveyed to assistive technologies; use `<strong>` or `<em>` to convey importance or stress.\n     */\n    fontWeight?: \"lighter\" | \"bolder\";\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style.\n     * Use `inherit` to inherit the font and color from the parent element.\n     * The `lighter` and `bolder` weights then come from the closest `Text`-based ancestor.\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"label2\"\n      | \"body2\"\n      | \"eyebrow\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"display4\"\n      | \"editorial1\"\n      | \"editorial2\"\n      | \"editorial3\"\n      | \"editorial4\"\n      | \"editorial5\"\n      | \"editorial6\"\n      | \"notation\"\n      | \"action\"\n      | \"code\"\n      | \"inherit\";\n    /**\n     * Change text color palette\n     * @deprecated since 1.27.1. Use `color` instead.\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled = false,\n    fontWeight,\n    maxRows,\n    style,\n    styleAs,\n    variant,\n    color: colorProp,\n    ...restProps\n  }: TextProps<T>,\n  ref?: ForwardedRef<unknown>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text\",\n    css: textCss,\n    window: targetWindow,\n  });\n\n  const Component = as ?? \"div\";\n\n  const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n  const color =\n    variant ?? colorProp ?? (styleAs === \"inherit\" ? \"inherit\" : \"primary\");\n\n  return (\n    <Component\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"lineClamp\")]: maxRows,\n          [withBaseName(\n            styleAs === \"inherit\" ? \"inheritStyle\" : (styleAs as string),\n          )]: styleAs,\n          [withBaseName(fontWeight as string)]: fontWeight,\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      {...restProps}\n      ref={ref as PolymorphicRef<T>}\n      style={textStyles}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["Text","textCss"],"mappings":";;;;;;;;;;;;AA6EA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAErC,MAAM,IAAA,GAAsB,UAAA,CAAW,SAASA,KAAAA,CAGrD;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,UAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AAExB,EAAA,MAAM,UAAA,GAAa,EAAE,iBAAA,EAAmB,OAAA,EAAS,GAAG,KAAA,EAAM;AAE1D,EAAA,MAAM,KAAA,GACJ,OAAA,IAAW,SAAA,KAAc,OAAA,KAAY,YAAY,SAAA,GAAY,SAAA,CAAA;AAE/D,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA;AAAA,YACC,OAAA,KAAY,YAAY,cAAA,GAAkB;AAAA,WAC3C,GAAG,OAAA;AAAA,UACJ,CAAC,YAAA,CAAa,UAAoB,CAAC,GAAG,UAAA;AAAA,UACtC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/toast/Toast.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-bold-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-bold-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Toast.css.js.map

package/dist-es/toggle-button/ToggleButton.js

@@ -7,6 +7,7 @@ import '../toggle-button-group/ToggleButtonGroup.js';
 import { useToggleButtonGroup } from '../toggle-button-group/ToggleButtonGroupContext.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import { useControlled } from '../utils/useControlled.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
@@ -50,6 +51,12 @@ const ToggleButton = forwardRef(
     const appearance = appearanceProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.appearance) || "solid";
     const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
     const readOnly = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.readOnly) || readOnlyProp;
+    const registerButton = toggleButtonGroup == null ? void 0 : toggleButtonGroup.registerButton;
+    useIsomorphicLayoutEffect(() => {
+      if (!disabled && buttonRef.current && registerButton) {
+        return registerButton(value, buttonRef.current);
+      }
+    }, [disabled, registerButton, value]);
     const [selected, setSelected] = useControlled({
       controlled: toggleButtonGroupSelected,
       default: Boolean(defaultSelected),
@@ -60,7 +67,7 @@ const ToggleButton = forwardRef(
       if (disabled || readOnly) {
         return;
       }
-      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event, value);
       setSelected(!selected);
       onChange == null ? void 0 : onChange(event);
       onClick == null ? void 0 : onClick(event);
@@ -88,7 +95,6 @@ const ToggleButton = forwardRef(
       value,
       type: "button",
       disabled,
-      readOnly: readOnlyProp,
       ...rest
     };
     return /* @__PURE__ */ jsx("button", { ref: handleRef, ...toggleButtonProps, children });

package/dist-es/toggle-button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n  useClassNameInjection,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The appearance of the toggle button when `selected` is true.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is in a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Whether the toggle button is selected by default.\n   * This will be disregarded if `selected` is already set.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const { className, props: finalProps } = useClassNameInjection(\n      \"saltToggleButton\",\n      props,\n    );\n    const {\n      appearance: appearanceProp,\n      children,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      defaultSelected,\n      sentiment: sentimentProp,\n      ...rest\n    } = finalProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(defaultSelected),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ToggleButtonProps = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      readOnly: readOnlyProp,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n  useClassNameInjection,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport {\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"onChange\"> {\n  /**\n   * The appearance of the toggle button when `selected` is true.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is in a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Whether the toggle button is selected by default.\n   * This will be disregarded if `selected` is already set.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const { className, props: finalProps } = useClassNameInjection(\n      \"saltToggleButton\",\n      props,\n    );\n    const {\n      appearance: appearanceProp,\n      children,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      defaultSelected,\n      sentiment: sentimentProp,\n      ...rest\n    } = finalProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const registerButton = toggleButtonGroup?.registerButton;\n    useIsomorphicLayoutEffect(() => {\n      if (!disabled && buttonRef.current && registerButton) {\n        return registerButton(value, buttonRef.current);\n      }\n    }, [disabled, registerButton, value]);\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(defaultSelected),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event, value);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ComponentPropsWithoutRef<\"button\"> = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroup.js

@@ -6,6 +6,7 @@ import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import { ownerDocument } from '../utils/ownerDocument.js';
 import { useControlled } from '../utils/useControlled.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
@@ -15,6 +16,19 @@ import css_248z from './ToggleButtonGroup.css.js';
 import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
 
 const withBaseName = makePrefixer("saltToggleButtonGroup");
+function isSameValue(a, b) {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((value, index) => value === b[index]);
+  }
+  return a === b;
+}
+const sortButtons = (buttons) => [...buttons].sort((buttonA, buttonB) => {
+  const position = buttonA.element.compareDocumentPosition(buttonB.element);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+  return 0;
+});
+const buttonsAreEqual = (buttonsA, buttonsB) => buttonsA.length === buttonsB.length && buttonsA.every((button, index) => button === buttonsB[index]);
 const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   const {
     appearance,
@@ -45,11 +59,39 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
     state: "value"
   });
   const [focused, setFocused] = useState(value);
+  const [enabledButtons, setEnabledButtons] = useState([]);
+  const registerButton = useCallback(
+    (buttonValue, element) => {
+      const button = { element, value: buttonValue };
+      setEnabledButtons(
+        (currentButtons) => sortButtons([
+          ...currentButtons.filter(
+            (currentButton) => currentButton.element !== element
+          ),
+          button
+        ])
+      );
+      return () => {
+        setEnabledButtons(
+          (currentButtons) => currentButtons.includes(button) ? currentButtons.filter(
+            (registeredButton) => registeredButton !== button
+          ) : currentButtons
+        );
+      };
+    },
+    []
+  );
+  useIsomorphicLayoutEffect(() => {
+    setEnabledButtons((currentButtons) => {
+      const sortedButtons = sortButtons(currentButtons);
+      return buttonsAreEqual(currentButtons, sortedButtons) ? currentButtons : sortedButtons;
+    });
+  }, [children]);
   const select = useCallback(
-    (event) => {
-      const newValue = event.currentTarget.value;
+    (event, ...values) => {
+      const newValue = values.length === 0 ? event.currentTarget.value : values[0];
       setValue(newValue);
-      if (value !== newValue) {
+      if (!isSameValue(value, newValue)) {
         onChange == null ? void 0 : onChange(event);
       }
     },
@@ -57,7 +99,7 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   );
   const isSelected = useCallback(
     (id) => {
-      return value === id;
+      return isSameValue(value, id);
     },
     [value]
   );
@@ -66,9 +108,18 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   }, []);
   const isFocused = useCallback(
     (id) => {
-      return focused === id || !focused;
+      if (enabledButtons.length === 0) {
+        return focused === id || focused === void 0 || focused === "";
+      }
+      const hasFocusTarget = enabledButtons.some(
+        (button) => isSameValue(button.value, focused)
+      );
+      return isSameValue(
+        hasFocusTarget ? focused : enabledButtons[0].value,
+        id
+      );
     },
-    [focused]
+    [focused, enabledButtons]
   );
   const contextValue = useMemo(
     () => ({
@@ -79,6 +130,7 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
       isSelected,
       orientation,
       readOnly,
+      registerButton,
       select,
       sentiment
     }),
@@ -90,12 +142,17 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
       isSelected,
       orientation,
       readOnly,
+      registerButton,
       select,
       sentiment
     ]
   );
   const handleKeyDown = (event) => {
     var _a, _b, _c;
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      return;
+    }
     const elements = Array.from(
       ((_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) ?? []
     );
@@ -104,11 +161,17 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
     switch (event.key) {
       case "ArrowDown":
       case "ArrowRight":
-        (_b = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _b.focus();
+        if (elements.length > 0) {
+          event.preventDefault();
+          (_b = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _b.focus();
+        }
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        (_c = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _c.focus();
+        if (elements.length > 0) {
+          event.preventDefault();
+          (_c = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _c.focus();
+        }
         break;
     }
     onKeyDown == null ? void 0 : onKeyDown(event);