@gradient-ui/core 0.8.0 → 1.0.0

package/dist/components/GSnackbar.mjs

@@ -0,0 +1,285 @@
+import { defineComponent, useSlots, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, unref, withCtx, createBlock, mergeProps, createElementVNode, Fragment, renderList, createCommentVNode, renderSlot, createTextVNode, toDisplayString } 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 { _ as _sfc_main$2 } from "../GButton.vue_vue_type_style_index_0_lang-D9qRus1m.js";
+import GIcon from "./GIcon.mjs";
+import { m as makeMaterialSurfaceProps, u as useMaterialSurface } from "../materialSurface-DKWanYUC.js";
+import GGradient from "./GGradient.mjs";
+import { u as usePx } from "../px-B-cyF02Z.js";
+import { m as makeSurfaceTextureProps } from "../surface-i-1vm2j3.js";
+import { p as propsFactory } from "../propsFactory-FM5RGbLN.js";
+import { o as onClientMounted } from "../clientLifecycle-NZQzL_eH.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const makeSnackbarProps = propsFactory({
+  ...makeMaterialSurfaceProps({ borderRadius: 12 }),
+  ...makeSurfaceTextureProps(),
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  defaultOpen: {
+    type: Boolean,
+    default: !1
+  },
+  title: String,
+  text: String,
+  icon: String,
+  color: {
+    type: String,
+    default: "primary"
+  },
+  state: String,
+  variant: {
+    type: String,
+    default: "tonal"
+  },
+  location: {
+    type: String,
+    default: "bottom-center"
+  },
+  position: {
+    type: String,
+    default: "fixed"
+  },
+  transition: {
+    type: [Boolean, String, Object],
+    default: void 0
+  },
+  timeout: {
+    type: Number,
+    default: 5e3
+  },
+  persistent: {
+    type: Boolean,
+    default: !1
+  },
+  closeable: {
+    type: Boolean,
+    default: !0
+  },
+  action: Object,
+  actionText: String,
+  closeOnAction: {
+    type: Boolean,
+    default: !0
+  },
+  multiline: {
+    type: Boolean,
+    default: !1
+  },
+  offset: {
+    type: [Number, String],
+    default: 24
+  },
+  maxWidth: {
+    type: [Number, String],
+    default: 520
+  },
+  pauseOnHover: {
+    type: Boolean,
+    default: !0
+  }
+}), _hoisted_1 = {
+  key: 0,
+  class: "g-snackbar__prepend"
+}, _hoisted_2 = { class: "g-snackbar__main" }, _hoisted_3 = {
+  key: 0,
+  class: "g-snackbar__title"
+}, _hoisted_4 = {
+  key: 1,
+  class: "g-snackbar__text"
+}, _hoisted_5 = {
+  key: 1,
+  class: "g-snackbar__actions"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GSnackbar",
+  props: makeSnackbarProps(),
+  emits: ["update:modelValue", "action", "close", "after-close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props, emit = __emit, slots = useSlots(), timerId = ref(), localOpen = ref(props.defaultOpen), closeReason = ref("manual"), isControlled = computed(() => props.modelValue !== void 0), isOpen = computed(
+      () => isControlled.value ? props.modelValue === !0 : localOpen.value
+    ), offset = usePx(props.offset), maxWidth = usePx(props.maxWidth), {
+      getMorphBlobStyle,
+      morphBlobs,
+      morphEnabled,
+      materialFrameProps,
+      surfaceStyles,
+      surfaceMaterialMorphBlobClasses,
+      surfaceMaterialMorphClasses,
+      surfaceOverlayClasses,
+      surfaceUnderlayClasses,
+      surfaceTextureClasses,
+      surfaceContentClasses
+    } = useMaterialSurface(props, "g-snackbar"), resolvedActionLabel = computed(
+      () => {
+        var _a;
+        return ((_a = props.action) == null ? void 0 : _a.label) ?? props.actionText;
+      }
+    ), snackbarFrameStyles = computed(() => ({
+      "--g-snackbar-max-width": maxWidth.value
+    })), layerStyles = computed(() => ({
+      "--g-snackbar-offset": offset.value
+    })), snackbarClasses = computed(() => [
+      `g-snackbar_${props.variant}`,
+      {
+        "g-snackbar_multiline": props.multiline,
+        [`g-snackbar_texture-${props.texture}`]: props.texture !== "none"
+      }
+    ]), layerClasses = computed(() => [
+      `g-snackbar-layer_position-${props.position}`,
+      `g-snackbar-layer_location-${props.location}`
+    ]), transition = computed(
+      () => props.transition ?? {
+        name: props.location.startsWith("top") ? "slide-y" : "slide-y-reverse",
+        appear: !0,
+        duration: 240,
+        leaveDuration: 180,
+        distance: "16px"
+      }
+    );
+    function setOpen(value) {
+      isControlled.value || (localOpen.value = value), emit("update:modelValue", value);
+    }
+    function clearTimer() {
+      timerId.value !== void 0 && (window.clearTimeout(timerId.value), timerId.value = void 0);
+    }
+    function startTimer() {
+      clearTimer(), !(!isOpen.value || props.persistent || props.timeout <= 0) && (timerId.value = window.setTimeout(() => {
+        close("timeout");
+      }, props.timeout));
+    }
+    function close(reason = "manual") {
+      closeReason.value = reason, clearTimer(), setOpen(!1), emit("close", reason);
+    }
+    function onAction() {
+      var _a, _b;
+      emit("action", (_a = props.action) == null ? void 0 : _a.value), (((_b = props.action) == null ? void 0 : _b.closeOnClick) ?? props.closeOnAction) && close("action");
+    }
+    function onMouseenter() {
+      props.pauseOnHover && clearTimer();
+    }
+    function onMouseleave() {
+      props.pauseOnHover && startTimer();
+    }
+    watch(isOpen, (value) => {
+      if (!value) {
+        clearTimer();
+        return;
+      }
+      startTimer();
+    }), onClientMounted(() => (startTimer(), clearTimer));
+    function onAfterClose() {
+      emit("after-close", closeReason.value);
+    }
+    return __expose({
+      open: () => setOpen(!0),
+      close
+    }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["g-snackbar-layer", layerClasses.value]),
+      style: normalizeStyle(layerStyles.value)
+    }, [
+      createVNode(unref(_sfc_main$1), {
+        transition: transition.value,
+        onAfterLeave: onAfterClose
+      }, {
+        default: withCtx(() => [
+          isOpen.value ? (openBlock(), createBlock(GGradient, mergeProps({
+            key: 0,
+            class: "g-snackbar__frame"
+          }, unref(materialFrameProps), {
+            "inherit-width": !1,
+            style: snackbarFrameStyles.value
+          }), {
+            default: withCtx(() => [
+              createElementVNode("section", {
+                class: normalizeClass(["g-snackbar", snackbarClasses.value]),
+                style: normalizeStyle(unref(surfaceStyles)),
+                role: "status",
+                "aria-live": "polite",
+                onMouseenter,
+                onMouseleave
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass(unref(surfaceUnderlayClasses))
+                }, null, 2),
+                unref(morphEnabled) ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass(unref(surfaceMaterialMorphClasses)),
+                  "aria-hidden": "true"
+                }, [
+                  (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(morphBlobs), (blob, index) => (openBlock(), createElementBlock("span", {
+                    key: index,
+                    class: normalizeClass(unref(surfaceMaterialMorphBlobClasses)),
+                    style: normalizeStyle(unref(getMorphBlobStyle)(blob))
+                  }, null, 6))), 128))
+                ], 2)) : createCommentVNode("", !0),
+                createElementVNode("span", {
+                  class: normalizeClass(unref(surfaceOverlayClasses))
+                }, null, 2),
+                createElementVNode("span", {
+                  class: normalizeClass(unref(surfaceTextureClasses))
+                }, null, 2),
+                createElementVNode("div", {
+                  class: normalizeClass(["g-snackbar__content", unref(surfaceContentClasses)])
+                }, [
+                  slots.prepend || props.icon ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                    renderSlot(_ctx.$slots, "prepend", {}, () => [
+                      props.icon ? (openBlock(), createBlock(GIcon, {
+                        key: 0,
+                        icon: props.icon,
+                        size: "22"
+                      }, null, 8, ["icon"])) : createCommentVNode("", !0)
+                    ], !0)
+                  ])) : createCommentVNode("", !0),
+                  createElementVNode("div", _hoisted_2, [
+                    slots.title || props.title ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                      renderSlot(_ctx.$slots, "title", {}, () => [
+                        createTextVNode(toDisplayString(props.title), 1)
+                      ], !0)
+                    ])) : createCommentVNode("", !0),
+                    slots.default || props.text ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                      renderSlot(_ctx.$slots, "default", {}, () => [
+                        createTextVNode(toDisplayString(props.text), 1)
+                      ], !0)
+                    ])) : createCommentVNode("", !0)
+                  ]),
+                  slots.action || resolvedActionLabel.value || props.closeable ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    renderSlot(_ctx.$slots, "action", {
+                      close: () => close("action")
+                    }, () => [
+                      resolvedActionLabel.value ? (openBlock(), createBlock(_sfc_main$2, {
+                        key: 0,
+                        variant: "text",
+                        size: "s",
+                        label: resolvedActionLabel.value,
+                        onClick: onAction
+                      }, null, 8, ["label"])) : createCommentVNode("", !0)
+                    ], !0),
+                    props.closeable ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      type: "button",
+                      class: "g-snackbar__close",
+                      "aria-label": "Close snackbar",
+                      onClick: _cache[0] || (_cache[0] = ($event) => close("dismiss"))
+                    }, [
+                      createVNode(GIcon, {
+                        icon: "close",
+                        size: "18"
+                      })
+                    ])) : createCommentVNode("", !0)
+                  ])) : createCommentVNode("", !0)
+                ], 2)
+              ], 38)
+            ]),
+            _: 3
+          }, 16, ["style"])) : createCommentVNode("", !0)
+        ]),
+        _: 3
+      }, 8, ["transition"])
+    ], 6));
+  }
+}), GSnackbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cce75591"]]);
+export {
+  GSnackbar as default
+};

package/dist/components/GSquircle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),surfaceColor=require("../surfaceColor-BlDoAKoV.cjs"),createId=require("../createId-tM8qn_N_.cjs"),material=require("../material-CkThdnz0.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1=["width","height","viewBox"],_hoisted_2=["id"],_hoisted_3=["d"],_hoisted_4=["width","height"],_hoisted_5=["width","height"],_hoisted_6=["d","stroke-width"],_hoisted_7=["x","y","width","height"],_hoisted_8=["stdDeviation"],_hoisted_9=["filter"],_hoisted_10=["mask","clip-path"],_hoisted_11=["d","fill"],_hoisted_12=["d","fill","fill-opacity"],_hoisted_13=["mask"],_hoisted_14=["d","stroke","stroke-width"],_hoisted_15=["clip-path"],_hoisted_16={class:"squircle__inner"},radius=.1,_sfc_main=vue.defineComponent({__name:"GSquircle",props:{size:{default:40},variant:{default:"tonal"},shadow:{type:Boolean,default:!0},border:{default:void 0},borderColor:{default:void 0},color:{default:"primary"},state:{},gradientRecipe:{},animationOptions:{},gradientBorder:{type:Boolean},glow:{type:[Boolean,Number]},animateGlow:{type:Boolean}},setup(__props){vue.useCssVars(_ctx=>({v7e6ec59a:height.value}));const props=__props,numericSize=vue.computed(()=>Number.parseFloat(String(props.size))),createSquirclePath=(size,inset=0)=>{const innerSize=Math.max(0,size-inset*2),start=inset+innerSize*.5,end=inset+innerSize,near=inset+innerSize*radius,far=inset+innerSize*(1-radius);return`M ${start},${inset} C ${far},${inset} ${end},${near} ${end},${start} C ${end},${far} ${far},${end} ${start},${end} C ${near},${end} ${inset},${far} ${inset},${start} C ${inset},${near} ${near},${inset} ${start},${inset} Z`},d=vue.computed(()=>createSquirclePath(numericSize.value)),id=createId.createId("g-squircle"),borderMaskId=`squircle-border-${id}`,glowFilterId=`squircle-glow-${id}`,height=vue.computed(()=>`${props.size}px`),{colorStyles}=surfaceColor.useSurfaceColor(props),{materialStyles}=material.useMaterial({color:()=>props.color??props.state,kind:"action",recipe:()=>props.gradientRecipe,effects:()=>props.variant==="gradient",animations:()=>!!props.animationOptions,animation:()=>props.animationOptions}),squircleStyles=vue.computed(()=>[colorStyles.value,materialStyles.value]),fillSurface=vue.computed(()=>props.variant==="tonal"?"var(--g-surface-color)":props.variant==="gradient"?"transparent":"var(--g-color)"),fillColor=vue.computed(()=>"var(--g-color)"),fillOpacity=vue.computed(()=>props.variant==="tonal"?"var(--g-token-state-tonal-opacity)":0),strokeColor=vue.computed(()=>props.borderColor??"transparent"),strokeWidth=vue.computed(()=>props.border??0),borderD=vue.computed(()=>createSquirclePath(numericSize.value,strokeWidth.value/2)),hasGradientBorder=vue.computed(()=>!!(props.gradientBorder&&strokeWidth.value>0)),showGlow=vue.computed(()=>!!(props.glow||props.animateGlow)),glowBlur=vue.computed(()=>{if(props.glow===!0||props.glow===void 0)return 7;const value=Number.parseFloat(String(props.glow));return Number.isFinite(value)?Math.max(0,value):7}),glowBleed=vue.computed(()=>glowBlur.value*4),borderMaskReference=vue.computed(()=>`url(#${borderMaskId})`),glowFilterReference=vue.computed(()=>`url(#${glowFilterId})`);return(_ctx,_cache)=>{const _directive_ripple=vue.resolveDirective("ripple");return vue.openBlock(),vue.createElementBlock("div",{class:vue.normalizeClass(["squircle",{squircle_shadow:props.shadow,squircle_glow:showGlow.value,squircle_animateGlow:props.animateGlow,[`squircle_${props.variant}`]:!0}]),style:vue.normalizeStyle(squircleStyles.value)},[(vue.openBlock(),vue.createElementBlock("svg",{id:"squircle",class:"squircle__svg",width:props.size,height:props.size,viewBox:`0 0 ${props.size} ${props.size}`},[vue.createElementVNode("defs",null,[vue.createElementVNode("clipPath",{id:`squircle-clip-${vue.unref(id)}`,fill:"red"},[vue.createElementVNode("path",{d:d.value},null,8,_hoisted_3)],8,_hoisted_2),vue.createElementVNode("mask",{id:borderMaskId,"mask-type":"luminance",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:props.size,height:props.size},[vue.createElementVNode("rect",{x:"0",y:"0",width:props.size,height:props.size,fill:"black"},null,8,_hoisted_5),vue.createElementVNode("path",{d:borderD.value,fill:"none",stroke:"white","stroke-width":strokeWidth.value},null,8,_hoisted_6)],8,_hoisted_4),showGlow.value?(vue.openBlock(),vue.createElementBlock("filter",{key:0,id:glowFilterId,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:-glowBleed.value,y:-glowBleed.value,width:Number(props.size)+glowBleed.value*2,height:Number(props.size)+glowBleed.value*2},[vue.createElementVNode("feGaussianBlur",{in:"SourceGraphic",stdDeviation:glowBlur.value},null,8,_hoisted_8)],8,_hoisted_7)):vue.createCommentVNode("",!0)]),showGlow.value?(vue.openBlock(),vue.createElementBlock("g",{key:0,class:"squircle__glow",filter:glowFilterReference.value},[(vue.openBlock(),vue.createElementBlock("foreignObject",{x:"0",y:"0",width:"100%",height:"100%",mask:hasGradientBorder.value?borderMaskReference.value:void 0,"clip-path":hasGradientBorder.value?void 0:`url(#squircle-clip-${vue.unref(id)})`},[..._cache[0]||(_cache[0]=[vue.createElementVNode("div",{class:"squircle__gradient-paint"},null,-1)])],8,_hoisted_10))],8,_hoisted_9)):vue.createCommentVNode("",!0),vue.createElementVNode("path",{class:"squircle__surface",d:d.value,fill:fillSurface.value},null,8,_hoisted_11),vue.createElementVNode("path",{class:"squircle__fill",d:d.value,fill:fillColor.value,"fill-opacity":fillOpacity.value},null,8,_hoisted_12),hasGradientBorder.value?(vue.openBlock(),vue.createElementBlock("foreignObject",{key:1,x:"0",y:"0",width:"100%",height:"100%",mask:borderMaskReference.value},[..._cache[1]||(_cache[1]=[vue.createElementVNode("div",{class:"squircle__gradient-paint"},null,-1)])],8,_hoisted_13)):vue.createCommentVNode("",!0),vue.createElementVNode("path",{class:"squircle__border",d:borderD.value,fill:"transparent",stroke:hasGradientBorder.value?"transparent":strokeColor.value,"stroke-width":strokeWidth.value},null,8,_hoisted_14),(vue.openBlock(),vue.createElementBlock("foreignObject",{x:"0",y:"0","clip-path":`url(#squircle-clip-${vue.unref(id)})`,width:"100%",height:"100%"},[vue.withDirectives((vue.openBlock(),vue.createElementBlock("div",_hoisted_16,[vue.renderSlot(_ctx.$slots,"default",{},void 0,!0)])),[[_directive_ripple]])],8,_hoisted_15))],8,_hoisted_1))],6)}}}),GSquircle=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-14cfd858"]]);exports.default=GSquircle;

package/dist/components/GSquircle.mjs

@@ -0,0 +1,180 @@
+import { defineComponent, useCssVars, computed, resolveDirective, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, unref, createCommentVNode, withDirectives, renderSlot } from "vue";
+import { u as useSurfaceColor } from "../surfaceColor-Cic675ry.js";
+import { c as createId } from "../createId-t3ke7cZx.js";
+import { d as useMaterial } from "../material-Cn0l9r_y.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = ["width", "height", "viewBox"], _hoisted_2 = ["id"], _hoisted_3 = ["d"], _hoisted_4 = ["width", "height"], _hoisted_5 = ["width", "height"], _hoisted_6 = ["d", "stroke-width"], _hoisted_7 = ["x", "y", "width", "height"], _hoisted_8 = ["stdDeviation"], _hoisted_9 = ["filter"], _hoisted_10 = ["mask", "clip-path"], _hoisted_11 = ["d", "fill"], _hoisted_12 = ["d", "fill", "fill-opacity"], _hoisted_13 = ["mask"], _hoisted_14 = ["d", "stroke", "stroke-width"], _hoisted_15 = ["clip-path"], _hoisted_16 = { class: "squircle__inner" }, radius = 0.1, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GSquircle",
+  props: {
+    size: { default: 40 },
+    variant: { default: "tonal" },
+    shadow: { type: Boolean, default: !0 },
+    border: { default: void 0 },
+    borderColor: { default: void 0 },
+    color: { default: "primary" },
+    state: {},
+    gradientRecipe: {},
+    animationOptions: {},
+    gradientBorder: { type: Boolean },
+    glow: { type: [Boolean, Number] },
+    animateGlow: { type: Boolean }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      v7e6ec59a: height.value
+    }));
+    const props = __props, numericSize = computed(() => Number.parseFloat(String(props.size))), createSquirclePath = (size, inset = 0) => {
+      const innerSize = Math.max(0, size - inset * 2), start = inset + innerSize * 0.5, end = inset + innerSize, near = inset + innerSize * radius, far = inset + innerSize * (1 - radius);
+      return `M ${start},${inset} C ${far},${inset} ${end},${near} ${end},${start} C ${end},${far} ${far},${end} ${start},${end} C ${near},${end} ${inset},${far} ${inset},${start} C ${inset},${near} ${near},${inset} ${start},${inset} Z`;
+    }, d = computed(() => createSquirclePath(numericSize.value)), id = createId("g-squircle"), borderMaskId = `squircle-border-${id}`, glowFilterId = `squircle-glow-${id}`, height = computed(() => `${props.size}px`), { colorStyles } = useSurfaceColor(props), { materialStyles } = useMaterial({
+      color: () => props.color ?? props.state,
+      kind: "action",
+      recipe: () => props.gradientRecipe,
+      effects: () => props.variant === "gradient",
+      animations: () => !!props.animationOptions,
+      animation: () => props.animationOptions
+    }), squircleStyles = computed(() => [
+      colorStyles.value,
+      materialStyles.value
+    ]), fillSurface = computed(
+      () => props.variant === "tonal" ? "var(--g-surface-color)" : props.variant === "gradient" ? "transparent" : "var(--g-color)"
+    ), fillColor = computed(() => "var(--g-color)"), fillOpacity = computed(
+      () => props.variant === "tonal" ? "var(--g-token-state-tonal-opacity)" : 0
+    ), strokeColor = computed(() => props.borderColor ?? "transparent"), strokeWidth = computed(() => props.border ?? 0), borderD = computed(
+      () => createSquirclePath(numericSize.value, strokeWidth.value / 2)
+    ), hasGradientBorder = computed(
+      () => !!(props.gradientBorder && strokeWidth.value > 0)
+    ), showGlow = computed(() => !!(props.glow || props.animateGlow)), glowBlur = computed(() => {
+      if (props.glow === !0 || props.glow === void 0) return 7;
+      const value = Number.parseFloat(String(props.glow));
+      return Number.isFinite(value) ? Math.max(0, value) : 7;
+    }), glowBleed = computed(() => glowBlur.value * 4), borderMaskReference = computed(() => `url(#${borderMaskId})`), glowFilterReference = computed(() => `url(#${glowFilterId})`);
+    return (_ctx, _cache) => {
+      const _directive_ripple = resolveDirective("ripple");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["squircle", {
+          squircle_shadow: props.shadow,
+          squircle_glow: showGlow.value,
+          squircle_animateGlow: props.animateGlow,
+          [`squircle_${props.variant}`]: !0
+        }]),
+        style: normalizeStyle(squircleStyles.value)
+      }, [
+        (openBlock(), createElementBlock("svg", {
+          id: "squircle",
+          class: "squircle__svg",
+          width: props.size,
+          height: props.size,
+          viewBox: `0 0 ${props.size} ${props.size}`
+        }, [
+          createElementVNode("defs", null, [
+            createElementVNode("clipPath", {
+              id: `squircle-clip-${unref(id)}`,
+              fill: "red"
+            }, [
+              createElementVNode("path", { d: d.value }, null, 8, _hoisted_3)
+            ], 8, _hoisted_2),
+            createElementVNode("mask", {
+              id: borderMaskId,
+              "mask-type": "luminance",
+              maskUnits: "userSpaceOnUse",
+              x: "0",
+              y: "0",
+              width: props.size,
+              height: props.size
+            }, [
+              createElementVNode("rect", {
+                x: "0",
+                y: "0",
+                width: props.size,
+                height: props.size,
+                fill: "black"
+              }, null, 8, _hoisted_5),
+              createElementVNode("path", {
+                d: borderD.value,
+                fill: "none",
+                stroke: "white",
+                "stroke-width": strokeWidth.value
+              }, null, 8, _hoisted_6)
+            ], 8, _hoisted_4),
+            showGlow.value ? (openBlock(), createElementBlock("filter", {
+              key: 0,
+              id: glowFilterId,
+              "color-interpolation-filters": "sRGB",
+              filterUnits: "userSpaceOnUse",
+              x: -glowBleed.value,
+              y: -glowBleed.value,
+              width: Number(props.size) + glowBleed.value * 2,
+              height: Number(props.size) + glowBleed.value * 2
+            }, [
+              createElementVNode("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: glowBlur.value
+              }, null, 8, _hoisted_8)
+            ], 8, _hoisted_7)) : createCommentVNode("", !0)
+          ]),
+          showGlow.value ? (openBlock(), createElementBlock("g", {
+            key: 0,
+            class: "squircle__glow",
+            filter: glowFilterReference.value
+          }, [
+            (openBlock(), createElementBlock("foreignObject", {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              mask: hasGradientBorder.value ? borderMaskReference.value : void 0,
+              "clip-path": hasGradientBorder.value ? void 0 : `url(#squircle-clip-${unref(id)})`
+            }, [..._cache[0] || (_cache[0] = [
+              createElementVNode("div", { class: "squircle__gradient-paint" }, null, -1)
+            ])], 8, _hoisted_10))
+          ], 8, _hoisted_9)) : createCommentVNode("", !0),
+          createElementVNode("path", {
+            class: "squircle__surface",
+            d: d.value,
+            fill: fillSurface.value
+          }, null, 8, _hoisted_11),
+          createElementVNode("path", {
+            class: "squircle__fill",
+            d: d.value,
+            fill: fillColor.value,
+            "fill-opacity": fillOpacity.value
+          }, null, 8, _hoisted_12),
+          hasGradientBorder.value ? (openBlock(), createElementBlock("foreignObject", {
+            key: 1,
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            mask: borderMaskReference.value
+          }, [..._cache[1] || (_cache[1] = [
+            createElementVNode("div", { class: "squircle__gradient-paint" }, null, -1)
+          ])], 8, _hoisted_13)) : createCommentVNode("", !0),
+          createElementVNode("path", {
+            class: "squircle__border",
+            d: borderD.value,
+            fill: "transparent",
+            stroke: hasGradientBorder.value ? "transparent" : strokeColor.value,
+            "stroke-width": strokeWidth.value
+          }, null, 8, _hoisted_14),
+          (openBlock(), createElementBlock("foreignObject", {
+            x: "0",
+            y: "0",
+            "clip-path": `url(#squircle-clip-${unref(id)})`,
+            width: "100%",
+            height: "100%"
+          }, [
+            withDirectives((openBlock(), createElementBlock("div", _hoisted_16, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, !0)
+            ])), [
+              [_directive_ripple]
+            ])
+          ], 8, _hoisted_15))
+        ], 8, _hoisted_1))
+      ], 6);
+    };
+  }
+}), GSquircle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14cfd858"]]);
+export {
+  GSquircle as default
+};

package/dist/components/GStepPanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const vue=require("vue"),components_GGradient=require("./GGradient.cjs"),density=require("../density-C3E1eUQ3.cjs"),materialSurface=require("../materialSurface-BZWqxSOo.cjs"),px=require("../px-CVkec5Jf.cjs"),types=require("../types-BPZPPi6n.cjs"),_pluginVue_exportHelper=require("../_plugin-vue_export-helper-D_jf5u0r.cjs"),_hoisted_1=["id","aria-labelledby"],_sfc_main=vue.defineComponent({inheritAttrs:!1,__name:"GStepPanel",props:types.makeStepPanelProps(),setup(__props){const attrs=vue.useAttrs(),props=__props,stepper=types.useStepperInject(),selected=vue.computed(()=>stepper?stepper.isSelected(props.value):!1),item=vue.computed(()=>stepper==null?void 0:stepper.items.value.find(step=>Object.is(step.value,props.value))),shouldRender=vue.computed(()=>props.eager||selected.value),slotProps=vue.computed(()=>{var _a;return{selected:selected.value,value:props.value,modelValue:stepper==null?void 0:stepper.modelValue.value,item:item.value,index:((_a=item.value)==null?void 0:_a.index)??-1}}),densityClass=density.useDensity(props,"g-step-panel"),resolvedColor=vue.computed(()=>props.color??(stepper==null?void 0:stepper.color.value)),panelRadius=px.usePx(vue.computed(()=>props.borderRadius??12)),frameStyles=vue.computed(()=>({"--g-step-panel-radius":panelRadius.value})),{getMorphBlobStyle,morphBlobs,morphEnabled,materialFrameProps,surfaceStyles,surfaceMaterialMorphBlobClasses,surfaceMaterialMorphClasses,surfaceOverlayClasses,surfaceUnderlayClasses,surfaceTextureClasses,surfaceContentClasses}=materialSurface.useMaterialSurface({get animateGlow(){return props.animateGlow},get animationOptions(){return props.animationOptions},get backdropBlur(){return props.backdropBlur},get borderRadius(){return props.borderRadius},get borderWidth(){return props.borderWidth},get color(){return resolvedColor.value},get dropShadow(){return props.dropShadow},get dropShadowOptions(){return props.dropShadowOptions},get glow(){return props.glow},get gradientRecipe(){return props.gradientRecipe},get morph(){return props.morph},get morphOptions(){return props.morphOptions},get placement(){return props.placement},get shadow(){return props.shadow},get shadowOptions(){return props.shadowOptions},get state(){return props.state},get variant(){return props.variant}},"g-step-panel");return(_ctx,_cache)=>shouldRender.value?vue.withDirectives((vue.openBlock(),vue.createBlock(components_GGradient.default,vue.mergeProps({key:0,class:"g-step-panel__frame",style:frameStyles.value},vue.unref(materialFrameProps)),{default:vue.withCtx(()=>{var _a,_b;return[vue.createElementVNode("section",vue.mergeProps({id:(_a=vue.unref(stepper))==null?void 0:_a.getPanelId(props.value),class:["g-step-panel",[vue.unref(densityClass),`g-step-panel_${props.variant}`,{[`g-step-panel_texture-${props.texture}`]:props.texture!=="none"}]],style:vue.unref(surfaceStyles),role:"tabpanel",tabindex:0,"aria-labelledby":(_b=vue.unref(stepper))==null?void 0:_b.getStepId(props.value)},vue.unref(attrs)),[vue.createElementVNode("span",{class:vue.normalizeClass(vue.unref(surfaceUnderlayClasses))},null,2),vue.unref(morphEnabled)?(vue.openBlock(),vue.createElementBlock("span",{key:0,class:vue.normalizeClass(vue.unref(surfaceMaterialMorphClasses)),"aria-hidden":"true"},[(vue.openBlock(!0),vue.createElementBlock(vue.Fragment,null,vue.renderList(vue.unref(morphBlobs),(blob,index)=>(vue.openBlock(),vue.createElementBlock("span",{key:index,class:vue.normalizeClass(vue.unref(surfaceMaterialMorphBlobClasses)),style:vue.normalizeStyle(vue.unref(getMorphBlobStyle)(blob))},null,6))),128))],2)):vue.createCommentVNode("",!0),vue.createElementVNode("span",{class:vue.normalizeClass(vue.unref(surfaceOverlayClasses))},null,2),vue.createElementVNode("span",{class:vue.normalizeClass(vue.unref(surfaceTextureClasses))},null,2),vue.createElementVNode("div",{class:vue.normalizeClass(["g-step-panel__content",vue.unref(surfaceContentClasses)])},[vue.renderSlot(_ctx.$slots,"default",vue.normalizeProps(vue.guardReactiveProps(slotProps.value)),void 0,!0)],2)],16,_hoisted_1)]}),_:3},16,["style"])),[[vue.vShow,selected.value]]):vue.createCommentVNode("",!0)}}),GStepPanel=_pluginVue_exportHelper._export_sfc(_sfc_main,[["__scopeId","data-v-e52449f9"]]);exports.default=GStepPanel;

package/dist/components/GStepPanel.mjs

@@ -0,0 +1,156 @@
+import { defineComponent, useAttrs, computed, withDirectives, openBlock, createBlock, mergeProps, unref, withCtx, createElementVNode, normalizeClass, createElementBlock, Fragment, renderList, normalizeStyle, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, vShow } from "vue";
+import GGradient from "./GGradient.mjs";
+import { u as useDensity } from "../density-Ci15Ek7T.js";
+import { u as useMaterialSurface } from "../materialSurface-DKWanYUC.js";
+import { u as usePx } from "../px-B-cyF02Z.js";
+import { u as useStepperInject, m as makeStepPanelProps } from "../types-CAh-uxuw.js";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-B--vMWp3.js";
+const _hoisted_1 = ["id", "aria-labelledby"], _sfc_main = /* @__PURE__ */ defineComponent({
+  inheritAttrs: !1,
+  __name: "GStepPanel",
+  props: makeStepPanelProps(),
+  setup(__props) {
+    const attrs = useAttrs(), props = __props, stepper = useStepperInject(), selected = computed(
+      () => stepper ? stepper.isSelected(props.value) : !1
+    ), item = computed(
+      () => stepper == null ? void 0 : stepper.items.value.find(
+        (step) => Object.is(step.value, props.value)
+      )
+    ), shouldRender = computed(() => props.eager || selected.value), slotProps = computed(() => {
+      var _a;
+      return {
+        selected: selected.value,
+        value: props.value,
+        modelValue: stepper == null ? void 0 : stepper.modelValue.value,
+        item: item.value,
+        index: ((_a = item.value) == null ? void 0 : _a.index) ?? -1
+      };
+    }), densityClass = useDensity(props, "g-step-panel"), resolvedColor = computed(() => props.color ?? (stepper == null ? void 0 : stepper.color.value)), panelRadius = usePx(computed(() => props.borderRadius ?? 12)), frameStyles = computed(() => ({
+      "--g-step-panel-radius": panelRadius.value
+    })), {
+      getMorphBlobStyle,
+      morphBlobs,
+      morphEnabled,
+      materialFrameProps,
+      surfaceStyles,
+      surfaceMaterialMorphBlobClasses,
+      surfaceMaterialMorphClasses,
+      surfaceOverlayClasses,
+      surfaceUnderlayClasses,
+      surfaceTextureClasses,
+      surfaceContentClasses
+    } = useMaterialSurface(
+      {
+        get animateGlow() {
+          return props.animateGlow;
+        },
+        get animationOptions() {
+          return props.animationOptions;
+        },
+        get backdropBlur() {
+          return props.backdropBlur;
+        },
+        get borderRadius() {
+          return props.borderRadius;
+        },
+        get borderWidth() {
+          return props.borderWidth;
+        },
+        get color() {
+          return resolvedColor.value;
+        },
+        get dropShadow() {
+          return props.dropShadow;
+        },
+        get dropShadowOptions() {
+          return props.dropShadowOptions;
+        },
+        get glow() {
+          return props.glow;
+        },
+        get gradientRecipe() {
+          return props.gradientRecipe;
+        },
+        get morph() {
+          return props.morph;
+        },
+        get morphOptions() {
+          return props.morphOptions;
+        },
+        get placement() {
+          return props.placement;
+        },
+        get shadow() {
+          return props.shadow;
+        },
+        get shadowOptions() {
+          return props.shadowOptions;
+        },
+        get state() {
+          return props.state;
+        },
+        get variant() {
+          return props.variant;
+        }
+      },
+      "g-step-panel"
+    );
+    return (_ctx, _cache) => shouldRender.value ? withDirectives((openBlock(), createBlock(GGradient, mergeProps({
+      key: 0,
+      class: "g-step-panel__frame",
+      style: frameStyles.value
+    }, unref(materialFrameProps)), {
+      default: withCtx(() => {
+        var _a, _b;
+        return [
+          createElementVNode("section", mergeProps({
+            id: (_a = unref(stepper)) == null ? void 0 : _a.getPanelId(props.value),
+            class: ["g-step-panel", [
+              unref(densityClass),
+              `g-step-panel_${props.variant}`,
+              {
+                [`g-step-panel_texture-${props.texture}`]: props.texture !== "none"
+              }
+            ]],
+            style: unref(surfaceStyles),
+            role: "tabpanel",
+            tabindex: 0,
+            "aria-labelledby": (_b = unref(stepper)) == null ? void 0 : _b.getStepId(props.value)
+          }, unref(attrs)), [
+            createElementVNode("span", {
+              class: normalizeClass(unref(surfaceUnderlayClasses))
+            }, null, 2),
+            unref(morphEnabled) ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(unref(surfaceMaterialMorphClasses)),
+              "aria-hidden": "true"
+            }, [
+              (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(morphBlobs), (blob, index) => (openBlock(), createElementBlock("span", {
+                key: index,
+                class: normalizeClass(unref(surfaceMaterialMorphBlobClasses)),
+                style: normalizeStyle(unref(getMorphBlobStyle)(blob))
+              }, null, 6))), 128))
+            ], 2)) : createCommentVNode("", !0),
+            createElementVNode("span", {
+              class: normalizeClass(unref(surfaceOverlayClasses))
+            }, null, 2),
+            createElementVNode("span", {
+              class: normalizeClass(unref(surfaceTextureClasses))
+            }, null, 2),
+            createElementVNode("div", {
+              class: normalizeClass(["g-step-panel__content", unref(surfaceContentClasses)])
+            }, [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), void 0, !0)
+            ], 2)
+          ], 16, _hoisted_1)
+        ];
+      }),
+      _: 3
+    }, 16, ["style"])), [
+      [vShow, selected.value]
+    ]) : createCommentVNode("", !0);
+  }
+}), GStepPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e52449f9"]]);
+export {
+  GStepPanel as default
+};