css-zero 0.0.15 → 0.0.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7304e9420f4574059f34a6be6f69f7dca6d94b3e2fd0be6d497cc59bdab99a52
-  data.tar.gz: ed1bc4913357f8eac01ab39cf26f05b60399bafd9c707520d1fb59853a55de5b
+  metadata.gz: 92f6b9adffe56fbbd63cc59f9d80869e8fd52f01dc43285e2a4fca1478099a83
+  data.tar.gz: 48bc41e660292ebcd1f9fec79a0c791cbfec06ba9e698711ab211bec155950c3
 SHA512:
-  metadata.gz: ac3e38e755a91f8b33a88f0880ceb12ff6a582a861bad0e5031147d070b0e794d779524b96e46bf4cc8640e002b8342f64b58c685afa76e04ae59c1f72484568
-  data.tar.gz: 82a577ab39f939842b1e1d1b30827f43cf692acb3cf6feeac56364793a8a6e95f0de33779971851d6ff17dfb7fc91a97d55348743674db3b309a682a0ac000da
+  metadata.gz: a3ff2ead3a52606d129f09bc0c9aa9039b4cd155ea0e87d6b2b07ceedb77b346d044004f906376dccd796fa63f2fd28341c6b4339547238e202465fc16c12beb
+  data.tar.gz: e7f2b6b8b2cf02729a57051cdb7d3827ee5803bb6af9257fa8b6e968eafcd40163e671f24f3b8c4fcfebea2663d825bb483a86a7911c8e8425210f3214628010

data/README.md

@@ -1,6 +1,6 @@
 # CSS Zero
 
-An opinionated CSS starter kit for your application. You can think of it like a "no build" Tailwind CSS.
+An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
 
 ## Installation
 
@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert badge button card dialog input progress switch table
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
 ```
 
 ### Requirements
@@ -132,6 +132,24 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### Avatar
+
+<details>
+<summary>Show me the code</summary>
+
+```html+erb
+<div class="flex item-center gap">
+  <div class="avatar">
+    <%= image_tag "cartoon.jpg", role: "presentation", size: 48 %>
+  </div>
+
+  <div class="avatar">
+    <span class="avatar__fallback">CN</span>
+  </div>
+</div>
+```
+</details>
+
 ### Badge
 
 <img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
@@ -150,6 +168,24 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### Breadcrumb
+
+<details>
+<summary>Show me the code</summary>
+
+```html+erb
+<nav class="breadcrumb">
+  <a href="#">Home</a>
+  <%= image_tag "chevron-right.svg", size: 14 %>
+  <a href="#"><%= image_tag "ellipsis.svg", size: 14 %></a>
+  <%= image_tag "chevron-right.svg", size: 14 %>
+  <a href="#">Components</a>
+  <%= image_tag "chevron-right.svg", size: 14 %>
+  <a href="#" class="text-primary">Breadcrumb</a>
+</nav>
+```
+</details>
+
 ### Button
 
 <img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
@@ -217,6 +253,38 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### Collapsible
+
+<details>
+<summary>Show me the code</summary>
+
+```html+erb
+<div data-controller="collapsible" style="max-inline-size: 350px">
+  <div class="flex items-center justify-between gap pi-4 pb-3">
+    <h4 class="text-sm font-semibold">
+      @lazaronixon starred 3 repositories
+    </h4>
+    <button data-action="collapsible#toggle" class="btn btn--plain p-0">
+      <%= image_tag "chevrons-up-down.svg", size: 16 %>
+      <span class="sr-only">Toggle</span>
+    </button>
+  </div>
+  <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
+    @rails/rails
+  </div>
+  <details>
+    <summary data-collapsible-target="summary" hidden></summary>
+    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
+      @rails/jbuilder
+    </div>
+    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
+      @rails/jsbundling-rails
+    </div>
+  </details>
+</div>
+```
+</details>
+
 ### Dialog
 
 #### Alert Dialog
@@ -413,6 +481,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### More components soon...
+
 ## Development
 
 To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

data/app/assets/stylesheets/_reset.css

@@ -60,7 +60,7 @@ body {
 */
 
 hr {
-  height: 0; /* 1 */
+  block-size: 0; /* 1 */
   color: inherit; /* 2 */
   border-block-start-width: 1px; /* 3 */
 }
@@ -155,11 +155,11 @@ sup {
 }
 
 sub {
-  bottom: -0.25em;
+  inset-block-end: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+  inset-block-start: -0.5em;
 }
 
 /*
@@ -242,7 +242,7 @@ progress {
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto;
+  block-size: auto;
 }
 
 /*
@@ -321,8 +321,8 @@ object {
 
 img,
 video {
-  max-width: 100%;
-  height: auto;
+  max-inline-size: 100%;
+  block-size: auto;
 }
 
 /*

data/app/assets/stylesheets/zutilities.css

@@ -16,6 +16,9 @@
 .items-center { align-items: center; }
 
 .grow { flex-grow: 1; }
+.grow-0	{ flex-grow: 0; }
+
+.shrink { flex-shrink: 1; }
 .shrink-0 { flex-shrink: 0; }
 
 .self-start { align-self: start; }
@@ -42,7 +45,7 @@
 .whitespace-nowrap { white-space: nowrap; }
 .whitespace-normal { white-space: normal; }
 
-.break-words { word-break: break-word; }
+.break-words { overflow-wrap: break-word; }
 .break-all { word-break: break-all; }
 
 .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
@@ -85,6 +88,7 @@
 .bg-main { background-color: var(--color-bg); }
 .bg-black { background-color: var(--color-text); }
 .bg-white { background-color: var(--color-text-reversed); }
+.bg-shade { background-color: var(--color-secondary); }
 .bg-transparent { background-color: transparent; }
 
 /****************************************************************
@@ -92,6 +96,7 @@
 *****************************************************************/
 .colorize-black { filter: var(--color-filter-text); }
 .colorize-white { filter: var(--color-filter-text-reversed); }
+.colorize-shade { filter: var(--color-filter-text-subtle); }
 .colorize-negative { filter: var(--color-filter-negative); }
 .colorize-positive { filter: var(--color-filter-positive); }
 
@@ -154,6 +159,7 @@
 .m-0\.5 { margin: var(--size-0_5); }
 .m-1 { margin: var(--size-1); }
 .m-2 { margin: var(--size-2); }
+.m-3 { margin: var(--size-3); }
 .m-4 { margin: var(--size-4); }
 .m-6 { margin: var(--size-6); }
 .m-8 { margin: var(--size-8); }
@@ -164,6 +170,7 @@
 .mb-0\.5 { margin-block: var(--size-0_5); }
 .mb-1 { margin-block: var(--size-1); }
 .mb-2 { margin-block: var(--size-2); }
+.mb-3 { margin-block: var(--size-3); }
 .mb-4 { margin-block: var(--size-4); }
 .mb-6 { margin-block: var(--size-6); }
 .mb-8 { margin-block: var(--size-8); }
@@ -174,6 +181,7 @@
 .mbs-0\.5 { margin-block-start: var(--size-0_5); }
 .mbs-1 { margin-block-start: var(--size-1); }
 .mbs-2 { margin-block-start: var(--size-2); }
+.mbs-3 { margin-block-start: var(--size-3); }
 .mbs-4 { margin-block-start: var(--size-4); }
 .mbs-6 { margin-block-start: var(--size-6); }
 .mbs-8 { margin-block-start: var(--size-8); }
@@ -184,6 +192,7 @@
 .mbe-0\.5 { margin-block-end: var(--size-0_5); }
 .mbe-1 { margin-block-end: var(--size-1); }
 .mbe-2 { margin-block-end: var(--size-2); }
+.mbe-3 { margin-block-end: var(--size-3); }
 .mbe-4 { margin-block-end: var(--size-4); }
 .mbe-6 { margin-block-end: var(--size-6); }
 .mbe-8 { margin-block-end: var(--size-8); }
@@ -194,6 +203,7 @@
 .mi-0\.5 { margin-inline: var(--size-0_5); }
 .mi-1 { margin-inline: var(--size-1); }
 .mi-2 { margin-inline: var(--size-2); }
+.mi-3 { margin-inline: var(--size-3); }
 .mi-4 { margin-inline: var(--size-4); }
 .mi-6 { margin-inline: var(--size-6); }
 .mi-8 { margin-inline: var(--size-8); }
@@ -204,6 +214,7 @@
 .mis-0\.5 { margin-inline-start: var(--size-0_5); }
 .mis-1 { margin-inline-start: var(--size-1); }
 .mis-2 { margin-inline-start: var(--size-2); }
+.mis-3 { margin-inline-start: var(--size-3); }
 .mis-4 { margin-inline-start: var(--size-4); }
 .mis-6 { margin-inline-start: var(--size-6); }
 .mis-8 { margin-inline-start: var(--size-8); }
@@ -214,6 +225,7 @@
 .mie-0\.5 { margin-inline-end: var(--size-0_5); }
 .mie-1 { margin-inline-end: var(--size-1); }
 .mie-2 { margin-inline-end: var(--size-2); }
+.mie-3 { margin-inline-end: var(--size-3); }
 .mie-4 { margin-inline-end: var(--size-4); }
 .mie-6 { margin-inline-end: var(--size-6); }
 .mie-8 { margin-inline-end: var(--size-8); }
@@ -227,6 +239,7 @@
 .p-0\.5 { padding: var(--size-0_5); }
 .p-1 { padding: var(--size-1); }
 .p-2 { padding: var(--size-2); }
+.p-3 { padding: var(--size-3); }
 .p-4 { padding: var(--size-4); }
 .p-6 { padding: var(--size-6); }
 .p-8 { padding: var(--size-8); }
@@ -236,6 +249,7 @@
 .pb-0\.5 { padding-block: var(--size-0_5); }
 .pb-1 { padding-block: var(--size-1); }
 .pb-2 { padding-block: var(--size-2); }
+.pb-3 { padding-block: var(--size-3); }
 .pb-4 { padding-block: var(--size-4); }
 .pb-6 { padding-block: var(--size-6); }
 .pb-8 { padding-block: var(--size-8); }
@@ -245,6 +259,7 @@
 .pbs-0\.5 { padding-block-start: var(--size-0_5); }
 .pbs-1 { padding-block-start: var(--size-1); }
 .pbs-2 { padding-block-start: var(--size-2); }
+.pbs-3 { padding-block-start: var(--size-3); }
 .pbs-4 { padding-block-start: var(--size-4); }
 .pbs-6 { padding-block-start: var(--size-6); }
 .pbs-8 { padding-block-start: var(--size-8); }
@@ -254,6 +269,7 @@
 .pbe-0\.5 { padding-block-end: var(--size-0_5); }
 .pbe-1 { padding-block-end: var(--size-1); }
 .pbe-2 { padding-block-end: var(--size-2); }
+.pbe-3 { padding-block-end: var(--size-3); }
 .pbe-4 { padding-block-end: var(--size-4); }
 .pbe-6 { padding-block-end: var(--size-6); }
 .pbe-8 { padding-block-end: var(--size-8); }
@@ -263,6 +279,7 @@
 .pi-0\.5 { padding-inline: var(--size-0_5); }
 .pi-1 { padding-inline: var(--size-1); }
 .pi-2 { padding-inline: var(--size-2); }
+.pi-3 { padding-inline: var(--size-3); }
 .pi-4 { padding-inline: var(--size-4); }
 .pi-6 { padding-inline: var(--size-6); }
 .pi-8 { padding-inline: var(--size-8); }
@@ -272,6 +289,7 @@
 .pis-0\.5 { padding-inline-start: var(--size-0_5); }
 .pis-1 { padding-inline-start: var(--size-1); }
 .pis-2 { padding-inline-start: var(--size-2); }
+.pis-3 { padding-inline-start: var(--size-3); }
 .pis-4 { padding-inline-start: var(--size-4); }
 .pis-6 { padding-inline-start: var(--size-6); }
 .pis-8 { padding-inline-start: var(--size-8); }
@@ -281,6 +299,7 @@
 .pie-0\.5 { padding-inline-end: var(--size-0_5); }
 .pie-1 { padding-inline-end: var(--size-1); }
 .pie-2 { padding-inline-end: var(--size-2); }
+.pie-3 { padding-inline-end: var(--size-3); }
 .pie-4 { padding-inline-end: var(--size-4); }
 .pie-6 { padding-inline-end: var(--size-6); }
 .pie-8 { padding-inline-end: var(--size-8); }

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.15"
+  VERSION = "0.0.17"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert badge button card dialog input progress switch table
+  accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -3,13 +3,20 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
+avatar:
+  - app/assets/stylesheets/avatar.css
 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
 card:
   - app/assets/stylesheets/card.css
+collapsible:
+  - app/javascript/controllers/collapsible_controller.js
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/assets/images/x.svg

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

@@ -0,0 +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>

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

@@ -6,7 +6,7 @@
   padding: var(--size-4);
   inline-size: var(--size-full);
 
-  img:not([class]) {
+  img {
     filter: var(--alert-icon-color, var(--color-filter-text-reversed));
   }
 }

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

@@ -0,0 +1,31 @@
+:root {
+  --avatar-size: var(--size-10);
+}
+
+.avatar {
+  block-size: var(--avatar-size);
+  border-radius: var(--rounded-full);
+  display: flex;
+  flex-shrink: 0;
+  inline-size: var(--avatar-size);
+  overflow: hidden;
+
+  img {
+    aspect-ratio: 1;
+    block-size: var(--size-full);
+    inline-size: var(--size-full);
+    object-fit: cover;
+  }
+}
+
+.avatar__fallback {
+  align-items: center;
+  background-color: var(--color-secondary);
+  block-size: var(--size-full);
+  border-radius: var(--rounded-full);
+  display: flex;
+  font-size: calc(var(--avatar-size) * .4);
+  inline-size: var(--size-full);
+  justify-content: center;
+  user-select: none;
+}

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

@@ -0,0 +1,22 @@
+.breadcrumb {
+  align-items: center;
+  color: var(--color-text-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: var(--text-sm);
+  gap: var(--size-2_5);
+  overflow-wrap: break-word;
+
+  img {
+    filter: var(--color-filter-text-subtle);
+  }
+
+  a:hover {
+    color: var(--color-text);
+  }
+
+  /* Small screens and below */
+  @media (width < 40rem) {
+    gap: var(--size-1_5);
+  }
+}

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

@@ -11,11 +11,11 @@
   font-weight: var(--font-medium);
   gap: var(--size-2);
   justify-content: center;
+  min-inline-size: fit-content;
   padding: var(--size-2) var(--size-4);
   text-align: center;
-  white-space: nowrap;
 
-  img:not([class]) {
+  img {
     filter: var(--btn-icon-color, var(--color-filter-text-reversed));
   }
 

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

@@ -7,7 +7,6 @@
   inline-size: var(--size-full);
   margin: auto;
   max-inline-size: var(--width-lg);
-  overflow: hidden;
   padding: var(--size-6);
 
   &::backdrop {
@@ -19,13 +18,13 @@
   transform: var(--scale-95);
   transition-behavior: allow-discrete;
   transition-duration: var(--time-150);
-  transition-property: display overlay opacity transform;
+  transition-property: display, overlay, opacity, transform;
 
   &::backdrop {
     opacity: 0;
     transition-behavior: allow-discrete;
     transition-duration: var(--time-150);
-    transition-property: display overlay opacity;
+    transition-property: display, overlay, opacity;
   }
 
   /* In animation */
@@ -48,15 +47,16 @@
     }
   }
 
-  /* Small screens */
+  /* Small screens and below */
   @media (width < 40rem) {
     border-radius: 0;
   }
 }
 
 .dialog__close {
+  inset-block-start: var(--size-4);
+  inset-inline-end: var(--size-4);
   position: absolute;
-  inset: var(--size-4) var(--size-4) auto auto;
 }
 
 /* Prevent page scroll when dialog is open */

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

@@ -12,7 +12,7 @@
 
   th {
     font-weight: var(--font-medium);
-    text-align: left;
+    text-align: start;
   }
 
   th, td {

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "summary" ]
+
+  toggle() {
+    this.summaryTarget.click()
+  }
+}

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

@@ -12,7 +12,7 @@ export default class extends Controller {
   }
 
   close() {
-    this.boxTarget.close("dismiss")
+    this.boxTarget.close()
   }
 
   closeOnClickOutside({ target }) {

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

@@ -1,30 +1,44 @@
 :root {
-  /* Color Scheme */
-  color-scheme: light dark;
-
   /* Abstractions */
-  --color-bg: light-dark(white, var(--zinc-950));
-  --color-text: light-dark(black, white);
-  --color-text-reversed: light-dark(white, black);
-  --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
-  --color-border: light-dark(var(--zinc-200), var(--zinc-800));
-  --color-border-darker: light-dark(var(--zinc-400), var(--zinc-300));
+  --color-bg: white;
+  --color-text: black;
+  --color-text-reversed: white;
+  --color-text-subtle: var(--zinc-500);
+  --color-border: var(--zinc-200);
+  --color-border-darker: var(--zinc-400);
 
   /* Accent colors */
-  --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
-  --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
-  --color-negative: light-dark(var(--red-600), var(--red-900));
-  --color-positive: light-dark(var(--green-600), var(--green-900));
+  --color-primary: var(--zinc-900);
+  --color-secondary: var(--zinc-100);
+  --color-negative: var(--red-600);
+  --color-positive: var(--green-600);
 
   /* SVG color values */
   --color-filter-text: invert(0);
   --color-filter-text-reversed: invert(100%);
+  --color-filter-text-subtle: invert(43%) sepia(8%) saturate(340%) hue-rotate(202deg) brightness(99%) contrast(85%);
   --color-filter-negative: invert(31%) sepia(96%) saturate(4646%) hue-rotate(350deg) brightness(91%) contrast(89%);
   --color-filter-positive: invert(48%) sepia(74%) saturate(520%) hue-rotate(90deg) brightness(89%) contrast(90%);
 
   @media (prefers-color-scheme: dark) {
+    /* Abstractions */
+    --color-bg: var(--zinc-950);
+    --color-text: white;
+    --color-text-reversed: black;
+    --color-text-subtle: var(--zinc-400);
+    --color-border: var(--zinc-800);
+    --color-border-darker: var(--zinc-300);
+
+    /* Accent colors */
+    --color-primary: var(--zinc-50);
+    --color-secondary: var(--zinc-800);
+    --color-negative: var(--red-900);
+    --color-positive: var(--green-900);
+
+    /* SVG color values */
     --color-filter-text: invert(100%);
     --color-filter-text-reversed: invert(0);
+    --color-filter-text-subtle: invert(55%) sepia(98%) saturate(0%) hue-rotate(299deg) brightness(96%) contrast(94%);
     --color-filter-negative: invert(15%) sepia(83%) saturate(2066%) hue-rotate(345deg) brightness(87%) contrast(88%);
     --color-filter-positive: invert(23%) sepia(74%) saturate(495%) hue-rotate(91deg) brightness(88%) contrast(89%);
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.15
+  version: 0.0.17
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-03 00:00:00.000000000 Z
+date: 2024-07-06 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -37,13 +37,16 @@ files:
 - lib/generators/css_zero/add/add_generator.rb
 - lib/generators/css_zero/add/resources.yml
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
+- lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
 - lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
 - lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
 - lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
 - lib/generators/css_zero/add/templates/app/assets/images/x.svg
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
@@ -51,6 +54,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
+- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb