@procore/core-react 12.42.0 → 12.43.0

package/CHANGELOG.md

@@ -1,17 +1,65 @@
 # Change Log
 
+## 12.43.0
+
+### Minor Changes
+
+- ca101fc: Export type AsLinkProps and update to accept all link props
+- 2cd5b75: Add `aria-invalid` attribute to `Checkbox` component for improved accessibility
+
+### Patch Changes
+
+- e1d693b: Improve `SuperSelect` accessibility
+
+  - Single-select: `role="combobox"` -> `role="button"`, added `aria-describedby` pointing to selected value
+  - Multi-select: `role="combobox"` removed from outer container, inner input gets `role="combobox"` with `aria-activedescendant` for token navigation
+  - Removed `role="dialog"` from overlay
+  - Search input in overlay: added `role="combobox"`, `aria-haspopup="listbox"`, `aria-expanded`, `aria-activedescendant`
+  - Tokens wrapped in semantic `<ul role="list">`/`<li>` markup, removed from tab order (`tabIndex={-1}`)
+  - `aria-selected` fixed to reflect actual selection state
+  - `aria-disabled` added to disabled options
+
+- ca101fc: Fix Tabs roleless variant keyboard firing onclick twice
+- 818727f: Fix double pixel width with Selects. Continue to allow container to set/override widths
+- 5a33cc0: Fixed invalid `aria-controls` attributes in `SuperSelect` and `MultiSelect` that referenced non-existent DOM element IDs when the dropdown is closed.
+- 6a06559: Add keyboard support (Enter, Space) to open DateSelect calendar
+- ce03cf7: Updated `aria-labelledby` logic in Select (PillSelect) to properly integrate with external labels for combobox
+- d4652e3: **AnchorNavigation:** improve accessibility for in-page section navigation.
+
+  **`@procore/core-react`**
+
+  - Wrap the list in a `<nav>` landmark with a default accessible name from the new translation key `core.anchorNavigation.landmarkLabel` (English: “On this page”). Only `en.json` is updated for now; other locales can be added by localization.
+  - Add optional `aria-label` to override the default landmark name when multiple navigations need distinct names.
+  - Use `aria-current="page"` on the active section link and omit `aria-current` on inactive links.
+
+  **`@procore/core-docs`**
+
+  - Document the navigation landmark, translation key, `aria-label`, and `aria-current` behavior on the AnchorNavigation page.
+
+- 9122889: Token and FileToken: Prevent unnecessary tab stop
+- d49f826: ConfirmModal fix allow additional close methods
+- 19853ef: Typeahead component:
+
+  - Allow the Clear button to receive focus by removing `tabIndex={-1}` for better keyboard accessibility.
+  - Replace the hardcoded `aria-label` with a value from the i18n context.
+  - Update focus behavior so that focus returns to the input after pressing the Clear button via keyboard.
+
+- Updated dependencies [bf0532b]
+  - @procore/core-icons@12.15.0
+
 ## 12.42.0
 
 ### Minor Changes
 
 - 1b008b9: Update `Modal` documentation for accessibility. `Modal onClose howToClose` should be used to centralize close management, adding Esc Key support, and dialog role. Continue to use `Modal.Heading` to link the dialog to the semantic heading.
+
   - Deprecate `onClickOverlay` prop on `Modal`. Use `Modal onClose howToClose={['scrim']}` instead.
   - Deprecate `onClose` prop on `Modal.Header`. Use `Modal onClose howToClose={['x']}` instead.
   - Update `ConfirmModal` to support `role="dialog"` or `"alertdialog"` and `aria-modal`. You should opt-in to one of the roles.
   - `ConfirmModal` add support for both `ModalOnClose` and the legacy `MouseEvent<HTMLButtonElement>` callback
   - Export `ModalOnClose` type from `core-react`
   - Fix, removed duplicate id from `Modal.Header` and `Modal.Heading`
-  
+
   - bcd3b67: Enhance MenuImperative drag and drop accessibility to support keyboard navigation experience. Space Key picks up the item to drag.
 
 ### Patch Changes

package/dist/AnchorNavigation/AnchorNavigation.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StyledAnchor, StyledAnchorNavigation, StyledAnchorSection } from './AnchorNavigation.styles';
+import { useI18nContext } from '../_hooks/I18n';
+import { StyledAnchor, StyledAnchorNavigation, StyledAnchorNavigationLandmark, StyledAnchorSection } from './AnchorNavigation.styles';
 var Anchor = function Anchor(_ref) {
   var label = _ref.label,
     selected = _ref.selected,
@@ -14,7 +15,7 @@ var Anchor = function Anchor(_ref) {
     onClick: onClick,
     onKeyDown: handleKeyDown
   }, /*#__PURE__*/React.createElement(StyledAnchor, {
-    "aria-current": selected,
+    "aria-current": selected ? 'page' : undefined,
     $selected: selected,
     tabIndex: 0
   }, label));
@@ -22,8 +23,13 @@ var Anchor = function Anchor(_ref) {
 export var AnchorNavigation = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var sections = _ref2.sections,
     selected = _ref2.selected,
-    onSelect = _ref2.onSelect;
-  return /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
+    onSelect = _ref2.onSelect,
+    ariaLabelProp = _ref2['aria-label'];
+  var i18n = useI18nContext();
+  var navigationAriaLabel = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : i18n.t('core.anchorNavigation.landmarkLabel');
+  return /*#__PURE__*/React.createElement(StyledAnchorNavigationLandmark, {
+    "aria-label": navigationAriaLabel
+  }, /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
     ref: ref
   }, sections.map(function (_ref3) {
     var id = _ref3.id,
@@ -36,6 +42,6 @@ export var AnchorNavigation = /*#__PURE__*/React.forwardRef(function (_ref2, ref
       selected: selected === id,
       label: label
     });
-  }));
+  })));
 });
 //# sourceMappingURL=AnchorNavigation.js.map

package/dist/AnchorNavigation/AnchorNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorNavigation.js","names":["React","StyledAnchor","StyledAnchorNavigation","StyledAnchorSection","Anchor","_ref","label","selected","onClick","handleKeyDown","event","key","createElement","$selected","onKeyDown","tabIndex","AnchorNavigation","forwardRef","_ref2","ref","sections","onSelect","map","_ref3","id"],"sources":["../../src/AnchorNavigation/AnchorNavigation.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  StyledAnchor,\n  StyledAnchorNavigation,\n  StyledAnchorSection,\n} from './AnchorNavigation.styles'\nimport type {\n  AnchorNavigationProps,\n  AnchorProps,\n} from './AnchorNavigation.types'\n\nconst Anchor = ({ label, selected, onClick }: AnchorProps) => {\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      onClick()\n    }\n  }\n  return (\n    <StyledAnchorSection\n      $selected={selected}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n    >\n      <StyledAnchor aria-current={selected} $selected={selected} tabIndex={0}>\n        {label}\n      </StyledAnchor>\n    </StyledAnchorSection>\n  )\n}\n\nexport const AnchorNavigation = React.forwardRef<\n  HTMLUListElement,\n  AnchorNavigationProps\n>(({ sections, selected, onSelect }, ref) => {\n  return (\n    <StyledAnchorNavigation ref={ref}>\n      {sections.map(({ id, label }) => {\n        return (\n          <Anchor\n            key={id}\n            onClick={() => onSelect(id)}\n            selected={selected === id}\n            label={label}\n          />\n        )\n      })}\n    </StyledAnchorNavigation>\n  )\n})\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,mBAAmB,QACd,2BAA2B;AAMlC,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAAkD;EAAA,IAA5CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EACxC,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAA0B,EAAK;IACpD,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC9CH,OAAO,CAAC,CAAC;IACX;EACF,CAAC;EACD,oBACER,KAAA,CAAAY,aAAA,CAACT,mBAAmB;IAClBU,SAAS,EAAEN,QAAS;IACpBC,OAAO,EAAEA,OAAQ;IACjBM,SAAS,EAAEL;EAAc,gBAEzBT,KAAA,CAAAY,aAAA,CAACX,YAAY;IAAC,gBAAcM,QAAS;IAACM,SAAS,EAAEN,QAAS;IAACQ,QAAQ,EAAE;EAAE,GACpET,KACW,CACK,CAAC;AAE1B,CAAC;AAED,OAAO,IAAMU,gBAAgB,gBAAGhB,KAAK,CAACiB,UAAU,CAG9C,UAAAC,KAAA,EAAmCC,GAAG,EAAK;EAAA,IAAxCC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAEb,QAAQ,GAAAW,KAAA,CAARX,QAAQ;IAAEc,QAAQ,GAAAH,KAAA,CAARG,QAAQ;EAC/B,oBACErB,KAAA,CAAAY,aAAA,CAACV,sBAAsB;IAACiB,GAAG,EAAEA;EAAI,GAC9BC,QAAQ,CAACE,GAAG,CAAC,UAAAC,KAAA,EAAmB;IAAA,IAAhBC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAElB,KAAK,GAAAiB,KAAA,CAALjB,KAAK;IACxB,oBACEN,KAAA,CAAAY,aAAA,CAACR,MAAM;MACLO,GAAG,EAAEa,EAAG;MACRhB,OAAO,EAAE,SAATA,OAAOA,CAAA;QAAA,OAAQa,QAAQ,CAACG,EAAE,CAAC;MAAA,CAAC;MAC5BjB,QAAQ,EAAEA,QAAQ,KAAKiB,EAAG;MAC1BlB,KAAK,EAAEA;IAAM,CACd,CAAC;EAEN,CAAC,CACqB,CAAC;AAE7B,CAAC,CAAC"}
+{"version":3,"file":"AnchorNavigation.js","names":["React","useI18nContext","StyledAnchor","StyledAnchorNavigation","StyledAnchorNavigationLandmark","StyledAnchorSection","Anchor","_ref","label","selected","onClick","handleKeyDown","event","key","createElement","$selected","onKeyDown","undefined","tabIndex","AnchorNavigation","forwardRef","_ref2","ref","sections","onSelect","ariaLabelProp","i18n","navigationAriaLabel","t","map","_ref3","id"],"sources":["../../src/AnchorNavigation/AnchorNavigation.tsx"],"sourcesContent":["import React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n  StyledAnchor,\n  StyledAnchorNavigation,\n  StyledAnchorNavigationLandmark,\n  StyledAnchorSection,\n} from './AnchorNavigation.styles'\nimport type {\n  AnchorNavigationProps,\n  AnchorProps,\n} from './AnchorNavigation.types'\n\nconst Anchor = ({ label, selected, onClick }: AnchorProps) => {\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      onClick()\n    }\n  }\n  return (\n    <StyledAnchorSection\n      $selected={selected}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n    >\n      <StyledAnchor\n        aria-current={selected ? 'page' : undefined}\n        $selected={selected}\n        tabIndex={0}\n      >\n        {label}\n      </StyledAnchor>\n    </StyledAnchorSection>\n  )\n}\n\nexport const AnchorNavigation = React.forwardRef<\n  HTMLUListElement,\n  AnchorNavigationProps\n>(({ sections, selected, onSelect, 'aria-label': ariaLabelProp }, ref) => {\n  const i18n = useI18nContext()\n  const navigationAriaLabel =\n    ariaLabelProp ?? i18n.t('core.anchorNavigation.landmarkLabel')\n\n  return (\n    <StyledAnchorNavigationLandmark aria-label={navigationAriaLabel}>\n      <StyledAnchorNavigation ref={ref}>\n        {sections.map(({ id, label }) => {\n          return (\n            <Anchor\n              key={id}\n              onClick={() => onSelect(id)}\n              selected={selected === id}\n              label={label}\n            />\n          )\n        })}\n      </StyledAnchorNavigation>\n    </StyledAnchorNavigationLandmark>\n  )\n})\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,mBAAmB,QACd,2BAA2B;AAMlC,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAAkD;EAAA,IAA5CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EACxC,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAA0B,EAAK;IACpD,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC9CH,OAAO,CAAC,CAAC;IACX;EACF,CAAC;EACD,oBACEV,KAAA,CAAAc,aAAA,CAACT,mBAAmB;IAClBU,SAAS,EAAEN,QAAS;IACpBC,OAAO,EAAEA,OAAQ;IACjBM,SAAS,EAAEL;EAAc,gBAEzBX,KAAA,CAAAc,aAAA,CAACZ,YAAY;IACX,gBAAcO,QAAQ,GAAG,MAAM,GAAGQ,SAAU;IAC5CF,SAAS,EAAEN,QAAS;IACpBS,QAAQ,EAAE;EAAE,GAEXV,KACW,CACK,CAAC;AAE1B,CAAC;AAED,OAAO,IAAMW,gBAAgB,gBAAGnB,KAAK,CAACoB,UAAU,CAG9C,UAAAC,KAAA,EAAgEC,GAAG,EAAK;EAAA,IAArEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAEd,QAAQ,GAAAY,KAAA,CAARZ,QAAQ;IAAEe,QAAQ,GAAAH,KAAA,CAARG,QAAQ;IAAgBC,aAAa,GAAAJ,KAAA,CAA3B,YAAY;EAC7C,IAAMK,IAAI,GAAGzB,cAAc,CAAC,CAAC;EAC7B,IAAM0B,mBAAmB,GACvBF,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIC,IAAI,CAACE,CAAC,CAAC,qCAAqC,CAAC;EAEhE,oBACE5B,KAAA,CAAAc,aAAA,CAACV,8BAA8B;IAAC,cAAYuB;EAAoB,gBAC9D3B,KAAA,CAAAc,aAAA,CAACX,sBAAsB;IAACmB,GAAG,EAAEA;EAAI,GAC9BC,QAAQ,CAACM,GAAG,CAAC,UAAAC,KAAA,EAAmB;IAAA,IAAhBC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAEvB,KAAK,GAAAsB,KAAA,CAALtB,KAAK;IACxB,oBACER,KAAA,CAAAc,aAAA,CAACR,MAAM;MACLO,GAAG,EAAEkB,EAAG;MACRrB,OAAO,EAAE,SAATA,OAAOA,CAAA;QAAA,OAAQc,QAAQ,CAACO,EAAE,CAAC;MAAA,CAAC;MAC5BtB,QAAQ,EAAEA,QAAQ,KAAKsB,EAAG;MAC1BvB,KAAK,EAAEA;IAAM,CACd,CAAC;EAEN,CAAC,CACqB,CACM,CAAC;AAErC,CAAC,CAAC"}

package/dist/AnchorNavigation/AnchorNavigation.styles.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const StyledAnchorNavigationLandmark: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledAnchorNavigation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const StyledAnchorSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
     $selected: boolean;

package/dist/AnchorNavigation/AnchorNavigation.styles.js

@@ -3,13 +3,17 @@ import { getTypographyIntent } from '../Typography/Typography.styles';
 import { colors } from '../_styles/colors';
 import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
+export var StyledAnchorNavigationLandmark = /*#__PURE__*/styled.nav.withConfig({
+  displayName: "StyledAnchorNavigationLandmark",
+  componentId: "core-12_43_0__sc-aacdj4-0"
+})([""]);
 export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledAnchorNavigation",
-  componentId: "core-12_42_0__sc-aacdj4-0"
+  componentId: "core-12_43_0__sc-aacdj4-1"
 })(["max-width:200px;margin:0;padding-inline-start:0;"]);
 export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledAnchorSection",
-  componentId: "core-12_42_0__sc-aacdj4-1"
+  componentId: "core-12_43_0__sc-aacdj4-2"
 })(["display:flex;cursor:pointer;border-left:", "px solid ", ";background-color:", ";border-top-right-radius:4px;border-bottom-right-radius:4px;:hover{border-left:", "px solid ", ";background-color:", ";}"], spacing.xs, function (_ref) {
   var $selected = _ref.$selected;
   return $selected ? colors.gray15 : colors.gray90;
@@ -22,7 +26,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
 }, colors.gray90);
 export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledAnchor",
-  componentId: "core-12_42_0__sc-aacdj4-2"
+  componentId: "core-12_43_0__sc-aacdj4-3"
 })(["width:100%;padding:6px ", "px;", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
   var $selected = _ref4.$selected;
   return $selected ? css(["font-weight:600;"]) : '';

package/dist/AnchorNavigation/AnchorNavigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorNavigation.styles.js","names":["styled","css","getTypographyIntent","colors","getEllipsis","spacing","StyledAnchorNavigation","ul","withConfig","displayName","componentId","StyledAnchorSection","li","xs","_ref","$selected","gray15","gray90","_ref2","_ref3","gray60","StyledAnchor","a","sm","_ref4","blue50"],"sources":["../../src/AnchorNavigation/AnchorNavigation.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledAnchorNavigation = styled.ul`\n  max-width: 200px;\n  margin: 0;\n  padding-inline-start: 0;\n`\n\nexport const StyledAnchorSection = styled.li<{ $selected: boolean }>`\n  display: flex;\n  cursor: pointer;\n  border-left: ${spacing.xs}px solid\n    ${({ $selected }) => ($selected ? colors.gray15 : colors.gray90)};\n  background-color: ${({ $selected }) =>\n    $selected ? colors.gray90 : 'transparent'};\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  :hover {\n    border-left: ${spacing.xs}px solid\n      ${({ $selected }) => ($selected ? colors.gray15 : colors.gray60)};\n    background-color: ${colors.gray90};\n  }\n`\nexport const StyledAnchor = styled.a<{ $selected: boolean }>`\n  width: 100%;\n  padding: 6px ${spacing.sm}px;\n  ${getTypographyIntent('body')}\n\n  ${({ $selected }) =>\n    $selected\n      ? css`\n          font-weight: 600;\n        `\n      : ''};\n\n  ${getEllipsis()}\n\n  :focus-visible {\n    box-shadow: inset 0 0 0 2px ${colors.blue50};\n    outline: none;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,sBAAsB,gBAAGN,MAAM,CAACO,EAAE,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wDAI9C;AAED,OAAO,IAAMC,mBAAmB,gBAAGX,MAAM,CAACY,EAAE,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gNAG3BL,OAAO,CAACQ,EAAE,EACrB,UAAAC,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OAAQA,SAAS,GAAGZ,MAAM,CAACa,MAAM,GAAGb,MAAM,CAACc,MAAM;AAAA,CAAC,EAC9C,UAAAC,KAAA;EAAA,IAAGH,SAAS,GAAAG,KAAA,CAATH,SAAS;EAAA,OAC9BA,SAAS,GAAGZ,MAAM,CAACc,MAAM,GAAG,aAAa;AAAA,GAK1BZ,OAAO,CAACQ,EAAE,EACrB,UAAAM,KAAA;EAAA,IAAGJ,SAAS,GAAAI,KAAA,CAATJ,SAAS;EAAA,OAAQA,SAAS,GAAGZ,MAAM,CAACa,MAAM,GAAGb,MAAM,CAACiB,MAAM;AAAA,CAAC,EAC9CjB,MAAM,CAACc,MAAM,CAEpC;AACD,OAAO,IAAMI,YAAY,gBAAGrB,MAAM,CAACsB,CAAC,CAAAd,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mHAEnBL,OAAO,CAACkB,EAAE,EACvBrB,mBAAmB,CAAC,MAAM,CAAC,EAE3B,UAAAsB,KAAA;EAAA,IAAGT,SAAS,GAAAS,KAAA,CAATT,SAAS;EAAA,OACZA,SAAS,GACLd,GAAG,yBAGH,EAAE;AAAA,GAENG,WAAW,CAAC,CAAC,EAGiBD,MAAM,CAACsB,MAAM,CAG9C"}
+{"version":3,"file":"AnchorNavigation.styles.js","names":["styled","css","getTypographyIntent","colors","getEllipsis","spacing","StyledAnchorNavigationLandmark","nav","withConfig","displayName","componentId","StyledAnchorNavigation","ul","StyledAnchorSection","li","xs","_ref","$selected","gray15","gray90","_ref2","_ref3","gray60","StyledAnchor","a","sm","_ref4","blue50"],"sources":["../../src/AnchorNavigation/AnchorNavigation.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledAnchorNavigationLandmark = styled.nav``\n\nexport const StyledAnchorNavigation = styled.ul`\n  max-width: 200px;\n  margin: 0;\n  padding-inline-start: 0;\n`\n\nexport const StyledAnchorSection = styled.li<{ $selected: boolean }>`\n  display: flex;\n  cursor: pointer;\n  border-left: ${spacing.xs}px solid\n    ${({ $selected }) => ($selected ? colors.gray15 : colors.gray90)};\n  background-color: ${({ $selected }) =>\n    $selected ? colors.gray90 : 'transparent'};\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  :hover {\n    border-left: ${spacing.xs}px solid\n      ${({ $selected }) => ($selected ? colors.gray15 : colors.gray60)};\n    background-color: ${colors.gray90};\n  }\n`\nexport const StyledAnchor = styled.a<{ $selected: boolean }>`\n  width: 100%;\n  padding: 6px ${spacing.sm}px;\n  ${getTypographyIntent('body')}\n\n  ${({ $selected }) =>\n    $selected\n      ? css`\n          font-weight: 600;\n        `\n      : ''};\n\n  ${getEllipsis()}\n\n  :focus-visible {\n    box-shadow: inset 0 0 0 2px ${colors.blue50};\n    outline: none;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,8BAA8B,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE1D,OAAO,IAAMC,sBAAsB,gBAAGX,MAAM,CAACY,EAAE,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wDAI9C;AAED,OAAO,IAAMG,mBAAmB,gBAAGb,MAAM,CAACc,EAAE,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gNAG3BL,OAAO,CAACU,EAAE,EACrB,UAAAC,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OAAQA,SAAS,GAAGd,MAAM,CAACe,MAAM,GAAGf,MAAM,CAACgB,MAAM;AAAA,CAAC,EAC9C,UAAAC,KAAA;EAAA,IAAGH,SAAS,GAAAG,KAAA,CAATH,SAAS;EAAA,OAC9BA,SAAS,GAAGd,MAAM,CAACgB,MAAM,GAAG,aAAa;AAAA,GAK1Bd,OAAO,CAACU,EAAE,EACrB,UAAAM,KAAA;EAAA,IAAGJ,SAAS,GAAAI,KAAA,CAATJ,SAAS;EAAA,OAAQA,SAAS,GAAGd,MAAM,CAACe,MAAM,GAAGf,MAAM,CAACmB,MAAM;AAAA,CAAC,EAC9CnB,MAAM,CAACgB,MAAM,CAEpC;AACD,OAAO,IAAMI,YAAY,gBAAGvB,MAAM,CAACwB,CAAC,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mHAEnBL,OAAO,CAACoB,EAAE,EACvBvB,mBAAmB,CAAC,MAAM,CAAC,EAE3B,UAAAwB,KAAA;EAAA,IAAGT,SAAS,GAAAS,KAAA,CAATT,SAAS;EAAA,OACZA,SAAS,GACLhB,GAAG,yBAGH,EAAE;AAAA,GAENG,WAAW,CAAC,CAAC,EAGiBD,MAAM,CAACwB,MAAM,CAG9C"}

package/dist/AnchorNavigation/AnchorNavigation.types.d.ts

@@ -18,9 +18,15 @@ export interface AnchorNavigationProps {
     selected: string;
     /**
      * Callback function to update the selected section ID.
-     @since 12.18.0
+     * @since 12.18.0
      */
     onSelect: (id: string) => void;
+    /**
+     * Accessible name for the navigation landmark. When omitted, the default
+     * translated string `On this page` is used.
+     * @since 12.42.0
+     */
+    'aria-label'?: string;
 }
 export declare type AnchorProps = {
     label: string;

package/dist/AnchorNavigation/AnchorNavigation.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorNavigation.types.js","names":[],"sources":["../../src/AnchorNavigation/AnchorNavigation.types.tsx"],"sourcesContent":["export type AnchorNavigationSection = {\n  id: string\n  label: string\n}\n\nexport type AnchorNavigationElementSection = AnchorNavigationSection & {\n  element: HTMLElement\n}\n\nexport interface AnchorNavigationProps {\n  /**\n   * An array of sections used in the anchor navigation.\n   * @since 12.18.0\n   */\n  sections: AnchorNavigationSection[]\n  /**\n   * The ID of the currently selected section.\n   * @since 12.18.0\n   */\n  selected: string\n  /**\n   * Callback function to update the selected section ID.\n   @since 12.18.0\n   */\n  onSelect: (id: string) => void\n}\n\nexport type AnchorProps = {\n  label: string\n  selected: boolean\n  onClick: () => void\n}\n"],"mappings":""}
+{"version":3,"file":"AnchorNavigation.types.js","names":[],"sources":["../../src/AnchorNavigation/AnchorNavigation.types.tsx"],"sourcesContent":["export type AnchorNavigationSection = {\n  id: string\n  label: string\n}\n\nexport type AnchorNavigationElementSection = AnchorNavigationSection & {\n  element: HTMLElement\n}\n\nexport interface AnchorNavigationProps {\n  /**\n   * An array of sections used in the anchor navigation.\n   * @since 12.18.0\n   */\n  sections: AnchorNavigationSection[]\n  /**\n   * The ID of the currently selected section.\n   * @since 12.18.0\n   */\n  selected: string\n  /**\n   * Callback function to update the selected section ID.\n   * @since 12.18.0\n   */\n  onSelect: (id: string) => void\n  /**\n   * Accessible name for the navigation landmark. When omitted, the default\n   * translated string `On this page` is used.\n   * @since 12.42.0\n   */\n  'aria-label'?: string\n}\n\nexport type AnchorProps = {\n  label: string\n  selected: boolean\n  onClick: () => void\n}\n"],"mappings":""}

package/dist/Avatar/Avatar.styles.js

@@ -28,26 +28,26 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_42_0__sc-7q2ydl-0"
+  componentId: "core-12_43_0__sc-7q2ydl-0"
 })(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_42_0__sc-7q2ydl-1"
+  componentId: "core-12_43_0__sc-7q2ydl-1"
 })(["display:inline-flex;"]);
 export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabelContainer",
-  componentId: "core-12_42_0__sc-7q2ydl-2"
+  componentId: "core-12_43_0__sc-7q2ydl-2"
 })(["text-transform:uppercase;"]);
 export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortraitContainer",
-  componentId: "core-12_42_0__sc-7q2ydl-3"
+  componentId: "core-12_43_0__sc-7q2ydl-3"
 })(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
   var $imageUrl = _ref.$imageUrl;
   return css(["background-image:url(", ");"], $imageUrl);
 });
 export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarContainer",
-  componentId: "core-12_42_0__sc-7q2ydl-4"
+  componentId: "core-12_43_0__sc-7q2ydl-4"
 })(["display:inline-flex;justify-content:center;align-items:center;border-radius:100%;overflow:hidden;position:relative;cursor:default;color:", ";background-color:", ";text-decoration:none;a:has(> &){text-decoration:none;}&:focus{", "}a:focus:has(> &){", " border-radius:100%;}", " ", ";"], colors.white, colors.gray30, getGapOutlineFocus('outside'), getGapOutlineFocus('outside'), function (_ref2) {
   var _ref2$$size = _ref2.$size,
     $size = _ref2$$size === void 0 ? 'md' : _ref2$$size;