css-zero 0.0.88 → 0.0.90

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f20c3843535ad4d32cab0c21e7811348fb80b10912bbcbe473529087025c992
-  data.tar.gz: 313245a13b9bcbb3be95d251aa9e9abed429193dba4e34973a49d58b45fd8c20
+  metadata.gz: b44ee5e7f531ea6761accf968ed464f3766ae14359863a9709668751d7edb340
+  data.tar.gz: f7fe90b26adc996d5021630c42fdc51125c73295f00c4e1ea013e96576396d51
 SHA512:
-  metadata.gz: b2feb534627b74ef9179992852b27f92c051d27215dd715d0c4bccd5292a1b1c3a13374e365fc834d9ad8b038fa8545a5a2532aa8aae9a3ebfef7322ea014576
-  data.tar.gz: 621c3f0c6988b6336afe125eab72198d97a1d7911b2174e190b51cdcf5de763a400074857f877447f7e28d15f8ab7a6906c9e799ffa684ab5033ba6b2b762101
+  metadata.gz: 2a6b206ffbfef92cb16383dde1e66954dcb9f7764dc9c8915d11c60f7e4a122d82212cd2efde6f7b2abf56cbcc526fc9ba1bd4cfffef2bb826017d8b76101335
+  data.tar.gz: 589955584927999aab31a94e6796908dace0bc9326936f9d31c86e871cb07bf60b3d4e359898b86a27555b0cb0ce6e4daecbe679a83d1207563931da5ead8372

data/app/assets/stylesheets/_reset.css

@@ -355,6 +355,14 @@ input:where([type='button'], [type='reset'], [type='submit']),
   block-size: auto;
 }
 
+/*
+  Correct the arrow style of datalist in Chrome.
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1em;
+}
+
 /*
   Enables size interpolation to allow animation.
 */

data/app/assets/stylesheets/zutilities.css

@@ -26,7 +26,7 @@
 .self-center { align-self: center; }
 
 .gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
-.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }
+.gap-half { column-gap: 0.5rem; row-gap: 0.5rem; }
 
 /****************************************************************
 * Text

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.88"
+  VERSION = "0.0.90"
 end

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

@@ -1,12 +1,13 @@
 :where(.accordion) {
   details {
     border-block-end-width: var(--border);
+    font-size: var(--text-sm);
     overflow: hidden;
 
     &::details-content {
       block-size: 0;
       transition-behavior: allow-discrete;
-      transition-duration: var(--time-150);
+      transition-duration: var(--time-200);
       transition-property: content-visibility block-size;
     }
 

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

@@ -3,8 +3,9 @@
   border-radius: var(--rounded-lg);
   border-width: var(--border);
   color: var(--alert-color, var(--color-text));
-  padding: var(--size-4);
+  font-size: var(--text-sm);
   inline-size: var(--size-full);
+  padding: var(--size-4);
 
   img {
     filter: var(--alert-icon-color, var(--color-filter-text));

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

@@ -1,7 +1,8 @@
 .badge {
   background-color: var(--badge-background, var(--color-bg));
-  border-radius: var(--rounded-full);
+  border-radius: var(--rounded-md);
   border: 1px solid var(--badge-border-color, var(--color-border));
+  box-shadow: var(--badge-box-shadow, none);
   color: var(--badge-color, var(--color-text));
   display: inline-flex;
   font-size: var(--text-xs);
@@ -12,23 +13,27 @@
 .badge--primary {
   --badge-background: var(--color-primary);
   --badge-border-color: transparent;
+  --badge-box-shadow: var(--shadow);
   --badge-color: var(--color-text-reversed);
 }
 
 .badge--secondary {
   --badge-background: var(--color-secondary);
   --badge-border-color: transparent;
+  --badge-box-shadow: none;
   --badge-color: var(--color-text);
 }
 
 .badge--positive {
   --badge-background: var(--color-positive);
   --badge-border-color: transparent;
+  --badge-box-shadow: var(--shadow);
   --badge-color: white;
 }
 
 .badge--negative {
   --badge-background: var(--color-negative);
   --badge-border-color: transparent;
+  --badge-box-shadow: var(--shadow);
   --badge-color: white;
 }

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

@@ -5,6 +5,7 @@
   background-color: var(--btn-background);
   border-radius: var(--btn-radius, var(--rounded-md));
   border: 1px solid var(--btn-border-color, var(--color-border));
+  box-shadow: var(--btn-box-shadow, var(--shadow-sm));
   color: var(--btn-color, var(--color-text));
   cursor: pointer;
   display: inline-flex;
@@ -13,7 +14,7 @@
   gap: var(--size-2);
   inline-size: var(--btn-inline-size, auto);
   justify-content: var(--btn-justify-content, center);
-  padding: var(--btn-padding, 0.5rem 1rem);
+  padding: var(--btn-padding, 0.375rem 1rem);
   text-align: center;
   white-space: nowrap;
 
@@ -50,6 +51,7 @@
 
 .btn--borderless {
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
 }
 
 .btn--positive {
@@ -71,6 +73,7 @@
   --btn-border-color: transparent;
   --btn-hover-color: transparent;
   --btn-padding: 0;
+  --btn-box-shadow: none;
 }
 
 .btn--icon {
@@ -91,9 +94,9 @@
     animation: spin 1s linear infinite;
     background-image: url("loader-circle.svg");
     background-size: cover;
-    block-size: var(--size-4);
+    block-size: var(--size-5);
     content: "";
-    inline-size: var(--size-4);
+    inline-size: var(--size-5);
     position: absolute;
   }
 }

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

@@ -1,7 +1,7 @@
 .card {
   background-color: var(--color-bg);
-  border-radius: var(--rounded-lg);
+  border-radius: var(--rounded-xl);
   border-width: var(--border);
   padding: var(--size-6);
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow);
 }

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

@@ -10,7 +10,7 @@
   --input-background: transparent;
   --input-border-color: transparent;
   --input-outline-size: 0;
-  --input-padding: 0.75rem 1rem;
+  --input-padding: var(--size-2_5);
 }
 
 .command__list {
@@ -44,11 +44,12 @@
 
 .command__item {
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
   --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
-  --btn-padding: var(--size-1_5) var(--size-2);
+  --btn-padding: 0.375rem 0.5rem;
 
   &[aria-selected=true] {
     --btn-background: var(--color-secondary);

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

@@ -16,13 +16,13 @@
   opacity: 0;
   transform: var(--scale-95);
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-150);
+  transition-duration: var(--time-200);
   transition-property: display, overlay, opacity, transform;
 
   &::backdrop {
     opacity: 0;
     transition-behavior: allow-discrete;
-    transition-duration: var(--time-150);
+    transition-duration: var(--time-200);
     transition-property: display, overlay, opacity;
   }
 

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

@@ -3,10 +3,11 @@
   background-color: var(--input-background, var(--color-bg));
   border: 1px solid var(--input-border-color, var(--color-border));
   border-radius: var(--input-radius, var(--rounded-md));
+  box-shadow: var(--input-box-shadow, var(--shadow-sm));
   font-size: var(--input-font-size, var(--text-sm));
   inline-size: var(--input-inline-size, var(--size-full));
-  min-block-size: var(--input-block-size, var(--size-10));
-  padding: var(--input-padding, 0.5rem 0.75rem);
+  min-block-size: var(--input-block-size, var(--size-9));
+  padding: var(--input-padding, 0.375rem 0.75rem);
 
   option {
     padding-block: 2px;

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

@@ -22,11 +22,12 @@
 
 .menu__item {
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
   --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
-  --btn-padding: var(--size-1_5) var(--size-2);
+  --btn-padding: 0.375rem 0.5rem;
 
   &:focus-visible {
     --btn-background: var(--color-secondary);

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

@@ -20,7 +20,7 @@
   }
 
   th, td {
-    padding: var(--size-4);
+    padding: var(--size-2);
   }
 
   tfoot {

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

@@ -1,6 +1,6 @@
 .tabs__list {
   background-color: var(--color-border-light);
-  block-size: var(--size-10);
+  block-size: var(--size-9);
   border-radius: var(--rounded-md);
   color: var(--color-text-subtle);
   display: inline-flex;
@@ -11,6 +11,7 @@
 .btn--tab {
   --btn-background: transparent;
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
   --btn-hover-color: transparent;
   --btn-inline-size: var(--size-full);
 

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

@@ -25,6 +25,26 @@
   font-size: var(--text-sm);
   line-height: inherit;
 
+  /* Setup animation */
+  opacity: 0;
+  transform: var(--scale-95);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-150);
+  transition-property: display, opacity, transform;
+
+  /* In animation */
+  .dropdown-active & {
+    opacity: 1;
+    transform: var(--scale-100);
+  }
+
+  /* Out animation */
+  @starting-style {
+    .dropdown-active & {
+      opacity: 0; transform: var(--scale-95);
+    }
+  }
+
   .ts-dropdown-content:not(:has(.optgroup)) {
     padding: var(--size-1);
   }

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.11?standalone"
-import TomSelect from "https://esm.sh/tom-select@2.4.1?standalone"
+import TomSelect from "https://esm.sh/tom-select@2.4.1/base?standalone"
 
 export default class extends Controller {
   static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }

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

@@ -1,50 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
-import Inputmask from "https://esm.sh/inputmask@5.0.9?standalone"
+import { MaskInput } from "https://esm.sh/maska@3.0.4?standalone"
 
 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({ mask: this.maskValue }).mask(this.element)
-    } else if (this.aliasValue == "numeric") {
-      Inputmask(this.#numericOptions).mask(this.element)
-    } else if (this.aliasValue == "datetime") {
-      Inputmask(this.#datetimeOptions).mask(this.element)
-    }
+    this.mask = new MaskInput(this.element)
   }
 
   disconnect() {
-    Inputmask.remove(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
-    }
+    this.mask.destroy()
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.88
+  version: 0.0.90
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-13 00:00:00.000000000 Z
+date: 2025-01-16 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com