@resee-movies/nuxt-ux 0.2.3 → 0.3.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -125,6 +125,7 @@ function importModules(nuxt) {
       "Dialog",
       "Drawer",
       "Message",
+      "Menu",
       "ProgressBar",
       "ProgressSpinner",
       "Tag",
@@ -140,7 +141,13 @@ function importModules(nuxt) {
         from: "#resee-movies-nuxt-ux-primevue-passthrough"
       },
       options: {
-        unstyled: true
+        unstyled: true,
+        zIndex: {
+          overlay: 800,
+          modal: 850,
+          menu: 900,
+          tooltip: 1e3
+        }
       },
       composables: {
         include: ["usePrimeVue", "useToast"]

package/dist/runtime/components/Dialog.vue

@@ -10,7 +10,7 @@
     :footer           = "props.footer"
     :dismissable-mask = "props.dismissableMask"
     :position         = "props.position"
-    :class            = "['dialog', dialogWidth]"
+    :class            = "['dialog', dialogWidth, { 'dialog-styles': props.showModalStyle }]"
     :content-class    = "props.contentClass"
     :pt               = "passthroughProps"
     :aria-labelledby  = "dialogLabelledBy"
@@ -45,6 +45,8 @@ import CloseButton from "./CloseButton.vue";
 const props = defineProps({
   size: { type: String, required: false, default: "md" },
   showHeaderText: { type: Boolean, required: false, default: true },
+  showHeaderStyle: { type: Boolean, required: false, default: true },
+  showModalStyle: { type: Boolean, required: false, default: true },
   header: { type: null, required: false },
   footer: { type: null, required: false },
   visible: { type: Boolean, required: false, skipCheck: true },
@@ -100,9 +102,9 @@ const dialogLabelledBy = computed(() => {
 });
 const passthroughProps = computed(() => {
   return {
-    header: {
-      class: "header"
-    },
+    header: () => ({
+      class: ["header", { "header-styles": props.showHeaderStyle }]
+    }),
     content: {
       class: "content"
     },
@@ -117,5 +119,5 @@ const passthroughProps = computed(() => {
 </script>
 
 <style>
-@reference "tailwindcss";.dialog{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);height:calc(100% - --spacing(4));margin:--spacing(2);overflow:clip;width:100%;@variant sm{box-shadow:var(--shadow-heavy);height:auto}}.dialog .header{align-items:center;border-bottom:1px solid var(--color-global-background-accent);display:flex;gap:--spacing(3);margin-inline:--spacing(3);margin-top:--spacing(3);padding-bottom:--spacing(3)}.dialog .header .title{flex-grow:1;font-size:var(--text-lg)}.dialog .content{overflow-y:auto;padding:--spacing(3)}
+@reference "tailwindcss";.dialog{margin:--spacing(2);width:100%}.dialog .header{align-items:center;display:flex;gap:--spacing(3);padding-bottom:--spacing(3)}.dialog .header .title{flex-grow:1;font-size:var(--text-lg)}.dialog .content{overflow-y:auto}.dialog.dialog-styles{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);height:calc(100% - --spacing(4));overflow:clip;@variant sm{box-shadow:var(--shadow-heavy);height:auto}}.dialog.dialog-styles .header{margin-inline:--spacing(3);margin-top:--spacing(3)}.dialog.dialog-styles .header.header-styles{border-bottom:1px solid var(--color-global-background-accent)}.dialog.dialog-styles .content{padding:--spacing(3)}
 </style>

package/dist/runtime/components/Dialog.vue.d.ts

@@ -2,6 +2,8 @@ import type { DialogProps as PrimeDialogProps } from 'primevue';
 export interface DialogProps extends PrimeDialogProps {
     size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
     showHeaderText?: boolean;
+    showHeaderStyle?: boolean;
+    showModalStyle?: boolean;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:visible": (visible: boolean) => any;
@@ -10,6 +12,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dialog
 }>, {
     size: "xxs" | "xs" | "sm" | "md" | "lg";
     showHeaderText: boolean;
+    showHeaderStyle: boolean;
+    showModalStyle: boolean;
     modal: boolean;
     contentClass: any;
     closable: boolean;

package/dist/runtime/components/Icon.vue

@@ -1,7 +1,17 @@
 <template>
   <Transition name="fade" mode="out-in">
-    <LoadingIndicator v-if="props.loading" :size="props.size" class="icon" />
-    <span v-else role="presentation" :class="['icon', props.name, props.size, { 'color-cycle': props.colorCycle }]" />
+    <ProgressSpinner
+      v-if  = "props.loading"
+      :size = "props.size"
+      class = "icon"
+    />
+
+    <span
+      v-else
+      v-bind = "attrs"
+      role   = "presentation"
+      :class = "['icon', props.name, props.size, { 'color-cycle': props.colorCycle }]"
+    />
   </Transition>
 </template>
 
@@ -10,7 +20,9 @@
 </script>
 
 <script setup>
-import LoadingIndicator from "./LoadingIndicator.vue";
+import { useAttrs } from "vue";
+import ProgressSpinner from "./ProgressSpinner.vue";
+const attrs = useAttrs();
 const props = defineProps({
   name: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false, default: false },

package/dist/runtime/components/Menu.vue

@@ -0,0 +1,87 @@
+<template>
+  <slot
+    name      = "control"
+    :toggle   = "(event) => menu?.toggle(event)"
+    :menu-id  = "menuId"
+    :expanded = "visible"
+  />
+
+  <PrimeMenu
+    ref    = "menu"
+    v-bind = "attrs"
+    :model = "props.model"
+    :popup = "true"
+    :id    = "menuId"
+    class  = "menu"
+    :pt    = "passthroughProps"
+    @show  = "visible = true"
+    @hide  = "visible = false"
+  >
+    <template v-if="slots.prefix || props.prefixText" #start>
+      <slot name="prefix">
+        {{ props.prefixText }}
+      </slot>
+    </template>
+
+    <template #item="{ item }">
+      <slot name="item">
+        <IconTextPair
+          :text = "isString(item.label) ? item.label : item.label?.()"
+          :icon = "item.icon"
+        />
+      </slot>
+    </template>
+
+    <template v-if="slots.suffix || props.suffixText" #end>
+      <slot name="suffix">
+        {{ props.suffixText }}
+      </slot>
+    </template>
+  </PrimeMenu>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import PrimeMenu, {} from "primevue/menu";
+import { computed, ref, useAttrs, useId, useSlots } from "vue";
+import IconTextPair from "./IconTextPair.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const attrs = useAttrs();
+const slots = useSlots();
+const menuId = useId();
+const menu = ref();
+const visible = ref(false);
+const props = defineProps({
+  model: { type: Array, required: true },
+  prefixText: { type: String, required: false, default: void 0 },
+  suffixText: { type: String, required: false, default: void 0 }
+});
+defineExpose({
+  toggle: (event) => menu.value?.toggle(event),
+  expanded: () => visible.value,
+  menuId
+});
+const passthroughProps = computed(() => {
+  return {
+    start: {
+      class: "menu-prefix"
+    },
+    end: {
+      class: "menu-suffix"
+    },
+    transition: {
+      name: "fade"
+    }
+  };
+});
+</script>
+
+<style>
+@reference "tailwindcss";.menu{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-heavy);margin-block:--spacing(1);max-width:--spacing(80);padding:--spacing(1)}.menu li[role=separator]{border-bottom:1px solid var(--color-global-background-accent);margin-block:--spacing(1)}.menu li[role=none]{font-weight:var(--font-weight-semibold)}.menu li[role=menuitem],.menu li[role=none]{padding:--spacing(1) --spacing(2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu li[role=menuitem]{border-radius:var(--radius-md);cursor:pointer;transition:background-color;transition-duration:var(--default-transition-duration)}.menu li[role=menuitem][data-p-focused=true]{background-color:var(--color-background-scale-c)}.menu li[role=menuitem][aria-disabled=true]{color:var(--color-global-foreground-accent);cursor:not-allowed}.menu li[role=menuitem][aria-disabled=true][data-p-focused=true]{background-color:transparent}.menu .menu-prefix{border-bottom:1px solid var(--color-global-background-accent);margin-bottom:--spacing(1);padding:0 --spacing(2) --spacing(1)}.menu .menu-suffix{border-top:1px solid var(--color-global-background-accent);margin-top:--spacing(1);padding:--spacing(1) --spacing(2) 0}
+</style>

package/dist/runtime/components/Menu.vue.d.ts

@@ -0,0 +1,41 @@
+import type { ComputedGetter } from 'vue';
+export interface MenuProps {
+    model: MenuItem[];
+    prefixText?: string;
+    suffixText?: string;
+}
+export interface MenuItem {
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+    separator?: boolean;
+    items?: MenuItem[];
+}
+export interface MenuExposes {
+    toggle: (event: Event) => void;
+    menuId: string;
+    expanded: ComputedGetter<boolean>;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MenuProps, MenuExposes, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {
+    prefixText: string;
+    suffixText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    control?: (props: {
+        toggle: (event: Event) => void | undefined;
+        menuId: string;
+        expanded: boolean;
+    }) => any;
+} & {
+    prefix?: (props: {}) => any;
+} & {
+    item?: (props: {}) => any;
+} & {
+    suffix?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ProgressSpinner.vue.d.ts

@@ -0,0 +1,9 @@
+import type { IconProps } from './Icon.vue.js';
+export interface ProgressSpinnerProps {
+    size?: IconProps['size'];
+}
+declare const __VLS_export: import("vue").DefineComponent<ProgressSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressSpinnerProps> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/theme/css/brand/anchor.css

@@ -1 +1 @@
-@layer components{@property --a-underline-mask-stop{syntax:"<percentage>";inherits:false;initial-value:0%}.a,.a.default{--a-underline-mask-stop:0%;--default-underline:var(--color-background-scale-g);--default-underline-emphasis:var(--colorscale-resee-linear);--default-color:currentColor;--default-color-emphasis:currentColor;--accent-underline-base:var(--custom-accent-color,var(--default-underline));--accent-underline-mixed:color-mix(in srgb-linear,var(--accent-underline-base) 15%,var(--default-underline));--accent-underline-emphasis:var(--custom-accent-color,var(--default-underline-emphasis));--accent-color-base:var(--custom-accent-color,var(--default-color));--accent-color-mixed:color-mix(in srgb-linear,var(--accent-color-base) 30%,var(--default-color));--accent-color-emphasis-base:var(--custom-accent-color,var(--default-color-emphasis));--accent-color-emphasis-mixed:color-mix(in srgb-linear,var(--accent-color-emphasis-base) 60%,var(--default-color-emphasis));@variant dark{--default-underline-emphasis:var(--colorscale-resee-lite-linear)}background-image:linear-gradient(to right,var(--accent-underline-mixed),var(--accent-underline-mixed)),linear-gradient(to right,var(--accent-underline-emphasis),var(--accent-underline-emphasis));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,100% 1px;-webkit-box-decoration-break:slice;box-decoration-break:slice;color:var(--accent-color-mixed);font-weight:var(--font-weight-semibold);transition:color,background-size,--a-underline-mask-stop;transition-duration:.3s;transition-timing-function:ease-out}.a.default.small,.a.small{font-size:.875rem;line-height:1.25rem}.a.default:focus-visible,.a:focus-visible{outline:none}.a.default:not(:disabled,.disabled,[aria-disabled=true]):focus,.a.default:not(:disabled,.disabled,[aria-disabled=true]):hover,.a:not(:disabled,.disabled,[aria-disabled=true]):focus,.a:not(:disabled,.disabled,[aria-disabled=true]):hover{--a-underline-mask-stop:100%;background-size:0 1px,100% 1px;color:var(--accent-color-emphasis-mixed)}.a.default.no-underline,.a.no-underline{font-weight:var(--font-weight-medium);-webkit-mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);-webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% calc(100% - 1px),100% 1px;mask-size:100% calc(100% - 1px),100% 1px}}
+@layer components{@property --a-underline-mask-stop{syntax:"<percentage>";inherits:false;initial-value:0%}.a,.a.default,.prose a,.prose-container a{--a-underline-mask-stop:0%;--default-underline:var(--color-background-scale-g);--default-underline-emphasis:var(--colorscale-resee-linear);--default-color:currentColor;--default-color-emphasis:currentColor;--accent-underline-base:var(--custom-accent-color,var(--default-underline));--accent-underline-mixed:color-mix(in srgb-linear,var(--accent-underline-base) 15%,var(--default-underline));--accent-underline-emphasis:var(--custom-accent-color,var(--default-underline-emphasis));--accent-color-base:var(--custom-accent-color,var(--default-color));--accent-color-mixed:color-mix(in srgb-linear,var(--accent-color-base) 30%,var(--default-color));--accent-color-emphasis-base:var(--custom-accent-color,var(--default-color-emphasis));--accent-color-emphasis-mixed:color-mix(in srgb-linear,var(--accent-color-emphasis-base) 60%,var(--default-color-emphasis));@variant dark{--default-underline-emphasis:var(--colorscale-resee-lite-linear)}background-image:linear-gradient(to right,var(--accent-underline-mixed),var(--accent-underline-mixed)),linear-gradient(to right,var(--accent-underline-emphasis),var(--accent-underline-emphasis));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,100% 1px;-webkit-box-decoration-break:slice;box-decoration-break:slice;color:var(--accent-color-mixed);font-weight:var(--font-weight-semibold);transition:color,background-size,--a-underline-mask-stop;transition-duration:.3s;transition-timing-function:ease-out}.a.default.small,.a.small,.prose a.small,.prose-container a.small{font-size:.875rem;line-height:1.25rem}.a.default:focus-visible,.a:focus-visible,.prose a:focus-visible,.prose-container a:focus-visible{outline:none}.a.default:not(:disabled,.disabled,[aria-disabled=true]):focus,.a.default:not(:disabled,.disabled,[aria-disabled=true]):hover,.a:not(:disabled,.disabled,[aria-disabled=true]):focus,.a:not(:disabled,.disabled,[aria-disabled=true]):hover,.prose a:not(:disabled,.disabled,[aria-disabled=true]):focus,.prose a:not(:disabled,.disabled,[aria-disabled=true]):hover,.prose-container a:not(:disabled,.disabled,[aria-disabled=true]):focus,.prose-container a:not(:disabled,.disabled,[aria-disabled=true]):hover{--a-underline-mask-stop:100%;background-size:0 1px,100% 1px;color:var(--accent-color-emphasis-mixed)}.a.default.no-underline,.a.no-underline,.prose a.no-underline,.prose-container a.no-underline{font-weight:var(--font-weight-medium);-webkit-mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);-webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% calc(100% - 1px),100% 1px;mask-size:100% calc(100% - 1px),100% 1px}}

package/dist/runtime/theme/css/brand/button.css

@@ -1 +1 @@
-@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default{--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn{background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label{display:none}.btn.small{font-size:var(--icon-size-small)}.btn.small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large{font-size:var(--icon-size-large)}.btn.large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn{@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}
+@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default,.prose button,.prose-container button{--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn,.prose button,.prose-container button{background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible,.prose button:focus-visible,.prose-container button:focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose-container button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless,.prose button.borderless,.prose-container button.borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label,.prose button.icon-only .label,.prose-container button.icon-only .label{display:none}.btn.small,.prose button.small,.prose-container button.small{font-size:var(--icon-size-small)}.btn.small.icon-only,.prose button.small.icon-only,.prose-container button.small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only),.prose button.small:not(.icon-only),.prose-container button.small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large,.prose button.large,.prose-container button.large{font-size:var(--icon-size-large)}.btn.large.icon-only,.prose button.large.icon-only,.prose-container button.large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only),.prose button.large:not(.icon-only),.prose-container button.large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading,.prose button.loading,.prose-container button.loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn,.prose button,.prose-container button{@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"

package/dist/runtime/components/LoadingIndicator.vue.d.ts

@@ -1,9 +0,0 @@
-import type { IconProps } from './Icon.vue.js';
-export interface LoadingIndicatorProps {
-    size?: IconProps['size'];
-}
-declare const __VLS_export: import("vue").DefineComponent<LoadingIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingIndicatorProps> & Readonly<{}>, {
-    size: "sm" | "md" | "lg" | "xl";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;