lapikit 0.6.9 → 0.6.11

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 (5) hide show
  1. package/dist/components/avatar/avatar.svelte +5 -2
  2. package/dist/components/dropdown/dropdown.svelte +10 -17
  3. package/dist/components/popover/popover.svelte +10 -17
  4. package/dist/components/tooltip/tooltip.svelte +9 -14
  5. package/package.json +2 -2
package/dist/components/avatar/avatar.svelte CHANGED
@@ -79,14 +79,17 @@
79
79
 
80
80
  <style>
81
81
  .kit-avatar {
82
+ --kit-avatar-bg: var(--kit-color-surface-3);
83
+ --kit-avatar-fg: var(--kit-color-text);
84
+
82
85
  display: inline-flex;
83
86
  align-items: center;
84
87
  justify-content: center;
85
88
  width: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
86
89
  height: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
87
90
  overflow: hidden;
88
- background: var(--kit-color-surface-3);
89
- color: var(--kit-color-text);
91
+ background: var(--kit-avatar-bg);
92
+ color: var(--kit-avatar-fg);
90
93
  border-radius: var(--kit-avatar-radius);
91
94
  border: 0;
92
95
  font-weight: 600;
package/dist/components/dropdown/dropdown.svelte CHANGED
@@ -63,10 +63,6 @@
63
63
  let activatorRef = $state<HTMLElement | PointerEvent | null>(null);
64
64
  let open = $state(false);
65
65
  let axis = $state(positioner.values);
66
- let innerHeight = $state(0);
67
- let innerWidth = $state(0);
68
- let scrollX = $state(0);
69
- let scrollY = $state(0);
70
66
  let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
71
67
 
72
68
  const clearHoverTimeout = () => {
@@ -131,18 +127,17 @@
131
127
  });
132
128
 
133
129
  $effect(() => {
134
- if (
135
- open &&
136
- contentRef &&
137
- activatorRef &&
138
- (scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
139
- ) {
140
- updatePosition();
141
- }
142
- });
130
+ if (!open) return;
143
131
 
144
- $effect(() => {
145
- if (scrollX || scrollY) open = false;
132
+ const close = () => (open = false);
133
+
134
+ window.addEventListener('scroll', close, { passive: true });
135
+ window.addEventListener('resize', updatePosition);
136
+
137
+ return () => {
138
+ window.removeEventListener('scroll', close);
139
+ window.removeEventListener('resize', updatePosition);
140
+ };
146
141
  });
147
142
 
148
143
  $effect(() => {
@@ -154,8 +149,6 @@
154
149
  });
155
150
  </script>
156
151
 
157
- <svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
158
-
159
152
  {@render activator?.(model, (state, element) => handleMouseEvent(state, element))}
160
153
 
161
154
  {#if open}
package/dist/components/popover/popover.svelte CHANGED
@@ -50,10 +50,6 @@
50
50
  let contentRef = $state<HTMLElement | null>(null);
51
51
  let activatorRef = $state<HTMLElement | null>(null);
52
52
  let axis = $state(positioner.values);
53
- let innerHeight = $state(0);
54
- let innerWidth = $state(0);
55
- let scrollX = $state(0);
56
- let scrollY = $state(0);
57
53
 
58
54
  const handleToggle = (element: HTMLElement | null) => {
59
55
  if (element === null) return;
@@ -78,18 +74,17 @@
78
74
  });
79
75
 
80
76
  $effect(() => {
81
- if (
82
- open &&
83
- contentRef &&
84
- activatorRef &&
85
- (scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
86
- ) {
87
- updatePosition();
88
- }
89
- });
77
+ if (!open) return;
90
78
 
91
- $effect(() => {
92
- if (scrollX || scrollY) open = false;
79
+ const close = () => (open = false);
80
+
81
+ window.addEventListener('scroll', close, { passive: true });
82
+ window.addEventListener('resize', updatePosition);
83
+
84
+ return () => {
85
+ window.removeEventListener('scroll', close);
86
+ window.removeEventListener('resize', updatePosition);
87
+ };
93
88
  });
94
89
 
95
90
  $effect(() => {
@@ -107,8 +102,6 @@
107
102
  );
108
103
  </script>
109
104
 
110
- <svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
111
-
112
105
  {@render activator?.(model)}
113
106
 
114
107
  {#if open}
package/dist/components/tooltip/tooltip.svelte CHANGED
@@ -72,10 +72,6 @@
72
72
  let tooltipRef = $state<HTMLElement | null>(null);
73
73
  let axis = $state(positioner.values);
74
74
  let timer = $state<ReturnType<typeof setTimeout> | null>(null);
75
- let innerHeight = $state(0);
76
- let innerWidth = $state(0);
77
- let scrollX = $state(0);
78
- let scrollY = $state(0);
79
75
  const tooltipId = `kit-tooltip-${Math.random().toString(36).slice(2, 10)}`;
80
76
 
81
77
  const clearTimer = () => {
@@ -138,14 +134,15 @@
138
134
  });
139
135
 
140
136
  $effect(() => {
141
- if (
142
- open &&
143
- triggerRef &&
144
- tooltipRef &&
145
- (scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
146
- ) {
147
- updatePosition();
148
- }
137
+ if (!open) return;
138
+
139
+ window.addEventListener('scroll', updatePosition, { passive: true });
140
+ window.addEventListener('resize', updatePosition);
141
+
142
+ return () => {
143
+ window.removeEventListener('scroll', updatePosition);
144
+ window.removeEventListener('resize', updatePosition);
145
+ };
149
146
  });
150
147
 
151
148
  $effect(() => {
@@ -157,8 +154,6 @@
157
154
  });
158
155
  </script>
159
156
 
160
- <svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
161
-
162
157
  <!-- svelte-ignore a11y_no_static_element_interactions -->
163
158
  <span
164
159
  bind:this={triggerRef}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lapikit",
3
- "version": "0.6.9",
3
+ "version": "0.6.11",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -99,7 +99,7 @@
99
99
  "typescript": "^5.0.0",
100
100
  "typescript-eslint": "^8.20.0",
101
101
  "vite": "^7.2.2",
102
- "vitest": "^3.0.0"
102
+ "vitest": "^4.1.11"
103
103
  },
104
104
  "keywords": [
105
105
  "svelte",