npm - @gunkin/uiify - Versions diffs - 0.0.1-alpha → 0.0.3-alpha - Mend

@gunkin/uiify 0.0.1-alpha → 0.0.3-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (218) hide show

package/dist/components/toast/ToastElements.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/toast/ToastElements.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport type {\n ToastProviderOwnProps,\n ToastViewportOwnProps,\n ToastRootOwnProps,\n ToastTitleOwnProps,\n ToastDescriptionOwnProps,\n ToastActionProps,\n ToastCloseProps,\n} from \"./types.js\";\n\nexport function ToastProvider(props: ToastProviderOwnProps): ReactElement \| null {\n return (props.children ?? null) as ReactElement \| null;\n}\n\nexport function ToastViewport(props: ToastViewportOwnProps): ReactElement \| null {\n const { children, className, \"aria-label\": ariaLabel = \"Notifications\", popover, ref } = props;\n\n return (\n <section\n aria-label={ariaLabel}\n data-testid=\"toast-viewport\"\n ref={ref}\n {...(popover ? { popover } : {})}\n {...(className ? { className } : {})}\n >\n {children}\n </section>\n );\n}\nToastViewport.displayName = \"ToastViewport\";\n\nexport function ToastRoot(props: ToastRootOwnProps): ReactElement \| null {\n const { toast } = props;\n\n return (\n <fieldset\n aria-label={typeof toast.title === \"string\" ? toast.title : \"Notification\"}\n data-state=\"open\"\n data-uiify-toast~~-root~~=\"\"\n >\n {toast.title ? <ToastTitle>{toast.title}</ToastTitle> : null}\n {toast.description ? <ToastDescription>{toast.description}</ToastDescription> : null}\n {toast.action ? <ToastAction>{toast.action.label}</ToastAction> : null}\n <ToastClose />\n </fieldset>\n );\n}\nToastRoot.displayName = \"ToastRoot\";\n\nexport function ToastTitle(props: ToastTitleOwnProps): ReactElement \| null {\n const { children, className } = props;\n return useRenderElement({\n defaultTag: \"div\",\n props: {\n ...(className ? { className } : {}),\n children,\n },\n state: {},\n });\n}\n\nexport function ToastDescription(props: ToastDescriptionOwnProps): ReactElement \| null {\n const { children, className } = props;\n return useRenderElement({\n defaultTag: \"div\",\n props: {\n ...(className ? { className } : {}),\n children,\n },\n state: {},\n });\n}\n\nexport function ToastAction(props: ToastActionProps): ReactElement \| null {\n const { children, className, onClick, ...consumerProps } = props;\n return useRenderElement({\n defaultTag: \"button\",\n props: {\n ...consumerProps,\n type: \"button\",\n ...(className ? { className } : {}),\n onClick,\n children,\n },\n state: {},\n });\n}\n\nexport function ToastClose(props: ToastCloseProps): ReactElement \| null {\n const { children = \"Close\", className, onClick, ...consumerProps } = props;\n return useRenderElement({\n defaultTag: \"button\",\n props: {\n ...consumerProps,\n type: \"button\",\n \"aria-label\": typeof children === \"string\" ? children : \"Close\",\n ...(className ? { className } : {}),\n onClick,\n children,\n },\n state: {},\n });\n}\n\nexport const Toast = {\n Action: ToastAction,\n Close: ToastClose,\n Description: ToastDescription,\n Provider: ToastProvider,\n Root: ToastRoot,\n Title: ToastTitle,\n Viewport: ToastViewport,\n};\n"],"mappings":"AAoBI,~~cAiBA~~,~~YAjBA~~;AAnBJ,SAAS,wBAAwB;AAW1B,SAAS,cAAc,OAAmD;AAC/E,SAAQ,MAAM,YAAY;AAC5B;AAEO,SAAS,cAAc,OAAmD;AAC/E,QAAM,EAAE,UAAU,WAAW,cAAc,YAAY,iBAAiB,SAAS,IAAI,IAAI;AAEzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,eAAY;AAAA,MACZ;AAAA,MACC,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;AAAA,MAC7B,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MAEjC;AAAA;AAAA,EACH;AAEJ;AACA,cAAc,cAAc;AAErB,SAAS,UAAU,OAA+C;AACvE,QAAM,EAAE,MAAM,IAAI;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ;AAAA,MAC5D,cAAW;AAAA,MACX,~~yBAAsB~~;AAAA,~~MAErB~~;AAAA,cAAM,QAAQ,oBAAC,cAAY,gBAAM,OAAM,IAAgB;AAAA,QACvD,MAAM,cAAc,oBAAC,oBAAkB,gBAAM,aAAY,IAAsB;AAAA,QAC/E,MAAM,SAAS,oBAAC,eAAa,gBAAM,OAAO,OAAM,IAAiB;AAAA,QAClE,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;AACA,UAAU,cAAc;AAEjB,SAAS,WAAW,OAAgD;AACzE,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,SAAS,iBAAiB,OAAsD;AACrF,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,SAAS,YAAY,OAA8C;AACxE,QAAM,EAAE,UAAU,WAAW,SAAS,GAAG,cAAc,IAAI;AAC3D,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,MACA;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,WAAW,SAAS,WAAW,SAAS,GAAG,cAAc,IAAI;AACrE,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,cAAc,OAAO,aAAa,WAAW,WAAW;AAAA,MACxD,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,MACA;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,MAAM,QAAQ;AAAA,EACnB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/toast/ToastElements.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport type {\n ToastProviderOwnProps,\n ToastViewportOwnProps,\n ToastRootOwnProps,\n ToastTitleOwnProps,\n ToastDescriptionOwnProps,\n ToastActionProps,\n ToastCloseProps,\n} from \"./types.js\";\n\nexport function ToastProvider(props: ToastProviderOwnProps): ReactElement \| null {\n return (props.children ?? null) as ReactElement \| null;\n}\n\nexport function ToastViewport(props: ToastViewportOwnProps): ReactElement \| null {\n const { children, className, \"aria-label\": ariaLabel = \"Notifications\", popover, ref } = props;\n\n return (\n <section\n aria-label={ariaLabel}\n data-part=\"viewport\"\n data-testid=\"toast-viewport\"\n data-uiify-toast=\"\"\n ref={ref}\n {...(popover ? { popover } : {})}\n {...(className ? { className } : {})}\n >\n {children}\n </section>\n );\n}\nToastViewport.displayName = \"ToastViewport\";\n\nexport function ToastRoot(props: ToastRootOwnProps): ReactElement \| null {\n const { toast } = props;\n\n return (\n <fieldset\n aria-label={typeof toast.title === \"string\" ? toast.title : \"Notification\"}\n data-part=\"item\"\n data-state=\"open\"\n data-uiify-toast=\"\"\n >\n {toast.title ? <ToastTitle>{toast.title}</ToastTitle> : null}\n {toast.description ? <ToastDescription>{toast.description}</ToastDescription> : null}\n {toast.action ? <ToastAction>{toast.action.label}</ToastAction> : null}\n <ToastClose />\n </fieldset>\n );\n}\nToastRoot.displayName = \"ToastRoot\";\n\nexport function ToastTitle(props: ToastTitleOwnProps): ReactElement \| null {\n const { children, className } = props;\n return useRenderElement({\n defaultTag: \"div\",\n props: {\n ...(className ? { className } : {}),\n children,\n },\n state: {},\n });\n}\n\nexport function ToastDescription(props: ToastDescriptionOwnProps): ReactElement \| null {\n const { children, className } = props;\n return useRenderElement({\n defaultTag: \"div\",\n props: {\n ...(className ? { className } : {}),\n children,\n },\n state: {},\n });\n}\n\nexport function ToastAction(props: ToastActionProps): ReactElement \| null {\n const { children, className, onClick, ...consumerProps } = props;\n return useRenderElement({\n defaultTag: \"button\",\n props: {\n ...consumerProps,\n type: \"button\",\n ...(className ? { className } : {}),\n onClick,\n children,\n },\n state: {},\n });\n}\n\nexport function ToastClose(props: ToastCloseProps): ReactElement \| null {\n const { children = \"Close\", className, onClick, ...consumerProps } = props;\n return useRenderElement({\n defaultTag: \"button\",\n props: {\n ...consumerProps,\n type: \"button\",\n \"aria-label\": typeof children === \"string\" ? children : \"Close\",\n ...(className ? { className } : {}),\n onClick,\n children,\n },\n state: {},\n });\n}\n\nexport const Toast = {\n Action: ToastAction,\n Close: ToastClose,\n Description: ToastDescription,\n Provider: ToastProvider,\n Root: ToastRoot,\n Title: ToastTitle,\n Viewport: ToastViewport,\n};\n"],"mappings":"AAoBI,cAmBA,YAnBA;AAnBJ,SAAS,wBAAwB;AAW1B,SAAS,cAAc,OAAmD;AAC/E,SAAQ,MAAM,YAAY;AAC5B;AAEO,SAAS,cAAc,OAAmD;AAC/E,QAAM,EAAE,UAAU,WAAW,cAAc,YAAY,iBAAiB,SAAS,IAAI,IAAI;AAEzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,oBAAiB;AAAA,MACjB;AAAA,MACC,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;AAAA,MAC7B,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MAEjC;AAAA;AAAA,EACH;AAEJ;AACA,cAAc,cAAc;AAErB,SAAS,UAAU,OAA+C;AACvE,QAAM,EAAE,MAAM,IAAI;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ;AAAA,MAC5D,aAAU;AAAA,MACV,cAAW;AAAA,MACX,oBAAiB;AAAA,MAEhB;AAAA,cAAM,QAAQ,oBAAC,cAAY,gBAAM,OAAM,IAAgB;AAAA,QACvD,MAAM,cAAc,oBAAC,oBAAkB,gBAAM,aAAY,IAAsB;AAAA,QAC/E,MAAM,SAAS,oBAAC,eAAa,gBAAM,OAAO,OAAM,IAAiB;AAAA,QAClE,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;AACA,UAAU,cAAc;AAEjB,SAAS,WAAW,OAAgD;AACzE,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,SAAS,iBAAiB,OAAsD;AACrF,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,SAAS,YAAY,OAA8C;AACxE,QAAM,EAAE,UAAU,WAAW,SAAS,GAAG,cAAc,IAAI;AAC3D,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,MACA;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,WAAW,SAAS,WAAW,SAAS,GAAG,cAAc,IAAI;AACrE,SAAO,iBAAiB;AAAA,IACtB,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,cAAc,OAAO,aAAa,WAAW,WAAW;AAAA,MACxD,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MACjC;AAAA,MACA;AAAA,IACF;AAAA,IACA,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,MAAM,QAAQ;AAAA,EACnB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;","names":[]}

package/dist/components/toggle/Toggle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,KAAK,EACL,OAAO,EACP,cAAsB,EACtB,QAAgB,EAChB,SAAS,GACV,EAAE,WAAW,GAAG,YAAY,~~CAuB5B~~;~~yBA9Be~~,MAAM"}
1	+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,KAAK,EACL,OAAO,EACP,cAAsB,EACtB,QAAgB,EAChB,SAAS,GACV,EAAE,WAAW,GAAG,YAAY,CAwB5B;yBA/Be,MAAM"}

package/dist/components/toggle/Toggle.js CHANGED Viewed

@@ -17,6 +17,7 @@ function Toggle({
         "aria-labelledby": labelId,
         checked,
         "data-disabled": disabled ? "" : void 0,
+        "data-part": "control",
         "data-state": isControlled ? pressed ? "on" : "off" : void 0,
         defaultChecked: !isControlled ? defaultPressed : void 0,
         disabled: disabled || void 0,

package/dist/components/toggle/Toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport type { ToggleProps } from \"./types.js\";\n\nexport function Toggle({\n id,\n label,\n pressed,\n defaultPressed = false,\n disabled = false,\n className,\n}: ToggleProps): ReactElement {\n const isControlled = pressed !== undefined;\n const checked = isControlled ? pressed : undefined;\n\n const labelId = `${id}-label`;\n\n return (\n <div data-disabled={disabled ? \"\" : undefined} data-uiify-toggle=\"\">\n <input\n aria-labelledby={labelId}\n checked={checked}\n data-disabled={disabled ? \"\" : undefined}\n data-state={isControlled ? (pressed ? \"on\" : \"off\") : undefined}\n defaultChecked={!isControlled ? defaultPressed : undefined}\n disabled={disabled \|\| undefined}\n id={id}\n type=\"checkbox\"\n />\n <label className={className} data-part=\"label\" htmlFor={id} id={labelId}>\n {label}\n </label>\n </div>\n );\n}\nToggle.displayName = \"Toggle\";\n"],"mappings":"AAiBI,SACE,KADF;AAdG,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AACF,GAA8B;AAC5B,QAAM,eAAe,YAAY;AACjC,QAAM,UAAU,eAAe,UAAU;AAEzC,QAAM,UAAU,GAAG,EAAE;AAErB,SACE,qBAAC,SAAI,iBAAe,WAAW,KAAK,QAAW,qBAAkB,IAC/D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,mBAAiB;AAAA,QACjB;AAAA,QACA,iBAAe,WAAW,KAAK;AAAA,QAC/B,cAAY,eAAgB,UAAU,OAAO,QAAS;AAAA,QACtD,gBAAgB,CAAC,eAAe,iBAAiB;AAAA,QACjD,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,MAAK;AAAA;AAAA,IACP;AAAA,IACA,oBAAC,WAAM,WAAsB,aAAU,SAAQ,SAAS,IAAI,IAAI,SAC7D,iBACH;AAAA,KACF;AAEJ;AACA,OAAO,cAAc;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport type { ToggleProps } from \"./types.js\";\n\nexport function Toggle({\n id,\n label,\n pressed,\n defaultPressed = false,\n disabled = false,\n className,\n}: ToggleProps): ReactElement {\n const isControlled = pressed !== undefined;\n const checked = isControlled ? pressed : undefined;\n\n const labelId = `${id}-label`;\n\n return (\n <div data-disabled={disabled ? \"\" : undefined} data-uiify-toggle=\"\">\n <input\n aria-labelledby={labelId}\n checked={checked}\n data-disabled={disabled ? \"\" : undefined}\n data-part=\"control\"\n data-state={isControlled ? (pressed ? \"on\" : \"off\") : undefined}\n defaultChecked={!isControlled ? defaultPressed : undefined}\n disabled={disabled \|\| undefined}\n id={id}\n type=\"checkbox\"\n />\n <label className={className} data-part=\"label\" htmlFor={id} id={labelId}>\n {label}\n </label>\n </div>\n );\n}\nToggle.displayName = \"Toggle\";\n"],"mappings":"AAiBI,SACE,KADF;AAdG,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AACF,GAA8B;AAC5B,QAAM,eAAe,YAAY;AACjC,QAAM,UAAU,eAAe,UAAU;AAEzC,QAAM,UAAU,GAAG,EAAE;AAErB,SACE,qBAAC,SAAI,iBAAe,WAAW,KAAK,QAAW,qBAAkB,IAC/D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,mBAAiB;AAAA,QACjB;AAAA,QACA,iBAAe,WAAW,KAAK;AAAA,QAC/B,aAAU;AAAA,QACV,cAAY,eAAgB,UAAU,OAAO,QAAS;AAAA,QACtD,gBAAgB,CAAC,eAAe,iBAAiB;AAAA,QACjD,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,MAAK;AAAA;AAAA,IACP;AAAA,IACA,oBAAC,WAAM,WAAsB,aAAU,SAAQ,SAAS,IAAI,IAAI,SAC7D,iBACH;AAAA,KACF;AAEJ;AACA,OAAO,cAAc;","names":[]}

package/dist/components/toolbar/Toolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAQ9E,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,UAAU,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,sBAAsB,CAAC;CAC/C;AAqCD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,GAAG,EACH,IAAW,EACX,WAA0B,EAC1B,GAAG,aAAa,EACjB,EAAE,sBAAsB,GAAG,YAAY,~~CA8EvC~~;~~yBArFe~~,iBAAiB;;;~~AAwFjC~~,eAAO,MAAM,WAAW,0BAAoB,CAAC;AAE7C,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAE5E;yBAFe,aAAa;;;AAK7B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAExE;yBAFe,WAAW;;;AAK3B,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAElF;yBAFe,gBAAgB;;;AAKhC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAEtF;yBAFe,kBAAkB;;;AAKlC,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}
1	+ {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAQ9E,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,UAAU,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,sBAAsB,CAAC;CAC/C;AAqCD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,GAAG,EACH,IAAW,EACX,WAA0B,EAC1B,GAAG,aAAa,EACjB,EAAE,sBAAsB,GAAG,YAAY,CAgFvC;yBAvFe,iBAAiB;;;AA0FjC,eAAO,MAAM,WAAW,0BAAoB,CAAC;AAE7C,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAE5E;yBAFe,aAAa;;;AAK7B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAExE;yBAFe,WAAW;;;AAK3B,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAElF;yBAFe,gBAAgB;;;AAKhC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAEtF;yBAFe,kBAAkB;;;AAKlC,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

package/dist/components/toolbar/Toolbar.js CHANGED Viewed

@@ -8,7 +8,7 @@ import {
   ToolbarToggleGroup as ServerToolbarToggleGroup
 } from "./ToolbarShell.js";
 function getToolbarItems(root) {
-  return Array.from(root.querySelectorAll("[data-uiify-toolbar-item]"));
+  return Array.from(root.querySelectorAll('[data-uiify-toolbar][data-part="item"]'));
 }
 function isDisabledItem(item) {
   return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled");
@@ -51,14 +51,14 @@ function ToolbarRootClient({
     const handleFocusIn = (event) => {
       const target = event.target;
       if (!(target instanceof HTMLElement)) return;
-      const item = target.closest("[data-uiify-toolbar-item]");
+      const item = target.closest('[data-uiify-toolbar][data-part="item"]');
       if (!item || !root.contains(item) || isDisabledItem(item)) return;
       currentRef.current = syncTabStops(root, item);
     };
     const handleKeyDown = (event) => {
       const target = event.target;
       if (!(target instanceof HTMLElement)) return;
-      const item = target.closest("[data-uiify-toolbar-item]");
+      const item = target.closest('[data-uiify-toolbar][data-part="item"]');
       if (!item || !root.contains(item)) return;
       const enabled = getToolbarItems(root).filter((entry) => !isDisabledItem(entry));
       const currentIndex = enabled.indexOf(item);
@@ -98,6 +98,8 @@ function ToolbarRootClient({
       ...consumerProps,
       className,
       "data-orientation": orientation,
+      "data-part": "root",
+      "data-uiify-toolbar": "",
       dir,
       ref: rootRef,
       role: "toolbar",

package/dist/components/toolbar/Toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/toolbar/Toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\nimport type { Direction } from \"@gunkin/uiify/core/direction\";\nimport type { RovingFocusOrientation } from \"@gunkin/uiify/core/roving-focus\";\n\nimport {\n ToolbarButton as ServerToolbarButton,\n ToolbarLink as ServerToolbarLink,\n ToolbarSeparator as ServerToolbarSeparator,\n ToolbarToggleGroup as ServerToolbarToggleGroup,\n} from \"./ToolbarShell.js\";\nimport type {\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarSeparatorProps,\n ToolbarToggleGroupProps,\n} from \"./types.js\";\n\ninterface ToolbarRootClientProps extends HTMLAttributes<HTMLDivElement> {\n readonly children?: ReactNode;\n readonly dir?: Direction;\n readonly loop?: boolean;\n readonly orientation?: RovingFocusOrientation;\n}\n\nfunction getToolbarItems(root: HTMLDivElement): HTMLElement[] {\n return Array.from(root.querySelectorAll<HTMLElement>(\"[data-uiify-toolbar-item]\"));\n}\n\nfunction isDisabledItem(item: HTMLElement): boolean {\n return item.getAttribute(\"aria-disabled\") === \"true\" \|\| item.hasAttribute(\"disabled\");\n}\n\nfunction syncTabStops(root: HTMLDivElement, current: HTMLElement \| null): HTMLElement \| null {\n const items = getToolbarItems(root);\n const enabled = items.filter((item) => !isDisabledItem(item));\n if (enabled.length === 0) return null;\n\n const nextCurrent = current && enabled.includes(current) ? current : (enabled[0] ?? null);\n\n for (const item of items) {\n item.tabIndex = nextCurrent === item ? 0 : -1;\n }\n\n return nextCurrent;\n}\n\nfunction moveIndex(\n currentIndex: number,\n offset: number,\n length: number,\n loop: boolean,\n): number \| null {\n if (length === 0) return null;\n if (loop) return (currentIndex + offset + length) % length;\n const nextIndex = currentIndex + offset;\n if (nextIndex < 0 \|\| nextIndex >= length) return null;\n return nextIndex;\n}\n\nexport function ToolbarRootClient({\n children,\n className,\n dir,\n loop = true,\n orientation = \"horizontal\",\n ...consumerProps\n}: ToolbarRootClientProps): ReactElement {\n const rootRef = useRef<HTMLDivElement \| null>(null);\n const currentRef = useRef<HTMLElement \| null>(null);\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n currentRef.current = syncTabStops(root, currentRef.current);\n });\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n\n const handleFocusIn = (event: FocusEvent) => {\n const target = event.target;\n if (!(target instanceof HTMLElement)) return;\n const item = target.closest<HTMLElement>(\"[data-uiify-toolbar-item]\");\n if (!item \|\| !root.contains(item) \|\| isDisabledItem(item)) return;\n currentRef.current = syncTabStops(root, item);\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n const target = event.target;\n if (!(target instanceof HTMLElement)) return;\n const item = target.closest<HTMLElement>(\"[data-uiify-toolbar-item]\");\n if (!item \|\| !root.contains(item)) return;\n\n const enabled = getToolbarItems(root).filter((entry) => !isDisabledItem(entry));\n const currentIndex = enabled.indexOf(item);\n if (currentIndex === -1) return;\n\n let nextIndex: number \| null = null;\n if (event.key === \"Home\") nextIndex = 0;\n if (event.key === \"End\") nextIndex = enabled.length - 1;\n if (orientation !== \"vertical\" && event.key === \"ArrowRight\") {\n nextIndex = moveIndex(currentIndex, dir === \"rtl\" ? -1 : 1, enabled.length, loop);\n }\n if (orientation !== \"vertical\" && event.key === \"ArrowLeft\") {\n nextIndex = moveIndex(currentIndex, dir === \"rtl\" ? 1 : -1, enabled.length, loop);\n }\n if (orientation !== \"horizontal\" && event.key === \"ArrowDown\") {\n nextIndex = moveIndex(currentIndex, 1, enabled.length, loop);\n }\n if (orientation !== \"horizontal\" && event.key === \"ArrowUp\") {\n nextIndex = moveIndex(currentIndex, -1, enabled.length, loop);\n }\n\n if (nextIndex === null) return;\n\n event.preventDefault();\n const nextItem = enabled[nextIndex];\n if (!nextItem) return;\n currentRef.current = syncTabStops(root, nextItem);\n nextItem.focus();\n };\n\n root.addEventListener(\"focusin\", handleFocusIn);\n root.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n root.removeEventListener(\"focusin\", handleFocusIn);\n root.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [dir, loop, orientation]);\n\n return (\n <div\n {...consumerProps}\n className={className}\n data-orientation={orientation}\n dir={dir}\n ref={rootRef}\n role=\"toolbar\"\n >\n {children}\n </div>\n );\n}\nToolbarRootClient.displayName = \"ToolbarRootClient\";\n\nexport const ToolbarRoot = ToolbarRootClient;\n\nexport function ToolbarButton(props: ToolbarButtonProps): ReactElement \| null {\n return <ServerToolbarButton {...props} />;\n}\nToolbarButton.displayName = \"ToolbarButton\";\n\nexport function ToolbarLink(props: ToolbarLinkProps): ReactElement \| null {\n return <ServerToolbarLink {...props} />;\n}\nToolbarLink.displayName = \"ToolbarLink\";\n\nexport function ToolbarSeparator(props: ToolbarSeparatorProps): ReactElement \| null {\n return <ServerToolbarSeparator {...props} />;\n}\nToolbarSeparator.displayName = \"ToolbarSeparator\";\n\nexport function ToolbarToggleGroup(props: ToolbarToggleGroupProps): ReactElement \| null {\n return <ServerToolbarToggleGroup {...props} />;\n}\nToolbarToggleGroup.displayName = \"ToolbarToggleGroup\";\n\nexport const Toolbar = {\n Button: ToolbarButton,\n Link: ToolbarLink,\n Root: ToolbarRoot,\n Separator: ToolbarSeparator,\n ToggleGroup: ToolbarToggleGroup,\n};\n"],"mappings":";AAwII;AAtIJ,SAAS,WAAW,cAAc;AAKlC;AAAA,EACE,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,OACjB;AAeP,SAAS,gBAAgB,MAAqC;AAC5D,SAAO,MAAM,KAAK,KAAK,iBAA8B,~~2BAA2B~~,CAAC;~~AACnF~~;AAEA,SAAS,eAAe,MAA4B;AAClD,SAAO,KAAK,aAAa,eAAe,MAAM,UAAU,KAAK,aAAa,UAAU;AACtF;AAEA,SAAS,aAAa,MAAsB,SAAiD;AAC3F,QAAM,QAAQ,gBAAgB,IAAI;AAClC,QAAM,UAAU,MAAM,OAAO,CAAC,SAAS,CAAC,eAAe,IAAI,CAAC;AAC5D,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,cAAc,WAAW,QAAQ,SAAS,OAAO,IAAI,UAAW,QAAQ,CAAC,KAAK;AAEpF,aAAW,QAAQ,OAAO;AACxB,SAAK,WAAW,gBAAgB,OAAO,IAAI;AAAA,EAC7C;AAEA,SAAO;AACT;AAEA,SAAS,UACP,cACA,QACA,QACA,MACe;AACf,MAAI,WAAW,EAAG,QAAO;AACzB,MAAI,KAAM,SAAQ,eAAe,SAAS,UAAU;AACpD,QAAM,YAAY,eAAe;AACjC,MAAI,YAAY,KAAK,aAAa,OAAQ,QAAO;AACjD,SAAO;AACT;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,GAAG;AACL,GAAyC;AACvC,QAAM,UAAU,OAA8B,IAAI;AAClD,QAAM,aAAa,OAA2B,IAAI;AAElD,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,eAAW,UAAU,aAAa,MAAM,WAAW,OAAO;AAAA,EAC5D,CAAC;AAED,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AAEX,UAAM,gBAAgB,CAAC,UAAsB;AAC3C,YAAM,SAAS,MAAM;AACrB,UAAI,EAAE,kBAAkB,aAAc;AACtC,YAAM,OAAO,OAAO,QAAqB,~~2BAA2B~~;~~AACpE~~,UAAI,CAAC,QAAQ,CAAC,KAAK,SAAS,IAAI,KAAK,eAAe,IAAI,EAAG;AAC3D,iBAAW,UAAU,aAAa,MAAM,IAAI;AAAA,IAC9C;AAEA,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,SAAS,MAAM;AACrB,UAAI,EAAE,kBAAkB,aAAc;AACtC,YAAM,OAAO,OAAO,QAAqB,~~2BAA2B~~;~~AACpE~~,UAAI,CAAC,QAAQ,CAAC,KAAK,SAAS,IAAI,EAAG;AAEnC,YAAM,UAAU,gBAAgB,IAAI,EAAE,OAAO,CAAC,UAAU,CAAC,eAAe,KAAK,CAAC;AAC9E,YAAM,eAAe,QAAQ,QAAQ,IAAI;AACzC,UAAI,iBAAiB,GAAI;AAEzB,UAAI,YAA2B;AAC/B,UAAI,MAAM,QAAQ,OAAQ,aAAY;AACtC,UAAI,MAAM,QAAQ,MAAO,aAAY,QAAQ,SAAS;AACtD,UAAI,gBAAgB,cAAc,MAAM,QAAQ,cAAc;AAC5D,oBAAY,UAAU,cAAc,QAAQ,QAAQ,KAAK,GAAG,QAAQ,QAAQ,IAAI;AAAA,MAClF;AACA,UAAI,gBAAgB,cAAc,MAAM,QAAQ,aAAa;AAC3D,oBAAY,UAAU,cAAc,QAAQ,QAAQ,IAAI,IAAI,QAAQ,QAAQ,IAAI;AAAA,MAClF;AACA,UAAI,gBAAgB,gBAAgB,MAAM,QAAQ,aAAa;AAC7D,oBAAY,UAAU,cAAc,GAAG,QAAQ,QAAQ,IAAI;AAAA,MAC7D;AACA,UAAI,gBAAgB,gBAAgB,MAAM,QAAQ,WAAW;AAC3D,oBAAY,UAAU,cAAc,IAAI,QAAQ,QAAQ,IAAI;AAAA,MAC9D;AAEA,UAAI,cAAc,KAAM;AAExB,YAAM,eAAe;AACrB,YAAM,WAAW,QAAQ,SAAS;AAClC,UAAI,CAAC,SAAU;AACf,iBAAW,UAAU,aAAa,MAAM,QAAQ;AAChD,eAAS,MAAM;AAAA,IACjB;AAEA,SAAK,iBAAiB,WAAW,aAAa;AAC9C,SAAK,iBAAiB,WAAW,aAAa;AAE9C,WAAO,MAAM;AACX,WAAK,oBAAoB,WAAW,aAAa;AACjD,WAAK,oBAAoB,WAAW,aAAa;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,MAAM,WAAW,CAAC;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,oBAAkB;AAAA,MAClB;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AACA,kBAAkB,cAAc;AAEzB,MAAM,cAAc;AAEpB,SAAS,cAAc,OAAgD;AAC5E,SAAO,oBAAC,uBAAqB,GAAG,OAAO;AACzC;AACA,cAAc,cAAc;AAErB,SAAS,YAAY,OAA8C;AACxE,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AACA,YAAY,cAAc;AAEnB,SAAS,iBAAiB,OAAmD;AAClF,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AACA,iBAAiB,cAAc;AAExB,SAAS,mBAAmB,OAAqD;AACtF,SAAO,oBAAC,4BAA0B,GAAG,OAAO;AAC9C;AACA,mBAAmB,cAAc;AAE1B,MAAM,UAAU;AAAA,EACrB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/toolbar/Toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\nimport type { Direction } from \"@gunkin/uiify/core/direction\";\nimport type { RovingFocusOrientation } from \"@gunkin/uiify/core/roving-focus\";\n\nimport {\n ToolbarButton as ServerToolbarButton,\n ToolbarLink as ServerToolbarLink,\n ToolbarSeparator as ServerToolbarSeparator,\n ToolbarToggleGroup as ServerToolbarToggleGroup,\n} from \"./ToolbarShell.js\";\nimport type {\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarSeparatorProps,\n ToolbarToggleGroupProps,\n} from \"./types.js\";\n\ninterface ToolbarRootClientProps extends HTMLAttributes<HTMLDivElement> {\n readonly children?: ReactNode;\n readonly dir?: Direction;\n readonly loop?: boolean;\n readonly orientation?: RovingFocusOrientation;\n}\n\nfunction getToolbarItems(root: HTMLDivElement): HTMLElement[] {\n return Array.from(root.querySelectorAll<HTMLElement>('[data-uiify-toolbar][data-part=\"item\"]'));\n}\n\nfunction isDisabledItem(item: HTMLElement): boolean {\n return item.getAttribute(\"aria-disabled\") === \"true\" \|\| item.hasAttribute(\"disabled\");\n}\n\nfunction syncTabStops(root: HTMLDivElement, current: HTMLElement \| null): HTMLElement \| null {\n const items = getToolbarItems(root);\n const enabled = items.filter((item) => !isDisabledItem(item));\n if (enabled.length === 0) return null;\n\n const nextCurrent = current && enabled.includes(current) ? current : (enabled[0] ?? null);\n\n for (const item of items) {\n item.tabIndex = nextCurrent === item ? 0 : -1;\n }\n\n return nextCurrent;\n}\n\nfunction moveIndex(\n currentIndex: number,\n offset: number,\n length: number,\n loop: boolean,\n): number \| null {\n if (length === 0) return null;\n if (loop) return (currentIndex + offset + length) % length;\n const nextIndex = currentIndex + offset;\n if (nextIndex < 0 \|\| nextIndex >= length) return null;\n return nextIndex;\n}\n\nexport function ToolbarRootClient({\n children,\n className,\n dir,\n loop = true,\n orientation = \"horizontal\",\n ...consumerProps\n}: ToolbarRootClientProps): ReactElement {\n const rootRef = useRef<HTMLDivElement \| null>(null);\n const currentRef = useRef<HTMLElement \| null>(null);\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n currentRef.current = syncTabStops(root, currentRef.current);\n });\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n\n const handleFocusIn = (event: FocusEvent) => {\n const target = event.target;\n if (!(target instanceof HTMLElement)) return;\n const item = target.closest<HTMLElement>('[data-uiify-toolbar][data-part=\"item\"]');\n if (!item \|\| !root.contains(item) \|\| isDisabledItem(item)) return;\n currentRef.current = syncTabStops(root, item);\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n const target = event.target;\n if (!(target instanceof HTMLElement)) return;\n const item = target.closest<HTMLElement>('[data-uiify-toolbar][data-part=\"item\"]');\n if (!item \|\| !root.contains(item)) return;\n\n const enabled = getToolbarItems(root).filter((entry) => !isDisabledItem(entry));\n const currentIndex = enabled.indexOf(item);\n if (currentIndex === -1) return;\n\n let nextIndex: number \| null = null;\n if (event.key === \"Home\") nextIndex = 0;\n if (event.key === \"End\") nextIndex = enabled.length - 1;\n if (orientation !== \"vertical\" && event.key === \"ArrowRight\") {\n nextIndex = moveIndex(currentIndex, dir === \"rtl\" ? -1 : 1, enabled.length, loop);\n }\n if (orientation !== \"vertical\" && event.key === \"ArrowLeft\") {\n nextIndex = moveIndex(currentIndex, dir === \"rtl\" ? 1 : -1, enabled.length, loop);\n }\n if (orientation !== \"horizontal\" && event.key === \"ArrowDown\") {\n nextIndex = moveIndex(currentIndex, 1, enabled.length, loop);\n }\n if (orientation !== \"horizontal\" && event.key === \"ArrowUp\") {\n nextIndex = moveIndex(currentIndex, -1, enabled.length, loop);\n }\n\n if (nextIndex === null) return;\n\n event.preventDefault();\n const nextItem = enabled[nextIndex];\n if (!nextItem) return;\n currentRef.current = syncTabStops(root, nextItem);\n nextItem.focus();\n };\n\n root.addEventListener(\"focusin\", handleFocusIn);\n root.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n root.removeEventListener(\"focusin\", handleFocusIn);\n root.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [dir, loop, orientation]);\n\n return (\n <div\n {...consumerProps}\n className={className}\n data-orientation={orientation}\n data-part=\"root\"\n data-uiify-toolbar=\"\"\n dir={dir}\n ref={rootRef}\n role=\"toolbar\"\n >\n {children}\n </div>\n );\n}\nToolbarRootClient.displayName = \"ToolbarRootClient\";\n\nexport const ToolbarRoot = ToolbarRootClient;\n\nexport function ToolbarButton(props: ToolbarButtonProps): ReactElement \| null {\n return <ServerToolbarButton {...props} />;\n}\nToolbarButton.displayName = \"ToolbarButton\";\n\nexport function ToolbarLink(props: ToolbarLinkProps): ReactElement \| null {\n return <ServerToolbarLink {...props} />;\n}\nToolbarLink.displayName = \"ToolbarLink\";\n\nexport function ToolbarSeparator(props: ToolbarSeparatorProps): ReactElement \| null {\n return <ServerToolbarSeparator {...props} />;\n}\nToolbarSeparator.displayName = \"ToolbarSeparator\";\n\nexport function ToolbarToggleGroup(props: ToolbarToggleGroupProps): ReactElement \| null {\n return <ServerToolbarToggleGroup {...props} />;\n}\nToolbarToggleGroup.displayName = \"ToolbarToggleGroup\";\n\nexport const Toolbar = {\n Button: ToolbarButton,\n Link: ToolbarLink,\n Root: ToolbarRoot,\n Separator: ToolbarSeparator,\n ToggleGroup: ToolbarToggleGroup,\n};\n"],"mappings":"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","names":[]}

package/dist/components/toolbar/ToolbarShell.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarShell.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/ToolbarShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,~~CAsBxE~~;~~yBAtBe~~,WAAW;;;~~AAyB3B~~,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,~~CAe5E~~;~~yBAfe~~,aAAa;;;~~AAkB7B~~,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAQxE;yBARe,WAAW;;;AAW3B,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,~~CAUlF~~;~~yBAVe~~,gBAAgB;;;~~AAahC~~,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAE1F;yBAFe,sBAAsB;;;AAKtC,eAAO,MAAM,kBAAkB,+BAAyB,CAAC;AAEzD,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}
1	+ {"version":3,"file":"ToolbarShell.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/ToolbarShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAuBxE;yBAvBe,WAAW;;;AA0B3B,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAgB5E;yBAhBe,aAAa;;;AAmB7B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAQxE;yBARe,WAAW;;;AAW3B,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAWlF;yBAXe,gBAAgB;;;AAchC,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAE1F;yBAFe,sBAAsB;;;AAKtC,eAAO,MAAM,kBAAkB,+BAAyB,CAAC;AAEzD,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

package/dist/components/toolbar/ToolbarShell.js CHANGED Viewed

@@ -15,6 +15,7 @@ function ToolbarRoot(props) {
       ...consumerProps,
       className,
       "data-orientation": orientation,
+      "data-part": "root",
       "data-uiify-toolbar": "",
       dir,
       role: "toolbar",
@@ -24,24 +25,25 @@ function ToolbarRoot(props) {
 }
 ToolbarRoot.displayName = "ToolbarRoot";
 function ToolbarButton(props) {
-  const { children, className, disabled = false, onClick } = props;
+  const { children, className, disabled = false, ...consumerProps } = props;
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ...consumerProps,
       "aria-disabled": disabled || void 0,
-      "data-uiify-toolbar-item": "",
+      "data-part": "item",
+      "data-uiify-toolbar": "",
       disabled,
       type: "button",
       ...className ? { className } : {},
-      ...onClick ? { onClick } : {},
       children
     }
   );
 }
 ToolbarButton.displayName = "ToolbarButton";
 function ToolbarLink(props) {
-  const { children, className, href } = props;
-  return /* @__PURE__ */ jsx("a", { "data-uiify-toolbar-item": "", href, ...className ? { className } : {}, children });
+  const { children, className, href, ...consumerProps } = props;
+  return /* @__PURE__ */ jsx("a", { ...consumerProps, className, "data-part": "item", "data-uiify-toolbar": "", href, children });
 }
 ToolbarLink.displayName = "ToolbarLink";
 function ToolbarSeparator(props) {
@@ -52,6 +54,7 @@ function ToolbarSeparator(props) {
       ...consumerProps,
       ...className ? { className } : {},
       "aria-orientation": orientation,
+      "data-part": "separator",
       "data-orientation": orientation
     }
   );

package/dist/components/toolbar/ToolbarShell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/toolbar/ToolbarShell.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { ToggleGroup } from \"../toggle-group/ToggleGroup.js\";\nimport type {\n ToolbarRootProps,\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarSeparatorProps,\n ToolbarToggleGroupProps,\n} from \"./types.js\";\n\nexport function ToolbarRoot(props: ToolbarRootProps): ReactElement \| null {\n const {\n children,\n className,\n dir,\n loop: _loop = true,\n orientation = \"horizontal\",\n ...consumerProps\n } = props;\n\n return (\n <div\n {...consumerProps}\n className={className}\n data-orientation={orientation}\n data-uiify-toolbar=\"\"\n dir={dir}\n role=\"toolbar\"\n >\n {children}\n </div>\n );\n}\nToolbarRoot.displayName = \"ToolbarRoot\";\n\nexport function ToolbarButton(props: ToolbarButtonProps): ReactElement \| null {\n const { children, className, disabled = false, ~~onClick~~ } = props;\n\n return (\n <button\n aria-disabled={disabled \|\| undefined}\n data-uiify-toolbar~~-item~~=\"\"\n disabled={disabled}\n type=\"button\"\n {...(className ? { className } : {})}\n ~~{...(onClick ? { onClick } : {})}\n~~ >\n {children}\n </button>\n );\n}\nToolbarButton.displayName = \"ToolbarButton\";\n\nexport function ToolbarLink(props: ToolbarLinkProps): ReactElement \| null {\n const { children, className, href } = props;\n\n return (\n <a data-uiify-toolbar~~-item~~=\"\" href={href} ~~{...(className ? { className } : {})}~~>\n {children}\n </a>\n );\n}\nToolbarLink.displayName = \"ToolbarLink\";\n\nexport function ToolbarSeparator(props: ToolbarSeparatorProps): ReactElement \| null {\n const { className, orientation = \"vertical\", ...consumerProps } = props;\n return (\n <hr\n {...consumerProps}\n {...(className ? { className } : {})}\n aria-orientation={orientation}\n data-orientation={orientation}\n />\n );\n}\nToolbarSeparator.displayName = \"ToolbarSeparator\";\n\nexport function ToolbarToggleGroupRoot(props: ToolbarToggleGroupProps): ReactElement \| null {\n return <ToggleGroup {...props} />;\n}\nToolbarToggleGroupRoot.displayName = \"ToolbarToggleGroupRoot\";\n\nexport const ToolbarToggleGroup = ToolbarToggleGroupRoot;\n\nexport const Toolbar = {\n Button: ToolbarButton,\n Link: ToolbarLink,\n Root: ToolbarRoot,\n Separator: ToolbarSeparator,\n ToggleGroup: ToolbarToggleGroup,\n};\n"],"mappings":"AAqBI;AApBJ,SAAS,mBAAmB;AASrB,SAAS,YAAY,OAA8C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,QAAQ;AAAA,IACd,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,oBAAkB;AAAA,MAClB,sBAAmB;AAAA,MACnB;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AACA,YAAY,cAAc;AAEnB,SAAS,cAAc,OAAgD;AAC5E,QAAM,EAAE,UAAU,WAAW,WAAW,OAAO,~~QAAQ~~,IAAI;~~AAE3D~~,SACE;AAAA,IAAC;AAAA;AAAA,~~MACC~~,iBAAe,YAAY;AAAA,MAC3B,~~2BAAwB~~;AAAA,~~MACxB~~;AAAA,MACA,MAAK;AAAA,MACJ,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,~~MACjC,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC~~;AAAA~~,MAE7B~~;AAAA~~;AAAA~~,EACH;AAEJ;AACA,cAAc,cAAc;AAErB,SAAS,YAAY,OAA8C;AACxE,QAAM,EAAE,UAAU,WAAW,~~KAAK~~,IAAI;~~AAEtC~~,SACE,oBAAC,~~OAAE~~,~~2BAAwB~~,~~IAAG~~,~~MAAa~~,~~GAAI~~,~~YAAY~~,~~EAAE~~,~~UAAU~~,~~IAAI~~,~~CAAC,GACzE,~~UACH;AAEJ;AACA,YAAY,cAAc;AAEnB,SAAS,iBAAiB,OAAmD;AAClF,QAAM,EAAE,WAAW,cAAc,YAAY,GAAG,cAAc,IAAI;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MAClC,oBAAkB;AAAA,MAClB,oBAAkB;AAAA;AAAA,EACpB;AAEJ;AACA,iBAAiB,cAAc;AAExB,SAAS,uBAAuB,OAAqD;AAC1F,SAAO,oBAAC,eAAa,GAAG,OAAO;AACjC;AACA,uBAAuB,cAAc;AAE9B,MAAM,qBAAqB;AAE3B,MAAM,UAAU;AAAA,EACrB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/toolbar/ToolbarShell.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { ToggleGroup } from \"../toggle-group/ToggleGroup.js\";\nimport type {\n ToolbarRootProps,\n ToolbarButtonProps,\n ToolbarLinkProps,\n ToolbarSeparatorProps,\n ToolbarToggleGroupProps,\n} from \"./types.js\";\n\nexport function ToolbarRoot(props: ToolbarRootProps): ReactElement \| null {\n const {\n children,\n className,\n dir,\n loop: _loop = true,\n orientation = \"horizontal\",\n ...consumerProps\n } = props;\n\n return (\n <div\n {...consumerProps}\n className={className}\n data-orientation={orientation}\n data-part=\"root\"\n data-uiify-toolbar=\"\"\n dir={dir}\n role=\"toolbar\"\n >\n {children}\n </div>\n );\n}\nToolbarRoot.displayName = \"ToolbarRoot\";\n\nexport function ToolbarButton(props: ToolbarButtonProps): ReactElement \| null {\n const { children, className, disabled = false, ...consumerProps } = props;\n\n return (\n <button\n {...consumerProps}\n aria-disabled={disabled \|\| undefined}\n data-part=\"item\"\n data-uiify-toolbar=\"\"\n disabled={disabled}\n type=\"button\"\n {...(className ? { className } : {})}\n >\n {children}\n </button>\n );\n}\nToolbarButton.displayName = \"ToolbarButton\";\n\nexport function ToolbarLink(props: ToolbarLinkProps): ReactElement \| null {\n const { children, className, href, ...consumerProps } = props;\n\n return (\n <a {...consumerProps} className={className} data-part=\"item\" data-uiify-toolbar=\"\" href={href}>\n {children}\n </a>\n );\n}\nToolbarLink.displayName = \"ToolbarLink\";\n\nexport function ToolbarSeparator(props: ToolbarSeparatorProps): ReactElement \| null {\n const { className, orientation = \"vertical\", ...consumerProps } = props;\n return (\n <hr\n {...consumerProps}\n {...(className ? { className } : {})}\n aria-orientation={orientation}\n data-part=\"separator\"\n data-orientation={orientation}\n />\n );\n}\nToolbarSeparator.displayName = \"ToolbarSeparator\";\n\nexport function ToolbarToggleGroupRoot(props: ToolbarToggleGroupProps): ReactElement \| null {\n return <ToggleGroup {...props} />;\n}\nToolbarToggleGroupRoot.displayName = \"ToolbarToggleGroupRoot\";\n\nexport const ToolbarToggleGroup = ToolbarToggleGroupRoot;\n\nexport const Toolbar = {\n Button: ToolbarButton,\n Link: ToolbarLink,\n Root: ToolbarRoot,\n Separator: ToolbarSeparator,\n ToggleGroup: ToolbarToggleGroup,\n};\n"],"mappings":"AAqBI;AApBJ,SAAS,mBAAmB;AASrB,SAAS,YAAY,OAA8C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,QAAQ;AAAA,IACd,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,oBAAkB;AAAA,MAClB,aAAU;AAAA,MACV,sBAAmB;AAAA,MACnB;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AACA,YAAY,cAAc;AAEnB,SAAS,cAAc,OAAgD;AAC5E,QAAM,EAAE,UAAU,WAAW,WAAW,OAAO,GAAG,cAAc,IAAI;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,aAAU;AAAA,MACV,sBAAmB;AAAA,MACnB;AAAA,MACA,MAAK;AAAA,MACJ,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MAEjC;AAAA;AAAA,EACH;AAEJ;AACA,cAAc,cAAc;AAErB,SAAS,YAAY,OAA8C;AACxE,QAAM,EAAE,UAAU,WAAW,MAAM,GAAG,cAAc,IAAI;AAExD,SACE,oBAAC,OAAG,GAAG,eAAe,WAAsB,aAAU,QAAO,sBAAmB,IAAG,MAChF,UACH;AAEJ;AACA,YAAY,cAAc;AAEnB,SAAS,iBAAiB,OAAmD;AAClF,QAAM,EAAE,WAAW,cAAc,YAAY,GAAG,cAAc,IAAI;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;AAAA,MAClC,oBAAkB;AAAA,MAClB,aAAU;AAAA,MACV,oBAAkB;AAAA;AAAA,EACpB;AAEJ;AACA,iBAAiB,cAAc;AAExB,SAAS,uBAAuB,OAAqD;AAC1F,SAAO,oBAAC,eAAa,GAAG,OAAO;AACjC;AACA,uBAAuB,cAAc;AAE9B,MAAM,qBAAqB;AAE3B,MAAM,UAAU;AAAA,EACrB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;","names":[]}

package/dist/components/tooltip/Tooltip.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,WAAW,EAIX,YAAY,EACb,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EAEvB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAwBpB,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAYnF;yBAZe,eAAe;;;AAe/B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CA4BxE;yBA5Be,WAAW;;;AA+B3B,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC/D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAkErB;AAED,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC5D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,~~CA8ErB~~;AAED,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC"}
1	+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,WAAW,EAIX,YAAY,EACb,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EAEvB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAwBpB,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAYnF;yBAZe,eAAe;;;AAe/B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CA4BxE;yBA5Be,WAAW;;;AA+B3B,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC/D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAkErB;AAED,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC5D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAgFrB;AAED,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC"}

package/dist/components/tooltip/Tooltip.js CHANGED Viewed

@@ -159,6 +159,8 @@ function TooltipContent(props) {
       // The consumer's own non-empty `id` wins; otherwise the context-generated id is used.
       id: resolvedId,
       role: "tooltip",
+      "data-part": "content",
+      "data-uiify-tooltip": "",
       "data-state": open ? "open" : "closed",
       ...className ? { className } : {},
       onPointerEnter: composeEventHandlers(consumerOnPointerEnter, () => {

package/dist/components/tooltip/Tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport type {\n CSSProperties,\n ElementType,\n FocusEvent,\n KeyboardEvent,\n PointerEvent,\n ReactElement,\n} from \"react\";\nimport { useIsomorphicLayoutEffect, useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport {\n createAnchorPositionerProps,\n createAnchorTriggerProps,\n anchorNameForId,\n} from \"@gunkin/uiify/core/anchor-position\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport {\n createPartContext,\n splitRef,\n useHoverOverlay,\n type HoverIntentStore,\n} from \"@gunkin/uiify/core\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { CONTENT_HOVER_GRACE_MS, createTooltipProviderStore } from \"./tooltip-store.js\";\nimport type {\n TooltipContentProps,\n TooltipProviderOwnProps,\n TooltipProviderStore,\n TooltipRootProps,\n TooltipTriggerProps,\n} from \"./types.js\";\n\ninterface TooltipClientContextValue {\n readonly anchorId: string;\n readonly closeTooltip: () => void;\n readonly contentId: string;\n readonly intent: HoverIntentStore;\n readonly open: boolean;\n readonly openTooltip: (immediate?: boolean) => void;\n readonly pointerFocusRef: React.RefObject<boolean>;\n readonly setContentId: (id: string) => void;\n}\n\nconst [TooltipProviderStoreProvider, useTooltipProviderStore] =\n createPartContext<TooltipProviderStore>(\"Tooltip\", \"Provider\");\n\n// Root name \"Root\" (the default): Trigger/Content require <Tooltip.Root>, a\n// distinct nesting requirement from TooltipRoot itself requiring\n// <Tooltip.Provider> above. Keeping the two contexts' root names accurate\n// (rather than pointing both at \"Provider\") preserves the original's\n// correct, non-misleading error for the \"Trigger without Root\" case.\nconst [TooltipContextProvider, useTooltipContext] =\n createPartContext<TooltipClientContextValue>(\"Tooltip\");\n\nexport function TooltipProvider(props: TooltipProviderOwnProps): ReactElement \| null {\n const { children, delayDuration = 300, skipDelayDuration = 300 } = props;\n const storeRef = useRef<TooltipProviderStore \| null>(null);\n storeRef.current ??= createTooltipProviderStore({ delayDuration, skipDelayDuration });\n\n useIsomorphicLayoutEffect(() => {\n storeRef.current?.updateOptions({ delayDuration, skipDelayDuration });\n }, [delayDuration, skipDelayDuration]);\n\n return (\n <TooltipProviderStoreProvider value={storeRef.current}>{children}</TooltipProviderStoreProvider>\n );\n}\nTooltipProvider.displayName = \"TooltipProvider\";\n\nexport function TooltipRoot(props: TooltipRootProps): ReactElement \| null {\n const { children, defaultOpen = false, id, onOpenChange, open } = props;\n const provider = useTooltipProviderStore(\"Root\");\n const pointerFocusRef = useRef(false);\n const overlay = useHoverOverlay({\n closeDelay: CONTENT_HOVER_GRACE_MS,\n ...(defaultOpen !== undefined ? { defaultOpen } : {}),\n ...(id !== undefined ? { id } : {}),\n idPrefix: \"uiify-tooltip\",\n ...(onOpenChange ? { onOpenChange } : {}),\n onOpened: provider.markOpened,\n ...(open !== undefined ? { open } : {}),\n openDelay: provider.getDelayDuration(),\n shouldSkipDelay: provider.shouldSkipDelay,\n });\n\n const contextValue: TooltipClientContextValue = {\n anchorId: overlay.anchorId,\n closeTooltip: overlay.closeOverlay,\n contentId: overlay.contentId,\n intent: overlay.intent,\n open: overlay.open,\n openTooltip: overlay.openOverlay,\n pointerFocusRef,\n setContentId: overlay.setContentId,\n };\n\n return <TooltipContextProvider value={contextValue}>{children}</TooltipContextProvider>;\n}\nTooltipRoot.displayName = \"TooltipRoot\";\n\nexport function TooltipTrigger<TAs extends ElementType = \"button\">(\n props: TooltipTriggerProps<TAs>,\n): ReactElement \| null {\n const { as, render, className, ...consumerProps } = props as TooltipTriggerProps<\"button\">;\n const { anchorId, closeTooltip, contentId, intent, open, openTooltip, pointerFocusRef } =\n useTooltipContext(\"Trigger\");\n const nativeButton = !as \|\| as === \"button\";\n const consumerStyle = (consumerProps as { style?: CSSProperties }).style;\n const anchorProps = {\n ...createAnchorTriggerProps(anchorNameForId(anchorId)),\n ...(consumerStyle ? { style: consumerStyle } : {}),\n };\n const {\n onBlur: consumerOnBlur,\n onFocus: consumerOnFocus,\n onKeyDown: consumerOnKeyDown,\n onPointerDown: consumerOnPointerDown,\n onPointerEnter: consumerOnPointerEnter,\n onPointerLeave: consumerOnPointerLeave,\n } = consumerProps as {\n onBlur?: (event: FocusEvent<HTMLElement>) => void;\n onFocus?: (event: FocusEvent<HTMLElement>) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n onPointerDown?: (event: PointerEvent<HTMLElement>) => void;\n onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n };\n\n return useRenderElement({\n as,\n defaultTag: \"button\",\n props: {\n ...consumerProps,\n ...anchorProps,\n \"aria-describedby\": open ? contentId : undefined,\n ...(nativeButton ? { type: \"button\" } : {}),\n ...(className ? { className } : {}),\n onBlur: composeEventHandlers(consumerOnBlur, () => {\n closeTooltip();\n }),\n onFocus: composeEventHandlers(consumerOnFocus, () => {\n if (!pointerFocusRef.current) openTooltip(true);\n pointerFocusRef.current = false;\n }),\n onKeyDown: composeEventHandlers(consumerOnKeyDown, (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Escape\") closeTooltip();\n }),\n onPointerDown: composeEventHandlers(consumerOnPointerDown, () => {\n pointerFocusRef.current = true;\n }),\n onPointerEnter: composeEventHandlers(\n consumerOnPointerEnter,\n (event: PointerEvent<HTMLElement>) => {\n if (event.pointerType === \"mouse\") openTooltip(false);\n },\n ),\n onPointerLeave: composeEventHandlers(\n consumerOnPointerLeave,\n (event: PointerEvent<HTMLElement>) => {\n if (event.pointerType === \"mouse\") {\n intent.scheduleClose(() => closeTooltip());\n }\n },\n ),\n },\n render,\n state: { open },\n });\n}\n\nexport function TooltipContent<TAs extends ElementType = \"div\">(\n props: TooltipContentProps<TAs>,\n): ReactElement \| null {\n const {\n align = \"center\",\n as,\n render,\n className,\n side = \"bottom\",\n ...consumerProps\n } = props as TooltipContentProps<\"div\">;\n const { anchorId, closeTooltip, contentId, intent, open, setContentId } =\n useTooltipContext(\"Content\");\n const [consumerRef, domProps] = splitRef<HTMLElement, typeof consumerProps>(consumerProps);\n const popupRef = useRef<HTMLElement \| null>(null);\n const mergedRef = useMergedRefs(popupRef, consumerRef);\n const consumerDomProps = domProps as { id?: string; style?: CSSProperties };\n const resolvedId =\n typeof consumerDomProps.id === \"string\" && consumerDomProps.id.length > 0\n ? consumerDomProps.id\n : contentId;\n const consumerStyle = consumerDomProps.style;\n\n useIsomorphicLayoutEffect(() => {\n setContentId(resolvedId);\n }, [resolvedId, setContentId]);\n\n // Same technique as core/use-popover.ts: guard with .matches(\":popover-open\")\n // so a StrictMode double-invoke or an unrelated re-run doesn't call\n // showPopover/hidePopover on a popover already in that state (both throw).\n // try/catch covers the node having disconnected between render and effect.\n useIsomorphicLayoutEffect(() => {\n const popup = popupRef.current;\n if (!popup) return;\n try {\n if (open && !popup.matches(\":popover-open\")) popup.showPopover();\n if (!open && popup.matches(\":popover-open\")) popup.hidePopover();\n } catch {\n // The node may have disconnected between render and layout effect.\n }\n }, [open]);\n\n const { onPointerEnter: consumerOnPointerEnter, onPointerLeave: consumerOnPointerLeave } =\n domProps as {\n onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n };\n\n return useRenderElement({\n as,\n defaultTag: \"div\",\n props: {\n ...domProps,\n ...createAnchorPositionerProps({\n align,\n anchorName: anchorNameForId(anchorId),\n side,\n }),\n ...(consumerStyle ? { style: consumerStyle } : {}),\n ref: mergedRef,\n popover: \"manual\",\n // The consumer's own non-empty `id` wins (computed above as `resolvedId`); otherwise the\n // The consumer's own non-empty `id` wins; otherwise the context-generated id is used.\n id: resolvedId,\n role: \"tooltip\",\n \"data-state\": open ? \"open\" : \"closed\",\n ...(className ? { className } : {}),\n onPointerEnter: composeEventHandlers(consumerOnPointerEnter, () => {\n intent.clearCloseTimer();\n }),\n onPointerLeave: composeEventHandlers(\n consumerOnPointerLeave,\n (event: PointerEvent<HTMLElement>) => {\n if (event.pointerType === \"mouse\") closeTooltip();\n },\n ),\n },\n render,\n state: { open, positioning: \"native\" as const },\n });\n}\n\nexport const Tooltip = {\n Content: TooltipContent,\n Provider: TooltipProvider,\n Root: TooltipRoot,\n Trigger: TooltipTrigger,\n};\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport type {\n CSSProperties,\n ElementType,\n FocusEvent,\n KeyboardEvent,\n PointerEvent,\n ReactElement,\n} from \"react\";\nimport { useIsomorphicLayoutEffect, useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport {\n createAnchorPositionerProps,\n createAnchorTriggerProps,\n anchorNameForId,\n} from \"@gunkin/uiify/core/anchor-position\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport {\n createPartContext,\n splitRef,\n useHoverOverlay,\n type HoverIntentStore,\n} from \"@gunkin/uiify/core\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { CONTENT_HOVER_GRACE_MS, createTooltipProviderStore } from \"./tooltip-store.js\";\nimport type {\n TooltipContentProps,\n TooltipProviderOwnProps,\n TooltipProviderStore,\n TooltipRootProps,\n TooltipTriggerProps,\n} from \"./types.js\";\n\ninterface TooltipClientContextValue {\n readonly anchorId: string;\n readonly closeTooltip: () => void;\n readonly contentId: string;\n readonly intent: HoverIntentStore;\n readonly open: boolean;\n readonly openTooltip: (immediate?: boolean) => void;\n readonly pointerFocusRef: React.RefObject<boolean>;\n readonly setContentId: (id: string) => void;\n}\n\nconst [TooltipProviderStoreProvider, useTooltipProviderStore] =\n createPartContext<TooltipProviderStore>(\"Tooltip\", \"Provider\");\n\n// Root name \"Root\" (the default): Trigger/Content require <Tooltip.Root>, a\n// distinct nesting requirement from TooltipRoot itself requiring\n// <Tooltip.Provider> above. Keeping the two contexts' root names accurate\n// (rather than pointing both at \"Provider\") preserves the original's\n// correct, non-misleading error for the \"Trigger without Root\" case.\nconst [TooltipContextProvider, useTooltipContext] =\n createPartContext<TooltipClientContextValue>(\"Tooltip\");\n\nexport function TooltipProvider(props: TooltipProviderOwnProps): ReactElement \| null {\n const { children, delayDuration = 300, skipDelayDuration = 300 } = props;\n const storeRef = useRef<TooltipProviderStore \| null>(null);\n storeRef.current ??= createTooltipProviderStore({ delayDuration, skipDelayDuration });\n\n useIsomorphicLayoutEffect(() => {\n storeRef.current?.updateOptions({ delayDuration, skipDelayDuration });\n }, [delayDuration, skipDelayDuration]);\n\n return (\n <TooltipProviderStoreProvider value={storeRef.current}>{children}</TooltipProviderStoreProvider>\n );\n}\nTooltipProvider.displayName = \"TooltipProvider\";\n\nexport function TooltipRoot(props: TooltipRootProps): ReactElement \| null {\n const { children, defaultOpen = false, id, onOpenChange, open } = props;\n const provider = useTooltipProviderStore(\"Root\");\n const pointerFocusRef = useRef(false);\n const overlay = useHoverOverlay({\n closeDelay: CONTENT_HOVER_GRACE_MS,\n ...(defaultOpen !== undefined ? { defaultOpen } : {}),\n ...(id !== undefined ? { id } : {}),\n idPrefix: \"uiify-tooltip\",\n ...(onOpenChange ? { onOpenChange } : {}),\n onOpened: provider.markOpened,\n ...(open !== undefined ? { open } : {}),\n openDelay: provider.getDelayDuration(),\n shouldSkipDelay: provider.shouldSkipDelay,\n });\n\n const contextValue: TooltipClientContextValue = {\n anchorId: overlay.anchorId,\n closeTooltip: overlay.closeOverlay,\n contentId: overlay.contentId,\n intent: overlay.intent,\n open: overlay.open,\n openTooltip: overlay.openOverlay,\n pointerFocusRef,\n setContentId: overlay.setContentId,\n };\n\n return <TooltipContextProvider value={contextValue}>{children}</TooltipContextProvider>;\n}\nTooltipRoot.displayName = \"TooltipRoot\";\n\nexport function TooltipTrigger<TAs extends ElementType = \"button\">(\n props: TooltipTriggerProps<TAs>,\n): ReactElement \| null {\n const { as, render, className, ...consumerProps } = props as TooltipTriggerProps<\"button\">;\n const { anchorId, closeTooltip, contentId, intent, open, openTooltip, pointerFocusRef } =\n useTooltipContext(\"Trigger\");\n const nativeButton = !as \|\| as === \"button\";\n const consumerStyle = (consumerProps as { style?: CSSProperties }).style;\n const anchorProps = {\n ...createAnchorTriggerProps(anchorNameForId(anchorId)),\n ...(consumerStyle ? { style: consumerStyle } : {}),\n };\n const {\n onBlur: consumerOnBlur,\n onFocus: consumerOnFocus,\n onKeyDown: consumerOnKeyDown,\n onPointerDown: consumerOnPointerDown,\n onPointerEnter: consumerOnPointerEnter,\n onPointerLeave: consumerOnPointerLeave,\n } = consumerProps as {\n onBlur?: (event: FocusEvent<HTMLElement>) => void;\n onFocus?: (event: FocusEvent<HTMLElement>) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n onPointerDown?: (event: PointerEvent<HTMLElement>) => void;\n onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n };\n\n return useRenderElement({\n as,\n defaultTag: \"button\",\n props: {\n ...consumerProps,\n ...anchorProps,\n \"aria-describedby\": open ? contentId : undefined,\n ...(nativeButton ? { type: \"button\" } : {}),\n ...(className ? { className } : {}),\n onBlur: composeEventHandlers(consumerOnBlur, () => {\n closeTooltip();\n }),\n onFocus: composeEventHandlers(consumerOnFocus, () => {\n if (!pointerFocusRef.current) openTooltip(true);\n pointerFocusRef.current = false;\n }),\n onKeyDown: composeEventHandlers(consumerOnKeyDown, (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Escape\") closeTooltip();\n }),\n onPointerDown: composeEventHandlers(consumerOnPointerDown, () => {\n pointerFocusRef.current = true;\n }),\n onPointerEnter: composeEventHandlers(\n consumerOnPointerEnter,\n (event: PointerEvent<HTMLElement>) => {\n if (event.pointerType === \"mouse\") openTooltip(false);\n },\n ),\n onPointerLeave: composeEventHandlers(\n consumerOnPointerLeave,\n (event: PointerEvent<HTMLElement>) => {\n if (event.pointerType === \"mouse\") {\n intent.scheduleClose(() => closeTooltip());\n }\n },\n ),\n },\n render,\n state: { open },\n });\n}\n\nexport function TooltipContent<TAs extends ElementType = \"div\">(\n props: TooltipContentProps<TAs>,\n): ReactElement \| null {\n const {\n align = \"center\",\n as,\n render,\n className,\n side = \"bottom\",\n ...consumerProps\n } = props as TooltipContentProps<\"div\">;\n const { anchorId, closeTooltip, contentId, intent, open, setContentId } =\n useTooltipContext(\"Content\");\n const [consumerRef, domProps] = splitRef<HTMLElement, typeof consumerProps>(consumerProps);\n const popupRef = useRef<HTMLElement \| null>(null);\n const mergedRef = useMergedRefs(popupRef, consumerRef);\n const consumerDomProps = domProps as { id?: string; style?: CSSProperties };\n const resolvedId =\n typeof consumerDomProps.id === \"string\" && consumerDomProps.id.length > 0\n ? consumerDomProps.id\n : contentId;\n const consumerStyle = consumerDomProps.style;\n\n useIsomorphicLayoutEffect(() => {\n setContentId(resolvedId);\n }, [resolvedId, setContentId]);\n\n // Same technique as core/use-popover.ts: guard with .matches(\":popover-open\")\n // so a StrictMode double-invoke or an unrelated re-run doesn't call\n // showPopover/hidePopover on a popover already in that state (both throw).\n // try/catch covers the node having disconnected between render and effect.\n useIsomorphicLayoutEffect(() => {\n const popup = popupRef.current;\n if (!popup) return;\n try {\n if (open && !popup.matches(\":popover-open\")) popup.showPopover();\n if (!open && popup.matches(\":popover-open\")) popup.hidePopover();\n } catch {\n // The node may have disconnected between render and layout effect.\n }\n }, [open]);\n\n const { onPointerEnter: consumerOnPointerEnter, onPointerLeave: consumerOnPointerLeave } =\n domProps as {\n onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n };\n\n return useRenderElement({\n as,\n defaultTag: \"div\",\n props: {\n ...domProps,\n ...createAnchorPositionerProps({\n align,\n anchorName: anchorNameForId(anchorId),\n side,\n }),\n ...(consumerStyle ? { style: consumerStyle } : {}),\n ref: mergedRef,\n popover: \"manual\",\n // The consumer's own non-empty `id` wins (computed above as `resolvedId`); otherwise the\n // The consumer's own non-empty `id` wins; otherwise the context-generated id is used.\n id: resolvedId,\n role: \"tooltip\",\n \"data-part\": \"content\",\n \"data-uiify-tooltip\": \"\",\n \"data-state\": open ? \"open\" : \"closed\",\n ...(className ? { className } : {}),\n onPointerEnter: composeEventHandlers(consumerOnPointerEnter, () => {\n intent.clearCloseTimer();\n }),\n onPointerLeave: composeEventHandlers(\n consumerOnPointerLeave,\n (event: PointerEvent<HTMLElement>) => {\n if (event.pointerType === \"mouse\") closeTooltip();\n },\n ),\n },\n render,\n state: { open, positioning: \"native\" as const },\n });\n}\n\nexport const Tooltip = {\n Content: TooltipContent,\n Provider: TooltipProvider,\n Root: TooltipRoot,\n Trigger: TooltipTrigger,\n};\n"],"mappings":"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","names":[]}

package/dist/components/virtual-scroll/VirtualScroll.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VirtualScroll.d.ts","sourceRoot":"","sources":["../../../src/components/virtual-scroll/VirtualScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;~~AAoCf~~,OAAO,KAAK,EAEV,iBAAiB,EACjB,qBAAqB,EAItB,MAAM,YAAY,CAAC;AAwBpB,wBAAgB,aAAa,CAAC,CAAC,SAAS,iBAAiB,EACvD,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,YAAY,~~CAgdd~~;~~yBAlde~~,aAAa"}
1	+ {"version":3,"file":"VirtualScroll.d.ts","sourceRoot":"","sources":["../../../src/components/virtual-scroll/VirtualScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAqCf,OAAO,KAAK,EAEV,iBAAiB,EACjB,qBAAqB,EAItB,MAAM,YAAY,CAAC;AAwBpB,wBAAgB,aAAa,CAAC,CAAC,SAAS,iBAAiB,EACvD,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,YAAY,CA4cd;yBA9ce,aAAa"}

package/dist/components/virtual-scroll/VirtualScroll.js CHANGED Viewed

@@ -10,6 +10,7 @@ import {
 import { flushSync } from "react-dom";
 import { useResizeObserver } from "@gunkin/uiify/hooks";
 import { resolveVirtualScrollAnchorAdjustment } from "./virtual-scroll-anchor.js";
+import { readScrollOffset, writeScrollOffset } from "./virtual-scroll-axis.js";
 import {
   createVirtualScrollIosScroll,
   detectTouchScrollEnvironment
@@ -64,6 +65,7 @@ function VirtualScroll(props) {
     items,
     height = 600,
     rowHeight = VIRTUAL_SCROLL_ROW_HEIGHT,
+    orientation = "vertical",
     overscan = VIRTUAL_SCROLL_OVERSCAN,
     className,
     testId,
@@ -78,8 +80,9 @@ function VirtualScroll(props) {
     isScrollingResetDelay = VIRTUAL_SCROLL_SCROLL_RESET_DELAY
   } = props;
   const dynamicLayout = estimateRowHeight !== void 0;
+  const horizontal = orientation === "horizontal";
   const ref = useRef(null);
-  const scrollTopRef = useRef(0);
+  const scrollOffsetRef = useRef(0);
   const itemsRef = useRef(items);
   itemsRef.current = items;
   const smoothRafRef = useRef(0);
@@ -94,7 +97,7 @@ function VirtualScroll(props) {
   const [rangeVersion, setRangeVersion] = useState(0);
   const [measurementVersion, setMeasurementVersion] = useState(0);
   const measuredSize = useResizeObserver(ref);
-  const viewportHeight = measuredSize?.height ?? height;
+  const viewportSize = (horizontal ? measuredSize?.width : measuredSize?.height) ?? height;
   const measurementStoreRef = useRef(
     createVirtualScrollMeasurementStore({
       itemCount: items.length,
@@ -108,29 +111,31 @@ function VirtualScroll(props) {
   const scrollOptionsRef = useRef({
     dynamicLayout,
     itemCount: items.length,
+    orientation,
     overscan,
     rowHeight,
-    viewportHeight
+    viewportSize
   });
   scrollOptionsRef.current = {
     dynamicLayout,
     itemCount: items.length,
+    orientation,
     overscan,
     rowHeight,
-    viewportHeight
+    viewportSize
   };
   const onRangeChangeRef = useRef(onRangeChange);
   onRangeChangeRef.current = onRangeChange;
   const onScrollStateChangeRef = useRef(onScrollStateChange);
   onScrollStateChangeRef.current = onScrollStateChange;
   const computeRange = () => {
-    const { dynamicLayout: dynamicLayout2, itemCount, overscan: overscan2, rowHeight: rowHeight2, viewportHeight: viewportHeight2 } = scrollOptionsRef.current;
-    const scrollTop = scrollTopRef.current;
+    const { dynamicLayout: dynamicLayout2, itemCount, overscan: overscan2, rowHeight: rowHeight2, viewportSize: viewportSize2 } = scrollOptionsRef.current;
+    const scrollTop = scrollOffsetRef.current;
     if (dynamicLayout2) {
       const store = measurementStoreRef.current;
       return computeDynamicVirtualScrollRange({
         scrollTop,
-        viewportHeight: viewportHeight2,
+        viewportHeight: viewportSize2,
         itemCount,
         overscan: overscan2,
         findStartIndex: store.findStartIndex,
@@ -140,7 +145,7 @@ function VirtualScroll(props) {
     }
     return computeVirtualScrollRange({
       scrollTop,
-      viewportHeight: viewportHeight2,
+      viewportHeight: viewportSize2,
       itemCount,
       rowHeight: rowHeight2,
       overscan: overscan2
@@ -160,19 +165,19 @@ function VirtualScroll(props) {
   syncRangeFromScrollRef.current = () => {
     const element = ref.current;
     if (!element) return;
-    const scrollTop = element.scrollTop;
+    const scrollOffset = readScrollOffset(element, scrollOptionsRef.current.orientation);
     const previousRange = computeRange();
-    scrollTopRef.current = scrollTop;
+    scrollOffsetRef.current = scrollOffset;
     const nextRange = computeRange();
     if (rangesEqual(previousRange, nextRange)) return;
     emitRangeChange(nextRange);
-    const { dynamicLayout: dynamicLayout2, itemCount, viewportHeight: viewportHeight2, rowHeight: rowHeight2, overscan: overscan2 } = scrollOptionsRef.current;
+    const { dynamicLayout: dynamicLayout2, itemCount, viewportSize: viewportSize2, rowHeight: rowHeight2, overscan: overscan2 } = scrollOptionsRef.current;
     const slotCount2 = computeActiveVirtualScrollSlotCount(
       itemCount,
       nextRange.start,
       Math.max(
         nextRange.end - nextRange.start,
-        computeVirtualScrollSlotCount(viewportHeight2, rowHeight2, overscan2)
+        computeVirtualScrollSlotCount(viewportSize2, rowHeight2, overscan2)
       )
     );
     const store = measurementStoreRef.current;
@@ -196,7 +201,8 @@ function VirtualScroll(props) {
   applyScrollDeltaRef.current = (delta) => {
     const element = ref.current;
     if (!element || delta === 0) return;
-    element.scrollTop += delta;
+    const { orientation: orientation2 } = scrollOptionsRef.current;
+    writeScrollOffset(element, orientation2, readScrollOffset(element, orientation2) + delta, "auto");
     syncRangeFromScrollRef.current();
   };
   const applyScrollOffset = (offset, behavior) => {
@@ -204,15 +210,10 @@ function VirtualScroll(props) {
     if (!element) return;
     const store = measurementStoreRef.current;
     const totalSize2 = dynamicLayout ? store.getTotalSize() : items.length * rowHeight;
-    const clamped = clampScrollOffset(offset, totalSize2, viewportHeight);
-    const resolved = resolveScrollBehavior(behavior);
-    if (typeof element.scrollTo === "function") {
-      element.scrollTo({ top: clamped, behavior: resolved });
-    } else {
-      element.scrollTop = clamped;
-    }
+    const clamped = clampScrollOffset(offset, totalSize2, viewportSize);
+    writeScrollOffset(element, orientation, clamped, resolveScrollBehavior(behavior));
     syncRangeFromScrollRef.current();
-    if (isSmoothScrollActive(behavior ?? "auto", element.scrollTop, clamped)) {
+    if (isSmoothScrollActive(behavior ?? "auto", readScrollOffset(element, orientation), clamped)) {
       if (smoothRafRef.current !== 0) cancelAnimationFrame(smoothRafRef.current);
       const tick = () => {
         syncRangeFromScrollRef.current();
@@ -221,7 +222,7 @@ function VirtualScroll(props) {
           smoothRafRef.current = 0;
           return;
         }
-        if (isSmoothScrollActive("smooth", node.scrollTop, clamped)) {
+        if (isSmoothScrollActive("smooth", readScrollOffset(node, orientation), clamped)) {
           smoothRafRef.current = requestAnimationFrame(tick);
           return;
         }
@@ -253,8 +254,8 @@ function VirtualScroll(props) {
           index,
           normalized.align,
           metrics,
-          scrollOptionsRef.current.viewportHeight,
-          scrollTopRef.current
+          scrollOptionsRef.current.viewportSize,
+          scrollOffsetRef.current
         );
         applyScrollOffsetRef.current(offset, normalized.behavior);
       },
@@ -264,7 +265,7 @@ function VirtualScroll(props) {
       scrollToEnd(options) {
         const store = measurementStoreRef.current;
         const totalSize2 = dynamicLayout ? store.getTotalSize() : scrollOptionsRef.current.itemCount * scrollOptionsRef.current.rowHeight;
-        const offset = Math.max(0, totalSize2 - scrollOptionsRef.current.viewportHeight);
+        const offset = Math.max(0, totalSize2 - scrollOptionsRef.current.viewportSize);
         applyScrollOffsetRef.current(offset, normalizeScrollBehaviorOptions(options));
       }
     }),
@@ -284,9 +285,9 @@ function VirtualScroll(props) {
     if (items.length === 0) return 0;
     return Math.max(
       range.end - range.start,
-      computeVirtualScrollSlotCount(viewportHeight, rowHeight, overscan)
+      computeVirtualScrollSlotCount(viewportSize, rowHeight, overscan)
     );
-  }, [items.length, overscan, range.end, range.start, rowHeight, viewportHeight]);
+  }, [items.length, overscan, range.end, range.start, rowHeight, viewportSize]);
   const rowSlots = useMemo(
     () => buildRowSlots(items, range.start, slotCount),
     [items, range.start, slotCount]
@@ -297,7 +298,7 @@ function VirtualScroll(props) {
     const rowOffset = store.getRowOffset(index);
     if (!store.setMeasuredHeight(itemId, index, height2)) return;
     const adjustment = computeScrollAdjustmentForRowResize({
-      scrollTop: scrollTopRef.current,
+      scrollTop: scrollOffsetRef.current,
       rowOffset,
       previousHeight,
       nextHeight: height2
@@ -327,12 +328,13 @@ function VirtualScroll(props) {
         if (!Number.isInteger(index)) continue;
         const itemId = itemsRef.current[index]?.id;
         if (itemId === void 0) continue;
-        handleRowMeasureRef.current(index, itemId, entry.contentRect.height);
+        const size = horizontal ? entry.contentRect.width : entry.contentRect.height;
+        handleRowMeasureRef.current(index, itemId, size);
       }
     });
     fragment.observeUsing(observer);
     return () => fragment.unobserveUsing(observer);
-  }, [dynamicLayout]);
+  }, [dynamicLayout, horizontal]);
   useEffect(() => {
     const element = ref.current;
     if (!element) return;
@@ -379,40 +381,33 @@ function VirtualScroll(props) {
     const store = measurementStoreRef.current;
     const nextTotalSize = dynamicLayout ? store.getTotalSize() : items.length * rowHeight;
     const previous = anchorSnapshotRef.current;
+    const scrollOffset = element ? readScrollOffset(element, orientation) : scrollOffsetRef.current;
     const nextSnapshot = {
       firstItemId: items[0]?.id,
       itemCount: items.length,
       totalSize: nextTotalSize,
-      scrollTop: element?.scrollTop ?? scrollTopRef.current
-      // banned-read-ok: anchor snapshot reads native position.
+      scrollTop: scrollOffset
     };
     const adjustment = resolveVirtualScrollAnchorAdjustment({
       anchor,
       followAppend,
-      viewportHeight,
+      viewportHeight: viewportSize,
       previous,
       next: nextSnapshot
     });
     if (adjustment && element) {
-      if (adjustment.behavior === "smooth" && typeof element.scrollTo === "function") {
-        element.scrollTo({
-          top: element.scrollTop + adjustment.delta,
-          // banned-read-ok: retain the anchored viewport.
-          behavior: "smooth"
-        });
-      } else {
-        element.scrollTop += adjustment.delta;
-      }
+      writeScrollOffset(element, orientation, scrollOffset + adjustment.delta, adjustment.behavior);
       syncRangeFromScrollRef.current();
     }
     anchorSnapshotRef.current = nextSnapshot;
-  }, [anchor, followAppend, items, dynamicLayout, rowHeight, viewportHeight]);
+  }, [anchor, followAppend, items, dynamicLayout, orientation, rowHeight, viewportSize]);
   useEffect(() => {
     emitRangeChange(range);
   }, [range]);
   const scrollportStyle = {
     height,
-    overflowY: "auto",
+    overflowX: horizontal ? "auto" : void 0,
+    overflowY: horizontal ? "hidden" : "auto",
     "--uiify-virtual-scroll-count": items.length,
     "--uiify-virtual-scroll-row-height": `${rowHeight}px`,
     ...dynamicLayout ? { "--uiify-virtual-scroll-total-size": `${totalSize}px` } : {}
@@ -426,11 +421,12 @@ function VirtualScroll(props) {
       ref,
       "data-testid": testId,
       "data-uiify-virtual-scroll": "",
-      "data-uiify-dynamic-layout": dynamicLayout ? "" : void 0,
+      "data-dynamic-layout": dynamicLayout ? "" : void 0,
+      "data-orientation": orientation,
       role,
       className,
       style: scrollportStyle,
-      children: /* @__PURE__ */ jsx("div", { "data-uiify-virtual-scroll-spacer": "", style: spacerStyle, children: rowSlots.map((slot) => {
+      children: /* @__PURE__ */ jsx("div", { "data-part": "spacer", style: spacerStyle, children: rowSlots.map((slot) => {
         const store = measurementStoreRef.current;
         const rowOffset = dynamicLayout ? store.getRowOffset(slot.index) : void 0;
         const measuredRowHeight = dynamicLayout ? store.getRowHeight(slot.index) : void 0;