npm - beercss - Versions diffs - 3.6.8 → 3.6.10 - Mend

beercss 3.6.8 → 3.6.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +6 -6
package/dist/cdn/beer.css +150 -111
package/dist/cdn/beer.min.css +1 -1
package/package.json +1 -1
package/src/cdn/beer.css +1 -1
package/src/cdn/elements/buttons.css +4 -4
package/src/cdn/elements/cards.css +0 -4
package/src/cdn/elements/containers.css +37 -25
package/src/cdn/{helpers → elements}/dividers.css +7 -0
package/src/cdn/elements/fields.css +21 -8
package/src/cdn/elements/grids.css +0 -4
package/src/cdn/elements/media.css +1 -1
package/src/cdn/elements/navigations.css +8 -8
package/src/cdn/elements/progress.css +4 -0
package/src/cdn/elements/tables.css +5 -13
package/src/cdn/elements/tabs.css +0 -4
package/src/cdn/helpers/reset.css +6 -5
package/src/cdn/helpers/typography.css +34 -5
package/src/cdn/helpers/waves.css +1 -1
package/src/cdn/settings/dark.css +0 -5
package/src/cdn/settings/fonts.css +3 -3
package/src/cdn/settings/globals.css +9 -0
package/src/cdn/settings/light.css +0 -5

package/README.md CHANGED Viewed

@@ -123,19 +123,19 @@ From jsdelivr.net.
 ```html
 // with html
-<link href="https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/beer.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/beer.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/beer.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 ```css
 // with css
-@import "https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/beer.min.css";
+@import "https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/beer.min.css";
 ```
 ```js
 // with javascript
-import "https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/beer.min.js";
+import "https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/beer.min.js";
 import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js";
 ```
@@ -187,8 +187,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="google" content="notranslate">
     <title>Hello world</title>
-    <link href="https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/beer.min.css" rel="stylesheet">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/beer.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/beer.min.css" rel="stylesheet">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/beer.min.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
   </head>
   <body class="dark">

package/dist/cdn/beer.css CHANGED Viewed

@@ -6,6 +6,15 @@
   --speed2: 0.2s;
   --speed3: 0.3s;
   --speed4: 0.4s;
+  --active: rgb(128 128 128 / 0.192);
+  --overlay: rgb(0 0 0 / 0.5);
+  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
+  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
+  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
+  --top: env(safe-area-inset-top);
+  --bottom: env(safe-area-inset-bottom);
+  --left: env(safe-area-inset-left);
+  --right: env(safe-area-inset-right);
 }
 :root,
 body.light {
@@ -45,11 +54,6 @@ body.light {
   --surface-container: #f2ecf1;
   --surface-container-high: #ece7eb;
   --surface-container-highest: #e6e1e6;
-  --overlay: rgb(0 0 0 / 0.5);
-  --active: rgb(0 0 0 / 0.1);
-  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
-  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
-  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
 }
 body.dark {
   --primary: #cfbcff;
@@ -88,11 +92,6 @@ body.dark {
   --surface-container: #201f22;
   --surface-container-high: #2b292d;
   --surface-container-highest: #363438;
-  --overlay: rgb(0 0 0 / 0.5);
-  --active: rgb(255 255 255 / 0.2);
-  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
-  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
-  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
 }
 /* outlined icons */
 @font-face {
@@ -102,7 +101,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 }
 /* rounded icons */
 @font-face {
@@ -112,7 +111,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 /* sharp icons */
 @font-face {
@@ -122,7 +121,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.6.8/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.6.10/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }
 * {
   -webkit-tap-highlight-color: transparent;
@@ -147,8 +146,10 @@ a,
 b,
 i,
 span,
-strong {
-  vertical-align: bottom;
+strong,
+em,
+code {
+  vertical-align: baseline;
 }
 a,
 button,
@@ -180,9 +181,8 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   background: var(--outline);
   border-radius: 1rem;
 }
-pre,
-code {
-  direction: ltr;
+* + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul) {
+  margin-block-start: 1rem;
 }
 .primary {
   background-color: var(--primary) !important;
@@ -1081,30 +1081,6 @@ code {
 .vertical > * {
   margin-inline: 0 !important;
 }
-[class*=divider] {
-  min-inline-size: 1.5rem;
-  min-block-size: auto;
-  block-size: 0.0625rem;
-  background-color: var(--outline-variant);
-  display: block;
-}
-[class*=divider] + * {
-  margin: 0 !important;
-}
-.medium-divider {
-  margin: 1rem 0 !important;
-}
-.large-divider {
-  margin: 1.5rem 0 !important;
-}
-.small-divider {
-  margin: 0.5rem 0 !important;
-}
-.divider.vertical {
-  min-inline-size: auto;
-  min-block-size: 1.5rem;
-  inline-size: 0.0625rem;
-}
 .no-elevate {
   box-shadow: none !important;
 }
@@ -1422,13 +1398,10 @@ h4,
 h5,
 h6 {
   font-weight: 400;
-  display: flex;
+  display: block;
   align-items: center;
   line-height: normal;
 }
-* + :is(h1, h2, h3, h4, h5, h6) {
-  margin-block-start: 1rem;
-}
 h1 {
   font-size: 3.5625rem;
 }
@@ -1549,6 +1522,34 @@ p {
 .extra-line {
   line-height: 2.25rem;
 }
+pre {
+  border-radius: 0;
+  background-color: var(--surface-container);
+  white-space: pre-wrap;
+  padding: 1rem;
+  border-inline-start: 0.25rem solid var(--primary);
+  font-family: inherit;
+}
+blockquote {
+  border-radius: 0;
+  padding: 1rem;
+  border-inline-start: 0.25rem solid var(--primary);
+  font-family: inherit;
+}
+code {
+  border-radius: 0;
+  background-color: var(--surface-container);
+  white-space: pre-wrap;
+  direction: ltr;
+  padding: 0.25rem;
+}
+pre > code,
+blockquote > code {
+  padding: 0;
+}
+.scroll > code {
+  white-space: pre;
+}
 .wave::after,
 .chip::after,
 :is(.button, button)::after,
@@ -1561,7 +1562,7 @@ p {
   inline-size: 100%;
   block-size: 100%;
   background-position: center;
-  background-image: radial-gradient(circle, rgb(128 128 128 / 0.192) 1%, transparent 1%);
+  background-image: radial-gradient(circle, var(--active) 1%, transparent 1%);
   opacity: 0;
   transition: none;
 }
@@ -1715,15 +1716,15 @@ button {
   display: inherit;
   margin-inline-start: 2.5rem;
 }
-:is(.button, button):is([disabled]) {
+:is(.button, button)[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-:is(.button):is([disabled]) {
+.button[disabled] {
   pointer-events: none;
 }
-:is(.button, button):is([disabled])::before,
-:is(.button, button):is([disabled])::after {
+:is(.button, button)[disabled]::before,
+:is(.button, button)[disabled]::after {
   display: none;
 }
 :is(.button, button).fill {
@@ -1742,9 +1743,6 @@ article {
   display: block;
   transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
 }
-* + article {
-  margin-block-start: 1rem;
-}
 article.small {
   block-size: 12rem;
 }
@@ -1817,22 +1815,22 @@ main.responsive {
   min-block-size: 100vh;
 }
 *:has(> nav.bottom:not(.s, .m, .l)) {
-  padding-block-end: 5rem;
+  padding-block-end: calc(var(--bottom) + 5rem);
 }
 *:has(> nav.top:not(.s, .m, .l)) {
-  padding-block-start: 5rem;
+  padding-block-start: calc(var(--top) + 5rem);
 }
 *:has(> nav.left:not(.s, .m, .l)) {
-  padding-inline-start: 5rem;
+  padding-inline-start: calc(var(--left) + 5rem);
 }
 *:has(> nav.right:not(.s, .m, .l)) {
-  padding-inline-end: 5rem;
+  padding-inline-end: calc(var(--right) + 5rem);
 }
 *:has(> nav.drawer.left:not(.s, .m, .l)) {
-  padding-inline-start: 20rem;
+  padding-inline-start: calc(var(--left) + 20rem);
 }
 *:has(> nav.drawer.right:not(.s, .m, .l)) {
-  padding-inline-end: 20rem;
+  padding-inline-end: calc(var(--right) + 20rem);
 }
 nav.top:not(.s, .m, .l) ~ header.fixed {
   inset-block-start: 5rem;
@@ -1840,29 +1838,38 @@ nav.top:not(.s, .m, .l) ~ header.fixed {
 nav.bottom:not(.s, .m, .l) ~ footer.fixed {
   inset-block-end: 5rem;
 }
+aside {
+  z-index: 1;
+}
+aside:not(.fixed, .absolute).right {
+  float: right;
+}
+aside:not(.fixed, .absolute).left {
+  float: left;
+}
 @media only screen and (max-width: 600px) {
   *:has(> nav.s.bottom) {
-    padding-block-end: 5rem;
+    padding-block-end: calc(var(--bottom) + 5rem);
   }
   *:has(> nav.s.top) {
-    padding-block-start: 5rem;
+    padding-block-start: calc(var(--top) + 5rem);
   }
   *:has(> nav.s.left) {
-    padding-inline-start: 5rem;
+    padding-inline-start: calc(var(--left) + 5rem);
   }
   *:has(> nav.s.right) {
-    padding-inline-end: 5rem;
+    padding-inline-end: calc(var(--right) + 5rem);
   }
   *:has(> nav.s.drawer.left) {
-    padding-inline-start: 20rem;
+    padding-inline-start: calc(var(--left) + 20rem);
   }
   *:has(> nav.s.drawer.right) {
-    padding-inline-end: 20rem;
+    padding-inline-end: calc(var(--right) + 20rem);
   }
   nav.s.top ~ header.fixed {
@@ -1875,27 +1882,27 @@ nav.bottom:not(.s, .m, .l) ~ footer.fixed {
 }
 @media only screen and (min-width: 601px) and (max-width: 992px) {
   *:has(> nav.m.bottom) {
-    padding-block-end: 5rem;
+    padding-block-end: calc(var(--bottom) + 5rem);
   }
   *:has(> nav.m.top) {
-    padding-block-start: 5rem;
+    padding-block-start: calc(var(--top) + 5rem);
   }
   *:has(> nav.m.left) {
-    padding-inline-start: 5rem;
+    padding-inline-start: calc(var(--left) + 5rem);
   }
   *:has(> nav.m.right) {
-    padding-inline-end: 5rem;
+    padding-inline-end: calc(var(--right) + 5rem);
   }
   *:has(> nav.m.drawer.left) {
-    padding-inline-start: 20rem;
+    padding-inline-start: calc(var(--left) + 20rem);
   }
   *:has(> nav.m.drawer.right) {
-    padding-inline-end: 20rem;
+    padding-inline-end: calc(var(--right) + 20rem);
   }
   nav.m.top ~ header.fixed {
@@ -1908,27 +1915,27 @@ nav.bottom:not(.s, .m, .l) ~ footer.fixed {
 }
 @media only screen and (min-width: 993px) {
   *:has(> nav.l.bottom) {
-    padding-block-end: 5rem;
+    padding-block-end: calc(var(--bottom) + 5rem);
   }
   *:has(> nav.l.top) {
-    padding-block-start: 5rem;
+    padding-block-start: calc(var(--top) + 5rem);
   }
   *:has(> nav.l.left) {
-    padding-inline-start: 5rem;
+    padding-inline-start: calc(var(--left) + 5rem);
   }
   *:has(> nav.l.right) {
-    padding-inline-end: 5rem;
+    padding-inline-end: calc(var(--right) + 5rem);
   }
   *:has(> nav.l.drawer.left) {
-    padding-inline-start: 20rem;
+    padding-inline-start: calc(var(--left) + 20rem);
   }
   *:has(> nav.l.drawer.right) {
-    padding-inline-end: 20rem;
+    padding-inline-end: calc(var(--right) + 20rem);
   }
   nav.l.top ~ header.fixed {
@@ -1941,7 +1948,7 @@ nav.bottom:not(.s, .m, .l) ~ footer.fixed {
 }
 @media only screen and (max-width: 600px) {
   main.responsive {
-    padding-inline: 0.5rem;
+    padding-inline: calc(var(--left) + 0.5rem) calc(var(--right) + 0.5rem);
   }
 }
 dialog {
@@ -2061,6 +2068,37 @@ dialog.medium:is(.top, .bottom) {
 dialog.large:is(.top, .bottom) {
   block-size: 32rem;
 }
+hr,
+[class*=divider] {
+  all: unset;
+  min-inline-size: 1.5rem;
+  min-block-size: auto;
+  block-size: 0.0625rem;
+  background-color: var(--outline-variant);
+  display: block;
+}
+hr + *,
+[class*=divider] + * {
+  margin: 0 !important;
+}
+hr.medium,
+.medium-divider {
+  margin: 1rem 0 !important;
+}
+hr.large,
+.large-divider {
+  margin: 1.5rem 0 !important;
+}
+hr.small,
+.small-divider {
+  margin: 0.5rem 0 !important;
+}
+hr.vertical,
+.divider.vertical {
+  min-inline-size: auto;
+  min-block-size: 1.5rem;
+  inline-size: 0.0625rem;
+}
 summary.none {
   list-style-type: none;
 }
@@ -2079,9 +2117,7 @@ summary:focus {
   block-size: var(---size);
   margin-block-end: 2rem;
-}
-* + .field {
-  margin-block-start: 1rem;
+  border-radius: 0.25rem 0.25rem 0 0;
 }
 .grid > * > .field {
   margin-block-end: 1rem;
@@ -2110,9 +2146,6 @@ summary:focus {
   ---size: 4rem;
   ---start: 1.6rem;
 }
-.field {
-  border-radius: 0.25rem 0.25rem 0 0;
-}
 .field.border {
   border-radius: 0.25rem;
 }
@@ -2183,6 +2216,10 @@ summary:focus {
 input::-webkit-date-and-time-value {
   text-align: start;
 }
+:is(input, select, textarea):-webkit-autofill {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: inherit;
+}
 .field > :is(input, textarea, select):focus {
   border: 0.125rem solid transparent;
   padding: 0 0.875rem;
@@ -2437,6 +2474,18 @@ a.helper {
 table td > .field {
   margin: 0;
 }
+fieldset {
+  border-radius: 0.25rem;
+  padding: 1rem;
+  border: 0.0625rem solid var(--outline-variant);
+}
+fieldset > legend {
+  margin: 0 -0.25rem;
+  padding: 0 0.25rem;
+}
+fieldset > legend + * {
+  margin-block-start: 0 !important;
+}
 .grid {
   ---gap: 1rem;
@@ -2444,9 +2493,6 @@ table td > .field {
   grid-template-columns: repeat(12, calc(8.33% - var(---gap) + (var(---gap) / 12)));
   gap: var(---gap);
 }
-* + .grid {
-  margin-block-start: 1rem;
-}
 .grid.no-space {
   ---gap: 0rem;
 }
@@ -2799,7 +2845,7 @@ svg {
   inline-size: 24rem;
 }
 :is(button, .button, .chip, .field) > :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra),
-:is(.tabs) :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {
+.tabs :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {
   min-inline-size: 1.5rem;
   max-inline-size: 1.5rem;
   min-block-size: 1.5rem;
@@ -3030,18 +3076,15 @@ nav.drawer > :is(ol, ul) > li > :is(a, label) {
   justify-content: flex-start;
   white-space: nowrap;
   gap: 1rem;
-  margin: 0;
 }
 a.row {
   min-block-size: 3rem;
+  margin: 0;
 }
 :is(nav, .row, .max) > :only-child,
 nav > :is(ol, ul) > li > :only-child {
   margin: 0;
 }
-* + :is(nav, .row) {
-  margin-block-start: 1rem;
-}
 :is(nav, .row) > * {
   margin: 0;
   white-space: normal;
@@ -3084,9 +3127,9 @@ nav:is(.left, .right, .top, .bottom) {
   block-size: auto;
   inline-size: auto;
   text-align: center;
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
+  inset: var(--top) var(--right) var(--bottom) var(--left);
   margin: 0;
-  inset: 0;
 }
 nav:is(.left, .right) {
   inline-size: 5rem;
@@ -3203,7 +3246,7 @@ nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.bu
 :is(nav, .row):is(.center-align, .middle-align).vertical {
   align-items: center;
 }
-:is(.drawer, .vertical) > :is(li, [class*=divider]):not(.vertical),
+:is(.drawer, .vertical) > :is(li, [class*=divider], hr):not(.vertical),
 :is(.drawer, .vertical) > :is(ol, ul) > li:not(.vertical) {
   align-self: stretch;
 }
@@ -3242,6 +3285,9 @@ nav.tabbed > a {
 nav.tabbed > a.active {
   background-color: var(--primary-container);
 }
+:not(nav) > :is(ul, ol) {
+  all: revert;
+}
 @media only screen and (max-width: 600px) {
   nav.top,
   nav.bottom {
@@ -3404,6 +3450,9 @@ progress.max.vertical {
 :has(> progress) > :not(progress) {
   z-index: 1;
 }
+:is(.button, button, .chip) > progress.circle {
+  color: inherit;
+}
 @supports (-moz-appearance:none) {
   progress.max.vertical {
     transform: none;
@@ -3924,24 +3973,18 @@ progress.max.vertical {
   }
 }
 table {
-  ---stripes: rgb(0 0 0 / 0.05);
   inline-size: 100%;
   border-spacing: 0;
   font-size: 0.875rem;
-  color: var(--on-surface);
   text-align: start;
-  background-color: var(--surface);
 }
-.dark table {
-  ---stripes: rgb(255 255 255 / 0.05);
-}
-table :is(thead, tbody, tfoot, tr, th) {
+.scroll > table,
+table :is(thead, tbody, tfoot, tr, th, td) {
   background-color: inherit;
+  color: inherit;
 }
 :is(th, td) {
   inline-size: auto;
-  max-inline-size: 1rem;
   text-align: inherit;
   padding: 0.5rem;
 }
@@ -3956,7 +3999,7 @@ tfoot > tr > th {
   border-block-start: 0.0625rem solid var(--outline);
 }
 table.stripes > tbody > tr:nth-child(odd) {
-  background-color: var(---stripes);
+  background-color: var(--active);
 }
 table.no-space :is(th, td) {
   padding: 0;
@@ -3978,8 +4021,7 @@ tfoot th.fixed {
   inset-block-end: 0;
 }
 :is(td, th).min {
-  inline-size: 0;
-  max-inline-size: 0%;
+  inline-size: 0.1%;
   white-space: nowrap;
 }
 .tabs {
@@ -3990,9 +4032,6 @@ tfoot th.fixed {
 .tabs:not(.left-align, .right-align, .center-align) {
   justify-content: space-around;
 }
-* + .tabs {
-  margin-block-start: 1rem;
-}
 .tabs > a {
   display: flex;
   font-size: 0.875rem;