@salt-ds/core 1.59.1 → 1.61.0

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @salt-ds/core
 
+## 1.61.0
+
+### Minor Changes
+
+- 2db14be: Added `Rating`.
+
+  `Rating` component allows users to submit feedback and view average scores on a defined scale, reflecting your product, service or experience.
+
+  ```tsx
+  <Rating aria-label="Rating" defaultValue={3} />
+  ```
+
+- 7ffd0fd: Added `Tab`, `TabAction`, `TabBar`, `TabList`, `TabPanel`, `Tabs`, `TabTrigger`.
+
+  `Tabs` allow users to move between different views of related content without leave the current page.
+
+  ```tsx
+  <Tabs defaultValue="Home">
+    <TabBar>
+      <TabList aria-label="Example tablist">
+        <Tab value="Home">
+          <TabTrigger>Home</TabTrigger>
+        </Tab>
+        <Tab value="Transactions">
+          <TabTrigger>Transactions</TabTrigger>
+        </Tab>
+        <Tab value="Checks">
+          <TabTrigger>Checks</TabTrigger>
+        </Tab>
+      </TabList>
+    </TabBar>
+  </Tabs>
+  ```
+
+### Patch Changes
+
+- e74d4d8: Fixed `aria-controls` on `NavigationItem` being applied to the outer wrapper element instead of the interactive trigger element.
+
+## 1.60.0
+
+### Minor Changes
+
+- 5d4de6f: `AriaAnnouncer` prop `delay` is deprecated in favour of an `options` prop.
+
+  The `options` prop provides `ariaLive` which can be set to either `polite` or `assertive` depending on the use case.
+  It also provides `target`, which routes announcements to a specific `AriaAnnouncerProvider` target (useful for nested contexts such as dialogs/modals).
+
+  ```diff
+  const { announce } = useAriaAnnouncer();
+  - announce("message", 500)
+  + announce("message", { ariaLive: "polite" });
+  + announce("message", { target: "date-picker-overlay", ariaLive: "polite" });
+  ```
+
+  The `delay` is replaced by two DOM elements that are used to announce messages.
+  The first element is used for `assertive` messages and the second for `polite` messages.
+  Messages are queued and remain in the DOM for 300 msecs before being removed, negating the need for a delay.
+
+  By default using the options prop will default to `polite` announcements.
+
+  In addition `Spinner`, `Pagination` and `ContentStatus` have been updated to default to `polite` announcements, to meet firmwide accessibility standards.
+
+  As part of the refactor, fixed announcements triggered during component unmount/cleanup (e.g. `Spinner` `completionAnnouncement`) being blocked.
+
 ## 1.59.1
 
 ### Patch Changes

package/css/salt-core.css

@@ -3685,6 +3685,118 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transform: scale(1.01);
 }
 
+/* src/rating/Rating.css */
+.saltRating {
+  display: inline-flex;
+  box-sizing: border-box;
+}
+.saltFormField .saltRating-container {
+  height: var(--salt-size-base);
+  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));
+}
+.saltFormField .saltRating-label {
+  min-height: var(--salt-size-base);
+  padding-top: var(--salt-spacing-100);
+}
+.saltRating-labelBottom {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--salt-spacing-75);
+}
+.saltRating-labelRight {
+  flex-direction: row;
+  gap: var(--salt-spacing-150);
+}
+.saltRating-container {
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-150);
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  padding-top: var(--salt-spacing-fixed-100);
+  padding-bottom: var(--salt-spacing-fixed-100);
+  box-sizing: border-box;
+}
+.saltRating-label {
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  box-sizing: border-box;
+}
+
+/* src/rating/RatingItem.css */
+.saltRatingItem {
+  height: var(--salt-size-icon);
+  width: var(--salt-size-icon);
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  cursor: var(--salt-cursor-hover);
+}
+.saltRatingItem-disabled,
+.saltRatingItem-readOnly {
+  cursor: default;
+}
+.saltRatingItem-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: inherit;
+  z-index: 1;
+}
+.saltRatingItem-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: var(--salt-spacing-fixed-600);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  box-sizing: content-box;
+}
+.saltRatingItem-icon {
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--salt-sentiment-neutral-dataviz);
+}
+.saltRatingItem-icon .saltIcon {
+  --saltIcon-size: var(--salt-size-icon);
+}
+.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: var(--salt-spacing-fixed-600);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  box-sizing: content-box;
+  border-radius: var(--salt-palette-corner-strongest);
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(-1 * var(--salt-spacing-fixed-200));
+}
+.saltRatingItem-disabled {
+  cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
+}
+.saltRatingItem-disabled .saltRatingItem-input {
+  cursor: var(--salt-cursor-disabled);
+}
+.saltRatingItem-selected .saltRatingItem-icon,
+.saltRatingItem-hovered .saltRatingItem-icon,
+.saltRatingItem-unselecting .saltRatingItem-icon {
+  color: var(--salt-sentiment-accent-dataviz);
+}
+
 /* src/salt-provider/SaltProvider.css */
 .salt-provider {
   display: contents;
@@ -4308,6 +4420,188 @@ table.saltTable td.saltTable-td-align-right {
   overflow: auto;
 }
 
+/* src/tabs/Tab.css */
+.saltTab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  -webkit-appearance: none;
+  gap: var(--salt-spacing-100);
+  border: none;
+  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  white-space: pre;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  min-width: 4em;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  cursor: var(--salt-cursor-hover);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  text-align: var(--salt-text-textAlign);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-lineHeight);
+  font-size: var(--salt-text-fontSize);
+  max-width: 100%;
+}
+@supports selector(:has(*)) {
+  .saltTabList:has([data-overflowbutton]) .saltTab {
+    max-width: calc(100% - var(--salt-spacing-100) - var(--salt-size-base));
+  }
+}
+.saltTab::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--salt-size-fixed-100) * -1);
+  right: calc(var(--salt-size-fixed-100) * -1);
+  height: var(--salt-size-indicator);
+}
+.saltTabList-bordered .saltTab::after {
+  top: 0;
+}
+.saltTabList-transparent .saltTab::after {
+  bottom: 0;
+}
+.saltTab:hover::after,
+.saltTab-focusVisible::after {
+  background: var(--salt-navigable-indicator-hover);
+}
+.saltTab-disabled:hover::after,
+.saltTab-disabled.saltTab-focusVisible::after {
+  background: none;
+}
+.saltTab-focusVisible {
+  outline: var(--salt-focused-outline);
+}
+.saltTabList-bordered .saltTab.saltTab-selected {
+  background: var(--saltTabList-activeColor);
+  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
+  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
+}
+.saltTab.saltTab-selected::after {
+  background: var(--salt-navigable-accent-indicator-active);
+}
+.saltTab.saltTab-disabled {
+  cursor: var(--salt-cursor-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+}
+
+/* src/tabs/TabBar.css */
+.saltTabBar {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+.saltTabBar-strip {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 auto;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+.saltTabBar-divider::before {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: var(--salt-size-fixed-100);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
+}
+.saltTabBar-inset {
+  padding-left: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+}
+
+/* src/tabs/TabList.css */
+.saltTabList {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  background: transparent;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  gap: var(--salt-spacing-100);
+  max-width: 100%;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+.saltTabList-center {
+  justify-content: center;
+}
+.saltTabList-right {
+  justify-content: flex-end;
+}
+.saltTabList-activeColorPrimary {
+  --saltTabList-activeColor: var(--salt-container-primary-background);
+}
+.saltTabList-activeColorSecondary {
+  --saltTabList-activeColor: var(--salt-container-secondary-background);
+}
+.saltTabList-activeColorTertiary {
+  --saltTabList-activeColor: var(--salt-container-tertiary-background);
+}
+.saltTabList-measureContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+/* src/tabs/TabPanel.css */
+.saltTabPanel {
+  height: 100%;
+  width: 100%;
+}
+.saltTabPanel[hidden] {
+  display: none;
+}
+.saltTabPanel:focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+/* src/tabs/TabTrigger.css */
+.saltTabTrigger {
+  all: unset;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  overflow: hidden;
+}
+.saltTabTrigger::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.saltTabTrigger:focus-visible {
+  outline: none;
+}
+
+/* src/tabs/Tabs.css */
+.saltTabs {
+  min-width: 0;
+}
+
 /* src/tag/Tag.css */
 .saltTag {
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
@@ -5838,4 +6132,75 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/1811ae6e-f5ef-4979-9e24-35bfb4a6a50d.css */
+/* src/tabs/internal/overflow/TabOverflowList.css */
+.saltTabOverflowList {
+  position: relative;
+}
+.saltTabOverflowList-list {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  position: absolute;
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+  z-index: var(--salt-zIndex-flyover);
+}
+.saltTabOverflowList-listContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  max-height: inherit;
+  min-height: inherit;
+}
+.saltTabOverflowList-list .saltTab {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding-left: var(--salt-spacing-100);
+  padding-right: var(--salt-spacing-100);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  align-items: center;
+  cursor: var(--salt-cursor-hover);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  justify-content: flex-start;
+}
+@supports selector(:has(*)) {
+  .saltTabList:has([data-overflowbutton]) .saltTabOverflowList-list .saltTab {
+    max-width: unset;
+  }
+}
+.saltTabOverflowList-list .saltTab .saltTabTrigger {
+  justify-content: start;
+}
+.saltTabOverflowList-list .saltTab::after {
+  display: none;
+}
+.saltTabOverflowList-list .saltTab-focusVisible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+}
+.saltTabOverflowList-list .saltTab:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltTabOverflowList-list .saltTab-disabled {
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-cursor-disabled);
+}
+.saltTabOverflowList-list .saltTab-disabled:hover,
+.saltTabOverflowList-list .saltTab-disabled:active {
+  background: var(--salt-selectable-background);
+  box-shadow: none;
+}
+.saltTabOverflowList-list .saltTab:active {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
+}
+
+/* src/79885058-087e-4d2c-b20a-41af8dda6a7e.css */

package/dist-cjs/aria-announcer/AriaAnnounce.js

@@ -5,14 +5,26 @@ var React = require('react');
 var useAriaAnnouncer = require('./useAriaAnnouncer.js');
 
 const AriaAnnounce = ({
-  announcement
+  announcement,
+  delay,
+  ariaLive,
+  duration,
+  target
 }) => {
   const { announce } = useAriaAnnouncer.useAriaAnnouncer();
   React.useEffect(() => {
     if (announcement) {
-      announce(announcement);
+      if (delay !== void 0) {
+        announce(announcement, delay);
+      } else {
+        announce(announcement, {
+          ...ariaLive ? { ariaLive } : {},
+          ...duration !== void 0 ? { duration } : {},
+          ...target ? { target } : {}
+        });
+      }
     }
-  }, [announce, announcement]);
+  }, [announce, announcement, ariaLive, delay, duration, target]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 

package/dist-cjs/aria-announcer/AriaAnnounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnounce.js","sources":["../src/aria-announcer/AriaAnnounce.tsx"],"sourcesContent":["import { type ComponentType, useEffect } from \"react\";\n\nimport { useAriaAnnouncer } from \"./useAriaAnnouncer\";\n\nexport interface AriaAnnounceProps {\n  /**\n   * String which will be announced by screen readers on change\n   */\n  announcement?: string;\n}\n\nexport const AriaAnnounce: ComponentType<AriaAnnounceProps> = ({\n  announcement,\n}) => {\n  const { announce } = useAriaAnnouncer();\n\n  useEffect(() => {\n    if (announcement) {\n      announce(announcement);\n    }\n  }, [announce, announcement]);\n\n  // biome-ignore lint/complexity/noUselessFragments: If we return null here, react-docgen wouldn't be able to locate the component.\n  return <></>;\n};\n"],"names":["useAriaAnnouncer","useEffect","jsx","Fragment"],"mappings":";;;;;;AAWO,MAAM,eAAiD,CAAC;AAAA,EAC7D;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,iCAAA,EAAiB;AAEtC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,YAAY,CAAC,CAAA;AAG3B,EAAA,uBAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAE,CAAA;AACX;;;;"}
+{"version":3,"file":"AriaAnnounce.js","sources":["../src/aria-announcer/AriaAnnounce.tsx"],"sourcesContent":["import { type ComponentType, useEffect } from \"react\";\nimport type { AnnounceFnOptions } from \"./AriaAnnouncerContext\";\nimport { useAriaAnnouncer } from \"./useAriaAnnouncer\";\n\nexport interface AriaAnnounceProps extends AnnounceFnOptions {\n  /**\n   * String to be announced by screenreader.\n   */\n  announcement?: string;\n  /**\n   * Legacy option, precede the announcement with a delay.\n   * @deprecated\n   * useAriaAnnouncer `delay` arg is deprecated, use your own `setTimeout` or consider using `duration` through `AnnounceFnOptions` instead.\n   */\n  delay?: number;\n}\n\nexport const AriaAnnounce: ComponentType<AriaAnnounceProps> = ({\n  announcement,\n  delay,\n  ariaLive,\n  duration,\n  target,\n}) => {\n  const { announce } = useAriaAnnouncer();\n\n  useEffect(() => {\n    if (announcement) {\n      if (delay !== undefined) {\n        announce(announcement, delay);\n      } else {\n        announce(announcement, {\n          ...(ariaLive ? { ariaLive } : {}),\n          ...(duration !== undefined ? { duration } : {}),\n          ...(target ? { target } : {}),\n        });\n      }\n    }\n  }, [announce, announcement, ariaLive, delay, duration, target]);\n\n  // biome-ignore lint/complexity/noUselessFragments: If we return null here, react-docgen wouldn't be able to locate the component.\n  return <></>;\n};\n"],"names":["useAriaAnnouncer","useEffect","jsx","Fragment"],"mappings":";;;;;;AAiBO,MAAM,eAAiD,CAAC;AAAA,EAC7D,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,iCAAA,EAAiB;AAEtC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,IAAI,UAAU,MAAA,EAAW;AACvB,QAAA,QAAA,CAAS,cAAc,KAAK,CAAA;AAAA,MAC9B,CAAA,MAAO;AACL,QAAA,QAAA,CAAS,YAAA,EAAc;AAAA,UACrB,GAAI,QAAA,GAAW,EAAE,QAAA,KAAa,EAAC;AAAA,UAC/B,GAAI,QAAA,KAAa,MAAA,GAAY,EAAE,QAAA,KAAa,EAAC;AAAA,UAC7C,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW;AAAC,SAC5B,CAAA;AAAA,MACH;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,YAAA,EAAc,UAAU,KAAA,EAAO,QAAA,EAAU,MAAM,CAAC,CAAA;AAG9D,EAAA,uBAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAE,CAAA;AACX;;;;"}

package/dist-cjs/aria-announcer/AriaAnnouncerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnouncerContext.js","sources":["../src/aria-announcer/AriaAnnouncerContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AnnounceFn = (announcement: string, delay?: number) => void;\n\nexport type AriaAnnouncer = {\n  announce: AnnounceFn;\n};\n\nexport const AriaAnnouncerContext = createContext<AriaAnnouncer | undefined>(\n  undefined,\n);\n"],"names":["createContext"],"mappings":";;;;AAQO,MAAM,oBAAA,GAAuBA,mBAAA;AAAA,EAClC;AACF;;;;"}
+{"version":3,"file":"AriaAnnouncerContext.js","sources":["../src/aria-announcer/AriaAnnouncerContext.ts"],"sourcesContent":["import { type AriaAttributes, createContext } from \"react\";\n\nexport type AnnounceFnOptions = {\n  /**\n   * Assertiveness\n   */\n  ariaLive?: Exclude<AriaAttributes[\"aria-live\"], \"off\">;\n  /**\n   * How long (ms) the announcement should remain in the DOM before being removed.\n   * Defaults to the provider's ANNOUNCEMENT_TIME_IN_DOM.\n   */\n  duration?: number;\n  /**\n   * Optional named target live region.\n   * When set, announcements can be routed to a provider registered with the same target.\n   */\n  target?: string;\n};\n\nexport type AriaAnnouncer = {\n  /**\n   * TODO remove legacy `delay` arg (number) in favour of `options` (AnnounceFnOptions) as a breaking change\n   */\n  /**\n   * Announcer function\n   * @param announcement - announcement to queue for screenreader.\n   * @param legacyDelayOrOptions, deprecated `delay` or `options` for announcement\n   */\n  announce: (\n    announcement: string,\n    legacyDelayOrOptions?: number | AnnounceFnOptions,\n  ) => void;\n};\n\nexport const AriaAnnouncerContext = createContext<AriaAnnouncer | undefined>(\n  undefined,\n);\n"],"names":["createContext"],"mappings":";;;;AAkCO,MAAM,oBAAA,GAAuBA,mBAAA;AAAA,EAClC;AACF;;;;"}

package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js

@@ -2,57 +2,74 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 var AriaAnnouncerContext = require('./AriaAnnouncerContext.js');
+var announcementRegistry = require('./announcementRegistry.js');
 
-const ARIA_ANNOUNCE_DELAY = 150;
-function AriaAnnouncerProvider({
-  children,
-  style
-}) {
-  const [currentAnnouncement, setCurrentAnnouncement] = React.useState("");
-  const announcementsRef = React.useRef([]);
-  const isAnnouncingRef = React.useRef(false);
-  const mountedRef = React.useRef(true);
-  const announceAll = React.useCallback(() => {
-    isAnnouncingRef.current = true;
-    if (mountedRef.current) {
-      setCurrentAnnouncement("");
-      requestAnimationFrame(() => {
-        if (mountedRef.current && announcementsRef.current.length) {
-          const announcement = announcementsRef.current.shift();
-          setCurrentAnnouncement(announcement);
-          setTimeout(() => {
-            announceAll();
-          }, ARIA_ANNOUNCE_DELAY);
-        } else {
-          isAnnouncingRef.current = false;
-        }
-      });
+const ANNOUNCEMENT_TIME_IN_DOM = 300;
+const AnnouncementRegion = React.forwardRef(function AnnouncementRegion2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-atomic": false,
+      ref,
+      ...props
     }
-  }, []);
-  const announce = React.useCallback(
-    (announcement) => {
-      announcementsRef.current.push(announcement);
-      if (!isAnnouncingRef.current) {
-        announceAll();
+  );
+});
+const AriaAnnouncerProvider = React.forwardRef(function AriaAnnouncerProvider2({ children, style, target, ...rest }, ref) {
+  const [politeAnnouncements, setPoliteAnnouncements] = React.useState([]);
+  const [assertiveAnnouncements, setAssertiveAnnouncements] = React.useState([]);
+  const idCounterRef = React.useRef(0);
+  const makeAnnouncement = React.useCallback(
+    (message, assertiveness = "polite", duration = ANNOUNCEMENT_TIME_IN_DOM) => {
+      idCounterRef.current += 1;
+      const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;
+      if (assertiveness === "polite") {
+        setPoliteAnnouncements((previous) => {
+          return previous.concat({ id, message });
+        });
+        setTimeout(() => {
+          setPoliteAnnouncements(
+            (previous) => previous.filter((announcement) => announcement.id !== id)
+          );
+        }, duration);
+      } else {
+        setAssertiveAnnouncements((previous) => {
+          return previous.concat({ id, message });
+        });
+        setTimeout(() => {
+          setAssertiveAnnouncements(
+            (previous) => previous.filter((announcement) => announcement.id !== id)
+          );
+        }, duration);
       }
     },
-    [announceAll]
+    []
+  );
+  const announce = React.useCallback(
+    (announcement, legacyDelayOrOptions = {}) => {
+      const options = typeof legacyDelayOrOptions === "object" && legacyDelayOrOptions ? legacyDelayOrOptions : {};
+      makeAnnouncement(
+        announcement,
+        options.ariaLive,
+        options.duration ?? ANNOUNCEMENT_TIME_IN_DOM
+      );
+    },
+    [makeAnnouncement]
   );
-  React.useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
   const value = React.useMemo(() => ({ announce }), [announce]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!target) {
+      return;
+    }
+    return announcementRegistry.registerAnnouncementTarget(target, announce);
+  }, [announce, target]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AriaAnnouncerContext.AriaAnnouncerContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        "aria-atomic": "true",
-        "aria-live": "assertive",
         style: {
           position: "absolute",
           height: 1,
@@ -65,12 +82,17 @@ function AriaAnnouncerProvider({
           borderWidth: 0,
           ...style
         },
-        children: currentAnnouncement
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AnnouncementRegion, { "aria-live": "polite", children: politeAnnouncements.map((announcement) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: announcement.message }, `polite-${announcement.id}`)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(AnnouncementRegion, { "aria-live": "assertive", children: assertiveAnnouncements.map((announcement) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: announcement.message }, `assertive-${announcement.id}`)) })
+        ]
       }
     )
   ] });
-}
+});
 
-exports.ARIA_ANNOUNCE_DELAY = ARIA_ANNOUNCE_DELAY;
+exports.ANNOUNCEMENT_TIME_IN_DOM = ANNOUNCEMENT_TIME_IN_DOM;
 exports.AriaAnnouncerProvider = AriaAnnouncerProvider;
 //# sourceMappingURL=AriaAnnouncerProvider.js.map