@limetech/lime-elements 40.6.2 → 40.7.0

package/dist/esm/limel-file-viewer.entry.js

@@ -626,6 +626,14 @@ function decodeParameterValueContinuations(header) {
         delete header.params[key];
     });
     paramKeys.forEach((paramVal, key) => {
+        if (Object.prototype.hasOwnProperty.call(header.params, key)) {
+            // The same name was also given as a plain parameter, which the starred keys were
+            // just deleted from around, so this write would be the only one here to override a
+            // name already taken. `filename="plain"; filename*0="cont"` resolves to the plain
+            // parameter either way round, so the reading does not come down to which of the
+            // two spellings the sender put first. See storeParam in mime-node.ts
+            return;
+        }
         let result = '';
         // Adjacent encoded sections are decoded together, because a single multi byte
         // character may be percent encoded across a section boundary.
@@ -651,12 +659,24 @@ function decodeParameterValueContinuations(header) {
 class PassThroughDecoder {
     constructor() {
         this.chunks = [];
+        this.pendingLineBreak = false;
     }
+    // The line break is written when the next line arrives, not after each line. The
+    // CRLF in front of a multipart boundary belongs to the boundary (RFC 2046 5.1.1), so
+    // the last line of a part ended by a boundary must not carry one.
     update(line) {
+        if (this.pendingLineBreak) {
+            this.chunks.push('\n');
+        }
         this.chunks.push(line);
-        this.chunks.push('\n');
+        this.pendingLineBreak = true;
     }
-    finalize() {
+    // A part ended by the end of the message has no boundary to own its final line
+    // break, so there it stays content
+    finalize(boundaryEnded = false) {
+        if (!boundaryEnded && this.pendingLineBreak) {
+            this.chunks.push('\n');
+        }
         // convert an array of arraybuffers into a blob and then back into a single arraybuffer
         return blobToArrayBuffer(new Blob(this.chunks, { type: 'application/octet-stream' }));
     }
@@ -712,6 +732,7 @@ class QPDecoder {
         this.buffer = new Uint8Array(this.maxChunkSize);
         this.bufferPos = 0;
         this.chunks = [];
+        this.pendingLineBreak = false;
     }
     writeByte(byte) {
         if (this.bufferPos >= this.buffer.length) {
@@ -742,7 +763,13 @@ class QPDecoder {
     // the result is handed on as bytes. Running the body charset over the encoded source
     // instead corrupted every part whose charset was not ASCII compatible: the same
     // content that decoded correctly in base64 came out as mojibake in quoted-printable.
+    //
+    // As in PassThroughDecoder, a hard line break is only written once the next line
+    // arrives, so the CRLF that belongs to a following boundary is not decoded as content.
     update(line) {
+        if (this.pendingLineBreak) {
+            this.writeByte(CHR_LF);
+        }
         let len = line.length;
         // a line ending in '=' is a soft line break, the newline is not part of the content
         const softBreak = len > 0 && line[len - 1] === CHR_EQUALS;
@@ -766,11 +793,13 @@ class QPDecoder {
             literalStart = i + 1;
         }
         this.writeBytes(line, literalStart, len);
-        if (!softBreak) {
+        this.pendingLineBreak = !softBreak;
+    }
+    // see PassThroughDecoder.finalize
+    finalize(boundaryEnded = false) {
+        if (!boundaryEnded && this.pendingLineBreak) {
             this.writeByte(CHR_LF);
         }
-    }
-    finalize() {
         this.flushBuffer();
         // convert an array of arraybuffers into a blob and then back into a single arraybuffer
         return blobToArrayBuffer(new Blob(this.chunks, { type: 'application/octet-stream' }));
@@ -868,7 +897,9 @@ class MimeNode {
             this.contentDecoder = new PassThroughDecoder();
         }
     }
-    async finalize() {
+    // `boundaryEnded` tells that the part was ended by a multipart boundary, which owns
+    // the line break after the last line of the part (RFC 2046 5.1.1)
+    async finalize(boundaryEnded = false) {
         if (this.state === 'finished') {
             return;
         }
@@ -884,19 +915,19 @@ class MimeNode {
                 break;
             }
         }
-        await this.finalizeChildNodes();
-        this.content = this.contentDecoder ? await this.contentDecoder.finalize() : null;
+        await this.finalizeChildNodes(boundaryEnded);
+        this.content = this.contentDecoder ? await this.contentDecoder.finalize(boundaryEnded) : null;
         // The decoder buffers every body line it received, so keeping it around
         // retains a second copy of the content for the lifetime of the node.
         // Nothing reads it once the node is finished, so release it here.
         this.contentDecoder = null;
         this.state = 'finished';
     }
-    async finalizeChildNodes() {
+    async finalizeChildNodes(boundaryEnded = false) {
         // Children are only ever appended, so everything before the cursor is already
         // finished and re-visiting it only costs time.
         while (this.finalizedChildCount < this.childNodes.length) {
-            await this.childNodes[this.finalizedChildCount++].finalize();
+            await this.childNodes[this.finalizedChildCount++].finalize(boundaryEnded);
         }
     }
     // Strip RFC 822 comments (parenthesized text) from structured header values.
@@ -999,11 +1030,16 @@ class MimeNode {
         let quote = false;
         let escaped = false;
         let chr;
-        const addChr = (c) => {
+        // Whitespace ahead of the first character of a value is padding and is dropped, the
+        // whitespace between two characters of it is content
+        const flushSpace = () => {
             if (value.length) {
                 value += pendingSpace;
             }
             pendingSpace = '';
+        };
+        const addChr = (c) => {
+            flushSpace();
             value += c;
         };
         const takeValue = () => {
@@ -1017,9 +1053,10 @@ class MimeNode {
         // headers are resolved. Letting the last one win means `boundary="b"; boundary="c"`
         // registers a boundary that no delimiter in the message matches, which drops the
         // body without an error. hasOwnProperty, because a parameter may be named
-        // `constructor` or `toString`.
+        // `constructor` or `toString`. A name is a token and a token is never empty, so the
+        // nameless parameter of `text/plain; =v` names nothing and is dropped.
         const storeParam = (name, result) => {
-            if (!Object.prototype.hasOwnProperty.call(response.params, name)) {
+            if (name && !Object.prototype.hasOwnProperty.call(response.params, name)) {
                 response.params[name] = result;
             }
         };
@@ -1036,10 +1073,7 @@ class MimeNode {
         // next one. Without this the name would keep growing across the `;` and swallow
         // whatever followed, which is how `x=1; flag; boundary="AAA"` loses its boundary.
         const storeEmptyKey = () => {
-            const name = takeValue().trim();
-            if (name) {
-                storeParam(name.toLowerCase(), '');
-            }
+            storeParam(takeValue().trim().toLowerCase(), '');
         };
         for (let i = 0, len = str.length; i < len; i++) {
             chr = str.charAt(i);
@@ -1057,6 +1091,22 @@ class MimeNode {
                     value += chr;
                     break;
                 case 'value':
+                    if (quoteClosed && chr !== ';') {
+                        // Nothing behind a closed quoted string reaches the value. RFC 2045
+                        // says a parameter value is a token or a quoted string, not both, so
+                        // what follows one is junk and only the `;` that ends the parameter
+                        // still counts. Tested ahead of the branches rather than beside the
+                        // append at the foot of them, where each branch above was a way
+                        // around it. A second `"` reopened quoting, which both carried the
+                        // whitespace in front of it into the value and took the `;` along, so
+                        // `boundary="AAA" "; boundary=BBB"` registered a boundary of `AAA `
+                        // that no delimiter matches and the whole body was dropped without an
+                        // error; the escape branch appended arbitrary characters the same way.
+                        // quoteClosed is only ever set while no quote is open, and this is
+                        // what keeps one from being opened afterwards.
+                        escaped = false;
+                        break;
+                    }
                     if (escaped) {
                         addChr(chr);
                     }
@@ -1073,12 +1123,7 @@ class MimeNode {
                     }
                     else if (!quote && chr === '"') {
                         quote = chr;
-                        // whitespace before a quote that opens the value is padding, but
-                        // between a token and a quoted string it is content
-                        if (value.length) {
-                            value += pendingSpace;
-                        }
-                        pendingSpace = '';
+                        flushSpace();
                     }
                     else if (!quote && chr === ';') {
                         storeValue();
@@ -1087,13 +1132,9 @@ class MimeNode {
                     else if (!quote && (chr === ' ' || chr === '\t')) {
                         pendingSpace += chr;
                     }
-                    else if (!quoteClosed) {
+                    else {
                         addChr(chr);
                     }
-                    // Anything else is trailing junk after a closed quoted string. RFC 2045
-                    // says a parameter value is a token or a quoted string, not both, and
-                    // appending the junk is how `boundary="AAA" (unterminated comment`
-                    // turned into a boundary that no delimiter in the message matches.
                     escaped = false;
                     break;
             }
@@ -4988,12 +5029,12 @@ class PostalMime {
                     continue;
                 }
                 if (isTerminator) {
-                    await boundary.node.finalize();
+                    await boundary.node.finalize(true);
                     this.currentNode = boundary.node.parentNode || this.root;
                 }
                 else {
                     // finalize any open child nodes (should be just one though)
-                    await boundary.node.finalizeChildNodes();
+                    await boundary.node.finalizeChildNodes(true);
                     this.currentNode = new MimeNode({
                         postalMime: this,
                         parentNode: boundary.node,

package/dist/esm/limel-markdown.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
-import { m as markdownToHTML } from './markdown-parser-CAPDx7i8.js';
+import { m as markdownToHTML } from './markdown-parser-DFP65EFu.js';
 import { g as globalConfig } from './config-Dnt5w_Bp.js';
 import { d as defaultSchema } from './index-BN64nlbO.js';
 import { a as adaptColorContrast } from './adapt-color-contrast-BQoih_t0.js';
@@ -1136,7 +1136,7 @@ const Markdown = class {
      */
     async toMarkdown() {
         await this.rendering;
-        const { exportMarkdown } = await import('./markdown-exporter-DblYRMhY.js');
+        const { exportMarkdown } = await import('./markdown-exporter-tb8ft8Gq.js');
         return exportMarkdown(this.rootElement, this.cachedCombinedWhitelist);
     }
     textChanged() {

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
 import { L as LevelMapping, E as EditorMenuTypes, i as isInlineImageTag, M as MouseButtons, e as editorMenuTypesArray } from './types-C_Yu8dOg.js';
-import { g as getLinkAttributes, m as markdownToHTML, s as sanitizeHTML } from './markdown-parser-CAPDx7i8.js';
+import { g as getLinkAttributes, m as markdownToHTML, s as sanitizeHTML } from './markdown-parser-DFP65EFu.js';
 import { c as cloneDeep } from './cloneDeep-DAbOtbs8.js';
 import { t as translations } from './translations-Y4i8PVc9.js';
 import { c as decodeHTML, e as decodeHTMLStrict } from './index-BN64nlbO.js';

package/dist/esm/limel-tab-bar.entry.js

@@ -2,10 +2,8 @@ import { r as registerInstance, c as createEvent, h, a as getElement } from './i
 import { g as getIconName, b as getIconColor } from './get-icon-props-CgNJbSP4.js';
 import { A as ARROW_UP, b as ARROW_DOWN, H as HOME, c as END, d as ARROW_LEFT, e as ARROW_RIGHT } from './keycodes-DQ5DmW_Y.js';
 import { i as isEqual } from './isEqual-CE83yS8T.js';
-import { M as MDCRipple } from './component-CrjPGt1I.js';
 import { S as SetCache, c as cacheHas } from './_baseIsEqual-CyF4P8uM.js';
 import { a as arrayIncludes, b as baseRest, i as isArrayLikeObject, c as baseFlatten } from './isArrayLikeObject-CJB8HbtH.js';
-import './ponyfill-6YuZiAPi.js';
 import './eq-CZ30nDJE.js';
 import './_getTag-BiAaLWvH.js';
 import './isObject-BJQylLSL.js';
@@ -259,12 +257,8 @@ function findReachable(count, start, step, wrap, canMoveTo) {
     return NO_NAVIGATION_TARGET;
 }
 
-const tabBarCss = () => `.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase)}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab{position:relative}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}:host(limel-tab-bar){--limel-tab-background-color:var(--contrast-300);--limel-tab-border-radius:0.625rem;--limel-active-tab-background-color:var(       --tab-panel-background-color,       rgb(var(--contrast-100))   );--limel-tab-active-outer-edge-curve-size:0.75rem;--limel-tab-separator-width:0.125rem;--limel-tab-separator-background-color:rgb(var(--contrast-600));isolation:isolate;display:block;position:relative}limel-scroller{--limel-scroller-fade-color:var(--limel-tab-background-color);--limel-scroller-content-padding:0.25rem       var(--limel-tab-active-outer-edge-curve-size) 0;background-color:rgb(var(--limel-tab-background-color))}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:var(--limel-tab-border-radius);border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active):after{content:"";display:block;background-color:var(--limel-tab-separator-background-color);width:var(--limel-tab-separator-width);height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:calc(-1 * var(--limel-tab-separator-width))}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{color:rgb(var(--contrast-800));margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.mdc-tab--active{border-radius:var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:"";display:block;width:var(--limel-tab-active-outer-edge-curve-size);height:var(--limel-tab-active-outer-edge-curve-size);position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E")}.mdc-tab--active:before{left:calc(-1 * var(--limel-tab-active-outer-edge-curve-size));transform:rotateY(180deg)}.mdc-tab--active:after{right:calc(-1 * var(--limel-tab-active-outer-edge-curve-size))}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab--active .mdc-tab__icon{color:var(--mdc-theme-primary)}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}`;
+const tabBarCss = () => `@charset "UTF-8";:host(limel-tab-bar){--limel-tab-background-color:var(--contrast-300);--limel-tab-border-radius:0.625rem;--limel-tab-content-inset:0.25rem;--limel-active-tab-background-color:var(       --tab-panel-background-color,       rgb(var(--contrast-100))   );--limel-active-tab-color:var(       --lime-primary-color,       var(--limel-theme-primary-color)   );--limel-tab-active-outer-edge-curve-size:0.75rem;--limel-tab-separator-width:0.125rem;--limel-tab-separator-background-color:rgb(var(--contrast-600));isolation:isolate;display:block;position:relative}limel-scroller{--limel-scroller-fade-color:var(--limel-tab-background-color);--limel-scroller-content-padding:0.25rem       var(--limel-tab-active-outer-edge-curve-size) 0;background-color:rgb(var(--limel-tab-background-color))}:host(.has-tabs-with-equal-width:not([orientation=vertical])) button{flex:1 0 auto;max-width:var(--tab-bar-horizontal-tab-max-width, none)}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;position:relative;display:flex;box-sizing:border-box;border-radius:0;padding:var(--limel-tab-content-inset);min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem;outline:none;cursor:pointer;white-space:nowrap;font-size:var(--limel-theme-default-font-size)}button limel-icon{transition:color 0.2s ease;color:rgb(var(--contrast-800));margin-left:-0.25rem;flex-shrink:0}button span.text{transition:color 0.2s ease;line-height:1.25;overflow:hidden;text-overflow:ellipsis;color:var(--limel-theme-on-surface-color)}button:hover span.text{color:var(--limel-theme-text-primary-on-background-color)}button limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600));pointer-events:none;flex-shrink:0}button[aria-selected=true]{background-color:var(--limel-active-tab-background-color);z-index:2}button[aria-selected=true]:before,button[aria-selected=true]:after{content:"";display:block;width:var(--limel-tab-active-outer-edge-curve-size);height:var(--limel-tab-active-outer-edge-curve-size);position:absolute;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E")}button[aria-selected=true] limel-icon{color:var(--limel-active-tab-color)}button[aria-selected=true] span.text{color:var(--limel-active-tab-color)}span.content{transition:box-shadow 0.2s ease;display:flex;flex-grow:1;min-width:0;align-items:center;justify-content:center;gap:0.375rem;padding:0 0.75rem;border-radius:calc(var(--limel-tab-border-radius) - var(--limel-tab-content-inset))}button:focus-visible span.content{transition-duration:0.3s;box-shadow:var(--shadow-depth-8-focused)}:host(limel-tab-bar:not([orientation=vertical])) button{max-width:var(--tab-bar-horizontal-tab-max-width, 16rem)}:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):after{content:"";display:block;background-color:var(--limel-tab-separator-background-color);width:var(--limel-tab-separator-width);height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:calc(-1 * var(--limel-tab-separator-width))}:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):last-of-type:after{display:none}:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]{border-radius:var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0}:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before,:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after{bottom:0}:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before{left:calc(-1 * var(--limel-tab-active-outer-edge-curve-size));transform:rotateY(180deg)}:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after{right:calc(-1 * var(--limel-tab-active-outer-edge-curve-size))}:host(limel-tab-bar[orientation=vertical]){width:var(--tab-bar-vertical-width, 10rem)}:host(limel-tab-bar[orientation=vertical]) div[role=tablist]{height:100%}:host(limel-tab-bar[orientation=vertical]) limel-scroller{--limel-scroller-content-padding:var(           --limel-tab-active-outer-edge-curve-size       )       0 var(--limel-tab-active-outer-edge-curve-size) 0.25rem;height:100%}:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]{border-radius:var(--limel-tab-border-radius) 0 0 var(--limel-tab-border-radius)}:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before,:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after{right:0}:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before{bottom:100%;transform:rotateY(180deg)}:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after{top:100%;transform:rotate(180deg)}:host(limel-tab-bar[orientation=vertical]) span.content{justify-content:flex-start}:host(limel-tab-bar[orientation=vertical]) span.text{flex-grow:1}`;
 
-const NAVIGATION = {
-    orientation: 'horizontal',
-    wrap: true,
-};
 const TabBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -273,8 +267,13 @@ const TabBar = class {
          * List of tabs to display
          */
         this.tabs = [];
-        this.ripples = new Map();
+        /**
+         * Whether the tabs are laid out in a row, above the content they belong
+         * to, or in a column, next to it.
+         */
+        this.orientation = 'horizontal';
         this.hasLoaded = false;
+        this.isLaidOutAgain = false;
         this.handleKeyDown = this.handleKeyDown.bind(this);
     }
     async connectedCallback() {
@@ -283,7 +282,6 @@ const TabBar = class {
         if (!this.hasLoaded) {
             return;
         }
-        this.updateRipples();
         this.revealedTabId = undefined;
         await this.revealActiveTab('auto');
     }
@@ -292,15 +290,13 @@ const TabBar = class {
         this.triggerIconColorWarning();
     }
     async componentDidRender() {
-        this.updateRipples();
-        await this.revealActiveTab(this.hasLoaded ? undefined : 'auto');
-    }
-    disconnectedCallback() {
-        this.destroyRipples();
+        const isLaidOutAgain = this.isLaidOutAgain;
+        this.isLaidOutAgain = false;
+        await this.revealActiveTab(!this.hasLoaded || isLaidOutAgain ? 'auto' : undefined, isLaidOutAgain);
     }
     render() {
-        const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), NAVIGATION);
-        return (h("div", { key: '7ab809d50e3605613f027a1782d54511e734de93', class: "mdc-tab-bar", role: "tablist", onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'd6ac2c90e6da77a239292ac0e90288c3e70b62f8' }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
+        const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), this.getNavigationOptions());
+        return (h("div", { key: 'd9f9e2659c8199ddd8202f04ed08535a91da2948', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'fdc0e8389ddc7ac8d0d63e5c777de6b6bf337697', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);
@@ -310,44 +306,31 @@ const TabBar = class {
         }
         this.revealedTabId = undefined;
     }
+    orientationChanged() {
+        this.revealedTabId = undefined;
+        this.isLaidOutAgain = true;
+    }
+    getOrientation() {
+        return this.orientation === 'vertical' ? 'vertical' : 'horizontal';
+    }
+    getNavigationOptions() {
+        return { orientation: this.getOrientation(), wrap: true };
+    }
     getTabElements() {
         return [
             ...this.host.shadowRoot.querySelectorAll('button[role="tab"]'),
         ];
     }
     /**
-     * Gives every tab MDC's ripple, which is the feedback when a tab is
-     * pressed. Tabs that are gone lose theirs.
-     */
-    updateRipples() {
-        const tabs = this.getTabElements();
-        for (const [tab, ripple] of this.ripples) {
-            if (tabs.includes(tab)) {
-                continue;
-            }
-            ripple.destroy();
-            this.ripples.delete(tab);
-        }
-        for (const tab of tabs) {
-            if (!this.ripples.has(tab)) {
-                this.ripples.set(tab, new MDCRipple(tab));
-            }
-        }
-    }
-    destroyRipples() {
-        for (const ripple of this.ripples.values()) {
-            ripple.destroy();
-        }
-        this.ripples.clear();
-    }
-    /**
-     * A tab that is activated by the user has focus, and the scroller reveals
-     * what has focus. This is for a tab that becomes active without it.
+     * A tab that is activated by the user receives focus, and the scroller
+     * reveals what receives focus. This is for a tab that becomes active
+     * without it, or that keeps it while the bar is laid out again.
      *
      * @param behavior - `auto` to jump to the tab. Leave it out to let the
      * scroller glide there.
+     * @param evenWithFocus - reveal the tab also when it has focus
      */
-    async revealActiveTab(behavior) {
+    async revealActiveTab(behavior, evenWithFocus = false) {
         const index = this.tabs.findIndex((tab) => tab.active);
         if (index === -1) {
             this.revealedTabId = undefined;
@@ -359,19 +342,23 @@ const TabBar = class {
         this.revealedTabId = this.tabs[index].id;
         const element = this.getTabElements()[index];
         const scroller = this.host.shadowRoot.querySelector('limel-scroller');
-        if (!element || !scroller || element.matches(':focus')) {
+        if (!element || !scroller) {
+            return;
+        }
+        if (element.matches(':focus') && !evenWithFocus) {
             return;
         }
         await scroller.componentOnReady();
         await scroller.reveal(element, behavior);
     }
     handleKeyDown(event) {
-        if (!isNavigationKey(event, NAVIGATION)) {
+        const options = this.getNavigationOptions();
+        if (!isNavigationKey(event, options)) {
             return;
         }
         event.preventDefault();
         const current = this.getTabElements().indexOf(event.target);
-        this.activateTab(findNavigationTarget(this.tabs, event.key, current, NAVIGATION));
+        this.activateTab(findNavigationTarget(this.tabs, event.key, current, options));
     }
     activateTab(index) {
         if (index === NO_NAVIGATION_TARGET) {
@@ -403,16 +390,10 @@ const TabBar = class {
         if (color) {
             style.color = color;
         }
-        return (h("limel-icon", { class: "mdc-tab__icon", name: name, style: style, size: "small", "aria-hidden": "true" }));
+        return (h("limel-icon", { name: name, style: style, size: "small", "aria-hidden": "true" }));
     }
     renderTab(tab, index, isTabStop) {
-        return (h("button", { class: {
-                'mdc-tab': true,
-                'mdc-tab--active': !!tab.active,
-            }, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "mdc-tab__content" }, this.renderIcon(tab), h("span", { class: "mdc-tab__text-label" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : ''), h("span", { class: {
-                'mdc-tab-indicator': true,
-                'mdc-tab-indicator--active': !!tab.active,
-            } }, h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })), h("span", { class: "mdc-tab__ripple" })));
+        return (h("button", { role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "content" }, this.renderIcon(tab), h("span", { class: "text" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : '')));
     }
     triggerIconColorWarning() {
         if (this.tabs.some((tab) => tab.iconColor)) {
@@ -423,6 +404,9 @@ const TabBar = class {
     static get watchers() { return {
         "tabs": [{
                 "tabsChanged": 0
+            }],
+        "orientation": [{
+                "orientationChanged": 0
             }]
     }; }
 };

package/dist/esm/limel-tab-panel.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
 import { d as dispatchResizeEvent } from './dispatch-resize-event-z_E3sq3p.js';
 
-const tabPanelCss = () => `:host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}`;
+const tabPanelCss = () => `:host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}:host(limel-tab-panel[orientation=vertical]) div.tab-panel{flex-direction:row}:host(limel-tab-panel[orientation=vertical]) div.tab-content{min-width:0}`;
 
 const TabPanel = class {
     constructor(hostRef) {
@@ -11,6 +11,11 @@ const TabPanel = class {
          * The tabs to display in the panel
          */
         this.tabs = [];
+        /**
+         * Whether the tabs are laid out in a row, above the content, or in a
+         * column, to the left of it.
+         */
+        this.orientation = 'horizontal';
         this.slotElements = [];
         this.handleChangeTabs = this.handleChangeTabs.bind(this);
         this.setSlotElements = this.setSlotElements.bind(this);
@@ -44,7 +49,7 @@ const TabPanel = class {
         }
     }
     render() {
-        return (h(Host, { key: 'acb9f2f1081972fc45104cc357055af883ebad2d', onChangeTab: this.handleChangeTabs }, h("div", { key: '318df7ddc8d28f5952c7e67b154088ca13f4355a', class: "tab-panel" }, h("limel-tab-bar", { key: '2656eb61f4e815eba9636bf939e368651bbd8dcf', tabs: this.tabs }), h("div", { key: '41d1bf3149a19d28d7d9f1ace0744ffe26811080', class: "tab-content" }, h("slot", { key: 'ee234615e96536b40ce089978cba5bd21a1fb129' })))));
+        return (h(Host, { key: '130cd711926c119be1b3084dfb966afe6d280926', onChangeTab: this.handleChangeTabs }, h("div", { key: 'e76da7ba8c93a3d9d4c03a84a01a5358b39b17ed', class: "tab-panel" }, h("limel-tab-bar", { key: '0866cd6c59e5e4ea372678a969bc646db81ed285', tabs: this.tabs, orientation: this.orientation }), h("div", { key: 'c0ee8b9d6bffcb32fc4894bf0ba7409ac194577d', class: "tab-content" }, h("slot", { key: '46b6cd024188a04ba466d831051cf3628996d97e' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();