@geoffcox/sterling-svelte 0.0.31 → 1.0.1

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 (215) hide show
  1. package/@types/clickOutside.d.ts +11 -7
  2. package/Button.svelte +11 -183
  3. package/Button.svelte.d.ts +2 -6
  4. package/Callout.svelte +107 -146
  5. package/Callout.svelte.d.ts +1 -1
  6. package/Checkbox.svelte +15 -177
  7. package/Checkbox.svelte.d.ts +2 -2
  8. package/ColorPicker.svelte +204 -223
  9. package/ColorPicker.svelte.d.ts +1 -2
  10. package/Dialog.svelte +90 -187
  11. package/Dialog.svelte.d.ts +2 -1
  12. package/Dropdown.svelte +52 -220
  13. package/Dropdown.svelte.d.ts +4 -8
  14. package/HexColorSliders.svelte +77 -145
  15. package/HexColorSliders.svelte.d.ts +28 -1
  16. package/HslColorSliders.svelte +99 -179
  17. package/HslColorSliders.svelte.d.ts +28 -1
  18. package/Input.svelte +27 -136
  19. package/Input.svelte.d.ts +2 -3
  20. package/Label.constants.d.ts +1 -0
  21. package/Label.constants.js +1 -0
  22. package/Label.svelte +96 -169
  23. package/Label.svelte.d.ts +6 -1
  24. package/Label.types.d.ts +3 -1
  25. package/Link.svelte +9 -106
  26. package/Link.svelte.d.ts +0 -1
  27. package/List.svelte +142 -230
  28. package/List.svelte.d.ts +2 -3
  29. package/List.types.d.ts +6 -1
  30. package/ListItem.svelte +25 -94
  31. package/ListItem.svelte.d.ts +2 -0
  32. package/Menu.svelte +48 -65
  33. package/Menu.svelte.d.ts +4 -1
  34. package/MenuBar.svelte +84 -86
  35. package/MenuBar.svelte.d.ts +4 -1
  36. package/MenuButton.svelte +66 -73
  37. package/MenuButton.svelte.d.ts +7 -3
  38. package/MenuItem.svelte +256 -288
  39. package/MenuItem.svelte.d.ts +2 -2
  40. package/MenuItemDisplay.svelte +12 -116
  41. package/MenuItemDisplay.svelte.d.ts +21 -7
  42. package/MenuSeparator.svelte +6 -45
  43. package/MenuSeparator.svelte.d.ts +8 -78
  44. package/Popover.constants.d.ts +1 -1
  45. package/Popover.constants.js +1 -1
  46. package/Popover.svelte +66 -80
  47. package/Popover.svelte.d.ts +5 -1
  48. package/Progress.svelte +28 -126
  49. package/Progress.svelte.d.ts +4 -3
  50. package/Radio.svelte +49 -192
  51. package/Radio.svelte.d.ts +2 -2
  52. package/RgbColorSliders.svelte +48 -137
  53. package/RgbColorSliders.svelte.d.ts +5 -5
  54. package/Select.svelte +122 -250
  55. package/Select.svelte.d.ts +6 -2
  56. package/Slider.svelte +90 -259
  57. package/Slider.svelte.d.ts +1 -2
  58. package/Switch.svelte +24 -259
  59. package/Switch.svelte.d.ts +3 -1
  60. package/Tab.svelte +27 -175
  61. package/Tab.svelte.d.ts +6 -4
  62. package/TabList.svelte +146 -171
  63. package/TabList.svelte.d.ts +3 -2
  64. package/TabList.types.d.ts +6 -1
  65. package/TextArea.svelte +32 -129
  66. package/TextArea.svelte.d.ts +1 -1
  67. package/Tooltip.svelte +46 -47
  68. package/Tooltip.svelte.d.ts +8 -3
  69. package/Tree.constants.d.ts +0 -1
  70. package/Tree.constants.js +0 -1
  71. package/Tree.svelte +35 -119
  72. package/Tree.svelte.d.ts +4 -4
  73. package/Tree.types.d.ts +1 -3
  74. package/TreeChevron.svelte +18 -98
  75. package/TreeChevron.svelte.d.ts +1 -0
  76. package/TreeItem.constants.d.ts +1 -0
  77. package/TreeItem.constants.js +1 -0
  78. package/TreeItem.svelte +251 -211
  79. package/TreeItem.svelte.d.ts +7 -3
  80. package/TreeItem.types.d.ts +1 -1
  81. package/TreeItemDisplay.svelte +20 -104
  82. package/TreeItemDisplay.svelte.d.ts +2 -2
  83. package/actions/applyLightDarkMode.d.ts +10 -0
  84. package/actions/applyLightDarkMode.js +36 -0
  85. package/actions/forwardEvents.js +3 -3
  86. package/css/Button.base.css +74 -0
  87. package/css/Button.colorful.css +17 -0
  88. package/css/Button.css +7 -0
  89. package/css/Button.secondary.colorful.css +15 -0
  90. package/css/Button.secondary.css +11 -0
  91. package/css/Button.shapes.css +14 -0
  92. package/css/Button.tool.colorful.css +13 -0
  93. package/css/Button.tool.css +18 -0
  94. package/css/Callout.base.css +43 -0
  95. package/css/Callout.colorful.css +5 -0
  96. package/css/Callout.css +2 -0
  97. package/css/Checkbox.base.css +145 -0
  98. package/css/Checkbox.colorful.css +17 -0
  99. package/css/Checkbox.css +2 -0
  100. package/css/ColorPicker.base.css +23 -0
  101. package/css/ColorPicker.css +1 -0
  102. package/css/Dialog.base.css +116 -0
  103. package/css/Dialog.css +1 -0
  104. package/css/Dropdown.base.css +147 -0
  105. package/css/Dropdown.colorful.css +23 -0
  106. package/css/Dropdown.css +2 -0
  107. package/css/HexColorSliders.base.css +106 -0
  108. package/css/HexColorSliders.css +1 -0
  109. package/css/HslColorSliders.base.css +124 -0
  110. package/css/HslColorSliders.css +1 -0
  111. package/css/Input.base.css +100 -0
  112. package/css/Input.colorful.css +22 -0
  113. package/css/Input.composed.css +8 -0
  114. package/css/Input.css +3 -0
  115. package/css/Label.base.css +119 -0
  116. package/css/Label.boxed.colorful.css +21 -0
  117. package/css/Label.boxed.css +31 -0
  118. package/css/Label.colorful.css +3 -0
  119. package/css/Label.css +4 -0
  120. package/css/Link.base.css +52 -0
  121. package/css/Link.colorful.css +15 -0
  122. package/css/Link.css +6 -0
  123. package/css/Link.ghost.colorful.css +7 -0
  124. package/css/Link.ghost.css +11 -0
  125. package/css/Link.undecorated.colorful.css +6 -0
  126. package/css/Link.undecorated.css +6 -0
  127. package/css/List.base.css +98 -0
  128. package/css/List.css +1 -0
  129. package/css/ListItem.base.css +59 -0
  130. package/css/ListItem.css +1 -0
  131. package/css/Menu.base.css +21 -0
  132. package/css/Menu.css +1 -0
  133. package/css/MenuBar.base.css +9 -0
  134. package/css/MenuBar.css +1 -0
  135. package/css/MenuButton.base.css +13 -0
  136. package/css/MenuButton.css +1 -0
  137. package/css/MenuItem.base.css +48 -0
  138. package/css/MenuItem.css +1 -0
  139. package/css/MenuItemDisplay.base.css +104 -0
  140. package/css/MenuItemDisplay.css +1 -0
  141. package/css/MenuSeparator.base.css +5 -0
  142. package/css/MenuSeparator.css +1 -0
  143. package/css/Popover copy.css +21 -0
  144. package/css/Popover.css +21 -0
  145. package/css/Progress.base.css +99 -0
  146. package/css/Progress.css +1 -0
  147. package/css/Radio.base.css +135 -0
  148. package/css/Radio.colorful.css +18 -0
  149. package/css/Radio.css +2 -0
  150. package/css/RgbColorSliders.base.css +94 -0
  151. package/css/RgbColorSliders.css +1 -0
  152. package/css/Select.base.css +127 -0
  153. package/css/Select.colorful.css +24 -0
  154. package/css/Select.composed.css +12 -0
  155. package/css/Select.css +3 -0
  156. package/css/Slider.base.css +182 -0
  157. package/css/Slider.colorful.css +11 -0
  158. package/css/Slider.composed.css +8 -0
  159. package/css/Slider.css +3 -0
  160. package/css/Switch.base.css +193 -0
  161. package/css/Switch.colorful.css +39 -0
  162. package/css/Switch.css +2 -0
  163. package/css/Tab.base.css +135 -0
  164. package/css/Tab.colorful.css +13 -0
  165. package/css/Tab.css +2 -0
  166. package/css/TabList.base.css +34 -0
  167. package/css/TabList.css +1 -0
  168. package/css/TextArea.base.css +85 -0
  169. package/css/TextArea.colorful.css +17 -0
  170. package/css/TextArea.composed.css +8 -0
  171. package/css/TextArea.css +3 -0
  172. package/css/Tooltip.base.css +6 -0
  173. package/css/Tooltip.css +1 -0
  174. package/css/Tree.base.css +74 -0
  175. package/css/Tree.composed.css +8 -0
  176. package/css/Tree.css +2 -0
  177. package/css/TreeChevron.base.css +86 -0
  178. package/css/TreeChevron.css +1 -0
  179. package/css/TreeItem.base.css +3 -0
  180. package/css/TreeItem.css +1 -0
  181. package/css/TreeItemDisplay.base.css +74 -0
  182. package/css/TreeItemDisplay.colorful.css +9 -0
  183. package/css/TreeItemDisplay.css +1 -0
  184. package/css/dark-mode.css +134 -0
  185. package/css/light-mode.css +134 -0
  186. package/css/sterling.css +37 -0
  187. package/index.d.ts +9 -13
  188. package/index.js +8 -12
  189. package/mediaQueries/prefersColorSchemeDark.d.ts +2 -0
  190. package/mediaQueries/prefersColorSchemeDark.js +10 -0
  191. package/{stores → mediaQueries}/prefersReducedMotion.d.ts +1 -0
  192. package/{stores → mediaQueries}/usingKeyboard.d.ts +1 -0
  193. package/package.json +121 -13
  194. package/Link.constants.d.ts +0 -1
  195. package/Link.constants.js +0 -1
  196. package/Link.types.d.ts +0 -4
  197. package/Link.types.js +0 -1
  198. package/theme/applyDarkTheme.d.ts +0 -7
  199. package/theme/applyDarkTheme.js +0 -11
  200. package/theme/applyLightTheme.d.ts +0 -7
  201. package/theme/applyLightTheme.js +0 -11
  202. package/theme/applyTheme.d.ts +0 -7
  203. package/theme/applyTheme.js +0 -20
  204. package/theme/colors.d.ts +0 -54
  205. package/theme/colors.js +0 -82
  206. package/theme/darkTheme.d.ts +0 -2
  207. package/theme/darkTheme.js +0 -142
  208. package/theme/lightTheme.d.ts +0 -2
  209. package/theme/lightTheme.js +0 -119
  210. package/theme/toggleDarkTheme.d.ts +0 -18
  211. package/theme/toggleDarkTheme.js +0 -53
  212. package/theme/types.d.ts +0 -21
  213. package/theme/types.js +0 -1
  214. /package/{stores → mediaQueries}/prefersReducedMotion.js +0 -0
  215. /package/{stores → mediaQueries}/usingKeyboard.js +0 -0
@@ -0,0 +1,37 @@
1
+ @import url('./light-mode.css');
2
+ @import url('./dark-mode.css');
3
+
4
+ @import url('./Button.css');
5
+ @import url('./Callout.css');
6
+ @import url('./Checkbox.css');
7
+ @import url('./ColorPicker.css');
8
+ @import url('./Dialog.css');
9
+ @import url('./Dropdown.css');
10
+ @import url('./HexColorSliders.css');
11
+ @import url('./HslColorSliders.css');
12
+ @import url('./Input.css');
13
+ @import url('./Label.css');
14
+ @import url('./Link.css');
15
+ @import url('./List.css');
16
+ @import url('./ListItem.css');
17
+ @import url('./Menu.css');
18
+ @import url('./MenuBar.css');
19
+ @import url('./MenuButton.css');
20
+ @import url('./MenuItem.css');
21
+ @import url('./MenuItemDisplay.css');
22
+ @import url('./MenuSeparator.css');
23
+ @import url('./Popover.css');
24
+ @import url('./Progress.css');
25
+ @import url('./Radio.css');
26
+ @import url('./RgbColorSliders.css');
27
+ @import url('./Select.css');
28
+ @import url('./Slider.css');
29
+ @import url('./Switch.css');
30
+ @import url('./Tab.css');
31
+ @import url('./TabList.css');
32
+ @import url('./TextArea.css');
33
+ @import url('./Tooltip.css');
34
+ @import url('./Tree.css');
35
+ @import url('./TreeChevron.css');
36
+ @import url('./TreeItem.css');
37
+ @import url('./TreeItemDisplay.css');
package/index.d.ts CHANGED
@@ -1,19 +1,15 @@
1
+ export type { ClickOutsideEvent, ClickOutsideEventDetail } from './@types/clickOutside';
2
+ export { applyLightDarkMode } from './actions/applyLightDarkMode';
1
3
  export { clickOutside } from './actions/clickOutside';
2
4
  export { forwardEvents } from './actions/forwardEvents';
3
5
  export { portal } from './actions/portal';
4
6
  export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
7
+ export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
8
+ export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
9
+ export { usingKeyboard } from './mediaQueries/usingKeyboard';
5
10
  export { idGenerator } from './idGenerator';
6
- export { type Theme, type ThemeActionParams } from './theme/types';
7
- export { applyDarkTheme } from './theme/applyDarkTheme';
8
- export { applyLightTheme } from './theme/applyLightTheme';
9
- export { applyTheme } from './theme/applyTheme';
10
- export { darkTheme } from './theme/darkTheme';
11
- export { lightTheme } from './theme/lightTheme';
12
- export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueAccentColors } from './theme/colors';
13
- export { toggleDarkTheme } from './theme/toggleDarkTheme';
14
11
  export type { ButtonVariant, ButtonShape } from './Button.types';
15
- export type { LabelStatus } from './Label.types';
16
- export type { LinkVariant } from './Link.types';
12
+ export type { LabelStatus, LabelVariant } from './Label.types';
17
13
  export type { ListContext } from './List.types';
18
14
  export type { MenuBarContext } from './MenuBar.types';
19
15
  export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
@@ -24,8 +20,7 @@ export type { TextAreaResize } from './TextArea.types';
24
20
  export type { TreeContext } from './Tree.types';
25
21
  export type { TreeItemContext } from './TreeItem.types';
26
22
  export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
27
- export { LABEL_STATUSES } from './Label.constants';
28
- export { LINK_VARIANTS } from './Link.constants';
23
+ export { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
29
24
  export { LIST_CONTEXT_KEY } from './List.constants';
30
25
  export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
31
26
  export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
@@ -33,7 +28,8 @@ export { POPOVER_PLACEMENTS } from './Popover.constants';
33
28
  export { PROGRESS_STATUSES } from './Progress.constants';
34
29
  export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
35
30
  export { TEXT_AREA_RESIZES } from './TextArea.constants';
36
- export { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from './Tree.constants';
31
+ export { TREE_CONTEXT_KEY } from './Tree.constants';
32
+ export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
37
33
  import Button from './Button.svelte';
38
34
  import Callout from './Callout.svelte';
39
35
  import Checkbox from './Checkbox.svelte';
package/index.js CHANGED
@@ -1,23 +1,18 @@
1
1
  // ----- actions ----- //
2
+ export { applyLightDarkMode } from './actions/applyLightDarkMode';
2
3
  export { clickOutside } from './actions/clickOutside';
3
4
  export { forwardEvents } from './actions/forwardEvents';
4
5
  export { portal } from './actions/portal';
5
6
  export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
7
+ // ----- media queries ----- //
8
+ export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
9
+ export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
10
+ export { usingKeyboard } from './mediaQueries/usingKeyboard';
6
11
  // ----- functions ----- //
7
12
  export { idGenerator } from './idGenerator';
8
- // ----- theme ----- //
9
- export {} from './theme/types';
10
- export { applyDarkTheme } from './theme/applyDarkTheme';
11
- export { applyLightTheme } from './theme/applyLightTheme';
12
- export { applyTheme } from './theme/applyTheme';
13
- export { darkTheme } from './theme/darkTheme';
14
- export { lightTheme } from './theme/lightTheme';
15
- export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueAccentColors } from './theme/colors';
16
- export { toggleDarkTheme } from './theme/toggleDarkTheme';
17
13
  // ----- Component constants ----- //
18
14
  export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
19
- export { LABEL_STATUSES } from './Label.constants';
20
- export { LINK_VARIANTS } from './Link.constants';
15
+ export { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
21
16
  export { LIST_CONTEXT_KEY } from './List.constants';
22
17
  export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
23
18
  export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
@@ -25,7 +20,8 @@ export { POPOVER_PLACEMENTS } from './Popover.constants';
25
20
  export { PROGRESS_STATUSES } from './Progress.constants';
26
21
  export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
27
22
  export { TEXT_AREA_RESIZES } from './TextArea.constants';
28
- export { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from './Tree.constants';
23
+ export { TREE_CONTEXT_KEY } from './Tree.constants';
24
+ export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
29
25
  // ----- Components ----- //
30
26
  import Button from './Button.svelte';
31
27
  import Callout from './Callout.svelte';
@@ -0,0 +1,2 @@
1
+ /// <reference types="svelte" />
2
+ export declare const prefersColorSchemeDark: import("svelte/store").Writable<boolean>;
@@ -0,0 +1,10 @@
1
+ import { writable } from 'svelte/store';
2
+ export const prefersColorSchemeDark = writable(false, (set) => {
3
+ const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
4
+ set(matchMedia.matches);
5
+ const mediaChangeHandler = (e) => set(e.matches);
6
+ matchMedia.addEventListener('change', mediaChangeHandler);
7
+ return () => {
8
+ matchMedia.removeEventListener('change', mediaChangeHandler);
9
+ };
10
+ });
@@ -1 +1,2 @@
1
+ /// <reference types="svelte" />
1
2
  export declare const prefersReducedMotion: import("svelte/store").Writable<boolean>;
@@ -1 +1,2 @@
1
+ /// <reference types="svelte" />
1
2
  export declare const usingKeyboard: import("svelte/store").Writable<boolean>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte",
3
- "version": "0.0.31",
3
+ "version": "1.0.1",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern, accessible, and lightweight component library for Svelte.",
6
6
  "license": "MIT",
@@ -19,12 +19,25 @@
19
19
  "typescript",
20
20
  "javascript",
21
21
  "button",
22
+ "callout",
22
23
  "checkbox",
24
+ "colorpicker",
25
+ "dialog",
26
+ "dropdown",
27
+ "input",
28
+ "label",
29
+ "link",
23
30
  "list",
24
31
  "menu",
32
+ "popover",
33
+ "progress",
25
34
  "radio",
26
35
  "select",
36
+ "slider",
37
+ "switch",
38
+ "tabs",
27
39
  "textarea",
40
+ "tooltip",
28
41
  "tree"
29
42
  ],
30
43
  "devDependencies": {
@@ -47,6 +60,7 @@
47
60
  "prettier-plugin-svelte": "^2.10.1",
48
61
  "svelte": "^4.0.0",
49
62
  "svelte-check": "^3.4.3",
63
+ "svelte-preprocess": "^5.0.4",
50
64
  "tslib": "^2.4.1",
51
65
  "typescript": "^5.0.0",
52
66
  "vite": "^4.2.0",
@@ -80,9 +94,7 @@
80
94
  "./Label.constants": "./Label.constants.js",
81
95
  "./Label.svelte": "./Label.svelte",
82
96
  "./Label.types": "./Label.types.js",
83
- "./Link.constants": "./Link.constants.js",
84
97
  "./Link.svelte": "./Link.svelte",
85
- "./Link.types": "./Link.types.js",
86
98
  "./List.constants": "./List.constants.js",
87
99
  "./List.svelte": "./List.svelte",
88
100
  "./List.types": "./List.types.js",
@@ -121,25 +133,121 @@
121
133
  "./Tree.svelte": "./Tree.svelte",
122
134
  "./Tree.types": "./Tree.types.js",
123
135
  "./TreeChevron.svelte": "./TreeChevron.svelte",
136
+ "./TreeItem.constants": "./TreeItem.constants.js",
124
137
  "./TreeItem.svelte": "./TreeItem.svelte",
125
138
  "./TreeItem.types": "./TreeItem.types.js",
126
139
  "./TreeItemDisplay.svelte": "./TreeItemDisplay.svelte",
140
+ "./actions/applyLightDarkMode": "./actions/applyLightDarkMode.js",
127
141
  "./actions/clickOutside": "./actions/clickOutside.js",
128
142
  "./actions/forwardEvents": "./actions/forwardEvents.js",
129
143
  "./actions/portal": "./actions/portal.js",
130
144
  "./actions/trapKeyboardFocus": "./actions/trapKeyboardFocus.js",
145
+ "./css/Button.base.css": "./css/Button.base.css",
146
+ "./css/Button.colorful.css": "./css/Button.colorful.css",
147
+ "./css/Button.css": "./css/Button.css",
148
+ "./css/Button.secondary.colorful.css": "./css/Button.secondary.colorful.css",
149
+ "./css/Button.secondary.css": "./css/Button.secondary.css",
150
+ "./css/Button.shapes.css": "./css/Button.shapes.css",
151
+ "./css/Button.tool.colorful.css": "./css/Button.tool.colorful.css",
152
+ "./css/Button.tool.css": "./css/Button.tool.css",
153
+ "./css/Callout.base.css": "./css/Callout.base.css",
154
+ "./css/Callout.colorful.css": "./css/Callout.colorful.css",
155
+ "./css/Callout.css": "./css/Callout.css",
156
+ "./css/Checkbox.base.css": "./css/Checkbox.base.css",
157
+ "./css/Checkbox.colorful.css": "./css/Checkbox.colorful.css",
158
+ "./css/Checkbox.css": "./css/Checkbox.css",
159
+ "./css/ColorPicker.base.css": "./css/ColorPicker.base.css",
160
+ "./css/ColorPicker.css": "./css/ColorPicker.css",
161
+ "./css/Dialog.base.css": "./css/Dialog.base.css",
162
+ "./css/Dialog.css": "./css/Dialog.css",
163
+ "./css/Dropdown.base.css": "./css/Dropdown.base.css",
164
+ "./css/Dropdown.colorful.css": "./css/Dropdown.colorful.css",
165
+ "./css/Dropdown.css": "./css/Dropdown.css",
166
+ "./css/HexColorSliders.base.css": "./css/HexColorSliders.base.css",
167
+ "./css/HexColorSliders.css": "./css/HexColorSliders.css",
168
+ "./css/HslColorSliders.base.css": "./css/HslColorSliders.base.css",
169
+ "./css/HslColorSliders.css": "./css/HslColorSliders.css",
170
+ "./css/Input.base.css": "./css/Input.base.css",
171
+ "./css/Input.colorful.css": "./css/Input.colorful.css",
172
+ "./css/Input.composed.css": "./css/Input.composed.css",
173
+ "./css/Input.css": "./css/Input.css",
174
+ "./css/Label.base.css": "./css/Label.base.css",
175
+ "./css/Label.boxed.colorful.css": "./css/Label.boxed.colorful.css",
176
+ "./css/Label.boxed.css": "./css/Label.boxed.css",
177
+ "./css/Label.colorful.css": "./css/Label.colorful.css",
178
+ "./css/Label.css": "./css/Label.css",
179
+ "./css/Link.base.css": "./css/Link.base.css",
180
+ "./css/Link.colorful.css": "./css/Link.colorful.css",
181
+ "./css/Link.css": "./css/Link.css",
182
+ "./css/Link.ghost.colorful.css": "./css/Link.ghost.colorful.css",
183
+ "./css/Link.ghost.css": "./css/Link.ghost.css",
184
+ "./css/Link.undecorated.colorful.css": "./css/Link.undecorated.colorful.css",
185
+ "./css/Link.undecorated.css": "./css/Link.undecorated.css",
186
+ "./css/List.base.css": "./css/List.base.css",
187
+ "./css/List.css": "./css/List.css",
188
+ "./css/ListItem.base.css": "./css/ListItem.base.css",
189
+ "./css/ListItem.css": "./css/ListItem.css",
190
+ "./css/Menu.base.css": "./css/Menu.base.css",
191
+ "./css/Menu.css": "./css/Menu.css",
192
+ "./css/MenuBar.base.css": "./css/MenuBar.base.css",
193
+ "./css/MenuBar.css": "./css/MenuBar.css",
194
+ "./css/MenuButton.base.css": "./css/MenuButton.base.css",
195
+ "./css/MenuButton.css": "./css/MenuButton.css",
196
+ "./css/MenuItem.base.css": "./css/MenuItem.base.css",
197
+ "./css/MenuItem.css": "./css/MenuItem.css",
198
+ "./css/MenuItemDisplay.base.css": "./css/MenuItemDisplay.base.css",
199
+ "./css/MenuItemDisplay.css": "./css/MenuItemDisplay.css",
200
+ "./css/MenuSeparator.base.css": "./css/MenuSeparator.base.css",
201
+ "./css/MenuSeparator.css": "./css/MenuSeparator.css",
202
+ "./css/Popover copy.css": "./css/Popover copy.css",
203
+ "./css/Popover.css": "./css/Popover.css",
204
+ "./css/Progress.base.css": "./css/Progress.base.css",
205
+ "./css/Progress.css": "./css/Progress.css",
206
+ "./css/Radio.base.css": "./css/Radio.base.css",
207
+ "./css/Radio.colorful.css": "./css/Radio.colorful.css",
208
+ "./css/Radio.css": "./css/Radio.css",
209
+ "./css/RgbColorSliders.base.css": "./css/RgbColorSliders.base.css",
210
+ "./css/RgbColorSliders.css": "./css/RgbColorSliders.css",
211
+ "./css/Select.base.css": "./css/Select.base.css",
212
+ "./css/Select.colorful.css": "./css/Select.colorful.css",
213
+ "./css/Select.composed.css": "./css/Select.composed.css",
214
+ "./css/Select.css": "./css/Select.css",
215
+ "./css/Slider.base.css": "./css/Slider.base.css",
216
+ "./css/Slider.colorful.css": "./css/Slider.colorful.css",
217
+ "./css/Slider.composed.css": "./css/Slider.composed.css",
218
+ "./css/Slider.css": "./css/Slider.css",
219
+ "./css/Switch.base.css": "./css/Switch.base.css",
220
+ "./css/Switch.colorful.css": "./css/Switch.colorful.css",
221
+ "./css/Switch.css": "./css/Switch.css",
222
+ "./css/Tab.base.css": "./css/Tab.base.css",
223
+ "./css/Tab.colorful.css": "./css/Tab.colorful.css",
224
+ "./css/Tab.css": "./css/Tab.css",
225
+ "./css/TabList.base.css": "./css/TabList.base.css",
226
+ "./css/TabList.css": "./css/TabList.css",
227
+ "./css/TextArea.base.css": "./css/TextArea.base.css",
228
+ "./css/TextArea.colorful.css": "./css/TextArea.colorful.css",
229
+ "./css/TextArea.composed.css": "./css/TextArea.composed.css",
230
+ "./css/TextArea.css": "./css/TextArea.css",
231
+ "./css/Tooltip.base.css": "./css/Tooltip.base.css",
232
+ "./css/Tooltip.css": "./css/Tooltip.css",
233
+ "./css/Tree.base.css": "./css/Tree.base.css",
234
+ "./css/Tree.composed.css": "./css/Tree.composed.css",
235
+ "./css/Tree.css": "./css/Tree.css",
236
+ "./css/TreeChevron.base.css": "./css/TreeChevron.base.css",
237
+ "./css/TreeChevron.css": "./css/TreeChevron.css",
238
+ "./css/TreeItem.base.css": "./css/TreeItem.base.css",
239
+ "./css/TreeItem.css": "./css/TreeItem.css",
240
+ "./css/TreeItemDisplay.base.css": "./css/TreeItemDisplay.base.css",
241
+ "./css/TreeItemDisplay.colorful.css": "./css/TreeItemDisplay.colorful.css",
242
+ "./css/TreeItemDisplay.css": "./css/TreeItemDisplay.css",
243
+ "./css/dark-mode.css": "./css/dark-mode.css",
244
+ "./css/light-mode.css": "./css/light-mode.css",
245
+ "./css/sterling.css": "./css/sterling.css",
131
246
  "./idGenerator": "./idGenerator.js",
132
247
  ".": "./index.js",
133
- "./stores/prefersReducedMotion": "./stores/prefersReducedMotion.js",
134
- "./stores/usingKeyboard": "./stores/usingKeyboard.js",
135
- "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
136
- "./theme/applyLightTheme": "./theme/applyLightTheme.js",
137
- "./theme/applyTheme": "./theme/applyTheme.js",
138
- "./theme/colors": "./theme/colors.js",
139
- "./theme/darkTheme": "./theme/darkTheme.js",
140
- "./theme/lightTheme": "./theme/lightTheme.js",
141
- "./theme/toggleDarkTheme": "./theme/toggleDarkTheme.js",
142
- "./theme/types": "./theme/types.js"
248
+ "./mediaQueries/prefersColorSchemeDark": "./mediaQueries/prefersColorSchemeDark.js",
249
+ "./mediaQueries/prefersReducedMotion": "./mediaQueries/prefersReducedMotion.js",
250
+ "./mediaQueries/usingKeyboard": "./mediaQueries/usingKeyboard.js"
143
251
  },
144
252
  "svelte": "./index.js"
145
253
  }
@@ -1 +0,0 @@
1
- export declare const LINK_VARIANTS: string[];
package/Link.constants.js DELETED
@@ -1 +0,0 @@
1
- export const LINK_VARIANTS = ['regular', 'ghost', 'undecorated'];
package/Link.types.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import type { LINK_VARIANTS } from './Link.constants';
2
- type LinkVariantTuple = typeof LINK_VARIANTS;
3
- export type LinkVariant = LinkVariantTuple[number];
4
- export {};
package/Link.types.js DELETED
@@ -1 +0,0 @@
1
- export {};
@@ -1,7 +0,0 @@
1
- import type { ThemeActionParams } from './types';
2
- /**
3
- * Applies the default dark theme.
4
- */
5
- export declare const applyDarkTheme: (node: HTMLElement, params?: Omit<ThemeActionParams, 'theme' | 'context'>) => {
6
- update: (params?: ThemeActionParams | undefined) => void;
7
- };
@@ -1,11 +0,0 @@
1
- import { applyTheme } from './applyTheme';
2
- import { darkTheme } from './darkTheme';
3
- /**
4
- * Applies the default dark theme.
5
- */
6
- export const applyDarkTheme = (node, params) => {
7
- return applyTheme(node, {
8
- ...params,
9
- theme: darkTheme
10
- });
11
- };
@@ -1,7 +0,0 @@
1
- import type { ThemeActionParams } from './types';
2
- /**
3
- * Applies the default light theme.
4
- */
5
- export declare const applyLightTheme: (node: HTMLElement, params?: Omit<ThemeActionParams, 'theme' | 'context'>) => {
6
- update: (params?: ThemeActionParams | undefined) => void;
7
- };
@@ -1,11 +0,0 @@
1
- import { applyTheme } from './applyTheme';
2
- import { lightTheme } from './lightTheme';
3
- /**
4
- * Applies the default light theme.
5
- */
6
- export const applyLightTheme = (node, params) => {
7
- return applyTheme(node, {
8
- ...params,
9
- theme: lightTheme
10
- });
11
- };
@@ -1,7 +0,0 @@
1
- import type { ThemeActionParams } from './types';
2
- /**
3
- * Applies a theme.
4
- */
5
- export declare const applyTheme: (node: HTMLElement, params: ThemeActionParams) => {
6
- update: (params?: ThemeActionParams) => void;
7
- };
@@ -1,20 +0,0 @@
1
- const _applyTheme = (node, theme) => {
2
- Object.keys(theme).map((key) => {
3
- node.style.setProperty(`--${key}`, theme[key] ? `${theme[key]}` : null);
4
- });
5
- };
6
- /**
7
- * Applies a theme.
8
- */
9
- export const applyTheme = (node, params) => {
10
- const element = params.atDocumentRoot ? document.documentElement : node;
11
- _applyTheme(element, params.theme);
12
- return {
13
- update: (params) => {
14
- if (params) {
15
- const element = params.atDocumentRoot ? document.documentElement : node;
16
- _applyTheme(element, params?.theme);
17
- }
18
- }
19
- };
20
- };
package/theme/colors.d.ts DELETED
@@ -1,54 +0,0 @@
1
- export declare const neutralColors: Record<string, string>;
2
- /**
3
- * Status colors for a light theme.
4
- * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
5
- */
6
- export declare const lightStatusColors: {
7
- info: {
8
- backgroundColor: string;
9
- borderColor: string;
10
- color: string;
11
- };
12
- success: {
13
- backgroundColor: string;
14
- borderColor: string;
15
- color: string;
16
- };
17
- warning: {
18
- backgroundColor: string;
19
- borderColor: string;
20
- color: string;
21
- };
22
- error: {
23
- backgroundColor: string;
24
- borderColor: string;
25
- color: string;
26
- };
27
- };
28
- /**
29
- * Status colors for a dark theme.
30
- * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
31
- */
32
- export declare const darkStatusColors: {
33
- info: {
34
- backgroundColor: string;
35
- borderColor: string;
36
- color: string;
37
- };
38
- success: {
39
- backgroundColor: string;
40
- borderColor: string;
41
- color: string;
42
- };
43
- warning: {
44
- backgroundColor: string;
45
- borderColor: string;
46
- color: string;
47
- };
48
- error: {
49
- backgroundColor: string;
50
- borderColor: string;
51
- color: string;
52
- };
53
- };
54
- export declare const blueColors: Record<string, string>;
package/theme/colors.js DELETED
@@ -1,82 +0,0 @@
1
- export const neutralColors = {
2
- color0: 'hsl(0, 0%, 0%)',
3
- color1: 'hsl(0, 0%, 12%)',
4
- color2: 'hsl(0, 0%, 15%)',
5
- color3: 'hsl(0, 0%, 20%)',
6
- color4: 'hsl(0, 0%, 30%)',
7
- color5: 'hsl(0, 0%, 45%)',
8
- color6: 'hsl(0, 0%, 60%)',
9
- color7: 'hsl(0, 0%, 75%)',
10
- color8: 'hsl(0, 0%, 85%)',
11
- color9: 'hsl(0, 0%, 92%)',
12
- color10: 'hsl(0, 0%, 96%)',
13
- color11: 'hsl(0, 0%, 98%)',
14
- color12: 'hsl(0, 0%, 100%)'
15
- };
16
- /**
17
- * Status colors for a light theme.
18
- * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
19
- */
20
- export const lightStatusColors = {
21
- info: {
22
- backgroundColor: 'hsl(198, 100%, 90%)',
23
- borderColor: 'hsl(198, 100%, 40%)',
24
- color: 'hsl(198, 100%, 40%)'
25
- },
26
- success: {
27
- backgroundColor: 'hsl(146, 100%, 90%)',
28
- borderColor: 'hsl(146, 100%, 30%)',
29
- color: 'hsl(146, 80%, 25%)'
30
- },
31
- warning: {
32
- backgroundColor: 'hsl(39, 100%, 80%)',
33
- borderColor: 'hsl(39, 100%, 45%)',
34
- color: 'hsl(39, 100%, 25%)'
35
- },
36
- error: {
37
- backgroundColor: 'hsl(5, 100%, 90%)',
38
- borderColor: 'hsl(5, 100%, 40%)',
39
- color: 'hsl(5, 80%, 40%)'
40
- }
41
- };
42
- /**
43
- * Status colors for a dark theme.
44
- * These are carefully chosen colors to meet the minimum 4.5:1 accessibility contrast ratio.
45
- */
46
- export const darkStatusColors = {
47
- info: {
48
- backgroundColor: 'hsl(198, 100%, 10%)',
49
- borderColor: 'hsl(198, 100%, 40%)',
50
- color: 'hsl(198, 80%, 50%)'
51
- },
52
- success: {
53
- backgroundColor: 'hsl(146, 100%, 10%)',
54
- borderColor: 'hsl(146, 100%, 30%)',
55
- color: 'hsl(146, 100%, 40%)'
56
- },
57
- warning: {
58
- backgroundColor: 'hsl(39, 100%, 10%)',
59
- borderColor: 'hsl(39, 100%, 45%)',
60
- color: 'hsl(39, 100%, 50%)'
61
- },
62
- error: {
63
- backgroundColor: 'hsl(5, 100%, 10%)',
64
- borderColor: 'hsl(5, 100%, 40%)',
65
- color: 'hsl(5, 100%, 50%)'
66
- }
67
- };
68
- export const blueColors = {
69
- color0: 'hsl(204, 100%, 0%)',
70
- color1: 'hsl(204, 100%, 18%)',
71
- color2: 'hsl(204, 100%, 25%)',
72
- color3: 'hsl(204, 100%, 30%)',
73
- color4: 'hsl(204, 100%, 35%)',
74
- color5: 'hsl(204, 100%, 42%)',
75
- color6: 'hsl(204, 100%, 50%)',
76
- color7: 'hsl(204, 100%, 60%)',
77
- color8: 'hsl(204, 100%, 70%)',
78
- color9: 'hsl(204, 100%, 80%)',
79
- color10: 'hsl(204, 100%, 90%)',
80
- color11: 'hsl(204, 100%, 98%)',
81
- color12: 'hsl(204, 100%, 100%)'
82
- };
@@ -1,2 +0,0 @@
1
- import type { Theme } from './types';
2
- export declare const darkTheme: Theme;