@getmicdrop/svelte-components 2.2.0 → 2.3.0

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  /** @type {boolean} Whether multiple items can be open at once */
+  export let multiple = false;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  // Store to track which items are open
+  const openItems = writable(new Set());
+
+  // Context for child AccordionItem components
+  setContext("accordion", {
+    openItems,
+    multiple,
+    toggle: (id) => {
+      openItems.update((items) => {
+        if (items.has(id)) {
+          items.delete(id);
+        } else {
+          if (!multiple) {
+            items.clear();
+          }
+          items.add(id);
+        }
+        return new Set(items);
+      });
+    },
+  });
+</script>
+
+<div class="accordion {className}">
+  <slot />
+</div>
+
+<style>
+  .accordion {
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+</style>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,42 @@
+export default Accordion;
+type Accordion = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    multiple?: boolean | undefined;
+    class?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    multiple?: boolean | undefined;
+    class?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Accordion.svelte.d.ts.map

package/dist/components/Accordion/Accordion.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Accordion/Accordion.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA+DA;;;;;;;;;eAAiJ;sCAT3G,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,129 @@
+<script>
+  import { getContext, onMount } from "svelte";
+  import { slide } from "svelte/transition";
+
+  /** @type {boolean} Whether this item starts open */
+  export let open = false;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const { openItems, toggle } = getContext("accordion");
+
+  // Generate unique ID for this item
+  let id = Math.random().toString(36).substring(2, 9);
+
+  onMount(() => {
+    if (open) {
+      toggle(id);
+    }
+  });
+
+  $: isOpen = $openItems.has(id);
+
+  function handleClick() {
+    toggle(id);
+  }
+</script>
+
+<div class="accordion-item {className}" class:accordion-item--open={isOpen}>
+  <button
+    type="button"
+    class="accordion-item__header"
+    aria-expanded={isOpen}
+    on:click={handleClick}
+  >
+    <span class="accordion-item__title">
+      <slot name="header">Accordion Item</slot>
+    </span>
+    <svg
+      class="accordion-item__icon"
+      class:accordion-item__icon--open={isOpen}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 7.5L10 12.5L15 7.5"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div class="accordion-item__content" transition:slide={{ duration: 200 }}>
+      <div class="accordion-item__body">
+        <slot />
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .accordion-item {
+    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+  }
+
+  .accordion-item:last-child {
+    border-bottom: none;
+  }
+
+  .accordion-item__header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 0.15s ease;
+  }
+
+  .accordion-item__header:hover {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .accordion-item__header:focus {
+    outline: none;
+  }
+
+  .accordion-item__header:focus-visible {
+    outline: 2px solid hsl(var(--Brand-Primary, 221 83% 53%));
+    outline-offset: -2px;
+  }
+
+  .accordion-item__title {
+    font-size: 1rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+  }
+
+  .accordion-item__icon {
+    flex-shrink: 0;
+    color: hsl(var(--Text-Secondary, 220 9% 46%));
+    transition: transform 0.2s ease;
+  }
+
+  .accordion-item__icon--open {
+    transform: rotate(180deg);
+  }
+
+  .accordion-item__content {
+    overflow: hidden;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+  }
+
+  .accordion-item__body {
+    padding: 1rem 1.25rem 1.25rem;
+    color: hsl(var(--Text-Secondary, 220 9% 46%));
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+</style>

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,46 @@
+export default AccordionItem;
+type AccordionItem = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    open?: boolean | undefined;
+}, {
+    header: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const AccordionItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    open?: boolean | undefined;
+}, {
+    header: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=AccordionItem.svelte.d.ts.map

package/dist/components/Accordion/AccordionItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Accordion/AccordionItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyEA;;;;;;;;;;;eAAiJ;sCAT3G,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Badges/Badge.svelte

@@ -6,8 +6,14 @@
 
   export let size = "medium";
   export let className = "";
-  /** @type {string} Semantic variant (required) */
+  /** @type {string|number} Semantic variant or tier number (1-5) */
   export let variant = "neutral";
+  /** @type {string|null} Event display type: "square" or "circle" */
+  export let event = null;
+  /** @type {string|null} Custom text color (hex) */
+  export let textColor = null;
+  /** @type {string|null} Custom background color (hex or rgba) */
+  export let bgColor = null;
 
   $: sizeClass = (() => {
     switch (size) {
@@ -22,8 +28,24 @@
     }
   })();
 
+  // Handle tier numbers (1-5) as variants
+  $: normalizedVariant = (() => {
+    if (typeof variant === "number" || !isNaN(Number(variant))) {
+      const tierNum = Number(variant);
+      switch (tierNum) {
+        case 1: return "tier-1";
+        case 2: return "tier-2";
+        case 3: return "tier-3";
+        case 4: return "tier-4";
+        case 5: return "tier-5";
+        default: return "neutral";
+      }
+    }
+    return String(variant).toLowerCase();
+  })();
+
   $: variantClass = (() => {
-    switch (variant.toLowerCase()) {
+    switch (normalizedVariant) {
       // Role variants
       case "host":
         return "badge-host";
@@ -47,14 +69,46 @@
       case "warning":
         return "badge-warning";
       case "error":
+      case "danger":
         return "badge-error";
       case "info":
         return "badge-info";
+      // Tier variants (for lineup position badges)
+      case "tier-1":
+        return "badge-tier-1";
+      case "tier-2":
+        return "badge-tier-2";
+      case "tier-3":
+        return "badge-tier-3";
+      case "tier-4":
+        return "badge-tier-4";
+      case "tier-5":
+        return "badge-tier-5";
       case "neutral":
       default:
         return "badge-neutral";
     }
   })();
+
+  $: eventClass = (() => {
+    if (!event) return "";
+    switch (event) {
+      case "square":
+        return "badge-event-square";
+      case "circle":
+        return "badge-event-circle";
+      default:
+        return "";
+    }
+  })();
+
+  // Custom style for text/bg color overrides
+  $: customStyle = (() => {
+    const styles = [];
+    if (textColor) styles.push(`color: ${textColor}`);
+    if (bgColor) styles.push(`background-color: ${bgColor}`);
+    return styles.length > 0 ? styles.join("; ") : null;
+  })();
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -64,9 +118,11 @@
     "badge",
     sizeClass,
     variantClass,
+    eventClass,
     className
   )}
-  on:click={(event) => dispatch("click", event)}
+  style={customStyle}
+  on:click={(e) => dispatch("click", e)}
 >
   <slot />
 </div>
@@ -76,6 +132,9 @@
 
   Role variants: host, headliner, feature, special-guest, opener, guest, teacher, assistant
   Status variants: success, warning, error, info, neutral
+  Tier variants: 1, 2, 3, 4, 5 (pass as number or string)
+  Event types: event="square" or event="circle"
+  Custom colors: textColor="#hex" bgColor="rgba(...)"
 -->
 
 <style>
@@ -179,4 +238,71 @@
     color: #4b5563;
     background-color: #f9fafb;
   }
+
+  /* Tier variants (lineup position badges) - colors match local frontend implementation */
+  .badge-tier-1 {
+    color: rgba(108, 43, 217, 1);
+    background-color: rgba(108, 43, 217, 0.15);
+  }
+
+  .badge-tier-2 {
+    color: rgba(255, 146, 46, 1);
+    background-color: rgba(255, 146, 46, 0.15);
+  }
+
+  .badge-tier-3 {
+    color: rgba(2, 132, 254, 1);
+    background-color: rgba(2, 132, 254, 0.15);
+  }
+
+  .badge-tier-4 {
+    color: rgba(21, 160, 51, 1);
+    background-color: rgba(21, 160, 51, 0.15);
+  }
+
+  .badge-tier-5 {
+    color: rgba(255, 102, 102, 1);
+    background-color: rgba(255, 102, 102, 0.15);
+  }
+
+  /* Event display types */
+  .badge-event-square {
+    padding: 4px;
+    border-radius: 4px;
+    border: 0.8px solid rgba(2, 132, 254, 0.5);
+    box-shadow:
+      0px 20px 6px 0px rgba(0, 0, 0, 0),
+      0px 13px 5px 0px rgba(0, 0, 0, 0.02),
+      0px 7px 4px 0px rgba(0, 0, 0, 0.08),
+      0px 3px 3px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 2px 0px rgba(0, 0, 0, 0.16);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 14px;
+  }
+
+  .badge-event-circle {
+    padding: 4px;
+    border-radius: 9999px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+  }
+
+  @media only screen and (max-width: 640px) {
+    .badge-event-square {
+      padding: 2px;
+      font-size: 8px;
+      line-height: 10px;
+      font-weight: 200;
+    }
+
+    .badge-event-circle {
+      padding: 2px;
+      font-size: 8px;
+      gap: 0px;
+      font-weight: 500;
+      line-height: 8px;
+    }
+  }
 </style>

package/dist/components/Badges/Badge.svelte.d.ts

@@ -2,7 +2,10 @@ export default Badge;
 type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     size?: string | undefined;
     className?: string | undefined;
-    variant?: string | undefined;
+    variant?: string | number | undefined;
+    event?: string | null | undefined;
+    textColor?: string | null | undefined;
+    bgColor?: string | null | undefined;
 }, {
     default: {};
 }>, {
@@ -17,7 +20,10 @@ type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     size?: string | undefined;
     className?: string | undefined;
-    variant?: string | undefined;
+    variant?: string | number | undefined;
+    event?: string | null | undefined;
+    textColor?: string | null | undefined;
+    bgColor?: string | null | undefined;
 }, {
     default: {};
 }>, {

package/dist/components/Badges/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiGA;;;;;;;;;;;;eAAuJ;sCATjH,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA2JA;;;;;;;;;;;;;;;eAAqL;sCAT/I,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -1,8 +1,18 @@
 <script>
   import { createEventDispatcher } from "svelte";
-  import BreadcrumbArrow from "../../assets/svg/arrow-up.svg";
+  import ArrowRight from "../Icons/ArrowRight.svelte";
+  import Home from "../Icons/Home.svelte";
 
+  /** @type {Array<{name: string, href: string}>} */
   export let data = [];
+  /** @type {string} Additional CSS classes */
+  export let className = "";
+  /** @type {boolean} Show built-in home icon for first item */
+  export let showHomeIcon = true;
+  /** @type {string} Page title displayed below breadcrumb */
+  export let title = "";
+  /** @type {string} Subtitle displayed below title */
+  export let subtitle = "";
 
   const dispatch = createEventDispatcher();
 
@@ -11,40 +21,59 @@
   }
 </script>
 
-{#if data.length > 0}
-  <nav class="inline-flex text-sm leading-[14px] font-medium">
-    {#each data as crumb, index}
-      <div class="flex items-center">
-        {#if index > 0}
-          <img
-            src={BreadcrumbArrow}
-            alt=""
-            class="w-2.5 sm:w-3 h-2.5 sm:h-3 mx-2 sm:mx-2.5"
-          />
-        {/if}
-        {#if index === 0}
-          <img
-            src={crumb.icon}
-            alt=""
-            class="w-3 sm:w-4 h-3 sm:h-4 mx-2 sm:mx-2.5"
-          />
-        {/if}
-        {#if index === data.length - 1}
-          <span class="text-Text-Tartiary cursor-default">{crumb.name}</span>
-        {:else}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <span class="text-Text-Secondary no-underline cursor-pointer">
-            <a
-              href={crumb.href}
-              on:click={() => handleClick(crumb)}
-              class="hover:no-underline"
+<div class="flex flex-col gap-4">
+  {#if data.length > 0}
+    <nav class="inline-flex lg:ml-6 text-sm leading-[14px] font-medium flex-wrap gap-1 {className}">
+      {#each data as crumb, index}
+        <div class="flex items-center gap-2">
+          {#if index > 0}
+            <div class="pl-1 text-text-secondary">
+              <ArrowRight size="12" />
+            </div>
+          {/if}
+          {#if index === 0 && showHomeIcon}
+            <span class="text-text-primary">
+              <Home size="12" />
+            </span>
+          {/if}
+          {#if index === data.length - 1}
+            <span
+              class="text-text-primary cursor-default max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
+              title={crumb.name}
             >
               {crumb.name}
-            </a>
-          </span>
-        {/if}
-      </div>
-    {/each}
-  </nav>
-{/if}
+            </span>
+          {:else}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <span
+              class="text-text-secondary no-underline cursor-pointer max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
+              title={crumb.name}
+            >
+              <a
+                href={crumb.href}
+                on:click={() => handleClick(crumb)}
+                class="hover:no-underline"
+              >
+                {crumb.name}
+              </a>
+            </span>
+          {/if}
+        </div>
+      {/each}
+    </nav>
+  {/if}
+
+  {#if title || subtitle}
+    <div class="pl-1 mb-2 md:pl-6 flex flex-col gap-1">
+      {#if title}
+        <h1 class="text-[32px] font-semibold text-text-primary text-start">
+          {title}
+        </h1>
+      {/if}
+      {#if subtitle}
+        <p class="text-sm text-text-secondary">{subtitle}</p>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,6 +1,13 @@
 export default Breadcrumb;
 type Breadcrumb = SvelteComponent<{
-    data?: any[] | undefined;
+    title?: string | undefined;
+    className?: string | undefined;
+    data?: {
+        name: string;
+        href: string;
+    }[] | undefined;
+    showHomeIcon?: boolean | undefined;
+    subtitle?: string | undefined;
 }, {
     click: CustomEvent<any>;
 } & {
@@ -9,7 +16,14 @@ type Breadcrumb = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
-    data?: any[] | undefined;
+    title?: string | undefined;
+    className?: string | undefined;
+    data?: {
+        name: string;
+        href: string;
+    }[] | undefined;
+    showHomeIcon?: boolean | undefined;
+    subtitle?: string | undefined;
 }, {
     click: CustomEvent<any>;
 } & {

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.svelte.js"],"names":[],"mappings":";;;;;;;;;;AAwDA;;;;;;mBAAgI;6CATnF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6FA;;;;cAdwB,MAAM;cAAQ,MAAM;;;;;;;;mBAckI;6CATjI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Button/Button.svelte

@@ -605,6 +605,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.375rem; /* 6px - matches gap-1.5 */
+    white-space: nowrap;
   }
 
   @media (min-width: 640px) {