@cratis/components 3.6.1 → 4.1.0

package/dist/esm/Toolbar/ToolbarGroup.js

@@ -2,28 +2,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { useToolbarSlot } from './ToolbarSlot.js';
 
-/** How long the fade-out animation runs (ms). React unmounts exiting content after this. */
 const SLOT_TRANSITION_MS = 220;
-/**
- * Renders slot items with a cross-fade and size-morph transition that mirrors the
- * {@link ToolbarSection} / {@link ToolbarContext} animation:
- *
- * - The slot container resizes smoothly to fit the incoming content.
- * - The outgoing content fades out while the incoming content fades in simultaneously.
- *
- * The size update is intentionally deferred to {@link useEffect} (after paint) so that
- * the opacity animations start one frame before the resize — matching the feel of
- * {@link ToolbarSection} context switching.
- */
-const SlotTransition = ({ slotName, flexClass }) => {
+const SlotTransition = ({ slotName, flexClass, pt, }) => {
     const liveItems = useToolbarSlot(slotName);
-    // `current` is the content fading in (or already settled at full opacity).
-    // `exiting` is the previous content fading out, kept alive until its animation completes.
     const [current, setCurrent] = useState(liveItems);
     const [exiting, setExiting] = useState([]);
     const [exitRevision, setExitRevision] = useState(0);
-    // Track `current` in a ref so the liveItems effect can read the latest value
-    // without needing it in its dependency array (avoids an unnecessary re-run loop).
     const currentRef = useRef(current);
     currentRef.current = current;
     const incomingRef = useRef(null);
@@ -38,11 +22,9 @@ const SlotTransition = ({ slotName, flexClass }) => {
             });
         }
     }, []);
-    // Set the initial size synchronously before the first paint — no layout flash.
     useLayoutEffect(() => {
         measureIncoming();
-    }, []); // mount only
-    // Detect live-items reference change → start cross-fade transition.
+    }, []);
     useEffect(() => {
         if (liveItems === currentRef.current)
             return;
@@ -56,13 +38,10 @@ const SlotTransition = ({ slotName, flexClass }) => {
             timerRef.current = setTimeout(() => setExiting([]), SLOT_TRANSITION_MS);
         }
     }, [liveItems]);
-    // Re-measure the incoming content whenever `current` changes so the container
-    // can size-morph. useEffect (not useLayoutEffect) is intentional: we let the
-    // opacity animation start one frame before the resize — matching ToolbarSection.
     useEffect(() => {
         if (!hasMountedRef.current) {
             hasMountedRef.current = true;
-            return; // initial measurement handled by useLayoutEffect above
+            return;
         }
         measureIncoming();
     }, [current, measureIncoming]);
@@ -72,33 +51,12 @@ const SlotTransition = ({ slotName, flexClass }) => {
     }, []);
     if (current.length === 0 && exiting.length === 0)
         return null;
-    // The section is only clipped while outgoing content is fading out, so it
-    // doesn't bleed outside the container. Once the transition is complete the
-    // section must be overflow:visible so fan-out and folder panels (which are
-    // position:absolute children) can escape the slot section's bounds.
     const transitioningClass = exiting.length > 0 ? 'toolbar-slot-section--transitioning' : '';
-    return (jsxs("div", { className: `toolbar-slot-section ${transitioningClass}`, style: size ? { width: size.width, height: size.height } : undefined, children: [jsx("div", { ref: incomingRef, className: `toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`, children: current }), exiting.length > 0 && (jsx("div", { className: `toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`, children: exiting }, exitRevision))] }));
+    return (jsxs("div", { ...pt?.slot, className: `toolbar-slot-section ${transitioningClass} ${pt?.slot?.className ?? ''}`, style: { ...pt?.slot?.style, ...(size ? { width: size.width, height: size.height } : {}) }, "data-cratis-part": 'toolbar-slot', "data-transitioning": exiting.length > 0 || undefined, children: [jsx("div", { ...pt?.incoming, ref: incomingRef, className: `toolbar-slot-incoming cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.incoming?.className ?? ''}`, "data-cratis-part": 'toolbar-slot-incoming', children: current }), exiting.length > 0 && (jsx("div", { ...pt?.outgoing, className: `toolbar-slot-outgoing cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.outgoing?.className ?? ''}`, "data-cratis-part": 'toolbar-slot-outgoing', "aria-hidden": 'true', inert: true, children: exiting }, exitRevision))] }));
 };
-/**
- * A logical sub-grouping of toolbar items within a {@link Toolbar}.
- *
- * Use `ToolbarGroup` to cluster related buttons into a visually cohesive unit.
- * Groups can participate in the slot system by providing a `slotName` — external
- * components anywhere in the {@link ToolbarSlotProvider} tree can then inject additional
- * buttons at a chosen position via {@link ToolbarSlot}.
- *
- * @example
- * ```tsx
- * <Toolbar>
- *     <ToolbarGroup slotName="canvas-tools">
- *         <ToolbarButton icon="pi pi-pencil" title="Draw" />
- *     </ToolbarGroup>
- * </Toolbar>
- * ```
- */
-const ToolbarGroup = ({ children, slotName, orientation = 'vertical' }) => {
-    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
-    return (jsxs("div", { className: `toolbar-group inline-flex ${flexClass} items-center gap-1 p-2 rounded-2xl`, children: [children, slotName && jsx(SlotTransition, { slotName: slotName, flexClass: flexClass })] }));
+const ToolbarGroup = ({ children, slotName, orientation = 'vertical', pt, }) => {
+    const flexClass = orientation === 'horizontal' ? 'cratis:flex-row' : 'cratis:flex-col';
+    return (jsxs("div", { ...pt?.root, className: `toolbar-group cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 cratis:p-2 cratis:rounded-2xl ${pt?.root?.className ?? ''}`, "data-cratis-part": 'toolbar-group', "data-orientation": orientation, children: [children, slotName && jsx(SlotTransition, { slotName: slotName, flexClass: flexClass, pt: pt })] }));
 };
 
 export { ToolbarGroup };

package/dist/esm/Toolbar/ToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarGroup.js","sources":["../../../Toolbar/ToolbarGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAMA;AACA,MAAM,kBAAkB,GAAG,GAAG;AAE9B;;;;;;;;;;AAUG;AACH,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA2C,KAAI;AACxF,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,QAAQ,CAAC;;;IAI1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAc,SAAS,CAAC;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;;;AAInD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAc,OAAO,CAAC;AAC/C,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2C,IAAI,CAAC;AAChF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA4C,SAAS,CAAC;AAC7E,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC;AAEnC,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;AACrC,QAAA,IAAI,WAAW,CAAC,OAAO,EAAE;AACrB,YAAA,OAAO,CAAC;AACJ,gBAAA,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,WAAW;AACtC,gBAAA,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,YAAY;AAC3C,aAAA,CAAC;QACN;IACJ,CAAC,EAAE,EAAE,CAAC;;IAGN,eAAe,CAAC,MAAK;AACjB,QAAA,eAAe,EAAE;AACrB,IAAA,CAAC,EAAE,EAAE,CAAC,CAAC;;IAGP,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,SAAS,KAAK,UAAU,CAAC,OAAO;YAAE;AACtC,QAAA,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO;AAE9B,QAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;QAClE,UAAU,CAAC,SAAS,CAAC;AAErB,QAAA,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;YAChB,UAAU,CAAC,GAAG,CAAC;YACf,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,YAAA,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,EAAE,CAAC,EAAE,kBAAkB,CAAC;QAC3E;AACJ,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;;;;IAKf,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;AACxB,YAAA,aAAa,CAAC,OAAO,GAAG,IAAI;AAC5B,YAAA,OAAO;QACX;AACA,QAAA,eAAe,EAAE;AACrB,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;AAE9B,IAAA,SAAS,CAAC,MAAM,MAAK;AACjB,QAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;IACtE,CAAC,EAAE,EAAE,CAAC;IAEN,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;;;;;AAM7D,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,qCAAqC,GAAG,EAAE;AAE1F,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAA,qBAAA,EAAwB,kBAAkB,CAAA,CAAE,EACvD,KAAK,EAAE,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAA,QAAA,EAAA,CAGpEC,GAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,qCAAqC,SAAS,CAAA,mBAAA,CAAqB,EAAA,QAAA,EAE7E,OAAO,EAAA,CACN,EAEL,OAAO,CAAC,MAAM,GAAG,CAAC,KACfA,GAAA,CAAA,KAAA,EAAA,EAEI,SAAS,EAAE,CAAA,kCAAA,EAAqC,SAAS,CAAA,mBAAA,CAAqB,EAAA,QAAA,EAE7E,OAAO,EAAA,EAHH,YAAY,CAIf,CACT,CAAA,EAAA,CACC;AAEd,CAAC;AAmBD;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAqB,KAAI;AAChG,IAAA,MAAM,SAAS,GAAG,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU;IAExE,QACID,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,0BAAA,EAA6B,SAAS,CAAA,mCAAA,CAAqC,EAAA,QAAA,EAAA,CACtF,QAAQ,EACR,QAAQ,IAAIC,IAAC,cAAc,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,CAAA,EAAA,CACvE;AAEd;;"}
+{"version":3,"file":"ToolbarGroup.js","sources":["../../../Toolbar/ToolbarGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarItemVisibilityContext.d.ts

@@ -0,0 +1,3 @@
+export declare const ToolbarItemVisibilityProvider: import("react").Provider<boolean>;
+export declare const useToolbarItemVisibility: () => boolean;
+//# sourceMappingURL=ToolbarItemVisibilityContext.d.ts.map

package/dist/esm/Toolbar/ToolbarItemVisibilityContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItemVisibilityContext.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarItemVisibilityContext.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,6BAA6B,mCAAwC,CAAC;AAEnF,eAAO,MAAM,wBAAwB,eAAiD,CAAC"}

package/dist/esm/Toolbar/ToolbarItemVisibilityContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const ToolbarItemVisibilityContext = createContext(true);
+const ToolbarItemVisibilityProvider = ToolbarItemVisibilityContext.Provider;
+const useToolbarItemVisibility = () => useContext(ToolbarItemVisibilityContext);
+
+export { ToolbarItemVisibilityProvider, useToolbarItemVisibility };
+//# sourceMappingURL=ToolbarItemVisibilityContext.js.map

package/dist/esm/Toolbar/ToolbarItemVisibilityContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItemVisibilityContext.js","sources":["../../../Toolbar/ToolbarItemVisibilityContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAKA,MAAM,4BAA4B,GAAG,aAAa,CAAC,IAAI,CAAC;AAEjD,MAAM,6BAA6B,GAAG,4BAA4B,CAAC;AAEnE,MAAM,wBAAwB,GAAG,MAAM,UAAU,CAAC,4BAA4B;;"}

package/dist/esm/Toolbar/ToolbarLayout.d.ts

@@ -1,8 +1,77 @@
-import { ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Stable part attributes for {@link ToolbarLayout}. */
+export interface ToolbarLayoutParts {
+    /** Named layout root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** Slot-transition measurement boundary. */
+    slot?: HTMLAttributes<HTMLDivElement>;
+    /** Current layout content. */
+    incoming?: HTMLAttributes<HTMLDivElement>;
+    /** Previous layout content while it exits. */
+    outgoing?: HTMLAttributes<HTMLDivElement>;
+}
+/** Props for the {@link ToolbarLayout} component. */
 export interface ToolbarLayoutProps {
+    /**
+     * The name identifying this layout region.
+     * External components use this as the `slotName` on a {@link ToolbarSlot} to inject content.
+     */
     name: string;
+    /**
+     * Default content shown when no slot content has been registered for this layout.
+     * Can include {@link ToolbarGroup}, {@link ToolbarSection}, {@link ToolbarSeparator},
+     * or any other toolbar elements.
+     */
     children?: ReactNode;
+    /** Layout direction matching the parent {@link Toolbar} (default: `'vertical'`). */
     orientation?: 'vertical' | 'horizontal';
+    /** Stable layout and transition attributes. */
+    pt?: ToolbarLayoutParts;
 }
-export declare const ToolbarLayout: ({ name, children, orientation }: ToolbarLayoutProps) => import("react").JSX.Element | null;
+/**
+ * A named, transparent layout region inside a {@link Toolbar} that enables decoupled,
+ * dynamically swappable toolbar content.
+ *
+ * Unlike {@link ToolbarGroup}, `ToolbarLayout` has no visual container of its own.
+ * It acts as a transparent mount point: external components inject complete toolbar
+ * structures — multiple {@link ToolbarGroup}s, {@link ToolbarSection}s,
+ * {@link ToolbarSeparator}s — using a {@link ToolbarSlot} with a matching `slotName`.
+ *
+ * When any slot content is registered it replaces the fallback `children`. Multiple
+ * independent contributors can register into the same layout using different `order`
+ * values on their {@link ToolbarSlot}.
+ *
+ * Wrap the toolbar and contributing components in a {@link ToolbarSlotProvider}:
+ *
+ * @example
+ * ```tsx
+ * // Application shell — define the layout region with optional fallback content:
+ * <ToolbarSlotProvider>
+ *     <Toolbar>
+ *         <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Select" />
+ *         <ToolbarLayout name="canvas-tools">
+ *             <ToolbarGroup>
+ *                 <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Draw (default)" />
+ *             </ToolbarGroup>
+ *         </ToolbarLayout>
+ *     </Toolbar>
+ *
+ *     <CanvasFeature />
+ * </ToolbarSlotProvider>
+ *
+ * // Feature component — inject complete groups:
+ * const CanvasFeature = () => (
+ *     <ToolbarSlot slotName="canvas-tools">
+ *         <ToolbarGroup>
+ *             <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Feature tool" />
+ *         </ToolbarGroup>
+ *         <ToolbarSeparator />
+ *         <ToolbarGroup>
+ *             <ToolbarButton icon={<span aria-hidden='true'>◆</span>} title="Quick action" />
+ *         </ToolbarGroup>
+ *     </ToolbarSlot>
+ * );
+ * ```
+ */
+export declare const ToolbarLayout: ({ name, children, orientation, pt, }: ToolbarLayoutProps) => import("react").JSX.Element | null;
 //# sourceMappingURL=ToolbarLayout.d.ts.map

package/dist/esm/Toolbar/ToolbarLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarLayout.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,SAAS,EAAwC,MAAM,OAAO,CAAC;AA0FlF,MAAM,WAAW,kBAAkB;IAK/B,IAAI,EAAE,MAAM,CAAC;IAOb,QAAQ,CAAC,EAAE,SAAS,CAAC;IAGrB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAE3C;AA+CD,eAAO,MAAM,aAAa,GAAI,iCAA8C,kBAAkB,uCAa7F,CAAC"}
+{"version":3,"file":"ToolbarLayout.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,cAAc,EACnB,KAAK,SAAS,EAKjB,MAAM,OAAO,CAAC;AA6Gf,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IAC/B,yBAAyB;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC7C;AAED,qDAAqD;AACrD,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,oFAAoF;IACpF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAExC,+CAA+C;IAC/C,EAAE,CAAC,EAAE,kBAAkB,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,aAAa,GAAI,sCAK3B,kBAAkB,uCAmBpB,CAAC"}

package/dist/esm/Toolbar/ToolbarLayout.js

@@ -1,16 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, Children, useState, useRef, useEffect } from 'react';
 import { useToolbarSlot } from './ToolbarSlot.js';
+import { ToolbarItemVisibilityProvider } from './ToolbarItemVisibilityContext.js';
 
-/** How long the fade-out animation runs (ms). React unmounts exiting content after this. */
 const LAYOUT_TRANSITION_MS = 220;
-/**
- * Renders toolbar layout content with a cross-fade and size-morph transition.
- *
- * - The container resizes smoothly to fit incoming layout content.
- * - Outgoing content fades out while incoming content fades in.
- */
-const LayoutTransition = ({ items, flexClass }) => {
+const LayoutTransition = ({ items, flexClass, pt, }) => {
     const [current, setCurrent] = useState(items);
     const [exiting, setExiting] = useState([]);
     const [exitRevision, setExitRevision] = useState(0);
@@ -19,9 +13,6 @@ const LayoutTransition = ({ items, flexClass }) => {
     const incomingRef = useRef(null);
     const [size, setSize] = useState(null);
     const timerRef = useRef(undefined);
-    // ResizeObserver keeps the container size in sync with the actual rendered
-    // content, including when nested ToolbarLayouts finish their own transitions.
-    // A one-shot offsetHeight read in useEffect misses those deferred size changes.
     useEffect(() => {
         const el = incomingRef.current;
         if (!el)
@@ -29,9 +20,9 @@ const LayoutTransition = ({ items, flexClass }) => {
         const sync = () => setSize({ width: el.offsetWidth, height: el.offsetHeight });
         const observer = new ResizeObserver(sync);
         observer.observe(el);
-        sync(); // capture initial size immediately
+        sync();
         return () => observer.disconnect();
-    }, []); // mount only — observer tracks all subsequent changes automatically
+    }, []);
     useEffect(() => {
         if (items === currentRef.current)
             return;
@@ -51,66 +42,17 @@ const LayoutTransition = ({ items, flexClass }) => {
     }, []);
     if (current.length === 0 && exiting.length === 0)
         return null;
-    // The section is only clipped while outgoing content is fading out, so it
-    // doesn't bleed outside the container. Once the transition is complete the
-    // section must be overflow:visible so fan-out and folder panels (which are
-    // position:absolute children) can escape the slot section's bounds.
     const transitioningClass = exiting.length > 0 ? 'toolbar-slot-section--transitioning' : '';
-    return (jsxs("div", { className: `toolbar-slot-section ${transitioningClass}`, style: size ? { width: size.width, height: size.height } : undefined, children: [jsx("div", { ref: incomingRef, className: `toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`, children: current }), exiting.length > 0 && (jsx("div", { className: `toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`, children: exiting }, exitRevision))] }));
+    return (jsxs("div", { ...pt?.slot, className: `toolbar-slot-section ${transitioningClass} ${pt?.slot?.className ?? ''}`, style: { ...pt?.slot?.style, ...(size ? { width: size.width, height: size.height } : {}) }, "data-cratis-part": 'toolbar-slot', "data-transitioning": exiting.length > 0 || undefined, children: [jsx("div", { ...pt?.incoming, ref: incomingRef, className: `toolbar-slot-incoming cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.incoming?.className ?? ''}`, "data-cratis-part": 'toolbar-slot-incoming', children: current }), exiting.length > 0 && (jsx("div", { ...pt?.outgoing, className: `toolbar-slot-outgoing cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.outgoing?.className ?? ''}`, "data-cratis-part": 'toolbar-slot-outgoing', "aria-hidden": 'true', inert: true, children: jsx(ToolbarItemVisibilityProvider, { value: false, children: exiting }) }, exitRevision))] }));
 };
-/**
- * A named, transparent layout region inside a {@link Toolbar} that enables decoupled,
- * dynamically swappable toolbar content.
- *
- * Unlike {@link ToolbarGroup}, `ToolbarLayout` has no visual container of its own.
- * It acts as a transparent mount point: external components inject complete toolbar
- * structures — multiple {@link ToolbarGroup}s, {@link ToolbarSection}s,
- * {@link ToolbarSeparator}s — using a {@link ToolbarSlot} with a matching `slotName`.
- *
- * When any slot content is registered it replaces the fallback `children`. Multiple
- * independent contributors can register into the same layout using different `order`
- * values on their {@link ToolbarSlot}.
- *
- * Wrap the toolbar and contributing components in a {@link ToolbarSlotProvider}:
- *
- * @example
- * ```tsx
- * // Application shell — define the layout region with optional fallback content:
- * <ToolbarSlotProvider>
- *     <Toolbar>
- *         <ToolbarButton icon="pi pi-arrow-up-left" title="Select" />
- *         <ToolbarLayout name="canvas-tools">
- *             <ToolbarGroup>
- *                 <ToolbarButton icon="pi pi-pencil" title="Draw (default)" />
- *             </ToolbarGroup>
- *         </ToolbarLayout>
- *     </Toolbar>
- *
- *     <CanvasFeature />
- * </ToolbarSlotProvider>
- *
- * // Feature component — inject complete groups:
- * const CanvasFeature = () => (
- *     <ToolbarSlot slotName="canvas-tools">
- *         <ToolbarGroup>
- *             <ToolbarButton icon="pi pi-star" title="Feature tool" />
- *         </ToolbarGroup>
- *         <ToolbarSeparator />
- *         <ToolbarGroup>
- *             <ToolbarButton icon="pi pi-bolt" title="Quick action" />
- *         </ToolbarGroup>
- *     </ToolbarSlot>
- * );
- * ```
- */
-const ToolbarLayout = ({ name, children, orientation = 'vertical' }) => {
+const ToolbarLayout = ({ name, children, orientation = 'vertical', pt, }) => {
     const slotItems = useToolbarSlot(name);
-    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
+    const flexClass = orientation === 'horizontal' ? 'cratis:flex-row' : 'cratis:flex-col';
     const fallbackItems = useMemo(() => Children.toArray(children), [children]);
     const items = slotItems.length > 0 ? slotItems : fallbackItems;
     if (items.length === 0)
         return null;
-    return (jsx("div", { className: `toolbar-layout inline-flex ${flexClass} items-center gap-1`, children: jsx(LayoutTransition, { items: items, flexClass: flexClass }) }));
+    return (jsx("div", { ...pt?.root, className: `toolbar-layout cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${pt?.root?.className ?? ''}`, "data-cratis-part": 'toolbar-layout', "data-layout-name": name, "data-orientation": orientation, children: jsx(LayoutTransition, { items: items, flexClass: flexClass, pt: pt }) }));
 };
 
 export { ToolbarLayout };

package/dist/esm/Toolbar/ToolbarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarLayout.js","sources":["../../../Toolbar/ToolbarLayout.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ToolbarLayout.js","sources":["../../../Toolbar/ToolbarLayout.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Toolbar/ToolbarSection.d.ts

@@ -1,8 +1,36 @@
-import { ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Stable part attributes for {@link ToolbarSection}. */
+export interface ToolbarSectionParts {
+    /** Animated section root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+    /** One named context, with active state exposed through data attributes. */
+    context?: HTMLAttributes<HTMLDivElement>;
+}
+/** Props for the {@link ToolbarSection} component. */
 export interface ToolbarSectionProps {
+    /**
+     * The name of the currently active context.
+     * Change this to trigger the fade-out / morph / fade-in animation.
+     * Defaults to the first context if not specified.
+     */
     activeContext?: string;
+    /** {@link ToolbarContext} elements that define each context's toolbar items. */
     children: ReactNode;
+    /** Layout direction matching the parent {@link Toolbar} (default: 'vertical'). */
     orientation?: 'vertical' | 'horizontal';
+    /** Stable section and context attributes. */
+    pt?: ToolbarSectionParts;
 }
-export declare const ToolbarSection: ({ activeContext, children, orientation }: ToolbarSectionProps) => import("react").JSX.Element;
+/**
+ * A section within a {@link Toolbar} that supports multiple named contexts.
+ *
+ * When {@link activeContext} changes:
+ * - The current items fade out.
+ * - The section smoothly morphs to the dimensions required by the new context.
+ * - The new items fade in.
+ *
+ * Contexts are defined by placing {@link ToolbarContext} children inside this section.
+ * Switching contexts only affects this section; other sections are unaffected.
+ */
+export declare const ToolbarSection: ({ activeContext, children, orientation, pt, }: ToolbarSectionProps) => import("react").JSX.Element;
 //# sourceMappingURL=ToolbarSection.d.ts.map

package/dist/esm/Toolbar/ToolbarSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,SAAS,EAA6E,MAAM,OAAO,CAAC;AA0BrI,MAAM,WAAW,mBAAmB;IAMhC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,EAAE,SAAS,CAAC;IAGpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAaD,eAAO,MAAM,cAAc,GAAI,0CAAuD,mBAAmB,gCAkIxG,CAAC"}
+{"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,cAAc,EAEnB,KAAK,SAAS,EAOjB,MAAM,OAAO,CAAC;AA0Bf,yDAAyD;AACzD,MAAM,WAAW,mBAAmB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC5C;AAED,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gFAAgF;IAChF,QAAQ,EAAE,SAAS,CAAC;IAEpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAExC,6CAA6C;IAC7C,EAAE,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GAAI,+CAK5B,mBAAmB,gCAiJrB,CAAC"}

package/dist/esm/Toolbar/ToolbarSection.js

@@ -1,32 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, Children, isValidElement, useCallback, useLayoutEffect, useEffect } from 'react';
 import { useToolbarSlot } from './ToolbarSlot.js';
+import { ToolbarItemVisibilityProvider } from './ToolbarItemVisibilityContext.js';
 
-/** Width/height transition duration used by the section resize animation (ms). */
 const SECTION_TRANSITION_MS = 350;
-/**
- * Renders the children of a single {@link ToolbarContext} together with any slot items
- * that have been registered under the context's `slotName`.
- *
- * Extracted into its own component so that the `useToolbarSlot` hook can be called
- * inside it — hooks cannot be called inside a callback or loop in the parent.
- */
 const ContextRenderer = ({ children, slotName }) => {
     const slotItems = useToolbarSlot(slotName ?? '');
     return (jsxs(Fragment, { children: [children, slotName && slotItems.length > 0 && slotItems] }));
 };
-/**
- * A section within a {@link Toolbar} that supports multiple named contexts.
- *
- * When {@link activeContext} changes:
- * - The current items fade out.
- * - The section smoothly morphs to the dimensions required by the new context.
- * - The new items fade in.
- *
- * Contexts are defined by placing {@link ToolbarContext} children inside this section.
- * Switching contexts only affects this section; other sections are unaffected.
- */
-const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) => {
+const ToolbarSection = ({ activeContext, children, orientation = 'vertical', pt, }) => {
     const contextRefs = useRef({});
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
@@ -35,10 +17,8 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
     const [size, setSize] = useState(null);
     const [isTransitioning, setIsTransitioning] = useState(false);
     const contexts = Children.toArray(children).filter((child) => isValidElement(child) && typeof child.props.name === 'string');
-    // Default to the first context if activeContext is not provided
     const effectiveContext = activeContext ?? contexts[0]?.props?.name ?? '';
-    const flexClass = orientation === 'horizontal' ? 'flex-row' : 'flex-col';
-    /** Measure the given context's natural dimensions and update the section size. */
+    const flexClass = orientation === 'horizontal' ? 'cratis:flex-row' : 'cratis:flex-col';
     const measureAndSetSize = useCallback((contextName) => {
         const ref = contextRefs.current[contextName];
         if (ref) {
@@ -48,13 +28,9 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
             });
         }
     }, []);
-    // Set the initial size synchronously before the first browser paint so there is no layout flash.
-    // Empty dependency array is intentional: ongoing context changes are handled by the useEffect below.
     useLayoutEffect(() => {
         measureAndSetSize(effectiveContext);
-    }, []); // run only on mount
-    // Clip content only while the section is morphing between contexts so incoming
-    // buttons do not float outside the current bounds during growth.
+    }, []);
     useEffect(() => {
         if (previousContextRef.current === null) {
             previousContextRef.current = effectiveContext;
@@ -71,12 +47,9 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
             transitionTimeoutRef.current = null;
         }, SECTION_TRANSITION_MS);
     }, [effectiveContext]);
-    // After a context switch, let the browser paint the opacity transition first,
-    // then update the explicit size so the CSS width/height transition kicks in.
     useEffect(() => {
         measureAndSetSize(effectiveContext);
     }, [effectiveContext, measureAndSetSize]);
-    // Keep section dimensions in sync when the active context's content changes size after render.
     useEffect(() => {
         const activeContextElement = contextRefs.current[effectiveContext];
         if (!activeContextElement || typeof ResizeObserver === 'undefined') {
@@ -114,10 +87,10 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
         if (transitionTimeoutRef.current)
             clearTimeout(transitionTimeoutRef.current);
     }, []);
-    return (jsx("div", { className: `toolbar-section ${isTransitioning ? 'toolbar-section--transitioning' : ''}`, style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
+    return (jsx("div", { ...pt?.root, className: `toolbar-section ${isTransitioning ? 'toolbar-section--transitioning' : ''} ${pt?.root?.className ?? ''}`, style: { ...pt?.root?.style, ...(size ? { width: size.width, height: size.height } : {}) }, "data-cratis-part": 'toolbar-section', "data-transitioning": isTransitioning || undefined, "data-orientation": orientation, children: contexts.map((child) => {
             const { name, children: contextChildren, slotName } = child.props;
             const isActive = name === effectiveContext;
-            return (jsx("div", { ref: (element) => { contextRefs.current[name] = element; }, className: `toolbar-context inline-flex ${flexClass} items-center gap-1 ${isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'}`, children: jsx(ContextRenderer, { slotName: slotName, children: contextChildren }) }, name));
+            return (jsx("div", { ...pt?.context, ref: (element) => { contextRefs.current[name] = element; }, className: `toolbar-context cratis:inline-flex ${flexClass} cratis:items-center cratis:gap-1 ${isActive ? 'toolbar-context--active' : 'toolbar-context--inactive'} ${pt?.context?.className ?? ''}`, "data-cratis-part": 'toolbar-context', "data-context-name": name, "data-active": isActive || undefined, "data-selected": isActive || undefined, "aria-hidden": !isActive, inert: !isActive, children: jsx(ToolbarItemVisibilityProvider, { value: isActive, children: jsx(ContextRenderer, { slotName: slotName, children: contextChildren }) }) }, name));
         }) }));
 };
 

package/dist/esm/Toolbar/ToolbarSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAqBA,MAAM,qBAAqB,GAAG,GAAG;AASjC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAA8C,KAAI;IAC3F,MAAM,SAAS,GAAG,cAAc,CAAC,QAAQ,IAAI,EAAE,CAAC;AAChD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,QAAQ,EACR,QAAQ,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,CAAA,EAAA,CAC/C;AAEX,CAAC;AAwCM,MAAM,cAAc,GAAG,CAAC,EAC3B,aAAa,EACb,QAAQ,EACR,WAAW,GAAG,UAAU,EACxB,EAAE,GACgB,KAAI;AACtB,IAAA,MAAM,WAAW,GAAG,MAAM,CAAwC,EAAE,CAAC;AACrE,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAwB,IAAI,CAAC;AAC7D,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAA0B,IAAI,CAAC;AACjE,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAuC,IAAI,CAAC;AAC/E,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAgB,IAAI,CAAC;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2C,IAAI,CAAC;IAChF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE7D,IAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC9C,CAAC,KAAK,KACF,cAAc,CAAC,KAAK,CAAC,IAAI,OAAQ,KAAK,CAAC,KAA6B,CAAC,IAAI,KAAK,QAAQ,CAC7F;AAGD,IAAA,MAAM,gBAAgB,GAAG,aAAa,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAA6B,EAAE,IAAI,IAAI,EAAE;AAEjG,IAAA,MAAM,SAAS,GAAG,WAAW,KAAK,YAAY,GAAG,iBAAiB,GAAG,iBAAiB;AAGtF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,WAAmB,KAAI;QAC1D,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC;QAC5C,IAAI,GAAG,EAAE;AACL,YAAA,OAAO,CAAC;gBACJ,KAAK,EAAE,GAAG,CAAC,WAAW;gBACtB,MAAM,EAAE,GAAG,CAAC,YAAY;AAC3B,aAAA,CAAC;QACN;IACJ,CAAC,EAAE,EAAE,CAAC;IAIN,eAAe,CAAC,MAAK;QACjB,iBAAiB,CAAC,gBAAgB,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC;IAIN,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,IAAI,EAAE;AACrC,YAAA,kBAAkB,CAAC,OAAO,GAAG,gBAAgB;YAC7C;QACJ;AACA,QAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,gBAAgB;YAAE;AAErD,QAAA,kBAAkB,CAAC,OAAO,GAAG,gBAAgB;QAC7C,kBAAkB,CAAC,IAAI,CAAC;QAExB,IAAI,oBAAoB,CAAC,OAAO;AAAE,YAAA,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC;AAC5E,QAAA,oBAAoB,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;YAC3C,kBAAkB,CAAC,KAAK,CAAC;AACzB,YAAA,oBAAoB,CAAC,OAAO,GAAG,IAAI;QACvC,CAAC,EAAE,qBAAqB,CAAC;AAC7B,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAItB,SAAS,CAAC,MAAK;QACX,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAGzC,SAAS,CAAC,MAAK;QACX,MAAM,oBAAoB,GAAG,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAClE,IAAI,CAAC,oBAAoB,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;YAChE;QACJ;QAEA,iBAAiB,CAAC,gBAAgB,CAAC;AAEnC,QAAA,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE;AACzC,QAAA,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE;AAEvC,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;YACrC,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,oBAAoB,CAAC;AACtC,QAAA,iBAAiB,CAAC,OAAO,GAAG,QAAQ;AAEpC,QAAA,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;AACzC,YAAA,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;gBAC/C,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,YAAA,CAAC,CAAC;AACF,YAAA,gBAAgB,CAAC,OAAO,CAAC,oBAAoB,EAAE;AAC3C,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,UAAU,EAAE,IAAI;AACnB,aAAA,CAAC;AACF,YAAA,mBAAmB,CAAC,OAAO,GAAG,gBAAgB;QAClD;AAEA,QAAA,OAAO,MAAK;YACR,QAAQ,CAAC,UAAU,EAAE;AACrB,YAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,QAAQ,EAAE;AACxC,gBAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;YACpC;AAEA,YAAA,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE;AACzC,YAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI;AACtC,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAEzC,IAAA,SAAS,CAAC,MAAM,MAAK;QACjB,IAAI,oBAAoB,CAAC,OAAO;AAAE,YAAA,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAChF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACIC,GAAA,CAAA,KAAA,EAAA,EAAA,GACQ,EAAE,EAAE,IAAI,EACZ,SAAS,EAAE,CAAA,gBAAA,EAAmB,eAAe,GAAG,gCAAgC,GAAG,EAAE,CAAA,CAAA,EAAI,EAAE,EAAE,IAAI,EAAE,SAAS,IAAI,EAAE,CAAA,CAAE,EACpH,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,EAAA,kBAAA,EACzE,iBAAiB,EAAA,oBAAA,EACd,eAAe,IAAI,SAAS,EAAA,kBAAA,EAC9B,WAAW,EAAA,QAAA,EAE5B,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACpB,YAAA,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,KAA4B;AACxF,YAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,gBAAgB;AAE1C,YAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAA,GAEQ,EAAE,EAAE,OAAO,EACf,GAAG,EAAE,CAAC,OAAO,OAAO,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAC1D,SAAS,EAAE,sCAAsC,SAAS,CAAA,kCAAA,EACtD,QAAQ,GAAG,yBAAyB,GAAG,2BAC3C,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,IAAI,EAAE,EAAE,EAAA,kBAAA,EACjB,iBAAiB,uBACf,IAAI,EAAA,aAAA,EACV,QAAQ,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,EAAA,aAAA,EACvB,CAAC,QAAQ,EACtB,KAAK,EAAE,CAAC,QAAQ,YAEhBA,GAAA,CAAC,6BAA6B,IAAC,KAAK,EAAE,QAAQ,EAAA,QAAA,EAC1CA,GAAA,CAAC,eAAe,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAC9B,eAAe,EAAA,CACF,EAAA,CACU,IAjB3B,IAAI,CAkBP;QAEd,CAAC,CAAC,EAAA,CACA;AAEd;;"}

package/dist/esm/Toolbar/ToolbarSeparator.d.ts

@@ -1,5 +1,21 @@
+import type { HTMLAttributes } from 'react';
+/** Stable part attributes for {@link ToolbarSeparator}. */
+export interface ToolbarSeparatorParts {
+    /** Native separator root. */
+    root?: HTMLAttributes<HTMLDivElement>;
+}
+/** Props for the {@link ToolbarSeparator} component. */
 export interface ToolbarSeparatorProps {
+    /** Layout direction matching the parent {@link Toolbar} (default: 'vertical'). */
     orientation?: 'vertical' | 'horizontal';
+    /** Stable separator attributes. */
+    pt?: ToolbarSeparatorParts;
 }
-export declare const ToolbarSeparator: ({ orientation }: ToolbarSeparatorProps) => import("react").JSX.Element;
+/**
+ * A visual divider for use inside a {@link Toolbar}.
+ *
+ * In a vertical toolbar (default) the separator renders as a horizontal rule.
+ * In a horizontal toolbar it renders as a vertical rule.
+ */
+export declare const ToolbarSeparator: ({ orientation, pt, }: ToolbarSeparatorProps) => import("react").JSX.Element;
 //# sourceMappingURL=ToolbarSeparator.d.ts.map

package/dist/esm/Toolbar/ToolbarSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSeparator.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSeparator.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IAElC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAQD,eAAO,MAAM,gBAAgB,GAAI,iBAA8B,qBAAqB,gCAMnF,CAAC"}
+{"version":3,"file":"ToolbarSeparator.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSeparator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,2DAA2D;AAC3D,MAAM,WAAW,qBAAqB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACzC;AAED,wDAAwD;AACxD,MAAM,WAAW,qBAAqB;IAClC,kFAAkF;IAClF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,mCAAmC;IACnC,EAAE,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,gCASvB,CAAC"}

package/dist/esm/Toolbar/ToolbarSeparator.js

@@ -1,12 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 
-/**
- * A visual divider for use inside a {@link Toolbar}.
- *
- * In a vertical toolbar (default) the separator renders as a horizontal rule.
- * In a horizontal toolbar it renders as a vertical rule.
- */
-const ToolbarSeparator = ({ orientation = 'vertical' }) => (jsx("div", { role: 'separator', "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', className: orientation === 'horizontal' ? 'toolbar-separator toolbar-separator--in-horizontal' : 'toolbar-separator toolbar-separator--in-vertical' }));
+const ToolbarSeparator = ({ orientation = 'vertical', pt, }) => (jsx("div", { ...pt?.root, role: 'separator', "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', className: `${orientation === 'horizontal' ? 'toolbar-separator toolbar-separator--in-horizontal' : 'toolbar-separator toolbar-separator--in-vertical'} ${pt?.root?.className ?? ''}`, "data-cratis-part": 'toolbar-separator', "data-orientation": orientation }));
 
 export { ToolbarSeparator };
 //# sourceMappingURL=ToolbarSeparator.js.map

package/dist/esm/Toolbar/ToolbarSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarSeparator.js","sources":["../../../Toolbar/ToolbarSeparator.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;AASA;;;;;AAKG;MACU,gBAAgB,GAAG,CAAC,EAAE,WAAW,GAAG,UAAU,EAAyB,MAChFA,GAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,YAAY,EAC1E,SAAS,EAAE,WAAW,KAAK,YAAY,GAAG,oDAAoD,GAAG,kDAAkD,EAAA,CACrJ;;"}
+{"version":3,"file":"ToolbarSeparator.js","sources":["../../../Toolbar/ToolbarSeparator.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;AAyBO,MAAM,gBAAgB,GAAG,CAAC,EAC7B,WAAW,GAAG,UAAU,EACxB,EAAE,GACkB,MACpBA,GAAA,CAAA,KAAA,EAAA,EAAA,GACQ,EAAE,EAAE,IAAI,EACZ,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,YAAY,EAC1E,SAAS,EAAE,CAAA,EAAG,WAAW,KAAK,YAAY,GAAG,oDAAoD,GAAG,kDAAkD,CAAA,CAAA,EAAI,EAAE,EAAE,IAAI,EAAE,SAAS,IAAI,EAAE,CAAA,CAAE,EAAA,kBAAA,EACpK,mBAAmB,EAAA,kBAAA,EAClB,WAAW,EAAA,CAC/B;;"}