css-zero 0.0.45 → 0.0.47

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd059d67d4f761e329571d4e4eefac0325a6cf14224717ed3581a7ffe7acaf0e
-  data.tar.gz: 13afe2beaba626b1925504904160f01ab1c5589eb87d3bbe2baa9009c3e04cc2
+  metadata.gz: e2efe1919888b0e11a440ada88d32d728814c3a96f67e877e87009836a5c9e3a
+  data.tar.gz: eac6e9c80a23b456a92dec265859959fadb0e34298904308714df91bb3220d84
 SHA512:
-  metadata.gz: 5bfb100356389b839542aa74775abce26f05fc0f8816df589fabb91af96892b28fac6fe2179bb8aa11476595ae7457ce0a33b9faef7b91d771151ef2100f581b
-  data.tar.gz: 340f487beff85601804945afe83121df0c2ac1cf42ddd8fa80261a746754f788e8a31f2264b159de654745a7ee56dfa8b89e37175bdcbcdd5d9ca37aa32ae436
+  metadata.gz: 9180e92a3179e523600fe9c2a1090a56fc1625798f9d261262f0d2fe6e998e11b777db777c9a3982d7ca76570bc8d43bc68c48efc6016879462adcd23c300cab
+  data.tar.gz: e05418691df476b525df12b6df0e4a1159947bc45cc21b3d2f7378dfb7767dd235bb20f3d4fdb4dd6c481851ac60b0d2255101b3f09dd01d323bdbd27a9d7acc

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.45"
+  VERSION = "0.0.47"
 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);
 
-  .menu:not(:hover) &: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

@@ -6,19 +6,23 @@ export default class extends Controller {
 
   indexValueChanged() {
     this.#removeTabstops()
-    this.#focusCurrentItem()
   }
 
   prev() {
-    this.indexValue > 0 && this.indexValue--
+    const hasPrevious = this.indexValue > 0
+    hasPrevious && this.indexValue--
+    hasPrevious && this.#focusCurrentItem()
   }
 
   next() {
-    this.indexValue < this.#lastIndex && this.indexValue++
+    const hasNext = this.indexValue < this.#lastIndex
+    hasNext && this.indexValue++
+    hasNext && this.#focusCurrentItem()
   }
 
   reset() {
     this.indexValue = 0
+    this.#focusCurrentItem()
   }
 
   #removeTabstops() {

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

@@ -4,9 +4,8 @@ export default class extends Controller {
   static targets = [ "button", "tab" ]
   static values  = { index: Number }
 
-  indexValueChanged(index, previousIndex) {
+  indexValueChanged() {
     this.#showCurrentTab()
-    this.#focusCurrentButton(previousIndex !== undefined)
   }
 
   select({ target }) {
@@ -14,11 +13,15 @@ export default class extends Controller {
   }
 
   prev() {
-    this.indexValue > 0 && this.indexValue--
+    const hasPrevious = this.indexValue > 0
+    hasPrevious && this.indexValue--
+    hasPrevious && this.#focusCurrentButton()
   }
 
   next() {
-    this.indexValue < this.#lastIndex && this.indexValue++
+    const hasNext = this.indexValue < this.#lastIndex
+    hasNext && this.indexValue++
+    hasNext && this.#focusCurrentButton()
   }
 
   #showCurrentTab() {
@@ -32,8 +35,8 @@ export default class extends Controller {
     })
   }
 
-  #focusCurrentButton(shouldFocus) {
-    shouldFocus && this.buttonTargets[this.indexValue].focus()
+  #focusCurrentButton() {
+    this.buttonTargets[this.indexValue].focus()
   }
 
   get #lastIndex() {

metadata

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