@reshape-biotech/design-system 2.7.32 → 2.7.34

package/dist/app.css

@@ -112,4 +112,11 @@
   html:has(.drawer-auto-gutter .drawer-toggle:checked) {
     scrollbar-gutter: auto;
   }
+
+  /* Global focus styles using brand colors */
+  *:focus-visible {
+    outline: 2px solid theme('borderColor.hover');
+    outline-offset: 1px;
+    border-radius: theme('borderRadius.lg');
+  }
 }

package/dist/components/button/Button.svelte

@@ -38,7 +38,7 @@
     loading = false,
     disabled = false,
     accessibilityLabel = '',
-    size = 'lg',
+    size = 'md',
     id = undefined,
     tabindex = undefined,
     variant = 'primary',

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -463,6 +463,104 @@
   </div>
 </Story>
 
+<Story name="Custom Gap">
+  <div class="flex gap-8 py-12">
+    <div>
+      <p class="mb-2 text-sm text-secondary">Default (gap-1)</p>
+      <Dropdown.Root open>
+        <Dropdown.Trigger>Default Gap</Dropdown.Trigger>
+        <Dropdown.Portal>
+          <Dropdown.Content>
+            <Dropdown.Item>
+              <p>Item 1</p>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <p>Item 2</p>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <p>Item 3</p>
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+    </div>
+
+    <div>
+      <p class="mb-2 text-sm text-secondary">No gap (gap-0)</p>
+      <Dropdown.Root open>
+        <Dropdown.Trigger>No Gap</Dropdown.Trigger>
+        <Dropdown.Portal>
+          <Dropdown.Content gap="gap-0">
+            <Dropdown.Item>
+              <p>Item 1</p>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <p>Item 2</p>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <p>Item 3</p>
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+    </div>
+
+    <div>
+      <p class="mb-2 text-sm text-secondary">Large gap (gap-3)</p>
+      <Dropdown.Root open>
+        <Dropdown.Trigger>Large Gap</Dropdown.Trigger>
+        <Dropdown.Portal>
+          <Dropdown.Content gap="gap-3">
+            <Dropdown.Item>
+              <p>Item 1</p>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <p>Item 2</p>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <p>Item 3</p>
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+    </div>
+  </div>
+</Story>
+
+<Story name="Submenu with Custom Gap">
+  <div class="py-12">
+    <Dropdown.Root open>
+      <Dropdown.Trigger>Submenu Gap Example</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content gap="gap-2">
+          <Dropdown.Item>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub open>
+            <Dropdown.SubTrigger>
+              <p>More options</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.SubContent gap="gap-0">
+              <Dropdown.Item>
+                <p>Sub item 1 (no gap)</p>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <p>Sub item 2 (no gap)</p>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <p>Sub item 3 (no gap)</p>
+              </Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item>
+            <p>Last item</p>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  </div>
+</Story>
+
 <Story
   name="Interaction Test"
   asChild

package/dist/components/dropdown/components/dropdown-content.svelte

@@ -7,6 +7,7 @@
     class: className = '',
     variant = 'primary',
     matchTriggerWidth = false,
+    gap = 'gap-1',
     ...restProps
   }: DropdownContentProps = $props();
 
@@ -22,7 +23,7 @@
 </script>
 
 <DropdownMenu.Content
-  class="z-10 rounded-md p-1 shadow-menu {variantClass} {widthClass} {className}"
+  class="z-10 flex flex-col {gap} rounded-md p-1 shadow-menu {variantClass} {widthClass} {className}"
   {...restProps}
 >
   {@render children()}

package/dist/components/dropdown/components/dropdown-item.svelte

@@ -18,7 +18,7 @@
     {:else}
       <div
         {...props}
-        class="h-9 cursor-pointer items-center rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+        class="flex h-9 cursor-pointer items-center rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
       >
         {@render children?.()}
       </div>

package/dist/components/dropdown/components/dropdown-sub-content.svelte

@@ -2,7 +2,13 @@
   import { DropdownMenu } from 'bits-ui';
   import type { DropdownSubContentProps } from '../types';
 
-  let { children, class: className = '', variant = 'primary', ...restProps }: DropdownSubContentProps = $props();
+  let {
+    children,
+    class: className = '',
+    variant = 'primary',
+    gap = 'gap-1',
+    ...restProps
+  }: DropdownSubContentProps = $props();
 
   const variantClasses: Record<string, string> = {
     primary: 'bg-surface text-primary',
@@ -13,7 +19,7 @@
 </script>
 
 <DropdownMenu.SubContent
-  class="z-10 rounded-md p-1 shadow-menu {variantClass} {className}"
+  class="z-10 {gap} flex flex-col rounded-md p-1 shadow-menu {variantClass} {className}"
   {...restProps}
 >
   {@render children()}

package/dist/components/dropdown/components/dropdown-sub-trigger.svelte

@@ -17,7 +17,7 @@
     {:else}
       <div
         {...props}
-        class="flex h-8 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+        class="flex h-9 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
       >
         {#if !hideChevron && side === 'left'}
           <Icon color="tertiary" icon={chevronIcon} size={16} />

package/dist/components/dropdown/types.d.ts

@@ -21,6 +21,7 @@ export type DropdownContentProps = {
     class?: string;
     variant?: DropdownContentVariant;
     matchTriggerWidth?: boolean;
+    gap?: string;
 } & BitsDropdownMenuContentProps;
 export type DropdownItemProps = {
     children?: Snippet;
@@ -42,4 +43,5 @@ export type DropdownSubContentProps = {
     children: Snippet;
     class?: string;
     variant?: DropdownContentVariant;
+    gap?: string;
 } & BitsDropdownMenuSubContentProps;

package/dist/components/input/Input.svelte

@@ -170,7 +170,7 @@ input::placeholder {
 
   div:not(:focus-within):hover {
 
-    border-color: #5750ee40
+    border-color: #5750ee80
 }
 
   div:focus-within {

package/dist/components/modal/Modal.stories.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import Warning from 'phosphor-svelte/lib/Warning';
+  import SealCheck from 'phosphor-svelte/lib/SealCheck';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { Root as ModalRootForMeta } from './index';
   import * as Modal from './index';
@@ -29,10 +30,10 @@
     </Modal.Trigger>
     <Modal.Content>
       <Modal.Title>Edit Profile</Modal.Title>
-      <div class="space-y-4">
-        <p class="text-sm text-secondary">
-          Make changes to your profile here. Click save when you're done.
-        </p>
+      <Modal.Description>
+        Make changes to your profile here. Click save when you're done.
+      </Modal.Description>
+      <div class="space-y-4 py-2">
         <div class="space-y-2">
           <label class="text-sm font-medium" for="name">Name</label>
           <input id="name" class="w-full rounded border border-input px-3 py-2" value="John Doe" />
@@ -61,7 +62,7 @@
     </Modal.Trigger>
     <Modal.Content>
       <Modal.Title>Are you absolutely sure?</Modal.Title>
-      <Modal.Description class="text-sm leading-[1.43] tracking-[1.14%] text-secondary">
+      <Modal.Description>
         This action cannot be undone. This will permanently delete your account and remove your data
         from our servers.
       </Modal.Description>
@@ -75,16 +76,16 @@
   </Modal.Root>
 </Story>
 
-<Story name="Alert Modal (Figma Design)" asChild>
+<Story name="Alert Modal" asChild>
   <Modal.Root open>
     <Modal.Trigger>
       <Button variant="primary">Open Alert Modal</Button>
     </Modal.Trigger>
-    <Modal.Content class="w-[544px] max-w-[544px] p-0">
+    <Modal.Content withClose={false}>
       <Modal.Title>
         {#snippet icon()}
           <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-danger p-2">
-            <Icon class="h-7 w-7 text-danger">
+            <Icon class="text-icon-danger" size={24}>
               {#snippet children(props)}
                 <Warning {...props} />
               {/snippet}
@@ -93,9 +94,8 @@
         {/snippet}
         Delete this job?
       </Modal.Title>
-      <Modal.Description class="text-sm text-secondary">
-        "CFU Air" will be permanently deleted for all users in your organization. This action cannot
-        be undone.
+      <Modal.Description>
+        This modal doesn't have a close button. You must select one of the action buttons below.
       </Modal.Description>
 
       <Modal.Bottom>
@@ -106,6 +106,46 @@
   </Modal.Root>
 </Story>
 
+<Story name="Sticky Header" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">Modal with Sticky Header</Button>
+    </Modal.Trigger>
+    <Modal.Content class="flex flex-col p-0" withClose={true}>
+      <Modal.Title sticky>
+        {#snippet icon()}
+          <Icon class="h-5 w-5 text-icon-secondary">
+            {#snippet children(props)}
+              <SealCheck {...props} />
+            {/snippet}
+          </Icon>
+        {/snippet}
+        Sticky Header
+      </Modal.Title>
+      <Modal.ScrollContent>
+        <h4 class="font-semibold">Information</h4>
+        <p class="text-sm text-secondary mt-2">
+          This is content to demonstrate scrolling. The sticky header and footer will remain visible
+          at the top and bottom as you scroll through this modal content.
+        </p>
+        <div class="space-y-2 mt-4">
+          {#each Array(10) as _, i}
+            <div class="bg-surface rounded-lg p-3 border border-input">
+              <p class="text-sm">Item {i + 1}</p>
+              <p class="text-xs text-secondary mt-1">
+                This is item number {i + 1} in the list. Continue scrolling to see more items.
+              </p>
+            </div>
+          {/each}
+        </div>
+      </Modal.ScrollContent>
+      <Modal.Bottom sticky>
+        <Modal.Close variant="primary">Continue</Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
 <Story name="Custom Button Rendering" asChild>
   <Modal.Root open>
     <Modal.Trigger>
@@ -113,7 +153,7 @@
     </Modal.Trigger>
     <Modal.Content>
       <Modal.Title>Custom Button Rendering</Modal.Title>
-      <Modal.Description class="text-sm text-secondary">
+      <Modal.Description>
         This modal demonstrates rendering custom buttons within Modal.Close components for proper
         functionality.
       </Modal.Description>
@@ -130,32 +170,13 @@
   </Modal.Root>
 </Story>
 
-<Story name="No Close Button" asChild>
-  <Modal.Root open>
-    <Modal.Trigger>
-      <Button variant="primary">Open Modal (No Close)</Button>
-    </Modal.Trigger>
-    <Modal.Content withClose={false}>
-      <Modal.Title>Alert</Modal.Title>
-      <div class="space-y-4">
-        <p class="text-sm text-secondary">
-          This modal doesn't have a close button. You must use the action buttons below.
-        </p>
-      </div>
-      <Modal.Bottom>
-        <Modal.Close variant="secondary">Cancel</Modal.Close>
-        <Modal.Close variant="primary">Continue</Modal.Close>
-      </Modal.Bottom>
-    </Modal.Content>
-  </Modal.Root>
-</Story>
 
 <Story name="Custom Styling" asChild>
   <Modal.Root open>
     <Modal.Trigger>
       <Button variant="primary">Open Custom Modal</Button>
     </Modal.Trigger>
-    <Modal.Content class="min-w-full bg-accent p-8">
+    <Modal.Content class="w-2xs bg-accent-inverse" withClose={false}>
       <Modal.Title class="text-xl text-primary-inverse">Custom Styled Modal</Modal.Title>
       <div class="space-y-4 pt-4">
         <p class="text-sm text-secondary-inverse">
@@ -167,7 +188,7 @@
         </div>
       </div>
       <Modal.Bottom>
-        <Modal.Close variant="secondary">Close</Modal.Close>
+        <Modal.Close variant="secondary-inverse">Close</Modal.Close>
       </Modal.Bottom>
     </Modal.Content>
   </Modal.Root>
@@ -226,10 +247,10 @@
     </Modal.Trigger>
     <Modal.Content withPortal={false}>
       <Modal.Title>Edit Profile</Modal.Title>
-      <div class="space-y-4">
-        <p class="text-sm text-secondary">
-          Make changes to your profile here. Click save when you're done.
-        </p>
+      <Modal.Description>
+        Make changes to your profile here. Click save when you're done.
+      </Modal.Description>
+      <div class="space-y-4 py-2">
         <div class="space-y-2">
           <label class="text-sm font-medium" for="name">Name</label>
           <input id="name" class="w-full rounded border border-input px-3 py-2" value="John Doe" />

package/dist/components/modal/components/modal-bottom.svelte

@@ -2,14 +2,22 @@
   import { twMerge } from 'tailwind-merge';
   import type { ModalBottomProps } from '../types';
 
-  let { children, class: className = '', ...restProps }: ModalBottomProps = $props();
+  let { children, class: className = '', sticky = false, ...restProps }: ModalBottomProps = $props();
 
-  const baseClasses = 'border-t border-static -mx-5';
+  const baseClasses = '-mx-5';
   const finalClasses = twMerge(baseClasses, className);
 </script>
 
-<div class={finalClasses} {...restProps}>
-  <div class="flex justify-end gap-4 px-5 py-4 pb-0">
-    {@render children()}
+{#if sticky}
+  <div class={twMerge('sticky bottom-0 z-10 w-full shrink-0 bg-surface border-t border-static', className)} {...restProps}>
+    <div class="flex justify-end gap-4 px-4 py-3 w-full">
+      {@render children()}
+    </div>
   </div>
-</div>
+{:else}
+  <div class={finalClasses} {...restProps}>
+    <div class="flex justify-end gap-4 px-5 pt-4 pb-0">
+      {@render children()}
+    </div>
+  </div>
+{/if}

package/dist/components/modal/components/modal-close.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { Dialog } from 'bits-ui';
+  import X from 'phosphor-svelte/lib/X';
   import Button from '../../button/Button.svelte';
+  import { IconButton } from '../../icon-button';
+  import { Icon } from '../../icons';
   import type { ModalCloseProps } from '../types';
 
   let {
@@ -13,7 +16,13 @@
 </script>
 
 <Dialog.Close class={className} {...restProps} {disabled}>
-  <Button {variant} {disabled} tabindex={-1}>
-    {@render children()}
-  </Button>
+  {#if children}
+    <Button {variant} {disabled} tabindex={-1}>
+      {@render children()}
+    </Button>
+  {:else}
+    <IconButton variant="transparent" size="sm" {disabled} tabindex={-1} rounded={false}>
+      <Icon icon={X} />
+    </IconButton>
+  {/if}
 </Dialog.Close>

package/dist/components/modal/components/modal-content.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import X from 'phosphor-svelte/lib/X';
-  import { Icon } from '../../icons/index.js';
   import { Dialog } from 'bits-ui';
   import { scale } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
   import type { ModalContentProps } from '../types';
   import Overlay from './modal-overlay.svelte';
+  import Close from './modal-close.svelte';
 
   let {
     children,
@@ -17,17 +16,13 @@
   }: ModalContentProps = $props();
 
   const baseClasses =
-    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 bg-surface p-5 shadow-lg sm:rounded-lg';
+    'fixed left-1/2 top-1/2 z-50 flex flex-col w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 p-5 bg-surface shadow-menu rounded-xl overflow-hidden max-h-[calc(100vh-4rem)]';
   const finalClasses = twMerge(baseClasses, className);
 </script>
 
 {#snippet withCloseButton()}
   {#if withClose}
-    <Dialog.Close
-      class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
-    >
-      <Icon icon={X} />
-    </Dialog.Close>
+    <Close class="absolute right-2 top-2 z-20" />
   {/if}
 {/snippet}
 

package/dist/components/modal/components/modal-description.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { ModalDescriptionProps } from '../types';
+  import { twMerge } from 'tailwind-merge';
+
+  let { children, class: className = '', ...restProps }: ModalDescriptionProps = $props();
+
+  const baseClasses = 'text-sm text-secondary py-2';
+  const finalClasses = twMerge(baseClasses, className);
+</script>
+
+<Dialog.Description class={finalClasses} {...restProps}>
+  {@render children()}
+</Dialog.Description>
+

package/dist/components/modal/components/modal-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalDescriptionProps } from '../types';
+declare const ModalDescription: import("svelte").Component<ModalDescriptionProps, {}, "">;
+type ModalDescription = ReturnType<typeof ModalDescription>;
+export default ModalDescription;

package/dist/components/modal/components/modal-scroll-content.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { ModalScrollContentProps } from '../types';
+
+  let { children, class: className = '', ...restProps }: ModalScrollContentProps = $props();
+
+  const baseClasses = 'flex-1 overflow-y-auto min-h-0 p-5';
+  const finalClasses = twMerge(baseClasses, className);
+</script>
+
+<div class={finalClasses} tabindex="-1" {...restProps}>
+  {@render children()}
+</div>
+

package/dist/components/modal/components/modal-scroll-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalScrollContentProps } from '../types';
+declare const ModalScrollContent: import("svelte").Component<ModalScrollContentProps, {}, "">;
+type ModalScrollContent = ReturnType<typeof ModalScrollContent>;
+export default ModalScrollContent;

package/dist/components/modal/components/modal-title.svelte

@@ -3,19 +3,38 @@
   import type { ModalTitleProps } from '../types';
   import { twMerge } from 'tailwind-merge';
 
-  let { children, class: className = '', icon, ...restProps }: ModalTitleProps = $props();
+  let { children, class: className = '', icon, sticky = false, ...restProps }: ModalTitleProps = $props();
 
-  const baseClasses = 'text-xl font-semibold tracking-tight text-primary';
-  const finalClasses = twMerge(baseClasses, className);
+  const baseClasses = $derived(sticky 
+    ? 'text-base font-semibold tracking-tight text-primary'
+    : 'text-xl font-semibold tracking-tight text-primary');
+  const finalClasses = $derived(twMerge(baseClasses, className));
 </script>
 
-<div class="space-y-6">
-  {#if icon}
-    <div class="flex justify-start">
-      {@render icon()}
+{#if sticky}
+  <div class="sticky top-0 z-10 w-full h-12 shrink-0 bg-surface border-b border-static">
+    <div class="flex h-12 items-center justify-between overflow-hidden px-4 py-2 w-full">
+      <div class="flex gap-2 items-center relative shrink-0">
+        {#if icon}
+          <div class="relative shrink-0 text-icon-secondary">
+            {@render icon()}
+          </div>
+        {/if}
+        <Dialog.Title class={finalClasses} {...restProps}>
+          {@render children()}
+        </Dialog.Title>
+      </div>
     </div>
-  {/if}
-  <Dialog.Title class={finalClasses} {...restProps}>
-    {@render children()}
-  </Dialog.Title>
-</div>
+  </div>
+{:else}
+  <div class="space-y-5">
+    {#if icon}
+      <div class="flex justify-start">
+        {@render icon()}
+      </div>
+    {/if}
+    <Dialog.Title class={finalClasses} {...restProps}>
+      {@render children()}
+    </Dialog.Title>
+  </div>
+{/if}

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

@@ -1,12 +1,12 @@
-import { Dialog } from 'bits-ui';
 import Content from './components/modal-content.svelte';
 import Overlay from './components/modal-overlay.svelte';
 import Trigger from './components/modal-trigger.svelte';
 import Title from './components/modal-title.svelte';
+import Description from './components/modal-description.svelte';
+import ScrollContent from './components/modal-scroll-content.svelte';
 import Bottom from './components/modal-bottom.svelte';
 import Close from './components/modal-close.svelte';
 export declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
 export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
-export declare const Description: import("svelte").Component<Dialog.DescriptionProps, {}, "ref">;
-export { Content, Overlay, Trigger, Title, Bottom, Close };
+export { Content, Overlay, Trigger, Title, Description, ScrollContent, Bottom, Close };
 export * from './types';

package/dist/components/modal/index.js

@@ -4,12 +4,13 @@ import Content from './components/modal-content.svelte';
 import Overlay from './components/modal-overlay.svelte';
 import Trigger from './components/modal-trigger.svelte';
 import Title from './components/modal-title.svelte';
+import Description from './components/modal-description.svelte';
+import ScrollContent from './components/modal-scroll-content.svelte';
 import Bottom from './components/modal-bottom.svelte';
 import Close from './components/modal-close.svelte';
 // Re-export Dialog primitives
 export const Root = Dialog.Root;
 export const Portal = Dialog.Portal;
-export const Description = Dialog.Description;
 // Export custom components
-export { Content, Overlay, Trigger, Title, Bottom, Close };
+export { Content, Overlay, Trigger, Title, Description, ScrollContent, Bottom, Close };
 export * from './types';

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

@@ -1,4 +1,4 @@
-import { type DialogContentProps as BitsDialogContentProps, type DialogOverlayProps as BitsDialogOverlayProps, type DialogTriggerProps as BitsDialogTriggerProps, type DialogTitleProps as BitsDialogTitleProps, type DialogCloseProps as BitsDialogCloseProps } from 'bits-ui';
+import { type DialogContentProps as BitsDialogContentProps, type DialogOverlayProps as BitsDialogOverlayProps, type DialogTriggerProps as BitsDialogTriggerProps, type DialogTitleProps as BitsDialogTitleProps, type DialogDescriptionProps as BitsDialogDescriptionProps, type DialogCloseProps as BitsDialogCloseProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ButtonVariant } from '../button/Button.svelte';
@@ -18,13 +18,23 @@ export type ModalTitleProps = {
     children: Snippet;
     class?: string;
     icon?: Snippet;
+    sticky?: boolean;
 } & BitsDialogTitleProps;
+export type ModalDescriptionProps = {
+    children: Snippet;
+    class?: string;
+} & BitsDialogDescriptionProps;
+export type ModalScrollContentProps = {
+    children: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
 export type ModalBottomProps = {
     children: Snippet;
     class?: string;
+    sticky?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 export type ModalCloseProps = {
-    children: Snippet;
+    children?: Snippet;
     class?: string;
     variant?: ButtonVariant;
     onclick?: (event: MouseEvent) => void;

package/dist/tailwind.preset.d.ts

@@ -494,6 +494,28 @@ declare const config: {
                 hover: string;
                 focus: string;
             };
+            ringColor: {
+                'dark-static': string;
+                'dark-input': string;
+                'dark-interactive': string;
+                'dark-hover': string;
+                'dark-focus': string;
+                'dark-danger': string;
+                static: string;
+                input: string;
+                interactive: string;
+                hover: string;
+                focus: string;
+                danger: string;
+                'static-inverse': string;
+                'interactive-inverse': string;
+                'blue-inverse': string;
+                'orange-inverse': string;
+                'pink-inverse': string;
+                'lime-inverse': string;
+                white: string;
+                axis: string;
+            };
             fontFamily: {
                 mono: string[];
                 sans: string[];

package/dist/tailwind.preset.js

@@ -11,6 +11,9 @@ const config = {
             textColor,
             boxShadow,
             outlineColor,
+            ringColor: {
+                ...borderColor,
+            },
             fontFamily: {
                 mono: ['"Geist Mono"', 'monospace'],
                 sans: ['"af Another Sans"', 'sans-serif'],

package/dist/tokens.js

@@ -43,7 +43,7 @@ const lightBorderColor = {
     static: colors.base.midnight[8],
     input: colors.base.midnight[10],
     interactive: colors.base.midnight[15],
-    hover: colors.periwinkle[5][25],
+    hover: colors.periwinkle[5][50],
     focus: colors.periwinkle[5].default,
     danger: colors.red[5].default,
     'static-inverse': colors.base.white[10],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.32",
+  "version": "2.7.34",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",