@prosefly/astro-components 0.2.1 → 0.4.0

package/README.md

@@ -104,25 +104,25 @@ import '@prosefly/astro-components/markdown/image-gallery.css';
 
 ## Styling
 
-Consumers can theme the components with `--pl-*` custom properties:
-
-- `--pl-text-strong`
-- `--pl-text`
-- `--pl-text-muted`
-- `--pl-background`
-- `--pl-surface`
-- `--pl-accent`
-- `--pl-accent-soft`
-- `--pl-accent-contrast`
-- `--pl-{info|success|warning|danger}`
-- `--pl-{info|success|warning|danger}-soft`
-- `--pl-{info|success|warning|danger}-ink`
-- `--pl-{info|success|warning|danger}-contrast`
-- `--pl-callout-{note|tip|warning|danger}-{color|ink|bg}`
-- `--pl-border-subtle`
-- `--pl-font-sans`
-- `--pl-font-mono`
-- `--pl-radius-sm`
-- `--pl-radius-md`
-- `--pl-radius-lg`
-- `--pl-radius-full`
+Consumers can theme the components with `--pf-*` custom properties:
+
+- `--pf-text-strong`
+- `--pf-text`
+- `--pf-text-muted`
+- `--pf-background`
+- `--pf-surface`
+- `--pf-accent`
+- `--pf-accent-soft`
+- `--pf-accent-contrast`
+- `--pf-{info|success|warning|danger}`
+- `--pf-{info|success|warning|danger}-soft`
+- `--pf-{info|success|warning|danger}-ink`
+- `--pf-{info|success|warning|danger}-contrast`
+- `--pf-callout-{note|tip|warning|danger}-{color|ink|bg}`
+- `--pf-border-subtle`
+- `--pf-font-sans`
+- `--pf-font-mono`
+- `--pf-radius-sm`
+- `--pf-radius-md`
+- `--pf-radius-lg`
+- `--pf-radius-full`

package/dist/client/accordions.js

@@ -1,6 +1,6 @@
 export {};
 function getItems(root) {
-    return [...root.querySelectorAll(':scope > [data-pl-accordion]')].filter((item) => item instanceof HTMLDetailsElement);
+    return [...root.querySelectorAll(':scope > [data-pf-accordion]')].filter((item) => item instanceof HTMLDetailsElement);
 }
 function closeSiblings(root, activeItem) {
     if (root.hasAttribute('data-multiple'))
@@ -11,7 +11,7 @@ function closeSiblings(root, activeItem) {
     }
 }
 function openItem(item) {
-    const root = item.closest('[data-pl-accordions]');
+    const root = item.closest('[data-pf-accordions]');
     item.open = true;
     if (root)
         closeSiblings(root, item);
@@ -21,17 +21,17 @@ function openHashTarget() {
         return;
     const id = decodeURIComponent(location.hash.slice(1));
     const item = document.getElementById(id);
-    if (item instanceof HTMLDetailsElement && item.matches('[data-pl-accordion]')) {
+    if (item instanceof HTMLDetailsElement && item.matches('[data-pf-accordion]')) {
         openItem(item);
     }
 }
 if (!window.__proseflyAccordionsInit) {
     window.__proseflyAccordionsInit = () => {
-        document.querySelectorAll('[data-pl-accordions]').forEach((root) => {
-            if (!(root instanceof HTMLElement) || root.dataset.plAccordionsReady === 'true') {
+        document.querySelectorAll('[data-pf-accordions]').forEach((root) => {
+            if (!(root instanceof HTMLElement) || root.dataset.pfAccordionsReady === 'true') {
                 return;
             }
-            root.dataset.plAccordionsReady = 'true';
+            root.dataset.pfAccordionsReady = 'true';
             let defaultValues = [];
             try {
                 defaultValues = JSON.parse(root.getAttribute('data-default-values') || '[]');
@@ -44,7 +44,7 @@ if (!window.__proseflyAccordionsInit) {
                     openItem(item);
                 }
                 item.addEventListener('click', (event) => {
-                    if (!(event.target instanceof Element) || !event.target.closest('[data-pl-accordion-trigger]')) {
+                    if (!(event.target instanceof Element) || !event.target.closest('[data-pf-accordion-trigger]')) {
                         return;
                     }
                     if (item.getAttribute('data-disabled') === 'true') {

package/dist/client/image-gallery.js

@@ -29,7 +29,7 @@ function getItemLeft(track, item) {
     return item.getBoundingClientRect().left - track.getBoundingClientRect().left + track.scrollLeft;
 }
 function scrollToAdjacentItem(track, direction) {
-    const items = [...track.querySelectorAll('.pl-image-gallery__item')].filter((item) => item instanceof HTMLElement);
+    const items = [...track.querySelectorAll('.pf-image-gallery__item')].filter((item) => item instanceof HTMLElement);
     const currentLeft = track.scrollLeft;
     const positions = items.map((item) => getItemLeft(track, item));
     const target = direction === 'previous'
@@ -41,7 +41,7 @@ function scrollToAdjacentItem(track, direction) {
     });
 }
 function measureGallery(gallery, track) {
-    const items = [...track.querySelectorAll('.pl-image-gallery__item')].filter((item) => item instanceof HTMLElement);
+    const items = [...track.querySelectorAll('.pf-image-gallery__item')].filter((item) => item instanceof HTMLElement);
     const images = items
         .map((item) => item.querySelector('img'))
         .filter((image) => image instanceof HTMLImageElement);
@@ -57,14 +57,14 @@ function measureGallery(gallery, track) {
     const resolvedRatios = ratios;
     const styles = getComputedStyle(track);
     const gap = Number.parseFloat(styles.columnGap || styles.gap || '0') || 0;
-    const previewWidth = resolveCssLength(getComputedStyle(gallery).getPropertyValue('--pl-image-gallery-preview-width'), gallery);
+    const previewWidth = resolveCssLength(getComputedStyle(gallery).getPropertyValue('--pf-image-gallery-preview-width'), gallery);
     const firstRatio = resolvedRatios[0];
     const targetHeight = Math.max((track.clientWidth - previewWidth - gap) / firstRatio, 1);
-    gallery.style.setProperty('--pl-image-gallery-height', `${targetHeight.toFixed(2)}px`);
-    gallery.dataset.plImageGalleryMeasured = 'true';
+    gallery.style.setProperty('--pf-image-gallery-height', `${targetHeight.toFixed(2)}px`);
+    gallery.dataset.pfImageGalleryMeasured = 'true';
     items.forEach((item, index) => {
         const ratio = resolvedRatios[index];
-        item.style.setProperty('--pl-image-gallery-ratio', ratio.toFixed(5));
+        item.style.setProperty('--pf-image-gallery-ratio', ratio.toFixed(5));
         item.style.height = `${targetHeight.toFixed(2)}px`;
         item.style.width = `${Math.max(targetHeight * ratio, 1).toFixed(2)}px`;
     });
@@ -72,25 +72,25 @@ function measureGallery(gallery, track) {
 if (typeof window !== 'undefined') {
     if (!window.__proseflyImageGalleryInit) {
         window.__proseflyImageGalleryInit = () => {
-            document.querySelectorAll('[data-pl-image-gallery]').forEach((gallery) => {
-                if (!(gallery instanceof HTMLElement) || gallery.dataset.plImageGalleryReady) {
+            document.querySelectorAll('[data-pf-image-gallery]').forEach((gallery) => {
+                if (!(gallery instanceof HTMLElement) || gallery.dataset.pfImageGalleryReady) {
                     return;
                 }
-                const track = gallery.querySelector('[data-pl-image-gallery-track]');
+                const track = gallery.querySelector('[data-pf-image-gallery-track]');
                 if (!(track instanceof HTMLElement)) {
                     return;
                 }
-                gallery.dataset.plImageGalleryReady = 'true';
+                gallery.dataset.pfImageGalleryReady = 'true';
                 const measure = () => measureGallery(gallery, track);
                 const images = [...track.querySelectorAll('img')].filter((image) => image instanceof HTMLImageElement);
                 Promise.all(images.map(imageReady)).then(measure);
                 new ResizeObserver(measure).observe(track);
-                gallery.querySelectorAll('[data-pl-image-gallery-button]').forEach((button) => {
+                gallery.querySelectorAll('[data-pf-image-gallery-button]').forEach((button) => {
                     if (!(button instanceof HTMLButtonElement)) {
                         return;
                     }
                     button.addEventListener('click', () => {
-                        const direction = button.getAttribute('data-pl-image-gallery-button');
+                        const direction = button.getAttribute('data-pf-image-gallery-button');
                         scrollToAdjacentItem(track, direction === 'previous' ? 'previous' : 'next');
                     });
                 });

package/dist/client/tabs.js

@@ -3,7 +3,7 @@ function getStoredLabel(syncKey) {
     if (!syncKey)
         return undefined;
     try {
-        return localStorage.getItem(`pl-tabs:${syncKey}`) ?? undefined;
+        return localStorage.getItem(`pf-tabs:${syncKey}`) ?? undefined;
     }
     catch {
         return undefined;
@@ -13,7 +13,7 @@ function storeLabel(syncKey, label) {
     if (!syncKey || !label)
         return;
     try {
-        localStorage.setItem(`pl-tabs:${syncKey}`, label);
+        localStorage.setItem(`pf-tabs:${syncKey}`, label);
     }
     catch {
         // Ignore storage failures in restricted browsing contexts.
@@ -27,26 +27,26 @@ async function writeClipboard(text) {
     throw new Error('Clipboard API is not available.');
 }
 function setCopyState(button, copied) {
-    const copyIcon = button.querySelector('[data-pl-tabs-copy-icon="copy"]');
-    const checkIcon = button.querySelector('[data-pl-tabs-copy-icon="check"]');
+    const copyIcon = button.querySelector('[data-pf-tabs-copy-icon="copy"]');
+    const checkIcon = button.querySelector('[data-pf-tabs-copy-icon="check"]');
     copyIcon?.toggleAttribute('hidden', copied);
     checkIcon?.toggleAttribute('hidden', !copied);
     button.setAttribute('aria-label', copied ? 'Copied' : 'Copy code');
     button.setAttribute('title', copied ? 'Copied' : 'Copy code');
 }
 function getActiveCode(root) {
-    const activePanel = root.querySelector('.pl-tabs__panel:not([hidden])');
+    const activePanel = root.querySelector('.pf-tabs__panel:not([hidden])');
     const code = activePanel?.querySelector('pre code');
     return code?.textContent ?? '';
 }
 function setActiveIcon(root, panelId) {
-    const iconContainer = root.querySelector('.pl-tabs__active-icons');
-    const icons = [...root.querySelectorAll('[data-pl-tabs-icon-for]')];
+    const iconContainer = root.querySelector('.pf-tabs__active-icons');
+    const icons = [...root.querySelectorAll('[data-pf-tabs-icon-for]')];
     if (!(iconContainer instanceof HTMLElement))
         return;
     let hasActiveIcon = false;
     icons.forEach((icon) => {
-        const isActive = icon.getAttribute('data-pl-tabs-icon-for') === panelId;
+        const isActive = icon.getAttribute('data-pf-tabs-icon-for') === panelId;
         icon.toggleAttribute('hidden', !isActive);
         hasActiveIcon ||= isActive;
     });
@@ -56,8 +56,8 @@ function activate(root, trigger, options = {}) {
     const panelId = trigger.getAttribute('data-tab-panel');
     const label = trigger.getAttribute('data-tab-label');
     const syncKey = root.getAttribute('data-sync-key');
-    const triggers = [...root.querySelectorAll('[data-pl-tabs-trigger]')];
-    const panels = [...root.querySelectorAll('.pl-tabs__panel')];
+    const triggers = [...root.querySelectorAll('[data-pf-tabs-trigger]')];
+    const panels = [...root.querySelectorAll('.pf-tabs__panel')];
     triggers.forEach((button) => {
         const isActive = button === trigger;
         button.setAttribute('aria-selected', isActive ? 'true' : 'false');
@@ -77,12 +77,12 @@ function activate(root, trigger, options = {}) {
     if (!syncKey || !label) {
         return;
     }
-    document.querySelectorAll('[data-pl-tabs]').forEach((otherRoot) => {
+    document.querySelectorAll('[data-pf-tabs]').forEach((otherRoot) => {
         if (otherRoot === root || otherRoot.getAttribute('data-sync-key') !== syncKey) {
             return;
         }
         const matchingTrigger = [
-            ...otherRoot.querySelectorAll('[data-pl-tabs-trigger]'),
+            ...otherRoot.querySelectorAll('[data-pf-tabs-trigger]'),
         ].find((button) => button.getAttribute('data-tab-label') === label);
         if (matchingTrigger) {
             activate(otherRoot, matchingTrigger, { persist: false });
@@ -91,11 +91,11 @@ function activate(root, trigger, options = {}) {
 }
 if (!window.__proseflyTabsInit) {
     window.__proseflyTabsInit = () => {
-        document.querySelectorAll('[data-pl-tabs]').forEach((root) => {
-            if (root instanceof HTMLElement && root.dataset.plTabsReady === 'true') {
+        document.querySelectorAll('[data-pf-tabs]').forEach((root) => {
+            if (root instanceof HTMLElement && root.dataset.pfTabsReady === 'true') {
                 return;
             }
-            const triggers = [...root.querySelectorAll('[data-pl-tabs-trigger]')];
+            const triggers = [...root.querySelectorAll('[data-pf-tabs-trigger]')];
             const syncKey = root.getAttribute('data-sync-key');
             const storedLabel = getStoredLabel(syncKey);
             const storedTrigger = storedLabel
@@ -105,7 +105,7 @@ if (!window.__proseflyTabsInit) {
                 triggers.find((button) => button.getAttribute('aria-selected') === 'true') ??
                 triggers[0];
             if (root instanceof HTMLElement) {
-                root.dataset.plTabsReady = 'true';
+                root.dataset.pfTabsReady = 'true';
             }
             if (selectedTrigger) {
                 activate(root, selectedTrigger, { persist: false });
@@ -133,7 +133,7 @@ if (!window.__proseflyTabsInit) {
                     activate(root, nextTrigger, { focus: true });
                 });
             });
-            root.querySelectorAll('[data-pl-tabs-copy]').forEach((button) => {
+            root.querySelectorAll('[data-pf-tabs-copy]').forEach((button) => {
                 if (!(button instanceof HTMLButtonElement)) {
                     return;
                 }

package/dist/markdown/callout-directives.d.ts

@@ -0,0 +1,3 @@
+import type { RemarkPlugin } from '@astrojs/markdown-remark';
+export declare const remarkCalloutDirectives: RemarkPlugin;
+//# sourceMappingURL=callout-directives.d.ts.map

package/dist/markdown/callout-directives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout-directives.d.ts","sourceRoot":"","sources":["../../src/markdown/callout-directives.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAoC7D,eAAO,MAAM,uBAAuB,EAAE,YA0BrC,CAAC"}

package/dist/markdown/callout-directives.js

@@ -0,0 +1,130 @@
+import remarkDirective from 'remark-directive';
+const importStatement = "import { Callout as ProseflyDirectiveCallout } from '@prosefly/astro-components';";
+const calloutTypes = new Map([
+    ['caution', 'warning'],
+    ['danger', 'danger'],
+    ['note', 'note'],
+    ['tip', 'tip'],
+    ['warning', 'warning'],
+]);
+export const remarkCalloutDirectives = function () {
+    this.use(remarkDirective);
+    return (tree) => {
+        const root = tree;
+        let transformed = false;
+        visitChildren(root, (node, parent, index) => {
+            if (!parent?.children ||
+                index === undefined ||
+                !isCalloutDirective(node)) {
+                return;
+            }
+            parent.children[index] = createCalloutNode(node);
+            transformed = true;
+        });
+        if (transformed && !hasCalloutDirectiveImport(root)) {
+            root.children.unshift(createImportNode());
+        }
+    };
+};
+function visitChildren(node, visitor, parent, index) {
+    visitor(node, parent, index);
+    if (!node.children) {
+        return;
+    }
+    node.children.forEach((child, childIndex) => {
+        visitChildren(child, visitor, node, childIndex);
+    });
+}
+function isCalloutDirective(node) {
+    return ((node.type === 'containerDirective' || node.type === 'leafDirective') &&
+        typeof node.name === 'string' &&
+        calloutTypes.has(node.name) &&
+        Array.isArray(node.children));
+}
+function createCalloutNode(node) {
+    const { title, children } = getCalloutContent(node);
+    const type = calloutTypes.get(node.name) ?? 'note';
+    const attributes = [
+        {
+            type: 'mdxJsxAttribute',
+            name: 'type',
+            value: type,
+        },
+    ];
+    if (title) {
+        attributes.push({
+            type: 'mdxJsxAttribute',
+            name: 'title',
+            value: title,
+        });
+    }
+    return {
+        type: 'mdxJsxFlowElement',
+        name: 'ProseflyDirectiveCallout',
+        attributes,
+        children,
+    };
+}
+function getCalloutContent(node) {
+    const title = getAttributeTitle(node) ?? getDirectiveLabel(node);
+    const children = title
+        ? node.children.filter((child) => !isDirectiveLabel(child))
+        : node.children;
+    return { children, title };
+}
+function getAttributeTitle(node) {
+    const title = node.attributes?.title;
+    return typeof title === 'string' && title.trim() ? title : undefined;
+}
+function getDirectiveLabel(node) {
+    const label = node.children.find(isDirectiveLabel);
+    if (!label?.children) {
+        return undefined;
+    }
+    const text = label.children.map(getPlainText).join('').trim();
+    return text || undefined;
+}
+function isDirectiveLabel(node) {
+    return node.type === 'paragraph' && node.data?.directiveLabel === true;
+}
+function getPlainText(node) {
+    if (typeof node.value === 'string') {
+        return node.value;
+    }
+    return node.children?.map(getPlainText).join('') ?? '';
+}
+function createImportNode() {
+    return {
+        type: 'mdxjsEsm',
+        value: importStatement,
+        data: {
+            estree: {
+                type: 'Program',
+                sourceType: 'module',
+                body: [
+                    {
+                        type: 'ImportDeclaration',
+                        specifiers: [
+                            {
+                                type: 'ImportSpecifier',
+                                imported: { type: 'Identifier', name: 'Callout' },
+                                local: { type: 'Identifier', name: 'ProseflyDirectiveCallout' },
+                            },
+                        ],
+                        source: {
+                            type: 'Literal',
+                            value: '@prosefly/astro-components',
+                            raw: "'@prosefly/astro-components'",
+                        },
+                    },
+                ],
+            },
+        },
+    };
+}
+function hasCalloutDirectiveImport(tree) {
+    return tree.children.some((node) => node.type === 'mdxjsEsm' &&
+        typeof node.value === 'string' &&
+        node.value.includes('ProseflyDirectiveCallout'));
+}
+//# sourceMappingURL=callout-directives.js.map

package/dist/markdown/callout-directives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout-directives.js","sourceRoot":"","sources":["../../src/markdown/callout-directives.ts"],"names":[],"mappings":"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"}

package/dist/markdown/image-gallery-plugin.js

@@ -41,7 +41,7 @@ function createImageGallery(images) {
             type: 'element',
             tagName: 'figure',
             properties: {
-                className: ['pl-image-gallery'],
+                className: ['pf-image-gallery'],
                 dataImageCount: String(imageCount),
             },
             children: images,
@@ -51,9 +51,9 @@ function createImageGallery(images) {
         type: 'element',
         tagName: 'figure',
         properties: {
-            className: ['pl-image-gallery'],
+            className: ['pf-image-gallery'],
             dataImageCount: String(imageCount),
-            dataPlImageGallery: '',
+            dataPfImageGallery: '',
         },
         children: [
             createGalleryButton('previous'),
@@ -61,8 +61,8 @@ function createImageGallery(images) {
                 type: 'element',
                 tagName: 'div',
                 properties: {
-                    className: ['pl-image-gallery__track'],
-                    dataPlImageGalleryTrack: '',
+                    className: ['pf-image-gallery__track'],
+                    dataPfImageGalleryTrack: '',
                 },
                 children: images.map(createGalleryItem),
             },
@@ -75,7 +75,7 @@ function createGalleryItem(image) {
         type: 'element',
         tagName: 'span',
         properties: {
-            className: ['pl-image-gallery__item'],
+            className: ['pf-image-gallery__item'],
         },
         children: [image],
     };
@@ -86,8 +86,8 @@ function createGalleryButton(direction) {
         tagName: 'button',
         properties: {
             ariaLabel: direction === 'previous' ? 'Previous image' : 'Next image',
-            className: ['pl-image-gallery__button'],
-            dataPlImageGalleryButton: direction,
+            className: ['pf-image-gallery__button'],
+            dataPfImageGalleryButton: direction,
             type: 'button',
         },
         children: [createChevronIcon(direction)],
@@ -99,7 +99,7 @@ function createChevronIcon(direction) {
         tagName: 'svg',
         properties: {
             ariaHidden: 'true',
-            className: ['pl-image-gallery__button-icon'],
+            className: ['pf-image-gallery__button-icon'],
             fill: 'none',
             height: '20',
             stroke: 'currentColor',

package/dist/markdown/image-gallery.css

@@ -1,19 +1,21 @@
-.pl-image-gallery {
+@import "../theme-tokens.css";
+
+.pf-image-gallery {
   margin-inline: 0;
 }
 
-.pl-image-gallery img {
+.pf-image-gallery img {
   display: block;
   margin: 0;
   width: 100%;
 }
 
-.pl-image-gallery:not([data-image-count="1"]) {
-  --pl-image-gallery-preview-width: 4rem;
+.pf-image-gallery:not([data-image-count="1"]) {
+  --pf-image-gallery-preview-width: 4rem;
   position: relative;
 }
 
-.pl-image-gallery__track {
+.pf-image-gallery__track {
   align-items: flex-start;
   display: flex;
   gap: 0.75rem;
@@ -26,23 +28,23 @@
   scrollbar-width: none;
 }
 
-.pl-image-gallery__track::-webkit-scrollbar {
+.pf-image-gallery__track::-webkit-scrollbar {
   display: none;
 }
 
-.pl-image-gallery__item {
+.pf-image-gallery__item {
   align-items: center;
-  aspect-ratio: var(--pl-image-gallery-ratio, 3 / 2);
-  border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
+  aspect-ratio: var(--pf-image-gallery-ratio, 3 / 2);
+  border-radius: min(var(--pf-radius-lg, 0.75rem), 1rem);
   display: flex;
   flex: 0 0 auto;
   justify-content: center;
   overflow: hidden;
   scroll-snap-align: start;
-  width: calc(100% - var(--pl-image-gallery-preview-width));
+  width: calc(100% - var(--pf-image-gallery-preview-width));
 }
 
-.pl-image-gallery__item img {
+.pf-image-gallery__item img {
   border-radius: inherit;
   height: 100%;
   object-fit: contain;
@@ -50,19 +52,19 @@
 }
 
 @media (max-width: 640px) {
-  .pl-image-gallery:not([data-image-count="1"]) {
-    --pl-image-gallery-preview-width: 2.75rem;
+  .pf-image-gallery:not([data-image-count="1"]) {
+    --pf-image-gallery-preview-width: 2.75rem;
   }
 }
 
-.pl-image-gallery__button {
+.pf-image-gallery__button {
   align-items: center;
   appearance: none;
   backdrop-filter: blur(8px);
-  background: color-mix(in oklab, var(--pl-background, #ffffff) 82%, transparent);
-  border: 1px solid color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
-  border-radius: var(--pl-radius-full, 999px);
-  color: var(--pl-text-strong, var(--pl-text, #182230));
+  background: color-mix(in oklab, var(--pf-background, #ffffff) 82%, transparent);
+  border: 1px solid color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
+  border-radius: var(--pf-radius-full, 999px);
+  color: var(--pf-text-strong, var(--pf-text, #182230));
   cursor: pointer;
   display: inline-flex;
   height: 2rem;
@@ -81,38 +83,38 @@
   z-index: 1;
 }
 
-.pl-image-gallery__button[data-pl-image-gallery-button="previous"] {
+.pf-image-gallery__button[data-pf-image-gallery-button="previous"] {
   inset-inline-start: 0.75rem;
 }
 
-.pl-image-gallery__button[data-pl-image-gallery-button="next"] {
+.pf-image-gallery__button[data-pf-image-gallery-button="next"] {
   inset-inline-end: 0.75rem;
 }
 
-.pl-image-gallery__button:hover {
-  background: color-mix(in oklab, var(--pl-background, #ffffff) 94%, transparent);
-  border-color: color-mix(in oklab, var(--pl-text-muted, #667085) 30%, transparent);
+.pf-image-gallery__button:hover {
+  background: color-mix(in oklab, var(--pf-background, #ffffff) 94%, transparent);
+  border-color: color-mix(in oklab, var(--pf-text-muted, #667085) 30%, transparent);
 }
 
-.pl-image-gallery__button:focus-visible {
-  outline: 2px solid var(--pl-accent, #4f46e5);
+.pf-image-gallery__button:focus-visible {
+  outline: 2px solid var(--pf-accent, #3e7e55);
   outline-offset: 2px;
 }
 
-.pl-image-gallery__button-icon {
+.pf-image-gallery__button-icon {
   display: block;
   height: 1.125rem;
   width: 1.125rem;
 }
 
 @media (hover: hover) {
-  .pl-image-gallery__button {
+  .pf-image-gallery__button {
     opacity: 0;
     pointer-events: none;
   }
 
-  .pl-image-gallery:hover .pl-image-gallery__button,
-  .pl-image-gallery:focus-within .pl-image-gallery__button {
+  .pf-image-gallery:hover .pf-image-gallery__button,
+  .pf-image-gallery:focus-within .pf-image-gallery__button {
     opacity: 1;
     pointer-events: auto;
   }

package/dist/markdown/index.d.ts

@@ -1,3 +1,5 @@
+export { unified } from '@astrojs/markdown-remark';
 export { rehypeImageGallery } from './image-gallery-plugin.js';
+export { remarkCalloutDirectives } from './callout-directives.js';
 export { remarkPackageManagerTabs } from './package-manager-tabs.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/markdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/markdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/markdown/index.js

@@ -1,3 +1,5 @@
+export { unified } from '@astrojs/markdown-remark';
 export { rehypeImageGallery } from './image-gallery-plugin.js';
+export { remarkCalloutDirectives } from './callout-directives.js';
 export { remarkPackageManagerTabs } from './package-manager-tabs.js';
 //# sourceMappingURL=index.js.map

package/dist/markdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/markdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/markdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/markdown/package-manager-tabs.js

@@ -288,7 +288,7 @@ function createPackageManagerCodeElement(code, language) {
             {
                 type: 'mdxJsxAttribute',
                 name: 'className',
-                value: 'pl-package-manager-code',
+                value: 'pf-package-manager-code',
             },
             {
                 type: 'mdxJsxAttribute',