From a65d5bf6058af391ddc04085e075fd6e66944890 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 12 May 2026 13:30:29 -0500
Subject: [PATCH 1/2] =?UTF-8?q?feat(emerald):=20Paper=20design=20system=20?=
 =?UTF-8?q?foundation=20=E2=80=94=20Phase=200?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds @paper/emerald — the first commercial design system built on the
Paper layer. Includes 36 component families (EmButton, EmTextField,
EmDialog, EmAutoComplete, EmAccordion, EmAvatar, EmBadge, EmBreadcrumb,
EmCard, EmCarousel, EmCheckbox, EmContainer, EmDatePicker, EmDivider,
EmFlex, EmForm, EmGrid, EmList, EmLoading, EmMenu, EmPagination,
EmProgress, EmRadio, EmSelect, EmSlider, EmStepper, EmSwitch, EmTable,
EmTabs, EmTag, EmTextarea, EmToast, EmTooltip, EmUpload), design tokens
from the Figma spec, an EmeraldStyleSheetAdapter that extends v0's
V0StyleSheetThemeAdapter, and a createEmeraldPlugin for one-line setup.

Also adds .claude/rules/paper-components.md — the path-scoped rule doc
that codifies the V0Paper-based component patterns design systems use.

Pulls in @phosphor-icons/vue via the pnpm catalog (used by Em components
for iconography) and registers packages/emerald in the knip workspace
config.
---
 .claude/rules/paper-components.md             |  280 +++
 dev/src/EmeraldKitchenSink.vue                | 1504 +++++++++++++++++
 knip.json                                     |    7 +
 packages/emerald/package.json                 |   42 +
 packages/emerald/src/adapter.ts               |   56 +
 .../components/EmAccordion/EmAccordion.vue    |   58 +
 .../EmAccordion/EmAccordionContent.vue        |   58 +
 .../components/EmAccordion/EmAccordionCue.vue |   30 +
 .../EmAccordion/EmAccordionHeader.vue         |   25 +
 .../EmAccordion/EmAccordionItem.vue           |   46 +
 .../EmAccordion/EmAccordionTrigger.vue        |   44 +
 .../src/components/EmAccordion/index.ts       |   17 +
 .../src/components/EmAlert/EmAlert.vue        |  133 ++
 .../src/components/EmAlert/EmAlertBody.vue    |   13 +
 .../src/components/EmAlert/EmAlertClose.vue   |   26 +
 .../components/EmAlert/EmAlertDescription.vue |   13 +
 .../src/components/EmAlert/EmAlertIcon.vue    |   13 +
 .../src/components/EmAlert/EmAlertTitle.vue   |   13 +
 .../emerald/src/components/EmAlert/index.ts   |   17 +
 .../EmAutoComplete/EmAutoComplete.vue         |   80 +
 .../EmAutoComplete/EmAutoCompleteContent.vue  |   45 +
 .../EmAutoComplete/EmAutoCompleteControl.vue  |   40 +
 .../EmAutoComplete/EmAutoCompleteEmpty.vue    |   31 +
 .../EmAutoComplete/EmAutoCompleteInput.vue    |   47 +
 .../EmAutoComplete/EmAutoCompleteItem.vue     |   69 +
 .../src/components/EmAutoComplete/index.ts    |   17 +
 .../src/components/EmAvatar/EmAvatar.vue      |   97 ++
 .../components/EmAvatar/EmAvatarFallback.vue  |   23 +
 .../src/components/EmAvatar/EmAvatarImage.vue |   23 +
 .../emerald/src/components/EmAvatar/index.ts  |    8 +
 .../src/components/EmBadge/EmBadge.vue        |  147 ++
 .../emerald/src/components/EmBadge/index.ts   |    2 +
 .../components/EmBreadcrumb/EmBreadcrumb.vue  |   53 +
 .../EmBreadcrumb/EmBreadcrumbDivider.vue      |   43 +
 .../EmBreadcrumb/EmBreadcrumbEllipsis.vue     |   36 +
 .../EmBreadcrumb/EmBreadcrumbItem.vue         |   47 +
 .../EmBreadcrumb/EmBreadcrumbLink.vue         |   47 +
 .../EmBreadcrumb/EmBreadcrumbList.vue         |   30 +
 .../EmBreadcrumb/EmBreadcrumbPage.vue         |   26 +
 .../src/components/EmBreadcrumb/index.ts      |   20 +
 .../src/components/EmButton/EmButton.vue      |  159 ++
 .../components/EmButton/EmButtonAppend.vue    |   13 +
 .../components/EmButton/EmButtonContent.vue   |   13 +
 .../components/EmButton/EmButtonLoader.vue    |   38 +
 .../components/EmButton/EmButtonPrepend.vue   |   13 +
 .../emerald/src/components/EmButton/index.ts  |   14 +
 .../emerald/src/components/EmCard/EmCard.vue  |   46 +
 .../src/components/EmCard/EmCardBody.vue      |   26 +
 .../src/components/EmCard/EmCardFooter.vue    |   23 +
 .../src/components/EmCard/EmCardHeader.vue    |   22 +
 .../src/components/EmCard/EmCardSubtitle.vue  |   24 +
 .../src/components/EmCard/EmCardTitle.vue     |   29 +
 .../emerald/src/components/EmCard/index.ts    |   17 +
 .../src/components/EmCarousel/EmCarousel.vue  |   84 +
 .../EmCarousel/EmCarouselIndicator.vue        |   67 +
 .../components/EmCarousel/EmCarouselItem.vue  |   66 +
 .../components/EmCarousel/EmCarouselNext.vue  |   51 +
 .../EmCarousel/EmCarouselPrevious.vue         |   51 +
 .../EmCarousel/EmCarouselViewport.vue         |   38 +
 .../src/components/EmCarousel/index.ts        |   17 +
 .../src/components/EmCheckbox/EmCheckbox.vue  |  102 ++
 .../components/EmCheckbox/EmCheckboxGroup.vue |   47 +
 .../EmCheckbox/EmCheckboxIndicator.vue        |  142 ++
 .../EmCheckbox/EmCheckboxSelectAll.vue        |   22 +
 .../src/components/EmCheckbox/index.ts        |   11 +
 .../components/EmContainer/EmContainer.vue    |   44 +
 .../src/components/EmContainer/index.ts       |    2 +
 .../components/EmDatePicker/EmDatePicker.vue  |   55 +
 .../EmDatePicker/EmDatePickerCalendar.vue     |   23 +
 .../EmDatePicker/EmDatePickerCell.vue         |   88 +
 .../EmDatePicker/EmDatePickerGrid.vue         |   26 +
 .../EmDatePicker/EmDatePickerHeader.vue       |   41 +
 .../EmDatePicker/EmDatePickerInput.vue        |   50 +
 .../src/components/EmDatePicker/index.ts      |   17 +
 .../src/components/EmDialog/EmDialog.vue      |   27 +
 .../components/EmDialog/EmDialogActivator.vue |   16 +
 .../src/components/EmDialog/EmDialogBody.vue  |   26 +
 .../src/components/EmDialog/EmDialogClose.vue |   20 +
 .../components/EmDialog/EmDialogContent.vue   |   80 +
 .../EmDialog/EmDialogDescription.vue          |   27 +
 .../components/EmDialog/EmDialogFooter.vue    |   23 +
 .../components/EmDialog/EmDialogHeader.vue    |   22 +
 .../src/components/EmDialog/EmDialogTitle.vue |   28 +
 .../emerald/src/components/EmDialog/index.ts  |   26 +
 .../src/components/EmDivider/EmDivider.vue    |   52 +
 .../components/EmDivider/EmDividerLabel.vue   |   32 +
 .../components/EmDivider/EmDividerLine.vue    |   57 +
 .../emerald/src/components/EmDivider/index.ts |    8 +
 .../emerald/src/components/EmFlex/EmFlex.vue  |   69 +
 .../emerald/src/components/EmFlex/index.ts    |    9 +
 .../emerald/src/components/EmForm/EmForm.vue  |  164 ++
 .../emerald/src/components/EmForm/index.ts    |    2 +
 .../emerald/src/components/EmGrid/EmGrid.vue  |   41 +
 .../src/components/EmGrid/EmGridItem.vue      |   34 +
 .../emerald/src/components/EmGrid/index.ts    |    5 +
 .../emerald/src/components/EmList/EmList.vue  |  178 ++
 .../src/components/EmList/EmListItem.vue      |   44 +
 .../components/EmList/EmListItemAction.vue    |   13 +
 .../src/components/EmList/EmListItemBody.vue  |   13 +
 .../src/components/EmList/EmListItemIcon.vue  |   13 +
 .../components/EmList/EmListItemSubtitle.vue  |   13 +
 .../src/components/EmList/EmListItemTitle.vue |   13 +
 .../src/components/EmList/EmListSeparator.vue |   11 +
 .../src/components/EmList/EmListSubheader.vue |   13 +
 .../emerald/src/components/EmList/index.ts    |   26 +
 .../src/components/EmLoading/EmLoading.vue    |   77 +
 .../emerald/src/components/EmLoading/index.ts |    2 +
 .../emerald/src/components/EmMenu/EmMenu.vue  |   27 +
 .../src/components/EmMenu/EmMenuActivator.vue |   18 +
 .../src/components/EmMenu/EmMenuContent.vue   |   73 +
 .../src/components/EmMenu/EmMenuItem.vue      |   80 +
 .../src/components/EmMenu/EmMenuLabel.vue     |   29 +
 .../src/components/EmMenu/EmMenuSeparator.vue |   31 +
 .../emerald/src/components/EmMenu/index.ts    |   17 +
 .../components/EmPagination/EmPagination.vue  |   72 +
 .../EmPagination/EmPaginationEllipsis.vue     |   36 +
 .../EmPagination/EmPaginationFirst.vue        |   54 +
 .../EmPagination/EmPaginationItem.vue         |   68 +
 .../EmPagination/EmPaginationLast.vue         |   54 +
 .../EmPagination/EmPaginationNext.vue         |   54 +
 .../EmPagination/EmPaginationPrev.vue         |   54 +
 .../src/components/EmPagination/index.ts      |   20 +
 .../src/components/EmProgress/EmProgress.vue  |   71 +
 .../components/EmProgress/EmProgressFill.vue  |   52 +
 .../components/EmProgress/EmProgressTrack.vue |   34 +
 .../components/EmProgress/EmProgressValue.vue |   36 +
 .../src/components/EmProgress/index.ts        |   11 +
 .../src/components/EmRadio/EmRadio.vue        |   96 ++
 .../src/components/EmRadio/EmRadioGroup.vue   |   47 +
 .../components/EmRadio/EmRadioIndicator.vue   |  111 ++
 .../emerald/src/components/EmRadio/index.ts   |    8 +
 .../src/components/EmSelect/EmSelect.vue      |   71 +
 .../components/EmSelect/EmSelectActivator.vue |   61 +
 .../components/EmSelect/EmSelectContent.vue   |   60 +
 .../src/components/EmSelect/EmSelectItem.vue  |   69 +
 .../EmSelect/EmSelectPlaceholder.vue          |   34 +
 .../src/components/EmSelect/EmSelectValue.vue |   33 +
 .../emerald/src/components/EmSelect/index.ts  |   17 +
 .../src/components/EmSlider/EmSlider.vue      |   90 +
 .../src/components/EmSlider/EmSliderRange.vue |   42 +
 .../src/components/EmSlider/EmSliderThumb.vue |   60 +
 .../src/components/EmSlider/EmSliderTrack.vue |   42 +
 .../emerald/src/components/EmSlider/index.ts  |   11 +
 .../src/components/EmStepper/EmStepper.vue    |   63 +
 .../components/EmStepper/EmStepperItem.vue    |  165 ++
 .../components/EmStepper/EmStepperLabel.vue   |   27 +
 .../EmStepper/EmStepperLabelDescription.vue   |   25 +
 .../EmStepper/EmStepperSeparator.vue          |   30 +
 .../emerald/src/components/EmStepper/index.ts |   14 +
 .../src/components/EmSwitch/EmSwitch.vue      |   98 ++
 .../src/components/EmSwitch/EmSwitchGroup.vue |   47 +
 .../src/components/EmSwitch/EmSwitchThumb.vue |   61 +
 .../src/components/EmSwitch/EmSwitchTrack.vue |   68 +
 .../emerald/src/components/EmSwitch/index.ts  |   11 +
 .../src/components/EmTable/EmTable.vue        |   58 +
 .../src/components/EmTable/EmTableBody.vue    |   23 +
 .../src/components/EmTable/EmTableCell.vue    |   45 +
 .../src/components/EmTable/EmTableHead.vue    |   29 +
 .../src/components/EmTable/EmTableHeader.vue  |  180 ++
 .../src/components/EmTable/EmTableRow.vue     |   34 +
 .../emerald/src/components/EmTable/index.ts   |   17 +
 .../emerald/src/components/EmTabs/EmTabs.vue  |   72 +
 .../src/components/EmTabs/EmTabsItem.vue      |   84 +
 .../src/components/EmTabs/EmTabsList.vue      |   40 +
 .../src/components/EmTabs/EmTabsPanel.vue     |   45 +
 .../emerald/src/components/EmTabs/index.ts    |   11 +
 .../emerald/src/components/EmTag/EmTag.vue    |  230 +++
 .../emerald/src/components/EmTag/index.ts     |    2 +
 .../components/EmTextField/EmTextField.vue    |   92 +
 .../EmTextField/EmTextFieldAppend.vue         |   21 +
 .../EmTextField/EmTextFieldControl.vue        |  114 ++
 .../EmTextField/EmTextFieldDescription.vue    |   25 +
 .../EmTextField/EmTextFieldError.vue          |   28 +
 .../EmTextField/EmTextFieldLabel.vue          |   33 +
 .../EmTextField/EmTextFieldPrepend.vue        |   21 +
 .../src/components/EmTextField/index.ts       |   20 +
 .../src/components/EmTextarea/EmTextarea.vue  |   86 +
 .../EmTextarea/EmTextareaControl.vue          |  102 ++
 .../EmTextarea/EmTextareaDescription.vue      |   26 +
 .../components/EmTextarea/EmTextareaError.vue |   28 +
 .../components/EmTextarea/EmTextareaLabel.vue |   34 +
 .../src/components/EmTextarea/index.ts        |   14 +
 .../src/components/EmToast/EmToast.vue        |  168 ++
 .../src/components/EmToast/EmToastBody.vue    |   13 +
 .../src/components/EmToast/EmToastClose.vue   |   26 +
 .../components/EmToast/EmToastDescription.vue |   13 +
 .../src/components/EmToast/EmToastIcon.vue    |   13 +
 .../src/components/EmToast/EmToastTitle.vue   |   13 +
 .../emerald/src/components/EmToast/index.ts   |   17 +
 .../src/components/EmTooltip/EmTooltip.vue    |   27 +
 .../EmTooltip/EmTooltipActivator.vue          |   51 +
 .../components/EmTooltip/EmTooltipContent.vue |  141 ++
 .../emerald/src/components/EmTooltip/index.ts |    8 +
 .../src/components/EmUpload/EmUpload.vue      |   57 +
 .../components/EmUpload/EmUploadDropzone.vue  |   95 ++
 .../src/components/EmUpload/EmUploadInput.vue |   48 +
 .../src/components/EmUpload/EmUploadItem.vue  |   38 +
 .../src/components/EmUpload/EmUploadList.vue  |   24 +
 .../emerald/src/components/EmUpload/index.ts  |   14 +
 packages/emerald/src/components/index.ts      |   35 +
 packages/emerald/src/index.ts                 |    4 +
 packages/emerald/src/plugin.ts                |  106 ++
 packages/emerald/src/theme.ts                 |  224 +++
 packages/emerald/src/vite-env.d.ts            |    3 +
 packages/emerald/tsconfig.json                |   38 +
 packages/emerald/tsdown.config.mts            |   36 +
 pnpm-lock.yaml                                |   45 +-
 pnpm-workspace.yaml                           |    1 +
 208 files changed, 11113 insertions(+), 2 deletions(-)
 create mode 100644 .claude/rules/paper-components.md
 create mode 100644 dev/src/EmeraldKitchenSink.vue
 create mode 100644 packages/emerald/package.json
 create mode 100644 packages/emerald/src/adapter.ts
 create mode 100644 packages/emerald/src/components/EmAccordion/EmAccordion.vue
 create mode 100644 packages/emerald/src/components/EmAccordion/EmAccordionContent.vue
 create mode 100644 packages/emerald/src/components/EmAccordion/EmAccordionCue.vue
 create mode 100644 packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue
 create mode 100644 packages/emerald/src/components/EmAccordion/EmAccordionItem.vue
 create mode 100644 packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue
 create mode 100644 packages/emerald/src/components/EmAccordion/index.ts
 create mode 100644 packages/emerald/src/components/EmAlert/EmAlert.vue
 create mode 100644 packages/emerald/src/components/EmAlert/EmAlertBody.vue
 create mode 100644 packages/emerald/src/components/EmAlert/EmAlertClose.vue
 create mode 100644 packages/emerald/src/components/EmAlert/EmAlertDescription.vue
 create mode 100644 packages/emerald/src/components/EmAlert/EmAlertIcon.vue
 create mode 100644 packages/emerald/src/components/EmAlert/EmAlertTitle.vue
 create mode 100644 packages/emerald/src/components/EmAlert/index.ts
 create mode 100644 packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue
 create mode 100644 packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue
 create mode 100644 packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue
 create mode 100644 packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue
 create mode 100644 packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue
 create mode 100644 packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue
 create mode 100644 packages/emerald/src/components/EmAutoComplete/index.ts
 create mode 100644 packages/emerald/src/components/EmAvatar/EmAvatar.vue
 create mode 100644 packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue
 create mode 100644 packages/emerald/src/components/EmAvatar/EmAvatarImage.vue
 create mode 100644 packages/emerald/src/components/EmAvatar/index.ts
 create mode 100644 packages/emerald/src/components/EmBadge/EmBadge.vue
 create mode 100644 packages/emerald/src/components/EmBadge/index.ts
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue
 create mode 100644 packages/emerald/src/components/EmBreadcrumb/index.ts
 create mode 100644 packages/emerald/src/components/EmButton/EmButton.vue
 create mode 100644 packages/emerald/src/components/EmButton/EmButtonAppend.vue
 create mode 100644 packages/emerald/src/components/EmButton/EmButtonContent.vue
 create mode 100644 packages/emerald/src/components/EmButton/EmButtonLoader.vue
 create mode 100644 packages/emerald/src/components/EmButton/EmButtonPrepend.vue
 create mode 100644 packages/emerald/src/components/EmButton/index.ts
 create mode 100644 packages/emerald/src/components/EmCard/EmCard.vue
 create mode 100644 packages/emerald/src/components/EmCard/EmCardBody.vue
 create mode 100644 packages/emerald/src/components/EmCard/EmCardFooter.vue
 create mode 100644 packages/emerald/src/components/EmCard/EmCardHeader.vue
 create mode 100644 packages/emerald/src/components/EmCard/EmCardSubtitle.vue
 create mode 100644 packages/emerald/src/components/EmCard/EmCardTitle.vue
 create mode 100644 packages/emerald/src/components/EmCard/index.ts
 create mode 100644 packages/emerald/src/components/EmCarousel/EmCarousel.vue
 create mode 100644 packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue
 create mode 100644 packages/emerald/src/components/EmCarousel/EmCarouselItem.vue
 create mode 100644 packages/emerald/src/components/EmCarousel/EmCarouselNext.vue
 create mode 100644 packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue
 create mode 100644 packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue
 create mode 100644 packages/emerald/src/components/EmCarousel/index.ts
 create mode 100644 packages/emerald/src/components/EmCheckbox/EmCheckbox.vue
 create mode 100644 packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue
 create mode 100644 packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue
 create mode 100644 packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue
 create mode 100644 packages/emerald/src/components/EmCheckbox/index.ts
 create mode 100644 packages/emerald/src/components/EmContainer/EmContainer.vue
 create mode 100644 packages/emerald/src/components/EmContainer/index.ts
 create mode 100644 packages/emerald/src/components/EmDatePicker/EmDatePicker.vue
 create mode 100644 packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue
 create mode 100644 packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue
 create mode 100644 packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue
 create mode 100644 packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue
 create mode 100644 packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue
 create mode 100644 packages/emerald/src/components/EmDatePicker/index.ts
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialog.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogActivator.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogBody.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogClose.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogContent.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogDescription.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogFooter.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogHeader.vue
 create mode 100644 packages/emerald/src/components/EmDialog/EmDialogTitle.vue
 create mode 100644 packages/emerald/src/components/EmDialog/index.ts
 create mode 100644 packages/emerald/src/components/EmDivider/EmDivider.vue
 create mode 100644 packages/emerald/src/components/EmDivider/EmDividerLabel.vue
 create mode 100644 packages/emerald/src/components/EmDivider/EmDividerLine.vue
 create mode 100644 packages/emerald/src/components/EmDivider/index.ts
 create mode 100644 packages/emerald/src/components/EmFlex/EmFlex.vue
 create mode 100644 packages/emerald/src/components/EmFlex/index.ts
 create mode 100644 packages/emerald/src/components/EmForm/EmForm.vue
 create mode 100644 packages/emerald/src/components/EmForm/index.ts
 create mode 100644 packages/emerald/src/components/EmGrid/EmGrid.vue
 create mode 100644 packages/emerald/src/components/EmGrid/EmGridItem.vue
 create mode 100644 packages/emerald/src/components/EmGrid/index.ts
 create mode 100644 packages/emerald/src/components/EmList/EmList.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListItem.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListItemAction.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListItemBody.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListItemIcon.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListItemSubtitle.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListItemTitle.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListSeparator.vue
 create mode 100644 packages/emerald/src/components/EmList/EmListSubheader.vue
 create mode 100644 packages/emerald/src/components/EmList/index.ts
 create mode 100644 packages/emerald/src/components/EmLoading/EmLoading.vue
 create mode 100644 packages/emerald/src/components/EmLoading/index.ts
 create mode 100644 packages/emerald/src/components/EmMenu/EmMenu.vue
 create mode 100644 packages/emerald/src/components/EmMenu/EmMenuActivator.vue
 create mode 100644 packages/emerald/src/components/EmMenu/EmMenuContent.vue
 create mode 100644 packages/emerald/src/components/EmMenu/EmMenuItem.vue
 create mode 100644 packages/emerald/src/components/EmMenu/EmMenuLabel.vue
 create mode 100644 packages/emerald/src/components/EmMenu/EmMenuSeparator.vue
 create mode 100644 packages/emerald/src/components/EmMenu/index.ts
 create mode 100644 packages/emerald/src/components/EmPagination/EmPagination.vue
 create mode 100644 packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue
 create mode 100644 packages/emerald/src/components/EmPagination/EmPaginationFirst.vue
 create mode 100644 packages/emerald/src/components/EmPagination/EmPaginationItem.vue
 create mode 100644 packages/emerald/src/components/EmPagination/EmPaginationLast.vue
 create mode 100644 packages/emerald/src/components/EmPagination/EmPaginationNext.vue
 create mode 100644 packages/emerald/src/components/EmPagination/EmPaginationPrev.vue
 create mode 100644 packages/emerald/src/components/EmPagination/index.ts
 create mode 100644 packages/emerald/src/components/EmProgress/EmProgress.vue
 create mode 100644 packages/emerald/src/components/EmProgress/EmProgressFill.vue
 create mode 100644 packages/emerald/src/components/EmProgress/EmProgressTrack.vue
 create mode 100644 packages/emerald/src/components/EmProgress/EmProgressValue.vue
 create mode 100644 packages/emerald/src/components/EmProgress/index.ts
 create mode 100644 packages/emerald/src/components/EmRadio/EmRadio.vue
 create mode 100644 packages/emerald/src/components/EmRadio/EmRadioGroup.vue
 create mode 100644 packages/emerald/src/components/EmRadio/EmRadioIndicator.vue
 create mode 100644 packages/emerald/src/components/EmRadio/index.ts
 create mode 100644 packages/emerald/src/components/EmSelect/EmSelect.vue
 create mode 100644 packages/emerald/src/components/EmSelect/EmSelectActivator.vue
 create mode 100644 packages/emerald/src/components/EmSelect/EmSelectContent.vue
 create mode 100644 packages/emerald/src/components/EmSelect/EmSelectItem.vue
 create mode 100644 packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue
 create mode 100644 packages/emerald/src/components/EmSelect/EmSelectValue.vue
 create mode 100644 packages/emerald/src/components/EmSelect/index.ts
 create mode 100644 packages/emerald/src/components/EmSlider/EmSlider.vue
 create mode 100644 packages/emerald/src/components/EmSlider/EmSliderRange.vue
 create mode 100644 packages/emerald/src/components/EmSlider/EmSliderThumb.vue
 create mode 100644 packages/emerald/src/components/EmSlider/EmSliderTrack.vue
 create mode 100644 packages/emerald/src/components/EmSlider/index.ts
 create mode 100644 packages/emerald/src/components/EmStepper/EmStepper.vue
 create mode 100644 packages/emerald/src/components/EmStepper/EmStepperItem.vue
 create mode 100644 packages/emerald/src/components/EmStepper/EmStepperLabel.vue
 create mode 100644 packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue
 create mode 100644 packages/emerald/src/components/EmStepper/EmStepperSeparator.vue
 create mode 100644 packages/emerald/src/components/EmStepper/index.ts
 create mode 100644 packages/emerald/src/components/EmSwitch/EmSwitch.vue
 create mode 100644 packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue
 create mode 100644 packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue
 create mode 100644 packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue
 create mode 100644 packages/emerald/src/components/EmSwitch/index.ts
 create mode 100644 packages/emerald/src/components/EmTable/EmTable.vue
 create mode 100644 packages/emerald/src/components/EmTable/EmTableBody.vue
 create mode 100644 packages/emerald/src/components/EmTable/EmTableCell.vue
 create mode 100644 packages/emerald/src/components/EmTable/EmTableHead.vue
 create mode 100644 packages/emerald/src/components/EmTable/EmTableHeader.vue
 create mode 100644 packages/emerald/src/components/EmTable/EmTableRow.vue
 create mode 100644 packages/emerald/src/components/EmTable/index.ts
 create mode 100644 packages/emerald/src/components/EmTabs/EmTabs.vue
 create mode 100644 packages/emerald/src/components/EmTabs/EmTabsItem.vue
 create mode 100644 packages/emerald/src/components/EmTabs/EmTabsList.vue
 create mode 100644 packages/emerald/src/components/EmTabs/EmTabsPanel.vue
 create mode 100644 packages/emerald/src/components/EmTabs/index.ts
 create mode 100644 packages/emerald/src/components/EmTag/EmTag.vue
 create mode 100644 packages/emerald/src/components/EmTag/index.ts
 create mode 100644 packages/emerald/src/components/EmTextField/EmTextField.vue
 create mode 100644 packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue
 create mode 100644 packages/emerald/src/components/EmTextField/EmTextFieldControl.vue
 create mode 100644 packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue
 create mode 100644 packages/emerald/src/components/EmTextField/EmTextFieldError.vue
 create mode 100644 packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue
 create mode 100644 packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue
 create mode 100644 packages/emerald/src/components/EmTextField/index.ts
 create mode 100644 packages/emerald/src/components/EmTextarea/EmTextarea.vue
 create mode 100644 packages/emerald/src/components/EmTextarea/EmTextareaControl.vue
 create mode 100644 packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue
 create mode 100644 packages/emerald/src/components/EmTextarea/EmTextareaError.vue
 create mode 100644 packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue
 create mode 100644 packages/emerald/src/components/EmTextarea/index.ts
 create mode 100644 packages/emerald/src/components/EmToast/EmToast.vue
 create mode 100644 packages/emerald/src/components/EmToast/EmToastBody.vue
 create mode 100644 packages/emerald/src/components/EmToast/EmToastClose.vue
 create mode 100644 packages/emerald/src/components/EmToast/EmToastDescription.vue
 create mode 100644 packages/emerald/src/components/EmToast/EmToastIcon.vue
 create mode 100644 packages/emerald/src/components/EmToast/EmToastTitle.vue
 create mode 100644 packages/emerald/src/components/EmToast/index.ts
 create mode 100644 packages/emerald/src/components/EmTooltip/EmTooltip.vue
 create mode 100644 packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue
 create mode 100644 packages/emerald/src/components/EmTooltip/EmTooltipContent.vue
 create mode 100644 packages/emerald/src/components/EmTooltip/index.ts
 create mode 100644 packages/emerald/src/components/EmUpload/EmUpload.vue
 create mode 100644 packages/emerald/src/components/EmUpload/EmUploadDropzone.vue
 create mode 100644 packages/emerald/src/components/EmUpload/EmUploadInput.vue
 create mode 100644 packages/emerald/src/components/EmUpload/EmUploadItem.vue
 create mode 100644 packages/emerald/src/components/EmUpload/EmUploadList.vue
 create mode 100644 packages/emerald/src/components/EmUpload/index.ts
 create mode 100644 packages/emerald/src/components/index.ts
 create mode 100644 packages/emerald/src/index.ts
 create mode 100644 packages/emerald/src/plugin.ts
 create mode 100644 packages/emerald/src/theme.ts
 create mode 100644 packages/emerald/src/vite-env.d.ts
 create mode 100644 packages/emerald/tsconfig.json
 create mode 100644 packages/emerald/tsdown.config.mts

diff --git a/.claude/rules/paper-components.md b/.claude/rules/paper-components.md
new file mode 100644
index 000000000..d916312d0
--- /dev/null
+++ b/.claude/rules/paper-components.md
@@ -0,0 +1,280 @@
+---
+paths: packages/emerald/**
+---
+
+# Paper Design System Components
+
+Rules for building components in Paper design systems (Emerald, Onyx, etc.).
+
+## Architecture
+
+```
+Emerald / Onyx / etc. (styled design system — scoped to its own spec)
+    ↓
+Paper (styling primitives — V0Paper, composables output utility classes)
+    ↓
+v0 (headless logic & accessibility — zero styling)
+```
+
+Each design system is a **complete framework for a single design language**, not a theme. It only ships styles and functionality defined in its own spec. No universal framework sprawl.
+
+## Contract
+
+### Must
+
+- **Root components use `V0Paper`** as their base element — unless the component doesn't need Paper's styling surface (e.g., layout primitives like EmDivider), in which case `Atom` directly is fine. Exception: renderless v0 roots (like DialogRoot) don't get V0Paper — it goes on the first visible element instead (e.g., EmDialogContent).
+- **Sub-components use `V0Paper` selectively** — only when the design spec requires independent styling control (own color, spacing, elevation). Otherwise, use raw v0 primitives or plain elements styled via parent's CSS scope.
+- **Only wrap v0 sub-components the DS customizes.** Unwrapped v0 sub-components are imported directly by the consumer. Adding a wrapper later is additive, not breaking.
+- **Props → utility classes → CSS.** Props are the developer-facing API; Paper's composables resolve them to utility classes. V0Paper applies these via `:class`.
+- **Don't mix prop and class for the same concern.** `border="md"` and `class="rounded-md"` is fine (different concerns). `border="md"` and `class="border-lg"` is not.
+- **Data attribute classes for state-driven styling.** Use `data-[disabled]:`, `data-[state=x]:` etc. as the primary approach for styling component states. Scoped slot variables remain available for logic, not styling.
+- **Each component ships its own prop defaults.** No global token layer at the DS level. Variations are supported on a design-by-design basis.
+- **Named slots become components.** Only the default slot exists. If something would be a named slot, it becomes a sub-component.
+- **Explicitly re-expose v-model and events.** DS components declare their own `defineModel` / `defineEmits` and wire them to the underlying v0 primitive. No transparent `$attrs` forwarding — the DS controls its API surface.
+- **Forward v0 slot props via default slot.** When wrapping a v0 compound component, pass slot props through: `<template #default="slotProps"><slot v-bind="slotProps" /></template>`.
+
+### May
+
+- Create DS-specific sub-components not in v0 (e.g., `EmButtonLoader`, `EmButtonPrepend`) when the design spec calls for it
+- Add wrapper sub-components for v0 primitives later — this is additive and non-breaking
+- Paper may grow shared composed components (e.g., a preconfigured Popover-based menu) when a pattern proves universal across DSes — rare and organic, not planned upfront
+
+### Must Not
+
+- **Add logic that v0 doesn't provide.** If the DS needs new behavior, that belongs in v0.
+- **Require a plugin install to function.** DS components work standalone.
+- **Cover design patterns outside the DS's own spec.** Emerald ships what Emerald's spec defines. Nothing more.
+
+## Component Patterns
+
+### Pattern 1: Root with V0Paper (EmButton)
+
+For components that render a visible root element. V0Paper provides the styling surface, DS-specific props are destructured out, rest spread to V0Paper.
+
+```vue
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmButtonProps extends V0PaperProps {
+    disabled?: boolean
+    loading?: boolean
+    type?: 'button' | 'submit' | 'reset'
+    href?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButton' })
+
+  const {
+    disabled = false,
+    loading = false,
+    type = 'button',
+    href,
+    ...paperProps
+  } = defineProps<EmButtonProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled || loading) return
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    :as="href ? 'a' : 'button'"
+    :href
+    :type="href ? undefined : type"
+    :disabled="(disabled || loading) || undefined"
+    :data-disabled="(disabled || loading) || undefined"
+    :data-loading="loading || undefined"
+    class="emerald-button"
+    @click="onClick"
+  >
+    <slot />
+  </V0Paper>
+</template>
+```
+
+### Pattern 2: Wrapping v0 compound component (EmTextField)
+
+For components that wrap a v0 compound component. V0Paper wraps the v0 root, DS component re-exposes v-model and key props.
+
+```vue
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+  import { InputRoot } from '@vuetify/v0'
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmTextFieldProps extends V0PaperProps {
+    disabled?: boolean
+    // ... other v0 InputRoot props to re-expose
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextField' })
+  const { disabled = false, ...paperProps } = defineProps<EmTextFieldProps>()
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <V0Paper v-bind="paperProps" as="div" class="emerald-text-field">
+    <InputRoot v-model="model" :disabled>
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </InputRoot>
+  </V0Paper>
+</template>
+```
+
+### Pattern 3: Renderless v0 root (EmDialog)
+
+For v0 components whose root is renderless (renders no element). No V0Paper on the root — it goes on the first visible sub-component (EmDialogContent).
+
+```vue
+<!-- EmDialog.vue — no V0Paper, wraps renderless DialogRoot -->
+<script lang="ts">
+  import { DialogRoot } from '@vuetify/v0'
+  export interface EmDialogProps { id?: string }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialog' })
+  const { id } = defineProps<EmDialogProps>()
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <DialogRoot v-model="model" :id>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </DialogRoot>
+</template>
+```
+
+```vue
+<!-- EmDialogContent.vue — V0Paper here for panel styling -->
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+  import { DialogContent } from '@vuetify/v0'
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmDialogContentProps extends V0PaperProps {
+    closeOnClickOutside?: boolean
+    blocking?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogContent' })
+  const { closeOnClickOutside = true, blocking = false, ...paperProps } = defineProps<EmDialogContentProps>()
+</script>
+
+<template>
+  <DialogContent :blocking :close-on-click-outside>
+    <V0Paper v-bind="paperProps" as="div" class="emerald-dialog__content">
+      <slot />
+    </V0Paper>
+  </DialogContent>
+</template>
+```
+
+### Pattern 4: Simple sub-components
+
+DS-specific sub-components that are purely layout. No V0Paper, no props, just a styled element.
+
+```vue
+<script lang="ts">
+  export interface EmButtonPrependProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonPrepend' })
+</script>
+
+<template>
+  <span class="emerald-button__prepend">
+    <slot />
+  </span>
+</template>
+```
+
+### Pattern 5: Sub-component wrapping v0 primitive
+
+Thin wrapper that adds an Emerald class to a v0 sub-component. Re-exposes slot props.
+
+```vue
+<script lang="ts">
+  import { InputError } from '@vuetify/v0'
+  export interface EmTextFieldErrorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldError' })
+</script>
+
+<template>
+  <InputError class="emerald-text-field__error">
+    <template #default="{ errors }">
+      <slot :errors />
+    </template>
+  </InputError>
+</template>
+```
+
+## Styling
+
+- Paper composables output utility class arrays (not inline CSS variables)
+- V0Paper collects classes from all composables and applies via `:class`
+- Scoped `<style>` is only for structural CSS (layout, positioning, cursor)
+- State styling uses data attributes: `data-[disabled]:`, `data-[loading]:`, `data-[state=x]:`
+- Class prefix: `emerald-` for all Emerald components
+
+## Naming
+
+- Root: `Em{ComponentName}` (e.g., `EmButton`, `EmDialog`)
+- Sub-components: `Em{ComponentName}{SubName}` (e.g., `EmButtonPrepend`, `EmDialogContent`)
+- CSS classes: `emerald-{component}` for root, `emerald-{component}__{sub}` for sub-components (BEM-like)
+
+## Barrel Export Pattern
+
+Same as v0 — never use `export *` for Vue components:
+
+```ts
+export type { EmButtonProps } from './EmButton.vue'
+export { default as EmButton } from './EmButton.vue'
+```
+
+## Build Pipeline
+
+### Phase 1: Spec Generation
+
+1. Receive design input (Figma screenshots, color palette, component list — flexible)
+2. Agent drafts component spec:
+   - Sub-components: which exist, which are DS-specific, which are raw v0 pass-throughs
+   - Props per sub-component with defaults
+   - Data attributes and state-driven styling
+   - Which sub-components use `V0Paper` vs raw elements
+   - Visual reference notes mapped to utility classes
+3. Human reviews and approves the spec
+
+### Phase 2: Implementation
+
+1. Agent implements with high autonomy using: approved spec, reference components as examples, this contract as guardrails
+2. Identify which pattern (1-5 above) applies to each component/sub-component
+3. Scoped `<style>` only for structural CSS
+4. Exports only sub-components the DS customizes
+
+### Phase 3: Review
+
+1. Human reviews implementation against spec and design input
+2. Deviations are either fixed or fed back into the spec
diff --git a/dev/src/EmeraldKitchenSink.vue b/dev/src/EmeraldKitchenSink.vue
new file mode 100644
index 000000000..6922c7ab6
--- /dev/null
+++ b/dev/src/EmeraldKitchenSink.vue
@@ -0,0 +1,1504 @@
+<script setup lang="ts">
+  import { EmeraldStyleSheetAdapter, EmListItemAction, EmListItemBody, EmListSeparator, EmListSubheader, emeraldColors } from '@paper/emerald'
+  import { PhAirplaneTilt, PhArchive, PhBookOpen, PhCalendarBlank, PhCalendarDots, PhCaretCircleDown, PhCaretCircleUp, PhCaretDown, PhCaretLeft, PhCaretRight, PhCaretUp, PhCaretUpDown, PhChalkboardTeacher, PhChartPieSlice, PhChatsCircle, PhChatText, PhCheck, PhCheckCircle, PhCheckSquare, PhCube, PhDotsThree, PhDotsThreeCircle, PhFileArrowUp, PhFunnel, PhHouse, PhHouseLine, PhInfo, PhMapPin, PhNotePencil, PhPlusCircle, PhShareNetwork, PhUser, PhWarning, PhX, PhXCircle } from '@phosphor-icons/vue'
+
+  const adapter = new EmeraldStyleSheetAdapter()
+  adapter.upsert(adapter.generate({ emerald: emeraldColors }, false))
+
+  // Stateful demos
+  const dialogOpen = ref(false)
+  const menuOpen = ref(true)
+
+  const accordionModel = ref<string[]>(['overview'])
+  const tabsModel = ref('overview')
+  const stepperModel = ref('house')
+  const paginationPage = ref(2)
+  const carouselModel = ref('slide-1')
+
+  const sliderSingle = ref(40)
+  const sliderRange = ref([20, 70])
+
+  const selectSingle = ref<string | undefined>()
+  const autoCompleteSingle = ref<string | undefined>('vuetify')
+  const datePickerValue = ref<Date | null>(new Date())
+
+  const textFieldValue = ref('Emerald')
+  const textareaValue = ref('Write about something nice…')
+
+  const uploadFiles = ref<File[]>([])
+  const formValid = ref<boolean | null>(null)
+</script>
+
+<template>
+  <div class="emerald-sink" data-theme="emerald">
+    <header class="sink-header">
+      <h1>Emerald Kitchen Sink</h1>
+      <p>Every component rendered at least once for visual verification.</p>
+    </header>
+
+    <section>
+      <h2>Button</h2>
+      <div class="row">
+        <EmButton size="sm">Small</EmButton>
+        <EmButton size="md">Medium</EmButton>
+        <EmButton size="lg">Large</EmButton>
+      </div>
+      <div class="row">
+        <EmButton disabled>Disabled</EmButton>
+        <EmButton loading>Loading</EmButton>
+        <EmButton href="#">Anchor</EmButton>
+      </div>
+    </section>
+
+    <section>
+      <h2>Container</h2>
+      <EmContainer class="sink-demo-surface" size="md">
+        <p>Container size=md (max-width 768px)</p>
+      </EmContainer>
+    </section>
+
+    <section>
+      <h2>Divider</h2>
+
+      <div class="stack">
+        <EmDivider>
+          <EmDividerLine />
+        </EmDivider>
+
+        <EmDivider variant="dashed">
+          <EmDividerLine />
+        </EmDivider>
+
+        <EmDivider>
+          <EmDividerLine />
+          <EmDividerLabel>Or</EmDividerLabel>
+          <EmDividerLine />
+        </EmDivider>
+      </div>
+
+      <div class="row vertical-dividers">
+        <span>Left</span>
+        <EmDivider orientation="vertical">
+          <EmDividerLine />
+        </EmDivider>
+        <span>Middle</span>
+        <EmDivider orientation="vertical">
+          <EmDividerLine />
+          <EmDividerLabel>Or</EmDividerLabel>
+          <EmDividerLine />
+        </EmDivider>
+        <span>Right</span>
+      </div>
+    </section>
+
+    <section>
+      <h2>Card</h2>
+      <div class="row">
+        <EmCard style="width: 520px;">
+          <EmCardHeader>
+            <EmCardTitle>Preferences</EmCardTitle>
+            <EmCardSubtitle>Customize your Emerald experience</EmCardSubtitle>
+          </EmCardHeader>
+          <EmCardBody>
+            Emerald introduces a token system structured in three levels: primitive, semantic, and component.
+          </EmCardBody>
+          <EmCardFooter>
+            <EmButton>Save changes</EmButton>
+          </EmCardFooter>
+        </EmCard>
+
+        <EmCard hoverable style="width: 520px;">
+          <EmCardHeader>
+            <EmCardTitle>Hoverable card</EmCardTitle>
+            <EmCardSubtitle>Hover to see the primary-tinted border and shadow.</EmCardSubtitle>
+          </EmCardHeader>
+          <EmCardBody>
+            When `hoverable` is set, the card lifts on mouseover with a neutral drop shadow and primary-500 border.
+          </EmCardBody>
+        </EmCard>
+      </div>
+    </section>
+
+    <!-- ================= Layout ================= -->
+
+    <h1 class="sink-group">Layout</h1>
+
+    <section>
+      <h2>Flex</h2>
+      <EmFlex class="sink-demo-surface" :gap="12">
+        <div class="sink-box">A</div>
+        <div class="sink-box">B</div>
+        <div class="sink-box">C</div>
+      </EmFlex>
+      <EmFlex class="sink-demo-surface" direction="column" :gap="8" style="margin-top: 0.75rem;">
+        <div class="sink-box">Column 1</div>
+        <div class="sink-box">Column 2</div>
+      </EmFlex>
+    </section>
+
+    <section>
+      <h2>Grid</h2>
+      <EmGrid class="sink-demo-surface" :columns="4" :gap="8">
+        <EmGridItem v-for="n in 4" :key="n" class="sink-box">
+          Cell {{ n }}
+        </EmGridItem>
+        <EmGridItem class="sink-box" :span="2">
+          Span 2
+        </EmGridItem>
+        <EmGridItem class="sink-box" :span="2">
+          Span 2
+        </EmGridItem>
+      </EmGrid>
+    </section>
+
+    <!-- ================= Content ================= -->
+
+    <h1 class="sink-group">Content</h1>
+
+    <section>
+      <h2>Avatar</h2>
+
+      <p class="muted">Image</p>
+      <div class="row">
+        <EmAvatar size="sm">
+          <EmAvatarImage alt="Small avatar" src="https://i.pravatar.cc/80?img=32" />
+          <EmAvatarFallback>SM</EmAvatarFallback>
+        </EmAvatar>
+        <EmAvatar size="md">
+          <EmAvatarImage alt="Medium avatar" src="https://i.pravatar.cc/80?img=12" />
+          <EmAvatarFallback>JD</EmAvatarFallback>
+        </EmAvatar>
+        <EmAvatar size="lg">
+          <EmAvatarImage alt="Large avatar" src="https://i.pravatar.cc/96?img=47" />
+          <EmAvatarFallback>LG</EmAvatarFallback>
+        </EmAvatar>
+      </div>
+
+      <p class="muted">Text (initials)</p>
+      <div class="row">
+        <EmAvatar size="sm">
+          <EmAvatarFallback>AB</EmAvatarFallback>
+        </EmAvatar>
+        <EmAvatar size="md">
+          <EmAvatarFallback>CD</EmAvatarFallback>
+        </EmAvatar>
+        <EmAvatar size="lg">
+          <EmAvatarFallback>EF</EmAvatarFallback>
+        </EmAvatar>
+      </div>
+
+      <p class="muted">Icon</p>
+      <div class="row">
+        <EmAvatar size="sm">
+          <EmAvatarFallback>
+            <PhUser :size="16" weight="regular" />
+          </EmAvatarFallback>
+        </EmAvatar>
+        <EmAvatar size="md">
+          <EmAvatarFallback>
+            <PhUser :size="20" weight="regular" />
+          </EmAvatarFallback>
+        </EmAvatar>
+        <EmAvatar size="lg">
+          <EmAvatarFallback>
+            <PhUser :size="24" weight="regular" />
+          </EmAvatarFallback>
+        </EmAvatar>
+      </div>
+
+      <p class="muted">Group</p>
+      <div class="row">
+        <div class="emerald-avatar-group">
+          <EmAvatar size="md">
+            <EmAvatarImage alt="Member 1" src="https://i.pravatar.cc/80?img=12" />
+            <EmAvatarFallback>JD</EmAvatarFallback>
+          </EmAvatar>
+          <EmAvatar size="md">
+            <EmAvatarImage alt="Member 2" src="https://i.pravatar.cc/80?img=32" />
+            <EmAvatarFallback>SM</EmAvatarFallback>
+          </EmAvatar>
+          <EmAvatar size="md">
+            <EmAvatarImage alt="Member 3" src="https://i.pravatar.cc/80?img=47" />
+            <EmAvatarFallback>LG</EmAvatarFallback>
+          </EmAvatar>
+          <EmAvatar size="md">
+            <EmAvatarFallback>+3</EmAvatarFallback>
+          </EmAvatar>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>Badge</h2>
+      <div class="row">
+        <EmBadge>Primary</EmBadge>
+        <EmBadge variant="success">Success</EmBadge>
+        <EmBadge variant="warning">Warning</EmBadge>
+        <EmBadge variant="error">Error</EmBadge>
+        <EmBadge variant="info">Info</EmBadge>
+        <EmBadge variant="neutral">Neutral</EmBadge>
+      </div>
+      <div class="row">
+        <EmBadge size="sm">Small</EmBadge>
+        <EmBadge size="md">Medium</EmBadge>
+        <EmBadge size="lg">Large</EmBadge>
+      </div>
+      <div class="row">
+        <EmBadge shape="dot" variant="success" />
+        <EmBadge shape="indicator" variant="success" />
+        <EmBadge shape="count" variant="success">1</EmBadge>
+        <EmBadge shape="count" variant="success">9</EmBadge>
+        <EmBadge shape="count" variant="error">99+</EmBadge>
+        <EmBadge shape="dot" variant="error" />
+        <EmBadge shape="indicator" variant="warning" />
+        <EmBadge shape="count" variant="info">3</EmBadge>
+      </div>
+    </section>
+
+    <section>
+      <h2>Tag</h2>
+      <p class="muted">Tinted — filled surface, semantic luminosity/50 background</p>
+      <div class="row">
+        <EmTag tone="tinted" variant="neutral">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag tone="tinted" variant="primary">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag tone="tinted" variant="success">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag tone="tinted" variant="error">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag tone="tinted" variant="warning">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag tone="tinted" variant="info">
+          <PhPlusCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Outlined elevated (lg) — white surface, colored shadow</p>
+      <div class="row">
+        <EmTag elevation="lg" variant="neutral">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="lg" variant="primary">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="lg" variant="success">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="lg" variant="error">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="lg" variant="warning">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="lg" variant="info">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Outlined elevated (sm) — subtle drop shadow</p>
+      <div class="row">
+        <EmTag elevation="sm" variant="neutral">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="sm" variant="primary">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="sm" variant="success">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="sm" variant="error">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="sm" variant="warning">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag elevation="sm" variant="info">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Outlined flat — bordered, no shadow</p>
+      <div class="row">
+        <EmTag variant="neutral">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag variant="primary">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag variant="success">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag variant="error">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag variant="warning">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+        <EmTag variant="info">
+          <PhCheckCircle :size="16" weight="fill" />
+          chip text
+        </EmTag>
+      </div>
+
+      <p class="muted">Text only — no icon</p>
+      <div class="row">
+        <EmTag variant="neutral">vue</EmTag>
+        <EmTag variant="primary">typescript</EmTag>
+        <EmTag variant="success">emerald</EmTag>
+      </div>
+    </section>
+
+    <section>
+      <h2>List</h2>
+      <div class="row" style="align-items: flex-start; gap: 24px;">
+        <EmList style="width: 281px;">
+          <EmListItem header>
+            <EmListItemBody>
+              <EmListItemTitle>Inbox</EmListItemTitle>
+              <EmListItemSubtitle>hello@vuetifyjs.com</EmListItemSubtitle>
+            </EmListItemBody>
+            <EmListItemAction>
+              <PhDotsThreeCircle :size="16" weight="duotone" />
+            </EmListItemAction>
+          </EmListItem>
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhChatsCircle :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>My Inbox</EmListItemTitle>
+          </EmListItem>
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhCalendarDots :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>Scheduled</EmListItemTitle>
+          </EmListItem>
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhChatText :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>Chats</EmListItemTitle>
+          </EmListItem>
+          <EmListItem active interactive>
+            <EmListItemIcon>
+              <PhArchive :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>Archived</EmListItemTitle>
+          </EmListItem>
+          <EmListItem interactive>
+            <EmListItemIcon>
+              <PhCheckSquare :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>Closed</EmListItemTitle>
+          </EmListItem>
+          <EmListSeparator />
+          <EmListSubheader>Account</EmListSubheader>
+          <EmListItem interactive>
+            <EmListItemTitle>View Profile</EmListItemTitle>
+          </EmListItem>
+          <EmListItem disabled interactive>
+            <EmListItemTitle>Sign Out</EmListItemTitle>
+          </EmListItem>
+        </EmList>
+
+        <EmList style="width: 224px;">
+          <EmListSubheader>Configurations</EmListSubheader>
+          <EmListItem indent interactive>
+            <EmListItemIcon>
+              <PhNotePencil :size="14" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>To-do</EmListItemTitle>
+          </EmListItem>
+          <EmListItem active interactive>
+            <EmListItemIcon>
+              <PhShareNetwork :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>Share</EmListItemTitle>
+          </EmListItem>
+          <EmListItem indent interactive>
+            <EmListItemIcon>
+              <PhChalkboardTeacher :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>Leaderboard</EmListItemTitle>
+          </EmListItem>
+          <EmListItem indent interactive>
+            <EmListItemIcon>
+              <PhChartPieSlice :size="16" weight="duotone" />
+            </EmListItemIcon>
+            <EmListItemTitle>Analytics</EmListItemTitle>
+          </EmListItem>
+        </EmList>
+      </div>
+    </section>
+
+    <section>
+      <h2>Accordion</h2>
+      <EmAccordion v-model="accordionModel" multiple style="width: 425px;">
+        <EmAccordionItem value="overview">
+          <EmAccordionHeader>
+            <EmAccordionTrigger v-slot="{ isSelected }">
+              Accordion Title
+              <EmAccordionCue>
+                <component
+                  :is="isSelected ? PhCaretCircleUp : PhCaretCircleDown"
+                  :size="20"
+                  weight="duotone"
+                />
+              </EmAccordionCue>
+            </EmAccordionTrigger>
+          </EmAccordionHeader>
+          <EmAccordionContent>
+            This is the body of the accordion you can insert your accordion text or content in this section.
+          </EmAccordionContent>
+        </EmAccordionItem>
+        <EmAccordionItem value="tokens">
+          <EmAccordionHeader>
+            <EmAccordionTrigger v-slot="{ isSelected }">
+              Accordion Title
+              <EmAccordionCue>
+                <component
+                  :is="isSelected ? PhCaretCircleUp : PhCaretCircleDown"
+                  :size="20"
+                  weight="duotone"
+                />
+              </EmAccordionCue>
+            </EmAccordionTrigger>
+          </EmAccordionHeader>
+          <EmAccordionContent>
+            This is the body of the accordion you can insert your accordion text or content in this section.
+          </EmAccordionContent>
+        </EmAccordionItem>
+        <EmAccordionItem value="more">
+          <EmAccordionHeader>
+            <EmAccordionTrigger v-slot="{ isSelected }">
+              Accordion Title
+              <EmAccordionCue>
+                <component
+                  :is="isSelected ? PhCaretCircleUp : PhCaretCircleDown"
+                  :size="20"
+                  weight="duotone"
+                />
+              </EmAccordionCue>
+            </EmAccordionTrigger>
+          </EmAccordionHeader>
+          <EmAccordionContent>
+            This is the body of the accordion you can insert your accordion text or content in this section.
+          </EmAccordionContent>
+        </EmAccordionItem>
+      </EmAccordion>
+    </section>
+
+    <!-- ================= Navigation ================= -->
+
+    <h1 class="sink-group">Navigation</h1>
+
+    <section>
+      <h2>Breadcrumb</h2>
+      <EmBreadcrumb>
+        <EmBreadcrumbList>
+          <EmBreadcrumbItem id="1" value="home">
+            <EmBreadcrumbLink aria-label="Home" href="#">
+              <PhHouseLine weight="duotone" />
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+          <EmBreadcrumbItem id="2" value="docs">
+            <EmBreadcrumbLink href="#">
+              <PhBookOpen weight="duotone" />
+              Docs
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+          <EmBreadcrumbItem id="3" value="components">
+            <EmBreadcrumbLink href="#">
+              <PhCube weight="duotone" />
+              Components
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+          <EmBreadcrumbItem id="4" value="more">
+            <EmBreadcrumbLink aria-label="More" href="#">
+              <PhDotsThree weight="duotone" />
+            </EmBreadcrumbLink>
+          </EmBreadcrumbItem>
+          <EmBreadcrumbDivider>
+            <PhCaretRight weight="light" />
+          </EmBreadcrumbDivider>
+          <EmBreadcrumbItem id="5" value="breadcrumbs">
+            <EmBreadcrumbPage>Breadcrumbs</EmBreadcrumbPage>
+          </EmBreadcrumbItem>
+        </EmBreadcrumbList>
+      </EmBreadcrumb>
+    </section>
+
+    <section>
+      <h2>Tabs</h2>
+      <EmTabs v-model="tabsModel">
+        <EmTabsList label="Account settings">
+          <EmTabsItem value="overview">Profile</EmTabsItem>
+          <EmTabsItem value="tokens">Password</EmTabsItem>
+          <EmTabsItem value="components">Billing</EmTabsItem>
+        </EmTabsList>
+        <EmTabsPanel value="overview">Profile settings content.</EmTabsPanel>
+        <EmTabsPanel value="tokens">Password settings content.</EmTabsPanel>
+        <EmTabsPanel value="components">Billing settings content.</EmTabsPanel>
+      </EmTabs>
+    </section>
+
+    <section>
+      <h2>Stepper</h2>
+      <EmStepper v-model="stepperModel">
+        <EmStepperItem value="date">
+          <PhCalendarBlank weight="duotone" />
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+          <template #label>
+            <EmStepperLabel>Choose Date<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+        <EmStepperSeparator />
+        <EmStepperItem value="house">
+          <PhHouse weight="duotone" />
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+          <template #label>
+            <EmStepperLabel>Choose House<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+        <EmStepperSeparator />
+        <EmStepperItem value="flight">
+          <PhAirplaneTilt weight="duotone" />
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+          <template #label>
+            <EmStepperLabel>Choose Flight<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+        <EmStepperSeparator />
+        <EmStepperItem value="destination">
+          <PhMapPin weight="duotone" />
+          <template #completed>
+            <PhCheck weight="duotone" />
+          </template>
+          <template #label>
+            <EmStepperLabel>Destination<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
+          </template>
+        </EmStepperItem>
+      </EmStepper>
+    </section>
+
+    <section>
+      <h2>Pagination</h2>
+      <EmPagination v-model="paginationPage" :size="20" :total-visible="5">
+        <EmPaginationPrev>
+          <PhCaretLeft weight="duotone" />
+        </EmPaginationPrev>
+        <template v-for="page in 5" :key="page">
+          <EmPaginationItem :value="page">{{ page }}</EmPaginationItem>
+        </template>
+        <EmPaginationEllipsis>
+          <PhDotsThree weight="duotone" />
+        </EmPaginationEllipsis>
+        <EmPaginationItem :value="20">20</EmPaginationItem>
+        <EmPaginationNext>
+          <PhCaretRight weight="duotone" />
+        </EmPaginationNext>
+      </EmPagination>
+    </section>
+
+    <section>
+      <h2>Menu</h2>
+      <EmMenu v-model="menuOpen">
+        <EmMenuActivator>
+          <EmButton>Open Menu</EmButton>
+        </EmMenuActivator>
+        <EmMenuContent>
+          <EmMenuLabel>Frameworks</EmMenuLabel>
+          <EmMenuItem>Shadcn</EmMenuItem>
+          <EmMenuItem active>Vuetify</EmMenuItem>
+          <EmMenuItem>Base UI</EmMenuItem>
+          <EmMenuItem>Reka UI</EmMenuItem>
+          <EmMenuSeparator />
+          <EmMenuLabel>More Options</EmMenuLabel>
+          <EmMenuItem>Vuetify Zero</EmMenuItem>
+          <EmMenuItem disabled>Radix UI</EmMenuItem>
+        </EmMenuContent>
+      </EmMenu>
+    </section>
+
+    <!-- ================= Forms ================= -->
+
+    <h1 class="sink-group">Forms</h1>
+
+    <section>
+      <h2>TextField</h2>
+      <div class="row" style="align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;">
+        <EmTextField v-model="textFieldValue" label="Name" style="width: 217px;">
+          <EmTextFieldLabel>Name</EmTextFieldLabel>
+          <EmTextFieldControl placeholder="Enter your email" />
+          <EmTextFieldDescription>Your display name across the app.</EmTextFieldDescription>
+        </EmTextField>
+        <EmTextField label="Empty" style="width: 217px;">
+          <EmTextFieldControl placeholder="Enter your email" />
+        </EmTextField>
+        <EmTextField :disabled="true" label="Disabled" style="width: 217px;">
+          <EmTextFieldControl placeholder="Enter your email" />
+        </EmTextField>
+        <EmTextField
+          error
+          :error-messages="['Email is required']"
+          label="Invalid"
+          style="width: 217px;"
+          validate-on="eager"
+        >
+          <EmTextFieldLabel>Email</EmTextFieldLabel>
+          <EmTextFieldControl placeholder="Enter your email" />
+          <EmTextFieldError v-slot="{ errors }">
+            {{ errors[0] }}
+          </EmTextFieldError>
+        </EmTextField>
+      </div>
+    </section>
+
+    <section>
+      <h2>Textarea</h2>
+      <div class="row" style="align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;">
+        <EmTextarea v-model="textareaValue" label="Bio" style="width: 217px;">
+          <EmTextareaLabel>Bio</EmTextareaLabel>
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+          <EmTextareaDescription>Markdown is supported.</EmTextareaDescription>
+        </EmTextarea>
+        <EmTextarea label="Empty" style="width: 217px;">
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+        </EmTextarea>
+        <EmTextarea disabled label="Disabled" style="width: 217px;">
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+        </EmTextarea>
+        <EmTextarea
+          error
+          :error-messages="['Bio is required']"
+          label="Invalid"
+          style="width: 217px;"
+          validate-on="eager"
+        >
+          <EmTextareaLabel>Bio</EmTextareaLabel>
+          <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+          <EmTextareaError v-slot="{ errors }">
+            {{ errors[0] }}
+          </EmTextareaError>
+        </EmTextarea>
+      </div>
+    </section>
+
+    <section>
+      <h2>Checkbox</h2>
+      <p class="muted">Unchecked</p>
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmCheckbox :model-value="false" size="sm">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+        <EmCheckbox :model-value="false" size="md">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+        <EmCheckbox :model-value="false" size="lg">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+      </div>
+      <p class="muted">Checked</p>
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmCheckbox :model-value="true" size="sm">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+        <EmCheckbox :model-value="true" size="md">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+        <EmCheckbox :model-value="true" size="lg">
+          <EmCheckboxIndicator />
+        </EmCheckbox>
+      </div>
+    </section>
+
+    <section>
+      <h2>Radio</h2>
+      <p class="muted">Unchecked</p>
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmRadioGroup>
+          <EmRadio size="sm" :value="'a'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+        <EmRadioGroup>
+          <EmRadio size="md" :value="'b'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+        <EmRadioGroup>
+          <EmRadio size="lg" :value="'c'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+      </div>
+      <p class="muted">Checked</p>
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmRadioGroup :model-value="'a'">
+          <EmRadio size="sm" :value="'a'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+        <EmRadioGroup :model-value="'b'">
+          <EmRadio size="md" :value="'b'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+        <EmRadioGroup :model-value="'c'">
+          <EmRadio size="lg" :value="'c'">
+            <EmRadioIndicator />
+          </EmRadio>
+        </EmRadioGroup>
+      </div>
+    </section>
+
+    <section>
+      <h2>Switch</h2>
+      <p class="muted">Off</p>
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmSwitch :model-value="false" size="sm">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+        <EmSwitch :model-value="false" size="md">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+        <EmSwitch :model-value="false" size="lg">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+      </div>
+      <p class="muted">On</p>
+      <div class="row" style="align-items: center; gap: 16px;">
+        <EmSwitch :model-value="true" size="sm">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+        <EmSwitch :model-value="true" size="md">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+        <EmSwitch :model-value="true" size="lg">
+          <EmSwitchTrack>
+            <EmSwitchThumb />
+          </EmSwitchTrack>
+        </EmSwitch>
+      </div>
+    </section>
+
+    <section>
+      <h2>Slider</h2>
+      <div class="stack">
+        <div class="em-slider-row">
+          <span class="em-slider-label">Default</span>
+          <EmSlider v-model="sliderSingle">
+            <EmSliderTrack />
+            <EmSliderThumb aria-label="Value" />
+          </EmSlider>
+          <span class="em-slider-value">{{ sliderSingle }}</span>
+        </div>
+
+        <div class="em-slider-row">
+          <span class="em-slider-label">Fill</span>
+          <EmSlider v-model="sliderSingle">
+            <EmSliderTrack>
+              <EmSliderRange />
+            </EmSliderTrack>
+            <EmSliderThumb aria-label="Value" />
+          </EmSlider>
+          <span class="em-slider-value">{{ sliderSingle }}</span>
+        </div>
+
+        <div class="em-slider-row">
+          <span class="em-slider-label">Range</span>
+          <EmSlider v-model="sliderRange">
+            <EmSliderTrack>
+              <EmSliderRange />
+            </EmSliderTrack>
+            <EmSliderThumb aria-label="Min" />
+            <EmSliderThumb aria-label="Max" />
+          </EmSlider>
+          <span class="em-slider-value">{{ sliderRange.join(' – ') }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>Select</h2>
+      <EmSelect v-model="selectSingle" style="width: 217px;">
+        <EmSelectActivator>
+          <EmSelectValue />
+          <EmSelectPlaceholder>Select your framework</EmSelectPlaceholder>
+          <PhCaretDown :size="14" weight="duotone" />
+        </EmSelectActivator>
+        <EmSelectContent>
+          <EmSelectItem :value="'vuetify'">Vuetify</EmSelectItem>
+          <EmSelectItem :value="'shadcn'">Shadcn</EmSelectItem>
+          <EmSelectItem :value="'baseui'">Base UI</EmSelectItem>
+          <EmSelectItem :value="'rekaui'">Reka UI</EmSelectItem>
+        </EmSelectContent>
+      </EmSelect>
+    </section>
+
+    <section>
+      <h2>AutoComplete</h2>
+      <EmAutoComplete v-model="autoCompleteSingle" style="width: 240px;">
+        <EmAutoCompleteControl>
+          <EmAutoCompleteInput placeholder="Search your framework" />
+          <PhCaretDown :size="14" weight="duotone" />
+        </EmAutoCompleteControl>
+        <EmAutoCompleteContent eager>
+          <EmAutoCompleteItem :value="'vuetify'">Vuetify</EmAutoCompleteItem>
+          <EmAutoCompleteItem :value="'vue'">Vue</EmAutoCompleteItem>
+          <EmAutoCompleteItem :value="'primevue'">Prime Vue</EmAutoCompleteItem>
+          <EmAutoCompleteEmpty>No matches</EmAutoCompleteEmpty>
+        </EmAutoCompleteContent>
+      </EmAutoComplete>
+    </section>
+
+    <section>
+      <h2>DatePicker</h2>
+      <p class="muted">Visual scaffold only — replaces with the new DatePicker once v0 ships a calendar primitive (createCalendar / useDate-backed root).</p>
+      <EmDatePicker v-model="datePickerValue">
+        <EmDatePickerCalendar>
+          <EmDatePickerHeader>
+            <button aria-label="Previous month" type="button">
+              <PhCaretLeft :size="12" weight="duotone" />
+            </button>
+            <span>July 2026</span>
+            <button aria-label="Next month" type="button">
+              <PhCaretRight :size="12" weight="duotone" />
+            </button>
+          </EmDatePickerHeader>
+          <EmDatePickerGrid>
+            <EmDatePickerCell v-for="weekday in ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']" :key="weekday" weekday>
+              {{ weekday }}
+            </EmDatePickerCell>
+            <EmDatePickerCell v-for="day in 31" :key="`jul-${day}`" :selected="day === 22" :today="day === 22">
+              {{ day }}
+            </EmDatePickerCell>
+            <EmDatePickerCell v-for="day in 4" :key="`aug-${day}`" outside>
+              {{ day }}
+            </EmDatePickerCell>
+          </EmDatePickerGrid>
+        </EmDatePickerCalendar>
+      </EmDatePicker>
+    </section>
+
+    <section>
+      <h2>Upload</h2>
+      <EmUpload v-model="uploadFiles" multiple style="width: 420px;">
+        <EmUploadDropzone>
+          <PhFileArrowUp :size="28" weight="regular" />
+          <strong>Drag and drop your files</strong>
+          <span class="muted" style="margin: 0;">or click to browse</span>
+        </EmUploadDropzone>
+      </EmUpload>
+    </section>
+
+    <section>
+      <h2>Form</h2>
+      <EmForm v-model="formValid" style="width: 217px;">
+        <div class="emerald-form-field">
+          <label class="emerald-form-field__label" for="em-form-default">Email</label>
+          <div class="emerald-form-field__control">
+            <input id="em-form-default" placeholder="Enter your email" type="email">
+          </div>
+          <span class="emerald-form-field__helper">Write your email in lowercase</span>
+        </div>
+
+        <div class="emerald-form-field" data-invalid>
+          <label class="emerald-form-field__label" for="em-form-error">Email</label>
+          <div class="emerald-form-field__control">
+            <input id="em-form-error" placeholder="Enter your email" type="email">
+          </div>
+          <span class="emerald-form-field__error">Email is required</span>
+        </div>
+
+        <div class="emerald-form-field">
+          <label class="emerald-form-field__label" for="em-form-active">Email</label>
+          <div class="emerald-form-field__control">
+            <input id="em-form-active" type="email" value="juanjcardona13@gmail.com">
+          </div>
+          <span class="emerald-form-field__helper">Write your email in lowercase</span>
+        </div>
+
+        <EmButton type="submit">Submit</EmButton>
+      </EmForm>
+    </section>
+
+    <!-- ================= Feedback ================= -->
+
+    <h1 class="sink-group">Feedback</h1>
+
+    <section>
+      <h2>Alert</h2>
+      <div class="stack" style="max-width: 520px;">
+        <EmAlert>
+          <EmAlertIcon>
+            <PhInfo :size="24" weight="regular" />
+          </EmAlertIcon>
+          <EmAlertBody>
+            <EmAlertTitle>Alert Title</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+        <EmAlert variant="error">
+          <EmAlertIcon>
+            <PhXCircle :size="24" weight="regular" />
+          </EmAlertIcon>
+          <EmAlertBody>
+            <EmAlertTitle>Error Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+        <EmAlert variant="success">
+          <EmAlertIcon>
+            <PhCheckCircle :size="24" weight="regular" />
+          </EmAlertIcon>
+          <EmAlertBody>
+            <EmAlertTitle>Success Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+        <EmAlert variant="info">
+          <EmAlertIcon>
+            <PhInfo :size="24" weight="regular" />
+          </EmAlertIcon>
+          <EmAlertBody>
+            <EmAlertTitle>Info Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+        <EmAlert variant="warning">
+          <EmAlertIcon>
+            <PhWarning :size="24" weight="regular" />
+          </EmAlertIcon>
+          <EmAlertBody>
+            <EmAlertTitle>Warning Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+        <EmAlert variant="neutral">
+          <EmAlertIcon>
+            <PhAirplaneTilt :size="24" weight="regular" />
+          </EmAlertIcon>
+          <EmAlertBody>
+            <EmAlertTitle>Alert</EmAlertTitle>
+            <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
+          </EmAlertBody>
+        </EmAlert>
+      </div>
+    </section>
+
+    <section>
+      <h2>Loading</h2>
+      <EmLoading>Loading…</EmLoading>
+    </section>
+
+    <section>
+      <h2>Progress</h2>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <EmProgress size="sm" :value="30">
+          <EmProgressTrack>
+            <EmProgressFill />
+          </EmProgressTrack>
+        </EmProgress>
+
+        <EmProgress v-slot="{ value }" size="md" :value="30">
+          <EmProgressTrack>
+            <EmProgressFill>
+              <EmProgressValue inside>{{ value }}</EmProgressValue>
+            </EmProgressFill>
+          </EmProgressTrack>
+        </EmProgress>
+
+        <EmProgress v-slot="{ value }" :max="100" size="md" :value="30">
+          <EmProgressTrack>
+            <EmProgressFill>
+              <EmProgressValue inside>{{ value }}</EmProgressValue>
+            </EmProgressFill>
+          </EmProgressTrack>
+          <EmProgressValue>100</EmProgressValue>
+        </EmProgress>
+      </div>
+    </section>
+
+    <section>
+      <h2>Toast</h2>
+      <div class="stack" style="max-width: 360px;">
+        <EmToast>
+          <EmToastIcon>
+            <PhInfo :size="16" weight="duotone" />
+          </EmToastIcon>
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a violet notification state</EmToastDescription>
+          </EmToastBody>
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+        <EmToast variant="error">
+          <EmToastIcon>
+            <PhXCircle :size="16" weight="duotone" />
+          </EmToastIcon>
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a red notification state</EmToastDescription>
+          </EmToastBody>
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+        <EmToast variant="success">
+          <EmToastIcon>
+            <PhCheckCircle :size="16" weight="duotone" />
+          </EmToastIcon>
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a green notification state</EmToastDescription>
+          </EmToastBody>
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+        <EmToast variant="info">
+          <EmToastIcon>
+            <PhInfo :size="16" weight="duotone" />
+          </EmToastIcon>
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a blue notification state</EmToastDescription>
+          </EmToastBody>
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+        <EmToast variant="warning">
+          <EmToastIcon>
+            <PhWarning :size="16" weight="duotone" />
+          </EmToastIcon>
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's an amber notification state</EmToastDescription>
+          </EmToastBody>
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+        <EmToast variant="neutral">
+          <EmToastIcon>
+            <PhCheckCircle :size="16" weight="duotone" />
+          </EmToastIcon>
+          <EmToastBody>
+            <EmToastTitle>Successful toast</EmToastTitle>
+            <EmToastDescription>It's a neutral notification state</EmToastDescription>
+          </EmToastBody>
+          <EmToastClose>
+            <PhX :size="12" weight="bold" />
+          </EmToastClose>
+        </EmToast>
+      </div>
+    </section>
+
+    <section>
+      <h2>Tooltip</h2>
+      <EmTooltip>
+        <EmTooltipContent position-area="top">
+          Hello, I'm Tooltip
+        </EmTooltipContent>
+        <EmTooltipActivator>
+          <EmButton>Hover for tooltip</EmButton>
+        </EmTooltipActivator>
+      </EmTooltip>
+    </section>
+
+    <!-- ================= Overlay ================= -->
+
+    <h1 class="sink-group">Overlay</h1>
+
+    <section>
+      <h2>Dialog</h2>
+      <EmButton @click="dialogOpen = true">Open dialog</EmButton>
+      <EmDialog v-model="dialogOpen">
+        <EmDialogContent>
+          <EmDialogHeader>
+            <EmDialogTitle>Delete design system?</EmDialogTitle>
+          </EmDialogHeader>
+          <EmDialogBody>
+            <EmDialogDescription>
+              This will permanently remove Emerald and all its tokens. Cannot be undone.
+            </EmDialogDescription>
+          </EmDialogBody>
+          <EmDialogFooter>
+            <EmDialogClose renderless>
+              <EmButton variant="secondary">Cancel</EmButton>
+            </EmDialogClose>
+            <EmDialogClose renderless>
+              <EmButton>Confirm</EmButton>
+            </EmDialogClose>
+          </EmDialogFooter>
+        </EmDialogContent>
+      </EmDialog>
+    </section>
+
+    <!-- ================= Data ================= -->
+
+    <h1 class="sink-group">Data</h1>
+
+    <section>
+      <h2>Table</h2>
+      <p class="muted">Default — sortable headers, selected row, status cells</p>
+      <EmTable>
+        <EmTableHead>
+          <EmTableRow>
+            <EmTableHeader sort="none" sortable>
+              User
+              <template #sort-icon>
+                <PhCaretUpDown :size="12" weight="duotone" />
+              </template>
+            </EmTableHeader>
+            <EmTableHeader sort="ascending" sortable>
+              Status
+              <template #sort-icon>
+                <PhCaretUp :size="12" weight="duotone" />
+              </template>
+            </EmTableHeader>
+            <EmTableHeader filterable sort="descending" sortable>
+              Role
+              <template #sort-icon>
+                <PhCaretDown :size="12" weight="duotone" />
+              </template>
+              <template #filter-icon>
+                <PhFunnel :size="14" weight="duotone" />
+              </template>
+            </EmTableHeader>
+            <EmTableHeader>Email</EmTableHeader>
+            <EmTableHeader align="end">Phone</EmTableHeader>
+          </EmTableRow>
+        </EmTableHead>
+        <EmTableBody>
+          <EmTableRow>
+            <EmTableCell>John Doe</EmTableCell>
+            <EmTableCell>Active</EmTableCell>
+            <EmTableCell>CEO</EmTableCell>
+            <EmTableCell>john.doe@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-123-4567</EmTableCell>
+          </EmTableRow>
+          <EmTableRow>
+            <EmTableCell>Laura Kroft</EmTableCell>
+            <EmTableCell>Inactive</EmTableCell>
+            <EmTableCell>Editor</EmTableCell>
+            <EmTableCell>laurak@email.com</EmTableCell>
+            <EmTableCell align="end">555-098-7654</EmTableCell>
+          </EmTableRow>
+          <EmTableRow selected>
+            <EmTableCell>Ahmed Khan</EmTableCell>
+            <EmTableCell>Active</EmTableCell>
+            <EmTableCell>Manager</EmTableCell>
+            <EmTableCell>ahmed.k@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-234-5678</EmTableCell>
+          </EmTableRow>
+          <EmTableRow>
+            <EmTableCell>Jane Smith</EmTableCell>
+            <EmTableCell>Inactive</EmTableCell>
+            <EmTableCell>CFO</EmTableCell>
+            <EmTableCell>jane.s@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-078-7654</EmTableCell>
+          </EmTableRow>
+          <EmTableRow>
+            <EmTableCell>David Wilson</EmTableCell>
+            <EmTableCell>Active</EmTableCell>
+            <EmTableCell>COO</EmTableCell>
+            <EmTableCell>coo10@gmail.com</EmTableCell>
+            <EmTableCell align="end">555-098-7654</EmTableCell>
+          </EmTableRow>
+        </EmTableBody>
+      </EmTable>
+
+      <p class="muted" style="margin-top: 1.5rem;">Compact — fewer columns, no border</p>
+      <EmTable :bordered="false">
+        <EmTableHead>
+          <EmTableRow>
+            <EmTableHeader>Plan</EmTableHeader>
+            <EmTableHeader>Status</EmTableHeader>
+            <EmTableHeader align="end">Seats</EmTableHeader>
+            <EmTableHeader align="end">MRR</EmTableHeader>
+          </EmTableRow>
+        </EmTableHead>
+        <EmTableBody>
+          <EmTableRow>
+            <EmTableCell>Starter</EmTableCell>
+            <EmTableCell>
+              <EmTag tone="tinted" variant="success">
+                <PhCheckCircle :size="14" weight="fill" />
+                active
+              </EmTag>
+            </EmTableCell>
+            <EmTableCell align="end">12</EmTableCell>
+            <EmTableCell align="end">$120</EmTableCell>
+          </EmTableRow>
+          <EmTableRow>
+            <EmTableCell>Pro</EmTableCell>
+            <EmTableCell>
+              <EmTag tone="tinted" variant="warning">
+                <PhWarning :size="14" weight="fill" />
+                trial
+              </EmTag>
+            </EmTableCell>
+            <EmTableCell align="end">48</EmTableCell>
+            <EmTableCell align="end">$960</EmTableCell>
+          </EmTableRow>
+          <EmTableRow>
+            <EmTableCell>Enterprise</EmTableCell>
+            <EmTableCell>
+              <EmTag tone="tinted" variant="error">
+                <PhXCircle :size="14" weight="fill" />
+                churned
+              </EmTag>
+            </EmTableCell>
+            <EmTableCell align="end">120</EmTableCell>
+            <EmTableCell align="end">—</EmTableCell>
+          </EmTableRow>
+        </EmTableBody>
+      </EmTable>
+    </section>
+
+    <section>
+      <h2>Carousel</h2>
+      <EmCarousel v-model="carouselModel" circular label="Demo carousel" style="width: 557px;">
+        <EmCarouselPrevious>
+          <PhCaretLeft :size="16" weight="duotone" />
+        </EmCarouselPrevious>
+        <EmCarouselViewport>
+          <EmCarouselItem value="slide-1">
+            <div class="sink-carousel-slide">1</div>
+          </EmCarouselItem>
+          <EmCarouselItem value="slide-2">
+            <div class="sink-carousel-slide">2</div>
+          </EmCarouselItem>
+          <EmCarouselItem value="slide-3">
+            <div class="sink-carousel-slide">3</div>
+          </EmCarouselItem>
+        </EmCarouselViewport>
+        <EmCarouselNext>
+          <PhCaretRight :size="16" weight="duotone" />
+        </EmCarouselNext>
+        <EmCarouselIndicator label="Slides">
+          <template #default="{ items }">
+            <button
+              v-for="item in items"
+              :key="item.index"
+              v-bind="item.attrs"
+              class="emerald-carousel__indicator"
+              type="button"
+            />
+          </template>
+        </EmCarouselIndicator>
+      </EmCarousel>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+  .emerald-sink {
+    min-height: 100vh;
+    padding: 2rem;
+    background: var(--emerald-background);
+    color: var(--emerald-on-background);
+    font-family: Manrope, system-ui, -apple-system, sans-serif;
+  }
+
+  .sink-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--emerald-divider);
+  }
+
+  .sink-header h1 {
+    margin: 0 0 0.25rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  .sink-header p {
+    margin: 0;
+    color: var(--emerald-neutral-500);
+    font-size: 0.875rem;
+  }
+
+  .em-slider-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .em-slider-label {
+    width: 60px;
+    font-size: 0.75rem;
+    color: var(--emerald-neutral-500);
+  }
+
+  .em-slider-value {
+    font-size: 0.75rem;
+    color: var(--emerald-neutral-700);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sink-group {
+    margin: 2.5rem 0 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--emerald-primary-500);
+    font-size: 1.25rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  section {
+    margin-bottom: 2rem;
+  }
+
+  section h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+    align-items: center;
+  }
+
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 480px;
+    margin-bottom: 1rem;
+  }
+
+  .vertical-dividers {
+    height: 80px;
+    align-items: stretch;
+  }
+
+  .sink-demo-surface {
+    padding: 12px 16px;
+    border: 1px dashed rgb(var(--emerald-neutral-channels, 26 28 30) / 0.2);
+    border-radius: 6px;
+  }
+
+  :deep(.sink-box) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    padding: 8px 12px;
+    background: rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.12);
+    border: 1px solid rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.3);
+    border-radius: 6px;
+    font-size: 0.875rem;
+  }
+
+  :deep(.sink-slide) {
+    width: 100%;
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+
+  .emerald-avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .emerald-avatar-group > :deep(.emerald-avatar) {
+    border: none;
+    box-shadow:
+      0 0 0 2px var(--emerald-background, #faf9ff),
+      0 1px 2px 0 rgba(5, 0, 18, 0.1);
+  }
+
+  .emerald-avatar-group > :deep(.emerald-avatar) + :deep(.emerald-avatar) {
+    margin-left: -16px;
+  }
+
+  .muted {
+    margin: 0.5rem 0 0.25rem;
+    font-size: 0.75rem;
+    color: var(--emerald-neutral-500);
+  }
+
+  :deep(.sink-carousel-slide) {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 8px;
+    color: #000;
+    font-weight: 600;
+    font-size: 24px;
+    letter-spacing: 0.48px;
+    font-family: Manrope, system-ui, -apple-system, sans-serif;
+  }
+</style>
diff --git a/knip.json b/knip.json
index 12991419f..42249c3c1 100644
--- a/knip.json
+++ b/knip.json
@@ -83,6 +83,13 @@
         "sass"
       ]
     },
+    "packages/emerald": {
+      "project": [
+        "src/**/*.{ts,vue}",
+        "!src/**/*.test.ts",
+        "!src/**/*.spec.ts"
+      ]
+    },
     "apps/playground": {
       "entry": [
         "src/App.vue",
diff --git a/packages/emerald/package.json b/packages/emerald/package.json
new file mode 100644
index 000000000..957dc6766
--- /dev/null
+++ b/packages/emerald/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@paper/emerald",
+  "version": "0.1.0",
+  "description": "Emerald Design System",
+  "license": "MIT",
+  "types": "./dist/index.d.mts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "vue-tsc --noEmit --incremental"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.mjs",
+      "./package.json": "./package.json",
+      "./style.css": "./dist/style.css"
+    }
+  },
+  "dependencies": {
+    "@vuetify/paper": "workspace:*",
+    "@vuetify/v0": "workspace:*"
+  },
+  "devDependencies": {
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "unplugin-vue": "catalog:"
+  }
+}
diff --git a/packages/emerald/src/adapter.ts b/packages/emerald/src/adapter.ts
new file mode 100644
index 000000000..6badbf3ef
--- /dev/null
+++ b/packages/emerald/src/adapter.ts
@@ -0,0 +1,56 @@
+// Framework
+import { V0StyleSheetThemeAdapter } from '@vuetify/v0'
+import { hexToRgb } from '@vuetify/v0/utilities'
+
+// Types
+import type { Colors } from '@vuetify/v0'
+
+export interface EmeraldAdapterOptions {
+  cspNonce?: string
+  stylesheetId?: string
+  prefix?: string
+}
+
+const SAFE_IDENT = /^[a-zA-Z0-9_-]+$/
+const UNSAFE_CSS = /url\s*\(|@import|expression\s*\(|[{}]/i
+
+export class EmeraldStyleSheetAdapter extends V0StyleSheetThemeAdapter {
+  constructor (options: EmeraldAdapterOptions = {}) {
+    super({ prefix: 'emerald', stylesheetId: 'emerald-theme-stylesheet', ...options })
+  }
+
+  override generate (colors: Record<string, Colors>, isDark?: boolean): string {
+    let css = ''
+
+    for (const theme in colors) {
+      if (!SAFE_IDENT.test(theme)) continue
+      const themeColors = colors[theme]
+      if (!themeColors) continue
+
+      const lines: string[] = []
+
+      for (const [key, val] of Object.entries(themeColors)) {
+        if (!SAFE_IDENT.test(key) || UNSAFE_CSS.test(val)) continue
+
+        lines.push(`  --${this.prefix}-${key}: ${val};`)
+
+        const channels = toChannels(val)
+        if (channels) lines.push(`  --${this.prefix}-${key}-channels: ${channels};`)
+      }
+
+      css += `[data-theme="${theme}"] {\n${lines.join('\n')}\n  color: var(--${this.prefix}-on-background);\n}\n`
+    }
+
+    if (isDark !== undefined) {
+      css += `:root {\n  color-scheme: ${isDark ? 'dark' : 'light'};\n}\n`
+    }
+
+    return css
+  }
+}
+
+function toChannels (hex: string): string | null {
+  if (!/^#[0-9a-f]{3,8}$/i.test(hex)) return null
+  const { r, g, b } = hexToRgb(hex)
+  return `${r} ${g} ${b}`
+}
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordion.vue b/packages/emerald/src/components/EmAccordion/EmAccordion.vue
new file mode 100644
index 000000000..90373a110
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordion.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { ExpansionPanelGroup } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmAccordionProps extends V0PaperProps {
+    disabled?: boolean
+    multiple?: boolean
+    mandatory?: boolean | 'force'
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmAccordion' })
+
+  const {
+    disabled = false,
+    multiple = false,
+    mandatory = false,
+    ...paperProps
+  } = defineProps<EmAccordionProps>()
+
+  const model = defineModel<T | T[]>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-accordion"
+    :data-disabled="disabled || undefined"
+  >
+    <ExpansionPanelGroup
+      v-model="model"
+      :disabled
+      :mandatory
+      :multiple
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </ExpansionPanelGroup>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #000000;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionContent.vue b/packages/emerald/src/components/EmAccordion/EmAccordionContent.vue
new file mode 100644
index 000000000..2548a1ecc
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionContent.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelContent } from '@vuetify/v0'
+
+  export interface EmAccordionContentProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionContent' })
+</script>
+
+<template>
+  <ExpansionPanelContent class="emerald-accordion__content">
+    <template #default="slotProps">
+      <div class="emerald-accordion__content-inner">
+        <slot v-bind="slotProps" />
+      </div>
+    </template>
+  </ExpansionPanelContent>
+</template>
+
+<style>
+.emerald-accordion__content {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  color: #000000;
+}
+
+.emerald-accordion__content[hidden] {
+  display: grid;
+  grid-template-rows: 0fr;
+}
+
+.emerald-accordion__content-inner {
+  min-height: 0;
+  overflow: hidden;
+  padding: 12px;
+  transition: visibility 0s linear 280ms;
+}
+
+.emerald-accordion__content[data-selected] .emerald-accordion__content-inner {
+  visibility: visible;
+  transition-delay: 0s;
+}
+
+.emerald-accordion__content[hidden] .emerald-accordion__content-inner {
+  visibility: hidden;
+}
+
+.emerald-accordion__content[data-selected] .emerald-accordion__content-inner {
+  border-top: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionCue.vue b/packages/emerald/src/components/EmAccordion/EmAccordionCue.vue
new file mode 100644
index 000000000..ebc3099b6
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionCue.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelCue } from '@vuetify/v0'
+
+  export interface EmAccordionCueProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionCue' })
+</script>
+
+<template>
+  <ExpansionPanelCue class="emerald-accordion__cue">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ExpansionPanelCue>
+</template>
+
+<style>
+.emerald-accordion__cue {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: currentColor;
+  flex-shrink: 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue b/packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue
new file mode 100644
index 000000000..76736b95a
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelHeader } from '@vuetify/v0'
+
+  export interface EmAccordionHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionHeader' })
+</script>
+
+<template>
+  <ExpansionPanelHeader class="emerald-accordion__header">
+    <slot />
+  </ExpansionPanelHeader>
+</template>
+
+<style>
+.emerald-accordion__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionItem.vue b/packages/emerald/src/components/EmAccordion/EmAccordionItem.vue
new file mode 100644
index 000000000..638c966c2
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionItem.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelRoot } from '@vuetify/v0'
+
+  export interface EmAccordionItemProps {
+    id?: string
+    value?: unknown
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionItem' })
+
+  const { id, value, disabled = false } = defineProps<EmAccordionItemProps>()
+</script>
+
+<template>
+  <ExpansionPanelRoot
+    :id
+    as="div"
+    class="emerald-accordion__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ExpansionPanelRoot>
+</template>
+
+<style>
+.emerald-accordion__item {
+  display: flex;
+  flex-direction: column;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 6px;
+  overflow: clip;
+  background: var(--emerald-secondary-50);
+  transition: background-color 120ms ease;
+}
+
+.emerald-accordion__item[data-selected] {
+  background: var(--emerald-secondary-100);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue b/packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue
new file mode 100644
index 000000000..22fb2dabc
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+  // Framework
+  import { ExpansionPanelActivator } from '@vuetify/v0'
+
+  export interface EmAccordionTriggerProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAccordionTrigger' })
+</script>
+
+<template>
+  <ExpansionPanelActivator class="emerald-accordion__trigger">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ExpansionPanelActivator>
+</template>
+
+<style>
+.emerald-accordion__trigger {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 16px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: normal;
+  color: #000000;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.emerald-accordion__trigger[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAccordion/index.ts b/packages/emerald/src/components/EmAccordion/index.ts
new file mode 100644
index 000000000..3f507b491
--- /dev/null
+++ b/packages/emerald/src/components/EmAccordion/index.ts
@@ -0,0 +1,17 @@
+export type { EmAccordionProps } from './EmAccordion.vue'
+export { default as EmAccordion } from './EmAccordion.vue'
+
+export type { EmAccordionContentProps } from './EmAccordionContent.vue'
+export { default as EmAccordionContent } from './EmAccordionContent.vue'
+
+export type { EmAccordionCueProps } from './EmAccordionCue.vue'
+export { default as EmAccordionCue } from './EmAccordionCue.vue'
+
+export type { EmAccordionHeaderProps } from './EmAccordionHeader.vue'
+export { default as EmAccordionHeader } from './EmAccordionHeader.vue'
+
+export type { EmAccordionItemProps } from './EmAccordionItem.vue'
+export { default as EmAccordionItem } from './EmAccordionItem.vue'
+
+export type { EmAccordionTriggerProps } from './EmAccordionTrigger.vue'
+export { default as EmAccordionTrigger } from './EmAccordionTrigger.vue'
diff --git a/packages/emerald/src/components/EmAlert/EmAlert.vue b/packages/emerald/src/components/EmAlert/EmAlert.vue
new file mode 100644
index 000000000..613e54da3
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlert.vue
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmAlertVariant = 'primary' | 'success' | 'error' | 'info' | 'warning' | 'neutral'
+
+  export interface EmAlertProps extends V0PaperProps {
+    variant?: EmAlertVariant
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlert' })
+
+  const { variant = 'primary', ...paperProps } = defineProps<EmAlertProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-alert"
+    :data-variant="variant"
+    role="alert"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: normal;
+  width: 100%;
+}
+
+.emerald-alert[data-variant="primary"] {
+  background: var(--emerald-primary-50);
+  border-color: var(--emerald-primary-200);
+  color: var(--emerald-primary-950);
+}
+
+.emerald-alert[data-variant="success"] {
+  background: var(--emerald-success-50);
+  border-color: var(--emerald-success-200);
+  color: var(--emerald-success-950);
+}
+
+.emerald-alert[data-variant="error"] {
+  background: var(--emerald-error-50);
+  border-color: var(--emerald-error-200);
+  color: var(--emerald-error-950);
+}
+
+.emerald-alert[data-variant="info"] {
+  background: var(--emerald-info-50);
+  border-color: var(--emerald-info-200);
+  color: #000000;
+}
+
+.emerald-alert[data-variant="warning"] {
+  background: var(--emerald-warning-50);
+  border-color: var(--emerald-warning-200);
+  color: var(--emerald-warning-950);
+}
+
+.emerald-alert[data-variant="neutral"] {
+  background: #fafafa;
+  border-color: #b8b8b8;
+  color: #000000;
+}
+
+.emerald-alert__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.emerald-alert__title {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+}
+
+.emerald-alert__description {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.28px;
+}
+
+.emerald-alert__body {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.emerald-alert__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  border-radius: 4px;
+}
+
+.emerald-alert__close:hover {
+  opacity: 1;
+  background: rgb(0 0 0 / 0.05);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertBody.vue b/packages/emerald/src/components/EmAlert/EmAlertBody.vue
new file mode 100644
index 000000000..57c82cdab
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertBody.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertBody' })
+</script>
+
+<template>
+  <div class="emerald-alert__body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertClose.vue b/packages/emerald/src/components/EmAlert/EmAlertClose.vue
new file mode 100644
index 000000000..8ab7745f5
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertClose.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmAlertCloseProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertClose' })
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <button
+    aria-label="Close alert"
+    class="emerald-alert__close"
+    type="button"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertDescription.vue b/packages/emerald/src/components/EmAlert/EmAlertDescription.vue
new file mode 100644
index 000000000..facee2301
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertDescription.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertDescription' })
+</script>
+
+<template>
+  <div class="emerald-alert__description">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertIcon.vue b/packages/emerald/src/components/EmAlert/EmAlertIcon.vue
new file mode 100644
index 000000000..d8a39a00e
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertIconProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertIcon' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-alert__icon">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/EmAlertTitle.vue b/packages/emerald/src/components/EmAlert/EmAlertTitle.vue
new file mode 100644
index 000000000..3b7221238
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/EmAlertTitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmAlertTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAlertTitle' })
+</script>
+
+<template>
+  <div class="emerald-alert__title">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmAlert/index.ts b/packages/emerald/src/components/EmAlert/index.ts
new file mode 100644
index 000000000..4cd318f9c
--- /dev/null
+++ b/packages/emerald/src/components/EmAlert/index.ts
@@ -0,0 +1,17 @@
+export type { EmAlertProps, EmAlertVariant } from './EmAlert.vue'
+export { default as EmAlert } from './EmAlert.vue'
+
+export type { EmAlertBodyProps } from './EmAlertBody.vue'
+export { default as EmAlertBody } from './EmAlertBody.vue'
+
+export type { EmAlertCloseProps } from './EmAlertClose.vue'
+export { default as EmAlertClose } from './EmAlertClose.vue'
+
+export type { EmAlertDescriptionProps } from './EmAlertDescription.vue'
+export { default as EmAlertDescription } from './EmAlertDescription.vue'
+
+export type { EmAlertIconProps } from './EmAlertIcon.vue'
+export { default as EmAlertIcon } from './EmAlertIcon.vue'
+
+export type { EmAlertTitleProps } from './EmAlertTitle.vue'
+export { default as EmAlertTitle } from './EmAlertTitle.vue'
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue
new file mode 100644
index 000000000..04c272319
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { ComboboxRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { ID } from '@vuetify/v0'
+
+  export interface EmAutoCompleteProps extends V0PaperProps {
+    disabled?: boolean
+    multiple?: boolean
+    mandatory?: boolean
+    strict?: boolean
+    error?: boolean
+    errorMessages?: string | string[]
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoComplete' })
+
+  const {
+    disabled = false,
+    multiple = false,
+    mandatory = false,
+    strict = false,
+    error = false,
+    errorMessages,
+    name,
+    ...paperProps
+  } = defineProps<EmAutoCompleteProps>()
+
+  const model = defineModel<ID | ID[]>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-auto-complete"
+    :data-disabled="disabled || undefined"
+    :data-error="error || undefined"
+  >
+    <ComboboxRoot
+      v-model="model"
+      :disabled
+      :error
+      :error-messages
+      :mandatory
+      :multiple
+      :name
+      :strict
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </ComboboxRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-auto-complete {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-auto-complete[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue
new file mode 100644
index 000000000..e7383b765
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxContent } from '@vuetify/v0'
+
+  export interface EmAutoCompleteContentProps {
+    eager?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteContent' })
+
+  const { eager = false } = defineProps<EmAutoCompleteContentProps>()
+</script>
+
+<template>
+  <ComboboxContent class="emerald-auto-complete__content" :eager>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxContent>
+</template>
+
+<style>
+.emerald-auto-complete__content {
+  flex-direction: column;
+  align-items: stretch;
+  width: anchor-size(width);
+  padding: 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow:
+    0 2px 4px rgba(5, 0, 18, 0.1),
+    0 3px 8px rgba(5, 0, 18, 0.13);
+  margin-top: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.emerald-auto-complete__content:popover-open {
+  display: flex;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue
new file mode 100644
index 000000000..b668936be
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxActivator } from '@vuetify/v0'
+
+  export interface EmAutoCompleteControlProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteControl' })
+</script>
+
+<template>
+  <ComboboxActivator class="emerald-auto-complete__control">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxActivator>
+</template>
+
+<style>
+.emerald-auto-complete__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+  cursor: text;
+}
+
+.emerald-auto-complete__control[data-state="open"],
+.emerald-auto-complete__control:focus-within {
+  border-color: var(--emerald-primary-500);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels) / 0.12);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue
new file mode 100644
index 000000000..73294be0c
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxEmpty } from '@vuetify/v0'
+
+  export interface EmAutoCompleteEmptyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteEmpty' })
+</script>
+
+<template>
+  <ComboboxEmpty class="emerald-auto-complete__empty">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxEmpty>
+</template>
+
+<style>
+.emerald-auto-complete__empty {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 8px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.5);
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue
new file mode 100644
index 000000000..ffffb2cc5
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxControl } from '@vuetify/v0'
+
+  export interface EmAutoCompleteInputProps {
+    placeholder?: string
+    openOn?: 'focus' | 'input'
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteInput' })
+
+  const { placeholder, openOn = 'input' } = defineProps<EmAutoCompleteInputProps>()
+</script>
+
+<template>
+  <ComboboxControl
+    class="emerald-auto-complete__input"
+    :open-on
+    :placeholder
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxControl>
+</template>
+
+<style>
+.emerald-auto-complete__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-auto-complete__input::placeholder {
+  color: #000000;
+  opacity: 0.3;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue
new file mode 100644
index 000000000..2920a568a
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue
@@ -0,0 +1,69 @@
+<script lang="ts">
+  // Framework
+  import { ComboboxItem } from '@vuetify/v0'
+
+  // Types
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmAutoCompleteItemProps {
+    value?: unknown
+    disabled?: MaybeRefOrGetter<boolean>
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAutoCompleteItem' })
+
+  const { value, disabled = false } = defineProps<EmAutoCompleteItemProps>()
+</script>
+
+<template>
+  <ComboboxItem
+    class="emerald-auto-complete__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </ComboboxItem>
+</template>
+
+<style>
+.emerald-auto-complete__item {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 8px 12px;
+  border-left: 1px solid transparent;
+  border-radius: 0 6px 6px 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.emerald-auto-complete__item[data-focused],
+.emerald-auto-complete__item:hover {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-auto-complete__item[data-selected] {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-auto-complete__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAutoComplete/index.ts b/packages/emerald/src/components/EmAutoComplete/index.ts
new file mode 100644
index 000000000..0053ffef4
--- /dev/null
+++ b/packages/emerald/src/components/EmAutoComplete/index.ts
@@ -0,0 +1,17 @@
+export type { EmAutoCompleteProps } from './EmAutoComplete.vue'
+export { default as EmAutoComplete } from './EmAutoComplete.vue'
+
+export type { EmAutoCompleteContentProps } from './EmAutoCompleteContent.vue'
+export { default as EmAutoCompleteContent } from './EmAutoCompleteContent.vue'
+
+export type { EmAutoCompleteControlProps } from './EmAutoCompleteControl.vue'
+export { default as EmAutoCompleteControl } from './EmAutoCompleteControl.vue'
+
+export type { EmAutoCompleteEmptyProps } from './EmAutoCompleteEmpty.vue'
+export { default as EmAutoCompleteEmpty } from './EmAutoCompleteEmpty.vue'
+
+export type { EmAutoCompleteInputProps } from './EmAutoCompleteInput.vue'
+export { default as EmAutoCompleteInput } from './EmAutoCompleteInput.vue'
+
+export type { EmAutoCompleteItemProps } from './EmAutoCompleteItem.vue'
+export { default as EmAutoCompleteItem } from './EmAutoCompleteItem.vue'
diff --git a/packages/emerald/src/components/EmAvatar/EmAvatar.vue b/packages/emerald/src/components/EmAvatar/EmAvatar.vue
new file mode 100644
index 000000000..74bc81f74
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/EmAvatar.vue
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { AvatarRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmAvatarSize = 'sm' | 'md' | 'lg'
+
+  export interface EmAvatarProps extends V0PaperProps {
+    size?: EmAvatarSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAvatar' })
+
+  const { size = 'md', ...paperProps } = defineProps<EmAvatarProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-avatar"
+    :data-size="size"
+  >
+    <AvatarRoot>
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </AvatarRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-neutral-100, #f3f3f4);
+  color: var(--emerald-neutral-700);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  user-select: none;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.emerald-avatar[data-size="sm"] {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.emerald-avatar[data-size="md"] {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.emerald-avatar[data-size="lg"] {
+  width: 48px;
+  height: 48px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.emerald-avatar__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  object-fit: cover;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.emerald-avatar__fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+}
+</style>
diff --git a/packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue b/packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue
new file mode 100644
index 000000000..0518756ca
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  // Framework
+  import { AvatarFallback } from '@vuetify/v0'
+
+  // Types
+  import type { AvatarFallbackProps } from '@vuetify/v0'
+
+  export interface EmAvatarFallbackProps extends AvatarFallbackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAvatarFallback' })
+
+  const { ...fallbackProps } = defineProps<EmAvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="fallbackProps" class="emerald-avatar__fallback">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </AvatarFallback>
+</template>
diff --git a/packages/emerald/src/components/EmAvatar/EmAvatarImage.vue b/packages/emerald/src/components/EmAvatar/EmAvatarImage.vue
new file mode 100644
index 000000000..75d6a8243
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/EmAvatarImage.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  // Framework
+  import { AvatarImage } from '@vuetify/v0'
+
+  // Types
+  import type { AvatarImageProps } from '@vuetify/v0'
+
+  export interface EmAvatarImageProps extends AvatarImageProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmAvatarImage' })
+
+  const { ...imageProps } = defineProps<EmAvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="imageProps" class="emerald-avatar__image">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </AvatarImage>
+</template>
diff --git a/packages/emerald/src/components/EmAvatar/index.ts b/packages/emerald/src/components/EmAvatar/index.ts
new file mode 100644
index 000000000..4ce5ebb1e
--- /dev/null
+++ b/packages/emerald/src/components/EmAvatar/index.ts
@@ -0,0 +1,8 @@
+export type { EmAvatarProps, EmAvatarSize } from './EmAvatar.vue'
+export { default as EmAvatar } from './EmAvatar.vue'
+
+export type { EmAvatarFallbackProps } from './EmAvatarFallback.vue'
+export { default as EmAvatarFallback } from './EmAvatarFallback.vue'
+
+export type { EmAvatarImageProps } from './EmAvatarImage.vue'
+export { default as EmAvatarImage } from './EmAvatarImage.vue'
diff --git a/packages/emerald/src/components/EmBadge/EmBadge.vue b/packages/emerald/src/components/EmBadge/EmBadge.vue
new file mode 100644
index 000000000..f097ec523
--- /dev/null
+++ b/packages/emerald/src/components/EmBadge/EmBadge.vue
@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmBadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'
+  export type EmBadgeSize = 'sm' | 'md' | 'lg'
+  export type EmBadgeShape = 'pill' | 'dot' | 'indicator' | 'count'
+
+  export interface EmBadgeProps extends V0PaperProps {
+    variant?: EmBadgeVariant
+    size?: EmBadgeSize
+    shape?: EmBadgeShape
+    /** @deprecated use `shape="dot"` */
+    dot?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBadge' })
+
+  const {
+    variant = 'primary',
+    size = 'md',
+    shape,
+    dot = false,
+    ...paperProps
+  } = defineProps<EmBadgeProps>()
+
+  const resolvedShape = shape ?? (dot ? 'dot' : 'pill')
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="span"
+    class="emerald-badge"
+    :data-shape="resolvedShape"
+    :data-size="size"
+    :data-variant="variant"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 700;
+  border-radius: 9999px;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* Pill (text label) — default */
+.emerald-badge[data-shape="pill"][data-size="sm"] {
+  padding: 2px 6px;
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.emerald-badge[data-shape="pill"][data-size="md"] {
+  padding: 3px 8px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.emerald-badge[data-shape="pill"][data-size="lg"] {
+  padding: 4px 10px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* Notification indicator variants — bordered + shadowed per Figma spec */
+.emerald-badge[data-shape="dot"],
+.emerald-badge[data-shape="indicator"],
+.emerald-badge[data-shape="count"] {
+  border: 2px solid var(--emerald-background, #faf9ff);
+  box-shadow:
+    0 3px 8px 0 rgb(5 0 18 / 0.13),
+    0 2px 4px 0 rgb(5 0 18 / 0.10);
+  padding: 0;
+  overflow: hidden;
+}
+
+/* Dot — 8px */
+.emerald-badge[data-shape="dot"] {
+  width: 8px;
+  height: 8px;
+}
+
+/* Indicator — 12px (Figma "Default") */
+.emerald-badge[data-shape="indicator"] {
+  width: 12px;
+  height: 12px;
+}
+
+/* Count — 20px with numeric content (Figma "Content") */
+.emerald-badge[data-shape="count"] {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+/* Variants — background color only; border/shadow handled above */
+.emerald-badge[data-variant="primary"] {
+  background: var(--emerald-primary-500);
+  color: var(--emerald-primary-100);
+}
+
+.emerald-badge[data-variant="success"] {
+  background: var(--emerald-success-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="warning"] {
+  background: var(--emerald-warning-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="error"] {
+  background: var(--emerald-error-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="info"] {
+  background: var(--emerald-info-500);
+  color: #fff;
+}
+
+.emerald-badge[data-variant="neutral"] {
+  background: var(--emerald-neutral-200);
+  color: var(--emerald-neutral-800);
+}
+
+/* Neutral count keeps darker text since the surface is light. */
+.emerald-badge[data-shape="count"][data-variant="neutral"] {
+  color: var(--emerald-neutral-800);
+}
+</style>
diff --git a/packages/emerald/src/components/EmBadge/index.ts b/packages/emerald/src/components/EmBadge/index.ts
new file mode 100644
index 000000000..10ee64019
--- /dev/null
+++ b/packages/emerald/src/components/EmBadge/index.ts
@@ -0,0 +1,2 @@
+export type { EmBadgeProps, EmBadgeSize, EmBadgeVariant } from './EmBadge.vue'
+export { default as EmBadge } from './EmBadge.vue'
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue
new file mode 100644
index 000000000..e8cc4f555
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { BreadcrumbsRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmBreadcrumbProps extends V0PaperProps {
+    divider?: string
+    ellipsis?: string
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumb' })
+
+  const {
+    divider = '/',
+    ellipsis = '…',
+    label = 'Breadcrumb',
+    ...paperProps
+  } = defineProps<EmBreadcrumbProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="nav"
+    class="emerald-breadcrumb"
+  >
+    <BreadcrumbsRoot
+      :divider
+      :ellipsis
+      :label
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </BreadcrumbsRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-breadcrumb {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: normal;
+  color: var(--emerald-on-background, #1a1230);
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue
new file mode 100644
index 000000000..1236059e9
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsDivider } from '@vuetify/v0'
+
+  export interface EmBreadcrumbDividerProps {
+    divider?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbDivider' })
+
+  const { divider } = defineProps<EmBreadcrumbDividerProps>()
+</script>
+
+<template>
+  <BreadcrumbsDivider
+    class="emerald-breadcrumb__divider"
+    :divider
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsDivider>
+</template>
+
+<style>
+.emerald-breadcrumb__divider {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: rgb(var(--emerald-on-background-channels, 26 18 48) / 0.5);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.emerald-breadcrumb__divider :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue
new file mode 100644
index 000000000..4a9f53c8e
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsEllipsis } from '@vuetify/v0'
+
+  export interface EmBreadcrumbEllipsisProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbEllipsis' })
+</script>
+
+<template>
+  <BreadcrumbsEllipsis class="emerald-breadcrumb__ellipsis">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsEllipsis>
+</template>
+
+<style>
+.emerald-breadcrumb__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 24px;
+  color: rgb(var(--emerald-on-background-channels, 26 18 48) / 0.6);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.emerald-breadcrumb__ellipsis :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue
new file mode 100644
index 000000000..aae7bf9f5
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsItem } from '@vuetify/v0'
+
+  export interface EmBreadcrumbItemProps {
+    id?: string | number
+    text?: string
+    value?: unknown
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbItem' })
+
+  const { id, text, value } = defineProps<EmBreadcrumbItemProps>()
+</script>
+
+<template>
+  <BreadcrumbsItem
+    :id
+    class="emerald-breadcrumb__item"
+    :text
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsItem>
+</template>
+
+<style>
+.emerald-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 2px 0;
+  color: inherit;
+  font-weight: 500;
+}
+
+.emerald-breadcrumb__item :deep(svg) {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue
new file mode 100644
index 000000000..a4142e0fd
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsLink } from '@vuetify/v0'
+
+  export interface EmBreadcrumbLinkProps {
+    href?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbLink' })
+
+  const { href } = defineProps<EmBreadcrumbLinkProps>()
+</script>
+
+<template>
+  <BreadcrumbsLink
+    class="emerald-breadcrumb__link"
+    :href
+  >
+    <slot />
+  </BreadcrumbsLink>
+</template>
+
+<style>
+.emerald-breadcrumb__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 500;
+  border-bottom: 1px solid transparent;
+  padding-bottom: 1px;
+  transition: border-color 120ms ease;
+}
+
+.emerald-breadcrumb__link:hover {
+  border-bottom-color: currentColor;
+}
+
+.emerald-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue
new file mode 100644
index 000000000..8bf6858c3
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsList } from '@vuetify/v0'
+
+  export interface EmBreadcrumbListProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbList' })
+</script>
+
+<template>
+  <BreadcrumbsList class="emerald-breadcrumb__list">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </BreadcrumbsList>
+</template>
+
+<style>
+.emerald-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue
new file mode 100644
index 000000000..45b165a8f
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  // Framework
+  import { BreadcrumbsPage } from '@vuetify/v0'
+
+  export interface EmBreadcrumbPageProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmBreadcrumbPage' })
+</script>
+
+<template>
+  <BreadcrumbsPage class="emerald-breadcrumb__page">
+    <slot />
+  </BreadcrumbsPage>
+</template>
+
+<style>
+.emerald-breadcrumb__page {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 400;
+  color: rgb(var(--emerald-on-background-channels, 26 18 48) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmBreadcrumb/index.ts b/packages/emerald/src/components/EmBreadcrumb/index.ts
new file mode 100644
index 000000000..bea9be1d0
--- /dev/null
+++ b/packages/emerald/src/components/EmBreadcrumb/index.ts
@@ -0,0 +1,20 @@
+export type { EmBreadcrumbProps } from './EmBreadcrumb.vue'
+export { default as EmBreadcrumb } from './EmBreadcrumb.vue'
+
+export type { EmBreadcrumbDividerProps } from './EmBreadcrumbDivider.vue'
+export { default as EmBreadcrumbDivider } from './EmBreadcrumbDivider.vue'
+
+export type { EmBreadcrumbEllipsisProps } from './EmBreadcrumbEllipsis.vue'
+export { default as EmBreadcrumbEllipsis } from './EmBreadcrumbEllipsis.vue'
+
+export type { EmBreadcrumbItemProps } from './EmBreadcrumbItem.vue'
+export { default as EmBreadcrumbItem } from './EmBreadcrumbItem.vue'
+
+export type { EmBreadcrumbLinkProps } from './EmBreadcrumbLink.vue'
+export { default as EmBreadcrumbLink } from './EmBreadcrumbLink.vue'
+
+export type { EmBreadcrumbListProps } from './EmBreadcrumbList.vue'
+export { default as EmBreadcrumbList } from './EmBreadcrumbList.vue'
+
+export type { EmBreadcrumbPageProps } from './EmBreadcrumbPage.vue'
+export { default as EmBreadcrumbPage } from './EmBreadcrumbPage.vue'
diff --git a/packages/emerald/src/components/EmButton/EmButton.vue b/packages/emerald/src/components/EmButton/EmButton.vue
new file mode 100644
index 000000000..da050f3f4
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButton.vue
@@ -0,0 +1,159 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Context
+  import EmButtonLoader from './EmButtonLoader.vue'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmButtonSize = 'sm' | 'md' | 'lg'
+
+  export interface EmButtonProps extends V0PaperProps {
+    disabled?: boolean
+    loading?: boolean
+    size?: EmButtonSize
+    type?: 'button' | 'submit' | 'reset'
+    href?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButton' })
+
+  const {
+    disabled = false,
+    loading = false,
+    size = 'md',
+    type = 'button',
+    href,
+    ...paperProps
+  } = defineProps<EmButtonProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled || loading) return
+
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    :aria-busy="loading || undefined"
+    :aria-disabled="(disabled || loading) || undefined"
+    :as="href ? 'a' : 'button'"
+    class="emerald-button"
+    :data-disabled="(disabled || loading) || undefined"
+    :data-loading="loading || undefined"
+    :data-size="size"
+    :disabled="(disabled || loading) || undefined"
+    :href
+    :type="href ? undefined : type"
+    @click="onClick"
+  >
+    <span v-if="loading" class="emerald-button__loading">
+      <EmButtonLoader />
+    </span>
+
+    <span :class="['emerald-button__content', loading && 'emerald-button__content--hidden']">
+      <slot />
+    </span>
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  background: var(--emerald-primary-500);
+  color: var(--emerald-primary-100);
+  box-shadow: none;
+  transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
+}
+
+.emerald-button[data-size="sm"] {
+  padding: 4.5px 9px;
+  border-radius: 3px;
+  font-size: 10.5px;
+  line-height: 15px;
+  gap: 6px;
+}
+
+.emerald-button[data-size="md"] {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  gap: 8px;
+}
+
+.emerald-button[data-size="lg"] {
+  padding: 7.5px 15px;
+  border-radius: 5px;
+  font-size: 17.5px;
+  line-height: 25px;
+  gap: 10px;
+}
+
+.emerald-button:hover:not([data-disabled]):not(:active) {
+  background: var(--emerald-primary-700);
+  color: var(--emerald-primary-200);
+  box-shadow:
+    0 2px 4px 0 rgb(var(--emerald-primary-700-channels) / 0.32),
+    0 3px 8px 0 rgb(var(--emerald-primary-700-channels) / 0.22);
+}
+
+.emerald-button:active:not([data-disabled]) {
+  background: var(--emerald-primary-900);
+  color: var(--emerald-primary-100);
+  transform: scale(0.95);
+  box-shadow: none;
+}
+
+.emerald-button:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-button[data-disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+.emerald-button[data-loading] {
+  position: relative;
+  cursor: progress;
+  box-shadow: none;
+}
+
+.emerald-button__content {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+}
+
+.emerald-button__content--hidden {
+  visibility: hidden;
+}
+
+.emerald-button__loading {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/packages/emerald/src/components/EmButton/EmButtonAppend.vue b/packages/emerald/src/components/EmButton/EmButtonAppend.vue
new file mode 100644
index 000000000..185d10205
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonAppend.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmButtonAppendProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonAppend' })
+</script>
+
+<template>
+  <span class="emerald-button__append">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmButton/EmButtonContent.vue b/packages/emerald/src/components/EmButton/EmButtonContent.vue
new file mode 100644
index 000000000..e3c35f92e
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonContent.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmButtonContentProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonContent' })
+</script>
+
+<template>
+  <span class="emerald-button__content">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmButton/EmButtonLoader.vue b/packages/emerald/src/components/EmButton/EmButtonLoader.vue
new file mode 100644
index 000000000..cca983ef1
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonLoader.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+  export interface EmButtonLoaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonLoader' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-button__loader">
+    <slot>
+      <span class="emerald-button__spinner" />
+    </slot>
+  </span>
+</template>
+
+<style>
+.emerald-button__loader {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.emerald-button__spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: emerald-button-spin 700ms linear infinite;
+}
+
+@keyframes emerald-button-spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/packages/emerald/src/components/EmButton/EmButtonPrepend.vue b/packages/emerald/src/components/EmButton/EmButtonPrepend.vue
new file mode 100644
index 000000000..be76e07d1
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/EmButtonPrepend.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmButtonPrependProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmButtonPrepend' })
+</script>
+
+<template>
+  <span class="emerald-button__prepend">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmButton/index.ts b/packages/emerald/src/components/EmButton/index.ts
new file mode 100644
index 000000000..8176c4a1a
--- /dev/null
+++ b/packages/emerald/src/components/EmButton/index.ts
@@ -0,0 +1,14 @@
+export type { EmButtonProps } from './EmButton.vue'
+export { default as EmButton } from './EmButton.vue'
+
+export type { EmButtonAppendProps } from './EmButtonAppend.vue'
+export { default as EmButtonAppend } from './EmButtonAppend.vue'
+
+export type { EmButtonContentProps } from './EmButtonContent.vue'
+export { default as EmButtonContent } from './EmButtonContent.vue'
+
+export type { EmButtonLoaderProps } from './EmButtonLoader.vue'
+export { default as EmButtonLoader } from './EmButtonLoader.vue'
+
+export type { EmButtonPrependProps } from './EmButtonPrepend.vue'
+export { default as EmButtonPrepend } from './EmButtonPrepend.vue'
diff --git a/packages/emerald/src/components/EmCard/EmCard.vue b/packages/emerald/src/components/EmCard/EmCard.vue
new file mode 100644
index 000000000..20a5ed31c
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCard.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmCardProps extends V0PaperProps {
+    hoverable?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCard' })
+
+  const { hoverable = false, ...paperProps } = defineProps<EmCardProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-card"
+    :data-hoverable="hoverable || undefined"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-card {
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(to bottom, #ffffff, var(--emerald-background));
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 12px;
+  overflow: clip;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-card[data-hoverable]:hover {
+  border: 0.5px solid var(--emerald-primary-500);
+  box-shadow:
+    0 3px 8px 0 rgba(5, 0, 18, 0.13),
+    0 2px 4px 0 rgba(5, 0, 18, 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardBody.vue b/packages/emerald/src/components/EmCard/EmCardBody.vue
new file mode 100644
index 000000000..24fbdb60a
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardBody.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmCardBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardBody' })
+</script>
+
+<template>
+  <div class="emerald-card__body">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardFooter.vue b/packages/emerald/src/components/EmCard/EmCardFooter.vue
new file mode 100644
index 000000000..e9dfd067f
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardFooter.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmCardFooterProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardFooter' })
+</script>
+
+<template>
+  <div class="emerald-card__footer">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardHeader.vue b/packages/emerald/src/components/EmCard/EmCardHeader.vue
new file mode 100644
index 000000000..906c5f70e
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardHeader.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+  export interface EmCardHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardHeader' })
+</script>
+
+<template>
+  <div class="emerald-card__header">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 24px 24px 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardSubtitle.vue b/packages/emerald/src/components/EmCard/EmCardSubtitle.vue
new file mode 100644
index 000000000..d0d4ce30f
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardSubtitle.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export interface EmCardSubtitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardSubtitle' })
+</script>
+
+<template>
+  <p class="emerald-card__subtitle">
+    <slot />
+  </p>
+</template>
+
+<style>
+.emerald-card__subtitle {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 21.7px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.5);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/EmCardTitle.vue b/packages/emerald/src/components/EmCard/EmCardTitle.vue
new file mode 100644
index 000000000..9746384a6
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/EmCardTitle.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+  export interface EmCardTitleProps {
+    as?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCardTitle' })
+
+  const { as = 'h3' } = defineProps<EmCardTitleProps>()
+</script>
+
+<template>
+  <component :is="as" class="emerald-card__title">
+    <slot />
+  </component>
+</template>
+
+<style>
+.emerald-card__title {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 26px;
+  letter-spacing: -0.2px;
+  color: var(--emerald-neutral-700);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCard/index.ts b/packages/emerald/src/components/EmCard/index.ts
new file mode 100644
index 000000000..c6b02f0fe
--- /dev/null
+++ b/packages/emerald/src/components/EmCard/index.ts
@@ -0,0 +1,17 @@
+export type { EmCardProps } from './EmCard.vue'
+export { default as EmCard } from './EmCard.vue'
+
+export type { EmCardBodyProps } from './EmCardBody.vue'
+export { default as EmCardBody } from './EmCardBody.vue'
+
+export type { EmCardFooterProps } from './EmCardFooter.vue'
+export { default as EmCardFooter } from './EmCardFooter.vue'
+
+export type { EmCardHeaderProps } from './EmCardHeader.vue'
+export { default as EmCardHeader } from './EmCardHeader.vue'
+
+export type { EmCardSubtitleProps } from './EmCardSubtitle.vue'
+export { default as EmCardSubtitle } from './EmCardSubtitle.vue'
+
+export type { EmCardTitleProps } from './EmCardTitle.vue'
+export { default as EmCardTitle } from './EmCardTitle.vue'
diff --git a/packages/emerald/src/components/EmCarousel/EmCarousel.vue b/packages/emerald/src/components/EmCarousel/EmCarousel.vue
new file mode 100644
index 000000000..4798b472a
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarousel.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { CarouselRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmCarouselOrientation = 'horizontal' | 'vertical'
+
+  export interface EmCarouselProps extends V0PaperProps {
+    label?: string
+    disabled?: boolean
+    circular?: boolean
+    orientation?: EmCarouselOrientation
+    perView?: number
+    autoplay?: number
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmCarousel' })
+
+  const {
+    label,
+    disabled = false,
+    circular = false,
+    orientation = 'horizontal',
+    perView = 1,
+    autoplay = 0,
+    ...paperProps
+  } = defineProps<EmCarouselProps>()
+
+  const model = defineModel<T>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-carousel"
+    :data-disabled="disabled || undefined"
+    :data-orientation="orientation"
+  >
+    <CarouselRoot
+      v-model="model"
+      :autoplay
+      :circular
+      :disabled
+      :label
+      :orientation
+      :per-view
+      renderless
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </CarouselRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-carousel {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: 1fr auto;
+  align-items: center;
+  gap: 14px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #000000;
+}
+
+.emerald-carousel[data-orientation="vertical"] {
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto auto;
+}
+
+.emerald-carousel[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue b/packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue
new file mode 100644
index 000000000..2851b717b
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+  // Framework
+  import { CarouselIndicator } from '@vuetify/v0'
+
+  export interface EmCarouselIndicatorProps {
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselIndicator' })
+
+  const { label } = defineProps<EmCarouselIndicatorProps>()
+</script>
+
+<template>
+  <CarouselIndicator
+    class="emerald-carousel__indicators"
+    :label
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselIndicator>
+</template>
+
+<style>
+.emerald-carousel__indicators {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  margin: 0 auto;
+}
+
+.emerald-carousel__indicator {
+  display: inline-block;
+  height: 7px;
+  width: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 60px;
+  background: var(--emerald-secondary-300, #c6d2db);
+  cursor: pointer;
+  transition: width 180ms ease, background 180ms ease;
+}
+
+.emerald-carousel__indicator[data-selected] {
+  width: 34px;
+  background: var(--emerald-secondary-500, #94a3b8);
+}
+
+.emerald-carousel__indicator:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-carousel__indicator[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselItem.vue b/packages/emerald/src/components/EmCarousel/EmCarouselItem.vue
new file mode 100644
index 000000000..daaf188fe
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselItem.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+  // Framework
+  import { CarouselItem } from '@vuetify/v0'
+
+  export interface EmCarouselItemProps {
+    id?: string
+    value?: unknown
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselItem' })
+
+  const { id, value, disabled = false } = defineProps<EmCarouselItemProps>()
+</script>
+
+<template>
+  <CarouselItem
+    :id
+    class="emerald-carousel__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselItem>
+</template>
+
+<style>
+.emerald-carousel__item {
+  flex: 0 0 60%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  min-width: 0;
+  scroll-snap-align: center;
+  background: #ffffff;
+  border: 1px solid rgb(var(--emerald-neutral-channels) / 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+  filter: blur(1px);
+  transition:
+    filter 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    box-shadow 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    transform 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  transform: scale(0.94);
+  box-shadow: none;
+}
+
+.emerald-carousel__item[data-selected] {
+  filter: none;
+  transform: scale(1);
+  box-shadow:
+    0 1px 3px 0 rgb(5 0 18 / 0.12),
+    0 1px 5px 0 rgb(5 0 18 / 0.20);
+  z-index: 1;
+}
+
+.emerald-carousel__item[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselNext.vue b/packages/emerald/src/components/EmCarousel/EmCarouselNext.vue
new file mode 100644
index 000000000..7cba6fa99
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselNext.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+  // Framework
+  import { CarouselNext } from '@vuetify/v0'
+
+  export interface EmCarouselNextProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselNext' })
+</script>
+
+<template>
+  <CarouselNext class="emerald-carousel__next">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselNext>
+</template>
+
+<style>
+.emerald-carousel__next {
+  grid-column: 3;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--emerald-neutral-800);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
+}
+
+.emerald-carousel__next:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-neutral-channels) / 0.06);
+}
+
+.emerald-carousel__next:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-carousel__next[aria-disabled="true"] {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue b/packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue
new file mode 100644
index 000000000..b4fcfe299
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+  // Framework
+  import { CarouselPrevious } from '@vuetify/v0'
+
+  export interface EmCarouselPreviousProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselPrevious' })
+</script>
+
+<template>
+  <CarouselPrevious class="emerald-carousel__previous">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselPrevious>
+</template>
+
+<style>
+.emerald-carousel__previous {
+  grid-column: 1;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--emerald-neutral-800);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
+}
+
+.emerald-carousel__previous:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-neutral-channels) / 0.06);
+}
+
+.emerald-carousel__previous:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-carousel__previous[aria-disabled="true"] {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue b/packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue
new file mode 100644
index 000000000..bec40e553
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+  // Framework
+  import { CarouselViewport } from '@vuetify/v0'
+
+  export interface EmCarouselViewportProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCarouselViewport' })
+</script>
+
+<template>
+  <CarouselViewport class="emerald-carousel__viewport">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CarouselViewport>
+</template>
+
+<style>
+.emerald-carousel__viewport {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: stretch;
+  padding: 8px 20%;
+  gap: 12px;
+}
+
+.emerald-carousel__viewport[data-orientation="vertical"] {
+  grid-column: 1;
+  grid-row: 2;
+  padding: 20% 8px;
+}
+
+.emerald-carousel__viewport[data-dragging] {
+  cursor: grabbing;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCarousel/index.ts b/packages/emerald/src/components/EmCarousel/index.ts
new file mode 100644
index 000000000..baf5f06b8
--- /dev/null
+++ b/packages/emerald/src/components/EmCarousel/index.ts
@@ -0,0 +1,17 @@
+export type { EmCarouselProps } from './EmCarousel.vue'
+export { default as EmCarousel } from './EmCarousel.vue'
+
+export type { EmCarouselIndicatorProps } from './EmCarouselIndicator.vue'
+export { default as EmCarouselIndicator } from './EmCarouselIndicator.vue'
+
+export type { EmCarouselItemProps } from './EmCarouselItem.vue'
+export { default as EmCarouselItem } from './EmCarouselItem.vue'
+
+export type { EmCarouselNextProps } from './EmCarouselNext.vue'
+export { default as EmCarouselNext } from './EmCarouselNext.vue'
+
+export type { EmCarouselPreviousProps } from './EmCarouselPrevious.vue'
+export { default as EmCarouselPrevious } from './EmCarouselPrevious.vue'
+
+export type { EmCarouselViewportProps } from './EmCarouselViewport.vue'
+export { default as EmCarouselViewport } from './EmCarouselViewport.vue'
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckbox.vue b/packages/emerald/src/components/EmCheckbox/EmCheckbox.vue
new file mode 100644
index 000000000..8b30bab65
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckbox.vue
@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { CheckboxRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmCheckboxSize = 'sm' | 'md' | 'lg'
+
+  export interface EmCheckboxProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    indeterminate?: MaybeRefOrGetter<boolean>
+    name?: string
+    value?: unknown
+    label?: string
+    size?: EmCheckboxSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckbox' })
+
+  const {
+    disabled = false,
+    indeterminate = false,
+    name,
+    value,
+    label,
+    size = 'md',
+    ...paperProps
+  } = defineProps<EmCheckboxProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="label"
+    class="emerald-checkbox"
+    :data-disabled="disabled || undefined"
+    :data-size="size"
+  >
+    <CheckboxRoot
+      v-model="model"
+      as="span"
+      class="emerald-checkbox__root"
+      :disabled
+      :indeterminate
+      :label
+      :name
+      :value
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </CheckboxRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 6px;
+  padding: 2px 6px 2px 2px;
+  transition: box-shadow 120ms ease;
+}
+
+.emerald-checkbox[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.emerald-checkbox__root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  flex-shrink: 0;
+}
+
+/* Focus ring on the whole label (control + text) */
+.emerald-checkbox:has(.emerald-checkbox__root:focus-visible) {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.35);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue b/packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue
new file mode 100644
index 000000000..88270264a
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { CheckboxGroup } from '@vuetify/v0'
+
+  export interface EmCheckboxGroupProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    label?: string
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckboxGroup' })
+
+  const {
+    disabled = false,
+    mandatory = false,
+    label,
+    name,
+  } = defineProps<EmCheckboxGroupProps>()
+
+  const model = defineModel<unknown[]>({ default: () => [] })
+</script>
+
+<template>
+  <CheckboxGroup
+    v-model="model"
+    class="emerald-checkbox-group"
+    :disabled
+    :label
+    :mandatory
+    :name
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CheckboxGroup>
+</template>
+
+<style>
+.emerald-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue b/packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue
new file mode 100644
index 000000000..c0c222873
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue
@@ -0,0 +1,142 @@
+<script lang="ts">
+  // Framework
+  import { CheckboxIndicator, useCheckboxRoot } from '@vuetify/v0'
+
+  export interface EmCheckboxIndicatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckboxIndicator' })
+
+  const root = useCheckboxRoot('v0:checkbox:root')
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-checkbox__box"
+    :data-disabled="root.isDisabled.value || undefined"
+    :data-state="root.isMixed.value ? 'indeterminate' : (root.isChecked.value ? 'checked' : 'unchecked')"
+  >
+    <CheckboxIndicator class="emerald-checkbox__indicator">
+      <template #default="{ isMixed }">
+        <svg
+          v-if="isMixed"
+          class="emerald-checkbox__glyph"
+          fill="none"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 8h10"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2.25"
+          />
+        </svg>
+
+        <svg
+          v-else
+          class="emerald-checkbox__glyph"
+          fill="none"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 8.5L6.5 12L13 4.5"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2.25"
+          />
+        </svg>
+      </template>
+    </CheckboxIndicator>
+  </span>
+</template>
+
+<style>
+.emerald-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.25);
+  border-radius: 3px;
+  background: transparent;
+  color: #ffffff;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  flex-shrink: 0;
+}
+
+.emerald-checkbox[data-size="sm"] .emerald-checkbox__box {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-checkbox[data-size="lg"] .emerald-checkbox__box {
+  width: 24px;
+  height: 24px;
+}
+
+.emerald-checkbox:hover .emerald-checkbox__box[data-state="unchecked"]:not([data-disabled]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.5);
+}
+
+.emerald-checkbox__box[data-state="checked"],
+.emerald-checkbox__box[data-state="indeterminate"] {
+  background: var(--emerald-primary-500, #7c5cf6);
+  border: 2px solid var(--emerald-primary-700, #5f3aed);
+}
+
+.emerald-checkbox:hover .emerald-checkbox__box[data-state="checked"]:not([data-disabled]),
+.emerald-checkbox:hover .emerald-checkbox__box[data-state="indeterminate"]:not([data-disabled]) {
+  background: var(--emerald-primary-600, #5f3aed);
+  border-color: var(--emerald-primary-800);
+}
+
+.emerald-checkbox__box[data-disabled] {
+  background: transparent;
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.15);
+  box-shadow: none;
+}
+
+.emerald-checkbox__box[data-disabled][data-state="checked"],
+.emerald-checkbox__box[data-disabled][data-state="indeterminate"] {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.15);
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.2);
+}
+
+.emerald-checkbox__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  line-height: 0;
+}
+
+.emerald-checkbox__glyph {
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+}
+
+.emerald-checkbox[data-size="sm"] .emerald-checkbox__glyph {
+  width: 12px;
+  height: 12px;
+}
+
+.emerald-checkbox[data-size="lg"] .emerald-checkbox__glyph {
+  width: 20px;
+  height: 20px;
+}
+
+.emerald-checkbox__box[data-disabled] .emerald-checkbox__glyph {
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.45);
+}
+</style>
diff --git a/packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue b/packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue
new file mode 100644
index 000000000..e8f770a55
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+  // Framework
+  import { CheckboxSelectAll } from '@vuetify/v0'
+
+  export interface EmCheckboxSelectAllProps {
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmCheckboxSelectAll' })
+
+  const { label } = defineProps<EmCheckboxSelectAllProps>()
+</script>
+
+<template>
+  <CheckboxSelectAll class="emerald-checkbox-select-all" :label>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CheckboxSelectAll>
+</template>
diff --git a/packages/emerald/src/components/EmCheckbox/index.ts b/packages/emerald/src/components/EmCheckbox/index.ts
new file mode 100644
index 000000000..8afbd1cef
--- /dev/null
+++ b/packages/emerald/src/components/EmCheckbox/index.ts
@@ -0,0 +1,11 @@
+export type { EmCheckboxProps } from './EmCheckbox.vue'
+export { default as EmCheckbox } from './EmCheckbox.vue'
+
+export type { EmCheckboxGroupProps } from './EmCheckboxGroup.vue'
+export { default as EmCheckboxGroup } from './EmCheckboxGroup.vue'
+
+export type { EmCheckboxIndicatorProps } from './EmCheckboxIndicator.vue'
+export { default as EmCheckboxIndicator } from './EmCheckboxIndicator.vue'
+
+export type { EmCheckboxSelectAllProps } from './EmCheckboxSelectAll.vue'
+export { default as EmCheckboxSelectAll } from './EmCheckboxSelectAll.vue'
diff --git a/packages/emerald/src/components/EmContainer/EmContainer.vue b/packages/emerald/src/components/EmContainer/EmContainer.vue
new file mode 100644
index 000000000..fa25e8b0c
--- /dev/null
+++ b/packages/emerald/src/components/EmContainer/EmContainer.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid'
+
+  export interface EmContainerProps extends V0PaperProps {
+    size?: EmContainerSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmContainer' })
+
+  const { size = 'lg', ...paperProps } = defineProps<EmContainerProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-container"
+    :data-size="size"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: 16px;
+}
+
+.emerald-container[data-size="sm"] { max-width: 640px; }
+.emerald-container[data-size="md"] { max-width: 768px; }
+.emerald-container[data-size="lg"] { max-width: 1024px; }
+.emerald-container[data-size="xl"] { max-width: 1280px; }
+.emerald-container[data-size="2xl"] { max-width: 1536px; }
+.emerald-container[data-size="fluid"] { max-width: none; }
+</style>
diff --git a/packages/emerald/src/components/EmContainer/index.ts b/packages/emerald/src/components/EmContainer/index.ts
new file mode 100644
index 000000000..faa8a0032
--- /dev/null
+++ b/packages/emerald/src/components/EmContainer/index.ts
@@ -0,0 +1,2 @@
+export { default as EmContainer } from './EmContainer.vue'
+export type { EmContainerProps } from './EmContainer.vue'
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePicker.vue b/packages/emerald/src/components/EmDatePicker/EmDatePicker.vue
new file mode 100644
index 000000000..930189b13
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePicker.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmDatePickerProps extends V0PaperProps {
+    modelValue?: Date | null
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePicker' })
+
+  // TODO(emerald): wire createCalendar/useDate once v0 ships a DatePicker primitive
+  const { disabled = false, ...paperProps } = defineProps<EmDatePickerProps>()
+
+  const model = defineModel<Date | null>({ default: null })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-date-picker"
+    :data-disabled="disabled || undefined"
+  >
+    <slot :model />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-date-picker {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  width: 234px;
+  padding: 12px 7px;
+  border-radius: 6px;
+  background: #ffffff;
+  box-shadow:
+    0 1px 3px rgb(5 0 18 / 0.12),
+    0 1px 5px rgb(5 0 18 / 0.2);
+  overflow: clip;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #000000;
+}
+
+.emerald-date-picker[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue
new file mode 100644
index 000000000..4fb82f268
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmDatePickerCalendarProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerCalendar' })
+</script>
+
+<template>
+  <div class="emerald-date-picker__calendar">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-date-picker__calendar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  width: 100%;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue
new file mode 100644
index 000000000..ceab27e6b
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue
@@ -0,0 +1,88 @@
+<script lang="ts">
+  export interface EmDatePickerCellProps {
+    selected?: boolean
+    disabled?: boolean
+    today?: boolean
+    weekday?: boolean
+    outside?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerCell' })
+
+  const {
+    selected = false,
+    disabled = false,
+    today = false,
+    weekday = false,
+    outside = false,
+  } = defineProps<EmDatePickerCellProps>()
+</script>
+
+<template>
+  <button
+    class="emerald-date-picker__cell"
+    :data-disabled="disabled || undefined"
+    :data-outside="outside || undefined"
+    :data-selected="selected || undefined"
+    :data-today="today || undefined"
+    :data-weekday="weekday || undefined"
+    :disabled="disabled || weekday"
+    :role="weekday ? 'columnheader' : 'gridcell'"
+    :tabindex="weekday ? -1 : 0"
+    type="button"
+  >
+    <slot />
+  </button>
+</template>
+
+<style>
+.emerald-date-picker__cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: #000000;
+  cursor: pointer;
+  overflow: clip;
+}
+
+.emerald-date-picker__cell[data-weekday] {
+  font-weight: 600;
+  cursor: default;
+}
+
+.emerald-date-picker__cell:not([data-weekday]):not([data-disabled]):hover {
+  background: rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.1);
+}
+
+.emerald-date-picker__cell[data-today]:not([data-selected]) {
+  outline: 1px solid var(--emerald-primary-500, #18b48c);
+  outline-offset: -1px;
+}
+
+.emerald-date-picker__cell[data-selected] {
+  background: var(--emerald-primary-500, #18b48c);
+  color: #ffffff;
+}
+
+.emerald-date-picker__cell[data-outside] {
+  color: rgb(0 0 0 / 0.35);
+}
+
+.emerald-date-picker__cell[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue
new file mode 100644
index 000000000..e5fef7dd4
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmDatePickerGridProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerGrid' })
+</script>
+
+<template>
+  <div class="emerald-date-picker__grid" role="grid">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-date-picker__grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 220px;
+  padding: 3px 2px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue
new file mode 100644
index 000000000..c10447eea
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+  export interface EmDatePickerHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerHeader' })
+</script>
+
+<template>
+  <div class="emerald-date-picker__header">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 5px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: normal;
+  color: #000000;
+}
+
+.emerald-date-picker__header > button,
+.emerald-date-picker__header [role="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue b/packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue
new file mode 100644
index 000000000..e256205c8
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue
@@ -0,0 +1,50 @@
+<script lang="ts">
+  export interface EmDatePickerInputProps {
+    placeholder?: string
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDatePickerInput' })
+
+  const { placeholder, disabled = false } = defineProps<EmDatePickerInputProps>()
+
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <input
+    v-model="model"
+    class="emerald-date-picker__input"
+    :disabled
+    :placeholder
+    type="text"
+  >
+</template>
+
+<style>
+.emerald-date-picker__input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  border: 1px solid rgb(0 0 0 / 0.12);
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: #000000;
+}
+
+.emerald-date-picker__input::placeholder {
+  color: rgb(0 0 0 / 0.45);
+}
+
+.emerald-date-picker__input:focus {
+  outline: none;
+  border-color: var(--emerald-primary-500, #18b48c);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 24 180 140) / 0.15);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDatePicker/index.ts b/packages/emerald/src/components/EmDatePicker/index.ts
new file mode 100644
index 000000000..9973ff78c
--- /dev/null
+++ b/packages/emerald/src/components/EmDatePicker/index.ts
@@ -0,0 +1,17 @@
+export type { EmDatePickerProps } from './EmDatePicker.vue'
+export { default as EmDatePicker } from './EmDatePicker.vue'
+
+export type { EmDatePickerCalendarProps } from './EmDatePickerCalendar.vue'
+export { default as EmDatePickerCalendar } from './EmDatePickerCalendar.vue'
+
+export type { EmDatePickerCellProps } from './EmDatePickerCell.vue'
+export { default as EmDatePickerCell } from './EmDatePickerCell.vue'
+
+export type { EmDatePickerGridProps } from './EmDatePickerGrid.vue'
+export { default as EmDatePickerGrid } from './EmDatePickerGrid.vue'
+
+export type { EmDatePickerHeaderProps } from './EmDatePickerHeader.vue'
+export { default as EmDatePickerHeader } from './EmDatePickerHeader.vue'
+
+export type { EmDatePickerInputProps } from './EmDatePickerInput.vue'
+export { default as EmDatePickerInput } from './EmDatePickerInput.vue'
diff --git a/packages/emerald/src/components/EmDialog/EmDialog.vue b/packages/emerald/src/components/EmDialog/EmDialog.vue
new file mode 100644
index 000000000..31de51a34
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialog.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { DialogRoot } from '@vuetify/v0'
+
+  export interface EmDialogProps {
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialog' })
+
+  const { id } = defineProps<EmDialogProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <DialogRoot
+    :id
+    v-model="model"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </DialogRoot>
+</template>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogActivator.vue b/packages/emerald/src/components/EmDialog/EmDialogActivator.vue
new file mode 100644
index 000000000..16534eca6
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogActivator.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+  // Framework
+  import { DialogActivator } from '@vuetify/v0'
+
+  export interface EmDialogActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogActivator' })
+</script>
+
+<template>
+  <DialogActivator class="emerald-dialog__activator">
+    <slot />
+  </DialogActivator>
+</template>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogBody.vue b/packages/emerald/src/components/EmDialog/EmDialogBody.vue
new file mode 100644
index 000000000..b14796b1b
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogBody.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmDialogBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogBody' })
+</script>
+
+<template>
+  <div class="emerald-dialog__body">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-dialog__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogClose.vue b/packages/emerald/src/components/EmDialog/EmDialogClose.vue
new file mode 100644
index 000000000..1e4363923
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogClose.vue
@@ -0,0 +1,20 @@
+<script lang="ts">
+  // Framework
+  import { DialogClose } from '@vuetify/v0'
+
+  export interface EmDialogCloseProps {
+    renderless?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogClose' })
+
+  const { renderless = false } = defineProps<EmDialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose class="emerald-dialog__close" :renderless>
+    <slot />
+  </DialogClose>
+</template>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogContent.vue b/packages/emerald/src/components/EmDialog/EmDialogContent.vue
new file mode 100644
index 000000000..6de32068d
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogContent.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { DialogContent } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmDialogContentProps extends V0PaperProps {
+    closeOnClickOutside?: boolean
+    blocking?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogContent' })
+
+  const {
+    closeOnClickOutside = true,
+    blocking = false,
+    ...paperProps
+  } = defineProps<EmDialogContentProps>()
+
+  const emit = defineEmits<{
+    cancel: [e: Event]
+    close: [e: Event]
+  }>()
+</script>
+
+<template>
+  <DialogContent
+    :blocking
+    class="emerald-dialog"
+    :close-on-click-outside
+    @cancel="emit('cancel', $event)"
+    @close="emit('close', $event)"
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="div"
+      class="emerald-dialog__content"
+    >
+      <slot />
+    </V0Paper>
+  </DialogContent>
+</template>
+
+<style>
+.emerald-dialog {
+  padding: 0;
+  margin: auto;
+  border: none;
+  background: transparent;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  overflow: visible;
+}
+
+.emerald-dialog::backdrop {
+  background: rgba(81, 81, 81, 0.3);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+.emerald-dialog__content {
+  display: flex;
+  flex-direction: column;
+  width: 520px;
+  max-width: 100%;
+  background: linear-gradient(to bottom, #ffffff, var(--emerald-background, #faf9ff));
+  border: 1px solid var(--emerald-primary-500, #7c5cf6);
+  border-radius: 12px;
+  overflow: clip;
+  box-shadow:
+    0 3px 8px 0 rgba(5, 0, 18, 0.13),
+    0 2px 4px 0 rgba(5, 0, 18, 0.1);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogDescription.vue b/packages/emerald/src/components/EmDialog/EmDialogDescription.vue
new file mode 100644
index 000000000..037b64454
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogDescription.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { DialogDescription } from '@vuetify/v0'
+
+  export interface EmDialogDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogDescription' })
+</script>
+
+<template>
+  <DialogDescription class="emerald-dialog__description">
+    <slot />
+  </DialogDescription>
+</template>
+
+<style>
+.emerald-dialog__description {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: rgb(var(--emerald-neutral-700-channels, 30 28 40) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogFooter.vue b/packages/emerald/src/components/EmDialog/EmDialogFooter.vue
new file mode 100644
index 000000000..4a805e250
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogFooter.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmDialogFooterProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogFooter' })
+</script>
+
+<template>
+  <div class="emerald-dialog__footer">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogHeader.vue b/packages/emerald/src/components/EmDialog/EmDialogHeader.vue
new file mode 100644
index 000000000..363965821
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogHeader.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+  export interface EmDialogHeaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogHeader' })
+</script>
+
+<template>
+  <div class="emerald-dialog__header">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-dialog__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 24px 24px 0;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/EmDialogTitle.vue b/packages/emerald/src/components/EmDialog/EmDialogTitle.vue
new file mode 100644
index 000000000..27fc1a984
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/EmDialogTitle.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+  // Framework
+  import { DialogTitle } from '@vuetify/v0'
+
+  export interface EmDialogTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDialogTitle' })
+</script>
+
+<template>
+  <DialogTitle as="h2" class="emerald-dialog__title">
+    <slot />
+  </DialogTitle>
+</template>
+
+<style>
+.emerald-dialog__title {
+  margin: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 26px;
+  letter-spacing: -0.2px;
+  color: var(--emerald-neutral-700, #1e1c28);
+}
+</style>
diff --git a/packages/emerald/src/components/EmDialog/index.ts b/packages/emerald/src/components/EmDialog/index.ts
new file mode 100644
index 000000000..b333f1fbf
--- /dev/null
+++ b/packages/emerald/src/components/EmDialog/index.ts
@@ -0,0 +1,26 @@
+export type { EmDialogProps } from './EmDialog.vue'
+export { default as EmDialog } from './EmDialog.vue'
+
+export type { EmDialogActivatorProps } from './EmDialogActivator.vue'
+export { default as EmDialogActivator } from './EmDialogActivator.vue'
+
+export type { EmDialogBodyProps } from './EmDialogBody.vue'
+export { default as EmDialogBody } from './EmDialogBody.vue'
+
+export type { EmDialogCloseProps } from './EmDialogClose.vue'
+export { default as EmDialogClose } from './EmDialogClose.vue'
+
+export type { EmDialogContentProps } from './EmDialogContent.vue'
+export { default as EmDialogContent } from './EmDialogContent.vue'
+
+export type { EmDialogDescriptionProps } from './EmDialogDescription.vue'
+export { default as EmDialogDescription } from './EmDialogDescription.vue'
+
+export type { EmDialogFooterProps } from './EmDialogFooter.vue'
+export { default as EmDialogFooter } from './EmDialogFooter.vue'
+
+export type { EmDialogHeaderProps } from './EmDialogHeader.vue'
+export { default as EmDialogHeader } from './EmDialogHeader.vue'
+
+export type { EmDialogTitleProps } from './EmDialogTitle.vue'
+export { default as EmDialogTitle } from './EmDialogTitle.vue'
diff --git a/packages/emerald/src/components/EmDivider/EmDivider.vue b/packages/emerald/src/components/EmDivider/EmDivider.vue
new file mode 100644
index 000000000..0bf3ea58d
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/EmDivider.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  export type EmDividerOrientation = 'horizontal' | 'vertical'
+  export type EmDividerVariant = 'solid' | 'dashed'
+
+  export interface EmDividerProps {
+    orientation?: EmDividerOrientation
+    variant?: EmDividerVariant
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDivider' })
+
+  const {
+    orientation = 'horizontal',
+    variant = 'solid',
+  } = defineProps<EmDividerProps>()
+</script>
+
+<template>
+  <Atom
+    :aria-orientation="orientation"
+    as="div"
+    class="emerald-divider"
+    :data-orientation="orientation"
+    :data-variant="variant"
+    role="separator"
+  >
+    <slot />
+  </Atom>
+</template>
+
+<style>
+.emerald-divider {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  color: var(--emerald-on-background);
+}
+
+.emerald-divider[data-orientation="horizontal"] {
+  width: 100%;
+}
+
+.emerald-divider[data-orientation="vertical"] {
+  flex-direction: column;
+  height: 100%;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDivider/EmDividerLabel.vue b/packages/emerald/src/components/EmDivider/EmDividerLabel.vue
new file mode 100644
index 000000000..45f4b4116
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/EmDividerLabel.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+  export interface EmDividerLabelProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDividerLabel' })
+</script>
+
+<template>
+  <span class="emerald-divider__label">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-divider__label {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--emerald-on-background);
+  opacity: 0.6;
+}
+
+.emerald-divider[data-orientation="vertical"] .emerald-divider__label {
+  padding: 8px 0;
+  font-size: 12px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDivider/EmDividerLine.vue b/packages/emerald/src/components/EmDivider/EmDividerLine.vue
new file mode 100644
index 000000000..bd2844661
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/EmDividerLine.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+  export interface EmDividerLineProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmDividerLine' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-divider__line" />
+</template>
+
+<style>
+.emerald-divider__line {
+  flex: 1 0 0;
+  align-self: center;
+}
+
+.emerald-divider[data-orientation="horizontal"] .emerald-divider__line {
+  border-top: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  height: 1px;
+  min-width: 1px;
+}
+
+/* Dashed pill: dotted line with rounded caps via SVG-style stroke */
+.emerald-divider[data-orientation="horizontal"][data-variant="dashed"] .emerald-divider__line {
+  border-top: none;
+  height: 2px;
+  border-radius: 9999px;
+  background-image: linear-gradient(
+    to right,
+    rgb(var(--emerald-neutral-channels, 26 28 30) / 0.35) 50%,
+    transparent 50%
+  );
+  background-size: 8px 2px;
+  background-repeat: repeat-x;
+}
+
+.emerald-divider[data-orientation="vertical"] .emerald-divider__line {
+  border-left: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  width: 1px;
+  min-height: 1px;
+}
+
+.emerald-divider[data-orientation="vertical"][data-variant="dashed"] .emerald-divider__line {
+  border-left: none;
+  width: 2px;
+  border-radius: 9999px;
+  background-image: linear-gradient(
+    to bottom,
+    rgb(var(--emerald-neutral-channels, 26 28 30) / 0.35) 50%,
+    transparent 50%
+  );
+  background-size: 2px 8px;
+  background-repeat: repeat-y;
+}
+</style>
diff --git a/packages/emerald/src/components/EmDivider/index.ts b/packages/emerald/src/components/EmDivider/index.ts
new file mode 100644
index 000000000..2422b060c
--- /dev/null
+++ b/packages/emerald/src/components/EmDivider/index.ts
@@ -0,0 +1,8 @@
+export type { EmDividerProps } from './EmDivider.vue'
+export { default as EmDivider } from './EmDivider.vue'
+
+export type { EmDividerLabelProps } from './EmDividerLabel.vue'
+export { default as EmDividerLabel } from './EmDividerLabel.vue'
+
+export type { EmDividerLineProps } from './EmDividerLine.vue'
+export { default as EmDividerLine } from './EmDividerLine.vue'
diff --git a/packages/emerald/src/components/EmFlex/EmFlex.vue b/packages/emerald/src/components/EmFlex/EmFlex.vue
new file mode 100644
index 000000000..99da817dc
--- /dev/null
+++ b/packages/emerald/src/components/EmFlex/EmFlex.vue
@@ -0,0 +1,69 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  // Types
+  import type { AtomProps } from '@vuetify/v0'
+
+  export type EmFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'
+  export type EmFlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+  export type EmFlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+  export type EmFlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
+  export type EmFlexGap = 0 | 4 | 6 | 8 | 12 | 16 | 24
+
+  export interface EmFlexProps extends AtomProps {
+    direction?: EmFlexDirection
+    align?: EmFlexAlign
+    justify?: EmFlexJustify
+    wrap?: EmFlexWrap
+    gap?: EmFlexGap
+    inline?: boolean
+  }
+
+  const JUSTIFY_MAP: Record<string, string> = {
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+  }
+
+  function resolveJustify (value?: EmFlexJustify): string | undefined {
+    if (!value) return undefined
+    return JUSTIFY_MAP[value] ?? value
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmFlex' })
+
+  const {
+    direction = 'row',
+    align,
+    justify,
+    wrap = 'nowrap',
+    gap = 0,
+    inline = false,
+  } = defineProps<EmFlexProps>()
+
+  const style = toRef(() => ({
+    display: inline ? 'inline-flex' : 'flex',
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: resolveJustify(justify),
+    flexWrap: wrap,
+    gap: gap ? `${gap}px` : undefined,
+  }))
+</script>
+
+<template>
+  <Atom
+    as="div"
+    class="emerald-flex"
+    :data-direction="direction"
+    :style
+  >
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/emerald/src/components/EmFlex/index.ts b/packages/emerald/src/components/EmFlex/index.ts
new file mode 100644
index 000000000..dbffc61ab
--- /dev/null
+++ b/packages/emerald/src/components/EmFlex/index.ts
@@ -0,0 +1,9 @@
+export type {
+  EmFlexAlign,
+  EmFlexDirection,
+  EmFlexGap,
+  EmFlexJustify,
+  EmFlexProps,
+  EmFlexWrap,
+} from './EmFlex.vue'
+export { default as EmFlex } from './EmFlex.vue'
diff --git a/packages/emerald/src/components/EmForm/EmForm.vue b/packages/emerald/src/components/EmForm/EmForm.vue
new file mode 100644
index 000000000..fdf486eaa
--- /dev/null
+++ b/packages/emerald/src/components/EmForm/EmForm.vue
@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { Form } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmFormProps extends V0PaperProps {
+    disabled?: boolean
+    readonly?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmForm' })
+
+  const {
+    disabled = false,
+    readonly = false,
+    ...paperProps
+  } = defineProps<EmFormProps>()
+
+  const model = defineModel<boolean | null>({ default: null })
+
+  const emit = defineEmits<{
+    submit: [payload: { valid: boolean }]
+    reset: []
+  }>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-form"
+    :data-disabled="disabled || undefined"
+    :data-readonly="readonly || undefined"
+  >
+    <Form
+      v-model="model"
+      as="form"
+      class="emerald-form__root"
+      :disabled
+      :readonly
+      @reset="emit('reset')"
+      @submit="(payload) => emit('submit', payload)"
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </Form>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-form {
+  display: block;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: #121212;
+}
+
+.emerald-form__root {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.emerald-form[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Field layout — matches Figma form-field pattern */
+.emerald-form .emerald-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.emerald-form .emerald-form-field__label {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.2;
+  color: #121212;
+}
+
+.emerald-form .emerald-form-field[data-invalid] .emerald-form-field__label {
+  color: var(--emerald-error-700);
+}
+
+.emerald-form .emerald-form-field[data-invalid] .emerald-form-field__control:hover {
+  border-color: var(--emerald-error-700);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-error-500-channels) / 0.18),
+    0 1px 5px 0 rgb(var(--emerald-error-500-channels) / 0.22);
+}
+
+.emerald-form .emerald-form-field__control {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 8px;
+  background: #ffffff;
+  border: 1px solid rgb(var(--emerald-neutral-channels) / 0.1);
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-form .emerald-form-field__control:focus-within {
+  border-color: rgb(var(--emerald-neutral-channels) / 0.4);
+}
+
+.emerald-form .emerald-form-field[data-invalid] .emerald-form-field__control {
+  border-color: rgb(var(--emerald-error-700-channels) / 0.5);
+}
+
+.emerald-form .emerald-form-field__control input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  color: #121212;
+  padding: 0;
+}
+
+.emerald-form .emerald-form-field__control input::placeholder {
+  color: #121212;
+  opacity: 0.3;
+  font-size: 12px;
+}
+
+.emerald-form .emerald-form-field__helper {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.2;
+  color: #121212;
+  opacity: 0.6;
+}
+
+.emerald-form .emerald-form-field__error {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--emerald-error-700);
+  opacity: 0.85;
+}
+
+.emerald-form .emerald-form-field[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+</style>
diff --git a/packages/emerald/src/components/EmForm/index.ts b/packages/emerald/src/components/EmForm/index.ts
new file mode 100644
index 000000000..ace186a59
--- /dev/null
+++ b/packages/emerald/src/components/EmForm/index.ts
@@ -0,0 +1,2 @@
+export { default as EmForm } from './EmForm.vue'
+export type { EmFormProps } from './EmForm.vue'
diff --git a/packages/emerald/src/components/EmGrid/EmGrid.vue b/packages/emerald/src/components/EmGrid/EmGrid.vue
new file mode 100644
index 000000000..7545cbbab
--- /dev/null
+++ b/packages/emerald/src/components/EmGrid/EmGrid.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  // Types
+  import type { AtomProps } from '@vuetify/v0'
+
+  export type EmGridGap = 0 | 4 | 6 | 8 | 12 | 16 | 24
+
+  export interface EmGridProps extends AtomProps {
+    columns?: number
+    rows?: number
+    gap?: EmGridGap
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmGrid' })
+
+  const {
+    columns = 12,
+    rows,
+    gap = 0,
+  } = defineProps<EmGridProps>()
+
+  const style = toRef(() => ({
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gridTemplateRows: rows ? `repeat(${rows}, minmax(0, 1fr))` : undefined,
+    gap: gap ? `${gap}px` : undefined,
+  }))
+</script>
+
+<template>
+  <Atom as="div" class="emerald-grid" :style>
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/emerald/src/components/EmGrid/EmGridItem.vue b/packages/emerald/src/components/EmGrid/EmGridItem.vue
new file mode 100644
index 000000000..f97cdd3ee
--- /dev/null
+++ b/packages/emerald/src/components/EmGrid/EmGridItem.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // Framework
+  import { Atom } from '@vuetify/v0'
+
+  // Types
+  import type { AtomProps } from '@vuetify/v0'
+
+  export interface EmGridItemProps extends AtomProps {
+    span?: number
+    start?: number
+    rowSpan?: number
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmGridItem' })
+
+  const { span, start, rowSpan } = defineProps<EmGridItemProps>()
+
+  const style = toRef(() => ({
+    gridColumn: span ? `span ${span} / span ${span}` : undefined,
+    gridColumnStart: start,
+    gridRow: rowSpan ? `span ${rowSpan} / span ${rowSpan}` : undefined,
+  }))
+</script>
+
+<template>
+  <Atom as="div" class="emerald-grid__item" :style>
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/emerald/src/components/EmGrid/index.ts b/packages/emerald/src/components/EmGrid/index.ts
new file mode 100644
index 000000000..8fd8c8da2
--- /dev/null
+++ b/packages/emerald/src/components/EmGrid/index.ts
@@ -0,0 +1,5 @@
+export type { EmGridGap, EmGridProps } from './EmGrid.vue'
+export { default as EmGrid } from './EmGrid.vue'
+
+export type { EmGridItemProps } from './EmGridItem.vue'
+export { default as EmGridItem } from './EmGridItem.vue'
diff --git a/packages/emerald/src/components/EmList/EmList.vue b/packages/emerald/src/components/EmList/EmList.vue
new file mode 100644
index 000000000..69e9729a9
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmList.vue
@@ -0,0 +1,178 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmListProps extends V0PaperProps {
+    flat?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmList' })
+
+  const { flat = false, ...paperProps } = defineProps<EmListProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="ul"
+    class="emerald-list"
+    :data-flat="flat || undefined"
+    role="list"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0;
+  padding: 12px;
+  list-style: none;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  background: var(--emerald-background, #faf9ff);
+  border: 1px solid rgb(var(--emerald-on-background-channels, 26 18 48) / 0.1);
+  border-radius: 12px;
+  box-shadow:
+    0 3px 6px 0 rgba(5, 0, 18, 0.09),
+    0 8px 20px 0 rgba(5, 0, 18, 0.13);
+  color: var(--emerald-on-background, #281065);
+  width: 100%;
+}
+
+.emerald-list[data-flat] {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+}
+
+.emerald-list__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 36px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--emerald-on-background, #281065);
+  cursor: default;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.emerald-list__item[data-interactive] {
+  cursor: pointer;
+}
+
+.emerald-list__item[data-interactive]:not([data-active]):hover {
+  background: var(--emerald-primary-50, #f5f3ff);
+}
+
+.emerald-list__item[data-active] {
+  background: var(--emerald-primary-100, #ede9fe);
+}
+
+.emerald-list__item[data-active] .emerald-list__item-title,
+.emerald-list__item[data-active] .emerald-list__item-icon {
+  color: var(--emerald-primary-500, #7c5cf6);
+  font-weight: 500;
+}
+
+.emerald-list__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Subtle left border indicator on default (non-active, non-header) items */
+.emerald-list__item[data-indent] {
+  border-left: 0.5px solid rgb(var(--emerald-on-background-channels, 26 18 48) / 0.1);
+  border-radius: 0;
+}
+
+.emerald-list__item-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 0;
+}
+
+.emerald-list__item-title {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-subtitle {
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--emerald-on-background, #281065);
+}
+
+.emerald-list__item-header {
+  align-items: flex-start;
+  height: auto;
+  padding: 8px 12px;
+}
+
+.emerald-list__item-header .emerald-list__item-title {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.emerald-list__subheader {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  padding: 8px 12px 8px 0;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--emerald-on-background, #281065);
+  opacity: 0.7;
+  text-transform: uppercase;
+  box-sizing: border-box;
+}
+
+.emerald-list__separator {
+  width: calc(100% - 16px);
+  height: 0;
+  margin: 8px 8px 0;
+  border: none;
+  border-top: 0.5px solid rgb(var(--emerald-on-background-channels, 26 18 48) / 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmList/EmListItem.vue b/packages/emerald/src/components/EmList/EmListItem.vue
new file mode 100644
index 000000000..a43c66282
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItem.vue
@@ -0,0 +1,44 @@
+<script lang="ts">
+  export interface EmListItemProps {
+    interactive?: boolean
+    disabled?: boolean
+    active?: boolean
+    indent?: boolean
+    header?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItem' })
+
+  const {
+    interactive = false,
+    disabled = false,
+    active = false,
+    indent = false,
+    header = false,
+  } = defineProps<EmListItemProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled) return
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <li
+    class="emerald-list__item"
+    :class="{ 'emerald-list__item-header': header }"
+    :data-active="active || undefined"
+    :data-disabled="disabled || undefined"
+    :data-indent="(indent && !active && !header) || undefined"
+    :data-interactive="interactive || undefined"
+    @click="onClick"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemAction.vue b/packages/emerald/src/components/EmList/EmListItemAction.vue
new file mode 100644
index 000000000..9a16527a7
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemAction.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemActionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemAction' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-list__item-action">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemBody.vue b/packages/emerald/src/components/EmList/EmListItemBody.vue
new file mode 100644
index 000000000..8d1d44fb8
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemBody.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemBody' })
+</script>
+
+<template>
+  <div class="emerald-list__item-body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemIcon.vue b/packages/emerald/src/components/EmList/EmListItemIcon.vue
new file mode 100644
index 000000000..edf3054f8
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemIconProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemIcon' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-list__item-icon">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemSubtitle.vue b/packages/emerald/src/components/EmList/EmListItemSubtitle.vue
new file mode 100644
index 000000000..ca52f0ee7
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemSubtitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemSubtitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemSubtitle' })
+</script>
+
+<template>
+  <span class="emerald-list__item-subtitle">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListItemTitle.vue b/packages/emerald/src/components/EmList/EmListItemTitle.vue
new file mode 100644
index 000000000..e41d1ea92
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListItemTitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListItemTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListItemTitle' })
+</script>
+
+<template>
+  <span class="emerald-list__item-title">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListSeparator.vue b/packages/emerald/src/components/EmList/EmListSeparator.vue
new file mode 100644
index 000000000..2f3bed03a
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListSeparator.vue
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export interface EmListSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListSeparator' })
+</script>
+
+<template>
+  <li aria-hidden="true" class="emerald-list__separator" role="separator" />
+</template>
diff --git a/packages/emerald/src/components/EmList/EmListSubheader.vue b/packages/emerald/src/components/EmList/EmListSubheader.vue
new file mode 100644
index 000000000..8a5f1e70f
--- /dev/null
+++ b/packages/emerald/src/components/EmList/EmListSubheader.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmListSubheaderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmListSubheader' })
+</script>
+
+<template>
+  <li class="emerald-list__subheader" role="presentation">
+    <slot />
+  </li>
+</template>
diff --git a/packages/emerald/src/components/EmList/index.ts b/packages/emerald/src/components/EmList/index.ts
new file mode 100644
index 000000000..abd3772f4
--- /dev/null
+++ b/packages/emerald/src/components/EmList/index.ts
@@ -0,0 +1,26 @@
+export type { EmListProps } from './EmList.vue'
+export { default as EmList } from './EmList.vue'
+
+export type { EmListItemProps } from './EmListItem.vue'
+export { default as EmListItem } from './EmListItem.vue'
+
+export type { EmListItemActionProps } from './EmListItemAction.vue'
+export { default as EmListItemAction } from './EmListItemAction.vue'
+
+export type { EmListItemBodyProps } from './EmListItemBody.vue'
+export { default as EmListItemBody } from './EmListItemBody.vue'
+
+export type { EmListItemIconProps } from './EmListItemIcon.vue'
+export { default as EmListItemIcon } from './EmListItemIcon.vue'
+
+export type { EmListItemSubtitleProps } from './EmListItemSubtitle.vue'
+export { default as EmListItemSubtitle } from './EmListItemSubtitle.vue'
+
+export type { EmListItemTitleProps } from './EmListItemTitle.vue'
+export { default as EmListItemTitle } from './EmListItemTitle.vue'
+
+export type { EmListSeparatorProps } from './EmListSeparator.vue'
+export { default as EmListSeparator } from './EmListSeparator.vue'
+
+export type { EmListSubheaderProps } from './EmListSubheader.vue'
+export { default as EmListSubheader } from './EmListSubheader.vue'
diff --git a/packages/emerald/src/components/EmLoading/EmLoading.vue b/packages/emerald/src/components/EmLoading/EmLoading.vue
new file mode 100644
index 000000000..979870c2f
--- /dev/null
+++ b/packages/emerald/src/components/EmLoading/EmLoading.vue
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmLoadingSize = 'sm' | 'md' | 'lg'
+
+  export interface EmLoadingProps extends V0PaperProps {
+    size?: EmLoadingSize
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmLoading' })
+
+  const { size = 'md', label } = defineProps<EmLoadingProps>()
+</script>
+
+<template>
+  <V0Paper
+    :aria-label="label"
+    aria-live="polite"
+    as="div"
+    class="emerald-loading"
+    :data-size="size"
+    role="status"
+  >
+    <span aria-hidden="true" class="emerald-loading__spinner" />
+
+    <span v-if="$slots.default" class="emerald-loading__label">
+      <slot />
+    </span>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: var(--emerald-on-background);
+}
+
+.emerald-loading__spinner {
+  display: inline-block;
+  border-radius: 50%;
+  border: 2px solid rgb(var(--emerald-primary-500-channels) / 0.25);
+  border-top-color: var(--emerald-primary-500);
+  animation: emerald-loading-spin 800ms linear infinite;
+}
+
+.emerald-loading[data-size="sm"] .emerald-loading__spinner {
+  width: 14px;
+  height: 14px;
+  border-width: 2px;
+}
+
+.emerald-loading[data-size="md"] .emerald-loading__spinner {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.emerald-loading[data-size="lg"] .emerald-loading__spinner {
+  width: 28px;
+  height: 28px;
+  border-width: 3px;
+}
+
+@keyframes emerald-loading-spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/packages/emerald/src/components/EmLoading/index.ts b/packages/emerald/src/components/EmLoading/index.ts
new file mode 100644
index 000000000..7d0f67d4a
--- /dev/null
+++ b/packages/emerald/src/components/EmLoading/index.ts
@@ -0,0 +1,2 @@
+export { default as EmLoading } from './EmLoading.vue'
+export type { EmLoadingProps } from './EmLoading.vue'
diff --git a/packages/emerald/src/components/EmMenu/EmMenu.vue b/packages/emerald/src/components/EmMenu/EmMenu.vue
new file mode 100644
index 000000000..0c9cf15e2
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenu.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { PopoverRoot } from '@vuetify/v0'
+
+  export interface EmMenuProps {
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenu' })
+
+  const { id } = defineProps<EmMenuProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <PopoverRoot
+    :id
+    v-model="model"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverRoot>
+</template>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuActivator.vue b/packages/emerald/src/components/EmMenu/EmMenuActivator.vue
new file mode 100644
index 000000000..33c083c6c
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuActivator.vue
@@ -0,0 +1,18 @@
+<script lang="ts">
+  // Framework
+  import { PopoverActivator } from '@vuetify/v0'
+
+  export interface EmMenuActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuActivator' })
+</script>
+
+<template>
+  <PopoverActivator class="emerald-menu__activator">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverActivator>
+</template>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuContent.vue b/packages/emerald/src/components/EmMenu/EmMenuContent.vue
new file mode 100644
index 000000000..a6301da79
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuContent.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { PopoverContent } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmMenuContentProps extends V0PaperProps {
+    positionArea?: string
+    positionTry?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuContent' })
+
+  const {
+    positionArea,
+    positionTry,
+    ...paperProps
+  } = defineProps<EmMenuContentProps>()
+</script>
+
+<template>
+  <PopoverContent
+    class="emerald-menu__popover"
+    :position-area
+    :position-try
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="div"
+      class="emerald-menu__content"
+      role="menu"
+    >
+      <slot />
+    </V0Paper>
+  </PopoverContent>
+</template>
+
+<style>
+.emerald-menu__popover {
+  padding: 0;
+  margin: 4px 0 0;
+  background: transparent;
+  border: 0;
+  overflow: visible;
+}
+
+.emerald-menu__popover::backdrop {
+  background: transparent;
+}
+
+.emerald-menu__content {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 176px;
+  padding: 8px;
+  background: #ffffff;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 12px;
+  box-shadow:
+    0 3px 6px 0 rgba(5, 0, 18, 0.09),
+    0 8px 20px 0 rgba(5, 0, 18, 0.13);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuItem.vue b/packages/emerald/src/components/EmMenu/EmMenuItem.vue
new file mode 100644
index 000000000..5f174fc69
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuItem.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+  export interface EmMenuItemProps {
+    disabled?: boolean
+    active?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuItem' })
+
+  const { disabled = false, active = false } = defineProps<EmMenuItemProps>()
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    if (disabled) return
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <button
+    :aria-disabled="disabled || undefined"
+    class="emerald-menu__item"
+    :data-active="active || undefined"
+    :data-disabled="disabled || undefined"
+    :disabled="disabled || undefined"
+    role="menuitem"
+    type="button"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<style>
+.emerald-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-left: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 0 6px 6px 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.emerald-menu__item:hover:not([data-disabled]):not([data-active]) {
+  background: var(--emerald-primary-50);
+}
+
+.emerald-menu__item[data-active] {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-menu__item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emerald-menu__item:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: -2px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuLabel.vue b/packages/emerald/src/components/EmMenu/EmMenuLabel.vue
new file mode 100644
index 000000000..d15488984
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuLabel.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+  export interface EmMenuLabelProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuLabel' })
+</script>
+
+<template>
+  <div class="emerald-menu__label" role="presentation">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-menu__label {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 8px 12px 8px 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  opacity: 0.7;
+  user-select: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/EmMenuSeparator.vue b/packages/emerald/src/components/EmMenu/EmMenuSeparator.vue
new file mode 100644
index 000000000..e74ee19a4
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/EmMenuSeparator.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+  export interface EmMenuSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmMenuSeparator' })
+</script>
+
+<template>
+  <div class="emerald-menu__separator-wrapper">
+    <div
+      aria-orientation="horizontal"
+      class="emerald-menu__separator"
+      role="separator"
+    />
+  </div>
+</template>
+
+<style>
+.emerald-menu__separator-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
+
+.emerald-menu__separator {
+  flex: 1;
+  height: 0.5px;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmMenu/index.ts b/packages/emerald/src/components/EmMenu/index.ts
new file mode 100644
index 000000000..34860c7c6
--- /dev/null
+++ b/packages/emerald/src/components/EmMenu/index.ts
@@ -0,0 +1,17 @@
+export type { EmMenuProps } from './EmMenu.vue'
+export { default as EmMenu } from './EmMenu.vue'
+
+export type { EmMenuActivatorProps } from './EmMenuActivator.vue'
+export { default as EmMenuActivator } from './EmMenuActivator.vue'
+
+export type { EmMenuContentProps } from './EmMenuContent.vue'
+export { default as EmMenuContent } from './EmMenuContent.vue'
+
+export type { EmMenuItemProps } from './EmMenuItem.vue'
+export { default as EmMenuItem } from './EmMenuItem.vue'
+
+export type { EmMenuLabelProps } from './EmMenuLabel.vue'
+export { default as EmMenuLabel } from './EmMenuLabel.vue'
+
+export type { EmMenuSeparatorProps } from './EmMenuSeparator.vue'
+export { default as EmMenuSeparator } from './EmMenuSeparator.vue'
diff --git a/packages/emerald/src/components/EmPagination/EmPagination.vue b/packages/emerald/src/components/EmPagination/EmPagination.vue
new file mode 100644
index 000000000..8d8ad4143
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPagination.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { PaginationRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmPaginationProps extends V0PaperProps {
+    size?: number
+    totalVisible?: number
+    itemsPerPage?: number
+    ellipsis?: string | false
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPagination' })
+
+  const {
+    size = 1,
+    totalVisible,
+    itemsPerPage = 10,
+    ellipsis = '…',
+    ...paperProps
+  } = defineProps<EmPaginationProps>()
+
+  const page = defineModel<number>({ default: 1 })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="nav"
+    class="emerald-pagination"
+  >
+    <PaginationRoot
+      v-model="page"
+      :ellipsis
+      :items-per-page
+      :size
+      :total-visible
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </PaginationRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-pagination {
+  width: fit-content;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--emerald-on-background, #1a1230);
+}
+
+.emerald-pagination > nav,
+.emerald-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+
+.emerald-pagination__prev,
+.emerald-pagination__next {
+  margin: 0 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue b/packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue
new file mode 100644
index 000000000..d93b7ad58
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+  // Framework
+  import { PaginationEllipsis } from '@vuetify/v0'
+
+  export interface EmPaginationEllipsisProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationEllipsis' })
+</script>
+
+<template>
+  <PaginationEllipsis class="emerald-pagination__ellipsis">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationEllipsis>
+</template>
+
+<style>
+.emerald-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.7);
+  user-select: none;
+}
+
+.emerald-pagination__ellipsis > * {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationFirst.vue b/packages/emerald/src/components/EmPagination/EmPaginationFirst.vue
new file mode 100644
index 000000000..d9b639668
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationFirst.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationFirst } from '@vuetify/v0'
+
+  export interface EmPaginationFirstProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationFirst' })
+</script>
+
+<template>
+  <PaginationFirst class="emerald-pagination__first">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationFirst>
+</template>
+
+<style>
+.emerald-pagination__first {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__first > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__first:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__first:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__first[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationItem.vue b/packages/emerald/src/components/EmPagination/EmPaginationItem.vue
new file mode 100644
index 000000000..605c3cd29
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationItem.vue
@@ -0,0 +1,68 @@
+<script lang="ts">
+  // Framework
+  import { PaginationItem } from '@vuetify/v0'
+
+  export interface EmPaginationItemProps {
+    value: number
+    disabled?: boolean
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationItem' })
+
+  const { value, disabled = false, id } = defineProps<EmPaginationItemProps>()
+</script>
+
+<template>
+  <PaginationItem
+    :id
+    class="emerald-pagination__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationItem>
+</template>
+
+<style>
+.emerald-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.emerald-pagination__item[data-selected] {
+  background: var(--emerald-background, #ffffff);
+  border-color: var(--emerald-secondary-500);
+  color: inherit;
+}
+
+.emerald-pagination__item:hover:not([data-disabled]):not([data-selected]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__item:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__item[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationLast.vue b/packages/emerald/src/components/EmPagination/EmPaginationLast.vue
new file mode 100644
index 000000000..1d92b6e21
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationLast.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationLast } from '@vuetify/v0'
+
+  export interface EmPaginationLastProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationLast' })
+</script>
+
+<template>
+  <PaginationLast class="emerald-pagination__last">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationLast>
+</template>
+
+<style>
+.emerald-pagination__last {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__last > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__last:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__last:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__last[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationNext.vue b/packages/emerald/src/components/EmPagination/EmPaginationNext.vue
new file mode 100644
index 000000000..69fbeb240
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationNext.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationNext } from '@vuetify/v0'
+
+  export interface EmPaginationNextProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationNext' })
+</script>
+
+<template>
+  <PaginationNext class="emerald-pagination__next">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationNext>
+</template>
+
+<style>
+.emerald-pagination__next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__next > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__next:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__next:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__next[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/EmPaginationPrev.vue b/packages/emerald/src/components/EmPagination/EmPaginationPrev.vue
new file mode 100644
index 000000000..2049313b3
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/EmPaginationPrev.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Framework
+  import { PaginationPrev } from '@vuetify/v0'
+
+  export interface EmPaginationPrevProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmPaginationPrev' })
+</script>
+
+<template>
+  <PaginationPrev class="emerald-pagination__prev">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PaginationPrev>
+</template>
+
+<style>
+.emerald-pagination__prev {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.emerald-pagination__prev > * {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-pagination__prev:hover:not([aria-disabled="true"]) {
+  background: rgb(var(--emerald-primary-500-channels) / 0.08);
+}
+
+.emerald-pagination__prev:focus-visible {
+  outline: 2px solid var(--emerald-primary-500);
+  outline-offset: 2px;
+}
+
+.emerald-pagination__prev[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmPagination/index.ts b/packages/emerald/src/components/EmPagination/index.ts
new file mode 100644
index 000000000..77cd549c8
--- /dev/null
+++ b/packages/emerald/src/components/EmPagination/index.ts
@@ -0,0 +1,20 @@
+export type { EmPaginationProps } from './EmPagination.vue'
+export { default as EmPagination } from './EmPagination.vue'
+
+export type { EmPaginationEllipsisProps } from './EmPaginationEllipsis.vue'
+export { default as EmPaginationEllipsis } from './EmPaginationEllipsis.vue'
+
+export type { EmPaginationFirstProps } from './EmPaginationFirst.vue'
+export { default as EmPaginationFirst } from './EmPaginationFirst.vue'
+
+export type { EmPaginationItemProps } from './EmPaginationItem.vue'
+export { default as EmPaginationItem } from './EmPaginationItem.vue'
+
+export type { EmPaginationLastProps } from './EmPaginationLast.vue'
+export { default as EmPaginationLast } from './EmPaginationLast.vue'
+
+export type { EmPaginationNextProps } from './EmPaginationNext.vue'
+export { default as EmPaginationNext } from './EmPaginationNext.vue'
+
+export type { EmPaginationPrevProps } from './EmPaginationPrev.vue'
+export { default as EmPaginationPrev } from './EmPaginationPrev.vue'
diff --git a/packages/emerald/src/components/EmProgress/EmProgress.vue b/packages/emerald/src/components/EmProgress/EmProgress.vue
new file mode 100644
index 000000000..eb23df255
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgress.vue
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmProgressSize = 'sm' | 'md'
+
+  export interface EmProgressProps extends V0PaperProps {
+    value?: number
+    min?: number
+    max?: number
+    size?: EmProgressSize
+    indeterminate?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'EmProgress' })
+
+  const {
+    value = 0,
+    min = 0,
+    max = 100,
+    size = 'sm',
+    indeterminate = false,
+    ...paperProps
+  } = defineProps<EmProgressProps>()
+
+  const percent = toRef(() => {
+    const span = max - min
+    if (span <= 0) return 0
+    return Math.min(100, Math.max(0, ((value - min) / span) * 100))
+  })
+
+  const style = toRef(() => ({
+    '--emerald-progress-percent': `${percent.value}%`,
+  } as Record<string, string>))
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    :aria-valuemax="max"
+    :aria-valuemin="min"
+    :aria-valuenow="indeterminate ? undefined : value"
+    as="div"
+    class="emerald-progress"
+    :data-indeterminate="indeterminate || undefined"
+    :data-size="size"
+    role="progressbar"
+    :style
+  >
+    <slot :percent :value />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-progress {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 205px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  flex-wrap: nowrap;
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/EmProgressFill.vue b/packages/emerald/src/components/EmProgress/EmProgressFill.vue
new file mode 100644
index 000000000..70f8d7a8a
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgressFill.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+  export interface EmProgressFillProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmProgressFill' })
+</script>
+
+<template>
+  <div class="emerald-progress__fill">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-progress__fill {
+  position: absolute;
+  top: -0.5px;
+  bottom: -0.5px;
+  left: -0.5px;
+  width: var(--emerald-progress-percent, 0%);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-200, #dce4e9);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.05);
+  transition: width 200ms ease;
+}
+
+.emerald-progress[data-size="md"] .emerald-progress__fill {
+  top: 1.5px;
+  bottom: 1.5px;
+  left: 1.5px;
+  width: calc(var(--emerald-progress-percent, 0%) - 3px);
+  overflow: clip;
+  border: none;
+  box-shadow: none;
+  padding-right: 6px;
+}
+
+.emerald-progress[data-indeterminate] .emerald-progress__fill {
+  width: 40% !important;
+  animation: emerald-progress-indeterminate 1.2s linear infinite;
+}
+
+@keyframes emerald-progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/EmProgressTrack.vue b/packages/emerald/src/components/EmProgress/EmProgressTrack.vue
new file mode 100644
index 000000000..3bd74aa57
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgressTrack.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export interface EmProgressTrackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmProgressTrack' })
+</script>
+
+<template>
+  <div class="emerald-progress__track">
+    <slot />
+  </div>
+</template>
+
+<style>
+.emerald-progress__track {
+  position: relative;
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: clip;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-50, #f4f7f9);
+}
+
+.emerald-progress[data-size="md"] .emerald-progress__track {
+  height: 16px;
+  background: #ffffff;
+}
+
+.emerald-progress[data-size="sm"] .emerald-progress__track {
+  height: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/EmProgressValue.vue b/packages/emerald/src/components/EmProgress/EmProgressValue.vue
new file mode 100644
index 000000000..f5cd78abc
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/EmProgressValue.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+  export interface EmProgressValueProps {
+    inside?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmProgressValue' })
+
+  const { inside = false } = defineProps<EmProgressValueProps>()
+</script>
+
+<template>
+  <span
+    class="emerald-progress__value"
+    :data-inside="inside || undefined"
+  >
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-progress__value {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 10px;
+  color: var(--emerald-secondary-500, #94a3b8);
+  white-space: nowrap;
+  padding-inline: 2px;
+}
+
+.emerald-progress__value[data-inside] {
+  color: var(--emerald-secondary-700, #6f7a93);
+}
+</style>
diff --git a/packages/emerald/src/components/EmProgress/index.ts b/packages/emerald/src/components/EmProgress/index.ts
new file mode 100644
index 000000000..17ad0c52d
--- /dev/null
+++ b/packages/emerald/src/components/EmProgress/index.ts
@@ -0,0 +1,11 @@
+export type { EmProgressProps, EmProgressSize } from './EmProgress.vue'
+export { default as EmProgress } from './EmProgress.vue'
+
+export type { EmProgressFillProps } from './EmProgressFill.vue'
+export { default as EmProgressFill } from './EmProgressFill.vue'
+
+export type { EmProgressTrackProps } from './EmProgressTrack.vue'
+export { default as EmProgressTrack } from './EmProgressTrack.vue'
+
+export type { EmProgressValueProps } from './EmProgressValue.vue'
+export { default as EmProgressValue } from './EmProgressValue.vue'
diff --git a/packages/emerald/src/components/EmRadio/EmRadio.vue b/packages/emerald/src/components/EmRadio/EmRadio.vue
new file mode 100644
index 000000000..53d9496cc
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/EmRadio.vue
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { RadioRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmRadioSize = 'sm' | 'md' | 'lg'
+
+  export interface EmRadioProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    name?: string
+    value?: unknown
+    label?: string
+    size?: EmRadioSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmRadio' })
+
+  const {
+    disabled = false,
+    name,
+    value,
+    label,
+    size = 'md',
+    ...paperProps
+  } = defineProps<EmRadioProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="label"
+    class="emerald-radio"
+    :data-disabled="disabled || undefined"
+    :data-size="size"
+  >
+    <RadioRoot
+      as="span"
+      class="emerald-radio__root"
+      :disabled
+      :label
+      :name
+      :value
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </RadioRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 999px;
+  padding: 2px 8px 2px 2px;
+  transition: box-shadow 120ms ease;
+}
+
+.emerald-radio[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.emerald-radio__root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  flex-shrink: 0;
+}
+
+/* Focus ring on the whole label (control + text) */
+.emerald-radio:has(.emerald-radio__root:focus-visible) {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.35);
+}
+</style>
diff --git a/packages/emerald/src/components/EmRadio/EmRadioGroup.vue b/packages/emerald/src/components/EmRadio/EmRadioGroup.vue
new file mode 100644
index 000000000..6dcbb8113
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/EmRadioGroup.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { RadioGroup } from '@vuetify/v0'
+
+  export interface EmRadioGroupProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    label?: string
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmRadioGroup' })
+
+  const {
+    disabled = false,
+    mandatory = false,
+    label,
+    name,
+  } = defineProps<EmRadioGroupProps>()
+
+  const model = defineModel<unknown>()
+</script>
+
+<template>
+  <RadioGroup
+    v-model="model"
+    class="emerald-radio-group"
+    :disabled
+    :label
+    :mandatory
+    :name
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </RadioGroup>
+</template>
+
+<style>
+.emerald-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmRadio/EmRadioIndicator.vue b/packages/emerald/src/components/EmRadio/EmRadioIndicator.vue
new file mode 100644
index 000000000..8cd07546c
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/EmRadioIndicator.vue
@@ -0,0 +1,111 @@
+<script lang="ts">
+  // Framework
+  import { RadioIndicator, useRadioRoot } from '@vuetify/v0'
+
+  export interface EmRadioIndicatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmRadioIndicator' })
+
+  const root = useRadioRoot('v0:radio:root')
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-radio__box"
+    :data-disabled="root.isDisabled.value || undefined"
+    :data-state="root.isChecked.value ? 'checked' : 'unchecked'"
+  >
+    <RadioIndicator class="emerald-radio__indicator">
+      <template #default>
+        <span class="emerald-radio__dot" />
+      </template>
+    </RadioIndicator>
+  </span>
+</template>
+
+<style>
+.emerald-radio__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.25);
+  border-radius: 50%;
+  background: transparent;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  flex-shrink: 0;
+}
+
+.emerald-radio[data-size="sm"] .emerald-radio__box {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-radio[data-size="lg"] .emerald-radio__box {
+  width: 24px;
+  height: 24px;
+}
+
+.emerald-radio:hover .emerald-radio__box[data-state="unchecked"]:not([data-disabled]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.5);
+}
+
+.emerald-radio__box[data-state="checked"] {
+  border: 2px solid var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-radio:hover .emerald-radio__box[data-state="checked"]:not([data-disabled]) {
+  border-color: var(--emerald-primary-700, #5f3aed);
+}
+
+.emerald-radio__box[data-disabled] {
+  background: transparent;
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.15);
+  box-shadow: none;
+}
+
+.emerald-radio__box[data-disabled][data-state="checked"] {
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.25);
+}
+
+.emerald-radio__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.emerald-radio__dot {
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-radio[data-size="sm"] .emerald-radio__dot {
+  width: 8px;
+  height: 8px;
+}
+
+.emerald-radio[data-size="lg"] .emerald-radio__dot {
+  width: 12px;
+  height: 12px;
+}
+
+.emerald-radio:hover .emerald-radio__box[data-state="checked"]:not([data-disabled]) .emerald-radio__dot {
+  background: var(--emerald-primary-600, #5f3aed);
+}
+
+.emerald-radio__box[data-disabled] .emerald-radio__dot {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.3);
+}
+</style>
diff --git a/packages/emerald/src/components/EmRadio/index.ts b/packages/emerald/src/components/EmRadio/index.ts
new file mode 100644
index 000000000..63fa9e44f
--- /dev/null
+++ b/packages/emerald/src/components/EmRadio/index.ts
@@ -0,0 +1,8 @@
+export type { EmRadioProps } from './EmRadio.vue'
+export { default as EmRadio } from './EmRadio.vue'
+
+export type { EmRadioGroupProps } from './EmRadioGroup.vue'
+export { default as EmRadioGroup } from './EmRadioGroup.vue'
+
+export type { EmRadioIndicatorProps } from './EmRadioIndicator.vue'
+export { default as EmRadioIndicator } from './EmRadioIndicator.vue'
diff --git a/packages/emerald/src/components/EmSelect/EmSelect.vue b/packages/emerald/src/components/EmSelect/EmSelect.vue
new file mode 100644
index 000000000..c9f1c850f
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelect.vue
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { SelectRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { ID } from '@vuetify/v0'
+
+  export interface EmSelectProps extends V0PaperProps {
+    disabled?: boolean
+    multiple?: boolean
+    mandatory?: boolean | 'force'
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelect' })
+
+  const {
+    disabled = false,
+    multiple = false,
+    mandatory = false,
+    name,
+    ...paperProps
+  } = defineProps<EmSelectProps>()
+
+  const model = defineModel<ID | ID[] | undefined>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-select"
+    :data-disabled="disabled || undefined"
+  >
+    <SelectRoot
+      v-model="model"
+      :disabled
+      :mandatory
+      :multiple
+      :name
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </SelectRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-select {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+  border-radius: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-select[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectActivator.vue b/packages/emerald/src/components/EmSelect/EmSelectActivator.vue
new file mode 100644
index 000000000..d4a144c65
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectActivator.vue
@@ -0,0 +1,61 @@
+<script lang="ts">
+  // Framework
+  import { SelectActivator } from '@vuetify/v0'
+
+  export interface EmSelectActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectActivator' })
+</script>
+
+<template>
+  <SelectActivator class="emerald-select__activator">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectActivator>
+</template>
+
+<style>
+.emerald-select__activator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  cursor: pointer;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-select__activator:hover:not([data-select-open]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.3);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12),
+    0 1px 5px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.2);
+}
+
+.emerald-select__activator:focus-visible,
+.emerald-select__activator[data-select-open] {
+  outline: none;
+  border-color: var(--emerald-primary-500);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels) / 0.12);
+}
+
+.emerald-select__activator[data-select-open] > svg:last-child {
+  transform: rotate(180deg);
+  transition: transform 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.emerald-select__activator > svg:last-child {
+  transition: transform 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectContent.vue b/packages/emerald/src/components/EmSelect/EmSelectContent.vue
new file mode 100644
index 000000000..a46d4067f
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectContent.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+  // Framework
+  import { SelectContent } from '@vuetify/v0'
+
+  export interface EmSelectContentProps {
+    eager?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectContent' })
+
+  const { eager = false } = defineProps<EmSelectContentProps>()
+</script>
+
+<template>
+  <SelectContent class="emerald-select__content" :eager>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectContent>
+</template>
+
+<style>
+.emerald-select__content {
+  flex-direction: column;
+  align-items: stretch;
+  width: anchor-size(width);
+  padding: 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow:
+    0 2px 4px rgba(5, 0, 18, 0.1),
+    0 3px 8px rgba(5, 0, 18, 0.13);
+  margin-top: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition-property: opacity, transform, overlay, display;
+  transition-duration: 180ms;
+  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+  transition-behavior: allow-discrete;
+}
+
+.emerald-select__content:popover-open {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@starting-style {
+  .emerald-select__content:popover-open {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectItem.vue b/packages/emerald/src/components/EmSelect/EmSelectItem.vue
new file mode 100644
index 000000000..dd49cd4bd
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectItem.vue
@@ -0,0 +1,69 @@
+<script lang="ts">
+  // Framework
+  import { SelectItem } from '@vuetify/v0'
+
+  // Types
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmSelectItemProps {
+    value?: unknown
+    disabled?: MaybeRefOrGetter<boolean>
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectItem' })
+
+  const { value, disabled = false } = defineProps<EmSelectItemProps>()
+</script>
+
+<template>
+  <SelectItem
+    class="emerald-select__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectItem>
+</template>
+
+<style>
+.emerald-select__item {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 8px 12px;
+  border-left: 1px solid transparent;
+  border-radius: 0 6px 6px 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--emerald-primary-950);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.emerald-select__item[data-focused],
+.emerald-select__item:hover {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-select__item[data-selected] {
+  background: var(--emerald-primary-100);
+  border-left-color: var(--emerald-primary-500);
+  color: var(--emerald-primary-500);
+  font-weight: 500;
+}
+
+.emerald-select__item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue b/packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue
new file mode 100644
index 000000000..67c7ecfbb
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // Framework
+  import { SelectPlaceholder } from '@vuetify/v0'
+
+  export interface EmSelectPlaceholderProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectPlaceholder' })
+</script>
+
+<template>
+  <SelectPlaceholder class="emerald-select__placeholder">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectPlaceholder>
+</template>
+
+<style>
+.emerald-select__placeholder {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  opacity: 0.3;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/EmSelectValue.vue b/packages/emerald/src/components/EmSelect/EmSelectValue.vue
new file mode 100644
index 000000000..f721a1bac
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/EmSelectValue.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Framework
+  import { SelectValue } from '@vuetify/v0'
+
+  export interface EmSelectValueProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSelectValue' })
+</script>
+
+<template>
+  <SelectValue class="emerald-select__value">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SelectValue>
+</template>
+
+<style>
+.emerald-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSelect/index.ts b/packages/emerald/src/components/EmSelect/index.ts
new file mode 100644
index 000000000..19e496a34
--- /dev/null
+++ b/packages/emerald/src/components/EmSelect/index.ts
@@ -0,0 +1,17 @@
+export type { EmSelectProps } from './EmSelect.vue'
+export { default as EmSelect } from './EmSelect.vue'
+
+export type { EmSelectActivatorProps } from './EmSelectActivator.vue'
+export { default as EmSelectActivator } from './EmSelectActivator.vue'
+
+export type { EmSelectContentProps } from './EmSelectContent.vue'
+export { default as EmSelectContent } from './EmSelectContent.vue'
+
+export type { EmSelectItemProps } from './EmSelectItem.vue'
+export { default as EmSelectItem } from './EmSelectItem.vue'
+
+export type { EmSelectPlaceholderProps } from './EmSelectPlaceholder.vue'
+export { default as EmSelectPlaceholder } from './EmSelectPlaceholder.vue'
+
+export type { EmSelectValueProps } from './EmSelectValue.vue'
+export { default as EmSelectValue } from './EmSelectValue.vue'
diff --git a/packages/emerald/src/components/EmSlider/EmSlider.vue b/packages/emerald/src/components/EmSlider/EmSlider.vue
new file mode 100644
index 000000000..1f0811e8f
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSlider.vue
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { SliderRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmSliderOrientation = 'horizontal' | 'vertical'
+
+  export interface EmSliderProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    readonly?: MaybeRefOrGetter<boolean>
+    min?: number
+    max?: number
+    step?: number
+    orientation?: EmSliderOrientation
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSlider' })
+
+  const {
+    disabled = false,
+    readonly: _readonly = false,
+    min = 0,
+    max = 100,
+    step = 1,
+    orientation = 'horizontal',
+    name,
+    ...paperProps
+  } = defineProps<EmSliderProps>()
+
+  const model = defineModel<number | number[]>({ default: 0 })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-slider"
+    :data-orientation="orientation"
+  >
+    <SliderRoot
+      v-model="model"
+      :disabled
+      :max
+      :min
+      :name
+      :orientation
+      :readonly="_readonly"
+      :step
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </SliderRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-slider {
+  position: relative;
+  width: 205px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+}
+
+.emerald-slider > [data-orientation="horizontal"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.emerald-slider[data-orientation="vertical"] {
+  width: auto;
+  height: 100%;
+}
+
+.emerald-slider > [data-orientation="vertical"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/EmSliderRange.vue b/packages/emerald/src/components/EmSlider/EmSliderRange.vue
new file mode 100644
index 000000000..926519ffd
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSliderRange.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+  // Framework
+  import { SliderRange } from '@vuetify/v0'
+
+  export interface EmSliderRangeProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSliderRange' })
+</script>
+
+<template>
+  <SliderRange class="emerald-slider__range">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SliderRange>
+</template>
+
+<style>
+.emerald-slider__range {
+  position: absolute;
+  top: -0.5px;
+  bottom: -0.5px;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-200, #dce4e9);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.05);
+}
+
+.emerald-slider[data-orientation="vertical"] .emerald-slider__range {
+  top: auto;
+  bottom: 0;
+  left: -0.5px;
+  right: -0.5px;
+  height: auto;
+}
+
+.emerald-slider__range[data-disabled] {
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/EmSliderThumb.vue b/packages/emerald/src/components/EmSlider/EmSliderThumb.vue
new file mode 100644
index 000000000..f0daef033
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSliderThumb.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+  // Framework
+  import { SliderThumb } from '@vuetify/v0'
+
+  export interface EmSliderThumbProps {
+    ariaLabel?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSliderThumb' })
+
+  const { ariaLabel } = defineProps<EmSliderThumbProps>()
+</script>
+
+<template>
+  <SliderThumb :aria-label class="emerald-slider__thumb">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SliderThumb>
+</template>
+
+<style>
+.emerald-slider__thumb {
+  position: absolute;
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow:
+    0 1px 3px 0 rgba(5, 0, 18, 0.12),
+    0 1px 5px 0 rgba(5, 0, 18, 0.2);
+  cursor: grab;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  z-index: 1;
+}
+
+.emerald-slider[data-orientation="vertical"] .emerald-slider__thumb {
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.emerald-slider__thumb:focus-visible {
+  outline: 2px solid var(--emerald-primary-500, #3b82f6);
+  outline-offset: 2px;
+}
+
+.emerald-slider__thumb[data-state="dragging"] {
+  cursor: grabbing;
+}
+
+.emerald-slider__thumb[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/EmSliderTrack.vue b/packages/emerald/src/components/EmSlider/EmSliderTrack.vue
new file mode 100644
index 000000000..ff8647a05
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/EmSliderTrack.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+  // Framework
+  import { SliderTrack } from '@vuetify/v0'
+
+  export interface EmSliderTrackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSliderTrack' })
+</script>
+
+<template>
+  <SliderTrack class="emerald-slider__track">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SliderTrack>
+</template>
+
+<style>
+.emerald-slider__track {
+  position: relative;
+  flex: 1 1 auto;
+  height: 12px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 999px;
+  border: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: var(--emerald-secondary-50, #f4f7f9);
+  cursor: pointer;
+}
+
+.emerald-slider[data-orientation="vertical"] .emerald-slider__track {
+  width: 12px;
+  height: 100%;
+}
+
+.emerald-slider__track[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSlider/index.ts b/packages/emerald/src/components/EmSlider/index.ts
new file mode 100644
index 000000000..9f7b823d3
--- /dev/null
+++ b/packages/emerald/src/components/EmSlider/index.ts
@@ -0,0 +1,11 @@
+export type { EmSliderProps } from './EmSlider.vue'
+export { default as EmSlider } from './EmSlider.vue'
+
+export type { EmSliderRangeProps } from './EmSliderRange.vue'
+export { default as EmSliderRange } from './EmSliderRange.vue'
+
+export type { EmSliderThumbProps } from './EmSliderThumb.vue'
+export { default as EmSliderThumb } from './EmSliderThumb.vue'
+
+export type { EmSliderTrackProps } from './EmSliderTrack.vue'
+export { default as EmSliderTrack } from './EmSliderTrack.vue'
diff --git a/packages/emerald/src/components/EmStepper/EmStepper.vue b/packages/emerald/src/components/EmStepper/EmStepper.vue
new file mode 100644
index 000000000..6f11aaccf
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepper.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { StepRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmStepperProps extends V0PaperProps {
+    disabled?: boolean
+    enroll?: boolean
+    mandatory?: boolean | 'force'
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmStepper' })
+
+  const {
+    disabled = false,
+    enroll = false,
+    mandatory = false,
+    ...paperProps
+  } = defineProps<EmStepperProps>()
+
+  const model = defineModel<T>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-stepper"
+    :data-disabled="disabled || undefined"
+  >
+    <StepRoot
+      v-model="model"
+      :disabled
+      :enroll
+      :mandatory
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </StepRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background, #2d3139);
+}
+
+.emerald-stepper[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperItem.vue b/packages/emerald/src/components/EmStepper/EmStepperItem.vue
new file mode 100644
index 000000000..cda4346e6
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperItem.vue
@@ -0,0 +1,165 @@
+<script lang="ts">
+  // Framework
+  import { StepItem, useStepRoot } from '@vuetify/v0'
+
+  export interface EmStepperItemProps {
+    id?: string
+    label?: string
+    value?: unknown
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperItem' })
+
+  const {
+    id,
+    label,
+    value,
+    disabled = false,
+  } = defineProps<EmStepperItemProps>()
+
+  const step = useStepRoot('v0:step') as unknown as {
+    get: (id: string) => { index: number } | undefined
+    selectedIndex: { value: number }
+  }
+</script>
+
+<template>
+  <StepItem
+    :id
+    :disabled
+    :label
+    :value
+  >
+    <template #default="slotProps">
+      <div
+        v-bind="slotProps.attrs"
+        class="emerald-stepper__item"
+        :data-completed="(step.selectedIndex.value >= 0 && (step.get(slotProps.id)?.index ?? -1) < step.selectedIndex.value) || undefined"
+        :data-disabled="slotProps.isDisabled || undefined"
+        :data-selected="slotProps.isSelected || undefined"
+      >
+        <span class="emerald-stepper__item-card">
+          <span class="emerald-stepper__item-badge">
+            <slot
+              v-if="(step.selectedIndex.value >= 0 && (step.get(slotProps.id)?.index ?? -1) < step.selectedIndex.value) && $slots.completed"
+              name="completed"
+              v-bind="slotProps"
+            />
+
+            <slot v-else v-bind="slotProps">
+              <span class="emerald-stepper__item-indicator" />
+            </slot>
+          </span>
+        </span>
+
+        <span v-if="$slots.label && slotProps.isSelected" class="emerald-stepper__item-label">
+          <slot name="label" v-bind="slotProps" />
+        </span>
+      </div>
+    </template>
+  </StepItem>
+</template>
+
+<style>
+.emerald-stepper__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+}
+
+.emerald-stepper__item-card {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: #ffffff;
+  border: 1px solid var(--emerald-secondary-50);
+  border-radius: 6px;
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-secondary-500-channels) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-secondary-500-channels) / 0.09);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-stepper__item-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--emerald-secondary-100);
+  border-radius: 4px;
+  color: var(--emerald-neutral-600);
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.emerald-stepper__item-badge svg,
+.emerald-stepper__item-badge :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.emerald-stepper__item-indicator {
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  border-radius: 999px;
+  opacity: 0.6;
+}
+
+.emerald-stepper__item-label {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: var(--emerald-neutral-600);
+  font-size: 12px;
+  line-height: normal;
+  white-space: nowrap;
+}
+
+/* Current step — outer ring, stronger border */
+.emerald-stepper__item[data-selected] .emerald-stepper__item-card {
+  border-color: var(--emerald-secondary-500);
+  box-shadow:
+    0 0 0 2px rgb(var(--emerald-secondary-500-channels) / 0.25),
+    0 8px 20px 0 rgb(var(--emerald-secondary-500-channels) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-secondary-500-channels) / 0.09);
+}
+
+/* Completed step — success tint */
+.emerald-stepper__item[data-completed] .emerald-stepper__item-card {
+  border-color: var(--emerald-success-100);
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-success-channels) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-success-channels) / 0.09);
+}
+
+.emerald-stepper__item[data-completed] .emerald-stepper__item-badge {
+  background: transparent;
+  color: var(--emerald-success-600);
+}
+
+.emerald-stepper__item[data-completed] .emerald-stepper__item-card {
+  background: var(--emerald-success-50);
+}
+
+.emerald-stepper__item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emerald-stepper__item:focus-visible {
+  outline: 2px solid var(--emerald-secondary-500);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperLabel.vue b/packages/emerald/src/components/EmStepper/EmStepperLabel.vue
new file mode 100644
index 000000000..b79fb4e3f
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperLabel.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  export interface EmStepperLabelProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperLabel' })
+</script>
+
+<template>
+  <span class="emerald-stepper__label">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-stepper__label {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  line-height: 1.3;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--emerald-neutral-700, #4b5563);
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue b/packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue
new file mode 100644
index 000000000..130b05142
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export interface EmStepperLabelDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperLabelDescription' })
+</script>
+
+<template>
+  <span class="emerald-stepper__label-description">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-stepper__label-description {
+  display: block;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 11px;
+  letter-spacing: -0.12px;
+  color: var(--emerald-neutral-600);
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/EmStepperSeparator.vue b/packages/emerald/src/components/EmStepper/EmStepperSeparator.vue
new file mode 100644
index 000000000..4ba38369d
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/EmStepperSeparator.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+  export interface EmStepperSeparatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmStepperSeparator' })
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-stepper__separator"
+  />
+</template>
+
+<style>
+.emerald-stepper__separator {
+  height: 2px;
+  width: 64px;
+  border-radius: 8px;
+  background: rgb(var(--emerald-neutral-channels) / 0.1);
+  flex-shrink: 0;
+  transition: background 120ms ease;
+}
+
+/* Separator turns green when it follows a completed step */
+.emerald-stepper__item[data-completed] + .emerald-stepper__separator {
+  background: var(--emerald-success-100);
+}
+</style>
diff --git a/packages/emerald/src/components/EmStepper/index.ts b/packages/emerald/src/components/EmStepper/index.ts
new file mode 100644
index 000000000..d903dbb9c
--- /dev/null
+++ b/packages/emerald/src/components/EmStepper/index.ts
@@ -0,0 +1,14 @@
+export type { EmStepperProps } from './EmStepper.vue'
+export { default as EmStepper } from './EmStepper.vue'
+
+export type { EmStepperItemProps } from './EmStepperItem.vue'
+export { default as EmStepperItem } from './EmStepperItem.vue'
+
+export type { EmStepperLabelProps } from './EmStepperLabel.vue'
+export { default as EmStepperLabel } from './EmStepperLabel.vue'
+
+export type { EmStepperLabelDescriptionProps } from './EmStepperLabelDescription.vue'
+export { default as EmStepperLabelDescription } from './EmStepperLabelDescription.vue'
+
+export type { EmStepperSeparatorProps } from './EmStepperSeparator.vue'
+export { default as EmStepperSeparator } from './EmStepperSeparator.vue'
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitch.vue b/packages/emerald/src/components/EmSwitch/EmSwitch.vue
new file mode 100644
index 000000000..6357ea966
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitch.vue
@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { SwitchRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export type EmSwitchSize = 'sm' | 'md' | 'lg'
+
+  export interface EmSwitchProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    name?: string
+    value?: unknown
+    label?: string
+    size?: EmSwitchSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitch' })
+
+  const {
+    disabled = false,
+    name,
+    value,
+    label,
+    size = 'md',
+    ...paperProps
+  } = defineProps<EmSwitchProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="label"
+    class="emerald-switch"
+    :data-disabled="disabled || undefined"
+    :data-size="size"
+  >
+    <SwitchRoot
+      v-model="model"
+      as="span"
+      class="emerald-switch__root"
+      :disabled
+      :label
+      :name
+      :value
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </SwitchRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  user-select: none;
+}
+
+.emerald-switch[data-disabled] {
+  cursor: not-allowed;
+}
+
+.emerald-switch__root {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  flex-shrink: 0;
+}
+
+.emerald-switch__root:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border: 1px solid var(--emerald-primary-500, #7c5cf6);
+  border-radius: 999px;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue b/packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue
new file mode 100644
index 000000000..aac926d2c
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+  // Framework
+  import { SwitchGroup } from '@vuetify/v0'
+
+  export interface EmSwitchGroupProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    label?: string
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitchGroup' })
+
+  const {
+    disabled = false,
+    mandatory = false,
+    label,
+    name,
+  } = defineProps<EmSwitchGroupProps>()
+
+  const model = defineModel<unknown[]>({ default: () => [] })
+</script>
+
+<template>
+  <SwitchGroup
+    v-model="model"
+    class="emerald-switch-group"
+    :disabled
+    :label
+    :mandatory
+    :name
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SwitchGroup>
+</template>
+
+<style>
+.emerald-switch-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue b/packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue
new file mode 100644
index 000000000..fe3012704
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue
@@ -0,0 +1,61 @@
+<script lang="ts">
+  // Framework
+  import { useSwitchRoot } from '@vuetify/v0'
+
+  export interface EmSwitchThumbProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitchThumb' })
+
+  const root = useSwitchRoot('v0:switch:root')
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="emerald-switch__thumb"
+    :data-disabled="root.isDisabled.value || undefined"
+    :data-state="root.isChecked.value ? 'checked' : 'unchecked'"
+  />
+</template>
+
+<style>
+.emerald-switch__thumb {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #ffffff;
+  transform: translate(calc(-50% - 8px), -50%);
+  transition: transform 120ms ease;
+  pointer-events: none;
+}
+
+.emerald-switch__thumb[data-state="checked"] {
+  transform: translate(calc(-50% + 8px), -50%);
+}
+
+.emerald-switch[data-size="sm"] .emerald-switch__thumb {
+  width: 12px;
+  height: 12px;
+  transform: translate(calc(-50% - 6px), -50%);
+}
+
+.emerald-switch[data-size="sm"] .emerald-switch__thumb[data-state="checked"] {
+  transform: translate(calc(-50% + 6px), -50%);
+}
+
+.emerald-switch[data-size="lg"] .emerald-switch__thumb {
+  width: 20px;
+  height: 20px;
+  transform: translate(calc(-50% - 10px), -50%);
+}
+
+.emerald-switch[data-size="lg"] .emerald-switch__thumb[data-state="checked"] {
+  transform: translate(calc(-50% + 10px), -50%);
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue b/packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue
new file mode 100644
index 000000000..34cca051f
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue
@@ -0,0 +1,68 @@
+<script lang="ts">
+  // Framework
+  import { SwitchTrack } from '@vuetify/v0'
+
+  export interface EmSwitchTrackProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmSwitchTrack' })
+</script>
+
+<template>
+  <SwitchTrack class="emerald-switch__track">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </SwitchTrack>
+</template>
+
+<style>
+.emerald-switch__track {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  width: 36px;
+  height: 20px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 999px;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.05);
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  overflow: visible;
+}
+
+.emerald-switch[data-size="sm"] .emerald-switch__track {
+  width: 28px;
+  height: 16px;
+}
+
+.emerald-switch[data-size="lg"] .emerald-switch__track {
+  width: 44px;
+  height: 24px;
+}
+
+.emerald-switch:hover .emerald-switch__track[data-state="unchecked"] {
+  background: var(--emerald-primary-50, #f5f3ff);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.1);
+}
+
+.emerald-switch__track[data-state="checked"] {
+  background: var(--emerald-primary-500, #7c5cf6);
+  border-color: var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-switch:hover .emerald-switch__track[data-state="checked"] {
+  background: var(--emerald-primary-600, #5f3aed);
+  border-color: var(--emerald-primary-600, #5f3aed);
+  box-shadow: 0 1px 2px 0 rgba(5, 0, 18, 0.1);
+}
+
+.emerald-switch[data-disabled] .emerald-switch__track {
+  opacity: 0.3;
+}
+</style>
diff --git a/packages/emerald/src/components/EmSwitch/index.ts b/packages/emerald/src/components/EmSwitch/index.ts
new file mode 100644
index 000000000..685f9958e
--- /dev/null
+++ b/packages/emerald/src/components/EmSwitch/index.ts
@@ -0,0 +1,11 @@
+export type { EmSwitchProps } from './EmSwitch.vue'
+export { default as EmSwitch } from './EmSwitch.vue'
+
+export type { EmSwitchGroupProps } from './EmSwitchGroup.vue'
+export { default as EmSwitchGroup } from './EmSwitchGroup.vue'
+
+export type { EmSwitchThumbProps } from './EmSwitchThumb.vue'
+export { default as EmSwitchThumb } from './EmSwitchThumb.vue'
+
+export type { EmSwitchTrackProps } from './EmSwitchTrack.vue'
+export { default as EmSwitchTrack } from './EmSwitchTrack.vue'
diff --git a/packages/emerald/src/components/EmTable/EmTable.vue b/packages/emerald/src/components/EmTable/EmTable.vue
new file mode 100644
index 000000000..97f61073b
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTable.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmTableProps extends V0PaperProps {
+    bordered?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTable' })
+
+  const { bordered = true, ...paperProps } = defineProps<EmTableProps>()
+</script>
+
+<template>
+  <div
+    class="emerald-table-wrapper"
+    :data-bordered="bordered || undefined"
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="table"
+      class="emerald-table"
+    >
+      <slot />
+    </V0Paper>
+  </div>
+</template>
+
+<style>
+.emerald-table-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+  overflow-x: auto;
+}
+
+.emerald-table-wrapper[data-bordered] {
+  padding: 12px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 6px;
+}
+
+.emerald-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0.24px;
+  color: #000;
+  text-align: left;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableBody.vue b/packages/emerald/src/components/EmTable/EmTableBody.vue
new file mode 100644
index 000000000..179017117
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableBody.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export interface EmTableBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableBody' })
+</script>
+
+<template>
+  <tbody class="emerald-table__body">
+    <slot />
+  </tbody>
+</template>
+
+<style>
+.emerald-table__body .emerald-table__cell {
+  border-bottom: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+}
+
+.emerald-table__body tr:last-child .emerald-table__cell {
+  border-bottom: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableCell.vue b/packages/emerald/src/components/EmTable/EmTableCell.vue
new file mode 100644
index 000000000..8a73c4a15
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableCell.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+  export type EmTableCellAlign = 'start' | 'center' | 'end'
+
+  export interface EmTableCellProps {
+    align?: EmTableCellAlign
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableCell' })
+
+  const { align = 'start' } = defineProps<EmTableCellProps>()
+</script>
+
+<template>
+  <td
+    class="emerald-table__cell"
+    :data-align="align"
+  >
+    <slot />
+  </td>
+</template>
+
+<style>
+.emerald-table__cell {
+  padding: 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0.24px;
+  color: #000;
+  vertical-align: middle;
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.emerald-table__cell[data-align="center"] {
+  text-align: center;
+}
+
+.emerald-table__cell[data-align="end"] {
+  text-align: right;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableHead.vue b/packages/emerald/src/components/EmTable/EmTableHead.vue
new file mode 100644
index 000000000..8032635d5
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableHead.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+  export interface EmTableHeadProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableHead' })
+</script>
+
+<template>
+  <thead class="emerald-table__head">
+    <slot />
+  </thead>
+</template>
+
+<style>
+.emerald-table__head .emerald-table__header {
+  background: var(--emerald-secondary-50, #f4f7f9);
+}
+
+.emerald-table__head tr > .emerald-table__header:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.emerald-table__head tr > .emerald-table__header:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableHeader.vue b/packages/emerald/src/components/EmTable/EmTableHeader.vue
new file mode 100644
index 000000000..6c037e6c6
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableHeader.vue
@@ -0,0 +1,180 @@
+<script lang="ts">
+  export type EmTableHeaderAlign = 'start' | 'center' | 'end'
+  export type EmTableHeaderSort = 'ascending' | 'descending' | 'none'
+
+  export interface EmTableHeaderProps {
+    align?: EmTableHeaderAlign
+    scope?: 'col' | 'row'
+    sortable?: boolean
+    sort?: EmTableHeaderSort
+    filterable?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableHeader' })
+
+  const {
+    align = 'start',
+    scope = 'col',
+    sortable = false,
+    sort = 'none',
+    filterable = false,
+  } = defineProps<EmTableHeaderProps>()
+
+  const emit = defineEmits<{
+    sort: []
+    filter: []
+  }>()
+
+  function onSort () {
+    if (sortable) emit('sort')
+  }
+
+  function onFilter () {
+    if (filterable) emit('filter')
+  }
+</script>
+
+<template>
+  <th
+    :aria-sort="sortable ? sort : undefined"
+    class="emerald-table__header"
+    :data-align="align"
+    :data-filterable="filterable || undefined"
+    :data-sort="sortable ? sort : undefined"
+    :data-sortable="sortable || undefined"
+    :scope
+  >
+    <div class="emerald-table__header-inner">
+      <button
+        v-if="sortable"
+        class="emerald-table__header-label"
+        type="button"
+        @click="onSort"
+      >
+        <span><slot /></span>
+
+        <span class="emerald-table__header-sort">
+          <slot name="sort-icon" />
+        </span>
+      </button>
+
+      <span
+        v-else
+        class="emerald-table__header-label"
+      >
+        <slot />
+      </span>
+
+      <button
+        v-if="filterable"
+        aria-label="Filter"
+        class="emerald-table__header-filter"
+        type="button"
+        @click="onFilter"
+      >
+        <slot name="filter-icon" />
+      </button>
+    </div>
+  </th>
+</template>
+
+<style>
+.emerald-table__header {
+  padding: 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0.24px;
+  color: #000;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.emerald-table__header[data-align="center"] {
+  text-align: center;
+}
+
+.emerald-table__header[data-align="center"] .emerald-table__header-inner {
+  justify-content: center;
+}
+
+.emerald-table__header[data-align="end"] {
+  text-align: right;
+}
+
+.emerald-table__header[data-align="end"] .emerald-table__header-inner {
+  justify-content: flex-end;
+}
+
+.emerald-table__header-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.emerald-table__header-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  cursor: default;
+}
+
+.emerald-table__header[data-sortable] .emerald-table__header-label {
+  cursor: pointer;
+}
+
+.emerald-table__header[data-sortable] .emerald-table__header-label:hover {
+  color: var(--emerald-primary-600, #6446e4);
+}
+
+.emerald-table__header[data-sort="ascending"] .emerald-table__header-label,
+.emerald-table__header[data-sort="descending"] .emerald-table__header-label {
+  color: var(--emerald-primary-600, #6446e4);
+}
+
+.emerald-table__header-sort {
+  display: inline-flex;
+  align-items: center;
+  color: currentColor;
+  opacity: 0.6;
+}
+
+.emerald-table__header[data-sort="ascending"] .emerald-table__header-sort,
+.emerald-table__header[data-sort="descending"] .emerald-table__header-sort {
+  opacity: 1;
+}
+
+.emerald-table__header-filter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  margin-left: auto;
+  background: none;
+  border: 0;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.emerald-table__header-filter:hover {
+  opacity: 1;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.06);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/EmTableRow.vue b/packages/emerald/src/components/EmTable/EmTableRow.vue
new file mode 100644
index 000000000..f7e2641fa
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/EmTableRow.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export interface EmTableRowProps {
+    selected?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTableRow' })
+
+  const { selected = false } = defineProps<EmTableRowProps>()
+</script>
+
+<template>
+  <tr
+    class="emerald-table__row"
+    :data-selected="selected || undefined"
+  >
+    <slot />
+  </tr>
+</template>
+
+<style>
+.emerald-table__row[data-selected] .emerald-table__cell {
+  background: var(--emerald-background, #faf9ff);
+}
+
+.emerald-table__body .emerald-table__row:hover .emerald-table__cell {
+  background: rgb(var(--emerald-primary-500-channels) / 0.04);
+}
+
+.emerald-table__body .emerald-table__row[data-selected]:hover .emerald-table__cell {
+  background: var(--emerald-background, #faf9ff);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTable/index.ts b/packages/emerald/src/components/EmTable/index.ts
new file mode 100644
index 000000000..b60150b0d
--- /dev/null
+++ b/packages/emerald/src/components/EmTable/index.ts
@@ -0,0 +1,17 @@
+export type { EmTableProps } from './EmTable.vue'
+export { default as EmTable } from './EmTable.vue'
+
+export type { EmTableBodyProps } from './EmTableBody.vue'
+export { default as EmTableBody } from './EmTableBody.vue'
+
+export type { EmTableCellProps } from './EmTableCell.vue'
+export { default as EmTableCell } from './EmTableCell.vue'
+
+export type { EmTableHeadProps } from './EmTableHead.vue'
+export { default as EmTableHead } from './EmTableHead.vue'
+
+export type { EmTableHeaderProps } from './EmTableHeader.vue'
+export { default as EmTableHeader } from './EmTableHeader.vue'
+
+export type { EmTableRowProps } from './EmTableRow.vue'
+export { default as EmTableRow } from './EmTableRow.vue'
diff --git a/packages/emerald/src/components/EmTabs/EmTabs.vue b/packages/emerald/src/components/EmTabs/EmTabs.vue
new file mode 100644
index 000000000..ac1ec09a1
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabs.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { TabsRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { TabsActivation } from '@vuetify/v0'
+
+  export type EmTabsOrientation = 'horizontal' | 'vertical'
+
+  export interface EmTabsProps extends V0PaperProps {
+    disabled?: boolean
+    mandatory?: boolean | 'force'
+    circular?: boolean
+    orientation?: EmTabsOrientation
+    activation?: TabsActivation
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  defineOptions({ name: 'EmTabs' })
+
+  const {
+    disabled = false,
+    mandatory = 'force',
+    circular = true,
+    orientation = 'horizontal',
+    activation = 'automatic',
+    ...paperProps
+  } = defineProps<EmTabsProps>()
+
+  const model = defineModel<T | T[]>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-tabs"
+    :data-disabled="disabled || undefined"
+    :data-orientation="orientation"
+  >
+    <TabsRoot
+      v-model="model"
+      :activation
+      :circular
+      :disabled
+      :mandatory
+      :orientation
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </TabsRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-primary-950, #221065);
+}
+
+.emerald-tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/EmTabsItem.vue b/packages/emerald/src/components/EmTabs/EmTabsItem.vue
new file mode 100644
index 000000000..8b8bd6d29
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabsItem.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+  // Framework
+  import { TabsItem } from '@vuetify/v0'
+
+  // Types
+  import type { ID } from '@vuetify/v0'
+
+  export interface EmTabsItemProps<V = unknown> {
+    id?: ID
+    value?: V
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts" generic="V = unknown">
+  defineOptions({ name: 'EmTabsItem' })
+
+  const { id, value, disabled = false } = defineProps<EmTabsItemProps<V>>()
+</script>
+
+<template>
+  <TabsItem
+    :id
+    class="emerald-tabs__item"
+    :disabled
+    :value
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </TabsItem>
+</template>
+
+<style>
+.emerald-tabs__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 4px 12px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--emerald-primary-950, #221065);
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    color 220ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    box-shadow 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.emerald-tabs__item:hover:not([data-disabled]):not([data-selected]) {
+  background: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.08);
+  color: var(--emerald-primary-900, #361d95);
+}
+
+.emerald-tabs__item[data-selected] {
+  background: var(--emerald-primary-500, #7c5cf6);
+  color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0 1px 2px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.25);
+}
+
+.emerald-tabs__item[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.emerald-tabs__item:focus-visible {
+  outline: 2px solid var(--emerald-primary-500, #7c5cf6);
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+[aria-orientation="vertical"] > .emerald-tabs__item {
+  width: 100%;
+  justify-content: flex-start;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/EmTabsList.vue b/packages/emerald/src/components/EmTabs/EmTabsList.vue
new file mode 100644
index 000000000..9796ea267
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabsList.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+  // Framework
+  import { TabsList } from '@vuetify/v0'
+
+  export interface EmTabsListProps {
+    label?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTabsList' })
+
+  const { label } = defineProps<EmTabsListProps>()
+</script>
+
+<template>
+  <TabsList class="emerald-tabs__list" :label>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </TabsList>
+</template>
+
+<style>
+.emerald-tabs__list {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.03);
+  width: fit-content;
+}
+
+.emerald-tabs__list[aria-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/EmTabsPanel.vue b/packages/emerald/src/components/EmTabs/EmTabsPanel.vue
new file mode 100644
index 000000000..4cac823b5
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/EmTabsPanel.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Framework
+  import { TabsPanel } from '@vuetify/v0'
+
+  export interface EmTabsPanelProps<V = unknown> {
+    value: V
+  }
+</script>
+
+<script setup lang="ts" generic="V = unknown">
+  defineOptions({ name: 'EmTabsPanel' })
+
+  const { value } = defineProps<EmTabsPanelProps<V>>()
+</script>
+
+<template>
+  <TabsPanel class="emerald-tabs__panel" :value>
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </TabsPanel>
+</template>
+
+<style>
+.emerald-tabs__panel {
+  padding: 12px 0;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: var(--emerald-primary-950, #221065);
+  animation: emerald-tabs-fade 280ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.emerald-tabs__panel[hidden] {
+  display: none;
+}
+
+@keyframes emerald-tabs-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/packages/emerald/src/components/EmTabs/index.ts b/packages/emerald/src/components/EmTabs/index.ts
new file mode 100644
index 000000000..60c7103d5
--- /dev/null
+++ b/packages/emerald/src/components/EmTabs/index.ts
@@ -0,0 +1,11 @@
+export type { EmTabsProps } from './EmTabs.vue'
+export { default as EmTabs } from './EmTabs.vue'
+
+export type { EmTabsItemProps } from './EmTabsItem.vue'
+export { default as EmTabsItem } from './EmTabsItem.vue'
+
+export type { EmTabsListProps } from './EmTabsList.vue'
+export { default as EmTabsList } from './EmTabsList.vue'
+
+export type { EmTabsPanelProps } from './EmTabsPanel.vue'
+export { default as EmTabsPanel } from './EmTabsPanel.vue'
diff --git a/packages/emerald/src/components/EmTag/EmTag.vue b/packages/emerald/src/components/EmTag/EmTag.vue
new file mode 100644
index 000000000..663e84b83
--- /dev/null
+++ b/packages/emerald/src/components/EmTag/EmTag.vue
@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmTagVariant =
+    | 'neutral'
+    | 'primary'
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'info'
+
+  export type EmTagTone = 'tinted' | 'outlined'
+
+  export type EmTagElevation = 'none' | 'sm' | 'lg'
+
+  export interface EmTagProps extends V0PaperProps {
+    variant?: EmTagVariant
+    tone?: EmTagTone
+    elevation?: EmTagElevation
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTag' })
+
+  const {
+    variant = 'neutral',
+    tone = 'outlined',
+    elevation = 'none',
+    ...paperProps
+  } = defineProps<EmTagProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="span"
+    class="emerald-tag"
+    :data-elevation="elevation"
+    :data-tone="tone"
+    :data-variant="variant"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style scoped>
+.emerald-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  border-radius: 9999px;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* ─── Tone: outlined (white chip) — default ─────────── */
+.emerald-tag[data-tone="outlined"] {
+  height: 24px;
+  padding: 2px 10px 2px 6px;
+  background: #ffffff;
+  font-size: 12px;
+  line-height: 15px;
+  letter-spacing: -0.01em;
+}
+
+.emerald-tag[data-tone="outlined"]:not(:has(svg)) {
+  padding: 2px 10px;
+}
+
+/* ─── Tone: tinted (filled chip) ─────────────────────── */
+.emerald-tag[data-tone="tinted"] {
+  height: 24px;
+  padding: 2px 10px 2px 6px;
+  font-size: 11px;
+  line-height: 18px;
+  letter-spacing: -0.02em;
+}
+
+.emerald-tag[data-tone="tinted"]:not(:has(svg)) {
+  padding: 2px 10px;
+}
+
+/* ─── Icon sizing (slot content) ─────────────────────── */
+.emerald-tag :deep(svg) {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ─── Variant: neutral ───────────────────────────────── */
+.emerald-tag[data-variant="neutral"][data-tone="tinted"] {
+  background: var(--emerald-secondary-50, #f4f7f9);
+  border-color: rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.1);
+  color: var(--emerald-secondary-900, #4d5462);
+}
+
+.emerald-tag[data-variant="neutral"][data-tone="outlined"] {
+  border-color: var(--emerald-secondary-100, #ecf0f3);
+  color: var(--emerald-secondary-950, #2d3139);
+}
+
+.emerald-tag[data-variant="neutral"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.09);
+}
+
+.emerald-tag[data-variant="neutral"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-secondary-500-channels, 148 163 184) / 0.09);
+}
+
+/* ─── Variant: primary ───────────────────────────────── */
+.emerald-tag[data-variant="primary"][data-tone="tinted"] {
+  background: var(--emerald-primary-50, #f5f3ff);
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.1);
+  color: var(--emerald-primary-900, #361d95);
+}
+
+.emerald-tag[data-variant="primary"][data-tone="outlined"] {
+  border-color: var(--emerald-primary-100, #ede9fe);
+  color: var(--emerald-primary-950, #221065);
+}
+
+.emerald-tag[data-variant="primary"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.09);
+}
+
+.emerald-tag[data-variant="primary"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.09);
+}
+
+/* ─── Variant: success ───────────────────────────────── */
+.emerald-tag[data-variant="success"][data-tone="tinted"] {
+  background: var(--emerald-success-50, #f1fcf5);
+  border-color: rgb(var(--emerald-success-700-channels, 30 122 74) / 0.1);
+  color: var(--emerald-success-900, #194e34);
+}
+
+.emerald-tag[data-variant="success"][data-tone="outlined"] {
+  border-color: var(--emerald-success-100, #dff9eb);
+  color: var(--emerald-success-950, #082b1b);
+}
+
+.emerald-tag[data-variant="success"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-success-700-channels, 30 122 74) / 0.09);
+}
+
+.emerald-tag[data-variant="success"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-success-700-channels, 30 122 74) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-success-700-channels, 30 122 74) / 0.09);
+}
+
+/* ─── Variant: error ─────────────────────────────────── */
+.emerald-tag[data-variant="error"][data-tone="tinted"] {
+  background: var(--emerald-error-50, #fdf4f3);
+  border-color: rgb(var(--emerald-error-500-channels, 192 57 43) / 0.1);
+  color: var(--emerald-error-900, #782c24);
+}
+
+.emerald-tag[data-variant="error"][data-tone="outlined"] {
+  border-color: var(--emerald-error-100, #fce6e4);
+  color: var(--emerald-error-950, #41130e);
+}
+
+.emerald-tag[data-variant="error"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-error-500-channels, 192 57 43) / 0.09);
+}
+
+.emerald-tag[data-variant="error"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-error-500-channels, 192 57 43) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-error-500-channels, 192 57 43) / 0.09);
+}
+
+/* ─── Variant: warning ───────────────────────────────── */
+.emerald-tag[data-variant="warning"][data-tone="tinted"] {
+  background: var(--emerald-warning-50, #fbfaeb);
+  border-color: rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.1);
+  color: var(--emerald-warning-900, #663f1d);
+}
+
+.emerald-tag[data-variant="warning"][data-tone="outlined"] {
+  border-color: var(--emerald-warning-100, #f7f2ca);
+  color: var(--emerald-warning-950, #3b200d);
+}
+
+.emerald-tag[data-variant="warning"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.09);
+}
+
+.emerald-tag[data-variant="warning"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-warning-700-channels, 176 125 26) / 0.09);
+}
+
+/* ─── Variant: info ──────────────────────────────────── */
+.emerald-tag[data-variant="info"][data-tone="tinted"] {
+  background: var(--emerald-info-50, #f3f6fc);
+  border-color: rgb(var(--emerald-info-700-channels, 42 95 165) / 0.1);
+  color: var(--emerald-info-900, #1f375b);
+}
+
+.emerald-tag[data-variant="info"][data-tone="outlined"] {
+  border-color: var(--emerald-info-100, #e6edf8);
+  color: var(--emerald-info-950, #000000);
+}
+
+.emerald-tag[data-variant="info"][data-elevation="sm"] {
+  box-shadow: 0 3px 6px 0 rgb(var(--emerald-info-700-channels, 42 95 165) / 0.09);
+}
+
+.emerald-tag[data-variant="info"][data-elevation="lg"] {
+  box-shadow:
+    0 8px 20px 0 rgb(var(--emerald-info-700-channels, 42 95 165) / 0.13),
+    0 3px 6px 0 rgb(var(--emerald-info-700-channels, 42 95 165) / 0.09);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTag/index.ts b/packages/emerald/src/components/EmTag/index.ts
new file mode 100644
index 000000000..844832ca8
--- /dev/null
+++ b/packages/emerald/src/components/EmTag/index.ts
@@ -0,0 +1,2 @@
+export { default as EmTag } from './EmTag.vue'
+export type { EmTagProps } from './EmTag.vue'
diff --git a/packages/emerald/src/components/EmTextField/EmTextField.vue b/packages/emerald/src/components/EmTextField/EmTextField.vue
new file mode 100644
index 000000000..485140d6d
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextField.vue
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { InputRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { FormValidationRule, ValidateOn } from '@vuetify/v0'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmTextFieldProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    readonly?: MaybeRefOrGetter<boolean>
+    required?: boolean
+    name?: string
+    label?: string
+    type?: string
+    rules?: FormValidationRule[]
+    validateOn?: ValidateOn
+    error?: boolean
+    errorMessages?: string | string[]
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextField' })
+
+  const {
+    disabled = false,
+    readonly: _readonly = false,
+    required = false,
+    name,
+    label,
+    type = 'text',
+    rules = [],
+    validateOn = 'blur',
+    error = false,
+    errorMessages,
+    ...paperProps
+  } = defineProps<EmTextFieldProps>()
+
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-text-field"
+    :data-disabled="disabled || undefined"
+    :data-error="error || undefined"
+  >
+    <InputRoot
+      v-model="model"
+      :disabled
+      :error
+      :error-messages
+      :label
+      :name
+      :readonly="_readonly"
+      :required
+      :rules
+      :type
+      :validate-on
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </InputRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-text-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.emerald-text-field[data-error] .emerald-text-field__label {
+  color: var(--emerald-error-700, #b8302a);
+}
+
+.emerald-text-field[data-disabled] {
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue b/packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue
new file mode 100644
index 000000000..28030c865
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+  export interface EmTextFieldAppendProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldAppend' })
+</script>
+
+<template>
+  <span class="emerald-text-field__append">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-text-field__append {
+  display: inline-flex;
+  align-items: center;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldControl.vue b/packages/emerald/src/components/EmTextField/EmTextFieldControl.vue
new file mode 100644
index 000000000..ec24abb8c
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldControl.vue
@@ -0,0 +1,114 @@
+<script lang="ts">
+  // Framework
+  import { InputControl } from '@vuetify/v0'
+
+  export interface EmTextFieldControlProps {
+    placeholder?: string
+    autocomplete?: string
+    maxlength?: number
+    min?: number | string
+    max?: number | string
+    step?: number | string
+    inputmode?: string
+    pattern?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldControl' })
+
+  const {
+    placeholder,
+    autocomplete,
+    maxlength,
+    min,
+    max,
+    step,
+    inputmode,
+    pattern,
+  } = defineProps<EmTextFieldControlProps>()
+</script>
+
+<template>
+  <InputControl
+    :autocomplete
+    class="emerald-text-field__control"
+    :inputmode
+    :max
+    :maxlength
+    :min
+    :pattern
+    :placeholder
+    :step
+  >
+    <slot />
+  </InputControl>
+</template>
+
+<style>
+.emerald-text-field__control {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  margin: 0;
+  padding: 6px 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  color: #000000;
+  outline: none;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.emerald-text-field__control::placeholder {
+  color: #000000;
+  opacity: 0.3;
+}
+
+.emerald-text-field__control:hover:not([data-disabled]):not([data-focused]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.3);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12),
+    0 1px 5px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.2);
+}
+
+.emerald-text-field__control:focus,
+.emerald-text-field__control[data-focused] {
+  border-color: var(--emerald-primary-500, #7c5cf6);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12);
+}
+
+.emerald-text-field__control[data-disabled],
+.emerald-text-field[data-disabled] .emerald-text-field__control {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.05);
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.08);
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  cursor: not-allowed;
+}
+
+.emerald-text-field__control[data-disabled]::placeholder,
+.emerald-text-field[data-disabled] .emerald-text-field__control::placeholder {
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  opacity: 1;
+}
+
+.emerald-text-field__control[data-state="invalid"] {
+  border-color: var(--emerald-error-500, #e5484d);
+}
+
+.emerald-text-field__control[data-state="invalid"]:hover:not([data-disabled]):not([data-focused]) {
+  border-color: var(--emerald-error-700, #b8302a);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18),
+    0 1px 5px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.22);
+}
+
+.emerald-text-field__control[data-state="invalid"]:focus,
+.emerald-text-field__control[data-state="invalid"][data-focused] {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue b/packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue
new file mode 100644
index 000000000..0d0e6bdcb
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+  // Framework
+  import { InputDescription } from '@vuetify/v0'
+
+  export interface EmTextFieldDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldDescription' })
+</script>
+
+<template>
+  <InputDescription class="emerald-text-field__description">
+    <slot />
+  </InputDescription>
+</template>
+
+<style>
+.emerald-text-field__description {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldError.vue b/packages/emerald/src/components/EmTextField/EmTextFieldError.vue
new file mode 100644
index 000000000..24bdc3aa0
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldError.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+  // Framework
+  import { InputError } from '@vuetify/v0'
+
+  export interface EmTextFieldErrorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldError' })
+</script>
+
+<template>
+  <InputError class="emerald-text-field__error">
+    <template #default="{ errors }">
+      <slot :errors />
+    </template>
+  </InputError>
+</template>
+
+<style>
+.emerald-text-field__error {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  color: rgb(var(--emerald-error-500-channels, 229 72 77) / 0.85);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue b/packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue
new file mode 100644
index 000000000..b7fe99b1d
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Framework
+  import { useInputRoot } from '@vuetify/v0'
+
+  export interface EmTextFieldLabelProps {
+    for?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldLabel' })
+
+  const root = useInputRoot('v0:input:root')
+</script>
+
+<template>
+  <label
+    class="emerald-text-field__label"
+    :for="root.id as string"
+  >
+    <slot />
+  </label>
+</template>
+
+<style>
+.emerald-text-field__label {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--emerald-primary-950, #221065);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue b/packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue
new file mode 100644
index 000000000..58bfeb072
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+  export interface EmTextFieldPrependProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextFieldPrepend' })
+</script>
+
+<template>
+  <span class="emerald-text-field__prepend">
+    <slot />
+  </span>
+</template>
+
+<style>
+.emerald-text-field__prepend {
+  display: inline-flex;
+  align-items: center;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextField/index.ts b/packages/emerald/src/components/EmTextField/index.ts
new file mode 100644
index 000000000..753e85a62
--- /dev/null
+++ b/packages/emerald/src/components/EmTextField/index.ts
@@ -0,0 +1,20 @@
+export type { EmTextFieldProps } from './EmTextField.vue'
+export { default as EmTextField } from './EmTextField.vue'
+
+export type { EmTextFieldAppendProps } from './EmTextFieldAppend.vue'
+export { default as EmTextFieldAppend } from './EmTextFieldAppend.vue'
+
+export type { EmTextFieldControlProps } from './EmTextFieldControl.vue'
+export { default as EmTextFieldControl } from './EmTextFieldControl.vue'
+
+export type { EmTextFieldDescriptionProps } from './EmTextFieldDescription.vue'
+export { default as EmTextFieldDescription } from './EmTextFieldDescription.vue'
+
+export type { EmTextFieldErrorProps } from './EmTextFieldError.vue'
+export { default as EmTextFieldError } from './EmTextFieldError.vue'
+
+export type { EmTextFieldLabelProps } from './EmTextFieldLabel.vue'
+export { default as EmTextFieldLabel } from './EmTextFieldLabel.vue'
+
+export type { EmTextFieldPrependProps } from './EmTextFieldPrepend.vue'
+export { default as EmTextFieldPrepend } from './EmTextFieldPrepend.vue'
diff --git a/packages/emerald/src/components/EmTextarea/EmTextarea.vue b/packages/emerald/src/components/EmTextarea/EmTextarea.vue
new file mode 100644
index 000000000..ae7c21133
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextarea.vue
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { InputRoot } from '@vuetify/v0'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+  import type { FormValidationRule, ValidateOn } from '@vuetify/v0'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface EmTextareaProps extends V0PaperProps {
+    disabled?: MaybeRefOrGetter<boolean>
+    readonly?: MaybeRefOrGetter<boolean>
+    required?: boolean
+    name?: string
+    label?: string
+    rules?: FormValidationRule[]
+    validateOn?: ValidateOn
+    error?: boolean
+    errorMessages?: string | string[]
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextarea' })
+
+  const {
+    disabled = false,
+    readonly: _readonly = false,
+    required = false,
+    name,
+    label,
+    rules = [],
+    validateOn = 'blur',
+    error = false,
+    errorMessages,
+    ...paperProps
+  } = defineProps<EmTextareaProps>()
+
+  const model = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-textarea"
+    :data-disabled="disabled || undefined"
+    :data-error="error || undefined"
+  >
+    <InputRoot
+      v-model="model"
+      :disabled
+      :error
+      :error-messages
+      :label
+      :name
+      :readonly="_readonly"
+      :required
+      :rules
+      :validate-on
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </InputRoot>
+  </V0Paper>
+</template>
+
+<style>
+.emerald-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+}
+
+.emerald-textarea[data-error] .emerald-textarea__label {
+  color: var(--emerald-error-700, #b8302a);
+}
+
+.emerald-textarea[data-disabled] {
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaControl.vue b/packages/emerald/src/components/EmTextarea/EmTextareaControl.vue
new file mode 100644
index 000000000..35a8ccadd
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaControl.vue
@@ -0,0 +1,102 @@
+<script lang="ts">
+  // Framework
+  import { InputControl } from '@vuetify/v0'
+
+  export interface EmTextareaControlProps {
+    placeholder?: string
+    maxlength?: number
+    rows?: number
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaControl' })
+
+  const { placeholder, maxlength, rows = 4 } = defineProps<EmTextareaControlProps>()
+</script>
+
+<template>
+  <InputControl
+    as="textarea"
+    class="emerald-textarea__control"
+    :maxlength
+    :placeholder
+    :rows
+  >
+    <slot />
+  </InputControl>
+</template>
+
+<style>
+.emerald-textarea__control {
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
+  border-radius: 4px;
+  background: #ffffff;
+  color: var(--emerald-on-background, #1a1c1e);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  resize: vertical;
+  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+}
+
+.emerald-textarea__control::placeholder {
+  color: rgb(0 0 0 / 0.3);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.emerald-textarea__control:hover:not(:focus):not([disabled]):not([readonly]) {
+  border-color: rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.3);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12),
+    0 1px 5px 0 rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.2);
+}
+
+.emerald-textarea__control:focus {
+  outline: none;
+  border-color: var(--emerald-primary-500, #7c5cf6);
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.12);
+}
+
+.emerald-textarea__control[data-state="invalid"] {
+  border-color: var(--emerald-error-500, #e5484d);
+}
+
+.emerald-textarea__control[data-state="invalid"]:hover:not(:focus):not([disabled]):not([readonly]) {
+  border-color: var(--emerald-error-700, #b8302a);
+  box-shadow:
+    0 1px 3px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18),
+    0 1px 5px 0 rgb(var(--emerald-error-500-channels, 229 72 77) / 0.22);
+}
+
+.emerald-textarea__control[data-state="invalid"]:focus {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-error-500-channels, 229 72 77) / 0.18);
+}
+
+.emerald-textarea__control[disabled],
+.emerald-textarea__control[data-disabled] {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.05);
+  border-color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.08);
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.emerald-textarea__control[disabled]::placeholder,
+.emerald-textarea__control[data-disabled]::placeholder {
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.4);
+  opacity: 1;
+}
+
+.emerald-textarea__control[readonly],
+.emerald-textarea__control[data-readonly] {
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.04);
+  cursor: default;
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue b/packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue
new file mode 100644
index 000000000..6b7134136
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  // Framework
+  import { InputDescription } from '@vuetify/v0'
+
+  export interface EmTextareaDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaDescription' })
+</script>
+
+<template>
+  <InputDescription class="emerald-textarea__description">
+    <slot />
+  </InputDescription>
+</template>
+
+<style>
+.emerald-textarea__description {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaError.vue b/packages/emerald/src/components/EmTextarea/EmTextareaError.vue
new file mode 100644
index 000000000..4ad434d7c
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaError.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+  // Framework
+  import { InputError } from '@vuetify/v0'
+
+  export interface EmTextareaErrorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaError' })
+</script>
+
+<template>
+  <InputError class="emerald-textarea__error">
+    <template #default="{ errors }">
+      <slot :errors />
+    </template>
+  </InputError>
+</template>
+
+<style>
+.emerald-textarea__error {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  color: rgb(var(--emerald-error-500-channels, 229 72 77) / 0.85);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue b/packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue
new file mode 100644
index 000000000..a53d776f6
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // Framework
+  import { useInputRoot } from '@vuetify/v0'
+
+  export interface EmTextareaLabelProps {
+    for?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTextareaLabel' })
+
+  const root = useInputRoot('v0:input:root')
+</script>
+
+<template>
+  <label
+    class="emerald-textarea__label"
+    :for="root.id as string"
+  >
+    <slot />
+  </label>
+</template>
+
+<style>
+.emerald-textarea__label {
+  display: inline-block;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--emerald-on-background, #1a1c1e);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTextarea/index.ts b/packages/emerald/src/components/EmTextarea/index.ts
new file mode 100644
index 000000000..e71d4bd2c
--- /dev/null
+++ b/packages/emerald/src/components/EmTextarea/index.ts
@@ -0,0 +1,14 @@
+export type { EmTextareaProps } from './EmTextarea.vue'
+export { default as EmTextarea } from './EmTextarea.vue'
+
+export type { EmTextareaControlProps } from './EmTextareaControl.vue'
+export { default as EmTextareaControl } from './EmTextareaControl.vue'
+
+export type { EmTextareaDescriptionProps } from './EmTextareaDescription.vue'
+export { default as EmTextareaDescription } from './EmTextareaDescription.vue'
+
+export type { EmTextareaErrorProps } from './EmTextareaError.vue'
+export { default as EmTextareaError } from './EmTextareaError.vue'
+
+export type { EmTextareaLabelProps } from './EmTextareaLabel.vue'
+export { default as EmTextareaLabel } from './EmTextareaLabel.vue'
diff --git a/packages/emerald/src/components/EmToast/EmToast.vue b/packages/emerald/src/components/EmToast/EmToast.vue
new file mode 100644
index 000000000..0db5ef92b
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToast.vue
@@ -0,0 +1,168 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export type EmToastVariant = 'primary' | 'success' | 'error' | 'info' | 'warning' | 'neutral'
+
+  export interface EmToastProps extends V0PaperProps {
+    variant?: EmToastVariant
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToast' })
+
+  const { variant = 'primary', ...paperProps } = defineProps<EmToastProps>()
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    aria-live="polite"
+    as="div"
+    class="emerald-toast"
+    :data-variant="variant"
+    role="status"
+  >
+    <slot />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-toast {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  width: 258px;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: #ffffff;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  overflow: hidden;
+}
+
+.emerald-toast[data-variant="primary"] {
+  border-color: var(--emerald-primary-50, #f5f3ff);
+  box-shadow: 0 8px 20px 0 rgb(124 92 246 / 0.13), 0 3px 6px 0 rgb(124 92 246 / 0.09);
+  color: var(--emerald-primary-950, #221065);
+}
+
+.emerald-toast[data-variant="success"] {
+  border-color: var(--emerald-success-50, #f1fcf5);
+  box-shadow: 0 8px 20px 0 rgb(30 122 74 / 0.13), 0 3px 6px 0 rgb(30 122 74 / 0.09);
+  color: var(--emerald-success-950, #082b1b);
+}
+
+.emerald-toast[data-variant="error"] {
+  border-color: var(--emerald-error-50, #fdf4f3);
+  box-shadow: 0 8px 20px 0 rgb(192 57 43 / 0.13), 0 3px 6px 0 rgb(192 57 43 / 0.09);
+  color: var(--emerald-error-950, #41130e);
+}
+
+.emerald-toast[data-variant="info"] {
+  border-color: var(--emerald-info-50, #f3f6fc);
+  box-shadow: 0 8px 20px 0 rgb(42 95 165 / 0.13), 0 3px 6px 0 rgb(42 95 165 / 0.09);
+  color: #000000;
+}
+
+.emerald-toast[data-variant="warning"] {
+  border-color: var(--emerald-warning-50, #fbfaeb);
+  box-shadow: 0 8px 20px 0 rgb(176 125 26 / 0.13), 0 3px 6px 0 rgb(176 125 26 / 0.09);
+  color: var(--emerald-warning-950, #3b200d);
+}
+
+.emerald-toast[data-variant="neutral"] {
+  border-color: var(--emerald-secondary-50, #f4f7f9);
+  box-shadow: 0 8px 20px 0 rgb(148 163 184 / 0.13), 0 3px 6px 0 rgb(148 163 184 / 0.09);
+  color: var(--emerald-secondary-950, #2d3139);
+}
+
+.emerald-toast__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  color: #ffffff;
+  overflow: hidden;
+}
+
+.emerald-toast[data-variant="primary"] .emerald-toast__icon {
+  background: var(--emerald-primary-500, #7c5cf6);
+}
+
+.emerald-toast[data-variant="success"] .emerald-toast__icon {
+  background: var(--emerald-success-500, #1e7a4a);
+}
+
+.emerald-toast[data-variant="error"] .emerald-toast__icon {
+  background: var(--emerald-error-500, #c0392b);
+}
+
+.emerald-toast[data-variant="info"] .emerald-toast__icon {
+  background: var(--emerald-info-500, #2a5fa5);
+}
+
+.emerald-toast[data-variant="warning"] .emerald-toast__icon {
+  background: var(--emerald-warning-500, #b07d1a);
+}
+
+.emerald-toast[data-variant="neutral"] .emerald-toast__icon {
+  background: var(--emerald-secondary-500, #94a3b8);
+}
+
+.emerald-toast__body {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.emerald-toast__title {
+  font-weight: 700;
+  font-size: 12px;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emerald-toast__description {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: -0.12px;
+  opacity: 0.6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emerald-toast__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  align-self: flex-start;
+}
+
+.emerald-toast__close:hover {
+  opacity: 1;
+}
+</style>
diff --git a/packages/emerald/src/components/EmToast/EmToastBody.vue b/packages/emerald/src/components/EmToast/EmToastBody.vue
new file mode 100644
index 000000000..8bfb9b60d
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastBody.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastBodyProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastBody' })
+</script>
+
+<template>
+  <div class="emerald-toast__body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastClose.vue b/packages/emerald/src/components/EmToast/EmToastClose.vue
new file mode 100644
index 000000000..ccdcf3c68
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastClose.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export interface EmToastCloseProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastClose' })
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  function onClick (event: MouseEvent) {
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <button
+    aria-label="Close toast"
+    class="emerald-toast__close"
+    type="button"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastDescription.vue b/packages/emerald/src/components/EmToast/EmToastDescription.vue
new file mode 100644
index 000000000..2b5f1127e
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastDescription.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastDescriptionProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastDescription' })
+</script>
+
+<template>
+  <div class="emerald-toast__description">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastIcon.vue b/packages/emerald/src/components/EmToast/EmToastIcon.vue
new file mode 100644
index 000000000..a1d8b12e7
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastIconProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastIcon' })
+</script>
+
+<template>
+  <span aria-hidden="true" class="emerald-toast__icon">
+    <slot />
+  </span>
+</template>
diff --git a/packages/emerald/src/components/EmToast/EmToastTitle.vue b/packages/emerald/src/components/EmToast/EmToastTitle.vue
new file mode 100644
index 000000000..107aa265c
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/EmToastTitle.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export interface EmToastTitleProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmToastTitle' })
+</script>
+
+<template>
+  <div class="emerald-toast__title">
+    <slot />
+  </div>
+</template>
diff --git a/packages/emerald/src/components/EmToast/index.ts b/packages/emerald/src/components/EmToast/index.ts
new file mode 100644
index 000000000..12042a4e4
--- /dev/null
+++ b/packages/emerald/src/components/EmToast/index.ts
@@ -0,0 +1,17 @@
+export type { EmToastProps, EmToastVariant } from './EmToast.vue'
+export { default as EmToast } from './EmToast.vue'
+
+export type { EmToastBodyProps } from './EmToastBody.vue'
+export { default as EmToastBody } from './EmToastBody.vue'
+
+export type { EmToastCloseProps } from './EmToastClose.vue'
+export { default as EmToastClose } from './EmToastClose.vue'
+
+export type { EmToastDescriptionProps } from './EmToastDescription.vue'
+export { default as EmToastDescription } from './EmToastDescription.vue'
+
+export type { EmToastIconProps } from './EmToastIcon.vue'
+export { default as EmToastIcon } from './EmToastIcon.vue'
+
+export type { EmToastTitleProps } from './EmToastTitle.vue'
+export { default as EmToastTitle } from './EmToastTitle.vue'
diff --git a/packages/emerald/src/components/EmTooltip/EmTooltip.vue b/packages/emerald/src/components/EmTooltip/EmTooltip.vue
new file mode 100644
index 000000000..606963478
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/EmTooltip.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+  // Framework
+  import { PopoverRoot } from '@vuetify/v0'
+
+  export interface EmTooltipProps {
+    id?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTooltip' })
+
+  const { id } = defineProps<EmTooltipProps>()
+
+  const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <PopoverRoot
+    :id
+    v-model="model"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverRoot>
+</template>
diff --git a/packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue b/packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue
new file mode 100644
index 000000000..69d0bcd12
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+  // Framework
+  import { PopoverActivator, usePopoverContext } from '@vuetify/v0'
+
+  // Utilities
+  import { onScopeDispose } from 'vue'
+
+  export interface EmTooltipActivatorProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTooltipActivator' })
+
+  const popover = usePopoverContext()
+
+  let openTimer: ReturnType<typeof setTimeout> | null = null
+  let closeTimer: ReturnType<typeof setTimeout> | null = null
+
+  function clearTimers () {
+    if (openTimer) clearTimeout(openTimer)
+    if (closeTimer) clearTimeout(closeTimer)
+    openTimer = null
+    closeTimer = null
+  }
+
+  onScopeDispose(clearTimers)
+
+  function onEnter () {
+    clearTimers()
+    openTimer = setTimeout(() => popover.open(), 200)
+  }
+
+  function onLeave () {
+    clearTimers()
+    closeTimer = setTimeout(() => popover.close(), 100)
+  }
+</script>
+
+<template>
+  <PopoverActivator
+    class="emerald-tooltip__activator"
+    @blur="onLeave"
+    @focus="onEnter"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </PopoverActivator>
+</template>
diff --git a/packages/emerald/src/components/EmTooltip/EmTooltipContent.vue b/packages/emerald/src/components/EmTooltip/EmTooltipContent.vue
new file mode 100644
index 000000000..5c06b0276
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/EmTooltipContent.vue
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Framework
+  import { PopoverContent, usePopoverContext } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmTooltipContentProps extends V0PaperProps {
+    positionArea?: string
+    positionTry?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmTooltipContent' })
+
+  const {
+    positionArea = 'top',
+    positionTry = 'most-width top',
+    ...paperProps
+  } = defineProps<EmTooltipContentProps>()
+
+  const context = usePopoverContext()
+  const side = toRef(() => positionArea.split(' ')[0] ?? 'top')
+</script>
+
+<template>
+  <PopoverContent
+    :id="context.id"
+    class="emerald-tooltip__popover"
+    :position-area
+    :position-try
+  >
+    <V0Paper
+      v-bind="paperProps"
+      as="div"
+      class="emerald-tooltip__content"
+      :data-side="side"
+      role="tooltip"
+    >
+      <span class="emerald-tooltip__label">
+        <slot />
+      </span>
+
+      <span aria-hidden="true" class="emerald-tooltip__arrow" />
+    </V0Paper>
+  </PopoverContent>
+</template>
+
+<style>
+.emerald-tooltip__popover {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  overflow: visible;
+}
+
+.emerald-tooltip__popover::backdrop {
+  background: transparent;
+}
+
+.emerald-tooltip__content {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  background: var(--emerald-neutral-600);
+  border-radius: 6px;
+  box-shadow:
+    0 2px 4px 0 rgba(5, 0, 18, 0.1),
+    0 3px 8px 0 rgba(5, 0, 18, 0.13);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: normal;
+  text-align: center;
+  color: #ffffff;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.emerald-tooltip__content[data-side="top"] {
+  transform: translateY(-9px);
+}
+.emerald-tooltip__content[data-side="bottom"] {
+  transform: translateY(9px);
+}
+.emerald-tooltip__content[data-side="left"] {
+  transform: translateX(-9px);
+}
+.emerald-tooltip__content[data-side="right"] {
+  transform: translateX(9px);
+}
+
+.emerald-tooltip__label {
+  display: inline-block;
+}
+
+.emerald-tooltip__arrow {
+  position: absolute;
+  left: 50%;
+  width: 12px;
+  height: 6px;
+  background: var(--emerald-neutral-600);
+  transform: translateX(-50%);
+}
+
+/* Arrow points toward the activator (opposite of tooltip's side) */
+.emerald-tooltip__content[data-side="top"] .emerald-tooltip__arrow {
+  bottom: -5px;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+.emerald-tooltip__content[data-side="bottom"] .emerald-tooltip__arrow {
+  top: -5px;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+.emerald-tooltip__content[data-side="left"] .emerald-tooltip__arrow {
+  top: 50%;
+  right: -8px;
+  left: auto;
+  width: 6px;
+  height: 12px;
+  transform: translateY(-50%);
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+.emerald-tooltip__content[data-side="right"] .emerald-tooltip__arrow {
+  top: 50%;
+  left: -8px;
+  width: 6px;
+  height: 12px;
+  transform: translateY(-50%);
+  clip-path: polygon(100% 0, 100% 100%, 0 50%);
+}
+</style>
diff --git a/packages/emerald/src/components/EmTooltip/index.ts b/packages/emerald/src/components/EmTooltip/index.ts
new file mode 100644
index 000000000..26e2d73fc
--- /dev/null
+++ b/packages/emerald/src/components/EmTooltip/index.ts
@@ -0,0 +1,8 @@
+export type { EmTooltipProps } from './EmTooltip.vue'
+export { default as EmTooltip } from './EmTooltip.vue'
+
+export type { EmTooltipActivatorProps } from './EmTooltipActivator.vue'
+export { default as EmTooltipActivator } from './EmTooltipActivator.vue'
+
+export type { EmTooltipContentProps } from './EmTooltipContent.vue'
+export { default as EmTooltipContent } from './EmTooltipContent.vue'
diff --git a/packages/emerald/src/components/EmUpload/EmUpload.vue b/packages/emerald/src/components/EmUpload/EmUpload.vue
new file mode 100644
index 000000000..825427235
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUpload.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { V0Paper } from '@vuetify/paper'
+
+  // Types
+  import type { V0PaperProps } from '@vuetify/paper'
+
+  export interface EmUploadProps extends V0PaperProps {
+    accept?: string
+    multiple?: boolean
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUpload' })
+
+  // TODO(emerald): flesh out vs createQueue for upload progress/list when v0 primitive lands
+  const {
+    accept,
+    multiple = false,
+    disabled = false,
+    ...paperProps
+  } = defineProps<EmUploadProps>()
+
+  const model = defineModel<File[]>({ default: () => [] })
+</script>
+
+<template>
+  <V0Paper
+    v-bind="paperProps"
+    as="div"
+    class="emerald-upload"
+    :data-disabled="disabled || undefined"
+  >
+    <slot
+      :accept
+      :disabled
+      :files="model"
+      :multiple
+    />
+  </V0Paper>
+</template>
+
+<style>
+.emerald-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  color: var(--emerald-on-background);
+}
+
+.emerald-upload[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadDropzone.vue b/packages/emerald/src/components/EmUpload/EmUploadDropzone.vue
new file mode 100644
index 000000000..3878615a4
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadDropzone.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  export interface EmUploadDropzoneProps {
+    disabled?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadDropzone' })
+
+  const { disabled = false } = defineProps<EmUploadDropzoneProps>()
+
+  const emit = defineEmits<{
+    drop: [files: File[]]
+  }>()
+
+  const dragging = shallowRef(false)
+
+  function onDragOver (e: DragEvent) {
+    e.preventDefault()
+    if (!disabled) dragging.value = true
+  }
+
+  function onDragLeave () {
+    dragging.value = false
+  }
+
+  function onDrop (e: DragEvent) {
+    e.preventDefault()
+    dragging.value = false
+    if (disabled) return
+    const files = Array.from(e.dataTransfer?.files ?? [])
+    emit('drop', files)
+  }
+</script>
+
+<template>
+  <div
+    class="emerald-upload__dropzone"
+    :data-disabled="disabled || undefined"
+    :data-dragging="dragging || undefined"
+    @dragleave="onDragLeave"
+    @dragover="onDragOver"
+    @drop="onDrop"
+  >
+    <slot :dragging />
+  </div>
+</template>
+
+<style>
+.emerald-upload__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px 16px;
+  border: 1.5px dashed rgb(var(--emerald-neutral-channels, 26 28 30) / 0.2);
+  border-radius: 12px;
+  background: var(--emerald-surface, #f5f4ff);
+  color: var(--emerald-on-background, #000);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  overflow: clip;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.emerald-upload__dropzone:hover:not([data-disabled]) {
+  border-color: rgb(var(--emerald-primary-500-channels) / 0.5);
+  background: rgb(var(--emerald-primary-500-channels) / 0.06);
+}
+
+.emerald-upload__dropzone[data-dragging] {
+  border-color: var(--emerald-primary-500);
+  background: rgb(var(--emerald-primary-500-channels) / 0.10);
+  transform: scale(0.99);
+}
+
+.emerald-upload__dropzone :deep(svg) {
+  color: var(--emerald-primary-500);
+}
+
+.emerald-upload__dropzone[data-disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadInput.vue b/packages/emerald/src/components/EmUpload/EmUploadInput.vue
new file mode 100644
index 000000000..431a6f54a
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadInput.vue
@@ -0,0 +1,48 @@
+<script lang="ts">
+  export interface EmUploadInputProps {
+    accept?: string
+    multiple?: boolean
+    disabled?: boolean
+    name?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadInput' })
+
+  const {
+    accept,
+    multiple = false,
+    disabled = false,
+    name,
+  } = defineProps<EmUploadInputProps>()
+
+  const emit = defineEmits<{
+    change: [files: File[]]
+  }>()
+
+  function onChange (e: Event) {
+    const target = e.target as HTMLInputElement
+    const files = Array.from(target.files ?? [])
+    emit('change', files)
+  }
+</script>
+
+<template>
+  <input
+    :accept
+    class="emerald-upload__input"
+    :disabled
+    :multiple
+    :name
+    type="file"
+    @change="onChange"
+  >
+</template>
+
+<style>
+.emerald-upload__input {
+  font: inherit;
+  color: inherit;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadItem.vue b/packages/emerald/src/components/EmUpload/EmUploadItem.vue
new file mode 100644
index 000000000..ee8375e52
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadItem.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+  export interface EmUploadItemProps {
+    name?: string
+    size?: number
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadItem' })
+
+  const { name, size } = defineProps<EmUploadItemProps>()
+</script>
+
+<template>
+  <li class="emerald-upload__item">
+    <slot :name :size>
+      <span>{{ name }}</span>
+      <span v-if="size != null" class="emerald-upload__item-size">{{ size }} B</span>
+    </slot>
+  </li>
+</template>
+
+<style>
+.emerald-upload__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.04);
+}
+
+.emerald-upload__item-size {
+  margin-left: auto;
+  color: rgb(var(--emerald-neutral-channels, 26 28 30) / 0.6);
+  font-size: 12px;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/EmUploadList.vue b/packages/emerald/src/components/EmUpload/EmUploadList.vue
new file mode 100644
index 000000000..cbd026b18
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/EmUploadList.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export interface EmUploadListProps {}
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'EmUploadList' })
+</script>
+
+<template>
+  <ul class="emerald-upload__list">
+    <slot />
+  </ul>
+</template>
+
+<style>
+.emerald-upload__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+</style>
diff --git a/packages/emerald/src/components/EmUpload/index.ts b/packages/emerald/src/components/EmUpload/index.ts
new file mode 100644
index 000000000..8540ac254
--- /dev/null
+++ b/packages/emerald/src/components/EmUpload/index.ts
@@ -0,0 +1,14 @@
+export type { EmUploadProps } from './EmUpload.vue'
+export { default as EmUpload } from './EmUpload.vue'
+
+export type { EmUploadDropzoneProps } from './EmUploadDropzone.vue'
+export { default as EmUploadDropzone } from './EmUploadDropzone.vue'
+
+export type { EmUploadInputProps } from './EmUploadInput.vue'
+export { default as EmUploadInput } from './EmUploadInput.vue'
+
+export type { EmUploadItemProps } from './EmUploadItem.vue'
+export { default as EmUploadItem } from './EmUploadItem.vue'
+
+export type { EmUploadListProps } from './EmUploadList.vue'
+export { default as EmUploadList } from './EmUploadList.vue'
diff --git a/packages/emerald/src/components/index.ts b/packages/emerald/src/components/index.ts
new file mode 100644
index 000000000..f5f26bf83
--- /dev/null
+++ b/packages/emerald/src/components/index.ts
@@ -0,0 +1,35 @@
+export * from './EmAccordion'
+export * from './EmAlert'
+export * from './EmAutoComplete'
+export * from './EmAvatar'
+export * from './EmBadge'
+export * from './EmBreadcrumb'
+export * from './EmButton'
+export * from './EmCard'
+export * from './EmCarousel'
+export * from './EmCheckbox'
+export * from './EmContainer'
+export * from './EmDatePicker'
+export * from './EmDialog'
+export * from './EmDivider'
+export * from './EmFlex'
+export * from './EmForm'
+export * from './EmGrid'
+export * from './EmList'
+export * from './EmLoading'
+export * from './EmMenu'
+export * from './EmPagination'
+export * from './EmProgress'
+export * from './EmRadio'
+export * from './EmSelect'
+export * from './EmSlider'
+export * from './EmStepper'
+export * from './EmSwitch'
+export * from './EmTable'
+export * from './EmTabs'
+export * from './EmTag'
+export * from './EmTextarea'
+export * from './EmTextField'
+export * from './EmToast'
+export * from './EmTooltip'
+export * from './EmUpload'
diff --git a/packages/emerald/src/index.ts b/packages/emerald/src/index.ts
new file mode 100644
index 000000000..049366421
--- /dev/null
+++ b/packages/emerald/src/index.ts
@@ -0,0 +1,4 @@
+export * from './adapter'
+export * from './components'
+export * from './plugin'
+export * from './theme'
diff --git a/packages/emerald/src/plugin.ts b/packages/emerald/src/plugin.ts
new file mode 100644
index 000000000..c51ccadd8
--- /dev/null
+++ b/packages/emerald/src/plugin.ts
@@ -0,0 +1,106 @@
+// Framework
+import {
+  createHydrationPlugin,
+  createLocalePlugin,
+  createLoggerPlugin,
+  createStoragePlugin,
+  createThemePlugin,
+} from '@vuetify/v0'
+
+// Adapters
+import { EmeraldStyleSheetAdapter } from './adapter'
+import {
+  error,
+  info,
+  neutral,
+  primary,
+  secondary,
+  success,
+  warning,
+} from './theme'
+
+// Types
+import type {
+  LocalePluginOptions,
+  LoggerPluginOptions,
+  StoragePluginOptions,
+  ThemePluginOptions,
+} from '@vuetify/v0'
+import type { App, Plugin } from 'vue'
+
+export interface EmeraldPluginOptions {
+  theme?: ThemePluginOptions | false
+  locale?: LocalePluginOptions | false
+  logger?: LoggerPluginOptions | false
+  storage?: StoragePluginOptions | false
+  hydration?: boolean
+}
+
+type Scale = Record<string, string>
+
+function scale (name: string, values: Scale): Scale {
+  const out: Scale = {}
+  for (const [key, val] of Object.entries(values)) {
+    out[key === 'DEFAULT' ? name : `${name}-${key}`] = val
+  }
+  return out
+}
+
+export const emeraldColors: Record<string, string> = {
+  ...scale('primary', primary),
+  ...scale('secondary', secondary),
+  ...scale('success', success),
+  ...scale('warning', warning),
+  ...scale('error', error),
+  ...scale('info', info),
+  ...scale('neutral', neutral),
+  'background': '#FAF9FF',
+  'surface': '#F5F4FF',
+  'surface-tint': '#EBE9FE',
+  'divider': '#DEE2E6',
+  'on-primary': '#FFFFFF',
+  'on-background': '#1A1C1E',
+  'on-surface': '#1A1C1E',
+}
+
+function emeraldThemeDefaults (): ThemePluginOptions {
+  return {
+    target: 'html',
+    default: 'emerald',
+    adapter: new EmeraldStyleSheetAdapter(),
+    themes: {
+      emerald: { colors: emeraldColors },
+    },
+  }
+}
+
+export function createEmeraldPlugin (options: EmeraldPluginOptions = {}): Plugin {
+  return {
+    install (app: App) {
+      if (options.hydration !== false) {
+        app.use(createHydrationPlugin())
+      }
+
+      if (options.logger !== false) {
+        app.use(createLoggerPlugin(options.logger || {}))
+      }
+
+      if (options.storage !== false) {
+        app.use(createStoragePlugin(options.storage || {}))
+      }
+
+      if (options.locale !== false) {
+        app.use(createLocalePlugin(options.locale || { default: 'en' }))
+      }
+
+      if (options.theme !== false) {
+        const defaults = emeraldThemeDefaults()
+        const theme = options.theme
+          ? { ...defaults, ...options.theme, themes: { ...defaults.themes, ...options.theme.themes } }
+          : defaults
+
+        app.use(createThemePlugin(theme))
+      }
+    },
+  }
+}
diff --git a/packages/emerald/src/theme.ts b/packages/emerald/src/theme.ts
new file mode 100644
index 000000000..74538e5fe
--- /dev/null
+++ b/packages/emerald/src/theme.ts
@@ -0,0 +1,224 @@
+/**
+ * Emerald Design System — Token Definitions
+ *
+ * Extracted from Juan's Figma spec (March 2026).
+ * These tokens feed into UnoCSS theme config so that
+ * utility classes like `bg-primary`, `text-error-600`, `rounded-lg`
+ * resolve to Emerald's design language.
+ */
+
+// ──────────────────────────────────────────────
+// Brand
+// ──────────────────────────────────────────────
+
+export const primary = {
+  50: '#F5F3FF',
+  100: '#EDE9FE',
+  200: '#DED6FE',
+  300: '#C4B5FD',
+  400: '#A28BFA',
+  500: '#7C5CF6',
+  600: '#5F3AED',
+  700: '#4D28D9',
+  800: '#4021B6',
+  900: '#361D95',
+  950: '#221065',
+  DEFAULT: '#7C5CF6',
+} as const
+
+export const secondary = {
+  50: '#F4F7F9',
+  100: '#ECF0F3',
+  200: '#DCE4E9',
+  300: '#C6D2DB',
+  400: '#AEBCCB',
+  500: '#94A3B8',
+  600: '#828FA9',
+  700: '#6F7A93',
+  800: '#5C6677',
+  900: '#4D5462',
+  950: '#2D3139',
+  DEFAULT: '#94A3B8',
+} as const
+
+// ──────────────────────────────────────────────
+// Surfaces
+// ──────────────────────────────────────────────
+
+export const background = {
+  DEFAULT: '#FAF9FF',
+  dark: '#1A1C1E',
+} as const
+
+export const surface = {
+  DEFAULT: '#F5F4FF',
+  dark: '#1E1C28',
+} as const
+
+// ──────────────────────────────────────────────
+// Semantics
+// ──────────────────────────────────────────────
+
+export const success = {
+  50: '#F1FCF5',
+  100: '#DFF9EB',
+  200: '#C0F2D6',
+  300: '#8EE7B7',
+  400: '#56D290',
+  500: '#2FB86F',
+  600: '#219859',
+  700: '#1E7A4A',
+  800: '#1C5F3C',
+  900: '#194E34',
+  950: '#082B1B',
+  DEFAULT: '#1E7A4A',
+} as const
+
+export const warning = {
+  50: '#FBFAEB',
+  100: '#F7F2CA',
+  200: '#F1E497',
+  300: '#E8D05C',
+  400: '#E0B92F',
+  500: '#D0A322',
+  600: '#B07D1A',
+  700: '#8F5D19',
+  800: '#774A1C',
+  900: '#663F1D',
+  950: '#3B200D',
+  DEFAULT: '#B07D1A',
+} as const
+
+export const error = {
+  50: '#FDF4F3',
+  100: '#FCE6E4',
+  200: '#FAD2CE',
+  300: '#F6B2AB',
+  400: '#EF857A',
+  500: '#E35E50',
+  600: '#CF4233',
+  700: '#C0392B',
+  800: '#902E24',
+  900: '#782C24',
+  950: '#41130E',
+  DEFAULT: '#C0392B',
+} as const
+
+export const info = {
+  50: '#F3F6FC',
+  100: '#E6EDF8',
+  200: '#C7D9F0',
+  300: '#96B8E3',
+  400: '#5E93D2',
+  500: '#3977BE',
+  600: '#2A5FA5',
+  700: '#224A82',
+  800: '#20416C',
+  900: '#1F375B',
+  950: '#000000',
+  DEFAULT: '#2A5FA5',
+} as const
+
+// ──────────────────────────────────────────────
+// Border
+// ──────────────────────────────────────────────
+
+export const border = {
+  DEFAULT: '#94A3B8',
+} as const
+
+export const borderRadius = {
+  'none': '0',
+  'xs': '2px',
+  'sm': '4px',
+  'DEFAULT': '6px',
+  'md': '8px',
+  'lg': '12px',
+  'xl': '16px',
+  '2xl': '24px',
+  'full': '9999px',
+} as const
+
+export const borderWidth = {
+  DEFAULT: '1px',
+  0: '0',
+  1: '1px',
+  2: '2px',
+  3: '3px',
+  4: '4px',
+  6: '6px',
+} as const
+
+// ──────────────────────────────────────────────
+// Shadows
+// ──────────────────────────────────────────────
+
+export const shadow = {
+  xs: '0px 1px 2px 0px rgba(30, 28, 40, 0.05)',
+  sm: '0px 1px 3px 0px rgba(30, 28, 40, 0.10), 0px 1px 2px -1px rgba(30, 28, 40, 0.10)',
+  DEFAULT: '0px 4px 6px -1px rgba(30, 28, 40, 0.10), 0px 2px 4px -2px rgba(30, 28, 40, 0.10)',
+  md: '0px 4px 6px -1px rgba(30, 28, 40, 0.10), 0px 2px 4px -2px rgba(30, 28, 40, 0.10)',
+  lg: '0px 10px 15px -3px rgba(30, 28, 40, 0.10), 0px 4px 6px -4px rgba(30, 28, 40, 0.10)',
+  xl: '0px 20px 25px -5px rgba(30, 28, 40, 0.10), 0px 8px 10px -6px rgba(30, 28, 40, 0.10)',
+} as const
+
+// ──────────────────────────────────────────────
+// Typography
+// ──────────────────────────────────────────────
+
+export const fontFamily = {
+  sans: 'Manrope, system-ui, -apple-system, sans-serif',
+} as const
+
+export const fontSize = {
+  'xs': ['12px', { lineHeight: '1.55', letterSpacing: '0.009em', fontWeight: '400' }],
+  'sm': ['14px', { lineHeight: '1.55', fontWeight: '400' }],
+  'md': ['16px', { lineHeight: '1.60', fontWeight: '400' }],
+  'lg': ['20px', { lineHeight: '1.30', letterSpacing: '-0.01em', fontWeight: '600' }],
+  'xl': ['28px', { lineHeight: '1.15', letterSpacing: '-0.015em', fontWeight: '600' }],
+  '2xl': ['40px', { lineHeight: '1.05', letterSpacing: '-0.05em', fontWeight: '700' }],
+} as const
+
+// ──────────────────────────────────────────────
+// Neutral (dark text/foreground)
+// ──────────────────────────────────────────────
+
+export const neutral = {
+  DEFAULT: '#1A1C1E',
+  50: '#FAF9FF',
+  100: '#F5F4FF',
+  200: '#ECF0F3',
+  300: '#DEE2E6',
+  400: '#94A3B8',
+  500: '#4D5462',
+  600: '#2D3139',
+  700: '#1E1C28',
+  800: '#1A1C1E',
+  900: '#000000',
+} as const
+
+// ──────────────────────────────────────────────
+// Full theme export
+// ──────────────────────────────────────────────
+
+export const emeraldTheme = {
+  colors: {
+    primary,
+    secondary,
+    success,
+    warning,
+    error,
+    info,
+    neutral,
+    background,
+    surface,
+    border,
+    black: '#000000',
+    white: '#FFFFFF',
+  },
+  borderRadius,
+  borderWidth,
+  boxShadow: shadow,
+  fontFamily,
+  fontSize,
+} as const
diff --git a/packages/emerald/src/vite-env.d.ts b/packages/emerald/src/vite-env.d.ts
new file mode 100644
index 000000000..99bbbfa0d
--- /dev/null
+++ b/packages/emerald/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+declare const __DEV__: boolean
+declare const __VERSION__: string
+declare const __VITE_LOGGER_ENABLED__: string
diff --git a/packages/emerald/tsconfig.json b/packages/emerald/tsconfig.json
new file mode 100644
index 000000000..912ec8c59
--- /dev/null
+++ b/packages/emerald/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "customConditions": ["development"],
+    "paths": {
+      "#emerald/*": ["./src/*"],
+      "#emerald": ["./src"],
+      "#paper/*": ["../paper/src/*"],
+      "#paper": ["../paper/src"],
+      "#v0": ["../0/src"],
+      "#v0/*": ["../0/src/*"]
+    },
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "assumeChangesOnlyAffectDirectDependencies": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "esnext",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
+}
diff --git a/packages/emerald/tsdown.config.mts b/packages/emerald/tsdown.config.mts
new file mode 100644
index 000000000..d2f3564ca
--- /dev/null
+++ b/packages/emerald/tsdown.config.mts
@@ -0,0 +1,36 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'tsdown/config'
+import Vue from 'unplugin-vue/rolldown'
+
+import pkg from './package.json' with { type: 'json' }
+
+const v0 = fileURLToPath(new URL('../0/src', import.meta.url))
+const paper = fileURLToPath(new URL('../paper/src', import.meta.url))
+const emerald = fileURLToPath(new URL('src', import.meta.url))
+const __VERSION__ = JSON.stringify(pkg.version)
+
+export default defineConfig({
+  plugins: [
+    Vue({ isProduction: true }),
+  ],
+  dts: {
+    vue: true,
+  },
+  define: {
+    __DEV__: 'process.env.NODE_ENV !== \'production\'',
+    __VITE_LOGGER_ENABLED__: 'process.env.VITE_LOGGER_ENABLED',
+    __VUE_OPTIONS_API__: 'true',
+    __VUE_PROD_DEVTOOLS__: 'false',
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+    __VERSION__,
+  },
+  name: 'paper/emerald',
+  exports: {
+    devExports: 'development',
+  },
+  alias: {
+    '#v0': v0,
+    '#paper': paper,
+    '#emerald': emerald,
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a97f28389..c35ce4277 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,9 @@ catalogs:
     '@octokit/openapi-types':
       specifier: ^27.0.0
       version: 27.0.0
+    '@phosphor-icons/vue':
+      specifier: ^2.2.1
+      version: 2.2.1
     '@resvg/resvg-js':
       specifier: ^2.6.2
       version: 2.6.2
@@ -525,6 +528,12 @@ importers:
 
   dev:
     dependencies:
+      '@paper/emerald':
+        specifier: workspace:*
+        version: link:../packages/emerald
+      '@phosphor-icons/vue':
+        specifier: 'catalog:'
+        version: 2.2.1(vue@3.5.33(typescript@6.0.3))
       '@vuetify/paper':
         specifier: workspace:*
         version: link:../packages/paper
@@ -618,6 +627,28 @@ importers:
         specifier: 'catalog:'
         version: 0.5.1
 
+  packages/emerald:
+    dependencies:
+      '@vuetify/paper':
+        specifier: workspace:*
+        version: link:../paper
+      '@vuetify/v0':
+        specifier: workspace:*
+        version: link:../0
+      vue:
+        specifier: '>=3.3.0'
+        version: 3.5.33(typescript@6.0.3)
+    devDependencies:
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.21.10(@tsdown/css@0.21.10)(oxc-resolver@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0))(synckit@0.11.12)(typescript@6.0.3)(vue-tsc@3.2.7(typescript@6.0.3))
+      typescript:
+        specifier: 'catalog:'
+        version: 6.0.3
+      unplugin-vue:
+        specifier: 'catalog:'
+        version: 7.2.0(@types/node@25.6.0)(esbuild@0.27.4)(jiti@2.6.1)(sass-embedded@1.99.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(vue@3.5.33(typescript@6.0.3))(yaml@2.8.3)
+
   packages/paper:
     dependencies:
       '@vuetify/v0':
@@ -2295,6 +2326,12 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
+  '@phosphor-icons/vue@2.2.1':
+    resolution: {integrity: sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      vue: '>=3.2.39'
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -8681,6 +8718,10 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
+  '@phosphor-icons/vue@2.2.1(vue@3.5.33(typescript@6.0.3))':
+    dependencies:
+      vue: 3.5.33(typescript@6.0.3)
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -9949,7 +9990,7 @@ snapshots:
       domhandler: 5.0.3
       htmlparser2: 10.1.0
       picocolors: 1.1.1
-      postcss: 8.5.8
+      postcss: 8.5.14
       postcss-media-query-parser: 0.2.3
     optional: true
 
@@ -13335,7 +13376,7 @@ snapshots:
 
   unhead@2.1.12:
     dependencies:
-      hookable: 6.1.0
+      hookable: 6.1.1
 
   unhead@2.1.13:
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 3b27b2284..e3e014988 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -14,6 +14,7 @@ catalog:
   '@mdi/js': npm:mdi-js-es@7.4.47
   '@octokit/core': ^7.0.6
   '@octokit/openapi-types': ^27.0.0
+  '@phosphor-icons/vue': ^2.2.1
   '@resvg/resvg-js': ^2.6.2
   '@shikijs/langs': ^4.0.2
   '@shikijs/markdown-it': ^4.0.2

From 7a6991794ac21e62d5a572c9e1b2ef2043c77a56 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 12 May 2026 13:30:47 -0500
Subject: [PATCH 2/2] chore(dev): wire Emerald kitchen sink at /emerald

Adds the EmeraldKitchenSink page that renders every component family at
least once for visual verification. Registers a /emerald route in
dev/src/main.ts, exposes the emerald components directory and @paper/
emerald alias in dev/vite.config.ts, and lists @paper/emerald +
@phosphor-icons/vue as dev workspace deps.

Auto-imports (components.d.ts, composables.d.ts) regenerated to capture
the new Em* components and adapter exports surfaced by recent v0
changes.
---
 dev/package.json               |   2 +
 dev/src/EmeraldKitchenSink.vue | 241 +++++++++++++++++++++++++++++++++
 dev/src/components.d.ts        | 162 ++++++++++++++++++++++
 dev/src/composables.d.ts       |  83 +++++++++---
 dev/src/main.ts                |   8 +-
 dev/vite.config.ts             |   2 +
 6 files changed, 478 insertions(+), 20 deletions(-)

diff --git a/dev/package.json b/dev/package.json
index aad2f4d48..75859959e 100644
--- a/dev/package.json
+++ b/dev/package.json
@@ -20,6 +20,8 @@
     "vue-router": "catalog:"
   },
   "dependencies": {
+    "@paper/emerald": "workspace:*",
+    "@phosphor-icons/vue": "catalog:",
     "@vuetify/paper": "workspace:*",
     "@vuetify/v0": "workspace:*",
     "vue": "catalog:"
diff --git a/dev/src/EmeraldKitchenSink.vue b/dev/src/EmeraldKitchenSink.vue
index 6922c7ab6..943b48e57 100644
--- a/dev/src/EmeraldKitchenSink.vue
+++ b/dev/src/EmeraldKitchenSink.vue
@@ -38,11 +38,13 @@
 
     <section>
       <h2>Button</h2>
+
       <div class="row">
         <EmButton size="sm">Small</EmButton>
         <EmButton size="md">Medium</EmButton>
         <EmButton size="lg">Large</EmButton>
       </div>
+
       <div class="row">
         <EmButton disabled>Disabled</EmButton>
         <EmButton loading>Loading</EmButton>
@@ -52,6 +54,7 @@
 
     <section>
       <h2>Container</h2>
+
       <EmContainer class="sink-demo-surface" size="md">
         <p>Container size=md (max-width 768px)</p>
       </EmContainer>
@@ -78,30 +81,37 @@
 
       <div class="row vertical-dividers">
         <span>Left</span>
+
         <EmDivider orientation="vertical">
           <EmDividerLine />
         </EmDivider>
+
         <span>Middle</span>
+
         <EmDivider orientation="vertical">
           <EmDividerLine />
           <EmDividerLabel>Or</EmDividerLabel>
           <EmDividerLine />
         </EmDivider>
+
         <span>Right</span>
       </div>
     </section>
 
     <section>
       <h2>Card</h2>
+
       <div class="row">
         <EmCard style="width: 520px;">
           <EmCardHeader>
             <EmCardTitle>Preferences</EmCardTitle>
             <EmCardSubtitle>Customize your Emerald experience</EmCardSubtitle>
           </EmCardHeader>
+
           <EmCardBody>
             Emerald introduces a token system structured in three levels: primitive, semantic, and component.
           </EmCardBody>
+
           <EmCardFooter>
             <EmButton>Save changes</EmButton>
           </EmCardFooter>
@@ -112,6 +122,7 @@
             <EmCardTitle>Hoverable card</EmCardTitle>
             <EmCardSubtitle>Hover to see the primary-tinted border and shadow.</EmCardSubtitle>
           </EmCardHeader>
+
           <EmCardBody>
             When `hoverable` is set, the card lifts on mouseover with a neutral drop shadow and primary-500 border.
           </EmCardBody>
@@ -125,11 +136,13 @@
 
     <section>
       <h2>Flex</h2>
+
       <EmFlex class="sink-demo-surface" :gap="12">
         <div class="sink-box">A</div>
         <div class="sink-box">B</div>
         <div class="sink-box">C</div>
       </EmFlex>
+
       <EmFlex class="sink-demo-surface" direction="column" :gap="8" style="margin-top: 0.75rem;">
         <div class="sink-box">Column 1</div>
         <div class="sink-box">Column 2</div>
@@ -138,13 +151,16 @@
 
     <section>
       <h2>Grid</h2>
+
       <EmGrid class="sink-demo-surface" :columns="4" :gap="8">
         <EmGridItem v-for="n in 4" :key="n" class="sink-box">
           Cell {{ n }}
         </EmGridItem>
+
         <EmGridItem class="sink-box" :span="2">
           Span 2
         </EmGridItem>
+
         <EmGridItem class="sink-box" :span="2">
           Span 2
         </EmGridItem>
@@ -159,15 +175,18 @@
       <h2>Avatar</h2>
 
       <p class="muted">Image</p>
+
       <div class="row">
         <EmAvatar size="sm">
           <EmAvatarImage alt="Small avatar" src="https://i.pravatar.cc/80?img=32" />
           <EmAvatarFallback>SM</EmAvatarFallback>
         </EmAvatar>
+
         <EmAvatar size="md">
           <EmAvatarImage alt="Medium avatar" src="https://i.pravatar.cc/80?img=12" />
           <EmAvatarFallback>JD</EmAvatarFallback>
         </EmAvatar>
+
         <EmAvatar size="lg">
           <EmAvatarImage alt="Large avatar" src="https://i.pravatar.cc/96?img=47" />
           <EmAvatarFallback>LG</EmAvatarFallback>
@@ -175,30 +194,36 @@
       </div>
 
       <p class="muted">Text (initials)</p>
+
       <div class="row">
         <EmAvatar size="sm">
           <EmAvatarFallback>AB</EmAvatarFallback>
         </EmAvatar>
+
         <EmAvatar size="md">
           <EmAvatarFallback>CD</EmAvatarFallback>
         </EmAvatar>
+
         <EmAvatar size="lg">
           <EmAvatarFallback>EF</EmAvatarFallback>
         </EmAvatar>
       </div>
 
       <p class="muted">Icon</p>
+
       <div class="row">
         <EmAvatar size="sm">
           <EmAvatarFallback>
             <PhUser :size="16" weight="regular" />
           </EmAvatarFallback>
         </EmAvatar>
+
         <EmAvatar size="md">
           <EmAvatarFallback>
             <PhUser :size="20" weight="regular" />
           </EmAvatarFallback>
         </EmAvatar>
+
         <EmAvatar size="lg">
           <EmAvatarFallback>
             <PhUser :size="24" weight="regular" />
@@ -207,20 +232,24 @@
       </div>
 
       <p class="muted">Group</p>
+
       <div class="row">
         <div class="emerald-avatar-group">
           <EmAvatar size="md">
             <EmAvatarImage alt="Member 1" src="https://i.pravatar.cc/80?img=12" />
             <EmAvatarFallback>JD</EmAvatarFallback>
           </EmAvatar>
+
           <EmAvatar size="md">
             <EmAvatarImage alt="Member 2" src="https://i.pravatar.cc/80?img=32" />
             <EmAvatarFallback>SM</EmAvatarFallback>
           </EmAvatar>
+
           <EmAvatar size="md">
             <EmAvatarImage alt="Member 3" src="https://i.pravatar.cc/80?img=47" />
             <EmAvatarFallback>LG</EmAvatarFallback>
           </EmAvatar>
+
           <EmAvatar size="md">
             <EmAvatarFallback>+3</EmAvatarFallback>
           </EmAvatar>
@@ -230,6 +259,7 @@
 
     <section>
       <h2>Badge</h2>
+
       <div class="row">
         <EmBadge>Primary</EmBadge>
         <EmBadge variant="success">Success</EmBadge>
@@ -238,11 +268,13 @@
         <EmBadge variant="info">Info</EmBadge>
         <EmBadge variant="neutral">Neutral</EmBadge>
       </div>
+
       <div class="row">
         <EmBadge size="sm">Small</EmBadge>
         <EmBadge size="md">Medium</EmBadge>
         <EmBadge size="lg">Large</EmBadge>
       </div>
+
       <div class="row">
         <EmBadge shape="dot" variant="success" />
         <EmBadge shape="indicator" variant="success" />
@@ -258,27 +290,33 @@
     <section>
       <h2>Tag</h2>
       <p class="muted">Tinted — filled surface, semantic luminosity/50 background</p>
+
       <div class="row">
         <EmTag tone="tinted" variant="neutral">
           <PhPlusCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag tone="tinted" variant="primary">
           <PhPlusCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag tone="tinted" variant="success">
           <PhPlusCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag tone="tinted" variant="error">
           <PhPlusCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag tone="tinted" variant="warning">
           <PhPlusCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag tone="tinted" variant="info">
           <PhPlusCircle :size="16" weight="fill" />
           chip text
@@ -286,27 +324,33 @@
       </div>
 
       <p class="muted">Outlined elevated (lg) — white surface, colored shadow</p>
+
       <div class="row">
         <EmTag elevation="lg" variant="neutral">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="lg" variant="primary">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="lg" variant="success">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="lg" variant="error">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="lg" variant="warning">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="lg" variant="info">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
@@ -314,27 +358,33 @@
       </div>
 
       <p class="muted">Outlined elevated (sm) — subtle drop shadow</p>
+
       <div class="row">
         <EmTag elevation="sm" variant="neutral">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="sm" variant="primary">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="sm" variant="success">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="sm" variant="error">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="sm" variant="warning">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag elevation="sm" variant="info">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
@@ -342,27 +392,33 @@
       </div>
 
       <p class="muted">Outlined flat — bordered, no shadow</p>
+
       <div class="row">
         <EmTag variant="neutral">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag variant="primary">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag variant="success">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag variant="error">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag variant="warning">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
         </EmTag>
+
         <EmTag variant="info">
           <PhCheckCircle :size="16" weight="fill" />
           chip text
@@ -370,6 +426,7 @@
       </div>
 
       <p class="muted">Text only — no icon</p>
+
       <div class="row">
         <EmTag variant="neutral">vue</EmTag>
         <EmTag variant="primary">typescript</EmTag>
@@ -379,6 +436,7 @@
 
     <section>
       <h2>List</h2>
+
       <div class="row" style="align-items: flex-start; gap: 24px;">
         <EmList style="width: 281px;">
           <EmListItem header>
@@ -386,45 +444,59 @@
               <EmListItemTitle>Inbox</EmListItemTitle>
               <EmListItemSubtitle>hello@vuetifyjs.com</EmListItemSubtitle>
             </EmListItemBody>
+
             <EmListItemAction>
               <PhDotsThreeCircle :size="16" weight="duotone" />
             </EmListItemAction>
           </EmListItem>
+
           <EmListItem interactive>
             <EmListItemIcon>
               <PhChatsCircle :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>My Inbox</EmListItemTitle>
           </EmListItem>
+
           <EmListItem interactive>
             <EmListItemIcon>
               <PhCalendarDots :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>Scheduled</EmListItemTitle>
           </EmListItem>
+
           <EmListItem interactive>
             <EmListItemIcon>
               <PhChatText :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>Chats</EmListItemTitle>
           </EmListItem>
+
           <EmListItem active interactive>
             <EmListItemIcon>
               <PhArchive :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>Archived</EmListItemTitle>
           </EmListItem>
+
           <EmListItem interactive>
             <EmListItemIcon>
               <PhCheckSquare :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>Closed</EmListItemTitle>
           </EmListItem>
+
           <EmListSeparator />
           <EmListSubheader>Account</EmListSubheader>
+
           <EmListItem interactive>
             <EmListItemTitle>View Profile</EmListItemTitle>
           </EmListItem>
+
           <EmListItem disabled interactive>
             <EmListItemTitle>Sign Out</EmListItemTitle>
           </EmListItem>
@@ -432,28 +504,36 @@
 
         <EmList style="width: 224px;">
           <EmListSubheader>Configurations</EmListSubheader>
+
           <EmListItem indent interactive>
             <EmListItemIcon>
               <PhNotePencil :size="14" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>To-do</EmListItemTitle>
           </EmListItem>
+
           <EmListItem active interactive>
             <EmListItemIcon>
               <PhShareNetwork :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>Share</EmListItemTitle>
           </EmListItem>
+
           <EmListItem indent interactive>
             <EmListItemIcon>
               <PhChalkboardTeacher :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>Leaderboard</EmListItemTitle>
           </EmListItem>
+
           <EmListItem indent interactive>
             <EmListItemIcon>
               <PhChartPieSlice :size="16" weight="duotone" />
             </EmListItemIcon>
+
             <EmListItemTitle>Analytics</EmListItemTitle>
           </EmListItem>
         </EmList>
@@ -462,6 +542,7 @@
 
     <section>
       <h2>Accordion</h2>
+
       <EmAccordion v-model="accordionModel" multiple style="width: 425px;">
         <EmAccordionItem value="overview">
           <EmAccordionHeader>
@@ -476,10 +557,12 @@
               </EmAccordionCue>
             </EmAccordionTrigger>
           </EmAccordionHeader>
+
           <EmAccordionContent>
             This is the body of the accordion you can insert your accordion text or content in this section.
           </EmAccordionContent>
         </EmAccordionItem>
+
         <EmAccordionItem value="tokens">
           <EmAccordionHeader>
             <EmAccordionTrigger v-slot="{ isSelected }">
@@ -493,10 +576,12 @@
               </EmAccordionCue>
             </EmAccordionTrigger>
           </EmAccordionHeader>
+
           <EmAccordionContent>
             This is the body of the accordion you can insert your accordion text or content in this section.
           </EmAccordionContent>
         </EmAccordionItem>
+
         <EmAccordionItem value="more">
           <EmAccordionHeader>
             <EmAccordionTrigger v-slot="{ isSelected }">
@@ -510,6 +595,7 @@
               </EmAccordionCue>
             </EmAccordionTrigger>
           </EmAccordionHeader>
+
           <EmAccordionContent>
             This is the body of the accordion you can insert your accordion text or content in this section.
           </EmAccordionContent>
@@ -523,6 +609,7 @@
 
     <section>
       <h2>Breadcrumb</h2>
+
       <EmBreadcrumb>
         <EmBreadcrumbList>
           <EmBreadcrumbItem id="1" value="home">
@@ -530,35 +617,43 @@
               <PhHouseLine weight="duotone" />
             </EmBreadcrumbLink>
           </EmBreadcrumbItem>
+
           <EmBreadcrumbDivider>
             <PhCaretRight weight="light" />
           </EmBreadcrumbDivider>
+
           <EmBreadcrumbItem id="2" value="docs">
             <EmBreadcrumbLink href="#">
               <PhBookOpen weight="duotone" />
               Docs
             </EmBreadcrumbLink>
           </EmBreadcrumbItem>
+
           <EmBreadcrumbDivider>
             <PhCaretRight weight="light" />
           </EmBreadcrumbDivider>
+
           <EmBreadcrumbItem id="3" value="components">
             <EmBreadcrumbLink href="#">
               <PhCube weight="duotone" />
               Components
             </EmBreadcrumbLink>
           </EmBreadcrumbItem>
+
           <EmBreadcrumbDivider>
             <PhCaretRight weight="light" />
           </EmBreadcrumbDivider>
+
           <EmBreadcrumbItem id="4" value="more">
             <EmBreadcrumbLink aria-label="More" href="#">
               <PhDotsThree weight="duotone" />
             </EmBreadcrumbLink>
           </EmBreadcrumbItem>
+
           <EmBreadcrumbDivider>
             <PhCaretRight weight="light" />
           </EmBreadcrumbDivider>
+
           <EmBreadcrumbItem id="5" value="breadcrumbs">
             <EmBreadcrumbPage>Breadcrumbs</EmBreadcrumbPage>
           </EmBreadcrumbItem>
@@ -568,12 +663,14 @@
 
     <section>
       <h2>Tabs</h2>
+
       <EmTabs v-model="tabsModel">
         <EmTabsList label="Account settings">
           <EmTabsItem value="overview">Profile</EmTabsItem>
           <EmTabsItem value="tokens">Password</EmTabsItem>
           <EmTabsItem value="components">Billing</EmTabsItem>
         </EmTabsList>
+
         <EmTabsPanel value="overview">Profile settings content.</EmTabsPanel>
         <EmTabsPanel value="tokens">Password settings content.</EmTabsPanel>
         <EmTabsPanel value="components">Billing settings content.</EmTabsPanel>
@@ -582,42 +679,57 @@
 
     <section>
       <h2>Stepper</h2>
+
       <EmStepper v-model="stepperModel">
         <EmStepperItem value="date">
           <PhCalendarBlank weight="duotone" />
+
           <template #completed>
             <PhCheck weight="duotone" />
           </template>
+
           <template #label>
             <EmStepperLabel>Choose Date<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
           </template>
         </EmStepperItem>
+
         <EmStepperSeparator />
+
         <EmStepperItem value="house">
           <PhHouse weight="duotone" />
+
           <template #completed>
             <PhCheck weight="duotone" />
           </template>
+
           <template #label>
             <EmStepperLabel>Choose House<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
           </template>
         </EmStepperItem>
+
         <EmStepperSeparator />
+
         <EmStepperItem value="flight">
           <PhAirplaneTilt weight="duotone" />
+
           <template #completed>
             <PhCheck weight="duotone" />
           </template>
+
           <template #label>
             <EmStepperLabel>Choose Flight<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
           </template>
         </EmStepperItem>
+
         <EmStepperSeparator />
+
         <EmStepperItem value="destination">
           <PhMapPin weight="duotone" />
+
           <template #completed>
             <PhCheck weight="duotone" />
           </template>
+
           <template #label>
             <EmStepperLabel>Destination<EmStepperLabelDescription>Lorem Ipsum</EmStepperLabelDescription></EmStepperLabel>
           </template>
@@ -627,17 +739,22 @@
 
     <section>
       <h2>Pagination</h2>
+
       <EmPagination v-model="paginationPage" :size="20" :total-visible="5">
         <EmPaginationPrev>
           <PhCaretLeft weight="duotone" />
         </EmPaginationPrev>
+
         <template v-for="page in 5" :key="page">
           <EmPaginationItem :value="page">{{ page }}</EmPaginationItem>
         </template>
+
         <EmPaginationEllipsis>
           <PhDotsThree weight="duotone" />
         </EmPaginationEllipsis>
+
         <EmPaginationItem :value="20">20</EmPaginationItem>
+
         <EmPaginationNext>
           <PhCaretRight weight="duotone" />
         </EmPaginationNext>
@@ -646,10 +763,12 @@
 
     <section>
       <h2>Menu</h2>
+
       <EmMenu v-model="menuOpen">
         <EmMenuActivator>
           <EmButton>Open Menu</EmButton>
         </EmMenuActivator>
+
         <EmMenuContent>
           <EmMenuLabel>Frameworks</EmMenuLabel>
           <EmMenuItem>Shadcn</EmMenuItem>
@@ -670,18 +789,22 @@
 
     <section>
       <h2>TextField</h2>
+
       <div class="row" style="align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;">
         <EmTextField v-model="textFieldValue" label="Name" style="width: 217px;">
           <EmTextFieldLabel>Name</EmTextFieldLabel>
           <EmTextFieldControl placeholder="Enter your email" />
           <EmTextFieldDescription>Your display name across the app.</EmTextFieldDescription>
         </EmTextField>
+
         <EmTextField label="Empty" style="width: 217px;">
           <EmTextFieldControl placeholder="Enter your email" />
         </EmTextField>
+
         <EmTextField :disabled="true" label="Disabled" style="width: 217px;">
           <EmTextFieldControl placeholder="Enter your email" />
         </EmTextField>
+
         <EmTextField
           error
           :error-messages="['Email is required']"
@@ -691,6 +814,7 @@
         >
           <EmTextFieldLabel>Email</EmTextFieldLabel>
           <EmTextFieldControl placeholder="Enter your email" />
+
           <EmTextFieldError v-slot="{ errors }">
             {{ errors[0] }}
           </EmTextFieldError>
@@ -700,18 +824,22 @@
 
     <section>
       <h2>Textarea</h2>
+
       <div class="row" style="align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;">
         <EmTextarea v-model="textareaValue" label="Bio" style="width: 217px;">
           <EmTextareaLabel>Bio</EmTextareaLabel>
           <EmTextareaControl placeholder="Write your content here..." :rows="4" />
           <EmTextareaDescription>Markdown is supported.</EmTextareaDescription>
         </EmTextarea>
+
         <EmTextarea label="Empty" style="width: 217px;">
           <EmTextareaControl placeholder="Write your content here..." :rows="4" />
         </EmTextarea>
+
         <EmTextarea disabled label="Disabled" style="width: 217px;">
           <EmTextareaControl placeholder="Write your content here..." :rows="4" />
         </EmTextarea>
+
         <EmTextarea
           error
           :error-messages="['Bio is required']"
@@ -721,6 +849,7 @@
         >
           <EmTextareaLabel>Bio</EmTextareaLabel>
           <EmTextareaControl placeholder="Write your content here..." :rows="4" />
+
           <EmTextareaError v-slot="{ errors }">
             {{ errors[0] }}
           </EmTextareaError>
@@ -731,25 +860,32 @@
     <section>
       <h2>Checkbox</h2>
       <p class="muted">Unchecked</p>
+
       <div class="row" style="align-items: center; gap: 16px;">
         <EmCheckbox :model-value="false" size="sm">
           <EmCheckboxIndicator />
         </EmCheckbox>
+
         <EmCheckbox :model-value="false" size="md">
           <EmCheckboxIndicator />
         </EmCheckbox>
+
         <EmCheckbox :model-value="false" size="lg">
           <EmCheckboxIndicator />
         </EmCheckbox>
       </div>
+
       <p class="muted">Checked</p>
+
       <div class="row" style="align-items: center; gap: 16px;">
         <EmCheckbox :model-value="true" size="sm">
           <EmCheckboxIndicator />
         </EmCheckbox>
+
         <EmCheckbox :model-value="true" size="md">
           <EmCheckboxIndicator />
         </EmCheckbox>
+
         <EmCheckbox :model-value="true" size="lg">
           <EmCheckboxIndicator />
         </EmCheckbox>
@@ -759,35 +895,42 @@
     <section>
       <h2>Radio</h2>
       <p class="muted">Unchecked</p>
+
       <div class="row" style="align-items: center; gap: 16px;">
         <EmRadioGroup>
           <EmRadio size="sm" :value="'a'">
             <EmRadioIndicator />
           </EmRadio>
         </EmRadioGroup>
+
         <EmRadioGroup>
           <EmRadio size="md" :value="'b'">
             <EmRadioIndicator />
           </EmRadio>
         </EmRadioGroup>
+
         <EmRadioGroup>
           <EmRadio size="lg" :value="'c'">
             <EmRadioIndicator />
           </EmRadio>
         </EmRadioGroup>
       </div>
+
       <p class="muted">Checked</p>
+
       <div class="row" style="align-items: center; gap: 16px;">
         <EmRadioGroup :model-value="'a'">
           <EmRadio size="sm" :value="'a'">
             <EmRadioIndicator />
           </EmRadio>
         </EmRadioGroup>
+
         <EmRadioGroup :model-value="'b'">
           <EmRadio size="md" :value="'b'">
             <EmRadioIndicator />
           </EmRadio>
         </EmRadioGroup>
+
         <EmRadioGroup :model-value="'c'">
           <EmRadio size="lg" :value="'c'">
             <EmRadioIndicator />
@@ -799,35 +942,42 @@
     <section>
       <h2>Switch</h2>
       <p class="muted">Off</p>
+
       <div class="row" style="align-items: center; gap: 16px;">
         <EmSwitch :model-value="false" size="sm">
           <EmSwitchTrack>
             <EmSwitchThumb />
           </EmSwitchTrack>
         </EmSwitch>
+
         <EmSwitch :model-value="false" size="md">
           <EmSwitchTrack>
             <EmSwitchThumb />
           </EmSwitchTrack>
         </EmSwitch>
+
         <EmSwitch :model-value="false" size="lg">
           <EmSwitchTrack>
             <EmSwitchThumb />
           </EmSwitchTrack>
         </EmSwitch>
       </div>
+
       <p class="muted">On</p>
+
       <div class="row" style="align-items: center; gap: 16px;">
         <EmSwitch :model-value="true" size="sm">
           <EmSwitchTrack>
             <EmSwitchThumb />
           </EmSwitchTrack>
         </EmSwitch>
+
         <EmSwitch :model-value="true" size="md">
           <EmSwitchTrack>
             <EmSwitchThumb />
           </EmSwitchTrack>
         </EmSwitch>
+
         <EmSwitch :model-value="true" size="lg">
           <EmSwitchTrack>
             <EmSwitchThumb />
@@ -838,36 +988,45 @@
 
     <section>
       <h2>Slider</h2>
+
       <div class="stack">
         <div class="em-slider-row">
           <span class="em-slider-label">Default</span>
+
           <EmSlider v-model="sliderSingle">
             <EmSliderTrack />
             <EmSliderThumb aria-label="Value" />
           </EmSlider>
+
           <span class="em-slider-value">{{ sliderSingle }}</span>
         </div>
 
         <div class="em-slider-row">
           <span class="em-slider-label">Fill</span>
+
           <EmSlider v-model="sliderSingle">
             <EmSliderTrack>
               <EmSliderRange />
             </EmSliderTrack>
+
             <EmSliderThumb aria-label="Value" />
           </EmSlider>
+
           <span class="em-slider-value">{{ sliderSingle }}</span>
         </div>
 
         <div class="em-slider-row">
           <span class="em-slider-label">Range</span>
+
           <EmSlider v-model="sliderRange">
             <EmSliderTrack>
               <EmSliderRange />
             </EmSliderTrack>
+
             <EmSliderThumb aria-label="Min" />
             <EmSliderThumb aria-label="Max" />
           </EmSlider>
+
           <span class="em-slider-value">{{ sliderRange.join(' – ') }}</span>
         </div>
       </div>
@@ -875,12 +1034,14 @@
 
     <section>
       <h2>Select</h2>
+
       <EmSelect v-model="selectSingle" style="width: 217px;">
         <EmSelectActivator>
           <EmSelectValue />
           <EmSelectPlaceholder>Select your framework</EmSelectPlaceholder>
           <PhCaretDown :size="14" weight="duotone" />
         </EmSelectActivator>
+
         <EmSelectContent>
           <EmSelectItem :value="'vuetify'">Vuetify</EmSelectItem>
           <EmSelectItem :value="'shadcn'">Shadcn</EmSelectItem>
@@ -892,11 +1053,13 @@
 
     <section>
       <h2>AutoComplete</h2>
+
       <EmAutoComplete v-model="autoCompleteSingle" style="width: 240px;">
         <EmAutoCompleteControl>
           <EmAutoCompleteInput placeholder="Search your framework" />
           <PhCaretDown :size="14" weight="duotone" />
         </EmAutoCompleteControl>
+
         <EmAutoCompleteContent eager>
           <EmAutoCompleteItem :value="'vuetify'">Vuetify</EmAutoCompleteItem>
           <EmAutoCompleteItem :value="'vue'">Vue</EmAutoCompleteItem>
@@ -909,24 +1072,30 @@
     <section>
       <h2>DatePicker</h2>
       <p class="muted">Visual scaffold only — replaces with the new DatePicker once v0 ships a calendar primitive (createCalendar / useDate-backed root).</p>
+
       <EmDatePicker v-model="datePickerValue">
         <EmDatePickerCalendar>
           <EmDatePickerHeader>
             <button aria-label="Previous month" type="button">
               <PhCaretLeft :size="12" weight="duotone" />
             </button>
+
             <span>July 2026</span>
+
             <button aria-label="Next month" type="button">
               <PhCaretRight :size="12" weight="duotone" />
             </button>
           </EmDatePickerHeader>
+
           <EmDatePickerGrid>
             <EmDatePickerCell v-for="weekday in ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']" :key="weekday" weekday>
               {{ weekday }}
             </EmDatePickerCell>
+
             <EmDatePickerCell v-for="day in 31" :key="`jul-${day}`" :selected="day === 22" :today="day === 22">
               {{ day }}
             </EmDatePickerCell>
+
             <EmDatePickerCell v-for="day in 4" :key="`aug-${day}`" outside>
               {{ day }}
             </EmDatePickerCell>
@@ -937,6 +1106,7 @@
 
     <section>
       <h2>Upload</h2>
+
       <EmUpload v-model="uploadFiles" multiple style="width: 420px;">
         <EmUploadDropzone>
           <PhFileArrowUp :size="28" weight="regular" />
@@ -948,28 +1118,35 @@
 
     <section>
       <h2>Form</h2>
+
       <EmForm v-model="formValid" style="width: 217px;">
         <div class="emerald-form-field">
           <label class="emerald-form-field__label" for="em-form-default">Email</label>
+
           <div class="emerald-form-field__control">
             <input id="em-form-default" placeholder="Enter your email" type="email">
           </div>
+
           <span class="emerald-form-field__helper">Write your email in lowercase</span>
         </div>
 
         <div class="emerald-form-field" data-invalid>
           <label class="emerald-form-field__label" for="em-form-error">Email</label>
+
           <div class="emerald-form-field__control">
             <input id="em-form-error" placeholder="Enter your email" type="email">
           </div>
+
           <span class="emerald-form-field__error">Email is required</span>
         </div>
 
         <div class="emerald-form-field">
           <label class="emerald-form-field__label" for="em-form-active">Email</label>
+
           <div class="emerald-form-field__control">
             <input id="em-form-active" type="email" value="juanjcardona13@gmail.com">
           </div>
+
           <span class="emerald-form-field__helper">Write your email in lowercase</span>
         </div>
 
@@ -983,56 +1160,68 @@
 
     <section>
       <h2>Alert</h2>
+
       <div class="stack" style="max-width: 520px;">
         <EmAlert>
           <EmAlertIcon>
             <PhInfo :size="24" weight="regular" />
           </EmAlertIcon>
+
           <EmAlertBody>
             <EmAlertTitle>Alert Title</EmAlertTitle>
             <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
           </EmAlertBody>
         </EmAlert>
+
         <EmAlert variant="error">
           <EmAlertIcon>
             <PhXCircle :size="24" weight="regular" />
           </EmAlertIcon>
+
           <EmAlertBody>
             <EmAlertTitle>Error Alert</EmAlertTitle>
             <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
           </EmAlertBody>
         </EmAlert>
+
         <EmAlert variant="success">
           <EmAlertIcon>
             <PhCheckCircle :size="24" weight="regular" />
           </EmAlertIcon>
+
           <EmAlertBody>
             <EmAlertTitle>Success Alert</EmAlertTitle>
             <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
           </EmAlertBody>
         </EmAlert>
+
         <EmAlert variant="info">
           <EmAlertIcon>
             <PhInfo :size="24" weight="regular" />
           </EmAlertIcon>
+
           <EmAlertBody>
             <EmAlertTitle>Info Alert</EmAlertTitle>
             <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
           </EmAlertBody>
         </EmAlert>
+
         <EmAlert variant="warning">
           <EmAlertIcon>
             <PhWarning :size="24" weight="regular" />
           </EmAlertIcon>
+
           <EmAlertBody>
             <EmAlertTitle>Warning Alert</EmAlertTitle>
             <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
           </EmAlertBody>
         </EmAlert>
+
         <EmAlert variant="neutral">
           <EmAlertIcon>
             <PhAirplaneTilt :size="24" weight="regular" />
           </EmAlertIcon>
+
           <EmAlertBody>
             <EmAlertTitle>Alert</EmAlertTitle>
             <EmAlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!</EmAlertDescription>
@@ -1048,6 +1237,7 @@
 
     <section>
       <h2>Progress</h2>
+
       <div style="display: flex; flex-direction: column; gap: 16px;">
         <EmProgress size="sm" :value="30">
           <EmProgressTrack>
@@ -1069,6 +1259,7 @@
               <EmProgressValue inside>{{ value }}</EmProgressValue>
             </EmProgressFill>
           </EmProgressTrack>
+
           <EmProgressValue>100</EmProgressValue>
         </EmProgress>
       </div>
@@ -1076,75 +1267,93 @@
 
     <section>
       <h2>Toast</h2>
+
       <div class="stack" style="max-width: 360px;">
         <EmToast>
           <EmToastIcon>
             <PhInfo :size="16" weight="duotone" />
           </EmToastIcon>
+
           <EmToastBody>
             <EmToastTitle>Successful toast</EmToastTitle>
             <EmToastDescription>It's a violet notification state</EmToastDescription>
           </EmToastBody>
+
           <EmToastClose>
             <PhX :size="12" weight="bold" />
           </EmToastClose>
         </EmToast>
+
         <EmToast variant="error">
           <EmToastIcon>
             <PhXCircle :size="16" weight="duotone" />
           </EmToastIcon>
+
           <EmToastBody>
             <EmToastTitle>Successful toast</EmToastTitle>
             <EmToastDescription>It's a red notification state</EmToastDescription>
           </EmToastBody>
+
           <EmToastClose>
             <PhX :size="12" weight="bold" />
           </EmToastClose>
         </EmToast>
+
         <EmToast variant="success">
           <EmToastIcon>
             <PhCheckCircle :size="16" weight="duotone" />
           </EmToastIcon>
+
           <EmToastBody>
             <EmToastTitle>Successful toast</EmToastTitle>
             <EmToastDescription>It's a green notification state</EmToastDescription>
           </EmToastBody>
+
           <EmToastClose>
             <PhX :size="12" weight="bold" />
           </EmToastClose>
         </EmToast>
+
         <EmToast variant="info">
           <EmToastIcon>
             <PhInfo :size="16" weight="duotone" />
           </EmToastIcon>
+
           <EmToastBody>
             <EmToastTitle>Successful toast</EmToastTitle>
             <EmToastDescription>It's a blue notification state</EmToastDescription>
           </EmToastBody>
+
           <EmToastClose>
             <PhX :size="12" weight="bold" />
           </EmToastClose>
         </EmToast>
+
         <EmToast variant="warning">
           <EmToastIcon>
             <PhWarning :size="16" weight="duotone" />
           </EmToastIcon>
+
           <EmToastBody>
             <EmToastTitle>Successful toast</EmToastTitle>
             <EmToastDescription>It's an amber notification state</EmToastDescription>
           </EmToastBody>
+
           <EmToastClose>
             <PhX :size="12" weight="bold" />
           </EmToastClose>
         </EmToast>
+
         <EmToast variant="neutral">
           <EmToastIcon>
             <PhCheckCircle :size="16" weight="duotone" />
           </EmToastIcon>
+
           <EmToastBody>
             <EmToastTitle>Successful toast</EmToastTitle>
             <EmToastDescription>It's a neutral notification state</EmToastDescription>
           </EmToastBody>
+
           <EmToastClose>
             <PhX :size="12" weight="bold" />
           </EmToastClose>
@@ -1154,10 +1363,12 @@
 
     <section>
       <h2>Tooltip</h2>
+
       <EmTooltip>
         <EmTooltipContent position-area="top">
           Hello, I'm Tooltip
         </EmTooltipContent>
+
         <EmTooltipActivator>
           <EmButton>Hover for tooltip</EmButton>
         </EmTooltipActivator>
@@ -1171,20 +1382,24 @@
     <section>
       <h2>Dialog</h2>
       <EmButton @click="dialogOpen = true">Open dialog</EmButton>
+
       <EmDialog v-model="dialogOpen">
         <EmDialogContent>
           <EmDialogHeader>
             <EmDialogTitle>Delete design system?</EmDialogTitle>
           </EmDialogHeader>
+
           <EmDialogBody>
             <EmDialogDescription>
               This will permanently remove Emerald and all its tokens. Cannot be undone.
             </EmDialogDescription>
           </EmDialogBody>
+
           <EmDialogFooter>
             <EmDialogClose renderless>
               <EmButton variant="secondary">Cancel</EmButton>
             </EmDialogClose>
+
             <EmDialogClose renderless>
               <EmButton>Confirm</EmButton>
             </EmDialogClose>
@@ -1200,6 +1415,7 @@
     <section>
       <h2>Table</h2>
       <p class="muted">Default — sortable headers, selected row, status cells</p>
+
       <EmTable>
         <EmTableHead>
           <EmTableRow>
@@ -1209,25 +1425,30 @@
                 <PhCaretUpDown :size="12" weight="duotone" />
               </template>
             </EmTableHeader>
+
             <EmTableHeader sort="ascending" sortable>
               Status
               <template #sort-icon>
                 <PhCaretUp :size="12" weight="duotone" />
               </template>
             </EmTableHeader>
+
             <EmTableHeader filterable sort="descending" sortable>
               Role
               <template #sort-icon>
                 <PhCaretDown :size="12" weight="duotone" />
               </template>
+
               <template #filter-icon>
                 <PhFunnel :size="14" weight="duotone" />
               </template>
             </EmTableHeader>
+
             <EmTableHeader>Email</EmTableHeader>
             <EmTableHeader align="end">Phone</EmTableHeader>
           </EmTableRow>
         </EmTableHead>
+
         <EmTableBody>
           <EmTableRow>
             <EmTableCell>John Doe</EmTableCell>
@@ -1236,6 +1457,7 @@
             <EmTableCell>john.doe@gmail.com</EmTableCell>
             <EmTableCell align="end">555-123-4567</EmTableCell>
           </EmTableRow>
+
           <EmTableRow>
             <EmTableCell>Laura Kroft</EmTableCell>
             <EmTableCell>Inactive</EmTableCell>
@@ -1243,6 +1465,7 @@
             <EmTableCell>laurak@email.com</EmTableCell>
             <EmTableCell align="end">555-098-7654</EmTableCell>
           </EmTableRow>
+
           <EmTableRow selected>
             <EmTableCell>Ahmed Khan</EmTableCell>
             <EmTableCell>Active</EmTableCell>
@@ -1250,6 +1473,7 @@
             <EmTableCell>ahmed.k@gmail.com</EmTableCell>
             <EmTableCell align="end">555-234-5678</EmTableCell>
           </EmTableRow>
+
           <EmTableRow>
             <EmTableCell>Jane Smith</EmTableCell>
             <EmTableCell>Inactive</EmTableCell>
@@ -1257,6 +1481,7 @@
             <EmTableCell>jane.s@gmail.com</EmTableCell>
             <EmTableCell align="end">555-078-7654</EmTableCell>
           </EmTableRow>
+
           <EmTableRow>
             <EmTableCell>David Wilson</EmTableCell>
             <EmTableCell>Active</EmTableCell>
@@ -1268,6 +1493,7 @@
       </EmTable>
 
       <p class="muted" style="margin-top: 1.5rem;">Compact — fewer columns, no border</p>
+
       <EmTable :bordered="false">
         <EmTableHead>
           <EmTableRow>
@@ -1277,37 +1503,46 @@
             <EmTableHeader align="end">MRR</EmTableHeader>
           </EmTableRow>
         </EmTableHead>
+
         <EmTableBody>
           <EmTableRow>
             <EmTableCell>Starter</EmTableCell>
+
             <EmTableCell>
               <EmTag tone="tinted" variant="success">
                 <PhCheckCircle :size="14" weight="fill" />
                 active
               </EmTag>
             </EmTableCell>
+
             <EmTableCell align="end">12</EmTableCell>
             <EmTableCell align="end">$120</EmTableCell>
           </EmTableRow>
+
           <EmTableRow>
             <EmTableCell>Pro</EmTableCell>
+
             <EmTableCell>
               <EmTag tone="tinted" variant="warning">
                 <PhWarning :size="14" weight="fill" />
                 trial
               </EmTag>
             </EmTableCell>
+
             <EmTableCell align="end">48</EmTableCell>
             <EmTableCell align="end">$960</EmTableCell>
           </EmTableRow>
+
           <EmTableRow>
             <EmTableCell>Enterprise</EmTableCell>
+
             <EmTableCell>
               <EmTag tone="tinted" variant="error">
                 <PhXCircle :size="14" weight="fill" />
                 churned
               </EmTag>
             </EmTableCell>
+
             <EmTableCell align="end">120</EmTableCell>
             <EmTableCell align="end">—</EmTableCell>
           </EmTableRow>
@@ -1317,24 +1552,30 @@
 
     <section>
       <h2>Carousel</h2>
+
       <EmCarousel v-model="carouselModel" circular label="Demo carousel" style="width: 557px;">
         <EmCarouselPrevious>
           <PhCaretLeft :size="16" weight="duotone" />
         </EmCarouselPrevious>
+
         <EmCarouselViewport>
           <EmCarouselItem value="slide-1">
             <div class="sink-carousel-slide">1</div>
           </EmCarouselItem>
+
           <EmCarouselItem value="slide-2">
             <div class="sink-carousel-slide">2</div>
           </EmCarouselItem>
+
           <EmCarouselItem value="slide-3">
             <div class="sink-carousel-slide">3</div>
           </EmCarouselItem>
         </EmCarouselViewport>
+
         <EmCarouselNext>
           <PhCaretRight :size="16" weight="duotone" />
         </EmCarouselNext>
+
         <EmCarouselIndicator label="Slides">
           <template #default="{ items }">
             <button
diff --git a/dev/src/components.d.ts b/dev/src/components.d.ts
index 5b3969f93..a456532e4 100644
--- a/dev/src/components.d.ts
+++ b/dev/src/components.d.ts
@@ -70,6 +70,165 @@ declare module 'vue' {
     DialogDescription: typeof import('./../../packages/0/src/components/Dialog/DialogDescription.vue')['default']
     DialogRoot: typeof import('./../../packages/0/src/components/Dialog/DialogRoot.vue')['default']
     DialogTitle: typeof import('./../../packages/0/src/components/Dialog/DialogTitle.vue')['default']
+    EmAccordion: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordion.vue')['default']
+    EmAccordionContent: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionContent.vue')['default']
+    EmAccordionCue: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionCue.vue')['default']
+    EmAccordionHeader: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionHeader.vue')['default']
+    EmAccordionItem: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionItem.vue')['default']
+    EmAccordionTrigger: typeof import('./../../packages/emerald/src/components/EmAccordion/EmAccordionTrigger.vue')['default']
+    EmAlert: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlert.vue')['default']
+    EmAlertBody: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertBody.vue')['default']
+    EmAlertClose: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertClose.vue')['default']
+    EmAlertDescription: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertDescription.vue')['default']
+    EmAlertIcon: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertIcon.vue')['default']
+    EmAlertTitle: typeof import('./../../packages/emerald/src/components/EmAlert/EmAlertTitle.vue')['default']
+    EmAutoComplete: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoComplete.vue')['default']
+    EmAutoCompleteContent: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteContent.vue')['default']
+    EmAutoCompleteControl: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteControl.vue')['default']
+    EmAutoCompleteEmpty: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteEmpty.vue')['default']
+    EmAutoCompleteInput: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteInput.vue')['default']
+    EmAutoCompleteItem: typeof import('./../../packages/emerald/src/components/EmAutoComplete/EmAutoCompleteItem.vue')['default']
+    EmAvatar: typeof import('./../../packages/emerald/src/components/EmAvatar/EmAvatar.vue')['default']
+    EmAvatarFallback: typeof import('./../../packages/emerald/src/components/EmAvatar/EmAvatarFallback.vue')['default']
+    EmAvatarImage: typeof import('./../../packages/emerald/src/components/EmAvatar/EmAvatarImage.vue')['default']
+    EmBadge: typeof import('./../../packages/emerald/src/components/EmBadge/EmBadge.vue')['default']
+    EmBreadcrumb: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumb.vue')['default']
+    EmBreadcrumbDivider: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbDivider.vue')['default']
+    EmBreadcrumbEllipsis: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbEllipsis.vue')['default']
+    EmBreadcrumbItem: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbItem.vue')['default']
+    EmBreadcrumbLink: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbLink.vue')['default']
+    EmBreadcrumbList: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbList.vue')['default']
+    EmBreadcrumbPage: typeof import('./../../packages/emerald/src/components/EmBreadcrumb/EmBreadcrumbPage.vue')['default']
+    EmButton: typeof import('./../../packages/emerald/src/components/EmButton/EmButton.vue')['default']
+    EmButtonAppend: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonAppend.vue')['default']
+    EmButtonContent: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonContent.vue')['default']
+    EmButtonLoader: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonLoader.vue')['default']
+    EmButtonPrepend: typeof import('./../../packages/emerald/src/components/EmButton/EmButtonPrepend.vue')['default']
+    EmCard: typeof import('./../../packages/emerald/src/components/EmCard/EmCard.vue')['default']
+    EmCardBody: typeof import('./../../packages/emerald/src/components/EmCard/EmCardBody.vue')['default']
+    EmCardFooter: typeof import('./../../packages/emerald/src/components/EmCard/EmCardFooter.vue')['default']
+    EmCardHeader: typeof import('./../../packages/emerald/src/components/EmCard/EmCardHeader.vue')['default']
+    EmCardSubtitle: typeof import('./../../packages/emerald/src/components/EmCard/EmCardSubtitle.vue')['default']
+    EmCardTitle: typeof import('./../../packages/emerald/src/components/EmCard/EmCardTitle.vue')['default']
+    EmCarousel: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarousel.vue')['default']
+    EmCarouselIndicator: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselIndicator.vue')['default']
+    EmCarouselItem: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselItem.vue')['default']
+    EmCarouselNext: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselNext.vue')['default']
+    EmCarouselPrevious: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselPrevious.vue')['default']
+    EmCarouselViewport: typeof import('./../../packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue')['default']
+    EmCheckbox: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckbox.vue')['default']
+    EmCheckboxGroup: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckboxGroup.vue')['default']
+    EmCheckboxIndicator: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckboxIndicator.vue')['default']
+    EmCheckboxSelectAll: typeof import('./../../packages/emerald/src/components/EmCheckbox/EmCheckboxSelectAll.vue')['default']
+    EmContainer: typeof import('./../../packages/emerald/src/components/EmContainer/EmContainer.vue')['default']
+    EmDatePicker: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePicker.vue')['default']
+    EmDatePickerCalendar: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerCalendar.vue')['default']
+    EmDatePickerCell: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerCell.vue')['default']
+    EmDatePickerGrid: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerGrid.vue')['default']
+    EmDatePickerHeader: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerHeader.vue')['default']
+    EmDatePickerInput: typeof import('./../../packages/emerald/src/components/EmDatePicker/EmDatePickerInput.vue')['default']
+    EmDialog: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialog.vue')['default']
+    EmDialogActivator: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogActivator.vue')['default']
+    EmDialogBody: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogBody.vue')['default']
+    EmDialogClose: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogClose.vue')['default']
+    EmDialogContent: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogContent.vue')['default']
+    EmDialogDescription: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogDescription.vue')['default']
+    EmDialogFooter: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogFooter.vue')['default']
+    EmDialogHeader: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogHeader.vue')['default']
+    EmDialogTitle: typeof import('./../../packages/emerald/src/components/EmDialog/EmDialogTitle.vue')['default']
+    EmDivider: typeof import('./../../packages/emerald/src/components/EmDivider/EmDivider.vue')['default']
+    EmDividerLabel: typeof import('./../../packages/emerald/src/components/EmDivider/EmDividerLabel.vue')['default']
+    EmDividerLine: typeof import('./../../packages/emerald/src/components/EmDivider/EmDividerLine.vue')['default']
+    EmFlex: typeof import('./../../packages/emerald/src/components/EmFlex/EmFlex.vue')['default']
+    EmForm: typeof import('./../../packages/emerald/src/components/EmForm/EmForm.vue')['default']
+    EmGrid: typeof import('./../../packages/emerald/src/components/EmGrid/EmGrid.vue')['default']
+    EmGridItem: typeof import('./../../packages/emerald/src/components/EmGrid/EmGridItem.vue')['default']
+    EmList: typeof import('./../../packages/emerald/src/components/EmList/EmList.vue')['default']
+    EmListItem: typeof import('./../../packages/emerald/src/components/EmList/EmListItem.vue')['default']
+    EmListItemAction: typeof import('./../../packages/emerald/src/components/EmList/EmListItemAction.vue')['default']
+    EmListItemBody: typeof import('./../../packages/emerald/src/components/EmList/EmListItemBody.vue')['default']
+    EmListItemIcon: typeof import('./../../packages/emerald/src/components/EmList/EmListItemIcon.vue')['default']
+    EmListItemSubtitle: typeof import('./../../packages/emerald/src/components/EmList/EmListItemSubtitle.vue')['default']
+    EmListItemTitle: typeof import('./../../packages/emerald/src/components/EmList/EmListItemTitle.vue')['default']
+    EmListSeparator: typeof import('./../../packages/emerald/src/components/EmList/EmListSeparator.vue')['default']
+    EmListSubheader: typeof import('./../../packages/emerald/src/components/EmList/EmListSubheader.vue')['default']
+    EmLoading: typeof import('./../../packages/emerald/src/components/EmLoading/EmLoading.vue')['default']
+    EmMenu: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenu.vue')['default']
+    EmMenuActivator: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuActivator.vue')['default']
+    EmMenuContent: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuContent.vue')['default']
+    EmMenuItem: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuItem.vue')['default']
+    EmMenuLabel: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuLabel.vue')['default']
+    EmMenuSeparator: typeof import('./../../packages/emerald/src/components/EmMenu/EmMenuSeparator.vue')['default']
+    EmPagination: typeof import('./../../packages/emerald/src/components/EmPagination/EmPagination.vue')['default']
+    EmPaginationEllipsis: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationEllipsis.vue')['default']
+    EmPaginationFirst: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationFirst.vue')['default']
+    EmPaginationItem: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationItem.vue')['default']
+    EmPaginationLast: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationLast.vue')['default']
+    EmPaginationNext: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationNext.vue')['default']
+    EmPaginationPrev: typeof import('./../../packages/emerald/src/components/EmPagination/EmPaginationPrev.vue')['default']
+    EmProgress: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgress.vue')['default']
+    EmProgressFill: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgressFill.vue')['default']
+    EmProgressTrack: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgressTrack.vue')['default']
+    EmProgressValue: typeof import('./../../packages/emerald/src/components/EmProgress/EmProgressValue.vue')['default']
+    EmRadio: typeof import('./../../packages/emerald/src/components/EmRadio/EmRadio.vue')['default']
+    EmRadioGroup: typeof import('./../../packages/emerald/src/components/EmRadio/EmRadioGroup.vue')['default']
+    EmRadioIndicator: typeof import('./../../packages/emerald/src/components/EmRadio/EmRadioIndicator.vue')['default']
+    EmSelect: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelect.vue')['default']
+    EmSelectActivator: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectActivator.vue')['default']
+    EmSelectContent: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectContent.vue')['default']
+    EmSelectItem: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectItem.vue')['default']
+    EmSelectPlaceholder: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectPlaceholder.vue')['default']
+    EmSelectValue: typeof import('./../../packages/emerald/src/components/EmSelect/EmSelectValue.vue')['default']
+    EmSlider: typeof import('./../../packages/emerald/src/components/EmSlider/EmSlider.vue')['default']
+    EmSliderRange: typeof import('./../../packages/emerald/src/components/EmSlider/EmSliderRange.vue')['default']
+    EmSliderThumb: typeof import('./../../packages/emerald/src/components/EmSlider/EmSliderThumb.vue')['default']
+    EmSliderTrack: typeof import('./../../packages/emerald/src/components/EmSlider/EmSliderTrack.vue')['default']
+    EmStepper: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepper.vue')['default']
+    EmStepperItem: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperItem.vue')['default']
+    EmStepperLabel: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperLabel.vue')['default']
+    EmStepperLabelDescription: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperLabelDescription.vue')['default']
+    EmStepperSeparator: typeof import('./../../packages/emerald/src/components/EmStepper/EmStepperSeparator.vue')['default']
+    EmSwitch: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitch.vue')['default']
+    EmSwitchGroup: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitchGroup.vue')['default']
+    EmSwitchThumb: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitchThumb.vue')['default']
+    EmSwitchTrack: typeof import('./../../packages/emerald/src/components/EmSwitch/EmSwitchTrack.vue')['default']
+    EmTable: typeof import('./../../packages/emerald/src/components/EmTable/EmTable.vue')['default']
+    EmTableBody: typeof import('./../../packages/emerald/src/components/EmTable/EmTableBody.vue')['default']
+    EmTableCell: typeof import('./../../packages/emerald/src/components/EmTable/EmTableCell.vue')['default']
+    EmTableHead: typeof import('./../../packages/emerald/src/components/EmTable/EmTableHead.vue')['default']
+    EmTableHeader: typeof import('./../../packages/emerald/src/components/EmTable/EmTableHeader.vue')['default']
+    EmTableRow: typeof import('./../../packages/emerald/src/components/EmTable/EmTableRow.vue')['default']
+    EmTabs: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabs.vue')['default']
+    EmTabsItem: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabsItem.vue')['default']
+    EmTabsList: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabsList.vue')['default']
+    EmTabsPanel: typeof import('./../../packages/emerald/src/components/EmTabs/EmTabsPanel.vue')['default']
+    EmTag: typeof import('./../../packages/emerald/src/components/EmTag/EmTag.vue')['default']
+    EmTextarea: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextarea.vue')['default']
+    EmTextareaControl: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaControl.vue')['default']
+    EmTextareaDescription: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaDescription.vue')['default']
+    EmTextareaError: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaError.vue')['default']
+    EmTextareaLabel: typeof import('./../../packages/emerald/src/components/EmTextarea/EmTextareaLabel.vue')['default']
+    EmTextField: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextField.vue')['default']
+    EmTextFieldAppend: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldAppend.vue')['default']
+    EmTextFieldControl: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldControl.vue')['default']
+    EmTextFieldDescription: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldDescription.vue')['default']
+    EmTextFieldError: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldError.vue')['default']
+    EmTextFieldLabel: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldLabel.vue')['default']
+    EmTextFieldPrepend: typeof import('./../../packages/emerald/src/components/EmTextField/EmTextFieldPrepend.vue')['default']
+    EmToast: typeof import('./../../packages/emerald/src/components/EmToast/EmToast.vue')['default']
+    EmToastBody: typeof import('./../../packages/emerald/src/components/EmToast/EmToastBody.vue')['default']
+    EmToastClose: typeof import('./../../packages/emerald/src/components/EmToast/EmToastClose.vue')['default']
+    EmToastDescription: typeof import('./../../packages/emerald/src/components/EmToast/EmToastDescription.vue')['default']
+    EmToastIcon: typeof import('./../../packages/emerald/src/components/EmToast/EmToastIcon.vue')['default']
+    EmToastTitle: typeof import('./../../packages/emerald/src/components/EmToast/EmToastTitle.vue')['default']
+    EmTooltip: typeof import('./../../packages/emerald/src/components/EmTooltip/EmTooltip.vue')['default']
+    EmTooltipActivator: typeof import('./../../packages/emerald/src/components/EmTooltip/EmTooltipActivator.vue')['default']
+    EmTooltipContent: typeof import('./../../packages/emerald/src/components/EmTooltip/EmTooltipContent.vue')['default']
+    EmUpload: typeof import('./../../packages/emerald/src/components/EmUpload/EmUpload.vue')['default']
+    EmUploadDropzone: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadDropzone.vue')['default']
+    EmUploadInput: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadInput.vue')['default']
+    EmUploadItem: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadItem.vue')['default']
+    EmUploadList: typeof import('./../../packages/emerald/src/components/EmUpload/EmUploadList.vue')['default']
     ExpansionPanelActivator: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelActivator.vue')['default']
     ExpansionPanelContent: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelContent.vue')['default']
     ExpansionPanelCue: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelCue.vue')['default']
@@ -95,6 +254,9 @@ declare module 'vue' {
     NumberFieldIncrement: typeof import('./../../packages/0/src/components/NumberField/NumberFieldIncrement.vue')['default']
     NumberFieldRoot: typeof import('./../../packages/0/src/components/NumberField/NumberFieldRoot.vue')['default']
     NumberFieldScrub: typeof import('./../../packages/0/src/components/NumberField/NumberFieldScrub.vue')['default']
+    OverflowIndicator: typeof import('./../../packages/0/src/components/Overflow/OverflowIndicator.vue')['default']
+    OverflowItem: typeof import('./../../packages/0/src/components/Overflow/OverflowItem.vue')['default']
+    OverflowRoot: typeof import('./../../packages/0/src/components/Overflow/OverflowRoot.vue')['default']
     PaginationEllipsis: typeof import('./../../packages/0/src/components/Pagination/PaginationEllipsis.vue')['default']
     PaginationFirst: typeof import('./../../packages/0/src/components/Pagination/PaginationFirst.vue')['default']
     PaginationItem: typeof import('./../../packages/0/src/components/Pagination/PaginationItem.vue')['default']
diff --git a/dev/src/composables.d.ts b/dev/src/composables.d.ts
index 674e2484a..4650f26a9 100644
--- a/dev/src/composables.d.ts
+++ b/dev/src/composables.d.ts
@@ -8,20 +8,30 @@ export {}
 declare global {
   const COMMON_ELEMENTS: typeof import('../../packages/0/src/constants/htmlElements').COMMON_ELEMENTS
   const ClientAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ClientAdapter
+  const ClientComboboxAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ClientComboboxAdapter
+  const ClientDataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ClientDataTableAdapter
+  const ComboboxAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxAdapter
   const ComboboxClientAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxClientAdapter
   const ComboboxServerAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxServerAdapter
   const ConsolaLoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').ConsolaLoggerAdapter
   const DEFAULT_DARK: typeof import('../../packages/paper/src/composables/useTheme/index').DEFAULT_DARK
   const DEFAULT_LIGHT: typeof import('../../packages/paper/src/composables/useTheme/index').DEFAULT_LIGHT
   const DataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').DataTableAdapter
+  const DragDropAdapter: typeof import('../../packages/0/src/composables/useDragDrop/index').DragDropAdapter
   const EffectScope: typeof import('vue').EffectScope
   const FeaturesAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').FeaturesAdapter
   const FlagsmithFeatureAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').FlagsmithFeatureAdapter
   const IN_BROWSER: typeof import('../../packages/0/src/constants/globals').IN_BROWSER
+  const KeyboardAdapter: typeof import('../../packages/0/src/composables/useDragDrop/index').KeyboardAdapter
   const LaunchDarklyFeatureAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').LaunchDarklyFeatureAdapter
+  const LocaleAdapter: typeof import('../../packages/0/src/composables/useLocale/index').LocaleAdapter
+  const LoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').LoggerAdapter
   const MemoryAdapter: typeof import('../../packages/0/src/composables/useStorage/index').MemoryAdapter
+  const MemoryStorageAdapter: typeof import('../../packages/0/src/composables/useStorage/index').MemoryStorageAdapter
   const PermissionAdapter: typeof import('../../packages/0/src/composables/usePermissions/index').PermissionAdapter
+  const PermissionsAdapter: typeof import('../../packages/0/src/composables/usePermissions/index').PermissionsAdapter
   const PinoLoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').PinoLoggerAdapter
+  const PointerAdapter: typeof import('../../packages/0/src/composables/useDragDrop/index').PointerAdapter
   const PostHogFeatureAdapter: typeof import('../../packages/0/src/composables/useFeatures/index').PostHogFeatureAdapter
   const SELF_CLOSING_TAGS: typeof import('../../packages/0/src/constants/htmlElements').SELF_CLOSING_TAGS
   const SUPPORTS_INTERSECTION_OBSERVER: typeof import('../../packages/0/src/constants/globals').SUPPORTS_INTERSECTION_OBSERVER
@@ -30,11 +40,18 @@ declare global {
   const SUPPORTS_OBSERVER: typeof import('../../packages/0/src/constants/globals').SUPPORTS_OBSERVER
   const SUPPORTS_TOUCH: typeof import('../../packages/0/src/constants/globals').SUPPORTS_TOUCH
   const ServerAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ServerAdapter
+  const ServerComboboxAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ServerComboboxAdapter
+  const ServerDataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ServerDataTableAdapter
+  const StorageAdapter: typeof import('../../packages/0/src/composables/useStorage/index').StorageAdapter
   const TemporalDateAdapter: typeof import('../../packages/0/src/composables/useDate/index').TemporalDateAdapter
+  const V0LocaleAdapter: typeof import('../../packages/0/src/composables/useLocale/index').V0LocaleAdapter
+  const V0LoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').V0LoggerAdapter
+  const V0RtlAdapter: typeof import('../../packages/0/src/composables/useRtl/index').V0RtlAdapter
   const V0StyleSheetThemeAdapter: typeof import('../../packages/0/src/composables/useTheme/index').V0StyleSheetThemeAdapter
   const V0UnheadThemeAdapter: typeof import('../../packages/0/src/composables/useTheme/index').V0UnheadThemeAdapter
   const V0_ELEVATION_KEY: typeof import('../../packages/paper/src/composables/useElevation/index').V0_ELEVATION_KEY
   const VirtualAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').VirtualAdapter
+  const VirtualDataTableAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').VirtualDataTableAdapter
   const Vuetify0DateAdapter: typeof import('../../packages/0/src/composables/useDate/index').Vuetify0DateAdapter
   const Vuetify0LocaleAdapter: typeof import('../../packages/0/src/composables/useLocale/index').Vuetify0LocaleAdapter
   const Vuetify0LoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').Vuetify0LoggerAdapter
@@ -75,6 +92,7 @@ declare global {
   const createHydrationContext: typeof import('../../packages/0/src/composables/useHydration/index').createHydrationContext
   const createHydrationPlugin: typeof import('../../packages/0/src/composables/useHydration/index').createHydrationPlugin
   const createInput: typeof import('../../packages/0/src/composables/createInput/index').createInput
+  const createKanban: typeof import('../../packages/0/src/composables/createKanban/index').createKanban
   const createLocale: typeof import('../../packages/0/src/composables/useLocale/index').createLocale
   const createLocaleContext: typeof import('../../packages/0/src/composables/useLocale/index').createLocaleContext
   const createLocaleFallback: typeof import('../../packages/0/src/composables/useLocale/index').createLocaleFallback
@@ -120,6 +138,7 @@ declare global {
   const createSingle: typeof import('../../packages/0/src/composables/createSingle/index').createSingle
   const createSingleContext: typeof import('../../packages/0/src/composables/createSingle/index').createSingleContext
   const createSlider: typeof import('../../packages/0/src/composables/createSlider/index').createSlider
+  const createSortable: typeof import('../../packages/0/src/composables/createSortable/index').createSortable
   const createStack: typeof import('../../packages/0/src/composables/useStack/index').createStack
   const createStackContext: typeof import('../../packages/0/src/composables/useStack/index').createStackContext
   const createStackPlugin: typeof import('../../packages/0/src/composables/useStack/index').createStackPlugin
@@ -179,6 +198,7 @@ declare global {
   const isStandardSchema: typeof import('../../packages/0/src/composables/useRules/index').isStandardSchema
   const isString: typeof import('../../packages/0/src/utilities/helpers').isString
   const isSymbol: typeof import('../../packages/0/src/utilities/helpers').isSymbol
+  const isThenable: typeof import('../../packages/0/src/utilities/helpers').isThenable
   const isUndefined: typeof import('../../packages/0/src/utilities/helpers').isUndefined
   const markRaw: typeof import('vue').markRaw
   const mergeDeep: typeof import('../../packages/0/src/utilities/helpers').mergeDeep
@@ -240,8 +260,10 @@ declare global {
   const useCssVars: typeof import('vue').useCssVars
   const useDataTable: typeof import('../../packages/0/src/composables/createDataTable/index').useDataTable
   const useDate: typeof import('../../packages/0/src/composables/useDate/index').useDate
+  const useDelay: typeof import('../../packages/0/src/composables/useDelay/index').useDelay
   const useDimensions: typeof import('../../packages/paper/src/composables/useDimensions/index').useDimensions
   const useDocumentEventListener: typeof import('../../packages/0/src/composables/useEventListener/index').useDocumentEventListener
+  const useDragDrop: typeof import('../../packages/0/src/composables/useDragDrop/index').useDragDrop
   const useElementIntersection: typeof import('../../packages/0/src/composables/useIntersectionObserver/index').useElementIntersection
   const useElementSize: typeof import('../../packages/0/src/composables/useResizeObserver/index').useElementSize
   const useElevation: typeof import('../../packages/paper/src/composables/useElevation/index').useElevation
@@ -336,13 +358,13 @@ declare global {
   export type { BreadcrumbTicketInput, BreadcrumbTicket, BreadcrumbsContext, BreadcrumbsOptions, BreadcrumbsContextOptions } from '../../packages/0/src/composables/createBreadcrumbs/index'
   import('../../packages/0/src/composables/createBreadcrumbs/index')
   // @ts-ignore
-  export type { ComboboxOptions, ComboboxContext, ComboboxAdapterContext, ComboboxAdapterInterface, ComboboxAdapterResult, ComboboxClientAdapterOptions } from '../../packages/0/src/composables/createCombobox/index'
+  export type { ComboboxOptions, ComboboxContext, ClientComboboxAdapterOptions, ComboboxAdapterContext, ComboboxAdapterResult } from '../../packages/0/src/composables/createCombobox/index'
   import('../../packages/0/src/composables/createCombobox/index')
   // @ts-ignore
   export type { ContextKey, CreateContextOptions } from '../../packages/0/src/composables/createContext/index'
   import('../../packages/0/src/composables/createContext/index')
   // @ts-ignore
-  export type { KeysOfType, SelectStrategy, DataTableColumn, DataTableSort, DataTableSelection, DataTableGroup, DataTableGrouping, DataTableExpansion, DataTableOptions, DataTableContext, DataTableContextOptions, DataTableAdapterContext, DataTableAdapterInterface, DataTableAdapterResult, SortDirection, SortEntry, ServerAdapterOptions, ColumnNode, InternalHeader } from '../../packages/0/src/composables/createDataTable/index'
+  export type { KeysOfType, SelectStrategy, DataTableColumn, DataTableSort, DataTableSelection, DataTableGroup, DataTableGrouping, DataTableExpansion, DataTableOptions, DataTableContext, DataTableContextOptions, DataTableAdapterContext, DataTableAdapterResult, SortDirection, SortEntry, ServerDataTableAdapterOptions, ColumnNode, InternalHeader } from '../../packages/0/src/composables/createDataTable/index'
   import('../../packages/0/src/composables/createDataTable/index')
   // @ts-ignore
   export type { Primitive, FilterQuery, FilterItem, FilterMode, FilterFunction, FilterOptions, FilterResult, FilterContext, FilterContextOptions } from '../../packages/0/src/composables/createFilter/index'
@@ -357,6 +379,9 @@ declare global {
   export type { InputState, InputOptions, InputContext } from '../../packages/0/src/composables/createInput/index'
   import('../../packages/0/src/composables/createInput/index')
   // @ts-ignore
+  export type { KanbanOptions, KanbanColumnTicketInput, KanbanColumnTicket, KanbanTransferPayload, KanbanEventListener, KanbanContext } from '../../packages/0/src/composables/createKanban/index'
+  import('../../packages/0/src/composables/createKanban/index')
+  // @ts-ignore
   export type { ModelTicketInput, ModelTicket, ModelContext, ModelOptions } from '../../packages/0/src/composables/createModel/index'
   import('../../packages/0/src/composables/createModel/index')
   // @ts-ignore
@@ -396,6 +421,9 @@ declare global {
   export type { SliderTicketInput, SliderOptions, SliderContext } from '../../packages/0/src/composables/createSlider/index'
   import('../../packages/0/src/composables/createSlider/index')
   // @ts-ignore
+  export type { SortableTicketInput, SortableTicket, SortableOptions, SortableMovePayload, SortableEventListener, SortableContext } from '../../packages/0/src/composables/createSortable/index'
+  import('../../packages/0/src/composables/createSortable/index')
+  // @ts-ignore
   export type { StepTicketInput, StepTicket, StepContext, StepOptions, StepContextOptions } from '../../packages/0/src/composables/createStep/index'
   import('../../packages/0/src/composables/createStep/index')
   // @ts-ignore
@@ -426,10 +454,16 @@ declare global {
   export type { DateContext, DateOptions, DateContextOptions, DatePluginOptions, DateAdapter } from '../../packages/0/src/composables/useDate/index'
   import('../../packages/0/src/composables/useDate/index')
   // @ts-ignore
+  export type { UseDelayOptions, UseDelayStartOptions, UseDelayReturn } from '../../packages/0/src/composables/useDelay/index'
+  import('../../packages/0/src/composables/useDelay/index')
+  // @ts-ignore
+  export type { Orientation, DragType, DropIndicator, DropPosition, DragVia, ActiveDrag, DraggableTicketInput, DraggableTicket, DropZoneTicketInput, DropZoneTicket, DragDropPlugin, DragDropOptions, DraggablesContext, ZonesContext, DragDropContext, DragDropAdapterContext, DragDropAdapterEmit, KeyboardAdapterOptions, PointerAdapterOptions } from '../../packages/0/src/composables/useDragDrop/index'
+  import('../../packages/0/src/composables/useDragDrop/index')
+  // @ts-ignore
   export type { CleanupFunction, EventHandler } from '../../packages/0/src/composables/useEventListener/index'
   import('../../packages/0/src/composables/useEventListener/index')
   // @ts-ignore
-  export type { FeatureTicketInput, FeatureTicket, FeatureContext, FeatureOptions, FeatureContextOptions, FeaturePluginOptions, FeaturesAdapterFlags, FeaturesAdapterInterface, FeaturesAdapterValue } from '../../packages/0/src/composables/useFeatures/index'
+  export type { FeatureTicketInput, FeatureTicket, FeatureContext, FeatureOptions, FeatureContextOptions, FeaturePluginOptions, FeaturesAdapterFlags, FeaturesAdapterValue } from '../../packages/0/src/composables/useFeatures/index'
   import('../../packages/0/src/composables/useFeatures/index')
   // @ts-ignore
   export type { UseHotkeyOptions, UseHotkeyReturn, PlatformContext } from '../../packages/0/src/composables/useHotkey/index'
@@ -447,10 +481,10 @@ declare global {
   export type { LazyOptions, LazyContext } from '../../packages/0/src/composables/useLazy/index'
   import('../../packages/0/src/composables/useLazy/index')
   // @ts-ignore
-  export type { LocaleRecord, LocaleTicketInput, LocaleTicket, LocaleContext, LocaleOptions, LocaleContextOptions, LocalePluginOptions, LocaleAdapter, LocaleAdapterContext } from '../../packages/0/src/composables/useLocale/index'
+  export type { LocaleRecord, LocaleTicketInput, LocaleTicket, LocaleContext, LocaleOptions, LocaleContextOptions, LocalePluginOptions, LocaleAdapterContext } from '../../packages/0/src/composables/useLocale/index'
   import('../../packages/0/src/composables/useLocale/index')
   // @ts-ignore
-  export type { LoggerContext, LoggerOptions, LoggerContextOptions, LoggerPluginOptions, LoggerAdapter, LogLevel } from '../../packages/0/src/composables/useLogger/index'
+  export type { LoggerContext, LoggerOptions, LoggerContextOptions, LoggerPluginOptions, LogLevel } from '../../packages/0/src/composables/useLogger/index'
   import('../../packages/0/src/composables/useLogger/index')
   // @ts-ignore
   export type { MediaQueryContext } from '../../packages/0/src/composables/useMediaQuery/index'
@@ -459,10 +493,10 @@ declare global {
   export type { ObservableNodeList, MutationObserverRecord, UseMutationObserverOptions, UseMutationObserverReturn } from '../../packages/0/src/composables/useMutationObserver/index'
   import('../../packages/0/src/composables/useMutationObserver/index')
   // @ts-ignore
-  export type { NotificationSeverity, NotificationInput, NotificationTicket, NotificationsAdapterContext, NotificationsAdapterInterface, NotificationsOptions, NotificationsContext, NotificationsPluginOptions } from '../../packages/0/src/composables/useNotifications/index'
+  export type { NotificationSeverity, NotificationInput, NotificationTicket, NotificationsAdapterContext, NotificationsOptions, NotificationsContext, NotificationsPluginOptions } from '../../packages/0/src/composables/useNotifications/index'
   import('../../packages/0/src/composables/useNotifications/index')
   // @ts-ignore
-  export type { PermissionTicket, PermissionContext, PermissionOptions, PermissionContextOptions, PermissionPluginOptions, PermissionAdapterInterface } from '../../packages/0/src/composables/usePermissions/index'
+  export type { PermissionTicket, PermissionContext, PermissionOptions, PermissionContextOptions, PermissionPluginOptions } from '../../packages/0/src/composables/usePermissions/index'
   import('../../packages/0/src/composables/usePermissions/index')
   // @ts-ignore
   export type { PopoverOptions, PopoverReturn } from '../../packages/0/src/composables/usePopover/index'
@@ -495,7 +529,7 @@ declare global {
   export type { StackTicketInput, StackTicket, StackContext, StackOptions, StackContextOptions, StackPluginOptions } from '../../packages/0/src/composables/useStack/index'
   import('../../packages/0/src/composables/useStack/index')
   // @ts-ignore
-  export type { StorageContext, StorageOptions, StorageContextOptions, StoragePluginOptions, StorageAdapter, StorageType } from '../../packages/0/src/composables/useStorage/index'
+  export type { StorageContext, StorageOptions, StorageContextOptions, StoragePluginOptions, StorageType } from '../../packages/0/src/composables/useStorage/index'
   import('../../packages/0/src/composables/useStorage/index')
   // @ts-ignore
   export type { Colors, ThemeColors, ThemeRecord, ThemeTicketInput, ThemeTicket, ThemeContext, ThemeOptions, ThemeContextOptions, ThemePluginOptions, ThemeAdapter } from '../../packages/0/src/composables/useTheme/index'
@@ -522,34 +556,40 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly COMMON_ELEMENTS: UnwrapRef<typeof import('../../packages/0/src/constants/htmlElements')['COMMON_ELEMENTS']>
-    readonly ClientAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ClientAdapter']>
-    readonly ComboboxClientAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxClientAdapter']>
-    readonly ComboboxServerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxServerAdapter']>
+    readonly ClientComboboxAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ClientComboboxAdapter']>
+    readonly ClientDataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ClientDataTableAdapter']>
+    readonly ComboboxAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxAdapter']>
     readonly ConsolaLoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['ConsolaLoggerAdapter']>
     readonly DEFAULT_DARK: UnwrapRef<typeof import('../../packages/paper/src/composables/useTheme/index')['DEFAULT_DARK']>
     readonly DEFAULT_LIGHT: UnwrapRef<typeof import('../../packages/paper/src/composables/useTheme/index')['DEFAULT_LIGHT']>
     readonly DataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['DataTableAdapter']>
+    readonly DragDropAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['DragDropAdapter']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly FeaturesAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useFeatures/index')['FeaturesAdapter']>
     readonly IN_BROWSER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['IN_BROWSER']>
-    readonly MemoryAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useStorage/index')['MemoryAdapter']>
-    readonly PermissionAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/usePermissions/index')['PermissionAdapter']>
+    readonly KeyboardAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['KeyboardAdapter']>
+    readonly LocaleAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['LocaleAdapter']>
+    readonly LoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['LoggerAdapter']>
+    readonly MemoryStorageAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useStorage/index')['MemoryStorageAdapter']>
+    readonly PermissionsAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/usePermissions/index')['PermissionsAdapter']>
     readonly PinoLoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['PinoLoggerAdapter']>
+    readonly PointerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['PointerAdapter']>
     readonly SELF_CLOSING_TAGS: UnwrapRef<typeof import('../../packages/0/src/constants/htmlElements')['SELF_CLOSING_TAGS']>
     readonly SUPPORTS_INTERSECTION_OBSERVER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_INTERSECTION_OBSERVER']>
     readonly SUPPORTS_MATCH_MEDIA: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_MATCH_MEDIA']>
     readonly SUPPORTS_MUTATION_OBSERVER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_MUTATION_OBSERVER']>
     readonly SUPPORTS_OBSERVER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_OBSERVER']>
     readonly SUPPORTS_TOUCH: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_TOUCH']>
-    readonly ServerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ServerAdapter']>
+    readonly ServerComboboxAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ServerComboboxAdapter']>
+    readonly ServerDataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ServerDataTableAdapter']>
+    readonly StorageAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useStorage/index')['StorageAdapter']>
+    readonly V0LocaleAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['V0LocaleAdapter']>
+    readonly V0LoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['V0LoggerAdapter']>
+    readonly V0RtlAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useRtl/index')['V0RtlAdapter']>
     readonly V0StyleSheetThemeAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useTheme/index')['V0StyleSheetThemeAdapter']>
     readonly V0UnheadThemeAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useTheme/index')['V0UnheadThemeAdapter']>
     readonly V0_ELEVATION_KEY: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['V0_ELEVATION_KEY']>
-    readonly VirtualAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['VirtualAdapter']>
-    readonly Vuetify0LocaleAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['Vuetify0LocaleAdapter']>
-    readonly Vuetify0LoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['Vuetify0LoggerAdapter']>
-    readonly Vuetify0RtlAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useRtl/index')['Vuetify0RtlAdapter']>
+    readonly VirtualDataTableAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['VirtualDataTableAdapter']>
     readonly __LOGGER_ENABLED__: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['__LOGGER_ENABLED__']>
     readonly apca: UnwrapRef<typeof import('../../packages/0/src/utilities/apca')['apca']>
     readonly clamp: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['clamp']>
@@ -584,6 +624,7 @@ declare module 'vue' {
     readonly createHydrationContext: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationContext']>
     readonly createHydrationPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationPlugin']>
     readonly createInput: UnwrapRef<typeof import('../../packages/0/src/composables/createInput/index')['createInput']>
+    readonly createKanban: UnwrapRef<typeof import('../../packages/0/src/composables/createKanban/index')['createKanban']>
     readonly createLocale: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocale']>
     readonly createLocaleContext: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocaleContext']>
     readonly createLocaleFallback: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocaleFallback']>
@@ -629,6 +670,7 @@ declare module 'vue' {
     readonly createSingle: UnwrapRef<typeof import('../../packages/0/src/composables/createSingle/index')['createSingle']>
     readonly createSingleContext: UnwrapRef<typeof import('../../packages/0/src/composables/createSingle/index')['createSingleContext']>
     readonly createSlider: UnwrapRef<typeof import('../../packages/0/src/composables/createSlider/index')['createSlider']>
+    readonly createSortable: UnwrapRef<typeof import('../../packages/0/src/composables/createSortable/index')['createSortable']>
     readonly createStack: UnwrapRef<typeof import('../../packages/0/src/composables/useStack/index')['createStack']>
     readonly createStackContext: UnwrapRef<typeof import('../../packages/0/src/composables/useStack/index')['createStackContext']>
     readonly createStackPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useStack/index')['createStackPlugin']>
@@ -686,6 +728,7 @@ declare module 'vue' {
     readonly isStandardSchema: UnwrapRef<typeof import('../../packages/0/src/composables/useRules/index')['isStandardSchema']>
     readonly isString: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isString']>
     readonly isSymbol: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isSymbol']>
+    readonly isThenable: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isThenable']>
     readonly isUndefined: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isUndefined']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly mergeDeep: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['mergeDeep']>
@@ -745,8 +788,10 @@ declare module 'vue' {
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
     readonly useDataTable: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['useDataTable']>
     readonly useDate: UnwrapRef<typeof import('../../packages/0/src/composables/useDate/index')['useDate']>
+    readonly useDelay: UnwrapRef<typeof import('../../packages/0/src/composables/useDelay/index')['useDelay']>
     readonly useDimensions: UnwrapRef<typeof import('../../packages/paper/src/composables/useDimensions/index')['useDimensions']>
     readonly useDocumentEventListener: UnwrapRef<typeof import('../../packages/0/src/composables/useEventListener/index')['useDocumentEventListener']>
+    readonly useDragDrop: UnwrapRef<typeof import('../../packages/0/src/composables/useDragDrop/index')['useDragDrop']>
     readonly useElementIntersection: UnwrapRef<typeof import('../../packages/0/src/composables/useIntersectionObserver/index')['useElementIntersection']>
     readonly useElementSize: UnwrapRef<typeof import('../../packages/0/src/composables/useResizeObserver/index')['useElementSize']>
     readonly useElevation: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['useElevation']>
diff --git a/dev/src/main.ts b/dev/src/main.ts
index bc8c39904..6bba0631c 100644
--- a/dev/src/main.ts
+++ b/dev/src/main.ts
@@ -2,6 +2,7 @@ import { ViteSSG } from 'vite-ssg'
 
 // Context
 import App from './App.vue'
+import EmeraldKitchenSink from './EmeraldKitchenSink.vue'
 import Playground from './Playground.vue'
 
 import 'virtual:uno.css'
@@ -10,7 +11,12 @@ import { registerPlugins } from './plugins'
 
 export const createApp = ViteSSG(
   App,
-  { routes: [{ path: '/', component: Playground }] },
+  {
+    routes: [
+      { path: '/', component: Playground },
+      { path: '/emerald', component: EmeraldKitchenSink },
+    ],
+  },
   async ({ app }) => {
     registerPlugins(app)
   })
diff --git a/dev/vite.config.ts b/dev/vite.config.ts
index 59284951e..742abb4a5 100644
--- a/dev/vite.config.ts
+++ b/dev/vite.config.ts
@@ -16,6 +16,7 @@ export default defineConfig({
     UnocssVitePlugin(),
     Components({
       dirs: [
+        '../packages/emerald/src/components/',
         '../packages/paper/src/components/',
         '../packages/0/src/components/',
       ],
@@ -53,6 +54,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('src', import.meta.url)),
       '@vuetify/v0': fileURLToPath(new URL('../packages/0/src', import.meta.url)),
       '@vuetify/paper': fileURLToPath(new URL('../packages/paper/src', import.meta.url)),
+      '@paper/emerald': fileURLToPath(new URL('../packages/emerald/src', import.meta.url)),
       // internal
       '#v0': fileURLToPath(new URL('../packages/0/src', import.meta.url)),
       '#paper': fileURLToPath(new URL('../packages/paper/src', import.meta.url)),