css-zero 0.0.28 → 0.0.30

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d00718d05a40dc614c0fda5d71c5959ad693c89e1fd5493c132a5d4144cbe5e
-  data.tar.gz: b1f8b29d85f5ba031dfd416a80c57dc12d1b0903e0881c2e4cac3d18e2a39aa8
+  metadata.gz: f8c460c71199f0ee11915508660def66aba8330d9e7ff2693233e370ffc71818
+  data.tar.gz: a1b3716a3b9bb396dd50e233f74a6ed55aaa36489ec5aa80508ed4c5646306a0
 SHA512:
-  metadata.gz: 6e0e3afefccb4f99330a9c3a3942b8619714b8152dd24e04bb421029f55fdff57ec3e1fbde841036151586235e5dcc07a505f0d713d661e15dbfcb37477e9653
-  data.tar.gz: f4207685a64ce0a9b70cc1553aa6cede199c9eda2238823c1f713a4049d38992e8fe28b76c64678c6854fc627144a283bba92b2314ac2f6958b3546bef9d001c
+  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
@@ -52,7 +52,6 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
 *= require transform
 *= require transition
 *= require typography
-*= require zindex
 *= require_tree .
 *= require_self
 *= require zutilities

data/app/assets/stylesheets/_reset.css

@@ -44,7 +44,6 @@ html:has(dialog:modal[open]) {
   overflow: hidden;
 }
 
-
 /*
   Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
@@ -202,14 +201,6 @@ input:where([type='button'], [type='reset'], [type='submit']),
   appearance: button;
 }
 
-/*
-  Revert padding block, it can be noticed in select with multiple.
-*/
-
-option {
-  padding-block: revert;
-}
-
 /*
   Use the modern Firefox focus style for all focusable elements.
 */
@@ -303,14 +294,6 @@ textarea {
   color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
 }
 
-/*
-  Make sure disabled buttons don't get the pointer cursor.
-*/
-
-:disabled {
-  cursor: default;
-}
-
 /*
   1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
   2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
@@ -352,7 +335,7 @@ turbo-frame {
 */
 
 [hidden] {
-  display: none;
+  display: none !important;
 }
 
 /*
@@ -360,5 +343,5 @@ turbo-frame {
 */
 
 [contents] {
-  display: contents;
+  display: contents !important;
 }

data/app/assets/stylesheets/filters.css

@@ -106,27 +106,27 @@
   /****************************************************************
   * Opacity
   * Utilities for applying backdrop opacity filters to an element.
-  * backdrop-filter: var(--opaqueness-45);
+  * backdrop-filter: var(--alpha-45);
   *****************************************************************/
-  --opaqueness-0:	  opacity(0);
-  --opaqueness-5:	  opacity(0.05);
-  --opaqueness-10:	opacity(0.1);
-  --opaqueness-15:	opacity(0.15);
-  --opaqueness-20:	opacity(0.2);
-  --opaqueness-25:	opacity(0.25);
-  --opaqueness-30:	opacity(0.3);
-  --opaqueness-35:	opacity(0.35);
-  --opaqueness-40:	opacity(0.4);
-  --opaqueness-45:	opacity(0.45);
-  --opaqueness-50:	opacity(0.5);
-  --opaqueness-55:	opacity(0.55);
-  --opaqueness-60:	opacity(0.6);
-  --opaqueness-65:	opacity(0.65);
-  --opaqueness-70:	opacity(0.7);
-  --opaqueness-75:	opacity(0.75);
-  --opaqueness-80:	opacity(0.8);
-  --opaqueness-85:	opacity(0.85);
-  --opaqueness-90:	opacity(0.9);
-  --opaqueness-95:	opacity(0.95);
-  --opaqueness-100: opacity(1);
+  --alpha-0:	 opacity(0);
+  --alpha-5:	 opacity(0.05);
+  --alpha-10:	 opacity(0.1);
+  --alpha-15:	 opacity(0.15);
+  --alpha-20:	 opacity(0.2);
+  --alpha-25:	 opacity(0.25);
+  --alpha-30:	 opacity(0.3);
+  --alpha-35:	 opacity(0.35);
+  --alpha-40:	 opacity(0.4);
+  --alpha-45:	 opacity(0.45);
+  --alpha-50:	 opacity(0.5);
+  --alpha-55:	 opacity(0.55);
+  --alpha-60:	 opacity(0.6);
+  --alpha-65:	 opacity(0.65);
+  --alpha-70:	 opacity(0.7);
+  --alpha-75:	 opacity(0.75);
+  --alpha-80:	 opacity(0.8);
+  --alpha-85:	 opacity(0.85);
+  --alpha-90:	 opacity(0.9);
+  --alpha-95:	 opacity(0.95);
+  --alpha-100: opacity(1);
 }

data/app/assets/stylesheets/sizes.css

@@ -88,11 +88,7 @@
   * Aspect Ratio
   *****************************************************************/
   --aspect-square: 1/1;
-  --aspect-landscape: 4/3;
-  --aspect-portrait: 3/4;
   --aspect-widescreen: 16/9;
-  --aspect-ultrawide: 18/5;
-  --aspect-golden: 1.6180/1;
 
   /****************************************************************
   * Breakpoints

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/transition.css

@@ -4,8 +4,8 @@
   * Variables for controlling which CSS properties transition.
   * transition-property: var(--transition);
   *****************************************************************/
-  --transition:        background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-  --transition-colors: background-color, border-color, color, fill, stroke;
+  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
+  --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
 
   /****************************************************************
   * Transition Timing
@@ -24,9 +24,8 @@
   /****************************************************************
   * Transition Timing Function
   * Variables for controlling the easing of CSS transitions.
-  * transition-timing-function: var(--ease-linear);
+  * transition-timing-function: var(--ease-in);
   *****************************************************************/
-  --ease-linear: linear;
   --ease-in:     cubic-bezier(0.4, 0, 1, 1);
   --ease-out:    cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

data/app/assets/stylesheets/zutilities.css

@@ -28,37 +28,6 @@
 .gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
 .gap-sm { column-gap: 0.5rem; row-gap: 0.5rem; }
 
-/****************************************************************
-* Grid
-*****************************************************************/
-.grid { display: grid; }
-
-.grid-cols-1 { grid-template-columns: var(--grid-1); }
-.grid-cols-2 { grid-template-columns: var(--grid-2); }
-.grid-cols-3 { grid-template-columns: var(--grid-3); }
-.grid-cols-4 { grid-template-columns: var(--grid-4); }
-.grid-cols-5 { grid-template-columns: var(--grid-5); }
-.grid-cols-6 { grid-template-columns: var(--grid-6); }
-.grid-cols-7 { grid-template-columns: var(--grid-7); }
-.grid-cols-8 { grid-template-columns: var(--grid-8); }
-.grid-cols-9 { grid-template-columns: var(--grid-9); }
-.grid-cols-10 { grid-template-columns: var(--grid-10); }
-.grid-cols-11 { grid-template-columns: var(--grid-11); }
-.grid-cols-12 { grid-template-columns: var(--grid-12); }
-
-.col-span-1 { grid-column: var(--span-1); }
-.col-span-2 { grid-column: var(--span-2); }
-.col-span-3 { grid-column: var(--span-3); }
-.col-span-4 { grid-column: var(--span-4); }
-.col-span-5 { grid-column: var(--span-5); }
-.col-span-6 { grid-column: var(--span-6); }
-.col-span-7 { grid-column: var(--span-7); }
-.col-span-8 { grid-column: var(--span-8); }
-.col-span-9 { grid-column: var(--span-9); }
-.col-span-10 { grid-column: var(--span-10); }
-.col-span-11 { grid-column: var(--span-11); }
-.col-span-12 { grid-column: var(--span-12); }
-
 /****************************************************************
 * Text
 *****************************************************************/
@@ -141,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); }
 
@@ -151,6 +124,7 @@
 
 .border-solid { border-style: solid; }
 .border-dashed { border-style: dashed; }
+.border-dotted { border-style: dotted; }
 
 .rounded-none { border-radius: none; }
 .rounded-sm { border-radius: var(--rounded-sm); }
@@ -186,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; }
@@ -340,11 +315,10 @@
 * Accessibility
 *****************************************************************/
 .sr-only {
-  position: absolute;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  position: absolute;
   white-space: nowrap;
-  border-width: 0;
 }

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.28"
+  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/accordion.css

@@ -1,10 +1,16 @@
 :where(.accordion) {
   details {
     border-block-end-width: var(--border);
-    transition: padding var(--time-150) var(--ease-in-out);
 
-    &[open] {
-      padding-block-end: var(--size-4);
+    &::details-content {
+      block-size: 0; overflow: hidden;
+      transition-behavior: allow-discrete;
+      transition-duration: var(--time-150);
+      transition-property: content-visibility height;
+    }
+
+    &[open]::details-content {
+      block-size: calc-size(auto);
     }
 
     &[open] summary::after {
@@ -40,7 +46,7 @@
       content: "";
       filter: var(--color-filter-text);
       inline-size: var(--size-4);
-      transition: transform var(--time-200) var(--ease-in-out);
+      transition: transform var(--time-200);
     }
   }
 }

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

@@ -10,7 +10,7 @@
   font-weight: var(--font-medium);
   gap: var(--size-2);
   justify-content: center;
-  min-inline-size: fit-content;
+  white-space: nowrap;
   padding: var(--size-2) var(--size-4);
   text-align: center;
 
@@ -60,25 +60,19 @@
   --btn-icon-color: var(--color-filter-negative);
 }
 
-.btn--loading {
-  [aria-busy] &:disabled {
-    position: relative;
-
-    > * {
-      visibility: hidden;
-    }
+[aria-busy] .btn--loading:disabled {
+  > * {
+    visibility: hidden;
+  }
 
-    &::after {
-      animation: var(--animate-spin);
-      animation-duration: 1s;
-      background-image: url("loader-circle.svg");
-      background-size: cover;
-      block-size: var(--size-4);
-      content: "";
-      filter: var(--btn-icon-color, var(--color-filter-text-reversed));
-      inline-size: var(--size-4);
-      margin-inline: auto;
-      position: absolute;
-    }
+  &::after {
+    animation: spin 1s linear infinite;
+    background-image: url("loader-circle.svg");
+    background-size: cover;
+    block-size: var(--size-4);
+    content: "";
+    filter: var(--btn-icon-color, var(--color-filter-text-reversed));
+    inline-size: var(--size-4);
+    position: absolute;
   }
 }

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

@@ -14,7 +14,7 @@
 
   &::-webkit-scrollbar {
     display: none;
-  }  
+  }
 
   > * {
     flex: 0 0 100%;

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

@@ -1,12 +1,16 @@
 .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);
   padding: var(--size-2) var(--size-3);
 
+  option {
+    padding-block: revert;
+  }
+
   &:is(textarea):not([rows]) {
     field-sizing: content;
     max-block-size: calc(10lh + var(--size-6));
@@ -26,15 +30,6 @@
     margin-inline-end: var(--size-2);
   }
 
-  &:autofill {
-    -webkit-text-fill-color: var(--color-text);
-    -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
-  }
-
-  &::placeholder {
-    color: var(--color-text-subtle);
-  }
-
   &:user-invalid {
     border-color: var(--color-negative);
   }
@@ -49,16 +44,35 @@
   }
 }
 
-.range {
-  accent-color: var(--color-primary);
+/* 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);
 }
 
-:is(.input, .range, .checkbox, .radio) {
+.range {
+  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);
     outline-offset: var(--border-2);

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/pagination.css

@@ -15,7 +15,6 @@
     font-weight: var(--font-medium);
     gap: var(--size-2);
     justify-content: center;
-    min-inline-size: fit-content;
     padding: var(--size-2) var(--size-4);
   }
 

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 {
@@ -49,10 +49,19 @@
 
   @media (width < 40rem) {
     max-inline-size: none;
-    text-align: center;
   }
 }
 
+.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/switch.css

@@ -9,7 +9,6 @@
   inline-size: var(--size-11);
   transition-duration: var(--time-150);
   transition-property: var(--transition-colors);
-  transition-timing-function: var(--ease-in-out);
 
   &:checked {
     background-color: var(--color-primary);
@@ -26,7 +25,7 @@
     border-radius: var(--rounded-full);
     content: "";
     display: block;
-    transition: margin var(--time-150) var(--ease-in-out);
+    transition: margin var(--time-150);
   }
 
   &:focus-visible {

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/assets/stylesheets/toggle.css

@@ -1,6 +1,5 @@
 .toggle {
   display: inline-flex;
-  position: relative;
 
   &:has(:focus-visible) .btn {
     outline: var(--border-2) solid var(--color-selected-dark);

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.28
+  version: 0.0.30
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-26 00:00:00.000000000 Z
+date: 2024-08-29 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -24,14 +24,13 @@ files:
 - app/assets/stylesheets/colors.css
 - app/assets/stylesheets/effects.css
 - app/assets/stylesheets/filters.css
-- app/assets/stylesheets/grid.css
 - app/assets/stylesheets/sizes.css
 - app/assets/stylesheets/transform.css
 - app/assets/stylesheets/transition.css
 - app/assets/stylesheets/typography.css
-- app/assets/stylesheets/zindex.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
@@ -59,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
@@ -66,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

data/app/assets/stylesheets/grid.css

@@ -1,38 +0,0 @@
-:root {
-  /****************************************************************
-  * Grid Template
-  * Variables for specifying the columns/rows in a grid layout.
-  * grid-template-columns|grid-template-rows: var(--grid-1);
-  *****************************************************************/
-  --grid-1:  repeat(1, minmax(0, 1fr));
-  --grid-2:  repeat(2, minmax(0, 1fr));
-  --grid-3:  repeat(3, minmax(0, 1fr));
-  --grid-4:  repeat(4, minmax(0, 1fr));
-  --grid-5:  repeat(5, minmax(0, 1fr));
-  --grid-6:  repeat(6, minmax(0, 1fr));
-  --grid-7:  repeat(7, minmax(0, 1fr));
-  --grid-8:  repeat(8, minmax(0, 1fr));
-  --grid-9:  repeat(9, minmax(0, 1fr));
-  --grid-10: repeat(10, minmax(0, 1fr));
-  --grid-11: repeat(11, minmax(0, 1fr));
-  --grid-12: repeat(12, minmax(0, 1fr));
-
-  /****************************************************************
-  * Grid Start / End
-  * Variables for controlling how elements are sized and placed across grid columns/rows.
-  * grid-column|grid-row: var(--span-1);
-  *****************************************************************/
-  --span-1:  span 1 / span 1;
-  --span-2:  span 2 / span 2;
-  --span-3:  span 3 / span 3;
-  --span-4:  span 4 / span 4;
-  --span-5:  span 5 / span 5;
-  --span-6:  span 6 / span 6;
-  --span-7:  span 7 / span 7;
-  --span-8:  span 8 / span 8;
-  --span-9:  span 9 / span 9;
-  --span-10: span 10 / span 10;
-  --span-11: span 11 / span 11;
-  --span-12: span 12 / span 12;
-  --span-full: 1 / -1;
-}

data/app/assets/stylesheets/zindex.css

@@ -1,13 +0,0 @@
-/****************************************************************
-* Z-Index
-* Utilities for controlling the stack order of an element.
-* z-index: var(--z-10);
-*****************************************************************/
-
-:root {
-  --z-10:	10;
-  --z-20:	20;
-  --z-30:	30;
-  --z-40:	40;
-  --z-50:	50;
-}