@reshape-biotech/design-system 2.7.33 → 2.7.35

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/combobox/Combobox.stories.svelte

@@ -111,6 +111,62 @@
   let customAnchorSingle = $state<HTMLElement>(null!);
   let customAnchorGrouped = $state<HTMLElement>(null!);
   let customAnchorCustom = $state<HTMLElement>(null!);
+
+  // Generate a long list of countries for scrolling demo
+  const countries = [
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'au', label: 'Australia' },
+    { value: 'de', label: 'Germany' },
+    { value: 'fr', label: 'France' },
+    { value: 'it', label: 'Italy' },
+    { value: 'es', label: 'Spain' },
+    { value: 'jp', label: 'Japan' },
+    { value: 'cn', label: 'China' },
+    { value: 'in', label: 'India' },
+    { value: 'br', label: 'Brazil' },
+    { value: 'mx', label: 'Mexico' },
+    { value: 'za', label: 'South Africa' },
+    { value: 'eg', label: 'Egypt' },
+    { value: 'ng', label: 'Nigeria' },
+    { value: 'ar', label: 'Argentina' },
+    { value: 'cl', label: 'Chile' },
+    { value: 'co', label: 'Colombia' },
+    { value: 'pe', label: 'Peru' },
+    { value: 'se', label: 'Sweden' },
+    { value: 'no', label: 'Norway' },
+    { value: 'dk', label: 'Denmark' },
+    { value: 'fi', label: 'Finland' },
+    { value: 'pl', label: 'Poland' },
+    { value: 'nl', label: 'Netherlands' },
+    { value: 'be', label: 'Belgium' },
+    { value: 'ch', label: 'Switzerland' },
+    { value: 'at', label: 'Austria' },
+    { value: 'gr', label: 'Greece' },
+    { value: 'pt', label: 'Portugal' },
+    { value: 'ie', label: 'Ireland' },
+    { value: 'nz', label: 'New Zealand' },
+    { value: 'sg', label: 'Singapore' },
+    { value: 'my', label: 'Malaysia' },
+    { value: 'th', label: 'Thailand' },
+    { value: 'id', label: 'Indonesia' },
+    { value: 'ph', label: 'Philippines' },
+    { value: 'vn', label: 'Vietnam' },
+    { value: 'kr', label: 'South Korea' },
+  ];
+
+  let searchValueCountries = $state('');
+  let selectedCountries = $state<string[]>([]);
+  let customAnchorCountries = $state<HTMLElement>(null!);
+
+  const filteredCountries = $derived(
+    searchValueCountries === ''
+      ? countries
+      : countries.filter((country) =>
+          country.label.toLowerCase().includes(searchValueCountries.toLowerCase())
+        )
+  );
 </script>
 
 <Story name="Multiple Selection" asChild>
@@ -265,7 +321,7 @@
         />
         <Divider />
       </div>
-      <div class="flex max-h-80 flex-grow flex-col overflow-y-auto">
+      <div class="flex flex-grow flex-col">
         {#if searchValueGrouped === ''}
           {#each categories as category}
             <Combobox.Group>
@@ -307,6 +363,73 @@
   </Combobox.Root>
 </Story>
 
+<Story name="Long List with Scrolling (80vh max-height)" asChild>
+  <Combobox.Root
+    onOpenChange={(o) => {
+      if (!o) searchValueCountries = '';
+    }}
+    type="multiple"
+    name="countriesSelection"
+    items={filteredCountries}
+    bind:value={selectedCountries}
+  >
+    <div class="flex flex-wrap gap-2">
+      {#each selectedCountries as country}
+        <Tag>
+          {country}
+        </Tag>
+      {/each}
+    </div>
+    <Combobox.Trigger>
+      <div bind:this={customAnchorCountries}>
+        <Button variant="primary" size="sm">
+          <Icon>
+            {#snippet children(props)}
+              <List {...props} />
+            {/snippet}
+          </Icon>
+          Select countries
+        </Button>
+      </div>
+    </Combobox.Trigger>
+    <Combobox.Content
+      class="flex flex-col justify-between"
+      customAnchor={customAnchorCountries}
+    >
+      <div>
+        <Combobox.Input
+          placeholder="Search for a country"
+          oninput={(e: Event) => (searchValueCountries = (e.target as HTMLInputElement).value)}
+          autofocus
+        />
+        <Divider />
+      </div>
+      <div class="flex flex-grow flex-col">
+        {#if filteredCountries.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Countries</Combobox.GroupHeading>
+            {#each filteredCountries as country (country.value)}
+              <Combobox.Item value={country.value} label={country.label}>
+                {#snippet children({ selected })}
+                  {country.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {/each}
+          </Combobox.Group>
+        {:else}
+          <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+        {/if}
+      </div>
+    </Combobox.Content>
+    <div class="mt-4 rounded bg-blue-50 p-2 text-xs text-blue-700">
+      This story demonstrates the 80vh max-height with overflow scrolling for long lists (40 countries).
+    </div>
+  </Combobox.Root>
+</Story>
+
 <Story
   name="Interaction Test"
   asChild

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

@@ -28,7 +28,7 @@
           <Combobox.ScrollUpButton class="flex justify-center">
             <Icon icon={CaretUp} />
           </Combobox.ScrollUpButton>
-          <Combobox.Viewport class={paddedContent ? 'p-1' : ''}>
+          <Combobox.Viewport class="{paddedContent ? 'p-1' : ''} overflow-y-auto">
             {@render children()}
           </Combobox.Viewport>
           <Combobox.ScrollDownButton class="flex justify-center">
@@ -64,6 +64,8 @@
 
     z-index: 1;
 
+    max-height: 80vh;
+
     width: 100%;
 
     border-radius: 0.75rem;

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

@@ -561,6 +561,26 @@
   </div>
 </Story>
 
+<Story name="Long Menu with Scrolling (80vh max-height)">
+  <div class="py-12">
+    <Dropdown.Root open>
+      <Dropdown.Trigger>Actions Menu (30 items)</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content>
+          {#each Array.from({ length: 30 }, (_, i) => i + 1) as num}
+            <Dropdown.Item onSelect={() => console.log(`Action ${num} clicked`)}>
+              <p>Action {num}</p>
+            </Dropdown.Item>
+          {/each}
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+    <div class="mt-4 rounded bg-blue-50 p-2 text-xs text-blue-700">
+      This story demonstrates the 80vh max-height with overflow scrolling for long menus (30 items).
+    </div>
+  </div>
+</Story>
+
 <Story
   name="Interaction Test"
   asChild

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

@@ -23,7 +23,7 @@
 </script>
 
 <DropdownMenu.Content
-  class="z-10 flex flex-col {gap} rounded-md p-1 shadow-menu {variantClass} {widthClass} {className}"
+  class="z-10 flex flex-col {gap} rounded-md p-1 shadow-menu max-h-[80vh] overflow-y-auto {variantClass} {widthClass} {className}"
   {...restProps}
 >
   {@render children()}

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

@@ -19,7 +19,7 @@
 </script>
 
 <DropdownMenu.SubContent
-  class="z-10 {gap} flex flex-col rounded-md p-1 shadow-menu {variantClass} {className}"
+  class="z-10 {gap} flex flex-col rounded-md p-1 shadow-menu max-h-[80vh] overflow-y-auto {variantClass} {className}"
   {...restProps}
 >
   {@render children()}

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/components/select/Select.stories.svelte

@@ -53,6 +53,51 @@
       (v) => v !== itemValue
     );
   };
+
+  // Generate a long list of countries to test scrolling
+  const countries = [
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'au', label: 'Australia' },
+    { value: 'de', label: 'Germany' },
+    { value: 'fr', label: 'France' },
+    { value: 'it', label: 'Italy' },
+    { value: 'es', label: 'Spain' },
+    { value: 'jp', label: 'Japan' },
+    { value: 'cn', label: 'China' },
+    { value: 'in', label: 'India' },
+    { value: 'br', label: 'Brazil' },
+    { value: 'mx', label: 'Mexico' },
+    { value: 'za', label: 'South Africa' },
+    { value: 'eg', label: 'Egypt' },
+    { value: 'ng', label: 'Nigeria' },
+    { value: 'ar', label: 'Argentina' },
+    { value: 'cl', label: 'Chile' },
+    { value: 'co', label: 'Colombia' },
+    { value: 'pe', label: 'Peru' },
+    { value: 'se', label: 'Sweden' },
+    { value: 'no', label: 'Norway' },
+    { value: 'dk', label: 'Denmark' },
+    { value: 'fi', label: 'Finland' },
+    { value: 'pl', label: 'Poland' },
+    { value: 'nl', label: 'Netherlands' },
+    { value: 'be', label: 'Belgium' },
+    { value: 'ch', label: 'Switzerland' },
+    { value: 'at', label: 'Austria' },
+    { value: 'gr', label: 'Greece' },
+    { value: 'pt', label: 'Portugal' },
+    { value: 'ie', label: 'Ireland' },
+    { value: 'nz', label: 'New Zealand' },
+    { value: 'sg', label: 'Singapore' },
+    { value: 'my', label: 'Malaysia' },
+    { value: 'th', label: 'Thailand' },
+    { value: 'id', label: 'Indonesia' },
+    { value: 'ph', label: 'Philippines' },
+    { value: 'vn', label: 'Vietnam' },
+    { value: 'kr', label: 'South Korea' },
+  ];
+  let selectedCountry = $state<string | undefined>(undefined);
 </script>
 
 <Story name="Default (Single Select)" asChild>
@@ -217,3 +262,28 @@
     </div>
   </div>
 </Story>
+
+<Story name="Long List with Scrolling (80vh max-height)" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedCountry} items={countries} type="single">
+      <Select.Trigger
+        class="w-[250px]"
+        placeholder={'Select a country'}
+        displayValue={countries.find((c) => c.value === selectedCountry)?.label}
+      />
+      <Select.Portal>
+        <Select.Content>
+          {#each countries as item (item.value)}
+            <Select.Item value={item.value} label={item.label} />
+          {/each}
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedCountry ?? 'Nothing'}
+    </div>
+    <div class="mt-2 rounded bg-blue-50 p-2 text-xs text-blue-700">
+      This story demonstrates the 80vh max-height with overflow scrolling for long lists (40 items).
+    </div>
+  </div>
+</Story>

package/dist/components/select/components/SelectContent.svelte

@@ -21,14 +21,14 @@
   {...restProps}
   {sideOffset}
   class={twMerge(
-    'relative z-50 w-[var(--bits-select-anchor-width)] min-w-[8rem] overflow-hidden rounded-lg bg-surface text-primary shadow-menu',
+    'relative z-50 w-[var(--bits-select-anchor-width)] min-w-[8rem] max-h-[80vh] overflow-hidden rounded-lg bg-surface text-primary shadow-menu',
     className
   )}
 >
   <SelectPrimitive.ScrollUpButton class="flex justify-center">
     <Icon color="tertiary" icon={CaretUp} />
   </SelectPrimitive.ScrollUpButton>
-  <SelectPrimitive.Viewport class="p-1 ">
+  <SelectPrimitive.Viewport class="p-1 overflow-y-auto">
     {@render children()}
   </SelectPrimitive.Viewport>
   <SelectPrimitive.ScrollDownButton class="flex justify-center">

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.d.ts

@@ -1,5 +1,5 @@
 import { colors } from './tokens/colors';
-export type OutputName = 'cfu' | 'halo' | 'seed' | 'seedling' | 'leaf' | 'insect' | 'egg' | 'food' | 'positive' | 'negative' | 'review' | 'tntc' | 'contaminated' | 'countable' | 'full_growth' | 'reduced_growth' | 'dotted_growth';
+export type OutputName = 'cfu' | 'halo' | 'seed' | 'seedling' | 'leaf' | 'insect' | 'egg' | 'food' | 'positive' | 'negative' | 'review' | 'tntc' | 'contaminated' | 'countable' | 'full_growth' | 'reduced_growth' | 'dotted_growth' | 'root' | 'shoot';
 declare const annotationOutputFadedFillColors: {
     [K in OutputName]: string;
 };
@@ -750,6 +750,8 @@ export declare const tokens: {
         full_growth: any;
         reduced_growth: any;
         dotted_growth: any;
+        root: any;
+        shoot: any;
     };
     annotationOutputFillColors: {
         cfu: string;
@@ -769,6 +771,8 @@ export declare const tokens: {
         full_growth: string;
         reduced_growth: string;
         dotted_growth: string;
+        root: string;
+        shoot: string;
     };
     annotationOutputFadedFillColors: {
         cfu: string;
@@ -788,6 +792,8 @@ export declare const tokens: {
         full_growth: string;
         reduced_growth: string;
         dotted_growth: string;
+        root: string;
+        shoot: string;
     };
     annotationOutputStrokeColors: {
         cfu: string;
@@ -807,6 +813,8 @@ export declare const tokens: {
         full_growth: string;
         reduced_growth: string;
         dotted_growth: string;
+        root: string;
+        shoot: string;
     };
     annotationOutputFadedStrokeColors: {
         cfu: string;
@@ -826,5 +834,7 @@ export declare const tokens: {
         full_growth: string;
         reduced_growth: string;
         dotted_growth: string;
+        root: string;
+        shoot: string;
     };
 };

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],
@@ -143,11 +143,11 @@ const lightChartColor = {
 const annotationOutputBaseColors = {
     cfu: colors.periwinkle[5],
     halo: colors.yellow[5],
-    seed: colors.lime[1],
+    seed: colors.orange[5],
     seedling: colors.lime[5],
     leaf: colors.green[5],
-    insect: colors.orange[1],
-    egg: colors.orange[2],
+    insect: colors.orange[5],
+    egg: colors.blue[5],
     food: colors.pear[5],
     positive: colors.red[5],
     negative: colors.gray[4],
@@ -158,6 +158,8 @@ const annotationOutputBaseColors = {
     full_growth: colors.gray[4],
     reduced_growth: colors.gray[4],
     dotted_growth: colors.gray[4],
+    root: colors.periwinkle[5],
+    shoot: colors.blue[5],
 };
 const annotationOutputFillColors = {
     cfu: annotationOutputBaseColors.cfu[25],
@@ -177,6 +179,8 @@ const annotationOutputFillColors = {
     full_growth: annotationOutputBaseColors.full_growth[25],
     reduced_growth: annotationOutputBaseColors.reduced_growth[25],
     dotted_growth: annotationOutputBaseColors.dotted_growth[25],
+    root: annotationOutputBaseColors.root[25],
+    shoot: annotationOutputBaseColors.shoot[25],
 };
 const annotationOutputFadedFillColors = {
     cfu: annotationOutputBaseColors.cfu[10],
@@ -196,6 +200,8 @@ const annotationOutputFadedFillColors = {
     full_growth: annotationOutputBaseColors.full_growth[10],
     reduced_growth: annotationOutputBaseColors.reduced_growth[10],
     dotted_growth: annotationOutputBaseColors.dotted_growth[10],
+    root: annotationOutputBaseColors.root[10],
+    shoot: annotationOutputBaseColors.shoot[10],
 };
 const annotationOutputStrokeColors = {
     cfu: annotationOutputBaseColors.cfu.default,
@@ -215,6 +221,8 @@ const annotationOutputStrokeColors = {
     full_growth: annotationOutputBaseColors.full_growth.default,
     reduced_growth: annotationOutputBaseColors.reduced_growth.default,
     dotted_growth: annotationOutputBaseColors.dotted_growth.default,
+    root: annotationOutputBaseColors.root.default,
+    shoot: annotationOutputBaseColors.shoot.default,
 };
 const annotationOutputFadedStrokeColors = {
     cfu: annotationOutputBaseColors.cfu[50],
@@ -234,6 +242,8 @@ const annotationOutputFadedStrokeColors = {
     full_growth: annotationOutputBaseColors.full_growth[50],
     reduced_growth: annotationOutputBaseColors.reduced_growth[50],
     dotted_growth: annotationOutputBaseColors.dotted_growth[50],
+    root: annotationOutputBaseColors.root[50],
+    shoot: annotationOutputBaseColors.shoot[50],
 };
 const darkTextColor = {
     'dark-primary': colors.base.white.default,

package/package.json

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