// #region Imports
import { EaseInOut, EaseOut } from '../AnimationEasings';
import { animation } from '../animation';
// #endregion
// -----------------------------------------------------------------------
// Bubble-Drop presets — TypeScript equivalents of all Joy theme
// @keyframes animations. Axis-coupled squash & stretch with
// decreasing amplitude. Use the AnimationView playground to preview.
// -----------------------------------------------------------------------
// -----------------------------------------------------------------------
// 1. Entrance Bounce — element pops in from scale(0) with elastic settle
// -----------------------------------------------------------------------
/**
 * Entrance bounce — element pops in with squash & stretch.
 * Mirrors: `bubblegum-tile-expand` (TileManagerElement).
 */
const entranceBounce = animation([
    {
        offset: 0,
        transform: 'scale(0.2)',
        opacity: '0'
    },
    {
        offset: 0.22,
        transform: 'scaleX(1.35) scaleY(0.7)',
        opacity: '1'
    },
    {
        offset: 0.42,
        transform: 'scaleX(0.85) scaleY(1.18)'
    },
    {
        offset: 0.60,
        transform: 'scaleX(1.08) scaleY(0.93)'
    },
    {
        offset: 0.78,
        transform: 'scaleX(0.97) scaleY(1.03)'
    },
    {
        offset: 1,
        transform: 'scale(1)',
        opacity: '1'
    }
], {
    duration: 600,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
/**
 * Exit bounce — element shrinks out with squash & stretch.
 * Mirrors: `bubblegum-tile-restore-grid` (TileManagerElement).
 */
const exitBounce = animation([
    {
        offset: 0,
        transform: 'scale(1.4)',
        opacity: '0'
    },
    {
        offset: 0.22,
        transform: 'scaleX(0.7) scaleY(1.35)',
        opacity: '1'
    },
    {
        offset: 0.42,
        transform: 'scaleX(1.15) scaleY(0.85)'
    },
    {
        offset: 0.60,
        transform: 'scaleX(0.93) scaleY(1.08)'
    },
    {
        offset: 0.78,
        transform: 'scaleX(1.03) scaleY(0.97)'
    },
    {
        offset: 1,
        transform: 'scale(1)',
        opacity: '1'
    }
], {
    duration: 600,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 2. Toggle Bounce — switch/knob toggle with elastic settle
// -----------------------------------------------------------------------
/**
 * Toggle bounce — stretch in travel direction with settle.
 * Mirrors: `bubblegum-switch-on` (CheckmarkElement).
 */
const toggleBounce = animation([
    {
        offset: 0,
        transform: 'scaleX(1.35) scaleY(0.72)'
    },
    {
        offset: 0.25,
        transform: 'scaleX(0.85) scaleY(0.98)'
    },
    {
        offset: 0.45,
        transform: 'scaleX(1.08) scaleY(0.92)'
    },
    {
        offset: 0.62,
        transform: 'scaleX(0.96) scaleY(0.98)'
    },
    {
        offset: 0.78,
        transform: 'scaleX(1.03) scaleY(0.97)'
    },
    {
        offset: 0.90,
        transform: 'scaleX(0.99) scaleY(0.99)'
    },
    {
        offset: 1,
        transform: 'scale(1)'
    }
], {
    duration: 600,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 3. Press Squeeze — tactile :active feedback
// -----------------------------------------------------------------------
/**
 * Press squeeze — horizontal squash like pressing bubblegum.
 * Mirrors: `:active` states on interactive elements.
 */
const pressSqueeze = animation([
    {
        offset: 0,
        transform: 'scaleX(1) scaleY(1)'
    },
    {
        offset: 0.35,
        transform: 'scaleX(1.3) scaleY(0.78)'
    },
    {
        offset: 1,
        transform: 'scaleX(1) scaleY(1)'
    }
], {
    duration: 200,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
/**
 * Press squeeze vertical — vertical squash.
 */
const pressSqueezeVertical = animation([
    {
        offset: 0,
        transform: 'scaleX(1) scaleY(1)'
    },
    {
        offset: 0.35,
        transform: 'scaleX(0.78) scaleY(1.3)'
    },
    {
        offset: 1,
        transform: 'scaleX(1) scaleY(1)'
    }
], {
    duration: 200,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 4. Digit Bounce Up/Down — per-digit counter animations
// -----------------------------------------------------------------------
/**
 * Digit bounce up — stretch tall first (bubblegum rising).
 * Mirrors: `bubblegum-digit-up` (NumberCounterElement).
 */
const digitBounceUp = animation([
    {
        offset: 0,
        transform: 'scaleX(1) scaleY(1)'
    },
    {
        offset: 0.25,
        transform: 'scaleX(0.80) scaleY(1.25)'
    },
    {
        offset: 0.50,
        transform: 'scaleX(1.12) scaleY(0.90)'
    },
    {
        offset: 0.75,
        transform: 'scaleX(0.97) scaleY(1.03)'
    },
    {
        offset: 1,
        transform: 'scaleX(1) scaleY(1)'
    }
], {
    duration: 200,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
/**
 * Digit bounce down — squash wide first (bubblegum deflating).
 * Mirrors: `bubblegum-digit-down` (NumberCounterElement).
 */
const digitBounceDown = animation([
    {
        offset: 0,
        transform: 'scaleX(1) scaleY(1)'
    },
    {
        offset: 0.25,
        transform: 'scaleX(1.25) scaleY(0.80)'
    },
    {
        offset: 0.50,
        transform: 'scaleX(0.90) scaleY(1.12)'
    },
    {
        offset: 0.75,
        transform: 'scaleX(1.03) scaleY(0.97)'
    },
    {
        offset: 1,
        transform: 'scaleX(1) scaleY(1)'
    }
], {
    duration: 200,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 5. Taffy Pull — indeterminate progress bar sweep
// -----------------------------------------------------------------------
/**
 * Taffy pull — indeterminate progress bar sweep with squash.
 * Mirrors: `bubblegum-indeterminate` (ProgressBarElement).
 */
const taffyPull = animation([
    {
        offset: 0,
        transform: 'translateX(-100%) scaleX(0.06) scaleY(1)'
    },
    {
        offset: 0.30,
        transform: 'translateX(-10%) scaleX(0.55) scaleY(0.92)'
    },
    {
        offset: 0.55,
        transform: 'translateX(30%) scaleX(0.45) scaleY(0.94)'
    },
    {
        offset: 0.80,
        transform: 'translateX(105%) scaleX(0.06) scaleY(1)'
    },
    {
        offset: 1,
        transform: 'translateX(105%) scaleX(0.06) scaleY(1)'
    }
], {
    duration: 1800,
    easing: EaseInOut.Cubic,
    fill: 'forwards'
});
/**
 * Taffy pull (trailing glob) — secondary indeterminate bar sweep.
 * Mirrors: `bubblegum-indeterminate-short` (ProgressBarElement).
 */
const taffyPullShort = animation([
    {
        offset: 0,
        transform: 'translateX(-200%) scaleX(0.04) scaleY(1)'
    },
    {
        offset: 0.35,
        transform: 'translateX(0%) scaleX(0.35) scaleY(0.94)'
    },
    {
        offset: 0.60,
        transform: 'translateX(40%) scaleX(0.25) scaleY(0.96)'
    },
    {
        offset: 0.82,
        transform: 'translateX(105%) scaleX(0.04) scaleY(1)'
    },
    {
        offset: 1,
        transform: 'translateX(105%) scaleX(0.04) scaleY(1)'
    }
], {
    duration: 2400,
    easing: EaseInOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 6. Shimmer — skeleton loading pulse
// -----------------------------------------------------------------------
/**
 * Shimmer sweep with squash — skeleton loading animation.
 * Mirrors: `bubblegum-shimmer` (SkeletonElement).
 */
const shimmer = animation([
    {
        offset: 0,
        transform: 'translateX(-37.5%) scaleX(1) scaleY(1)'
    },
    {
        offset: 0.45,
        transform: 'translateX(0%) scaleX(1.15) scaleY(0.88)'
    },
    {
        offset: 0.75,
        transform: 'translateX(37.5%) scaleX(1) scaleY(1)'
    },
    {
        offset: 1,
        transform: 'translateX(37.5%) scaleX(1) scaleY(1)'
    }
], {
    duration: 1800,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 7. Chat Wave — bouncing typing indicator dots
// -----------------------------------------------------------------------
/**
 * Chat wave — bouncing dot with full squash & stretch cycle.
 * Mirrors: `bubblegum-wave` (ChatMessageElement).
 */
const chatWave = animation([
    {
        offset: 0,
        transform: 'translateY(0) scaleX(1) scaleY(1)'
    },
    {
        offset: 0.08,
        transform: 'translateY(1px) scaleX(1.4) scaleY(0.65)'
    },
    {
        offset: 0.18,
        transform: 'translateY(-4px) scaleX(0.72) scaleY(1.35)'
    },
    {
        offset: 0.26,
        transform: 'translateY(-6px) scaleX(1.18) scaleY(0.82)'
    },
    {
        offset: 0.34,
        transform: 'translateY(-2px) scaleX(0.88) scaleY(1.12)'
    },
    {
        offset: 0.42,
        transform: 'translateY(0) scaleX(1.08) scaleY(0.92)'
    },
    {
        offset: 0.50,
        transform: 'translateY(0) scaleX(0.96) scaleY(1.04)'
    },
    {
        offset: 0.57,
        transform: 'translateY(0) scaleX(1.02) scaleY(0.98)'
    },
    {
        offset: 0.65,
        transform: 'translateY(0) scaleX(1) scaleY(1)'
    },
    {
        offset: 1,
        transform: 'translateY(0) scaleX(1) scaleY(1)'
    }
], {
    duration: 1800,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 8. Tile Maximize / Restore — tile management animations
// -----------------------------------------------------------------------
/**
 * Tile maximize — element scales up with entrance bounce.
 * Mirrors: `bubblegum-tile-maximize` (TileManagerTileElement).
 */
const tileMaximize = animation([
    {
        offset: 0,
        transform: 'scale(0.15)',
        opacity: '0'
    },
    {
        offset: 0.20,
        transform: 'scaleX(1.4) scaleY(0.65)',
        opacity: '1'
    },
    {
        offset: 0.40,
        transform: 'scaleX(0.82) scaleY(1.2)'
    },
    {
        offset: 0.58,
        transform: 'scaleX(1.1) scaleY(0.92)'
    },
    {
        offset: 0.74,
        transform: 'scaleX(0.96) scaleY(1.04)'
    },
    {
        offset: 1,
        transform: 'scale(1)',
        opacity: '1'
    }
], {
    duration: 600,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
/**
 * Tile restore — element scales down with settle bounce.
 * Mirrors: `bubblegum-tile-restore` (TileManagerTileElement).
 */
const tileRestore = animation([
    {
        offset: 0,
        transform: 'scale(1.5)',
        opacity: '0'
    },
    {
        offset: 0.20,
        transform: 'scaleX(0.65) scaleY(1.38)',
        opacity: '1'
    },
    {
        offset: 0.40,
        transform: 'scaleX(1.18) scaleY(0.82)'
    },
    {
        offset: 0.58,
        transform: 'scaleX(0.92) scaleY(1.08)'
    },
    {
        offset: 0.74,
        transform: 'scaleX(1.04) scaleY(0.96)'
    },
    {
        offset: 1,
        transform: 'scale(1)',
        opacity: '1'
    }
], {
    duration: 600,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// 9. Focus Ring — elastic outline grow/shrink
// -----------------------------------------------------------------------
/**
 * Focus ring grow — outline width bounces to active size.
 * Mirrors: `bubblegum-outward-grow` (FocusRingElement).
 * Uses `outline-width` as CSS animation target.
 */
const focusRingGrow = animation([
    {
        offset: 0,
        outlineWidth: '0px'
    },
    {
        offset: 0.40,
        outlineWidth: '5.4px'
    },
    {
        offset: 0.65,
        outlineWidth: '3.4px'
    },
    {
        offset: 0.82,
        outlineWidth: '4.2px'
    },
    {
        offset: 1,
        outlineWidth: '4px'
    }
], {
    duration: 400,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
/**
 * Focus ring shrink — outline width bounces out.
 * Mirrors: `bubblegum-outward-shrink` (FocusRingElement).
 */
const focusRingShrink = animation([
    {
        offset: 0,
        outlineWidth: '4px'
    },
    {
        offset: 0.35,
        outlineWidth: '4.6px'
    },
    {
        offset: 1,
        outlineWidth: '0px'
    }
], {
    duration: 400,
    easing: EaseOut.Cubic,
    fill: 'forwards'
});
// -----------------------------------------------------------------------
// Exports
// -----------------------------------------------------------------------
export { chatWave, digitBounceDown, digitBounceUp, entranceBounce, exitBounce, focusRingGrow, focusRingShrink, pressSqueeze, pressSqueezeVertical, shimmer, taffyPull, taffyPullShort, tileMaximize, tileRestore, toggleBounce };
//# sourceMappingURL=BubbleDrop.js.map