@limetech/lime-elements 38.28.2 → 38.29.1

package/dist/lime-elements/{p-0592207d.entry.js → p-9fc23e05.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t}from"./p-288f0842.js";import{m as o}from"./p-f2206d1b.js";import{g as r}from"./p-2c35fb9d.js";import"./p-4e9b4087.js";class a{constructor(e){this.handleIntersection=e=>{for(const t of e){if(t.isIntersecting){const e=t.target;const o=e.dataset.src;if(o){e.setAttribute("src",o);delete e.dataset.src}this.observer.unobserve(e)}}};this.observer=new IntersectionObserver(this.handleIntersection);const t=e.querySelectorAll("img");for(const e of t){this.observer.observe(e)}}disconnect(){this.observer.disconnect()}}const l='@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:var(--limel-theme-default-small-font-size);letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:var(--limel-theme-default-font-size)}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:var(--limel-theme-default-font-size);word-break:break-word}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:var(--limel-theme-default-font-size)}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}blockquote{position:relative;max-width:100%;margin:0.75rem 0;padding:0.5rem;border-left:0.25rem solid rgb(var(--contrast-500));background-color:rgb(var(--contrast-200))}blockquote:before,blockquote:after{position:absolute;line-height:0;font-size:2rem;opacity:0.4}blockquote:before{content:"“";left:-0.5rem;top:0.5rem}blockquote:after{content:"”";right:-0.25rem;bottom:-0.25rem}blockquote blockquote{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0.25rem;border-color:rgb(var(--contrast-700));border-left-width:1px}blockquote blockquote:before,blockquote blockquote:after{display:none}blockquote:has(>blockquote){padding-left:0.25rem;padding-bottom:0}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:var(--limel-theme-default-font-size);margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:var(--limel-theme-default-font-size);margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}*,*::before,*::after{box-sizing:border-box}* :where(:not(img,video,svg,canvas,iframe)),*::before :where(:not(img,video,svg,canvas,iframe)),*::after :where(:not(img,video,svg,canvas,iframe)){min-width:0;min-height:0}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}';const n=class{constructor(t){e(this,t);this.imageIntersectionObserver=null;this.value="";this.whitelist=r.markdownWhitelist;this.lazyLoadImages=false}async textChanged(){var e;try{this.cleanupImageIntersectionObserver();const t=await o(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[],lazyLoadImages:this.lazyLoadImages});this.rootElement.innerHTML=t;this.setupImageIntersectionObserver()}catch(e){console.error(e)}}async componentDidLoad(){this.textChanged()}disconnectedCallback(){this.cleanupImageIntersectionObserver()}render(){return[t("div",{id:"markdown",ref:e=>this.rootElement=e})]}setupImageIntersectionObserver(){if(this.lazyLoadImages){this.imageIntersectionObserver=new a(this.rootElement)}}cleanupImageIntersectionObserver(){if(this.imageIntersectionObserver){this.imageIntersectionObserver.disconnect();this.imageIntersectionObserver=null}}static get watchers(){return{value:["textChanged"]}}};n.style=l;export{n as limel_markdown};
-//# sourceMappingURL=p-0592207d.entry.js.map
+import{r as e,h as t}from"./p-288f0842.js";import{m as o}from"./p-f2206d1b.js";import{g as r}from"./p-2c35fb9d.js";import"./p-4e9b4087.js";class a{constructor(e){this.handleIntersection=e=>{for(const t of e){if(t.isIntersecting){const e=t.target;const o=e.dataset.src;if(o){e.setAttribute("src",o);delete e.dataset.src}this.observer.unobserve(e)}}};this.observer=new IntersectionObserver(this.handleIntersection);const t=e.querySelectorAll("img");for(const e of t){this.observer.observe(e)}}disconnect(){this.observer.disconnect()}}const l='@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:var(--limel-theme-default-small-font-size);letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:var(--limel-theme-default-font-size)}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:var(--limel-theme-default-font-size);word-break:break-word}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:var(--limel-theme-default-font-size)}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}blockquote{position:relative;max-width:100%;margin:0.75rem 0;padding:0.5rem;border-left:0.25rem solid rgb(var(--contrast-500));background-color:rgb(var(--contrast-200))}blockquote:before,blockquote:after{position:absolute;line-height:0;font-size:2rem;opacity:0.4}blockquote:before{content:"“";left:-0.5rem;top:0.5rem}blockquote:after{content:"”";right:-0.25rem;bottom:-0.25rem}blockquote blockquote{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0.25rem;border-color:rgb(var(--contrast-700));border-left-width:1px}blockquote blockquote:before,blockquote blockquote:after{display:none}blockquote:has(>blockquote){padding-left:0.25rem;padding-bottom:0}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:var(--limel-theme-default-font-size);margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:var(--limel-theme-default-font-size);margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}*,*::before,*::after{box-sizing:border-box}* :where(:not(img,video,svg,canvas,iframe)),*::before :where(:not(img,video,svg,canvas,iframe)),*::after :where(:not(img,video,svg,canvas,iframe)){min-width:0;min-height:0}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}:host(limel-markdown.reset-img-height) #markdown img{height:auto}';const n=class{constructor(t){e(this,t);this.imageIntersectionObserver=null;this.value="";this.whitelist=r.markdownWhitelist;this.lazyLoadImages=false}async textChanged(){var e;try{this.cleanupImageIntersectionObserver();const t=await o(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[],lazyLoadImages:this.lazyLoadImages});this.rootElement.innerHTML=t;this.setupImageIntersectionObserver()}catch(e){console.error(e)}}async componentDidLoad(){this.textChanged()}disconnectedCallback(){this.cleanupImageIntersectionObserver()}render(){return[t("div",{id:"markdown",ref:e=>this.rootElement=e})]}setupImageIntersectionObserver(){if(this.lazyLoadImages){this.imageIntersectionObserver=new a(this.rootElement)}}cleanupImageIntersectionObserver(){if(this.imageIntersectionObserver){this.imageIntersectionObserver.disconnect();this.imageIntersectionObserver=null}}static get watchers(){return{value:["textChanged"]}}};n.style=l;export{n as limel_markdown};
+//# sourceMappingURL=p-9fc23e05.entry.js.map

package/dist/lime-elements/p-9fc23e05.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ImageIntersectionObserver","constructor","containerElement","this","handleIntersection","entries","entry","isIntersecting","img","target","dataSrc","dataset","src","setAttribute","observer","unobserve","IntersectionObserver","images","querySelectorAll","observe","disconnect","markdownCss","Markdown","imageIntersectionObserver","globalConfig","markdownWhitelist","async","cleanupImageIntersectionObserver","html","markdownToHTML","value","forceHardLineBreaks","whitelist","_a","lazyLoadImages","rootElement","innerHTML","setupImageIntersectionObserver","error","console","textChanged","disconnectedCallback","render","h","id","ref","el"],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n    private observer: IntersectionObserver;\n\n    /**\n     * @param containerElement - The element containing images to observe.\n     */\n    public constructor(containerElement: HTMLElement) {\n        this.observer = new IntersectionObserver(this.handleIntersection);\n\n        const images = containerElement.querySelectorAll('img');\n        for (const img of images) {\n            this.observer.observe(img);\n        }\n    }\n\n    public disconnect() {\n        this.observer.disconnect();\n    }\n\n    private readonly handleIntersection = (\n        entries: IntersectionObserverEntry[]\n    ) => {\n        for (const entry of entries) {\n            if (entry.isIntersecting) {\n                const img = entry.target as HTMLImageElement;\n                const dataSrc = img.dataset.src;\n\n                if (dataSrc) {\n                    img.setAttribute('src', dataSrc);\n                    delete img.dataset.src;\n                }\n\n                this.observer.unobserve(img);\n            }\n        }\n    };\n}\n","/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n*,\n*::before,\n*::after {\n    box-sizing: border-box;\n\n    & :where(:not(img, video, svg, canvas, iframe)) {\n        min-width: 0;\n        min-height: 0;\n    }\n}\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n\n:host(limel-markdown.reset-img-height) {\n    // This is not a publicly documented helper class, intended for CRM's internal use.\n    // Reset image height to auto to avoid issues with fixed heights in some markdown content\n    // e.g., content copied from MS Word or emails that are sent from a user that has\n    // added fixed heights to images that appear in the activity feed.\n    #markdown {\n        img {\n            height: auto;\n        }\n    }\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string = '';\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    /**\n     * Enable lazy loading for images\n     */\n    @Prop()\n    public lazyLoadImages = false;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            this.cleanupImageIntersectionObserver();\n\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n                lazyLoadImages: this.lazyLoadImages,\n            });\n\n            this.rootElement.innerHTML = html;\n\n            this.setupImageIntersectionObserver();\n        } catch (error) {\n            console.error(error);\n        }\n    }\n\n    private rootElement: HTMLDivElement;\n    private imageIntersectionObserver: ImageIntersectionObserver | null = null;\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    public disconnectedCallback() {\n        this.cleanupImageIntersectionObserver();\n    }\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n\n    private setupImageIntersectionObserver() {\n        if (this.lazyLoadImages) {\n            this.imageIntersectionObserver = new ImageIntersectionObserver(\n                this.rootElement\n            );\n        }\n    }\n\n    private cleanupImageIntersectionObserver() {\n        if (this.imageIntersectionObserver) {\n            this.imageIntersectionObserver.disconnect();\n            this.imageIntersectionObserver = null;\n        }\n    }\n}\n"],"mappings":"iJAAaA,EAMTC,YAAmBC,GAaFC,KAAAC,mBACbC,IAEA,IAAK,MAAMC,KAASD,EAAS,CACzB,GAAIC,EAAMC,eAAgB,CACtB,MAAMC,EAAMF,EAAMG,OAClB,MAAMC,EAAUF,EAAIG,QAAQC,IAE5B,GAAIF,EAAS,CACTF,EAAIK,aAAa,MAAOH,UACjBF,EAAIG,QAAQC,G,CAGvBT,KAAKW,SAASC,UAAUP,E,IAzBhCL,KAAKW,SAAW,IAAIE,qBAAqBb,KAAKC,oBAE9C,MAAMa,EAASf,EAAiBgB,iBAAiB,OACjD,IAAK,MAAMV,KAAOS,EAAQ,CACtBd,KAAKW,SAASK,QAAQX,E,EAIvBY,aACHjB,KAAKW,SAASM,Y,EChBtB,MAAMC,EAAc,o0O,MC8BPC,EAAQ,M,yBA+CTnB,KAAAoB,0BAA8D,K,WAxC/C,G,eAYnBC,EAAaC,kB,oBAMO,K,CAGjBC,oB,MACH,IACIvB,KAAKwB,mCAEL,MAAMC,QAAaC,EAAe1B,KAAK2B,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAA9B,KAAK6B,aAAS,MAAAC,SAAA,EAAAA,EAAI,GAC7BC,eAAgB/B,KAAK+B,iBAGzB/B,KAAKgC,YAAYC,UAAYR,EAE7BzB,KAAKkC,gC,CACP,MAAOC,GACLC,QAAQD,MAAMA,E,EAOfZ,yBACHvB,KAAKqC,a,CAGFC,uBACHtC,KAAKwB,kC,CAGFe,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQ3C,KAAKgC,YAAcW,I,CAKrCT,iCACJ,GAAIlC,KAAK+B,eAAgB,CACrB/B,KAAKoB,0BAA4B,IAAIvB,EACjCG,KAAKgC,Y,EAKTR,mCACJ,GAAIxB,KAAKoB,0BAA2B,CAChCpB,KAAKoB,0BAA0BH,aAC/BjB,KAAKoB,0BAA4B,I"}

package/dist/lime-elements/p-aae161ef.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,H as t}from"./p-288f0842.js";import{g as o}from"./p-d251f404.js";import{c as l}from"./p-ad52787a.js";import{C as r}from"./p-8ded6465.js";import{t as a}from"./p-4c88e5d3.js";const s='@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{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;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{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);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem;}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem;transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:50%;width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input,limel-radio-button{width:var(--limel-boolean-input-box-size) !important;margin-left:-0.25rem !important}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input .boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}';const n=class{constructor(t){e(this,t);this.renderLabel=()=>i("span",{class:"label",id:this.labelId},this.text);this.renderDescription=()=>{if(!this.secondaryText){return}return i("span",{class:"description",id:this.descriptionId},this.secondaryText)};this.renderIcon=()=>{const e=o(this.icon);if(!e){return}let t;let l;let r;if(typeof this.icon==="object"){t=this.icon.color;l=this.icon.backgroundColor;r=this.icon.title}const a={"aria-label":r,"aria-hidden":r?null:"true",name:e,style:{color:t,"background-color":l},badge:this.badgeIcon,size:this.iconSize};return i("limel-icon",Object.assign({},a))};this.renderPrimaryComponent=()=>{const e=this.primaryComponent;if(!(e===null||e===void 0?void 0:e.name)){return}const t=e.name;const o=e.props||{};return i(t,Object.assign({},o))};this.renderImage=()=>{if(!this.image){return}return i("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})};this.renderActionMenu=e=>{if(!e||e.length===0){return}const t=this.getStableActions(e);return i("limel-menu",{class:"mdc-deprecated-list-item__meta",items:t,openDirection:"left-start"},i("limel-icon-button",{class:"action-menu-trigger",slot:"trigger",icon:"menu_2",label:this.actionMenuLabel()}))};this.renderRadioButton=()=>{if(this.type!=="radio"){return}return i("limel-radio-button",{id:`radio_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.renderCheckbox=()=>{if(this.type!=="checkbox"){return}return i(r,{id:`checkbox_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.actionMenuLabel=()=>a.get("file-viewer.more-actions",this.language);this.language="en";this.value=undefined;this.text=undefined;this.secondaryText=undefined;this.disabled=false;this.icon=undefined;this.iconSize="small";this.badgeIcon=false;this.selected=false;this.actions=undefined;this.primaryComponent=undefined;this.image=undefined;this.type="listitem";this.labelId=l();this.descriptionId=l()}render(){var e;const o={"aria-labelledby":this.labelId,"aria-describedby":this.secondaryText?this.descriptionId:undefined,"aria-disabled":this.disabled?"true":"false"};if(this.type==="radio"||this.type==="checkbox"){o["aria-checked"]=this.selected?"true":"false"}else if(this.type==="option"||this.type==="menuitem"){o["aria-selected"]=this.selected?"true":"false"}return i(t,Object.assign({role:this.getHostRole(),class:{"has-primary-component":!!((e=this.primaryComponent)===null||e===void 0?void 0:e.name)}},o),this.renderRadioButton(),this.renderCheckbox(),this.renderIcon(),this.renderImage(),this.renderPrimaryComponent(),i("div",{class:"text"},this.renderLabel(),this.renderDescription()),this.renderActionMenu(this.actions))}getStableActions(e){if(this.memoizedActions===e){return this.memoizedActions}this.memoizedActions=e;return e}getHostRole(){switch(this.type){case"option":{return"option"}case"radio":{return"radio"}case"checkbox":{return"checkbox"}case"menuitem":{return"menuitem"}default:{return"listitem"}}}};n.style=s;export{n as limel_list_item};
+//# sourceMappingURL=p-aae161ef.entry.js.map

package/dist/lime-elements/p-aae161ef.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["listItemCss","ListItemComponent","constructor","hostRef","this","renderLabel","h","class","id","labelId","text","renderDescription","secondaryText","descriptionId","renderIcon","iconName","getIconName","icon","iconColor","iconBackgroundColor","title","color","backgroundColor","iconProps","name","style","badge","badgeIcon","size","iconSize","Object","assign","renderPrimaryComponent","primary","primaryComponent","PrimaryComponent","props","renderImage","image","src","alt","loading","renderActionMenu","actions","length","stableActions","getStableActions","items","openDirection","slot","label","actionMenuLabel","renderRadioButton","type","checked","selected","disabled","renderCheckbox","CheckboxTemplate","translate","get","language","createRandomString","render","ariaProps","undefined","Host","role","getHostRole","_a","memoizedActions"],"sources":["./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input,\nlimel-radio-button {\n    width: var(--limel-boolean-input-box-size) !important;\n    margin-left: -0.25rem !important;\n}\n\n.boolean-input {\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n\n    .boolean-input-label {\n        @include mixins.truncate-text();\n        opacity: 0;\n        width: var(--limel-boolean-input-box-size);\n    }\n}\n// ====================\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <limel-radio-button\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-ae507565.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as o,H as i}from"./p-288f0842.js";const a='@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{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;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{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);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}.radio-button{--limel-boolean-input-box-border-radius:var(\n      --limel-boolean-input-box-size\n  )}.box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}';const l=class{constructor(o){e(this,o);this.checked=undefined;this.disabled=undefined;this.id=undefined;this.label=undefined;this.onChange=undefined}render(){return o(i,{class:{"boolean-input":true,"radio-button":true,checked:this.checked,disabled:this.disabled}},o("input",{type:"radio",id:this.id,checked:this.checked,disabled:this.disabled,onChange:this.onChange}),o("div",{class:"box"}),o("label",{class:"boolean-input-label",htmlFor:this.id},this.label))}};l.style=a;export{l as limel_radio_button};
+//# sourceMappingURL=p-ae507565.entry.js.map

package/dist/lime-elements/p-ae507565.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioButtonCss","RadioButtonComponent","render","h","Host","class","checked","this","disabled","type","id","onChange","htmlFor","label"],"sources":["./src/components/radio-button-group/radio-button.scss?tag=limel-radio-button","./src/components/radio-button-group/radio-button.tsx"],"sourcesContent":["/**\n* :::important\n* The `limel-radio-button` component can be used inside the HTML of\n* other components to render a decorative radio button in\n* their UI. An example of this is the list component.\n* This means the content of `limel-radio-button` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components also need to import the current `.scss`\n* file into their own styles file for the radio button to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>`,\n* it might unintentionally inherit styles from the radio button; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n@forward '../../style/internal/boolean-input.scss';\n\n.radio-button {\n    --limel-boolean-input-box-border-radius: var(\n        --limel-boolean-input-box-size\n    );\n}\n\n.box {\n    &:after {\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n\n        .boolean-input:has(input[type='radio']:checked) & {\n            opacity: 1;\n            transform: scale(0.6);\n            box-shadow: var(--shadow-depth-8);\n        }\n    }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is a low-level private component that renders individual radio button elements.\n * It's used internally by the list-item component to render radio buttons when\n * `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * However, since this is a private component, consumers who need to use a radio button\n * outside of the context of a list or group, can still use the `limel-radio-button`\n * component directly according to in their UI needs.\n *\n * @private\n */\n@Component({\n    tag: 'limel-radio-button',\n    shadow: false,\n    styleUrl: 'radio-button.scss',\n})\nexport class RadioButtonComponent {\n    /**\n     * Indicates whether the radio button is checked.\n     */\n    @Prop({ reflect: true })\n    public checked?: boolean;\n\n    /**\n     * Disables the radio button when set to `true`.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean;\n\n    /**\n     * Associates the internal input with an external label.\n     */\n    @Prop()\n    public id!: string;\n\n    /**\n     * Visual label shown next to the radio button.\n     */\n    @Prop()\n    public label?: string;\n\n    /**\n     * Change handler forwarded to the underlying input element.\n     */\n    @Prop()\n    public onChange?: (event: Event) => void;\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    'boolean-input': true,\n                    'radio-button': true,\n                    checked: this.checked,\n                    disabled: this.disabled,\n                }}\n            >\n                <input\n                    type=\"radio\"\n                    id={this.id}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    onChange={this.onChange}\n                />\n                <div class=\"box\" />\n                <label class=\"boolean-input-label\" htmlFor={this.id}>\n                    {this.label}\n                </label>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,4rH,MCqCVC,EAAoB,M,uIA+BtBC,SACH,OACIC,EAACC,EAAI,CACDC,MAAO,CACH,gBAAiB,KACjB,eAAgB,KAChBC,QAASC,KAAKD,QACdE,SAAUD,KAAKC,WAGnBL,EAAA,SACIM,KAAK,QACLC,GAAIH,KAAKG,GACTJ,QAASC,KAAKD,QACdE,SAAUD,KAAKC,SACfG,SAAUJ,KAAKI,WAEnBR,EAAA,OAAKE,MAAM,QACXF,EAAA,SAAOE,MAAM,sBAAsBO,QAASL,KAAKG,IAC5CH,KAAKM,O"}

package/dist/types/components/radio-button-group/{radio-button.template.d.ts → radio-button.d.ts}

@@ -1,10 +1,7 @@
-import { FunctionalComponent } from '../../stencil-public-runtime';
 /**
- * Radio Button Template
- *
- * This is a low-level template component that renders individual radio button elements
- * using Material Design Components (MDC) styling and structure. It's used internally
- * by the list component to render radio buttons when `type="radio"` is specified.
+ * This is a low-level private component that renders individual radio button elements.
+ * It's used internally by the list-item component to render radio buttons when
+ * `type="radio"` is specified.
  *
  * ## Usage in the Library
  *
@@ -25,15 +22,33 @@ import { FunctionalComponent } from '../../stencil-public-runtime';
  * components, as a single radio button is never useful in a UI. Instead, this template
  * is used to build groups of radio buttons through higher-level components.
  *
- * @internal
+ * However, since this is a private component, consumers who need to use a radio button
+ * outside of the context of a list or group, can still use the `limel-radio-button`
+ * component directly according to in their UI needs.
+ *
+ * @private
  */
-interface RadioButtonTemplateProps {
+export declare class RadioButtonComponent {
+  /**
+   * Indicates whether the radio button is checked.
+   */
+  checked?: boolean;
+  /**
+   * Disables the radio button when set to `true`.
+   */
   disabled?: boolean;
+  /**
+   * Associates the internal input with an external label.
+   */
   id: string;
-  checked?: boolean;
-  onChange?: (event: Event) => void;
+  /**
+   * Visual label shown next to the radio button.
+   */
   label?: string;
+  /**
+   * Change handler forwarded to the underlying input element.
+   */
+  onChange?: (event: Event) => void;
+  render(): any;
 }
-export declare const RadioButtonTemplate: FunctionalComponent<RadioButtonTemplateProps>;
-export {};
-//# sourceMappingURL=radio-button.template.d.ts.map
+//# sourceMappingURL=radio-button.d.ts.map

package/dist/types/components/table/table.d.ts

@@ -64,6 +64,11 @@ export declare class Table {
    * Set to `true` to enable reordering of the columns by dragging them
    */
   movableColumns: boolean;
+  /**
+   * Set to `false` to disable column sorting through header interactions.
+   * Programmatic sorting through the `sorting` prop and `sort` event remains available.
+   */
+  sortableColumns: boolean;
   /**
    * Set to `true` to trigger loading animation
    */
@@ -143,6 +148,7 @@ export declare class Table {
   protected updateAggregates(newAggregates: ColumnAggregate[], oldAggregates: ColumnAggregate[]): void;
   protected updateSelection(newSelection: any[]): void;
   protected updateSelectable(): void;
+  protected updateSortableColumns(): void;
   protected updateSorting(newValue: ColumnSorter[], oldValue: ColumnSorter[]): void;
   private shouldReplaceData;
   private areEqualIds;

package/dist/types/components.d.ts

@@ -2617,6 +2617,50 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * This is a low-level private component that renders individual radio button elements.
+     * It's used internally by the list-item component to render radio buttons when
+     * `type="radio"` is specified.
+     * ## Usage in the Library
+     * This template is primarily used by:
+     * - `limel-list` component when `type="radio"`
+     * - `limel-radio-button-group` component (which wraps `limel-list`)
+     * ## Why This Exists
+     * While we have `limel-radio-button-group` for most use cases, this template provides
+     * the actual radio button HTML structure with proper MDC classes and accessibility
+     * attributes. It ensures consistent styling and behavior across all radio button
+     * implementations in the library.
+     * ## Design Philosophy
+     * This follows the principle that individual radio buttons should not be standalone
+     * components, as a single radio button is never useful in a UI. Instead, this template
+     * is used to build groups of radio buttons through higher-level components.
+     * However, since this is a private component, consumers who need to use a radio button
+     * outside of the context of a list or group, can still use the `limel-radio-button`
+     * component directly according to in their UI needs.
+     * @private 
+     */
+    interface LimelRadioButton {
+        /**
+          * Indicates whether the radio button is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Disables the radio button when set to `true`.
+         */
+        "disabled"?: boolean;
+        /**
+          * Associates the internal input with an external label.
+         */
+        "id": string;
+        /**
+          * Visual label shown next to the radio button.
+         */
+        "label"?: string;
+        /**
+          * Change handler forwarded to the underlying input element.
+         */
+        "onChange"?: (event: Event) => void;
+    }
     /**
      * The Radio Button component provides a convenient way to create a group of radio buttons
      * from an array of options. Radio buttons allow users to select a single option from
@@ -3076,6 +3120,10 @@ export namespace Components {
           * Selected data. Requires `selectable` to be true.
          */
         "selection": object[];
+        /**
+          * Set to `false` to disable column sorting through header interactions. Programmatic sorting through the `sorting` prop and `sort` event remains available.
+         */
+        "sortableColumns": boolean;
         /**
           * The initial sorted columns
          */
@@ -4719,6 +4767,34 @@ declare global {
         prototype: HTMLLimelProsemirrorAdapterElement;
         new (): HTMLLimelProsemirrorAdapterElement;
     };
+    /**
+     * This is a low-level private component that renders individual radio button elements.
+     * It's used internally by the list-item component to render radio buttons when
+     * `type="radio"` is specified.
+     * ## Usage in the Library
+     * This template is primarily used by:
+     * - `limel-list` component when `type="radio"`
+     * - `limel-radio-button-group` component (which wraps `limel-list`)
+     * ## Why This Exists
+     * While we have `limel-radio-button-group` for most use cases, this template provides
+     * the actual radio button HTML structure with proper MDC classes and accessibility
+     * attributes. It ensures consistent styling and behavior across all radio button
+     * implementations in the library.
+     * ## Design Philosophy
+     * This follows the principle that individual radio buttons should not be standalone
+     * components, as a single radio button is never useful in a UI. Instead, this template
+     * is used to build groups of radio buttons through higher-level components.
+     * However, since this is a private component, consumers who need to use a radio button
+     * outside of the context of a list or group, can still use the `limel-radio-button`
+     * component directly according to in their UI needs.
+     * @private 
+     */
+    interface HTMLLimelRadioButtonElement extends Components.LimelRadioButton, HTMLStencilElement {
+    }
+    var HTMLLimelRadioButtonElement: {
+        prototype: HTMLLimelRadioButtonElement;
+        new (): HTMLLimelRadioButtonElement;
+    };
     /**
      * The Radio Button component provides a convenient way to create a group of radio buttons
      * from an array of options. Radio buttons allow users to select a single option from
@@ -5093,6 +5169,7 @@ declare global {
         "limel-progress-flow": HTMLLimelProgressFlowElement;
         "limel-progress-flow-item": HTMLLimelProgressFlowItemElement;
         "limel-prosemirror-adapter": HTMLLimelProsemirrorAdapterElement;
+        "limel-radio-button": HTMLLimelRadioButtonElement;
         "limel-radio-button-group": HTMLLimelRadioButtonGroupElement;
         "limel-select": HTMLLimelSelectElement;
         "limel-shortcut": HTMLLimelShortcutElement;
@@ -7864,6 +7941,50 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * This is a low-level private component that renders individual radio button elements.
+     * It's used internally by the list-item component to render radio buttons when
+     * `type="radio"` is specified.
+     * ## Usage in the Library
+     * This template is primarily used by:
+     * - `limel-list` component when `type="radio"`
+     * - `limel-radio-button-group` component (which wraps `limel-list`)
+     * ## Why This Exists
+     * While we have `limel-radio-button-group` for most use cases, this template provides
+     * the actual radio button HTML structure with proper MDC classes and accessibility
+     * attributes. It ensures consistent styling and behavior across all radio button
+     * implementations in the library.
+     * ## Design Philosophy
+     * This follows the principle that individual radio buttons should not be standalone
+     * components, as a single radio button is never useful in a UI. Instead, this template
+     * is used to build groups of radio buttons through higher-level components.
+     * However, since this is a private component, consumers who need to use a radio button
+     * outside of the context of a list or group, can still use the `limel-radio-button`
+     * component directly according to in their UI needs.
+     * @private 
+     */
+    interface LimelRadioButton {
+        /**
+          * Indicates whether the radio button is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Disables the radio button when set to `true`.
+         */
+        "disabled"?: boolean;
+        /**
+          * Associates the internal input with an external label.
+         */
+        "id": string;
+        /**
+          * Visual label shown next to the radio button.
+         */
+        "label"?: string;
+        /**
+          * Change handler forwarded to the underlying input element.
+         */
+        "onChange"?: (event: Event) => void;
+    }
     /**
      * The Radio Button component provides a convenient way to create a group of radio buttons
      * from an array of options. Radio buttons allow users to select a single option from
@@ -8382,6 +8503,10 @@ declare namespace LocalJSX {
           * Selected data. Requires `selectable` to be true.
          */
         "selection"?: object[];
+        /**
+          * Set to `false` to disable column sorting through header interactions. Programmatic sorting through the `sorting` prop and `sort` event remains available.
+         */
+        "sortableColumns"?: boolean;
         /**
           * The initial sorted columns
          */
@@ -8688,6 +8813,7 @@ declare namespace LocalJSX {
         "limel-progress-flow": LimelProgressFlow;
         "limel-progress-flow-item": LimelProgressFlowItem;
         "limel-prosemirror-adapter": LimelProsemirrorAdapter;
+        "limel-radio-button": LimelRadioButton;
         "limel-radio-button-group": LimelRadioButtonGroup;
         "limel-select": LimelSelect;
         "limel-shortcut": LimelShortcut;
@@ -9674,6 +9800,29 @@ declare module "@stencil/core" {
              * @private 
              */
             "limel-prosemirror-adapter": LocalJSX.LimelProsemirrorAdapter & JSXBase.HTMLAttributes<HTMLLimelProsemirrorAdapterElement>;
+            /**
+             * This is a low-level private component that renders individual radio button elements.
+             * It's used internally by the list-item component to render radio buttons when
+             * `type="radio"` is specified.
+             * ## Usage in the Library
+             * This template is primarily used by:
+             * - `limel-list` component when `type="radio"`
+             * - `limel-radio-button-group` component (which wraps `limel-list`)
+             * ## Why This Exists
+             * While we have `limel-radio-button-group` for most use cases, this template provides
+             * the actual radio button HTML structure with proper MDC classes and accessibility
+             * attributes. It ensures consistent styling and behavior across all radio button
+             * implementations in the library.
+             * ## Design Philosophy
+             * This follows the principle that individual radio buttons should not be standalone
+             * components, as a single radio button is never useful in a UI. Instead, this template
+             * is used to build groups of radio buttons through higher-level components.
+             * However, since this is a private component, consumers who need to use a radio button
+             * outside of the context of a list or group, can still use the `limel-radio-button`
+             * component directly according to in their UI needs.
+             * @private 
+             */
+            "limel-radio-button": LocalJSX.LimelRadioButton & JSXBase.HTMLAttributes<HTMLLimelRadioButtonElement>;
             /**
              * The Radio Button component provides a convenient way to create a group of radio buttons
              * from an array of options. Radio buttons allow users to select a single option from

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.28.2",
+  "version": "38.29.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -23,6 +23,7 @@
     "watch": "cross-env-shell SASS_PATH=node_modules \"stencil build --dev --watch --docs --serve\"",
     "watch:prod": "shx rm -rf www/ && cross-env-shell SASS_PATH=node_modules \"stencil build --watch\"",
     "docs:build": "cross-env-shell NODE_ENV=prod SASS_PATH=node_modules \"stencil build --docs --config stencil.config.docs.ts\"",
+    "docs:context7": "node generate-context7-docs.cjs",
     "docs:publish": "node publish-docs.cjs",
     "lint": "eslint --max-warnings=0 && prettier -c --ignore-path .gitignore **/*.scss",
     "lint:fix": "eslint --max-warnings=0 --fix && prettier --write --ignore-path .gitignore **/*.scss",

package/dist/collection/components/radio-button-group/radio-button.template.js

@@ -1,10 +0,0 @@
-import { h } from '@stencil/core';
-export const RadioButtonTemplate = (props) => {
-  return (h("div", { class: {
-      'boolean-input': true,
-      'radio-button': true,
-      checked: props.checked,
-      disabled: props.disabled,
-    } }, h("input", { type: "radio", id: props.id, checked: props.checked, disabled: props.disabled, onChange: props.onChange }), h("div", { class: "box" }), h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)));
-};
-//# sourceMappingURL=radio-button.template.js.map

package/dist/collection/components/radio-button-group/radio-button.template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-button.template.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAsCvD,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,KAAK,EAAE,EAAE;EACV,OAAO,CACH,WACI,KAAK,EAAE;MACH,eAAe,EAAE,IAAI;MACrB,cAAc,EAAE,IAAI;MACpB,OAAO,EAAE,KAAK,CAAC,OAAO;MACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;KAC3B;IAED,aACI,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;IACF,WAAK,KAAK,EAAC,KAAK,GAAG;IACnB,aAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAC/C,KAAK,CAAC,KAAK,CACR,CACN,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n"]}

package/dist/lime-elements/p-048c0d8e.entry.js

@@ -1,2 +0,0 @@
-import{h as e,r as i,H as t}from"./p-288f0842.js";import{g as o}from"./p-d251f404.js";import{c as l}from"./p-ad52787a.js";import{C as r}from"./p-8ded6465.js";import{t as a}from"./p-4c88e5d3.js";const s=i=>e("div",{class:{"boolean-input":true,"radio-button":true,checked:i.checked,disabled:i.disabled}},e("input",{type:"radio",id:i.id,checked:i.checked,disabled:i.disabled,onChange:i.onChange}),e("div",{class:"box"}),e("label",{class:"boolean-input-label",htmlFor:i.id},i.label));const n='@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{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;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{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);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem;}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}.radio-button{--limel-boolean-input-box-border-radius:var(\n      --limel-boolean-input-box-size\n  )}.box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem;transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:50%;width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input{width:var(--limel-boolean-input-box-size);margin-left:-0.25rem}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}';const d=class{constructor(t){i(this,t);this.renderLabel=()=>e("span",{class:"label",id:this.labelId},this.text);this.renderDescription=()=>{if(!this.secondaryText){return}return e("span",{class:"description",id:this.descriptionId},this.secondaryText)};this.renderIcon=()=>{const i=o(this.icon);if(!i){return}let t;let l;let r;if(typeof this.icon==="object"){t=this.icon.color;l=this.icon.backgroundColor;r=this.icon.title}const a={"aria-label":r,"aria-hidden":r?null:"true",name:i,style:{color:t,"background-color":l},badge:this.badgeIcon,size:this.iconSize};return e("limel-icon",Object.assign({},a))};this.renderPrimaryComponent=()=>{const i=this.primaryComponent;if(!(i===null||i===void 0?void 0:i.name)){return}const t=i.name;const o=i.props||{};return e(t,Object.assign({},o))};this.renderImage=()=>{if(!this.image){return}return e("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})};this.renderActionMenu=i=>{if(!i||i.length===0){return}const t=this.getStableActions(i);return e("limel-menu",{class:"mdc-deprecated-list-item__meta",items:t,openDirection:"left-start"},e("limel-icon-button",{class:"action-menu-trigger",slot:"trigger",icon:"menu_2",label:this.actionMenuLabel()}))};this.renderRadioButton=()=>{if(this.type!=="radio"){return}return e(s,{id:`radio_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.renderCheckbox=()=>{if(this.type!=="checkbox"){return}return e(r,{id:`checkbox_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.actionMenuLabel=()=>a.get("file-viewer.more-actions",this.language);this.language="en";this.value=undefined;this.text=undefined;this.secondaryText=undefined;this.disabled=false;this.icon=undefined;this.iconSize="small";this.badgeIcon=false;this.selected=false;this.actions=undefined;this.primaryComponent=undefined;this.image=undefined;this.type="listitem";this.labelId=l();this.descriptionId=l()}render(){var i;const o={"aria-labelledby":this.labelId,"aria-describedby":this.secondaryText?this.descriptionId:undefined,"aria-disabled":this.disabled?"true":"false"};if(this.type==="radio"||this.type==="checkbox"){o["aria-checked"]=this.selected?"true":"false"}else if(this.type==="option"||this.type==="menuitem"){o["aria-selected"]=this.selected?"true":"false"}return e(t,Object.assign({role:this.getHostRole(),class:{"has-primary-component":!!((i=this.primaryComponent)===null||i===void 0?void 0:i.name)}},o),this.renderRadioButton(),this.renderCheckbox(),this.renderIcon(),this.renderImage(),this.renderPrimaryComponent(),e("div",{class:"text"},this.renderLabel(),this.renderDescription()),this.renderActionMenu(this.actions))}getStableActions(e){if(this.memoizedActions===e){return this.memoizedActions}this.memoizedActions=e;return e}getHostRole(){switch(this.type){case"option":{return"option"}case"radio":{return"radio"}case"checkbox":{return"checkbox"}case"menuitem":{return"menuitem"}default:{return"listitem"}}}};d.style=n;export{d as limel_list_item};
-//# sourceMappingURL=p-048c0d8e.entry.js.map

package/dist/lime-elements/p-048c0d8e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["RadioButtonTemplate","props","h","class","checked","disabled","type","id","onChange","htmlFor","label","listItemCss","ListItemComponent","constructor","hostRef","this","renderLabel","labelId","text","renderDescription","secondaryText","descriptionId","renderIcon","iconName","getIconName","icon","iconColor","iconBackgroundColor","title","color","backgroundColor","iconProps","name","style","badge","badgeIcon","size","iconSize","Object","assign","renderPrimaryComponent","primary","primaryComponent","PrimaryComponent","renderImage","image","src","alt","loading","renderActionMenu","actions","length","stableActions","getStableActions","items","openDirection","slot","actionMenuLabel","renderRadioButton","selected","renderCheckbox","CheckboxTemplate","translate","get","language","createRandomString","render","ariaProps","undefined","Host","role","getHostRole","_a","memoizedActions"],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n    width: var(--limel-boolean-input-box-size);\n    margin-left: -0.25rem;\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n}\n\n.boolean-input-label {\n    @include mixins.truncate-text();\n    opacity: 0;\n    width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-0592207d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ImageIntersectionObserver","constructor","containerElement","this","handleIntersection","entries","entry","isIntersecting","img","target","dataSrc","dataset","src","setAttribute","observer","unobserve","IntersectionObserver","images","querySelectorAll","observe","disconnect","markdownCss","Markdown","imageIntersectionObserver","globalConfig","markdownWhitelist","async","cleanupImageIntersectionObserver","html","markdownToHTML","value","forceHardLineBreaks","whitelist","_a","lazyLoadImages","rootElement","innerHTML","setupImageIntersectionObserver","error","console","textChanged","disconnectedCallback","render","h","id","ref","el"],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n    private observer: IntersectionObserver;\n\n    /**\n     * @param containerElement - The element containing images to observe.\n     */\n    public constructor(containerElement: HTMLElement) {\n        this.observer = new IntersectionObserver(this.handleIntersection);\n\n        const images = containerElement.querySelectorAll('img');\n        for (const img of images) {\n            this.observer.observe(img);\n        }\n    }\n\n    public disconnect() {\n        this.observer.disconnect();\n    }\n\n    private readonly handleIntersection = (\n        entries: IntersectionObserverEntry[]\n    ) => {\n        for (const entry of entries) {\n            if (entry.isIntersecting) {\n                const img = entry.target as HTMLImageElement;\n                const dataSrc = img.dataset.src;\n\n                if (dataSrc) {\n                    img.setAttribute('src', dataSrc);\n                    delete img.dataset.src;\n                }\n\n                this.observer.unobserve(img);\n            }\n        }\n    };\n}\n","/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n*,\n*::before,\n*::after {\n    box-sizing: border-box;\n\n    & :where(:not(img, video, svg, canvas, iframe)) {\n        min-width: 0;\n        min-height: 0;\n    }\n}\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string = '';\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    /**\n     * Enable lazy loading for images\n     */\n    @Prop()\n    public lazyLoadImages = false;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            this.cleanupImageIntersectionObserver();\n\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n                lazyLoadImages: this.lazyLoadImages,\n            });\n\n            this.rootElement.innerHTML = html;\n\n            this.setupImageIntersectionObserver();\n        } catch (error) {\n            console.error(error);\n        }\n    }\n\n    private rootElement: HTMLDivElement;\n    private imageIntersectionObserver: ImageIntersectionObserver | null = null;\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    public disconnectedCallback() {\n        this.cleanupImageIntersectionObserver();\n    }\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n\n    private setupImageIntersectionObserver() {\n        if (this.lazyLoadImages) {\n            this.imageIntersectionObserver = new ImageIntersectionObserver(\n                this.rootElement\n            );\n        }\n    }\n\n    private cleanupImageIntersectionObserver() {\n        if (this.imageIntersectionObserver) {\n            this.imageIntersectionObserver.disconnect();\n            this.imageIntersectionObserver = null;\n        }\n    }\n}\n"],"mappings":"iJAAaA,EAMTC,YAAmBC,GAaFC,KAAAC,mBACbC,IAEA,IAAK,MAAMC,KAASD,EAAS,CACzB,GAAIC,EAAMC,eAAgB,CACtB,MAAMC,EAAMF,EAAMG,OAClB,MAAMC,EAAUF,EAAIG,QAAQC,IAE5B,GAAIF,EAAS,CACTF,EAAIK,aAAa,MAAOH,UACjBF,EAAIG,QAAQC,G,CAGvBT,KAAKW,SAASC,UAAUP,E,IAzBhCL,KAAKW,SAAW,IAAIE,qBAAqBb,KAAKC,oBAE9C,MAAMa,EAASf,EAAiBgB,iBAAiB,OACjD,IAAK,MAAMV,KAAOS,EAAQ,CACtBd,KAAKW,SAASK,QAAQX,E,EAIvBY,aACHjB,KAAKW,SAASM,Y,EChBtB,MAAMC,EAAc,mwO,MC8BPC,EAAQ,M,yBA+CTnB,KAAAoB,0BAA8D,K,WAxC/C,G,eAYnBC,EAAaC,kB,oBAMO,K,CAGjBC,oB,MACH,IACIvB,KAAKwB,mCAEL,MAAMC,QAAaC,EAAe1B,KAAK2B,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAA9B,KAAK6B,aAAS,MAAAC,SAAA,EAAAA,EAAI,GAC7BC,eAAgB/B,KAAK+B,iBAGzB/B,KAAKgC,YAAYC,UAAYR,EAE7BzB,KAAKkC,gC,CACP,MAAOC,GACLC,QAAQD,MAAMA,E,EAOfZ,yBACHvB,KAAKqC,a,CAGFC,uBACHtC,KAAKwB,kC,CAGFe,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQ3C,KAAKgC,YAAcW,I,CAKrCT,iCACJ,GAAIlC,KAAK+B,eAAgB,CACrB/B,KAAKoB,0BAA4B,IAAIvB,EACjCG,KAAKgC,Y,EAKTR,mCACJ,GAAIxB,KAAKoB,0BAA2B,CAChCpB,KAAKoB,0BAA0BH,aAC/BjB,KAAKoB,0BAA4B,I"}