@astryxdesign/core 0.2.0 → 0.3.0

package/locales/en.json

@@ -11,10 +11,38 @@
     "defaultMessage": "Go to next page",
     "description": "Aria label for the next-page button."
   },
+  "@astryx.pagination.previousBy": {
+    "defaultMessage": "Go back {step, number} {step, plural, one {page} other {pages}}",
+    "description": "Aria label for the previous button when it advances more than one page per click (the `step` prop > 1). `step` is the number of pages skipped."
+  },
+  "@astryx.pagination.nextBy": {
+    "defaultMessage": "Go forward {step, number} {step, plural, one {page} other {pages}}",
+    "description": "Aria label for the next button when it advances more than one page per click (the `step` prop > 1). `step` is the number of pages skipped."
+  },
+  "@astryx.pagination.first": {
+    "defaultMessage": "Go to first page",
+    "description": "Aria label for the first-page button (« double chevron) in the input pagination variant."
+  },
+  "@astryx.pagination.last": {
+    "defaultMessage": "Go to last page",
+    "description": "Aria label for the last-page button (» double chevron) in the input pagination variant."
+  },
   "@astryx.pagination.goToPage": {
     "defaultMessage": "Go to page {page, number}",
     "description": "Aria label for an individual page-number button. `page` is 1-based."
   },
+  "@astryx.pagination.goToPageInput": {
+    "defaultMessage": "Go to page",
+    "description": "Aria label for the editable page/row number box in the input pagination variant. No number — the box holds the value itself."
+  },
+  "@astryx.pagination.pageLabel": {
+    "defaultMessage": "Page",
+    "description": "Visible label before the editable box in the input pagination variant. Example: \"Page [ 1 ] / 10\"."
+  },
+  "@astryx.pagination.ofTotalPages": {
+    "defaultMessage": "/ {total, number}",
+    "description": "Visible total shown after the editable box in the input pagination variant. Example: the \"/ 10\" in \"Page [ 1 ] / 10\"."
+  },
   "@astryx.pagination.pageIndicators": {
     "defaultMessage": "Page indicators",
     "description": "Aria label for the dots-variant page-indicator group."
@@ -235,6 +263,10 @@
     "defaultMessage": "Mobile navigation",
     "description": "Screen-reader-only accessible name for the mobile-only navigation region on small viewports. \"Mobile\" = phone/tablet (small screen), not \"movable\"."
   },
+  "@astryx.appShell.skipToContent": {
+    "defaultMessage": "Skip to content",
+    "description": "Text of the skip link — the first focusable element on the page, visible only while keyboard-focused. Activating it jumps focus past the navigation to the main content area. Imperative verb; keep short."
+  },
   "@astryx.avatar.nameWithStatus": {
     "defaultMessage": "{name}, {status}",
     "description": "Screen-reader accessible name for an Avatar showing a status indicator; composes the person's name with the status label, e.g. \"Jane Doe, Online\". {name} = the avatar's name/alt text, {status} = the status dot's label. Adjust separator and order per locale."
@@ -247,6 +279,10 @@
     "defaultMessage": "Use arrow keys to move between avatars",
     "description": "Screen-reader-only instruction attached (via aria-describedby) to a group of interactive avatars that share a single Tab stop. Tells keyboard users the Left/Right arrow keys move focus between the avatars. Only announced when the group has interactive (link/button) avatars."
   },
+  "@astryx.avatarGroup.overflow": {
+    "defaultMessage": "{count, number} more",
+    "description": "Accessible name for the \"+N\" overflow indicator at the end of an AvatarGroup — announces how many additional avatars are not shown. Example: `5 more`. The visible \"+N\" text is unaffected; this is the aria-label only."
+  },
   "@astryx.banner.dismiss": {
     "defaultMessage": "Dismiss",
     "description": "\"Dismiss\" = close/hide this notification (not \"reject a person\"). Aria label AND tooltip on the small X button on a Banner."
@@ -407,6 +443,10 @@
     "defaultMessage": "Search options",
     "description": "Screen-reader-only accessible name for that same search input inside a MultiSelector."
   },
+  "@astryx.multiSelector.selectAllPartiallySelected": {
+    "defaultMessage": "{label}, partially selected",
+    "description": "Accessible name for the MultiSelector select-all option while only some options are selected. `{label}` is the visible select-all label (e.g. \"Select all\"). ARIA forbids aria-selected=\"mixed\" on options, so the indeterminate state is conveyed through the name instead. \"Partially\" = some but not all."
+  },
   "@astryx.popover.close": {
     "defaultMessage": "Close popover",
     "description": "\"Close\" = shut/dismiss, not \"nearby\". Screen-reader-only label on the close button inside a Popover."
@@ -647,6 +687,10 @@
     "defaultMessage": "Search…",
     "description": "Grey placeholder text inside the empty PowerSearch input. Imperative verb; trailing `…` is one character."
   },
+  "@astryx.resizable.collapsed": {
+    "defaultMessage": "Collapsed",
+    "description": "aria-valuetext for the Resizable drag handle (role=separator) while its panel is collapsed to zero size. Replaces the numeric value announcement, since the numeric value is clamped to the minimum while collapsed. Adjective describing the panel state, not a verb/command."
+  },
   "@astryx.resizable.handle.label": {
     "defaultMessage": "Resize handle",
     "description": "Screen-reader-only accessible name for the small draggable divider between two Resizable panels (users drag it to change the split ratio)."
@@ -683,6 +727,10 @@
     "defaultMessage": "Expand",
     "description": "\"Expand\" = reveal more, not grow physically. Aria label AND tooltip on the same toggle when currently collapsed. Pairs with `banner.collapse`."
   },
+  "@astryx.button.loading": {
+    "defaultMessage": "Loading",
+    "description": "Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense (\"work in progress\"), not a noun. Kept separate from `typeahead.loading` — translations may diverge."
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "Expand {label}",
     "description": "Screen-reader-only label on the ChatComposerDrawer toggle when the drawer is collapsed. `{label}` is the drawer's visible name — example: `Expand Attachments`. Pairs with `collapse`."
@@ -747,6 +795,14 @@
     "defaultMessage": "Code",
     "description": "Screen-reader-only fallback name for a code-snippet scroll container when the code's language is unknown. \"Code\" = source code, not secret code or code of conduct."
   },
+  "@astryx.field.optional": {
+    "defaultMessage": "Optional",
+    "description": "Visible indicator shown next to a form field's label when the field is optional (isOptional). Mutually exclusive with the required indicator. Very short — appears inline after the label text."
+  },
+  "@astryx.field.required": {
+    "defaultMessage": "Required",
+    "description": "Visible indicator shown next to a form field's label when the field must be filled in (isRequired). Mutually exclusive with the optional indicator. Very short — appears inline after the label text."
+  },
   "@astryx.fileInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that removes the selected file from a FileInput. Example: `Clear Attachment`, `Clear Résumé`."
@@ -759,10 +815,34 @@
     "defaultMessage": "{label}, {fileNames}",
     "description": "Accessible name for a FileInput trigger that has files attached, composing the field label with the selected filenames. Example: `Attachments, report.pdf, notes.txt`."
   },
+  "@astryx.keyboardHint.toNavigate": {
+    "defaultMessage": "to navigate",
+    "description": "Trailing text in the keyboard-hint badge, shown after arrow-key icons — reads as `← → to navigate`. Lowercase sentence fragment completing the visual phrase; the badge is aria-hidden, so this is for sighted users only."
+  },
   "@astryx.lightbox.mediaViewer": {
     "defaultMessage": "Media viewer",
     "description": "Screen-reader-only fallback name for the Lightbox dialog when the current media item has no alt text. Should rarely render — consumers should provide alt."
   },
+  "@astryx.lightbox.zoom": {
+    "defaultMessage": "Zoom",
+    "description": "Screen-reader-only label on the Lightbox image acting as a zoom toggle button (aria-pressed reflects zoomed state). Verb (\"to zoom\"), very short."
+  },
+  "@astryx.lightbox.zoomedIn": {
+    "defaultMessage": "Zoomed in, use arrow keys to pan",
+    "description": "Polite screen-reader announcement after zooming into a Lightbox image, including a hint that arrow keys pan while zoomed. Pairs with `lightbox.zoomedOut`."
+  },
+  "@astryx.lightbox.zoomedOut": {
+    "defaultMessage": "Zoomed out",
+    "description": "Polite screen-reader announcement after zooming back out of a Lightbox image. Pairs with `lightbox.zoomedIn`."
+  },
+  "@astryx.metadataList.showMore": {
+    "defaultMessage": "Show more",
+    "description": "Button label under a MetadataList that reveals items hidden beyond the configured maximum. Toggles with `metadataList.showLess` — keep the pair parallel in your language."
+  },
+  "@astryx.metadataList.showLess": {
+    "defaultMessage": "Show less",
+    "description": "Button label under a MetadataList that re-hides the extra items revealed by `metadataList.showMore`. Keep the pair parallel."
+  },
   "@astryx.mobileNav.navigation": {
     "defaultMessage": "Navigation",
     "description": "Screen-reader-only fallback name for the MobileNav overlay dialog when no explicit label was passed."
@@ -835,6 +915,26 @@
     "defaultMessage": "Expand all rows",
     "description": "Screen-reader-only label on the header expand-all/collapse-all button when at least one row is collapsed (clicking expands every expandable row). Part of the four-way set."
   },
+  "@astryx.step.goToStep": {
+    "defaultMessage": "Go to step {stepNumber, number}: {label}",
+    "description": "Accessible name for a clickable step in the lab Stepper. {stepNumber} is the 1-based position, {label} is the step's visible label."
+  },
+  "@astryx.step.goToStepWithStatus": {
+    "defaultMessage": "Go to step {stepNumber, number}: {label}, {status}",
+    "description": "Accessible name for a clickable lab Stepper step that also carries a status. {status} is one of the translated `step.status.*` words (completed/warning/error). Keep the pattern parallel to `step.goToStep`."
+  },
+  "@astryx.step.status.completed": {
+    "defaultMessage": "completed",
+    "description": "Screen-reader-only status word rendered next to a lab Stepper step label when the step is done (either progress-completed or status=success). Lowercase adjective; it is read mid-sentence after the step label."
+  },
+  "@astryx.step.status.warning": {
+    "defaultMessage": "warning",
+    "description": "Screen-reader-only status word rendered next to a lab Stepper step label when status=warning. Lowercase noun/adjective; read mid-sentence after the step label."
+  },
+  "@astryx.step.status.error": {
+    "defaultMessage": "error",
+    "description": "Screen-reader-only status word rendered next to a lab Stepper step label when status=error. Lowercase noun; read mid-sentence after the step label."
+  },
   "@astryx.tableTree.collapseRow": {
     "defaultMessage": "Collapse row",
     "description": "Aria label for the Table tree-data expander chevron when the row is currently expanded."
@@ -851,6 +951,14 @@
     "defaultMessage": "Expand all rows",
     "description": "Aria label for the Table tree-data header toggle when rows are collapsed and clicking it expands them."
   },
+  "@astryx.textArea.charactersRemaining": {
+    "defaultMessage": "{count, number} {count, plural, one {character} other {characters}} remaining",
+    "description": "Screen-reader-only announcement of how many characters the user can still type before hitting a TextArea's maxLength. Announced politely as the count nears the limit. `{count}` is the number remaining — example: `12 characters remaining`."
+  },
+  "@astryx.textArea.charactersOverLimit": {
+    "defaultMessage": "{count, number} {count, plural, one {character} other {characters}} over the limit",
+    "description": "Screen-reader-only assertive announcement when the user has typed past a TextArea's maxLength. `{count}` is how many characters over — example: `3 characters over the limit`."
+  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that clears the value from a TextInput. Example: `Clear Email`, `Clear Name`."
@@ -871,6 +979,22 @@
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that clears the value from a TimeInput. Example: `Clear Start time`."
   },
+  "@astryx.timestamp.copyValue": {
+    "defaultMessage": "Copy {value}",
+    "description": "Aria label on a Timestamp copyable-hover-card row's copy button, in its default state. `value` is the formatted instant that row shows (e.g. `Copy February 19, 2026 at 5:00:00 PM UTC`). Imperative verb. Pairs with `timestamp.copied` (post-click state)."
+  },
+  "@astryx.timestamp.copy": {
+    "defaultMessage": "Copy",
+    "description": "Short label shown in the tooltip on a Timestamp copyable-hover-card row's copy button (hover/focus), in its default state. Imperative verb. Pairs with `timestamp.copied` (post-click state). The full `copyValue` string remains the button's aria-label for assistive tech."
+  },
+  "@astryx.timestamp.copied": {
+    "defaultMessage": "Copied",
+    "description": "Aria label on a Timestamp copy button for ~1.5s after a successful copy, and the text announced to a polite live region. Past-participle (\"has been copied\"); pairs with `timestamp.copyValue`."
+  },
+  "@astryx.timestamp.detailsLabel": {
+    "defaultMessage": "Timestamp details",
+    "description": "Accessible name for the Timestamp copyable hover card popup, which lists the instant in the configured time zones/formats with a copy button per row."
+  },
   "@astryx.token.remove": {
     "defaultMessage": "Remove {label}",
     "description": "Screen-reader-only label on the \"×\" on an individual Token/chip. Example: `Remove John Smith`, `Remove Active`. Imperative verb."

package/locales/pseudo.json

@@ -8,9 +8,30 @@
   "@astryx.pagination.next": {
     "defaultMessage": "⟦Ĝó ţó ñéẋţ þàĝé⟧"
   },
+  "@astryx.pagination.previousBy": {
+    "defaultMessage": "⟦Ĝó ƀàçķ {step, number} {step, plural, one {page} other {pages}}⟧"
+  },
+  "@astryx.pagination.nextBy": {
+    "defaultMessage": "⟦Ĝó ƒóřŵàřð {step, number} {step, plural, one {page} other {pages}}⟧"
+  },
+  "@astryx.pagination.first": {
+    "defaultMessage": "⟦Ĝó ţó ƒířšţ þàĝé⟧"
+  },
+  "@astryx.pagination.last": {
+    "defaultMessage": "⟦Ĝó ţó łàšţ þàĝé⟧"
+  },
   "@astryx.pagination.goToPage": {
     "defaultMessage": "⟦Ĝó ţó þàĝé {page, number}⟧"
   },
+  "@astryx.pagination.goToPageInput": {
+    "defaultMessage": "⟦Ĝó ţó þàĝé⟧"
+  },
+  "@astryx.pagination.pageLabel": {
+    "defaultMessage": "⟦Þàĝé⟧"
+  },
+  "@astryx.pagination.ofTotalPages": {
+    "defaultMessage": "⟦/ {total, number}⟧"
+  },
   "@astryx.pagination.pageIndicators": {
     "defaultMessage": "⟦Þàĝé íñðíçàţóřš⟧"
   },
@@ -176,6 +197,9 @@
   "@astryx.appShell.mobileNavigation": {
     "defaultMessage": "⟦Ṁóƀíłé ñàṽíĝàţíóñ⟧"
   },
+  "@astryx.appShell.skipToContent": {
+    "defaultMessage": "⟦Šķíþ ţó çóñţéñţ⟧"
+  },
   "@astryx.avatar.nameWithStatus": {
     "defaultMessage": "⟦{name}, {status}⟧"
   },
@@ -185,6 +209,9 @@
   "@astryx.avatarGroup.keyboardHint": {
     "defaultMessage": "⟦Úšé àřřóŵ ķéýš ţó ɱóṽé ƀéţŵééñ àṽàţàřš⟧"
   },
+  "@astryx.avatarGroup.overflow": {
+    "defaultMessage": "⟦{count, number} ɱóřé⟧"
+  },
   "@astryx.banner.dismiss": {
     "defaultMessage": "⟦Ðíšɱíšš⟧"
   },
@@ -305,6 +332,9 @@
   "@astryx.multiSelector.searchOptions": {
     "defaultMessage": "⟦Šéàřçĥ óþţíóñš⟧"
   },
+  "@astryx.multiSelector.selectAllPartiallySelected": {
+    "defaultMessage": "⟦{label}, þàřţíàłłý šéłéçţéð⟧"
+  },
   "@astryx.popover.close": {
     "defaultMessage": "⟦Çłóšé þóþóṽéř⟧"
   },
@@ -485,6 +515,9 @@
   "@astryx.powersearch.placeholder": {
     "defaultMessage": "⟦Šéàřçĥ…⟧"
   },
+  "@astryx.resizable.collapsed": {
+    "defaultMessage": "⟦Çółłàþšéð⟧"
+  },
   "@astryx.resizable.handle.label": {
     "defaultMessage": "⟦Řéšížé ĥàñðłé⟧"
   },
@@ -512,6 +545,9 @@
   "@astryx.banner.expand": {
     "defaultMessage": "⟦Éẋþàñð⟧"
   },
+  "@astryx.button.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ⟧"
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "⟦Éẋþàñð {label}⟧"
   },
@@ -560,6 +596,12 @@
   "@astryx.codeBlock.code": {
     "defaultMessage": "⟦Çóðé⟧"
   },
+  "@astryx.field.optional": {
+    "defaultMessage": "⟦Óþţíóñàł⟧"
+  },
+  "@astryx.field.required": {
+    "defaultMessage": "⟦Řéɋúířéð⟧"
+  },
   "@astryx.fileInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
@@ -569,9 +611,27 @@
   "@astryx.fileInput.triggerWithFiles": {
     "defaultMessage": "⟦{label}, {fileNames}⟧"
   },
+  "@astryx.keyboardHint.toNavigate": {
+    "defaultMessage": "⟦ţó ñàṽíĝàţé⟧"
+  },
   "@astryx.lightbox.mediaViewer": {
     "defaultMessage": "⟦Ṁéðíà ṽíéŵéř⟧"
   },
+  "@astryx.lightbox.zoom": {
+    "defaultMessage": "⟦Žóóɱ⟧"
+  },
+  "@astryx.lightbox.zoomedIn": {
+    "defaultMessage": "⟦Žóóɱéð íñ, úšé àřřóŵ ķéýš ţó þàñ⟧"
+  },
+  "@astryx.lightbox.zoomedOut": {
+    "defaultMessage": "⟦Žóóɱéð óúţ⟧"
+  },
+  "@astryx.metadataList.showMore": {
+    "defaultMessage": "⟦Šĥóŵ ɱóřé⟧"
+  },
+  "@astryx.metadataList.showLess": {
+    "defaultMessage": "⟦Šĥóŵ łéšš⟧"
+  },
   "@astryx.mobileNav.navigation": {
     "defaultMessage": "⟦Ñàṽíĝàţíóñ⟧"
   },
@@ -626,6 +686,21 @@
   "@astryx.tableRowExpansion.expandAllRows": {
     "defaultMessage": "⟦Éẋþàñð àłł řóŵš⟧"
   },
+  "@astryx.step.goToStep": {
+    "defaultMessage": "⟦Ĝó ţó šţéþ {stepNumber, number}: {label}⟧"
+  },
+  "@astryx.step.goToStepWithStatus": {
+    "defaultMessage": "⟦Ĝó ţó šţéþ {stepNumber, number}: {label}, {status}⟧"
+  },
+  "@astryx.step.status.completed": {
+    "defaultMessage": "⟦çóɱþłéţéð⟧"
+  },
+  "@astryx.step.status.warning": {
+    "defaultMessage": "⟦ŵàřñíñĝ⟧"
+  },
+  "@astryx.step.status.error": {
+    "defaultMessage": "⟦éřřóř⟧"
+  },
   "@astryx.tableTree.collapseRow": {
     "defaultMessage": "⟦Çółłàþšé řóŵ⟧"
   },
@@ -638,6 +713,12 @@
   "@astryx.tableTree.expandAllRows": {
     "defaultMessage": "⟦Éẋþàñð àłł řóŵš⟧"
   },
+  "@astryx.textArea.charactersRemaining": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {character} other {characters}} řéɱàíñíñĝ⟧"
+  },
+  "@astryx.textArea.charactersOverLimit": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {character} other {characters}} óṽéř ţĥé łíɱíţ⟧"
+  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
@@ -653,6 +734,18 @@
   "@astryx.timeInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
+  "@astryx.timestamp.copyValue": {
+    "defaultMessage": "⟦Çóþý {value}⟧"
+  },
+  "@astryx.timestamp.copy": {
+    "defaultMessage": "⟦Çóþý⟧"
+  },
+  "@astryx.timestamp.copied": {
+    "defaultMessage": "⟦Çóþíéð⟧"
+  },
+  "@astryx.timestamp.detailsLabel": {
+    "defaultMessage": "⟦Ţíɱéšţàɱþ ðéţàíłš⟧"
+  },
   "@astryx.token.remove": {
     "defaultMessage": "⟦Řéɱóṽé {label}⟧"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -64,16 +64,6 @@
       "types": "./dist/naming.d.ts",
       "default": "./dist/naming.js"
     },
-    "./config": {
-      "source": "./src/config.ts",
-      "types": "./dist/config.d.ts",
-      "default": "./dist/config.js"
-    },
-    "./authoring": {
-      "source": "./src/authoring/index.ts",
-      "types": "./dist/authoring/index.d.ts",
-      "default": "./dist/authoring/index.js"
-    },
     "./theme/tokens": {
       "source": "./src/theme/tokens.ts",
       "types": "./dist/theme/tokens.d.ts",
@@ -212,6 +202,11 @@
       "types": "./dist/CommandPalette/index.d.ts",
       "default": "./dist/CommandPalette/index.js"
     },
+    "./ComplexSelector": {
+      "source": "./src/ComplexSelector/index.ts",
+      "types": "./dist/ComplexSelector/index.d.ts",
+      "default": "./dist/ComplexSelector/index.js"
+    },
     "./ContextMenu": {
       "source": "./src/ContextMenu/index.ts",
       "types": "./dist/ContextMenu/index.d.ts",
@@ -654,7 +649,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.29.7",
+    "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",
     "@babel/preset-typescript": "^7.29.7",
@@ -662,14 +657,15 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "@astryxdesign/cli": "0.3.0"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"
   },
   "scripts": {
     "postinstall": "node scripts/postinstall.mjs",
-    "build": "rimraf dist && pnpm build:i18n && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css && pnpm build:umd && node ../../scripts/check-no-dev-jsx.mjs",
+    "build": "rimraf dist && pnpm build:i18n && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css && pnpm build:umd && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",
     "build:i18n": "node scripts/build-pseudo-locale.mjs",
     "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.json",
     "build:css": "node ../../scripts/build-css.mjs",

package/src/AlertDialog/AlertDialog.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'AlertDialog',
@@ -30,7 +30,7 @@ export const docs = {
   },
   // Intentionally a contained isInline preview, not playground.overlay: the
   // component stays visible on load and knobs stay live, whereas a real
-  // showModal() overlay makes the page inert — see PlaygroundConfig.overlay
+  // showModal() overlay makes the page inert — see ComponentPlaygroundConfig.overlay
   // in docs-types.ts (#3657).
   playground: {
     defaults: {
@@ -120,7 +120,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Confirms destructive/irreversible action before it happens (delete, revoke access, discard unsaved changes).',
   usage: {

package/src/AlertDialog/AlertDialog.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/AlertDialog/AlertDialog.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/AlertDialog/index.ts (exports if types change)
  * - /apps/storybook/stories/AlertDialog.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/AlertDialog/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
  */
 
 import React, {useId, useCallback} from 'react';

package/src/AlertDialog/useImperativeAlertDialog.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'useImperativeAlertDialog',

package/src/AppShell/AppShell.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'AppShell',
@@ -120,7 +120,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'AppShell',
   displayName: 'App Shell',
@@ -182,7 +182,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'app-level layout shell w/ header, side nav, main content; composes Layout internally, replaces Page+PageLayout',

package/src/AppShell/AppShell.test.tsx

@@ -20,6 +20,7 @@ import {
 } from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import {AppShell} from './AppShell';
+import {InternationalizationProvider} from '../i18n';
 import {MobileNav} from '../MobileNav';
 import {SideNav, SideNavItem, SideNavSection} from '../SideNav';
 import {TopNav, TopNavHeading, TopNavItem} from '../TopNav';
@@ -205,6 +206,60 @@ describe('AppShell', () => {
     expect(main).toHaveAttribute('id', 'astryx-app-shell-main');
   });
 
+  it('moves focus to the main content when the skip link is activated', () => {
+    render(
+      <AppShell>
+        <div>Content</div>
+      </AppShell>,
+    );
+    const skipLink = screen.getByTestId('skip-to-content');
+    const main = screen.getByRole('main');
+    // The target must be programmatically focusable for focus to move
+    expect(main).toHaveAttribute('tabindex', '-1');
+    fireEvent.click(skipLink);
+    expect(document.activeElement).toBe(main);
+  });
+
+  it('skip link text comes from the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="en"
+        overrides={{en: {'@astryx.appShell.skipToContent': 'Jump to main'}}}>
+        <AppShell>
+          <div>Content</div>
+        </AppShell>
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByTestId('skip-to-content').textContent).toBe(
+      'Jump to main',
+    );
+  });
+
+  // ===========================================================================
+  // Banner landmark
+  // ===========================================================================
+
+  it('exposes the header region as a banner landmark', () => {
+    render(
+      <AppShell topNav={<div>Top Nav</div>}>
+        <div>Content</div>
+      </AppShell>,
+    );
+    const banner = screen.getByRole('banner');
+    expect(banner).toBeInTheDocument();
+    // banner must be top-level — not nested inside another landmark
+    expect(screen.getByRole('main')).not.toContainElement(banner);
+  });
+
+  it('does not render a banner landmark without header content', () => {
+    render(
+      <AppShell>
+        <div>Content</div>
+      </AppShell>,
+    );
+    expect(screen.queryByRole('banner')).not.toBeInTheDocument();
+  });
+
   // ===========================================================================
   // SideNav accessibility
   // ===========================================================================