@halo-dev/shiki-code-element 1.3.2 → 1.4.1

package/README.md

@@ -85,6 +85,34 @@ This component integrates with [Shiki Transformers](https://shiki.style/packages
 - Line focus: `// [!code focus]`
 - Error/warning annotations: `// [!code error]`, `// [!code warning]`
 - Code diff (additions/deletions): `// [!code ++]`, `// [!code --]`
+- Code folding: `// [!code fold:start]`, `// [!code fold:end]`
+- Tail folding: `// [!code fold:start]` without `fold:end` folds to the end of the code block
+
+Fold notations must be written in comments for the current language. Paired
+`fold:start` and `fold:end` markers collapse the lines between them:
+
+```ts
+console.log("Visible before folded lines");
+// [!code fold:start]
+function hidden() {
+  return "Folded";
+}
+// [!code fold:end]
+console.log("Visible after folded lines");
+```
+
+For tail folding, omit `fold:end` and the component will render a bottom control
+to show the remaining lines:
+
+```yaml
+services:
+  halo:
+    image: halohub/halo:2
+    # [!code fold:start]
+    environment:
+      - SPRING_R2DBC_USERNAME=halo
+      - SPRING_R2DBC_PASSWORD=openpostgresql
+```
 
 For more details on how to use these features, please refer to the [Shiki Transformers documentation](https://shiki.style/packages/transformers).
 
@@ -105,4 +133,4 @@ This component works in all modern browsers that support [Custom Elements v1](ht
 
 ## License
 
-[MIT License](https://github.com/halo-sigs/plugin-shiki/blob/main/LICENSE)
+[MIT License](https://github.com/halo-sigs/plugin-shiki/blob/main/LICENSE)

package/dist/index.js

@@ -1,4 +1,4 @@
-//#region ../node_modules/.pnpm/@unocss+reset@66.6.2/node_modules/@unocss/reset/tailwind.css?inline
+//#region ../node_modules/.pnpm/@unocss+reset@66.7.4/node_modules/@unocss/reset/tailwind.css?inline
 var e = "*,:before,:after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before,:after{--un-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}", t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, r = Symbol(), i = /* @__PURE__ */ new WeakMap(), a = class {
 	constructor(e, t, n) {
 		if (this._$cssResult$ = !0, n !== r) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -605,7 +605,7 @@ function X(e, t, n) {
 }
 //#endregion
 //#region src/styles/shiki.css?inline
-var Te = ".shiki{color-scheme:var(--shiki-theme-type,light);padding:.875em;overflow-x:auto}code{z-index:0;width:max-content;min-width:100%;font-size:var(--font-size,.875em);counter-reset:step;counter-increment:step 0;display:block;position:relative}code .line:before{content:counter(step);counter-increment:step;text-align:right;color:#738a9480;width:1rem;margin-right:1.5rem;display:inline-block}code .line:last-child:empty{display:none}code .line:last-child:has(>span:empty:only-child){display:none}.has-diff .diff,.has-highlighted .highlighted{width:100%;display:inline-block;position:relative}.has-diff .diff.remove:before{content:\"-\"}.has-diff .diff.add:before{content:\"+\"}.has-diff .diff.remove:after{content:\"\";z-index:-1;background:#ef444426;border-left:1px solid #ef4444cc;position:absolute;inset:0 -.875em}.has-diff .diff.add:after{content:\"\";z-index:-1;background:#22c55e26;border-left:1px solid #22c55ecc;position:absolute;inset:0 -.875em}.has-focused .line:not(.focused){opacity:.7;filter:blur(.095rem);transition:filter .35s,opacity .35s}.has-focused:hover .line:not(.focused){opacity:1;filter:blur()}.has-highlighted .highlighted:after{content:\"\";z-index:-1;background:#65758529;border-left:1px solid #22c55ecc;position:absolute;inset:0 -.875em}.has-highlighted .highlighted.error:after{background:#f43f5e29!important;border-left:1px solid #f43f5ecc!important}.has-highlighted .highlighted.warning:after{background:#eab30829!important;border-left:1px solid #eab308cc!important}.has-highlighted .highlighted.info:after{background:#65758529!important;border-left:1px solid #657585cc!important}:host([color-scheme=dark]) .shiki,:host([color-scheme=dark]) .shiki span{color:var(--shiki-dark)!important}:host([color-scheme=dark]) .shiki{background-color:var(--shiki-dark-bg)!important}";
+var Te = ".shiki{--shiki-code-padding:.875em;--shiki-fold-highlight-offset:.5em;--shiki-tail-control-offset:1em;--shiki-fold-accent:#3b82f6d9;--shiki-fold-accent-strong:#3b82f6;--shiki-fold-accent-muted:#3b82f66b;--shiki-fold-background:#60a5fa1a;--shiki-fold-background-hover:#60a5fa29;--shiki-fold-background-muted:#60a5fa14;--shiki-fold-label-color:#93c5fdf2;--shiki-fold-label-border:#60a5fa61;--shiki-fold-label-background:#3b82f629;--shiki-fold-tail-color:#738a94d1;--shiki-fold-tail-gradient-mid:#738a940b;--shiki-fold-tail-gradient-end:#738a9424;--shiki-fold-tail-hover-color:#60a5faeb;--shiki-fold-tail-expanded-color:#60a5fad9;padding:var(--shiki-code-padding);color-scheme:var(--shiki-theme-type,light);overflow-x:auto}@supports (color:color-mix(in srgb, white, black)){.shiki{--shiki-fold-accent:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 54%, transparent);--shiki-fold-accent-strong:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 72%, transparent);--shiki-fold-accent-muted:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 30%, transparent);--shiki-fold-background:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 8%, transparent);--shiki-fold-background-hover:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 12%, transparent);--shiki-fold-background-muted:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 6%, transparent);--shiki-fold-label-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 72%, var(--shiki-theme-bg,transparent));--shiki-fold-label-border:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 22%, transparent);--shiki-fold-label-background:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 10%, transparent);--shiki-fold-tail-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 58%, var(--shiki-theme-bg,transparent));--shiki-fold-tail-gradient-mid:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 3%, transparent);--shiki-fold-tail-gradient-end:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 9%, transparent);--shiki-fold-tail-hover-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 76%, var(--shiki-theme-bg,transparent));--shiki-fold-tail-expanded-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 68%, var(--shiki-theme-bg,transparent))}}code{z-index:0;width:max-content;min-width:100%;font-size:var(--font-size,.875em);counter-reset:step;counter-increment:step 0;display:block;position:relative}code .line:before{content:counter(step);counter-increment:step;text-align:right;color:#738a9480;width:1rem;margin-right:1.5rem;display:inline-block}code .line:last-child:empty{display:none}code .line:last-child:has(>span:empty:only-child){display:none}.has-diff .diff,.has-highlighted .highlighted{width:100%;display:inline-block;position:relative}.has-diff .diff.remove:before{content:\"-\"}.has-diff .diff.add:before{content:\"+\"}.has-diff .diff.remove:after{content:\"\";z-index:-1;background:#ef444426;border-left:1px solid #ef4444cc;position:absolute;inset:0 -.875em}.has-diff .diff.add:after{content:\"\";z-index:-1;background:#22c55e26;border-left:1px solid #22c55ecc;position:absolute;inset:0 -.875em}.has-focused .line:not(.focused){opacity:.7;filter:blur(.095rem);transition:filter .35s,opacity .35s}.has-focused:hover .line:not(.focused){opacity:1;filter:blur()}.has-highlighted .highlighted:after{content:\"\";z-index:-1;background:#65758529;border-left:1px solid #22c55ecc;position:absolute;inset:0 -.875em}.has-highlighted .highlighted.error:after{background:#f43f5e29!important;border-left:1px solid #f43f5ecc!important}.has-highlighted .highlighted.warning:after{background:#eab30829!important;border-left:1px solid #eab308cc!important}.has-highlighted .highlighted.info:after{background:#65758529!important;border-left:1px solid #657585cc!important}.has-fold code .line{display:block}.has-fold .fold-line{width:100%}.has-fold .fold-start{cursor:pointer;box-sizing:border-box;width:calc(100% + var(--shiki-fold-highlight-offset) + var(--shiki-fold-highlight-offset));margin-left:calc(0px - var(--shiki-fold-highlight-offset));padding-left:var(--shiki-fold-highlight-offset);background:var(--shiki-fold-background);box-shadow:inset 3px 0 var(--shiki-fold-accent);border-radius:.375rem;transition:background .2s,box-shadow .2s}.has-fold .fold-start:hover{background:var(--shiki-fold-background-hover);box-shadow:inset 3px 0 var(--shiki-fold-accent-strong)}.has-fold .fold-start:focus-visible{outline:2px solid var(--shiki-fold-accent);outline-offset:2px}.has-fold .fold-start:after{content:\"▸ \" attr(data-fold-lines) \" lines hidden\";border:1px solid var(--shiki-fold-label-border);color:var(--shiki-fold-label-color);background:var(--shiki-fold-label-background);font-weight:600;line-height:1.5;font-size:var(--font-size,.875em);border-radius:999px;align-items:center;margin-left:1rem;padding:.0625rem .5rem;display:inline-flex;box-shadow:0 1px 2px #00000029}.has-fold .fold-start.fold-expanded:after{content:\"▾ collapse\";opacity:.75}.has-fold .fold-start.fold-expanded:has(+.fold-hidden.fold-expanded:not(.fold-tail-line)){border-bottom-right-radius:0;border-bottom-left-radius:0}.has-fold .fold-hidden.fold-expanded:not(.fold-tail-line){box-sizing:border-box;width:calc(100% + var(--shiki-fold-highlight-offset) + var(--shiki-fold-highlight-offset));margin-left:calc(0px - var(--shiki-fold-highlight-offset));padding-left:var(--shiki-fold-highlight-offset);background:var(--shiki-fold-background-muted);box-shadow:inset 3px 0 var(--shiki-fold-accent-muted)}.has-fold .fold-hidden.fold-expanded:not(.fold-tail-line):not(:has(+.fold-hidden.fold-expanded:not(.fold-tail-line))){border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.has-fold .fold-hidden:not(.fold-expanded){opacity:0;pointer-events:none;height:0;line-height:0;display:block;overflow:hidden}.has-fold .fold-hidden:not(.fold-expanded) *{line-height:0}.has-fold-tail{padding-bottom:0;container-type:inline-size}.has-fold-tail .fold-tail-control{left:calc(0px - var(--shiki-tail-control-offset));z-index:1;width:calc(100% + var(--shiki-tail-control-offset) + var(--shiki-tail-control-offset));box-sizing:border-box;min-height:1.5rem;margin:0 0 0 calc(0px - var(--shiki-tail-control-offset));cursor:pointer;background:0 0;border-top:0;justify-content:center;align-items:center;transition:color .2s;display:flex;position:sticky;box-shadow:0 -.5rem 1.25rem #0f172a0f;color:var(--shiki-fold-tail-color)!important;-webkit-text-fill-color:var(--shiki-fold-tail-color)!important}@supports (width:100cqw){.has-fold-tail .fold-tail-control{width:calc(100cqw + var(--shiki-tail-control-offset) + var(--shiki-tail-control-offset))}}.has-fold-tail .fold-tail-control:before{content:\"\";pointer-events:none;background:linear-gradient(to bottom, transparent, var(--shiki-fold-tail-gradient-mid) 42%, var(--shiki-fold-tail-gradient-end));height:3.5rem;position:absolute;bottom:0;left:0;right:0}.has-fold-tail .fold-tail-label{z-index:1;border-radius:999px;justify-content:center;align-items:center;gap:.375rem;min-width:7.5rem;padding:.0625rem .5rem;font-size:.875em;font-weight:500;line-height:1.35;display:inline-flex;position:relative}.has-fold-tail .fold-tail-icon{flex:0 0 .75rem;justify-content:center;align-items:center;width:.75rem;height:1em;font-size:.8125em;line-height:1;display:inline-flex}.has-fold-tail .fold-tail-control .fold-tail-label,.has-fold-tail .fold-tail-control .fold-tail-icon,.has-fold-tail .fold-tail-control .fold-tail-text{color:inherit!important;-webkit-text-fill-color:inherit!important}.has-fold-tail .fold-tail-label-expanded{display:none}.has-fold-tail .fold-tail-control:hover{color:var(--shiki-fold-tail-hover-color)!important;-webkit-text-fill-color:var(--shiki-fold-tail-hover-color)!important}.has-fold-tail .fold-tail-control:focus-visible{outline:2px solid var(--shiki-fold-accent);outline-offset:-3px}.has-fold-tail .fold-tail-control.fold-expanded{color:var(--shiki-fold-tail-expanded-color)!important;-webkit-text-fill-color:var(--shiki-fold-tail-expanded-color)!important}.has-fold-tail .fold-tail-control.fold-expanded:before,.has-fold-tail .fold-tail-control.fold-expanded .fold-tail-label-collapsed{display:none}.has-fold-tail .fold-tail-control.fold-expanded .fold-tail-label-expanded{display:inline-flex}:host([color-scheme=dark]) .shiki,:host([color-scheme=dark]) .shiki span{color:var(--shiki-dark)!important}:host([color-scheme=dark]) .shiki{background-color:var(--shiki-dark-bg)!important}";
 //#endregion
 //#region src/utils/copy-to-clipboard.ts
 function Ee(e, t) {
@@ -624,7 +624,7 @@ function Ee(e, t) {
 	}
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
 function Z(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -644,16 +644,33 @@ var Q = class extends G {
 		}, this.copied = !1;
 	}
 	updated(e) {
-		e.has("options") && (this.setAttribute("color-scheme", this.options.colorScheme), this.style.setProperty("--shiki-theme-type", this.options.theme?.type || "light"), this.style.setProperty("--font-size", this.options.fontSize || "0.875em"));
+		e.has("options") && (this.setAttribute("color-scheme", this.options.colorScheme), this.style.setProperty("--shiki-theme-type", this.options.theme?.type || "light"), this.style.setProperty("--shiki-theme-fg", this.options.theme?.fg || "currentColor"), this.style.setProperty("--shiki-theme-bg", this.options.theme?.bg || "transparent"), this.style.setProperty("--font-size", this.options.fontSize || "0.875em"));
 	}
 	handleCopyCode() {
-		let e = this.shadowRoot?.querySelector("pre");
-		Ee(e?.innerText || e?.textContent || "", () => {
+		let e = this.shadowRoot?.querySelector("pre"), t = e?.querySelectorAll("code > .line");
+		Ee((t?.length ? Array.from(t).map((e) => e.textContent || "").join("\n") : e?.textContent) || "", () => {
 			this.copied = !0, setTimeout(() => {
 				this.copied = !1;
 			}, 2e3);
 		});
 	}
+	handleCodeBlockClick(e) {
+		if (!(e.target instanceof Element)) return;
+		let t = e.target.closest(".fold-start, .fold-tail-control");
+		t && this.toggleFold(t);
+	}
+	handleCodeBlockKeydown(e) {
+		if (!(e.target instanceof Element) || e.key !== "Enter" && e.key !== " ") return;
+		let t = e.target.closest(".fold-start, .fold-tail-control");
+		t && (e.preventDefault(), this.toggleFold(t));
+	}
+	toggleFold(e) {
+		let t = e.dataset.foldId, n = e.closest("pre");
+		if (!t || !n) return;
+		let r = e.getAttribute("aria-expanded") !== "true";
+		for (let e of n.querySelectorAll(".fold-line")) e.dataset.foldId === t && (e.classList.toggle("fold-expanded", r), e.classList.contains("fold-hidden") && e.setAttribute("aria-hidden", String(!r)));
+		e.classList.toggle("fold-expanded", r), e.setAttribute("aria-expanded", String(r));
+	}
 };
 Z([K({ type: Object })], Q.prototype, "options", void 0), Z([q()], Q.prototype, "copied", void 0);
 //#endregion
@@ -661,7 +678,11 @@ Z([K({ type: Object })], Q.prototype, "options", void 0), Z([q()], Q.prototype,
 var De = class extends Q {
 	render() {
 		return P`
-      <div class="shadow rounded-lg relative group">
+      <div
+        class="shadow rounded-lg relative group"
+        @click=${this.handleCodeBlockClick}
+        @keydown=${this.handleCodeBlockKeydown}
+      >
         ${Y(this.options.html)}
         <div
           class="absolute select-none top-1 text-xs right-2 group-hover:opacity-0 transition-opacity"
@@ -728,7 +749,11 @@ var Oe = class extends Q {
 	}
 	render() {
 		return P`
-      <div class="shadow rounded-lg overflow-hidden relative group">
+      <div
+        class="shadow rounded-lg overflow-hidden relative group"
+        @click=${this.handleCodeBlockClick}
+        @keydown=${this.handleCodeBlockKeydown}
+      >
         <header
           class="flex items-center h-10 justify-between px-4.5 opacity-95"
           style="background-color: ${this.options.theme?.bg};"
@@ -889,7 +914,7 @@ var $ = class extends G {
 		return null;
 	}
 	async renderCodeAsHtml(e, t) {
-		let { codeToHtml: n } = await import("shiki"), { transformerNotationDiff: r, transformerNotationHighlight: i, transformerNotationFocus: a, transformerNotationErrorLevel: o } = await import("@shikijs/transformers");
+		let { codeToHtml: n } = await import("shiki"), { transformerNotationDiff: r, transformerNotationHighlight: i, transformerNotationFocus: a, transformerNotationErrorLevel: o } = await import("@shikijs/transformers"), { transformerNotationFold: s } = await import("./notation-fold-LJHA_uH-.js");
 		return await n(e, {
 			lang: t,
 			themes: {
@@ -900,7 +925,8 @@ var $ = class extends G {
 				r(),
 				i(),
 				a(),
-				o()
+				o(),
+				s()
 			]
 		});
 	}

package/dist/notation-fold-LJHA_uH-.js

@@ -0,0 +1,99 @@
+import { createCommentNotationTransformer as e } from "@shikijs/transformers";
+//#region src/transformers/notation-fold.ts
+function t(e) {
+	return e.type === "element";
+}
+function n() {
+	let n = null, r = null, i = 0, a = !1, o = e("@halo-dev/shiki-code-element:notation-fold", /#?\s*\[!code fold:(start|end)\]/gi, function([, e], t, o, s, c) {
+		let l = s.indexOf(t);
+		if (e.toLowerCase() === "start") return n = c, r = s[c] || null, !0;
+		if (n === null) return !0;
+		let u = c === l ? l + 1 : l;
+		if (u <= n) return n = null, !0;
+		let d = String(i++), f = Math.max(u - n - 1, 0);
+		for (let e = n; e < u; e++) this.addClassToHast(s[e], ["fold-line", e === n ? "fold-start" : "fold-hidden"]), s[e].properties["data-fold-id"] = d, e === n ? (s[e].properties.role = "button", s[e].properties.tabindex = "0", s[e].properties["aria-expanded"] = "false", s[e].properties["aria-label"] = `Toggle folded code block with ${f} hidden lines`, s[e].properties["data-fold-lines"] = String(f)) : s[e].properties["aria-hidden"] = "true";
+		return this.addClassToHast(this.pre, "has-fold"), n = null, r = null, a = !0, !0;
+	}, void 0), s = o.code;
+	return {
+		...o,
+		code(e) {
+			if (n = null, r = null, i = 0, a = !1, s?.call(this, e), r) {
+				let n = e.children.filter(t), o = n.indexOf(r);
+				if (o !== -1 && o < n.length) {
+					let t = String(i++), r = n.length - o, s = {
+						type: "element",
+						tagName: "span",
+						properties: {
+							class: ["fold-tail-control"],
+							role: "button",
+							tabindex: "0",
+							"aria-expanded": "false",
+							"aria-label": `Show ${r} folded lines`,
+							"data-fold-id": t,
+							"data-fold-lines": String(r)
+						},
+						children: [{
+							type: "element",
+							tagName: "span",
+							properties: { class: ["fold-tail-label", "fold-tail-label-collapsed"] },
+							children: [{
+								type: "element",
+								tagName: "span",
+								properties: {
+									class: ["fold-tail-icon"],
+									"aria-hidden": "true"
+								},
+								children: [{
+									type: "text",
+									value: "▾"
+								}]
+							}, {
+								type: "element",
+								tagName: "span",
+								properties: { class: ["fold-tail-text"] },
+								children: [{
+									type: "text",
+									value: `Show ${r} more lines`
+								}]
+							}]
+						}, {
+							type: "element",
+							tagName: "span",
+							properties: { class: ["fold-tail-label", "fold-tail-label-expanded"] },
+							children: [{
+								type: "element",
+								tagName: "span",
+								properties: {
+									class: ["fold-tail-icon"],
+									"aria-hidden": "true"
+								},
+								children: [{
+									type: "text",
+									value: "▴"
+								}]
+							}, {
+								type: "element",
+								tagName: "span",
+								properties: { class: ["fold-tail-text"] },
+								children: [{
+									type: "text",
+									value: "Collapse"
+								}]
+							}]
+						}]
+					};
+					for (let e = o; e < n.length; e++) this.addClassToHast(n[e], [
+						"fold-line",
+						"fold-hidden",
+						"fold-tail-line"
+					]), n[e].properties["data-fold-id"] = t, n[e].properties["aria-hidden"] = "true";
+					let c = e.children.indexOf(n[n.length - 1]);
+					e.children.splice(c + 1, 0, s), this.addClassToHast(this.pre, ["has-fold", "has-fold-tail"]), a = !0;
+				}
+			}
+			a && (e.children = e.children.filter((e) => !(e.type === "text" && e.value === "\n")));
+		}
+	};
+}
+//#endregion
+export { n as transformerNotationFold };

package/dist/transformers/notation-fold.d.ts

@@ -0,0 +1,2 @@
+import { ShikiTransformer } from 'shiki';
+export declare function transformerNotationFold(): ShikiTransformer;

package/dist/variants/base.d.ts

@@ -5,4 +5,7 @@ export declare class ShikiCodeBaseVariant extends LitElement {
     copied: boolean;
     protected updated(_changedProperties: PropertyValues): void;
     handleCopyCode(): void;
+    handleCodeBlockClick(event: Event): void;
+    handleCodeBlockKeydown(event: KeyboardEvent): void;
+    private toggleFold;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@halo-dev/shiki-code-element",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/halo-sigs/plugin-shiki.git",
@@ -21,14 +21,14 @@
     "dist"
   ],
   "dependencies": {
-    "lit": "^3.3.2"
+    "lit": "^3.3.3"
   },
   "devDependencies": {
     "@iconify-json/mingcute": "^1.2.7",
-    "@iconify-json/tabler": "^1.2.33",
-    "@unocss/reset": "^66.6.2",
-    "unocss": "^66.6.2",
-    "vite-plugin-dts": "^4.5.4"
+    "@iconify-json/tabler": "^1.2.35",
+    "@unocss/reset": "^66.7.4",
+    "unocss": "^66.7.4",
+    "vite-plugin-dts": "^5.0.3"
   },
   "peerDependencies": {
     "@shikijs/transformers": "^3 || ^4",