css-zero 0.0.16 → 0.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 25eac2e80a7b075843033e5db405786dd14e9f802cb47ce2fd1f0375e7841565
-  data.tar.gz: 52cd0c2ed8d8eb740d44e29210ff8652088cac7509ccf024a957f837ada2cfc2
+  metadata.gz: e0160a1de6cec67785d5c12b68ab51a020dddf109aab5e76bb1dc1c15ca4c5d3
+  data.tar.gz: 60d34a2b612a22f5c8adfbe759a570ed507afaabd9192d3a5d34393384b49d9a
 SHA512:
-  metadata.gz: 39e8b29cb429cf7e8d4d180682c17cef15e5105f51fc9c0b88ece548f688a41558569f2aeda76bf9365df202b6e01f791dd7520b5225ef0357a80e1d0a39ed70
-  data.tar.gz: 52d7914ad684c3b27766979afa42834796a361846dc679d2a44300ed1858a92490f1f5c09665b0bb40a0e4671303de8402dc4127eda6ab25d8cebc7df389318c
+  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 badge button card 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,331 +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>
-
-### 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>
-
-### 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>
-
-### 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

@@ -45,7 +45,7 @@
 .whitespace-nowrap { white-space: nowrap; }
 .whitespace-normal { white-space: normal; }
 
-.break-words { word-break: break-word; }
+.break-words { overflow-wrap: break-word; }
 .break-all { word-break: break-all; }
 
 .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
@@ -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; }
 
 /****************************************************************
@@ -96,6 +96,7 @@
 *****************************************************************/
 .colorize-black { filter: var(--color-filter-text); }
 .colorize-white { filter: var(--color-filter-text-reversed); }
+.colorize-shade { filter: var(--color-filter-text-subtle); }
 .colorize-negative { filter: var(--color-filter-negative); }
 .colorize-positive { filter: var(--color-filter-positive); }
 
@@ -109,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); }

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.16"
+  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 badge button card 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

@@ -3,13 +3,20 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
+avatar:
+  - app/assets/stylesheets/avatar.css
 badge:
   - app/assets/stylesheets/badge.css
+breadcrumb:
+  - app/assets/stylesheets/breadcrumb.css
+  - app/assets/images/chevron-right.svg
 button:
   - app/assets/stylesheets/button.css
   - app/assets/images/loader-circle.svg
 card:
   - app/assets/stylesheets/card.css
+collapsible:
+  - app/javascript/controllers/collapsible_controller.js
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/assets/images/x.svg
@@ -17,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/chevron-right.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="m9 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

@@ -6,8 +6,8 @@
   padding: var(--size-4);
   inline-size: var(--size-full);
 
-  img:not([class]) {
-    filter: var(--alert-icon-color, var(--color-filter-text-reversed));
+  img {
+    filter: var(--alert-icon-color, var(--color-filter-text));
   }
 }
 

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

@@ -0,0 +1,29 @@
+.avatar {
+  --size: var(--avatar-size, var(--size-10));
+
+  block-size: var(--size);
+  border-radius: var(--rounded-full);
+  display: flex;
+  flex-shrink: 0;
+  inline-size: var(--size);
+  overflow: hidden;
+
+  img {
+    aspect-ratio: 1;
+    block-size: var(--size-full);
+    inline-size: var(--size-full);
+    object-fit: cover;
+  }
+}
+
+.avatar__fallback {
+  align-items: center;
+  background-color: var(--color-border-light);
+  block-size: var(--size-full);
+  border-radius: var(--rounded-full);
+  display: flex;
+  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/breadcrumb.css

@@ -0,0 +1,22 @@
+.breadcrumb {
+  align-items: center;
+  color: var(--color-text-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: var(--text-sm);
+  gap: var(--size-2_5);
+  overflow-wrap: break-word;
+
+  img {
+    filter: var(--color-filter-text-subtle);
+  }
+
+  a:hover {
+    color: var(--color-text);
+  }
+
+  /* Small screens and below */
+  @media (width < 40rem) {
+    gap: var(--size-1_5);
+  }
+}

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

@@ -15,12 +15,12 @@
   padding: var(--size-2) var(--size-4);
   text-align: center;
 
-  img:not([class]) {
+  img {
     filter: var(--btn-icon-color, var(--color-filter-text-reversed));
   }
 
   &: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 {
@@ -47,9 +47,12 @@
     }
   }
 
-  /* Small screens */
+  /* 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

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "details" ]
+
+  open() {
+    this.detailsTarget.open = true
+  }
+
+  close() {
+    this.detailsTarget.open = false
+  }
+
+  toggle() {
+    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);
@@ -16,6 +17,7 @@
   /* SVG color values */
   --color-filter-text: invert(0);
   --color-filter-text-reversed: invert(100%);
+  --color-filter-text-subtle: invert(43%) sepia(8%) saturate(340%) hue-rotate(202deg) brightness(99%) contrast(85%);
   --color-filter-negative: invert(31%) sepia(96%) saturate(4646%) hue-rotate(350deg) brightness(91%) contrast(89%);
   --color-filter-positive: invert(48%) sepia(74%) saturate(520%) hue-rotate(90deg) brightness(89%) contrast(90%);
 
@@ -25,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);
@@ -37,6 +40,7 @@
     /* SVG color values */
     --color-filter-text: invert(100%);
     --color-filter-text-reversed: invert(0);
+    --color-filter-text-subtle: invert(55%) sepia(98%) saturate(0%) hue-rotate(299deg) brightness(96%) contrast(94%);
     --color-filter-negative: invert(15%) sepia(83%) saturate(2066%) hue-rotate(345deg) brightness(87%) contrast(88%);
     --color-filter-positive: invert(23%) sepia(74%) saturate(495%) hue-rotate(91deg) brightness(88%) contrast(89%);
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.16
+  version: 0.0.18
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-04 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,20 +38,27 @@ 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
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
 - 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
+- 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/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb