@astryxdesign/core 0.7.8-canary.eb985e5 → 0.7.8-canary.eecdef0

package/dist/DateInput/PickerWheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AA2HxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAuiBZ;yBA9iBe,WAAW"}
+{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAgIxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAuiBZ;yBA9iBe,WAAW"}

package/dist/DateInput/PickerWheel.js

@@ -46,6 +46,12 @@ const ROW_HEIGHT = WHEEL_ROW_HEIGHT;
 const UIKIT_SCALE = ROW_HEIGHT / picker.geometry.rowHeight;
 /** UIKit's rubber band dimension for the picker's table, at that pitch. */
 const RUBBER_BAND_DIMENSION = picker.geometry.rubberBandDimension * UIKIT_SCALE;
+
+/**
+ * The rows' opacity at the column's edges. At 0.7 the row four from the band
+ * keeps 5:1 or more in every shipped theme, a margin over WCAG AA's 4.5:1.
+ */
+const FADE_FLOOR = 0.7;
 const _temp = {
   k87sOh: "x5mnzd7",
   "$$css": true
@@ -587,7 +593,7 @@ export function PickerWheel({
     children: /*#__PURE__*/_jsxs("div", {
       "data-wheel-fade": "",
       ...{
-        className: "x10l6tqk x10a8y8t x47corl xheapza"
+        className: "x10l6tqk x10a8y8t x47corl xsshixw"
       },
       children: [/*#__PURE__*/_jsx("div", {
         "aria-hidden": "true",

package/dist/astryx.css

@@ -1225,7 +1225,7 @@
   .x1l10yog:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-6)}
   .x4lel18:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--x-marginInlineStart)}
   .x1cytvie:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(max(var(--spacing-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) + max(var(--astryx-layer-inset-inline-start, 0px), var(--astryx-layer-inset-inline-end, 0px)))}
-  .xheapza:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,rgb(0 0 0 / .3),rgb(0 0 0) 50%,rgb(0 0 0 / .3))}
+  .xsshixw:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,rgb(0 0 0 / .7),rgb(0 0 0) 50%,rgb(0 0 0 / .7))}
   .xkm2don:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,transparent,black 24px)}
   .xw26lqc:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,transparent,black 36px)}
   .xr5yg4x:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,transparent,black 48px)}

package/package.json

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

package/src/DateInput/PickerWheel.tsx

@@ -73,6 +73,12 @@ const UIKIT_SCALE = ROW_HEIGHT / picker.geometry.rowHeight;
 /** UIKit's rubber band dimension for the picker's table, at that pitch. */
 const RUBBER_BAND_DIMENSION = picker.geometry.rubberBandDimension * UIKIT_SCALE;
 
+/**
+ * The rows' opacity at the column's edges. At 0.7 the row four from the band
+ * keeps 5:1 or more in every shipped theme, a margin over WCAG AA's 4.5:1.
+ */
+const FADE_FLOOR = 0.7;
+
 const styles = stylex.create({
   // The scrolling column's box, band and rows (Wheel.tsx), moved by the
   // gesture system and the compositor instead of a native scroller.
@@ -92,8 +98,7 @@ const styles = stylex.create({
     position: 'absolute',
     inset: 0,
     pointerEvents: 'none',
-    maskImage:
-      'linear-gradient(to bottom, rgb(0 0 0 / 0.3), rgb(0 0 0) 50%, rgb(0 0 0 / 0.3))',
+    maskImage: `linear-gradient(to bottom, rgb(0 0 0 / ${FADE_FLOOR}), rgb(0 0 0) 50%, rgb(0 0 0 / ${FADE_FLOOR}))`,
   },
   /**
    * The selection band: a centred row-height plate behind the rows.