css-zero 3.0.1 → 4.0.0

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

@@ -1,16 +1,33 @@
 import { Controller } from "@hotwired/stimulus"
-import { Chart, registerables } from "https://esm.sh/chart.js@4.5.0?standalone"
+import { Chart, registerables } from "https://esm.sh/chart.js@4.5.1?standalone"
 
 export default class extends Controller {
   static values = { type: { type: String, default: "line" }, data: Object, options: Object }
 
   initialize() {
+    const style = getComputedStyle(document.body)
     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.color = style.color
+    Chart.defaults.datasets.line.tension = 0.35
+    Chart.defaults.datasets.radar.tension = 0
+    Chart.defaults.elements.arc.borderRadius = 12
+    Chart.defaults.elements.bar.borderRadius = 12
+    Chart.defaults.elements.point.radius = 0
+    Chart.defaults.font.family = style.fontFamily
     Chart.defaults.font.size = 12
+    Chart.defaults.interaction.intersect = false
+    Chart.defaults.plugins.legend.display = false
+    Chart.defaults.plugins.legend.labels.usePointStyle = true
+    Chart.defaults.plugins.legend.position = "bottom"
+    Chart.defaults.plugins.tooltip.backgroundColor = style.backgroundColor
+    Chart.defaults.plugins.tooltip.bodyColor = style.color
+    Chart.defaults.plugins.tooltip.borderColor = style.borderColor
+    Chart.defaults.plugins.tooltip.borderWidth = 1
+    Chart.defaults.plugins.tooltip.boxPadding = 4
+    Chart.defaults.plugins.tooltip.caretSize = 0
+    Chart.defaults.plugins.tooltip.titleColor = style.color
+    Chart.defaults.plugins.tooltip.usePointStyle = true
+    Chart.defaults.scale.grid.color = style.borderColor
   }
 
   connect() {

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-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"
+import { get } from "https://esm.sh/@rails/request.js@0.0.13?standalone"
+import TomSelect from "https://esm.sh/tom-select@2.6.1/base?standalone"
 
 export default class extends Controller {
   static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
@@ -22,7 +22,7 @@ export default class extends Controller {
   }
 
   async load(query, callback) {
-    const response     = await get(this.urlValue, { responseKind: "json", query: { q: query } })
+    const response = await get(this.urlValue, { responseKind: "json", query: { q: query } })
     const jsonResponse = await response.json
     callback(jsonResponse)
   }
@@ -40,7 +40,7 @@ export default class extends Controller {
       option_create: (data, escape) => {
         return `<div class="create">${this.optionCreateValue} <b>${escape(data.input)}</b>...</div>`
       },
-      no_results: () =>  {
+      no_results: () => {
         return `<div class="no-results">${this.noResultsValue}</div>`
       }
     }

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

@@ -1,9 +1,14 @@
 import { Controller } from "@hotwired/stimulus"
 import Combobox from "https://esm.sh/@github/combobox-nav@3.0.1?standalone"
+import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"
 
 export default class extends Controller {
   static targets = [ "input", "list", "item" ]
 
+  initialize() {
+    this.filter = debounce(this.filter.bind(this), 100)
+  }
+
   connect() {
     this.combobox = new Combobox(this.inputTarget, this.listTarget)
     this.combobox.start()

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

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

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.0.300?standalone"
-import Dropzone from "https://esm.sh/dropzone@6.0.0-beta.2?standalone"
+import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.1.300?standalone"
+import Dropzone from "https://esm.sh/@deltablot/dropzone@7.4.3?standalone"
 
 export default class extends Controller {
   static values = {

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

@@ -5,7 +5,7 @@ export default class extends Controller {
     this.element.showPopover()
   }
 
-  remove() {
+  hide() {
     this.element.hidePopover()
   }
 }

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

@@ -34,6 +34,10 @@ export default class extends Controller {
     }
   }
 
+  select(event) {
+    event.target.select()
+  }
+
   reset() {
     this.element.reset()
   }

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { for: String }
+
+  connect() {
+    this.element.addEventListener("mouseenter", this.#show)
+    this.element.addEventListener("mouseleave", this.#hide)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("mouseenter", this.#show)
+    this.element.removeEventListener("mouseleave", this.#hide)
+  }
+
+  #show = () => {
+    this.#forElement?.showPopover({ source: this.element })
+  }
+
+  #hide = () => {
+    this.#forElement?.hidePopover()
+  }
+
+  get #forElement() {
+    return document.getElementById(this.forValue)
+  }
+}

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import { put } from "https://esm.sh/@rails/request.js@0.0.12?standalone"
-import Sortable from "https://esm.sh/sortablejs@1.15.6?standalone"
+import { put } from "https://esm.sh/@rails/request.js@0.0.13?standalone"
+import Sortable from "https://esm.sh/sortablejs@1.15.7?standalone"
 
 export default class extends Controller {
   static values  = { url: String, group: String, handle: String }

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

@@ -0,0 +1,70 @@
+import { Controller } from "@hotwired/stimulus"
+import { play } from "https://esm.sh/cuelume@0.1.2?standalone"
+
+export default class extends Controller {
+  static values = { connect: String, disconnect: String }
+
+  connect() {
+    this.hasConnectValue && play(this.connectValue)
+  }
+
+  disconnect() {
+    this.hasDisconnectValue && play(this.disconnectValue)
+  }
+
+  chime() {
+    play("chime")
+  }
+
+  sparkle() {
+    play("sparkle")
+  }
+
+  droplet() {
+    play("droplet")
+  }
+
+  bloom() {
+    play("bloom")
+  }
+
+  whisper() {
+    play("whisper")
+  }
+
+  tick() {
+    play("tick")
+  }
+
+  press() {
+    play("press")
+  }
+
+  release() {
+    play("release")
+  }
+
+  toggle() {
+    play("toggle")
+  }
+
+  success() {
+    play("success")
+  }
+
+  error() {
+    play("error")
+  }
+
+  page() {
+    play("page")
+  }
+
+  loading() {
+    play("loading")
+  }
+
+  ready() {
+    play("ready")
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = [ "toggle" ]
+
+  toggle() {
+    this.element.classList.toggle(this.toggleClass)
+  }
+
+  add() {
+    this.element.classList.add(this.toggleClass)
+  }
+
+  remove() {
+    this.element.classList.remove(this.toggleClass)
+  }
+}

data/lib/generators/css_zero/authentication/templates/app/views/passwords/edit.html.erb.tt

@@ -1,6 +1,6 @@
 <%% if alert.present? %>
   <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
-    <div class="flash__content"><%%= alert %></div>
+    <div class="flash__content font-medium"><%%= alert %></div>
   </div>
 <%% end %>
 

data/lib/generators/css_zero/authentication/templates/app/views/passwords/new.html.erb.tt

@@ -1,6 +1,6 @@
 <%% if alert.present? %>
   <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
-    <div class="flash__content"><%%= alert %></div>
+    <div class="flash__content font-medium"><%%= alert %></div>
   </div>
 <%% end %>
 

data/lib/generators/css_zero/authentication/templates/app/views/sessions/new.html.erb.tt

@@ -1,6 +1,6 @@
 <%% if alert.present? %>
   <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
-    <div class="flash__content"><%%= alert %></div>
+    <div class="flash__content font-medium"><%%= alert %></div>
   </div>
 <%% end %>
 
@@ -18,6 +18,6 @@
 
   <div class="flex items-center gap">
     <%%= form.submit "Sign in", class: "btn btn--primary" %>
-    <%%= link_to "Forgot password?", new_password_path, class: "text-sm font-medium underline" %>
+    <%%= link_to "Forgot password?", new_password_path, class: "text-sm font-medium text-link" %>
   </div>
 <%% end %>

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css

@@ -11,11 +11,10 @@
   --color-selected: light-dark(var(--sky-100), var(--sky-950));
   --color-selected-dark: light-dark(var(--blue-300), var(--blue-800));
   --color-highlight: light-dark(var(--yellow-200), var(--yellow-900));
-
   --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
   --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
-  --color-negative: light-dark(var(--red-600), var(--red-800));
-  --color-positive: light-dark(var(--green-600), var(--green-800));
+  --color-negative: light-dark(var(--red-600), var(--red-600));
+  --color-positive: light-dark(var(--green-700), var(--green-700));
 }
 
 * {

data/lib/generators/css_zero/install/templates/app/views/layouts/application.html.erb

@@ -39,8 +39,8 @@
     <main id="main">
       <%% if notice.present? %>
       <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
-          <div class="flash__content"><%%= notice %></div>
-        </div>
+        <div class="flash__content font-medium"><%%= notice %></div>
+      </div>
       <%% end %>
       <div class="container">
         <%%= yield %>

data/lib/generators/css_zero/scaffold/templates/index.html.erb.tt

@@ -5,7 +5,7 @@
   <%%= link_to "New <%= human_name.downcase %>", <%= new_helper(type: :path) %>, class: "btn btn--primary" %>
 </div>
 
-<div id="<%= plural_table_name %>" class="flex flex-col" style="gap: 2rem;">
+<div id="<%= plural_table_name %>" class="flex flex-col" style="row-gap: 2rem;">
   <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
     <div class="flex flex-col items-start gap">
       <%%= render <%= singular_table_name %> %>

data/lib/generators/css_zero/scaffold/templates/partial.html.erb.tt

@@ -3,10 +3,10 @@
   <div class="flex flex-col gap-half">
     <h4 class="font-medium leading-none"><%= attribute.human_name %>:</h4>
 <% if attribute.attachment? -%>
-    <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %>, class: "font-medium underline" if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
+    <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %>, class: "font-medium text-link" if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
 <% elsif attribute.attachments? -%>
     <%% <%= singular_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
-      <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %>, class: "font-medium underline" %></div>
+      <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %>, class: "font-medium text-link" %></div>
     <%% end %>
 <% else -%>
     <p class="leading-none"><%%= <%= singular_name %>.<%= attribute.column_name %> %></p>

metadata

@@ -1,19 +1,35 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 3.0.1
+  version: 4.0.0
 platform: ruby
 authors:
 - Lázaro Nixon
 bindir: bin
 cert_chain: []
 date: 1980-01-02 00:00:00.000000000 Z
-dependencies: []
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '8.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '8.0'
 email: lazaronixon@hotmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
+- LICENSE.txt
 - README.md
 - Rakefile
 - app/assets/stylesheets/css-zero/animations.css
@@ -51,9 +67,9 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/grip-horizontal-zink-500.svg
 - lib/generators/css_zero/add/templates/app/assets/images/grip-vertical-zink-500.svg
 - lib/generators/css_zero/add/templates/app/assets/images/loading.svg
-- lib/generators/css_zero/add/templates/app/assets/images/menu.svg
 - lib/generators/css_zero/add/templates/app/assets/images/minus.svg
 - lib/generators/css_zero/add/templates/app/assets/images/moon.svg
+- lib/generators/css_zero/add/templates/app/assets/images/panel-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/search.svg
 - lib/generators/css_zero/add/templates/app/assets/images/share.svg
 - lib/generators/css_zero/add/templates/app/assets/images/sun.svg
@@ -82,13 +98,15 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input_copyable.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input_otp.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input_revealable.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/keyboard.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/lexxy.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/list.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.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/resizable.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/separator.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
@@ -98,7 +116,6 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/trix.css
 - lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/back_navigation_controller.js
@@ -122,14 +139,16 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/input_copyable_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/input_revealable_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/inputmask_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/interest_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/resizable_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/sortable_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/sound_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/timezone_cookie_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/toggle_class_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/turbo_confirm_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js
@@ -175,7 +194,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.7.2
+rubygems_version: 4.0.6
 specification_version: 4
 summary: An opinionated CSS starter kit for your application.
 test_files: []

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

@@ -1,140 +0,0 @@
-:where(.prose) {
-  font-size: var(--text-fluid-base);
-  max-inline-size: 65ch;
-
-  :is(h1, h2, h3, h4, h5, h6) {
-    font-weight: var(--font-extrabold);
-    hyphens: auto;
-    letter-spacing: -0.02ch;
-    line-height: 1.1;
-    margin-block: 0.5em;
-    overflow-wrap: break-word;
-    text-wrap: balance;
-  }
-
-  h1 {
-    font-size: 2.4em;
-  }
-
-  h2 {
-    font-size: 1.8em;
-  }
-
-  h3 {
-    font-size: 1.5em;
-  }
-
-  h4 {
-    font-size: 1.2em;
-  }
-
-  h5 {
-    font-size: 1em;
-  }
-
-  h6 {
-    font-size: 0.8em;
-  }
-
-  :is(ul, ol, menu) {
-    list-style: revert;
-    padding-inline-start: revert;
-  }
-
-  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
-    margin-block: 0.65lh;
-    overflow-wrap: break-word;
-    text-wrap: pretty;
-  }
-
-  hr {
-    border-color: var(--color-border-dark);
-    border-style: var(--border-style, solid) none none;
-    margin: 2lh auto;
-  }
-
-  :is(b, strong) {
-    font-weight: var(--font-bold);
-  }
-
-  :is(pre, code) {
-    background-color: var(--color-border-light);
-    border: 1px solid var(--color-border);
-    border-radius: var(--rounded-sm);
-    font-family: var(--font-monospace-code);
-    font-size: 0.85em;
-  }
-
-  code {
-    padding: 0.1em 0.3em;
-  }
-
-  pre {
-    border-radius: 0.5em;
-    overflow-x: auto;
-    padding: 0.5lh 2ch;
-    text-wrap: nowrap;
-  }
-
-  pre code {
-    background-color: transparent;
-    border: 0;
-    font-size: 1em;
-    padding: 0;
-  }
-
-  p {
-    hyphens: auto;
-    letter-spacing: -0.005ch;
-  }
-
-  blockquote {
-    font-style: italic;
-    margin: 0 3ch;
-  }
-
-  blockquote p {
-    hyphens: none;
-  }
-
-  table {
-    border: 1px solid var(--color-border-dark);
-    border-collapse: collapse;
-    margin: 1lh 0;
-  }
-
-  th {
-    font-weight: var(--font-bold);
-  }
-
-  :is(th, td) {
-    border: 1px solid var(--color-border-dark);
-    padding: 0.2lh 1ch;
-    text-align: start;
-  }
-
-  th {
-    border-block-end-width: 3px;
-  }
-
-  del {
-    background-color: rgb(from var(--color-negative) r g b / .1);
-    color: var(--color-negative);
-  }
-
-  ins {
-    background-color: rgb(from var(--color-positive) r g b / .1);
-    color: var(--color-positive);
-  }
-
-  a {
-    color: var(--color-link);
-    text-decoration: underline;
-    text-decoration-skip-ink: auto;
-  }
-
-  mark {
-    background-color: var(--color-highlight);
-    color: var(--color-text);
-  }
-}