@insymetri/styleguide 0.1.43 → 0.1.45

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/IIDropdownInput/IIDropdownInput.svelte +66 -4
  2. package/dist/icons.d.ts +3 -0
  3. package/dist/icons.js +3 -0
  4. package/dist/style/tailwind/spacing.js +1 -1
  5. package/package.json +1 -1
package/dist/IIDropdownInput/IIDropdownInput.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script lang="ts">
2
+ import {tick} from 'svelte'
2
3
  import type {Snippet} from 'svelte'
3
4
  import {IIIcon} from '../IIIcon'
4
5
  import {cn} from '../utils/cn'
@@ -86,6 +87,55 @@
86
87
  if (item) handleSelect(item)
87
88
  }
88
89
 
90
+ let typeaheadBuffer = $state('')
91
+ let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
92
+
93
+ function typeahead(char: string) {
94
+ const wasOpen = open
95
+ typeaheadBuffer += char.toLowerCase()
96
+ clearTimeout(typeaheadTimer)
97
+ typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, 500)
98
+
99
+ const match = items.find(
100
+ i => !i.disabled && i.label.toLowerCase().startsWith(typeaheadBuffer)
101
+ )
102
+ if (match) {
103
+ value = match.value
104
+ onSelect?.(match.value)
105
+ if (!wasOpen) {
106
+ open = false
107
+ triggerEl?.focus()
108
+ } else {
109
+ tick().then(() => {
110
+ const el = floatingEl?.querySelector<HTMLElement>('[aria-selected="true"]')
111
+ el?.focus()
112
+ el?.scrollIntoView({block: 'nearest'})
113
+ })
114
+ }
115
+ }
116
+ }
117
+
118
+ function handleTriggerKeydown(e: KeyboardEvent) {
119
+ if (disabled) return
120
+
121
+ if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
122
+ e.preventDefault()
123
+ if (!open) open = true
124
+ return
125
+ }
126
+
127
+ if (e.key === ' ' || e.key === 'Enter') {
128
+ e.preventDefault()
129
+ if (!open) open = true
130
+ return
131
+ }
132
+
133
+ if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
134
+ e.preventDefault()
135
+ typeahead(e.key)
136
+ }
137
+ }
138
+
89
139
  function toggle() {
90
140
  if (disabled) return
91
141
  open = !open
@@ -102,12 +152,14 @@
102
152
  }
103
153
  })
104
154
 
105
- // Focus first item when opened (non-searchable)
155
+ // Focus selected item (or first) when opened (non-searchable)
106
156
  $effect(() => {
107
157
  if (open && floatingEl && !searchable) {
108
158
  requestAnimationFrame(() => {
109
- const first = floatingEl?.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')
110
- first?.focus()
159
+ const selected = floatingEl?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]:not([data-disabled])')
160
+ const target = selected ?? floatingEl?.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')
161
+ target?.focus()
162
+ target?.scrollIntoView({block: 'nearest'})
111
163
  })
112
164
  }
113
165
  })
@@ -132,6 +184,10 @@
132
184
  const currentIndex = optionItems.indexOf(document.activeElement as HTMLElement)
133
185
 
134
186
  switch (e.key) {
187
+ case 'Tab':
188
+ e.preventDefault()
189
+ focusItem(optionItems, currentIndex, e.shiftKey ? -1 : 1)
190
+ break
135
191
  case 'ArrowDown':
136
192
  e.preventDefault()
137
193
  focusItem(optionItems, currentIndex, 1)
@@ -141,7 +197,6 @@
141
197
  focusItem(optionItems, currentIndex, -1)
142
198
  break
143
199
  case 'Enter':
144
- case ' ':
145
200
  e.preventDefault()
146
201
  ;(document.activeElement as HTMLElement)?.click()
147
202
  break
@@ -149,6 +204,12 @@
149
204
  e.preventDefault()
150
205
  close()
151
206
  break
207
+ default:
208
+ if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
209
+ e.preventDefault()
210
+ typeahead(e.key)
211
+ }
212
+ break
152
213
  }
153
214
  }
154
215
  </script>
@@ -171,6 +232,7 @@
171
232
  className
172
233
  )}
173
234
  onclick={toggle}
235
+ onkeydown={handleTriggerKeydown}
174
236
  >
175
237
  {#if renderSelected && selectedItem}
176
238
  {@render renderSelected(selectedItem)}
package/dist/icons.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare const icons: {
7
7
  readonly 'arrow-left': "<path fill=\"currentColor\" d=\"M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8\"/>";
8
8
  readonly 'arrow-right': "<path fill=\"currentColor\" d=\"m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32\"/>";
9
9
  readonly 'arrow-up-right': "<path fill=\"currentColor\" d=\"M200 64v112a8 8 0 0 1-16 0V83.31L61.66 205.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16h112a8 8 0 0 1 8 8\"/>";
10
+ readonly 'arrows-out-simple': "<path fill=\"currentColor\" d=\"M216 48v48a8 8 0 0 1-16 0V67.31l-50.34 50.35a8 8 0 0 1-11.32-11.32L188.69 56H160a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8M106.34 138.34L56 188.69V160a8 8 0 0 0-16 0v48a8 8 0 0 0 8 8h48a8 8 0 0 0 0-16H67.31l50.35-50.34a8 8 0 0 0-11.32-11.32\"/>";
10
11
  readonly 'arrow-bend-double-up-right': "<path fill=\"currentColor\" d=\"M229.66 109.66l-48 48a8 8 0 0 1-11.32-11.32L212.69 104L170.34 61.66a8 8 0 0 1 11.32-11.32l48 48A8 8 0 0 1 229.66 109.66Zm-48-11.32l-48-48a8 8 0 0 0-11.32 11.32L156.69 96H128A104.11 104.11 0 0 0 24 200a8 8 0 0 0 16 0a88.1 88.1 0 0 1 88-88h28.69l-34.35 34.34a8 8 0 0 0 11.32 11.32l48-48A8 8 0 0 0 181.66 98.34Z\"/>";
11
12
  readonly x: "<path fill=\"currentColor\" d=\"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z\"/>";
12
13
  readonly check: "<path fill=\"currentColor\" d=\"m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32\"/>";
@@ -72,6 +73,8 @@ export declare const icons: {
72
73
  readonly 'dots-three-vertical': "<path fill=\"currentColor\" d=\"M140 128a12 12 0 1 1-12-12a12 12 0 0 1 12 12m-12-56a12 12 0 1 0-12-12a12 12 0 0 0 12 12m0 112a12 12 0 1 0 12 12a12 12 0 0 0-12-12\"/>";
73
74
  readonly trash: "<path fill=\"currentColor\" d=\"M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0\"/>";
74
75
  readonly circle: "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88\"/>";
76
+ readonly 'arrow-circle-right': "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m45.66-93.66a8 8 0 0 1 0 11.32l-32 32a8 8 0 0 1-11.32-11.32L148.69 136H88a8 8 0 0 1 0-16h60.69l-18.35-18.34a8 8 0 0 1 11.32-11.32Z\"/>";
77
+ readonly 'circle-progress': "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88\"/><path fill=\"currentColor\" d=\"M128 64a64 64 0 1 1-64 64h64V64Z\"/>";
75
78
  readonly info: "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a8 8 0 0 1-8-8v-40a8 8 0 0 1 0-16a8 8 0 0 1 8 8v40a8 8 0 0 1 8 8M116 84a12 12 0 1 1 12 12a12 12 0 0 1-12-12\"/>";
76
79
  readonly 'warning-circle': "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12\"/>";
77
80
  readonly warning: "<path fill=\"currentColor\" d=\"M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12\"/>";
package/dist/icons.js CHANGED
@@ -8,6 +8,7 @@ export const icons = {
8
8
  'arrow-left': `<path fill="currentColor" d="M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8"/>`,
9
9
  'arrow-right': `<path fill="currentColor" d="m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32"/>`,
10
10
  'arrow-up-right': `<path fill="currentColor" d="M200 64v112a8 8 0 0 1-16 0V83.31L61.66 205.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16h112a8 8 0 0 1 8 8"/>`,
11
+ 'arrows-out-simple': `<path fill="currentColor" d="M216 48v48a8 8 0 0 1-16 0V67.31l-50.34 50.35a8 8 0 0 1-11.32-11.32L188.69 56H160a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8M106.34 138.34L56 188.69V160a8 8 0 0 0-16 0v48a8 8 0 0 0 8 8h48a8 8 0 0 0 0-16H67.31l50.35-50.34a8 8 0 0 0-11.32-11.32"/>`,
11
12
  'arrow-bend-double-up-right': `<path fill="currentColor" d="M229.66 109.66l-48 48a8 8 0 0 1-11.32-11.32L212.69 104L170.34 61.66a8 8 0 0 1 11.32-11.32l48 48A8 8 0 0 1 229.66 109.66Zm-48-11.32l-48-48a8 8 0 0 0-11.32 11.32L156.69 96H128A104.11 104.11 0 0 0 24 200a8 8 0 0 0 16 0a88.1 88.1 0 0 1 88-88h28.69l-34.35 34.34a8 8 0 0 0 11.32 11.32l48-48A8 8 0 0 0 181.66 98.34Z"/>`,
12
13
  x: `<path fill="currentColor" d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/>`,
13
14
  check: `<path fill="currentColor" d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32"/>`,
@@ -80,6 +81,8 @@ export const icons = {
80
81
  'dots-three-vertical': `<path fill="currentColor" d="M140 128a12 12 0 1 1-12-12a12 12 0 0 1 12 12m-12-56a12 12 0 1 0-12-12a12 12 0 0 0 12 12m0 112a12 12 0 1 0 12 12a12 12 0 0 0-12-12"/>`,
81
82
  trash: `<path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0"/>`,
82
83
  circle: `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88"/>`,
84
+ 'arrow-circle-right': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m45.66-93.66a8 8 0 0 1 0 11.32l-32 32a8 8 0 0 1-11.32-11.32L148.69 136H88a8 8 0 0 1 0-16h60.69l-18.35-18.34a8 8 0 0 1 11.32-11.32Z"/>`,
85
+ 'circle-progress': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88"/><path fill="currentColor" d="M128 64a64 64 0 1 1-64 64h64V64Z"/>`,
83
86
  // Status & Feedback
84
87
  info: `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a8 8 0 0 1-8-8v-40a8 8 0 0 1 0-16a8 8 0 0 1 8 8v40a8 8 0 0 1 8 8M116 84a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/>`,
85
88
  'warning-circle': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/>`,
package/dist/style/tailwind/spacing.js CHANGED
@@ -32,6 +32,6 @@ export const spacing = {
32
32
  full: '100%',
33
33
  none: '0px',
34
34
  // Layout dimensions
35
- sidebar: '22.4rem',
35
+ sidebar: 'var(--sidebar-width)',
36
36
  topbar: '4.8rem',
37
37
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.43",
3
+ "version": "0.1.45",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {