comark-file-tree 0.7.2 → 0.7.4

package/dist/{client-C13QjLJq.mjs → client-Djg5meKD.mjs}

@@ -55,6 +55,9 @@ function theme(selector) {
 	return `${where}{${resolve(3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(4)}}}`;
 }
 //#endregion
+//#region ../../shared/disclosure.ts
+const disclosureMotion = (selector) => `@supports (interpolate-size:allow-keywords) and selector(::details-content){@media screen and (prefers-reduced-motion:no-preference){${selector}{interpolate-size:allow-keywords}${selector}::details-content{display:flow-root;block-size:0;overflow-y:clip;transition:block-size .25s cubic-bezier(.23,1,.32,1),content-visibility .25s allow-discrete}${selector}[open]::details-content{block-size:auto}}}`;
+//#endregion
 //#region src/styles.ts
 /**
 * A tree in a bordered box, with a guide line down each open folder, on the shared `--comark-*` tokens. Added, removed,
@@ -62,6 +65,7 @@ function theme(selector) {
 * `--destructive`. The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
 */
 const css = `@layer comark{${[
+	disclosureMotion(".cft details"),
 	theme(".cft"),
 	":where(.cft){--cft-added:#16a34a;--cft-removed:var(--destructive,#dc2626);--cft-changed:#d97706}",
 	"@media (prefers-color-scheme:dark){:where(.cft){--cft-added:#4ade80;--cft-removed:var(--destructive,#f87171);--cft-changed:#fbbf24}}",

package/dist/client.mjs

@@ -1 +1 @@
-export { t as addStyles, i as css, n as glyphs, r as marks } from "./client-C13QjLJq.mjs";
+export { t as addStyles, i as css, n as glyphs, r as marks } from "./client-Djg5meKD.mjs";

package/dist/html.mjs

@@ -1,5 +1,5 @@
 import src_default from "./index.mjs";
-import { i as css, n as glyphs, r as marks } from "./client-C13QjLJq.mjs";
+import { i as css, n as glyphs, r as marks } from "./client-Djg5meKD.mjs";
 import { escapeHtml } from "comark/utils";
 import { iconHtml, iconStyles } from "comark-icon/html";
 //#region src/html.ts

package/dist/react.mjs

@@ -1,5 +1,5 @@
 import src_default from "./index.mjs";
-import { n as glyphs, r as marks, t as addStyles } from "./client-C13QjLJq.mjs";
+import { n as glyphs, r as marks, t as addStyles } from "./client-Djg5meKD.mjs";
 import { Icon } from "comark-icon/react";
 import { createElement, useEffect } from "react";
 //#region src/react.ts

package/dist/style.css

@@ -1 +1 @@
-@layer comark{:where(.cft){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.cft){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)))}}:where(.cft){--cft-added:#16a34a;--cft-removed:var(--destructive,#dc2626);--cft-changed:#d97706}@media (prefers-color-scheme:dark){:where(.cft){--cft-added:#4ade80;--cft-removed:var(--destructive,#f87171);--cft-changed:#fbbf24}}.cft{margin:1.5rem 0;padding:.75rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);font:400 .8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.cft ul{margin:0!important;padding:0!important;list-style:none!important}.cft ul ul{margin-inline-start:calc(.5rem - .5px)!important;padding-inline-start:.75rem!important;border-inline-start:1px solid var(--_comark-border)}.cft li{margin:0!important;padding:0!important}.cft details{margin:0!important;padding:0!important}.cft summary{display:block;margin:0!important;padding:0!important;list-style:none;border-radius:calc(var(--_comark-radius) - 4px);cursor:pointer}.cft summary::-webkit-details-marker{display:none}.cft summary:hover{background:var(--_comark-accent)}.cft summary:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.cft-entry{display:flex;align-items:center;gap:.375rem;padding:.125rem .25rem;white-space:nowrap}.cft-glyph{flex:none;width:1rem;height:1rem;color:var(--_comark-muted)}.cft-entry .ci{flex:none;font-size:1rem}.cft-note{margin-inline-start:.75rem;color:var(--_comark-muted);font-family:var(--_comark-font);white-space:normal}.cft-mark{font-weight:600}.cft [data-state='added']>.cft-entry,.cft [data-state='added']>details>summary>.cft-entry{color:var(--cft-added)}.cft [data-state='removed']>.cft-entry,.cft [data-state='removed']>details>summary>.cft-entry{color:var(--cft-removed)}.cft [data-state='removed'] .cft-name{text-decoration:line-through}.cft [data-state='changed']>.cft-entry,.cft [data-state='changed']>details>summary>.cft-entry{color:var(--cft-changed)}.cft [data-type='more']{padding:0 .25rem;color:var(--_comark-muted)}}
+@layer comark{@supports (interpolate-size:allow-keywords) and selector(::details-content){@media screen and (prefers-reduced-motion:no-preference){.cft details{interpolate-size:allow-keywords}.cft details::details-content{display:flow-root;block-size:0;overflow-y:clip;transition:block-size .25s cubic-bezier(.23,1,.32,1),content-visibility .25s allow-discrete}.cft details[open]::details-content{block-size:auto}}}:where(.cft){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.cft){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)))}}:where(.cft){--cft-added:#16a34a;--cft-removed:var(--destructive,#dc2626);--cft-changed:#d97706}@media (prefers-color-scheme:dark){:where(.cft){--cft-added:#4ade80;--cft-removed:var(--destructive,#f87171);--cft-changed:#fbbf24}}.cft{margin:1.5rem 0;padding:.75rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);font:400 .8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.cft ul{margin:0!important;padding:0!important;list-style:none!important}.cft ul ul{margin-inline-start:calc(.5rem - .5px)!important;padding-inline-start:.75rem!important;border-inline-start:1px solid var(--_comark-border)}.cft li{margin:0!important;padding:0!important}.cft details{margin:0!important;padding:0!important}.cft summary{display:block;margin:0!important;padding:0!important;list-style:none;border-radius:calc(var(--_comark-radius) - 4px);cursor:pointer}.cft summary::-webkit-details-marker{display:none}.cft summary:hover{background:var(--_comark-accent)}.cft summary:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.cft-entry{display:flex;align-items:center;gap:.375rem;padding:.125rem .25rem;white-space:nowrap}.cft-glyph{flex:none;width:1rem;height:1rem;color:var(--_comark-muted)}.cft-entry .ci{flex:none;font-size:1rem}.cft-note{margin-inline-start:.75rem;color:var(--_comark-muted);font-family:var(--_comark-font);white-space:normal}.cft-mark{font-weight:600}.cft [data-state='added']>.cft-entry,.cft [data-state='added']>details>summary>.cft-entry{color:var(--cft-added)}.cft [data-state='removed']>.cft-entry,.cft [data-state='removed']>details>summary>.cft-entry{color:var(--cft-removed)}.cft [data-state='removed'] .cft-name{text-decoration:line-through}.cft [data-state='changed']>.cft-entry,.cft [data-state='changed']>details>summary>.cft-entry{color:var(--cft-changed)}.cft [data-type='more']{padding:0 .25rem;color:var(--_comark-muted)}}

package/dist/vue.mjs

@@ -1,5 +1,5 @@
 import src_default from "./index.mjs";
-import { n as glyphs, r as marks, t as addStyles } from "./client-C13QjLJq.mjs";
+import { n as glyphs, r as marks, t as addStyles } from "./client-Djg5meKD.mjs";
 import { defineComponent, h, onMounted } from "vue";
 import { Icon } from "comark-icon/vue";
 //#region src/vue.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-file-tree",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "A project's folders and files from an indented list or pasted tree output, with added, removed, and changed entries marked. A Comark plugin.",
   "keywords": [
     "comark",
@@ -45,7 +45,7 @@
     "provenance": true
   },
   "dependencies": {
-    "comark-icon": "^0.7.2"
+    "comark-icon": "^0.7.4"
   },
   "devDependencies": {
     "@comark/html": "^0.8.1",
@@ -58,7 +58,7 @@
     "react-dom": "^19.3.1",
     "svelte": "^5.57.2",
     "vue": "^3.5.44",
-    "comark-zoom": "0.7.2"
+    "comark-zoom": "0.7.4"
   },
   "peerDependencies": {
     "@comark/html": "^0.8.0",