beercss 3.6.12 → 3.7.0

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 (28) hide show
  1. package/README.md +6 -6
  2. package/dist/cdn/beer.css +38 -34
  3. package/dist/cdn/beer.js +420 -316
  4. package/dist/cdn/beer.min.css +1 -1
  5. package/dist/cdn/beer.min.js +1 -1
  6. package/index.d.ts +5 -2
  7. package/package.json +2 -2
  8. package/src/cdn/beer.ts +32 -489
  9. package/src/cdn/elements/dialogs.css +1 -0
  10. package/src/cdn/elements/dialogs.ts +68 -0
  11. package/src/cdn/elements/fields.css +4 -1
  12. package/src/cdn/elements/fields.ts +142 -0
  13. package/src/cdn/elements/grids.css +4 -0
  14. package/src/cdn/elements/icons.css +3 -1
  15. package/src/cdn/elements/menus.css +1 -1
  16. package/src/cdn/elements/menus.ts +40 -0
  17. package/src/cdn/elements/navigations.css +2 -0
  18. package/src/cdn/elements/pages.ts +7 -0
  19. package/src/cdn/elements/selections.css +14 -23
  20. package/src/cdn/elements/sliders.css +2 -1
  21. package/src/cdn/elements/sliders.ts +86 -0
  22. package/src/cdn/elements/snackbars.ts +27 -0
  23. package/src/cdn/helpers/theme.ts +84 -0
  24. package/src/cdn/helpers/typography.css +4 -1
  25. package/src/cdn/helpers/waves.css +2 -2
  26. package/src/cdn/settings/fonts.css +3 -3
  27. package/src/cdn/settings/globals.css +1 -1
  28. package/src/cdn/utils.ts +162 -0
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.6.12/dist/cdn/beer.min.css" rel="stylesheet" />
127
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.12/dist/cdn/beer.min.js"></script>
126
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.7.0/dist/cdn/beer.min.css" rel="stylesheet" />
127
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.0/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.6.12/dist/cdn/beer.min.css";
133
+ @import "https://cdn.jsdelivr.net/npm/beercss@3.7.0/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.6.12/dist/cdn/beer.min.js";
138
+ import "https://cdn.jsdelivr.net/npm/beercss@3.7.0/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.6.12/dist/cdn/beer.min.css" rel="stylesheet">
191
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.12/dist/cdn/beer.min.js"></script>
190
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.7.0/dist/cdn/beer.min.css" rel="stylesheet">
191
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.0/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">
package/dist/cdn/beer.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  --size: 16px;
3
- --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
3
+ --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif;
4
4
  --font-icon: "Material Symbols Outlined";
5
5
  --speed1: 0.1s;
6
6
  --speed2: 0.2s;
@@ -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.6.12/dist/cdn/material-symbols-outlined.woff2") format("woff2");
104
+ url("https://cdn.jsdelivr.net/npm/beercss@3.7.0/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.6.12/dist/cdn/material-symbols-rounded.woff2") format("woff2");
114
+ url("https://cdn.jsdelivr.net/npm/beercss@3.7.0/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.6.12/dist/cdn/material-symbols-sharp.woff2") format("woff2");
124
+ url("https://cdn.jsdelivr.net/npm/beercss@3.7.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
125
125
  }
126
126
  * {
127
127
  -webkit-tap-highlight-color: transparent;
@@ -1540,7 +1540,6 @@ code {
1540
1540
  border-radius: 0;
1541
1541
  background-color: var(--surface-container);
1542
1542
  white-space: pre-wrap;
1543
- direction: ltr;
1544
1543
  padding: 0.25rem;
1545
1544
  }
1546
1545
  pre > code,
@@ -1550,6 +1549,9 @@ blockquote > code {
1550
1549
  .scroll > code {
1551
1550
  white-space: pre;
1552
1551
  }
1552
+ pre:has(> code){
1553
+ direction: ltr;
1554
+ }
1553
1555
  .wave::after,
1554
1556
  .chip::after,
1555
1557
  :is(.button, button)::after,
@@ -1562,13 +1564,13 @@ blockquote > code {
1562
1564
  inline-size: 100%;
1563
1565
  block-size: 100%;
1564
1566
  background-position: center;
1565
- background-image: radial-gradient(circle, var(--active) 1%, transparent 1%);
1567
+ background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
1566
1568
  opacity: 0;
1567
1569
  transition: none;
1568
1570
  }
1569
1571
  :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):is(:focus-visible, :hover)::after {
1570
1572
  background-size: 15000%;
1571
- opacity: 1;
1573
+ opacity: 0.1;
1572
1574
  transition: background-size var(--speed2) linear;
1573
1575
  }
1574
1576
  :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):active::after {
@@ -1974,6 +1976,7 @@ dialog {
1974
1976
  transition: all var(--speed3), 0s background-color;
1975
1977
  border-radius: 1.75rem;
1976
1978
  transform: translate(-50%, -4rem);
1979
+ outline: none;
1977
1980
  }
1978
1981
  dialog::backdrop {
1979
1982
  display: none;
@@ -2215,13 +2218,14 @@ summary:focus {
2215
2218
  background: none;
2216
2219
  resize: none;
2217
2220
  text-align: start;
2221
+ cursor: text;
2218
2222
  }
2219
2223
  input::-webkit-date-and-time-value {
2220
2224
  text-align: start;
2221
2225
  }
2222
2226
  :is(input, select, textarea):-webkit-autofill {
2223
2227
  -webkit-background-clip: text;
2224
- -webkit-text-fill-color: inherit;
2228
+ -webkit-text-fill-color: var(--on-surface);
2225
2229
  }
2226
2230
  .field > :is(input, textarea, select):focus {
2227
2231
  border: 0.125rem solid transparent;
@@ -2231,6 +2235,7 @@ input::-webkit-date-and-time-value {
2231
2235
  overflow: hidden;
2232
2236
  position: absolute;
2233
2237
  inset: 0;
2238
+ max-block-size: 12rem;
2234
2239
  }
2235
2240
  input[type=file],
2236
2241
  input[type=color],
@@ -2344,6 +2349,7 @@ input[type=number] {
2344
2349
  }
2345
2350
  .field > textarea {
2346
2351
  padding-block-start: var(---start);
2352
+ white-space: pre-wrap;
2347
2353
  }
2348
2354
  .field > textarea:focus {
2349
2355
  padding-block-start: calc(var(---start) - 0.06rem);
@@ -2505,6 +2511,9 @@ fieldset > legend + * {
2505
2511
  .grid.large-space {
2506
2512
  ---gap: 2rem;
2507
2513
  }
2514
+ .grid > * {
2515
+ margin: 0;
2516
+ }
2508
2517
  .s1 {
2509
2518
  grid-area: auto/span 1;
2510
2519
  }
@@ -2639,7 +2648,9 @@ fieldset > legend + * {
2639
2648
  grid-area: auto/span 12;
2640
2649
  }
2641
2650
  }
2642
- i {
2651
+ i,
2652
+ :is(.checkbox, .radio, .switch) > span::before,
2653
+ .icon > span > i {
2643
2654
  ---size: 1.5rem;
2644
2655
 
2645
2656
  font-family: var(--font-icon);
@@ -2923,7 +2934,7 @@ menu.no-wrap {
2923
2934
  }
2924
2935
  menu.active,
2925
2936
  menu:not([data-ui]):active,
2926
- :not([data-ui]):focus-within > menu,
2937
+ :not(menu, [data-ui]):focus-within > menu,
2927
2938
  menu > :is(a, li):hover + menu,
2928
2939
  menu > menu:hover {
2929
2940
  opacity: 1;
@@ -3212,6 +3223,8 @@ nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.bu
3212
3223
  align-self: center;
3213
3224
  display: flex;
3214
3225
  flex-direction: column;
3226
+ gap: 0.25rem;
3227
+ line-height: normal;
3215
3228
  }
3216
3229
  nav:is(.top, .bottom):not(.drawer) > a:not(.button, .chip),
3217
3230
  nav:is(.top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
@@ -3553,23 +3566,9 @@ progress.max.vertical {
3553
3566
  padding-inline-start: 0.25rem;
3554
3567
  }
3555
3568
  :is(.checkbox, .radio, .switch) > span::before,
3556
- .icon > span > i {
3557
- font-family: var(--font-icon);
3558
- font-weight: normal;
3559
- font-style: normal;
3560
- font-size: 1.5rem;
3561
- line-height: 1;
3562
- letter-spacing: normal;
3563
- text-transform: none;
3564
- display: inline-block;
3565
- white-space: nowrap;
3566
- word-wrap: normal;
3567
- direction: ltr;
3568
- font-feature-settings: "liga";
3569
- -webkit-font-smoothing: antialiased;
3570
- vertical-align: middle;
3571
- text-align: center;
3572
- overflow: hidden;
3569
+ .icon > span > i,
3570
+ :is(.checkbox, .radio) > span::after {
3571
+ content: '';
3573
3572
  inline-size: 1.5rem;
3574
3573
  block-size: 1.5rem;
3575
3574
  box-sizing: border-box;
@@ -3578,12 +3577,9 @@ progress.max.vertical {
3578
3577
  color: var(--primary);
3579
3578
  position: absolute;
3580
3579
  inset: auto auto auto -1.5rem;
3581
- background-color: transparent;
3582
3580
  border-radius: 50%;
3583
3581
  user-select: none;
3584
3582
  z-index: 1;
3585
- box-shadow: 0 0 0 0 var(--active);
3586
- transition: all var(--speed1);
3587
3583
  }
3588
3584
  .switch > span::before,
3589
3585
  .switch.icon > span > i {
@@ -3628,9 +3624,16 @@ progress.max.vertical {
3628
3624
  content: "" !important;
3629
3625
  font-variation-settings: unset !important;
3630
3626
  }
3631
- :is(.checkbox, .radio) > input:not(:disabled):is(:focus, :hover) + span::before {
3632
- background-color: var(--active);
3633
- box-shadow: 0 0 0 0.5rem var(--active);
3627
+ :is(.checkbox, .radio) > span::after {
3628
+ transition: all var(--speed1);
3629
+ background-color: currentColor;
3630
+ box-shadow: 0 0 0 0 currentColor;
3631
+ opacity: 0;
3632
+ }
3633
+ :is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span::after,
3634
+ :is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span::after {
3635
+ box-shadow: 0 0 0 0.5rem currentColor;
3636
+ opacity: 0.1;
3634
3637
  }
3635
3638
  .switch > input:not(:disabled):is(:focus, :hover) + span::before,
3636
3639
  .switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
@@ -3747,6 +3750,7 @@ progress.max.vertical {
3747
3750
  z-index: 1;
3748
3751
  padding: 0;
3749
3752
  margin: 0;
3753
+ transform: rotate(0deg);
3750
3754
  }
3751
3755
  .slider > input:only-of-type {
3752
3756
  pointer-events: all;
@@ -3916,7 +3920,7 @@ progress.max.vertical {
3916
3920
  .slider.max.vertical > span {
3917
3921
  inset: var(---end) 0 var(---start) 0;
3918
3922
  }
3919
- @media (hover: none){
3923
+ @media (pointer: coarse) {
3920
3924
  .slider > :hover ~ .tooltip {
3921
3925
  inset-block-start: -1rem !important;
3922
3926
  opacity: 1 !important;