@gradient-ui/core 0.4.0 → 0.5.0-rc.0

package/README.md

@@ -11,6 +11,32 @@ The npm package is published as `@gradient-ui/core`.
 
 Documentation: https://gradient-ui-docs.netlify.app/docs/get-started
 
+## 0.5 RC
+
+Gradient UI `0.5` is the release-candidate line 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 RC when validating the next version:
+
+```bash
+npm install @gradient-ui/core@rc
+```
+
+The gradient engine can also be installed independently:
+
+```bash
+npm install @gradient-ui/gradient-engine
+```
+
 ## Install
 
 ```bash
@@ -43,7 +69,7 @@ const gradientUI = createGradientUI({
 		},
 		GButton: {
 			rounded: true,
-			variant: 'filled'
+			variant: 'default'
 		},
 		GInput: {
 			variant: 'outlined'
@@ -150,7 +176,7 @@ app.use(
 				color: 'primary'
 			},
 			GButton: {
-				variant: 'filled',
+				variant: 'default',
 				size: 'm'
 			},
 			GInput: {
@@ -163,6 +189,36 @@ app.use(
 
 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" />
+```
+
+## 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
+	}
+});
+```
+
+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:

package/dist/GLoading.vue_vue_type_style_index_0_lang-Bv3dWEq8.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),c=require("./surface-8z3gR7vF.cjs");require("@mdi/js");const L=(n,o)=>{const r=n.__vccOpts||n;for(const[a,d]of o)r[a]=d;return r},V=c.propsFactory({size:{type:String,default:"m"}});function W(n,o){return e.computed(()=>`${o}_${n.size}`)}const I={fade:"g-fade-transition",scale:"g-scale-transition","scale-only":"g-scale-only-transition","slide-x":"g-slide-x-transition","slide-x-reverse":"g-slide-x-reverse-transition","slide-y":"g-slide-y-transition","slide-y-reverse":"g-slide-y-reverse-transition",dialog:"g-dialog-transition",overlay:"g-overlay-transition",expand:"g-expand-transition"},B=c.propsFactory({transition:{type:[Boolean,String,Object],default:void 0}},"transition"),$=c.propsFactory({...B(),name:String,appear:Boolean,disabled:Boolean,group:Boolean,tag:String,mode:String,origin:String,duration:[Number,String],enterDuration:[Number,String],leaveDuration:[Number,String],easing:String,enterEasing:String,leaveEasing:String,distance:[Number,String],scale:[Number,String],opacity:{type:Boolean,default:void 0},leaveAbsolute:Boolean,hideOnLeave:Boolean,css:{type:Boolean,default:!0}},"transition");function U(n){return n?I[n]??n:""}function j(n){if(!(n===void 0||n===""))return typeof n=="number"?`${n}px`:n}function E(n){if(!(n===void 0||n===""))return typeof n=="number"?`${n}ms`:n}function T(n,o){if(n===void 0||n==="")return o;if(typeof n=="number")return n;const r=n.trim();if(r.endsWith("ms"))return Number.parseFloat(r);if(r.endsWith("s"))return Number.parseFloat(r)*1e3;const a=Number.parseFloat(r);return Number.isNaN(a)?o:a}function z(n,o){return n===!1?{...o,disabled:!0}:n===!0||n===void 0?o:typeof n=="string"?{...o,name:n}:{...o,...n}}function P(){const n=e.ref(!1);let o=null;const r=()=>{n.value=(o==null?void 0:o.matches)??!1};return e.onMounted(()=>{typeof window>"u"||!window.matchMedia||(o=window.matchMedia("(prefers-reduced-motion: reduce)"),r(),o.addEventListener("change",r))}),e.onBeforeUnmount(()=>{o==null||o.removeEventListener("change",r)}),n}const q=80,D=e.defineComponent({inheritAttrs:!1,__name:"GTransition",props:$({name:"fade",css:!0}),emits:["before-enter","after-enter","before-leave","leave","after-leave","enter-cancelled","leave-cancelled"],setup(n,{emit:o}){const r=n,a=o,d=e.useAttrs(),u=P(),p=e.computed(()=>r.group?e.TransitionGroup:e.Transition),s=e.computed(()=>z(r.transition,N.value)),f=e.computed(()=>v.value?"":U(s.value.name)),v=e.computed(()=>r.disabled||u.value||s.value.disabled),_=e.computed(()=>r.group||s.value.mode==="default"?void 0:s.value.mode),y=e.computed(()=>!v.value&&s.value.css!==!1),i=e.computed(()=>{if(!b.value||v.value)return;const t=s.value;return{enter:T(t.enterDuration??t.duration,220),leave:T(t.leaveDuration??t.duration,180)+q}}),b=e.computed(()=>s.value.name==="overlay"||f.value==="g-overlay-transition"),N=e.computed(()=>({name:r.name,appear:r.appear,mode:r.mode,origin:r.origin,duration:r.duration,enterDuration:r.enterDuration,leaveDuration:r.leaveDuration,easing:r.easing,enterEasing:r.enterEasing,leaveEasing:r.leaveEasing,distance:r.distance,scale:r.scale,opacity:r.opacity,leaveAbsolute:r.leaveAbsolute,hideOnLeave:r.hideOnLeave,css:r.css})),C=e.computed(()=>{const t=s.value;return{"--g-transition-enter-duration":E(t.enterDuration??t.duration),"--g-transition-leave-duration":E(t.leaveDuration??t.duration),"--g-transition-enter-easing":t.enterEasing??t.easing,"--g-transition-leave-easing":t.leaveEasing??t.easing,"--g-transition-origin":t.origin,"--g-transition-distance":j(t.distance),"--g-transition-scale":t.scale===void 0?void 0:String(t.scale),"--g-transition-opacity-from":t.opacity===!1?"1":void 0}});function h(t){if(t instanceof HTMLElement)for(const[l,x]of Object.entries(C.value))x!==void 0&&t.style.setProperty(l,x)}function w(t){const{offsetTop:l,offsetLeft:x,offsetWidth:G,offsetHeight:H}=t;t._gTransitionInitialStyles={position:t.style.position,top:t.style.top,left:t.style.left,width:t.style.width,height:t.style.height,display:t.style.display},t.style.position="absolute",t.style.top=`${l}px`,t.style.left=`${x}px`,t.style.width=`${G}px`,t.style.height=`${H}px`}function S(t){const l=t._gTransitionInitialStyles;l&&(t.style.position=l.position,t.style.top=l.top,t.style.left=l.left,t.style.width=l.width,t.style.height=l.height,t.style.display=l.display,delete t._gTransitionInitialStyles)}function g(t){h(t),a("before-enter",t)}function m(t){a("after-enter",t)}function k(t){h(t),a("before-leave",t)}function A(t){if(!(t instanceof HTMLElement)){a("leave",t);return}s.value.leaveAbsolute&&w(t),s.value.hideOnLeave&&t.style.setProperty("display","none","important"),a("leave",t)}function O(t){t instanceof HTMLElement&&S(t),a("after-leave",t)}function F(t){a("enter-cancelled",t)}function R(t){t instanceof HTMLElement&&S(t),a("leave-cancelled",t)}return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p.value),e.mergeProps(e.unref(d),{name:f.value,css:y.value,appear:s.value.appear,duration:i.value,mode:_.value,tag:r.group?r.tag:void 0,onBeforeEnter:g,onAfterEnter:m,onBeforeLeave:k,onLeave:A,onAfterLeave:O,onEnterCancelled:F,onLeaveCancelled:R}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["name","css","appear","duration","mode","tag"]))}}),J=c.propsFactory({...c.makeColorProps(),...c.makeRoundedProps(),...V(),...c.makeStateProps(),...c.makeSurfaceTextureProps(),modelValue:{type:Number,default:0},indeterminate:Boolean,noLabel:Boolean,label:String,labelAlign:{type:String,default:"center"},view:{type:String,default:"default"},segments:{type:Number,default:12}}),K={key:0,class:"g-progress__label"},Q=["aria-valuenow","aria-valuetext"],X=e.defineComponent({__name:"GProgress",props:J({color:"primary"}),setup(n){const o=n,{gradientStyles:r}=c.useSurfaceColor(o),a=e.ref(0),d=e.ref(null);let u;const p=e.computed(()=>Math.min(100,Math.max(0,o.modelValue))),s=c.usePx(a),f=e.computed(()=>Math.max(2,Math.round(o.segments))),v=e.computed(()=>Array.from({length:f.value-1},(g,m)=>m)),_=e.computed(()=>`${p.value}%`),y=e.computed(()=>o.label??`${Math.round(p.value)}%`),i=g=>({"--g-progress-segment-position":`${(g+1)/f.value*100}%`}),b=e.computed(()=>({...r.value,"--g-progress-value":_.value,"--g-progress-track-width":s.value})),N=()=>{u=new ResizeObserver(g=>{for(const m of g)a.value=m.contentRect.width}),d.value&&u.observe(d.value)};e.onMounted(()=>{N()}),e.onBeforeUnmount(()=>{u==null||u.disconnect()});const{surfaceOverlayClasses:C,surfaceUnderlayClasses:h,surfaceTextureClasses:w,surfaceContentClasses:S}=c.useSurfaceLayers("g-progress");return(g,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["g-progress",{"g-progress_rounded":o.rounded,"g-progress_indeterminate":o.indeterminate,"g-progress_no-label":o.noLabel,[`g-progress_${o.size}`]:!0,[`g-progress_label-${o.labelAlign}`]:!0,[`g-progress_view-${o.view}`]:!0,[`g-progress_texture-${o.texture}`]:o.texture!=="none"}]),style:e.normalizeStyle(b.value)},[o.noLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",K,[e.renderSlot(g.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(y.value),1)],!0)])),e.createElementVNode("div",{ref_key:"parentRef",ref:d,class:"g-progress__track",role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":o.indeterminate?void 0:p.value,"aria-valuetext":o.indeterminate?void 0:y.value},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(h))},null,2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(C))},null,2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(w))},null,2),e.createElementVNode("div",{class:e.normalizeClass(["g-progress__surface-content",e.unref(S)])},[...m[0]||(m[0]=[e.createElementVNode("div",{class:"g-progress__bar"},[e.createElementVNode("div",{class:"g-progress__active"},[e.createElementVNode("div",{class:"g-progress__overlay"})])],-1)])],2),o.view==="segmented"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(v.value,k=>(e.openBlock(),e.createElementBlock("span",{key:k,class:"g-progress__segment-divider",style:e.normalizeStyle(i(k))},null,4))),128)):e.createCommentVNode("",!0)],8,Q)],6))}}),M=L(X,[["__scopeId","data-v-4cff0429"]]),Y=c.propsFactory({...B(),text:String,noText:Boolean,show:Boolean,color:String,dark:Boolean,opacity:[Number,String],blur:[Number,String],progressView:String,onClose:Function}),Z={class:"g-loading__body"},ee={key:0,class:"g-loading__text"},te={class:"g-loading__progress"},ne=e.defineComponent({__name:"GLoading",props:Y({text:"Loading...",noText:!1,show:!1,color:"primary",dark:!1,opacity:void 0,blur:void 0,progressView:"glow",transition:()=>({name:"fade",duration:220}),onClose:void 0}),emits:["close"],setup(n,{expose:o,emit:r}){const a=n,d=r,u=e.ref(!1),p=e.computed(()=>a.show||u.value),s=e.computed(()=>({"--g-loading-overlay-opacity":a.opacity!==void 0?String(a.opacity):void 0,"--g-loading-overlay-blur":a.blur!==void 0?f(a.blur):void 0}));function f(i){return typeof i=="number"?`${i}px`:i}function v(){u.value=!0}function _(){u.value=!1}function y(){var i;(i=a.onClose)==null||i.call(a),d("close")}return o({hide:_,show:v,isVisible:p}),(i,b)=>(e.openBlock(),e.createBlock(e.unref(D),{transition:a.transition,name:"scale",onAfterLeave:y},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["g-loading",{"g-loading_dark":a.dark}]),style:e.normalizeStyle(s.value),"aria-live":"polite","aria-busy":"true"},[e.createElementVNode("div",Z,[a.noText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(a.text),1)])])),e.createElementVNode("div",te,[e.createVNode(M,{"no-label":"",indeterminate:"","model-value":100,color:a.color,view:a.progressView,size:"s"},null,8,["color","view"])])])],6)):e.createCommentVNode("",!0)]),_:3},8,["transition"]))}});exports.GProgress=M;exports._export_sfc=L;exports._sfc_main=ne;exports._sfc_main$1=D;exports.makeGTransitionProps=$;exports.makeSizeProps=V;exports.makeTransitionProps=B;exports.resolveTransitionOptions=z;exports.useReducedMotion=P;exports.useSize=W;

package/dist/GLoading.vue_vue_type_style_index_0_lang-CBB_GocW.js

@@ -0,0 +1,466 @@
+import { computed as s, ref as N, onMounted as R, onBeforeUnmount as G, defineComponent as z, useAttrs as Z, TransitionGroup as q, Transition as ee, openBlock as f, createBlock as F, resolveDynamicComponent as te, mergeProps as ne, unref as h, withCtx as H, renderSlot as A, createElementBlock as S, normalizeStyle as P, normalizeClass as b, createTextVNode as W, toDisplayString as I, createCommentVNode as B, createElementVNode as d, Fragment as oe, renderList as ae, createVNode as se } from "vue";
+import { p as w, f as re, g as ie, h as le, m as ue, i as de, j as ce, k as ge } from "./surface-BKu4KfkY.js";
+import "@mdi/js";
+const pe = (t, n) => {
+  const o = t.__vccOpts || t;
+  for (const [a, c] of n)
+    o[a] = c;
+  return o;
+}, ve = w({
+  size: {
+    type: String,
+    default: "m"
+  }
+});
+function ze(t, n) {
+  return s(() => `${n}_${t.size}`);
+}
+const fe = {
+  fade: "g-fade-transition",
+  scale: "g-scale-transition",
+  "scale-only": "g-scale-only-transition",
+  "slide-x": "g-slide-x-transition",
+  "slide-x-reverse": "g-slide-x-reverse-transition",
+  "slide-y": "g-slide-y-transition",
+  "slide-y-reverse": "g-slide-y-reverse-transition",
+  dialog: "g-dialog-transition",
+  overlay: "g-overlay-transition",
+  expand: "g-expand-transition"
+}, j = w(
+  {
+    transition: {
+      type: [Boolean, String, Object],
+      default: void 0
+    }
+  },
+  "transition"
+), me = w(
+  {
+    ...j(),
+    name: String,
+    appear: Boolean,
+    disabled: Boolean,
+    group: Boolean,
+    tag: String,
+    mode: String,
+    origin: String,
+    duration: [Number, String],
+    enterDuration: [Number, String],
+    leaveDuration: [Number, String],
+    easing: String,
+    enterEasing: String,
+    leaveEasing: String,
+    distance: [Number, String],
+    scale: [Number, String],
+    opacity: {
+      type: Boolean,
+      default: void 0
+    },
+    leaveAbsolute: Boolean,
+    hideOnLeave: Boolean,
+    css: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  "transition"
+);
+function ye(t) {
+  return t ? fe[t] ?? t : "";
+}
+function _e(t) {
+  if (!(t === void 0 || t === ""))
+    return typeof t == "number" ? `${t}px` : t;
+}
+function V(t) {
+  if (!(t === void 0 || t === ""))
+    return typeof t == "number" ? `${t}ms` : t;
+}
+function O(t, n) {
+  if (t === void 0 || t === "") return n;
+  if (typeof t == "number") return t;
+  const o = t.trim();
+  if (o.endsWith("ms"))
+    return Number.parseFloat(o);
+  if (o.endsWith("s"))
+    return Number.parseFloat(o) * 1e3;
+  const a = Number.parseFloat(o);
+  return Number.isNaN(a) ? n : a;
+}
+function be(t, n) {
+  return t === !1 ? {
+    ...n,
+    disabled: !0
+  } : t === !0 || t === void 0 ? n : typeof t == "string" ? {
+    ...n,
+    name: t
+  } : {
+    ...n,
+    ...t
+  };
+}
+function he() {
+  const t = N(!1);
+  let n = null;
+  const o = () => {
+    t.value = (n == null ? void 0 : n.matches) ?? !1;
+  };
+  return R(() => {
+    typeof window > "u" || !window.matchMedia || (n = window.matchMedia("(prefers-reduced-motion: reduce)"), o(), n.addEventListener("change", o));
+  }), G(() => {
+    n == null || n.removeEventListener("change", o);
+  }), t;
+}
+const Se = 80, xe = /* @__PURE__ */ z({
+  inheritAttrs: !1,
+  __name: "GTransition",
+  props: me({
+    name: "fade",
+    css: !0
+  }),
+  emits: ["before-enter", "after-enter", "before-leave", "leave", "after-leave", "enter-cancelled", "leave-cancelled"],
+  setup(t, { emit: n }) {
+    const o = t, a = n, c = Z(), u = he(), g = s(
+      () => o.group ? q : ee
+    ), r = s(
+      () => be(o.transition, D.value)
+    ), m = s(
+      () => y.value ? "" : ye(r.value.name)
+    ), y = s(
+      () => o.disabled || u.value || r.value.disabled
+    ), x = s(
+      () => o.group || r.value.mode === "default" ? void 0 : r.value.mode
+    ), _ = s(
+      () => !y.value && r.value.css !== !1
+    ), i = s(() => {
+      if (!L.value || y.value) return;
+      const e = r.value;
+      return {
+        enter: O(
+          e.enterDuration ?? e.duration,
+          220
+        ),
+        leave: O(
+          e.leaveDuration ?? e.duration,
+          180
+        ) + Se
+      };
+    }), L = s(
+      () => r.value.name === "overlay" || m.value === "g-overlay-transition"
+    ), D = s(() => ({
+      name: o.name,
+      appear: o.appear,
+      mode: o.mode,
+      origin: o.origin,
+      duration: o.duration,
+      enterDuration: o.enterDuration,
+      leaveDuration: o.leaveDuration,
+      easing: o.easing,
+      enterEasing: o.enterEasing,
+      leaveEasing: o.leaveEasing,
+      distance: o.distance,
+      scale: o.scale,
+      opacity: o.opacity,
+      leaveAbsolute: o.leaveAbsolute,
+      hideOnLeave: o.hideOnLeave,
+      css: o.css
+    })), E = s(() => {
+      const e = r.value;
+      return {
+        "--g-transition-enter-duration": V(
+          e.enterDuration ?? e.duration
+        ),
+        "--g-transition-leave-duration": V(
+          e.leaveDuration ?? e.duration
+        ),
+        "--g-transition-enter-easing": e.enterEasing ?? e.easing,
+        "--g-transition-leave-easing": e.leaveEasing ?? e.easing,
+        "--g-transition-origin": e.origin,
+        "--g-transition-distance": _e(e.distance),
+        "--g-transition-scale": e.scale === void 0 ? void 0 : String(e.scale),
+        "--g-transition-opacity-from": e.opacity === !1 ? "1" : void 0
+      };
+    });
+    function T(e) {
+      if (e instanceof HTMLElement)
+        for (const [l, $] of Object.entries(E.value))
+          $ !== void 0 && e.style.setProperty(l, $);
+    }
+    function M(e) {
+      const { offsetTop: l, offsetLeft: $, offsetWidth: X, offsetHeight: Y } = e;
+      e._gTransitionInitialStyles = {
+        position: e.style.position,
+        top: e.style.top,
+        left: e.style.left,
+        width: e.style.width,
+        height: e.style.height,
+        display: e.style.display
+      }, e.style.position = "absolute", e.style.top = `${l}px`, e.style.left = `${$}px`, e.style.width = `${X}px`, e.style.height = `${Y}px`;
+    }
+    function k(e) {
+      const l = e._gTransitionInitialStyles;
+      l && (e.style.position = l.position, e.style.top = l.top, e.style.left = l.left, e.style.width = l.width, e.style.height = l.height, e.style.display = l.display, delete e._gTransitionInitialStyles);
+    }
+    function p(e) {
+      T(e), a("before-enter", e);
+    }
+    function v(e) {
+      a("after-enter", e);
+    }
+    function C(e) {
+      T(e), a("before-leave", e);
+    }
+    function U(e) {
+      if (!(e instanceof HTMLElement)) {
+        a("leave", e);
+        return;
+      }
+      r.value.leaveAbsolute && M(e), r.value.hideOnLeave && e.style.setProperty("display", "none", "important"), a("leave", e);
+    }
+    function J(e) {
+      e instanceof HTMLElement && k(e), a("after-leave", e);
+    }
+    function K(e) {
+      a("enter-cancelled", e);
+    }
+    function Q(e) {
+      e instanceof HTMLElement && k(e), a("leave-cancelled", e);
+    }
+    return (e, l) => (f(), F(te(g.value), ne(h(c), {
+      name: m.value,
+      css: _.value,
+      appear: r.value.appear,
+      duration: i.value,
+      mode: x.value,
+      tag: o.group ? o.tag : void 0,
+      onBeforeEnter: p,
+      onAfterEnter: v,
+      onBeforeLeave: C,
+      onLeave: U,
+      onAfterLeave: J,
+      onEnterCancelled: K,
+      onLeaveCancelled: Q
+    }), {
+      default: H(() => [
+        A(e.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["name", "css", "appear", "duration", "mode", "tag"]));
+  }
+}), we = w({
+  ...ue(),
+  ...le(),
+  ...ve(),
+  ...ie(),
+  ...re(),
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  indeterminate: Boolean,
+  noLabel: Boolean,
+  label: String,
+  labelAlign: {
+    type: String,
+    default: "center"
+  },
+  view: {
+    type: String,
+    default: "default"
+  },
+  segments: {
+    type: Number,
+    default: 12
+  }
+}), Le = {
+  key: 0,
+  class: "g-progress__label"
+}, Te = ["aria-valuenow", "aria-valuetext"], ke = /* @__PURE__ */ z({
+  __name: "GProgress",
+  props: we({ color: "primary" }),
+  setup(t) {
+    const n = t, { gradientStyles: o } = de(n), a = N(0), c = N(null);
+    let u;
+    const g = s(
+      () => Math.min(100, Math.max(0, n.modelValue))
+    ), r = ce(a), m = s(
+      () => Math.max(2, Math.round(n.segments))
+    ), y = s(
+      () => Array.from({ length: m.value - 1 }, (p, v) => v)
+    ), x = s(() => `${g.value}%`), _ = s(
+      () => n.label ?? `${Math.round(g.value)}%`
+    ), i = (p) => ({
+      "--g-progress-segment-position": `${(p + 1) / m.value * 100}%`
+    }), L = s(() => ({
+      ...o.value,
+      "--g-progress-value": x.value,
+      "--g-progress-track-width": r.value
+    })), D = () => {
+      u = new ResizeObserver((p) => {
+        for (const v of p)
+          a.value = v.contentRect.width;
+      }), c.value && u.observe(c.value);
+    };
+    R(() => {
+      D();
+    }), G(() => {
+      u == null || u.disconnect();
+    });
+    const {
+      surfaceOverlayClasses: E,
+      surfaceUnderlayClasses: T,
+      surfaceTextureClasses: M,
+      surfaceContentClasses: k
+    } = ge("g-progress");
+    return (p, v) => (f(), S("div", {
+      class: b(["g-progress", {
+        "g-progress_rounded": n.rounded,
+        "g-progress_indeterminate": n.indeterminate,
+        "g-progress_no-label": n.noLabel,
+        [`g-progress_${n.size}`]: !0,
+        [`g-progress_label-${n.labelAlign}`]: !0,
+        [`g-progress_view-${n.view}`]: !0,
+        [`g-progress_texture-${n.texture}`]: n.texture !== "none"
+      }]),
+      style: P(L.value)
+    }, [
+      n.noLabel ? B("", !0) : (f(), S("div", Le, [
+        A(p.$slots, "default", {}, () => [
+          W(I(_.value), 1)
+        ], !0)
+      ])),
+      d("div", {
+        ref_key: "parentRef",
+        ref: c,
+        class: "g-progress__track",
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": n.indeterminate ? void 0 : g.value,
+        "aria-valuetext": n.indeterminate ? void 0 : _.value
+      }, [
+        d("span", {
+          class: b(h(T))
+        }, null, 2),
+        d("span", {
+          class: b(h(E))
+        }, null, 2),
+        d("span", {
+          class: b(h(M))
+        }, null, 2),
+        d("div", {
+          class: b(["g-progress__surface-content", h(k)])
+        }, [...v[0] || (v[0] = [
+          d("div", { class: "g-progress__bar" }, [
+            d("div", { class: "g-progress__active" }, [
+              d("div", { class: "g-progress__overlay" })
+            ])
+          ], -1)
+        ])], 2),
+        n.view === "segmented" ? (f(!0), S(oe, { key: 0 }, ae(y.value, (C) => (f(), S("span", {
+          key: C,
+          class: "g-progress__segment-divider",
+          style: P(i(C))
+        }, null, 4))), 128)) : B("", !0)
+      ], 8, Te)
+    ], 6));
+  }
+}), Ce = /* @__PURE__ */ pe(ke, [["__scopeId", "data-v-4cff0429"]]), $e = w({
+  ...j(),
+  text: String,
+  noText: Boolean,
+  show: Boolean,
+  color: String,
+  dark: Boolean,
+  opacity: [Number, String],
+  blur: [Number, String],
+  progressView: String,
+  onClose: Function
+}), Ne = { class: "g-loading__body" }, Be = {
+  key: 0,
+  class: "g-loading__text"
+}, De = { class: "g-loading__progress" }, Ae = /* @__PURE__ */ z({
+  __name: "GLoading",
+  props: $e({
+    text: "Loading...",
+    noText: !1,
+    show: !1,
+    color: "primary",
+    dark: !1,
+    opacity: void 0,
+    blur: void 0,
+    progressView: "glow",
+    transition: () => ({ name: "fade", duration: 220 }),
+    onClose: void 0
+  }),
+  emits: ["close"],
+  setup(t, { expose: n, emit: o }) {
+    const a = t, c = o, u = N(!1), g = s(() => a.show || u.value), r = s(() => ({
+      "--g-loading-overlay-opacity": a.opacity !== void 0 ? String(a.opacity) : void 0,
+      "--g-loading-overlay-blur": a.blur !== void 0 ? m(a.blur) : void 0
+    }));
+    function m(i) {
+      return typeof i == "number" ? `${i}px` : i;
+    }
+    function y() {
+      u.value = !0;
+    }
+    function x() {
+      u.value = !1;
+    }
+    function _() {
+      var i;
+      (i = a.onClose) == null || i.call(a), c("close");
+    }
+    return n({
+      hide: x,
+      show: y,
+      isVisible: g
+    }), (i, L) => (f(), F(h(xe), {
+      transition: a.transition,
+      name: "scale",
+      onAfterLeave: _
+    }, {
+      default: H(() => [
+        g.value ? (f(), S("div", {
+          key: 0,
+          class: b(["g-loading", { "g-loading_dark": a.dark }]),
+          style: P(r.value),
+          "aria-live": "polite",
+          "aria-busy": "true"
+        }, [
+          d("div", Ne, [
+            a.noText ? B("", !0) : (f(), S("div", Be, [
+              A(i.$slots, "default", {}, () => [
+                W(I(a.text), 1)
+              ])
+            ])),
+            d("div", De, [
+              se(Ce, {
+                "no-label": "",
+                indeterminate: "",
+                "model-value": 100,
+                color: a.color,
+                view: a.progressView,
+                size: "s"
+              }, null, 8, ["color", "view"])
+            ])
+          ])
+        ], 6)) : B("", !0)
+      ]),
+      _: 3
+    }, 8, ["transition"]));
+  }
+});
+export {
+  Ce as G,
+  Ae as _,
+  xe as a,
+  pe as b,
+  ve as c,
+  he as d,
+  me as e,
+  j as m,
+  be as r,
+  ze as u
+};