@resee-movies/nuxt-ux 0.19.1 → 0.20.1

package/dist/module.json

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

package/dist/runtime/components/Button.vue

@@ -61,7 +61,7 @@ const props = defineProps({
   tooltip: { type: String, required: false, default: void 0 },
   disabledTooltip: { type: String, required: false, default: void 0 },
   onClick: { type: [Function, Array], required: false },
-  type: { type: String, required: false, default: "button" },
+  type: { type: [String, null], required: false, default: "button" },
   text: { type: String, required: false },
   icon: { type: String, required: false },
   trailingIcon: { type: String, required: false },

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

@@ -25,7 +25,7 @@ export interface ButtonProps extends IconTextPairProps {
     tooltip?: string;
     disabledTooltip?: string;
     onClick?: ((evt: Event) => void | Promise<void>) | ((evt: Event) => void | Promise<void>)[];
-    type?: 'button' | 'submit' | 'reset';
+    type?: 'button' | 'submit' | 'reset' | null;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (evt: Event) => any;

package/dist/runtime/components/CardScroller.vue

@@ -68,7 +68,7 @@ const props = defineProps({
   toPageContainerEdge: { type: Boolean, required: false, default: true },
   styleWhenTransiting: { type: String, required: false, default: "right" },
   transitOpacity: { type: Boolean, required: false, default: true },
-  transitScale: { type: Boolean, required: false, default: true }
+  transitScale: { type: Boolean, required: false, default: false }
 });
 const slots = defineSlots();
 const ruler = ref();
@@ -167,8 +167,8 @@ function applyStyleChanges(transiting, styleOpacity, styleScale) {
       if (styleOpacity) {
         element.style.opacity = "1";
       }
-      if (styleScale) {
-        element.style.scale = "1";
+      if (styleScale && element.firstElementChild instanceof HTMLElement) {
+        element.firstElementChild.style.scale = "1";
       }
     } else if (direction === "left" && styleLeft || direction === "right" && styleRight) {
       if (styleOpacity) {

package/dist/runtime/components/GlobalHeader.vue

@@ -135,5 +135,5 @@ watch(
 </script>
 
 <style scoped>
-.placeholder{height:calc(v-bind(headerHeight)*1px)}header{position:relative;z-index:100}.header-affixed{box-shadow:var(--shadow-heavy);left:0;position:fixed;right:0;top:0;transform:translateY(0)}.header-affixed.header-transit{transition-duration:calc(var(--default-transition-duration)*2);transition-property:transform,box-shadow;transition-timing-function:var(--default-transition-timing-function)}.header-affixed.header-hidden{box-shadow:none;transform:translateY(calc(v-bind(drawerHeight)*-1px))}.subheader :deep(.btn){background:transparent;transition:background-color;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.subheader :deep(.btn).active{background:var(--color-global-background-accent)}
+.placeholder{height:calc(v-bind(headerHeight)*1px)}header{position:relative;transition-duration:calc(var(--default-transition-duration)*2);transition-property:box-shadow;transition-timing-function:var(--default-transition-timing-function);z-index:100}.header-affixed{box-shadow:var(--shadow-heavy);left:0;position:fixed;right:0;top:0;transform:translateY(0)}.header-affixed.header-transit{transition-property:transform,box-shadow}.header-affixed.header-hidden{box-shadow:none;transform:translateY(calc(v-bind(drawerHeight)*-1px))}.subheader :deep(.btn){background:transparent;transition:background-color;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.subheader :deep(.btn).active{background:var(--color-global-background-accent)}
 </style>

package/dist/runtime/components/GlobalHeaderAnnouncement.vue

@@ -45,5 +45,5 @@ function dismissAnnouncement() {
 </script>
 
 <style scoped>
-@reference "tailwindcss";.announcement{--announcement-bg-color:#fff;@variant dark{--announcement-bg-color:#000}background-image:linear-gradient(to bottom,var(--announcement-bg-color) 0 calc(100% - 10px),transparent),linear-gradient(to right,var(--colorscale-resee-linear));padding-bottom:6px}.announcement.dismissable>div{padding-right:--spacing(12)}
+@reference "tailwindcss";.announcement{--announcement-bg-color:#fff;position:relative;z-index:100;@variant dark{--announcement-bg-color:#000}background-image:linear-gradient(to bottom,var(--announcement-bg-color) 0 calc(100% - 10px),transparent),linear-gradient(to right,var(--colorscale-resee-linear));padding-bottom:6px}.announcement.dismissable>div{padding-right:--spacing(16)}
 </style>

package/dist/runtime/components/Image.vue

@@ -10,8 +10,8 @@
     :class       = "[
   'image',
   {
-    glass: props.glassy && !(imgHasError || isImgLoading || props.loading),
-    scale: props.scaleToParent
+    'glass-effect': props.glassy && !(imgHasError || isImgLoading || props.loading),
+    'scale-to-parent': props.scaleToParent
   }
 ]"
   >
@@ -34,7 +34,7 @@
       :loadStyle   = "props.loadStyle"
       class        = "transition-opacity duration-300"
       :class       = "{ 'opacity-0': isImgLoading || props.loading || imgHasError }"
-      :aria-hidden = "imgHasError ? 'true' : 'false'"
+      :aria-hidden = "imgHasError ? 'true' : void 0"
       @loading     = "handleLoading"
       @load        = "handleLoaded"
       @error       = "handleError"
@@ -92,5 +92,5 @@ function handleError(err) {
 </script>
 
 <style scoped>
-@layer components{.image{display:block;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.image.scale{max-width:unset}.image.scale :deep(img){min-width:100%}}
+@layer components{.image{display:block;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative}.image.glass-effect:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.image.scale-to-parent{max-width:unset}.image.scale-to-parent :deep(img){min-width:100%}}
 </style>

package/dist/runtime/components/ImageBackdrop.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="image-backdrop" :style="offsetStyles">
-    <div :class="['background', props.maskPreset]">
+  <div class="image-backdrop">
+    <div :class="['background', { 'fixed-position': props.fixedPosition }, props.maskPreset, props.backgroundClass]">
       <slot name="background">
         <Transition name="fade" mode="out-in">
           <LazyImage
@@ -15,7 +15,6 @@
             v-else-if = "Array.isArray(props.src)"
             v-bind    = "props.multiImageOptions"
             :images   = "props.src"
-            class     = "bg-global-background"
           />
 
           <LazyMotionArt
@@ -38,29 +37,21 @@
 </script>
 
 <script setup>
-import { computed } from "vue";
-import { useGlobalHeaderState } from "../composables/use-global-header-state";
 import LazyImage from "./Image.vue";
 import LazyImageTiler from "./ImageTiler.vue";
 import LazyMotionArt from "./MotionArt.vue";
 const props = defineProps({
   src: { type: null, required: false, default: void 0 },
-  behindHeader: { type: Boolean, required: false, default: true },
+  fixedPosition: { type: Boolean, required: false, default: true },
   motionArt: { type: Boolean, required: false, default: true },
   maskPreset: { type: [String, Array], required: false, default: void 0 },
   singleImageOptions: { type: Object, required: false, default: void 0 },
   multiImageOptions: { type: Object, required: false, default: void 0 },
-  motionArtOptions: { type: Object, required: false }
-});
-const headerState = useGlobalHeaderState();
-const offsetStyles = computed(() => {
-  return props.behindHeader ? headerState.offsetFromHeaderStyles.value : void 0;
-});
-const headerOffset = computed(() => {
-  return props.behindHeader ? `0px` : `${headerState.headerHeight.value}px`;
+  motionArtOptions: { type: Object, required: false },
+  backgroundClass: { type: null, required: false }
 });
 </script>
 
 <style scoped>
-.image-backdrop{position:relative}.image-backdrop .foreground{position:relative;z-index:1}.image-backdrop .background{max-height:calc(99vh - v-bind(headerOffset));overflow:clip;position:absolute;top:0;width:100%;z-index:0}
+@reference "tailwindcss";.image-backdrop{position:relative}.image-backdrop .foreground{position:relative;z-index:1}@keyframes shrink-image{0%{left:-20px;right:-20px}to{left:0;right:0}}@keyframes fade-image{0%{opacity:1}to{opacity:.7}}.image-backdrop .background{left:0;overflow:clip;position:absolute;right:0;top:0;z-index:0}.image-backdrop .background.fixed-position{position:fixed}.image-backdrop .background.fixed-position:has(.image){left:-20px;right:-20px}.image-backdrop .background.fixed-position{@variant supports-animation-timeline{&:has(.image){animation:shrink-image linear forwards,fade-image linear forwards}&:has(.tiler){animation:fade-image linear forwards}&:has(.image,.tiler){animation-range:0 calc(56.25vw - 110px);animation-timeline:scroll();@variant sm{animation-range:0 150px}}}}
 </style>

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

@@ -1,5 +1,5 @@
 import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
-import type { ImageMaskPreset } from '../types/index.js';
+import type { HTMLElementClassNames, ImageMaskPreset } from '../types/index.js';
 import type { ImageProps } from './Image.vue.js';
 import type { ImageBaseProps } from './ImageBase.vue.js';
 import type { ImageTilerProps } from './ImageTiler.vue.js';
@@ -8,12 +8,13 @@ export type SingleImageProps = Omit<ImageBaseProps, 'src' | 'alt' | 'loadStyle'>
 export type MultiImageProps = Omit<ImageTilerProps, 'images' | 'maskPreset'>;
 export interface ImageBackdropProps {
     src?: ImageFileDescriptor | ImageFileDescriptor[] | null | undefined;
-    behindHeader?: boolean;
+    fixedPosition?: boolean;
     motionArt?: boolean;
     maskPreset?: ImageMaskPreset | ImageMaskPreset[];
     singleImageOptions?: SingleImageProps;
     multiImageOptions?: MultiImageProps;
     motionArtOptions?: MotionArtProps;
+    backgroundClass?: HTMLElementClassNames;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ImageBackdropProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBackdropProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     background?: (props: {}) => any;

package/dist/runtime/components/MotionArt.vue

@@ -12,12 +12,12 @@
 
 <script setup>
 defineProps({
-  primaryColor: { type: String, required: false, default: "var(--color-resee-violet)" },
-  secondaryColor: { type: String, required: false, default: "var(--color-resee-orange)" },
-  tertiaryColor: { type: String, required: false, default: "var(--color-resee-aqua)" }
+  primaryColor: { type: String, required: false, default: "var(--color-resee-indigo)" },
+  secondaryColor: { type: String, required: false, default: "initial" },
+  tertiaryColor: { type: String, required: false, default: "initial" }
 });
 </script>
 
 <style scoped>
-@reference "tailwindcss";.motion-art{container-type:size}.spotlight{animation:x var(--speed) linear infinite var(--direction);animation-delay:var(--delay-x);filter:blur(3px);position:absolute}.spotlight>div{animation:y calc(var(--speed)*.7) linear infinite var(--direction),c var(--speed) linear infinite var(--direction);animation-delay:var(--delay-y);background:var(--color);border-radius:100%;height:var(--size);opacity:.5;width:var(--size)}@variant motion-reduce{.spotlight,.spotlight>div{animation-play-state:paused}}@keyframes x{to{filter:blur(10px);transform:translateX(calc(100cqw - var(--size)))}}@keyframes y{to{opacity:.3;transform:translateY(calc(100cqh - var(--size)))}}@keyframes c{33%{background:var(--color-2)}66%{background:var(--color-3)}to{background:var(--color)}}.spotlight-1{--size:20vw;--speed:50s;--direction:alternate;--color:v-bind(primaryColor);--color-2:v-bind(secondaryColor);--color-3:v-bind(tertiaryColor);--delay-x:-7s;--delay-y:-8s}.spotlight-2{--size:10vw;--speed:40s;--direction:alternate;--color:v-bind(secondaryColor);--color-2:v-bind(primaryColor);--color-3:v-bind(tertiaryColor);--delay-x:-30s;--delay-y:-1s}.spotlight-3{--size:30vw;--speed:60s;--direction:alternate-reverse;--color:v-bind(tertiaryColor);--color-2:v-bind(primaryColor);--color-3:v-bind(secondaryColor);--delay-x:-13s;--delay-y:0}
+@reference "tailwindcss";.motion-art{--motion-art-color-1:v-bind(primaryColor);--motion-art-color-2-bound:v-bind(secondaryColor);--motion-art-color-2:var(--motion-art-color-2-bound,oklch(from var(--motion-art-color-1) l c calc(h + 135)));--motion-art-color-3-bound:v-bind(tertiaryColor);--motion-art-color-3:var(--motion-art-color-3-bound,oklch(from var(--motion-art-color-1) l c calc(h + 270)));container-type:size}.spotlight{animation:x var(--speed) linear infinite var(--direction);animation-delay:var(--delay-x);filter:blur(3px);position:absolute}.spotlight>div{animation:y calc(var(--speed)*.7) linear infinite var(--direction),c var(--speed) linear infinite var(--direction);animation-delay:var(--delay-y);background:var(--color);border-radius:100%;height:var(--size);opacity:.5;width:var(--size)}@variant motion-reduce{.spotlight,.spotlight>div{animation-play-state:paused}}@keyframes x{to{filter:blur(10px);transform:translateX(calc(100cqw - var(--size)))}}@keyframes y{to{opacity:.3;transform:translateY(calc(100cqh - var(--size)))}}@keyframes c{33%{background:var(--color-2)}66%{background:var(--color-3)}to{background:var(--color)}}.spotlight-1{--size:20vw;--speed:50s;--direction:alternate;--color:var(--motion-art-color-1);--color-2:var(--motion-art-color-2);--color-3:var(--motion-art-color-3);--delay-x:-7s;--delay-y:-8s}.spotlight-2{--size:10vw;--speed:40s;--direction:alternate;--color:var(--motion-art-color-2);--color-2:var(--motion-art-color-1);--color-3:var(--motion-art-color-3);--delay-x:-30s;--delay-y:-1s}.spotlight-3{--size:30vw;--speed:60s;--direction:alternate-reverse;--color:var(--motion-art-color-3);--color-2:var(--motion-art-color-1);--color-3:var(--motion-art-color-2);--delay-x:-13s;--delay-y:0}
 </style>

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

@@ -1 +1 @@
-@layer base{:root{--image-mask-gradient-opacity-dir:to bottom;--image-mask-gradient-opacity-stop:85%;--image-mask-gradient-dir:to bottom;--image-mask-gradient-stop:80%;--image-mask-color:var(--color-global-background);--image-mask-alpha-percent:85%}}@utility image-mask-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent))}}@utility image-mask-gradient-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-washout-lite{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-alpha-percent:10%;--image-mask-gradient-stop:30%;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-opacity{-webkit-mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent);mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent)}@utility image-mask-hero{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-color:#fff;@variant dark{--image-mask-color:#000}&:before{background:--alpha(var(--image-mask-color)/75%);@variant sm{background:linear-gradient(to right,--alpha(var(--image-mask-color)/90%) 35%,--alpha(var(--image-mask-color)/15%))}}}
+@layer base{:root{--image-mask-gradient-opacity-dir:to bottom;--image-mask-gradient-opacity-stop:50%;--image-mask-gradient-dir:to bottom;--image-mask-gradient-stop:80%;--image-mask-color:var(--color-global-background);--image-mask-alpha-percent:85%}}@utility image-mask-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent))}}@utility image-mask-gradient-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-washout-lite{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-alpha-percent:10%;--image-mask-gradient-stop:30%;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-opacity{-webkit-mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent);mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent)}@utility image-mask-hero{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-color:#fff;@variant dark{--image-mask-color:#000}&:before{background:--alpha(var(--image-mask-color)/75%);@variant sm{background:linear-gradient(to right,--alpha(var(--image-mask-color)/90%) 35%,--alpha(var(--image-mask-color)/15%))}}}

package/package.json

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