@reshape-biotech/design-system 2.7.34 → 2.7.35

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/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/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

@@ -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.34",
+  "version": "2.7.35",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",