css-zero 1.1.14 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d12ea13a67b496f1781d2b19b1f7cdbe3571247ccfba8058e6f86224a78ca96
-  data.tar.gz: 1205cd68c1a55d97f7f145d035176c0fe554f60191c7bdef3e6f1d14e62315ed
+  metadata.gz: d628d36d9cf6c6bd62e165bb74e76ba226cb438824f131bf58a8feb78dd116ca
+  data.tar.gz: 685ce250accb6575865a7a527203535a40a1619af7c2d1c6b5a36522a9b580c2
 SHA512:
-  metadata.gz: 2e4be07882ae3121a041a18de96ddb6b9c9210b0e999b63271ac58645f1b7ae959cbc9b69aa38dd6fe15580899fed6949f80424b45026fb1d791efe1a2a09d07
-  data.tar.gz: 6ea61906b720da2f4a391768eca9844113f4f8ab7891917d71a0f473d7439ff0a3a79696752342030229e953424fbb88f1c7e952a6dff229de72baaf1d586785
+  metadata.gz: dc3269f7abefbf85ff31df3bbecb2861d3456efb5b7f5d25cf2f8b6052fad64509cf1d53b18d16a134a3db07e168e1753753cdf6d081c0fbba891065d0ca5c13
+  data.tar.gz: 805eddba51906ccc77195b635a57327fd3f482cdfd92b2695306a80aa9543e7e90d6bab609f9c2521194d7e8760bb7b73c8a11e15a1f1492b0b3b54a405ab8e7

data/README.md

@@ -1,6 +1,6 @@
 # CSS Zero
 
-An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
+An opinionated front-end starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
 
 ## Installation
 
@@ -10,6 +10,12 @@ Add this gem to your project.
 bundle add css-zero
 ```
 
+Or install directly from GitHub.
+
+```
+bundle add css-zero --github=lazaronixon/css-zero
+```
+
 Run the install command.
 
 ```
@@ -30,10 +36,6 @@ bin/rails generate css_zero:add --help
 
 Check the [CSS files](app/assets/stylesheets/css-zero) in the repository to see the available variables and utility classes.
 
-## Icons
-
-If you're looking for high-quality icons, I recommend checking out [Lucide](https://lucide.dev).
-
 ## Scaffold
 
 This gem implements custom templates for scaffolds and authentication.

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

@@ -271,7 +271,7 @@ textarea,
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
+  color: color-mix(in oklab, currentcolor 50%, transparent); /* 2 */
 }
 
 /*
@@ -328,6 +328,14 @@ textarea {
   padding-block: 0;
 }
 
+/*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
 /*
   Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
@@ -380,35 +388,35 @@ turbo-frame {
 }
 
 /*
-  Enables size interpolation to allow animation.
+  Make field with errors become pseudo-box by default.
 */
 
-:root {
-  interpolate-size: allow-keywords;
+.field_with_errors {
+  display: contents;
 }
 
 /*
-  Set color scheme to light and dark.
+  Make invalid-feedback become hidden by default.
 */
 
-:root {
-  color-scheme: light dark;
+.invalid-feedback {
+  display: none;
 }
 
 /*
-  Correct the arrow style of datalist in Chrome.
+  Enables size interpolation to allow animation.
 */
 
-::-webkit-calendar-picker-indicator {
-  line-height: 1em;
+:root {
+  interpolate-size: allow-keywords;
 }
 
 /*
-  Restore space between options.
+  Set color scheme to light and dark.
 */
 
-option {
-  padding: 2px 4px;
+:root {
+  color-scheme: light dark;
 }
 
 /*
@@ -424,9 +432,17 @@ html:has(dialog:modal[open]) {
 */
 
 @media (prefers-reduced-motion: reduce) {
-  *, ::before, ::after, ::backdrop {
+  *,
+  *::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/transitions.css

@@ -32,41 +32,49 @@
   --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);

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

@@ -7,13 +7,14 @@
 .inline-flex { display: inline-flex; }
 
 .justify-start { justify-content: start; }
-.justify-center { justify-content: center; }
 .justify-end { justify-content: end; }
+.justify-center { justify-content: center; }
 .justify-between { justify-content: space-between; }
 
 .items-start { align-items: start; }
 .items-end { align-items: end; }
 .items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
 
 .grow { flex-grow: 1; }
 .grow-0	{ flex-grow: 0; }
@@ -26,7 +27,7 @@
 .self-center { align-self: center; }
 
 .gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
-.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }
+.gap-half { column-gap: var(--column-gap, 0.25rem); row-gap: var(--row-gap, 0.5rem); }
 
 /****************************************************************
 * Text
@@ -36,10 +37,8 @@
 .font-semibold { font-weight: var(--font-semibold); }
 .font-bold { font-weight: var(--font-bold); }
 
-.underline { text-decoration: underline; }
-.no-underline	{ text-decoration: none; }
-
 .uppercase { text-transform: uppercase; }
+.capitalize { text-transform: capitalize; }
 .normal-case { text-transform: none; }
 
 .whitespace-nowrap { white-space: nowrap; }
@@ -63,9 +62,10 @@
 
 .text-primary { color: var(--color-text); }
 .text-reversed { color: var(--color-text-reversed); }
-.text-negative { color: var(--color-negative); }
-.text-positive { color: var(--color-positive); }
 .text-subtle { color: var(--color-text-subtle); }
+.text-positive { color: var(--color-positive); }
+.text-negative { color: var(--color-negative); }
+.text-link { color: var(--color-link); text-decoration: underline; }
 
 .text-xs { font-size: var(--text-xs); }
 .text-sm { font-size: var(--text-sm); }
@@ -92,16 +92,10 @@
 .bg-black { background-color: var(--color-text); }
 .bg-white { background-color: var(--color-text-reversed); }
 .bg-shade { background-color: var(--color-border-light); }
+.bg-selected { background-color: var(--color-selected); }
+.bg-highlight { background-color: var(--color-highlight); }
 .bg-transparent { background-color: transparent; }
 
-/****************************************************************
-* SVG colors
-*****************************************************************/
-.colorize-black { filter: var(--color-filter-text); }
-.colorize-white { filter: var(--color-filter-text-reversed); }
-.colorize-negative { filter: var(--color-filter-negative); }
-.colorize-positive { filter: var(--color-filter-positive); }
-
 /****************************************************************
 * Border
 *****************************************************************/

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

@@ -6,4 +6,4 @@
 @import url("sizes.css");
 @import url("transforms.css");
 @import url("transitions.css");
-@import url("typography.css");
+@import url("typography.css");

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "1.1.14"
+  VERSION = "2.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 avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown dropzone flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination popover progress prose resizable sheet skeleton sortable switch table tabs 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_revealable inputmask layouts lightbox local_time popover progress prose resizable sheet skeleton sortable switch table tabs timezone_cookie trix turbo_confirm upload_preview toggle web_otp web_share
 
 Example:
   bin/rails generate css_zero:add [components...]

data/lib/generators/css_zero/add/add_generator.rb

@@ -12,12 +12,18 @@ class CssZero::AddGenerator < Rails::Generators::Base
   private
     def copy_resources_for(component)
       if resources.has_key?(component)
-        resources[component].each { |resource| copy_file(resource) }
+        copy_resources(resources, component)
       else
         say_status :invalid, component, :red
       end
     end
 
+    def copy_resources(resources, component)
+      resources[component].each do |resource|
+        resource.end_with?('/') ? directory(resource) : copy_file(resource)
+      end
+    end
+
     def resources
       @resources ||= YAML.load_file(resources_path)
     end

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

@@ -7,50 +7,56 @@ autoanimate:
   - app/assets/stylesheets/autoanimate.css
 autosave:
   - app/javascript/controllers/autosave_controller.js
+autoselect:
+  - app/javascript/controllers/autoselect_controller.js
 avatar:
   - app/assets/stylesheets/avatar.css
+back_navigation:
+  - app/javascript/controllers/back_navigation_controller.js
 badge:
   - app/assets/stylesheets/badge.css
 breadcrumb:
   - app/assets/stylesheets/breadcrumb.css
-  - app/assets/images/chevron-right.svg
 button:
   - app/assets/stylesheets/button.css
-  - app/assets/images/loader-circle.svg
+  - app/assets/images/loading.svg
 card:
   - app/assets/stylesheets/card.css
 carousel:
   - app/assets/stylesheets/carousel.css
   - app/javascript/controllers/carousel_controller.js
-  - app/assets/images/arrow-left.svg
-  - app/assets/images/arrow-right.svg
 chart:
   - app/javascript/controllers/chart_controller.js
 check_all:
   - app/javascript/controllers/check_all_controller.js
+color_scheme:
+  - app/assets/stylesheets/color_scheme.css
+  - app/javascript/controllers/color_scheme_controller.js
 collapsible:
   - app/javascript/controllers/collapsible_controller.js
 combobox:
   - app/assets/stylesheets/combobox.css
   - app/javascript/controllers/combobox_controller.js
-  - app/assets/images/select-arrow.svg
+  - app/assets/images/chevron-down-zinc-500.svg
 command:
   - app/assets/stylesheets/command.css
   - app/javascript/controllers/command_controller.js
-  - app/assets/images/search.svg
+context_menu:
+  - app/assets/stylesheets/popover.css
+  - app/javascript/controllers/popover_controller.js
+  - app/assets/stylesheets/menu.css
+  - app/javascript/controllers/context_menu_controller.js
 datepicker:
   - app/assets/stylesheets/datepicker.css
   - app/javascript/controllers/datepicker_controller.js
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/javascript/controllers/dialog_controller.js
-  - app/assets/images/x.svg
 dropdown:
   - app/assets/stylesheets/popover.css
   - app/javascript/controllers/popover_controller.js
   - app/assets/stylesheets/menu.css
   - app/javascript/controllers/menu_controller.js
-  - app/javascript/controllers/context_menu_controller.js
 dropzone:
   - app/assets/stylesheets/dropzone.css
   - app/javascript/controllers/dropzone_controller.js
@@ -65,42 +71,49 @@ group:
   - app/assets/stylesheets/group.css
 hotkey:
   - app/javascript/controllers/hotkey_controller.js
-input:
-  - app/assets/stylesheets/input.css
-  - app/assets/images/select-arrow.svg
-input_concerns:
-  - app/assets/stylesheets/input_concerns.css
-  - app/javascript/controllers/autoselect_controller.js
-  - app/javascript/controllers/copyable_input_controller.js
-  - app/assets/images/copy.svg
-  - app/javascript/controllers/clearable_input_controller.js
+icons:
+  - app/assets/stylesheets/icons.css
+  - app/assets/images/loading.svg
+  - app/assets/images/chevron-left.svg
+  - app/assets/images/chevron-right.svg
+  - app/assets/images/ellipsis.svg
+  - app/assets/images/chevrons-up-down.svg
+  - app/assets/images/menu.svg
   - app/assets/images/x.svg
-  - app/javascript/controllers/revealable_input_controller.js
+  - app/assets/images/search.svg
   - app/assets/images/eye.svg
-  - app/assets/images/off.svg
-  - app/javascript/controllers/otp_input_controller.js
+  - app/assets/images/eye-off.svg
+  - app/assets/images/copy.svg
+  - app/assets/images/download.svg
+  - app/assets/images/share.svg
+  - app/assets/images/camera.svg
+  - app/assets/images/minus.svg
+  - app/assets/images/sun.svg
+  - app/assets/images/moon.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
+input_copyable:
+  - app/javascript/controllers/input_copyable_controller.js
+  - app/assets/stylesheets/input-copyable.css
+input_revealable:
+  - app/javascript/controllers/input_revealable_controller.js
+  - app/assets/stylesheets/input-revealable.css
 inputmask:
   - app/javascript/controllers/inputmask_controller.js
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/stylesheets/sidebar_menu.css
-  - app/assets/images/menu.svg
   - app/assets/images/chevron-right.svg
 lightbox:
   - app/assets/stylesheets/lightbox.css
   - app/javascript/controllers/lightbox_controller.js
   - app/javascript/controllers/web_share_controller.js
-  - app/assets/images/download.svg
-  - app/assets/images/share.svg
-  - app/assets/images/x.svg
 local_time:
   - app/javascript/controllers/local_time_controller.js
-navigation:
-  - app/javascript/controllers/navigation_controller.js
-pagination:
-  - app/assets/images/chevron-right.svg
-  - app/assets/images/chevron-left.svg
-  - app/assets/images/ellipsis.svg
 popover:
   - app/assets/stylesheets/popover.css
   - app/javascript/controllers/popover_controller.js
@@ -108,12 +121,17 @@ 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
+  - app/assets/images/grip-horizontal-zink-500.svg
+  - app/assets/images/grip-vertical-zink-500.svg
 sheet:
   - app/assets/stylesheets/sheet.css
   - app/javascript/controllers/dialog_controller.js
-  - app/assets/images/x.svg
 skeleton:
   - app/assets/stylesheets/skeleton.css
 sortable:
@@ -125,6 +143,8 @@ table:
 tabs:
   - app/assets/stylesheets/tabs.css
   - app/javascript/controllers/tabs_controller.js
+timezone_cookie:
+  - app/javascript/controllers/timezone_cookie_controller.js
 toggle:
   - app/assets/stylesheets/toggle.css
 trix:
@@ -134,8 +154,8 @@ turbo_confirm:
   - app/javascript/controllers/turbo_confirm_controller.js
 upload_preview:
   - app/javascript/controllers/upload_preview_controller.js
-  - app/assets/images/default-picture.webp
-  - app/assets/images/camera.svg
-  - app/assets/images/minus.svg
+  - app/assets/images/avatar.svg
+web_otp:
+  - app/javascript/controllers/web_otp_controller.js
 web_share:
   - app/javascript/controllers/web_share_controller.js

data/lib/generators/css_zero/add/templates/app/assets/images/avatar.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 17 17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h17v17h-17z" fill="#fff"/><path d="m0 0h17v17h-17z" fill-opacity=".33"/><path d="m10.9 11.9-.5-.2c-.2-.4-.2-.8-.1-1.2.9-.9 1.3-2.1 1.2-3.3 0-1.8-1.3-3.2-3.1-3.2s-3 1.4-3 3.2c-.1 1.1.3 2.4 1.2 3.3.2.4.2.8-.1 1.2l-.5.2c-1.9.7-3.4 1.1-3.9 2-.3.9-.6 1.8-.6 2.7 0 .2.2.4.4.4h12.9c.2 0 .4-.2.4-.4 0-.9-.2-1.8-.6-2.7-.3-.8-1.8-1.3-3.7-2z" fill-opacity=".5"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/camera.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
+<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-camera-icon lucide-camera"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/chevron-down-zinc-500.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+<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-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+<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-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+<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-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/chevrons-up-down.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-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/copy.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+<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-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/download.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
+<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-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+<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-ellipsis-icon lucide-ellipsis"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/eye-off.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-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/eye.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
+<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-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/grip-horizontal-zink-500.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-horizontal-icon lucide-grip-horizontal"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/grip-vertical-zink-500.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical-icon lucide-grip-vertical"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/loading.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <circle opacity=".25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path opacity=".75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>

data/lib/generators/css_zero/add/templates/app/assets/images/menu.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+<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-menu-icon lucide-menu"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/minus.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>
+<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-minus-icon lucide-minus"><path d="M5 12h14"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/moon.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-moon-icon lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/search.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+<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-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/share.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
+<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-share-icon lucide-share"><path d="M12 2v13"/><path d="m16 6-4-4-4 4"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/sun.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-sun-icon lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/x.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+<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-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

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

@@ -1,4 +1,4 @@
-.accordion {
+:where(.accordion) {
   details {
     border-block-end-width: var(--border);
     font-size: var(--text-sm);
@@ -31,18 +31,14 @@
       outline: var(--border-2) auto var(--color-selected-dark);
     }
 
-    &::-webkit-details-marker {
-      display: none;
-    }
-
     &::after {
-      background-image: url("chevron-down.svg");
-      background-size: cover;
+      background-color: currentColor;
       block-size: var(--size-4);
       content: "";
-      filter: var(--color-filter-text);
       inline-size: var(--size-4);
       margin-inline-start: auto;
+      mask-image: url("chevron-down.svg");
+      mask-size: cover;
       transition: transform var(--time-200);
     }