@limetech/lime-elements 39.0.4 → 39.1.0

package/dist/cjs/{translations-BIHr3B9O.js → translations-B0hzD08N.js}

@@ -40,6 +40,20 @@ var da = {
     'file-viewer.open-in-fullscreen': 'Åbn i fuld skærm',
     'file-viewer.open-in-new-tab': 'Åbn i en ny fane',
     'file-viewer.more-actions': 'Mere…',
+    'file-viewer.email.subject': 'Emne',
+    'file-viewer.email.from': 'Fra',
+    'file-viewer.email.to': 'Til',
+    'file-viewer.email.cc': 'Kopi',
+    'file-viewer.email.date': 'Dato',
+    'file-viewer.email.attachments': 'Vedhæftninger',
+    'file-viewer.email.attachment.unnamed': 'Vedhæftning uden navn',
+    'file-viewer.email.remote-images.warning': 'Billeder indlæses ikke for at beskytte dit privatliv.',
+    'file-viewer.email.remote-images.warning.description': `Mange e-mails indeholder billeder, der hostes på eksterne servere.
+Når billeder indlæses, anmoder din enhed dem fra afsenderens server.
+Det kan afsløre for afsenderen, at du har åbnet beskeden, hvornår du åbnede den, samt metadata såsom din IP-adresse og oplysninger om enhed/browser.
+
+Du kan fortsætte med at blokere billeder (e-mailen kan se ufuldstændig ud) eller indlæse dem, hvis du stoler på afsenderen.`,
+    'file-viewer.email.remote-images.load': 'Indlæs billeder',
     'editor-menu.bold': 'Fed',
     'editor-menu.italic': 'Kursiv',
     'editor-menu.strikethrough': 'Gennemstreget',
@@ -108,6 +122,20 @@ var de = {
     'file-viewer.open-in-fullscreen': 'Im Vollbildmodus öffnen',
     'file-viewer.open-in-new-tab': 'In einem neuen Tab öffnen',
     'file-viewer.more-actions': 'Mehr…',
+    'file-viewer.email.subject': 'Betreff',
+    'file-viewer.email.from': 'Von',
+    'file-viewer.email.to': 'An',
+    'file-viewer.email.cc': 'Cc',
+    'file-viewer.email.date': 'Datum',
+    'file-viewer.email.attachments': 'Anhänge',
+    'file-viewer.email.attachment.unnamed': 'Unbenannter Anhang',
+    'file-viewer.email.remote-images.warning': 'Bilder werden nicht geladen, um Ihre Privatsphäre zu schützen.',
+    'file-viewer.email.remote-images.warning.description': `Viele E-Mails enthalten Bilder, die auf externen Servern gehostet werden.
+Wenn Bilder geladen werden, fordert Ihr Gerät sie vom Server des Absenders an.
+Dadurch kann der Absender erfahren, dass Sie die Nachricht geöffnet haben, wann Sie sie geöffnet haben, sowie Metadaten wie Ihre IP-Adresse und Informationen zu Gerät/Browser.
+
+Sie können Bilder weiterhin blockieren (die E-Mail kann unvollständig aussehen) oder sie laden, wenn Sie dem Absender vertrauen.`,
+    'file-viewer.email.remote-images.load': 'Bilder laden',
     'editor-menu.bold': 'Fett',
     'editor-menu.italic': 'Kursiv',
     'editor-menu.strikethrough': 'Durchgestrichen',
@@ -176,6 +204,20 @@ var en = {
     'file-viewer.open-in-fullscreen': 'Open in fullscreen',
     'file-viewer.open-in-new-tab': 'Open in a new tab',
     'file-viewer.more-actions': 'More…',
+    'file-viewer.email.subject': 'Subject',
+    'file-viewer.email.from': 'From',
+    'file-viewer.email.to': 'To',
+    'file-viewer.email.cc': 'Cc',
+    'file-viewer.email.date': 'Date',
+    'file-viewer.email.attachments': 'Attachments',
+    'file-viewer.email.attachment.unnamed': 'Unnamed attachment',
+    'file-viewer.email.remote-images.warning': "Images aren't loaded to protect your privacy.",
+    'file-viewer.email.remote-images.warning.description': `Many emails include images hosted on external servers.
+When images are loaded, your device requests them from the sender’s server.
+This may reveal to the sender that you opened the message, when you opened it, and metadata such as your IP address and device/browser information.
+
+You can keep images blocked (the email may look incomplete), or load them if you trust the sender.`,
+    'file-viewer.email.remote-images.load': 'Load images',
     'editor-menu.bold': 'Bold',
     'editor-menu.italic': 'Italic',
     'editor-menu.strikethrough': 'Strikethrough',
@@ -244,6 +286,20 @@ var fi = {
     'file-viewer.open-in-fullscreen': 'Avaa koko näytössä',
     'file-viewer.open-in-new-tab': 'Avaa uudella välilehdellä',
     'file-viewer.more-actions': 'Lisää…',
+    'file-viewer.email.subject': 'Aihe',
+    'file-viewer.email.from': 'Lähettäjä',
+    'file-viewer.email.to': 'Vastaanottaja',
+    'file-viewer.email.cc': 'Kopio',
+    'file-viewer.email.date': 'Päiväys',
+    'file-viewer.email.attachments': 'Liitteet',
+    'file-viewer.email.attachment.unnamed': 'Nimetön liite',
+    'file-viewer.email.remote-images.warning': 'Kuvia ei ladata yksityisyytesi suojaamiseksi.',
+    'file-viewer.email.remote-images.warning.description': `Monet sähköpostit sisältävät kuvia, jotka sijaitsevat ulkoisilla palvelimilla.
+Kun kuvat ladataan, laitteesi pyytää ne lähettäjän palvelimelta.
+Tämä voi paljastaa lähettäjälle, että avasit viestin, milloin avasit sen, sekä metatietoja, kuten IP-osoitteesi ja tiedot laitteesta/selaimesta.
+
+Voit pitää kuvat estettyinä (sähköposti voi näyttää puutteelliselta) tai ladata ne, jos luotat lähettäjään.`,
+    'file-viewer.email.remote-images.load': 'Lataa kuvat',
     'editor-menu.bold': 'Lihavoitu',
     'editor-menu.italic': 'Kursivoitu',
     'editor-menu.strikethrough': 'Yliviivaus',
@@ -312,6 +368,20 @@ var fr = {
     'file-viewer.open-in-fullscreen': 'Ouvrir en plein écran',
     'file-viewer.open-in-new-tab': 'Ouvrir dans un nouvel onglet',
     'file-viewer.more-actions': 'Plus…',
+    'file-viewer.email.subject': 'Objet',
+    'file-viewer.email.from': 'De',
+    'file-viewer.email.to': 'À',
+    'file-viewer.email.cc': 'Cc',
+    'file-viewer.email.date': 'Date',
+    'file-viewer.email.attachments': 'Pièces jointes',
+    'file-viewer.email.attachment.unnamed': 'Pièce jointe sans nom',
+    'file-viewer.email.remote-images.warning': 'Les images ne sont pas chargées afin de protéger votre vie privée.',
+    'file-viewer.email.remote-images.warning.description': `De nombreux e-mails contiennent des images hébergées sur des serveurs externes.
+Lorsque les images sont chargées, votre appareil les demande au serveur de l’expéditeur.
+Cela peut révéler à l’expéditeur que vous avez ouvert le message, quand vous l’avez ouvert, ainsi que des métadonnées telles que votre adresse IP et des informations sur votre appareil/navigateur.
+
+Vous pouvez laisser les images bloquées (l’e-mail peut sembler incomplet) ou les charger si vous faites confiance à l’expéditeur.`,
+    'file-viewer.email.remote-images.load': 'Charger les images',
     'editor-menu.bold': 'Gras',
     'editor-menu.italic': 'Italique',
     'editor-menu.strikethrough': 'Barré',
@@ -380,6 +450,20 @@ var nl = {
     'file-viewer.open-in-fullscreen': 'Open in volledig scherm',
     'file-viewer.open-in-new-tab': 'Openen op een nieuw tabblad',
     'file-viewer.more-actions': 'Meer…',
+    'file-viewer.email.subject': 'Onderwerp',
+    'file-viewer.email.from': 'Van',
+    'file-viewer.email.to': 'Aan',
+    'file-viewer.email.cc': 'Cc',
+    'file-viewer.email.date': 'Datum',
+    'file-viewer.email.attachments': 'Bijlagen',
+    'file-viewer.email.attachment.unnamed': 'Bijlage zonder naam',
+    'file-viewer.email.remote-images.warning': 'Afbeeldingen worden niet geladen om je privacy te beschermen.',
+    'file-viewer.email.remote-images.warning.description': `Veel e-mails bevatten afbeeldingen die op externe servers worden gehost.
+Wanneer afbeeldingen worden geladen, vraagt je apparaat ze op bij de server van de afzender.
+Dit kan aan de afzender onthullen dat je het bericht hebt geopend, wanneer je het hebt geopend, en metadata zoals je IP-adres en informatie over apparaat/browser.
+
+Je kunt afbeeldingen geblokkeerd houden (de e-mail kan er onvolledig uitzien) of ze laden als je de afzender vertrouwt.`,
+    'file-viewer.email.remote-images.load': 'Afbeeldingen laden',
     'editor-menu.bold': 'Vet',
     'editor-menu.italic': 'Cursief',
     'editor-menu.strikethrough': 'Doorhalen',
@@ -447,6 +531,20 @@ var no = {
     'file-viewer.open-in-fullscreen': 'Åpne i fullskjerm',
     'file-viewer.open-in-new-tab': 'Åpne i en ny fane',
     'file-viewer.more-actions': 'Mer…',
+    'file-viewer.email.subject': 'Emne',
+    'file-viewer.email.from': 'Fra',
+    'file-viewer.email.to': 'Til',
+    'file-viewer.email.cc': 'Kopi',
+    'file-viewer.email.date': 'Dato',
+    'file-viewer.email.attachments': 'Vedlegg',
+    'file-viewer.email.attachment.unnamed': 'Vedlegg uten navn',
+    'file-viewer.email.remote-images.warning': 'Bilder lastes ikke inn for å beskytte personvernet ditt.',
+    'file-viewer.email.remote-images.warning.description': `Mange e-poster inneholder bilder som ligger på eksterne servere.
+Når bilder lastes inn, henter enheten din dem fra avsenderens server.
+Dette kan avsløre for avsenderen at du åpnet meldingen, når du åpnet den, og metadata som IP-adressen din og informasjon om enhet/nettleser.
+
+Du kan fortsette å blokkere bilder (e-posten kan se ufullstendig ut), eller laste dem inn hvis du stoler på avsenderen.`,
+    'file-viewer.email.remote-images.load': 'Last inn bilder',
     'editor-menu.bold': 'Fet',
     'editor-menu.italic': 'Kursiv',
     'editor-menu.strikethrough': 'Gjennomstreking',
@@ -516,6 +614,20 @@ var sv = {
     'file-viewer.open-in-fullscreen': 'Öppna i fullskärmsläge',
     'file-viewer.open-in-new-tab': 'Öppna i ny flik',
     'file-viewer.more-actions': 'Mer…',
+    'file-viewer.email.subject': 'Ämne',
+    'file-viewer.email.from': 'Från',
+    'file-viewer.email.to': 'Till',
+    'file-viewer.email.cc': 'Kopia',
+    'file-viewer.email.date': 'Datum',
+    'file-viewer.email.attachments': 'Bilagor',
+    'file-viewer.email.attachment.unnamed': 'Namnlös bilaga',
+    'file-viewer.email.remote-images.warning': 'Bilder laddas inte för att skydda din integritet.',
+    'file-viewer.email.remote-images.warning.description': `Många e-postmeddelanden innehåller bilder som finns på externa servrar.
+När bilder laddas hämtar din enhet dem från avsändarens server.
+Det kan avslöja för avsändaren att du öppnade meddelandet, när du öppnade det och metadata som din IP-adress samt information om enhet/webbläsare.
+
+Du kan fortsätta blockera bilder (e-posten kan se ofullständig ut) eller ladda dem om du litar på avsändaren.`,
+    'file-viewer.email.remote-images.load': 'Ladda bilder',
     'editor-menu.bold': 'Fet',
     'editor-menu.italic': 'Kursiv',
     'editor-menu.strikethrough': 'Genomstruken',

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "components/dock/dock-button/dock-button.js",
     "components/drag-handle/drag-handle.js",
     "components/dynamic-label/dynamic-label.js",
+    "components/email-viewer/email-viewer.js",
     "components/file/file.js",
     "components/file-dropzone/file-dropzone.js",
     "components/file-input/file-input.js",

package/dist/collection/components/email-viewer/email-loader.js

@@ -0,0 +1,206 @@
+import PostalMime from "postal-mime";
+import { sanitizeEmailHTML } from "./sanitize-email-html";
+/**
+ * Email loading/parsing helpers for `limel-file-viewer`.
+ *
+ * Parses an RFC 5322 / MIME email message (commonly stored as a `.eml` file)
+ * and returns a simplified `Email` view-model.
+ */
+/**
+ * Fetches and parses an email message.
+ *
+ * - Prefers `email.html` if present, otherwise falls back to `email.text`.
+ * - Attempts to resolve inline images referenced via `cid:` by replacing
+ *   `<img src="cid:...">` with `data:` URLs generated from inline attachments.
+ *
+ * @param url - URL to an email message, usually ending in `.eml`.
+ * @returns A simplified `Email` object for rendering.
+ */
+export async function loadEmail(url) {
+    const buffer = await fetchEmailBuffer(url);
+    const email = await parseEmail(url, buffer);
+    const parsedEmail = {
+        subject: email.subject || undefined,
+        from: formatAddress(email.from),
+        to: formatAddresses(email.to),
+        cc: formatAddresses(email.cc),
+        date: email.date || undefined,
+    };
+    const { attachments, cidUrlById } = extractAttachments(email);
+    if (attachments.length > 0) {
+        parsedEmail.attachments = attachments;
+    }
+    await applyBody(parsedEmail, email, cidUrlById);
+    return parsedEmail;
+}
+async function fetchEmailBuffer(url) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch email (${response.status} ${response.statusText})`);
+        }
+        return await response.arrayBuffer();
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        throw new Error(`Failed to load email from ${url}: ${message}`);
+    }
+}
+async function parseEmail(url, buffer) {
+    try {
+        return await PostalMime.parse(buffer, {
+            attachmentEncoding: 'arraybuffer',
+        });
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        throw new Error(`Failed to parse email from ${url}: ${message}`);
+    }
+}
+function extractAttachments(email) {
+    const attachments = [];
+    const cidUrlById = new Map();
+    for (const attachment of email.attachments || []) {
+        const contentId = normalizeContentId(attachment.contentId);
+        const isInline = attachment.related || attachment.disposition === 'inline';
+        if (!isInline) {
+            const size = attachment.content instanceof ArrayBuffer
+                ? attachment.content.byteLength
+                : undefined;
+            attachments.push({
+                filename: attachment.filename || undefined,
+                mimeType: attachment.mimeType || undefined,
+                size,
+            });
+            continue;
+        }
+        const hasArrayBufferContent = attachment.content instanceof ArrayBuffer;
+        if (!contentId || !hasArrayBufferContent) {
+            const size = hasArrayBufferContent
+                ? attachment.content.byteLength
+                : undefined;
+            attachments.push({
+                filename: attachment.filename || undefined,
+                mimeType: attachment.mimeType || 'application/octet-stream',
+                size,
+            });
+            continue;
+        }
+        const mimeType = attachment.mimeType || 'application/octet-stream';
+        const base64 = arrayBufferToBase64(attachment.content);
+        const dataUrl = `data:${mimeType};base64,${base64}`;
+        cidUrlById.set(contentId, dataUrl);
+    }
+    return { attachments, cidUrlById };
+}
+async function applyBody(parsedEmail, email, cidUrlById) {
+    const html = (email.html || '').trim();
+    if (html) {
+        const withCidsResolved = replaceCidReferences(html, cidUrlById);
+        parsedEmail.bodyHtml = await sanitizeEmailHTML(withCidsResolved);
+        return;
+    }
+    parsedEmail.bodyText = (email.text || '').trim() || undefined;
+}
+/**
+ * Normalizes a Content-ID by removing surrounding angle brackets.
+ *
+ * Example: `<image@id>` -> `image@id`
+ *
+ * @param contentId - The Content-ID to normalize, optionally surrounded by angle brackets.
+ */
+function normalizeContentId(contentId) {
+    if (!contentId) {
+        return '';
+    }
+    let normalized = contentId.trim();
+    if (normalized.startsWith('<')) {
+        normalized = normalized.slice(1);
+    }
+    if (normalized.endsWith('>')) {
+        normalized = normalized.slice(0, -1);
+    }
+    return normalized.trim();
+}
+function replaceCidReferences(html, cidUrlById) {
+    if (cidUrlById.size === 0) {
+        return html;
+    }
+    return html.replaceAll(/(src\s*=\s*["']?)cid:([^"'\s>]+)(["']?)/gi, (match, prefix, cid, suffix) => {
+        const normalized = normalizeContentId(cid);
+        const replacement = cidUrlById.get(normalized);
+        if (!replacement) {
+            return match;
+        }
+        return `${prefix}${replacement}${suffix}`;
+    });
+}
+function arrayBufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    if (typeof btoa === 'function') {
+        let binary = '';
+        for (const byte of bytes) {
+            binary += String['fromCharCode'](byte);
+        }
+        return btoa(binary);
+    }
+    // Jest/Node fallback
+    return globalThis.Buffer.from(bytes).toString('base64');
+}
+function isNonEmptyString(value) {
+    return typeof value === 'string' && value.length > 0;
+}
+/**
+ * Formats one or many address objects returned by PostalMime.
+ *
+ * @param addresses - Address object(s) to format.
+ * @returns Formatted address string, or undefined if no valid addresses.
+ */
+function formatAddresses(addresses) {
+    if (!addresses) {
+        return undefined;
+    }
+    const list = Array.isArray(addresses) ? addresses : [addresses];
+    const parts = list
+        .map((addr) => formatAddress(addr))
+        .filter(isNonEmptyString);
+    return parts.length > 0 ? parts.join(', ') : undefined;
+}
+function formatAddress(address) {
+    if (!address) {
+        return undefined;
+    }
+    if (Array.isArray(address)) {
+        return formatAddresses(address);
+    }
+    if (address.group && Array.isArray(address.group)) {
+        const groupName = (address.name || '').trim();
+        const groupMembers = address.group
+            .map((m) => formatAddress(m))
+            .filter(isNonEmptyString)
+            .join(', ');
+        if (groupName && groupMembers) {
+            return `${groupName}: ${groupMembers}`;
+        }
+        return groupName || groupMembers || undefined;
+    }
+    const name = (address.name || '').trim();
+    const email = (address.address || '').trim();
+    if (name && email) {
+        const displayName = quoteDisplayNameIfNeeded(name);
+        return `${displayName} <${email}>`;
+    }
+    return name || email || undefined;
+}
+function quoteDisplayNameIfNeeded(name) {
+    if (!name) {
+        return '';
+    }
+    // If the display name contains a comma, it must be quoted for safe parsing
+    // of comma-separated address lists.
+    if (!name.includes(',') && !name.includes('"')) {
+        return name;
+    }
+    const escaped = name.replaceAll('\\', '\\\\').replaceAll('"', '\\' + '"');
+    return `"${escaped}"`;
+}

package/dist/collection/components/email-viewer/email-viewer.css

@@ -0,0 +1,293 @@
+@charset "UTF-8";
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+:host(limel-email-viewer) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+.email {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 0.5rem;
+  box-shadow: var(--shadow-depth-8);
+}
+
+.email-headers {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+.email-headers dl,
+.email-headers dt,
+.email-headers dd {
+  margin: 0;
+}
+.email-headers dl {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+}
+.email-headers dl:nth-child(even) {
+  background-color: rgb(var(--contrast-800), 0.1);
+}
+.email-headers dl dt {
+  opacity: 0.6;
+  min-width: 3rem;
+}
+.email-headers dl dt::after {
+  content: ":";
+}
+.email-headers dl dd:not(:last-child)::after {
+  content: ",";
+  opacity: 0.6;
+}
+.email-headers dl.subject dd {
+  font-weight: bold;
+}
+.email-headers dl.date {
+  position: absolute;
+  right: 0.25rem;
+  transform: translateY(-50%);
+  font-size: 0.625rem;
+  border-radius: 9rem;
+  padding: 0.25rem 0.5rem;
+  background-color: rgb(var(--contrast-100), 0.3);
+}
+.email-headers dl.date dt {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.attachments {
+  flex-shrink: 0;
+  padding: 0.5rem;
+  border-bottom: 1px dashed rgba(var(--contrast-700));
+}
+.attachments span {
+  padding-left: 0.25rem;
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+.attachments span:first-child::after {
+  content: ":";
+}
+.attachments ul {
+  all: unset;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+}
+.attachments li {
+  all: unset;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  line-height: normal;
+  padding: 0.5rem 0.5rem 1rem 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(var(--contrast-600));
+  background-color: rgba(var(--contrast-400));
+}
+.attachments .attachment-filename {
+  font-weight: 500;
+}
+.attachments .attachment-mime-type {
+  opacity: 0.7;
+}
+.attachments limel-badge {
+  --badge-max-width: auto;
+  --badge-background-color: rgb(var(--contrast-1000), 0.7);
+  --badge-text-color: rgb(var(--color-white));
+  position: absolute;
+  bottom: 0.125rem;
+  right: 0.125rem;
+  box-shadow: var(--shadow-brighten-edges-outside);
+}
+
+section {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px dashed rgba(var(--contrast-700));
+  min-height: 2rem;
+  overflow-y: auto;
+}
+
+limel-collapsible-section {
+  --closed-header-background-color: var(
+      --lime-elevated-surface-background-color
+  );
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin: 0.5rem;
+  border-radius: 0.75rem;
+  box-shadow: var(--shadow-depth-8);
+}
+limel-collapsible-section button {
+  all: unset;
+  flex-shrink: 0;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  font-size: var(--limel-theme-small-font-size);
+  margin: 0 0.5rem;
+}
+limel-collapsible-section button.load-images {
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--lime-primary-color, var(--limel-theme-primary-color));
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+limel-collapsible-section button.load-images:hover, limel-collapsible-section button.load-images:focus, limel-collapsible-section button.load-images:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+limel-collapsible-section button.load-images:hover, limel-collapsible-section button.load-images:focus-visible {
+  transform: translate3d(0, -0.04rem, 0);
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+limel-collapsible-section button.load-images:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+limel-collapsible-section button.load-images:hover, limel-collapsible-section button.load-images:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+limel-collapsible-section limel-markdown {
+  padding: 0.5rem;
+}
+
+.body {
+  flex-grow: 1;
+  max-width: 100%;
+  padding: 0.75rem;
+}
+.body.plain-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  margin: 0;
+  font-family: inherit;
+}
+.body img {
+  max-width: 100% !important;
+}