css-zero 3.0.1 → 4.0.0

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Nixon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

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

@@ -3,91 +3,91 @@
 *****************************************************************/
 
 :root {
-  --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 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 {
+  --animate-fade-in: x-fade-in .5s var(--ease-3);
+  --animate-fade-in-bloom: x-fade-in-bloom 2s var(--ease-3);
+  --animate-fade-out: x-fade-out .5s var(--ease-3);
+  --animate-fade-out-bloom: x-fade-out-bloom 2s var(--ease-3);
+  --animate-scale-up: x-scale-up .5s var(--ease-3);
+  --animate-scale-down: x-scale-down .5s var(--ease-3);
+  --animate-slide-out-up: x-slide-out-up .5s var(--ease-3);
+  --animate-slide-out-down: x-slide-out-down .5s var(--ease-3);
+  --animate-slide-out-right: x-slide-out-right .5s var(--ease-3);
+  --animate-slide-out-left: x-slide-out-left .5s var(--ease-3);
+  --animate-slide-in-up: x-slide-in-up .5s var(--ease-3);
+  --animate-slide-in-down: x-slide-in-down .5s var(--ease-3);
+  --animate-slide-in-right: x-slide-in-right .5s var(--ease-3);
+  --animate-slide-in-left: x-slide-in-left .5s var(--ease-3);
+  --animate-shake-x: x-shake-x .75s var(--ease-out-5);
+  --animate-shake-y: x-shake-y .75s var(--ease-out-5);
+  --animate-shake-z: x-shake-z 1s var(--ease-in-out-3);
+  --animate-spin: x-spin 2s linear infinite;
+  --animate-ping: x-ping 5s var(--ease-out-3) infinite;
+  --animate-blink: x-blink 1s var(--ease-out-3) infinite;
+  --animate-float: x-float 3s var(--ease-in-out-3) infinite;
+  --animate-bounce: x-bounce 2s var(--ease-squish-2) infinite;
+  --animate-pulse: x-pulse 2s var(--ease-out-3) infinite;
+}
+
+@keyframes x-fade-in {
   to { opacity: 1 }
 }
 
-@keyframes fade-in-bloom {
+@keyframes x-fade-in-bloom {
     0% { opacity: 0; filter: brightness(1) blur(20px) }
    10% { opacity: 1; filter: brightness(2) blur(10px) }
   100% { opacity: 1; filter: brightness(1) blur(0) }
 }
 
-@keyframes fade-out {
+@keyframes x-fade-out {
   to { opacity: 0 }
 }
 
-@keyframes fade-out-bloom {
+@keyframes x-fade-out-bloom {
   100% { opacity: 0; filter: brightness(1) blur(20px) }
    10% { opacity: 1; filter: brightness(2) blur(10px) }
     0% { opacity: 1; filter: brightness(1) blur(0) }
 }
-@keyframes scale-up {
+@keyframes x-scale-up {
   to { transform: scale(1.25) }
 }
 
-@keyframes scale-down {
+@keyframes x-scale-down {
   to { transform: scale(.75) }
 }
 
-@keyframes slide-out-up {
+@keyframes x-slide-out-up {
   to { transform: translateY(-100%) }
 }
 
-@keyframes slide-out-down {
+@keyframes x-slide-out-down {
   to { transform: translateY(100%) }
 }
 
-@keyframes slide-out-right {
+@keyframes x-slide-out-right {
   to { transform: translateX(100%) }
 }
 
-@keyframes slide-out-left {
+@keyframes x-slide-out-left {
   to { transform: translateX(-100%) }
 }
 
-@keyframes slide-in-up {
+@keyframes x-slide-in-up {
   from { transform: translateY(100%) }
 }
 
-@keyframes slide-in-down {
+@keyframes x-slide-in-down {
   from { transform: translateY(-100%) }
 }
 
-@keyframes slide-in-right {
+@keyframes x-slide-in-right {
   from { transform: translateX(-100%) }
 }
 
-@keyframes slide-in-left {
+@keyframes x-slide-in-left {
   from { transform: translateX(100%) }
 }
 
-@keyframes shake-x {
+@keyframes x-shake-x {
   0%, 100% { transform: translateX(0%) }
   20% { transform: translateX(-5%) }
   40% { transform: translateX(5%) }
@@ -95,7 +95,7 @@
   80% { transform: translateX(5%) }
 }
 
-@keyframes shake-y {
+@keyframes x-shake-y {
   0%, 100% { transform: translateY(0%) }
   20% { transform: translateY(-5%) }
   40% { transform: translateY(5%) }
@@ -103,7 +103,7 @@
   80% { transform: translateY(5%) }
 }
 
-@keyframes shake-z {
+@keyframes x-shake-z {
   0%, 100% { transform: rotate(0deg) }
   20% { transform: rotate(-2deg) }
   40% { transform: rotate(2deg) }
@@ -111,18 +111,18 @@
   80% { transform: rotate(2deg) }
 }
 
-@keyframes spin {
+@keyframes x-spin {
   to { transform: rotate(1turn) }
 }
 
-@keyframes ping {
+@keyframes x-ping {
   90%, 100% {
     transform: scale(2);
     opacity: 0;
   }
 }
 
-@keyframes blink {
+@keyframes x-blink {
   0%, 100% {
     opacity: 1
   }
@@ -131,22 +131,22 @@
   }
 }
 
-@keyframes float {
+@keyframes x-float {
   50% { transform: translateY(-25%) }
 }
 
-@keyframes bounce {
+@keyframes x-bounce {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }
 
-@keyframes pulse {
+@keyframes x-pulse {
   50% { transform: scale(.9,.9) }
 }
 
 @media (prefers-color-scheme: dark) {
-  @keyframes fade-in-bloom {
+  @keyframes x-fade-in-bloom {
       0% { opacity: 0; filter: brightness(1) blur(20px) }
      10% { opacity: 1; filter: brightness(0.5) blur(10px) }
     100% { opacity: 1; filter: brightness(1) blur(0) }
@@ -154,7 +154,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  @keyframes fade-out-bloom {
+  @keyframes x-fade-out-bloom {
     100% { opacity: 0; filter: brightness(1) blur(20px) }
      10% { opacity: 1; filter: brightness(0.5) blur(10px) }
       0% { opacity: 1; filter: brightness(1) blur(0) }

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

@@ -1,14 +1,21 @@
 :root {
+  /****************************************************************
+  * Private Variables
+  ****************************************************************/
+  --color-shadow-light: light-dark(rgb(0 0 0 / 0.05), transparent);
+  --color-shadow: light-dark(rgb(0 0 0 / 0.1), transparent);
+  --color-shadow-dark: light-dark(rgb(0 0 0 / 0.25), transparent);
+
   /****************************************************************
   * box-shadow: var(--shadow-sm);
   ****************************************************************/
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 var(--color-shadow-light);
+  --shadow-sm: 0 1px 3px 0 var(--color-shadow), 0 1px 2px -1px var(--color-shadow);
+  --shadow-md: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow);
+  --shadow-lg: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
+  --shadow-xl: 0 20px 25px -5px var(--color-shadow), 0 8px 10px -6px var(--color-shadow);
+  --shadow-2xl: 0 25px 50px -12px var(--color-shadow-dark);
+  --shadow-inner: inset 0 2px 4px 0 var(--color-shadow-light);
 
   /****************************************************************
   * opacity: var(--opacity-25);

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

@@ -1,4 +1,16 @@
 :root {
+  /****************************************************************
+  * Private Variables
+  ****************************************************************/
+  --color-drop-shadow-3:  light-dark(rgb(0 0 0 / 0.03), transparent);
+  --color-drop-shadow-4:  light-dark(rgb(0 0 0 / 0.04), transparent);
+  --color-drop-shadow-5:  light-dark(rgb(0 0 0 / 0.05), transparent);
+  --color-drop-shadow-6:  light-dark(rgb(0 0 0 / 0.06), transparent);
+  --color-drop-shadow-7:  light-dark(rgb(0 0 0 / 0.07), transparent);
+  --color-drop-shadow-8:  light-dark(rgb(0 0 0 / 0.08), transparent);
+  --color-drop-shadow-10: light-dark(rgb(0 0 0 / 0.1), transparent);
+  --color-drop-shadow-15: light-dark(rgb(0 0 0 / 0.15), transparent);
+
   /****************************************************************
   * filter|backdrop-filter: var(--blur-sm);
   *****************************************************************/
@@ -38,29 +50,23 @@
   --contrast-200: contrast(2);
 
   /****************************************************************
-  * Drop Shadow
-  * Variables for applying drop-shadow filters to an element.
   * filter: var(--drop-shadow);
   *****************************************************************/
   --drop-shadow-none: drop-shadow(0 0 #0000);
-  --drop-shadow-sm:   drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
-  --drop-shadow:      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
-  --drop-shadow-md:   drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
-  --drop-shadow-lg:   drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
-  --drop-shadow-xl:   drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
-  --drop-shadow-2xl:  drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  --drop-shadow-sm:   drop-shadow(0 1px 1px var(--color-drop-shadow-5));
+  --drop-shadow:      drop-shadow(0 1px 2px var(--color-drop-shadow-10)) drop-shadow(0 1px 1px var(--color-drop-shadow-6));
+  --drop-shadow-md:   drop-shadow(0 4px 3px var(--color-drop-shadow-7)) drop-shadow(0 2px 2px var(--color-drop-shadow-6));
+  --drop-shadow-lg:   drop-shadow(0 10px 8px var(--color-drop-shadow-4)) drop-shadow(0 4px 3px var(--color-drop-shadow-10));
+  --drop-shadow-xl:   drop-shadow(0 20px 13px var(--color-drop-shadow-3)) drop-shadow(0 8px 5px var(--color-drop-shadow-8));
+  --drop-shadow-2xl:  drop-shadow(0 25px 25px var(--color-drop-shadow-15));
 
   /****************************************************************
-  * Grayscale
-  * Variables for applying grayscale filters to an element.
   * filter|backdrop-filter: var(--grayscale);
   *****************************************************************/
   --grayscale-0: grayscale(0);
   --grayscale:   grayscale(100%);
 
   /****************************************************************
-  * Hue Rotate
-  * Variables for applying hue-rotate filters to an element.
   * filter|backdrop-filter: var(--hue-rotate-15);
   *****************************************************************/
   --hue-rotate-0:   hue-rotate(0deg);
@@ -71,16 +77,12 @@
   --hue-rotate-180: hue-rotate(180deg);
 
   /****************************************************************
-  * Invert
-  * Variables for applying invert filters to an element.
   * filter|backdrop-filter: var(--invert);
   *****************************************************************/
   --invert-0: invert(0);
   --invert:   invert(100%);
 
   /****************************************************************
-  * Saturate
-  * Variables for applying saturation filters to an element.
   * filter|backdrop-filter: var(--saturate-50);
   *****************************************************************/
   --saturate-0:   saturate(0);
@@ -90,37 +92,27 @@
   --saturate-200: saturate(2);
 
   /****************************************************************
-  * Sepia
-  * Variables for applying sepia filters to an element.
   * filter|backdrop-filter: var(--sepia);
   *****************************************************************/
   --sepia-0: sepia(0);
   --sepia:   sepia(100%);
 
   /****************************************************************
-  * Opacity
-  * Utilities for applying backdrop opacity filters to an element.
-  * backdrop-filter: var(--alpha-45);
+  * backdrop-filter: var(--alpha-50);
   *****************************************************************/
-  --alpha-0:	 opacity(0);
-  --alpha-5:	 opacity(0.05);
-  --alpha-10:	 opacity(0.1);
-  --alpha-15:	 opacity(0.15);
-  --alpha-20:	 opacity(0.2);
-  --alpha-25:	 opacity(0.25);
-  --alpha-30:	 opacity(0.3);
-  --alpha-35:	 opacity(0.35);
-  --alpha-40:	 opacity(0.4);
-  --alpha-45:	 opacity(0.45);
-  --alpha-50:	 opacity(0.5);
-  --alpha-55:	 opacity(0.55);
-  --alpha-60:	 opacity(0.6);
-  --alpha-65:	 opacity(0.65);
-  --alpha-70:	 opacity(0.7);
-  --alpha-75:	 opacity(0.75);
-  --alpha-80:	 opacity(0.8);
-  --alpha-85:	 opacity(0.85);
-  --alpha-90:	 opacity(0.9);
-  --alpha-95:	 opacity(0.95);
+  --alpha-0:   opacity(0);
+  --alpha-5:   opacity(0.05);
+  --alpha-10:  opacity(0.1);
+  --alpha-20:  opacity(0.2);
+  --alpha-25:  opacity(0.25);
+  --alpha-30:  opacity(0.3);
+  --alpha-40:  opacity(0.4);
+  --alpha-50:  opacity(0.5);
+  --alpha-60:  opacity(0.6);
+  --alpha-70:  opacity(0.7);
+  --alpha-75:  opacity(0.75);
+  --alpha-80:  opacity(0.8);
+  --alpha-90:  opacity(0.9);
+  --alpha-95:  opacity(0.95);
   --alpha-100: opacity(1);
 }

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

@@ -30,20 +30,12 @@ html,
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   tab-size: 4; /* 3 */
-  font-family: var(--default-font-family, system-ui, sans-serif); /* 4 */
+  font-family: var(--default-font-family, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); /* 4 */
   font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
-/*
-  Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  line-height: inherit;
-}
-
 /*
   1. Add the correct height in Firefox.
   2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
@@ -109,9 +101,9 @@ code,
 kbd,
 samp,
 pre {
-  font-family: var(--default-mono-font-family, ui-monospace, monospace); /* 4 */
-  font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 5 */
-  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 6 */
+  font-family: var(--default-mono-font-family, ui-monospace, monospace); /* 1 */
+  font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 2 */
+  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 3 */
   font-size: 1em; /* 4 */
 }
 
@@ -265,13 +257,23 @@ textarea,
 }
 
 /*
-  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-  2. Set the default placeholder color to a semi-transparent version of the current text color.
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 */
 
 ::placeholder {
-  opacity: 1; /* 1 */
-  color: color-mix(in oklab, currentcolor 50%, transparent); /* 2 */
+  opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 /*
@@ -423,6 +425,6 @@ turbo-frame {
   Prevent page scroll when modal dialog is open.
 */
 
-html:has(dialog:modal[open]) {
+body:has(dialog:modal) {
   overflow: hidden;
 }

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

@@ -63,6 +63,18 @@
   --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-elastic-1: var(--ease-elastic-out-1);
+  --ease-elastic-2: var(--ease-elastic-out-2);
+  --ease-elastic-3: var(--ease-elastic-out-3);
+  --ease-elastic-4: var(--ease-elastic-out-4);
+  --ease-elastic-5: var(--ease-elastic-out-5);
+
+  --ease-squish-1: var(--ease-elastic-in-out-1);
+  --ease-squish-2: var(--ease-elastic-in-out-2);
+  --ease-squish-3: var(--ease-elastic-in-out-3);
+  --ease-squish-4: var(--ease-elastic-in-out-4);
+  --ease-squish-5: var(--ease-elastic-in-out-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);

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

@@ -16,6 +16,9 @@
   --text-8xl:  6rem;     /* 96px */
   --text-9xl:  8rem;     /* 128px */
 
+  /****************************************************************
+  * font-size: var(--text-fluid-xs);
+  *****************************************************************/
   --text-fluid-xs:   clamp(0.75rem, 0.64rem + 0.57vw, 1rem);        /* 12px..16px */
   --text-fluid-sm:   clamp(0.875rem, 0.761rem + 0.568vw, 1.125rem); /* 14px..18px */
   --text-fluid-base: clamp(1rem, 0.89rem + 0.57vw, 1.25rem);        /* 16px..20px */
@@ -29,7 +32,7 @@
   --text-fluid-7xl:  clamp(4.5rem, 2.91rem + 7.95vw, 8rem);         /* 72px..128px */
 
   /****************************************************************
-  * font-weight: var(--font-hairline);
+  * font-weight: var(--font-thin);
   *****************************************************************/
   --font-thin:       100;
   --font-extralight: 200;
@@ -60,7 +63,7 @@
   --leading-10:      2.5rem;  /* 40px */
 
   /****************************************************************
-  * font-family: var(--font-sans);
+  * font-family: var(--font-system-ui);
   *****************************************************************/
   --font-system-ui: system-ui, sans-serif;
   --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;

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

@@ -35,6 +35,7 @@
 .font-medium { font-weight: var(--font-medium); }
 .font-semibold { font-weight: var(--font-semibold); }
 .font-bold { font-weight: var(--font-bold); }
+.font-black { font-weight: var(--font-black); }
 
 .uppercase { text-transform: uppercase; }
 .capitalize { text-transform: capitalize; }
@@ -42,8 +43,11 @@
 .whitespace-nowrap { white-space: nowrap; }
 .whitespace-normal { white-space: normal; }
 
-.break-words { overflow-wrap: break-word; }
-.break-all { word-break: break-all; }
+.text-balance { text-wrap: balance; }
+.text-pretty { text-wrap: pretty; }
+
+.wrap-break-word { overflow-wrap: break-word; }
+.wrap-anywhere { overflow-wrap: anywhere; }
 
 .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
 .overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
@@ -58,6 +62,7 @@
 .text-end { text-align: end; }
 .text-center { text-align: center; }
 
+.text-current { color: currentColor; }
 .text-primary { color: var(--color-text); }
 .text-reversed { color: var(--color-text-reversed); }
 .text-subtle { color: var(--color-text-subtle); }
@@ -75,14 +80,6 @@
 .text-4xl { font-size: var(--text-4xl); }
 .text-5xl { font-size: var(--text-5xl); }
 
-.text-fluid-xs { font-size: var(--text-fluid-xs); }
-.text-fluid-sm { font-size: var(--text-fluid-sm); }
-.text-fluid-base { font-size: var(--text-fluid-base); }
-.text-fluid-lg { font-size: var(--text-fluid-lg); }
-.text-fluid-xl { font-size: var(--text-fluid-xl); }
-.text-fluid-2xl { font-size: var(--text-fluid-2xl); }
-.text-fluid-3xl { font-size: var(--text-fluid-3xl); }
-
 /****************************************************************
 * Background
 *****************************************************************/
@@ -128,6 +125,12 @@
 .shadow-md { box-shadow: var(--shadow-md); }
 .shadow-lg { box-shadow: var(--shadow-lg); }
 
+/****************************************************************
+* Mouse pointer
+*****************************************************************/
+.cursor-pointer { cursor: pointer; }
+.pointer-events-none { cursor: default; pointer-events: none; }
+
 /****************************************************************
 * Layout
 *****************************************************************/
@@ -136,7 +139,7 @@
 .inline-block { display: inline-block; }
 
 .relative { position: relative; }
-.sticky	{ position: sticky; inset-block-start: 0; z-index: 1; }
+.sticky { position: sticky; inset-block-start: 0; z-index: 1; }
 
 .min-i-0 { min-inline-size: 0; }
 .max-i-none { max-inline-size: none; }
@@ -152,8 +155,8 @@
 .overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
 .overflow-hidden { overflow: hidden; }
 
-.object-contain	{ object-fit: contain; }
-.object-cover {	object-fit: cover; }
+.object-contain { object-fit: contain; }
+.object-cover { object-fit: cover; }
 
 .aspect-square { aspect-ratio: 1; }
 .aspect-widescreen { aspect-ratio: 16 / 9; }
@@ -314,22 +317,16 @@
 /****************************************************************
 * Hiding/Showing
 *****************************************************************/
-.show\@sm, .show\@md, .show\@lg, .show\@xl { display: none; }
-.show\@sm { @media (width >= 40rem) { display: flex; } }
-.show\@md { @media (width >= 48rem) { display: flex; } }
-.show\@lg { @media (width >= 64rem) { display: flex; } }
-.show\@xl { @media (width >= 80rem) { display: flex; } }
+.show\@sm { display: none; @media (width >= 40rem) { display: flex; } }
+.show\@md { display: none; @media (width >= 48rem) { display: flex; } }
+.show\@lg { display: none; @media (width >= 64rem) { display: flex; } }
+.show\@xl { display: none; @media (width >= 80rem) { display: flex; } }
 
 .hide\@sm { @media (width >= 40rem) { display: none; } }
 .hide\@md { @media (width >= 48rem) { display: none; } }
 .hide\@lg { @media (width >= 64rem) { display: none; } }
 .hide\@xl { @media (width >= 80rem) { display: none; } }
 
-.hide\@pwa { @media (display-mode: standalone) { display: none; } }
-.hide\@browser { @media (display-mode: browser) { display: none; } }
-.hide\@print { @media print { display: none; } }
-.hide\@touch { @media (any-hover: none) { display: none; } }
-
 /****************************************************************
 * Accessibility
 *****************************************************************/

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "3.0.1"
+  VERSION = "4.0.0"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
   This will add components into your project.
 
 Components:
-  accordion alert autoanimate autosave autoselect avatar back_navigation badge breadcrumb button card carousel chart check_all collapsible color_scheme combobox command context_menu datepicker dialog dropdown dropzone dual_range flash form fullscreen group hotkey icons input input_clearable input_copyable input_otp input_revealable inputmask layouts lightbox list local_time popover progress prose resizable separator sheet skeleton sortable switch table tabs timezone_cookie trix turbo_confirm upload_preview toggle web_share
+  accordion alert autoanimate autosave autoselect avatar back_navigation badge breadcrumb button card carousel chart check_all collapsible color_scheme combobox command context_menu datepicker dialog dropdown dropzone dual_range flash form fullscreen group hotkey icons input input_clearable input_copyable input_otp input_revealable inputmask keyboard layouts lexxy lightbox list local_time pagination popover progress resizable separator sheet skeleton sortable sound switch table tabs timezone_cookie toggle turbo_confirm upload_preview web_share
 
 Example:
   bin/rails generate css_zero:add [components...]