@react-spectrum/s2 0.9.1 → 0.10.0

package/dist/NotificationBadge.css

@@ -1,227 +1,225 @@
 @layer _.a {
-  .sd91 {
+  .sd1 {
     display: flex;
   }
 
-  .sk91 {
+  .sk1 {
     display: none;
   }
 
-  .ug91 {
-    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  .uk1 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .va91 {
-    font-size: .6875rem;
+  .-_6BNtrc-a1 {
+    --fs: pow(1.125, -2);
   }
 
-  .vb91 {
-    font-size: .75rem;
+  .-_6BNtrc-b1 {
+    --fs: pow(1.125, -1);
   }
 
-  .vd91 {
-    font-size: .875rem;
+  .-_6BNtrc-c1 {
+    --fs: pow(1.125, 0);
   }
 
-  .wb91 {
+  .vx1 {
+    font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
+  }
+
+  .wb1 {
     font-variation-settings: "wght" 400;
   }
 
-  .xb91 {
+  .xb1 {
     font-weight: 400;
   }
 
-  ._xa91 {
+  ._xa1 {
     font-synthesis-weight: none;
   }
 
-  ._Fa91 {
-    line-height: 1.3;
+  ._Fd1 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .px91 {
+  .px1 {
     color: #fff;
   }
 
-  .ph91 {
+  .ph1 {
     color: lch(from var(--g, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  ._Ca91 {
+  ._Ca1 {
     justify-content: center;
   }
 
-  .eb91 {
+  .eb1 {
     align-items: center;
   }
 
-  .gqMFGYc91 {
+  .gqMFGYc1 {
     background-color: var(--g);
   }
 
-  .FRuFGYc91 {
+  .FRuFGYc1 {
     height: var(--F);
   }
 
-  .fa91 {
+  .fa1 {
     aspect-ratio: 1;
     aspect-ratio: 1;
   }
 
-  .ZK91 {
+  .ZK1 {
     width: max-content;
   }
 
-  .Sv91 {
+  .Sv1 {
     padding-inline-start: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .Rv91 {
+  .Rv1 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .oh91 {
+  .oh1 {
     border-start-start-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .nh91 {
+  .nh1 {
     border-start-end-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .kh91 {
+  .kh1 {
     border-end-start-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .jh91 {
+  .jh1 {
     border-end-end-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .-g_-g291 {
+  .-g_-g21 {
     --g: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .-g_-g_c91 {
+  .-g_-g_c1 {
     --g: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  .-F_-Fk91 {
+  .-F_-Fk1 {
     --F: calc(.75rem * var(--s2-scale));
   }
 
-  .-F_-FLb8KJ91 {
+  .-F_-FLb8KJ1 {
     --F: 1.28571em;
   }
 
-  .-F_-Fi91 {
+  .-F_-Fi1 {
     --F: calc(.5rem * var(--s2-scale));
   }
 
-  .-F_-Ft91 {
+  .-F_-Ft1 {
     --F: calc(1rem * var(--s2-scale));
   }
 
-  .-F_-Fm91 {
+  .-F_-Fm1 {
     --F: calc(1.125rem * var(--s2-scale));
   }
 
-  .-F_-Fspvr8c91 {
+  .-F_-Fspvr8c1 {
     --F: .857143em;
   }
 }
 
 @layer _.b {
-  .uch91:lang(ar) {
+  .uch1:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._Ffb91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    line-height: 1.5;
+  ._FezxGHba1:is(:lang(ar), :lang(he)) {
+    line-height: 1.3;
   }
 }
 
 @layer _.c {
-  .udi91:lang(he) {
+  .udi1:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
+
+  ._FnuYUweb1:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    line-height: 1.5;
+  }
 }
 
 @layer _.d {
-  .uea91:lang(ja) {
+  .uea1:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb91:lang(ko) {
+  .ugb1:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd91:lang(zh) {
+  .uhd1:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje91:lang(zh-hant) {
+  .uje1:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .uic91:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
-    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  .u2NhKxcl1:lang(zh-HK) {
+    font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
-@layer _.b.s {
-  @media not ((hover: hover) and (pointer: fine)) {
-    .vsc91 {
-      font-size: .8125rem;
-    }
-
-    .vse91 {
-      font-size: .9375rem;
-    }
-
-    .vsf91 {
-      font-size: 1.0625rem;
-    }
+@layer _.i {
+  .uic1:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb91 {
+    .plb1 {
       color: buttontext;
     }
 
-    ._jlf91 {
+    ._jlf1 {
       border-style: solid;
     }
 
-    ._klb91 {
+    ._klb1 {
       border-top-width: 1px;
     }
 
-    .hlb91 {
+    .hlb1 {
       border-bottom-width: 1px;
     }
 
-    .mlb91 {
+    .mlb1 {
       border-inline-start-width: 1px;
     }
 
-    .llb91 {
+    .llb1 {
       border-inline-end-width: 1px;
     }
 
-    .ila91 {
+    .ila1 {
       border-color: buttonborder;
     }
 
-    .-g_-lgb91 {
+    .-g_-lgb1 {
       --g: ButtonFace;
     }
   }

package/dist/NotificationBadge.css.map

@@ -1 +1 @@
-{"mappings":"AAgDc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean,\n  staticColor?: 'black' | 'white' | 'auto'\n}\n\nexport const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\n  display: {\n    default: 'flex',\n    isDisabled: 'none'\n  },\n  font: 'ui',\n  color: {\n    default: 'white',\n    isStaticColor: 'auto',\n    forcedColors: 'ButtonText'\n  },\n  fontSize: {\n    size: {\n      S: 'ui-xs',\n      M: 'ui-xs',\n      L: 'ui-sm',\n      XL: 'ui'\n    }\n  },\n  borderStyle: {\n    forcedColors: 'solid'\n  },\n  borderWidth: {\n    forcedColors: '[1px]'\n  },\n  borderColor: {\n    forcedColors: 'ButtonBorder'\n  },\n  justifyContent: 'center',\n  alignItems: 'center',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'ButtonFace'\n  },\n  height: {\n    size: {\n      S: {\n        default: 12,\n        isIndicatorOnly: 8\n      },\n      M: {\n        default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n        isIndicatorOnly: 8\n      },\n      L: {\n        default: 16,\n        isIndicatorOnly: fontRelative(12)\n      },\n      XL: {\n        default: 18,\n        isIndicatorOnly: fontRelative(12)\n      }\n    }\n  },\n  aspectRatio: {\n    isIndicatorOnly: 'square',\n    isSingleDigit: 'square'\n  },\n  width: 'max',\n  paddingX: {\n    isDoubleDigit: 'edge-to-text'\n  },\n  borderRadius: 'pill'\n}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0;  // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {notifications: formattedValue});\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.css.map"}
+{"mappings":"AAgDc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean,\n  staticColor?: 'black' | 'white' | 'auto'\n}\n\nexport const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\n  display: {\n    default: 'flex',\n    isDisabled: 'none'\n  },\n  font: 'ui',\n  color: {\n    default: 'white',\n    isStaticColor: 'auto',\n    forcedColors: 'ButtonText'\n  },\n  fontSize: {\n    size: {\n      S: 'ui-xs',\n      M: 'ui-xs',\n      L: 'ui-sm',\n      XL: 'ui'\n    }\n  },\n  borderStyle: {\n    forcedColors: 'solid'\n  },\n  borderWidth: {\n    forcedColors: '[1px]'\n  },\n  borderColor: {\n    forcedColors: 'ButtonBorder'\n  },\n  justifyContent: 'center',\n  alignItems: 'center',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'ButtonFace'\n  },\n  height: {\n    size: {\n      S: {\n        default: 12,\n        isIndicatorOnly: 8\n      },\n      M: {\n        default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n        isIndicatorOnly: 8\n      },\n      L: {\n        default: 16,\n        isIndicatorOnly: fontRelative(12)\n      },\n      XL: {\n        default: 18,\n        isIndicatorOnly: fontRelative(12)\n      }\n    }\n  },\n  aspectRatio: {\n    isIndicatorOnly: 'square',\n    isSingleDigit: 'square'\n  },\n  width: 'max',\n  paddingX: {\n    isDoubleDigit: 'edge-to-text'\n  },\n  borderRadius: 'pill'\n}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0;  // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {notifications: formattedValue});\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.css.map"}

package/dist/NotificationBadge.mjs

@@ -39,71 +39,73 @@ const $bfb270fb056fefc5$var$badge = function anonymous(props, overrides) {
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    if (props.isDisabled) rules += ' sk91';
-    else rules += ' sd91';
-    rules += ' ug91';
-    rules += ' uch91';
-    rules += ' udi91';
-    rules += ' uea91';
-    rules += ' ugb91';
-    rules += ' uhd91';
-    rules += ' uje91';
-    rules += ' uic91';
+    if (props.isDisabled) rules += ' sk1';
+    else rules += ' sd1';
+    rules += ' uk1';
+    rules += ' uch1';
+    rules += ' udi1';
+    rules += ' uea1';
+    rules += ' ugb1';
+    rules += ' uhd1';
+    rules += ' uje1';
+    rules += ' u2NhKxcl1';
+    rules += ' uic1';
     if (props.size === "XL") {
-        rules += ' vd91';
-        rules += ' vsf91';
+        rules += ' -_6BNtrc-c1';
+        rules += ' vx1';
     } else if (props.size === "L") {
-        rules += ' vb91';
-        rules += ' vse91';
+        rules += ' -_6BNtrc-b1';
+        rules += ' vx1';
     } else if (props.size === "M") {
-        rules += ' va91';
-        rules += ' vsc91';
+        rules += ' -_6BNtrc-a1';
+        rules += ' vx1';
     } else if (props.size === "S") {
-        rules += ' va91';
-        rules += ' vsc91';
+        rules += ' -_6BNtrc-a1';
+        rules += ' vx1';
     }
-    rules += ' wb91';
-    rules += ' xb91';
-    rules += ' _xa91';
-    rules += ' _Fa91';
-    rules += ' _Ffb91';
-    if (props.isStaticColor) rules += ' ph91';
-    else rules += ' px91';
-    rules += ' plb91';
-    rules += ' _jlf91';
-    rules += ' _klb91';
-    rules += ' hlb91';
-    rules += ' mlb91';
-    rules += ' llb91';
-    rules += ' ila91';
-    rules += ' _Ca91';
-    rules += ' eb91';
-    rules += ' gqMFGYc91';
-    rules += ' FRuFGYc91';
-    if (props.isSingleDigit) rules += ' fa91';
-    else if (props.isIndicatorOnly) rules += ' fa91';
-    if (!width) rules += ' ZK91';
-    if (props.isDoubleDigit) rules += ' Sv91';
-    if (props.isDoubleDigit) rules += ' Rv91';
-    rules += ' oh91';
-    rules += ' nh91';
-    rules += ' kh91';
-    rules += ' jh91';
-    if (props.isStaticColor) rules += ' -g_-g_c91';
-    else rules += ' -g_-g291';
-    rules += ' -g_-lgb91';
+    rules += ' wb1';
+    rules += ' xb1';
+    rules += ' _xa1';
+    rules += ' _Fd1';
+    rules += ' _FezxGHba1';
+    rules += ' _FnuYUweb1';
+    if (props.isStaticColor) rules += ' ph1';
+    else rules += ' px1';
+    rules += ' plb1';
+    rules += ' _jlf1';
+    rules += ' _klb1';
+    rules += ' hlb1';
+    rules += ' mlb1';
+    rules += ' llb1';
+    rules += ' ila1';
+    rules += ' _Ca1';
+    rules += ' eb1';
+    rules += ' gqMFGYc1';
+    rules += ' FRuFGYc1';
+    if (props.isSingleDigit) rules += ' fa1';
+    else if (props.isIndicatorOnly) rules += ' fa1';
+    if (!width) rules += ' ZK1';
+    if (props.isDoubleDigit) rules += ' Sv1';
+    if (props.isDoubleDigit) rules += ' Rv1';
+    rules += ' oh1';
+    rules += ' nh1';
+    rules += ' kh1';
+    rules += ' jh1';
+    if (props.isStaticColor) rules += ' -g_-g_c1';
+    else rules += ' -g_-g21';
+    rules += ' -g_-lgb1';
     if (props.size === "XL") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c91';
-        else rules += ' -F_-Fm91';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c1';
+        else rules += ' -F_-Fm1';
     } else if (props.size === "L") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c91';
-        else rules += ' -F_-Ft91';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c1';
+        else rules += ' -F_-Ft1';
     } else if (props.size === "M") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi91';
-        else rules += ' -F_-FLb8KJ91';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi1';
+        else rules += ' -F_-FLb8KJ1';
     } else if (props.size === "S") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi91';
-        else rules += ' -F_-Fk91';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi1';
+        else rules += ' -F_-Fk1';
     }
     return rules;
 };

package/dist/NotificationBadge.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAoCM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAqF;AAEzI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEC,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAA6B,EAAE,GAA2B;IACnH,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,YACP,KAAK,cACL,aAAa,oBACb,WAAW,EACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,iBAAiB;IAErB,IAAI,kBAAkB;IACtB,IAAI,gBAAgB;IACpB,IAAI,gBAAgB;IAEpB,IAAI,SAAS,MACX,kBAAkB;SACb,IAAI,SAAS,GAClB,MAAM,IAAI,MAAM;SACX,IAAI,CAAC,OAAO,SAAS,CAAC,QAC3B,MAAM,IAAI,MAAM;SACX;QACL,iBAAiB,IAAI,CAAA,GAAA,sBAAc,EAAE,QAAQ,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO;QACpE,IAAI,SAAS,KAAK,GAAG,CAAC,SAAS,KAAK,QAAQ,MAAM,KAAK,MAAM,GAAG,IAAI,GAAI,4GAA4G;QACpL,IAAI,WAAW,GACb,gBAAgB;aACX,IAAI,WAAW,GACpB,gBAAgB;QAGlB,IAAI,QAAQ,IACV,iBAAiB,gBAAgB,MAAM,CAAC,0BAA0B;YAAC,eAAe;QAAc;IAEpG;IAEA,IAAI,YAAY,KAAK,CAAC,aAAa,IAAI;IACvC,IAAI,cAAc,aAAa,iBAC7B,YAAY,gBAAgB,MAAM,CAAC;IAGrC,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,YAAY;YAAC,WAAW;QAAI,EAAE;QACjD,MAAM,aAAa;QACnB,cAAY;QACZ,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;kBAAC;6BAAM;2BAAiB;2BAAe;wBAAe;YAAY,eAAe,CAAC,CAAC;QAAW,GAAG,MAAM,MAAM;QAC/J,OAAO,MAAM,YAAY;QACzB,KAAK;kBACJ;;AAGP","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean,\n  staticColor?: 'black' | 'white' | 'auto'\n}\n\nexport const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\n  display: {\n    default: 'flex',\n    isDisabled: 'none'\n  },\n  font: 'ui',\n  color: {\n    default: 'white',\n    isStaticColor: 'auto',\n    forcedColors: 'ButtonText'\n  },\n  fontSize: {\n    size: {\n      S: 'ui-xs',\n      M: 'ui-xs',\n      L: 'ui-sm',\n      XL: 'ui'\n    }\n  },\n  borderStyle: {\n    forcedColors: 'solid'\n  },\n  borderWidth: {\n    forcedColors: '[1px]'\n  },\n  borderColor: {\n    forcedColors: 'ButtonBorder'\n  },\n  justifyContent: 'center',\n  alignItems: 'center',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'ButtonFace'\n  },\n  height: {\n    size: {\n      S: {\n        default: 12,\n        isIndicatorOnly: 8\n      },\n      M: {\n        default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n        isIndicatorOnly: 8\n      },\n      L: {\n        default: 16,\n        isIndicatorOnly: fontRelative(12)\n      },\n      XL: {\n        default: 18,\n        isIndicatorOnly: fontRelative(12)\n      }\n    }\n  },\n  aspectRatio: {\n    isIndicatorOnly: 'square',\n    isSingleDigit: 'square'\n  },\n  width: 'max',\n  paddingX: {\n    isDoubleDigit: 'edge-to-text'\n  },\n  borderRadius: 'pill'\n}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0;  // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {notifications: formattedValue});\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAoCM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAqF;AAEzI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEC,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAA6B,EAAE,GAA2B;IACnH,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,YACP,KAAK,cACL,aAAa,oBACb,WAAW,EACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,iBAAiB;IAErB,IAAI,kBAAkB;IACtB,IAAI,gBAAgB;IACpB,IAAI,gBAAgB;IAEpB,IAAI,SAAS,MACX,kBAAkB;SACb,IAAI,SAAS,GAClB,MAAM,IAAI,MAAM;SACX,IAAI,CAAC,OAAO,SAAS,CAAC,QAC3B,MAAM,IAAI,MAAM;SACX;QACL,iBAAiB,IAAI,CAAA,GAAA,sBAAc,EAAE,QAAQ,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO;QACpE,IAAI,SAAS,KAAK,GAAG,CAAC,SAAS,KAAK,QAAQ,MAAM,KAAK,MAAM,GAAG,IAAI,GAAI,4GAA4G;QACpL,IAAI,WAAW,GACb,gBAAgB;aACX,IAAI,WAAW,GACpB,gBAAgB;QAGlB,IAAI,QAAQ,IACV,iBAAiB,gBAAgB,MAAM,CAAC,0BAA0B;YAAC,eAAe;QAAc;IAEpG;IAEA,IAAI,YAAY,KAAK,CAAC,aAAa,IAAI;IACvC,IAAI,cAAc,aAAa,iBAC7B,YAAY,gBAAgB,MAAM,CAAC;IAGrC,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,YAAY;YAAC,WAAW;QAAI,EAAE;QACjD,MAAM,aAAa;QACnB,cAAY;QACZ,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;kBAAC;6BAAM;2BAAiB;2BAAe;wBAAe;YAAY,eAAe,CAAC,CAAC;QAAW,GAAG,MAAM,MAAM;QAC/J,OAAO,MAAM,YAAY;QACzB,KAAK;kBACJ;;AAGP","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean,\n  staticColor?: 'black' | 'white' | 'auto'\n}\n\nexport const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\n  display: {\n    default: 'flex',\n    isDisabled: 'none'\n  },\n  font: 'ui',\n  color: {\n    default: 'white',\n    isStaticColor: 'auto',\n    forcedColors: 'ButtonText'\n  },\n  fontSize: {\n    size: {\n      S: 'ui-xs',\n      M: 'ui-xs',\n      L: 'ui-sm',\n      XL: 'ui'\n    }\n  },\n  borderStyle: {\n    forcedColors: 'solid'\n  },\n  borderWidth: {\n    forcedColors: '[1px]'\n  },\n  borderColor: {\n    forcedColors: 'ButtonBorder'\n  },\n  justifyContent: 'center',\n  alignItems: 'center',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'ButtonFace'\n  },\n  height: {\n    size: {\n      S: {\n        default: 12,\n        isIndicatorOnly: 8\n      },\n      M: {\n        default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n        isIndicatorOnly: 8\n      },\n      L: {\n        default: 16,\n        isIndicatorOnly: fontRelative(12)\n      },\n      XL: {\n        default: 18,\n        isIndicatorOnly: fontRelative(12)\n      }\n    }\n  },\n  aspectRatio: {\n    isIndicatorOnly: 'square',\n    isSingleDigit: 'square'\n  },\n  width: 'max',\n  paddingX: {\n    isDoubleDigit: 'edge-to-text'\n  },\n  borderRadius: 'pill'\n}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0;  // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {notifications: formattedValue});\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.mjs.map"}