@threadlabs/looma 0.7.0 → 0.7.1

package/package.json

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

package/styles/ui-editor-table-context-menu.css

@@ -1,6 +1,8 @@
 /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
+      /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+      box-sizing: border-box;
       min-width: 14rem;
       max-width: min(17rem, calc(100vw - 24px));
       max-height: min(28rem, calc(100vh - 24px));

package/vue/UiEditorTableContextMenu.vue

@@ -160,6 +160,8 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 [data-component~="ui-editor-table-context-menu"] {
+  /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+  box-sizing: border-box;
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));

package/vue/chunks/UiEditorTableContextMenu.js

@@ -93,6 +93,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}), 128))], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a938b94a"]]);
+}), [["__scopeId", "data-v-ae062630"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/components.css

@@ -1780,7 +1780,9 @@ svg[data-v-7b1048a0] {
   display: none;
 }
 
-[data-component~="ui-editor-table-context-menu"][data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"][data-v-ae062630] {
+  /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+  box-sizing: border-box;
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
@@ -1796,12 +1798,12 @@ svg[data-v-7b1048a0] {
   overscroll-behavior: contain;
   scrollbar-width: thin;
 }
-.section[data-v-a938b94a] {
+.section[data-v-ae062630] {
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -1816,30 +1818,30 @@ svg[data-v-7b1048a0] {
   cursor: pointer;
   color: var(--ui-text);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630] {
   --ui-icon-size: 1rem;
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-a938b94a]:hover:not(:disabled) {
+[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630]:hover:not(:disabled) {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-context-menu"] button.selected[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button.selected[data-v-ae062630] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-[data-component~="ui-editor-table-context-menu"] button.danger[data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"] button.danger[data-v-ae062630] {
   color: var(--ui-danger);
 }
-.swatches[data-v-a938b94a] {
+.swatches[data-v-ae062630] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 3px;
 }
-.swatch-button[data-v-a938b94a] {
+.swatch-button[data-v-ae062630] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.swatch[data-v-a938b94a] {
+.swatch[data-v-ae062630] {
   display: inline-flex;
   width: 1rem;
   height: 1rem;
@@ -1849,7 +1851,7 @@ svg[data-v-7b1048a0] {
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;
 }
-.swatch.default[data-v-a938b94a] {
+.swatch.default[data-v-ae062630] {
   position: relative;
   background:
     linear-gradient(
@@ -1861,11 +1863,11 @@ svg[data-v-7b1048a0] {
     ),
     var(--ui-surface);
 }
-.swatch-label[data-v-a938b94a] {
+.swatch-label[data-v-ae062630] {
   min-width: 0;
   white-space: nowrap;
 }
-.heading[data-v-a938b94a] {
+.heading[data-v-ae062630] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
@@ -1873,12 +1875,12 @@ svg[data-v-7b1048a0] {
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.sep[data-v-a938b94a] {
+.sep[data-v-ae062630] {
   height: 1px;
   background: var(--ui-border);
   margin: var(--ui-space-1) 0;
 }
-[data-component~="ui-editor-table-context-menu"][hidden][data-v-a938b94a] {
+[data-component~="ui-editor-table-context-menu"][hidden][data-v-ae062630] {
   display: none;
 }
 

package/vue/editor/index.js

@@ -868,10 +868,7 @@ var LoomaEditor = defineComponent({
 					onFocusin: () => showTool(tablePickerAnchorId, "Insert table", true),
 					onFocusout: hideTool,
 					variant: tablePickerOpen.value ? "solid" : "ghost",
-					"aria-expanded": tablePickerOpen.value ? "true" : "false",
-					onClick: () => {
-						tablePickerOpen.value = !tablePickerOpen.value;
-					}
+					"aria-expanded": tablePickerOpen.value ? "true" : "false"
 				}, () => loomaIcon("table")),
 				commandButton(uploading.value ? "Uploading image" : "Insert image", "image", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
 				h("span", {
@@ -1022,6 +1019,9 @@ var LoomaEditor = defineComponent({
 					open: tablePickerOpen.value,
 					for: tablePickerAnchorId,
 					placement: mobile.value ? "top-start" : "bottom-start",
+					onOpen: () => {
+						tablePickerOpen.value = true;
+					},
 					onClose: () => {
 						tablePickerOpen.value = false;
 					}