@astryxdesign/core 0.2.0-canary.78221de → 0.2.0-canary.827f173

package/dist/Dialog/Dialog.d.ts

@@ -46,15 +46,53 @@ export type DialogVariant = keyof DialogVariantMap;
  * - info: Informational flows - allows all exit methods
  */
 export type DialogPurpose = 'required' | 'form' | 'info';
+/** Block-axis offsets — always allowed, independent of inline direction. */
+interface DialogBlockPosition {
+    top?: number | string;
+    bottom?: number | string;
+}
 /**
- * Position configuration for static dialog positioning
+ * Static position for a dialog. The inline axis is logical XOR physical — the
+ * type forbids mixing the two, so a single dialog can't be positioned both ways:
+ * - Logical `start`/`end` map to `inset-inline-*` and mirror under RTL (preferred).
+ * - Physical `left`/`right` are deprecated, do not mirror, and are removed in a
+ *   future major.
+ * Block-axis `top`/`bottom` may be combined with either.
  */
-export interface DialogPosition {
-    bottom?: number | string;
+export type DialogPosition = (DialogBlockPosition & {
+    /** Logical inline-start offset (`inset-inline-start`); mirrors under RTL. */
+    start?: number | string;
+    /** Logical inline-end offset (`inset-inline-end`); mirrors under RTL. */
+    end?: number | string;
+    left?: never;
+    right?: never;
+}) | (DialogBlockPosition & {
+    /** @deprecated Use `start`. Physical (never mirrors); removed in a future major. */
     left?: number | string;
+    /** @deprecated Use `end`. Physical (never mirrors); removed in a future major. */
     right?: number | string;
-    top?: number | string;
-}
+    start?: never;
+    end?: never;
+});
+/**
+ * Map a {@link DialogPosition} to resolved CSS offsets. Logical `start`/`end`
+ * become `inset-inline-*` (mirror under RTL); physical `left`/`right` stay
+ * physical. The union type guarantees at most one inline pair is set, so no
+ * precedence is needed — each unset offset falls back to `auto`.
+ *
+ * Not re-exported from the package; internal to Dialog. Directly unit-tested
+ * so the mapping is verified without StyleX class compilation.
+ *
+ * @see DialogPosition
+ */
+export declare function resolveDialogPositionOffsets(position: DialogPosition): {
+    top: string;
+    bottom: string;
+    insetInlineStart: string;
+    insetInlineEnd: string;
+    left: string;
+    right: string;
+};
 export interface DialogProps extends BaseProps<HTMLDialogElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDialogElement>;
@@ -152,4 +190,5 @@ export declare function Dialog({ isOpen, isInline, onOpenChange, width, maxHeigh
 export declare namespace Dialog {
     var displayName: string;
 }
+export {};
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAyBhD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,IAAI,CAAC;IACf,UAAU,EAAE,IAAI,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAqID,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAwSb;yBAxTe,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAyBhD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,IAAI,CAAC;IACf,UAAU,EAAE,IAAI,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GACtB,CAAC,mBAAmB,GAAG;IACrB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC,GACF,CAAC,mBAAmB,GAAG;IACrB,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,CAAC,CAAC;AAqIP;;;;;;;;;;GAUG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;;;EAapE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA6Sb;yBA7Te,MAAM"}

package/dist/Dialog/Dialog.js

@@ -74,8 +74,15 @@ function getDialogDirection(triggerEl, distance = 16) {
  * - info: Informational flows - allows all exit methods
  */
 
+/** Block-axis offsets — always allowed, independent of inline direction. */
+
 /**
- * Position configuration for static dialog positioning
+ * Static position for a dialog. The inline axis is logical XOR physical — the
+ * type forbids mixing the two, so a single dialog can't be positioned both ways:
+ * - Logical `start`/`end` map to `inset-inline-*` and mirror under RTL (preferred).
+ * - Physical `left`/`right` are deprecated, do not mirror, and are removed in a
+ *   future major.
+ * Block-axis `top`/`bottom` may be combined with either.
  */
 
 const enterDirectional = "x11lauxq-B";
@@ -167,17 +174,21 @@ const dynamicStyles = {
     "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(typeof width === 'number' ? `${width}px` : width),
     "--x-maxHeight": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight)
   }],
-  position: (top, right, bottom, left) => [_temp2, {
-    k87sOh: (top !== undefined ? formatPosition(top) : 'auto') != null ? "xjbys53" : top !== undefined ? formatPosition(top) : 'auto',
-    kCIrl2: (right !== undefined ? formatPosition(right) : 'auto') != null ? "x7ok3n0" : right !== undefined ? formatPosition(right) : 'auto',
-    krVfgx: (bottom !== undefined ? formatPosition(bottom) : 'auto') != null ? "x1nqzi6q" : bottom !== undefined ? formatPosition(bottom) : 'auto',
-    kbCHJM: (left !== undefined ? formatPosition(left) : 'auto') != null ? "xgq9j65" : left !== undefined ? formatPosition(left) : 'auto',
+  position: (top, insetInlineStart, insetInlineEnd, right, bottom, left) => [_temp2, {
+    k87sOh: top != null ? "xjbys53" : top,
+    kLqNvP: insetInlineStart != null ? "x1lxsm33" : insetInlineStart,
+    kt4wiu: insetInlineEnd != null ? "xqxgn94" : insetInlineEnd,
+    kCIrl2: right != null ? "x7ok3n0" : right,
+    krVfgx: bottom != null ? "x1nqzi6q" : bottom,
+    kbCHJM: left != null ? "xgq9j65" : left,
     $$css: true
   }, {
-    "--x-top": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(top !== undefined ? formatPosition(top) : 'auto'),
-    "--x-right": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(right !== undefined ? formatPosition(right) : 'auto'),
-    "--x-bottom": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(bottom !== undefined ? formatPosition(bottom) : 'auto'),
-    "--x-left": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(left !== undefined ? formatPosition(left) : 'auto')
+    "--x-top": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(top),
+    "--x-insetInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(insetInlineStart),
+    "--x-insetInlineEnd": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(insetInlineEnd),
+    "--x-right": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(right),
+    "--x-bottom": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(bottom),
+    "--x-left": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(left)
   }]
 };
 
@@ -185,11 +196,40 @@ const dynamicStyles = {
  * Format position value - numbers become pixels, strings pass through, undefined becomes null
  */
 function formatPosition(value) {
-  if (value === undefined) {
-    return null;
-  }
   return typeof value === 'number' ? `${value}px` : value;
 }
+
+/**
+ * Map a {@link DialogPosition} to resolved CSS offsets. Logical `start`/`end`
+ * become `inset-inline-*` (mirror under RTL); physical `left`/`right` stay
+ * physical. The union type guarantees at most one inline pair is set, so no
+ * precedence is needed — each unset offset falls back to `auto`.
+ *
+ * Not re-exported from the package; internal to Dialog. Directly unit-tested
+ * so the mapping is verified without StyleX class compilation.
+ *
+ * @see DialogPosition
+ */
+export function resolveDialogPositionOffsets(position) {
+  const {
+    top,
+    bottom,
+    start,
+    end,
+    left,
+    right
+  } = position;
+  return {
+    top: top !== undefined ? formatPosition(top) : 'auto',
+    bottom: bottom !== undefined ? formatPosition(bottom) : 'auto',
+    // Logical offsets mirror under RTL (preferred replacements).
+    insetInlineStart: start !== undefined ? formatPosition(start) : 'auto',
+    insetInlineEnd: end !== undefined ? formatPosition(end) : 'auto',
+    // Deprecated physical offsets never mirror.
+    left: left !== undefined ? formatPosition(left) : 'auto',
+    right: right !== undefined ? formatPosition(right) : 'auto'
+  };
+}
 /**
  * A dialog component using the native <dialog> element.
  *
@@ -434,7 +474,10 @@ export function Dialog({
     ...safeProps,
     ...mergeProps(themeProps('dialog', {
       variant
-    }), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && dynamicStyles.position(position?.top, position?.right, position?.bottom, position?.left), isFullscreen && styles.fullscreen, xstyle), className, style),
+    }), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
+      const o = resolveDialogPositionOffsets(position);
+      return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.right, o.bottom, o.left);
+    })(), isFullscreen && styles.fullscreen, xstyle), className, style),
     onClick: handleClick,
     onCancel: handleCancel,
     "aria-modal": "true"

package/dist/astryx.css

@@ -20,6 +20,7 @@
   @property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
   @property --x-height { syntax: "*"; inherits: false;}
   @property --x-insetInlineEnd { syntax: "*"; inherits: false;}
+  @property --x-insetInlineStart { syntax: "*"; inherits: false;}
   @property --x-left { syntax: "*"; inherits: false;}
   @property --x-marginInline { syntax: "*"; inherits: false;}
   @property --x-maxHeight { syntax: "*"; inherits: false;}
@@ -846,6 +847,7 @@
   .xbudbmw:not(#\#):not(#\#):not(#\#){inset-inline-start:50%}
   .x1kiyvbf:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--_textarea-inline-padding)}
   .x1ybfrjj:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-3)}
+  .x1lxsm33:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--x-insetInlineStart)}
   .xc8icb0:not(#\#):not(#\#):not(#\#){isolation:isolate}
   .xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
   .x13a6bvl:not(#\#):not(#\#):not(#\#){justify-content:flex-end}