beercss 3.8.0 → 3.9.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 (23) hide show
  1. package/README.md +6 -6
  2. package/dist/cdn/beer.css +175 -83
  3. package/dist/cdn/beer.js +10 -2
  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.css +1 -0
  8. package/src/cdn/elements/dialogs.css +2 -6
  9. package/src/cdn/elements/expansions.css +5 -10
  10. package/src/cdn/elements/fields.ts +1 -1
  11. package/src/cdn/elements/icons.css +1 -1
  12. package/src/cdn/elements/lists.css +71 -0
  13. package/src/cdn/elements/media.css +1 -1
  14. package/src/cdn/elements/menus.css +53 -42
  15. package/src/cdn/elements/navigations.css +1 -1
  16. package/src/cdn/elements/overlays.css +14 -2
  17. package/src/cdn/elements/selections.css +32 -14
  18. package/src/cdn/elements/sliders.ts +8 -1
  19. package/src/cdn/elements/snackbars.css +1 -2
  20. package/src/cdn/helpers/forms.css +1 -1
  21. package/src/cdn/helpers/spaces.css +4 -4
  22. package/src/cdn/settings/fonts.css +3 -3
  23. package/src/cdn/settings/globals.css +1 -1
package/README.md CHANGED
@@ -131,19 +131,19 @@ From jsdelivr.net.
131
131
 
132
132
  ```html
133
133
  // with html
134
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.css" rel="stylesheet" />
135
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js"></script>
134
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.css" rel="stylesheet" />
135
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.9.0/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
 
139
139
  ```css
140
140
  // with css
141
- @import "https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.css";
141
+ @import "https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.css";
142
142
  ```
143
143
 
144
144
  ```js
145
145
  // with javascript
146
- import "https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js";
146
+ import "https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.js";
147
147
  import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js";
148
148
  ```
149
149
 
@@ -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.8.0/dist/cdn/beer.min.css" rel="stylesheet">
199
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js"></script>
198
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.css" rel="stylesheet">
199
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.9.0/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
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --size: 16px;
2
+ --size: 1rem;
3
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;
@@ -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.8.0/dist/cdn/material-symbols-outlined.woff2") format("woff2");
104
+ url("https://cdn.jsdelivr.net/npm/beercss@3.9.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.8.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
114
+ url("https://cdn.jsdelivr.net/npm/beercss@3.9.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.8.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
124
+ url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
125
125
  }
126
126
  * {
127
127
  -webkit-tap-highlight-color: transparent;
@@ -1175,7 +1175,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
1175
1175
  :is(.circle, .square).round {
1176
1176
  border-radius: 1rem !important;
1177
1177
  }
1178
- .border:not(table, .field) {
1178
+ .border:not(table, .field, .list) {
1179
1179
  box-sizing: border-box;
1180
1180
  border: 0.0625rem solid var(--outline);
1181
1181
  background-color: transparent;
@@ -1378,16 +1378,16 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
1378
1378
  display: flex;
1379
1379
  white-space: nowrap;
1380
1380
  }
1381
- .tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
1381
+ .tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
1382
1382
  block-size: 0.5rem;
1383
1383
  }
1384
- :is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip) {
1384
+ :is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
1385
1385
  block-size: 1rem;
1386
1386
  }
1387
- .medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
1387
+ .medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
1388
1388
  block-size: 2rem;
1389
1389
  }
1390
- .large-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
1390
+ .large-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
1391
1391
  block-size: 3rem;
1392
1392
  }
1393
1393
  .responsive {
@@ -2011,9 +2011,6 @@ dialog {
2011
2011
  transform: translate(-50%, -4rem);
2012
2012
  outline: none;
2013
2013
  }
2014
- dialog::backdrop {
2015
- display: none;
2016
- }
2017
2014
  dialog.small {
2018
2015
  inline-size: 25%;
2019
2016
  block-size: 25%;
@@ -2026,7 +2023,7 @@ dialog.large {
2026
2023
  inline-size: 75%;
2027
2024
  block-size: 75%;
2028
2025
  }
2029
- dialog:is(.active, [open]) {
2026
+ dialog:is(.active, [open], :popover-open) {
2030
2027
  visibility: visible;
2031
2028
  opacity: 1;
2032
2029
  transform: translate(-50%, 0);
@@ -2086,7 +2083,7 @@ dialog.max {
2086
2083
  transform: translateY(4rem);
2087
2084
  background-color: var(--surface);
2088
2085
  }
2089
- dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
2086
+ dialog:is(.active, [open], :popover-open):is(.left, .right, .top, .bottom, .max) {
2090
2087
  transform: translate(0, 0);
2091
2088
  }
2092
2089
  dialog.small:is(.left, .right) {
@@ -2138,18 +2135,15 @@ hr.vertical,
2138
2135
  min-block-size: 1.5rem;
2139
2136
  inline-size: 0.0625rem;
2140
2137
  }
2141
- summary.none {
2138
+ summary,
2139
+ summary:focus {
2142
2140
  list-style-type: none;
2143
- }
2144
- summary.none::-webkit-details-marker {
2145
- display: none;
2146
- }
2147
- summary {
2148
2141
  cursor: pointer;
2149
- }
2150
- summary:focus {
2151
2142
  outline: none;
2152
2143
  }
2144
+ summary::-webkit-details-marker {
2145
+ display: none;
2146
+ }
2153
2147
  .field {
2154
2148
  ---size: 3rem;
2155
2149
  ---start: 1.2rem;
@@ -2683,7 +2677,7 @@ fieldset > legend + * {
2683
2677
  }
2684
2678
  i,
2685
2679
  :is(.checkbox, .radio, .switch) > span::before,
2686
- .icon > span > i {
2680
+ :is(.checkbox, .radio, .switch) > span > i {
2687
2681
  ---size: 1.5rem;
2688
2682
 
2689
2683
  font-family: var(--font-icon);
@@ -2815,10 +2809,72 @@ main ~ footer {
2815
2809
  :is(.large-padding, dialog:not(.left, .right, .top, .bottom)) > :is(header, footer).fixed {
2816
2810
  ---translateY: 1.5rem;
2817
2811
  }
2812
+ .list {
2813
+ display: flex;
2814
+ flex-direction: column;
2815
+ padding: 0;
2816
+ margin: 0;
2817
+ flex: 1;
2818
+ }
2819
+ .list > li,
2820
+ .list > li > details > summary,
2821
+ .list > li > a:only-child {
2822
+ all: unset;
2823
+ box-sizing: border-box;
2824
+ position: relative;
2825
+ display: flex;
2826
+ align-items: center;
2827
+ align-self: normal;
2828
+ text-align: start;
2829
+ justify-content: flex-start;
2830
+ white-space: nowrap;
2831
+ gap: 1rem;
2832
+ min-block-size: 3.5rem;
2833
+ padding: 0.5rem 1rem;
2834
+ cursor: pointer;
2835
+ flex: 1;
2836
+ }
2837
+ .list > li:has(ul, ol, details[open], a:only-child) {
2838
+ padding: 0;
2839
+ }
2840
+ .list > li > .list {
2841
+ padding: 0 0 0 1rem;
2842
+ }
2843
+ .list > li > *,
2844
+ .list > li > a:only-child > *,
2845
+ .list > li > details > summary > * {
2846
+ margin: 0;
2847
+ }
2848
+ .list > li > :is(details, .max),
2849
+ .list > li > a:only-child > .max,
2850
+ .list > li > details > summary > .max {
2851
+ flex: 1;
2852
+ }
2853
+ .list.border > li:not(:last-child)::before,
2854
+ .list.border > li > details[open] > summary::before {
2855
+ content: '';
2856
+ position: absolute;
2857
+ background-color: var(--outline-variant);
2858
+ inset: auto 0 0 0;
2859
+ block-size: 0.0625rem;
2860
+ inline-size: auto;
2861
+ }
2862
+ .list.no-space > li,
2863
+ .list.no-space > li > details > summary {
2864
+ min-block-size: 2.5rem;
2865
+ }
2866
+ .list.medium-space > li,
2867
+ .list.medium-space > li > details > summary {
2868
+ min-block-size: 4.5rem;
2869
+ }
2870
+ .list.large-space > li,
2871
+ .list.large-space > li > details > summary {
2872
+ min-block-size: 5.5rem;
2873
+ }
2818
2874
  svg {
2819
2875
  fill: currentcolor;
2820
2876
  }
2821
- :is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .responsive) {
2877
+ :is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .square, .responsive) {
2822
2878
  object-fit: cover;
2823
2879
  object-position: center;
2824
2880
  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
@@ -2932,9 +2988,6 @@ svg {
2932
2988
  .extend.border > .responsive {
2933
2989
  inline-size: 3.375rem;
2934
2990
  }
2935
- menu > li {
2936
- all: unset;
2937
- }
2938
2991
  menu {
2939
2992
  opacity: 0;
2940
2993
  visibility: hidden;
@@ -2968,8 +3021,8 @@ menu.no-wrap {
2968
3021
  menu.active,
2969
3022
  menu:not([data-ui]):active,
2970
3023
  :not(menu, [data-ui]):focus-within > menu,
2971
- menu > :is(a, li, nav):hover + menu,
2972
- menu > menu:hover {
3024
+ menu > li:hover > menu,
3025
+ menu > li > menu:hover {
2973
3026
  opacity: 1;
2974
3027
  visibility: visible;
2975
3028
  transform: scale(1) translateY(100%);
@@ -2977,24 +3030,40 @@ menu > menu:hover {
2977
3030
  menu * {
2978
3031
  white-space: inherit !important;
2979
3032
  }
2980
- menu > :is(a, nav, li > a, li > nav) {
2981
- padding: 0.5rem 1rem;
3033
+ menu > li,
3034
+ menu > li > a:only-child {
3035
+ all: unset;
3036
+ box-sizing: border-box;
3037
+ position: relative;
3038
+ display: flex;
3039
+ align-items: center;
3040
+ align-self: normal;
3041
+ text-align: start;
3042
+ justify-content: flex-start;
3043
+ white-space: nowrap;
3044
+ gap: 1rem;
3045
+ padding: 0 1rem;
2982
3046
  min-block-size: 3rem;
2983
3047
  flex: 1;
2984
3048
  margin: 0 !important;
3049
+ cursor: pointer;
2985
3050
  }
2986
- menu > :is(a, li > a):not(.row) {
2987
- display: flex;
2988
- flex-direction: column;
2989
- align-items: flex-start;
2990
- }
2991
- menu > :is(a, nav, li > a, li > nav):is(:hover, :focus, .active) {
3051
+ menu > li:is(:hover, :focus, .active) {
2992
3052
  background-color: var(--active);
2993
3053
  }
3054
+ menu > li > :is(.max, a:only-child, .field:only-child),
3055
+ menu > li > a:only-child > .max,
3056
+ menu > li:has(.field) {
3057
+ flex: 1;
3058
+ padding: 0;
3059
+ margin: 0;
3060
+ }
2994
3061
  menu.min {
2995
3062
  inset: 0 0 auto 0;
2996
3063
  transform: none !important;
2997
3064
  border-radius: inherit;
3065
+ background-color: var(--surface-variant) !important;
3066
+ color: var(--on-surface-variant) !important;
2998
3067
  }
2999
3068
  [dir=rtl] menu.min.right,
3000
3069
  menu.min.left {
@@ -3012,6 +3081,8 @@ menu.max {
3012
3081
  min-block-size: auto;
3013
3082
  z-index: 100;
3014
3083
  transform: none !important;
3084
+ background-color: var(--surface-variant) !important;
3085
+ color: var(--on-surface-variant) !important;
3015
3086
  }
3016
3087
  menu.no-wrap:is(.min, .max) {
3017
3088
  min-inline-size: 16rem;
@@ -3024,8 +3095,7 @@ menu.left {
3024
3095
  menu.right {
3025
3096
  inset: auto auto 0 0;
3026
3097
  }
3027
- menu:has(> menu),
3028
- menu > menu {
3098
+ menu:has(menu) {
3029
3099
  ---child: 1;
3030
3100
  ---type: 0;
3031
3101
 
@@ -3035,74 +3105,72 @@ menu > menu {
3035
3105
  min-inline-size: 12rem;
3036
3106
  max-block-size: none;
3037
3107
  }
3038
- menu > menu,
3039
- menu > menu.right,
3040
- [dir=rtl] menu > menu.left {
3108
+ menu > li > :is(menu, menu.right),
3109
+ [dir=rtl] menu > li > menu.left {
3041
3110
  inset: auto auto calc(3rem * (var(---child) - var(---type))) 100%;
3042
3111
  }
3043
- [dir=rtl] menu > menu,
3044
- [dir=rtl] menu > menu.right,
3045
- menu > menu.left {
3112
+ [dir=rtl] menu > li > :is(menu, menu.right),
3113
+ menu > li > menu.left {
3046
3114
  inset: auto 100% calc(3rem * (var(---child) - var(---type))) auto;
3047
3115
  }
3048
- menu > :nth-last-child(2) {
3116
+ menu > li:nth-last-child(2) {
3049
3117
  ---child: 2;
3050
3118
  }
3051
- menu > :nth-last-child(3) {
3119
+ menu > li:nth-last-child(3) {
3052
3120
  ---child: 3;
3053
3121
  }
3054
- menu > :nth-last-child(4) {
3122
+ menu > li:nth-last-child(4) {
3055
3123
  ---child: 4;
3056
3124
  }
3057
- menu > :nth-last-child(5) {
3125
+ menu > li:nth-last-child(5) {
3058
3126
  ---child: 5;
3059
3127
  }
3060
- menu > :nth-last-child(6) {
3128
+ menu > li:nth-last-child(6) {
3061
3129
  ---child: 6;
3062
3130
  }
3063
- menu > :nth-last-child(7) {
3131
+ menu > li:nth-last-child(7) {
3064
3132
  ---child: 7;
3065
3133
  }
3066
- menu > :nth-last-child(8) {
3134
+ menu > li:nth-last-child(8) {
3067
3135
  ---child: 8;
3068
3136
  }
3069
- menu > :nth-last-child(9) {
3137
+ menu > li:nth-last-child(9) {
3070
3138
  ---child: 9;
3071
3139
  }
3072
- menu > :nth-last-child(10) {
3140
+ menu > li:nth-last-child(10) {
3073
3141
  ---child: 10;
3074
3142
  }
3075
- menu > :nth-last-child(11) {
3143
+ menu > li:nth-last-child(11) {
3076
3144
  ---child: 11;
3077
3145
  }
3078
- menu > :nth-last-of-type(2) {
3146
+ menu > li:nth-last-of-type(2) {
3079
3147
  ---type: 1;
3080
3148
  }
3081
- menu > :nth-last-of-type(3) {
3149
+ menu > li:nth-last-of-type(3) {
3082
3150
  ---type: 2;
3083
3151
  }
3084
- menu > :nth-last-of-type(4) {
3152
+ menu > li:nth-last-of-type(4) {
3085
3153
  ---type: 3;
3086
3154
  }
3087
- menu > :nth-last-of-type(5) {
3155
+ menu > li:nth-last-of-type(5) {
3088
3156
  ---type: 4;
3089
3157
  }
3090
- menu > :nth-last-of-type(6) {
3158
+ menu > li:nth-last-of-type(6) {
3091
3159
  ---type: 5;
3092
3160
  }
3093
- menu > :nth-last-of-type(7) {
3161
+ menu > li:nth-last-of-type(7) {
3094
3162
  ---type: 6;
3095
3163
  }
3096
- menu > :nth-last-of-type(8) {
3164
+ menu > li:nth-last-of-type(8) {
3097
3165
  ---type: 7;
3098
3166
  }
3099
- menu > :nth-last-of-type(9) {
3167
+ menu > li:nth-last-of-type(9) {
3100
3168
  ---type: 8;
3101
3169
  }
3102
- menu > :nth-last-of-type(10) {
3170
+ menu > li:nth-last-of-type(10) {
3103
3171
  ---type: 9;
3104
3172
  }
3105
- menu > :nth-last-of-type(11) {
3173
+ menu > li:nth-last-of-type(11) {
3106
3174
  ---type: 10;
3107
3175
  }
3108
3176
  nav > :is(ol, ul),
@@ -3131,7 +3199,7 @@ nav.row {
3131
3199
  nav > :is(ol, ul) > li > :only-child {
3132
3200
  margin: 0;
3133
3201
  }
3134
- :is(nav, .row) > * {
3202
+ :is(nav, .row) > :not(ul, ol) {
3135
3203
  margin: 0;
3136
3204
  white-space: normal;
3137
3205
  flex: none;
@@ -3348,7 +3416,9 @@ nav.tabbed > a.active {
3348
3416
  justify-content: space-around;
3349
3417
  }
3350
3418
  }
3351
- .overlay {
3419
+ .overlay,
3420
+ dialog::backdrop {
3421
+ display: block !important;
3352
3422
  opacity: 0;
3353
3423
  visibility: hidden;
3354
3424
  position: fixed;
@@ -3358,10 +3428,18 @@ nav.tabbed > a.active {
3358
3428
  z-index: 100;
3359
3429
  transition: all var(--speed3), 0s background-color;
3360
3430
  }
3361
- .overlay.active {
3431
+ .overlay.active,
3432
+ dialog:popover-open::backdrop {
3362
3433
  opacity: 1;
3363
3434
  visibility: visible;
3364
3435
  }
3436
+ .overlay + dialog::backdrop,
3437
+ .snackbar::backdrop {
3438
+ display: none;
3439
+ }
3440
+ [popover] {
3441
+ border: 0;
3442
+ }
3365
3443
  .page {
3366
3444
  ---transform: translate(0, 0);
3367
3445
 
@@ -3578,10 +3656,20 @@ progress.max + * {
3578
3656
  cursor: pointer;
3579
3657
  display: inline-flex;
3580
3658
  align-items: center;
3659
+ ---size: 1.5rem;
3660
+ }
3661
+ :is(.checkbox, .radio, .switch).small {
3662
+ ---size: 1rem;
3663
+ }
3664
+ :is(.checkbox, .radio, .switch).large {
3665
+ ---size: 2rem;
3666
+ }
3667
+ :is(.checkbox, .radio, .switch).extra {
3668
+ ---size: 2.5rem;
3581
3669
  }
3582
3670
  :is(.checkbox, .radio) > input {
3583
- inline-size: 1.5rem;
3584
- block-size: 1.5rem;
3671
+ inline-size: var(---size);
3672
+ block-size: var(---size);
3585
3673
  opacity: 0;
3586
3674
  }
3587
3675
  .switch > input {
@@ -3599,17 +3687,18 @@ progress.max + * {
3599
3687
  padding-inline-start: 0.25rem;
3600
3688
  }
3601
3689
  :is(.checkbox, .radio, .switch) > span::before,
3602
- .icon > span > i,
3690
+ :is(.checkbox, .radio, .switch) > span > i,
3603
3691
  :is(.checkbox, .radio) > span::after {
3692
+ ---size: inherit;
3604
3693
  content: '';
3605
- inline-size: 1.5rem;
3606
- block-size: 1.5rem;
3694
+ inline-size: var(---size);
3695
+ block-size: var(---size);
3607
3696
  box-sizing: border-box;
3608
3697
  margin: 0 auto;
3609
3698
  outline: none;
3610
3699
  color: var(--primary);
3611
3700
  position: absolute;
3612
- inset: auto auto auto -1.5rem;
3701
+ inset: auto auto auto calc(var(---size) * -1);
3613
3702
  border-radius: 50%;
3614
3703
  user-select: none;
3615
3704
  z-index: 1;
@@ -3623,9 +3712,10 @@ progress.max + * {
3623
3712
  justify-content: center;
3624
3713
  border-radius: 50%;
3625
3714
  transition: all var(--speed2);
3626
- font-size: 1rem;
3715
+ font-size: calc(var(---size) - 0.5rem);
3627
3716
  user-select: none;
3628
- min-inline-size: auto;
3717
+ min-inline-size: var(---size);
3718
+ min-block-size: var(---size);
3629
3719
  content: "";
3630
3720
  color: var(--surface-variant);
3631
3721
  background-color: var(--outline);
@@ -3693,11 +3783,16 @@ progress.max + * {
3693
3783
  content: "check";
3694
3784
  color: var(--primary);
3695
3785
  background-color: var(--on-primary);
3696
- }
3697
- .switch > input:checked + span::before,
3698
- .switch.icon > input:checked + span > i {
3699
3786
  transform: translate(-1.75rem, -50%) scale(1);
3700
3787
  }
3788
+ .switch > input:active:not(:disabled) + span::before,
3789
+ .switch.icon > input:active:not(:disabled) + span > i {
3790
+ transform: translate(-3rem, -50%) scale(1.2);
3791
+ }
3792
+ .switch > input:active:checked:not(:disabled) + span::before,
3793
+ .switch.icon > input:active:checked:not(:disabled) + span > i {
3794
+ transform: translate(-1.75rem, -50%) scale(1.2);
3795
+ }
3701
3796
  :is(.checkbox, .radio, .switch) > input:disabled + span {
3702
3797
  opacity: 0.5;
3703
3798
  cursor: not-allowed;
@@ -3712,8 +3807,6 @@ progress.max + * {
3712
3807
  inline-size: 3.25rem;
3713
3808
  block-size: 2rem;
3714
3809
  border-radius: 2rem;
3715
- }
3716
- .switch > span::after {
3717
3810
  transform: translate(-3.25rem, -50%);
3718
3811
  }
3719
3812
  .field > :is(nav, .row) {
@@ -3992,7 +4085,6 @@ progress.max + * {
3992
4085
  color: var(--inverse-on-surface);
3993
4086
  background-color: var(--inverse-surface);
3994
4087
  padding: 1rem;
3995
- opacity: 1;
3996
4088
  cursor: pointer;
3997
4089
  text-align: start;
3998
4090
  align-items: center;
@@ -4005,7 +4097,7 @@ progress.max + * {
4005
4097
  .snackbar.top {
4006
4098
  inset: 6rem auto auto 50%;
4007
4099
  }
4008
- .snackbar.active {
4100
+ .snackbar:is(.active, :popover-open) {
4009
4101
  visibility: visible;
4010
4102
  transform: translate(-50%, 0);
4011
4103
  opacity: 1;
package/dist/cdn/beer.js CHANGED
@@ -241,7 +241,7 @@ function updateTextarea(textarea) {
241
241
  const field = parent(textarea);
242
242
  field.removeAttribute("style");
243
243
  if (hasClass(field, "min"))
244
- field.style.setProperty("---size", `${Math.max(textarea.scrollHeight, field.offsetHeight)}px`);
244
+ field.style.setProperty("---size", `${Math.min(192, Math.max(textarea.scrollHeight, field.offsetHeight))}px`);
245
245
  }
246
246
  function updateAllFields() {
247
247
  updateAllLabels();
@@ -289,6 +289,14 @@ function updateAllRanges() {
289
289
  for (let i = 0; i < ranges.length; i++)
290
290
  updateRange(ranges[i]);
291
291
  }
292
+ function rootSizeInPixels() {
293
+ const size = getComputedStyle(document.documentElement).getPropertyValue("--size") || "16px";
294
+ if (size.indexOf("%") != -1)
295
+ return parseInt(size) * 16 / 100;
296
+ if (size.indexOf("em") != -1)
297
+ return parseInt(size) * 16;
298
+ return parseInt(size);
299
+ }
292
300
  function updateRange(input) {
293
301
  on(input, "focus", onFocusRange);
294
302
  on(input, "blur", onBlurRange);
@@ -297,7 +305,7 @@ function updateRange(input) {
297
305
  const inputs = queryAll("input", label);
298
306
  if (!inputs.length || !bar)
299
307
  return;
300
- const rootSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--size")) || 16;
308
+ const rootSize = rootSizeInPixels();
301
309
  const thumb = hasClass(label, "max") ? 0 : 0.25 * rootSize * 100 / inputs[0].offsetWidth;
302
310
  const percents = [];
303
311
  const values = [];