@react-spectrum/s2 1.3.1 → 1.5.0

package/src/bar-utils.ts

@@ -13,73 +13,70 @@
 import {centerPadding} from '../style' with {type: 'macro'};
 import {controlSize, fieldInput, staticColor} from './style-utils' with {type: 'macro'};
 
-export const bar = () => ({
-  ...staticColor(),
-  position: 'relative',
-  display: 'grid',
-  gridTemplateColumns: {
-    labelPosition: {
-      top: ['1fr', 'auto'],
-      side: ['auto', '1fr']
-    }
-  },
-  gridTemplateAreas: {
-    labelPosition: {
-      top: [
-        'label value',
-        'bar bar'
-      ],
-      side: [
-        'label bar value'
-      ]
-    }
-  },
-  alignItems: 'baseline',
-  isolation: 'isolate',
-  minWidth: 48, // progress-bar-minimum-width
-  maxWidth: 768, // progress-bar-maximum-width
-  '--field-height': {
-    type: 'height',
-    value: controlSize()
-  },
-  '--track-to-label': {
-    type: 'height',
-    value: 4
-  },
-  // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.
-  // Calculate what the gap should be based on the height and line height.
-  // Use a variable here rather than rowGap since it is applied to the children as padding.
-  // This allows the gap to collapse when the label/help text is not present.
-  // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813
-  '--field-gap': {
-    type: 'rowGap',
-    value: centerPadding('calc(var(--field-height) + var(--track-to-label))')
-  },
+export const bar = () =>
+  ({
+    ...staticColor(),
+    position: 'relative',
+    display: 'grid',
+    gridTemplateColumns: {
+      labelPosition: {
+        top: ['1fr', 'auto'],
+        side: ['auto', '1fr']
+      }
+    },
+    gridTemplateAreas: {
+      labelPosition: {
+        top: ['label value', 'bar bar'],
+        side: ['label bar value']
+      }
+    },
+    alignItems: 'baseline',
+    isolation: 'isolate',
+    minWidth: 48, // progress-bar-minimum-width
+    maxWidth: 768, // progress-bar-maximum-width
+    '--field-height': {
+      type: 'height',
+      value: controlSize()
+    },
+    '--track-to-label': {
+      type: 'height',
+      value: 4
+    },
+    // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.
+    // Calculate what the gap should be based on the height and line height.
+    // Use a variable here rather than rowGap since it is applied to the children as padding.
+    // This allows the gap to collapse when the label/help text is not present.
+    // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813
+    '--field-gap': {
+      type: 'rowGap',
+      value: centerPadding('calc(var(--field-height) + var(--track-to-label))')
+    },
 
-  columnGap: 12 // spacing-200
-} as const);
+    columnGap: 12 // spacing-200
+  }) as const;
 
-export const track = () => ({
-  ...fieldInput(),
-  gridArea: 'bar',
-  overflow: 'hidden',
-  borderRadius: 'full',
-  backgroundColor: {
-    default: 'gray-300',
-    isStaticColor: 'transparent-overlay-300',
-    forcedColors: 'ButtonFace'
-  },
-  outlineWidth: {
-    default: 0,
-    forcedColors: 1
-  },
-  outlineStyle: {
-    default: 'none',
-    forcedColors: 'solid'
-  },
-  outlineColor: {
-    default: 'transparent',
-    forcedColors: 'ButtonText'
-  },
-  zIndex: 1 // to fix a weird webkit bug with rounded corners and masking
-} as const);
+export const track = () =>
+  ({
+    ...fieldInput(),
+    gridArea: 'bar',
+    overflow: 'hidden',
+    borderRadius: 'full',
+    backgroundColor: {
+      default: 'gray-300',
+      isStaticColor: 'transparent-overlay-300',
+      forcedColors: 'ButtonFace'
+    },
+    outlineWidth: {
+      default: 0,
+      forcedColors: 1
+    },
+    outlineStyle: {
+      default: 'none',
+      forcedColors: 'solid'
+    },
+    outlineColor: {
+      default: 'transparent',
+      forcedColors: 'ButtonText'
+    },
+    zIndex: 1 // to fix a weird webkit bug with rounded corners and masking
+  }) as const;

package/src/dnd-utils.tsx

@@ -0,0 +1,127 @@
+/*
+ * Copyright 2026 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 {Button} from 'react-aria-components/Button';
+import {DragAndDropContext, DropIndicator} from 'react-aria-components/useDragAndDrop';
+import DragHandle from '../ui-icons/DragHandle';
+import {ItemDropTarget} from '@react-types/shared';
+import React, {useContext} from 'react';
+import {style} from '../style' with {type: 'macro'};
+import {useVisuallyHidden} from 'react-aria/VisuallyHidden';
+
+let insertionIndicatorWrapper = style<{isDropTarget?: boolean; isRoot?: boolean}>({
+  position: 'absolute',
+  inset: 0,
+  display: 'flex',
+  alignItems: 'center',
+  marginStart: {
+    default: 'calc((var(--drop-level, 1) - 1) * var(--indent) + var(--indicator-level-padding))',
+    isRoot: 0
+  },
+  color: {
+    default: 'transparent',
+    isDropTarget: 'blue-800',
+    forcedColors: {
+      isDropTarget: 'Highlight'
+    }
+  },
+  '--indicator-circle-bg': {
+    type: 'backgroundColor',
+    value: {
+      default: 'transparent',
+      isDropTarget: 'gray-25',
+      forcedColors: {
+        isDropTarget: 'Background'
+      }
+    }
+  },
+  forcedColorAdjust: 'none'
+});
+
+export function InsertionIndicator({target}: {target: ItemDropTarget}) {
+  let {dropState} = useContext(DragAndDropContext) ?? {};
+  let level = 0;
+  if (target.type === 'item' && dropState?.collection) {
+    level = dropState.collection.getItem(target.key)?.level ?? 0;
+  }
+  return (
+    <DropIndicator className="" target={target}>
+      {({isDropTarget}) => (
+        <div
+          className={insertionIndicatorWrapper({isDropTarget, isRoot: level === 0})}
+          style={level > 0 ? ({'--drop-level': level} as React.CSSProperties) : undefined}>
+          <svg aria-hidden width="100%" height="12">
+            <line x1="0" y1="6" x2="100%" y2="6" strokeWidth="2" stroke="currentColor" />
+            <circle
+              cx="6"
+              cy="6"
+              r="5"
+              strokeWidth="2"
+              stroke="currentColor"
+              style={{fill: 'var(--indicator-circle-bg)'}}
+            />
+            <circle
+              cx="100%"
+              cy="6"
+              r="5"
+              strokeWidth="2"
+              stroke="currentColor"
+              style={{fill: 'var(--indicator-circle-bg)'}}
+              transform="translate(-6, 0)"
+            />
+          </svg>
+        </div>
+      )}
+    </DropIndicator>
+  );
+}
+
+let dragButton = style({
+  color: 'inherit',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  // TODO: arbitrary, basically taken from v3
+  height: 22,
+  width: 10,
+  padding: 0,
+  margin: 0,
+  backgroundColor: 'transparent',
+  borderStyle: 'none',
+  borderRadius: 'sm',
+  // TODO: this mimicks v3 too, do we want halo focus ring?
+  outlineStyle: {
+    default: 'none',
+    isFocusVisible: 'solid'
+  },
+  outlineColor: {
+    default: 'focus-ring',
+    forcedColors: 'Highlight'
+  },
+  outlineWidth: 2,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+
+export function DragHandleButton({isFocusVisibleWithin}: {isFocusVisibleWithin: boolean}) {
+  let {visuallyHiddenProps} = useVisuallyHidden();
+  return (
+    <Button
+      slot="drag"
+      style={!isFocusVisibleWithin ? visuallyHiddenProps.style : {}}
+      className={dragButton}>
+      <DragHandle size="M" />
+    </Button>
+  );
+}

package/src/font-faces.css

@@ -1,6 +1,12 @@
 @font-face {
-  font-family: "adobe-clean-spectrum-vf";
-  src: url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("opentype");
+  font-family: 'adobe-clean-spectrum-vf';
+  src:
+    url('https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 100 900;
@@ -8,8 +14,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-spectrum-srf-vf";
-  src: url("https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("opentype");
+  font-family: 'adobe-clean-spectrum-srf-vf';
+  src:
+    url('https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 100 1000;
@@ -18,8 +30,14 @@
 
 /* Italics are not used by Spectrum components, but may be used in user-generated content. */
 @font-face {
-  font-family: "adobe-clean-spectrum-vf";
-  src: url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff2"), url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff"), url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("opentype");
+  font-family: 'adobe-clean-spectrum-vf';
+  src:
+    url('https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3')
+      format('opentype');
   font-display: auto;
   font-style: italic;
   font-weight: 100 900;
@@ -27,8 +45,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-spectrum-srf-vf";
-  src: url("https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff2"), url("https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff"), url("https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("opentype");
+  font-family: 'adobe-clean-spectrum-srf-vf';
+  src:
+    url('https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3')
+      format('opentype');
   font-display: auto;
   font-style: italic;
   font-weight: 100 1000;
@@ -36,8 +60,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-arabic";
-  src: url("https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-family: 'adobe-clean-arabic';
+  src:
+    url('https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/ce4383/0000000000000000775e72dc/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 400;
@@ -45,8 +75,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-arabic";
-  src: url("https://use.typekit.net/af/502696/0000000000000000775e72d7/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/502696/0000000000000000775e72d7/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/502696/0000000000000000775e72d7/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("opentype");
+  font-family: 'adobe-clean-arabic';
+  src:
+    url('https://use.typekit.net/af/502696/0000000000000000775e72d7/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/502696/0000000000000000775e72d7/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/502696/0000000000000000775e72d7/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 500;
@@ -54,8 +90,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-arabic";
-  src: url("https://use.typekit.net/af/756050/0000000000000000775e72db/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/756050/0000000000000000775e72db/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/756050/0000000000000000775e72db/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-family: 'adobe-clean-arabic';
+  src:
+    url('https://use.typekit.net/af/756050/0000000000000000775e72db/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/756050/0000000000000000775e72db/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/756050/0000000000000000775e72db/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 700;
@@ -63,8 +105,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-arabic";
-  src: url("https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff2"), url("https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff"), url("https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("opentype");
+  font-family: 'adobe-clean-arabic';
+  src:
+    url('https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/6adae5/0000000000000000775e72d9/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 800;
@@ -72,8 +120,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-arabic";
-  src: url("https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("opentype");
+  font-family: 'adobe-clean-arabic';
+  src:
+    url('https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/cccd38/0000000000000000775e72dd/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 900;
@@ -81,8 +135,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-hebrew";
-  src: url("https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-family: 'adobe-clean-hebrew';
+  src:
+    url('https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/6c5b6b/0000000000000000775e7343/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 400;
@@ -90,8 +150,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-hebrew";
-  src: url("https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("opentype");
+  font-family: 'adobe-clean-hebrew';
+  src:
+    url('https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/6d4553/0000000000000000775e7345/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 500;
@@ -99,8 +165,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-hebrew";
-  src: url("https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-family: 'adobe-clean-hebrew';
+  src:
+    url('https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/f7ca66/0000000000000000775e7341/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 700;
@@ -108,8 +180,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-hebrew";
-  src: url("https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff2"), url("https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("woff"), url("https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3") format("opentype");
+  font-family: 'adobe-clean-hebrew';
+  src:
+    url('https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/329f4d/0000000000000000775e7342/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n8&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 800;
@@ -117,8 +195,14 @@
 }
 
 @font-face {
-  font-family: "adobe-clean-hebrew";
-  src: url("https://use.typekit.net/af/34b661/0000000000000000775e733f/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/34b661/0000000000000000775e733f/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/34b661/0000000000000000775e733f/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("opentype");
+  font-family: 'adobe-clean-hebrew';
+  src:
+    url('https://use.typekit.net/af/34b661/0000000000000000775e733f/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/34b661/0000000000000000775e733f/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/34b661/0000000000000000775e733f/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 900;
@@ -126,8 +210,14 @@
 }
 
 @font-face {
-  font-family: "source-code-pro";
-  src: url("https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-family: 'source-code-pro';
+  src:
+    url('https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 700;
@@ -135,10 +225,16 @@
 }
 
 @font-face {
-  font-family: "source-code-pro";
-  src: url("https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-family: 'source-code-pro';
+  src:
+    url('https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('opentype');
   font-display: auto;
   font-style: normal;
   font-weight: 400;
   font-stretch: normal;
-}
+}

package/src/page.macro.ts

@@ -13,11 +13,11 @@
 import {MacroContext} from '@parcel/macros';
 import tokens from '@adobe/spectrum-tokens/dist/json/variables.json';
 
-function colorToken(token: typeof tokens['gray-25']) {
+function colorToken(token: (typeof tokens)['gray-25']) {
   return `light-dark(${token.sets.light.value}, ${token.sets.dark.value})`;
 }
 
-function weirdColorToken(token: typeof tokens['background-layer-2-color']) {
+function weirdColorToken(token: (typeof tokens)['background-layer-2-color']) {
   return `light-dark(${token.sets.light.sets.light.value}, ${token.sets.dark.sets.dark.value})`;
 }
 

package/src/pressScale.ts

@@ -13,7 +13,30 @@
 import {composeRenderProps} from 'react-aria-components/composeRenderProps';
 import {CSSProperties, RefObject} from 'react';
 
-export function pressScale<R extends {isPressed: boolean}>(ref: RefObject<HTMLElement | null>, style?: CSSProperties | ((renderProps: R) => CSSProperties)): (renderProps: R) => CSSProperties {
+/**
+ * Returns a render prop style function that applies a subtle Spectrum "press" scale
+ * effect to an element while it is being pressed.
+ *
+ * @example
+ *   import {Button} from 'react-aria-components/Button';
+ *   import {pressScale} from '@react-spectrum/s2';
+ *   import {useRef} from 'react';
+ *
+ *   function MyButton(props) {
+ *     let ref = useRef(null);
+ *     return <Button {...props} ref={ref} style={pressScale(ref, props.style)} />;
+ *   }
+ *
+ * @param ref - A ref to the element receiving the press effect.
+ * @param style - An optional base style object, or a render prop function returning
+ *   one.
+ * @returns A render prop function suitable for passing to a React Aria component's
+ * `style` prop.
+ */
+export function pressScale<R extends {isPressed: boolean}>(
+  ref: RefObject<HTMLElement | null>,
+  style?: CSSProperties | ((renderProps: R) => CSSProperties)
+): (renderProps: R) => CSSProperties {
   return composeRenderProps(style, (style, renderProps: R) => {
     if (renderProps.isPressed && ref.current) {
       let {width = 0, height = 0} = ref.current.getBoundingClientRect() ?? {};

package/src/progress-utils.tsx

@@ -10,4 +10,4 @@
  * governing permissions and limitations under the License.
  */
 
-export const pxToRem = (px: number): string => (px / 16) + 'rem';
+export const pxToRem = (px: number): string => px / 16 + 'rem';