css-zero 0.0.50 → 0.0.52

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91b801a2c291cc802d00718d9ab4cade87e214b4ba369b11f6f5a479cab99701
-  data.tar.gz: dca783296168520201298efa156a848e37667b08b275015e4ca216c9baaa091b
+  metadata.gz: c157fd23d2088eadf6b3ddd2301b2c6bb5e819e0fcebb3e2fd92bde924469a64
+  data.tar.gz: a68db27229c7b3c9118a008dc2f4417ff84b2dd99a54a637ed156a01c5aabd46
 SHA512:
-  metadata.gz: 84e0431f0af1beb34e11a7ee0cd1e8a247b469880a832185b4f2d555c15133ebe622741949f51686869d3bb98673b5664503f71d0de72f702301e412a3f99dfd
-  data.tar.gz: cc5ed39f59c52469fbb6bb5e162f04da66d570350ff83982d2a211d8790b4e1424a9e4567d79f6bc8e2cf0ec8c2b14f5c4f45792a76b80909cdbf4ffb898e5e6
+  metadata.gz: 6d06cd1f0e6c178496ecca303119b7d880f1d384c3ebd7549bedf3ae18c19bc90a8702016fd8bd9c0d913ffc48b68081d10b5e2e17e21eb2844644b80c331c36
+  data.tar.gz: 5bcd076df9a20544d488289894c858f426d88b0805a79fe47c326c48bf679de340542924510df37c6b06707ee537e0d396033a3db6bb082dd9ce7cf9142af90f

data/app/assets/stylesheets/_reset.css

@@ -291,7 +291,7 @@ textarea {
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
+  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
 }
 
 /*

data/app/assets/stylesheets/typography.css

@@ -46,7 +46,7 @@
   --leading-none:    1;
   --leading-tight:   1.25;
   --leading-snug:    1.375;
-  --leading-normal:  1.4;
+  --leading-normal:  1.5;
   --leading-relaxed: 1.625;
   --leading-loose:   2;
   --leading-3:       .75rem;  /* 12px */

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.50"
+  VERSION = "0.0.52"
 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_all command collapsible dialog dropdown flash form fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+  accordion alert autosave avatar badge breadcrumb button card carousel combobox check_all command collapsible dialog dropdown flash form fullscreen hotkey input input_concerns inputmask layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs trix upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -3,6 +3,8 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
+autosave:
+  - app/javascript/controllers/autosave_controller.js
 avatar:
   - app/assets/stylesheets/avatar.css
 badge:
@@ -20,6 +22,11 @@ carousel:
   - app/javascript/controllers/carousel_controller.js
   - app/assets/images/arrow-left.svg
   - app/assets/images/arrow-right.svg
+combobox:
+  - app/assets/stylesheets/tom-select.css
+  - app/assets/stylesheets/zcombobox.css
+  - app/javascript/controllers/combobox_controller.js
+  - app/assets/images/select-arrow.svg
 check_all:
   - app/javascript/controllers/check_all_controller.js
 command:
@@ -60,6 +67,8 @@ input_concerns:
   - app/javascript/controllers/revealable_input_controller.js
   - app/assets/images/eye.svg
   - app/assets/images/eye-off.svg
+inputmask:
+  - app/javascript/controllers/inputmask_controller.js
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/images/menu.svg
@@ -96,6 +105,8 @@ table:
 tabs:
   - app/assets/stylesheets/tabs.css
   - app/javascript/controllers/tabs_controller.js
+trix:
+  - app/assets/stylesheets/ztrix.css
 upload_preview:
   - app/javascript/controllers/upload_preview_controller.js
   - app/assets/images/default-picture.webp

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

@@ -24,11 +24,11 @@
 .badge--positive {
   --badge-background: var(--color-positive);
   --badge-border-color: transparent;
-  --badge-color: white;
+  --badge-color: var(--color-text-reversed);
 }
 
 .badge--negative {
   --badge-background: var(--color-negative);
   --badge-border-color: transparent;
-  --badge-color: white;
+  --badge-color: var(--color-text-reversed);
 }

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

@@ -20,9 +20,9 @@
   }
 
   &:hover {
-    --hover-color: var(--btn-background, var(--color-bg));
-    --hover-color-l: var(--btn-hover-lightness, calc(l * .96));
-    background-color: oklch(from var(--hover-color) var(--hover-color-l) c h);
+    --hover-color-from: var(--btn-background, var(--color-bg));
+    --hover-color: oklch(from var(--hover-color-from) calc(l * .96) c h);
+    background-color: var(--btn-hover-color, var(--hover-color));
   }
 
   &:focus-visible {
@@ -69,7 +69,7 @@
 .btn--plain {
   --btn-background: transparent;
   --btn-border-color: transparent;
-  --btn-hover-lightness: l;
+  --btn-hover-color: transparent;
   --btn-padding: 0;
 }
 

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

@@ -19,8 +19,11 @@
   overflow-y: auto;
 }
 
-.command__group {
+.command__group:not(:first-child) {
   border-block-start-width: var(--border);
+}
+
+.command__group {
   display: flex;
   flex-direction: column;
   padding: var(--size-1);
@@ -42,12 +45,12 @@
 .command__item {
   --btn-border-color: transparent;
   --btn-font-weight: var(--font-normal);
-  --btn-hover-lightness: l;
+  --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
 
-  &:is(:hover, [aria-selected=true]) {
+  &[aria-selected=true] {
     --btn-background: var(--color-secondary);
   }
 }

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

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

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

@@ -23,12 +23,12 @@
 .menu__item {
   --btn-border-color: transparent;
   --btn-font-weight: var(--font-normal);
-  --btn-hover-lightness: l;
+  --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
 
-  &:is(:hover, :focus-visible) {
+  &:focus-visible {
     --btn-background: var(--color-secondary);
   }
 }

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

@@ -11,10 +11,11 @@
 .btn--tab {
   --btn-background: transparent;
   --btn-border-color: transparent;
-  --btn-hover-lightness: l;
+  --btn-hover-color: transparent;
   --btn-inline-size: var(--size-full);
 
   &[aria-selected=true] {
     --btn-background: var(--color-bg);
+    --btn-hover-color: var(--color-bg);
   }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tom-select.css

@@ -0,0 +1,411 @@
+/**
+ * tom-select.css (v2.3.1)
+ * Copyright (c) contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ */
+.ts-control {
+  border: 1px solid #d0d0d0;
+  padding: 8px 8px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  box-shadow: none;
+  border-radius: 3px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.ts-wrapper.multi.has-items .ts-control {
+  padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
+}
+.full .ts-control {
+  background-color: #fff;
+}
+.disabled .ts-control, .disabled .ts-control * {
+  cursor: default !important;
+}
+.focus .ts-control {
+  box-shadow: none;
+}
+.ts-control > * {
+  vertical-align: baseline;
+  display: inline-block;
+}
+.ts-wrapper.multi .ts-control > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 2px 6px;
+  background: #f2f2f2;
+  color: #303030;
+  border: 0 solid #d0d0d0;
+}
+.ts-wrapper.multi .ts-control > div.active {
+  background: #e8e8e8;
+  color: #303030;
+  border: 0 solid #cacaca;
+}
+.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
+  color: #7d7d7d;
+  background: white;
+  border: 0 solid white;
+}
+.ts-control > input {
+  flex: 1 1 auto;
+  min-width: 7rem;
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+     -moz-user-select: auto !important;
+      -ms-user-select: auto !important;
+          user-select: auto !important;
+  box-shadow: none !important;
+}
+.ts-control > input::-ms-clear {
+  display: none;
+}
+.ts-control > input:focus {
+  outline: none !important;
+}
+.has-items .ts-control > input {
+  margin: 0 4px !important;
+}
+.ts-control.rtl {
+  text-align: right;
+}
+.ts-control.rtl.single .ts-control:after {
+  left: 15px;
+  right: auto;
+}
+.ts-control.rtl .ts-control > input {
+  margin: 0 4px 0 -2px !important;
+}
+.disabled .ts-control {
+  opacity: 0.5;
+  background-color: #fafafa;
+}
+.input-hidden .ts-control > input {
+  opacity: 0;
+  position: absolute;
+  left: -10000px;
+}
+
+.ts-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #fff;
+  margin: 0.25rem 0 0;
+  border-top: 0 none;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 3px 3px;
+}
+.ts-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.ts-dropdown [data-selectable] .highlight {
+  background: rgba(125, 168, 208, 0.2);
+  border-radius: 1px;
+}
+.ts-dropdown .option,
+.ts-dropdown .optgroup-header,
+.ts-dropdown .no-results,
+.ts-dropdown .create {
+  padding: 5px 8px;
+}
+.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
+  cursor: inherit;
+  opacity: 0.5;
+}
+.ts-dropdown [data-selectable].option {
+  opacity: 1;
+  cursor: pointer;
+}
+.ts-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.ts-dropdown .optgroup-header {
+  color: #303030;
+  background: #fff;
+  cursor: default;
+}
+.ts-dropdown .active {
+  background-color: #f5fafd;
+  color: #495c68;
+}
+.ts-dropdown .active.create {
+  color: #495c68;
+}
+.ts-dropdown .create {
+  color: rgba(48, 48, 48, 0.5);
+}
+.ts-dropdown .spinner {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin: 5px 8px;
+}
+.ts-dropdown .spinner::after {
+  content: " ";
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 3px;
+  border-radius: 50%;
+  border: 5px solid #d0d0d0;
+  border-color: #d0d0d0 transparent #d0d0d0 transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.ts-dropdown-content {
+  overflow: hidden auto;
+  max-height: 200px;
+  scroll-behavior: smooth;
+}
+
+.ts-wrapper.plugin-drag_drop .ts-dragging {
+  color: transparent !important;
+}
+.ts-wrapper.plugin-drag_drop .ts-dragging > * {
+  visibility: hidden !important;
+}
+
+.plugin-checkbox_options:not(.rtl) .option input {
+  margin-right: 0.5rem;
+}
+
+.plugin-checkbox_options.rtl .option input {
+  margin-left: 0.5rem;
+}
+
+/* stylelint-disable function-name-case */
+.plugin-clear_button {
+  --ts-pr-clear-button: 1em;
+}
+.plugin-clear_button .clear-button {
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: calc(8px - 6px);
+  margin-right: 0 !important;
+  background: transparent !important;
+  transition: opacity 0.5s;
+  cursor: pointer;
+}
+.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
+  right: max(var(--ts-pr-caret), 8px);
+}
+.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
+  opacity: 1;
+}
+
+.ts-wrapper .dropdown-header {
+  position: relative;
+  padding: 10px 8px;
+  border-bottom: 1px solid #d0d0d0;
+  background: color-mix(#fff, #d0d0d0, 85%);
+  border-radius: 3px 3px 0 0;
+}
+.ts-wrapper .dropdown-header-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  color: #303030;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.ts-wrapper .dropdown-header-close:hover {
+  color: black;
+}
+
+.plugin-dropdown_input.focus.dropdown-active .ts-control {
+  box-shadow: none;
+  border: 1px solid #d0d0d0;
+}
+.plugin-dropdown_input .dropdown-input {
+  border: 1px solid #d0d0d0;
+  border-width: 0 0 1px;
+  display: block;
+  padding: 8px 8px;
+  box-shadow: none;
+  width: 100%;
+  background: transparent;
+}
+.plugin-dropdown_input .items-placeholder {
+  border: 0 none !important;
+  box-shadow: none !important;
+  width: 100%;
+}
+.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
+  display: none !important;
+}
+
+.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
+  min-width: 0;
+}
+.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
+  flex: none;
+  min-width: 4px;
+}
+.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
+  color: transparent;
+}
+.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
+  color: transparent;
+}
+
+.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
+  display: flex;
+}
+.ts-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0;
+}
+.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.ts-dropdown.plugin-optgroup_columns .optgroup::before {
+  display: none;
+}
+.ts-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+
+.ts-wrapper.plugin-remove_button .item {
+  display: inline-flex;
+  align-items: center;
+}
+.ts-wrapper.plugin-remove_button .item .remove {
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 0 2px 2px 0;
+  box-sizing: border-box;
+}
+.ts-wrapper.plugin-remove_button .item .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
+  background: none;
+}
+.ts-wrapper.plugin-remove_button .remove-single {
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 23px;
+}
+
+.ts-wrapper.plugin-remove_button:not(.rtl) .item {
+  padding-right: 0 !important;
+}
+.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
+  border-left: 1px solid #d0d0d0;
+  margin-left: 6px;
+}
+.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
+  border-left-color: #cacaca;
+}
+.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
+  border-left-color: white;
+}
+
+.ts-wrapper.plugin-remove_button.rtl .item {
+  padding-left: 0 !important;
+}
+.ts-wrapper.plugin-remove_button.rtl .item .remove {
+  border-right: 1px solid #d0d0d0;
+  margin-right: 6px;
+}
+.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
+  border-right-color: #cacaca;
+}
+.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
+  border-right-color: white;
+}
+
+:root {
+  --ts-pr-clear-button: 0;
+  --ts-pr-caret: 0;
+  --ts-pr-min: .75rem;
+}
+
+.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
+  cursor: pointer;
+}
+
+.ts-control:not(.rtl) {
+  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
+}
+
+.ts-control.rtl {
+  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
+}
+
+.ts-wrapper {
+  position: relative;
+}
+
+.ts-dropdown,
+.ts-control,
+.ts-control input {
+  color: #303030;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.ts-control,
+.ts-wrapper.single.input-active .ts-control {
+  background: #fff;
+  cursor: text;
+}
+
+.ts-hidden-accessible {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+          clip-path: inset(50%) !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}

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

@@ -0,0 +1,100 @@
+.ts-control {
+  align-items: center;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--rounded-md);
+  min-block-size: var(--size-10);
+  color: var(--color-text);
+  display: flex;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  gap: var(--size-1);
+  line-height: inherit;
+  padding: var(--size-1_5) var(--size-2);
+
+  > input {
+    color: inherit; font-size: inherit;
+  }
+}
+
+.ts-dropdown {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  line-height: inherit;
+
+  .ts-dropdown-content:not(:has(.optgroup)) {
+    padding: var(--size-1);
+  }
+
+  .optgroup:not(:first-child) {
+    border-block-start-width: var(--border);
+  }
+
+  .optgroup {
+    padding: var(--size-1);
+  }
+
+  .optgroup-header {
+    color: var(--color-text-subtle);
+    font-size: var(--text-xs);
+    padding: var(--size-1_5) var(--size-2);
+  }
+
+  .create {
+    padding: var(--size-1_5) var(--size-2);
+  }
+
+  .option {
+    border: 1px solid transparent;
+    border-radius: var(--rounded-md);
+    padding: var(--size-1_5) var(--size-2);
+  }
+
+  .active {
+    background-color: var(--color-secondary);
+    color: inherit !important;
+  }
+
+  .highlight {
+    background-color: transparent !important;
+  }
+
+  .spinner {
+    margin: var(--size-1_5) 0 0;
+  }
+
+  .spinner::after {
+    border-block-color: var(--color-border-dark);
+  }
+}
+
+.ts-wrapper.single .ts-control {
+  background-color: var(--color-bg) !important;
+  background-image: url("select-arrow.svg") !important;
+  background-position: center right var(--size-2) !important;
+  background-repeat: no-repeat !important;
+  background-size: var(--size-4) auto !important;
+}
+
+.ts-wrapper.multi .ts-control > .item {
+  background: var(--color-secondary);
+  border-radius: var(--rounded-md);
+  color: inherit;
+  margin: 0;
+}
+
+.disabled .ts-control {
+  opacity: var(--opacity-50);
+}
+
+.disabled .ts-control * {
+  cursor: not-allowed !important;
+}
+
+.invalid .ts-control {
+  border-color: var(--color-negative);
+}

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

@@ -0,0 +1,170 @@
+trix-toolbar {
+  inset-block-start: 0;
+  position: sticky;
+
+  .trix-button-row {
+    background-color: var(--color-bg);
+    border-block-width: 1px;
+    padding-block: var(--size-1_5);
+    gap: 1px;
+  }
+
+  .trix-button-group {
+    border: 0 !important;
+    margin: 0 !important;
+    gap: 1px;
+  }
+
+  .trix-button {
+    background-color: var(--color-bg);
+    border: 0 !important;
+    border-radius: var(--rounded-md);
+    color: var(--color-text);
+
+    &.trix-active {
+      background-color: var(--color-secondary);
+    }
+
+    &.trix-button--icon::before {
+      filter: var(--color-filter-text);
+      opacity: 1;
+    }
+
+    &.trix-button--icon:disabled::before {
+      opacity: 0.125;
+    }
+  }
+
+  .trix-dialog {
+    background-color: var(--color-border-light);
+    border: 1px solid var(--color-border);
+    border-radius: var(--rounded-md);
+    margin: var(--size-1);
+    box-shadow: var(--shadow-md);
+  }
+
+  .trix-input--dialog {
+    border-color: var(--color-border);
+    background-color: var(--color-bg);
+    margin: 0;
+  }
+
+  .trix-button--dialog {
+    margin-inline-start: var(--size-1_5);
+    background-color: var(--color-primary);
+    color: var(--color-text-reversed);
+  }
+
+  @media (max-width: 768px) {
+    .trix-button-group--history-tools { display: none; }
+  }
+}
+
+trix-editor {
+  border: 0;
+  min-block-size: var(--size-72);
+  padding-block: var(--size-6) var(--size-2);
+
+  &:empty:not(:focus)::before {
+    color: color-mix(in oklch, currentColor 50%, transparent);
+  }
+
+  [data-trix-mutable].attachment img,
+  [data-trix-mutable].attachment--content,
+  [data-trix-mutable].attachment--file {
+    box-shadow: 0 0 0 2px var(--color-selected-dark);
+  }
+
+  .attachment__metadata {
+    background-color: var(--color-border-light);
+    color: var(--color-text);
+  }
+
+  &:focus-visible {
+    outline: 0;
+  }
+}
+
+.trix-content {
+  & {
+    line-height: var(--leading-7);
+  }
+
+  a {
+    color: var(--color-link);
+    text-decoration: underline;
+  }
+
+  h1 {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-semibold);
+    line-height: var(--leading-8);
+    margin-block-end: var(--size-6);
+  }
+
+  blockquote {
+    border-inline-start: 2px solid var(--color-border);
+    font-style: italic;
+    margin: 0;
+    padding-inline-start: var(--size-6);
+    padding-inline-end: 0;
+  }
+
+  pre {
+    background-color: var(--color-border-light);
+    border-radius: var(--rounded-lg);
+    font-family: var(--font-monospace-code);
+    font-size: var(--text-sm);
+    line-height: var(--leading-5);
+    padding: var(--size-4);
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-inline-start: var(--size-6);
+  }
+
+  ol {
+    list-style-type: decimal;
+    margin-inline-start: var(--size-6);
+  }
+
+  li {
+    margin: 0;
+  }
+
+  img {
+    display: inline;
+  }
+
+  action-text-attachment {
+    display: contents;
+  }
+
+  .attachment:not(.attachment--file) {
+    .attachment__caption { display: none; }
+  }
+
+  .attachment--file {
+    color: var(--color--text);
+    border: 1px solid var(--color-border);
+  }
+
+  .attachment__progress {
+    background-color: var(--color-border-light);
+    border-radius: var(--rounded-full);
+    overflow: hidden;
+
+    &::-webkit-progress-bar {
+      background-color: var(--color-border-light);
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--color-primary);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--color-primary);
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+import { FetchRequest } from "@rails/request.js"
+
+const AUTOSAVE_INTERVAL = 3000
+
+export default class extends Controller {
+  static targets = [ "submitter" ]
+
+  #timer
+
+  disconnect() {
+    this.#submit()
+  }
+
+  change() {
+    !this.#dirty && this.#scheduleSave()
+    !this.#dirty && this.#updateAppearance()
+  }
+
+  async #submit() {
+    this.#dirty && await this.#save()
+  }
+
+  async #save() {
+    this.#updateAppearance(true)
+    this.#resetTimer()
+    await submitForm(this.element)
+    this.#updateAppearance()
+  }
+
+  #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
+    }
+  }
+
+  #scheduleSave() {
+    this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL)
+  }
+
+  #resetTimer() {
+    clearTimeout(this.#timer); this.#timer = null
+  }
+
+  get #dirty() {
+    return !!this.#timer
+  }
+}
+
+// Helpers
+
+async function submitForm(form) {
+  const request = new FetchRequest(form.method, form.action, {
+    body: new FormData(form)
+  })
+
+  return await request.perform()
+}

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

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+import { get } from "@rails/request.js"
+import TomSelect from "tom-select"
+
+export default class extends Controller {
+  static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
+
+  initialize() {
+    this.load = this.load.bind(this)
+  }
+
+  connect() {
+    if (this.element.nodeName === "INPUT") {
+      this.tomSelect = new TomSelect(this.element, this.#inputSettings)
+    } else {
+      this.tomSelect = new TomSelect(this.element, this.#selectSettings)
+    }
+  }
+
+  disconnect() {
+    this.tomSelect.destroy()
+  }
+
+  async load(query, callback) {
+    const response     = await get(this.urlValue, { responseKind: "json", query: { q: query } })
+    const jsonResponse = await response.json
+    callback(jsonResponse)
+  }
+
+  get #inputSettings() {
+    return { render: this.#render, load: this.hasUrlValue && this.load, persist: false, createOnBlur: true, create: true }
+  }
+
+  get #selectSettings() {
+    return { render: this.#render, load: this.hasUrlValue && this.load }
+  }
+
+  get #render() {
+    return {
+      option_create: (data, escape) => {
+        return `<div class="create">${this.optionCreateValue} <b>${escape(data.input)}</b>...</div>`
+      },
+      no_results: () =>  {
+        return `<div class="no-results">${this.noResultsValue}</div>`
+      }
+    }
+  }
+}

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

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus"
-import { debounce } from "helpers/timing_helpers"
 
 export default class extends Controller {
   static targets = [ "input", "copyIcon", "successIcon" ]
@@ -36,3 +35,14 @@ export default class extends Controller {
     this.successIconTarget.hidden = !this.copiedValue
   }
 }
+
+// Helpers
+
+function debounce(fn, delay = 1000) {
+  let timeoutId = null
+
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => fn.apply(this, args), delay)
+  }
+}

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

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus"
-import { debounce } from "helpers/timing_helpers"
 
 export default class extends Controller {
   static targets = [ "list" ]
@@ -42,3 +41,14 @@ export default class extends Controller {
     this.dispatch("after")
   }
 }
+
+// Helpers
+
+function debounce(fn, delay = 1000) {
+  let timeoutId = null
+
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => fn.apply(this, args), delay)
+  }
+}

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

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+import Inputmask from "inputmask"
+
+export default class extends Controller {
+  static values = {
+    mask:           String,
+    alias:          String,
+    groupSeparator: { type: String,  default: "" },
+    radixPoint:     { type: String,  default: "." },
+    digits:         { type: String,  default: "*" },
+    digitsOptional: { type: Boolean, default: true },
+    inputFormat:    { type: String,  default: "mm/dd/yyyy HH:MM" },
+    outputFormat:   { type: String,  default: "yyyy-mm-dd HH:MM" }
+  }
+
+  connect() {
+    if (this.hasMaskValue) {
+      Inputmask.default({ mask: this.maskValue }).mask(this.element)
+    } else if (this.aliasValue == "numeric") {
+      Inputmask.default(this.#numericOptions).mask(this.element)
+    } else if (this.aliasValue == "datetime") {
+      Inputmask.default(this.#datetimeOptions).mask(this.element)
+    }
+  }
+
+  get #numericOptions() {
+    return {
+      alias: "numeric",
+      unmaskAsNumber: true,
+      removeMaskOnSubmit: true,
+      groupSeparator: this.groupSeparatorValue,
+      radixPoint: this.radixPointValue,
+      digits: this.digitsValue,
+      digitsOptional: this.digitsOptionalValue
+    }
+  }
+
+  get #datetimeOptions() {
+    return {
+      alias: "datetime",
+      removeMaskOnSubmit: true,
+      inputFormat: this.inputFormatValue,
+      outputFormat: this.outputFormatValue
+    }
+  }
+}

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

@@ -1,12 +1,17 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "list", "option" ]
+  static targets = [ "option" ]
   static values  = { index: Number }
 
   connect() {
     this.#removeTabstops()
-    this.#selectFirstItem()
+    this.#selectFirstOption()
+  }
+
+  reset() {
+    this.indexValue = 0
+    this.#selectCurrentOption()
   }
 
   navigate(event) {
@@ -26,22 +31,17 @@ export default class extends Controller {
     }
   }
 
-  reset() {
-    this.indexValue = 0
-    this.#selectCurrentItem()
-  }
-
   #prev() {
     if (this.indexValue > 0) {
       this.indexValue--
-      this.#selectCurrentItem()
+      this.#selectCurrentOption()
     }
   }
 
   #next() {
     if (this.indexValue < this.#lastIndex) {
       this.indexValue++
-      this.#selectCurrentItem()
+      this.#selectCurrentOption()
     }
   }
 
@@ -53,13 +53,13 @@ export default class extends Controller {
     this.optionTargets.forEach(e => e.tabIndex = -1)
   }
 
-  #selectFirstItem() {
+  #selectFirstOption() {
     this.optionTargets.forEach((element, index) => {
       element.ariaSelected = index === 0
     })
   }
 
-  #selectCurrentItem() {
+  #selectCurrentOption() {
     this.optionTargets.forEach((element, index) => {
       element.ariaSelected = false
     })
@@ -69,11 +69,11 @@ export default class extends Controller {
     })
   }
 
-  get #lastIndex() {
-    return this.#visibleOptions.length -1
-  }
-
   get #visibleOptions() {
     return this.optionTargets.filter(e => e.offsetParent != null)
   }
+
+  get #lastIndex() {
+    return this.#visibleOptions.length -1
+  }
 }

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

@@ -8,6 +8,11 @@ export default class extends Controller {
     this.#updateTabstops()
   }
 
+  reset() {
+    this.indexValue = 0
+    this.#updateTabstops()
+  }
+
   prev() {
     if (this.indexValue > 0) {
       this.indexValue--
@@ -24,11 +29,6 @@ export default class extends Controller {
     }
   }
 
-  reset() {
-    this.indexValue = 0
-    this.#updateTabstops()
-  }
-
   #updateTabstops() {
     this.itemTargets.forEach((element, index) => {
       element.tabIndex = index === this.indexValue ? 0 : -1

data/lib/generators/css_zero/install/install_generator.rb

@@ -6,28 +6,4 @@ class CssZero::InstallGenerator < Rails::Generators::Base
   def copy_base_css
     copy_file "app/assets/stylesheets/base.css"
   end
-
-  def copy_javascript_helpers
-    directory "app/javascript/helpers"
-  end
-
-  def pin_javascript_helpers
-    return unless install_with_importmap?
-    append_to_file "config/importmap.rb", %(pin_all_from "app/javascript/helpers", under: "helpers"\n)
-  end
-
-  def copy_javascript_initializers
-    copy_file "app/javascript/initializers/index.js"
-  end
-
-  def pin_javascript_initializers
-    return unless install_with_importmap?
-    append_to_file "config/importmap.rb", %(pin_all_from "app/javascript/initializers", under: "initializers"\n)
-    append_to_file "app/javascript/application.js", %(import "initializers"\n)
-  end
-
-  private
-    def install_with_importmap?
-      Rails.root.join("config/importmap.rb").exist?
-    end
 end

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

@@ -47,8 +47,8 @@
     --color-filter-text: invert(100%);
     --color-filter-text-reversed: invert(2%) sepia(3%) saturate(3904%) hue-rotate(201deg) brightness(98%) contrast(97%);
     --color-filter-text-subtle: invert(76%) sepia(8%) saturate(230%) hue-rotate(201deg) brightness(84%) contrast(87%);
-    --color-filter-negative: invert(16%) sepia(62%) saturate(2100%) hue-rotate(337deg) brightness(92%) contrast(100%);
-    --color-filter-positive: invert(21%) sepia(62%) saturate(549%) hue-rotate(91deg) brightness(101%) contrast(91%);
+    --color-filter-negative: invert(54%) sepia(16%) saturate(2119%) hue-rotate(313deg) brightness(111%) contrast(94%);
+    --color-filter-positive: invert(81%) sepia(23%) saturate(1237%) hue-rotate(80deg) brightness(95%) contrast(83%);
   }
 }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.50
+  version: 0.0.52
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-18 00:00:00.000000000 Z
+date: 2024-10-27 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -80,11 +80,16 @@ 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/tom-select.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.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/carousel_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/combobox_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
@@ -92,6 +97,7 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/inputmask_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/list_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js
@@ -104,9 +110,6 @@ files:
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb
 - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
-- lib/generators/css_zero/install/templates/app/javascript/helpers/cookie_helpers.js
-- lib/generators/css_zero/install/templates/app/javascript/helpers/timing_helpers.js
-- lib/generators/css_zero/install/templates/app/javascript/initializers/index.js
 homepage: https://github.com/lazaronixon/css-zero
 licenses:
 - MIT

data/lib/generators/css_zero/install/templates/app/javascript/helpers/cookie_helpers.js

@@ -1,18 +0,0 @@
-export function getCookie(name) {
-  const cookies = document.cookie ? document.cookie.split("; ") : []
-  const prefix = `${encodeURIComponent(name)}=`
-  const cookie = cookies.find(cookie => cookie.startsWith(prefix))
-
-  if (cookie) {
-    const value = cookie.split("=").slice(1).join("=")
-    return value ? decodeURIComponent(value) : undefined
-  }
-}
-
-export function setCookie(name, value) {
-  const twentyYears = 20 * 365 * 24 * 60 * 60 * 1000
-  const body = [ name, value ].map(encodeURIComponent).join("=")
-  const expires = new Date(Date.now() + twentyYears).toUTCString()
-  const cookie = `${body}; path=/; expires=${expires}`
-  document.cookie = cookie
-}

data/lib/generators/css_zero/install/templates/app/javascript/helpers/timing_helpers.js

@@ -1,39 +0,0 @@
-export function throttle(fn, delay = 1000) {
-  let timeoutId = null
-
-  return (...args) => {
-    if (!timeoutId) {
-      fn(...args)
-      timeoutId = setTimeout(() => timeoutId = null, delay)
-    }
-  }
-}
-
-export function debounce(fn, delay = 1000) {
-  let timeoutId = null
-
-  return (...args) => {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => fn.apply(this, args), delay)
-  }
-}
-
-export function nextEventLoopTick() {
-  return delay(0)
-}
-
-export function onNextEventLoopTick(callback) {
-  setTimeout(callback, 0)
-}
-
-export function nextFrame() {
-  return new Promise(requestAnimationFrame)
-}
-
-export function nextEventNamed(eventName, element = window) {
-  return new Promise(resolve => element.addEventListener(eventName, resolve, { once: true }))
-}
-
-export function delay(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}

data/lib/generators/css_zero/install/templates/app/javascript/initializers/index.js

@@ -1,2 +0,0 @@
-// import "initializers/current"
-// import "initializers/time_zone_cookie"