diff --git a/packages/@react-aria/calendar/src/useCalendarCell.ts b/packages/@react-aria/calendar/src/useCalendarCell.ts
index aabeac2f9a5..1c415d0b3d8 100644
--- a/packages/@react-aria/calendar/src/useCalendarCell.ts
+++ b/packages/@react-aria/calendar/src/useCalendarCell.ts
@@ -101,7 +101,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
);
if (isInvalid) {
- isSelected = true;
+ // don't mark unavaliable + invalid dates in range calendars as selected, that case only comes up via allowsNoncontiguousRanges
+ // and thus those unavailable dates shouldn't be selected. For single select calendars, we mark unavailble + invalid days as selected for styling reasons
+ if (!('highlightedRange' in state) || !isUnavailable) {
+ isSelected = true;
+ }
}
// For performance, reuse the same date object as before if the new date prop is the same.
diff --git a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
index 2ad49d90c26..0149063d3fb 100644
--- a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
@@ -40,18 +40,34 @@ let states = [
let combinations = generatePowerset(states);
-const Template = (args: ButtonProps): ReactNode => {
- let {children, ...otherArgs} = args;
+let premiumStates = [
+ {isDisabled: true},
+ {size: ['S', 'M', 'L', 'XL']}
+];
+
+let premiumCombinations = generatePowerset(premiumStates);
+
+let genaiStates = [
+ {isDisabled: true},
+ {size: ['S', 'M', 'L', 'XL']}
+];
+
+let genaiCombinations = generatePowerset(genaiStates);
+
+const Template = (args: ButtonProps & {combos?: any[]}): ReactNode => {
+ let {children, combos = combinations, variant, ...otherArgs} = args;
return (
- {combinations.map(c => {
+ {combos.map(c => {
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
if (!key) {
key = 'default';
}
- let button =
{children ? children : key} ;
+ let finalVariant = c.variant ?? variant;
+ let buttonProps = {...otherArgs, ...c, ...(finalVariant && {variant: finalVariant})};
+ let button =
{children ? children : key} ;
if (c.staticColor != null) {
return (
@@ -84,4 +100,52 @@ export const IconOnly: StoryObj = {
}
};
+export const Premium: StoryObj = {
+ render: (args) => ,
+ args: {
+ children: 'Press me',
+ variant: 'premium'
+ }
+};
+
+export const PremiumWithIcon: StoryObj = {
+ render: (args) => ,
+ args: {
+ children: <>Press me >,
+ variant: 'premium'
+ }
+};
+
+export const PremiumIconOnly: StoryObj = {
+ render: (args) => ,
+ args: {
+ children: ,
+ variant: 'premium'
+ }
+};
+
+export const GenAI: StoryObj = {
+ render: (args) => ,
+ args: {
+ children: 'Press me',
+ variant: 'genai'
+ }
+};
+
+export const GenAIWithIcon: StoryObj = {
+ render: (args) => ,
+ args: {
+ children: <>Press me >,
+ variant: 'genai'
+ }
+};
+
+export const GenAIIconOnly: StoryObj = {
+ render: (args) => ,
+ args: {
+ children: ,
+ variant: 'genai'
+ }
+};
+
export {WithWrapping};
diff --git a/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx
index 36b7aa21a86..be13b5d8e00 100644
--- a/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx
@@ -48,3 +48,19 @@ export const Example: Story = {
target: '_blank'
}
};
+
+export const Premium: Story = {
+ ...Example,
+ args: {
+ ...Example.args,
+ variant: 'premium'
+ }
+};
+
+export const GenAI: Story = {
+ ...Example,
+ args: {
+ ...Example.args,
+ variant: 'genai'
+ }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx
index 8b180832471..c7512f7cf41 100644
--- a/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx
@@ -33,7 +33,30 @@ export const VerticalOrientation: Story = {
+
+ V: Text Only
+
+
+
+ V: Illustration + Text
+
+
+
+
+
+
+ )
+};
+
+export const VerticalOrientationMultiSelect: Story = {
+ render: () => (
+
+
V: Text Only
@@ -55,7 +78,36 @@ export const HorizontalOrientation: Story = {
+
+ Title Only
+
+
+
+ Illustration + Title
+
+
+ Title + Description
+ Additional description
+
+
+
+ Illustration + Title + Description
+ Full horizontal layout with all elements
+
+
+
+ )
+};
+
+export const HorizontalOrientationMultSelect: Story = {
+ render: () => (
+
+
Title Only
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index acd77cb9721..37cb41e03a4 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -430,6 +430,14 @@ export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps,
props = useFormProps(props);
let domRef = useFocusableRef(ref);
let overlayTriggerState = useContext(OverlayTriggerStateContext);
+ let {
+ fillStyle = 'fill',
+ size = 'M',
+ variant = 'primary',
+ staticColor,
+ styles,
+ children
+ } = props;
return (
-
- {typeof props.children === 'string' ? {props.children} : props.children}
-
+ }, styles)}>
+ {(renderProps) => (<>
+ {variant === 'genai' || variant === 'premium'
+ ? (
+
+ )
+ : null}
+
+ {typeof children === 'string' ? {children} : children}
+
+ >)}
);
});
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index b05178ab5ee..eccfe89dc55 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -202,7 +202,8 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
}
}}
onTouchEnd={e => {
- if (!(e.target as Element).closest('button,input,textarea,[role="button"]')) {
+ let target = e.target as HTMLElement;
+ if (!target.isContentEditable && !target.closest('button,input,textarea,[role="button"]')) {
e.preventDefault();
(e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
}
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index bc93a178e33..6140ae33e4b 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -98,7 +98,7 @@ export interface PickerStyleProps {
type SelectionMode = 'single' | 'multiple';
export interface PickerProps extends
- Omit, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
+ Omit, 'children' | 'style' | 'className' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,
PickerStyleProps,
StyleProps,
SpectrumLabelableProps,
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 4944a228f1f..f3c0da4901c 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -105,12 +105,16 @@ const selectBoxStyles = style({
horizontal: 188
}
},
- maxWidth: {
- default: 170,
- orientation: {
- horizontal: 480
+ '--select-box-max-width': {
+ type: 'width',
+ value: {
+ default: 170,
+ orientation: {
+ horizontal: 480
+ }
}
},
+ maxWidth: 'min(100%, var(--select-box-max-width))',
minHeight: {
default: 144,
orientation: {
@@ -272,7 +276,7 @@ const gridStyles = style<{orientation?: Orientation}>({
gridAutoRows: '1fr',
gap: 24,
justifyContent: 'center',
- '--size': {
+ '--select-box-group-width': {
type: 'width',
value: {
orientation: {
@@ -281,10 +285,19 @@ const gridStyles = style<{orientation?: Orientation}>({
}
}
},
+ '--select-box-group-min-width': {
+ type: 'width',
+ value: {
+ orientation: {
+ horizontal: 188,
+ vertical: 144
+ }
+ }
+ },
gridTemplateColumns: {
orientation: {
- horizontal: 'repeat(auto-fit, var(--size))',
- vertical: 'repeat(auto-fit, var(--size))'
+ horizontal: 'repeat(auto-fit, minmax(var(--select-box-group-min-width), min(var(--select-box-group-width), 100%)))',
+ vertical: 'repeat(auto-fit, minmax(var(--select-box-group-min-width), min(var(--select-box-group-width), 100%)))'
}
}
}, getAllowedOverrides());
@@ -315,7 +328,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
}, styles)}
style={pressScale(ref, UNSAFE_style)}
{...otherProps}>
- {({isSelected, isDisabled, isHovered}) => {
+ {({isSelected, isDisabled, isHovered, selectionMode}) => {
return (
<>
- {!isDisabled && (
+ {!isDisabled && selectionMode === 'multiple' && (
({
{/* invisible collection for measuring */}
@@ -525,11 +526,9 @@ export const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({ch
function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {
let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};
+
return (
-
+ <>
{isInRealDOM && (
)}
-
+ >
);
}
diff --git a/packages/@react-spectrum/s2/test/TagGroup.test.tsx b/packages/@react-spectrum/s2/test/TagGroup.test.tsx
new file mode 100644
index 00000000000..55381107a14
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/TagGroup.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import {Tag, TagGroup} from '../src';
+import userEvent from '@testing-library/user-event';
+
+describe('TagGroup', () => {
+ let user;
+ beforeAll(() => {
+ jest.useFakeTimers();
+ user = userEvent.setup({delay: null, pointerMap});
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ act(() => jest.runAllTimers());
+ });
+
+ afterAll(function () {
+ jest.restoreAllMocks();
+ });
+
+ it('remove button should work', async () => {
+ let onRemove = jest.fn();
+ let {getAllByLabelText} = render(
+
+ Chocolate
+ Mint
+ Strawberry
+ Vanilla
+
+ );
+
+ let removeButtons = getAllByLabelText('Remove');
+ expect(removeButtons).toHaveLength(4);
+ await user.click(removeButtons[0]);
+ act(() => {jest.runAllTimers();});
+ expect(onRemove).toHaveBeenCalledTimes(1);
+ expect(onRemove).toHaveBeenCalledWith(new Set(['chocolate']));
+ });
+});
diff --git a/packages/@react-spectrum/s2/test/TextField.test.tsx b/packages/@react-spectrum/s2/test/TextField.test.tsx
new file mode 100644
index 00000000000..bad48cc0ccd
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/TextField.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {fireEvent, render} from '@react-spectrum/test-utils-internal';
+import {TextArea} from '../src';
+
+describe('TextField', () => {
+ it('should focus textarea when tapping invalid icon', async () => {
+ let {getByRole} = render(
+
+ );
+
+ let textarea = getByRole('textbox');
+ // svg doesn't have a role so grab it via queryselector
+ let icon = getByRole('presentation').querySelector('svg')!;
+ expect(icon).toBeInTheDocument();
+ // user event with touch doesn't cause touchEnd to trigger so using fireEvent
+ fireEvent.touchStart(icon);
+ fireEvent.touchEnd(icon);
+
+ expect(document.activeElement).toBe(textarea);
+ });
+});
diff --git a/packages/@react-types/select/src/index.d.ts b/packages/@react-types/select/src/index.d.ts
index 374e5aa7cdb..339f4163f9f 100644
--- a/packages/@react-types/select/src/index.d.ts
+++ b/packages/@react-types/select/src/index.d.ts
@@ -83,7 +83,7 @@ export interface AriaSelectProps extends
form?: string
}
-export interface SpectrumPickerProps extends Omit, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange'>, Omit, AsyncLoadable, SpectrumLabelableProps, StyleProps {
+export interface SpectrumPickerProps extends Omit, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | 'allowsEmptyCollection'>, Omit, AsyncLoadable, SpectrumLabelableProps, StyleProps {
/** Whether the textfield should be displayed with a quiet style. */
isQuiet?: boolean,
/** Alignment of the menu relative to the input target.
diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index c3532067e88..c731bde7fe9 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -6,6 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/CommandPalette';
import '../../tailwind/tailwind.css';
export const tags = ['combobox', 'typeahead', 'input'];
+export const version = 'rc';
export const relatedPages = [{'title': 'useAutocomplete', 'url': 'https://react-spectrum.adobe.com/react-aria/useAutocomplete.html'}];
export const description = 'Allows users to search or filter a list of suggestions.';
diff --git a/packages/dev/s2-docs/pages/react-aria/Separator.mdx b/packages/dev/s2-docs/pages/react-aria/Separator.mdx
new file mode 100644
index 00000000000..471b3d87224
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/Separator.mdx
@@ -0,0 +1,37 @@
+import {Layout} from '../../src/Layout';
+export default Layout;
+
+import docs from 'docs:react-aria-components';
+import {Separator as VanillaSeparator} from 'vanilla-starter/Separator';
+import {Separator as TailwindSeparator} from 'tailwind-starter/Separator';
+import tailwindDocs from 'docs:tailwind-starter/Separator';
+import vanillaDocs from 'docs:vanilla-starter/Separator';
+import '../../tailwind/tailwind.css';
+
+export const relatedPages = [{'title': 'useSeparator', 'url': 'https://react-spectrum.adobe.com/react-aria/useSeparator.html'}];
+export const description = 'A separator is a visual divider between two groups of content.';
+
+# Separator
+
+{docs.exports.Separator.description}
+
+
+
+
+
+
+## API
+
+
\ No newline at end of file
diff --git a/packages/react-aria-components/src/Separator.tsx b/packages/react-aria-components/src/Separator.tsx
index 7a6da74022d..48d26b282e6 100644
--- a/packages/react-aria-components/src/Separator.tsx
+++ b/packages/react-aria-components/src/Separator.tsx
@@ -42,6 +42,9 @@ export class SeparatorNode extends CollectionNode {
}
}
+/**
+ * A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.
+ */
export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Separator(props: SeparatorProps, ref: ForwardedRef) {
[props, ref] = useContextProps(props, ref, SeparatorContext);
diff --git a/packages/react-aria-components/test/RangeCalendar.test.tsx b/packages/react-aria-components/test/RangeCalendar.test.tsx
index 03877e4bb47..40a905344e0 100644
--- a/packages/react-aria-components/test/RangeCalendar.test.tsx
+++ b/packages/react-aria-components/test/RangeCalendar.test.tsx
@@ -417,4 +417,46 @@ describe('RangeCalendar', () => {
expect(cell).toHaveAttribute('aria-invalid', 'true');
expect(cell).toHaveClass('invalid');
});
+
+ it('should not mark unavailable dates as selected when range is invalid', () => {
+ let {getByRole} = renderCalendar({
+ value: {start: new CalendarDate(2025, 12, 1), end: new CalendarDate(2025, 12, 10)},
+ isDateUnavailable: (date) => {
+ return date.compare(new CalendarDate(2025, 12, 3)) >= 0 && date.compare(new CalendarDate(2025, 12, 6)) <= 0;
+ },
+ allowsNonContiguousRanges: true,
+ isInvalid: true
+ });
+
+ let grid = getByRole('grid');
+ let cells = within(grid).getAllByRole('button');
+
+ let dec2 = cells.find(cell => cell.textContent === '2');
+ let dec7 = cells.find(cell => cell.textContent === '7');
+
+ // available dates in the range should be selected and marked as invalid but unavaiable ones should not be selected
+ expect(dec2).toHaveAttribute('data-selected', 'true');
+ expect(dec2).not.toHaveAttribute('data-unavailable', 'true');
+ expect(dec2).toHaveAttribute('aria-invalid', 'true');
+ expect(dec7).toHaveAttribute('data-selected', 'true');
+ expect(dec7).not.toHaveAttribute('data-unavailable', 'true');
+ expect(dec7).toHaveAttribute('aria-invalid', 'true');
+
+ let dec3 = cells.find(cell => cell.textContent === '3');
+ let dec4 = cells.find(cell => cell.textContent === '4');
+ let dec5 = cells.find(cell => cell.textContent === '5');
+ let dec6 = cells.find(cell => cell.textContent === '6');
+ expect(dec3).not.toHaveAttribute('data-selected', 'true');
+ expect(dec3).toHaveAttribute('data-unavailable', 'true');
+ expect(dec3).toHaveAttribute('aria-invalid', 'true');
+ expect(dec4).not.toHaveAttribute('data-selected', 'true');
+ expect(dec4).toHaveAttribute('data-unavailable', 'true');
+ expect(dec4).toHaveAttribute('aria-invalid', 'true');
+ expect(dec5).not.toHaveAttribute('data-selected', 'true');
+ expect(dec5).toHaveAttribute('data-unavailable', 'true');
+ expect(dec5).toHaveAttribute('aria-invalid', 'true');
+ expect(dec6).not.toHaveAttribute('data-selected', 'true');
+ expect(dec6).toHaveAttribute('data-unavailable', 'true');
+ expect(dec6).toHaveAttribute('aria-invalid', 'true');
+ });
});
diff --git a/starters/docs/src/Menu.css b/starters/docs/src/Menu.css
index bd599720dfb..e2c867663fa 100644
--- a/starters/docs/src/Menu.css
+++ b/starters/docs/src/Menu.css
@@ -170,12 +170,14 @@
}
}
-.react-aria-Separator {
+.react-aria-Menu .react-aria-Separator {
grid-column-start: 1;
grid-column-end: -1;
margin: 0 var(--spacing-2);
border: 0;
border-top: 0.5px solid var(--border-color);
+ height: auto;
+ width: auto;
.react-aria-MenuItem + & {
margin-block-start: var(--spacing-1);
diff --git a/starters/docs/src/Separator.css b/starters/docs/src/Separator.css
new file mode 100644
index 00000000000..35b10aef072
--- /dev/null
+++ b/starters/docs/src/Separator.css
@@ -0,0 +1,15 @@
+@import "./theme.css";
+
+.react-aria-Separator {
+ background-color: var(--gray-800);
+ border-style: none;
+ border-radius: 1px;
+ height: 2px;
+ width: 100%;
+
+ &[aria-orientation="vertical"] {
+ width: 2px;
+ min-height: 32px;
+ height: 100%;
+ }
+}
diff --git a/starters/docs/src/Separator.tsx b/starters/docs/src/Separator.tsx
new file mode 100644
index 00000000000..419dd3e2e42
--- /dev/null
+++ b/starters/docs/src/Separator.tsx
@@ -0,0 +1,8 @@
+'use client';
+import {Separator as RACSeparator, SeparatorProps} from 'react-aria-components';
+import React from 'react';
+import './Separator.css';
+
+export function Separator(props: SeparatorProps) {
+ return
+}
\ No newline at end of file
diff --git a/starters/tailwind/src/Separator.tsx b/starters/tailwind/src/Separator.tsx
index f4ac33b5f11..4b9c7eb13b2 100644
--- a/starters/tailwind/src/Separator.tsx
+++ b/starters/tailwind/src/Separator.tsx
@@ -4,11 +4,11 @@ import { Separator as RACSeparator, SeparatorProps } from 'react-aria-components
import { tv } from 'tailwind-variants';
const styles = tv({
- base: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[ButtonBorder]',
+ base: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[ButtonBorder] border-none',
variants: {
orientation: {
horizontal: 'h-px w-full',
- vertical: 'w-px'
+ vertical: 'w-px min-h-8 h-full'
}
},
defaultVariants: {
diff --git a/starters/tailwind/src/Toast.tsx b/starters/tailwind/src/Toast.tsx
index cdb66c26ea2..d27252bc396 100644
--- a/starters/tailwind/src/Toast.tsx
+++ b/starters/tailwind/src/Toast.tsx
@@ -40,7 +40,7 @@ export function MyToastRegion() {
// The ToastRegion should be rendered at the root of your app.
+ className="fixed bottom-4 right-4 flex flex-col-reverse gap-2 rounded-lg outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2">
{({toast}) => (
@@ -52,7 +52,7 @@ export function MyToastRegion() {
+ className="flex flex-none appearance-none w-8 h-8 rounded-sm bg-transparent border-none text-white p-0 outline-none hover:bg-white/10 pressed:bg-white/15 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 items-center justify-center [-webkit-tap-highlight-color:transparent]">
@@ -68,7 +68,7 @@ export function MyToast(props: ToastProps) {
style={{viewTransitionName: props.toast.key} as CSSProperties}
className={composeTailwindRenderProps(
props.className,
- "flex items-center gap-4 bg-blue-600 px-4 py-3 rounded-lg outline-none forced-colors:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 [view-transition-class:toast] font-sans w-[230px]"
+ "flex items-center gap-4 bg-blue-600 px-4 py-3 rounded-lg outline-none forced-colors:outline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 [view-transition-class:toast] font-sans w-[230px]"
)}
/>
);