css-zero 0.0.49 → 0.0.51

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20f634891b019d8f1daeb601e8c4f095ad0bc4a0e17e4dc8af56a265a8d578d3
-  data.tar.gz: 1be7e6e2f94347c1419523f814f60f11bac915072c171a3d657d50cf576b8ab0
+  metadata.gz: d7b5b639f94e6c5d8362049f9496337a8663596c34ba69fc2fab9937237ad52f
+  data.tar.gz: 0e7b620c61ff7d92478bf8a72aa5def5d38c794fb09751c0187132cffbd00a78
 SHA512:
-  metadata.gz: e49c19d5180e28cbfce2db4d3f7c21205de6708d8ef4cd340622846b52a4d089a7a32f829859e41577d68251e9d4f64cbaad629bf0d114ea9ad86087cdbe55d4
-  data.tar.gz: d2855e45ea3959712e2736746fdc1da91e0266da4bff2c0db1629317e5cff53eb4b32392841ef93b3b42e218ed369dc375bdc8249776c30e62a3cb6a8e640f2d
+  metadata.gz: '0967b454d96821399b2447aea998d65726f179e80d5da8e1ec4a25df13fdf17b0fd33f7c3889e996418d909a86403ddde7771a1e1b77a83af925ee5b481f69bf'
+  data.tar.gz: 60449d04636f9cd001f7415aec961bcdd05e81249bcd990900ce1c850d92fc8d0d755c16027377cf146e468165888d5bfd1f3c5134275260808fab4b0045daee

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.49"
+  VERSION = "0.0.51"
 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 avatar badge breadcrumb button card carousel combobox 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 trix upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -20,11 +20,17 @@ 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:
   - app/assets/stylesheets/command.css
   - app/javascript/controllers/filter_controller.js
+  - app/javascript/controllers/list_controller.js
   - app/assets/images/search.svg
 collapsible:
   - app/javascript/controllers/collapsible_controller.js
@@ -95,6 +101,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/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,16 +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);
 
-  &:hover {
-    --btn-background: var(--color-secondary);
-  }
-
-  &:focus-visible {
+  &[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,15 +23,11 @@
 .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);
 
-  &:hover {
-    --btn-background: var(--color-secondary);
-  }
-
   &: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 srgb, 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/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, create: { 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.createValue} <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" ]
@@ -27,16 +26,29 @@ export default class extends Controller {
   }
 
   #selectMatches(value) {
-    this.listTarget.querySelectorAll(`[data-value*=${value.toLowerCase()}]`).forEach((element) => {
+    this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach((element) => {
       element.classList.add(this.selectedClass)
     })
   }
 
   #activate() {
     this.listTarget.classList.add(this.activeClass)
+    this.dispatch("after")
   }
 
   #deactivate() {
     this.listTarget.classList.remove(this.activeClass)
+    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/list_controller.js

@@ -0,0 +1,79 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "option" ]
+  static values  = { index: Number }
+
+  connect() {
+    this.#removeTabstops()
+    this.#selectFirstOption()
+  }
+
+  reset() {
+    this.indexValue = 0
+    this.#selectCurrentOption()
+  }
+
+  navigate(event) {
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault()
+        this.#prev()
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        this.#next()
+        break
+      case "Enter":
+        event.preventDefault()
+        this.#clickSelected()
+        break
+    }
+  }
+
+  #prev() {
+    if (this.indexValue > 0) {
+      this.indexValue--
+      this.#selectCurrentOption()
+    }
+  }
+
+  #next() {
+    if (this.indexValue < this.#lastIndex) {
+      this.indexValue++
+      this.#selectCurrentOption()
+    }
+  }
+
+  #clickSelected() {
+    this.#visibleOptions[this.indexValue]?.click()
+  }
+
+  #removeTabstops() {
+    this.optionTargets.forEach(e => e.tabIndex = -1)
+  }
+
+  #selectFirstOption() {
+    this.optionTargets.forEach((element, index) => {
+      element.ariaSelected = index === 0
+    })
+  }
+
+  #selectCurrentOption() {
+    this.optionTargets.forEach((element, index) => {
+      element.ariaSelected = false
+    })
+
+    this.#visibleOptions.forEach((element, index) => {
+      element.ariaSelected = index === this.indexValue
+    })
+  }
+
+  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

@@ -4,43 +4,42 @@ export default class extends Controller {
   static targets = [ "item" ]
   static values  = { index: Number }
 
-  #observer
-
-  initialize() {
-    this.#observer = new IntersectionObserver(this.#resetOnVisible.bind(this))
-  }
-
   connect() {
-    this.#observer.observe(this.element)
+    this.#updateTabstops()
   }
 
-  disconnect() {
-    this.#observer.disconnect()
-  }
-
-  indexValueChanged(index, previousIndex) {
-    this.#updateTabstops(previousIndex !== undefined)
+  reset() {
+    this.indexValue = 0
+    this.#updateTabstops()
   }
 
   prev() {
-    this.indexValue > 0 && this.indexValue--
+    if (this.indexValue > 0) {
+      this.indexValue--
+      this.#updateTabstops()
+      this.#focusCurrentItem()
+    }
   }
 
   next() {
-    this.indexValue < this.itemTargets.length -1 && this.indexValue++
-  }
-
-  #resetOnVisible([ entry ]) {
-    if (entry.isIntersecting) this.indexValue = 0
+    if (this.indexValue < this.#lastIndex) {
+      this.indexValue++
+      this.#updateTabstops()
+      this.#focusCurrentItem()
+    }
   }
 
-  #updateTabstops(shouldFocus) {
+  #updateTabstops() {
     this.itemTargets.forEach((element, index) => {
-      element.tabIndex = index == this.indexValue ? 0 : -1
+      element.tabIndex = index === this.indexValue ? 0 : -1
     })
+  }
 
-    if (shouldFocus) {
-      this.itemTargets[this.indexValue].focus()
-    }
+  #focusCurrentItem() {
+    this.itemTargets[this.indexValue].focus()
+  }
+
+  get #lastIndex() {
+    return this.itemTargets.length -1
   }
 }

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

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.49
+  version: 0.0.51
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-17 00:00:00.000000000 Z
+date: 2024-10-24 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -80,11 +80,15 @@ 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/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
@@ -93,6 +97,7 @@ files:
 - 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/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
 - lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js
@@ -103,9 +108,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"