beercss 3.11.1 → 3.11.2

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 (15) hide show
  1. package/README.md +8 -8
  2. package/dist/cdn/beer.css +34 -32
  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 +34 -32
  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/buttons.css +19 -11
  11. package/src/cdn/elements/cards.css +5 -0
  12. package/src/cdn/elements/chips.css +5 -14
  13. package/src/cdn/elements/media.css +2 -6
  14. package/src/cdn/helpers/forms.css +1 -1
  15. 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.1" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.1" alt="minzipped size"></a>
7
+ <a href="https://bundlephobia.com/package/beercss@3.11.2" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.11.2" 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>
@@ -130,8 +130,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
130
130
  ### DEFAULT VERSION
131
131
 
132
132
  ```html
133
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.css" rel="stylesheet" />
134
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.js"></script>
133
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/beer.min.css" rel="stylesheet" />
134
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/beer.min.js"></script>
135
135
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
136
136
  ```
137
137
 
@@ -149,8 +149,8 @@ import "material-dynamic-colors";
149
149
  Applied on child elements of `<* class="beer">...</*>`.
150
150
 
151
151
  ```html
152
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
153
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.js"></script>
152
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
153
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/beer.min.js"></script>
154
154
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
155
155
  ```
156
156
 
@@ -168,7 +168,7 @@ import "material-dynamic-colors";
168
168
  Applied on child elements of `<beer-css>...</beer-css>`.
169
169
 
170
170
  ```html
171
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.custom-element.min.js"></script>
171
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/beer.custom-element.min.js"></script>
172
172
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
173
173
  ```
174
174
 
@@ -194,8 +194,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
194
194
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
195
195
  <meta name="google" content="notranslate">
196
196
  <title>Hello world</title>
197
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.css" rel="stylesheet">
198
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/beer.min.js"></script>
197
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/beer.min.css" rel="stylesheet">
198
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/beer.min.js"></script>
199
199
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
200
200
  </head>
201
201
  <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.1/dist/cdn/material-symbols-outlined.woff2") format("woff2");
104
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.1/dist/cdn/material-symbols-rounded.woff2") format("woff2");
114
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.1/dist/cdn/material-symbols-sharp.woff2") format("woff2");
124
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.1/dist/cdn/material-symbols-subset.woff2") format("woff2");
134
+ url("https://cdn.jsdelivr.net/npm/beercss@3.11.2/dist/cdn/material-symbols-subset.woff2") format("woff2");
135
135
  }
136
136
  * {
137
137
  -webkit-tap-highlight-color: transparent;
@@ -1207,7 +1207,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
1207
1207
  :is(.circle, .square).round {
1208
1208
  border-radius: 1rem !important;
1209
1209
  }
1210
- .border:not(table, .field, .list, menu) {
1210
+ .border:not(table, .field, .list, menu, article) {
1211
1211
  box-sizing: border-box;
1212
1212
  border: 0.0625rem solid var(--outline);
1213
1213
  background-color: transparent;
@@ -1813,37 +1813,43 @@ dialog > nav.drawer > header + * {
1813
1813
  }
1814
1814
  .button,
1815
1815
  button {
1816
+ --_padding: 1rem;
1816
1817
  --_size: 2.5rem;
1817
1818
  box-sizing: content-box;
1818
1819
  display: inline-flex;
1819
1820
  align-items: center;
1820
1821
  justify-content: center;
1821
1822
  block-size: var(--_size);
1822
- min-inline-size: var(--_size);
1823
1823
  font-size: 0.875rem;
1824
1824
  font-weight: 500;
1825
1825
  color: var(--on-primary);
1826
- padding: 0 1rem;
1826
+ padding: 0 var(--_padding);
1827
1827
  background-color: var(--primary);
1828
1828
  margin: 0 0.5rem;
1829
1829
  border-radius: var(--_size);
1830
1830
  transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
1831
1831
  user-select: none;
1832
- gap: 1rem;
1832
+ gap: 0.5rem;
1833
1833
  line-height: normal;
1834
1834
  }
1835
1835
  :is(button, .button).small {
1836
1836
  --_size: 2rem;
1837
+ --_padding: 0.75rem;
1837
1838
  }
1838
1839
  :is(button, .button).large {
1839
1840
  --_size: 3rem;
1841
+ --_padding: 1.25rem;
1840
1842
  }
1841
1843
  :is(.button, button):is(.extra, .extend) {
1842
1844
  --_size: 3.5rem;
1843
1845
  font-size: 1rem;
1846
+ --_padding: 1.5rem;
1847
+ }
1848
+ :is(button, .button):is(.square, .circle) {
1849
+ --_padding: 0;
1844
1850
  }
1845
1851
  :is(button, .button).border {
1846
- border-color: var(--outline);
1852
+ border-color: var(--outline-variant);
1847
1853
  color: var(--primary);
1848
1854
  }
1849
1855
  :is(button, .button):not(.border, .chip):hover {
@@ -1854,15 +1860,16 @@ button {
1854
1860
  }
1855
1861
  .extend:is(:hover, .active) {
1856
1862
  inline-size: auto;
1857
- padding: 0 1.5rem;
1863
+ --_padding: 1.5rem;
1864
+ padding: 0 var(--_padding);
1858
1865
  }
1859
1866
  .extend:is(:hover, .active) > i + span {
1860
1867
  display: inherit;
1861
- margin-inline-start: 1.5rem;
1868
+ margin-inline-start: var(--_padding);
1862
1869
  }
1863
1870
  .extend:is(:hover, .active) > :is(img, svg) + span {
1864
1871
  display: inherit;
1865
- margin-inline-start: 2.5rem;
1872
+ margin-inline-start: calc(1rem + var(--_padding));
1866
1873
  }
1867
1874
  :is(.button, button)[disabled] {
1868
1875
  opacity: 0.5;
@@ -1875,19 +1882,19 @@ button {
1875
1882
  :is(.button, button)[disabled]::after {
1876
1883
  display: none;
1877
1884
  }
1878
- :is(.button, button):not(.chip).fill {
1885
+ :is(.button, button):not(.chip, .extend).fill {
1879
1886
  background-color: var(--secondary-container) !important;
1880
1887
  color: var(--on-secondary-container) !important;
1881
1888
  }
1882
- :is(.button, button):not(.chip).active {
1889
+ :is(.button, button):not(.chip, .extend).active {
1883
1890
  background-color: var(--primary-container);
1884
1891
  color: var(--on-primary-container);
1885
1892
  }
1886
- :is(.button, button):not(.chip).fill.active {
1893
+ :is(.button, button):not(.chip, .extend).fill.active {
1887
1894
  background-color: var(--secondary) !important;
1888
1895
  color: var(--on-secondary) !important;
1889
1896
  }
1890
- :is(.button, button):not(.chip).border.active {
1897
+ :is(.button, button):not(.chip, .extend).border.active {
1891
1898
  background-color: var(--inverse-surface) !important;
1892
1899
  color: var(--inverse-on-surface) !important;
1893
1900
  border-color: var(--inverse-surface) !important;
@@ -1915,7 +1922,12 @@ article.medium {
1915
1922
  article.large {
1916
1923
  block-size: 32rem;
1917
1924
  }
1925
+ article.border {
1926
+ box-shadow: none;
1927
+ border: 0.0625rem solid var(--outline-variant);
1928
+ }
1918
1929
  .chip {
1930
+ --_padding: 0.75rem;
1919
1931
  --_size: 2rem;
1920
1932
  box-sizing: border-box;
1921
1933
  display: inline-flex;
@@ -1928,34 +1940,27 @@ article.large {
1928
1940
  background-color: transparent;
1929
1941
  border: 0.0625rem solid var(--outline-variant);
1930
1942
  color: var(--on-surface-variant);
1931
- padding: 0 1rem;
1943
+ padding: 0 var(--_padding);
1932
1944
  margin: 0 0.5rem;
1933
1945
  text-transform: none;
1934
1946
  border-radius: 0.5rem;
1935
1947
  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
1936
1948
  user-select: none;
1937
- gap: 1rem;
1949
+ gap: 0.5rem;
1938
1950
  line-height: normal;
1939
1951
  letter-spacing: normal;
1940
1952
  }
1941
1953
  .chip.medium {
1942
1954
  --_size: 2.5rem;
1955
+ --_padding: 1rem;
1943
1956
  }
1944
1957
  .chip.large {
1958
+ --_padding: 1.25rem;
1945
1959
  --_size: 3rem;
1946
1960
  }
1947
1961
  .chip.fill {
1948
1962
  border: none;
1949
1963
  }
1950
- .chip.round.small {
1951
- border-radius: 1rem;
1952
- }
1953
- .chip.round {
1954
- border-radius: 1.25rem;
1955
- }
1956
- .chip.round.large {
1957
- border-radius: 1.5rem;
1958
- }
1959
1964
  dialog {
1960
1965
  --_padding: 1.5rem;
1961
1966
  display: block;
@@ -2989,14 +2994,11 @@ svg {
2989
2994
  min-block-size: 1.5rem;
2990
2995
  max-block-size: 1.5rem;
2991
2996
  }
2992
- :is(button, .button, .chip) > :is(i, img, svg) {
2993
- margin: 0 -0.5rem;
2994
- }
2995
2997
  :is(button, .button, .chip) > .responsive:first-child {
2996
- margin-inline-start: -1rem;
2998
+ margin-inline-start: calc(-1 * var(--_padding));
2997
2999
  }
2998
3000
  :is(button, .button, .chip) > .responsive:not(:first-child) {
2999
- margin-inline-end: -1em;
3001
+ margin-inline-end: calc(-1 * var(--_padding));
3000
3002
  }
3001
3003
  :is(.circle, .square, .extend) > .responsive {
3002
3004
  --_size: inherit;
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.1/dist/cdn/beer.min.js");
15
+ return await import("https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.1/dist/cdn/beer.scoped.min.css");
26
+ element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.11.2/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.1/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.1/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.2/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.2/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;