@gunkin/uiify 0.0.1-alpha → 0.0.2-alpha

package/dist/components/accordion/Accordion.d.ts

@@ -3,8 +3,8 @@ import type { AccordionProps } from "./types.js";
 /**
  * Built on `@gunkin/uiify/elements/details`: `Details.Root` already owns `data-disabled` (from its own
  * `disabled` prop) and `data-uiify-details`; `Details.Summary`'s `disabled` prop already owns
- * `aria-disabled`/`tabIndex`. This component adds its own `data-part`/`data-uiify-accordion-*`
- * markers and the `name`/`defaultOpen` wiring that makes single-select exclusive.
+ * `aria-disabled`/`tabIndex`. This component adds its own identity/anatomy markers and the
+ * `name`/`defaultOpen` wiring that makes single-select exclusive.
  */
 export declare function Accordion({ id, items, type, defaultValue, className, }: AccordionProps): ReactElement;
 export declare namespace Accordion {

package/dist/components/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,YAAY,CAAC;AAWhE;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,IAAe,EACf,YAAY,EACZ,SAAS,GACV,EAAE,cAAc,GAAG,YAAY,CAoB/B;yBA1Be,SAAS"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,YAAY,CAAC;AAWhE;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,IAAe,EACf,YAAY,EACZ,SAAS,GACV,EAAE,cAAc,GAAG,YAAY,CAmB/B;yBAzBe,SAAS"}

package/dist/components/accordion/Accordion.js

@@ -11,11 +11,10 @@ function Accordion({
   defaultValue,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className, "data-uiify-accordion": "", "data-uiify-choice-kind": type, children: items.map((item) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className, "data-kind": type, "data-uiify-accordion": "", children: items.map((item) => /* @__PURE__ */ jsxs(
     DetailsRoot,
     {
       "data-part": "item",
-      "data-uiify-accordion-item": "",
       defaultOpen: isDefaultOpen(type, defaultValue, item.value),
       disabled: item.disabled ?? false,
       ...type === "single" ? { name: id } : {},

package/dist/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { DetailsContent, DetailsRoot, DetailsSummary } from \"../../elements/details/index.js\";\nimport type { AccordionProps, AccordionType } from \"./types.js\";\n\nfunction isDefaultOpen(\n  type: AccordionType,\n  defaultValue: string | readonly string[] | undefined,\n  itemValue: string,\n): boolean {\n  if (type === \"single\") return defaultValue === itemValue;\n  return Array.isArray(defaultValue) && defaultValue.includes(itemValue);\n}\n\n/**\n * Built on `@gunkin/uiify/elements/details`: `Details.Root` already owns `data-disabled` (from its own\n * `disabled` prop) and `data-uiify-details`; `Details.Summary`'s `disabled` prop already owns\n * `aria-disabled`/`tabIndex`. This component adds its own `data-part`/`data-uiify-accordion-*`\n * markers and the `name`/`defaultOpen` wiring that makes single-select exclusive.\n */\nexport function Accordion({\n  id,\n  items,\n  type = \"single\",\n  defaultValue,\n  className,\n}: AccordionProps): ReactElement {\n  return (\n    <div className={className} data-uiify-accordion=\"\" data-uiify-choice-kind={type}>\n      {items.map((item) => (\n        <DetailsRoot\n          data-part=\"item\"\n          data-uiify-accordion-item=\"\"\n          defaultOpen={isDefaultOpen(type, defaultValue, item.value)}\n          disabled={item.disabled ?? false}\n          key={item.value}\n          {...(type === \"single\" ? { name: id } : {})}\n        >\n          <DetailsSummary disabled={item.disabled ?? false} part=\"trigger\">\n            {item.label}\n          </DetailsSummary>\n          <DetailsContent part=\"panel\">{item.panel}</DetailsContent>\n        </DetailsRoot>\n      ))}\n    </div>\n  );\n}\nAccordion.displayName = \"Accordion\";\n"],"mappings":"AA6BQ,SAQE,KARF;AA5BR,SAAS,gBAAgB,aAAa,sBAAsB;AAG5D,SAAS,cACP,MACA,cACA,WACS;AACT,MAAI,SAAS,SAAU,QAAO,iBAAiB;AAC/C,SAAO,MAAM,QAAQ,YAAY,KAAK,aAAa,SAAS,SAAS;AACvE;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAiC;AAC/B,SACE,oBAAC,SAAI,WAAsB,wBAAqB,IAAG,0BAAwB,MACxE,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,6BAA0B;AAAA,MAC1B,aAAa,cAAc,MAAM,cAAc,KAAK,KAAK;AAAA,MACzD,UAAU,KAAK,YAAY;AAAA,MAE1B,GAAI,SAAS,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;AAAA,MAEzC;AAAA,4BAAC,kBAAe,UAAU,KAAK,YAAY,OAAO,MAAK,WACpD,eAAK,OACR;AAAA,QACA,oBAAC,kBAAe,MAAK,SAAS,eAAK,OAAM;AAAA;AAAA;AAAA,IANpC,KAAK;AAAA,EAOZ,CACD,GACH;AAEJ;AACA,UAAU,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { DetailsContent, DetailsRoot, DetailsSummary } from \"../../elements/details/index.js\";\nimport type { AccordionProps, AccordionType } from \"./types.js\";\n\nfunction isDefaultOpen(\n  type: AccordionType,\n  defaultValue: string | readonly string[] | undefined,\n  itemValue: string,\n): boolean {\n  if (type === \"single\") return defaultValue === itemValue;\n  return Array.isArray(defaultValue) && defaultValue.includes(itemValue);\n}\n\n/**\n * Built on `@gunkin/uiify/elements/details`: `Details.Root` already owns `data-disabled` (from its own\n * `disabled` prop) and `data-uiify-details`; `Details.Summary`'s `disabled` prop already owns\n * `aria-disabled`/`tabIndex`. This component adds its own identity/anatomy markers and the\n * `name`/`defaultOpen` wiring that makes single-select exclusive.\n */\nexport function Accordion({\n  id,\n  items,\n  type = \"single\",\n  defaultValue,\n  className,\n}: AccordionProps): ReactElement {\n  return (\n    <div className={className} data-kind={type} data-uiify-accordion=\"\">\n      {items.map((item) => (\n        <DetailsRoot\n          data-part=\"item\"\n          defaultOpen={isDefaultOpen(type, defaultValue, item.value)}\n          disabled={item.disabled ?? false}\n          key={item.value}\n          {...(type === \"single\" ? { name: id } : {})}\n        >\n          <DetailsSummary disabled={item.disabled ?? false} part=\"trigger\">\n            {item.label}\n          </DetailsSummary>\n          <DetailsContent part=\"panel\">{item.panel}</DetailsContent>\n        </DetailsRoot>\n      ))}\n    </div>\n  );\n}\nAccordion.displayName = \"Accordion\";\n"],"mappings":"AA6BQ,SAOE,KAPF;AA5BR,SAAS,gBAAgB,aAAa,sBAAsB;AAG5D,SAAS,cACP,MACA,cACA,WACS;AACT,MAAI,SAAS,SAAU,QAAO,iBAAiB;AAC/C,SAAO,MAAM,QAAQ,YAAY,KAAK,aAAa,SAAS,SAAS;AACvE;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAiC;AAC/B,SACE,oBAAC,SAAI,WAAsB,aAAW,MAAM,wBAAqB,IAC9D,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAa,cAAc,MAAM,cAAc,KAAK,KAAK;AAAA,MACzD,UAAU,KAAK,YAAY;AAAA,MAE1B,GAAI,SAAS,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;AAAA,MAEzC;AAAA,4BAAC,kBAAe,UAAU,KAAK,YAAY,OAAO,MAAK,WACpD,eAAK,OACR;AAAA,QACA,oBAAC,kBAAe,MAAK,SAAS,eAAK,OAAM;AAAA;AAAA;AAAA,IANpC,KAAK;AAAA,EAOZ,CACD,GACH;AAEJ;AACA,UAAU,cAAc;","names":[]}

package/dist/components/alert-modal/AlertModal.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import type { AlertModalProps } from "./types.js";
 /** Convenience shell over the native parts: one trigger, one modal alertdialog, cancel and action. */
-export declare function AlertModal({ id, trigger, title, description, children, actionLabel, cancelLabel, triggerClassName, className, actionClassName, cancelClassName, }: AlertModalProps): ReactElement;
+export declare function AlertModal({ id, trigger, title, description, children, actionLabel, cancelLabel, className, }: AlertModalProps): ReactElement;
 export declare namespace AlertModal {
     var displayName: string;
 }

package/dist/components/alert-modal/AlertModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertModal.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/AlertModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,sGAAsG;AACtG,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAuB,EACvB,WAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,eAAe,GAChB,EAAE,eAAe,GAAG,YAAY,CA2BhC;yBAvCe,UAAU"}
+{"version":3,"file":"AlertModal.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/AlertModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,sGAAsG;AACtG,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAuB,EACvB,WAAsB,EACtB,SAAS,GACV,EAAE,eAAe,GAAG,YAAY,CAyBhC;yBAlCe,UAAU"}

package/dist/components/alert-modal/AlertModal.js

@@ -13,15 +13,12 @@ function AlertModal({
   children,
   actionLabel = "Confirm",
   cancelLabel = "Cancel",
-  triggerClassName,
-  className,
-  actionClassName,
-  cancelClassName
+  className
 }) {
   const titleId = `${id}-title`;
   const descriptionId = `${id}-description`;
-  return /* @__PURE__ */ jsxs("div", { "data-uiify-alert-dialog-scope": "", "data-uiify-alert-modal-scope": "", children: [
-    /* @__PURE__ */ jsx(AlertModalTrigger, { className: triggerClassName, target: id, children: trigger }),
+  return /* @__PURE__ */ jsxs("div", { "data-part": "root", "data-uiify-alert-modal": "", children: [
+    /* @__PURE__ */ jsx(AlertModalTrigger, { target: id, children: trigger }),
     /* @__PURE__ */ jsxs(
       AlertModalContent,
       {
@@ -33,8 +30,8 @@ function AlertModal({
           /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
           description === void 0 ? null : /* @__PURE__ */ jsx("p", { id: descriptionId, children: description }),
           children,
-          /* @__PURE__ */ jsx(AlertModalCancel, { className: cancelClassName, target: id, value: "cancel", children: cancelLabel }),
-          /* @__PURE__ */ jsx(AlertModalAction, { className: actionClassName, target: id, value: "confirm", children: actionLabel })
+          /* @__PURE__ */ jsx(AlertModalCancel, { target: id, value: "cancel", children: cancelLabel }),
+          /* @__PURE__ */ jsx(AlertModalAction, { target: id, value: "confirm", children: actionLabel })
         ]
       }
     )

package/dist/components/alert-modal/AlertModal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/alert-modal/AlertModal.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport {\n  AlertModalAction,\n  AlertModalCancel,\n  AlertModalContent,\n  AlertModalTrigger,\n} from \"./AlertModalParts.js\";\nimport type { AlertModalProps } from \"./types.js\";\n\n/** Convenience shell over the native parts: one trigger, one modal alertdialog, cancel and action. */\nexport function AlertModal({\n  id,\n  trigger,\n  title,\n  description,\n  children,\n  actionLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  triggerClassName,\n  className,\n  actionClassName,\n  cancelClassName,\n}: AlertModalProps): ReactElement {\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n\n  return (\n    <div data-uiify-alert-dialog-scope=\"\" data-uiify-alert-modal-scope=\"\">\n      <AlertModalTrigger className={triggerClassName} target={id}>\n        {trigger}\n      </AlertModalTrigger>\n      <AlertModalContent\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        <AlertModalCancel className={cancelClassName} target={id} value=\"cancel\">\n          {cancelLabel}\n        </AlertModalCancel>\n        <AlertModalAction className={actionClassName} target={id} value=\"confirm\">\n          {actionLabel}\n        </AlertModalAction>\n      </AlertModalContent>\n    </div>\n  );\n}\nAlertModal.displayName = \"AlertModal\";\n"],"mappings":"AA4BM,cAGA,YAHA;AA3BN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkC;AAChC,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAE3B,SACE,qBAAC,SAAI,iCAA8B,IAAG,gCAA6B,IACjE;AAAA,wBAAC,qBAAkB,WAAW,kBAAkB,QAAQ,IACrD,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,oBAAiB,WAAW,iBAAiB,QAAQ,IAAI,OAAM,UAC7D,uBACH;AAAA,UACA,oBAAC,oBAAiB,WAAW,iBAAiB,QAAQ,IAAI,OAAM,WAC7D,uBACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AACA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/alert-modal/AlertModal.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport {\n  AlertModalAction,\n  AlertModalCancel,\n  AlertModalContent,\n  AlertModalTrigger,\n} from \"./AlertModalParts.js\";\nimport type { AlertModalProps } from \"./types.js\";\n\n/** Convenience shell over the native parts: one trigger, one modal alertdialog, cancel and action. */\nexport function AlertModal({\n  id,\n  trigger,\n  title,\n  description,\n  children,\n  actionLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  className,\n}: AlertModalProps): ReactElement {\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n\n  return (\n    <div data-part=\"root\" data-uiify-alert-modal=\"\">\n      <AlertModalTrigger target={id}>{trigger}</AlertModalTrigger>\n      <AlertModalContent\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        <AlertModalCancel target={id} value=\"cancel\">\n          {cancelLabel}\n        </AlertModalCancel>\n        <AlertModalAction target={id} value=\"confirm\">\n          {actionLabel}\n        </AlertModalAction>\n      </AlertModalContent>\n    </div>\n  );\n}\nAlertModal.displayName = \"AlertModal\";\n"],"mappings":"AAyBM,cACA,YADA;AAxBN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AACF,GAAkC;AAChC,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAE3B,SACE,qBAAC,SAAI,aAAU,QAAO,0BAAuB,IAC3C;AAAA,wBAAC,qBAAkB,QAAQ,IAAK,mBAAQ;AAAA,IACxC;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,oBAAiB,QAAQ,IAAI,OAAM,UACjC,uBACH;AAAA,UACA,oBAAC,oBAAiB,QAAQ,IAAI,OAAM,WACjC,uBACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AACA,WAAW,cAAc;","names":[]}

package/dist/components/alert-modal/AlertModalParts.d.ts

@@ -1,46 +1,21 @@
 import type { ElementType, ReactElement } from "react";
 import type { AlertModalActionProps, AlertModalCancelProps, AlertModalContentProps, AlertModalTriggerProps } from "./types.js";
-/**
- * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Trigger`, which already emits
- * `data-uiify-dialog-trigger` — additive, since this component's own markers are a
- * different string. Also emits `data-uiify-alert-modal-trigger` and the deprecated
- * `data-uiify-alert-dialog-trigger` during the compatibility window.
- *
- * Calls the element directly as a function rather than rendering `<ElementDialogTrigger>` —
- * see ModalParts.tsx's `ModalTrigger` for why (Tier 0, no hooks, skips a `jsx()` call).
- */
+/** Native alert modal invoker with alert-modal identity and trigger anatomy. */
 export declare function AlertModalTrigger<TAs extends ElementType = "button">(props: AlertModalTriggerProps<TAs>): ReactElement;
 export declare namespace AlertModalTrigger {
     var displayName: string;
 }
-/**
- * A modal `<dialog role="alertdialog">`; Escape and the parts close it, the backdrop does not.
- *
- * Mirrors `@gunkin/uiify/elements/dialog`'s `Dialog.Content` markup and marker
- * (`data-uiify-dialog-content`) plus `role="alertdialog"` and this component's own
- * `data-uiify-alert-modal-content` / deprecated `data-uiify-alert-dialog-content`. Written
- * inline rather than rendered through the element for the same reason as `ModalContent`:
- * `Dialog.Content`'s type requires an accessible name and `AlertModalContentProps`
- * deliberately does not tighten to match (see ModalParts.tsx).
- */
+/** Native alert dialog content with alert-modal identity and content anatomy. */
 export declare function AlertModalContent(props: AlertModalContentProps): ReactElement;
 export declare namespace AlertModalContent {
     var displayName: string;
 }
-/**
- * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits
- * `data-uiify-alert-modal-action` and the deprecated `data-uiify-alert-dialog-action`
- * for one major.
- */
+/** Native alert modal action invoker. */
 export declare function AlertModalAction<TAs extends ElementType = "button">(props: AlertModalActionProps<TAs>): ReactElement;
 export declare namespace AlertModalAction {
     var displayName: string;
 }
-/**
- * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits
- * `data-uiify-alert-modal-cancel` and the deprecated `data-uiify-alert-dialog-cancel`
- * for one major.
- */
+/** Native alert modal cancel invoker. */
 export declare function AlertModalCancel<TAs extends ElementType = "button">(props: AlertModalCancelProps<TAs>): ReactElement;
 export declare namespace AlertModalCancel {
     var displayName: string;

package/dist/components/alert-modal/AlertModalParts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertModalParts.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/AlertModalParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMvD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAEpB;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAClE,KAAK,EAAE,sBAAsB,CAAC,GAAG,CAAC,GACjC,YAAY,CASd;yBAXe,iBAAiB;;;AAcjC;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAa7E;yBAbe,iBAAiB;;;AAgBjC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EACjE,KAAK,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAChC,YAAY,CASd;yBAXe,gBAAgB;;;AAchC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EACjE,KAAK,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAChC,YAAY,CASd;yBAXe,gBAAgB"}
+{"version":3,"file":"AlertModalParts.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/AlertModalParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAEpB,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAClE,KAAK,EAAE,sBAAsB,CAAC,GAAG,CAAC,GACjC,YAAY,CAWd;yBAbe,iBAAiB;;;AAgBjC,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAO7E;yBAPe,iBAAiB;;;AAUjC,yCAAyC;AACzC,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EACjE,KAAK,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAChC,YAAY,CAWd;yBAbe,gBAAgB;;;AAgBhC,yCAAyC;AACzC,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EACjE,KAAK,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAChC,YAAY,CAWd;yBAbe,gBAAgB"}

package/dist/components/alert-modal/AlertModalParts.js

@@ -1,54 +1,47 @@
 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 AlertModalTrigger(props) {
   const { as, target, ...consumerProps } = props;
-  return ElementDialogTrigger({
-    ...consumerProps,
-    ...as === void 0 ? {} : { as },
-    "data-uiify-alert-dialog-trigger": "",
-    "data-uiify-alert-modal-trigger": "",
-    target
-  });
+  return renderNativeInvoker(
+    as,
+    "data-uiify-alert-modal",
+    "trigger",
+    "show-modal",
+    target,
+    consumerProps,
+    { button: true }
+  );
 }
 AlertModalTrigger.displayName = "AlertModalTrigger";
 function AlertModalContent(props) {
   const { children, ...dialogProps } = props;
-  return /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ...dialogProps,
-      "data-uiify-alert-dialog-content": "",
-      "data-uiify-alert-modal-content": "",
-      "data-uiify-dialog-content": "",
-      role: "alertdialog",
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("dialog", { ...dialogProps, "data-part": "content", "data-uiify-alert-modal": "", role: "alertdialog", children });
 }
 AlertModalContent.displayName = "AlertModalContent";
 function AlertModalAction(props) {
   const { as, target, ...consumerProps } = props;
-  return ElementDialogClose({
-    ...consumerProps,
-    ...as === void 0 ? {} : { as },
-    "data-uiify-alert-dialog-action": "",
-    "data-uiify-alert-modal-action": "",
-    target
-  });
+  return renderNativeInvoker(
+    as,
+    "data-uiify-alert-modal",
+    "action",
+    "request-close",
+    target,
+    consumerProps,
+    { button: true, variant: "danger" }
+  );
 }
 AlertModalAction.displayName = "AlertModalAction";
 function AlertModalCancel(props) {
   const { as, target, ...consumerProps } = props;
-  return ElementDialogClose({
-    ...consumerProps,
-    ...as === void 0 ? {} : { as },
-    "data-uiify-alert-dialog-cancel": "",
-    "data-uiify-alert-modal-cancel": "",
-    target
-  });
+  return renderNativeInvoker(
+    as,
+    "data-uiify-alert-modal",
+    "cancel",
+    "request-close",
+    target,
+    consumerProps,
+    { button: true, variant: "ghost" }
+  );
 }
 AlertModalCancel.displayName = "AlertModalCancel";
 export {

package/dist/components/alert-modal/AlertModalParts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/alert-modal/AlertModalParts.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 {\n  AlertModalActionProps,\n  AlertModalCancelProps,\n  AlertModalContentProps,\n  AlertModalTriggerProps,\n} from \"./types.js\";\n\n/**\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Trigger`, which already emits\n * `data-uiify-dialog-trigger` — additive, since this component's own markers are a\n * different string. Also emits `data-uiify-alert-modal-trigger` and the deprecated\n * `data-uiify-alert-dialog-trigger` during the compatibility window.\n *\n * Calls the element directly as a function rather than rendering `<ElementDialogTrigger>` —\n * see ModalParts.tsx's `ModalTrigger` for why (Tier 0, no hooks, skips a `jsx()` call).\n */\nexport function AlertModalTrigger<TAs extends ElementType = \"button\">(\n  props: AlertModalTriggerProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalTriggerProps<\"button\">;\n  return ElementDialogTrigger({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-alert-dialog-trigger\": \"\",\n    \"data-uiify-alert-modal-trigger\": \"\",\n    target,\n  } as unknown as DialogTriggerProps<TAs>);\n}\nAlertModalTrigger.displayName = \"AlertModalTrigger\";\n\n/**\n * A modal `<dialog role=\"alertdialog\">`; Escape and the parts close it, the backdrop does not.\n *\n * Mirrors `@gunkin/uiify/elements/dialog`'s `Dialog.Content` markup and marker\n * (`data-uiify-dialog-content`) plus `role=\"alertdialog\"` and this component's own\n * `data-uiify-alert-modal-content` / deprecated `data-uiify-alert-dialog-content`. Written\n * inline rather than rendered through the element for the same reason as `ModalContent`:\n * `Dialog.Content`'s type requires an accessible name and `AlertModalContentProps`\n * deliberately does not tighten to match (see ModalParts.tsx).\n */\nexport function AlertModalContent(props: AlertModalContentProps): ReactElement {\n  const { children, ...dialogProps } = props;\n  return (\n    <dialog\n      {...dialogProps}\n      data-uiify-alert-dialog-content=\"\"\n      data-uiify-alert-modal-content=\"\"\n      data-uiify-dialog-content=\"\"\n      role=\"alertdialog\"\n    >\n      {children}\n    </dialog>\n  );\n}\nAlertModalContent.displayName = \"AlertModalContent\";\n\n/**\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits\n * `data-uiify-alert-modal-action` and the deprecated `data-uiify-alert-dialog-action`\n * for one major.\n */\nexport function AlertModalAction<TAs extends ElementType = \"button\">(\n  props: AlertModalActionProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalActionProps<\"button\">;\n  return ElementDialogClose({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-alert-dialog-action\": \"\",\n    \"data-uiify-alert-modal-action\": \"\",\n    target,\n  } as unknown as DialogCloseProps<TAs>);\n}\nAlertModalAction.displayName = \"AlertModalAction\";\n\n/**\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits\n * `data-uiify-alert-modal-cancel` and the deprecated `data-uiify-alert-dialog-cancel`\n * for one major.\n */\nexport function AlertModalCancel<TAs extends ElementType = \"button\">(\n  props: AlertModalCancelProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalCancelProps<\"button\">;\n  return ElementDialogClose({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-alert-dialog-cancel\": \"\",\n    \"data-uiify-alert-modal-cancel\": \"\",\n    target,\n  } as unknown as DialogCloseProps<TAs>);\n}\nAlertModalCancel.displayName = \"AlertModalCancel\";\n"],"mappings":"AAiDI;AAhDJ;AAAA,EACE,eAAe;AAAA,EACf,iBAAiB;AAAA,OACZ;AAkBA,SAAS,kBACd,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,mCAAmC;AAAA,IACnC,kCAAkC;AAAA,IAClC;AAAA,EACF,CAAuC;AACzC;AACA,kBAAkB,cAAc;AAYzB,SAAS,kBAAkB,OAA6C;AAC7E,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mCAAgC;AAAA,MAChC,kCAA+B;AAAA,MAC/B,6BAA0B;AAAA,MAC1B,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AACA,kBAAkB,cAAc;AAOzB,SAAS,iBACd,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,kCAAkC;AAAA,IAClC,iCAAiC;AAAA,IACjC;AAAA,EACF,CAAqC;AACvC;AACA,iBAAiB,cAAc;AAOxB,SAAS,iBACd,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,kCAAkC;AAAA,IAClC,iCAAiC;AAAA,IACjC;AAAA,EACF,CAAqC;AACvC;AACA,iBAAiB,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/alert-modal/AlertModalParts.tsx"],"sourcesContent":["import type { ElementType, ReactElement } from \"react\";\nimport { renderNativeInvoker } from \"@gunkin/uiify/core/render\";\nimport type {\n  AlertModalActionProps,\n  AlertModalCancelProps,\n  AlertModalContentProps,\n  AlertModalTriggerProps,\n} from \"./types.js\";\n\n/** Native alert modal invoker with alert-modal identity and trigger anatomy. */\nexport function AlertModalTrigger<TAs extends ElementType = \"button\">(\n  props: AlertModalTriggerProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalTriggerProps<\"button\">;\n  return renderNativeInvoker(\n    as,\n    \"data-uiify-alert-modal\",\n    \"trigger\",\n    \"show-modal\",\n    target,\n    consumerProps as Record<string, unknown>,\n    { button: true },\n  );\n}\nAlertModalTrigger.displayName = \"AlertModalTrigger\";\n\n/** Native alert dialog content with alert-modal identity and content anatomy. */\nexport function AlertModalContent(props: AlertModalContentProps): ReactElement {\n  const { children, ...dialogProps } = props;\n  return (\n    <dialog {...dialogProps} data-part=\"content\" data-uiify-alert-modal=\"\" role=\"alertdialog\">\n      {children}\n    </dialog>\n  );\n}\nAlertModalContent.displayName = \"AlertModalContent\";\n\n/** Native alert modal action invoker. */\nexport function AlertModalAction<TAs extends ElementType = \"button\">(\n  props: AlertModalActionProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalActionProps<\"button\">;\n  return renderNativeInvoker(\n    as,\n    \"data-uiify-alert-modal\",\n    \"action\",\n    \"request-close\",\n    target,\n    consumerProps as Record<string, unknown>,\n    { button: true, variant: \"danger\" },\n  );\n}\nAlertModalAction.displayName = \"AlertModalAction\";\n\n/** Native alert modal cancel invoker. */\nexport function AlertModalCancel<TAs extends ElementType = \"button\">(\n  props: AlertModalCancelProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalCancelProps<\"button\">;\n  return renderNativeInvoker(\n    as,\n    \"data-uiify-alert-modal\",\n    \"cancel\",\n    \"request-close\",\n    target,\n    consumerProps as Record<string, unknown>,\n    { button: true, variant: \"ghost\" },\n  );\n}\nAlertModalCancel.displayName = \"AlertModalCancel\";\n"],"mappings":"AA8BI;AA7BJ,SAAS,2BAA2B;AAS7B,SAAS,kBACd,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,kBAAkB,cAAc;AAGzB,SAAS,kBAAkB,OAA6C;AAC7E,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,SACE,oBAAC,YAAQ,GAAG,aAAa,aAAU,WAAU,0BAAuB,IAAG,MAAK,eACzE,UACH;AAEJ;AACA,kBAAkB,cAAc;AAGzB,SAAS,iBACd,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,SAAS;AAAA,EACpC;AACF;AACA,iBAAiB,cAAc;AAGxB,SAAS,iBACd,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,iBAAiB,cAAc;","names":[]}

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

@@ -8,10 +8,7 @@ export interface AlertModalProps {
     readonly children?: ReactNode;
     readonly actionLabel?: ReactNode;
     readonly cancelLabel?: ReactNode;
-    readonly triggerClassName?: string;
     readonly className?: string;
-    readonly actionClassName?: string;
-    readonly cancelClassName?: string;
 }
 export interface AlertModalTriggerOwnProps {
     readonly children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/alert-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,eAAe;IAC9B,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,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,yDAAyD;IACzD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,sBAAsB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACxF,GAAG,EACH,yBAAyB,CAC1B,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,qBAAqB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACvF,GAAG,EACH,wBAAwB,CACzB,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,qBAAqB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACvF,GAAG,EACH,wBAAwB,CACzB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB;AAED,sFAAsF;AACtF,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAC5D,IAAI,CACF,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,MAAM,yBAAyB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAC9D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/alert-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,eAAe;IAC9B,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,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,yDAAyD;IACzD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,sBAAsB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACxF,GAAG,EACH,yBAAyB,CAC1B,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,qBAAqB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACvF,GAAG,EACH,wBAAwB,CACzB,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,qBAAqB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACvF,GAAG,EACH,wBAAwB,CACzB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB;AAED,sFAAsF;AACtF,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAC5D,IAAI,CACF,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,MAAM,yBAAyB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAC9D,CAAC"}

package/dist/components/behavior.css

@@ -6,41 +6,84 @@
   dialog:modal {
     overscroll-behavior: contain;
   }
-  [data-uiify-modal-scope]:has(> dialog[open]) > [data-uiify-modal-trigger],
-  [data-uiify-alert-modal-scope]:has(> dialog[open]) > [data-uiify-alert-modal-trigger],
-  [data-uiify-popup-scope]:has(> :popover-open) > [data-uiify-popup-trigger],
-  [data-uiify-popover-scope]:has(> :popover-open) > [data-uiify-popover-trigger] {
+  dialog:not([open]) {
+    display: none;
+  }
+  [data-anchor]:not([data-positioning]) {
+    anchor-name: var(--uiify-anchor, attr(data-anchor type(<custom-ident>)));
+  }
+  [data-positioning=native] {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+  [data-positioning=native][data-anchor] {
+    position-anchor: var(--uiify-anchor, attr(data-anchor type(<custom-ident>)));
+  }
+  [data-positioning=native][data-side=top] {
+    position-area: top;
+    margin-block-end: var(--uiify-anchor-offset, 0);
+  }
+  [data-positioning=native][data-side=right] {
+    position-area: right;
+    margin-inline-start: var(--uiify-anchor-offset, 0);
+  }
+  [data-positioning=native][data-side=bottom] {
+    position-area: bottom;
+    margin-block-start: var(--uiify-anchor-offset, 0);
+  }
+  [data-positioning=native][data-side=left] {
+    position-area: left;
+    margin-inline-end: var(--uiify-anchor-offset, 0);
+  }
+  [data-positioning=native][data-side=top][data-align=start] {
+    position-area: top span-right;
+    justify-self: start;
+  }
+  [data-positioning=native][data-side=top][data-align=end] {
+    position-area: top span-left;
+    justify-self: end;
+  }
+  [data-positioning=native][data-side=bottom][data-align=start] {
+    position-area: bottom span-right;
+    justify-self: start;
+  }
+  [data-positioning=native][data-side=bottom][data-align=end] {
+    position-area: bottom span-left;
+    justify-self: end;
+  }
+  [data-positioning=native][data-side=right][data-align=start] {
+    align-self: start;
+    position-area: right span-bottom;
+  }
+  [data-positioning=native][data-side=right][data-align=end] {
+    align-self: end;
+    position-area: right span-top;
+  }
+  [data-positioning=native][data-side=left][data-align=start] {
+    align-self: start;
+    position-area: left span-bottom;
+  }
+  [data-positioning=native][data-side=left][data-align=end] {
+    align-self: end;
+    position-area: left span-top;
+  }
+  [data-uiify-modal][data-part=root]:has(> [data-uiify-modal][data-part=content][open]) > [data-uiify-modal][data-part=trigger],
+  [data-uiify-alert-modal][data-part=root]:has(> [data-uiify-alert-modal][data-part=content][open]) > [data-uiify-alert-modal][data-part=trigger],
+  [data-uiify-popup][data-part=root]:has(> [data-uiify-popup][data-part=content]:popover-open) > [data-uiify-popup][data-part=trigger] {
     --uiify-trigger-open: 1;
   }
-  [data-uiify-accordion-item][data-disabled] > summary,
+  [data-uiify-accordion] > [data-part=item][data-disabled] > summary,
   [data-uiify-collapsible][data-disabled] > summary {
     cursor: not-allowed;
     pointer-events: none;
   }
-  .uiify-select,
-  .uiify-select::picker(select) {
+  [data-uiify-select],
+  [data-uiify-select]::picker(select) {
     appearance: base-select;
   }
-  @media (prefers-reduced-motion: no-preference) {
-    @starting-style {
-      [popover]:popover-open {
-        opacity: 0;
-        scale: 0.96;
-      }
-    }
-    [popover] {
-      transition:
-        opacity var(--duration-fast, 150ms) ease-out,
-        scale var(--duration-fast, 150ms) ease-out,
-        display var(--duration-fast, 150ms) allow-discrete,
-        overlay var(--duration-fast, 150ms) allow-discrete;
-    }
-    [popover]:popover-open {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-  [data-uiify-tabs-input] {
+  [data-uiify-tabs] > [data-part=item] > [data-part=control] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -52,19 +95,19 @@
     white-space: nowrap;
     border: 0;
   }
-  [data-uiify-tabs-panel] {
+  [data-uiify-tabs] > [data-part=item] > [data-part=panel] {
     display: none;
   }
-  [data-uiify-tabs-input]:checked ~ [data-uiify-tabs-panel] {
+  [data-uiify-tabs] > [data-part=item] > [data-part=control]:checked ~ [data-part=panel] {
     display: block;
   }
-  [data-uiify-stepper-panel] {
+  [data-uiify-stepper] > [data-part=step] > [data-part=panel] {
     display: none;
   }
-  [data-uiify-stepper-input]:checked ~ [data-uiify-stepper-panel] {
+  [data-uiify-stepper] > [data-part=step] > [data-part=control]:checked ~ [data-part=panel] {
     display: block;
   }
-  [data-uiify-tabs-trigger][data-disabled] {
+  [data-uiify-tabs] [data-part=trigger][data-disabled] {
     cursor: not-allowed;
     pointer-events: none;
   }
@@ -80,52 +123,52 @@
       visibility: visible;
     }
   }
-  [data-uiify-breadcrumb-ellipsis] > ol {
+  [data-uiify-breadcrumb] [data-part=ellipsis] > ol {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  [data-uiify-carousel] > [data-uiify-carousel-viewport] {
+  [data-uiify-carousel] > [data-part=viewport] {
     display: grid;
     min-inline-size: 0;
     min-block-size: 0;
     gap: var(--uiify-carousel-gap, 0);
     scroll-behavior: auto;
   }
-  [data-uiify-carousel][data-axis=inline] > [data-uiify-carousel-viewport] {
+  [data-uiify-carousel][data-axis=inline] > [data-part=viewport] {
     grid-auto-flow: column;
     grid-auto-columns: var(--uiify-carousel-slide-size, 100%);
     overflow-inline: auto;
     overflow-block: hidden;
     scroll-snap-type: inline mandatory;
   }
-  [data-uiify-carousel][data-axis=block] > [data-uiify-carousel-viewport] {
+  [data-uiify-carousel][data-axis=block] > [data-part=viewport] {
     grid-auto-flow: row;
     grid-auto-rows: var(--uiify-carousel-slide-size, 100%);
     overflow-block: auto;
     overflow-inline: hidden;
     scroll-snap-type: block mandatory;
   }
-  [data-uiify-carousel] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide] {
+  [data-uiify-carousel] > [data-part=viewport] > [data-part=slide] {
     min-inline-size: 0;
     min-block-size: 0;
     scroll-snap-align: start;
   }
-  [data-uiify-carousel] > [data-uiify-carousel-viewport]:focus-visible,
-  [data-uiify-carousel] > button[data-uiify-carousel-controls]:focus-visible,
-  [data-uiify-carousel] > [data-uiify-carousel-dots] > a:focus-visible {
+  [data-uiify-carousel] > [data-part=viewport]:focus-visible,
+  [data-uiify-carousel] > button[data-part=controls]:focus-visible,
+  [data-uiify-carousel] > [data-part=dots] > a:focus-visible {
     outline: auto;
   }
   @media (prefers-reduced-motion: no-preference) {
-    [data-uiify-carousel] > [data-uiify-carousel-viewport] {
+    [data-uiify-carousel] > [data-part=viewport] {
       scroll-behavior: smooth;
     }
   }
-  [data-uiify-carousel] > [data-uiify-carousel-viewport][data-dragging] {
+  [data-uiify-carousel] > [data-part=viewport][data-dragging] {
     scroll-behavior: auto;
     scroll-snap-type: none;
   }
-  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] {
+  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-part=viewport] {
     grid-auto-flow: row;
     grid-template-columns: 100%;
     grid-auto-columns: auto;
@@ -133,17 +176,17 @@
     scroll-snap-type: none;
     touch-action: pan-y pinch-zoom;
   }
-  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide] {
+  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-part=viewport] > [data-part=slide] {
     grid-area: 1 / 1;
     opacity: 0;
     pointer-events: none;
   }
-  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide][data-state=active] {
+  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-part=viewport] > [data-part=slide][data-state=active] {
     opacity: 1;
     pointer-events: auto;
   }
   @media (prefers-reduced-motion: no-preference) {
-    [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide] {
+    [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-part=viewport] > [data-part=slide] {
       transition: opacity var(--uiify-carousel-fade-duration, 300ms) ease;
     }
   }
@@ -151,11 +194,11 @@
     --uiify-virtual-scroll-row-height: 64px;
     overflow-y: auto;
   }
-  [data-uiify-virtual-scroll] [data-uiify-virtual-scroll-spacer] {
+  [data-uiify-virtual-scroll] > [data-part=spacer] {
     position: relative;
     block-size: var( --uiify-virtual-scroll-total-size, calc(var(--uiify-virtual-scroll-count, 0) * var(--uiify-virtual-scroll-row-height)) );
   }
-  [data-uiify-virtual-scroll] [data-uiify-virtual-scroll-row] {
+  [data-uiify-virtual-scroll] [data-part=row] {
     position: absolute;
     inset-inline: 0;
     block-size: var(--uiify-row-height, var(--uiify-virtual-scroll-row-height));

package/dist/components/behavior.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/behavior.css"],"sourcesContent":["/* Behavioral rules for @gunkin/uiify/components — zero visual opinion.\n * Import is required: @import \"@gunkin/uiify/components/behavior.css\";\n * Cascade order: consumer app layer wins without specificity fights. */\n@layer ui.reset, ui.behavior, ui.tokens, ui.theme, app;\n\n@layer ui.behavior {\n  [popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* Native modal dialogs: wheel/touch scrolling inside the dialog must not chain to the page behind it. */\n  dialog:modal {\n    overscroll-behavior: contain;\n  }\n\n  /*\n   * Local open-state hooks. Top layer does not change DOM ancestry, so a scope\n   * that directly contains its surface can read the native state. Consumers\n   * style with the selector or with the variable; neither is a second source of truth.\n   *\n   * `modal`/`alert-modal` (formerly `dialog`/`alert-dialog`) emit both their\n   * new scope attribute and the deprecated one for one major, so selecting on\n   * the new name alone is enough. `popup`'s scope div is consumer-authored\n   * (there is no Root wrapper for the native parts — see\n   * docs/guides/native-composition.md), so existing markup keeps writing the\n   * deprecated `data-uiify-popover-scope`; both selectors stay until that\n   * compatibility window.\n   */\n  [data-uiify-modal-scope]:has(> dialog[open]) > [data-uiify-modal-trigger],\n  [data-uiify-alert-modal-scope]:has(> dialog[open]) > [data-uiify-alert-modal-trigger],\n  [data-uiify-popup-scope]:has(> :popover-open) > [data-uiify-popup-trigger],\n  [data-uiify-popover-scope]:has(> :popover-open) > [data-uiify-popover-trigger] {\n    --uiify-trigger-open: 1;\n  }\n\n  [data-uiify-accordion-item][data-disabled] > summary,\n  [data-uiify-collapsible][data-disabled] > summary {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Customizable select: opts the control and its picker into the browser's\n     base styles so the picker becomes a styleable, top-layer popover with\n     implicit anchor positioning. Behavior only — no visual opinion. Engines\n     without support ignore this and keep the classic OS picker, which stays\n     fully functional. */\n  .uiify-select,\n  .uiify-select::picker(select) {\n    appearance: base-select;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @starting-style {\n      [popover]:popover-open {\n        opacity: 0;\n        scale: 0.96;\n      }\n    }\n\n    [popover] {\n      transition:\n        opacity var(--duration-fast, 150ms) ease-out,\n        scale var(--duration-fast, 150ms) ease-out,\n        display var(--duration-fast, 150ms) allow-discrete,\n        overlay var(--duration-fast, 150ms) allow-discrete;\n    }\n\n    [popover]:popover-open {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-uiify-tabs-input] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    /* stylelint-disable-next-line property-no-deprecated -- kept for older browser support alongside clip-path */\n    clip: rect(0, 0, 0, 0);\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  [data-uiify-tabs-panel] {\n    display: none;\n  }\n\n  [data-uiify-tabs-input]:checked ~ [data-uiify-tabs-panel] {\n    display: block;\n  }\n\n  [data-uiify-stepper-panel] {\n    display: none;\n  }\n\n  [data-uiify-stepper-input]:checked ~ [data-uiify-stepper-panel] {\n    display: block;\n  }\n\n  [data-uiify-tabs-trigger][data-disabled] {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  [data-uiify-spinner][data-state=\"delayed\"] {\n    animation-name: uiify-spinner-show;\n    animation-duration: 0s;\n    animation-delay: attr(data-delay type(<time>), 0s);\n    animation-fill-mode: forwards;\n    visibility: hidden;\n  }\n\n  @keyframes uiify-spinner-show {\n    to {\n      visibility: visible;\n    }\n  }\n\n  [data-uiify-breadcrumb-ellipsis] > ol {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  [data-uiify-carousel] > [data-uiify-carousel-viewport] {\n    display: grid;\n    min-inline-size: 0;\n    min-block-size: 0;\n    gap: var(--uiify-carousel-gap, 0);\n    scroll-behavior: auto;\n  }\n\n  [data-uiify-carousel][data-axis=\"inline\"] > [data-uiify-carousel-viewport] {\n    grid-auto-flow: column;\n    grid-auto-columns: var(--uiify-carousel-slide-size, 100%);\n    overflow-inline: auto;\n    overflow-block: hidden;\n    scroll-snap-type: inline mandatory;\n  }\n\n  [data-uiify-carousel][data-axis=\"block\"] > [data-uiify-carousel-viewport] {\n    grid-auto-flow: row;\n    grid-auto-rows: var(--uiify-carousel-slide-size, 100%);\n    overflow-block: auto;\n    overflow-inline: hidden;\n    scroll-snap-type: block mandatory;\n  }\n\n  [data-uiify-carousel] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide] {\n    min-inline-size: 0;\n    min-block-size: 0;\n    scroll-snap-align: start;\n  }\n\n  [data-uiify-carousel] > [data-uiify-carousel-viewport]:focus-visible,\n  [data-uiify-carousel] > button[data-uiify-carousel-controls]:focus-visible,\n  [data-uiify-carousel] > [data-uiify-carousel-dots] > a:focus-visible {\n    outline: auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    [data-uiify-carousel] > [data-uiify-carousel-viewport] {\n      scroll-behavior: smooth;\n    }\n  }\n\n  [data-uiify-carousel] > [data-uiify-carousel-viewport][data-dragging] {\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  [data-uiify-carousel][data-mode=\"fade\"][data-enhanced] > [data-uiify-carousel-viewport] {\n    grid-auto-flow: row;\n    grid-template-columns: 100%;\n    grid-auto-columns: auto;\n    overflow: hidden;\n    scroll-snap-type: none;\n    touch-action: pan-y pinch-zoom;\n  }\n\n  [data-uiify-carousel][data-mode=\"fade\"][data-enhanced]\n    > [data-uiify-carousel-viewport]\n    > [data-uiify-carousel-slide] {\n    grid-area: 1 / 1;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  [data-uiify-carousel][data-mode=\"fade\"][data-enhanced]\n    > [data-uiify-carousel-viewport]\n    > [data-uiify-carousel-slide][data-state=\"active\"] {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    [data-uiify-carousel][data-mode=\"fade\"][data-enhanced]\n      > [data-uiify-carousel-viewport]\n      > [data-uiify-carousel-slide] {\n      transition: opacity var(--uiify-carousel-fade-duration, 300ms) ease;\n    }\n  }\n\n  [data-uiify-virtual-scroll] {\n    --uiify-virtual-scroll-row-height: 64px;\n\n    overflow-y: auto;\n  }\n\n  [data-uiify-virtual-scroll] [data-uiify-virtual-scroll-spacer] {\n    position: relative;\n    block-size: var(\n      --uiify-virtual-scroll-total-size,\n      calc(var(--uiify-virtual-scroll-count, 0) * var(--uiify-virtual-scroll-row-height))\n    );\n  }\n\n  [data-uiify-virtual-scroll] [data-uiify-virtual-scroll-row] {\n    position: absolute;\n    inset-inline: 0;\n    block-size: var(--uiify-row-height, var(--uiify-virtual-scroll-row-height));\n    translate: 0\n      var(\n        --uiify-row-offset,\n        calc(\n          (var(--uiify-range-start, 0) + var(--uiify-slot-index, 0)) *\n            var(--uiify-virtual-scroll-row-height)\n        )\n      );\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/behavior.css"],"sourcesContent":["/* Behavioral rules for @gunkin/uiify/components — zero visual opinion.\n * Import is required: @import \"@gunkin/uiify/components/behavior.css\";\n * Cascade order: consumer app layer wins without specificity fights. */\n@layer ui.reset, ui.behavior, ui.tokens, ui.theme, app;\n\n@layer ui.behavior {\n  [popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* Native modal dialogs: wheel/touch scrolling inside the dialog must not chain to the page behind it. */\n  dialog:modal {\n    overscroll-behavior: contain;\n  }\n\n  /* Closed dialogs stay hidden even when author CSS sets display. */\n  dialog:not([open]) {\n    display: none;\n  }\n\n  [data-anchor]:not([data-positioning]) {\n    anchor-name: var(--uiify-anchor, attr(data-anchor type(<custom-ident>)));\n  }\n\n  [data-positioning=\"native\"] {\n    position: fixed;\n    inset: auto;\n    margin: 0;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n\n  [data-positioning=\"native\"][data-anchor] {\n    position-anchor: var(--uiify-anchor, attr(data-anchor type(<custom-ident>)));\n  }\n\n  [data-positioning=\"native\"][data-side=\"top\"] {\n    position-area: top;\n    margin-block-end: var(--uiify-anchor-offset, 0);\n  }\n\n  [data-positioning=\"native\"][data-side=\"right\"] {\n    position-area: right;\n    margin-inline-start: var(--uiify-anchor-offset, 0);\n  }\n\n  [data-positioning=\"native\"][data-side=\"bottom\"] {\n    position-area: bottom;\n    margin-block-start: var(--uiify-anchor-offset, 0);\n  }\n\n  [data-positioning=\"native\"][data-side=\"left\"] {\n    position-area: left;\n    margin-inline-end: var(--uiify-anchor-offset, 0);\n  }\n\n  [data-positioning=\"native\"][data-side=\"top\"][data-align=\"start\"] {\n    position-area: top span-right;\n    justify-self: start;\n  }\n\n  [data-positioning=\"native\"][data-side=\"top\"][data-align=\"end\"] {\n    position-area: top span-left;\n    justify-self: end;\n  }\n\n  [data-positioning=\"native\"][data-side=\"bottom\"][data-align=\"start\"] {\n    position-area: bottom span-right;\n    justify-self: start;\n  }\n\n  [data-positioning=\"native\"][data-side=\"bottom\"][data-align=\"end\"] {\n    position-area: bottom span-left;\n    justify-self: end;\n  }\n\n  [data-positioning=\"native\"][data-side=\"right\"][data-align=\"start\"] {\n    align-self: start;\n    position-area: right span-bottom;\n  }\n\n  [data-positioning=\"native\"][data-side=\"right\"][data-align=\"end\"] {\n    align-self: end;\n    position-area: right span-top;\n  }\n\n  [data-positioning=\"native\"][data-side=\"left\"][data-align=\"start\"] {\n    align-self: start;\n    position-area: left span-bottom;\n  }\n\n  [data-positioning=\"native\"][data-side=\"left\"][data-align=\"end\"] {\n    align-self: end;\n    position-area: left span-top;\n  }\n\n  /*\n   * Local open-state hooks. Top layer does not change DOM ancestry, so a scope\n   * that directly contains its surface can read the native state. Consumers\n   * style with the selector or with the variable; neither is a second source of truth.\n   *\n   * Compound roots and their public trigger parts share one component identity plus\n   * `data-part`, so native state stays readable without a second scope convention.\n   */\n  [data-uiify-modal][data-part=\"root\"]:has(> [data-uiify-modal][data-part=\"content\"][open])\n    > [data-uiify-modal][data-part=\"trigger\"],\n  [data-uiify-alert-modal][data-part=\"root\"]:has(\n      > [data-uiify-alert-modal][data-part=\"content\"][open]\n    )\n    > [data-uiify-alert-modal][data-part=\"trigger\"],\n  [data-uiify-popup][data-part=\"root\"]:has(> [data-uiify-popup][data-part=\"content\"]:popover-open)\n    > [data-uiify-popup][data-part=\"trigger\"] {\n    --uiify-trigger-open: 1;\n  }\n\n  [data-uiify-accordion] > [data-part=\"item\"][data-disabled] > summary,\n  [data-uiify-collapsible][data-disabled] > summary {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Customizable select: opts the control and its picker into the browser's\n     base styles so the picker becomes a styleable, top-layer popover with\n     implicit anchor positioning. Behavior only — no visual opinion. Engines\n     without support ignore this and keep the classic OS picker, which stays\n     fully functional. */\n  [data-uiify-select],\n  [data-uiify-select]::picker(select) {\n    appearance: base-select;\n  }\n\n  [data-uiify-tabs] > [data-part=\"item\"] > [data-part=\"control\"] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    /* stylelint-disable-next-line property-no-deprecated -- kept for older browser support alongside clip-path */\n    clip: rect(0, 0, 0, 0);\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  [data-uiify-tabs] > [data-part=\"item\"] > [data-part=\"panel\"] {\n    display: none;\n  }\n\n  [data-uiify-tabs] > [data-part=\"item\"] > [data-part=\"control\"]:checked ~ [data-part=\"panel\"] {\n    display: block;\n  }\n\n  [data-uiify-stepper] > [data-part=\"step\"] > [data-part=\"panel\"] {\n    display: none;\n  }\n\n  [data-uiify-stepper] > [data-part=\"step\"] > [data-part=\"control\"]:checked ~ [data-part=\"panel\"] {\n    display: block;\n  }\n\n  [data-uiify-tabs] [data-part=\"trigger\"][data-disabled] {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  [data-uiify-spinner][data-state=\"delayed\"] {\n    animation-name: uiify-spinner-show;\n    animation-duration: 0s;\n    animation-delay: attr(data-delay type(<time>), 0s);\n    animation-fill-mode: forwards;\n    visibility: hidden;\n  }\n\n  @keyframes uiify-spinner-show {\n    to {\n      visibility: visible;\n    }\n  }\n\n  [data-uiify-breadcrumb] [data-part=\"ellipsis\"] > ol {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  [data-uiify-carousel] > [data-part=\"viewport\"] {\n    display: grid;\n    min-inline-size: 0;\n    min-block-size: 0;\n    gap: var(--uiify-carousel-gap, 0);\n    scroll-behavior: auto;\n  }\n\n  [data-uiify-carousel][data-axis=\"inline\"] > [data-part=\"viewport\"] {\n    grid-auto-flow: column;\n    grid-auto-columns: var(--uiify-carousel-slide-size, 100%);\n    overflow-inline: auto;\n    overflow-block: hidden;\n    scroll-snap-type: inline mandatory;\n  }\n\n  [data-uiify-carousel][data-axis=\"block\"] > [data-part=\"viewport\"] {\n    grid-auto-flow: row;\n    grid-auto-rows: var(--uiify-carousel-slide-size, 100%);\n    overflow-block: auto;\n    overflow-inline: hidden;\n    scroll-snap-type: block mandatory;\n  }\n\n  [data-uiify-carousel] > [data-part=\"viewport\"] > [data-part=\"slide\"] {\n    min-inline-size: 0;\n    min-block-size: 0;\n    scroll-snap-align: start;\n  }\n\n  [data-uiify-carousel] > [data-part=\"viewport\"]:focus-visible,\n  [data-uiify-carousel] > button[data-part=\"controls\"]:focus-visible,\n  [data-uiify-carousel] > [data-part=\"dots\"] > a:focus-visible {\n    outline: auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    [data-uiify-carousel] > [data-part=\"viewport\"] {\n      scroll-behavior: smooth;\n    }\n  }\n\n  [data-uiify-carousel] > [data-part=\"viewport\"][data-dragging] {\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  [data-uiify-carousel][data-mode=\"fade\"][data-enhanced] > [data-part=\"viewport\"] {\n    grid-auto-flow: row;\n    grid-template-columns: 100%;\n    grid-auto-columns: auto;\n    overflow: hidden;\n    scroll-snap-type: none;\n    touch-action: pan-y pinch-zoom;\n  }\n\n  [data-uiify-carousel][data-mode=\"fade\"][data-enhanced]\n    > [data-part=\"viewport\"]\n    > [data-part=\"slide\"] {\n    grid-area: 1 / 1;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  [data-uiify-carousel][data-mode=\"fade\"][data-enhanced]\n    > [data-part=\"viewport\"]\n    > [data-part=\"slide\"][data-state=\"active\"] {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    [data-uiify-carousel][data-mode=\"fade\"][data-enhanced]\n      > [data-part=\"viewport\"]\n      > [data-part=\"slide\"] {\n      transition: opacity var(--uiify-carousel-fade-duration, 300ms) ease;\n    }\n  }\n\n  [data-uiify-virtual-scroll] {\n    --uiify-virtual-scroll-row-height: 64px;\n\n    overflow-y: auto;\n  }\n\n  [data-uiify-virtual-scroll] > [data-part=\"spacer\"] {\n    position: relative;\n    block-size: var(\n      --uiify-virtual-scroll-total-size,\n      calc(var(--uiify-virtual-scroll-count, 0) * var(--uiify-virtual-scroll-row-height))\n    );\n  }\n\n  [data-uiify-virtual-scroll] [data-part=\"row\"] {\n    position: absolute;\n    inset-inline: 0;\n    block-size: var(--uiify-row-height, var(--uiify-virtual-scroll-row-height));\n    translate: 0\n      var(\n        --uiify-row-offset,\n        calc(\n          (var(--uiify-range-start, 0) + var(--uiify-slot-index, 0)) *\n            var(--uiify-virtual-scroll-row-height)\n        )\n      );\n  }\n}\n"],"mappings":"AAGA;AAEA;AACE,GAAC,QAAQ,KAAK;AACZ,aAAS;AACX;AAGA,QAAM;AACJ,yBAAqB;AACvB;AAGA,QAAM,KAAK,CAAC;AACV,aAAS;AACX;AAEA,GAAC,YAAY,KAAK,CAAC;AACjB,iBAAa,IAAI,cAAc,EAAE,KAAK,YAAY,KAAK,CAAC,YAAY;AACtE;AAEA,GAAC;AACC,cAAU;AACV,WAAO;AACP,YAAQ;AACR,4BAAwB,UAAU,EAAE;AACtC;AAEA,GAAC,wBAA0B,CAAC;AAC1B,qBAAiB,IAAI,cAAc,EAAE,KAAK,YAAY,KAAK,CAAC,YAAY;AAC1E;AAEA,GAAC,wBAA0B,CAAC;AAC1B,mBAAe;AACf,sBAAkB,IAAI,qBAAqB,EAAE;AAC/C;AAEA,GAAC,wBAA0B,CAAC;AAC1B,mBAAe;AACf,yBAAqB,IAAI,qBAAqB,EAAE;AAClD;AAEA,GAAC,wBAA0B,CAAC;AAC1B,mBAAe;AACf,wBAAoB,IAAI,qBAAqB,EAAE;AACjD;AAEA,GAAC,wBAA0B,CAAC;AAC1B,mBAAe;AACf,uBAAmB,IAAI,qBAAqB,EAAE;AAChD;AAEA,GAAC,wBAA0B,CAAC,cAAgB,CAAC;AAC3C,mBAAe,IAAI;AACnB,kBAAc;AAChB;AAEA,GAAC,wBAA0B,CAAC,cAAgB,CAAC;AAC3C,mBAAe,IAAI;AACnB,kBAAc;AAChB;AAEA,GAAC,wBAA0B,CAAC,iBAAmB,CAAC;AAC9C,mBAAe,OAAO;AACtB,kBAAc;AAChB;AAEA,GAAC,wBAA0B,CAAC,iBAAmB,CAAC;AAC9C,mBAAe,OAAO;AACtB,kBAAc;AAChB;AAEA,GAAC,wBAA0B,CAAC,gBAAkB,CAAC;AAC7C,gBAAY;AACZ,mBAAe,MAAM;AACvB;AAEA,GAAC,wBAA0B,CAAC,gBAAkB,CAAC;AAC7C,gBAAY;AACZ,mBAAe,MAAM;AACvB;AAEA,GAAC,wBAA0B,CAAC,eAAiB,CAAC;AAC5C,gBAAY;AACZ,mBAAe,KAAK;AACtB;AAEA,GAAC,wBAA0B,CAAC,eAAiB,CAAC;AAC5C,gBAAY;AACZ,mBAAe,KAAK;AACtB;AAUA,GAAC,iBAAiB,CAAC,eAAiB,KAAK,EAAE,CAAC,iBAAiB,CAAC,kBAAoB,CAAC,OACjF,EAAE,CAAC,iBAAiB,CAAC;AAAA,EACvB,CAAC,uBAAuB,CAAC,eAAiB,KACtC,EAAE,CAAC,uBAAuB,CAAC,kBAAoB,CAAC,OAElD,EAAE,CAAC,uBAAuB,CAAC;AAAA,EAC7B,CAAC,iBAAiB,CAAC,eAAiB,KAAK,EAAE,CAAC,iBAAiB,CAAC,kBAAoB,eAChF,EAAE,CAAC,iBAAiB,CAAC;AACrB,0BAAsB;AACxB;AAEA,GAAC,sBAAsB,EAAE,CAAC,eAAiB,CAAC,eAAe,EAAE;AAAA,EAC7D,CAAC,uBAAuB,CAAC,eAAe,EAAE;AACxC,YAAQ;AACR,oBAAgB;AAClB;AAOA,GAAC;AAAA,EACD,CAAC,kBAAkB,SAAS;AAC1B,gBAAY;AACd;AAEA,GAAC,iBAAiB,EAAE,CAAC,gBAAkB,EAAE,CAAC;AACxC,cAAU;AACV,WAAO;AACP,YAAQ;AACR,aAAS;AACT,YAAQ;AACR,cAAU;AAEV,UAAM,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpB,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AAEA,GAAC,iBAAiB,EAAE,CAAC,gBAAkB,EAAE,CAAC;AACxC,aAAS;AACX;AAEA,GAAC,iBAAiB,EAAE,CAAC,gBAAkB,EAAE,CAAC,kBAAoB,SAAS,EAAE,CAAC;AACxE,aAAS;AACX;AAEA,GAAC,oBAAoB,EAAE,CAAC,gBAAkB,EAAE,CAAC;AAC3C,aAAS;AACX;AAEA,GAAC,oBAAoB,EAAE,CAAC,gBAAkB,EAAE,CAAC,kBAAoB,SAAS,EAAE,CAAC;AAC3E,aAAS;AACX;AAEA,GAAC,iBAAiB,CAAC,kBAAoB,CAAC;AACtC,YAAQ;AACR,oBAAgB;AAClB;AAEA,GAAC,mBAAmB,CAAC;AACnB,oBAAgB;AAChB,wBAAoB;AACpB,qBAAiB,KAAK,WAAW,KAAK,CAAC,IAAI,EAAE,EAAE;AAC/C,yBAAqB;AACrB,gBAAY;AACd;AAEA,aAPkB;AAQhB;AACE,kBAAY;AACd;AACF;AAEA,GAAC,uBAAuB,CAAC,oBAAsB,EAAE;AAC/C,gBAAY;AACZ,YAAQ;AACR,aAAS;AACX;AAEA,GAAC,qBAAqB,EAAE,CAAC;AACvB,aAAS;AACT,qBAAiB;AACjB,oBAAgB;AAChB,SAAK,IAAI,oBAAoB,EAAE;AAC/B,qBAAiB;AACnB;AAEA,GAAC,oBAAoB,CAAC,kBAAoB,EAAE,CAAC;AAC3C,oBAAgB;AAChB,uBAAmB,IAAI,2BAA2B,EAAE;AACpD,qBAAiB;AACjB,oBAAgB;AAChB,sBAAkB,OAAO;AAC3B;AAEA,GAAC,oBAAoB,CAAC,iBAAmB,EAAE,CAAC;AAC1C,oBAAgB;AAChB,oBAAgB,IAAI,2BAA2B,EAAE;AACjD,oBAAgB;AAChB,qBAAiB;AACjB,sBAAkB,MAAM;AAC1B;AAEA,GAAC,qBAAqB,EAAE,CAAC,oBAAsB,EAAE,CAAC;AAChD,qBAAiB;AACjB,oBAAgB;AAChB,uBAAmB;AACrB;AAEA,GAAC,qBAAqB,EAAE,CAAC,mBAAqB;AAAA,EAC9C,CAAC,qBAAqB,EAAE,MAAM,CAAC,mBAAqB;AAAA,EACpD,CAAC,qBAAqB,EAAE,CAAC,gBAAkB,EAAE,CAAC;AAC5C,aAAS;AACX;AAEA,UAAO,wBAAyB;AAC9B,KAAC,qBAAqB,EAAE,CAAC;AACvB,uBAAiB;AACnB;AACF;AAEA,GAAC,qBAAqB,EAAE,CAAC,mBAAqB,CAAC;AAC7C,qBAAiB;AACjB,sBAAkB;AACpB;AAEA,GAAC,oBAAoB,CAAC,eAAiB,CAAC,eAAe,EAAE,CAAC;AACxD,oBAAgB;AAChB,2BAAuB;AACvB,uBAAmB;AACnB,cAAU;AACV,sBAAkB;AAClB,kBAAc,MAAM;AACtB;AAEA,GAAC,oBAAoB,CAAC,eAAiB,CAAC,eACtC,EAAE,CAAC,oBACH,EAAE,CAAC;AACH,eAAW,EAAE,EAAE;AACf,aAAS;AACT,oBAAgB;AAClB;AAEA,GAAC,oBAAoB,CAAC,eAAiB,CAAC,eACtC,EAAE,CAAC,oBACH,EAAE,CAAC,gBAAkB,CAAC;AACtB,aAAS;AACT,oBAAgB;AAClB;AAEA,UAAO,wBAAyB;AAC9B,KAAC,oBAAoB,CAAC,eAAiB,CAAC,eACtC,EAAE,CAAC,oBACH,EAAE,CAAC;AACH,kBAAY,QAAQ,IAAI,8BAA8B,EAAE,OAAO;AACjE;AACF;AAEA,GAAC;AACC,uCAAmC;AAEnC,gBAAY;AACd;AAEA,GAAC,2BAA2B,EAAE,CAAC;AAC7B,cAAU;AACV,gBAAY,KACV,iCAAiC,EACjC,KAAK,IAAI,4BAA4B,EAAE,GAAG,EAAE,IAAI;AAEpD;AAEA,GAAC,2BAA2B,CAAC;AAC3B,cAAU;AACV,kBAAc;AACd,gBAAY,IAAI,kBAAkB,EAAE,IAAI;AACxC,eAAW,EACT,KACE,kBAAkB,EAClB,MACE,CAAC,IAAI,mBAAmB,EAAE,GAAG,EAAE,IAAI,kBAAkB,EAAE,IAAI,EACzD,IAAI;AAGd;AACF;","names":[]}

package/dist/components/breadcrumb/Breadcrumb.js

@@ -126,7 +126,7 @@ function BreadcrumbSeparator(props) {
 }
 function BreadcrumbEllipsis({ hiddenItems, separator }) {
   return /* @__PURE__ */ jsxs(BreadcrumbItem, { children: [
-    /* @__PURE__ */ jsxs(DetailsRoot, { "data-uiify-breadcrumb-ellipsis": "", children: [
+    /* @__PURE__ */ jsxs(DetailsRoot, { "data-part": "ellipsis", "data-uiify-breadcrumb": "", children: [
       /* @__PURE__ */ jsx(DetailsSummary, { "aria-label": "Show collapsed breadcrumbs", children: "\u2026" }),
       /* @__PURE__ */ jsx(DetailsContent, { as: "ol", children: hiddenItems.map((item) => /* @__PURE__ */ jsx(
         BreadcrumbLink,