carfdevcss 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carfdevcss",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Tailwind CSS adapter for carfdev design system",
   "style": "./src/index.css",
   "exports": {

package/src/index.css

@@ -601,6 +601,47 @@
     border: 0 solid; /* 3 */
   }
 
+  ::selection {
+    background-color: var(--color-secondary);
+    color: var(--color-neutral);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  input:focus-visible,
+  button:focus-visible,
+  a:focus-visible {
+    outline-color: var(--color-accent);
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-base);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(
+      in oklab,
+      var(--color-neutral) 25%,
+      transparent
+    );
+    border-radius: 9999px;
+    border: 2px solid var(--color-base);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-primary);
+  }
+
   html,
   :host {
     line-height: 1.5; /* 1 */
@@ -610,6 +651,10 @@
     font-feature-settings: normal; /* 5 */
     font-variation-settings: normal; /* 6 */
     -webkit-tap-highlight-color: transparent; /* 7 */
+
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--color-neutral) 25%, transparent)
+      var(--color-base);
   }
 
   hr {
@@ -974,8 +1019,210 @@
      Predefined Animations
      ============================================ */
 
+  --animate-blurred-fade-in: blurred-fade-in 0.9s ease-in-out both;
+  --animate-fade-in: fade-in 0.6s ease-in both;
+  --animate-fade-out: fade-out 0.6s ease-out both;
+  --animate-slide-in-top: slide-in-top 0.6s ease-out both;
+  --animate-slide-in-bottom: slide-in-bottom 0.6s ease-out both;
+  --animate-slide-out-top: slide-out-top 0.6s ease-out both;
+  --animate-slide-out-bottom: slide-out-bottom 0.6s ease-out both;
+  --animate-zoom-in: zoom-in 0.6s ease-out both;
+  --animate-zoom-out: zoom-out 0.6s ease-out both;
+  --animate-rotate-90: rotate-90 1s ease-in-out both;
+  --animate-rotate-180: rotate-180 1s ease-in-out both;
+  --animate-rotate-360: rotate-360 1s linear both;
+  --animate-flip-horizontal: flip-horizontal 1s ease-in-out both;
+  --animate-flip-vertical: flip-vertical 1s ease-in-out both;
   --animate-bouncing: bouncing 1s ease-in-out both;
+  --animate-swing: swing 1s ease-in-out both;
+  --animate-wobble: wobble 1s ease-in-out both;
+  --animate-pulsing: pulsing 1s ease-in-out both;
+  --animate-shake: shake 0.5s ease-in-out both;
+  --animate-tada: tada 1s ease-in-out both;
+  --animate-jump: jump 1s ease-in-out both;
+  --animate-hang: hang 1s ease-in-out both;
+  --animate-roll-in: roll-in 1s ease-in-out both;
+  --animate-roll-out: roll-out 1s ease-in-out both;
+  --animate-float: float 1s ease-in-out both;
+  --animate-sink: sink 1s ease-in-out both;
+  --animate-flash: flash 1s ease-in-out both;
+  --animate-jiggle: jiggle 0.5s ease-in-out both;
+  --animate-rubber-band: rubber-band 1s ease-in-out both;
+  --animate-scale: scale 0.6s ease-out both;
+  --animate-slide-in-left: slide-in-left 0.6s ease-out both;
+  --animate-slide-in-right: slide-in-right 0.6s ease-out both;
+  --animate-slide-out-left: slide-out-left 0.6s ease-out both;
+  --animate-slide-out-right: slide-out-right 0.6s ease-out both;
+  --animate-spin-clockwise: spin-clockwise 0.6s linear both;
+  --animate-spin-counter-clockwise: spin-counter-clockwise 0.6s linear both;
+  --animate-flip-x: flip-x 0.6s ease-out both;
+  --animate-flip-y: flip-y 0.6s ease-out both;
+  --animate-blink: blink 0.5s both;
+  --animate-pop: pop 0.6s ease-out both;
+  --animate-expand-horizontally: expand-horizontally 0.6s ease-out both;
+  --animate-contract-horizontally: contract-horizontally 0.6s ease-out both;
+  --animate-expand-vertically: expand-vertically 0.6s ease-out both;
+  --animate-contract-vertically: contract-vertically 0.6s ease-out both;
   --animate-fade-in-up: fade-in-up 0.6s ease-in-out both;
+  --animate-fade-in-down: fade-in-down 0.6s ease-in-out both;
+  --animate-fade-in-left: fade-in-left 0.6s ease-in-out both;
+  --animate-fade-in-right: fade-in-right 0.6s ease-in-out both;
+  --animate-fade-out-up: fade-out-up 0.6s ease-out both;
+  --animate-fade-out-down: fade-out-down 0.6s ease-out both;
+  --animate-fade-out-left: fade-out-left 0.6s ease-out both;
+  --animate-fade-out-right: fade-out-right 0.6s ease-out both;
+  --animate-sway: sway 0.6s ease-out both;
+  --animate-flip-in-x: flip-in-x 0.6s ease-out both;
+  --animate-flip-in-y: flip-in-y 0.6s ease-out both;
+  --animate-flip-out-x: flip-out-x 0.6s ease-out both;
+  --animate-flip-out-y: flip-out-y 0.6s ease-out both;
+  --animate-rotate-in: rotate-in 0.6s ease-out both;
+  --animate-rotate-out: rotate-out 0.6s ease-out both;
+  --animate-slide-rotate-in: slide-rotate-in 0.6s ease-out both;
+  --animate-slide-rotate-out: slide-rotate-out 0.6s ease-out both;
+  --animate-heartbeat: heartbeat 0.6s ease-out both;
+  --animate-horizontal-vibration: horizontal-vibration 0.3s linear infinite both;
+  --animate-rotational-wave: rotational-wave 2s ease-in-out infinite both;
+  --animate-skew: skew 0.5s ease-in-out both;
+  --animate-skew-right: skew-right 0.5s ease-in-out both;
+  --animate-vertical-bounce: vertical-bounce 0.6s ease-in-out both;
+  --animate-horizontal-bounce: horizontal-bounce 0.6s ease-in-out both;
+  --animate-tilt: tilt 0.6s ease-in-out both;
+  --animate-squeeze: squeeze 0.6s ease-in-out both;
+  --animate-slide-up-fade: slide-up-fade 0.6s ease-out both;
+  --animate-bounce-fade-in: bounce-fade-in 0.6s ease-out both;
+  --animate-swing-drop-in: swing-drop-in 0.6s ease-out both;
+  --animate-pulse-fade-in: pulse-fade-in 0.6s ease-out both;
+  --animate-impulse-rotation-right: impulse-rotation-right 1s ease-in-out both;
+  --animate-impulse-rotation-left: impulse-rotation-left 1s ease-in-out both;
+  --animate-dancing: dancing 1s ease-in-out both;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-jelly: jelly 1s ease-out forwards;
+
+  /* ============================================
+     Keyframes
+     ============================================ */
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in-top {
+    0% {
+      transform: translateY(-20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-bottom {
+    0% {
+      transform: translateY(20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-top {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-20px);
+    }
+  }
+
+  @keyframes slide-out-bottom {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(20px);
+    }
+  }
+
+  @keyframes zoom-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes zoom-out {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+  }
+
+  @keyframes rotate-90 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(90deg);
+    }
+  }
+
+  @keyframes rotate-180 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(180deg);
+    }
+  }
+
+  @keyframes rotate-360 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes flip-horizontal {
+    0% {
+      transform: rotateY(0deg);
+    }
+    100% {
+      transform: rotateY(180deg);
+    }
+  }
+
+  @keyframes flip-vertical {
+    0% {
+      transform: rotateX(0deg);
+    }
+    100% {
+      transform: rotateX(180deg);
+    }
+  }
 
   @keyframes bouncing {
     0% {
@@ -989,16 +1236,805 @@
     }
   }
 
-  @keyframes fade-in-up {
+  @keyframes swing {
     0% {
-      opacity: 0;
-      transform: translateY(20px);
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(15deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes wobble {
+    0% {
+      transform: translateX(0);
+    }
+    15% {
+      transform: translateX(-20px);
+    }
+    30% {
+      transform: translateX(20%);
+    }
+    45% {
+      transform: translateX(-15%);
+    }
+    60% {
+      transform: translateX(20px);
+    }
+    75% {
+      transform: translateX(-5%);
+    }
+    100% {
+      transform: translateX(0);
     }
+  }
+
+  @keyframes pulse {
+    0%,
     100% {
       opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes pulsing {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-10px);
+    }
+    50% {
+      transform: translateX(10px);
+    }
+    75% {
+      transform: translateX(-10px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes tada {
+    0% {
+      transform: scale(1);
+    }
+    10% {
+      transform: scale(0.9) rotate(-3deg);
+    }
+    20% {
+      transform: scale(0.9) rotate(-3deg);
+    }
+    30% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    40% {
+      transform: scale(1.1) rotate(-3deg);
+    }
+    50% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    60% {
+      transform: scale(1.1) rotate(-3deg);
+    }
+    70% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    80% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    90% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    100% {
+      transform: scale(1) rotate(0);
+    }
+  }
+
+  @keyframes jump {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes hang {
+    0% {
+      transform: translateY(-20px);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-20px);
+    }
+  }
+
+  @keyframes roll-in {
+    0% {
+      transform: translateX(-20px) rotate(-120deg);
+    }
+    100% {
+      transform: translateX(0) rotate(0);
+    }
+  }
+
+  @keyframes roll-out {
+    0% {
+      transform: translateX(0) rotate(0);
+    }
+    100% {
+      transform: translateX(20px) rotate(120deg);
+    }
+  }
+
+  @keyframes float {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+    100% {
       transform: translateY(0);
     }
   }
+
+  @keyframes sink {
+    0% {
+      transform: translateY(-10px);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes flash {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes jiggle {
+    0% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+    100% {
+      transform: rotate(-3deg);
+    }
+  }
+
+  @keyframes rubber-band {
+    0% {
+      transform: scale(1);
+    }
+    30% {
+      transform: scale(1.25);
+    }
+    40% {
+      transform: scale(0.75);
+    }
+    50% {
+      transform: scale(1.15);
+    }
+    65% {
+      transform: scale(0.95);
+    }
+    75% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(1.1);
+    }
+  }
+
+  @keyframes slide-in-left {
+    0% {
+      transform: translateX(-20px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-in-right {
+    0% {
+      transform: translateX(20px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-left {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-20px);
+    }
+  }
+
+  @keyframes slide-out-right {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(20px);
+    }
+  }
+
+  @keyframes spin-clockwise {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin-counter-clockwise {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+
+  @keyframes flip-x {
+    0% {
+      transform: scaleX(1);
+    }
+    50% {
+      transform: scaleX(-1);
+    }
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes flip-y {
+    0% {
+      transform: scaleY(1);
+    }
+    50% {
+      transform: scaleY(-1);
+    }
+    100% {
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes pop {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes expand-horizontally {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes contract-horizontally {
+    0% {
+      transform: scaleX(1);
+    }
+    100% {
+      transform: scaleX(0);
+    }
+  }
+
+  @keyframes expand-vertically {
+    0% {
+      transform: scaleY(0);
+    }
+    100% {
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes contract-vertically {
+    0% {
+      transform: scaleY(1);
+    }
+    100% {
+      transform: scaleY(0);
+    }
+  }
+
+  @keyframes fade-in-up {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-down {
+    0% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-left {
+    0% {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fade-in-right {
+    0% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fade-out-up {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+  }
+
+  @keyframes fade-out-down {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+  }
+
+  @keyframes fade-out-left {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+  }
+
+  @keyframes fade-out-right {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+  }
+
+  @keyframes sway {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(15deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes flip-in-x {
+    0% {
+      opacity: 0;
+      transform: rotateY(90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: rotateY(0deg);
+    }
+  }
+
+  @keyframes flip-in-y {
+    0% {
+      opacity: 0;
+      transform: rotateX(90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: rotateX(0deg);
+    }
+  }
+
+  @keyframes flip-out-x {
+    0% {
+      opacity: 1;
+      transform: rotateY(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: rotateY(90deg);
+    }
+  }
+
+  @keyframes flip-out-y {
+    0% {
+      opacity: 1;
+      transform: rotateX(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: rotateX(90deg);
+    }
+  }
+
+  @keyframes rotate-in {
+    0% {
+      opacity: 0;
+      transform: rotate(-90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes rotate-out {
+    0% {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(90deg);
+    }
+  }
+
+  @keyframes slide-rotate-in {
+    0% {
+      opacity: 0;
+      transform: translateX(-20px) rotate(-90deg);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0) rotate(0deg);
+    }
+  }
+
+  @keyframes slide-rotate-out {
+    0% {
+      opacity: 1;
+      transform: translateX(0) rotate(0deg);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(20px) rotate(90deg);
+    }
+  }
+
+  @keyframes heartbeat {
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(1.1);
+    }
+    50% {
+      transform: scale(1);
+    }
+    75% {
+      transform: scale(0.9);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes blurred-fade-in {
+    0% {
+      filter: blur(5px);
+      opacity: 0;
+    }
+    100% {
+      filter: blur(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes horizontal-vibration {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(5px);
+    }
+    50% {
+      transform: translateX(-5px);
+    }
+    75% {
+      transform: translateX(5px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes rotational-wave {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(-10deg);
+    }
+    75% {
+      transform: rotate(10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes skew {
+    0% {
+      transform: skew(0deg);
+    }
+    100% {
+      transform: skew(20deg);
+    }
+  }
+
+  @keyframes skew-right {
+    0% {
+      transform: skew(0deg);
+    }
+    100% {
+      transform: skew(-20deg);
+    }
+  }
+
+  @keyframes vertical-bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+
+  @keyframes horizontal-bounce {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    50% {
+      transform: translateX(20px);
+    }
+  }
+
+  @keyframes tilt {
+    0% {
+      transform: rotateY(0deg);
+    }
+    50% {
+      transform: rotateY(20deg);
+    }
+    100% {
+      transform: rotateY(0deg);
+    }
+  }
+
+  @keyframes squeeze {
+    0%,
+    100% {
+      transform: scale(1, 1);
+    }
+    50% {
+      transform: scale(1.1, 0.9);
+    }
+  }
+
+  @keyframes slide-up-fade {
+    0% {
+      opacity: 0;
+      transform: translateY(50px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes bounce-fade-in {
+    0% {
+      transform: scale(0.5);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes swing-drop-in {
+    0% {
+      transform: rotate(-30deg) translateY(-50px);
+      opacity: 0;
+    }
+    100% {
+      transform: rotate(0deg) translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes pulse-fade-in {
+    0% {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes impulse-rotation-right {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(-40deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes impulse-rotation-left {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(40deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+
+  @keyframes dancing {
+    0% {
+      transform: skew(0deg);
+    }
+    25% {
+      transform: skew(-40deg);
+    }
+    50% {
+      transform: skew(40deg);
+    }
+    75% {
+      transform: skew(-40deg);
+    }
+    100% {
+      transform: skew(0deg);
+    }
+  }
+
+  @keyframes jelly {
+    0% {
+      transform: scale(1, 1);
+    }
+    20% {
+      transform: scale(1.25, 0.75);
+    }
+    40% {
+      transform: scale(0.75, 1.25);
+    }
+    60% {
+      transform: scale(1.15, 0.85);
+    }
+    75% {
+      transform: scale(0.95, 1.05);
+    }
+    85% {
+      transform: scale(1.05, 0.95);
+    }
+    92% {
+      transform: scale(1, 1.02);
+    }
+    100% {
+      transform: scale(1, 1);
+    }
+  }
 }
 
 /* ============================================
@@ -1024,7 +2060,7 @@
    ============================================ */
 
 @utility animate-iteration-count-* {
-  animation-iteration-count: --value(--tw-anim-iteration-count-*, number, [number], [*]);
+  animation-iteration-count: --value(--tw-anim-iteration-count-*, [number]);
 }
 
 /* ============================================