diff --git a/src/lib/components/ribbon/RibbonButton.svelte b/src/lib/components/ribbon/RibbonButton.svelte
index 4726620..e93b525 100644
--- a/src/lib/components/ribbon/RibbonButton.svelte
+++ b/src/lib/components/ribbon/RibbonButton.svelte
@@ -36,7 +36,7 @@
const ICON_SIZE = { big: 28, small: 14, icon: 20 } as const;
-{#snippet face()}
+{#snippet face(withLabel = true)}
{#if content}{@render content()}
{:else if icon}{/if}
@@ -44,13 +44,14 @@
{/if}
- {#if label && variant !== 'icon'}{label}{/if}
+ {#if withLabel && label && variant !== 'icon'}{label}{/if}
{/snippet}
{#if caret && onCaret}
-
+ {@const stacked = variant === 'big'}
+
@@ -166,6 +168,20 @@
cursor: pointer;
}
+ /* A big split button stacks, as in Word: the icon runs the command, the label
+ and its caret open the menu. Welded to the right the caret would float at
+ icon height, beside the label rather than with it. */
+ .rb-split-col { flex-direction: column; }
+ .rb-split-col .rb-big { padding: 4px 7px 0; }
+
+ .rb-split-col .rb-caret {
+ width: auto;
+ gap: 3px;
+ padding: 4px 7px 6px;
+ border-radius: 0 0 3px 3px;
+ color: var(--w-text);
+ }
+
.rb-caret:hover:not(:disabled) { background: var(--w-pressed); }
.rb-caret:disabled { opacity: 0.4; cursor: default; }
.rb-caret.active { background: var(--w-active); }
diff --git a/src/lib/components/ribbon/icons.ts b/src/lib/components/ribbon/icons.ts
index ef894ad..ee97929 100644
--- a/src/lib/components/ribbon/icons.ts
+++ b/src/lib/components/ribbon/icons.ts
@@ -95,7 +95,7 @@ export const STROKED = {
crossRef: ['M2.5 3.5h6M2.5 6.5h4M2.5 9.5h5', 'M8.5 12.5h5M11 10l2.5 2.5L11 15'],
header: ['M2 2.5h12v3H2z', 'M2 8h12M2 11h8'],
footer: ['M2 10.5h12v3H2z', 'M2 5h12M2 8h8'],
- pageNumber: ['M3.25 1.75h9.5v12.5h-9.5z', 'M6.75 10.5h2.5', 'M8 5.5v5'],
+ pageNumber: ['M3.25 1.75h9.5v12.5h-9.5z', 'M6.9 6.4 8 5.3v5.2', 'M6.75 10.5h2.5'],
formula: ['M9 3.5h4', 'M9.5 8h3', 'M2.5 13.5c1.6 0 2-.9 2.4-2.4L7.2 3.4C7.5 2.3 8 2 8.8 2', 'M2.5 6.5h4'],
pageBreak: ['M2 4.5h12M2 11.5h12', 'M8 6.5v3', 'M6.4 8.2 8 9.8l1.6-1.6'],
} as const;