@resee-movies/nuxt-ux 0.13.1 → 0.15.0

package/dist/runtime/components/Image.vue

@@ -1,149 +1,92 @@
 <template>
-  <div
-    ref    = "container"
-    :class = "['image', {
-  loading: imgLoading || imgBgLoading || props.showLoading,
-  glass: props.glassy,
-  bordered: props.bordered,
-  beveled: props.beveled,
-  raised: props.raised
-}]"
+  <Card
+    :is          = "props.is"
+    :loading     = "isImgLoading || props.loading"
+    :interactive = "props.interactive"
+    :colorful    = "props.colorful"
+    :beveled     = "props.beveled"
+    :raised      = "props.raised"
+    :bordered    = "props.bordered"
+    :class       = "[
+  'image',
+  {
+    glass: props.glassy && !(imgHasError || isImgLoading || props.loading),
+    scale: props.scaleToParent
+  }
+]"
   >
     <Icon
-      v-if         = "props.defaultIcon && (!imgSrc || imgError || imgLoading || props.showLoading)"
-      :name        = "props.defaultIcon"
-      :size        = "props.iconSize"
-      :color-cycle = "imgLoading || props.showLoading"
+      v-if   = "props.defaultIcon && imgHasError"
+      :name  = "props.defaultIcon"
+      :size  = "props.iconSize"
+      class  = "transition-opacity duration-300"
+      :class = "{ 'opacity-0': isImgLoading || props.loading }"
     />
 
-    <img
-      :src     = "imgSrc"
-      :alt     = "altText"
-      :width   = "dimensions.width"
-      :height  = "dimensions.height"
-      :loading = "props.loading"
-      class    = "transition-opacity duration-300"
-      :class   = "[aspectRatioClass, objectFitClass, {
-  'opacity-0': !imgSrc || imgLoading
-}]"
-    >
-  </div>
+    <ImageBase
+      :src         = "props.src"
+      :type        = "props.type"
+      :alt         = "props.alt"
+      :width       = "props.width"
+      :height      = "props.height"
+      :aspect      = "props.aspect"
+      :fit         = "props.fit"
+      :loadStyle   = "props.loadStyle"
+      class        = "transition-opacity duration-300"
+      :class       = "{ 'opacity-0': isImgLoading || props.loading || imgHasError }"
+      :aria-hidden = "imgHasError ? 'true' : 'false'"
+      @loading     = "handleLoading"
+      @load        = "handleLoaded"
+      @error       = "handleError"
+    />
+  </Card>
 </template>
 
 <script>
-export const AspectRatioClassNames = {
-  "1/1": "aspect-square",
-  "square": "aspect-square",
-  "2/3": "aspect-poster",
-  "poster": "aspect-poster",
-  "4/5": "aspect-tall",
-  "16/9": "aspect-video",
-  "video": "aspect-video"
-};
-export const ObjectFitClassNames = {
-  cover: "object-cover",
-  outside: "object-cover",
-  contain: "object-contain",
-  inside: "object-contain"
-};
+
 </script>
 
 <script setup>
-import { normalizeImageFileDescriptor } from "@resee-movies/utilities/images/normalize-image-file-descriptor";
-import { getAspectRatio } from "@resee-movies/utilities/numbers/get-aspect-ratio";
-import { fromTmdbImageSize } from "@resee-movies/utilities/tmdb/from-tmdb-image-size";
-import { computed, ref } from "vue";
-import { useLoadImage } from "../composables/use-load-image";
-import { useSharedIntersectionObserver } from "../composables/use-shared-intersection-observer";
+import { ref } from "vue";
+import Card from "./Card.vue";
 import Icon from "./Icon.vue";
+import ImageBase from "./ImageBase.vue";
 const props = defineProps({
-  src: { type: null, required: true },
-  alt: { type: [String, null, Function], required: false, default: "" },
-  type: { type: String, required: false, default: void 0 },
-  width: { type: null, required: false, default: "w185" },
-  height: { type: [String, Number], required: false, default: void 0 },
-  aspect: { type: String, required: false, default: void 0 },
-  fit: { type: String, required: false, default: "cover" },
-  showLoading: { type: Boolean, required: false, default: false },
   defaultIcon: { type: String, required: false, default: "i-ph-image-thin" },
   iconSize: { type: String, required: false, default: "xl" },
-  loading: { type: String, required: false, default: "lazy" },
   glassy: { type: Boolean, required: false, default: false },
-  bordered: { type: Boolean, required: false, default: false },
-  beveled: { type: Boolean, required: false, default: false },
-  raised: { type: Boolean, required: false, default: false },
-  overlayClasses: { type: null, required: false, default: void 0 }
-});
-const deferLoad = ref(props.loading === "lazy");
-const container = ref();
-const normalizedSource = computed(() => {
-  const result = normalizeImageFileDescriptor(props.src);
-  if (props.type) {
-    result.sourceType = props.type;
-  }
-  return result;
-});
-const dimensions = computed(() => {
-  let intWidth = normalizedSource.value.width;
-  let intHeight = normalizedSource.value.height;
-  if (props.width || props.height) {
-    intWidth = fromTmdbImageSize(props.width);
-    intHeight = fromTmdbImageSize(props.height);
-  }
-  if (!props.aspect || props.aspect === "auto" || intWidth && intHeight) {
-    return { width: intWidth, height: intHeight };
-  }
-  if (intHeight) {
-    const aspect = getAspectRatio(intHeight, "y", props.aspect);
-    return { width: aspect.x, height: aspect.y };
-  }
-  if (intWidth) {
-    const aspect = getAspectRatio(intWidth, "x", props.aspect);
-    return { width: aspect.x, height: aspect.y };
-  }
-  return { width: void 0, height: void 0 };
+  scaleToParent: { type: Boolean, required: false, default: true },
+  src: { type: null, required: true },
+  alt: { type: [String, null, Function], required: false },
+  type: { type: String, required: false },
+  width: { type: null, required: false },
+  height: { type: [String, Number], required: false },
+  aspect: { type: String, required: false },
+  fit: { type: String, required: false },
+  loadStyle: { type: String, required: false },
+  is: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  interactive: { type: Boolean, required: false },
+  colorful: { type: Boolean, required: false },
+  bordered: { type: Boolean, required: false },
+  beveled: { type: Boolean, required: false },
+  raised: { type: Boolean, required: false }
 });
-const imgLoadInfo = useLoadImage(
-  () => normalizedSource.value.identifier,
-  {
-    deferLoad,
-    type: () => normalizedSource.value.sourceType,
-    width: () => props.width,
-    friendlyName: () => normalizedSource.value.friendlyName,
-    reseeConfig: () => ({
-      width: dimensions.value.width,
-      height: dimensions.value.height,
-      fit: props.fit
-    })
-  }
-);
-const {
-  src: imgSrc,
-  loading: imgLoading,
-  bgLoading: imgBgLoading,
-  error: imgError
-} = imgLoadInfo;
-if (deferLoad.value) {
-  useSharedIntersectionObserver(container, {
-    once: true,
-    onChange(isIntersecting) {
-      if (isIntersecting) {
-        deferLoad.value = false;
-      }
-    }
-  });
+const isImgLoading = ref(true);
+const imgHasError = ref(null);
+function handleLoading() {
+  isImgLoading.value = true;
+}
+function handleLoaded(src) {
+  isImgLoading.value = false;
+  imgHasError.value = null;
+}
+function handleError(err) {
+  isImgLoading.value = false;
+  imgHasError.value = err;
 }
-const aspectRatioClass = computed(() => {
-  return !props.aspect || props.aspect === "auto" ? void 0 : AspectRatioClassNames[props.aspect];
-});
-const objectFitClass = computed(() => {
-  return !props.fit ? void 0 : ObjectFitClassNames[props.fit];
-});
-const altText = computed(() => {
-  return typeof props.alt === "function" ? props.alt(imgError.value) : props.alt ?? normalizedSource.value.description ?? "";
-});
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{.image{background-color:#fff;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.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%)}}
+@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%}}
 </style>

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

@@ -1,43 +1,12 @@
-import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
-import type { AspectRatio } from '@resee-movies/utilities/numbers/get-aspect-ratio';
-import type { MediaAssetTransformConfig } from '@resee-movies/utilities/resee/get-media-asset-url';
-import type { TmdbImageSize } from '@resee-movies/utilities/tmdb/get-tmdb-image-url';
-import type { LoadImageType } from '../composables/use-load-image.js';
-import type { HTMLElementClassNames } from '../types/index.js';
+import type { CardProps } from './Card.vue.js';
 import type { IconProps } from './Icon.vue.js';
-export interface ImageProps {
-    src: ImageFileDescriptor | null | undefined;
-    alt?: string | null | ((error: unknown) => string);
-    type?: LoadImageType;
-    width?: TmdbImageSize | string | number;
-    height?: string | number;
-    aspect?: AspectRatio | 'auto';
-    fit?: MediaAssetTransformConfig['fit'];
-    showLoading?: boolean;
+import type { ImageBaseProps } from './ImageBase.vue.js';
+export interface ImageProps extends ImageBaseProps, CardProps {
     defaultIcon?: string;
     iconSize?: IconProps['size'];
-    loading?: 'lazy' | 'eager';
     glassy?: boolean;
-    bordered?: boolean;
-    beveled?: boolean;
-    raised?: boolean;
-    overlayClasses?: HTMLElementClassNames;
+    scaleToParent?: boolean;
 }
-export declare const AspectRatioClassNames: {
-    readonly '1/1': "aspect-square";
-    readonly square: "aspect-square";
-    readonly '2/3': "aspect-poster";
-    readonly poster: "aspect-poster";
-    readonly '4/5': "aspect-tall";
-    readonly '16/9': "aspect-video";
-    readonly video: "aspect-video";
-};
-export declare const ObjectFitClassNames: {
-    readonly cover: "object-cover";
-    readonly outside: "object-cover";
-    readonly contain: "object-contain";
-    readonly inside: "object-contain";
-};
 declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ImageBase.vue

@@ -0,0 +1,114 @@
+<template>
+  <img
+    ref      = "container"
+    :src     = "imgSrc"
+    :alt     = "altText"
+    :width   = "dimensions.width"
+    :height  = "dimensions.height"
+    :loading = "props.loadStyle"
+    :class   = "[aspectRatioClass, objectFitClass]"
+  >
+</template>
+
+<script>
+export const AspectRatioClassNames = {
+  "1/1": "aspect-square",
+  "square": "aspect-square",
+  "2/3": "aspect-poster",
+  "poster": "aspect-poster",
+  "4/5": "aspect-tall",
+  "16/9": "aspect-video",
+  "video": "aspect-video"
+};
+export const ObjectFitClassNames = {
+  cover: "object-cover",
+  outside: "object-cover",
+  contain: "object-contain",
+  inside: "object-contain"
+};
+</script>
+
+<script setup>
+import { normalizeImageFileDescriptor } from "@resee-movies/utilities/images/normalize-image-file-descriptor";
+import { getAspectRatio } from "@resee-movies/utilities/numbers/get-aspect-ratio";
+import { fromTmdbImageSize } from "@resee-movies/utilities/tmdb/from-tmdb-image-size";
+import { computed, ref } from "vue";
+import { useLoadImage } from "../composables/use-load-image";
+import { useSharedIntersectionObserver } from "../composables/use-shared-intersection-observer";
+const props = defineProps({
+  src: { type: null, required: true },
+  alt: { type: [String, null, Function], required: false, default: "" },
+  type: { type: String, required: false, default: void 0 },
+  width: { type: null, required: false, default: "w185" },
+  height: { type: [String, Number], required: false, default: void 0 },
+  aspect: { type: String, required: false, default: void 0 },
+  fit: { type: String, required: false, default: "cover" },
+  loadStyle: { type: String, required: false }
+});
+const emits = defineEmits(["loading", "load", "error"]);
+const deferLoad = ref(props.loadStyle === "lazy");
+const container = ref();
+const normalizedSource = computed(() => {
+  const result = normalizeImageFileDescriptor(props.src);
+  if (props.type) {
+    result.sourceType = props.type;
+  }
+  return result;
+});
+const dimensions = computed(() => {
+  let intWidth = normalizedSource.value.width;
+  let intHeight = normalizedSource.value.height;
+  if (props.width || props.height) {
+    intWidth = fromTmdbImageSize(props.width);
+    intHeight = fromTmdbImageSize(props.height);
+  }
+  if (!props.aspect || props.aspect === "auto" || intWidth && intHeight) {
+    return { width: intWidth, height: intHeight };
+  }
+  if (intHeight) {
+    const aspect = getAspectRatio(intHeight, "y", props.aspect);
+    return { width: aspect.x, height: aspect.y };
+  }
+  if (intWidth) {
+    const aspect = getAspectRatio(intWidth, "x", props.aspect);
+    return { width: aspect.x, height: aspect.y };
+  }
+  return { width: void 0, height: void 0 };
+});
+const { src: imgSrc, error: imgError } = useLoadImage(
+  () => normalizedSource.value.identifier,
+  {
+    deferLoad,
+    type: () => normalizedSource.value.sourceType,
+    width: () => props.width,
+    friendlyName: () => normalizedSource.value.friendlyName,
+    onLoading: () => emits("loading"),
+    onLoad: (src) => emits("load", src),
+    onError: (err) => emits("error", err),
+    reseeConfig: () => ({
+      width: dimensions.value.width,
+      height: dimensions.value.height,
+      fit: props.fit
+    })
+  }
+);
+if (deferLoad.value) {
+  useSharedIntersectionObserver(container, {
+    once: true,
+    onChange(isIntersecting) {
+      if (isIntersecting) {
+        deferLoad.value = false;
+      }
+    }
+  });
+}
+const aspectRatioClass = computed(() => {
+  return !props.aspect || props.aspect === "auto" ? void 0 : AspectRatioClassNames[props.aspect];
+});
+const objectFitClass = computed(() => {
+  return !props.fit ? void 0 : ObjectFitClassNames[props.fit];
+});
+const altText = computed(() => {
+  return typeof props.alt === "function" ? props.alt(imgError.value) : props.alt ?? normalizedSource.value.description ?? "";
+});
+</script>

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

@@ -0,0 +1,41 @@
+import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
+import type { AspectRatio } from '@resee-movies/utilities/numbers/get-aspect-ratio';
+import type { MediaAssetTransformConfig } from '@resee-movies/utilities/resee/get-media-asset-url';
+import type { TmdbImageSize } from '@resee-movies/utilities/tmdb/get-tmdb-image-url';
+import type { LoadImageType } from '../composables/use-load-image.js';
+export interface ImageBaseProps {
+    src: ImageFileDescriptor | null | undefined;
+    alt?: string | null | ((error: unknown) => string);
+    type?: LoadImageType;
+    width?: TmdbImageSize | string | number;
+    height?: string | number;
+    aspect?: AspectRatio | 'auto';
+    fit?: MediaAssetTransformConfig['fit'];
+    loadStyle?: 'lazy' | 'eager';
+}
+export declare const AspectRatioClassNames: {
+    readonly '1/1': "aspect-square";
+    readonly square: "aspect-square";
+    readonly '2/3': "aspect-poster";
+    readonly poster: "aspect-poster";
+    readonly '4/5': "aspect-tall";
+    readonly '16/9': "aspect-video";
+    readonly video: "aspect-video";
+};
+export declare const ObjectFitClassNames: {
+    readonly cover: "object-cover";
+    readonly outside: "object-cover";
+    readonly contain: "object-contain";
+    readonly inside: "object-contain";
+};
+declare const __VLS_export: import("vue").DefineComponent<ImageBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: (err: unknown) => any;
+    load: (src: string | undefined) => any;
+    loading: () => any;
+}, string, import("vue").PublicProps, Readonly<ImageBaseProps> & Readonly<{
+    onError?: ((err: unknown) => any) | undefined;
+    onLoad?: ((src: string | undefined) => any) | undefined;
+    onLoading?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/LayoutPageRoot.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="app-main">
+    <ClientOnly>
+      <LazyNuxtRouteAnnouncer />
+      <LazyNuxtLoadingIndicator :color="false" class="resee-bg-linear-to-r" />
+    </ClientOnly>
+
+    <GlobalHeaderAnnouncement v-if="slots.announcement" :announcement-id="props.announcementId">
+      <slot name="announcement" />
+    </GlobalHeaderAnnouncement>
+
+    <GlobalHeader v-if="slots.header || slots.subheader" class="app-header">
+      <template #default v-if="slots.header">
+        <slot name="header" />
+      </template>
+
+      <template #subheader v-if="slots.subheader">
+        <slot name="subheader" />
+      </template>
+    </GlobalHeader>
+
+    <slot name="default" />
+
+    <footer v-if="slots.footer" class="app-footer">
+      <LayoutPageColumn>
+        <slot name="footer" />
+      </LayoutPageColumn>
+    </footer>
+
+    <ClientOnly>
+      <LazyNotificationContainer />
+    </ClientOnly>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { LazyNuxtLoadingIndicator, LazyNuxtRouteAnnouncer } from "#components";
+import { useSlots } from "vue";
+import GlobalHeaderAnnouncement from "./GlobalHeaderAnnouncement.vue";
+import LayoutPageColumn from "./LayoutPageColumn.vue";
+import LazyNotificationContainer from "./NotificationContainer.vue";
+import GlobalHeader from "./GlobalHeader.vue";
+const props = defineProps({
+  announcementId: { type: String, required: false, default: void 0 }
+});
+const slots = useSlots();
+</script>
+
+<style>
+@reference "tailwindcss";.app-footer,.app-header{backdrop-filter:blur(var(--blur-md));background-color:--alpha(var(--color-global-background)/60%)}.app-header{border-bottom:1px solid var(--color-global-foreground-accent)}.app-footer{border-top:1px solid var(--color-global-foreground-accent)}
+</style>

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

@@ -0,0 +1,21 @@
+export interface LayoutPageRootProps {
+    announcementId?: string;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageRootProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    announcement?: (props: {}) => any;
+} & {
+    header?: (props: {}) => any;
+} & {
+    subheader?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Message.vue

@@ -1,7 +1,11 @@
 <template>
-  <PrimeMessage :severity="props.severity" class="message" :pt="passthroughProps">
-    <template #icon>
-      <Icon :name="props.icon" :size="props.iconSize" />
+  <PrimeMessage
+    class     = "message"
+    :severity = "props.severity"
+    :pt       = "passthroughProps"
+  >
+    <template #icon v-if="displayIcon">
+      <Icon :name="displayIcon" :size="props.iconSize" />
     </template>
 
     <template #default>
@@ -11,20 +15,30 @@
 </template>
 
 <script>
-import { computed } from "vue";
+
 </script>
 
 <script setup>
+import { useCurrentElement } from "@vueuse/core";
 import PrimeMessage from "primevue/message";
+import { computed, onMounted } from "vue";
 import Icon from "./Icon.vue";
+import { StatusLevelIcons } from "../constants";
 const props = defineProps({
-  severity: { type: String, required: false },
-  text: { type: String, required: false },
-  class: { type: String, required: false },
-  style: { type: String, required: false },
-  accented: { type: Boolean, required: false },
-  icon: { type: String, required: false },
-  iconSize: { type: String, required: false }
+  severity: { type: String, required: false, default: "default" },
+  text: { type: String, required: false, default: void 0 },
+  class: { type: null, required: false, default: void 0 },
+  style: { type: String, required: false, default: void 0 },
+  accented: { type: Boolean, required: false, default: false },
+  icon: { type: [String, Boolean], required: false, default: void 0 },
+  iconSize: { type: String, required: false, default: void 0 },
+  scrollIntoView: { type: Boolean, required: false, default: false }
+});
+const element = useCurrentElement();
+onMounted(() => {
+  if (props.scrollIntoView && element.value instanceof HTMLElement) {
+    element.value.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
 });
 const passthroughProps = computed(() => {
   return {
@@ -47,6 +61,12 @@ const passthroughProps = computed(() => {
     }
   };
 });
+const displayIcon = computed(() => {
+  if (props.icon === false) {
+    return void 0;
+  }
+  return props.icon ?? StatusLevelIcons[props.severity];
+});
 </script>
 
 <style scoped>

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

@@ -1,13 +1,14 @@
-import type { StyleStatusLevel } from '../types/index.js';
+import type { HTMLElementClassNames, StyleStatusLevel } from '../types/index.js';
 import type { IconProps } from './Icon.vue.js';
 export interface MessageProps {
     severity?: StyleStatusLevel;
     text?: string;
-    class?: string;
+    class?: HTMLElementClassNames;
     style?: string;
     accented?: boolean;
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     iconSize?: IconProps['size'];
+    scrollIntoView?: boolean;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;

package/dist/runtime/components/NotificationContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <PrimeToast :pt="passthroughProps">
+  <PrimeToast :pt="passthroughProps" position="bottom-center">
     <template #messageicon="iconProps">
       <span v-bind="iconProps" />
     </template>
@@ -41,5 +41,5 @@ const passthroughProps = {
 </script>
 
 <style>
-@reference "tailwindcss";@layer components{.notification-container>div{display:flex;flex-direction:column;gap:--spacing(2);width:min(calc(100vw - 40px),--spacing(92))}.notification-container>div .notification .content{align-items:center;display:flex;gap:--spacing(2.5);padding:--spacing(2) --spacing(2.5)}.notification-container>div .notification .icon{flex-shrink:0;font-size:1.25rem}.notification-container>div .notification.has-summary .icon{align-self:start;margin-top:--spacing(.25)}.notification-container>div .notification .text{flex-grow:1}.notification-container>div .notification .close-wrapper{align-self:start}}
+@reference "tailwindcss";@layer components{.notification-container>div{display:flex;flex-direction:column;gap:--spacing(2);transform:translateX(-50%);width:min(calc(100vw - 40px),--spacing(92))}.notification-container>div .notification .content{align-items:center;display:flex;gap:--spacing(2.5);padding:--spacing(2) --spacing(2.5)}.notification-container>div .notification .icon{flex-shrink:0;font-size:1.25rem}.notification-container>div .notification.has-summary .icon{align-self:start;margin-top:--spacing(.25)}.notification-container>div .notification .text{flex-grow:1}.notification-container>div .notification .close-wrapper{align-self:start}}
 </style>