@mikedown/core 0.1.0 → 0.2.0

package/dist/styles.css

@@ -378,6 +378,19 @@
   overflow: visible;
 }
 
+/* Buttons that don't fit move into the More (⋯) menu, from the right
+   (layoutToolbarOverflow in toolbar-overflow.ts), so the toolbar stays one
+   row at phone widths. More sits at the right edge while it is shown. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar .toolbar-overflowed {
+  display: none !important;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar button.toolbar-more {
+  margin-left: auto;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar button.toolbar-more[hidden] {
+  display: none;
+}
+
 :is(.mikedown-root, .mikedown-portal) .condensed-dropdown-trigger {
   display: inline-flex !important;
   align-items: center;
@@ -708,6 +721,12 @@
   padding-left: 1.5em;
   margin: 0.5em 0;
 }
+/* Markers are set explicitly so a page reset (Tailwind preflight's
+   `ul, ol { list-style: none }`) cannot strip them. Task lists override this. */
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul { list-style-type: disc; }
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul ul { list-style-type: circle; }
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul ul ul { list-style-type: square; }
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ol { list-style-type: decimal; }
 :is(.mikedown-root, .mikedown-portal) .ProseMirror li {
   margin: 0.15em 0;
 }
@@ -918,19 +937,83 @@
   margin-top: 0.2em;
 }
 
+/* The checkbox is drawn by hand so its click target can be 24 by 24px (WCAG
+   2.5.8) while the box still looks 14px: the input is 24px square, a -5px
+   margin keeps the old 14px footprint in the line, and ::before draws the box
+   inside it (::after the tick). */
 :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: -5px;
+  border: 0;
+  background: transparent;
   cursor: pointer;
-  width: 14px;
-  height: 14px;
-  accent-color: var(--mikedown-link, #3794ff);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]::before {
+  content: '';
+  position: absolute;
+  inset: 5px;
+  border: 1.5px solid var(--mikedown-text-muted, #6f6f74);
+  border-radius: 3px;
+  background: var(--mikedown-input-bg, transparent);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before {
+  border-color: var(--mikedown-link, #3794ff);
+  background: var(--mikedown-link, #3794ff);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 10px;
+  top: 7px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--mikedown-surface, #ffffff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible {
+  outline: none;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible::before {
+  outline: 2px solid var(--mikedown-focus-ring, #3794ff);
+  outline-offset: 1px;
+}
+
+/* Forced colors repaint the hand-drawn box, which would hide the checked
+   state; use the native control there. */
+@media (forced-colors: active) {
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
+    appearance: auto;
+    -webkit-appearance: checkbox;
+    width: 14px;
+    height: 14px;
+    margin: 0;
+  }
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]::before,
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]::after {
+    content: none;
+  }
 }
 
 :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > div {
   flex: 1;
 }
 
+/* Done items: muted text plus a strikethrough. A muted color rather than
+   opacity, so the text keeps at least 4.5:1 contrast (opacity 0.6 left it at
+   about 3.9:1 on white). */
 :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
-  opacity: 0.6;
+  color: var(--mikedown-text-muted, #6f6f74);
   text-decoration: line-through;
 }
 
@@ -2168,7 +2251,9 @@
   z-index: 999;
   display: inline-flex;
   flex-direction: row;
-  flex-wrap: nowrap;
+  /* Wraps to a second row on a phone instead of running off the screen. */
+  flex-wrap: wrap;
+  max-width: calc(100vw - 8px);
   align-items: center;
   gap: 2px;
   background: var(--mikedown-surface-raised, var(--mikedown-surface));
@@ -2600,6 +2685,12 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   outline-offset: -2px;
 }
 
+/* Disabled item (e.g. an overflowed Zoom In at the maximum size). */
+:is(.mikedown-root, .mikedown-portal) .tdd-item.tdd-disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 :is(.mikedown-root, .mikedown-portal) .tdd-item-icon {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mikedown/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "MikeDown WYSIWYG markdown editor core (TipTap + CodeMirror), framework-agnostic.",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./binding": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./tokens.css": "./dist/tokens.css",
     "./shared/*": {
@@ -111,7 +116,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mikejoseph23/mikedown.git",
+    "url": "git+https://github.com/mikejoseph23/mikedown.git",
     "directory": "packages/core"
   }
 }