css-zero 0.0.39 → 0.0.41

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c1bd36382642c26e7ccfb6659948ab080b708909dd80e8168b3e7149dc2f27ab
-  data.tar.gz: cb7f89e2c79deb6b134accafbcc012928045d6f155a331cd7a11abdba45bc771
+  metadata.gz: 1a6f169a735b32dc7a7d9c1e2f4796e4dbbfd7198f0aa3fcee5540e45d91f33e
+  data.tar.gz: b3b10a68322044a44c154275e2680356b2a633ed87de0e8860387c0333df30f7
 SHA512:
-  metadata.gz: c7b281b3c1fd86decc8cd6df0a14859c6ee2565625f933a14e0f18d9a733d8cb89a75303e7500450af83eda10f82ea9aa744c9d7284c252b3488412aabb92797
-  data.tar.gz: 73ce63baeb7fef096081772831efcdff2319262c5f59ab3bcf8ca04d8951811c8b1b8e5738f3c8e41f717186ed218cc52ab1491b231427a8a16ca58d42c1b0e0
+  metadata.gz: '08bd1158769b2a955b7a3c4508567e309ece4cb923b259b87a2963546c2f844603280e6cb16f772440b14a05de2d68ea1885e76833cac5391a401a852e341858'
+  data.tar.gz: ae28b4bab6aa03bccaa82693628e54094abe8dab787ed4a82814382a088e1fc505f922c182e0fbadc31dc5dee77be1b3c7b68e0f23d02b58e22134a966554612

data/app/assets/stylesheets/zutilities.css

@@ -319,7 +319,7 @@
 .pie-10 { padding-inline-end: var(--size-10); }
 
 /****************************************************************
-* Hiding/Showing based on media query size
+* Hiding/Showing
 *****************************************************************/
 .show\@sm, .show\@md, .show\@lg { display: none; }
 
@@ -331,6 +331,11 @@
 .hide\@md { @media (width >= 48rem) { display: none; } }
 .hide\@lg { @media (width >= 64rem) { display: none; } }
 
+.hide\@pwa { @media (display-mode: standalone) { display: none; } }
+.hide\@browser { @media (display-mode: browser) { display: none; } }
+
+.hide\@print { @media print { display: none; } }
+
 /****************************************************************
 * Accessibility
 *****************************************************************/

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.39"
+  VERSION = "0.0.41"
 end

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

@@ -35,14 +35,13 @@ flash:
   - app/javascript/controllers/element_removal_controller.js
 fullscreen:
   - app/javascript/controllers/fullscreen_controller.js
-  - app/assets/images/maximize.svg
 hotkey:
   - app/javascript/controllers/hotkey_controller.js
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg
-  - app/javascript/controllers/check_all_controller.js
 input_concerns:
+  - app/javascript/controllers/autoselect_controller.js
   - app/javascript/controllers/copyable_input_controller.js
   - app/assets/images/copy.svg
   - app/assets/images/check.svg
@@ -51,7 +50,6 @@ input_concerns:
   - app/javascript/controllers/revealable_input_controller.js
   - app/assets/images/eye.svg
   - app/assets/images/eye-off.svg
-  - app/javascript/controllers/autoselect_controller.js
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/images/menu.svg

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

@@ -9,6 +9,16 @@
   inline-size: var(--size);
   overflow: hidden;
 
+  &:is(.btn) {
+    --btn-padding: 0;
+    --btn-icon-color: none;
+    --btn-radius: var(--radius);
+  }
+
+  &:is(.btn):hover {
+    filter: var(--brightness-90);
+  }
+
   img {
     aspect-ratio: var(--aspect-square);
     block-size: var(--size-full);
@@ -28,9 +38,3 @@
     user-select: none;
   }
 }
-
-.btn--avatar {
-  --btn-padding: 0;
-  --btn-icon-color: none;
-  --btn-radius: var(--radius);
-}

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

@@ -4,7 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   font-size: var(--text-sm);
-  gap: var(--size-2);
+  gap: var(--size-1);
   overflow-wrap: break-word;
 
   img {
@@ -15,7 +15,7 @@
     color: var(--color-text);
   }
 
-  @media (width < 40rem) {
-    gap: var(--size-1);
+  @media (width >= 40rem) {
+    gap: var(--size-2);
   }
 }

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

@@ -10,9 +10,9 @@
   font-weight: var(--btn-font-weight, var(--font-medium));
   gap: var(--size-2);
   justify-content: var(--btn-justify-content, center);
-  white-space: nowrap;
   padding: var(--btn-padding, 0.5rem 1rem);
   text-align: center;
+  white-space: nowrap;
 
   img:not([class]) {
     filter: var(--btn-icon-color, var(--color-filter-text));

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

@@ -1,13 +1,14 @@
 .carousel__content {
   display: flex;
   gap: var(--size-6);
+  inline-size: var(--size-full);
   overflow: hidden;
   padding: var(--size-1);
   scroll-snap-type: x mandatory;
 
   > * {
-    flex: 0 0 100%;
+    flex: 0 0 var(--carousel-item-size, 100%);
     scroll-snap-stop: always;
-    scroll-snap-align: center;
+    scroll-snap-align: start;
   }
 }

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

@@ -10,9 +10,11 @@
   --input-background: transparent;
   --input-border-color: transparent;
   --input-outline-size: 0;
+  --input-padding: 0.75rem 1rem;
 }
 
 .command__list {
+  border-block-start-width: var(--border);
   max-block-size: 300px;
   overflow-y: auto;
 }
@@ -30,6 +32,13 @@
   padding: var(--size-1_5) var(--size-2);
 }
 
+.command__empty {
+  display: none;
+  font-size: var(--text-sm);
+  justify-content: center;
+  padding-block: var(--size-6);
+}
+
 .command__item {
   --btn-border-color: transparent;
   --btn-font-weight: var(--font-normal);
@@ -51,6 +60,11 @@
 .command__list--filtering {
   .command__group { display: none; }
   .command__group:has(.selected) { display: flex; }
+
   .command__item { display: none; }
   .command__item:is(.selected) { display: flex; }
+
+  &:not(:has(.command__item.selected)) {
+    .command__empty { display: flex; }
+  }
 }

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

@@ -46,6 +46,7 @@
     }
   }
 
+  /* Drawer component on mobile  */
   @media (width < 40rem) {
     border-end-end-radius: 0;
     border-end-start-radius: 0;

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

@@ -1,13 +1,25 @@
 .flash {
+  align-items: center;
   animation: appear-then-fade 4s 300ms both;
   background-color: var(--color-text);
   border-radius: var(--rounded-full);
   color: var(--color-text-reversed);
-  margin-block-start: var(--size-4);
+  display: flex;
+  gap: var(--size-2);
+  line-height: var(--leading-none);
   margin-inline: auto;
-  padding: var(--size-2) var(--size-4);
+  min-block-size: var(--size-11);
+  padding: var(--size-1) var(--size-4);
   position: fixed;
   text-align: center;
+
+  @media (width >= 40rem) {
+    font-size: var(--text-lg);
+  }
+
+  @media (width >= 64rem) {
+    font-size: var(--text-xl);
+  }
 }
 
 @keyframes appear-then-fade {

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

@@ -4,44 +4,76 @@
   grid-template-columns: var(--sidebar-width, 0) 1fr;
   grid-template-rows: auto 1fr;
   min-block-size: 100dvh;
+  max-block-size: 100dvh;
 
   @media (width >= 48rem) {
+    --sidebar-border-width: var(--border);
+    --sidebar-padding: var(--size-2);
     --sidebar-width: 220px;
   }
 
   @media (width >= 64rem) {
+    --sidebar-border-width: var(--border);
+    --sidebar-padding: var(--size-4);
     --sidebar-width: 280px;
   }
 }
 
-.pancake-stack {
+.header-layout {
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "header" "main";
+  grid-template-rows: auto 1fr;
   min-block-size: 100dvh;
 }
 
-.super-centered {
+.centered-layout {
   display: grid;
   place-items: center;
   min-block-size: 100dvh;
 }
 
 .container {
+  inline-size: 100%;
   margin-inline: auto;
   max-inline-size: var(--container-width, 64rem);
-  min-block-size: 100dvh;
 }
 
-/* Grid areas definition */
-
 #header {
+  align-items: center;
+  background-color: var(--color-bg);
+  border-block-end-width: var(--border);
+  block-size: var(--size-16);
+  display: flex;
+  gap: var(--size-4);
   grid-area: header;
+  inset-block-start: 0;
+  padding-inline: var(--size-4);
+  position: sticky;
+
+  @media (width >= 64rem) {
+    padding-inline: var(--size-6);
+  }
 }
 
 #sidebar {
+  border-inline-end-width: var(--sidebar-border-width, 0);
+  display: flex;
+  flex-direction: column;
   grid-area: sidebar;
+  gap: var(--size-2);
+  overflow-x: hidden;
+  padding: var(--sidebar-padding, 0);
 }
 
 #main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4);
   grid-area: main;
+  overflow-y: auto;
+  padding: var(--size-4);
+
+  @media (width >= 64rem) {
+    gap: var(--size-6); padding: var(--size-6);
+  }
 }

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

@@ -7,7 +7,6 @@
   inline-size: var(--size-3-4);
   margin-inline: var(--sheet-margin);
   max-block-size: unset;
-  max-inline-size: var(--max-i-sm);
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);
@@ -46,8 +45,8 @@
     }
   }
 
-  @media (width < 40rem) {
-    max-inline-size: none;
+  @media (width >= 40rem) {
+    max-inline-size: var(--max-i-sm);
   }
 }
 

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

@@ -32,7 +32,7 @@ export default class extends Controller {
   }
 
   #update() {
-    this.copyIconTarget.hidden    = this.copiedValue
+    this.copyIconTarget.hidden = this.copiedValue
     this.successIconTarget.hidden = !this.copiedValue
   }
 }

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

@@ -20,10 +20,6 @@ export default class extends Controller {
     if (this.indexValue < this.#lastIndex) this.indexValue++
   }
 
-  get #lastIndex() {
-    return this.tabTargets.length -1
-  }
-
   #showSelectedTab() {
     this.buttonTargets.forEach((element, index) => {
       element.ariaSelected = index === this.indexValue
@@ -33,4 +29,8 @@ export default class extends Controller {
       element.hidden = index !== this.indexValue
     })
   }
+
+  get #lastIndex() {
+    return this.tabTargets.length -1
+  }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.39
+  version: 0.0.41
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-30 00:00:00.000000000 Z
+date: 2024-10-03 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -50,7 +50,6 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/eye-off.svg
 - lib/generators/css_zero/add/templates/app/assets/images/eye.svg
 - lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
-- lib/generators/css_zero/add/templates/app/assets/images/maximize.svg
 - lib/generators/css_zero/add/templates/app/assets/images/menu.svg
 - lib/generators/css_zero/add/templates/app/assets/images/minus.svg
 - lib/generators/css_zero/add/templates/app/assets/images/search.svg
@@ -81,7 +80,6 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
 - lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js

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

@@ -1 +0,0 @@
-<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-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>

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

@@ -1,9 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = [ "dependent" ]
-
-  check({ target }) {
-    this.dependentTargets.forEach(element => element.checked = target.checked)
-  }
-}