ds-one 0.1.11-alpha.11 → 0.1.11-alpha.12

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.
@@ -135,4 +135,13 @@ if (typeof window !== "undefined") {
135
135
  // DOM is already ready
136
136
  initDeviceDetection();
137
137
  }
138
+
139
+ // Recalculate on resize (debounced)
140
+ let resizeTimeout: any;
141
+ window.addEventListener("resize", () => {
142
+ clearTimeout(resizeTimeout);
143
+ resizeTimeout = setTimeout(() => {
144
+ initDeviceDetection();
145
+ }, 100);
146
+ });
138
147
  }
@@ -63,8 +63,10 @@ export class Grid extends LitElement {
63
63
  grid-template-columns: repeat(auto-fill, 19px);
64
64
  grid-template-rows: repeat(auto-fill, 19px);
65
65
  gap: 1px;
66
- row-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
67
- column-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
66
+ row-rule: calc(1px * var(--scaling-factor)) solid
67
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
68
+ column-rule: calc(1px * var(--scaling-factor)) solid
69
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
68
70
  outline:
69
71
  1px solid light-dark(rgb(147, 147, 147)),
70
72
  rgb(147, 147, 147);
package/README.md CHANGED
@@ -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.11`. Use `@alpha` tag to install.
30
+ **Note**: Currently published as alpha version `0.1.11-alpha.12`. Use `@alpha` tag to install.
31
31
 
32
32
  ### Basic Usage
33
33
 
@@ -93,4 +93,12 @@ if (typeof window !== "undefined") {
93
93
  // DOM is already ready
94
94
  initDeviceDetection();
95
95
  }
96
+ // Recalculate on resize (debounced)
97
+ let resizeTimeout;
98
+ window.addEventListener("resize", () => {
99
+ clearTimeout(resizeTimeout);
100
+ resizeTimeout = setTimeout(() => {
101
+ initDeviceDetection();
102
+ }, 100);
103
+ });
96
104
  }
@@ -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;AAG5C,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;;;;;;;;MAGf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAS;IAE3B,iBAAiB;IAiCjB,MAAM,CAAC,MAAM,0BAyDX;IAEF,OAAO;IASP,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;AAG5C,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;;;;;;;;MAGf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAS;IAE3B,iBAAiB;IAiCjB,MAAM,CAAC,MAAM,0BA2DX;IAEF,OAAO;IASP,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
@@ -59,8 +59,10 @@ Grid.styles = css `
59
59
  grid-template-columns: repeat(auto-fill, 19px);
60
60
  grid-template-rows: repeat(auto-fill, 19px);
61
61
  gap: 1px;
62
- row-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
63
- column-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
62
+ row-rule: calc(1px * var(--scaling-factor)) solid
63
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
64
+ column-rule: calc(1px * var(--scaling-factor)) solid
65
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
64
66
  outline:
65
67
  1px solid light-dark(rgb(147, 147, 147)),
66
68
  rgb(147, 147, 147);
@@ -67,6 +67,13 @@ if (typeof window !== "undefined") {
67
67
  } else {
68
68
  initDeviceDetection();
69
69
  }
70
+ let resizeTimeout;
71
+ window.addEventListener("resize", () => {
72
+ clearTimeout(resizeTimeout);
73
+ resizeTimeout = setTimeout(() => {
74
+ initDeviceDetection();
75
+ }, 100);
76
+ });
70
77
  }
71
78
 
72
79
  // dist/utils/cdn-loader.js
@@ -4773,8 +4780,10 @@ Grid.styles = i`
4773
4780
  grid-template-columns: repeat(auto-fill, 19px);
4774
4781
  grid-template-rows: repeat(auto-fill, 19px);
4775
4782
  gap: 1px;
4776
- row-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
4777
- column-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
4783
+ row-rule: calc(1px * var(--scaling-factor)) solid
4784
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
4785
+ column-rule: calc(1px * var(--scaling-factor)) solid
4786
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
4778
4787
  outline:
4779
4788
  1px solid light-dark(rgb(147, 147, 147)),
4780
4789
  rgb(147, 147, 147);