@react-spectrum/s2 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -17,26 +17,45 @@
   "source": "src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
+      "source": "./src/index.ts",
+      "types": [
+        "./dist/types.d.ts",
+        "./src/index.ts"
+      ],
       "module": "./dist/module.mjs",
       "import": "./dist/module.mjs",
       "require": "./dist/main.cjs"
     },
-    "./page.css": "./page.css",
+    "./page.css": {
+      "source": "./src/page.ts",
+      "default": "./page.css"
+    },
     "./style": {
-      "types": "./style/dist/types.d.ts",
+      "source": "./style/index.ts",
+      "types": [
+        "./style/dist/types.d.ts",
+        "./style/index.ts"
+      ],
       "module": "./style/dist/module.mjs",
       "import": "./style/dist/module.mjs",
       "require": "./style/dist/main.cjs"
     },
     "./icons/*": {
-      "types": "./icons/*.d.ts",
+      "source": "./s2wf-icons/S2_Icon_*_20_N.svg",
+      "types": [
+        "./icons/*.d.ts",
+        "./icon.d.ts"
+      ],
       "module": "./icons/*.mjs",
       "import": "./icons/*.mjs",
       "require": "./icons/*.cjs"
     },
     "./illustrations/*": {
-      "types": "./illustrations/*.d.ts",
+      "source": "./spectrum-illustrations/*.tsx",
+      "types": [
+        "./illustrations/*.d.ts",
+        "./icon.d.ts"
+      ],
       "module": "./illustrations/*.mjs",
       "import": "./illustrations/*.mjs",
       "require": "./illustrations/*.cjs"
@@ -57,26 +76,26 @@
     "src"
   ],
   "dependencies": {
-    "@internationalized/number": "^3.6.2",
-    "@react-aria/collections": "3.0.0-rc.1",
-    "@react-aria/focus": "^3.20.3",
-    "@react-aria/i18n": "^3.12.9",
-    "@react-aria/interactions": "^3.25.1",
-    "@react-aria/live-announcer": "^3.4.2",
-    "@react-aria/utils": "^3.29.0",
-    "@react-spectrum/utils": "^3.12.5",
-    "@react-stately/layout": "^4.3.0",
-    "@react-stately/utils": "^3.10.6",
-    "@react-types/dialog": "^3.5.18",
-    "@react-types/grid": "^3.3.2",
-    "@react-types/provider": "^3.8.9",
-    "@react-types/shared": "^3.29.1",
-    "@react-types/table": "^3.13.0",
-    "@react-types/textfield": "^3.12.2",
+    "@internationalized/number": "^3.6.3",
+    "@react-aria/collections": "3.0.0-rc.3",
+    "@react-aria/focus": "^3.20.5",
+    "@react-aria/i18n": "^3.12.10",
+    "@react-aria/interactions": "^3.25.3",
+    "@react-aria/live-announcer": "^3.4.3",
+    "@react-aria/utils": "^3.29.1",
+    "@react-spectrum/utils": "^3.12.6",
+    "@react-stately/layout": "^4.3.1",
+    "@react-stately/utils": "^3.10.7",
+    "@react-types/dialog": "^3.5.19",
+    "@react-types/grid": "^3.3.3",
+    "@react-types/provider": "^3.8.10",
+    "@react-types/shared": "^3.30.0",
+    "@react-types/table": "^3.13.1",
+    "@react-types/textfield": "^3.12.3",
     "csstype": "^3.0.2",
-    "react-aria": "^3.40.0",
-    "react-aria-components": "^1.9.0",
-    "react-stately": "^3.38.0"
+    "react-aria": "^3.41.1",
+    "react-aria-components": "^1.10.1",
+    "react-stately": "^3.39.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0-rc.1",
@@ -85,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9c77d4e8267ed39469c65f65da94ece7be509874"
+  "gitHead": "a063122082d2b372e4846b58c85ae69ec73887ff"
 }

package/src/ActionButton.tsx

@@ -95,7 +95,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
         default: lightDark('accent-900', 'accent-700'),
         isHovered: lightDark('accent-1000', 'accent-600'),
         isPressed: lightDark('accent-1000', 'accent-600'),
-        isFocused: lightDark('accent-1000', 'accent-600')
+        isFocusVisible: lightDark('accent-1000', 'accent-600')
       },
       isDisabled: {
         default: 'gray-100',

package/src/Button.tsx

@@ -116,13 +116,13 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
             default: lightDark('accent-900', 'accent-700'),
             isHovered: lightDark('accent-1000', 'accent-600'),
             isPressed: lightDark('accent-1000', 'accent-600'),
-            isFocused: lightDark('accent-1000', 'accent-600')
+            isFocusVisible: lightDark('accent-1000', 'accent-600')
           },
           negative: {
             default: lightDark('negative-900', 'negative-700'),
             isHovered: lightDark('negative-1000', 'negative-600'),
             isPressed: lightDark('negative-1000', 'negative-600'),
-            isFocused: lightDark('negative-1000', 'negative-600')
+            isFocusVisible: lightDark('negative-1000', 'negative-600')
           },
           premium: 'gray-100',
           genai: 'gray-100'
@@ -347,7 +347,7 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
         isStaticColor: !!staticColor
       }, props.styles)}>
       {(renderProps) => (<>
-        {variant === 'genai' || variant === 'premium' 
+        {variant === 'genai' || variant === 'premium'
           ? (
             <span
               className={gradient({

package/src/ComboBox.tsx

@@ -81,7 +81,7 @@ export interface ComboBoxProps<T extends object> extends
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps,
-  Pick<ListBoxProps<T>, 'items'>,
+  Pick<ListBoxProps<T>, 'items' | 'dependencies'>,
   Pick<AriaPopoverProps, 'shouldFlip'>,
   Pick<AsyncLoadable, 'onLoadMore'>  {
     /** The contents of the collection. */
@@ -559,7 +559,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
   if (typeof children === 'function') {
     renderer = (
       <>
-        <Collection items={items ?? defaultItems}>
+        <Collection items={items ?? defaultItems} dependencies={props.dependencies}>
           {children}
         </Collection>
         {listBoxLoadingCircle}
@@ -681,6 +681,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
                 loaderHeight: LOADER_ROW_HEIGHTS[size][scale]
               }}>
               <ListBox
+                dependencies={props.dependencies}
                 renderEmptyState={() => (
                   <span className={emptyStateText({size})}>
                     {loadingState === 'loading' ? stringFormatter.format('table.loading') : stringFormatter.format('combobox.noResults')}

package/src/ContextualHelp.tsx

@@ -41,8 +41,8 @@ export interface ContextualHelpProps extends
 
 const popover = style({
   fontFamily: 'sans',
-  minWidth: 218,
-  width: 218,
+  minWidth: 268,
+  width: 268,
   padding: 24
 });
 

package/src/Image.tsx

@@ -228,7 +228,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
       {!errorState && (
         <img
           {...getFetchPriorityProp(fetchPriority)}
-          src={src}
+          src={src || undefined}
           alt={alt}
           crossOrigin={crossOrigin}
           decoding={decoding}

package/src/NumberField.tsx

@@ -19,7 +19,6 @@ import {
   ButtonRenderProps,
   ContextValue,
   InputContext,
-  Text,
   useContextProps
 } from 'react-aria-components';
 import {baseColor, space, style} from '../style' with {type: 'macro'};
@@ -245,7 +244,6 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                     </StepButton>
                   </div>}
                 </FieldGroup>
-                {descriptionMessage && <Text slot="description">{descriptionMessage}</Text>}
                 <HelpText
                   size={size}
                   isDisabled={isDisabled}

package/src/Picker.tsx

@@ -97,7 +97,7 @@ export interface PickerProps<T extends object> extends
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps,
-  Pick<ListBoxProps<T>, 'items'>,
+  Pick<ListBoxProps<T>, 'items' | 'dependencies'>,
   Pick<AriaPopoverProps, 'shouldFlip'>,
   Pick<AsyncLoadable, 'onLoadMore'> {
     /** The contents of the collection. */
@@ -319,7 +319,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
   if (typeof children === 'function' && items) {
     renderer = (
       <>
-        <Collection items={items}>
+        <Collection items={items} dependencies={props.dependencies}>
           {children}
         </Collection>
         {listBoxLoadingCircle}
@@ -425,6 +425,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                     }]
                   ]}>
                   <ListBox
+                    dependencies={props.dependencies}
                     items={items}
                     className={listbox({size})}>
                     {renderer}

package/src/Skeleton.tsx

@@ -126,7 +126,8 @@ export function SkeletonWrapper({children}: {children: SkeletonElement}): ReactN
       {isLoading ? cloneElement(children, {
         ref: mergeRefs(childRef, animation),
         className: (children.props.className || '') + ' ' + loadingStyle,
-        inert: 'true'
+        // @ts-ignore - compatibility with React < 19
+        inert: inertValue(true)
       }) : children}
     </SkeletonContext.Provider>
   );

package/src/Tabs.tsx

@@ -213,7 +213,7 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
       style={props.UNSAFE_style}
       className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>
       {orientation === 'vertical' &&
-        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
+        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}
       <RACTabList
         {...props}
         aria-label={ariaLabel}
@@ -221,16 +221,17 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
         ref={tablistRef}
         className={renderProps => tablist({...renderProps, labelBehavior, density})} />
       {orientation === 'horizontal' &&
-        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
+        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}
     </div>
   );
 }
 
-interface TabLineProps {
+interface TabLineProps<T extends object> {
   disabledKeys: Iterable<Key> | undefined,
   isDisabled: boolean | undefined,
   selectedTab: HTMLElement | undefined,
   orientation?: Orientation,
+  tabList: TabListProps<T>,
   density?: 'compact' | 'regular'
 }
 
@@ -265,12 +266,13 @@ const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}
   transitionTimingFunction: 'in-out'
 });
 
-function TabLine(props: TabLineProps) {
+function TabLine<T extends object>(props: TabLineProps<T>) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
     selectedTab,
     orientation,
+    tabList,
     density
   } = props;
   let {direction} = useLocale();
@@ -314,7 +316,7 @@ function TabLine(props: TabLineProps) {
 
   useLayoutEffect(() => {
     onResize();
-  }, [onResize, state?.selectedItem?.key, density, direction, orientation]);
+  }, [onResize, state?.selectedItem?.key, density, direction, orientation, tabList]);
 
   return (
     <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />

package/src/TagGroup.tsx

@@ -442,7 +442,7 @@ const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?:
         default: lightDark('accent-900', 'accent-700'),
         isHovered: lightDark('accent-1000', 'accent-600'),
         isPressed: lightDark('accent-1000', 'accent-600'),
-        isFocused: lightDark('accent-1000', 'accent-600')
+        isFocusVisible: lightDark('accent-1000', 'accent-600')
       }
     },
     isDisabled: 'disabled',

package/src/TreeView.tsx

@@ -33,7 +33,6 @@ import {colorMix, focusRing, fontRelative, lightDark, style} from '../style' wit
 import {DOMRef, Key} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
-import {isAndroid} from '@react-aria/utils';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
 import {TextContext} from './Content';
@@ -413,18 +412,14 @@ const expandButton = style<ExpandableRowChevronProps>({
 function ExpandableRowChevron(props: ExpandableRowChevronProps) {
   let expandButtonRef = useRef<HTMLButtonElement>(null);
   let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);
-  let {isExpanded, isDisabled, scale, isHidden} = fullProps;
+  let {isExpanded, scale, isHidden} = fullProps;
   let {direction} = useLocale();
-  isDisabled = isDisabled || isHidden;
 
   return (
     <Button
       {...props}
       ref={ref}
       slot="chevron"
-      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually "focus" it
-      excludeFromTabOrder={isAndroid() && !isDisabled}
-      preventFocusOnPress
       className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>
       <Chevron
         className={style({

package/style/__tests__/style-macro.test.js

@@ -40,14 +40,14 @@ describe('style-macro', () => {
       "@layer _.a, _.b, _.c;
 
       @layer _.b {
-        .Jbs8:first-child {
+        .Jbs91:first-child {
           margin-top: 0.25rem;
         }
       }
 
       @layer _.c.p {
         @media (min-width: 64rem) {
-          .Jbpv8:first-child {
+          .Jbpv91:first-child {
             margin-top: 0.5rem;
           }
         }
@@ -55,7 +55,7 @@ describe('style-macro', () => {
 
       "
     `);
-    expect(js).toMatchInlineSnapshot('" Jbs8 Jbpv8"');
+    expect(js).toMatchInlineSnapshot('" Jbs91 Jbpv91"');
   });
 
   it('should support self references', () => {
@@ -69,47 +69,47 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        ._kc8 {
+        ._kc91 {
           border-top-width: 2px;
         }
 
 
-        .hc8 {
+        .hc91 {
           border-bottom-width: 2px;
         }
 
 
-        .mCPFGYc8 {
+        .mCPFGYc91 {
           border-inline-start-width: var(--m);
         }
 
 
-        .lc8 {
+        .lc91 {
           border-inline-end-width: 2px;
         }
 
 
-        .SMBFGYc8 {
+        .SMBFGYc91 {
           padding-inline-start: var(--S);
         }
 
 
-        .Rv8 {
+        .Rv91 {
           padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
         }
 
 
-        .ZjUQgKd8 {
+        .ZjUQgKd91 {
           width: calc(200px - var(--m) - var(--S));
         }
 
 
-        .-m_-mc8 {
+        .-m_-mc91 {
           --m: 2px;
         }
 
 
-        .-S_-Sv8 {
+        .-S_-Sv91 {
           --S: calc(var(--F, var(--M)) * 3 / 8);
         }
       }
@@ -118,7 +118,7 @@ describe('style-macro', () => {
     `);
 
     expect(js).toMatchInlineSnapshot(
-      '" _kc8 hc8 mCPFGYc8 lc8 SMBFGYc8 Rv8 ZjUQgKd8 -m_-mc8 -S_-Sv8"'
+      '" _kc91 hc91 mCPFGYc91 lc91 SMBFGYc91 Rv91 ZjUQgKd91 -m_-mc91 -S_-Sv91"'
     );
   });
 
@@ -136,9 +136,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw8 pg8"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb8 pHJ3AUd8"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb8 pg8"');
+    expect(js()).toMatchInlineSnapshot('"  gw91 pg91"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb91 pHJ3AUd91"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb91 pg91"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -153,9 +153,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B8 __Ya8"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D8 __Ya8"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D8 __Ya8"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B91 __Ya91"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D91 __Ya91"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D91 __Ya91"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -170,9 +170,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk8 Qk8 Sk8 Rk8"');
-    expect(overrides).toMatchInlineSnapshot('" Tm8 Qm8 Sm8 Rm8"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm8 Qm8 Sm8 Rm8"');
+    expect(js()).toMatchInlineSnapshot('"  Tk91 Qk91 Sk91 Rk91"');
+    expect(overrides).toMatchInlineSnapshot('" Tm91 Qm91 Sm91 Rm91"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm91 Qm91 Sm91 Rm91"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -187,9 +187,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE8"');
-    expect(overrides).toMatchInlineSnapshot('" Nk8"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk8 gE8"');
+    expect(js()).toMatchInlineSnapshot('"  gE91"');
+    expect(overrides).toMatchInlineSnapshot('" Nk91"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk91 gE91"');
   });
 
   it('should support runtime conditions', () => {
@@ -210,32 +210,32 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .gH8 {
+        .gH91 {
           background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
         }
 
 
-        .gF8 {
+        .gF91 {
           background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
         }
 
 
-        .gE8 {
+        .gE91 {
           background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
         }
 
 
-        .pt8 {
+        .pt91 {
           color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
         }
 
 
-        .po8 {
+        .po91 {
           color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
         }
 
 
-        .pm8 {
+        .pm91 {
           color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
         }
       }
@@ -243,9 +243,9 @@ describe('style-macro', () => {
       "
     `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH8 pt8"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF8 po8"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE8 pm8"');
+    expect(js({})).toMatchInlineSnapshot('"  gH91 pt91"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF91 po91"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE91 pm91"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -264,33 +264,33 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .gH8 {
+        .gH91 {
           background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
         }
 
 
-        .gF8 {
+        .gF91 {
           background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
         }
 
 
-        .g_h8 {
+        .g_h91 {
           background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
         }
 
 
-        .g38 {
+        .g391 {
           background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
         }
       }
 
       "
     `);
-    expect(js({})).toMatchInlineSnapshot('"  gH8"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF8"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h8"');
+    expect(js({})).toMatchInlineSnapshot('"  gH91"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF91"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h91"');
     expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
-      '"  g38"'
+      '"  g391"'
     );
   });
 
@@ -305,9 +305,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY8"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe8"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw8"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY91"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe91"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw91"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -325,14 +325,14 @@ describe('style-macro', () => {
 
       @layer _.b.l {
         @media (forced-colors: active) {
-          .plb8 {
+          .plb91 {
             color: ButtonText;
           }
         }
 
 
         @media (forced-colors: active) {
-          .ple8 {
+          .ple91 {
             color: HighlightText;
           }
         }
@@ -341,8 +341,8 @@ describe('style-macro', () => {
       "
     `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb8"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple8"');
+    expect(js({})).toMatchInlineSnapshot('"  plb91"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple91"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -350,27 +350,27 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th8 Qh8 Sh8 Rh8"');
+    expect(js).toMatchInlineSnapshot('" Th91 Qh91 Sh91 Rh91"');
     expect(css).toMatchInlineSnapshot(`
       "@layer _.a;
 
       @layer _.a {
-        .Th8 {
+        .Th91 {
           padding-top: 24px;
         }
 
 
-        .Qh8 {
+        .Qh91 {
           padding-bottom: 24px;
         }
 
 
-        .Sh8 {
+        .Sh91 {
           padding-inline-start: 24px;
         }
 
 
-        .Rh8 {
+        .Rh91 {
           padding-inline-end: 24px;
         }
       }
@@ -388,7 +388,7 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .gpQzfVb8 {
+        .gpQzfVb91 {
           background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
         }
       }
@@ -409,7 +409,7 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .-FUeYm-gE8 {
+        .-FUeYm-gE91 {
           --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
         }
       }