vuetiwatch 0.1.1 → 0.2.1

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,190 @@ 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 seventeen of the 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.
+
+`npm run audit` measures all of it and fails on anything unexplained, so the
+next palette change cannot quietly walk this back. Exceptions live in that
+script with their reason attached, which is the only way a later reader can
+tell a decision from an oversight.
+
+`soft` is the one stated exception. Its filled controls carry white labels on
+pastel grounds, which measures between 1.77:1 and 2.84:1 — under the bar, by
+both models. Nothing about that is accidental: white is what the palette wants,
+and the only way to earn it is to take the hues down by a third, at which point
+the theme is no longer pastel and no longer itself. If a screen has to be legible
+to everyone, pick a theme that measures — `atlas` and `graphite` are built for
+exactly that. `soft` is for the places where the palette is the point.
+
+### Motion
+
+Which transition a floating surface uses is an ordinary prop too, so a theme
+owns how its overlays arrive as well as how they look. `overlays()` states it
+once for the dialog, the menu, the tooltip and the snackbar — `menu` reaches
+the select, the autocomplete and the combobox with it.
+
+```ts
+import { overlays, ripple } from 'vuetiwatch'
+
+defineTheme({
+  // …
+  defaults: [
+    overlays({
+      dialog: 'fade-transition',
+      menu: 'slide-y-transition',
+      tooltip: 'fade-transition',
+    }),
+    ripple(false),
+  ],
+})
+```
+
+`false` means no animation at all, which is the honest answer for a theme
+that draws no depth for a surface to arrive through — `brutalist` uses it.
+
+Vuetify bakes the *timing* of each named transition into its own stylesheet,
+so naming one only half moves it: a fade takes 300ms whether it belongs to a
+theme that settles slowly or to one that repaints instantly. Two variables
+take that back, and default to Vuetify's own numbers so a theme that says
+nothing changes nothing:
+
+| Variable | What it sets |
+| --- | --- |
+| `--v-vw-overlay-duration` | How long a surface takes to arrive |
+| `--v-vw-overlay-exit` | How long it takes to leave; falls through to the above |
+
+The easing follows `--v-vw-motion-ease`, so a theme that already stated its
+curve gets its overlays eased the same way for free.
+
+`ripple(false)` turns off the Material ripple everywhere one is drawn — the
+tab, the app-bar nav icon and every tick box included, each of which is its
+own defaults key and would otherwise be missed.
+
+### Selection
+
+Dragging across text is answered in the browser's own blue, which belongs to
+no palette. Every non-stock theme replaces it with its accent at 24%, which
+costs a theme nothing and follows `setAccent()` when one repaints. A theme
+that wants a solid highlight states both halves and takes responsibility for
+the ink on top:
+
+| Variable | What it sets |
+| --- | --- |
+| `--v-vw-selection-fill` | The highlight behind selected text |
+| `--v-vw-selection-color` | The text on it; defaults to the text's own colour |
+
 ### 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 { bars, combine, controls, fields, icons, overlays, ripple, surfaces, tables } from './util/defaults.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 { VuetiwatchIcons, VuetiwatchOverlays } from './util/defaults.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,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAE/G,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,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC7E,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';
+export { bars, combine, controls, fields, icons, overlays, ripple, 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,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,CAkKR"}