@astryxdesign/lab 0.2.0-canary.8d64648 → 0.2.0-canary.8dfd7cf

package/dist/lab.css

@@ -117,11 +117,12 @@
   .x1g06x3t:not(#\#):not(#\#){margin-block:var(--spacing-2)}
   .x1oqu0vw:not(#\#):not(#\#){margin-block:var(--x-marginBlock)}
   .xrxpjvj:not(#\#):not(#\#){margin-inline:0}
-  .xvueqy4:not(#\#):not(#\#){margin-inline:auto}
   .x1a2a7pz:not(#\#):not(#\#){outline:none}
   .xysyzu8:not(#\#):not(#\#){overflow:auto}
   .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
+  .x1rea2x4:not(#\#):not(#\#){overflow:visible}
   .xish69e:not(#\#):not(#\#){overscroll-behavior:contain}
+  .x8du1vd:not(#\#):not(#\#){overscroll-behavior:none}
   .xsplgde:not(#\#):not(#\#){padding-block:1px}
   .x13f7esw:not(#\#):not(#\#){padding-block:var(--spacing-0-5)}
   .xu0wf1k:not(#\#):not(#\#){padding-block:var(--spacing-1)}
@@ -234,10 +235,9 @@
   .x1t7ytsu:not(#\#):not(#\#):not(#\#){border-inline-start-style:solid}
   .xct1zlm:not(#\#):not(#\#):not(#\#){border-inline-start-width:3px}
   .xgbv0en:not(#\#):not(#\#):not(#\#){border-inline-start-width:var(--border-width)}
-  .x663v1:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-page)}
-  .x183tx6i:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-page)}
+  .x7hs6f1:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-container)}
+  .x81l70g:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-container)}
   .x18oyj42:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 1px var(--color-accent)}
-  .x1gnnqk1:not(#\#):not(#\#):not(#\#){box-shadow:none}
   .x1kcpxr7:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-high)}
   .x14hfi27:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}
   .x9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}
@@ -453,6 +453,7 @@
   .x19991ni:not(#\#):not(#\#):not(#\#){transition-property:opacity}
   .xxnu56j:not(#\#):not(#\#):not(#\#){transition-property:stroke-dashoffset}
   .x1yw18vd:not(#\#):not(#\#):not(#\#){transition-property:transform,max-width,display}
+  .x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
   .x9lcvmn:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out}
   .xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
   .x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
@@ -499,7 +500,6 @@
   .x1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
   .xdd4er5:not(#\#):not(#\#):not(#\#):not(#\#){bottom:auto}
   .x1hmuevu:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--spacing-3)}
-  .x5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
   .xtdtrs8:not(#\#):not(#\#):not(#\#):not(#\#){height:100dvh}
   .x170jfvy:not(#\#):not(#\#):not(#\#):not(#\#){height:10px}
   .x1v9usgg:not(#\#):not(#\#):not(#\#):not(#\#){height:14px}
@@ -511,18 +511,22 @@
   .xqu0tyb:not(#\#):not(#\#):not(#\#):not(#\#){height:4px}
   .x1ycjhwn:not(#\#):not(#\#):not(#\#):not(#\#){height:5px}
   .x1d9x2de:not(#\#):not(#\#):not(#\#):not(#\#){height:640px}
+  .x1tpcejd:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--_sheet-budget) + 48px)}
   .xg7h5cd:not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}
   .xhigkf7:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--icon-size)}
+  .x11c6zpc:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-1)}
+  .x1k15mir:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-12)}
   .x6b6gus:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-4)}
   .x1grt7ep:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--spacing-5)}
   .x16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}
   .x1unci72:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--spacing-4)}
+  .x1if0o47:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:-48px}
   .xlstkdb:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-0-5)}
   .x160xvyo:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--spacing-1) * -1)}
   .xcsaf9d:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-1)}
   .xtbrsbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-2)}
   .x1vhfslr:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--x-marginBlockStart)}
-  .x1ismmbu:not(#\#):not(#\#):not(#\#):not(#\#){max-height:90dvh}
+  .x14bu9tk:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(92dvh + 48px)}
   .x7ab17h:not(#\#):not(#\#):not(#\#):not(#\#){max-height:none}
   .x1jols5v:not(#\#):not(#\#):not(#\#):not(#\#){max-height:var(--x-maxHeight)}
   .x1k2d6hx:not(#\#):not(#\#):not(#\#):not(#\#){max-width:44px}
@@ -546,7 +550,7 @@
   .x6ikm8r:not(#\#):not(#\#):not(#\#):not(#\#){overflow-x:hidden}
   .x1odjw0f:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:auto}
   .x1j85h84:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:1px}
-  .x1a148e8:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:env(safe-area-inset-bottom,0px)}
+  .x1wkw6tp:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(env(safe-area-inset-bottom,0px) + 48px)}
   .xy143xn:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-1)}
   .xpgmcrp:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--icon-block-offset)}
   .xbx876j:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--spacing-0-5)}
@@ -567,10 +571,10 @@
   .x1dz1jew:not(#\#):not(#\#):not(#\#):not(#\#){width:280px}
   .x1849jeq:not(#\#):not(#\#):not(#\#):not(#\#){width:30px}
   .x1td3qas:not(#\#):not(#\#):not(#\#):not(#\#){width:32px}
-  .x14qfxbe:not(#\#):not(#\#):not(#\#):not(#\#){width:36px}
   .x51ohtg:not(#\#):not(#\#):not(#\#):not(#\#){width:4px}
   .x1ftt334:not(#\#):not(#\#):not(#\#):not(#\#){width:5px}
   .x1oai4fc:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--icon-size)}
+  .x1m747yf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--size-element-lg)}
   .x12xnipv:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-4)}
   .xfyiiit:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-5)}
   .x1t1lzn6:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
@@ -594,9 +598,12 @@
   .xh7j7mt:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:-6px}
   .xph5o2a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:0}
   .xb3n6bw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:1}
+  .xni466t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:var(--_sheet-scrim-opacity,1)}
   .x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
   .x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
+  .x142juwg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-behavior:allow-discrete}
   .xft5bk6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-duration:var(--duration-medium)}
+  .xc0dz0a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity,display}
   .x167zut7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity}
   .x15h3t91:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-timing-function:var(--ease-standard)}
   @media (prefers-reduced-motion: reduce){.x1viac0w.x1viac0w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-duration:.01s}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.2.0-canary.8d64648",
+  "version": "0.2.0-canary.8dfd7cf",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.2.0-canary.8d64648",
+    "@astryxdesign/core": "0.2.0-canary.8dfd7cf",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.46.0",
@@ -65,6 +65,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
+    "@astryxdesign/cli": "0.2.0-canary.8dfd7cf",
     "@lexical/code": "^0.46.0",
     "@lexical/headless": "^0.46.0",
     "@lexical/html": "^0.46.0",

package/src/BottomSheet/BottomSheet.doc.mjs

@@ -1,5 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-/** @type {import('../../../core/src/docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'BottomSheet',
@@ -12,7 +12,7 @@ export const docs = {
       {className: 'astryx-bottom-sheet', visualProps: []},
     ],
   },
-  description: 'A mobile touch sheet that rises from the bottom edge, with a grab handle and swipe-to-dismiss. Built on the Drawer <dialog> engine.',
+  description: 'A mobile touch sheet that rises from the bottom edge, with a grab handle, drag-to-resize snap points, and swipe-to-dismiss. Built on a native modal <dialog>.',
   props: [
     {
       name: 'isOpen',
@@ -40,17 +40,17 @@ export const docs = {
     },
     {
       name: 'height',
-      type: "'short' | 'medium' | 'tall' | 'auto'",
-      description: "How tall the sheet is: 'short' is a fixed peek height, 'medium' is half the viewport, 'tall' is nearly the full viewport, and 'auto' fits its content up to the 'tall' budget. On shorter viewports the sheet fills the available height.",
-      default: "'medium'",
+      type: "'hug' | 'capped' | 'tall' | number | string",
+      description: "How tall the sheet is. Named budgets: 'hug' fits its content up to 92% of the viewport, 'capped' is a scrolling mid-height panel (~62%), and 'tall' is a pinned near-full panel (~92%) for content that streams in. Or pass a number (px) / CSS length for a custom budget. The user can drag between snap points regardless. On shorter viewports the sheet fills the available height.",
+      default: "'capped'",
     },
   ],
   usage: {
-    description: 'A mobile touch surface for filters, actions, and detail views that should rise from the bottom of the screen. The sheet is modal: focus is trapped while open and restored to the opener on close, and Escape dismisses, so the swipe gesture always has a keyboard equivalent. Content padding clears the home indicator via env(safe-area-inset-bottom).',
+    description: 'A mobile touch surface for filters, actions, and detail views that should rise from the bottom of the screen. Drag the grab handle to resize: a slow drag settles to the nearest snap point (a short peek, ~half, and ~full detent, filtered to those shorter than the sheet), a fast flick down dismisses, a fast flick up expands. Pulling down on the content when it is scrolled to the top also drags the sheet, giving a larger, more forgiving target. The scrim fades out as the sheet collapses onto its shortest "peek" detent, so a glance-height sheet reveals the content behind it (the sheet stays modal; the background is inert until dismissed). The sheet is modal: focus is trapped while open and restored to the opener on close, and Escape dismisses, so the swipe gesture always has a keyboard equivalent. Content padding clears the home indicator via env(safe-area-inset-bottom).',
     bestPractices: [
       { guidance: true, description: 'Use for mobile-first surfaces (filters, share sheets, quick actions) where the content should rise from the bottom edge.' },
       { guidance: true, description: 'Keep the caller as the source of truth: derive isOpen from state and clear it in onOpenChange.' },
-      { guidance: true, description: "Pick a height that fits the content: 'auto' for short sheets, 'medium'/'tall' for lists and forms." },
+      { guidance: true, description: "Pick the starting height that fits the content: 'hug' for short bounded content, 'capped' for lists, 'tall' for streaming/resizing content; the user can then drag between snap points." },
       { guidance: false, description: 'Use a BottomSheet for desktop inspectors or master-detail; use Drawer (side="end", hasScrim={false}) instead.' },
     ],
   },
@@ -77,28 +77,28 @@ export const docs = {
 </BottomSheet>`,
     },
     {
-      label: 'Auto height (fits content)',
+      label: 'Hug height (fits content)',
       code: `const [isOpen, setIsOpen] = useState(false);
 <BottomSheet
   isOpen={isOpen}
   onOpenChange={setIsOpen}
   label="Share"
-  height="auto">
+  height="hug">
   <ShareActions />
 </BottomSheet>`,
     },
   ],
 };
 
-/** @type {import('../../../core/src/docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
-  description: 'mobile touch sheet rising from the bottom edge (built on the Drawer <dialog> engine): grab handle, swipe-to-dismiss, named height scale',
+  description: 'mobile touch sheet rising from the bottom edge (native modal <dialog>): grab handle, drag-to-resize snap points, swipe-to-dismiss, named height scale',
   usage: {
-    description: 'Mobile surface for filters, actions, and detail views. Modal: focus trap + restore, and Escape dismisses so swipe has a keyboard equivalent. Content clears the home indicator via safe-area inset.',
+    description: 'Mobile surface for filters, actions, and detail views. Drag the handle to resize between snap points; flick down to dismiss, up to expand. Modal: focus trap + restore, and Escape dismisses so swipe has a keyboard equivalent. Content clears the home indicator via safe-area inset.',
     bestPractices: [
       { guidance: true, description: 'Use for mobile-first bottom surfaces (filters, share sheets, quick actions).' },
       { guidance: true, description: 'Derive isOpen from state; clear it in onOpenChange.' },
-      { guidance: true, description: "Pick a height that fits: 'auto' for short sheets, 'medium'/'tall' for lists and forms." },
+      { guidance: true, description: "Pick a height that fits: 'hug' for short content, 'capped' for lists, 'tall' for streaming content." },
       { guidance: false, description: 'Use for desktop inspectors or master-detail; use Drawer instead.' },
     ],
   },

package/src/BottomSheet/BottomSheet.test.tsx

@@ -51,10 +51,17 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
+function getSheet(): HTMLElement {
+  const sheet = document.querySelector<HTMLElement>('.astryx-bottom-sheet');
+  if (!sheet) {
+    throw new Error('sheet panel not found');
+  }
+  return sheet;
+}
+
+// The grab handle is the panel's first child (decorative, aria-hidden).
 function getHandle(): HTMLElement {
-  const handle = document.querySelector<HTMLElement>(
-    '[data-astryx-sheet-handle]',
-  );
+  const handle = getSheet().querySelector<HTMLElement>('[aria-hidden="true"]');
   if (!handle) {
     throw new Error('grab handle not found');
   }
@@ -127,6 +134,19 @@ describe('BottomSheet', () => {
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 
+  it('does not dismiss when the sheet surface itself is clicked', () => {
+    const onOpenChange = vi.fn();
+    render(
+      <BottomSheet isOpen onOpenChange={onOpenChange} label="Filters">
+        Content
+      </BottomSheet>,
+    );
+    // Only a click that lands on the dialog (the transparent area) dismisses;
+    // clicks bubbling up from the sheet must not.
+    fireEvent.click(screen.getByText('Content'));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
   describe('grab handle', () => {
     it('renders a decorative handle hidden from assistive tech', () => {
       render(
@@ -156,7 +176,23 @@ describe('BottomSheet', () => {
 
   describe('height', () => {
     it('renders for each named height without error', () => {
-      for (const height of ['short', 'medium', 'tall', 'auto'] as const) {
+      for (const height of ['hug', 'capped', 'tall'] as const) {
+        const {unmount} = render(
+          <BottomSheet
+            isOpen
+            onOpenChange={() => {}}
+            label="Filters"
+            height={height}>
+            Content
+          </BottomSheet>,
+        );
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        unmount();
+      }
+    });
+
+    it('accepts a freeform height (number or CSS length)', () => {
+      for (const height of [480, '70dvh'] as const) {
         const {unmount} = render(
           <BottomSheet
             isOpen
@@ -207,6 +243,47 @@ describe('BottomSheet', () => {
     });
   });
 
+  describe('initial focus', () => {
+    it('focuses the sheet panel on open, not the first control', () => {
+      render(
+        <BottomSheet isOpen onOpenChange={() => {}} label="Filters">
+          <button type="button">First action</button>
+        </BottomSheet>,
+      );
+      const panel = getSheet();
+      expect(document.activeElement).toBe(panel);
+      expect(document.activeElement).not.toBe(
+        screen.getByRole('button', {name: 'First action'}),
+      );
+    });
+
+    it('honors a descendant with data-autofocus', () => {
+      render(
+        <BottomSheet isOpen onOpenChange={() => {}} label="Filters">
+          <input data-autofocus aria-label="Search" />
+        </BottomSheet>,
+      );
+      expect(document.activeElement).toBe(
+        screen.getByRole('textbox', {name: 'Search'}),
+      );
+    });
+  });
+
+  describe('accessible name', () => {
+    it('warns in development when label is empty', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      render(
+        <BottomSheet isOpen onOpenChange={() => {}} label="">
+          Content
+        </BottomSheet>,
+      );
+      expect(
+        warn.mock.calls.some(args => String(args[0]).includes('BottomSheet')),
+      ).toBe(true);
+      warn.mockRestore();
+    });
+  });
+
   describe('reduced motion', () => {
     it('opens without throwing when prefers-reduced-motion is set', () => {
       vi.stubGlobal(