@frybynite/image-cloud 0.9.2 → 0.9.4

package/dist/style.css

@@ -1 +1 @@
-.fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary: #1a1a2e;--fbn-ic-bg-glass: rgba(255, 255, 255, .05);--fbn-ic-border-glass: rgba(255, 255, 255, .1);--fbn-ic-text-primary: #ffffff;--fbn-ic-text-secondary: #b8b8d1;--fbn-ic-text-muted: #6b6b8f;--fbn-ic-accent-primary: #6366f1;--fbn-ic-accent-secondary: #8b5cf6;--fbn-ic-accent-glow: rgba(99, 102, 241, .4);--fbn-ic-transition-smooth: cubic-bezier(.4, 0, .2, 1);--fbn-ic-transition-bounce: cubic-bezier(.68, -.55, .265, 1.55);--fbn-ic-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--fbn-ic-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--fbn-ic-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--fbn-ic-shadow-glow: 0 0 20px var(--fbn-ic-accent-glow)}.fbn-ic-gallery{position:relative;width:100%;height:100%;overflow:hidden;perspective:1000px}.fbn-ic-image{position:absolute;border-radius:8px;box-shadow:var(--fbn-ic-shadow-md);cursor:pointer;transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s .6s;will-change:transform;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.fbn-ic-image:hover{box-shadow:var(--fbn-ic-shadow-lg)}.fbn-ic-image.fbn-ic-focused{z-index:1000;box-shadow:0 20px 60px #000000b3,var(--fbn-ic-shadow-glow);transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s 0s;will-change:auto}.fbn-ic-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--fbn-ic-text-secondary);z-index:100;pointer-events:none}.fbn-ic-spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid var(--fbn-ic-border-glass);border-top:4px solid var(--fbn-ic-accent-primary);border-radius:50%;animation:fbn-ic-spin 1s linear infinite}@keyframes fbn-ic-spin{to{transform:rotate(360deg)}}.fbn-ic-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:600px;padding:1.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.fbn-ic-counter{background:#0009;color:#fff;padding:6px 16px;border-radius:16px;font-family:system-ui,sans-serif;font-size:14px}.fbn-ic-hidden{display:none!important}
+.fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary: #1a1a2e;--fbn-ic-bg-glass: rgba(255, 255, 255, .05);--fbn-ic-border-glass: rgba(255, 255, 255, .1);--fbn-ic-text-primary: #ffffff;--fbn-ic-text-secondary: #b8b8d1;--fbn-ic-text-muted: #6b6b8f;--fbn-ic-accent-primary: #6366f1;--fbn-ic-accent-secondary: #8b5cf6;--fbn-ic-accent-glow: rgba(99, 102, 241, .4);--fbn-ic-transition-smooth: cubic-bezier(.4, 0, .2, 1);--fbn-ic-transition-bounce: cubic-bezier(.68, -.55, .265, 1.55);--fbn-ic-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--fbn-ic-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--fbn-ic-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--fbn-ic-shadow-glow: 0 0 20px var(--fbn-ic-accent-glow)}.fbn-ic-gallery{position:relative;width:100%;height:100%;overflow:hidden;perspective:1000px}.fbn-ic-image{position:absolute;border-radius:8px;box-shadow:var(--fbn-ic-shadow-md);cursor:pointer;transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s .6s;will-change:transform;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.fbn-ic-image:hover{box-shadow:var(--fbn-ic-shadow-lg)}.fbn-ic-image.fbn-ic-focused{z-index:1000;box-shadow:0 20px 60px #000000b3,var(--fbn-ic-shadow-glow);transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s 0s;will-change:auto}.fbn-ic-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--fbn-ic-text-secondary);z-index:100;pointer-events:none}.fbn-ic-spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid var(--fbn-ic-border-glass);border-top:4px solid var(--fbn-ic-accent-primary);border-radius:50%;animation:fbn-ic-spin 1s linear infinite}@keyframes fbn-ic-spin{to{transform:rotate(360deg)}}.fbn-ic-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:600px;padding:1.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.fbn-ic-counter{background:#0009;color:#fff;padding:6px 16px;border-radius:16px;font-family:system-ui,sans-serif;font-size:14px}.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus{outline:2px solid var(--fbn-ic-accent-primary);outline-offset:-4px}.fbn-ic-nav-btn{background:#0009;color:#fff;width:44px;height:44px;border-radius:50%;font-family:system-ui,sans-serif;font-size:28px;display:flex;align-items:center;justify-content:center;transition:background .2s ease,opacity .2s ease;opacity:.8}.fbn-ic-nav-btn:hover{background:#000000d9;opacity:1}.fbn-ic-hidden{display:none!important}

package/dist/vue.d.ts

@@ -552,7 +552,7 @@ declare interface FocusInteractionConfig {
  * Minimal functional CSS required for the library to work.
  * Injected automatically - no external CSS file needed.
  */
-export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.fbn-ic-image {\n  position: absolute;\n  cursor: pointer;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0.6s;\n  will-change: transform;\n  user-select: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.fbn-ic-image.fbn-ic-focused {\n  z-index: 1000;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0s;\n  will-change: auto;\n}\n\n.fbn-ic-counter {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.fbn-ic-hidden {\n  display: none !important;\n}\n";
+export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.fbn-ic-image {\n  position: absolute;\n  cursor: pointer;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0.6s;\n  will-change: transform;\n  user-select: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.fbn-ic-image.fbn-ic-focused {\n  z-index: 1000;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0s;\n  will-change: auto;\n}\n\n.fbn-ic-counter {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.fbn-ic-gallery:focus,\n.fbn-ic-gallery.fbn-ic-has-focus {\n  outline: 2px solid rgba(147, 197, 253, 0.8);\n  outline-offset: -4px;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline:focus {\n  outline: none;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus {\n  outline: 2px solid rgba(99, 102, 241, 0.6);\n  outline-offset: -4px;\n}\n\n.fbn-ic-nav-btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 10001;\n  cursor: pointer;\n  border: none;\n  background: none;\n  padding: 0;\n  line-height: 1;\n}\n.fbn-ic-nav-btn-prev {\n  left: 12px;\n}\n.fbn-ic-nav-btn-next {\n  right: 12px;\n}\n\n.fbn-ic-hidden {\n  display: none !important;\n}\n";
 
 export declare type GalleryConfig = ImageCloudConfig;
 
@@ -805,6 +805,10 @@ declare class ImageCloud {
     private errorElAutoCreated;
     private counterEl;
     private counterElAutoCreated;
+    private prevButtonEl;
+    private nextButtonEl;
+    private prevButtonElAutoCreated;
+    private nextButtonElAutoCreated;
     constructor(options?: ImageCloudOptions);
     /**
      * Create image filter based on shared loader config
@@ -828,6 +832,8 @@ declare class ImageCloud {
     private createDefaultLoadingElement;
     private createDefaultErrorElement;
     private createDefaultCounterElement;
+    private createDefaultPrevButtonElement;
+    private createDefaultNextButtonElement;
     private setupEventListeners;
     /**
      * Navigate to the next image (Right arrow)
@@ -865,6 +871,10 @@ declare class ImageCloud {
     private hideError;
     private updateCounter;
     private hideCounter;
+    private showFocusIndicator;
+    private hideFocusIndicator;
+    private showNavButtons;
+    private hideNavButtons;
     /**
      * Destroy the gallery and clean up resources
      */
@@ -880,7 +890,7 @@ export declare interface ImageCloudConfig {
     layout: LayoutConfig;
     animation: AnimationConfig;
     interaction: InteractionConfig;
-    rendering: RenderingConfig;
+    ui: UIConfig;
     styling?: ImageStylingConfig;
 }
 
@@ -893,7 +903,11 @@ export declare interface ImageCloudOptions {
     layout?: Partial<LayoutConfig>;
     animation?: Partial<AnimationConfig>;
     interaction?: Partial<InteractionConfig>;
-    rendering?: Partial<RenderingConfig>;
+    ui?: Partial<UIConfig>;
+    /** @deprecated Use `ui` instead of `rendering.ui` */
+    rendering?: {
+        ui?: Partial<UIConfig>;
+    };
     styling?: Partial<ImageStylingConfig>;
 }
 
@@ -1253,11 +1267,6 @@ export declare class RandomPlacementLayout implements PlacementLayout {
     private random;
 }
 
-declare interface RenderingConfig {
-    responsive: ResponsiveRenderingConfig;
-    ui: UIRenderingConfig;
-}
-
 /**
  * Check if a path type requires JavaScript animation (vs CSS transitions)
  */
@@ -1281,18 +1290,9 @@ export declare interface ResponsiveHeight {
     height: number;
 }
 
-export declare interface ResponsiveRenderingConfig {
-    breakpoints: {
-        mobile: number;
-        tablet?: number;
-        desktop?: number;
-    };
-    mobileDetection: () => boolean;
-}
-
 declare type ShadowPreset = 'none' | 'sm' | 'md' | 'lg' | 'glow';
 
-export declare interface SharedLoaderConfig {
+declare interface SharedLoaderConfig {
     validateUrls?: boolean;
     validationTimeout?: number;
     validationMethod?: 'head' | 'simple' | 'none';
@@ -1482,12 +1482,16 @@ export declare interface TransformParams {
     scale?: number;
 }
 
-export declare interface UIRenderingConfig {
+export declare interface UIConfig {
     showLoadingSpinner: boolean;
     showImageCounter?: boolean;
     loadingElement?: string | HTMLElement;
     errorElement?: string | HTMLElement;
     counterElement?: string | HTMLElement;
+    showNavButtons?: boolean;
+    prevButtonElement?: string | HTMLElement;
+    nextButtonElement?: string | HTMLElement;
+    showFocusOutline?: boolean;
 }
 
 /**