css-zero 0.0.29 → 0.0.30

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3cda5cb9b3086b51114cccdb4a7a10902beac2812c1998c4cae31ae3563c5b47
-  data.tar.gz: c6d552de01e769780b38865095f24ad74a14a1abfbdaff41fe93d8d88af025da
+  metadata.gz: f8c460c71199f0ee11915508660def66aba8330d9e7ff2693233e370ffc71818
+  data.tar.gz: a1b3716a3b9bb396dd50e233f74a6ed55aaa36489ec5aa80508ed4c5646306a0
 SHA512:
-  metadata.gz: c24dd54fb996f9e988fe204c48c60118d1de4a68effcd67cbda29e821fc00a6b16cacfda5e6e642d8bc3fbffa6497ee098d2c1c1930924d65c4856383a0ea786
-  data.tar.gz: 9a085d56fe698c68c736788ae62f193adab29d03761f77c8d03f8246d32c6c423aef5780a940d6fddb210e480d18e92a21bfb3df2df2f57185d1d39707c61520
+  metadata.gz: 45dfd49b4086d13457f904a5a7d99d26f2065b9f7ab1033e335f273f0bccc17542d6ae75194f26e84224002ebb569c41a54365c4e97e1eb799ef2d77a05eb73e
+  data.tar.gz: 2b1490c0232e5ba74b08565b9172d428d8578936cef764f443c80bf56619636c930df35ff30f6b1c2d44e8d368a960b5b709a5950dfde6e2e5540131dd714f34

data/README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table toggle
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input layouts pagination progress prose sheet skeleton switch table tabs toggle
 ```
 
 ### Requirements

data/app/assets/stylesheets/_reset.css

@@ -335,7 +335,7 @@ turbo-frame {
 */
 
 [hidden] {
-  display: none;
+  display: none !important;
 }
 
 /*
@@ -343,5 +343,5 @@ turbo-frame {
 */
 
 [contents] {
-  display: contents;
+  display: contents !important;
 }

data/app/assets/stylesheets/transform.css

@@ -2,7 +2,7 @@
   /****************************************************************
   * Scale
   * Variables for scaling elements with transform.
-  * transform: scale(--scale-100);
+  * transform: var(--scale-100);
   *****************************************************************/
   --scale-50:  scale(0.50);
   --scale-75:  scale(0.75);

data/app/assets/stylesheets/zutilities.css

@@ -110,8 +110,12 @@
 *****************************************************************/
 .border-0 { border-width: 0; }
 .border { border-width: var(--border-size, 1px); }
+
+.border-b { border-block-width: var(--border-size, 1px); }
 .border-bs { border-block-start-width: var(--border-size, 1px); }
 .border-be { border-block-end-width: var(--border-size, 1px); }
+
+.border-i { border-inline-width: var(--border-size, 1px); }
 .border-is { border-inline-start-width: var(--border-size, 1px); }
 .border-ie { border-inline-end-width: var(--border-size, 1px); }
 
@@ -156,6 +160,7 @@
 
 .h-full { block-size: 100%; }
 .w-full { inline-size: 100%; }
+.w-min { inline-size: min-content; }
 
 .overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; }
 .overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }

data/app/helpers/tabs_helper.rb

@@ -0,0 +1,5 @@
+module TabsHelper
+  def tab_button(content = nil, value:, **, &)
+    tag.button(content, data: { tabs_target: "button", action: "tabs#select", value: }, **, &)
+  end
+end

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.29"
+  VERSION = "0.0.30"
 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 collapsible dialog flash input pagination progress prose sheet skeleton switch table toggle
+  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input layouts pagination progress prose sheet skeleton switch table tabs toggle
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -32,6 +32,8 @@ flash:
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg
+layouts:
+  - app/assets/stylesheets/layouts.css
 pagination:
   - app/assets/stylesheets/pagination.css
   - app/assets/images/chevron-right.svg
@@ -51,5 +53,8 @@ switch:
   - app/assets/stylesheets/switch.css
 table:
   - app/assets/stylesheets/table.css
+tabs:
+  - app/assets/stylesheets/tabs.css
+  - app/javascript/controllers/tabs_controller.js
 toggle:
   - app/assets/stylesheets/toggle.css

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

@@ -1,7 +1,7 @@
 .input {
   appearance: none;
   background-color: var(--color-bg);
-  border-color: var(--color-border);
+  border: var(--border) solid var(--color-border);
   border-radius: var(--rounded-md);
   font-size: var(--text-sm);
   inline-size: var(--size-full);
@@ -30,11 +30,6 @@
     margin-inline-end: var(--size-2);
   }
 
-  &:-webkit-autofill {
-    -webkit-text-fill-color: var(--color-text);
-    -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
-  }
-
   &:user-invalid {
     border-color: var(--color-negative);
   }
@@ -49,6 +44,24 @@
   }
 }
 
+/* Containers that act like (and contain) inputs */
+.input--actor {
+  &:focus-within {
+    outline: var(--border-2) solid var(--color-selected-dark);
+    outline-offset: var(--border-2);
+  }
+
+  &:has(:-webkit-autofill) {
+    -webkit-text-fill-color: var(--color-text);
+    -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
+  }
+
+  .input__character {
+    border: 0; inline-size: 100%; outline: 0;
+  }
+}
+
+/* Checkbox, radio, and range */
 .checkbox, .radio {
   accent-color: var(--color-primary);
   transform: scale(1.15);
@@ -58,6 +71,7 @@
   accent-color: var(--color-primary);
 }
 
+/* Styles that are shared between components */
 :is(.input, .checkbox, .radio, .range) {
   &:focus-visible {
     outline: var(--border-2) solid var(--color-selected-dark);

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

@@ -0,0 +1,47 @@
+.layout-sidebar {
+  display: grid;
+  grid-template-areas: "header header" "sidebar main";
+  grid-template-columns: var(--sidebar-width, 0) 1fr;
+  grid-template-rows: auto 1fr;
+  min-block-size: 100dvh;
+
+  @media (width >= 48rem) {
+    --sidebar-width: 220px;
+  }
+
+  @media (width >= 64rem) {
+    --sidebar-width: 280px;
+  }
+}
+
+.layout-pancake {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-block-size: 100dvh;
+}
+
+.layout-centered {
+  display: grid;
+  place-content: center;
+  min-block-size: 100dvh;
+}
+
+.container {
+  margin-inline: auto;
+  max-inline-size: var(--container-width, 64rem);
+  min-block-size: 100dvh;
+}
+
+/* Grid areas definition */
+
+#header {
+  grid-area: header;
+}
+
+#sidebar {
+  grid-area: sidebar;
+}
+
+#main {
+  grid-area: main;
+}

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

@@ -5,7 +5,7 @@
   block-size: 100%;
   color: var(--color-text);
   inline-size: var(--size-3-4);
-  margin-inline-start: auto;
+  margin-inline: var(--sheet-margin);
   max-block-size: none;
   max-inline-size: var(--width-sm);
   padding: var(--size-6);
@@ -15,7 +15,7 @@
   }
 
   /* Setup animation */
-  transform: translateX(100%);
+  transform: var(--sheet-transform);
   transition-behavior: allow-discrete;
   transition-duration: var(--time-500);
   transition-property: display, overlay, transform;
@@ -39,7 +39,7 @@
   /* Out animation */
   @starting-style {
     &[open] {
-      transform: translateX(100%);
+      transform: var(--sheet-transform);
     }
 
     &[open]::backdrop {
@@ -52,6 +52,16 @@
   }
 }
 
+.sheet--left {
+  --sheet-margin: 0 auto;
+  --sheet-transform: translateX(-100%);
+}
+
+.sheet--right {
+  --sheet-margin: auto 0;
+  --sheet-transform: translateX(100%);
+}
+
 .sheet__close {
   inset-block-start: var(--size-4);
   inset-inline-end: var(--size-4);

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

@@ -11,7 +11,7 @@
   }
 
   tr:hover {
-    background-color: var(--color-border-light);
+    background-color: hsl(from var(--color-border-light) h s l / .5);
   }
 
   th {

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

@@ -0,0 +1,24 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-2);
+}
+
+.tabs__list {
+  background-color: var(--color-border-light);
+  block-size: var(--size-10);
+  border-radius: var(--rounded-md);
+  color: var(--color-text-subtle);
+  display: inline-flex;
+  gap: var(--size-2);
+  padding: var(--size-1);
+
+  button {
+    inline-size: var(--size-full);
+  }
+
+  button[data-selected=true] {
+    --btn-background: var(--color-bg);
+    --btn-color: var(--color-text);
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "button", "tab" ]
+  static values = { selected: String }
+
+  initialize() {
+    this.#showSelectedTab()
+  }
+
+  select(event) {
+    this.selectedValue = event.target.dataset.value
+    this.#showSelectedTab()
+  }
+
+  #showSelectedTab() {
+    this.buttonTargets.forEach(element => {
+      element.dataset.selected = element.dataset.value === this.selectedValue
+    })
+
+    this.tabTargets.forEach(element => {
+      element.hidden = element.dataset.value !== this.selectedValue
+    })
+  }
+}

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

@@ -70,3 +70,8 @@ body {
 ::selection {
   background-color: var(--color-selected);
 }
+
+:-webkit-autofill {
+  -webkit-text-fill-color: var(--color-text);
+  -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.29
+  version: 0.0.30
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-07 00:00:00.000000000 Z
+date: 2024-08-29 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -30,6 +30,7 @@ files:
 - app/assets/stylesheets/typography.css
 - app/assets/stylesheets/zutilities.css
 - app/helpers/dialog_helper.rb
+- app/helpers/tabs_helper.rb
 - lib/css-zero.rb
 - lib/css_zero/engine.rb
 - lib/css_zero/version.rb
@@ -57,6 +58,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
@@ -64,11 +66,13 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
 - 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/javascript/controllers/carousel_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_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
+- lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
 - 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