css-zero 2.0.3 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa9ca9000edaf107ed438323c5fdefddeea838a1b36efa39e9a2a029812c68cb
-  data.tar.gz: 752434ab79f9206188ceb2a8e84f1937f97e4208a6dedf9fd5b2d76850055f98
+  metadata.gz: ba076b01778c263d9cf62556c9f7494f53243b746f5e738c29b1c20785182b15
+  data.tar.gz: 184b90dbddd76008ccddc39cfa0a7e41a284b754eb1cd49504e299778c5aa7ab
 SHA512:
-  metadata.gz: 5d7e99672500e6b4c191d0dac69b333826932965b649d6ea14b4e9c5f7aed832a6ceccaef16d24d07ac86c2fd95627b5eff3ee3bc12b24ec07b849004a43513f
-  data.tar.gz: 9fd690f5c8b8a8be0623cf004f042c2f337302e023811735de343c37c36fe835af5a4473106928975baf42ac770d9253192d186a79a3b179d0b9ad4f088183fd
+  metadata.gz: 5913f936fc9ecf8ec9573208cedffbd4f4a8226c9e2cfb3b28d6e61de907543c7ebb33c50c5f74555e8ba7dbfdd027e761b442814cd6f392e967f4bfe7bb8bf6
+  data.tar.gz: f98fe8b6e467db9410abf616563962cb728c48f3362568a37120c4ee5664511e8e30265be840e91885c593bfb633da16b070e9e546c5eaa6160b1336e1c72367

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

@@ -1,6 +1,4 @@
 /****************************************************************
-* Animation
-* Variables for animating elements with CSS animations.
 * animation: var(--animate-fade-in) forwards;
 *****************************************************************/
 

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

@@ -1,7 +1,5 @@
 :root {
   /****************************************************************
-  * Border Width
-  * Variables for controlling the width of an element's borders.
   * border-width: var(--border);
   *****************************************************************/
   --border:   1px;
@@ -10,8 +8,6 @@
   --border-8: 8px;
 
   /****************************************************************
-  * Border Radius
-  * Variables for controlling the border radius of an element.
   * border-radius: var(--rounded-sm);
   *****************************************************************/
   --rounded-xs:   0.125rem; /* 2px */

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

@@ -1,7 +1,5 @@
 :root {
   /****************************************************************
-  * Box Shadow
-  * Variables for controlling the box shadow of an element.
   * box-shadow: var(--shadow-sm);
   ****************************************************************/
   --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -13,8 +11,6 @@
   --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
   /****************************************************************
-  * Opacity
-  * Variables for controlling the opacity of an element.
   * opacity: var(--opacity-25);
   ****************************************************************/
   --opacity-5:   0.05;

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

@@ -1,7 +1,5 @@
 :root {
   /****************************************************************
-  * Blur
-  * Variables for applying blur filters to an element.
   * filter|backdrop-filter: var(--blur-sm);
   *****************************************************************/
   --blur-none: blur(0);
@@ -14,8 +12,6 @@
   --blur-3xl:  blur(64px);
 
   /****************************************************************
-  * Brightness
-  * Variables for applying brightness filters to an element.
   * filter|backdrop-filter: var(--brightness-50);
   *****************************************************************/
   --brightness-0:   brightness(0);
@@ -31,8 +27,6 @@
   --brightness-200: brightness(2);
 
   /****************************************************************
-  * Contrast
-  * Variables for applying contrast filters to an element.
   * filter|backdrop-filter: var(--contrast-50);
   *****************************************************************/
   --contrast-0:   contrast(0);

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

@@ -426,23 +426,3 @@ turbo-frame {
 html:has(dialog:modal[open]) {
   overflow: hidden;
 }
-
-/*
-  Remove all animations and transitions for people that prefer not to see them
-*/
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after,
-  *::backdrop {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-
-  html {
-    scroll-behavior: initial;
-  }
-}

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

@@ -1,7 +1,5 @@
 :root {
   /****************************************************************
-  * Scale
-  * Variables for scaling elements with transform.
   * transform: var(--scale-100);
   *****************************************************************/
   --scale-50:  scale(0.50);
@@ -15,8 +13,6 @@
   --scale-150: scale(1.50);
 
   /****************************************************************
-  * Rotate
-  * Variables for rotating elements with transform.
   * transform: var(--rotate-45);
   *****************************************************************/
   --rotate-0:   rotate(0deg);
@@ -30,8 +26,6 @@
   --rotate-180: rotate(180deg);
 
   /****************************************************************
-  * Skew
-  * Varibles for skewing elements with transform.
   * transform: var(--skew-x-3);
   *****************************************************************/
   --skew-x-0:  skewX(0deg);

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

@@ -1,16 +1,12 @@
 :root {
   /****************************************************************
-  * Transition Property
-  * Variables for controlling which CSS properties transition.
   * transition-property: var(--transition);
   *****************************************************************/
-  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
-  --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
+  --transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  --transition-colors: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
   --transition-transform: transform, translate, scale, rotate;
 
   /****************************************************************
-  * Transition Timing
-  * Variables for controlling the timing of CSS transitions.
   * transition-duration|transition-delay: var(--time-75);
   *****************************************************************/
   --time-75:   75ms;
@@ -23,8 +19,6 @@
   --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);

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

@@ -1,7 +1,5 @@
 :root {
   /****************************************************************
-  * Font Size
-  * Variables for controlling the font size of an element.
   * font-size: var(--text-xs);
   *****************************************************************/
   --text-xs:   0.75rem;  /* 12px */
@@ -31,8 +29,6 @@
   --text-fluid-7xl:  clamp(4.5rem, 2.91rem + 7.95vw, 8rem);         /* 72px..128px */
 
   /****************************************************************
-  * Font Weight
-  * Variables for controlling the font weight of an element.
   * font-weight: var(--font-hairline);
   *****************************************************************/
   --font-thin:       100;
@@ -46,8 +42,6 @@
   --font-black:      900;
 
   /****************************************************************
-  * Line Height
-  * Variables for controlling the leading (line height) of an element.
   * line-height: var(--leading-tight);
   *****************************************************************/
   --leading-none:    1;
@@ -66,8 +60,6 @@
   --leading-10:      2.5rem;  /* 40px */
 
   /****************************************************************
-  * Font Family (https://modernfontstacks.com)
-  * Variables for controlling the font family of an element.
   * font-family: var(--font-sans);
   *****************************************************************/
   --font-system-ui: system-ui, sans-serif;
@@ -87,8 +79,6 @@
   --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
 
   /****************************************************************
-  * Letter Spacing
-  * Variables for controlling the tracking (letter spacing) of an element.
   * letter-spacing: var(--tracking-tighter);
   *****************************************************************/
   --tracking-tighter: -0.05em;

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "2.0.3"
+  VERSION = "2.1.0"
 end

data/lib/generators/css_zero/add/resources.yml

@@ -3,6 +3,8 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
+  - app/assets/images/circle-alert.svg
+  - app/assets/images/circle-check.svg
 autoanimate:
   - app/assets/stylesheets/autoanimate.css
 autosave:
@@ -60,9 +62,12 @@ dropdown:
 dropzone:
   - app/assets/stylesheets/dropzone.css
   - app/javascript/controllers/dropzone_controller.js
+dual_range:
+  - app/assets/stylesheets/dual_range.css
+  - app/javascript/controllers/dual_range_controller.js
 flash:
   - app/assets/stylesheets/flash.css
-  - app/javascript/controllers/element_removal_controller.js
+  - app/javascript/controllers/flash_controller.js
 form:
   - app/javascript/controllers/form_controller.js
 fullscreen:
@@ -90,18 +95,20 @@ icons:
   - app/assets/images/minus.svg
   - app/assets/images/sun.svg
   - app/assets/images/moon.svg
+  - app/assets/images/circle-alert.svg
+  - app/assets/images/circle-check.svg
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/chevron-down-zinc-500.svg
 input_clearable:
   - app/javascript/controllers/input_clearable_controller.js
-  - app/assets/stylesheets/input-clearable.css
+  - app/assets/stylesheets/input_clearable.css
 input_copyable:
   - app/javascript/controllers/input_copyable_controller.js
-  - app/assets/stylesheets/input-copyable.css
+  - app/assets/stylesheets/input_copyable.css
 input_revealable:
   - app/javascript/controllers/input_revealable_controller.js
-  - app/assets/stylesheets/input-revealable.css
+  - app/assets/stylesheets/input_revealable.css
 inputmask:
   - app/javascript/controllers/inputmask_controller.js
 layouts:
@@ -121,9 +128,6 @@ progress:
   - app/assets/stylesheets/progress.css
 prose:
   - app/assets/stylesheets/prose.css
-range:
-  - app/assets/stylesheets/range.css
-  - app/javascript/controllers/dual_range_controller.js
 resizable:
   - app/assets/stylesheets/resizable.css
   - app/assets/stylesheets/resizable_controller.js

data/lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert-icon lucide-circle-alert"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/circle-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

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

@@ -9,13 +9,9 @@
 }
 
 .alert--positive {
-  --alert-background: var(--color-positive);
-  --alert-border-color: transparent;
-  --alert-color: white;
+  --alert-color: light-dark(var(--green-600), var(--green-400));
 }
 
 .alert--negative {
-  --alert-background: var(--color-negative);
-  --alert-border-color: transparent;
-  --alert-color: white;
+  --alert-color: light-dark(var(--red-600), var(--red-400));
 }

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

@@ -19,7 +19,14 @@
   }
 }
 
-.card--selectable:has(:checked) {
-  background-color: rgb(from var(--color-border-light) r g b / .5);
-  border-color: var(--color-border-dark);
+.card-check {
+  background-color: var(--color-surface);
+  border-radius: var(--rounded-xl);
+  border-width: var(--border);
+  padding: var(--size-3);
+
+  &:has(:checked) {
+    background-color: rgb(from var(--color-border-light) r g b / .5);
+    border-color: var(--color-border-dark);
+  }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/{range.css → dual_range.css}

@@ -1,4 +1,4 @@
-@import url("https://esm.sh/@stanko/dual-range-input@1.0.0/dist/index.css");
+@import url("https://esm.sh/@stanko/dual-range-input@1.0.1/dist/index.css");
 
 .dual-range-input {
   --dri-height: 1rem;
@@ -16,12 +16,6 @@
   --dri-track-border-radius: 1rem;
   --dri-track-color: var(--color-border);
   --dri-track-filled-color: var(--color-primary);
-}
-
-.range {
-  accent-color: var(--color-primary);
-}
-
-.range:focus-visible {
-  outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+  --dri-track-filled-gradient-mid-color: var(--dri-track-filled-color);
+  --dri-track-filled-gradient-end-color: var(--dri-track-filled-color);
 }

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

@@ -1,33 +1,38 @@
 .flash {
-  align-items: center;
   animation: appear-then-fade 4s 300ms both;
   background-color: var(--flash-background, var(--color-text));
   border-radius: var(--rounded-full);
   color: var(--flash-color, var(--color-text-reversed));
+  margin-block-start: var(--flash-position, var(--size-5));
+  margin-inline: auto;
+
+  &:is(:hover, :focus-within) {
+    animation-play-state: paused;
+  }
+
+  [data-turbo-preview] & {
+    display: none;
+  }
+}
+
+.flash__content {
+  align-items: center;
   column-gap: var(--size-2);
-  display: inline-flex;
+  display: flex;
   font-size: var(--text-fluid-base);
   justify-content: center;
   line-height: var(--leading-none);
-  margin-block-start: var(--flash-position, var(--size-5));
-  margin-inline: auto;
   min-block-size: var(--size-11);
   padding: var(--size-1) var(--size-4);
   text-align: center;
-
-  [data-turbo-preview] & {
-    display: none;
-  }
 }
 
 .flash--positive {
-  --flash-background: var(--color-positive);
-  --flash-color: white;
+  --flash-color: light-dark(var(--green-400), var(--green-600));
 }
 
 .flash--negative {
-  --flash-background: var(--color-negative);
-  --flash-color: white;
+  --flash-color: light-dark(var(--red-400), var(--red-600));
 }
 
 .flash--extended {

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

@@ -39,3 +39,5 @@ img.icon {
 .icon--minus { --svg: url("minus.svg"); }
 .icon--sun { --svg: url("sun.svg"); }
 .icon--moon { --svg: url("moon.svg"); }
+.icon--circle-alert { --svg: url("circle-alert.svg"); }
+.icon--circle-check { --svg: url("circle-check.svg"); }

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

@@ -1,16 +1,24 @@
-.input {
-  appearance: none;
-  background-color: var(--input-background, var(--color-surface));
-  block-size: var(--input-block-size, auto);
-  border: 1px solid var(--input-border-color, var(--color-border));
-  border-radius: var(--input-radius, var(--rounded-md));
-  box-shadow: var(--input-box-shadow, var(--shadow-xs));
-  font-size: var(--input-font-size, var(--text-sm));
-  inline-size: var(--input-inline-size, var(--size-full));
-  padding: var(--input-padding, .375rem .75rem);
+:where(.input) {
+  &:not([type="checkbox"], [type="radio"], [type="range"]) {
+    appearance: none;
+    background-color: var(--input-background, var(--color-surface));
+    block-size: var(--input-block-size, auto);
+    border: 1px solid var(--input-border-color, var(--color-border));
+    border-radius: var(--input-radius, var(--rounded-md));
+    box-shadow: var(--input-box-shadow, var(--shadow-xs));
+    font-size: var(--input-font-size, var(--text-sm));
+    inline-size: var(--input-inline-size, var(--size-full));
+    padding: var(--input-padding, .375rem .75rem);
+  }
 
-  option {
-    padding: revert;
+  &:is([type="checkbox"], [type="radio"]) {
+    accent-color: var(--input-accent-color, var(--color-primary));
+    block-size:   var(--input-check-size, var(--size-4));
+    inline-size:  var(--input-check-size, var(--size-4));
+  }
+
+  &:is([type="range"]) {
+    accent-color: var(--input-accent-color, var(--color-primary));
   }
 
   &:is(textarea[rows="auto"]) {
@@ -26,6 +34,10 @@
     background-size: var(--size-4) auto;
   }
 
+  > option {
+    padding: revert;
+  }
+
   &::file-selector-button {
     font-weight: var(--font-medium);
   }
@@ -35,7 +47,7 @@
   }
 
   &:user-invalid + .invalid-feedback {
-    display: flex;
+    display: block;
   }
 
   &:focus-visible {
@@ -43,21 +55,7 @@
   }
 
   &:disabled {
-    cursor: not-allowed;
-    opacity: var(--opacity-50);
-  }
-
-  .field_with_errors & {
-    border-color: var(--color-negative);
-  }
-}
-
-:is(.checkbox, .radio) {
-  accent-color: var(--color-primary);
-  transform: scale(1.2);
-
-  &:focus-visible {
-    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+    cursor: not-allowed; opacity: var(--opacity-50);
   }
 
   .field_with_errors & {
@@ -66,8 +64,8 @@
 }
 
 .input--actor {
-  input {
-    border: 0; inline-size: 100%; outline: 0;
+  > input {
+    inline-size: 100%; outline: 0;
   }
 
   &:focus-within {

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

@@ -29,10 +29,10 @@ trix-toolbar {
   position: sticky;
 
   .trix-button-row {
-    background-color: var(--color-bg);
+    background-color: white;
     border-block-width: 1px;
     column-gap: 1px;
-    padding-block: var(--size-1_5);
+    padding: var(--size-1_5) var(--size-1);
   }
 
   .trix-button-group {
@@ -42,13 +42,13 @@ trix-toolbar {
   }
 
   .trix-button {
-    background-color: var(--color-bg);
+    background-color: transparent;
     border: 0 !important;
     border-radius: var(--rounded-md);
-    color: var(--color-text);
+    color: var(--color-text-reversed);
 
     &.trix-active {
-      background-color: var(--color-border-light);
+      background-color: gainsboro;
     }
 
     &.trix-button--icon::before {
@@ -58,22 +58,10 @@ trix-toolbar {
     &.trix-button--icon:disabled::before {
       opacity: 0.125;
     }
-
-    [data-color-scheme="light"] & {
-      &.trix-button--icon::before { filter: invert(0); }
-    }
-
-    [data-color-scheme="dark"] & {
-      &.trix-button--icon::before { filter: invert(1); }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      &.trix-button--icon::before { filter: invert(1); }
-    }
   }
 
   .trix-dialog {
-    background-color: var(--color-border-light);
+    background-color: var(--color-bg);
     border: 1px solid var(--color-border);
     border-radius: var(--rounded-md);
     margin: var(--size-1);
@@ -82,7 +70,7 @@ trix-toolbar {
 
   .trix-input--dialog {
     border-color: var(--color-border);
-    background-color: var(--color-bg);
+    background-color: var(--color-surface);
     margin: 0;
   }
 
@@ -92,6 +80,10 @@ trix-toolbar {
     color: var(--color-text-reversed);
   }
 
+  [data-trix-dialog] [data-trix-validate]:invalid {
+    background-color: rgb(from var(--color-negative) r g b / .2);
+  }
+
   @media (max-width: 48rem) {
     .trix-button-group--history-tools { display: none; }
   }

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

@@ -4,18 +4,10 @@ export default class extends Controller {
   static targets = [ "content" ]
 
   next() {
-    this.contentTarget.scrollTo({ left: this.#scrollLeft + this.#itemWidth })
+    this.contentTarget.scrollBy(100, 0)
   }
 
   prev() {
-    this.contentTarget.scrollTo({ left: this.#scrollLeft - this.#itemWidth })
-  }
-
-  get #scrollLeft() {
-    return this.contentTarget.scrollLeft
-  }
-
-  get #itemWidth() {
-    return this.contentTarget.firstElementChild?.offsetWidth || 0
+    this.contentTarget.scrollBy(-100, 0)
   }
 }

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

@@ -11,7 +11,7 @@ export default class extends Controller {
   }
 
   connect() {
-    this.combobox = new Combobox(this.inputTarget, this.listTarget, { firstOptionSelectionMode: "selected" })
+    this.combobox = new Combobox(this.inputTarget, this.listTarget)
     this.combobox.start()
   }
 

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.0.200?standalone"
+import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.0.300?standalone"
 import Dropzone from "https://esm.sh/dropzone@6.0.0-beta.2?standalone"
 
 export default class extends Controller {

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import DualRangeInput from "https://esm.sh/@stanko/dual-range-input@1.0.0?standalone"
+import DualRangeInput from "https://esm.sh/@stanko/dual-range-input@1.0.1?standalone"
 
 export default class extends Controller {
   static targets = [ "min", "max" ]

data/lib/generators/css_zero/add/templates/app/javascript/controllers/{element_removal_controller.js → flash_controller.js}

@@ -1,7 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  connect() {
+    this.element.showPopover()
+  }
+
   remove() {
-    this.element.remove()
+    this.element.hidePopover()
   }
 }

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { MaskInput } from "https://esm.sh/maska@3.1.1?standalone"
+import { MaskInput } from "https://esm.sh/maska@3.2.0?standalone"
 
 export default class extends Controller {
   connect() {

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

@@ -83,7 +83,7 @@ export default class extends Controller {
 
   #update() {
     this.#updateTabstops()
-    this.#focusCurrentItem()
+    this.#focusItemAtIndex()
   }
 
   #updateTabstops() {
@@ -92,7 +92,7 @@ export default class extends Controller {
     })
   }
 
-  #focusCurrentItem() {
+  #focusItemAtIndex() {
     this.itemTargets[this.indexValue].focus()
   }
 

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { computePosition, flip, shift, offset, autoUpdate } from "https://esm.sh/@floating-ui/dom@1.7.2?standalone"
+import { computePosition, flip, shift, offset, autoUpdate } from "https://esm.sh/@floating-ui/dom@1.7.4?standalone"
 
 export default class extends Controller {
   static targets = [ "trigger", "content" ]

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css

@@ -42,4 +42,5 @@ body {
 
 ::selection {
   background-color: var(--color-selected);
+  color: var(--color-text);
 }

data/lib/generators/css_zero/install/templates/app/views/layouts/application.html.erb

@@ -38,7 +38,9 @@
 
     <main id="main">
       <%% if notice.present? %>
-        <%%= tag.div notice, popover: "manual", class: "flash", style: "--flash-position: 5rem", data: { controller: "element-removal", action: "animationend->element-removal#remove", role: "alert" } %>
+      <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
+          <div class="flash__content"><%%= notice %></div>
+        </div>
       <%% end %>
       <div class="container">
         <%%= yield %>

data/lib/generators/css_zero/scaffold/templates/_form.html.erb.tt

@@ -24,9 +24,6 @@
 <% elsif attribute.attachments? -%>
     <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
     <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "input" %>
-<% elsif attribute.field_type == :checkbox -%>
-    <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "checkbox" %>
 <% else -%>
     <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
     <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "input" %>

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 2.0.3
+  version: 2.1.0
 platform: ruby
 authors:
 - Lázaro Nixon
 bindir: bin
 cert_chain: []
-date: 2025-08-08 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies: []
 email: lazaronixon@hotmail.com
 executables: []
@@ -41,6 +41,8 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevrons-up-down.svg
+- lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
+- lib/generators/css_zero/add/templates/app/assets/images/circle-check.svg
 - lib/generators/css_zero/add/templates/app/assets/images/copy.svg
 - lib/generators/css_zero/add/templates/app/assets/images/download.svg
 - lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg
@@ -71,20 +73,20 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/datepicker.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dropzone.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/dual_range.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/group.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/icons.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/input-clearable.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/input-copyable.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/input-revealable.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/input_clearable.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/input_copyable.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/input_revealable.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/range.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/resizable.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/sidebar_menu.css
@@ -109,7 +111,7 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dropzone_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dual_range_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/flash_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
@@ -171,7 +173,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.7.2
 specification_version: 4
 summary: An opinionated CSS starter kit for your application.
 test_files: []