@marianmeres/stuic 3.0.0 → 3.0.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 (156) hide show
  1. package/dist/actions/index.d.ts +1 -0
  2. package/dist/actions/index.js +1 -0
  3. package/dist/actions/typeahead.svelte.d.ts +53 -0
  4. package/dist/actions/typeahead.svelte.js +328 -0
  5. package/dist/base.css +17 -0
  6. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +4 -3
  7. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts +4 -3
  8. package/dist/components/AlertConfirmPrompt/Current.svelte +1 -2
  9. package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts +0 -1
  10. package/dist/components/AlertConfirmPrompt/index.css +47 -43
  11. package/dist/components/AssetsPreview/AssetsPreview.svelte +0 -1
  12. package/dist/components/AssetsPreview/AssetsPreview.svelte.d.ts +0 -1
  13. package/dist/components/AssetsPreview/index.css +31 -29
  14. package/dist/components/Avatar/Avatar.svelte +0 -1
  15. package/dist/components/Avatar/Avatar.svelte.d.ts +0 -1
  16. package/dist/components/Avatar/index.css +87 -85
  17. package/dist/components/Backdrop/Backdrop.svelte +0 -1
  18. package/dist/components/Backdrop/Backdrop.svelte.d.ts +0 -1
  19. package/dist/components/Backdrop/index.css +15 -13
  20. package/dist/components/Button/Button.svelte +0 -1
  21. package/dist/components/Button/Button.svelte.d.ts +0 -1
  22. package/dist/components/Button/index.css +431 -429
  23. package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte +0 -1
  24. package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte.d.ts +0 -1
  25. package/dist/components/ButtonGroupRadio/index.css +123 -117
  26. package/dist/components/Collapsible/index.css +17 -15
  27. package/dist/components/CommandMenu/CommandMenu.svelte +7 -4
  28. package/dist/components/CommandMenu/CommandMenu.svelte.d.ts +0 -1
  29. package/dist/components/CommandMenu/index.css +27 -25
  30. package/dist/components/DismissibleMessage/DismissibleMessage.svelte +0 -2
  31. package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts +0 -1
  32. package/dist/components/DismissibleMessage/index.css +116 -110
  33. package/dist/components/DropdownMenu/DropdownMenu.svelte +317 -74
  34. package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts +19 -1
  35. package/dist/components/DropdownMenu/index.css +236 -170
  36. package/dist/components/DropdownMenu/index.d.ts +1 -1
  37. package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte +3 -1
  38. package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte.d.ts +1 -0
  39. package/dist/components/Input/FieldInput.svelte +8 -0
  40. package/dist/components/Input/FieldInput.svelte.d.ts +2 -0
  41. package/dist/components/Input/FieldOptions.svelte +1 -1
  42. package/dist/components/Input/index.css +411 -398
  43. package/dist/components/KbdShortcut/KbdShortcut.svelte +4 -12
  44. package/dist/components/KbdShortcut/README.md +34 -0
  45. package/dist/components/KbdShortcut/index.css +55 -0
  46. package/dist/components/ListItemButton/ListItemButton.svelte +0 -1
  47. package/dist/components/ListItemButton/ListItemButton.svelte.d.ts +0 -1
  48. package/dist/components/ListItemButton/index.css +118 -116
  49. package/dist/components/Modal/Modal.svelte +0 -1
  50. package/dist/components/Modal/Modal.svelte.d.ts +0 -1
  51. package/dist/components/Modal/index.css +18 -16
  52. package/dist/components/ModalDialog/index.css +29 -27
  53. package/dist/components/Nav/Nav.svelte +732 -0
  54. package/dist/components/Nav/Nav.svelte.d.ts +110 -0
  55. package/dist/components/Nav/README.md +334 -0
  56. package/dist/components/Nav/index.css +318 -0
  57. package/dist/components/Nav/index.d.ts +1 -0
  58. package/dist/components/Nav/index.js +1 -0
  59. package/dist/components/Notifications/Notifications.svelte +2 -3
  60. package/dist/components/Notifications/Notifications.svelte.d.ts +0 -1
  61. package/dist/components/Notifications/index.css +158 -158
  62. package/dist/components/Notifications/notifications-stack.svelte.d.ts +4 -0
  63. package/dist/components/Notifications/notifications-stack.svelte.js +8 -0
  64. package/dist/components/Progress/Progress.svelte +4 -2
  65. package/dist/components/Progress/Progress.svelte.d.ts +1 -0
  66. package/dist/components/Progress/README.md +86 -15
  67. package/dist/components/Progress/_internal/Bar.svelte +4 -15
  68. package/dist/components/Progress/_internal/Bar.svelte.d.ts +1 -1
  69. package/dist/components/Progress/_internal/Circle.svelte +30 -2
  70. package/dist/components/Progress/_internal/Circle.svelte.d.ts +1 -0
  71. package/dist/components/Progress/index.css +47 -1
  72. package/dist/components/Skeleton/README.md +152 -0
  73. package/dist/components/Skeleton/Skeleton.svelte +6 -7
  74. package/dist/components/Skeleton/Skeleton.svelte.d.ts +0 -1
  75. package/dist/components/Skeleton/index.css +73 -43
  76. package/dist/components/Spinner/README.md +149 -37
  77. package/dist/components/Spinner/Spinner.svelte +14 -38
  78. package/dist/components/Spinner/Spinner.svelte.d.ts +2 -1
  79. package/dist/components/Spinner/SpinnerCircle.svelte +6 -34
  80. package/dist/components/Spinner/SpinnerCircle.svelte.d.ts +1 -0
  81. package/dist/components/Spinner/SpinnerCircleOscillate.svelte +10 -5
  82. package/dist/components/Spinner/SpinnerUnicode.svelte +3 -1
  83. package/dist/components/Spinner/SpinnerUnicode.svelte.d.ts +1 -0
  84. package/dist/components/Spinner/index.css +104 -0
  85. package/dist/components/Switch/README.md +34 -18
  86. package/dist/components/Switch/Switch.svelte +24 -46
  87. package/dist/components/Switch/Switch.svelte.d.ts +4 -2
  88. package/dist/components/Switch/index.css +120 -2
  89. package/dist/components/Switch/index.d.ts +1 -2
  90. package/dist/components/Switch/index.js +1 -2
  91. package/dist/components/TabbedMenu/README.md +28 -17
  92. package/dist/components/TabbedMenu/TabbedMenu.svelte +5 -46
  93. package/dist/components/TabbedMenu/TabbedMenu.svelte.d.ts +0 -1
  94. package/dist/components/TabbedMenu/index.css +85 -3
  95. package/dist/components/ThemePreview/ThemePreview.svelte +86 -33
  96. package/dist/components/ThemePreview/ThemePreview.svelte.d.ts +3 -1
  97. package/dist/components/ThemePreview/index.css +24 -8
  98. package/dist/components/TwCheck/README.md +32 -13
  99. package/dist/components/TwCheck/TwCheck.svelte +11 -9
  100. package/dist/components/TwCheck/TwCheck.svelte.d.ts +0 -1
  101. package/dist/components/TwCheck/index.css +14 -0
  102. package/dist/components/TypeaheadInput/TypeaheadInput.svelte +19 -187
  103. package/dist/components/TypeaheadInput/TypeaheadInput.svelte.d.ts +4 -2
  104. package/dist/icons/index.d.ts +1 -0
  105. package/dist/icons/index.js +1 -0
  106. package/dist/index.css +44 -39
  107. package/dist/index.d.ts +1 -0
  108. package/dist/index.js +1 -0
  109. package/dist/themes/blue-orange.css +246 -156
  110. package/dist/themes/blue-orange.js +24 -0
  111. package/dist/themes/cyan-red.css +246 -156
  112. package/dist/themes/cyan-red.js +24 -0
  113. package/dist/themes/cyan-slate.css +246 -156
  114. package/dist/themes/cyan-slate.js +25 -1
  115. package/dist/themes/emerald-pink.css +246 -156
  116. package/dist/themes/emerald-pink.js +25 -1
  117. package/dist/themes/fuchsia-emerald.css +246 -156
  118. package/dist/themes/fuchsia-emerald.js +25 -1
  119. package/dist/themes/gray.css +246 -156
  120. package/dist/themes/gray.js +24 -0
  121. package/dist/themes/indigo-amber.css +246 -156
  122. package/dist/themes/indigo-amber.js +26 -2
  123. package/dist/themes/neutral.css +246 -156
  124. package/dist/themes/neutral.js +24 -0
  125. package/dist/themes/pink-emerald.css +246 -156
  126. package/dist/themes/pink-emerald.js +25 -1
  127. package/dist/themes/pink-teal.css +253 -0
  128. package/dist/themes/pink-teal.d.ts +6 -0
  129. package/dist/themes/pink-teal.js +175 -0
  130. package/dist/themes/purple-yellow.css +246 -156
  131. package/dist/themes/purple-yellow.js +24 -0
  132. package/dist/themes/rainbow.css +246 -156
  133. package/dist/themes/rainbow.js +25 -1
  134. package/dist/themes/red-blue.css +246 -156
  135. package/dist/themes/red-blue.js +24 -0
  136. package/dist/themes/red-cyan.css +246 -156
  137. package/dist/themes/red-cyan.js +24 -0
  138. package/dist/themes/red-sky.css +253 -0
  139. package/dist/themes/red-sky.d.ts +6 -0
  140. package/dist/themes/red-sky.js +175 -0
  141. package/dist/themes/rose-teal.css +246 -156
  142. package/dist/themes/rose-teal.js +24 -0
  143. package/dist/themes/sky-amber.css +246 -156
  144. package/dist/themes/sky-amber.js +26 -2
  145. package/dist/themes/slate-cyan.css +246 -156
  146. package/dist/themes/slate-cyan.js +25 -1
  147. package/dist/themes/teal-rose.css +246 -156
  148. package/dist/themes/teal-rose.js +24 -0
  149. package/dist/themes/violet-lime.css +246 -156
  150. package/dist/themes/violet-lime.js +27 -3
  151. package/dist/utils/design-tokens.d.ts +1 -1
  152. package/dist/utils/design-tokens.js +44 -3
  153. package/dist/utils/storage-abstraction.js +1 -1
  154. package/package.json +11 -28
  155. package/dist/components/Switch/SwitchButton.svelte +0 -134
  156. package/dist/components/Switch/SwitchButton.svelte.d.ts +0 -21
package/dist/components/DismissibleMessage/index.css CHANGED
@@ -12,114 +12,120 @@
12
12
  --stuic-dismissible-message-transition: 150ms;
13
13
  }
14
14
 
15
- /* =============================================================================
16
- BASE STYLES
17
- ============================================================================= */
18
-
19
- .stuic-dismissible-message {
20
- display: flex;
21
- align-items: center;
22
- border-width: var(--stuic-dismissible-message-border-width);
23
- border-style: solid;
24
- border-radius: var(--stuic-dismissible-message-radius);
25
- transition:
26
- background var(--stuic-dismissible-message-transition),
27
- border-color var(--stuic-dismissible-message-transition);
28
-
29
- /* Colors via internal vars set by intent */
30
- background: var(--_bg);
31
- color: var(--_text);
32
- border-color: var(--_border);
33
- }
34
-
35
- /* Content area */
36
- .stuic-dismissible-message > .content {
37
- flex: 1;
38
- padding: var(--stuic-dismissible-message-padding-y)
39
- var(--stuic-dismissible-message-padding-x);
40
- }
41
-
42
- /* Icon container (left side) */
43
- .stuic-dismissible-message > .icon {
44
- display: flex;
45
- align-items: center;
46
- justify-content: center;
47
- flex-shrink: 0;
48
- padding-left: var(--stuic-dismissible-message-padding-x);
49
- color: var(--_text);
50
- opacity: 0.85;
51
- }
52
-
53
- .stuic-dismissible-message > .icon svg {
54
- width: 1.5rem;
55
- height: 1.5rem;
56
- }
57
-
58
- /* Dismiss button container */
59
- .stuic-dismissible-message > .dismiss {
60
- display: flex;
61
- align-items: center;
62
- justify-content: center;
63
- padding: calc(var(--stuic-dismissible-message-padding-y) * 0.75);
64
- }
65
-
66
- /* Dismiss button inherits message text color */
67
- .stuic-dismissible-message > .dismiss .stuic-button {
68
- color: var(--_text);
69
- }
70
-
71
- /* =============================================================================
72
- DEFAULT (NO INTENT): NEUTRAL MUTED APPEARANCE
73
- ============================================================================= */
74
-
75
- .stuic-dismissible-message:not([data-intent]) {
76
- --_bg: var(--stuic-color-muted);
77
- --_text: var(--stuic-color-muted-foreground);
78
- --_border: var(--stuic-color-border);
79
- }
80
-
81
- /* =============================================================================
82
- INTENT COLOR MAPPING (SOFT STYLE)
83
- Each intent uses a soft/tinted appearance appropriate for messages.
84
- ============================================================================= */
85
-
86
- /* Destructive: error messages */
87
- .stuic-dismissible-message[data-intent="destructive"] {
88
- --_bg: color-mix(in srgb, var(--stuic-color-destructive) 10%, transparent);
89
- --_text: var(--stuic-color-destructive);
90
- --_border: color-mix(in srgb, var(--stuic-color-destructive) 30%, transparent);
91
- }
92
-
93
- /* Warning: caution messages */
94
- .stuic-dismissible-message[data-intent="warning"] {
95
- --_bg: color-mix(in srgb, var(--stuic-color-warning) 10%, transparent);
96
- --_text: var(--stuic-color-warning);
97
- --_border: color-mix(in srgb, var(--stuic-color-warning) 30%, transparent);
98
- }
99
-
100
- /* Success: confirmation messages */
101
- .stuic-dismissible-message[data-intent="success"] {
102
- --_bg: color-mix(in srgb, var(--stuic-color-success) 10%, transparent);
103
- --_text: var(--stuic-color-success);
104
- --_border: color-mix(in srgb, var(--stuic-color-success) 30%, transparent);
105
- }
106
-
107
- /* Info: informational messages */
108
- .stuic-dismissible-message[data-intent="info"] {
109
- --_bg: color-mix(in srgb, var(--stuic-color-info) 10%, transparent);
110
- --_text: var(--stuic-color-info);
111
- --_border: color-mix(in srgb, var(--stuic-color-info) 30%, transparent);
112
- }
113
-
114
- /* =============================================================================
115
- DARK MODE ADJUSTMENTS
116
- Increase color intensity for better visibility in dark mode.
117
- ============================================================================= */
118
-
119
- .dark .stuic-dismissible-message[data-intent="destructive"],
120
- .dark .stuic-dismissible-message[data-intent="warning"],
121
- .dark .stuic-dismissible-message[data-intent="success"],
122
- .dark .stuic-dismissible-message[data-intent="info"] {
123
- --_bg: color-mix(in srgb, var(--_text) 20%, transparent);
124
- --_border: color-mix(in srgb, var(--_text) 40%, transparent);
15
+ @layer components {
16
+ /* =============================================================================
17
+ BASE STYLES
18
+ ============================================================================= */
19
+
20
+ .stuic-dismissible-message {
21
+ display: flex;
22
+ align-items: center;
23
+ border-width: var(--stuic-dismissible-message-border-width);
24
+ border-style: solid;
25
+ border-radius: var(--stuic-dismissible-message-radius);
26
+ transition:
27
+ background var(--stuic-dismissible-message-transition),
28
+ border-color var(--stuic-dismissible-message-transition);
29
+
30
+ /* Colors via internal vars set by intent */
31
+ background: var(--_bg);
32
+ color: var(--_text);
33
+ border-color: var(--_border);
34
+ }
35
+
36
+ /* Content area */
37
+ .stuic-dismissible-message > .content {
38
+ flex: 1;
39
+ padding: var(--stuic-dismissible-message-padding-y)
40
+ var(--stuic-dismissible-message-padding-x);
41
+ }
42
+
43
+ /* Icon container (left side) */
44
+ .stuic-dismissible-message > .icon {
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ flex-shrink: 0;
49
+ padding-left: var(--stuic-dismissible-message-padding-x);
50
+ color: var(--_text);
51
+ opacity: 0.85;
52
+ }
53
+
54
+ .stuic-dismissible-message > .icon svg {
55
+ width: 1.5rem;
56
+ height: 1.5rem;
57
+ }
58
+
59
+ /* Dismiss button container */
60
+ .stuic-dismissible-message > .dismiss {
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: center;
64
+ padding: calc(var(--stuic-dismissible-message-padding-y) * 0.75);
65
+ }
66
+
67
+ /* Dismiss button inherits message text color */
68
+ .stuic-dismissible-message > .dismiss .stuic-button {
69
+ color: var(--_text);
70
+ }
71
+
72
+ /* =============================================================================
73
+ DEFAULT (NO INTENT): NEUTRAL MUTED APPEARANCE
74
+ ============================================================================= */
75
+
76
+ .stuic-dismissible-message:not([data-intent]) {
77
+ --_bg: var(--stuic-color-muted);
78
+ --_text: var(--stuic-color-muted-foreground);
79
+ --_border: var(--stuic-color-border);
80
+ }
81
+
82
+ /* =============================================================================
83
+ INTENT COLOR MAPPING (SOFT STYLE)
84
+ Each intent uses a soft/tinted appearance appropriate for messages.
85
+ ============================================================================= */
86
+
87
+ /* Destructive: error messages */
88
+ .stuic-dismissible-message[data-intent="destructive"] {
89
+ --_bg: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
90
+ /* --_text: var(--stuic-color-destructive); */
91
+ --_text: color-mix(in srgb, var(--stuic-color-destructive), black 15%);
92
+ --_border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
93
+ }
94
+
95
+ /* Warning: caution messages */
96
+ .stuic-dismissible-message[data-intent="warning"] {
97
+ --_bg: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
98
+ /* --_text: var(--stuic-color-warning); */
99
+ --_text: color-mix(in srgb, var(--stuic-color-warning), black 15%);
100
+ --_border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
101
+ }
102
+
103
+ /* Success: confirmation messages */
104
+ .stuic-dismissible-message[data-intent="success"] {
105
+ --_bg: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
106
+ /* --_text: var(--stuic-color-success); */
107
+ --_text: color-mix(in srgb, var(--stuic-color-success), black 15%);
108
+ --_border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
109
+ }
110
+
111
+ /* Info: informational messages */
112
+ .stuic-dismissible-message[data-intent="info"] {
113
+ --_bg: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
114
+ /* --_text: var(--stuic-color-info); */
115
+ --_text: color-mix(in srgb, var(--stuic-color-info), black 15%);
116
+ --_border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
117
+ }
118
+
119
+ /* =============================================================================
120
+ DARK MODE ADJUSTMENTS
121
+ Increase color intensity for better visibility in dark mode.
122
+ ============================================================================= */
123
+
124
+ .dark .stuic-dismissible-message[data-intent="destructive"],
125
+ .dark .stuic-dismissible-message[data-intent="warning"],
126
+ .dark .stuic-dismissible-message[data-intent="success"],
127
+ .dark .stuic-dismissible-message[data-intent="info"] {
128
+ --_bg: color-mix(in srgb, var(--_text) 20%, var(--stuic-color-background));
129
+ --_border: color-mix(in srgb, var(--_text) 40%, var(--stuic-color-background));
130
+ }
125
131
  }