beercss 3.11.4 → 3.11.6

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 (13) hide show
  1. package/README.md +8 -8
  2. package/dist/cdn/beer.css +101 -50
  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 +101 -50
  7. package/dist/cdn/beer.scoped.min.css +1 -1
  8. package/package.json +1 -1
  9. package/src/cdn/customElement.js +2 -2
  10. package/src/cdn/elements/navigations.css +54 -0
  11. package/src/cdn/elements/sliders.css +57 -16
  12. package/src/cdn/helpers/theme.css +0 -36
  13. package/src/cdn/settings/fonts.css +4 -4
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
  <p align="center">
5
5
  <a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="License"></a>
6
6
  <a href="https://github.com/beercss/beercss"><img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads"></a>
7
- <a href="https://bundlephobia.com/package/beercss@3.11.4" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.4" alt="minzipped size"></a>
7
+ <a href="https://bundlephobia.com/package/beercss@3.11.6" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.6" alt="minzipped size"></a>
8
8
  <a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="Version"></a>
9
9
  <a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="Pull Request"></a>
10
10
  <a href="https://github.com/beercss/beercss/issues"><img src="https://img.shields.io/github/issues/beercss/beercss" alt="Issues"></a>
@@ -131,8 +131,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
131
131
  ### DEFAULT VERSION
132
132
 
133
133
  ```html
134
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/beer.min.css" rel="stylesheet" />
135
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/beer.min.js"></script>
134
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/beer.min.css" rel="stylesheet" />
135
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/beer.min.js"></script>
136
136
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
137
137
  ```
138
138
 
@@ -150,8 +150,8 @@ import "material-dynamic-colors";
150
150
  Applied on child elements of `<* class="beer">...</*>`.
151
151
 
152
152
  ```html
153
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
154
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/beer.min.js"></script>
153
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
154
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/beer.min.js"></script>
155
155
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
156
156
  ```
157
157
 
@@ -169,7 +169,7 @@ import "material-dynamic-colors";
169
169
  Applied on child elements of `<beer-css>...</beer-css>`.
170
170
 
171
171
  ```html
172
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/beer.custom-element.min.js"></script>
172
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/beer.custom-element.min.js"></script>
173
173
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
174
174
  ```
175
175
 
@@ -195,8 +195,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
195
195
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
196
196
  <meta name="google" content="notranslate">
197
197
  <title>Hello world</title>
198
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/beer.min.css" rel="stylesheet">
199
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/beer.min.js"></script>
198
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/beer.min.css" rel="stylesheet">
199
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/beer.min.js"></script>
200
200
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
201
201
  </head>
202
202
  <body class="dark">
package/dist/cdn/beer.css CHANGED
@@ -101,7 +101,7 @@ body.dark {
101
101
  font-display: block;
102
102
  src:
103
103
  url("material-symbols-outlined.woff2") format("woff2"),
104
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-outlined.woff2") format("woff2");
104
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-outlined.woff2") format("woff2");
105
105
  }
106
106
  /* rounded icons */
107
107
  @font-face {
@@ -111,7 +111,7 @@ body.dark {
111
111
  font-display: block;
112
112
  src:
113
113
  url("material-symbols-rounded.woff2") format("woff2"),
114
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-rounded.woff2") format("woff2");
114
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-rounded.woff2") format("woff2");
115
115
  }
116
116
  /* sharp icons */
117
117
  @font-face {
@@ -121,7 +121,7 @@ body.dark {
121
121
  font-display: block;
122
122
  src:
123
123
  url("material-symbols-sharp.woff2") format("woff2"),
124
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-sharp.woff2") format("woff2");
124
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-sharp.woff2") format("woff2");
125
125
  }
126
126
  /* subset of only required icons */
127
127
  @font-face {
@@ -131,7 +131,7 @@ body.dark {
131
131
  font-display: block;
132
132
  src:
133
133
  url("material-symbols-subset.woff2") format("woff2"),
134
- url("https://cdn.jsdelivr.net/npm/beercss@3.11.4/dist/cdn/material-symbols-subset.woff2") format("woff2");
134
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.6/dist/cdn/material-symbols-subset.woff2") format("woff2");
135
135
  }
136
136
  * {
137
137
  -webkit-tap-highlight-color: transparent;
@@ -347,36 +347,6 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
347
347
  background-color: var(--surface-variant) !important;
348
348
  color: var(--on-surface-variant) !important;
349
349
  }
350
- .primary-container > .active,
351
- .primary-container.active {
352
- background-color: var(--primary) !important;
353
- color: var(--on-primary) !important;
354
- }
355
- .secondary-container > .active,
356
- .secondary-container.active {
357
- background-color: var(--secondary) !important;
358
- color: var(--on-secondary) !important;
359
- }
360
- .tertiary-container > .active,
361
- .tertiary-container.active {
362
- background-color: var(--tertiary) !important;
363
- color: var(--on-tertiary) !important;
364
- }
365
- .primary > .active,
366
- .primary.active {
367
- background-color: var(--primary-container) !important;
368
- color: var(--on-primary-container) !important;
369
- }
370
- .secondary > .active,
371
- .secondary.active {
372
- background-color: var(--secondary-container) !important;
373
- color: var(--on-secondary-container) !important;
374
- }
375
- .tertiary > .active,
376
- .tertiary.active {
377
- background-color: var(--tertiary-container) !important;
378
- color: var(--on-tertiary-container) !important;
379
- }
380
350
  .middle-align {
381
351
  display: flex;
382
352
  align-items: center !important;
@@ -3423,6 +3393,10 @@ nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.bu
3423
3393
  padding: 0.25rem 1rem;
3424
3394
  font-variation-settings: "FILL" 1;
3425
3395
  }
3396
+ nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip).active {
3397
+ background: none !important;
3398
+ color: currentColor !important;
3399
+ }
3426
3400
  :is(nav, .row):is(.left-align, .top-align, .vertical) {
3427
3401
  justify-content: flex-start;
3428
3402
  }
@@ -3532,6 +3506,7 @@ nav.toolbar.max {
3532
3506
  }
3533
3507
  nav.group {
3534
3508
  gap: 0.125rem;
3509
+ background: none !important;
3535
3510
  }
3536
3511
  nav.group > :is(.button, button):not(.chip, .fill, .border).active {
3537
3512
  background-color: var(--primary);
@@ -3551,6 +3526,48 @@ nav.group > :is(.button, button):not(.chip).active {
3551
3526
  outline: 0.125rem solid var(--primary);
3552
3527
  outline-offset: -0.125rem;
3553
3528
  }
3529
+ nav.primary > :is(a, button, .button),
3530
+ nav.primary-container > a:is(:hover, :focus, .active) > i,
3531
+ nav.primary-container > :is(a, button, .button).active,
3532
+ :is(a, button, .button):not(.extend).primary-container.active {
3533
+ background-color: var(--primary) !important;
3534
+ color: var(--on-primary) !important;
3535
+ }
3536
+ nav.primary-container > :is(a, button, .button),
3537
+ nav.primary > a:is(:hover, :focus, .active) > i,
3538
+ nav.primary > :is(a, button, .button).active,
3539
+ :is(a, button, .button):not(.extend).primary.active {
3540
+ background-color: var(--primary-container) !important;
3541
+ color: var(--on-primary-container) !important;
3542
+ }
3543
+ nav.secondary > :is(a, button, .button),
3544
+ nav.secondary-container > a:is(:hover, :focus, .active) > i,
3545
+ nav.secondary-container > :is(a, button, .button).active,
3546
+ :is(a, button, .button):not(.extend).secondary-container.active {
3547
+ background-color: var(--secondary) !important;
3548
+ color: var(--on-secondary) !important;
3549
+ }
3550
+ nav.secondary-container > :is(a, button, .button),
3551
+ nav.secondary > a:is(:hover, :focus, .active) > i,
3552
+ nav.secondary > :is(a, button, .button).active,
3553
+ :is(a, button, .button):not(.extend).secondary.active {
3554
+ background-color: var(--secondary-container) !important;
3555
+ color: var(--on-secondary-container) !important;
3556
+ }
3557
+ nav.tertiary > :is(a, button, .button),
3558
+ nav.tertiary-container > a:is(:hover, :focus, .active) > i,
3559
+ nav.tertiary-container > :is(a, button, .button).active,
3560
+ :is(a, button, .button):not(.extend).tertiary-container.active {
3561
+ background-color: var(--tertiary) !important;
3562
+ color: var(--on-tertiary) !important;
3563
+ }
3564
+ nav.tertiary-container > :is(a, button, .button),
3565
+ nav.tertiary > a:is(:hover, :focus, .active) > i,
3566
+ nav.tertiary > :is(a, button, .button).active,
3567
+ :is(a, button, .button):not(.extend).tertiary.active {
3568
+ background-color: var(--tertiary-container) !important;
3569
+ color: var(--on-tertiary-container) !important;
3570
+ }
3554
3571
  @media only screen and (max-width: 600px) {
3555
3572
  nav.top,
3556
3573
  nav.bottom {
@@ -3987,13 +4004,15 @@ progress.max + * {
3987
4004
  --_end: 0%;
3988
4005
  --_value1: "";
3989
4006
  --_value2: "";
4007
+ --_track: 1rem;
4008
+ --_thumb: max(2.5rem, calc(var(--_track) + 0.5rem));
3990
4009
  display: flex;
3991
4010
  align-items: center !important;
3992
4011
  inline-size: auto;
3993
- block-size: 1.25rem;
3994
- margin: 1.125rem;
4012
+ block-size: var(--_thumb);
3995
4013
  flex: none;
3996
4014
  direction: ltr;
4015
+ margin: 0 1.25rem;
3997
4016
  }
3998
4017
  [dir=rtl] .slider {
3999
4018
  transform: scaleX(-1);
@@ -4005,14 +4024,20 @@ progress.max + * {
4005
4024
  transform: rotate(-90deg);
4006
4025
  inline-size: 100%;
4007
4026
  }
4027
+ .slider.tiny {
4028
+ --_track: 1rem;
4029
+ }
4008
4030
  .slider.small {
4009
- inline-size: 4rem;
4031
+ --_track: 1.5rem;
4010
4032
  }
4011
4033
  .slider.medium {
4012
- inline-size: 8rem;
4034
+ --_track: 2.5rem;
4013
4035
  }
4014
4036
  .slider.large {
4015
- inline-size: 12rem;
4037
+ --_track: 3.5rem;
4038
+ }
4039
+ .slider.extra {
4040
+ --_track: 6rem;
4016
4041
  }
4017
4042
  .slider > input {
4018
4043
  appearance: none;
@@ -4021,7 +4046,7 @@ progress.max + * {
4021
4046
  outline: none;
4022
4047
  pointer-events: none;
4023
4048
  inline-size: 100%;
4024
- block-size: 1rem;
4049
+ block-size: var(--_track);
4025
4050
  background: none;
4026
4051
  z-index: 1;
4027
4052
  padding: 0;
@@ -4040,12 +4065,13 @@ progress.max + * {
4040
4065
  border: none;
4041
4066
  outline: none;
4042
4067
  pointer-events: all;
4043
- block-size: 2.75rem;
4068
+ block-size: var(--_thumb);
4044
4069
  inline-size: 0.25rem;
4045
4070
  border-radius: 0.25rem;
4046
4071
  background: var(--primary);
4047
4072
  cursor: grab;
4048
4073
  margin: 0;
4074
+ z-index: 1;
4049
4075
  }
4050
4076
  .slider > input::-webkit-slider-thumb:active {
4051
4077
  cursor: grabbing;
@@ -4077,23 +4103,24 @@ progress.max + * {
4077
4103
  opacity: 1;
4078
4104
  }
4079
4105
  .slider > input:disabled::-webkit-slider-thumb {
4080
- background: #9E9E9E;
4106
+ background: var(--outline);
4081
4107
  cursor: not-allowed;
4082
4108
  }
4083
4109
  .slider > input:disabled::-moz-range-thumb {
4084
- background: #9E9E9E;
4110
+ background: var(--outline);
4085
4111
  cursor: not-allowed;
4086
4112
  }
4087
4113
  .slider > input:disabled ~ span {
4088
- background: #9E9E9E;
4114
+ background: var(--outline);
4089
4115
  }
4090
4116
  .slider > span {
4091
4117
  position: absolute;
4092
- block-size: 1rem;
4118
+ block-size: var(--_track);
4093
4119
  border-radius: 1rem 0 0 1rem;
4094
4120
  background: var(--primary);
4121
+ color: var(--on-primary);
4095
4122
  z-index: 0;
4096
- inset: calc(50% - 0.5rem) var(--_end) auto var(--_start);
4123
+ inset: calc(50% - (var(--_track) / 2)) var(--_end) auto var(--_start);
4097
4124
  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
4098
4125
  }
4099
4126
  .slider > input[type=range] + input[type=range] ~ span {
@@ -4107,13 +4134,29 @@ progress.max + * {
4107
4134
  content: "";
4108
4135
  position: absolute;
4109
4136
  inline-size: 100%;
4110
- block-size: 1rem;
4137
+ block-size: var(--_track);
4111
4138
  border-radius: 1rem;
4112
- background: var(--primary-container);
4139
+ background: var(--secondary-container);
4113
4140
  clip-path: polygon(calc(var(--_start) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start) - 0.5rem) 100%, calc(var(--_start) - 0.5rem) 0, calc(100% - var(--_end) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end) + 0.5rem) 100%, calc(100% - var(--_end) + 0.5rem) 0);
4114
4141
  }
4115
4142
  .slider:has(> [disabled])::before {
4116
- background: var(--active);
4143
+ background: var(--outline-variant);
4144
+ }
4145
+ .slider:has([disabled]) {
4146
+ opacity: 0.62;
4147
+ }
4148
+ .slider > span > i {
4149
+ position: absolute;
4150
+ block-size: auto;
4151
+ inset: 0 auto 0 0.5rem;
4152
+ color: currentColor;
4153
+ z-index: 1;
4154
+ }
4155
+ .slider:not(.medium, .large, .extra) > span > i {
4156
+ display: none;
4157
+ }
4158
+ .slider.vertical > i {
4159
+ transform: rotate(90deg);
4117
4160
  }
4118
4161
  .slider > .tooltip {
4119
4162
  visibility: hidden !important;
@@ -4146,7 +4189,14 @@ progress.max + * {
4146
4189
  visibility: visible !important;
4147
4190
  }
4148
4191
  .slider.vertical > .tooltip {
4149
- display: none;
4192
+ inset-block-start: auto !important;
4193
+ margin-block-start: calc(-1 * var(--_thumb)) !important;
4194
+ block-size: 2.5rem;
4195
+ inline-size: 2.5rem;
4196
+ transform: rotate(90deg) translate(-75%, 50%) !important;
4197
+ }
4198
+ .slider.vertical > .tooltip + .tooltip {
4199
+ transform: rotate(90deg) translate(-75%, -50%) !important;
4150
4200
  }
4151
4201
  :is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
4152
4202
  flex: auto;
@@ -4191,6 +4241,7 @@ progress.max + * {
4191
4241
  inset: 0 var(--_end) 0 var(--_start);
4192
4242
  clip-path: none;
4193
4243
  background: currentcolor;
4244
+ color: inherit;
4194
4245
  border-radius: 0;
4195
4246
  }
4196
4247
  .slider.max.vertical > span {
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@3.11.4/dist/cdn/beer.min.js");
15
+ return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.6/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@3.11.4/dist/cdn/beer.scoped.min.css");
26
+ element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.6/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@3.11.4/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@3.11.4/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {this.classList.add("beer");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@3.11.6/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@3.11.6/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {this.classList.add("beer");await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;