@react-spectrum/s2 0.11.0 → 0.11.2

package/icons/Skeleton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,oBAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,cAAc;YACpE,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GAAG;QAAC;KAAY;AAClB;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WAAW;kBAKV;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,mBAAW,EAAE,UAAU;YAClC,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,0BAA+B;IAElD,OAAO,UAAU;AACnB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion) {\n      // Use web animation API instead of CSS animations so that we can\n      // synchronize it between all loading elements on the page (via startTime).\n      animationRef.current = element.animate(\n        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\n        {\n          duration: 2000,\n          iterations: Infinity,\n          easing: 'ease-in-out'\n        }\n      );\n      animationRef.current.startTime = 0;\n    } else if (!isAnimating && animationRef.current) {\n      animationRef.current.cancel();\n      animationRef.current = null;\n    }\n  }, [isAnimating]);\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode,\n  className?: string,\n  ref?: Ref<HTMLElement>,\n  inert?: boolean | 'true'\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode,\n  isLoading: boolean\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\n      })}>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? cloneElement(children, {\n        ref: mergeRefs(childRef, animation),\n        className: (children.props.className || '') + ' ' + loadingStyle,\n        // @ts-ignore - compatibility with React < 19\n        inert: inertValue(true)\n      }) : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || '' as StyleString;\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,oBAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,cAAc;YACpE,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GAAG;QAAC;KAAY;AAClB;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WAAW;kBAKV;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,mBAAW,EAAE,UAAU;YAClC,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,8BAA+B;IAElD,OAAO,UAAU;AACnB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion) {\n      // Use web animation API instead of CSS animations so that we can\n      // synchronize it between all loading elements on the page (via startTime).\n      animationRef.current = element.animate(\n        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\n        {\n          duration: 2000,\n          iterations: Infinity,\n          easing: 'ease-in-out'\n        }\n      );\n      animationRef.current.startTime = 0;\n    } else if (!isAnimating && animationRef.current) {\n      animationRef.current.cancel();\n      animationRef.current = null;\n    }\n  }, [isAnimating]);\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode,\n  className?: string,\n  ref?: Ref<HTMLElement>,\n  inert?: boolean | 'true'\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode,\n  isLoading: boolean\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\n      })}>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? cloneElement(children, {\n        ref: mergeRefs(childRef, animation),\n        className: (children.props.className || '') + ' ' + loadingStyle,\n        // @ts-ignore - compatibility with React < 19\n        inert: inertValue(true)\n      }) : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || '' as StyleString;\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -80,7 +80,7 @@
     "@internationalized/date": "^3.9.0",
     "@internationalized/number": "^3.6.5",
     "@react-aria/calendar": "^3.9.1",
-    "@react-aria/collections": "3.0.0-rc.5",
+    "@react-aria/collections": "3.0.0-rc.7",
     "@react-aria/focus": "^3.21.1",
     "@react-aria/i18n": "^3.12.12",
     "@react-aria/interactions": "^3.25.5",
@@ -96,8 +96,8 @@
     "@react-types/table": "^3.13.3",
     "@react-types/textfield": "^3.12.5",
     "csstype": "^3.0.2",
-    "react-aria": "^3.43.0",
-    "react-aria-components": "^1.12.0",
+    "react-aria": "^3.43.2",
+    "react-aria-components": "^1.12.2",
     "react-stately": "^3.41.0"
   },
   "peerDependencies": {
@@ -107,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2c58ed3ddd9be9100af9b1d0cfd137fcdc95ba2d"
+  "gitHead": "7bbe432a2f3ac09448b09769b34d36d777267f2f"
 }

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

@@ -40,14 +40,14 @@ describe('style-macro', () => {
 "@layer _.a, _.b, _.c;
 
 @layer _.b {
-  .Jbs11:first-child {
+  .Jbs112:first-child {
     margin-top: 0.25rem;
   }
 }
 
 @layer _.c.p {
   @media (min-width: 64rem) {
-    .Jbpv11:first-child {
+    .Jbpv112:first-child {
       margin-top: 0.5rem;
     }
   }
@@ -55,7 +55,7 @@ describe('style-macro', () => {
 
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs11 Jbpv11"');
+    expect(js).toMatchInlineSnapshot('" Jbs112 Jbpv112"');
   });
 
   it('should support self references', () => {
@@ -69,47 +69,47 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  ._kc11 {
+  ._kc112 {
     border-top-width: 2px;
   }
 
 
-  .hc11 {
+  .hc112 {
     border-bottom-width: 2px;
   }
 
 
-  .mCPFGYc11 {
+  .mCPFGYc112 {
     border-inline-start-width: var(--m);
   }
 
 
-  .lc11 {
+  .lc112 {
     border-inline-end-width: 2px;
   }
 
 
-  .SMBFGYc11 {
+  .SMBFGYc112 {
     padding-inline-start: var(--S);
   }
 
 
-  .Rv11 {
+  .Rv112 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
 
-  .ZjUQgKd11 {
+  .ZjUQgKd112 {
     width: calc(200px - var(--m) - var(--S));
   }
 
 
-  .-m_-mc11 {
+  .-m_-mc112 {
     --m: 2px;
   }
 
 
-  .-S_-Sv11 {
+  .-S_-Sv112 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
@@ -117,7 +117,7 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js).toMatchInlineSnapshot('" _kc11 hc11 mCPFGYc11 lc11 SMBFGYc11 Rv11 ZjUQgKd11 -m_-mc11 -S_-Sv11"');
+    expect(js).toMatchInlineSnapshot('" _kc112 hc112 mCPFGYc112 lc112 SMBFGYc112 Rv112 ZjUQgKd112 -m_-mc112 -S_-Sv112"');
   });
 
   it('should support allowed overrides', () => {
@@ -134,9 +134,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw11 pg11"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb11 pHJ3AUd11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb11 pg11"');
+    expect(js()).toMatchInlineSnapshot('"  gw112 pg112"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb112 pHJ3AUd112"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb112 pg112"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -151,9 +151,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B11 __Ya11"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D11 __Ya11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D11 __Ya11"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B112 __Ya112"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D112 __Ya112"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D112 __Ya112"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -168,9 +168,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk11 Qk11 Sk11 Rk11"');
-    expect(overrides).toMatchInlineSnapshot('" Tm11 Qm11 Sm11 Rm11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm11 Qm11 Sm11 Rm11"');
+    expect(js()).toMatchInlineSnapshot('"  Tk112 Qk112 Sk112 Rk112"');
+    expect(overrides).toMatchInlineSnapshot('" Tm112 Qm112 Sm112 Rm112"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm112 Qm112 Sm112 Rm112"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -185,9 +185,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE11"');
-    expect(overrides).toMatchInlineSnapshot('" Nk11"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk11 gE11"');
+    expect(js()).toMatchInlineSnapshot('"  gE112"');
+    expect(overrides).toMatchInlineSnapshot('" Nk112"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk112 gE112"');
   });
 
   it('should support runtime conditions', () => {
@@ -208,32 +208,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH11 {
+  .gH112 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF11 {
+  .gF112 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .gE11 {
+  .gE112 {
     background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 
 
-  .pt11 {
+  .pt112 {
     color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
   }
 
 
-  .po11 {
+  .po112 {
     color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
   }
 
 
-  .pm11 {
+  .pm112 {
     color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
   }
 }
@@ -241,9 +241,9 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH11 pt11"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF11 po11"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE11 pm11"');
+    expect(js({})).toMatchInlineSnapshot('"  gH112 pt112"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF112 po112"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE112 pm112"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -262,32 +262,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH11 {
+  .gH112 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF11 {
+  .gF112 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .g_h11 {
+  .g_h112 {
     background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
   }
 
 
-  .g311 {
+  .g3112 {
     background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
   }
 }
 
 "
 `);
-    expect(js({})).toMatchInlineSnapshot('"  gH11"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF11"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h11"');
-    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g311"');
+    expect(js({})).toMatchInlineSnapshot('"  gH112"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF112"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h112"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g3112"');
   });
 
   it('should support variant runtime conditions', () => {
@@ -301,9 +301,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY11"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe11"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw11"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY112"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe112"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw112"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -321,14 +321,14 @@ describe('style-macro', () => {
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb11 {
+    .plb112 {
       color: ButtonText;
     }
   }
 
 
   @media (forced-colors: active) {
-    .ple11 {
+    .ple112 {
       color: HighlightText;
     }
   }
@@ -337,8 +337,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb11"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple11"');
+    expect(js({})).toMatchInlineSnapshot('"  plb112"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple112"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -346,27 +346,27 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th11 Qh11 Sh11 Rh11"');
+    expect(js).toMatchInlineSnapshot('" Th112 Qh112 Sh112 Rh112"');
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
 @layer _.a {
-  .Th11 {
+  .Th112 {
     padding-top: 24px;
   }
 
 
-  .Qh11 {
+  .Qh112 {
     padding-bottom: 24px;
   }
 
 
-  .Sh11 {
+  .Sh112 {
     padding-inline-start: 24px;
   }
 
 
-  .Rh11 {
+  .Rh112 {
     padding-inline-end: 24px;
   }
 }
@@ -384,7 +384,7 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gpQzfVb11 {
+  .gpQzfVb112 {
     background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
   }
 }
@@ -405,7 +405,7 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .-FUeYm-gE11 {
+  .-FUeYm-gE112 {
     --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 }

package/style/dist/main.cjs

@@ -1,22 +1,22 @@
-var $709ed173fa1293ee$exports = require("./spectrum-theme.cjs");
+var $364a8b5208b4a0ee$exports = require("./spectrum-theme.cjs");
 
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-$parcel$export(module.exports, "size", () => $e9b3cd6ccd792adf$export$346677f925de839c);
-$parcel$export(module.exports, "space", () => $e9b3cd6ccd792adf$export$a941ed4b947d12f8);
-$parcel$export(module.exports, "fontRelative", () => $e9b3cd6ccd792adf$export$ba024f4caf693d15);
-$parcel$export(module.exports, "focusRing", () => $e9b3cd6ccd792adf$export$8e24544ddba725ee);
-$parcel$export(module.exports, "iconStyle", () => $e9b3cd6ccd792adf$export$dcc3981cc6efe940);
-$parcel$export(module.exports, "baseColor", () => $709ed173fa1293ee$exports.baseColor);
-$parcel$export(module.exports, "color", () => $709ed173fa1293ee$exports.color);
-$parcel$export(module.exports, "edgeToText", () => $709ed173fa1293ee$exports.edgeToText);
-$parcel$export(module.exports, "lightDark", () => $709ed173fa1293ee$exports.lightDark);
-$parcel$export(module.exports, "linearGradient", () => $709ed173fa1293ee$exports.linearGradient);
-$parcel$export(module.exports, "colorMix", () => $709ed173fa1293ee$exports.colorMix);
-$parcel$export(module.exports, "style", () => $709ed173fa1293ee$exports.style);
+$parcel$export(module.exports, "size", () => $149d3f79c0701456$export$346677f925de839c);
+$parcel$export(module.exports, "space", () => $149d3f79c0701456$export$a941ed4b947d12f8);
+$parcel$export(module.exports, "fontRelative", () => $149d3f79c0701456$export$ba024f4caf693d15);
+$parcel$export(module.exports, "focusRing", () => $149d3f79c0701456$export$8e24544ddba725ee);
+$parcel$export(module.exports, "iconStyle", () => $149d3f79c0701456$export$dcc3981cc6efe940);
+$parcel$export(module.exports, "baseColor", () => $364a8b5208b4a0ee$exports.baseColor);
+$parcel$export(module.exports, "color", () => $364a8b5208b4a0ee$exports.color);
+$parcel$export(module.exports, "edgeToText", () => $364a8b5208b4a0ee$exports.edgeToText);
+$parcel$export(module.exports, "lightDark", () => $364a8b5208b4a0ee$exports.lightDark);
+$parcel$export(module.exports, "linearGradient", () => $364a8b5208b4a0ee$exports.linearGradient);
+$parcel$export(module.exports, "colorMix", () => $364a8b5208b4a0ee$exports.colorMix);
+$parcel$export(module.exports, "style", () => $364a8b5208b4a0ee$exports.style);
 /*
  * Copyright 2024 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -28,16 +28,16 @@ $parcel$export(module.exports, "style", () => $709ed173fa1293ee$exports.style);
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-function $e9b3cd6ccd792adf$export$346677f925de839c(px) {
-    return `[${(0, $709ed173fa1293ee$exports.size)(px)}]`;
+function $149d3f79c0701456$export$346677f925de839c(px) {
+    return `[${(0, $364a8b5208b4a0ee$exports.size)(px)}]`;
 }
-function $e9b3cd6ccd792adf$export$a941ed4b947d12f8(px) {
-    return `[${(0, $709ed173fa1293ee$exports.space)(px)}]`;
+function $149d3f79c0701456$export$a941ed4b947d12f8(px) {
+    return `[${(0, $364a8b5208b4a0ee$exports.space)(px)}]`;
 }
-function $e9b3cd6ccd792adf$export$ba024f4caf693d15(base, baseFontSize) {
-    return `[${(0, $709ed173fa1293ee$exports.fontRelative)(base, baseFontSize)}]`;
+function $149d3f79c0701456$export$ba024f4caf693d15(base, baseFontSize) {
+    return `[${(0, $364a8b5208b4a0ee$exports.fontRelative)(base, baseFontSize)}]`;
 }
-const $e9b3cd6ccd792adf$export$8e24544ddba725ee = ()=>({
+const $149d3f79c0701456$export$8e24544ddba725ee = ()=>({
         outlineStyle: {
             default: 'none',
             isFocusVisible: 'solid'
@@ -46,22 +46,22 @@ const $e9b3cd6ccd792adf$export$8e24544ddba725ee = ()=>({
         outlineWidth: 2,
         outlineOffset: 2
     });
-const $e9b3cd6ccd792adf$var$iconSizes = {
+const $149d3f79c0701456$var$iconSizes = {
     XS: 14,
     S: 16,
     M: 20,
     L: 22,
     XL: 26
 };
-function $e9b3cd6ccd792adf$export$dcc3981cc6efe940(options) {
+function $149d3f79c0701456$export$dcc3981cc6efe940(options) {
     let { size: size = 'M', color: color, ...styles } = options;
     if (color) styles['--iconPrimary'] = {
         type: 'fill',
         value: color
     };
-    styles['size'] = $e9b3cd6ccd792adf$var$iconSizes[size];
+    styles['size'] = $149d3f79c0701456$var$iconSizes[size];
     // @ts-ignore
-    return (0, $709ed173fa1293ee$exports.style).call(this, styles);
+    return (0, $364a8b5208b4a0ee$exports.style).call(this, styles);
 }
 
 

package/style/dist/module.mjs

@@ -1,4 +1,4 @@
-import {baseColor as $204ce7e475877bb1$export$49bbad2a916ab57c, color as $204ce7e475877bb1$export$35e9368ef982300f, colorMix as $204ce7e475877bb1$export$9b476054b78b89cd, edgeToText as $204ce7e475877bb1$export$17b63977b35bb6d2, fontRelative as $204ce7e475877bb1$export$ba024f4caf693d15, lightDark as $204ce7e475877bb1$export$d19e682d444755ed, linearGradient as $204ce7e475877bb1$export$46def8197cf4dd4c, size as $204ce7e475877bb1$export$346677f925de839c, space as $204ce7e475877bb1$export$a941ed4b947d12f8, style as $204ce7e475877bb1$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
+import {baseColor as $27684d56c53d4b5c$export$49bbad2a916ab57c, color as $27684d56c53d4b5c$export$35e9368ef982300f, colorMix as $27684d56c53d4b5c$export$9b476054b78b89cd, edgeToText as $27684d56c53d4b5c$export$17b63977b35bb6d2, fontRelative as $27684d56c53d4b5c$export$ba024f4caf693d15, lightDark as $27684d56c53d4b5c$export$d19e682d444755ed, linearGradient as $27684d56c53d4b5c$export$46def8197cf4dd4c, size as $27684d56c53d4b5c$export$346677f925de839c, space as $27684d56c53d4b5c$export$a941ed4b947d12f8, style as $27684d56c53d4b5c$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
 
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -11,16 +11,16 @@ import {baseColor as $204ce7e475877bb1$export$49bbad2a916ab57c, color as $204ce7
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-function $e3600291d74c3d39$export$346677f925de839c(px) {
-    return `[${(0, $204ce7e475877bb1$export$346677f925de839c)(px)}]`;
+function $d5eae7056e810ac4$export$346677f925de839c(px) {
+    return `[${(0, $27684d56c53d4b5c$export$346677f925de839c)(px)}]`;
 }
-function $e3600291d74c3d39$export$a941ed4b947d12f8(px) {
-    return `[${(0, $204ce7e475877bb1$export$a941ed4b947d12f8)(px)}]`;
+function $d5eae7056e810ac4$export$a941ed4b947d12f8(px) {
+    return `[${(0, $27684d56c53d4b5c$export$a941ed4b947d12f8)(px)}]`;
 }
-function $e3600291d74c3d39$export$ba024f4caf693d15(base, baseFontSize) {
-    return `[${(0, $204ce7e475877bb1$export$ba024f4caf693d15)(base, baseFontSize)}]`;
+function $d5eae7056e810ac4$export$ba024f4caf693d15(base, baseFontSize) {
+    return `[${(0, $27684d56c53d4b5c$export$ba024f4caf693d15)(base, baseFontSize)}]`;
 }
-const $e3600291d74c3d39$export$8e24544ddba725ee = ()=>({
+const $d5eae7056e810ac4$export$8e24544ddba725ee = ()=>({
         outlineStyle: {
             default: 'none',
             isFocusVisible: 'solid'
@@ -29,24 +29,24 @@ const $e3600291d74c3d39$export$8e24544ddba725ee = ()=>({
         outlineWidth: 2,
         outlineOffset: 2
     });
-const $e3600291d74c3d39$var$iconSizes = {
+const $d5eae7056e810ac4$var$iconSizes = {
     XS: 14,
     S: 16,
     M: 20,
     L: 22,
     XL: 26
 };
-function $e3600291d74c3d39$export$dcc3981cc6efe940(options) {
+function $d5eae7056e810ac4$export$dcc3981cc6efe940(options) {
     let { size: size = 'M', color: color, ...styles } = options;
     if (color) styles['--iconPrimary'] = {
         type: 'fill',
         value: color
     };
-    styles['size'] = $e3600291d74c3d39$var$iconSizes[size];
+    styles['size'] = $d5eae7056e810ac4$var$iconSizes[size];
     // @ts-ignore
-    return (0, $204ce7e475877bb1$export$1d567c320f4763bc).call(this, styles);
+    return (0, $27684d56c53d4b5c$export$1d567c320f4763bc).call(this, styles);
 }
 
 
-export {$e3600291d74c3d39$export$346677f925de839c as size, $e3600291d74c3d39$export$a941ed4b947d12f8 as space, $e3600291d74c3d39$export$ba024f4caf693d15 as fontRelative, $e3600291d74c3d39$export$8e24544ddba725ee as focusRing, $e3600291d74c3d39$export$dcc3981cc6efe940 as iconStyle, $204ce7e475877bb1$export$49bbad2a916ab57c as baseColor, $204ce7e475877bb1$export$35e9368ef982300f as color, $204ce7e475877bb1$export$17b63977b35bb6d2 as edgeToText, $204ce7e475877bb1$export$d19e682d444755ed as lightDark, $204ce7e475877bb1$export$46def8197cf4dd4c as linearGradient, $204ce7e475877bb1$export$9b476054b78b89cd as colorMix, $204ce7e475877bb1$export$1d567c320f4763bc as style};
+export {$d5eae7056e810ac4$export$346677f925de839c as size, $d5eae7056e810ac4$export$a941ed4b947d12f8 as space, $d5eae7056e810ac4$export$ba024f4caf693d15 as fontRelative, $d5eae7056e810ac4$export$8e24544ddba725ee as focusRing, $d5eae7056e810ac4$export$dcc3981cc6efe940 as iconStyle, $27684d56c53d4b5c$export$49bbad2a916ab57c as baseColor, $27684d56c53d4b5c$export$35e9368ef982300f as color, $27684d56c53d4b5c$export$17b63977b35bb6d2 as edgeToText, $27684d56c53d4b5c$export$d19e682d444755ed as lightDark, $27684d56c53d4b5c$export$46def8197cf4dd4c as linearGradient, $27684d56c53d4b5c$export$9b476054b78b89cd as colorMix, $27684d56c53d4b5c$export$1d567c320f4763bc as style};
 //# sourceMappingURL=module.mjs.map