pico-rails 1.4.4 → 1.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd0c2c814510196236080602a40a9337d59c861ecaaf910699ffdfed17b99b64
-  data.tar.gz: f9a203a0560539e546151a7a35d918122c8c4e1474e21109afcd6ace19225627
+  metadata.gz: 4699b06e03e0f2dbc1ba08f9bdd997f0f596bccea4d7961f7f05fc706956c6cb
+  data.tar.gz: c786cace7283f250abca93e8bb45b023c7d4cfe115d30e3b43d42dccf1109dd9
 SHA512:
-  metadata.gz: 5a43f98634b4730eae493fd9b014fd2b70e0914b6ba812ce89a3de433a4770a24ea705217765c961caf72b66b2583450d8cfb1395e1ac570805e58409df33f18
-  data.tar.gz: 3df4e21a8a0edc1eae26653bcdf3847a17c2ded98550e4acefd072d5d8e2ca9008a5d62af486184fc2f357b9da543c2903ff88deb80f5643dba51d1ad6456673
+  metadata.gz: bd3a09dac816bd6dee7971d938d3c828a167ee3782895aace7b48f80e198eaf3630d62e72a5858b24f15961387551661089fd1de8b5024c7e03f582721001852
+  data.tar.gz: d755275d9cd9dd919a0eb2e0b2b467f3bf8bf9ef1ca3f1db1add7af516f565d93ce285d12e7407031ec9e2af140c080ff261bfa024715504740f656d26b82a07

data/app/assets/stylesheets/{scss → pico/scss}/components/_accordion.scss

@@ -5,15 +5,18 @@
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) * 0.5);
+  padding-bottom: var(--spacing);
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 
   summary {
-    color: var(--accordion-close-summary-color);
     line-height: 1rem;
     list-style-type: none;
     cursor: pointer;
 
+    &:not([role]) {
+      color: var(--accordion-close-summary-color);
+    }
+
     @if $enable-transitions {
       transition: color var(--transition);
     }
@@ -36,10 +39,11 @@ details {
       display: block;
       width: 1rem;
       height: 1rem;
+      margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
       float: right;
       transform: rotate(-90deg);
       background-image: var(--icon-chevron);
-      background-position: center;
+      background-position: right center;
       background-size: 1rem auto;
       background-repeat: no-repeat;
       content: "";
@@ -51,14 +55,31 @@ details {
 
     &:focus {
       outline: none;
-      color: var(--accordion-active-summary-color);
+
+      &:not([role="button"]) {
+        color: var(--accordion-active-summary-color);
+      }
     }
 
-    ~ * {
-      margin-top: calc(var(--spacing) * 0.5);
+    // Type button
+    &[role="button"] {
+      width: 100%;
+      text-align: left;
 
-      ~ * {
-        margin-top: 0;
+      // Marker
+      &::after {
+        height: calc(1rem * var(--line-height, 1.5));
+        background-image: var(--icon-chevron-button);
+      }
+
+      @if $enable-classes {
+        // .contrast
+        &:not(.outline).contrast {
+          // Marker
+          &::after {
+            background-image: var(--icon-chevron-button-inverse);
+          }
+        }
       }
     }
   }
@@ -66,15 +87,17 @@ details {
   // Open
   &[open] {
     > summary {
-      margin-bottom: calc(var(--spacing) * 0.25);
+      margin-bottom: calc(var(--spacing));
 
-      &:not(:focus) {
-        color: var(--accordion-open-summary-color);
+      &:not([role]) {
+        &:not(:focus) {
+          color: var(--accordion-open-summary-color);
+        }
       }
 
       &::after {
         transform: rotate(0);
-      } 
+      }
     }
   }
 }
@@ -82,8 +105,11 @@ details {
 [dir="rtl"] {
   details {
     summary {
+      text-align: right;
+
       &::after {
         float: left;
+        background-position: left center;
       }
     }
   }

data/app/assets/stylesheets/{scss → pico/scss}/components/_card.scss

@@ -5,7 +5,6 @@
 article {
   margin: var(--block-spacing-vertical) 0;
   padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  overflow: hidden;
   border-radius: var(--border-radius);
   background: var(--card-background-color);
   box-shadow: var(--card-box-shadow);
@@ -23,11 +22,15 @@ article {
     margin-top: calc(var(--block-spacing-vertical) * -1);
     margin-bottom: var(--block-spacing-vertical);
     border-bottom: var(--border-width) solid var(--card-border-color);
+    border-top-right-radius: var(--border-radius);
+    border-top-left-radius: var(--border-radius);
   }
 
   > footer {
     margin-top: var(--block-spacing-vertical);
     margin-bottom: calc(var(--block-spacing-vertical) * -1);
     border-top: var(--border-width) solid var(--card-border-color);
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
   }
 }

data/app/assets/stylesheets/pico/scss/components/_dropdown.scss

@@ -0,0 +1,208 @@
+/**
+ * Dropdown ([role="list"])
+ */
+
+// Menu
+details[role="list"],
+li[role="list"] {
+  position: relative;
+}
+
+details[role="list"] summary + ul,
+li[role="list"] > ul {
+  display: flex;
+  z-index: 99;
+  position: absolute;
+  top: auto;
+  right: 0;
+  left: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: var(--border-width) solid var(--dropdown-border-color);
+  border-radius: var(--border-radius);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  background-color: var(--dropdown-background-color);
+  box-shadow: var(--card-box-shadow);
+  color: var(--dropdown-color);
+  white-space: nowrap;
+
+  li {
+    width: 100%;
+    margin-bottom: 0;
+    padding: calc(var(--form-element-spacing-vertical) * 0.5)
+      var(--form-element-spacing-horizontal);
+    list-style: none;
+
+    &:first-of-type {
+      margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
+    }
+
+    &:last-of-type {
+      margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
+    }
+
+    a {
+      display: block;
+      margin: calc(var(--form-element-spacing-vertical) * -0.5)
+        calc(var(--form-element-spacing-horizontal) * -1);
+      padding: calc(var(--form-element-spacing-vertical) * 0.5)
+        var(--form-element-spacing-horizontal);
+      overflow: hidden;
+      color: var(--dropdown-color);
+      text-decoration: none;
+      text-overflow: ellipsis;
+
+      &:hover {
+        background-color: var(--dropdown-hover-background-color);
+      }
+    }
+  }
+}
+
+// Marker
+details[role="list"] summary,
+li[role="list"] > a {
+  &::after {
+    display: block;
+    width: 1rem;
+    height: calc(1rem * var(--line-height, 1.5));
+    margin-inline-start: 0.5rem;
+    float: right;
+    transform: rotate(0deg);
+    background-position: right center;
+    background-size: 1rem auto;
+    background-repeat: no-repeat;
+    content: "";
+  }
+}
+
+// Global dropdown only
+details[role="list"] {
+  padding: 0;
+  border-bottom: none;
+
+  // Style <summary> as <select>
+  summary {
+    margin-bottom: 0;
+
+    &:not([role]) {
+      height: calc(
+        1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
+          var(--border-width) * 2
+      );
+      padding: var(--form-element-spacing-vertical)
+        var(--form-element-spacing-horizontal);
+      border: var(--border-width) solid var(--form-element-border-color);
+      border-radius: var(--border-radius);
+      background-color: var(--form-element-background-color);
+      color: var(--form-element-placeholder-color);
+      line-height: inherit;
+      cursor: pointer;
+
+      @if $enable-transitions {
+        transition: background-color var(--transition),
+          border-color var(--transition), color var(--transition),
+          box-shadow var(--transition);
+      }
+
+      &:active,
+      &:focus {
+        border-color: var(--form-element-active-border-color);
+        background-color: var(--form-element-active-background-color);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+      }
+    }
+  }
+
+  // Close for details[role="list"]
+  &[open] summary {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &::before {
+      display: block;
+      z-index: 1;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: none;
+      content: "";
+      cursor: default;
+    }
+  }
+}
+
+// All Dropdowns inside <nav>
+nav details[role="list"] summary,
+nav li[role="list"] a {
+  display: flex;
+  direction: ltr;
+}
+
+nav details[role="list"] summary + ul,
+nav li[role="list"] > ul {
+  min-width: fit-content;
+  border-radius: var(--border-radius);
+
+  li a {
+    border-radius: 0;
+  }
+}
+
+// Dropdowns inside <nav> as nested <details>
+nav details[role="list"] {
+  summary,
+  summary:not([role]) {
+    height: auto;
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+  }
+
+  &[open] summary {
+    border-radius: var(--border-radius);
+  }
+
+  summary + ul {
+    margin-top: var(--outline-width);
+    margin-inline-start: 0;
+  }
+
+  summary[role="link"] {
+    margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
+    line-height: var(--line-height);
+
+    + ul {
+      margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
+      margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
+    }
+  }
+}
+
+// Dropdowns inside a <nav> without using <details>
+li[role="list"] {
+  // Open on hover (for mobile)
+  // or on active/focus (for keyboard navigation)
+  &:hover > ul,
+  a:active ~ ul,
+  a:focus ~ ul {
+    display: flex;
+  }
+
+  > ul {
+    display: none;
+    margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
+    margin-inline-start: calc(
+      var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
+    );
+  }
+
+  > a::after {
+    background-image: var(--icon-chevron);
+  }
+}

data/app/assets/stylesheets/{scss → pico/scss}/components/_modal.scss

@@ -21,23 +21,24 @@ dialog {
   height: inherit;
   min-height: 100%;
   padding: var(--spacing);
-  border: none;
+  border: 0;
   background-color: var(--modal-overlay-background-color);
+  color: var(--color);
 
   // Content
   article {
     max-height: calc(100vh - var(--spacing) * 2);
     overflow: auto;
 
-    @if map-get($breakpoints, 'sm') {
-      @media (min-width: map-get($breakpoints, 'sm')) {
-        max-width: map-get($viewports, 'sm');
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        max-width: map-get($viewports, "sm");
       }
     }
 
-    @if map-get($breakpoints, 'md') {
-      @media (min-width: map-get($breakpoints, 'md')) {
-        max-width: map-get($viewports, 'md');
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        max-width: map-get($viewports, "md");
       }
     }
 
@@ -58,7 +59,7 @@ dialog {
     > footer {
       text-align: right;
 
-      [role='button'] {
+      [role="button"] {
         margin-bottom: 0;
 
         &:not(:first-of-type) {
@@ -92,9 +93,7 @@ dialog {
           transition: opacity var(--transition);
         }
 
-        &:hover,
-        &:active,
-        &:focus {
+        &:is([aria-current], :hover, :active, :focus) {
           opacity: 1;
         }
       }
@@ -103,7 +102,7 @@ dialog {
 
   // Closed state
   &:not([open]),
-  &[open='false'] {
+  &[open="false"] {
     display: none;
   }
 }
@@ -125,8 +124,7 @@ dialog {
 @if ($enable-classes and $enable-transitions) {
   $animation-duration: 0.2s;
 
-  .modal-is-opening,
-  .modal-is-closing {
+  :where(.modal-is-opening, .modal-is-closing) {
     dialog,
     dialog > article {
       animation-duration: $animation-duration;

data/app/assets/stylesheets/pico/scss/components/_nav.scss

@@ -0,0 +1,97 @@
+/**
+ * Nav
+ */
+
+// Reboot based on :
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+
+// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+:where(nav li)::before {
+  float: left;
+  content: "\200B";
+}
+
+// Pico
+// ––––––––––––––––––––
+
+// Horizontal Nav
+nav,
+nav ul {
+  display: flex;
+}
+
+nav {
+  justify-content: space-between;
+
+  ol,
+  ul {
+    align-items: center;
+    margin-bottom: 0;
+    padding: 0;
+    list-style: none;
+
+    &:first-of-type {
+      margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
+    }
+    &:last-of-type {
+      margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
+    }
+  }
+
+  li {
+    display: inline-block;
+    margin: 0;
+    padding: var(--nav-element-spacing-vertical)
+      var(--nav-element-spacing-horizontal);
+
+    // Minimal support for buttons and forms elements
+    > * {
+      --spacing: 0;
+    }
+  }
+
+  :where(a, [role="link"]) {
+    display: inline-block;
+    margin: calc(var(--nav-link-spacing-vertical) * -1)
+      calc(var(--nav-link-spacing-horizontal) * -1);
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+    border-radius: var(--border-radius);
+    text-decoration: none;
+
+    &:is([aria-current], :hover, :active, :focus) {
+      text-decoration: none;
+    }
+  }
+
+  // Minimal support for role="button"
+  [role="button"] {
+    margin-right: inherit;
+    margin-left: inherit;
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+  }
+
+}
+
+// Vertical Nav
+aside {
+  nav,
+  ol,
+  ul,
+  li {
+    display: block;
+  }
+
+  li {
+    padding: calc(var(--nav-element-spacing-vertical) * 0.5)
+      var(--nav-element-spacing-horizontal);
+
+    a {
+      display: block;
+    }
+
+    // Minimal support for links as buttons
+    [role="button"] {
+      margin: inherit;
+    }
+  }
+}

data/app/assets/stylesheets/{scss → pico/scss}/components/_progress.scss

@@ -4,7 +4,7 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // 1. Add the correct display in Edge 18- and IE
@@ -40,7 +40,7 @@ progress {
 
   &::-webkit-progress-bar {
     border-radius: var(--border-radius);
-    background: transparent;
+    background: none;
   }
   &[value]::-webkit-progress-value {
     background-color: var(--progress-color);
@@ -71,6 +71,14 @@ progress {
   }
 }
 
+[dir="rtl"] {
+  @media (prefers-reduced-motion: no-preference) {
+    progress:indeterminate {
+      animation-direction: reverse;
+    }
+  }
+}
+
 @keyframes progressIndeterminate {
   0% {
     background-position: 200% 0;