@gunkin/uiify 0.0.1-alpha → 0.0.3-alpha

package/dist/components/line-chart/client/LineChartClient.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\nimport type { CSSProperties, ElementType, ReactElement, Ref } from \"react\";\nimport { useChartViewport } from \"../../../hooks/use-chart-viewport.js\";\nimport { useMergedRefs } from \"../../../hooks/use-merged-refs.js\";\nimport { LineChart } from \"../LineChart.js\";\nimport type { LineChartPointerPosition, LineChartProps } from \"../types.js\";\n\ninterface CursorState extends LineChartPointerPosition {}\n\ninterface InteractiveLineStyle extends CSSProperties {\n  \"--line-scale\": string;\n}\n\n/**\n * `.line-chart__plot`'s fixed price-axis column (4.5rem) plus its grid gap\n * (0.75rem) — see line-chart.css. `useChartViewport` measures the whole\n * `<figure>`, but points only ever get the width left over after this\n * column, so it must be subtracted before sizing `minItemWidth`.\n */\nconst Y_AXIS_COLUMN_WIDTH = 72 + 12;\n\nexport function LineChartClient<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    data,\n    ref: consumerRef,\n    style: consumerStyle,\n    onPointClick: consumerOnPointClick,\n    onPointPointerLeave: consumerOnPointPointerLeave,\n    onPointPointerMove: consumerOnPointPointerMove,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\"> & {\n    ref?: Ref<HTMLElement>;\n    style?: CSSProperties;\n  };\n  const viewport = useChartViewport({\n    itemCount: data.length,\n    measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,\n    minItemWidth: 24,\n  });\n  const [cursor, setCursor] = useState<CursorState | null>(null);\n  const [selectedPointIndex, setSelectedPointIndex] = useState<number | undefined>();\n  const chartRef = useMergedRefs<HTMLElement>(viewport.ref, consumerRef);\n  const handlePointClick = useCallback(\n    (index: number) => {\n      setSelectedPointIndex(index);\n      consumerOnPointClick?.(index);\n    },\n    [consumerOnPointClick],\n  );\n  const handlePointPointerLeave = useCallback(() => {\n    setCursor(null);\n    consumerOnPointPointerLeave?.();\n  }, [consumerOnPointPointerLeave]);\n  const handlePointPointerMove = useCallback(\n    (position: LineChartPointerPosition) => {\n      setCursor(position);\n      consumerOnPointPointerMove?.(position);\n    },\n    [consumerOnPointPointerMove],\n  );\n\n  const style: InteractiveLineStyle = {\n    ...consumerStyle,\n    \"--line-scale\": String(viewport.scale),\n  };\n  const chartProps = {\n    ...consumerProps,\n    data,\n    activePointIndex: cursor?.index,\n    cursorY: cursor?.offsetY,\n    interactive: true,\n    onPointClick: handlePointClick,\n    onPointPointerLeave: handlePointPointerLeave,\n    onPointPointerMove: handlePointPointerMove,\n    ref: chartRef,\n    selectedPointIndex,\n    style,\n  } as LineChartProps<\"figure\">;\n\n  return <LineChart {...chartProps} />;\n}\nLineChartClient.displayName = \"LineChartClient\";\n"],"mappings":";AAmFS;AAjFT,SAAS,aAAa,gBAAgB;AAEtC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAe1B,MAAM,sBAAsB,KAAK;AAE1B,SAAS,gBACd,OACqB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,WAAW,iBAAiB;AAAA,IAChC,WAAW,KAAK;AAAA,IAChB,qBAAqB;AAAA,IACrB,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,IAAI;AAC7D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAA6B;AACjF,QAAM,WAAW,cAA2B,SAAS,KAAK,WAAW;AACrE,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAkB;AACjB,4BAAsB,KAAK;AAC3B,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AACA,QAAM,0BAA0B,YAAY,MAAM;AAChD,cAAU,IAAI;AACd,kCAA8B;AAAA,EAChC,GAAG,CAAC,2BAA2B,CAAC;AAChC,QAAM,yBAAyB;AAAA,IAC7B,CAAC,aAAuC;AACtC,gBAAU,QAAQ;AAClB,mCAA6B,QAAQ;AAAA,IACvC;AAAA,IACA,CAAC,0BAA0B;AAAA,EAC7B;AAEA,QAAM,QAA8B;AAAA,IAClC,GAAG;AAAA,IACH,gBAAgB,OAAO,SAAS,KAAK;AAAA,EACvC;AACA,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA,kBAAkB,QAAQ;AAAA,IAC1B,SAAS,QAAQ;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF;AAEA,SAAO,oBAAC,aAAW,GAAG,YAAY;AACpC;AACA,gBAAgB,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\nimport type { CSSProperties, ElementType, ReactElement, Ref } from \"react\";\nimport { useChartViewport } from \"../../../hooks/use-chart-viewport.js\";\nimport { useMergedRefs } from \"../../../hooks/use-merged-refs.js\";\nimport { LineChart } from \"../LineChart.js\";\nimport type { LineChartPointerPosition, LineChartProps } from \"../types.js\";\n\ninterface CursorState extends LineChartPointerPosition {}\n\ninterface InteractiveLineStyle extends CSSProperties {\n  \"--line-scale\": string;\n}\n\n/**\n * `[data-part=\"plot\"]`'s fixed price-axis column (4.5rem) plus its grid gap\n * (0.75rem) — see line-chart.css. `useChartViewport` measures the whole\n * `<figure>`, but points only ever get the width left over after this\n * column, so it must be subtracted before sizing `minItemWidth`.\n */\nconst Y_AXIS_COLUMN_WIDTH = 72 + 12;\n\nexport function LineChartClient<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    data,\n    ref: consumerRef,\n    style: consumerStyle,\n    onPointClick: consumerOnPointClick,\n    onPointPointerLeave: consumerOnPointPointerLeave,\n    onPointPointerMove: consumerOnPointPointerMove,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\"> & {\n    ref?: Ref<HTMLElement>;\n    style?: CSSProperties;\n  };\n  const viewport = useChartViewport({\n    itemCount: data.length,\n    measuredWidthOffset: Y_AXIS_COLUMN_WIDTH,\n    minItemWidth: 24,\n  });\n  const [cursor, setCursor] = useState<CursorState | null>(null);\n  const [selectedPointIndex, setSelectedPointIndex] = useState<number | undefined>();\n  const chartRef = useMergedRefs<HTMLElement>(viewport.ref, consumerRef);\n  const handlePointClick = useCallback(\n    (index: number) => {\n      setSelectedPointIndex(index);\n      consumerOnPointClick?.(index);\n    },\n    [consumerOnPointClick],\n  );\n  const handlePointPointerLeave = useCallback(() => {\n    setCursor(null);\n    consumerOnPointPointerLeave?.();\n  }, [consumerOnPointPointerLeave]);\n  const handlePointPointerMove = useCallback(\n    (position: LineChartPointerPosition) => {\n      setCursor(position);\n      consumerOnPointPointerMove?.(position);\n    },\n    [consumerOnPointPointerMove],\n  );\n\n  const style: InteractiveLineStyle = {\n    ...consumerStyle,\n    \"--line-scale\": String(viewport.scale),\n  };\n  const chartProps = {\n    ...consumerProps,\n    data,\n    activePointIndex: cursor?.index,\n    cursorY: cursor?.offsetY,\n    interactive: true,\n    onPointClick: handlePointClick,\n    onPointPointerLeave: handlePointPointerLeave,\n    onPointPointerMove: handlePointPointerMove,\n    ref: chartRef,\n    selectedPointIndex,\n    style,\n  } as LineChartProps<\"figure\">;\n\n  return <LineChart {...chartProps} />;\n}\nLineChartClient.displayName = \"LineChartClient\";\n"],"mappings":";AAmFS;AAjFT,SAAS,aAAa,gBAAgB;AAEtC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAe1B,MAAM,sBAAsB,KAAK;AAE1B,SAAS,gBACd,OACqB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,WAAW,iBAAiB;AAAA,IAChC,WAAW,KAAK;AAAA,IAChB,qBAAqB;AAAA,IACrB,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,IAAI;AAC7D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAA6B;AACjF,QAAM,WAAW,cAA2B,SAAS,KAAK,WAAW;AACrE,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAkB;AACjB,4BAAsB,KAAK;AAC3B,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AACA,QAAM,0BAA0B,YAAY,MAAM;AAChD,cAAU,IAAI;AACd,kCAA8B;AAAA,EAChC,GAAG,CAAC,2BAA2B,CAAC;AAChC,QAAM,yBAAyB;AAAA,IAC7B,CAAC,aAAuC;AACtC,gBAAU,QAAQ;AAClB,mCAA6B,QAAQ;AAAA,IACvC;AAAA,IACA,CAAC,0BAA0B;AAAA,EAC7B;AAEA,QAAM,QAA8B;AAAA,IAClC,GAAG;AAAA,IACH,gBAAgB,OAAO,SAAS,KAAK;AAAA,EACvC;AACA,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA,kBAAkB,QAAQ;AAAA,IAC1B,SAAS,QAAQ;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF;AAEA,SAAO,oBAAC,aAAW,GAAG,YAAY;AACpC;AACA,gBAAgB,cAAc;","names":[]}

package/dist/components/modal/Modal.d.ts

@@ -5,7 +5,7 @@ import type { ModalProps } from "./types.js";
  * with title/description ids, one close button. Controlled or initially open
  * dialogs use `ModalClientContent` from `@gunkin/uiify/components/modal/client`.
  */
-export declare function Modal({ id, trigger, title, description, children, closeLabel, triggerClassName, className, closeClassName, }: ModalProps): ReactElement;
+export declare function Modal({ id, trigger, title, description, children, closeLabel, className, }: ModalProps): ReactElement;
 export declare namespace Modal {
     var displayName: string;
 }

package/dist/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAoB,EACpB,gBAAgB,EAChB,SAAS,EACT,cAAc,GACf,EAAE,UAAU,GAAG,YAAY,CAwB3B;yBAlCe,KAAK"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAoB,EACpB,SAAS,GACV,EAAE,UAAU,GAAG,YAAY,CAoB3B;yBA5Be,KAAK"}

package/dist/components/modal/Modal.js

@@ -7,14 +7,12 @@ function Modal({
   description,
   children,
   closeLabel = "Close",
-  triggerClassName,
-  className,
-  closeClassName
+  className
 }) {
   const titleId = `${id}-title`;
   const descriptionId = `${id}-description`;
-  return /* @__PURE__ */ jsxs("div", { "data-uiify-dialog-scope": "", "data-uiify-modal-scope": "", children: [
-    /* @__PURE__ */ jsx(ModalTrigger, { className: triggerClassName, target: id, children: trigger }),
+  return /* @__PURE__ */ jsxs("div", { "data-part": "root", "data-uiify-modal": "", children: [
+    /* @__PURE__ */ jsx(ModalTrigger, { target: id, children: trigger }),
     /* @__PURE__ */ jsxs(
       ModalContent,
       {
@@ -26,7 +24,7 @@ function Modal({
           /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
           description === void 0 ? null : /* @__PURE__ */ jsx("p", { id: descriptionId, children: description }),
           children,
-          /* @__PURE__ */ jsx(ModalClose, { className: closeClassName, target: id, children: closeLabel })
+          /* @__PURE__ */ jsx(ModalClose, { target: id, children: closeLabel })
         ]
       }
     )

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { ModalClose, ModalContent, ModalTrigger } from \"./ModalParts.js\";\nimport type { ModalProps } from \"./types.js\";\n\n/**\n * Convenience shell over the native parts: one trigger, one modal `<dialog>`\n * with title/description ids, one close button. Controlled or initially open\n * dialogs use `ModalClientContent` from `@gunkin/uiify/components/modal/client`.\n */\nexport function Modal({\n  id,\n  trigger,\n  title,\n  description,\n  children,\n  closeLabel = \"Close\",\n  triggerClassName,\n  className,\n  closeClassName,\n}: ModalProps): ReactElement {\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n\n  return (\n    <div data-uiify-dialog-scope=\"\" data-uiify-modal-scope=\"\">\n      <ModalTrigger className={triggerClassName} target={id}>\n        {trigger}\n      </ModalTrigger>\n      <ModalContent\n        aria-describedby={description === undefined ? undefined : descriptionId}\n        aria-labelledby={titleId}\n        className={className}\n        id={id}\n      >\n        <h2 id={titleId}>{title}</h2>\n        {description === undefined ? null : <p id={descriptionId}>{description}</p>}\n        {children}\n        <ModalClose className={closeClassName} target={id}>\n          {closeLabel}\n        </ModalClose>\n      </ModalContent>\n    </div>\n  );\n}\nModal.displayName = \"Modal\";\n"],"mappings":"AAyBM,cAGA,YAHA;AAxBN,SAAS,YAAY,cAAc,oBAAoB;AAQhD,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAE3B,SACE,qBAAC,SAAI,2BAAwB,IAAG,0BAAuB,IACrD;AAAA,wBAAC,gBAAa,WAAW,kBAAkB,QAAQ,IAChD,mBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB,gBAAgB,SAAY,SAAY;AAAA,QAC1D,mBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,QAAG,IAAI,SAAU,iBAAM;AAAA,UACvB,gBAAgB,SAAY,OAAO,oBAAC,OAAE,IAAI,eAAgB,uBAAY;AAAA,UACtE;AAAA,UACD,oBAAC,cAAW,WAAW,gBAAgB,QAAQ,IAC5C,sBACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AACA,MAAM,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { ModalClose, ModalContent, ModalTrigger } from \"./ModalParts.js\";\nimport type { ModalProps } from \"./types.js\";\n\n/**\n * Convenience shell over the native parts: one trigger, one modal `<dialog>`\n * with title/description ids, one close button. Controlled or initially open\n * dialogs use `ModalClientContent` from `@gunkin/uiify/components/modal/client`.\n */\nexport function Modal({\n  id,\n  trigger,\n  title,\n  description,\n  children,\n  closeLabel = \"Close\",\n  className,\n}: ModalProps): ReactElement {\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n\n  return (\n    <div data-part=\"root\" data-uiify-modal=\"\">\n      <ModalTrigger target={id}>{trigger}</ModalTrigger>\n      <ModalContent\n        aria-describedby={description === undefined ? undefined : descriptionId}\n        aria-labelledby={titleId}\n        className={className}\n        id={id}\n      >\n        <h2 id={titleId}>{title}</h2>\n        {description === undefined ? null : <p id={descriptionId}>{description}</p>}\n        {children}\n        <ModalClose target={id}>{closeLabel}</ModalClose>\n      </ModalContent>\n    </div>\n  );\n}\nModal.displayName = \"Modal\";\n"],"mappings":"AAuBM,cACA,YADA;AAtBN,SAAS,YAAY,cAAc,oBAAoB;AAQhD,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAA6B;AAC3B,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAE3B,SACE,qBAAC,SAAI,aAAU,QAAO,oBAAiB,IACrC;AAAA,wBAAC,gBAAa,QAAQ,IAAK,mBAAQ;AAAA,IACnC;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB,gBAAgB,SAAY,SAAY;AAAA,QAC1D,mBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,QAAG,IAAI,SAAU,iBAAM;AAAA,UACvB,gBAAgB,SAAY,OAAO,oBAAC,OAAE,IAAI,eAAgB,uBAAY;AAAA,UACtE;AAAA,UACD,oBAAC,cAAW,QAAQ,IAAK,sBAAW;AAAA;AAAA;AAAA,IACtC;AAAA,KACF;AAEJ;AACA,MAAM,cAAc;","names":[]}

package/dist/components/modal/ModalParts.d.ts

@@ -1,43 +1,16 @@
 import type { ElementType, ReactElement } from "react";
 import type { ModalCloseProps, ModalContentProps, ModalTriggerProps } from "./types.js";
-/**
- * Opens `target` modally through the browser: no React handler, works before hydration.
- *
- * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Trigger` (aliased — the element and this
- * component share a name), which already
- * emits `data-uiify-dialog-trigger`; this part adds its own `data-uiify-modal-trigger`.
- *
- * Calls the element directly as a function rather than rendering `<ElementDialogTrigger>`:
- * `Dialog.Trigger` has no hooks and no state (Tier 0, enforced by
- * elements/architecture.test.ts), so it is safe to invoke like any other pure function, and
- * doing so skips a `jsx()` call — measurable at this component's byte budget (`.size-limit.json`).
- */
+/** Native modal invoker with modal identity and trigger anatomy. */
 export declare function ModalTrigger<TAs extends ElementType = "button">(props: ModalTriggerProps<TAs>): ReactElement;
 export declare namespace ModalTrigger {
     var displayName: string;
 }
-/**
- * A plain, initially closed `<dialog>`; the accessible name is the consumer's responsibility.
- *
- * Mirrors `@gunkin/uiify/elements/dialog`'s `Dialog.Content` markup and marker
- * (`data-uiify-dialog-content`) exactly, plus this component's own
- * `data-uiify-modal-content`. Written inline rather than rendered through the element:
- * `Dialog.Content`'s type requires an accessible name (aria-labelledby xor aria-label), and
- * `ModalContentProps` deliberately does not
- * tighten to match, since this part is a public, generic native part in its own right, not
- * only an implementation detail of the `Modal` convenience shell (which always supplies one).
- */
+/** Native modal dialog content with modal identity and content anatomy. */
 export declare function ModalContent(props: ModalContentProps): ReactElement;
 export declare namespace ModalContent {
     var displayName: string;
 }
-/**
- * Requests closing `target` (fires the cancelable `cancel` event first).
- *
- * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`, which already emits
- * `data-uiify-dialog-close`; this part adds its own `data-uiify-modal-close`. See
- * `ModalTrigger` for why this calls the element as a function instead of rendering it.
- */
+/** Native modal close invoker. */
 export declare function ModalClose<TAs extends ElementType = "button">(props: ModalCloseProps<TAs>): ReactElement;
 export declare namespace ModalClose {
     var displayName: string;

package/dist/components/modal/ModalParts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalParts.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMvD,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAExF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,CAQd;yBAVe,YAAY;;;AAa5B;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAOnE;yBAPe,YAAY;;;AAU5B;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC3D,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,GAC1B,YAAY,CAQd;yBAVe,UAAU"}
+{"version":3,"file":"ModalParts.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAExF,oEAAoE;AACpE,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,CAWd;yBAbe,YAAY;;;AAgB5B,2EAA2E;AAC3E,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAOnE;yBAPe,YAAY;;;AAU5B,kCAAkC;AAClC,wBAAgB,UAAU,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC3D,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,GAC1B,YAAY,CAWd;yBAbe,UAAU"}

package/dist/components/modal/ModalParts.js

@@ -1,31 +1,34 @@
 import { jsx } from "react/jsx-runtime";
-import {
-  DialogClose as ElementDialogClose,
-  DialogTrigger as ElementDialogTrigger
-} from "../../elements/dialog/index.js";
+import { renderNativeInvoker } from "@gunkin/uiify/core/render";
 function ModalTrigger(props) {
   const { as, target, ...consumerProps } = props;
-  return ElementDialogTrigger({
-    ...consumerProps,
-    ...as === void 0 ? {} : { as },
-    "data-uiify-modal-trigger": "",
-    target
-  });
+  return renderNativeInvoker(
+    as,
+    "data-uiify-modal",
+    "trigger",
+    "show-modal",
+    target,
+    consumerProps,
+    { button: true }
+  );
 }
 ModalTrigger.displayName = "ModalTrigger";
 function ModalContent(props) {
   const { children, ...dialogProps } = props;
-  return /* @__PURE__ */ jsx("dialog", { ...dialogProps, "data-uiify-dialog-content": "", "data-uiify-modal-content": "", children });
+  return /* @__PURE__ */ jsx("dialog", { ...dialogProps, "data-part": "content", "data-uiify-modal": "", children });
 }
 ModalContent.displayName = "ModalContent";
 function ModalClose(props) {
   const { as, target, ...consumerProps } = props;
-  return ElementDialogClose({
-    ...consumerProps,
-    ...as === void 0 ? {} : { as },
-    "data-uiify-modal-close": "",
-    target
-  });
+  return renderNativeInvoker(
+    as,
+    "data-uiify-modal",
+    "close",
+    "request-close",
+    target,
+    consumerProps,
+    { button: true, variant: "ghost" }
+  );
 }
 ModalClose.displayName = "ModalClose";
 export {

package/dist/components/modal/ModalParts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modal/ModalParts.tsx"],"sourcesContent":["import type { ElementType, ReactElement } from \"react\";\nimport {\n  DialogClose as ElementDialogClose,\n  DialogTrigger as ElementDialogTrigger,\n} from \"../../elements/dialog/index.js\";\nimport type { DialogCloseProps, DialogTriggerProps } from \"../../elements/dialog/index.js\";\nimport type { ModalCloseProps, ModalContentProps, ModalTriggerProps } from \"./types.js\";\n\n/**\n * Opens `target` modally through the browser: no React handler, works before hydration.\n *\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Trigger` (aliased — the element and this\n * component share a name), which already\n * emits `data-uiify-dialog-trigger`; this part adds its own `data-uiify-modal-trigger`.\n *\n * Calls the element directly as a function rather than rendering `<ElementDialogTrigger>`:\n * `Dialog.Trigger` has no hooks and no state (Tier 0, enforced by\n * elements/architecture.test.ts), so it is safe to invoke like any other pure function, and\n * doing so skips a `jsx()` call — measurable at this component's byte budget (`.size-limit.json`).\n */\nexport function ModalTrigger<TAs extends ElementType = \"button\">(\n  props: ModalTriggerProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as ModalTriggerProps<\"button\">;\n  return ElementDialogTrigger({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-modal-trigger\": \"\",\n    target,\n  } as unknown as DialogTriggerProps<TAs>);\n}\nModalTrigger.displayName = \"ModalTrigger\";\n\n/**\n * A plain, initially closed `<dialog>`; the accessible name is the consumer's responsibility.\n *\n * Mirrors `@gunkin/uiify/elements/dialog`'s `Dialog.Content` markup and marker\n * (`data-uiify-dialog-content`) exactly, plus this component's own\n * `data-uiify-modal-content`. Written inline rather than rendered through the element:\n * `Dialog.Content`'s type requires an accessible name (aria-labelledby xor aria-label), and\n * `ModalContentProps` deliberately does not\n * tighten to match, since this part is a public, generic native part in its own right, not\n * only an implementation detail of the `Modal` convenience shell (which always supplies one).\n */\nexport function ModalContent(props: ModalContentProps): ReactElement {\n  const { children, ...dialogProps } = props;\n  return (\n    <dialog {...dialogProps} data-uiify-dialog-content=\"\" data-uiify-modal-content=\"\">\n      {children}\n    </dialog>\n  );\n}\nModalContent.displayName = \"ModalContent\";\n\n/**\n * Requests closing `target` (fires the cancelable `cancel` event first).\n *\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`, which already emits\n * `data-uiify-dialog-close`; this part adds its own `data-uiify-modal-close`. See\n * `ModalTrigger` for why this calls the element as a function instead of rendering it.\n */\nexport function ModalClose<TAs extends ElementType = \"button\">(\n  props: ModalCloseProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as ModalCloseProps<\"button\">;\n  return ElementDialogClose({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-modal-close\": \"\",\n    target,\n  } as unknown as DialogCloseProps<TAs>);\n}\nModalClose.displayName = \"ModalClose\";\n"],"mappings":"AA+CI;AA9CJ;AAAA,EACE,eAAe;AAAA,EACf,iBAAiB;AAAA,OACZ;AAgBA,SAAS,aACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO,qBAAqB;AAAA,IAC1B,GAAG;AAAA,IACH,GAAI,OAAO,SAAY,CAAC,IAAI,EAAE,GAAG;AAAA,IACjC,4BAA4B;AAAA,IAC5B;AAAA,EACF,CAAuC;AACzC;AACA,aAAa,cAAc;AAapB,SAAS,aAAa,OAAwC;AACnE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,SACE,oBAAC,YAAQ,GAAG,aAAa,6BAA0B,IAAG,4BAAyB,IAC5E,UACH;AAEJ;AACA,aAAa,cAAc;AASpB,SAAS,WACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO,mBAAmB;AAAA,IACxB,GAAG;AAAA,IACH,GAAI,OAAO,SAAY,CAAC,IAAI,EAAE,GAAG;AAAA,IACjC,0BAA0B;AAAA,IAC1B;AAAA,EACF,CAAqC;AACvC;AACA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/modal/ModalParts.tsx"],"sourcesContent":["import type { ElementType, ReactElement } from \"react\";\nimport { renderNativeInvoker } from \"@gunkin/uiify/core/render\";\nimport type { ModalCloseProps, ModalContentProps, ModalTriggerProps } from \"./types.js\";\n\n/** Native modal invoker with modal identity and trigger anatomy. */\nexport function ModalTrigger<TAs extends ElementType = \"button\">(\n  props: ModalTriggerProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as ModalTriggerProps<\"button\">;\n  return renderNativeInvoker(\n    as,\n    \"data-uiify-modal\",\n    \"trigger\",\n    \"show-modal\",\n    target,\n    consumerProps as Record<string, unknown>,\n    { button: true },\n  );\n}\nModalTrigger.displayName = \"ModalTrigger\";\n\n/** Native modal dialog content with modal identity and content anatomy. */\nexport function ModalContent(props: ModalContentProps): ReactElement {\n  const { children, ...dialogProps } = props;\n  return (\n    <dialog {...dialogProps} data-part=\"content\" data-uiify-modal=\"\">\n      {children}\n    </dialog>\n  );\n}\nModalContent.displayName = \"ModalContent\";\n\n/** Native modal close invoker. */\nexport function ModalClose<TAs extends ElementType = \"button\">(\n  props: ModalCloseProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as ModalCloseProps<\"button\">;\n  return renderNativeInvoker(\n    as,\n    \"data-uiify-modal\",\n    \"close\",\n    \"request-close\",\n    target,\n    consumerProps as Record<string, unknown>,\n    { button: true, variant: \"ghost\" },\n  );\n}\nModalClose.displayName = \"ModalClose\";\n"],"mappings":"AAyBI;AAxBJ,SAAS,2BAA2B;AAI7B,SAAS,aACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,QAAQ,KAAK;AAAA,EACjB;AACF;AACA,aAAa,cAAc;AAGpB,SAAS,aAAa,OAAwC;AACnE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,SACE,oBAAC,YAAQ,GAAG,aAAa,aAAU,WAAU,oBAAiB,IAC3D,UACH;AAEJ;AACA,aAAa,cAAc;AAGpB,SAAS,WACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,QAAQ,MAAM,SAAS,QAAQ;AAAA,EACnC;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/components/modal/client/ModalClientContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClientContent.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAM3D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CAoG/E;yBApGe,kBAAkB"}
+{"version":3,"file":"ModalClientContent.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAM3D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CA4G/E;yBA5Ge,kBAAkB"}

package/dist/components/modal/client/ModalClientContent.js

@@ -59,14 +59,17 @@ function ModalClientContent(props) {
     onClick?.(event);
     if (event.defaultPrevented || !closeOnBackdropClick) return;
     if (event.target !== event.currentTarget) return;
+    const box = event.currentTarget.getBoundingClientRect();
+    const onBackdrop = event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+    if (!onBackdrop) return;
     event.currentTarget.requestClose();
   };
   return /* @__PURE__ */ jsx(
     "dialog",
     {
       ...dialogProps,
-      "data-uiify-dialog-content": "",
-      "data-uiify-modal-content": "",
+      "data-part": "content",
+      "data-uiify-modal": "",
       onClick: handleClick,
       ref: mergedRef,
       suppressHydrationWarning: true,

package/dist/components/modal/client/ModalClientContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useReducer, useRef, useState } from \"react\";\nimport type { MouseEvent, ReactElement } from \"react\";\nimport { useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport type { ModalClientContentProps } from \"../types.js\";\n\nfunction increment(count: number): number {\n  return count + 1;\n}\n\n/**\n * Controlled/initially-open adapter over a native modal `<dialog>`.\n *\n * The browser stays the owner of modality: opening is `showModal()`, closing is\n * `close()`, and every change — invoker command, Escape, `requestClose()`,\n * `form method=\"dialog\"`, programmatic — is observed through the single native\n * `toggle` event (Chrome 132, Firefox 133, Safari 26). SSR never emits `open`;\n * `defaultOpen` and controlled `open` are applied after mount.\n */\nexport function ModalClientContent(props: ModalClientContentProps): ReactElement {\n  const {\n    children,\n    closeOnBackdropClick = false,\n    defaultOpen = false,\n    onClick,\n    onOpenChange,\n    open,\n    ref,\n    ...dialogProps\n  } = props;\n\n  const elementRef = useRef<HTMLDialogElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDialogElement>(elementRef, ref);\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  // Bumped on every native toggle so the sync effect re-runs after the parent\n  // has had its render: a controlling parent that rejected the change is then\n  // reconciled by reverting the element.\n  const [nativeVersion, recordNativeToggle] = useReducer(increment, 0);\n  const controlled = open !== undefined;\n  const wantOpen = controlled ? open : uncontrolledOpen;\n\n  const wantOpenRef = useRef(wantOpen);\n  wantOpenRef.current = wantOpen;\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  // One-shot: has the first-mount reconciliation below already run?\n  const reconciledRef = useRef(false);\n\n  useEffect(() => {\n    const dialog = elementRef.current;\n    if (!dialog) return;\n    if (!reconciledRef.current) {\n      reconciledRef.current = true;\n      // SSR markup is always closed. If the dialog is already open at mount,\n      // that can only mean a native invoker command opened it in the window\n      // between initial paint and this effect running — the `toggle` event\n      // fired with no listener attached yet, and that notification is\n      // otherwise lost forever. Recover it exactly like a native toggle.\n      //\n      // The reverse (closed at mount) is never reconciled: it's indistinguishable\n      // from \"nothing happened\" versus a pre-hydration open+close cycle that\n      // netted back to closed, and it's also the normal starting shape for\n      // defaultOpen (open before hydration) is reconciled when the DOM catches up.\n      if (dialog.open && !wantOpenRef.current) {\n        if (!controlled) setUncontrolledOpen(true);\n        onOpenChangeRef.current?.(true);\n        // Defer enacting show/close to the next pass, once the controlling\n        // parent (if any) has had a chance to react to the report above —\n        // the DOM already matches what was just reported, so there is\n        // nothing to enact this pass regardless.\n        recordNativeToggle();\n        return;\n      }\n    }\n    if (wantOpen && !dialog.open) dialog.showModal();\n    else if (!wantOpen && dialog.open) dialog.close();\n    // `controlled` is read above (line 66) and must be a dependency; the sibling\n    // `toggle`-listener effect below lists it for the same reason.\n  }, [nativeVersion, wantOpen, controlled]);\n\n  useEffect(() => {\n    const dialog = elementRef.current;\n    if (!dialog) return;\n    const onToggle = (event: Event): void => {\n      const next = (event as ToggleEvent).newState === \"open\";\n      // Programmatic changes already match the desired state; only report\n      // changes the browser initiated.\n      if (next === wantOpenRef.current) return;\n      if (!controlled) setUncontrolledOpen(next);\n      onOpenChangeRef.current?.(next);\n      recordNativeToggle();\n    };\n    dialog.addEventListener(\"toggle\", onToggle);\n    return () => dialog.removeEventListener(\"toggle\", onToggle);\n  }, [controlled]);\n\n  const handleClick = (event: MouseEvent<HTMLDialogElement>): void => {\n    onClick?.(event);\n    if (event.defaultPrevented || !closeOnBackdropClick) return;\n    if (event.target !== event.currentTarget) return;\n    (event.currentTarget as HTMLDialogElement & { requestClose(): void }).requestClose();\n  };\n\n  return (\n    <dialog\n      {...dialogProps}\n      data-uiify-dialog-content=\"\"\n      data-uiify-modal-content=\"\"\n      onClick={handleClick}\n      ref={mergedRef}\n      // SSR markup is always closed, but the browser may have already opened this\n      // dialog via a native invoker command before hydration (see the effect above,\n      // which reconciles exactly that). React's hydration diff otherwise flags the\n      // resulting `open` mismatch as an error; it is the documented recovery path.\n      suppressHydrationWarning\n    >\n      {children}\n    </dialog>\n  );\n}\nModalClientContent.displayName = \"ModalClientContent\";\n"],"mappings":";AAyGI;AAvGJ,SAAS,WAAW,YAAY,QAAQ,gBAAgB;AAExD,SAAS,qBAAqB;AAG9B,SAAS,UAAU,OAAuB;AACxC,SAAO,QAAQ;AACjB;AAWO,SAAS,mBAAmB,OAA8C;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,YAAY,cAAiC,YAAY,GAAG;AAClE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,WAAW;AAIpE,QAAM,CAAC,eAAe,kBAAkB,IAAI,WAAW,WAAW,CAAC;AACnE,QAAM,aAAa,SAAS;AAC5B,QAAM,WAAW,aAAa,OAAO;AAErC,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACtB,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAE1B,QAAM,gBAAgB,OAAO,KAAK;AAElC,YAAU,MAAM;AACd,UAAM,SAAS,WAAW;AAC1B,QAAI,CAAC,OAAQ;AACb,QAAI,CAAC,cAAc,SAAS;AAC1B,oBAAc,UAAU;AAWxB,UAAI,OAAO,QAAQ,CAAC,YAAY,SAAS;AACvC,YAAI,CAAC,WAAY,qBAAoB,IAAI;AACzC,wBAAgB,UAAU,IAAI;AAK9B,2BAAmB;AACnB;AAAA,MACF;AAAA,IACF;AACA,QAAI,YAAY,CAAC,OAAO,KAAM,QAAO,UAAU;AAAA,aACtC,CAAC,YAAY,OAAO,KAAM,QAAO,MAAM;AAAA,EAGlD,GAAG,CAAC,eAAe,UAAU,UAAU,CAAC;AAExC,YAAU,MAAM;AACd,UAAM,SAAS,WAAW;AAC1B,QAAI,CAAC,OAAQ;AACb,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,OAAQ,MAAsB,aAAa;AAGjD,UAAI,SAAS,YAAY,QAAS;AAClC,UAAI,CAAC,WAAY,qBAAoB,IAAI;AACzC,sBAAgB,UAAU,IAAI;AAC9B,yBAAmB;AAAA,IACrB;AACA,WAAO,iBAAiB,UAAU,QAAQ;AAC1C,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,cAAc,CAAC,UAA+C;AAClE,cAAU,KAAK;AACf,QAAI,MAAM,oBAAoB,CAAC,qBAAsB;AACrD,QAAI,MAAM,WAAW,MAAM,cAAe;AAC1C,IAAC,MAAM,cAA+D,aAAa;AAAA,EACrF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,6BAA0B;AAAA,MAC1B,4BAAyB;AAAA,MACzB,SAAS;AAAA,MACT,KAAK;AAAA,MAKL,0BAAwB;AAAA,MAEvB;AAAA;AAAA,EACH;AAEJ;AACA,mBAAmB,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/modal/client/ModalClientContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useReducer, useRef, useState } from \"react\";\nimport type { MouseEvent, ReactElement } from \"react\";\nimport { useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport type { ModalClientContentProps } from \"../types.js\";\n\nfunction increment(count: number): number {\n  return count + 1;\n}\n\n/**\n * Controlled/initially-open adapter over a native modal `<dialog>`.\n *\n * The browser stays the owner of modality: opening is `showModal()`, closing is\n * `close()`, and every change — invoker command, Escape, `requestClose()`,\n * `form method=\"dialog\"`, programmatic — is observed through the single native\n * `toggle` event (Chrome 132, Firefox 133, Safari 26). SSR never emits `open`;\n * `defaultOpen` and controlled `open` are applied after mount.\n */\nexport function ModalClientContent(props: ModalClientContentProps): ReactElement {\n  const {\n    children,\n    closeOnBackdropClick = false,\n    defaultOpen = false,\n    onClick,\n    onOpenChange,\n    open,\n    ref,\n    ...dialogProps\n  } = props;\n\n  const elementRef = useRef<HTMLDialogElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDialogElement>(elementRef, ref);\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  // Bumped on every native toggle so the sync effect re-runs after the parent\n  // has had its render: a controlling parent that rejected the change is then\n  // reconciled by reverting the element.\n  const [nativeVersion, recordNativeToggle] = useReducer(increment, 0);\n  const controlled = open !== undefined;\n  const wantOpen = controlled ? open : uncontrolledOpen;\n\n  const wantOpenRef = useRef(wantOpen);\n  wantOpenRef.current = wantOpen;\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  // One-shot: has the first-mount reconciliation below already run?\n  const reconciledRef = useRef(false);\n\n  useEffect(() => {\n    const dialog = elementRef.current;\n    if (!dialog) return;\n    if (!reconciledRef.current) {\n      reconciledRef.current = true;\n      // SSR markup is always closed. If the dialog is already open at mount,\n      // that can only mean a native invoker command opened it in the window\n      // between initial paint and this effect running — the `toggle` event\n      // fired with no listener attached yet, and that notification is\n      // otherwise lost forever. Recover it exactly like a native toggle.\n      //\n      // The reverse (closed at mount) is never reconciled: it's indistinguishable\n      // from \"nothing happened\" versus a pre-hydration open+close cycle that\n      // netted back to closed, and it's also the normal starting shape for\n      // defaultOpen (open before hydration) is reconciled when the DOM catches up.\n      if (dialog.open && !wantOpenRef.current) {\n        if (!controlled) setUncontrolledOpen(true);\n        onOpenChangeRef.current?.(true);\n        // Defer enacting show/close to the next pass, once the controlling\n        // parent (if any) has had a chance to react to the report above —\n        // the DOM already matches what was just reported, so there is\n        // nothing to enact this pass regardless.\n        recordNativeToggle();\n        return;\n      }\n    }\n    if (wantOpen && !dialog.open) dialog.showModal();\n    else if (!wantOpen && dialog.open) dialog.close();\n    // `controlled` is read above (line 66) and must be a dependency; the sibling\n    // `toggle`-listener effect below lists it for the same reason.\n  }, [nativeVersion, wantOpen, controlled]);\n\n  useEffect(() => {\n    const dialog = elementRef.current;\n    if (!dialog) return;\n    const onToggle = (event: Event): void => {\n      const next = (event as ToggleEvent).newState === \"open\";\n      // Programmatic changes already match the desired state; only report\n      // changes the browser initiated.\n      if (next === wantOpenRef.current) return;\n      if (!controlled) setUncontrolledOpen(next);\n      onOpenChangeRef.current?.(next);\n      recordNativeToggle();\n    };\n    dialog.addEventListener(\"toggle\", onToggle);\n    return () => dialog.removeEventListener(\"toggle\", onToggle);\n  }, [controlled]);\n\n  const handleClick = (event: MouseEvent<HTMLDialogElement>): void => {\n    onClick?.(event);\n    if (event.defaultPrevented || !closeOnBackdropClick) return;\n    if (event.target !== event.currentTarget) return;\n    // A click on dialog padding targets the dialog too; only outside its border box is backdrop.\n    const box = event.currentTarget.getBoundingClientRect(); // banned-read-ok: one read per user click, never per frame\n    const onBackdrop =\n      event.clientX < box.left ||\n      event.clientX > box.right ||\n      event.clientY < box.top ||\n      event.clientY > box.bottom;\n    if (!onBackdrop) return;\n    (event.currentTarget as HTMLDialogElement & { requestClose(): void }).requestClose();\n  };\n\n  return (\n    <dialog\n      {...dialogProps}\n      data-part=\"content\"\n      data-uiify-modal=\"\"\n      onClick={handleClick}\n      ref={mergedRef}\n      // SSR markup is always closed, but the browser may have already opened this\n      // dialog via a native invoker command before hydration (see the effect above,\n      // which reconciles exactly that). React's hydration diff otherwise flags the\n      // resulting `open` mismatch as an error; it is the documented recovery path.\n      suppressHydrationWarning\n    >\n      {children}\n    </dialog>\n  );\n}\nModalClientContent.displayName = \"ModalClientContent\";\n"],"mappings":";AAiHI;AA/GJ,SAAS,WAAW,YAAY,QAAQ,gBAAgB;AAExD,SAAS,qBAAqB;AAG9B,SAAS,UAAU,OAAuB;AACxC,SAAO,QAAQ;AACjB;AAWO,SAAS,mBAAmB,OAA8C;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,YAAY,cAAiC,YAAY,GAAG;AAClE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,WAAW;AAIpE,QAAM,CAAC,eAAe,kBAAkB,IAAI,WAAW,WAAW,CAAC;AACnE,QAAM,aAAa,SAAS;AAC5B,QAAM,WAAW,aAAa,OAAO;AAErC,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACtB,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAE1B,QAAM,gBAAgB,OAAO,KAAK;AAElC,YAAU,MAAM;AACd,UAAM,SAAS,WAAW;AAC1B,QAAI,CAAC,OAAQ;AACb,QAAI,CAAC,cAAc,SAAS;AAC1B,oBAAc,UAAU;AAWxB,UAAI,OAAO,QAAQ,CAAC,YAAY,SAAS;AACvC,YAAI,CAAC,WAAY,qBAAoB,IAAI;AACzC,wBAAgB,UAAU,IAAI;AAK9B,2BAAmB;AACnB;AAAA,MACF;AAAA,IACF;AACA,QAAI,YAAY,CAAC,OAAO,KAAM,QAAO,UAAU;AAAA,aACtC,CAAC,YAAY,OAAO,KAAM,QAAO,MAAM;AAAA,EAGlD,GAAG,CAAC,eAAe,UAAU,UAAU,CAAC;AAExC,YAAU,MAAM;AACd,UAAM,SAAS,WAAW;AAC1B,QAAI,CAAC,OAAQ;AACb,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,OAAQ,MAAsB,aAAa;AAGjD,UAAI,SAAS,YAAY,QAAS;AAClC,UAAI,CAAC,WAAY,qBAAoB,IAAI;AACzC,sBAAgB,UAAU,IAAI;AAC9B,yBAAmB;AAAA,IACrB;AACA,WAAO,iBAAiB,UAAU,QAAQ;AAC1C,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,cAAc,CAAC,UAA+C;AAClE,cAAU,KAAK;AACf,QAAI,MAAM,oBAAoB,CAAC,qBAAsB;AACrD,QAAI,MAAM,WAAW,MAAM,cAAe;AAE1C,UAAM,MAAM,MAAM,cAAc,sBAAsB;AACtD,UAAM,aACJ,MAAM,UAAU,IAAI,QACpB,MAAM,UAAU,IAAI,SACpB,MAAM,UAAU,IAAI,OACpB,MAAM,UAAU,IAAI;AACtB,QAAI,CAAC,WAAY;AACjB,IAAC,MAAM,cAA+D,aAAa;AAAA,EACrF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAU;AAAA,MACV,oBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,KAAK;AAAA,MAKL,0BAAwB;AAAA,MAEvB;AAAA;AAAA,EACH;AAEJ;AACA,mBAAmB,cAAc;","names":[]}

package/dist/components/modal/types.d.ts

@@ -7,9 +7,7 @@ export interface ModalProps {
     readonly description?: ReactNode;
     readonly children?: ReactNode;
     readonly closeLabel?: ReactNode;
-    readonly triggerClassName?: string;
     readonly className?: string;
-    readonly closeClassName?: string;
 }
 /** Own props of the native `show-modal` invoker. */
 export interface ModalTriggerOwnProps {

package/dist/components/modal/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,2FAA2F;IAC3F,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACnF,GAAG,EACH,oBAAoB,CACrB,CAAC;AAEF,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACjF,GAAG,EACH,kBAAkB,CACnB,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB;AAED,sGAAsG;AACtG,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,GAClD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEzF,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC,uGAAuG;IACvG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,uDAAuD;IACvD,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,8FAA8F;AAC9F,MAAM,MAAM,uBAAuB,GAAG,0BAA0B,GAC9D,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,0BAA0B,GAAG,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,2FAA2F;IAC3F,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACnF,GAAG,EACH,oBAAoB,CACrB,CAAC;AAEF,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACjF,GAAG,EACH,kBAAkB,CACnB,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB;AAED,sGAAsG;AACtG,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,GAClD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEzF,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC,uGAAuG;IACvG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,uDAAuD;IACvD,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,8FAA8F;AAC9F,MAAM,MAAM,uBAAuB,GAAG,0BAA0B,GAC9D,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,0BAA0B,GAAG,SAAS,CAAC,CAAC"}

package/dist/components/otp-input/OtpInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/OtpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,WAAW,EAEhB,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAGV,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,YAAY,CAAC;AASpB,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CAuErB;yBAzEe,YAAY;;;AA4E5B,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CA2BrB;AAED,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,EACnE,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GACnC,YAAY,GAAG,IAAI,CAqFrB;AAED,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC"}
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/OtpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,WAAW,EAEhB,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAGV,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,YAAY,CAAC;AASpB,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CAwErB;yBA1Ee,YAAY;;;AA6E5B,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CA4BrB;AAED,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,EACnE,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GACnC,YAAY,GAAG,IAAI,CAsFrB;AAED,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC"}

package/dist/components/otp-input/OtpInput.js

@@ -69,6 +69,7 @@ function OtpInputRoot(props) {
     defaultTag: "div",
     props: {
       ...consumerProps,
+      "data-uiify-otp-input": "",
       "data-disabled": disabled ? "" : void 0,
       "data-complete": value.length === length ? "" : void 0,
       onClick: composeEventHandlers(consumerOnClick, handleClick)
@@ -94,6 +95,7 @@ function OtpInputSlot(props) {
     props: {
       ...consumerProps,
       "aria-hidden": true,
+      "data-part": "slot",
       "data-active": active ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-filled": filled ? "" : void 0,
@@ -151,6 +153,7 @@ function OtpInputHiddenInput(props) {
     defaultTag: "input",
     props: {
       ...consumerProps,
+      "data-part": "control",
       id: inputId,
       ref: hiddenInputRef,
       type: mask ? "password" : "text",

package/dist/components/otp-input/OtpInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/otp-input/OtpInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type CSSProperties,\n  type ElementType,\n  type KeyboardEvent,\n  type ReactElement,\n  type SyntheticEvent,\n} from \"react\";\nimport { useControllableState, useId } from \"@gunkin/uiify/hooks\";\nimport { createPartContext } from \"@gunkin/uiify/core\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport type { PolymorphicProps } from \"@gunkin/uiify/core/render\";\nimport type {\n  OtpInputType,\n  OtpInputContextValue,\n  OtpInputRootProps,\n  OtpInputSlotProps,\n  OtpInputHiddenInputProps,\n} from \"./types.js\";\n\nconst [OtpInputProvider, useOtpInputContext] = createPartContext<OtpInputContextValue>(\"OtpInput\");\n\nfunction sanitizeValue(raw: string, type: OtpInputType, maxLength: number): string {\n  const pattern = type === \"numeric\" ? /\\d/g : /[a-zA-Z0-9]/g;\n  return (raw.match(pattern) ?? []).join(\"\").slice(0, maxLength);\n}\n\nexport function OtpInputRoot<TAs extends ElementType = \"div\">(\n  props: OtpInputRootProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    length = 6,\n    value: controlledValue,\n    defaultValue = \"\",\n    onChange,\n    onComplete,\n    type = \"numeric\",\n    mask = false,\n    disabled = false,\n    autoFocus = false,\n    ...consumerProps\n  } = props as OtpInputRootProps<ElementType>;\n\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const [focused, setFocused] = useState(false);\n  const [value, setValue] = useControllableState<string>({\n    value: controlledValue,\n    defaultValue,\n    onChange,\n  });\n\n  const updateValue = useCallback(\n    (nextRaw: string) => {\n      const next = sanitizeValue(nextRaw, type, length);\n      setValue(next);\n      if (next.length === length) onComplete?.(next);\n    },\n    [length, onComplete, setValue, type],\n  );\n\n  const { onClick: consumerOnClick } = consumerProps as {\n    onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  };\n\n  const handleClick = () => hiddenInputRef.current?.focus();\n\n  const activeIndex = focused ? Math.min(value.length, length - 1) : -1;\n  const contextValue = useMemo<OtpInputContextValue>(\n    () => ({\n      activeIndex,\n      autoFocus,\n      disabled,\n      hiddenInputRef,\n      length,\n      mask,\n      onHiddenBlur: () => setFocused(false),\n      onHiddenFocus: () => setFocused(true),\n      type,\n      updateValue,\n      value,\n    }),\n    [activeIndex, autoFocus, disabled, length, mask, type, updateValue, value],\n  );\n\n  const element = useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-complete\": value.length === length ? \"\" : undefined,\n      onClick: composeEventHandlers(consumerOnClick, handleClick),\n    },\n    render,\n    state: { disabled, mask, type },\n  });\n\n  return <OtpInputProvider value={contextValue}>{element}</OtpInputProvider>;\n}\nOtpInputRoot.displayName = \"OtpInputRoot\";\n\nexport function OtpInputSlot<TAs extends ElementType = \"div\">(\n  props: OtpInputSlotProps<TAs>,\n): ReactElement | null {\n  const { as, render, index, ...consumerProps } = props as OtpInputSlotProps<ElementType>;\n  const { activeIndex, disabled, length, mask, value } = useOtpInputContext(\"Slot\");\n\n  if (index < 0 || index >= length) {\n    throw new Error(`OtpInput.Slot index ${index} is out of range for length ${length}`);\n  }\n\n  const char = value[index] ?? \"\";\n  const active = activeIndex === index;\n  const filled = char !== \"\";\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"aria-hidden\": true,\n      \"data-active\": active ? \"\" : undefined,\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-filled\": filled ? \"\" : undefined,\n      \"data-index\": index,\n      children: mask && filled ? \"•\" : char,\n    },\n    render,\n    state: { active, filled },\n  });\n}\n\nexport function OtpInputHiddenInput<TAs extends ElementType = \"input\">(\n  props: OtpInputHiddenInputProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    autoFocus: autoFocusProp,\n    style: consumerStyle,\n    ...consumerProps\n  } = props as PolymorphicProps<\"input\", { readonly autoFocus?: boolean }>;\n\n  const {\n    autoFocus: rootAutoFocus,\n    disabled,\n    hiddenInputRef,\n    length,\n    mask,\n    onHiddenBlur,\n    onHiddenFocus,\n    type,\n    updateValue,\n    value,\n  } = useOtpInputContext(\"HiddenInput\");\n  const inputId = useId();\n  const autoFocus = autoFocusProp ?? rootAutoFocus;\n  const {\n    onBlur: consumerOnBlur,\n    onChange: consumerOnChange,\n    onFocus: consumerOnFocus,\n    onKeyDown: consumerOnKeyDown,\n    onPaste: consumerOnPaste,\n  } = consumerProps as {\n    onBlur?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onChange?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onFocus?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onPaste?: (event: ClipboardEvent<HTMLInputElement>) => void;\n  };\n\n  const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n    updateValue(event.currentTarget.value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Backspace\" && value.length > 0) {\n      event.preventDefault();\n      updateValue(value.slice(0, -1));\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    updateValue(event.clipboardData.getData(\"text\"));\n  };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"input\",\n    props: {\n      ...consumerProps,\n      id: inputId,\n      ref: hiddenInputRef,\n      type: mask ? \"password\" : \"text\",\n      inputMode: type === \"numeric\" ? \"numeric\" : \"text\",\n      autoComplete: \"one-time-code\",\n      autoFocus: autoFocus || undefined,\n      disabled: disabled || undefined,\n      \"aria-label\": \"One-time code\",\n      value,\n      maxLength: length,\n      onChange: composeEventHandlers(consumerOnChange, handleChange),\n      onFocus: composeEventHandlers(consumerOnFocus, onHiddenFocus),\n      onBlur: composeEventHandlers(consumerOnBlur, onHiddenBlur),\n      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),\n      onPaste: composeEventHandlers(consumerOnPaste, handlePaste),\n      style: {\n        ...consumerStyle,\n        position: \"absolute\",\n        opacity: 0,\n        pointerEvents: \"none\",\n        width: 1,\n        height: 1,\n      } as CSSProperties,\n    },\n    render,\n    state: { disabled },\n  });\n}\n\nexport const OtpInput = {\n  Root: OtpInputRoot,\n  Slot: OtpInputSlot,\n  HiddenInput: OtpInputHiddenInput,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/otp-input/OtpInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type CSSProperties,\n  type ElementType,\n  type KeyboardEvent,\n  type ReactElement,\n  type SyntheticEvent,\n} from \"react\";\nimport { useControllableState, useId } from \"@gunkin/uiify/hooks\";\nimport { createPartContext } from \"@gunkin/uiify/core\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport type { PolymorphicProps } from \"@gunkin/uiify/core/render\";\nimport type {\n  OtpInputType,\n  OtpInputContextValue,\n  OtpInputRootProps,\n  OtpInputSlotProps,\n  OtpInputHiddenInputProps,\n} from \"./types.js\";\n\nconst [OtpInputProvider, useOtpInputContext] = createPartContext<OtpInputContextValue>(\"OtpInput\");\n\nfunction sanitizeValue(raw: string, type: OtpInputType, maxLength: number): string {\n  const pattern = type === \"numeric\" ? /\\d/g : /[a-zA-Z0-9]/g;\n  return (raw.match(pattern) ?? []).join(\"\").slice(0, maxLength);\n}\n\nexport function OtpInputRoot<TAs extends ElementType = \"div\">(\n  props: OtpInputRootProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    length = 6,\n    value: controlledValue,\n    defaultValue = \"\",\n    onChange,\n    onComplete,\n    type = \"numeric\",\n    mask = false,\n    disabled = false,\n    autoFocus = false,\n    ...consumerProps\n  } = props as OtpInputRootProps<ElementType>;\n\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const [focused, setFocused] = useState(false);\n  const [value, setValue] = useControllableState<string>({\n    value: controlledValue,\n    defaultValue,\n    onChange,\n  });\n\n  const updateValue = useCallback(\n    (nextRaw: string) => {\n      const next = sanitizeValue(nextRaw, type, length);\n      setValue(next);\n      if (next.length === length) onComplete?.(next);\n    },\n    [length, onComplete, setValue, type],\n  );\n\n  const { onClick: consumerOnClick } = consumerProps as {\n    onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  };\n\n  const handleClick = () => hiddenInputRef.current?.focus();\n\n  const activeIndex = focused ? Math.min(value.length, length - 1) : -1;\n  const contextValue = useMemo<OtpInputContextValue>(\n    () => ({\n      activeIndex,\n      autoFocus,\n      disabled,\n      hiddenInputRef,\n      length,\n      mask,\n      onHiddenBlur: () => setFocused(false),\n      onHiddenFocus: () => setFocused(true),\n      type,\n      updateValue,\n      value,\n    }),\n    [activeIndex, autoFocus, disabled, length, mask, type, updateValue, value],\n  );\n\n  const element = useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"data-uiify-otp-input\": \"\",\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-complete\": value.length === length ? \"\" : undefined,\n      onClick: composeEventHandlers(consumerOnClick, handleClick),\n    },\n    render,\n    state: { disabled, mask, type },\n  });\n\n  return <OtpInputProvider value={contextValue}>{element}</OtpInputProvider>;\n}\nOtpInputRoot.displayName = \"OtpInputRoot\";\n\nexport function OtpInputSlot<TAs extends ElementType = \"div\">(\n  props: OtpInputSlotProps<TAs>,\n): ReactElement | null {\n  const { as, render, index, ...consumerProps } = props as OtpInputSlotProps<ElementType>;\n  const { activeIndex, disabled, length, mask, value } = useOtpInputContext(\"Slot\");\n\n  if (index < 0 || index >= length) {\n    throw new Error(`OtpInput.Slot index ${index} is out of range for length ${length}`);\n  }\n\n  const char = value[index] ?? \"\";\n  const active = activeIndex === index;\n  const filled = char !== \"\";\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"aria-hidden\": true,\n      \"data-part\": \"slot\",\n      \"data-active\": active ? \"\" : undefined,\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-filled\": filled ? \"\" : undefined,\n      \"data-index\": index,\n      children: mask && filled ? \"•\" : char,\n    },\n    render,\n    state: { active, filled },\n  });\n}\n\nexport function OtpInputHiddenInput<TAs extends ElementType = \"input\">(\n  props: OtpInputHiddenInputProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    autoFocus: autoFocusProp,\n    style: consumerStyle,\n    ...consumerProps\n  } = props as PolymorphicProps<\"input\", { readonly autoFocus?: boolean }>;\n\n  const {\n    autoFocus: rootAutoFocus,\n    disabled,\n    hiddenInputRef,\n    length,\n    mask,\n    onHiddenBlur,\n    onHiddenFocus,\n    type,\n    updateValue,\n    value,\n  } = useOtpInputContext(\"HiddenInput\");\n  const inputId = useId();\n  const autoFocus = autoFocusProp ?? rootAutoFocus;\n  const {\n    onBlur: consumerOnBlur,\n    onChange: consumerOnChange,\n    onFocus: consumerOnFocus,\n    onKeyDown: consumerOnKeyDown,\n    onPaste: consumerOnPaste,\n  } = consumerProps as {\n    onBlur?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onChange?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onFocus?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onPaste?: (event: ClipboardEvent<HTMLInputElement>) => void;\n  };\n\n  const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n    updateValue(event.currentTarget.value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Backspace\" && value.length > 0) {\n      event.preventDefault();\n      updateValue(value.slice(0, -1));\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    updateValue(event.clipboardData.getData(\"text\"));\n  };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"input\",\n    props: {\n      ...consumerProps,\n      \"data-part\": \"control\",\n      id: inputId,\n      ref: hiddenInputRef,\n      type: mask ? \"password\" : \"text\",\n      inputMode: type === \"numeric\" ? \"numeric\" : \"text\",\n      autoComplete: \"one-time-code\",\n      autoFocus: autoFocus || undefined,\n      disabled: disabled || undefined,\n      \"aria-label\": \"One-time code\",\n      value,\n      maxLength: length,\n      onChange: composeEventHandlers(consumerOnChange, handleChange),\n      onFocus: composeEventHandlers(consumerOnFocus, onHiddenFocus),\n      onBlur: composeEventHandlers(consumerOnBlur, onHiddenBlur),\n      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),\n      onPaste: composeEventHandlers(consumerOnPaste, handlePaste),\n      style: {\n        ...consumerStyle,\n        position: \"absolute\",\n        opacity: 0,\n        pointerEvents: \"none\",\n        width: 1,\n        height: 1,\n      } as CSSProperties,\n    },\n    render,\n    state: { disabled },\n  });\n}\n\nexport const OtpInput = {\n  Root: OtpInputRoot,\n  Slot: OtpInputSlot,\n  HiddenInput: OtpInputHiddenInput,\n};\n"],"mappings":"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","names":[]}

package/dist/components/popup/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAa,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAKV,cAAc,EACd,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAmDpB,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,GAAG,IAAI,CA2BpE;yBA3Be,SAAS;;;AA8BzB,wBAAgB,YAAY,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAuBlF;yBAvBe,YAAY;;;AA0B5B,wBAAgB,YAAY,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CA2ClF;yBA3Ce,YAAY;;;AA8C5B,wBAAgB,UAAU,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAkB9E;yBAlBe,UAAU;;;AA2B1B,eAAO,MAAM,KAAK;;;;;CAKjB,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAa,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAKV,cAAc,EACd,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAmDpB,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,GAAG,IAAI,CA0BpE;yBA1Be,SAAS;;;AA6BzB,wBAAgB,YAAY,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAyBlF;yBAzBe,YAAY;;;AA4B5B,wBAAgB,YAAY,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CA6ClF;yBA7Ce,YAAY;;;AAgD5B,wBAAgB,UAAU,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAoB9E;yBApBe,UAAU;;;AA6B1B,eAAO,MAAM,KAAK;;;;;CAKjB,CAAC"}

package/dist/components/popup/Popup.js

@@ -55,9 +55,8 @@ function PopupRoot(props) {
     {
       ...consumerProps,
       ...className ? { className } : {},
-      // Emit both the current marker and the deprecated marker during the compatibility window.
-      "data-uiify-popover-root": "",
-      "data-uiify-popup-root": ""
+      "data-part": "root",
+      "data-uiify-popup": ""
     },
     enhancedChildren
   );
@@ -74,6 +73,8 @@ function PopupTrigger(props) {
     {
       ...consumerProps,
       ...createAnchorTriggerProps(anchorName, consumerProps.style),
+      "data-part": "trigger",
+      "data-uiify-popup": "",
       "aria-controls": __popupId,
       "aria-expanded": false,
       className,
@@ -119,6 +120,8 @@ function PopupContent(props) {
         side
       }),
       ...className ? { className } : {},
+      "data-part": "content",
+      "data-uiify-popup": "",
       id: __popupId,
       popover: __mode
     },
@@ -136,6 +139,8 @@ function PopupClose(props) {
     {
       ...consumerProps,
       ...className ? { className } : {},
+      "data-part": "close",
+      "data-uiify-popup": "",
       command: "hide-popover",
       commandfor: __popupId,
       type: "button"

package/dist/components/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { Children, createElement, isValidElement } from \"react\";\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport type {\n  AnchorSide,\n  AnchorAlign,\n  PopupInjectedProps,\n  PopupPartName,\n  PopupRootProps,\n  PopupTriggerInternalProps,\n  PopupContentInternalProps,\n  PopupCloseInternalProps,\n} from \"./types.js\";\n\nfunction anchorNameForId(id: string): string {\n  return `--${id}-anchor`;\n}\n\nfunction createAnchorTriggerProps(anchorName: string, consumerStyle?: CSSProperties) {\n  return {\n    \"data-anchor\": \"\",\n    style: { ...consumerStyle, \"--uiify-anchor\": anchorName } as CSSProperties,\n  } as const;\n}\n\nfunction createAnchorPositionerProps({\n  align,\n  anchorName,\n  consumerStyle,\n  side,\n}: {\n  readonly align: AnchorAlign;\n  readonly anchorName: string;\n  readonly consumerStyle?: CSSProperties | undefined;\n  readonly side: AnchorSide;\n}) {\n  return {\n    \"data-align\": align,\n    \"data-anchor\": \"\",\n    \"data-positioning\": \"native\" as const,\n    \"data-side\": side,\n    style: { ...consumerStyle, \"--uiify-anchor\": anchorName } as CSSProperties,\n  };\n}\n\nconst POPOVER_PART = Symbol.for(\"@gunkin/uiify/popup/part\");\n\nfunction markPopupPart<T>(component: T, part: PopupPartName): T {\n  Object.defineProperty(component, POPOVER_PART, { enumerable: false, value: part });\n  return component;\n}\n\nfunction getPopupPart(type: unknown): PopupPartName | undefined {\n  if (typeof type === \"function\" || (typeof type === \"object\" && type !== null)) {\n    return (type as Record<symbol, PopupPartName | undefined>)[POPOVER_PART];\n  }\n  return undefined;\n}\n\nfunction isPopupPart(type: unknown, part: PopupPartName): boolean {\n  return getPopupPart(type) === part;\n}\n\nexport function PopupRoot(props: PopupRootProps): ReactElement | null {\n  const { children, className, id, mode = \"auto\", ...consumerProps } = props;\n\n  const enhancedChildren = Children.map(children, (child: ReactNode) => {\n    if (!isValidElement<PopupInjectedProps>(child)) return child;\n    const part = getPopupPart(child.type);\n    if (part === \"trigger\" || part === \"content\" || part === \"close\") {\n      return createElement(child.type, {\n        ...(child.props as Record<string, unknown>),\n        __mode: mode,\n        __popupId: id,\n      });\n    }\n    return child;\n  });\n\n  return createElement(\n    \"div\",\n    {\n      ...consumerProps,\n      ...(className ? { className } : {}),\n      // Emit both the current marker and the deprecated marker during the compatibility window.\n      \"data-uiify-popover-root\": \"\",\n      \"data-uiify-popup-root\": \"\",\n    },\n    enhancedChildren,\n  );\n}\nPopupRoot.displayName = \"PopupRoot\";\n\nexport function PopupTrigger(props: PopupTriggerInternalProps): ReactElement | null {\n  const { children, className, __mode: _mode, __popupId, ...consumerProps } = props;\n\n  if (!__popupId) {\n    throw new Error(\"Popup.Trigger must be used within Popup.Root\");\n  }\n\n  const anchorName = anchorNameForId(__popupId);\n\n  return createElement(\n    \"button\",\n    {\n      ...consumerProps,\n      ...createAnchorTriggerProps(anchorName, consumerProps.style),\n      \"aria-controls\": __popupId,\n      \"aria-expanded\": false,\n      className,\n      command: \"toggle-popover\",\n      commandfor: __popupId,\n      type: \"button\",\n    },\n    children,\n  );\n}\nPopupTrigger.displayName = \"PopupTrigger\";\n\nexport function PopupContent(props: PopupContentInternalProps): ReactElement | null {\n  const {\n    align = \"center\",\n    children,\n    className,\n    side = \"bottom\",\n    __mode = \"auto\",\n    __popupId,\n    ...consumerProps\n  } = props;\n\n  if (!__popupId) {\n    throw new Error(\"Popup.Content must be used within Popup.Root\");\n  }\n\n  const anchorName = anchorNameForId(__popupId);\n\n  const enhancedChildren = Children.map(children, (child: ReactNode) => {\n    if (isValidElement<PopupInjectedProps>(child) && isPopupPart(child.type, \"close\")) {\n      return createElement(child.type, {\n        ...(child.props as Record<string, unknown>),\n        __popupId,\n      });\n    }\n    return child;\n  });\n\n  return createElement(\n    \"div\",\n    {\n      ...consumerProps,\n      ...createAnchorPositionerProps({\n        align,\n        anchorName,\n        consumerStyle: consumerProps.style,\n        side,\n      }),\n      ...(className ? { className } : {}),\n      id: __popupId,\n      popover: __mode,\n    },\n    enhancedChildren,\n  );\n}\nPopupContent.displayName = \"PopupContent\";\n\nexport function PopupClose(props: PopupCloseInternalProps): ReactElement | null {\n  const { children, className, __mode: _mode, __popupId, ...consumerProps } = props;\n\n  if (!__popupId) {\n    throw new Error(\"Popup.Close must be used within Popup.Root\");\n  }\n\n  return createElement(\n    \"button\",\n    {\n      ...consumerProps,\n      ...(className ? { className } : {}),\n      command: \"hide-popover\",\n      commandfor: __popupId,\n      type: \"button\",\n    },\n    children,\n  );\n}\nPopupClose.displayName = \"PopupClose\";\n\nmarkPopupPart(PopupTrigger, \"trigger\");\n\nmarkPopupPart(PopupContent, \"content\");\n\nmarkPopupPart(PopupClose, \"close\");\n\nexport const Popup = {\n  Close: PopupClose,\n  Content: PopupContent,\n  Root: PopupRoot,\n  Trigger: PopupTrigger,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { Children, createElement, isValidElement } from \"react\";\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport type {\n  AnchorSide,\n  AnchorAlign,\n  PopupInjectedProps,\n  PopupPartName,\n  PopupRootProps,\n  PopupTriggerInternalProps,\n  PopupContentInternalProps,\n  PopupCloseInternalProps,\n} from \"./types.js\";\n\nfunction anchorNameForId(id: string): string {\n  return `--${id}-anchor`;\n}\n\nfunction createAnchorTriggerProps(anchorName: string, consumerStyle?: CSSProperties) {\n  return {\n    \"data-anchor\": \"\",\n    style: { ...consumerStyle, \"--uiify-anchor\": anchorName } as CSSProperties,\n  } as const;\n}\n\nfunction createAnchorPositionerProps({\n  align,\n  anchorName,\n  consumerStyle,\n  side,\n}: {\n  readonly align: AnchorAlign;\n  readonly anchorName: string;\n  readonly consumerStyle?: CSSProperties | undefined;\n  readonly side: AnchorSide;\n}) {\n  return {\n    \"data-align\": align,\n    \"data-anchor\": \"\",\n    \"data-positioning\": \"native\" as const,\n    \"data-side\": side,\n    style: { ...consumerStyle, \"--uiify-anchor\": anchorName } as CSSProperties,\n  };\n}\n\nconst POPOVER_PART = Symbol.for(\"@gunkin/uiify/popup/part\");\n\nfunction markPopupPart<T>(component: T, part: PopupPartName): T {\n  Object.defineProperty(component, POPOVER_PART, { enumerable: false, value: part });\n  return component;\n}\n\nfunction getPopupPart(type: unknown): PopupPartName | undefined {\n  if (typeof type === \"function\" || (typeof type === \"object\" && type !== null)) {\n    return (type as Record<symbol, PopupPartName | undefined>)[POPOVER_PART];\n  }\n  return undefined;\n}\n\nfunction isPopupPart(type: unknown, part: PopupPartName): boolean {\n  return getPopupPart(type) === part;\n}\n\nexport function PopupRoot(props: PopupRootProps): ReactElement | null {\n  const { children, className, id, mode = \"auto\", ...consumerProps } = props;\n\n  const enhancedChildren = Children.map(children, (child: ReactNode) => {\n    if (!isValidElement<PopupInjectedProps>(child)) return child;\n    const part = getPopupPart(child.type);\n    if (part === \"trigger\" || part === \"content\" || part === \"close\") {\n      return createElement(child.type, {\n        ...(child.props as Record<string, unknown>),\n        __mode: mode,\n        __popupId: id,\n      });\n    }\n    return child;\n  });\n\n  return createElement(\n    \"div\",\n    {\n      ...consumerProps,\n      ...(className ? { className } : {}),\n      \"data-part\": \"root\",\n      \"data-uiify-popup\": \"\",\n    },\n    enhancedChildren,\n  );\n}\nPopupRoot.displayName = \"PopupRoot\";\n\nexport function PopupTrigger(props: PopupTriggerInternalProps): ReactElement | null {\n  const { children, className, __mode: _mode, __popupId, ...consumerProps } = props;\n\n  if (!__popupId) {\n    throw new Error(\"Popup.Trigger must be used within Popup.Root\");\n  }\n\n  const anchorName = anchorNameForId(__popupId);\n\n  return createElement(\n    \"button\",\n    {\n      ...consumerProps,\n      ...createAnchorTriggerProps(anchorName, consumerProps.style),\n      \"data-part\": \"trigger\",\n      \"data-uiify-popup\": \"\",\n      \"aria-controls\": __popupId,\n      \"aria-expanded\": false,\n      className,\n      command: \"toggle-popover\",\n      commandfor: __popupId,\n      type: \"button\",\n    },\n    children,\n  );\n}\nPopupTrigger.displayName = \"PopupTrigger\";\n\nexport function PopupContent(props: PopupContentInternalProps): ReactElement | null {\n  const {\n    align = \"center\",\n    children,\n    className,\n    side = \"bottom\",\n    __mode = \"auto\",\n    __popupId,\n    ...consumerProps\n  } = props;\n\n  if (!__popupId) {\n    throw new Error(\"Popup.Content must be used within Popup.Root\");\n  }\n\n  const anchorName = anchorNameForId(__popupId);\n\n  const enhancedChildren = Children.map(children, (child: ReactNode) => {\n    if (isValidElement<PopupInjectedProps>(child) && isPopupPart(child.type, \"close\")) {\n      return createElement(child.type, {\n        ...(child.props as Record<string, unknown>),\n        __popupId,\n      });\n    }\n    return child;\n  });\n\n  return createElement(\n    \"div\",\n    {\n      ...consumerProps,\n      ...createAnchorPositionerProps({\n        align,\n        anchorName,\n        consumerStyle: consumerProps.style,\n        side,\n      }),\n      ...(className ? { className } : {}),\n      \"data-part\": \"content\",\n      \"data-uiify-popup\": \"\",\n      id: __popupId,\n      popover: __mode,\n    },\n    enhancedChildren,\n  );\n}\nPopupContent.displayName = \"PopupContent\";\n\nexport function PopupClose(props: PopupCloseInternalProps): ReactElement | null {\n  const { children, className, __mode: _mode, __popupId, ...consumerProps } = props;\n\n  if (!__popupId) {\n    throw new Error(\"Popup.Close must be used within Popup.Root\");\n  }\n\n  return createElement(\n    \"button\",\n    {\n      ...consumerProps,\n      ...(className ? { className } : {}),\n      \"data-part\": \"close\",\n      \"data-uiify-popup\": \"\",\n      command: \"hide-popover\",\n      commandfor: __popupId,\n      type: \"button\",\n    },\n    children,\n  );\n}\nPopupClose.displayName = \"PopupClose\";\n\nmarkPopupPart(PopupTrigger, \"trigger\");\n\nmarkPopupPart(PopupContent, \"content\");\n\nmarkPopupPart(PopupClose, \"close\");\n\nexport const Popup = {\n  Close: PopupClose,\n  Content: PopupContent,\n  Root: PopupRoot,\n  Trigger: PopupTrigger,\n};\n"],"mappings":"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","names":[]}

package/dist/components/popup/PopupParts.d.ts

@@ -1,39 +1,16 @@
 import type { ElementType, ReactElement } from "react";
 import type { PopupCloseProps, PopupContentProps, PopupTriggerProps } from "./types.js";
-/**
- * Toggles `target`; light dismiss, Escape and nesting are handled by the browser.
- *
- * Built on `@gunkin/uiify/elements/popover`'s `Popover.Trigger`, which already emits
- * `data-uiify-popover-trigger` — the deprecated marker this component used to emit itself
- * now comes free from the element, so the
- * duplicate emission is deleted; this part adds only its own `data-uiify-popup-trigger`.
- * Calls the element as a plain function rather than rendering
- * `<ElementPopoverTrigger>`: Tier 0, no hooks (enforced by elements/architecture.test.ts), so
- * this is safe, and it skips a `jsx()` call — see ModalParts.tsx's `ModalTrigger` for the same
- * pattern and the byte-budget reasoning.
- */
+/** Native popover trigger with popup identity and trigger anatomy. */
 export declare function PopupTrigger<TAs extends ElementType = "button">(props: PopupTriggerProps<TAs>): ReactElement;
 export declare namespace PopupTrigger {
     var displayName: string;
 }
-/**
- * The popover surface. `data-side`/`data-align` drive the optional anchor CSS in @gunkin/uiify/styles.
- *
- * Built on `@gunkin/uiify/elements/popover`'s `Popover.Surface`, which already emits
- * `data-uiify-popover-surface`; this part adds its own `data-uiify-popup-content` and the
- * deprecated `data-uiify-popover-content` (a different string from the element's own marker,
- * so additive — unlike Trigger/Close above).
- */
+/** Native popover surface with popup identity and content anatomy. */
 export declare function PopupContent(props: PopupContentProps): ReactElement;
 export declare namespace PopupContent {
     var displayName: string;
 }
-/**
- * Hides `target`.
- *
- * Built on `@gunkin/uiify/elements/popover`'s `Popover.Close` (`action="hide"`), which already emits
- * `data-uiify-popover-close`; this part adds its own `data-uiify-popup-close`.
- */
+/** Native popover close invoker. */
 export declare function PopupClose<TAs extends ElementType = "button">(props: PopupCloseProps<TAs>): ReactElement;
 export declare namespace PopupClose {
     var displayName: string;

package/dist/components/popup/PopupParts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupParts.d.ts","sourceRoot":"","sources":["../../../src/components/popup/PopupParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAWvD,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAExF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,CAQd;yBAVe,YAAY;;;AAa5B;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAMnE;yBANe,YAAY;;;AAS5B;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC3D,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,GAC1B,YAAY,CAQd;yBAVe,UAAU"}
+{"version":3,"file":"PopupParts.d.ts","sourceRoot":"","sources":["../../../src/components/popup/PopupParts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAExF,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,CAUd;yBAZe,YAAY;;;AAe5B,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAenE;yBAfe,YAAY;;;AAkB5B,oCAAoC;AACpC,wBAAgB,UAAU,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC3D,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,GAC1B,YAAY,CAUd;yBAZe,UAAU"}

package/dist/components/popup/PopupParts.js

@@ -1,33 +1,42 @@
-import {
-  PopoverClose as ElementPopoverClose,
-  PopoverSurface as ElementPopoverSurface,
-  PopoverTrigger as ElementPopoverTrigger
-} from "../../elements/popover/index.js";
+import { createElement } from "react";
 function PopupTrigger(props) {
   const { as, target, ...consumerProps } = props;
-  return ElementPopoverTrigger({
+  return createElement(as ?? "button", {
     ...consumerProps,
-    ...as === void 0 ? {} : { as },
-    "data-uiify-popup-trigger": "",
-    target
+    "data-part": "trigger",
+    "data-uiify-popup": "",
+    popoverTarget: target,
+    popoverTargetAction: "toggle",
+    type: "button"
   });
 }
 PopupTrigger.displayName = "PopupTrigger";
 function PopupContent(props) {
-  return ElementPopoverSurface({
-    ...props,
-    "data-uiify-popover-content": "",
-    "data-uiify-popup-content": ""
-  });
+  const { align = "center", children, mode = "auto", side = "bottom", ...consumerProps } = props;
+  return createElement(
+    "div",
+    {
+      ...consumerProps,
+      "data-align": align,
+      "data-part": "content",
+      "data-positioning": "native",
+      "data-side": side,
+      "data-uiify-popup": "",
+      popover: mode
+    },
+    children
+  );
 }
 PopupContent.displayName = "PopupContent";
 function PopupClose(props) {
   const { as, target, ...consumerProps } = props;
-  return ElementPopoverClose({
+  return createElement(as ?? "button", {
     ...consumerProps,
-    ...as === void 0 ? {} : { as },
-    "data-uiify-popup-close": "",
-    target
+    "data-part": "close",
+    "data-uiify-popup": "",
+    popoverTarget: target,
+    popoverTargetAction: "hide",
+    type: "button"
   });
 }
 PopupClose.displayName = "PopupClose";