@accelint/design-toolkit 9.11.0 → 9.11.2

package/dist/components/divider/context.d.ts

@@ -13,15 +13,15 @@
 import { ProviderProps } from "../../lib/types.js";
 import { DividerProps } from "./types.js";
 import "client-only";
-import * as react27 from "react";
-import * as react_jsx_runtime99 from "react/jsx-runtime";
+import * as react2 from "react";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 import { ContextValue } from "react-aria-components/slots";
 
 //#region src/components/divider/context.d.ts
 /**
  * Context for sharing Divider props across component tree.
  */
-declare const DividerContext: react27.Context<ContextValue<DividerProps, HTMLHRElement>>;
+declare const DividerContext: react2.Context<ContextValue<DividerProps, HTMLHRElement>>;
 /**
  * DividerProvider - Context provider for setting default Divider props.
  *
@@ -42,7 +42,7 @@ declare const DividerContext: react27.Context<ContextValue<DividerProps, HTMLHRE
 declare function DividerProvider({
   children,
   ...props
-}: ProviderProps<DividerProps>): react_jsx_runtime99.JSX.Element;
+}: ProviderProps<DividerProps>): react_jsx_runtime23.JSX.Element;
 //#endregion
 export { DividerContext, DividerProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/divider/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DividerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime98 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/divider/index.d.ts
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime98 from "react/jsx-runtime";
 declare function Divider({
   ref,
   ...props
-}: DividerProps): react_jsx_runtime98.JSX.Element;
+}: DividerProps): react_jsx_runtime25.JSX.Element;
 //#endregion
 export { Divider };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/back.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime101 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/drawer/back.d.ts
 
@@ -33,7 +33,7 @@ import * as react_jsx_runtime101 from "react/jsx-runtime";
  * </DrawerView>
  * ```
  */
-declare function DrawerBack(): react_jsx_runtime101.JSX.Element | null;
+declare function DrawerBack(): react_jsx_runtime28.JSX.Element | null;
 //#endregion
 export { DrawerBack };
 //# sourceMappingURL=back.d.ts.map

package/dist/components/drawer/close.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerCloseProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime102 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/drawer/close.d.ts
 
@@ -34,7 +34,7 @@ import * as react_jsx_runtime102 from "react/jsx-runtime";
  * </DrawerHeader>
  * ```
  */
-declare function DrawerClose(props: DrawerCloseProps): react_jsx_runtime102.JSX.Element;
+declare function DrawerClose(props: DrawerCloseProps): react_jsx_runtime30.JSX.Element;
 declare namespace DrawerClose {
   var displayName: string;
 }

package/dist/components/drawer/content.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime103 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/components/drawer/content.d.ts
 
@@ -37,7 +37,7 @@ import * as react_jsx_runtime103 from "react/jsx-runtime";
 declare function DrawerContent({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime103.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime31.JSX.Element;
 //#endregion
 export { DrawerContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/drawer/context.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerContextValue, DrawerEvent } from "./types.js";
 import "client-only";
-import * as react4 from "react";
+import * as react5 from "react";
 import { UniqueId } from "@accelint/core";
 import { Broadcast } from "@accelint/bus";
 
@@ -25,7 +25,7 @@ import { Broadcast } from "@accelint/bus";
  * const { register, unregister, placement } = useContext(DrawerContext);
  * ```
  */
-declare const DrawerContext: react4.Context<DrawerContextValue>;
+declare const DrawerContext: react5.Context<DrawerContextValue>;
 /**
  * Event bus instance for drawer-related events.
  *

package/dist/components/drawer/footer.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 
 //#region src/components/drawer/footer.d.ts
 
@@ -39,7 +39,7 @@ import * as react_jsx_runtime26 from "react/jsx-runtime";
 declare function DrawerFooter({
   className,
   ...rest
-}: ComponentPropsWithRef<'footer'>): react_jsx_runtime26.JSX.Element;
+}: ComponentPropsWithRef<'footer'>): react_jsx_runtime34.JSX.Element;
 //#endregion
 export { DrawerFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/drawer/header-title.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerTitleProps } from "./types.js";
-import * as react_jsx_runtime76 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 
 //#region src/components/drawer/header-title.d.ts
 
@@ -41,7 +41,7 @@ declare function DrawerHeaderTitle({
   className,
   level,
   ...rest
-}: DrawerTitleProps): react_jsx_runtime76.JSX.Element;
+}: DrawerTitleProps): react_jsx_runtime36.JSX.Element;
 //#endregion
 export { DrawerHeaderTitle };
 //# sourceMappingURL=header-title.d.ts.map

package/dist/components/drawer/header.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime79 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 
 //#region src/components/drawer/header.d.ts
 
@@ -52,7 +52,7 @@ declare function DrawerHeader({
   title,
   children,
   ...rest
-}: ComponentPropsWithRef<'header'>): react_jsx_runtime79.JSX.Element;
+}: ComponentPropsWithRef<'header'>): react_jsx_runtime38.JSX.Element;
 //#endregion
 export { DrawerHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/drawer/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime81 from "react/jsx-runtime";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
 
 //#region src/components/drawer/index.d.ts
 
@@ -63,7 +63,7 @@ declare function Drawer({
   size,
   onChange,
   ...rest
-}: DrawerProps): react_jsx_runtime81.JSX.Element;
+}: DrawerProps): react_jsx_runtime39.JSX.Element;
 //#endregion
 export { Drawer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/layout-main.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime82 from "react/jsx-runtime";
+import * as react_jsx_runtime41 from "react/jsx-runtime";
 
 //#region src/components/drawer/layout-main.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime82 from "react/jsx-runtime";
 declare function DrawerLayoutMain({
   className,
   ...rest
-}: ComponentPropsWithRef<'main'>): react_jsx_runtime82.JSX.Element;
+}: ComponentPropsWithRef<'main'>): react_jsx_runtime41.JSX.Element;
 //#endregion
 export { DrawerLayoutMain };
 //# sourceMappingURL=layout-main.d.ts.map

package/dist/components/drawer/layout.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerLayoutProps } from "./types.js";
-import * as react_jsx_runtime83 from "react/jsx-runtime";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
 
 //#region src/components/drawer/layout.d.ts
 
@@ -42,7 +42,7 @@ declare function DrawerLayout({
   extend,
   push,
   ...rest
-}: DrawerLayoutProps): react_jsx_runtime83.JSX.Element;
+}: DrawerLayoutProps): react_jsx_runtime44.JSX.Element;
 //#endregion
 export { DrawerLayout };
 //# sourceMappingURL=layout.d.ts.map

package/dist/components/drawer/menu-item.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerMenuItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime84 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 
 //#region src/components/drawer/menu-item.d.ts
 
@@ -45,7 +45,7 @@ declare function DrawerMenuItem({
   toggle,
   textValue,
   ...rest
-}: DrawerMenuItemProps): react_jsx_runtime84.JSX.Element | null;
+}: DrawerMenuItemProps): react_jsx_runtime43.JSX.Element | null;
 //#endregion
 export { DrawerMenuItem };
 //# sourceMappingURL=menu-item.d.ts.map

package/dist/components/drawer/menu.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerMenuProps } from "./types.js";
-import * as react_jsx_runtime87 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 
 //#region src/components/drawer/menu.d.ts
 
@@ -39,7 +39,7 @@ declare function DrawerMenu({
   position,
   children,
   ...rest
-}: DrawerMenuProps): react_jsx_runtime87.JSX.Element;
+}: DrawerMenuProps): react_jsx_runtime46.JSX.Element;
 //#endregion
 export { DrawerMenu };
 //# sourceMappingURL=menu.d.ts.map

package/dist/components/drawer/panel.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime85 from "react/jsx-runtime";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
 
 //#region src/components/drawer/panel.d.ts
 
@@ -36,7 +36,7 @@ import * as react_jsx_runtime85 from "react/jsx-runtime";
 declare function DrawerPanel({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime85.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime48.JSX.Element;
 //#endregion
 export { DrawerPanel };
 //# sourceMappingURL=panel.d.ts.map

package/dist/components/drawer/styles.module.css

@@ -19,6 +19,11 @@
     --drawer-size-medium: 200px;
     --drawer-size-large: 400px;
 
+    --drawer-left-size: 0px;
+    --drawer-right-size: 0px;
+    --drawer-top-size: 0px;
+    --drawer-bottom-size: 0px;
+
     --drawer-main-row-start: 1;
     --drawer-main-col-end: 4;
     --drawer-main-row-end: 4;
@@ -29,9 +34,17 @@
     --drawer-main-rows: var(--drawer-main-row-start) /
       var(--drawer-main-row-end);
 
-    @apply relative grid h-full w-full;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto 1fr auto;
+    @apply relative grid h-full w-full overflow-hidden;
+    grid-template-columns: var(--drawer-left-size) 1fr var(--drawer-right-size);
+    grid-template-rows: var(--drawer-top-size) 1fr var(--drawer-bottom-size);
+
+    @variant motion-safe {
+      transition:
+        grid-template-columns var(--animation-duration-slow)
+          var(--animation-easing-standard),
+        grid-template-rows var(--animation-duration-slow)
+          var(--animation-easing-standard);
+    }
 
     @variant push-top {
       --drawer-main-row-start: 2;
@@ -52,6 +65,46 @@
     @variant has-[.group\/sidenav] {
       --drawer-main-col-start: 2;
     }
+
+    @variant has-[[data-placement=left][data-open][data-size=large]] {
+      --drawer-left-size: var(--drawer-size-large);
+    }
+    @variant has-[[data-placement=left][data-open][data-size=medium]] {
+      --drawer-left-size: var(--drawer-size-medium);
+    }
+    @variant has-[[data-placement=left][data-open][data-size=small]] {
+      --drawer-left-size: var(--drawer-size-small);
+    }
+
+    @variant has-[[data-placement=right][data-open][data-size=large]] {
+      --drawer-right-size: var(--drawer-size-large);
+    }
+    @variant has-[[data-placement=right][data-open][data-size=medium]] {
+      --drawer-right-size: var(--drawer-size-medium);
+    }
+    @variant has-[[data-placement=right][data-open][data-size=small]] {
+      --drawer-right-size: var(--drawer-size-small);
+    }
+
+    @variant has-[[data-placement=top][data-open][data-size=large]] {
+      --drawer-top-size: var(--drawer-size-large);
+    }
+    @variant has-[[data-placement=top][data-open][data-size=medium]] {
+      --drawer-top-size: var(--drawer-size-medium);
+    }
+    @variant has-[[data-placement=top][data-open][data-size=small]] {
+      --drawer-top-size: var(--drawer-size-small);
+    }
+
+    @variant has-[[data-placement=bottom][data-open][data-size=large]] {
+      --drawer-bottom-size: var(--drawer-size-large);
+    }
+    @variant has-[[data-placement=bottom][data-open][data-size=medium]] {
+      --drawer-bottom-size: var(--drawer-size-medium);
+    }
+    @variant has-[[data-placement=bottom][data-open][data-size=small]] {
+      --drawer-bottom-size: var(--drawer-size-small);
+    }
   }
 
   .main {
@@ -60,19 +113,11 @@
 
   .drawer {
     @apply bg-surface-default text-body-m pointer-events-none relative flex flex-col;
-
-    @variant motion-safe {
-      transition: transform var(--animation-duration-slow)
-        var(--animation-easing-standard);
-    }
+    min-width: 0;
+    min-height: 0;
 
     @variant placement-top {
       @apply col-span-full row-start-1 row-end-2;
-      transform: translateY(-100%);
-
-      @variant open {
-        transform: translateY(0);
-      }
 
       @variant group-extend-right/layout {
         @apply col-end-3;
@@ -89,11 +134,6 @@
 
     @variant placement-right {
       @apply col-start-3 col-end-4 row-span-full;
-      transform: translateX(100%);
-
-      @variant open {
-        transform: translateX(0);
-      }
 
       @variant group-extend-top/layout {
         @apply row-start-2;
@@ -110,11 +150,6 @@
 
     @variant placement-bottom {
       @apply col-span-full row-start-3 row-end-4;
-      transform: translateY(100%);
-
-      @variant open {
-        transform: translateY(0);
-      }
 
       @variant group-extend-right/layout {
         @apply col-end-3;
@@ -131,11 +166,6 @@
 
     @variant placement-left {
       @apply col-start-1 col-end-2 row-span-full;
-      transform: translateX(-100%);
-
-      @variant open {
-        transform: translateX(0);
-      }
 
       @variant group-extend-top/layout {
         @apply row-start-2;
@@ -230,93 +260,10 @@
   }
 
   .panel {
-    @apply gap-s p-l flex h-full min-h-0 flex-col;
-    opacity: 0;
-    pointer-events: none;
-
-    @variant motion-safe {
-      transition:
-        transform var(--animation-duration-fast)
-          var(--animation-easing-standard),
-        opacity var(--animation-duration-fast) var(--animation-easing-standard);
-    }
-
-    @variant group-placement-left/drawer {
-      transform: translateX(-100%);
-    }
-
-    @variant group-placement-right/drawer {
-      transform: translateX(100%);
-    }
-
-    @variant group-placement-top/drawer {
-      transform: translateY(-100%);
-    }
-
-    @variant group-placement-bottom/drawer {
-      transform: translateY(100%);
-    }
+    @apply gap-s p-l hidden h-full min-h-0 flex-col overflow-hidden;
 
     @variant group-open/drawer {
-      opacity: 1;
-      pointer-events: auto;
-      transform: translate(0, 0);
-    }
-
-    @variant group-placement-left/drawer {
-      @variant group-size-large/drawer {
-        @apply w-(--drawer-size-large);
-      }
-
-      @variant group-size-medium/drawer {
-        @apply w-(--drawer-size-medium);
-      }
-
-      @variant group-size-small/drawer {
-        @apply w-(--drawer-size-small);
-      }
-    }
-
-    @variant group-placement-right/drawer {
-      @variant group-size-large/drawer {
-        @apply w-(--drawer-size-large);
-      }
-
-      @variant group-size-medium/drawer {
-        @apply w-(--drawer-size-medium);
-      }
-
-      @variant group-size-small/drawer {
-        @apply w-(--drawer-size-small);
-      }
-    }
-
-    @variant group-placement-top/drawer {
-      @variant group-size-large/drawer {
-        @apply h-(--drawer-size-large);
-      }
-
-      @variant group-size-medium/drawer {
-        @apply h-(--drawer-size-medium);
-      }
-
-      @variant group-size-small/drawer {
-        @apply h-(--drawer-size-small);
-      }
-    }
-
-    @variant group-placement-bottom/drawer {
-      @variant group-size-large/drawer {
-        @apply h-(--drawer-size-large);
-      }
-
-      @variant group-size-medium/drawer {
-        @apply h-(--drawer-size-medium);
-      }
-
-      @variant group-size-small/drawer {
-        @apply h-(--drawer-size-small);
-      }
+      @apply flex;
     }
   }
 

package/dist/components/drawer/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime88 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/drawer/trigger.d.ts
 
@@ -47,7 +47,7 @@ import * as react_jsx_runtime88 from "react/jsx-runtime";
 declare function DrawerTrigger({
   for: events,
   ...rest
-}: DrawerTriggerProps): react_jsx_runtime88.JSX.Element;
+}: DrawerTriggerProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { DrawerTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/drawer/view.d.ts

@@ -13,7 +13,7 @@
 import { ViewStackViewProps } from "../view-stack/types.js";
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime60 from "react/jsx-runtime";
 
 //#region src/components/drawer/view.d.ts
 
@@ -44,7 +44,7 @@ declare function DrawerView({
   children,
   className,
   ...rest
-}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime42.JSX.Element;
+}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime60.JSX.Element;
 //#endregion
 export { DrawerView };
 //# sourceMappingURL=view.d.ts.map

package/dist/components/flashcard/index.d.ts

@@ -12,14 +12,14 @@
 
 import { FlashcardComponentProps, FlashcardDetailsListProps, FlashcardProps } from "./types.js";
 import "client-only";
-import * as react12 from "react";
-import * as react_jsx_runtime43 from "react/jsx-runtime";
+import * as react0 from "react";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/flashcard/index.d.ts
 /**
  * Context for sharing Flashcard state across child components.
  */
-declare const FlashcardContext: react12.Context<FlashcardProps>;
+declare const FlashcardContext: react0.Context<FlashcardProps>;
 /**
  * Flashcard - A quick visual identifier for map entity data.
  *
@@ -46,7 +46,7 @@ declare const FlashcardContext: react12.Context<FlashcardProps>;
  * </Flashcard>
  * ```
  */
-declare function Flashcard(props: FlashcardProps): react_jsx_runtime43.JSX.Element;
+declare function Flashcard(props: FlashcardProps): react_jsx_runtime3.JSX.Element;
 declare namespace Flashcard {
   var displayName: string;
 }
@@ -68,7 +68,7 @@ declare namespace Flashcard {
  * </Flashcard>
  * ```
  */
-declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime43.JSX.Element;
+declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime3.JSX.Element;
 declare namespace FlashcardHero {
   var displayName: string;
 }
@@ -92,7 +92,7 @@ declare namespace FlashcardHero {
  * </Flashcard>
  * ```
  */
-declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime43.JSX.Element | null;
+declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime3.JSX.Element | null;
 declare namespace FlashcardAdditionalData {
   var displayName: string;
 }
@@ -119,7 +119,7 @@ declare namespace FlashcardAdditionalData {
  * </Flashcard>
  * ```
  */
-declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime43.JSX.Element;
+declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime3.JSX.Element;
 declare namespace FlashcardDetailsList {
   var displayName: string;
 }
@@ -141,7 +141,7 @@ declare namespace FlashcardDetailsList {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime43.JSX.Element;
+declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime3.JSX.Element;
 declare namespace FlashcardDetailsLabel {
   var displayName: string;
 }
@@ -163,7 +163,7 @@ declare namespace FlashcardDetailsLabel {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime43.JSX.Element;
+declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime3.JSX.Element;
 declare namespace FlashcardDetailsValue {
   var displayName: string;
 }

package/dist/components/floating-card/context.d.ts

@@ -11,10 +11,10 @@
  */
 
 import { FloatingCardContextValue } from "./types.js";
-import * as react13 from "react";
+import * as react12 from "react";
 
 //#region src/components/floating-card/context.d.ts
-declare const FloatingCardContext: react13.Context<FloatingCardContextValue | null>;
+declare const FloatingCardContext: react12.Context<FloatingCardContextValue | null>;
 /**
  * Hook to access floating card management functionality.
  *

package/dist/components/floating-card/provider.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { FloatingCardProviderProps } from "./types.js";
-import * as react_jsx_runtime50 from "react/jsx-runtime";
+import * as react_jsx_runtime68 from "react/jsx-runtime";
 
 //#region src/components/floating-card/provider.d.ts
 
@@ -56,7 +56,7 @@ declare function FloatingCardProvider({
   headerActions,
   initialPinned,
   className
-}: FloatingCardProviderProps): react_jsx_runtime50.JSX.Element;
+}: FloatingCardProviderProps): react_jsx_runtime68.JSX.Element;
 //#endregion
 export { FloatingCardProvider };
 //# sourceMappingURL=provider.d.ts.map