polymorph-ui-components 0.3.0 → 0.4.0

package/dist/ChatBubble/ChatBubble.svelte

@@ -24,6 +24,9 @@
     panelHeight = $bindable(600),
     minPanelWidth = 280,
     minPanelHeight = 360,
+    expanded = $bindable(false),
+    expandedPanelWidth = $bindable(600),
+    expandedPanelHeight = $bindable(760),
     onopen,
     onclose,
     ontoggle,
@@ -61,6 +64,25 @@
   );
   let resizeHandles = $derived(handlesFor(verticalSide, effectiveSide));
 
+  let liveWidth = $derived(expanded ? expandedPanelWidth : panelWidth);
+  let liveHeight = $derived(expanded ? expandedPanelHeight : panelHeight);
+
+  function setLiveWidth(value: number): void {
+    if (expanded) {
+      expandedPanelWidth = value;
+    } else {
+      panelWidth = value;
+    }
+  }
+
+  function setLiveHeight(value: number): void {
+    if (expanded) {
+      expandedPanelHeight = value;
+    } else {
+      panelHeight = value;
+    }
+  }
+
   function snapMargin(): number {
     if (root === null) {
       return 24;
@@ -235,6 +257,7 @@
   data-position={position}
   data-effective-side={effectiveSide}
   data-effective-vertical={verticalSide}
+  data-expanded={expanded}
   data-pw={testId}
   bind:this={root}
   style:transform={draggable ? `translate(${dragX}px, ${dragY}px)` : null}
@@ -247,8 +270,8 @@
     >
       <Resizable
         disabled={!resizable}
-        bind:width={panelWidth}
-        bind:height={panelHeight}
+        bind:width={() => liveWidth, setLiveWidth}
+        bind:height={() => liveHeight, setLiveHeight}
         minWidth={minPanelWidth}
         minHeight={minPanelHeight}
         maxWidth={availWidth ?? Number.POSITIVE_INFINITY}
@@ -325,6 +348,11 @@
   .panel-anchor {
     position: absolute;
     --resizable-handle-color: var(--chat-bubble-resize-handle-color, transparent);
+    --resizable-transition: var(
+      --chat-bubble-expand-transition,
+      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+      height 0.32s cubic-bezier(0.22, 1, 0.36, 1)
+    );
   }
 
   .chat-bubble[data-effective-vertical='bottom'] .panel-anchor {

package/dist/ChatBubble/ChatBubble.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ChatBubbleProperties } from './properties';
-declare const ChatBubble: import("svelte").Component<ChatBubbleProperties, {}, "open" | "dragX" | "dragY" | "panelWidth" | "panelHeight">;
+declare const ChatBubble: import("svelte").Component<ChatBubbleProperties, {}, "open" | "dragX" | "dragY" | "panelWidth" | "panelHeight" | "expanded" | "expandedPanelWidth" | "expandedPanelHeight">;
 type ChatBubble = ReturnType<typeof ChatBubble>;
 export default ChatBubble;

package/dist/ChatBubble/properties.d.ts

@@ -30,6 +30,9 @@ export type OptionalChatBubbleProperties = {
     panelHeight?: number;
     minPanelWidth?: number;
     minPanelHeight?: number;
+    expanded?: boolean;
+    expandedPanelWidth?: number;
+    expandedPanelHeight?: number;
     testId?: string;
     classes?: string;
 };

package/dist/Resizable/Resizable.svelte

@@ -210,10 +210,18 @@
     box-sizing: border-box;
     max-width: var(--resizable-max-width, none);
     max-height: var(--resizable-max-height, none);
+    transition: var(--resizable-transition, none);
   }
 
   .resizable.resizing {
     user-select: none;
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .resizable {
+      transition: none;
+    }
   }
 
   .handle {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-ui-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",