@shohojdhara/atomix 0.4.4 → 0.4.6

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -1,5 +1,5 @@
 import { ATOMIX_GLASS } from '../constants/components';
-import { calculateDistance, calculateElementCenter, calculateMouseInfluence, validateGlassSize, clampBlur } from '../../components/AtomixGlass/glass-utils';
+import { calculateDistance, calculateElementCenter, calculateMouseInfluence, validateGlassSize, clampBlur, smoothstep, softClamp } from '../../components/AtomixGlass/glass-utils';
 import type { GlassSize, MousePosition, OverLightObjectConfig } from '../types/components';
 
 /**
@@ -73,30 +73,53 @@ export const updateAtomixGlassStyles = (
       saturationBoost: baseOverLightConfig.saturationBoost
   };
 
-  // Calculate elastic translation
-  let elasticTranslation = { x: 0, y: 0 };
-  if (!effectiveWithoutEffects && wrapperElement) {
-    const rect = wrapperElement.getBoundingClientRect();
-    const center = calculateElementCenter(rect);
-
-    // Calculate fade in factor
-    let fadeInFactor = 0;
-    if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
-      const edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2);
-      const edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2);
-      const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
-      fadeInFactor = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
-    }
+    let computedDirectionalScale = directionalScale;
+
+    // Calculate elastic translation and directional scale
+    let elasticTranslation = { x: 0, y: 0 };
+    if (!effectiveWithoutEffects && wrapperElement) {
+      const rect = wrapperElement.getBoundingClientRect();
+      const center = calculateElementCenter(rect);
+
+      // Mouse presence and edge distance logic
+      if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
+        const deltaX = globalMousePosition.x - center.x;
+        const deltaY = globalMousePosition.y - center.y;
+        const edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2);
+        const edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2);
+        const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
+        
+        // Elastic translation
+        const rawT = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
+        const fadeInFactor = smoothstep(rawT);
+        elasticTranslation = {
+            x: deltaX * elasticity * 0.1 * fadeInFactor,
+            y: deltaY * elasticity * 0.1 * fadeInFactor,
+        };
 
-    elasticTranslation = {
-        x: (globalMousePosition.x - center.x) * elasticity * 0.1 * fadeInFactor,
-        y: (globalMousePosition.y - center.y) * elasticity * 0.1 * fadeInFactor,
-    };
-  }
+        // Directional scale
+        if (!isOverLight && edgeDistance <= ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE) {
+          const centerDistance = calculateDistance(globalMousePosition, center);
+          if (centerDistance > 0) {
+            const normalizedX = deltaX / centerDistance;
+            const normalizedY = deltaY / centerDistance;
+            const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * rawT;
+            
+            const scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * 0.3 - Math.abs(normalizedY) * stretchIntensity * 0.15;
+            const scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * 0.3 - Math.abs(normalizedX) * stretchIntensity * 0.15;
+            
+            const softScaleX = 1 - softClamp(Math.max(0, 1 - scaleX), 0.2);
+            const softScaleY = 1 - softClamp(Math.max(0, 1 - scaleY), 0.2);
+            
+            computedDirectionalScale = `scaleX(${Math.max(0.85, softScaleX)}) scaleY(${Math.max(0.85, softScaleY)})`;
+          }
+        }
+      }
+    }
 
-  const transformStyle = effectiveWithoutEffects
-      ? isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)'
-      : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : directionalScale}`;
+    const transformStyle = effectiveWithoutEffects
+        ? isActive && Boolean(onClick) ? 'scale(0.98)' : 'scale(1)'
+        : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? 'scale(0.96)' : computedDirectionalScale}`;
 
   // Update Wrapper Styles (glassVars)
   if (wrapperElement) {

package/src/lib/composables/useFooter.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { FooterLayout, ThemeColor, Size, SocialLink } from '../types/components';
 import { FOOTER } from '../constants/components';
 
@@ -8,61 +9,149 @@ export interface UseFooterOptions {
   sticky?: boolean;
   showNewsletter?: boolean;
   showBackToTop?: boolean;
+  showDivider?: boolean;
   socialLinks?: SocialLink[];
   onNewsletterSubmit?: (email: string) => void | Promise<void>;
   onBackToTop?: () => void;
+  glass?: boolean;
   className?: string;
 }
 
+/** Raw column size map per layout */
+type ColumnSizeMap = {
+  brand: number | 'auto';
+  content: number | 'auto';
+  newsletter: number | 'auto';
+};
+
+/**
+ * Resolves grid column size map for a given layout.
+ */
+function resolveColumnSizes(layout: FooterLayout, showNewsletter: boolean): ColumnSizeMap {
+  switch (layout) {
+    case 'columns':
+      return {
+        brand: 4,
+        content: showNewsletter ? 4 : 8,
+        newsletter: showNewsletter ? 4 : 0,
+      };
+    case 'centered':
+    case 'minimal':
+    case 'stacked':
+      return {
+        brand: 12,
+        content: 12,
+        newsletter: showNewsletter ? 12 : 0,
+      };
+    case 'flexible':
+      return { brand: 'auto', content: 'auto', newsletter: 'auto' };
+    case 'sidebar':
+      return {
+        brand: 3,
+        content: 9,
+        newsletter: showNewsletter ? 9 : 0,
+      };
+    case 'wide':
+      return {
+        brand: 3,
+        content: 6,
+        newsletter: showNewsletter ? 3 : 0,
+      };
+    default:
+      return {
+        brand: 4,
+        content: showNewsletter ? 4 : 8,
+        newsletter: showNewsletter ? 4 : 0,
+      };
+  }
+}
+
+/**
+ * Computes responsive GridCol props for a given column type.
+ */
+function resolveResponsiveColProps(
+  columnType: 'brand' | 'content' | 'newsletter',
+  layout: FooterLayout,
+  columnSizes: ColumnSizeMap
+): Record<string, number | boolean> {
+  if (layout === 'flexible' && columnSizes[columnType] === 'auto') {
+    return { xs: 12, sm: true, md: true };
+  }
+
+  const isMultiColumn = layout === 'columns' || layout === 'sidebar' || layout === 'wide';
+  const baseMd = isMultiColumn ? columnSizes[columnType] : 12;
+
+  return { xs: 12, md: baseMd as number };
+}
+
 export function useFooter(options: UseFooterOptions = {}) {
   const {
-    layout = FOOTER.DEFAULTS.LAYOUT,
+    layout = FOOTER.DEFAULTS.LAYOUT as FooterLayout,
     variant = FOOTER.DEFAULTS.VARIANT,
-    size = FOOTER.DEFAULTS.SIZE,
+    size = FOOTER.DEFAULTS.SIZE as Size,
     sticky = FOOTER.DEFAULTS.STICKY,
     showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER,
     showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP,
+    showDivider = FOOTER.DEFAULTS.SHOW_DIVIDER,
     socialLinks = [],
     onNewsletterSubmit,
     onBackToTop,
+    glass = false,
     className = '',
   } = options;
 
-  // Generate footer classes
-  const footerClass = (() => {
-    const classes = [
+  // ---------- CSS class strings ----------
+
+  const footerClass = useMemo(() => {
+    const layoutKey = layout.toUpperCase() as keyof typeof FOOTER.CLASSES;
+    const sizeKey = size.toUpperCase() as keyof typeof FOOTER.CLASSES;
+
+    return [
       FOOTER.CLASSES.BASE,
-      FOOTER.CLASSES[layout.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.COLUMNS,
+      FOOTER.CLASSES[layoutKey] || FOOTER.CLASSES.COLUMNS,
       `c-footer--${variant}`,
-      FOOTER.CLASSES[size.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.MD,
+      FOOTER.CLASSES[sizeKey] || FOOTER.CLASSES.MD,
       sticky && FOOTER.CLASSES.STICKY,
       showNewsletter && 'c-footer--with-newsletter',
+      glass && 'c-footer--glass',
       className,
-    ];
-    return classes.filter(Boolean).join(' ');
-  })();
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }, [layout, variant, size, sticky, showNewsletter, glass, className]);
 
   const containerClass = FOOTER.CLASSES.CONTAINER;
   const brandClass = FOOTER.CLASSES.BRAND;
-  const sectionsClass = (() => {
-    const classes = [
+
+  const sectionsClass = useMemo(() => {
+    return [
       FOOTER.CLASSES.SECTIONS,
       layout === 'columns' && 'c-footer__sections--columns',
       layout === 'centered' && 'c-footer__sections--centered',
       layout === 'stacked' && 'c-footer__sections--stacked',
-    ];
-    return classes.filter(Boolean).join(' ');
-  })();
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }, [layout]);
+
   const bottomClass = FOOTER.CLASSES.BOTTOM;
 
-  // Handle newsletter submission
+  // ---------- Grid helpers ----------
+
+  const columnSizes = useMemo(
+    () => resolveColumnSizes(layout, showNewsletter),
+    [layout, showNewsletter]
+  );
+
+  const getResponsiveColumnProps = (columnType: 'brand' | 'content' | 'newsletter') =>
+    resolveResponsiveColProps(columnType, layout, columnSizes);
+
+  // ---------- Handlers ----------
+
   const handleNewsletterSubmit = (email: string) => {
-    if (onNewsletterSubmit) {
-      onNewsletterSubmit(email);
-    }
+    onNewsletterSubmit?.(email);
   };
 
-  // Handle back to top
   const handleBackToTop = () => {
     if (onBackToTop) {
       onBackToTop();
@@ -72,14 +161,22 @@ export function useFooter(options: UseFooterOptions = {}) {
   };
 
   return {
+    // Classes
     footerClass,
     containerClass,
     brandClass,
     sectionsClass,
     bottomClass,
+    // Grid helpers
+    columnSizes,
+    getResponsiveColumnProps,
+    // Handlers
     handleNewsletterSubmit,
     handleBackToTop,
+    // Pass-through state
     socialLinks,
     showNewsletter,
+    showBackToTop,
+    showDivider,
   };
 }

package/src/lib/composables/useSlider.ts

@@ -26,7 +26,7 @@ export interface UseSliderReturn extends SliderState {
 
 export function useSlider(options: UseSliderOptions): UseSliderReturn {
   const {
-    slides,
+    slides: rawSlides,
     slidesToShow = 1,
     spaceBetween = 0,
     loop = false,
@@ -39,6 +39,8 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
   } = options;
 
+  const slides = Array.isArray(rawSlides) ? rawSlides : [];
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const repositioningRef = useRef(false);

package/src/lib/constants/components.ts

@@ -1663,7 +1663,9 @@ export const ATOMIX_GLASS = {
     ENABLE_OVER_LIGHT_LAYERS: true,
   },
   CONSTANTS: {
-    ACTIVATION_ZONE: 200,
+    ACTIVATION_ZONE: 350,
+    LERP_FACTOR: 0.08,
+    SMOOTHSTEP_POWER: 2.5,
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,

package/src/lib/types/components.ts

@@ -1344,6 +1344,11 @@ export interface NavItemProps extends BaseComponentProps {
    */
   href?: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
   /**
    * Optional click handler
    */
@@ -1357,7 +1362,7 @@ export interface NavItemProps extends BaseComponentProps {
   /**
    * Optional custom link component
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**
@@ -1409,6 +1414,16 @@ export interface MenuItemProps extends BaseComponentProps {
    */
   href?: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
+  /**
+   * Optional custom link component
+   */
+  linkComponent?: React.ElementType;
+
   /**
    * Item icon
    */
@@ -1469,6 +1484,18 @@ export interface MegaMenuLinkProps extends BaseComponentProps {
    */
   href: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
+  /**
+   * Optional custom link component
+   */
+  linkComponent?: React.ElementType;
+
+
+
   /**
    * Link content
    */
@@ -1544,14 +1571,14 @@ export interface SideMenuProps extends BaseComponentProps {
    * ```tsx
    * // Next.js
    * import Link from 'next/link';
-   * <SideMenu LinkComponent={Link} />
+   * <SideMenu linkComponent={Link} />
    *
    * // React Router
    * import { Link } from 'react-router-dom';
-   * <SideMenu LinkComponent={Link} />
+   * <SideMenu linkComponent={Link} />
    * ```
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 
   /**
    * Menu items
@@ -1623,7 +1650,7 @@ export interface SideMenuItemProps extends BaseComponentProps {
   /**
    * Link target attribute
    */
-  target?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 
   /**
    * Link rel attribute
@@ -1632,20 +1659,20 @@ export interface SideMenuItemProps extends BaseComponentProps {
 
   /**
    * Optional custom link component (e.g., Next.js Link, React Router Link)
-   * If not provided, will use LinkComponent from parent SideMenu context
+   * If not provided, will use linkComponent from parent SideMenu context
    *
    * @example
    * ```tsx
    * // Next.js
    * import Link from 'next/link';
-   * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
+   * <SideMenuItem href="/about" linkComponent={Link}>About</SideMenuItem>
    *
    * // React Router
    * import { Link } from 'react-router-dom';
-   * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
+   * <SideMenuItem href="/about" linkComponent={Link}>About</SideMenuItem>
    * ```
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**
@@ -3460,6 +3487,11 @@ export interface DropdownItemProps extends BaseComponentProps {
    */
   href?: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
   /**
    * Whether item is active
    */
@@ -3483,7 +3515,7 @@ export interface DropdownItemProps extends BaseComponentProps {
   /**
    * Optional custom link component
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**
@@ -4044,7 +4076,7 @@ export interface CardProps extends BaseComponentProps {
   /**
    * Optional custom link component (e.g., Next.js Link, React Router Link)
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 
   /**
    * Optional click handler
@@ -6549,7 +6581,7 @@ export interface FooterLinkProps extends BaseComponentProps {
   /**
    * Custom link component (e.g., React Router Link)
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**

package/src/styles/06-components/_components.atomix-glass.scss

@@ -9,16 +9,53 @@
   // CSS custom property defaults
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.15s) ease-out;
+  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
+    cubic-bezier(0.22, 1, 0.36, 1);
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
   --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
 
+  // =========================================================================
+  // Z-INDEX STACKING ORDER (local scale, scoped to this component)
+  // =========================================================================
+  // 0: background layers
+  // 1: container (wraps filter + content)
+  // 2: base / overlay effect layers
+  // 3: hover effect layers
+  // 4: overlay-highlight
+  // 5: border-1
+  // 6: border-2
+  // =========================================================================
+  // Internal layers within the container:
+  //   filter  = base + 1
+  //   content = base + 7
+  // =========================================================================
+  --atomix-glass-base-z-index: 0;
+
+  --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
+  --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
+  --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
+  --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
+  --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
+  --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
+  --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
+  --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
+  --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
+
   // Base layer styles for all effect layers (hover, border, overlay)
   &__hover-1,
   &__hover-2,
-  &__hover-3,
+  &__hover-3 {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-hover);
+  }
+
   &__base,
   &__overlay {
     position: absolute;
@@ -27,6 +64,7 @@
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-effect);
   }
 
   // Interactive hover effects
@@ -40,19 +78,25 @@
   }
 
   &__hover-1 {
-    transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
+    transition:
+      opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
+      background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
     opacity: var(--atomix-glass-hover-1-opacity, 0);
     background: var(--atomix-glass-hover-1-gradient, none);
   }
 
   &__hover-2 {
-    transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
+    transition:
+      opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+      background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
     opacity: var(--atomix-glass-hover-2-opacity, 0);
     background: var(--atomix-glass-hover-2-gradient, none);
   }
 
   &__hover-3 {
-    transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
+    transition:
+      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+      background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
     opacity: var(--atomix-glass-hover-3-opacity, 0);
     background: var(--atomix-glass-hover-3-gradient, none);
   }
@@ -80,9 +124,9 @@
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
     mix-blend-mode: screen;
-    // Dynamic opacity and background are set via inline styles
-    // Opacity is calculated: opacityValues.over * OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER
-    // Background gradient uses constants for positioning
+    z-index: var(--_glass-z-overlay-highlight);
+    opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
+    background: var(--atomix-glass-overlay-highlight-bg, none);
   }
 
   // Border effect layers - matching old version exactly
@@ -114,13 +158,12 @@
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
-    z-index: var(--atomix-z-index-5);
   }
 
   &__border-1 {
     opacity: var(--atomix-opacity-20, 0.2);
     mix-blend-mode: screen;
-    z-index: var(--atomix-z-index-5, 5);
+    z-index: var(--_glass-z-border-1);
     background: var(--atomix-glass-border-gradient-1, none);
     box-shadow: var(
       --atomix-glass-border-shadow,
@@ -132,7 +175,7 @@
 
   &__border-2 {
     mix-blend-mode: overlay;
-    z-index: var(--atomix-z-index-6, 6);
+    z-index: var(--_glass-z-border-2);
     background: var(--atomix-glass-border-gradient-2, none);
     box-shadow: var(
       --atomix-glass-border-shadow,
@@ -149,6 +192,7 @@
     position: relative;
     border-radius: var(--atomix-glass-radius);
     transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-container);
   }
 
   &__inner {
@@ -156,6 +200,8 @@
     height: var(--atomix-glass-container-height);
     position: relative;
     border-radius: var(--atomix-glass-radius);
+    padding: var(--atomix-glass-container-padding);
+    box-shadow: var(--atomix-glass-container-box-shadow);
   }
 
   &__filter {
@@ -165,6 +211,7 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
+    z-index: var(--_glass-z-filter);
 
     svg {
       border-radius: var(--atomix-glass-radius);
@@ -175,13 +222,18 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    border-radius: var(--atomix-glass-radius);
+    border-radius: var(--atomix-glass-container-radius);
+    backdrop-filter: var(--atomix-glass-container-backdrop);
   }
 
   &__filter-shadow {
     position: absolute;
     inset: var(--atomix-glass-border-width);
     pointer-events: none;
+    border-radius: var(--atomix-glass-container-radius);
+    box-shadow: var(--atomix-glass-container-shadow);
+    opacity: var(--atomix-glass-container-shadow-opacity);
+    background: var(--atomix-glass-container-bg);
   }
 
   &__content {
@@ -189,15 +241,22 @@
     width: var(--atomix-glass-container-width);
     height: var(--atomix-glass-container-height);
     border-radius: var(--atomix-glass-radius);
+    z-index: var(--_glass-z-content);
+    text-shadow: var(--atomix-glass-container-text-shadow);
   }
 
   // Background layers for over-light mode
   &__background-layer {
-    position: absolute;
+    position: var(--atomix-glass-position);
+    top: var(--atomix-glass-top);
+    left: var(--atomix-glass-left);
+    width: var(--atomix-glass-width);
+    height: var(--atomix-glass-height);
     pointer-events: none;
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-background);
 
     &--dark {
       background-color: var(--atomix-gray-9, #1f2937);
@@ -210,7 +269,6 @@
 
     &--dark#{&}--over-light {
       opacity: var(--atomix-opacity-50, 0.5);
-      z-index: -1;
     }
 
     &--black#{&}--over-light {