Select component Holocene updates

src/lib/components/top-nav.svelte

@@ -3,6 +3,7 @@
 
   import DataEncoderStatus from '$lib/components/data-encoder-status.svelte';
   import TimezoneSelect from '$lib/components/timezone-select.svelte';
+  import Button from '$lib/holocene/button.svelte';
   import Combobox from '$lib/holocene/combobox/combobox.svelte';
   import {
     Menu,
@@ -73,9 +74,16 @@
         optionValueKey="namespace"
         on:change={handleNamespaceSelect}
         minSize={32}
-        href={routeForNamespace({ namespace })}
-        linkDisabled={!namespaceExists}
-      />
+      >
+        <Button
+          slot="action"
+          variant="ghost"
+          size="xs"
+          href={routeForNamespace({ namespace })}
+          disabled={!namespaceExists}
+          leadingIcon="external-link"
+        />
+      </Combobox>
     {/if}
   </div>
   <div class="flex items-center gap-2">

src/lib/holocene/combobox/combobox.svelte

@@ -43,8 +43,6 @@
     'data-testid'?: string;
     error?: string;
     valid?: boolean;
-    href?: string;
-    linkDisabled?: boolean;
   }
 
   type UncontrolledStringOptionProps = {
@@ -84,8 +82,6 @@
   export let maxSize = 120;
   export let error = '';
   export let valid = true;
-  export let href = '';
-  export let linkDisabled = false;
 
   let displayValue: string;
   let selectedOption: string | T;
@@ -259,13 +255,7 @@
 </script>
 
 <MenuContainer {open} on:close={handleMenuClose}>
-  <Label
-    class="combobox-label"
-    hidden={labelHidden}
-    {required}
-    {label}
-    for={id}
-  />
+  <Label hidden={labelHidden} {required} {label} for={id} />
   <div class="combobox-wrapper" class:disabled class:invalid={!valid}>
     {#if leadingIcon}
       <Icon width={20} height={20} class="ml-2 shrink-0" name={leadingIcon} />
@@ -309,11 +299,9 @@
     >
       <Icon name={$open ? 'chevron-up' : 'chevron-down'} />
     </Button>
-    {#if href}
+    {#if $$slots.action}
       <div class="ml-1 h-full w-1 border-l-2 border-subtle" />
-      <Button variant="ghost" size="xs" {href} disabled={linkDisabled}
-        ><Icon name="external-link" /></Button
-      >
+      <slot name="action" />
     {/if}
   </div>
   {#if error && !valid}
@@ -348,14 +336,6 @@
 </MenuContainer>
 
 <style lang="postcss">
-  .combobox-label {
-    @apply font-secondary text-sm font-medium text-primary;
-
-    &.required {
-      @apply after:content-['*'];
-    }
-  }
-
   .combobox-wrapper {
     @apply surface-primary flex h-10 w-full flex-row items-center rounded-lg border-2 border-subtle text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-4 focus-within:ring-primary/70;
 

src/lib/holocene/select/option.svelte

@@ -4,6 +4,7 @@
     value: T;
     description?: string;
     disabled?: boolean;
+    class?: string;
   }
 
   export const EMPTY_OPTION: OptionType<string> = {
@@ -34,6 +35,8 @@
   export let value: T;
   export let description = '';
   export let disabled = false;
+  let className = '';
+  export { className as class };
 
   let selected = false;
   let _value: T | string;
@@ -76,6 +79,7 @@
   {selected}
   {description}
   {disabled}
+  class={className}
 >
   <slot name="leading" slot="leading" />
   <span bind:this={slotWrapper}>

src/lib/holocene/select/select.svelte

@@ -45,6 +45,7 @@
     onChange?: (value: T) => void;
     'data-testid'?: string;
     variant?: MenuButtonVariant;
+    required?: boolean;
   };
 
   export let label: string;
@@ -56,6 +57,7 @@
   export let leadingIcon: IconName = null;
   export let onChange: (value: T) => void = noop;
   export let variant: MenuButtonVariant = 'secondary';
+  export let required = false;
 
   // We get the "true" value of this further down but before the mount happens we should have some kind of value
   const valueCtx = writable<T>(value);
@@ -99,22 +101,28 @@
   });
 </script>
 
-<MenuContainer class="w-full" {open}>
-  <Label {label} hidden={labelHidden} for={id} />
+<MenuContainer {open}>
+  <Label {label} hidden={labelHidden} for={id} {required} />
   {#key $labelCtx}
     <MenuButton
       hasIndicator={!disabled}
       {disabled}
       controls="{id}-select"
       {variant}
     >
-      <Icon slot="leading" name={leadingIcon} />
+      <slot name="leading" slot="leading">
+        {#if leadingIcon}
+          <Icon name={leadingIcon} />
+        {/if}
+      </slot>
       <input
         {id}
         value={!value && placeholder !== '' ? placeholder : $labelCtx}
         tabindex="-1"
         disabled
         class:disabled
+        {required}
+        aria-required={required}
         {...$$restProps}
       />
       {#if disabled}
@@ -129,6 +137,6 @@
 
 <style lang="postcss">
   input {
-    @apply pointer-events-none w-full bg-transparent;
+    @apply pointer-events-none w-full bg-transparent text-sm;
   }
 </style>