css-zero 0.0.17 → 0.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92f6b9adffe56fbbd63cc59f9d80869e8fd52f01dc43285e2a4fca1478099a83
-  data.tar.gz: 48bc41e660292ebcd1f9fec79a0c791cbfec06ba9e698711ab211bec155950c3
+  metadata.gz: e0160a1de6cec67785d5c12b68ab51a020dddf109aab5e76bb1dc1c15ca4c5d3
+  data.tar.gz: 60d34a2b612a22f5c8adfbe759a570ed507afaabd9192d3a5d34393384b49d9a
 SHA512:
-  metadata.gz: a3ff2ead3a52606d129f09bc0c9aa9039b4cd155ea0e87d6b2b07ceedb77b346d044004f906376dccd796fa63f2fd28341c6b4339547238e202465fc16c12beb
-  data.tar.gz: e7f2b6b8b2cf02729a57051cdb7d3827ee5803bb6af9257fa8b6e968eafcd40163e671f24f3b8c4fcfebea2663d825bb483a86a7911c8e8425210f3214628010
+  metadata.gz: df8b92602ece5cc374d5fd806a07c54a20c889de3e078e2c1f1322df0cf3eca85e6e10c6a9115d794fdf6aaa538c967e911cebfa1c6588af881f9faf48b161e1
+  data.tar.gz: 4bdfaf4732cf6d971d1fc28de2dc60e7c4bc7af3f128097573e61a1104d59e474a8f344d09731d4a523e40c2a9485c07671d62d17d128817bca37b0b221ec1f8

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 collapsible dialog input progress switch table
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress switch table
 ```
 
 ### Requirements
@@ -89,399 +89,9 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 ## Components
 
-### Accordion
+[<img src="https://github.com/user-attachments/assets/989b0ddd-064a-4ac6-8aee-f9eaaf07ff38">](https://css-zero-showcase.onrender.com/lookbook)
 
-<img width="500" alt="accordion" src="https://github.com/lazaronixon/css-zero/assets/2651240/9644edec-9bb1-4e1f-b2da-19c7fb5a540f">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="accordion">
-  <details name="my_accordion">
-    <summary>Is it accessible?</summary>
-    <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
-  </details>
-  <details name="my_accordion">
-    <summary>Is it styled?</summary>
-    <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
-  </details>
-  <details name="my_accordion">
-    <summary>Is it animated?</summary>
-    <p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
-  </details>
-</div>
-```
-</details>
-
-### Alert
-
-<img width="500" alt="alert" src="https://github.com/lazaronixon/css-zero/assets/2651240/eae5c6dd-f6b4-4c01-bec1-cd7e9523d0a6">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="alert alert--negative flex items-start gap">
-  <%= image_tag("circle-alert.svg", role: "presentation", size: 16) %>
-  <div class="flex flex-col">
-    <h1 class="font-medium leading-none mbe-1">Error</h1>
-    <p class="text-sm">Your session has expired. Please log in again.</p>
-  </div>
-</div>
-```
-</details>
-
-### Avatar
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="flex item-center gap">
-  <div class="avatar">
-    <%= image_tag "cartoon.jpg", role: "presentation", size: 48 %>
-  </div>
-
-  <div class="avatar">
-    <span class="avatar__fallback">CN</span>
-  </div>
-</div>
-```
-</details>
-
-### Badge
-
-<img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="flex justify-start gap">
-  <div class="badge">Badge</div>
-  <div class="badge badge--secondary">Secondary</div>
-  <div class="badge badge--outline">Outline</div>
-  <div class="badge badge--positive">Positive</div>
-  <div class="badge badge--negative">Negative</div>
-</div>
-```
-</details>
-
-### Breadcrumb
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<nav class="breadcrumb">
-  <a href="#">Home</a>
-  <%= image_tag "chevron-right.svg", size: 14 %>
-  <a href="#"><%= image_tag "ellipsis.svg", size: 14 %></a>
-  <%= image_tag "chevron-right.svg", size: 14 %>
-  <a href="#">Components</a>
-  <%= image_tag "chevron-right.svg", size: 14 %>
-  <a href="#" class="text-primary">Breadcrumb</a>
-</nav>
-```
-</details>
-
-### Button
-
-<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="flex flex-wrap items-center gap" aria-busy>
-  <button class="btn">Primary</button>
-  <button class="btn btn--secondary">Secondary</button>
-  <button class="btn btn--outline">Outline</button>
-  <button class="btn btn--plain">Plain</button>
-  <button class="btn btn--positive">Positive</button>
-  <button class="btn btn--negative">Negative</button>
-
-  <button class="btn">
-    <%= image_tag "circle-plus.svg", role: "presentation", size: 16 %>
-    <span>With icon</span>
-  </button>
-
-  <button class="btn btn--loading" disabled>
-    <span>Please wait</span>
-  </button>
-</div>
-```
-</details>
-
-### Card
-
-<img width="366" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/f4077b91-2d0c-49db-9fb6-2955f8575217">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
-  <div class="flex flex-col gap-sm">
-    <h1 class="text-2xl font-semibold leading-none">Create project</h1>
-    <p class="text-sm text-subtle">Deploy your new project in one-click.</p>
-  </div>
-
-  <div class="flex flex-col gap">
-    <div class="flex flex-col gap-sm">
-      <label for="name" class="text-sm font-medium">Name</label>
-      <input type="text" id="name" placeholder="Name of your project" class="input">
-    </div>
-
-    <div class="flex flex-col gap-sm">
-      <label for="framework" class="text-sm font-medium">Framework</label>
-      <select id="framework" class="input">
-        <option value="">Select</option>
-        <option value="rails">Ruby on Rails</option>
-        <option value="laravel">Laravel</option>
-        <option value="next">Next</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="flex justify-between">
-    <button class="btn btn--outline">Cancel</button>
-    <button class="btn">Destroy</button>
-  </div>
-</div>
-```
-</details>
-
-### Collapsible
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div data-controller="collapsible" style="max-inline-size: 350px">
-  <div class="flex items-center justify-between gap pi-4 pb-3">
-    <h4 class="text-sm font-semibold">
-      @lazaronixon starred 3 repositories
-    </h4>
-    <button data-action="collapsible#toggle" class="btn btn--plain p-0">
-      <%= image_tag "chevrons-up-down.svg", size: 16 %>
-      <span class="sr-only">Toggle</span>
-    </button>
-  </div>
-  <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
-    @rails/rails
-  </div>
-  <details>
-    <summary data-collapsible-target="summary" hidden></summary>
-    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
-      @rails/jbuilder
-    </div>
-    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
-      @rails/jsbundling-rails
-    </div>
-  </details>
-</div>
-```
-</details>
-
-### Dialog
-
-#### Alert Dialog
-
-<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div data-controller="dialog">
-  <dialog data-dialog-target="box" class="dialog">
-    <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
-    <p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
-
-    <div class="flex justify-end gap-sm mbs-4">
-      <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
-      <button class="btn btn--primary">Continue</button>
-    </div>
-  </dialog>
-
-  <button class="btn" data-action="dialog#showModal">
-    Show dialog
-  </button>
-</div>
-```
-</details>
-
-#### Dismissible Dialog
-
-<img width="400" alt="dismissible_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div data-controller="dialog">
-  <dialog data-dialog-target="box" data-action="click->dialog#closeOnClickOutside" class="dialog" style="max-inline-size: 430px;">
-    <form method="dialog">
-      <button class="btn btn--plain p-0 dialog__close">
-        <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
-        <span class="sr-only">Close</span>
-      </button>
-    </form>
-
-    <div class="flex flex-col gap">
-      <div class="flex flex-col gap-sm">
-        <h1 class="text-lg leading-none font-semibold">Edit profile</h1>
-        <p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p>
-      </div>
-
-      <div class="flex flex-col mb-4 gap">
-        <div class="grid grid-cols-4 items-center gap">
-          <label for="name" class="text-sm font-medium text-end">Name</label>
-          <input type="text" id="name" value="Lázaro Nixon" class="input col-span-3">
-        </div>
-
-        <div class="grid grid-cols-4 items-center gap">
-          <label for="username" class="text-sm font-medium text-end">Username</label>
-          <input type="text" id="username" value="@lazaronixon" class="input col-span-3">
-        </div>
-      </div>
-
-      <div class="flex items-center justify-end">
-        <input type="submit" value= "Save changes" class="btn"/>
-      </div>
-    </div>
-  </dialog>
-
-  <button class="btn" data-action="dialog#showModal">
-    Show dialog
-  </button>
-</div>
-```
-</details>
-
-### Input
-
-<img width="500" alt="input" src="https://github.com/lazaronixon/css-zero/assets/2651240/f33a9d34-44b5-4c6b-ad88-1f0fd00b7291">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
-  <div class="flex flex-col gap-sm">
-    <%= form.label :name, class: "text-sm font-medium" %>
-    <%= form.text_field :name, class: "input" %>
-  </div>
-
-  <div class="flex flex-col gap-sm">
-    <%= form.label :pick_a_date, class: "text-sm font-medium" %>
-    <%= form.date_field :pick_a_date, class: "input" %>
-  </div>
-
-  <div class="flex flex-col gap-sm">
-    <%= form.label :age_range, class: "text-sm font-medium" %>
-    <%= form.select :age_range, ["0-13", "14-17", "18-23"], {}, class: "input" %>
-  </div>
-
-  <div class="flex flex-col gap-sm">
-    <%= form.label :comment, class: "text-sm font-medium" %>
-    <%= form.text_area :comment, rows: 3, class: "input" %>
-  </div>
-
-  <div class="flex items-center gap-sm">
-    <%= form.check_box :status, class: "checkbox" %>
-    <%= form.label :status, "Send a copy to yourself", class: "text-sm font-medium" %>
-  </div>
-<% end %>
-```
-</details>
-
-### Progress
-
-<img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
-
-<details>
-<summary>Show me the code</summary>
-
-```html
-<label>
-  <span class="sr-only">Loading progress</span>
-  <progress value="75" max="100" class="progress"></progress>
-</label>
-```
-</details>
-
-### Switch
-
-<img width="175" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/b47e28fb-6492-402c-b422-b896dfd3b713">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="flex items-center gap-sm">
-  <input type="checkbox" class="switch">
-  <label for="status" class="text-sm font-medium">Airplane Mode</label>
-</div>
-```
-</details>
-
-### Table
-
-<img width="500" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/c7b261a8-6d38-46f2-bf69-fd9385776bbe">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<table class="table">
-  <thead>
-    <tr>
-      <th>Invoice</th>
-      <th>Status</th>
-      <th>Method</th>
-      <th class="text-end">Amount</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th>INV001</th>
-      <td>Paid</td>
-      <td>Credit Card</td>
-      <td class="text-end">$250.00</td>
-    </tr>
-    <tr>
-      <th>INV002</th>
-      <td>Pending</td>
-      <td>PayPal</td>
-      <td class="text-end">$150.00</td>
-    </tr>
-    <tr>
-      <th>INV003</th>
-      <td>Unpaid</td>
-      <td>Transfer</td>
-      <td class="text-end">$350.00</td>
-    </tr>
-    <tr>
-      <th>INV004</th>
-      <td>Paid</td>
-      <td>Credit Card</td>
-      <td class="text-end">$450.00</td>
-    </tr>
-  </tbody>
-  <tfoot>
-      <tr>
-        <td colspan="3">Paid</td>
-        <td class="text-end">$2,500.00</td>
-      </tr>
-  </tfoot>
-</table>
-```
-</details>
-
-### More components soon...
+More components soon...
 
 ## Development
 

data/app/assets/stylesheets/_reset.css

@@ -30,16 +30,7 @@ html,
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   tab-size: 4; /* 3 */
-  font-family: var(
-    --default-font-family,
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji'
-  ); /* 4 */
+  font-family: var(--default-font-family, system-ui, sans-serif); /* 4 */
   font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
@@ -118,17 +109,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: var(
-    --default-mono-font-family,
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    'Liberation Mono',
-    'Courier New',
-    monospace
-  ); /* 4 */
+  font-family: var(--default-mono-font-family, ui-monospace, monospace); /* 4 */
   font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 6 */
   font-size: 1em; /* 4 */
@@ -245,6 +226,14 @@ progress {
   block-size: auto;
 }
 
+/*
+  Correct the arrow style of datalist in Chrome.
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1em;
+}
+
 /*
   Remove the inner padding in Chrome and Safari on macOS.
 */

data/app/assets/stylesheets/typography.css

@@ -54,13 +54,25 @@
   --leading-10:      2.5rem;  /* 40px */
 
   /****************************************************************
-  * Font Family
+  * Font Family (https://modernfontstacks.com)
   * Variables for controlling the font family of an element.
   * font-family: var(--font-sans);
   *****************************************************************/
-  --font-sans:  ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-system-ui: system-ui, sans-serif;
+  --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
+  --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
+  --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+  --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
+  --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
+  --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
+  --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
+  --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
+  --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
+  --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
+  --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
+  --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
+  --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
+  --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
 
   /****************************************************************
   * Letter Spacing

data/app/assets/stylesheets/zutilities.css

@@ -88,7 +88,7 @@
 .bg-main { background-color: var(--color-bg); }
 .bg-black { background-color: var(--color-text); }
 .bg-white { background-color: var(--color-text-reversed); }
-.bg-shade { background-color: var(--color-secondary); }
+.bg-shade { background-color: var(--color-border-light); }
 .bg-transparent { background-color: transparent; }
 
 /****************************************************************
@@ -110,6 +110,12 @@
 .border-is { border-inline-start-width: var(--border-size, 1px); }
 .border-ie { border-inline-end-width: var(--border-size, 1px); }
 
+.border-main { border-color: var(--color-border); }
+.border-dark { border-color: var(--color-border-dark); }
+
+.border-solid { border-style: solid; }
+.border-dashed { border-style: dashed; }
+
 .rounded-none { border-radius: none; }
 .rounded-sm { border-radius: var(--rounded-sm); }
 .rounded { border-radius: var(--rounded); }
@@ -159,7 +165,6 @@
 .m-0\.5 { margin: var(--size-0_5); }
 .m-1 { margin: var(--size-1); }
 .m-2 { margin: var(--size-2); }
-.m-3 { margin: var(--size-3); }
 .m-4 { margin: var(--size-4); }
 .m-6 { margin: var(--size-6); }
 .m-8 { margin: var(--size-8); }
@@ -170,7 +175,6 @@
 .mb-0\.5 { margin-block: var(--size-0_5); }
 .mb-1 { margin-block: var(--size-1); }
 .mb-2 { margin-block: var(--size-2); }
-.mb-3 { margin-block: var(--size-3); }
 .mb-4 { margin-block: var(--size-4); }
 .mb-6 { margin-block: var(--size-6); }
 .mb-8 { margin-block: var(--size-8); }
@@ -181,7 +185,6 @@
 .mbs-0\.5 { margin-block-start: var(--size-0_5); }
 .mbs-1 { margin-block-start: var(--size-1); }
 .mbs-2 { margin-block-start: var(--size-2); }
-.mbs-3 { margin-block-start: var(--size-3); }
 .mbs-4 { margin-block-start: var(--size-4); }
 .mbs-6 { margin-block-start: var(--size-6); }
 .mbs-8 { margin-block-start: var(--size-8); }
@@ -192,7 +195,6 @@
 .mbe-0\.5 { margin-block-end: var(--size-0_5); }
 .mbe-1 { margin-block-end: var(--size-1); }
 .mbe-2 { margin-block-end: var(--size-2); }
-.mbe-3 { margin-block-end: var(--size-3); }
 .mbe-4 { margin-block-end: var(--size-4); }
 .mbe-6 { margin-block-end: var(--size-6); }
 .mbe-8 { margin-block-end: var(--size-8); }
@@ -203,7 +205,6 @@
 .mi-0\.5 { margin-inline: var(--size-0_5); }
 .mi-1 { margin-inline: var(--size-1); }
 .mi-2 { margin-inline: var(--size-2); }
-.mi-3 { margin-inline: var(--size-3); }
 .mi-4 { margin-inline: var(--size-4); }
 .mi-6 { margin-inline: var(--size-6); }
 .mi-8 { margin-inline: var(--size-8); }
@@ -214,7 +215,6 @@
 .mis-0\.5 { margin-inline-start: var(--size-0_5); }
 .mis-1 { margin-inline-start: var(--size-1); }
 .mis-2 { margin-inline-start: var(--size-2); }
-.mis-3 { margin-inline-start: var(--size-3); }
 .mis-4 { margin-inline-start: var(--size-4); }
 .mis-6 { margin-inline-start: var(--size-6); }
 .mis-8 { margin-inline-start: var(--size-8); }
@@ -225,7 +225,6 @@
 .mie-0\.5 { margin-inline-end: var(--size-0_5); }
 .mie-1 { margin-inline-end: var(--size-1); }
 .mie-2 { margin-inline-end: var(--size-2); }
-.mie-3 { margin-inline-end: var(--size-3); }
 .mie-4 { margin-inline-end: var(--size-4); }
 .mie-6 { margin-inline-end: var(--size-6); }
 .mie-8 { margin-inline-end: var(--size-8); }
@@ -239,7 +238,6 @@
 .p-0\.5 { padding: var(--size-0_5); }
 .p-1 { padding: var(--size-1); }
 .p-2 { padding: var(--size-2); }
-.p-3 { padding: var(--size-3); }
 .p-4 { padding: var(--size-4); }
 .p-6 { padding: var(--size-6); }
 .p-8 { padding: var(--size-8); }
@@ -249,7 +247,6 @@
 .pb-0\.5 { padding-block: var(--size-0_5); }
 .pb-1 { padding-block: var(--size-1); }
 .pb-2 { padding-block: var(--size-2); }
-.pb-3 { padding-block: var(--size-3); }
 .pb-4 { padding-block: var(--size-4); }
 .pb-6 { padding-block: var(--size-6); }
 .pb-8 { padding-block: var(--size-8); }
@@ -259,7 +256,6 @@
 .pbs-0\.5 { padding-block-start: var(--size-0_5); }
 .pbs-1 { padding-block-start: var(--size-1); }
 .pbs-2 { padding-block-start: var(--size-2); }
-.pbs-3 { padding-block-start: var(--size-3); }
 .pbs-4 { padding-block-start: var(--size-4); }
 .pbs-6 { padding-block-start: var(--size-6); }
 .pbs-8 { padding-block-start: var(--size-8); }
@@ -269,7 +265,6 @@
 .pbe-0\.5 { padding-block-end: var(--size-0_5); }
 .pbe-1 { padding-block-end: var(--size-1); }
 .pbe-2 { padding-block-end: var(--size-2); }
-.pbe-3 { padding-block-end: var(--size-3); }
 .pbe-4 { padding-block-end: var(--size-4); }
 .pbe-6 { padding-block-end: var(--size-6); }
 .pbe-8 { padding-block-end: var(--size-8); }
@@ -279,7 +274,6 @@
 .pi-0\.5 { padding-inline: var(--size-0_5); }
 .pi-1 { padding-inline: var(--size-1); }
 .pi-2 { padding-inline: var(--size-2); }
-.pi-3 { padding-inline: var(--size-3); }
 .pi-4 { padding-inline: var(--size-4); }
 .pi-6 { padding-inline: var(--size-6); }
 .pi-8 { padding-inline: var(--size-8); }
@@ -289,7 +283,6 @@
 .pis-0\.5 { padding-inline-start: var(--size-0_5); }
 .pis-1 { padding-inline-start: var(--size-1); }
 .pis-2 { padding-inline-start: var(--size-2); }
-.pis-3 { padding-inline-start: var(--size-3); }
 .pis-4 { padding-inline-start: var(--size-4); }
 .pis-6 { padding-inline-start: var(--size-6); }
 .pis-8 { padding-inline-start: var(--size-8); }
@@ -299,7 +292,6 @@
 .pie-0\.5 { padding-inline-end: var(--size-0_5); }
 .pie-1 { padding-inline-end: var(--size-1); }
 .pie-2 { padding-inline-end: var(--size-2); }
-.pie-3 { padding-inline-end: var(--size-3); }
 .pie-4 { padding-inline-end: var(--size-4); }
 .pie-6 { padding-inline-end: var(--size-6); }
 .pie-8 { padding-inline-end: var(--size-8); }

data/app/helpers/dialog_helper.rb

@@ -0,0 +1,5 @@
+module DialogHelper
+  def button_to_close_dialog(content = nil, **, &)
+    tag.form tag.button(content, **, &), method: :dialog
+  end
+end

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.17"
+  VERSION = "0.0.18"
 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 collapsible dialog input progress switch table
+  accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress switch table
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -24,6 +24,11 @@ dialog:
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg
+pagination:
+  - app/assets/stylesheets/pagination.css
+  - app/assets/images/chevron-right.svg
+  - app/assets/images/chevron-left.svg
+  - app/assets/images/ellipsis.svg
 progress:
   - app/assets/stylesheets/progress.css
 switch:

data/lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>

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

@@ -23,7 +23,7 @@
     padding-block: var(--size-4);
 
     &:focus-visible {
-      outline: var(--border-2) solid var(--color-border-darker);
+      outline: var(--border-2) solid var(--color-border-dark);
       outline-offset: var(--border-2);
     }
 

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

@@ -7,7 +7,7 @@
   inline-size: var(--size-full);
 
   img {
-    filter: var(--alert-icon-color, var(--color-filter-text-reversed));
+    filter: var(--alert-icon-color, var(--color-filter-text));
   }
 }
 

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

@@ -1,13 +1,11 @@
-:root {
-  --avatar-size: var(--size-10);
-}
-
 .avatar {
-  block-size: var(--avatar-size);
+  --size: var(--avatar-size, var(--size-10));
+
+  block-size: var(--size);
   border-radius: var(--rounded-full);
   display: flex;
   flex-shrink: 0;
-  inline-size: var(--avatar-size);
+  inline-size: var(--size);
   overflow: hidden;
 
   img {
@@ -20,12 +18,12 @@
 
 .avatar__fallback {
   align-items: center;
-  background-color: var(--color-secondary);
+  background-color: var(--color-border-light);
   block-size: var(--size-full);
   border-radius: var(--rounded-full);
   display: flex;
-  font-size: calc(var(--avatar-size) * .4);
+  font-size: calc(var(--size) * .4);
   inline-size: var(--size-full);
   justify-content: center;
   user-select: none;
-}
+}

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

@@ -1,8 +1,10 @@
 .badge {
+  align-items: center;
   background-color: var(--badge-background, var(--color-primary));
   border-radius: var(--rounded-full);
   border-width: var(--badge-border-width, 0);
   color: var(--badge-color, var(--color-text-reversed));
+  display: inline-flex;
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   padding: var(--size-0_5) var(--size-2_5);
@@ -15,8 +17,8 @@
 
 .badge--outline {
   --badge-background: transparent;
+  --badge-border-width: var(--border);
   --badge-color: var(--color-text);
-  --btn-border-width: var(--border);
 }
 
 .badge--positive {

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

@@ -20,7 +20,7 @@
   }
 
   &:focus-visible {
-    outline: var(--border-2) solid var(--color-border-darker);
+    outline: var(--border-2) solid var(--color-border-dark);
     outline-offset: var(--border-2);
   }
 

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

@@ -6,7 +6,7 @@
   color: var(--color-text);
   inline-size: var(--size-full);
   margin: auto;
-  max-inline-size: var(--width-lg);
+  max-inline-size: var(--dialog-width, var(--width-lg));
   padding: var(--size-6);
 
   &::backdrop {
@@ -49,7 +49,10 @@
 
   /* Small screens and below */
   @media (width < 40rem) {
-    border-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    margin-block-end: 0;
+    max-inline-size: none !important;
   }
 }
 
@@ -57,6 +60,11 @@
   inset-block-start: var(--size-4);
   inset-inline-end: var(--size-4);
   position: absolute;
+
+  /* Small screens and below */
+  @media (width < 40rem) {
+    display: none;
+  }
 }
 
 /* Prevent page scroll when dialog is open */

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

@@ -8,6 +8,17 @@
   font-size: var(--text-sm);
   inline-size: var(--size-full);
   padding: var(--size-2) var(--size-3);
+  resize: none;
+
+  option {
+    padding-block: var(--size-1);
+  }
+
+  &:is(textarea):not([rows]) {
+    field-sizing: content;
+    max-block-size: calc(10lh + var(--size-6));
+    min-block-size: calc(3lh  + var(--size-6));
+  }
 
   &:is(select):not([multiple], [size]) {
     background-image: url("select-arrow.svg");
@@ -44,8 +55,15 @@
   transform: scale(1.15);
 }
 
-/* Keyboard navigation */
-:is(.input, .range, .checkbox, .radio):focus-visible {
-  outline: var(--border-2) solid var(--color-border-darker);
-  outline-offset: var(--border-2);
+:is(.input, .range, .checkbox, .radio) {
+  /* Keyboard navigation */
+  &:focus-visible {
+    outline: var(--border-2) solid var(--color-border-dark);
+    outline-offset: var(--border-2);
+  }
+
+  /* Server side validation */
+  .field_with_errors & {
+    border-color: var(--color-negative);
+  }
 }

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

@@ -0,0 +1,33 @@
+:where(.pagination) {
+  align-items: center;
+  display: flex;
+  gap: var(--size-1);
+
+  img {
+    filter: var(--color-filter-text);
+  }
+
+  a {
+    align-items: center;
+    border-radius: var(--rounded-md);
+    display: inline-flex;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    gap: var(--size-2);
+    justify-content: center;
+    min-inline-size: fit-content;
+    padding: var(--size-2) var(--size-4);
+  }
+
+  a:is([aria-current]) {
+    border-width: var(--border);
+  }
+
+  a:is([aria-disabled]) {
+    pointer-events: none;
+  }
+
+  a:not([aria-disabled]):hover {
+    background-color: var(--color-secondary);
+  }
+}

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

@@ -30,7 +30,7 @@
   }
 
   &:focus-visible {
-    outline: var(--border-2) solid var(--color-border-darker);
+    outline: var(--border-2) solid var(--color-border-dark);
     outline-offset: var(--border-2);
   }
 

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

@@ -20,7 +20,7 @@
   }
 
   tfoot {
-    background-color: var(--color-secondary);
+    background-color: var(--color-border-light);
     border-block-start-width: var(--border);
     font-weight: var(--font-medium);
   }

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

@@ -1,9 +1,17 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "summary" ]
+  static targets = [ "details" ]
+
+  open() {
+    this.detailsTarget.open = true
+  }
+
+  close() {
+    this.detailsTarget.open = false
+  }
 
   toggle() {
-    this.summaryTarget.click()
+    this.detailsTarget.open ? this.close() : this.open()
   }
 }

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

@@ -4,8 +4,9 @@
   --color-text: black;
   --color-text-reversed: white;
   --color-text-subtle: var(--zinc-500);
+  --color-border-light: var(--zinc-100);
   --color-border: var(--zinc-200);
-  --color-border-darker: var(--zinc-400);
+  --color-border-dark: var(--zinc-400);
 
   /* Accent colors */
   --color-primary: var(--zinc-900);
@@ -26,8 +27,9 @@
     --color-text: white;
     --color-text-reversed: black;
     --color-text-subtle: var(--zinc-400);
+    --color-border-light: var(--zinc-800);
     --color-border: var(--zinc-800);
-    --color-border-darker: var(--zinc-300);
+    --color-border-dark: var(--zinc-300);
 
     /* Accent colors */
     --color-primary: var(--zinc-50);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.17
+  version: 0.0.18
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-06 00:00:00.000000000 Z
+date: 2024-07-14 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -30,6 +30,7 @@ files:
 - app/assets/stylesheets/transition.css
 - app/assets/stylesheets/typography.css
 - app/assets/stylesheets/zutilities.css
+- app/helpers/dialog_helper.rb
 - lib/css-zero.rb
 - lib/css_zero/engine.rb
 - lib/css_zero/version.rb
@@ -37,8 +38,10 @@ files:
 - lib/generators/css_zero/add/add_generator.rb
 - lib/generators/css_zero/add/resources.yml
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
+- lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
 - lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
+- lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg
 - lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
 - lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
 - lib/generators/css_zero/add/templates/app/assets/images/x.svg
@@ -51,6 +54,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.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/switch.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css