@14ch/svelte-ui 0.0.67 → 0.0.68
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.
- package/dist/components/Checkbox.svelte +1 -1
- package/dist/components/ColorPicker.svelte +3 -4
- package/dist/components/MultiSelect.svelte +8 -6
- package/dist/components/Radio.svelte +1 -1
- package/dist/components/Select.svelte +7 -7
- package/dist/components/StepNav.svelte +1 -1
- package/package.json +1 -1
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
|
|
124
124
|
let {
|
|
125
125
|
// 基本プロパティ
|
|
126
|
-
value = $bindable(
|
|
126
|
+
value = $bindable(),
|
|
127
127
|
|
|
128
128
|
// HTML属性系
|
|
129
129
|
id = `colorpicker-${Math.random().toString(36).substring(2, 15)}`,
|
|
@@ -377,8 +377,7 @@
|
|
|
377
377
|
</script>
|
|
378
378
|
|
|
379
379
|
<div
|
|
380
|
-
class="color-picker
|
|
381
|
-
focus-style-{focusStyle}"
|
|
380
|
+
class="color-picker"
|
|
382
381
|
class:color-picker--full-width={fullWidth}
|
|
383
382
|
class:color-picker--rounded={rounded}
|
|
384
383
|
class:color-picker--clearable={clearable}
|
|
@@ -436,7 +435,7 @@
|
|
|
436
435
|
<input
|
|
437
436
|
type="color"
|
|
438
437
|
aria-label={ariaLabel ?? t('colorpicker.chooseColor')}
|
|
439
|
-
bind:value
|
|
438
|
+
bind:value={localValue}
|
|
440
439
|
onchange={handleValueChange}
|
|
441
440
|
onfocus={handleFocus}
|
|
442
441
|
onblur={handleBlur}
|
|
@@ -201,7 +201,7 @@
|
|
|
201
201
|
aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
|
|
202
202
|
style:min-width="{triggerWidth}px"
|
|
203
203
|
>
|
|
204
|
-
{#each options as option
|
|
204
|
+
{#each options as option (option.value)}
|
|
205
205
|
<li role="presentation" class="multi-select__item">
|
|
206
206
|
<Checkbox
|
|
207
207
|
value={value.includes(option.value)}
|
|
@@ -250,10 +250,6 @@
|
|
|
250
250
|
display: flex;
|
|
251
251
|
align-items: center;
|
|
252
252
|
}
|
|
253
|
-
.multi-select__trigger:focus, .multi-select__trigger:focus-visible {
|
|
254
|
-
outline: var(--svelte-ui-focus-outline-inner);
|
|
255
|
-
outline-offset: var(--svelte-ui-focus-outline-offset-inner);
|
|
256
|
-
}
|
|
257
253
|
|
|
258
254
|
.multi-select__inner {
|
|
259
255
|
position: relative;
|
|
@@ -311,10 +307,16 @@
|
|
|
311
307
|
outline-offset: var(--svelte-ui-focus-outline-offset-inner);
|
|
312
308
|
}
|
|
313
309
|
|
|
314
|
-
.multi-select
|
|
310
|
+
/* デザインバリアントの背景指定より詳細度を上げるため .multi-select を併記 */
|
|
311
|
+
.multi-select.multi-select--focus-background .multi-select__trigger:focus {
|
|
312
|
+
outline: none;
|
|
315
313
|
background: var(--svelte-ui-hover-overlay);
|
|
316
314
|
}
|
|
317
315
|
|
|
316
|
+
.multi-select--focus-none .multi-select__trigger:focus {
|
|
317
|
+
outline: none;
|
|
318
|
+
}
|
|
319
|
+
|
|
318
320
|
/* =============================================
|
|
319
321
|
* 状態管理
|
|
320
322
|
* ============================================= */
|
|
@@ -412,12 +412,6 @@ select--focus-{focusStyle}"
|
|
|
412
412
|
-webkit-appearance: none;
|
|
413
413
|
-moz-appearance: none;
|
|
414
414
|
appearance: none;
|
|
415
|
-
|
|
416
|
-
&:focus,
|
|
417
|
-
&:focus-visible {
|
|
418
|
-
outline: var(--svelte-ui-focus-outline-inner);
|
|
419
|
-
outline-offset: var(--svelte-ui-focus-outline-offset-inner);
|
|
420
|
-
}
|
|
421
415
|
}
|
|
422
416
|
|
|
423
417
|
.select__dropdown-icon {
|
|
@@ -456,10 +450,16 @@ select--focus-{focusStyle}"
|
|
|
456
450
|
outline-offset: var(--svelte-ui-focus-outline-offset-inner);
|
|
457
451
|
}
|
|
458
452
|
|
|
459
|
-
.select
|
|
453
|
+
/* デザインバリアントの背景指定より詳細度を上げるため .select を併記 */
|
|
454
|
+
.select.select--focus-background select:focus {
|
|
455
|
+
outline: none;
|
|
460
456
|
background: var(--svelte-ui-hover-overlay);
|
|
461
457
|
}
|
|
462
458
|
|
|
459
|
+
.select--focus-none select:focus {
|
|
460
|
+
outline: none;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
463
|
/* =============================================
|
|
464
464
|
* 状態管理（disabled, readonly等）
|
|
465
465
|
* ============================================= */
|