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

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.
@@ -57,8 +57,15 @@ export function getDeviceInfo(): DeviceInfo {
57
57
  const touchPoints = (nav && nav.maxTouchPoints) || 0;
58
58
  const isTouchCapable = touchPoints > 1;
59
59
 
60
- const screenWidth = win?.innerWidth || 0;
61
- const screenHeight = win?.innerHeight || 0;
60
+ // Use clientWidth instead of innerWidth to exclude scrollbars
61
+ const screenWidth =
62
+ typeof document !== "undefined"
63
+ ? document.documentElement.clientWidth
64
+ : win?.innerWidth || 0;
65
+ const screenHeight =
66
+ typeof document !== "undefined"
67
+ ? document.documentElement.clientHeight
68
+ : win?.innerHeight || 0;
62
69
  const isTablet = isMobile && Math.min(screenWidth, screenHeight) >= 600;
63
70
 
64
71
  return {
@@ -135,4 +142,13 @@ if (typeof window !== "undefined") {
135
142
  // DOM is already ready
136
143
  initDeviceDetection();
137
144
  }
145
+
146
+ // Recalculate on resize (debounced)
147
+ let resizeTimeout: any;
148
+ window.addEventListener("resize", () => {
149
+ clearTimeout(resizeTimeout);
150
+ resizeTimeout = setTimeout(() => {
151
+ initDeviceDetection();
152
+ }, 100);
153
+ });
138
154
  }
@@ -1,4 +1,4 @@
1
- /* version 0.1.11-alpha.8 */
1
+ /* version 0.1.11-alpha.12 */
2
2
 
3
3
  input {
4
4
  padding: 0;
@@ -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.13`. Use `@alpha` tag to install.
31
31
 
32
32
  ### Basic Usage
33
33
 
@@ -1 +1 @@
1
- {"version":3,"file":"2025-04-23-device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/2025-04-23-device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAsB1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD"}
1
+ {"version":3,"file":"2025-04-23-device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/2025-04-23-device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD"}
@@ -31,8 +31,13 @@ export function getDeviceInfo() {
31
31
  const win = window;
32
32
  const touchPoints = (nav && nav.maxTouchPoints) || 0;
33
33
  const isTouchCapable = touchPoints > 1;
34
- const screenWidth = win?.innerWidth || 0;
35
- const screenHeight = win?.innerHeight || 0;
34
+ // Use clientWidth instead of innerWidth to exclude scrollbars
35
+ const screenWidth = typeof document !== "undefined"
36
+ ? document.documentElement.clientWidth
37
+ : win?.innerWidth || 0;
38
+ const screenHeight = typeof document !== "undefined"
39
+ ? document.documentElement.clientHeight
40
+ : win?.innerHeight || 0;
36
41
  const isTablet = isMobile && Math.min(screenWidth, screenHeight) >= 600;
37
42
  return {
38
43
  isMobile,
@@ -93,4 +98,12 @@ if (typeof window !== "undefined") {
93
98
  // DOM is already ready
94
99
  initDeviceDetection();
95
100
  }
101
+ // Recalculate on resize (debounced)
102
+ let resizeTimeout;
103
+ window.addEventListener("resize", () => {
104
+ clearTimeout(resizeTimeout);
105
+ resizeTimeout = setTimeout(() => {
106
+ initDeviceDetection();
107
+ }, 100);
108
+ });
96
109
  }
@@ -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);
@@ -18,8 +18,8 @@ function getDeviceInfo() {
18
18
  const win = window;
19
19
  const touchPoints = nav && nav.maxTouchPoints || 0;
20
20
  const isTouchCapable = touchPoints > 1;
21
- const screenWidth = win?.innerWidth || 0;
22
- const screenHeight = win?.innerHeight || 0;
21
+ const screenWidth = typeof document !== "undefined" ? document.documentElement.clientWidth : win?.innerWidth || 0;
22
+ const screenHeight = typeof document !== "undefined" ? document.documentElement.clientHeight : win?.innerHeight || 0;
23
23
  const isTablet = isMobile && Math.min(screenWidth, screenHeight) >= 600;
24
24
  return {
25
25
  isMobile,
@@ -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);