css-zero 1.1.14 → 2.0.0

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

@@ -1,11 +1,7 @@
-.prose {
+:where(.prose) {
   font-size: var(--text-fluid-base);
   max-inline-size: 65ch;
 
-  /* Antialiased fonts */
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-
   :is(h1, h2, h3, h4, h5, h6) {
     font-weight: var(--font-extrabold);
     hyphens: auto;

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

@@ -0,0 +1,27 @@
+@import url("https://esm.sh/@stanko/dual-range-input@1.0.0/dist/index.css");
+
+.dual-range-input {
+  --dri-height: 1rem;
+  --dri-thumb-width: var(--dri-height);
+  --dri-thumb-height: var(--dri-height);
+  --dri-thumb-color: var(--color-primary);
+  --dri-thumb-hover-color: var(--dri-thumb-color);
+  --dri-thumb-active-color: var(--color-selected-dark);
+  --dri-thumb-border-color: var(--dri-thumb-color);
+  --dri-thumb-border-hover-color: var(--dri-thumb-border-color);
+  --dri-thumb-border-active-color: var(--dri-thumb-border-color);
+  --dri-thumb-border-radius: 1rem;
+  --dri-thumb-border-width: 1px;
+  --dri-track-height: calc(var(--dri-height) * .45);
+  --dri-track-border-radius: 1rem;
+  --dri-track-color: var(--color-border);
+  --dri-track-filled-color: var(--color-primary);
+}
+
+.range {
+  accent-color: var(--color-primary);
+}
+
+.range:focus-visible {
+  outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+}

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

@@ -1,12 +1,27 @@
-.resizable-inline {
-  resize: inline;
+.resizable-horizontal {
+  display: flex;
+  flex-direction: row;
 }
 
-.resizable-block {
-  resize: block;
+.resizable-vertical {
+  display: flex;
+  flex-direction: column;
 }
 
-:is(.resizable-inline, .resizable-block) {
-  background-image: linear-gradient(-45deg, var(--color-border) .75rem, transparent 0.75rem);
-  overflow: hidden;
+.gutter {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.gutter-horizontal {
+  background-image: url("grip-vertical-zink-500.svg");
+  border-inline-width: var(--border);
+  cursor: col-resize;
+}
+
+.gutter-vertical {
+  background-image: url("grip-horizontal-zink-500.svg");
+  border-block-width: var(--border);
+  cursor: row-resize;
 }

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

@@ -9,10 +9,10 @@
   max-block-size: unset;
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, .5);
   }
 
-  /* Setup Transition */
+  /* Setup transition */
   transition-behavior: allow-discrete;
   transition-duration: var(--time-300);
   transition-property: display, overlay, transform;

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

@@ -10,30 +10,28 @@
   --btn-border-color: transparent;
   --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
-  --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
   --btn-inline-size: var(--size-full);
   --btn-padding: var(--size-1) var(--size-2);
-  --btn-text-align: start;
 
-  &[aria-current=page] {
-    --btn-background: var(--color-secondary);
+  &[aria-current="page"] {
+    --btn-background: var(--color-border-light);
   }
 
   &:focus-visible {
-    --btn-background: var(--color-secondary);
+    --btn-background: var(--color-border-light);
   }
 
   &:is(summary) {
     &::after {
-      background-image: url("chevron-right.svg");
-      background-size: cover;
+      background-color: currentColor;
       block-size: var(--size-4);
       content: "";
-      filter: var(--color-filter-text);
       inline-size: var(--size-4);
       margin-inline-start: auto;
+      mask-image: url("chevron-right.svg");
+      mask-size: cover;
       min-inline-size: var(--size-4);
       transition: transform var(--time-200);
     }

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

@@ -1,5 +1,6 @@
 .skeleton {
   animation: var(--animate-blink);
+  animation-duration: 2s;
   border-radius: var(--rounded-md);
   background-color: var(--color-border);
 }

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

@@ -9,7 +9,7 @@
   }
 
   thead {
-    color: var(--color-text-subtle);
+    color: var(--color-text);
   }
 
   tbody tr {

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

@@ -21,7 +21,7 @@
   --btn-hover-color: transparent;
   --btn-inline-size: var(--size-full);
 
-  &:is([aria-selected=true], [aria-current=page]) {
+  &:is([aria-selected="true"], [aria-current="page"]) {
     --btn-background: var(--color-bg);
     --btn-box-shadow: var(--shadow-sm);
     --btn-hover-color: var(--color-bg);

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

@@ -1,13 +1,11 @@
-.btn--toggle {
-  [type="checkbox"] {
-    position: absolute; clip: rect(0, 0, 0, 0);
-  }
+.btn--toggle [type="checkbox"] {
+  position: absolute; clip: rect(0, 0, 0, 0);
+}
 
-  &:has(:checked) {
-    --btn-background: var(--color-secondary);
-  }
+.btn--toggle:has(:checked) {
+  --btn-background: var(--color-border-light);
+}
 
-  &:has(:focus-visible) {
-    outline: var(--border-2) solid var(--color-selected-dark);
-  }
+.btn--toggle:has(:focus-visible) {
+  outline: var(--border-2) solid var(--color-selected-dark);
 }

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

@@ -1,4 +1,4 @@
-@import url("https://esm.sh/trix@2.1.13/dist/trix.css");
+@import url("https://esm.sh/trix@2.1.15/dist/trix.css");
 
 /* Action Text */
 
@@ -48,17 +48,28 @@ trix-toolbar {
     color: var(--color-text);
 
     &.trix-active {
-      background-color: var(--color-secondary);
+      background-color: var(--color-border-light);
     }
 
     &.trix-button--icon::before {
-      filter: var(--color-filter-text);
       opacity: 1;
     }
 
     &.trix-button--icon:disabled::before {
       opacity: 0.125;
     }
+
+    [data-color-scheme="light"] & {
+      &.trix-button--icon::before { filter: invert(0); }
+    }
+
+    [data-color-scheme="dark"] & {
+      &.trix-button--icon::before { filter: invert(1); }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      &.trix-button--icon::before { filter: invert(1); }
+    }
   }
 
   .trix-dialog {
@@ -195,3 +206,13 @@ trix-editor {
     }
   }
 }
+
+.trix--minimal {
+  .trix-button-group--file-tools {
+    display: none;
+  }
+
+  .trix-button-group--history-tools {
+    display: none;
+  }
+}

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { FetchRequest } from "https://esm.sh/@rails/request.js@0.0.11?standalone"
+import { FetchRequest } from "https://esm.sh/@rails/request.js@0.0.12?standalone"
 
 const AUTOSAVE_INTERVAL = 3000
 
@@ -14,7 +14,7 @@ export default class extends Controller {
 
   change() {
     !this.#dirty && this.#scheduleSave()
-    !this.#dirty && this.#updateAppearance()
+    !this.#dirty && this.#updateAppearance(false)
   }
 
   async #submit() {
@@ -25,24 +25,17 @@ export default class extends Controller {
     this.#updateAppearance(true)
     this.#resetTimer()
     await this.#submitForm(this.element)
-    this.#updateAppearance()
+    this.#updateAppearance(false)
   }
 
   async #submitForm(form) {
-    const request = new FetchRequest(form.method, form.action, { body: new FormData(form) })
-    return await request.perform()
+    return await new FetchRequest(form.method, form.action, { body: new FormData(form) }).perform()
   }
 
-  #updateAppearance(saving = false) {
-    if (saving) {
-      this.element.setAttribute("aria-busy", true)
-      this.submitterTarget.setAttribute("aria-disabled", true)
-      this.submitterTarget.disabled = true
-    } else {
-      this.element.removeAttribute("aria-busy")
-      this.submitterTarget.removeAttribute("aria-disabled")
-      this.submitterTarget.disabled = false
-    }
+  #updateAppearance(saving) {
+    this.element.ariaBusy = saving
+    this.submitterTarget.ariaDisabled = saving
+    this.submitterTarget.disabled = saving
   }
 
   #scheduleSave() {
@@ -50,7 +43,8 @@ export default class extends Controller {
   }
 
   #resetTimer() {
-    clearTimeout(this.#timer); this.#timer = null
+    clearTimeout(this.#timer)
+    this.#timer = null
   }
 
   get #dirty() {

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

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { fallbackDestination: String }
+
+  connect() {
+    if (history.state.turbo?.restorationIndex > 0) {
+      this.element.href = "javascript:history.back()"
+    } else {
+      this.element.href = this.fallbackDestinationValue
+    }
+  }
+}

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

@@ -1,22 +1,18 @@
 import { Controller } from "@hotwired/stimulus"
-import { Chart, registerables } from "https://esm.sh/chart.js@4.4.8?standalone"
-
-Chart.register(...registerables)
-
-Chart.defaults.backgroundColor = getCssVariableValue("--color-primary")
-Chart.defaults.borderColor = getCssVariableValue("--color-border")
-Chart.defaults.color = getCssVariableValue("--color-text")
-
-Chart.defaults.font.family = getCssVariableValue("--font-system-ui")
-Chart.defaults.font.size = 12
-
-function getCssVariableValue(variableName) {
-  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
-}
+import { Chart, registerables } from "https://esm.sh/chart.js@4.5.0?standalone"
 
 export default class extends Controller {
   static values = { type: { type: String, default: "line" }, data: Object, options: Object }
 
+  initialize() {
+    Chart.register(...registerables)
+    Chart.defaults.backgroundColor = getComputedStyle(document.body).backgroundColor
+    Chart.defaults.borderColor = getComputedStyle(document.body).borderColor
+    Chart.defaults.color = getComputedStyle(document.body).color
+    Chart.defaults.font.family = getComputedStyle(document.body).fontFamily
+    Chart.defaults.font.size = 12
+  }
+
   connect() {
     this.chart = new Chart(this.element, this.#settings)
   }

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

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.dataset.colorScheme = this.#colorScheme
+  }
+
+  setLight() {
+    this.element.dataset.colorScheme = "light"
+    localStorage.setItem("color_scheme", "light")
+  }
+
+  setDark() {
+    this.element.dataset.colorScheme = "dark"
+    localStorage.setItem("color_scheme", "dark")
+  }
+
+  setSystem() {
+    this.element.dataset.colorScheme = "system"
+    localStorage.setItem("color_scheme", "system")
+  }
+
+  get #colorScheme() {
+    return localStorage.getItem("color_scheme") || "system"
+  }
+}

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { get } from "https://esm.sh/@rails/request.js@0.0.11?standalone"
+import { get } from "https://esm.sh/@rails/request.js@0.0.12?standalone"
 import TomSelect from "https://esm.sh/tom-select@2.4.3/base?standalone"
 
 export default class extends Controller {

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

@@ -1,15 +1,15 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "menu" ]
+  static targets = [ "content" ]
 
   show({ clientX, clientY }) {
-    this.menuTarget.style.insetInlineStart = `${clientX}px`
-    this.menuTarget.style.insetBlockStart  = `${clientY}px`
-    this.menuTarget.showPopover()
+    this.contentTarget.style.insetInlineStart = `${clientX}px`
+    this.contentTarget.style.insetBlockStart  = `${clientY}px`
+    this.contentTarget.showPopover()
   }
 
   hide({ target }) {
-    !this.menuTarget.contains(target) && this.menuTarget.hidePopover()
+    !this.contentTarget.contains(target) && this.contentTarget.hidePopover()
   }
 }

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

@@ -2,7 +2,6 @@ import { Controller } from "@hotwired/stimulus"
 import flatpickr from "https://esm.sh/flatpickr@4.6.13?standalone"
 
 export default class extends Controller {
-  static targets = [ "details" ]
   static values  = {
     type: String, disable: Array,
     mode: { type: String, default: "single" },

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

@@ -1,18 +1,18 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "menu" ]
+  static targets = [ "content" ]
 
   show() {
-    this.menuTarget.show()
+    this.contentTarget.show()
   }
 
   showModal() {
-    this.menuTarget.showModal()
+    this.contentTarget.showModal()
   }
 
   close() {
-    this.menuTarget.close()
+    this.contentTarget.close()
   }
 
   closeOnClickOutside({ target }) {

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.0.100?standalone"
+import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.0.200?standalone"
 import Dropzone from "https://esm.sh/dropzone@6.0.0-beta.2?standalone"
 
 export default class extends Controller {

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

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+import DualRangeInput from "https://esm.sh/@stanko/dual-range-input@1.0.0?standalone"
+
+export default class extends Controller {
+  static targets = [ "min", "max" ]
+  static values  = { precision: Number, default: 3 }
+
+  connect() {
+    this.dualRangeInput = new DualRangeInput(this.minTarget, this.maxTarget, this.precisionValue)
+  }
+
+  disconnect() {
+    this.dualRangeInput.destroy()
+  }
+}

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

@@ -5,15 +5,15 @@ export default class extends Controller {
   static targets = [ "cancel" ]
 
   initialize() {
-    this.search = debounce(this.search.bind(this), 500)
+    this.debouncedSubmit = debounce(this.submit.bind(this), 300)
   }
 
-  submit({ params }) {
-    params.submitter ? this.#click(params.submitter) : this.element.requestSubmit()
-  }
-
-  search({ params }) {
-    params.submitter ? this.#click(params.submitter) : this.element.requestSubmit()
+  submit({ params: { submitter } }) {
+    if (submitter) {
+      this.element.requestSubmit(this.#find(submitter))
+    } else {
+      this.element.requestSubmit()
+    }
   }
 
   cancel() {
@@ -24,7 +24,11 @@ export default class extends Controller {
     event.preventDefault()
   }
 
-  #click(selectors) {
-    this.element.querySelector(selectors).click()
+  #find(id) {
+    return document.getElementById(id) || this.#notFound(id)
+  }
+
+  #notFound(id) {
+    throw new Error(`Submitter with ID "${id}" not found`)
   }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/{copyable_input_controller.js → input_copyable_controller.js}

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "input", "button" ]
+  static targets = [ "input" ]
 
   async copy() {
     this.#reset()
@@ -11,16 +11,16 @@ export default class extends Controller {
   async #writeToClipboard() {
     try {
       await navigator.clipboard.writeText(this.inputTarget.value)
-      this.buttonTarget.classList.add("btn--copied")
+      this.element.classList.add("input--copied")
     } catch {}
   }
 
   #reset() {
-    this.buttonTarget.classList.remove("btn--copied")
+    this.element.classList.remove("input--copied")
     this.#forceReflow()
   }
 
   #forceReflow() {
-    this.buttonTarget.offsetWidth
+    this.element.offsetWidth
   }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/{revealable_input_controller.js → input_revealable_controller.js}

@@ -1,10 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "input", "button" ]
+  static targets = [ "input" ]
 
   reveal() {
-    this.buttonTarget.classList.toggle("btn--revealed")
+    this.element.classList.toggle("input--revealed")
     this.inputTarget.type = this.#type
   }
 

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { MaskInput } from "https://esm.sh/maska@3.1.0?standalone"
+import { MaskInput } from "https://esm.sh/maska@3.1.1?standalone"
 
 export default class extends Controller {
   connect() {

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

@@ -18,25 +18,60 @@ export default class extends Controller {
     this.#observer.disconnect()
   }
 
-  prev() {
+  navigate(event) {
+    switch (event.key) {
+      case "ArrowUp":
+        this.#cancel(event)
+        this.#prev()
+        break
+      case "ArrowDown":
+        this.#cancel(event)
+        this.#next()
+        break
+      case "PageUp":
+      case "Home":
+        this.#cancel(event)
+        this.#first()
+        break
+      case "PageDown":
+      case "End":
+        this.#cancel(event)
+        this.#last()
+        break
+    }
+  }
+
+  #cancel(event) {
+    event.stopPropagation()
+    event.preventDefault()
+  }
+
+  #reset([ entry ]) {
+    entry.isIntersecting && this.#first()
+  }
+
+  #prev() {
     if (this.indexValue > 0) {
       this.indexValue--
       this.#update()
     }
   }
 
-  next() {
+  #next() {
     if (this.indexValue < this.#lastIndex) {
       this.indexValue++
       this.#update()
     }
   }
 
-  #reset([ entry ]) {
-    if (entry.isIntersecting) {
-      this.indexValue = 0
-      this.#update()
-    }
+  #first() {
+    this.indexValue = 0
+    this.#update()
+  }
+
+  #last() {
+    this.indexValue = this.#lastIndex
+    this.#update()
   }
 
   #update() {

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

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
-import { computePosition, flip, shift, offset, autoUpdate } from "https://esm.sh/@floating-ui/dom@1.6.13?standalone"
+import { computePosition, flip, shift, offset, autoUpdate } from "https://esm.sh/@floating-ui/dom@1.7.2?standalone"
 
 export default class extends Controller {
-  static targets = [ "button", "menu" ]
+  static targets = [ "trigger", "content" ]
   static values  = { placement: { type: String, default: "bottom" } }
 
   #showTimer = null
@@ -13,7 +13,7 @@ export default class extends Controller {
   }
 
   connect() {
-    this.cleanup = autoUpdate(this.buttonTarget, this.menuTarget, this.orient)
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, this.orient)
   }
 
   disconnect() {
@@ -21,31 +21,31 @@ export default class extends Controller {
   }
 
   show() {
-    this.menuTarget.showPopover()
+    this.contentTarget.showPopover({ source: this.triggerTarget })
   }
 
   hide() {
-    this.menuTarget.hidePopover()
+    this.contentTarget.hidePopover()
   }
 
   toggle() {
-    this.menuTarget.togglePopover()
+    this.contentTarget.togglePopover({ source: this.triggerTarget })
   }
 
-  showLater() {
+  debouncedShow() {
     clearTimeout(this.#hideTimer)
-    this.#showTimer = setTimeout(() => this.show(), 700)
+    this.#showTimer = setTimeout(() => this.show(), 150)
   }
 
-  hideLater() {
+  debouncedHide() {
     clearTimeout(this.#showTimer)
-    this.#hideTimer = setTimeout(() => this.hide(), 300)
+    this.#hideTimer = setTimeout(() => this.hide(), 150)
   }
 
   orient() {
-    computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
-      this.menuTarget.style.insetInlineStart = `${x}px`
-      this.menuTarget.style.insetBlockStart  = `${y}px`
+    computePosition(this.triggerTarget, this.contentTarget, this.#options).then(({x, y}) => {
+      this.contentTarget.style.insetInlineStart = `${x}px`
+      this.contentTarget.style.insetBlockStart  = `${y}px`
     })
   }