vuetiwatch 0.1.1 → 0.2.0

package/README.md

@@ -7,11 +7,13 @@
 🎨 Free, plug-and-play themes for **[Vuetify 4](https://vuetifyjs.com/)** — what [Bootswatch](https://bootswatch.com/)
 is to Bootstrap.
 
-**[See all fourteen themes →](https://j-tap.github.io/vuetiwatch/)**
+[![The same page in two Vuetify 4 themes — Lux and Morph](https://raw.githubusercontent.com/j-tap/vuetiwatch/main/docs/playground-themes.webp)](https://j-tap.github.io/vuetiwatch/)
 
-Vuetify ships one look. Vuetiwatch ships fourteen, and they differ in more
-than hue: radius, border weight, density, component variants, typography and
-icons all move together.
+**[See all nineteen themes →](https://j-tap.github.io/vuetiwatch/)**
+
+Vuetify ships one look. Vuetiwatch ships nineteen, and they differ in more
+than hue: radius, border weight, density, component variants, typography,
+icons and motion all move together.
 
 ```sh
 npm i vuetiwatch      # or: bun add / yarn add / pnpm add
@@ -24,9 +26,13 @@ npm i vuetiwatch      # or: bun add / yarn add / pnpm add
 | `classic` | light | Stock Vuetify. Material Design, Roboto, familiar elevation |
 | `paper` | light | Flat editorial — warm paper, ink accents, hairline borders, serif headings |
 | `slate` | light | Dense dashboard — muted slate blue, compact density, outlined cards |
+| `atlas` | light | Calm admin — soft neutrals, one cool accent, dense tables, hairlines not shadows |
+| `atlasDark` | dark | The same panel after dark — soft greys, never pure black |
+| `atlasSepia` | light | The same panel on warm paper and brown ink, for tired eyes |
 | `calm` | light | Low contrast, desaturated naturals, no shadows, a lot of air |
 | `lux` | light | Editorial luxury — hairline rules, wide tracking, small caps, muted gold |
 | `soft` | light | Pastel and generous — large radii, diffuse tinted shadows, hearts for stars |
+| `candy` | light | Plush and pillowy — warm cream, padded shapes, controls that squash |
 | `clay` | light | Inflated pastel shapes with a triple shadow. Toy-like |
 | `morph` | light | Neumorphic — one continuous surface, shaped only by light and shadow |
 | `sketchy` | light | Hand-drawn wobble and pencil greys, for mockups and mirth |
@@ -36,7 +42,14 @@ npm i vuetiwatch      # or: bun add / yarn add / pnpm add
 | `aurora` | dark | Iridescent gradients on near-black — the showcase theme |
 | `neon` | dark | Terminal black, cyan and magenta glow, zero radius, monospace headings |
 
-## Setup
+`classic` is the control. It opts out of the core stylesheet entirely — not
+one rule in this package matches a page running it — so switching to it
+shows exactly what the other eighteen add.
+
+## How to install and apply a theme in Vuetify 4
+
+Register the themes in `createVuetify`, then add the plugin. `defaultTheme`
+picks the one that loads; `useTheme().change(name)` switches at runtime.
 
 **1. Register the themes.** They are plain Vuetify `ThemeDefinition`s.
 
@@ -72,27 +85,101 @@ treatment.
 
 The plugin swaps Vuetify's **global component defaults** when the theme
 changes, since those are global rather than per-theme. Your own
-`createVuetify({ defaults })` is preserved; theme defaults layer on top.
+`createVuetify({ defaults })` is preserved; theme defaults layer on top. It
+also exposes `useVuetiwatch()` — see [switching themes](#switching-themes) —
+and accepts `defaults`, `attribute` and `transitions` to turn any of it off.
 
 ### Switching themes
 
-Standard Vuetify:
+Vuetify's own `theme.change()` works as it always did. The plugin adds one
+thing on top of it:
 
 ```vue
 <script setup lang="ts">
-import { useTheme } from 'vuetify'
-import { themeList } from 'vuetiwatch'
+import { useVuetiwatch } from 'vuetiwatch'
 
-const theme = useTheme()
+const { themes, current, change } = useVuetiwatch()
 </script>
 
 <template>
-  <button v-for="t in themeList" :key="t.name" @click="theme.change(t.name)">
+  <button v-for="t in themes" :key="t.name" @click="change(t.name, $event)">
     {{ t.meta.title }}
   </button>
 </template>
 ```
 
+`useVuetiwatch()` also returns `siblings`: the variants of the theme that is
+running, or an empty array when it has none. A theme declares what it belongs
+to through `meta.family`, so a light/dark switch never has to know which
+themes go together:
+
+```vue
+<script setup lang="ts">
+const { siblings, current, change } = useVuetiwatch()
+</script>
+
+<template>
+  <v-btn-toggle v-if="siblings.length > 1" :model-value="current?.name">
+    <v-btn
+      v-for="t in siblings"
+      :key="t.name"
+      :value="t.name"
+      :text="t.meta.variant"
+      @click="change(t.name, $event)"
+    />
+  </v-btn-toggle>
+</template>
+```
+
+A theme can also offer **accents** — named colour sets it repaints itself
+in, declared in `meta.accents` and applied through `setAccent()`:
+
+```vue
+<script setup lang="ts">
+const { accents, accent, setAccent } = useVuetiwatch()
+</script>
+
+<template>
+  <button
+    v-for="item in accents"
+    :key="item.id"
+    :style="{ background: item.colors.primary }"
+    @click="setAccent(item.id)"
+  />
+</template>
+```
+
+Presets rather than a colour picker, because every one of them is measured
+against the theme's ground — the Atlas accents run 5.8:1 to 8.3:1 on filled
+controls across all three variants, which a dragged slider cannot promise.
+The id is shared across the family, so the choice survives a light/dark
+switch: each variant carries its own tone of the same accent.
+
+`atlas`, `atlasDark` and `atlasSepia` are one family today. Vuetify's
+`ThemeDefinition` is a single mode by definition, so a registered pair is
+how a light/dark switch is built — the design lives in one place and only
+the ground changes.
+
+Pass the event and the new theme opens as a circle from the control that was
+pressed, through the View Transitions API — Baseline since October 2025.
+Where the API is missing, where the visitor asked for reduced motion, or
+where you passed `transitions: false`, the same call switches instantly, so
+it is always safe to use. Each theme sets its own pace through
+`vw-theme-transition`: `neon` repaints in 180 ms, `calm` takes 560.
+
+### Motion
+
+Movement is the fourth axis these themes travel on, after colour, shape and
+type. `brutalist` snaps in two steps, `lux` eases over a quarter-second,
+`candy` overshoots and settles — and a checkbox, a toggle button or a rating
+star pops when it turns on, the way a like button does.
+
+None of it costs a byte of JavaScript: themes state a character in a handful
+of variables and the core layer spends it on the same interactions
+everywhere. Only `transform` is animated, so it stays on the compositor.
+`prefers-reduced-motion: reduce` zeroes the variables themselves in one
+place, which covers every theme at once — including one you wrote yourself.
+
 ### Fonts
 
 Themes name the families they want but never load them — that stays your
@@ -107,7 +194,8 @@ fallback, so skipping this degrades gracefully rather than breaking.
 ### Shipping only a few themes
 
 Pass just those to the plugin and import their stylesheets instead of the
-combined one. A single-theme app drops from about 9.5 kB gzipped to 3.4 kB.
+combined one. The whole stylesheet is about 6.6 kB gzipped; the core layer
+plus one theme is under 3 kB.
 
 ```ts
 import { createVuetiwatch, paper } from 'vuetiwatch'
@@ -166,29 +254,120 @@ Vuetify's own, it reads:
 
 | Variable | Default | Effect |
 | --- | --- | --- |
-| `vw-radius` | `4px` | Fields, alerts, lists, menus, snackbars, slider track |
-| `vw-radius-btn` | `vw-radius` | Buttons only, for themes whose controls are capsules |
+| `vw-radius` | `4px` | Fields, alerts, lists, menus, snackbars, slider track, progress bars |
+| `vw-radius-btn` | `vw-radius` | Buttons and button groups, for themes whose controls are capsules |
 | `vw-radius-lg` | `vw-radius` | Cards, tables, expansion panels |
-| `vw-radius-chip` | `9999px` | Chips |
+| `vw-radius-chip` | `9999px` | Chips and badges |
 | `vw-radius-thumb` | `50%` | Slider thumb |
+| `vw-radius-icon-btn` | `50%` | Icon buttons, for themes with no curve anywhere |
+| `vw-radius-avatar` / `-dot` | `50%` | Avatars, and the dot on a timeline |
 | `vw-border-width` | `thin` | Outlined variants and field outlines |
+| `vw-outlined-fill` | `surface` | What an outlined card paints — `transparent` for themes whose surface is the ground |
+| `vw-panel-border` / `-shadow` / `-fill` | Vuetify's | A panel standing on its own: a bare list, sheet, banner or table |
+| `vw-panel-image` / `-filter` | none | The same panel's gradient and backdrop filter, for the gradient and glass themes |
+| `vw-outline-opacity` | `border-opacity` | The line around an outlined card, which Vuetify draws in the ink of its own text |
+| `vw-skeleton-opacity` | clamped | The bones of a loading placeholder, which Vuetify ties to `border-opacity` |
+| `vw-field-border-opacity` | `0.38` | The resting outline of a field — Vuetify's default reads about 2.3:1 |
 | `vw-btn-weight` / `-tracking` / `-transform` | Vuetify's | Button typography |
 | `vw-heading-weight` / `-tracking` / `-transform` | Vuetify's | Headings and the display / headline / title-large scale |
 | `vw-th-weight` / `-tracking` / `-transform` | Vuetify's | Table headers |
+| `vw-numeric` | `normal` | Figures in tables and pagination — `tabular-nums` lines columns up |
 | `vw-tab-slider-height` | `2px` | Active tab indicator |
+| `vw-tab-size` | `0.875rem` | Tab labels, which Vuetify builds out of buttons and sizes like body text |
+| `vw-avatar-ratio` | `0.4` | Initials inside an avatar, as a share of its height |
+| `vw-timeline-line` / `-width` | hairline | The timeline connector — any background, so a repeating gradient makes it dashed |
+| `vw-timeline-line-opacity` | `border-opacity` | The connector's fade, when `vw-timeline-line` is left alone |
+| `vw-relief-inset` | `0` | Padding inside chip groups, room for controls that lift |
 | `vw-overlay-shadow` / `-border` | Vuetify's | Menus, dialogs and tooltips |
 | `vw-list-bar` / `-color` | `0` | Accent bar on the active list item, leading edge |
 | `vw-pagination-active-color` / `-opacity` | Vuetify's | The current page |
 | `vw-link-decoration` | `underline` | Bare `<a>` elements |
 | `font-body` / `font-heading` | Roboto | Native to Vuetify 4 |
-
-An explicit `rounded` prop always wins over `vw-radius`.
+| `vw-gradient` / `-btn` | none | A theme's gradient, and the deeper one used where text sits on it |
+| `vw-motion-duration` / `-ease` | `160ms` / standard | Press, hover lift, tab slider |
+| `vw-press-scale` / `-shift` | `0.98` / `0` | How far a control squashes and sinks under a press |
+| `vw-hover-lift` | `0` | How far a linked card rises on hover |
+| `vw-pop-scale` / `-duration` | `1.18` / `220ms` | The overshoot when a checkbox, toggle or star turns on |
+| `vw-focus-ring` / `-offset` | `2px solid primary` / `2px` | `:focus-visible` on buttons, tabs, chips, list items |
+| `vw-theme-transition` | `420ms` | The wipe when `change()` switches theme |
 
 `font-heading` reaches `text-display-*`, `text-headline-*`, `text-title-large`
 and bare `<h1>`–`<h6>`; the rest of the scale takes `font-body`. Vuetify 4
 uses the Material 3 names — `text-h1`…`text-h6`, `text-body-1`, `text-caption`
 and `text-overline` no longer exist.
 
+### What wins
+
+These variables set the *default* a component draws with — the same job
+Vuetify's SASS variables do at build time, moved to runtime so the look can
+be swapped without recompiling. Vuetify draws the same line itself: it ships
+`$button-border-radius` for the default and `$button-rounded-border-radius`
+for what the `rounded` prop asks for.
+
+Four levels, loudest first:
+
+| | Set by | Example |
+| --- | --- | --- |
+| **1. A prop or utility class** | the component's author | `<v-card rounded="xl">`, `class="rounded-0"` |
+| **2. The theme's component defaults** | the theme | `candy` making every `VBtn` `size="large"` |
+| **3. Your `createVuetify({ defaults })`** | you, once | `VDataTable: { hover: true }` |
+| **4. Vuetify** | the framework | the 4px corner every component ships with |
+
+Level 1 is why every rule in the core layer carries `:not([class*='rounded-'])`:
+a component whose author asked for a corner keeps it whatever the theme says.
+Level 2 sits above level 3 on purpose — a theme that could not change a
+variant would not be a theme — and `createVuetiwatch(vuetify, { defaults:
+'under' })` swaps the two when the app owns a decision the theme also has an
+opinion on, an admin panel with its own density switch being the usual case.
+It overrides only the keys it actually
+sets, so the rest of your configuration survives every switch, including
+defaults you assign at runtime. Level 4 holds because every declaration
+falls back to Vuetify's own value, which is why importing the stylesheet
+cannot change an app that is not running a Vuetiwatch theme.
+
+A fifth level sits underneath, in CSS rather than in props: your own
+stylesheet. Vuetify ships every rule inside `@layer vuetify-*`, and an
+unlayered rule outranks a layered one whatever its specificity, so the core
+layer needs no weight of its own to beat it — and takes none. Its scope is a
+`:where()`, which leaves each rule weighing the component selector and its
+guard, two classes at most. Anything with a second selector of its own clears
+it:
+
+```css
+/* wins over the theme */
+.v-application .v-btn { border-radius: 0 }
+```
+
+A theme file, which carries its own theme class, clears it the same way —
+which is what makes a theme an opinion over the defaults rather than a peer
+of them. The one exception is marked as such in the stylesheet: a short block
+of corrections that has to outrank a theme, because a theme's own rule does
+damage in a context it never considered — a per-button shadow drawing a seam
+down every join of a button group.
+
+The practical version: if a component looks wrong under a theme, look for a
+`rounded`, `variant`, `elevation` or `density` prop on it first. That prop is
+doing exactly what it is meant to do, and the theme is standing aside.
+
+### Contrast
+
+Vuetify picks the label colour for a filled control automatically, by
+whichever of black or white scores higher on [APCA](https://github.com/Myndex/apca-w3) —
+the WCAG 3 draft algorithm. It optimises, but it does not clear a bar: on
+Vuetify's own light theme the filled `warning` button lands at 2.4:1 against
+WCAG 2's 4.5:1 for label text.
+
+Every theme here is measured against both, and states `on-*` explicitly
+wherever the automatic pick falls short — which is the documented way to
+control it. Where the two models disagreed the colour was deepened a few
+points of lightness instead of flipping the label, so the hue survives and
+both models pass; `aurora` keeps its bright gradient for decoration and
+carries a deeper one behind anything with text on it.
+
+The result: in all eighteen non-stock themes every filled control clears 4.5:1.
+`classic` does not, and that is the point of it — it is stock Vuetify,
+including this.
+
 ### Icons
 
 Vuetify's icon *set* is global and cannot vary per theme, but which glyph a

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-export { aurora, brutalist, calm, classic, clay, darkGlass, liquidGlass, lux, morph, neon, paper, sketchy, slate, soft, } from './themes/index.js';
+export { atlas, atlasDark, atlasSepia, aurora, brutalist, calm, candy, classic, clay, darkGlass, graphite, liquidGlass, lux, morph, neon, paper, sketchy, slate, soft, } from './themes/index.js';
 export { themeList, vuetiwatchDefaults, vuetiwatchMeta, vuetiwatchThemes, } from './registry.js';
-export { createVuetiwatch } from './plugin.js';
+export { createVuetiwatch, useVuetiwatch } from './plugin.js';
 export { defineTheme } from './util/defineTheme.js';
 export { bars, combine, controls, fields, icons, surfaces, tables } from './util/defaults.js';
-export type { VuetiwatchOptions } from './plugin.js';
+export type { Vuetiwatch, VuetiwatchOptions } from './plugin.js';
 export type { VuetiwatchThemeName } from './registry.js';
 export type { DefineThemeOptions } from './util/defineTheme.js';
 export type { VuetiwatchIcons } from './util/defaults.js';
-export type { VuetiwatchDefaults, VuetiwatchMeta, VuetiwatchTheme, } from './types.js';
+export type { VuetiwatchAccent, VuetiwatchDefaults, VuetiwatchMeta, VuetiwatchTheme, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,WAAW,EACX,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAE7F,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACzD,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,eAAe,GAChB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAE7F,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACzD,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,eAAe,GAChB,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -1,6 +1,6 @@
-export { aurora, brutalist, calm, classic, clay, darkGlass, liquidGlass, lux, morph, neon, paper, sketchy, slate, soft, } from './themes/index.js';
+export { atlas, atlasDark, atlasSepia, aurora, brutalist, calm, candy, classic, clay, darkGlass, graphite, liquidGlass, lux, morph, neon, paper, sketchy, slate, soft, } from './themes/index.js';
 export { themeList, vuetiwatchDefaults, vuetiwatchMeta, vuetiwatchThemes, } from './registry.js';
-export { createVuetiwatch } from './plugin.js';
+export { createVuetiwatch, useVuetiwatch } from './plugin.js';
 export { defineTheme } from './util/defineTheme.js';
 export { bars, combine, controls, fields, icons, surfaces, tables } from './util/defaults.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,WAAW,EACX,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/plugin.d.ts

@@ -1,5 +1,58 @@
-import type { Plugin } from 'vue';
-import type { VuetiwatchTheme } from './types.js';
+import type { ComputedRef, Plugin, Ref } from 'vue';
+import type { VuetiwatchAccent, VuetiwatchTheme } from './types.js';
+/**
+ * Anything that might carry viewport coordinates. Partial on purpose: a
+ * list item hands its handler `MouseEvent | KeyboardEvent`, and a keyboard
+ * activation should not have to be filtered out by every caller.
+ */
+interface Point {
+    clientX?: number;
+    clientY?: number;
+}
+export interface Vuetiwatch {
+    /** The themes handed to the plugin, in the order a picker should show them. */
+    themes: readonly VuetiwatchTheme[];
+    /** The active theme, or `undefined` while a theme outside the list is on. */
+    current: ComputedRef<VuetiwatchTheme | undefined>;
+    /**
+     * The variants of the active theme's family, in registration order, or an
+     * empty array when it has none. This is what a light/dark switch iterates
+     * over — the family is declared in each theme's `meta`, so the app never
+     * has to know which themes belong together.
+     */
+    siblings: ComputedRef<readonly VuetiwatchTheme[]>;
+    /**
+     * Switches theme through a view transition when the browser has one.
+     *
+     * Pass the event that triggered it and the new theme opens as a circle
+     * from the pointer; without one it opens from the centre of the screen.
+     * Falls back to an instant change where the API is missing, where the
+     * user asked for reduced motion, or where `transitions` is off — so it is
+     * always safe to call.
+     */
+    change: (name: string, event?: Point | Event | null) => void;
+    /** The accents the active theme offers, or an empty array. */
+    accents: ComputedRef<readonly VuetiwatchAccent[]>;
+    /** The accent in use, by id. `undefined` until one is chosen. */
+    accent: Readonly<Ref<string | undefined>>;
+    /**
+     * Repaints the theme in one of its accents.
+     *
+     * The colours are written into Vuetify's live definitions, which are
+     * reactive, so every surface follows within the frame. It is applied to
+     * the whole family at once — each variant has its own tone of the same
+     * accent — so the choice survives a light/dark switch.
+     */
+    setAccent: (id: string) => void;
+}
+/**
+ * The plugin's API, for switching themes and reading the active one.
+ *
+ * ```ts
+ * const { themes, current, change } = useVuetiwatch()
+ * ```
+ */
+export declare function useVuetiwatch(): Vuetiwatch;
 export interface VuetiwatchOptions {
     /**
      * Themes to manage — normally the package's `themeList`, or just the ones
@@ -7,20 +60,36 @@ export interface VuetiwatchOptions {
      *
      * Required rather than defaulted, because a default would mean importing
      * the registry here, and a static import cannot be shaken out: every app
-     * would carry all fourteen themes even after passing one.
+     * would carry all sixteen themes even after passing one.
      */
     themes: readonly VuetiwatchTheme[];
     /**
-     * Apply each theme's component defaults on top of your own.
-     * @default true
+     * Apply each theme's component defaults.
+     *
+     * - `'over'` (or `true`) — the theme's values win, so a theme can restyle
+     *   a component the app never thought about.
+     * - `'under'` — yours win, and the theme fills in only what you left
+     *   unset. Use it when the app owns a decision the theme also has an
+     *   opinion on: an admin panel with its own density switch, say.
+     * - `false` — no theme defaults at all.
+     *
+     * @default 'over'
      */
-    defaults?: boolean;
+    defaults?: boolean | 'over' | 'under';
     /**
      * Mirror the active theme name onto `<html data-vuetiwatch="...">`, so
      * you can hang your own CSS off it.
      * @default true
      */
     attribute?: boolean;
+    /**
+     * Animate theme changes made through `useVuetiwatch().change()`.
+     *
+     * Only that call is affected — an app switching through Vuetify's own
+     * `theme.change()` keeps the instant swap it has today.
+     * @default true
+     */
+    transitions?: boolean;
 }
 /**
  * Keeps Vuetify's global component defaults in sync with the active theme.
@@ -34,8 +103,9 @@ export interface VuetiwatchOptions {
  * Install it after Vuetify:
  *
  * ```ts
- * app.use(vuetify).use(createVuetiwatch(vuetify))
+ * app.use(vuetify).use(createVuetiwatch(vuetify, { themes: themeList }))
  * ```
  */
 export declare function createVuetiwatch(vuetify: unknown, options: VuetiwatchOptions): Plugin;
+export {};
 //# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,YAAY,CAAA;AAarE,MAAM,WAAW,iBAAiB;IAChC;;;;;;;OAOG;IACH,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,iBAAiB,GACzB,MAAM,CA2DR"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAsB,eAAe,EAAE,MAAM,YAAY,CAAA;AAmBvF;;;;GAIG;AACH,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAcD,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,6EAA6E;IAC7E,OAAO,EAAE,WAAW,CAAC,eAAe,GAAG,SAAS,CAAC,CAAA;IACjD;;;;;OAKG;IACH,QAAQ,EAAE,WAAW,CAAC,SAAS,eAAe,EAAE,CAAC,CAAA;IACjD;;;;;;;;OAQG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5D,8DAA8D;IAC9D,OAAO,EAAE,WAAW,CAAC,SAAS,gBAAgB,EAAE,CAAC,CAAA;IACjD,iEAAiE;IACjE,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAA;IACzC;;;;;;;OAOG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAID;;;;;;GAMG;AACH,wBAAgB,aAAa,IAAK,UAAU,CAW3C;AAMD,MAAM,WAAW,iBAAiB;IAChC;;;;;;;OAOG;IACH,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,iBAAiB,GACzB,MAAM,CAiJR"}

package/dist/plugin.js

@@ -1,5 +1,23 @@
-import { watch } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { combine } from './util/defaults.js';
+const injectionKey = Symbol.for('vuetiwatch');
+/**
+ * The plugin's API, for switching themes and reading the active one.
+ *
+ * ```ts
+ * const { themes, current, change } = useVuetiwatch()
+ * ```
+ */
+export function useVuetiwatch() {
+    const api = inject(injectionKey);
+    if (!api) {
+        throw new Error('[vuetiwatch] useVuetiwatch() was called before the plugin was installed. ' +
+            'Add app.use(createVuetiwatch(vuetify, { themes })) first.');
+    }
+    return api;
+}
+const prefersReducedMotion = () => typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
 /**
  * Keeps Vuetify's global component defaults in sync with the active theme.
  *
@@ -12,41 +30,112 @@ import { combine } from './util/defaults.js';
  * Install it after Vuetify:
  *
  * ```ts
- * app.use(vuetify).use(createVuetiwatch(vuetify))
+ * app.use(vuetify).use(createVuetiwatch(vuetify, { themes: themeList }))
  * ```
  */
 export function createVuetiwatch(vuetify, options) {
-    const { themes, defaults: applyDefaults = true, attribute = true, } = options;
+    const { themes, defaults: applyDefaults = true, attribute = true, transitions = true, } = options;
     // Only the defaults are ever read here, so the closure holds those rather
     // than the whole theme objects — palettes and metadata for every theme
     // would otherwise stay pinned for the life of the app.
     const defaultsByName = new Map(themes.map(theme => [theme.name, theme.defaults]));
     return {
-        install(_app) {
+        install(app) {
             const instance = vuetify;
             if (!instance?.theme?.global?.name) {
                 throw new Error('[vuetiwatch] createVuetiwatch() expects the object returned by createVuetify(). ' +
                     'Install it after Vuetify: app.use(vuetify).use(createVuetiwatch(vuetify))');
             }
-            // Whatever the app configured itself — theme defaults layer on top of it.
-            const userDefaults = instance.defaults.value ?? {};
-            // The merge is a pure function of the theme name, so it is computed at
-            // most once per theme however often the app switches.
-            const merged = new Map();
+            /**
+             * Whatever the app configured itself — theme defaults layer on top.
+             *
+             * Re-read rather than captured once, because `defaults` is a public
+             * ref an app is allowed to reassign at runtime. Anything we did not
+             * write ourselves is the app speaking, and becomes the new base;
+             * without the check, the first theme change after such a reassignment
+             * would quietly throw the app's own defaults away.
+             */
+            let userDefaults = instance.defaults.value ?? {};
+            let applied;
             const defaultsFor = (name) => {
+                if (applied && instance.defaults.value !== applied) {
+                    userDefaults = instance.defaults.value ?? {};
+                }
                 const themeDefaults = defaultsByName.get(name);
                 if (!themeDefaults)
                     return userDefaults;
-                let result = merged.get(name);
-                if (!result) {
-                    result = combine(userDefaults, themeDefaults);
-                    merged.set(name, result);
+                return applyDefaults === 'under'
+                    ? combine(themeDefaults, userDefaults)
+                    : combine(userDefaults, themeDefaults);
+            };
+            const apply = (name) => {
+                if (instance.theme.change)
+                    instance.theme.change(name);
+                else
+                    instance.theme.global.name.value = name;
+            };
+            const change = (name, event) => {
+                const doc = typeof document !== 'undefined'
+                    ? document
+                    : undefined;
+                if (!transitions || !doc?.startViewTransition || prefersReducedMotion()) {
+                    apply(name);
+                    return;
+                }
+                /**
+                  * Viewport coordinates, because the transition pseudo-elements are
+                  * laid out against the viewport rather than against any element.
+                  *
+                  * A click synthesised by the keyboard reports 0/0, which would open
+                  * the wipe from the corner of the screen rather than from anything
+                  * the user can see — those fall back to the centre.
+                  */
+                const root = doc.documentElement;
+                const point = event && 'clientX' in event ? event : undefined;
+                const fromPointer = !!point?.clientX || !!point?.clientY;
+                root.style.setProperty('--vw-origin-x', fromPointer ? `${point?.clientX ?? 0}px` : '50%');
+                root.style.setProperty('--vw-origin-y', fromPointer ? `${point?.clientY ?? 0}px` : '50%');
+                /**
+                  * A transition interrupted by the next one rejects `ready` and
+                  * `finished`. Nothing here awaits them, so the rejection would
+                  * surface as an unhandled one in the console the first time
+                  * somebody clicks twice quickly — which is exactly what a theme
+                  * picker invites.
+                  */
+                const transition = doc.startViewTransition(() => { apply(name); });
+                transition?.ready?.catch(() => { });
+                transition?.finished?.catch(() => { });
+            };
+            const current = computed(() => themes.find(theme => theme.name === instance.theme.global.name.value));
+            const accent = ref();
+            const setAccent = (id) => {
+                const definitions = instance.theme.themes?.value;
+                if (!definitions)
+                    return;
+                for (const theme of themes) {
+                    const preset = theme.meta.accents?.find(item => item.id === id);
+                    const colors = definitions[theme.name]?.colors;
+                    if (preset && colors)
+                        Object.assign(colors, preset.colors);
                 }
-                return result;
+                accent.value = id;
             };
+            app.provide(injectionKey, {
+                themes,
+                current,
+                accents: computed(() => current.value?.meta.accents ?? []),
+                accent,
+                setAccent,
+                siblings: computed(() => {
+                    const family = current.value?.meta.family;
+                    return family ? themes.filter(theme => theme.meta.family === family) : [];
+                }),
+                change,
+            });
             watch(() => instance.theme.global.name.value, name => {
                 if (applyDefaults) {
-                    instance.defaults.value = defaultsFor(name);
+                    applied = defaultsFor(name);
+                    instance.defaults.value = applied;
                 }
                 if (attribute && typeof document !== 'undefined') {
                     document.documentElement.setAttribute('data-vuetiwatch', name);

package/dist/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAG3B,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAmC5C;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAAgB,EAChB,OAA0B;IAE1B,MAAM,EACJ,MAAM,EACN,QAAQ,EAAE,aAAa,GAAG,IAAI,EAC9B,SAAS,GAAG,IAAI,GACjB,GAAG,OAAO,CAAA;IAEX,0EAA0E;IAC1E,uEAAuE;IACvE,uDAAuD;IACvD,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEjF,OAAO;QACL,OAAO,CAAE,IAAS;YAChB,MAAM,QAAQ,GAAG,OAAsB,CAAA;YAEvC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;gBACnC,MAAM,IAAI,KAAK,CACb,kFAAkF;oBAClF,2EAA2E,CAC5E,CAAA;YACH,CAAC;YAED,0EAA0E;YAC1E,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAA;YAElD,uEAAuE;YACvE,sDAAsD;YACtD,MAAM,MAAM,GAAG,IAAI,GAAG,EAA8B,CAAA;YACpD,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;gBACnC,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;gBAE9C,IAAI,CAAC,aAAa;oBAAE,OAAO,YAAY,CAAA;gBAEvC,IAAI,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;gBAE7B,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,MAAM,GAAG,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;oBAC7C,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;gBAC1B,CAAC;gBAED,OAAO,MAAM,CAAA;YACf,CAAC,CAAA;YAED,KAAK,CACH,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EACtC,IAAI,CAAC,EAAE;gBACL,IAAI,aAAa,EAAE,CAAC;oBAClB,QAAQ,CAAC,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;gBAC7C,CAAC;gBAED,IAAI,SAAS,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;oBACjD,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAA;gBAChE,CAAC;YACH,CAAC,EACD,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"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"}

package/dist/registry.d.ts

@@ -4,7 +4,7 @@ import type { VuetiwatchDefaults, VuetiwatchMeta, VuetiwatchTheme } from './type
  * Every theme in the package, in the order a picker should show them:
  * the everyday ones first, then the niche ones.
  */
-export declare const themeList: readonly [VuetiwatchTheme<"classic">, VuetiwatchTheme<"paper">, VuetiwatchTheme<"slate">, VuetiwatchTheme<"calm">, VuetiwatchTheme<"lux">, VuetiwatchTheme<"soft">, VuetiwatchTheme<"clay">, VuetiwatchTheme<"morph">, VuetiwatchTheme<"sketchy">, VuetiwatchTheme<"brutalist">, VuetiwatchTheme<"liquidGlass">, VuetiwatchTheme<"darkGlass">, VuetiwatchTheme<"aurora">, VuetiwatchTheme<"neon">];
+export declare const themeList: readonly [VuetiwatchTheme<"classic">, VuetiwatchTheme<"paper">, VuetiwatchTheme<"slate">, VuetiwatchTheme<"graphite">, VuetiwatchTheme<"atlas">, VuetiwatchTheme<"atlasDark">, VuetiwatchTheme<"atlasSepia">, VuetiwatchTheme<"calm">, VuetiwatchTheme<"lux">, VuetiwatchTheme<"soft">, VuetiwatchTheme<"candy">, VuetiwatchTheme<"clay">, VuetiwatchTheme<"morph">, VuetiwatchTheme<"sketchy">, VuetiwatchTheme<"brutalist">, VuetiwatchTheme<"liquidGlass">, VuetiwatchTheme<"darkGlass">, VuetiwatchTheme<"aurora">, VuetiwatchTheme<"neon">];
 export type VuetiwatchThemeName = (typeof themeList)[number]['name'];
 type ByName<T> = Record<VuetiwatchThemeName, T>;
 /** Ready for `createVuetify({ theme: { themes: vuetiwatchThemes } })`. */

package/dist/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAkBrF;;;GAGG;AACH,eAAO,MAAM,SAAS,oYAeyB,CAAA;AAE/C,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE,KAAK,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAA;AAc/C,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAU,CAAA;AAE/D,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,kBAAkB,CAAY,CAAA;AAEtE,8EAA8E;AAC9E,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,cAAc,CAAQ,CAAA"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAuBrF;;;GAGG;AACH,eAAO,MAAM,SAAS,khBAoByB,CAAA;AAE/C,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE,KAAK,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAA;AAc/C,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAU,CAAA;AAE/D,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,kBAAkB,CAAY,CAAA;AAEtE,8EAA8E;AAC9E,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,cAAc,CAAQ,CAAA"}