DT-3161: Add menu button class to select

src/lib/holocene/icon/paths.ts

@@ -1,4 +1,5 @@
 import activity from './svg/activity.svelte';
+import addSquare from './svg/add-square.svelte';
 import add from './svg/add.svelte';
 import apple from './svg/apple.svelte';
 import archives from './svg/archives.svelte';
@@ -126,9 +127,11 @@ import verticalEllipsis from './svg/vertical-ellipsis.svelte';
 import warning from './svg/warning.svelte';
 import workflow from './svg/workflow.svelte';
 import xmarkFilled from './svg/xmark-filled.svelte';
+import xmarkSquare from './svg/xmark-square.svelte';
 
 export const icons = {
   activity,
+  'add-square': addSquare,
   add,
   apple,
   archives,
@@ -256,6 +259,7 @@ export const icons = {
   'system-window': systemWindow,
   workflow,
   'xmark-filled': xmarkFilled,
+  'xmark-square': xmarkSquare,
 } as const;
 
 export type IconName = keyof typeof icons;

src/lib/holocene/icon/svg/add-square.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="M 2.571443,2.571419 V 21.428482 H 21.428696 V 2.571419 Z M 0,0 H 2.571443 21.428696 24 V 2.571419 21.428482 24 H 21.428696 2.571443 0 V 21.428482 2.571419 Z M 10.714295,17.999941 V 16.714228 13.285687 H 7.285717 5.9999977 V 10.714259 H 7.285717 10.714295 V 7.285696 5.999982 h 2.571438 v 1.285714 3.428563 h 3.428577 1.285719 v 2.571428 H 16.71431 13.285733 v 3.428541 1.285713 z"
+    fill="currentcolor"
+  />
+</Svg>

src/lib/holocene/icon/svg/xmark-square.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="M 2.571443,21.428581 V 2.5715179 H 21.428696 V 21.428581 Z M 0,24 H 2.571443 21.428696 24 V 21.428581 2.5715179 0 H 21.428696 2.571443 0 V 2.5715179 21.428581 Z m 17.244658,-8.57141 -0.910711,-0.910707 -2.517866,-2.517856 2.517866,-2.5178331 0.910711,-0.91073 -1.816067,-1.81606 -0.910712,0.9107075 -2.517865,2.5178556 -2.5178665,-2.5178556 -0.9107112,-0.9107075 -1.8160675,1.81606 0.9107112,0.91073 2.517866,2.5178331 -2.517866,2.517856 -0.9107112,0.910707 1.8160675,1.816083 0.9107112,-0.91073 2.5178665,-2.517833 2.517865,2.517833 0.910712,0.91073 z"
+    fill="currentcolor"
+  />
+</Svg>

src/lib/holocene/select/select.svelte

@@ -24,7 +24,7 @@
   import { writable, type Writable } from 'svelte/store';
 
   import { onMount, setContext } from 'svelte';
-  import { twMerge } from 'tailwind-merge';
+  import { type ClassNameValue, twMerge as merge } from 'tailwind-merge';
 
   import type { ButtonStyles } from '$lib/holocene/button.svelte';
   import type { IconName } from '$lib/holocene/icon';
@@ -45,6 +45,7 @@
     leadingIcon?: IconName;
     onChange?: (value: T) => void;
     'data-testid'?: string;
+    menuButtonClass?: string;
     menuClass?: string;
     variant?: ButtonStyles['variant'];
     required?: boolean;
@@ -61,6 +62,7 @@
   export let loading = false;
   export let leadingIcon: IconName = null;
   export let onChange: (value: T) => void = () => {};
+  export let menuButtonClass: ClassNameValue = undefined;
   export let menuClass: string | undefined = undefined;
   export let variant: ButtonStyles['variant'] = 'secondary';
   export let required = false;
@@ -113,7 +115,7 @@
   <Label class="pb-1" {label} hidden={labelHidden} for={id} {required} />
   {#key $labelCtx}
     <MenuButton
-      class={twMerge('w-full', !valid ? 'border-danger' : undefined)}
+      class={merge('w-full', !valid && 'border-danger', menuButtonClass)}
       hasIndicator={!disabled}
       disabled={disabled || loading}
       controls="{id}-select"