ds-one 0.2.5-alpha.9 → 0.3.0-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 (184) hide show
  1. package/DS1/0-face/device.ts +313 -29
  2. package/DS1/1-root/fonts/Iosevka-Regular.woff2 +0 -0
  3. package/DS1/1-root/one.css +124 -77
  4. package/DS1/2-core/ds-banner.ts +120 -1
  5. package/DS1/2-core/ds-button.ts +16 -93
  6. package/DS1/2-core/ds-card.ts +137 -0
  7. package/DS1/2-core/ds-cycle.ts +77 -179
  8. package/DS1/2-core/ds-date.ts +3 -10
  9. package/DS1/2-core/ds-gap.ts +38 -0
  10. package/DS1/2-core/ds-icon.ts +6 -35
  11. package/DS1/2-core/ds-input.ts +306 -1
  12. package/DS1/2-core/ds-pagedots.ts +52 -0
  13. package/DS1/2-core/ds-text.ts +55 -28
  14. package/DS1/2-core/ds-tooltip.ts +12 -58
  15. package/DS1/2-core/styles/ds-banner.css +77 -0
  16. package/DS1/2-core/styles/ds-button.css +67 -0
  17. package/DS1/2-core/styles/ds-cycle.css +21 -0
  18. package/DS1/2-core/styles/ds-date.css +9 -0
  19. package/DS1/2-core/styles/ds-gap.css +93 -0
  20. package/DS1/2-core/styles/ds-icon.css +30 -0
  21. package/DS1/2-core/styles/ds-input.css +46 -0
  22. package/DS1/2-core/styles/ds-pagedots.css +31 -0
  23. package/DS1/2-core/styles/ds-text.css +29 -0
  24. package/DS1/2-core/styles/ds-tooltip.css +49 -0
  25. package/DS1/3-unit/ds-accordion.ts +95 -0
  26. package/DS1/3-unit/ds-form.ts +304 -0
  27. package/DS1/3-unit/ds-list.ts +5 -14
  28. package/DS1/3-unit/ds-row.ts +3 -19
  29. package/DS1/3-unit/ds-table.ts +3 -86
  30. package/DS1/3-unit/styles/ds-accordion.css +46 -0
  31. package/DS1/3-unit/styles/ds-list.css +9 -0
  32. package/DS1/3-unit/styles/ds-row.css +19 -0
  33. package/DS1/3-unit/styles/ds-table.css +80 -0
  34. package/DS1/4-page/ds-container.ts +28 -0
  35. package/DS1/4-page/ds-grid.ts +37 -50
  36. package/DS1/4-page/ds-layout.ts +652 -163
  37. package/DS1/4-page/styles/ds-container.css +35 -0
  38. package/DS1/4-page/styles/ds-grid.css +56 -0
  39. package/DS1/4-page/styles/ds-layout.css +246 -0
  40. package/DS1/index.ts +8 -1
  41. package/DS1/vite-env.d.ts +13 -0
  42. package/DS1/x-icon/2x.svg +4 -0
  43. package/DS1/x-icon/2xdots.svg +18 -0
  44. package/DS1/x-icon/2xgrid.svg +6 -0
  45. package/DS1/x-icon/2xlines.svg +6 -0
  46. package/DS1/x-icon/4x4.svg +18 -0
  47. package/DS1/x-icon/apple.svg +4 -0
  48. package/DS1/x-icon/avatar.svg +4 -0
  49. package/DS1/x-icon/big.svg +4 -0
  50. package/DS1/x-icon/blank.svg +3 -0
  51. package/DS1/x-icon/check.svg +3 -0
  52. package/DS1/x-icon/close.svg +3 -0
  53. package/DS1/x-icon/collapse.svg +3 -0
  54. package/DS1/x-icon/color.svg +4 -0
  55. package/DS1/x-icon/column.svg +5 -0
  56. package/DS1/x-icon/default.svg +3 -0
  57. package/DS1/x-icon/delete.svg +5 -0
  58. package/DS1/x-icon/dictate.svg +6 -0
  59. package/DS1/x-icon/do.svg +3 -0
  60. package/DS1/x-icon/down.svg +3 -0
  61. package/DS1/x-icon/duplicate.svg +4 -0
  62. package/DS1/x-icon/gallery.svg +5 -0
  63. package/DS1/x-icon/google.svg +6 -0
  64. package/DS1/x-icon/head.svg +5 -0
  65. package/DS1/x-icon/home.svg +3 -0
  66. package/DS1/x-icon/icon.svg +4 -0
  67. package/DS1/x-icon/in.svg +4 -0
  68. package/DS1/x-icon/lock.svg +5 -0
  69. package/DS1/x-icon/loop.svg +5 -0
  70. package/DS1/x-icon/mic.svg +5 -0
  71. package/DS1/x-icon/minimize.svg +3 -0
  72. package/DS1/x-icon/more.svg +5 -0
  73. package/DS1/x-icon/neutral.svg +6 -0
  74. package/DS1/x-icon/note.svg +6 -0
  75. package/DS1/x-icon/page.svg +4 -0
  76. package/DS1/x-icon/plus.svg +3 -0
  77. package/DS1/x-icon/rewind.svg +4 -0
  78. package/DS1/x-icon/row.svg +5 -0
  79. package/DS1/x-icon/sdown.svg +3 -0
  80. package/DS1/x-icon/search.svg +4 -0
  81. package/DS1/x-icon/see.svg +4 -0
  82. package/DS1/x-icon/ship.svg +5 -0
  83. package/DS1/x-icon/star.svg +3 -0
  84. package/DS1/x-icon/status.svg +4 -0
  85. package/DS1/x-icon/sup.svg +3 -0
  86. package/DS1/x-icon/title.svg +3 -0
  87. package/DS1/x-icon/undo.svg +3 -0
  88. package/DS1/x-icon/ungroup.svg +4 -0
  89. package/DS1/x-icon/unhead.svg +3 -0
  90. package/DS1/x-icon/unicon.svg +3 -0
  91. package/DS1/x-icon/unlock.svg +5 -0
  92. package/DS1/x-icon/unmic.svg +6 -0
  93. package/DS1/x-icon/unsee.svg +5 -0
  94. package/DS1/x-icon/unstar.svg +3 -0
  95. package/DS1/x-icon/untitle.svg +3 -0
  96. package/DS1/x-icon/up.svg +3 -0
  97. package/LICENSE +1 -1
  98. package/README.md +4 -4
  99. package/dist/0-face/device.d.ts +52 -1
  100. package/dist/0-face/device.d.ts.map +1 -1
  101. package/dist/0-face/device.js +239 -21
  102. package/dist/2-core/ds-banner.d.ts +67 -0
  103. package/dist/2-core/ds-banner.d.ts.map +1 -1
  104. package/dist/2-core/ds-banner.js +97 -1
  105. package/dist/2-core/ds-button.d.ts +4 -15
  106. package/dist/2-core/ds-button.d.ts.map +1 -1
  107. package/dist/2-core/ds-button.js +14 -86
  108. package/dist/2-core/ds-card.d.ts +39 -0
  109. package/dist/2-core/ds-card.d.ts.map +1 -0
  110. package/dist/2-core/ds-card.js +119 -0
  111. package/dist/2-core/ds-cycle.d.ts +1 -5
  112. package/dist/2-core/ds-cycle.d.ts.map +1 -1
  113. package/dist/2-core/ds-cycle.js +74 -163
  114. package/dist/2-core/ds-date.d.ts.map +1 -1
  115. package/dist/2-core/ds-date.js +3 -9
  116. package/dist/2-core/ds-gap.d.ts +28 -0
  117. package/dist/2-core/ds-gap.d.ts.map +1 -0
  118. package/dist/2-core/ds-gap.js +25 -0
  119. package/dist/2-core/ds-icon.d.ts.map +1 -1
  120. package/dist/2-core/ds-icon.js +6 -35
  121. package/dist/2-core/ds-input.d.ts +127 -0
  122. package/dist/2-core/ds-input.d.ts.map +1 -1
  123. package/dist/2-core/ds-input.js +252 -1
  124. package/dist/2-core/ds-pagedots.d.ts +32 -0
  125. package/dist/2-core/ds-pagedots.d.ts.map +1 -0
  126. package/dist/2-core/ds-pagedots.js +36 -0
  127. package/dist/2-core/ds-text.d.ts +5 -3
  128. package/dist/2-core/ds-text.d.ts.map +1 -1
  129. package/dist/2-core/ds-text.js +49 -27
  130. package/dist/2-core/ds-tooltip.d.ts +2 -2
  131. package/dist/2-core/ds-tooltip.d.ts.map +1 -1
  132. package/dist/2-core/ds-tooltip.js +11 -57
  133. package/dist/3-unit/ds-accordion.d.ts +47 -0
  134. package/dist/3-unit/ds-accordion.d.ts.map +1 -0
  135. package/dist/3-unit/ds-accordion.js +75 -0
  136. package/dist/3-unit/ds-form.d.ts +70 -0
  137. package/dist/3-unit/ds-form.d.ts.map +1 -0
  138. package/dist/3-unit/ds-form.js +232 -0
  139. package/dist/3-unit/ds-list.d.ts.map +1 -1
  140. package/dist/3-unit/ds-list.js +5 -11
  141. package/dist/3-unit/ds-row.d.ts.map +1 -1
  142. package/dist/3-unit/ds-row.js +3 -19
  143. package/dist/3-unit/ds-table.d.ts.map +1 -1
  144. package/dist/3-unit/ds-table.js +3 -86
  145. package/dist/{3-unit/row-v1.d.ts → 4-page/ds-container.d.ts} +3 -11
  146. package/dist/4-page/ds-container.d.ts.map +1 -0
  147. package/dist/4-page/ds-container.js +11 -0
  148. package/dist/4-page/ds-grid.d.ts +5 -0
  149. package/dist/4-page/ds-grid.d.ts.map +1 -1
  150. package/dist/4-page/ds-grid.js +38 -56
  151. package/dist/4-page/ds-layout.d.ts +3 -3
  152. package/dist/4-page/ds-layout.d.ts.map +1 -1
  153. package/dist/4-page/ds-layout.js +651 -162
  154. package/dist/ds-one.bundle.js +3247 -2089
  155. package/dist/ds-one.bundle.js.map +1 -7
  156. package/dist/ds-one.bundle.min.js +3839 -550
  157. package/dist/ds-one.bundle.min.js.map +1 -7
  158. package/dist/index.d.ts +8 -1
  159. package/dist/index.d.ts.map +1 -1
  160. package/dist/index.js +8 -1
  161. package/package.json +4 -2
  162. package/dist/3-unit/doublenav-v1.d.ts +0 -51
  163. package/dist/3-unit/doublenav-v1.d.ts.map +0 -1
  164. package/dist/3-unit/doublenav-v1.js +0 -88
  165. package/dist/3-unit/ds-portfolio-doublenav.d.ts +0 -51
  166. package/dist/3-unit/ds-portfolio-doublenav.d.ts.map +0 -1
  167. package/dist/3-unit/ds-portfolio-doublenav.js +0 -88
  168. package/dist/3-unit/ds-portfolio-panel.d.ts +0 -11
  169. package/dist/3-unit/ds-portfolio-panel.d.ts.map +0 -1
  170. package/dist/3-unit/ds-portfolio-panel.js +0 -16
  171. package/dist/3-unit/ds-portfolio-singlenav.d.ts +0 -32
  172. package/dist/3-unit/ds-portfolio-singlenav.d.ts.map +0 -1
  173. package/dist/3-unit/ds-portfolio-singlenav.js +0 -62
  174. package/dist/3-unit/list-v1.d.ts +0 -11
  175. package/dist/3-unit/list-v1.d.ts.map +0 -1
  176. package/dist/3-unit/list-v1.js +0 -15
  177. package/dist/3-unit/panel-v1.d.ts +0 -11
  178. package/dist/3-unit/panel-v1.d.ts.map +0 -1
  179. package/dist/3-unit/panel-v1.js +0 -16
  180. package/dist/3-unit/row-v1.d.ts.map +0 -1
  181. package/dist/3-unit/row-v1.js +0 -32
  182. package/dist/3-unit/singlenav-v1.d.ts +0 -32
  183. package/dist/3-unit/singlenav-v1.d.ts.map +0 -1
  184. package/dist/3-unit/singlenav-v1.js +0 -62
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 2V10M2 6H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 1L1 5L6 9V1Z" fill="currentColor"/>
3
+ <path d="M12 1L7 5L12 9V1Z" fill="currentColor"/>
4
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="0.5" y="0.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
3
+ <rect x="0.5" y="4.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
4
+ <rect x="0.5" y="8.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
5
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 1L4 4L7 1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="5" cy="5" r="4" stroke="currentColor" stroke-width="1.2" fill="none"/>
3
+ <line x1="8" y1="8" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M7 1C3.5 1 1 5 1 5C1 5 3.5 9 7 9C10.5 9 13 5 13 5C13 5 10.5 1 7 1Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
3
+ <circle cx="7" cy="5" r="2" fill="currentColor"/>
4
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2 8L1 11H13L12 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
3
+ <path d="M3 8V4H6V1H8V4H11V8H3Z" fill="currentColor"/>
4
+ <rect x="5" y="5" width="4" height="2" fill="var(--surface-color, #fff)"/>
5
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" fill="none"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.2" fill="none"/>
3
+ <circle cx="6" cy="6" r="2" fill="currentColor"/>
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 4L4 1L7 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 1H11M6 1V9M3 9H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 4L4 1M1 4L4 7M1 4H8C9.65685 4 11 5.34315 11 7V9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="0.5" y="0.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
3
+ <rect x="6.5" y="6.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 1H11M1 1V10C1 10.5523 1.44772 11 2 11H10C10.5523 11 11 10.5523 11 10V1" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 1" fill="none"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="1" y="1" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 1" fill="none"/>
3
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="1" y="5" width="8" height="6" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
3
+ <path d="M3 5V3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" fill="none"/>
4
+ <circle cx="5" cy="8" r="1" fill="currentColor"/>
5
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="2.5" y="1" width="5" height="7" rx="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
3
+ <path d="M1 6C1 8.76142 2.79086 11 5 11C7.20914 11 9 8.76142 9 6" stroke="currentColor" stroke-width="1.2" fill="none"/>
4
+ <line x1="5" y1="11" x2="5" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
5
+ <line x1="1" y1="1" x2="9" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
6
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M7 2C3.5 2 1 6 1 6C1 6 3.5 10 7 10C10.5 10 13 6 13 6C13 6 10.5 2 7 2Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
3
+ <circle cx="7" cy="6" r="2" stroke="currentColor" stroke-width="1.2" fill="none"/>
4
+ <line x1="2" y1="1" x2="12" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
5
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" stroke-dasharray="2 1" fill="none"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 1H11M6 1V9M3 9H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 1"/>
3
+ </svg>
package/DS1/x-icon/up.svg CHANGED
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 10V2M6 2L2 6M6 2L10 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Jo4712
3
+ Copyright (c) 2025 0001
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # DS one (0.2.5-alpha.9)
1
+ # DS one (0.3.0-alpha.2)
2
2
 
3
3
  A plug and play design system
4
4
 
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
20
20
 
21
21
  ```
22
22
 
23
- **Note**: Currently published as alpha version `0.2.5-alpha.9`
23
+ **Note**: Currently published as alpha version `0.3.0-alpha.2`
24
24
 
25
25
  ## Quick Start
26
26
 
@@ -41,8 +41,8 @@ yarn add ds-one@alpha
41
41
  </script>
42
42
  </head>
43
43
  <body>
44
- <ds-button variant="primary" key="getStarted"></ds-button>
45
- <ds-text key="welcome"></ds-text>
44
+ <ds-button variant="primary" text="Get Started"></ds-button>
45
+ <ds-text text="Welcome"></ds-text>
46
46
  </body>
47
47
  </html>
48
48
  ```
@@ -9,6 +9,17 @@ export interface DeviceInfo {
9
9
  screenWidth: number;
10
10
  screenHeight: number;
11
11
  }
12
+ export type ScalingMode = "auto" | "fixed" | "fluid";
13
+ export interface ScalingConfig {
14
+ mode: ScalingMode;
15
+ baseWidth: number;
16
+ minScale: number;
17
+ maxScale: number;
18
+ }
19
+ /** Reactive scaling factor signal */
20
+ export declare const scalingFactor: import("@lit-labs/signals").Signal.State<number>;
21
+ /** Current scaling configuration */
22
+ export declare const scalingConfig: import("@lit-labs/signals").Signal.State<ScalingConfig>;
12
23
  /**
13
24
  * Comprehensive mobile device detection
14
25
  * Combines user agent detection, touch capability, and viewport size
@@ -19,7 +30,47 @@ export declare function detectMobileDevice(): boolean;
19
30
  */
20
31
  export declare function getDeviceInfo(): DeviceInfo;
21
32
  /**
22
- * Initialize device detection and log to console
33
+ * Calculate the scaling factor based on viewport width
34
+ * @param viewportWidth - Current viewport width in pixels
35
+ * @param config - Scaling configuration
36
+ * @returns The calculated scaling factor
37
+ */
38
+ export declare function calculateScalingFactor(viewportWidth: number, config?: ScalingConfig): number;
39
+ /**
40
+ * Set the scaling configuration
41
+ * @param config - Partial scaling configuration to apply
42
+ */
43
+ export declare function setScalingConfig(config: Partial<ScalingConfig>): void;
44
+ /**
45
+ * Update the scaling factor based on current viewport
46
+ * Desktop always uses factor 1; mobile uses computed factor
47
+ */
48
+ export declare function updateScalingFactor(): void;
49
+ /**
50
+ * Get the current scaling factor
51
+ * @returns The current scaling factor
52
+ */
53
+ export declare function getScalingFactor(): number;
54
+ /**
55
+ * Convert a design pixel value to scaled pixels
56
+ * @param designPx - The design pixel value (based on 280px width)
57
+ * @returns The scaled pixel value
58
+ */
59
+ export declare function scale(designPx: number): number;
60
+ /**
61
+ * Convert a scaled pixel value back to design pixels
62
+ * @param scaledPx - The scaled pixel value
63
+ * @returns The design pixel value
64
+ */
65
+ export declare function unscale(scaledPx: number): number;
66
+ /**
67
+ * Initialize device detection and scaling
68
+ * Sets CSS classes (.mobile/.desktop) and --sf custom property
23
69
  */
24
70
  export declare function initDeviceDetection(): DeviceInfo;
71
+ /**
72
+ * Disable double-tap to zoom in the browser (app-like behavior)
73
+ * Prevents all zoom gestures including double-tap and pinch-to-zoom
74
+ */
75
+ export declare function applike(): void;
25
76
  //# sourceMappingURL=device.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/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,CAkDhD"}
1
+ {"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AASA,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,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAaD,qCAAqC;AACrC,eAAO,MAAM,aAAa,kDAAoB,CAAC;AAE/C,oCAAoC;AACpC,eAAO,MAAM,aAAa,yDAA8C,CAAC;AAMzE;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAMD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,aAAmC,GAC1C,MAAM,CAYR;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CASrE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAiC1C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhD;AAMD;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD;AAiCD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,IAAI,CA4H9B"}
@@ -1,5 +1,22 @@
1
- // 2025-04-23-device.ts
2
- // Device detection and context utilities
1
+ // device.ts
2
+ // Device detection, context utilities, and responsive scaling
3
+ import { signal } from "@lit-labs/signals";
4
+ // ============================================================================
5
+ // Configuration & Signals
6
+ // ============================================================================
7
+ const defaultScalingConfig = {
8
+ mode: "auto",
9
+ baseWidth: 280,
10
+ minScale: 0.75,
11
+ maxScale: 2.0,
12
+ };
13
+ /** Reactive scaling factor signal */
14
+ export const scalingFactor = signal(1);
15
+ /** Current scaling configuration */
16
+ export const scalingConfig = signal(defaultScalingConfig);
17
+ // ============================================================================
18
+ // Device Detection
19
+ // ============================================================================
3
20
  /**
4
21
  * Comprehensive mobile device detection
5
22
  * Combines user agent detection, touch capability, and viewport size
@@ -50,30 +67,118 @@ export function getDeviceInfo() {
50
67
  screenHeight,
51
68
  };
52
69
  }
70
+ // ============================================================================
71
+ // Scaling
72
+ // ============================================================================
53
73
  /**
54
- * Initialize device detection and log to console
74
+ * Calculate the scaling factor based on viewport width
75
+ * @param viewportWidth - Current viewport width in pixels
76
+ * @param config - Scaling configuration
77
+ * @returns The calculated scaling factor
78
+ */
79
+ export function calculateScalingFactor(viewportWidth, config = scalingConfig.get()) {
80
+ if (config.mode === "fixed") {
81
+ return 1;
82
+ }
83
+ const rawScale = viewportWidth / config.baseWidth;
84
+ const clampedScale = Math.max(config.minScale, Math.min(config.maxScale, rawScale));
85
+ return Number(clampedScale.toFixed(3));
86
+ }
87
+ /**
88
+ * Set the scaling configuration
89
+ * @param config - Partial scaling configuration to apply
90
+ */
91
+ export function setScalingConfig(config) {
92
+ const currentConfig = scalingConfig.get();
93
+ const newConfig = { ...currentConfig, ...config };
94
+ scalingConfig.set(newConfig);
95
+ // Recalculate scaling factor if in browser
96
+ if (typeof window !== "undefined") {
97
+ updateScalingFactor();
98
+ }
99
+ }
100
+ /**
101
+ * Update the scaling factor based on current viewport
102
+ * Desktop always uses factor 1; mobile uses computed factor
103
+ */
104
+ export function updateScalingFactor() {
105
+ if (typeof window === "undefined" || typeof document === "undefined") {
106
+ return;
107
+ }
108
+ const isMobile = detectMobileDevice();
109
+ // Desktop: always use factor 1
110
+ if (!isMobile) {
111
+ const factor = 1;
112
+ scalingFactor.set(factor);
113
+ document.documentElement.style.setProperty("--sf", factor.toString());
114
+ window.dispatchEvent(new CustomEvent("scaling-changed", {
115
+ detail: { scalingFactor: factor, config: scalingConfig.get() },
116
+ }));
117
+ return;
118
+ }
119
+ // Mobile: compute scaling based on viewport
120
+ const viewportWidth = document.documentElement.clientWidth;
121
+ const config = scalingConfig.get();
122
+ const newFactor = calculateScalingFactor(viewportWidth, config);
123
+ scalingFactor.set(newFactor);
124
+ document.documentElement.style.setProperty("--sf", newFactor.toString());
125
+ window.dispatchEvent(new CustomEvent("scaling-changed", {
126
+ detail: { scalingFactor: newFactor, config },
127
+ }));
128
+ }
129
+ /**
130
+ * Get the current scaling factor
131
+ * @returns The current scaling factor
132
+ */
133
+ export function getScalingFactor() {
134
+ return scalingFactor.get();
135
+ }
136
+ /**
137
+ * Convert a design pixel value to scaled pixels
138
+ * @param designPx - The design pixel value (based on 280px width)
139
+ * @returns The scaled pixel value
140
+ */
141
+ export function scale(designPx) {
142
+ return designPx * scalingFactor.get();
143
+ }
144
+ /**
145
+ * Convert a scaled pixel value back to design pixels
146
+ * @param scaledPx - The scaled pixel value
147
+ * @returns The design pixel value
148
+ */
149
+ export function unscale(scaledPx) {
150
+ const factor = scalingFactor.get();
151
+ return factor === 0 ? scaledPx : scaledPx / factor;
152
+ }
153
+ // ============================================================================
154
+ // Unified Initialization
155
+ // ============================================================================
156
+ /**
157
+ * Initialize device detection and scaling
158
+ * Sets CSS classes (.mobile/.desktop) and --sf custom property
55
159
  */
56
160
  export function initDeviceDetection() {
57
161
  const deviceInfo = getDeviceInfo();
58
- // Calculate and set scaling factor for mobile
59
- if (deviceInfo.isMobile && typeof document !== "undefined") {
60
- // Design width: 280px (14 columns × 20px)
61
- const designWidth = 280;
62
- const actualWidth = deviceInfo.screenWidth;
63
- const scalingFactor = actualWidth / designWidth;
64
- // Set CSS custom property for scaling on html element
65
- document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
66
- // Also set --sf for backwards compatibility
67
- document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
68
- console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
162
+ if (typeof document === "undefined") {
163
+ return deviceInfo;
164
+ }
165
+ // Set device class on html element
166
+ if (deviceInfo.isMobile) {
167
+ document.documentElement.classList.add("mobile");
168
+ document.documentElement.classList.remove("desktop");
169
+ }
170
+ else {
171
+ document.documentElement.classList.add("desktop");
172
+ document.documentElement.classList.remove("mobile");
173
+ }
174
+ // Update scaling factor (handles --sf CSS property)
175
+ updateScalingFactor();
176
+ // Log device info
177
+ const factor = scalingFactor.get();
178
+ if (deviceInfo.isMobile) {
179
+ console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${factor.toFixed(2)}`);
69
180
  }
70
181
  else {
71
- // Desktop - no scaling
72
- if (typeof document !== "undefined") {
73
- document.documentElement.style.setProperty("--sf", "1");
74
- // Also set --sf for backwards compatibility
75
- document.documentElement.style.setProperty("--sf", "1");
76
- }
77
182
  console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
78
183
  }
79
184
  // Log additional details in development mode
@@ -85,6 +190,7 @@ export function initDeviceDetection() {
85
190
  isDesktop: deviceInfo.isDesktop,
86
191
  isTouchCapable: deviceInfo.isTouchCapable,
87
192
  viewport: `${deviceInfo.screenWidth}x${deviceInfo.screenHeight}`,
193
+ scalingFactor: factor,
88
194
  userAgent: deviceInfo.userAgent,
89
195
  });
90
196
  }
@@ -102,7 +208,7 @@ if (typeof window !== "undefined") {
102
208
  // DOM is already ready
103
209
  initDeviceDetection();
104
210
  }
105
- // Recalculate on resize (debounced)
211
+ // Single debounced resize handler for both device detection + scaling
106
212
  let resizeTimeout;
107
213
  window.addEventListener("resize", () => {
108
214
  clearTimeout(resizeTimeout);
@@ -110,4 +216,116 @@ if (typeof window !== "undefined") {
110
216
  initDeviceDetection();
111
217
  }, 100);
112
218
  });
219
+ // Also handle orientation change
220
+ window.addEventListener("orientationchange", () => {
221
+ setTimeout(initDeviceDetection, 100);
222
+ });
223
+ }
224
+ // ============================================================================
225
+ // App-like Behavior
226
+ // ============================================================================
227
+ /**
228
+ * Disable double-tap to zoom in the browser (app-like behavior)
229
+ * Prevents all zoom gestures including double-tap and pinch-to-zoom
230
+ */
231
+ export function applike() {
232
+ if (typeof document === "undefined" || typeof window === "undefined") {
233
+ return;
234
+ }
235
+ // Set viewport meta tag to prevent zoom - this is the most important step
236
+ let viewport = document.querySelector('meta[name="viewport"]');
237
+ if (!viewport) {
238
+ viewport = document.createElement("meta");
239
+ viewport.setAttribute("name", "viewport");
240
+ document.head.appendChild(viewport);
241
+ }
242
+ viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
243
+ // Apply touch-action: pan-x pan-y globally to prevent zoom but allow panning
244
+ const style = document.createElement("style");
245
+ style.id = "ds-one-applike-style";
246
+ style.textContent = `
247
+ * {
248
+ touch-action: pan-x pan-y !important;
249
+ -ms-touch-action: pan-x pan-y !important;
250
+ }
251
+ html, body {
252
+ touch-action: pan-x pan-y !important;
253
+ -ms-touch-action: pan-x pan-y !important;
254
+ }
255
+ `;
256
+ // Remove existing style if present
257
+ const existingStyle = document.getElementById("ds-one-applike-style");
258
+ if (existingStyle) {
259
+ existingStyle.remove();
260
+ }
261
+ document.head.appendChild(style);
262
+ // Track touch events to prevent double-tap zoom
263
+ let lastTouchEnd = 0;
264
+ let touchStartTime = 0;
265
+ const preventZoom = (event) => {
266
+ // Prevent pinch zoom (two fingers)
267
+ if (event instanceof TouchEvent) {
268
+ if (event.touches.length > 1) {
269
+ event.preventDefault();
270
+ event.stopPropagation();
271
+ return;
272
+ }
273
+ const now = Date.now();
274
+ if (event.type === "touchstart") {
275
+ // If touchstart happens within 300ms of last touchend, it's likely a double-tap
276
+ if (now - lastTouchEnd < 300) {
277
+ event.preventDefault();
278
+ event.stopPropagation();
279
+ return;
280
+ }
281
+ touchStartTime = now;
282
+ }
283
+ else if (event.type === "touchend") {
284
+ const touchDuration = now - touchStartTime;
285
+ // If this is a quick tap (< 300ms) and happened soon after previous touchend, prevent it
286
+ if (touchDuration < 300 && now - lastTouchEnd < 300) {
287
+ event.preventDefault();
288
+ event.stopPropagation();
289
+ return;
290
+ }
291
+ lastTouchEnd = now;
292
+ }
293
+ else if (event.type === "touchmove") {
294
+ // Prevent any touchmove that might trigger zoom
295
+ if (event.touches.length > 1) {
296
+ event.preventDefault();
297
+ event.stopPropagation();
298
+ return;
299
+ }
300
+ }
301
+ }
302
+ // Prevent wheel zoom with ctrl/cmd key (common on trackpads)
303
+ if (event instanceof WheelEvent && (event.ctrlKey || event.metaKey)) {
304
+ event.preventDefault();
305
+ event.stopPropagation();
306
+ return;
307
+ }
308
+ };
309
+ // Use capture phase to catch events earlier
310
+ const options = { passive: false, capture: true };
311
+ // Prevent all zoom gestures - use capture phase
312
+ document.addEventListener("touchstart", preventZoom, options);
313
+ document.addEventListener("touchmove", preventZoom, options);
314
+ document.addEventListener("touchend", preventZoom, options);
315
+ document.addEventListener("touchcancel", preventZoom, options);
316
+ // Prevent wheel zoom
317
+ document.addEventListener("wheel", preventZoom, options);
318
+ // Prevent gesture events (iOS Safari) - use capture phase
319
+ document.addEventListener("gesturestart", (e) => {
320
+ e.preventDefault();
321
+ e.stopPropagation();
322
+ }, options);
323
+ document.addEventListener("gesturechange", (e) => {
324
+ e.preventDefault();
325
+ e.stopPropagation();
326
+ }, options);
327
+ document.addEventListener("gestureend", (e) => {
328
+ e.preventDefault();
329
+ e.stopPropagation();
330
+ }, options);
113
331
  }
@@ -1 +1,68 @@
1
+ import { LitElement } from "lit";
2
+ import "./ds-text.js";
3
+ import "./ds-button.js";
4
+ declare global {
5
+ interface CustomElementRegistry {
6
+ define(name: string, constructor: typeof LitElement): void;
7
+ }
8
+ var customElements: CustomElementRegistry;
9
+ }
10
+ export declare class Banner extends LitElement {
11
+ static properties: {
12
+ text: {
13
+ type: StringConstructor;
14
+ };
15
+ action: {
16
+ type: StringConstructor;
17
+ };
18
+ href: {
19
+ type: StringConstructor;
20
+ };
21
+ mailto: {
22
+ type: StringConstructor;
23
+ };
24
+ subject: {
25
+ type: StringConstructor;
26
+ };
27
+ describe: {
28
+ type: StringConstructor;
29
+ };
30
+ appVersion: {
31
+ type: StringConstructor;
32
+ attribute: string;
33
+ };
34
+ variant: {
35
+ type: StringConstructor;
36
+ };
37
+ version: {
38
+ type: StringConstructor;
39
+ };
40
+ _showVersion: {
41
+ type: BooleanConstructor;
42
+ state: boolean;
43
+ };
44
+ };
45
+ text: string;
46
+ action: string;
47
+ href: string;
48
+ mailto: string;
49
+ subject: string;
50
+ describe: string;
51
+ appVersion: string;
52
+ variant: string;
53
+ version: string;
54
+ _showVersion: boolean;
55
+ private _boundUpdate;
56
+ connectedCallback(): void;
57
+ disconnectedCallback(): void;
58
+ static styles: import("lit").CSSResult;
59
+ private _toggleVersion;
60
+ private _getMailtoHref;
61
+ render(): import("lit-html").TemplateResult<1>;
62
+ }
63
+ declare global {
64
+ interface HTMLElementTagNameMap {
65
+ "ds-banner": Banner;
66
+ }
67
+ }
1
68
  //# sourceMappingURL=ds-banner.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AAGxB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWf;IAEF,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,OAAO,EAAE,MAAM,CAAM;IACrB,QAAQ,EAAE,MAAM,CAAM;IACtB,UAAU,EAAE,MAAM,CAAM;IACxB,OAAO,EAAE,MAAM,CAAa;IAC5B,OAAO,EAAE,MAAM,CAAM;IACrB,YAAY,EAAE,OAAO,CAAS;IAE9B,OAAO,CAAC,YAAY,CAA8B;IAElD,iBAAiB;IAOjB,oBAAoB;IAMpB,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IA6BtB,MAAM;CAoBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}