@meowdown/core 0.75.0 → 0.75.1

package/dist/style.css

@@ -183,6 +183,23 @@
     inherits: true
   }
 
+  @property --meowdown-embed-max-height {
+    syntax: "*";
+    inherits: true
+  }
+
+  @property --_overflowing {
+    syntax: "<integer>";
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @keyframes meowdown-embed-overflowing {
+    from, to {
+      --_overflowing: 1;
+    }
+  }
+
   [data-meowdown-embed="x"] [data-root], [data-meowdown-embed="x"] [data-root] *, [data-meowdown-embed="x"] [data-root] :before, [data-meowdown-embed="x"] [data-root] :after {
     all: revert;
     box-sizing: border-box;
@@ -194,6 +211,7 @@
     --_link: var(--meowdown-embed-link-color, #1d9bf0);
     --_tint: color-mix(in srgb, currentColor 5%, transparent);
     --_media-height: 7.5rem;
+    --_show-more-height: 2rem;
     width: fit-content;
     max-width: min(28rem, 100%);
     font: inherit;
@@ -323,6 +341,107 @@
       color: inherit;
     }
 
+    & > article {
+      --_clip-gutter: 4px;
+      --_body-limit: calc(var(--meowdown-embed-max-height, 256px) - 2 * var(--meowdown-embed-padding, 1rem) - 2px + 2 *
+        var(--_clip-gutter));
+    }
+
+    & > article > [data-show-more] {
+      display: none;
+    }
+
+    & > article > [data-show-more] > summary {
+      width: fit-content;
+      font-size: .9375em;
+      line-height: var(--_show-more-height);
+      color: var(--_link);
+      cursor: pointer;
+      list-style: none;
+      display: block;
+    }
+
+    & > article > [data-show-more] > summary::-webkit-details-marker {
+      display: none;
+    }
+
+    & > article > [data-show-more] > summary:before {
+      content: "Show more";
+    }
+
+    & > article > [data-show-more][open] > summary:before {
+      content: "Show less";
+    }
+
+    & > article > [data-show-more] > summary:hover {
+      text-underline-offset: .15em;
+      text-decoration: underline;
+    }
+
+    & > article > [data-show-more] > summary:focus-visible {
+      outline: 2px solid var(--_link);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
+    @supports (animation-timeline: scroll()) {
+      & > article {
+        max-height: calc(var(--_body-limit) - var(--_overflowing) * var(--_show-more-height));
+        padding: var(--_clip-gutter);
+        margin: calc(-1 * var(--_clip-gutter));
+        margin-block-end: calc(var(--_overflowing) * var(--_show-more-height) - var(--_clip-gutter));
+        animation: linear both meowdown-embed-overflowing scroll(self);
+        overflow: hidden;
+      }
+
+      & > article:has( > [data-show-more][open]), & > article:has(:focus-visible:not(summary)) {
+        max-height: none;
+        margin-block-end: calc(-1 * var(--_clip-gutter));
+        overflow: visible;
+      }
+
+      @container style(--_overflowing: 1) {
+        & > article > [data-content] {
+          mask-image: linear-gradient(#000 calc(100% - 3rem), #0000);
+          mask-size: 100%
+          calc(var(--_body-limit) - var(--_show-more-height) - 2 * var(--_clip-gutter));
+          mask-repeat: no-repeat;
+        }
+
+        & > article > [data-show-more] {
+          inset-inline-start: var(--meowdown-embed-padding, 1rem);
+          bottom: var(--meowdown-embed-padding, 1rem);
+          display: block;
+          position: absolute;
+        }
+      }
+
+      & > article > [data-show-more][open] {
+        z-index: 1;
+        width: fit-content;
+        margin: .5rem auto 0;
+        display: block;
+        position: sticky;
+        bottom: .75rem;
+      }
+
+      & > article > [data-show-more][open] > summary {
+        border: 1px solid var(--_hairline);
+        background: var(--meowdown-embed-background, Canvas);
+        border-radius: 999px;
+        padding: .375rem .875rem;
+        font-size: .875em;
+        font-weight: 500;
+        line-height: normal;
+        box-shadow: 0 2px 8px #0000001f;
+      }
+
+      & > article > [data-show-more][open] > summary:hover {
+        background: color-mix(in srgb, var(--_link) 8%, var(--meowdown-embed-background, Canvas));
+        text-decoration: none;
+      }
+    }
+
     & [data-reply-to] {
       color: var(--_muted);
       margin-block-start: .625rem;
@@ -506,13 +625,8 @@
     }
 
     & [data-quoted] [data-body] {
-      -webkit-line-clamp: 3;
-      line-clamp: 3;
-      -webkit-box-orient: vertical;
       margin-block-start: .25rem;
       font-size: .9375em;
-      display: -webkit-box;
-      overflow: hidden;
     }
 
     & [data-quoted] [data-media] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/core",
   "type": "module",
-  "version": "0.75.0",
+  "version": "0.75.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@codemirror/language-data": "^6.5.2",
     "@floating-ui/dom": "^1.8.0",
     "@lezer/highlight": "^1.2.3",
-    "@meowdown/embed": "^0.2.0",
+    "@meowdown/embed": "^0.3.0",
     "@meowdown/markdown": "^0.72.0",
     "@ocavue/utils": "^1.8.0",
     "@post-embed/exporter": "^0.5.0",