blue-web 1.10.1 → 1.11.1

package/README.md

@@ -1,43 +1,62 @@
-<p align="center">
-<img src="https://raw.githubusercontent.com/bruegmann/blue-web/master/public/blue-readme-cover.png" alt="UI library based on Bootstrap">
-</p>
-
 # Blue Web
 
-[![npm version](https://img.shields.io/npm/v/blue-web)](https://www.npmjs.com/package/blue-web)
-
-[Checkout the docs](https://bruegmann.github.io/blue-web) to find out how to
-use Blue Web.
+Blue Web is the base library for [Blue React](https://bruegmann.github.io/blue-react) and [Blue Blazor](https://bruegmann.github.io/blue-react). This library builds heavily on top of [Bootstrap](https://getbootstrap.com/docs/) and also provides additional solutions in CSS and JavaScript.
 
-## Developing
+## Use Blue Web
 
-This project is built with [CRA](https://create-react-app.dev/). To start
-developing, just and install everything with `npm i` and run:
+Install with NPM:
 
 ```
-npm start
+npm i blue-web
 ```
 
-## Create a new release
+[![npm version](https://img.shields.io/npm/v/blue-web)](https://www.npmjs.com/package/blue-web)
 
-This is how to manually create a release:\
-By running
+## Implementation
 
+If you have a React or Blazor project, you should use the components of [Blue React](https://bruegmann.github.io/blue-react) or [Blue Blazor](https://bruegmann.github.io/blue-blazor). Otherwise you can also write the markup of those components directly in HTML. Check out the examples in the docs to find out how.
+
+For the JavaScript solutions you have to import the associated file. When installed using NPM, you can do it like this:
+
+```js
+import "blue-web/dist/js/dialog.js"
+import "blue-web/dist/js/progress.js"
+// ...
 ```
-npm publish
+
+You can also use a CDN like unpkg.com. Only recommended for testing, not for production.
+
+```html
+<script src="https://unpkg.com/blue-web@latest/dist/js/dialog.js"></script>
+<script src="https://unpkg.com/blue-web@latest/dist/js/progress.js"></script>
+<!-- ... -->
 ```
 
-the missing files in `./dist` will be created, the docs will be generated and
-the NPM package will be released.
+## Customization and theming
 
-To publish changes on the documentary, run:
+Since Blue Web is based on Bootstrap, you can customize many things by overriding Sass or CSS variables. For more information, see the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/overview/). Blue Web also provides some additional variables that you can use and override. Take a look at [dist/styles/\_variables.scss](https://github.com/bruegmann/blue-web/blob/main/dist/styles/_variables.scss) to see all of them.
 
-```
-npm run deploy
-```
+Here is an example of how to override variables using Sass:
+
+```scss
+// Override Bootstrap Sass variable
+$primary: tomato;
 
-To run both of them:
+// Override Blue Web Sass variable
+$theme: orange;
 
+// Stylesheet for Blue Web. Already contains Bootstrap.
+@import "~blue-web/dist/style";
 ```
-npm run release
+
+An example of how to override CSS variables:
+
+```css
+:root {
+    /* Override Bootstrap CSS variable */
+    --bs-body-font-family: "Inter", sans-serif;
+
+    /* Override Blue Web CSS variable */
+    --blue-sidebar-bg: #333;
+}
 ```

package/dist/js/dialog.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var n={786:(n,e,t)=>{t.d(e,{k:()=>a});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"]};function a(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return e=e||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[n]?e.indexOf("de-")>-1?t[n][1]:t[n][0]:n}},762:(n,e,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(e,{Os:()=>a});const a=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()}},e={};function t(o){var a=e[o];if(void 0!==a)return a.exports;var l=e[o]={exports:{}};return n[o](l,l.exports,t),l.exports}t.d=(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e);var o=t(762),a=t(786);async function l(n,e){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:l=(0,a.k)("Message"),icon:c,switchPrimaryBtn:i=!1,acceptBtnText:r=("verify"===n?(0,a.k)("Yes"):"OK"),cancelBtnText:s=("verify"===n?(0,a.k)("No"):(0,a.k)("Cancel")),inputType:d="text"}=t;const u=(0,o.Os)();return document.getElementById(u)||document.body.insertAdjacentHTML("beforeend",'<dialog class="blue-modal modal" id="'.concat(u,'" aria-labelledby="').concat(u,'-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ').concat(c?'<div class="me-2">'.concat(c,"</div>"):"",'\n                                <h1 class="modal-title fs-5" id="').concat(u,'-label">').concat(l,'</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="').concat(s,'"\n                                    onclick="document.getElementById(\'').concat(u,'\').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ').concat("ask"===n?'<label for="'.concat(u,'-input">').concat(e,'</label>\n                                          <input type="').concat(d,'" id="').concat(u,'-input" class="form-control mt-3" />'):e,'\n                            </div>\n                            <div class="modal-footer">\n                                ').concat("verify"===n||"ask"===n?'<button\n                                          type="button"\n                                          class="btn '.concat(i?"btn-primary":"blue-btn-plain-primary",'"\n                                          onclick="document.getElementById(\'').concat(u,"').close()\"\n                                      >\n                                          ").concat(s,"\n                                      </button>"):"",'\n                                <button\n                                    type="submit"\n                                    class="btn ').concat(i?"blue-btn-plain-primary":"btn-primary",'"\n                                >\n                                    ').concat(r,'\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>').concat(s,"</button>\n                </form>\n            </dialog>")),new Promise((e=>{var t;const o=document.getElementById(u),a=()=>{const n=document.getElementById(u);n&&n.remove()};null==o||o.showModal(),null==o||o.addEventListener("close",(()=>{a(),e(!1)})),null==o||null===(t=o.querySelector(".modal-content > form"))||void 0===t||t.addEventListener("submit",(t=>{t.preventDefault(),"ask"===n&&(o.close(),a(),e((null==o?void 0:o.querySelector("input")).value||"")),o.close(),a(),e(!0)}))}))}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await l("ask",n,e)},tell:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await l("tell",n,e)},verify:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await l("verify",n,e)}}})();
+(()=>{"use strict";var e={786:(e,n,t)=>{t.d(n,{k:()=>l});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"]};function l(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return n=n||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[e]?n.indexOf("de-")>-1?t[e][1]:t[e][0]:e}},762:(e,n,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(n,{Os:()=>l});const l=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()}},n={};function t(o){var l=n[o];if(void 0!==l)return l.exports;var a=n[o]={exports:{}};return e[o](a,a.exports,t),a.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var o=t(762),l=t(786);async function a(e,n){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:a=(0,l.k)("Message"),icon:i,switchPrimaryBtn:r=!1,acceptBtnText:s=("verify"===e?(0,l.k)("Yes"):"OK"),cancelBtnText:d=("verify"===e?(0,l.k)("No"):(0,l.k)("Cancel")),inputType:c="text"}=t;const u=(0,o.Os)();return document.getElementById(u)||document.body.insertAdjacentHTML("beforeend",`<dialog class="blue-modal modal" id="${u}" aria-labelledby="${u}-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ${i?`<div class="me-2">${i}</div>`:""}\n                                <h1 class="modal-title fs-5" id="${u}-label">${a}</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="${d}"\n                                    onclick="document.getElementById('${u}').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ${"ask"===e?`<label for="${u}-input">${n}</label>\n                                          <input type="${c}" id="${u}-input" class="form-control mt-3" />`:n}\n                            </div>\n                            <div class="modal-footer">\n                                ${"verify"===e||"ask"===e?`<button\n                                          type="button"\n                                          class="btn ${r?"btn-primary":"blue-btn-plain-primary"}"\n                                          onclick="document.getElementById('${u}').close()"\n                                      >\n                                          ${d}\n                                      </button>`:""}\n                                <button\n                                    type="submit"\n                                    class="btn ${r?"blue-btn-plain-primary":"btn-primary"}"\n                                >\n                                    ${s}\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>${d}</button>\n                </form>\n            </dialog>`),new Promise((n=>{const t=document.getElementById(u),o=()=>{const e=document.getElementById(u);e&&e.remove()};t?.showModal(),t?.addEventListener("close",(()=>{o(),n(!1)})),t?.querySelector(".modal-content > form")?.addEventListener("submit",(l=>{l.preventDefault(),"ask"===e&&(t.close(),o(),n((t?.querySelector("input")).value||"")),t.close(),o(),n(!0)}))}))}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await a("ask",e,n)},tell:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await a("tell",e,n)},verify:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await a("verify",e,n)}}})();

package/dist/js/dialog.js

@@ -32,13 +32,52 @@ async function dialog(dialogType, text) {
   } = options;
   const id = (0, _utils.guid)();
   const addToDom = () => {
-    document.body.insertAdjacentHTML("beforeend", /* HTML */"<dialog class=\"blue-modal modal\" id=\"".concat(id, "\" aria-labelledby=\"").concat(id, "-label\">\n                <div class=\"modal-dialog\">\n                    <div class=\"modal-content\">\n                        <form>\n                            <div class=\"modal-header\">\n                                ").concat(icon ? /* html */"<div class=\"me-2\">".concat(icon, "</div>") : "", "\n                                <h1 class=\"modal-title fs-5\" id=\"").concat(id, "-label\">").concat(title, "</h1>\n                                <button\n                                    type=\"button\"\n                                    class=\"btn-close\"\n                                    aria-label=\"").concat(cancelBtnText, "\"\n                                    onclick=\"document.getElementById('").concat(id, "').close()\"\n                                ></button>\n                            </div>\n                            <div class=\"modal-body\">\n                                ").concat(dialogType === "ask" ? /* HTML */"<label for=\"".concat(id, "-input\">").concat(text, "</label>\n                                          <input type=\"").concat(inputType, "\" id=\"").concat(id, "-input\" class=\"form-control mt-3\" />") : text, "\n                            </div>\n                            <div class=\"modal-footer\">\n                                ").concat(dialogType === "verify" || dialogType === "ask" ? /* HTML */"<button\n                                          type=\"button\"\n                                          class=\"btn ".concat(switchPrimaryBtn ? "btn-primary" : "blue-btn-plain-primary", "\"\n                                          onclick=\"document.getElementById('").concat(id, "').close()\"\n                                      >\n                                          ").concat(cancelBtnText, "\n                                      </button>") : "", "\n                                <button\n                                    type=\"submit\"\n                                    class=\"btn ").concat(switchPrimaryBtn ? "blue-btn-plain-primary" : "btn-primary", "\"\n                                >\n                                    ").concat(acceptBtnText, "\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method=\"dialog\" class=\"blue-modal-backdrop\">\n                    <button>").concat(cancelBtnText, "</button>\n                </form>\n            </dialog>"));
+    document.body.insertAdjacentHTML("beforeend", /* HTML */`<dialog class="blue-modal modal" id="${id}" aria-labelledby="${id}-label">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <form>
+                            <div class="modal-header">
+                                ${icon ? /* html */`<div class="me-2">${icon}</div>` : ""}
+                                <h1 class="modal-title fs-5" id="${id}-label">${title}</h1>
+                                <button
+                                    type="button"
+                                    class="btn-close"
+                                    aria-label="${cancelBtnText}"
+                                    onclick="document.getElementById('${id}').close()"
+                                ></button>
+                            </div>
+                            <div class="modal-body">
+                                ${dialogType === "ask" ? /* HTML */`<label for="${id}-input">${text}</label>
+                                          <input type="${inputType}" id="${id}-input" class="form-control mt-3" />` : text}
+                            </div>
+                            <div class="modal-footer">
+                                ${dialogType === "verify" || dialogType === "ask" ? /* HTML */`<button
+                                          type="button"
+                                          class="btn ${switchPrimaryBtn ? "btn-primary" : "blue-btn-plain-primary"}"
+                                          onclick="document.getElementById('${id}').close()"
+                                      >
+                                          ${cancelBtnText}
+                                      </button>` : ""}
+                                <button
+                                    type="submit"
+                                    class="btn ${switchPrimaryBtn ? "blue-btn-plain-primary" : "btn-primary"}"
+                                >
+                                    ${acceptBtnText}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <form method="dialog" class="blue-modal-backdrop">
+                    <button>${cancelBtnText}</button>
+                </form>
+            </dialog>`);
   };
   if (!document.getElementById(id)) {
     addToDom();
   }
   return new Promise(resolve => {
-    var _modalEl$querySelecto;
     const modalEl = document.getElementById(id);
     const removeFromDom = () => {
       const modalEl = document.getElementById(id);
@@ -50,14 +89,14 @@ async function dialog(dialogType, text) {
       removeFromDom();
       resolve(false);
     };
-    modalEl === null || modalEl === void 0 || modalEl.showModal();
-    modalEl === null || modalEl === void 0 || modalEl.addEventListener("close", onHidden);
-    modalEl === null || modalEl === void 0 || (_modalEl$querySelecto = modalEl.querySelector(".modal-content > form")) === null || _modalEl$querySelecto === void 0 || _modalEl$querySelecto.addEventListener("submit", e => {
+    modalEl?.showModal();
+    modalEl?.addEventListener("close", onHidden);
+    modalEl?.querySelector(".modal-content > form")?.addEventListener("submit", e => {
       e.preventDefault();
       if (dialogType === "ask") {
         modalEl.close();
         removeFromDom();
-        resolve((modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelector("input")).value || "");
+        resolve((modalEl?.querySelector("input")).value || "");
       }
       modalEl.close();
       removeFromDom();

package/dist/js/progress.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress={...window.blueWeb.progress,start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"fixed-top";const o="string"==typeof r||r instanceof String?document.querySelector(r.toString()):r;let n=document.getElementById(e);n||(n=document.createElement("div"),n.id=e,n.className="progress ".concat(t," rounded-0"),n.setAttribute("style","--bs-progress-height: 0.25rem"),n.setAttribute("role","progressbar"),n.setAttribute("aria-label",s),n.setAttribute("aria-valuemin","0"),n.setAttribute("aria-valuemax","100"),n.innerHTML='<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>',o.appendChild(n));const i=n.querySelector(".progress-bar");if(i){window.blueWeb.progress.progress=0;var b=setInterval((function(){var e,r=5*Math.random();window.blueWeb.progress.progress+=r,window.blueWeb.progress.progress=Math.min(window.blueWeb.progress.progress,100),i.style.width=window.blueWeb.progress.progress+"%",null===(e=n)||void 0===e||e.setAttribute("aria-valuenow",Math.round(window.blueWeb.progress.progress).toString()),window.blueWeb.progress.progress>=100&&clearInterval(b)}),200)}},stop:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress";const r=document.getElementById(e);r&&(window.blueWeb.progress.progress=100,setTimeout((()=>{r.remove()}),500))}},window.blueWeb.progress})();
+(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress={...window.blueWeb.progress,start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"fixed-top";const o="string"==typeof r||r instanceof String?document.querySelector(r.toString()):r;let i=document.getElementById(e);i||(i=document.createElement("div"),i.id=e,i.className=`progress ${t} rounded-0`,i.setAttribute("style","--bs-progress-height: 0.25rem"),i.setAttribute("role","progressbar"),i.setAttribute("aria-label",s),i.setAttribute("aria-valuemin","0"),i.setAttribute("aria-valuemax","100"),i.innerHTML='<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>',o.appendChild(i));const n=i.querySelector(".progress-bar");if(n){window.blueWeb.progress.progress=0;var b=setInterval((function(){var e=5*Math.random();window.blueWeb.progress.progress+=e,window.blueWeb.progress.progress=Math.min(window.blueWeb.progress.progress,100),n.style.width=window.blueWeb.progress.progress+"%",i?.setAttribute("aria-valuenow",Math.round(window.blueWeb.progress.progress).toString()),window.blueWeb.progress.progress>=100&&clearInterval(b)}),200)}},stop:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress";const r=document.getElementById(e);r&&(window.blueWeb.progress.progress=100,setTimeout((()=>{r.remove()}),500))}},window.blueWeb.progress})();

package/dist/js/progress.js

@@ -20,20 +20,19 @@ window.blueWeb.progress = {
     if (!progressEl) {
       progressEl = document.createElement("div");
       progressEl.id = id;
-      progressEl.className = "progress ".concat(positionClass, " rounded-0");
+      progressEl.className = `progress ${positionClass} rounded-0`;
       progressEl.setAttribute("style", "--bs-progress-height: 0.25rem");
       progressEl.setAttribute("role", "progressbar");
       progressEl.setAttribute("aria-label", ariaLabel);
       progressEl.setAttribute("aria-valuemin", "0");
       progressEl.setAttribute("aria-valuemax", "100");
-      progressEl.innerHTML = /*html*/"<div class=\"progress-bar progress-bar-striped progress-bar-animated\" style=\"width: 0%\"></div>";
+      progressEl.innerHTML = /*html*/`<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>`;
       parentEl.appendChild(progressEl);
     }
     const progressBar = progressEl.querySelector(".progress-bar");
     if (!progressBar) return;
     window.blueWeb.progress.progress = 0;
     var interval = setInterval(function () {
-      var _progressEl;
       // Simuliere einen natürlichen Anstieg
       var increment = Math.random() * 5; // Zufälliger Anstieg zwischen 0 und 5
       window.blueWeb.progress.progress += increment;
@@ -41,7 +40,7 @@ window.blueWeb.progress = {
 
       // Aktualisiere die Progressbar
       progressBar.style.width = window.blueWeb.progress.progress + "%";
-      (_progressEl = progressEl) === null || _progressEl === void 0 || _progressEl.setAttribute("aria-valuenow", Math.round(window.blueWeb.progress.progress).toString());
+      progressEl?.setAttribute("aria-valuenow", Math.round(window.blueWeb.progress.progress).toString());
 
       // Stoppe das Intervall, wenn 100% erreicht sind
       if (window.blueWeb.progress.progress >= 100) {

package/dist/js/read-view.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var t={};function e(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class n extends HTMLElement{constructor(){super(),e(this,"startX",0),e(this,"startY",0),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n            </style>\n            <button aria-label="Edit"></button>\n            <div role="presentation">\n                <slot></slot>\n            </div>\n        ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)))}onEditRequested(){this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.startX=t.clientX,this.startY=t.clientY}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("read-view",n)})();
+(()=>{"use strict";class t extends HTMLElement{startX=0;startY=0;constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["disabled"]}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){"disabled"===t&&this.updateDisabledState()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n\n                :host([disabled]) div {\n                    background-color: transparent;\n                }\n            </style>\n            <button aria-label="Edit"></button>\n            <div role="presentation">\n                <slot></slot>\n            </div>\n        ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)),this.updateDisabledState())}updateDisabledState(){const t=this.hasAttribute("disabled");this.button?.setAttribute("aria-disabled",String(t)),this.container?.setAttribute("aria-disabled",String(t))}onEditRequested(){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.hasAttribute("disabled")||(this.startX=t.clientX,this.startY=t.clientY)}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){this.hasAttribute("disabled")||"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("read-view",t)})();

package/dist/js/read-view.d.ts

@@ -3,6 +3,7 @@
  * Fires event "EditRequested" when the user clicks the read view.
  * @element read-view
  * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
  * @cssprop --bs-primary-rgb - The primary color as an RGB value.
  * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
  * @cssprop --bs-border-radius-sm - The border radius for the read view.
@@ -22,8 +23,11 @@ export declare class ReadView extends HTMLElement {
     private startX;
     private startY;
     constructor();
+    static get observedAttributes(): string[];
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private render;
+    private updateDisabledState;
     private onEditRequested;
     private onMouseDown;
     private mouseHasMovedAfterMouseDown;

package/dist/js/read-view.js

@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReadView = void 0;
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const DRAG_THRESHOLD = 5;
 
 /**
@@ -14,6 +11,7 @@ const DRAG_THRESHOLD = 5;
  * Fires event "EditRequested" when the user clicks the read view.
  * @element read-view
  * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
  * @cssprop --bs-primary-rgb - The primary color as an RGB value.
  * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
  * @cssprop --bs-border-radius-sm - The border radius for the read view.
@@ -28,33 +26,91 @@ const DRAG_THRESHOLD = 5;
  * })
  */
 class ReadView extends HTMLElement {
+  startX = 0;
+  startY = 0;
   constructor() {
     super();
-    _defineProperty(this, "startX", 0);
-    _defineProperty(this, "startY", 0);
     this.attachShadow({
       mode: "open"
     });
   }
+  static get observedAttributes() {
+    return ["disabled"];
+  }
   connectedCallback() {
     this.render();
   }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "disabled") {
+      this.updateDisabledState();
+    }
+  }
   render() {
     if (!this.shadowRoot) return;
-    this.shadowRoot.innerHTML = /* HTML */"\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n            </style>\n            <button aria-label=\"Edit\"></button>\n            <div role=\"presentation\">\n                <slot></slot>\n            </div>\n        ";
+    this.shadowRoot.innerHTML = /* HTML */`
+            <style>
+                button {
+                    display: block;
+                    margin: 0;
+                    padding: 0;
+                    appearance: none;
+                    background-color: transparent;
+                    border: none;
+                    line-height: 1;
+                    outline: 0;
+                }
+
+                button:focus-visible + div {
+                    outline: 0;
+                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);
+                    border-color: rgba(var(--bs-primary-rgb), 50%);
+                }
+
+                div {
+                    display: inline-block;
+                    box-sizing: border-box;
+                    width: auto;
+                    max-width: 100%;
+                    border-color: transparent;
+                    border-radius: var(--bs-border-radius-sm, 3px);
+                    border: 1px solid transparent;
+                    transition: background 0.2s;
+                }
+
+                div:hover {
+                    background-color: var(--bs-secondary-bg-subtle);
+                }
+
+                :host([disabled]) div {
+                    background-color: transparent;
+                }
+            </style>
+            <button aria-label="Edit"></button>
+            <div role="presentation">
+                <slot></slot>
+            </div>
+        `;
     this.button = this.shadowRoot.querySelector("button");
     this.container = this.shadowRoot.querySelector("div");
     this.button.addEventListener("click", this.onEditRequested.bind(this));
     this.container.addEventListener("click", this.onReadViewClick.bind(this));
     this.container.addEventListener("mousedown", this.onMouseDown.bind(this));
+    this.updateDisabledState();
+  }
+  updateDisabledState() {
+    const isDisabled = this.hasAttribute("disabled");
+    this.button?.setAttribute("aria-disabled", String(isDisabled));
+    this.container?.setAttribute("aria-disabled", String(isDisabled));
   }
   onEditRequested() {
+    if (this.hasAttribute("disabled")) return;
     this.dispatchEvent(new CustomEvent("EditRequested", {
       bubbles: true,
       composed: true
     }));
   }
   onMouseDown(event) {
+    if (this.hasAttribute("disabled")) return;
     this.startX = event.clientX;
     this.startY = event.clientY;
   }
@@ -62,6 +118,7 @@ class ReadView extends HTMLElement {
     return Math.abs(this.startX - event.clientX) >= DRAG_THRESHOLD || Math.abs(this.startY - event.clientY) >= DRAG_THRESHOLD;
   }
   onReadViewClick(event) {
+    if (this.hasAttribute("disabled")) return;
     const target = event.target;
     if (target.tagName.toLowerCase() !== "a" && !this.mouseHasMovedAfterMouseDown(event)) {
       event.preventDefault();

package/dist/js/side-layout.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML='\n            <style>\n                :host {\n                    --spacing: 0.25rem;\n                    --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n                    --toggler-size: calc(\n                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n                    );\n                    --side-width: 18rem;\n                    --base-z-index: 0;\n                }\n\n                .root {\n                    position: relative;\n                    display: grid;\n                    height: 100%;\n                    grid-template-columns:\n                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n                        auto;\n                    grid-template-rows: var(--toggler-size) auto;\n                }\n\n                .hidden-input {\n                    position: fixed;\n                    --size: 0;\n                    height: var(--size);\n                    width: var(--size);\n                    appearance: none;\n                    opacity: 0;\n                }\n\n                .toggler {\n                    grid-column-start: 2;\n                }\n\n                .hidden-input:focus-visible + .toggler ::slotted(*) {\n                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n                }\n\n                @media (width < 64rem) {\n                    .toggler[for="layout-expand"] {\n                        display: none;\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    .toggler[for="layout-drawer"] {\n                        display: none;\n                    }\n                }\n\n                .header {\n                    grid-column-start: 3;\n                    grid-column-end: 5;\n                }\n\n                .side {\n                    overflow: auto;\n                }\n\n                @media (width < 64rem) {\n                    .side {\n                        translate: -100% 0;\n                        height: 100%;\n                        transition: translate 0.2s ease;\n                    }\n\n                    #layout-drawer:checked ~ .side {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        z-index: calc(var(--base-z-index) + 1);\n                        translate: 0;\n                        width: calc(var(--spacing) * 80);\n                        box-shadow: var(--drawer-side-shadow);\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .side {\n                        grid-column-start: 2;\n                        grid-column-end: 4;\n                    }\n                }\n\n                .main {\n                    overflow: auto;\n                    grid-column-start: 2;\n                    grid-column-end: 5;\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .main {\n                        grid-column-start: 4;\n                    }\n                }\n\n                .overlay {\n                    position: fixed;\n                    z-index: var(--base-z-index);\n                    inset: 0;\n                    display: none;\n                }\n\n                @media (width < 64rem) {\n                    #layout-drawer:checked ~ .overlay {\n                        display: block;\n                    }\n                }\n            </style>\n\n            <div class="root">\n                <input\n                    id="layout-expand"\n                    type="checkbox"\n                    class="hidden-input"\n                    '.concat(localStorage.getItem("side-layout-shrink")?"":"checked",'\n                />\n                <label class="toggler" for="layout-expand" title="').concat(n,'" role="button">\n                    <slot name="expand-toggler">🍔</slot>\n                </label>\n\n                <input id="layout-drawer" type="checkbox" class="hidden-input" />\n                <label class="toggler" for="layout-drawer" title="').concat(n,'" role="button">\n                    <slot name="drawer-toggler">🍔</slot>\n                </label>\n\n                <header class="header"><slot name="header"></slot></header>\n                <div class="side"><slot name="side"></slot></div>\n                <main class="main"><slot></slot></main>\n                <label aria-label="Close sidebar" for="layout-drawer" class="overlay"\n                    ><slot name="overlay"></slot\n                ></label>\n            </div>\n        ')}addEventListeners(){this.shadowRoot&&this.shadowRoot.querySelector("#layout-expand").addEventListener("change",this.handleLayoutExpandChange.bind(this))}handleLayoutExpandChange(n){n.target.checked?localStorage.removeItem("side-layout-shrink"):localStorage.setItem("side-layout-shrink","true")}}customElements.define("side-layout",n)})();
+(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    --spacing: 0.25rem;\n                    --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n                    --toggler-size: calc(\n                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n                    );\n                    --side-width: 18rem;\n                    --base-z-index: 0;\n                }\n\n                .root {\n                    position: relative;\n                    display: grid;\n                    height: 100%;\n                    grid-template-columns:\n                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n                        auto;\n                    grid-template-rows: var(--toggler-size) auto;\n                }\n\n                .hidden-input {\n                    position: fixed;\n                    --size: 0;\n                    height: var(--size);\n                    width: var(--size);\n                    appearance: none;\n                    opacity: 0;\n                }\n\n                .toggler {\n                    grid-column-start: 2;\n                }\n\n                .hidden-input:focus-visible + .toggler ::slotted(*) {\n                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n                }\n\n                @media (width < 64rem) {\n                    .toggler[for="layout-expand"] {\n                        display: none;\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    .toggler[for="layout-drawer"] {\n                        display: none;\n                    }\n                }\n\n                .header {\n                    grid-column-start: 3;\n                    grid-column-end: 5;\n                }\n\n                .side {\n                    overflow: auto;\n                }\n\n                @media (width < 64rem) {\n                    .side {\n                        translate: -100% 0;\n                        height: 100%;\n                        transition: translate 0.2s ease;\n                    }\n\n                    #layout-drawer:checked ~ .side {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        z-index: calc(var(--base-z-index) + 1);\n                        translate: 0;\n                        width: calc(var(--spacing) * 80);\n                        box-shadow: var(--drawer-side-shadow);\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .side {\n                        grid-column-start: 2;\n                        grid-column-end: 4;\n                    }\n                }\n\n                .main {\n                    overflow: auto;\n                    grid-column-start: 2;\n                    grid-column-end: 5;\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .main {\n                        grid-column-start: 4;\n                    }\n                }\n\n                .overlay {\n                    position: fixed;\n                    z-index: var(--base-z-index);\n                    inset: 0;\n                    display: none;\n                }\n\n                @media (width < 64rem) {\n                    #layout-drawer:checked ~ .overlay {\n                        display: block;\n                    }\n                }\n            </style>\n\n            <div class="root">\n                <input\n                    id="layout-expand"\n                    type="checkbox"\n                    class="hidden-input"\n                    ${localStorage.getItem("side-layout-shrink")?"":"checked"}\n                />\n                <label class="toggler" for="layout-expand" title="${n}" role="button">\n                    <slot name="expand-toggler">🍔</slot>\n                </label>\n\n                <input id="layout-drawer" type="checkbox" class="hidden-input" />\n                <label class="toggler" for="layout-drawer" title="${n}" role="button">\n                    <slot name="drawer-toggler">🍔</slot>\n                </label>\n\n                <header class="header"><slot name="header"></slot></header>\n                <div class="side"><slot name="side"></slot></div>\n                <main class="main"><slot></slot></main>\n                <label aria-label="Close sidebar" for="layout-drawer" class="overlay"\n                    ><slot name="overlay"></slot\n                ></label>\n            </div>\n        `}addEventListeners(){this.shadowRoot&&this.shadowRoot.querySelector("#layout-expand").addEventListener("change",this.handleLayoutExpandChange.bind(this))}handleLayoutExpandChange(n){n.target.checked?localStorage.removeItem("side-layout-shrink"):localStorage.setItem("side-layout-shrink","true")}}customElements.define("side-layout",n)})();

package/dist/js/side-layout.js

@@ -19,7 +19,145 @@ class SideLayout extends HTMLElement {
     if (!this.shadowRoot) return;
     const language = document.documentElement.lang || navigator.language;
     const toggleSidebarText = language.startsWith("de") ? "Seitenleiste umschalten" : "Toggle sidebar";
-    this.shadowRoot.innerHTML = /* HTML */"\n            <style>\n                :host {\n                    --spacing: 0.25rem;\n                    --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n                    --toggler-size: calc(\n                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n                    );\n                    --side-width: 18rem;\n                    --base-z-index: 0;\n                }\n\n                .root {\n                    position: relative;\n                    display: grid;\n                    height: 100%;\n                    grid-template-columns:\n                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n                        auto;\n                    grid-template-rows: var(--toggler-size) auto;\n                }\n\n                .hidden-input {\n                    position: fixed;\n                    --size: 0;\n                    height: var(--size);\n                    width: var(--size);\n                    appearance: none;\n                    opacity: 0;\n                }\n\n                .toggler {\n                    grid-column-start: 2;\n                }\n\n                .hidden-input:focus-visible + .toggler ::slotted(*) {\n                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n                }\n\n                @media (width < 64rem) {\n                    .toggler[for=\"layout-expand\"] {\n                        display: none;\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    .toggler[for=\"layout-drawer\"] {\n                        display: none;\n                    }\n                }\n\n                .header {\n                    grid-column-start: 3;\n                    grid-column-end: 5;\n                }\n\n                .side {\n                    overflow: auto;\n                }\n\n                @media (width < 64rem) {\n                    .side {\n                        translate: -100% 0;\n                        height: 100%;\n                        transition: translate 0.2s ease;\n                    }\n\n                    #layout-drawer:checked ~ .side {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        z-index: calc(var(--base-z-index) + 1);\n                        translate: 0;\n                        width: calc(var(--spacing) * 80);\n                        box-shadow: var(--drawer-side-shadow);\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .side {\n                        grid-column-start: 2;\n                        grid-column-end: 4;\n                    }\n                }\n\n                .main {\n                    overflow: auto;\n                    grid-column-start: 2;\n                    grid-column-end: 5;\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .main {\n                        grid-column-start: 4;\n                    }\n                }\n\n                .overlay {\n                    position: fixed;\n                    z-index: var(--base-z-index);\n                    inset: 0;\n                    display: none;\n                }\n\n                @media (width < 64rem) {\n                    #layout-drawer:checked ~ .overlay {\n                        display: block;\n                    }\n                }\n            </style>\n\n            <div class=\"root\">\n                <input\n                    id=\"layout-expand\"\n                    type=\"checkbox\"\n                    class=\"hidden-input\"\n                    ".concat(!localStorage.getItem("side-layout-shrink") ? "checked" : "", "\n                />\n                <label class=\"toggler\" for=\"layout-expand\" title=\"").concat(toggleSidebarText, "\" role=\"button\">\n                    <slot name=\"expand-toggler\">\uD83C\uDF54</slot>\n                </label>\n\n                <input id=\"layout-drawer\" type=\"checkbox\" class=\"hidden-input\" />\n                <label class=\"toggler\" for=\"layout-drawer\" title=\"").concat(toggleSidebarText, "\" role=\"button\">\n                    <slot name=\"drawer-toggler\">\uD83C\uDF54</slot>\n                </label>\n\n                <header class=\"header\"><slot name=\"header\"></slot></header>\n                <div class=\"side\"><slot name=\"side\"></slot></div>\n                <main class=\"main\"><slot></slot></main>\n                <label aria-label=\"Close sidebar\" for=\"layout-drawer\" class=\"overlay\"\n                    ><slot name=\"overlay\"></slot\n                ></label>\n            </div>\n        ");
+    this.shadowRoot.innerHTML = /* HTML */`
+            <style>
+                :host {
+                    --spacing: 0.25rem;
+                    --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+                    --toggler-size: calc(
+                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
+                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +
+                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)
+                    );
+                    --side-width: 18rem;
+                    --base-z-index: 0;
+                }
+
+                .root {
+                    position: relative;
+                    display: grid;
+                    height: 100%;
+                    grid-template-columns:
+                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))
+                        auto;
+                    grid-template-rows: var(--toggler-size) auto;
+                }
+
+                .hidden-input {
+                    position: fixed;
+                    --size: 0;
+                    height: var(--size);
+                    width: var(--size);
+                    appearance: none;
+                    opacity: 0;
+                }
+
+                .toggler {
+                    grid-column-start: 2;
+                }
+
+                .hidden-input:focus-visible + .toggler ::slotted(*) {
+                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);
+                }
+
+                @media (width < 64rem) {
+                    .toggler[for="layout-expand"] {
+                        display: none;
+                    }
+                }
+
+                @media (width >= 64rem) {
+                    .toggler[for="layout-drawer"] {
+                        display: none;
+                    }
+                }
+
+                .header {
+                    grid-column-start: 3;
+                    grid-column-end: 5;
+                }
+
+                .side {
+                    overflow: auto;
+                }
+
+                @media (width < 64rem) {
+                    .side {
+                        translate: -100% 0;
+                        height: 100%;
+                        transition: translate 0.2s ease;
+                    }
+
+                    #layout-drawer:checked ~ .side {
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        z-index: calc(var(--base-z-index) + 1);
+                        translate: 0;
+                        width: calc(var(--spacing) * 80);
+                        box-shadow: var(--drawer-side-shadow);
+                    }
+                }
+
+                @media (width >= 64rem) {
+                    #layout-expand:checked ~ .side {
+                        grid-column-start: 2;
+                        grid-column-end: 4;
+                    }
+                }
+
+                .main {
+                    overflow: auto;
+                    grid-column-start: 2;
+                    grid-column-end: 5;
+                }
+
+                @media (width >= 64rem) {
+                    #layout-expand:checked ~ .main {
+                        grid-column-start: 4;
+                    }
+                }
+
+                .overlay {
+                    position: fixed;
+                    z-index: var(--base-z-index);
+                    inset: 0;
+                    display: none;
+                }
+
+                @media (width < 64rem) {
+                    #layout-drawer:checked ~ .overlay {
+                        display: block;
+                    }
+                }
+            </style>
+
+            <div class="root">
+                <input
+                    id="layout-expand"
+                    type="checkbox"
+                    class="hidden-input"
+                    ${!localStorage.getItem("side-layout-shrink") ? "checked" : ""}
+                />
+                <label class="toggler" for="layout-expand" title="${toggleSidebarText}" role="button">
+                    <slot name="expand-toggler">🍔</slot>
+                </label>
+
+                <input id="layout-drawer" type="checkbox" class="hidden-input" />
+                <label class="toggler" for="layout-drawer" title="${toggleSidebarText}" role="button">
+                    <slot name="drawer-toggler">🍔</slot>
+                </label>
+
+                <header class="header"><slot name="header"></slot></header>
+                <div class="side"><slot name="side"></slot></div>
+                <main class="main"><slot></slot></main>
+                <label aria-label="Close sidebar" for="layout-drawer" class="overlay"
+                    ><slot name="overlay"></slot
+                ></label>
+            </div>
+        `;
   }
   addEventListeners() {
     if (!this.shadowRoot) return;

package/dist/js/utils.js

@@ -64,9 +64,9 @@ function setAlertMessage(message) {
   if (alertElement) {
     alertElement.style.display = "block";
     alertElement.classList.add("alert-" + (alertClassName === "loading" ? "info" : alertClassName));
-    alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
+    alertElement.querySelector(".alert-body").innerHTML = `<h2>` + message + `</h2>`;
     if (detailText) {
-      alertElement.querySelector(".alert-body").innerHTML += "<span>" + detailText + "</span>";
+      alertElement.querySelector(".alert-body").innerHTML += `<span>` + detailText + `</span>`;
     }
     const btnCloseElement = alertElement.querySelector(".btn-close");
     if (close) {
@@ -112,7 +112,7 @@ function fetchData(input, init) {
   }).catch(reason => {
     if (reason.text) {
       reason.text().then(errorMessage => {
-        setAlertMessage("".concat(reason.status, " - ").concat(reason.statusText || httpStatusCodes[reason.status] || "Error"), "danger", true, showErrorDetail ? errorMessage.toString().replace(/(<style[\w\W]+style>)/g, "").replace(/<[^>]+>/g, "") : undefined);
+        setAlertMessage(`${reason.status} - ${reason.statusText || httpStatusCodes[reason.status] || "Error"}`, "danger", true, showErrorDetail ? errorMessage.toString().replace(/(<style[\w\W]+style>)/g, "").replace(/<[^>]+>/g, "") : undefined);
         if (onError) {
           onError(errorMessage, reason);
         }