css-zero 0.0.46 → 0.0.48

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7ffebd97b488ac4e393dc73e07f275f26eb725047c9eaa38ae5d8e4b2b1f269
-  data.tar.gz: dbf4888048ff67654e774494e939769966039ebbb9b3d81a1d528f1e9300c710
+  metadata.gz: 2c2fa4f9172129b3e90a0a4cdcb7870f5467d8cbee3fd8d9d621eebd65212912
+  data.tar.gz: 0ddf2089702a14920122e9ce9d421dc8017e6a2c3fe9aa42284b83700b83a357
 SHA512:
-  metadata.gz: fdd78709eb65d56e40ba410ef5696658498cf0bd8038472b491c671bacf64d5566ad673b1489946b87f3aca0276f1dc2acfab6166db1227bb771f8d7cca3ed26
-  data.tar.gz: 28b8fafdafc09e8ec66815b0a1c5461bca0d5209d35528d3ede1b0fdfc7818c518a0a73928c6841da64d60711f9b42e8152380ebab5314eac5c98b50ab9edcc4
+  metadata.gz: a98928f94335f61b029d53858d524919c940f14012bdaa9af96b22c924f03d6bff5b79c1aa774caebb4d7b494de2a9392f4e6315dc7445c9734244f09e88313f
+  data.tar.gz: d682b0a2a721c13c04e250ca332eaf1bd531b173b96552b60fd1f93f8cb94813a139b4926fdb718c423412d9151be3b18242235d0e51cc21886411ad28ab2a93

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.46"
+  VERSION = "0.0.48"
 end

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

@@ -69,7 +69,7 @@
 .btn--plain {
   --btn-background: transparent;
   --btn-border-color: transparent;
-  --btn-hover-lightness: 100%;
+  --btn-hover-lightness: l;
   --btn-padding: 0;
 }
 

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

@@ -42,10 +42,15 @@
 .command__item {
   --btn-border-color: transparent;
   --btn-font-weight: var(--font-normal);
+  --btn-hover-lightness: l;
   --btn-justify-content: start;
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
 
+  &:hover {
+    --btn-background: var(--color-secondary);
+  }
+
   &:focus-visible {
     --btn-background: var(--color-secondary);
   }
@@ -57,8 +62,11 @@
   margin-inline-start: auto;
 }
 
+.command__list--filtering:not(:has(.selected)) {
+  .command__empty { display: flex; }
+}
+
 .command__list--filtering {
-  &:not(:has(.selected)) > .command__empty { display: flex; }
   .command__group { display: none; }
   .command__group:has(.selected) { display: flex; }
   .command__item { display: none; }

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

@@ -54,6 +54,10 @@
     border: 0; inline-size: 100%; outline: 0;
   }
 
+  img:not([class]) {
+    filter: var(--input-icon-color, var(--color-filter-text));
+  }
+
   &:focus-within {
     outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
     outline-offset: var(--border-2);
@@ -63,7 +67,7 @@
 /* Checkbox, radio, and range */
 .checkbox, .radio {
   accent-color: var(--color-primary);
-  block-size: 18px; inline-size: 18px;
+  block-size: 16px; inline-size: 18px;
 }
 
 .range {

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

@@ -23,11 +23,16 @@
 .menu__item {
   --btn-border-color: transparent;
   --btn-font-weight: var(--font-normal);
+  --btn-hover-lightness: l;
   --btn-justify-content: start;
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
 
-  &:focus {
+  &:hover {
+    --btn-background: var(--color-secondary);
+  }
+
+  &:focus-visible {
     --btn-background: var(--color-secondary);
   }
 }

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

@@ -11,7 +11,7 @@
 .btn--tab {
   --btn-background: transparent;
   --btn-border-color: transparent;
-  --btn-hover-lightness: 100%;
+  --btn-hover-lightness: l;
   --btn-inline-size: var(--size-full);
 
   &[aria-selected=true] {

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

@@ -2,11 +2,10 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "item" ]
-  static values  = { index: { type: Number, default: -1 } }
+  static values  = { index: Number }
 
-  indexValueChanged(index) {
-    this.#removeTabstops()
-    this.#focusCurrentItem(index !== -1)
+  indexValueChanged(index, previousIndex) {
+    this.#updateTabstops(previousIndex !== undefined)
   }
 
   prev() {
@@ -14,23 +13,20 @@ export default class extends Controller {
   }
 
   next() {
-    this.indexValue < this.#lastIndex && this.indexValue++
+    this.indexValue < this.itemTargets.length -1 && this.indexValue++
   }
 
   reset() {
-    this.indexValue = -1
+    this.indexValue = 0
   }
 
-  #removeTabstops() {
-    this.itemTargets.forEach(item => item.tabIndex = -1)
-  }
-
-  #focusCurrentItem(shouldFocus) {
-    if (shouldFocus) this.itemTargets[this.indexValue].tabIndex = 0
-    if (shouldFocus) this.itemTargets[this.indexValue].focus()
-  }
+  #updateTabstops(shouldFocus) {
+    this.itemTargets.forEach((element, index) => {
+      element.tabIndex = index == this.indexValue ? 0 : -1
+    })
 
-  get #lastIndex() {
-    return this.itemTargets.length -1
+    if (shouldFocus) {
+      this.itemTargets[this.indexValue].focus()
+    }
   }
 }

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

@@ -6,10 +6,7 @@ export default class extends Controller {
   static targets = [ "button", "menu" ]
   static classes = [ "flip" ]
 
-  #closeTimer
-
   show() {
-    this.#resetTimer()
     this.menuTarget.show()
     this.#updateExpanded()
     this.#orient()
@@ -20,10 +17,6 @@ export default class extends Controller {
     this.#updateExpanded()
   }
 
-  closeLater() {
-    this.#closeTimer = setTimeout(() => this.close(), 300)
-  }
-
   toggle() {
     this.menuTarget.open ? this.close() : this.show()
   }
@@ -32,10 +25,6 @@ export default class extends Controller {
     !this.element.contains(target) && this.close()
   }
 
-  #resetTimer() {
-    clearTimeout(this.#closeTimer)
-  }
-
   #orient() {
     this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD)
   }

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

@@ -5,8 +5,7 @@ export default class extends Controller {
   static values  = { index: Number }
 
   indexValueChanged(index, previousIndex) {
-    this.#showCurrentTab()
-    this.#focusCurrentButton(previousIndex !== undefined)
+    this.#showCurrentTab(previousIndex !== undefined)
   }
 
   select({ target }) {
@@ -18,25 +17,21 @@ export default class extends Controller {
   }
 
   next() {
-    this.indexValue < this.#lastIndex && this.indexValue++
+    this.indexValue < this.tabTargets.length -1 && this.indexValue++
   }
 
-  #showCurrentTab() {
-    this.buttonTargets.forEach((button, index) => {
-      button.ariaSelected = index == this.indexValue
-      button.tabIndex     = index == this.indexValue ? 0 : -1
+  #showCurrentTab(shouldFocus) {
+    this.buttonTargets.forEach((element, index) => {
+      element.ariaSelected = index == this.indexValue
+      element.tabIndex     = index == this.indexValue ? 0 : -1
     })
 
-    this.tabTargets.forEach((tab, index) => {
-      tab.hidden = index !== this.indexValue
+    this.tabTargets.forEach((element, index) => {
+      element.hidden = index !== this.indexValue
     })
-  }
-
-  #focusCurrentButton(shouldFocus) {
-    shouldFocus && this.buttonTargets[this.indexValue].focus()
-  }
 
-  get #lastIndex() {
-    return this.tabTargets.length -1
+    if (shouldFocus) {
+      this.buttonTargets[this.indexValue].focus()
+    }
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.46
+  version: 0.0.48
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-14 00:00:00.000000000 Z
+date: 2024-10-15 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com