@gradient-ui/core 0.8.0 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 David Aliev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,55 +1,35 @@
 # Gradient UI
 
-Gradient UI is a Vue 3 component library built around Material You inspired
-tokens, expressive gradients, compact form controls, floating layers,
-directives and service helpers.
+[![CI](https://github.com/Deadida322/gradientUi/actions/workflows/ci.yml/badge.svg)](https://github.com/Deadida322/gradientUi/actions/workflows/ci.yml)
+[![core](https://img.shields.io/npm/v/%40gradient-ui%2Fcore?label=core)](https://www.npmjs.com/package/@gradient-ui/core)
+[![gradient-engine](https://img.shields.io/npm/v/%40gradient-ui%2Fgradient-engine?label=gradient%20engine)](https://www.npmjs.com/package/@gradient-ui/gradient-engine)
+[![nuxt](https://img.shields.io/npm/v/%40gradient-ui%2Fnuxt?label=Nuxt)](https://www.npmjs.com/package/@gradient-ui/nuxt)
+[![license](https://img.shields.io/npm/l/%40gradient-ui%2Fcore)](LICENSE)
 
-It is designed for product interfaces that need a polished default look without
-giving up explicit TypeScript APIs.
+Gradient UI is a Vue 3 component library for expressive product interfaces. It
+combines accessible components, Material You-inspired design tokens and a
+deterministic gradient engine. It supports client rendering, SSR and SSG.
 
-The npm package is published as `@gradient-ui/core`.
+[Documentation](https://gradient-ui-docs.netlify.app/docs/get-started) · [Nuxt and SSR](https://gradient-ui-docs.netlify.app/docs/ssr-nuxt) · [Figma plugin](https://gradient-ui-docs.netlify.app/docs/figma-plugin) · [Playground](https://gradient-ui-docs.netlify.app/playground)
 
-Documentation: https://gradient-ui-docs.netlify.app/docs/get-started
+## Packages
 
-## 0.5.0
-
-Gradient UI `0.5.0` is the stable release for the new color and gradient
-architecture.
-
-- The standalone `@gradient-ui/gradient-engine` package powers gradient
-  materials, recipes, effects and animation output.
-- Component variants now treat `default` as the regular material fill and
-  `gradient` as the explicit gradient surface.
-- `filled` has been replaced by `gradient` for gradient-backed controls.
-- Color tokens are generated through the new palette layer, while components can
-  still resolve semantic colors such as `primary`, `error`, `warning` and
-  `success`.
-
-Install the stable package:
-
-```bash
-npm install @gradient-ui/core
-```
-
-The gradient engine can also be installed independently:
-
-```bash
-npm install @gradient-ui/gradient-engine
-```
+| Package                                                                                      | Purpose                                                             |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| [`@gradient-ui/core`](https://www.npmjs.com/package/@gradient-ui/core)                       | Vue components, directives, theme system and SSR utilities.         |
+| [`@gradient-ui/gradient-engine`](https://www.npmjs.com/package/@gradient-ui/gradient-engine) | Framework-free gradient, material, effect and animation generation. |
+| [`@gradient-ui/nuxt`](https://www.npmjs.com/package/@gradient-ui/nuxt)                       | Nuxt 3/4 module with SSR-aware theme and runtime integration.       |
 
 ## Install
 
+Gradient UI requires Vue 3.5+ and Node.js 20.19+.
+
 ```bash
 npm install @gradient-ui/core
 ```
 
-Gradient UI expects Vue 3. `vue-router` is optional: navigation components use
-the globally registered `RouterLink` when your app installs a router, and fall
-back to regular anchors for string `to` values when it does not.
-
-## Full Registration
-
-Import the stylesheet once near your app entry and install the plugin.
+Import the stylesheet once, then install the plugin when the whole component
+catalogue and default directives are needed:
 
 ```ts
 import { createApp } from 'vue';
@@ -57,249 +37,68 @@ import { createGradientUI } from '@gradient-ui/core';
 import '@gradient-ui/core/style.css';
 import App from './App.vue';
 
-const gradientUI = createGradientUI({
-	theme: {
-		seed: '#704aff',
-		mode: 'light'
-	},
-	icons: true,
-	defaults: {
-		global: {
-			color: 'primary'
-		},
-		GButton: {
-			rounded: true,
-			variant: 'default'
-		},
-		GInput: {
-			variant: 'outlined'
-		}
-	}
-});
-
-createApp(App).use(gradientUI).mount('#app');
-```
-
-The default export is also available for simple installs:
-
-```ts
-import GradientUI from '@gradient-ui/core';
-
-app.use(GradientUI);
+createApp(App)
+	.use(
+		createGradientUI({
+			theme: { seed: '#704aff', mode: 'light' }
+		})
+	)
+	.mount('#app');
 ```
 
-## Manual Imports
-
-Components, directives, services, theme helpers and composables are exposed as
-subpath exports.
+Use explicit imports if only selected components are needed:
 
 ```ts
-import { GButton, GInput, GModal } from '@gradient-ui/core/components';
-import { vRipple, vMask, vTooltip } from '@gradient-ui/core/directives';
-import { useSnackbar, useLoading } from '@gradient-ui/core/services';
-import { createTheme, useTheme } from '@gradient-ui/core/theme';
-import { useBreakpoints, useMask } from '@gradient-ui/core/use';
+import { GButton, GInput } from '@gradient-ui/core/components';
 import '@gradient-ui/core/style.css';
 ```
 
-You can also import public APIs from the root package:
+## Nuxt 3 and 4
 
-```ts
-import { GButton, createGradientUI, useSnackbar } from '@gradient-ui/core';
-```
-
-## Optional Router
-
-Navigation components such as `GNavItem` and `GAsideItem` support both `href`
-and `to`.
-
-With Vue Router installed in the host app, `to` renders through `RouterLink`:
-
-```ts
-import { createApp } from 'vue';
-import { createRouter, createWebHistory } from 'vue-router';
-import GradientUI from '@gradient-ui/core';
-import App from './App.vue';
-
-const router = createRouter({
-	history: createWebHistory(),
-	routes: []
-});
-
-createApp(App).use(router).use(GradientUI).mount('#app');
-```
+Install the core package and Nuxt module:
 
-```vue
-<g-nav-item label="Docs" to="/docs" />
-```
-
-Without Vue Router, string `to` values become regular links. Object `to` values
-need Vue Router and otherwise render as non-navigation actions.
-
-## Theme
-
-Gradient UI can generate Material You style CSS tokens from a seed color.
-
-```ts
-app.use(
-	createGradientUI({
-		theme: '#704aff'
-	})
-);
+```bash
+npm install @gradient-ui/core @gradient-ui/nuxt
 ```
 
-Use object syntax when you need more control:
-
 ```ts
-app.use(
-	createGradientUI({
-		theme: {
-			seed: '#704aff',
-			mode: 'dark',
-			autoApply: true
-		}
-	})
-);
+export default defineNuxtConfig({
+	modules: ['@gradient-ui/nuxt'],
+	gradientUI: {
+		theme: { seed: '#704aff', mode: 'light' }
+	}
+});
 ```
 
-Pass `theme: false` when your host application owns the CSS variables.
+The module emits initial theme styles during SSR, creates isolated state per
+Nuxt application/request and offers component auto-imports. For request-aware
+responsive rendering, color mode, CSP and services outside component setup, see
+the [Nuxt and SSR guide](https://gradient-ui-docs.netlify.app/docs/ssr-nuxt).
 
-## Defaults
+## Gradient engine
 
-Component defaults let an application define shared prop values once.
+The engine is independent from Vue and can power other renderers or design
+tools:
 
-```ts
-app.use(
-	createGradientUI({
-		defaults: {
-			global: {
-				color: 'primary'
-			},
-			GButton: {
-				variant: 'default',
-				size: 'm'
-			},
-			GInput: {
-				variant: 'outlined'
-			}
-		}
-	})
-);
-```
-
-Local props always win over configured defaults.
-
-Use `variant: 'gradient'` when a component should render an expressive gradient
-surface:
-
-```vue
-<g-button label="Save" />
-<g-button label="Launch" variant="gradient" gradient-recipe="glare" />
+```bash
+npm install @gradient-ui/gradient-engine
 ```
 
-## Gradient Engine
-
-Gradient UI uses `@gradient-ui/gradient-engine` as its material generation
-layer. The engine is framework-free and can be used outside Vue:
-
 ```ts
 import { createGradientMaterial } from '@gradient-ui/gradient-engine';
 
 const material = createGradientMaterial('#704aff', {
 	preset: 'materialAction',
-	recipe: 'glare',
-	animation: {
-		preset: 'shift',
-		duration: 6000
-	}
+	recipe: 'glare'
 });
 ```
 
-The returned material contains CSS variables, CSS text, keyframes and effect
-descriptors that can be applied by Vue, React, vanilla JavaScript or SSR
-adapters.
-
-## Directives
-
-The full plugin registers all public directives:
-
-- `v-gradient-icon`
-- `v-gradient-text`
-- `v-loading`
-- `v-mask`
-- `v-ripple`
-- `v-tooltip`
-
-Manual registration is available too:
-
-```ts
-import { vRipple } from '@gradient-ui/core/directives';
-
-app.directive('ripple', vRipple);
-```
-
-## Services
-
-Service helpers are regular named exports.
-
-```ts
-import { useLoading, useSnackbar } from '@gradient-ui/core/services';
-
-const snackbar = useSnackbar();
-const loading = useLoading();
-
-snackbar.success('Saved');
-loading.show({ text: 'Syncing' });
-```
-
-## Forms And Validation
+## Figma plugin
 
-Form components accept validation rules compatible with `gib-validate`.
-
-```ts
-import { required, isEmail } from 'gib-validate';
-```
-
-Gradient UI includes the runtime integration used by form components. Install
-`gib-validate` directly when your application wants to author rules or use its
-validation composables.
-
-## Fonts
-
-Gradient UI does not bundle webfont CSS. The default font token uses a system
-font stack.
-
-Import your own font, or opt into Manrope and MDI font glyphs when you need
-them:
-
-```bash
-npm install @fontsource/manrope @mdi/font
-```
-
-```ts
-import '@fontsource/manrope/400.css';
-import '@fontsource/manrope/500.css';
-import '@fontsource/manrope/700.css';
-import '@mdi/font/css/materialdesignicons.css';
-```
-
-```css
-:root {
-	--g-token-font-family-base: manrope, sans-serif;
-}
-```
-
-## Package Exports
-
-```ts
-import '@gradient-ui/core/style.css';
-import { createGradientUI } from '@gradient-ui/core';
-import { GButton } from '@gradient-ui/core/components';
-import { vRipple } from '@gradient-ui/core/directives';
-import { useSnackbar } from '@gradient-ui/core/services';
-import { createTheme } from '@gradient-ui/core/theme';
-import { useBreakpoints } from '@gradient-ui/core/use';
-```
+Gradient UI Builder turns a seed color into editable Figma gradients, design
+tokens, glow layers and morph backgrounds. The plugin creates native Figma
+objects so a design can be refined after generation. Read the
+[Figma plugin guide](https://gradient-ui-docs.netlify.app/docs/figma-plugin).
 
 ## Development
 
@@ -317,14 +116,14 @@ npm run lint:css
 npm run build
 ```
 
-## Publish Checklist
+## Releases
 
-```bash
-npm run build
-npm pack --dry-run
-npm publish --access public
-```
+Releases are created through the `Release Package` GitHub Actions workflow. It
+synchronizes the publishable workspace versions, runs the SSR release gate,
+publishes `gradient-engine`, `core` and `nuxt` in dependency order, then creates
+the GitHub release. See [DEPLOYMENT.md](DEPLOYMENT.md) for the release and
+trusted-publishing setup.
 
 ## License
 
-MIT
+[MIT](LICENSE)

package/dist/BaseOverlay-DgBWbJbs.cjs

@@ -0,0 +1 @@
+"use strict";const vue=require("vue"),GTransition_vue_vue_type_script_setup_true_lang=require("./GTransition.vue_vue_type_script_setup_true_lang-CgELPmMA.cjs");require("./GExpandTransition.vue_vue_type_script_setup_true_lang-Ccl2Cemo.cjs");require("./GTransitionGroup.vue_vue_type_script_setup_true_lang-DDh0rXP7.cjs");const layerStack=require("./layerStack-Bn2nFt2F.cjs"),environment=require("./environment-Dr5kpq3D.cjs"),propsFactory=require("./propsFactory-DT6-QS4L.cjs"),transition=require("./transition-BPMUkgHY.cjs"),clientLifecycle=require("./clientLifecycle-DlIZRy4I.cjs"),_pluginVue_exportHelper=require("./_plugin-vue_export-helper-D_jf5u0r.cjs");let lockCount=0,previousOverflow="";function lockBody(){const clientDocument=environment.getClientDocument();clientDocument&&(lockCount===0&&(previousOverflow=clientDocument.body.style.overflow,clientDocument.body.style.overflow="hidden"),lockCount+=1)}function unlockBody(){const clientDocument=environment.getClientDocument();!clientDocument||lockCount===0||(lockCount-=1,lockCount===0&&(clientDocument.body.style.overflow=previousOverflow))}function useBodyScrollLock(open,enabled){vue.watch([open,enabled],([isOpen,isEnabled],[wasOpen,wasEnabled])=>{isOpen&&isEnabled&&(!wasOpen||!wasEnabled)&&lockBody(),(!isOpen||!isEnabled)&&wasOpen&&wasEnabled&&unlockBody()},{immediate:!0}),vue.onBeforeUnmount(()=>{open.value&&enabled.value&&unlockBody()})}const makeOverlayProps=propsFactory.propsFactory({...transition.makeTransitionProps(),modelValue:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},zIndexBase:{type:Number,default:2400},position:{type:String,default:"fixed"},placement:{type:String,default:"center"},persistent:{type:Boolean,default:!1},closeOnEsc:{type:Boolean,default:!0},closeOnOutside:{type:Boolean,default:!0},lockScroll:{type:Boolean,default:!0},scrim:{type:Boolean,default:!0},disabled:Boolean}),makeBaseOverlayProps=makeOverlayProps,_sfc_main=vue.defineComponent({__name:"BaseOverlay",props:makeBaseOverlayProps(),emits:["update:modelValue"],setup(__props,{expose:__expose,emit:__emit}){const props=__props,emit=__emit,rootRef=vue.ref(null),contentRef=vue.ref(null),{open}=layerStack.useControllableOpen(props,emit),{hasAppendTarget,appendTarget}=layerStack.useAppendTarget(()=>props.appendTo),{zIndex,isTopOverlay,bringToFront}=layerStack.useLayerStack({open,base:props.zIndexBase,kind:"overlay"}),lockScrollEnabled=vue.computed(()=>props.lockScroll&&props.position==="fixed"),overlayClasses=vue.computed(()=>({[`base-overlay_${props.position}`]:!0,[`base-overlay_${props.placement}`]:!0})),rootStyle=vue.computed(()=>({zIndex:zIndex.value})),contentStyle=vue.computed(()=>({zIndex:zIndex.value!=null?zIndex.value+1:void 0}));useBodyScrollLock(open,lockScrollEnabled);function close(){open.value=!1}function dismiss(){props.disabled||props.persistent||close()}function onScrimClick(){!props.closeOnOutside||!isTopOverlay.value||dismiss()}function onKeydown(event){event.key!=="Escape"||!open.value||!isTopOverlay.value||props.closeOnEsc&&(event.preventDefault(),dismiss())}return clientLifecycle.onClientMounted(({window:clientWindow})=>(clientWindow.addEventListener("keydown",onKeydown),()=>clientWindow.removeEventListener("keydown",onKeydown))),__expose({open,show:()=>{open.value=!0,bringToFront()},hide:close}),(_ctx,_cache)=>vue.unref(hasAppendTarget)?(vue.openBlock(),vue.createBlock(vue.Teleport,{key:0,to:vue.unref(appendTarget)},[vue.createVNode(vue.unref(GTransition_vue_vue_type_script_setup_true_lang._sfc_main),{transition:props.transition,name:"overlay",appear:""},{default:vue.withCtx(()=>[vue.unref(open)?(vue.openBlock(),vue.createElementBlock("div",{key:0,ref_key:"rootRef",ref:rootRef,class:vue.normalizeClass(["base-overlay",overlayClasses.value]),style:vue.normalizeStyle(rootStyle.value),onPointerdown:_cache[1]||(_cache[1]=vue.withModifiers((...args)=>vue.unref(bringToFront)&&vue.unref(bringToFront)(...args),["self"]))},[props.scrim?(vue.openBlock(),vue.createElementBlock("div",{key:0,class:"base-overlay__scrim",onClick:onScrimClick})):vue.createCommentVNode("",!0),vue.createElementVNode("div",{ref_key:"contentRef",ref:contentRef,class:"base-overlay__content",style:vue.normalizeStyle(contentStyle.value),onPointerdown:_cache[0]||(_cache[0]=vue.withModifiers((...args)=>vue.unref(bringToFront)&&vue.unref(bringToFront)(...args),["stop"]))},[vue.renderSlot(_ctx.$slots,"default",{close,dismiss,modelValue:vue.unref(open)},void 0,!0)],36)],38)):vue.createCommentVNode("",!0)]),_:3},8,["transition"])],8,["to"])):(vue.openBlock(),vue.createBlock(vue.unref(GTransition_vue_vue_type_script_setup_true_lang._sfc_main),{key:1,transition:props.transition,name:"overlay",appear:""},{default:vue.withCtx(()=>[vue.unref(open)?(vue.openBlock(),vue.createElementBlock("div",{key:0,ref_key:"rootRef",ref:rootRef,class:vue.normalizeClass(["base-overlay",overlayClasses.value]),style:vue.normalizeStyle(rootStyle.value),onPointerdown:_cache[3]||(_cache[3]=vue.withModifiers((...args)=>vue.unref(bringToFront)&&vue.unref(bringToFront)(...args),["self"]))},[props.scrim?(vue.openBlock(),vue.createElementBlock("div",{key:0,class:"base-overlay__scrim",onClick:onScrimClick})):vue.createCommentVNode("",!0),vue.createElementVNode("div",{ref_key:"contentRef",ref:contentRef,class:"base-overlay__content",style:vue.normalizeStyle(contentStyle.value),onPointerdown:_cache[2]||(_cache[2]=vue.withModifiers((...args)=>vue.unref(bringToFront)&&vue.unref(bringToFront)(...args),["stop"]))},[vue.renderSlot(_ctx.$slots,"default",{close,dismiss,modelValue:vue.unref(open)},void 0,!0)],36)],38)):vue.createCommentVNode("",!0)]),_:3},8,["transition"]))}}),BaseOverlay=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-a8785a7d"]]);exports.BaseOverlay=BaseOverlay;exports.makeOverlayProps=makeOverlayProps;

package/dist/BaseOverlay-DzJ37TCS.js

@@ -0,0 +1,216 @@
+import { watch, onBeforeUnmount, defineComponent, ref, computed, unref, openBlock, createBlock, Teleport, createVNode, withCtx, createElementBlock, withModifiers, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, renderSlot } from "vue";
+import { _ as _sfc_main$1 } from "./GTransition.vue_vue_type_script_setup_true_lang-CHGSgsZ0.js";
+import "./GExpandTransition.vue_vue_type_script_setup_true_lang-ztMeJVQO.js";
+import "./GTransitionGroup.vue_vue_type_script_setup_true_lang-CDu6W6-X.js";
+import { u as useControllableOpen, a as useAppendTarget, b as useLayerStack } from "./layerStack-C926It64.js";
+import { g as getClientDocument } from "./environment-o0e-UUbv.js";
+import { p as propsFactory } from "./propsFactory-FM5RGbLN.js";
+import { d as makeTransitionProps } from "./transition-DVGMCo2o.js";
+import { o as onClientMounted } from "./clientLifecycle-NZQzL_eH.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-B--vMWp3.js";
+let lockCount = 0, previousOverflow = "";
+function lockBody() {
+  const clientDocument = getClientDocument();
+  clientDocument && (lockCount === 0 && (previousOverflow = clientDocument.body.style.overflow, clientDocument.body.style.overflow = "hidden"), lockCount += 1);
+}
+function unlockBody() {
+  const clientDocument = getClientDocument();
+  !clientDocument || lockCount === 0 || (lockCount -= 1, lockCount === 0 && (clientDocument.body.style.overflow = previousOverflow));
+}
+function useBodyScrollLock(open, enabled) {
+  watch(
+    [open, enabled],
+    ([isOpen, isEnabled], [wasOpen, wasEnabled]) => {
+      isOpen && isEnabled && (!wasOpen || !wasEnabled) && lockBody(), (!isOpen || !isEnabled) && wasOpen && wasEnabled && unlockBody();
+    },
+    { immediate: !0 }
+  ), onBeforeUnmount(() => {
+    open.value && enabled.value && unlockBody();
+  });
+}
+const makeOverlayProps = propsFactory({
+  ...makeTransitionProps(),
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  defaultOpen: {
+    type: Boolean,
+    default: !1
+  },
+  appendTo: {
+    type: String,
+    default: "body"
+  },
+  zIndexBase: {
+    type: Number,
+    default: 2400
+  },
+  position: {
+    type: String,
+    default: "fixed"
+  },
+  placement: {
+    type: String,
+    default: "center"
+  },
+  persistent: {
+    type: Boolean,
+    default: !1
+  },
+  closeOnEsc: {
+    type: Boolean,
+    default: !0
+  },
+  closeOnOutside: {
+    type: Boolean,
+    default: !0
+  },
+  lockScroll: {
+    type: Boolean,
+    default: !0
+  },
+  scrim: {
+    type: Boolean,
+    default: !0
+  },
+  disabled: Boolean
+}), makeBaseOverlayProps = makeOverlayProps, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BaseOverlay",
+  props: makeBaseOverlayProps(),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props, emit = __emit, rootRef = ref(null), contentRef = ref(null), { open } = useControllableOpen(props, emit), { hasAppendTarget, appendTarget } = useAppendTarget(
+      () => props.appendTo
+    ), { zIndex, isTopOverlay, bringToFront } = useLayerStack({
+      open,
+      base: props.zIndexBase,
+      kind: "overlay"
+    }), lockScrollEnabled = computed(
+      () => props.lockScroll && props.position === "fixed"
+    ), overlayClasses = computed(() => ({
+      [`base-overlay_${props.position}`]: !0,
+      [`base-overlay_${props.placement}`]: !0
+    })), rootStyle = computed(() => ({
+      zIndex: zIndex.value
+    })), contentStyle = computed(() => ({
+      zIndex: zIndex.value != null ? zIndex.value + 1 : void 0
+    }));
+    useBodyScrollLock(open, lockScrollEnabled);
+    function close() {
+      open.value = !1;
+    }
+    function dismiss() {
+      props.disabled || props.persistent || close();
+    }
+    function onScrimClick() {
+      !props.closeOnOutside || !isTopOverlay.value || dismiss();
+    }
+    function onKeydown(event) {
+      event.key !== "Escape" || !open.value || !isTopOverlay.value || props.closeOnEsc && (event.preventDefault(), dismiss());
+    }
+    return onClientMounted(({ window: clientWindow }) => (clientWindow.addEventListener("keydown", onKeydown), () => clientWindow.removeEventListener("keydown", onKeydown))), __expose({
+      open,
+      show: () => {
+        open.value = !0, bringToFront();
+      },
+      hide: close
+    }), (_ctx, _cache) => unref(hasAppendTarget) ? (openBlock(), createBlock(Teleport, {
+      key: 0,
+      to: unref(appendTarget)
+    }, [
+      createVNode(unref(_sfc_main$1), {
+        transition: props.transition,
+        name: "overlay",
+        appear: ""
+      }, {
+        default: withCtx(() => [
+          unref(open) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref_key: "rootRef",
+            ref: rootRef,
+            class: normalizeClass(["base-overlay", overlayClasses.value]),
+            style: normalizeStyle(rootStyle.value),
+            onPointerdown: _cache[1] || (_cache[1] = withModifiers(
+              //@ts-ignore
+              (...args) => unref(bringToFront) && unref(bringToFront)(...args),
+              ["self"]
+            ))
+          }, [
+            props.scrim ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "base-overlay__scrim",
+              onClick: onScrimClick
+            })) : createCommentVNode("", !0),
+            createElementVNode("div", {
+              ref_key: "contentRef",
+              ref: contentRef,
+              class: "base-overlay__content",
+              style: normalizeStyle(contentStyle.value),
+              onPointerdown: _cache[0] || (_cache[0] = withModifiers(
+                //@ts-ignore
+                (...args) => unref(bringToFront) && unref(bringToFront)(...args),
+                ["stop"]
+              ))
+            }, [
+              renderSlot(_ctx.$slots, "default", {
+                close,
+                dismiss,
+                modelValue: unref(open)
+              }, void 0, !0)
+            ], 36)
+          ], 38)) : createCommentVNode("", !0)
+        ]),
+        _: 3
+      }, 8, ["transition"])
+    ], 8, ["to"])) : (openBlock(), createBlock(unref(_sfc_main$1), {
+      key: 1,
+      transition: props.transition,
+      name: "overlay",
+      appear: ""
+    }, {
+      default: withCtx(() => [
+        unref(open) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "rootRef",
+          ref: rootRef,
+          class: normalizeClass(["base-overlay", overlayClasses.value]),
+          style: normalizeStyle(rootStyle.value),
+          onPointerdown: _cache[3] || (_cache[3] = withModifiers(
+            //@ts-ignore
+            (...args) => unref(bringToFront) && unref(bringToFront)(...args),
+            ["self"]
+          ))
+        }, [
+          props.scrim ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "base-overlay__scrim",
+            onClick: onScrimClick
+          })) : createCommentVNode("", !0),
+          createElementVNode("div", {
+            ref_key: "contentRef",
+            ref: contentRef,
+            class: "base-overlay__content",
+            style: normalizeStyle(contentStyle.value),
+            onPointerdown: _cache[2] || (_cache[2] = withModifiers(
+              //@ts-ignore
+              (...args) => unref(bringToFront) && unref(bringToFront)(...args),
+              ["stop"]
+            ))
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              close,
+              dismiss,
+              modelValue: unref(open)
+            }, void 0, !0)
+          ], 36)
+        ], 38)) : createCommentVNode("", !0)
+      ]),
+      _: 3
+    }, 8, ["transition"]));
+  }
+}), BaseOverlay = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a8785a7d"]]);
+export {
+  BaseOverlay as B,
+  makeOverlayProps as m
+};