css-zero 0.0.92 → 0.0.94

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c1c919ca22e297fc9aed948e7f9eda8a17d341dd32c8b4df5c70b4bb1823cda
-  data.tar.gz: b3feb5c0d25ae33d70f76cdfded1a64ac65b562784fdaab32412c1b7f043e825
+  metadata.gz: 421e49460a3f5afe3b7ba8f87faa35d1e8a44050f5b0fd8696cd1b175a415d2d
+  data.tar.gz: a6240eac2e50923e843a354fe607d1e02f135a797fae05c5030cdb9f3c961db5
 SHA512:
-  metadata.gz: 1e784e20f4e8cf7878e68400fd3c9eb72cdf1d5314e73f897fd606c28f05b8c9bd5f5d43805125ec246bcfed81c2ddcff108a0b3731c09897b4c621c69c02fb3
-  data.tar.gz: e2326b48f1d6261f90d33688d6b69e0791610e456790fb8ed737508e0c35f683d20e058f0d37bcbc396a95f5d66d4aad69534018ff37785c83b1f82854f76195
+  metadata.gz: a86bd1229145b84313451d9997b887ae0b9c5d60bc143e73b891113d22f3521c26945a410b3a713cf9dc6ac0c109bb13bd50c12183ca28c9417ae44027b25ff8
+  data.tar.gz: fa092a46a4ab911f999c0a115323150752a783e1914a00fe6cdbed53710f5849b4396d632fa2a8dc1a996cb91522a053f3e7a0177e560f72934f6b5550ab0945

data/README.md

@@ -22,39 +22,17 @@ Add the additional components you need. (Optional)
 bin/rails generate css_zero:add --help
 ```
 
-## Usage
-
-```html
-<h1 class="text-xl font-bold mb-4">
-  Write most page content using utility classes.
-</h1>
-
-<div class="custom-component">
-  Create components using CSS variables.
-</div>
+## Components
 
-<div class="card">
-  Optionally, copy pre-built components into your application.
-</div>
-```
+[<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
 
-```css
-.custom-component {
-  background-color: var(--red-500);
-  border-radius: var(--rounded);
-  block-size: var(--size-4);
-}
-```
+## Utility classes and variables
 
 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)
-
 ## 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).
 
 ## Scaffold
 

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.92"
+  VERSION = "0.0.94"
 end

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

@@ -48,7 +48,8 @@
       content: "";
       filter: var(--color-filter-text);
       inline-size: var(--size-4);
-      transition: transform var(--time-200);
+      transition-duration: var(--time-200);
+      transition-property: transform;
     }
   }
 }

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;
   }
 
-  /* In animation */
-  &[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; }
 
-  /* Out animation */
+  /* 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  */
@@ -60,7 +50,7 @@
 }
 
 .dialog__close {
-  inset-block-start: var(--size-4);
-  inset-inline-end: var(--size-4);
+  inset-block-start: var(--size-3);
+  inset-inline-end:  var(--size-3);
   position: absolute;
 }

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

@@ -6,26 +6,22 @@
   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;
 
-  /* In animation */
+  /* Final state of entry animation */
   &:popover-open {
     opacity: 1; transform: var(--scale-100);
   }
 
-  /* Out animation */
+  /* Initial state of entry animation */
   @starting-style {
     &:popover-open {
       opacity: 0; transform: var(--scale-95);
     }
   }
 }
-
-.popover--tooltip {
-  font-size: var(--text-sm); padding: var(--size-1_5) var(--size-3);
-}

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;
   }
 
-  /* In animation */
-  &[open] {
-    transform: translateX(0);
-  }
-
-  &[open]::backdrop {
-    opacity: 1;
-  }
+  /* Final state of entry animation */
+  &[open] { transform: translateX(0); }
+  &[open]::backdrop { opacity: 1; }
 
-  /* Out animation */
+  /* 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) {
@@ -66,7 +56,7 @@
 }
 
 .sheet__close {
-  inset-block-start: var(--size-4);
-  inset-inline-end: var(--size-4);
+  inset-block-start: var(--size-3);
+  inset-inline-end:  var(--size-3);
   position: absolute;
 }

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 {
@@ -25,7 +25,8 @@
     border-radius: var(--rounded-full);
     content: "";
     display: block;
-    transition: margin var(--time-150);
+    transition-duration: var(--time-150);
+    transition-property: margin;
   }
 
   &:focus-visible {

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

@@ -1,7 +1,13 @@
 :where(.table) {
+  caption-side: bottom;
   font-size: var(--text-sm);
   inline-size: var(--size-full);
 
+  caption {
+    color: var(--color-text-subtle);
+    margin-block-start: var(--size-4);
+  }
+
   thead {
     color: var(--color-text-subtle);
   }

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,20 +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;
 
-  /* In animation */
+  /* Final state of entry animation */
   .dropdown-active & {
-    opacity: 1;
-    transform: var(--scale-100);
+    opacity: 1; transform: var(--scale-100);
   }
 
-  /* Out animation */
+  /* Initial state of entry animation */
   @starting-style {
     .dropdown-active & {
       opacity: 0; transform: var(--scale-95);
@@ -120,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/assets/stylesheets/ztrix.css

@@ -55,7 +55,7 @@ trix-toolbar {
     color: var(--color-text-reversed);
   }
 
-  @media (max-width: 768px) {
+  @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,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/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

@@ -5,6 +5,8 @@ export default class extends Controller {
   static targets = [ "button", "menu" ]
   static values  = { placement: { type: String, default: "bottom" } }
 
+  #showTimer = null
+
   initialize() {
     this.orient = this.orient.bind(this)
   }
@@ -21,12 +23,12 @@ export default class extends Controller {
     this.menuTarget.showPopover()
   }
 
-  showLater() {
-    setTimeout(() => this.show(), 700)
+  hide() {
+    clearTimeout(this.#showTimer); this.menuTarget.hidePopover()
   }
 
-  hide() {
-    this.menuTarget.hidePopover()
+  showLater() {
+    this.#showTimer = setTimeout(() => this.show(), 700)
   }
 
   orient() {

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.92
+  version: 0.0.94
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-16 00:00:00.000000000 Z
+date: 2025-01-20 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com