@14ch/svelte-ui 0.0.7 → 0.0.8

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 (7) hide show
  1. package/dist/components/ColorPicker.svelte +0 -1
  2. package/dist/components/Combobox.svelte +2 -3
  3. package/dist/components/Dialog.svelte +20 -9
  4. package/dist/components/Drawer.svelte +1 -3
  5. package/dist/components/SegmentedControl.svelte +4 -0
  6. package/dist/components/SnackbarItem.svelte +146 -37
  7. package/package.json +1 -1
package/dist/components/ColorPicker.svelte CHANGED
@@ -167,7 +167,6 @@
167
167
  // Methods
168
168
  // =========================================================================
169
169
 
170
-
171
170
  const handleChange = (event?: Event): void => {
172
171
  // 空文字列の場合はそのまま処理
173
172
  if (localValue && !localValue.startsWith('#')) {
package/dist/components/Combobox.svelte CHANGED
@@ -155,7 +155,6 @@
155
155
  let popupRef = $state<any>();
156
156
  let highlightedIndex = $state(-1);
157
157
  let isFocused = $state(false);
158
- let comboboxRef = $state<HTMLDivElement>();
159
158
 
160
159
  // 各要素のIDを生成
161
160
  const inputId = `${id}-input`;
@@ -479,9 +478,9 @@
479
478
  type="button"
480
479
  class="combobox__option"
481
480
  class:combobox__option--highlighted={index === highlightedIndex}
482
- class:combobox__option--selected={option === value}
481
+ class:combobox__option--selected={option === inputValue}
483
482
  role="option"
484
- aria-selected={option === value}
483
+ aria-selected={option === inputValue}
485
484
  onmousedown={(event) => {
486
485
  event?.preventDefault?.();
487
486
  event?.stopPropagation?.();
package/dist/components/Dialog.svelte CHANGED
@@ -115,7 +115,7 @@
115
115
  return styles.join('; ');
116
116
  });
117
117
 
118
- const dialogClasses = $derived([scrollable && 'scrollable'].filter(Boolean).join(' ')); // dialogクラス自体はcustomClassに含めない
118
+ const dialogClasses = $derived('');
119
119
 
120
120
  const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
121
121
  const ariaDescribedbyValue = $derived(
@@ -136,7 +136,7 @@
136
136
  customStyles={dialogStyles}
137
137
  id={id ? `${id}-modal` : undefined}
138
138
  >
139
- <div class="dialog {scrollable ? 'scrollable' : ''}">
139
+ <div class="dialog {scrollable ? 'dialog--scrollable' : ''}">
140
140
  {#if header || title}
141
141
  <div class="dialog__header">
142
142
  {#if header}
@@ -166,14 +166,15 @@
166
166
  </div>
167
167
  </Modal>
168
168
 
169
- <style>.dialog {
169
+ <style>@charset "UTF-8";
170
+ .dialog {
170
171
  display: flex;
171
172
  flex-direction: column;
172
173
  justify-content: stretch;
173
- max-height: calc(100dvh - 2em - 6px);
174
174
  border: var(--svelte-ui-dialog-border);
175
175
  border-radius: var(--svelte-ui-dialog-border-radius);
176
- overflow: hidden;
176
+ max-height: calc(100dvh - 2em - 6px);
177
+ overflow: auto;
177
178
  }
178
179
 
179
180
  .dialog__header {
@@ -183,7 +184,6 @@
183
184
  justify-content: stretch;
184
185
  min-height: var(--svelte-ui-dialog-header-height);
185
186
  padding: var(--svelte-ui-dialog-padding);
186
- margin-bottom: calc(0px - var(--svelte-ui-dialog-body-padding));
187
187
  }
188
188
  .dialog__header .dialog__title {
189
189
  flex-grow: 1;
@@ -214,15 +214,26 @@
214
214
  border-bottom: 1px solid var(--svelte-ui-border-weak-color);
215
215
  }
216
216
 
217
- :global(.scrollable) .dialog__header {
217
+ /* scrollable=true 時: ヘッダー/フッター固定 + bodyのみスクロール */
218
+ .dialog--scrollable {
219
+ overflow: hidden;
220
+ }
221
+
222
+ .dialog--scrollable .dialog__header {
218
223
  margin-bottom: 0;
219
224
  border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
220
225
  }
221
- :global(.scrollable) .dialog__body {
226
+
227
+ .dialog--scrollable .dialog__body {
222
228
  flex-shrink: 1;
223
229
  padding: var(--svelte-ui-dialog-body-padding);
224
230
  overflow: auto;
225
231
  }
226
- :global(.scrollable) .dialog__footer {
232
+
233
+ .dialog:not(.dialog--scrollable) .dialog__body {
234
+ padding-top: 0;
235
+ }
236
+
237
+ .dialog--scrollable .dialog__footer {
227
238
  border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
228
239
  }</style>
package/dist/components/Drawer.svelte CHANGED
@@ -123,9 +123,7 @@
123
123
  });
124
124
 
125
125
  const drawerClasses = $derived(
126
- ['drawer-wrapper', `drawer-wrapper--${position}`, scrollable && 'drawer-wrapper--scrollable']
127
- .filter(Boolean)
128
- .join(' ')
126
+ ['drawer-wrapper', `drawer-wrapper--${position}`].filter(Boolean).join(' ')
129
127
  );
130
128
 
131
129
  const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);
package/dist/components/SegmentedControl.svelte CHANGED
@@ -528,6 +528,10 @@
528
528
  color: var(--svelte-ui-text-subtle-color, var(--svelte-ui-text-color));
529
529
  white-space: nowrap;
530
530
  cursor: pointer;
531
+ user-select: none;
532
+ -webkit-user-select: none;
533
+ -moz-user-select: none;
534
+ -ms-user-select: none;
531
535
  transition-property: background-color, color;
532
536
  transition-duration: var(--svelte-ui-transition-duration, 0.2s);
533
537
  transition-timing-function: ease;
package/dist/components/SnackbarItem.svelte CHANGED
@@ -112,7 +112,10 @@
112
112
  );
113
113
  const requiredMargin = -containerHeight;
114
114
 
115
- snackbarRef.style.setProperty('--svelte-ui-snackbar-item-collapse-margin', `${requiredMargin}px`);
115
+ snackbarRef.style.setProperty(
116
+ '--svelte-ui-snackbar-item-collapse-margin',
117
+ `${requiredMargin}px`
118
+ );
116
119
 
117
120
  // CSSカスタムプロパティが確実に設定されるまで少し待つ
118
121
  requestAnimationFrame(() => {
@@ -149,7 +152,8 @@
149
152
  class="snackbar-item__content snackbar-item__content--{type} snackbar-item__content--{variant} snackbar-item__content--{position} {visible
150
153
  ? 'snackbar-item__content--visible'
151
154
  : ''}"
152
- style="--svelte-ui-snackbar-item-custom-color: {color ?? 'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
155
+ style="--svelte-ui-snackbar-item-custom-color: {color ??
156
+ 'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
153
157
  role={type === 'error' || type === 'warning' ? 'alert' : 'status'}
154
158
  aria-live={type === 'error' || type === 'warning' ? 'assertive' : 'polite'}
155
159
  aria-atomic="true"
@@ -321,103 +325,208 @@
321
325
 
322
326
  /* Type variants - filled */
323
327
  .snackbar-item__content--filled.snackbar-item__content--info {
324
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-filled-bg));
325
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
328
+ background-color: var(
329
+ --svelte-ui-snackbar-item-custom-color,
330
+ var(--svelte-ui-snackbar-info-filled-bg)
331
+ );
332
+ color: var(
333
+ --svelte-ui-snackbar-item-custom-text-color,
334
+ var(--svelte-ui-snackbar-info-filled-text-color)
335
+ );
326
336
  }
327
337
 
328
338
  .snackbar-item__content--filled.snackbar-item__content--info .snackbar-item__icon {
329
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
339
+ color: var(
340
+ --svelte-ui-snackbar-item-custom-text-color,
341
+ var(--svelte-ui-snackbar-info-filled-text-color)
342
+ );
330
343
  }
331
344
 
332
345
  .snackbar-item__content--filled.snackbar-item__content--success {
333
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-filled-bg));
334
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
346
+ background-color: var(
347
+ --svelte-ui-snackbar-item-custom-color,
348
+ var(--svelte-ui-snackbar-success-filled-bg)
349
+ );
350
+ color: var(
351
+ --svelte-ui-snackbar-item-custom-text-color,
352
+ var(--svelte-ui-snackbar-success-filled-text-color)
353
+ );
335
354
  }
336
355
 
337
356
  .snackbar-item__content--filled.snackbar-item__content--success .snackbar-item__icon {
338
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
357
+ color: var(
358
+ --svelte-ui-snackbar-item-custom-text-color,
359
+ var(--svelte-ui-snackbar-success-filled-text-color)
360
+ );
339
361
  }
340
362
 
341
363
  .snackbar-item__content--filled.snackbar-item__content--warning {
342
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-filled-bg));
343
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
364
+ background-color: var(
365
+ --svelte-ui-snackbar-item-custom-color,
366
+ var(--svelte-ui-snackbar-warning-filled-bg)
367
+ );
368
+ color: var(
369
+ --svelte-ui-snackbar-item-custom-text-color,
370
+ var(--svelte-ui-snackbar-warning-filled-text-color)
371
+ );
344
372
  }
345
373
 
346
374
  .snackbar-item__content--filled.snackbar-item__content--warning .snackbar-item__icon {
347
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
375
+ color: var(
376
+ --svelte-ui-snackbar-item-custom-text-color,
377
+ var(--svelte-ui-snackbar-warning-filled-text-color)
378
+ );
348
379
  }
349
380
 
350
381
  .snackbar-item__content--filled.snackbar-item__content--error {
351
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-filled-bg));
352
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
382
+ background-color: var(
383
+ --svelte-ui-snackbar-item-custom-color,
384
+ var(--svelte-ui-snackbar-error-filled-bg)
385
+ );
386
+ color: var(
387
+ --svelte-ui-snackbar-item-custom-text-color,
388
+ var(--svelte-ui-snackbar-error-filled-text-color)
389
+ );
353
390
  }
354
391
 
355
392
  .snackbar-item__content--filled.snackbar-item__content--error .snackbar-item__icon {
356
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
393
+ color: var(
394
+ --svelte-ui-snackbar-item-custom-text-color,
395
+ var(--svelte-ui-snackbar-error-filled-text-color)
396
+ );
357
397
  }
358
398
 
359
399
  .snackbar-item__content--filled.snackbar-item__content--default {
360
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-filled-bg));
361
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
400
+ background-color: var(
401
+ --svelte-ui-snackbar-item-custom-color,
402
+ var(--svelte-ui-snackbar-default-filled-bg)
403
+ );
404
+ color: var(
405
+ --svelte-ui-snackbar-item-custom-text-color,
406
+ var(--svelte-ui-snackbar-default-filled-text-color)
407
+ );
362
408
  }
363
409
 
364
410
  .snackbar-item__content--filled.snackbar-item__content--default .snackbar-item__icon {
365
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
411
+ color: var(
412
+ --svelte-ui-snackbar-item-custom-text-color,
413
+ var(--svelte-ui-snackbar-default-filled-text-color)
414
+ );
366
415
  }
367
416
 
368
417
  /* Type variants - outlined */
369
418
  .snackbar-item__content--outlined.snackbar-item__content--info {
370
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-bg));
371
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
419
+ background-color: var(
420
+ --svelte-ui-snackbar-item-custom-color,
421
+ var(--svelte-ui-snackbar-info-outlined-bg)
422
+ );
423
+ color: var(
424
+ --svelte-ui-snackbar-item-custom-text-color,
425
+ var(--svelte-ui-snackbar-info-outlined-text-color)
426
+ );
372
427
  box-shadow: inset 0 0 0 1px
373
- var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-border-color));
428
+ var(
429
+ --svelte-ui-snackbar-item-custom-color,
430
+ var(--svelte-ui-snackbar-info-outlined-border-color)
431
+ );
374
432
  }
375
433
 
376
434
  .snackbar-item__content--outlined.snackbar-item__content--info .snackbar-item__icon {
377
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
435
+ color: var(
436
+ --svelte-ui-snackbar-item-custom-text-color,
437
+ var(--svelte-ui-snackbar-info-outlined-text-color)
438
+ );
378
439
  }
379
440
 
380
441
  .snackbar-item__content--outlined.snackbar-item__content--success {
381
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-bg));
382
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
442
+ background-color: var(
443
+ --svelte-ui-snackbar-item-custom-color,
444
+ var(--svelte-ui-snackbar-success-outlined-bg)
445
+ );
446
+ color: var(
447
+ --svelte-ui-snackbar-item-custom-text-color,
448
+ var(--svelte-ui-snackbar-success-outlined-text-color)
449
+ );
383
450
  box-shadow: inset 0 0 0 1px
384
- var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-border-color));
451
+ var(
452
+ --svelte-ui-snackbar-item-custom-color,
453
+ var(--svelte-ui-snackbar-success-outlined-border-color)
454
+ );
385
455
  }
386
456
 
387
457
  .snackbar-item__content--outlined.snackbar-item__content--success .snackbar-item__icon {
388
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
458
+ color: var(
459
+ --svelte-ui-snackbar-item-custom-text-color,
460
+ var(--svelte-ui-snackbar-success-outlined-text-color)
461
+ );
389
462
  }
390
463
 
391
464
  .snackbar-item__content--outlined.snackbar-item__content--warning {
392
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-bg));
393
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
465
+ background-color: var(
466
+ --svelte-ui-snackbar-item-custom-color,
467
+ var(--svelte-ui-snackbar-warning-outlined-bg)
468
+ );
469
+ color: var(
470
+ --svelte-ui-snackbar-item-custom-text-color,
471
+ var(--svelte-ui-snackbar-warning-outlined-text-color)
472
+ );
394
473
  box-shadow: inset 0 0 0 1px
395
- var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-border-color));
474
+ var(
475
+ --svelte-ui-snackbar-item-custom-color,
476
+ var(--svelte-ui-snackbar-warning-outlined-border-color)
477
+ );
396
478
  }
397
479
 
398
480
  .snackbar-item__content--outlined.snackbar-item__content--warning .snackbar-item__icon {
399
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
481
+ color: var(
482
+ --svelte-ui-snackbar-item-custom-text-color,
483
+ var(--svelte-ui-snackbar-warning-outlined-text-color)
484
+ );
400
485
  }
401
486
 
402
487
  .snackbar-item__content--outlined.snackbar-item__content--error {
403
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-bg));
404
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
488
+ background-color: var(
489
+ --svelte-ui-snackbar-item-custom-color,
490
+ var(--svelte-ui-snackbar-error-outlined-bg)
491
+ );
492
+ color: var(
493
+ --svelte-ui-snackbar-item-custom-text-color,
494
+ var(--svelte-ui-snackbar-error-outlined-text-color)
495
+ );
405
496
  box-shadow: inset 0 0 0 1px
406
- var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-border-color));
497
+ var(
498
+ --svelte-ui-snackbar-item-custom-color,
499
+ var(--svelte-ui-snackbar-error-outlined-border-color)
500
+ );
407
501
  }
408
502
 
409
503
  .snackbar-item__content--outlined.snackbar-item__content--error .snackbar-item__icon {
410
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
504
+ color: var(
505
+ --svelte-ui-snackbar-item-custom-text-color,
506
+ var(--svelte-ui-snackbar-error-outlined-text-color)
507
+ );
411
508
  }
412
509
 
413
510
  .snackbar-item__content--outlined.snackbar-item__content--default {
414
- background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-bg));
415
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
511
+ background-color: var(
512
+ --svelte-ui-snackbar-item-custom-color,
513
+ var(--svelte-ui-snackbar-default-outlined-bg)
514
+ );
515
+ color: var(
516
+ --svelte-ui-snackbar-item-custom-text-color,
517
+ var(--svelte-ui-snackbar-default-outlined-text-color)
518
+ );
416
519
  box-shadow: inset 0 0 0 1px
417
- var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-border-color));
520
+ var(
521
+ --svelte-ui-snackbar-item-custom-color,
522
+ var(--svelte-ui-snackbar-default-outlined-border-color)
523
+ );
418
524
  }
419
525
 
420
526
  .snackbar-item__content--outlined.snackbar-item__content--default .snackbar-item__icon {
421
- color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
527
+ color: var(
528
+ --svelte-ui-snackbar-item-custom-text-color,
529
+ var(--svelte-ui-snackbar-default-outlined-text-color)
530
+ );
422
531
  }
423
532
  </style>
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@14ch/svelte-ui",
3
3
  "description": "Modern Svelte UI components library with TypeScript support",
4
4
  "private": false,
5
- "version": "0.0.7",
5
+ "version": "0.0.8",
6
6
  "type": "module",
7
7
  "keywords": [
8
8
  "svelte",