@resee-movies/nuxt-ux 0.15.0 → 0.17.0

package/dist/module.json

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

package/dist/runtime/components/CardScroller.vue

@@ -66,7 +66,9 @@ const props = defineProps({
   loading: { type: Boolean, required: false, default: false },
   centerAlign: { type: Boolean, required: false, default: false },
   toPageContainerEdge: { type: Boolean, required: false, default: true },
-  styleWhenTransiting: { type: String, required: false, default: "right" }
+  styleWhenTransiting: { type: String, required: false, default: "right" },
+  transitOpacity: { type: Boolean, required: false, default: true },
+  transitScale: { type: Boolean, required: false, default: true }
 });
 const slots = defineSlots();
 const ruler = ref();
@@ -111,43 +113,85 @@ const displayBounds = computed(() => {
   bounds.x3_4 = `${bounds.x4 - bounds.x3}px`;
   return bounds;
 });
-watchDebounced([displayBounds], () => {
+const {
+  pause: pauseScrollReset,
+  resume: resumeScrollReset
+} = watchDebounced([displayBounds], () => {
   scrollBox.value?.scrollTo({ left: 0, behavior: "instant" });
 }, { debounce: 500 });
 const scrollState = useScroll(scrollBox);
-watch([scrollState.x, displayBounds], () => {
-  queueStyleChanges();
-  debouncedQueueStyleChanges();
+const {
+  pause: pauseStyleChanges,
+  resume: resumeStyleChanges
+} = watch([scrollState.x, displayBounds], () => {
+  queueStyleChanges(props.styleWhenTransiting, props.transitOpacity, props.transitScale);
+  debouncedQueueStyleChanges(props.styleWhenTransiting, props.transitOpacity, props.transitScale);
 }, { flush: "sync" });
-const debouncedQueueStyleChanges = useDebounceFn(() => queueStyleChanges(), 100);
+watch(
+  [() => props.transitOpacity, () => props.transitScale],
+  ([styleOpacity, styleScale]) => {
+    const areAnyDisabled = !(styleOpacity && styleScale);
+    const areAllDisabled = !(styleOpacity || styleScale);
+    if (areAnyDisabled) {
+      removeStyleChanges(styleOpacity, styleScale);
+    } else {
+      debouncedQueueStyleChanges(props.styleWhenTransiting, styleOpacity, styleScale);
+    }
+    if (areAllDisabled) {
+      pauseScrollReset();
+      pauseStyleChanges();
+    } else {
+      resumeScrollReset();
+      resumeStyleChanges();
+    }
+  }
+);
+const debouncedQueueStyleChanges = useDebounceFn(queueStyleChanges, 100);
 let queuedFrame = void 0;
-function queueStyleChanges() {
+function queueStyleChanges(transiting, styleOpacity, styleScale) {
   if (queuedFrame) {
     cancelAnimationFrame(queuedFrame);
     queuedFrame = void 0;
   }
   queuedFrame = requestAnimationFrame(() => {
-    applyStyleChanges();
+    applyStyleChanges(transiting, styleOpacity, styleScale);
     queuedFrame = void 0;
   });
 }
-function applyStyleChanges() {
-  const styleLeft = props.styleWhenTransiting === "left" || props.styleWhenTransiting === "both";
-  const styleRight = props.styleWhenTransiting === "right" || props.styleWhenTransiting === "both";
+function applyStyleChanges(transiting, styleOpacity, styleScale) {
+  const styleLeft = transiting === "both" || transiting === "left";
+  const styleRight = transiting === "both" || transiting === "right";
   for (const element of scrollItemElements.value) {
     const [percentage, direction] = percentInBounds(element, displayBounds.value);
     if (direction === "none") {
-      element.style.opacity = "1";
-      element.style.scale = "1";
+      if (styleOpacity) {
+        element.style.opacity = "1";
+      }
+      if (styleScale) {
+        element.style.scale = "1";
+      }
     } else if (direction === "left" && styleLeft || direction === "right" && styleRight) {
-      element.style.opacity = percentage.toString();
-      if (element.firstElementChild instanceof HTMLElement) {
+      if (styleOpacity) {
+        element.style.opacity = percentage.toString();
+      }
+      if (styleScale && element.firstElementChild instanceof HTMLElement) {
         element.firstElementChild.style.transformOrigin = `center ${direction === "left" ? "right" : "left"}`;
         element.firstElementChild.style.scale = (1 - 0.2 * (1 - percentage)).toString();
       }
     }
   }
 }
+function removeStyleChanges(styleOpacity, styleScale) {
+  for (const element of scrollItemElements.value) {
+    if (!styleOpacity) {
+      element.style.opacity = "";
+    }
+    if (!styleScale && element.firstElementChild instanceof HTMLElement) {
+      element.firstElementChild.style.transformOrigin = "";
+      element.firstElementChild.style.scale = "";
+    }
+  }
+}
 function percentInBounds(element, { x1, x2, x3, x4 }) {
   const {
     left: elementStart,

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

@@ -9,6 +9,8 @@ export type CardScrollerProps<T> = {
     centerAlign?: boolean;
     toPageContainerEdge?: boolean;
     styleWhenTransiting?: 'left' | 'right' | 'both';
+    transitOpacity?: boolean;
+    transitScale?: boolean;
 };
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<CardScrollerProps<T>> & import("vue").PublicProps & (typeof globalThis extends {

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:12rem}
+@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)}
 </style>

package/dist/runtime/components/ImageTiler.vue

@@ -0,0 +1,193 @@
+<template>
+  <div :class="['tiler', props.maskPreset]">
+    <div v-for="(entry, idx) of displayArray" :key="idx">
+      <ImageBase
+        :src     = "entry.source"
+        aspect   = "poster"
+        :class   = "[props.imageClass, { 'opacity-0': entry.switching || entry.loading }]"
+        :style   = "{ '--duration': `${entry.switchTime}ms`, '--delay': `${entry.switchDelay}ms` }"
+        @loading = "entry.loading = true"
+        @load    = "entry.loading = false"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";@layer components{.tiler{-moz-column-gap:--spacing(v-bind(grid.gapY));column-gap:--spacing(v-bind(grid.gapY));display:grid;grid-template-columns:repeat(v-bind(grid.cols),1fr);row-gap:--spacing(v-bind(grid.gapX))}.tiler>div{justify-self:center}img{--duration:200ms;--delay:0ms;transition:opacity;transition-delay:var(--delay);transition-duration:var(--duration);transition-timing-function:ease-out}}
+</style>
+
+<script>
+export const DefaultImageTilerGridSizeFallback = {
+  cols: 5,
+  rows: 8,
+  gap: 3
+};
+export const DefaultImageTilerGridSizeDefinition = {
+  md: {
+    cols: 7,
+    rows: 5
+  },
+  lg: {
+    cols: 10,
+    rows: 5
+  }
+};
+</script>
+
+<script setup>
+import { useState } from "#imports";
+import { getRandomEntry } from "@resee-movies/utilities/arrays/get-random-entry";
+import { normalizeImageFileDescriptor } from "@resee-movies/utilities/images/normalize-image-file-descriptor";
+import { getRandomInteger } from "@resee-movies/utilities/numbers/get-random-integer";
+import { toInteger } from "@resee-movies/utilities/numbers/to-integer";
+import { sleep } from "@resee-movies/utilities/timers/sleep";
+import { computed, onMounted, shallowReactive, useId, watch } from "vue";
+import { useSettingsForBreakpoint } from "../composables/use-settings-for-breakpoint";
+import ImageBase from "./ImageBase.vue";
+const props = defineProps({
+  images: { type: Array, required: true },
+  play: { type: Boolean, required: false, default: true },
+  gridSettings: { type: Object, required: false, default: () => DefaultImageTilerGridSizeDefinition },
+  turnoverRate: { type: [String, Number, Array], required: false, default: () => [2e3, 6e3] },
+  switchTime: { type: [String, Number, Array], required: false, default: () => [1200, 1800] },
+  switchDelay: { type: [String, Number, Array], required: false, default: () => [0, 500] },
+  imageClass: { type: null, required: false, default: void 0 },
+  maskPreset: { type: [String, Array], required: false }
+});
+const gridSettingsForBreakpoint = useSettingsForBreakpoint(() => props.gridSettings);
+const grid = computed(() => {
+  const settings = gridSettingsForBreakpoint.value;
+  const rows = settings?.rows ?? DefaultImageTilerGridSizeFallback.rows;
+  const cols = settings?.cols ?? DefaultImageTilerGridSizeFallback.cols;
+  const cells = rows * cols;
+  const gapX = settings?.gapX ?? settings?.gap ?? DefaultImageTilerGridSizeFallback.gap;
+  const gapY = settings?.gapY ?? settings?.gap ?? DefaultImageTilerGridSizeFallback.gap;
+  return { rows, cols, cells, gapX, gapY };
+});
+const componentId = useId();
+const displayArray = useState(componentId, () => {
+  const arr = [];
+  for (let i = 0; i < grid.value.cells; i += 1) {
+    arr.push(generateImageDisplayInfo(i, arr));
+  }
+  return arr;
+});
+onMounted(() => {
+  showAll();
+  queueNextChange();
+});
+watch(() => grid.value.cells, (newCount, oldCount) => {
+  if (newCount < oldCount) {
+    displayArray.value.splice(newCount, Number.POSITIVE_INFINITY);
+    return;
+  }
+  if (newCount > oldCount) {
+    while (displayArray.value.length < newCount) {
+      const info = generateImageDisplayInfo(displayArray.value.length, displayArray.value);
+      displayArray.value.push(info);
+      showImageCellContent(info);
+    }
+  }
+});
+function queueNextChange() {
+  setTimeout(async () => {
+    if (props.play) {
+      const idx = getValueFromRange([0, displayArray.value.length - 1]);
+      const info = displayArray.value[idx];
+      if (info) {
+        await switchImageCellContent(info, idx);
+      }
+    }
+    queueNextChange();
+  }, getValueFromRange(props.turnoverRate));
+}
+function getValueFromRange(value) {
+  return Array.isArray(value) ? getRandomInteger(value[0], value[1]) : toInteger(value);
+}
+function pickImage(forIdx, forArray) {
+  let candidate = normalizeImageFileDescriptor(getRandomEntry(props.images));
+  if (props.images.length > 5) {
+    const neighbors = getNeighborIndexes(
+      forIdx,
+      grid.value.cols,
+      grid.value.rows,
+      props.images.length > 9 ? "8-edge" : "4-edge"
+    );
+    neighbors.push(forIdx);
+    for (let maxAttempts = 0; maxAttempts < 3; maxAttempts += 1) {
+      if (isImageInUse(candidate, forArray, neighbors)) {
+        candidate = normalizeImageFileDescriptor(getRandomEntry(props.images));
+      } else {
+        break;
+      }
+    }
+  }
+  return candidate;
+}
+function getNeighborIndexes(centerIdx, columnCount, rowCount, distance = "8-edge") {
+  const rowOffset = Math.floor(centerIdx / columnCount);
+  const colOffset = centerIdx % columnCount;
+  const top = rowOffset > 0 ? centerIdx - columnCount : -1;
+  const right = colOffset < columnCount ? centerIdx + 1 : -1;
+  const bottom = rowOffset < rowCount ? centerIdx + columnCount : -1;
+  const left = colOffset > 0 ? centerIdx - 1 : -1;
+  if (distance === "4-edge") {
+    return [top, right, bottom, left];
+  }
+  const topRight = top > -1 && right > -1 ? top + 1 : -1;
+  const bottomRight = bottom > -1 && right > -1 ? bottom + 1 : -1;
+  const bottomLeft = bottom > -1 && left > -1 ? bottom - 1 : -1;
+  const topLeft = top > -1 && left > -1 ? top - 1 : -1;
+  return [top, topRight, right, bottomRight, bottom, bottomLeft, left, topLeft];
+}
+function isImageInUse(candidate, sourceArray, indicesToCheck) {
+  for (const idx of indicesToCheck) {
+    if (idx < 0 || idx > sourceArray.length) {
+      continue;
+    }
+    if (sourceArray.at(idx)?.source.identifier === candidate.identifier) {
+      return true;
+    }
+  }
+  return false;
+}
+function generateImageDisplayInfo(forIdx, forArray) {
+  return shallowReactive({
+    source: pickImage(forIdx, forArray),
+    loading: true,
+    switching: true,
+    switchTime: getValueFromRange(props.switchTime),
+    switchDelay: getValueFromRange(props.switchDelay)
+  });
+}
+async function hideImageCellContent(info) {
+  if (info.switching) {
+    return;
+  }
+  info.switching = true;
+  await sleep(info.switchTime + info.switchDelay);
+}
+async function showImageCellContent(info) {
+  if (!info.switching) {
+    return;
+  }
+  info.switching = false;
+  await sleep(info.switchTime + info.switchDelay);
+}
+async function switchImageCellContent(info, idx) {
+  await hideImageCellContent(info);
+  info.source = pickImage(idx, displayArray.value);
+  await showImageCellContent(info);
+}
+async function showAll() {
+  return Promise.allSettled(
+    displayArray.value.map((entry) => showImageCellContent(entry))
+  );
+}
+async function hideAll() {
+  return Promise.allSettled(
+    displayArray.value.map((entry) => hideImageCellContent(entry))
+  );
+}
+</script>

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

@@ -0,0 +1,31 @@
+import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
+import type { BreakpointSettings } from '../composables/use-settings-for-breakpoint.js';
+import type { HTMLElementClassNames } from '../types/index.js';
+export type ValueOrRange = string | number | [min: number, max: number];
+export type ImageTilerGridSizeDefinition = {
+    cols: number;
+    rows: number;
+    gap?: number;
+    gapX?: number;
+    gapY?: number;
+};
+export type ImageMaskPreset = 'image-mask-washout' | 'image-mask-gradient-washout' | 'image-mask-gradient-washout-lite' | 'image-mask-gradient-opacity' | 'image-mask-hero';
+export declare const DefaultImageTilerGridSizeFallback: {
+    cols: number;
+    rows: number;
+    gap: number;
+};
+export declare const DefaultImageTilerGridSizeDefinition: BreakpointSettings<ImageTilerGridSizeDefinition>;
+export interface ImageTilerProps {
+    images: ImageFileDescriptor[];
+    play?: boolean;
+    gridSettings?: BreakpointSettings<ImageTilerGridSizeDefinition>;
+    turnoverRate?: ValueOrRange;
+    switchTime?: ValueOrRange;
+    switchDelay?: ValueOrRange;
+    imageClass?: HTMLElementClassNames;
+    maskPreset?: ImageMaskPreset | ImageMaskPreset[];
+}
+declare const __VLS_export: import("vue").DefineComponent<ImageTilerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageTilerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/InlineStatsList.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :class="['stats', { responsive: props.responsive }]">
+    <dl>
+      <slot name="default">
+        <template v-if="props.items?.length">
+          <InlineStatsListItem
+            v-for        = "item of props.items"
+            :key         = "item.label"
+            :label       = "item.label"
+            :description = "item.description"
+            :icon        = "item.icon"
+          />
+        </template>
+      </slot>
+    </dl>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import InlineStatsListItem from "./InlineStatsListItem.vue";
+const props = defineProps({
+  responsive: { type: Boolean, required: false, default: false },
+  items: { type: Array, required: false, default: void 0 }
+});
+</script>
+
+<style scoped>
+@reference "tailwindcss";.stats{--stats-list-spacer-width:1.2rem;overflow:clip}.stats dl{display:flex;flex-wrap:wrap;margin-inline-start:calc(var(--stats-list-spacer-width)*-1)}.stats.responsive dl{@variant max-sm{flex-direction:column}}
+</style>

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

@@ -0,0 +1,15 @@
+import type { InlineStatsListItemProps } from './InlineStatsListItem.vue.js';
+export interface InlineStatsListProps {
+    responsive?: boolean;
+    items?: InlineStatsListItemProps[];
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InlineStatsListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineStatsListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InlineStatsListItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <dt class="sr-only">
+    <slot name="label">
+      {{ props.label }}
+    </slot>
+  </dt>
+
+  <dd>
+    <slot name="default">
+      <IconTextPair :icon="props.icon" :text="props.description">
+        <template #default v-if="slots.description">
+          <slot name="description" />
+        </template>
+      </IconTextPair>
+    </slot>
+  </dd>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import IconTextPair from "./IconTextPair.vue";
+import { useSlots } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  label: { type: String, required: true },
+  description: { type: String, required: true },
+  icon: { type: String, required: false, default: void 0 }
+});
+const slots = useSlots();
+</script>
+
+<style scoped>
+@reference "tailwindcss";dd{padding-inline-start:var(--stats-list-spacer-width);position:relative}dd:before{color:var(--color-global-foreground-accent);content:"|";inset-inline-start:0;margin-inline:--spacing(2);position:absolute}
+</style>

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

@@ -0,0 +1,19 @@
+export interface InlineStatsListItemProps {
+    label: string;
+    description: string;
+    icon?: string;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InlineStatsListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineStatsListItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    description?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LayoutPageColumn.vue

@@ -19,5 +19,5 @@ const props = defineProps({
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant sm{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}}
+@reference "tailwindcss";@layer components{:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant sm{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}:global(.page-column-xl){@variant xl{.page-column{max-width:var(--container-7xl)}}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}}
 </style>

package/dist/runtime/components/TableOfContents.vue

@@ -0,0 +1,19 @@
+<template>
+  <ol v-if="props.toc?.length">
+    <li v-for="entry of props.toc" :key="entry.slug">
+      <a :href="`#${entry.slug}`" v-html="entry.text" />
+      <TableOfContents v-if="entry.children.length" :toc="entry.children" />
+    </li>
+  </ol>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import TableOfContents from "./TableOfContents.vue";
+const props = defineProps({
+  toc: { type: null, required: true }
+});
+</script>

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

@@ -0,0 +1,7 @@
+import type { TableOfContents as TableOfContentsOptions } from '@resee-movies/utilities/dom/generate-table-of-contents';
+export type UiTableOfContentsProps = {
+    toc: TableOfContentsOptions[] | null | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<UiTableOfContentsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiTableOfContentsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/Form.vue

@@ -22,6 +22,8 @@
 
       <PrimeForm
         v-slot                    = "$form"
+        v-bind                    = "$attrs"
+        :id                       = "formUid"
         ref                       = "form"
         novalidate                = "true"
         :validate-on-mount        = "true"
@@ -53,12 +55,15 @@ import PrimeForm, {} from "@primevue/forms/form";
 import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullable-array";
 import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
 import { syncRefs } from "@vueuse/core";
-import { ref, useTemplateRef } from "vue";
+import { ref, useId, useTemplateRef } from "vue";
 import FormFieldBuilder from "./FormFieldBuilder.vue";
 import LazySuccessSplash from "../SuccessSplash.vue";
 import LazyMessage from "../Message.vue";
 import { useReactiveObjectsSync } from "../../composables/use-reactive-objects-sync";
 import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
+defineOptions({
+  inheritAttrs: false
+});
 const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   onSubmit: { type: [Function, Array], required: false, default: void 0 },
@@ -72,8 +77,9 @@ const form = useTemplateRef("form");
 const values = defineModel("values", { type: null, ...{ default: void 0 } });
 const success = ref(false);
 const errors = ref();
+const formUid = useId();
 defineEmits(["submit", "change"]);
-const formInstance = provideFormInstance();
+const formInstance = provideFormInstance(formUid);
 syncRefs(() => props.disabled, formInstance.isDisabled);
 useReactiveObjectsSync({
   left: () => form.value?.states,

package/dist/runtime/components/form/FormField.vue

@@ -42,10 +42,10 @@
           :readonly   = "isReadonly"
           :value      = "$field.value"
           :invalid    = "$field.invalid"
-          :on-blur    = "$field.props.onBlur"
-          :on-change  = "$field.props.onChange"
-          :on-input   = "$field.props.onInput"
-          :on-invalid = "$field.props.onInvalid"
+          :on-blur    = "$field.props?.onBlur"
+          :on-change  = "$field.props?.onChange"
+          :on-input   = "$field.props?.onInput"
+          :on-invalid = "$field.props?.onInvalid"
         />
       </template>
     </FormLabelInputPair>
@@ -87,9 +87,9 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const formState = injectFormInstance();
-const inputId = useId();
-const labelId = `${inputId}_label`;
-const messageId = `${inputId}_message`;
+const inputId = computed(() => `${formState.formUid}_${props.name}_field`);
+const labelId = computed(() => `${formState.formUid}_${props.name}_label`);
+const messageId = computed(() => `${formState.formUid}_${props.name}_message`);
 const labelText = computed(() => props.label ?? humanize(props.name));
 const isDisabled = computed(() => props.disabled || formState.isDisabled.value);
 const isReadonly = computed(() => props.readonly || formState.isSubmitting.value);

package/dist/runtime/components/form/FormFieldTurnstile.vue

@@ -4,8 +4,9 @@
       <slot name="label" />
     </template>
 
-    <template #default="{ inputName, onChange }">
+    <template #default="{ inputId, inputName, onChange }">
       <FormElementTurnstile
+        :id                  = "inputId"
         :sitekey             = "props.sitekey"
         :response-field-name = "inputName"
         :callback            = "(token) => onChange({ value: token })"

package/dist/runtime/components/form/element/FormElementTurnstile.vue

@@ -16,6 +16,7 @@
 import { onUnmounted, useId } from "#imports";
 import { useCloudflareTurnstile } from "../../../composables/use-cloudflare-turnstile";
 const props = defineProps({
+  id: { type: String, required: false },
   sitekey: { type: String, required: true },
   action: { type: String, required: false },
   cData: { type: String, required: false },
@@ -40,7 +41,7 @@ const props = defineProps({
   appearance: { type: String, required: false, default: "always" },
   "feedback-enabled": { type: Boolean, required: false }
 });
-const widgetId = useId();
+const widgetId = props.id ?? useId();
 const { onReady } = useCloudflareTurnstile();
 let turnstile = void 0;
 onReady((ts) => {

package/dist/runtime/components/form/element/FormElementTurnstile.vue.d.ts

@@ -1,5 +1,6 @@
 import type { TurnstileRenderOptions } from '../../../composables/use-cloudflare-turnstile.js';
 export interface FormElementTurnstileProps extends TurnstileRenderOptions {
+    id?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<FormElementTurnstileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementTurnstileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/use-settings-for-breakpoint.d.ts

@@ -0,0 +1,11 @@
+import type { breakpointsTailwind } from '@vueuse/core';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+export type BreakpointSettingName = (keyof typeof breakpointsTailwind) | 'default';
+export type BreakpointSettings<T> = Partial<Record<BreakpointSettingName, T>>;
+/**
+ * Given an object whose properties are Tailwind breakpoint names, this will return
+ * the value of the property that matches the active breakpoint. If an exact match
+ * is not available, a mobile-first approach is taken - the first value of a smaller
+ * breakpoint, or finally the `default`, will be returned.
+ */
+export declare function useSettingsForBreakpoint<T>(settings: MaybeRefOrGetter<BreakpointSettings<T> | null | undefined>): ComputedRef<T | undefined>;

package/dist/runtime/composables/use-settings-for-breakpoint.js

@@ -0,0 +1,25 @@
+import { computed, toValue } from "vue";
+import { useReseeBreakpoints } from "./use-resee-breakpoints.js";
+export function useSettingsForBreakpoint(settings) {
+  const ordering = ["default", "sm", "md", "lg", "xl", "2xl"];
+  const activeBreak = useReseeBreakpoints().active();
+  return computed(() => {
+    const breakpoint = activeBreak.value || "default";
+    const rawSettings = toValue(settings);
+    if (!rawSettings) {
+      return void 0;
+    }
+    if (breakpoint in rawSettings) {
+      return rawSettings[breakpoint];
+    }
+    let idx = ordering.indexOf(breakpoint);
+    while (idx > 0) {
+      idx -= 1;
+      const name = ordering[idx];
+      if (name && name in rawSettings) {
+        return rawSettings[name];
+      }
+    }
+    return rawSettings["default"];
+  });
+}

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

@@ -0,0 +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%))}}}

package/dist/runtime/theme/css/styles.css

@@ -1 +1 @@
-@import "./brand/anchor.css";@import "./brand/application.css";@import "./brand/button.css";@import "./brand/form.css";@import "./brand/gradient.css";@import "./brand/menu.css";@import "./brand/mobile.css";@import "./brand/status.css";@import "./brand/theme.css";@import "./brand/tooltip.css";@import "./brand/transition.css";@import "./brand/typography.css";@import "./brand/utilities.css";
+@import "./brand/anchor.css";@import "./brand/application.css";@import "./brand/button.css";@import "./brand/form.css";@import "./brand/gradient.css";@import "./brand/image.css";@import "./brand/menu.css";@import "./brand/mobile.css";@import "./brand/status.css";@import "./brand/theme.css";@import "./brand/tooltip.css";@import "./brand/transition.css";@import "./brand/typography.css";@import "./brand/utilities.css";

package/dist/runtime/types/form.d.ts

@@ -9,6 +9,7 @@ export type FormValues = Record<string, any>;
  * injected into descendent components.
  */
 export interface FormInstance {
+    formUid: string | undefined;
     hasSubmitted: Ref<boolean>;
     isSubmitting: Ref<boolean>;
     isDisabled: Ref<boolean>;

package/dist/runtime/utils/form.d.ts

@@ -13,21 +13,21 @@ export declare const FormSymbol: InjectionKey<FormInstance>;
  *
  * @private
  */
-export declare function createFormInstance(): FormInstance;
+export declare function createFormInstance(uid?: string): FormInstance;
 /**
  * Provides the object that a Form uses to convey stateful information to the
  * DI registry. You shouldn't ever need to use this directly.
  *
  * @private
  */
-export declare function provideFormInstance(): FormInstance;
+export declare function provideFormInstance(uid?: string): FormInstance;
 /**
  * Injects the stateful object provided by an ancestor Form instance. If not
  * available, a dummy state object is generated.
  *
  * @private
  */
-export declare function injectFormInstance(): FormInstance;
+export declare function injectFormInstance(uid?: string): FormInstance;
 /**
  * Takes a Primevue Form's `states` object, and extracts the current values
  * of each named property. In doing so, it will deref proxies, and create

package/dist/runtime/utils/form.js

@@ -4,20 +4,21 @@ import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
 import { isString } from "@resee-movies/utilities/strings/is-string";
 import { computed, inject, provide, ref, toRaw, toValue } from "vue";
 export const FormSymbol = Symbol("form");
-export function createFormInstance() {
+export function createFormInstance(uid) {
   return {
+    formUid: uid,
     hasSubmitted: ref(false),
     isSubmitting: ref(false),
     isDisabled: ref(false)
   };
 }
-export function provideFormInstance() {
-  const instance = createFormInstance();
+export function provideFormInstance(uid) {
+  const instance = createFormInstance(uid);
   provide(FormSymbol, instance);
   return instance;
 }
-export function injectFormInstance() {
-  return inject(FormSymbol, () => createFormInstance(), true);
+export function injectFormInstance(uid) {
+  return inject(FormSymbol, () => createFormInstance(uid), true);
 }
 export function getValuesFromFormState(state) {
   const result = {};

package/package.json

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