@cfasim-ui/components 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/components",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "description": "Vue 3 UI components for cfasim-ui",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/test-utils": "^2.4.6",
-    "happy-dom": "^20.8.8",
+    "happy-dom": "^20.8.9",
     "vitest": "^4.1.0"
   }
 }

package/src/Box/Box.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("Box page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/box");
+  await page.goto("./cfasim-ui/components/box");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/Button/Button.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("Button page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/button");
+  await page.goto("./cfasim-ui/components/button");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/Expander/Expander.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("Expander page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/expander");
+  await page.goto("./cfasim-ui/components/expander");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/Hint/Hint.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("Hint page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/hint");
+  await page.goto("./cfasim-ui/components/hint");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/Icon/Icon.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("Icon page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/icon");
+  await page.goto("./cfasim-ui/components/icon");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/NumberInput/NumberInput.md

@@ -166,4 +166,22 @@ With `live` on a regular input, the model updates as you type (debounced 300ms).
   </template>
 </ComponentDemo>
 
+### Integer type
+
+With `number-type="integer"`, decimal values are truncated to whole numbers on commit. When combined with `percent`, the display value (e.g. 42%) is treated as the integer — so internal values like 0.42 are valid.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput v-model="days" label="Steps" number-type="integer" />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput v-model="days" label="Steps" number-type="integer" />
+```
+
+  </template>
+</ComponentDemo>
+
 <!--@include: ./_api/number-input.md-->

package/src/NumberInput/NumberInput.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("NumberInput page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/number-input");
+  await page.goto("./cfasim-ui/components/number-input");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/NumberInput/NumberInput.test.ts

@@ -458,6 +458,111 @@ describe("NumberInput", () => {
     expect(wrapper.props("modelValue")).toBe(1234567);
   });
 
+  it("does not reformat while typing a decimal point", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 15,
+        label: "Count",
+      },
+    });
+    const input = wrapper.find("input");
+    // Simulate typing "15." — reformatInput should not strip the trailing dot
+    (input.element as HTMLInputElement).value = "15.";
+    await input.trigger("input");
+    expect((input.element as HTMLInputElement).value).toBe("15.");
+
+    // Typing "15.60" — trailing zero after decimal should also be preserved
+    (input.element as HTMLInputElement).value = "15.60";
+    await input.trigger("input");
+    expect((input.element as HTMLInputElement).value).toBe("15.60");
+  });
+
+  it("truncates decimal to integer when numberType is integer", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 15,
+        label: "Count",
+        numberType: "integer" as const,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("15.6");
+    await input.trigger("blur");
+    expect(wrapper.props("modelValue")).toBe(15);
+    expect((input.element as HTMLInputElement).value).toBe("15");
+  });
+
+  it("integer with percent allows whole percentages like 0.42", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 0.5,
+        label: "Rate",
+        percent: true,
+        numberType: "integer" as const,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    // 42% → internal 0.42 (display value 42 is a whole number, so allowed)
+    await input.setValue("42");
+    await input.trigger("blur");
+    expect(wrapper.props("modelValue")).toBeCloseTo(0.42);
+  });
+
+  it("integer with percent truncates fractional percentages", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 0.5,
+        label: "Rate",
+        percent: true,
+        numberType: "integer" as const,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    // 42.7% should truncate display to 42 → internal 0.42
+    await input.setValue("42.7");
+    await input.trigger("blur");
+    expect(wrapper.props("modelValue")).toBeCloseTo(0.42);
+    expect((input.element as HTMLInputElement).value).toBe("42");
+  });
+
+  it("displays .0 suffix for whole numbers when numberType is float", () => {
+    const wrapper = mount(NumberInput, {
+      props: { modelValue: 100, label: "Rate", numberType: "float" as const },
+    });
+    const input = wrapper.find("input");
+    expect((input.element as HTMLInputElement).value).toBe("100.0");
+  });
+
+  it("does not add .0 suffix for non-whole floats", () => {
+    const wrapper = mount(NumberInput, {
+      props: { modelValue: 2.5, label: "Rate", numberType: "float" as const },
+    });
+    const input = wrapper.find("input");
+    expect((input.element as HTMLInputElement).value).toBe("2.5");
+  });
+
+  it("adds .0 suffix after committing a whole number in float mode", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 2.5,
+        label: "Rate",
+        numberType: "float" as const,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("3");
+    await input.trigger("blur");
+    expect((input.element as HTMLInputElement).value).toBe("3.0");
+  });
+
   it("syncs local value when model changes externally", async () => {
     const wrapper = mount(NumberInput, {
       props: {

package/src/NumberInput/NumberInput.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   percent?: boolean;
   slider?: boolean;
   live?: boolean;
+  numberType?: "integer" | "float";
 }>();
 
 const sliderMin = computed(() => props.min ?? (props.percent ? 0 : 0));
@@ -36,21 +37,37 @@ function fromDisplay(v: number) {
   return props.percent ? v / 100 : v;
 }
 
+function coerceInteger(v: number): number {
+  if (props.numberType !== "integer") return v;
+  // Truncate the display value to an integer, then convert back
+  const display = toDisplay(v);
+  if (display == null) return v;
+  return fromDisplay(Math.trunc(display));
+}
+
 function formatWithCommas(v: number | undefined): string {
   if (v == null) return "";
   return v.toLocaleString("en-US");
 }
 
+function formatForDisplay(v: number | undefined): string {
+  const s = formatWithCommas(v);
+  if (props.numberType === "float" && v != null && Number.isInteger(v)) {
+    return s + ".0";
+  }
+  return s;
+}
+
 function stripCommas(s: string): string {
   return s.replace(/,/g, "");
 }
 
-const local = ref(formatWithCommas(toDisplay(model.value)));
+const local = ref(formatForDisplay(toDisplay(model.value)));
 const sliderLocal = ref(model.value);
 const validationError = ref<string>();
 
 watch(model, (v) => {
-  local.value = formatWithCommas(toDisplay(v));
+  local.value = formatForDisplay(toDisplay(v));
   sliderLocal.value = v;
 });
 
@@ -58,6 +75,7 @@ function reformatInput(event: Event) {
   const input = event.target as HTMLInputElement;
   const raw = stripCommas(input.value);
   if (raw === "" || raw === "-") return;
+  if (raw.endsWith(".") || (raw.includes(".") && raw.endsWith("0"))) return;
   const parsed = Number(raw);
   if (Number.isNaN(parsed)) return;
 
@@ -89,7 +107,7 @@ function onBlur() {
   commit();
   const parsed = Number(stripCommas(local.value));
   if (!Number.isNaN(parsed)) {
-    local.value = formatWithCommas(parsed);
+    local.value = formatForDisplay(parsed);
   }
 }
 
@@ -116,9 +134,14 @@ function validate(displayValue: number): string | undefined {
 }
 
 function commit() {
-  const parsed = Number(stripCommas(local.value));
+  let parsed = Number(stripCommas(local.value));
   if (Number.isNaN(parsed)) return;
 
+  if (props.numberType === "integer") {
+    parsed = Math.trunc(parsed);
+    local.value = formatForDisplay(parsed);
+  }
+
   const error = validate(parsed);
   validationError.value = error;
   if (error) return;
@@ -129,16 +152,17 @@ function commit() {
 
 function onSliderUpdate(v: number[] | undefined) {
   if (!v) return;
-  sliderLocal.value = v[0];
-  local.value = formatWithCommas(toDisplay(v[0]));
+  const val = coerceInteger(v[0]);
+  sliderLocal.value = val;
+  local.value = formatForDisplay(toDisplay(val));
   if (props.live) {
-    model.value = v[0];
+    model.value = val;
   }
 }
 
 function onSliderCommit(v: number[] | undefined) {
   if (!v) return;
-  model.value = v[0];
+  model.value = coerceInteger(v[0]);
 }
 
 const inputStep = computed(() => {
@@ -152,9 +176,10 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
   const current = Number.isNaN(parsed) ? 0 : parsed;
   const step = inputStep.value * (event.shiftKey ? 10 : 1);
   let next = current + step * direction;
+  if (props.numberType === "integer") next = Math.trunc(next);
   if (inputMin.value != null) next = Math.max(next, inputMin.value);
   if (inputMax.value != null) next = Math.min(next, inputMax.value);
-  local.value = formatWithCommas(next);
+  local.value = formatForDisplay(next);
   validationError.value = undefined;
   model.value = fromDisplay(next);
   sliderLocal.value = model.value;
@@ -179,7 +204,7 @@ const inputMax = computed(() => {
     <span v-if="!props.slider" class="input-wrapper">
       <input
         type="text"
-        inputmode="decimal"
+        :inputmode="props.numberType === 'integer' ? 'numeric' : 'decimal'"
         v-model="local"
         :placeholder="props.placeholder"
         :aria-invalid="!!validationError"
@@ -227,7 +252,7 @@ const inputMax = computed(() => {
     <span v-if="!props.slider" class="input-wrapper">
       <input
         type="text"
-        inputmode="decimal"
+        :inputmode="props.numberType === 'integer' ? 'numeric' : 'decimal'"
         v-model="local"
         :placeholder="props.placeholder"
         :aria-invalid="!!validationError"

package/src/SelectBox/SelectBox.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("SelectBox page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/select-box");
+  await page.goto("./cfasim-ui/components/select-box");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/SidebarLayout/SidebarLayout.md

@@ -0,0 +1,104 @@
+# SidebarLayout
+
+A responsive two-panel layout with a collapsible sidebar and main content area. On mobile, the sidebar becomes an overlay.
+
+## Demo
+
+<a href="/cfa-simulator/docs/demos/sidebar-layout/index.html" target="_blank">Open in full window ↗</a>
+
+<div style="border: 1px solid var(--vp-c-border); border-radius: 8px; overflow: hidden; height: 500px;">
+  <iframe src="/cfa-simulator/docs/demos/sidebar-layout/index.html" style="width: 100%; height: 100%; border: none;" />
+</div>
+
+## Tabs Demo (Router Mode)
+
+<a href="/cfa-simulator/docs/demos/sidebar-tabs/index.html" target="_blank">Open in full window ↗</a>
+
+<div style="border: 1px solid var(--vp-c-border); border-radius: 8px; overflow: hidden; height: 500px;">
+  <iframe src="/cfa-simulator/docs/demos/sidebar-tabs/index.html" style="width: 100%; height: 100%; border: none;" />
+</div>
+
+## Usage
+
+```vue
+<SidebarLayout>
+  <template #sidebar>
+    <h2>Controls</h2>
+    <NumberInput v-model="value" label="Parameter" slider live />
+  </template>
+  <h1>Main Content</h1>
+  <p>Your charts and data go here.</p>
+</SidebarLayout>
+```
+
+## Slots
+
+| Slot      | Description                                |
+| --------- | ------------------------------------------ |
+| `sidebar` | Content rendered in the left sidebar panel |
+| `default` | Main content area                          |
+
+## Props
+
+| Prop          | Type      | Default     | Description                                          |
+| ------------- | --------- | ----------- | ---------------------------------------------------- |
+| `hideTopbar`  | `boolean` | `false`     | Hides the topbar that contains the light/dark toggle |
+| `tabs`        | `Tab[]`   | `undefined` | Array of tab definitions to render in the main area  |
+| `v-model:tab` | `string`  | `undefined` | The active tab value (two-way binding)               |
+
+### Tab type
+
+```ts
+interface Tab {
+  value: string; // unique identifier
+  label: string; // display text
+  to?: string; // optional route path for vue-router integration
+}
+```
+
+## Tabs
+
+When the `tabs` prop is provided, a tab bar renders at the top of the main content area. Tabs support two modes:
+
+### Local mode
+
+Use `v-model:tab` to control which tab is active. Render content conditionally in the default slot.
+
+```vue
+<script setup>
+import { ref } from "vue";
+const activeTab = ref("chart");
+</script>
+
+<SidebarLayout
+  v-model:tab="activeTab"
+  :tabs="[
+    { value: 'chart', label: 'Chart' },
+    { value: 'data', label: 'Data' },
+  ]"
+>
+  <template #sidebar>
+    <h2>Controls</h2>
+  </template>
+  <div v-if="activeTab === 'chart'">Chart content</div>
+  <div v-if="activeTab === 'data'">Data table</div>
+</SidebarLayout>
+```
+
+### Router mode
+
+When tabs include a `to` property and vue-router is installed, clicking a tab navigates to that route. The active tab is automatically determined from the current route.
+
+```vue
+<SidebarLayout
+  :tabs="[
+    { value: 'chart', label: 'Chart', to: '/model/chart' },
+    { value: 'data', label: 'Data', to: '/model/data' },
+  ]"
+>
+  <template #sidebar>
+    <h2>Controls</h2>
+  </template>
+  <RouterView />
+</SidebarLayout>
+```

package/src/SidebarLayout/SidebarLayout.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import SidebarLayout from "./SidebarLayout.vue";
+
+beforeEach(() => {
+  // SidebarLayout uses window.matchMedia
+  window.matchMedia = vi.fn().mockReturnValue({
+    matches: false,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  });
+});
+
+const tabs = [
+  { value: "chart", label: "Chart" },
+  { value: "data", label: "Data" },
+  { value: "table", label: "Table" },
+];
+
+describe("SidebarLayout tabs", () => {
+  it("renders without tabs by default", () => {
+    const wrapper = mount(SidebarLayout);
+    expect(wrapper.find("[role='tablist']").exists()).toBe(false);
+  });
+
+  it("renders tab triggers when tabs prop is provided", () => {
+    const wrapper = mount(SidebarLayout, { props: { tabs } });
+    const triggers = wrapper.findAll("[role='tab']");
+    expect(triggers).toHaveLength(3);
+    expect(triggers[0].text()).toBe("Chart");
+    expect(triggers[1].text()).toBe("Data");
+    expect(triggers[2].text()).toBe("Table");
+  });
+
+  it("defaults to first tab as active", () => {
+    const wrapper = mount(SidebarLayout, { props: { tabs } });
+    const triggers = wrapper.findAll("[role='tab']");
+    expect(triggers[0].attributes("data-state")).toBe("active");
+    expect(triggers[1].attributes("data-state")).toBe("inactive");
+  });
+
+  it("activates tab matching v-model:tab", () => {
+    const wrapper = mount(SidebarLayout, {
+      props: { tabs, tab: "data" },
+    });
+    const triggers = wrapper.findAll("[role='tab']");
+    expect(triggers[1].attributes("data-state")).toBe("active");
+  });
+
+  it("emits update:tab when a tab is clicked", async () => {
+    let updated: string | undefined;
+    const wrapper = mount(SidebarLayout, {
+      props: {
+        tabs,
+        tab: "chart",
+        "onUpdate:tab": (v: string | undefined) => {
+          updated = v;
+        },
+      },
+    });
+    const triggers = wrapper.findAll("[role='tab']");
+    // reka-ui triggers need mousedown for activation in happy-dom
+    await triggers[2].trigger("mousedown");
+    await triggers[2].trigger("focus");
+    await triggers[2].trigger("mouseup");
+    await triggers[2].trigger("click");
+    expect(updated).toBe("table");
+  });
+
+  it("renders default slot content inside tabbed layout", () => {
+    const wrapper = mount(SidebarLayout, {
+      props: { tabs },
+      slots: { default: '<p class="test-content">Hello</p>' },
+    });
+    expect(wrapper.find(".test-content").text()).toBe("Hello");
+  });
+
+  it("renders sidebar slot alongside tabs", () => {
+    const wrapper = mount(SidebarLayout, {
+      props: { tabs },
+      slots: { sidebar: '<div class="sidebar-content">Sidebar</div>' },
+    });
+    expect(wrapper.find(".sidebar-content").text()).toBe("Sidebar");
+    expect(wrapper.findAll("[role='tab']")).toHaveLength(3);
+  });
+});

package/src/SidebarLayout/SidebarLayout.vue

@@ -1,8 +1,35 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+} from "vue";
+import { TabsRoot, TabsList, TabsTrigger, TabsIndicator } from "reka-ui";
 import Icon from "../Icon/Icon.vue";
 import LightDarkToggle from "../LightDarkToggle/LightDarkToggle.vue";
 
+// Optional vue-router integration (no hard dependency).
+// $router/$route on globalProperties is vue-router's stable public API.
+const instance = getCurrentInstance();
+const router = instance?.appContext.config.globalProperties.$router;
+const route = instance?.appContext.config.globalProperties.$route;
+
+export interface Tab {
+  value: string;
+  label: string;
+  to?: string;
+}
+
+const props = defineProps<{
+  hideTopbar?: boolean;
+  tabs?: Tab[];
+}>();
+
+const tab = defineModel<string>("tab");
+
 const mql = window.matchMedia("(max-width: 767px)");
 const isMobile = ref(mql.matches);
 const collapsed = ref(mql.matches);
@@ -23,65 +50,143 @@ onUnmounted(() => {
 function toggle() {
   collapsed.value = !collapsed.value;
 }
+
+const isRouterMode = computed(() => !!router && props.tabs?.some((t) => t.to));
+
+const activeTab = computed({
+  get() {
+    return tab.value ?? props.tabs?.[0]?.value;
+  },
+  set(value: string | undefined) {
+    if (!value) return;
+    tab.value = value;
+    if (isRouterMode.value && router) {
+      const target = props.tabs?.find((t) => t.value === value);
+      if (target?.to) router.push(target.to);
+    }
+  },
+});
+
+// Sync active tab from route changes in router mode
+if (route) {
+  watch(
+    () => route.path,
+    () => {
+      if (isRouterMode.value) {
+        const match = props.tabs?.find((t) => t.to === route.path);
+        if (match) tab.value = match.value;
+      }
+    },
+    { immediate: true },
+  );
+}
 </script>
 
 <template>
-  <div
-    class="SidebarLayout"
-    :data-collapsed="collapsed"
-    :data-mobile="isMobile"
-  >
-    <div v-if="isMobile && !collapsed" class="Overlay" @click="toggle" />
-    <button
-      v-if="isMobile"
-      type="button"
-      class="Toggle MobileToggle"
-      :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
-      :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
-      @click="toggle"
-    >
-      <Icon
-        :icon="collapsed ? 'left_panel_open' : 'left_panel_close'"
-        size="sm"
-      />
-    </button>
+  <div class="SidebarLayout" :data-collapsed="collapsed">
     <div class="SidebarRail">
       <aside class="Sidebar">
         <div class="SidebarScroll">
+          <div class="SidebarHeader">
+            <button
+              type="button"
+              class="Toggle"
+              aria-label="Collapse sidebar"
+              title="Collapse sidebar"
+              @click="toggle"
+            >
+              <Icon icon="keyboard_double_arrow_left" size="sm" />
+            </button>
+          </div>
           <slot name="sidebar" />
         </div>
-        <button
-          v-if="!isMobile"
-          type="button"
-          class="Toggle"
-          :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
-          :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
-          @click="toggle"
-        >
-          <Icon
-            :icon="collapsed ? 'left_panel_open' : 'left_panel_close'"
-            size="sm"
-          />
-        </button>
       </aside>
+      <button
+        type="button"
+        class="Toggle Toggle--expand"
+        aria-label="Expand sidebar"
+        title="Expand sidebar"
+        @click="toggle"
+      >
+        <Icon icon="keyboard_double_arrow_right" size="sm" />
+      </button>
     </div>
     <main class="Main">
-      <div class="Topbar">
-        <slot name="topbar">
-          <LightDarkToggle />
-        </slot>
-      </div>
-      <div class="MainScroll">
-        <div class="MainContent">
-          <slot />
+      <TabsRoot
+        v-if="tabs?.length"
+        :model-value="activeTab"
+        class="TabsLayout"
+        @update:model-value="activeTab = $event as string"
+      >
+        <div class="TabsBar">
+          <button
+            v-if="isMobile && collapsed"
+            type="button"
+            class="Toggle"
+            aria-label="Expand sidebar"
+            title="Expand sidebar"
+            @click="toggle"
+          >
+            <Icon icon="keyboard_double_arrow_right" size="sm" />
+          </button>
+          <TabsList class="TabsList" aria-label="Tabs">
+            <TabsTrigger
+              v-for="t in tabs"
+              :key="t.value"
+              :value="t.value"
+              class="TabsTrigger"
+            >
+              {{ t.label }}
+            </TabsTrigger>
+            <TabsIndicator
+              class="TabsIndicator"
+              :style="{
+                width: 'var(--reka-tabs-indicator-size)',
+                left: 'var(--reka-tabs-indicator-position)',
+              }"
+            />
+          </TabsList>
+          <div class="TabsBarEnd">
+            <slot name="topbar" />
+            <LightDarkToggle v-if="!hideTopbar" />
+          </div>
+        </div>
+        <div class="MainScroll">
+          <div class="MainContent">
+            <slot />
+          </div>
+        </div>
+      </TabsRoot>
+      <template v-else>
+        <div class="Topbar">
+          <button
+            v-if="isMobile && collapsed"
+            type="button"
+            class="Toggle"
+            aria-label="Expand sidebar"
+            title="Expand sidebar"
+            @click="toggle"
+          >
+            <Icon icon="keyboard_double_arrow_right" size="sm" />
+          </button>
+          <div class="TopbarEnd">
+            <slot name="topbar" />
+            <LightDarkToggle v-if="!hideTopbar" />
+          </div>
         </div>
-      </div>
+        <div class="MainScroll">
+          <div class="MainContent">
+            <slot />
+          </div>
+        </div>
+      </template>
     </main>
   </div>
 </template>
 
 <style scoped>
 .SidebarLayout {
+  --bar-height: 3rem;
   display: flex;
   height: 100vh;
   height: 100dvh;
@@ -97,13 +202,16 @@ function toggle() {
   height: 100%;
   overflow: hidden;
   transition: width var(--transition-normal);
+  position: relative;
 }
 
-.SidebarLayout[data-collapsed="true"] .SidebarRail {
-  width: var(--toggle-size);
-  background-color: var(--color-bg-1);
-  border-right: 1px solid var(--color-border);
-  box-shadow: var(--shadow-sm);
+@media (min-width: 768px) {
+  .SidebarLayout[data-collapsed="true"] .SidebarRail {
+    width: var(--toggle-size);
+    background-color: var(--color-bg-1);
+    border-right: 1px solid var(--color-border);
+    box-shadow: var(--shadow-sm);
+  }
 }
 
 .Sidebar {
@@ -179,8 +287,26 @@ function toggle() {
   box-shadow: var(--shadow-focus);
 }
 
-.SidebarLayout[data-collapsed="true"] .Toggle:not(.MobileToggle) {
-  transform: translateX(100%);
+.SidebarHeader {
+  display: flex;
+  justify-content: flex-end;
+  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4))
+    calc(-1 * var(--space-3));
+}
+
+.Toggle--expand {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast);
+}
+
+.SidebarLayout[data-collapsed="true"] .Toggle--expand {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .Main {
@@ -196,14 +322,21 @@ function toggle() {
 .Topbar {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  padding: var(--space-2) var(--space-4);
+  min-height: var(--bar-height);
+  padding: 0 var(--space-4);
   flex-shrink: 0;
 }
 
+.TopbarEnd {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
 @media (min-width: 768px) {
   .Topbar {
-    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-20);
+    padding: 0 var(--space-4) 0 var(--space-20);
   }
 }
 
@@ -226,65 +359,107 @@ function toggle() {
   padding: 0 var(--space-4);
 }
 
-.SidebarLayout[data-mobile="true"] .MainScroll {
-  padding-top: calc(var(--toggle-size) + var(--space-2));
-}
-
 @media (min-width: 768px) {
   .MainContent {
     padding: 0 var(--space-4) 0 var(--space-20);
   }
 }
 
-/* Mobile: sidebar overlays content */
-.Overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 10;
+/* Mobile: use transform instead of width resize */
+@media (max-width: 767px) {
+  .SidebarLayout {
+    transition: transform var(--transition-normal);
+  }
+
+  .SidebarLayout[data-collapsed="true"] {
+    transform: translateX(calc(-1 * var(--sidebar-width)));
+  }
+
+  .SidebarLayout[data-collapsed="true"] .Sidebar {
+    transform: translateX(0);
+  }
+
+  .SidebarRail {
+    min-width: var(--sidebar-width);
+  }
+
+  .Main {
+    min-width: 100vw;
+  }
+
+  .Toggle--expand {
+    display: none;
+  }
 }
 
-.SidebarLayout[data-mobile="true"] .SidebarRail {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 11;
-  width: var(--sidebar-width);
-  max-width: 85vw;
-  transition: transform var(--transition-normal);
-  transform: translateX(0);
+/* Tabs */
+.TabsLayout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
 
-.SidebarLayout[data-mobile="true"][data-collapsed="true"] .SidebarRail {
-  transform: translateX(-100%);
-  width: var(--sidebar-width);
-  max-width: 85vw;
-  background-color: transparent;
-  border-right: none;
-  box-shadow: none;
+.TabsBar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  min-height: var(--bar-height);
+  border-bottom: 1px solid var(--color-border);
+  padding: 0 var(--space-4);
 }
 
-.SidebarLayout[data-mobile="true"] .Sidebar {
-  width: 100%;
+.TabsBarEnd {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
 }
 
-.SidebarLayout[data-mobile="true"][data-collapsed="true"] .Sidebar {
-  transform: translateX(0);
+.TabsList {
+  display: flex;
+  gap: var(--space-1);
+  position: relative;
+  align-self: stretch;
 }
 
-.MobileToggle {
-  position: fixed;
-  top: var(--space-1);
-  left: calc(min(var(--sidebar-width), 85vw) + var(--space-1));
-  z-index: 12;
+.TabsTrigger {
+  position: relative;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--color-text-secondary);
   background: none;
   border: none;
-  box-shadow: none;
-  border-radius: var(--radius-md);
-  transition: left var(--transition-normal);
+  cursor: pointer;
+  transition:
+    color var(--transition-fast),
+    background-color var(--transition-fast);
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
 }
 
-.SidebarLayout[data-collapsed="true"] .MobileToggle {
-  left: var(--space-1);
+.TabsTrigger:hover {
+  color: var(--color-text);
+  background-color: var(--color-bg-1);
+}
+
+.TabsTrigger[data-state="active"] {
+  color: var(--color-text);
+}
+
+.TabsTrigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+.TabsIndicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--color-text);
+  transition:
+    width var(--transition-fast),
+    left var(--transition-fast);
 }
 </style>

package/src/Spinner/Spinner.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("Spinner page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/spinner");
+  await page.goto("./cfasim-ui/components/spinner");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/TextInput/TextInput.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("TextInput page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/text-input");
+  await page.goto("./cfasim-ui/components/text-input");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/Toggle/Toggle.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("Toggle page renders demos", async ({ page }) => {
-  await page.goto("/cfa-simulator/cfasim-ui/components/toggle");
+  await page.goto("./cfasim-ui/components/toggle");
   await expect(page.locator("h1")).toBeVisible();
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();

package/src/index.ts

@@ -9,6 +9,7 @@ export { default as NumberInput } from "./NumberInput/NumberInput.vue";
 export { default as SelectBox } from "./SelectBox/SelectBox.vue";
 export type { SelectOption } from "./SelectBox/SelectBox.vue";
 export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";
+export type { Tab } from "./SidebarLayout/SidebarLayout.vue";
 export { default as Spinner } from "./Spinner/Spinner.vue";
 export { default as TextInput } from "./TextInput/TextInput.vue";
 export { default as Toggle } from "./Toggle/Toggle.vue";