css-zero 1.1.12 → 1.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d241d4cf05ae86f025781e668e84bc615831440027ebb7d3cd649428054dfd05
-  data.tar.gz: 99809da55b172d4a350f9e834666b9523f105104f78ab7c41ec6309f24d4ad83
+  metadata.gz: 26678344cabfa8f02f3951ecdee51e92f6cc11cdf0ff95c4b14834b388438b4f
+  data.tar.gz: 26808cdcd174c55b3aae23cae75e330a2afd61d1620d9cd60bbff722135fc6fd
 SHA512:
-  metadata.gz: 8598586278d3868d943d972fa8162958d82e836f14b2eac34b65b1971c07ce786bade524e64ebe98c0ad4d4dcb933cc672ef29c4d7d31cf2bf741273f346b5a8
-  data.tar.gz: 60acd5697d488f8c5a4f75c591086c8d9b487634e26342f91b924abac97937305bab305ada2ca0dc41070ceb9f5b1d579c098fc8420b8b0bb29c162cf70ecaaf
+  metadata.gz: c7ee248da8e79a73c36f882ebe659d05df0cf8ba94381bb8f6c11a5e41bd7f3c7a3f5b71385725f4f25e004154edf0c87bbf5ab1cd79e12f04df68b751202226
+  data.tar.gz: 288d8b3ffe6e3d747680899153aa8a1fd7885096999f974b3cd870ff3129d15d8471032483359f4fe2fa86bd0cb93ad3a21f433a03533c8d9177ae5dee48b782

data/app/assets/stylesheets/css-zero/animations.css

@@ -5,29 +5,29 @@
 *****************************************************************/
 
 :root {
-  --animate-fade-in: fade-in .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-fade-in-bloom: fade-in-bloom 2s cubic-bezier(.25, 0, .3, 1);
-  --animate-fade-out: fade-out .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-fade-out-bloom: fade-out-bloom 2s cubic-bezier(.25, 0, .3, 1);
-  --animate-scale-up: scale-up .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-scale-down: scale-down .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-out-up: slide-out-up .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-out-down: slide-out-down .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-out-right: slide-out-right .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-out-left: slide-out-left .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-in-up: slide-in-up .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-in-down: slide-in-down .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-in-right: slide-in-right .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-slide-in-left: slide-in-left .5s cubic-bezier(.25, 0, .3, 1);
-  --animate-shake-x: shake-x .75s cubic-bezier(0, 0, 0, 1);
-  --animate-shake-y: shake-y .75s cubic-bezier(0, 0, 0, 1);
-  --animate-shake-z: shake-z 1s cubic-bezier(0, 0, 0, 1);
+  --animate-fade-in: fade-in .5s var(--ease-3);
+  --animate-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
+  --animate-fade-out: fade-out .5s var(--ease-3);
+  --animate-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
+  --animate-scale-up: scale-up .5s var(--ease-3);
+  --animate-scale-down: scale-down .5s var(--ease-3);
+  --animate-slide-out-up: slide-out-up .5s var(--ease-3);
+  --animate-slide-out-down: slide-out-down .5s var(--ease-3);
+  --animate-slide-out-right: slide-out-right .5s var(--ease-3);
+  --animate-slide-out-left: slide-out-left .5s var(--ease-3);
+  --animate-slide-in-up: slide-in-up .5s var(--ease-3);
+  --animate-slide-in-down: slide-in-down .5s var(--ease-3);
+  --animate-slide-in-right: slide-in-right .5s var(--ease-3);
+  --animate-slide-in-left: slide-in-left .5s var(--ease-3);
+  --animate-shake-x: shake-x .75s var(--ease-out-5);
+  --animate-shake-y: shake-y .75s var(--ease-out-5);
+  --animate-shake-z: shake-z 1s var(--ease-in-out-3);
   --animate-spin: spin 2s linear infinite;
-  --animate-ping: ping 5s cubic-bezier(0, 0, .3, 1) infinite;
-  --animate-blink: blink 1s cubic-bezier(0, 0, .3, 1) infinite;
-  --animate-float: float 3s cubic-bezier(0, 0, 0, 1) infinite;
-  --animate-bounce: bounce 2s cubic-bezier(.5, -.3, .1, 1.5) infinite;
-  --animate-pulse: pulse 2s cubic-bezier(0, 0, .3, 1) infinite;
+  --animate-ping: ping 5s var(--ease-out-3) infinite;
+  --animate-blink: blink 1s var(--ease-out-3) infinite;
+  --animate-float: float 3s var(--ease-in-out-3) infinite;
+  --animate-bounce: bounce 2s var(--ease-squish-2) infinite;
+  --animate-pulse: pulse 2s var(--ease-out-3) infinite;
 }
 
 @keyframes fade-in {
@@ -161,4 +161,4 @@
      10% { opacity: 1; filter: brightness(0.5) blur(10px) }
       0% { opacity: 1; filter: brightness(1) blur(0) }
   }
-}
+}

data/app/assets/stylesheets/css-zero/transitions.css

@@ -21,4 +21,55 @@
   --time-500:  500ms;
   --time-700:  700ms;
   --time-1000: 1000ms;
+
+  /****************************************************************
+  * Transition Timing Function
+  * Variables for controlling the easing of CSS transitions.
+  * transition-timing-function: var(--ease-3);
+  *****************************************************************/
+  --ease-1: cubic-bezier(.25, 0, .5, 1);
+  --ease-2: cubic-bezier(.25, 0, .4, 1);
+  --ease-3: cubic-bezier(.25, 0, .3, 1);
+  --ease-4: cubic-bezier(.25, 0, .2, 1);
+  --ease-5: cubic-bezier(.25, 0, .1, 1);
+  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
+  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
+  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
+  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
+  --ease-in-5: cubic-bezier(1, 0, 1, 1);
+  --ease-out-1: cubic-bezier(0, 0, .75, 1);
+  --ease-out-2: cubic-bezier(0, 0, .50, 1);
+  --ease-out-3: cubic-bezier(0, 0, .3, 1);
+  --ease-out-4: cubic-bezier(0, 0, .1, 1);
+  --ease-out-5: cubic-bezier(0, 0, 0, 1);
+  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
+  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
+  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
+  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
+  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
+  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
+  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
+  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
+  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
+  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
+  --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
+  --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
+  --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
+  --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
+  --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
+  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
+  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
+  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
+  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
+  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
+  --ease-spring-1: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
+  --ease-spring-2: linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1);
+  --ease-spring-3: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
+  --ease-spring-4: linear(0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973, 0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%, 0.998 78.9%, 1);
+  --ease-spring-5: linear(0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%, 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1);
+  --ease-bounce-1: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%, 0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879, 0.885, 0.895, 0.908 89.7%, 0.946, 1);
+  --ease-bounce-2: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765, 1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788, 0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954, 0.973, 1);
+  --ease-bounce-3: linear(0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764, 1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672, 0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879, 0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957, 0.96, 0.968, 0.981, 1);
+  --ease-bounce-4: linear(0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81, 0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%, 0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%, 0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1);
+  --ease-bounce-5: linear(0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627, 0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892, 0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%, 0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943, 0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1);
 }

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "1.1.12"
+  VERSION = "1.1.13"
 end

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css

@@ -2,10 +2,10 @@
   details {
     border-block-end-width: var(--border);
     font-size: var(--text-sm);
-    overflow: hidden;
 
     &::details-content {
       block-size: 0;
+      overflow: hidden;
       transition-behavior: allow-discrete;
       transition-duration: var(--time-200);
       transition-property: content-visibility block-size;

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/autoanimate.css

@@ -2,14 +2,21 @@
   view-transition-class: auto-animation;
 }
 
+::view-transition-new(.auto-animation):only-child {
+  animation: add-animation 375ms ease-in;
+}
+
 ::view-transition-old(.auto-animation):only-child {
-  animation: var(--animate-fade-out);
-  animation-duration: 250ms;
-  opacity: 1;
+  animation: remove-animation 250ms ease-out;
 }
 
-::view-transition-new(.auto-animation):only-child {
-  animation: var(--animate-fade-in);
-  animation-duration: 250ms;
-  opacity: 0;
+@keyframes add-animation {
+  0%   { opacity: 0; transform: scale(.98); }
+  50%  { opacity: 0; transform: scale(.98); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes remove-animation {
+  0%   { opacity: 1; transform: scale(1); }
+  100% { opacity: 0; transform: scale(.98); }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/combobox.css

@@ -26,19 +26,21 @@
   font-size: var(--text-sm);
   line-height: inherit;
 
-  /* Final state of exit animation and setup */
-  opacity: 0;
-  transform: var(--scale-95);
+  /* Setup transition */
   transition-behavior: allow-discrete;
   transition-duration: var(--time-150);
   transition-property: display, opacity, transform;
 
-  /* Final state of entry animation */
+  /* Exit stage to */
+  opacity: 0;
+  transform: var(--scale-95);
+
+  /* On stage */
   .dropdown-active & {
     opacity: 1; transform: var(--scale-100);
   }
 
-  /* Initial state of entry animation */
+  /* Enter stage from */
   @starting-style {
     .dropdown-active & {
       opacity: 0; transform: var(--scale-95);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/datepicker.css

@@ -1,25 +1,37 @@
 @import url("https://esm.sh/flatpickr@4.6.13/dist/flatpickr.min.css");
 
 .flatpickr-calendar {
+  --calendar-size: 250px;
+  --container-size: 220px;
+  --day-size: var(--size-8);
+
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
   font-size: var(--text-sm);
-  inline-size: 285px;
-  padding: var(--size-3);
+  inline-size: var(--calendar-size);
 
-  :is(.dayContainer, .flatpickr-days) {
-    inline-size: 100%;
-    min-inline-size: 100%;
-    max-inline-size: 100%;
+  .flatpickr-innerContainer {
+    justify-content: center;
+    padding-block-end: var(--size-3);
   }
 
-  .flatpickr-months {
-    > * {
-      position: static;
-    }
+  .flatpickr-days {
+    inline-size: var(--container-size);
+  }
 
+  .dayContainer {
+    inline-size: var(--container-size);
+    min-inline-size: var(--container-size);
+    max-inline-size: var(--container-size);
+  }
+
+  .dayContainer + .dayContainer {
+    box-shadow: -1px 0 0 var(--color-border);
+  }
+
+  .flatpickr-months {
     .flatpickr-month {
       color: var(--color-text);
     }
@@ -118,14 +130,13 @@
   }
 
   .flatpickr-day {
-    --day-size: var(--size-9);
     border-radius: var(--rounded-md);
     border-color: transparent !important;
     box-shadow: none !important;
     color: var(--color-text);
     height: var(--day-size);
     line-height: var(--day-size);
-    margin-block-start: 1px;
+    margin-block-start: var(--size-2);
     max-width: var(--day-size);
 
     &:is(.inRange) {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css

@@ -12,25 +12,26 @@
     background-color: rgba(0, 0, 0, .8);
   }
 
-  /* Final state of exit animation and setup */
-  opacity: 0;
-  transform: var(--scale-95);
+  /* Setup transition */
   transition-behavior: allow-discrete;
   transition-duration: var(--time-200);
   transition-property: display, overlay, opacity, transform;
 
   &::backdrop {
-    opacity: 0;
     transition-behavior: allow-discrete;
-    transition-duration: var(--time-200);
+    transition-duration: var(--time-150);
     transition-property: display, overlay, opacity;
   }
 
-  /* Final state of entry animation */
+  /* Exit stage to */
+  & { opacity: 0; transform: var(--scale-95); }
+  &::backdrop { opacity: 0; }
+
+  /* On stage */
   &[open] { opacity: 1; transform: var(--scale-100); }
   &[open]::backdrop { opacity: 1; }
 
-  /* Initial state of entry animation */
+  /* Enter stage from */
   @starting-style {
     &[open] { opacity: 0; transform: var(--scale-95); }
     &[open]::backdrop { opacity: 0; }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css

@@ -40,6 +40,7 @@
   display: flex;
   grid-area: header;
   padding-inline: var(--size-4);
+  view-transition-name: header;
 }
 
 #sidebar {
@@ -51,6 +52,7 @@
   overflow-x: hidden;
   padding: var(--sidebar-padding, 0);
   row-gap: var(--size-2);
+  view-transition-name: sidebar;
 }
 
 #main {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css

@@ -6,19 +6,21 @@
   color: var(--color-text);
   inline-size: var(--popover-size, max-content);
 
-  /* Final state of exit animation and setup */
-  opacity: 0;
-  transform: var(--scale-95);
+  /* Setup transition */
   transition-behavior: allow-discrete;
   transition-duration: var(--time-150);
   transition-property: display, overlay, opacity, transform;
 
-  /* Final state of entry animation */
+  /* Exit stage to */
+  opacity: 0;
+  transform: var(--scale-95);
+
+  /* On stage */
   &:popover-open {
     opacity: 1; transform: var(--scale-100);
   }
 
-  /* Initial state of entry animation */
+  /* Enter stage from */
   @starting-style {
     &:popover-open {
       opacity: 0; transform: var(--scale-95);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css

@@ -12,24 +12,26 @@
     background-color: rgba(0, 0, 0, .8);
   }
 
-  /* Final state of exit animation and setup */
-  transform: var(--sheet-transform);
+  /* Setup Transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-500);
+  transition-duration: var(--time-300);
   transition-property: display, overlay, transform;
 
   &::backdrop {
-    opacity: 0;
     transition-behavior: allow-discrete;
     transition-duration: var(--time-150);
     transition-property: display, overlay, opacity;
   }
 
-  /* Final state of entry animation */
+  /* Exit stage to */
+  & { transform: var(--sheet-transform); }
+  &::backdrop { opacity: 0; }
+
+  /* On stage */
   &[open] { transform: translateX(0); }
   &[open]::backdrop { opacity: 1; }
 
-  /* Initial state of entry animation */
+  /* Enter stage from */
   @starting-style {
     &[open] { transform: var(--sheet-transform); }
     &[open]::backdrop { opacity: 0;}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/datepicker_controller.js

@@ -6,6 +6,7 @@ export default class extends Controller {
   static values  = {
     type: String, disable: Array,
     mode: { type: String, default: "single" },
+    showMonths: { type: Number, default: 1 },
     dateFormat: { type: String, default: "F d, Y" },
     dateTimeFormat: { type: String, default: "F d, Y H:i" }
   }
@@ -37,6 +38,6 @@ export default class extends Controller {
   }
 
   get #baseOptions() {
-    return { altInput: true, disable: this.disableValue, mode: this.modeValue }
+    return { altInput: true, disable: this.disableValue, mode: this.modeValue, showMonths: this.showMonthsValue }
   }
 }

metadata

@@ -1,16 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 1.1.12
+  version: 1.1.13
 platform: ruby
 authors:
 - Lázaro Nixon
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-12 00:00:00.000000000 Z
+date: 2025-03-16 00:00:00.000000000 Z
 dependencies: []
-description:
 email: lazaronixon@hotmail.com
 executables: []
 extensions: []
@@ -148,7 +146,6 @@ licenses:
 metadata:
   homepage_uri: https://github.com/lazaronixon/css-zero
   source_code_uri: https://github.com/lazaronixon/css-zero
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -163,8 +160,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.10
-signing_key:
+rubygems_version: 3.6.2
 specification_version: 4
 summary: An opinionated CSS starter kit for your application.
 test_files: []