(open = false)} onclick={(e) => { if (e.target === dialogEl) open = false; }} aria-label={t().styles.title} >

{t().styles.title}

    {#if isTable} {#each tableList as s (s.name)}
  • {#if editingName === s.name} editingName === s.name && commitRename(s.name, e.currentTarget.value)} onkeydown={(e) => { if (e.key === 'Enter') e.currentTarget.blur(); else if (e.key === 'Escape') { e.preventDefault(); editingName = null; } }} /> {:else} {/if}
    • {/each} {/if} {#each rows as { style: s, depth } (s.name)}
  • {#if editingName === s.name} editingName === s.name && commitRename(s.name, e.currentTarget.value)} onkeydown={(e) => { if (e.key === 'Enter') e.currentTarget.blur(); // Escape would otherwise close the whole dialog. else if (e.key === 'Escape') { e.preventDefault(); editingName = null; } }} /> {:else} {/if}
    • {/each}
{#if isTable}
{#each Array(PREVIEW_ROWS) as _, r} {#each Array(PREVIEW_COLS) as _, c} {/each} {/each}
{t().styles.fill} {#key current + region} editRegion({ fill: c })} onClear={() => editRegion({ fill: undefined })} > {#snippet icon()} {/snippet} {/key}
{:else}
{style.name}
{/if}
{t().styles.color} {#key current + region} editText({ color: c })} onClear={() => editText({ color: undefined })} > {#snippet icon()} {/snippet} {/key}
{#if isTable}
{#each BORDER_FIELDS as { key, label }}
{label()}
{#key current + key} editTable({ [key]: borderValue(borderParts(borderOf(key)).width, c) })} onClear={() => editTable({ [key]: null })} > {#snippet icon()} {/snippet} {/key}
{/each}
{/if} {#if !isChar && !isTable}
{t().styles.alignment}
{#each ALIGNMENTS as a} {/each}
{/if}