Support mergable classes

src/lib/holocene/accordion.svelte

@@ -2,6 +2,7 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import { noop } from 'svelte/internal';
 
+  import { twMerge as merge } from 'tailwind-merge';
   import { v4 } from 'uuid';
 
   import Badge from '$lib/holocene/badge.svelte';
@@ -45,7 +46,10 @@
 </script>
 
 <div
-  class="surface-primary flex w-full cursor-default flex-col rounded-xl border-2 p-4 text-primary {className}"
+  class={merge(
+    'surface-primary flex w-full cursor-default flex-col rounded-xl border-2 p-4 text-primary',
+    className,
+  )}
   {...$$restProps}
 >
   <button

src/lib/holocene/alert.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import Icon from '$lib/holocene/icon/icon.svelte';
 
   import type { IconName } from './icon/paths';
@@ -45,7 +47,7 @@
 </script>
 
 <div
-  class="alert flex {intent} {className}"
+  class={merge('alert flex', intent, className)}
   class:bold
   class:hidden
   {role}

src/lib/holocene/combobox/combobox.svelte

@@ -3,6 +3,7 @@
   import { writable } from 'svelte/store';
 
   import { createEventDispatcher } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import ComboboxOption from '$lib/holocene/combobox/combobox-option.svelte';
   import MenuContainer from '$lib/holocene/menu/menu-container.svelte';
@@ -262,7 +263,7 @@
       type="text"
       value={displayValue}
       class:disabled
-      class="combobox-input {className}"
+      class={merge('combobox-input', className)}
       role="combobox"
       autocomplete="off"
       autocapitalize="off"

src/lib/holocene/copyable/button.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import Icon from '$lib/holocene/icon/icon.svelte';
 
   interface $$Props extends HTMLButtonAttributes {
@@ -18,7 +20,7 @@
   export { className as class };
 </script>
 
-<button class="copy-button {className}" on:click {...$$restProps}>
+<button class={merge('copy-button', className)} on:click {...$$restProps}>
   <Icon
     title={copied ? copySuccessIconTitle : copyIconTitle}
     name={copied ? 'checkmark' : 'copy'}

src/lib/holocene/filter-or-copy-buttons.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { noop } from 'svelte/internal';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import Icon from '$lib/holocene/icon/icon.svelte';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
 
@@ -22,7 +24,7 @@
 
 {#if show}
   <div
-    class="copy-or-filter {className}"
+    class={merge('copy-or-filter', className)}
     on:click|preventDefault|stopPropagation={noop}
     on:keyup|preventDefault|stopPropagation={noop}
   >

src/lib/holocene/icon-button.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import Icon from '$lib/holocene/icon/icon.svelte';
   import type { IconName } from '$lib/holocene/icon/paths';
 
@@ -18,7 +20,7 @@
 
 <button
   type="button"
-  class="icon-button {className}"
+  class={merge('icon-button', className)}
   on:click
   aria-label={label}
   {...$$restProps}

src/lib/holocene/input/input.svelte

@@ -2,6 +2,7 @@
   import type { HTMLInputAttributes } from 'svelte/elements';
 
   import { createEventDispatcher } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import type { IconName } from '$lib/holocene/icon/paths';
@@ -85,7 +86,7 @@
   $: disabled = disabled || copyable;
 </script>
 
-<div class="flex flex-col gap-1 {className}">
+<div class={merge('flex flex-col gap-1', className)}>
   <label class={theme} class:required class:sr-only={labelHidden} for={id}
     >{label}</label
   >

src/lib/holocene/link.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { HTMLAnchorAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import { goto } from '$app/navigation';
 
   import type { IconName } from '$lib/holocene/icon/paths';
@@ -38,7 +40,7 @@
   {href}
   target={newTab ? '_blank' : null}
   rel={newTab ? 'noreferrer' : null}
-  class="link {icon ? 'inline-flex' : 'inline'} {className}"
+  class={merge('link', icon ? 'inline-flex' : 'inline', className)}
   class:active
   on:click={onLinkClick}
   tabindex={href ? null : 0}

src/lib/holocene/menu/menu-button.svelte

@@ -10,6 +10,7 @@
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
   import { createEventDispatcher, getContext } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import Badge from '$lib/holocene/badge.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -105,7 +106,7 @@
   aria-controls={controls}
   aria-expanded={$open}
   aria-label={label}
-  class="menu-button {variant} {className}"
+  class={merge('menu-button', variant, className)}
   class:unroundLeft
   class:unroundRight
   class:active

src/lib/holocene/menu/menu-container.svelte

@@ -3,6 +3,7 @@
   import { writable, type Writable } from 'svelte/store';
 
   import { createEventDispatcher, setContext } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import { clickOutside } from '$lib/holocene/outside-click';
 
@@ -44,7 +45,7 @@
 <div
   use:clickOutside
   on:click-outside={closeMenu}
-  class="relative {className}"
+  class={merge('relative', className)}
   {...$$restProps}
 >
   <slot {open} />

src/lib/holocene/menu/menu-item.svelte

@@ -7,6 +7,7 @@
   import type { HTMLLiAttributes } from 'svelte/elements';
 
   import { createEventDispatcher, getContext } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
 
@@ -107,7 +108,7 @@
   <a
     {href}
     role="menuitem"
-    class="menu-item {theme} {className}"
+    class={merge('menu-item', theme, className)}
     class:disabled
     aria-hidden={disabled ? 'true' : 'false'}
     aria-disabled={disabled}
@@ -120,7 +121,7 @@
 {:else}
   <li
     role="menuitem"
-    class="menu-item {theme} {className}"
+    class={merge('menu-item', theme, className)}
     class:destructive
     class:disabled
     aria-hidden={disabled ? 'true' : 'false'}

src/lib/holocene/menu/menu.svelte

@@ -3,6 +3,7 @@
   import { fly } from 'svelte/transition';
 
   import { getContext } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import { getFocusableElements } from '$lib/utilities/focus-trap';
 
@@ -44,7 +45,7 @@
 <ul
   in:fly={{ duration: 100 }}
   role="menu"
-  class="menu {position} {theme} {className}"
+  class={merge('menu', position, theme, className)}
   class:hidden={!$open}
   aria-labelledby={id}
   tabindex={-1}

src/lib/holocene/modal.svelte

@@ -2,6 +2,7 @@
   import type { HTMLAttributes } from 'svelte/elements';
 
   import { type ComponentProps, createEventDispatcher } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import Button from '$lib/holocene/button.svelte';
   import { focusTrap } from '$lib/utilities/focus-trap';
@@ -81,7 +82,7 @@
   {id}
   on:close={handleCancel}
   bind:this={modalElement}
-  class="body {className}"
+  class={merge('body', className)}
   class:large
   class:hightlightNav
   aria-modal="true"

src/lib/holocene/radio-input/radio-group.svelte

@@ -6,6 +6,7 @@
   import type { Writable } from 'svelte/store';
 
   import { setContext } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import type { RadioGroupContext, RadioGroupProps } from './types';
 
@@ -25,7 +26,7 @@
   });
 </script>
 
-<div class="flex flex-col gap-2 {className}" {...$$restProps}>
+<div class={merge('flex flex-col gap-2', className)} {...$$restProps}>
   {#if description}
     <p class="font-secondary text-sm font-medium">{description}</p>
   {/if}

src/lib/holocene/select/simple-select.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { HTMLSelectAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import type { SelectOptionValue } from '$lib/types/global';
 
   import Option from './simple-option.svelte';
@@ -30,7 +32,10 @@
 <div>
   <label class="sr-only" for={id}>{label}</label>
   <select
-    class="inline h-10 w-full rounded-lg border-2 px-2 text-base {className}"
+    class={merge(
+      'inline h-10 w-full rounded-lg border-2 px-2 text-base',
+      className,
+    )}
     class:dark
     class:remove={arrow}
     {name}

src/lib/holocene/tab/tab-list.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   interface $$Props extends HTMLAttributes<HTMLDivElement> {
     label: string;
     class?: string;
@@ -12,7 +14,7 @@
 </script>
 
 <div
-  class="tab-list {className}"
+  class={merge('tab-list', className)}
   role="tablist"
   aria-label={label}
   {...$$restProps}

src/lib/holocene/table/table.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { HTMLTableAttributes } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import ProgressBar from '$lib/holocene/progress-bar.svelte';
 
   interface $$Props extends HTMLTableAttributes {
@@ -16,7 +18,7 @@
   export let updating = false;
 </script>
 
-<table class="{variant} {className}" {...$$restProps}>
+<table class={merge(variant, className)} {...$$restProps}>
   <slot name="caption" />
   <thead>
     <slot name="headers" />

src/lib/holocene/toggle-button/toggle-button.svelte

@@ -4,6 +4,8 @@
     HTMLButtonAttributes,
   } from 'svelte/elements';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import { page } from '$app/stores';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -42,7 +44,7 @@
 
 <svelte:element
   this={href ? 'a' : 'button'}
-  class="toggle-button {className}"
+  class={merge('toggle-button', className)}
   class:group
   class:active={href ? $page.url.pathname.includes(base) : active}
   href={href ? href + $page.url.search : null}

src/lib/holocene/tooltip.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { twMerge as merge } from 'tailwind-merge';
+
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import type { IconName } from '$lib/holocene/icon/paths';
@@ -83,7 +85,7 @@
 {#if hide}
   <slot />
 {:else}
-  <div class="wrapper relative inline-block {className}">
+  <div class={merge('wrapper relative inline-block', className)}>
     <slot />
     <div
       class="tooltip"