css-zero 0.0.43 → 0.0.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ced95bc29890a4882d0c31a40d2b109ac5c118f6fce4e7663e48d710b8d54a50
-  data.tar.gz: 62f21e06f144267737c578db2942dddbfd46d36f30a4c3e78b85ceea550408f6
+  metadata.gz: fd059d67d4f761e329571d4e4eefac0325a6cf14224717ed3581a7ffe7acaf0e
+  data.tar.gz: 13afe2beaba626b1925504904160f01ab1c5589eb87d3bbe2baa9009c3e04cc2
 SHA512:
-  metadata.gz: 1e2c45036d2d68f17ac5a064cb7c84acb9d6870e375c35afd7c03dbf9c6b8e4c0931db0ba9ce6d77e2ef699f199cc854a589f856033f419f183909da22c1b4ca
-  data.tar.gz: f33fc4eb0c24ab0fca8c8ac37155f0378c93cb11e0ad34c748cde9ee94204cf3a7f218d245a783126d8da412b852306c1b5905d910be924fee33daa135c3b51f
+  metadata.gz: 5bfb100356389b839542aa74775abce26f05fc0f8816df589fabb91af96892b28fac6fe2179bb8aa11476595ae7457ce0a33b9faef7b91d771151ef2100f581b
+  data.tar.gz: 340f487beff85601804945afe83121df0c2ac1cf42ddd8fa80261a746754f788e8a31f2264b159de654745a7ee56dfa8b89e37175bdcbcdd5d9ca37aa32ae436

data/README.md

@@ -19,7 +19,8 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel check_all command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+bin/rails generate css_zero:add --help
+bin/rails generate css_zero:add layouts flash button input switch table ...
 ```
 
 ### Requirements
@@ -89,7 +90,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 ## Components
 
-[<img src="https://github.com/user-attachments/assets/989b0ddd-064a-4ac6-8aee-f9eaaf07ff38">](https://css-zero-showcase.onrender.com/lookbook)
+[<img src="https://github.com/user-attachments/assets/989b0ddd-064a-4ac6-8aee-f9eaaf07ff38">](https://csszero.lazaronixon.com)
 
 More components soon...
 

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.43"
+  VERSION = "0.0.45"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert avatar badge breadcrumb button card carousel check_call command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+  accordion alert avatar badge breadcrumb button card carousel check_all command collapsible dialog dropdown flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -32,6 +32,11 @@ dialog:
   - app/assets/stylesheets/dialog.css
   - app/javascript/controllers/dialog_controller.js
   - app/assets/images/x.svg
+dropdown:
+  - app/assets/stylesheets/popover.css
+  - app/javascript/controllers/popover_controller.js
+  - app/assets/stylesheets/menu.css
+  - app/javascript/controllers/menu_controller.js
 flash:
   - app/assets/stylesheets/flash.css
   - app/javascript/controllers/element_removal_controller.js
@@ -68,6 +73,9 @@ pagination:
   - app/assets/images/chevron-right.svg
   - app/assets/images/chevron-left.svg
   - app/assets/images/ellipsis.svg
+popover:
+  - app/assets/stylesheets/popover.css
+  - app/javascript/controllers/popover_controller.js
 progress:
   - app/assets/stylesheets/progress.css
 prose:

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

@@ -1,12 +1,12 @@
 .dialog {
   background-color: var(--color-bg);
-  border-width: var(--border);
   border-radius: var(--rounded-lg);
+  border-width: var(--border);
   box-shadow: var(--shadow-lg);
   color: var(--color-text);
   inline-size: var(--size-full);
   margin: auto;
-  max-inline-size: var(--dialog-width, var(--max-i-lg));
+  max-inline-size: var(--max-i-lg);
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);

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

@@ -6,14 +6,12 @@
   color: var(--color-text-reversed);
   display: flex;
   gap: var(--size-2);
-  inset: 0;
   justify-content: center;
   line-height: var(--leading-none);
   margin-block-start: var(--flash-position, 0);
   margin-inline: auto;
   min-block-size: var(--size-11);
   padding: var(--size-1) var(--size-4);
-  position: fixed;
   text-align: center;
 
   @media (width >= 40rem) {
@@ -25,7 +23,17 @@
   }
 }
 
+.flash--extended {
+  animation-name: appear-then-fade-extended;
+  animation-duration: 12s;
+}
+
 @keyframes appear-then-fade {
   0%, 100% { opacity: 0; }
   5%, 60%  { opacity: 1; }
 }
+
+@keyframes appear-then-fade-extended {
+  0%, 100% { opacity: 0; }
+  2%, 90% { opacity: 1; }
+}

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

@@ -63,7 +63,7 @@
 /* Checkbox, radio, and range */
 .checkbox, .radio {
   accent-color: var(--color-primary);
-  transform: scale(1.15);
+  block-size: 18px; inline-size: 18px;
 }
 
 .range {

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

@@ -0,0 +1,39 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-1);
+  gap: var(--size-1);
+}
+
+.menu__header {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  padding: var(--size-1_5) var(--size-2);
+}
+
+.menu__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu__separator {
+  margin-inline: -0.25rem;
+}
+
+.menu__item {
+  --btn-border-color: transparent;
+  --btn-font-weight: var(--font-normal);
+  --btn-justify-content: start;
+  --btn-outline-size: 0;
+  --btn-padding: var(--size-1_5) var(--size-2);
+
+  .menu:not(:hover) &:focus {
+    --btn-background: var(--color-secondary);
+  }
+}
+
+.menu__item-key {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  margin-inline-start: auto;
+}

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

@@ -0,0 +1,41 @@
+.popover {
+  background-color: var(--color-bg);
+  border-radius: var(--rounded-md);
+  border-width: var(--border);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text);
+  margin-block: var(--size-1);
+  inline-size: var(--popover-size, max-content);
+  inset-inline-start: var(--popover-position, 0);
+
+  /* Setup animation */
+  opacity: 0;
+  transform: var(--scale-95);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-150);
+  transition-property: display, overlay, opacity, transform;
+
+  /* In animation */
+  &[open] {
+    opacity: 1; transform: var(--scale-100);
+  }
+
+  /* Out animation */
+  @starting-style {
+    &[open] {
+      opacity: 0; transform: var(--scale-95);
+    }
+  }
+}
+
+.popover--flip {
+  inset-block-end: 100%;
+}
+
+.popover--start {
+  --popover-position: 0;
+}
+
+.popover--end {
+  --popover-position: auto;
+}

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

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    if (this.autoselect) this.element.select()
+    this.autoselect && this.element.select()
   }
 
   get autoselect() {

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

@@ -3,10 +3,6 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "menu" ]
 
-  show() {
-    this.menuTarget.show()
-  }
-
   showModal() {
     this.menuTarget.showModal()
   }
@@ -16,6 +12,6 @@ export default class extends Controller {
   }
 
   closeOnClickOutside({ target }) {
-    if (target.nodeName === "DIALOG") this.close()
+    target.nodeName === "DIALOG" && this.close()
   }
 }

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

@@ -9,23 +9,21 @@ export default class extends Controller {
     this.filter = debounce(this.filter.bind(this), 300)
   }
 
-  filter(event) {
+  filter({ target }) {
     this.#reset()
 
-    if (event.target.value != "") {
-      this.#selectMatches(event.target.value)
+    if (target.value != "") {
+      this.#selectMatches(target.value)
       this.#activate()
     } else {
       this.#deactivate()
     }
   }
 
-  #activate() {
-    this.listTarget.classList.add(this.activeClass)
-  }
-
-  #deactivate() {
-    this.listTarget.classList.remove(this.activeClass)
+  #reset() {
+    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach((element) => {
+      element.classList.remove(this.selectedClass)
+    })
   }
 
   #selectMatches(value) {
@@ -34,9 +32,11 @@ export default class extends Controller {
     })
   }
 
-  #reset() {
-    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach((element) => {
-      element.classList.remove(this.selectedClass)
-    })
+  #activate() {
+    this.listTarget.classList.add(this.activeClass)
+  }
+
+  #deactivate() {
+    this.listTarget.classList.remove(this.activeClass)
   }
 }

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

@@ -4,7 +4,7 @@ export default class extends Controller {
   static targets = [ "button" ]
 
   connect() {
-    if (this.hasButtonTarget) this.#hideButtonIfNotSupported()
+    this.hasButtonTarget && this.#hideButtonIfNotSupported()
   }
 
   toggle() {

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

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   click(event) {
-    if (this.#isClickable && !this.#shouldIgnore(event)) this.element.click()
+    this.#isClickable && !this.#shouldIgnore(event) && this.element.click()
   }
 
   #shouldIgnore(event) {

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

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "item" ]
+  static values  = { index: Number }
+
+  indexValueChanged() {
+    this.#removeTabstops()
+    this.#focusCurrentItem()
+  }
+
+  prev() {
+    this.indexValue > 0 && this.indexValue--
+  }
+
+  next() {
+    this.indexValue < this.#lastIndex && this.indexValue++
+  }
+
+  reset() {
+    this.indexValue = 0
+  }
+
+  #removeTabstops() {
+    this.itemTargets.forEach(item => item.tabIndex = -1)
+  }
+
+  #focusCurrentItem() {
+    this.itemTargets[this.indexValue].tabIndex = 0
+    this.itemTargets[this.indexValue].focus()
+  }
+
+  get #lastIndex() {
+    return this.itemTargets.length -1
+  }
+}

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

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+
+const BOTTOM_THRESHOLD = 0
+
+export default class extends Controller {
+  static targets = [ "button", "menu" ]
+  static classes = [ "flip" ]
+
+  #closeTimer
+
+  show() {
+    this.#resetTimer()
+    this.menuTarget.show()
+    this.#updateExpanded()
+    this.#orient()
+  }
+
+  close() {
+    this.menuTarget.close()
+    this.#updateExpanded()
+  }
+
+  closeLater() {
+    this.#closeTimer = setTimeout(() => this.close(), 300)
+  }
+
+  toggle() {
+    this.menuTarget.open ? this.close() : this.show()
+  }
+
+  closeOnClickOutside({ target }) {
+    !this.element.contains(target) && this.close()
+  }
+
+  #resetTimer() {
+    clearTimeout(this.#closeTimer)
+  }
+
+  #orient() {
+    this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD)
+  }
+
+  #updateExpanded() {
+    this.buttonTarget.ariaExpanded = this.menuTarget.open
+  }
+
+  get #distanceToBottom() {
+    return window.innerHeight - this.#boundingClientRect.bottom
+  }
+
+  get #boundingClientRect() {
+    return this.menuTarget.getBoundingClientRect()
+  }
+}

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

@@ -4,32 +4,38 @@ export default class extends Controller {
   static targets = [ "button", "tab" ]
   static values  = { index: Number }
 
-  indexValueChanged() {
-    this.#showSelectedTab()
+  indexValueChanged(index, previousIndex) {
+    this.#showCurrentTab()
+    this.#focusCurrentButton(previousIndex !== undefined)
   }
 
   select({ target }) {
-    this.indexValue = target.dataset.index
+    this.indexValue = this.buttonTargets.indexOf(target)
   }
 
   prev() {
-    if (this.indexValue > 0) this.indexValue--
+    this.indexValue > 0 && this.indexValue--
   }
 
   next() {
-    if (this.indexValue < this.#lastIndex) this.indexValue++
+    this.indexValue < this.#lastIndex && this.indexValue++
   }
 
-  #showSelectedTab() {
-    this.buttonTargets.forEach((element, index) => {
-      element.ariaSelected = index === this.indexValue
+  #showCurrentTab() {
+    this.buttonTargets.forEach((button, index) => {
+      button.ariaSelected = index == this.indexValue
+      button.tabIndex     = index == this.indexValue ? 0 : -1
     })
 
-    this.tabTargets.forEach((element, index) => {
-      element.hidden = index !== this.indexValue
+    this.tabTargets.forEach((tab, index) => {
+      tab.hidden = index !== this.indexValue
     })
   }
 
+  #focusCurrentButton(shouldFocus) {
+    shouldFocus && this.buttonTargets[this.indexValue].focus()
+  }
+
   get #lastIndex() {
     return this.tabTargets.length -1
   }

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

@@ -1,10 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
+const APPLICATION_NAME = "my_application"
+
 export default class extends Controller {
   static values = { title: String, text: String, url: String, file: String }
 
-  #applicationName = 'MyApplication'
-
   connect() {
     this.element.hidden = !navigator.canShare
   }
@@ -34,7 +34,7 @@ export default class extends Controller {
   async #getFileObject() {
     const response = await fetch(this.fileValue)
     const blob = await response.blob()
-    const randomPrefix = `${this.#applicationName}_${Math.random().toString(36).slice(2)}`
+    const randomPrefix = `${APPLICATION_NAME}_${Math.random().toString(36).slice(2)}`
     const fileName = `${randomPrefix}.${blob.type.split('/').pop()}`
 
     return new File([ blob ], fileName, { type: blob.type })

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.43
+  version: 0.0.45
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-04 00:00:00.000000000 Z
+date: 2024-10-13 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -70,6 +70,8 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
@@ -92,6 +94,8 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js