ds-one 0.1.11-alpha.1 → 0.1.11-alpha.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 (12) hide show
  1. package/DS1/4-page/ds-grid.ts +5 -4
  2. package/DS1/4-page/ds-layout.ts +1 -20
  3. package/README.md +2 -2
  4. package/dist/4-page/ds-grid.d.ts.map +1 -1
  5. package/dist/4-page/ds-grid.js +5 -4
  6. package/dist/4-page/ds-layout.d.ts.map +1 -1
  7. package/dist/4-page/ds-layout.js +1 -20
  8. package/dist/ds-one.bundle.js +6 -24
  9. package/dist/ds-one.bundle.js.map +2 -2
  10. package/dist/ds-one.bundle.min.js +12 -30
  11. package/dist/ds-one.bundle.min.js.map +2 -2
  12. package/package.json +1 -1
package/DS1/4-page/ds-grid.ts CHANGED
@@ -22,7 +22,7 @@ export class Grid extends LitElement {
22
22
  margin-top: 0.5px !important;
23
23
  margin-left: 0.5px !important;
24
24
  display: grid;
25
- width: 100%;
25
+ width: 1440px;
26
26
  height: 100%;
27
27
  grid-template-columns: repeat(auto-fill, 19px);
28
28
  grid-template-rows: repeat(auto-fill, 19px);
@@ -32,7 +32,7 @@ export class Grid extends LitElement {
32
32
  column-rule: 1px solid
33
33
  light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
34
34
  outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
35
- position: absolute;
35
+ position: fixed;
36
36
  top: 0;
37
37
  left: 50%;
38
38
  transform: translateX(-50%);
@@ -51,8 +51,9 @@ export class Grid extends LitElement {
51
51
  }
52
52
 
53
53
  :host([align="right"]) {
54
- left: 100%;
55
- transform: translateX(-100%);
54
+ left: auto;
55
+ right: 0;
56
+ transform: none;
56
57
  }
57
58
  `;
58
59
 
package/DS1/4-page/ds-layout.ts CHANGED
@@ -39,7 +39,7 @@ export class Layout extends LitElement {
39
39
  ". footer ."
40
40
  ". . .";
41
41
  min-height: 600px;
42
- background-color: rgba(235, 231, 231, 0.44);
42
+ background-color: rgba(165, 165, 165, 0.03);
43
43
  position: relative;
44
44
  width: 100%;
45
45
  max-width: 640px;
@@ -75,10 +75,6 @@ export class Layout extends LitElement {
75
75
  justify-self: end;
76
76
  }
77
77
 
78
- :host([mode="debug"]) {
79
- background-color: rgba(200, 114, 114, 0.1);
80
- }
81
-
82
78
  .debug-overlay {
83
79
  position: absolute;
84
80
  margin-left: -1px;
@@ -127,7 +123,6 @@ export class Layout extends LitElement {
127
123
  font-size: 10px;
128
124
  font-weight: var(--type-weight-default);
129
125
  font-family: var(--typeface);
130
- background-color: var(--slate);
131
126
  color: var(--black);
132
127
  border: 1px solid red;
133
128
  opacity: 1;
@@ -135,53 +130,39 @@ export class Layout extends LitElement {
135
130
 
136
131
  .debug-square {
137
132
  grid-area: square;
138
- background-color: rgba(255, 0, 0, 0.2);
139
133
  }
140
134
 
141
135
  .debug-title {
142
136
  grid-area: title;
143
- background-color: rgba(0, 255, 0, 0.2);
144
137
  }
145
138
 
146
139
  .debug-header {
147
140
  grid-area: header;
148
- background-color: rgba(0, 0, 255, 0.2);
149
141
  border-color: #0000ff;
150
142
  }
151
143
 
152
144
  .debug-projects {
153
145
  grid-area: projects;
154
- background-color: rgba(255, 255, 0, 0.2);
155
146
  border-color: #ffff00;
156
147
  }
157
148
 
158
149
  .debug-bio {
159
150
  grid-area: bio;
160
- background-color: rgba(255, 0, 255, 0.2);
161
151
  border-color: #ff00ff;
162
152
  }
163
153
 
164
154
  .debug-nav {
165
155
  grid-area: nav;
166
- background-color: rgba(0, 255, 255, 0.2);
167
156
  border-color: #00ffff;
168
157
  }
169
158
 
170
159
  .debug-footer {
171
160
  grid-area: footer;
172
- background-color: rgba(255, 165, 0, 0.2);
173
161
  border-color: #ffa500;
174
162
  }
175
163
 
176
- .debug-header {
177
- grid-area: header;
178
- background-color: rgba(0, 0, 255, 0.2);
179
- border-color: #0000ff;
180
- }
181
-
182
164
  .debug-content {
183
165
  grid-area: content;
184
- background-color: rgba(21, 169, 21, 0.57);
185
166
  border-color: rgba(71, 231, 71, 0.63);
186
167
  }
187
168
  `;
package/README.md CHANGED
@@ -6,7 +6,7 @@ Build modern UIs with web components!
6
6
 
7
7
  [![npm version](https://badge.fury.io/js/ds-one.svg)](https://badge.fury.io/js/ds-one)
8
8
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
9
- [![Version](https://img.shields.io/badge/version-0.1.11--alpha.0-orange.svg)](https://github.com/Jo4712/ds-one)
9
+ [![Version](https://img.shields.io/badge/version-0.1.11--alpha.1-orange.svg)](https://github.com/Jo4712/ds-one)
10
10
 
11
11
  **DS one** is a modern design system that provides a comprehensive set of reusable UI components built with Web Components. Think "Material Design meets Web Standards"—a simple, accessible component library that works with any framework or vanilla JavaScript.
12
12
 
@@ -27,7 +27,7 @@ npm install ds-one@alpha
27
27
  yarn add ds-one@alpha
28
28
  ```
29
29
 
30
- **Note**: Currently published as alpha version `0.1.11-alpha.0`. Use `@alpha` tag to install.
30
+ **Note**: Currently published as alpha version `0.1.11-alpha.2`. Use `@alpha` tag to install.
31
31
 
32
32
  ### Basic Usage
33
33
 
package/dist/4-page/ds-grid.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,MAAM,0BAqCX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
1
+ {"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,MAAM,0BAsCX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
package/dist/4-page/ds-grid.js CHANGED
@@ -14,7 +14,7 @@ Grid.styles = css `
14
14
  margin-top: 0.5px !important;
15
15
  margin-left: 0.5px !important;
16
16
  display: grid;
17
- width: 100%;
17
+ width: 1440px;
18
18
  height: 100%;
19
19
  grid-template-columns: repeat(auto-fill, 19px);
20
20
  grid-template-rows: repeat(auto-fill, 19px);
@@ -24,7 +24,7 @@ Grid.styles = css `
24
24
  column-rule: 1px solid
25
25
  light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
26
26
  outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
27
- position: absolute;
27
+ position: fixed;
28
28
  top: 0;
29
29
  left: 50%;
30
30
  transform: translateX(-50%);
@@ -43,8 +43,9 @@ Grid.styles = css `
43
43
  }
44
44
 
45
45
  :host([align="right"]) {
46
- left: 100%;
47
- transform: translateX(-100%);
46
+ left: auto;
47
+ right: 0;
48
+ transform: none;
48
49
  }
49
50
  `;
50
51
  customElements.define("ds-grid", Grid);
package/dist/4-page/ds-layout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,MAAM,0BAmKX;IAEF,MAAM;CA6BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
1
+ {"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,MAAM,0BAgJX;IAEF,MAAM;CA6BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
package/dist/4-page/ds-layout.js CHANGED
@@ -54,7 +54,7 @@ Layout.styles = css `
54
54
  ". footer ."
55
55
  ". . .";
56
56
  min-height: 600px;
57
- background-color: rgba(235, 231, 231, 0.44);
57
+ background-color: rgba(165, 165, 165, 0.03);
58
58
  position: relative;
59
59
  width: 100%;
60
60
  max-width: 640px;
@@ -90,10 +90,6 @@ Layout.styles = css `
90
90
  justify-self: end;
91
91
  }
92
92
 
93
- :host([mode="debug"]) {
94
- background-color: rgba(200, 114, 114, 0.1);
95
- }
96
-
97
93
  .debug-overlay {
98
94
  position: absolute;
99
95
  margin-left: -1px;
@@ -142,7 +138,6 @@ Layout.styles = css `
142
138
  font-size: 10px;
143
139
  font-weight: var(--type-weight-default);
144
140
  font-family: var(--typeface);
145
- background-color: var(--slate);
146
141
  color: var(--black);
147
142
  border: 1px solid red;
148
143
  opacity: 1;
@@ -150,53 +145,39 @@ Layout.styles = css `
150
145
 
151
146
  .debug-square {
152
147
  grid-area: square;
153
- background-color: rgba(255, 0, 0, 0.2);
154
148
  }
155
149
 
156
150
  .debug-title {
157
151
  grid-area: title;
158
- background-color: rgba(0, 255, 0, 0.2);
159
152
  }
160
153
 
161
154
  .debug-header {
162
155
  grid-area: header;
163
- background-color: rgba(0, 0, 255, 0.2);
164
156
  border-color: #0000ff;
165
157
  }
166
158
 
167
159
  .debug-projects {
168
160
  grid-area: projects;
169
- background-color: rgba(255, 255, 0, 0.2);
170
161
  border-color: #ffff00;
171
162
  }
172
163
 
173
164
  .debug-bio {
174
165
  grid-area: bio;
175
- background-color: rgba(255, 0, 255, 0.2);
176
166
  border-color: #ff00ff;
177
167
  }
178
168
 
179
169
  .debug-nav {
180
170
  grid-area: nav;
181
- background-color: rgba(0, 255, 255, 0.2);
182
171
  border-color: #00ffff;
183
172
  }
184
173
 
185
174
  .debug-footer {
186
175
  grid-area: footer;
187
- background-color: rgba(255, 165, 0, 0.2);
188
176
  border-color: #ffa500;
189
177
  }
190
178
 
191
- .debug-header {
192
- grid-area: header;
193
- background-color: rgba(0, 0, 255, 0.2);
194
- border-color: #0000ff;
195
- }
196
-
197
179
  .debug-content {
198
180
  grid-area: content;
199
- background-color: rgba(21, 169, 21, 0.57);
200
181
  border-color: rgba(71, 231, 71, 0.63);
201
182
  }
202
183
  `;
package/dist/ds-one.bundle.js CHANGED
@@ -4621,7 +4621,7 @@ Grid.styles = i`
4621
4621
  margin-top: 0.5px !important;
4622
4622
  margin-left: 0.5px !important;
4623
4623
  display: grid;
4624
- width: 100%;
4624
+ width: 1440px;
4625
4625
  height: 100%;
4626
4626
  grid-template-columns: repeat(auto-fill, 19px);
4627
4627
  grid-template-rows: repeat(auto-fill, 19px);
@@ -4631,7 +4631,7 @@ Grid.styles = i`
4631
4631
  column-rule: 1px solid
4632
4632
  light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
4633
4633
  outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
4634
- position: absolute;
4634
+ position: fixed;
4635
4635
  top: 0;
4636
4636
  left: 50%;
4637
4637
  transform: translateX(-50%);
@@ -4650,8 +4650,9 @@ Grid.styles = i`
4650
4650
  }
4651
4651
 
4652
4652
  :host([align="right"]) {
4653
- left: 100%;
4654
- transform: translateX(-100%);
4653
+ left: auto;
4654
+ right: 0;
4655
+ transform: none;
4655
4656
  }
4656
4657
  `;
4657
4658
  customElements.define("ds-grid", Grid);
@@ -4706,7 +4707,7 @@ Layout.styles = i`
4706
4707
  ". footer ."
4707
4708
  ". . .";
4708
4709
  min-height: 600px;
4709
- background-color: rgba(235, 231, 231, 0.44);
4710
+ background-color: rgba(165, 165, 165, 0.03);
4710
4711
  position: relative;
4711
4712
  width: 100%;
4712
4713
  max-width: 640px;
@@ -4742,10 +4743,6 @@ Layout.styles = i`
4742
4743
  justify-self: end;
4743
4744
  }
4744
4745
 
4745
- :host([mode="debug"]) {
4746
- background-color: rgba(200, 114, 114, 0.1);
4747
- }
4748
-
4749
4746
  .debug-overlay {
4750
4747
  position: absolute;
4751
4748
  margin-left: -1px;
@@ -4794,7 +4791,6 @@ Layout.styles = i`
4794
4791
  font-size: 10px;
4795
4792
  font-weight: var(--type-weight-default);
4796
4793
  font-family: var(--typeface);
4797
- background-color: var(--slate);
4798
4794
  color: var(--black);
4799
4795
  border: 1px solid red;
4800
4796
  opacity: 1;
@@ -4802,53 +4798,39 @@ Layout.styles = i`
4802
4798
 
4803
4799
  .debug-square {
4804
4800
  grid-area: square;
4805
- background-color: rgba(255, 0, 0, 0.2);
4806
4801
  }
4807
4802
 
4808
4803
  .debug-title {
4809
4804
  grid-area: title;
4810
- background-color: rgba(0, 255, 0, 0.2);
4811
4805
  }
4812
4806
 
4813
4807
  .debug-header {
4814
4808
  grid-area: header;
4815
- background-color: rgba(0, 0, 255, 0.2);
4816
4809
  border-color: #0000ff;
4817
4810
  }
4818
4811
 
4819
4812
  .debug-projects {
4820
4813
  grid-area: projects;
4821
- background-color: rgba(255, 255, 0, 0.2);
4822
4814
  border-color: #ffff00;
4823
4815
  }
4824
4816
 
4825
4817
  .debug-bio {
4826
4818
  grid-area: bio;
4827
- background-color: rgba(255, 0, 255, 0.2);
4828
4819
  border-color: #ff00ff;
4829
4820
  }
4830
4821
 
4831
4822
  .debug-nav {
4832
4823
  grid-area: nav;
4833
- background-color: rgba(0, 255, 255, 0.2);
4834
4824
  border-color: #00ffff;
4835
4825
  }
4836
4826
 
4837
4827
  .debug-footer {
4838
4828
  grid-area: footer;
4839
- background-color: rgba(255, 165, 0, 0.2);
4840
4829
  border-color: #ffa500;
4841
4830
  }
4842
4831
 
4843
- .debug-header {
4844
- grid-area: header;
4845
- background-color: rgba(0, 0, 255, 0.2);
4846
- border-color: #0000ff;
4847
- }
4848
-
4849
4832
  .debug-content {
4850
4833
  grid-area: content;
4851
- background-color: rgba(21, 169, 21, 0.57);
4852
4834
  border-color: rgba(71, 231, 71, 0.63);
4853
4835
  }
4854
4836
  `;