@threadlabs/looma 0.22.3 → 0.22.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.22.3",
+  "version": "0.22.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-tooltip.css

@@ -91,6 +91,29 @@
       box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
     }
 
+    /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+       it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+    .shortcut {
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: var(--ui-space-2);
+      padding-inline-start: var(--ui-space-2);
+      border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+      color: color-mix(in oklab, currentColor 72%, transparent);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-normal);
+      white-space: nowrap;
+      vertical-align: baseline;
+    }
+
+    .shortcut:empty {
+      display: none;
+    }
+
+    .shortcut kbd {
+      font: inherit;
+    }
+
     :scope[data-ui-tooltip-state~="inverse"] .surface {
       --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
@@ -193,6 +216,9 @@
 @scope ([data-component~="ui-tooltip"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+       it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+
     /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
      * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
 

package/vanilla/UiTooltip.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";
 
-const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"top"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500},"trigger":{"type":{"kind":"terminal","name":"keyword"},"values":["hover","click","focus"],"required":false,"target":{"attribute":"trigger"},"default":"hover"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"top"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500},"trigger":{"type":{"kind":"terminal","name":"keyword"},"values":["hover","click","focus"],"required":false,"target":{"attribute":"trigger"},"default":"hover"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTooltip(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -26,6 +26,18 @@ export function createUiTooltip(options = {}) {
     }
   } else {
   }
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "shortcut");
+  if (slots["shortcut"] ?? [].length > 0) {
+    for (const child of slots["shortcut"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "shortcut"]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element0.append(element1);
   element.append(element0);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,

package/vue/UiTooltip.d.ts

@@ -1,7 +1,9 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    shortcut?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     for: {

package/vue/UiTooltip.vue

@@ -312,7 +312,10 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     :data-trigger="reflectedProp('trigger', 'trigger', checkedProps.trigger, undefined, false)"
     :data-ui-tooltip-state="hostState || undefined"
     ref="root"
-  ><div class="surface"><slot /></div></span>
+  ><div class="surface">
+      <slot />
+      <span class="shortcut"><slot name="shortcut" /></span>
+    </div></span>
 </template>
 
 <style scoped>
@@ -410,6 +413,29 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   );
 }
 
+/* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+   it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+.shortcut {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: var(--ui-space-2);
+  padding-inline-start: var(--ui-space-2);
+  border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+  color: color-mix(in oklab, currentColor 72%, transparent);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-normal);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+.shortcut:empty {
+  display: none;
+}
+
+.shortcut kbd {
+  font: inherit;
+}
+
 [data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface {
   --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));

package/vue/chunks/UiTooltip.js

@@ -15,6 +15,7 @@ var _hoisted_1 = [
 	"data-ui-tooltip-state"
 ];
 var _hoisted_2 = { class: "surface" };
+var _hoisted_3 = { class: "shortcut" };
 //#endregion
 //#region .build/vue/UiTooltip.vue
 var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -253,12 +254,12 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"data-ui-tooltip-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut", {}, void 0, true)])])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...checkedProps.value }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0ec1a9c8"]]);
+}), [["__scopeId", "data-v-3762dc6a"]]);
 //#endregion
 export { UiTooltip_default as t };

package/vue/components.css

@@ -1484,7 +1484,7 @@ input[data-v-101ef53e]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-tooltip"][data-v-0ec1a9c8] {
+[data-component~="ui-tooltip"][data-v-3762dc6a] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-tooltip-border: var(--ui-tooltip-border);
   --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -1516,7 +1516,7 @@ input[data-v-101ef53e]:focus-visible {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-.surface[data-v-0ec1a9c8] {
+.surface[data-v-3762dc6a] {
   --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
   position: relative;
   box-sizing: border-box;
@@ -1534,7 +1534,28 @@ input[data-v-101ef53e]:focus-visible {
     var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
   );
 }
-[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-0ec1a9c8] {
+
+/* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
+   it. The label stays first in the description, so a screen reader hears the name, then the keys. */
+.shortcut[data-v-3762dc6a] {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: var(--ui-space-2);
+  padding-inline-start: var(--ui-space-2);
+  border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+  color: color-mix(in oklab, currentColor 72%, transparent);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-normal);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+.shortcut[data-v-3762dc6a]:empty {
+  display: none;
+}
+.shortcut kbd[data-v-3762dc6a] {
+  font: inherit;
+}
+[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-3762dc6a] {
   --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
@@ -1542,7 +1563,7 @@ input[data-v-101ef53e]:focus-visible {
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-.surface[data-v-0ec1a9c8]::after {
+.surface[data-v-3762dc6a]::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -1558,7 +1579,7 @@ input[data-v-101ef53e]:focus-visible {
   border-end-end-radius: 1px;
   transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-3762dc6a]::after {
   inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -1568,59 +1589,59 @@ input[data-v-101ef53e]:focus-visible {
   border-end-end-radius: 0;
   border-start-start-radius: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-0ec1a9c8]::after,
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-3762dc6a]::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-3762dc6a]::after {
   inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
   inset-block-end: auto;
   border: 0 solid var(--_tooltip-line);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: auto;
   inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   border-inline-end-width: 1px;
   border-block-start-width: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-0ec1a9c8]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-3762dc6a]::after {
   inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-inline-end: auto;
   border-inline-start-width: 1px;
   border-block-end-width: 1px;
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]
-  .surface[data-v-0ec1a9c8]::after,
+  .surface[data-v-3762dc6a]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="start"]
-  .surface[data-v-0ec1a9c8]::after {
+  .surface[data-v-3762dc6a]::after {
   inset-block-start: var(--ui-space-3);
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="end"]
-  .surface[data-v-0ec1a9c8]::after,
+  .surface[data-v-3762dc6a]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="end"]
-  .surface[data-v-0ec1a9c8]::after {
+  .surface[data-v-3762dc6a]::after {
   inset-block-start: auto;
   inset-block-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-v-0ec1a9c8]:popover-open {
+[data-component~="ui-tooltip"][data-v-3762dc6a]:popover-open {
   opacity: 1;
   transform: translateY(0);
 }
 @starting-style {
-[data-component~="ui-tooltip"][data-v-0ec1a9c8]:popover-open {
+[data-component~="ui-tooltip"][data-v-3762dc6a]:popover-open {
     opacity: 0;
     transform: translateY(4px);
 }
 }
-[data-component~="ui-tooltip"][hidden][data-v-0ec1a9c8] {
+[data-component~="ui-tooltip"][hidden][data-v-3762dc6a] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-tooltip"][data-v-0ec1a9c8] {
+[data-component~="ui-tooltip"][data-v-3762dc6a] {
     transition: none;
 }
 }

package/vue/editor/index.js

@@ -403,6 +403,23 @@ var autoCodeLanguageNames = [
 ];
 //#endregion
 //#region src/vue/editor/LoomaEditor.ts
+/**
+* Shows a key binding in ProseMirror notation ("Mod-Shift-8") the way the reader's platform writes
+* it: modifier symbols in Apple's order on Apple devices (⇧⌘8), and Ctrl+Shift+8 elsewhere.
+*/
+function formatEditorShortcut(keys, apple) {
+	const parts = keys.split("-");
+	const key = (parts.pop() ?? "").toUpperCase();
+	const has = (name) => parts.includes(name);
+	if (apple) return `${has("Ctrl") ? "⌃" : ""}${has("Alt") ? "⌥" : ""}${has("Shift") ? "⇧" : ""}${has("Mod") ? "⌘" : ""}${key}`;
+	return [
+		has("Mod") || has("Ctrl") ? "Ctrl" : "",
+		has("Alt") ? "Alt" : "",
+		has("Shift") ? "Shift" : "",
+		key
+	].filter(Boolean).join("+");
+}
+var isApplePlatform = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
 var EMPTY_DOCUMENT = {
 	type: "doc",
 	content: []
@@ -606,16 +623,18 @@ var LoomaEditor = defineComponent({
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const tooltipFor = ref("");
 		const tooltipLabel = ref("");
+		const tooltipShortcut = ref("");
 		const tooltipOpen = ref(false);
 		let tooltipTimer = 0;
 		const clearTooltipTimer = () => {
 			if (tooltipTimer) window.clearTimeout(tooltipTimer);
 			tooltipTimer = 0;
 		};
-		const showTool = (id, label, immediate) => {
+		const showTool = (id, label, immediate, shortcut = "") => {
 			clearTooltipTimer();
 			tooltipFor.value = id;
 			tooltipLabel.value = label;
+			tooltipShortcut.value = shortcut ? formatEditorShortcut(shortcut, isApplePlatform()) : "";
 			if (immediate || tooltipOpen.value) {
 				tooltipOpen.value = true;
 				return;
@@ -1507,7 +1526,7 @@ var LoomaEditor = defineComponent({
 		const onTableOverlayMouseDown = (event) => {
 			if (event.target instanceof Element ? event.target.closest("button[data-action]") : null) event.preventDefault();
 		};
-		const commandButton = (label, icon, active, disabled, run) => {
+		const commandButton = (label, icon, active, disabled, run, shortcut = "") => {
 			const syncNativeDisabled = (vnode) => {
 				if (!(vnode.el instanceof Element)) return;
 				const button = vnode.el instanceof HTMLButtonElement ? vnode.el : vnode.el.querySelector("button");
@@ -1519,9 +1538,9 @@ var LoomaEditor = defineComponent({
 				class: "looma-editor__toolbar-button",
 				label,
 				size: "sm",
-				onPointerenter: () => showTool(id, label, false),
+				onPointerenter: () => showTool(id, label, false, shortcut),
 				onPointerleave: hideTool,
-				onFocusin: () => showTool(id, label, true),
+				onFocusin: () => showTool(id, label, true, shortcut),
 				onFocusout: hideTool,
 				variant: "ghost",
 				disabled,
@@ -1534,12 +1553,12 @@ var LoomaEditor = defineComponent({
 		};
 		const renderToolbar = (instance, floating = true, textOnly = false) => {
 			const textButtons = [
-				commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run()),
-				commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run()),
-				commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run()),
-				commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run()),
-				...authorHighlight ? [commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run())] : [],
-				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run())
+				commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run(), "Mod-b"),
+				commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run(), "Mod-i"),
+				commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run(), "Mod-u"),
+				commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run(), "Mod-Shift-s"),
+				...authorHighlight ? [commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run(), "Mod-Shift-h")] : [],
+				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run(), "Mod-e")
 			];
 			const buttons = textOnly ? textButtons : [
 				...textButtons,
@@ -1568,13 +1587,13 @@ var LoomaEditor = defineComponent({
 					class: "divider",
 					"aria-hidden": "true"
 				}),
-				commandButton("Heading 1", "heading-1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run()),
-				commandButton("Heading 2", "heading-2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run()),
-				commandButton("Heading 3", "heading-3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run()),
-				commandButton("Bullet list", "list", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run()),
-				commandButton("Numbered list", "list-ordered", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run()),
-				commandButton("Blockquote", "quote", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run()),
-				commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run()),
+				commandButton("Heading 1", "heading-1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run(), "Mod-Alt-1"),
+				commandButton("Heading 2", "heading-2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run(), "Mod-Alt-2"),
+				commandButton("Heading 3", "heading-3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run(), "Mod-Alt-3"),
+				commandButton("Bullet list", "list", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run(), "Mod-Shift-8"),
+				commandButton("Numbered list", "list-ordered", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run(), "Mod-Shift-7"),
+				commandButton("Blockquote", "quote", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run(), "Mod-Shift-b"),
+				commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run(), "Mod-Alt-c"),
 				h(IconButton, {
 					id: blockActionAnchorId,
 					class: "looma-editor__toolbar-button",
@@ -1607,8 +1626,8 @@ var LoomaEditor = defineComponent({
 					class: "divider",
 					"aria-hidden": "true"
 				}),
-				commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
-				commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run())
+				commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run(), "Mod-z"),
+				commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run(), isApplePlatform() ? "Mod-Shift-z" : "Mod-y")
 			];
 			return h(EditorToolbar, { floating }, () => [...buttons, h(Tooltip, {
 				class: "looma-editor__toolbar-tip",
@@ -1616,7 +1635,10 @@ var LoomaEditor = defineComponent({
 				open: tooltipOpen.value,
 				placement: floating ? "top" : "bottom",
 				trigger: "focus"
-			}, () => tooltipLabel.value)]);
+			}, {
+				default: () => tooltipLabel.value,
+				shortcut: () => tooltipShortcut.value ? h("kbd", tooltipShortcut.value) : null
+			})]);
 		};
 		const focus = (position = "start") => {
 			editor.value?.commands.focus(position);