beercss 3.7.7 → 3.7.9

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 (17) hide show
  1. package/README.md +10 -7
  2. package/dist/cdn/beer.css +16 -35
  3. package/dist/cdn/beer.js +163 -161
  4. package/dist/cdn/beer.min.css +1 -1
  5. package/dist/cdn/beer.min.js +1 -1
  6. package/package.json +1 -1
  7. package/src/cdn/beer.ts +51 -10
  8. package/src/cdn/elements/dialogs.ts +7 -7
  9. package/src/cdn/elements/fields.ts +7 -3
  10. package/src/cdn/elements/menus.ts +2 -2
  11. package/src/cdn/elements/overlays.css +1 -7
  12. package/src/cdn/elements/pages.css +1 -2
  13. package/src/cdn/elements/snackbars.css +5 -21
  14. package/src/cdn/helpers/theme.css +6 -6
  15. package/src/cdn/helpers/typography.css +1 -0
  16. package/src/cdn/settings/fonts.css +3 -3
  17. package/src/cdn/utils.ts +1 -42
package/README.md CHANGED
@@ -123,19 +123,19 @@ From jsdelivr.net.
123
123
 
124
124
  ```html
125
125
  // with html
126
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.7.7/dist/cdn/beer.min.css" rel="stylesheet" />
127
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.7/dist/cdn/beer.min.js"></script>
126
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.7.9/dist/cdn/beer.min.css" rel="stylesheet" />
127
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.9/dist/cdn/beer.min.js"></script>
128
128
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
129
129
  ```
130
130
 
131
131
  ```css
132
132
  // with css
133
- @import "https://cdn.jsdelivr.net/npm/beercss@3.7.7/dist/cdn/beer.min.css";
133
+ @import "https://cdn.jsdelivr.net/npm/beercss@3.7.9/dist/cdn/beer.min.css";
134
134
  ```
135
135
 
136
136
  ```js
137
137
  // with javascript
138
- import "https://cdn.jsdelivr.net/npm/beercss@3.7.7/dist/cdn/beer.min.js";
138
+ import "https://cdn.jsdelivr.net/npm/beercss@3.7.9/dist/cdn/beer.min.js";
139
139
  import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js";
140
140
  ```
141
141
 
@@ -187,8 +187,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
187
187
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
188
188
  <meta name="google" content="notranslate">
189
189
  <title>Hello world</title>
190
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.7.7/dist/cdn/beer.min.css" rel="stylesheet">
191
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.7/dist/cdn/beer.min.js"></script>
190
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.7.9/dist/cdn/beer.min.css" rel="stylesheet">
191
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.9/dist/cdn/beer.min.js"></script>
192
192
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
193
193
  </head>
194
194
  <body class="dark">
@@ -297,5 +297,8 @@ Hi! We are really excited that you are interested in contributing to Beer CSS! B
297
297
 
298
298
  [MIT](https://opensource.org/licenses/MIT)
299
299
 
300
- # Cheers to all people here 🍻
300
+ # Cheers to all stargazers 🍻
301
301
  [![Stargazers repo roster for @beercss/beercss](https://reporoster.com/stars/notext/beercss/beercss)](https://github.com/beercss/beercss/stargazers)
302
+
303
+ ### Stargazers over time
304
+ [![Stargazers over time](https://starchart.cc/beercss/beercss.svg?variant=adaptive)](https://starchart.cc/beercss/beercss)
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.7.7/dist/cdn/material-symbols-outlined.woff2") format("woff2");
104
+ url("https://cdn.jsdelivr.net/npm/beercss@3.7.9/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.7.7/dist/cdn/material-symbols-rounded.woff2") format("woff2");
114
+ url("https://cdn.jsdelivr.net/npm/beercss@3.7.9/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.7.7/dist/cdn/material-symbols-sharp.woff2") format("woff2");
124
+ url("https://cdn.jsdelivr.net/npm/beercss@3.7.9/dist/cdn/material-symbols-sharp.woff2") format("woff2");
125
125
  }
126
126
  * {
127
127
  -webkit-tap-highlight-color: transparent;
@@ -188,6 +188,11 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
188
188
  outline: 0.125rem solid var(--primary);
189
189
  outline-offset: 0.25rem;
190
190
  }
191
+ .transparent {
192
+ background-color: transparent !important;
193
+ box-shadow: none !important;
194
+ color: inherit !important;
195
+ }
191
196
  .primary {
192
197
  background-color: var(--primary) !important;
193
198
  color: var(--on-primary) !important;
@@ -319,11 +324,6 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
319
324
  .white-text {
320
325
  color: #FFF !important;
321
326
  }
322
- .transparent {
323
- background-color: transparent !important;
324
- box-shadow: none !important;
325
- color: inherit !important;
326
- }
327
327
  .transparent-border {
328
328
  border-color: transparent !important;
329
329
  }
@@ -1555,6 +1555,7 @@ blockquote > code {
1555
1555
  }
1556
1556
  pre:has(> code){
1557
1557
  direction: ltr;
1558
+ text-align: start;
1558
1559
  }
1559
1560
  .wave::after,
1560
1561
  .chip::after,
@@ -3323,23 +3324,17 @@ nav.tabbed > a.active {
3323
3324
  opacity: 0;
3324
3325
  visibility: hidden;
3325
3326
  position: fixed;
3326
- inset: 0 auto auto 0;
3327
- inline-size: 100%;
3328
- block-size: 100%;
3327
+ inset: 0;
3329
3328
  color: var(--on-surface);
3330
3329
  background-color: var(--overlay);
3331
3330
  z-index: 100;
3332
3331
  transition: all var(--speed3), 0s background-color;
3333
3332
  }
3334
- nav > .overlay {
3335
- z-index: 0;
3336
- }
3337
3333
  .overlay.active {
3338
3334
  opacity: 1;
3339
3335
  visibility: visible;
3340
3336
  }
3341
- .page,
3342
- :is(.page, dialog):not(.active) .page.active {
3337
+ .page {
3343
3338
  ---transform: translate(0, 0);
3344
3339
 
3345
3340
  opacity: 0;
@@ -3957,9 +3952,6 @@ progress.max.vertical {
3957
3952
  }
3958
3953
  }
3959
3954
  .snackbar {
3960
- ---transform-start: translate(-50%, 1rem);
3961
- ---transform-end: translate(-50%, 0);
3962
-
3963
3955
  position: fixed;
3964
3956
  inset: auto auto 6rem 50%;
3965
3957
  inline-size: 80%;
@@ -3977,32 +3969,21 @@ progress.max.vertical {
3977
3969
  align-items: center;
3978
3970
  border-radius: 0.25rem;
3979
3971
  gap: 0.5rem;
3980
- transform: var(---transform-end);
3972
+ transition: all var(--speed2);
3973
+ transform: translate(-50%, 1rem);
3974
+ opacity: 0;
3981
3975
  }
3982
3976
  .snackbar.top {
3983
3977
  inset: 6rem auto auto 50%;
3984
3978
  }
3985
3979
  .snackbar.active {
3986
3980
  visibility: visible;
3987
- animation: var(--speed2) to-snackbar;
3988
- }
3989
- .snackbar.active.top {
3990
- ---transform-end: translate(-50%, -1rem);
3981
+ transform: translate(-50%, 0);
3982
+ opacity: 1;
3991
3983
  }
3992
3984
  .snackbar > .max {
3993
3985
  flex: auto;
3994
3986
  }
3995
- @keyframes to-snackbar {
3996
- 0% {
3997
- opacity: 0;
3998
- transform: var(---transform-start);
3999
- }
4000
-
4001
- 100% {
4002
- opacity: 1;
4003
- transform: var(---transform-end);
4004
- }
4005
- }
4006
3987
  @media only screen and (min-width: 993px) {
4007
3988
  .snackbar {
4008
3989
  inline-size: 40%;
package/dist/cdn/beer.js CHANGED
@@ -1,128 +1,3 @@
1
- const _dialogs = [];
2
- function onKeydownDialog(e) {
3
- if (e.key === "Escape") {
4
- const dialog = e.currentTarget;
5
- updateDialog(dialog, dialog);
6
- }
7
- }
8
- function closeDialog(dialog, overlay) {
9
- removeClass(queryAllDataUi(dialog.id), "active");
10
- removeClass(dialog, "active");
11
- removeClass(overlay, "active");
12
- dialog.close();
13
- _dialogs.pop();
14
- const previousDialog = _dialogs[_dialogs.length - 1];
15
- if (previousDialog)
16
- previousDialog.focus();
17
- else if (isTouchable())
18
- document.body.classList.remove("no-scroll");
19
- }
20
- async function openDialog(dialog, overlay, isModal, from) {
21
- if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip"))
22
- addClass(from, "active");
23
- addClass(overlay, "active");
24
- addClass(dialog, "active");
25
- if (isModal)
26
- dialog.showModal();
27
- else
28
- dialog.show();
29
- await wait(90);
30
- if (!isModal)
31
- on(dialog, "keydown", onKeydownDialog, false);
32
- _dialogs.push(dialog);
33
- dialog.focus();
34
- if (isTouchable())
35
- document.body.classList.add("no-scroll");
36
- }
37
- function onClickOverlay(e) {
38
- const overlay = e.currentTarget;
39
- const dialog = next(overlay);
40
- if (hasTag(dialog, "dialog"))
41
- closeDialog(dialog, overlay);
42
- }
43
- async function updateDialog(from, dialog) {
44
- blurActiveElement();
45
- let overlay = prev(dialog);
46
- const isActive = hasClass(dialog, "active") || dialog.open;
47
- const isModal = hasClass(dialog, "modal");
48
- if (!isModal)
49
- off(dialog, "keydown", onKeydownDialog, false);
50
- if (!hasClass(overlay, "overlay")) {
51
- overlay = create({ class: "overlay" });
52
- insertBefore(overlay, dialog);
53
- await wait(90);
54
- }
55
- if (!isModal)
56
- on(overlay, "click", onClickOverlay, false);
57
- if (isActive)
58
- closeDialog(dialog, overlay);
59
- else
60
- openDialog(dialog, overlay, isModal, from);
61
- }
62
- let _timeoutMenu;
63
- function onClickDocument(e) {
64
- off(document.body, "click", onClickDocument);
65
- const body = e.target;
66
- const menus = queryAll("menu.active");
67
- for (let i = 0; i < menus.length; i++)
68
- updateMenu(body, menus[i], e);
69
- }
70
- function focusOnMenuOrInput(menu) {
71
- setTimeout(() => {
72
- const input = query(".field > input", menu);
73
- if (input)
74
- input.focus();
75
- else
76
- menu.focus();
77
- }, 90);
78
- }
79
- function updateMenu(from, menu, e) {
80
- if (_timeoutMenu)
81
- clearTimeout(_timeoutMenu);
82
- _timeoutMenu = setTimeout(() => {
83
- on(document.body, "click", onClickDocument);
84
- if (!hasTag(document.activeElement, "input"))
85
- blurActiveElement();
86
- const isActive = hasClass(menu, "active");
87
- const isEvent = !!((e == null ? void 0 : e.target) === from);
88
- const isChild = !!from.closest("menu");
89
- if (!isActive && isChild || isActive && isEvent) {
90
- removeClass(menu, "active");
91
- return;
92
- }
93
- removeClass(queryAll("menu.active"), "active");
94
- addClass(menu, "active");
95
- focusOnMenuOrInput(menu);
96
- }, 90);
97
- }
98
- function updatePage(page) {
99
- const container = parent(page);
100
- if (container)
101
- removeClass(queryAll(".page", container), "active");
102
- addClass(page, "active");
103
- }
104
- let _timeoutSnackbar;
105
- function onClickSnackbar(e) {
106
- const snackbar = e.currentTarget;
107
- removeClass(snackbar, "active");
108
- if (_timeoutSnackbar)
109
- clearTimeout(_timeoutSnackbar);
110
- }
111
- function updateSnackbar(snackbar, milliseconds) {
112
- blurActiveElement();
113
- const activeSnackbars = queryAll(".snackbar.active");
114
- for (let i = 0; i < activeSnackbars.length; i++)
115
- removeClass(activeSnackbars[i], "active");
116
- addClass(snackbar, "active");
117
- on(snackbar, "click", onClickSnackbar);
118
- if (_timeoutSnackbar)
119
- clearTimeout(_timeoutSnackbar);
120
- if (milliseconds === -1)
121
- return;
122
- _timeoutSnackbar = setTimeout(() => {
123
- removeClass(snackbar, "active");
124
- }, milliseconds ?? 6e3);
125
- }
126
1
  const _emptyNodeList = [];
127
2
  function isTouchable() {
128
3
  return window.matchMedia("(pointer: coarse)").matches;
@@ -230,35 +105,9 @@ function updateAllClickable(element) {
230
105
  removeClass(as[i], "active");
231
106
  addClass(element, "active");
232
107
  }
233
- async function run(from, to, options, e) {
234
- if (!to) {
235
- to = query(from.getAttribute("data-ui"));
236
- if (!to)
237
- return;
238
- }
239
- updateAllClickable(from);
240
- if (hasTag(to, "dialog")) {
241
- await updateDialog(from, to);
242
- return;
243
- }
244
- if (hasTag(to, "menu")) {
245
- updateMenu(from, to, e);
246
- return;
247
- }
248
- if (hasClass(to, "snackbar")) {
249
- updateSnackbar(to, options);
250
- return;
251
- }
252
- if (hasClass(to, "page")) {
253
- updatePage(to);
254
- return;
255
- }
256
- if (hasClass(to, "active")) {
257
- removeClass(from, "active");
258
- removeClass(to, "active");
259
- return;
260
- }
261
- addClass(to, "active");
108
+ function updatePlaceholder(element) {
109
+ if (!element.placeholder)
110
+ element.placeholder = " ";
262
111
  }
263
112
  function onClickLabel(e) {
264
113
  const label = e.currentTarget;
@@ -341,10 +190,7 @@ function updateAllTextareas() {
341
190
  function updateInput(input) {
342
191
  if (hasType(input, "number") && !input.value)
343
192
  input.value = "";
344
- if (!input.placeholder)
345
- input.placeholder = " ";
346
- if (input.getAttribute("data-ui"))
347
- run(input, null);
193
+ updatePlaceholder(input);
348
194
  }
349
195
  function updateFile(input, e) {
350
196
  if ((e == null ? void 0 : e.key) === "Enter") {
@@ -379,6 +225,7 @@ function updateColor(input, e) {
379
225
  updateInput(nextInput);
380
226
  }
381
227
  function updateTextarea(textarea) {
228
+ updatePlaceholder(textarea);
382
229
  const field = parent(textarea);
383
230
  field.removeAttribute("style");
384
231
  if (hasClass(field, "min"))
@@ -546,6 +393,131 @@ function updateMode(value) {
546
393
  body.setAttribute("style", lastThemeStyle);
547
394
  return getMode();
548
395
  }
396
+ const _dialogs = [];
397
+ function onKeydownDialog(e) {
398
+ if (e.key === "Escape") {
399
+ const dialog = e.currentTarget;
400
+ void updateDialog(dialog, dialog);
401
+ }
402
+ }
403
+ function closeDialog(dialog, overlay) {
404
+ removeClass(queryAllDataUi(dialog.id), "active");
405
+ removeClass(dialog, "active");
406
+ removeClass(overlay, "active");
407
+ dialog.close();
408
+ _dialogs.pop();
409
+ const previousDialog = _dialogs[_dialogs.length - 1];
410
+ if (previousDialog)
411
+ previousDialog.focus();
412
+ else if (isTouchable())
413
+ document.body.classList.remove("no-scroll");
414
+ }
415
+ async function openDialog(dialog, overlay, isModal, from) {
416
+ if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip"))
417
+ addClass(from, "active");
418
+ addClass(overlay, "active");
419
+ addClass(dialog, "active");
420
+ if (isModal)
421
+ dialog.showModal();
422
+ else
423
+ dialog.show();
424
+ await wait(90);
425
+ if (!isModal)
426
+ on(dialog, "keydown", onKeydownDialog, false);
427
+ _dialogs.push(dialog);
428
+ dialog.focus();
429
+ if (isTouchable())
430
+ document.body.classList.add("no-scroll");
431
+ }
432
+ function onClickOverlay(e) {
433
+ const overlay = e.currentTarget;
434
+ const dialog = next(overlay);
435
+ if (hasTag(dialog, "dialog"))
436
+ closeDialog(dialog, overlay);
437
+ }
438
+ async function updateDialog(from, dialog) {
439
+ blurActiveElement();
440
+ let overlay = prev(dialog);
441
+ const isActive = hasClass(dialog, "active") || dialog.open;
442
+ const isModal = hasClass(dialog, "modal");
443
+ if (!isModal)
444
+ off(dialog, "keydown", onKeydownDialog, false);
445
+ if (!hasClass(overlay, "overlay")) {
446
+ overlay = create({ class: "overlay" });
447
+ insertBefore(overlay, dialog);
448
+ await wait(90);
449
+ }
450
+ if (!isModal)
451
+ on(overlay, "click", onClickOverlay, false);
452
+ if (isActive)
453
+ closeDialog(dialog, overlay);
454
+ else
455
+ void openDialog(dialog, overlay, isModal, from);
456
+ }
457
+ let _timeoutMenu;
458
+ function onClickDocument(e) {
459
+ off(document.body, "click", onClickDocument);
460
+ const body = e.target;
461
+ const menus = queryAll("menu.active");
462
+ for (let i = 0; i < menus.length; i++)
463
+ updateMenu(body, menus[i], e);
464
+ }
465
+ function focusOnMenuOrInput(menu) {
466
+ setTimeout(() => {
467
+ const input = query(".field > input", menu);
468
+ if (input)
469
+ input.focus();
470
+ else
471
+ menu.focus();
472
+ }, 90);
473
+ }
474
+ function updateMenu(from, menu, e) {
475
+ if (_timeoutMenu)
476
+ clearTimeout(_timeoutMenu);
477
+ _timeoutMenu = setTimeout(() => {
478
+ on(document.body, "click", onClickDocument);
479
+ if (!hasTag(document.activeElement, "input"))
480
+ blurActiveElement();
481
+ const isActive = hasClass(menu, "active");
482
+ const isEvent = (e == null ? void 0 : e.target) === from;
483
+ const isChild = !!from.closest("menu");
484
+ if (!isActive && isChild || isActive && isEvent) {
485
+ removeClass(menu, "active");
486
+ return;
487
+ }
488
+ removeClass(queryAll("menu.active"), "active");
489
+ addClass(menu, "active");
490
+ focusOnMenuOrInput(menu);
491
+ }, 90);
492
+ }
493
+ let _timeoutSnackbar;
494
+ function onClickSnackbar(e) {
495
+ const snackbar = e.currentTarget;
496
+ removeClass(snackbar, "active");
497
+ if (_timeoutSnackbar)
498
+ clearTimeout(_timeoutSnackbar);
499
+ }
500
+ function updateSnackbar(snackbar, milliseconds) {
501
+ blurActiveElement();
502
+ const activeSnackbars = queryAll(".snackbar.active");
503
+ for (let i = 0; i < activeSnackbars.length; i++)
504
+ removeClass(activeSnackbars[i], "active");
505
+ addClass(snackbar, "active");
506
+ on(snackbar, "click", onClickSnackbar);
507
+ if (_timeoutSnackbar)
508
+ clearTimeout(_timeoutSnackbar);
509
+ if (milliseconds === -1)
510
+ return;
511
+ _timeoutSnackbar = setTimeout(() => {
512
+ removeClass(snackbar, "active");
513
+ }, milliseconds ?? 6e3);
514
+ }
515
+ function updatePage(page) {
516
+ const container = parent(page);
517
+ if (container)
518
+ removeClass(queryAll(".page", container), "active");
519
+ addClass(page, "active");
520
+ }
549
521
  let _timeoutMutation;
550
522
  let _mutation;
551
523
  function onMutation() {
@@ -553,12 +525,42 @@ function onMutation() {
553
525
  clearTimeout(_timeoutMutation);
554
526
  _timeoutMutation = setTimeout(async () => await ui(), 180);
555
527
  }
528
+ async function run(from, to, options, e) {
529
+ if (!to) {
530
+ to = query(from.getAttribute("data-ui"));
531
+ if (!to)
532
+ return;
533
+ }
534
+ updateAllClickable(from);
535
+ if (hasTag(to, "dialog")) {
536
+ await updateDialog(from, to);
537
+ return;
538
+ }
539
+ if (hasTag(to, "menu")) {
540
+ updateMenu(from, to, e);
541
+ return;
542
+ }
543
+ if (hasClass(to, "snackbar")) {
544
+ updateSnackbar(to, options);
545
+ return;
546
+ }
547
+ if (hasClass(to, "page")) {
548
+ updatePage(to);
549
+ return;
550
+ }
551
+ if (hasClass(to, "active")) {
552
+ removeClass(from, "active");
553
+ removeClass(to, "active");
554
+ return;
555
+ }
556
+ addClass(to, "active");
557
+ }
556
558
  function onClickElement(e) {
557
- run(e.currentTarget, null, null, e);
559
+ void run(e.currentTarget, null, null, e);
558
560
  }
559
561
  function onKeydownElement(e) {
560
562
  if (e.key === "Enter")
561
- run(e.currentTarget, null, null, e);
563
+ void run(e.currentTarget, null, null, e);
562
564
  }
563
565
  function setup() {
564
566
  if (_mutation)
@@ -590,7 +592,7 @@ function ui(selector, options) {
590
592
  const to = query(selector);
591
593
  if (!to)
592
594
  return;
593
- run(to, to, options);
595
+ void run(to, to, options);
594
596
  }
595
597
  updateAllDataUis();
596
598
  updateAllFields();