diff --git a/.specs/chip.md b/.specs/chip.md
index b1b522cc2..d7e655ac3 100644
--- a/.specs/chip.md
+++ b/.specs/chip.md
@@ -7,20 +7,30 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=476-948
   node_id: 476:948
-checksum: fae500ac2489e389141cd94e93fdaa715f2b5ed73221b1a70231a407b97fb57f
+checksum: d50487d21dfd33d2ce546fb53811e7a6d892d0e17431b0b5be3d1ce3bb4ad434
 created: 2026-06-23
-last_updated: 2026-07-02
+last_updated: 2026-08-12
 ---
 
 # Chip — Component Spec
 
 ## Purpose
 
-A Chip is a compact, self-contained token that labels a discrete value the user has applied — most often a removable filter on a data view. Unlike `tag` (a read-only status/category badge with severity color coding), a Chip carries no severity and exposes an optional trailing remove control: when `removable` is set, it renders a real `<button>` that emits `remove`, so the consumer can drop the value from a collection. This is the token consumed by the data table's `#filters` slot (`<Chip :label="f.label" removable @remove="dropFilter(f)" />`): each active filter becomes one removable Chip, and dismissing it removes that filter. Reach for a Chip when a value is user-applied and dismissible; reach for `tag` when it is a static status or category indicator.
+A Chip is a compact, pill-shaped token that labels a discrete value the user has applied — most often a filter on a data view. Unlike `tag` (a read-only status/category badge with severity color coding), a Chip carries no severity and exposes an optional trailing remove control: when `removable` is set, it renders a real `<button>` that emits `remove`, so the consumer can drop the value from a collection. This is the token consumed by the data table's `#filters` slot (`<Chip :label="f.label" removable @remove="dropFilter(f)" />`): each active filter becomes one removable Chip, and dismissing it removes that filter. Reach for a Chip when a value is user-applied and dismissible; reach for `tag` when it is a static status or category indicator.
+
+`kind` covers the three jobs a chip does in a filter surface, so a consumer never restyles the component to get one of them:
+
+- **`filled`** — a value that IS applied. The shared surface and border plus `--shadow-sm`: the loudest of the three, because it is state.
+- **`outlined`** — a value the user COULD apply. Same surface and border, no shadow: it recedes to an offer without becoming disabled, so a filter vocabulary can stay on screen instead of hiding inside a menu.
+- **`dashed`** — the control that CREATES a chip ("Add filter"). A dashed outline is the standing convention for "add another one of these", which is what separates the thing that makes filters from the things that are filters.
+
+**Presence is the consumer's, not the chip's.** `remove` fires the moment the control is activated; the chip does not animate itself away or unmount itself. A chip that hid itself on remove could only ever serve the one case where removing it also destroys it — a filter bar where a removed value stays on screen as an `outlined` offer was impossible, because the instance stayed invisible forever. Exit motion, if wanted, belongs to whatever owns the list (a `TransitionGroup` around the group).
 
 ## When to use
 
 - Represent a selectable or removable token — active filters, multi-select values, entered keywords.
+- Represent a value that is *available* but not applied (`kind="outlined"`), so the set of things a view can be narrowed by stays visible.
+- Represent the "add another" affordance for such a set (`kind="dashed"`).
 - The element is interactive (clickable / dismissible).
 
 ## When NOT to use
@@ -32,6 +42,9 @@ A Chip is a compact, self-contained token that labels a discrete value the user
 
 - `badge` — static count/short-value indicator.
 - `tag` — static labelled status/category chip.
+- `tooltip` — composed by the remove control to name what it removes.
+
+**Dependency note.** `removable` pulls in `tooltip` (and through it `use-placement` / `use-controllable`). That is deliberate — an unnamed `×` in a row of identical `×`s is the defect being fixed — but it is real weight on a component that renders in lists, so it belongs in the bundle budget when one is added for this entry.
 
 ## Best practices
 
@@ -46,7 +59,12 @@ import Chip from '@aziontech/webkit/chip'
 </script>
 
 <template>
-  <Chip label="Active" size="medium" clickable removable @click="onEdit" @remove="onRemove" />
+  <!-- applied: state -->
+  <Chip label="Active" kind="filled" size="medium" clickable removable @click="onEdit" @remove="onRemove" />
+  <!-- available: an offer -->
+  <Chip label="Status" kind="outlined" size="medium" clickable @click="onPick" />
+  <!-- the control that creates one -->
+  <Chip label="Add filter" kind="dashed" size="medium" clickable @click="onAdd" />
 </template>
 ```
 
@@ -55,7 +73,8 @@ import Chip from '@aziontech/webkit/chip'
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
 | `label` | `string` | `''` | false | Fallback text when the default slot is empty. |
-| `size` | `'small' \| 'medium'` | `'medium'` | false | Size token; `small` is a fixed 20px, `medium`'s height is driven by its vertical padding (~30px). |
+| `kind` | `'filled' \| 'outlined' \| 'dashed'` | `'filled'` | false | Visual variant. Filled is an applied value, outlined an available one, dashed the control that adds one. |
+| `size` | `'small' \| 'medium'` | `'medium'` | false | Size token; `small` is a fixed 24px, `medium` a fixed 32px. |
 | `removable` | `boolean` | `false` | false | When true, renders a trailing remove button that emits `remove`. |
 | `clickable` | `boolean` | `false` | false | When true, the chip body becomes interactive (`role="button"`, focusable) and emits `click` on activation (click / Enter / Space). |
 
@@ -63,7 +82,7 @@ import Chip from '@aziontech/webkit/chip'
 
 | Event | Payload | Notes |
 |---|---|---|
-| `remove` | `(event: MouseEvent, label: string)` | Fires when `removable` is true and the remove button is activated (click / Enter / Space), after the chip's exit (fade-out) animation completes, so the parent removes the chip once it has animated out. `label` is the chip's `label` prop, identifying which chip was removed. |
+| `remove` | `(event: MouseEvent, label: string)` | Fires when `removable` is true and the remove button is activated (click / Enter / Space), **immediately** — the chip does not hide or unmount itself first, so the consumer decides whether the chip disappears, stays, or becomes an `outlined` offer. `label` is the chip's `label` prop, identifying which chip was removed. |
 | `click` | `(event: MouseEvent \| KeyboardEvent, label: string)` | Fires only when `clickable` is true and the chip body is activated — by pointer, or `Enter` / `Space` while the root is focused. `label` identifies which chip was clicked. The trailing remove button stops propagation, so activating it emits `remove` only, never `click`. |
 
 ## Slots
@@ -75,31 +94,38 @@ import Chip from '@aziontech/webkit/chip'
 ## States
 
 - Visual states: `default`, `hover`, `focus-visible`, `active`
+- `data-kind` mirrors the `kind` prop (`filled` | `outlined` | `dashed`)
 - `data-size` mirrors the `size` prop (`small` | `medium`)
 - `data-removable` is present when the `removable` prop is true
 - `data-clickable` is present when the `clickable` prop is true
 - When `clickable`, the root is an interactive `role="button"` with `tabindex="0"`: it shows `cursor-pointer`, a `::before` ghost-layer darkening overlay (`--bg-hover`) on `hover` and `active`, a `--border-strong` border on `active` (the pressed state, per Figma), and a visible focus ring on `focus-visible`. When not clickable, the root stays a non-interactive container.
-- The remove button (when `removable`) is always independently focusable and shows its own focus ring on `focus-visible`.
+- The remove button (when `removable`) is always independently focusable and shows its own focus ring on `focus-visible`. It carries a **`tooltip`** naming what it removes, shown on hover and on keyboard focus — in a row of chips four identical `×` controls sit side by side, and the field name is what tells them apart.
+- All three kinds share the same `--bg-surface` fill and `--border-default` border at rest, so a row of chips reads as one family; the kinds differ only in **elevation** (and, for `dashed`, the dash). When `clickable`, hover raises the border to `--border-strong` — the same rest→hover pair `input-text` and `select-trigger` use. That pair is what makes the outline read as interactive at all: `--border-default` is 8% black, the *same value* as `--border-muted` in the light theme, so a static border of either token is indistinguishable. `filled` adds `--shadow-sm`; `outlined` drops it, which is what makes an applied value louder than an available one without changing the surface or the outline it is drawn with. `dashed` is `outlined` with a dashed border.
+- **Fill is not the applied/available distinction.** It was, nominally — `filled` specified `--bg-surface-raised` and the other two were transparent — and it worked in neither theme: `--bg-surface-raised` resolves to the *same value* as `--bg-surface` in the light theme, so the contrast it was meant to carry existed only in dark, and the utility was authored with a stray space inside the paren shorthand, which terminates the Tailwind candidate so it compiled to no CSS at all. Every `filled` chip was transparent in both themes. One shared surface is what makes a chip read as a raised object against `--bg-canvas`; `--shadow-sm` then carries the state on its own, which is what it was already doing.
+- The remove control's glyph sits at `--text-muted` at rest and rises to `--text-default` on hover: at rest it is punctuation after a label, and on hover it is the thing being aimed at. It stays above the 3:1 non-text contrast minimum in both themes (3.95:1 light, 5.02:1 dark).
 
 ## Motion & Animations
 
 | Trigger | Animation / Transition | Token (see `.claude/docs/DESIGN.md` § Animations) | Reduced-motion fallback |
 |---|---|---|---|
-| remove (chip dismiss) | inline `opacity` transition (fade-out), matching the `Message` dismiss | `duration['fast-02']` · `curve['productive-exit']` (animations.js) | `motion-reduce:transition-none` |
-| remove button hover/focus state change | `transition-colors duration-150 ease-out` | inline (matches catalog) | `motion-reduce:transition-none` |
+| remove (chip dismiss) | **none — the chip does not animate its own removal.** It emits `remove` and leaves presence to the consumer; exit motion belongs to whatever owns the list. The chip sets **no inline `transition`**, so a consumer's own `transition-*` utilities on the root are never overridden (an inline style beats every class, which silently killed consumer-authored chip motion). | — | — |
+| kind / border colour change | `transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-entrance` | DESIGN.md § Interactive states | `motion-reduce:transition-none` |
+| remove button hover/focus state change | `transition-colors duration-fast-02 ease-productive-entrance` | DESIGN.md § Interactive states | `motion-reduce:transition-none` |
+| remove tooltip open / close | **owned by `tooltip`** — the chip composes it and declares no motion of its own for it; the utilities, their tokens and the reduced-motion fallback are that component's contract, not this one's. | see `.specs/tooltip.md` | from `tooltip` |
 | clickable hover / active (chip body) | `::before` ghost-layer `opacity` overlay (`--bg-hover`) shown on `hover` and `active`, only when `clickable`; `active` also flips the border to `--border-strong` | `before:duration-fast-02 before:ease-productive-entrance` (DESIGN.md § Interactive states) | `motion-reduce:before:transition-none` |
 
 ## Tokens
 
 | Region | Token (DESIGN.md) |
 |---|---|
-| surface | `var(--bg-surface)` (Figma uses the raised surface variant — see Theme gaps) |
-| border (color) | `var(--border-default)` |
-| shape | `var(--shape-elements)` |
-| elevation | `var(--shadow-sm)` |
-| typography (medium) | `.text-label-md` + `leading-none` (Figma Typography/Label/md, 14px) |
-| typography (small) | `.text-label-sm` + `leading-none` (Figma Typography/Label/sm, 12px) |
+| surface (all kinds) | `var(--bg-surface)` |
+| border (all kinds, rest) | `var(--border-default)` |
+| border (clickable, hover) | `var(--border-strong)` |
+| shape | fully rounded (pill) |
+| elevation (`filled`) | `var(--shadow-sm)`; `outlined` / `dashed` carry none |
+| typography (both sizes) | `.text-label-sm` + `leading-none` |
 | text | `var(--text-default)` |
+| remove glyph (rest / hover) | `var(--text-muted)` / `var(--text-default)` |
 | spacing (medium padding) | `var(--spacing-sm)` / `var(--spacing-xs)` |
 | spacing (small padding) | `var(--spacing-xs)` / `var(--spacing-xxs)` |
 | spacing (label↔icon gap) | `var(--spacing-xxs)` |
@@ -111,28 +137,26 @@ import Chip from '@aziontech/webkit/chip'
 
 | Figma variable | Temporary primitive | Follow-up |
 |---|---|---|
-| raised surface `var(--bg-surface-raised)` | `var(--bg-surface-raised)` (exists in the theme; not yet catalogued in DESIGN.md) | `TODO: catalogar --bg-surface-raised em DESIGN.md` |
-| border width `var(--border-width-default)` | `var(--border-width-default)` (exists in the theme; not yet catalogued in DESIGN.md; already used by `tag.vue`) | `TODO: catalogar --border-width-default em DESIGN.md` |
+| border width `var(--border-width-default)` | **1px, from the plain `border` utility.** `border-(length:--border-width-default)` emits no CSS at all in Tailwind v4 — verified against the built stylesheet — so the token cannot be applied through that syntax. It is used the same dead way in 10+ other components. | `TODO: repo-wide — replace the dead `border-(length:--border-width-default)` with a syntax that emits, or drop the token` |
 | label↔icon gap `6px` | `var(--spacing-xxs)` (4px) | `TODO: tokenizar gap de 6px se virar recorrente` |
 
 ## Accessibility (WCAG 2.1 AA)
 
 - Visible focus: both the clickable root (when `clickable`) and the remove button use `focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)`.
-- Keyboard map: when `clickable`, the root is focusable (`tabindex="0"`) and `Enter` / `Space` emit `click` (`Space` is `preventDefault`ed to avoid scrolling). When `removable`, `Tab` reaches the remove button and `Enter` / `Space` activate it and emit `remove`. Keystrokes that originate on the remove button do not bubble to the root activation (the handler ignores events whose `target` is not the root itself).
-- ARIA: when not `clickable`, the root is a non-interactive `<span>` container; when `clickable`, it is `role="button"` with `tabindex="0"`. The remove control is a real `<button type="button">` with `aria-label="Remove"`; the `pi pi-times` glyph is `aria-hidden="true"`.
+- Keyboard map: when `clickable`, the root is focusable (`tabindex="0"`) and `Enter` / `Space` **dispatch a real DOM click** on the root (`preventDefault`ed first, so `Space` does not scroll), which in turn emits `click`. Dispatching rather than emitting directly is what lets a chip serve as an overlay trigger — `Popover.Trigger` and friends open on the DOM click that bubbles out of their child, so a chip that only emitted a Vue event would work with the mouse and do nothing from the keyboard. When `removable`, `Tab` reaches the remove button and `Enter` / `Space` activate it and emit `remove`. Keystrokes that originate on the remove button do not bubble to the root activation (the handler ignores events whose `target` is not the root itself).
+- ARIA: when not `clickable`, the root is a non-interactive `<span>` container; when `clickable`, it is `role="button"` with `tabindex="0"`. The remove control is a real `<button type="button">`; the `pi pi-times` glyph is `aria-hidden="true"`. Its `aria-label` and its tooltip text are **the same derived string** — `Remove <label>` when `label` is set, `Remove` otherwise — so what is shown and what is announced cannot drift.
 - Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including the remove icon.
-- `motion-reduce:transition-none` on the remove button's color transition and on the chip's dismiss fade-out (the exit transition collapses to instant under reduced motion).
-- Touch target: justified deviation — the chip height is 20–30px, so the remove button's touch target is below 40×40 px. This matches the design (the Chip is a compact inline token, not a primary action), and the larger surrounding chip remains the visible affordance.
+- `motion-reduce:transition-none` on every transition the chip declares (kind/border colour, remove-button colour). The chip declares no dismiss animation at all, so there is nothing to suppress there.
+- Touch target: the remove control is **24×24 px at `medium`** — the WCAG 2.5.8 (AA) minimum — and 16×16 px at `small`, a justified deviation for the compact 24px token where the surrounding chip remains the visible affordance. The earlier build drew the control at 14×14 px at every size, which met neither.
 
 ## Stories (Storybook)
 
 - Default — the baseline Chip with `label`.
+- Types — composite story rendering `filled`, `outlined` and `dashed` side by side, justified because `kind` is a real axis with three values that carry different meanings (applied / available / adds one).
 - Sizes — composite story rendering `small` and `medium` side by side, justified because `size` is a real axis with two values.
 - Removable — args delta `removable: true`, wiring the `remove` event to the Actions panel; justified because `removable` is a real boolean state that changes the rendered anatomy (adds the trailing remove button) and the emitted event.
 - Clickable — args delta `clickable: true`, wiring the `click` event to the Actions panel; justified because `clickable` is a real boolean state that turns the chip body into an interactive `role="button"` and emits a distinct event.
 
-Types/Sizes canonical note: there is no `kind`/`severity` axis on Chip, so the `Types` story is omitted.
-
 ## Constraints — DO NOT
 
 <!-- This block is injected VERBATIM into every sub-agent prompt.
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-mobile.png
index fb3bee179..a3cbbd76e 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-tablet.png
index 05a003f5b..69eab97d2 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-desktop.png
index 6975d1b3f..5fb9d1c9f 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-mobile.png
index b9751f4ad..abe0a07af 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-tablet.png
index d419b9940..3372fdac1 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable.png
index 94954b017..4f676584e 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--clickable.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-mobile.png
index fb3bee179..a3cbbd76e 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-tablet.png
index 05a003f5b..69eab97d2 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-desktop.png
index 6975d1b3f..5fb9d1c9f 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-mobile.png
index b9751f4ad..abe0a07af 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-tablet.png
index d419b9940..3372fdac1 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default.png
index 94954b017..4f676584e 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-mobile.png
index 2b61988ed..5df44fd4d 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-tablet.png
index ac47f58ea..807c5cdbe 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-desktop.png
index 41530f925..1298382c6 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-mobile.png
index 30b3493c3..c6e3834c6 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-tablet.png
index 49e6a430c..f54d74e84 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable.png
index 62e364dd1..bb7b67f4d 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--removable.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-mobile.png
index 0e9d32d6c..51dad5a1c 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-tablet.png
index 4e26c52d4..9fec133b3 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-desktop.png
index dc01bb900..356f976c4 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-mobile.png
index ed919272f..1d8cf6df6 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-tablet.png
index 5411fcc01..e623eaaed 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes.png
index 72d62fc7f..4e869dcfa 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--sizes.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--dark-mobile.png
new file mode 100644
index 000000000..3ce49d923
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--dark-tablet.png
new file mode 100644
index 000000000..6a42fade1
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-desktop.png
new file mode 100644
index 000000000..3d81aec80
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-mobile.png
new file mode 100644
index 000000000..b7c7306e6
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-tablet.png
new file mode 100644
index 000000000..a9eca5f42
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types.png
new file mode 100644
index 000000000..793586ef6
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-chip--types.png differ
diff --git a/apps/storybook/src/stories/components/inputs/chip/Chip.stories.js b/apps/storybook/src/stories/components/inputs/chip/Chip.stories.js
index 56ce4ebf7..dc3e8f855 100644
--- a/apps/storybook/src/stories/components/inputs/chip/Chip.stories.js
+++ b/apps/storybook/src/stories/components/inputs/chip/Chip.stories.js
@@ -13,12 +13,23 @@ const meta = {
     docs: {
       description: {
         component:
-          'A compact, dismissible token that labels a user-applied value, such as a removable filter on a data view. When `removable` is set, it renders a trailing button that emits the `remove` event; when `clickable` is set, the chip body becomes interactive and emits the `click` event.'
+          'A compact, pill-shaped token that labels a user-applied value, such as a filter on a data view. `kind` covers the three jobs a chip does in a filter surface: `filled` is a value that IS applied, `outlined` one the user COULD apply, and `dashed` the control that adds one. When `removable` is set, it renders a trailing button that emits `remove` — immediately, without hiding itself, so presence stays the consumer\'s call; when `clickable` is set, the chip body becomes interactive and emits `click`.'
       },
       canvas: { sourceState: 'shown' }
     }
   },
   argTypes: {
+    kind: {
+      control: 'inline-radio',
+      options: ['filled', 'outlined', 'dashed'],
+      description:
+        'Visual variant. Filled is an applied value, outlined an available one, dashed the control that adds one.',
+      table: {
+        category: 'props',
+        type: { summary: "'filled' | 'outlined' | 'dashed'" },
+        defaultValue: { summary: 'filled' }
+      }
+    },
     label: {
       control: 'text',
       description: 'Fallback text when the default slot is empty.',
@@ -27,7 +38,7 @@ const meta = {
     size: {
       control: 'inline-radio',
       options: ['small', 'medium'],
-      description: 'Size token; medium is 24px tall, small is 20px.',
+      description: 'Size token; medium is a fixed 32px, small a fixed 24px.',
       table: {
         category: 'props',
         type: { summary: "'small' | 'medium'" },
@@ -46,7 +57,7 @@ const meta = {
       table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
     }
   },
-  args: { label: 'Label', size: 'medium', removable: false, clickable: false }
+  args: { label: 'Label', kind: 'filled', size: 'medium', removable: false, clickable: false }
 }
 
 export default meta
@@ -59,7 +70,7 @@ const Template = (args) => ({
   template: '<Chip v-bind="props" />'
 })
 
-const DEFAULT_MARKUP = '<Chip label="Label" size="medium" />'
+const DEFAULT_MARKUP = '<Chip label="Label" kind="filled" size="medium" />'
 
 export const Default = {
   render: Template,
@@ -71,6 +82,29 @@ export const Default = {
   }
 }
 
+const TYPES_TEMPLATE = `<div class="flex flex-wrap items-center gap-4">
+  <Chip label="Production" kind="filled" size="medium" removable />
+  <Chip label="Status" kind="outlined" size="medium" clickable />
+  <Chip label="Add filter" kind="dashed" size="medium" clickable />
+</div>`
+
+export const Types = {
+  render: () => ({
+    components: { Chip },
+    template: TYPES_TEMPLATE
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story:
+          'The three kinds in the order they read in a filter surface: an applied value, an available one, and the control that adds one.'
+      },
+      source: { code: toSfc(IMPORT, TYPES_TEMPLATE) }
+    }
+  }
+}
+
 const SIZES_TEMPLATE = `<div class="flex flex-wrap items-center gap-4">
   <Chip label="Small" size="small" />
   <Chip label="Medium" size="medium" />
@@ -90,7 +124,7 @@ export const Sizes = {
   }
 }
 
-const REMOVABLE_MARKUP = '<Chip label="Label" size="medium" removable />'
+const REMOVABLE_MARKUP = '<Chip label="Label" kind="filled" size="medium" removable />'
 
 export const Removable = {
   args: { removable: true },
@@ -98,13 +132,16 @@ export const Removable = {
   argTypes: { onRemove: { action: 'remove' } },
   parameters: {
     docs: {
-      description: { story: 'Removable chip; the × button emits `remove`.' },
+      description: {
+        story:
+          'Removable chip; the × button emits `remove` immediately. The chip does not hide itself — the consumer decides whether it disappears, stays, or becomes an `outlined` offer.'
+      },
       source: { code: toSfc(IMPORT, REMOVABLE_MARKUP) }
     }
   }
 }
 
-const CLICKABLE_MARKUP = '<Chip label="Label" size="medium" clickable />'
+const CLICKABLE_MARKUP = '<Chip label="Label" kind="filled" size="medium" clickable />'
 
 export const Clickable = {
   args: { clickable: true },
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index 1a0ff278c..2ad534861 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -48,5 +48,10 @@
     "name": "password-requirements",
     "path": "src/components/inputs/field-password/password-requirements.ts",
     "limit": "0.3 KB"
+  },
+  {
+    "name": "chip",
+    "path": "src/components/inputs/chip/chip.vue",
+    "limit": "5 KB"
   }
 ]
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 42426061e..2905b49d7 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -6529,12 +6529,19 @@
           "required": "false",
           "doc": "Fallback text when the default slot is empty."
         },
+        {
+          "name": "kind",
+          "type": "'filled' | 'outlined' | 'dashed'",
+          "default": "'filled'",
+          "required": "false",
+          "doc": "Visual variant. Filled is an applied value, outlined an available one, dashed the control that adds one."
+        },
         {
           "name": "size",
           "type": "'small' | 'medium'",
           "default": "'medium'",
           "required": "false",
-          "doc": "Size token; `small` is a fixed 20px, `medium`'s height is driven by its vertical padding (~30px)."
+          "doc": "Size token; `small` is a fixed 24px, `medium` a fixed 32px."
         },
         {
           "name": "removable",
@@ -6555,7 +6562,7 @@
         {
           "name": "remove",
           "payload": "(event: MouseEvent, label: string)",
-          "notes": "Fires when `removable` is true and the remove button is activated (click / Enter / Space), after the chip's exit (fade-out) animation completes, so the parent removes the chip once it has animated out. `label` is the chip's `label` prop, identifying which chip was removed."
+          "notes": "Fires when `removable` is true and the remove button is activated (click / Enter / Space), **immediately** — the chip does not hide or unmount itself first, so the consumer decides whether the chip disappears, stays, or becomes an `outlined` offer. `label` is the chip's `label` prop, identifying which chip was removed."
         },
         {
           "name": "click",
@@ -6570,9 +6577,11 @@
           "notes": "Chip content; falls back to `label` when empty."
         }
       ],
-      "purpose": "A Chip is a compact, self-contained token that labels a discrete value the user has applied — most often a removable filter on a data view. Unlike `tag` (a read-only status/category badge with severity color coding), a Chip carries no severity and exposes an optional trailing remove control: when `removable` is set, it renders a real `<button>` that emits `remove`, so the consumer can drop the value from a collection. This is the token consumed by the data table's `#filters` slot (`<Chip :label=\"f.label\" removable @remove=\"dropFilter(f)\" />`): each active filter becomes one removable Chip, and dismissing it removes that filter. Reach for a Chip when a value is user-applied and dismissible; reach for `tag` when it is a static status or category indicator.",
+      "purpose": "A Chip is a compact, pill-shaped token that labels a discrete value the user has applied — most often a filter on a data view. Unlike `tag` (a read-only status/category badge with severity color coding), a Chip carries no severity and exposes an optional trailing remove control: when `removable` is set, it renders a real `<button>` that emits `remove`, so the consumer can drop the value from a collection. This is the token consumed by the data table's `#filters` slot (`<Chip :label=\"f.label\" removable @remove=\"dropFilter(f)\" />`): each active filter becomes one removable Chip, and dismissing it removes that filter. Reach for a Chip when a value is user-applied and dismissible; reach for `tag` when it is a static status or category indicator. `kind` covers the three jobs a chip does in a filter surface, so a consumer never restyles the component to get one of them: - **`filled`** — a value that IS applied. The shared surface and border plus `--shadow-sm`: the loudest of the three, because it is state. - **`outlined`** — a value the user COULD apply. Same surface and border, no shadow: it recedes to an offer without becoming disabled, so a filter vocabulary can stay on screen instead of hiding inside a menu. - **`dashed`** — the control that CREATES a chip (\"Add filter\"). A dashed outline is the standing convention for \"add another one of these\", which is what separates the thing that makes filters from the things that are filters. **Presence is the consumer's, not the chip's.** `remove` fires the moment the control is activated; the chip does not animate itself away or unmount itself. A chip that hid itself on remove could only ever serve the one case where removing it also destroys it — a filter bar where a removed value stays on screen as an `outlined` offer was impossible, because the instance stayed invisible forever. Exit motion, if wanted, belongs to whatever owns the list (a `TransitionGroup` around the group).",
       "useWhen": [
         "Represent a selectable or removable token — active filters, multi-select values, entered keywords.",
+        "Represent a value that is *available* but not applied (`kind=\"outlined\"`), so the set of things a view can be narrowed by stays visible.",
+        "Represent the \"add another\" affordance for such a set (`kind=\"dashed\"`).",
         "The element is interactive (clickable / dismissible)."
       ],
       "avoidWhen": [
@@ -6581,7 +6590,8 @@
       ],
       "related": [
         "badge` — static count/short-value indicator.",
-        "tag` — static labelled status/category chip."
+        "tag` — static labelled status/category chip.",
+        "tooltip` — composed by the remove control to name what it removes."
       ],
       "bestPractices": [
         "When removable, expose an accessible remove control with a clear label.",
diff --git a/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue b/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue
index d3a02a701..5cf0c7ffe 100644
--- a/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue
+++ b/packages/webkit/src/components/data/table/table-applied-filters/table-applied-filters.vue
@@ -66,10 +66,22 @@
 </script>
 
 <template>
-  <div
+  <!-- EXIT MOTION LIVES HERE, not in the Chip. `Chip` emits `remove` and stops; it does
+       not hide or unmount itself, because a chip that did could only ever serve the case
+       where removing it also destroys it. This band IS that case — dropping a filter
+       removes it from the table's state, so the chip really does go — which makes this
+       the right owner for the fade. Leaving chips are taken out of flow so the survivors
+       can slide into the gap instead of jumping. -->
+  <TransitionGroup
     v-bind="$attrs"
+    tag="div"
     :data-testid="testId"
     class="flex flex-wrap items-center gap-(--spacing-xs)"
+    move-class="transition-[transform,translate,opacity] duration-moderate-01 ease-productive-entrance motion-reduce:transition-none"
+    enter-from-class="scale-95 opacity-0"
+    enter-active-class="transition-[transform,translate,scale,opacity] duration-fast-02 ease-productive-entrance motion-reduce:transition-none"
+    leave-to-class="scale-95 opacity-0"
+    leave-active-class="absolute transition-[transform,translate,scale,opacity] duration-fast-02 ease-productive-exit motion-reduce:transition-none"
   >
     <template
       v-for="filter in filters"
@@ -91,5 +103,5 @@
         </Chip>
       </slot>
     </template>
-  </div>
+  </TransitionGroup>
 </template>
diff --git a/packages/webkit/src/components/inputs/chip/chip.test.ts b/packages/webkit/src/components/inputs/chip/chip.test.ts
index 45a843460..46cf7036b 100644
--- a/packages/webkit/src/components/inputs/chip/chip.test.ts
+++ b/packages/webkit/src/components/inputs/chip/chip.test.ts
@@ -1,18 +1,12 @@
 import { composeStories } from '@storybook/vue3'
-import { fireEvent, render, waitFor } from '@testing-library/vue'
+import { fireEvent, render } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 
 import * as stories from '../../../../../../apps/storybook/src/stories/components/inputs/chip/Chip.stories'
 import { expectNoA11yViolations } from '../../../test/axe'
 import Chip from './chip.vue'
 
-const { Default, Sizes, Removable } = composeStories(stories)
-
-// @testing-library/vue mounts through @vue/test-utils, which stubs <Transition>
-// by default. The stub skips the JS transition lifecycle, so the component's
-// `@after-leave` (which emits `remove`) never fires. Rendering the REAL
-// transition lets the fade-out run and fire `@after-leave` as it does in prod.
-const realTransition = { global: { stubs: { transition: false } } }
+const { Clickable, Default, Removable, Sizes, Types } = composeStories(stories)
 
 describe('Chip', () => {
   it('renders a <span> root carrying the default data-testid and default size', () => {
@@ -21,6 +15,16 @@ describe('Chip', () => {
     const root = getByTestId('input-chip')
     expect(root.tagName).toBe('SPAN')
     expect(root).toHaveAttribute('data-size', 'medium')
+    expect(root).toHaveAttribute('data-kind', 'filled')
+  })
+
+  it.each([
+    ['filled', 'filled' as const],
+    ['outlined', 'outlined' as const],
+    ['dashed', 'dashed' as const]
+  ])('maps kind=%s onto data-kind', (expected, kind) => {
+    const { getByTestId } = render(Chip, { props: { label: 'K', kind } })
+    expect(getByTestId('input-chip')).toHaveAttribute('data-kind', expected)
   })
 
   it('shows the label prop text via the label sub-node', () => {
@@ -77,7 +81,7 @@ describe('Chip', () => {
       expect(queryByTestId('input-chip__remove')).toBeNull()
     })
 
-    it('renders a remove button with the Remove aria-label and an aria-hidden icon when removable', () => {
+    it('renders a remove button whose accessible name NAMES what it removes', () => {
       const { getByTestId } = render(Chip, { props: { label: 'Removable', removable: true } })
 
       expect(getByTestId('input-chip')).toHaveAttribute('data-removable')
@@ -85,47 +89,87 @@ describe('Chip', () => {
       const removeBtn = getByTestId('input-chip__remove')
       expect(removeBtn.tagName).toBe('BUTTON')
       expect(removeBtn).toHaveAttribute('type', 'button')
-      expect(removeBtn).toHaveAttribute('aria-label', 'Remove')
+      // Four identical "Remove" controls in a row of chips are indistinguishable.
+      expect(removeBtn).toHaveAttribute('aria-label', 'Remove Removable')
 
       const icon = getByTestId('input-chip__remove-icon')
       expect(icon).toHaveAttribute('aria-hidden', 'true')
     })
 
-    it('emits "remove" with the native MouseEvent after the dismiss fade completes', async () => {
-      const { getByTestId, queryByTestId, emitted } = render(Chip, {
-        props: { label: 'Dismiss me', removable: true },
-        ...realTransition
+    it('falls back to a bare "Remove" name when there is no label', () => {
+      const { getByTestId } = render(Chip, {
+        props: { removable: true },
+        slots: { default: 'Slotted' }
       })
 
-      await fireEvent.click(getByTestId('input-chip__remove'))
+      expect(getByTestId('input-chip__remove')).toHaveAttribute('aria-label', 'Remove')
+    })
+
+    it('wraps the remove control in a tooltip carrying the same text', async () => {
+      const { getByTestId } = render(Chip, { props: { label: 'Env', removable: true } })
 
-      // "remove" is emitted from @after-leave, once the leave transition ends.
-      await waitFor(() => {
-        expect(emitted('remove')).toHaveLength(1)
+      const removeBtn = getByTestId('input-chip__remove')
+      // The tooltip wrapper is the button's parent; hovering it reveals the text.
+      await fireEvent.mouseEnter(removeBtn.parentElement as HTMLElement)
+      await new Promise((resolve) => setTimeout(resolve, 350))
+
+      expect(document.body.textContent).toContain('Remove Env')
+    })
+
+    it('emits "remove" immediately with the native MouseEvent and the label', async () => {
+      const { getByTestId, emitted } = render(Chip, {
+        props: { label: 'Dismiss me', removable: true }
       })
-      // Payload is the native MouseEvent forwarded from the button click.
+
+      await fireEvent.click(getByTestId('input-chip__remove'))
+
+      expect(emitted('remove')).toHaveLength(1)
       expect(emitted('remove')[0][0]).toBeInstanceOf(Event)
+      expect(emitted('remove')[0][1]).toBe('Dismiss me')
+    })
 
-      // After the transition, the chip is unmounted.
-      await waitFor(() => {
-        expect(queryByTestId('input-chip')).toBeNull()
-      })
+    it('STAYS MOUNTED after remove — presence belongs to the consumer', async () => {
+      const { getByTestId } = render(Chip, { props: { label: 'Survivor', removable: true } })
+
+      await fireEvent.click(getByTestId('input-chip__remove'))
+
+      // The chip must not hide or unmount itself: a filter bar keeps the field on
+      // screen as an `outlined` offer after its value is dropped, and a self-hiding
+      // chip made that impossible (the instance stayed invisible forever).
+      expect(getByTestId('input-chip')).toBeInTheDocument()
+      expect(getByTestId('input-chip')).toBeVisible()
     })
 
-    it('does not emit "remove" a second time on a repeated click after dismissal starts', async () => {
+    it('emits "remove" once per click, repeatedly', async () => {
       const { getByTestId, emitted } = render(Chip, {
-        props: { label: 'Once', removable: true },
-        ...realTransition
+        props: { label: 'Twice', removable: true }
       })
 
       const removeBtn = getByTestId('input-chip__remove')
       await fireEvent.click(removeBtn)
-      // Second click while already leaving: onRemove guards on visible.value.
       await fireEvent.click(removeBtn)
 
-      await waitFor(() => {
-        expect(emitted('remove')).toHaveLength(1)
+      // No internal "already dismissed" latch swallowing the second activation.
+      expect(emitted('remove')).toHaveLength(2)
+    })
+
+    it('declares no inline transition on the root, so consumer motion is not overridden', () => {
+      const { getByTestId } = render(Chip, { props: { label: 'Motion', removable: true } })
+
+      // An inline `style="transition: …"` beats every class, which silently discarded
+      // any `transition-*` utility a consumer put on the chip.
+      expect(getByTestId('input-chip').style.transition).toBe('')
+    })
+
+    it('does not emit "click" when the remove button is activated', async () => {
+      const { getByTestId, emitted } = render(Chip, {
+        props: { label: 'Both', removable: true, clickable: true }
       })
+
+      await fireEvent.click(getByTestId('input-chip__remove'))
+
+      expect(emitted('remove')).toHaveLength(1)
+      expect(emitted().click).toBeUndefined()
     })
   })
 
@@ -137,6 +181,40 @@ describe('Chip', () => {
     expect(getByTestId('input-chip')).toHaveAttribute('data-size', size)
   })
 
+  describe('clickable', () => {
+    it('is a focusable role=button that emits click with the label', async () => {
+      const { getByTestId, emitted } = render(Chip, {
+        props: { label: 'Pick me', clickable: true }
+      })
+
+      const root = getByTestId('input-chip')
+      expect(root).toHaveAttribute('role', 'button')
+      expect(root).toHaveAttribute('tabindex', '0')
+
+      await fireEvent.click(root)
+      expect(emitted('click')).toHaveLength(1)
+      expect(emitted('click')[0][1]).toBe('Pick me')
+    })
+
+    it.each([['Enter'], [' ']])('activates on %s from the keyboard', async (key) => {
+      const { getByTestId, emitted } = render(Chip, {
+        props: { label: 'Key', clickable: true }
+      })
+
+      await fireEvent.keyDown(getByTestId('input-chip'), { key })
+      expect(emitted('click')).toHaveLength(1)
+    })
+
+    it('emits nothing on activation when not clickable', async () => {
+      const { getByTestId, emitted } = render(Chip, { props: { label: 'Inert' } })
+
+      const root = getByTestId('input-chip')
+      expect(root).not.toHaveAttribute('role')
+      await fireEvent.click(root)
+      expect(emitted().click).toBeUndefined()
+    })
+  })
+
   describe('accessibility', () => {
     it('has no a11y violations for a plain labelled chip', async () => {
       const { container } = render(Chip, { props: { label: 'Accessible' } })
@@ -157,6 +235,13 @@ describe('Chip', () => {
     expect(getByTestId('input-chip')).not.toHaveAttribute('data-removable')
   })
 
+  it('composes the Types story fixture with all three kinds', () => {
+    const { getAllByTestId } = render(Types())
+
+    const kinds = getAllByTestId('input-chip').map((chip) => chip.getAttribute('data-kind'))
+    expect(kinds).toEqual(expect.arrayContaining(['filled', 'outlined', 'dashed']))
+  })
+
   it('composes the Sizes story fixture with both size tokens', () => {
     const { getAllByTestId } = render(Sizes())
 
@@ -170,6 +255,25 @@ describe('Chip', () => {
     const { getByTestId } = render(Removable())
 
     expect(getByTestId('input-chip')).toHaveAttribute('data-removable')
-    expect(getByTestId('input-chip__remove')).toHaveAttribute('aria-label', 'Remove')
+    expect(getByTestId('input-chip__remove')).toHaveAttribute('aria-label', 'Remove Label')
+  })
+
+  it('composes the Clickable story fixture as an interactive root', () => {
+    const { getByTestId } = render(Clickable())
+
+    expect(getByTestId('input-chip')).toHaveAttribute('data-clickable')
+    expect(getByTestId('input-chip')).toHaveAttribute('role', 'button')
+  })
+
+  describe('accessibility of the new kinds', () => {
+    it.each([['outlined' as const], ['dashed' as const]])(
+      'has no a11y violations for a clickable %s chip',
+      async (kind) => {
+        const { container } = render(Chip, {
+          props: { label: 'Offer', kind, clickable: true }
+        })
+        await expectNoA11yViolations(container)
+      }
+    )
   })
 })
diff --git a/packages/webkit/src/components/inputs/chip/chip.vue b/packages/webkit/src/components/inputs/chip/chip.vue
index 7bf1795b4..dd5678735 100644
--- a/packages/webkit/src/components/inputs/chip/chip.vue
+++ b/packages/webkit/src/components/inputs/chip/chip.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { curve, duration } from '@aziontech/theme/animations'
-  import { computed, ref, useAttrs } from 'vue'
+  import { computed, useAttrs } from 'vue'
 
+  import Tooltip from '../../overlay/tooltip/tooltip.vue'
+
+  export type ChipKind = 'filled' | 'outlined' | 'dashed'
   export type ChipSize = 'small' | 'medium'
 
   defineOptions({
@@ -12,7 +14,9 @@
   interface Props {
     /** Fallback text when the default slot is empty. */
     label?: string
-    /** Size token; `small` is a fixed 20px, `medium`'s height is driven by its vertical padding (~30px). */
+    /** Visual variant. Filled is an applied value, outlined an available one, dashed the control that adds one. */
+    kind?: ChipKind
+    /** Size token; `small` is a fixed 24px, `medium` a fixed 32px. */
     size?: ChipSize
     /** When true, renders a trailing remove button that emits remove. */
     removable?: boolean
@@ -22,6 +26,7 @@
 
   const props = withDefaults(defineProps<Props>(), {
     label: '',
+    kind: 'filled',
     size: 'medium',
     removable: false,
     clickable: false
@@ -40,29 +45,20 @@
 
   const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'input-chip')
 
-  // Dismiss motion — same opacity fade-out as the Message component (animations.js tokens).
-  const REMOVE_MS = Number.parseInt(duration['fast-02'], 10)
-  const removeTransitionStyle = {
-    transition: `opacity ${duration['fast-02']} ${curve['productive-exit']}`
-  }
-
-  const visible = ref(true)
-  let pendingRemoveEvent: MouseEvent | undefined
-
+  // One string for the remove control's tooltip AND its accessible name, so what a
+  // pointer user is shown and what a screen-reader user hears cannot drift. Naming the
+  // subject matters most in a row of chips, where four identical "Remove" controls sit
+  // side by side: `label` is what tells them apart.
+  const removeLabel = computed(() => (props.label ? `Remove ${props.label}` : 'Remove'))
+
+  // Presence is the CONSUMER's call: emit and stop. The previous build faded itself to
+  // opacity 0 and only then emitted, which made a chip that survives its own removal
+  // impossible — a filter bar where dropping a value leaves the field behind as an
+  // `outlined` offer kept an instance that was invisible forever. That fade also had to
+  // be an inline `style="transition: opacity …"`, and an inline style beats every class,
+  // so it silently discarded any `transition-*` a consumer put on the root.
   function onRemove(event: MouseEvent) {
-    if (!visible.value) {
-      return
-    }
-
-    pendingRemoveEvent = event
-    visible.value = false
-  }
-
-  function handleAfterLeave() {
-    if (pendingRemoveEvent) {
-      emit('remove', pendingRemoveEvent, props.label)
-      pendingRemoveEvent = undefined
-    }
+    emit('remove', event, props.label)
   }
 
   function onClick(event: MouseEvent) {
@@ -81,59 +77,81 @@
 
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault()
-      emit('click', event, props.label)
+      // Synthesise a REAL DOM click rather than emitting directly. A native <button>
+      // does this, and anything wrapping the chip relies on it: an overlay trigger
+      // (Popover.Trigger, Dropdown.Trigger) opens on the DOM click that bubbles out of
+      // its child, so a chip that only emitted a Vue event worked with the mouse and did
+      // nothing from the keyboard — which ruled the chip out as a trigger, including for
+      // the `dashed` "add one" affordance it is meant to serve. The dispatched click runs
+      // `onClick`, so `click` is still emitted exactly once.
+      ;(event.currentTarget as globalThis.HTMLElement).click()
     }
   }
 </script>
 
 <template>
-  <Transition
-    :duration="{ enter: 0, leave: REMOVE_MS }"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-    leave-active-class="motion-reduce:transition-none"
-    @after-leave="handleAfterLeave"
+  <!-- ALL THREE KINDS SHARE ONE FILL — `--bg-surface` — and differ only in ELEVATION
+       (`filled` carries `--shadow-sm`) and, for `dashed`, the dash. The fill used to be
+       the distinction: `filled` was `--bg-surface-raised` and the other two were
+       transparent. That never shipped as designed on two counts. The raised token is the
+       SAME value as `--bg-surface` in the light theme, so the applied/available contrast
+       it was meant to carry existed in dark only; and the class was written
+       `bg-(--bg-surface-raised )` — the stray space terminates the Tailwind candidate, so
+       it compiled to nothing at all (verified against the v4 compiler) and every `filled`
+       chip was in fact transparent, in both themes, with only its shadow to tell it from
+       an `outlined` one. Giving every kind the real surface is what makes a chip read as a
+       raised object against `--bg-canvas` at all; the shadow then does the one job it was
+       always doing alone. -->
+  <span
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-kind="kind"
+    :data-size="size"
+    :data-removable="removable || null"
+    :data-clickable="clickable || null"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    :class="attrs.class"
+    class="relative inline-flex w-fit items-center justify-center overflow-hidden rounded-full border border-solid border-(--border-default) bg-(--bg-surface) text-(--text-default) leading-none transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-entrance motion-reduce:transition-none text-label-sm before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--bg-hover) before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance motion-reduce:before:transition-none data-[kind=filled]:shadow-(--shadow-sm) data-[kind=dashed]:border-dashed data-[size=small]:h-6 data-[size=small]:px-(--spacing-xs) data-[size=medium]:h-8 data-[size=medium]:px-(--spacing-sm) data-[size=small]:data-[removable]:pr-(--spacing-xxs) data-[size=medium]:data-[removable]:pr-(--spacing-xxs) data-[clickable]:cursor-pointer data-[clickable]:hover:border-(--border-strong) data-[clickable]:hover:before:opacity-100 data-[clickable]:active:before:opacity-100 data-[clickable]:active:border-(--border-strong) data-[clickable]:focus-visible:outline-none data-[clickable]:focus-visible:ring-2 data-[clickable]:focus-visible:ring-(--ring-color) data-[clickable]:focus-visible:ring-offset-2 data-[clickable]:focus-visible:ring-offset-(--bg-canvas)"
+    @click="onClick"
+    @keydown="onKeydown"
   >
     <span
-      v-if="visible"
-      v-bind="$attrs"
-      :data-testid="testId"
-      :data-size="size"
-      :data-removable="removable || null"
-      :data-clickable="clickable || null"
-      :role="clickable ? 'button' : undefined"
-      :tabindex="clickable ? 0 : undefined"
-      :style="removeTransitionStyle"
-      :class="attrs.class"
-      class="relative inline-flex items-center justify-center overflow-hidden border border-(--border-default) border-(length:--border-width-default) bg-(--bg-surface-raised) text-(--text-default) shadow-(--shadow-sm) leading-none rounded-(--shape-elements) before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--bg-hover) before:opacity-0 before:content-[''] before:transition-opacity before:duration-fast-02 before:ease-productive-entrance motion-reduce:before:transition-none data-[size=medium]:text-label-md data-[size=small]:text-label-sm data-[size=medium]:leading-none data-[size=small]:leading-none data-[size=small]:h-5 data-[size=medium]:py-(--spacing-xs) data-[size=medium]:px-(--spacing-sm) data-[size=small]:p-(--spacing-xs) data-[size=medium]:data-[removable]:pr-(--spacing-xs) data-[size=small]:data-[removable]:pr-(--spacing-xxs) data-[clickable]:cursor-pointer data-[clickable]:hover:before:opacity-100 data-[clickable]:active:before:opacity-100 data-[clickable]:active:border-(--border-strong) data-[clickable]:focus-visible:outline-none data-[clickable]:focus-visible:ring-2 data-[clickable]:focus-visible:ring-(--ring-color) data-[clickable]:focus-visible:ring-offset-2 data-[clickable]:focus-visible:ring-offset-(--bg-canvas)"
-      @click="onClick"
-      @keydown="onKeydown"
+      class="relative z-(--z-input-field) inline-flex min-w-0 items-center justify-center gap-(--spacing-xxs)"
     >
+      <slot v-if="$slots['default']" />
       <span
-        class="relative z-(--z-input-field) inline-flex items-center justify-center gap-(--spacing-xxs)"
+        v-else-if="label"
+        :data-testid="`${testId}__label`"
+        class="truncate"
+      >
+        {{ label }}
+      </span>
+      <!-- 24px at medium is the WCAG 2.5.8 minimum for a pointer target; the previous
+           14px glyph met neither that nor the visual weight of the boxes around it.
+           `small` keeps a 16px control — a justified deviation for a 24px token, where
+           the chip itself stays the visible affordance. -->
+      <Tooltip
+        v-if="removable"
+        :text="removeLabel"
+        placement="top"
       >
-        <slot v-if="$slots['default']" />
-        <span
-          v-else-if="label"
-          :data-testid="`${testId}__label`"
-        >
-          {{ label }}
-        </span>
         <button
-          v-if="removable"
           type="button"
-          aria-label="Remove"
+          :aria-label="removeLabel"
           :data-testid="`${testId}__remove`"
-          class="inline-flex shrink-0 items-center justify-center rounded-(--shape-elements) text-(--text-default) transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-(--bg-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas)"
+          class="inline-flex shrink-0 items-center justify-center rounded-full text-(--text-muted) transition-colors duration-fast-02 ease-productive-entrance motion-reduce:transition-none hover:bg-(--bg-hover) hover:text-(--text-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-canvas) data-[size=medium]:size-6 data-[size=small]:size-4"
+          :data-size="size"
           @click.stop="onRemove"
         >
           <i
-            class="pi pi-times flex shrink-0 items-center size-[14px]"
+            class="pi pi-times flex shrink-0 items-center size-[14px] data-[size=small]:size-[10px]"
+            :data-size="size"
             aria-hidden="true"
             :data-testid="`${testId}__remove-icon`"
           />
         </button>
-      </span>
+      </Tooltip>
     </span>
-  </Transition>
+  </span>
 </template>