css-zero 0.0.93 → 0.0.95

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32342c2b786487ee68c9b3a1d894d94b85b89607da1abb1d2f5a75ed9effc53c
-  data.tar.gz: '02517761054609b9014ef3fb4194a8d4405b7875c87dc42abe000b085577dddc'
+  metadata.gz: 7c56f270130722e9912c5271b2700f89b19f1debe15c19a2c2394c9bba4d169c
+  data.tar.gz: '0803ceaa8816e61105de7e64b9c31df4063c1b7defde89fffb3162052dd1a5db'
 SHA512:
-  metadata.gz: 75bdcf3780aac15921ccead84e9abec3629b6dd9f84751aa21d15e82781050e3cedb924925db75c1a1bd1387986dde849a02734be9e20873dfa44cf2b4f48751
-  data.tar.gz: 7fd76a723cb4be4d92243f1ed3faa5882fb96f76dfe2e184d7708bf1da9b6141925d0875cf12ccfe8a46bf924daeea117eda7d157ba235ef50a44beaada385e2
+  metadata.gz: 0c2d8bf42bb152ae84264e48a190734f9d06d9cc065cb22432c1f0a9c48256d207b06859c6947f820e2c0979443af5e8b71ea0c9746dbd5c9ee08b04ee5ff63f
+  data.tar.gz: 0baceaccc306e73770beb3a8bfaff1f2564ef9a3e7b1688e5060654886883ba235f4fb93a2327b869177139ed86ba7203da07fb72e9195a00df07fb8cc86bb4a

data/README.md

@@ -22,29 +22,21 @@ Add the additional components you need. (Optional)
 bin/rails generate css_zero:add --help
 ```
 
-## Usage
-
-Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
-
 ## Components
 
 [<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
 
-## Scaffold
-
-This gem implements custom templates for scaffolds and authentication.
+## Utility classes and variables
 
-```
-bin/rails generate scaffold contacts name email phone
-```
+Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
 
 ## Icons
 
-Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
+If you're looking for high-quality icons, I recommend checking out [Lucide](https://lucide.dev).
 
-## Figma
+## Scaffold
 
-[shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
+This gem implements custom templates for scaffolds and authentication.
 
 ## Development
 

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.93"
+  VERSION = "0.0.95"
 end

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

@@ -21,6 +21,7 @@
   }
 
   img {
+    align-content: center;
     aspect-ratio: var(--aspect-square);
     block-size: var(--size-full);
     inline-size: var(--size-full);

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

@@ -1,5 +1,6 @@
 .btn {
   --btn-background: var(--color-bg);
+  --hover-color: oklch(from var(--btn-background) calc(l * .95) c h);
 
   align-items: center;
   background-color: var(--btn-background);
@@ -24,7 +25,7 @@
   }
 
   &:hover {
-    background-color: var(--btn-hover-color, oklch(from var(--btn-background) calc(l * .95) c h));
+    background-color: var(--btn-hover-color, var(--hover-color));
   }
 
   &:focus-visible {
@@ -84,9 +85,7 @@
 }
 
 [aria-busy] .btn--loading:disabled {
-  > * {
-    visibility: hidden;
-  }
+  > * { visibility: hidden; }
 
   &::after {
     filter: var(--btn-icon-color, var(--color-filter-text));

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

@@ -6,14 +6,22 @@
 
 .carousel__content {
   display: flex;
-  gap: var(--size-6);
+  gap: var(--size-4);
   inline-size: var(--size-full);
-  overflow: hidden;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
+
+  @supports (-moz-appearance: none) {
+    scroll-behavior: auto;
+  }
 }
 
 .carousel__item {
-  flex: 0 0 var(--carousel-item-size, 100%);
+  --items: var(--carousel-items, 1);
+  --items-gap: calc(100% - 1rem * (var(--items) - 1));
+
+  flex: 0 0 calc(var(--items-gap) / var(--items));
   padding: var(--size-1);
   scroll-snap-stop: always;
   scroll-snap-align: start;

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

@@ -12,7 +12,7 @@
     background-color: rgba(0, 0, 0, .8);
   }
 
-  /* Setup animation */
+  /* Final state of exit animation and setup */
   opacity: 0;
   transform: var(--scale-95);
   transition-behavior: allow-discrete;
@@ -26,24 +26,14 @@
     transition-property: display, overlay, opacity;
   }
 
-  /* Animation end */
-  &[open] {
-    opacity: 1; transform: var(--scale-100);
-  }
-
-  &[open]::backdrop {
-    opacity: 1;
-  }
+  /* Final state of entry animation */
+  &[open] { opacity: 1; transform: var(--scale-100); }
+  &[open]::backdrop { opacity: 1; }
 
-  /* Animation start */
+  /* Initial state of entry animation */
   @starting-style {
-    &[open] {
-      opacity: 0; transform: var(--scale-95);
-    }
-
-    &[open]::backdrop {
-      opacity: 0;
-    }
+    &[open] { opacity: 0; transform: var(--scale-95); }
+    &[open]::backdrop { opacity: 0; }
   }
 
   /* Drawer component on mobile  */

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

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

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

@@ -12,7 +12,7 @@
     background-color: rgba(0, 0, 0, .8);
   }
 
-  /* Setup animation */
+  /* Final state of exit animation and setup */
   transform: var(--sheet-transform);
   transition-behavior: allow-discrete;
   transition-duration: var(--time-500);
@@ -25,24 +25,14 @@
     transition-property: display, overlay, opacity;
   }
 
-  /* Animation end */
-  &[open] {
-    transform: translateX(0);
-  }
-
-  &[open]::backdrop {
-    opacity: 1;
-  }
+  /* Final state of entry animation */
+  &[open] { transform: translateX(0); }
+  &[open]::backdrop { opacity: 1; }
 
-  /* Animation start */
+  /* Initial state of entry animation */
   @starting-style {
-    &[open] {
-      transform: var(--sheet-transform);
-    }
-
-    &[open]::backdrop {
-      opacity: 0;
-    }
+    &[open] { transform: var(--sheet-transform); }
+    &[open]::backdrop { opacity: 0;}
   }
 
   @media (width >= 40rem) {

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

@@ -4,9 +4,9 @@
   border-color: transparent;
   border-radius: var(--rounded-full);
   border-width: var(--border-2);
-  block-size: var(--size-6);
+  block-size: var(--size-5);
   cursor: pointer;
-  inline-size: var(--size-11);
+  inline-size: var(--size-9);
   transition-duration: var(--time-150);
   transition-property: var(--transition-colors);
 
@@ -15,7 +15,7 @@
   }
 
   &:checked::before {
-    margin-inline-start: var(--size-5);
+    margin-inline-start: var(--size-4);
   }
 
   &::before {

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

@@ -3,7 +3,7 @@
     position: absolute; clip: rect(0, 0, 0, 0);
   }
 
-  &:has([type="checkbox"]:checked) {
+  &:has(:checked) {
     --btn-background: var(--color-secondary);
   }
 

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

@@ -25,19 +25,19 @@
   font-size: var(--text-sm);
   line-height: inherit;
 
-  /* Setup animation */
+  /* Final state of exit animation and setup */
   opacity: 0;
   transform: var(--scale-95);
   transition-behavior: allow-discrete;
   transition-duration: var(--time-150);
   transition-property: display, opacity, transform;
 
-  /* Animation end */
+  /* Final state of entry animation */
   .dropdown-active & {
     opacity: 1; transform: var(--scale-100);
   }
 
-  /* Animation start */
+  /* Initial state of entry animation */
   @starting-style {
     .dropdown-active & {
       opacity: 0; transform: var(--scale-95);
@@ -119,6 +119,6 @@
   border-color: var(--color-negative);
 }
 
-[data-controller*="combobox"] {
+[data-controller~="combobox"] {
   clip: rect(0 0 0 0); position: absolute;
 }

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

@@ -4,26 +4,10 @@ export default class extends Controller {
   static targets = [ "content" ]
 
   next() {
-    this.contentTarget.scrollTo({ left: this.#nextPosition, behavior: "smooth" })
+    this.contentTarget.scrollBy(100, 0)
   }
 
   prev() {
-    this.contentTarget.scrollTo({ left: this.#prevPosition, behavior: "smooth" })
-  }
-
-  get #nextPosition() {
-    return this.#scrollLeft + this.#slideSize
-  }
-
-  get #prevPosition() {
-    return this.#scrollLeft - this.#slideSize
-  }
-
-  get #scrollLeft() {
-    return this.contentTarget.scrollLeft
-  }
-
-  get #slideSize() {
-    return this.contentTarget.clientWidth
+    this.contentTarget.scrollBy(-100, 0)
   }
 }

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

@@ -38,13 +38,13 @@ export default class extends Controller {
   }
 
   #reset() {
-    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach((element) => {
+    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(element => {
       element.classList.remove(this.selectedClass)
     })
   }
 
   #selectMatches(value) {
-    this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach((element) => {
+    this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach(element => {
       element.classList.add(this.selectedClass)
     })
   }

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

@@ -4,8 +4,7 @@ import flatpickr from "https://esm.sh/flatpickr@4.6.13?standalone"
 export default class extends Controller {
   static targets = [ "details" ]
   static values  = {
-    type: String,
-    disable: Array,
+    type: String, disable: Array,
     mode: { type: String, default: "single" },
     dateFormat: { type: String, default: "F d, Y" },
     dateTimeFormat: { type: String, default: "F d, Y H:i" }

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

@@ -3,6 +3,10 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "menu" ]
 
+  show() {
+    this.menuTarget.show()
+  }
+
   showModal() {
     this.menuTarget.showModal()
   }

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

@@ -16,9 +16,7 @@ export default class extends Controller {
   #requestOTP() {
     navigator.credentials.get(this.#options).then(otp => {
       this.element.value = otp.code
-    }).catch(error => {
-      console.log(error)
-    })
+    }).catch(error => {})
   }
 
   get #options() {

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

@@ -24,13 +24,21 @@ export default class extends Controller {
   }
 
   hide() {
-    clearTimeout(this.#showTimer); this.menuTarget.hidePopover()
+    this.menuTarget.hidePopover()
+  }
+
+  toggle() {
+    this.menuTarget.togglePopover()
   }
 
   showLater() {
     this.#showTimer = setTimeout(() => this.show(), 700)
   }
 
+  hideClear() {
+    clearTimeout(this.#showTimer); this.hide();
+  }
+
   orient() {
     computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
       this.menuTarget.style.insetInlineStart = `${x}px`

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

@@ -13,7 +13,7 @@ export default class extends Controller {
   }
 
   #update() {
-    this.inputTarget.type      = this.#inputType
+    this.inputTarget.type = this.#inputType
     this.showIconTarget.hidden = this.revealedValue
     this.hideIconTarget.hidden = !this.revealedValue
   }

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

@@ -29,7 +29,7 @@ export default class extends Controller {
     }
   }
 
-  #showCurrentTab(shouldFocus) {
+  #showCurrentTab() {
     this.buttonTargets.forEach((element, index) => {
       element.ariaSelected = index === this.indexValue
       element.tabIndex = index === this.indexValue ? 0 : -1

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

@@ -12,9 +12,7 @@ export default class extends Controller {
   async share() {
     try {
       await navigator.share(await this.#getShareData())
-    } catch(error) {
-      console.warn(error.message)
-    }
+    } catch {}
   }
 
   async #getShareData() {

data/lib/generators/css_zero/install/install_generator.rb

@@ -18,7 +18,7 @@ class CssZero::InstallGenerator < Rails::Generators::Base
   end
 
   def add_basic_components
-    invoke "css_zero:add", %w(layouts input switch button flash alert)
+    invoke "css_zero:add", %w(layouts flash alert input button)
   end
 
   private

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

@@ -12,13 +12,13 @@
   <%% end %>
 
 <% attributes.each do |attribute| -%>
-  <div class="flex flex-col gap-half mbe-4">
+  <div class="flex flex-col items-start gap-half mbe-4">
 <% if attribute.password_digest? -%>
     <%%= form.label :password, class: "text-sm font-medium leading-none" %>
     <%%= form.password_field :password, class: "input" %>
   </div>
 
-  <div class="flex flex-col gap-half mbe-4">
+  <div class="flex flex-col items-start gap-half mbe-4">
     <%%= form.label :password_confirmation, class: "text-sm font-medium leading-none" %>
     <%%= form.password_field :password_confirmation, class: "input" %>
 <% elsif attribute.attachments? -%>
@@ -29,7 +29,7 @@
     <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: "auto", 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: "switch" %>
+    <%%= 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,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.93
+  version: 0.0.95
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-17 00:00:00.000000000 Z
+date: 2025-01-21 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com