vrembem 4.0.0-next.44 → 4.0.0-next.46

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.
package/README.md CHANGED
@@ -3,78 +3,3 @@
3
3
  A complete collection of all Vrembem components into a single comprehensive package for convenience.
4
4
 
5
5
  [Documentation](https://vrembem.com/packages/vrembem)
6
-
7
- ## Installation
8
-
9
- Via CDN
10
-
11
- ```html
12
- <!-- Include styles -->
13
- <link rel="stylesheet" href="https://unpkg.com/vrembem/dist/index.css">
14
-
15
- <!-- Include scripts -->
16
- <script src="https://unpkg.com/vrembem"></script>
17
-
18
- <script>
19
- // All Vrembem JS modules are loaded into the vrembem namespace
20
- console.log(vrembem);
21
- </script>
22
- ```
23
-
24
- Via NPM
25
-
26
- ```sh
27
- npm install vrembem
28
- ```
29
-
30
- ## Styles
31
-
32
- To include all Vrembem components into your styles, just import the vrembem package in your Sass manifest file.
33
-
34
- ```scss
35
- @use "vrembem";
36
- ```
37
-
38
- All component variables, functions and mixins are forwarded under their respective namespace and can be customized:
39
-
40
- ```scss
41
- @use "vrembem" with (
42
- $button-padding: 1rem 2rem
43
- );
44
- ```
45
-
46
- Customize core variables which all components inherit from. The example below will prefix all components with `vb-` to help namespace styles:
47
-
48
- ```scss
49
- @use "vrembem" with (
50
- $core-prefix-block: "vb-"
51
- );
52
- ```
53
-
54
- ## JavaScript
55
-
56
- Import and mount the components you'll need:
57
-
58
- ```js
59
- // Import individual components
60
- import { Drawer } from 'vrembem';
61
- const drawers = new DrawerCollection();
62
- await drawers.mount();
63
- ```
64
-
65
- ## Markup
66
-
67
- Include the component's markup into your project. Use the [online documentation](https://vrembem.com) for more information, customization options, code examples and available modifiers.
68
-
69
- ```html
70
- <div class="drawer__wrapper">
71
- <aside data-drawer="[unique-id]" class="drawer">
72
- <div class="drawer__item">
73
- <button data-drawer-close>...</button>
74
- </div>
75
- </aside>
76
- <div class="drawer__main">
77
- <button data-drawer-toggle="[unique-id]">...</button>
78
- </div>
79
- </div>
80
- ```
package/components.scss CHANGED
@@ -3,15 +3,16 @@
3
3
  @forward "@vrembem/button" as button-*;
4
4
  @forward "@vrembem/checkbox" as checkbox-*;
5
5
  @forward "@vrembem/input" as input-*;
6
+ @forward "@vrembem/select" as select-*;
6
7
  @forward "@vrembem/radio" as radio-*;
7
8
  @forward "@vrembem/switch" as switch-*;
8
9
  @forward "@vrembem/card" as card-*;
9
- @forward "@vrembem/dialog" as dialog-*;
10
10
  @forward "@vrembem/drawer" as drawer-*;
11
11
  @forward "@vrembem/icon" as icon-*;
12
12
  @forward "@vrembem/menu" as menu-*;
13
13
  @forward "@vrembem/modal" as modal-*;
14
14
  @forward "@vrembem/notice" as notice-*;
15
+ @forward "@vrembem/panel" as panel-*;
15
16
  @forward "@vrembem/popover" as popover-*;
16
17
  @forward "@vrembem/section" as section-*;
17
18
  @forward "@vrembem/table" as table-*;
package/dev/base.css CHANGED
@@ -49,9 +49,6 @@
49
49
  border: 0;
50
50
  background: none;
51
51
  }
52
- textarea {
53
- resize: vertical;
54
- }
55
52
  label:has(:disabled) {
56
53
  pointer-events: none;
57
54
  }
@@ -95,7 +92,7 @@
95
92
  .content > * + * {
96
93
  margin-top: var(--vb-content-spacing);
97
94
  }
98
- .h1, .content > h1, .h2, .content > h2, .h3, .content > h3, .h4, .content > h4, .h5, .content > h5, .h6, .content > h6 {
95
+ .h1, .content > h1, .h2, .content > h2, .h3, .content > h3, .h4, .content > h4, .h5, .content > h5 {
99
96
  font-family: var(--vb-headings-font-family, inherit);
100
97
  font-size: var(--vb-headings-font-size, 1em);
101
98
  font-weight: var(--vb-headings-font-weight, var(--vb-font-weight-semi-bold));
@@ -103,22 +100,23 @@
103
100
  color: var(--vb-headings-foreground, var(--vb-foreground-strong));
104
101
  }
105
102
  .h1, .content > h1 {
106
- --vb-headings-font-size: 2.75em;
103
+ --vb-headings-font-size: 2.75rem;
104
+ --vb-headings-line-height: 1.25;
107
105
  }
108
106
  .h2, .content > h2 {
109
- --vb-headings-font-size: 2em;
107
+ --vb-headings-font-size: 2rem;
108
+ --vb-headings-line-height: 1.25;
110
109
  }
111
110
  .h3, .content > h3 {
112
- --vb-headings-font-size: 1.75em;
111
+ --vb-headings-font-size: 1.75rem;
112
+ --vb-headings-line-height: 1.25;
113
113
  }
114
114
  .h4, .content > h4 {
115
- --vb-headings-font-size: 1.5em;
115
+ --vb-headings-font-size: 1.5rem;
116
+ --vb-headings-line-height: 1.375;
116
117
  }
117
118
  .h5, .content > h5 {
118
- --vb-headings-font-size: 1.25em;
119
- }
120
- .h6, .content > h6 {
121
- --vb-headings-font-size: 1em;
119
+ --vb-headings-font-size: 1.25rem;
122
120
  }
123
121
  .link, .content :not(div) > a {
124
122
  color: var(--vb-link-foreground, var(--vb-foreground-accent));
@@ -130,14 +128,14 @@
130
128
  color: var(--vb-link-foreground, var(--vb-foreground-accent));
131
129
  background-color: var(--vb-background-alt);
132
130
  }
133
- .link:hover, .link:focus, .content :not(div) > a:hover, .content :not(div) > a:focus {
131
+ .link:hover, .link:focus-visible, .content :not(div) > a:hover, .content :not(div) > a:focus-visible {
134
132
  color: var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)));
135
133
  text-decoration: var(--vb-link-decoration-hover, none);
136
134
  }
137
- .link:hover code, .link:focus code, .content :not(div) > a:hover code, .content :not(div) > a:focus code {
135
+ .link:hover code, .link:focus-visible code, .content :not(div) > a:hover code, .content :not(div) > a:focus-visible code {
138
136
  color: var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)));
139
137
  }
140
- .link:focus, .content :not(div) > a:focus {
138
+ .link:focus-visible, .content :not(div) > a:focus-visible {
141
139
  outline: var(--vb-link-focus-ring, currentcolor dotted 1px);
142
140
  outline-offset: var(--vb-link-focus-ring-offset, 0.125rem);
143
141
  }
@@ -167,7 +165,7 @@
167
165
  font-size: var(--vb-code-font-size, var(--vb-font-size-sm));
168
166
  color: var(--vb-code-foreground, var(--vb-foreground-accent-alt));
169
167
  overflow-wrap: break-word;
170
- background: var(--vb-code-background, var(--vb-background-alt));
168
+ background: var(--vb-code-background, color-mix(in oklch, currentcolor 10%, transparent));
171
169
  }
172
170
  .pre, .content > pre {
173
171
  overflow: auto;
package/dev/base.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../node_modules/@vrembem/core/base.scss","../../../node_modules/@vrembem/core/src/scss/library/_base.scss","../../../node_modules/@vrembem/content/index.scss","../../../node_modules/@vrembem/content/src/modules/_content.scss","../../../node_modules/@vrembem/content/src/modules/_headings.scss","../../../node_modules/@vrembem/core/src/scss/modules/_tokens.scss","../../../node_modules/@vrembem/content/src/modules/_link.scss","../../../node_modules/@vrembem/content/src/modules/_list.scss","../../../node_modules/@vrembem/content/src/modules/_code.scss","../../../node_modules/@vrembem/content/src/modules/_pre.scss","../../../node_modules/@vrembem/content/src/modules/_blockquote.scss","../../../node_modules/@vrembem/content/src/modules/_separator.scss","../../../node_modules/@vrembem/content/src/modules/_arrow.scss","../../../node_modules/@vrembem/core/src/scss/library/_arrow.scss","../../../node_modules/@vrembem/content/src/modules/_loading-spinner.scss","../../../node_modules/@vrembem/core/src/scss/library/_size.scss","../../../node_modules/@vrembem/core/src/scss/library/_loading-spinner.scss","../../../node_modules/@vrembem/content/src/modules/_sr-only.scss","../../../node_modules/@vrembem/core/src/scss/library/_sr-only.scss"],"names":[],"mappings":"AAEA;ECWE;AAAA;AAAA;IAGE;IACA;IACA;;EAQF;AAAA;IAEE;IACA;IACA;;EAIF;IACE;;EAKF;IACE;IACA;IACA;;EAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQE;;EAIF;AAAA;AAAA;IAGE;IACA;IACA;;EAIF;AAAA;AAAA;AAAA;IAIE;IACA;;EAIF;IACE;IACA;IACA;;EAIF;IACE;;EAIF;IACE;;EAIF;IACE;IACA;;EAIF;AAAA;AAAA;AAAA;AAAA;AAAA;IAME;IACA;;EAIF;AAAA;IAEE;;EAIF;IACE;;EAIF;AAAA;IAEE;IACA;;EAKF;IACE;IACA;;;ACjIJ;ECGE;IACE;IACA;IACA;IACA;;EAEA;IACE;;ECLJ;IACE;IACA;IACA;IACA;IACA;;EAYA;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;EC7KJ;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAIF;IAEE;IAIA;;EAEA;IACE;;EAOJ;IACE;IACA;;EC/BJ;IACE;;EAEA;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;AAAA;AAAA;IAEE;;EAIJ;IACE;;ECfF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ECRF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;ECdJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;ECTJ;IACE;IACA;IACA;IACA;;ECNF;AAAA;AAAA;AAAA;AAAA;ICMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDTA;IACE;;EAGF;IACE;;EAGF;IACE;;EEjBF;ICUE,OCCY;IDAZ;ICOF,UFjBgC;IEkBhC;IACA;IACA;IACA;IACA;;EAME;IACE;MACE;;IAGF;MACE;;;ECnCN;ICFA;IACA;IACA;IACA;IACA;IACA;IACA","file":"base.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../node_modules/@vrembem/core/base.scss","../../../node_modules/@vrembem/core/src/scss/library/_base.scss","../../../node_modules/@vrembem/content/index.scss","../../../node_modules/@vrembem/content/src/modules/_content.scss","../../../node_modules/@vrembem/content/src/modules/_headings.scss","../../../node_modules/@vrembem/core/src/scss/modules/_tokens.scss","../../../node_modules/@vrembem/content/src/modules/_link.scss","../../../node_modules/@vrembem/content/src/modules/_list.scss","../../../node_modules/@vrembem/content/src/modules/_code.scss","../../../node_modules/@vrembem/content/src/modules/_pre.scss","../../../node_modules/@vrembem/content/src/modules/_blockquote.scss","../../../node_modules/@vrembem/content/src/modules/_separator.scss","../../../node_modules/@vrembem/content/src/modules/_arrow.scss","../../../node_modules/@vrembem/core/src/scss/library/_arrow.scss","../../../node_modules/@vrembem/content/src/modules/_loading-spinner.scss","../../../node_modules/@vrembem/core/src/scss/library/_size.scss","../../../node_modules/@vrembem/core/src/scss/library/_loading-spinner.scss","../../../node_modules/@vrembem/content/src/modules/_sr-only.scss","../../../node_modules/@vrembem/core/src/scss/library/_sr-only.scss"],"names":[],"mappings":"AAEA;ECWE;AAAA;AAAA;IAGE;IACA;IACA;;EAQF;AAAA;IAEE;IACA;IACA;;EAIF;IACE;;EAKF;IACE;IACA;IACA;;EAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQE;;EAIF;AAAA;AAAA;IAGE;IACA;IACA;;EAIF;AAAA;AAAA;AAAA;IAIE;IACA;;EAIF;IACE;IACA;IACA;;EAIF;IACE;;EAIF;IACE;IACA;;EAIF;AAAA;AAAA;AAAA;AAAA;AAAA;IAME;IACA;;EAIF;AAAA;IAEE;;EAIF;IACE;;EAIF;AAAA;IAEE;IACA;;EAKF;IACE;IACA;;;AC5HJ;ECGE;IACE;IACA;IACA;IACA;;EAEA;IACE;;ECLJ;IACE;IACA;IACA;IACA;IACA;;EAYA;ICiSE;IAAA;;EDjSF;ICiSE;IAAA;;EDjSF;ICiSE;IAAA;;EDjSF;ICiSE;IAAA;;EDjSF;ICiSE;;ECrTJ;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAIF;IAEE;IAIA;;EAEA;IACE;;EAOJ;IACE;IACA;;EC9BJ;IACE;;EAEA;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;AAAA;AAAA;IAEE;;EAIJ;IACE;;ECfF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ECRF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;ECdJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;ECTJ;IACE;IACA;IACA;IACA;;ECNF;AAAA;AAAA;AAAA;AAAA;ICMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDTA;IACE;;EAGF;IACE;;EAGF;IACE;;EEjBF;ICUE,OCCY;IDAZ;ICOF,UFjBgC;IEkBhC;IACA;IACA;IACA;IACA;;EAME;IACE;MACE;;IAGF;MACE;;;ECnCN;ICFA;IACA;IACA;IACA;IACA;IACA;IACA","file":"base.css"}