beercss 4.0.14 → 4.0.16

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 (12) hide show
  1. package/README.md +8 -8
  2. package/dist/cdn/beer.css +51 -29
  3. package/dist/cdn/beer.custom-element.js +2 -2
  4. package/dist/cdn/beer.custom-element.min.js +1 -1
  5. package/dist/cdn/beer.min.css +1 -1
  6. package/dist/cdn/beer.scoped.css +51 -29
  7. package/dist/cdn/beer.scoped.min.css +2 -2
  8. package/package.json +1 -1
  9. package/src/cdn/customElement.js +2 -2
  10. package/src/cdn/elements/menus.css +39 -19
  11. package/src/cdn/elements/sliders.css +8 -6
  12. package/src/cdn/settings/fonts.css +4 -4
package/README.md CHANGED
@@ -84,8 +84,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
84
84
  ### DEFAULT VERSION
85
85
 
86
86
  ```html
87
- <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.min.css" rel="stylesheet" />
88
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.min.js"></script>
87
+ <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.css" rel="stylesheet" />
88
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
89
89
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
90
90
  ```
91
91
 
@@ -103,8 +103,8 @@ import "material-dynamic-colors";
103
103
  Applied on child elements of `<* class="beer">...</*>`.
104
104
 
105
105
  ```html
106
- <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
107
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.min.js"></script>
106
+ <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
107
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
108
108
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
109
109
  ```
110
110
 
@@ -122,7 +122,7 @@ import "material-dynamic-colors";
122
122
  Applied on child elements of `<beer-css>...</beer-css>`.
123
123
 
124
124
  ```html
125
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.custom-element.min.js"></script>
125
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.custom-element.min.js"></script>
126
126
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
127
127
  ```
128
128
 
@@ -138,7 +138,7 @@ import "material-dynamic-colors";
138
138
 
139
139
  ### LOCAL CDN VERSION
140
140
 
141
- Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
141
+ Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
142
142
 
143
143
  ```html
144
144
  <link href="/beercss/beer.min.css" rel="stylesheet" />
@@ -159,8 +159,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
159
159
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
160
160
  <meta name="google" content="notranslate">
161
161
  <title>Hello world</title>
162
- <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.min.css" rel="stylesheet">
163
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.min.js"></script>
162
+ <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.css" rel="stylesheet">
163
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
164
164
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
165
165
  </head>
166
166
  <body class="dark">
package/dist/cdn/beer.css CHANGED
@@ -140,7 +140,7 @@ body.dark {
140
140
  font-style: normal;
141
141
  font-weight: 400;
142
142
  font-display: swap;
143
- src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/material-symbols-outlined.woff2) format("woff2");
143
+ src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-outlined.woff2) format("woff2");
144
144
  }
145
145
 
146
146
  /* rounded icons */
@@ -150,7 +150,7 @@ body.dark {
150
150
  font-style: normal;
151
151
  font-weight: 400;
152
152
  font-display: swap;
153
- src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/material-symbols-rounded.woff2) format("woff2");
153
+ src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-rounded.woff2) format("woff2");
154
154
  }
155
155
 
156
156
  /* sharp icons */
@@ -160,7 +160,7 @@ body.dark {
160
160
  font-style: normal;
161
161
  font-weight: 400;
162
162
  font-display: swap;
163
- src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/material-symbols-sharp.woff2) format("woff2");
163
+ src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-sharp.woff2) format("woff2");
164
164
  }
165
165
 
166
166
  /* subset of only required icons */
@@ -170,7 +170,7 @@ body.dark {
170
170
  font-style: normal;
171
171
  font-weight: 400;
172
172
  font-display: swap;
173
- src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/material-symbols-subset.woff2) format("woff2");
173
+ src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/material-symbols-subset.woff2) format("woff2");
174
174
  }
175
175
 
176
176
  /* begin scoped */
@@ -2604,6 +2604,26 @@ menu {
2604
2604
  gap: 0.125rem;
2605
2605
  }
2606
2606
 
2607
+ menu.no-space {
2608
+ gap: 0;
2609
+ }
2610
+
2611
+ menu.small-space {
2612
+ gap: 0.25rem;
2613
+ }
2614
+
2615
+ menu.medium-space {
2616
+ gap: 0.375rem;
2617
+ }
2618
+
2619
+ menu.large-space {
2620
+ gap: 0.5rem;
2621
+ }
2622
+
2623
+ menu.extra-space {
2624
+ gap: 0.625rem;
2625
+ }
2626
+
2607
2627
  [dir=rtl] menu {
2608
2628
  inset: auto 0 0 auto;
2609
2629
  }
@@ -2670,7 +2690,7 @@ menu > li:last-child {
2670
2690
  border-bottom-right-radius: inherit;
2671
2691
  }
2672
2692
 
2673
- menu:not(.group) > li:hover {
2693
+ menu > li:hover {
2674
2694
  background-color: color-mix(in srgb, currentColor 10%, transparent);
2675
2695
  }
2676
2696
 
@@ -2776,21 +2796,8 @@ menu > li > menu.top.left {
2776
2796
  inset: calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100% auto auto;
2777
2797
  }
2778
2798
 
2779
- menu.no-space > li {
2780
- min-block-size: 2.5rem;
2781
- }
2782
-
2783
- menu.medium-space > li {
2784
- min-block-size: 3.5rem;
2785
- }
2786
-
2787
- menu.large-space > li {
2788
- min-block-size: 4rem;
2789
- }
2790
-
2791
- menu.group,
2792
- menu.group > li {
2793
- padding: 0;
2799
+ menu.group {
2800
+ padding: 0.5rem 0;
2794
2801
  inline-size: 100%;
2795
2802
  min-inline-size: auto;
2796
2803
  max-block-size: none;
@@ -2799,7 +2806,18 @@ menu.group > li {
2799
2806
  box-shadow: none;
2800
2807
  }
2801
2808
 
2802
- menu.group > li > menu {
2809
+ menu.group > li {
2810
+ box-shadow: none;
2811
+ padding: 0;
2812
+ min-block-size: auto;
2813
+ }
2814
+
2815
+ menu.group > li:hover {
2816
+ background: none;
2817
+ }
2818
+
2819
+ menu.group > li > menu,
2820
+ menu.group > li > menu:hover {
2803
2821
  opacity: 1;
2804
2822
  visibility: visible;
2805
2823
  position: relative;
@@ -2808,6 +2826,8 @@ menu.group > li > menu {
2808
2826
  transform: none;
2809
2827
  transition: none;
2810
2828
  border-radius: 1rem 1rem 0.5rem 0.5rem;
2829
+ z-index: auto;
2830
+ flex: 1;
2811
2831
  }
2812
2832
 
2813
2833
  menu.group > li:last-child > menu {
@@ -2895,13 +2915,13 @@ menu > li:nth-last-of-type(11) {
2895
2915
  }
2896
2916
 
2897
2917
  @media (pointer: coarse) {
2898
- :not(menu, [data-ui]):hover > menu:not(.min, .max, .group) {
2918
+ :not(menu, [data-ui]):hover > menu {
2899
2919
  opacity: 1;
2900
2920
  visibility: visible;
2901
2921
  transform: scale(1) translateY(100%);
2902
2922
  }
2903
2923
 
2904
- :not(menu, [data-ui]):hover > menu.top:not(.min, .max, .group) {
2924
+ :not(menu, [data-ui]):hover > menu.top {
2905
2925
  transform: scale(1) translateY(-100%);
2906
2926
  }
2907
2927
  }
@@ -4155,6 +4175,7 @@ progress.max + * {
4155
4175
  flex: none;
4156
4176
  direction: ltr;
4157
4177
  margin: 0 1.25rem;
4178
+ color: var(--primary);
4158
4179
  }
4159
4180
 
4160
4181
  [dir=rtl] .slider {
@@ -4221,7 +4242,7 @@ progress.max + * {
4221
4242
  block-size: var(--_thumb);
4222
4243
  inline-size: 0.25rem;
4223
4244
  border-radius: 0.25rem;
4224
- background: var(--primary);
4245
+ background: currentColor;
4225
4246
  cursor: grab;
4226
4247
  margin: 0;
4227
4248
  z-index: 1;
@@ -4280,14 +4301,15 @@ progress.max + * {
4280
4301
  position: absolute;
4281
4302
  block-size: var(--_track);
4282
4303
  border-radius: 1rem 0 0 1rem;
4283
- background: var(--primary);
4284
- color: var(--on-primary);
4304
+ background: currentColor;
4305
+ color: currentColor;
4285
4306
  z-index: 0;
4286
- inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto calc(var(--_start) + 0.5rem);
4307
+ inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto var(--_start);
4287
4308
  }
4288
4309
 
4289
4310
  .slider > input[type=range] + input[type=range] ~ span:not([class]) {
4290
4311
  border-radius: 0;
4312
+ inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto calc(var(--_start) + 0.5rem);
4291
4313
  }
4292
4314
 
4293
4315
  .field > .slider {
@@ -4300,12 +4322,12 @@ progress.max + * {
4300
4322
  inline-size: 100%;
4301
4323
  block-size: var(--_track);
4302
4324
  border-radius: 1rem;
4303
- background: var(--secondary-container);
4325
+ background: var(--active);
4304
4326
  clip-path: polygon(calc(var(--_start, 0) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start, 0) - 0.5rem) 100%, calc(var(--_start, 0) - 0.5rem) 0, calc(100% - var(--_end, 0) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end, 0) + 0.5rem) 100%, calc(100% - var(--_end, 0) + 0.5rem) 0);
4305
4327
  }
4306
4328
 
4307
4329
  .slider:has(> [disabled])::before {
4308
- background: var(--outline-variant);
4330
+ background: var(--active);
4309
4331
  }
4310
4332
 
4311
4333
  .slider:has([disabled]) {
package/dist/cdn/beer.custom-element.js CHANGED
@@ -12,7 +12,7 @@ class BeerCssCustomElement extends HTMLElement {
12
12
  BeerCssCustomElement.isJsLoaded = true;
13
13
 
14
14
  if (window.ui) return;
15
- return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.min.js");
15
+ return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js");
16
16
  }
17
17
 
18
18
  async addCss() {
@@ -23,7 +23,7 @@ class BeerCssCustomElement extends HTMLElement {
23
23
 
24
24
  const head = document.querySelector("head");
25
25
  const element = document.createElement("link");
26
- element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.scoped.min.css");
26
+ element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css");
27
27
  element.setAttribute("rel", "stylesheet");
28
28
  head.appendChild(element);
29
29
  }
package/dist/cdn/beer.custom-element.min.js CHANGED
@@ -1 +1 @@
1
- class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.14/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;
1
+ class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;