@astryxdesign/core 0.7.1 → 0.7.2-canary.01eab6a

package/locales/pseudo.json

@@ -395,6 +395,63 @@
   "@astryx.listInput.announceAlreadyAtBoundary": {
     "defaultMessage": "⟦Ţĥíš {itemName} íš àłřéàðý {boundary, select, first {first} last {last} other {}}.⟧"
   },
+  "@astryx.diffViewer.label": {
+    "defaultMessage": "⟦Ð탃⟧"
+  },
+  "@astryx.diffViewer.renamedPath": {
+    "defaultMessage": "⟦{oldPath} → {newPath}⟧"
+  },
+  "@astryx.diffViewer.statusAdded": {
+    "defaultMessage": "⟦Àððéð⟧"
+  },
+  "@astryx.diffViewer.statusDeleted": {
+    "defaultMessage": "⟦Ðéłéţéð⟧"
+  },
+  "@astryx.diffViewer.statusRenamed": {
+    "defaultMessage": "⟦Řéñàɱéð⟧"
+  },
+  "@astryx.diffViewer.addedCount": {
+    "defaultMessage": "⟦+{count, number}⟧"
+  },
+  "@astryx.diffViewer.removedCount": {
+    "defaultMessage": "⟦−{count, number}⟧"
+  },
+  "@astryx.diffViewer.stats": {
+    "defaultMessage": "⟦{added, plural, one {# line added} other {# lines added}}, {removed, plural, one {# line removed} other {# lines removed}}⟧"
+  },
+  "@astryx.diffViewer.added": {
+    "defaultMessage": "⟦Àððéð⟧"
+  },
+  "@astryx.diffViewer.removed": {
+    "defaultMessage": "⟦Řéɱóṽéð⟧"
+  },
+  "@astryx.diffViewer.lineNumberButton": {
+    "defaultMessage": "⟦{side, select, old {Original line {line, number}} other {Changed line {line, number}}}⟧"
+  },
+  "@astryx.diffViewer.columnOldLine": {
+    "defaultMessage": "⟦Óříĝíñàł łíñé ñúɱƀéř⟧"
+  },
+  "@astryx.diffViewer.columnNewLine": {
+    "defaultMessage": "⟦Çĥàñĝéð łíñé ñúɱƀéř⟧"
+  },
+  "@astryx.diffViewer.columnChange": {
+    "defaultMessage": "⟦Çĥàñĝé⟧"
+  },
+  "@astryx.diffViewer.columnCode": {
+    "defaultMessage": "⟦Çóðé⟧"
+  },
+  "@astryx.diffViewer.columnOldCode": {
+    "defaultMessage": "⟦Óříĝíñàł çóðé⟧"
+  },
+  "@astryx.diffViewer.columnNewCode": {
+    "defaultMessage": "⟦Çĥàñĝéð çóðé⟧"
+  },
+  "@astryx.diffViewer.binary": {
+    "defaultMessage": "⟦Ɓíñàřý ƒíłé ñóţ šĥóŵñ⟧"
+  },
+  "@astryx.diffViewer.noChanges": {
+    "defaultMessage": "⟦Ñó çóñţéñţ çĥàñĝéš⟧"
+  },
   "@astryx.markdownHeadingLinks.copied": {
     "defaultMessage": "⟦Łíñķ çóþíéð⟧"
   },
@@ -1231,5 +1288,281 @@
   },
   "@astryx.transferListSelector.triggerLabel": {
     "defaultMessage": "⟦{count, number} šéłéçţéð⟧"
+  },
+  "@astryx.emojiPicker.label": {
+    "defaultMessage": "⟦Éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.searchLabel": {
+    "defaultMessage": "⟦Šéàřçĥ éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.frequentlyUsed": {
+    "defaultMessage": "⟦Ƒřéɋúéñţłý úšéð⟧"
+  },
+  "@astryx.emojiPicker.searchResults": {
+    "defaultMessage": "⟦Šéàřçĥ řéšúłţš⟧"
+  },
+  "@astryx.emojiPicker.noResults": {
+    "defaultMessage": "⟦Ñó éɱóĵí ɱàţçĥ “{query}”⟧"
+  },
+  "@astryx.emojiPicker.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.loadFailed": {
+    "defaultMessage": "⟦Ṁóřé éɱóĵí çóúłðñ'ţ ƀé łóàðéð.⟧"
+  },
+  "@astryx.emojiPicker.groupSmileysEmotion": {
+    "defaultMessage": "⟦Šɱíłéýš & éɱóţíóñ⟧"
+  },
+  "@astryx.emojiPicker.groupPeopleBody": {
+    "defaultMessage": "⟦Þéóþłé & ƀóðý⟧"
+  },
+  "@astryx.emojiPicker.groupAnimalsNature": {
+    "defaultMessage": "⟦Àñíɱàłš & ñàţúřé⟧"
+  },
+  "@astryx.emojiPicker.groupFoodDrink": {
+    "defaultMessage": "⟦Ƒóóð & ðříñķ⟧"
+  },
+  "@astryx.emojiPicker.groupTravelPlaces": {
+    "defaultMessage": "⟦Ţřàṽéł & þłàçéš⟧"
+  },
+  "@astryx.emojiPicker.groupActivities": {
+    "defaultMessage": "⟦Àçţíṽíţíéš⟧"
+  },
+  "@astryx.emojiPicker.groupObjects": {
+    "defaultMessage": "⟦Óƀĵéçţš⟧"
+  },
+  "@astryx.emojiPicker.groupSymbols": {
+    "defaultMessage": "⟦Šýɱƀółš⟧"
+  },
+  "@astryx.emojiPicker.groupFlags": {
+    "defaultMessage": "⟦Ƒłàĝš⟧"
+  },
+  "@astryx.comments.retry": {
+    "defaultMessage": "⟦Řéţřý⟧"
+  },
+  "@astryx.commentComposer.placeholder": {
+    "defaultMessage": "⟦Ŵříţé à çóɱɱéñţ…⟧"
+  },
+  "@astryx.commentComposer.noAgents": {
+    "defaultMessage": "⟦Ñó àĝéñţš⟧"
+  },
+  "@astryx.commentComposer.agents": {
+    "defaultMessage": "⟦Àĝéñţš⟧"
+  },
+  "@astryx.commentComposer.uploadFailed": {
+    "defaultMessage": "⟦Íɱàĝéš çóúłðñ'ţ ƀé àððéð⟧"
+  },
+  "@astryx.commentComposer.imagesOnly": {
+    "defaultMessage": "⟦Óñłý íɱàĝé ƒíłéš çàñ ƀé àððéð⟧"
+  },
+  "@astryx.commentComposer.chooseImages": {
+    "defaultMessage": "⟦Çĥóóšé íɱàĝéš⟧"
+  },
+  "@astryx.commentComposer.imageAlt": {
+    "defaultMessage": "⟦Íɱàĝé àţţàçĥɱéñţ⟧"
+  },
+  "@astryx.commentComposer.removeQuote": {
+    "defaultMessage": "⟦Řéɱóṽé ɋúóţéð ţéẋţ⟧"
+  },
+  "@astryx.commentComposer.attachImages": {
+    "defaultMessage": "⟦Àţţàçĥ íɱàĝéš⟧"
+  },
+  "@astryx.commentComposer.addEmoji": {
+    "defaultMessage": "⟦Àðð éɱóĵí⟧"
+  },
+  "@astryx.commentComposer.cancel": {
+    "defaultMessage": "⟦Çàñçéł⟧"
+  },
+  "@astryx.comments.actionsLabel": {
+    "defaultMessage": "⟦Àçţíóñš ƒóř {name}'š çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.addReaction": {
+    "defaultMessage": "⟦Àðð řéàçţíóñ⟧"
+  },
+  "@astryx.comments.agentBadge": {
+    "defaultMessage": "⟦Àĝéñţ⟧"
+  },
+  "@astryx.comments.agentLogo": {
+    "defaultMessage": "⟦{name} łóĝó⟧"
+  },
+  "@astryx.comments.chooseReaction": {
+    "defaultMessage": "⟦Çĥóóšé à řéàçţíóñ⟧"
+  },
+  "@astryx.comments.copyLink": {
+    "defaultMessage": "⟦Çóþý çóɱɱéñţ łíñķ⟧"
+  },
+  "@astryx.comments.currentVersion": {
+    "defaultMessage": "⟦Çúřřéñţ ṽéřšíóñ⟧"
+  },
+  "@astryx.comments.delete": {
+    "defaultMessage": "⟦Ðéłéţé⟧"
+  },
+  "@astryx.comments.deleteDescription": {
+    "defaultMessage": "⟦Ðéłéţé {name}'š çóɱɱéñţ? Ţĥíš àçţíóñ çàññóţ ƀé úñðóñé.⟧"
+  },
+  "@astryx.comments.deleteFailed": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ çóúłðñ'ţ ƀé ðéłéţéð.⟧"
+  },
+  "@astryx.comments.deleteFailedRetry": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ çóúłðñ'ţ ƀé ðéłéţéð. Ţřý àĝàíñ.⟧"
+  },
+  "@astryx.comments.deleteTitle": {
+    "defaultMessage": "⟦Ðéłéţé çóɱɱéñţ?⟧"
+  },
+  "@astryx.comments.edit": {
+    "defaultMessage": "⟦Éðíţ⟧"
+  },
+  "@astryx.comments.editFailed": {
+    "defaultMessage": "⟦Ýóúř éðíţ çóúłðñ'ţ ƀé šàṽéð.⟧"
+  },
+  "@astryx.comments.editPlaceholder": {
+    "defaultMessage": "⟦Éðíţ çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.edited": {
+    "defaultMessage": "⟦Éðíţéð⟧"
+  },
+  "@astryx.comments.editingContext": {
+    "defaultMessage": "⟦Éðíţíñĝ çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.hideReplies": {
+    "defaultMessage": "⟦Ĥíðé řéþłíéš⟧"
+  },
+  "@astryx.comments.historyEmptyDescription": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ ĥàš ñó éàřłíéř ṽéřšíóñš.⟧"
+  },
+  "@astryx.comments.historyEmptyTitle": {
+    "defaultMessage": "⟦Ñó éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.historyFailed": {
+    "defaultMessage": "⟦Éðíţ ĥíšţóřý çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.historyLoadFailed": {
+    "defaultMessage": "⟦Ţĥé çóɱɱéñţ'š éðíţ ĥíšţóřý çóúłðñ'ţ ƀé łóàðéð. Ţřý àĝàíñ.⟧"
+  },
+  "@astryx.comments.historyLoading": {
+    "defaultMessage": "⟦Łóàðíñĝ éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.historySubtitle": {
+    "defaultMessage": "⟦Çóɱɱéñţ ƀý {name}⟧"
+  },
+  "@astryx.comments.historyTitle": {
+    "defaultMessage": "⟦Éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.linkCopied": {
+    "defaultMessage": "⟦Çóɱɱéñţ łíñķ çóþíéð⟧"
+  },
+  "@astryx.comments.otherReactors": {
+    "defaultMessage": "⟦{count, plural, one {# other} other {# others}}⟧"
+  },
+  "@astryx.comments.outdated": {
+    "defaultMessage": "⟦Óúţðàţéð⟧"
+  },
+  "@astryx.comments.reactionCelebrate": {
+    "defaultMessage": "⟦Çéłéƀřàţé⟧"
+  },
+  "@astryx.comments.reactionCount": {
+    "defaultMessage": "⟦{reaction}: {count, number}⟧"
+  },
+  "@astryx.comments.reactionFailed": {
+    "defaultMessage": "⟦Ýóúř řéàçţíóñ çóúłðñ'ţ ƀé šàṽéð.⟧"
+  },
+  "@astryx.comments.reactionLaugh": {
+    "defaultMessage": "⟦Ĥàĥà⟧"
+  },
+  "@astryx.comments.reactionLike": {
+    "defaultMessage": "⟦Łíķé⟧"
+  },
+  "@astryx.comments.reactionLove": {
+    "defaultMessage": "⟦Łóṽé⟧"
+  },
+  "@astryx.comments.reactionSad": {
+    "defaultMessage": "⟦Šàð⟧"
+  },
+  "@astryx.comments.reactionWow": {
+    "defaultMessage": "⟦Ŵóŵ⟧"
+  },
+  "@astryx.comments.reopen": {
+    "defaultMessage": "⟦Řéóþéñ⟧"
+  },
+  "@astryx.comments.reopenFailed": {
+    "defaultMessage": "⟦Ţĥíš ţĥřéàð çóúłðñ'ţ ƀé řéóþéñéð.⟧"
+  },
+  "@astryx.comments.reply": {
+    "defaultMessage": "⟦Řéþłý⟧"
+  },
+  "@astryx.comments.replyFailed": {
+    "defaultMessage": "⟦Ýóúř řéþłý çóúłðñ'ţ ƀé þóšţéð.⟧"
+  },
+  "@astryx.comments.replyPlaceholder": {
+    "defaultMessage": "⟦Řéþłý ţó {name}…⟧"
+  },
+  "@astryx.comments.replyingContext": {
+    "defaultMessage": "⟦Řéþłýíñĝ ţó {name}⟧"
+  },
+  "@astryx.comments.resolve": {
+    "defaultMessage": "⟦Ṁàřķ àš řéšółṽéð⟧"
+  },
+  "@astryx.comments.resolveFailed": {
+    "defaultMessage": "⟦Ţĥíš ţĥřéàð çóúłðñ'ţ ƀé řéšółṽéð.⟧"
+  },
+  "@astryx.comments.resolved": {
+    "defaultMessage": "⟦Řéšółṽéð⟧"
+  },
+  "@astryx.comments.resolvedBy": {
+    "defaultMessage": "⟦Řéšółṽéð ƀý {name}⟧"
+  },
+  "@astryx.comments.retryFailed": {
+    "defaultMessage": "⟦Řéţřýíñĝ ðíðñ'ţ ŵóřķ.⟧"
+  },
+  "@astryx.comments.sendFailed": {
+    "defaultMessage": "⟦Çóúłðñ'ţ šéñð ţĥíš çóɱɱéñţ.⟧"
+  },
+  "@astryx.comments.threadLabel": {
+    "defaultMessage": "⟦Ţĥřéàð ƀý {name}⟧"
+  },
+  "@astryx.comments.unread": {
+    "defaultMessage": "⟦Ñéŵ⟧"
+  },
+  "@astryx.comments.unsavedDraft": {
+    "defaultMessage": "⟦Úñšàṽéð ðřàƒţ. Ðíšɱíšš àĝàíñ ţó ðíšçàřð íţ.⟧"
+  },
+  "@astryx.comments.versionAuthor": {
+    "defaultMessage": "⟦ƀý {name}⟧"
+  },
+  "@astryx.comments.viewHistory": {
+    "defaultMessage": "⟦Ṽíéŵ éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.viewReplies": {
+    "defaultMessage": "⟦Ṽíéŵ {count, plural, one {# reply} other {# replies}}⟧"
+  },
+  "@astryx.comments.commentsLabel": {
+    "defaultMessage": "⟦Ţĥřéàðš íñ {label}⟧"
+  },
+  "@astryx.comments.emptyDescription": {
+    "defaultMessage": "⟦Šţàřţ ţĥé ðíšçúššíóñ ŵíţĥ à çóɱɱéñţ.⟧"
+  },
+  "@astryx.comments.emptyReadOnlyDescription": {
+    "defaultMessage": "⟦Ţĥéřé íš ñó ðíšçúššíóñ óñ ţĥíš íţéɱ.⟧"
+  },
+  "@astryx.comments.emptyTitle": {
+    "defaultMessage": "⟦Ñó çóɱɱéñţš ýéţ⟧"
+  },
+  "@astryx.comments.label": {
+    "defaultMessage": "⟦Çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.loadFailed": {
+    "defaultMessage": "⟦Çóɱɱéñţš çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.loadOlder": {
+    "defaultMessage": "⟦Łóàð éàřłíéř çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.olderFailed": {
+    "defaultMessage": "⟦Éàřłíéř çóɱɱéñţš çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.postFailed": {
+    "defaultMessage": "⟦Ýóúř çóɱɱéñţ çóúłðñ'ţ ƀé þóšţéð.⟧"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.1",
+  "version": "0.7.2-canary.01eab6a",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -329,6 +329,11 @@
       "types": "./dist/Divider/index.d.ts",
       "default": "./dist/Divider/index.js"
     },
+    "./Drawer": {
+      "source": "./src/Drawer/index.ts",
+      "types": "./dist/Drawer/index.d.ts",
+      "default": "./dist/Drawer/index.js"
+    },
     "./DropdownMenu": {
       "source": "./src/DropdownMenu/index.ts",
       "types": "./dist/DropdownMenu/index.d.ts",
@@ -787,6 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.2-canary.01eab6a",
+    "@astryxdesign/cli": "0.7.2-canary.01eab6a",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -797,9 +804,7 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.7.1"
+    "tailwindcss": "^4.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/AspectRatio/AspectRatio.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When AspectRatio.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeAll} from 'vitest';
+import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {AspectRatio} from './AspectRatio';
 
@@ -230,9 +230,8 @@ describe('AspectRatio', () => {
           <img src="test.jpg" alt="Test" data-testid="image" />
         </AspectRatio>,
       );
-      // The marker sits on the child's actual parent, so the reset.css
-      // sizing rules are direct-child selectors with no dependence on
-      // AspectRatio's internal structure.
+      // Earlier releases documented the marker, so it stays on the child's
+      // direct parent for product CSS that targets it.
       const wrapper = screen.getByTestId('image').parentElement;
       expect(wrapper).toHaveAttribute(
         'data-astryx-aspect-ratio-override',
@@ -274,8 +273,11 @@ describe('AspectRatio', () => {
       );
       const wrapper = screen.getByTestId('image').parentElement;
       expect(wrapper).not.toHaveAttribute('data-astryx-aspect-ratio-override');
-      // Without the marker, none of the reset.css fit rules can match, so
-      // existing self-styled children render exactly as before.
+      // Without fit the wrapper carries no child-sizing styles, so existing
+      // self-styled children render exactly as before.
+      expect(wrapper?.className).not.toContain('childFill');
+      expect(wrapper?.className).not.toContain('childCover');
+      expect(wrapper?.className).not.toContain('childContain');
       expect(screen.getByTestId('image')).not.toHaveAttribute('class');
     });
 
@@ -292,13 +294,37 @@ describe('AspectRatio', () => {
         </AspectRatio>,
       );
       const image = screen.getByTestId('image');
-      // Fit styling is pure CSS (zero-specificity reset rules); the child's
-      // own className/style pass through untouched and always win, so
-      // children that already size themselves keep their behavior.
+      // Fit styling is a direct-child rule on the wrapper; the child's own
+      // className/style pass through untouched, and an inline style still
+      // wins over it.
       expect(image.className).toBe('consumer-class');
       expect(image.style.objectFit).toBe('contain');
     });
 
+    it('sizes the child from the wrapper with fit="cover"', () => {
+      render(
+        <AspectRatio ratio={16 / 9} fit="cover">
+          <img src="test.jpg" alt="Test" data-testid="image" />
+        </AspectRatio>,
+      );
+      const wrapper = screen.getByTestId('image').parentElement;
+      expect(wrapper?.className).toContain('childFill');
+      expect(wrapper?.className).toContain('childCover');
+      expect(wrapper?.className).not.toContain('childContain');
+    });
+
+    it('sizes the child from the wrapper with fit="contain"', () => {
+      render(
+        <AspectRatio ratio={16 / 9} fit="contain">
+          <img src="test.jpg" alt="Test" data-testid="image" />
+        </AspectRatio>,
+      );
+      const wrapper = screen.getByTestId('image').parentElement;
+      expect(wrapper?.className).toContain('childFill');
+      expect(wrapper?.className).toContain('childContain');
+      expect(wrapper?.className).not.toContain('childCover');
+    });
+
     it('centers the child via the wrapper with fit="center"', () => {
       render(
         <AspectRatio ratio={16 / 9} fit="center">
@@ -309,6 +335,7 @@ describe('AspectRatio', () => {
       expect(image).not.toHaveAttribute('class');
       const wrapper = image.parentElement;
       expect(wrapper?.className).toContain('childCenter');
+      expect(wrapper?.className).not.toContain('childFill');
     });
 
     it('does not center the wrapper for other fit values', () => {
@@ -353,45 +380,19 @@ describe('AspectRatio', () => {
     });
   });
 
-  describe('reset.css fit baseline rules', () => {
-    // The cover/contain child sizing ships as zero-specificity baseline
-    // rules in reset.css keyed on the data-astryx-aspect-ratio-override
-    // marker the component sets on the child's direct parent. These
-    // assertions keep the stylesheet in sync with the component contract.
-    let resetCSS: string;
-
-    beforeAll(async () => {
+  describe('reset.css', () => {
+    it('carries no AspectRatio rules', async () => {
+      // fit ships with the component's StyleX styles in `astryx-base`. A
+      // rule in reset.css sits below the layer the documented Tailwind
+      // setups give preflight, whose `img, video { height: auto }` would
+      // undo the fill.
       const fs = await import('fs');
       const path = await import('path');
-      resetCSS = fs.readFileSync(
+      const resetCSS = fs.readFileSync(
         path.resolve(__dirname, '../reset.css'),
         'utf-8',
       );
-    });
-
-    it('sizes the child to fill the box for cover and contain', () => {
-      const fillMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="cover"\], \[data-astryx-aspect-ratio-override="contain"\]\)\s*>\s*:where\(\*\)\s*\{([^}]+)\}/,
-      );
-      expect(fillMatch).not.toBeNull();
-      expect(fillMatch![1]).toContain('width: 100%');
-      expect(fillMatch![1]).toContain('height: 100%');
-    });
-
-    it('crops media with object-fit: cover for fit="cover"', () => {
-      const coverMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="cover"\]\)\s*>\s*:where\(img, video\)\s*\{([^}]+)\}/,
-      );
-      expect(coverMatch).not.toBeNull();
-      expect(coverMatch![1]).toContain('object-fit: cover');
-    });
-
-    it('letterboxes media with object-fit: contain for fit="contain"', () => {
-      const containMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="contain"\]\)\s*>\s*:where\(img, video\)\s*\{([^}]+)\}/,
-      );
-      expect(containMatch).not.toBeNull();
-      expect(containMatch![1]).toContain('object-fit: contain');
+      expect(resetCSS).not.toContain('aspect-ratio-override');
     });
   });
 });

package/src/AspectRatio/AspectRatio.tsx

@@ -9,7 +9,6 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
  * - /packages/core/src/AspectRatio/AspectRatio.test.tsx
- * - /packages/core/src/reset.css (AspectRatio fit baseline rules)
  * - /apps/storybook/stories/AspectRatio.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
  */
@@ -91,13 +90,12 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
    *   (`object-fit: contain`).
    * - `center`: child keeps its natural size, centered in the box.
    *
-   * `cover`/`contain` child sizing ships as zero-specificity baseline rules
-   * in `reset.css`, keyed on the `data-astryx-aspect-ratio-override`
-   * attribute the component sets on the child's direct parent. Any styles
-   * the child sets itself still win, so children that already size
-   * themselves keep their behavior. When omitted, the child is left
-   * unstyled (the pre-existing contract). `fit` is structural, not visual,
-   * so it is not exposed on the theming surface.
+   * `cover`/`contain` size the child from the component's own styles, in
+   * the `astryx-base` cascade layer. Styles in a later layer (Tailwind
+   * utilities, `astryx-theme`), unlayered CSS, and inline styles on the
+   * child still win. When omitted, the child is left unstyled (the
+   * pre-existing contract). `fit` is structural, not visual, so it is not
+   * exposed on the theming surface.
    *
    * @example
    * ```
@@ -140,15 +138,33 @@ const styles = stylex.create({
     height: '100%',
   },
   // fit="center" centers the child at its natural size from the wrapper —
-  // no styles on the child itself. The `cover`/`contain` child sizing can't
-  // live here (StyleX has no descendant selectors); it ships as baseline
-  // rules in reset.css keyed on the `data-astryx-aspect-ratio-override`
-  // attribute the wrapper carries (see below).
+  // no styles on the child itself.
   childCenter: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  // `cover`/`contain` must style the child itself (`object-fit` only applies
+  // on the replaced element), and StyleX has no child selector. The
+  // `:not([stylex-hack])` pseudo-class always matches, so StyleX accepts the
+  // key and emits `.x:not([stylex-hack]) > *`, a direct-child rule in the
+  // `astryx-base` layer like every other component style.
+  childFill: {
+    ':not([stylex-hack]) > *': {
+      width: '100%',
+      height: '100%',
+    },
+  },
+  childCover: {
+    ':not([stylex-hack]) > :is(img, video)': {
+      objectFit: 'cover',
+    },
+  },
+  childContain: {
+    ':not([stylex-hack]) > :is(img, video)': {
+      objectFit: 'contain',
+    },
+  },
 });
 
 // The ratio compiles to a CSS variable + a class-level declaration
@@ -234,14 +250,18 @@ export function AspectRatio({
         style,
       )}
       {...props}>
-      {/* The marker attribute carries the fit value so the reset.css child
-          sizing can use direct-child selectors on this wrapper — the child's
-          actual parent — without depending on AspectRatio's internal
-          structure or on the theming surface (fit is structural, not
-          themeable). The name is namespaced to avoid collisions. */}
+      {/* The marker attribute carries the fit value. No Astryx style keys on
+          it any more, but earlier releases documented it, so product CSS may
+          still target it. */}
       <div
         data-astryx-aspect-ratio-override={fit}
-        {...stylex.props(styles.child, fit === 'center' && styles.childCenter)}>
+        {...stylex.props(
+          styles.child,
+          fit === 'center' && styles.childCenter,
+          (fit === 'cover' || fit === 'contain') && styles.childFill,
+          fit === 'cover' && styles.childCover,
+          fit === 'contain' && styles.childContain,
+        )}>
         {children}
       </div>
     </div>