Merge remote-tracking branch 'origin/main' into calendar-firstDayOfWeek

examples/s2-parcel-example/src/Lazy.js

@@ -165,7 +165,7 @@ export default function Lazy() {
           The missing link.
         </Link>
         <Link href="/foo">Foo</Link>
-        <SegmentedControl aria-label="Time granularity" styles={style({width: 384})}>
+        <SegmentedControl aria-label="Time granularity" styles={style({width: 384})} isJustified>
           <SegmentedControlItem id="day">Day</SegmentedControlItem>
           <SegmentedControlItem id="week">Week</SegmentedControlItem>
           <SegmentedControlItem id="month">Month</SegmentedControlItem>

examples/s2-webpack-5-example/src/Lazy.js

@@ -165,7 +165,7 @@ export default function Lazy() {
           The missing link.
         </Link>
         <Link href="/foo">Foo</Link>
-        <SegmentedControl aria-label="Time granularity" styles={style({width: 384})}>
+        <SegmentedControl aria-label="Time granularity" styles={style({width: 384})} isJustified>
           <SegmentedControlItem id="day">Day</SegmentedControlItem>
           <SegmentedControlItem id="week">Week</SegmentedControlItem>
           <SegmentedControlItem id="month">Month</SegmentedControlItem>

packages/@react-aria/datepicker/docs/useDatePicker.mdx

@@ -461,13 +461,13 @@ function CalendarCell({state, date}) {
 ## Styled examples
 
 <ExampleCard
-  url="https://codesandbox.io/s/reverent-faraday-5nwk87?file=/src/DatePicker.js"
+  url="https://codesandbox.io/p/sandbox/great-dawn-s7d8th?file=/src/DatePicker.js"
   preview={tailwindExample}
   title="Tailwind CSS"
   description="A date picker built with Tailwind and React Aria." />
 
 <ExampleCard
-  url="https://codesandbox.io/s/white-breeze-rer8g2?file=/src/DatePicker.js"
+  url="https://codesandbox.io/p/sandbox/competent-tharp-zs37w9?file=/src/DatePicker.js"
   preview={chakraExample}
   title="Chakra UI"
   description="A date and time picker built with Chakra UI and React Aria." />

packages/@react-aria/datepicker/docs/useDateRangePicker.mdx

@@ -474,13 +474,13 @@ function CalendarCell({state, date}) {
 ## Styled examples
 
 <ExampleCard
-  url="https://codesandbox.io/s/reverent-faraday-5nwk87?file=/src/DateRangePicker.js"
+  url="https://codesandbox.io/p/sandbox/great-dawn-s7d8th?file=/src/DateRangePicker.js"
   preview={tailwindExample}
   title="Tailwind CSS"
   description="A date range picker built with Tailwind and React Aria." />
 
 <ExampleCard
-  url="https://codesandbox.io/s/white-breeze-rer8g2?file=/src/DateRangePicker.js"
+  url="https://codesandbox.io/p/sandbox/competent-tharp-zs37w9?file=/src/DateRangePicker.js"
   preview={chakraExample}
   title="Chakra UI"
   description="A date and time range picker built with Chakra UI and React Aria." />

packages/@react-aria/progress/docs/useProgressBar.mdx

@@ -212,7 +212,7 @@ The `valueLabel` prop allows the formatted value to be replaced with a custom st
 
 ### Indeterminate
 
-The `isIndeterminate` prop can be used to represent an interdeterminate operation. The `ProgressCircle` component created [above](#circular-example)
+The `isIndeterminate` prop can be used to represent an indeterminate operation. The `ProgressCircle` component created [above](#circular-example)
 implements an animation to indicate this visually.
 
 ```tsx example

packages/@react-spectrum/s2/intl/ar-AE.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "المزيد من العناصر",
   "button.pending": "قيد الانتظار",
   "contextualhelp.help": "مساعدة",
   "contextualhelp.info": "معلومات",

packages/@react-spectrum/s2/intl/bg-BG.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Още елементи",
   "button.pending": "недовършено",
   "contextualhelp.help": "Помощ",
   "contextualhelp.info": "Информация",

packages/@react-spectrum/s2/intl/el-GR.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Περισσότερα στοιχεία",
   "button.pending": "σε εκκρεμότητα",
   "contextualhelp.help": "Βοήθεια",
   "contextualhelp.info": "Πληροφορίες",

packages/@react-spectrum/s2/intl/et-EE.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Veel üksusi",
   "button.pending": "ootel",
   "contextualhelp.help": "Spikker",
   "contextualhelp.info": "Teave",

packages/@react-spectrum/s2/intl/he-IL.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "פריטים נוספים",
   "button.pending": "ממתין ל",
   "contextualhelp.help": "עזרה",
   "contextualhelp.info": "מידע",

packages/@react-spectrum/s2/intl/hr-HR.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Više stavki",
   "button.pending": "u tijeku",
   "contextualhelp.help": "Pomoć",
   "contextualhelp.info": "Informacije",

packages/@react-spectrum/s2/intl/hu-HU.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "További elemek",
   "button.pending": "függőben levő",
   "contextualhelp.help": "Súgó",
   "contextualhelp.info": "Információ",

packages/@react-spectrum/s2/intl/lt-LT.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Daugiau elementų",
   "button.pending": "laukiama",
   "contextualhelp.help": "Žinynas",
   "contextualhelp.info": "Informacija",

packages/@react-spectrum/s2/intl/lv-LV.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Vairāk vienumu",
   "button.pending": "gaida",
   "contextualhelp.help": "Palīdzība",
   "contextualhelp.info": "Informācija",

packages/@react-spectrum/s2/intl/pt-PT.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Mais artigos",
   "button.pending": "pendente",
   "contextualhelp.help": "Ajuda",
   "contextualhelp.info": "Informação",

packages/@react-spectrum/s2/intl/ro-RO.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Mai multe articole",
   "button.pending": "în așteptare",
   "contextualhelp.help": "Ajutor",
   "contextualhelp.info": "Informații",

packages/@react-spectrum/s2/intl/sk-SK.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Ďalšie položky",
   "button.pending": "čakajúce",
   "contextualhelp.help": "Pomoc",
   "contextualhelp.info": "Informácie",

packages/@react-spectrum/s2/intl/sl-SI.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Več elementov",
   "button.pending": "v teku",
   "contextualhelp.help": "Pomoč",
   "contextualhelp.info": "Informacije",

packages/@react-spectrum/s2/intl/sr-SP.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Više stavki",
   "button.pending": "nerešeno",
   "contextualhelp.help": "Pomoć",
   "contextualhelp.info": "Informacije",

packages/@react-spectrum/s2/intl/uk-UA.json

@@ -1,5 +1,5 @@
 {
-  "breadcrumbs.more": "More items",
+  "breadcrumbs.more": "Більше елементів",
   "button.pending": "в очікуванні",
   "contextualhelp.help": "Довідка",
   "contextualhelp.info": "Інформація",

packages/@react-spectrum/s2/package.json

@@ -120,7 +120,7 @@
     "postpack": "git checkout -- package.json"
   },
   "devDependencies": {
-    "@adobe/spectrum-tokens": "^13.0.0-beta.48",
+    "@adobe/spectrum-tokens": "^13.0.0-beta.53",
     "@parcel/macros": "2.12.1-canary.3165",
     "@react-aria/test-utils": "1.0.0-alpha.1"
   },

packages/@react-spectrum/s2/src/Meter.tsx

@@ -20,7 +20,7 @@ import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {size, style} from '../style' with {type: 'macro'};
+import {lightDark, size, style} from '../style' with {type: 'macro'};
 import {SkeletonWrapper} from './Skeleton';
 import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -37,8 +37,8 @@ interface MeterStyleProps {
    * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
-  /** 
-   * The static color style to apply. Useful when the button appears over a color background. 
+  /**
+   * The static color style to apply. Useful when the button appears over a color background.
    */
   staticColor?: 'white' | 'black',
   /**
@@ -82,11 +82,11 @@ const fillStyles = style<MeterStyleProps>({
   borderStyle: 'none',
   borderRadius: 'full',
   backgroundColor: {
-    default: 'informative-visual',
+    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',
     variant: {
-      positive: 'positive-visual',
-      notice: 'notice-visual',
-      negative: 'negative-visual'
+      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',
+      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',
+      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'
     },
     staticColor: {
       white: {

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -451,7 +451,6 @@ export const style = createTheme({
         isPressed: colorToken('neutral-subdued-content-color-down')
         // isSelected: colorToken('neutral-subdued-content-color-selected'),
       },
-      'neutral-visual': weirdColorToken('neutral-visual-color'),
       negative: {
         default: colorToken('negative-content-color-default'),
         isHovered: colorToken('negative-content-color-hover'),
@@ -496,26 +495,22 @@ export const style = createTheme({
         isFocusVisible: weirdColorToken('negative-background-color-key-focus'),
         isPressed: weirdColorToken('negative-background-color-down')
       },
-      'negative-visual': weirdColorToken('negative-visual-color'),
       'negative-subtle': weirdColorToken('negative-subtle-background-color-default'),
       informative: {
         default: weirdColorToken('informative-background-color-default'),
         isHovered: weirdColorToken('informative-background-color-hover'),
         isFocusVisible: weirdColorToken('informative-background-color-key-focus'),
         isPressed: weirdColorToken('informative-background-color-down')
       },
-      'informative-visual': weirdColorToken('informative-visual-color'),
       'informative-subtle': weirdColorToken('informative-subtle-background-color-default'),
       positive: {
         default: weirdColorToken('positive-background-color-default'),
         isHovered: weirdColorToken('positive-background-color-hover'),
         isFocusVisible: weirdColorToken('positive-background-color-key-focus'),
         isPressed: weirdColorToken('positive-background-color-down')
       },
-      'positive-visual': weirdColorToken('positive-visual-color'),
       'positive-subtle': weirdColorToken('positive-subtle-background-color-default'),
       notice: weirdColorToken('notice-background-color-default'),
-      'notice-visual': weirdColorToken('notice-visual-color'),
       'notice-subtle': weirdColorToken('notice-subtle-background-color-default'),
       gray: weirdColorToken('gray-background-color-default'),
       'gray-subtle': weirdColorToken('gray-subtle-background-color-default'),

packages/@react-spectrum/style-macro-s1/src/style-macro.ts

@@ -11,6 +11,9 @@
  */
 import type {Condition, CSSProperties, CSSValue, CustomValue, PropertyFunction, PropertyValueDefinition, PropertyValueMap, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
 
+// Prefix Spectrum 1 style macro classes to avoid name collisions with S2 style macro.
+const PREFIX = 's1-';
+
 export function createArbitraryProperty<T extends Value>(fn: (value: T, property: string) => CSSProperties): PropertyFunction<T> {
   return (value, property) => {
     let selector = Array.isArray(value) ? value.map(v => generateArbitraryValueSelector(String(v))).join('') : generateArbitraryValueSelector(String(value));
@@ -67,11 +70,11 @@ function mapConditionalValue<T, U>(value: PropertyValueDefinition<T>, fn: (value
   }
 }
 
-function createValueLookup(values: Array<CSSValue>, atStart = false) {
+function createValueLookup(values: Array<CSSValue>) {
   let map = new Map<CSSValue, string>();
   for (let value of values) {
     if (!map.has(value)) {
-      map.set(value, generateName(map.size, atStart));
+      map.set(value, `${PREFIX}${generateName(map.size)}`);
     }
   }
   return map;
@@ -91,8 +94,8 @@ interface MacroContext {
 }
 
 export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemeProperties<T>, 'default' | Extract<keyof T['conditions'], string>> {
-  let themePropertyMap = createValueLookup(Object.keys(theme.properties), true);
-  let themeConditionMap = createValueLookup(Object.keys(theme.conditions), true);
+  let themePropertyMap = createValueLookup(Object.keys(theme.properties));
+  let themeConditionMap = createValueLookup(Object.keys(theme.conditions));
   let propertyFunctions = new Map(Object.entries(theme.properties).map(([k, v]) => {
     if (typeof v === 'function') {
       return [k, v];
@@ -159,7 +162,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       } else {
         css += ', ';
       }
-      css += generateName(i, true);
+      css += `${PREFIX}${generateName(i)}`;
     }
     css += ';\n\n';
 
@@ -267,7 +270,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       let prelude = theme.conditions[condition] || condition;
       if (prelude.startsWith(':')) {
         return [{
-          prelude: `@layer ${generateName(priority, true)}`,
+          prelude: `@layer ${PREFIX}${generateName(priority)}`,
           body: rules.map(rule => ({prelude: rule.prelude, body: [{...rule, prelude: '&' + prelude}], condition: ''})),
           condition: ''
         }];
@@ -277,7 +280,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       return [{
         // Top level layer is based on the priority of the rule, not the condition.
         // Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
-        prelude: `@layer ${generateName(priority, true)}.${themeConditionMap.get(condition) || generateArbitraryValueSelector(condition, true)}`,
+        prelude: `@layer ${PREFIX}${generateName(priority)}.${themeConditionMap.get(condition) || generateArbitraryValueSelector(condition, true)}`,
         body: [{prelude, body: rules, condition: ''}],
         condition: ''
       }];
@@ -367,7 +370,7 @@ interface Rule {
 // This maps to an alphabet containing lower case letters, upper case letters, and numbers.
 // For numbers larger than 62, an underscore is prepended.
 // This encoding allows easy parsing to enable runtime merging by property.
-function generateName(index: number, atStart = false): string {
+function generateName(index: number): string {
   if (index < 26) {
     // lower case letters
     return String.fromCharCode(index + 97);
@@ -380,11 +383,7 @@ function generateName(index: number, atStart = false): string {
 
   if (index < 62) {
     // numbers
-    let res = String.fromCharCode((index - 52) + 48);
-    if (atStart) {
-      res = '_' + res;
-    }
-    return res;
+    return String.fromCharCode((index - 52) + 48);
   }
 
   return '_' + generateName(index - 62);

packages/dev/parcel-transformer-s2-icon/package.json

@@ -6,7 +6,7 @@
     "parcel": "^2.0.0"
   },
   "dependencies": {
-    "@adobe/spectrum-tokens": "^13.0.0-beta.48",
+    "@adobe/spectrum-tokens": "^13.0.0-beta.53",
     "@parcel/plugin": "^2.0.0",
     "@svgr/core": "^6.2.0",
     "@svgr/plugin-jsx": "^6.2.0",

packages/react-aria-components/docs/ProgressBar.mdx

@@ -201,7 +201,7 @@ A custom value scale can be used by setting the `minValue` and `maxValue` props.
 
 ### Indeterminate
 
-The `isIndeterminate` prop can be used to represent an interdeterminate operation.
+The `isIndeterminate` prop can be used to represent an indeterminate operation.
 
 ```tsx example
 <MyProgressBar

yarn.lock

@@ -145,10 +145,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@adobe/spectrum-tokens@npm:^13.0.0-beta.48":
-  version: 13.0.0-beta.49
-  resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.49"
-  checksum: 10c0/91dad202f31901a6e014a019964c1d917ef073f98debd2f04573c371109dd491ba0a942c68843358f2b3f10281737173b89daed23328f233e290e12b7faa1d49
+"@adobe/spectrum-tokens@npm:^13.0.0-beta.53":
+  version: 13.0.0-beta.53
+  resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.53"
+  checksum: 10c0/e9968e211aec06cb6af1fbc29712cafa79f0b971b4c22882c6a65f14ea8fb23afe2c81f8bbfd377bbde4332cb1dbdc873e6a32a2cc6e3933592eb5724a6ce471
   languageName: node
   linkType: hard
 
@@ -7534,7 +7534,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.48"
+    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.53"
     "@parcel/plugin": "npm:^2.0.0"
     "@svgr/core": "npm:^6.2.0"
     "@svgr/plugin-jsx": "npm:^6.2.0"
@@ -7651,7 +7651,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.48"
+    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.53"
     "@parcel/macros": "npm:2.12.1-canary.3165"
     "@react-aria/collections": "npm:3.0.0-alpha.5"
     "@react-aria/i18n": "npm:^3.12.3"