css-zero 0.0.31 → 0.0.33

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d871257d5eb95aed27c17cdf296d2c950c773bca21f1f76630a0a271856bec9
-  data.tar.gz: 73529a331bcfb94f4f1bb97ac0da3fd274c6e9d1eb38aea81eee5e7161214456
+  metadata.gz: b786d5d38b248a7289f4dcce1246ddcdffebc21deb4327dc8ac575c1466ba5b9
+  data.tar.gz: 4364538047fdcd11f323687ed346662b334651404bdabf2c125d822c3f96cc3f
 SHA512:
-  metadata.gz: acae42abeba3c9688e42acb1cd164c0408ab904133cdfc5046b25e5e4d1b04fb024fa952537fa1ca0795b8bf249ab40b40abd1ec84149c1c31c655fb20545dc2
-  data.tar.gz: 6a57d0f885bc79e2e0b6ab5f8ffda9fcd58b2b61ece7c21bdc3751e7a3b23ef78a33ce799a9499198b87df604f536fc0a1ff819491a14c895eef47632e403b12
+  metadata.gz: a9efa1df9e4643f47ef0dd2cf9d334a02ddfcbfcf1979819acdada8068aefe81c22347180d392151b6d8699ca6022253763cb7438bba59c20fec123f5d7ff0d8
+  data.tar.gz: fd75ca1525671ceb6ffcb24c3fd4291e0f044366999c2958c3fb33c84973fff0ca32e35c509cfce4b7e5ead3218706787fc29763096a1b30ad8c438d281a76ed

data/app/helpers/tabs_helper.rb

@@ -1,5 +1,9 @@
 module TabsHelper
-  def tab_button(content = nil, value:, **, &)
-    tag.button(content, data: { tabs_target: "button", action: "tabs#select", value: }, **, &)
+  def tab_button(content = nil, id:, value:, **, &)
+    tag.button(content, id:, class: "btn", role: "tab", aria: { controls: value }, data: { tabs_target: "button", action: "tabs#select", value: }, **, &)
+  end
+
+  def tab_panel(id, labelled_by:, **, &)
+    tag.div(id:, role: "tabpanel", aria: { labelledby: labelled_by }, data: { tabs_target: "tab" }, **, &)
   end
 end

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.31"
+  VERSION = "0.0.33"
 end

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

@@ -2,7 +2,7 @@
   background-color: var(--color-bg);
   border-inline-start-width: var(--border);
   box-shadow: var(--shadow-lg);
-  block-size: 100%;
+  block-size: var(--size-full);
   color: var(--color-text);
   inline-size: var(--size-3-4);
   margin-inline: var(--sheet-margin);

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

@@ -19,7 +19,7 @@
     inline-size: var(--size-full);
   }
 
-  button[data-selected=true] {
+  button[aria-selected=true] {
     background-color: var(--color-bg);
     color: var(--color-text);
   }

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

@@ -2,24 +2,24 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "button", "tab" ]
-  static values = { selected: String }
+  static values  = { selected: String }
 
   initialize() {
     this.#showSelectedTab()
   }
 
-  select(event) {
-    this.selectedValue = event.target.dataset.value
+  select({ target }) {
+    this.selectedValue = target.dataset.value
     this.#showSelectedTab()
   }
 
   #showSelectedTab() {
     this.buttonTargets.forEach(element => {
-      element.dataset.selected = element.dataset.value === this.selectedValue
+      element.ariaSelected = element.dataset.value === this.selectedValue
     })
 
     this.tabTargets.forEach(element => {
-      element.hidden = element.dataset.value !== this.selectedValue
+      element.hidden = element.id !== this.selectedValue
     })
   }
 }

metadata

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