blessing-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,162 @@
+import "./style.css";
+import e from "./components/BlessSkew.js";
+import { blessLinkKey as t, isRouterHref as n, useLink as r } from "./composables/useLink.js";
+import i from "./components/BlessSpinner.js";
+import a from "./components/BlessButton.js";
+import o from "./components/BlessBadge.js";
+import s from "./components/BlessDash.js";
+import c from "./components/BlessIcon.js";
+import l from "./components/BlessText.js";
+import u from "./components/BlessWatermark.js";
+import d from "./components/BlessSection.js";
+import { reducedMotion as f, scrollBehavior as p, useMedia as m } from "./composables/useMedia.js";
+import h from "./components/BlessStage.js";
+import g from "./components/BlessSidebarNav.js";
+import _ from "./components/BlessBackground.js";
+import v from "./components/BlessCard.js";
+import y from "./components/BlessList.js";
+import b from "./components/BlessListItem.js";
+import x from "./components/BlessTabs.js";
+import { useHash as S } from "./composables/useHash.js";
+import C from "./components/BlessModal.js";
+import w from "./components/BlessGallery.js";
+import T from "./components/BlessTable.js";
+import E from "./components/BlessAudioPlayer.js";
+import D from "./components/BlessSplash.js";
+import O from "./components/BlessSeparator.js";
+import k from "./components/BlessLabel.js";
+import A from "./components/BlessInput.js";
+import j from "./components/BlessTextarea.js";
+import M from "./components/BlessCheckbox.js";
+import N from "./components/BlessRadioGroup.js";
+import P from "./components/BlessRadio.js";
+import F from "./components/BlessSwitch.js";
+import I from "./components/BlessSelect.js";
+import L from "./components/BlessSlider.js";
+import R from "./components/BlessProgress.js";
+import z from "./components/BlessSkeleton.js";
+import B from "./components/BlessAvatar.js";
+import V from "./components/BlessAspectRatio.js";
+import H from "./components/BlessAlert.js";
+import U from "./components/BlessKbd.js";
+import W from "./components/BlessEmpty.js";
+import G from "./components/BlessButtonGroup.js";
+import K from "./components/BlessInputGroup.js";
+import q from "./components/BlessItem.js";
+import J from "./components/BlessCollapsible.js";
+import Y from "./components/BlessAccordion.js";
+import X from "./components/BlessAccordionItem.js";
+import Z from "./components/BlessToggle.js";
+import Q from "./components/BlessToggleGroup.js";
+import $ from "./components/BlessBreadcrumb.js";
+import ee from "./components/BlessPagination.js";
+import te from "./components/BlessScrollArea.js";
+import ne from "./components/BlessForm.js";
+import re from "./components/BlessField.js";
+import { useFloating as ie } from "./composables/useFloating.js";
+import ae from "./components/BlessPopover.js";
+import oe from "./components/BlessTooltip.js";
+import se from "./components/BlessHoverCard.js";
+import ce from "./components/BlessMenuList.js";
+import le from "./components/BlessDropdownMenu.js";
+import ue from "./components/BlessContextMenu.js";
+import de from "./components/BlessMenubar.js";
+import fe from "./components/BlessSheet.js";
+import pe from "./components/BlessDrawer.js";
+import me from "./components/BlessAlertDialog.js";
+import { useToast as he } from "./composables/useToast.js";
+import ge from "./components/BlessToaster.js";
+import _e from "./components/BlessCommand.js";
+import ve from "./components/BlessCombobox.js";
+import { addDays as ye, addMonths as be, fromISO as xe, isoToday as Se, toISO as Ce } from "./composables/date.js";
+import we from "./components/BlessCalendar.js";
+import Te from "./components/BlessDatePicker.js";
+import Ee from "./components/BlessInputOTP.js";
+import { useDataTable as De } from "./composables/useDataTable.js";
+import Oe from "./components/BlessDataTable.js";
+import ke from "./components/BlessCarousel.js";
+import Ae from "./components/BlessResizable.js";
+import je from "./components/BlessNavigationMenu.js";
+import { blessPalettes as Me, useTheme as Ne } from "./composables/useTheme.js";
+import Pe from "./components/BlessThemeToggle.js";
+import Fe from "./components/BlessMessage.js";
+import Ie from "./components/BlessBubble.js";
+import Le from "./components/BlessMarker.js";
+import Re from "./components/BlessAttachment.js";
+import ze from "./components/BlessMessageScroller.js";
+import Be from "./components/BlessQuestionnaire.js";
+import Ve from "./components/BlessChart.js";
+import He from "./components/BlessRating.js";
+import Ue from "./components/BlessFileInput.js";
+import We from "./components/BlessColorPicker.js";
+import Ge from "./components/BlessPasswordMeter.js";
+import Ke from "./components/BlessSteps.js";
+import qe from "./components/BlessTimeline.js";
+import Je from "./components/BlessIndicator.js";
+import Ye from "./components/BlessContainer.js";
+import Xe from "./components/BlessStack.js";
+import Ze from "./components/BlessScrollTop.js";
+import Qe from "./components/BlessListbox.js";
+import $e from "./components/BlessTree.js";
+import et from "./components/BlessSwap.js";
+import { applyMask as tt, unmask as nt } from "./components/mask.js";
+import rt from "./components/BlessInputMask.js";
+import { useScrollSpy as it } from "./composables/useScrollSpy.js";
+import { useRovingFocus as at } from "./composables/useRovingFocus.js";
+import ot from "./components/BlessBottomTabs.js";
+import st from "./components/BlessSpeedDial.js";
+import ct from "./components/BlessVirtualScroller.js";
+import lt from "./components/BlessOrderList.js";
+import ut from "./components/BlessPickList.js";
+import dt from "./components/BlessMockup.js";
+import ft from "./components/BlessTour.js";
+import pt from "./components/BlessKnob.js";
+import mt from "./components/BlessWatermarkOverlay.js";
+import ht from "./components/BlessSignaturePad.js";
+import gt from "./components/BlessQrCode.js";
+import _t from "./components/BlessEditor.js";
+import vt from "./components/BlessChip.js";
+import yt from "./components/BlessInputNumber.js";
+import bt from "./components/BlessPasswordInput.js";
+import xt from "./components/BlessStepper.js";
+import St from "./components/BlessInputTags.js";
+import Ct from "./components/BlessToolbar.js";
+import wt from "./components/BlessFloatLabel.js";
+import Tt from "./components/BlessFieldset.js";
+import Et from "./components/BlessPanel.js";
+import Dt from "./components/BlessMeterGroup.js";
+import Ot from "./components/BlessSplitButton.js";
+import kt from "./components/BlessBlockUI.js";
+import At from "./components/BlessInplace.js";
+import jt from "./components/BlessDeferredContent.js";
+import Mt from "./components/BlessConfirmPopup.js";
+import Nt from "./components/BlessCompare.js";
+import Pt from "./components/BlessDataView.js";
+import { useAnimateOnScroll as Ft } from "./composables/useAnimateOnScroll.js";
+import It from "./components/BlessPaletteToggle.js";
+import Lt from "./components/BlessCascadeSelect.js";
+import Rt from "./components/BlessTreeSelect.js";
+import zt from "./components/BlessTreeTable.js";
+import Bt from "./components/BlessOrgChart.js";
+import { useDialog as Vt } from "./composables/useDialog.js";
+import Ht from "./components/BlessDialogHost.js";
+import { useLongPress as Ut, usePan as Wt, useSwipe as Gt, useTouchRepeat as Kt } from "./composables/useGesture.js";
+import qt from "./components/BlessPullToRefresh.js";
+import Jt from "./components/BlessSlideItem.js";
+import Yt from "./components/BlessActionSheet.js";
+import Xt from "./components/BlessTabPanels.js";
+import Zt from "./components/BlessInfiniteScroll.js";
+import Qt from "./components/BlessLayout.js";
+import $t from "./components/BlessCircularProgress.js";
+import en from "./components/BlessRange.js";
+import tn from "./components/BlessTimePicker.js";
+import nn from "./components/BlessImg.js";
+import rn from "./components/BlessVideo.js";
+import { useLoadingBar as an } from "./composables/useLoadingBar.js";
+import on from "./components/BlessLoadingBar.js";
+import sn from "./components/BlessUploader.js";
+import cn from "./components/BlessParallax.js";
+import ln from "./components/BlessSlideTransition.js";
+import un from "./components/BlessClientOnly.js";
+import { useFullscreen as dn, useResizeObserver as fn, useScroll as pn, useVisibility as mn } from "./composables/useBrowser.js";
+export { Y as BlessAccordion, X as BlessAccordionItem, Yt as BlessActionSheet, H as BlessAlert, me as BlessAlertDialog, V as BlessAspectRatio, Re as BlessAttachment, E as BlessAudioPlayer, B as BlessAvatar, _ as BlessBackground, o as BlessBadge, kt as BlessBlockUI, ot as BlessBottomTabs, $ as BlessBreadcrumb, Ie as BlessBubble, a as BlessButton, G as BlessButtonGroup, we as BlessCalendar, v as BlessCard, ke as BlessCarousel, Lt as BlessCascadeSelect, Ve as BlessChart, M as BlessCheckbox, vt as BlessChip, $t as BlessCircularProgress, un as BlessClientOnly, J as BlessCollapsible, We as BlessColorPicker, ve as BlessCombobox, _e as BlessCommand, Nt as BlessCompare, Mt as BlessConfirmPopup, Ye as BlessContainer, ue as BlessContextMenu, s as BlessDash, Oe as BlessDataTable, Pt as BlessDataView, Te as BlessDatePicker, jt as BlessDeferredContent, Ht as BlessDialogHost, pe as BlessDrawer, le as BlessDropdownMenu, _t as BlessEditor, W as BlessEmpty, re as BlessField, Tt as BlessFieldset, Ue as BlessFileInput, wt as BlessFloatLabel, ne as BlessForm, w as BlessGallery, se as BlessHoverCard, c as BlessIcon, nn as BlessImg, Je as BlessIndicator, Zt as BlessInfiniteScroll, At as BlessInplace, A as BlessInput, K as BlessInputGroup, rt as BlessInputMask, yt as BlessInputNumber, Ee as BlessInputOTP, St as BlessInputTags, q as BlessItem, U as BlessKbd, pt as BlessKnob, k as BlessLabel, Qt as BlessLayout, y as BlessList, b as BlessListItem, Qe as BlessListbox, on as BlessLoadingBar, Le as BlessMarker, ce as BlessMenuList, de as BlessMenubar, Fe as BlessMessage, ze as BlessMessageScroller, Dt as BlessMeterGroup, dt as BlessMockup, C as BlessModal, je as BlessNavigationMenu, lt as BlessOrderList, Bt as BlessOrgChart, ee as BlessPagination, It as BlessPaletteToggle, Et as BlessPanel, cn as BlessParallax, bt as BlessPasswordInput, Ge as BlessPasswordMeter, ut as BlessPickList, ae as BlessPopover, R as BlessProgress, qt as BlessPullToRefresh, gt as BlessQrCode, Be as BlessQuestionnaire, P as BlessRadio, N as BlessRadioGroup, en as BlessRange, He as BlessRating, Ae as BlessResizable, te as BlessScrollArea, Ze as BlessScrollTop, d as BlessSection, I as BlessSelect, O as BlessSeparator, fe as BlessSheet, g as BlessSidebarNav, ht as BlessSignaturePad, z as BlessSkeleton, e as BlessSkew, Jt as BlessSlideItem, ln as BlessSlideTransition, L as BlessSlider, st as BlessSpeedDial, i as BlessSpinner, D as BlessSplash, Ot as BlessSplitButton, Xe as BlessStack, h as BlessStage, xt as BlessStepper, Ke as BlessSteps, et as BlessSwap, F as BlessSwitch, Xt as BlessTabPanels, T as BlessTable, x as BlessTabs, l as BlessText, j as BlessTextarea, Pe as BlessThemeToggle, tn as BlessTimePicker, qe as BlessTimeline, ge as BlessToaster, Z as BlessToggle, Q as BlessToggleGroup, Ct as BlessToolbar, oe as BlessTooltip, ft as BlessTour, $e as BlessTree, Rt as BlessTreeSelect, zt as BlessTreeTable, sn as BlessUploader, rn as BlessVideo, ct as BlessVirtualScroller, u as BlessWatermark, mt as BlessWatermarkOverlay, ye as addDays, be as addMonths, tt as applyMask, t as blessLinkKey, Me as blessPalettes, xe as fromISO, n as isRouterHref, Se as isoToday, f as reducedMotion, p as scrollBehavior, Ce as toISO, nt as unmask, Ft as useAnimateOnScroll, De as useDataTable, Vt as useDialog, ie as useFloating, dn as useFullscreen, S as useHash, r as useLink, an as useLoadingBar, Ut as useLongPress, m as useMedia, Wt as usePan, fn as useResizeObserver, at as useRovingFocus, pn as useScroll, it as useScrollSpy, Gt as useSwipe, Ne as useTheme, he as useToast, Kt as useTouchRepeat, mn as useVisibility };

package/dist/style.css

@@ -0,0 +1 @@
+:root{--bless-color-text:#3d3e3f;--bless-color-text-muted:#5d6a74;--bless-color-bg:#f5f5f6;--bless-color-surface:#e7e8ea;--bless-color-surface-2:#e4e5e7;--bless-color-watermark:#dcdfe3;--bless-color-accent:#cc466a;--bless-color-accent-soft:#f5a0b8;--bless-color-accent-2:#ee6f92;--bless-color-accent-text:#b63c5c;--bless-color-danger:#cc2020;--bless-color-danger-text:#cc2020;--bless-color-badge:#dc2f5e;--bless-color-warning:#ffa800;--bless-color-success:#c0e722;--bless-color-info:#9650e6;--bless-color-info-text:#893ae3;--bless-color-on-accent:#fff;--bless-color-on-text:var(--bless-color-bg);--bless-color-on-light:#1a1b1d;--bless-color-border:#d2d5d9;--bless-color-rule:var(--bless-color-text);--bless-color-backdrop:#0009;--bless-color-media-bg:#1a1b1d;--bless-color-chart-1:var(--bless-color-accent);--bless-color-chart-2:#a759ff;--bless-color-chart-3:#b86e00;--bless-color-chart-4:#689000;--bless-color-chart-5:#5f6c76;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bless-font-sans:"Roboto", "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", sans-serif;--bless-font-weight-thin:100;--bless-font-weight-light:300;--bless-font-weight-normal:400;--bless-font-weight-bold:700;--bless-text-2xs:clamp(.5rem, .45rem + .25vw, .5625rem);--bless-text-xs:clamp(.5625rem, .5rem + .3vw, .625rem);--bless-text-sm:clamp(.625rem, .55rem + .4vw, .75rem);--bless-text-md:clamp(.75rem, .65rem + .5vw, .875rem);--bless-text-lg:clamp(.875rem, .7rem + .9vw, 1.25rem);--bless-text-xl:clamp(1.25rem, .9rem + 1.8vw, 1.75rem);--bless-text-display:clamp(3rem, 1rem + 10vw, 9.4375rem);--bless-text-headline:clamp(2.25rem, 1.2rem + 4vw, 4.5625rem);--bless-leading-none:1;--bless-leading-tight:1.25;--bless-leading-normal:1.6;--bless-tracking-tight:-.5px;--bless-tracking-normal:.5px;--bless-tracking-wide:1px;--bless-tracking-wider:2px;--bless-space-1:.25rem;--bless-space-2:.5rem;--bless-space-3:.75rem;--bless-space-4:1rem;--bless-space-6:1.5rem;--bless-space-8:2rem;--bless-space-12:3rem;--bless-space-16:4rem;--bless-radius:0px;--bless-radius-plate:0;--bless-petal:0px;--bless-radius-petal:0 var(--bless-petal) 0 var(--bless-petal);--bless-radius-petal-lg:0 calc(var(--bless-petal) * 1.5) 0 calc(var(--bless-petal) * 1.5);--bless-lean:-10deg;--bless-lean-transition:--bless-skew var(--bless-duration-base) var(--bless-ease-out), --bless-skew-counter var(--bless-duration-base) var(--bless-ease-out);--bless-skew:0deg;--bless-skew-counter:0deg;--bless-border-width:1px;--bless-dash-width:10px;--bless-plate-offset:1px;--bless-shadow-none:none;--bless-shadow-plate:var(--bless-plate-offset) var(--bless-plate-offset) 0 var(--bless-color-accent);--bless-shadow-md:var(--bless-shadow-plate);--bless-duration-fast:.1s;--bless-duration-base:.2s;--bless-duration-slow:.3s;--bless-duration-slower:1s;--bless-ease-in-out:cubic-bezier(.645, .045, .355, 1);--bless-ease-out:cubic-bezier(.215, .61, .355, 1);--bless-ease-linear:linear;--bless-hover-opacity:.6;--bless-press-scale:.8;--bless-sidebar-width:22%;--bless-sidebar-inner:200px;--bless-content-max:1300px;--bless-z-bg:-1;--bless-z-nav:100;--bless-safe-top:env(safe-area-inset-top,0px);--bless-safe-bottom:env(safe-area-inset-bottom,0px);--bless-safe-left:env(safe-area-inset-left,0px);--bless-safe-right:env(safe-area-inset-right,0px);--bless-z-modal:1000}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bless-color-text:#e8e9ea;--bless-color-text-muted:#9aa4ad;--bless-color-bg:#17181a;--bless-color-surface:#232529;--bless-color-surface-2:#2a2d32;--bless-color-watermark:#24262a;--bless-color-border:#2f3237;--bless-color-rule:#e8e9ea;--bless-color-backdrop:#000000bf;--bless-color-chart-2:#b57bff;--bless-color-chart-3:#ffa800;--bless-color-chart-4:#c0e722;--bless-color-danger:#d63a3a;--bless-color-danger-text:#f15757;--bless-color-info-text:#b57bff;--bless-color-chart-5:#9aa4ad;--bless-font-weight-thin:300;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bless-color-text:#e8e9ea;--bless-color-text-muted:#9aa4ad;--bless-color-bg:#17181a;--bless-color-surface:#232529;--bless-color-surface-2:#2a2d32;--bless-color-watermark:#24262a;--bless-color-border:#2f3237;--bless-color-rule:#e8e9ea;--bless-color-backdrop:#000000bf;--bless-color-chart-2:#b57bff;--bless-color-chart-3:#ffa800;--bless-color-chart-4:#c0e722;--bless-color-danger:#d63a3a;--bless-color-danger-text:#f15757;--bless-color-info-text:#b57bff;--bless-color-chart-5:#9aa4ad;--bless-font-weight-thin:300;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-reduced-motion:reduce){:root{--bless-duration-fast:0s;--bless-duration-base:0s;--bless-duration-slow:0s;--bless-duration-slower:0s}}:root[data-palette=utaha]{--bless-color-accent:#e03028;--bless-color-accent-soft:#f28a84;--bless-color-accent-2:#ea5a52;--bless-color-badge:#d02020;--bless-color-chart-1:#e03028;--bless-color-accent-text:#c62b23}:root[data-palette=izumi]{--bless-color-accent:#367ab1;--bless-color-accent-soft:#8fbfe6;--bless-color-accent-2:#63a6db;--bless-color-badge:#2e7aba;--bless-color-chart-1:#4090d0;--bless-color-accent-text:#306d9d}:root[data-palette=michiru]{--bless-color-accent:#996492;--bless-color-accent-soft:#d6aed1;--bless-color-accent-2:#c793c0;--bless-color-badge:#9e619a;--bless-color-chart-1:#b878b0;--bless-color-accent-text:#885882}:root[data-palette=eriri]{--bless-color-accent:#6b7e00;--bless-color-accent-soft:#c8e018;--bless-color-accent-2:#a3bf0a;--bless-color-badge:#6b7f00;--bless-color-chart-1:#7f9600;--bless-color-accent-text:#5f7000}:root[data-palette=tomoya]{--bless-color-accent:#546aec;--bless-color-accent-soft:#9aa8fb;--bless-color-accent-2:#7688f9;--bless-color-badge:#4a5fe0;--bless-color-chart-1:#5870f8;--bless-color-accent-text:#4a5dcf}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bless-color-accent-text:#e95b80}:root:not([data-theme=light])[data-palette=utaha]{--bless-color-accent-text:#e7625c}:root:not([data-theme=light])[data-palette=tomoya]{--bless-color-accent-text:#6f84f9}:root:not([data-theme=light])[data-palette=izumi]{--bless-color-accent-text:#63a6db}:root:not([data-theme=light])[data-palette=michiru]{--bless-color-accent-text:#b878b0}:root:not([data-theme=light])[data-palette=eriri]{--bless-color-accent-text:#a3bf0a}}:root[data-theme=dark]{--bless-color-accent-text:#e95b80}:root[data-theme=dark][data-palette=utaha]{--bless-color-accent-text:#e7625c}:root[data-theme=dark][data-palette=tomoya]{--bless-color-accent-text:#6f84f9}:root[data-theme=dark][data-palette=izumi]{--bless-color-accent-text:#63a6db}:root[data-theme=dark][data-palette=michiru]{--bless-color-accent-text:#b878b0}:root[data-theme=dark][data-palette=eriri]{--bless-color-accent-text:#a3bf0a}[dir=rtl]{--bless-lean:10deg;--bless-radius-petal:var(--bless-petal) 0 var(--bless-petal) 0;--bless-radius-petal-lg:calc(var(--bless-petal) * 1.5) 0 calc(var(--bless-petal) * 1.5) 0}@property --bless-skew{syntax:"<angle>";inherits:true;initial-value:0deg}@property --bless-skew-counter{syntax:"<angle>";inherits:true;initial-value:0deg}:where(button,a[href],summary,label,[role=tab],[role=option],[role=menuitem],[role=menuitemradio],[role=menuitemcheckbox],[role=treeitem],.bless-lean,.bless-lean--field){transition:var(--bless-lean-transition)}:where(button,a[href],summary,label,[role=tab],[role=option],[role=menuitem],[role=menuitemradio],[role=menuitemcheckbox],[role=treeitem],.bless-lean):where(:not(:disabled,[aria-disabled=true])):is(:hover,:focus-visible,:active),:where(.bless-lean--field):focus-within{--bless-skew:var(--bless-lean);--bless-skew-counter:calc(-1 * var(--bless-lean))}:where(label,.bless-lean):has(:focus-visible){--bless-skew:var(--bless-lean);--bless-skew-counter:calc(-1 * var(--bless-lean))}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "blessing-ui",
+  "version": "0.1.0",
+  "description": "Blessing UI — Themed Flat Interface. Flat by design, raised with Vue, blessed for everyone.",
+  "keywords": [
+    "components",
+    "design-system",
+    "design-tokens",
+    "ui",
+    "vue",
+    "vue3"
+  ],
+  "homepage": "https://ui.blessing.id",
+  "bugs": "https://github.com/danceinthefake/blessing-ui/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/danceinthefake/blessing-ui.git"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "tokens.css",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/index.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/blessing-ui.css",
+    "./tokens.css": "./tokens.css",
+    "./components/*": {
+      "types": "./dist/components/*.vue.d.ts",
+      "import": "./dist/components/*.js"
+    }
+  },
+  "devDependencies": {
+    "@tiptap/pm": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
+    "@tiptap/vue-3": "^3.31.3",
+    "@types/node": "^26.6.1",
+    "@unovis/ts": "^1.7.0",
+    "@unovis/vue": "^1.7.0",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/test-utils": "^2.5.1",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.1.0",
+    "oxfmt": "^0.68.0",
+    "playwright": "^1.63.0",
+    "typescript": "^6.0.3",
+    "uqr": "^0.1.3",
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.0",
+    "vitepress": "^1.6.4",
+    "vitest": "^5.0.1",
+    "vue": "^3.5.0",
+    "vue-component-meta": "^3.3.11",
+    "vue-tsc": "^3.3.11"
+  },
+  "peerDependencies": {
+    "@tiptap/vue-3": "^3",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@tiptap/vue-3": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "dev": "vitepress dev docs",
+    "build": "vue-tsc --noEmit && vite build && node scripts/postbuild.mjs",
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "format": "oxfmt .",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "pnpm docs:meta && pnpm docs:blocks && vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "docs:meta": "node docs/scripts/meta.ts",
+    "docs:pages": "node docs/scripts/pages.ts",
+    "e2e": "node e2e/sweep.mjs chromium,firefox && node e2e/axe.mjs && node e2e/interact.mjs chromium && node e2e/interact.mjs firefox",
+    "e2e:consumer": "pnpm build && node e2e/consumer/check.mjs",
+    "docs:blocks": "node docs/scripts/blocks.ts",
+    "docs:shots": "node docs/scripts/shots.mjs"
+  }
+}

package/tokens.css

@@ -0,0 +1,348 @@
+/* Blessing UI — design tokens
+ * Derived from saenai.tv visual language (grey UI + pink-red accent, skew, thin watermark type).
+ * Consume: `@import "blessing-ui/tokens.css"` then use var(--bless-*).
+ * Tailwind v4: `@theme { --color-text: var(--bless-color-text); ... }` maps these in.
+ */
+:root {
+  /* ---- colour ---- */
+  --bless-color-text: #3d3e3f;
+  --bless-color-text-muted: #5d6a74; /* 5.0:1 on bg, 4.5:1 on surface */
+  --bless-color-bg: #f5f5f6; /* soft white: the glare off pure white */
+  --bless-color-surface: #e7e8ea;
+  --bless-color-surface-2: #e4e5e7;
+  --bless-color-watermark: #dcdfe3;
+
+  --bless-color-accent: #cc466a; /* fills — Megumi's petal (#e85078) deepened to carry white at 4.5:1; the default palette */
+  --bless-color-accent-soft: #f5a0b8; /* highlights, hover fills */
+  --bless-color-accent-2: #ee6f92;
+  --bless-color-accent-text: #b63c5c; /* accent as *text* on bg/surface — ≥4.5:1 */
+  --bless-color-danger: #cc2020; /* destructive fills, invalid borders */
+  --bless-color-danger-text: #cc2020; /* error text on bg/surface — ≥4.5:1; lifted in dark */
+  --bless-color-badge: #dc2f5e; /* BlessBadge color="badge": a chosen marker */
+  --bless-color-warning: #ffa800;
+  --bless-color-success: #c0e722;
+  --bless-color-info: #9650e6;
+  --bless-color-info-text: #893ae3; /* info as text — ≥4.5:1 on bg and surface; lifted in dark */
+
+  --bless-color-on-accent: #fff;
+  --bless-color-on-text: var(--bless-color-bg); /* text on a --bless-color-text fill */
+  --bless-color-on-light: #1a1b1d; /* text on warning / success fills (too pale for white) */
+  --bless-color-border: #d2d5d9; /* 1.4:1 on bg — the same step as dark mode's border, so edges read in both */
+  --bless-color-rule: var(--bless-color-text);
+  --bless-color-backdrop: rgb(0 0 0 / 0.6); /* dialog / sheet scrim */
+  --bless-color-media-bg: #1a1b1d; /* lightbox panel, always dark */
+
+  /* categorical chart series, all ≥3:1 on bg and surface */
+  --bless-color-chart-1: var(--bless-color-accent);
+  --bless-color-chart-2: #a759ff;
+  --bless-color-chart-3: #b86e00;
+  --bless-color-chart-4: #689000;
+  --bless-color-chart-5: #5f6c76;
+
+  color-scheme: light;
+
+  /* ---- typography ---- */
+  --bless-font-sans:
+    "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo",
+    sans-serif;
+  --bless-font-weight-thin: 100;
+  --bless-font-weight-light: 300;
+  --bless-font-weight-normal: 400;
+  --bless-font-weight-bold: 700;
+
+  /* fluid: min @320px → max @1300px */
+  --bless-text-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.5625rem); /* 8–9px   */
+  --bless-text-xs: clamp(0.5625rem, 0.5rem + 0.3vw, 0.625rem); /* 9–10px  */
+  --bless-text-sm: clamp(0.625rem, 0.55rem + 0.4vw, 0.75rem); /* 10–12px */
+  --bless-text-md: clamp(0.75rem, 0.65rem + 0.5vw, 0.875rem); /* 12–14px */
+  --bless-text-lg: clamp(0.875rem, 0.7rem + 0.9vw, 1.25rem); /* 14–20px */
+  --bless-text-xl: clamp(1.25rem, 0.9rem + 1.8vw, 1.75rem); /* 20–28px */
+  --bless-text-display: clamp(3rem, 1rem + 10vw, 9.4375rem); /* 48–151px watermark */
+  --bless-text-headline: clamp(2.25rem, 1.2rem + 4vw, 4.5625rem); /* 36–73px hanging headline */
+
+  --bless-leading-none: 1;
+  --bless-leading-tight: 1.25;
+  --bless-leading-normal: 1.6; /* JP body needs room; site's 1 was too tight */
+  --bless-tracking-tight: -0.5px;
+  --bless-tracking-normal: 0.5px;
+  --bless-tracking-wide: 1px;
+  --bless-tracking-wider: 2px;
+
+  /* ---- spacing (4px base) ---- */
+  --bless-space-1: 0.25rem;
+  --bless-space-2: 0.5rem;
+  --bless-space-3: 0.75rem;
+  --bless-space-4: 1rem;
+  --bless-space-6: 1.5rem;
+  --bless-space-8: 2rem;
+  --bless-space-12: 3rem;
+  --bless-space-16: 4rem;
+
+  /* ---- shape ----
+   * One shape: the upright plate with a whole, square outline — buttons, tabs, fields, cards, and the
+   * round-by-nature parts too (avatars, switches, chips, bubbles, fabs, thumbs, count dots). The lean
+   * (--bless-lean) carries the identity, not the corners; the teardrop lives in the mark.
+   * --bless-radius / --bless-radius-plate / --bless-petal are 0 and override points: set --bless-petal
+   * (e.g. 8px) to round the two opposite corners of the round-by-nature parts.
+   */
+  --bless-radius: 0px; /* unskewed boxes — override point, 0 by design */
+  --bless-radius-plate: 0; /* skewed plates — override point, 0 by design */
+  --bless-petal: 0px; /* override point, 0 by design */
+  --bless-radius-petal: 0 var(--bless-petal) 0 var(--bless-petal); /* two opposite corners, square by default */
+  --bless-radius-petal-lg: 0 calc(var(--bless-petal) * 1.5) 0 calc(var(--bless-petal) * 1.5); /* bubbles */
+  --bless-lean: -10deg; /* the house angle — what a plate leans to when it gets attention */
+  /* append to a control's own transition list so its lean still animates */
+  --bless-lean-transition:
+    --bless-skew var(--bless-duration-base) var(--bless-ease-out),
+    --bless-skew-counter var(--bless-duration-base) var(--bless-ease-out);
+  --bless-skew: 0deg; /* the current lean: upright at rest, set to --bless-lean on attention (below) */
+  --bless-skew-counter: 0deg; /* apply to inner text */
+  --bless-border-width: 1px;
+  --bless-dash-width: 10px; /* separator dash */
+
+  /* ---- elevation ----
+   * Nothing blurs. A floating thing sits on a plate: a hard offset slab in the accent, the same
+   * motif as the QR frame and the mark's plates. Modal and sheet rely on the scrim instead.
+   */
+  --bless-plate-offset: 1px;
+  --bless-shadow-none: none;
+  --bless-shadow-plate: var(--bless-plate-offset) var(--bless-plate-offset) 0
+    var(--bless-color-accent);
+  --bless-shadow-md: var(--bless-shadow-plate); /* alias kept for consumers; same plate */
+
+  /* ---- motion ---- */
+  --bless-duration-fast: 0.1s;
+  --bless-duration-base: 0.2s;
+  --bless-duration-slow: 0.3s; /* default hover */
+  --bless-duration-slower: 1s; /* bg / splash fades */
+  --bless-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* ≈ Power3.easeInOut */
+  --bless-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* ≈ Power3.easeOut */
+  --bless-ease-linear: linear;
+  --bless-hover-opacity: 0.6;
+  --bless-press-scale: 0.8;
+
+  /* ---- layout ---- */
+  --bless-sidebar-width: 22%;
+  --bless-sidebar-inner: 200px;
+  --bless-content-max: 1300px;
+  --bless-z-bg: -1;
+  --bless-z-nav: 100;
+  /* device safe areas (notches, home bar); 0 on desktop */
+  --bless-safe-top: env(safe-area-inset-top, 0px);
+  --bless-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --bless-safe-left: env(safe-area-inset-left, 0px);
+  --bless-safe-right: env(safe-area-inset-right, 0px);
+  --bless-z-modal: 1000;
+}
+
+/* ---- dark theme ----
+ * Follows the OS unless data-theme is set on <html>:
+ *   <html data-theme="dark"> forces dark, data-theme="light" forces light.
+ * Accent family is unchanged; greys invert; shadows deepen.
+ */
+:root:not([data-theme="light"]) {
+  @media (prefers-color-scheme: dark) {
+    --bless-color-text: #e8e9ea;
+    --bless-color-text-muted: #9aa4ad;
+    --bless-color-bg: #17181a;
+    --bless-color-surface: #232529;
+    --bless-color-surface-2: #2a2d32;
+    --bless-color-watermark: #24262a;
+    --bless-color-border: #2f3237;
+    --bless-color-rule: #e8e9ea;
+    --bless-color-backdrop: rgb(0 0 0 / 0.75);
+    --bless-color-chart-2: #b57bff;
+    --bless-color-chart-3: #ffa800;
+    --bless-color-chart-4: #c0e722;
+    --bless-color-danger: #d63a3a; /* white 4.6:1; 3.3:1 as a border on dark surface */
+    --bless-color-danger-text: #f15757; /* 4.5:1 on dark surface */
+    --bless-color-info-text: #b57bff;
+    --bless-color-chart-5: #9aa4ad;
+    /* light-on-dark reads thinner (irradiation); one step up keeps hairlines legible */
+    --bless-font-weight-thin: 300;
+    color-scheme: dark;
+  }
+}
+:root[data-theme="dark"] {
+  --bless-color-text: #e8e9ea;
+  --bless-color-text-muted: #9aa4ad;
+  --bless-color-bg: #17181a;
+  --bless-color-surface: #232529;
+  --bless-color-surface-2: #2a2d32;
+  --bless-color-watermark: #24262a;
+  --bless-color-border: #2f3237;
+  --bless-color-rule: #e8e9ea;
+  --bless-color-backdrop: rgb(0 0 0 / 0.75);
+  --bless-color-chart-2: #b57bff;
+  --bless-color-chart-3: #ffa800;
+  --bless-color-chart-4: #c0e722;
+  --bless-color-danger: #d63a3a; /* white 4.6:1; 3.3:1 as a border on dark surface */
+  --bless-color-danger-text: #f15757;
+  --bless-color-info-text: #b57bff;
+  --bless-color-chart-5: #9aa4ad;
+  --bless-font-weight-thin: 300;
+  color-scheme: dark;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --bless-duration-fast: 0s;
+    --bless-duration-base: 0s;
+    --bless-duration-slow: 0s;
+    --bless-duration-slower: 0s;
+  }
+}
+
+/* ---- palettes ----
+ * Accent families named after the members of the circle the library is named for
+ * (see docs/guide/story). The root accent above is Megumi's — the default; <html data-palette="utaha">
+ * etc. swap only the accent family. Greys, skew and type are untouched; data-theme (dark) composes on top.
+ */
+:root[data-palette="utaha"] {
+  --bless-color-accent: #e03028;
+  --bless-color-accent-soft: #f28a84;
+  --bless-color-accent-2: #ea5a52;
+  --bless-color-badge: #d02020;
+  --bless-color-chart-1: #e03028;
+  --bless-color-accent-text: #c62b23;
+}
+:root[data-palette="izumi"] {
+  --bless-color-accent: #367ab1;
+  --bless-color-accent-soft: #8fbfe6;
+  --bless-color-accent-2: #63a6db;
+  --bless-color-badge: #2e7aba;
+  --bless-color-chart-1: #4090d0;
+  --bless-color-accent-text: #306d9d;
+}
+:root[data-palette="michiru"] {
+  --bless-color-accent: #996492;
+  --bless-color-accent-soft: #d6aed1;
+  --bless-color-accent-2: #c793c0;
+  --bless-color-badge: #9e619a;
+  --bless-color-chart-1: #b878b0;
+  --bless-color-accent-text: #885882;
+}
+/* Eriri's petal (#c8e018) is too light for white text; it becomes accent-soft and the ink darkens */
+:root[data-palette="eriri"] {
+  --bless-color-accent: #6b7e00;
+  --bless-color-accent-soft: #c8e018;
+  --bless-color-accent-2: #a3bf0a;
+  --bless-color-badge: #6b7f00;
+  --bless-color-chart-1: #7f9600;
+  --bless-color-accent-text: #5f7000;
+}
+/* Tomoya — the centre of the circle, not a petal; the mark stays five */
+:root[data-palette="tomoya"] {
+  --bless-color-accent: #546aec;
+  --bless-color-accent-soft: #9aa8fb;
+  --bless-color-accent-2: #7688f9;
+  --bless-color-badge: #4a5fe0;
+  --bless-color-chart-1: #5870f8;
+  --bless-color-accent-text: #4a5dcf;
+}
+
+/* ---- accent as text, dark ----
+ * After the palettes so it wins: the light-mode text cuts are too dark for dark greys, so every
+ * palette lifts to ≥4.5:1 on dark surface.
+ */
+:root:not([data-theme="light"]) {
+  @media (prefers-color-scheme: dark) {
+    --bless-color-accent-text: #e95b80; /* Megumi, lifted a step for 4.5:1 on surface */
+    &[data-palette="utaha"] {
+      --bless-color-accent-text: #e7625c;
+    }
+    &[data-palette="tomoya"] {
+      --bless-color-accent-text: #6f84f9;
+    }
+    &[data-palette="izumi"] {
+      --bless-color-accent-text: #63a6db;
+    }
+    &[data-palette="michiru"] {
+      --bless-color-accent-text: #b878b0;
+    }
+    &[data-palette="eriri"] {
+      --bless-color-accent-text: #a3bf0a;
+    }
+  }
+}
+:root[data-theme="dark"] {
+  --bless-color-accent-text: #e95b80;
+  &[data-palette="utaha"] {
+    --bless-color-accent-text: #e7625c;
+  }
+  &[data-palette="tomoya"] {
+    --bless-color-accent-text: #6f84f9;
+  }
+  &[data-palette="izumi"] {
+    --bless-color-accent-text: #63a6db;
+  }
+  &[data-palette="michiru"] {
+    --bless-color-accent-text: #b878b0;
+  }
+  &[data-palette="eriri"] {
+    --bless-color-accent-text: #a3bf0a;
+  }
+}
+
+/* ---- right-to-left ----
+ * Layout is logical (inline-start/end) throughout; only the lean needs a hand — the parallelogram
+ * leans with the reading direction. Named-physical props (placement="left", position="top-right",
+ * the Layout/Stage drawers) stay physical on purpose.
+ */
+[dir="rtl"] {
+  --bless-lean: 10deg;
+  --bless-radius-petal: var(--bless-petal) 0 var(--bless-petal) 0; /* the lean flips, so do the petal's corners */
+  --bless-radius-petal-lg: calc(var(--bless-petal) * 1.5) 0 calc(var(--bless-petal) * 1.5) 0;
+}
+
+/* ---- lean on attention ----
+ * Upright at rest; a control leans to --bless-lean while it is hovered, focused or pressed, and a
+ * field while you write in it. Every plate reads var(--bless-skew) and its text the counter, so
+ * setting the pair on the attended element leans it and everything drawn inside it. Registered so
+ * the lean animates; the focus ring stays, so the lean is never the only focus signal.
+ * Big display type (the watermark) leans at rest by setting --bless-skew itself.
+ */
+@property --bless-skew {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+@property --bless-skew-counter {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+:where(
+  button,
+  a[href],
+  summary,
+  label,
+  [role="tab"],
+  [role="option"],
+  [role="menuitem"],
+  [role="menuitemradio"],
+  [role="menuitemcheckbox"],
+  [role="treeitem"],
+  .bless-lean,
+  .bless-lean--field
+) {
+  transition: var(--bless-lean-transition);
+}
+:where(
+    button,
+    a[href],
+    summary,
+    label,
+    [role="tab"],
+    [role="option"],
+    [role="menuitem"],
+    [role="menuitemradio"],
+    [role="menuitemcheckbox"],
+    [role="treeitem"],
+    .bless-lean
+  ):where(:not(:disabled, [aria-disabled="true"])):is(:hover, :focus-visible, :active),
+:where(label, .bless-lean):has(:focus-visible),
+:where(.bless-lean--field):focus-within {
+  --bless-skew: var(--bless-lean);
+  --bless-skew-counter: calc(-1 * var(--bless-lean));
+}