markupeditor 0.9.26 → 0.9.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markupeditor",
-  "version": "0.9.26",
+  "version": "0.9.28",
   "description": "A web component and API for WYSIWYG HTML editing.",
   "keywords": [
     "wysiwyg",

package/styles/markup.css

@@ -267,12 +267,12 @@ img {
 
 /* Scoped to :has() rather than styling pre unconditionally, since a code_block's
    <pre> should only become a positioning context when it's actually carrying the
-   language overlay (highlightCode on, block selected) — not for every code block. */
-pre:has(.Markup-code-language-overlay) {
+   language tab (highlightCode on, block selected) — not for every code block. */
+pre:has(.Markup-code-language-tab) {
     position: relative;
 }
 
-.Markup-code-language-overlay {
+.Markup-code-language-tab {
     position: absolute;
     bottom: 100%;
     right: 0;
@@ -286,20 +286,21 @@ pre:has(.Markup-code-language-overlay) {
     background: var(--Markup-accent-color, blue);
 }
 
-.Markup-code-language-overlay:hover {
+.Markup-code-language-tab:hover {
     opacity: 0.9;
 }
 
-/* Applied (setup/index.js, hasRoomAboveOverlay) when the code_block is too close to
-   the top of the view for the label to fit above it — attach to the bottom instead. */
-.Markup-code-language-overlay-below {
+/* Applied (setup/index.js, CodeView.hasRoomAbove) when the code_block is too close to
+   the top of the view for the tab to fit above it — attach to the bottom instead. */
+.Markup-code-language-tab-below {
     bottom: auto;
     top: 100%;
     border-radius: 0 0 4px 4px;
 }
 
+/* Matches .Markup-menuitem-active's selected-button color scheme. */
 @media (prefers-color-scheme: dark) {
-  .Markup-code-language-overlay {
+  .Markup-code-language-tab {
     background: var(--Markup-accent-color, lightblue);
     color: black;
   }

package/styles/toolbar.css

@@ -267,6 +267,16 @@
   padding: 2px 8px 2px 4px;
 }
 
+.Markup-menu-dropdown-separator {
+  border-top: 1px solid var(--Markup-border-color, lightgray);
+  margin: 4px 0;
+}
+@media (prefers-color-scheme: dark) {
+  .Markup-menu-dropdown-separator {
+    border-top: 1px solid var(--Markup-border-color, gray);
+  }
+}
+
 /* Used to overlfow and ellipsis-truncate text in Dropdown menu items */
 .Markup-menuitem-clipped {
   white-space: nowrap;  /* Required for text-overflow */
@@ -510,25 +520,25 @@
 }
 
 .Markup-prompt-link {
-  height: 96px;
+  height: calc(68px + var(--Markup-button-size, 28px));  /* 96 px by default */
   width: 300px;
 }
 
 .Markup-prompt-image {
-  height: 130px;
+  height: calc(102px + var(--Markup-button-size, 28px));  /* 130 px by default */
   width: 300px;
 }
 
 .Markup-prompt-language {
-  height: 96px;
+  height: calc(68px + var(--Markup-button-size, 28px));  /* 96 px by default */
   width: 300px;
 }
 
 .Markup-prompt img {
   display: inline-block;
   vertical-align: middle;
-  min-width: 28px;
-  height: 28px;
+  min-width: var(--Markup-button-size, 28px);
+  height: var(--Markup-button-size, 28px);
   margin-right: 4px;
 }
 
@@ -579,8 +589,8 @@
   vertical-align: middle;
   justify-content: space-between;
   justify-items: center;
-  line-height: 28px;
-  height: 28px;
+  line-height: var(--Markup-button-size, 28px);
+  height: var(--Markup-button-size, 28px);
   margin-top: 8px;
   margin-bottom: 8px;
 }