@astryxdesign/core 0.7.7-canary.36f8ea1 → 0.7.7-canary.653624f

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+ChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAuQD,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA8xBf;yBA7yBe,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+ChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAuOD,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAgxBf;yBA/xBe,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -215,23 +215,6 @@ const styles = {
     kY2c9j: "x1vjfegm",
     $$css: true
   },
-  headerSafeAreaTop: {
-    kLKAdn: "x1mrd0q",
-    $$css: true
-  },
-  headerSafeAreaSides: {
-    kZCmMZ: "xs5q72w xqbmqmu",
-    kwRFfy: "x180b3rg x17h5b6w",
-    $$css: true
-  },
-  headerStickyBelowTopInset: {
-    k87sOh: "xz44ai8",
-    $$css: true
-  },
-  mainSafeAreaEnd: {
-    kGO01o: "xvmia7e",
-    $$css: true
-  },
   panelAutoFill: {
     kUk6DE: "x98rzlu",
     kVQacm: "xysyzu8",
@@ -552,7 +535,7 @@ export function AppShell({
     role: "banner",
     ...mergeProps(themeProps('app-shell-header', {
       variant
-    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky, styles.headerSafeAreaTop, styles.headerSafeAreaSides)),
+    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
     children: headerInner
   }) : undefined;
 
@@ -822,7 +805,7 @@ export function AppShell({
     tabIndex: isMainScrollRegion ? 0 : -1,
     isScrollable: isFill,
     onBlur: handleMainBlur,
-    xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget, styles.mainSafeAreaEnd],
+    xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget],
     children: children
   });
 
@@ -867,10 +850,7 @@ export function AppShell({
     role: headerContent == null ? 'banner' : undefined,
     ...mergeProps(themeProps('app-shell-header', {
       variant
-    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky, styles.headerSafeAreaSides,
-    // Under a banner, the banner's wrapper pads the top inset. This top
-    // bar takes only the side insets.
-    headerContent == null && styles.headerSafeAreaTop, isAuto && headerContent != null && styles.headerStickyBelowTopInset)),
+    }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
     children: /*#__PURE__*/_jsx(LayoutHeader, {
       padding: 0,
       hasDivider: navHasDividers,

package/dist/astryx.css

@@ -1254,7 +1254,6 @@
   .x1g2apga:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--_textarea-inline-padding) + var(--spacing-12))}
   .xp2dy4z:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--_textarea-inline-padding) + var(--spacing-6))}
   .x12frdag:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--container-padding-inline-end) - var(--border-width))}
-  .x180b3rg:not(#\#):not(#\#):not(#\#){padding-inline-end:env(safe-area-inset-right,0px)}
   .x1ahicqp:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,0px),calc((100cqi - var(--layout-alignment-width)) / 2 + var(--container-padding-inline-end,0px)))}
   .xy07wb4:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,0px),calc(100cqi - var(--layout-alignment-width) + var(--container-padding-inline-end,0px)))}
   .x1pyz5s7:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,0px),var(--_item-inset-inline))}
@@ -1287,7 +1286,6 @@
   .x1b6te9z:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--_textarea-inline-padding) + var(--spacing-6))}
   .xs19ii7:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--container-padding-inline-start) - var(--border-width))}
   .x2a0j69:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-2) - var(--spacing-1) + 1px)}
-  .xs5q72w:not(#\#):not(#\#):not(#\#){padding-inline-start:env(safe-area-inset-left,0px)}
   .xhlv5e7:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--container-padding-inline-start,0px),calc((100cqi - var(--layout-alignment-width)) / 2 + var(--container-padding-inline-start,0px)))}
   .xxjme2g:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--container-padding-inline-start,0px),calc(100cqi - var(--layout-alignment-width) + var(--container-padding-inline-start,0px)))}
   .xua885n:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--container-padding-inline-start,0px),var(--_item-inset-inline))}
@@ -1583,11 +1581,9 @@
   .x1vwwbsn:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
   .x1jhp3zv:focus-visible:not(#\#):not(#\#):not(#\#){outline-style:var(--focus-outline-style)}
   .x1vidyx5:focus-visible:not(#\#):not(#\#):not(#\#){outline-width:var(--focus-outline-width)}
-  .x17h5b6w:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-end:env(safe-area-inset-left,0px)}
   .x1n6uwha:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--spacing-4),env(safe-area-inset-left,0px))}
   .xtjjor6:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-end:var(--astryx-dialog-padding-inline-end,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,max(var(--spacing-4),env(safe-area-inset-left,0px)))))}
   .x1jwxvv4:placeholder-shown:is(:not(:focus), :read-only):not(#\#):not(#\#):not(#\#){padding-inline-start:0}
-  .xqbmqmu:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-start:env(safe-area-inset-right,0px)}
   .x19efkpl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--spacing-4),env(safe-area-inset-right,0px))}
   .x1i7f2ot:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-start:var(--astryx-dialog-padding-inline-start,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,max(var(--spacing-4),env(safe-area-inset-right,0px)))))}
   .xbt4iw:focus-within:not(#\#):not(#\#):not(#\#){pointer-events:auto}
@@ -2071,7 +2067,6 @@
   .x1enrzb7:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--border-width) + var(--spacing-1))}
   .x1nex4ik:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--container-padding-block-start) - var(--border-width))}
   .x1132dcy:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--spacing-4) + var(--spacing-1))}
-  .x1mrd0q:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:env(safe-area-inset-top,0px)}
   .x1vjezoa:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:max(var(--spacing-4),env(safe-area-inset-top,0px))}
   .x2gtn7z:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_chat-composer-padding)}
   .x1q01h0h:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_layout-flush-block-start,var(--layout-padding-inner-y,var(--spacing-4)))}
@@ -2102,7 +2097,6 @@
   .x1oysc8t:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-lg) / 2 - 1px)}
   .xkmsrut:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-md) / 2 - 1px)}
   .x1968x6z:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-sm) / 2 - 1px)}
-  .xz44ai8:not(#\#):not(#\#):not(#\#):not(#\#){top:env(safe-area-inset-top,0px)}
   .xht72ud:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--_app-shell-header-height,0px)}
   .xawarol:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--astryx-layer-inset-block-start,0px)}
   .x8d4r5l:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-1)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.7-canary.36f8ea1",
+  "version": "0.7.7-canary.653624f",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -860,9 +860,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.7-canary.36f8ea1",
-    "@astryxdesign/cli": "0.7.7-canary.36f8ea1",
-    "@astryxdesign/interaction-harness": "0.7.7-canary.36f8ea1",
+    "@astryxdesign/a11y-spec": "0.7.7-canary.653624f",
+    "@astryxdesign/cli": "0.7.7-canary.653624f",
+    "@astryxdesign/interaction-harness": "0.7.7-canary.653624f",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/AppShell/AppShell.doc.mjs

@@ -45,11 +45,6 @@ export const docs = {
         description:
           'Start the page heading inside `children`. AppShell owns the skip link, the banner landmark and the main landmark, but it renders no heading, so the first heading in the content area is the page h1.',
       },
-      {
-        guidance: true,
-        description:
-          'On phones, opt the page into the full screen with `viewport-fit=cover` in the viewport meta tag (`width=device-width, initial-scale=1, viewport-fit=cover`). AppShell then extends its header under the status bar and out to the screen sides, and keeps the header\'s items and the end of the content inside the device\'s safe area. An installed web app can also draw under the status bar with `<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">`. In landscape only the header is inset: an inline SideNav and the content\'s sides still reach under a notch, so keep content padding there. A shell with no header region or phone top bar keeps no top inset; keep top padding there.',
-      },
       {
         guidance: false,
         description:
@@ -348,11 +343,6 @@ export const docsDense = {
         description:
           'Give every nav slot an accessible name: TopNav and SideNav are separate navigation landmarks, so pass `label` to each.',
       },
-      {
-        guidance: true,
-        description:
-          'Phones: add `viewport-fit=cover` to the viewport meta; the header then reaches under the status bar while its items and the content end stay in the safe area. Landscape: only the header is inset (not an inline SideNav or the content sides). No header region or phone top bar: no top inset, so keep top padding. Installed web apps: `apple-mobile-web-app-status-bar-style` `black-translucent`.',
-      },
       {
         guidance: true,
         description:

package/src/AppShell/AppShell.tsx

@@ -471,38 +471,6 @@ const styles = stylex.create({
     top: 0,
     zIndex: 1,
   },
-  // The insets are zero unless the page sets `viewport-fit=cover`. The header
-  // background goes under the status bar and to the screen sides, as a UIKit
-  // bar does.
-  headerSafeAreaTop: {
-    paddingBlockStart: 'env(safe-area-inset-top, 0px)',
-  },
-  // The insets are physical sides, so a right-to-left context swaps them on
-  // the inline sides.
-  headerSafeAreaSides: {
-    paddingInlineStart: {
-      default: 'env(safe-area-inset-left, 0px)',
-      ':is([dir="rtl"] *)': 'env(safe-area-inset-right, 0px)',
-    },
-    paddingInlineEnd: {
-      default: 'env(safe-area-inset-right, 0px)',
-      ':is([dir="rtl"] *)': 'env(safe-area-inset-left, 0px)',
-    },
-  },
-  // In `auto`, the banner's wrapper and the phone top bar both stick. Below a
-  // banner, the bar sticks under the top inset, so its items stay clear of the
-  // status bar.
-  headerStickyBelowTopInset: {
-    top: 'env(safe-area-inset-top, 0px)',
-  },
-  // Main adds the bottom inset to the padding that LayoutContent publishes for
-  // `contentPadding`. The published value excludes the inset, so a bleed child
-  // subtracts only `contentPadding`. Main is border-box, so a child that fills
-  // it ends above the inset.
-  mainSafeAreaEnd: {
-    paddingBlockEnd:
-      'calc(var(--container-padding-block-end, 0px) + env(safe-area-inset-bottom, 0px))',
-  },
   // Sticky sideNav for auto height mode — sticks within the wrapper.
   // This div replaces the panel as the direct flex child of the middle
   // (horizontal) container, so it needs the same flex properties that
@@ -923,12 +891,7 @@ export function AppShell({
       role="banner"
       {...mergeProps(
         themeProps('app-shell-header', {variant}),
-        stylex.props(
-          headerAreaStyle,
-          isAuto && styles.headerSticky,
-          styles.headerSafeAreaTop,
-          styles.headerSafeAreaSides,
-        ),
+        stylex.props(headerAreaStyle, isAuto && styles.headerSticky),
       )}>
       {headerInner}
     </div>
@@ -1221,7 +1184,6 @@ export function AppShell({
         drawsMainFocusRing
           ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset]
           : styles.mainFocusTarget,
-        styles.mainSafeAreaEnd,
       ]}>
       {children}
     </LayoutContent>
@@ -1268,15 +1230,7 @@ export function AppShell({
         role={headerContent == null ? 'banner' : undefined}
         {...mergeProps(
           themeProps('app-shell-header', {variant}),
-          stylex.props(
-            headerAreaStyle,
-            isAuto && styles.headerSticky,
-            styles.headerSafeAreaSides,
-            // Under a banner, the banner's wrapper pads the top inset. This top
-            // bar takes only the side insets.
-            headerContent == null && styles.headerSafeAreaTop,
-            isAuto && headerContent != null && styles.headerStickyBelowTopInset,
-          ),
+          stylex.props(headerAreaStyle, isAuto && styles.headerSticky),
         )}>
         <LayoutHeader padding={0} hasDivider={navHasDividers}>
           <div