From d583476eed126d98c52b9d55038b8f0dcabb8952 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 12:17:25 -0700
Subject: [PATCH 1/4] improvement(emcn): share ordinary action geometry in
 Button

---
 .claude/rules/emcn-components.md              | 14 +++
 .cursor/rules/emcn-components.mdc             | 14 +++
 .../select-field/select-options-editor.tsx    |  3 +-
 .../components/table-filter/table-filter.tsx  |  3 +-
 .../bulk-action-button/bulk-action-button.tsx |  2 +-
 .../src/components/button/button.test.tsx     | 86 ++++++++++++++++++-
 .../emcn/src/components/button/button.tsx     | 42 +++++++--
 .../composer-action-button.tsx                |  2 +-
 8 files changed, 156 insertions(+), 10 deletions(-)

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index f02ff3946e5..fd57ee5c00c 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -56,3 +56,17 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 1ac5fc577f8..3f5cd1bf90e 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -57,3 +57,17 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
index f15e2c82ef6..93f746d7c44 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
@@ -79,7 +79,8 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
             size='sm'
             onClick={() => remove(option.id)}
             iconPadding='sm'
-            className='size-7 shrink-0'
+            iconSize='regular'
+            className='shrink-0'
             aria-label={`Remove ${option.name || 'option'}`}
           >
             <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index 8fe52025569..c005de9d781 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -383,7 +383,8 @@ const FilterRuleRow = memo(function FilterRuleRow({
         size='sm'
         onClick={() => onRemove(rule.id)}
         iconPadding='sm'
-        className='size-7 shrink-0'
+        iconSize='regular'
+        className='shrink-0'
         aria-label='Remove filter'
       >
         <X className='size-[12px]' />
diff --git a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
index 8088e98f093..e9717c2f7b9 100644
--- a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
+++ b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
@@ -19,7 +19,7 @@ export const bulkActionButtonVariants = cva(
 )
 
 export interface BulkActionButtonProps
-  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the icon action; tooltip content is supplied separately. */
   'aria-label': string
   /**
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
index c0b4fc35df3..4c8cae79dc0 100644
--- a/packages/emcn/src/components/button/button.test.tsx
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -1,5 +1,7 @@
-/** @vitest-environment node */
+/** @vitest-environment jsdom */
 /** biome-ignore assist/source/organizeImports: Preserve the documented core/external/UI import order. */
+import { act, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import { Button } from '@sim/emcn'
@@ -22,6 +24,9 @@ describe('Button iconSize', () => {
   for (const [iconSize, previousClass] of [
     ['compact', 'size-6 p-0'],
     ['compact-fixed', 'size-[24px] p-0'],
+    ['regular', 'size-7 p-0'],
+    ['roomy', 'size-8 p-0'],
+    ['touch', 'size-10 p-0'],
   ] as const) {
     it.each(TREATMENTS)(
       `preserves the ${iconSize} treatment with size=$size and variant=$variant`,
@@ -65,3 +70,82 @@ describe('Button iconSize', () => {
     expect(markup).not.toContain('iconPadding')
   })
 })
+
+describe('Button shared action geometry', () => {
+  it('composes responsive geometry, explicit padding and round shape without changing icon treatment', () => {
+    const markup = renderToStaticMarkup(
+      <Button
+        variant='ghost'
+        size='icon'
+        iconSize={{ base: 'touch', sm: 'regular' }}
+        iconPadding='sm'
+        shape='round'
+        aria-label='Edit'
+      >
+        <svg strokeWidth={1.55} />
+      </Button>
+    )
+    expect(markup).toContain('size-10')
+    expect(markup).toContain('sm:size-7')
+    expect(markup).not.toContain('size-[20px]')
+    expect(markup).toContain('p-1')
+    expect(markup).not.toContain('p-0')
+    expect(markup).toContain('rounded-full')
+    expect(markup).not.toContain('rounded-sm')
+    expect(markup).toContain('[stroke-width:1.25]')
+    expect(markup).toContain('text-[var(--text-icon-muted)]')
+    expect(markup).not.toMatch(/(?:iconSize|iconPadding|shape)=/)
+  })
+
+  it('retains an inline caption size and supports a base-only responsive value', () => {
+    const inline = renderToStaticMarkup(<Button size='inline'>Generate</Button>)
+    expect(inline).toContain('h-[20px]')
+    expect(inline).toContain('text-caption')
+    expect(inline).toContain('px-1.5 py-0')
+    const baseOnly = renderToStaticMarkup(<Button iconSize={{ base: 'roomy' }} aria-label='Run' />)
+    expect(baseOnly).toContain('size-8')
+    expect(baseOnly).not.toContain('sm:size')
+  })
+
+  it('forwards refs and native focus, submission and disabled behavior with responsive sizing', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const ref = createRef<HTMLButtonElement>()
+    let submissions = 0
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const render = (disabled: boolean) =>
+      act(() =>
+        root.render(
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submissions++
+            }}
+          >
+            <Button
+              ref={ref}
+              type='submit'
+              iconSize={{ base: 'touch', sm: 'regular' }}
+              disabled={disabled}
+              aria-label='Apply'
+            />
+          </form>
+        )
+      )
+    try {
+      render(false)
+      ref.current?.focus()
+      expect(document.activeElement).toBe(ref.current)
+      act(() => ref.current?.click())
+      expect(submissions).toBe(1)
+      render(true)
+      act(() => ref.current?.click())
+      expect(submissions).toBe(1)
+      expect(ref.current?.disabled).toBe(true)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+    }
+  })
+})
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index bc2d2c6ef66..649c3524432 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -49,10 +49,17 @@ const buttonVariants = cva(
         sm: 'px-1.5 py-1 text-[length:11px]',
         md: 'px-2 py-1.5 text-[length:12px]',
         icon: 'size-[20px] rounded-sm p-0 [&_svg]:[stroke-width:1.25]',
+        inline: 'h-[20px] px-1.5 py-0 text-caption',
       },
       iconSize: {
         compact: 'size-6 p-0',
         'compact-fixed': 'size-[24px] p-0',
+        regular: 'size-7 p-0',
+        roomy: 'size-8 p-0',
+        touch: 'size-10 p-0',
+      },
+      shape: {
+        round: 'rounded-full',
       },
       iconPadding: {
         sm: 'p-1',
@@ -76,18 +83,31 @@ const buttonVariants = cva(
   }
 )
 
+type ButtonIconSize = NonNullable<VariantProps<typeof buttonVariants>['iconSize']>
+
+const responsiveIconSizes = {
+  compact: 'sm:size-6',
+  'compact-fixed': 'sm:size-[24px]',
+  regular: 'sm:size-7',
+  roomy: 'sm:size-8',
+  touch: 'sm:size-10',
+} satisfies Record<ButtonIconSize, string>
+
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    Omit<VariantProps<typeof buttonVariants>, 'iconSize'> {
   /**
    * Square icon-action geometry without changing the selected size's typography,
    * corner radius, icon stroke or color. `compact` follows the spacing scale
    * (24px at the default root font size); `compact-fixed` stays at 24px.
-   * Both remove padding; an explicit iconPadding or className can override it.
+   * Regular, roomy and touch follow the spacing scale (28px, 32px and 40px
+   * at the default root font size). A responsive
+   * value changes geometry at the standard sm breakpoint. All remove padding;
+   * explicit iconPadding or className can override it.
    * Omit to retain the selected size's geometry.
    * @example <Button variant='ghost' iconSize='compact' aria-label='Remove'><X /></Button>
    */
-  iconSize?: VariantProps<typeof buttonVariants>['iconSize']
+  iconSize?: ButtonIconSize | { base: ButtonIconSize; sm?: ButtonIconSize } | null
   /**
    * Symmetric padding for icon actions whose content or layout determines their size.
    * Preserves the selected size's typography, corner radius and icon stroke.
@@ -98,11 +118,23 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconSize, iconPadding, ...props }, ref) => {
+  ({ className, variant, size, iconSize, iconPadding, shape, ...props }, ref) => {
+    const baseIconSize = typeof iconSize === 'object' ? iconSize?.base : iconSize
+    const smIconSize = typeof iconSize === 'object' ? iconSize?.sm : undefined
     return (
       <button
         ref={ref}
-        className={cn(buttonVariants({ variant, size, iconSize, iconPadding }), className)}
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            iconSize: baseIconSize,
+            iconPadding,
+            shape,
+          }),
+          smIconSize && responsiveIconSizes[smIconSize],
+          className
+        )}
         {...props}
       />
     )
diff --git a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
index 0a466fc0544..d10a9e27b1b 100644
--- a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
+++ b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
@@ -27,7 +27,7 @@ export const composerActionButtonVariants = cva('rounded-full p-0', {
 })
 
 export interface ComposerActionButtonProps
-  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the caller's icon action. */
   'aria-label': string
   /** 28px by default; `sm` retains compact chat's 22px geometry and hover treatment. */

From a8070bcf43dbb9494455dbffd7092b0726aeb328 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 12:29:19 -0700
Subject: [PATCH 2/4] improvement(emcn): consolidate selection controls and
 styling options

---
 .claude/rules/emcn-components.md              |  14 +-
 .cursor/rules/emcn-components.mdc             |  14 +-
 CLAUDE.md                                     |   4 +-
 .../chat/components/auth/email/email-auth.tsx |   9 +-
 .../auth/password/password-auth.tsx           |  50 +--
 .../chat/components/input/input.tsx           |   2 +-
 .../enterprise-menu-preview.tsx               |   9 +-
 .../components/contact-form/contact-form.tsx  |   7 +-
 .../demo/components/demo-form/demo-form.tsx   |  12 +-
 .../enterprise-members-preview.tsx            |  16 +-
 .../log-history-preview.tsx                   |   9 +-
 .../lead-record-detail/lead-record-detail.tsx |   8 +-
 apps/sim/app/f/[token]/public-file-auth.tsx   |  51 +--
 .../app/f/[token]/public-file-email-auth.tsx  |   7 +-
 .../app/f/[token]/public-file-sso-auth.tsx    |   7 +-
 apps/sim/app/playground/page.tsx              |  27 +-
 .../invite-modal/invite-modal.test.tsx        |   2 +-
 .../components/invite-modal/invite-modal.tsx  |  19 +-
 .../components/action-bar/action-bar.tsx      |  94 ++--
 .../[block]/integration-block-detail.tsx      |   8 +-
 .../connect-slack-bot-modal.tsx               |  19 +-
 .../document-tags-modal.tsx                   |   2 +-
 .../[workspaceId]/knowledge/[id]/base.tsx     |  30 +-
 .../[id]/components/action-bar/action-bar.tsx | 126 +++---
 .../connector-access-field.tsx                |   9 +-
 .../connector-document-status-filter.tsx      |   9 +-
 .../[workspaceId]/knowledge/knowledge.tsx     |  34 +-
 .../components/member-list/member-list.tsx    |   2 +-
 .../components/sandbox-create-modal.tsx       |   8 +-
 .../components/sandbox-editor.test.tsx        |   1 -
 .../sandboxes/components/sandbox-editor.tsx   |   8 +-
 .../organization-member-lists.tsx             |  30 +-
 .../components/teammates/teammates.tsx        |   9 +-
 .../select-field/select-value-editor.tsx      |  36 +-
 .../table-action-bar/table-action-bar.tsx     |  78 ++--
 .../components/table-filter/table-filter.tsx  |  39 +-
 .../deploy-modal/components/chat/chat.tsx     |   6 +-
 .../general/components/api-info-modal.tsx     |   4 +-
 .../deploy-modal/components/mcp/mcp.tsx       |   6 +-
 .../components/deploy-modal/deploy-modal.tsx  |   8 +-
 .../model-fallback-list.test.tsx              |  15 +
 .../model-fallback-list.tsx                   |   9 +-
 .../slack-setup-wizard/slack-setup-wizard.tsx |   8 +-
 .../emails/_styles/base.tokens.test.ts        |  20 +-
 .../sim/components/permissions/member-row.tsx |   8 +-
 .../components/group-detail.tsx               |  26 +-
 .../components/workspace-select.tsx           |  26 +-
 .../organization-access-requests.tsx          |   8 +-
 ...edential-group-add-resource-modal.test.tsx |  49 +--
 .../credential-group-add-resource-modal.tsx   |  15 +-
 ...rganization-workspace-grant-modal.test.tsx |  12 +-
 .../organization-workspace-grant-modal.tsx    |  17 +-
 .../components/data-retention-settings.tsx    |  16 +-
 .../components/activity-panel.tsx             |  18 +-
 apps/sim/ee/sso/components/sso-auth.tsx       |  11 +-
 apps/sim/ee/sso/components/sso-form.test.tsx  |   5 +-
 apps/sim/ee/sso/components/sso-form.tsx       |   9 +-
 .../emcn/src/components/badge/badge.test.tsx  |  30 ++
 packages/emcn/src/components/badge/badge.tsx  |   7 +-
 .../bulk-action-bar/bulk-action-bar.tsx       |  31 ++
 .../bulk-action-button.test.tsx               |  49 +--
 .../bulk-action-button/bulk-action-button.tsx |  24 +-
 .../emcn/src/components/button/button.tsx     |   3 -
 .../emcn/src/components/checkbox/checkbox.tsx |   6 +-
 .../chip-button-group/chip-button-group.tsx   |  11 +-
 .../chip-combobox/chip-combobox.tsx           |  10 +-
 .../chip-date-picker/chip-date-picker.tsx     |   2 +-
 .../chip-dropdown/chip-dropdown.test.tsx      | 101 -----
 .../chip-dropdown/chip-dropdown.tsx           | 407 ------------------
 .../components/chip-input/chip-input.test.tsx |  58 ++-
 .../src/components/chip-modal/chip-modal.tsx  |  15 +-
 .../chip-select/chip-select.dom.test.tsx      | 301 +++++++++++--
 .../chip-select/chip-select.test.ts           |  17 +-
 .../components/chip-select/chip-select.tsx    | 235 ++++++----
 .../components/chip-switch/chip-switch.tsx    |  34 +-
 .../emcn/src/components/chip/chip-chevron.tsx |   2 +-
 .../emcn/src/components/chip/chip-chrome.ts   |   9 +-
 packages/emcn/src/components/chip/chip.tsx    |   8 +-
 .../src/components/chip/segmented-control.ts  |   3 +-
 .../emcn/src/components/combobox/combobox.tsx |   7 +-
 .../dropdown-menu/dropdown-menu.tsx           |  10 +-
 packages/emcn/src/components/index.ts         |   8 +-
 .../src/components/info-card/info-card.tsx    |  10 +-
 .../modal/modal-interactions.test.tsx         |  11 +-
 packages/emcn/src/components/modal/modal.tsx  |   4 +-
 .../progress-item/progress-item.tsx           |  26 +-
 .../emcn/src/components/textarea/textarea.tsx |  30 +-
 .../components/time-picker/time-picker.tsx    |   7 +-
 88 files changed, 1247 insertions(+), 1334 deletions(-)
 create mode 100644 packages/emcn/src/components/badge/badge.test.tsx
 create mode 100644 packages/emcn/src/components/bulk-action-bar/bulk-action-bar.tsx
 delete mode 100644 packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx
 delete mode 100644 packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index fd57ee5c00c..af477a7d886 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -6,14 +6,14 @@ paths:
 
 # EMCN Components
 
-Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`/`ChipDropdown`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
+Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
 
 ## Chip chrome — single source of truth
 
 Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
 
 - **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells), and the row-state pair `chipHoverSurfaceClass` / `chipActiveSurfaceClass` (hover vs. selected — mutually exclusive, so a selected row holds its surface through hover; every hand-rolled row imports these rather than restating the literals). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
-- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
+- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipSelect`, `ChipDatePicker`) reuses it for visual parity.
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border-1` border.
 
@@ -25,14 +25,14 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
-- **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
-- **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
+- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
+- **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
 - **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
-- **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
+- **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
-- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipSelect` instead.
 - **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. A region that scrolls sideways (a tab row, a chip strip) uses `useScrollEdges(ref, { axis: 'x' })` with `scrollFadeXClass`; the attributes helper is shared. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 
@@ -50,7 +50,7 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 
 - **One source of truth for shared chrome.** Compose from `chip-chrome.ts` / `chipVariants`; never duplicate the chrome string.
 - **`cn()` for a single state toggle, CVA for genuine multiple variants.** A lone `error` boolean is `cn()`, not a CVA variant.
-- **Discriminated-union props for modes** (e.g. `multiple`, the modal field `type`) instead of near-duplicate components.
+- **Discriminated-union props for modes** (e.g. `multiSelect`, the modal field `type`) instead of near-duplicate components.
 - **Delete legacy variants after migration** — don't leave dead paths (this paradigm removed `Input variant='chip'` and `ChipMultiSelect`).
 - **Verify CSS vars exist.** An undefined var resolves to `currentColor` (caused a real black-border bug). Align to the canonical tokens: normal weight, `--text-body`, `--text-icon`.
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 3f5cd1bf90e..6a70e29d4b3 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -7,14 +7,14 @@ globs: ["packages/emcn/**"]
 
 # EMCN Components
 
-Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`/`ChipDropdown`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
+Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
 
 ## Chip chrome — single source of truth
 
 Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
 
 - **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells), and the row-state pair `chipHoverSurfaceClass` / `chipActiveSurfaceClass` (hover vs. selected — mutually exclusive, so a selected row holds its surface through hover; every hand-rolled row imports these rather than restating the literals). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
-- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
+- **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipSelect`, `ChipDatePicker`) reuses it for visual parity.
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border-1` border.
 
@@ -26,14 +26,14 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
-- **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
-- **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
+- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
+- **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
 - **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
-- **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
+- **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
-- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipSelect` instead.
 - **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. A region that scrolls sideways (a tab row, a chip strip) uses `useScrollEdges(ref, { axis: 'x' })` with `scrollFadeXClass`; the attributes helper is shared. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 
@@ -51,7 +51,7 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 
 - **One source of truth for shared chrome.** Compose from `chip-chrome.ts` / `chipVariants`; never duplicate the chrome string.
 - **`cn()` for a single state toggle, CVA for genuine multiple variants.** A lone `error` boolean is `cn()`, not a CVA variant.
-- **Discriminated-union props for modes** (e.g. `multiple`, the modal field `type`) instead of near-duplicate components.
+- **Discriminated-union props for modes** (e.g. `multiSelect`, the modal field `type`) instead of near-duplicate components.
 - **Delete legacy variants after migration** — don't leave dead paths (this paradigm removed `Input variant='chip'` and `ChipMultiSelect`).
 - **Verify CSS vars exist.** An undefined var resolves to `currentColor` (caused a real black-border bug). Align to the canonical tokens: normal weight, `--text-body`, `--text-icon`.
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
diff --git a/CLAUDE.md b/CLAUDE.md
index 29ca6ff4ad1..9187f83671e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -416,7 +416,7 @@ On chip components (see "EMCN Components"), drive chrome through PROPS, not `cla
 
 Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from the `@sim/emcn/icons` subpath, and CSS modules from their file path. Never deep-import other component subpaths. Use CVA only when 2+ genuine variants exist; otherwise plain `cn()`.
 
-The chip family is the canonical UI chrome and is progressively replacing the legacy EMCN primitives — always reach for the chip equivalent: `ChipInput` over `Input`, `ChipTextarea` over `Textarea`, `ChipModal`/`ChipModalField` over `Modal`, `ChipSelect`/`ChipCombobox` (searchable) or `ChipDropdown` (simple menu-select) over `Select`/`Combobox`, `ChipSwitch` over `Switch`, `ChipDatePicker` over a raw date field, `Chip`/`ChipLink` for pill buttons/links, `ChipTag` for inline tags/badges. For context/action menus the canonical control is `DropdownMenu` (not a chip, but the standard menu — not a hand-rolled popover). Components OWN their chrome (single source of truth) — consumers pass props, not class overrides. Authoring rules in `.claude/rules/emcn-components.md`; consumer rules in `.claude/rules/sim-styling.md`.
+The chip family is the canonical UI chrome and is progressively replacing the legacy EMCN primitives — always reach for the chip equivalent: `ChipInput` over `Input`, `ChipTextarea` over `Textarea`, `ChipModal`/`ChipModalField` over `Modal`, `ChipSelect` (menu selection, including search) or `ChipCombobox` (editable/async/virtualized selection) over `Select`/`Combobox`, `ChipSwitch` over `Switch`, `ChipDatePicker` over a raw date field, `Chip`/`ChipLink` for pill buttons/links, `ChipTag` for inline tags/badges. For context/action menus the canonical control is `DropdownMenu` (not a chip, but the standard menu — not a hand-rolled popover). Components OWN their chrome (single source of truth) — consumers pass props, not class overrides. Authoring rules in `.claude/rules/emcn-components.md`; consumer rules in `.claude/rules/sim-styling.md`.
 
 Inside a `ChipModalBody`, EVERY labeled field MUST be a `ChipModalField` — never hand-roll a field row (a raw `<div>` + a hand-rolled `<p>`/`<label>` title + a bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds ANOTHER `px-2`, so each field lands at effective `px-4`, exactly matching `ChipModalHeader`/`ChipModalFooter` (`px-4`). Hand-rolled rows skip the field's gutter and sit at `px-2`, visibly misaligned with the header/footer. For controls `ChipModalField` does not cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `ChipModalField type='custom'` with a `title` — it still applies the `px-2` gutter and renders the canonical `Label`. Drive intent via props (`title`/`value`/`onChange`/`error`/`hint`/`required`/`flush`); never pass `variant`/`className`/`id` to the inner control, and never add a body-level wrapper `<div>` with a custom `gap-*` that fights `ChipModalBody`'s `gap-4`.
 
@@ -426,7 +426,7 @@ Principles when building or migrating shared UI:
 
 - One canonical source of truth for shared chrome — compose it, never re-derive it per consumer.
 - Props-driven API over `className` overrides — reaching for `className` to change chrome is a smell; expose a prop instead.
-- Discriminated-union props for modes (e.g. `ChipDropdown multiple`) over near-duplicate components.
+- Discriminated-union props for modes (e.g. `ChipSelect multiSelect`) over near-duplicate components.
 - Delete legacy variants/components after migration — no parallel paths left behind.
 - Plain `cn()` for a single error/state toggle; CVA only for genuinely multiple variants.
 - Align consumers to the canonical defaults — normal weight, `--text-body` text, `--text-icon` icons.
diff --git a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
index 8710f405311..248d24644ee 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
+import { ChipInput, cn, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
@@ -134,7 +134,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                   <div className='flex items-center justify-between'>
                     <Label htmlFor='email'>Email</Label>
                   </div>
-                  <Input
+                  <ChipInput
                     id='email'
                     name='email'
                     placeholder='Enter your email'
@@ -144,9 +144,8 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                     autoCorrect='off'
                     value={email}
                     onChange={handleEmailChange}
-                    className={cn(
-                      hasEmailError && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                    )}
+                    className='h-[34px]'
+                    error={Boolean(hasEmailError)}
                   />
                   {hasEmailError && (
                     <div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
diff --git a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
index 378fba15cdc..df723907a00 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { cn, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { useChatPasswordAuth } from '@/hooks/queries/chats'
 
 const logger = createLogger('PasswordAuth')
@@ -16,7 +15,6 @@ interface PasswordAuthProps {
 
 export default function PasswordAuth({ identifier }: PasswordAuthProps) {
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const hasPasswordError = passwordErrors.length > 0
   const authenticate = useChatPasswordAuth(identifier)
@@ -67,37 +65,19 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
                 <Label htmlFor='password'>Password</Label>
               </div>
               <div className='relative'>
-                <div className='relative'>
-                  <Input
-                    id='password'
-                    name='password'
-                    required
-                    type={showPassword ? 'text' : 'password'}
-                    autoCapitalize='none'
-                    autoComplete='new-password'
-                    autoCorrect='off'
-                    placeholder='Enter password'
-                    value={password}
-                    onChange={handlePasswordChange}
-                    className={cn(
-                      'pr-10',
-                      hasPasswordError &&
-                        'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                    )}
-                  />
-                  <button
-                    type='button'
-                    onClick={() => setShowPassword(!showPassword)}
-                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
-                  >
-                    {showPassword ? (
-                      <EyeOff className='size-[18px]' />
-                    ) : (
-                      <Eye className='size-[18px]' />
-                    )}
-                  </button>
-                </div>
+                <PasswordInput
+                  id='password'
+                  name='password'
+                  required
+                  autoCapitalize='none'
+                  autoComplete='new-password'
+                  autoCorrect='off'
+                  placeholder='Enter password'
+                  value={password}
+                  onChange={handlePasswordChange}
+                  className='h-[34px]'
+                  error={hasPasswordError}
+                />
                 <div
                   className={cn(
                     'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
diff --git a/apps/sim/app/(interfaces)/chat/components/input/input.tsx b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
index b2c6c8b48f1..0554b38bed5 100644
--- a/apps/sim/app/(interfaces)/chat/components/input/input.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
@@ -130,7 +130,7 @@ export const ChatInput: React.FC<{
         {uploadErrors.length > 0 && (
           <div className='mb-3 flex flex-col gap-2'>
             {uploadErrors.map((error, idx) => (
-              <Badge key={`${error}-${idx}`} variant='red' size='lg' dot className='max-w-full'>
+              <Badge key={`${error}-${idx}`} variant='red' size='md' dot className='max-w-full'>
                 {error}
               </Badge>
             ))}
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
index 5d187bb7345..0d3ca4fb9d1 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/enterprise-menu-preview/enterprise-menu-preview.tsx
@@ -1,4 +1,4 @@
-import { Chip, ChipDropdown, cn } from '@sim/emcn'
+import { Chip, ChipSelect, cn } from '@sim/emcn'
 import { Building, MoreHorizontal, Plus } from '@sim/emcn/icons'
 import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
 import { MenuPreviewHeader } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
@@ -47,11 +47,14 @@ export function EnterpriseMenuPreview({ layout = 'menu' }: EnterpriseMenuPreview
                 image={null}
                 status=''
                 roleControl={
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
+                    className='w-auto max-w-none'
                     value={member.role}
                     options={[{ value: member.role, label: member.role }]}
                     disabled={member.role === 'Owner'}
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                   />
                 }
                 menu={<MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />}
diff --git a/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx b/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
index 534fa557cdc..787a852a5e1 100644
--- a/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
+++ b/apps/sim/app/(landing)/contact/components/contact-form/contact-form.tsx
@@ -2,7 +2,7 @@
 
 import { type ReactNode, useId, useRef, useState } from 'react'
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
-import { Chip, ChipDropdown, ChipInput, ChipTextarea, Label } from '@sim/emcn'
+import { Chip, ChipInput, ChipSelect, ChipTextarea, Label } from '@sim/emcn'
 import { Check } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import {
@@ -286,7 +286,10 @@ export function ContactForm() {
             />
           </ContactField>
           <ContactField label='Topic' required error={errors.topic}>
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              dropdownWidth='trigger'
+              modal={false}
               fullWidth
               className={FIELD_HEIGHT}
               value={form.topic || undefined}
diff --git a/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx b/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
index 0a9f9c47f48..979ac1ef458 100644
--- a/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
+++ b/apps/sim/app/(landing)/demo/components/demo-form/demo-form.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { type ReactNode, useEffect, useId, useState } from 'react'
-import { Chip, ChipDropdown, ChipInput, ChipTextarea, Label } from '@sim/emcn'
+import { Chip, ChipInput, ChipSelect, ChipTextarea, Label } from '@sim/emcn'
 import {
   DEMO_REQUEST_COMPANY_SIZE_OPTIONS,
   type DemoRequestBody,
@@ -302,7 +302,10 @@ export function DemoForm({ onComplete }: DemoFormProps) {
         </DemoField>
 
         <DemoField label='Company size' required>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             fullWidth
             className={FIELD_HEIGHT}
             value={form.companySize || undefined}
@@ -313,7 +316,10 @@ export function DemoForm({ onComplete }: DemoFormProps) {
         </DemoField>
 
         <DemoField label='What can we help you with?'>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             fullWidth
             className={FIELD_HEIGHT}
             value={form.topic}
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
index 074ad524750..f4e1b23bd4f 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-product-previews/enterprise-members-preview/enterprise-members-preview.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipDropdown, ChipInput } from '@sim/emcn'
+import { ChipInput, ChipSelect } from '@sim/emcn'
 import { Building, Search } from '@sim/emcn/icons'
 import {
   MemberRow,
@@ -64,7 +64,10 @@ export function EnterpriseMembersPreview() {
                 image={null}
                 status=''
                 roleControl={
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
+                    className='w-auto max-w-none'
                     aria-label={`Organization role for ${member.name}: ${ORGANIZATION_ROLES.find((option) => option.value === (organizationRoles[member.email] ?? member.role))?.label ?? 'Owner'}`}
                     value={organizationRoles[member.email] ?? member.role}
                     options={
@@ -76,7 +79,7 @@ export function EnterpriseMembersPreview() {
                       setOrganizationRoles((roles) => ({ ...roles, [member.email]: role }))
                     }
                     disabled={member.role === 'owner'}
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                   />
                 }
               />
@@ -95,7 +98,10 @@ export function EnterpriseMembersPreview() {
                 image={null}
                 status=''
                 roleControl={
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
+                    className='w-auto max-w-none'
                     aria-label={`Workspace role for ${member.name}: ${WORKSPACE_ROLES.find((option) => option.value === (workspaceRoles[member.email] ?? (member.role === 'owner' ? 'admin' : 'write')))?.label}`}
                     value={
                       workspaceRoles[member.email] ?? (member.role === 'owner' ? 'admin' : 'write')
@@ -105,7 +111,7 @@ export function EnterpriseMembersPreview() {
                       setWorkspaceRoles((roles) => ({ ...roles, [member.email]: role }))
                     }
                     disabled={member.role === 'owner'}
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                   />
                 }
               />
diff --git a/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx b/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
index 2e1dba49f5f..af9574dcb6f 100644
--- a/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
+++ b/apps/sim/app/(landing)/logs/components/log-history-preview/log-history-preview.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useId, useRef, useState } from 'react'
-import { Badge, Chip, ChipDropdown, ChipInput } from '@sim/emcn'
+import { Badge, Chip, ChipInput, ChipSelect } from '@sim/emcn'
 import { Library, ListFilter, Search, X } from '@sim/emcn/icons'
 import {
   MenuPreviewHeader,
@@ -109,13 +109,16 @@ export function LogHistoryPreview() {
             onChange={(event) => setQuery(event.target.value)}
             className='mr-auto min-w-0 flex-1'
           />
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            modal={false}
+            className='w-auto max-w-none'
             leftIcon={ListFilter}
             aria-label={`Filter sample logs by status: ${FILTERS.find((option) => option.value === filter)?.label ?? filter}`}
             value={filter}
             options={FILTERS}
             onChange={setFilter}
-            matchTriggerWidth={false}
+            dropdownWidth='content'
           />
         </MenuPreviewToolbar>
         <div className='relative flex min-h-0 flex-1 flex-col'>
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
index 9eb6378eb52..7236265ea4b 100644
--- a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail/lead-record-detail.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import {
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
 } from '@sim/emcn'
 import { TagIcon, TypeNumber, TypeText } from '@sim/emcn/icons'
 import type { LeadRecord } from '@/app/(landing)/tables/components/tables-records-preview/data'
@@ -65,7 +65,11 @@ export function LeadRecordDetail({ record, onClose, onSave }: LeadRecordDetailPr
             </span>
           }
         >
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
+            className='w-auto max-w-none'
             value={draft.status}
             options={[
               { value: 'Qualified', label: 'Qualified' },
diff --git a/apps/sim/app/f/[token]/public-file-auth.tsx b/apps/sim/app/f/[token]/public-file-auth.tsx
index c0682b0d123..155314fe625 100644
--- a/apps/sim/app/f/[token]/public-file-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-auth.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { Label } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell'
 import { usePublicFileAuth } from '@/hooks/queries/public-shares'
 
@@ -21,7 +20,6 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
   const router = useRouter()
   const authenticate = usePublicFileAuth(token)
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const handleAuthenticate = async () => {
@@ -49,35 +47,22 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
       >
         <div className='space-y-2'>
           <Label htmlFor='password'>Password</Label>
-          <div className='relative'>
-            <Input
-              id='password'
-              name='password'
-              required
-              type={showPassword ? 'text' : 'password'}
-              autoCapitalize='none'
-              autoComplete='current-password'
-              autoCorrect='off'
-              placeholder='Enter password'
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value)
-                setError(null)
-              }}
-              className={cn(
-                'pr-10',
-                error && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-              )}
-            />
-            <button
-              type='button'
-              onClick={() => setShowPassword(!showPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-              aria-label={showPassword ? 'Hide password' : 'Show password'}
-            >
-              {showPassword ? <EyeOff className='size-[18px]' /> : <Eye className='size-[18px]' />}
-            </button>
-          </div>
+          <PasswordInput
+            id='password'
+            name='password'
+            required
+            autoCapitalize='none'
+            autoComplete='current-password'
+            autoCorrect='off'
+            placeholder='Enter password'
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value)
+              setError(null)
+            }}
+            className='h-[34px]'
+            error={Boolean(error)}
+          />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
         </div>
 
diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx
index 71a5c564492..a401c748e3f 100644
--- a/apps/sim/app/f/[token]/public-file-email-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-email-auth.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { cn, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
+import { ChipInput, cn, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { normalizeEmail } from '@sim/utils/string'
 import { useRouter } from 'next/navigation'
@@ -90,7 +90,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
         >
           <div className='space-y-2'>
             <Label htmlFor='email'>Email</Label>
-            <Input
+            <ChipInput
               id='email'
               name='email'
               type='email'
@@ -104,7 +104,8 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
                 setEmail(e.target.value)
                 setError(null)
               }}
-              className={cn(error && 'border-[var(--text-error)] focus:border-[var(--text-error)]')}
+              className='h-[34px]'
+              error={Boolean(error)}
             />
             {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
           </div>
diff --git a/apps/sim/app/f/[token]/public-file-sso-auth.tsx b/apps/sim/app/f/[token]/public-file-sso-auth.tsx
index 3e73581f715..26ca1961483 100644
--- a/apps/sim/app/f/[token]/public-file-sso-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-sso-auth.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
+import { ChipInput, Label } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { normalizeEmail } from '@sim/utils/string'
 import { useRouter } from 'next/navigation'
@@ -68,7 +68,7 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) {
       >
         <div className='space-y-2'>
           <Label htmlFor='email'>Work Email</Label>
-          <Input
+          <ChipInput
             id='email'
             name='email'
             required
@@ -82,7 +82,8 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) {
               setEmail(e.target.value)
               setError(null)
             }}
-            className={cn(error && 'border-[var(--text-error)] focus:border-[var(--text-error)]')}
+            className='h-[34px]'
+            error={Boolean(error)}
           />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
         </div>
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index fa5a295eacd..b014041848c 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -307,12 +307,6 @@ export default function PlaygroundPage() {
               <VariantRow label='destructive'>
                 <Button variant='destructive'>Destructive</Button>
               </VariantRow>
-              <VariantRow label='secondary'>
-                <Button variant='secondary'>Secondary</Button>
-              </VariantRow>
-              <VariantRow label='tertiary'>
-                <Button variant='tertiary'>Tertiary</Button>
-              </VariantRow>
               <VariantRow label='ghost'>
                 <Button variant='ghost'>Ghost</Button>
               </VariantRow>
@@ -344,14 +338,8 @@ export default function PlaygroundPage() {
                   <ChipButtonGroupItem value='javascript'>JavaScript</ChipButtonGroupItem>
                 </ChipButtonGroup>
               </VariantRow>
-              <VariantRow label='gap none'>
-                <ChipButtonGroup value='opt1' gap='none'>
-                  <ChipButtonGroupItem value='opt1'>Option 1</ChipButtonGroupItem>
-                  <ChipButtonGroupItem value='opt2'>Option 2</ChipButtonGroupItem>
-                </ChipButtonGroup>
-              </VariantRow>
-              <VariantRow label='gap sm'>
-                <ChipButtonGroup value='opt1' gap='sm'>
+              <VariantRow label='compact'>
+                <ChipButtonGroup value='opt1' size='compact'>
                   <ChipButtonGroupItem value='opt1'>Option 1</ChipButtonGroupItem>
                   <ChipButtonGroupItem value='opt2'>Option 2</ChipButtonGroupItem>
                 </ChipButtonGroup>
@@ -410,9 +398,6 @@ export default function PlaygroundPage() {
               <VariantRow label='amber'>
                 <Badge variant='amber'>Amber</Badge>
               </VariantRow>
-              <VariantRow label='teal'>
-                <Badge variant='teal'>Teal</Badge>
-              </VariantRow>
               <VariantRow label='cyan'>
                 <Badge variant='cyan'>Cyan</Badge>
               </VariantRow>
@@ -425,7 +410,6 @@ export default function PlaygroundPage() {
               <VariantRow label='sizes'>
                 <Badge size='sm'>Small</Badge>
                 <Badge size='md'>Medium</Badge>
-                <Badge size='lg'>Large</Badge>
               </VariantRow>
             </Section>
 
@@ -525,10 +509,7 @@ export default function PlaygroundPage() {
                 <Checkbox size='md' />
                 <span className='text-[var(--text-secondary)] text-sm'>Medium (16px)</span>
               </VariantRow>
-              <VariantRow label='size lg'>
-                <Checkbox size='lg' />
-                <span className='text-[var(--text-secondary)] text-sm'>Large (20px)</span>
-              </VariantRow>
+
               <VariantRow label='disabled'>
                 <Checkbox disabled />
                 <Checkbox disabled checked />
@@ -879,7 +860,7 @@ export default function PlaygroundPage() {
               <VariantRow label='inverted color scheme'>
                 <Popover colorScheme='inverted'>
                   <PopoverTrigger asChild>
-                    <Button variant='secondary'>Inverted Popover</Button>
+                    <Button variant='primary'>Inverted Popover</Button>
                   </PopoverTrigger>
                   <PopoverContent>
                     <PopoverItem>Item 1</PopoverItem>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.test.tsx b/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.test.tsx
index f27e865a6a1..ac53da16d2f 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.test.tsx
@@ -21,7 +21,7 @@ const { hostContext, mockUseOrganizationBilling, mockUseAdminWorkspaces, mockMut
 )
 
 vi.mock('@sim/emcn', () => ({
-  ChipDropdown: () => <div />,
+  ChipSelect: () => <div />,
   ChipModal: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   ChipModalBody: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   ChipModalError: ({ children }: { children: ReactNode }) => <div>{children}</div>,
diff --git a/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx
index 090a9096847..2347899cd2f 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx
@@ -2,14 +2,14 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import {
-  ChipDropdown,
-  type ChipDropdownOption,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
+  type ChipSelectOption,
   toast,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
@@ -161,7 +161,7 @@ export function InviteModal({
     { enabled: open && isOrganizationInvite && !organizationOnly }
   )
 
-  const workspaceOptions = useMemo<ChipDropdownOption[]>(() => {
+  const workspaceOptions = useMemo<ChipSelectOption[]>(() => {
     if (!isOrganizationInvite) {
       return workspaceId ? [{ value: workspaceId, label: workspaceName ?? 'This workspace' }] : []
     }
@@ -317,12 +317,15 @@ export function InviteModal({
         {!organizationOnly && (
           <>
             <ChipModalField type='custom' title='Workspaces'>
-              <ChipDropdown
-                multiple
-                value={selectedWorkspaceIds}
-                onChange={setSelectedWorkspaceIds}
+              <ChipSelect
+                placeholder='Select workspaces'
+                dropdownWidth='trigger'
+                modal={false}
+                multiSelect
+                multiSelectValues={selectedWorkspaceIds}
+                onMultiSelectChange={setSelectedWorkspaceIds}
                 options={workspaceOptions}
-                allLabel='Select workspaces'
+                allOptionLabel='Select workspaces'
                 showAllOption={false}
                 searchable={isOrganizationInvite}
                 searchPlaceholder='Search workspaces...'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
index 7ded34f10d0..65442f93310 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
@@ -2,6 +2,7 @@
 
 import type { ComponentType } from 'react'
 import {
+  BulkActionBar,
   BulkActionButton,
   cn,
   DropdownMenu,
@@ -91,57 +92,48 @@ export function ResourceActionBar({
         className
       )}
     >
-      <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
-        <span
-          className={cn(
-            'px-1 text-small',
-            exceedsLimit ? 'text-[var(--text-error)]' : 'text-[var(--text-secondary)]'
-          )}
-        >
-          {exceedsLimit
-            ? `${selectedCount} selected · select ${maxSelectable} or fewer`
-            : `${selectedCount} selected`}
-        </span>
-        <div className='flex items-center gap-[5px]'>
-          {onDownload && (
-            <ActionButton
-              icon={Download}
-              label='Download'
-              onClick={onDownload}
-              disabled={actionsDisabled}
-            />
-          )}
-          {onMove && moveOptions && (
-            <DropdownMenu>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <BulkActionButton aria-label='Move' disabled={actionsDisabled}>
-                      <Folder className='size-[12px]' />
-                    </BulkActionButton>
-                  </DropdownMenuTrigger>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Move</Tooltip.Content>
-              </Tooltip.Root>
-              <DropdownMenuContent
-                side='top'
-                align='center'
-                className='max-h-[240px] overflow-y-auto'
-              >
-                {renderMoveOptions(moveOptions, onMove)}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-          {onDelete && (
-            <ActionButton
-              icon={Trash}
-              label='Delete'
-              onClick={onDelete}
-              disabled={actionsDisabled}
-            />
-          )}
-        </div>
-      </div>
+      <BulkActionBar
+        label={
+          <span className={exceedsLimit ? 'text-[var(--text-error)]' : undefined}>
+            {exceedsLimit
+              ? `${selectedCount} selected · select ${maxSelectable} or fewer`
+              : `${selectedCount} selected`}
+          </span>
+        }
+      >
+        {onDownload && (
+          <ActionButton
+            icon={Download}
+            label='Download'
+            onClick={onDownload}
+            disabled={actionsDisabled}
+          />
+        )}
+        {onMove && moveOptions && (
+          <DropdownMenu>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <BulkActionButton aria-label='Move' disabled={actionsDisabled}>
+                    <Folder className='size-[12px]' />
+                  </BulkActionButton>
+                </DropdownMenuTrigger>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Move</Tooltip.Content>
+            </Tooltip.Root>
+            <DropdownMenuContent
+              side='top'
+              align='center'
+              className='max-h-[240px] overflow-y-auto'
+            >
+              {renderMoveOptions(moveOptions, onMove)}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        {onDelete && (
+          <ActionButton icon={Trash} label='Delete' onClick={onDelete} disabled={actionsDisabled} />
+        )}
+      </BulkActionBar>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
index af31043f573..aa14ffd07ee 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Chip, ChipDropdown, ChipLink, cn } from '@sim/emcn'
+import { Chip, ChipLink, ChipSelect, cn } from '@sim/emcn'
 import { ArrowLeft, Plus } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
@@ -193,14 +193,16 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
             </Chip>
           ) : oauthService ? (
             connectOptions.length > 1 ? (
-              <ChipDropdown
+              <ChipSelect
+                modal={false}
+                className='w-auto max-w-none'
                 variant='primary'
                 leftIcon={Plus}
                 placeholder='Add to Sim'
                 showSelectedCheck={false}
                 options={connectOptions}
                 onChange={handleSelectConnectOption}
-                matchTriggerWidth={false}
+                dropdownWidth='content'
               />
             ) : oauthAvailable ? (
               <Chip variant='primary' leftIcon={Plus} onClick={() => setOAuthOpen(true)}>
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
index 68ab142e2d8..627d13edf1a 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
@@ -4,10 +4,10 @@ import { type ReactNode, useEffect, useMemo, useState } from 'react'
 import {
   Button,
   Chip,
-  ChipDropdown,
-  type ChipDropdownOption,
   ChipInput,
   ChipModalField,
+  ChipSelect,
+  type ChipSelectOption,
   SecretInput,
   Wizard,
 } from '@sim/emcn'
@@ -50,7 +50,7 @@ const CUSTOM_BOT_CAPABILITIES = [
 
 const ALL_CAPABILITIES = new Set(CUSTOM_BOT_CAPABILITIES.map((capability) => capability.id))
 
-const CAPABILITY_OPTIONS: ChipDropdownOption[] = CUSTOM_BOT_CAPABILITIES.map((capability) => ({
+const CAPABILITY_OPTIONS: ChipSelectOption[] = CUSTOM_BOT_CAPABILITIES.map((capability) => ({
   value: capability.id,
   label: capability.label,
 }))
@@ -404,13 +404,16 @@ function StepConfigure({
               : undefined
           }
         >
-          <ChipDropdown
-            multiple
+          <ChipSelect
+            placeholder='No additional permissions'
+            dropdownWidth='trigger'
+            modal={false}
+            multiSelect
             fullWidth
-            value={capabilityIds}
-            onChange={onCapabilityIdsChange}
+            multiSelectValues={capabilityIds}
+            onMultiSelectChange={onCapabilityIdsChange}
             options={CAPABILITY_OPTIONS}
-            allLabel='No additional permissions'
+            allOptionLabel='No additional permissions'
             showAllOption={false}
           />
         </ChipModalField>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index 13819242fb2..3f8f9bec003 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -701,7 +701,7 @@ export function DocumentTagsModal({
                   !kbTagDefinitions.find(
                     (def) => def.displayName.toLowerCase() === editTagForm.displayName.toLowerCase()
                   ) && (
-                    <Badge variant='amber' size='lg' dot className='max-w-full'>
+                    <Badge variant='amber' size='md' dot className='max-w-full'>
                       Maximum tag definitions reached. You can still use existing tag definitions,
                       but cannot create new ones.
                     </Badge>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index 9330027ea58..683c692cb15 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -7,12 +7,12 @@ import {
   ChipConfirmModal,
   type ChipConfirmTextSegment,
   ChipDatePicker,
-  ChipDropdown,
-  type ChipDropdownOption,
   ChipInput,
   ChipModal,
   ChipModalBody,
   ChipModalHeader,
+  ChipSelect,
+  type ChipSelectOption,
   cellIconNodeClass,
   chipContentGap,
   chipContentLabelClass,
@@ -162,7 +162,7 @@ const PROCESSING_POLL_INTERVAL_MS = 3000
 /** Slower cadence while only a connector sync is running: rows arrive in batches. */
 const CONNECTOR_SYNC_DOCUMENT_POLL_INTERVAL_MS = 5000
 
-const STATUS_FILTER_OPTIONS: ChipDropdownOption[] = [
+const STATUS_FILTER_OPTIONS: ChipSelectOption[] = [
   { value: 'all', label: 'All' },
   { value: 'enabled', label: 'Enabled' },
   { value: 'disabled', label: 'Disabled' },
@@ -1096,7 +1096,10 @@ export function KnowledgeBase({
               </Chip>
             )}
           </div>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             options={STATUS_FILTER_OPTIONS}
             value={enabledFilter}
             onChange={(value) => {
@@ -1731,7 +1734,7 @@ function TagFilterValueControl({ entry, onChange }: TagFilterValueControlProps)
 function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectionProps) {
   const activeCount = entries.filter((f) => f.tagSlot && f.value.trim()).length
 
-  const tagOptions: ChipDropdownOption[] = tagDefinitions.map((t) => ({
+  const tagOptions: ChipSelectOption[] = tagDefinitions.map((t) => ({
     value: t.displayName,
     label: t.displayName,
   }))
@@ -1801,7 +1804,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
       >
         {filtersToShow.map((entry, index) => {
           const operators = getOperatorsForFieldType(entry.fieldType)
-          const operatorOptions: ChipDropdownOption[] = operators.map((op) => ({
+          const operatorOptions: ChipSelectOption[] = operators.map((op) => ({
             value: op.value,
             label: op.label,
           }))
@@ -1818,24 +1821,29 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
               )}
               <div className='flex items-start gap-2'>
                 <div className='flex min-w-0 flex-1 flex-wrap items-center gap-2'>
-                  <ChipDropdown
+                  <ChipSelect
+                    showSelectedCheck
+                    modal={false}
                     options={tagOptions}
                     value={entry.tagName}
                     onChange={(value) => handleTagChange(entry.id, value)}
                     placeholder='Select tag'
                     align='start'
-                    matchTriggerWidth={false}
+                    dropdownWidth='content'
                     contentClassName='max-h-[240px] overflow-y-auto'
-                    className='max-w-[150px]'
+                    className='w-auto max-w-[150px]'
                   />
                   {entry.tagSlot && (
-                    <ChipDropdown
+                    <ChipSelect
+                      showSelectedCheck
+                      modal={false}
+                      className='w-auto max-w-none'
                       options={operatorOptions}
                       value={entry.operator}
                       onChange={(value) => updateEntry(entry.id, { operator: value, valueTo: '' })}
                       placeholder='Operator'
                       align='start'
-                      matchTriggerWidth={false}
+                      dropdownWidth='content'
                     />
                   )}
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
index 01dbfaead48..3bd0cab96d4 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
@@ -1,4 +1,4 @@
-import { BulkActionButton, cn, Tooltip } from '@sim/emcn'
+import { BulkActionBar, BulkActionButton, cn, Tooltip } from '@sim/emcn'
 import { Ban, Circle, Trash } from '@sim/emcn/icons'
 import { domAnimation, LazyMotion, m } from 'framer-motion'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -53,70 +53,70 @@ export function ActionBar({
         transition={{ duration: 0.2 }}
         className={cn('-translate-x-1/2 fixed bottom-6 left-1/2 z-[var(--z-dropdown)]', className)}
       >
-        <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
-          <span className='px-1 text-[var(--text-secondary)] text-small'>
-            {isAllSelected ? totalCount : selectedCount} selected
-            {showSelectAllOption && (
-              <>
-                {' · '}
-                <button
-                  type='button'
-                  onClick={onSelectAll}
-                  className='text-[var(--brand-secondary)] hover-hover:underline'
-                >
-                  Select all
-                </button>
-              </>
-            )}
-            {isAllSelected && onClearSelectAll && (
-              <>
-                {' · '}
-                <button
-                  type='button'
-                  onClick={onClearSelectAll}
-                  className='text-[var(--brand-secondary)] hover-hover:underline'
-                >
-                  Clear
-                </button>
-              </>
-            )}
-          </span>
+        <BulkActionBar
+          label={
+            <>
+              {isAllSelected ? totalCount : selectedCount} selected
+              {showSelectAllOption && (
+                <>
+                  {' · '}
+                  <button
+                    type='button'
+                    onClick={onSelectAll}
+                    className='text-[var(--brand-secondary)] hover-hover:underline'
+                  >
+                    Select all
+                  </button>
+                </>
+              )}
+              {isAllSelected && onClearSelectAll && (
+                <>
+                  {' · '}
+                  <button
+                    type='button'
+                    onClick={onClearSelectAll}
+                    className='text-[var(--brand-secondary)] hover-hover:underline'
+                  >
+                    Clear
+                  </button>
+                </>
+              )}
+            </>
+          }
+        >
+          {showEnableButton && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <BulkActionButton aria-label='Enable' onClick={onEnable} disabled={isLoading}>
+                  <Circle className='size-[12px]' />
+                </BulkActionButton>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Enable</Tooltip.Content>
+            </Tooltip.Root>
+          )}
 
-          <div className='flex items-center gap-[5px]'>
-            {showEnableButton && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <BulkActionButton aria-label='Enable' onClick={onEnable} disabled={isLoading}>
-                    <Circle className='size-[12px]' />
-                  </BulkActionButton>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Enable</Tooltip.Content>
-              </Tooltip.Root>
-            )}
+          {showDisableButton && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <BulkActionButton aria-label='Disable' onClick={onDisable} disabled={isLoading}>
+                  <Ban className='size-[12px]' />
+                </BulkActionButton>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Disable</Tooltip.Content>
+            </Tooltip.Root>
+          )}
 
-            {showDisableButton && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <BulkActionButton aria-label='Disable' onClick={onDisable} disabled={isLoading}>
-                    <Ban className='size-[12px]' />
-                  </BulkActionButton>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Disable</Tooltip.Content>
-              </Tooltip.Root>
-            )}
-
-            {onDelete && canEdit && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <BulkActionButton aria-label='Delete' onClick={onDelete} disabled={isLoading}>
-                    <Trash className='size-[12px]' />
-                  </BulkActionButton>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>Delete</Tooltip.Content>
-              </Tooltip.Root>
-            )}
-          </div>
-        </div>
+          {onDelete && canEdit && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <BulkActionButton aria-label='Delete' onClick={onDelete} disabled={isLoading}>
+                  <Trash className='size-[12px]' />
+                </BulkActionButton>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Delete</Tooltip.Content>
+            </Tooltip.Root>
+          )}
+        </BulkActionBar>
       </m.div>
     </LazyMotion>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx
index bd2cc556aa0..cefe21c6f32 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx
@@ -5,9 +5,9 @@ import {
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipCombobox,
-  ChipDropdown,
   ChipLink,
   ChipModalField,
+  ChipSelect,
   type ComboboxOption,
   Tooltip,
 } from '@sim/emcn'
@@ -170,12 +170,15 @@ export function ConnectorAccessField({
           <Tooltip.Root>
             <Tooltip.Trigger asChild tabIndex={0}>
               <span className='inline-flex w-fit cursor-not-allowed'>
-                <ChipDropdown
+                <ChipSelect
+                  showSelectedCheck
+                  dropdownWidth='trigger'
+                  modal={false}
                   aria-label={`Sync using: ${currentMode?.label ?? 'Unavailable'}`}
                   value={value.accessMode}
                   options={visibleModes.map(({ mode, label }) => ({ value: mode, label }))}
                   disabled
-                  className='pointer-events-none w-fit'
+                  className='pointer-events-none w-fit max-w-none'
                 />
               </span>
             </Tooltip.Trigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx
index 749b08d852c..6a5843c27f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-documents/connector-document-status-filter.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { ChipDropdown } from '@sim/emcn'
+import { ChipSelect } from '@sim/emcn'
 import type {
   ConnectorDocumentFilter,
   ConnectorDocumentsData,
@@ -20,14 +20,17 @@ export function ConnectorDocumentStatusFilter({
   isLoading,
 }: ConnectorDocumentStatusFilterProps) {
   return (
-    <ChipDropdown
+    <ChipSelect
+      showSelectedCheck
+      modal={false}
+      className='w-auto max-w-none'
       aria-label='Document status'
       value={filter}
       onChange={(value) => {
         if (value === 'active' || value === 'excluded' || value === 'failed' || value === 'skipped')
           onFilterChange(value)
       }}
-      matchTriggerWidth={false}
+      dropdownWidth='content'
       options={[
         { value: 'active', label: isLoading ? 'Included' : `Included (${counts.active})` },
         { value: 'excluded', label: isLoading ? 'Excluded' : `Excluded (${counts.excluded})` },
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
index ccda6b899a9..994b3d820d9 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { ChipDropdownOption } from '@sim/emcn'
-import { Button, ChipConfirmModal, ChipDropdown, Tooltip, toast } from '@sim/emcn'
+import type { ChipSelectOption } from '@sim/emcn'
+import { Button, ChipConfirmModal, ChipSelect, Tooltip, toast } from '@sim/emcn'
 import { Database, FolderPlus, Pencil, Plus, Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -127,13 +127,13 @@ const SEARCH_COLUMNS: ResourceColumn[] = [...COLUMNS, FOLDER_LOCATION_COLUMN]
 
 const KNOWLEDGE_BASE_ICON = <Database className='size-[14px]' />
 
-const CONNECTOR_FILTER_OPTIONS: ChipDropdownOption[] = [
+const CONNECTOR_FILTER_OPTIONS: ChipSelectOption[] = [
   { value: 'all', label: 'All' },
   { value: 'connected', label: 'With connectors' },
   { value: 'unconnected', label: 'Without connectors' },
 ]
 
-const CONTENT_FILTER_OPTIONS: ChipDropdownOption[] = [
+const CONTENT_FILTER_OPTIONS: ChipSelectOption[] = [
   { value: 'all', label: 'All' },
   { value: 'has-docs', label: 'Has documents' },
   { value: 'empty', label: 'Empty' },
@@ -1320,7 +1320,7 @@ function KnowledgeContent() {
     [activeSort, setListSort, clearListSort]
   )
 
-  const memberOptions: ChipDropdownOption[] = useMemo(
+  const memberOptions: ChipSelectOption[] = useMemo(
     () =>
       (members ?? []).map((m) => ({
         value: m.userId,
@@ -1346,7 +1346,10 @@ function KnowledgeContent() {
               </Button>
             )}
           </div>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             options={CONNECTOR_FILTER_OPTIONS}
             value={connectorFilter[0] ?? 'all'}
             onChange={(value) => setConnectorFilter(value === 'all' ? [] : [value])}
@@ -1367,7 +1370,10 @@ function KnowledgeContent() {
               </Button>
             )}
           </div>
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
             options={CONTENT_FILTER_OPTIONS}
             value={contentFilter[0] ?? 'all'}
             onChange={(value) => setContentFilter(value === 'all' ? [] : [value])}
@@ -1389,12 +1395,16 @@ function KnowledgeContent() {
                 </Button>
               )}
             </div>
-            <ChipDropdown
-              multiple
+            <ChipSelect
+              placeholder='All'
+              showAllOption
+              dropdownWidth='trigger'
+              modal={false}
+              multiSelect
               options={memberOptions}
-              value={ownerFilter}
-              onChange={setOwnerFilter}
-              allLabel='All'
+              multiSelectValues={ownerFilter}
+              onMultiSelectChange={setOwnerFilter}
+              allOptionLabel='All'
               searchable
               searchPlaceholder='Search members...'
               align='start'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
index 72ada4c1ef1..aa11d37b50f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx
@@ -42,7 +42,7 @@ interface MemberRowProps {
   image: string | null
   /** Muted trailing text, e.g. "Joined 6/3/2026" or "Invite pending". */
   status: string
-  /** Role control rendered before the actions menu (e.g. a `ChipDropdown`). */
+  /** Role control rendered before the actions menu (e.g. a `ChipSelect`). */
   roleControl?: ReactNode
   /** Trailing actions menu (e.g. the `...` `DropdownMenu`). */
   menu?: ReactNode
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx
index 6ccc9de9c41..436bbbdb33b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx
@@ -2,13 +2,13 @@
 
 import { useState } from 'react'
 import {
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams } from 'next/navigation'
@@ -152,7 +152,11 @@ export function SandboxCreateModal({
             />
 
             <ChipModalField type='custom' title='Language'>
-              <ChipDropdown
+              <ChipSelect
+                showSelectedCheck
+                dropdownWidth='trigger'
+                modal={false}
+                className='w-auto max-w-none'
                 value={draft.language}
                 onChange={(language) =>
                   setDraft((prev) => ({ ...prev, language: language as SandboxLanguage }))
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.test.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.test.tsx
index dd3249fab67..0fc1ce4fa3e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.test.tsx
@@ -33,7 +33,6 @@ const { recordChipSelectProps } = vi.hoisted(() => ({
 
 vi.mock('@sim/emcn', () => ({
   Chip: ({ children }: { children: ReactNode }) => <button type='button'>{children}</button>,
-  ChipDropdown: () => null,
   ChipInput: () => null,
   ChipSelect: (props: MockChipSelectProps) => {
     recordChipSelectProps(props)
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx
index 51e6ff33c52..595ca1e45c7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { Chip, ChipDropdown, ChipInput, ChipTextarea, cn } from '@sim/emcn'
+import { Chip, ChipInput, ChipSelect, ChipTextarea, cn } from '@sim/emcn'
 import type { SandboxDependencyIssue } from '@/lib/api/contracts/sandboxes'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { ManagedCliSelect } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/components/managed-cli-select'
@@ -67,7 +67,11 @@ export function SandboxEditor({
             />
           </SettingsField>
           <SettingsField label='Language'>
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              dropdownWidth='trigger'
+              modal={false}
+              className='w-auto max-w-none'
               value={draft.language}
               onChange={(language) => onChange({ ...draft, language: language as SandboxLanguage })}
               options={LANGUAGE_OPTIONS.map((option) => ({
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
index 42ca096a093..43e5f9d25a5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ChipDropdown, ChipTag, toast } from '@sim/emcn'
+import { ChipSelect, ChipTag, toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { isOrgAdminRole } from '@sim/platform-authz/predicates'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -138,7 +138,10 @@ export function OrganizationMemberLists({
         }
         roleControl={
           editable ? (
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              modal={false}
+              className='w-auto max-w-none'
               value={member.role}
               onChange={(role) =>
                 updateMemberRole
@@ -150,7 +153,7 @@ export function OrganizationMemberLists({
                   .catch((error) => logger.error('Failed to update member role', { error }))
               }
               options={ORG_ROLE_OPTIONS}
-              matchTriggerWidth={false}
+              dropdownWidth='content'
               disabled={updateMemberRole.isPending}
             />
           ) : (
@@ -263,7 +266,10 @@ export function OrganizationMemberLists({
           {isExternal ? 'External' : invitation.role === 'admin' ? 'Admin' : 'Member'}
         </ChipTag>
       ) : (
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          modal={false}
+          className='w-auto max-w-none'
           value={invitation.role === 'admin' ? 'admin' : 'member'}
           onChange={(role) =>
             updateInvitation
@@ -275,7 +281,7 @@ export function OrganizationMemberLists({
               .catch((error) => logger.error('Failed to update invitation role', { error }))
           }
           options={ORG_ROLE_OPTIONS}
-          matchTriggerWidth={false}
+          dropdownWidth='content'
           disabled={updateInvitation.isPending}
         />
       )
@@ -315,7 +321,10 @@ export function OrganizationMemberLists({
         }
         roleControl={
           <RoleLockTooltip reason={lockReason}>
-            <ChipDropdown
+            <ChipSelect
+              showSelectedCheck
+              modal={false}
+              className='w-auto max-w-none'
               value={access.permission}
               onChange={(permission) =>
                 updatePermissions
@@ -329,7 +338,7 @@ export function OrganizationMemberLists({
                   )
               }
               options={WORKSPACE_ROLE_OPTIONS}
-              matchTriggerWidth={false}
+              dropdownWidth='content'
               disabled={disabled}
             />
           </RoleLockTooltip>
@@ -364,7 +373,10 @@ export function OrganizationMemberLists({
     access: RosterWorkspaceAccess
   ) => {
     const roleControl = (
-      <ChipDropdown
+      <ChipSelect
+        showSelectedCheck
+        modal={false}
+        className='w-auto max-w-none'
         value={access.permission}
         onChange={(permission) =>
           updateInvitation
@@ -376,7 +388,7 @@ export function OrganizationMemberLists({
             .catch((error) => logger.error('Failed to update invitation grant', { error }))
         }
         options={WORKSPACE_ROLE_OPTIONS}
-        matchTriggerWidth={false}
+        dropdownWidth='content'
         disabled={!canManage || updateInvitation.isPending}
       />
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
index de8294ee6c5..133c90c68b9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { ChipDropdown, Plus, toast } from '@sim/emcn'
+import { ChipSelect, Plus, toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { formatDate } from '@sim/utils/formatting'
 import { useQueryClient } from '@tanstack/react-query'
@@ -238,11 +238,14 @@ export function Teammates() {
                 status={teammate.status}
                 roleControl={
                   <RoleLockTooltip reason={lockReason}>
-                    <ChipDropdown
+                    <ChipSelect
+                      showSelectedCheck
+                      modal={false}
+                      className='w-auto max-w-none'
                       value={teammate.role}
                       onChange={(role) => handleRoleChange(teammate, role as WorkspacePermission)}
                       options={ROLE_OPTIONS}
-                      matchTriggerWidth={false}
+                      dropdownWidth='content'
                       disabled={
                         teammate.isPending ||
                         !canManage ||
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx
index cdd89e8e821..44cf3ae11bb 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { ChipDropdown } from '@sim/emcn'
+import { ChipSelect } from '@sim/emcn'
 import type { ColumnDefinition } from '@/lib/table'
 import { SelectPill, selectedOptionIds } from './select-pill'
 
@@ -18,7 +18,7 @@ const CLEAR_VALUE = ''
 
 /**
  * Option picker for `select`/`multiselect` cells in a form context (the row
- * modal) — a `ChipDropdown` pill that lists each option as its colored pill and
+ * modal) — a `ChipSelect` pill that lists each option as its colored pill and
  * writes option ids back through `onChange`. Inline grid editing uses a bare
  * `DropdownMenu` instead (see `InlineSelectEditor`).
  */
@@ -35,31 +35,30 @@ export function SelectValueEditor({
       (column.options ?? []).map((option) => ({
         value: option.id,
         label: <SelectPill option={option} />,
+        searchTerms: [option.name] as const,
       })),
     [column.options]
   )
 
   if (isMulti) {
     return (
-      <ChipDropdown
-        multiple
-        value={selectedOptionIds(column, value)}
+      <ChipSelect
+        placeholder='Select options'
+        modal={false}
+        className={fullWidth ? undefined : 'w-auto max-w-none'}
+        multiSelect
+        multiSelectValues={selectedOptionIds(column, value)}
         // A required multiselect can't be emptied — ignore the toggle that would
         // remove the last option, since an empty selection can never be committed.
-        onChange={(ids) => {
+        onMultiSelectChange={(ids) => {
           if (column.required && ids.length === 0) return
           onChange(ids)
         }}
         options={options}
         showAllOption={false}
-        // In multiple mode ChipDropdown ignores `placeholder` and renders
-        // `allLabel` when nothing is selected — which would read as if every
-        // option were chosen. There is no "All" entry here, so this is the
-        // empty label.
-        allLabel='Select options'
         align={align}
         fullWidth={fullWidth}
-        matchTriggerWidth={false}
+        dropdownWidth='content'
       />
     )
   }
@@ -69,19 +68,26 @@ export function SelectValueEditor({
   const singleOptions = column.required
     ? options
     : [
-        { value: CLEAR_VALUE, label: <span className='text-[var(--text-muted)]'>None</span> },
+        {
+          value: CLEAR_VALUE,
+          label: <span className='text-[var(--text-muted)]'>None</span>,
+          searchTerms: ['None'] as const,
+        },
         ...options,
       ]
 
   return (
-    <ChipDropdown
+    <ChipSelect
+      showSelectedCheck
+      modal={false}
+      className={fullWidth ? undefined : 'w-auto max-w-none'}
       value={selectedOptionIds(column, value)[0] ?? CLEAR_VALUE}
       onChange={(id) => onChange(id === CLEAR_VALUE ? null : id)}
       options={singleOptions}
       placeholder='Select an option'
       align={align}
       fullWidth={fullWidth}
-      matchTriggerWidth={false}
+      dropdownWidth='content'
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
index b04257ae755..9922997c840 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { BulkActionButton, cn, Tooltip } from '@sim/emcn'
+import { BulkActionBar, BulkActionButton, cn, Tooltip } from '@sim/emcn'
 import { Eye, PlayOutline, RefreshCw, Square } from '@sim/emcn/icons'
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
 
@@ -89,47 +89,42 @@ export function TableActionBar({
               className
             )}
           >
-            <div className='pointer-events-auto flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
-              <span className='px-1 text-[var(--text-secondary)] text-small'>
-                {selectedCellCount === 1
+            <BulkActionBar
+              className='pointer-events-auto'
+              label={
+                selectedCellCount === 1
                   ? 'Selected 1 workflow cell'
-                  : `Selected ${selectedCellCount} workflow cells`}
-              </span>
+                  : `Selected ${selectedCellCount} workflow cells`
+              }
+            >
+              {showPlay && (
+                <ActionIconButton label={playLabel} onClick={onPlay} disabled={isLoading}>
+                  <PlayOutline className='size-[12px]' />
+                </ActionIconButton>
+              )}
 
-              <div className='flex items-center gap-[5px]'>
-                {showPlay && (
-                  <ActionIconButton label={playLabel} onClick={onPlay} disabled={isLoading}>
-                    <PlayOutline className='size-[12px]' />
-                  </ActionIconButton>
-                )}
+              {showRefresh && (
+                <ActionIconButton label={refreshLabel} onClick={onRefresh} disabled={isLoading}>
+                  <RefreshCw className='size-[12px]' />
+                </ActionIconButton>
+              )}
 
-                {showRefresh && (
-                  <ActionIconButton label={refreshLabel} onClick={onRefresh} disabled={isLoading}>
-                    <RefreshCw className='size-[12px]' />
-                  </ActionIconButton>
-                )}
+              {runningCount > 0 && (
+                <ActionIconButton label={stopLabel} onClick={onStopWorkflows} disabled={isLoading}>
+                  <Square className='size-[12px]' />
+                </ActionIconButton>
+              )}
 
-                {runningCount > 0 && (
-                  <ActionIconButton
-                    label={stopLabel}
-                    onClick={onStopWorkflows}
-                    disabled={isLoading}
-                  >
-                    <Square className='size-[12px]' />
-                  </ActionIconButton>
-                )}
-
-                {onViewExecution && (
-                  <ActionIconButton
-                    label='View execution'
-                    onClick={onViewExecution}
-                    disabled={isLoading}
-                  >
-                    <Eye className='size-[12px]' />
-                  </ActionIconButton>
-                )}
-              </div>
-            </div>
+              {onViewExecution && (
+                <ActionIconButton
+                  label='View execution'
+                  onClick={onViewExecution}
+                  disabled={isLoading}
+                >
+                  <Eye className='size-[12px]' />
+                </ActionIconButton>
+              )}
+            </BulkActionBar>
           </m.div>
         )}
       </AnimatePresence>
@@ -152,12 +147,7 @@ function ActionIconButton({ label, onClick, disabled, children }: ActionIconButt
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <BulkActionButton
-          onClick={onClick}
-          disabled={disabled}
-          surface='uniform'
-          aria-label={label}
-        >
+        <BulkActionButton onClick={onClick} disabled={disabled} aria-label={label}>
           {children}
         </BulkActionButton>
       </Tooltip.Trigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index c005de9d781..53bd21ddf25 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import { Button, ChipDropdown, ChipInput, cn } from '@sim/emcn'
+import { Button, Chip, ChipInput, ChipSelect, cn } from '@sim/emcn'
 import { Plus, X } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import type { ColumnDefinition, FilterRule, TablePredicate } from '@/lib/table'
@@ -243,20 +243,19 @@ export function TableFilter({
         ))}
 
         <div className={cn('mt-1 flex items-center', !autoApply && 'justify-between')}>
-          <Button variant='ghost' size='sm' onClick={handleAdd} className='px-2 text-xs'>
-            <Plus className='mr-1 size-[10px]' />
+          <Chip type='button' onClick={handleAdd} leftIcon={Plus}>
             Add filter
-          </Button>
+          </Chip>
           {!autoApply && (
             <div className='flex items-center gap-1.5'>
               {filter !== null && (
-                <Button variant='ghost' size='sm' onClick={handleClear} className='px-2 text-xs'>
+                <Chip type='button' onClick={handleClear}>
                   Clear filters
-                </Button>
+                </Chip>
               )}
-              <Button variant='default' size='sm' onClick={handleApply} className='text-xs'>
+              <Chip type='button' variant='border-shadow' onClick={handleApply}>
                 Apply filter
-              </Button>
+              </Chip>
             </div>
           )}
         </div>
@@ -329,37 +328,43 @@ const FilterRuleRow = memo(function FilterRuleRow({
         </button>
       )}
 
-      <ChipDropdown
+      <ChipSelect
+        showSelectedCheck
+        modal={false}
         options={columnOptions}
         value={rule.column}
         onChange={(value) => onColumnChange(rule.id, value)}
         placeholder='Column'
         align='start'
-        matchTriggerWidth={false}
-        className='min-w-[100px]'
+        dropdownWidth='content'
+        className='w-auto min-w-[100px] max-w-none'
       />
 
-      <ChipDropdown
+      <ChipSelect
+        showSelectedCheck
+        modal={false}
         options={operatorOptions}
         value={rule.operator}
         onChange={(value) => onUpdate(rule.id, 'operator', value)}
         placeholder='Operator'
         align='start'
-        matchTriggerWidth={false}
-        className='min-w-[90px]'
+        dropdownWidth='content'
+        className='w-auto min-w-[90px] max-w-none'
       />
 
       {VALUELESS_OPS.has(rule.operator) ? (
         <div className='h-[30px] flex-1' />
       ) : isSelect ? (
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          modal={false}
           options={selectValueOptions}
           value={rule.value}
           onChange={(value) => onUpdate(rule.id, 'value', value)}
           placeholder='Select a value'
           align='start'
-          matchTriggerWidth={false}
-          className='min-w-[100px] flex-1'
+          dropdownWidth='content'
+          className='w-auto min-w-[100px] max-w-none flex-1'
         />
       ) : autoApply ? (
         <FilterValueInput
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 5b854ebeff6..3dd23d13604 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -7,13 +7,13 @@ import {
   ChipConfirmModal,
   ChipEmailsInput,
   ChipInput,
+  ChipTextarea,
   cn,
   Input,
   Label,
   Loader,
   Skeleton,
   Switch,
-  Textarea,
   Tooltip,
 } from '@sim/emcn'
 import { Check, TriangleAlert } from '@sim/emcn/icons'
@@ -450,14 +450,14 @@ export function ChatDeploy({
             >
               Welcome message
             </Label>
-            <Textarea
+            <ChipTextarea
               id='welcomeMessage'
               placeholder='Enter a welcome message for your chat'
               value={formData.welcomeMessage}
               onChange={(e) => updateField('welcomeMessage', e.target.value)}
               rows={3}
               disabled={chatSubmitting}
-              className='min-h-[80px] resize-none'
+              className='min-h-[80px]'
             />
             <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
               This message will be displayed when users first open the chat
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
index 66b018a4def..7a21bfd9882 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
@@ -6,13 +6,13 @@ import {
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipConfirmModal,
+  ChipInput,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  Input,
   Label,
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -254,7 +254,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                     <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
                       <div className='flex flex-col gap-1.5'>
                         <Label className='text-small'>Description</Label>
-                        <Input
+                        <ChipInput
                           value={paramDescriptions[field.name] || ''}
                           onChange={(e) => handleParamDescriptionChange(field.name, e.target.value)}
                           placeholder={`Enter description for ${field.name}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index 59907a39a29..a22a554173d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -6,11 +6,11 @@ import {
   Chip,
   ChipCombobox,
   ChipInput,
+  ChipTextarea,
   type ComboboxOption,
   cn,
   Label,
   Skeleton,
-  Textarea,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
@@ -565,13 +565,13 @@ export function McpDeploy({
         <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
           Description
         </Label>
-        <Textarea
+        <ChipTextarea
           placeholder={
             workflowDescriptionFallback
               ? `Defaults to the workflow description: ${workflowDescriptionFallback}`
               : 'Describe what this tool does...'
           }
-          className='min-h-[100px] resize-none'
+          className='min-h-[100px]'
           value={toolDescription}
           onChange={(e) => setToolDescription(e.target.value)}
         />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
index a40a9d7d0fd..8d5b2c05200 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -570,7 +570,7 @@ export function DeployModal({
           />
           {deployError && (
             <div role='alert'>
-              <Badge variant='red' size='lg' dot className='max-w-full truncate'>
+              <Badge variant='red' size='md' dot className='max-w-full truncate'>
                 {deployError}
               </Badge>
             </div>
@@ -780,7 +780,7 @@ function StatusBadge({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Badge variant='amber' size='lg' dot className='cursor-default'>
+          <Badge variant='amber' size='md' dot className='cursor-default'>
             {isRetrying ? 'Retrying' : 'Pending'}
           </Badge>
         </Tooltip.Trigger>
@@ -804,7 +804,7 @@ function StatusBadge({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Badge variant='red' size='lg' dot className='cursor-default'>
+          <Badge variant='red' size='md' dot className='cursor-default'>
             Failed
           </Badge>
         </Tooltip.Trigger>
@@ -823,7 +823,7 @@ function StatusBadge({
   if (!isDeployed) return null
 
   return (
-    <Badge variant={needsRedeployment ? 'amber' : 'green'} size='lg' dot>
+    <Badge variant={needsRedeployment ? 'amber' : 'green'} size='md' dot>
       {needsRedeployment ? 'Update deployment' : 'Live'}
     </Badge>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
index 63b52302b9c..ffea1c87659 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
@@ -63,6 +63,21 @@ vi.mock('@sim/emcn', () => ({
       ))}
     </div>
   ),
+  ChipSelect: ({
+    options,
+    value,
+    placeholder,
+  }: {
+    options: Array<{ value: string; label: string }>
+    value?: string
+    placeholder?: string
+  }) => (
+    <div data-combobox={placeholder} data-value={value}>
+      {options.map((option) => (
+        <span key={option.value}>{option.label}</span>
+      ))}
+    </div>
+  ),
   Label: ({ children }: { children?: React.ReactNode }) => <span>{children}</span>,
   Tooltip: {
     Root: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
index 6ddf80cb533..de1caa66d55 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { Button, Chip, Combobox, type ComboboxOption, Label, Tooltip } from '@sim/emcn'
+import { Button, Chip, ChipSelect, Combobox, type ComboboxOption, Label, Tooltip } from '@sim/emcn'
 import { ChevronDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
@@ -212,14 +212,17 @@ const FallbackRow = memo(function FallbackRow({
         {tuningFields.map(({ knob, options }) => (
           <div key={knob} className='flex flex-col gap-2.5'>
             <Label className='pl-0.5'>{FALLBACK_TUNING_LABELS[knob]}</Label>
-            <Combobox
+            <ChipSelect
+              showSelectedCheck
+              dropdownWidth='trigger'
+              modal={false}
               options={options}
               value={row[knob] ?? options[0]?.value ?? ''}
               onChange={(value) => onChangeTuning(row.id, knob, value)}
               placeholder={`Select ${FALLBACK_TUNING_LABELS[knob].toLowerCase()}`}
               aria-label={`${ordinalChoiceLabel(index)} ${FALLBACK_TUNING_LABELS[knob].toLowerCase()}`}
               disabled={readOnly}
-              className='w-full'
+              className='w-full max-w-none'
             />
           </div>
         ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
index bc68f4d7ff6..4ffb44d9739 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { type ReactNode, useCallback, useMemo, useState } from 'react'
-import { Checkbox, cn, Input, Label, SecretInput, Tooltip, Wizard } from '@sim/emcn'
+import { Checkbox, ChipInput, cn, Label, SecretInput, Tooltip, Wizard } from '@sim/emcn'
 import { Check, ChevronRight, CircleInfo, Clipboard } from '@sim/emcn/icons'
 import { useShallow } from 'zustand/react/shallow'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
@@ -220,13 +220,13 @@ function StepConfigure({
         >
           Bot name
         </Label>
-        <Input
+        <ChipInput
           id={`${blockId}-wizard-bot-name`}
           value={appName}
           onChange={(e) => onAppNameChange(e.target.value)}
           disabled={disabled}
           placeholder={DEFAULT_APP_NAME}
-          className='h-9 text-sm'
+          className='h-9'
         />
       </div>
       <div className='grid grid-cols-2 gap-x-4 gap-y-4'>
@@ -416,7 +416,7 @@ function SecretField({ id, label, value, onChange, disabled, placeholder }: Secr
         onChange={onChange}
         disabled={disabled}
         placeholder={placeholder}
-        className='h-9 text-sm'
+        className='h-9'
       />
     </div>
   )
diff --git a/apps/sim/components/emails/_styles/base.tokens.test.ts b/apps/sim/components/emails/_styles/base.tokens.test.ts
index a54097c8cf5..5e607c8553a 100644
--- a/apps/sim/components/emails/_styles/base.tokens.test.ts
+++ b/apps/sim/components/emails/_styles/base.tokens.test.ts
@@ -7,16 +7,13 @@
  */
 import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
+import { chipGeometryClass } from '@sim/emcn/components/chip/chip-chrome'
 import { describe, expect, it } from 'vitest'
 import { baseStyles, colors, typography } from '@/components/emails/_styles'
 
 const APP_ROOT = join(__dirname, '../../..')
 
 const globalsCss = readFileSync(join(APP_ROOT, 'app/_styles/globals.css'), 'utf8')
-const chipChrome = readFileSync(
-  join(APP_ROOT, '../../packages/emcn/src/components/chip/chip-chrome.ts'),
-  'utf8'
-)
 
 /**
  * The type scale moved into the `@theme` block when the v4 upgrade removed
@@ -85,7 +82,7 @@ describe('email type scale mirrors the globals.css @theme scale', () => {
   it('sm is Tailwind stock 14px — the size text-sm resolves to in chip chrome', () => {
     expect(typography.fontSize.sm).toBe('14px')
     expect(tailwindFontSize.sm).toBeUndefined()
-    expect(chipChrome).toContain('text-sm')
+    expect(chipGeometryClass).toContain('text-sm')
   })
 
   it('display is deliberately off-scale — the platform has no headline numeral', () => {
@@ -101,18 +98,9 @@ describe('email geometry mirrors the platform', () => {
   })
 
   it('the CTA transcribes chipGeometryClass', () => {
-    // chipGeometryClass composes the unrounded geometry with the default radius,
-    // so the transcription reads both halves rather than one literal.
-    expect(chipChrome).toMatch(
-      /chipGeometryClass = `\$\{chipGeometryUnroundedClass\} \$\{chipRadiusClass\}`/
-    )
-    const unrounded = chipChrome.match(/chipGeometryUnroundedClass = `([^`]+)`/)?.[1]
-    const radius = chipChrome.match(/chipRadiusClass = '([^']+)'/)?.[1]
-    expect(unrounded).toBeDefined()
-    expect(radius).toBeDefined()
-    const geometry = `${unrounded} ${radius}`
+    // Read the composed token so splitting shared constants cannot hide drift.
     for (const token of ['h-[30px]', 'rounded-lg', 'px-2', 'text-sm']) {
-      expect(geometry).toContain(token)
+      expect(chipGeometryClass).toContain(token)
     }
 
     expect(baseStyles.button.lineHeight).toBe('30px')
diff --git a/apps/sim/components/permissions/member-row.tsx b/apps/sim/components/permissions/member-row.tsx
index 75e3f324074..3673ae85705 100644
--- a/apps/sim/components/permissions/member-row.tsx
+++ b/apps/sim/components/permissions/member-row.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Avatar, AvatarFallback, Chip, ChipDropdown, cn, OverflowText } from '@sim/emcn'
+import { Avatar, AvatarFallback, Chip, ChipSelect, cn, OverflowText } from '@sim/emcn'
 import { getUserColor } from '@/lib/workspaces/colors'
 import type { MemberRole } from './member-role-options'
 import { RoleLockTooltip } from './role-lock'
@@ -74,7 +74,11 @@ export function MemberRow<TRole extends string = MemberRole>({
         </div>
       </div>
       <RoleLockTooltip reason={lockReason}>
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          dropdownWidth='trigger'
+          modal={false}
+          className='w-auto max-w-none'
           options={roleOptions}
           value={member.role}
           placeholder='Role'
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 25a1d645ab5..57343db2d0e 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -5,7 +5,6 @@ import {
   Checkbox,
   Chip,
   ChipConfirmModal,
-  ChipDropdown,
   ChipInput,
   ChipModal,
   ChipModalBody,
@@ -14,6 +13,7 @@ import {
   ChipModalFooter,
   ChipModalHeader,
   ChipModalTabs,
+  ChipSelect,
   ChipTag,
   cn,
   Info,
@@ -152,12 +152,14 @@ interface StatusFilterChipProps {
 /** The All/Enabled/Disabled narrowing control shared by the three list tabs. */
 function StatusFilterChip({ value, onChange }: StatusFilterChipProps) {
   return (
-    <ChipDropdown
+    <ChipSelect
+      showSelectedCheck
+      modal={false}
       value={value}
       onChange={(next) => onChange(next as StatusFilter)}
       options={STATUS_FILTER_OPTIONS}
-      matchTriggerWidth={false}
-      className='w-[140px] shrink-0'
+      dropdownWidth='content'
+      className='w-[140px] max-w-none shrink-0'
     />
   )
 }
@@ -184,22 +186,24 @@ function AllowlistField({ label, value, onChange, options, disabled }: Allowlist
       <span id={labelId} className='text-[var(--text-muted)] text-caption'>
         {label}
       </span>
-      <ChipDropdown
-        multiple
+      <ChipSelect
+        placeholder='None allowed'
+        modal={false}
+        multiSelect
         showAllOption={false}
         id={triggerId}
         // Both ids: `aria-labelledby` replaces the content-derived name, so
         // naming it with the label alone would drop the selected value.
         aria-labelledby={`${labelId} ${triggerId}`}
-        value={value}
-        onChange={onChange}
+        multiSelectValues={value}
+        onMultiSelectChange={onChange}
         options={options}
         disabled={disabled}
         // An empty allow-list denies every option, so the multi-select's default
         // empty label — 'All' — states the opposite of what the server enforces.
-        allLabel='None allowed'
-        matchTriggerWidth={false}
-        className='w-[200px]'
+        allOptionLabel='None allowed'
+        dropdownWidth='content'
+        className='w-[200px] max-w-none'
       />
     </div>
   )
diff --git a/apps/sim/ee/access-control/components/workspace-select.tsx b/apps/sim/ee/access-control/components/workspace-select.tsx
index 0b5c758c32a..ea1437e5d25 100644
--- a/apps/sim/ee/access-control/components/workspace-select.tsx
+++ b/apps/sim/ee/access-control/components/workspace-select.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { ChipDropdown, type ChipDropdownProps } from '@sim/emcn'
+import { ChipSelect, type ChipSelectProps, cn } from '@sim/emcn'
 
 interface WorkspaceSelectProps
   extends Pick<
-    ChipDropdownProps,
+    ChipSelectProps,
     'id' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-required' | 'aria-invalid'
   > {
   workspaceIds: string[]
@@ -38,18 +38,26 @@ export function WorkspaceSelect({
   ...fieldAria
 }: WorkspaceSelectProps) {
   return (
-    <ChipDropdown
+    <ChipSelect
+      placeholder={
+        isLoading
+          ? 'Loading workspaces…'
+          : allowAllWorkspaces
+            ? 'All workspaces'
+            : 'Select workspaces…'
+      }
+      modal={false}
       {...fieldAria}
-      multiple
+      multiSelect
       searchable
       align={fullWidth ? 'start' : 'end'}
-      matchTriggerWidth={fullWidth}
+      dropdownWidth={fullWidth ? 'trigger' : 'content'}
       options={options}
-      value={workspaceIds}
-      onChange={onChange}
+      multiSelectValues={workspaceIds}
+      onMultiSelectChange={onChange}
       disabled={disabled || isLoading}
       showAllOption={allowAllWorkspaces}
-      allLabel={
+      allOptionLabel={
         isLoading
           ? 'Loading workspaces…'
           : allowAllWorkspaces
@@ -58,7 +66,7 @@ export function WorkspaceSelect({
       }
       searchPlaceholder='Search workspaces…'
       fullWidth={fullWidth}
-      className={className}
+      className={cn(fullWidth ? undefined : 'w-auto max-w-none', className)}
     />
   )
 }
diff --git a/apps/sim/ee/access-requests/components/organization-access-requests.tsx b/apps/sim/ee/access-requests/components/organization-access-requests.tsx
index e989f8cb369..6e45be61adb 100644
--- a/apps/sim/ee/access-requests/components/organization-access-requests.tsx
+++ b/apps/sim/ee/access-requests/components/organization-access-requests.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, ChipDropdown, ChipInput, ChipSwitch, ChipTag, toast } from '@sim/emcn'
+import { Chip, ChipInput, ChipSelect, ChipSwitch, ChipTag, toast } from '@sim/emcn'
 import { Search } from '@sim/emcn/icons'
 import { useQueryStates } from 'nuqs'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
@@ -105,7 +105,11 @@ export function OrganizationAccessRequests({
       <SettingsSection
         label={requestCount === undefined ? requestLabel : `${requestLabel} (${requestCount})`}
         action={
-          <ChipDropdown
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
+            className='w-auto max-w-none'
             value={params['request-status']}
             onChange={(value) =>
               void setParams({
diff --git a/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.test.tsx b/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.test.tsx
index 80b36c8841e..74cc9afcfbd 100644
--- a/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.test.tsx
+++ b/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.test.tsx
@@ -4,6 +4,7 @@
 
 import type { ReactNode } from 'react'
 import { act } from 'react'
+import type { ChipSelectProps } from '@sim/emcn'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, expect, it, vi } from 'vitest'
 
@@ -35,49 +36,33 @@ vi.mock('@sim/emcn', () => ({
       </button>
     </div>
   ),
-  ChipDropdown: ({
-    options,
-    value,
-    onChange,
-  }: {
-    options: Array<{ value: string; label: string }>
-    value: string[]
-    onChange: (value: string[]) => void
-  }) => (
+  ChipSelect: (props: ChipSelectProps) => (
     <div>
-      {options.map((option) => (
+      {props.options?.map((option) => (
         <button
           key={option.value}
           type='button'
-          aria-pressed={value.includes(option.value)}
-          onClick={() =>
-            onChange(
-              value.includes(option.value)
-                ? value.filter((id) => id !== option.value)
-                : [...value, option.value]
-            )
+          aria-pressed={
+            props.multiSelect
+              ? props.multiSelectValues?.includes(option.value)
+              : props.value === option.value
           }
+          onClick={() => {
+            if (props.multiSelect) {
+              const values = props.multiSelectValues ?? []
+              props.onMultiSelectChange?.(
+                values.includes(option.value)
+                  ? values.filter((id) => id !== option.value)
+                  : [...values, option.value]
+              )
+            } else props.onChange?.(option.value)
+          }}
         >
           {option.label}
         </button>
       ))}
     </div>
   ),
-  ChipSelect: ({
-    options,
-    onChange,
-  }: {
-    options: Array<{ value: string; label: string }>
-    onChange: (value: string) => void
-  }) => (
-    <div>
-      {options.map((option) => (
-        <button key={option.value} type='button' onClick={() => onChange(option.value)}>
-          {option.label}
-        </button>
-      ))}
-    </div>
-  ),
 }))
 
 import { CredentialGroupAddResourceModal } from '@/ee/credential-groups/components/credential-group-add-resource-modal'
diff --git a/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.tsx b/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.tsx
index e19d8efba7b..a5786f37dcf 100644
--- a/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.tsx
+++ b/apps/sim/ee/credential-groups/components/credential-group-add-resource-modal.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import {
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalError,
@@ -61,19 +60,21 @@ export function CredentialGroupAddResourceModal(props: CredentialGroupAddResourc
         <ChipModalField type='custom' title={label} required submitOnEnter={false}>
           {(aria) =>
             resourceType === 'workspace' ? (
-              <ChipDropdown
-                multiple
+              <ChipSelect
+                placeholder='Select workspaces'
+                modal={false}
+                multiSelect
                 options={options}
-                value={selectedResourceIds}
-                onChange={setSelectedResourceIds}
-                allLabel='Select workspaces'
+                multiSelectValues={selectedResourceIds}
+                onMultiSelectChange={setSelectedResourceIds}
+                allOptionLabel='Select workspaces'
                 showAllOption={false}
                 searchPlaceholder='Search workspaces'
                 searchable
                 aria-label={label}
                 disabled={disabled}
                 fullWidth
-                matchTriggerWidth
+                dropdownWidth='trigger'
                 align='start'
                 {...aria}
               />
diff --git a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx
index 5c27e1aa1a1..60ad650ac2f 100644
--- a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx
+++ b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx
@@ -59,7 +59,7 @@ describe('workspace integration grant editor', () => {
     return result
   }
   function integrationOption(label: string) {
-    const result = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
+    const result = [...document.querySelectorAll<HTMLElement>('[role="menuitemcheckbox"]')].find(
       (element) => element.textContent === label
     )
     if (!result) throw new Error(`Missing ${label} option`)
@@ -98,7 +98,9 @@ describe('workspace integration grant editor', () => {
     await selectWorkspace()
     expect(button('Add workspace').disabled).toBe(true)
     await openIntegrations()
-    expect(document.querySelector('[role="menuitem"]')?.textContent).toBe('All integrations')
+    expect(document.querySelector('[role="menuitemcheckbox"]')?.textContent).toBe(
+      'All integrations'
+    )
     await act(async () => integrationOption('Gmail').click())
     await closeIntegrations()
     expect(button('Add workspace').disabled).toBe(false)
@@ -126,7 +128,9 @@ describe('workspace integration grant editor', () => {
   it('narrows broad access when a specific integration is selected', async () => {
     await render()
     await openIntegrations()
-    expect(document.querySelector('[role="menuitem"]')?.textContent).toBe('All integrations')
+    expect(document.querySelector('[role="menuitemcheckbox"]')?.textContent).toBe(
+      'All integrations'
+    )
     await act(async () => integrationOption('Gmail').click())
     await closeIntegrations()
     await click('Save access')
@@ -200,7 +204,7 @@ describe('workspace integration grant editor', () => {
       search?.dispatchEvent(new Event('input', { bubbles: true }))
     })
     expect(
-      [...document.querySelectorAll('[role="menuitem"]')].map((item) => item.textContent)
+      [...document.querySelectorAll('[role="menuitemcheckbox"]')].map((item) => item.textContent)
     ).toEqual(['Google Calendar'])
     await act(async () => integrationOption('Google Calendar').click())
     await closeIntegrations()
diff --git a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx
index fdc2eb01f69..83791ac491e 100644
--- a/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx
+++ b/apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import {
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalError,
@@ -108,14 +107,18 @@ export function OrganizationWorkspaceGrantModal(props: OrganizationWorkspaceGran
           hint={access.mode === 'all' ? 'Includes integrations added in the future.' : undefined}
         >
           {(aria) => (
-            <ChipDropdown
-              multiple
+            <ChipSelect
+              placeholder='Select integrations'
+              modal={false}
+              multiSelect
               options={[
                 { value: ALL_INTEGRATIONS, label: 'All integrations' },
                 ...credentialTypes.map((type) => ({ value: type.id, label: type.label })),
               ]}
-              value={access.mode === 'all' ? [ALL_INTEGRATIONS] : access.credentialTypes}
-              onChange={(values) => {
+              multiSelectValues={
+                access.mode === 'all' ? [ALL_INTEGRATIONS] : access.credentialTypes
+              }
+              onMultiSelectChange={(values) => {
                 if (access.mode !== 'all' && values.includes(ALL_INTEGRATIONS)) {
                   setAccess({ mode: 'all' })
                   return
@@ -125,14 +128,14 @@ export function OrganizationWorkspaceGrantModal(props: OrganizationWorkspaceGran
                   throw new Error('Unknown credential type')
                 setAccess({ mode: 'selected', credentialTypes: selected })
               }}
-              allLabel='Select integrations'
+              allOptionLabel='Select integrations'
               aria-label='Integrations'
               showAllOption={false}
               searchable
               searchPlaceholder='Search integrations'
               disabled={disabled}
               fullWidth
-              matchTriggerWidth
+              dropdownWidth='trigger'
               align='start'
               {...aria}
             />
diff --git a/apps/sim/ee/data-retention/components/data-retention-settings.tsx b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
index f6ce7420e81..d106c7a7226 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -5,7 +5,6 @@ import {
   Checkbox,
   Chip,
   ChipConfirmModal,
-  ChipDropdown,
   ChipInput,
   ChipSelect,
   ChipSwitch,
@@ -531,14 +530,17 @@ function PolicyDetail({
                   ? `Overrides ${draft.workspaceIds.length} workspace${draft.workspaceIds.length === 1 ? '' : 's'}`
                   : 'Select the workspaces this override applies to'}
               </span>
-              <ChipDropdown
-                multiple
+              <ChipSelect
+                placeholder='Select workspaces'
+                dropdownWidth='trigger'
+                modal={false}
+                multiSelect
                 showAllOption={false}
-                allLabel='Select workspaces'
-                value={draft.workspaceIds}
-                onChange={(workspaceIds) => onChange({ ...draft, workspaceIds })}
+                allOptionLabel='Select workspaces'
+                multiSelectValues={draft.workspaceIds}
+                onMultiSelectChange={(workspaceIds) => onChange({ ...draft, workspaceIds })}
                 options={workspaceOptions}
-                className='shrink-0'
+                className='w-auto max-w-none shrink-0'
               />
             </div>
           </SettingsSection>
diff --git a/apps/sim/ee/organization-usage/components/activity-panel.tsx b/apps/sim/ee/organization-usage/components/activity-panel.tsx
index d3aff2fca49..7d66c260aa0 100644
--- a/apps/sim/ee/organization-usage/components/activity-panel.tsx
+++ b/apps/sim/ee/organization-usage/components/activity-panel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Chip, ChipDropdown } from '@sim/emcn'
+import { Chip, ChipSelect } from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { isApiClientError } from '@/lib/api/client/errors'
 import {
@@ -90,9 +90,11 @@ export function ActivityPanel({ organizationId }: ActivityPanelProps) {
       <SettingsSection label='Breakdown'>
         <div className='flex flex-col gap-3'>
           <div className='flex flex-wrap items-center justify-between gap-2'>
-            <ChipDropdown
-              matchTriggerWidth={false}
-              className='max-w-full'
+            <ChipSelect
+              showSelectedCheck
+              modal={false}
+              dropdownWidth='content'
+              className='w-auto max-w-full'
               options={DIMENSIONS}
               value={activityDimension}
               onChange={(value) =>
@@ -101,9 +103,11 @@ export function ActivityPanel({ organizationId }: ActivityPanelProps) {
               aria-label='Group activity by'
             />
             {activityDimension !== 'member' && (
-              <ChipDropdown
-                matchTriggerWidth={false}
-                className='max-w-full'
+              <ChipSelect
+                showSelectedCheck
+                modal={false}
+                dropdownWidth='content'
+                className='w-auto max-w-full'
                 options={SORTS}
                 value={sort}
                 onChange={(value) =>
diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
index 0af36c8de01..e5489919698 100644
--- a/apps/sim/ee/sso/components/sso-auth.tsx
+++ b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { type KeyboardEvent, useState } from 'react'
-import { cn, Input, Label } from '@sim/emcn'
+import { ChipInput, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
 import { ApiClientError } from '@/lib/api/client/errors'
@@ -118,7 +118,7 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
               <div className='flex items-center justify-between'>
                 <Label htmlFor='email'>Work Email</Label>
               </div>
-              <Input
+              <ChipInput
                 id='email'
                 name='email'
                 required
@@ -130,11 +130,8 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
                 value={email}
                 onChange={handleEmailChange}
                 onKeyDown={handleKeyDown}
-                className={cn(
-                  showEmailValidationError &&
-                    emailErrors.length > 0 &&
-                    'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                )}
+                className='h-[34px]'
+                error={showEmailValidationError && emailErrors.length > 0}
               />
               {showEmailValidationError && emailErrors.length > 0 && (
                 <div className='mt-1 space-y-1 text-[var(--text-error)] text-caption'>
diff --git a/apps/sim/ee/sso/components/sso-form.test.tsx b/apps/sim/ee/sso/components/sso-form.test.tsx
index 37f92d89d94..369ef6a165b 100644
--- a/apps/sim/ee/sso/components/sso-form.test.tsx
+++ b/apps/sim/ee/sso/components/sso-form.test.tsx
@@ -31,7 +31,10 @@ vi.mock('@sim/emcn', () => ({
       {children}
     </button>
   ),
-  Input: (props: InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
+  ChipInput: ({
+    error: _error,
+    ...props
+  }: InputHTMLAttributes<HTMLInputElement> & { error?: boolean }) => <input {...props} />,
   Label: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
   cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
 }))
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 450865afc1b..494a9d25df7 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Button, cn, Input, Label } from '@sim/emcn'
+import { Button, ChipInput, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
@@ -215,7 +215,7 @@ function SSOFormContent({
             <div className='flex items-center justify-between'>
               <Label htmlFor='email'>Work email</Label>
             </div>
-            <Input
+            <ChipInput
               id='email'
               name='email'
               placeholder='Enter your work email'
@@ -227,9 +227,8 @@ function SSOFormContent({
               onChange={handleEmailChange}
               aria-invalid={hasEmailError || undefined}
               aria-describedby={hasEmailError ? 'sso-email-errors' : undefined}
-              className={cn(
-                hasEmailError && 'border-[var(--text-error)] focus:border-[var(--text-error)]'
-              )}
+              className='h-[34px]'
+              error={Boolean(hasEmailError)}
             />
             {hasEmailError && (
               <div
diff --git a/packages/emcn/src/components/badge/badge.test.tsx b/packages/emcn/src/components/badge/badge.test.tsx
new file mode 100644
index 00000000000..a5acc1b33af
--- /dev/null
+++ b/packages/emcn/src/components/badge/badge.test.tsx
@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Badge } from './badge'
+
+function Icon({ className }: { className?: string }) {
+  return <svg className={className} aria-hidden />
+}
+
+describe('Badge', () => {
+  it.each([
+    ['sm', 'text-xs', 'size-[5px]', 'size-2.5'],
+    ['md', 'text-caption', 'size-1.5', 'size-3'],
+  ] as const)('keeps the %s label, dot and icon proportions', (size, text, dot, icon) => {
+    const status = renderToStaticMarkup(
+      <Badge size={size} variant='green' dot>
+        Live
+      </Badge>
+    )
+    expect(status).toContain(text)
+    expect(status).toContain(dot)
+    expect(status).toContain('Live')
+    expect(
+      renderToStaticMarkup(
+        <Badge size={size} icon={Icon}>
+          Download
+        </Badge>
+      )
+    ).toContain(icon)
+  })
+})
diff --git a/packages/emcn/src/components/badge/badge.tsx b/packages/emcn/src/components/badge/badge.tsx
index cb0d1c3cd7f..b580a5aed83 100644
--- a/packages/emcn/src/components/badge/badge.tsx
+++ b/packages/emcn/src/components/badge/badge.tsx
@@ -21,7 +21,6 @@ const badgeVariants = cva('inline-flex items-center focus:outline-hidden transit
       purple: `${STATUS_BASE} bg-[var(--badge-purple-bg)] text-[var(--badge-purple-text)]`,
       orange: `${STATUS_BASE} bg-[var(--badge-orange-bg)] text-[var(--badge-orange-text)]`,
       amber: `${STATUS_BASE} bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]`,
-      teal: `${STATUS_BASE} bg-[var(--badge-teal-bg)] text-[var(--badge-teal-text)]`,
       cyan: `${STATUS_BASE} bg-[var(--badge-cyan-bg)] text-[var(--badge-cyan-text)]`,
       pink: `${STATUS_BASE} bg-[var(--badge-pink-bg)] text-[var(--badge-pink-text)]`,
       'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
@@ -29,7 +28,6 @@ const badgeVariants = cva('inline-flex items-center focus:outline-hidden transit
     size: {
       sm: 'px-[7px] py-[1px] text-xs',
       md: 'px-[9px] py-0.5 text-caption',
-      lg: 'px-[9px] py-[2.25px] text-caption',
     },
   },
   defaultVariants: {
@@ -48,7 +46,6 @@ const STATUS_VARIANTS = [
   'purple',
   'orange',
   'amber',
-  'teal',
   'cyan',
   'pink',
   'gray-secondary',
@@ -58,14 +55,12 @@ const STATUS_VARIANTS = [
 const DOT_SIZES: Record<string, string> = {
   sm: 'size-[5px]',
   md: 'size-1.5',
-  lg: 'size-1.5',
 }
 
 /** Icon sizes corresponding to badge size variants */
 const ICON_SIZES: Record<string, string> = {
   sm: 'size-2.5',
   md: 'size-3',
-  lg: 'size-3',
 }
 
 export interface BadgeProps
@@ -84,7 +79,7 @@ export interface BadgeProps
  * Supports two categories of variants:
  * - **Bordered**: `default`, `outline`, `type` - traditional badges with borders
  * - **Status colors**: `green`, `red`, `gray`, `blue`, `blue-secondary`, `purple`,
- *   `orange`, `amber`, `teal`, `cyan`, `pink`, `gray-secondary` - borderless colored badges
+ *   `orange`, `amber`, `cyan`, `pink`, `gray-secondary` - borderless colored badges
  *
  * Status color variants can display a dot indicator via the `dot` prop.
  * All variants support an optional `icon` prop for leading icons.
diff --git a/packages/emcn/src/components/bulk-action-bar/bulk-action-bar.tsx b/packages/emcn/src/components/bulk-action-bar/bulk-action-bar.tsx
new file mode 100644
index 00000000000..2b90c8cfb03
--- /dev/null
+++ b/packages/emcn/src/components/bulk-action-bar/bulk-action-bar.tsx
@@ -0,0 +1,31 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../../lib/cn'
+
+export interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Selection summary, including optional inline selection actions or limit warnings. */
+  label: ReactNode
+  children: ReactNode
+}
+
+/**
+ * Shared selection-action surface. Callers own visibility, positioning, animation
+ * and commands; compose actions with BulkActionButton.
+ * @example <BulkActionBar label='2 selected'><BulkActionButton aria-label='Delete'><Trash /></BulkActionButton></BulkActionBar>
+ */
+export const BulkActionBar = forwardRef<HTMLDivElement, BulkActionBarProps>(
+  ({ label, children, className, ...props }, ref) => (
+    <div
+      {...props}
+      ref={ref}
+      className={cn(
+        'flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5',
+        className
+      )}
+    >
+      <span className='px-1 text-[var(--text-secondary)] text-small'>{label}</span>
+      <div className='flex items-center gap-[5px]'>{children}</div>
+    </div>
+  )
+)
+
+BulkActionBar.displayName = 'BulkActionBar'
diff --git a/packages/emcn/src/components/bulk-action-button/bulk-action-button.test.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.test.tsx
index 763106567be..ac5928b2bd7 100644
--- a/packages/emcn/src/components/bulk-action-button/bulk-action-button.test.tsx
+++ b/packages/emcn/src/components/bulk-action-button/bulk-action-button.test.tsx
@@ -35,33 +35,28 @@ const PREVIOUS_GEOMETRY =
   'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 hover-hover:bg-[var(--brand-secondary)]'
 
 describe('BulkActionButton', () => {
-  for (const surface of [undefined, 'adaptive', 'uniform'] as const) {
-    it(`preserves the previous button markup for ${surface ?? 'default'}`, () => {
-      const previousFill =
-        surface === 'uniform'
-          ? 'bg-[var(--surface-5)]'
-          : 'bg-[var(--surface-5)] dark:bg-[var(--surface-4)]'
-      const view = mount(
-        <>
-          <Button
-            variant='ghost'
-            aria-label='Delete'
-            className={`${previousFill} ${PREVIOUS_GEOMETRY}`}
-          >
-            <svg className='size-[12px]' aria-hidden='true' />
-          </Button>
-          <BulkActionButton aria-label='Delete' surface={surface}>
-            <svg className='size-[12px]' aria-hidden='true' />
-          </BulkActionButton>
-        </>
-      )
-      const [previous, current] = view.querySelectorAll('button')
-      /** Class order changes when composing recipes; the resolved utility set must not. */
-      previous.className = previous.className.split(/\s+/).sort().join(' ')
-      current.className = current.className.split(/\s+/).sort().join(' ')
-      expect(current.outerHTML).toBe(previous.outerHTML)
-    })
-  }
+  it('uses the shared adaptive fill without changing action geometry', () => {
+    const previousFill = 'bg-[var(--surface-5)] dark:bg-[var(--surface-4)]'
+    const view = mount(
+      <>
+        <Button
+          variant='ghost'
+          aria-label='Delete'
+          className={`${previousFill} ${PREVIOUS_GEOMETRY}`}
+        >
+          <svg className='size-[12px]' aria-hidden='true' />
+        </Button>
+        <BulkActionButton aria-label='Delete'>
+          <svg className='size-[12px]' aria-hidden='true' />
+        </BulkActionButton>
+      </>
+    )
+    const [previous, current] = view.querySelectorAll('button')
+    /** Class order changes when composing recipes; the resolved utility set must not. */
+    previous.className = previous.className.split(/\s+/).sort().join(' ')
+    current.className = current.className.split(/\s+/).sort().join(' ')
+    expect(current.outerHTML).toBe(previous.outerHTML)
+  })
 
   it('forwards the native ref, attributes and original events', () => {
     const ref = createRef<HTMLButtonElement>()
diff --git a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
index e9717c2f7b9..02d8924e96b 100644
--- a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
+++ b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
@@ -1,33 +1,15 @@
 import { forwardRef } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
 import { Button, type ButtonProps } from '../button/button'
 import { chipFilledFillTokens, chipRadiusClass } from '../chip/chip-chrome'
 
 /** The shared 28px geometry and brand-hover treatment of selection action bars. */
-export const bulkActionButtonVariants = cva(
-  `${chipRadiusClass} size-[28px] p-0 hover-hover:bg-[var(--brand-secondary)] hover-hover:text-[var(--text-inverse)]!`,
-  {
-    variants: {
-      surface: {
-        adaptive: chipFilledFillTokens,
-        uniform: 'bg-[var(--surface-5)]',
-      },
-    },
-    defaultVariants: { surface: 'adaptive' },
-  }
-)
+const BULK_ACTION_BUTTON_CLASS = `${chipRadiusClass} ${chipFilledFillTokens} size-[28px] p-0 hover-hover:bg-[var(--brand-secondary)] hover-hover:text-[var(--text-inverse)]!`
 
 export interface BulkActionButtonProps
   extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the icon action; tooltip content is supplied separately. */
   'aria-label': string
-  /**
-   * `adaptive` follows the filled chip surface: surface-5 in light mode and surface-4 in dark.
-   * `uniform` retains surface-5 in both themes, as used by table-cell action bars.
-   * @default 'adaptive'
-   */
-  surface?: NonNullable<VariantProps<typeof bulkActionButtonVariants>['surface']>
 }
 
 /**
@@ -39,13 +21,13 @@ export interface BulkActionButtonProps
  * @example <BulkActionButton aria-label='Delete' onClick={onDelete}><Trash className='size-[12px]' /></BulkActionButton>
  */
 export const BulkActionButton = forwardRef<HTMLButtonElement, BulkActionButtonProps>(
-  ({ surface, className, ...props }, ref) => (
+  ({ className, ...props }, ref) => (
     <Button
       {...props}
       ref={ref}
       variant='ghost'
       size='md'
-      className={cn(bulkActionButtonVariants({ surface }), className)}
+      className={cn(BULK_ACTION_BUTTON_CLASS, className)}
     />
   )
 )
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 649c3524432..db6d0c7fb9a 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -36,9 +36,6 @@ const buttonVariants = cva(
           'bg-[var(--text-primary)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--text-body)] dark:bg-white dark:text-[var(--bg)] dark:hover-hover:bg-[var(--text-secondary)] dark:hover-hover:text-[var(--bg)]',
         destructive:
           'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
-        secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
-        tertiary:
-          'bg-[var(--brand-accent)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--brand-accent-hover)] dark:bg-[var(--brand-accent)] dark:hover-hover:bg-[var(--brand-accent-hover)] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]',
         ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
         subtle:
           'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
diff --git a/packages/emcn/src/components/checkbox/checkbox.tsx b/packages/emcn/src/components/checkbox/checkbox.tsx
index 9df963bf85e..d35286daa36 100644
--- a/packages/emcn/src/components/checkbox/checkbox.tsx
+++ b/packages/emcn/src/components/checkbox/checkbox.tsx
@@ -18,8 +18,8 @@ import { cn } from '../../lib/cn'
  * // Small checkbox (for tables)
  * <Checkbox size="sm" />
  *
- * // Large checkbox
- * <Checkbox size="lg" />
+ * // Standard checkbox
+ * <Checkbox size="md" />
  * ```
  */
 const checkboxVariants = cva(
@@ -37,7 +37,6 @@ const checkboxVariants = cva(
       size: {
         sm: 'h-[14px] w-[14px]',
         md: 'h-4 w-4',
-        lg: 'h-5 w-5',
       },
     },
     defaultVariants: {
@@ -54,7 +53,6 @@ const checkboxIconVariants = cva('stroke-[3]', {
     size: {
       sm: 'h-[10px] w-[10px]',
       md: 'h-3.5 w-3.5',
-      lg: 'h-4 w-4',
     },
   },
   defaultVariants: {
diff --git a/packages/emcn/src/components/chip-button-group/chip-button-group.tsx b/packages/emcn/src/components/chip-button-group/chip-button-group.tsx
index 5b779537ff6..7598ec01a42 100644
--- a/packages/emcn/src/components/chip-button-group/chip-button-group.tsx
+++ b/packages/emcn/src/components/chip-button-group/chip-button-group.tsx
@@ -8,12 +8,8 @@ import { cn } from '../../lib/cn'
 import { segmentedControlItemVariants, segmentedControlVariants } from '../chip/segmented-control'
 import { scrollFadeAttributes, scrollFadeXClass } from '../scroll-fade/scroll-fade'
 
-/** Shared chip chrome; preserves the compound control's existing gap default. */
-const chipButtonGroupVariants = ({
-  gap = 'sm',
-  ...props
-}: Parameters<typeof segmentedControlVariants>[0] = {}) =>
-  segmentedControlVariants({ gap, ...props })
+/** Shared zero-gap chip chrome for both segmented APIs. */
+const chipButtonGroupVariants = segmentedControlVariants
 
 interface ChipButtonGroupContextValue {
   value: string | undefined
@@ -58,7 +54,6 @@ export interface ChipButtonGroupProps
  */
 function ChipButtonGroup({
   className,
-  gap,
   size = 'default',
   value,
   onValueChange,
@@ -78,7 +73,7 @@ function ChipButtonGroup({
       >
         <div
           ref={groupRef}
-          className={cn(scrollFadeXClass, chipButtonGroupVariants({ gap, size }), className)}
+          className={cn(scrollFadeXClass, chipButtonGroupVariants({ size }), className)}
           {...scrollFadeAttributes(edges)}
           {...props}
         >
diff --git a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
index 9650a9892f7..52e548d1931 100644
--- a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
+++ b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
@@ -1,12 +1,13 @@
 'use client'
 
 import { cn } from '../../lib/cn'
+import { chipFilledFillTokens, chipHeightClass, chipRadiusClass } from '../chip/chip-chrome'
 import { Combobox, type ComboboxProps } from '../combobox/combobox'
 
 /**
  * Chip-styled {@link Combobox}. A thin wrapper that skins the trigger to match
  * the 30px chip pill (`rounded-lg`, chip surface tokens) shared by
- * `ChipDropdown`, `ChipModal`, and `ChipInput`.
+ * `ChipSelect`, `ChipModal`, and `ChipInput`.
  *
  * Reuses 100% of `Combobox` — search, editable entry, multi-select, groups,
  * async loading, per-option icons, and `overlayContent` all work unchanged.
@@ -18,7 +19,7 @@ import { Combobox, type ComboboxProps } from '../combobox/combobox'
  * label span with `--text-muted` independently of the trigger className.
  *
  * Use this in chip-styled surfaces (settings pages, chip forms). For the
- * lightweight no-search case, prefer `ChipDropdown`.
+ * menu-selection case, including searchable menus, prefer `ChipSelect`.
  *
  * @example
  * <ChipCombobox options={SOURCE_OPTIONS} value={source} onChange={setSource} />
@@ -28,7 +29,10 @@ export function ChipCombobox({ className, ...props }: ComboboxProps) {
     <Combobox
       {...props}
       className={cn(
-        'h-[30px] rounded-lg text-[var(--text-body)] dark:bg-[var(--surface-4)]',
+        chipRadiusClass,
+        chipFilledFillTokens,
+        chipHeightClass,
+        'text-[var(--text-body)]',
         className
       )}
     />
diff --git a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
index ca65061ab31..c4b0af3a679 100644
--- a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
+++ b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
@@ -69,7 +69,7 @@ interface ChipDatePickerRangeProps extends ChipDatePickerBaseProps {
 export type ChipDatePickerProps = ChipDatePickerSingleProps | ChipDatePickerRangeProps
 
 /**
- * Date counterpart to {@link ChipDropdown} — a chip-styled trigger that opens a
+ * Date counterpart to {@link ChipSelect} — a chip-styled trigger that opens a
  * {@link Calendar} in a popover. The default `filled` trigger reuses
  * `chipVariants` (filled + border) and the owned chevron for visual parity with
  * the other chip field controls; `ghost` renders the bare toolbar pill instead.
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx
deleted file mode 100644
index 0e08a1bb5f9..00000000000
--- a/packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { act } from 'react'
-import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, describe, expect, it } from 'vitest'
-import { ChipDropdown, type ChipDropdownProps } from './chip-dropdown'
-
-let root: Root | null = null
-let container: HTMLDivElement | null = null
-
-function mount(
-  fullWidth: boolean,
-  aria: Pick<ChipDropdownProps, 'aria-required' | 'aria-invalid' | 'aria-describedby'> = {}
-): HTMLButtonElement {
-  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
-  container = document.createElement('div')
-  document.body.appendChild(container)
-  root = createRoot(container)
-  act(() =>
-    root?.render(
-      <ChipDropdown
-        value='workflow'
-        options={[{ value: 'workflow', label: 'Workflow' }]}
-        fullWidth={fullWidth}
-        aria-label='Principal type'
-        {...aria}
-      />
-    )
-  )
-
-  const trigger = container.querySelector<HTMLButtonElement>('button')
-  if (!trigger) throw new Error('ChipDropdown did not render a trigger')
-  return trigger
-}
-
-afterEach(() => {
-  if (root) act(() => root?.unmount())
-  container?.remove()
-  root = null
-  container = null
-})
-
-describe('ChipDropdown', () => {
-  it('fills its container when fullWidth is enabled', () => {
-    expect(mount(true).className).toContain('w-full')
-  })
-
-  it('keeps its intrinsic width by default', () => {
-    expect(mount(false).className).not.toContain('w-full')
-  })
-
-  it('renders its text trigger through the fade-only overflow primitive', () => {
-    const label = mount(true).querySelector<HTMLElement>('[data-overflow-text]')
-
-    expect(label?.textContent).toBe('Workflow')
-    expect(label?.className).toContain('text-clip')
-    expect(label?.className).not.toContain('truncate')
-  })
-
-  it.each([true, 'true'] as const)(
-    'announces %s field states alongside the supplied error description',
-    (state) => {
-      const trigger = mount(true, {
-        'aria-required': state,
-        'aria-invalid': state,
-        'aria-describedby': 'field-error',
-      })
-      const error = document.createElement('p')
-      error.id = 'field-error'
-      error.textContent = 'Choose an available principal.'
-      container?.appendChild(error)
-
-      const description = trigger
-        .getAttribute('aria-describedby')!
-        .split(/\s+/)
-        .map((id) => document.getElementById(id)?.textContent)
-        .join(' ')
-
-      expect(description).toBe('Choose an available principal. Required. Invalid selection.')
-      expect(trigger.getAttribute('aria-haspopup')).toBe('menu')
-      expect(trigger.hasAttribute('aria-required')).toBe(false)
-      expect(trigger.hasAttribute('aria-invalid')).toBe(false)
-      expect(trigger.textContent).toBe('Workflow')
-    }
-  )
-
-  it.each([false, 'false'] as const)(
-    'keeps the original description when field states are %s',
-    (state) => {
-      const trigger = mount(true, {
-        'aria-required': state,
-        'aria-invalid': state,
-        'aria-describedby': 'field-hint',
-      })
-
-      expect(trigger.getAttribute('aria-describedby')).toBe('field-hint')
-      expect(container?.textContent).toBe('Workflow')
-    }
-  )
-})
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
deleted file mode 100644
index 65b9a922b68..00000000000
--- a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
+++ /dev/null
@@ -1,407 +0,0 @@
-'use client'
-
-import {
-  type AriaAttributes,
-  type ComponentType,
-  forwardRef,
-  type ReactNode,
-  useContext,
-  useId,
-  useMemo,
-  useState,
-} from 'react'
-import type { VariantProps } from 'class-variance-authority'
-import { Check, ChevronDown } from '../../icons'
-import { cn } from '../../lib/cn'
-import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
-import { chipIconSlotClass } from '../chip/chip-chrome'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemLabel,
-  DropdownMenuSearchInput,
-  DropdownMenuTrigger,
-} from '../dropdown-menu/dropdown-menu'
-import { InsideModalContext } from '../modal/modal'
-import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
-
-type ChipIcon = ComponentType<{ className?: string }>
-
-/**
- * Single option rendered inside a {@link ChipDropdown}.
- */
-interface ChipDropdownOption {
-  /** Stable identifier returned via `onChange`. */
-  value: string
-  /** Visual label rendered both inside the trigger (when selected) and in the menu. */
-  label: ReactNode
-  /**
-   * Optional leading icon rendered inside the menu item. Auto-sized to
-   * `size-[14px]` and tinted with `--text-icon` via the item's base classes
-   * (see {@link dropdownMenuRowClass}).
-   */
-  icon?: ChipIcon
-  /** Pre-rendered leading element (e.g. an avatar) — takes precedence over `icon`. */
-  iconElement?: ReactNode
-}
-
-/**
- * Trigger + menu chrome props shared by both selection modes.
- */
-interface ChipDropdownBaseProps extends VariantProps<typeof chipVariants> {
-  /** Options to render in the menu. */
-  options: ReadonlyArray<ChipDropdownOption>
-  /** Shown in the trigger when nothing is selected. */
-  placeholder?: string
-  /** Aligns the dropdown popover relative to the trigger. */
-  align?: 'start' | 'center' | 'end'
-  /**
-   * Whether the menu width should match the trigger's. When `true` (default),
-   * the menu pins to `--radix-dropdown-menu-trigger-width`. Set `false` to let
-   * the menu size to its widest item (avoids truncating long option labels on
-   * narrow triggers). For anything finer-grained, pass `contentClassName`.
-   */
-  matchTriggerWidth?: boolean
-  /**
-   * Forwarded to the inner `DropdownMenuContent`. Use this as the shadcn-style
-   * escape hatch when neither `matchTriggerWidth` value fits (e.g. a fixed
-   * pixel width, a different `max-width`, a wider `min-width` floor than the
-   * `min-w-[8rem]` baked into `DropdownMenuContent`).
-   */
-  contentClassName?: string
-  /** Disables the trigger. */
-  disabled?: boolean
-  /** Optional icon rendered before the label (mirrors `Chip`'s `leftIcon`). */
-  leftIcon?: ChipIcon
-  /** Forwarded class for the trigger button. */
-  className?: string
-  /**
-   * Accessible name for the trigger. Use when the visible label sits outside
-   * the component (a field label above it) rather than in the selected value.
-   */
-  'aria-label'?: string
-  /**
-   * Ids of the elements naming the trigger. Because `aria-labelledby` REPLACES
-   * the name derived from the trigger's contents, include the trigger's own id
-   * alongside the external label's — `\`${labelId} ${triggerId}\`` — or the
-   * selected value is dropped from the accessible name.
-   */
-  'aria-labelledby'?: string
-  /** Required state announced through the menu button's accessible description. */
-  'aria-required'?: AriaAttributes['aria-required']
-  /** Validation state announced through the menu button's accessible description. */
-  'aria-invalid'?: AriaAttributes['aria-invalid']
-  /** Hint and error descriptions supplied by the enclosing field. */
-  'aria-describedby'?: AriaAttributes['aria-describedby']
-  /** Id for the trigger button. Needed to reference it from `aria-labelledby`. */
-  id?: string
-}
-
-/**
- * Single-select props (the default). Picking an option closes the menu and
- * reports the new value via `onChange`.
- */
-interface ChipDropdownSingleProps extends ChipDropdownBaseProps {
-  multiple?: false
-  /** Currently selected value. */
-  value?: string
-  /** Called when the user picks a different option from the menu. */
-  onChange?: (value: string) => void
-  /**
-   * Whether to render a trailing check icon on the currently selected item
-   * (default `true`). When `false`, items render without the check affordance.
-   */
-  showSelectedCheck?: boolean
-}
-
-/**
- * Multi-select props. The menu stays open across toggles; each active option is
- * marked with a trailing check, and `onChange` reports the next selected set.
- */
-interface ChipDropdownMultiProps extends ChipDropdownBaseProps {
-  multiple: true
-  /** Currently selected values. Empty array reads as "all" / no filter. */
-  value?: string[]
-  /** Called with the next selected values when an option is toggled. */
-  onChange?: (values: string[]) => void
-  /** Label shown in the trigger and as the reset row when nothing is selected. */
-  allLabel?: string
-  /**
-   * Whether to render the leading "all" reset row inside the menu. Defaults to
-   * `true` for filter-style use (empty selection reads as "all"). Set `false`
-   * for selection-style pickers where an empty list is a real "nothing
-   * selected" state rather than an "all" shortcut.
-   */
-  showAllOption?: boolean
-  /** Renders a search field at the top of the menu that filters options by label. */
-  searchable?: boolean
-  /** Placeholder for the search field. */
-  searchPlaceholder?: string
-}
-
-type ChipDropdownProps = ChipDropdownSingleProps | ChipDropdownMultiProps
-
-/**
- * Dropdown counterpart to {@link Chip} — a 30px pill that opens a menu of
- * options. In single mode (the default) it reports the picked value; in
- * `multiple` mode it toggles values, keeps the menu open across selections,
- * and optionally renders an "all" reset row and a search field.
- *
- * The trigger reuses `chipVariants` for visual parity with `Chip`. The label
- * is `flex-1`, so the trailing chevron is pushed flush right. The chevron is
- * owned by the component and rendered at `size-[14px]` (matching the
- * workspace-header chevron) — there is intentionally no `rightIcon` prop. The
- * trigger and menu shell are identical across modes; only the selection
- * semantics (label, item handlers, open state, search) branch on `multiple`.
- *
- * @example
- * // Single-select
- * <ChipDropdown
- *   value={member.role}
- *   onChange={(role) => updateRole(role)}
- *   options={ROLE_OPTIONS}
- *   placeholder='Select role'
- * />
- *
- * @example
- * // Multi-select
- * <ChipDropdown
- *   multiple
- *   value={ownerFilter}
- *   onChange={setOwnerFilter}
- *   options={memberOptions}
- *   allLabel='All'
- *   searchable
- *   searchPlaceholder='Search members...'
- *   fullWidth
- * />
- */
-const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
-  function ChipDropdown(props, ref) {
-    const {
-      options,
-      placeholder,
-      align = 'end',
-      matchTriggerWidth = true,
-      contentClassName,
-      disabled,
-      leftIcon: LeftIcon,
-      className,
-      variant = 'filled',
-      shape,
-      active,
-      fullWidth,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-required': ariaRequired,
-      'aria-invalid': ariaInvalid,
-      'aria-describedby': ariaDescribedBy,
-      id,
-    } = props
-
-    const fieldStateId = useId()
-    const fieldState = [
-      (ariaRequired === true || ariaRequired === 'true') && 'Required.',
-      ariaInvalid && ariaInvalid !== 'false' && 'Invalid selection.',
-    ]
-      .filter(Boolean)
-      .join(' ')
-    const describedBy = [ariaDescribedBy, fieldState && fieldStateId].filter(Boolean).join(' ')
-
-    const isMultiple = props.multiple === true
-    const selectedValues = useMemo<string[]>(
-      () => (isMultiple ? (props.value ?? []) : props.value != null ? [props.value] : []),
-      [isMultiple, props.value]
-    )
-
-    /**
-     * Inside a modal dialog the menu must be modal too: a non-modal menu
-     * portaled to `body` inherits the dialog's `pointer-events: none` body
-     * lock and outside-scroll lock (unclickable, unscrollable), and the
-     * dialog's still-active focus trap fights item focus. Outside dialogs we
-     * stay non-modal so filter chips don't lock page scroll while open.
-     */
-    const insideModal = useContext(InsideModalContext)
-
-    const [open, setOpen] = useState(false)
-    const [search, setSearch] = useState('')
-    const searchable = isMultiple && props.searchable === true
-    const searchPlaceholder = isMultiple ? (props.searchPlaceholder ?? 'Search...') : 'Search...'
-    const allLabel = isMultiple ? (props.allLabel ?? 'All') : ''
-    const showAllOption = isMultiple ? props.showAllOption !== false : false
-    const showSelectedCheck = isMultiple || props.showSelectedCheck !== false
-
-    const filteredOptions = useMemo(() => {
-      const query = search.trim().toLowerCase()
-      if (!searchable || !query) return options
-      return options.filter(
-        (option) => typeof option.label === 'string' && option.label.toLowerCase().includes(query)
-      )
-    }, [options, searchable, search])
-
-    const isInverse = variant === 'primary' || variant === 'destructive'
-    const hasTriggerBorder = variant !== 'primary' && variant !== 'destructive'
-
-    let displayLabel: ReactNode
-    if (isMultiple) {
-      displayLabel =
-        selectedValues.length === 0
-          ? allLabel
-          : selectedValues.length === 1
-            ? (options.find((option) => option.value === selectedValues[0])?.label ?? allLabel)
-            : `${selectedValues.length} selected`
-    } else {
-      const selected = options.find((option) => option.value === selectedValues[0])
-      displayLabel = selected?.label ?? placeholder ?? 'Select...'
-    }
-    const isPlaceholder = !isMultiple && selectedValues.length === 0
-
-    const iconClass = cn('size-[16px] shrink-0', !isInverse && 'text-[var(--text-icon)]')
-    /**
-     * The chevron glyph stays at its conventional subtle size, but is rendered
-     * inside a `size-[16px]` slot so its bounding box matches `leftIcon`'s. The
-     * chip's `gap-2` then produces visually equal spacing on both sides of the
-     * label — without this, the smaller glyph's bounding box would let the
-     * chevron read as glued to the text relative to the leading icon.
-     */
-    const chevronSlotClass = cn(chipIconSlotClass, !isInverse && 'text-[var(--text-icon)]')
-    /**
-     * `flex-1` is always applied so the chevron is pushed flush against the
-     * trailing edge whenever the trigger gets stretched — by `fullWidth`, by a
-     * flex parent with `grow`, or by a CSS grid cell with a fixed track.
-     * On intrinsic-width triggers (`inline-flex` with no parent constraint) the
-     * container is sized to max-content, so `grow` has no leftover space to
-     * consume and the layout collapses to the natural `gap-2` between items.
-     */
-    const labelClass = cn('flex-1 text-sm', !isInverse && 'text-[var(--text-body)]')
-
-    const triggerLabelClass = cn(
-      labelClass,
-      isPlaceholder && !isInverse && 'text-[var(--text-muted)]'
-    )
-    const renderLabel = (label: ReactNode) => {
-      const textLabel =
-        typeof label === 'string' || typeof label === 'number' ? String(label) : null
-      return textLabel == null ? (
-        <span className={cn(overflowTextClipClass, triggerLabelClass)}>{label}</span>
-      ) : (
-        <OverflowText
-          label={textLabel}
-          className={triggerLabelClass}
-          focusTarget='nearest-interactive'
-        />
-      )
-    }
-
-    const renderItem = (option: ChipDropdownOption) => {
-      const isSelected = selectedValues.includes(option.value)
-      const OptionIcon = option.icon
-      return (
-        <DropdownMenuItem
-          key={option.value}
-          onSelect={(event) => {
-            if (isMultiple) {
-              event.preventDefault()
-              props.onChange?.(
-                isSelected
-                  ? selectedValues.filter((v) => v !== option.value)
-                  : [...selectedValues, option.value]
-              )
-            } else {
-              props.onChange?.(option.value)
-            }
-          }}
-        >
-          {option.iconElement ?? (OptionIcon ? <OptionIcon /> : null)}
-          {typeof option.label === 'string' || typeof option.label === 'number' ? (
-            <DropdownMenuItemLabel label={String(option.label)} />
-          ) : (
-            <span className={cn(overflowTextClipClass, 'flex-1')}>{option.label}</span>
-          )}
-          {showSelectedCheck && isSelected ? <Check className='ml-auto! size-[16px]!' /> : null}
-        </DropdownMenuItem>
-      )
-    }
-
-    return (
-      <DropdownMenu
-        modal={insideModal}
-        {...(isMultiple
-          ? {
-              open,
-              onOpenChange: (next: boolean) => {
-                setOpen(next)
-                if (!next) setSearch('')
-              },
-            }
-          : {})}
-      >
-        <DropdownMenuTrigger asChild disabled={disabled}>
-          <button
-            ref={ref}
-            id={id}
-            type='button'
-            disabled={disabled}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledBy}
-            aria-describedby={describedBy || undefined}
-            className={cn(
-              chipVariants({ variant, shape, active, fullWidth }),
-              hasTriggerBorder && TRIGGER_BORDER_CLASS,
-              className
-            )}
-          >
-            {LeftIcon ? <LeftIcon className={iconClass} /> : null}
-            {renderLabel(displayLabel)}
-            <span aria-hidden className={chevronSlotClass}>
-              <ChevronDown className='size-[14px]' />
-            </span>
-          </button>
-        </DropdownMenuTrigger>
-        {fieldState && (
-          <span id={fieldStateId} className='sr-only'>
-            {fieldState}
-          </span>
-        )}
-        <DropdownMenuContent
-          align={align}
-          onOpenAutoFocus={searchable ? (event) => event.preventDefault() : undefined}
-          className={cn(
-            matchTriggerWidth && 'w-[var(--radix-dropdown-menu-trigger-width)] max-w-none',
-            insideModal && 'max-h-[min(240px,var(--radix-popper-available-height,240px))]',
-            contentClassName
-          )}
-        >
-          {searchable && (
-            <DropdownMenuSearchInput
-              placeholder={searchPlaceholder}
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') setOpen(false)
-              }}
-            />
-          )}
-          {showAllOption && (
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault()
-                if (isMultiple) props.onChange?.([])
-              }}
-            >
-              <DropdownMenuItemLabel label={allLabel} />
-              {selectedValues.length === 0 ? <Check className='ml-auto! size-[16px]!' /> : null}
-            </DropdownMenuItem>
-          )}
-          {filteredOptions.map(renderItem)}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    )
-  }
-)
-
-ChipDropdown.displayName = 'ChipDropdown'
-
-export { ChipDropdown }
-export type { ChipDropdownOption, ChipDropdownProps }
diff --git a/packages/emcn/src/components/chip-input/chip-input.test.tsx b/packages/emcn/src/components/chip-input/chip-input.test.tsx
index d3fc1d0223a..acbc4226246 100644
--- a/packages/emcn/src/components/chip-input/chip-input.test.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.test.tsx
@@ -1,20 +1,21 @@
 /**
  * @vitest-environment jsdom
  */
-import { act } from 'react'
+import { act, createRef, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ChipTextarea } from '../chip-textarea/chip-textarea'
 import { ChipInput } from './chip-input'
 
 let root: Root | null = null
 let container: HTMLDivElement | null = null
 
-function mount(): HTMLInputElement {
+function mount(node: ReactNode = <ChipInput aria-label='Search' />): HTMLInputElement {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   container = document.createElement('div')
   document.body.appendChild(container)
   root = createRoot(container)
-  act(() => root?.render(<ChipInput aria-label='Search' />))
+  act(() => root?.render(node))
 
   const input = container.querySelector<HTMLInputElement>('input')
   if (!input) throw new Error('ChipInput did not render an input')
@@ -57,3 +58,52 @@ describe('ChipInput', () => {
     expect(input.className).toContain('indent-1')
   })
 })
+
+describe('chip form controls', () => {
+  it('forwards native field refs, labels, validation and form submission without losing height constraints', () => {
+    const inputRef = createRef<HTMLInputElement>()
+    const textareaRef = createRef<HTMLTextAreaElement>()
+    const submit = vi.fn((event) => event.preventDefault())
+    const input = mount(
+      <form onSubmit={submit}>
+        <label htmlFor='email'>Work email</label>
+        <ChipInput
+          ref={inputRef}
+          id='email'
+          name='email'
+          type='email'
+          required
+          error
+          aria-invalid
+          aria-describedby='error'
+          className='h-[34px]'
+        />
+        <p id='error'>Enter a work email</p>
+        <ChipTextarea
+          ref={textareaRef}
+          name='description'
+          rows={3}
+          className='min-h-[80px]'
+          defaultValue='Description'
+        />
+        <button type='submit'>Continue</button>
+      </form>
+    )
+    expect(inputRef.current).toBe(input)
+    expect(input.labels?.[0].textContent).toBe('Work email')
+    expect(input.getAttribute('aria-describedby')).toBe('error')
+    expect(input.getAttribute('aria-invalid')).toBe('true')
+    expect(input.parentElement?.className).toContain('h-[34px]')
+    expect(input.parentElement?.className).toContain('border-[var(--text-error)]')
+    expect(textareaRef.current?.rows).toBe(3)
+    expect(textareaRef.current?.className).toContain('min-h-[80px]')
+    act(() => container?.querySelector('button')?.click())
+    expect(submit).not.toHaveBeenCalled()
+    input.value = 'review@example.com'
+    act(() => container?.querySelector('button')?.click())
+    expect(submit).toHaveBeenCalledOnce()
+    const data = new FormData(container!.querySelector('form')!)
+    expect(data.get('email')).toBe('review@example.com')
+    expect(data.get('description')).toBe('Description')
+  })
+})
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index fe0f428bbfa..e7d07245b2b 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -45,9 +45,9 @@ import { Button } from '../button/button'
 import { Chip, type ChipProps } from '../chip/chip'
 import { chipContentIconClass, chipContentLabelClass } from '../chip/chip-chrome'
 import { ChipCopyInput } from '../chip-copy-input/chip-copy-input'
-import { ChipDropdown, type ChipDropdownOption } from '../chip-dropdown/chip-dropdown'
 import { ChipEmailsInput, type ChipEmailsInputProps } from '../chip-emails-input/chip-emails-input'
 import { ChipInput } from '../chip-input/chip-input'
+import { ChipSelect, type ChipSelectOption } from '../chip-select/chip-select'
 import { ChipSwitch } from '../chip-switch/chip-switch'
 import { ChipTextarea } from '../chip-textarea/chip-textarea'
 import { Label } from '../label/label'
@@ -515,10 +515,10 @@ ChipModalPromptBody.displayName = 'ChipModalPromptBody'
 
 /**
  * Option entry for the `dropdown` branch of {@link ChipModalField}. Aliases the
- * canonical {@link ChipDropdownOption} so the modal dropdown stays in lockstep
- * with `ChipDropdown` (gains the optional leading `icon`).
+ * canonical {@link ChipSelectOption} so the modal dropdown stays in lockstep
+ * with `ChipSelect` (gains the optional leading `icon`).
  */
-export type ChipModalDropdownOption = ChipDropdownOption
+export type ChipModalDropdownOption = ChipSelectOption
 
 /**
  * Props shared by every {@link ChipModalField} branch.
@@ -915,7 +915,10 @@ function renderChipModalControl(
       )
     case 'dropdown':
       return (
-        <ChipDropdown
+        <ChipSelect
+          showSelectedCheck
+          dropdownWidth='trigger'
+          modal={false}
           value={props.value}
           onChange={props.onChange}
           options={props.options}
@@ -1229,7 +1232,7 @@ export type ChipModalFooterAction = ChipModalFooterActionBase &
 /**
  * Escape hatch for the left-docked footer cluster: renders the given node in
  * place of a declarative action Chip. Reserve it for chip-chrome controls
- * (`ChipDatePicker`, `ChipTimePicker`, `ChipDropdown`, ...) so the footer
+ * (`ChipDatePicker`, `ChipTimePicker`, `ChipSelect`, ...) so the footer
  * stays visually canonical — the cluster's `gap-2` alone sets the rhythm, as
  * it does for the footer's own Chips, so the control must carry no outer
  * margin. The primary action stays declarative by design; only
diff --git a/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx b/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx
index c150a8c050e..73dd0eb4c87 100644
--- a/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx
+++ b/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx
@@ -1,60 +1,305 @@
 /**
  * @vitest-environment jsdom
  */
-
-import { act } from 'react'
+import { act, createRef, type ReactNode, useState } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, describe, expect, it } from 'vitest'
-import { ChipSelect } from './chip-select'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ChipModal } from '../chip-modal/chip-modal'
+import { ChipSelect, type ChipSelectProps } from './chip-select'
 
 let root: Root | null = null
 let container: HTMLDivElement | null = null
 
-function mount(): HTMLButtonElement {
-  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+function mountNode(node: ReactNode): HTMLButtonElement {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
   container = document.createElement('div')
   document.body.appendChild(container)
   root = createRoot(container)
-  act(() =>
-    root?.render(
-      <ChipSelect
-        options={[{ value: 'workflow-1', label: 'Workflow 1' }]}
-        value=''
-        aria-label='Workflow'
-        aria-required
-        aria-invalid
-        aria-describedby='workflow-error'
-      />
-    )
-  )
-
-  const trigger = container.querySelector<HTMLButtonElement>('button')
+  act(() => root?.render(node))
+  const trigger = document.querySelector<HTMLButtonElement>('button[aria-haspopup="menu"]')
   if (!trigger) throw new Error('ChipSelect did not render a trigger')
   return trigger
 }
 
+function mount(
+  fullWidth: boolean,
+  aria: Pick<ChipSelectProps, 'aria-required' | 'aria-invalid' | 'aria-describedby'> = {}
+) {
+  return mountNode(
+    <ChipSelect
+      value='workflow'
+      options={[{ value: 'workflow', label: 'Workflow' }]}
+      fullWidth={fullWidth}
+      aria-label='Principal type'
+      {...aria}
+    />
+  )
+}
+
+async function settle() {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(10)
+  })
+}
+
+async function key(node: Element, key: string) {
+  act(() => {
+    node.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+  })
+  await settle()
+}
+
+function menuItem(label: string, role = 'menuitem') {
+  const item = [...document.querySelectorAll<HTMLElement>(`[role="${role}"]`)].find(
+    (item) => item.textContent === label
+  )
+  if (!item) throw new Error(`Missing menu item ${label}`)
+  return item
+}
+
+function changeSearch(value: string) {
+  const input = document.querySelector('input')!
+  act(() => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, value)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
 afterEach(() => {
   if (root) act(() => root?.unmount())
   container?.remove()
   root = null
   container = null
+  document.body.removeAttribute('style')
+  vi.useRealTimers()
 })
 
 describe('ChipSelect', () => {
-  it('forwards field accessibility attributes to its trigger', () => {
-    const trigger = mount()
+  it('fills its container when fullWidth is enabled', () => {
+    expect(mount(true).className).toContain('w-full')
+  })
 
-    expect(trigger.getAttribute('aria-label')).toBe('Workflow')
-    expect(trigger.getAttribute('aria-required')).toBe('true')
-    expect(trigger.getAttribute('aria-invalid')).toBe('true')
-    expect(trigger.getAttribute('aria-describedby')).toBe('workflow-error')
+  it('keeps its intrinsic width by default', () => {
+    expect(mount(false).className).not.toContain('w-full')
   })
 
   it('renders its text trigger through the fade-only overflow primitive', () => {
-    const label = mount().querySelector<HTMLElement>('[data-overflow-text]')
+    const label = mount(true).querySelector<HTMLElement>('[data-overflow-text]')
 
-    expect(label?.textContent).toBe('Select...')
+    expect(label?.textContent).toBe('Workflow')
     expect(label?.className).toContain('text-clip')
     expect(label?.className).not.toContain('truncate')
   })
+
+  it.each([true, 'true'] as const)(
+    'announces %s field states alongside the supplied error description',
+    (state) => {
+      const trigger = mount(true, {
+        'aria-required': state,
+        'aria-invalid': state,
+        'aria-describedby': 'field-error',
+      })
+      const error = document.createElement('p')
+      error.id = 'field-error'
+      error.textContent = 'Choose an available principal.'
+      container?.appendChild(error)
+
+      const description = trigger
+        .getAttribute('aria-describedby')!
+        .split(/\s+/)
+        .map((id) => document.getElementById(id)?.textContent)
+        .join(' ')
+
+      expect(description).toBe('Choose an available principal. Required. Invalid selection.')
+      expect(trigger.getAttribute('aria-haspopup')).toBe('menu')
+      expect(trigger.hasAttribute('aria-required')).toBe(false)
+      expect(trigger.hasAttribute('aria-invalid')).toBe(false)
+      expect(trigger.textContent).toBe('Workflow')
+    }
+  )
+
+  it.each([false, 'false'] as const)(
+    'keeps the original description when field states are %s',
+    (state) => {
+      const trigger = mount(true, {
+        'aria-required': state,
+        'aria-invalid': state,
+        'aria-describedby': 'field-hint',
+      })
+
+      expect(trigger.getAttribute('aria-describedby')).toBe('field-hint')
+      expect(container?.textContent).toBe('Workflow')
+    }
+  )
+})
+
+describe('ChipSelect menu interactions', () => {
+  it.each([true, false])(
+    'selects by keyboard, skips disabled rows and restores focus (modal=%s)',
+    async (modal) => {
+      vi.useFakeTimers()
+      const onChange = vi.fn()
+      const trigger = mountNode(
+        <ChipSelect
+          modal={modal}
+          onChange={onChange}
+          options={[
+            { value: 'a', label: 'Alpha' },
+            { value: 'b', label: 'Beta', disabled: true },
+            { value: 'c', label: 'Gamma' },
+          ]}
+        />
+      )
+      await key(trigger, 'ArrowDown')
+      expect(document.activeElement).toBe(menuItem('Alpha'))
+      await key(document.activeElement!, 'ArrowDown')
+      expect(document.activeElement).toBe(menuItem('Gamma'))
+      await key(document.activeElement!, 'Enter')
+      expect(onChange).toHaveBeenCalledExactlyOnceWith('c')
+      expect(document.querySelector('[role="menu"]')).toBeNull()
+      expect(document.activeElement).toBe(trigger)
+    }
+  )
+
+  it('keeps multiple selection open and clears to the explicit all/empty state', async () => {
+    vi.useFakeTimers()
+    const onChange = vi.fn()
+    function Picker() {
+      const [values, setValues] = useState<string[]>([])
+      return (
+        <ChipSelect
+          multiSelect
+          multiSelectValues={values}
+          onMultiSelectChange={(next) => {
+            setValues(next)
+            onChange(next)
+          }}
+          showAllOption
+          allOptionLabel='All owners'
+          options={[
+            { value: 'a', label: 'Alpha' },
+            { value: 'b', label: 'Beta', disabled: true },
+          ]}
+        />
+      )
+    }
+    const trigger = mountNode(<Picker />)
+    expect(trigger.textContent).toBe('All owners')
+    await key(trigger, 'ArrowDown')
+    act(() => menuItem('Beta', 'menuitemcheckbox').click())
+    expect(onChange).not.toHaveBeenCalled()
+    act(() => menuItem('Alpha', 'menuitemcheckbox').click())
+    await settle()
+    expect(onChange).toHaveBeenLastCalledWith(['a'])
+    expect(trigger.textContent).toBe('Alpha')
+    expect(menuItem('Alpha', 'menuitemcheckbox').getAttribute('aria-checked')).toBe('true')
+    act(() => menuItem('All owners', 'menuitemcheckbox').click())
+    expect(onChange).toHaveBeenLastCalledWith([])
+    expect(trigger.textContent).toBe('All owners')
+    expect(document.querySelector('[role="menu"]')).not.toBeNull()
+  })
+
+  it('searches grouped rich labels using aliases, clears search on Escape and restores the trigger', async () => {
+    vi.useFakeTimers()
+    const trigger = mountNode(
+      <ChipSelect
+        searchable
+        groups={[
+          {
+            section: 'Cloud',
+            items: [
+              {
+                value: 'gcp',
+                label: <strong>Google Cloud</strong>,
+                searchTerms: ['Google Cloud', 'gcloud'],
+              },
+            ],
+          },
+          { section: 'Source', items: [{ value: 'gh', label: 'GitHub' }] },
+        ]}
+      />
+    )
+    await key(trigger, 'ArrowDown')
+    changeSearch('cloud')
+    expect(menuItem('Google Cloud').querySelector('strong')).not.toBeNull()
+    changeSearch('gcloud')
+    expect(menuItem('Google Cloud').querySelector('strong')).not.toBeNull()
+    expect(document.querySelector('[role="menu"]')?.textContent).not.toContain('Source')
+    changeSearch('missing')
+    expect(document.querySelector('[role="menu"]')?.textContent).toContain('No results')
+    await key(document.querySelector('input')!, 'Escape')
+    expect(document.querySelector('[role="menu"]')).toBeNull()
+    expect(document.activeElement).toBe(trigger)
+    await key(trigger, 'ArrowDown')
+    expect(document.querySelector('input')?.value).toBe('')
+    expect(menuItem('GitHub')).toBeTruthy()
+  })
+
+  it('preserves rich labels, trigger refs, selected checks and explicit menu width', async () => {
+    vi.useFakeTimers()
+    const ref = createRef<HTMLButtonElement>()
+    const trigger = mountNode(
+      <ChipSelect
+        ref={ref}
+        id='status'
+        aria-labelledby='status'
+        showSelectedCheck
+        dropdownWidth={280}
+        value=''
+        options={[
+          {
+            value: '',
+            label: <span>None</span>,
+            searchTerms: ['None'],
+            iconElement: <span data-testid='avatar' />,
+          },
+        ]}
+      />
+    )
+    expect(ref.current).toBe(trigger)
+    expect(trigger.textContent).toBe('None')
+    expect(trigger.getAttribute('aria-labelledby')).toBe('status')
+    await key(trigger, 'ArrowDown')
+    expect(document.querySelector('[role="menu"]')?.getAttribute('style')).toContain('width: 280px')
+    expect(menuItem('None').querySelector('[data-testid="avatar"]')).not.toBeNull()
+    expect(menuItem('None').querySelector('svg')).not.toBeNull()
+  })
+
+  it('keeps an empty selection distinct from All when no reset row is offered', async () => {
+    vi.useFakeTimers()
+    const trigger = mountNode(
+      <ChipSelect
+        multiSelect
+        multiSelectValues={[]}
+        placeholder='Select workspaces'
+        options={[{ value: 'a', label: 'Alpha' }]}
+      />
+    )
+    expect(trigger.textContent).toBe('Select workspaces')
+    await key(trigger, 'ArrowDown')
+    expect(document.querySelectorAll('[role="menuitemcheckbox"]')).toHaveLength(1)
+  })
+
+  it('closes only the menu with Escape inside a modal and restores the nested trigger', async () => {
+    vi.useFakeTimers()
+    const dismiss = vi.fn()
+    mountNode(
+      <ChipModal open onOpenChange={dismiss} srTitle='Settings'>
+        <ChipSelect
+          modal={false}
+          searchable
+          placeholder='Access'
+          options={[{ value: 'a', label: 'Alpha' }]}
+        />
+      </ChipModal>
+    )
+    await settle()
+    const trigger = document.querySelector<HTMLButtonElement>('button[aria-haspopup="menu"]')!
+    await key(trigger, 'ArrowDown')
+    await key(document.querySelector('input')!, 'Escape')
+    expect(document.querySelector('[role="menu"]')).toBeNull()
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull()
+    expect(document.activeElement).toBe(trigger)
+    expect(dismiss).not.toHaveBeenCalled()
+  })
 })
diff --git a/packages/emcn/src/components/chip-select/chip-select.test.ts b/packages/emcn/src/components/chip-select/chip-select.test.ts
index a8f603b15c3..6571a004bcb 100644
--- a/packages/emcn/src/components/chip-select/chip-select.test.ts
+++ b/packages/emcn/src/components/chip-select/chip-select.test.ts
@@ -1,4 +1,5 @@
-import { describe, expect, it } from 'vitest'
+import type { ReactElement } from 'react'
+import { describe, expect, expectTypeOf, it } from 'vitest'
 import { type ChipSelectOption, chipSelectOptionMatchesSearch } from './chip-select'
 
 const GOOGLE_CLOUD_OPTION: ChipSelectOption = {
@@ -8,6 +9,20 @@ const GOOGLE_CLOUD_OPTION: ChipSelectOption = {
 }
 
 describe('chipSelectOptionMatchesSearch', () => {
+  it('requires search text for rich labels', () => {
+    expectTypeOf<{ label: ReactElement; value: string }>().not.toExtend<ChipSelectOption>()
+    expectTypeOf<{
+      label: ReactElement
+      value: string
+      searchTerms: readonly []
+    }>().not.toExtend<ChipSelectOption>()
+    expectTypeOf<{
+      label: ReactElement
+      value: string
+      searchTerms: readonly [string]
+    }>().toExtend<ChipSelectOption>()
+  })
+
   it('matches labels with normalized casing and whitespace', () => {
     expect(chipSelectOptionMatchesSearch(GOOGLE_CLOUD_OPTION, '  CLOUD  ')).toBe(true)
   })
diff --git a/packages/emcn/src/components/chip-select/chip-select.tsx b/packages/emcn/src/components/chip-select/chip-select.tsx
index 739960e7c5f..69ee84e1959 100644
--- a/packages/emcn/src/components/chip-select/chip-select.tsx
+++ b/packages/emcn/src/components/chip-select/chip-select.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { ChevronDown } from '../../icons'
+import { Check, ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
 import { chipIconSlotClass } from '../chip/chip-chrome'
@@ -15,42 +15,45 @@ import {
   DropdownMenuSearchInput,
   DropdownMenuTrigger,
 } from '../dropdown-menu/dropdown-menu'
+import { InsideModalContext } from '../modal/modal'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
-/** A selectable option in a {@link ChipSelect}. */
-export interface ChipSelectOption {
-  label: string
+interface ChipSelectOptionBase {
   value: string
-  /** Additional search-only terms. These are never rendered in the option label. */
-  searchTerms?: readonly string[]
   /** Optional leading icon. */
   icon?: React.ComponentType<{ className?: string }>
+  /** Pre-rendered leading element, such as an avatar; takes precedence over `icon`. */
+  iconElement?: React.ReactNode
   /** Whether this option is non-selectable. */
   disabled?: boolean
 }
 
+/**
+ * A selectable option in a {@link ChipSelect}. Rich labels must supply their
+ * visible text in `searchTerms`, followed by any aliases, so they remain searchable.
+ * Search terms are never rendered. Plain text labels are matched automatically.
+ */
+export type ChipSelectOption = ChipSelectOptionBase &
+  (
+    | { label: string | number; searchTerms?: readonly string[] }
+    | {
+        label: React.ReactNode
+        searchTerms: readonly [string, ...string[]]
+      }
+  )
+
 /** A labeled group of options. When `groups` is set, `options` is ignored. */
 export interface ChipSelectOptionGroup {
   /** Optional section header rendered above the group. */
   section?: string
-  items: ChipSelectOption[]
+  items: readonly ChipSelectOption[]
 }
 
-export interface ChipSelectProps {
+interface ChipSelectBaseProps {
   /** Options in display order. Ignored when `groups` is provided. */
-  options?: ChipSelectOption[]
+  options?: readonly ChipSelectOption[]
   /** Grouped options with optional section headers. */
-  groups?: ChipSelectOptionGroup[]
-  /** Selected value (single-select mode). */
-  value?: string
-  /** Called with the next value when an option is chosen (single-select). */
-  onChange?: (value: string) => void
-  /** Enable multi-select: options render as checkbox rows and the menu stays open. */
-  multiSelect?: boolean
-  /** Selected values (multi-select mode). */
-  multiSelectValues?: string[]
-  /** Called with the next values when a checkbox toggles (multi-select). */
-  onMultiSelectChange?: (values: string[]) => void
+  groups?: readonly ChipSelectOptionGroup[]
   /** Trigger text when nothing is selected. */
   placeholder?: string
   /** Overrides the computed trigger label (e.g. a custom "N selected" string). */
@@ -72,9 +75,9 @@ export interface ChipSelectProps {
    * use inside form fields. Defaults to a content-width chip (toolbar filters).
    */
   fullWidth?: boolean
-  /** Menu width — 'trigger' matches the trigger, a number is px; defaults to a 160px min. */
-  dropdownWidth?: 'trigger' | number
-  /** Max height of the menu in px (defaults to the menu's 240px). */
+  /** Menu width: trigger width, intrinsic content width, or pixels; defaults to a 160px minimum. */
+  dropdownWidth?: 'trigger' | 'content' | number
+  /** Max menu height in pixels; modal menus are constrained to the available space. */
   maxHeight?: number
   /**
    * Keep the menu below its trigger and shrink it to the remaining viewport
@@ -86,6 +89,13 @@ export interface ChipSelectProps {
   className?: string
   /** Forwarded to the menu content. */
   contentClassName?: string
+  /** A filled form/filter control, or a primary action with a menu. */
+  variant?: 'filled' | 'primary'
+  /** Optional leading trigger icon. */
+  leftIcon?: React.ComponentType<{ className?: string }>
+  /** Trigger id, also usable in `aria-labelledby`. */
+  id?: string
+  'aria-labelledby'?: string
   /** Accessible label for the trigger. */
   'aria-label'?: string
   /** Marks the trigger as required. */
@@ -104,11 +114,36 @@ export interface ChipSelectProps {
   modal?: boolean
 }
 
+/** Single selection closes the menu and reports one value. */
+interface ChipSelectSingleProps extends ChipSelectBaseProps {
+  multiSelect?: false
+  value?: string
+  onChange?: (value: string) => void
+  multiSelectValues?: never
+  onMultiSelectChange?: never
+  /** Show a trailing check on the selected row. Defaults to false. */
+  showSelectedCheck?: boolean
+}
+
+/** Multiple selection uses checkbox rows and keeps the menu open. */
+interface ChipSelectMultiProps extends ChipSelectBaseProps {
+  multiSelect: true
+  multiSelectValues?: readonly string[]
+  onMultiSelectChange?: (values: string[]) => void
+  value?: never
+  onChange?: never
+  showSelectedCheck?: never
+}
+
+export type ChipSelectProps = ChipSelectSingleProps | ChipSelectMultiProps
+
 /** Matches an option label or one of its search-only aliases. */
 export function chipSelectOptionMatchesSearch(option: ChipSelectOption, query: string): boolean {
   const normalizedQuery = query.trim().toLowerCase()
   if (!normalizedQuery) return true
-  return [option.label, ...(option.searchTerms ?? [])].some((term) =>
+  const label =
+    typeof option.label === 'string' || typeof option.label === 'number' ? String(option.label) : ''
+  return [label, ...(option.searchTerms ?? [])].some((term) =>
     term.trim().toLowerCase().includes(normalizedQuery)
   )
 }
@@ -133,40 +168,65 @@ export function chipSelectOptionMatchesSearch(option: ChipSelectOption, query: s
  * />
  * ```
  */
-export function ChipSelect({
-  options,
-  groups,
-  value,
-  onChange,
-  multiSelect = false,
-  multiSelectValues,
-  onMultiSelectChange,
-  placeholder = 'Select...',
-  displayLabel,
-  disabled = false,
-  searchable = false,
-  searchPlaceholder = 'Search...',
-  showAllOption = false,
-  allOptionLabel = 'All',
-  align = 'end',
-  fullWidth = false,
-  dropdownWidth,
-  maxHeight,
-  stayBelow = false,
-  className,
-  contentClassName,
-  'aria-label': ariaLabel,
-  'aria-required': ariaRequired,
-  'aria-invalid': ariaInvalid,
-  'aria-describedby': ariaDescribedBy,
-  modal,
-}: ChipSelectProps) {
+export const ChipSelect = React.forwardRef<HTMLButtonElement, ChipSelectProps>(function ChipSelect(
+  {
+    options,
+    groups,
+    value,
+    onChange,
+    multiSelect = false,
+    multiSelectValues,
+    onMultiSelectChange,
+    placeholder = 'Select...',
+    displayLabel,
+    disabled = false,
+    searchable = false,
+    searchPlaceholder = 'Search...',
+    showAllOption = false,
+    allOptionLabel = 'All',
+    align = 'end',
+    fullWidth = false,
+    dropdownWidth,
+    maxHeight,
+    stayBelow = false,
+    className,
+    contentClassName,
+    variant = 'filled',
+    leftIcon: LeftIcon,
+    id,
+    showSelectedCheck = false,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-label': ariaLabel,
+    'aria-required': ariaRequired,
+    'aria-invalid': ariaInvalid,
+    'aria-describedby': ariaDescribedBy,
+    modal,
+  },
+  ref
+) {
+  const insideModal = React.useContext(InsideModalContext)
+  const fieldStateId = React.useId()
+  const [open, setOpen] = React.useState(false)
   const [query, setQuery] = React.useState('')
+  const fieldState = [
+    (ariaRequired === true || ariaRequired === 'true') && 'Required.',
+    ariaInvalid && ariaInvalid !== 'false' && 'Invalid selection.',
+  ]
+    .filter(Boolean)
+    .join(' ')
+  const describedBy = [ariaDescribedBy, fieldState && fieldStateId].filter(Boolean).join(' ')
+  const inverse = variant === 'primary'
+  const isPlaceholder = !multiSelect && value == null && displayLabel == null
+  const labelClass = cn(
+    'flex-1 text-sm',
+    !inverse && 'text-[var(--text-body)]',
+    isPlaceholder && !inverse && 'text-[var(--text-muted)]'
+  )
 
   const selectedValues = multiSelectValues ?? []
 
   /** Normalized sections — either the provided groups or a single anonymous group. */
-  const sections = React.useMemo<ChipSelectOptionGroup[]>(
+  const sections = React.useMemo<readonly ChipSelectOptionGroup[]>(
     () => groups ?? [{ items: options ?? [] }],
     [groups, options]
   )
@@ -181,7 +241,7 @@ export function ChipSelect({
       }
       return `${selectedValues.length} selected`
     }
-    if (value == null || value === '') return placeholder
+    if (value == null) return placeholder
     return allOptions.find((o) => o.value === value)?.label ?? placeholder
   }, [multiSelect, selectedValues, showAllOption, allOptionLabel, placeholder, value, allOptions])
 
@@ -211,10 +271,13 @@ export function ChipSelect({
   const contentStyle: React.CSSProperties = {}
   if (dropdownWidth === 'trigger') contentStyle.width = 'var(--radix-dropdown-menu-trigger-width)'
   else if (typeof dropdownWidth === 'number') contentStyle.width = dropdownWidth
-  if (dropdownWidth != null) contentStyle.maxWidth = 'none'
+  if (dropdownWidth === 'trigger' || typeof dropdownWidth === 'number')
+    contentStyle.maxWidth = 'none'
   if (stayBelow) {
     const preferredMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : '240px'
     contentStyle.maxHeight = `min(${preferredMaxHeight}, var(--radix-dropdown-menu-content-available-height))`
+  } else if (insideModal) {
+    contentStyle.maxHeight = `min(${maxHeight ?? 240}px, var(--radix-dropdown-menu-content-available-height))`
   } else if (typeof maxHeight === 'number') {
     contentStyle.maxHeight = maxHeight
   }
@@ -232,7 +295,8 @@ export function ChipSelect({
             toggleValue(opt.value)
           }}
         >
-          {Icon ? <Icon className='mr-2 size-[14px] text-[var(--text-icon)]' /> : null}
+          {opt.iconElement ??
+            (Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null)}
           {opt.label}
         </DropdownMenuCheckboxItem>
       )
@@ -243,8 +307,15 @@ export function ChipSelect({
         disabled={opt.disabled}
         onSelect={() => onChange?.(opt.value)}
       >
-        {Icon ? <Icon /> : null}
-        <DropdownMenuItemLabel label={opt.label} />
+        {opt.iconElement ?? (Icon ? <Icon /> : null)}
+        {typeof opt.label === 'string' || typeof opt.label === 'number' ? (
+          <DropdownMenuItemLabel label={String(opt.label)} />
+        ) : (
+          <span className={cn(overflowTextClipClass, 'flex-1')}>{opt.label}</span>
+        )}
+        {showSelectedCheck && value === opt.value ? (
+          <Check className='ml-auto! size-[16px]!' />
+        ) : null}
       </DropdownMenuItem>
     )
   }
@@ -252,54 +323,72 @@ export function ChipSelect({
   return (
     <DropdownMenu
       modal={modal}
-      onOpenChange={(open) => {
-        if (!open) setQuery('')
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen)
+        if (!nextOpen) setQuery('')
       }}
     >
       <DropdownMenuTrigger asChild>
         <button
+          ref={ref}
+          id={id}
           type='button'
           disabled={disabled}
           aria-label={ariaLabel}
-          aria-required={ariaRequired}
-          aria-invalid={ariaInvalid}
-          aria-describedby={ariaDescribedBy}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={describedBy || undefined}
           className={cn(
-            chipVariants({ variant: 'filled', fullWidth }),
-            TRIGGER_BORDER_CLASS,
+            chipVariants({ variant, fullWidth }),
+            !inverse && TRIGGER_BORDER_CLASS,
             fullWidth ? 'justify-between' : 'w-fit max-w-[240px]',
             className
           )}
         >
+          {LeftIcon ? (
+            <LeftIcon className={cn(chipIconSlotClass, !inverse && 'text-[var(--text-icon)]')} />
+          ) : null}
           {typeof visibleLabel === 'string' || typeof visibleLabel === 'number' ? (
             <OverflowText
               label={String(visibleLabel)}
-              className='flex-1 text-[var(--text-body)]'
+              className={labelClass}
               focusTarget='nearest-interactive'
             />
           ) : (
-            <span className={cn(overflowTextClipClass, 'flex-1 text-[var(--text-body)]')}>
-              {visibleLabel}
-            </span>
+            <span className={cn(overflowTextClipClass, labelClass)}>{visibleLabel}</span>
           )}
-          <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
+          <span
+            aria-hidden
+            className={cn(chipIconSlotClass, !inverse && 'text-[var(--text-icon)]')}
+          >
             <ChevronDown className='size-[14px]' />
           </span>
         </button>
       </DropdownMenuTrigger>
+      {fieldState ? (
+        <span id={fieldStateId} className='sr-only'>
+          {fieldState}
+        </span>
+      ) : null}
       <DropdownMenuContent
         align={align}
         side={stayBelow ? 'bottom' : undefined}
         avoidCollisions={stayBelow ? false : undefined}
         onOpenAutoFocus={searchable ? (e) => e.preventDefault() : undefined}
         style={contentStyle}
-        className={cn('min-w-[160px]', contentClassName)}
+        className={cn(
+          dropdownWidth !== 'trigger' && dropdownWidth !== 'content' && 'min-w-[160px]',
+          contentClassName
+        )}
       >
         {searchable ? (
           <DropdownMenuSearchInput
             placeholder={searchPlaceholder}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') setOpen(false)
+            }}
           />
         ) : null}
 
@@ -330,4 +419,6 @@ export function ChipSelect({
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+})
+
+ChipSelect.displayName = 'ChipSelect'
diff --git a/packages/emcn/src/components/chip-switch/chip-switch.tsx b/packages/emcn/src/components/chip-switch/chip-switch.tsx
index f3001005d1d..31ff0099f7e 100644
--- a/packages/emcn/src/components/chip-switch/chip-switch.tsx
+++ b/packages/emcn/src/components/chip-switch/chip-switch.tsx
@@ -1,11 +1,7 @@
 'use client'
 
-import { type ComponentType, type ReactNode, useRef } from 'react'
-import * as RadioGroup from '@radix-ui/react-radio-group'
-import { useScrollEdges } from '../../hooks/use-scroll-edges'
-import { cn } from '../../lib/cn'
-import { segmentedControlItemVariants, segmentedControlVariants } from '../chip/segmented-control'
-import { scrollFadeAttributes, scrollFadeXClass } from '../scroll-fade/scroll-fade'
+import type { ComponentType, ReactNode } from 'react'
+import { ChipButtonGroup, ChipButtonGroupItem } from '../chip-button-group/chip-button-group'
 
 /**
  * One segment in a {@link ChipSwitch}. `label` accepts a `ReactNode` so callers
@@ -43,9 +39,8 @@ export interface ChipSwitchProps<T extends string = string> {
 }
 
 /**
- * A segmented chip with the same 30px outer height as `ChipDropdown`. Its
- * inset segments share their chrome with `ChipButtonGroup`. Radix owns radio-group
- * focus, arrow-key selection, and disabled-option behavior.
+ * Options-based adapter over `ChipButtonGroup`. Both APIs share the same
+ * geometry, scrolling, radio-group focus, and disabled-option behavior.
  *
  * @example
  * <ChipSwitch
@@ -66,36 +61,27 @@ export function ChipSwitch<T extends string>({
   'aria-label': ariaLabel,
   className,
 }: ChipSwitchProps<T>) {
-  const groupRef = useRef<HTMLDivElement>(null)
-  const edges = useScrollEdges(groupRef, { axis: 'x' })
   return (
-    <RadioGroup.Root
-      ref={groupRef}
-      {...scrollFadeAttributes(edges)}
+    <ChipButtonGroup
       value={value}
       disabled={disabled}
+      size={size}
       onValueChange={(next) => {
         const option = options.find((entry) => entry.value === next)
         if (!disabled && option && !option.disabled) onChange(option.value)
       }}
       aria-label={ariaLabel}
-      className={cn(scrollFadeXClass, segmentedControlVariants({ size }), className)}
+      className={className}
     >
       {options.map((option) => {
         const Icon = option.icon
-        const isActive = option.value === value
         return (
-          <RadioGroup.Item
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-            className={cn(segmentedControlItemVariants({ active: isActive, size }))}
-          >
+          <ChipButtonGroupItem key={option.value} value={option.value} disabled={option.disabled}>
             {Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null}
             {option.label}
-          </RadioGroup.Item>
+          </ChipButtonGroupItem>
         )
       })}
-    </RadioGroup.Root>
+    </ChipButtonGroup>
   )
 }
diff --git a/packages/emcn/src/components/chip/chip-chevron.tsx b/packages/emcn/src/components/chip/chip-chevron.tsx
index 3b4b30d23b5..1db1a4e7b17 100644
--- a/packages/emcn/src/components/chip/chip-chevron.tsx
+++ b/packages/emcn/src/components/chip/chip-chevron.tsx
@@ -10,7 +10,7 @@ interface ChipChevronDownProps {
 /**
  * Canonical trailing chevron adornment for chip-style dropdown triggers — a
  * 16px hidden-from-AT slot centering the 14px {@link ChevronDown} glyph in
- * `--text-icon`, matching the chevron `ChipDropdown` owns internally. Use it
+ * `--text-icon`, matching the chevron `ChipSelect` owns internally. Use it
  * inside hand-built `chipVariants` triggers (breadcrumb dropdowns, header
  * "New column"-style buttons) instead of re-deriving the span + icon markup.
  *
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index b4c5d63c52c..84c1fb201e4 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -3,7 +3,7 @@ export const chipFilledFillTokens = 'bg-[var(--surface-5)] dark:bg-[var(--surfac
 /**
  * The filled surface WITH a `--border-1` border, for chip FIELDS ({@link ChipInput},
  * {@link ChipTextarea}). The `filled` chip variant itself is borderless
- * ({@link chipFilledFillTokens}); pill triggers (`ChipDropdown`/`ChipSelect`/
+ * ({@link chipFilledFillTokens}); pill triggers (`ChipSelect`/
  * `ChipDatePicker`) opt into the border via `TRIGGER_BORDER_CLASS`.
  */
 export const chipFilledSurfaceTokens = `border border-[var(--border-1)] ${chipFilledFillTokens}`
@@ -17,7 +17,7 @@ export const chipPrimaryFillTokens =
   'bg-[var(--text-primary)] text-[var(--text-inverse)] dark:bg-white dark:text-[var(--bg)]'
 /** The default chip corner radius. `chipVariants`' `shape: 'round'` swaps it for `rounded-full`. */
 export const chipRadiusClass = 'rounded-lg'
-/** Filled surface shared by the chip text fields ({@link ChipInput}, {@link ChipTextarea}) — aligned with `Chip` / `ChipDropdown`. */
+/** Filled surface shared by the chip text fields ({@link ChipInput}, {@link ChipTextarea}) — aligned with `Chip` / `ChipSelect`. */
 export const chipFieldSurfaceClass = `${chipRadiusClass} ${chipFilledSurfaceTokens} transition-colors`
 /**
  * The raised "border + drop shadow" ring of the `border-shadow` chip variant: a
@@ -49,13 +49,16 @@ export const chipFieldTextClass =
  */
 export const chipContentGap = 'gap-1.5'
 
+/** Standard chip height, also shared by combobox fields. */
+export const chipHeightClass = 'h-[30px]'
+
 /**
  * Chip pill geometry minus its corner radius — height, centering, gap, padding,
  * text size. `chipVariants` composes this with its `shape` variant so a raw
  * (non-`cn`) consumer never emits two competing radii; everything else reads
  * {@link chipGeometryClass}, which adds the default radius back.
  */
-export const chipGeometryUnroundedClass = `h-[30px] items-center ${chipContentGap} px-2 text-left text-sm`
+export const chipGeometryUnroundedClass = `${chipHeightClass} items-center ${chipContentGap} px-2 text-left text-sm`
 /**
  * Chip pill geometry — height, centering, gap, radius, padding, text size — with
  * NO interactivity (no `cursor-pointer`, no hover). `chipVariants` composes this
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index 939e6345594..5b333032762 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -13,6 +13,7 @@ import { cn } from '../../lib/cn'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 import {
   chipActiveSurfaceClass,
+  chipBorderShadowRing,
   chipContentIconClass,
   chipContentLabelClass,
   chipFilledFillTokens,
@@ -34,7 +35,7 @@ import {
  * The implicit **default** variant is the bare pill — transparent, `--surface-hover` on hover. Omit `variant`
  * to get it (shadcn-style); never write `variant='default'`. Named variants:
  * `filled` (`--surface-5` light / `--surface-4` dark fill, `--surface-hover` hover) — a borderless surface reserved for
- * chip FIELDS/TRIGGERS ({@link ChipInput}/{@link ChipDropdown}/{@link ChipSelect}/{@link ChipDatePicker}), **never `Chip`
+ * chip FIELDS/TRIGGERS ({@link ChipInput}/{@link ChipSelect}/{@link ChipDatePicker}), **never `Chip`
  * itself**; those triggers add the `--border-1` outline themselves via `TRIGGER_BORDER_CLASS`;
  * `primary` (inverse surface), `destructive` (error-token surface), `border-shadow` (raised card-like surface),
  * `border` (the `border-shadow` shadow ring on a transparent surface — an outline drawn purely via box-shadow,
@@ -68,9 +69,8 @@ const chipVariants = cva(
         primary: `${chipPrimaryFillTokens} hover-hover:bg-[var(--text-body)] hover-hover:text-[var(--text-inverse)] dark:hover-hover:bg-[var(--text-secondary)] dark:hover-hover:text-[var(--bg)]`,
         destructive:
           'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
-        'border-shadow':
-          'bg-[var(--surface-2)] shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] hover-hover:bg-[var(--surface-3)] dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)] dark:hover-hover:bg-[var(--surface-4)]',
-        border: `shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] ${chipHoverSurfaceClass} dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)]`,
+        'border-shadow': `${chipBorderShadowRing} bg-[var(--surface-2)] hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-4)]`,
+        border: `${chipBorderShadowRing} ${chipHoverSurfaceClass}`,
         outline:
           'border border-[var(--border)] bg-transparent hover-hover:border-[color-mix(in_srgb,var(--border)_80%,var(--text-secondary))]',
       },
diff --git a/packages/emcn/src/components/chip/segmented-control.ts b/packages/emcn/src/components/chip/segmented-control.ts
index 183a4954d70..c9056325b7e 100644
--- a/packages/emcn/src/components/chip/segmented-control.ts
+++ b/packages/emcn/src/components/chip/segmented-control.ts
@@ -12,10 +12,9 @@ export const segmentedControlVariants = cva(
   ),
   {
     variants: {
-      gap: { none: 'gap-0', sm: 'gap-0.5' },
       size: { default: '', compact: 'h-[22px]' },
     },
-    defaultVariants: { gap: 'none', size: 'default' },
+    defaultVariants: { size: 'default' },
   }
 )
 
diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx
index e77eeda0007..00034f40b2e 100644
--- a/packages/emcn/src/components/combobox/combobox.tsx
+++ b/packages/emcn/src/components/combobox/combobox.tsx
@@ -28,16 +28,12 @@ const comboboxVariants = cva(
   'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
-      variant: {
-        default: '',
-      },
       size: {
         sm: 'py-1.5 text-caption',
         md: 'py-1.5 text-sm',
       },
     },
     defaultVariants: {
-      variant: 'default',
       size: 'md',
     },
   }
@@ -185,7 +181,6 @@ const Combobox = memo(
     (
       {
         className,
-        variant,
         size,
         options,
         value,
@@ -866,7 +861,7 @@ const Combobox = memo(
                     aria-disabled={disabled}
                     tabIndex={disabled ? -1 : 0}
                     className={cn(
-                      comboboxVariants({ variant, size }),
+                      comboboxVariants({ size }),
                       'relative cursor-pointer items-center justify-between',
                       disabled && 'cursor-not-allowed opacity-50',
                       className
diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
index 6fea1973ce2..a6f4774b45f 100644
--- a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
@@ -28,9 +28,7 @@ import { cn } from '../../lib/cn'
 import { chipContentGap, chipFieldSurfaceClass, chipGeometryClass } from '../chip/chip-chrome'
 import { InsideModalContext } from '../modal/modal'
 import { OverflowText, type OverflowTextProps } from '../overflow-text/overflow-text'
-
-const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
+import { POPOVER_ANIMATION_CLASSES } from '../popover/popover-animation'
 
 /**
  * Menu row geometry. Rows sit 2px flatter than the 30px chip pill — the menu is a
@@ -246,7 +244,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.SubContent
       ref={ref}
-      className={cn(ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[280px]', className)}
+      className={cn(POPOVER_ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[280px]', className)}
       {...props}
       data-native-surface-overlay=''
     />
@@ -280,7 +278,7 @@ const DropdownMenuContent = React.forwardRef<
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[220px]', className)}
+      className={cn(POPOVER_ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[220px]', className)}
       {...props}
       data-native-surface-overlay=''
     />
@@ -479,7 +477,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
+      `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-default select-none items-center ${chipContentGap} ${MENU_ROW_RADIUS_CLASS} whitespace-nowrap pr-2 pl-7 text-[var(--text-body)] text-small outline-hidden ${MENU_ROW_TRANSITION_CLASS} ${MENU_ROW_HIGHLIGHT_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
       className
     )}
     checked={checked}
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 8a6c0391020..b194122e642 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -1,10 +1,10 @@
 export { Avatar, AvatarFallback, AvatarImage } from './avatar/avatar'
 export { Badge, type BadgeProps } from './badge/badge'
 export { Banner } from './banner/banner'
+export { BulkActionBar, type BulkActionBarProps } from './bulk-action-bar/bulk-action-bar'
 export {
   BulkActionButton,
   type BulkActionButtonProps,
-  bulkActionButtonVariants,
 } from './bulk-action-button/bulk-action-button'
 export { Button, buttonVariants } from './button/button'
 export {
@@ -35,6 +35,7 @@ export {
   chipFilledSurfaceTokens,
   chipGeometryClass,
   chipGeometryUnroundedClass,
+  chipHeightClass,
   chipHoverSurfaceClass,
   chipIconSlotClass,
   chipPrimaryFillTokens,
@@ -55,11 +56,6 @@ export {
   type ChipCopyInputProps,
 } from './chip-copy-input/chip-copy-input'
 export { ChipDatePicker } from './chip-date-picker/chip-date-picker'
-export {
-  ChipDropdown,
-  type ChipDropdownOption,
-  type ChipDropdownProps,
-} from './chip-dropdown/chip-dropdown'
 export {
   ChipEmailsInput,
   type ChipEmailsInputProps,
diff --git a/packages/emcn/src/components/info-card/info-card.tsx b/packages/emcn/src/components/info-card/info-card.tsx
index 11fd521792c..e2ed07e12be 100644
--- a/packages/emcn/src/components/info-card/info-card.tsx
+++ b/packages/emcn/src/components/info-card/info-card.tsx
@@ -22,6 +22,7 @@
 import * as React from 'react'
 import { Check } from '../../icons'
 import { cn } from '../../lib/cn'
+import { chipFilledSurfaceTokens, chipRadiusClass } from '../chip/chip-chrome'
 
 export interface InfoCardProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -31,14 +32,7 @@ export interface InfoCardProps extends React.HTMLAttributes<HTMLDivElement> {}
  * `ChipModalField`.
  */
 const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-4)]',
-      className
-    )}
-    {...props}
-  />
+  <div ref={ref} className={cn(chipRadiusClass, chipFilledSurfaceTokens, className)} {...props} />
 ))
 
 InfoCard.displayName = 'InfoCard'
diff --git a/packages/emcn/src/components/modal/modal-interactions.test.tsx b/packages/emcn/src/components/modal/modal-interactions.test.tsx
index e794ad2a8d8..72a239ee486 100644
--- a/packages/emcn/src/components/modal/modal-interactions.test.tsx
+++ b/packages/emcn/src/components/modal/modal-interactions.test.tsx
@@ -4,11 +4,11 @@
 import { act, type ReactNode, useState } from 'react'
 import {
   ChipCombobox,
-  ChipDropdown,
   ChipModal,
   ChipModalBody,
   ChipModalField,
   ChipModalHeader,
+  ChipSelect,
   Popover,
   PopoverContent,
   PopoverFolder,
@@ -50,7 +50,14 @@ function ModalFields({ onChange, dismissDisabled }: ModalFieldsProps) {
           <ChipCombobox options={OPTIONS} data-testid='folder' />
         </ChipModalField>
         <ChipModalField type='custom' title='Access'>
-          <ChipDropdown options={OPTIONS} placeholder='Access' />
+          <ChipSelect
+            showSelectedCheck
+            dropdownWidth='trigger'
+            modal={false}
+            className='w-auto max-w-none'
+            options={OPTIONS}
+            placeholder='Access'
+          />
         </ChipModalField>
         <p data-testid='description'>Choose the source to synchronize.</p>
       </ChipModalBody>
diff --git a/packages/emcn/src/components/modal/modal.tsx b/packages/emcn/src/components/modal/modal.tsx
index bbf47f5e36e..6296756365b 100644
--- a/packages/emcn/src/components/modal/modal.tsx
+++ b/packages/emcn/src/components/modal/modal.tsx
@@ -235,7 +235,7 @@ function hasOpenFloatingLayer() {
 
 /**
  * Clears a stale `pointer-events: none` lock Radix can leave on `<body>` when
- * this dialog closes while a nested modal popper (an open `ChipDropdown` /
+ * this dialog closes while a nested modal popper (an open `ChipSelect` /
  * `Select`) is still open: both layers' body locks tear down in the same tick
  * and the release is lost, freezing the page so nothing is clickable.
  *
@@ -266,7 +266,7 @@ function ModalBodyLockReleaser() {
 /**
  * Whether the current subtree renders inside a `ModalContent`.
  *
- * Floating EMCN controls (e.g. `ChipDropdown`) read this to switch their
+ * Floating EMCN controls (e.g. `ChipSelect`) read this to switch their
  * Radix popper to modal behavior. A non-modal popper portaled to `body`
  * underneath a modal dialog inherits the dialog's `pointer-events: none`
  * body lock and its outside-scroll lock, leaving the popper unclickable and
diff --git a/packages/emcn/src/components/progress-item/progress-item.tsx b/packages/emcn/src/components/progress-item/progress-item.tsx
index fe08f64dde3..1a26366f883 100644
--- a/packages/emcn/src/components/progress-item/progress-item.tsx
+++ b/packages/emcn/src/components/progress-item/progress-item.tsx
@@ -1,20 +1,8 @@
 import { forwardRef, type HTMLAttributes } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, Loader, Square, TriangleAlert, X } from '../../icons'
 import { cn } from '../../lib/cn'
 
-const progressItemVariants = cva('flex items-start gap-2.5 px-3 py-3 text-[12px]', {
-  variants: {
-    status: {
-      pending: '',
-      success: '',
-      error: '',
-    },
-  },
-  defaultVariants: { status: 'pending' },
-})
-
-type ProgressStatus = NonNullable<VariantProps<typeof progressItemVariants>['status']>
+type ProgressStatus = 'pending' | 'success' | 'error'
 
 const ICON_CLASS = 'mt-px size-[14px] shrink-0'
 
@@ -26,9 +14,7 @@ function StatusIcon({ status }: { status: ProgressStatus }) {
   return <Loader animate className={cn(ICON_CLASS, 'text-[var(--text-icon)]')} />
 }
 
-export interface ProgressItemProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,
-    VariantProps<typeof progressItemVariants> {
+export interface ProgressItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   status: ProgressStatus
   /** Primary line (truncated). */
   title: React.ReactNode
@@ -64,7 +50,11 @@ const ProgressItem = forwardRef<HTMLDivElement, ProgressItemProps>(function Prog
   const trailingAction = onCancel ?? onDismiss
   const trailingLabel = onCancel ? 'Cancel' : (dismissLabel ?? 'Dismiss')
   return (
-    <div ref={ref} className={cn(progressItemVariants({ status }), className)} {...props}>
+    <div
+      ref={ref}
+      className={cn('flex items-start gap-2.5 px-3 py-3 text-[12px]', className)}
+      {...props}
+    >
       <StatusIcon status={status} />
       <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
         <div className='flex items-center gap-2'>
@@ -100,4 +90,4 @@ const ProgressItem = forwardRef<HTMLDivElement, ProgressItemProps>(function Prog
 })
 ProgressItem.displayName = 'ProgressItem'
 
-export { ProgressItem, progressItemVariants }
+export { ProgressItem }
diff --git a/packages/emcn/src/components/textarea/textarea.tsx b/packages/emcn/src/components/textarea/textarea.tsx
index d1cb2b59309..0d493f9321e 100644
--- a/packages/emcn/src/components/textarea/textarea.tsx
+++ b/packages/emcn/src/components/textarea/textarea.tsx
@@ -1,35 +1,19 @@
 import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
 
 /** `[letter-spacing:inherit]` — see the note on `INPUT_CLASS`; keep the two in step. */
-const textareaVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-hidden resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
+const TEXTAREA_CLASS =
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-hidden resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50'
 
-interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    VariantProps<typeof textareaVariants> {}
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 /**
- * Minimal textarea component matching the user-input styling.
- * Features a resize handle in the bottom right corner.
+ * Native editing foundation for caret mirrors and specialized editors.
+ * Use ChipTextarea for ordinary form fields.
  */
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, variant, ...props }, ref) => {
-    return (
-      <textarea className={cn(textareaVariants({ variant }), className)} ref={ref} {...props} />
-    )
+  ({ className, ...props }, ref) => {
+    return <textarea className={cn(TEXTAREA_CLASS, className)} ref={ref} {...props} />
   }
 )
 
diff --git a/packages/emcn/src/components/time-picker/time-picker.tsx b/packages/emcn/src/components/time-picker/time-picker.tsx
index 009f2815beb..17247c441b5 100644
--- a/packages/emcn/src/components/time-picker/time-picker.tsx
+++ b/packages/emcn/src/components/time-picker/time-picker.tsx
@@ -39,16 +39,12 @@ const timePickerVariants = cva(
   'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-hidden disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
   {
     variants: {
-      variant: {
-        default: '',
-      },
       size: {
         default: 'py-1.5 text-sm',
         sm: 'py-[5px] text-caption',
       },
     },
     defaultVariants: {
-      variant: 'default',
       size: 'default',
     },
   }
@@ -117,7 +113,6 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
   (
     {
       className,
-      variant,
       size,
       value,
       onChange,
@@ -227,7 +222,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
               tabIndex={disabled ? -1 : 0}
               aria-disabled={disabled}
               className={cn(
-                timePickerVariants({ variant, size }),
+                timePickerVariants({ size }),
                 'relative cursor-pointer items-center justify-between',
                 disabled && 'cursor-not-allowed opacity-50',
                 className

From 81e3110265eac85b9f48734bdbd3475827a835d8 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 12:46:10 -0700
Subject: [PATCH 3/4] test(emcn): read email geometry from the public export

---
 apps/sim/components/emails/_styles/base.tokens.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/components/emails/_styles/base.tokens.test.ts b/apps/sim/components/emails/_styles/base.tokens.test.ts
index 5e607c8553a..2c268e7756c 100644
--- a/apps/sim/components/emails/_styles/base.tokens.test.ts
+++ b/apps/sim/components/emails/_styles/base.tokens.test.ts
@@ -7,7 +7,7 @@
  */
 import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
-import { chipGeometryClass } from '@sim/emcn/components/chip/chip-chrome'
+import { chipGeometryClass } from '@sim/emcn'
 import { describe, expect, it } from 'vitest'
 import { baseStyles, colors, typography } from '@/components/emails/_styles'
 

From 380bf5dde994dc91277d521ae07d15e62fa1de76 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:11:25 -0700
Subject: [PATCH 4/4] improvement(emcn): share larger chip and field geometry
 (#8151)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
---
 .claude/rules/emcn-components.md              |  4 +
 .cursor/rules/emcn-components.mdc             |  4 +
 apps/sim/app/(auth)/components/auth-input.tsx | 17 +---
 .../landing-cta-link/landing-cta-link.tsx     |  2 +-
 .../secret-value-field/secret-value-field.tsx |  2 +-
 .../components/chip-input/chip-input.test.tsx | 17 +++-
 .../src/components/chip-input/chip-input.tsx  | 15 ++-
 .../emcn/src/components/chip/chip-chrome.ts   |  6 +-
 .../emcn/src/components/chip/chip.test.tsx    | 93 +++++++++++++++++++
 packages/emcn/src/components/chip/chip.tsx    | 36 +++++--
 10 files changed, 169 insertions(+), 27 deletions(-)
 create mode 100644 packages/emcn/src/components/chip/chip.test.tsx

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index af477a7d886..8c8b468d246 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -70,3 +70,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 6a70e29d4b3..75fe49a83e3 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -71,3 +71,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
diff --git a/apps/sim/app/(auth)/components/auth-input.tsx b/apps/sim/app/(auth)/components/auth-input.tsx
index 396bae64cf8..a2c3bc12979 100644
--- a/apps/sim/app/(auth)/components/auth-input.tsx
+++ b/apps/sim/app/(auth)/components/auth-input.tsx
@@ -1,20 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 
-/**
- * The auth text field — a {@link ChipInput} raised to the auth control height
- * ({@link AUTH_CONTROL_HEIGHT}) so every labeled field on the auth and invite
- * surfaces shares one slightly-taller geometry. All chip props pass through
- * (`error`, `endAdornment`, `icon`, …); only the height is owned here, and a
- * caller's `className` (layout only) still composes on top.
- */
-export const AuthInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
-  ({ className, ...props }, ref) => (
-    <ChipInput ref={ref} className={cn(AUTH_CONTROL_HEIGHT, className)} {...props} />
-  )
+/** Auth fields use the larger shared chip size while retaining native input props and refs. */
+export const AuthInput = React.forwardRef<HTMLInputElement, Omit<ChipInputProps, 'size'>>(
+  (props, ref) => <ChipInput {...props} ref={ref} size='lg' />
 )
 
 AuthInput.displayName = 'AuthInput'
diff --git a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
index 4fbba3d3750..5787f2c8560 100644
--- a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
+++ b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
@@ -9,7 +9,7 @@ type LandingCtaSize = 'compact' | 'default' | 'display'
 
 export type LandingCtaSection = PostHogEventMap['landing_cta_clicked']['section']
 
-interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant'> {
+interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant' | 'size'> {
   size?: LandingCtaSize
   variant?: 'primary' | 'outline'
   /** Adds the animated chevron used by demo actions. */
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
index a843694bfe8..fa0e488c761 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
@@ -11,7 +11,7 @@ const VIEWER_MASK_LENGTH = 10
 
 type SecretValueFieldProps = Omit<
   ComponentProps<'input'>,
-  'type' | 'value' | 'onChange' | 'readOnly' | 'style'
+  'type' | 'value' | 'onChange' | 'readOnly' | 'style' | 'size'
 > & {
   /** The chip owns field styling; callers use className for layout. */
   style?: never
diff --git a/packages/emcn/src/components/chip-input/chip-input.test.tsx b/packages/emcn/src/components/chip-input/chip-input.test.tsx
index acbc4226246..a1d70082ff6 100644
--- a/packages/emcn/src/components/chip-input/chip-input.test.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.test.tsx
@@ -30,6 +30,19 @@ afterEach(() => {
 })
 
 describe('ChipInput', () => {
+  it.each([undefined, 'lg'] as const)(
+    'emits a single height for size %s without forwarding it to the native field',
+    (size) => {
+      const input = mount(<ChipInput size={size} disabled aria-label='Search' />)
+      const heights = input.parentElement?.className
+        .split(' ')
+        .filter((token) => token.startsWith('h-'))
+      expect(heights).toEqual([size === 'lg' ? 'h-9' : 'h-[30px]'])
+      expect(input.hasAttribute('size')).toBe(false)
+      expect(input.disabled).toBe(true)
+    }
+  )
+
   it('keeps the focused input mounted when custom leading content changes', () => {
     const input = mount()
     const render = (color: string) => (
@@ -76,7 +89,7 @@ describe('chip form controls', () => {
           error
           aria-invalid
           aria-describedby='error'
-          className='h-[34px]'
+          size='lg'
         />
         <p id='error'>Enter a work email</p>
         <ChipTextarea
@@ -93,7 +106,7 @@ describe('chip form controls', () => {
     expect(input.labels?.[0].textContent).toBe('Work email')
     expect(input.getAttribute('aria-describedby')).toBe('error')
     expect(input.getAttribute('aria-invalid')).toBe('true')
-    expect(input.parentElement?.className).toContain('h-[34px]')
+    expect(input.parentElement?.className).toContain('h-9')
     expect(input.parentElement?.className).toContain('border-[var(--text-error)]')
     expect(textareaRef.current?.rows).toBe(3)
     expect(textareaRef.current?.className).toContain('min-h-[80px]')
diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx
index 444cbb1704a..3c5d7d1f161 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -28,11 +28,19 @@
  */
 import * as React from 'react'
 import { cn } from '../../lib/cn'
-import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome'
+import {
+  chipContentGeometryClass,
+  chipFieldSurfaceClass,
+  chipFieldTextClass,
+  chipRadiusClass,
+  chipSizeClasses,
+} from '../chip/chip-chrome'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
 
 export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Control height: 30px by default, or the larger 36px auth spacing scale. */
+  size?: keyof typeof chipSizeClasses
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
   /** Custom leading content, such as a color swatch. Takes precedence over `icon`. */
@@ -62,6 +70,7 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       error,
       disabled,
       type = 'text',
+      size = 'md',
       ...props
     },
     ref
@@ -69,7 +78,9 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
     <div
       className={cn(
         'flex w-full',
-        chipGeometryClass,
+        chipContentGeometryClass,
+        chipRadiusClass,
+        chipSizeClasses[size],
         chipFieldSurfaceClass,
         error && 'border-[var(--text-error)]',
         disabled && 'opacity-50',
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index 84c1fb201e4..b9e95d45ff4 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -51,6 +51,10 @@ export const chipContentGap = 'gap-1.5'
 
 /** Standard chip height, also shared by combobox fields. */
 export const chipHeightClass = 'h-[30px]'
+/** Shared control heights. Large controls follow the auth spacing scale. */
+export const chipSizeClasses = { md: chipHeightClass, lg: 'h-9' } as const
+/** Chip content geometry without height or radius, for sized controls. */
+export const chipContentGeometryClass = `items-center ${chipContentGap} px-2 text-left text-sm`
 
 /**
  * Chip pill geometry minus its corner radius — height, centering, gap, padding,
@@ -58,7 +62,7 @@ export const chipHeightClass = 'h-[30px]'
  * (non-`cn`) consumer never emits two competing radii; everything else reads
  * {@link chipGeometryClass}, which adds the default radius back.
  */
-export const chipGeometryUnroundedClass = `${chipHeightClass} items-center ${chipContentGap} px-2 text-left text-sm`
+export const chipGeometryUnroundedClass = `${chipHeightClass} ${chipContentGeometryClass}`
 /**
  * Chip pill geometry — height, centering, gap, radius, padding, text size — with
  * NO interactivity (no `cursor-pointer`, no hover). `chipVariants` composes this
diff --git a/packages/emcn/src/components/chip/chip.test.tsx b/packages/emcn/src/components/chip/chip.test.tsx
new file mode 100644
index 00000000000..7ca71576436
--- /dev/null
+++ b/packages/emcn/src/components/chip/chip.test.tsx
@@ -0,0 +1,93 @@
+/** @vitest-environment jsdom */
+import { act, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Chip, ChipLink, chipVariants } from './chip'
+import { chipGeometryClass, chipGeometryUnroundedClass } from './chip-chrome'
+
+describe('Chip geometry', () => {
+  it.each([undefined, 'lg'] as const)(
+    'uses one height for raw variants, buttons and links at size %s',
+    (size) => {
+      const height = size === 'lg' ? 'h-9' : 'h-[30px]'
+      expect(
+        chipVariants({ size })
+          .split(' ')
+          .filter((token) => token.startsWith('h-'))
+      ).toEqual([height])
+      for (const node of [
+        <Chip key='button' size={size}>
+          Continue
+        </Chip>,
+        <ChipLink key='link' size={size} href='/workspace'>
+          Continue
+        </ChipLink>,
+      ]) {
+        const markup = renderToStaticMarkup(node)
+        expect(markup).toContain(height)
+        expect(markup).not.toContain(size === 'lg' ? 'h-[30px]' : 'h-9')
+        expect(markup).not.toMatch(/ size=/)
+      }
+      expect(chipGeometryUnroundedClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('rounded-lg')
+    }
+  )
+
+  it('centers the icon and label without preventing long text from shrinking', () => {
+    const markup = renderToStaticMarkup(
+      <Chip fullWidth align='center' leftAdornment={<svg aria-hidden />}>
+        Continue with your identity provider
+      </Chip>
+    )
+    expect(markup).toContain('justify-center')
+    expect(markup).toContain('flex-initial')
+    expect(markup).toContain('min-w-0')
+    expect(markup).not.toContain('flex-none')
+    expect(markup).not.toMatch(/ align=/)
+  })
+
+  it('preserves native refs, focus, submission, disabled actions and link navigation', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const button = createRef<HTMLButtonElement>()
+    const link = createRef<HTMLAnchorElement>()
+    let submissions = 0
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const render = (disabled: boolean) =>
+      act(() =>
+        root.render(
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submissions++
+            }}
+          >
+            <Chip ref={button} size='lg' align='center' fullWidth type='submit' disabled={disabled}>
+              <strong>Continue</strong>
+            </Chip>
+            <ChipLink ref={link} size='lg' align='center' href='/workspace'>
+              <strong>Workspace</strong>
+            </ChipLink>
+          </form>
+        )
+      )
+    try {
+      render(false)
+      button.current?.focus()
+      expect(document.activeElement).toBe(button.current)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(link.current?.getAttribute('href')).toBe('/workspace')
+      render(true)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(button.current?.disabled).toBe(true)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+    }
+  })
+})
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index 5b333032762..d8d3fbd2494 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -14,17 +14,18 @@ import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-t
 import {
   chipActiveSurfaceClass,
   chipBorderShadowRing,
+  chipContentGeometryClass,
   chipContentIconClass,
   chipContentLabelClass,
   chipFilledFillTokens,
-  chipGeometryUnroundedClass,
   chipHoverSurfaceClass,
   chipPrimaryFillTokens,
   chipRadiusClass,
+  chipSizeClasses,
 } from './chip-chrome'
 
 /**
- * 30px pill — the platform's most common chrome pattern.
+ * 30px pill (36px with `size="lg"` at the default root font size) — the platform's most common chrome pattern.
  *
  * Render targets:
  * - {@link Chip} → `<button>`
@@ -41,6 +42,7 @@ import {
  * `border` (the `border-shadow` shadow ring on a transparent surface — an outline drawn purely via box-shadow,
  * no CSS border, no fill); outline (a true border with no shadow or hover fill).
  * `active` renders the default/filled chip in its selected state — `--surface-active`, held through hover.
+ * `align="center"` centers the complete icon/label group while allowing long labels to shrink.
  * `fullWidth` swaps `inline-flex` for block-level `flex`.
  * `shape` picks the corner radius: the implicit `default` is the `rounded-lg` pill; `round` is fully round
  * (`rounded-full`) for a chip sitting in a row of round controls. The radius lives in this variant rather than
@@ -60,7 +62,7 @@ import {
  * {@link chipHoverSurfaceClass}.
  */
 const chipVariants = cva(
-  `group cursor-pointer ${chipGeometryUnroundedClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
+  `group cursor-pointer ${chipContentGeometryClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
   {
     variants: {
       variant: {
@@ -74,6 +76,8 @@ const chipVariants = cva(
         outline:
           'border border-[var(--border)] bg-transparent hover-hover:border-[color-mix(in_srgb,var(--border)_80%,var(--text-secondary))]',
       },
+      size: chipSizeClasses,
+      align: { start: '', center: 'justify-center' },
       shape: { default: chipRadiusClass, round: 'rounded-full' },
       active: { true: '', false: '' },
       fullWidth: { true: 'flex w-full', false: 'inline-flex' },
@@ -82,7 +86,14 @@ const chipVariants = cva(
       { variant: ['default', 'filled'], active: false, className: chipHoverSurfaceClass },
       { variant: ['default', 'filled'], active: true, className: chipActiveSurfaceClass },
     ],
-    defaultVariants: { variant: 'default', shape: 'default', active: false, fullWidth: false },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      align: 'start',
+      shape: 'default',
+      active: false,
+      fullWidth: false,
+    },
   }
 )
 
@@ -116,6 +127,7 @@ interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant
  */
 function ChipContent({
   variant,
+  align,
   leftIcon: LeftIcon,
   leftAdornment,
   rightIcon: RightIcon,
@@ -124,7 +136,11 @@ function ChipContent({
 }: ChipBaseProps) {
   const isInverse = variant === 'primary' || variant === 'destructive'
   const iconClass = cn(chipContentIconClass, isInverse && 'text-current')
-  const labelClass = cn(chipContentLabelClass, 'flex-1', isInverse && 'text-current')
+  const labelClass = cn(
+    chipContentLabelClass,
+    align === 'center' ? 'flex-initial' : 'flex-1',
+    isInverse && 'text-current'
+  )
   const textLabel =
     typeof children === 'string' || typeof children === 'number' ? String(children) : null
   return (
@@ -151,6 +167,8 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -168,11 +186,12 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
     <button
       ref={ref}
       type={type ?? 'button'}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}
@@ -196,6 +215,8 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -211,11 +232,12 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   return (
     <Link
       ref={ref}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}