diff --git a/packages/harmonium/src/components/AppShell/AppShell.tsx b/packages/harmonium/src/components/AppShell/AppShell.tsx
index 6164c4a0..749e3a5d 100644
--- a/packages/harmonium/src/components/AppShell/AppShell.tsx
+++ b/packages/harmonium/src/components/AppShell/AppShell.tsx
@@ -24,8 +24,7 @@ export const AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(
 
 AppShell.displayName = 'AppShell'
 
-export interface AppShellHeaderProps
-  extends React.HTMLAttributes<HTMLElement> {}
+export type AppShellHeaderProps = React.HTMLAttributes<HTMLElement>
 
 export const AppShellHeader = React.forwardRef<
   HTMLElement,
@@ -42,8 +41,7 @@ export const AppShellHeader = React.forwardRef<
 
 AppShellHeader.displayName = 'AppShellHeader'
 
-export interface AppShellSidebarProps
-  extends React.HTMLAttributes<HTMLElement> {}
+export type AppShellSidebarProps = React.HTMLAttributes<HTMLElement>
 
 export const AppShellSidebar = React.forwardRef<
   HTMLElement,
@@ -60,8 +58,7 @@ export const AppShellSidebar = React.forwardRef<
 
 AppShellSidebar.displayName = 'AppShellSidebar'
 
-export interface AppShellMainProps
-  extends React.HTMLAttributes<HTMLElement> {}
+export type AppShellMainProps = React.HTMLAttributes<HTMLElement>
 
 export const AppShellMain = React.forwardRef<HTMLElement, AppShellMainProps>(
   ({className, children, ...props}, ref) => (
@@ -77,8 +74,7 @@ export const AppShellMain = React.forwardRef<HTMLElement, AppShellMainProps>(
 
 AppShellMain.displayName = 'AppShellMain'
 
-export interface AppShellFooterProps
-  extends React.HTMLAttributes<HTMLElement> {}
+export type AppShellFooterProps = React.HTMLAttributes<HTMLElement>
 
 export const AppShellFooter = React.forwardRef<
   HTMLElement,
diff --git a/packages/harmonium/src/components/Card/Card.tsx b/packages/harmonium/src/components/Card/Card.tsx
index ebb9e6a6..76cbb231 100644
--- a/packages/harmonium/src/components/Card/Card.tsx
+++ b/packages/harmonium/src/components/Card/Card.tsx
@@ -27,7 +27,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
 
 Card.displayName = 'Card'
 
-export interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type CardSectionProps = React.HTMLAttributes<HTMLDivElement>
 
 export const CardHeader = React.forwardRef<HTMLDivElement, CardSectionProps>(
   ({className, children, ...props}, ref) => (
diff --git a/packages/harmonium/src/components/CommandPalette/CommandPalette.tsx b/packages/harmonium/src/components/CommandPalette/CommandPalette.tsx
index 1e468dc0..6d6fc020 100644
--- a/packages/harmonium/src/components/CommandPalette/CommandPalette.tsx
+++ b/packages/harmonium/src/components/CommandPalette/CommandPalette.tsx
@@ -32,7 +32,7 @@ function buildGroupedItems(filtered: CommandItem[]): Map<string, GroupedItem[]>
   for (const item of filtered) {
     const group = item.group ?? ''
     if (!groups.has(group)) groups.set(group, [])
-    groups.get(group)!.push({item, flatIndex, group})
+    groups.get(group)?.push({item, flatIndex, group})
     flatIndex++
   }
   return groups
diff --git a/packages/harmonium/src/components/Dialog/Dialog.tsx b/packages/harmonium/src/components/Dialog/Dialog.tsx
index 1c1af3c7..adc11e14 100644
--- a/packages/harmonium/src/components/Dialog/Dialog.tsx
+++ b/packages/harmonium/src/components/Dialog/Dialog.tsx
@@ -48,7 +48,7 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
 
 Dialog.displayName = 'Dialog'
 
-export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>
 
 export const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(
   ({className, children, ...props}, ref) => (
@@ -59,7 +59,7 @@ export const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(
 )
 DialogHeader.displayName = 'DialogHeader'
 
-export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>
 
 export const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
   ({className, children, ...props}, ref) => (
@@ -70,7 +70,7 @@ export const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
 )
 DialogBody.displayName = 'DialogBody'
 
-export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>
 
 export const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
   ({className, children, ...props}, ref) => (
diff --git a/packages/harmonium/src/components/Field/Field.tsx b/packages/harmonium/src/components/Field/Field.tsx
index ec13f1e2..9e67653e 100644
--- a/packages/harmonium/src/components/Field/Field.tsx
+++ b/packages/harmonium/src/components/Field/Field.tsx
@@ -39,8 +39,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
 
 Field.displayName = 'Field'
 
-export interface FieldLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+export type FieldLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>
 
 export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
   ({className, children, ...props}, ref) => {
@@ -61,8 +60,7 @@ export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
 
 FieldLabel.displayName = 'FieldLabel'
 
-export interface FieldDescriptionProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {}
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>
 
 export const FieldDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -84,8 +82,7 @@ export const FieldDescription = React.forwardRef<
 
 FieldDescription.displayName = 'FieldDescription'
 
-export interface FieldErrorProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {}
+export type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement>
 
 export const FieldError = React.forwardRef<
   HTMLParagraphElement,
diff --git a/packages/harmonium/src/components/Menu/Menu.tsx b/packages/harmonium/src/components/Menu/Menu.tsx
index a889732c..f6f7cc3c 100644
--- a/packages/harmonium/src/components/Menu/Menu.tsx
+++ b/packages/harmonium/src/components/Menu/Menu.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import {clsx} from 'clsx'
 import styles from './Menu.module.css'
 
-export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type MenuProps = React.HTMLAttributes<HTMLDivElement>
 
 export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(
   ({className, children, ...props}, ref) => (
@@ -36,7 +36,7 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(
 
 MenuItem.displayName = 'MenuItem'
 
-export interface MenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type MenuSeparatorProps = React.HTMLAttributes<HTMLDivElement>
 
 export const MenuSeparator = React.forwardRef<HTMLDivElement, MenuSeparatorProps>(
   ({className, ...props}, ref) => (
@@ -51,7 +51,7 @@ export const MenuSeparator = React.forwardRef<HTMLDivElement, MenuSeparatorProps
 
 MenuSeparator.displayName = 'MenuSeparator'
 
-export interface MenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type MenuLabelProps = React.HTMLAttributes<HTMLDivElement>
 
 export const MenuLabel = React.forwardRef<HTMLDivElement, MenuLabelProps>(
   ({className, children, ...props}, ref) => (
diff --git a/packages/harmonium/src/components/NumberInput/NumberInput.test.tsx b/packages/harmonium/src/components/NumberInput/NumberInput.test.tsx
index bc09f967..af1d0e71 100644
--- a/packages/harmonium/src/components/NumberInput/NumberInput.test.tsx
+++ b/packages/harmonium/src/components/NumberInput/NumberInput.test.tsx
@@ -37,7 +37,6 @@ describe('NumberInput', () => {
   })
 
   it('respects max boundary', async () => {
-    const user = userEvent.setup()
     const onChange = vi.fn()
     render(<NumberInput defaultValue={10} max={10} onChange={onChange} aria-label="Qty" />)
     expect(screen.getByLabelText('Increase')).toBeDisabled()
diff --git a/packages/harmonium/src/components/PricingTable/PricingTable.tsx b/packages/harmonium/src/components/PricingTable/PricingTable.tsx
index 56007634..d74d2d07 100644
--- a/packages/harmonium/src/components/PricingTable/PricingTable.tsx
+++ b/packages/harmonium/src/components/PricingTable/PricingTable.tsx
@@ -53,8 +53,7 @@ export const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(
 
 PricingCard.displayName = 'PricingCard'
 
-export interface PricingCardHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {}
+export type PricingCardHeaderProps = React.HTMLAttributes<HTMLDivElement>
 
 export const PricingCardHeader = React.forwardRef<
   HTMLDivElement,
@@ -87,8 +86,7 @@ export const PricingCardPrice = React.forwardRef<
 
 PricingCardPrice.displayName = 'PricingCardPrice'
 
-export interface PricingCardFeaturesProps
-  extends React.HTMLAttributes<HTMLUListElement> {}
+export type PricingCardFeaturesProps = React.HTMLAttributes<HTMLUListElement>
 
 export const PricingCardFeatures = React.forwardRef<
   HTMLUListElement,
@@ -126,8 +124,7 @@ export const PricingCardFeature = React.forwardRef<
 
 PricingCardFeature.displayName = 'PricingCardFeature'
 
-export interface PricingCardFooterProps
-  extends React.HTMLAttributes<HTMLDivElement> {}
+export type PricingCardFooterProps = React.HTMLAttributes<HTMLDivElement>
 
 export const PricingCardFooter = React.forwardRef<
   HTMLDivElement,
diff --git a/packages/harmonium/src/components/Tabs/Tabs.tsx b/packages/harmonium/src/components/Tabs/Tabs.tsx
index 37cd8b1b..eeec66ca 100644
--- a/packages/harmonium/src/components/Tabs/Tabs.tsx
+++ b/packages/harmonium/src/components/Tabs/Tabs.tsx
@@ -49,7 +49,7 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
 
 Tabs.displayName = 'Tabs'
 
-export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type TabsListProps = React.HTMLAttributes<HTMLDivElement>
 
 export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
   ({className, ...props}, ref) => (
diff --git a/packages/harmonium/src/components/Textarea/Textarea.tsx b/packages/harmonium/src/components/Textarea/Textarea.tsx
index 44461e14..dd47555e 100644
--- a/packages/harmonium/src/components/Textarea/Textarea.tsx
+++ b/packages/harmonium/src/components/Textarea/Textarea.tsx
@@ -3,8 +3,7 @@ import {clsx} from 'clsx'
 import {useFieldContext} from '../Field'
 import styles from './Textarea.module.css'
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({className, ...props}, ref) => {
diff --git a/packages/harmonium/src/tokens/build.ts b/packages/harmonium/src/tokens/build.ts
index 70398bea..d96a9d5b 100644
--- a/packages/harmonium/src/tokens/build.ts
+++ b/packages/harmonium/src/tokens/build.ts
@@ -102,7 +102,7 @@ async function build() {
   const flat = flattenTokens(allTokens)
 
   const tsLines = Object.entries(flat)
-    .map(([key, value]) => {
+    .map(([key]) => {
       const constName = key
         .replace(/[.-]/g, '_')
         .replace(/([a-z])([A-Z])/g, '$1_$2')
diff --git a/packages/harmonium/src/utils/responsive.ts b/packages/harmonium/src/utils/responsive.ts
index 01b47358..6d16b098 100644
--- a/packages/harmonium/src/utils/responsive.ts
+++ b/packages/harmonium/src/utils/responsive.ts
@@ -85,7 +85,7 @@ export function responsiveStyles(
 
   for (const bp of BREAKPOINTS) {
     if (value[bp] !== undefined) {
-      styles[`--${name}-${bp}`] = fmt(value[bp]!)
+      styles[`--${name}-${bp}`] = fmt(value[bp] as string | number)
     }
   }
 
diff --git a/packages/harmonium_ex/lib/harmonium/components.ex b/packages/harmonium_ex/lib/harmonium/components.ex
index 1c291975..57a8edb3 100644
--- a/packages/harmonium_ex/lib/harmonium/components.ex
+++ b/packages/harmonium_ex/lib/harmonium/components.ex
@@ -189,5 +189,508 @@ if Code.ensure_loaded?(Phoenix.Component) do
       <hr class="hm-separator" data-orientation={@orientation} data-spacing={@spacing} {@rest} />
       """
     end
+
+    # --- Stepper ---
+
+    @doc "Renders a step indicator for multi-step flows."
+    attr :orientation, :string, default: "horizontal", values: ~w(horizontal vertical)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_stepper(assigns) do
+      ~H"""
+      <div class="hm-stepper" data-orientation={@orientation} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a single step within a stepper."
+    attr :state, :string, default: "pending", values: ~w(pending active completed)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_stepper_step(assigns) do
+      ~H"""
+      <div class="hm-stepper-step" data-state={@state} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a stepper connector line between steps."
+    attr :rest, :global
+
+    def hm_stepper_connector(assigns) do
+      ~H"""
+      <div class="hm-stepper-connector" {@rest} />
+      """
+    end
+
+    # --- Progress ---
+
+    @doc "Renders a progress bar."
+    attr :value, :integer, default: 0
+    attr :max, :integer, default: 100
+    attr :size, :string, default: "md", values: ~w(sm md lg)
+    attr :variant, :string, default: "primary", values: ~w(primary secondary success warning error)
+    attr :rest, :global
+    slot :inner_block, required: false
+
+    def hm_progress(assigns) do
+      ~H"""
+      <div class="hm-progress" data-size={@size} data-variant={@variant} {@rest}>
+        <div class="hm-progress-bar" style={"width: #{min(@value / @max * 100, 100)}%"} />
+        <span :if={@inner_block != []} class="hm-progress-label">
+          <%= render_slot(@inner_block) %>
+        </span>
+      </div>
+      """
+    end
+
+    # --- Dialog ---
+
+    @doc "Renders a dialog/modal overlay."
+    attr :open, :boolean, default: false
+    attr :rest, :global
+
+    def hm_dialog_overlay(assigns) do
+      ~H"""
+      <div :if={@open} class="hm-dialog-overlay" {@rest} />
+      """
+    end
+
+    @doc "Renders a dialog/modal container."
+    attr :open, :boolean, default: false
+    attr :size, :string, default: "md", values: ~w(sm md lg full)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_dialog(assigns) do
+      ~H"""
+      <div :if={@open} class="hm-dialog" data-size={@size} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a dialog header."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_dialog_header(assigns) do
+      ~H"""
+      <div class="hm-dialog-header" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a dialog body."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_dialog_body(assigns) do
+      ~H"""
+      <div class="hm-dialog-body" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a dialog footer."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_dialog_footer(assigns) do
+      ~H"""
+      <div class="hm-dialog-footer" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    # --- Empty State ---
+
+    @doc "Renders an empty state placeholder."
+    attr :size, :string, default: "md", values: ~w(sm md lg)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_empty_state(assigns) do
+      ~H"""
+      <div class="hm-empty-state" data-size={@size} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders the empty state icon container."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_empty_state_icon(assigns) do
+      ~H"""
+      <div class="hm-empty-state-icon" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders the empty state title."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_empty_state_title(assigns) do
+      ~H"""
+      <h3 class="hm-empty-state-title" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </h3>
+      """
+    end
+
+    @doc "Renders the empty state description."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_empty_state_description(assigns) do
+      ~H"""
+      <p class="hm-empty-state-description" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </p>
+      """
+    end
+
+    @doc "Renders the empty state action container."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_empty_state_action(assigns) do
+      ~H"""
+      <div class="hm-empty-state-action" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    # --- Drawer ---
+
+    @doc "Renders a drawer overlay."
+    attr :open, :boolean, default: false
+    attr :rest, :global
+
+    def hm_drawer_overlay(assigns) do
+      ~H"""
+      <div :if={@open} class="hm-drawer-overlay" {@rest} />
+      """
+    end
+
+    @doc "Renders a slide-out drawer panel."
+    attr :open, :boolean, default: false
+    attr :side, :string, default: "right", values: ~w(left right)
+    attr :size, :string, default: "md", values: ~w(sm md lg)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_drawer(assigns) do
+      ~H"""
+      <div :if={@open} class="hm-drawer" data-side={@side} data-size={@size} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    # --- Typography ---
+
+    @doc "Renders styled text."
+    attr :size, :string, default: nil
+    attr :weight, :string, default: nil
+    attr :color, :string, default: nil
+    attr :truncate, :boolean, default: false
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_text(assigns) do
+      ~H"""
+      <span
+        class="hm-typography-text"
+        data-size={@size}
+        data-weight={@weight}
+        data-color={@color}
+        data-truncate={@truncate || nil}
+        {@rest}
+      >
+        <%= render_slot(@inner_block) %>
+      </span>
+      """
+    end
+
+    @doc """
+    Renders a styled heading.
+
+    Renders as `<h2>` by default. For other heading levels, use the CSS
+    class directly: `<h1 class="hm-typography-heading" data-size="xl">`.
+    """
+    attr :size, :string, default: "lg"
+    attr :weight, :string, default: "bold"
+    attr :color, :string, default: nil
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_heading(assigns) do
+      ~H"""
+      <h2
+        class="hm-typography-heading"
+        data-size={@size}
+        data-weight={@weight}
+        data-color={@color}
+        {@rest}
+      >
+        <%= render_slot(@inner_block) %>
+      </h2>
+      """
+    end
+
+    # --- Data Grid ---
+
+    @doc "Renders a data grid wrapper for horizontal scroll."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_data_grid_wrapper(assigns) do
+      ~H"""
+      <div class="hm-data-grid-wrapper" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a data grid (table)."
+    attr :striped, :boolean, default: false
+    attr :hoverable, :boolean, default: false
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_data_grid(assigns) do
+      ~H"""
+      <table class="hm-data-grid" data-striped={@striped || nil} data-hoverable={@hoverable || nil} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </table>
+      """
+    end
+
+    # --- File Upload ---
+
+    @doc "Renders a file upload drop zone."
+    attr :disabled, :boolean, default: false
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_file_upload(assigns) do
+      ~H"""
+      <div class="hm-file-upload" data-disabled={@disabled || nil} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders the file upload placeholder content."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_file_upload_placeholder(assigns) do
+      ~H"""
+      <div class="hm-file-upload-placeholder" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    # --- Toast ---
+
+    @doc "Renders a toast container."
+    attr :position, :string, default: "top-right", values: ~w(top-right top-left bottom-right bottom-left)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_toast_container(assigns) do
+      ~H"""
+      <div class="hm-toast-container" data-position={@position} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a toast notification."
+    attr :variant, :string, default: "info", values: ~w(info success warning error)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_toast(assigns) do
+      ~H"""
+      <div class="hm-toast-toast" data-variant={@variant} {@rest}>
+        <div class="hm-toast-message">
+          <%= render_slot(@inner_block) %>
+        </div>
+      </div>
+      """
+    end
+
+    # --- Popover ---
+
+    @doc "Renders a popover container."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_popover(assigns) do
+      ~H"""
+      <div class="hm-popover" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders popover content."
+    attr :side, :string, default: "bottom", values: ~w(top bottom left right)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_popover_content(assigns) do
+      ~H"""
+      <div class="hm-popover-content" data-side={@side} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    # --- Tooltip ---
+
+    @doc "Renders a tooltip container."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_tooltip(assigns) do
+      ~H"""
+      <div class="hm-tooltip" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders tooltip content."
+    attr :side, :string, default: "top", values: ~w(top bottom left right)
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_tooltip_content(assigns) do
+      ~H"""
+      <div class="hm-tooltip-content" data-side={@side} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    # --- Skeleton ---
+
+    @doc "Renders a skeleton loading placeholder."
+    attr :variant, :string, default: "text", values: ~w(text circular rectangular)
+    attr :rest, :global
+
+    def hm_skeleton(assigns) do
+      ~H"""
+      <div class="hm-skeleton" data-variant={@variant} {@rest} />
+      """
+    end
+
+    # --- Stat ---
+
+    @doc "Renders a stat display card."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_stat(assigns) do
+      ~H"""
+      <div class="hm-stat" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders the stat value."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_stat_value(assigns) do
+      ~H"""
+      <div class="hm-stat-value" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders the stat label."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_stat_label(assigns) do
+      ~H"""
+      <div class="hm-stat-label" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    # --- Tabs ---
+
+    @doc "Renders a tabbed interface container."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_tabs(assigns) do
+      ~H"""
+      <div class="hm-tabs" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a tab trigger list."
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_tabs_list(assigns) do
+      ~H"""
+      <div class="hm-tabs-list" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
+    @doc "Renders a tab trigger button."
+    attr :active, :boolean, default: false
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_tabs_trigger(assigns) do
+      ~H"""
+      <button class="hm-tabs-trigger" data-state={if @active, do: "active"} {@rest}>
+        <%= render_slot(@inner_block) %>
+      </button>
+      """
+    end
+
+    @doc "Renders tab content."
+    attr :active, :boolean, default: false
+    attr :rest, :global
+    slot :inner_block, required: true
+
+    def hm_tabs_content(assigns) do
+      ~H"""
+      <div :if={@active} class="hm-tabs-content" {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+      """
+    end
+
   end
 end