use-wc 1.0.0-pre.42 → 1.0.0-pre.43

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 (4) hide show
  1. package/dist/design-system.css +125 -121
  2. package/dist/use-wc.d.mts +21 -17
  3. package/dist/use-wc.mjs +254 -197
  4. package/package.json +12 -2
package/dist/design-system.css CHANGED
@@ -221,19 +221,25 @@
221
221
  display: inline-flex;
222
222
  }
223
223
 
224
- /* Base color */
225
- --usewc-theme-color-button-text-static: var(--usewc-color-button-base-text-static);
226
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-base-text-static-auxiliary);
227
- --usewc-theme-color-button-background-static: var(--usewc-color-button-base-background-static);
228
- --usewc-theme-color-button-background-static-auxiliary: var(--usewc-color-button-base-background-static-auxiliary);
229
- --usewc-theme-color-button-border-static: var(--usewc-color-button-base-border-static);
230
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
231
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-base-text-hover);
232
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-base-background-hover);
233
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-base-border-hover);
234
- --usewc-theme-color-button-text-active: var(--usewc-color-button-base-text-active);
235
- --usewc-theme-color-button-background-active: var(--usewc-color-button-base-background-active);
236
- --usewc-theme-color-button-border-active: var(--usewc-color-button-base-border-active);
224
+ /* Scoped color tokens — default to base, remapped by variant classes */
225
+ --usewc-color-button-text-static: var(--usewc-color-button-base-text-static);
226
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-base-text-static-auxiliary);
227
+ --usewc-color-button-background-static: var(--usewc-color-button-base-background-static);
228
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-base-background-static-auxiliary);
229
+ --usewc-color-button-border-static: var(--usewc-color-button-base-border-static);
230
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-base-border-static-auxiliary);
231
+ --usewc-color-button-text-hover: var(--usewc-color-button-base-text-hover);
232
+ --usewc-color-button-background-hover: var(--usewc-color-button-base-background-hover);
233
+ --usewc-color-button-border-hover: var(--usewc-color-button-base-border-hover);
234
+ --usewc-color-button-text-active: var(--usewc-color-button-base-text-active);
235
+ --usewc-color-button-background-active: var(--usewc-color-button-base-background-active);
236
+ --usewc-color-button-border-active: var(--usewc-color-button-base-border-active);
237
+
238
+ /* Scoped layout tokens — default to base, remapped by size classes */
239
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-base-padding-block);
240
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-base-padding-inline);
241
+ --usewc-layout-button-gap: var(--usewc-layout-button-base-gap);
242
+ --usewc-layout-button-font-size: var(--usewc-layout-button-base-font-size);
237
243
 
238
244
  &::part(trigger),
239
245
  &:not([type="file"], use-dropdown),
@@ -241,23 +247,23 @@
241
247
  display: inline-flex;
242
248
  align-items: center;
243
249
  justify-content: center;
244
- gap: var(--usewc-layout-button-base-gap);
250
+ gap: var(--usewc-layout-button-gap);
245
251
  border-radius: var(--usewc-effect-input-border-radius);
246
252
  line-height: var(--usewc-layout-button-line-height);
247
- padding-block: var(--usewc-layout-button-base-padding-block);
248
- padding-inline: var(--usewc-layout-button-base-padding-inline);
253
+ padding-block: var(--usewc-layout-button-padding-block);
254
+ padding-inline: var(--usewc-layout-button-padding-inline);
249
255
  font-family: var(--usewc-font-input-family);
250
- font-size: var(--usewc-layout-button-base-font-size);
251
- font-weight: var(--usewc-font-weight-normal);
256
+ font-size: var(--usewc-layout-button-font-size);
257
+ font-weight: var(--usewc-font-weight-semibold);
252
258
  white-space: nowrap;
253
259
  cursor: default;
254
- color: var(--usewc-theme-color-button-text-static);
255
- background: var(--usewc-theme-color-button-background-static);
260
+ color: var(--usewc-color-button-text-static);
261
+ background: var(--usewc-color-button-background-static);
256
262
  background-size: var(--usewc-layout-button-background-size);
257
263
  background-position: var(--usewc-layout-button-background-position);
258
264
  background-repeat: var(--usewc-layout-button-background-repeat);
259
265
  border: var(--usewc-layout-button-border) var(--usewc-effect-input-border-style)
260
- var(--usewc-theme-color-button-border-static);
266
+ var(--usewc-color-button-border-static);
261
267
  }
262
268
 
263
269
  &:is(use-dropdown) {
@@ -271,17 +277,17 @@
271
277
  &:is(:hover, :focus-visible):not([type="file"], use-dropdown),
272
278
  &::part(trigger):is(:hover, :focus-visible),
273
279
  &:is(:hover, :focus-visible)::file-selector-button {
274
- background: var(--usewc-theme-color-button-background-hover);
275
- border-color: var(--usewc-theme-color-button-border-hover);
276
- color: var(--usewc-theme-color-button-text-hover);
280
+ background: var(--usewc-color-button-background-hover);
281
+ border-color: var(--usewc-color-button-border-hover);
282
+ color: var(--usewc-color-button-text-hover);
277
283
  }
278
284
 
279
285
  &:active:not([type="file"], use-dropdown),
280
286
  &:active::part(trigger),
281
287
  &:active::file-selector-button {
282
- background: var(--usewc-theme-color-button-background-active);
283
- border-color: var(--usewc-theme-color-button-border-active);
284
- color: var(--usewc-theme-color-button-text-active);
288
+ background: var(--usewc-color-button-background-active);
289
+ border-color: var(--usewc-color-button-border-active);
290
+ color: var(--usewc-color-button-text-active);
285
291
  }
286
292
 
287
293
  &:disabled,
@@ -291,129 +297,127 @@
291
297
  }
292
298
 
293
299
  &.primary {
294
- --usewc-theme-color-button-text-static: var(--usewc-color-button-primary-text-static);
295
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-primary-text-static-auxiliary);
296
- --usewc-theme-color-button-background-static: var(--usewc-color-button-primary-background-static);
297
- --usewc-theme-color-button-background-static-auxiliary: var(
298
- --usewc-color-button-primary-background-static-auxiliary
299
- );
300
- --usewc-theme-color-button-border-static: var(--usewc-color-button-primary-border-static);
301
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-primary-border-static-auxiliary);
302
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-primary-text-hover);
303
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-primary-background-hover);
304
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-primary-border-hover);
305
- --usewc-theme-color-button-text-active: var(--usewc-color-button-primary-text-active);
306
- --usewc-theme-color-button-background-active: var(--usewc-color-button-primary-background-active);
307
- --usewc-theme-color-button-border-active: var(--usewc-color-button-primary-border-active);
300
+ --usewc-color-button-text-static: var(--usewc-color-button-primary-text-static);
301
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-primary-text-static-auxiliary);
302
+ --usewc-color-button-background-static: var(--usewc-color-button-primary-background-static);
303
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-primary-background-static-auxiliary);
304
+ --usewc-color-button-border-static: var(--usewc-color-button-primary-border-static);
305
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-primary-border-static-auxiliary);
306
+ --usewc-color-button-text-hover: var(--usewc-color-button-primary-text-hover);
307
+ --usewc-color-button-background-hover: var(--usewc-color-button-primary-background-hover);
308
+ --usewc-color-button-border-hover: var(--usewc-color-button-primary-border-hover);
309
+ --usewc-color-button-text-active: var(--usewc-color-button-primary-text-active);
310
+ --usewc-color-button-background-active: var(--usewc-color-button-primary-background-active);
311
+ --usewc-color-button-border-active: var(--usewc-color-button-primary-border-active);
308
312
  }
309
313
 
310
314
  &.danger {
311
- --usewc-theme-color-button-text-static: var(--usewc-color-button-danger-text-static);
312
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-danger-text-static-auxiliary);
313
- --usewc-theme-color-button-background-static: var(--usewc-color-button-danger-background-static);
314
- --usewc-theme-color-button-background-static-auxiliary: var(
315
- --usewc-color-button-danger-background-static-auxiliary
316
- );
317
- --usewc-theme-color-button-border-static: var(--usewc-color-button-danger-border-static);
318
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-danger-border-static-auxiliary);
319
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-danger-text-hover);
320
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-danger-background-hover);
321
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-danger-border-hover);
322
- --usewc-theme-color-button-text-active: var(--usewc-color-button-danger-text-active);
323
- --usewc-theme-color-button-background-active: var(--usewc-color-button-danger-background-active);
324
- --usewc-theme-color-button-border-active: var(--usewc-color-button-danger-border-active);
315
+ --usewc-color-button-text-static: var(--usewc-color-button-danger-text-static);
316
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-danger-text-static-auxiliary);
317
+ --usewc-color-button-background-static: var(--usewc-color-button-danger-background-static);
318
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-danger-background-static-auxiliary);
319
+ --usewc-color-button-border-static: var(--usewc-color-button-danger-border-static);
320
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-danger-border-static-auxiliary);
321
+ --usewc-color-button-text-hover: var(--usewc-color-button-danger-text-hover);
322
+ --usewc-color-button-background-hover: var(--usewc-color-button-danger-background-hover);
323
+ --usewc-color-button-border-hover: var(--usewc-color-button-danger-border-hover);
324
+ --usewc-color-button-text-active: var(--usewc-color-button-danger-text-active);
325
+ --usewc-color-button-background-active: var(--usewc-color-button-danger-background-active);
326
+ --usewc-color-button-border-active: var(--usewc-color-button-danger-border-active);
325
327
  }
326
328
 
327
329
  &.clear {
328
- --usewc-theme-color-button-text-static: var(--usewc-color-button-clear-text-static);
329
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-clear-text-static-auxiliary);
330
- --usewc-theme-color-button-background-static: var(--usewc-color-button-clear-background-static);
331
- --usewc-theme-color-button-background-static-auxiliary: var(
332
- --usewc-color-button-clear-background-static-auxiliary
333
- );
334
- --usewc-theme-color-button-border-static: var(--usewc-color-button-clear-border-static);
335
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-clear-border-static-auxiliary);
336
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-clear-text-hover);
337
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-clear-background-hover);
338
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-clear-border-hover);
339
- --usewc-theme-color-button-text-active: var(--usewc-color-button-clear-text-active);
340
- --usewc-theme-color-button-background-active: var(--usewc-color-button-clear-background-active);
341
- --usewc-theme-color-button-border-active: var(--usewc-color-button-clear-border-active);
330
+ --usewc-color-button-text-static: var(--usewc-color-button-clear-text-static);
331
+ --usewc-color-button-text-static-auxiliary: var(--usewc-color-button-clear-text-static-auxiliary);
332
+ --usewc-color-button-background-static: var(--usewc-color-button-clear-background-static);
333
+ --usewc-color-button-background-static-auxiliary: var(--usewc-color-button-clear-background-static-auxiliary);
334
+ --usewc-color-button-border-static: var(--usewc-color-button-clear-border-static);
335
+ --usewc-color-button-border-static-auxiliary: var(--usewc-color-button-clear-border-static-auxiliary);
336
+ --usewc-color-button-text-hover: var(--usewc-color-button-clear-text-hover);
337
+ --usewc-color-button-background-hover: var(--usewc-color-button-clear-background-hover);
338
+ --usewc-color-button-border-hover: var(--usewc-color-button-clear-border-hover);
339
+ --usewc-color-button-text-active: var(--usewc-color-button-clear-text-active);
340
+ --usewc-color-button-background-active: var(--usewc-color-button-clear-background-active);
341
+ --usewc-color-button-border-active: var(--usewc-color-button-clear-border-active);
342
342
  }
343
343
 
344
344
  &.auxiliary:not(:is(:hover, :focus-visible, :active)) {
345
345
  background: transparent;
346
- color: var(--usewc-theme-color-button-text-static-auxiliary);
347
- border-color: var(--usewc-theme-color-button-border-static-auxiliary);
346
+ color: var(--usewc-color-button-text-static-auxiliary);
347
+ border-color: var(--usewc-color-button-border-static-auxiliary);
348
348
  }
349
349
 
350
- &.extra-small::part(trigger),
351
- &.extra-small:not([type="file"], use-dropdown),
352
- &.extra-small::file-selector-button {
353
- padding-block: var(--usewc-layout-button-extra-small-padding-block);
354
- padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
355
- font-size: var(--usewc-layout-button-extra-small-font-size);
356
- line-height: var(--usewc-layout-button-extra-small-line-height);
350
+ &.extra-small {
351
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-extra-small-padding-block);
352
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
353
+ --usewc-layout-button-font-size: var(--usewc-layout-button-extra-small-font-size);
354
+ --usewc-layout-button-line-height: var(--usewc-layout-button-extra-small-line-height);
357
355
  }
358
356
 
359
- &.small::part(trigger),
360
- &.small:not([type="file"], use-dropdown),
361
- &.small::file-selector-button {
362
- padding-block: var(--usewc-layout-button-small-padding-block);
363
- padding-inline: var(--usewc-layout-button-small-padding-inline);
364
- font-size: var(--usewc-layout-button-small-font-size);
365
- line-height: var(--usewc-layout-button-small-line-height);
357
+ &.small {
358
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-small-padding-block);
359
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-small-padding-inline);
360
+ --usewc-layout-button-font-size: var(--usewc-layout-button-small-font-size);
361
+ --usewc-layout-button-line-height: var(--usewc-layout-button-small-line-height);
366
362
  }
367
363
 
368
- &.large::part(trigger),
369
- &.large:not([type="file"], use-dropdown),
370
- &.large::file-selector-button {
371
- padding-block: var(--usewc-layout-button-large-padding-block);
372
- padding-inline: var(--usewc-layout-button-large-padding-inline);
373
- font-size: var(--usewc-layout-button-large-font-size);
374
- line-height: var(--usewc-layout-button-large-line-height);
364
+ &.large {
365
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-large-padding-block);
366
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-large-padding-inline);
367
+ --usewc-layout-button-font-size: var(--usewc-layout-button-large-font-size);
368
+ --usewc-layout-button-line-height: var(--usewc-layout-button-large-line-height);
375
369
  }
376
370
 
377
- &.extra-large::part(trigger),
378
- &.extra-large:not([type="file"], use-dropdown),
379
- &.extra-large::file-selector-button {
380
- padding-block: var(--usewc-layout-button-extra-large-padding-block);
381
- padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
382
- font-size: var(--usewc-layout-button-extra-large-font-size);
383
- line-height: var(--usewc-layout-button-extra-large-line-height);
371
+ &.extra-large {
372
+ --usewc-layout-button-padding-block: var(--usewc-layout-button-extra-large-padding-block);
373
+ --usewc-layout-button-padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
374
+ --usewc-layout-button-font-size: var(--usewc-layout-button-extra-large-font-size);
375
+ --usewc-layout-button-line-height: var(--usewc-layout-button-extra-large-line-height);
384
376
  }
385
377
  }
386
378
 
387
379
  /* Sizing-only: use-select-input's trigger looks like a button but is not a
388
- member of the button group above (no color/base styling), so the size
389
- classes are wired through to its trigger separately. */
380
+ member of the button group above (no color styling), so it gets its own
381
+ scoped layout tokens defaulting to the button base sizing. */
390
382
  use-select-input {
391
- &.extra-small::part(trigger) {
392
- padding-block: var(--usewc-layout-button-extra-small-padding-block);
393
- padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
394
- font-size: var(--usewc-layout-button-extra-small-font-size);
395
- line-height: var(--usewc-layout-button-extra-small-line-height);
383
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-base-padding-block);
384
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-base-padding-inline);
385
+ --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-base-font-size);
386
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-line-height);
387
+
388
+ &::part(trigger) {
389
+ padding-block: var(--usewc-layout-select-trigger-padding-block);
390
+ padding-inline: var(--usewc-layout-select-trigger-padding-inline);
391
+ font-size: var(--usewc-layout-select-trigger-font-size);
392
+ line-height: var(--usewc-layout-select-trigger-line-height);
393
+ }
394
+
395
+ &.extra-small {
396
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-extra-small-padding-block);
397
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
398
+ --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-extra-small-font-size);
399
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-extra-small-line-height);
396
400
  }
397
401
 
398
- &.small::part(trigger) {
399
- padding-block: var(--usewc-layout-button-small-padding-block);
400
- padding-inline: var(--usewc-layout-button-small-padding-inline);
401
- font-size: var(--usewc-layout-button-small-font-size);
402
- line-height: var(--usewc-layout-button-small-line-height);
402
+ &.small {
403
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-small-padding-block);
404
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-small-padding-inline);
405
+ --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-small-font-size);
406
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-small-line-height);
403
407
  }
404
408
 
405
- &.large::part(trigger) {
406
- padding-block: var(--usewc-layout-button-large-padding-block);
407
- padding-inline: var(--usewc-layout-button-large-padding-inline);
408
- font-size: var(--usewc-layout-button-large-font-size);
409
- line-height: var(--usewc-layout-button-large-line-height);
409
+ &.large {
410
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-large-padding-block);
411
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-large-padding-inline);
412
+ --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-large-font-size);
413
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-large-line-height);
410
414
  }
411
415
 
412
- &.extra-large::part(trigger) {
413
- padding-block: var(--usewc-layout-button-extra-large-padding-block);
414
- padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
415
- font-size: var(--usewc-layout-button-extra-large-font-size);
416
- line-height: var(--usewc-layout-button-extra-large-line-height);
416
+ &.extra-large {
417
+ --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-extra-large-padding-block);
418
+ --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
419
+ --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-extra-large-font-size);
420
+ --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-extra-large-line-height);
417
421
  }
418
422
  }
419
423
 
package/dist/use-wc.d.mts CHANGED
@@ -1,7 +1,11 @@
1
- import * as lit from "lit";
2
1
  import { CSSResultGroup, LitElement, TemplateResult, html } from "lit";
3
2
 
4
3
  //#region node_modules/lit-html/development/lit-html.d.ts
4
+ /**
5
+ * @license
6
+ * Copyright 2017 Google LLC
7
+ * SPDX-License-Identifier: BSD-3-Clause
8
+ */
5
9
  /** TemplateResult types */
6
10
  declare const HTML_RESULT = 1;
7
11
  declare const SVG_RESULT = 2;
@@ -72,7 +76,7 @@ declare class UseOption extends LitElement {
72
76
  *
73
77
  * @link https://github.com/w3c/csswg-drafts/issues/6867
74
78
  */
75
- static styles: lit.CSSResult;
79
+ static styles: import("lit").CSSResult;
76
80
  }
77
81
  declare global {
78
82
  interface HTMLElementTagNameMap {
@@ -130,7 +134,7 @@ declare class UseDateInput extends UseLocaleElement {
130
134
  get value(): string;
131
135
  set value(value: string);
132
136
  render(): TemplateResult$1<1>;
133
- static styles: lit.CSSResult;
137
+ static styles: import("lit").CSSResult;
134
138
  }
135
139
  declare global {
136
140
  interface HTMLElementTagNameMap {
@@ -194,7 +198,7 @@ declare class UseDropdown extends LitElement {
194
198
  *
195
199
  * @link https://github.com/w3c/csswg-drafts/issues/6867
196
200
  */
197
- static styles: lit.CSSResult;
201
+ static styles: import("lit").CSSResult;
198
202
  }
199
203
  declare global {
200
204
  interface HTMLElementTagNameMap {
@@ -252,7 +256,7 @@ declare class UseDurationInput extends UseLocaleElement {
252
256
  set value(value: string);
253
257
  format: "long" | "short" | "narrow" | "digital";
254
258
  render(): TemplateResult$1<1>[];
255
- static styles: lit.CSSResult;
259
+ static styles: import("lit").CSSResult;
256
260
  }
257
261
  declare global {
258
262
  interface HTMLElementTagNameMap {
@@ -302,7 +306,7 @@ declare class UseListboxInput extends LitElement {
302
306
  *
303
307
  * @link https://github.com/w3c/csswg-drafts/issues/6867
304
308
  */
305
- static styles: lit.CSSResult;
309
+ static styles: import("lit").CSSResult;
306
310
  }
307
311
  declare global {
308
312
  interface HTMLElementTagNameMap {
@@ -358,7 +362,7 @@ declare class UseSelectInput extends LitElement {
358
362
  *
359
363
  * @link https://github.com/w3c/csswg-drafts/issues/6867
360
364
  */
361
- static styles: lit.CSSResult;
365
+ static styles: import("lit").CSSResult;
362
366
  }
363
367
  declare global {
364
368
  interface HTMLElementTagNameMap {
@@ -409,7 +413,7 @@ declare class UseTimeInput extends UseLocaleElement {
409
413
  set value(value: string);
410
414
  format: "long" | "short" | "narrow" | "digital";
411
415
  render(): TemplateResult$1<1>[];
412
- static styles: lit.CSSResult;
416
+ static styles: import("lit").CSSResult;
413
417
  }
414
418
  declare global {
415
419
  interface HTMLElementTagNameMap {
@@ -452,7 +456,7 @@ declare class UseTreeitem extends LitElement {
452
456
  *
453
457
  * @link https://github.com/w3c/csswg-drafts/issues/6867
454
458
  */
455
- static styles: lit.CSSResult;
459
+ static styles: import("lit").CSSResult;
456
460
  }
457
461
  declare global {
458
462
  interface HTMLElementTagNameMap {
@@ -500,7 +504,7 @@ declare class UseTree extends LitElement {
500
504
  *
501
505
  * @link https://github.com/w3c/csswg-drafts/issues/6867
502
506
  */
503
- static styles: lit.CSSResult;
507
+ static styles: import("lit").CSSResult;
504
508
  }
505
509
  declare global {
506
510
  interface HTMLElementTagNameMap {
@@ -661,7 +665,7 @@ declare class UseMenu extends LitElement {
661
665
  *
662
666
  * @link https://github.com/w3c/csswg-drafts/issues/6867
663
667
  */
664
- static styles: lit.CSSResult;
668
+ static styles: import("lit").CSSResult;
665
669
  }
666
670
  declare global {
667
671
  interface HTMLElementTagNameMap {
@@ -800,7 +804,7 @@ declare class UseCalendarBase extends UseLocaleElement {
800
804
  * @fires use-change - Fired on selection with detail `{ value: string }`
801
805
  */
802
806
  declare class UseDatePicker extends UseCalendarBase {
803
- static styles: lit.CSSResultGroup;
807
+ static styles: import("lit").CSSResultGroup;
804
808
  connectedCallback(): void;
805
809
  get value(): string;
806
810
  set value(value: string);
@@ -821,7 +825,7 @@ declare global {
821
825
  */
822
826
  declare class UseWeekPicker extends UseCalendarBase {
823
827
  #private;
824
- static styles: lit.CSSResultGroup[];
828
+ static styles: import("lit").CSSResultGroup[];
825
829
  connectedCallback(): void;
826
830
  get value(): string;
827
831
  set value(value: string);
@@ -878,7 +882,7 @@ declare class UseMonthPicker extends UseLocaleElement {
878
882
  slotAssignment?: SlotAssignmentMode | undefined;
879
883
  delegatesFocus: boolean;
880
884
  };
881
- static styles: lit.CSSResult;
885
+ static styles: import("lit").CSSResult;
882
886
  /** Year currently shown in the grid. Defaults to the current year, or the year of the initial value attribute. */
883
887
  year: number;
884
888
  constructor();
@@ -952,7 +956,7 @@ declare class UseDatetimeInput extends UseLocaleElement {
952
956
  set value(val: string);
953
957
  connectedCallback(): void;
954
958
  render(): TemplateResult$1<1>;
955
- static styles: lit.CSSResult;
959
+ static styles: import("lit").CSSResult;
956
960
  }
957
961
  //#endregion
958
962
  //#region src/elements/use-scrollarea/use-scrollarea.d.ts
@@ -976,7 +980,7 @@ declare class UseScrollarea extends LitElement {
976
980
  disconnectedCallback(): void;
977
981
  firstUpdated(): void;
978
982
  render(): TemplateResult$1<1>;
979
- static styles: lit.CSSResult;
983
+ static styles: import("lit").CSSResult;
980
984
  }
981
985
  declare global {
982
986
  interface HTMLElementTagNameMap {
@@ -1006,7 +1010,7 @@ declare global {
1006
1010
  */
1007
1011
  declare class UseIntlDatetime extends UseLocaleElement {
1008
1012
  #private;
1009
- static styles: lit.CSSResult;
1013
+ static styles: import("lit").CSSResult;
1010
1014
  value?: string;
1011
1015
  datestyle?: string;
1012
1016
  timestyle?: string;
package/dist/use-wc.mjs CHANGED
@@ -9,7 +9,7 @@ function createId() {
9
9
  return ":" + Math.random().toString(36).substring(2, 6) + ":";
10
10
  }
11
11
  //#endregion
12
- //#region \0@oxc-project+runtime@0.121.0/helpers/decorate.js
12
+ //#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
13
13
  function __decorate(decorators, target, key, desc) {
14
14
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
15
15
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -504,7 +504,7 @@ let UseDropdown = class UseDropdown extends LitElement {
504
504
  static {
505
505
  _UseDropdown = this;
506
506
  }
507
- #tabbables = [];
507
+ #tabbables;
508
508
  static {
509
509
  this.shadowRootOptions = {
510
510
  ...LitElement.shadowRootOptions,
@@ -513,8 +513,8 @@ let UseDropdown = class UseDropdown extends LitElement {
513
513
  }
514
514
  #id;
515
515
  #internals;
516
- #itemLabels = [];
517
- #isNested = this.parentElement?.closest("use-dropdown") != null;
516
+ #itemLabels;
517
+ #isNested;
518
518
  set disabled(flag) {
519
519
  this.#initializeDisabled(flag);
520
520
  }
@@ -523,6 +523,9 @@ let UseDropdown = class UseDropdown extends LitElement {
523
523
  }
524
524
  constructor() {
525
525
  super();
526
+ this.#tabbables = [];
527
+ this.#itemLabels = [];
528
+ this.#isNested = this.parentElement?.closest("use-dropdown") != null;
526
529
  this.trigger = null;
527
530
  this.#id = createId();
528
531
  this.#internals = this.attachInternals();
@@ -750,6 +753,7 @@ let UseDurationInput = class UseDurationInput extends UseLocaleElement {
750
753
  #formId;
751
754
  constructor() {
752
755
  super();
756
+ this.#id = "";
753
757
  this.years = false;
754
758
  this.months = false;
755
759
  this.weeks = false;
@@ -758,7 +762,10 @@ let UseDurationInput = class UseDurationInput extends UseLocaleElement {
758
762
  this.minutes = false;
759
763
  this.seconds = false;
760
764
  this.milliseconds = false;
765
+ this.#valueData = {};
761
766
  this.format = "short";
767
+ this.#formatParts = [];
768
+ this.#ariaLabels = DEFAULT_ARIA_LABELS;
762
769
  this.#internals = this.attachInternals();
763
770
  this.#formId = this.closest("form")?.id;
764
771
  this.#id = this.hasAttribute("id") ? this.getAttribute("id") : createId();
@@ -778,7 +785,7 @@ let UseDurationInput = class UseDurationInput extends UseLocaleElement {
778
785
  this.#formatParts = this.#initialFormatParts();
779
786
  this.#ariaLabels = this.#initialAriaLabels();
780
787
  }
781
- #id = "";
788
+ #id;
782
789
  get id() {
783
790
  return this.#id;
784
791
  }
@@ -811,9 +818,9 @@ let UseDurationInput = class UseDurationInput extends UseLocaleElement {
811
818
  this.#initializeValue(value);
812
819
  this.#updateInputValues();
813
820
  }
814
- #valueData = {};
815
- #formatParts = [];
816
- #ariaLabels = DEFAULT_ARIA_LABELS;
821
+ #valueData;
822
+ #formatParts;
823
+ #ariaLabels;
817
824
  #initialFormatParts() {
818
825
  try {
819
826
  return new Intl.DurationFormat(this.lang, { style: this.format }).formatToParts({
@@ -982,7 +989,7 @@ let UseListboxInput = class UseListboxInput extends LitElement {
982
989
  }
983
990
  #id;
984
991
  #internals;
985
- #value = new FormData();
992
+ #value;
986
993
  set disabled(flag) {
987
994
  this.#initializeDisabled(flag);
988
995
  }
@@ -1001,8 +1008,10 @@ let UseListboxInput = class UseListboxInput extends LitElement {
1001
1008
  }
1002
1009
  constructor() {
1003
1010
  super();
1011
+ this.#value = new FormData();
1004
1012
  this.placeholder = "";
1005
1013
  this.multiple = false;
1014
+ this.#activeOption = null;
1006
1015
  this.#id = createId();
1007
1016
  this.#internals = this.attachInternals();
1008
1017
  if (this.hasAttribute("disabled")) this.#internals.states.add("disabled");
@@ -1048,7 +1057,7 @@ let UseListboxInput = class UseListboxInput extends LitElement {
1048
1057
  else if (selectedValues[0]) this.#value.set(this.#dataKey, selectedValues[0]);
1049
1058
  this.#internals.setFormValue(this.value);
1050
1059
  }
1051
- #activeOption = null;
1060
+ #activeOption;
1052
1061
  get activeOption() {
1053
1062
  return this.#activeOption;
1054
1063
  }
@@ -1181,7 +1190,7 @@ let UseSelectInput = class UseSelectInput extends LitElement {
1181
1190
  }
1182
1191
  #id;
1183
1192
  #internals;
1184
- #value = new FormData();
1193
+ #value;
1185
1194
  set disabled(flag) {
1186
1195
  this.#initializeDisabled(flag);
1187
1196
  }
@@ -1196,8 +1205,10 @@ let UseSelectInput = class UseSelectInput extends LitElement {
1196
1205
  }
1197
1206
  constructor() {
1198
1207
  super();
1208
+ this.#value = new FormData();
1199
1209
  this.placeholder = "";
1200
1210
  this.trigger = null;
1211
+ this.#activeOption = null;
1201
1212
  this.#id = createId();
1202
1213
  this.#internals = this.attachInternals();
1203
1214
  if (this.hasAttribute("disabled")) this.#internals.states.add("disabled");
@@ -1248,7 +1259,7 @@ let UseSelectInput = class UseSelectInput extends LitElement {
1248
1259
  if (selectedValues[0]) this.#value.set(this.#dataKey, selectedValues[0]);
1249
1260
  this.#internals.setFormValue(this.value);
1250
1261
  }
1251
- #activeOption = null;
1262
+ #activeOption;
1252
1263
  get activeOption() {
1253
1264
  return this.#activeOption;
1254
1265
  }
@@ -1412,21 +1423,35 @@ let UseTimeInput = class UseTimeInput extends UseLocaleElement {
1412
1423
  delegatesFocus: true
1413
1424
  };
1414
1425
  }
1415
- #internalValue = "";
1426
+ #internalValue;
1416
1427
  #internals;
1417
1428
  #formId;
1418
- #maxHours = 23;
1419
- #ariaLabels = DEFAULT_ARIA_LABELS;
1420
- #amChar = "a";
1421
- #pmChar = "p";
1429
+ #maxHours;
1430
+ #ariaLabels;
1431
+ #amChar;
1432
+ #pmChar;
1422
1433
  constructor() {
1423
1434
  super();
1435
+ this.#internalValue = "";
1436
+ this.#maxHours = 23;
1437
+ this.#ariaLabels = DEFAULT_ARIA_LABELS;
1438
+ this.#amChar = "a";
1439
+ this.#pmChar = "p";
1440
+ this.#id = "";
1424
1441
  this.hours = false;
1425
1442
  this.minutes = false;
1426
1443
  this.seconds = false;
1427
1444
  this.fractionalSeconds = false;
1428
1445
  this.dayPeriod = false;
1446
+ this.#valueData = {
1447
+ hour: void 0,
1448
+ minute: void 0,
1449
+ second: void 0,
1450
+ fractionalSecond: void 0,
1451
+ dayPeriod: void 0
1452
+ };
1429
1453
  this.format = "long";
1454
+ this.#formatParts = [];
1430
1455
  this.#internals = this.attachInternals();
1431
1456
  this.#formId = this.closest("form")?.id;
1432
1457
  this.#id = this.hasAttribute("id") ? this.getAttribute("id") : createId();
@@ -1478,7 +1503,7 @@ let UseTimeInput = class UseTimeInput extends UseLocaleElement {
1478
1503
  this.#formatParts = this.#initialFormatParts();
1479
1504
  this.#initializeValue(this.getAttribute("value") ?? "");
1480
1505
  }
1481
- #id = "";
1506
+ #id;
1482
1507
  get id() {
1483
1508
  return this.#id;
1484
1509
  }
@@ -1511,13 +1536,7 @@ let UseTimeInput = class UseTimeInput extends UseLocaleElement {
1511
1536
  this.#initializeValue(value);
1512
1537
  this.#updateInputValues();
1513
1538
  }
1514
- #valueData = {
1515
- hour: void 0,
1516
- minute: void 0,
1517
- second: void 0,
1518
- fractionalSecond: void 0,
1519
- dayPeriod: void 0
1520
- };
1539
+ #valueData;
1521
1540
  #updateInputValues() {
1522
1541
  if (this.hourInput) if (this.hourFormat === "12") this.hourInput.value = this.#valueData.hour ? this.#valueData.hour : "";
1523
1542
  else this.hourInput.value = this.#valueData.hour ? this.#valueData.hour.padStart(2, "0") : "";
@@ -1526,9 +1545,12 @@ let UseTimeInput = class UseTimeInput extends UseLocaleElement {
1526
1545
  if (this.fractionalSecondInput) this.fractionalSecondInput.value = this.#valueData.fractionalSecond ? this.#valueData.fractionalSecond.padStart(3, "0") : "";
1527
1546
  if (this.dayPeriodInput) this.dayPeriodInput.value = this.#valueData.dayPeriod ? this.#ariaLabels[this.#valueData.dayPeriod] ?? "" : "";
1528
1547
  }
1529
- #formatParts = [];
1548
+ #formatParts;
1530
1549
  #initializeHourFormat() {
1531
- if (!this.hourFormat) this.hourFormat = new Intl.DateTimeFormat(this.lang, { hour: "numeric" }).resolvedOptions().hour12 ? "12" : "24";
1550
+ if (!this.hourFormat) {
1551
+ const formatter = new Intl.DateTimeFormat(this.lang, { hour: "numeric" });
1552
+ this.hourFormat = formatter.resolvedOptions().hour12 ? "12" : "24";
1553
+ }
1532
1554
  }
1533
1555
  #initialFormatParts() {
1534
1556
  try {
@@ -1545,7 +1567,8 @@ let UseTimeInput = class UseTimeInput extends UseLocaleElement {
1545
1567
  const formatter = new Intl.DateTimeFormat(this.lang, options);
1546
1568
  const date = new Date(2024, 0, 1, 12, 30, 45);
1547
1569
  const parts = formatter.formatToParts(date);
1548
- this.#maxHours = !!formatter.resolvedOptions().hour12 && this.dayPeriod ? 12 : 23;
1570
+ const usesDayPeriod = !!formatter.resolvedOptions().hour12 && this.dayPeriod;
1571
+ this.#maxHours = usesDayPeriod ? 12 : 23;
1549
1572
  this.#ariaLabels = getDateTimeAriaLabels(this.lang);
1550
1573
  const [amChar, pmChar] = this.#ariaLabels.dayPeriod.split("/").map((char) => char.toLowerCase().charAt(0));
1551
1574
  this.#amChar = amChar;
@@ -1941,7 +1964,7 @@ let UseTree = class UseTree extends LitElement {
1941
1964
  }
1942
1965
  #id;
1943
1966
  #internals;
1944
- #value = new FormData();
1967
+ #value;
1945
1968
  set disabled(flag) {
1946
1969
  if (flag) this.#internals.states.add("disabled");
1947
1970
  else this.#internals.states.delete("disabled");
@@ -1961,15 +1984,18 @@ let UseTree = class UseTree extends LitElement {
1961
1984
  }
1962
1985
  constructor() {
1963
1986
  super();
1987
+ this.#value = new FormData();
1964
1988
  this.multiple = false;
1965
1989
  this.lazyItems = [];
1990
+ this.#mouseDownTarget = null;
1991
+ this.#activeOption = null;
1966
1992
  this.#id = createId();
1967
1993
  this.#internals = this.attachInternals();
1968
1994
  if (this.hasAttribute("disabled")) this.#internals.states.add("disabled");
1969
1995
  this.addEventListener("focusin", this.#handleFocusIn);
1970
1996
  this.addEventListener("focusout", this.#handleFocusOut);
1971
1997
  }
1972
- #mouseDownTarget = null;
1998
+ #mouseDownTarget;
1973
1999
  #handleMouseDown(event) {
1974
2000
  this.#mouseDownTarget = event.target;
1975
2001
  this.#mouseDownTarget?.setAttribute("tabindex", "0");
@@ -2044,7 +2070,7 @@ let UseTree = class UseTree extends LitElement {
2044
2070
  }
2045
2071
  });
2046
2072
  }
2047
- #activeOption = null;
2073
+ #activeOption;
2048
2074
  get activeOption() {
2049
2075
  return this.#activeOption;
2050
2076
  }
@@ -2231,19 +2257,26 @@ var UseFocusgroup = class extends HTMLElement {
2231
2257
  static {
2232
2258
  this.observedAttributes = ["features"];
2233
2259
  }
2234
- #tabbables = [];
2260
+ #tabbables;
2235
2261
  #arrowLeftKey;
2236
2262
  #arrowRightKey;
2237
2263
  #arrowDownKey;
2238
2264
  #arrowUpKey;
2239
- #noMemory = false;
2240
- #wrap = true;
2241
- #parent = null;
2242
- #nested = false;
2265
+ #noMemory;
2266
+ #wrap;
2267
+ #parent;
2268
+ #nested;
2243
2269
  constructor() {
2244
2270
  super();
2245
2271
  this.features = "";
2246
2272
  this.focusedElement = null;
2273
+ this.#tabbables = [];
2274
+ this.#noMemory = false;
2275
+ this.#wrap = true;
2276
+ this.#parent = null;
2277
+ this.#nested = false;
2278
+ this.#observer = null;
2279
+ this.#promoted = false;
2247
2280
  }
2248
2281
  connectedCallback() {
2249
2282
  this.#initializeFeatures();
@@ -2314,7 +2347,7 @@ var UseFocusgroup = class extends HTMLElement {
2314
2347
  this.#initializeTabbables(true);
2315
2348
  }, true);
2316
2349
  }
2317
- #observer = null;
2350
+ #observer;
2318
2351
  #watchMutations() {
2319
2352
  if (this.#observer) return;
2320
2353
  this.#observer = new MutationObserver(() => {
@@ -2375,7 +2408,7 @@ var UseFocusgroup = class extends HTMLElement {
2375
2408
  this.#unwatchMutations();
2376
2409
  this.#watchMutations();
2377
2410
  }
2378
- #promoted = false;
2411
+ #promoted;
2379
2412
  /**
2380
2413
  * Whether the use-focusgroup is promoted to the top of the tab order inside a parent use-focusgroup.
2381
2414
  *
@@ -2561,7 +2594,7 @@ const TABBABLE_SELECTOR = `
2561
2594
  ))
2562
2595
  `;
2563
2596
  let UseMenu = class UseMenu extends LitElement {
2564
- #tabbables = [];
2597
+ #tabbables;
2565
2598
  static {
2566
2599
  this.shadowRootOptions = {
2567
2600
  ...LitElement.shadowRootOptions,
@@ -2570,7 +2603,7 @@ let UseMenu = class UseMenu extends LitElement {
2570
2603
  }
2571
2604
  #id;
2572
2605
  #internals;
2573
- #itemLabels = [];
2606
+ #itemLabels;
2574
2607
  set disabled(flag) {
2575
2608
  this.#initializeDisabled(flag);
2576
2609
  }
@@ -2579,6 +2612,8 @@ let UseMenu = class UseMenu extends LitElement {
2579
2612
  }
2580
2613
  constructor() {
2581
2614
  super();
2615
+ this.#tabbables = [];
2616
+ this.#itemLabels = [];
2582
2617
  this.trigger = null;
2583
2618
  this.#id = createId();
2584
2619
  this.#internals = this.attachInternals();
@@ -2768,8 +2803,8 @@ var UseCalendarBase = class extends UseLocaleElement {
2768
2803
  this.formAssociated = true;
2769
2804
  }
2770
2805
  #internals;
2771
- #stringValue = "";
2772
- #firstRender = false;
2806
+ #stringValue;
2807
+ #firstRender;
2773
2808
  get navigationEnabled() {
2774
2809
  return this.navigation !== "off";
2775
2810
  }
@@ -2782,19 +2817,16 @@ var UseCalendarBase = class extends UseLocaleElement {
2782
2817
  get #showNextMonth() {
2783
2818
  return !` ${this.hiddenmonths} `.includes(" next ");
2784
2819
  }
2785
- #startDate = null;
2786
- #endDate = null;
2787
- #activeDate = new Date(this.year, this.month - 1, 1);
2788
- #pickerMode = "days";
2789
- #pickerHeight = null;
2790
- #todayLabel = new Intl.DateTimeFormat(navigator.language, {
2791
- month: "long",
2792
- year: "numeric",
2793
- day: "numeric",
2794
- timeZone: "UTC"
2795
- }).format(/* @__PURE__ */ new Date());
2820
+ #startDate;
2821
+ #endDate;
2822
+ #activeDate;
2823
+ #pickerMode;
2824
+ #pickerHeight;
2825
+ #todayLabel;
2796
2826
  constructor() {
2797
2827
  super();
2828
+ this.#stringValue = "";
2829
+ this.#firstRender = false;
2798
2830
  this.year = (/* @__PURE__ */ new Date()).getFullYear();
2799
2831
  this.month = (/* @__PURE__ */ new Date()).getMonth() + 1;
2800
2832
  this.controls = false;
@@ -2803,7 +2835,86 @@ var UseCalendarBase = class extends UseLocaleElement {
2803
2835
  this.focusmode = "cell";
2804
2836
  this.name = "";
2805
2837
  this.selected = [];
2838
+ this.#startDate = null;
2839
+ this.#endDate = null;
2840
+ this.#activeDate = new Date(this.year, this.month - 1, 1);
2841
+ this.#pickerMode = "days";
2842
+ this.#pickerHeight = null;
2843
+ this.#todayLabel = new Intl.DateTimeFormat(navigator.language, {
2844
+ month: "long",
2845
+ year: "numeric",
2846
+ day: "numeric",
2847
+ timeZone: "UTC"
2848
+ }).format(/* @__PURE__ */ new Date());
2849
+ this.#focusableElements = /* @__PURE__ */ new Map();
2806
2850
  this.renderDay = ({ day }) => String(day);
2851
+ this.#mouseDownTarget = null;
2852
+ this.#togglePicker = () => {
2853
+ const opening = this.#pickerMode !== "picker";
2854
+ if (opening) {
2855
+ const grid = this.shadowRoot?.querySelector("[part=\"grid\"]");
2856
+ this.#pickerHeight = grid?.offsetHeight ?? null;
2857
+ }
2858
+ this.#pickerMode = opening ? "picker" : "days";
2859
+ this.requestUpdate();
2860
+ if (opening) this.updateComplete.then(() => {
2861
+ const picker = this.shadowRoot?.querySelector("[part=\"picker\"]");
2862
+ const currentBtn = this.shadowRoot?.querySelector("[part~=\"picker-month-current\"]");
2863
+ if (picker && currentBtn) {
2864
+ const pickerRect = picker.getBoundingClientRect();
2865
+ const btnRect = currentBtn.getBoundingClientRect();
2866
+ picker.scrollTop = picker.scrollTop + (btnRect.top - pickerRect.top) - picker.clientHeight / 2 + btnRect.height / 2;
2867
+ }
2868
+ currentBtn?.focus();
2869
+ });
2870
+ };
2871
+ this.#selectMonth = (month, year) => {
2872
+ this.month = month;
2873
+ this.year = year;
2874
+ this.#activeDate = new Date(year, month - 1, 1);
2875
+ this.#pickerMode = "days";
2876
+ this.requestUpdate();
2877
+ this.updateComplete.then(() => {
2878
+ this.shadowRoot?.querySelector("[part=\"title-button\"]")?.focus();
2879
+ });
2880
+ };
2881
+ this.#handlePickerKeyDown = (event) => {
2882
+ if (this.#pickerMode !== "picker") return;
2883
+ if (event.key === "Escape") {
2884
+ event.stopPropagation();
2885
+ this.#pickerMode = "days";
2886
+ this.requestUpdate();
2887
+ this.updateComplete.then(() => {
2888
+ this.shadowRoot?.querySelector("[part=\"title-button\"]")?.focus();
2889
+ });
2890
+ return;
2891
+ }
2892
+ const btns = Array.from(this.shadowRoot.querySelectorAll("[part~=\"picker-month\"]"));
2893
+ const idx = btns.indexOf(this.shadowRoot.activeElement);
2894
+ if (idx === -1) return;
2895
+ const yearSize = 12;
2896
+ let next = -1;
2897
+ if (event.key === "ArrowRight") next = Math.min(idx + 1, btns.length - 1);
2898
+ else if (event.key === "ArrowLeft") next = Math.max(idx - 1, 0);
2899
+ else if (event.key === "ArrowDown") next = Math.min(idx + 4, btns.length - 1);
2900
+ else if (event.key === "ArrowUp") next = Math.max(idx - 4, 0);
2901
+ else if (event.key === "Home") next = Math.floor(idx / yearSize) * yearSize;
2902
+ else if (event.key === "End") next = Math.min(Math.floor(idx / yearSize) * yearSize + yearSize - 1, btns.length - 1);
2903
+ if (next > -1) {
2904
+ event.preventDefault();
2905
+ btns.forEach((b, i) => {
2906
+ b.tabIndex = i === next ? 0 : -1;
2907
+ });
2908
+ btns[next].focus();
2909
+ btns[next].scrollIntoView({ block: "nearest" });
2910
+ }
2911
+ };
2912
+ this.#handlePickerFocusOut = (event) => {
2913
+ if (this.#pickerMode === "picker" && !this.shadowRoot.contains(event.relatedTarget)) {
2914
+ this.#pickerMode = "days";
2915
+ this.requestUpdate();
2916
+ }
2917
+ };
2807
2918
  this.#internals = this.attachInternals();
2808
2919
  }
2809
2920
  connectedCallback() {
@@ -2954,7 +3065,7 @@ var UseCalendarBase = class extends UseLocaleElement {
2954
3065
  #formatDate(year, month, day) {
2955
3066
  return `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`;
2956
3067
  }
2957
- #focusableElements = /* @__PURE__ */ new Map();
3068
+ #focusableElements;
2958
3069
  #initializeTabbables() {
2959
3070
  this.#focusableElements.clear();
2960
3071
  tabbable(this).concat(tabbable(this.gridBody)).forEach((el) => {
@@ -3074,7 +3185,7 @@ var UseCalendarBase = class extends UseLocaleElement {
3074
3185
  get #activeDateString() {
3075
3186
  return this.#activeDate.toISOString().split("T")[0];
3076
3187
  }
3077
- #mouseDownTarget = null;
3188
+ #mouseDownTarget;
3078
3189
  #handleMouseDown(event) {
3079
3190
  this.#mouseDownTarget = this.#getTargetCell(event.target);
3080
3191
  this.#activeDate.setDate(Number(this.#mouseDownTarget?.getAttribute("data-usewc-day")) || 1);
@@ -3171,69 +3282,10 @@ var UseCalendarBase = class extends UseLocaleElement {
3171
3282
  if (date1 == null || date2 == null) return false;
3172
3283
  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
3173
3284
  }
3174
- #togglePicker = () => {
3175
- const opening = this.#pickerMode !== "picker";
3176
- if (opening) this.#pickerHeight = (this.shadowRoot?.querySelector("[part=\"grid\"]"))?.offsetHeight ?? null;
3177
- this.#pickerMode = opening ? "picker" : "days";
3178
- this.requestUpdate();
3179
- if (opening) this.updateComplete.then(() => {
3180
- const picker = this.shadowRoot?.querySelector("[part=\"picker\"]");
3181
- const currentBtn = this.shadowRoot?.querySelector("[part~=\"picker-month-current\"]");
3182
- if (picker && currentBtn) {
3183
- const pickerRect = picker.getBoundingClientRect();
3184
- const btnRect = currentBtn.getBoundingClientRect();
3185
- picker.scrollTop = picker.scrollTop + (btnRect.top - pickerRect.top) - picker.clientHeight / 2 + btnRect.height / 2;
3186
- }
3187
- currentBtn?.focus();
3188
- });
3189
- };
3190
- #selectMonth = (month, year) => {
3191
- this.month = month;
3192
- this.year = year;
3193
- this.#activeDate = new Date(year, month - 1, 1);
3194
- this.#pickerMode = "days";
3195
- this.requestUpdate();
3196
- this.updateComplete.then(() => {
3197
- this.shadowRoot?.querySelector("[part=\"title-button\"]")?.focus();
3198
- });
3199
- };
3200
- #handlePickerKeyDown = (event) => {
3201
- if (this.#pickerMode !== "picker") return;
3202
- if (event.key === "Escape") {
3203
- event.stopPropagation();
3204
- this.#pickerMode = "days";
3205
- this.requestUpdate();
3206
- this.updateComplete.then(() => {
3207
- this.shadowRoot?.querySelector("[part=\"title-button\"]")?.focus();
3208
- });
3209
- return;
3210
- }
3211
- const btns = Array.from(this.shadowRoot.querySelectorAll("[part~=\"picker-month\"]"));
3212
- const idx = btns.indexOf(this.shadowRoot.activeElement);
3213
- if (idx === -1) return;
3214
- const yearSize = 12;
3215
- let next = -1;
3216
- if (event.key === "ArrowRight") next = Math.min(idx + 1, btns.length - 1);
3217
- else if (event.key === "ArrowLeft") next = Math.max(idx - 1, 0);
3218
- else if (event.key === "ArrowDown") next = Math.min(idx + 4, btns.length - 1);
3219
- else if (event.key === "ArrowUp") next = Math.max(idx - 4, 0);
3220
- else if (event.key === "Home") next = Math.floor(idx / yearSize) * yearSize;
3221
- else if (event.key === "End") next = Math.min(Math.floor(idx / yearSize) * yearSize + yearSize - 1, btns.length - 1);
3222
- if (next > -1) {
3223
- event.preventDefault();
3224
- btns.forEach((b, i) => {
3225
- b.tabIndex = i === next ? 0 : -1;
3226
- });
3227
- btns[next].focus();
3228
- btns[next].scrollIntoView({ block: "nearest" });
3229
- }
3230
- };
3231
- #handlePickerFocusOut = (event) => {
3232
- if (this.#pickerMode === "picker" && !this.shadowRoot.contains(event.relatedTarget)) {
3233
- this.#pickerMode = "days";
3234
- this.requestUpdate();
3235
- }
3236
- };
3285
+ #togglePicker;
3286
+ #selectMonth;
3287
+ #handlePickerKeyDown;
3288
+ #handlePickerFocusOut;
3237
3289
  #renderPicker() {
3238
3290
  const months = getMonthNames(this.lang, "short");
3239
3291
  const startYear = this.min ? this.#parseDate(this.min)?.getFullYear() ?? 1970 : 1970;
@@ -3716,14 +3768,90 @@ let UseMonthPicker = class UseMonthPicker extends UseLocaleElement {
3716
3768
  `;
3717
3769
  }
3718
3770
  #internals;
3719
- #value = "";
3771
+ #value;
3720
3772
  constructor() {
3721
3773
  super();
3774
+ this.#value = "";
3722
3775
  this.year = (/* @__PURE__ */ new Date()).getFullYear();
3723
3776
  this.min = "";
3724
3777
  this.max = "";
3725
3778
  this.navigation = "on";
3726
3779
  this.renderMonth = ({ name }) => name;
3780
+ this.#handleKeyDown = (event) => {
3781
+ if (!this.navigationEnabled) return;
3782
+ const buttons = Array.from(this.shadowRoot.querySelectorAll("[part~=\"month\"]"));
3783
+ const idx = buttons.indexOf(this.shadowRoot.activeElement);
3784
+ if (idx === -1) return;
3785
+ let next = -1;
3786
+ let yearDelta = 0;
3787
+ switch (event.key) {
3788
+ case "ArrowRight":
3789
+ if (idx === 11 && this.#navigationWrap) {
3790
+ yearDelta = 1;
3791
+ next = 0;
3792
+ } else next = Math.min(idx + 1, 11);
3793
+ break;
3794
+ case "ArrowLeft":
3795
+ if (idx === 0 && this.#navigationWrap) {
3796
+ yearDelta = -1;
3797
+ next = 11;
3798
+ } else next = Math.max(idx - 1, 0);
3799
+ break;
3800
+ case "ArrowDown":
3801
+ if (idx + 4 > 11 && this.#navigationWrap) {
3802
+ yearDelta = 1;
3803
+ next = idx + 4 - 12;
3804
+ } else next = Math.min(idx + 4, 11);
3805
+ break;
3806
+ case "ArrowUp":
3807
+ if (idx - 4 < 0 && this.#navigationWrap) {
3808
+ yearDelta = -1;
3809
+ next = idx - 4 + 12;
3810
+ } else next = Math.max(idx - 4, 0);
3811
+ break;
3812
+ case "Home":
3813
+ next = 0;
3814
+ break;
3815
+ case "End":
3816
+ next = 11;
3817
+ break;
3818
+ case "PageDown":
3819
+ yearDelta = 1;
3820
+ next = idx;
3821
+ break;
3822
+ case "PageUp":
3823
+ yearDelta = -1;
3824
+ next = idx;
3825
+ break;
3826
+ case "Enter":
3827
+ case " ":
3828
+ event.preventDefault();
3829
+ this.#selectMonth(idx + 1);
3830
+ return;
3831
+ default: return;
3832
+ }
3833
+ event.preventDefault();
3834
+ if (yearDelta !== 0) {
3835
+ const newYear = this.year + yearDelta;
3836
+ const minYear = this.#minYear;
3837
+ const maxYear = this.#maxYear;
3838
+ if (!(yearDelta < 0 && (minYear === null || newYear >= minYear) || yearDelta > 0 && (maxYear === null || newYear <= maxYear))) return;
3839
+ this.year = newYear;
3840
+ this.requestUpdate();
3841
+ this.updateComplete.then(() => {
3842
+ const newButtons = Array.from(this.shadowRoot.querySelectorAll("[part~=\"month\"]"));
3843
+ newButtons.forEach((b, i) => {
3844
+ b.tabIndex = i === next ? 0 : -1;
3845
+ });
3846
+ newButtons[next]?.focus();
3847
+ });
3848
+ } else if (next > -1) {
3849
+ buttons.forEach((b, i) => {
3850
+ b.tabIndex = i === next ? 0 : -1;
3851
+ });
3852
+ buttons[next].focus();
3853
+ }
3854
+ };
3727
3855
  this.#internals = this.attachInternals();
3728
3856
  const initialValue = this.getAttribute("value") ?? "";
3729
3857
  if (initialValue) {
@@ -3815,81 +3943,7 @@ let UseMonthPicker = class UseMonthPicker extends UseLocaleElement {
3815
3943
  composed: true
3816
3944
  }));
3817
3945
  }
3818
- #handleKeyDown = (event) => {
3819
- if (!this.navigationEnabled) return;
3820
- const buttons = Array.from(this.shadowRoot.querySelectorAll("[part~=\"month\"]"));
3821
- const idx = buttons.indexOf(this.shadowRoot.activeElement);
3822
- if (idx === -1) return;
3823
- let next = -1;
3824
- let yearDelta = 0;
3825
- switch (event.key) {
3826
- case "ArrowRight":
3827
- if (idx === 11 && this.#navigationWrap) {
3828
- yearDelta = 1;
3829
- next = 0;
3830
- } else next = Math.min(idx + 1, 11);
3831
- break;
3832
- case "ArrowLeft":
3833
- if (idx === 0 && this.#navigationWrap) {
3834
- yearDelta = -1;
3835
- next = 11;
3836
- } else next = Math.max(idx - 1, 0);
3837
- break;
3838
- case "ArrowDown":
3839
- if (idx + 4 > 11 && this.#navigationWrap) {
3840
- yearDelta = 1;
3841
- next = idx + 4 - 12;
3842
- } else next = Math.min(idx + 4, 11);
3843
- break;
3844
- case "ArrowUp":
3845
- if (idx - 4 < 0 && this.#navigationWrap) {
3846
- yearDelta = -1;
3847
- next = idx - 4 + 12;
3848
- } else next = Math.max(idx - 4, 0);
3849
- break;
3850
- case "Home":
3851
- next = 0;
3852
- break;
3853
- case "End":
3854
- next = 11;
3855
- break;
3856
- case "PageDown":
3857
- yearDelta = 1;
3858
- next = idx;
3859
- break;
3860
- case "PageUp":
3861
- yearDelta = -1;
3862
- next = idx;
3863
- break;
3864
- case "Enter":
3865
- case " ":
3866
- event.preventDefault();
3867
- this.#selectMonth(idx + 1);
3868
- return;
3869
- default: return;
3870
- }
3871
- event.preventDefault();
3872
- if (yearDelta !== 0) {
3873
- const newYear = this.year + yearDelta;
3874
- const minYear = this.#minYear;
3875
- const maxYear = this.#maxYear;
3876
- if (!(yearDelta < 0 && (minYear === null || newYear >= minYear) || yearDelta > 0 && (maxYear === null || newYear <= maxYear))) return;
3877
- this.year = newYear;
3878
- this.requestUpdate();
3879
- this.updateComplete.then(() => {
3880
- const newButtons = Array.from(this.shadowRoot.querySelectorAll("[part~=\"month\"]"));
3881
- newButtons.forEach((b, i) => {
3882
- b.tabIndex = i === next ? 0 : -1;
3883
- });
3884
- newButtons[next]?.focus();
3885
- });
3886
- } else if (next > -1) {
3887
- buttons.forEach((b, i) => {
3888
- b.tabIndex = i === next ? 0 : -1;
3889
- });
3890
- buttons[next].focus();
3891
- }
3892
- };
3946
+ #handleKeyDown;
3893
3947
  render() {
3894
3948
  const today = /* @__PURE__ */ new Date();
3895
3949
  const todayYear = today.getFullYear();
@@ -4000,6 +4054,9 @@ let UseDatetimeInput = class UseDatetimeInput extends UseLocaleElement {
4000
4054
  this.seconds = false;
4001
4055
  this.fractionalSeconds = false;
4002
4056
  this.dayPeriod = false;
4057
+ this.#internalValue = "";
4058
+ this.#dateValue = "";
4059
+ this.#timeValue = "";
4003
4060
  this.#internals = this.attachInternals();
4004
4061
  this.#id = this.hasAttribute("id") ? this.getAttribute("id") : createId();
4005
4062
  if (this.hasAttribute("disabled")) this.#internals.states.add("disabled");
@@ -4026,9 +4083,9 @@ let UseDatetimeInput = class UseDatetimeInput extends UseLocaleElement {
4026
4083
  get readOnly() {
4027
4084
  return this.#internals.states.has("readonly");
4028
4085
  }
4029
- #internalValue = "";
4030
- #dateValue = "";
4031
- #timeValue = "";
4086
+ #internalValue;
4087
+ #dateValue;
4088
+ #timeValue;
4032
4089
  /** @default '' */
4033
4090
  get value() {
4034
4091
  return this.#internalValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-wc",
3
- "version": "1.0.0-pre.42",
3
+ "version": "1.0.0-pre.43",
4
4
  "private": false,
5
5
  "homepage": "https://usewc.com",
6
6
  "bugs": "https://github.com/dang-rabbits/use-wc/issues",
@@ -62,10 +62,20 @@
62
62
  "storybook-addon-tag-badges": "^1.4.0",
63
63
  "typescript": "^5.9.3",
64
64
  "typescript-eslint": "^8.29.1",
65
- "vite-plus": "^0.1.11",
65
+ "vite-plus": "^0.1.24",
66
66
  "vitest-browser-lit": "^1.0.1"
67
67
  },
68
68
  "overrides": {
69
+ "@actions/http-client": {
70
+ "undici": "^6.27.0"
71
+ },
72
+ "@semantic-release/github": {
73
+ "undici": "^7.28.0"
74
+ },
75
+ "brace-expansion": "^5.0.6",
76
+ "esbuild": "^0.28.1",
77
+ "npm": "^11.18.0",
78
+ "postcss": "^8.5.10",
69
79
  "storybook": "$storybook",
70
80
  "vite": "npm:@voidzero-dev/vite-plus-core@latest",
71
81
  "vitest": "npm:@voidzero-dev/vite-plus-test@latest"